', { - '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 = $('
').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 = $('
').text(newRowNum); - $tr.append($td); - - // Kind (add a select field for chosing a kind) - newKind = null; - $select = $('	').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 - 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 = $(' ',{ - '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(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 += '' + 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); - }; - -})(jQuery); - - -(function ($) { - AblePlayer.prototype.initVimeoPlayer = function () { - - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - containerId = this.mediaId + '_vimeo'; - - // add container to which Vimeo player iframe will be appended - this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - - // if a described version is available && user prefers desription - // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } - this.activeVimeoId = vimeoId; - - // Notes re. Vimeo Embed Options: - // If a video is owned by a user with a paid Plus, PRO, or Business account, - // setting the "controls" option to "false" will hide the default controls, without hiding captions. - // This is a new option from Vimeo; previously used "background:true" to hide the controller, - // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - - if (this.autoplay && this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } - - videoDimensions = this.getVimeoDimensions(this.activeVimeoId, containerId); - if (videoDimensions) { - this.vimeoWidth = videoDimensions[0]; - this.vimeoHeight = videoDimensions[1]; - this.aspectRatio = thisObj.ytWidth / thisObj.ytHeight; - } - else { - // dimensions are initially unknown - // sending null values to Vimeo results in a video that uses the default Vimeo dimensions - // these can then be scraped from the iframe and applied to this.$ableWrapper - this.vimeoWidth = null; - this.vimeoHeight = null; - } - - options = { - id: vimeoId, - width: this.vimeoWidth, - controls: false - }; - - this.vimeoPlayer = new Vimeo.Player(containerId, options); - - this.vimeoPlayer.ready().then(function() { - - if (!thisObj.hasPlaylist) { - // remove the media element, since Vimeo replaces that with its own element in an iframe - // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() - thisObj.$media.remove(); - - // define variables that will impact player setup - - // vimeoSupportsPlaybackRateChange - // changing playbackRate is only supported if the video is hosted on a Pro or Business account - // unfortunately there is no direct way to query for that information. - // this.vimeoPlayer.getPlaybackRate() returns a value, regardless of account type - // This is a hack: - // Attempt to change the playbackRate. If it results in an error, assume changing playbackRate is not supported. - // Supported playbackRate values are 0.5 to 2. - thisObj.vimeoPlaybackRate = 1; - thisObj.vimeoPlayer.setPlaybackRate(thisObj.vimeoPlaybackRate).then(function(playbackRate) { - // playback rate was set - thisObj.vimeoSupportsPlaybackRateChange = true; - }).catch(function(error) { - thisObj.vimeoSupportsPlaybackRateChange = false; - }); - deferred.resolve(); - } - }); - return promise; - }; - - AblePlayer.prototype.getVimeoPaused = function () { - - var deferred, promise; - deferred = new $.Deferred(); - promise = deferred.promise(); - - this.vimeoPlayer.getPaused().then(function (paused) { - // paused is Boolean - deferred.resolve(paused); - }); - - return promise; - } - - AblePlayer.prototype.getVimeoEnded = function () { - - var deferred, promise; - deferred = new $.Deferred(); - promise = deferred.promise(); - - this.vimeoPlayer.getEnded().then(function (ended) { - // ended is Boolean - deferred.resolve(ended); - }); - - return promise; - } - - AblePlayer.prototype.getVimeoState = function () { - - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - promises = []; - - gettingPausedPromise = this.vimeoPlayer.getPaused(); - gettingEndedPromise = this.vimeoPlayer.getEnded(); - - promises.push(gettingPausedPromise); - promises.push(gettingEndedPromise); - - gettingPausedPromise.then(function (paused) { - deferred.resolve(paused); - }); - gettingEndedPromise.then(function (ended) { - deferred.resolve(ended); - }); - $.when.apply($, promises).then(function () { - deferred.resolve(); - }); - return promise; - } - - AblePlayer.prototype.getVimeoDimensions = function (vimeoContainerId) { - - // get dimensions of Vimeo video, return array with width & height - - var d, url, $iframe, width, height; - - d = []; - - if (typeof this.playerMaxWidth !== 'undefined') { - d[0] = this.playerMaxWidth; - // optional: set height as well; not required though since Vimeo will adjust height to match width - if (typeof this.playerMaxHeight !== 'undefined') { - d[1] = this.playerMaxHeight; - } - return d; - } - else { - if (typeof $('#' + vimeoContainerId) !== 'undefined') { - $iframe = $('#' + vimeoContainerId); - width = $iframe.width(); - height = $iframe.height(); - if (width > 0 && height > 0) { - d[0] = width; - d[1] = height; - return d; - } - } - } - return false; - }; - - AblePlayer.prototype.getVimeoCaptionTracks = function () { - - // get data via Vimeo Player API, and push data to this.captions - // Note: Vimeo doesn't expose the caption cues themselves - // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - var thisObj, i, trackId, isDefaultTrack; - - thisObj = this; - - this.vimeoPlayer.getTextTracks().then(function(tracks) { - - // each Vimeo track includes the following: - // label (local name of the language) - // language (2-character code) - // kind (captions or subtitles, as declared by video owner) - // mode ('disabled' or 'showing') - - if (tracks.length) { - - // create a new button for each caption track - for (i=0; i<tracks.length; i++) { - - thisObj.hasCaptions = true; - if (thisObj.prefCaptions === 1) { - thisObj.captionsOn = true; - } - else { - thisObj.captionsOn = false; - } - // assign the default track based on language of the player - if (tracks[i]['language'] === thisObj.lang) { - isDefaultTrack = true; - } - else { - isDefaultTrack = false; - } - thisObj.tracks.push({ - 'kind': tracks[i]['kind'], - 'language': tracks[i]['language'], - 'label': tracks[i]['label'], - 'def': isDefaultTrack - }); - } - thisObj.captions = thisObj.tracks; - thisObj.hasCaptions = true; - - // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - deferred.resolve(); - } - else { - thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; - deferred.resolve(); - } - }); - - return promise; - }; - -})(jQuery); diff --git a/src/build/ableplayer.css b/src/build/ableplayer.css deleted file mode 100644 index 94f51c9..0000000 --- a/src/build/ableplayer.css +++ /dev/null @@ -1,1316 +0,0 @@ -.able-wrapper { - position: relative; - margin: 1em 0; - padding: 0; - max-width: 100%; - height: auto; - box-sizing: content-box!important; - text-align: left; -} - -.able { - position: relative; - margin: 0; - padding: 0; - width: 100%; - background-color: #000; - box-shadow: 0 0 16px #262626; - z-index: 5000; -} - -.able-column-left { - float: left; -} - -.able-column-right { - float: left; -} - -.able .able-vidcap-container { - background-color: #000; - left: 0; - margin: 0; - position: relative; - top: 0; -} - -.able .able-audcap-container { - background-color: #000; - position: relative; - margin: 0; - padding: 1.5em .25em; -} - -.able-player { - font-family: Arial,Helvetica,sans-serif; - background-color: #262626; -} - -.able-audio { - padding-top: 1em; -} - -.able-offscreen { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; -} - -.able-media-container audio { - display: none!important; -} - -.able-controller { - position: relative; - border-bottom: 1px solid #4c4c4c; - background-color: #464646; - min-height: 38px; - padding: 0; -} - -.able-poster { - position: absolute; - top: 0; - left: 0; - width: 100%!important; - height: auto!important; -} - -.able .able-vidcap-container { - overflow: visible; -} - -.able .able-vidcap-container video { - max-width: 100%; -} - -.able-media-container iframe { - max-width: 100%; -} - -.able-big-play-button { - position: absolute; - font-size: 8em; - color: #fdfdfd; - background-color: transparent; - border: none; - outline: 0; - left: 0; - top: 0; - padding: 0; - z-index: 6500; - opacity: .75; -} - -.able-big-play-button:focus,.able-big-play-button:hover { - opacity: 100; -} - -.able-big-play-button .icon-play,.able-big-play-button svg { - background-color: #000; - padding: 1rem 2rem; -} - -.able-big-play-button:hover .icon-play,.able-big-play-button:hover svg { - outline-style: solid; - outline-width: medium; - outline-color: #8ab839!important; -} - -.able-big-play-button:focus .icon-play,.able-big-play-button:focus svg { - outline-style: solid; - outline-width: medium; - outline-color: #ffbb37!important; -} - -.able-left-controls,.able-right-controls { - overflow: visible; -} - -.able-left-controls div[role=button],.able-right-controls div[role=button] { - vertical-align: middle; -} - -.able-left-controls { - float: left; -} - -.able-right-controls { - float: right; -} - -.able-black-controls,.able-black-controls div[role=button],.able-black-controls label { - color: #000!important; -} - -.able-black-controls .able-seekbar { - border: 1px solid #000; -} - -.able-black-controls label,.able-white-controls,.able-white-controls div[role=button] { - color: #fff!important; -} - -.able-white-controls .able-seekbar { - border: 1px solid #fff; -} - -.able-controller div[role=button] { - background: 0 0; - position: relative; - display: inline-block; - border-style: none; - margin: 3px; - padding: 0; - font-size: 20px; - min-width: 24px; - border: none; - overflow: visible!important; - z-index: 6600; -} - -.able-controller div[role=button]>img,.able-controller div[role=button]>span { - width: 20px; - margin: 0 auto; - padding: 0; - z-index: 6700; -} - -.able-controller .buttonOff { - opacity: .5; - z-index: 6800; -} - -.able-controller .able-seekbar { - margin: 0 5px; - z-index: 6900; -} - -.able-controller div[role=button]:focus,.able-controller div[role=button]:hover { - outline-style: solid; - outline-width: medium; -} - -.able-controller div[role=button]:hover { - outline-color: #8ab839!important; -} - -.able-controller div[role=button]:focus { - outline-color: #ffbb37!important; -} - -.able-controller button::-moz-focus-inner,.able-search-results button::-moz-focus-inner { - border: 0; -} - -.able-seekbar-wrapper { - display: inline-block; - vertical-align: middle; -} - -.able-seekbar { - position: relative; - height: .5em; - border: 1px solid; - background-color: #000; - margin: 0 3px; - border-style: solid; - border-width: 2px; - border-color: #fff; -} - -.able-seekbar-loaded { - display: inline-block; - position: absolute; - left: 0; - top: 0; - height: .5em; - background-color: #464646; - z-index: 5100; -} - -.able-seekbar-played { - display: inline-block; - position: absolute; - left: 0; - top: 0; - height: .5em; - background-color: #dadada; - z-index: 5200; -} - -.able-seekbar-head { - display: inline-block; - position: relative; - left: 0; - top: -.4em; - background-color: #fdfdfd; - width: .8em; - height: .8em; - border: 1px solid; - border-radius: .8em; - z-index: 5500; -} - -.able-volume-slider { - width: 34px; - height: 80px; - background-color: #464646; - margin: 0; - padding: 5px 0; - position: absolute; - right: 0; - bottom: 60px; - display: block; - z-index: 9100; -} - -.able-volume-help { - display: none; -} - -.able-volume-slider input[type=range] { - appearance: slider-vertical; - writing-mode: bt-rl; - width: 28px; - height: 100%; - background: 0 0; -} - -.able-volume-slider input[type=range]::-moz-range-track { - border: 1px solid #fff; - width: 7px; - cursor: pointer; - background: #000; -} - -input[type=range]::-moz-range-thumb { - background-color: #fdfdfd; - outline: 1px solid #333; - height: 16px; - width: 24px; - z-index: 9175; -} - -.able-status-bar { - height: 1.5em; - min-height: 1.5em; - color: #ccc; - font-size: .9em; - background-color: transparent; - padding: .5em .5em .25em; -} - -.able-status-bar span.able-timer { - text-align: left; - float: left; - width: 32%; -} - -.able-status-bar span.able-speed { - float: left; - width: 33%; - text-align: center; -} - -.able-status { - font-style: italic; - float: right; - width: 32%; - text-align: right; -} - -div.able-captions-wrapper { - width: 100%; - margin: 0; - padding: 0; - text-align: center; - display: block; - z-index: 6000; -} - -div.able-captions { - display: none; - padding: .15em .25em; - line-height: 1.35em; - background-color: #000; - font-size: 1em; - color: #fff; - opacity: .75; -} - -div.able-vidcap-container div.able-captions-overlay { - position: absolute; - margin: 0; - bottom: .5em; -} - -div.able-vidcap-container div.able-captions-below { - position: relative; - min-height: 3.2em; -} - -div.able-audcap-container.captions-off { - display: none; -} - -div.able-descriptions { - position: relative; - color: #ff6; - background-color: #262626; - min-height: 2.8em; - border-top: 1px solid #666; - margin: 0; - padding: 3%; - width: 94%; - text-align: center; -} - -div.able-now-playing { - text-align: center; - font-weight: 700; - font-size: 1.1em; - color: #fff; - background-color: transparent; - padding: .5em .5em 1em; -} - -div.able-now-playing span { - font-size: .9em; -} - -div.able-now-playing span span { - display: block; -} - -div.able-video div.able-now-playing { - display: none; -} - -div.able-modal-dialog { - position: absolute; - height: auto; - max-width: 90%; - margin-left: auto; - margin-right: auto; - top: 5%; - left: 0; - right: 0; - outline: 0 none; - display: none; - color: #000; - background-color: #fafafa; - box-sizing: content-box!important; - z-index: 10000; - max-height: 90%; - overflow: scroll; -} - -@supports (transform:translate(-50%,-50%)) { - div.able-modal-dialog { - top: 50%; - left: 50%; - transform: translate(-50%,-50%)!important; - } -} - -div.able-modal-overlay { - position: fixed; - width: 100%; - height: 100%; - background-color: #000; - opacity: .5; - margin: 0; - padding: 0; - top: 0; - left: 0; - display: none; - z-index: 9500; -} - -button.modalCloseButton { - position: absolute; - top: 5px; - right: 5px; -} - -button.modal-button { - margin-right: 5px; -} - -div.able-modal-dialog button:focus,div.able-modal-dialog button:hover,div.able-modal-dialog input:focus,div.able-modal-dialog input:hover { - outline-style: solid; - outline-width: 2px; -} - -div.able-modal-dialog button:hover,div.able-modal-dialog input:hover { - outline-color: #8ab839; -} - -div.able-modal-dialog button:focus,div.able-modal-dialog input:focus { - outline-color: #ffbb37; -} - -div.able-modal-dialog h1 { - font-weight: 700; - font-size: 1.8em; - line-height: 1.2em; - margin: .75em 0; - color: #000; - text-align: center; -} - -.able-help-div,.able-prefs-form,.able-resize-form { - background-color: #f5f5f5; - border: medium solid #ccc; - padding: .5em 1em; - margin: 0 0 0 1em; - width: 25em; - display: none; -} - -.able-prefs-form div[role=group] { - margin: 1em 0; - padding: 0; - border: none; -} - -.able-prefs-form h2 { - color: #000; - font-weight: 700; - font-size: 1.1em; -} - -.able-prefs-form div[role=group]>div { - display: table; - margin-left: 1em; -} - -.able-prefs-form div[role=group]>div>input { - display: table-cell; - width: 1em; - vertical-align: middle; -} - -.able-prefs-form div[role=group]>div>label { - display: table-cell; - padding-left: .5em; -} - -.able-desc-pref-prompt { - font-weight: 700; - font-style: italic; - margin-left: 1em!important; -} - -.able-prefDescFormat>div { - margin-left: 1.5em; -} - -.able-prefs-captions label,.able-prefs-captions select { - display: block; - float: left; - margin-bottom: .25em; -} - -.able-prefs-captions label { - width: 6em; - text-align: right; - padding-right: 1em; -} - -.able-prefs-captions select { - width: 10em; - font-size: .9em; - border-radius: none; -} - -.able-prefs-descriptions>div.able-prefs-select { - margin: .5em 1em; -} - -.able-prefs-descriptions>div.able-prefs-select>label,.able-prefs-descriptions>div.able-prefs-slider>label { - width: 6em; - text-align: right; - padding-right: 1em; -} - -.able-prefs-descriptions>div.able-prefs-select>select,.able-prefs-descriptions>div.able-prefs-slider>select { - width: 10em; - font-size: .9em; - border-radius: none; -} - -div.able-prefDescPause { - margin-top: 1em; -} - -.able-prefs-form div.able-captions-sample { - padding: .5em; - text-align: center; -} - -.able-prefs-form div.able-desc-sample { - padding: .5em; - text-align: center; - color: #fff; - background-color: #000; -} - -.able-prefs-form h2 { - margin-top: 0; - margin-bottom: .5em; - font-size: 1.1em; -} - -.able-prefs-form ul { - margin-top: 0; -} - -able-prefs-form-keyboard ul { - list-style-type: none; -} - -span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift { - color: #666; - font-style: italic; -} - -span.able-modkey { - font-weight: 700; - color: #000; - font-size: 1.1em; -} - -.able-resize-form h1 { - font-size: 1.15em; -} - -.able-resize-form div div { - margin: 1em; -} - -.able-resize-form label { - padding-right: .5em; - font-weight: 700; -} - -.able-resize-form input[type=text] { - font-size: 1em; -} - -.able-resize-form input[readonly] { - color: #aaa; -} - -.able-window-toolbar { - background-color: #464646; - min-height: 15px; - padding: 10px; - border-style: solid; - border-width: 0 0 1px 0; -} - -.able-draggable:hover { - cursor: move; -} - -.able-window-toolbar .able-button-handler-preferences { - position: absolute; - top: 0; - right: 0; - font-size: 1.5em; - background-color: transparent; - border: none; - outline: 0; - padding: 0; - z-index: 9300; -} - -.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar .able-button-handler-preferences:hover { - outline-style: solid; - outline-width: medium; -} - -.able-window-toolbar .able-button-handler-preferences:hover { - outline-color: #8ab839!important; -} - -.able-window-toolbar .able-button-handler-preferences:focus { - outline-color: #ffbb37!important; -} - -.able-window-toolbar .able-popup { - position: absolute; - cursor: default; - right: 0; - top: 0; - display: block; -} - -.able-drag { - border: 2px dashed #f90; - cursor: move; -} - -.able-resizable { - position: absolute; - width: 20px; - height: 20px; - padding: 5px 2px; - bottom: 0; - right: 0; - cursor: nwse-resize; -} - -.able-resizable svg line { - stroke: #595959; - stroke-width: 2px; -} - -.able-sign-window { - position: relative; - margin: 1em; - z-index: 8000; -} - -.able-sign-window video { - width: 100%; -} - -.able-sign-window:focus { - outline: 0; -} - -div.able-chapters-div { - padding: 0; -} - -div.able-chapters-div .able-chapters-heading { - margin: 1em .75em; - font-size: 1.1em; - font-weight: 700; -} - -div.able-chapters-div ul { - list-style-type: none; - padding-left: 0; -} - -div.able-chapters-div ul li { - max-width: 100%; - padding: 0; - height: 2em; -} - -div.able-chapters-div button { - width: 100%; - height: 100%; - border: none; - background-color: transparent; - color: #000; - font-size: 1em; - text-align: left; - padding: .15em 1em; -} - -div.able-chapters-div li.able-current-chapter { - background-color: #000!important; -} - -div.able-chapters-div li.able-current-chapter button { - color: #fff!important; -} - -div.able-chapters-div li.able-focus { - background-color: #4c4c4c; -} - -div.able-chapters-div button::-moz-focus-inner,div.able-chapters-div button:focus,div.able-chapters-div button:hover { - border: 0; - outline: 0; - color: #fff!important; -} - -div.able-wrapper.fullscreen { - margin: 0!important; - position: fixed!important; - top: 0!important; - background: 0 0!important; -} - -.able-alert,.able-tooltip { - position: absolute; - padding: 5px 10px; - border-color: #000; - border-width: 1px; - color: #000!important; - background-color: #ccc; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - display: block; -} - -.able-alert { - background-color: #ffc; - box-shadow: 0 0 16px #262626; - z-index: 9400; - position: absolute; - top: 1em; -} - -.able-popup { - z-index: 9200; -} - -.able-tooltip { - z-index: 9000; -} - -.able-popup { - position: absolute; - margin: 0; - padding: 0; - border-color: #000; - border-width: 1px; - background-color: #000; - opacity: .85; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - display: block; - cursor: default; -} - -ul.able-popup { - list-style-type: none; -} - -.able-popup li { - padding: .25em 1em .25em .25em; - margin: 1px; - width: auto; - color: #fff; -} - -.able-popup li.able-focus { - background-color: #ccc; - color: #000; -} - -.able-popup-captions li { - padding-left: 1em; -} - -.able-popup-captions li[aria-checked=true] { - padding-left: 0; -} - -.able-popup-captions li[aria-checked=true]::before { - content: "\2713 "; -} - -.able-transcript-area { - border-width: 1px; - border-style: solid; - height: 400px; - z-index: 7000; - outline: 0; - padding-bottom: 25px; - background-color: #fff; -} - -.able-transcript { - position: relative; - overflow-y: scroll; - padding-left: 5%; - padding-right: 5%; - background-color: #fff; - height: 350px; -} - -.able-transcript div { - margin: 1em 0; -} - -.able-transcript-heading { - font-size: 1.4em; - font-weight: 700; - margin: 1em 0; - padding: 0; -} - -.able-transcript-chapter-heading { - font-size: 1.2em; - font-weight: 700; - margin: 0; - padding: 0; -} - -.able-transcript div.able-transcript-desc { - background-color: #fee; - border: thin solid #336; - font-style: italic; - padding: 1em; -} - -.able-transcript .able-unspoken { - font-weight: 700; -} - -.able-transcript .able-hidden { - position: absolute!important; - clip: rect(1px 1px 1px 1px); - clip: rect(1px,1px,1px,1px); -} - -.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover { - background-color: #000!important; - color: #fff!important; - padding: .25em .1em; - border: none; - outline: 0; -} - -.able-previous { - background: #000!important; - font-style: italic; -} - -.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover { - background: #ffc; - color: #000; - border: none; - outline: 0; - border-bottom: 1px solid #000; - cursor: pointer; -} - -.able-window-toolbar label { - display: inline; - margin-right: 10px; - color: #fff; -} - -.able-controller div[role=button]:focus,.able-controller div[role=button]:hover,.able-controller input:focus,.able-controller input:hover,.able-seekbar-head:focus,.able-seekbar-head:hover,.able-window-toolbar input:focus,.able-window-toolbar input:hover,.able-window-toolbar select:focus,.able-window-toolbar select:hover { - outline-style: solid; - outline-width: 2px; -} - -.able-controller div[role=button]:focus,.able-controller input:focus,.able-seekbar-head:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus { - outline-color: #ffbb37; -} - -.able-controller div[role=button]:hover,.able-controller input:hover,.able-seekbar-head:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover { - outline-color: #8ab839; -} - -.able-window-toolbar .transcript-language-select-wrapper { - float: right; - padding-right: 30px; -} - -.able-playlist { - list-style-type: none; - margin: 0; - background-color: #fff; - padding: 5px 0; -} - -.able-playlist li { - background-color: #ddd; - margin: 5px; - padding: 0; - border: 2px solid #aaa; - border-radius: 5px; - width: auto; - max-width: 100%; -} - -.able-playlist li button { - border: none; - color: #000; - background-color: transparent; - font-size: 1em; - width: 100%; - padding: 5px 10px; - text-align: left; -} - -.able-playlist li button:active,.able-playlist li button:focus,.able-playlist li button:hover { - background-color: #ffeeb3; - color: #000; - text-decoration: none; - outline: 0; -} - -.able-playlist li button::-moz-focus-inner { - border: 0; -} - -.able-playlist li button img { - width: 100px; - float: left; - margin-right: 10px; -} - -.able-playlist li.able-current { - background-color: #340449; - border-color: #230330; -} - -.able-playlist li.able-current button { - color: #fff; - font-weight: 700; - text-decoration: none; - outline: 0; -} - -.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover { - color: #000; -} - -#able-search-term-echo { - font-weight: 700; - font-style: italic; -} - -.able-search-results ul li { - font-size: 1.1em; - margin-bottom: 1em; -} - -button.able-search-results-time { - font-size: 1em; - font-weight: 700; - cursor: pointer; -} - -button.able-search-results-time:active,button.able-search-results-time:focus,button.able-search-results-time:hover { - color: #fff; - background-color: #000; -} - -.able-search-results-text { - padding-left: 1em; -} - -.able-search-term { - background-color: #ffc; - font-weight: 700; -} - -#search-term { - font-weight: 700; - font-style: italic; -} - -#able-vts-instructions { - margin-bottom: 1.5em; - padding: 1em; - border: 1px solid #999; - width: 720px; - max-width: 90%; -} - -#able-vts fieldset { - margin: 1em; - border: none; -} - -#able-vts fieldset legend { - color: #000; - font-weight: 700; -} - -#able-vts fieldset div { - float: left; - padding-right: 1em; -} - -#able-vts table { - clear: left; -} - -#able-vts table,#able-vts table td,#able-vts table th { - border: 1px solid #000; - border-collapse: collapse; - padding: .5em .75em; -} - -#able-vts table th.actions { - min-width: 140px; -} - -#able-vts table td button { - width: auto; - padding: 0; - margin: 2px; -} - -#able-vts table td button svg { - width: 16px; - height: 16px; -} - -#able-vts table button:hover svg { - fill: #c00; -} - -tr.kind-chapters,tr.kind-subtitles { - background-color: #fff; -} - -tr.kind-descriptions { - background-color: #fee; -} - -tr.kind-chapters { - background-color: #e6ffe6; -} - -.able-vts-dragging { - background-color: #ffc; -} - -div#able-vts-icon-credit { - margin: 1em; -} - -div#able-vts-alert { - display: none; - position: fixed; - top: 5px; - left: 5px; - border: 2px solid #666; - background-color: #ffc; - padding: 1em; - font-weight: 700; - z-index: 9400; -} - -button#able-vts-save { - font-size: 1em; - padding: .25em; - border-radius: 5px; - margin-bottom: 1em; - font-weight: 700; -} - -button#able-vts-save:focus,button#able-vts-save:hover { - color: #fff; - background-color: #060; -} - -.able-vts-output-instructions { - width: 720px; - max-width: 90%; -} - -#able-vts textarea { - height: 200px; - width: 720px; - max-width: 90%; -} - -.able-clipped,.able-screenreader-alert { - position: absolute!important; - clip: rect(1px 1px 1px 1px); - clip: rect(1px,1px,1px,1px); - width: 1px!important; - height: 1px!important; - overflow: hidden!important; -} - -.able-error { - display: block; - background: #ffc; - border: 2px solid #000; - color: red; - margin: .75em; - padding: .5em; -} - -.able-fallback { - display: block; - text-align: center; - border: 2px solid #335; - background-color: #eee; - color: #000; - font-weight: 700; - font-size: 1.1em; - padding: 1em; - margin-bottom: 1em; - max-width: 500px; - width: 95%; -} - -.able-fallback div,.able-fallback p,.able-fallback ul { - text-align: left; -} - -.able-fallback li { - font-weight: 400; -} - -.able-fallback img { - width: 90%; - margin: 1em auto; - opacity: .3; -} - -.able-fallback img.able-poster { - position: relative; -} - -.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg { - display: inline-block; - width: 1em; - height: 1em; - fill: currentColor; -} - -div.able-skin-2020 div.able-seekbar-wrapper { - width: 99%; - margin: 10px 3px; -} - -@font-face { - font-family:able;src:url(../button-icons/fonts/able.eot?dqripi);src:url(../button-icons/fonts/able.eot?dqripi#iefix) format('embedded-opentype'),url(../button-icons/fonts/able.ttf?dqripi) format('truetype'),url(../button-icons/fonts/able.woff?dqripi) format('woff'),url(../button-icons/fonts/able.svg?dqripi#able) format('svg');font-weight:400;font-style:normal; -} - -.able-wrapper [class=" icon-"],.able-wrapper [class^=icon-] { - font-family: able!important; - speak: none; - font-style: normal; - font-weight: 400; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-play:before { - content: "\f04b"; -} - -.icon-pause:before { - content: "\f04c"; -} - -.icon-stop:before { - content: "\f04d"; -} - -.icon-restart:before { - content: "\e900"; -} - -.icon-rewind:before { - content: "\e603"; -} - -.icon-forward:before { - content: "\e604"; -} - -.icon-previous:before { - content: "\e901"; -} - -.icon-next:before { - content: "\e902"; -} - -.icon-slower:before { - content: "\f0dd"; -} - -.icon-faster:before { - content: "\f0de"; -} - -.icon-turtle:before { - content: "\e904"; -} - -.icon-rabbit:before { - content: "\e905"; -} - -.icon-ellipsis:before { - content: "\e903"; -} - -.icon-pipe:before { - content: "\e600"; -} - -.icon-captions:before { - content: "\e601"; -} - -.icon-descriptions:before { - content: "\e602"; -} - -.icon-sign:before { - content: "\e60a"; -} - -.icon-volume-mute:before { - content: "\e606"; -} - -.icon-volume-soft:before { - content: "\e60c"; -} - -.icon-volume-medium:before { - content: "\e605"; -} - -.icon-volume-loud:before { - content: "\e60b"; -} - -.icon-volume-up:before { - content: "\e607"; -} - -.icon-volume-down:before { - content: "\e608"; -} - -.icon-chapters:before { - content: "\e609"; -} - -.icon-transcript:before { - content: "\f15c"; -} - -.icon-preferences:before { - content: "\e60d"; -} - -.icon-close:before { - content: "\f00d"; -} - -.icon-fullscreen-expand:before { - content: "\f065"; -} - -.icon-fullscreen-collapse:before { - content: "\f066"; -} - -.icon-help:before { - content: "\f128"; -} \ No newline at end of file diff --git a/src/build/ableplayer.dist.4.4.1.js b/src/build/ableplayer.dist.4.4.1.js deleted file mode 100644 index 45249a0..0000000 --- a/src/build/ableplayer.dist.4.4.1.js +++ /dev/null @@ -1,16190 +0,0 @@ -/ - // JavaScript for Able Player - - // HTML5 Media API: - // http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement - // http://dev.w3.org/html5/spec-author-view/video.html - - // W3C API Test Page: - // http://www.w3.org/2010/05/video/mediaevents.html - - // YouTube Player API for iframe Embeds - https://developers.google.com/youtube/iframe_api_reference - // YouTube Player Parameters - https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 - - // YouTube Data API - https://developers.google.com/youtube/v3 - - // Vimeo Player API - https://github.com/vimeo/player.js - - // Google API Client Library for JavaScript - https://developers.google.com/api-client-library/javascript/dev/dev_jscript - - // Google API Explorer: YouTube services and methods - https://developers.google.com/apis-explorer/#s/youtube/v3/ - - // Web Speech API (Speech Synthesis) - // https://w3c.github.io/speech-api/#tts-section - // https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis -/ - -/jslint node: true, browser: true, white: true, indent: 2, unparam: true, plusplus: true / -/global $, jQuery / -"use strict"; - -// maintain an array of Able Player instances for use globally (e.g., for keeping prefs in sync) -var AblePlayerInstances = []; - -(function ($) { - $(document).ready(function () { - - $('video, audio').each(function (index, element) { - if ($(element).data('able-player') !== undefined) { - AblePlayerInstances.push(new AblePlayer($(this),$(element))); - } - }); - }); - - // YouTube player support; pass ready event to jQuery so we can catch in player. - window.onYouTubeIframeAPIReady = function() { - AblePlayer.youTubeIframeAPIReady = true; - $('body').trigger('youTubeIframeAPIReady', []); - }; - // If there is only one player on the page, dispatch global keydown events to it - // Otherwise, keydowwn events are handled locally (see event.js > handleEventListeners()) - $(window).on('keydown',function(e) { - if (AblePlayer.nextIndex === 1) { - AblePlayer.lastCreated.onPlayerKeyPress(e); - } - }); - - // Construct an AblePlayer object - // Parameters are: - // media - jQuery selector or element identifying the media. - window.AblePlayer = function(media) { - - - var thisObj = this; - - // Keep track of the last player created for use with global events. - AblePlayer.lastCreated = this; - this.media = media; - if ($(media).length === 0) { - this.provideFallback(); - return; - } - - /////////////////////////////// - // - // Default variables assignment - // - /////////////////////////////// - - // The following variables CAN be overridden with HTML attributes - - // autoplay (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('autoplay') !== undefined) { - this.autoplay = true; // this value remains constant - this.okToPlay = true; // this value can change dynamically - } - else { - this.autoplay = false; - this.okToPlay = false; - } - - // loop (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('loop') !== undefined) { - this.loop = true; - } - else { - this.loop = false; - } - - // playsinline (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('playsinline') !== undefined) { - this.playsInline = '1'; // this value gets passed to YT.Player contructor in youtube.js - } - else { - this.playsInline = '0'; - } - - // poster (Boolean, indicating whether media element has a poster attribute) - if ($(media).attr('poster')) { - this.hasPoster = true; - } - else { - this.hasPoster = false; - } - - // start-time - if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) { - this.startTime = $(media).data('start-time'); - } - else { - this.startTime = 0; - } - - // debug - if ($(media).data('debug') !== undefined && $(media).data('debug') !== false) { - this.debug = true; - } - else { - this.debug = false; - } - - // Path to root directory of Able Player code - if ($(media).data('root-path') !== undefined) { - // add a trailing slash if there is none - this.rootPath = $(media).data('root-path').replace(/\/?$/, '/'); - } - else { - this.rootPath = this.getRootPath(); - } - - // Volume - // Range is 0 to 10. Best not to crank it to avoid overpowering screen readers - this.defaultVolume = 7; - if ($(media).data('volume') !== undefined && $(media).data('volume') !== "") { - var volume = $(media).data('volume'); - if (volume >= 0 && volume <= 10) { - this.defaultVolume = volume; - } - } - this.volume = this.defaultVolume; - - // Optional Buttons - // Buttons are added to the player controller if relevant media is present - // However, in some applications it might be undesirable to show buttons - // (e.g., if chapters or transcripts are provided in an external container) - - if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) { - this.useChaptersButton = false; - } - else { - this.useChaptersButton = true; - } - - if ($(media).data('use-descriptions-button') !== undefined && $(media).data('use-descriptions-button') === false) { - this.useDescriptionsButton = false; - } - else { - this.useDescriptionsButton = true; - } - - // Silence audio description - // set to "false" if the sole purposes of the WebVTT descriptions file - // is to display description text visibly and to integrate it into the transcript - if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) { - this.exposeTextDescriptions = false; - } - else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { - // support both singular and plural spelling of attribute - this.exposeTextDescriptions = false; - } - else { - this.exposeTextDescriptions = true; - } - - // Headings - // By default, an off-screen heading is automatically added to the top of the media player - // It is intelligently assigned a heading level based on context, via misc.js > getNextHeadingLevel() - // Authors can override this behavior by manually assigning a heading level using data-heading-level - // Accepted values are 1-6, or 0 which indicates "no heading" - // (i.e., author has already hard-coded a heading before the media player; Able Player doesn't need to do this) - if ($(media).data('heading-level') !== undefined && $(media).data('heading-level') !== "") { - var headingLevel = $(media).data('heading-level'); - if (/^[0-6]$/.test(headingLevel)) { // must be a valid HTML heading level 1-6; or 0 - this.playerHeadingLevel = headingLevel; - } - } - - // Transcripts - // There are three types of interactive transcripts. - // In descending of order of precedence (in case there are conflicting tags), they are: - // 1. "manual" - A manually coded external transcript (requires data-transcript-src) - // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div) - // 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button - // If data-include-transcript="false", there is no "popup" transcript - - if ($(media).data('transcript-div') !== undefined && $(media).data('transcript-div') !== "") { - this.transcriptDivLocation = $(media).data('transcript-div'); - } - else { - this.transcriptDivLocation = null; - } - if ($(media).data('include-transcript') !== undefined && $(media).data('include-transcript') === false) { - this.hideTranscriptButton = true; - } - else { - this.hideTranscriptButton = null; - } - - this.transcriptType = null; - if ($(media).data('transcript-src') !== undefined) { - this.transcriptSrc = $(media).data('transcript-src'); - if (this.transcriptSrcHasRequiredParts()) { - this.transcriptType = 'manual'; - } - } - else if ($(media).find('track[kind="captions"], track[kind="subtitles"]').length > 0) { - // required tracks are present. COULD automatically generate a transcript - if (this.transcriptDivLocation) { - this.transcriptType = 'external'; - } - else { - this.transcriptType = 'popup'; - } - } - - // In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript - // If false (default), line breaks are are removed from transcripts in order to provide a more seamless reading experience - // If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem - if ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) { - this.lyricsMode = true; - } - else { - this.lyricsMode = false; - } - - // Transcript Title - if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") { - this.transcriptTitle = $(media).data('transcript-title'); - } - else { - // do nothing. The default title will be defined later (see transcript.js) - } - - // Captions - // data-captions-position can be used to set the default captions position - // this is only the default, and can be overridden by user preferences - // valid values of data-captions-position are 'below' and 'overlay' - if ($(media).data('captions-position') === 'overlay') { - this.defaultCaptionsPosition = 'overlay'; - } - else { // the default, even if not specified - this.defaultCaptionsPosition = 'below'; - } - - // Chapters - if ($(media).data('chapters-div') !== undefined && $(media).data('chapters-div') !== "") { - this.chaptersDivLocation = $(media).data('chapters-div'); - } - - if ($(media).data('chapters-title') !== undefined) { - // NOTE: empty string is valid; results in no title being displayed - this.chaptersTitle = $(media).data('chapters-title'); - } - - if ($(media).data('chapters-default') !== undefined && $(media).data('chapters-default') !== "") { - this.defaultChapter = $(media).data('chapters-default'); - } - else { - this.defaultChapter = null; - } - - // Slower/Faster buttons - // valid values of data-speed-icons are 'animals' (default) and 'arrows' - // 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows - if ($(media).data('speed-icons') === 'arrows') { - this.speedIcons = 'arrows'; - } - else { - this.speedIcons = 'animals'; - } - - // Seekbar - // valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters' - if ($(media).data('seekbar-scope') === 'chapter' \|\| $(media).data('seekbar-scope') === 'chapters') { - this.seekbarScope = 'chapter'; - } - else { - this.seekbarScope = 'video'; - } - - // YouTube - if ($(media).data('youtube-id') !== undefined && $(media).data('youtube-id') !== "") { - this.youTubeId = $(media).data('youtube-id'); - } - - if ($(media).data('youtube-desc-id') !== undefined && $(media).data('youtube-desc-id') !== "") { - this.youTubeDescId = $(media).data('youtube-desc-id'); - } - - if ($(media).data('youtube-nocookie') !== undefined && $(media).data('youtube-nocookie')) { - this.youTubeNoCookie = true; - } - else { - this.youTubeNoCookie = false; - } - - // Vimeo - if ($(media).data('vimeo-id') !== undefined && $(media).data('vimeo-id') !== "") { - this.vimeoId = $(media).data('vimeo-id'); - } - if ($(media).data('vimeo-desc-id') !== undefined && $(media).data('vimeo-desc-id') !== "") { - this.vimeoDescId = $(media).data('vimeo-desc-id'); - } - - // Skin - // valid values of data-skin are: - // 'legacy' (default), two rows of controls; seekbar positioned in available space within top row - // '2020', all buttons in one row beneath a full-width seekbar - if ($(media).data('skin') == '2020') { - this.skin = '2020'; - } - else { - this.skin = 'legacy'; - } - - // Icon type - // By default, AblePlayer 3.0.33 and higher uses SVG icons for the player controls - // Fallback for browsers that don't support SVG is scalable icomoon fonts - // Ultimate fallback is images, if the user has a custom style sheet that overrides font-family - // Use data-icon-type to force controls to use either 'svg', 'font', or 'images' - this.iconType = 'font'; - this.forceIconType = false; - if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") { - var iconType = $(media).data('icon-type'); - if (iconType === 'font' \|\| iconType == 'image' \|\| iconType == 'svg') { - this.iconType = iconType; - this.forceIconType = true; - } - } - - if ($(media).data('allow-fullscreen') !== undefined && $(media).data('allow-fullscreen') === false) { - this.allowFullScreen = false; - } - else { - this.allowFullScreen = true; - } - - // Seek interval - // Number of seconds to seek forward or back with Rewind & Forward buttons - // Unless specified with data-seek-interval, the default value is re-calculated in initialize.js > setSeekInterval(); - // Calculation attempts to intelligently assign a reasonable interval based on media length - this.defaultSeekInterval = 10; - this.useFixedSeekInterval = false; // will change to true if media has valid data-seek-interval attribute - if ($(media).data('seek-interval') !== undefined && $(media).data('seek-interval') !== "") { - var seekInterval = $(media).data('seek-interval'); - if (/^[1-9][0-9]$/.test(seekInterval)) { // must be a whole number greater than 0 - this.seekInterval = seekInterval; - this.useFixedSeekInterval = true; // do not override with calculuation - } - } - - // Now Playing - // Shows "Now Playing:" plus the title of the current track above player - // Only used if there is a playlist - if ($(media).data('show-now-playing') !== undefined && $(media).data('show-now-playing') === false) { - this.showNowPlaying = false; - } - else { - this.showNowPlaying = true; - } - - // TTML support (experimental); enabled for testing with data-use-ttml (Boolean) - if ($(media).data('use-ttml') !== undefined) { - this.useTtml = true; - // The following may result in a console error. - this.convert = require('xml-js'); - } - else { - this.useTtml = false; - } - - // Fallback - // The only supported fallback content as of version 4.0 is: - // 1. Content nested within the <audio> or <video> element. - // 2. A standard localized message (see buildplayer.js > provideFallback() - // The data-test-fallback attribute can be used to test the fallback solution in any browser - if ($(media).data('test-fallback') !== undefined && $(media).data('test-fallback') !== false) { - this.testFallback = true; - } - - // Language - // Player language is determined given the following precedence: - // 1. The value of data-lang on the media element, if provided and a matching translation file is available - // 2. Lang attribute on <html> or <body>, if a matching translation file is available - // 3. English - // Final calculation occurs in translation.js > getTranslationText() - if ($(media).data('lang') !== undefined && $(media).data('lang') !== "") { - this.lang = $(media).data('lang').toLowerCase(); - } - else { - this.lang = null; - } - - // Metadata Tracks - if ($(media).data('meta-type') !== undefined && $(media).data('meta-type') !== "") { - this.metaType = $(media).data('meta-type'); - } - - if ($(media).data('meta-div') !== undefined && $(media).data('meta-div') !== "") { - this.metaDiv = $(media).data('meta-div'); - } - - // Search - // conducting a search requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - - this.searchDiv = $(media).data('search-div'); - - // Search term (optional; could be assigned later in a JavaScript application) - if ($(media).data('search') !== undefined && $(media).data('search') !== "") { - this.searchString = $(media).data('search'); - } - - // Search Language - if ($(media).data('search-lang') !== undefined && $(media).data('search-lang') !== "") { - this.searchLang = $(media).data('search-lang'); - } - else { - this.searchLang = null; // will change to final value of this.lang in translation.js > getTranslationText() - } - - // Search option: Ignore capitalization in search terms - if ($(media).data('search-ignore-caps') !== undefined && $(media).data('search-ignore-caps') !== false) { - this.searchIgnoreCaps = true; - } - else { - this.searchIgnoreCaps = false; - } - - // conducting a search currently requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - this.searchString = $(media).data('search'); - this.searchDiv = $(media).data('search-div'); - } - } - - // Hide controls when video starts playing - // They will reappear again when user presses a key or moves the mouse - // As of v4.0, controls are hidden automatically on playback in fullscreen mode - if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) { - this.hideControls = true; - this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode - } - else { - this.hideControls = false; - this.hideControlsOriginal = false; - } - - // Steno mode - // Enable support for Able Player keyboard shortcuts in textaarea fields - // so users can control the player while transcribing - if ($(media).data('steno-mode') !== undefined && $(media).data('steno-mode') !== false) { - this.stenoMode = true; - // Add support for stenography in an iframe via data-steno-iframe-id - if ($(media).data('steno-iframe-id') !== undefined && $(media).data('steno-iframe-id') !== "") { - this.stenoFrameId = $(media).data('steno-iframe-id'); - this.$stenoFrame = $('#' + this.stenoFrameId); - if (!(this.$stenoFrame.length)) { - // iframe not found - this.stenoFrameId = null; - this.$stenoFrame = null; - } - } - else { - this.stenoFrameId = null; - this.$stenoFrame = null; - } - } - else { - this.stenoMode = false; - this.stenoFrameId = null; - this.$stenoFrame = null; - } - - // Define built-in variables that CANNOT be overridden with HTML attributes - this.setDefaults(); - - //////////////////////////////////////// - // - // End assignment of default variables - // - //////////////////////////////////////// - - this.ableIndex = AblePlayer.nextIndex; - AblePlayer.nextIndex += 1; - - this.title = $(media).attr('title'); - - // populate translation object with localized versions of all labels and prompts - // use defer method to defer additional processing until text is retrieved - this.tt = {}; - var thisObj = this; - $.when(this.getTranslationText()).then( - function () { - if (thisObj.countProperties(thisObj.tt) > 50) { - // close enough to ensure that most text variables are populated - thisObj.setup(); - } - else { - // can't continue loading player with no text - thisObj.provideFallback(); - } - } - ); - }; - - // Index to increment every time new player is created. - AblePlayer.nextIndex = 0; - - AblePlayer.prototype.setup = function() { - - var thisObj = this; - this.initializing = true; // will remain true until entire sequence of function calls is complete - this.reinitialize().then(function () { - if (!thisObj.player) { - // No player for this media, show last-line fallback. - thisObj.provideFallback(); - } - else { - thisObj.setupInstance().then(function () { - thisObj.setupInstancePlaylist(); - if (!thisObj.hasPlaylist) { - // for playlists, recreatePlayer() is called from within cuePlaylistItem() - thisObj.recreatePlayer(); - } - thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed - }); - } - }); - }; - - AblePlayer.getActiveDOMElement = function () { - var activeElement = document.activeElement; - - // For shadow DOMs we need to keep digging down through the DOMs - while (activeElement.shadowRoot && activeElement.shadowRoot.activeElement) { - activeElement = activeElement.shadowRoot.activeElement; - } - - return activeElement; - }; - - AblePlayer.localGetElementById = function(element, id) { - if (element.getRootNode) - { - // Use getRootNode() and querySelector() where supported (for shadow DOM support) - return $(element.getRootNode().querySelector('#' + id)); - } - else - { - // If getRootNode is not supported it should be safe to use document.getElementById (since there is no shadow DOM support) - return $(document.getElementById(id)); - } - }; - - AblePlayer.youTubeIframeAPIReady = false; - AblePlayer.loadingYouTubeIframeAPI = false; -})(jQuery); - -(function ($) { - // Set default variable values. - AblePlayer.prototype.setDefaults = function () { - - this.playerCreated = false; // will set to true after recreatePlayer() is complete the first time - this.playing = false; // will change to true after 'playing' event is triggered - this.paused = true; // will always be the opposite of this.playing (available for convenience) - this.clickedPlay = false; // will change to true temporarily if user clicks 'play' (or pause) - this.fullscreen = false; // will change to true if player is in full screen mode - this.swappingSrc = false; // will change to true temporarily while media source is being swapped - this.initializing = false; // will change to true temporarily while initPlayer() is processing - this.cueingPlaylistItems = false; // will change to true temporarily while cueing next playlist item - this.okToPlay = false; // will change to true if conditions are acceptible for automatic playback after media loads - this.buttonWithFocus = null; // will change to 'previous' or 'next' if user clicks either of those buttons - - this.getUserAgent(); - this.setIconColor(); - this.setButtonImages(); - }; - - AblePlayer.prototype.getRootPath = function() { - - // returns Able Player root path (assumes ableplayer.js is in /build, one directory removed from root) - var scripts, i, scriptSrc, scriptFile, fullPath, ablePath, parentFolderIndex, rootPath; - scripts= document.getElementsByTagName('script'); - for (i=0; i < scripts.length; i++) { - scriptSrc = scripts[i].src; - scriptFile = scriptSrc.substr(scriptSrc.lastIndexOf('/')); - if (scriptFile.indexOf('ableplayer') !== -1) { - // this is the ableplayerscript - fullPath = scriptSrc.split('?')[0]; // remove any ? params - break; - } - } - ablePath= fullPath.split('/').slice(0, -1).join('/'); // remove last filename part of path - parentFolderIndex = ablePath.lastIndexOf('/'); - rootPath = ablePath.substring(0, parentFolderIndex) + '/'; - return rootPath; - } - - AblePlayer.prototype.setIconColor = function() { - - // determine the best color choice (white or black) for icons, - // given the background-color of their container elements - // Source for relative luminance formula: - // https://en.wikipedia.org/wiki/Relative_luminance - - // We need to know the color before* creating the element - // so the element doesn't exist yet when this function is called - // therefore, need to create a temporary element then remove it after color is determined - // Temp element must be added to the DOM or WebKit can't retrieve its CSS properties - - var $elements, i, $el, bgColor, rgb, red, green, blue, luminance, iconColor; - - $elements = ['controller', 'toolbar']; - for (i=0; i<$elements.length; i++) { - if ($elements[i] == 'controller') { - $el = $('<div>', { - 'class': 'able-controller' - }).hide(); - } - else if ($elements[i] === 'toolbar') { - $el = $('<div>', { - 'class': 'able-window-toolbar' - }).hide(); - } - $('body').append($el); - bgColor = $el.css('background-color'); - // bgColor is a string in the form 'rgb(R, G, B)', perhaps with a 4th item for alpha; - // split the 3 or 4 channels into an array - rgb = bgColor.replace(/[^\d,]/g, '').split(','); - red = rgb[0]; - green = rgb[1]; - blue = rgb[2]; - luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue); - // range is 1 - 255; therefore 125 is the tipping point - if (luminance < 125) { // background is dark - iconColor = 'white'; - } - else { // background is light - iconColor = 'black'; - } - if ($elements[i] === 'controller') { - this.iconColor = iconColor; - } - else if ($elements[i] === 'toolbar') { - this.toolbarIconColor = iconColor; - } - $el.remove(); - } - }; - - AblePlayer.prototype.setButtonImages = function() { - - // NOTE: volume button images are now set dynamically within volume.js - this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/'; - this.playButtonImg = this.imgPath + 'play.png'; - this.pauseButtonImg = this.imgPath + 'pause.png'; - - this.restartButtonImg = this.imgPath + 'restart.png'; - - this.rewindButtonImg = this.imgPath + 'rewind.png'; - this.forwardButtonImg = this.imgPath + 'forward.png'; - - this.previousButtonImg = this.imgPath + 'previous.png'; - this.nextButtonImg = this.imgPath + 'next.png'; - - if (this.speedIcons === 'arrows') { - this.fasterButtonImg = this.imgPath + 'slower.png'; - this.slowerButtonImg = this.imgPath + 'faster.png'; - } - else if (this.speedIcons === 'animals') { - this.fasterButtonImg = this.imgPath + 'rabbit.png'; - this.slowerButtonImg = this.imgPath + 'turtle.png'; - } - - this.captionsButtonImg = this.imgPath + 'captions.png'; - this.chaptersButtonImg = this.imgPath + 'chapters.png'; - this.signButtonImg = this.imgPath + 'sign.png'; - this.transcriptButtonImg = this.imgPath + 'transcript.png'; - this.descriptionsButtonImg = this.imgPath + 'descriptions.png'; - - this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png'; - this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png'; - - this.prefsButtonImg = this.imgPath + 'preferences.png'; - this.helpButtonImg = this.imgPath + 'help.png'; - }; - - AblePlayer.prototype.getSvgData = function(button) { - - // returns array of values for creating <svg> tag for specified button - // 0 = <svg> viewBox attribute - // 1 = <path> d (description) attribute - var svg = Array(); - - switch (button) { - - case 'play': - svg[0] = '0 0 16 20'; - svg[1] = 'M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z'; - break; - - case 'pause': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'stop': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'restart': - svg[0] = '0 0 20 20'; - svg[1] = 'M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z'; - break; - - case 'rewind': - svg[0] = '0 0 20 20'; - svg[1] = 'M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z'; - break; - - case 'forward': - svg[0] = '0 0 20 20'; - svg[1] = 'M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z'; - break; - - case 'previous': - svg[0] = '0 0 20 20'; - svg[1] = 'M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z'; - break; - - case 'next': - svg[0] = '0 0 20 20'; - svg[1] = 'M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z'; - break; - - case 'slower': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z'; - break; - - case 'faster': - svg[0] = '0 0 11 20'; - svg[1] = 'M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'turtle': - svg[0] = '0 0 20 20'; - svg[1] = 'M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z'; - break; - - case 'rabbit': - svg[0] = '0 0 20 20'; - svg[1] = 'M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z'; - break; - - case 'ellipsis': - svg[0] = '0 0 20 20'; - svg[1] = 'M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z'; - break; - - case 'pipe': - svg[0] = '0 0 20 20'; - svg[1] = 'M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z'; - break; - - case 'captions': - svg[0] = '0 0 20 20'; - svg[1] = 'M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z'; - break; - - case 'descriptions': - svg[0] = '0 0 20 20'; - svg[1] = 'M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z'; - break; - - case 'sign': - svg[0] = '0 0 20 20'; - svg[1] = 'M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z'; - break; - - case 'mute': - case 'volume-mute': - svg[0] = '0 0 20 20'; - svg[1] = 'M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z'; - break; - - case 'volume-soft': - svg[0] = '0 0 20 20'; - svg[1] = 'M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; - break; - - case 'volume-medium': - svg[0] = '0 0 20 20'; - svg[1] = 'M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; - break; - - case 'volume-loud': - svg[0] = '0 0 21 20'; - svg[1] = 'M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; - break; - - case 'chapters': - svg[0] = '0 0 20 20'; - svg[1] = 'M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z'; - break; - - case 'transcript': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z'; - break; - - case 'preferences': - svg[0] = '0 0 20 20'; - svg[1] = 'M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z'; - break; - - case 'close': - svg[0] = '0 0 16 20'; - svg[1] = 'M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z'; - break; - - case 'fullscreen-expand': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z'; - break; - - case 'fullscreen-collapse': - svg[0] = '0 0 20 20'; - svg[1] = 'M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'help': - svg[0] = '0 0 11 20'; - svg[1] = 'M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z'; - break; - } - - return svg; - }; - - // Initialize player based on data on page. - // This sets some variables, but does not modify anything. Safe to call multiple times. - // Can call again after updating this.media so long as new media element has the same ID. - AblePlayer.prototype.reinitialize = function () { - - var deferred, promise, thisObj, errorMsg, srcFile; - - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - - // if F12 Developer Tools aren't open in IE (through 9, no longer a problen in IE10) - // console.log causes an error - can't use debug without a console to log messages to - if (! window.console) { - this.debug = false; - } - - this.startedPlaying = false; - // TODO: Move this setting to cookie. - this.autoScrollTranscript = true; - //this.autoScrollTranscript = this.getCookie(autoScrollTranscript); // (doesn't work) - - // Bootstrap from this.media possibly being an ID or other selector. - this.$media = $(this.media).first(); - this.media = this.$media[0]; - // Set media type to 'audio' or 'video'; this determines some of the behavior of player creation. - if (this.$media.is('audio')) { - this.mediaType = 'audio'; - } - else if (this.$media.is('video')) { - this.mediaType = 'video'; - } - else { - // Able Player was initialized with some element other than <video> or <audio> - this.provideFallback(); - deferred.fail(); - return promise; - } - - this.$sources = this.$media.find('source'); - - this.player = this.getPlayer(); - if (!this.player) { - // an error was generated in getPlayer() - this.provideFallback(); - } - this.setIconType(); - this.setDimensions(); - - deferred.resolve(); - return promise; - }; - - AblePlayer.prototype.setDimensions = function() { - // if media element includes width and height attributes, - // use these to set the max-width and max-height of the player - if (this.$media.attr('width') && this.$media.attr('height')) { - this.playerMaxWidth = parseInt(this.$media.attr('width'), 10); - this.playerMaxHeight = parseInt(this.$media.attr('height'), 10); - } - else if (this.$media.attr('width')) { - // media element includes a width attribute, but not height - this.playerMaxWidth = parseInt(this.$media.attr('width'), 10); - } - else { - // set width to width of #player - // don't set height though; YouTube will automatically set that to match width - this.playerMaxWidth = this.$media.parent().width(); - this.playerMaxHeight = this.getMatchingHeight(this.playerMaxWidth); - } - // override width and height attributes with in-line CSS to make video responsive - this.$media.css({ - 'width': '100%', - 'height': 'auto' - }); - }; - - AblePlayer.prototype.getMatchingHeight = function(width) { - - // returns likely height for a video, given width - // These calculations assume 16:9 aspect ratio (the YouTube standard) - // Videos recorded in other resolutions will be sized to fit, with black bars on each side - // This function is only called if the <video> element does not have width and height attributes - - var widths, heights, closestWidth, closestIndex, closestHeight, height; - - widths = [ 3840, 2560, 1920, 1280, 854, 640, 426 ]; - heights = [ 2160, 1440, 1080, 720, 480, 360, 240 ]; - closestWidth = null; - closestIndex = null; - - $.each(widths, function(index){ - if (closestWidth == null \|\| Math.abs(this - width) < Math.abs(closestWidth - width)) { - closestWidth = this; - closestIndex = index; - } - }); - closestHeight = heights[closestIndex]; - this.aspectRatio = closestWidth / closestHeight; - height = Math.round(width / this.aspectRatio); - return height; - }; - - AblePlayer.prototype.setIconType = function() { - - // returns either "svg", "font" or "image" (in descending order of preference) - // Test for support of each type. If not supported, test the next type. - // last resort is image icons - - var $tempButton, $testButton, controllerFont; - - if (this.forceIconType) { - // use value specified in data-icon-type - return false; - } - - // test for SVG support - // Test this method widely; failed as expected on IE8 and below - // https://stackoverflow.com/a/27568129/744281 - if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) { - // browser supports SVG - this.iconType = 'svg'; - } - else { - // browser does NOT support SVG - // test whether browser can support icon fonts, and whether user has overriding the default style sheet - // which could cause problems with proper display of the icon fonts - if (window.getComputedStyle) { - - // webkit doesn't return calculated styles unless element has been added to the DOM - // and is visible (note: visibly clipped is considered "visible") - // use playpauseButton for font-family test if it exists; otherwise must create a new temp button - if ($('span.icon-play').length) { - $testButton = $('span.icon-play'); - } - else { - $tempButton = $('<span>',{ - 'class': 'icon-play able-clipped' - }); - $('body').append($tempButton); - $testButton = $tempButton; - } - - // the following retrieves the computed value of font-family - // tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works! - // tested in Chrome 49.x with Font Changer plugin - works! - // tested in IE with user-defined style sheet enables - works! - // It does NOT account for users who have "ignore font styles on web pages" checked in IE - // There is no known way to check for that ??? - controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family'); - if (typeof controllerFont !== 'undefined') { - if (controllerFont.indexOf('able') !== -1) { - this.iconType = 'font'; - } - else { - this.iconType = 'image'; - } - } - else { - // couldn't get computed font-family; use images to be safe - this.iconType = 'image'; - } - } - else { // window.getComputedStyle is not supported (IE 8 and earlier) - // No known way to detect computed font - // The following retrieves the value from the style sheet, not the computed font - // controllerFont = $tempButton.get(0).currentStyle.fontFamily; - // It will therefore return "able", even if the user is overriding that with a custom style sheet - // To be safe, use images - this.iconType = 'image'; - } - if (this.debug) { - - } - if (typeof $tempButton !== 'undefined') { - $tempButton.remove(); - } - } - }; - - // Perform one-time setup for this instance of player; called after player is first initialized. - AblePlayer.prototype.setupInstance = function () { - - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - if (this.$media.attr('id')) { - this.mediaId = this.$media.attr('id'); - } - else { - // Ensure the base media element always has an ID. - this.mediaId = "ableMediaId_" + this.ableIndex; - this.$media.attr('id', this.mediaId); - } - deferred.resolve(); - return promise; - }; - - AblePlayer.prototype.setupInstancePlaylist = function() { - - // find a matching playlist and set this.hasPlaylist - // if there is one, also set this.$playlist, this.playlistIndex, & this.playlistEmbed - var thisObj = this; - - this.hasPlaylist = false; // will change to true if a matching playlist is found - - $('.able-playlist').each(function() { - if ($(this).data('player') === thisObj.mediaId) { - // this is the playlist for the current player - thisObj.hasPlaylist = true; - // If using an embedded player, we'll replace $playlist with the clone later. - thisObj.$playlist = $(this).find('li'); - - // check to see if list item has YouTube as its source - // if it does, inject a thumbnail from YouTube - var $youTubeVideos = $(this).find('li[data-youtube-id]'); - $youTubeVideos.each(function() { - var youTubeId = $(this).attr('data-youtube-id'); - var youTubePoster = thisObj.getYouTubePosterUrl(youTubeId,'120'); - var $youTubeImg = $('<img>',{ - 'src': youTubePoster, - 'alt': '' - }); - $(this).find('button').prepend($youTubeImg); - }); - - // add accessibility to the list markup - $(this).find('li span').attr('aria-hidden','true'); - thisObj.playlistIndex = 0; - var dataEmbedded = $(this).data('embedded'); - if (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) { - // embed playlist within player - thisObj.playlistEmbed = true; - } - else { - thisObj.playlistEmbed = false; - } - } - }); - - if (this.hasPlaylist && this.loop) { - // browser will loop the current track in the playlist, rather than the playlist - // therefore, need to remove loop attribute from media element - // but keep this.loop as true and handle the playlist looping ourselves - this.media.removeAttribute('loop'); - } - if (this.hasPlaylist && this.playlistEmbed) { - // Copy the playlist out of the dom, so we can reinject when we build the player. - var parent = this.$playlist.parent(); - this.$playlistDom = parent.clone(); - parent.remove(); - } - if (this.hasPlaylist && this.$sources.length === 0) { - // no source elements were provided. Construct them from the first playlist item - this.cuePlaylistItem(0); - // redefine this.$sources now that media contains one or more <source> elements - this.$sources = this.$media.find('source'); - } - - }; - - AblePlayer.prototype.recreatePlayer = function () { - - // Creates the appropriate player for the current source. - var thisObj, prefsGroups, i; - thisObj = this; - - // TODO: Ensure when recreating player that we carry over the mediaId - if (!this.player) { - console.log("Can't create player; no appropriate player type detected."); - return; - } - if (!this.playerCreated) { - // only call these functions once - this.loadCurrentPreferences(); - this.injectPlayerCode(); - } - - // call all remaining functions each time a new media instance is loaded - - this.initSignLanguage(); - - this.initPlayer().then(function() { - - thisObj.setupTracks().then(function() { - - thisObj.getBrowserVoices(); - - thisObj.setupTranscript().then(function() { - - thisObj.initStenoFrame().then(function() { - - if (thisObj.stenoMode && thisObj.$stenoFrame) { - thisObj.stenoFrameContents = thisObj.$stenoFrame.contents(); - } - - thisObj.getMediaTimes().then(function(mediaTimes) { - - thisObj.duration = mediaTimes['duration']; - thisObj.elapsed = mediaTimes['elapsed']; - - thisObj.setFullscreen(false); - - if (typeof thisObj.volume === 'undefined') { - thisObj.volume = thisObj.defaultVolume; - } - if (thisObj.volume) { - thisObj.setVolume(thisObj.volume); - } - - if (thisObj.transcriptType) { - thisObj.addTranscriptAreaEvents(); - thisObj.updateTranscript(); - } - if (thisObj.mediaType === 'video') { - thisObj.initDescription(); - } - if (thisObj.captions.length) { - thisObj.initDefaultCaption(); - } - - // setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks - // This tells browsers to ignore the text tracks so Able Player can handle them - // However, timing is critical as browsers - especially Safari - tend to ignore this request - // unless it's sent late in the intialization process. - // If browsers ignore the request, the result is redundant captions - thisObj.setMediaAttributes(); - thisObj.addControls(); - - thisObj.addEventListeners(); - - // inject each of the hidden forms that will be accessed from the Preferences popup menu - prefsGroups = thisObj.getPreferencesGroups(); - for (i = 0; i < prefsGroups.length; i++) { - thisObj.injectPrefsForm(prefsGroups[i]); - } - thisObj.setupPopups(); - thisObj.updateCaption(); - thisObj.injectVTS(); - if (thisObj.chaptersDivLocation) { - thisObj.populateChaptersDiv(); - } - thisObj.showSearchResults(); - - // Go ahead and load media, without user requesting it - // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth - // However, the media needs to load before the 'loadedmetadata' event is fired - // and until that happens we can't get the media's duration - if (thisObj.player === 'html5') { - thisObj.$media[0].load(); - } - // refreshControls is called twice building/initializing the player - // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete - setTimeout(function() { - thisObj.refreshControls('init'); - },100); - }); - }); - }); - - }); - }, - function() { // initPlayer fail - thisObj.provideFallback(); - }); - }; - - AblePlayer.prototype.initPlayer = function () { - - var thisObj = this; - var playerPromise; - // First run player specific initialization. - if (this.player === 'html5') { - playerPromise = this.initHtml5Player(); - } - else if (this.player === 'youtube') { - playerPromise = this.initYouTubePlayer(); - } - else if (this.player === 'vimeo') { - playerPromise = this.initVimeoPlayer(); - } - // After player specific initialization is done, run remaining general initialization. - var deferred = new $.Deferred(); - var promise = deferred.promise(); - playerPromise.done( - function () { // done/resolved - if (thisObj.useFixedSeekInterval) { - if (!thisObj.seekInterval) { - thisObj.seekInterval = thisObj.defaultSeekInterval; - } - else { - // fixed seekInterval was already assigned, using value of data-seek-interval attribute - } - thisObj.seekIntervalCalculated = true; - } - else { - thisObj.setSeekInterval(); - } - deferred.resolve(); - } - ).fail(function () { // failed - deferred.reject(); - } - ); - - return promise; - }; - - AblePlayer.prototype.initStenoFrame = function() { - - var thisObj, deferred, promise, $iframe; - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - if (this.stenoMode && this.$stenoFrame) { - - if (this.$stenoFrame[0].contentWindow,document.readyState == 'complete') { - // iframe has already loaded - deferred.resolve(); - } - else { - // iframe has not loaded. Wait for it. - this.$stenoFrame.on('load',function() { - deferred.resolve(); - }); - } - } - else { - // there is no stenoFrame to initialize - deferred.resolve(); - } - return promise; - }; - - AblePlayer.prototype.setSeekInterval = function () { - - // this function is only called if this.useFixedSeekInterval is false - // if this.useChapterTimes, this is called as each new chapter is loaded - // otherwise, it's called once, as the player is initialized - var thisObj, duration; - thisObj = this; - this.seekInterval = this.defaultSeekInterval; - if (this.useChapterTimes) { - duration = this.chapterDuration; - } - else { - duration = this.duration; - } - if (typeof duration === 'undefined' \|\| duration < 1) { - // no duration; just use default for now but keep trying until duration is available - this.seekIntervalCalculated = false; - return; - } - else { - if (duration <= 20) { - this.seekInterval = 5; // 4 steps max - } - else if (duration <= 30) { - this.seekInterval = 6; // 5 steps max - } - else if (duration <= 40) { - this.seekInterval = 8; // 5 steps max - } - else if (duration <= 100) { - this.seekInterval = 10; // 10 steps max - } - else { - // never more than 10 steps from start to end - this.seekInterval = (duration / 10); - } - this.seekIntervalCalculated = true; - } - }; - - AblePlayer.prototype.initDefaultCaption = function () { - - var captions, i; - - captions = this.captions; - if (captions.length > 0) { - for (i=0; i<captions.length; i++) { - if (captions[i].def === true) { - this.captionLang = captions[i].language; - this.selectedCaptions = captions[i]; - } - } - if (typeof this.captionLang === 'undefined') { - // No caption track was flagged as default - // find and use a caption language that matches the player language - for (i=0; i<captions.length; i++) { - if (captions[i].language === this.lang) { - this.captionLang = captions[i].language; - this.selectedCaptions = captions[i]; - } - } - } - if (typeof this.captionLang === 'undefined') { - // Still no matching caption track - // just use the first track - this.captionLang = captions[0].language; - this.selectedCaptions = captions[0]; - } - if (typeof this.captionLang !== 'undefined') { - // reset transcript selected <option> to this.captionLang - if (this.$transcriptLanguageSelect) { - this.$transcriptLanguageSelect.find('option[lang=' + this.captionLang + ']').prop('selected',true); - } - // sync all other tracks to this same languge - this.syncTrackLanguages('init',this.captionLang); - } - if (this.player === 'vimeo') { - if (this.usingVimeoCaptions && this.prefCaptions == 1) { - // initialize Vimeo captions to the default language - this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { - // track.language = the iso code for the language - // track.kind = 'captions' or 'subtitles' - // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - - break; - default: - // some other error occurred - - break; - } - }); - } - else { - // disable Vimeo captions. - this.vimeoPlayer.disableTextTrack().then(function() { - // Vimeo captions disabled - }).catch(function(error) { - - }); - } - } - } - }; - - AblePlayer.prototype.initHtml5Player = function () { - // Nothing special to do! - var deferred = new $.Deferred(); - var promise = deferred.promise(); - deferred.resolve(); - return promise; - }; - - // Sets media/track/source attributes; is called whenever player is recreated since $media may have changed. - AblePlayer.prototype.setMediaAttributes = function () { - // Firefox puts videos in tab order; remove. - this.$media.attr('tabindex', -1); - - // Keep native player from displaying captions/subtitles by setting textTrack.mode='disabled' - // https://dev.w3.org/html5/spec-author-view/video.html#text-track-mode - // This should work but historically hasn't been supported in all browsers - // Workaround for non-supporting browsers is to remove default attribute - // We're doing that too in track.js > setupCaptions() - var textTracks = this.$media.get(0).textTracks; - if (textTracks) { - var i = 0; - while (i < textTracks.length) { - textTracks[i].mode = 'disabled'; - i += 1; - } - } - }; - - AblePlayer.prototype.getPlayer = function() { - - // Determine which player to use, if any - // return 'html5', 'youtube', 'vimeo', or null - - var i, sourceType, $newItem; - if (this.youTubeId) { - if (this.mediaType !== 'video') { - // attempting to play a YouTube video using an element other than <video> - return null; - } - else { - return 'youtube'; - } - } - else if (this.vimeoId) { - if (this.mediaType !== 'video') { - // attempting to play a Vimeo video using an element other than <video> - return null; - } - else { - return 'vimeo'; - } - - } - else if (this.testFallback \|\| - ((this.isUserAgent('msie 7') \|\| this.isUserAgent('msie 8') \|\| this.isUserAgent('msie 9')) && this.mediaType === 'video') \|\| - (this.isIOS() && (this.isIOS(4) \|\| this.isIOS(5) \|\| this.isIOS(6))) - ) { - // the user wants to test the fallback player, or - // the user is using an older version of IE or IOS, - // both of which had buggy implementation of HTML5 video - return null; - } - else if (this.media.canPlayType) { - return 'html5'; - } - else { - // Browser does not support the available media file - return null; - } - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.setCookie = function(cookieValue) { - - Cookies.set('Able-Player', JSON.stringify(cookieValue), { - expires: 90, - sameSite: 'strict' - }); - }; - - AblePlayer.prototype.getCookie = function() { - - var defaultCookie = { - preferences: {}, - sign: {}, - transcript: {} - }; - - var cookie; - try { - cookie = JSON.parse(Cookies.get('Able-Player')); - } - catch (err) { - // Original cookie can't be parsed; update to default - this.setCookie(defaultCookie); - cookie = defaultCookie; - } - if (cookie) { - return cookie; - } - else { - return defaultCookie; - } - }; - - AblePlayer.prototype.updateCookie = function( setting ) { - - // called when a particular setting had been updated - // useful for settings updated indepedently of Preferences dialog - // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle() - // setting is any supported preference name (e.g., "prefCaptions") - // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows) - var cookie, $window, windowPos, available, i, prefName; - cookie = this.getCookie(); - - if (setting === 'transcript' \|\| setting === 'sign') { - if (setting === 'transcript') { - $window = this.$transcriptArea; - windowPos = $window.position(); - if (typeof cookie.transcript === 'undefined') { - cookie.transcript = {}; - } - cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.transcript['zindex'] = $window.css('z-index'); - cookie.transcript['top'] = windowPos.top; - cookie.transcript['left'] = windowPos.left; - cookie.transcript['width'] = $window.width(); - cookie.transcript['height'] = $window.height(); - } - else if (setting === 'sign') { - $window = this.$signWindow; - windowPos = $window.position(); - if (typeof cookie.sign === 'undefined') { - cookie.sign = {}; - } - cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.sign['zindex'] = $window.css('z-index'); - cookie.sign['top'] = windowPos.top; - cookie.sign['left'] = windowPos.left; - cookie.sign['width'] = $window.width(); - cookie.sign['height'] = $window.height(); - } - } - else { - available = this.getAvailablePreferences(); - // Rebuild cookie with current cookie values, - // replacing the one value that's been changed - for (i = 0; i < available.length; i++) { - prefName = available[i]['name']; - if (prefName == setting) { - // this is the one that requires an update - cookie.preferences[prefName] = this[prefName]; - } - } - } - // Save updated cookie - this.setCookie(cookie); - }; - - AblePlayer.prototype.getPreferencesGroups = function() { - - // return array of groups in the order in which they will appear - // in the Preferences popup menu - // Human-readable label for each group is defined in translation table - if (this.mediaType === 'video') { - if (this.usingYouTubeCaptions) { - // no transcript is possible - return ['captions','descriptions','keyboard']; - } - else if (this.usingVimeoCaptions) { - // users cannot control caption appearance - // and no transcript is possible - return ['descriptions','keyboard']; - } - else { - return ['captions','descriptions','keyboard','transcript']; - } - } - else if (this.mediaType === 'audio') { - var groups = []; - groups.push('keyboard'); - if (this.lyricsMode) { - groups.push('transcript'); - } - return groups; - } - } - - AblePlayer.prototype.getAvailablePreferences = function() { - - // Return the list of currently available preferences. - // Preferences with no 'label' are set within player, not shown in Prefs dialog - var prefs = []; - - // Modifier keys preferences - prefs.push({ - 'name': 'prefAltKey', // use alt key with shortcuts - 'label': this.tt.prefAltKey, - 'group': 'keyboard', - 'default': 1 - }); - prefs.push({ - 'name': 'prefCtrlKey', // use ctrl key with shortcuts - 'label': this.tt.prefCtrlKey, - 'group': 'keyboard', - 'default': 1 - }); - prefs.push({ - 'name': 'prefShiftKey', - 'label': this.tt.prefShiftKey, - 'group': 'keyboard', - 'default': 0 - }); - - // Transcript preferences - prefs.push({ - 'name': 'prefTranscript', // transcript default state - 'label': null, - 'group': 'transcript', - 'default': 0 // off because turning it on has a certain WOW factor - }); - prefs.push({ - 'name': 'prefHighlight', // highlight transcript as media plays - 'label': this.tt.prefHighlight, - 'group': 'transcript', - 'default': 1 // on because many users can benefit - }); - prefs.push({ - 'name': 'prefAutoScrollTranscript', - 'label': null, - 'group': 'transcript', - 'default': 1 - }); - prefs.push({ - 'name': 'prefTabbable', // tab-enable transcript - 'label': this.tt.prefTabbable, - 'group': 'transcript', - 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page - }); - - if (this.mediaType === 'video') { - - // Caption preferences - - prefs.push({ - 'name': 'prefCaptions', // closed captions default state - 'label': null, - 'group': 'captions', - 'default': 1 - }); - - if (!this.usingYouTubeCaptions) { - - /* // not supported yet - prefs.push({ - 'name': 'prefCaptionsStyle', - 'label': this.tt.prefCaptionsStyle, - 'group': 'captions', - 'default': this.tt.captionsStylePopOn - }); - / - prefs.push({ - 'name': 'prefCaptionsPosition', - 'label': this.tt.prefCaptionsPosition, - 'group': 'captions', - 'default': this.defaultCaptionsPosition - }); - - prefs.push({ - 'name': 'prefCaptionsFont', - 'label': this.tt.prefCaptionsFont, - 'group': 'captions', - 'default': 'sans-serif' - }); - } - - // This is the one option that is supported by YouTube IFrame API - prefs.push({ - 'name': 'prefCaptionsSize', - 'label': this.tt.prefCaptionsSize, - 'group': 'captions', - 'default': '100%' - }); - - if (!this.usingYouTubeCaptions) { - - prefs.push({ - 'name': 'prefCaptionsColor', - 'label': this.tt.prefCaptionsColor, - 'group': 'captions', - 'default': 'white' - }); - prefs.push({ - 'name': 'prefCaptionsBGColor', - 'label': this.tt.prefCaptionsBGColor, - 'group': 'captions', - 'default': 'black' - }); - prefs.push({ - 'name': 'prefCaptionsOpacity', - 'label': this.tt.prefCaptionsOpacity, - 'group': 'captions', - 'default': '100%' - }); - } - - // Description preferences - prefs.push({ - 'name': 'prefDesc', // audio description default state - 'label': null, - 'group': 'descriptions', - 'default': 0 // off because users who don't need it might find it distracting - }); - prefs.push({ - 'name': 'prefDescFormat', // audio description default format (if both 'video' and 'text' are available) - 'label': null, - 'group': 'descriptions', - 'default': 'video' // video (an alternative described version) always wins - }); - prefs.push({ - 'name': 'prefDescVoice', - 'label': this.tt.prefDescVoice, - 'group': 'descriptions', - 'default': null // will be set later, in injectPrefsForm() - }); - prefs.push({ - 'name': 'prefDescPitch', - 'label': this.tt.prefDescPitch, - 'group': 'descriptions', - 'default': 1 // 0 to 2 - }); - prefs.push({ - 'name': 'prefDescRate', - 'label': this.tt.prefDescRate, - 'group': 'descriptions', - 'default': 1 // 0.1 to 10 (1 is normal speech; 2 is fast but decipherable; >2 is super fast) - }); - prefs.push({ - 'name': 'prefDescVolume', - 'label': this.tt.volume, - 'group': 'descriptions', - 'default': 1 // 0 to 1 - }); - prefs.push({ - 'name': 'prefDescPause', // automatically pause when closed description starts - 'label': this.tt.prefDescPause, - 'group': 'descriptions', - 'default': 1 // on as of 4.3.16, because extended description is frequently necessary - }); - prefs.push({ - 'name': 'prefDescVisible', // visibly show closed description (if avilable and used) - 'label': this.tt.prefDescVisible, - 'group': 'descriptions', - 'default': 0 // off as of 4.3.16, to avoid overloading the player with visible features - }); - - // Video preferences without a category (not shown in Preferences dialogs) - prefs.push({ - 'name': 'prefSign', // open sign language window by default if avilable - 'label': null, - 'group': null, - 'default': 0 // off because clicking an icon to see the sign window has a powerful impact - }); - - } - return prefs; - }; - - AblePlayer.prototype.loadCurrentPreferences = function () { - - // Load current/default preferences from cookie into the AblePlayer object. - - var available = this.getAvailablePreferences(); - var cookie = this.getCookie(); - // Copy current cookie values into this object, and fill in any default values. - for (var ii = 0; ii < available.length; ii++) { - var prefName = available[ii]['name']; - var defaultValue = available[ii]['default']; - if (cookie.preferences[prefName] !== undefined) { - this[prefName] = cookie.preferences[prefName]; - } - else { - cookie.preferences[prefName] = defaultValue; - this[prefName] = defaultValue; - } - } - - // Save since we may have added default values. - this.setCookie(cookie); - }; - - AblePlayer.prototype.injectPrefsForm = function (form) { - - // Creates a preferences form and injects it. - // form is one of the supported forms (groups) defined in getPreferencesGroups() - - var thisObj, available, descLangs, - $prefsDiv, formTitle, introText, - $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, - $fieldset, fieldsetClass, fieldsetId, - $descFieldset, $descLegend, $legend, - thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField, - $div1,id1,$radio1,$label1, - $div2,id2,$radio2,$label2, - options,$thisOption,optionValue,optionText,sampleCapsDiv, - changedPref,changedSpan,changedText, - currentDescState, - $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem, - dialog,saveButton,cancelButton; - - thisObj = this; - available = this.getAvailablePreferences(); - - // outer container, will be assigned role="dialog" - $prefsDiv = $('<div>',{ - 'class': 'able-prefs-form ' - }); - var customClass = 'able-prefs-form-' + form; - $prefsDiv.addClass(customClass); - - // add intro - if (form == 'captions') { - formTitle = this.tt.prefTitleCaptions; - introText = this.tt.prefIntroCaptions; - // Uncomment the following line to include a cookie warning - // Not included for now in order to cut down on unnecessary verbiage - // introText += ' ' + this.tt.prefCookieWarning; - $prefsIntro = $('<p>',{ - text: introText - }); - $prefsDiv.append($prefsIntro); - } - else if (form == 'descriptions') { - formTitle = this.tt.prefTitleDescriptions; - var $prefsIntro = $('<p>',{ - text: this.tt.prefIntroDescription1 - }); - var $prefsIntroUL = $('<ul>'); - var $prefsIntroLI1 = $('<li>',{ - text: this.tt.prefDescFormatOption1 - }); - var $prefsIntroLI2 = $('<li>',{ - text: this.tt.prefDescFormatOption2 - }); - - $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2); - if (this.hasOpenDesc && this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2 + ' '; - currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>'; - currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else if (this.hasOpenDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.'; - } - else if (this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else { - currentDescState = this.tt.prefIntroDescriptionNone; - } - $prefsIntroP2 = $('<p>',{ - html: currentDescState - }); - - p3Text = this.tt.prefIntroDescription3; - if (this.hasOpenDesc \|\| this.hasClosedDesc) { - p3Text += ' ' + this.tt.prefIntroDescription4; - } - $prefsIntroP3 = $('<p>',{ - text: p3Text - }); - - $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3); - } - else if (form == 'keyboard') { - formTitle = this.tt.prefTitleKeyboard; - introText = this.tt.prefIntroKeyboard1; - introText += ' ' + this.tt.prefIntroKeyboard2; - introText += ' ' + this.tt.prefIntroKeyboard3; - $prefsIntro = $('<p>',{ - text: introText - }); - $prefsDiv.append($prefsIntro); - } - else if (form == 'transcript') { - formTitle = this.tt.prefTitleTranscript; - introText = this.tt.prefIntroTranscript; - // Uncomment the following line to include a cookie warning - // Not included for now in order to cut down on unnecessary verbiage - // introText += ' ' + this.tt.prefCookieWarning; - $prefsIntro = $('<p>',{ - text: introText - }); - $prefsDiv.append($prefsIntro); - } - - $fieldset = $('<fieldset>'); - fieldsetClass = 'able-prefs-' + form; - fieldsetId = this.mediaId + '-prefs-' + form; - $fieldset.addClass(fieldsetClass).attr('id',fieldsetId); - if (form === 'keyboard') { - $legend = $('<legend>' + this.tt.prefHeadingKeyboard1 + '</legend>'); - $fieldset.append($legend); - } - else if (form === 'descriptions') { - $legend = $('<legend>' + this.tt.prefHeadingTextDescription + '</legend>'); - $fieldset.append($legend); - } - for (i=0; i<available.length; i++) { - - // only include prefs on the current form if they have a label - if ((available[i]['group'] == form) && available[i]['label']) { - - thisPref = available[i]['name']; - thisClass = 'able-' + thisPref; - thisId = this.mediaId + '_' + thisPref; - $thisDiv = $('<div>').addClass(thisClass); - - if (form === 'captions') { - $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); - $thisField = $('<select>',{ - name: thisPref, - id: thisId, - }); - if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') { - // add a change handler that updates the style of the sample caption text - $thisField.change(function() { - changedPref = $(this).attr('name'); - thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref); - }); - } - options = this.getCaptionsOptions(thisPref); - for (j=0; j < options.length; j++) { - if (thisPref === 'prefCaptionsPosition') { - optionValue = options[j]; - if (optionValue === 'overlay') { - optionText = this.tt.captionsPositionOverlay; - } - else if (optionValue === 'below') { - optionValue = options[j]; - optionText = this.tt.captionsPositionBelow; - } - } - else if (thisPref === 'prefCaptionsFont' \|\| thisPref === 'prefCaptionsColor' \|\| thisPref === 'prefCaptionsBGColor') { - optionValue = options[j][0]; - optionText = options[j][1]; - } - else if (thisPref === 'prefCaptionsOpacity') { - optionValue = options[j]; - optionText = options[j]; - if (optionValue === '0%') { - optionText += ' (' + this.tt.transparent + ')'; - } - else if (optionValue === '100%') { - optionText += ' (' + this.tt.solid + ')'; - } - } - else { - optionValue = options[j]; - optionText = options[j]; - } - $thisOption = $('<option>',{ - value: optionValue, - text: optionText - }); - if (this[thisPref] === optionValue) { - $thisOption.prop('selected',true); - } - $thisField.append($thisOption); - } - $thisDiv.append($thisLabel,$thisField); - } - else if (form === 'descriptions') { - $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); - if (thisPref === 'prefDescPause' \|\| thisPref === 'prefDescVisible') { - // these preferences are checkboxes - $thisDiv.addClass('able-prefs-checkbox'); - $thisField = $('<input>',{ - type: 'checkbox', - name: thisPref, - id: thisId, - value: 'true' - }); - // check current active value for this preference - if (this[thisPref] === 1) { - $thisField.prop('checked',true); - } - $thisDiv.append($thisField,$thisLabel); - } - else if (this.synth) { - // Only show these options if browser supports speech synthesis - $thisDiv.addClass('able-prefs-select'); - $thisField = $('<select>',{ - name: thisPref, - id: thisId, - }); - if (thisPref === 'prefDescVoice' && this.descVoices) { - for (j=0; j < this.descVoices.length; j++) { - optionValue = this.descVoices[j].name; - optionText = optionValue + ' (' + this.descVoices[j].lang + ')'; - $thisOption = $('<option>',{ - value: optionValue, - text: optionText - }); - if (this[thisPref] == optionValue) { - $thisOption.prop('selected',true); - } - $thisField.append($thisOption); - this.$voiceSelectField = $thisField; - } - } - else { - if (thisPref == 'prefDescPitch') { // 0 to 2 - options = [0,0.5,1,1.5,2]; - } - else if (thisPref == 'prefDescRate') { // 0.1 to 10 - // Tests with a variety of voices on MacOS and Windows - // yielded the following choices that seem reasonable for audio description: - // 0.5 - too slow (exclude this) - // 0.7 - casual - // 0.8 - add this - // 0.9 - add this - // 1 - normal - // 1.1 - add this - // 1.2 - add this - // 1.5 - quick - // 2 - speedy - // 2.5 - fleet - // 3 - fast! (some voices don't get any faster than this - - // Note: if these values are modified, must also modfiy them - // in makePrefsValueReadable() - options = [0.7,0.8,0.9,1,1.1,1.2,1.5,2,2.5,3]; - } - else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 - options = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]; - } - if (typeof options !== 'undefined') { - for (j=0; j < options.length; j++) { - optionValue = options[j]; - optionText = this.makePrefsValueReadable(thisPref,optionValue); - $thisOption = $('<option>',{ - value: optionValue, - text: optionText - }); - if (this[thisPref] == optionValue) { - $thisOption.prop('selected',true); - } - $thisField.append($thisOption); - $thisDiv.append($thisLabel,$thisField); - } - } - } - // add a change handler that announces the sample description text - $thisField.on('change',function() { - thisObj.announceDescriptionText('sample',thisObj.tt.sampleDescriptionText); - }); - $thisDiv.append($thisLabel,$thisField); - } - } - else { // all other fields are checkboxes - $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); - $thisField = $('<input>',{ - type: 'checkbox', - name: thisPref, - id: thisId, - value: 'true' - }); - // check current active value for this preference - if (this[thisPref] === 1) { - $thisField.prop('checked',true); - } - if (form === 'keyboard') { - // add a change handler that updates the list of current keyboard shortcuts - $thisField.on('change',function() { - changedPref = $(this).attr('name'); - if (changedPref === 'prefAltKey') { - changedSpan = '.able-modkey-alt'; - changedText = thisObj.tt.prefAltKey + ' + '; - } - else if (changedPref === 'prefCtrlKey') { - changedSpan = '.able-modkey-ctrl'; - changedText = thisObj.tt.prefCtrlKey + ' + '; - } - else if (changedPref === 'prefShiftKey') { - changedSpan = '.able-modkey-shift'; - changedText = thisObj.tt.prefShiftKey + ' + '; - } - if ($(this).is(':checked')) { - $(changedSpan).text(changedText); - } - else { - $(changedSpan).text(''); - } - }); - } - $thisDiv.append($thisField,$thisLabel); - } - $fieldset.append($thisDiv); - } - } - $prefsDiv.append($fieldset); - - if (form === 'captions') { - // add a sample closed caption div to prefs dialog - // do not show this for YouTube captions, since it's not an accurate reflection - if (this.mediaType === 'video' && !this.usingYouTubeCaptions) { - this.$sampleCapsDiv = $('<div>',{ - 'class': 'able-captions-sample' - }).text(this.tt.sampleCaptionText); - $prefsDiv.append(this.$sampleCapsDiv); - this.stylizeCaptions(this.$sampleCapsDiv); - } - } - else if (form === 'descriptions') { - if (this.synth) { - // add a div with sample audio description text - this.$sampleDescDiv = $('<div>',{ - 'class': 'able-desc-sample' - }).text(this.tt.sampleDescriptionText); - $prefsDiv.append(this.$sampleDescDiv); - } - } - else if (form === 'keyboard') { - // add a current list of keyboard shortcuts - $kbHeading = $('<h2>',{ - text: this.tt.prefHeadingKeyboard2 - }); - $kbList = $('<ul>'); - // create arrays of kbLabels and keys - kbLabels = []; - keys = []; - for (i=0; i<this.controls.length; i++) { - if (this.controls[i] === 'play') { - kbLabels.push(this.tt.play + '/' + this.tt.pause); - keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar); - } - else if (this.controls[i] === 'restart') { - kbLabels.push(this.tt.restart); - keys.push('s'); - } - else if (this.controls[i] === 'previous') { - kbLabels.push(this.tt.prevTrack); - keys.push('b'); // b = back - } - else if (this.controls[i] === 'next') { - kbLabels.push(this.tt.nextTrack); - keys.push('n'); - } - else if (this.controls[i] === 'rewind') { - kbLabels.push(this.tt.rewind); - keys.push('r'); - } - else if (this.controls[i] === 'forward') { - kbLabels.push(this.tt.forward); - keys.push('f'); - } - else if (this.controls[i] === 'volume') { - kbLabels.push(this.tt.volume); - keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9'); - // mute toggle - kbLabels.push(this.tt.mute + '/' + this.tt.unmute); - keys.push('m'); - } - else if (this.controls[i] === 'captions') { - if (this.captions.length > 1) { - // caption button launches a Captions popup menu - kbLabels.push(this.tt.captions); - } - else { - // there is only one caption track - // therefore caption button is a toggle - if (this.captionsOn) { - kbLabels.push(this.tt.hideCaptions); - } - else { - kbLabels.push(this.tt.showCaptions); - } - } - keys.push('c'); - } - else if (this.controls[i] === 'descriptions') { - if (this.descOn) { - kbLabels.push(this.tt.turnOffDescriptions); - } - else { - kbLabels.push(this.tt.turnOnDescriptions); - } - keys.push('d'); - } - else if (this.controls[i] === 'prefs') { - kbLabels.push(this.tt.preferences); - keys.push('e'); - } - else if (this.controls[i] === 'help') { - kbLabels.push(this.tt.help); - keys.push('h'); - } - } - for (i=0; i<keys.length; i++) { - // alt - kbListText = '<span class="able-modkey-alt">'; - if (this.prefAltKey === 1) { - kbListText += this.tt.prefAltKey + ' + '; - } - kbListText += '</span>'; - // ctrl - kbListText += '<span class="able-modkey-ctrl">'; - if (this.prefCtrlKey === 1) { - kbListText += this.tt.prefCtrlKey + ' + '; - } - kbListText += '</span>'; - // shift - kbListText += '<span class="able-modkey-shift">'; - if (this.prefShiftKey === 1) { - kbListText += this.tt.prefShiftKey + ' + '; - } - kbListText += '</span>'; - kbListText += '<span class="able-modkey">' + keys[i] + '</span>'; - kbListText += ' = ' + kbLabels[i]; - $kbListItem = $('<li>',{ - html: kbListText - }); - $kbList.append($kbListItem); - } - // add Escape key - kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>'; - kbListText += ' = ' + this.tt.escapeKeyFunction; - $kbListItem = $('<li>',{ - html: kbListText - }); - $kbList.append($kbListItem); - // put it all together - $prefsDiv.append($kbHeading,$kbList); - } - - // $prefsDiv (dialog) must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers - $('body').append($prefsDiv); - dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em'); - - // Add save and cancel buttons. - $prefsDiv.append('<hr>'); - saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - saveButton.click(function () { - dialog.hide(); - thisObj.savePrefsFromForm(); - }); - cancelButton.click(function () { - dialog.hide(); - thisObj.resetPrefsForm(); - }); - - $prefsDiv.append(saveButton); - $prefsDiv.append(cancelButton); - - // add global reference for future control - if (form === 'captions') { - this.captionPrefsDialog = dialog; - } - else if (form === 'descriptions') { - this.descPrefsDialog = dialog; - } - else if (form === 'keyboard') { - this.keyboardPrefsDialog = dialog; - } - else if (form === 'transcript') { - this.transcriptPrefsDialog = dialog; - } - - // Add click handler for dialog close button - // (button is added in dialog.js) - $('div.able-prefs-form button.modalCloseButton').click(function() { - thisObj.resetPrefsForm(); - }) - // Add handler for escape key - $('div.able-prefs-form').keydown(function(e) { - if (e.which === 27) { // escape - thisObj.resetPrefsForm(); - } - }); - }; - - AblePlayer.prototype.rebuildDescPrefsForm = function () { - - // Called if getBrowserVoices() succeeded after an earlier failure - - var i, optionValue, optionText, $thisOption; - - this.$voiceSelectField = $('#' + this.mediaId + '_prefDescVoice'); - for (i=0; i < this.descVoices.length; i++) { - optionValue = this.descVoices[i].name; - optionText = optionValue + ' (' + this.descVoices[i].lang + ')'; - $thisOption = $('<option>',{ - value: optionValue, - text: optionText - }); - if (this.prefDescVoice == optionValue) { - $thisOption.prop('selected',true); - } - this.$voiceSelectField.append($thisOption); - } - }; - - AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { - - // The values for pitch, rate, and volume (web speech API) - // are strange and inconsistent between variables - // this function returns text that is more readable than the values themselves - - if (pref === 'prefDescPitch') { - if (value === 0) { - return this.tt.prefDescPitch1; - } - else if (value === 0.5) { - return this.tt.prefDescPitch2; - } - else if (value === 1) { - return this.tt.prefDescPitch3; - } - else if (value === 1.5) { - return this.tt.prefDescPitch4; - } - else if (value === 2) { - return this.tt.prefDescPitch5; - } - } - else if (pref === 'prefDescRate') { - // default in the API is 0.1 to 10, where 1 is normal speaking voice - // our custom range offers severa rates close to 1 - // plus a couple of crazy fast ones for sport - // Our options (1-10) or mapped here to 0.5 to 0.14 - if (value === 0.7) { - return 1; - } - else if (value === 0.8) { - return 2; - } - else if (value === 0.9) { - return 3; - } - else if (value === 1) { - return 4; - } - else if (value === 1.1) { - return 5; - } - else if (value === 1.2) { - return 6; - } - else if (value === 1.5) { - return 7; - } - else if (value === 2) { - return 8; - } - else if (value === 2.5) { - return 9; - } - else if (value === 3) { - return 10; - } - } - else if (pref === 'prefDescVolume') { - // values range from 0.1 to 1.0 - return value 10; - } - return value; - }; - - AblePlayer.prototype.resetPrefsForm = function () { - - // Reset preferences form with default values from cookie - // Called when: - // User clicks cancel or close button in Prefs Dialog - // User presses Escape to close Prefs dialog - // User clicks Save in Prefs dialog, & there's more than one player on page - - var thisObj, cookie, available, i, prefName, prefId, thisDiv, thisId; - - thisObj = this; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (i=0; i<available.length; i++) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is a caption-related select box - $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]); - } - else { // all others are checkboxes - if (this[prefName] === 1) { - $('input[name="' + prefName + '"]').prop('checked',true); - } - else { - $('input[name="' + prefName + '"]').prop('checked',false); - } - } - } - // also restore style of sample caption div - this.stylizeCaptions(this.$sampleCapsDiv); - }; - - AblePlayer.prototype.savePrefsFromForm = function () { - - // Return a prefs object constructed from the form. - // called when user saves the Preferences form - // update cookie with new value - var cookie, available, prefName, prefId, numChanges, - numCapChanges, capSizeChanged, capSizeValue, newValue; - - numChanges = 0; - numCapChanges = 0; // changes to caption-style-related preferences - capSizeChanged = false; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (var i=0; i < available.length; i++) { - // only prefs with labels are used in the Prefs form - if (available[i]['label']) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if (prefName == 'prefDescFormat') { - // As of v4.0.10, prefDescFormat is no longer a choice - // this.prefDescFormat = $('input[name="' + prefName + '"]:checked').val(); - this.prefDescFormat = 'video'; - if (this.prefDescFormat !== cookie.preferences['prefDescFormat']) { // user's preference has changed - cookie.preferences['prefDescFormat'] = this.prefDescFormat; - numChanges++; - } - } - else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is one of the caption-related select fields - newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; - // also update global var for this pref (for caption fields, not done elsewhere) - this[prefName] = newValue; - numChanges++; - numCapChanges++; - } - if (prefName === 'prefCaptionsSize') { - capSizeChanged = true; - capSizeValue = newValue; - } - } - else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { - // this is one of the description-related select fields - newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; - // also update global var for this pref - this[prefName] = newValue; - numChanges++; - } - } - else { // all other fields are checkboxes - if ($('input[id="' + prefId + '"]').is(':checked')) { - cookie.preferences[prefName] = 1; - if (this[prefName] === 1) { - // nothing has changed - } - else { - // user has just turned this pref on - this[prefName] = 1; - numChanges++; - } - } - else { // thisPref is not checked - cookie.preferences[prefName] = 0; - if (this[prefName] === 1) { - // user has just turned this pref off - this[prefName] = 0; - numChanges++; - } - else { - // nothing has chaged - } - } - } - } - } - if (numChanges > 0) { - this.setCookie(cookie); - this.showAlert(this.tt.prefSuccess); - } - else { - this.showAlert(this.tt.prefNoChange); - } - if (this.player === 'youtube' && - (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) && - capSizeChanged) { - // update font size of YouTube captions - this.youTubePlayer.setOption('captions','fontSize',this.translatePrefs('size',capSizeValue,'youtube')); - } - if (AblePlayerInstances.length > 1) { - // there are multiple players on this page. - // update prefs for ALL of them - for (var i=0; i<AblePlayerInstances.length; i++) { - AblePlayerInstances[i].updatePrefs(); - AblePlayerInstances[i].geteferences(); - AblePlayerInstances[i].resetPrefsForm(); - if (numCapChanges > 0) { - AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$captionsDiv); - // also apply same changes to descriptions, if present - if (typeof AblePlayerInstances[i].$descDiv !== 'undefined') { - AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$descDiv); - } - } - } - } - else { - // there is only one player - this.updatePrefs(); - if (numCapChanges > 0) { - this.stylizeCaptions(this.$captionsDiv); - // also apply same changes to descriptions, if present - if (typeof this.$descDiv !== 'undefined') { - this.stylizeCaptions(this.$descDiv); - } - } - } - } - - AblePlayer.prototype.updatePrefs = function () { - - // Update player based on current prefs. Safe to call multiple times. - - if (this.$transcriptDiv) { - // tabbable transcript - if (this.prefTabbable === 1) { - this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - else { - this.$transcriptDiv.find('span.able-transcript-seekpoint').removeAttr('tabindex'); - } - - // transcript highlights - if (this.prefHighlight === 0) { - // user doesn't want highlights; remove any existing highlights - this.$transcriptDiv.find('span').removeClass('able-highlight'); - } - } - - // Re-initialize caption and description in case relevant settings have changed - this.updateCaption(); - this.refreshingDesc = true; - this.initDescription(); - }; - - AblePlayer.prototype.usingModifierKeys = function(e) { - - // return true if user is holding down required modifier keys - if ((this.prefAltKey === 1) && !e.altKey) { - return false; - } - if ((this.prefCtrlKey === 1) && !e.ctrlKey) { - return false; - } - if ((this.prefShiftKey === 1) && !e.shiftKey) { - return false; - } - return true; - }; - -})(jQuery); - -(function ($) { - // See section 4.1 of dev.w3.org/html5/webvtt for format details. - AblePlayer.prototype.parseWebVTT = function(srcFile,text) { - -// var deferred = new $.Deferred(); -// var promise = deferred.promise(); - - // Normalize line ends to \n. - text = text.replace(/(\r\n\|\n\|\r)/g,'\n'); - - var parserState = { - src: srcFile, - text: text, - error: null, - metadata: {}, - cues: [], - line: 1, - column: 1 - }; - - try { - act(parserState, parseFileBody); - } - catch (err) { - var errString = 'Invalid WebVTT file: ' + parserState.src + '\n'; - errString += 'Line: ' + parserState.line + ', '; - errString += 'Column: ' + parserState.column + '\n'; - errString += err; - if (console.warn) { - - } - else if (console.log) { - - } - } - return parserState; - } - - function actList(state, list) { - var results = []; - for (var ii = 0; ii < list.length; ii++) { - results.push(act(state, list[ii])); - } - return results; - } - - // Applies the action and checks for errors. - function act(state, action) { - var val = action(state); - if (state.error !== null) { - throw state.error; - } - return val; - } - - function updatePosition(state, cutText) { - for (var ii = 0; ii < cutText.length; ii++) { - if (cutText[ii] === '\n') { - state.column = 1; - state.line += 1; - } - else { - state.column += 1; - } - } - } - - function cut(state, length) { - var returnText = state.text.substring(0, length); - updatePosition(state, returnText); - state.text = state.text.substring(length); - return returnText; - } - - function cutLine(state, length) { - var nextEOL = state.text.indexOf('\n'); - var returnText; - if (nextEOL === -1) { - returnText = state.text; - updatePosition(state, returnText); - state.text = ''; - } - else { - returnText = state.text.substring(0, nextEOL); - updatePosition(state, returnText + '\n'); - state.text = state.text.substring(nextEOL + 1); - } - return returnText; - } - - function peekLine(state) { - var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - return state.text; - } - else { - return state.text.substring(0, nextEOL); - } - } - - function parseFileBody(state) { - actList(state, [ - eatOptionalBOM, - eatSignature]); - var c = state.text[0]; - if (c === ' ' \|\| c === '\t' \|\| c === '\n') { - actList(state, [ - eatUntilEOLInclusive, - parseMetadataHeaders, - eatAtLeast1EmptyLines, - parseCuesAndComments]); - } - else { - state.error = "WEBVTT signature not followed by whitespace."; - } - } - - // Parses all metadata headers until a cue is discovered. - function parseMetadataHeaders(state) { - while (true) { - var nextLine = peekLine(state); - if (nextLine.indexOf('-->') !== -1) { - return; - } - else if (nextLine.length === 0) { - return; - } - else { - var keyValue = act(state, getMetadataKeyValue); - state.metadata[keyValue[0]] = keyValue[1]; - act(state, eatUntilEOLInclusive); - } - } - } - - function nextSpaceOrNewline(s) { - var possible = []; - var spaceIndex = s.indexOf(' '); - if (spaceIndex >= 0) { - possible.push(spaceIndex); - } - var tabIndex = s.indexOf('\t'); - if (tabIndex >= 0) { - possible.push(tabIndex); - } - var lineIndex = s.indexOf('\n'); - if (lineIndex >= 0) { - possible.push(lineIndex); - } - - return Math.min.apply(null, possible); - } - - function getMetadataKeyValue(state) { - var next = state.text.indexOf('\n'); - var pair = cut(state, next); - var colon = pair.indexOf(':'); - if (colon === -1) { - state.error = 'Missing colon.'; - return; - } - else { - var pairName = pair.substring(0, colon); - var pairValue = pair.substring(colon + 1); - return [pairName, pairValue]; - } - } - - function getSettingsKeyValue(state) { - var next = nextSpaceOrNewline(state.text); - var pair = cut(state, next); - var colon = pair.indexOf(':'); - if (colon === -1) { - state.error = 'Missing colon.'; - return; - } - else { - var pairName = pair.substring(0, colon); - var pairValue = pair.substring(colon + 1); - return [pairName, pairValue]; - } - } - - function parseCuesAndComments(state) { - while (true) { - var nextLine = peekLine(state); - // If NOTE is not on a line all its own, it must be followed by a space or tab. - if (nextLine.indexOf('NOTE') === 0 && ((nextLine.length === 4) \|\| (nextLine[4] === ' ') \|\| (nextLine[4] === '\t'))) { - actList(state, [eatComment, eatEmptyLines]); - } - else if ($.trim(nextLine).length === 0 && state.text.length > 0) { - act(state, eatEmptyLines); - } - else if ($.trim(nextLine).length > 0) { - act(state, parseCue); - } - else { - // Everythings parsed! - return; - } - } - } - - function parseCue(state) { - - var nextLine = peekLine(state); - var cueId; - var errString; - - if(nextLine.indexOf('-->') === -1) { - cueId = cutLine(state); - nextLine = peekLine(state); - if(nextLine.indexOf('-->') === -1) { - errString = 'Invalid WebVTT file: ' + state.src + '\n'; - errString += 'Line: ' + state.line + ', '; - errString += 'Column: ' + state.column + '\n'; - errString += 'Expected cue timing for cueId \''+cueId+'\' but found: ' + nextLine + '\n'; - if (console.warn) { - - } - else if (console.log) { - - } - return; // Return leaving line for parseCuesAndComments to handle - } - } - - var cueTimings = actList(state, [getTiming, - eatAtLeast1SpacesOrTabs, - eatArrow, - eatAtLeast1SpacesOrTabs, - getTiming]); - - var startTime = cueTimings[0]; - var endTime = cueTimings[4]; - if (startTime >= endTime) { - state.error = 'Start time is not sooner than end time.'; - return; - } - - act(state, eatSpacesOrTabs); - var cueSettings = act(state, getCueSettings); - // Cut the newline. - cut(state, 1); - var components = act(state, getCuePayload); - - if (typeof cueId === 'undefined') { - cueId = state.cues.length + 1; - } - state.cues.push({ - id: cueId, - start: startTime, - end: endTime, - settings: cueSettings, - components: components - }); - } - - function getCueSettings(state) { - var cueSettings = {}; - while (state.text.length > 0 && state.text[0] !== '\n') { - var keyValue = act(state, getSettingsKeyValue); - cueSettings[keyValue[0]] = keyValue[1]; - act(state, eatSpacesOrTabs); - } - return cueSettings; - } - - function getCuePayload(state) { - // Parser based on instructions in draft. - var result = {type: 'internal', tagName: '', value: '', classes: [], annotation: '', parent: null, children: [], language: ''}; - var current = result; - var languageStack = []; - while (state.text.length > 0) { - var nextLine = peekLine(state); - if (nextLine.indexOf('-->') !== -1 \|\| /^\s$/.test(nextLine)) { - break; // Handle empty cues - } - // Have to separately detect double-lines ending cue due to our non-standard parsing. - // TODO: Redo outer algorithm to conform to W3 spec? - if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { - cut(state, 2); - break; - } - - var token = getCueToken(state); - // We'll use the tokens themselves as objects where possible. - if (token.type === 'string') { - current.children.push(token); - } - else if (token.type === 'startTag') { - token.type = token.tagName; - // Define token.parent; added by Terrill to fix bug end 'endTag' loop - token.parent = current; - if ($.inArray(token.tagName, ['i', 'b', 'u', 'ruby']) !== -1) { - if (languageStack.length > 0) { - current.language = languageStack[languageStack.length - 1]; - } - current.children.push(token); - current = token; - } - else if (token.tagName === 'rt' && current.tagName === 'ruby') { - if (languageStack.length > 0) { - current.language = languageStack[languageStack.length - 1]; - } - current.children.push(token); - current = token; - } - else if (token.tagName === 'c') { - token.value = token.annotation; - if (languageStack.length > 0) { - current.language = languageStack[languageStack.length - 1]; - } - current.children.push(token); - current = token; - } - else if (token.tagName === 'v') { - token.value = token.annotation; - if (languageStack.length > 0) { - current.language = languageStack[languageStack.length - 1]; - } - current.children.push(token); - current = token; - } - else if (token.tagName === 'lang') { - languageStack.push(token.annotation); - if (languageStack.length > 0) { - current.language = languageStack[languageStack.length - 1]; - } - current.children.push(token); - current = token; - } - } - else if (token.type === 'endTag') { - if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) { - // NOTE from Terrill: This was resulting in an error because current.parent was undefined - // Fixed (I think) by assigning current token to token.parent in 'startTag' loop - current = current.parent; - } - else if (token.tagName === 'lang' && current.type === 'lang') { - current = current.parent; - languageStack.pop(); - } - else if (token.tagName === 'ruby' && current.type === 'rt') { - current = current.parent.parent; - } - } - else if (token.type === 'timestampTag') { - var tempState = { - text: token.value, - error: null, - metadata: {}, - cues: [], - line: 1, - column: 1 - }; - try { - var timing = act(tempState, getTiming); - if (tempState.text.length === 0) { - token.value = timing; - current.push(token); - } - } - catch (err) { - } - } - } - return result; - } - - // Gets a single cue token; uses the method in the w3 specification. - function getCueToken(state) { - var tokenState = 'data'; - var result = []; - var buffer = ''; - var token = {type: '', tagName: '', value: '', classes: [], annotation: '', children: []} - - while (true) { - var c; - // Double newlines indicate end of token. - if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { - c = '\u0004'; - } - else if (state.text.length > 0) { - c = state.text[0]; - } - else { - // End of file. - c = '\u0004'; - } - if (tokenState === 'data') { - if (c === '&') { - buffer = '&'; - tokenState = 'escape'; - } - else if (c === '<') { - if (result.length === 0) { - tokenState = 'tag'; - } - else { - token.type = 'string'; - token.value = result.join(''); - return token; - } - } - else if (c === '\u0004') { - return {type: 'string', value: result.join('')}; - } - else { - result.push(c); - } - } - else if (tokenState === 'escape') { - if (c === '&') { - result.push(buffer); - buffer = '&'; - } - else if (c.match(/[0-9a-z]/)) { - buffer += c; - } - else if (c === ';') { - if (buffer === '&') { - result.push('&'); - } - else if (buffer === '<') { - result.push('<'); - } - else if (buffer === '>') { - result.push('>'); - } - else if (buffer === '&lrm') { - result.push('\u200e'); - } - else if (buffer === '&rlm') { - result.push('\u200f'); - } - else if (buffer === ' ') { - result.push('\u00a0'); - } - else { - result.push(buffer); - result.push(';'); - } - tokenState = 'data'; - } - else if (c === '<' \|\| c === '\u0004') { - result.push(buffer); - token.type = 'string'; - token.value = result.join(''); - return token; - } - else if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { // Handle unescaped & chars as strings - result.push(buffer); - token.type = 'string'; - token.value = result.join(''); - return token; - } - else { - result.push(buffer); - tokenState = 'data'; - } - } - else if (tokenState === 'tag') { - if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { - tokenState = 'startTagAnnotation'; - } - else if (c === '.') { - tokenState = 'startTagClass'; - } - else if (c === '/') { - tokenState = 'endTag'; - } - else if (c.match('[0-9]')) { - tokenState = 'timestampTag'; - result.push(c); - } - else if (c === '>') { - cut(state, 1); - break; - } - else if (c === '\u0004') { - token.tagName = ''; - token.type = 'startTag'; - return token; - } - else { - result.push(c); - tokenState = 'startTag'; - } - } - else if (tokenState === 'startTag') { - if (c === '\t' \|\| c === '\u000c' \|\| c === ' ') { - tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { - buffer = c; - tokenState = 'startTagAnnotation'; - } - else if (c === '.') { - tokenState = 'startTagClass'; - } - else if (c === '>') { - cut(state, 1); - token.tagName = result.join(''); - token.type = 'startTag'; - return token; - } - else if (c === '\u0004') { - token.tagName = result.join(''); - token.type = 'startTag'; - return token; - } - else { - result.push(c); - } - } - else if (tokenState === 'startTagClass') { - if (c === '\t' \|\| c === '\u000c' \|\| c === ' ') { - token.classes.push(buffer); - buffer = ''; - tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { - token.classes.push(buffer); - buffer = c; - tokenState = 'startTagAnnotation'; - } - else if (c === '.') { - token.classes.push(buffer); - buffer = ""; - } - else if (c === '>') { - cut(state, 1); - token.classes.push(buffer); - token.type = 'startTag'; - token.tagName = result.join(''); - return token; - } - else if (c === '\u0004') { - token.classes.push(buffer); - token.type = 'startTag'; - token.tagName = result.join(''); - return token; - } - else { - buffer += 'c'; - } - } - else if (tokenState === 'startTagAnnotation') { - if (c === '>') { - cut(state, 1); - buffer = $.trim(buffer).replace(/ +/, ' '); - token.type = 'startTag'; - token.tagName = result.join(''); - token.annotation = buffer; - return token; - } - else if (c === '\u0004') { - buffer = $.trim(buffer).replace(/ +/, ' '); - token.type = 'startTag'; - token.tagName = result.join(''); - token.annotation = buffer; - return token; - } - else { - buffer += c; - } - } - else if (tokenState === 'endTag') { - if (c === '>') { - cut(state, 1); - token.type = 'endTag'; - token.tagName = result.join(''); - return token; - } - else if (c === '\u0004') { - token.type = 'endTag'; - token.tagName = result.join(''); - return token; - } - else { - result.push(c); - } - } - else if (tokenState === 'timestampTag') { - if (c === '>') { - cut(state, 1); - token.type = 'timestampTag'; - token.name = result.join(''); - return token; - } - else if (c === '\u0004') { - token.type = 'timestampTag'; - token.name = result.join(''); - return token; - } - else { - result.push(c); - } - } - else { - throw 'Unknown tokenState ' + tokenState; - } - - cut(state, 1); - } - } - - function eatComment(state) { - // Cut the NOTE line. - var noteLine = cutLine(state); - if (noteLine.indexOf('-->') !== -1) { - state.error = 'Invalid syntax: --> in NOTE line.'; - return; - } - while (true) { - var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { - // End of comment. - return; - } - else if (nextLine.indexOf('-->') !== -1) { - state.error = 'Invalid syntax: --> in comment.'; - return; - } - else { - cutLine(state); - } - } - } - - // Initial byte order mark. - function eatOptionalBOM(state) { - if (state.text[0] === '\ufeff') { - cut(state, 1); - } - - } - - // "WEBVTT" string. - function eatSignature(state) { - if (state.text.substring(0,6) === 'WEBVTT') { - cut(state, 6); - } - else { - state.error = 'Invalid signature.'; - } - } - - function eatArrow(state) { - if (state.text.length < 3 \|\| state.text.substring(0,3) !== '-->') { - state.error = 'Missing -->'; - } - else { - cut(state, 3); - } - } - - function eatSingleSpaceOrTab(state) { - if (state.text[0] === '\t' \|\| state.text[0] === ' ') { - cut(state, 1); - } - else { - state.error = 'Missing space.'; - } - } - - function eatSpacesOrTabs(state) { - while (state.text[0] === '\t' \|\| state.text[0] === ' ') { - cut(state, 1); - } - } - - function eatAtLeast1SpacesOrTabs(state) { - var numEaten = 0; - while (state.text[0] === '\t' \|\| state.text[0] === ' ') { - cut(state, 1); - numEaten += 1; - } - if (numEaten === 0) { - state.error = 'Missing space.'; - } - } - - function eatUntilEOLInclusive(state) { - var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - state.error = 'Missing EOL.'; - } - else { - cut(state, nextEOL + 1); - } - } - - function eatEmptyLines(state) { - while (state.text.length > 0) { - var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { - cutLine(state); - } - else { - break; - } - } - } - - // Eats empty lines, but throws an error if there's not at least one. - function eatAtLeast1EmptyLines(state) { - var linesEaten = 0; - while (state.text.length > 0) { - var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { - cutLine(state); - linesEaten += 1; - } - else { - break; - } - } - if (linesEaten === 0) { - state.error = 'Missing empty line.'; - } - } - - function getTiming(state) { - var nextSpace = nextSpaceOrNewline(state.text); - if (nextSpace === -1) { - state.error('Missing timing.'); - return; - } - var timestamp = cut(state, nextSpace); - - var results = /((\d\d):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(timestamp); - - if (!results) { - state.error = 'Unable to parse timestamp'; - return; - } - var time = 0; - var hours = results[2]; - var minutes = results[4]; - - if (minutes) { - if (parseInt(minutes, 10) > 59) { - state.error = 'Invalid minute range'; - return; - } - if (hours) { - time += 3600 parseInt(hours, 10); - } - time += 60 * parseInt(minutes, 10); - var seconds = results[5]; - if (parseInt(seconds, 10) > 59) { - state.error = 'Invalid second range'; - return; - } - - time += parseInt(seconds, 10); - time += parseInt(results[6], 10) / 1000; - } - else { - time += parseInt(results[7], 10); - time += parseInt(results[8], 10) / 1000; - } - - return time; - } -})(jQuery); - -(function ($) { - - AblePlayer.prototype.injectPlayerCode = function() { - - // create and inject surrounding HTML structure - // If IOS: - // If video: - // IOS does not support any of the player's functionality - // - everything plays in its own player - // Therefore, AblePlayer is not loaded & all functionality is disabled - // (this all determined. If this is IOS && video, this function is never called) - // If audio: - // HTML cannot be injected as a parent of the <audio> element - // It is therefore injected after the <audio> element - // This is only a problem in IOS 6 and earlier, - // & is a known bug, fixed in IOS 7 - - var thisObj, vidcapContainer, prefsGroups, i; - thisObj = this; - - // create three wrappers and wrap them around the media element. From inner to outer: - // $mediaContainer - contains the original media element - // $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions) - // $ableWrapper - contains additional widgets (e.g., transcript window, sign window) - this.$mediaContainer = this.$media.wrap('<div class="able-media-container"></div>').parent(); - this.$ableDiv = this.$mediaContainer.wrap('<div class="able"></div>').parent(); - this.$ableWrapper = this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(); - this.$ableWrapper.addClass('able-skin-' + this.skin); - - // NOTE: Excluding the following from youtube was resulting in a player - // that exceeds the width of the YouTube video - // Unclear why it was originally excluded; commented out in 3.1.20 - // if (this.player !== 'youtube') { - this.$ableWrapper.css({ - 'max-width': this.playerMaxWidth + 'px' - }); - - this.injectOffscreenHeading(); - - if (this.mediaType === 'video') { - // youtube adds its own big play button - // don't show ours unless video has a poster attribute - // (which obstructs the YouTube poster & big play button) - if (this.iconType != 'image' && (this.player !== 'youtube' \|\| this.hasPoster)) { - this.injectBigPlayButton(); - } - - // add container that captions or description will be appended to - // Note: new Jquery object must be assigned _after_ wrap, hence the temp vidcapContainer variable - vidcapContainer = $('<div>',{ - 'class' : 'able-vidcap-container' - }); - this.$vidcapContainer = this.$mediaContainer.wrap(vidcapContainer).parent(); - } - this.injectPlayerControlArea(); - this.injectTextDescriptionArea(); - this.injectAlert(); - this.injectPlaylist(); - }; - - AblePlayer.prototype.injectOffscreenHeading = function () { - // Inject an offscreen heading to the media container. - // If heading hasn't already been manually defined via data-heading-level, - // automatically assign a level that is one level deeper than the closest parent heading - // as determined by getNextHeadingLevel() - var headingType; - if (this.playerHeadingLevel == '0') { - // do NOT inject a heading (at author's request) - } - else { - if (typeof this.playerHeadingLevel === 'undefined') { - this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); // returns in integer 1-6 - } - headingType = 'h' + this.playerHeadingLevel.toString(); - this.$headingDiv = $('<' + headingType + '>'); - this.$ableDiv.prepend(this.$headingDiv); - this.$headingDiv.addClass('able-offscreen'); - this.$headingDiv.text(this.tt.playerHeading); - } - }; - - AblePlayer.prototype.injectBigPlayButton = function () { - - this.$bigPlayButton = $('<button>', { - 'class': 'able-big-play-button icon-play', - 'aria-hidden': true, - 'tabindex': -1 - }); - - var thisObj = this; - this.$bigPlayButton.click(function () { - thisObj.handlePlay(); - }); - - this.$mediaContainer.append(this.$bigPlayButton); - }; - - AblePlayer.prototype.injectPlayerControlArea = function () { - - this.$playerDiv = $('<div>', { - 'class' : 'able-player', - 'role' : 'region', - 'aria-label' : this.mediaType + ' player' - }); - this.$playerDiv.addClass('able-'+this.mediaType); - - // The default skin depends a bit on a Now Playing div - // so go ahead and add one - // However, it's only populated if this.showNowPlaying = true - this.$nowPlayingDiv = $('<div>',{ - 'class' : 'able-now-playing', - 'aria-live' : 'assertive', - 'aria-atomic': 'true' - }); - - this.$controllerDiv = $('<div>',{ - 'class' : 'able-controller' - }); - this.$controllerDiv.addClass('able-' + this.iconColor + '-controls'); - - this.$statusBarDiv = $('<div>',{ - 'class' : 'able-status-bar' - }); - this.$timer = $('<span>',{ - 'class' : 'able-timer' - }); - this.$elapsedTimeContainer = $('<span>',{ - 'class': 'able-elapsedTime', - text: '0:00' - }); - this.$durationContainer = $('<span>',{ - 'class': 'able-duration' - }); - this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer); - - this.$speed = $('<span>',{ - 'class' : 'able-speed', - 'aria-live' : 'assertive' - }).text(this.tt.speed + ': 1x'); - - this.$status = $('<span>',{ - 'class' : 'able-status', - 'aria-live' : 'polite' - }); - - // Put everything together. - this.$statusBarDiv.append(this.$timer, this.$speed, this.$status); - this.$playerDiv.append(this.$nowPlayingDiv, this.$controllerDiv, this.$statusBarDiv); - this.$ableDiv.append(this.$playerDiv); - }; - - AblePlayer.prototype.injectTextDescriptionArea = function () { - - // create a div for exposing description - // description will be exposed via role="alert" & announced by screen readers - this.$descDiv = $('<div>',{ - 'class': 'able-descriptions' - }); - if (this.exposeTextDescriptions) { - this.$descDiv.attr({ - 'aria-live': 'assertive', - 'aria-atomic': 'true' - }); - } - // Start off with description hidden. - // It will be exposed conditionally within description.js > initDescription() - this.$descDiv.hide(); - this.$ableDiv.append(this.$descDiv); - }; - - AblePlayer.prototype.getDefaultWidth = function(which) { - - // return default width of resizable elements - // these values are somewhat arbitrary, but seem to result in good usability - // if users disagree, they can resize (and resposition) them - if (which === 'transcript') { - return 450; - } - else if (which === 'sign') { - return 400; - } - }; - - AblePlayer.prototype.positionDraggableWindow = function (which, width) { - - // which is either 'transcript' or 'sign' - - var cookie, cookiePos, $window, dragged, windowPos, currentWindowPos, firstTime, zIndex; - - cookie = this.getCookie(); - if (which === 'transcript') { - $window = this.$transcriptArea; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.transcript; - } - } - else if (which === 'sign') { - $window = this.$signWindow; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.sign; - } - } - if (typeof cookiePos !== 'undefined' && !($.isEmptyObject(cookiePos))) { - // position window using stored values from cookie - $window.css({ - 'position': cookiePos['position'], - 'width': cookiePos['width'], - 'z-index': cookiePos['zindex'] - }); - if (cookiePos['position'] === 'absolute') { - $window.css({ - 'top': cookiePos['top'], - 'left': cookiePos['left'] - }); - } - // since cookie is not page-specific, z-index needs may vary across different pages - this.updateZIndex(which); - } - else { - // position window using default values - windowPos = this.getOptimumPosition(which, width); - if (typeof width === 'undefined') { - width = this.getDefaultWidth(which); - } - $window.css({ - 'position': windowPos[0], - 'width': width, - 'z-index': windowPos[3] - }); - if (windowPos[0] === 'absolute') { - $window.css({ - 'top': windowPos[1] + 'px', - 'left': windowPos[2] + 'px', - }); - } - } - }; - - AblePlayer.prototype.getOptimumPosition = function (targetWindow, targetWidth) { - - // returns optimum position for targetWindow, as an array with the following structure: - // 0 - CSS position ('absolute' or 'relative') - // 1 - top - // 2 - left - // 3 - zindex (if not default) - // targetWindow is either 'transcript' or 'sign' - // if there is room to the right of the player, position element there - // else if there is room the left of the player, position element there - // else position element beneath player - - var gap, position, ableWidth, ableHeight, ableOffset, ableTop, ableLeft, - windowWidth, otherWindowWidth, zIndex; - - if (typeof targetWidth === 'undefined') { - targetWidth = this.getDefaultWidth(targetWindow); - } - - gap = 5; // number of pixels to preserve between Able Player objects - - position = []; // position, top, left - - ableWidth = this.$ableDiv.width(); - ableHeight = this.$ableDiv.height(); - ableOffset = this.$ableDiv.offset(); - ableTop = ableOffset.top; - ableLeft = ableOffset.left; - windowWidth = $(window).width(); - otherWindowWidth = 0; // width of other visiable draggable windows will be added to this - - if (targetWindow === 'transcript') { - if (typeof this.$signWindow !== 'undefined') { - if (this.$signWindow.is(':visible')) { - otherWindowWidth = this.$signWindow.width() + gap; - } - } - } - else if (targetWindow === 'sign') { - if (typeof this.$transcriptArea !== 'undefined') { - if (this.$transcriptArea.is(':visible')) { - otherWindowWidth = this.$transcriptArea.width() + gap; - } - } - } - if (targetWidth < (windowWidth - (ableLeft + ableWidth + gap + otherWindowWidth))) { - // there's room to the left of $ableDiv - position[0] = 'absolute'; - position[1] = 0; - position[2] = ableWidth + otherWindowWidth + gap; - } - else if (targetWidth + gap < ableLeft) { - // there's room to the right of $ableDiv - position[0] = 'absolute'; - position[1] = 0; - position[2] = ableLeft - targetWidth - gap; - } - else { - // position element below $ableDiv - position[0] = 'relative'; - // no need to define top, left, or z-index - } - return position; - }; - - AblePlayer.prototype.injectPoster = function ($element, context) { - - // get poster attribute from media element and append that as an img to $element - // context is either 'youtube' or 'fallback' - var poster, width, height; - - if (context === 'youtube') { - if (typeof this.ytWidth !== 'undefined') { - width = this.ytWidth; - height = this.ytHeight; - } - else if (typeof this.playerMaxWidth !== 'undefined') { - width = this.playerMaxWidth; - height = this.playerMaxHeight; - } - else if (typeof this.playerWidth !== 'undefined') { - width = this.playerWidth; - height = this.playerHeight; - } - } - else if (context === 'fallback') { - width = '100%'; - height = 'auto'; - } - - if (this.hasPoster) { - poster = this.$media.attr('poster'); - this.$posterImg = $('<img>',{ - 'class': 'able-poster', - 'src' : poster, - 'alt' : "", - 'role': "presentation", - 'width': width, - 'height': height - }); - $element.append(this.$posterImg); - } - }; - - AblePlayer.prototype.injectAlert = function () { - - // inject two alerts, one visible for all users and one for screen reader users only - - var top; - - this.$alertBox = $('<div role="alert"></div>'); - this.$alertBox.addClass('able-alert'); - this.$alertBox.hide(); - this.$alertBox.appendTo(this.$ableDiv); - if (this.mediaType == 'audio') { - top = '-10'; - } - else { - // position just below the vertical center of the mediaContainer - // hopefully above captions, but not too far from the controller bar - top = Math.round(this.$mediaContainer.height() / 3) * 2; - } - this.$alertBox.css({ - top: top + 'px' - }); - - this.$srAlertBox = $('<div role="alert"></div>'); - this.$srAlertBox.addClass('able-screenreader-alert'); - this.$srAlertBox.appendTo(this.$ableDiv); - }; - - AblePlayer.prototype.injectPlaylist = function () { - - if (this.playlistEmbed === true) { - // move playlist into player, immediately before statusBarDiv - var playlistClone = this.$playlistDom.clone(); - playlistClone.insertBefore(this.$statusBarDiv); - // Update to the new playlist copy. - this.$playlist = playlistClone.find('li'); - } - }; - - AblePlayer.prototype.createPopup = function (which, tracks) { - - // Create popup menu and append to player - // 'which' parameter is either 'captions', 'chapters', 'prefs', 'transcript-window' or 'sign-window' - // 'tracks', if provided, is a list of tracks to be used as menu items - - var thisObj, $menu, prefCats, i, $menuItem, prefCat, whichPref, - hasDefault, track, windowOptions, whichPref, whichMenu, - $thisItem, $prevItem, $nextItem; - - thisObj = this; - - $menu = $('<ul>',{ - 'id': this.mediaId + '-' + which + '-menu', - 'class': 'able-popup', - 'role': 'menu' - }).hide(); - - if (which === 'captions') { - $menu.addClass('able-popup-captions'); - } - - // Populate menu with menu items - if (which === 'prefs') { - if (this.prefCats.length > 1) { - for (i = 0; i < this.prefCats.length; i++) { - $menuItem = $('<li></li>',{ - 'role': 'menuitem', - 'tabindex': '-1' - }); - prefCat = this.prefCats[i]; - if (prefCat === 'captions') { - $menuItem.text(this.tt.prefMenuCaptions); - } - else if (prefCat === 'descriptions') { - $menuItem.text(this.tt.prefMenuDescriptions); - } - else if (prefCat === 'keyboard') { - $menuItem.text(this.tt.prefMenuKeyboard); - } - else if (prefCat === 'transcript') { - $menuItem.text(this.tt.prefMenuTranscript); - } - $menuItem.on('click',function() { - whichPref = $(this).text(); - thisObj.showingPrefsDialog = true; - thisObj.setFullscreen(false); - if (whichPref === thisObj.tt.prefMenuCaptions) { - thisObj.captionPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuDescriptions) { - thisObj.descPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuKeyboard) { - thisObj.keyboardPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuTranscript) { - thisObj.transcriptPrefsDialog.show(); - } - thisObj.closePopups(); - thisObj.showingPrefsDialog = false; - }); - $menu.append($menuItem); - } - this.$prefsButton.attr('data-prefs-popup','menu'); - } - else if (this.prefCats.length == 1) { - // only 1 category, so don't create a popup menu. - // Instead, open dialog directly when user clicks Prefs button - this.$prefsButton.attr('data-prefs-popup',this.prefCats[0]); - } - } - else if (which === 'captions' \|\| which === 'chapters') { - hasDefault = false; - for (i = 0; i < tracks.length; i++) { - track = tracks[i]; - $menuItem = $('<li></li>',{ - 'role': 'menuitemradio', - 'tabindex': '-1', - 'lang': track.language - }); - if (track.def && this.prefCaptions == 1) { - $menuItem.attr('aria-checked','true'); - hasDefault = true; - } - else { - $menuItem.attr('aria-checked','false'); - } - // Get a label using track data - if (which == 'captions') { - $menuItem.text(track.label); - $menuItem.on('click',this.getCaptionClickFunction(track)); - } - else if (which == 'chapters') { - $menuItem.text(this.flattenCueForCaption(track) + ' - ' + this.formatSecondsAsColonTime(track.start)); - $menuItem.on('click',this.getChapterClickFunction(track.start)); - } - $menu.append($menuItem); - } - if (which === 'captions') { - // add a 'captions off' menu item - $menuItem = $('<li></li>',{ - 'role': 'menuitemradio', - 'tabindex': '-1', - }).text(this.tt.captionsOff); - if (this.prefCaptions === 0) { - $menuItem.attr('aria-checked','true'); - hasDefault = true; - } - else { - $menuItem.attr('aria-checked','false'); - } - $menuItem.on('click',this.getCaptionOffFunction()); - $menu.append($menuItem); - } - } - else if (which === 'transcript-window' \|\| which === 'sign-window') { - windowOptions = []; - windowOptions.push({ - 'name': 'move', - 'label': this.tt.windowMove - }); - windowOptions.push({ - 'name': 'resize', - 'label': this.tt.windowResize - }); - windowOptions.push({ - 'name': 'close', - 'label': this.tt.windowClose - }); - for (i = 0; i < windowOptions.length; i++) { - $menuItem = $('<li></li>',{ - 'role': 'menuitem', - 'tabindex': '-1', - 'data-choice': windowOptions[i].name - }); - $menuItem.text(windowOptions[i].label); - $menuItem.on('click mousedown',function(e) { - e.stopPropagation(); - if (typeof e.button !== 'undefined' && e.button !== 0) { - // this was a mouse click (if click is triggered by keyboard, e.button is undefined) - // and the button was not a left click (left click = 0) - // therefore, ignore this click - return false; - } - if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { - thisObj.windowMenuClickRegistered = true; - thisObj.handleMenuChoice(which.substr(0, which.indexOf('-')), $(this).attr('data-choice'), e); - } - }); - $menu.append($menuItem); - } - } - // assign default item, if there isn't one already - if (which === 'captions' && !hasDefault) { - // check the menu item associated with the default language - // as determined in control.js > syncTrackLanguages() - if ($menu.find('li[lang=' + this.captionLang + ']')) { - // a track exists for the default language. Check that item in the menu - $menu.find('li[lang=' + this.captionLang + ']').attr('aria-checked','true'); - } - else { - // check the last item (captions off) - $menu.find('li').last().attr('aria-checked','true'); - } - } - else if (which === 'chapters') { - if ($menu.find('li:contains("' + this.defaultChapter + '")')) { - $menu.find('li:contains("' + this.defaultChapter + '")').attr('aria-checked','true').addClass('able-focus'); - } - else { - $menu.find('li').first().attr('aria-checked','true').addClass('able-focus'); - } - } - // add keyboard handlers for navigating within popups - $menu.on('keydown',function (e) { - - whichMenu = $(this).attr('id').split('-')[1]; - $thisItem = $(this).find('li:focus'); - if ($thisItem.is(':first-child')) { - // this is the first item in the menu - $prevItem = $(this).find('li').last(); // wrap to bottom - $nextItem = $thisItem.next(); - } - else if ($thisItem.is(':last-child')) { - // this is the last Item - $prevItem = $thisItem.prev(); - $nextItem = $(this).find('li').first(); // wrap to top - } - else { - $prevItem = $thisItem.prev(); - $nextItem = $thisItem.next(); - } - if (e.which === 9) { // Tab - if (e.shiftKey) { - $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else { - $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - } - else if (e.which === 40 \|\| e.which === 39) { // down or right arrow - $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - else if (e.which == 38 \|\| e.which === 37) { // up or left arrow - $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else if (e.which === 32 \|\| e.which === 13) { // space or enter - $thisItem.click(); - } - else if (e.which === 27) { // Escape - $thisItem.removeClass('able-focus'); - thisObj.closePopups(); - } - e.preventDefault(); - }); - this.$controllerDiv.append($menu); - return $menu; - }; - - AblePlayer.prototype.closePopups = function () { - - var thisObj = this; - - if (this.chaptersPopup && this.chaptersPopup.is(':visible')) { - this.chaptersPopup.hide(); - this.$chaptersButton.removeAttr('aria-expanded').focus(); - } - if (this.captionsPopup && this.captionsPopup.is(':visible')) { - this.captionsPopup.hide(); - this.$ccButton.removeAttr('aria-expanded').focus(); - } - if (this.prefsPopup && this.prefsPopup.is(':visible') && !this.hidingPopup) { - this.hidingPopup = true; // stopgap to prevent popup from re-opening again on keypress - this.prefsPopup.hide(); - // restore menu items to their original state - this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$prefsButton.removeAttr('aria-expanded'); - if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); - } - // wait briefly, then reset hidingPopup - setTimeout(function() { - thisObj.hidingPopup = false; - },100); - } - if (this.$volumeSlider && this.$volumeSlider.is(':visible')) { - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeAlert.text(this.tt.volumeSliderClosed); - this.$volumeButton.removeAttr('aria-expanded').focus(); - } - if (this.$transcriptPopup && this.$transcriptPopup.is(':visible')) { - this.$transcriptPopup.hide(); - // restore menu items to their original state - this.$transcriptPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$transcriptPopupButton.removeAttr('aria-expanded').focus(); - } - if (this.$signPopup && this.$signPopup.is(':visible')) { - this.$signPopup.hide(); - // restore menu items to their original state - this.$signPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$signPopupButton.removeAttr('aria-expanded').focus(); - } - }; - - AblePlayer.prototype.setupPopups = function (which) { - - // Create and fill in the popup menu forms for various controls. - // parameter 'which' is passed if refreshing content of an existing popup ('captions' or 'chapters') - // If which is undefined, automatically setup 'captions', 'chapters', and 'prefs' popups - // However, only setup 'transcript-window' and 'sign-window' popups if passed as value of which - var popups, thisObj, hasDefault, i, j, - tracks, track, $trackButton, $trackLabel, - radioName, radioId, $menu, $menuItem, - prefCats, prefCat, prefLabel; - - popups = []; - if (typeof which === 'undefined') { - popups.push('prefs'); - } - - if (which === 'captions' \|\| (typeof which === 'undefined')) { - if (this.captions.length > 0) { - popups.push('captions'); - } - } - if (which === 'chapters' \|\| (typeof which === 'undefined')) { - if (this.chapters.length > 0 && this.useChaptersButton) { - popups.push('chapters'); - } - } - if (which === 'transcript-window' && this.transcriptType === 'popup') { - popups.push('transcript-window'); - } - if (which === 'sign-window' && this.hasSignLanguage) { - popups.push('sign-window'); - } - if (popups.length > 0) { - thisObj = this; - for (var i=0; i<popups.length; i++) { - var popup = popups[i]; - hasDefault = false; - if (popup == 'prefs') { - this.prefsPopup = this.createPopup('prefs'); - } - else if (popup == 'captions') { - if (typeof this.captionsPopup === 'undefined' \|\| !this.captionsPopup) { - this.captionsPopup = this.createPopup('captions',this.captions); - } - } - else if (popup == 'chapters') { - if (this.selectedChapters) { - tracks = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { - tracks = this.chapters[0].cues; - } - else { - tracks = []; - } - if (typeof this.chaptersPopup === 'undefined' \|\| !this.chaptersPopup) { - this.chaptersPopup = this.createPopup('chapters',tracks); - } - } - else if (popup == 'transcript-window') { - return this.createPopup('transcript-window'); - } - else if (popup == 'sign-window') { - return this.createPopup('sign-window'); - } - } - } - }; - - AblePlayer.prototype.provideFallback = function() { - - // provide ultimate fallback for users who are unable to play the media - // If there is HTML content nested within the media element, display that - // Otherwise, display standard localized error text - - var $fallbackDiv, width, mediaClone, fallback, fallbackText, - showBrowserList, browsers, i, b, browserList; - - // Could show list of supporting browsers if 99.9% confident the error is truly an outdated browser - // Too many sites say "You need to update your browser" when in fact I'm using a current version - showBrowserList = false; - - $fallbackDiv = $('<div>',{ - 'class' : 'able-fallback', - 'role' : 'alert', - }); - // override default width of .able-fallback with player width, if known - if (typeof this.playerMaxWidth !== 'undefined') { - width = this.playerMaxWidth + 'px'; - } - else if (this.$media.attr('width')) { - width = parseInt(this.$media.attr('width'), 10) + 'px'; - } - else { - width = '100%'; - } - $fallbackDiv.css('max-width',width); - - // use fallback content that's nested inside the HTML5 media element, if there is any - mediaClone = this.$media.clone(); - $('source, track', mediaClone).remove(); - fallback = mediaClone.html().trim(); - if (fallback.length) { - $fallbackDiv.html(fallback); - } - else { - // use standard localized error message - fallbackText = this.tt.fallbackError1 + ' ' + this.tt[this.mediaType] + '. '; - fallbackText += this.tt.fallbackError2 + ':'; - fallback = $('<p>').text(fallbackText); - $fallbackDiv.html(fallback); - showBrowserList = true; - } - - if (showBrowserList) { - browserList = $('<ul>'); - browsers = this.getSupportingBrowsers(); - for (i=0; i<browsers.length; i++) { - b = $('<li>'); - b.text(browsers[i].name + ' ' + browsers[i].minVersion + ' ' + this.tt.orHigher); - browserList.append(b); - } - $fallbackDiv.append(browserList); - } - - // if there's a poster, show that as well - this.injectPoster($fallbackDiv, 'fallback'); - - // inject $fallbackDiv into the DOM and remove broken content - if (typeof this.$ableWrapper !== 'undefined') { - this.$ableWrapper.before($fallbackDiv); - this.$ableWrapper.remove(); - } - else if (typeof this.$media !== 'undefined') { - this.$media.before($fallbackDiv); - this.$media.remove(); - } - else { - $('body').prepend($fallbackDiv); - } - }; - - AblePlayer.prototype.getSupportingBrowsers = function() { - - var browsers = []; - browsers[0] = { - name:'Chrome', - minVersion: '31' - }; - browsers[1] = { - name:'Firefox', - minVersion: '34' - }; - browsers[2] = { - name:'Internet Explorer', - minVersion: '10' - }; - browsers[3] = { - name:'Opera', - minVersion: '26' - }; - browsers[4] = { - name:'Safari for Mac OS X', - minVersion: '7.1' - }; - browsers[5] = { - name:'Safari for iOS', - minVersion: '7.1' - }; - browsers[6] = { - name:'Android Browser', - minVersion: '4.1' - }; - browsers[7] = { - name:'Chrome for Android', - minVersion: '40' - }; - return browsers; - } - - AblePlayer.prototype.calculateControlLayout = function () { - - // Calculates the layout for controls based on media and options. - // Returns an array with 4 keys (for legacy skin) or 2 keys (for 2020 skin) - // Keys are the following order: - // 0 = Top left - // 1 = Top right - // 2 = Bottom left (legacy skin only) - // 3 = Bottom right (legacy skin only) - // Each key contains an array of control names to put in that section. - - var controlLayout, volumeSupported, playbackSupported, totalButtonWidth, numA11yButtons; - - controlLayout = []; - controlLayout[0] = []; - controlLayout[1] = []; - if (this.skin === 'legacy') { - controlLayout[2] = []; - controlLayout[3] = []; - } - - controlLayout[0].push('play'); - controlLayout[0].push('restart'); - controlLayout[0].push('rewind'); - controlLayout[0].push('forward'); - - if (this.skin === 'legacy') { - controlLayout[1].push('seek'); - } - - if (this.hasPlaylist) { - if (this.skin === 'legacy') { - controlLayout[0].push('previous'); - controlLayout[0].push('next'); - } - else if (this.skin == '2020') { - controlLayout[0].push('previous'); - controlLayout[0].push('next'); - } - } - - if (this.isPlaybackRateSupported()) { - playbackSupported = true; - if (this.skin === 'legacy') { - controlLayout[2].push('slower'); - controlLayout[2].push('faster'); - } - } - else { - playbackSupported = false; - } - - if (this.mediaType === 'video') { - numA11yButtons = 0; - if (this.hasCaptions) { - numA11yButtons++; - if (this.skin === 'legacy') { - controlLayout[2].push('captions'); - } - else if (this.skin == '2020') { - controlLayout[1].push('captions'); - } - } - if (this.hasSignLanguage) { - numA11yButtons++; - if (this.skin === 'legacy') { - controlLayout[2].push('sign'); - } - else if (this.skin == '2020') { - controlLayout[1].push('sign'); - } - } - if ((this.hasOpenDesc \|\| this.hasClosedDesc) && (this.useDescriptionsButton)) { - numA11yButtons++; - if (this.skin === 'legacy') { - controlLayout[2].push('descriptions'); - } - else if (this.skin == '2020') { - controlLayout[1].push('descriptions'); - } - } - } - if (this.transcriptType === 'popup' && !(this.hideTranscriptButton)) { - numA11yButtons++; - if (this.skin === 'legacy') { - controlLayout[2].push('transcript'); - } - else if (this.skin == '2020') { - controlLayout[1].push('transcript'); - } - } - - if (this.mediaType === 'video' && this.hasChapters && this.useChaptersButton) { - numA11yButtons++; - if (this.skin === 'legacy') { - controlLayout[2].push('chapters'); - } - else if (this.skin == '2020') { - controlLayout[1].push('chapters'); - } - } - - if (this.skin == '2020' && numA11yButtons > 0) { - controlLayout[1].push('pipe'); - } - - if (playbackSupported && this.skin === '2020') { - controlLayout[1].push('faster'); - controlLayout[1].push('slower'); - controlLayout[1].push('pipe'); - } - - if (this.skin === 'legacy') { - controlLayout[3].push('preferences'); - } - else if (this.skin == '2020') { - controlLayout[1].push('preferences'); - } - - if (this.mediaType === 'video' && this.allowFullScreen) { - if (this.skin === 'legacy') { - controlLayout[3].push('fullscreen'); - } - else { - controlLayout[1].push('fullscreen'); - } - } - - if (this.browserSupportsVolume()) { - volumeSupported = true; // defined in case we decide to move volume button elsewhere - this.volumeButton = 'volume-' + this.getVolumeName(this.volume); - if (this.skin === 'legacy') { - controlLayout[1].push('volume'); - } - else if (this.skin == '2020') { - controlLayout[1].push('volume'); - } - } - else { - volumeSupported = false; - this.volume = false; - } - return controlLayout; - }; - - AblePlayer.prototype.addControls = function() { - - // determine which controls to show based on several factors: - // mediaType (audio vs video) - // availability of tracks (e.g., for closed captions & audio description) - // browser support (e.g., for sliders and speedButtons) - // user preferences (???) - // some controls are aligned on the left, and others on the right - - var thisObj, baseSliderWidth, controlLayout, numSections, - i, j, k, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, $pipeImg, - svgData, svgPath, control, - $buttonLabel, $buttonImg, buttonImgSrc, buttonTitle, $newButton, iconClass, buttonIcon, - buttonUse, buttonText, position, buttonHeight, buttonWidth, buttonSide, controllerWidth, - tooltipId, tooltipY, tooltipX, tooltipWidth, tooltipStyle, tooltip, - captionLabel, popupMenuId; - - thisObj = this; - - baseSliderWidth = 100; // arbitrary value, will be recalculated in refreshControls() - - // Initialize the layout into the this.controlLayout variable. - controlLayout = this.calculateControlLayout(); - numSections = controlLayout.length; - - // add an empty div to serve as a tooltip - tooltipId = this.mediaId + '-tooltip'; - this.$tooltipDiv = $('<div>',{ - 'id': tooltipId, - 'class': 'able-tooltip' - }).hide(); - this.$controllerDiv.append(this.$tooltipDiv); - - if (this.skin == '2020') { - // add a full-width seek bar - $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; - this.$controllerDiv.append($sliderDiv); - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - - // step separately through left and right controls - for (i = 0; i < numSections; i++) { - controls = controlLayout[i]; - if ((i % 2) === 0) { // even keys on the left - $controllerSpan = $('<div>',{ - 'class': 'able-left-controls' - }); - } - else { // odd keys on the right - $controllerSpan = $('<div>',{ - 'class': 'able-right-controls' - }); - } - this.$controllerDiv.append($controllerSpan); - for (j=0; j<controls.length; j++) { - control = controls[j]; - if (control === 'seek') { - $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; - $controllerSpan.append($sliderDiv); - if (typeof this.duration === 'undefined' \|\| this.duration === 0) { - // set arbitrary starting duration, and change it when duration is known - this.duration = 60; - // also set elapsed to 0 - this.elapsed = 0; - } - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - else if (control === 'pipe') { - $pipe = $('<span>', { - 'tabindex': '-1', - 'aria-hidden': 'true' - }); - if (this.iconType === 'font') { - $pipe.addClass('icon-pipe'); - } - else { - $pipeImg = $('<img>', { - src: this.rootPath + 'button-icons/' + this.iconColor + '/pipe.png', - alt: '', - role: 'presentation' - }); - $pipe.append($pipeImg); - } - $controllerSpan.append($pipe); - } - else { - // this control is a button - if (control === 'volume') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + this.volumeButton + '.png'; - } - else if (control === 'fullscreen') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/fullscreen-expand.png'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/turtle.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/slower.png'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/rabbit.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/faster.png'; - } - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + control + '.png'; - } - buttonTitle = this.getButtonTitle(control); - - // icomoon documentation recommends the following markup for screen readers: - // 1. link element (or in our case, button). Nested inside this element: - // 2. span that contains the icon font (in our case, buttonIcon) - // 3. span that contains a visually hidden label for screen readers (buttonLabel) - // In addition, we are adding aria-label to the button (but not title) - // And if iconType === 'image', we are replacing #2 with an image (with alt="" and role="presentation") - // This has been thoroughly tested and works well in all screen reader/browser combinations - // See https://github.com/ableplayer/ableplayer/issues/81 - - // NOTE: Changed from <button> to <div role="button" as of 4.2.18 - // because <button> elements are rendered poorly in high contrast mode - // in some OS/browser/plugin combinations - $newButton = $('<div>',{ - 'role': 'button', - 'tabindex': '0', - 'aria-label': buttonTitle, - 'class': 'able-button-handler-' + control - }); - - if (control === 'volume' \|\| control === 'preferences') { - if (control == 'preferences') { - this.prefCats = this.getPreferencesGroups(); - if (this.prefCats.length > 1) { - // Prefs button will trigger a menu - popupMenuId = this.mediaId + '-prefs-menu'; - $newButton.attr({ - 'aria-controls': popupMenuId, - 'aria-haspopup': 'menu' - }); - } - else if (this.prefCats.length === 1) { - // Prefs button will trigger a dialog - $newButton.attr({ - 'aria-haspopup': 'dialog' - }); - } - } - else if (control === 'volume') { - popupMenuId = this.mediaId + '-volume-slider'; - // volume slider popup is not a menu or a dialog - // therefore, using aria-expanded rather than aria-haspopup to communicate properties/state - $newButton.attr({ - 'aria-controls': popupMenuId, - 'aria-expanded': 'false' - }); - } - } - if (this.iconType === 'font') { - if (control === 'volume') { - iconClass = 'icon-' + this.volumeButton; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-turtle'; - } - else { - iconClass = 'icon-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-rabbit'; - } - else { - iconClass = 'icon-faster'; - } - } - else { - iconClass = 'icon-' + control; - } - buttonIcon = $('<span>',{ - 'class': iconClass, - 'aria-hidden': 'true' - }); - $newButton.append(buttonIcon); - } - else if (this.iconType === 'svg') { - - /* - // Unused option for adding SVG: - // Use <use> element to link to button-icons/able-icons.svg - // Advantage: SVG file can be cached - // Disadvantage: Not supported by Safari 6, IE 6-11, or Edge 12 - // Instead, adding <svg> element within each <button> - if (control === 'volume') { - iconClass = 'svg-' + this.volumeButton; - } - else if (control === 'fullscreen') { - iconClass = 'svg-fullscreen-expand'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-turtle'; - } - else { - iconClass = 'svg-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-rabbit'; - } - else { - iconClass = 'svg-faster'; - } - } - else { - iconClass = 'svg-' + control; - } - buttonIcon = $('<svg>',{ - 'class': iconClass - }); - buttonUse = $('<use>',{ - 'xlink:href': this.rootPath + 'button-icons/able-icons.svg#' + iconClass - }); - buttonIcon.append(buttonUse); - / - var svgData; - if (control === 'volume') { - svgData = this.getSvgData(this.volumeButton); - } - else if (control === 'fullscreen') { - svgData = this.getSvgData('fullscreen-expand'); - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('turtle'); - } - else { - svgData = this.getSvgData('slower'); - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('rabbit'); - } - else { - svgData = this.getSvgData('faster'); - } - } - else { - svgData = this.getSvgData(control); - } - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - $newButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - $newButton.html($newButton.html()); - } - else { - // use images - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - // add the visibly-hidden label for screen readers that don't support aria-label on the button - var $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(buttonTitle); - $newButton.append($buttonLabel); - // add an event listener that displays a tooltip on mouseenter or focus - $newButton.on('mouseenter focus',function(e) { - var buttonText = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - // position() is expressed using top and left (of button); - // add right (of button) too, for convenience - var controllerWidth = thisObj.$controllerDiv.width(); - position.right = controllerWidth - position.left - buttonWidth; - var tooltipY = position.top - buttonHeight - 15; - - if ($(this).parent().hasClass('able-right-controls')) { - // this control is on the right side - var buttonSide = 'right'; - } - else { - // this control is on the left side - var buttonSide = 'left'; - } - // populate tooltip, then calculate its width before showing it - var tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); - // center the tooltip horizontally over the button - if (buttonSide == 'left') { - var tooltipX = position.left - tooltipWidth/2; - if (tooltipX < 0) { - // tooltip would exceed the bounds of the player. Adjust. - tooltipX = 2; - } - var tooltipStyle = { - left: tooltipX + 'px', - right: '', - top: tooltipY + 'px' - }; - } - else { - var tooltipX = position.right - tooltipWidth/2; - if (tooltipX < 0) { - // tooltip would exceed the bounds of the player. Adjust. - tooltipX = 2; - } - var tooltipStyle = { - left: '', - right: tooltipX + 'px', - top: tooltipY + 'px' - }; - } - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); - thisObj.showTooltip(tooltip); - $(this).on('mouseleave blur',function() { - AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - }) - }); - - if (control === 'captions') { - if (!this.prefCaptions \|\| this.prefCaptions !== 1) { - // captions are available, but user has them turned off - if (this.captions.length > 1) { - captionLabel = this.tt.captions; - } - else { - captionLabel = this.tt.showCaptions; - } - $newButton.addClass('buttonOff').attr('title',captionLabel); - } - } - else if (control === 'descriptions') { - if (!this.prefDesc \|\| this.prefDesc !== 1) { - // user prefer non-audio described version - // Therefore, load media without description - // Description can be toggled on later with this button - $newButton.addClass('buttonOff').attr('title',this.tt.turnOnDescriptions); - } - } - - $controllerSpan.append($newButton); - - // create variables of buttons that are referenced throughout the AblePlayer object - if (control === 'play') { - this.$playpauseButton = $newButton; - } - else if (control == 'previous') { - this.$prevButton = $newButton; - // if player is being rebuilt because user clicked the Prev button - // return focus to that (newly built) button - if (this.buttonWithFocus == 'previous') { - this.$prevButton.focus(); - this.buttonWithFocus = null; - } - } - else if (control == 'next') { - this.$nextButton = $newButton; - // if player is being rebuilt because user clicked the Next button - // return focus to that (newly built) button - if (this.buttonWithFocus == 'next') { - this.$nextButton.focus(); - this.buttonWithFocus = null; - } - } - else if (control === 'captions') { - this.$ccButton = $newButton; - } - else if (control === 'sign') { - this.$signButton = $newButton; - // gray out sign button if sign language window is not active - if (!(this.$signWindow.is(':visible'))) { - this.$signButton.addClass('buttonOff'); - } - } - else if (control === 'descriptions') { - this.$descButton = $newButton; - // button will be enabled or disabled in description.js > initDescription() - } - else if (control === 'mute') { - this.$muteButton = $newButton; - } - else if (control === 'transcript') { - this.$transcriptButton = $newButton; - // gray out transcript button if transcript is not active - if (!(this.$transcriptDiv.is(':visible'))) { - this.$transcriptButton.addClass('buttonOff').attr('title',this.tt.showTranscript); - } - } - else if (control === 'fullscreen') { - this.$fullscreenButton = $newButton; - } - else if (control === 'chapters') { - this.$chaptersButton = $newButton; - } - else if (control === 'preferences') { - this.$prefsButton = $newButton; - } - else if (control === 'volume') { - this.$volumeButton = $newButton; - } - } - if (control === 'volume') { - // in addition to the volume button, add a hidden slider - this.addVolumeSlider($controllerSpan); - } - } - if ((i % 2) == 1) { - this.$controllerDiv.append('<div style="clear:both;"></div>'); - } - } - - if (this.mediaType === 'video') { - - if (typeof this.$captionsDiv !== 'undefined') { - // stylize captions based on user prefs - this.stylizeCaptions(this.$captionsDiv); - } - if (typeof this.$descDiv !== 'undefined') { - // stylize descriptions based on user's caption prefs - this.stylizeCaptions(this.$descDiv); - } - } - - // combine left and right controls arrays for future reference - this.controls = []; - for (var sec in controlLayout) if (controlLayout.hasOwnProperty(sec)) { - this.controls = this.controls.concat(controlLayout[sec]); - } - - // Update state-based display of controls. - this.refreshControls('init'); - }; - - AblePlayer.prototype.useSvg = function () { - - // Modified from IcoMoon.io svgxuse - // @copyright Copyright (c) 2016 IcoMoon.io - // @license Licensed under MIT license - // See https://github.com/Keyamoon/svgxuse - // @version 1.1.16 - - var cache = Object.create(null); // holds xhr objects to prevent multiple requests - var checkUseElems, - tid; // timeout id - var debouncedCheck = function () { - clearTimeout(tid); - tid = setTimeout(checkUseElems, 100); - }; - var unobserveChanges = function () { - return; - }; - var observeChanges = function () { - var observer; - window.addEventListener('resize', debouncedCheck, false); - window.addEventListener('orientationchange', debouncedCheck, false); - if (window.MutationObserver) { - observer = new MutationObserver(debouncedCheck); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - attributes: true - }); - unobserveChanges = function () { - try { - observer.disconnect(); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - } catch (ignore) {} - }; - } - else { - document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); - unobserveChanges = function () { - document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - }; - } - }; - var xlinkNS = 'http://www.w3.org/1999/xlink'; - checkUseElems = function () { - var base, - bcr, - fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. - hash, - i, - Request, - inProgressCount = 0, - isHidden, - url, - uses, - xhr; - if (window.XMLHttpRequest) { - Request = new XMLHttpRequest(); - if (Request.withCredentials !== undefined) { - Request = XMLHttpRequest; - } - else { - Request = XDomainRequest \|\| undefined; - } - } - if (Request === undefined) { - return; - } - function observeIfDone() { - // If done with making changes, start watching for chagnes in DOM again - inProgressCount -= 1; - if (inProgressCount === 0) { // if all xhrs were resolved - observeChanges(); // watch for changes to DOM - } - } - function attrUpdateFunc(spec) { - return function () { - if (cache[spec.base] !== true) { - spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); - } - }; - } - function onloadFunc(xhr) { - return function () { - var body = document.body; - var x = document.createElement('x'); - var svg; - xhr.onload = null; - x.innerHTML = xhr.responseText; - svg = x.getElementsByTagName('svg')[0]; - if (svg) { - svg.setAttribute('aria-hidden', 'true'); - svg.style.position = 'absolute'; - svg.style.width = 0; - svg.style.height = 0; - svg.style.overflow = 'hidden'; - body.insertBefore(svg, body.firstChild); - } - observeIfDone(); - }; - } - function onErrorTimeout(xhr) { - return function () { - xhr.onerror = null; - xhr.ontimeout = null; - observeIfDone(); - }; - } - unobserveChanges(); // stop watching for changes to DOM - // find all use elements - uses = document.getElementsByTagName('use'); - for (i = 0; i < uses.length; i += 1) { - try { - bcr = uses[i].getBoundingClientRect(); - } catch (ignore) { - // failed to get bounding rectangle of the use element - bcr = false; - } - url = uses[i].getAttributeNS(xlinkNS, 'href').split('#'); - base = url[0]; - hash = url[1]; - isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; - if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { - // the use element is empty - // if there is a reference to an external SVG, try to fetch it - // use the optional fallback URL if there is no reference to an external SVG - if (fallback && !base.length && hash && !document.getElementById(hash)) { - base = fallback; - } - if (base.length) { - // schedule updating xlink:href - xhr = cache[base]; - if (xhr !== true) { - // true signifies that prepending the SVG was not required - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - if (xhr === undefined) { - xhr = new Request(); - cache[base] = xhr; - xhr.onload = onloadFunc(xhr); - xhr.onerror = onErrorTimeout(xhr); - xhr.ontimeout = onErrorTimeout(xhr); - xhr.open('GET', base); - xhr.send(); - inProgressCount += 1; - } - } - } - else { - if (!isHidden) { - if (cache[base] === undefined) { - // remember this URL if the use element was not empty and no request was sent - cache[base] = true; - } - else if (cache[base].onload) { - // if it turns out that prepending the SVG is not necessary, - // abort the in-progress xhr. - cache[base].abort(); - cache[base].onload = undefined; - cache[base] = true; - } - } - } - } - uses = ''; - inProgressCount += 1; - observeIfDone(); - }; -/ - // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. - window.addEventListener('load', function winLoad() { - window.removeEventListener('load', winLoad, false); // to prevent memory leaks - tid = setTimeout(checkUseElems, 0); - }, false); -/ - }; - - AblePlayer.prototype.cuePlaylistItem = function(sourceIndex) { - - // Move to a new item in a playlist. - // NOTE: Swapping source for audio description is handled elsewhere; - // see description.js > swapDescription() - - / - // Decided against preventing a reload of the current item in the playlist. - // If it's clickable, users should be able to click on it and expect something to happen. - // Leaving here though in case it's determined to be desirable. - if (sourceIndex === this.playlistItemIndex) { - // user has requested the item that's currently playing - // just ignore the request - return; - } - this.playlistItemIndex = sourceIndex; - / - - var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, sources, s, i, $newSource, nowPlayingSpan; - - var thisObj = this; - - prevPlayer = this.player; - - if (this.initializing) { // this is the first track - user hasn't pressed play yet - // do nothing. - } - else { - if (this.playerCreated) { - // remove the old - this.deletePlayer(); - } - } - - // Determine appropriate player to play this media - $newItem = this.$playlist.eq(sourceIndex); - if (this.hasAttr($newItem,'data-youtube-id')) { - this.youTubeId = $newItem.attr('data-youtube-id'); - newPlayer = 'youtube'; - } - else { - newPlayer = 'html5'; - } - - if (newPlayer === 'youtube') { - if (prevPlayer === 'html5') { - // pause and hide the previous media - if (this.playing) { - this.pauseMedia(); - } - this.$media.hide(); - } - } - else { - // the new player is not youtube - this.youTubeId = false; - if (prevPlayer === 'youtube') { - // unhide the media element - this.$media.show(); - } - } - this.player = newPlayer; - - // set swappingSrc; needs to be true within recreatePlayer(), called below - this.swappingSrc = true; - - // transfer media attributes from playlist to media element - if (this.hasAttr($newItem,'data-poster')) { - this.$media.attr('poster',$newItem.attr('data-poster')); - } - if (this.hasAttr($newItem,'data-width')) { - this.$media.attr('width',$newItem.attr('data-width')); - } - if (this.hasAttr($newItem,'data-height')) { - this.$media.attr('height',$newItem.attr('data-height')); - } - if (this.hasAttr($newItem,'data-youtube-desc-id')) { - this.$media.attr('data-youtube-desc-id',$newItem.attr('data-youtube-desc-id')); - } - if (this.youTubeId) { - this.$media.attr('data-youtube-id',$newItem.attr('data-youtube-id')); - } - - // add new <source> elements from playlist data - var $sourceSpans = $newItem.children('span.able-source'); - if ($sourceSpans.length) { - $sourceSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src')) { - // this is the only required attribute - var $newSource = $('<source>',{ - 'src': $(this).attr('data-src') - }); - if (thisObj.hasAttr($(this),'data-type')) { - $newSource.attr('type',$(this).attr('data-type')); - } - if (thisObj.hasAttr($(this),'data-desc-src')) { - $newSource.attr('data-desc-src',$(this).attr('data-desc-src')); - } - if (thisObj.hasAttr($(this),'data-sign-src')) { - $newSource.attr('data-sign-src',$(this).attr('data-sign-src')); - } - thisObj.$media.append($newSource); - } - }); - } - - // add new <track> elements from playlist data - var $trackSpans = $newItem.children('span.able-track'); - if ($trackSpans.length) { - // for each element in $trackSpans, create a new <track> element - $trackSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src') && - thisObj.hasAttr($(this),'data-kind') && - thisObj.hasAttr($(this),'data-srclang')) { - // all required attributes are present - var $newTrack = $('<track>',{ - 'src': $(this).attr('data-src'), - 'kind': $(this).attr('data-kind'), - 'srclang': $(this).attr('data-srclang') - }); - if (thisObj.hasAttr($(this),'data-label')) { - $newTrack.attr('label',$(this).attr('data-label')); - } - thisObj.$media.append($newTrack); - } - }); - } - - itemTitle = $newItem.text(); - if (this.hasAttr($newItem,'lang')) { - itemLang = $newItem.attr('lang'); - } - // Update relevant arrays - this.$sources = this.$media.find('source'); - - // recreate player, informed by new attributes and track elements - this.recreatePlayer(); - - // update playlist to indicate which item is playing - //$('.able-playlist li').removeClass('able-current'); - this.$playlist.removeClass('able-current'); - this.$playlist.eq(sourceIndex).addClass('able-current'); - - // update Now Playing div - if (this.showNowPlaying === true) { - if (typeof this.$nowPlayingDiv !== 'undefined') { - nowPlayingSpan = $('<span>'); - if (typeof itemLang !== 'undefined') { - nowPlayingSpan.attr('lang',itemLang); - } - nowPlayingSpan.html('<span>' + this.tt.selectedTrack + ':</span>' + itemTitle); - this.$nowPlayingDiv.html(nowPlayingSpan); - } - } - - // if this.swappingSrc is true, media will autoplay when ready - if (this.initializing) { // this is the first track - user hasn't pressed play yet - this.swappingSrc = false; - } - else { - this.swappingSrc = true; - if (this.player === 'html5') { - this.media.load(); - } - else if (this.player === 'youtube') { - this.okToPlay = true; - } - } - }; - - AblePlayer.prototype.deletePlayer = function() { - - // remove previous video's attributes and child elements from media element - if (this.player == 'youtube') { - var $youTubeIframe = this.$mediaContainer.find('iframe'); - $youTubeIframe.remove(); - } - this.$media.removeAttr('poster width height'); - this.$media.empty(); - - // Empty elements that will be rebuilt - this.$controllerDiv.empty(); - // this.$statusBarDiv.empty(); - // this.$timer.empty(); - this.$elapsedTimeContainer.empty().text('0:00'); // span.able-elapsedTime - this.$durationContainer.empty(); // span.able-duration - - // Remove popup windows and modal dialogs; these too will be rebuilt - if (this.$signWindow) { - this.$signWindow.remove(); - } - if (this.$transcriptArea) { - this.$transcriptArea.remove(); - } - $('.able-modal-dialog').remove(); - - // reset key variables - this.hasCaptions = false; - this.hasChapters = false; - this.captionsPopup = null; - this.chaptersPopup = null; - }; - - AblePlayer.prototype.getButtonTitle = function(control) { - - if (control === 'playpause') { - return this.tt.play; - } - else if (control === 'play') { - return this.tt.play; - } - else if (control === 'pause') { - return this.tt.pause; - } - else if (control === 'restart') { - return this.tt.restart; - } - else if (control === 'previous') { - return this.tt.prevTrack; - } - else if (control === 'next') { - return this.tt.nextTrack; - } - else if (control === 'rewind') { - return this.tt.rewind; - } - else if (control === 'forward') { - return this.tt.forward; - } - else if (control === 'captions') { - if (this.captions.length > 1) { - return this.tt.captions; - } - else { - if (this.captionsOn) { - return this.tt.hideCaptions; - } - else { - return this.tt.showCaptions; - } - } - } - else if (control === 'descriptions') { - if (this.descOn) { - return this.tt.turnOffDescriptions; - } - else { - return this.tt.turnOnDescriptions; - } - } - else if (control === 'transcript') { - if (this.$transcriptDiv.is(':visible')) { - return this.tt.hideTranscript; - } - else { - return this.tt.showTranscript; - } - } - else if (control === 'chapters') { - return this.tt.chapters; - } - else if (control === 'sign') { - return this.tt.sign; - } - else if (control === 'volume') { - return this.tt.volume; - } - else if (control === 'faster') { - return this.tt.faster; - } - else if (control === 'slower') { - return this.tt.slower; - } - else if (control === 'preferences') { - return this.tt.preferences; - } - else if (control === 'help') { - // return this.tt.help; - } - else if (control === 'fullscreen') { - if (!this.fullscreen) { - return this.tt.enterFullScreen; - } - else { - return this.tt.exitFullScreen; - } - } - else { - // there should be no other controls, but just in case: - // return the name of the control with first letter in upper case - // ultimately will need to get a translated label from this.tt - if (this.debug) { - - } - return control.charAt(0).toUpperCase() + control.slice(1); - } - }; - - -})(jQuery); - -(function ($) { - // Loads files referenced in track elements, and performs appropriate setup. - // For example, captions and text descriptions. - // This will be called whenever the player is recreated. - // Added in v2.2.23: Also handles YouTube caption tracks - - AblePlayer.prototype.setupTracks = function() { - - var thisObj, deferred, promise, loadingPromises, loadingPromise, i, tracks, track; - - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - loadingPromises = []; - - this.captions = []; - this.descriptions = []; - this.chapters = []; - this.meta = []; - - if ($('#able-vts').length) { - // Page includes a container for a VTS instance - this.vtsTracks = []; - this.hasVts = true; - } - else { - this.hasVts = false; - } - - this.getTracks().then(function() { - - tracks = thisObj.tracks; - - for (i=0; i < tracks.length; i++) { - - track = tracks[i]; - - var kind = track.kind; - var trackLang = track.language; - var trackLabel = track.label; - - if (!track.src) { - if (thisObj.usingYouTubeCaptions \|\| thisObj.usingVimeoCaptions) { - // skip all the hullabaloo and go straight to setupCaptions - thisObj.setupCaptions(track,trackLang,trackLabel); - } - else { - // Nothing to load! - // Skip this track; move on to next i - } - continue; - } - - var trackSrc = track.src; - - loadingPromise = thisObj.loadTextObject(trackSrc); // resolves with src, trackText - loadingPromises.push(loadingPromise.catch(function(src) { })); - - loadingPromise.then((function (track, kind) { - - var trackSrc = track.src; - var trackLang = track.language; - var trackLabel = track.label; - - return function (trackSrc, trackText) { // these are the two vars returned from loadTextObject - - var trackContents = trackText; - var cues = thisObj.parseWebVTT(trackSrc, trackContents).cues; - - if (thisObj.hasVts) { - // setupVtsTracks() is in vts.js - thisObj.setupVtsTracks(kind, trackLang, trackLabel, trackSrc, trackContents); - } - - if (kind === 'captions' \|\| kind === 'subtitles') { - thisObj.setupCaptions(track, trackLang, trackLabel, cues); - } - else if (kind === 'descriptions') { - thisObj.setupDescriptions(track, cues, trackLang); - } - else if (kind === 'chapters') { - thisObj.setupChapters(track, cues, trackLang); - } - else if (kind === 'metadata') { - thisObj.setupMetadata(track, cues); - } - } - })(track, kind)); - } - $.when.apply($, loadingPromises).then(function () { - deferred.resolve(); - }); - }); - - return promise; - }; - - AblePlayer.prototype.getTracks = function() { - - // define an array tracks with the following structure: - // kind - string, e.g. "captions", "descriptions" - // src - string, URL of WebVTT source file - // language - string, lang code - // label - string to display, e.g., in CC menu - // def - Boolean, true if this is the default track - // cues - array with startTime, endTime, and payload - - var thisObj, deferred, promise, captionTracks, trackLang, trackLabel, isDefault, - i, j, capLabel, inserted; - - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - this.$tracks = this.$media.find('track'); - this.tracks = []; - captionTracks = []; - this.captions = []; - - if (this.$tracks.length) { - - // create object from HTML5 tracks - this.$tracks.each(function() { - - // srcLang should always be included with <track>, but HTML5 spec doesn't require it - // if not provided, assume track is the same language as the default player language - if ($(this).attr('srclang')) { - trackLang = $(this).attr('srclang'); - } - else { - trackLang = thisObj.lang; - } - if ($(this).attr('label')) { - trackLabel = $(this).attr('label'); - } - else { - trackLabel = thisObj.getLanguageName(trackLang); - } - - if ($(this).attr('default')) { - isDefault = true; - } - else if (trackLang === thisObj.lang) { - // There is no @default attribute, - // but this is the user's/browser's default language - // so make it the default caption track - isDefault = true; - } - else { - isDefault = false; - } - - if (isDefault) { - // this.captionLang will also be the default language for non-caption tracks - thisObj.captionLang = trackLang; - } - - thisObj.tracks.push({ - 'kind': $(this).attr('kind'), - 'src': $(this).attr('src'), - 'language': trackLang, - 'label': trackLabel, - 'def': isDefault - }); - - if ($(this).attr('kind') === 'captions' \|\| $(this).attr('kind') == 'subtitles') { - // also add this track to a dedicated captions object - captionTracks.push({ - 'kind': $(this).attr('kind'), - 'src': $(this).attr('src'), - 'language': trackLang, - 'label': trackLabel, - 'def': isDefault - }); - } - }); - } - - if (captionTracks.length) { - // HTML captions or subtitles were found. - // Use those, and sort them alphabetically. - this.usingYouTubeCaptions = false; - this.usingVimeoCaptions = false; - for (i = 0; i < captionTracks.length; i++) { - if (this.captions.length === 0) { // this is the first - this.captions.push({ - 'language': captionTracks[i].language, - 'label': captionTracks[i].label, - 'def': captionTracks[i].def - }); - } - else { // there are already captions in the array - inserted = false; - for (j = 0; j < this.captions.length; j++) { - capLabel = captionTracks[i].label; - if (capLabel.toLowerCase() < this.captions[j].label.toLowerCase()) { - // insert before track j - this.captions.splice(j,0,{ - 'language': captionTracks[i].language, - 'label': captionTracks[i].label, - 'def': captionTracks[i].def - }); - inserted = true; - break; - } - } - if (!inserted) { - // just add track to the end - this.captions.push({ - 'language': captionTracks[i].language, - 'label': captionTracks[i].label, - 'def': captionTracks[i].def - }); - } - } - } - deferred.resolve(); - } - else { - // if this is a youtube or vimeo player, check there for captions/subtitles - if (this.player === 'youtube') { - this.getYouTubeCaptionTracks(this.youTubeId).then(function() { - thisObj.usingYouTubeCaptions = true; - deferred.resolve(); - }); - } - else if (this.player === 'vimeo') { - this.getVimeoCaptionTracks().then(function() { - thisObj.usingVimeoCaptions = true; - deferred.resolve(); - }); - } - else { - // this is neither YouTube nor Vimeo - // there just ain't no caption tracks - this.hasCaptions = false; - deferred.resolve(); - } - } - return promise; - }; - - AblePlayer.prototype.setupCaptions = function (track, trackLang, trackLabel, cues) { - - // Setup player for display of captions - var thisObj, inserted, i, capLabel; - - thisObj = this; - - if (typeof cues === 'undefined') { - cues = null; - } - - if (this.captions.length) { - // there are captions available - this.hasCaptions = true; - this.currentCaption = -1; // TODO: clarify purpose of this - if (this.prefCaptions === 1) { - this.captionsOn = true; - } - else { - this.captionsOn = false; - } - } - else { - this.hasCaptions = false; - } - - // Remove 'default' attribute from all <track> elements - // This data has already been saved to this.tracks - // and some browsers will display the default captions, despite all standard efforts to suppress them - this.$media.find('track').removeAttr('default'); - - // Currently only showing captions for video, not audio - // TODO: Revisit this to enable captions for audio - if (this.mediaType === 'video') { - - if (!(this.usingYouTubeCaptions \|\| this.usingVimeoCaptions)) { - // create a pair of nested divs for displaying captions - // includes aria-hidden="true" because otherwise - // captions being added and removed causes sporadic changes to focus in JAWS - // (not a problem in NVDA or VoiceOver) - if (!this.$captionsDiv) { - this.$captionsDiv = $('<div>',{ - 'class': 'able-captions', - }); - this.$captionsWrapper = $('<div>',{ - 'class': 'able-captions-wrapper', - 'aria-hidden': 'true' - }).hide(); - if (this.prefCaptionsPosition === 'below') { - this.$captionsWrapper.addClass('able-captions-below'); - } - else { - this.$captionsWrapper.addClass('able-captions-overlay'); - } - this.$captionsWrapper.append(this.$captionsDiv); - this.$vidcapContainer.append(this.$captionsWrapper); - } - } - // Add cues to this.captions for the current language - for (i = 0; i < this.captions.length; i++) { - if (this.captions[i].language === trackLang) { - this.captions[i].cues = cues; - } - } - // Do the same for this.tracks - for (i = 0; i < this.tracks.length; i++) { - if (this.tracks[i].language === trackLang) { - this.tracks[i].cues = cues; - } - } - } - }; - - AblePlayer.prototype.setupDescriptions = function (track, cues, trackLang) { - - // called via setupTracks() only if there is track with kind="descriptions" - // prepares for delivery of text description , in case it's needed - // whether and how it's delivered is controlled within description.js > initDescription() - - this.hasClosedDesc = true; - this.currentDescription = -1; - this.descriptions.push({ - cues: cues, - language: trackLang - }); - }; - - AblePlayer.prototype.setupChapters = function (track, cues, trackLang) { - - // NOTE: WebVTT supports nested timestamps (to form an outline) - // This is not currently supported. - - this.hasChapters = true; - - this.chapters.push({ - cues: cues, - language: trackLang - }); - }; - - AblePlayer.prototype.setupMetadata = function(track, cues) { - - if (this.metaType === 'text') { - // Metadata is only supported if data-meta-div is provided - // The player does not display metadata internally - if (this.metaDiv) { - if ($('#' + this.metaDiv)) { - // container exists - this.$metaDiv = $('#' + this.metaDiv); - this.hasMeta = true; - this.meta = cues; - } - } - } - else if (this.metaType === 'selector') { - this.hasMeta = true; - this.visibleSelectors = []; - this.meta = cues; - } - }; - - AblePlayer.prototype.loadTextObject = function(src) { - -// TODO: Incorporate the following function, moved from setupTracks() -// convert XMl/TTML captions file -/ -if (thisObj.useTtml && (trackSrc.endsWith('.xml') \|\| trackText.startsWith('<?xml'))) { - trackContents = thisObj.ttml2webvtt(trackText); -} -/ - var deferred, promise, thisObj, $tempDiv; - - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - - // create a temp div for holding data - $tempDiv = $('<div>',{ - style: 'display:none' - }); - $tempDiv.load(src, function (trackText, status, req) { - if (status === 'error') { - if (thisObj.debug) { - - } - deferred.reject(src); - } - else { - deferred.resolve(src, trackText); - } - $tempDiv.remove(); - }); - return promise; - }; - -})(jQuery); - - -(function ($) { - AblePlayer.prototype.initYouTubePlayer = function () { - - var thisObj, deferred, promise, youTubeId, googleApiPromise, json; - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - // if a described version is available && user prefers desription - // init player using the described version - if (this.youTubeDescId && this.prefDesc) { - youTubeId = this.youTubeDescId; - } - else { - youTubeId = this.youTubeId; - } - this.activeYouTubeId = youTubeId; - if (AblePlayer.youTubeIframeAPIReady) { - // Script already loaded and ready. - this.finalizeYoutubeInit().then(function() { - deferred.resolve(); - }); - } - else { - // Has another player already started loading the script? If so, abort... - if (!AblePlayer.loadingYouTubeIframeAPI) { - $.getScript('https://www.youtube.com/iframe_api').fail(function () { - deferred.fail(); - }); - } - - // Otherwise, keeping waiting for script load event... - $('body').on('youTubeIframeAPIReady', function () { - thisObj.finalizeYoutubeInit().then(function() { - deferred.resolve(); - }); - }); - } - return promise; - }; - - AblePlayer.prototype.finalizeYoutubeInit = function () { - - // This is called once we're sure the Youtube iFrame API is loaded -- see above - - var deferred, promise, thisObj, containerId, ccLoadPolicy, videoDimensions, autoplay; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - thisObj = this; - - containerId = this.mediaId + '_youtube'; - - this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // NOTE: Tried the following in place of the above in January 2016 - // because in some cases two videos were being added to the DOM - // However, once v2.2.23 was fairly stable, unable to reproduce that problem - // so maybe it's not an issue. This is preserved here temporarily, just in case it's needed... - // thisObj.$mediaContainer.html($('<div>').attr('id', containerId)); - - // cc_load_policy: - // 0 - show captions depending on user's preference on YouTube - // 1 - show captions by default, even if the user has turned them off - // IMPORTANT: This must* be set to 1 or some browsers - // fail to load any texttracks (observed in Chrome, not in Firefox) - ccLoadPolicy = 1; - - videoDimensions = this.getYouTubeDimensions(this.activeYouTubeId, containerId); - if (videoDimensions) { - this.ytWidth = videoDimensions[0]; - this.ytHeight = videoDimensions[1]; - this.aspectRatio = thisObj.ytWidth / thisObj.ytHeight; - } - else { - // dimensions are initially unknown - // sending null values to YouTube results in a video that uses the default YouTube dimensions - // these can then be scraped from the iframe and applied to this.$ableWrapper - this.ytWidth = null; - this.ytHeight = null; - } - - if (this.okToPlay) { - autoplay = 1; - } - else { - autoplay = 0; - } - - // Documentation https://developers.google.com/youtube/player_parameters - - if (typeof this.captionLang == 'undefined') { - // init using the default player lang - this.captionLang = this.lang; - } - - this.youTubePlayer = new YT.Player(containerId, { - videoId: this.activeYouTubeId, - host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', - width: this.ytWidth, - height: this.ytHeight, - playerVars: { - autoplay: autoplay, - enablejsapi: 1, - disableKb: 1, // disable keyboard shortcuts, using our own - playsinline: this.playsInline, - start: this.startTime, - controls: 0, // no controls, using our own - cc_load_policy: ccLoadPolicy, - cc_lang_pref: this.captionLang, // set the caption language - hl: this.lang, // set the UI language to match Able Player - modestbranding: 1, // no YouTube logo in controller - rel: 0, // when video ends, show only related videos from same channel (1 shows any) - iv_load_policy: 3 // do not show video annotations - }, - events: { - onReady: function () { - - if (thisObj.swappingSrc) { - // swap is now complete - thisObj.swappingSrc = false; - thisObj.cueingPlaylistItem = false; - if (thisObj.playing) { - // resume playing - thisObj.playMedia(); - } - } - if (thisObj.userClickedPlaylist) { - thisObj.userClickedPlaylist = false; // reset - } - if (typeof thisObj.aspectRatio === 'undefined') { - thisObj.resizeYouTubePlayer(thisObj.activeYouTubeId, containerId); - } - deferred.resolve(); - }, - onError: function (x) { - deferred.fail(); - }, - onStateChange: function (x) { - thisObj.getPlayerState().then(function(playerState) { - - // values of playerState: 'playing','paused','buffering','ended' - if (playerState === 'playing') { - thisObj.playing = true; - thisObj.startedPlaying = true; - thisObj.paused = false; - } - else if (playerState == 'ended') { - thisObj.onMediaComplete(); - } - else { - thisObj.playing = false; - thisObj.paused = true; - } - if (thisObj.stoppingYouTube && playerState === 'paused') { - if (typeof thisObj.$posterImg !== 'undefined') { - thisObj.$posterImg.show(); - } - thisObj.stoppingYouTube = false; - thisObj.seeking = false; - thisObj.playing = false; - thisObj.paused = true; - } - }); - // If caption tracks are hosted locally, but are also available on YouTube, - // we need to turn them off on YouTube or there will be redundant captions - // This is the most reliable event on which to unload the caption module - if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { - if (thisObj.youTubePlayer.getOptions('captions')) { - thisObj.youTubePlayer.unloadModule('captions'); - } - } - }, - onPlaybackQualityChange: function () { - // do something - }, - } - }); - - this.injectPoster(this.$mediaContainer, 'youtube'); - if (!this.hasPlaylist) { - // remove the media element, since YouTube replaces that with its own element in an iframe - // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() - this.$media.remove(); - } - return promise; - }; - - AblePlayer.prototype.getYouTubeDimensions = function (youTubeContainerId) { - - // get dimensions of YouTube video, return array with width & height - // Sources, in order of priority: - // 1. The width and height attributes on <video> - // 2. YouTube (not yet supported; can't seem to get this data via YouTube Data API without OAuth!) - - var d, url, $iframe, width, height; - - d = []; - - if (typeof this.playerMaxWidth !== 'undefined') { - d[0] = this.playerMaxWidth; - // optional: set height as well; not required though since YouTube will adjust height to match width - if (typeof this.playerMaxHeight !== 'undefined') { - d[1] = this.playerMaxHeight; - } - return d; - } - else { - if (typeof $('#' + youTubeContainerId) !== 'undefined') { - $iframe = $('#' + youTubeContainerId); - width = $iframe.width(); - height = $iframe.height(); - if (width > 0 && height > 0) { - d[0] = width; - d[1] = height; - return d; - } - } - } - return false; - }; - - AblePlayer.prototype.resizeYouTubePlayer = function(youTubeId, youTubeContainerId) { - - // called after player is ready, if youTube dimensions were previously unknown - // Now need to get them from the iframe element that YouTube injected - // and resize Able Player to match - var d, width, height; - if (typeof this.aspectRatio !== 'undefined') { - // video dimensions have already been collected - if (this.restoringAfterFullScreen) { - // restore using saved values - if (this.youTubePlayer) { - this.youTubePlayer.setSize(this.ytWidth, this.ytHeight); - } - this.restoringAfterFullScreen = false; - } - else { - // recalculate with new wrapper size - width = this.$ableWrapper.parent().width(); - height = Math.round(width / this.aspectRatio); - this.$ableWrapper.css({ - 'max-width': width + 'px', - 'width': '' - }); - this.youTubePlayer.setSize(width, height); - if (this.fullscreen) { - this.youTubePlayer.setSize(width, height); - } - else { - // resizing due to a change in window size, not full screen - this.youTubePlayer.setSize(this.ytWidth, this.ytHeight); - } - } - } - else { - d = this.getYouTubeDimensions(youTubeContainerId); - if (d) { - width = d[0]; - height = d[1]; - if (width > 0 && height > 0) { - this.aspectRatio = width / height; - this.ytWidth = width; - this.ytHeight = height; - if (width !== this.$ableWrapper.width()) { - // now that we've retrieved YouTube's default width, - // need to adjust to fit the current player wrapper - width = this.$ableWrapper.width(); - height = Math.round(width / this.aspectRatio); - if (this.youTubePlayer) { - this.youTubePlayer.setSize(width, height); - } - } - } - } - } - }; - - AblePlayer.prototype.getYouTubeCaptionTracks = function (youTubeId) { - - // get data via YouTube IFrame Player API, and push data to this.tracks & this.captions - // NOTE: Caption tracks are not available through the IFrame Player API - // until AFTER the video has started playing. - // Therefore, this function plays the video briefly in order to load the captions module - // then stops the video and collects the data needed to build the cc menu - // This is stupid, but seemingly unavoidable. - // Caption tracks could be obtained through the YouTube Data API - // but this required authors to have a Google API key, - // which would complicate Able Player installation - - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack; - - thisObj = this; - - if (!this.youTubePlayer.getOption('captions','tracklist')) { - // no tracks were found, probably because the captions module hasn't loaded - // play video briefly (required in order to load the captions module) - // and after the apiChange event is triggered, try again to retreive tracks - this.youTubePlayer.addEventListener('onApiChange',function(x) { - if (thisObj.loadingYouTubeCaptions) { - // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once - ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); - thisObj.youTubePlayer.stopVideo(); - // Step through ytTracks and add them to global tracks array - // Note: Unlike YouTube Data API, the IFrame Player API only returns - // tracks that are published, and does NOT include ASR captions - // So, no additional filtering is required - for (i=0; i < ytTracks.length; i++) { - trackLang = ytTracks[i].languageCode; - trackLabel = ytTracks[i].languageName; // displayName and languageName seem to always have the same value - isDefaultTrack = false; - if (typeof thisObj.captionLang !== 'undefined') { - if (trackLang === thisObj.captionLang) { - isDefaultTrack = true; - } - } - else if (typeof thisObj.lang !== 'undefined') { - if (trackLang === thisObj.lang) { - isDefaultTrack = true; - } - } - thisObj.tracks.push({ - 'kind': 'captions', - 'language': trackLang, - 'label': trackLabel, - 'def': isDefaultTrack - }); - } - thisObj.captions = thisObj.tracks; - thisObj.hasCaptions = true; - // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - thisObj.loadingYouTubeCaptions = false; - } - if (thisObj.captionLangPending) { - // user selected a new caption language prior to playback starting - // set it now - thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLangPending}); - thisObj.captionLangPending = null; - } - if (typeof thisObj.prefCaptionsSize !== 'undefined') { - // set the default caption size - // this doesn't work until the captions module is loaded - thisObj.youTubePlayer.setOption('captions','fontSize',thisObj.translatePrefs('size',thisObj.prefCaptionsSize,'youtube')); - } - deferred.resolve(); - }); - // Trigger the above event listener by briefly playing the video - this.loadingYouTubeCaptions = true; - this.youTubePlayer.playVideo(); - } - return promise; - }; - - AblePlayer.prototype.getYouTubeTimedTextUrl = function (youTubeId, trackName, trackLang) { - - // return URL for retrieving WebVTT source via YouTube's timedtext API - // Note: This API seems to be undocumented, and could break anytime - // UPDATE: Google removed this API on November 10, 2021 - // This function is no longer called, but is preserved here for reference - var url = 'https://www.youtube.com/api/timedtext?fmt=vtt'; - url += '&v=' + youTubeId; - url += '&lang=' + trackLang; - // if track has a value in the name field, it's required in the URL - if (trackName !== '') { - url += '&name=' + trackName; - } - return url; - }; - - - AblePlayer.prototype.getYouTubeCaptionCues = function (youTubeId) { - - var deferred, promise, thisObj; - - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - thisObj = this; - - this.tracks = []; - this.tracks.push({ - 'kind': 'captions', - 'src': 'some_file.vtt', - 'language': 'en', - 'label': 'Fake English captions' - }); - - deferred.resolve(); - return promise; - }; - - AblePlayer.prototype.getYouTubePosterUrl = function (youTubeId, width) { - - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 - - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; - }; - -})(jQuery); - -(function ($) { - - - // Events: - // startTracking(event, position) - // tracking(event, position) - // stopTracking(event, position) - - window. AccessibleSlider = function(mediaType, div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { - - // mediaType is either 'audio' or 'video' - // div is the host element around which the slider will be built - // orientation is either 'horizontal' or 'vertical' - // length is the width or height of the slider, depending on orientation - // min is the low end of the slider scale - // max is the high end of the slider scale - // bigInterval is the number of steps supported by page up/page down (set to 0 if not supported) - // (smallInterval, defined as nextStep below, is always set to 1) - this is the interval supported by arrow keys - // label is used within an aria-label attribute to identify the slider to screen reader users - // className is used as the root within class names (e.g., 'able-' + classname + '-head') - // trackingMedia is true if this is a media timeline; otherwise false - // initialState is either 'visible' or 'hidden' - - var thisObj, coords; - - thisObj = this; - - // Initialize some variables. - this.position = 0; // Note: position does not change while tracking. - this.tracking = false; - this.trackDevice = null; // 'mouse' or 'keyboard' - this.keyTrackPosition = 0; - this.lastTrackPosition = 0; - this.nextStep = 1; - this.inertiaCount = 0; - - this.bodyDiv = $(div); - - // Add divs for tracking amount of media loaded and played - if (trackingMedia) { - this.loadedDiv = $('<div></div>'); - this.playedDiv = $('<div></div>'); - } - - // Add a seekhead - this.seekHead = $('<div>',{ - 'aria-orientation': orientation, - 'class': 'able-' + className + '-head' - }); - - if (initialState === 'visible') { - this.seekHead.attr('tabindex', '0'); - } - else { - this.seekHead.attr('tabindex', '-1'); - } - // Since head is focusable, it gets the aria roles/titles. - this.seekHead.attr({ - 'role': 'slider', - 'aria-label': label, - 'aria-valuemin': min, - 'aria-valuemax': max - }); - - this.timeTooltip = $('<div>'); - this.bodyDiv.append(this.timeTooltip); - - this.timeTooltip.attr('role', 'tooltip'); - this.timeTooltip.addClass('able-tooltip'); - this.timeTooltip.hide(); - - this.bodyDiv.append(this.loadedDiv); - this.bodyDiv.append(this.playedDiv); - this.bodyDiv.append(this.seekHead); - - this.bodyDiv.wrap('<div></div>'); - this.wrapperDiv = this.bodyDiv.parent(); - - if (this.skin === 'legacy') { - if (orientation === 'horizontal') { - this.wrapperDiv.width(length); - this.loadedDiv.width(0); - } - else { - this.wrapperDiv.height(length); - this.loadedDiv.height(0); - } - } - this.wrapperDiv.addClass('able-' + className + '-wrapper'); - - if (trackingMedia) { - this.loadedDiv.addClass('able-' + className + '-loaded'); - - this.playedDiv.width(0); - this.playedDiv.addClass('able-' + className + '-played'); - - // Set a default duration. User can call this dynamically if duration changes. - this.setDuration(max); - } - - // handle seekHead events - this.seekHead.on('mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend', function (e) { - - coords = thisObj.pointerEventToXY(e); - - if (e.type === 'mouseenter' \|\| e.type === 'focus') { - thisObj.overHead = true; - } - else if (e.type === 'mouseleave' \|\| e.type === 'blur') { - thisObj.overHead = false; - if (!thisObj.overBody && thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); - } - } - else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { - if (thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.trackHeadAtPageX(coords.x); - } - } - else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { - thisObj.startTracking('mouse', thisObj.pageXToPosition(thisObj.seekHead.offset() + (thisObj.seekHead.width() / 2))); - if (!thisObj.bodyDiv.is(':focus')) { - thisObj.bodyDiv.focus(); - } - e.preventDefault(); - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { - if (thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); - } - } - if (e.type !== 'mousemove' && e.type !== 'mousedown' && e.type !== 'mouseup' && e.type !== 'touchstart' && e.type !== 'touchend') { - thisObj.refreshTooltip(); - } - }); - - // handle bodyDiv events - this.bodyDiv.on( - 'mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend', function (e) { - - coords = thisObj.pointerEventToXY(e); - - if (e.type === 'mouseenter') { - thisObj.overBody = true; - } - else if (e.type === 'mouseleave') { - thisObj.overBody = false; - thisObj.overBodyMousePos = null; - if (!thisObj.overHead && thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); - } - } - else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { - thisObj.overBodyMousePos = { - x: coords.x, - y: coords.y - }; - if (thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.trackHeadAtPageX(coords.x); - } - } - else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { - thisObj.startTracking('mouse', thisObj.pageXToPosition(coords.x)); - thisObj.trackHeadAtPageX(coords.x); - if (!thisObj.seekHead.is(':focus')) { - thisObj.seekHead.focus(); - } - e.preventDefault(); - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { - if (thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); - } - } - else if (e.type === 'keydown') { - // Home - if (e.which === 36) { - thisObj.trackImmediatelyTo(0); - } - // End - else if (e.which === 35) { - thisObj.trackImmediatelyTo(thisObj.duration); - } - // Left arrow or down arrow - else if (e.which === 37 \|\| e.which === 40) { - thisObj.arrowKeyDown(-1); - } - // Right arrow or up arrow - else if (e.which === 39 \|\| e.which === 38) { - thisObj.arrowKeyDown(1); - } - // Page up - else if (e.which === 33 && bigInterval > 0) { - thisObj.arrowKeyDown(bigInterval); - } - // Page down - else if (e.which === 34 && bigInterval > 0) { - thisObj.arrowKeyDown(-bigInterval); - } - else { - return; - } - e.preventDefault(); - } - else if (e.type === 'keyup') { - if (e.which >= 33 && e.which <= 40) { - if (thisObj.tracking && thisObj.trackDevice === 'keyboard') { - thisObj.stopTracking(thisObj.keyTrackPosition); - } - e.preventDefault(); - } - } - if (e.type !== 'mouseup' && e.type !== 'keydown' && e.type !== 'keydown') { - thisObj.refreshTooltip(); - } - }); - } - - AccessibleSlider.prototype.arrowKeyDown = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/* - AccessibleSlider.prototype.pageUp = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/ - AccessibleSlider.prototype.pageXToPosition = function (pageX) { - var offset = pageX - this.bodyDiv.offset().left; - var position = this.duration (offset / this.bodyDiv.width()); - return this.boundPos(position); - }; - - AccessibleSlider.prototype.boundPos = function (position) { - return Math.max(0, Math.min(position, this.duration)); - } - - AccessibleSlider.prototype.setDuration = function (duration) { - if (duration !== this.duration) { - this.duration = duration; - this.resetHeadLocation(); - this.seekHead.attr('aria-valuemax', duration); - } - }; - - AccessibleSlider.prototype.setWidth = function (width) { - this.wrapperDiv.width(width); - this.resizeDivs(); - this.resetHeadLocation(); - }; - - AccessibleSlider.prototype.getWidth = function () { - return this.wrapperDiv.width(); - }; - - AccessibleSlider.prototype.resizeDivs = function () { - this.playedDiv.width(this.bodyDiv.width() * (this.position / this.duration)); - this.loadedDiv.width(this.bodyDiv.width() * this.buffered); - }; - - // Stops tracking, sets the head location to the current position. - AccessibleSlider.prototype.resetHeadLocation = function () { - var ratio = this.position / this.duration; - var center = this.bodyDiv.width() * ratio; - this.seekHead.css('left', center - (this.seekHead.width() / 2)); - - if (this.tracking) { - this.stopTracking(this.position); - } - }; - - AccessibleSlider.prototype.setPosition = function (position, updateLive) { - this.position = position; - this.resetHeadLocation(); - this.refreshTooltip(); - this.resizeDivs(); - this.updateAriaValues(position, updateLive); - } - - // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. - AccessibleSlider.prototype.setBuffered = function (ratio) { - if (!isNaN(ratio)) { - this.buffered = ratio; - this.redrawDivs; - } - } - - AccessibleSlider.prototype.startTracking = function (device, position) { - if (!this.tracking) { - this.trackDevice = device; - this.tracking = true; - this.bodyDiv.trigger('startTracking', [position]); - } - }; - - AccessibleSlider.prototype.stopTracking = function (position) { - this.trackDevice = null; - this.tracking = false; - this.bodyDiv.trigger('stopTracking', [position]); - this.setPosition(position, true); - }; - - AccessibleSlider.prototype.trackHeadAtPageX = function (pageX) { - var position = this.pageXToPosition(pageX); - var newLeft = pageX - this.bodyDiv.offset().left - (this.seekHead.width() / 2); - newLeft = Math.max(0, Math.min(newLeft, this.bodyDiv.width() - this.seekHead.width())); - this.lastTrackPosition = position; - this.seekHead.css('left', newLeft); - this.reportTrackAtPosition(position); - }; - - AccessibleSlider.prototype.trackHeadAtPosition = function (position) { - var ratio = position / this.duration; - var center = this.bodyDiv.width() * ratio; - this.lastTrackPosition = position; - this.seekHead.css('left', center - (this.seekHead.width() / 2)); - this.reportTrackAtPosition(position); - }; - - AccessibleSlider.prototype.reportTrackAtPosition = function (position) { - this.bodyDiv.trigger('tracking', [position]); - this.updateAriaValues(position, true); - }; - - AccessibleSlider.prototype.updateAriaValues = function (position, updateLive) { - // TODO: Localize, move to another function. - var pHours = Math.floor(position / 3600); - var pMinutes = Math.floor((position % 3600) / 60); - var pSeconds = Math.floor(position % 60); - - var pHourWord = pHours === 1 ? 'hour' : 'hours'; - var pMinuteWord = pMinutes === 1 ? 'minute' : 'minutes'; - var pSecondWord = pSeconds === 1 ? 'second' : 'seconds'; - - var descriptionText; - if (pHours > 0) { - descriptionText = pHours + - ' ' + pHourWord + - ', ' + pMinutes + - ' ' + pMinuteWord + - ', ' + pSeconds + - ' ' + pSecondWord; - } - else if (pMinutes > 0) { - descriptionText = pMinutes + - ' ' + pMinuteWord + - ', ' + pSeconds + - ' ' + pSecondWord; - } - else { - descriptionText = pSeconds + ' ' + pSecondWord; - } - - /* Comment to stop live region from generating or being used. / - if (!this.liveAriaRegion) { - this.liveAriaRegion = $('<span>', { - 'class': 'able-offscreen', - 'aria-live': 'polite' - }); - this.wrapperDiv.append(this.liveAriaRegion); - } - if (updateLive && (this.liveAriaRegion.text() !== descriptionText)) { - this.liveAriaRegion.text(descriptionText); - } - - // Uncomment the following lines to use aria values instead of separate live region. - this.seekHead.attr('aria-valuetext', descriptionText); - this.seekHead.attr('aria-valuenow', Math.floor(position).toString()); - }; - - AccessibleSlider.prototype.trackImmediatelyTo = function (position) { - this.startTracking('keyboard', position); - this.trackHeadAtPosition(position); - this.keyTrackPosition = position; - }; - - AccessibleSlider.prototype.refreshTooltip = function () { - if (this.overHead) { - this.timeTooltip.show(); - if (this.tracking) { - this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)); - } - else { - this.timeTooltip.text(this.positionToStr(this.position)); - } - this.setTooltipPosition(this.seekHead.position().left + (this.seekHead.width() / 2)); - } - else if (this.overBody && this.overBodyMousePos) { - this.timeTooltip.show(); - this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))); - this.setTooltipPosition(this.overBodyMousePos.x - this.bodyDiv.offset().left); - } - else { - this.timeTooltip.hide(); - } - }; - - AccessibleSlider.prototype.setTooltipPosition = function (x) { - this.timeTooltip.css({ - left: x - (this.timeTooltip.width() / 2) - 10, - bottom: this.seekHead.height() + 10 - }); - }; - - AccessibleSlider.prototype.positionToStr = function (seconds) { - - // same logic as misc.js > formatSecondsAsColonTime() - var dHours = Math.floor(seconds / 3600); - var dMinutes = Math.floor(seconds / 60) % 60; - var dSeconds = Math.floor(seconds % 60); - if (dSeconds < 10) { - dSeconds = '0' + dSeconds; - } - if (dHours > 0) { - if (dMinutes < 10) { - dMinutes = '0' + dMinutes; - } - return dHours + ':' + dMinutes + ':' + dSeconds; - } - else { - return dMinutes + ':' + dSeconds; - } - }; - - AccessibleSlider.prototype.pointerEventToXY = function(e) { - - // returns array of coordinates x and y in response to both mouse and touch events - // for mouse events, this comes from e.pageX and e.pageY - // for touch events, it's a bit more complicated - var out = {x:0, y:0}; - if (e.type == 'touchstart' \|\| e.type == 'touchmove' \|\| e.type == 'touchend' \|\| e.type == 'touchcancel') { - var touch = e.originalEvent.touches[0] \|\| e.originalEvent.changedTouches[0]; - out.x = touch.pageX; - out.y = touch.pageY; - } - else if (e.type == 'mousedown' \|\| e.type == 'mouseup' \|\| e.type == 'mousemove' \|\| e.type == 'mouseover'\|\| e.type=='mouseout' \|\| e.type=='mouseenter' \|\| e.type=='mouseleave') { - out.x = e.pageX; - out.y = e.pageY; - } - return out; - }; - -})(jQuery); - -(function ($) { - - AblePlayer.prototype.addVolumeSlider = function($div) { - - // input type="range" requires IE10 and later - // and still isn't supported by Opera Mini as of v8 - // Also, vertical orientation of slider requires CSS hacks - // and causes problems in some screen readers - // Therefore, building a custom vertical volume slider - var thisObj, volumeSliderId, volumeHelpId, x, y, volumePct; - - thisObj = this; - - // define a few variables - volumeSliderId = this.mediaId + '-volume-slider'; - volumeHelpId = this.mediaId + '-volume-help'; - this.volumeTrackHeight = 50; // must match CSS height for .able-volume-slider - this.volumeHeadHeight = 7; // must match CSS height for .able-volume-head - this.volumeTickHeight = this.volumeTrackHeight / 10; - - this.$volumeSlider = $('<div>',{ - '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' - }); - this.$volumeSliderTrackOn = $('<div>',{ - 'class': 'able-volume-track able-volume-track-on' - }); - this.$volumeSliderHead = $('<div>',{ - 'class': 'able-volume-head', - 'role': 'slider', - 'aria-orientation': 'vertical', - 'aria-label': this.tt.volumeUpDown, - 'aria-valuemin': 0, - 'aria-valuemax': 10, - 'aria-valuenow': this.volume, - 'tabindex': -1 - }); - this.$volumeSliderTrack.append(this.$volumeSliderTrackOn,this.$volumeSliderHead); - this.$volumeAlert = $('<div>',{ - 'class': 'able-offscreen', - 'aria-live': 'assertive', - 'aria-atomic': 'true' - }); - volumePct = parseInt(thisObj.volume) / 10 100; - this.$volumeHelp = $('<div>',{ - 'id': volumeHelpId, - 'class': 'able-volume-help' - }).text(volumePct + '%, ' + this.tt.volumeHelp); - this.$volumeButton.attr({ - 'aria-describedby': volumeHelpId - }); - this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeSliderTrack,this.$volumeAlert,this.$volumeHelp) - $div.append(this.$volumeSlider); - this.refreshVolumeSlider(this.volume); - - // add event listeners - 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 (e) { - if(thisObj.player == 'youtube'){ - thisObj.draggingVolume = false; - } - }); - - $(document).on('mouseup',function (e) { - thisObj.draggingVolume = false; - }); - - $(document).on('mousemove',function (e) { - if (thisObj.draggingVolume) { - x = e.pageX; - y = e.pageY; - thisObj.moveVolumeHead(y); - } - }); - - this.$volumeSliderHead.on('keydown',function (e) { - - // Left arrow or down arrow - if (e.which === 37 \|\| e.which === 40) { - thisObj.handleVolume('down'); - } - // Right arrow or up arrow - else if (e.which === 39 \|\| e.which === 38) { - thisObj.handleVolume('up'); - } - // Escape key or Enter key or Tab key - else if (e.which === 27 \|\| e.which === 13 \|\| e.which === 9) { - // close popup - if (thisObj.$volumeSlider.is(':visible')) { - thisObj.closingVolume = true; // stopgap - thisObj.hideVolumePopup(); - } - else { - if (!thisObj.closingVolume) { - thisObj.showVolumePopup(); - } - } - } - else { - return; - } - e.preventDefault(); - }); - }; - - AblePlayer.prototype.refreshVolumeSlider = function(volume) { - - // adjust slider position based on current volume - var volumePct, volumePctText; - volumePct = (volume/10) * 100; - volumePctText = volumePct + '%'; - - var trackOnHeight, trackOnTop, headTop; - trackOnHeight = volume * this.volumeTickHeight; - trackOnTop = this.volumeTrackHeight - trackOnHeight; - headTop = trackOnTop - this.volumeHeadHeight; - - if (this.$volumeSliderTrackOn) { - this.$volumeSliderTrackOn.css({ - 'height': trackOnHeight + 'px', - 'top': trackOnTop + 'px' - }); - } - if (this.$volumeSliderHead) { - this.$volumeSliderHead.attr({ - 'aria-valuenow': volume, - 'aria-valuetext': volumePctText - }); - this.$volumeSliderHead.css({ - 'top': headTop + 'px' - }); - } - if (this.$volumeAlert) { - this.$volumeAlert.text(volumePct + '%'); - } - }; - - AblePlayer.prototype.refreshVolumeButton = function(volume) { - - var volumeName, volumePct, volumeLabel, volumeIconClass, volumeImg, newSvgData; - - volumeName = this.getVolumeName(volume); - volumePct = (volume/10) * 100; - volumeLabel = this.tt.volume + ' ' + volumePct + '%'; - - if (this.iconType === 'font') { - volumeIconClass = 'icon-volume-' + volumeName; - this.$volumeButton.find('span').first().removeClass().addClass(volumeIconClass); - this.$volumeButton.find('span.able-clipped').text(volumeLabel); - } - else if (this.iconType === 'image') { - volumeImg = this.imgPath + 'volume-' + volumeName + '.png'; - this.$volumeButton.find('img').attr('src',volumeImg); - } - else if (this.iconType === 'svg') { - if (volumeName !== 'mute') { - volumeName = 'volume-' + volumeName; - } - newSvgData = this.getSvgData(volumeName); - this.$volumeButton.find('svg').attr('viewBox',newSvgData[0]); - this.$volumeButton.find('path').attr('d',newSvgData[1]); - } - }; - - AblePlayer.prototype.moveVolumeHead = function(y) { - - // y is current position after mousemove - var diff, direction, ticksDiff, newVolume, maxedOut; - - var diff = this.volumeHeadPositionTop - y; - - // only move the volume head if user had dragged at least one tick - // this is more efficient, plus creates a "snapping' effect - if (Math.abs(diff) > this.volumeTickHeight) { - if (diff > 0) { - direction = 'up'; - } - else { - direction = 'down'; - } - if (direction == 'up' && this.volume == 10) { - // can't go any higher - return; - } - else if (direction == 'down' && this.volume == 0) { - // can't go any lower - return; - } - else { - ticksDiff = Math.round(Math.abs(diff) / this.volumeTickHeight); - if (direction == 'up') { - newVolume = this.volume + ticksDiff; - if (newVolume > 10) { - newVolume = 10; - } - } - else { // direction is down - newVolume = this.volume - ticksDiff; - if (newVolume < 0) { - newVolume = 0; - } - } - this.setVolume(newVolume); // this.volume will be updated after volumechange event fires (event.js) - this.refreshVolumeSlider(newVolume); - this.refreshVolumeButton(newVolume); - this.volumeHeadPositionTop = y; - } - } - }; - - AblePlayer.prototype.handleVolume = function(direction) { - - // 'direction is either 'up','down', or an ASCII key code 49-57 (numeric keys 1-9) - // Action: calculate and change the volume - // Don't change this.volume and this.volumeButton yet - wait for 'volumechange' event to fire (event.js) - - // If NO direction is provided, user has just clicked on the Volume button - // Action: show slider - var volume; - - if (typeof direction === 'undefined') { - if (this.$volumeSlider.is(':visible')) { - this.hideVolumePopup(); - } - else { - if (!this.closingVolume) { - this.showVolumePopup(); - } - } - return; - } - - if (direction >= 49 && direction <= 57) { - volume = direction - 48; - } - else { - - volume = this.getVolume(); - - if (direction === 'up' && volume < 10) { - volume += 1; - } - else if (direction === 'down' && volume > 0) { - volume -= 1; - } - } - - if (this.isMuted() && volume > 0) { - this.setMute(false); - } - else if (volume === 0) { - this.setMute(true); - } - else { - this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) - this.refreshVolumeSlider(volume); - this.refreshVolumeButton(volume); - } - }; - - AblePlayer.prototype.handleMute = function() { - - if (this.isMuted()) { - this.setMute(false); - } - else { - this.setMute(true); - } - }; - - AblePlayer.prototype.showVolumePopup = function() { - - this.closePopups(); - this.$tooltipDiv.hide(); - this.$volumeSlider.show().attr('aria-hidden','false'); - this.$volumeButton.attr('aria-expanded','true'); - this.$volumeSliderHead.attr('tabindex','0').focus(); - }; - - AblePlayer.prototype.hideVolumePopup = function() { - - var thisObj = this; - - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeSliderHead.attr('tabindex','-1'); - this.$volumeButton.attr('aria-expanded','false').focus(); - // wait a second before resetting stopgap var - // otherwise the keypress used to close volume popup will trigger the volume button - setTimeout(function() { - thisObj.closingVolume = false; - }, 1000); - }; - - AblePlayer.prototype.isMuted = function () { - - if (this.player === 'html5') { - return this.media.muted; - } - else if (this.player === 'jw' && this.jwPlayer) { - return this.jwPlayer.getMute(); - } - else if (this.player === 'youtube') { - return this.youTubePlayer.isMuted(); - } - }; - - AblePlayer.prototype.setMute = function(mute) { - - // mute is either true (muting) or false (unmuting) - if (mute) { - // save current volume so it can be restored after unmute - this.lastVolume = this.volume; - this.volume = 0; - } - else { // restore to previous volume - if (typeof this.lastVolume !== 'undefined') { - this.volume = this.lastVolume; - } - } - - if (this.player === 'html5') { - this.media.muted = mute; - } - else if (this.player === 'jw' && this.jwPlayer) { - this.jwPlayer.setMute(mute); - } - else if (this.player === 'youtube') { - if (mute) { - this.youTubePlayer.mute(); - } - else { - this.youTubePlayer.unMute(); - } - } - this.refreshVolumeSlider(this.volume); - this.refreshVolumeButton(this.volume); - }; - - AblePlayer.prototype.setVolume = function (volume) { - - // volume is 1 to 10 - // convert as needed depending on player - - if (this.player === 'html5') { - // volume is 0 to 1 - this.media.volume = volume / 10; - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.volume = 0; // always mute - } - } - else if (this.player === 'youtube') { - // volume is 0 to 100 - this.youTubePlayer.setVolume(volume * 10); - this.volume = volume; - } - else if (this.player === 'vimeo') { - // volume is 0 to 1 - this.vimeoPlayer.setVolume(volume / 10).then(function() { - // setVolume finished. - // could do something here - // successful completion also fires a 'volumechange' event (see event.js) - }); - } - else if (this.player === 'jw' && this.jwPlayer) { - // volume is 0 to 100 - this.jwPlayer.setVolume(volume * 10); - } - this.lastVolume = volume; - }; - - AblePlayer.prototype.getVolume = function (volume) { - - // return volume using common audio control scale 1 to 10 - if (this.player === 'html5') { - // uses 0 to 1 scale - return this.media.volume * 10; - } - else if (this.player === 'youtube') { - // uses 0 to 100 scale - return this.youTubePlayer.getVolume() / 10; - } - if (this.player === 'vimeo') { - // uses 0 to 1 scale - // this.vimeoPlayer.getVolume() takes too long to resolve with a value - // Just use variable that's already been defined (should be the same value anyway) - return this.volume; - } - else if (this.player === 'jw' && this.jwPlayer) { - // uses 0 to 100 scale - return this.jwPlayer.getVolume() / 10; - } - }; - - AblePlayer.prototype.getVolumeName = function (volume) { - - // returns 'mute','soft','medium', or 'loud' depending on volume level - if (volume == 0) { - return 'mute'; - } - else if (volume == 10) { - return 'loud'; - } - else if (volume < 5) { - return 'soft'; - } - else { - return 'medium'; - } - }; - -})(jQuery); - -(function ($) { - var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"; - - // Based on the incredible accessible modal dialog. - window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) { - - this.title = title; - this.closeButtonLabel = closeButtonLabel; - this.focusedElementBeforeModal = $returnElement; - this.escapeHook = escapeHook; - this.baseId = $(modalDiv).attr('id') \|\| Math.floor(Math.random() * 1000000000).toString(); - var thisObj = this; - var modal = modalDiv; - this.modal = modal; - modal.css({ - 'width': width \|\| '50%' - }); - modal.addClass('able-modal-dialog'); - - if (!fullscreen) { - var closeButton = $('<button>',{ - 'class': 'modalCloseButton', - 'title': thisObj.closeButtonLabel, - 'aria-label': thisObj.closeButtonLabel - }).text('X'); - closeButton.keydown(function (e) { - // Space key down - if (e.which === 32) { - thisObj.hide(); - } - }).click(function () { - thisObj.hide(); - }); - - var titleH1 = $('<h1></h1>'); - titleH1.attr('id', 'modalTitle-' + this.baseId); - titleH1.css('text-align', 'center'); - titleH1.text(title); - - $descDiv.attr('id', 'modalDesc-' + this.baseId); - - modal.attr({ - 'aria-labelledby': 'modalTitle-' + this.baseId, - 'aria-describedby': 'modalDesc-' + this.baseId - }); - modal.prepend(titleH1); - modal.prepend(closeButton); - } - - modal.attr({ - 'aria-hidden': 'true', - 'role': dialogRole - }); - - modal.keydown(function (e) { - // Escape - if (e.which === 27) { - if (thisObj.escapeHook) { - thisObj.escapeHook(e, this); - } - else { - thisObj.hide(); - e.preventDefault(); - } - } - // Tab - else if (e.which === 9) { - // Manually loop tab navigation inside the modal. - var parts = modal.find(''); - var focusable = parts.filter(focusableElementsSelector).filter(':visible'); - - if (focusable.length === 0) { - return; - } - - var focused = $(':focus'); - var currentIndex = focusable.index(focused); - if (e.shiftKey) { - // If backwards from first element, go to last. - if (currentIndex === 0) { - focusable.get(focusable.length - 1).focus(); - e.preventDefault(); - } - } - else { - if (currentIndex === focusable.length - 1) { - focusable.get(0).focus(); - e.preventDefault(); - } - } - } - e.stopPropagation(); - }); - - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); - }; - - AccessibleDialog.prototype.show = function () { - if (!this.overlay) { - // Generate overlay. - var overlay = $('<div></div>').attr({ - 'class': 'able-modal-overlay', - 'tabindex': '-1' - }); - this.overlay = overlay; - $('body').append(overlay); - - // Keep from moving focus out of dialog when clicking outside of it. - overlay.on('mousedown.accessibleModal', function (e) { - e.preventDefault(); - }); - } - - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true'); - - this.overlay.css('display', 'block'); - this.modal.css('display', 'block'); - this.modal.attr({ - 'aria-hidden': 'false', - 'tabindex': '-1' - }); - - var focusable = this.modal.find("").filter(focusableElementsSelector).filter(':visible'); - if (focusable.length === 0) { - this.focusedElementBeforeModal.blur(); - } - var thisObj = this; - setTimeout(function () { - // set focus on the first focusable element - thisObj.modal.find('button.modalCloseButton').first().focus(); - }, 300); - }; - - AccessibleDialog.prototype.hide = function () { - if (this.overlay) { - this.overlay.css('display', 'none'); - } - this.modal.css('display', 'none'); - this.modal.attr('aria-hidden', 'true'); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); - - this.focusedElementBeforeModal.focus(); - }; - - AccessibleDialog.prototype.getInputs = function () { - - // return an array of input elements within this dialog - if (this.modal) { - var inputs = this.modal.find('input'); - return inputs; - } - return false; - }; - -})(jQuery); - -(function ($) { - - AblePlayer.prototype.getNextHeadingLevel = function($element) { - - // Finds the nearest heading in the ancestor tree - // Loops over each parent of the current element until a heading is found - // If multiple headings are found beneath a given parent, get the closest - // Returns an integer (1-6) representing the next available heading level - - var $parents, $foundHeadings, numHeadings, headingType, headingNumber; - - $parents = $element.parents(); - $parents.each(function(){ - $foundHeadings = $(this).children(':header'); - numHeadings = $foundHeadings.length; - if (numHeadings) { - headingType = $foundHeadings.eq(numHeadings-1).prop('tagName'); - return false; - } - }); - if (typeof headingType === 'undefined') { - // page has no headings - headingNumber = 1; - } - else { - // Increment closest heading by one if less than 6. - headingNumber = parseInt(headingType[1]); - headingNumber += 1; - if (headingNumber > 6) { - headingNumber = 6; - } - } - return headingNumber; - }; - - AblePlayer.prototype.countProperties = function(obj) { - - // returns the number of properties in an object - var count, prop; - count = 0; - for (prop in obj) { - if (obj.hasOwnProperty(prop)) { - ++count; - } - } - return count; - }; - - AblePlayer.prototype.formatSecondsAsColonTime = function (seconds, showFullTime) { - - // Takes seconds and converts to string of form hh:mm:ss - // If showFullTime is true, shows 00 for hours if time is less than an hour - // and show milliseconds (e.g., 00:00:04.123 as in Video Track Sorter) - // Otherwise, omits empty hours and milliseconds (e.g., 00:04 as in timer on controller) - - var dHours, dMinutes, dSeconds, - parts, milliSeconds, numShort, i; - - if (showFullTime) { - // preserve milliseconds, if included in seconds - parts = seconds.toString().split('.'); - if (parts.length === 2) { - milliSeconds = parts[1]; - if (milliSeconds.length < 3) { - numShort = 3 - milliSeconds.length; - for (i=1; i <= numShort; i++) { - milliSeconds += '0'; - } - } - } - else { - milliSeconds = '000'; - } - } - dHours = Math.floor(seconds / 3600); - dMinutes = Math.floor(seconds / 60) % 60; - dSeconds = Math.floor(seconds % 60); - if (dSeconds < 10) { - dSeconds = '0' + dSeconds; - } - if (dHours > 0) { - if (dMinutes < 10) { - dMinutes = '0' + dMinutes; - } - if (showFullTime) { - return dHours + ':' + dMinutes + ':' + dSeconds + '.' + milliSeconds; - } - else { - return dHours + ':' + dMinutes + ':' + dSeconds; - } - } - else { - if (showFullTime) { - if (dHours < 1) { - dHours = '00'; - } - else if (dHours < 10) { - dHours = '0' + dHours; - } - if (dMinutes < 1) { - dMinutes = '00'; - } - else if (dMinutes < 10) { - dMinutes = '0' + dMinutes; - } - return dHours + ':' + dMinutes + ':' + dSeconds + '.' + milliSeconds; - } - else { - return dMinutes + ':' + dSeconds; - } - } - }; - - AblePlayer.prototype.getSecondsFromColonTime = function (timeStr) { - - // Converts string of form hh:mm:ss to seconds - var timeParts, hours, minutes, seconds, newTime; - - timeParts = timeStr.split(':'); - if (timeParts.length === 3) { - hours = parseInt(timeParts[0]); - minutes = parseInt(timeParts[1]); - seconds = parseFloat(timeParts[2]); - return ((hours 3600) + (minutes * 60) + (seconds)); - } - else if (timeParts.length === 2) { - minutes = parseInt(timeParts[0]); - seconds = parseFloat(timeParts[1]); - return ((minutes * 60) + (seconds)); - } - else if (timeParts.length === 1) { - seconds = parseFloat(timeParts[0]); - return seconds; - } - }; - - AblePlayer.prototype.capitalizeFirstLetter = function (string) { - return string.charAt(0).toUpperCase() + string.slice(1); - }; - - AblePlayer.prototype.roundDown = function (value, decimals) { - - // round value down to the nearest X decimal points - // where X is the value of the decimals parameter - return Number(Math.floor(value+'e'+decimals)+'e-'+decimals); - }; - - AblePlayer.prototype.hasAttr = function (object, attribute) { - - // surprisingly, there is no hasAttr() function in Jquery as of 3.2.1 - // return true if object has attribute; otherwise false - // selector is a Jquery object - // attribute is a string - - var attr = object.attr(attribute); - - // For some browsers, `attr` is undefined; for others, - // `attr` is false. Check for both. - if (typeof attr !== typeof undefined && attr !== false) { - return true; - } - else { - return false; - } - }; - - Number.isInteger = Number.isInteger \|\| function(value) { - - // polyfill for IE11, which doesn't otherwise support Number.isInteger - // https://stackoverflow.com/a/31720368/744281 - return typeof value === "number" && isFinite(value) && Math.floor(value) === value; - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.initDescription = function() { - - // set default mode for delivering description (open vs closed) - // based on availability and user preference - - // called when player is being built, or when a user - // toggles the Description button or changes a description-related preference - // In the latter two scendarios, this.refreshingDesc == true via control.js > handleDescriptionToggle() - - // The following variables are applicable to delivery of description: - // prefDesc == 1 if user wants description (i.e., Description button is on); else 0 - // prefDescFormat == either 'video' or 'text' (as of v4.0.10, prefDescFormat is always 'video') - // useDescFormat is the format actually used ('video' or 'text'), regardless of user preference - // prevDescFormat is the value of useDescFormat before user toggled off description - // prefDescPause == 1 to pause video when description starts; else 0 - // prefDescVisible == 1 to visibly show text-based description area; else 0 - // hasOpenDesc == true if a described version of video is available via data-desc-src attribute - // hasClosedDesc == true if a description text track is available - // descOn == true if description of either type is on - // exposeTextDescriptions == true if text description is to be announced audibly; otherwise false - - var thisObj = this; - if (this.refreshingDesc) { - this.prevDescFormat = this.useDescFormat; - } - else { - // this is the initial build - // first, check to see if there's an open-described version of this video - // checks only the first source since if a described version is provided, - // it must be provided for all sources - this.descFile = this.$sources.first().attr('data-desc-src'); - if (typeof this.descFile !== 'undefined') { - this.hasOpenDesc = true; - } - else { - // there's no open-described version via data-desc-src, - // but what about data-youtube-desc-src or data-vimeo-desc-src? - if (this.youTubeDescId \|\| this.vimeoDescId) { - this.hasOpenDesc = true; - } - else { // there are no open-described versions from any source - this.hasOpenDesc = false; - } - } - } - - // Set this.useDescFormat based on media availability & user preferences - if (this.prefDesc) { - if (this.hasOpenDesc && this.hasClosedDesc) { - // both formats are available. User gets their preference. - this.useDescFormat = this.prefDescFormat; - this.descOn = true; - } - else if (this.hasOpenDesc) { - this.useDescFormat = 'video'; - this.descOn = true; - } - else if (this.hasClosedDesc) { - this.useDescFormat = 'text'; - this.descOn = true; - } - } - else { - // prefDesc is not set for this user - this.useDescFormat = null; - this.descOn = false; - } - - if (this.useDescFormat === 'video') { - // If text descriptions are also available, silence them - this.exposeTextDescriptions = false; - } - - if (this.descOn) { - if (this.useDescFormat === 'video') { - if (!this.usingDescribedVersion()) { - // switched from non-described to described version - this.swapDescription(); - } - } - if (this.hasClosedDesc) { - if (this.prefDescVisible) { - // make description text visible - // New in v4.0.10: Do this regardless of useDescFormat - this.$descDiv.show(); - this.$descDiv.removeClass('able-clipped'); - } - else { - // keep it visible to screen readers, but hide it visibly - this.$descDiv.addClass('able-clipped'); - } - if (!this.swappingSrc) { - this.showDescription(this.elapsed); - } - } - } - else { // description is off. - if (this.prevDescFormat === 'video') { // user has turned off described version of video - if (this.usingDescribedVersion()) { - // user was using the described verion. Swap for non-described version - this.swapDescription(); - } - } - else if (this.prevDescFormat === 'text') { // user has turned off text description - // hide description div from everyone, including screen reader users - this.$descDiv.hide(); - this.$descDiv.removeClass('able-clipped'); - } - } - this.refreshingDesc = false; - }; - - AblePlayer.prototype.usingDescribedVersion = function () { - - // Returns true if currently using audio description, false otherwise. - - if (this.player === 'youtube') { - return (this.activeYouTubeId === this.youTubeDescId); - } - else if (this.player === 'vimeo') { - return (this.activeVimeoId === this.vimeoDescId); - } - else { - return (this.$sources.first().attr('data-desc-src') === this.$sources.first().attr('src')); - } - }; - - AblePlayer.prototype.getBrowserVoices = function () { - - // define this.descVoices - // NOTE: Some browsers (e.g., Chrome) require a user-initiated click before - // this.synth.getVoices() will work - - var voices, descLangs, voiceLang, playerLang; - - // if browser supports Web Speech API - // define this.descvoices (an array of available voices in this browser) - if (window.speechSynthesis) { - this.synth = window.speechSynthesis; - voices = this.synth.getVoices(); - descLangs = this.getDescriptionLangs(); - if (voices.length > 0) { - this.descVoices = []; - // available languages are identified with local suffixes (e.g., en-US) - for (var i=0; i<voices.length; i++) { - // match only the first 2 characters of the lang code - // include any language for which there is a matching description track - // as well as the overall player lang - voiceLang = voices[i].lang.substr(0,2).toLowerCase(); - playerLang = this.lang.substr(0,2).toLowerCase(); - if (voiceLang === playerLang \|\| (descLangs.indexOf(voiceLang) !== -1)) { - // this is a match. Add to the final array - this.descVoices.push(voices[i]); - } - } - if (!this.descVoices.length) { - // no voices available in the default language(s) - // just use all voices, regardless of language - this.descVoices = voices; - } - } - } - return false; - }; - - AblePlayer.prototype.getDescriptionLangs = function () { - - // returns an array of languages (from srclang atttributes) - // in which there are description tracks - // use only first two characters of the lang code - var descLangs = []; - if (this.tracks) { - for (var i=0; i < this.tracks.length; i++) { - if (this.tracks[i].kind === 'descriptions') { - descLangs.push(this.tracks[i].language.substr(0,2).toLowerCase()); - } - } - } - return descLangs; - }; - - AblePlayer.prototype.updateDescriptionVoice = function () { - - // Called if user chooses a subtitle language for which there is a matching - // description track, and the subtitle language is different than the player language - // This ensures the description is read in a proper voice for the selected language - - var voices, descVoice; - if (!this.descVoices) { - this.getBrowserVoices(); - if (this.descVoices) { - this.rebuildDescPrefsForm(); - } - } - else if (!this.$voiceSelectField) { - this.rebuildDescPrefsForm(); - } - - descVoice = this.selectedDescriptions.language; - - if (this.synth) { - voices = this.synth.getVoices(); - if (voices.length > 0) { - // available languages are identified with local suffixes (e.g., en-US) - for (var i=0; i<voices.length; i++) { - // select the first language that matches the first 2 characters of the lang code - if (voices[i].lang.substr(0,2).toLowerCase() === descVoice.substr(0,2).toLowerCase()) { - // make this the user's current preferred voice - this.prefDescVoice = voices[i].name; - // select this voice in the Description Prefs dialog - if (this.$voiceSelectField) { - this.$voiceSelectField.val(this.prefDescVoice); - } - break; - } - } - } - } - }; - - AblePlayer.prototype.swapDescription = function() { - - // swap described and non-described source media, depending on which is playing - // this function is only called in two circumstances: - // 1. Swapping to described version when initializing player (based on user prefs & availability) - // 2. User is toggling description - var thisObj, i, origSrc, descSrc, srcType, newSource; - - thisObj = this; - - // get current time, and start new video at the same time - // NOTE: There is some risk in resuming playback at the same start time - // since the described version might include extended audio description (with pauses) - // and might therefore be longer than the non-described version - // The benefits though would seem to outweigh this risk - - this.swapTime = this.elapsed; // video will scrub to this time after loaded (see event.js) - if (this.descOn) { - // user has requested the described version - this.showAlert(this.tt.alertDescribedVersion); - } - else { - // user has requested the non-described version - this.showAlert(this.tt.alertNonDescribedVersion); - } - if (this.player === 'html5') { - - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - for (i=0; i < this.$sources.length; i++) { - // for all <source> elements, replace src with data-orig-src - origSrc = this.$sources[i].getAttribute('data-orig-src'); - srcType = this.$sources[i].getAttribute('type'); - if (origSrc) { - this.$sources[i].setAttribute('src',origSrc); - } - } - // No need to check for this.initializing - // This function is only called during initialization - // if swapping from non-described to described - this.swappingSrc = true; - } - else { - // the non-described version is currently playing. Swap to described. - for (i=0; i < this.$sources.length; i++) { - // for all <source> elements, replace src with data-desc-src (if one exists) - // then store original source in a new data-orig-src attribute - origSrc = this.$sources[i].getAttribute('src'); - descSrc = this.$sources[i].getAttribute('data-desc-src'); - srcType = this.$sources[i].getAttribute('type'); - if (descSrc) { - this.$sources[i].setAttribute('src',descSrc); - this.$sources[i].setAttribute('data-orig-src',origSrc); - } - } - this.swappingSrc = true; - } - - // now reload the source file. - if (this.player === 'html5') { - this.media.load(); - } - } - else if (this.player === 'youtube') { - - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeYouTubeId = this.youTubeId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { - // the non-described version is currently playing. Swap to described. - this.activeYouTubeId = this.youTubeDescId; - this.showAlert(this.tt.alertDescribedVersion); - } - if (typeof this.youTubePlayer !== 'undefined') { - - if (thisObj.playing) { - // loadVideoById() loads and immediately plays the new video at swapTime - thisObj.youTubePlayer.loadVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - else { - // cueVideoById() loads the new video and seeks to swapTime, but does not play - thisObj.youTubePlayer.cueVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - } - } - else if (this.player === 'vimeo') { - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeVimeoId = this.vimeoId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { - // the non-described version is currently playing. Swap to described. - this.activeVimeoId = this.vimeoDescId; - this.showAlert(this.tt.alertDescribedVersion); - } - // load the new video source - this.vimeoPlayer.loadVideo(this.activeVimeoId).then(function() { - - if (thisObj.playing) { - // video was playing when user requested an alternative version - // seek to swapTime and continue playback (playback happens automatically) - thisObj.vimeoPlayer.setCurrentTime(thisObj.swapTime); - } - else { - // Vimeo autostarts immediately after video loads - // The "Described" button should not trigger playback, so stop this before the user notices. - thisObj.vimeoPlayer.pause(); - } - }); - } - }; - - AblePlayer.prototype.showDescription = function(now) { - - // there's a lot of redundancy between this function and showCaptions - // Trying to combine them ended up in a mess though. Keeping as is for now. - - if (!this.exposeTextDescriptions \|\| this.swappingSrc \|\| !this.descOn) { - return; - } - - var thisObj, i, cues, d, thisDescription, descText, msg; - thisObj = this; - - var flattenComponentForDescription = function (component) { - var result = []; - if (component.type === 'string') { - result.push(component.value); - } - else { - for (var i = 0; i < component.children.length; i++) { - result.push(flattenComponentForDescription(component.children[i])); - } - } - return result.join(''); - }; - - if (this.selectedDescriptions) { - cues = this.selectedDescriptions.cues; - } - else if (this.descriptions.length >= 1) { - cues = this.descriptions[0].cues; - } - else { - cues = []; - } - for (d = 0; d < cues.length; d++) { - if ((cues[d].start <= now) && (cues[d].end > now)) { - thisDescription = d; - break; - } - } - if (typeof thisDescription !== 'undefined') { - if (this.currentDescription !== thisDescription) { - // temporarily remove aria-live from $status in order to prevent description from being interrupted - this.$status.removeAttr('aria-live'); - descText = flattenComponentForDescription(cues[thisDescription].components); - if (window.speechSynthesis) { - // browser supports speech synthsis - this.announceDescriptionText('description',descText); - if (this.prefDescVisible) { - // write description to the screen for sighted users - // but remove ARIA attributes since it isn't intended to be read by screen readers - this.$descDiv.html(descText).removeAttr('aria-live aria-atomic'); - } - } - else { - // browser does not support speech synthesis - // load the new description into the container div for screen readers to read - this.$descDiv.html(descText); - } - if (this.prefDescPause && this.exposeTextDescriptions) { - this.pauseMedia(); - this.pausedForDescription = true; - } - this.currentDescription = thisDescription; - } - } - else { - this.$descDiv.html(''); - this.currentDescription = -1; - // restore aria-live to $status - this.$status.attr('aria-live','polite'); - } - }; - - AblePlayer.prototype.announceDescriptionText = function(context, text) { - - // this function announces description text using speech synthesis - // it's only called if already determined that browser supports speech synthesis - // context is either: - // 'description' - actual description text extracted from WebVTT file - // 'sample' - called when user changes a setting in Description Prefs dialog - - var thisObj, speechTimeout, voiceName, i, voice, pitch, rate, volume, utterance; - - thisObj = this; - - // As of Feb 2021, - // 1. In some browsers (e.g., Chrome) window.speechSynthesis.getVoices() - // returns 0 voices unless the request is triggered with a user click - // Therefore, description may have failed to initialize when the page loaded - // This function cannot have been called without a mouse click. - // Therefore, this is a good time to check that, and try again if needed - // 2. In some browsers, the window.speechSynthesis.speaking property fails to reset, - // and onend event is never fired. This prevents new speech from being spoken. - // window.speechSynthesis.cancel() also fails, so it's impossible to recover. - // This only seems to happen with some voices. - // Typically the first voice in the getVoices() array (index 0) is realiable - // When speech synthesis gets wonky, this is a deep problem that impacts all browsers - // and typically requires a computer reboot to make right again. - // This has been observed frequently in macOS Big Sur, but also in Windows 10 - // To ignore user's voice preferences and always use the first voice, set the following var to true - // This is for testing only; not recommended for production - // unless the voice select field is also removed from the Prefs dialog - var useFirstVoice = false; - - if (!this.descVoices) { - // voices array failed to load the first time. Try again - this.getBrowserVoices(); - } - - if (context === 'sample') { - // get settings from form - voiceName = $('#' + this.mediaId + '_prefDescVoice').val(); - pitch = $('#' + this.mediaId + '_prefDescPitch').val(); - rate = $('#' + this.mediaId + '_prefDescRate').val(); - volume = $('#' + this.mediaId + '_prefDescVolume').val(); - } - else { - // get settings from global prefs - voiceName = this.prefDescVoice; - pitch = this.prefDescPitch; - rate = this.prefDescRate; - volume = this.prefDescVolume; - } - - // get the voice associated with the user's chosen voice name - if (this.descVoices) { - if (this.descVoices.length > 0) { - if (useFirstVoice) { - voice = this.descVoices[0]; - } - else if (voiceName) { - // get the voice that matches user's preferred voiceName - for (i = 0; i < this.descVoices.length; i++) { - if (this.descVoices[i].name == voiceName) { - voice = this.descVoices[i]; - break; - } - } - } - if (typeof voice === 'undefined') { - // no matching voice was found - // use the first voice in the array - voice = this.descVoices[0]; - } - - utterance = new SpeechSynthesisUtterance(); - utterance.voice = voice; - utterance.voiceURI = 'native'; - utterance.volume = volume; - utterance.rate = rate; - utterance.pitch = pitch; - utterance.text = text; - // TODO: Consider the best language for the utterance: - // language of the web page? (this.lang) - // language of the WebVTT description track? - // language of the user's chosen voice? - // If there's a mismatch between any of these, the description will likely be unintelligible - utterance.lang = this.lang; - utterance.onend = function(e) { - // do something after speaking - - if (context === 'description') { - if (thisObj.prefDescPause) { - if (thisObj.pausedForDescription && thisObj.exposeTextDescriptions) { - thisObj.playMedia(); - this.pausedForDescription = false; - } - } - } - }; - utterance.onerror = function(e) { - // handle error - - } - this.synth.speak(utterance); - } - } - }; - -})(jQuery); - -(function ($) { - - AblePlayer.prototype.getUserAgent = function() { - - // Whenever possible we avoid browser sniffing. Better to do feature detection. - // However, in case it's needed... - // this function defines a userAgent array that can be used to query for common browsers and OSs - // NOTE: This would be much simpler with jQuery.browser but that was removed from jQuery 1.9 - // http://api.jquery.com/jQuery.browser/ - this.userAgent = {}; - this.userAgent.browser = {}; - - // Test for common browsers - if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits); - this.userAgent.browser.name = 'Firefox'; - this.userAgent.browser.version = RegExp.$1; // capture x.x portion - } - else if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x (IE10 or lower) - this.userAgent.browser.name = 'Internet Explorer'; - this.userAgent.browser.version = RegExp.$1; - } - else if (/Trident.rv[ :](\d+\.\d+)/.test(navigator.userAgent)) { // test for IE11 or higher - this.userAgent.browser.name = 'Internet Explorer'; - this.userAgent.browser.version = RegExp.$1; - } - else if (/Edge[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { // test for MS Edge - this.userAgent.browser.name = 'Edge'; - this.userAgent.browser.version = RegExp.$1; - } - else if (/OPR\/(\d+\.\d+)/i.test(navigator.userAgent)) { // Opera 15 or over - this.userAgent.browser.name = 'Opera'; - this.userAgent.browser.version = RegExp.$1; - } - else if (/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)) { - this.userAgent.browser.name = 'Chrome'; - if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { - this.userAgent.browser.version = RegExp.$1; - } - } - else if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) { - this.userAgent.browser.name = 'Safari'; - if (/Version[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { - this.userAgent.browser.version = RegExp.$1; - } - } - else { - this.userAgent.browser.name = 'Unknown'; - this.userAgent.browser.version = 'Unknown'; - } - - // Now test for common operating systems - if (window.navigator.userAgent.indexOf("Windows NT 6.2") != -1) { - this.userAgent.os = "Windows 8"; - } - else if (window.navigator.userAgent.indexOf("Windows NT 6.1") != -1) { - this.userAgent.os = "Windows 7"; - } - else if (window.navigator.userAgent.indexOf("Windows NT 6.0") != -1) { - this.userAgent.os = "Windows Vista"; - } - else if (window.navigator.userAgent.indexOf("Windows NT 5.1") != -1) { - this.userAgent.os = "Windows XP"; - } - else if (window.navigator.userAgent.indexOf("Windows NT 5.0") != -1) { - this.userAgent.os = "Windows 2000"; - } - else if (window.navigator.userAgent.indexOf("Mac")!=-1) { - this.userAgent.os = "Mac/iOS"; - } - else if (window.navigator.userAgent.indexOf("X11")!=-1) { - this.userAgent.os = "UNIX"; - } - else if (window.navigator.userAgent.indexOf("Linux")!=-1) { - this.userAgent.os = "Linux"; - } - if (this.debug) { - - - - - - } - }; - - AblePlayer.prototype.isUserAgent = function(which) { - - var userAgent = navigator.userAgent.toLowerCase(); - if (this.debug) { - - } - if (userAgent.indexOf(which.toLowerCase()) !== -1) { - return true; - } - else { - return false; - } - }; - - AblePlayer.prototype.isIOS = function(version) { - - // return true if this is IOS - // if version is provided check for a particular version - - var userAgent, iOS; - - userAgent = navigator.userAgent.toLowerCase(); - iOS = /ipad\|iphone\|ipod/.exec(userAgent); - if (iOS) { - if (typeof version !== 'undefined') { - if (userAgent.indexOf('os ' + version) !== -1) { - // this is the target version of iOS - return true; - } - else { - return false; - } - } - else { - // no version was specified - return true; - } - } - else { - // this is not IOS - return false; - } - }; - - AblePlayer.prototype.browserSupportsVolume = function() { - - // ideally we could test for volume support - // However, that doesn't seem to be reliable - // http://stackoverflow.com/questions/12301435/html5-video-tag-volume-support - - var userAgent, noVolume; - - userAgent = navigator.userAgent.toLowerCase(); - noVolume = /ipad\|iphone\|ipod\|android\|blackberry\|windows ce\|windows phone\|webos\|playbook/.exec(userAgent); - if (noVolume) { - if (noVolume[0] === 'android' && /firefox/.test(userAgent)) { - // Firefox on android DOES support changing the volume: - return true; - } - else { - return false; - } - } - else { - // as far as we know, this userAgent supports volume control - return true; - } - }; - - AblePlayer.prototype.nativeFullscreenSupported = function () { - - return document.fullscreenEnabled \|\| - document.webkitFullscreenEnabled \|\| - document.mozFullScreenEnabled \|\| - document.msFullscreenEnabled; - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.seekTo = function (newTime) { - - var thisObj = this; - - // define variables to be used for analytics - // e.g., to measure the extent to which users seek back and forward - this.seekFromTime = this.media.currentTime; - this.seekToTime = newTime; - - this.seeking = true; - this.liveUpdatePending = true; - if (this.player === 'html5') { - var seekable; - - this.startTime = newTime; - // Check HTML5 media "seekable" property to be sure media is seekable to startTime - seekable = this.media.seekable; - if (seekable.length > 0 && this.startTime >= seekable.start(0) && this.startTime <= seekable.end(0)) { - // ok to seek to startTime - // canplaythrough will be triggered when seeking is complete - // this.seeking will be set to false at that point - this.media.currentTime = this.startTime; - if (this.hasSignLanguage && this.signVideo) { - // keep sign languge video in sync - this.signVideo.currentTime = this.startTime; - } - } - } - else if (this.player === 'youtube') { - this.youTubePlayer.seekTo(newTime,true); - if (newTime > 0) { - if (typeof this.$posterImg !== 'undefined') { - this.$posterImg.hide(); - } - } - } - else if (this.player === 'vimeo') { - this.vimeoPlayer.setCurrentTime(newTime).then(function() { - // seek finished. - // successful completion also fires a 'seeked' event (see event.js) - thisObj.elapsed = newTime; - thisObj.refreshControls('timeline'); - }) - } - this.refreshControls('timeline'); - }; - - AblePlayer.prototype.getMediaTimes = function (duration, elapsed) { - - // Returns an array with keys 'duration' and 'elapsed' - // Vars passed to this function come courtesy of select Vimeo events - // Use those if they're available. - // Otherwise, will need to call the relevant media API - // This function should only be called from onMediaUpdateTime() - // If duration and elapsed are needed other times, use this.duration and this.elapsed - - // both values are expressed in seconds, and all player APIs are similar: - // they return a value that is rounded to the nearest second before playback begins, - // then to the nearest thousandth of a second after playback begins - // With HTML5 media API, some browsers are more precise (e.g., Firefox rounds to 6 decimal points) - // but inconsistent (values with 9 decimal points have been sporadically observed in Safari) - // For standardization, values are rounded to 6 decimal points before they're returned - - var deferred, promise, thisObj, mediaTimes; - mediaTimes = {}; - - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - if (typeof duration !== 'undefined' && typeof elapsed !== 'undefined') { - mediaTimes['duration'] = duration; - mediaTimes['elapsed'] = elapsed; - deferred.resolve(mediaTimes); - } - else { - this.getDuration().then(function(duration) { - mediaTimes['duration'] = thisObj.roundDown(duration,6); - thisObj.getElapsed().then(function(elapsed) { - mediaTimes['elapsed'] = thisObj.roundDown(elapsed,6); - deferred.resolve(mediaTimes); - }); - }); - } - return promise; - }; - - AblePlayer.prototype.getDuration = function () { - - // returns duration of the current media, expressed in seconds - // function is called by getMediaTimes, and return value is sanitized there - - var deferred, promise, thisObj; - - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - - if (this.player === 'vimeo') { - if (this.vimeoPlayer) { - this.vimeoPlayer.getDuration().then(function(duration) { - if (duration === undefined \|\| isNaN(duration) \|\| duration === -1) { - deferred.resolve(0); - } - else { - deferred.resolve(duration); - } - }); - } - else { // vimeoPlayer hasn't been initialized yet. - deferred.resolve(0); - } - } - else { - var duration; - if (this.player === 'html5') { - duration = this.media.duration; - } - else if (this.player === 'youtube') { - if (this.youTubePlayer) { - duration = this.youTubePlayer.getDuration(); - } - else { // the YouTube player hasn't initialized yet - duration = 0; - } - } - if (duration === undefined \|\| isNaN(duration) \|\| duration === -1) { - deferred.resolve(0); - } - else { - deferred.resolve(duration); - } - } - return promise; - }; - - AblePlayer.prototype.getElapsed = function () { - - // returns elapsed time of the current media, expressed in seconds - // function is called by getMediaTimes, and return value is sanitized there - - var deferred, promise, thisObj; - - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - - if (this.player === 'vimeo') { - if (this.vimeoPlayer) { - this.vimeoPlayer.getCurrentTime().then(function(elapsed) { - if (elapsed === undefined \|\| isNaN(elapsed) \|\| elapsed === -1) { - deferred.resolve(0); - } - else { - deferred.resolve(elapsed); - } - }); - } - else { // vimeoPlayer hasn't been initialized yet. - deferred.resolve(0); - } - } - else { - var elapsed; - if (this.player === 'html5') { - elapsed = this.media.currentTime; - } - else if (this.player === 'youtube') { - if (this.youTubePlayer) { - elapsed = this.youTubePlayer.getCurrentTime(); - } - else { // the YouTube player hasn't initialized yet - elapsed = 0; - } - } - if (elapsed === undefined \|\| isNaN(elapsed) \|\| elapsed === -1) { - deferred.resolve(0); - } - else { - deferred.resolve(elapsed); - } - } - return promise; - }; - - AblePlayer.prototype.getPlayerState = function () { - - // Returns one of the following states: - // 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. - // 'ended' - Finished playing. - // 'paused' - Not playing, but not stopped or ended. - // 'buffering' - Momentarily paused to load, but will resume once data is loaded. - // 'playing' - Currently playing. - - // Commented out the following in 3.2.1 - not sure of its intended purpose - // It can be useful to know player state even when swapping src - // and the overhead is seemingly minimal - /* - if (this.swappingSrc) { - return; - } - / - var deferred, promise, thisObj, duration, elapsed; - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - - if (this.player === 'html5') { - if (this.media.ended) { - deferred.resolve('ended'); - } - else if (this.media.paused) { - deferred.resolve('paused'); - } - else if (this.media.readyState !== 4) { - deferred.resolve('buffering'); - } - else { - deferred.resolve('playing'); - } - } - else if (this.player === 'youtube' && this.youTubePlayer) { - var state = this.youTubePlayer.getPlayerState(); - if (state === -1 \|\| state === 5) { - deferred.resolve('stopped'); - } - else if (state === 0) { - deferred.resolve('ended'); - } - else if (state === 1) { - deferred.resolve('playing'); - } - else if (state === 2) { - deferred.resolve('paused'); - } - else if (state === 3) { - deferred.resolve('buffering'); - } - } - else if (this.player === 'vimeo' && this.vimeoPlayer) { - // curiously, Vimeo's API has no getPlaying(), getBuffering(), or getState() methods - // so maybe if it's neither paused nor ended, it must be playing??? - this.vimeoPlayer.getPaused().then(function(paused) { - if (paused) { - deferred.resolve('paused'); - } - else { - thisObj.vimeoPlayer.getEnded().then(function(ended) { - if (ended) { - deferred.resolve('ended'); - } - else { - deferred.resolve('playing'); - } - }); - } - }); - } - return promise; - }; - - AblePlayer.prototype.isPlaybackRateSupported = function () { - - if (this.player === 'html5') { - if (this.media.playbackRate) { - return true; - } - else { - return false; - } - } - else if (this.player === 'youtube') { - // Youtube supports varying playback rates per video. Only expose controls if more than one playback rate is available. - if (this.youTubePlayer.getAvailablePlaybackRates().length > 1) { - return true; - } - else { - return false; - } - } - else if (this.player === 'vimeo') { - // since this takes longer to determine, it was set previously in initVimeoPlayer() - return this.vimeoSupportsPlaybackRateChange; - } - }; - - AblePlayer.prototype.setPlaybackRate = function (rate) { - - rate = Math.max(0.5, rate); - if (this.player === 'html5') { - this.media.playbackRate = rate; - } - else if (this.player === 'youtube') { - this.youTubePlayer.setPlaybackRate(rate); - } - else if (this.player === 'vimeo') { - this.vimeoPlayer.setPlaybackRate(rate); - } - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.playbackRate = rate; - } - this.playbackRate = rate; - this.$speed.text(this.tt.speed + ': ' + rate.toFixed(2).toString() + 'x'); - }; - - AblePlayer.prototype.getPlaybackRate = function () { - - if (this.player === 'html5') { - return this.media.playbackRate; - } - else if (this.player === 'youtube') { - return this.youTubePlayer.getPlaybackRate(); - } - }; - - AblePlayer.prototype.isPaused = function () { - - // Note there are three player states that count as paused in this sense, - // and one of them is named 'paused'. - // A better name would be 'isCurrentlyNotPlayingOrBuffering' - - var state; - - if (this.player === 'vimeo') { - // just rely on value of this.playing - if (this.playing) { - return false; - } - else { - return true; - } - } - else { - this.getPlayerState().then(function(state) { - // if any of the following is true, consider the media 'paused' - return state === 'paused' \|\| state === 'stopped' \|\| state === 'ended'; - }); - } - }; - - AblePlayer.prototype.pauseMedia = function () { - - var thisObj = this; - - if (this.player === 'html5') { - this.media.pause(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.pause(true); - } - } - else if (this.player === 'youtube') { - this.youTubePlayer.pauseVideo(); - } - else if (this.player === 'vimeo') { - this.vimeoPlayer.pause(); - } - }; - - AblePlayer.prototype.playMedia = function () { - - var thisObj = this; - - if (this.player === 'html5') { - this.media.play(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.play(true); - } - } - else if (this.player === 'youtube') { - this.youTubePlayer.playVideo(); - if (typeof this.$posterImg !== 'undefined') { - this.$posterImg.hide(); - } - this.stoppingYouTube = false; - } - else if (this.player === 'vimeo') { - this.vimeoPlayer.play(); - } - this.startedPlaying = true; - if (this.hideControls) { - // wait briefly after playback begins, then hide controls - this.hidingControls = true; - this.invokeHideControlsTimeout(); - } - }; - - AblePlayer.prototype.fadeControls = function(direction) { - - // Visibly fade controls without hiding them from screen reader users - - // direction is either 'out' or 'in' - - // TODO: This still needs work. - // After the player fades, it's replaced by an empty space - // Would be better if the video and captions expanded to fill the void - // Attempted to fade out to 0 opacity, then move the playerDiv offscreen - // and expand the mediaContainer to fill the vacated space - // However, my attempts to do this have been choppy and buggy - // Code is preserved below and commented out - - var thisObj, mediaHeight, playerHeight, newMediaHeight; - var thisObj = this; - - if (direction == 'out') { - // get the original height of two key components: - mediaHeight = this.$mediaContainer.height(); - playerHeight = this.$playerDiv.height(); - newMediaHeight = mediaHeight + playerHeight; - - // fade slowly to transparency - this.$playerDiv.fadeTo(2000,0,function() { - / - // when finished, position playerDiv offscreen - // thisObj.$playerDiv.addClass('able-offscreen'); - // Expand the height of mediaContainer to fill the void (needs work) - thisObj.$mediaContainer.animate({ - height: newMediaHeight - },500); - / - }); - } - else if (direction == 'in') { - // restore vidcapContainer to its original height (needs work) - // this.$mediaContainer.removeAttr('style'); - // fade relatively quickly back to its original position with full opacity - // this.$playerDiv.removeClass('able-offscreen').fadeTo(100,1); - this.$playerDiv.fadeTo(100,1); - } - }; - - AblePlayer.prototype.invokeHideControlsTimeout = function () { - - // invoke timeout for waiting a few seconds after a mouse move or key down - // before hiding controls again - var thisObj = this; - this.hideControlsTimeout = window.setTimeout(function() { - if (typeof thisObj.playing !== 'undefined' && thisObj.playing === true && thisObj.hideControls) { - thisObj.fadeControls('out'); - thisObj.controlsHidden = true; - } - },5000); - this.hideControlsTimeoutStatus = 'active'; - }; - - AblePlayer.prototype.refreshControls = function(context, duration, elapsed) { - - // context is one of the following: - // 'init' - initial build (or subsequent change that requires full rebuild) - // 'timeline' - a change may effect time-related controls - // 'captions' - a change may effect caption-related controls - // 'descriptions' - a change may effect description-related controls - // 'transcript' - a change may effect the transcript window or button - // 'fullscreen' - a change has been triggered by full screen toggle - // 'playpause' - a change triggered by either a 'play' or 'pause' event - - // NOTE: context is not currently supported. - // The steps in this function have too many complex interdependencies - // The gains in efficiency are offset by the possibility of introducing bugs - // For now, executing everything - context = 'init'; - - // duration and elapsed are passed from callback functions of Vimeo API events - // duration is expressed as sss.xxx - // elapsed is expressed as sss.xxx - - var thisObj, duration, elapsed, lastChapterIndex, displayElapsed, - updateLive, textByState, timestamp, widthUsed, - leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount, - buffered, newTop, statusBarHeight, speedHeight, statusBarWidthBreakpoint, - newSvgData; - - thisObj = this; - if (this.swappingSrc) { - if (this.playing) { - // wait until new source has loaded before refreshing controls - // can't wait if player is NOT playing because some critical events - // won't fire until playback of new media starts - return; - } - } - - if (context === 'timeline' \|\| context === 'init') { - // all timeline-related functionality requires both duration and elapsed - if (typeof this.duration === 'undefined') { - // wait until duration is known before proceeding with refresh - return; - } - if (this.useChapterTimes) { - this.chapterDuration = this.getChapterDuration(); - this.chapterElapsed = this.getChapterElapsed(); - } - - if (this.useFixedSeekInterval === false && this.seekIntervalCalculated === false && this.duration > 0) { - // couldn't calculate seekInterval previously; try again. - this.setSeekInterval(); - } - - if (this.seekBar) { - if (this.useChapterTimes) { - lastChapterIndex = this.selectedChapters.cues.length-1; - if (this.selectedChapters.cues[lastChapterIndex] == this.currentChapter) { - // this is the last chapter - if (this.currentChapter.end !== this.duration) { - // chapter ends before or after video ends - // need to adjust seekbar duration to match video end - this.seekBar.setDuration(this.duration - this.currentChapter.start); - } - else { - this.seekBar.setDuration(this.chapterDuration); - } - } - else { - // this is not the last chapter - this.seekBar.setDuration(this.chapterDuration); - } - } - else { - if (!(this.duration === undefined \|\| isNaN(this.duration) \|\| this.duration === -1)) { - this.seekBar.setDuration(this.duration); - } - } - if (!(this.seekBar.tracking)) { - // Only update the aria live region if we have an update pending - // (from a seek button control) or if the seekBar has focus. - // We use document.activeElement instead of $(':focus') due to a strange bug: - // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. - updateLive = this.liveUpdatePending \|\| this.seekBar.seekHead.is($(document.activeElement)); - this.liveUpdatePending = false; - if (this.useChapterTimes) { - this.seekBar.setPosition(this.chapterElapsed, updateLive); - } - else { - this.seekBar.setPosition(this.elapsed, updateLive); - } - } - - // When seeking, display the seek bar time instead of the actual elapsed time. - if (this.seekBar.tracking) { - displayElapsed = this.seekBar.lastTrackPosition; - } - else { - if (this.useChapterTimes) { - displayElapsed = this.chapterElapsed; - } - else { - displayElapsed = this.elapsed; - } - } - } - // update elapsed & duration - if (typeof this.$durationContainer !== 'undefined') { - if (this.useChapterTimes) { - this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.chapterDuration)); - } - else { - this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.duration)); - } - } - if (typeof this.$elapsedTimeContainer !== 'undefined') { - this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(displayElapsed)); - } - - if (this.skin === 'legacy') { - // Update seekbar width. - // To do this, we need to calculate the width of all buttons surrounding it. - if (this.seekBar) { - widthUsed = 0; - leftControls = this.seekBar.wrapperDiv.parent().prev('div.able-left-controls'); - rightControls = leftControls.next('div.able-right-controls'); - leftControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); // true = include margin - } - }); - rightControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); - } - }); - if (this.fullscreen) { - seekbarWidth = $(window).width() - widthUsed; - } - else { - seekbarWidth = this.$ableWrapper.width() - widthUsed; - } - // Sometimes some minor fluctuations based on browser weirdness, so set a threshold. - if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) { - this.seekBar.setWidth(seekbarWidth); - } - } - } - - // Update buffering progress. - // TODO: Currently only using the first HTML5 buffered interval, - // but this fails sometimes when buffering is split into two or more intervals. - if (this.player === 'html5') { - if (this.media.buffered.length > 0) { - buffered = this.media.buffered.end(0); - if (this.useChapterTimes) { - if (buffered > this.chapterDuration) { - buffered = this.chapterDuration; - } - if (this.seekBar) { - this.seekBar.setBuffered(buffered / this.chapterDuration); - } - } - else { - if (this.seekBar) { - if (!isNaN(buffered)) { - this.seekBar.setBuffered(buffered / duration); - } - } - } - } - } - else if (this.player === 'youtube') { - if (this.seekBar) { - this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); - } - } - else if (this.player === 'vimeo') { - // TODO: Add support for Vimeo buffering update - } - } // end if context == 'timeline' or 'init' - - if (context === 'descriptions' \|\| context == 'init'){ - - if (this.$descButton) { - if (this.descOn) { - this.$descButton.removeClass('buttonOff').attr('aria-label',this.tt.turnOffDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOffDescriptions); - } - else { - this.$descButton.addClass('buttonOff').attr('aria-label',this.tt.turnOnDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOnDescriptions); - } - } - } - - if (context === 'captions' \|\| context == 'init'){ - - if (this.$ccButton) { - - captionsCount = this.captions.length; - - // Button has a different title depending on the number of captions. - // If only one caption track, this is "Show captions" and "Hide captions" - // Otherwise, it is just always "Captions" - if (!this.captionsOn) { - this.$ccButton.addClass('buttonOff'); - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.showCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.showCaptions); - } - } - else { - this.$ccButton.removeClass('buttonOff'); - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.hideCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.hideCaptions); - } - } - - if (captionsCount > 1) { - this.$ccButton.attr({ - 'aria-label': this.tt.captions, - 'aria-haspopup': 'true', - 'aria-controls': this.mediaId + '-captions-menu' - }); - this.$ccButton.find('span.able-clipped').text(this.tt.captions); - } - } - } - - if (context === 'fullscreen' \|\| context == 'init'){ - - if (this.$fullscreenButton) { - if (!this.fullscreen) { - this.$fullscreenButton.attr('aria-label', this.tt.enterFullScreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-collapse').addClass('icon-fullscreen-expand'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullScreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-expand'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullScreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenExpandButtonImg); - } - } - else { - this.$fullscreenButton.attr('aria-label',this.tt.exitFullScreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-expand').addClass('icon-fullscreen-collapse'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullScreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-collapse'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullScreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenCollapseButtonImg); - } - } - } - } - if (context === 'playpause' \|\| context == 'init'){ - if (typeof this.$bigPlayButton !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Choose show/hide for big play button and adjust position. - if (this.paused && !this.seekBar.tracking) { - if (!this.hideBigPlayButton) { - this.$bigPlayButton.show(); - } - if (this.fullscreen) { - this.$bigPlayButton.width($(window).width()); - this.$bigPlayButton.height($(window).height()); - } - else { - this.$bigPlayButton.width(this.$mediaContainer.width()); - this.$bigPlayButton.height(this.$mediaContainer.height()); - } - } - else { - this.$bigPlayButton.hide(); - } - } - } - - if (context === 'transcript' \|\| context == 'init'){ - - if (this.transcriptType) { - // Sync checkbox and autoScrollTranscript with user preference - if (this.prefAutoScrollTranscript === 1) { - this.autoScrollTranscript = true; - this.$autoScrollTranscriptCheckbox.prop('checked',true); - } - else { - this.autoScrollTranscript = false; - this.$autoScrollTranscriptCheckbox.prop('checked',false); - } - - // If transcript locked, scroll transcript to current highlight location. - if (this.autoScrollTranscript && this.currentHighlight) { - newTop = Math.floor(this.$transcriptDiv.scrollTop() + - $(this.currentHighlight).position().top - - (this.$transcriptDiv.height() / 2) + - ($(this.currentHighlight).height() / 2)); - if (newTop !== Math.floor(this.$transcriptDiv.scrollTop())) { - // Set a flag to ignore the coming scroll event. - // there's no other way I know of to differentiate programmatic and user-initiated scroll events. - this.scrollingTranscript = true; - // only scroll once after moving a highlight - if (this.movingHighlight) { - this.$transcriptDiv.scrollTop(newTop); - this.movingHighlight = false; - } - } - } - } - } - - if (context === 'init') { - - if (this.$chaptersButton) { - this.$chaptersButton.attr({ - 'aria-label': this.tt.chapters, - 'aria-haspopup': 'true', - 'aria-controls': this.mediaId + '-chapters-menu' - }); - } - } - - if (context === 'timeline' \|\| context === 'playpause' \|\| context === 'init') { - - // update status - textByState = { - 'stopped': this.tt.statusStopped, - 'paused': this.tt.statusPaused, - 'playing': this.tt.statusPlaying, - 'buffering': this.tt.statusBuffering, - 'ended': this.tt.statusEnd - }; - - if (this.stoppingYouTube) { - // stoppingYouTube is true temporarily while video is paused and seeking to 0 - // See notes in handleRestart() - // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) - if (this.$status.text() !== this.tt.statusStopped) { - this.$status.text(this.tt.statusStopped); - } - if (this.$playpauseButton.find('span').first().hasClass('icon-pause')) { - if (this.iconType === 'font') { - this.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('play'); - this.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - this.$playpauseButton.find('path').attr('d',newSvgData[1]); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else { - this.$playpauseButton.find('img').attr('src',this.playButtonImg); - } - } - } - else { - if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Update the text only if it's changed since it has role="alert"; - // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. - this.getPlayerState().then(function(currentState) { - if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { - // Debounce updates; only update after status has stayed steadily different for a while - // "A while" is defined differently depending on context - if (thisObj.swappingSrc) { - // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), - // so set a longer wait time before writing a status message - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) - } - } - else { - // for all other contexts (e.g., users clicks Play/Pause) - // user should receive more rapid feedback - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 250; // in ms - } - } - timestamp = (new Date()).getTime(); - if (!thisObj.statusDebounceStart) { - thisObj.statusDebounceStart = timestamp; - // Call refreshControls() again after allotted time has passed - thisObj.debouncingStatus = true; - thisObj.statusTimeout = setTimeout(function () { - thisObj.debouncingStatus = false; - thisObj.refreshControls(context); - }, thisObj.statusMessageThreshold); - } - else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { - thisObj.$status.text(textByState[currentState]); - thisObj.statusDebounceStart = null; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - } - else { - thisObj.statusDebounceStart = null; - thisObj.debouncingStatus = false; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - // Don't change play/pause button display while using the seek bar (or if YouTube stopped) - if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { - if (currentState === 'paused' \|\| currentState === 'stopped' \|\| currentState === 'ended') { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('play'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.playButtonImg); - } - } - else { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-play').addClass('icon-pause'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('pause'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.pauseButtonImg); - } - } - } - }); - } - } - } - - // Show/hide status bar content conditionally - if (!this.fullscreen) { - statusBarWidthBreakpoint = 300; - statusBarHeight = this.$statusBarDiv.height(); - speedHeight = this.$statusBarDiv.find('span.able-speed').height(); - if (speedHeight > (statusBarHeight + 5)) { - // speed bar is wrapping (happens often in German player) - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { - // Player is too small for a speed span - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - } - } - } - - }; - - AblePlayer.prototype.getHiddenWidth = function($el) { - - // jQuery returns for width() if element is hidden - // this function is a workaround - - // save a reference to a cloned element that can be measured - var $hiddenElement = $el.clone().appendTo('body'); - - // calculate the width of the clone - var width = $hiddenElement.outerWidth(); - - // remove the clone from the DOM - $hiddenElement.remove(); - - return width; - }; - - AblePlayer.prototype.handlePlay = function(e) { - - if (this.paused) { - this.playMedia(); - } - else { - this.pauseMedia(); - } - }; - - AblePlayer.prototype.handleRestart = function() { - - this.seekTo(0); - }; - - AblePlayer.prototype.handlePrevTrack = function() { - - if (this.playlistIndex === 0) { - // currently on the first track - // wrap to bottom and play the last track - this.playlistIndex = this.$playlist.length - 1; - } - else { - this.playlistIndex--; - } - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings - this.cuePlaylistItem(this.playlistIndex); - }; - - AblePlayer.prototype.handleNextTrack = function() { - - if (this.playlistIndex === this.$playlist.length - 1) { - // currently on the last track - // wrap to top and play the forst track - this.playlistIndex = 0; - } - else { - this.playlistIndex++; - } - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings - this.cuePlaylistItem(this.playlistIndex); - }; - - AblePlayer.prototype.handleRewind = function() { - - var targetTime; - - targetTime = this.elapsed - this.seekInterval; - if (this.useChapterTimes) { - if (targetTime < this.currentChapter.start) { - targetTime = this.currentChapter.start; - } - } - else { - if (targetTime < 0) { - targetTime = 0; - } - } - this.seekTo(targetTime); - }; - - AblePlayer.prototype.handleFastForward = function() { - - var targetTime, lastChapterIndex; - - lastChapterIndex = this.chapters.length-1; - targetTime = this.elapsed + this.seekInterval; - if (this.useChapterTimes) { - if (this.chapters[lastChapterIndex] == this.currentChapter) { - // this is the last chapter - if (targetTime > this.duration \|\| targetTime > this.currentChapter.end) { - // targetTime would exceed the end of the video (or chapter) - // scrub to end of whichever is earliest - targetTime = Math.min(this.duration, this.currentChapter.end); - } - else if (this.duration % targetTime < this.seekInterval) { - // nothing left but pocket change after seeking to targetTime - // go ahead and seek to end of video (or chapter), whichever is earliest - targetTime = Math.min(this.duration, this.currentChapter.end); - } - } - else { - // this is not the last chapter - if (targetTime > this.currentChapter.end) { - // targetTime would exceed the end of the chapter - // scrub exactly to end of chapter - targetTime = this.currentChapter.end; - } - } - } - else { - // not using chapter times - if (targetTime > this.duration) { - targetTime = this.duration; - } - } - this.seekTo(targetTime); - }; - - AblePlayer.prototype.handleRateIncrease = function() { - this.changeRate(1); - }; - - AblePlayer.prototype.handleRateDecrease = function() { - this.changeRate(-1); - }; - - // Increases or decreases playback rate, where dir is 1 or -1 indication direction. - AblePlayer.prototype.changeRate = function (dir) { - - var rates, currentRate, index, newRate, vimeoMin, vimeoMax; - - if (this.player === 'html5') { - this.setPlaybackRate(this.getPlaybackRate() + (0.25 dir)); - } - else if (this.player === 'youtube') { - rates = this.youTubePlayer.getAvailablePlaybackRates(); - currentRate = this.getPlaybackRate(); - index = rates.indexOf(currentRate); - if (index === -1) { - - } - else { - index += dir; - // Can only increase or decrease rate if there's another rate available. - if (index < rates.length && index >= 0) { - this.setPlaybackRate(rates[index]); - } - } - } - else if (this.player === 'vimeo') { - // range is 0.5 to 2 - // increase/decrease in inrements of 0.5 - vimeoMin = 0.5; - vimeoMax = 2; - if (dir === 1) { - if (this.vimeoPlaybackRate + 0.5 <= vimeoMax) { - newRate = this.vimeoPlaybackRate + 0.5; - } - else { - newRate = vimeoMax; - } - } - else if (dir === -1) { - if (this.vimeoPlaybackRate - 0.5 >= vimeoMin) { - newRate = this.vimeoPlaybackRate - 0.5; - } - else { - newRate = vimeoMin; - } - } - this.setPlaybackRate(newRate); - } - }; - - AblePlayer.prototype.handleCaptionToggle = function() { - - var captions; - if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it - this.hidingPopup = false; - return false; - } - if (this.captions.length) { - captions = this.captions; - } - else { - captions = []; - } - if (captions.length === 1) { - // When there's only one set of captions, just do an on/off toggle. - if (this.captionsOn === true) { - // turn them off - this.captionsOn = false; - this.prefCaptions = 0; - this.updateCookie('prefCaptions'); - if (this.usingYouTubeCaptions) { - this.youTubePlayer.unloadModule('captions'); - } - else { - this.$captionsWrapper.hide(); - } - } - else { - // captions are off. Turn them on. - this.captionsOn = true; - this.prefCaptions = 1; - this.updateCookie('prefCaptions'); - if (this.usingYouTubeCaptions) { - this.youTubePlayer.loadModule('captions'); - } - else { - this.$captionsWrapper.show(); - } - for (var i=0; i<captions.length; i++) { - if (captions[i].def === true) { // this is the default language - this.selectedCaptions = captions[i]; - } - } - this.selectedCaptions = this.captions[0]; - if (this.descriptions.length >= 0) { - this.selectedDescriptions = this.descriptions[0]; - } - } - this.refreshControls('captions'); - } - else { - // there is more than one caption track. - // clicking on a track is handled via caption.js > getCaptionClickFunction() - if (this.captionsPopup && this.captionsPopup.is(':visible')) { - this.captionsPopup.hide(); - this.hidingPopup = false; - this.$ccButton.removeAttr('aria-expanded').focus(); - } - else { - this.closePopups(); - if (this.captionsPopup) { - this.captionsPopup.show(); - this.$ccButton.attr('aria-expanded','true'); - this.captionsPopup.css('top', this.$ccButton.position().top - this.captionsPopup.outerHeight()); - this.captionsPopup.css('left', this.$ccButton.position().left) - // Place focus on the first button (even if another button is checked) - this.captionsPopup.find('li').removeClass('able-focus'); - this.captionsPopup.find('li').first().focus().addClass('able-focus'); - } - } - } - }; - - AblePlayer.prototype.handleChapters = function () { - if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it - this.hidingPopup = false; - return false; - } - if (this.chaptersPopup.is(':visible')) { - this.chaptersPopup.hide(); - this.hidingPopup = false; - this.$chaptersButton.removeAttr('aria-expanded').focus(); - } - else { - this.closePopups(); - this.chaptersPopup.show(); - this.$chaptersButton.attr('aria-expanded','true'); - this.chaptersPopup.css('top', this.$chaptersButton.position().top - this.chaptersPopup.outerHeight()); - this.chaptersPopup.css('left', this.$chaptersButton.position().left) - - // Highlight the current chapter, if any chapters are checked - // Otherwise, place focus on the first chapter - this.chaptersPopup.find('li').removeClass('able-focus'); - if (this.chaptersPopup.find('li[aria-checked="true"]').length) { - this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass('able-focus'); - } - else { - this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').focus(); - } - } - }; - - AblePlayer.prototype.handleDescriptionToggle = function() { - - this.descOn = !this.descOn; - this.prefDesc = + this.descOn; // convert boolean to integer - this.updateCookie('prefDesc'); - if (!this.$descDiv.is(':hidden')) { - this.$descDiv.hide(); - } - this.refreshingDesc = true; - this.initDescription(); - this.refreshControls('descriptions'); - }; - - AblePlayer.prototype.handlePrefsClick = function(pref) { - - // NOTE: the prefs menu is positioned near the right edge of the player - // This assumes the Prefs button is also positioned in that vicinity - // (last or second-last button the right) - - // NOTE: If previously unable to fully populate the Description dialog - // because the Web Speech API failed to getVoices() - // now is a good time to try again - // so the Description dialog can be rebuilt before the user requests it - if (!this.descVoices) { - this.getBrowserVoices(); - if (this.descVoices) { - this.rebuildDescPrefsForm(); - } - } - - var thisObj, prefsButtonPosition, prefsMenuRight, prefsMenuLeft; - - thisObj = this; - - if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it - this.hidingPopup = false; - return false; - } - if (this.prefsPopup.is(':visible')) { - this.prefsPopup.hide(); - this.$prefsButton.removeAttr('aria-expanded'); - // restore each menu item to original hidden state - this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); - } - // wait briefly, then reset hidingPopup - setTimeout(function() { - thisObj.hidingPopup = false; - },100); - } - else { - this.closePopups(); - this.prefsPopup.show(); - this.$prefsButton.attr('aria-expanded','true'); - prefsButtonPosition = this.$prefsButton.position(); - prefsMenuRight = this.$ableDiv.width() - 5; - prefsMenuLeft = prefsMenuRight - this.prefsPopup.width(); - this.prefsPopup.css('top', prefsButtonPosition.top - this.prefsPopup.outerHeight()); - this.prefsPopup.css('left', prefsMenuLeft); - // remove prior focus and set focus on first item; also change tabindex from -1 to 0 - this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','0'); - this.prefsPopup.find('li').first().focus().addClass('able-focus'); - - } - }; - - AblePlayer.prototype.handleHelpClick = function() { - this.setFullscreen(false); - this.helpDialog.show(); - }; - - AblePlayer.prototype.handleTranscriptToggle = function () { - - var thisObj = this; - - if (this.$transcriptDiv.is(':visible')) { - this.$transcriptArea.hide(); - this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript); - this.prefTranscript = 0; - this.$transcriptButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms - // Setting timeout to 100ms is a virtual guarantee of proper functionality - setTimeout(function() { - thisObj.closingTranscript = false; - }, 100); - } - else { - this.positionDraggableWindow('transcript'); - this.$transcriptArea.show(); - // showing transcriptArea has a cascading effect of showing all content within transcriptArea - // need to re-hide the popup menu - this.$transcriptPopup.hide(); - this.$transcriptButton.removeClass('buttonOff').attr('aria-label',this.tt.hideTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.hideTranscript); - this.prefTranscript = 1; - // move focus to first focusable element (window options button) - this.focusNotClick = true; - this.$transcriptArea.find('button').first().focus(); - // wait briefly before resetting stopgap var - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefTranscript'); - }; - - AblePlayer.prototype.handleSignToggle = function () { - - var thisObj = this; - - if (this.$signWindow.is(':visible')) { - this.$signWindow.hide(); - this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign); - this.$signButton.find('span.able-clipped').text(this.tt.showSign); - this.prefSign = 0; - this.$signButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - setTimeout(function() { - thisObj.closingSign = false; - }, 100); - } - else { - this.positionDraggableWindow('sign'); - this.$signWindow.show(); - // showing signWindow has a cascading effect of showing all content within signWindow - // need to re-hide the popup menu - this.$signPopup.hide(); - this.$signButton.removeClass('buttonOff').attr('aria-label',this.tt.hideSign); - this.$signButton.find('span.able-clipped').text(this.tt.hideSign); - this.prefSign = 1; - this.focusNotClick = true; - this.$signWindow.find('button').first().focus(); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefSign'); - }; - - AblePlayer.prototype.isFullscreen = function () { - - // NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen, - // which is defined in setFullscreen() - // This function returns true if any element is fullscreen - // but doesn't tell us whether a particular element is in fullscreen - // (e.g., if there are multiple players on the page) - // The Boolean this.fullscreen is defined separately for each player instance - - if (this.nativeFullscreenSupported()) { - return (document.fullscreenElement \|\| - document.webkitFullscreenElement \|\| - document.webkitCurrentFullScreenElement \|\| - document.mozFullScreenElement \|\| - document.msFullscreenElement) ? true : false; - } - else { - return this.modalFullscreenActive ? true : false; - } - } - - AblePlayer.prototype.setFullscreen = function (fullscreen) { - - if (this.fullscreen == fullscreen) { - // replace isFullscreen() with a Boolean. see function for explanation - return; - } - var thisObj = this; - var $el = this.$ableWrapper; - var el = $el[0]; - - if (this.nativeFullscreenSupported()) { - // Note: many varying names for options for browser compatibility. - if (fullscreen) { - // Initialize fullscreen - - // But first, capture current settings so they can be restored later - this.preFullScreenWidth = this.$ableWrapper.width(); - this.preFullScreenHeight = this.$ableWrapper.height(); - if (el.requestFullscreen) { - el.requestFullscreen(); - } - else if (el.webkitRequestFullscreen) { - el.webkitRequestFullscreen(); - } - else if (el.mozRequestFullScreen) { - el.mozRequestFullScreen(); - } - else if (el.msRequestFullscreen) { - el.msRequestFullscreen(); - } - this.fullscreen = true; - } - else { - // Exit fullscreen - if (document.exitFullscreen) { - document.exitFullscreen(); - } - else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } - else if (document.webkitCancelFullScreen) { - document.webkitCancelFullScreen(); - } - else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - this.fullscreen = false; - } - // add event handlers for changes in full screen mode - // currently most changes are made in response to windowResize event - // However, that alone is not resulting in a properly restored player size in Opera Mac - // More on the Opera Mac bug: https://github.com/ableplayer/ableplayer/issues/162 - // this fullscreen event handler added specifically for Opera Mac, - // but includes event listeners for all browsers in case its functionality could be expanded - // Added functionality in 2.3.45 for handling YouTube return from fullscreen as well - $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(e) { - // NOTE: e.type = the specific event that fired (in case needing to control for browser-specific idiosyncrasies) - if (!thisObj.fullscreen) { - // user has just exited full screen - thisObj.restoringAfterFullScreen = true; - thisObj.resizePlayer(thisObj.preFullScreenWidth,thisObj.preFullScreenHeight); - } - else if (!thisObj.clickedFullscreenButton) { - // user triggered fullscreenchange without clicking (or pressing) fullscreen button - // this is only possible if they pressed Escape to exit fullscreen mode - thisObj.fullscreen = false; - thisObj.restoringAfterFullScreen = true; - thisObj.resizePlayer(thisObj.preFullScreenWidth,thisObj.preFullScreenHeight); - } - // NOTE: The fullscreenchange (or browser-equivalent) event is triggered twice - // when exiting fullscreen via the "Exit fullscreen" button (only once if using Escape) - // Not sure why, but consequently we need to be sure thisObj.clickedFullScreenButton - // continues to be true through both events - // Could use a counter variable to control that (reset to false after the 2nd trigger) - // However, since I don't know why it's happening, and whether it's 100% reliable - // resetting clickedFullScreenButton after a timeout seems to be better approach - setTimeout(function() { - thisObj.clickedFullscreenButton = false; - },1000); - }); - } - else { - // Non-native fullscreen support through modal dialog. - // Create dialog on first run through. - if (!this.fullscreenDialog) { - var $dialogDiv = $('<div>'); - // create a hidden alert, communicated to screen readers via aria-describedby - var $fsDialogAlert = $('<p>',{ - 'class': 'able-screenreader-alert' - }).text(this.tt.fullscreen); // In English: "Full screen"; TODO: Add alert text that is more descriptive - $dialogDiv.append($fsDialogAlert); - // now render this as a dialog - this.fullscreenDialog = new AccessibleDialog($dialogDiv, this.$fullscreenButton, 'dialog', 'Fullscreen video player', $fsDialogAlert, this.tt.exitFullScreen, '100%', true, function () { thisObj.handleFullscreenToggle() }); - $('body').append($dialogDiv); - } - - // Track whether paused/playing before moving element; moving the element can stop playback. - var wasPaused = this.paused; - - if (fullscreen) { - this.modalFullscreenActive = true; - this.fullscreenDialog.show(); - - // Move player element into fullscreen dialog, then show. - // Put a placeholder element where player was. - this.$modalFullscreenPlaceholder = $('<div class="placeholder">'); - this.$modalFullscreenPlaceholder.insertAfter($el); - $el.appendTo(this.fullscreenDialog.modal); - - // Column left css is 50% by default; set to 100% for full screen. - if ($el === this.$ableColumnLeft) { - $el.width('100%'); - } - var newHeight = $(window).height() - this.$playerDiv.height(); - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - this.resizePlayer($(window).width(), newHeight); - } - else { - this.modalFullscreenActive = false; - if ($el === this.$ableColumnLeft) { - $el.width('50%'); - } - $el.insertAfter(this.$modalFullscreenPlaceholder); - this.$modalFullscreenPlaceholder.remove(); - this.fullscreenDialog.hide(); - this.resizePlayer(this.$ableWrapper.width(), this.$ableWrapper.height()); - } - - // Resume playback if moving stopped it. - if (!wasPaused && this.paused) { - this.playMedia(); - } - } - this.refreshControls('fullscreen'); - }; - - AblePlayer.prototype.handleFullscreenToggle = function () { - - var stillPaused = this.paused; - this.setFullscreen(!this.fullscreen); - if (stillPaused) { - this.pauseMedia(); // when toggling fullscreen and media is just paused, keep media paused. - } - else if (!stillPaused) { - this.playMedia(); // when toggling fullscreen and media is playing, continue playing. - } - // automatically hide controller in fullscreen mode - // then reset back to original setting after exiting fullscreen mode - if (this.fullscreen) { - this.hideControls = true; - if (this.playing) { - // go ahead and hide the controls - this.fadeControls('out'); - this.controlsHidden = true; - } - } - else { - // exit fullscreen mode - this.hideControls = this.hideControlsOriginal; - if (!this.hideControls) { // do not hide controls - if (this.controlsHidden) { - this.fadeControls('in'); - this.controlsHidden = false; - } - // if there's an active timeout to fade controls out again, clear it - if (this.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(this.hideControlsTimeout); - this.hideControlsTimeoutStatus = 'clear'; - } - } - } - }; - - AblePlayer.prototype.handleTranscriptLockToggle = function (val) { - - this.autoScrollTranscript = val; // val is boolean - this.prefAutoScrollTranscript = +val; // convert boolean to numeric 1 or 0 for cookie - this.updateCookie('prefAutoScrollTranscript'); - this.refreshControls('transcript'); - }; - - - AblePlayer.prototype.showTooltip = function($tooltip) { - - if (($tooltip).is(':animated')) { - $tooltip.stop(true,true).show().delay(4000).fadeOut(1000); - } - else { - $tooltip.stop().show().delay(4000).fadeOut(1000); - } - }; - - AblePlayer.prototype.showAlert = function( msg, location ) { - - // location is either of the following: - // 'main' (default) - // 'screenreader (visibly hidden) - // 'sign' (sign language window) - // 'transcript' (trasncript window) - var thisObj, $alertBox, $parentWindow, alertLeft, alertTop; - - thisObj = this; - - if (location === 'transcript') { - $alertBox = this.$transcriptAlert; - $parentWindow = this.$transcriptArea; - } - else if (location === 'sign') { - $alertBox = this.$signAlert; - $parentWindow = this.$signWindow; - } - else if (location === 'screenreader') { - $alertBox = this.$srAlertBox; - } - else { - $alertBox = this.$alertBox; - } - $alertBox.text(msg).show(); - if (location == 'transcript' \|\| location === 'sign') { - if ($parentWindow.width() > $alertBox.width()) { - alertLeft = $parentWindow.width() / 2 - $alertBox.width() / 2; - } - else { - // alert box is wider than its container. Position it far left and let it wrap - alertLeft = 10; - } - if (location === 'sign') { - // position alert in the lower third of the sign window (to avoid covering the signer) - alertTop = ($parentWindow.height() / 3) * 2; - } - else if (location === 'transcript') { - // position alert just beneath the toolbar to avoid getting lost among transcript text - alertTop = this.$transcriptToolbar.height() + 30; - } - $alertBox.css({ - top: alertTop + 'px', - left: alertLeft + 'px' - }); - } - else if (location !== 'screenreader') { - // The original formula incorporated offset() into the calculation - // but at some point this began resulting in an alert that's off-centered - // Changed in v2.2.17, but here's the original for reference in case needed: - // left: this.$playerDiv.offset().left + (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - $alertBox.css({ - left: (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - }); - } - if (location !== 'screenreader') { - setTimeout(function () { - $alertBox.fadeOut(300); - }, 3000); - } - }; - - AblePlayer.prototype.showedAlert = function (which) { - - // returns true if the target alert has already been shown - // useful for throttling alerts that only need to be shown once - // e.g., move alerts with instructions for dragging a window - - if (which === 'transcript') { - if (this.showedTranscriptAlert) { - return true; - } - else { - return false; - } - } - else if (which === 'sign') { - if (this.showedSignAlert) { - return true; - } - else { - return false; - } - } - return false; - } - - // Resizes all relevant player attributes. - AblePlayer.prototype.resizePlayer = function (width, height) { - - var captionSizeOkMin, captionSizeOkMax, captionSize, newCaptionSize, newLineHeight; - - if (this.fullscreen) { // replace isFullscreen() with a Boolean. see function for explanation - if (typeof this.$vidcapContainer !== 'undefined') { - this.$ableWrapper.css({ - 'width': width + 'px', - 'max-width': '' - }) - this.$vidcapContainer.css({ - 'height': height + 'px', - 'width': width - }); - this.$media.css({ - 'height': height + 'px', - 'width': width - }) - } - if (typeof this.$transcriptArea !== 'undefined') { - this.retrieveOffscreenWindow('transcript',width,height); - } - if (typeof this.$signWindow !== 'undefined') { - this.retrieveOffscreenWindow('sign',width,height); - } - } - else { - // player resized - if (this.restoringAfterFullScreen) { - // User has just exited fullscreen mode. Restore to previous settings - width = this.preFullScreenWidth; - height = this.preFullScreenHeight; - this.restoringAfterFullScreen = false; - this.$ableWrapper.css({ - 'max-width': width + 'px', - 'width': '' - }); - if (typeof this.$vidcapContainer !== 'undefined') { - this.$vidcapContainer.css({ - 'height': '', - 'width': '' - }); - } - this.$media.css({ - 'width': '100%', - 'height': 'auto' - }); - } - } - - // resize YouTube - if (this.player === 'youtube' && this.youTubePlayer) { - this.youTubePlayer.setSize(width, height); - } - - // Resize captions - if (typeof this.$captionsDiv !== 'undefined') { - - // Font-size is too small in full screen view & too large in small-width view - // The following vars define a somewhat arbitary zone outside of which - // caption size requires adjustment - captionSizeOkMin = 400; - captionSizeOkMax = 1000; - captionSize = parseInt(this.prefCaptionsSize,10); - - // TODO: Need a better formula so that it scales proportionally to viewport - if (width > captionSizeOkMax) { - newCaptionSize = captionSize * 1.5; - } - else if (width < captionSizeOkMin) { - newCaptionSize = captionSize / 1.5; - } - else { - newCaptionSize = captionSize; - } - newLineHeight = newCaptionSize + 25; - this.$captionsDiv.css('font-size',newCaptionSize + '%'); - this.$captionsWrapper.css('line-height',newLineHeight + '%'); - } - this.refreshControls('captions'); - }; - - AblePlayer.prototype.retrieveOffscreenWindow = function( which, width, height ) { - - // check to be sure popup windows ('transcript' or 'sign') are positioned on-screen - // (they sometimes disappear off-screen when entering fullscreen mode) - // if off-screen, recalculate so they are back on screen - - var window, windowPos, windowTop, windowLeft, windowRight, windowWidth, windowBottom, windowHeight; - - if (which == 'transcript') { - window = this.$transcriptArea; - } - else if (which == 'sign') { - window = this.$signWindow; - } - windowWidth = window.width(); - windowHeight = window.height(); - windowPos = window.position(); - windowTop = windowPos.top; - windowLeft = windowPos.left; - windowRight = windowLeft + windowWidth; - windowBottom = windowTop + windowHeight; - - if (windowTop < 0) { // off-screen to the top - windowTop = 10; - window.css('top',windowTop); - } - if (windowLeft < 0) { // off-screen to the left - windowLeft = 10; - window.css('left',windowLeft); - } - if (windowRight > width) { // off-screen to the right - windowLeft = (width - 20) - windowWidth; - window.css('left',windowLeft); - } - if (windowBottom > height) { // off-screen to the bottom - windowTop = (height - 10) - windowHeight; - window.css('top',windowTop); - } - }; - - AblePlayer.prototype.getHighestZIndex = function() { - - // returns the highest z-index on page - // used to ensure dialogs (or potentially other windows) are on top - - var max, $elements, z; - max = 0; - - // exclude the Able Player dialogs and windows - $elements = $('body ').not('.able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area'); - - $elements.each(function(){ - z = $(this).css('z-index'); - if (Number.isInteger(+z)) { // work only with integer values, not 'auto' - if (parseInt(z) > max) { - max = parseInt(z); - } - } - }); - return max; - }; - - AblePlayer.prototype.updateZIndex = function(which) { - - // update z-index of 'transcript' or 'sign', relative to each other - // direction is always 'up' (i.e., move window to top) - // windows come to the top when the user clicks on them - var defHighZ, defLowZ, highestZ, transcriptZ, signZ, newHighZ, newLowZ; - - // set the default z-indexes, as defined in ableplayer.css - defHighZ = 8000; // by default, assigned to the sign window - defLowZ = 7000; // by default, assigned to the transcript area - highestZ = this.getHighestZIndex(); // highest z-index on the page, excluding Able Player windows & modals - - // NOTE: Although highestZ is collected here, it currently isn't used. - // If something on the page has a higher z-index than the transcript or sign window, do we care? - // Excluding it here assumes "No". Our immediate concern is with the relationship between our own components. - // If we elevate our z-indexes so our content is on top, we run the risk of starting a z-index war. - - if (typeof this.$transcriptArea === 'undefined' \|\| typeof this.$signWindow === 'undefined' ) { - // at least one of the windows doesn't exist, so there's no conflict - // since z-index may have been stored to a cookie on another page, need to restore default - if (typeof this.$transcriptArea !== 'undefined') { - transcriptZ = parseInt(this.$transcriptArea.css('z-index')); - if (transcriptZ > defLowZ) { - // restore to the default - this.$transcriptArea.css('z-index',defLowZ); - } - } - else if (typeof this.$signWindow !== 'undefined') { - signZ = parseInt(this.$signWindow.css('z-index')); - if (signZ > defHighZ) { - // restore to the default - this.$signWindow.css('z-index',defHighZ); - } - } - return false; - } - - // both windows exist - - // get current values - transcriptZ = parseInt(this.$transcriptArea.css('z-index')); - signZ = parseInt(this.$signWindow.css('z-index')); - - if (transcriptZ === signZ) { - // the two windows are equal; restore defaults (the target window will be on top) - newHighZ = defHighZ; - newLowZ = defLowZ; - } - else if (transcriptZ > signZ) { - if (which === 'transcript') { - // transcript is already on top; nothing to do - return false; - } - else { - // swap z's - newHighZ = transcriptZ; - newLowZ = signZ; - } - } - else { // signZ is greater - if (which === 'sign') { - // sign is already on top; nothing to do - return false; - } - else { - newHighZ = signZ; - newLowZ = transcriptZ; - } - } - // now assign the new values - if (which === 'transcript') { - this.$transcriptArea.css('z-index',newHighZ); - this.$signWindow.css('z-index',newLowZ); - } - else if (which === 'sign') { - this.$signWindow.css('z-index',newHighZ); - this.$transcriptArea.css('z-index',newLowZ); - } - }; - - AblePlayer.prototype.syncTrackLanguages = function (source, language) { - - // this function is called when the player is built (source == 'init') - // and again when user changes the language of either 'captions' or 'transcript' - // It syncs the languages of chapters, descriptions, and metadata tracks - // NOTE: Caption and transcript languages are somewhat independent from one another - // If a user changes the caption language, the transcript follows - // However, if a user changes the transcript language, this only affects the transcript - // This was a group decision based on the belief that users may want a transcript - // that is in a different language than the captions - - var i, captions, descriptions, chapters, meta; - - // Captions - for (i = 0; i < this.captions.length; i++) { - if (this.captions[i].language === language) { - captions = this.captions[i]; - } - } - // Chapters - for (i = 0; i < this.chapters.length; i++) { - if (this.chapters[i].language === language) { - chapters = this.chapters[i]; - } - } - // Descriptions - for (i = 0; i < this.descriptions.length; i++) { - if (this.descriptions[i].language === language) { - descriptions = this.descriptions[i]; - } - } - // Metadata - for (i = 0; i < this.meta.length; i++) { - if (this.meta[i].language === language) { - meta = this.meta[i]; - } - } - // regardless of source... - this.transcriptLang = language; - - if (source === 'init' \|\| source === 'captions') { - this.captionLang = language; - this.selectedCaptions = captions; - this.selectedChapters = chapters; - this.selectedDescriptions = descriptions; - this.selectedMeta = meta; - this.transcriptCaptions = captions; - this.transcriptChapters = chapters; - this.transcriptDescriptions = descriptions; - this.updateChaptersList(); - // the following was commented out in Oct/Nov 2018. - // chapters popup is setup automatically when setupPopups() is called later with no param - // not sure why it was included here. - // this.setupPopups('chapters'); - } - else if (source === 'transcript') { - this.transcriptCaptions = captions; - this.transcriptChapters = chapters; - this.transcriptDescriptions = descriptions; - } - if (this.selectedDescriptions) { - if (this.selectedDescriptions.language !== this.lang) { - // updating description voice to match new description language - this.updateDescriptionVoice(); - } - } - this.updateTranscript(); - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.updateCaption = function (time) { - - if (!this.usingYouTubeCaptions && (typeof this.$captionsWrapper !== 'undefined')) { - if (this.captionsOn) { - this.$captionsWrapper.show(); - if (typeof time !== 'undefined') { - this.showCaptions(time); - } - } - else if (this.$captionsWrapper) { - this.$captionsWrapper.hide(); - this.prefCaptions = 0; - } - } - }; - - AblePlayer.prototype.updateCaptionsMenu = function (lang) { - - // uncheck all previous menu items - this.captionsPopup.find('li').attr('aria-checked','false'); - if (typeof lang === 'undefined') { - // check the last menu item (captions off) - this.captionsPopup.find('li').last().attr('aria-checked','true'); - } - else { - // check the newly selected lang - this.captionsPopup.find('li[lang=' + lang + ']').attr('aria-checked','true'); - } - }; - - AblePlayer.prototype.getCaptionClickFunction = function (track) { - - // Returns the function used when a caption is clicked in the captions menu. - // Not called if user clicks "Captions off". Instead, that triggers getCaptionOffFunction() - - var thisObj = this; - return function () { - thisObj.selectedCaptions = track; - thisObj.captionLang = track.language; - thisObj.currentCaption = -1; - if (thisObj.usingYouTubeCaptions) { - if (thisObj.captionsOn) { - // Two things must be true in order for setOption() to work: - // The YouTube caption module must be loaded - // and the video must have started playing - if (thisObj.youTubePlayer.getOptions('captions') && thisObj.startedPlaying) { - thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLang}); - } - else { - // the two conditions were not met - // try again to set the language after onApiChange event is triggered - // meanwhile, the following variable will hold the value - thisObj.captionLangPending = thisObj.captionLang; - } - } - else { - if (thisObj.youTubePlayer.getOptions('captions')) { - thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLang}); - } - else { - thisObj.youTubePlayer.loadModule('captions'); - thisObj.captionLangPending = thisObj.captionLang; - } - } - } - else if (thisObj.usingVimeoCaptions) { - thisObj.vimeoPlayer.enableTextTrack(thisObj.captionLang).then(function(track) { - // track.language = the iso code for the language - // track.kind = 'captions' or 'subtitles' - // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - - break; - default: - // some other error occurred - - break; - } - }); - } - else { // using local track elements for captions/subtitles - thisObj.syncTrackLanguages('captions',thisObj.captionLang); - if (!thisObj.swappingSrc) { - thisObj.updateCaption(thisObj.elapsed); - thisObj.showDescription(thisObj.elapsed); - } - } - thisObj.captionsOn = true; - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleCaptionToggle()) - thisObj.hidingPopup = true; - thisObj.captionsPopup.hide(); - // Ensure stopgap gets cancelled if handleCaptionToggle() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar - setTimeout(function() { - thisObj.hidingPopup = false; - }, 100); - thisObj.updateCaptionsMenu(thisObj.captionLang); - thisObj.$ccButton.focus(); - - // save preference to cookie - thisObj.prefCaptions = 1; - thisObj.updateCookie('prefCaptions'); - thisObj.refreshControls('captions'); - } - }; - - // Returns the function used when the "Captions Off" button is clicked in the captions tooltip. - AblePlayer.prototype.getCaptionOffFunction = function () { - var thisObj = this; - return function () { - if (thisObj.player == 'youtube') { - thisObj.youTubePlayer.unloadModule('captions'); - } - else if (thisObj.usingVimeoCaptions) { - thisObj.vimeoPlayer.disableTextTrack(); - } - thisObj.captionsOn = false; - thisObj.currentCaption = -1; - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleCaptionToggle()) - thisObj.hidingPopup = true; - thisObj.captionsPopup.hide(); - // Ensure stopgap gets cancelled if handleCaptionToggle() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar - setTimeout(function() { - thisObj.hidingPopup = false; - }, 100); - thisObj.updateCaptionsMenu(); - thisObj.$ccButton.focus(); - - // save preference to cookie - thisObj.prefCaptions = 0; - thisObj.updateCookie('prefCaptions'); - if (!this.swappingSrc) { - thisObj.refreshControls('captions'); - thisObj.updateCaption(); - } - } - }; - - AblePlayer.prototype.showCaptions = function(now) { - - var c, thisCaption, captionText; - var cues; - if (this.selectedCaptions) { - cues = this.selectedCaptions.cues; - } - else if (this.captions.length >= 1) { - cues = this.captions[0].cues; - } - else { - cues = []; - } - for (c = 0; c < cues.length; c++) { - if ((cues[c].start <= now) && (cues[c].end > now)) { - thisCaption = c; - break; - } - } - if (typeof thisCaption !== 'undefined') { - if (this.currentCaption !== thisCaption) { - // it's time to load the new caption into the container div - captionText = this.flattenCueForCaption(cues[thisCaption]).replace('\n', '<br>'); - this.$captionsDiv.html(captionText); - this.currentCaption = thisCaption; - if (captionText.length === 0) { - // hide captionsDiv; otherwise background-color is visible due to padding - this.$captionsDiv.css('display','none'); - } - else { - this.$captionsDiv.css('display','inline-block'); - } - } - } - else { - this.$captionsDiv.html(''); - this.currentCaption = -1; - } - }; - - AblePlayer.prototype.flattenCueForCaption = function (cue) { - - // Takes a cue and returns the caption text to display - // Also used for chapters - - // Support for 'i' and 'b' tags added in 2.3.66 - // TODO: Add support for 'c' (class) and 'ruby' - - // c (class): <c.myClass1.myClass2>Some text</c> - // Classes can be used to modify other tags too (e.g., <v.loud>) - // If <c> tag, should be rendered as a <span> - - // ruby: http://www.w3schools.com/tags/tag_ruby.asp - - // WebVTT also supports 'u' (underline) - // I see no reason to support that in Able Player. - // If it's available authors are likely to use it incorrectly - // where <i> or <b> should be used instead - // Here are the rare use cases where an underline is appropriate on the web: - // http://html5doctor.com/u-element/ - - var result = []; - - var flattenComponent = function (component) { - var result = [], ii; - if (component.type === 'string') { - result.push(component.value); - } - else if (component.type === 'v') { - result.push('(' + component.value + ')'); - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - } - else if (component.type === 'i') { - result.push('<em>'); - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - result.push('</em>'); - } - else if (component.type === 'b') { - result.push('<strong>'); - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - result.push('</strong>'); - } - else { - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - } - return result.join(''); - }; - - if (typeof cue.components !== 'undefined') { - for (var ii = 0; ii < cue.components.children.length; ii++) { - result.push(flattenComponent(cue.components.children[ii])); - } - } - return result.join(''); - }; - - AblePlayer.prototype.getCaptionsOptions = function(pref) { - - var options = []; - - switch (pref) { - - case 'prefCaptionsFont': - options[0] = ['serif',this.tt.serif]; - options[1] = ['sans-serif',this.tt.sans]; - options[2] = ['cursive',this.tt.cursive]; - options[3] = ['fantasy',this.tt.fantasy]; - options[4] = ['monospace',this.tt.monospace]; - break; - - case 'prefCaptionsColor': - case 'prefCaptionsBGColor': - // HTML color values must be in English - options[0] = ['white',this.tt.white]; - options[1] = ['yellow',this.tt.yellow]; - options[2] = ['green',this.tt.green]; - options[3] = ['cyan',this.tt.cyan]; - options[4] = ['blue',this.tt.blue]; - options[5] = ['magenta',this.tt.magenta]; - options[6] = ['red',this.tt.red]; - options[7] = ['black',this.tt.black]; - break; - - case 'prefCaptionsSize': - options[0] = '75%'; - options[1] = '100%'; - options[2] = '125%'; - options[3] = '150%'; - options[4] = '200%'; - break; - - case 'prefCaptionsOpacity': - options[0] = '0%'; - options[1] = '25%'; - options[2] = '50%'; - options[3] = '75%'; - options[4] = '100%'; - break; - - case 'prefCaptionsStyle': - options[0] = this.tt.captionsStylePopOn; - options[1] = this.tt.captionsStyleRollUp; - break; - - case 'prefCaptionsPosition': - options[0] = 'overlay'; - options[1] = 'below'; - break; - - } - return options; - }; - - AblePlayer.prototype.translatePrefs = function(pref, value, outputFormat) { - - // translate current value of pref to a value supported by outputformat - if (outputFormat == 'youtube') { - if (pref === 'size') { - // YouTube font sizes are a range from -1 to 3 (0 = default) - switch (value) { - case '75%': - return -1; - case '100%': - return 0; - case '125%': - return 1; - case '150%': - return 2; - case '200%': - return 3; - } - } - } - return false; - } - - AblePlayer.prototype.stylizeCaptions = function($element, pref) { - - // $element is the jQuery element containing the captions - // this function handles stylizing of the sample caption text in the Prefs dialog - // plus the actual production captions - // TODO: consider applying the same user prefs to visible text-based description - var property, newValue, opacity, lineHeight; - - if (typeof $element !== 'undefined') { - if (pref == 'prefCaptionsPosition') { - this.positionCaptions(); - } - else if (typeof pref !== 'undefined') { - // just change the one property that user just changed - if (pref === 'prefCaptionsFont') { - property = 'font-family'; - } - else if (pref === 'prefCaptionsSize') { - property = 'font-size'; - } - else if (pref === 'prefCaptionsColor') { - property = 'color'; - } - else if (pref === 'prefCaptionsBGColor') { - property = 'background-color'; - } - else if (pref === 'prefCaptionsOpacity') { - property = 'opacity'; - } - if (pref === 'prefCaptionsOpacity') { - newValue = parseFloat($('#' + this.mediaId + '_' + pref).val()) / 100.0; - } - else { - newValue = $('#' + this.mediaId + '_' + pref).val(); - } - $element.css(property, newValue); - } - else { // no property was specified, update all styles with current saved prefs - opacity = parseFloat(this.prefCaptionsOpacity) / 100.0; - $element.css({ - 'font-family': this.prefCaptionsFont, - 'color': this.prefCaptionsColor, - 'background-color': this.prefCaptionsBGColor, - 'opacity': opacity - }); - if ($element === this.$captionsDiv) { - if (typeof this.$captionsWrapper !== 'undefined') { - this.$captionsWrapper.css({ - 'font-size': this.prefCaptionsSize - }); - } - } - if (this.prefCaptionsPosition === 'below') { - // also need to add the background color to the wrapper div - if (typeof this.$captionsWrapper !== 'undefined') { - this.$captionsWrapper.css({ - 'background-color': this.prefCaptionsBGColor, - 'opacity': '1' - }); - } - } - else if (this.prefCaptionsPosition === 'overlay') { - // no background color for overlay wrapper, captions are displayed in-line - if (typeof this.$captionsWrapper !== 'undefined') { - this.$captionsWrapper.css({ - 'background-color': 'transparent', - 'opacity': '' - }); - } - } - this.positionCaptions(); - } - } - }; - AblePlayer.prototype.positionCaptions = function(position) { - - // set caption position to either 'overlay' or 'below' - // if position parameter was passed to this function, use that - // otherwise use user preference - if (typeof position === 'undefined') { - position = this.prefCaptionsPosition; - } - if (typeof this.$captionsWrapper !== 'undefined') { - - if (position == 'below') { - this.$captionsWrapper.removeClass('able-captions-overlay').addClass('able-captions-below'); - // also need to update in-line styles - this.$captionsWrapper.css({ - 'background-color': this.prefCaptionsBGColor, - 'opacity': '1' - }); - } - else { - this.$captionsWrapper.removeClass('able-captions-below').addClass('able-captions-overlay'); - this.$captionsWrapper.css({ - 'background-color': 'transparent', - 'opacity': '' - }); - } - } - }; - -})(jQuery); - -(function ($) { - - AblePlayer.prototype.populateChaptersDiv = function() { - - var headingLevel, headingType, headingId, $chaptersHeading, - $chaptersList; - - if ($('#' + this.chaptersDivLocation)) { - this.$chaptersDiv = $('#' + this.chaptersDivLocation); - this.$chaptersDiv.addClass('able-chapters-div'); - - // add optional header - if (this.chaptersTitle) { - headingLevel = this.getNextHeadingLevel(this.$chaptersDiv); - headingType = 'h' + headingLevel.toString(); - headingId = this.mediaId + '-chapters-heading'; - $chaptersHeading = $('<' + headingType + '>', { - 'class': 'able-chapters-heading', - 'id': headingId - }).text(this.chaptersTitle); - this.$chaptersDiv.append($chaptersHeading); - } - - this.$chaptersNav = $('<nav>'); - if (this.chaptersTitle) { - this.$chaptersNav.attr('aria-labelledby',headingId); - } - else { - this.$chaptersNav.attr('aria-label',this.tt.chapters); - } - this.$chaptersDiv.append(this.$chaptersNav); - - // populate this.$chaptersNav with a list of chapters - this.updateChaptersList(); - } - }; - - AblePlayer.prototype.updateChaptersList = function() { - - var thisObj, cues, $chaptersList, c, thisChapter, - $chapterItem, $chapterButton, buttonId, hasDefault, - getClickFunction, $clickedItem, $chaptersList, thisChapterIndex; - - thisObj = this; - - if (!this.$chaptersNav) { - return false; - } - - if (typeof this.useChapterTimes === 'undefined') { - if (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) { - this.useChapterTimes = true; - } - else { - this.useChapterTimes = false; - } - } - - if (this.useChapterTimes) { - cues = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { - cues = this.chapters[0].cues; - } - else { - cues = []; - } - if (cues.length > 0) { - $chaptersList = $('<ul>'); - for (c = 0; c < cues.length; c++) { - thisChapter = c; - $chapterItem = $('<li></li>'); - $chapterButton = $('<button>',{ - 'type': 'button', - 'val': thisChapter - }).text(this.flattenCueForCaption(cues[thisChapter])); - - // add event listeners - getClickFunction = function (time) { - return function () { - thisObj.seekTrigger = 'chapter'; - $clickedItem = $(this).closest('li'); - $chaptersList = $(this).closest('ul').find('li'); - thisChapterIndex = $chaptersList.index($clickedItem); - $chaptersList.removeClass('able-current-chapter').attr('aria-selected',''); - $clickedItem.addClass('able-current-chapter').attr('aria-selected','true'); - // Need to updateChapter before seeking to it - // Otherwise seekBar is redrawn with wrong chapterDuration and/or chapterTime - thisObj.updateChapter(time); - thisObj.seekTo(time); - } - }; - $chapterButton.on('click',getClickFunction(cues[thisChapter].start)); // works with Enter too - $chapterButton.on('focus',function() { - $(this).closest('ul').find('li').removeClass('able-focus'); - $(this).closest('li').addClass('able-focus'); - }); - $chapterItem.on('hover',function() { - $(this).closest('ul').find('li').removeClass('able-focus'); - $(this).addClass('able-focus'); - }); - $chapterItem.on('mouseleave',function() { - $(this).removeClass('able-focus'); - }); - $chapterButton.on('blur',function() { - $(this).closest('li').removeClass('able-focus'); - }); - - // put it all together - $chapterItem.append($chapterButton); - $chaptersList.append($chapterItem); - if (this.defaultChapter === cues[thisChapter].id) { - $chapterButton.attr('aria-selected','true').parent('li').addClass('able-current-chapter'); - this.currentChapter = cues[thisChapter]; - hasDefault = true; - } - } - if (!hasDefault) { - // select the first chapter - this.currentChapter = cues[0]; - $chaptersList.find('button').first().attr('aria-selected','true') - .parent('li').addClass('able-current-chapter'); - } - this.$chaptersNav.html($chaptersList); - } - return false; - }; - - AblePlayer.prototype.seekToChapter = function(chapterId) { - - // step through chapters looking for matching ID - var i=0; - while (i < this.selectedChapters.cues.length) { - if (this.selectedChapters.cues[i].id == chapterId) { - // found the target chapter! Seek to it - this.seekTo(this.selectedChapters.cues[i].start); - this.updateChapter(this.selectedChapters.cues[i].start); - break; - } - i++; - } - }; - - AblePlayer.prototype.updateChapter = function (now) { - - // as time-synced chapters change during playback, track changes in current chapter - if (typeof this.selectedChapters === 'undefined') { - return; - } - - var chapters, i, thisChapterIndex, chapterLabel; - - chapters = this.selectedChapters.cues; - for (i = 0; i < chapters.length; i++) { - if ((chapters[i].start <= now) && (chapters[i].end > now)) { - thisChapterIndex = i; - break; - } - } - if (typeof thisChapterIndex !== 'undefined') { - if (this.currentChapter !== chapters[thisChapterIndex]) { - // this is a new chapter - this.currentChapter = chapters[thisChapterIndex]; - if (this.useChapterTimes) { - this.chapterDuration = this.getChapterDuration(); - this.seekIntervalCalculated = false; // will be recalculated in setSeekInterval() - } - if (typeof this.$chaptersDiv !== 'undefined') { - // chapters are listed in an external container - this.$chaptersDiv.find('ul').find('li').removeClass('able-current-chapter').attr('aria-selected',''); - this.$chaptersDiv.find('ul').find('li').eq(thisChapterIndex) - .addClass('able-current-chapter').attr('aria-selected','true'); - } - } - } - }; - - AblePlayer.prototype.getChapterDuration = function () { - - // called if this.seekbarScope === 'chapter' - // get duration of the current chapter - - var lastChapterIndex, chapterEnd; - - if (typeof this.currentChapter === 'undefined') { - return 0; - } - if (typeof this.duration === 'undefined') { - return 0; - } - lastChapterIndex = this.selectedChapters.cues.length-1; - if (this.selectedChapters.cues[lastChapterIndex] == this.currentChapter) { - // this is the last chapter - if (this.currentChapter.end !== this.duration) { - // chapter ends before or after video ends, adjust chapter end to match video end - chapterEnd = this.duration; - this.currentChapter.end = this.duration; - } - else { - chapterEnd = this.currentChapter.end; - } - } - else { // this is not the last chapter - chapterEnd = this.currentChapter.end; - } - return chapterEnd - this.currentChapter.start; - }; - - AblePlayer.prototype.getChapterElapsed = function () { - // called if this.seekbarScope === 'chapter' - // get current elapsed time, relative to the current chapter duration - - if (typeof this.currentChapter === 'undefined') { - return 0; - } - - if (this.elapsed > this.currentChapter.start) { - return this.elapsed - this.currentChapter.start; - } - else { - return 0; - } - }; - - AblePlayer.prototype.convertChapterTimeToVideoTime = function (chapterTime) { - - // chapterTime is the time within the current chapter - // return the same time, relative to the entire video - if (typeof this.currentChapter !== 'undefined') { - var newTime = this.currentChapter.start + chapterTime; - if (newTime > this.currentChapter.end) { - return this.currentChapter.end; - } - else { - return newTime; - } - } - else { - return chapterTime; - } - }; - - AblePlayer.prototype.getChapterClickFunction = function (time) { - - // Returns the function used when a chapter is clicked in the chapters menu. - var thisObj = this; - return function () { - thisObj.seekTrigger = 'chapter'; - thisObj.seekTo(time); - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleChapters()) - thisObj.hidingPopup = true; - thisObj.chaptersPopup.hide(); - // Ensure stopgap gets cancelled if handleChapters() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar - setTimeout(function() { - thisObj.hidingPopup = false; - }, 100); - thisObj.$chaptersButton.focus(); - } - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.updateMeta = function (time) { - if (this.hasMeta) { - if (this.metaType === 'text') { - this.$metaDiv.show(); - this.showMeta(time \|\| this.elapsed); - } - else { - this.showMeta(time \|\| this.elapsed); - } - } - }; - - AblePlayer.prototype.showMeta = function(now) { - var tempSelectors, m, thisMeta, - cues, cueText, cueLines, i, line, - showDuration, focusTarget; - - tempSelectors = []; - if (this.meta.length >= 1) { - cues = this.meta; - } - else { - cues = []; - } - for (m = 0; m < cues.length; m++) { - if ((cues[m].start <= now) && (cues[m].end > now)) { - thisMeta = m; - break; - } - } - if (typeof thisMeta !== 'undefined') { - if (this.currentMeta !== thisMeta) { - if (this.metaType === 'text') { - // it's time to load the new metadata cue into the container div - this.$metaDiv.html(this.flattenCueForMeta(cues[thisMeta]).replace('\n', '<br>')); - } - else if (this.metaType === 'selector') { - // it's time to show content referenced by the designated selector(s) - cueText = this.flattenCueForMeta(cues[thisMeta]); - cueLines = cueText.split('\n'); - for (i=0; i<cueLines.length; i++) { - line = $.trim(cueLines[i]); - if (line.toLowerCase().trim() === 'pause') { - // don't show big play button when pausing via metadata - this.hideBigPlayButton = true; - this.pauseMedia(); - } - else if (line.toLowerCase().substring(0,6) == 'focus:') { - focusTarget = line.substring(6).trim(); - if ($(focusTarget).length) { - $(focusTarget).focus(); - } - } - else { - if ($(line).length) { - // selector exists - this.currentMeta = thisMeta; - showDuration = parseInt($(line).attr('data-duration')); - if (typeof showDuration !== 'undefined' && !isNaN(showDuration)) { - $(line).show().delay(showDuration).fadeOut(); - } - else { - // no duration specified. Just show the element until end time specified in VTT file - $(line).show(); - } - // add to array of visible selectors so it can be hidden at end time - this.visibleSelectors.push(line); - tempSelectors.push(line); - - } - } - } - // now step through this.visibleSelectors and remove anything that's stale - if (this.visibleSelectors && this.visibleSelectors.length) { - if (this.visibleSelectors.length !== tempSelectors.length) { - for (i=this.visibleSelectors.length-1; i>=0; i--) { - if ($.inArray(this.visibleSelectors[i],tempSelectors) == -1) { - $(this.visibleSelectors[i]).hide(); - this.visibleSelectors.splice(i,1); - } - } - } - } - - } - } - } - else { - // there is currently no metadata. Empty stale content - if (typeof this.$metaDiv !== 'undefined') { - this.$metaDiv.html(''); - } - if (this.visibleSelectors && this.visibleSelectors.length) { - for (i=0; i<this.visibleSelectors.length; i++) { - $(this.visibleSelectors[i]).hide(); - } - // reset array - this.visibleSelectors = []; - } - this.currentMeta = -1; - } - }; - - // Takes a cue and returns the metadata text to display for it. - AblePlayer.prototype.flattenCueForMeta = function (cue) { - var result = []; - - var flattenComponent = function (component) { - var result = [], ii; - if (component.type === 'string') { - result.push(component.value); - } - else if (component.type === 'v') { - result.push('[' + component.value + ']'); - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - } - else { - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - } - return result.join(''); - } - - for (var ii = 0; ii < cue.components.children.length; ii++) { - result.push(flattenComponent(cue.components.children[ii])); - } - - return result.join(''); - }; - -})(jQuery); - -(function ($) { - - AblePlayer.prototype.setupTranscript = function() { - - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - if (!this.transcriptType) { - // previously set transcriptType to null since there are no <track> elements - // check again to see if captions have been collected from other sources (e.g., YouTube) - - if (this.captions.length && (!(this.usingYouTubeCaptions \|\| this.usingVimeoCaptions))) { - // captions are possible! Use the default type (popup) - // if other types ('external' and 'manual') were desired, transcriptType would not be null here - this.transcriptType = 'popup'; - } - } - - if (this.transcriptType) { - if (this.transcriptType === 'popup' \|\| this.transcriptType === 'external') { - this.injectTranscriptArea(); - deferred.resolve(); - } - else if (this.transcriptType === 'manual') { - this.setupManualTranscript(); - deferred.resolve(); - } - } - else { - // there is no transcript - deferred.resolve(); - } - return promise; - }; - - AblePlayer.prototype.injectTranscriptArea = function() { - - var thisObj, $autoScrollLabel, $languageSelectWrapper, $languageSelectLabel, i, $option; - - thisObj = this; - this.$transcriptArea = $('<div>', { - 'class': 'able-transcript-area', - 'role': 'dialog', - 'aria-label': this.tt.transcriptTitle - }); - - this.$transcriptToolbar = $('<div>', { - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' - }); - - this.$transcriptDiv = $('<div>', { - 'class' : 'able-transcript' - }); - - // Transcript toolbar content - - // Add auto Scroll checkbox - this.$autoScrollTranscriptCheckbox = $('<input>', { - 'id': 'autoscroll-transcript-checkbox-' + this.mediaId, - 'type': 'checkbox' - }); - $autoScrollLabel = $('<label>', { - 'for': 'autoscroll-transcript-checkbox-' + this.mediaId - }).text(this.tt.autoScroll); - this.$transcriptToolbar.append($autoScrollLabel,this.$autoScrollTranscriptCheckbox); - - // Add field for selecting a transcript language - // Only necessary if there is more than one language - if (this.captions.length > 1) { - $languageSelectWrapper = $('<div>',{ - 'class': 'transcript-language-select-wrapper' - }); - $languageSelectLabel = $('<label>',{ - 'for': 'transcript-language-select-' + this.mediaId - }).text(this.tt.language); - this.$transcriptLanguageSelect = $('<select>',{ - 'id': 'transcript-language-select-' + this.mediaId - }); - for (i=0; i < this.captions.length; i++) { - $option = $('<option></option>',{ - value: this.captions[i]['language'], - lang: this.captions[i]['language'] - }).text(this.captions[i]['label']); - if (this.captions[i]['def']) { - $option.prop('selected',true); - } - this.$transcriptLanguageSelect.append($option); - } - } - if ($languageSelectWrapper) { - $languageSelectWrapper.append($languageSelectLabel,this.$transcriptLanguageSelect); - this.$transcriptToolbar.append($languageSelectWrapper); - } - this.$transcriptArea.append(this.$transcriptToolbar, this.$transcriptDiv); - - // If client has provided separate transcript location, put it there. - // Otherwise append it to the body - if (this.transcriptDivLocation) { - $('#' + this.transcriptDivLocation).append(this.$transcriptArea); - } - else { - this.$ableWrapper.append(this.$transcriptArea); - } - - // make it draggable (popup only; NOT external transcript) - if (!this.transcriptDivLocation) { - this.initDragDrop('transcript'); - if (this.prefTranscript === 1) { - // transcript is on. Go ahead and position it - this.positionDraggableWindow('transcript',this.getDefaultWidth('transcript')); - } - } - - // If client has provided separate transcript location, override user's preference for hiding transcript - if (!this.prefTranscript && !this.transcriptDivLocation) { - this.$transcriptArea.hide(); - } - }; - - AblePlayer.prototype.addTranscriptAreaEvents = function() { - - var thisObj = this; - - this.$autoScrollTranscriptCheckbox.click(function () { - thisObj.handleTranscriptLockToggle(thisObj.$autoScrollTranscriptCheckbox.prop('checked')); - }); - - 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) { - thisObj.autoScrollTranscript = false; - thisObj.refreshControls('transcript'); - } - thisObj.scrollingTranscript = false; - }); - - if (typeof this.$transcriptLanguageSelect !== 'undefined') { - - this.$transcriptLanguageSelect.on('click mousedown',function (e) { - // execute default behavior - // prevent propagation of mouse event to toolbar or window - e.stopPropagation(); - }); - - this.$transcriptLanguageSelect.on('change',function () { - - var language = thisObj.$transcriptLanguageSelect.val(); - - thisObj.syncTrackLanguages('transcript',language); - }); - } - }; - - AblePlayer.prototype.transcriptSrcHasRequiredParts = function() { - - // check the external transcript to be sure it has all required components - // return true or false - // in the process, define all the needed variables and properties - - if ($('#' + this.transcriptSrc).length) { - this.$transcriptArea = $('#' + this.transcriptSrc); - if (this.$transcriptArea.find('.able-window-toolbar').length) { - this.$transcriptToolbar = this.$transcriptArea.find('.able-window-toolbar').eq(0); - if (this.$transcriptArea.find('.able-transcript').length) { - this.$transcriptDiv = this.$transcriptArea.find('.able-transcript').eq(0); - if (this.$transcriptArea.find('.able-transcript-seekpoint').length) { - this.$transcriptSeekpoints = this.$transcriptArea.find('.able-transcript-seekpoint'); - return true; - } - } - } - } - return false; - } - - AblePlayer.prototype.setupManualTranscript = function() { - - var $autoScrollInput, $autoScrollLabel; - - $autoScrollInput = $('<input>', { - 'id': 'autoscroll-transcript-checkbox-' + this.mediaId, - 'type': 'checkbox' - }); - $autoScrollLabel = $('<label>', { - 'for': 'autoscroll-transcript-checkbox-' + this.mediaId - }).text(this.tt.autoScroll); - - // Add an auto-scroll checkbox to the toolbar. - this.$autoScrollTranscriptCheckbox = $autoScrollInput; - this.$transcriptToolbar.append($autoScrollLabel, this.$autoScrollTranscriptCheckbox); - - }; - - AblePlayer.prototype.updateTranscript = function() { - - if (!this.transcriptType) { - return; - } - - if (this.transcriptType === 'external' \|\| this.transcriptType === 'popup') { - - var chapters, captions, descriptions; - - // Language of transcript might be different than language of captions - // But both are in sync by default - if (this.transcriptLang) { - captions = this.transcriptCaptions.cues; - } - else { - if (this.transcriptCaptions) { - this.transcriptLang = this.transcriptCaptions.language; - captions = this.transcriptCaptions.cues; - } - else if (this.selectedCaptions) { - this.transcriptLang = this.captionLang; - captions = this.selectedCaptions.cues; - } - } - - // setup chapters - if (this.transcriptChapters) { - chapters = this.transcriptChapters.cues; - } - else if (this.chapters.length > 0) { - // Try and match the caption language. - if (this.transcriptLang) { - for (var i = 0; i < this.chapters.length; i++) { - if (this.chapters[i].language === this.transcriptLang) { - chapters = this.chapters[i].cues; - } - } - } - if (typeof chapters === 'undefined') { - chapters = this.chapters[0].cues \|\| []; - } - } - - // setup descriptions - if (this.transcriptDescriptions) { - descriptions = this.transcriptDescriptions.cues; - } - else if (this.descriptions.length > 0) { - // Try and match the caption language. - if (this.transcriptLang) { - for (var i = 0; i < this.descriptions.length; i++) { - if (this.descriptions[i].language === this.transcriptLang) { - descriptions = this.descriptions[i].cues; - } - } - } - if (!descriptions) { - descriptions = this.descriptions[0].cues \|\| []; - } - } - - var div = this.generateTranscript(chapters \|\| [], captions \|\| [], descriptions \|\| []); - - this.$transcriptDiv.html(div); - // reset transcript selected <option> to this.transcriptLang - if (this.$transcriptLanguageSelect) { - this.$transcriptLanguageSelect.find('option:selected').prop('selected',false); - this.$transcriptLanguageSelect.find('option[lang=' + this.transcriptLang + ']').prop('selected',true); - } - } - - var thisObj = this; - - // Make transcript tabbable if preference is turned on. - if (this.prefTabbable === 1) { - this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - - // handle clicks on text within transcript - // Note: This event listeners handles clicks only, not keydown events - // 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(e) { - thisObj.seekTrigger = 'transcript'; - var spanStart = parseFloat($(this).attr('data-start')); - // Add a tiny amount so that we're inside the span. - spanStart += .01; - // 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; - } - }); - } - }; - - AblePlayer.prototype.highlightTranscript = function (currentTime) { - - // Show highlight in transcript marking current caption. - - if (!this.transcriptType) { - return; - } - - var start, end, isChapterHeading; - var thisObj = this; - - currentTime = parseFloat(currentTime); - - // Highlight the current transcript item. - this.$transcriptArea.find('span.able-transcript-seekpoint').each(function() { - start = parseFloat($(this).attr('data-start')); - end = parseFloat($(this).attr('data-end')); - // be sure this isn't a chapter (don't highlight chapter headings) - if ($(this).parent().hasClass('able-transcript-chapter-heading')) { - isChapterHeading = true; - } - else { - isChapterHeading = false; - } - - if (currentTime >= start && currentTime <= end && !isChapterHeading) { - - // If this item isn't already highlighted, it should be - if (!($(this).hasClass('able-highlight'))) { - // remove all previous highlights before adding one to current span - thisObj.$transcriptArea.find('.able-highlight').removeClass('able-highlight'); - $(this).addClass('able-highlight'); - thisObj.movingHighlight = true; - } - return false; - } - }); - thisObj.currentHighlight = thisObj.$transcriptArea.find('.able-highlight'); - if (thisObj.currentHighlight.length === 0) { - // Nothing highlighted. - thisObj.currentHighlight = null; - } - }; - - AblePlayer.prototype.generateTranscript = function(chapters, captions, descriptions) { - - var thisObj = this; - - var $main = $('<div class="able-transcript-container"></div>'); - var transcriptTitle; - - // set language for transcript container - $main.attr('lang', this.transcriptLang); - - if (typeof this.transcriptTitle !== 'undefined') { - transcriptTitle = this.transcriptTitle; - } - else if (this.lyricsMode) { - transcriptTitle = this.tt.lyricsTitle; - } - else { - transcriptTitle = this.tt.transcriptTitle; - } - - if (typeof this.transcriptDivLocation === 'undefined') { - // only add an HTML heading to internal transcript - // external transcript is expected to have its own heading - var headingNumber = this.playerHeadingLevel; - headingNumber += 1; - var chapterHeadingNumber = headingNumber + 1; - - if (headingNumber <= 6) { - var transcriptHeading = 'h' + headingNumber.toString(); - } - else { - var transcriptHeading = 'div'; - } - // var transcriptHeadingTag = '<' + transcriptHeading + ' class="able-transcript-heading">'; - var $transcriptHeadingTag = $('<' + transcriptHeading + '>'); - $transcriptHeadingTag.addClass('able-transcript-heading'); - if (headingNumber > 6) { - $transcriptHeadingTag.attr({ - 'role': 'heading', - 'aria-level': headingNumber - }); - } - $transcriptHeadingTag.text(transcriptTitle); - - // set language of transcript heading to language of player - // this is independent of language of transcript - $transcriptHeadingTag.attr('lang', this.lang); - - $main.append($transcriptHeadingTag); - } - - var nextChapter = 0; - var nextCap = 0; - var nextDesc = 0; - - var addChapter = function(div, chap) { - - if (chapterHeadingNumber <= 6) { - var chapterHeading = 'h' + chapterHeadingNumber.toString(); - } - else { - var chapterHeading = 'div'; - } - - var $chapterHeadingTag = $('<' + chapterHeading + '>',{ - 'class': 'able-transcript-chapter-heading' - }); - if (chapterHeadingNumber > 6) { - $chapterHeadingTag.attr({ - 'role': 'heading', - 'aria-level': chapterHeadingNumber - }); - } - - var flattenComponentForChapter = function(comp) { - - var result = []; - if (comp.type === 'string') { - result.push(comp.value); - } - else { - for (var i = 0; i < comp.children.length; i++) { - result = result.concat(flattenComponentForChapter(comp.children[i])); - } - } - return result; - } - - var $chapSpan = $('<span>',{ - 'class': 'able-transcript-seekpoint' - }); - for (var i = 0; i < chap.components.children.length; i++) { - var results = flattenComponentForChapter(chap.components.children[i]); - for (var jj = 0; jj < results.length; jj++) { - $chapSpan.append(results[jj]); - } - } - $chapSpan.attr('data-start', chap.start.toString()); - $chapSpan.attr('data-end', chap.end.toString()); - $chapterHeadingTag.append($chapSpan); - - div.append($chapterHeadingTag); - }; - - var addDescription = function(div, desc) { - var $descDiv = $('<div>', { - 'class': 'able-transcript-desc' - }); - var $descHiddenSpan = $('<span>',{ - 'class': 'able-hidden' - }); - $descHiddenSpan.attr('lang', thisObj.lang); - $descHiddenSpan.text(thisObj.tt.prefHeadingDescription + ': '); - $descDiv.append($descHiddenSpan); - - var flattenComponentForDescription = function(comp) { - - var result = []; - if (comp.type === 'string') { - result.push(comp.value); - } - else { - for (var i = 0; i < comp.children.length; i++) { - result = result.concat(flattenComponentForDescription(comp.children[i])); - } - } - return result; - } - - var $descSpan = $('<span>',{ - 'class': 'able-transcript-seekpoint' - }); - for (var i = 0; i < desc.components.children.length; i++) { - var results = flattenComponentForDescription(desc.components.children[i]); - for (var jj = 0; jj < results.length; jj++) { - $descSpan.append(results[jj]); - } - } - $descSpan.attr('data-start', desc.start.toString()); - $descSpan.attr('data-end', desc.end.toString()); - $descDiv.append($descSpan); - - div.append($descDiv); - }; - - var addCaption = function(div, cap) { - - var $capSpan = $('<span>',{ - 'class': 'able-transcript-seekpoint able-transcript-caption' - }); - - var flattenComponentForCaption = function(comp) { - - var result = []; - - var parts = 0; - - var flattenString = function (str) { - - parts++; - - var flatStr; - var result = []; - if (str === '') { - return result; - } - - var openBracket = str.indexOf('['); - var closeBracket = str.indexOf(']'); - var openParen = str.indexOf('('); - var closeParen = str.indexOf(')'); - - var hasBrackets = openBracket !== -1 && closeBracket !== -1; - var hasParens = openParen !== -1 && closeParen !== -1; - - if (hasParens \|\| hasBrackets) { - if (parts > 1) { - // force a line break between sections that contain parens or brackets - var silentSpanBreak = '<br/>'; - } - else { - var silentSpanBreak = ''; - } - var silentSpanOpen = silentSpanBreak + '<span class="able-unspoken">'; - var silentSpanClose = '</span>'; - if (hasParens && hasBrackets) { - // string has both! - if (openBracket < openParen) { - // brackets come first. Parse parens separately - hasParens = false; - } - else { - // parens come first. Parse brackets separately - hasBrackets = false; - } - } - } - if (hasParens) { - flatStr = str.substring(0, openParen); - flatStr += silentSpanOpen; - flatStr += str.substring(openParen, closeParen + 1); - flatStr += silentSpanClose; - flatStr += flattenString(str.substring(closeParen + 1)); - result.push(flatStr); - } - else if (hasBrackets) { - flatStr = str.substring(0, openBracket); - flatStr += silentSpanOpen; - flatStr += str.substring(openBracket, closeBracket + 1); - flatStr += silentSpanClose; - flatStr += flattenString(str.substring(closeBracket + 1)); - result.push(flatStr); - } - else { - result.push(str); - } - return result; - }; - - if (comp.type === 'string') { - result = result.concat(flattenString(comp.value)); - } - else if (comp.type === 'v') { - var $vSpan = $('<span>',{ - 'class': 'able-unspoken' - }); - $vSpan.text('(' + comp.value + ')'); - result.push($vSpan); - for (var i = 0; i < comp.children.length; i++) { - var subResults = flattenComponentForCaption(comp.children[i]); - for (var jj = 0; jj < subResults.length; jj++) { - result.push(subResults[jj]); - } - } - } - else if (comp.type === 'b' \|\| comp.type === 'i') { - if (comp.type === 'b') { - var $tag = $('<strong>'); - } - else if (comp.type === 'i') { - var $tag = $('<em>'); - } - for (var i = 0; i < comp.children.length; i++) { - var subResults = flattenComponentForCaption(comp.children[i]); - for (var jj = 0; jj < subResults.length; jj++) { - $tag.append(subResults[jj]); - } - } - if (comp.type === 'b' \|\| comp.type == 'i') { - result.push($tag,' '); - } - } - else { - for (var i = 0; i < comp.children.length; i++) { - result = result.concat(flattenComponentForCaption(comp.children[i])); - } - } - return result; - }; - - for (var i = 0; i < cap.components.children.length; i++) { - var results = flattenComponentForCaption(cap.components.children[i]); - for (var jj = 0; jj < results.length; jj++) { - var result = results[jj]; - if (typeof result === 'string') { - if (thisObj.lyricsMode) { - // add <br> BETWEEN each caption and WITHIN each caption (if payload includes "\n") - result = result.replace('\n','<br>') + '<br>'; - } - else { - // just add a space between captions - result += ' '; - } - } - $capSpan.append(result); - } - } - $capSpan.attr('data-start', cap.start.toString()); - $capSpan.attr('data-end', cap.end.toString()); - div.append($capSpan); - div.append(' \n'); - }; - - // keep looping as long as any one of the three arrays has content - while ((nextChapter < chapters.length) \|\| (nextDesc < descriptions.length) \|\| (nextCap < captions.length)) { - - if ((nextChapter < chapters.length) && (nextDesc < descriptions.length) && (nextCap < captions.length)) { - // they all three have content - var firstStart = Math.min(chapters[nextChapter].start,descriptions[nextDesc].start,captions[nextCap].start); - } - else if ((nextChapter < chapters.length) && (nextDesc < descriptions.length)) { - // chapters & descriptions have content - var firstStart = Math.min(chapters[nextChapter].start,descriptions[nextDesc].start); - } - else if ((nextChapter < chapters.length) && (nextCap < captions.length)) { - // chapters & captions have content - var firstStart = Math.min(chapters[nextChapter].start,captions[nextCap].start); - } - else if ((nextDesc < descriptions.length) && (nextCap < captions.length)) { - // descriptions & captions have content - var firstStart = Math.min(descriptions[nextDesc].start,captions[nextCap].start); - } - else { - var firstStart = null; - } - if (firstStart !== null) { - if (typeof chapters[nextChapter] !== 'undefined' && chapters[nextChapter].start === firstStart) { - addChapter($main, chapters[nextChapter]); - nextChapter += 1; - } - else if (typeof descriptions[nextDesc] !== 'undefined' && descriptions[nextDesc].start === firstStart) { - addDescription($main, descriptions[nextDesc]); - nextDesc += 1; - } - else { - addCaption($main, captions[nextCap]); - nextCap += 1; - } - } - else { - if (nextChapter < chapters.length) { - addChapter($main, chapters[nextChapter]); - nextChapter += 1; - } - else if (nextDesc < descriptions.length) { - addDescription($main, descriptions[nextDesc]); - nextDesc += 1; - } - else if (nextCap < captions.length) { - addCaption($main, captions[nextCap]); - nextCap += 1; - } - } - } - // organize transcript into blocks using [] and () as starting points - var $components = $main.children(); - var spanCount = 0; - var openBlock = true; - $components.each(function() { - if ($(this).hasClass('able-transcript-caption')) { - if ($(this).text().indexOf('[') !== -1 \|\| $(this).text().indexOf('(') !== -1) { - // this caption includes a bracket or parenth. Start a new block - // close the previous block first - if (spanCount > 0) { - $main.find('.able-block-temp').removeClass('able-block-temp').wrapAll('<div class="able-transcript-block"></div>'); - spanCount = 0; - } - } - $(this).addClass('able-block-temp'); - spanCount++; - } - else { - // this is not a caption. Close the caption block - if (spanCount > 0) { - $main.find('.able-block-temp').removeClass('able-block-temp').wrapAll('<div class="able-transcript-block"></div>'); - spanCount = 0; - } - } - }); - return $main; - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.showSearchResults = function() { - - // search VTT file for all instances of searchTerms - // Currently just supports search terms separated with one or more spaces - - // TODO: Add support for more robust search syntax: - // Search terms wrapped in quotation marks ("") must occur exactly as they appear in the quotes - // Search terms with an attached minus sign (e.g., -term) are to be excluded from results - // Boolean AND/OR operators - // ALSO: Add localization support - - var thisObj = this; - if (this.searchDiv && this.searchString) { - if ($('#' + this.SearchDiv)) { - var searchStringHtml = '<p>' + this.tt.resultsSummary1 + ' '; - searchStringHtml += '<span id="able-search-term-echo">' + this.searchString + '</span>'; - searchStringHtml += '</p>'; - var resultsArray = this.searchFor(this.searchString, this.searchIgnoreCaps); - if (resultsArray.length > 0) { - var $resultsSummary = $('<p>',{ - 'class': 'able-search-results-summary' - }); - var resultsSummaryText = this.tt.resultsSummary2; - resultsSummaryText += ' <strong>' + resultsArray.length + '</strong> '; - resultsSummaryText += this.tt.resultsSummary3 + ' '; - resultsSummaryText += this.tt.resultsSummary4; - $resultsSummary.html(resultsSummaryText); - var $resultsList = $('<ul>'); - for (var i = 0; i < resultsArray.length; i++) { - var resultId = 'aria-search-result-' + i; - var $resultsItem = $('<li>',{}); - var itemStartTime = this.secondsToTime(resultsArray[i]['start']); - var itemLabel = this.tt.searchButtonLabel + ' ' + itemStartTime['title']; - var itemStartSpan = $('<button>',{ - 'class': 'able-search-results-time', - 'data-start': resultsArray[i]['start'], - 'title': itemLabel, - 'aria-label': itemLabel, - 'aria-describedby': resultId - }); - itemStartSpan.text(itemStartTime['value']); - // add a listener for clisk on itemStart - itemStartSpan.on('click',function(e) { - thisObj.seekTrigger = 'search'; - var spanStart = parseFloat($(this).attr('data-start')); - // Add a tiny amount so that we're inside the span. - spanStart += .01; - thisObj.seeking = true; - thisObj.seekTo(spanStart); - }); - - var itemText = $('<span>',{ - 'class': 'able-search-result-text', - 'id': resultId - }) - itemText.html('...' + resultsArray[i]['caption'] + '...'); - $resultsItem.append(itemStartSpan, itemText); - $resultsList.append($resultsItem); - } - $('#' + this.searchDiv).html(searchStringHtml).append($resultsSummary,$resultsList); - } - else { - var noResults = $('<p>').text(this.tt.noResultsFound); - $('#' + this.searchDiv).html(searchStringHtml).append(noResults); - } - } - } - }; - - AblePlayer.prototype.searchFor = function(searchString, ignoreCaps) { - - // return chronological array of caption cues that match searchTerms - var captionLang, captions, results, caption, c, i, j; - results = []; - // split searchTerms into an array - var searchTerms = searchString.split(' '); - if (this.captions.length > 0) { - // Get caption track that matches this.searchLang - for (i=0; i < this.captions.length; i++) { - if (this.captions[i].language === this.searchLang) { - captionLang = this.searchLang; - captions = this.captions[i].cues; - } - } - if (captions.length > 0) { - c = 0; - for (i = 0; i < captions.length; i++) { - if ($.inArray(captions[i].components.children[0]['type'], ['string','i','b','u','v','c']) !== -1) { - caption = this.flattenCueForCaption(captions[i]); - var captionNormalized = ignoreCaps ? caption.toLowerCase() : caption; - for (j = 0; j < searchTerms.length; j++) { - var searchTermNormalized = ignoreCaps ? searchTerms[j].toLowerCase() : searchTerms[j]; - if (captionNormalized.indexOf(searchTermNormalized) !== -1) { - results[c] = []; - results[c]['start'] = captions[i].start; - results[c]['lang'] = captionLang; - results[c]['caption'] = this.highlightSearchTerm(searchTerms,caption); - c++; - break; - } - } - } - } - } - } - return results; - }; - - AblePlayer.prototype.highlightSearchTerm = function(searchTerms, resultString) { - // highlight ALL found searchTerms in the current resultString - // Need to step through the remaining terms to see if they're present as well - searchTerms.forEach(function(searchTerm) { - var reg = new RegExp(searchTerm, 'gi'); - resultString = resultString.replace(reg, '<span class="able-search-term">$&</span>'); - }); - return resultString; - }; - - AblePlayer.prototype.secondsToTime = function(totalSeconds) { - - // return an array of totalSeconds converted into two formats - // time['value'] = HH:MM:SS with hours dropped if there are none - // time['title'] = a speakable rendering, so speech rec users can easily speak the link - - // first, round down to nearest second - var totalSeconds = Math.floor(totalSeconds); - - var hours = parseInt( totalSeconds / 3600 , 10) % 24; - var minutes = parseInt( totalSeconds / 60 , 10) % 60; - var seconds = totalSeconds % 60; - var value = ''; - var title = ''; - if (hours > 0) { - value += hours + ':'; - if (hours == 1) { - title += '1 ' + this.tt.hour + ' '; - } - else { - title += hours + ' ' + this.tt.hours + ' '; - } - } - if (minutes < 10) { - value += '0' + minutes + ':'; - if (minutes > 0) { - if (minutes == 1) { - title += '1 ' + this.tt.minute + ' '; - } - else { - title += minutes + ' ' + this.tt.minutes + ' '; - } - } - } - else { - value += minutes + ':'; - title += minutes + ' ' + this.tt.minutes + ' '; - } - if (seconds < 10) { - value += '0' + seconds; - if (seconds > 0) { - if (seconds == 1) { - title += '1 ' + this.tt.second + ' '; - } - else { - title += seconds + ' ' + this.tt.seconds + ' '; - } - } - } - else { - value += seconds; - title += seconds + ' ' + this.tt.seconds + ' '; - } - var time = []; - time['value'] = value; - time['title'] = title; - return time; - }; -})(jQuery); - -(function ($) { - // Media events - AblePlayer.prototype.onMediaUpdateTime = function (duration, elapsed) { - - // duration and elapsed are passed from callback functions of Vimeo API events - // duration is expressed as sss.xxx - // elapsed is expressed as sss.xxx - var thisObj = this; - this.getMediaTimes(duration,elapsed).then(function(mediaTimes) { - thisObj.duration = mediaTimes['duration']; - thisObj.elapsed = mediaTimes['elapsed']; - if (thisObj.swappingSrc && (typeof thisObj.swapTime !== 'undefined')) { - if (thisObj.swapTime === thisObj.elapsed) { - // described version been swapped and media has scrubbed to time of previous version - if (thisObj.playing) { - // resume playback - thisObj.playMedia(); - // reset vars - thisObj.swappingSrc = false; - thisObj.swapTime = null; - } - } - } - else { - // do all the usual time-sync stuff during playback - if (thisObj.prefHighlight === 1) { - thisObj.highlightTranscript(thisObj.elapsed); - } - thisObj.updateCaption(thisObj.elapsed); - thisObj.showDescription(thisObj.elapsed); - thisObj.updateChapter(thisObj.elapsed); - thisObj.updateMeta(thisObj.elapsed); - thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); - } - }); - }; - - AblePlayer.prototype.onMediaPause = function () { - - if (this.controlsHidden) { - this.fadeControls('in'); - this.controlsHidden = false; - } - if (this.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(this.hideControlsTimeout); - this.hideControlsTimeoutStatus = 'clear'; - - } - this.refreshControls('playpause'); - }; - - AblePlayer.prototype.onMediaComplete = function () { - // if there's a playlist, advance to next item and start playing - if (this.hasPlaylist && !this.cueingPlaylistItem) { - if (this.playlistIndex === (this.$playlist.length - 1)) { - // this is the last track in the playlist - if (this.loop) { - this.playlistIndex = 0; - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings - this.cuePlaylistItem(0); - } - else { - this.playing = false; - this.paused = true; - } - } - else { - // this is not the last track. Play the next one. - this.playlistIndex++; - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings - this.cuePlaylistItem(this.playlistIndex) - } - } - this.refreshControls('init'); - }; - - AblePlayer.prototype.onMediaNewSourceLoad = function () { - - if (this.cueingPlaylistItem) { - // this variable was set in order to address bugs caused by multiple firings of media 'end' event - // safe to reset now - this.cueingPlaylistItem = false; - } - if (this.swappingSrc === true) { - // new source file has just been loaded - if (this.swapTime > 0) { - // this.swappingSrc will be set to false after seek is complete - // see onMediaUpdateTime() - this.seekTo(this.swapTime); - } - else { - if (this.playing) { - // should be able to resume playback - this.playMedia(); - } - this.swappingSrc = false; // swapping is finished - } - } - this.refreshControls('init'); - }; - - // End Media events - - AblePlayer.prototype.onWindowResize = function () { - - if (this.fullscreen) { // replace isFullscreen() with a Boolean. see function for explanation - - var newWidth, newHeight; - - newWidth = $(window).width(); - - // haven't isolated why, but some browsers return an innerHeight that's 20px too tall in fullscreen mode - // Test results: - // Browsers that require a 20px adjustment: Firefox, IE11 (Trident), Edge - if (this.isUserAgent('Firefox') \|\| this.isUserAgent('Trident') \|\| this.isUserAgent('Edge')) { - newHeight = window.innerHeight - this.$playerDiv.outerHeight() - 20; - } - else if (window.outerHeight >= window.innerHeight) { - // Browsers that do NOT require adjustment: Chrome, Safari, Opera, MSIE 10 - newHeight = window.innerHeight - this.$playerDiv.outerHeight(); - } - else { - // Observed in Safari 9.0.1 on Mac OS X: outerHeight is actually less than innerHeight - // Maybe a bug, or maybe window.outerHeight is already adjusted for controller height(?) - // No longer observed in Safari 9.0.2 - newHeight = window.outerHeight; - } - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - this.positionCaptions('overlay'); - } - else { // not fullscreen - if (this.restoringAfterFullScreen) { - newWidth = this.preFullScreenWidth; - newHeight = this.preFullScreenHeight; - } - else { - // not restoring after full screen - newWidth = this.$ableWrapper.width(); - if (typeof this.aspectRatio !== 'undefined') { - newHeight = Math.round(newWidth / this.aspectRatio); - } - else { - // not likely, since this.aspectRatio is defined during intialization - // however, this is a fallback scenario just in case - newHeight = this.$ableWrapper.height(); - } - this.positionCaptions(); // reset with this.prefCaptionsPosition - } - } - this.resizePlayer(newWidth, newHeight); - }; - - AblePlayer.prototype.addSeekbarListeners = function () { - - var thisObj = this; - - // Handle seek bar events. - this.seekBar.bodyDiv.on('startTracking', function (e) { - thisObj.pausedBeforeTracking = thisObj.paused; - thisObj.pauseMedia(); - }).on('tracking', function (e, position) { - // Scrub transcript, captions, and metadata. - thisObj.highlightTranscript(position); - thisObj.updateCaption(position); - thisObj.showDescription(position); - thisObj.updateChapter(thisObj.convertChapterTimeToVideoTime(position)); - thisObj.updateMeta(position); - thisObj.refreshControls('init'); - }).on('stopTracking', function (e, position) { - if (thisObj.useChapterTimes) { - thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); - } - else { - thisObj.seekTo(position); - } - if (!thisObj.pausedBeforeTracking) { - setTimeout(function () { - thisObj.playMedia(); - }, 200); - } - }); - }; - - AblePlayer.prototype.onClickPlayerButton = function (el) { - - // TODO: This is super-fragile since we need to know the length of the class name to split off; update this to other way of dispatching? - - var whichButton, prefsPopup; - whichButton = $(el).attr('class').split(' ')[0].substr(20); - if (whichButton === 'play') { - this.clickedPlay = true; - this.handlePlay(); - } - else if (whichButton === 'restart') { - this.seekTrigger = 'restart'; - this.handleRestart(); - } - else if (whichButton === 'previous') { - this.userClickedPlaylist = true; - this.seekTrigger = 'previous'; - this.buttonWithFocus = 'previous'; - this.handlePrevTrack(); - } - else if (whichButton === 'next') { - this.userClickedPlaylist = true; - this.seekTrigger = 'next'; - this.buttonWithFocus = 'next'; - this.handleNextTrack(); - } - else if (whichButton === 'rewind') { - this.seekTrigger = 'rewind'; - this.handleRewind(); - } - else if (whichButton === 'forward') { - this.seekTrigger = 'forward'; - this.handleFastForward(); - } - else if (whichButton === 'mute') { - this.handleMute(); - } - else if (whichButton === 'volume') { - this.handleVolume(); - } - else if (whichButton === 'faster') { - this.handleRateIncrease(); - } - else if (whichButton === 'slower') { - this.handleRateDecrease(); - } - else if (whichButton === 'captions') { - this.handleCaptionToggle(); - } - else if (whichButton === 'chapters') { - this.handleChapters(); - } - else if (whichButton === 'descriptions') { - this.handleDescriptionToggle(); - } - else if (whichButton === 'sign') { - if (!this.closingSign) { - this.handleSignToggle(); - } - } - else if (whichButton === 'preferences') { - if ($(el).attr('data-prefs-popup') === 'menu') { - this.handlePrefsClick(); - } - else { - this.showingPrefsDialog = true; // stopgap - this.closePopups(); - prefsPopup = $(el).attr('data-prefs-popup'); - if (prefsPopup === 'keyboard') { - this.keyboardPrefsDialog.show(); - } - else if (prefsPopup === 'captions') { - this.captionPrefsDialog.show(); - } - else if (prefsPopup === 'descriptions') { - this.descPrefsDialog.show(); - } - else if (prefsPopup === 'transcript') { - this.transcriptPrefsDialog.show(); - } - this.showingPrefsDialog = false; - } - } - else if (whichButton === 'help') { - this.handleHelpClick(); - } - else if (whichButton === 'transcript') { - if (!this.closingTranscript) { - this.handleTranscriptToggle(); - } - } - else if (whichButton === 'fullscreen') { - this.clickedFullscreenButton = true; - this.handleFullscreenToggle(); - } - }; - - AblePlayer.prototype.okToHandleKeyPress = function () { - - // returns true unless user's focus is on a UI element - // that is likely to need supported keystrokes, including space - - var activeElement = AblePlayer.getActiveDOMElement(); - - if ($(activeElement).prop('tagName') === 'INPUT') { - return false; - } - else { - return true; - } - }; - - AblePlayer.prototype.onPlayerKeyPress = function (e) { - - // handle keystrokes (using DHTML Style Guide recommended key combinations) - // https://web.archive.org/web/20130127004544/http://dev.aol.com/dhtml_style_guide/#mediaplayer - // Modifier keys Alt + Ctrl are on by default, but can be changed within Preferences - // NOTE #1: Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down - // The rest are reasonable best choices - // NOTE #2: If there are multiple players on a single page, keystroke handlers - // are only bound to the FIRST player - // NOTE #3: The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions - // including removal of the "media player" design pattern. There's an issue about that: - // https://github.com/w3c/aria-practices/issues/27 - - var which, $thisElement; - - // Convert to lower case. - which = e.which; - if (which >= 65 && which <= 90) { - which += 32; - } - $thisElement = $(document.activeElement); - - if (which === 27) { // escape - if ($.contains(this.$transcriptArea[0],$thisElement[0])) { - // This element is part of transcript area. - this.handleTranscriptToggle(); - return false; - } - } - if (!this.okToHandleKeyPress()) { - return false; - } - - // Only use keypress to control player if focus is NOT on a form field or contenteditable element - // (or a textarea element with player in stenoMode) - if (!( - $(':focus').is('[contenteditable]') \|\| - $(':focus').is('input') \|\| - ($(':focus').is('textarea') && !this.stenoMode) \|\| - $(':focus').is('select') \|\| - e.target.hasAttribute('contenteditable') \|\| - e.target.tagName === 'INPUT' \|\| - (e.target.tagName === 'TEXTAREA' && !this.stenoMode) \|\| - e.target.tagName === 'SELECT' - )){ - if (which === 27) { // escape - this.closePopups(); - } - else if (which === 32) { // spacebar = play/pause - // disable spacebar support for play/pause toggle as of 4.2.10 - // spacebar should not be handled everywhere on the page, since users use that to scroll the page - // when the player has focus, most controls are buttons so spacebar should be used to trigger the buttons - if ($thisElement.attr('role') === 'button') { - // register a click on this element - e.preventDefault(); - $thisElement.click(); - } - } - else if (which === 112) { // p = play/pause - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handlePlay(); - } - } - else if (which === 115) { // s = stop (now restart) - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleRestart(); - } - } - else if (which === 109) { // m = mute - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleMute(); - } - } - else if (which === 118) { // v = volume - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleVolume(); - } - } - else if (which >= 49 && which <= 57) { // set volume 1-9 - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleVolume(which); - } - } - else if (which === 99) { // c = caption toggle - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleCaptionToggle(); - } - } - else if (which === 100) { // d = description - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleDescriptionToggle(); - } - } - else if (which === 102) { // f = forward - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleFastForward(); - } - } - else if (which === 114) { // r = rewind - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleRewind(); - } - } - else if (which === 98) { // b = back (previous track) - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handlePrevTrack(); - } - } - else if (which === 110) { // n = next track - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleNextTrack(); - } - } - else if (which === 101) { // e = preferences - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handlePrefsClick(); - } - } - else if (which === 13) { // Enter - if ($thisElement.attr('role') === 'button' \|\| $thisElement.prop('tagName') === 'SPAN') { - // register a click on this element - // if it's a transcript span the transcript span click handler will take over - $thisElement.click(); - } - else if ($thisElement.prop('tagName') === 'LI') { - $thisElement.click(); - } - } - } - }; - - AblePlayer.prototype.addHtml5MediaListeners = function () { - - var thisObj = this; - - // NOTE: iOS and some browsers do not support autoplay - // and no events are triggered until media begins to play - // Able Player gets around this by automatically loading media in some circumstances - // (see initialize.js > initPlayer() for details) - this.$media - .on('emptied',function() { - // do something - }) - .on('loadedmetadata',function() { - // should be able to get duration now - thisObj.duration = thisObj.media.duration; - thisObj.onMediaNewSourceLoad(); - }) - .on('canplay',function() { - // previously handled seeking to startTime here - // but it's probably safer to wait for canplaythrough - // so we know player can seek ahead to anything - }) - .on('canplaythrough',function() { - if (thisObj.playbackRate) { - // user has set playbackRate on a previous src or track - // use that setting on the new src or track too - thisObj.setPlaybackRate(thisObj.playbackRate); - } - if (thisObj.userClickedPlaylist) { - if (!thisObj.startedPlaying) { - // start playing; no further user action is required - thisObj.playMedia(); - } - thisObj.userClickedPlaylist = false; // reset - } - if (thisObj.seekTrigger == 'restart' \|\| - thisObj.seekTrigger == 'chapter' \|\| - thisObj.seekTrigger == 'transcript' \|\| - thisObj.seekTrigger == 'search' - ) { - // by clicking on any of these elements, user is likely intending to play - // Not included: elements where user might click multiple times in succession - // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play - thisObj.playMedia(); - } - else if (!thisObj.startedPlaying) { - if (thisObj.startTime > 0) { - if (thisObj.seeking) { - // a seek has already been initiated - // since canplaythrough has been triggered, the seek is complete - thisObj.seeking = false; - if (thisObj.autoplay \|\| thisObj.okToPlay) { - thisObj.playMedia(); - } - } - else { - // haven't started seeking yet - thisObj.seekTo(thisObj.startTime); - } - } - else if (thisObj.defaultChapter && typeof thisObj.selectedChapters !== 'undefined') { - thisObj.seekToChapter(thisObj.defaultChapter); - } - else { - // there is no startTime, therefore no seeking required - if (thisObj.autoplay \|\| thisObj.okToPlay) { - thisObj.playMedia(); - } - } - } - else if (thisObj.hasPlaylist) { - if ((thisObj.playlistIndex !== thisObj.$playlist.length) \|\| thisObj.loop) { - // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) - thisObj.playMedia(); - } - } - else { - // already started playing - // we're here because a new media source has been loaded and is ready to resume playback - thisObj.getPlayerState().then(function(currentState) { - if (thisObj.swappingSrc && (currentState === 'stopped' \|\| currentState === 'paused')) { - thisObj.startedPlaying = false; - if (thisObj.swapTime > 0) { - thisObj.seekTo(thisObj.swapTime); - } - else { - thisObj.playMedia(); - } - } - }); - } - }) - .on('play',function() { - // both 'play' and 'playing' seem to be fired in all browsers (including IE11) - // therefore, doing nothing here & doing everything when 'playing' is triggered - thisObj.refreshControls('playpause'); - }) - .on('playing',function() { - thisObj.playing = true; - thisObj.paused = false; - thisObj.refreshControls('playpause'); - }) - .on('ended',function() { - thisObj.playing = false; - thisObj.paused = true; - thisObj.onMediaComplete(); - }) - .on('progress', function() { - thisObj.refreshControls('timeline'); - }) - .on('waiting',function() { - // do something - // previously called refreshControls() here but this event probably doesn't warrant a refresh - }) - .on('durationchange',function() { - // Display new duration. - thisObj.refreshControls('timeline'); - }) - .on('timeupdate',function() { - thisObj.onMediaUpdateTime(); // includes a call to refreshControls() - }) - .on('pause',function() { - if (!thisObj.clickedPlay) { - // 'pause' was triggered automatically, not initiated by user - // this happens in some browsers when swapping source - // (e.g., between tracks in a playlist or swapping description) - if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { - // do NOT set playing to false. - // doing so prevents continual playback after new track is loaded - } - else { - thisObj.playing = false; - thisObj.paused = true; - } - } - else { - thisObj.playing = false; - thisObj.paused = true; - } - thisObj.clickedPlay = false; // done with this variable - thisObj.onMediaPause(); // includes a call to refreshControls() - }) - .on('ratechange',function() { - // do something - }) - .on('volumechange',function() { - thisObj.volume = thisObj.getVolume(); - if (thisObj.debug) { - - } - }) - .on('error',function() { - if (thisObj.debug) { - switch (thisObj.media.error.code) { - case 1: - - break; - case 2: - - break; - case 3: - - break; - case 4: - - break; - } - } - }); - }; - - AblePlayer.prototype.addVimeoListeners = function () { - -// The following content is orphaned. It was in 'canplaythrough' but there's no equivalent event in Vimeo. -// Maybe it should go under 'loaded' or 'progress' ??? -/ - if (thisObj.userClickedPlaylist) { - if (!thisObj.startedPlaying) { - // start playing; no further user action is required - thisObj.playMedia(); - } - thisObj.userClickedPlaylist = false; // reset - } - if (thisObj.seekTrigger == 'restart' \|\| thisObj.seekTrigger == 'chapter' \|\| thisObj.seekTrigger == 'transcript') { - // by clicking on any of these elements, user is likely intending to play - // Not included: elements where user might click multiple times in succession - // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play - thisObj.playMedia(); - } - else if (!thisObj.startedPlaying) { - if (thisObj.startTime > 0) { - if (thisObj.seeking) { - // a seek has already been initiated - // since canplaythrough has been triggered, the seek is complete - thisObj.seeking = false; - if (thisObj.autoplay \|\| thisObj.okToPlay) { - thisObj.playMedia(); - } - } - else { - // haven't started seeking yet - thisObj.seekTo(thisObj.startTime); - } - } - else if (thisObj.defaultChapter && typeof thisObj.selectedChapters !== 'undefined') { - thisObj.seekToChapter(thisObj.defaultChapter); - } - else { - // there is no startTime, therefore no seeking required - if (thisObj.autoplay \|\| thisObj.okToPlay) { - thisObj.playMedia(); - } - } - } - else if (thisObj.hasPlaylist) { - if ((thisObj.playlistIndex !== thisObj.$playlist.length) \|\| thisObj.loop) { - // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) - thisObj.playMedia(); - } - } - else { - // already started playing - // we're here because a new media source has been loaded and is ready to resume playback - thisObj.getPlayerState().then(function(currentState) { - if (thisObj.swappingSrc && currentState === 'stopped') { - // Safari is the only browser that returns value of 'stopped' (observed in 12.0.1 on MacOS) - // This prevents 'timeupdate' events from triggering, which prevents the new media src - // from resuming playback at swapTime - // This is a hack to jump start Safari - thisObj.startedPlaying = false; - if (thisObj.swapTime > 0) { - thisObj.seekTo(thisObj.swapTime); - } - else { - thisObj.playMedia(); - } - } - }); - } - -/ - - var thisObj = this; - - // Vimeo doesn't seem to support chaining of on() functions - // so each event listener must be attached separately - this.vimeoPlayer.on('loaded', function(vimeoId) { - // Triggered when a new video is loaded in the player - thisObj.onMediaNewSourceLoad(); - }); - this.vimeoPlayer.on('play', function(data) { - // Triggered when the video plays - thisObj.playing = true; - thisObj.startedPlaying = true; - thisObj.paused = false; - thisObj.refreshControls('playpause'); - }); - this.vimeoPlayer.on('ended', function(data) { - // Triggered any time the video playback reaches the end. - // Note: when loop is turned on, the ended event will not fire. - thisObj.playing = false; - thisObj.paused = true; - thisObj.onMediaComplete(); - }); - this.vimeoPlayer.on('bufferstart', function() { - // Triggered when buffering starts in the player. - // This is also triggered during preload and while seeking. - // There is no associated data with this event. - }); - this.vimeoPlayer.on('bufferend', function() { - // Triggered when buffering ends in the player. - // This is also triggered at the end of preload and seeking. - // There is no associated data with this event. - }); - this.vimeoPlayer.on('progress', function(data) { - // Triggered as the video is loaded. - // Reports back the amount of the video that has been buffered (NOT the amount played) - // Data has keys duration, percent, and seconds - }); - this.vimeoPlayer.on('seeking', function(data) { - // Triggered when the player starts seeking to a specific time. - // A timeupdate event will also be fired at the same time. - }); - this.vimeoPlayer.on('seeked', function(data) { - // Triggered when the player seeks to a specific time. - // A timeupdate event will also be fired at the same time. - }); - this.vimeoPlayer.on('timeupdate',function(data) { - // Triggered as the currentTime of the video updates. - // It generally fires every 250ms, but it may vary depending on the browser. - thisObj.onMediaUpdateTime(data['duration'], data['seconds']); - }); - this.vimeoPlayer.on('pause',function(data) { - // Triggered when the video pauses - if (!thisObj.clickedPlay) { - // 'pause' was triggered automatically, not initiated by user - // this happens in some browsers (not Chrome, as of 70.x) - // when swapping source (e.g., between tracks in a playlist, or swapping description) - if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { - // do NOT set playing to false. - // doing so prevents continual playback after new track is loaded - } - else { - thisObj.playing = false; - thisObj.paused = true; - } - } - else { - thisObj.playing = false; - thisObj.paused = true; - } - thisObj.clickedPlay = false; // done with this variable - thisObj.onMediaPause(); - thisObj.refreshControls('playpause'); - }); - this.vimeoPlayer.on('playbackratechange',function(data) { - // Triggered when the playback rate of the video in the player changes. - // The ability to change rate can be disabled by the creator - // and the event will not fire for those videos. - // data contains one key: 'playbackRate' - thisObj.vimeoPlaybackRate = data['playbackRate']; - }); - this.vimeoPlayer.on('texttrackchange', function(data) { - // Triggered when the active text track (captions/subtitles) changes. - // The values will be null if text tracks are turned off. - // data contains three keys: kind, label, language - }); - this.vimeoPlayer.on('volumechange',function(data) { - // Triggered when the volume in the player changes. - // Some devices do not support setting the volume of the video - // independently from the system volume, - // so this event will never fire on those devices. - thisObj.volume = data['volume'] 10; - }); - this.vimeoPlayer.on('error',function(data) { - // do something with the available data - // data contains three keys: message, method, name - // message: A user-friendly error message - // method: The Vimeo API method call that triggered the error - // name: Name of the error (not necesssarily user-friendly) - }); - }; - - AblePlayer.prototype.addEventListeners = function () { - - var thisObj, whichButton, thisElement; - - // Save the current object context in thisObj for use with inner functions. - thisObj = this; - - // Appropriately resize media player for full screen. - $(window).resize(function () { - thisObj.onWindowResize(); - }); - - // Refresh player if it changes from hidden to visible - // There is no event triggered by a change in visibility - // but MutationObserver works in most browsers (but NOT in IE 10 or earlier) - // http://caniuse.com/#feat=mutationobserver - if (window.MutationObserver) { - var target = this.$ableDiv[0]; - var observer = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - if (mutation.type === 'attributes' && mutation.attributeName === 'style') { - // the player's style attribute has changed. Check to see if it's visible - if (thisObj.$ableDiv.is(':visible')) { - thisObj.refreshControls('init'); - } - } - }); - }); - var config = { attributes: true, childList: true, characterData: true }; - observer.observe(target, config); - } - else { - // browser doesn't support MutationObserver - // TODO: Figure out an alternative solution for this rare use case in older browsers - // See example in buildplayer.js > useSvg() - } - if (typeof this.seekBar !== 'undefined') { - this.addSeekbarListeners(); - } - else { - // wait a bit and try again - // TODO: Should set this up to keep trying repeatedly. - // Seekbar listeners are critical. - setTimeout(function() { - if (typeof thisObj.seekBar !== 'undefined') { - thisObj.addSeekbarListeners(); - } - },2000); - } - - // handle clicks on player buttons - this.$controllerDiv.find('div[role="button"]').on('click',function(e){ - e.stopPropagation(); - thisObj.onClickPlayerButton(this); - }); - - // handle clicks (left only) anywhere on the page. If any popups are open, close them. - $(document).on('click',function(e) { - - if (e.button !== 0) { // not a left click - return false; - } - if ($('.able-popup:visible').length \|\| $('.able-volume-popup:visible')) { - // at least one popup is visible - thisObj.closePopups(); - } - }); - - // handle mouse movement over player; make controls visible again if hidden - this.$ableDiv.on('mousemove',function() { - if (thisObj.controlsHidden) { - thisObj.fadeControls('in'); - thisObj.controlsHidden = false; - // if there's already an active timeout, clear it and start timer again - if (thisObj.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(thisObj.hideControlsTimeout); - thisObj.hideControlsTimeoutStatus = 'clear'; - } - if (thisObj.hideControls) { - // after showing controls, hide them again after a brief timeout - thisObj.invokeHideControlsTimeout(); - } - } - else { - // if there's already an active timeout, clear it and start timer again - if (thisObj.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(thisObj.hideControlsTimeout); - thisObj.hideControlsTimeoutStatus = 'clear'; - if (thisObj.hideControls) { - thisObj.invokeHideControlsTimeout(); - } - } - } - }); - - // if user presses a key from anywhere on the page, show player controls - $(document).keydown(function(e) { - if (thisObj.controlsHidden) { - thisObj.fadeControls('in'); - thisObj.controlsHidden = false; - if (thisObj.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(thisObj.hideControlsTimeout); - thisObj.hideControlsTimeoutStatus = 'clear'; - } - if (thisObj.hideControls) { - // after showing controls, hide them again after a brief timeout - thisObj.invokeHideControlsTimeout(); - } - } - else { - // controls are visible - // if there's already an active timeout, clear it and start timer again - if (thisObj.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(thisObj.hideControlsTimeout); - thisObj.hideControlsTimeoutStatus = 'clear'; - - if (thisObj.hideControls) { - thisObj.invokeHideControlsTimeout(); - } - } - } - }); - - // handle local keydown events if this isn't the only player on the page; - // otherwise these are dispatched by global handler (see ableplayer-base,js) - this.$ableDiv.keydown(function (e) { - if (AblePlayer.nextIndex > 1) { - thisObj.onPlayerKeyPress(e); - } - }); - - // If stenoMode is enabled in an iframe, handle keydown events from the iframe - if (this.stenoMode && (typeof this.stenoFrameContents !== 'undefined')) { - this.stenoFrameContents.on('keydown',function(e) { - thisObj.onPlayerKeyPress(e); - }); - }; - - // transcript is not a child of this.$ableDiv - // therefore, must be added separately - if (this.$transcriptArea) { - this.$transcriptArea.on('keydown',function (e) { - if (AblePlayer.nextIndex > 1) { - thisObj.onPlayerKeyPress(e); - } - }); - } - - // handle clicks on playlist items - if (this.$playlist) { - this.$playlist.click(function(e) { - if (!thisObj.userClickedPlaylist) { - // stopgap in case multiple clicks are fired on the same playlist item - thisObj.userClickedPlaylist = true; // will be set to false after new src is loaded & canplaythrough is triggered - thisObj.playlistIndex = $(this).index(); - thisObj.cuePlaylistItem(thisObj.playlistIndex); - } - }); - } - - // Also play/pause when clicking on the media. - this.$media.click(function () { - thisObj.handlePlay(); - }); - - // add listeners for media events - if (this.player === 'html5') { - this.addHtml5MediaListeners(); - } - else if (this.player === 'vimeo') { - this.addVimeoListeners(); - } - else if (this.player === 'youtube') { - // Youtube doesn't give us time update events, so we just periodically generate them ourselves - setInterval(function () { - thisObj.onMediaUpdateTime(); - }, 300); - } - }; -})(jQuery); - -(function ($) { - - AblePlayer.prototype.initDragDrop = function ( which ) { - - // supported values of which: 'sign', 'transcript' - - // NOTE: "Drag and Drop" for Able Player is a metaphor only!!! - // HTML5 Drag & Drop API enables moving elements to new locations in the DOM - // Thats not our purpose; we're simply changing the visible position on-screen - // Therefore, the drag & drop interface was overhauled in v2.3.41 to simple - // use mouse (and keyboard) events to change CSS positioning properties - - // There are nevertheless lessons to be learned from Drag & Drop about accessibility: - // http://dev.opera.com/articles/accessible-drag-and-drop/ - - var thisObj, $window, $toolbar, windowName, $resizeHandle, resizeZIndex; - - thisObj = this; - - if (which === 'transcript') { - $window = this.$transcriptArea; - windowName = 'transcript-window'; - $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { - $window = this.$signWindow; - windowName = 'sign-window'; - $toolbar = this.$signToolbar; - } - - // add class to trigger change in cursor on hover - $toolbar.addClass('able-draggable'); - - // add resize handle selector to bottom right corner - $resizeHandle = $('<div>',{ - 'class': 'able-resizable' - }); - // assign z-index that's slightly higher than parent window - resizeZIndex = parseInt($window.css('z-index')) + 100; - $resizeHandle.css('z-index',resizeZIndex); - $window.append($resizeHandle); - - // add event listener to toolbar to start and end drag - // other event listeners will be added when drag starts - $toolbar.on('mousedown mouseup touchstart touchend', function(e) { - e.stopPropagation(); - if (e.type === 'mousedown' \|\| e.type === 'touchstart') { - if (!thisObj.windowMenuClickRegistered) { - thisObj.windowMenuClickRegistered = true; - thisObj.startMouseX = e.pageX; - thisObj.startMouseY = e.pageY; - thisObj.dragDevice = 'mouse'; // ok to use this even if device is a touchpad - thisObj.startDrag(which, $window); - } - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { - if (thisObj.dragging && thisObj.dragDevice === 'mouse') { - thisObj.endDrag(which); - } - } - return false; - }); - - // add event listeners for resizing - $resizeHandle.on('mousedown mouseup touchstart touchend', function(e) { - e.stopPropagation(); - if (e.type === 'mousedown' \|\| e.type === 'touchstart') { - if (!thisObj.windowMenuClickRegistered) { - thisObj.windowMenuClickRegistered = true; - thisObj.startMouseX = e.pageX; - thisObj.startMouseY = e.pageY; - thisObj.startResize(which, $window); - } - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { - if (thisObj.resizing) { - thisObj.endResize(which); - } - } - return false; - }); - - // whenever a window is clicked, bring it to the foreground - $window.on('click', function() { - - if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { - thisObj.updateZIndex(which); - } - thisObj.finishingDrag = false; - }); - - this.addWindowMenu(which,$window,windowName); - }; - - AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) { - - var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg, - $buttonLabel, tooltipId, $tooltip, $popup, - label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip, - $optionList, menuBaseId, options, i, $optionItem, option, menuId; - - thisObj = this; - - // Add a Boolean that will be set to true temporarily if window button or a menu item is clicked - // This will prevent the click event from also triggering a mousedown event on the toolbar - // (which would unexpectedly send the window into drag mode) - this.windowMenuClickRegistered = false; - - // Add another Boolean that will be set to true temporarily when mouseup fires at the end of a drag - // this will prevent the click event from being triggered - this.finishingDrag = false; - - // create an alert div and add it to window - $windowAlert = $('<div role="alert"></div>'); - $windowAlert.addClass('able-alert'); - $windowAlert.hide(); - $windowAlert.appendTo(this.$activeWindow); - $windowAlert.css({ - top: $window.offset().top - }); - - // add button to draggable window which triggers a popup menu - // for now, re-use preferences icon for this purpose - menuId = this.mediaId + '-' + windowName + '-menu'; - $newButton = $('<button>',{ - 'type': 'button', - 'tabindex': '0', - 'aria-label': this.tt.windowButtonLabel, - 'aria-haspopup': 'true', - 'aria-controls': menuId, - 'class': 'able-button-handler-preferences' - }); - if (this.iconType === 'font') { - $buttonIcon = $('<span>',{ - 'class': 'icon-preferences', - 'aria-hidden': 'true' - }); - $newButton.append($buttonIcon); - } - else { - // use image - buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png'; - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - - // add the visibly-hidden label for screen readers that don't support aria-label on the button - $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(this.tt.windowButtonLabel); - $newButton.append($buttonLabel); - - // add a tooltip that displays aria-label on mouseenter or focus - tooltipId = this.mediaId + '-' + windowName + '-tooltip'; - $tooltip = $('<div>',{ - 'class' : 'able-tooltip', - 'id' : tooltipId - }).hide(); - $newButton.on('mouseenter focus',function(e) { - var label = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - var tooltipY = position.top - buttonHeight - 5; - var tooltipX = 0; - var tooltipStyle = { - left: '', - right: tooltipX + 'px', - top: tooltipY + 'px' - }; - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle); - thisObj.showTooltip(tooltip); - $(this).on('mouseleave blur',function() { - AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - }); - }); - - // setup popup menu - $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window' - // define vars and assemble all the parts - if (which === 'transcript') { - this.$transcriptAlert = $windowAlert; - this.$transcriptPopupButton = $newButton; - this.$transcriptPopup = $popup; - this.$transcriptToolbar.prepend($windowAlert,$newButton,$tooltip,$popup); - } - else if (which === 'sign') { - this.$signAlert = $windowAlert; - this.$signPopupButton = $newButton; - this.$signPopup = $popup; - this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup); - } - - // handle button click - $newButton.on('click mousedown keydown',function(e) { - - if (thisObj.focusNotClick) { - return false; - } - if (thisObj.dragging) { - thisObj.dragKeys(which, e); - return false; - } - e.stopPropagation(); - if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { - // don't set windowMenuClickRegistered yet; that happens in handler function - thisObj.handleWindowButtonClick(which, e); - } - thisObj.finishingDrag = false; - }); - - this.addResizeDialog(which, $window); - }; - - AblePlayer.prototype.addResizeDialog = function (which, $window) { - - var thisObj, $windowPopup, $windowButton, - widthId, heightId, startingWidth, startingHeight, aspectRatio, - $resizeForm, $resizeWrapper, - $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, - $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, - tempWidth, tempHeight, - $saveButton, $cancelButton, newWidth, newHeight, resizeDialog; - - thisObj = this; - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - $windowButton = this.$signPopupButton; - } - - widthId = this.mediaId + '-resize-' + which + '-width'; - heightId = this.mediaId + '-resize-' + which + '-height'; - startingWidth = $window.width(); - startingHeight = $window.height(); - aspectRatio = startingWidth / startingHeight; - - $resizeForm = $('<div></div>',{ - 'class' : 'able-resize-form' - }); - - // inner container for all content, will be assigned to modal div's aria-describedby - $resizeWrapper = $('<div></div>'); - - // width field - $resizeWidthDiv = $('<div></div>'); - $resizeWidthInput = $('<input>',{ - 'type': 'text', - 'id': widthId, - 'value': startingWidth - }); - $resizeWidthLabel = $('<label>',{ - 'for': widthId - }).text(this.tt.width); - - // height field - $resizeHeightDiv = $('<div></div>'); - $resizeHeightInput = $('<input>',{ - 'type': 'text', - 'id': heightId, - 'value': startingHeight - }); - $resizeHeightLabel = $('<label>',{ - 'for': heightId - }).text(this.tt.height); - - if (which === 'sign') { - // make height a read-only field - // and calculate its value based on width to preserve aspect ratio - $resizeHeightInput.prop('readonly',true); - $resizeWidthInput.on('input',function() { - tempWidth = $(this).val(); - tempHeight = Math.round(tempWidth/aspectRatio, 0); - $resizeHeightInput.val(tempHeight); - }) - } - - // Add save and cancel buttons. - $saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - $cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - $saveButton.on('click',function () { - newWidth = $('#' + widthId).val(); - newHeight = $('#' + heightId).val(); - if (newWidth !== startingWidth \|\| newHeight !== startingHeight) { - thisObj.resizeObject(which,newWidth,newHeight); - thisObj.updateCookie(which); - } - resizeDialog.hide(); - $windowPopup.hide(); - $windowButton.focus(); - }); - $cancelButton.on('click',function () { - resizeDialog.hide(); - $windowPopup.hide(); - $windowButton.focus(); - }); - - // Now assemble all the parts - $resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput); - $resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput); - $resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv); - $resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton); - - // must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers - $('body').append($resizeForm); - resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'alert', this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em'); - if (which === 'transcript') { - this.transcriptResizeDialog = resizeDialog; - } - else if (which === 'sign') { - this.signResizeDialog = resizeDialog; - } - }; - - AblePlayer.prototype.handleWindowButtonClick = function (which, e) { - - var thisObj, $windowPopup, $windowButton, $toolbar, popupTop; - - thisObj = this; - - if (this.focusNotClick) { - // transcript or sign window has just opened, - // and focus moved to the window button - // ignore the keystroke that triggered the popup - return false; - } - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - $windowButton = this.$transcriptPopupButton; - $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - $windowButton = this.$signPopupButton; - $toolbar = this.$signToolbar; - } - - if (e.type === 'keydown') { - // user pressed a key - if (e.which === 32 \|\| e.which === 13) { - // this was Enter or space - this.windowMenuClickRegistered = true; - } - else if (e.which === 27) { // escape - if ($windowPopup.is(':visible')) { - // close the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - } - else { - // popup isn't open. Close the window - if (which === 'sign') { - this.handleSignToggle(); - } - else if (which === 'transcript') { - this.handleTranscriptToggle(); - } - } - } - else { - return false; - } - } - else { - // this was a mouse event - this.windowMenuClickRegistered = true; - } - - if ($windowPopup.is(':visible')) { - $windowPopup.hide(200,'',function() { - thisObj.windowMenuClickRegistered = false; // reset - }); - $windowPopup.find('li').removeClass('able-focus'); - $windowButton.attr('aria-expanded','false').focus(); - } - else { - // first, be sure window is on top - this.updateZIndex(which); - popupTop = $windowButton.position().top + $windowButton.outerHeight(); - $windowPopup.css('top', popupTop); - $windowPopup.show(200,'',function() { - $windowButton.attr('aria-expanded','true'); - $(this).find('li').first().focus().addClass('able-focus'); - thisObj.windowMenuClickRegistered = false; // reset - }); - } - }; - - AblePlayer.prototype.handleMenuChoice = function (which, choice, e) { - - var thisObj, $window, $windowPopup, $windowButton, resizeDialog, width, height, $thisRadio; - - thisObj = this; - if (which === 'transcript') { - $window = this.$transcriptArea; - $windowPopup = this.$transcriptPopup; - $windowButton = this.$transcriptPopupButton; - resizeDialog = this.transcriptResizeDialog; - } - else if (which === 'sign') { - $window = this.$signWindow; - $windowPopup = this.$signPopup; - $windowButton = this.$signPopupButton; - resizeDialog = this.signResizeDialog; - } - this.$activeWindow = $window; - - if (e.type === 'keydown') { - if (e.which === 27) { // escape - // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - return false; - } - else { - // all other keys will be handled by upstream functions - if (choice !== 'close') { - this.$activeWindow = $window; - } - return false; - } - } - - // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - }); - if (choice !== 'close') { - $windowButton.focus(); - } - if (choice === 'move') { - - // temporarily add role="application" to activeWindow - // otherwise, screen readers incercept arrow keys and moving window will not work - this.$activeWindow.attr('role','application'); - - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - if (e.type === 'keydown') { - this.dragDevice = 'keyboard'; - } - else { - this.dragDevice = 'mouse'; - } - this.startDrag(which, $window); - $windowPopup.hide().parent().focus(); - } - else if (choice == 'resize') { - // resize through the menu uses a form, not drag - var resizeFields = resizeDialog.getInputs(); - if (resizeFields) { - // reset width and height values in form - resizeFields[0].value = $window.width(); - resizeFields[1].value = $window.height(); - } - resizeDialog.show(); - } - else if (choice == 'close') { - // close window, place focus on corresponding button on controller bar - if (which === 'transcript') { - this.closingTranscript = true; // stopgrap to prevent double-firing of keypress - this.handleTranscriptToggle(); - } - else if (which === 'sign') { - this.closingSign = true; // stopgrap to prevent double-firing of keypress - this.handleSignToggle(); - } - } - }; - - AblePlayer.prototype.startDrag = function(which, $element) { - - var thisObj, $windowPopup, zIndex, startPos, newX, newY; - - thisObj = this; - - if (!this.$activeWindow) { - this.$activeWindow = $element; - } - this.dragging = true; - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } - - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - - // if window's popup menu is open, close it - if ($windowPopup.is(':visible')) { - $windowPopup.hide(); - } - - // be sure this window is on top - this.updateZIndex(which); - - // get starting position of element - startPos = this.$activeWindow.position(); - this.dragStartX = startPos.left; - this.dragStartY = startPos.top; - - if (typeof this.startMouseX === 'undefined') { - this.dragDevice = 'keyboard'; - this.dragKeyX = this.dragStartX; - this.dragKeyY = this.dragStartY; - // add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd() - this.startingDrag = true; - } - else { - this.dragDevice = 'mouse'; - // get offset between mouse position and top left corner of draggable element - this.dragOffsetX = this.startMouseX - this.dragStartX; - this.dragOffsetY = this.startMouseY - this.dragStartY; - } - - // prepare element for dragging - this.$activeWindow.addClass('able-drag').css({ - 'position': 'absolute', - 'top': this.dragStartY + 'px', - 'left': this.dragStartX + 'px' - }).focus(); - - // add device-specific event listeners - if (this.dragDevice === 'mouse') { // might also be a touchpad - $(document).on('mousemove touchmove',function(e) { - if (thisObj.dragging) { - // calculate new top left based on current mouse position - offset - newX = e.pageX - thisObj.dragOffsetX; - newY = e.pageY - thisObj.dragOffsetY; - thisObj.resetDraggedObject( newX, newY ); - } - }); - } - else if (this.dragDevice === 'keyboard') { - this.$activeWindow.on('keydown',function(e) { - if (thisObj.dragging) { - thisObj.dragKeys(which, e); - } - }); - } - return false; - }; - - AblePlayer.prototype.dragKeys = function(which, e) { - - var key, keySpeed; - - var thisObj = this; - - // stopgap to prevent firing on initial Enter or space - // that selected "Move" from menu - if (this.startingDrag) { - this.startingDrag = false; - return false; - } - key = e.which; - keySpeed = 10; // pixels per keypress event - - switch (key) { - case 37: // left - case 63234: - this.dragKeyX -= keySpeed; - break; - case 38: // up - case 63232: - this.dragKeyY -= keySpeed; - break; - case 39: // right - case 63235: - this.dragKeyX += keySpeed; - break; - case 40: // down - case 63233: - this.dragKeyY += keySpeed; - break; - case 13: // enter - case 27: // escape - this.endDrag(which); - return false; - default: - return false; - } - this.resetDraggedObject(this.dragKeyX,this.dragKeyY); - if (e.preventDefault) { - e.preventDefault(); - } - return false; - }; - - AblePlayer.prototype.resetDraggedObject = function ( x, y) { - - this.$activeWindow.css({ - 'left': x + 'px', - 'top': y + 'px' - }); - }, - - AblePlayer.prototype.resizeObject = function ( which, width, height ) { - - var innerHeight; - - // which is either 'transcript' or 'sign' - this.$activeWindow.css({ - 'width': width + 'px', - 'height': height + 'px' - }); - - if (which === 'transcript') { - // $activeWindow is the outer $transcriptArea - // but the inner able-transcript also needs to be resized proporitionally - // (it's 50px less than its outer container) - innerHeight = height - 50; - this.$transcriptDiv.css('height', innerHeight + 'px'); - } - }; - - AblePlayer.prototype.endDrag = function(which) { - - var thisObj, $window, $windowPopup, $windowButton; - thisObj = this; - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - $windowButton = this.$signPopupButton; - } - - $(document).off('mousemove mouseup touchmove touchup'); - this.$activeWindow.off('keydown').removeClass('able-drag'); - // restore activeWindow role from 'application' to 'dialog' - this.$activeWindow.attr('role','dialog'); - this.$activeWindow = null; - - if (this.dragDevice === 'keyboard') { - $windowButton.focus(); - } - this.dragging = false; - - // save final position of dragged element - this.updateCookie(which); - - // reset starting mouse positions - this.startMouseX = undefined; - this.startMouseY = undefined; - - // Boolean to stop stray events from firing - this.windowMenuClickRegistered = false; - this.finishingDrag = true; // will be reset after window click event - // finishingDrag should e reset after window click event, - // which is triggered automatically after mouseup - // However, in case that's not reliable in some browsers - // need to ensure this gets cancelled - setTimeout(function() { - thisObj.finishingDrag = false; - }, 100); - }; - - AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) { - - // return true if mouse is close to bottom right corner (resize target) - var tolerance, position, top, left, width, height, bottom, right; - - tolerance = 10; // number of pixels in both directions considered "close enough" - - // first, get position of element - position = $window.offset(); - top = position.top; - left = position.left; - width = $window.width(); - height = $window.height(); - bottom = top + height; - right = left + width; - if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) { - return true; - } - return false; - }; - - AblePlayer.prototype.startResize = function(which, $element) { - - var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight; - - thisObj = this; - this.$activeWindow = $element; - this.resizing = true; - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } - - // if window's popup menu is open, close it & place focus on button (???) - if ($windowPopup.is(':visible')) { - $windowPopup.hide().parent().focus(); - } - - // get starting width and height - startPos = this.$activeWindow.position(); - this.dragKeyX = this.dragStartX; - this.dragKeyY = this.dragStartY; - this.dragStartWidth = this.$activeWindow.width(); - this.dragStartHeight = this.$activeWindow.height(); - - // add event listeners - $(document).on('mousemove touchmove',function(e) { - if (thisObj.resizing) { - // calculate new width and height based on changes to mouse position - newWidth = thisObj.dragStartWidth + (e.pageX - thisObj.startMouseX); - newHeight = thisObj.dragStartHeight + (e.pageY - thisObj.startMouseY); - thisObj.resizeObject( which, newWidth, newHeight ); - } - }); - return false; - }; - - AblePlayer.prototype.endResize = function(which) { - - var $window, $windowPopup, $windowButton; - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - $windowButton = this.$signPopupButton; - } - - $(document).off('mousemove mouseup touchmove touchup'); - this.$activeWindow.off('keydown'); - $windowButton.show().focus(); - this.resizing = false; - this.$activeWindow.removeClass('able-resize'); - - // save final width and height of dragged element - this.updateCookie(which); - - // Booleans for preventing stray events - this.windowMenuClickRegistered = false; - this.finishingDrag = true; - - // finishingDrag should e reset after window click event, - // which is triggered automatically after mouseup - // However, in case that's not reliable in some browsers - // need to ensure this gets cancelled - setTimeout(function() { - this.finishingDrag = false; - }, 100); - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.initSignLanguage = function() { - - // Sign language is only currently supported in HTML5 player, not YouTube or Vimeo - if (this.player === 'html5') { - // check to see if there's a sign language video accompanying this video - // check only the first source - // If sign language is provided, it must be provided for all sources - this.signFile = this.$sources.first().attr('data-sign-src'); - if (this.signFile) { - if (this.isIOS()) { - // IOS does not allow multiple videos to play simultaneously - // Therefore, sign language as rendered by Able Player unfortunately won't work - this.hasSignLanguage = false; - if (this.debug) { - - } - } - else { - if (this.debug) { - - } - this.hasSignLanguage = true; - this.injectSignPlayerCode(); - } - } - else { - this.hasSignLanguage = false; - } - } - else { - this.hasSignLanguage = false; - } - }; - - AblePlayer.prototype.injectSignPlayerCode = function() { - - // create and inject surrounding HTML structure - - var thisObj, signVideoId, signVideoWidth, i, signSrc, srcType, $signSource; - - thisObj = this; - - signVideoWidth = this.getDefaultWidth('sign'); - - signVideoId = this.mediaId + '-sign'; - this.$signVideo = $('<video>',{ - 'id' : signVideoId, - 'tabindex' : '-1' - }); - this.signVideo = this.$signVideo[0]; - // for each original <source>, add a <source> to the sign <video> - for (i=0; i < this.$sources.length; i++) { - signSrc = this.$sources[i].getAttribute('data-sign-src'); - srcType = this.$sources[i].getAttribute('type'); - if (signSrc) { - $signSource = $('<source>',{ - 'src' : signSrc, - 'type' : srcType - }); - this.$signVideo.append($signSource); - } - else { - // source is missing a sign language version - // can't include sign language - this.hasSignLanguage = false; - break; - } - } - - this.$signWindow = $('<div>',{ - 'class' : 'able-sign-window', - 'role': 'dialog', - 'aria-label': this.tt.sign - }); - this.$signToolbar = $('<div>',{ - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' - }); - - this.$signWindow.append(this.$signToolbar, this.$signVideo); - - this.$ableWrapper.append(this.$signWindow); - - // make it draggable - this.initDragDrop('sign'); - - if (this.prefSign === 1) { - // sign window is on. Go ahead and position it and show it - this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); - } - else { - this.$signWindow.hide(); - } - }; - -})(jQuery); - -(function ($) { - // Look up ISO 639-1 language codes to be used as subtitle labels - // In some instances "name" has been trunctation for readability - // Sources: - // http://stackoverflow.com/questions/3217492/list-of-language-codes-in-yaml-or-json/4900304#4900304 - // https://www.venea.net/web/culture_code - - var isoLangs = { - "ab":{ - "name":"Abkhaz", - "nativeName":"аҧсуа" - }, - "aa":{ - "name":"Afar", - "nativeName":"Afaraf" - }, - "af":{ - "name":"Afrikaans", - "nativeName":"Afrikaans" - }, - "ak":{ - "name":"Akan", - "nativeName":"Akan" - }, - "sq":{ - "name":"Albanian", - "nativeName":"Shqip" - }, - "am":{ - "name":"Amharic", - "nativeName":"አማርኛ" - }, - "ar":{ - "name":"Arabic", - "nativeName":"العربية" - }, - "an":{ - "name":"Aragonese", - "nativeName":"Aragonés" - }, - "hy":{ - "name":"Armenian", - "nativeName":"Հայերեն" - }, - "as":{ - "name":"Assamese", - "nativeName":"অসমীয়া" - }, - "av":{ - "name":"Avaric", - "nativeName":"авар мацӀ, магӀарул мацӀ" - }, - "ae":{ - "name":"Avestan", - "nativeName":"avesta" - }, - "ay":{ - "name":"Aymara", - "nativeName":"aymar aru" - }, - "az":{ - "name":"Azerbaijani", - "nativeName":"azərbaycan dili" - }, - "bm":{ - "name":"Bambara", - "nativeName":"bamanankan" - }, - "ba":{ - "name":"Bashkir", - "nativeName":"башҡорт теле" - }, - "eu":{ - "name":"Basque", - "nativeName":"euskara, euskera" - }, - "be":{ - "name":"Belarusian", - "nativeName":"Беларуская" - }, - "bn":{ - "name":"Bengali", - "nativeName":"বাংলা" - }, - "bh":{ - "name":"Bihari", - "nativeName":"भोजपुरी" - }, - "bi":{ - "name":"Bislama", - "nativeName":"Bislama" - }, - "bs":{ - "name":"Bosnian", - "nativeName":"bosanski jezik" - }, - "br":{ - "name":"Breton", - "nativeName":"brezhoneg" - }, - "bg":{ - "name":"Bulgarian", - "nativeName":"български език" - }, - "my":{ - "name":"Burmese", - "nativeName":"ဗမာစာ" - }, - "ca":{ - "name":"Catalan", - "nativeName":"Català" - }, - "ch":{ - "name":"Chamorro", - "nativeName":"Chamoru" - }, - "ce":{ - "name":"Chechen", - "nativeName":"нохчийн мотт" - }, - "ny":{ - "name":"Chichewa", - "nativeName":"chiCheŵa, chinyanja" - }, - "zh":{ - "name":"Chinese", - "nativeName":"中文 (Zhōngwén), 汉语, 漢語" - }, - "cv":{ - "name":"Chuvash", - "nativeName":"чӑваш чӗлхи" - }, - "kw":{ - "name":"Cornish", - "nativeName":"Kernewek" - }, - "co":{ - "name":"Corsican", - "nativeName":"corsu, lingua corsa" - }, - "cr":{ - "name":"Cree", - "nativeName":"ᓀᐦᐃᔭᐍᐏᐣ" - }, - "hr":{ - "name":"Croatian", - "nativeName":"hrvatski" - }, - "cs":{ - "name":"Czech", - "nativeName":"česky, čeština" - }, - "da":{ - "name":"Danish", - "nativeName":"dansk" - }, - "dv":{ - "name":"Divehi", - "nativeName":"ދިވެހި" - }, - "nl":{ - "name":"Dutch", - "nativeName":"Nederlands, Vlaams" - }, - "en":{ - "name":"English", - "nativeName":"English" - }, - "eo":{ - "name":"Esperanto", - "nativeName":"Esperanto" - }, - "et":{ - "name":"Estonian", - "nativeName":"eesti, eesti keel" - }, - "ee":{ - "name":"Ewe", - "nativeName":"Eʋegbe" - }, - "fo":{ - "name":"Faroese", - "nativeName":"føroyskt" - }, - "fj":{ - "name":"Fijian", - "nativeName":"vosa Vakaviti" - }, - "fi":{ - "name":"Finnish", - "nativeName":"suomi, suomen kieli" - }, - "fr":{ - "name":"French", - "nativeName":"français, langue française" - }, - "ff":{ - "name":"Fula", - "nativeName":"Fulfulde, Pulaar, Pular" - }, - "gl":{ - "name":"Galician", - "nativeName":"Galego" - }, - "ka":{ - "name":"Georgian", - "nativeName":"ქართული" - }, - "de":{ - "name":"German", - "nativeName":"Deutsch" - }, - "el":{ - "name":"Greek", - "nativeName":"Ελληνικά" - }, - "gn":{ - "name":"Guaraní", - "nativeName":"Avañeẽ" - }, - "gu":{ - "name":"Gujarati", - "nativeName":"ગુજરાતી" - }, - "ht":{ - "name":"Haitian", - "nativeName":"Kreyòl ayisyen" - }, - "ha":{ - "name":"Hausa", - "nativeName":"Hausa, هَوُسَ" - }, - "he":{ - "name":"Hebrew", - "nativeName":"עברית" - }, - "hz":{ - "name":"Herero", - "nativeName":"Otjiherero" - }, - "hi":{ - "name":"Hindi", - "nativeName":"हिन्दी, हिंदी" - }, - "ho":{ - "name":"Hiri Motu", - "nativeName":"Hiri Motu" - }, - "hu":{ - "name":"Hungarian", - "nativeName":"Magyar" - }, - "ia":{ - "name":"Interlingua", - "nativeName":"Interlingua" - }, - "id":{ - "name":"Indonesian", - "nativeName":"Bahasa Indonesia" - }, - "ie":{ - "name":"Interlingue", - "nativeName":"Originally called Occidental; then Interlingue after WWII" - }, - "ga":{ - "name":"Irish", - "nativeName":"Gaeilge" - }, - "ig":{ - "name":"Igbo", - "nativeName":"Asụsụ Igbo" - }, - "ik":{ - "name":"Inupiaq", - "nativeName":"Iñupiaq, Iñupiatun" - }, - "io":{ - "name":"Ido", - "nativeName":"Ido" - }, - "is":{ - "name":"Icelandic", - "nativeName":"Íslenska" - }, - "it":{ - "name":"Italian", - "nativeName":"Italiano" - }, - "iu":{ - "name":"Inuktitut", - "nativeName":"ᐃᓄᒃᑎᑐᑦ" - }, - "ja":{ - "name":"Japanese", - "nativeName":"日本語 (にほんご／にっぽんご)" - }, - "jv":{ - "name":"Javanese", - "nativeName":"basa Jawa" - }, - "kl":{ - "name":"Kalaallisut", - "nativeName":"kalaallisut, kalaallit oqaasii" - }, - "kn":{ - "name":"Kannada", - "nativeName":"ಕನ್ನಡ" - }, - "kr":{ - "name":"Kanuri", - "nativeName":"Kanuri" - }, - "ks":{ - "name":"Kashmiri", - "nativeName":"कश्मीरी, كشميري‎" - }, - "kk":{ - "name":"Kazakh", - "nativeName":"Қазақ тілі" - }, - "km":{ - "name":"Khmer", - "nativeName":"ភាសាខ្មែរ" - }, - "ki":{ - "name":"Kikuyu", - "nativeName":"Gĩkũyũ" - }, - "rw":{ - "name":"Kinyarwanda", - "nativeName":"Ikinyarwanda" - }, - "ky":{ - "name":"Kyrgyz", - "nativeName":"кыргыз тили" - }, - "kv":{ - "name":"Komi", - "nativeName":"коми кыв" - }, - "kg":{ - "name":"Kongo", - "nativeName":"KiKongo" - }, - "ko":{ - "name":"Korean", - "nativeName":"한국어 (韓國語), 조선말 (朝鮮語)" - }, - "ku":{ - "name":"Kurdish", - "nativeName":"Kurdî, كوردی‎" - }, - "kj":{ - "name":"Kuanyama", - "nativeName":"Kuanyama" - }, - "la":{ - "name":"Latin", - "nativeName":"latine, lingua latina" - }, - "lb":{ - "name":"Luxembourgish", - "nativeName":"Lëtzebuergesch" - }, - "lg":{ - "name":"Luganda", - "nativeName":"Luganda" - }, - "li":{ - "name":"Limburgish", - "nativeName":"Limburgs" - }, - "ln":{ - "name":"Lingala", - "nativeName":"Lingála" - }, - "lo":{ - "name":"Lao", - "nativeName":"ພາສາລາວ" - }, - "lt":{ - "name":"Lithuanian", - "nativeName":"lietuvių kalba" - }, - "lu":{ - "name":"Luba-Katanga", - "nativeName":"" - }, - "lv":{ - "name":"Latvian", - "nativeName":"latviešu valoda" - }, - "gv":{ - "name":"Manx", - "nativeName":"Gaelg, Gailck" - }, - "mk":{ - "name":"Macedonian", - "nativeName":"македонски јазик" - }, - "mg":{ - "name":"Malagasy", - "nativeName":"Malagasy fiteny" - }, - "ms":{ - "name":"Malay", - "nativeName":"bahasa Melayu, بهاس ملايو‎" - }, - "ml":{ - "name":"Malayalam", - "nativeName":"മലയാളം" - }, - "mt":{ - "name":"Maltese", - "nativeName":"Malti" - }, - "mi":{ - "name":"Māori", - "nativeName":"te reo Māori" - }, - "mr":{ - "name":"Marathi", - "nativeName":"मराठी" - }, - "mh":{ - "name":"Marshallese", - "nativeName":"Kajin M̧ajeļ" - }, - "mn":{ - "name":"Mongolian", - "nativeName":"монгол" - }, - "na":{ - "name":"Nauru", - "nativeName":"Ekakairũ Naoero" - }, - "nv":{ - "name":"Navajo", - "nativeName":"Diné bizaad, Dinékʼehǰí" - }, - "nb":{ - "name":"Norwegian Bokmål", - "nativeName":"Norsk bokmål" - }, - "nd":{ - "name":"North Ndebele", - "nativeName":"isiNdebele" - }, - "ne":{ - "name":"Nepali", - "nativeName":"नेपाली" - }, - "ng":{ - "name":"Ndonga", - "nativeName":"Owambo" - }, - "nn":{ - "name":"Norwegian Nynorsk", - "nativeName":"Norsk nynorsk" - }, - "no":{ - "name":"Norwegian", - "nativeName":"Norsk" - }, - "ii":{ - "name":"Nuosu", - "nativeName":"ꆈꌠ꒿ Nuosuhxop" - }, - "nr":{ - "name":"South Ndebele", - "nativeName":"isiNdebele" - }, - "oc":{ - "name":"Occitan", - "nativeName":"Occitan" - }, - "oj":{ - "name":"Ojibwe", - "nativeName":"ᐊᓂᔑᓈᐯᒧᐎᓐ" - }, - "cu":{ - "name":"Church Slavonic", - "nativeName":"ѩзыкъ словѣньскъ" - }, - "om":{ - "name":"Oromo", - "nativeName":"Afaan Oromoo" - }, - "or":{ - "name":"Oriya", - "nativeName":"ଓଡ଼ିଆ" - }, - "os":{ - "name":"Ossetian", - "nativeName":"ирон æвзаг" - }, - "pa":{ - "name":"Punjabi", - "nativeName":"ਪੰਜਾਬੀ, پنجابی‎" - }, - "pi":{ - "name":"Pāli", - "nativeName":"पाऴि" - }, - "fa":{ - "name":"Persian", - "nativeName":"فارسی" - }, - "pl":{ - "name":"Polish", - "nativeName":"polski" - }, - "ps":{ - "name":"Pashto", - "nativeName":"پښتو" - }, - "pt":{ - "name":"Portuguese", - "nativeName":"Português" - }, - "qu":{ - "name":"Quechua", - "nativeName":"Runa Simi, Kichwa" - }, - "rm":{ - "name":"Romansh", - "nativeName":"rumantsch grischun" - }, - "rn":{ - "name":"Kirundi", - "nativeName":"kiRundi" - }, - "ro":{ - "name":"Romanian", - "nativeName":"română" - }, - "ru":{ - "name":"Russian", - "nativeName":"русский язык" - }, - "sa":{ - "name":"Sanskrit", - "nativeName":"संस्कृतम्" - }, - "sc":{ - "name":"Sardinian", - "nativeName":"sardu" - }, - "sd":{ - "name":"Sindhi", - "nativeName":"सिन्धी, سنڌي، سندھی‎" - }, - "se":{ - "name":"Northern Sami", - "nativeName":"Davvisámegiella" - }, - "sm":{ - "name":"Samoan", - "nativeName":"gagana faa Samoa" - }, - "sg":{ - "name":"Sango", - "nativeName":"yângâ tî sängö" - }, - "sr":{ - "name":"Serbian", - "nativeName":"српски језик" - }, - "gd":{ - "name":"Gaelic", - "nativeName":"Gàidhlig" - }, - "sn":{ - "name":"Shona", - "nativeName":"chiShona" - }, - "si":{ - "name":"Sinhalese", - "nativeName":"සිංහල" - }, - "sk":{ - "name":"Slovak", - "nativeName":"slovenčina" - }, - "sl":{ - "name":"Slovene", - "nativeName":"slovenščina" - }, - "so":{ - "name":"Somali", - "nativeName":"Soomaaliga, af Soomaali" - }, - "st":{ - "name":"Southern Sotho", - "nativeName":"Sesotho" - }, - "es":{ - "name":"Spanish", - "nativeName":"español, castellano" - }, - "su":{ - "name":"Sundanese", - "nativeName":"Basa Sunda" - }, - "sw":{ - "name":"Swahili", - "nativeName":"Kiswahili" - }, - "ss":{ - "name":"Swati", - "nativeName":"SiSwati" - }, - "sv":{ - "name":"Swedish", - "nativeName":"svenska" - }, - "ta":{ - "name":"Tamil", - "nativeName":"தமிழ்" - }, - "te":{ - "name":"Telugu", - "nativeName":"తెలుగు" - }, - "tg":{ - "name":"Tajik", - "nativeName":"тоҷикӣ, toğikī, تاجیکی‎" - }, - "th":{ - "name":"Thai", - "nativeName":"ไทย" - }, - "ti":{ - "name":"Tigrinya", - "nativeName":"ትግርኛ" - }, - "bo":{ - "name":"Tibetan", - "nativeName":"བོད་ཡིག" - }, - "tk":{ - "name":"Turkmen", - "nativeName":"Türkmen, Түркмен" - }, - "tl":{ - "name":"Tagalog", - "nativeName":"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔" - }, - "tn":{ - "name":"Tswana", - "nativeName":"Setswana" - }, - "to":{ - "name":"Tonga", - "nativeName":"faka Tonga" - }, - "tr":{ - "name":"Turkish", - "nativeName":"Türkçe" - }, - "ts":{ - "name":"Tsonga", - "nativeName":"Xitsonga" - }, - "tt":{ - "name":"Tatar", - "nativeName":"татарча, tatarça, تاتارچا‎" - }, - "tw":{ - "name":"Twi", - "nativeName":"Twi" - }, - "ty":{ - "name":"Tahitian", - "nativeName":"Reo Tahiti" - }, - "ug":{ - "name":"Uyghur", - "nativeName":"Uyƣurqə, ئۇيغۇرچە‎" - }, - "uk":{ - "name":"Ukrainian", - "nativeName":"українська" - }, - "ur":{ - "name":"Urdu", - "nativeName":"اردو" - }, - "uz":{ - "name":"Uzbek", - "nativeName":"zbek, Ўзбек, أۇزبېك‎" - }, - "ve":{ - "name":"Venda", - "nativeName":"Tshivenḓa" - }, - "vi":{ - "name":"Vietnamese", - "nativeName":"Tiếng Việt" - }, - "vo":{ - "name":"Volapük", - "nativeName":"Volapük" - }, - "wa":{ - "name":"Walloon", - "nativeName":"Walon" - }, - "cy":{ - "name":"Welsh", - "nativeName":"Cymraeg" - }, - "wo":{ - "name":"Wolof", - "nativeName":"Wollof" - }, - "fy":{ - "name":"Western Frisian", - "nativeName":"Frysk" - }, - "xh":{ - "name":"Xhosa", - "nativeName":"isiXhosa" - }, - "yi":{ - "name":"Yiddish", - "nativeName":"ייִדיש" - }, - "yo":{ - "name":"Yoruba", - "nativeName":"Yorùbá" - }, - "za":{ - "name":"Zhuang", - "nativeName":"Saɯ cueŋƅ, Saw cuengh" - }, - "ar-dz":{ - "name":"Arabic (Algeria)", - "nativeName":"العربية (الجزائر)" - }, - "ar-bh":{ - "name":"Arabic (Bahrain)", - "nativeName":"العربية (البحرين)" - }, - "ar-eg":{ - "name":"Arabic (Egypt)", - "nativeName":"العربية (مصر)" - }, - "ar-iq":{ - "name":"Arabic (Iraq)", - "nativeName":"العربية (العراق)" - }, - "ar-jo":{ - "name":"Arabic (Jordan)", - "nativeName":"العربية (الأردن)" - }, - "ar-kw":{ - "name":"Arabic (Kuwait)", - "nativeName":"العربية (الكويت)" - }, - "ar-lb":{ - "name":"Arabic (Lebanon)", - "nativeName":"العربية (لبنان)" - }, - "ar-ly":{ - "name":"Arabic (Libya)", - "nativeName":"العربية (ليبيا)" - }, - "ar-ma":{ - "name":"Arabic (Morocco)", - "nativeName":"العربية (المملكة المغربية)" - }, - "ar-om":{ - "name":"Arabic (Oman)", - "nativeName":"العربية (عمان)" - }, - "ar-qa":{ - "name":"Arabic (Qatar)", - "nativeName":"العربية (قطر)" - }, - "ar-sa":{ - "name":"Arabic (Saudi Arabia)", - "nativeName":"العربية (المملكة العربية السعودية)" - }, - "ar-sy":{ - "name":"Arabic (Syria)", - "nativeName":"العربية (سوريا)" - }, - "ar-tn":{ - "name":"Arabic (Tunisia)", - "nativeName":"العربية (تونس)" - }, - "ar-ae":{ - "name":"Arabic (U.A.E.)", - "nativeName":"العربية (الإمارات العربية المتحدة)" - }, - "ar-ye":{ - "name":"Arabic (Yemen)", - "nativeName":"العربية (اليمن)" - }, - "de-at":{ - "name":"German (Austria)", - "nativeName":"Deutsch (Österreich)" - }, - "de-li":{ - "name":"German (Liechtenstein)", - "nativeName":"Deutsch (Liechtenstein)" - }, - "de-lu":{ - "name":"German (Luxembourg)", - "nativeName":"Deutsch (Luxemburg)" - }, - "de-ch":{ - "name":"German (Switzerland)", - "nativeName":"Deutsch (Schweiz)" - }, - "en-au":{ - "name":"English (Australia)", - "nativeName":"English (Australia)" - }, - "en-bz":{ - "name":"English (Belize)", - "nativeName":"English (Belize)" - }, - "en-ca":{ - "name":"English (Canada)", - "nativeName":"English (Canada)" - }, - "en-ie":{ - "name":"English (Ireland)", - "nativeName":"English (Ireland)" - }, - "en-jm":{ - "name":"English (Jamaica)", - "nativeName":"English (Jamaica)" - }, - "en-nz":{ - "name":"English (New Zealand)", - "nativeName":"" - }, - "en-za":{ - "name":"English (South Africa)", - "nativeName":"English (South Africa)" - }, - "en-tt":{ - "name":"English (Trinidad)", - "nativeName":"English (Trinidad y Tobago)" - }, - "en-gb":{ - "name":"English (United Kingdom)", - "nativeName":"English (United Kingdom)" - }, - "en-us":{ - "name":"English (United States)", - "nativeName":"English (United States)" - }, - "es-ar":{ - "name":"Spanish (Argentina)", - "nativeName":"Español (Argentina)" - }, - "es-bo":{ - "name":"Spanish (Bolivia)", - "nativeName":"Español (Bolivia)" - }, - "es-cl":{ - "name":"Spanish (Chile)", - "nativeName":"Español (Chile)" - }, - "es-co":{ - "name":"Spanish (Colombia)", - "nativeName":"Español (Colombia)" - }, - "es-cr":{ - "name":"Spanish (Costa Rica)", - "nativeName":"Español (Costa Rica)" - }, - "es-do":{ - "name":"Spanish (Dominican Republic)", - "nativeName":"Español (República Dominicana)" - }, - "es-ec":{ - "name":"Spanish (Ecuador)", - "nativeName":"Español (Ecuador)" - }, - "es-sv":{ - "name":"Spanish (El Salvador)", - "nativeName":"Español (El Salvador)" - }, - "es-gt":{ - "name":"Spanish (Guatemala)", - "nativeName":"Español (Guatemala)" - }, - "es-hn":{ - "name":"Spanish (Honduras)", - "nativeName":"Español (Honduras)" - }, - "es-mx":{ - "name":"Spanish (Mexico)", - "nativeName":"Español (México)" - }, - "es-ni":{ - "name":"Spanish (Nicaragua)", - "nativeName":"Español (Nicaragua)" - }, - "es-pa":{ - "name":"Spanish (Panama)", - "nativeName":"Español (Panamá)" - }, - "es-py":{ - "name":"Spanish (Paraguay)", - "nativeName":"Español (Paraguay)" - }, - "es-pe":{ - "name":"Spanish (Peru)", - "nativeName":"Español (Perú)" - }, - "es-pr":{ - "name":"Spanish (Puerto Rico)", - "nativeName":"Español (Puerto Rico)" - }, - "es-uy":{ - "name":"Spanish (Uruguay)", - "nativeName":"Español (Uruguay)" - }, - "es-ve":{ - "name":"Spanish (Venezuela)", - "nativeName":"Español (Venezuela)" - }, - "fr-be":{ - "name":"French (Belgium)", - "nativeName":"français (Belgique)" - }, - "fr-ca":{ - "name":"French (Canada)", - "nativeName":"français (Canada)" - }, - "fr-lu":{ - "name":"French (Luxembourg)", - "nativeName":"français (Luxembourg)" - }, - "fr-ch":{ - "name":"French (Switzerland)", - "nativeName":"français (Suisse)" - }, - "it-ch":{ - "name":"Italian (Switzerland)", - "nativeName":"italiano (Svizzera)" - }, - "nl-be":{ - "name":"Dutch (Belgium)", - "nativeName":"Nederlands (België)" - }, - "pt-br":{ - "name":"Portuguese (Brazil)", - "nativeName":"Português (Brasil)" - }, - "sv-fi":{ - "name":"Swedish (Finland)", - "nativeName":"svenska (Finland)" - }, - "zh-hk":{ - "name":"Chinese (Hong Kong)", - "nativeName":"中文(香港特别行政區)" - }, - "zh-cn":{ - "name":"Chinese (PRC)", - "nativeName":"中文(中华人民共和国)" - }, - "zh-sg":{ - "name":"Chinese (Singapore)", - "nativeName":"中文(新加坡)" - }, - "zh-tw":{ - "name":"Chinese Traditional (Taiwan)", - "nativeName":"中文（台灣）" - } - } - - AblePlayer.prototype.getLanguageName = function (key,whichName) { - - // return language name associated with lang code "key" - // whichName is either "English" or "local" (i.e., native name) - - var lang, code, subTag; - lang = isoLangs[key.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName; - } - else { - return lang.name; - } - } - else if (key.includes('-')) { - code = key.substr(0,2); - subTag = key.substr(3); - lang = isoLangs[code.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName + ' (' + subTag + ')'; - } - else { - return lang.name + ' (' + subTag + ')'; - } - } - } - // if all else has failed, use the key as the label - return key; - }; - -})(jQuery); -(function ($) { - AblePlayer.prototype.getSupportedLangs = function() { - // returns an array of languages for which AblePlayer has translation tables - var langs = ['ca','cs','de','en','es','fr','he','id','it','ja','nb','nl','pt-br','sv','tr','zh-tw']; - return langs; - }; - - AblePlayer.prototype.getTranslationText = function() { - - // determine language, then get labels and prompts from corresponding translation var - - var deferred, thisObj, supportedLangs, docLang, msg, translationFile, collapsedLang; - deferred = $.Deferred(); - thisObj = this; - - supportedLangs = this.getSupportedLangs(); // returns an array - - if (this.lang) { // a data-lang attribute is included on the media element - if ($.inArray(this.lang,supportedLangs) === -1) { - // the specified language is not supported - if (this.lang.indexOf('-') == 2) { - // this is a localized lang attribute (e.g., fr-CA) - // try the parent language, given the first two characters - if ($.inArray(this.lang.substring(0,2),supportedLangs) !== -1) { - // parent lang is supported. Use that. - this.lang = this.lang.substring(0,2); - } - else { - // the parent language is not supported either - // unable to use the specified language - this.lang = null; - } - } - else { - // this is not a localized language. - // since it's not supported, we're unable to use it. - this.lang = null; - } - } - } - - if (!this.lang) { - // try the language of the web page, if specified - if ($('body').attr('lang')) { - docLang = $('body').attr('lang').toLowerCase(); - } - else if ($('html').attr('lang')) { - docLang = $('html').attr('lang').toLowerCase(); - } - else { - docLang = null; - } - if (docLang) { - if ($.inArray(docLang,supportedLangs) !== -1) { - // the document language is supported - this.lang = docLang; - } - else { - // the document language is not supported - if (docLang.indexOf('-') == 2) { - // this is a localized lang attribute (e.g., fr-CA) - // try the parent language, given the first two characters - if ($.inArray(docLang.substring(0,2),supportedLangs) !== -1) { - // the parent language is supported. use that. - this.lang = docLang.substring(0,2); - } - } - } - } - } - - if (!this.lang) { - // No supported language has been specified by any means - // Fallback to English - this.lang = 'en'; - } - if (!this.searchLang) { - this.searchLang = this.lang; - } - translationFile = this.rootPath + 'translations/' + this.lang + '.js'; - $.getJSON(translationFile, function(data) { - thisObj.tt = data; - deferred.resolve(); - }); - return deferred.promise(); - }; - -})(jQuery); - -(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); - -/! Copyright (c) 2014 - Paul Tavares - purtuga - @paul_tavares - MIT License / -;(function($){ - - /** - * Delays the execution of a function until an expression returns true. - * The expression is checked every 100 milliseconds for as many tries - * as defined in in the attempts option - * - * @param {Object} options - * @param {Function} options.when - * Function to execute on every interval. - * Must return true (boolean) in order for - * options.do to be executed. - * @param {Function} [options.exec] - * Function to be executed once options.when() - * returns true. - * @param {Interger} [options.interval=100] - * How long to wait in-between tries. - * @param {Interger} [options.attempts=100] - * How many tries to use before its considered - * a failure. - * @param {Interger} [options.delayed=0] - * Number of miliseconds to wait before execution - is started. Default is imediately. - * - * @return {jQuery.Promise} - * - * @example - * - * $.doWhen({ - * when: function(){ - * return false; - * }, - * exec: function(){ - * alert("never called given false response on when param!"); - * } - * }) - * .fail(function(){ - * alert('ALERT: FAILED CONDITION'); - * }) - * .then(function(){ - * alert("resolved."); - * }); - * - / - $.doWhen = function(options) { - - return $.Deferred(function(dfd){ - - var opt = $.extend({}, { - when: null, - exec: function(){}, - interval: 100, - attempts: 100, - delayed: 0 - }, - options, - { - checkId: null - }), - startChecking = function(){ - - // Check condition now and if true, then resolve object - if (opt.when() === true) { - - opt.exec.call(dfd.promise()); - dfd.resolve(); - return; - - } - - // apply minimal UI and hide the overlay - opt.checkId = setInterval(function(){ - - if (opt.attempts === 0) { - - clearInterval(opt.checkId); - dfd.reject(); - - } else { - - --opt.attempts; - - if (opt.when() === true) { - - opt.attempts = 0; - clearInterval(opt.checkId); - opt.exec.call(dfd.promise()); - dfd.resolve(); - - } - - } - - }, opt.interval); - - }; - - if (opt.delayed > 0) { - - setTimeout(startChecking, Number(opt.delayed)); - - } else { - - startChecking(); - - } - - }).promise(); - - }; - -})(jQuery); -/ 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: - // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; - // TODO: if using this be sure to add lang attr to <div> (see above) - }).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); - - -(function ($) { - AblePlayer.prototype.initVimeoPlayer = function () { - - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - containerId = this.mediaId + '_vimeo'; - - // add container to which Vimeo player iframe will be appended - this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - - // if a described version is available && user prefers desription - // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } - this.activeVimeoId = vimeoId; - - // Notes re. Vimeo Embed Options: - // If a video is owned by a user with a paid Plus, PRO, or Business account, - // setting the "controls" option to "false" will hide the default controls, without hiding captions. - // This is a new option from Vimeo; previously used "background:true" to hide the controller, - // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - - if (this.autoplay && this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } - - videoDimensions = this.getVimeoDimensions(this.activeVimeoId, containerId); - if (videoDimensions) { - this.vimeoWidth = videoDimensions[0]; - this.vimeoHeight = videoDimensions[1]; - this.aspectRatio = thisObj.ytWidth / thisObj.ytHeight; - } - else { - // dimensions are initially unknown - // sending null values to Vimeo results in a video that uses the default Vimeo dimensions - // these can then be scraped from the iframe and applied to this.$ableWrapper - this.vimeoWidth = null; - this.vimeoHeight = null; - } - - options = { - id: vimeoId, - width: this.vimeoWidth, - controls: false - }; - - this.vimeoPlayer = new Vimeo.Player(containerId, options); - - this.vimeoPlayer.ready().then(function() { - - if (!thisObj.hasPlaylist) { - // remove the media element, since Vimeo replaces that with its own element in an iframe - // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() - thisObj.$media.remove(); - - // define variables that will impact player setup - - // vimeoSupportsPlaybackRateChange - // changing playbackRate is only supported if the video is hosted on a Pro or Business account - // unfortunately there is no direct way to query for that information. - // this.vimeoPlayer.getPlaybackRate() returns a value, regardless of account type - // This is a hack: - // Attempt to change the playbackRate. If it results in an error, assume changing playbackRate is not supported. - // Supported playbackRate values are 0.5 to 2. - thisObj.vimeoPlaybackRate = 1; - thisObj.vimeoPlayer.setPlaybackRate(thisObj.vimeoPlaybackRate).then(function(playbackRate) { - // playback rate was set - thisObj.vimeoSupportsPlaybackRateChange = true; - }).catch(function(error) { - thisObj.vimeoSupportsPlaybackRateChange = false; - }); - deferred.resolve(); - } - }); - return promise; - }; - - AblePlayer.prototype.getVimeoPaused = function () { - - var deferred, promise; - deferred = new $.Deferred(); - promise = deferred.promise(); - - this.vimeoPlayer.getPaused().then(function (paused) { - // paused is Boolean - deferred.resolve(paused); - }); - - return promise; - } - - AblePlayer.prototype.getVimeoEnded = function () { - - var deferred, promise; - deferred = new $.Deferred(); - promise = deferred.promise(); - - this.vimeoPlayer.getEnded().then(function (ended) { - // ended is Boolean - deferred.resolve(ended); - }); - - return promise; - } - - AblePlayer.prototype.getVimeoState = function () { - - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - promises = []; - - gettingPausedPromise = this.vimeoPlayer.getPaused(); - gettingEndedPromise = this.vimeoPlayer.getEnded(); - - promises.push(gettingPausedPromise); - promises.push(gettingEndedPromise); - - gettingPausedPromise.then(function (paused) { - deferred.resolve(paused); - }); - gettingEndedPromise.then(function (ended) { - deferred.resolve(ended); - }); - $.when.apply($, promises).then(function () { - deferred.resolve(); - }); - return promise; - } - - AblePlayer.prototype.getVimeoDimensions = function (vimeoContainerId) { - - // get dimensions of Vimeo video, return array with width & height - - var d, url, $iframe, width, height; - - d = []; - - if (typeof this.playerMaxWidth !== 'undefined') { - d[0] = this.playerMaxWidth; - // optional: set height as well; not required though since Vimeo will adjust height to match width - if (typeof this.playerMaxHeight !== 'undefined') { - d[1] = this.playerMaxHeight; - } - return d; - } - else { - if (typeof $('#' + vimeoContainerId) !== 'undefined') { - $iframe = $('#' + vimeoContainerId); - width = $iframe.width(); - height = $iframe.height(); - if (width > 0 && height > 0) { - d[0] = width; - d[1] = height; - return d; - } - } - } - return false; - }; - - AblePlayer.prototype.getVimeoCaptionTracks = function () { - - // get data via Vimeo Player API, and push data to this.captions - // Note: Vimeo doesn't expose the caption cues themselves - // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - var thisObj, i, trackId, isDefaultTrack; - - thisObj = this; - - this.vimeoPlayer.getTextTracks().then(function(tracks) { - - // each Vimeo track includes the following: - // label (local name of the language) - // language (2-character code) - // kind (captions or subtitles, as declared by video owner) - // mode ('disabled' or 'showing') - - if (tracks.length) { - - // create a new button for each caption track - for (i=0; i<tracks.length; i++) { - - thisObj.hasCaptions = true; - if (thisObj.prefCaptions === 1) { - thisObj.captionsOn = true; - } - else { - thisObj.captionsOn = false; - } - // assign the default track based on language of the player - if (tracks[i]['language'] === thisObj.lang) { - isDefaultTrack = true; - } - else { - isDefaultTrack = false; - } - thisObj.tracks.push({ - 'kind': tracks[i]['kind'], - 'language': tracks[i]['language'], - 'label': tracks[i]['label'], - 'def': isDefaultTrack - }); - } - thisObj.captions = thisObj.tracks; - thisObj.hasCaptions = true; - - // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - deferred.resolve(); - } - else { - thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; - deferred.resolve(); - } - }); - - return promise; - }; - -})(jQuery); diff --git a/src/build/ableplayer.dist.js b/src/build/ableplayer.dist.js index 2ffff87..117f03f 100644 --- a/src/build/ableplayer.dist.js +++ b/src/build/ableplayer.dist.js @@ -1,5 +1,5 @@ -/! ableplayer V4.5.1 with DOMPurify included / -/! @license DOMPurify 3.2.4 \| (c) Cure53 and other contributors \| Released under the Apache license 2.0 and Mozilla Public License 2.0 \| github.com/cure53/DOMPurify/blob/3.2.4/LICENSE / +/! ableplayer V4.8.0 with DOMPurify included / +/! @license DOMPurify 3.3.1 \| (c) Cure53 and other contributors \| Released under the Apache license 2.0 and Mozilla Public License 2.0 \| github.com/cure53/DOMPurify/blob/3.3.1/LICENSE / (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : @@ -18,7 +18,7 @@ freeze, seal, create - } = Object; // eslint-disable-line import/no-mutable-exports + } = Object; let { apply, construct @@ -34,12 +34,18 @@ }; } if (!apply) { - apply = function apply(fun, thisValue, args) { - return fun.apply(thisValue, args); + apply = function apply(func, thisArg) { + for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { + args[_key - 2] = arguments[_key]; + } + return func.apply(thisArg, args); }; } if (!construct) { - construct = function construct(Func, args) { + construct = function construct(Func) { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } return new Func(...args); }; } @@ -57,48 +63,28 @@ const objectHasOwnProperty = unapply(Object.prototype.hasOwnProperty); const regExpTest = unapply(RegExp.prototype.test); const typeErrorCreate = unconstruct(TypeError); - /** - * Creates a new function that calls the given function with a specified thisArg and arguments. - * - * @param func - The function to be wrapped and called. - * @returns A new function that calls the given function with a specified thisArg and arguments. - / function unapply(func) { return function (thisArg) { - for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; + if (thisArg instanceof RegExp) { + thisArg.lastIndex = 0; + } + for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) { + args[_key3 - 1] = arguments[_key3]; } return apply(func, thisArg, args); }; } - /* - * Creates a new function that constructs an instance of the given constructor function with the provided arguments. - * - * @param func - The constructor function to be wrapped and called. - * @returns A new function that constructs an instance of the given constructor function with the provided arguments. - / - function unconstruct(func) { + function unconstruct(Func) { return function () { - for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { - args[_key2] = arguments[_key2]; + for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { + args[_key4] = arguments[_key4]; } - return construct(func, args); + return construct(Func, args); }; } - /* - * Add properties to a lookup table - * - * @param set - The set to which elements will be added. - * @param array - The array containing elements to be added to the set. - * @param transformCaseFunc - An optional function to transform the case of each element before adding to the set. - * @returns The modified set with added elements. - / function addToSet(set, array) { let transformCaseFunc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : stringToLowerCase; if (setPrototypeOf) { - // Make 'in' and truthy checks like Boolean(set.constructor) - // independent of any properties defined on Object.prototype. - // Prevent prototype setters from intercepting set as a this value. setPrototypeOf(set, null); } let l = array.length; @@ -107,7 +93,6 @@ if (typeof element === 'string') { const lcElement = transformCaseFunc(element); if (lcElement !== element) { - // Config presets (e.g. tags.js, attrs.js) are immutable. if (!isFrozen(array)) { array[l] = lcElement; } @@ -118,12 +103,6 @@ } return set; } - /* - * Clean up an array to harden against CSPP - * - * @param array - The array to be cleaned. - * @returns The cleaned version of the array - / function cleanArray(array) { for (let index = 0; index < array.length; index++) { const isPropertyExist = objectHasOwnProperty(array, index); @@ -133,12 +112,6 @@ } return array; } - /* - * Shallow clone an object - * - * @param object - The object to be cloned. - * @returns A new object that copies the original. - / function clone(object) { const newObject = create(null); for (const [property, value] of entries(object)) { @@ -155,13 +128,6 @@ } return newObject; } - /* - * This method automatically checks if the prop is function or getter and behaves accordingly. - * - * @param object - The object to look up the getter function in its prototype chain. - * @param prop - The property name for which to find the getter function. - * @returns The getter function found in the prototype chain or a fallback function. - / function lookupGetter(object, prop) { while (object !== null) { const desc = getOwnPropertyDescriptor(object, prop); @@ -181,40 +147,33 @@ return fallbackValue; } - const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']); - const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']); + const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'search', 'section', 'select', 'shadow', 'slot', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']); + const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'enterkeyhint', 'exportparts', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'inputmode', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'part', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']); const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']); - // List of SVG elements that are disallowed by default. - // We still need to know them so that we can do namespace - // checks properly in case one wants to add them to - // allow-list. const svgDisallowed = freeze(['animate', 'color-profile', 'cursor', 'discard', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use']); const mathMl$1 = freeze(['math', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'mprescripts']); - // Similarly to SVG, we want to know all MathML elements, - // even those that we disallow by default. const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']); const text = freeze(['#text']); - const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']); - const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']); + const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'exportparts', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inert', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'part', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']); + const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'mask-type', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']); const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']); const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']); - // eslint-disable-next-line unicorn/better-regex - const MUSTACHE_EXPR = seal(/\{\{[\w\W]\|[\w\W]\}\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode + const MUSTACHE_EXPR = seal(/\{\{[\w\W]\|[\w\W]\}\}/gm); const ERB_EXPR = seal(/<%[\w\W]\|[\w\W]%>/gm); - const TMPLIT_EXPR = seal(/\$\{[\w\W]/gm); // eslint-disable-line unicorn/better-regex - const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]+$/); // eslint-disable-line no-useless-escape - const ARIA_ATTR = seal(/^aria-[\-\w]+$/); // eslint-disable-line no-useless-escape - const IS_ALLOWED_URI = seal(/^(?:(?:(?:f\|ht)tps?\|mailto\|tel\|callto\|sms\|cid\|xmpp):\|[^a-z]\|[a-z+.\-]+(?:[^a-z+.\-:]\|$))/i // eslint-disable-line no-useless-escape + const TMPLIT_EXPR = seal(/\$\{[\w\W]/gm); + const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]+$/); + const ARIA_ATTR = seal(/^aria-[\-\w]+$/); + const IS_ALLOWED_URI = seal(/^(?:(?:(?:f\|ht)tps?\|mailto\|tel\|callto\|sms\|cid\|xmpp\|matrix):\|[^a-z]\|[a-z+.\-]+(?:[^a-z+.\-:]\|$))/i ); const IS_SCRIPT_OR_DATA = seal(/^(?:\w+script\|data):/i); - const ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g // eslint-disable-line no-control-regex + const ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g ); const DOCTYPE_NAME = seal(/^html$/i); const CUSTOM_ELEMENT = seal(/^[a-z][.\w](-[.\w]+)+$/i); - var EXPRESSIONS = /#__PURE__/Object.freeze({ + var EXPRESSIONS = Object.freeze({ __proto__: null, ARIA_ATTR: ARIA_ATTR, ATTR_WHITESPACE: ATTR_WHITESPACE, @@ -228,42 +187,27 @@ TMPLIT_EXPR: TMPLIT_EXPR }); - /* eslint-disable @typescript-eslint/indent / - // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType const NODE_TYPE = { element: 1, attribute: 2, text: 3, cdataSection: 4, entityReference: 5, - // Deprecated entityNode: 6, - // Deprecated progressingInstruction: 7, comment: 8, document: 9, documentType: 10, documentFragment: 11, - notation: 12 // Deprecated + notation: 12 }; const getGlobal = function getGlobal() { return typeof window === 'undefined' ? null : window; }; - /* - * Creates a no-op policy for internal use only. - * Don't export this function outside this module! - * @param trustedTypes The policy factory. - * @param purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix). - * @return The policy created (or null, if Trusted Types - * are not supported or creating the policy failed). - / const _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) { if (typeof trustedTypes !== 'object' \|\| typeof trustedTypes.createPolicy !== 'function') { return null; } - // Allow the callers to control the unique policy name - // by adding a data-tt-policy-suffix to the script element with the DOMPurify. - // Policy creation with duplicate names throws in Trusted Types. let suffix = null; const ATTR_NAME = 'data-tt-policy-suffix'; if (purifyHostElement && purifyHostElement.hasAttribute(ATTR_NAME)) { @@ -280,11 +224,8 @@ } }); } catch (_) { - // Policy creation failed (most likely another DOMPurify script has - // already run). Skip creating the policy, as this will only cause errors - // if TT are enforced. - - return null; + + return null; } }; const _createHooksMap = function _createHooksMap() { @@ -303,11 +244,9 @@ function createDOMPurify() { let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal(); const DOMPurify = root => createDOMPurify(root); - DOMPurify.version = '3.2.4'; + DOMPurify.version = '3.3.1'; DOMPurify.removed = []; if (!window \|\| !window.document \|\| window.document.nodeType !== NODE_TYPE.document \|\| !window.Element) { - // Not running in a browser, provide a factory function - // so that you can pass your own Window DOMPurify.isSupported = false; return DOMPurify; } @@ -333,12 +272,6 @@ const getNextSibling = lookupGetter(ElementPrototype, 'nextSibling'); const getChildNodes = lookupGetter(ElementPrototype, 'childNodes'); const getParentNode = lookupGetter(ElementPrototype, 'parentNode'); - // As per issue #47, the web-components registry is inherited by a - // new document created via createHTMLDocument. As per the spec - // (http://w3c.github.io/webcomponents/spec/custom/#creating-and-passing-registries) - // a new empty registry is used when creating a template contents owner - // document, so we use that as our parent document to ensure nothing - // is inherited. if (typeof HTMLTemplateElement === 'function') { const template = document.createElement('template'); if (template.content && template.content.ownerDocument) { @@ -357,9 +290,6 @@ importNode } = originalDocument; let hooks = _createHooksMap(); - /* - * Expose whether this browser supports running the full DOMPurify. - / DOMPurify.isSupported = typeof entries === 'function' && typeof getParentNode === 'function' && implementation && implementation.createHTMLDocument !== undefined; const { MUSTACHE_EXPR, @@ -374,22 +304,10 @@ let { IS_ALLOWED_URI: IS_ALLOWED_URI$1 } = EXPRESSIONS; - /* - * We consider the elements and attributes below to be safe. Ideally - * don't add any new ones but feel free to remove unwanted ones. - / - / allowed element names / let ALLOWED_TAGS = null; const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text]); - / Allowed attribute names / let ALLOWED_ATTR = null; const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]); - / - * Configure how DOMPurify should handle custom elements and their attributes as well as customized built-in elements. - * @property {RegExp\|Function\|null} tagNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any custom elements) - * @property {RegExp\|Function\|null} attributeNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any attributes not on the allow list) - * @property {boolean} allowCustomizedBuiltInElements allow custom elements derived from built-ins if they pass CUSTOM_ELEMENT_HANDLING.tagNameCheck. Default: `false`. - / let CUSTOM_ELEMENT_HANDLING = Object.seal(create(null, { tagNameCheck: { writable: true, @@ -410,156 +328,101 @@ value: false } })); - / Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) / let FORBID_TAGS = null; - / Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) / let FORBID_ATTR = null; - / Decide if ARIA attributes are okay / + const EXTRA_ELEMENT_HANDLING = Object.seal(create(null, { + tagCheck: { + writable: true, + configurable: false, + enumerable: true, + value: null + }, + attributeCheck: { + writable: true, + configurable: false, + enumerable: true, + value: null + } + })); let ALLOW_ARIA_ATTR = true; - / Decide if custom data attributes are okay / let ALLOW_DATA_ATTR = true; - / Decide if unknown protocols are okay / let ALLOW_UNKNOWN_PROTOCOLS = false; - / Decide if self-closing tags in attributes are allowed. - * Usually removed due to a mXSS issue in jQuery 3.0 / let ALLOW_SELF_CLOSE_IN_ATTR = true; - / Output should be safe for common template engines. - * This means, DOMPurify removes data attributes, mustaches and ERB - / let SAFE_FOR_TEMPLATES = false; - / Output should be safe even for XML used within HTML and alike. - * This means, DOMPurify removes comments when containing risky content. - / let SAFE_FOR_XML = true; - / Decide if document with <html>... should be returned / let WHOLE_DOCUMENT = false; - / Track whether config is already set on this instance of DOMPurify. / let SET_CONFIG = false; - / Decide if all elements (e.g. style, script) must be children of - * document.body. By default, browsers might move them to document.head / let FORCE_BODY = false; - / Decide if a DOM `HTMLBodyElement` should be returned, instead of a html - * string (or a TrustedHTML object if Trusted Types are supported). - * If `WHOLE_DOCUMENT` is enabled a `HTMLHtmlElement` will be returned instead - / let RETURN_DOM = false; - / Decide if a DOM `DocumentFragment` should be returned, instead of a html - * string (or a TrustedHTML object if Trusted Types are supported) / let RETURN_DOM_FRAGMENT = false; - / Try to return a Trusted Type object instead of a string, return a string in - * case Trusted Types are not supported / let RETURN_TRUSTED_TYPE = false; - / Output should be free from DOM clobbering attacks? - * This sanitizes markups named with colliding, clobberable built-in DOM APIs. - / let SANITIZE_DOM = true; - / Achieve full DOM Clobbering protection by isolating the namespace of named - * properties and JS variables, mitigating attacks that abuse the HTML/DOM spec rules. - * - * HTML/DOM spec rules that enable DOM Clobbering: - * - Named Access on Window (§7.3.3) - * - DOM Tree Accessors (§3.1.5) - * - Form Element Parent-Child Relations (§4.10.3) - * - Iframe srcdoc / Nested WindowProxies (§4.8.5) - * - HTMLCollection (§4.2.10.2) - * - * Namespace isolation is implemented by prefixing `id` and `name` attributes - * with a constant string, i.e., `user-content-` - / let SANITIZE_NAMED_PROPS = false; const SANITIZE_NAMED_PROPS_PREFIX = 'user-content-'; - / Keep element content when removing element? / let KEEP_CONTENT = true; - / If a `Node` is passed to sanitize(), then performs sanitization in-place instead - * of importing it into a new Document and returning a sanitized copy / let IN_PLACE = false; - / Allow usage of profiles like html, svg and mathMl / let USE_PROFILES = {}; - / Tags to ignore content of when KEEP_CONTENT is true / let FORBID_CONTENTS = null; const DEFAULT_FORBID_CONTENTS = addToSet({}, ['annotation-xml', 'audio', 'colgroup', 'desc', 'foreignobject', 'head', 'iframe', 'math', 'mi', 'mn', 'mo', 'ms', 'mtext', 'noembed', 'noframes', 'noscript', 'plaintext', 'script', 'style', 'svg', 'template', 'thead', 'title', 'video', 'xmp']); - / Tags that are safe for data: URIs / let DATA_URI_TAGS = null; const DEFAULT_DATA_URI_TAGS = addToSet({}, ['audio', 'video', 'img', 'source', 'image', 'track']); - / Attributes safe for values like "javascript:" / let URI_SAFE_ATTRIBUTES = null; const DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ['alt', 'class', 'for', 'id', 'label', 'name', 'pattern', 'placeholder', 'role', 'summary', 'title', 'value', 'style', 'xmlns']); const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML'; const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'; const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml'; - / Document namespace / let NAMESPACE = HTML_NAMESPACE; let IS_EMPTY_INPUT = false; - / Allowed XHTML+XML namespaces / let ALLOWED_NAMESPACES = null; const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString); let MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']); let HTML_INTEGRATION_POINTS = addToSet({}, ['annotation-xml']); - // Certain elements are allowed in both SVG and HTML - // namespace. We need to specify them explicitly - // so that they don't get erroneously deleted from - // HTML namespace. const COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, ['title', 'style', 'font', 'a', 'script']); - / Parsing of strict XHTML documents / let PARSER_MEDIA_TYPE = null; const SUPPORTED_PARSER_MEDIA_TYPES = ['application/xhtml+xml', 'text/html']; const DEFAULT_PARSER_MEDIA_TYPE = 'text/html'; let transformCaseFunc = null; - / Keep a reference to config to pass to hooks / let CONFIG = null; - / Ideally, do not touch anything below this line / - / ______________________________________________ / const formElement = document.createElement('form'); const isRegexOrFunction = function isRegexOrFunction(testValue) { return testValue instanceof RegExp \|\| testValue instanceof Function; }; - /* - * _parseConfig - * - * @param cfg optional config literal - / - // eslint-disable-next-line complexity const _parseConfig = function _parseConfig() { let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; if (CONFIG && CONFIG === cfg) { return; } - / Shield configuration object from tampering / if (!cfg \|\| typeof cfg !== 'object') { cfg = {}; } - / Shield configuration object from prototype pollution / cfg = clone(cfg); PARSER_MEDIA_TYPE = - // eslint-disable-next-line unicorn/prefer-includes SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? DEFAULT_PARSER_MEDIA_TYPE : cfg.PARSER_MEDIA_TYPE; - // HTML tags and attributes are not case-sensitive, converting to lowercase. Keeping XHTML as is. transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? stringToString : stringToLowerCase; - / Set configuration parameters / ALLOWED_TAGS = objectHasOwnProperty(cfg, 'ALLOWED_TAGS') ? addToSet({}, cfg.ALLOWED_TAGS, transformCaseFunc) : DEFAULT_ALLOWED_TAGS; ALLOWED_ATTR = objectHasOwnProperty(cfg, 'ALLOWED_ATTR') ? addToSet({}, cfg.ALLOWED_ATTR, transformCaseFunc) : DEFAULT_ALLOWED_ATTR; ALLOWED_NAMESPACES = objectHasOwnProperty(cfg, 'ALLOWED_NAMESPACES') ? addToSet({}, cfg.ALLOWED_NAMESPACES, stringToString) : DEFAULT_ALLOWED_NAMESPACES; URI_SAFE_ATTRIBUTES = objectHasOwnProperty(cfg, 'ADD_URI_SAFE_ATTR') ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR, transformCaseFunc) : DEFAULT_URI_SAFE_ATTRIBUTES; DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS, transformCaseFunc) : DEFAULT_DATA_URI_TAGS; FORBID_CONTENTS = objectHasOwnProperty(cfg, 'FORBID_CONTENTS') ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS; - FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : {}; - FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : {}; + FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : clone({}); + FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : clone({}); USE_PROFILES = objectHasOwnProperty(cfg, 'USE_PROFILES') ? cfg.USE_PROFILES : false; - ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true - ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true - ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS \|\| false; // Default false - ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false; // Default true - SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES \|\| false; // Default false - SAFE_FOR_XML = cfg.SAFE_FOR_XML !== false; // Default true - WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT \|\| false; // Default false - RETURN_DOM = cfg.RETURN_DOM \|\| false; // Default false - RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT \|\| false; // Default false - RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE \|\| false; // Default false - FORCE_BODY = cfg.FORCE_BODY \|\| false; // Default false - SANITIZE_DOM = cfg.SANITIZE_DOM !== false; // Default true - SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS \|\| false; // Default false - KEEP_CONTENT = cfg.KEEP_CONTENT !== false; // Default true - IN_PLACE = cfg.IN_PLACE \|\| false; // Default false + ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; + ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; + ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS \|\| false; + ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false; + SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES \|\| false; + SAFE_FOR_XML = cfg.SAFE_FOR_XML !== false; + WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT \|\| false; + RETURN_DOM = cfg.RETURN_DOM \|\| false; + RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT \|\| false; + RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE \|\| false; + FORCE_BODY = cfg.FORCE_BODY \|\| false; + SANITIZE_DOM = cfg.SANITIZE_DOM !== false; + SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS \|\| false; + KEEP_CONTENT = cfg.KEEP_CONTENT !== false; + IN_PLACE = cfg.IN_PLACE \|\| false; IS_ALLOWED_URI$1 = cfg.ALLOWED_URI_REGEXP \|\| IS_ALLOWED_URI; NAMESPACE = cfg.NAMESPACE \|\| HTML_NAMESPACE; MATHML_TEXT_INTEGRATION_POINTS = cfg.MATHML_TEXT_INTEGRATION_POINTS \|\| MATHML_TEXT_INTEGRATION_POINTS; @@ -580,7 +443,6 @@ if (RETURN_DOM_FRAGMENT) { RETURN_DOM = true; } - / Parse profile info / if (USE_PROFILES) { ALLOWED_TAGS = addToSet({}, text); ALLOWED_ATTR = []; @@ -604,18 +466,25 @@ addToSet(ALLOWED_ATTR, xml); } } - / Merge configuration parameters / if (cfg.ADD_TAGS) { - if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) { - ALLOWED_TAGS = clone(ALLOWED_TAGS); + if (typeof cfg.ADD_TAGS === 'function') { + EXTRA_ELEMENT_HANDLING.tagCheck = cfg.ADD_TAGS; + } else { + if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) { + ALLOWED_TAGS = clone(ALLOWED_TAGS); + } + addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc); } - addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc); } if (cfg.ADD_ATTR) { - if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) { - ALLOWED_ATTR = clone(ALLOWED_ATTR); + if (typeof cfg.ADD_ATTR === 'function') { + EXTRA_ELEMENT_HANDLING.attributeCheck = cfg.ADD_ATTR; + } else { + if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) { + ALLOWED_ATTR = clone(ALLOWED_ATTR); + } + addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc); } - addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc); } if (cfg.ADD_URI_SAFE_ATTR) { addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc); @@ -626,15 +495,18 @@ } addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc); } - / Add #text in case KEEP_CONTENT is set to true / + if (cfg.ADD_FORBID_CONTENTS) { + if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) { + FORBID_CONTENTS = clone(FORBID_CONTENTS); + } + addToSet(FORBID_CONTENTS, cfg.ADD_FORBID_CONTENTS, transformCaseFunc); + } if (KEEP_CONTENT) { ALLOWED_TAGS['#text'] = true; } - / Add html, head and body to ALLOWED_TAGS in case WHOLE_DOCUMENT is true / if (WHOLE_DOCUMENT) { addToSet(ALLOWED_TAGS, ['html', 'head', 'body']); } - / Add tbody to ALLOWED_TAGS in case tables are permitted, see #286, #365 / if (ALLOWED_TAGS.table) { addToSet(ALLOWED_TAGS, ['tbody']); delete FORBID_TAGS.tbody; @@ -646,42 +518,25 @@ if (typeof cfg.TRUSTED_TYPES_POLICY.createScriptURL !== 'function') { throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.'); } - // Overwrite existing TrustedTypes policy. trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY; - // Sign local variables required by `sanitize`. emptyHTML = trustedTypesPolicy.createHTML(''); } else { - // Uninitialized policy, attempt to initialize the internal dompurify policy. if (trustedTypesPolicy === undefined) { trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, currentScript); } - // If creating the internal policy succeeded sign internal variables. if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') { emptyHTML = trustedTypesPolicy.createHTML(''); } } - // Prevent further manipulation of configuration. - // Not available in IE8, Safari 5, etc. if (freeze) { freeze(cfg); } CONFIG = cfg; }; - / Keep track of all possible SVG and MathML tags - * so that we can perform the namespace checks - * correctly. / const ALL_SVG_TAGS = addToSet({}, [...svg$1, ...svgFilters, ...svgDisallowed]); const ALL_MATHML_TAGS = addToSet({}, [...mathMl$1, ...mathMlDisallowed]); - /* - * @param element a DOM element whose namespace is being checked - * @returns Return false if the element has a - * namespace that a spec-compliant parser would never - * return. Return true otherwise. - / const _checkValidNamespace = function _checkValidNamespace(element) { let parent = getParentNode(element); - // In JSDOM, if we're inside shadow DOM, then parentNode - // can be null. We just simulate parent in this case. if (!parent \|\| !parent.tagName) { parent = { namespaceURI: NAMESPACE, @@ -694,84 +549,47 @@ return false; } if (element.namespaceURI === SVG_NAMESPACE) { - // The only way to switch from HTML namespace to SVG - // is via <svg>. If it happens via any other tag, then - // it should be killed. if (parent.namespaceURI === HTML_NAMESPACE) { return tagName === 'svg'; } - // The only way to switch from MathML to SVG is via` - // svg if parent is either <annotation-xml> or MathML - // text integration points. if (parent.namespaceURI === MATHML_NAMESPACE) { return tagName === 'svg' && (parentTagName === 'annotation-xml' \|\| MATHML_TEXT_INTEGRATION_POINTS[parentTagName]); } - // We only allow elements that are defined in SVG - // spec. All others are disallowed in SVG namespace. return Boolean(ALL_SVG_TAGS[tagName]); } if (element.namespaceURI === MATHML_NAMESPACE) { - // The only way to switch from HTML namespace to MathML - // is via <math>. If it happens via any other tag, then - // it should be killed. if (parent.namespaceURI === HTML_NAMESPACE) { return tagName === 'math'; } - // The only way to switch from SVG to MathML is via - // <math> and HTML integration points if (parent.namespaceURI === SVG_NAMESPACE) { return tagName === 'math' && HTML_INTEGRATION_POINTS[parentTagName]; } - // We only allow elements that are defined in MathML - // spec. All others are disallowed in MathML namespace. return Boolean(ALL_MATHML_TAGS[tagName]); } if (element.namespaceURI === HTML_NAMESPACE) { - // The only way to switch from SVG to HTML is via - // HTML integration points, and from MathML to HTML - // is via MathML text integration points if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) { return false; } if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) { return false; } - // We disallow tags that are specific for MathML - // or SVG and should never appear in HTML namespace return !ALL_MATHML_TAGS[tagName] && (COMMON_SVG_AND_HTML_ELEMENTS[tagName] \|\| !ALL_SVG_TAGS[tagName]); } - // For XHTML and XML documents that support custom namespaces if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && ALLOWED_NAMESPACES[element.namespaceURI]) { return true; } - // The code should never reach this place (this means - // that the element somehow got namespace that is not - // HTML, SVG, MathML or allowed via ALLOWED_NAMESPACES). - // Return false just in case. return false; }; - /* - * _forceRemove - * - * @param node a DOM node - / const _forceRemove = function _forceRemove(node) { arrayPush(DOMPurify.removed, { element: node }); try { - // eslint-disable-next-line unicorn/prefer-dom-node-remove getParentNode(node).removeChild(node); } catch (_) { remove(node); } }; - /* - * _removeAttribute - * - * @param name an Attribute name - * @param element a DOM node - / const _removeAttribute = function _removeAttribute(name, element) { try { arrayPush(DOMPurify.removed, { @@ -785,7 +603,6 @@ }); } element.removeAttribute(name); - // We void attribute values for unremovable "is" attributes if (name === 'is') { if (RETURN_DOM \|\| RETURN_DOM_FRAGMENT) { try { @@ -798,82 +615,47 @@ } } }; - /* - * _initDocument - * - * @param dirty - a string of dirty markup - * @return a DOM, filled with the dirty markup - / const _initDocument = function _initDocument(dirty) { - / Create a HTML document / let doc = null; let leadingWhitespace = null; if (FORCE_BODY) { dirty = '<remove></remove>' + dirty; } else { - / If FORCE_BODY isn't used, leading whitespace needs to be preserved manually / const matches = stringMatch(dirty, /^[\r\n\t ]+/); leadingWhitespace = matches && matches[0]; } if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && NAMESPACE === HTML_NAMESPACE) { - // Root of XHTML doc must contain xmlns declaration (see https://www.w3.org/TR/xhtml1/normative.html#strict) dirty = '<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>' + dirty + '</body></html>'; } const dirtyPayload = trustedTypesPolicy ? trustedTypesPolicy.createHTML(dirty) : dirty; - / - * Use the DOMParser API by default, fallback later if needs be - * DOMParser not work for svg when has multiple root element. - / if (NAMESPACE === HTML_NAMESPACE) { try { doc = new DOMParser().parseFromString(dirtyPayload, PARSER_MEDIA_TYPE); } catch (_) {} } - / Use createHTMLDocument in case DOMParser is not available / if (!doc \|\| !doc.documentElement) { doc = implementation.createDocument(NAMESPACE, 'template', null); try { doc.documentElement.innerHTML = IS_EMPTY_INPUT ? emptyHTML : dirtyPayload; } catch (_) { - // Syntax error if dirtyPayload is invalid xml } } const body = doc.body \|\| doc.documentElement; if (dirty && leadingWhitespace) { body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] \|\| null); } - / Work on whole document or just its body / if (NAMESPACE === HTML_NAMESPACE) { return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? 'html' : 'body')[0]; } return WHOLE_DOCUMENT ? doc.documentElement : body; }; - /* - * Creates a NodeIterator object that you can use to traverse filtered lists of nodes or elements in a document. - * - * @param root The root element or node to start traversing on. - * @return The created NodeIterator - / const _createNodeIterator = function _createNodeIterator(root) { return createNodeIterator.call(root.ownerDocument \|\| root, root, - // eslint-disable-next-line no-bitwise NodeFilter.SHOW_ELEMENT \| NodeFilter.SHOW_COMMENT \| NodeFilter.SHOW_TEXT \| NodeFilter.SHOW_PROCESSING_INSTRUCTION \| NodeFilter.SHOW_CDATA_SECTION, null); }; - /* - * _isClobbered - * - * @param element element to check for clobbering attacks - * @return true if clobbered, false if safe - / const _isClobbered = function _isClobbered(element) { return element instanceof HTMLFormElement && (typeof element.nodeName !== 'string' \|\| typeof element.textContent !== 'string' \|\| typeof element.removeChild !== 'function' \|\| !(element.attributes instanceof NamedNodeMap) \|\| typeof element.removeAttribute !== 'function' \|\| typeof element.setAttribute !== 'function' \|\| typeof element.namespaceURI !== 'string' \|\| typeof element.insertBefore !== 'function' \|\| typeof element.hasChildNodes !== 'function'); }; - /* - * Checks whether the given object is a DOM node. - * - * @param value object to check whether it's a DOM node - * @return true is object is a DOM node - / const _isNode = function _isNode(value) { return typeof Node === 'function' && value instanceof Node; }; @@ -882,49 +664,31 @@ hook.call(DOMPurify, currentNode, data, CONFIG); }); } - /* - * _sanitizeElements - * - * @protect nodeName - * @protect textContent - * @protect removeChild - * @param currentNode to check for permission to exist - * @return true if node was killed, false if left alive - / const _sanitizeElements = function _sanitizeElements(currentNode) { let content = null; - / Execute a hook if present / _executeHooks(hooks.beforeSanitizeElements, currentNode, null); - / Check if element is clobbered or can clobber / if (_isClobbered(currentNode)) { _forceRemove(currentNode); return true; } - / Now let's check the element's type and name / const tagName = transformCaseFunc(currentNode.nodeName); - / Execute a hook if present / _executeHooks(hooks.uponSanitizeElement, currentNode, { tagName, allowedTags: ALLOWED_TAGS }); - / Detect mXSS attempts abusing namespace confusion / - if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w]/g, currentNode.innerHTML) && regExpTest(/<[/\w]/g, currentNode.textContent)) { + if (SAFE_FOR_XML && currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w!]/g, currentNode.innerHTML) && regExpTest(/<[/\w!]/g, currentNode.textContent)) { _forceRemove(currentNode); return true; } - / Remove any occurrence of processing instructions / if (currentNode.nodeType === NODE_TYPE.progressingInstruction) { _forceRemove(currentNode); return true; } - / Remove any kind of possibly harmful comments / if (SAFE_FOR_XML && currentNode.nodeType === NODE_TYPE.comment && regExpTest(/<[/\w]/g, currentNode.data)) { _forceRemove(currentNode); return true; } - / Remove element if anything forbids its presence / - if (!ALLOWED_TAGS[tagName] \|\| FORBID_TAGS[tagName]) { - / Check if we have a custom element to handle / + if (!(EXTRA_ELEMENT_HANDLING.tagCheck instanceof Function && EXTRA_ELEMENT_HANDLING.tagCheck(tagName)) && (!ALLOWED_TAGS[tagName] \|\| FORBID_TAGS[tagName])) { if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) { if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) { return false; @@ -933,7 +697,6 @@ return false; } } - / Keep content except for bad-listed elements / if (KEEP_CONTENT && !FORBID_CONTENTS[tagName]) { const parentNode = getParentNode(currentNode) \|\| currentNode.parentNode; const childNodes = getChildNodes(currentNode) \|\| currentNode.childNodes; @@ -949,19 +712,15 @@ _forceRemove(currentNode); return true; } - / Check whether element has a valid namespace / if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) { _forceRemove(currentNode); return true; } - / Make sure that older browsers don't get fallback-tag mXSS / if ((tagName === 'noscript' \|\| tagName === 'noembed' \|\| tagName === 'noframes') && regExpTest(/<\/no(script\|embed\|frames)/i, currentNode.innerHTML)) { _forceRemove(currentNode); return true; } - / Sanitize element content to be template-safe / if (SAFE_FOR_TEMPLATES && currentNode.nodeType === NODE_TYPE.text) { - / Get the element's text content / content = currentNode.textContent; arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => { content = stringReplace(content, expr, ' '); @@ -973,73 +732,32 @@ currentNode.textContent = content; } } - / Execute a hook if present / _executeHooks(hooks.afterSanitizeElements, currentNode, null); return false; }; - /* - * _isValidAttribute - * - * @param lcTag Lowercase tag name of containing element. - * @param lcName Lowercase attribute name. - * @param value Attribute value. - * @return Returns true if `value` is valid, otherwise false. - / - // eslint-disable-next-line complexity const _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) { - / Make sure attribute cannot clobber / if (SANITIZE_DOM && (lcName === 'id' \|\| lcName === 'name') && (value in document \|\| value in formElement)) { return false; } - / Allow valid data-* attributes: At least one character after "-" - (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data--attributes) - XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804) - We don't need to check the value; it's always URI safe. / - if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (!ALLOWED_ATTR[lcName] \|\| FORBID_ATTR[lcName]) { + if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (EXTRA_ELEMENT_HANDLING.attributeCheck instanceof Function && EXTRA_ELEMENT_HANDLING.attributeCheck(lcName, lcTag)) ; else if (!ALLOWED_ATTR[lcName] \|\| FORBID_ATTR[lcName]) { if ( - // First condition does a very basic check if a) it's basically a valid custom element tagname AND - // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck - // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck - _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) \|\| CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) \|\| CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) \|\| - // Alternative, second condition checks if it's an `is`-attribute, AND - // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck + _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) \|\| CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) \|\| CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName, lcTag)) \|\| lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) \|\| CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else { return false; } - /* Check value is safe. First, is attr inert? If so, is safe / } else if (URI_SAFE_ATTRIBUTES[lcName]) ; else if (regExpTest(IS_ALLOWED_URI$1, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if ((lcName === 'src' \|\| lcName === 'xlink:href' \|\| lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]) ; else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if (value) { return false; } else ; return true; }; - /* - * _isBasicCustomElement - * checks if at least one dash is included in tagName, and it's not the first char - * for more sophisticated checking see https://github.com/sindresorhus/validate-element-name - * - * @param tagName name of the tag of the node to sanitize - * @returns Returns true if the tag name meets the basic criteria for a custom element, otherwise false. - / const _isBasicCustomElement = function _isBasicCustomElement(tagName) { return tagName !== 'annotation-xml' && stringMatch(tagName, CUSTOM_ELEMENT); }; - /* - * _sanitizeAttributes - * - * @protect attributes - * @protect nodeName - * @protect removeAttribute - * @protect setAttribute - * - * @param currentNode to sanitize - / const _sanitizeAttributes = function _sanitizeAttributes(currentNode) { - / Execute a hook if present / _executeHooks(hooks.beforeSanitizeAttributes, currentNode, null); const { attributes } = currentNode; - / Check if we have attributes; if not we might have a text node / if (!attributes \|\| _isClobbered(currentNode)) { return; } @@ -1051,7 +769,6 @@ forceKeepAttr: undefined }; let l = attributes.length; - / Go backwards over all attributes; safely remove bad ones / while (l--) { const attr = attributes[l]; const { @@ -1060,55 +777,47 @@ value: attrValue } = attr; const lcName = transformCaseFunc(name); - let value = name === 'value' ? attrValue : stringTrim(attrValue); - / Execute a hook if present / + const initValue = attrValue; + let value = name === 'value' ? initValue : stringTrim(initValue); hookEvent.attrName = lcName; hookEvent.attrValue = value; hookEvent.keepAttr = true; - hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set + hookEvent.forceKeepAttr = undefined; _executeHooks(hooks.uponSanitizeAttribute, currentNode, hookEvent); value = hookEvent.attrValue; - / Full DOM Clobbering protection via namespace isolation, - * Prefix id and name attributes with `user-content-` - / if (SANITIZE_NAMED_PROPS && (lcName === 'id' \|\| lcName === 'name')) { - // Remove the attribute with this value _removeAttribute(name, currentNode); - // Prefix the value and later re-create the attribute with the sanitized value value = SANITIZE_NAMED_PROPS_PREFIX + value; } - / Work around a security issue with comments inside attributes / - if (SAFE_FOR_XML && regExpTest(/((--!?\|])>)\|<\/(style\|title)/i, value)) { + if (SAFE_FOR_XML && regExpTest(/((--!?\|])>)\|<\/(style\|title\|textarea)/i, value)) { + _removeAttribute(name, currentNode); + continue; + } + if (lcName === 'attributename' && stringMatch(value, 'href')) { _removeAttribute(name, currentNode); continue; } - / Did the hooks approve of the attribute? / if (hookEvent.forceKeepAttr) { continue; } - / Remove attribute / - _removeAttribute(name, currentNode); - / Did the hooks approve of the attribute? / if (!hookEvent.keepAttr) { + _removeAttribute(name, currentNode); continue; } - / Work around a security issue in jQuery 3.0 / if (!ALLOW_SELF_CLOSE_IN_ATTR && regExpTest(/\/>/i, value)) { _removeAttribute(name, currentNode); continue; } - / Sanitize attribute content to be template-safe / if (SAFE_FOR_TEMPLATES) { arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => { value = stringReplace(value, expr, ' '); }); } - / Is `value` valid for this attribute? / const lcTag = transformCaseFunc(currentNode.nodeName); if (!_isValidAttribute(lcTag, lcName, value)) { + _removeAttribute(name, currentNode); continue; } - / Handle attributes that require Trusted Types / if (trustedTypesPolicy && typeof trustedTypes === 'object' && typeof trustedTypes.getAttributeType === 'function') { if (namespaceURI) ; else { switch (trustedTypes.getAttributeType(lcTag, lcName)) { @@ -1125,64 +834,49 @@ } } } - / Handle invalid data-* attribute set by try-catching it / - try { - if (namespaceURI) { - currentNode.setAttributeNS(namespaceURI, name, value); - } else { - / Fallback to setAttribute() for browser-unrecognized namespaces e.g. "x-schema". / - currentNode.setAttribute(name, value); - } - if (_isClobbered(currentNode)) { - _forceRemove(currentNode); - } else { - arrayPop(DOMPurify.removed); + if (value !== initValue) { + try { + if (namespaceURI) { + currentNode.setAttributeNS(namespaceURI, name, value); + } else { + currentNode.setAttribute(name, value); + } + if (_isClobbered(currentNode)) { + _forceRemove(currentNode); + } else { + arrayPop(DOMPurify.removed); + } + } catch (_) { + _removeAttribute(name, currentNode); } - } catch (_) {} + } } - / Execute a hook if present / _executeHooks(hooks.afterSanitizeAttributes, currentNode, null); }; - /* - * _sanitizeShadowDOM - * - * @param fragment to iterate over recursively - / const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) { let shadowNode = null; const shadowIterator = _createNodeIterator(fragment); - / Execute a hook if present / _executeHooks(hooks.beforeSanitizeShadowDOM, fragment, null); while (shadowNode = shadowIterator.nextNode()) { - / Execute a hook if present / _executeHooks(hooks.uponSanitizeShadowNode, shadowNode, null); - / Sanitize tags and elements / _sanitizeElements(shadowNode); - / Check attributes next / _sanitizeAttributes(shadowNode); - / Deep shadow DOM detected / if (shadowNode.content instanceof DocumentFragment) { _sanitizeShadowDOM(shadowNode.content); } } - / Execute a hook if present / _executeHooks(hooks.afterSanitizeShadowDOM, fragment, null); }; - // eslint-disable-next-line complexity DOMPurify.sanitize = function (dirty) { let cfg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; let body = null; let importedNode = null; let currentNode = null; let returnNode = null; - / Make sure we have a string to sanitize. - DO NOT return early, as this will return the wrong type if - the user has requested a DOM object rather than a string / IS_EMPTY_INPUT = !dirty; if (IS_EMPTY_INPUT) { dirty = '<!-->'; } - / Stringify, in case dirty is an object / if (typeof dirty !== 'string' && !_isNode(dirty)) { if (typeof dirty.toString === 'function') { dirty = dirty.toString(); @@ -1193,22 +887,17 @@ throw typeErrorCreate('toString is not a function'); } } - / Return dirty HTML if DOMPurify cannot run / if (!DOMPurify.isSupported) { return dirty; } - / Assign config vars / if (!SET_CONFIG) { _parseConfig(cfg); } - / Clean up removed elements / DOMPurify.removed = []; - / Check if dirty is correctly typed for IN_PLACE / if (typeof dirty === 'string') { IN_PLACE = false; } if (IN_PLACE) { - / Do some early pre-sanitization to avoid unsafe root nodes / if (dirty.nodeName) { const tagName = transformCaseFunc(dirty.nodeName); if (!ALLOWED_TAGS[tagName] \|\| FORBID_TAGS[tagName]) { @@ -1216,83 +905,57 @@ } } } else if (dirty instanceof Node) { - / If dirty is a DOM element, append to an empty document to avoid - elements being stripped by the parser / body = _initDocument('<!---->'); importedNode = body.ownerDocument.importNode(dirty, true); if (importedNode.nodeType === NODE_TYPE.element && importedNode.nodeName === 'BODY') { - / Node is already a body, use as is / body = importedNode; } else if (importedNode.nodeName === 'HTML') { body = importedNode; } else { - // eslint-disable-next-line unicorn/prefer-dom-node-append body.appendChild(importedNode); } } else { - / Exit directly if we have nothing to do / if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT && - // eslint-disable-next-line unicorn/prefer-includes dirty.indexOf('<') === -1) { return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(dirty) : dirty; } - / Initialize the document to work on / body = _initDocument(dirty); - / Check we have a DOM node from the data / if (!body) { return RETURN_DOM ? null : RETURN_TRUSTED_TYPE ? emptyHTML : ''; } } - / Remove first element node (ours) if FORCE_BODY is set / if (body && FORCE_BODY) { _forceRemove(body.firstChild); } - / Get node iterator / const nodeIterator = _createNodeIterator(IN_PLACE ? dirty : body); - / Now start iterating over the created document / while (currentNode = nodeIterator.nextNode()) { - / Sanitize tags and elements / _sanitizeElements(currentNode); - / Check attributes next / _sanitizeAttributes(currentNode); - / Shadow DOM detected, sanitize it / if (currentNode.content instanceof DocumentFragment) { _sanitizeShadowDOM(currentNode.content); } } - / If we sanitized `dirty` in-place, return it. / if (IN_PLACE) { return dirty; } - / Return sanitized string or DOM / if (RETURN_DOM) { if (RETURN_DOM_FRAGMENT) { returnNode = createDocumentFragment.call(body.ownerDocument); while (body.firstChild) { - // eslint-disable-next-line unicorn/prefer-dom-node-append returnNode.appendChild(body.firstChild); } } else { returnNode = body; } if (ALLOWED_ATTR.shadowroot \|\| ALLOWED_ATTR.shadowrootmode) { - / - AdoptNode() is not used because internal state is not reset - (e.g. the past names map of a HTMLFormElement), this is safe - in theory but we would rather not risk another attack vector. - The state that is cloned by importNode() is explicitly defined - by the specs. - / returnNode = importNode.call(originalDocument, returnNode, true); } return returnNode; } let serializedHTML = WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML; - / Serialize doctype if allowed / if (WHOLE_DOCUMENT && ALLOWED_TAGS['!doctype'] && body.ownerDocument && body.ownerDocument.doctype && body.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, body.ownerDocument.doctype.name)) { serializedHTML = '<!DOCTYPE ' + body.ownerDocument.doctype.name + '>\n' + serializedHTML; } - / Sanitize final string template-safe / if (SAFE_FOR_TEMPLATES) { arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => { serializedHTML = stringReplace(serializedHTML, expr, ' '); @@ -1310,7 +973,6 @@ SET_CONFIG = false; }; DOMPurify.isValidAttribute = function (tag, attr, value) { - / Initialize shared config vars if necessary. / if (!CONFIG) { _parseConfig({}); } @@ -1346,49 +1008,12 @@ })); -/ - // JavaScript for Able Player - - // HTML5 Media API: - // http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement - // http://dev.w3.org/html5/spec-author-view/video.html - - // W3C API Test Page: - // http://www.w3.org/2010/05/video/mediaevents.html - - // YouTube Player API for iframe Embeds - https://developers.google.com/youtube/iframe_api_reference - - // YouTube Player Parameters - https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 - - // YouTube Data API - https://developers.google.com/youtube/v3 - - // Vimeo Player API - https://github.com/vimeo/player.js - - // Google API Client Library for JavaScript - https://developers.google.com/api-client-library/javascript/dev/dev_jscript - - // Google API Explorer: YouTube services and methods - https://developers.google.com/apis-explorer/#s/youtube/v3/ - - // Web Speech API (Speech Synthesis) - // https://w3c.github.io/speech-api/#tts-section - // https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis -/ - -/jslint node: true, browser: true, white: true, indent: 2, unparam: true, plusplus: true / -/global $, jQuery / "use strict"; -// maintain an array of Able Player instances for use globally (e.g., for keeping prefs in sync) var AblePlayerInstances = []; (function ($) { $(function () { - $('video, audio').each(function (index, element) { if ($(element).data('able-player') !== undefined) { AblePlayerInstances.push(new AblePlayer($(this),$(element))); @@ -1396,28 +1021,20 @@ var AblePlayerInstances = []; }); }); - // YouTube player support; pass ready event to jQuery so we can catch in player. window.onYouTubeIframeAPIReady = function() { AblePlayer.youTubeIframeAPIReady = true; $('body').trigger('youTubeIframeAPIReady', []); }; - // If there is only one player on the page, dispatch global keydown events to it - // Otherwise, keydowwn events are handled locally (see event.js > handleEventListeners()) $(window).on('keydown',function(e) { if (AblePlayer.nextIndex === 1) { AblePlayer.lastCreated.onPlayerKeyPress(e); } }); - // Construct an AblePlayer object - // Parameters are: - // media - jQuery selector or element identifying the media. window.AblePlayer = function(media) { - var thisObj = this; - // Keep track of the last player created for use with global events. AblePlayer.lastCreated = this; this.media = media; @@ -1426,85 +1043,39 @@ var AblePlayerInstances = []; return; } - /////////////////////////////// - // - // Default variables assignment - // - /////////////////////////////// - // The following variables CAN be overridden with HTML attributes - - // autoplay (Boolean; if present always resolves to true, regardless of value) if ($(media).attr('autoplay') !== undefined) { - this.autoplay = true; // this value remains constant - this.okToPlay = true; // this value can change dynamically - } - else { + this.autoplay = true; + this.okToPlay = true; + } else { this.autoplay = false; this.okToPlay = false; } - - // loop (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('loop') !== undefined) { - this.loop = true; - } - else { - this.loop = false; - } - // playsinline (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('playsinline') !== undefined) { - this.playsInline = '1'; // this value gets passed to YT.Player contructor in youtube.js - } - else { - this.playsInline = '0'; - } + this.loop = ($(media).attr('loop') !== undefined) ? true : false; - // poster (Boolean, indicating whether media element has a poster attribute) - if ($(media).attr('poster')) { - this.hasPoster = true; - } - else { - this.hasPoster = false; - } + this.playsInline = ($(media).attr('playsinline') !== undefined) ? '1' : '0'; - // get height and width attributes, if present - // and add them to variables - // Not currently used, but might be useful for resizing player - if ($(media).attr('width')) { - this.width = $(media).attr('width'); - } - if ($(media).attr('height')) { - this.height = $(media).attr('height'); - } + this.hasPoster = ( $(media).attr('poster') \|\| $(media).data('poster') ) ? true : false; - // start-time - if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) { - this.startTime = $(media).data('start-time'); - } - else { - this.startTime = 0; - } + this.audioPoster = $(media).data('poster'); + this.audioPosterAlt = $(media).data('poster-alt' ); - // debug - if ($(media).data('debug') !== undefined && $(media).data('debug') !== false) { - this.debug = true; - } - else { - this.debug = false; - } + this.width = $(media).attr('width') ?? 0; + this.height = $(media).attr('height') ?? 0; + + var startTime = $(media).data('start-time'); + var isNumeric = ( typeof startTime === 'number' \|\| ( typeof startTime === 'string' && value.trim() !== '' && ! isNaN(value) && isFinite( Number(value) ) ) ) ? true : false; + this.startTime = ( startTime !== undefined && isNumeric ) ? startTime : 0; + + this.debug = ($(media).data('debug') !== undefined && $(media).data('debug') !== false) ? true : false; - // Path to root directory of Able Player code if ($(media).data('root-path') !== undefined) { - // add a trailing slash if there is none this.rootPath = $(media).data('root-path').replace(/\/?$/, '/'); - } - else { + } else { this.rootPath = this.getRootPath(); } - // Volume - // Range is 0 to 10. Best not to crank it to avoid overpowering screen readers this.defaultVolume = 7; if ($(media).data('volume') !== undefined && $(media).data('volume') !== "") { var volume = $(media).data('volume'); @@ -1514,473 +1085,273 @@ var AblePlayerInstances = []; } this.volume = this.defaultVolume; - // Optional Buttons - // Buttons are added to the player controller if relevant media is present - // However, in some applications it might be undesirable to show buttons - // (e.g., if chapters or transcripts are provided in an external container) if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) { this.useChaptersButton = false; - } - else { + } else { this.useChaptersButton = true; } - - // Control whether text descriptions are read aloud - // set to "false" if the sole purpose of the WebVTT descriptions file - // is to integrate text description into the transcript - // set to "true" to write description text to a div - // This variable does not* control the method by which description is read. - // For that, see below (this.descMethod) + if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) { this.readDescriptionsAloud = false; - } - else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { - // support both singular and plural spelling of attribute + } else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { this.readDescriptionsAloud = false; - } - else { + } else { this.readDescriptionsAloud = true; } - // Method by which text descriptions are read - // valid values of data-desc-reader are: - // 'brower' (default) - text-based audio description is handled by the browser, if supported - // 'screenreader' - text-based audio description is always handled by screen readers - // The latter may be preferable by owners of websites in languages that are not well supported - // by the Web Speech API - if ($(media).data('desc-reader') == 'screenreader') { - this.descReader = 'screenreader'; - } - else { - this.descReader = 'browser'; - } + this.descVoices = []; - // Default state of captions and descriptions - // This setting is overridden by user preferences, if they exist - // values for data-state-captions and data-state-descriptions are 'on' or 'off' - if ($(media).data('state-captions') == 'off') { - this.defaultStateCaptions = 0; // off - } - else { - this.defaultStateCaptions = 1; // on by default - } - if ($(media).data('state-descriptions') == 'on') { - this.defaultStateDescriptions = 1; // on - } - else { - this.defaultStateDescriptions = 0; // off by default - } + this.descReader = ($(media).data('desc-reader') == 'screenreader') ? 'screenreader' : 'browser'; - // Default setting for prefDescPause - // Extended description (i.e., pausing during description) is on by default - // but this settings give website owners control over that - // since they know the nature of their videos, and whether pausing is necessary - // This setting is overridden by user preferences, if they exist - if ($(media).data('desc-pause-default') == 'off') { - this.defaultDescPause = 0; // off - } - else { - this.defaultDescPause = 1; // on by default - } + this.defaultStateCaptions = ($(media).data('state-captions') == 'off') ? 0 : 1; + this.defaultStateDescriptions = ($(media).data('state-descriptions') == 'on') ? 1 : 0; + + this.defaultDescPause = ($(media).data('desc-pause-default') == 'off') ? 0 : 1; - // Headings - // By default, an off-screen heading is automatically added to the top of the media player - // It is intelligently assigned a heading level based on context, via misc.js > getNextHeadingLevel() - // Authors can override this behavior by manually assigning a heading level using data-heading-level - // Accepted values are 1-6, or 0 which indicates "no heading" - // (i.e., author has already hard-coded a heading before the media player; Able Player doesn't need to do this) if ($(media).data('heading-level') !== undefined && $(media).data('heading-level') !== "") { var headingLevel = $(media).data('heading-level'); - if (/^[0-6]$/.test(headingLevel)) { // must be a valid HTML heading level 1-6; or 0 + if (/^[0-6]$/.test(headingLevel)) { this.playerHeadingLevel = headingLevel; } } - // Transcripts - // There are three types of interactive transcripts. - // In descending of order of precedence (in case there are conflicting tags), they are: - // 1. "manual" - A manually coded external transcript (requires data-transcript-src) - // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div) - // 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button - // If data-include-transcript="false", there is no "popup" transcript - - if ($(media).data('transcript-div') !== undefined && $(media).data('transcript-div') !== "") { - this.transcriptDivLocation = $(media).data('transcript-div'); - } - else { + var transcriptDivLocation = $(media).data('transcript-div'); + if ( transcriptDivLocation !== undefined && transcriptDivLocation !== "" && null !== document.getElementById( transcriptDivLocation ) ) { + this.transcriptDivLocation = transcriptDivLocation; + } else { this.transcriptDivLocation = null; } - if ($(media).data('include-transcript') !== undefined && $(media).data('include-transcript') === false) { - this.hideTranscriptButton = true; - } - else { - this.hideTranscriptButton = null; - } + var includeTranscript = $(media).data('include-transcript'); + this.hideTranscriptButton = ( includeTranscript !== undefined && includeTranscript === false) ? true : false; this.transcriptType = null; if ($(media).data('transcript-src') !== undefined) { this.transcriptSrc = $(media).data('transcript-src'); if (this.transcriptSrcHasRequiredParts()) { this.transcriptType = 'manual'; - } - else { - - } - } - else if ($(media).find('track[kind="captions"], track[kind="subtitles"]').length > 0) { - // required tracks are present. COULD automatically generate a transcript - if (this.transcriptDivLocation) { - this.transcriptType = 'external'; - } - else { - this.transcriptType = 'popup'; - } - } + } else { - // In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript - // If false (default), line breaks are are removed from transcripts in order to provide a more seamless reading experience - // If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem - if ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) { - this.lyricsMode = true; - } - else { - this.lyricsMode = false; + } + } else if ($(media).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length > 0) { + this.transcriptType = (this.transcriptDivLocation) ? 'external' : 'popup'; } - // Transcript Title + this.lyricsMode = ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) ? true : false; + if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") { this.transcriptTitle = $(media).data('transcript-title'); } - else { - // do nothing. The default title will be defined later (see transcript.js) - } - // Captions - // data-captions-position can be used to set the default captions position - // this is only the default, and can be overridden by user preferences - // valid values of data-captions-position are 'below' and 'overlay' - if ($(media).data('captions-position') === 'overlay') { - this.defaultCaptionsPosition = 'overlay'; - } - else { // the default, even if not specified - this.defaultCaptionsPosition = 'below'; + var signDivLocation = $(media).data('sign-div'); + if ( signDivLocation !== undefined && signDivLocation !== "" && null !== document.getElementById( signDivLocation ) ) { + this.$signDivLocation = $( '#' + signDivLocation ); + } else { + this.$signDivLocation = null; } - // Chapters - if ($(media).data('chapters-div') !== undefined && $(media).data('chapters-div') !== "") { - this.chaptersDivLocation = $(media).data('chapters-div'); + this.defaultCaptionsPosition = ($(media).data('captions-position') === 'overlay') ? 'overlay' : 'below'; + + var chaptersDiv = $(media).data('chapters-div'); + if ( chaptersDiv !== undefined && chaptersDiv !== "") { + this.chaptersDivLocation = chaptersDiv; } if ($(media).data('chapters-title') !== undefined) { - // NOTE: empty string is valid; results in no title being displayed this.chaptersTitle = $(media).data('chapters-title'); } - if ($(media).data('chapters-default') !== undefined && $(media).data('chapters-default') !== "") { - this.defaultChapter = $(media).data('chapters-default'); - } - else { - this.defaultChapter = null; - } + var defaultChapter = $(media).data('chapters-default'); + this.defaultChapter = ( defaultChapter !== undefined && defaultChapter !== "") ? defaultChapter : null; - // Slower/Faster buttons - // valid values of data-speed-icons are 'animals' (default) and 'arrows' - // 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows - if ($(media).data('speed-icons') === 'arrows') { - this.speedIcons = 'arrows'; - } - else { - this.speedIcons = 'animals'; - } + this.speedIcons = ($(media).data('speed-icons') === 'arrows') ? 'arrows' : 'animals'; - // Seekbar - // valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters' - if ($(media).data('seekbar-scope') === 'chapter' \|\| $(media).data('seekbar-scope') === 'chapters') { - this.seekbarScope = 'chapter'; - } - else { - this.seekbarScope = 'video'; - } + var seekbarScope = $(media).data('seekbar-scope'); + this.seekbarScope = ( seekbarScope === 'chapter' \|\| seekbarScope === 'chapters') ? 'chapter' : 'video'; - // YouTube - if ($(media).data('youtube-id') !== undefined && $(media).data('youtube-id') !== "") { - this.youTubeId = this.getYouTubeId($(media).data('youtube-id')); + var youTubeId = $(media).data('youtube-id'); + if ( youTubeId !== undefined && youTubeId !== "") { + this.youTubeId = this.getYouTubeId(youTubeId); + if ( ! this.hasPoster ) { + let poster = this.getYouTubePosterUrl(this.youTubeId,'640'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('youtube-desc-id') !== undefined && $(media).data('youtube-desc-id') !== "") { - this.youTubeDescId = this.getYouTubeId($(media).data('youtube-desc-id')); + var youTubeDescId = $(media).data('youtube-desc-id'); + if ( youTubeDescId !== undefined && youTubeDescId !== "") { + this.youTubeDescId = this.getYouTubeId(youTubeDescId); } - if ($(media).data('youtube-nocookie') !== undefined && $(media).data('youtube-nocookie')) { - this.youTubeNoCookie = true; - } - else { - this.youTubeNoCookie = false; + var youTubeSignId = $(media).data('youtube-sign-src'); + if ( youTubeSignId !== undefined && youTubeSignId !== "") { + this.youTubeSignId = this.getYouTubeId(youTubeSignId); } - // Vimeo - if ($(media).data('vimeo-id') !== undefined && $(media).data('vimeo-id') !== "") { - this.vimeoId = this.getVimeoId($(media).data('vimeo-id')); - } - if ($(media).data('vimeo-desc-id') !== undefined && $(media).data('vimeo-desc-id') !== "") { - this.vimeoDescId = this.getVimeoId($(media).data('vimeo-desc-id')); - } + var youTubeNoCookie = $(media).data('youtube-nocookie'); + this.youTubeNoCookie = (youTubeNoCookie !== undefined && youTubeNoCookie) ? true : false; - // Skin - // valid values of data-skin are: - // 'legacy' (default), two rows of controls; seekbar positioned in available space within top row - // '2020', all buttons in one row beneath a full-width seekbar - if ($(media).data('skin') == '2020') { - this.skin = '2020'; + var vimeoId = $(media).data('vimeo-id'); + if ( vimeoId !== undefined && vimeoId !== "") { + this.vimeoId = this.getVimeoId(vimeoId); + if ( ! this.hasPoster ) { + let poster = thisObj.getVimeoPosterUrl(this.vimeoId,'1200'); + $(media).attr( 'poster', poster ); + } } - else { - this.skin = 'legacy'; + var vimeoDescId = $(media).data('vimeo-desc-id'); + if ( vimeoDescId !== undefined && vimeoDescId !== "") { + this.vimeoDescId = this.getVimeoId(vimeoDescId); } - // Size - // width of Able Player is determined using the following order of precedence: - // 1. data-width attribute - // 2. width attribute (for video or audio, although it is not valid HTML for audio) - // 3. Intrinsic size from video (video only, determined later) + this.skin = ($(media).data('skin') == 'legacy') ? 'legacy' : '2020'; + if ($(media).data('width') !== undefined) { this.playerWidth = parseInt($(media).data('width')); - } - else if ($(media)[0].getAttribute('width')) { - // NOTE: jQuery attr() returns null for all invalid HTML attributes - // (e.g., width on <audio>) - // but it can be acessed via JavaScript getAttribute() + } else if ($(media)[0].getAttribute('width')) { this.playerWidth = parseInt($(media)[0].getAttribute('width')); - } - else { - this.playerWidth = null; + } else { + this.playerWidth = null; } - // Icon type - // By default, AblePlayer 3.0.33 and higher uses SVG icons for the player controls - // Fallback for browsers that don't support SVG is scalable icomoon fonts - // Ultimate fallback is images, if the user has a custom style sheet that overrides font-family - // Use data-icon-type to force controls to use either 'svg', 'font', or 'images' this.iconType = 'font'; this.forceIconType = false; if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") { var iconType = $(media).data('icon-type'); - if (iconType === 'font' \|\| iconType == 'image' \|\| iconType == 'svg') { + if (iconType === 'font' \|\| iconType === 'image' \|\| iconType === 'svg') { this.iconType = iconType; this.forceIconType = true; } } - if ($(media).data('allow-fullscreen') !== undefined && $(media).data('allow-fullscreen') === false) { - this.allowFullscreen = false; - } - else { - this.allowFullscreen = true; - } - // Define other variables that are used in fullscreen program flow - this.clickedFullscreenButton = false; - this.restoringAfterFullscreen = false; + var allowFullScreen = $(media).data('allow-fullscreen'); + this.allowFullscreen = (allowFullScreen !== undefined && allowFullScreen === false) ? false : true; + + this.clickedFullscreenButton = false; + this.restoringAfterFullscreen = false; - // Seek interval - // Number of seconds to seek forward or back with Rewind & Forward buttons - // Unless specified with data-seek-interval, the default value is re-calculated in initialize.js > setSeekInterval(); - // Calculation attempts to intelligently assign a reasonable interval based on media length this.defaultSeekInterval = 10; - this.useFixedSeekInterval = false; // will change to true if media has valid data-seek-interval attribute + this.useFixedSeekInterval = false; if ($(media).data('seek-interval') !== undefined && $(media).data('seek-interval') !== "") { var seekInterval = $(media).data('seek-interval'); - if (/^[1-9][0-9]$/.test(seekInterval)) { // must be a whole number greater than 0 + if (/^[1-9][0-9]$/.test(seekInterval)) { this.seekInterval = seekInterval; - this.useFixedSeekInterval = true; // do not override with calculuation + this.useFixedSeekInterval = true; } } - // Now Playing - // Shows "Now Playing:" plus the title of the current track above player - // Only used if there is a playlist - if ($(media).data('show-now-playing') !== undefined && $(media).data('show-now-playing') === false) { - this.showNowPlaying = false; - } - else { - this.showNowPlaying = true; - } + var showNowPlaying = $(media).data('show-now-playing'); + this.showNowPlaying = (showNowPlaying !== undefined && showNowPlaying === false) ? false : true; - // TTML support (experimental); enabled for testing with data-use-ttml (Boolean) if ($(media).data('use-ttml') !== undefined) { this.useTtml = true; - // The following may result in a console error. this.convert = require('xml-js'); - } - else { + } else { this.useTtml = false; } - // Fallback - // The data-test-fallback attribute can be used to test the fallback solution in any browser - if ($(media).data('test-fallback') !== undefined && $(media).data('test-fallback') !== false) { - if ($(media).data('test-fallback') == '2') { - this.testFallback = 2; // emulate browser that doesn't support HTML5 media - } - else { - this.testFallback = 1; // emulate failure to load Able Player - } - } - else { - this.testFallback = false; + var testFallback = $(media).data('test-fallback'); + if ( testFallback !== undefined && testFallback !== false) { + this.testFallback = ( testFallback == '2' ) ? 2 : 1; + } else { + this.testFallback = false; } - // Language - // Player language is determined given the following precedence: - // 1. The value of data-lang on the media element, if provided and a matching translation file is available - // 2. Lang attribute on <html> or <body>, if a matching translation file is available - // 3. English - // Final calculation occurs in translation.js > getTranslationText() - if ($(media).data('lang') !== undefined && $(media).data('lang') !== "") { - this.lang = $(media).data('lang').toLowerCase(); - } - else { - this.lang = null; - } + var lang = $(media).data('lang'); + this.lang = ( lang !== undefined && lang !== "") ? lang.toLowerCase() : null; - // Metadata Tracks - if ($(media).data('meta-type') !== undefined && $(media).data('meta-type') !== "") { - this.metaType = $(media).data('meta-type'); + var metaType = $(media).data('meta-type'); + if ( metaType !== undefined && metaType !== "") { + this.metaType = metaType; } - - if ($(media).data('meta-div') !== undefined && $(media).data('meta-div') !== "") { - this.metaDiv = $(media).data('meta-div'); + var metaDiv = $(media).data('meta-div'); + if ( metaDiv !== undefined && metaDiv !== "") { + this.metaDiv = metaDiv; } - // Search - // conducting a search requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - - this.searchDiv = $(media).data('search-div'); + var searchDiv = $(media).data('search-div'); + if ( searchDiv !== undefined && searchDiv !== "") { - // Search term (optional; could be assigned later in a JavaScript application) - if ($(media).data('search') !== undefined && $(media).data('search') !== "") { - this.searchString = $(media).data('search'); - } + this.searchDiv = searchDiv; - // Search Language - if ($(media).data('search-lang') !== undefined && $(media).data('search-lang') !== "") { - this.searchLang = $(media).data('search-lang'); - } - else { - this.searchLang = null; // will change to final value of this.lang in translation.js > getTranslationText() + var searchString = $(media).data('search'); + if ( searchString !== undefined && searchString !== "") { + this.searchString = searchString; } - // Search option: Ignore capitalization in search terms - if ($(media).data('search-ignore-caps') !== undefined && $(media).data('search-ignore-caps') !== false) { - this.searchIgnoreCaps = true; - } - else { - this.searchIgnoreCaps = false; - } + var searchLang = $(media).data('search-lang'); + this.searchLang = ( searchLang !== undefined && searchLang !== "") ? searchLang : null; - // conducting a search currently requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - this.searchString = $(media).data('search'); - this.searchDiv = $(media).data('search-div'); - } + var searchIgnoreCaps = $(media).data('search-ignore-caps'); + this.searchIgnoreCaps = ( searchIgnoreCaps !== undefined && searchIgnoreCaps !== false) ? true : false; } - // Hide controls when video starts playing - // They will reappear again when user presses a key or moves the mouse - // As of v4.0, controls are hidden automatically on playback in fullscreen mode if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) { this.hideControls = true; - this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode - } - else { + this.hideControlsOriginal = true; + } else { this.hideControls = false; this.hideControlsOriginal = false; } - // Steno mode - // Enable support for Able Player keyboard shortcuts in textaarea fields - // so users can control the player while transcribing if ($(media).data('steno-mode') !== undefined && $(media).data('steno-mode') !== false) { this.stenoMode = true; - // Add support for stenography in an iframe via data-steno-iframe-id if ($(media).data('steno-iframe-id') !== undefined && $(media).data('steno-iframe-id') !== "") { this.stenoFrameId = $(media).data('steno-iframe-id'); this.$stenoFrame = $('#' + this.stenoFrameId); if (!(this.$stenoFrame.length)) { - // iframe not found this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoMode = false; this.stenoFrameId = null; this.$stenoFrame = null; } - // Define built-in variables that CANNOT be overridden with HTML attributes this.setDefaults(); - //////////////////////////////////////// - // - // End assignment of default variables - // - //////////////////////////////////////// this.ableIndex = AblePlayer.nextIndex; AblePlayer.nextIndex += 1; this.title = $(media).attr('title'); - // populate translation object with localized versions of all labels and prompts - // use defer method to defer additional processing until text is retrieved this.tt = {}; var thisObj = this; - $.when(this.getTranslationText()).then( - function () { - if (thisObj.countProperties(thisObj.tt) > 50) { - // close enough to ensure that most text variables are populated - thisObj.setup(); - } - else { - // can't continue loading player with no text - thisObj.provideFallback(); - } + async function fetchTranslations(thisObj) { + try { + await thisObj.getTranslationText(); + thisObj.setup(); + } catch { + thisObj.provideFallback(); } - ). - fail(function() { - thisObj.provideFallback(); - }); + } + fetchTranslations(thisObj); }; - // Index to increment every time new player is created. AblePlayer.nextIndex = 0; AblePlayer.prototype.setup = function() { var thisObj = this; - this.initializing = true; // will remain true until entire sequence of function calls is complete + this.initializing = true; this.reinitialize().then(function () { if (!thisObj.player) { - // No player for this media, show last-line fallback. thisObj.provideFallback(); - } - else { + } else { thisObj.setupInstance().then(function () { thisObj.setupInstancePlaylist(); if (thisObj.hasPlaylist) { - // for playlists, recreatePlayer() is called from within cuePlaylistItem() - } - else { - thisObj.recreatePlayer().then(function() { + } else { + thisObj.recreatePlayer().then(function() { thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed + thisObj.playerCreated = true; }); } }); @@ -1991,7 +1362,6 @@ var AblePlayerInstances = []; AblePlayer.getActiveDOMElement = function () { var activeElement = document.activeElement; - // For shadow DOMs we need to keep digging down through the DOMs while (activeElement.shadowRoot && activeElement.shadowRoot.activeElement) { activeElement = activeElement.shadowRoot.activeElement; } @@ -2000,14 +1370,9 @@ var AblePlayerInstances = []; }; AblePlayer.localGetElementById = function(element, id) { - if (element.getRootNode) - { - // Use getRootNode() and querySelector() where supported (for shadow DOM support) + if (element.getRootNode) { return $(element.getRootNode().querySelector('#' + id)); - } - else - { - // If getRootNode is not supported it should be safe to use document.getElementById (since there is no shadow DOM support) + } else { return $(document.getElementById(id)); } }; @@ -2017,19 +1382,18 @@ var AblePlayerInstances = []; })(jQuery); (function ($) { - // Set default variable values. AblePlayer.prototype.setDefaults = function () { - this.playerCreated = false; // will set to true after recreatePlayer() is complete the first time - this.playing = false; // will change to true after 'playing' event is triggered - this.paused = true; // will always be the opposite of this.playing (available for convenience) - this.clickedPlay = false; // will change to true temporarily if user clicks 'play' (or pause) - this.fullscreen = false; // will change to true if player is in full screen mode - this.swappingSrc = false; // will change to true temporarily while media source is being swapped - this.initializing = false; // will change to true temporarily while initPlayer() is processing - this.cueingPlaylistItems = false; // will change to true temporarily while cueing next playlist item - this.buttonWithFocus = null; // will change to 'previous' or 'next' if user clicks either of those buttons - this.speechEnabled = null; // will change either to 'true' in initSpeech(), or false if not supported + this.playerCreated = false; + this.playing = false; + this.paused = true; + this.clickedPlay = false; + this.fullscreen = false; + this.swappingSrc = false; + this.initializing = false; + this.cueingPlaylistItems = false; + this.buttonWithFocus = null; + this.speechEnabled = null; this.setIconColor(); this.setButtonImages(); @@ -2037,19 +1401,17 @@ var AblePlayerInstances = []; AblePlayer.prototype.getRootPath = function() { - // returns Able Player root path (assumes ableplayer.js is in /build, one directory removed from root) var scripts, i, scriptSrc, scriptFile, fullPath, ablePath, parentFolderIndex, rootPath; scripts= document.getElementsByTagName('script'); for (i=0; i < scripts.length; i++) { scriptSrc = scripts[i].src; scriptFile = scriptSrc.substring(scriptSrc.lastIndexOf('/')); if (scriptFile.indexOf('ableplayer') !== -1) { - // this is the ableplayerscript - fullPath = scriptSrc.split('?')[0]; // remove any ? params + fullPath = scriptSrc.split('?')[0]; break; } } - ablePath= fullPath.split('/').slice(0, -1).join('/'); // remove last filename part of path + ablePath= fullPath.split('/').slice(0, -1).join('/'); parentFolderIndex = ablePath.lastIndexOf('/'); rootPath = ablePath.substring(0, parentFolderIndex) + '/'; return rootPath; @@ -2057,15 +1419,7 @@ var AblePlayerInstances = []; AblePlayer.prototype.setIconColor = function() { - // determine the best color choice (white or black) for icons, - // given the background-color of their container elements - // Source for relative luminance formula: - // https://en.wikipedia.org/wiki/Relative_luminance - // We need to know the color before creating the element - // so the element doesn't exist yet when this function is called - // therefore, need to create a temporary element then remove it after color is determined - // Temp element must be added to the DOM or WebKit can't retrieve its CSS properties var $elements, i, $el, bgColor, rgb, red, green, blue, luminance, iconColor; @@ -2075,32 +1429,23 @@ var AblePlayerInstances = []; $el = $('<div>', { 'class': 'able-controller' }).hide(); - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { $el = $('<div>', { 'class': 'able-window-toolbar' }).hide(); } $('body').append($el); bgColor = $el.css('background-color'); - // bgColor is a string in the form 'rgb(R, G, B)', perhaps with a 4th item for alpha; - // split the 3 or 4 channels into an array rgb = bgColor.replace(/[^\d,]/g, '').split(','); red = rgb[0]; green = rgb[1]; blue = rgb[2]; luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue); - // range is 1 - 255; therefore 125 is the tipping point - if (luminance < 125) { // background is dark - iconColor = 'white'; - } - else { // background is light - iconColor = 'black'; - } + iconColor = (luminance < 125) ? 'white' : 'black'; + if ($elements[i] === 'controller') { this.iconColor = iconColor; - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { this.toolbarIconColor = iconColor; } $el.remove(); @@ -2109,24 +1454,19 @@ var AblePlayerInstances = []; AblePlayer.prototype.setButtonImages = function() { - // NOTE: volume button images are now set dynamically within volume.js this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/'; this.playButtonImg = this.imgPath + 'play.png'; this.pauseButtonImg = this.imgPath + 'pause.png'; - this.restartButtonImg = this.imgPath + 'restart.png'; - this.rewindButtonImg = this.imgPath + 'rewind.png'; this.forwardButtonImg = this.imgPath + 'forward.png'; - this.previousButtonImg = this.imgPath + 'previous.png'; this.nextButtonImg = this.imgPath + 'next.png'; if (this.speedIcons === 'arrows') { this.fasterButtonImg = this.imgPath + 'slower.png'; this.slowerButtonImg = this.imgPath + 'faster.png'; - } - else if (this.speedIcons === 'animals') { + } else if (this.speedIcons === 'animals') { this.fasterButtonImg = this.imgPath + 'rabbit.png'; this.slowerButtonImg = this.imgPath + 'turtle.png'; } @@ -2136,19 +1476,14 @@ var AblePlayerInstances = []; this.signButtonImg = this.imgPath + 'sign.png'; this.transcriptButtonImg = this.imgPath + 'transcript.png'; this.descriptionsButtonImg = this.imgPath + 'descriptions.png'; - this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png'; this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png'; - this.prefsButtonImg = this.imgPath + 'preferences.png'; this.helpButtonImg = this.imgPath + 'help.png'; }; - AblePlayer.prototype.getSvgData = function(button) { + AblePlayer.prototype.getIconData = function(button) { - // returns array of values for creating <svg> tag for specified button - // 0 = <svg> viewBox attribute - // 1 = <path> d (description) attribute var svg = Array(); switch (button) { @@ -2156,185 +1491,211 @@ var AblePlayerInstances = []; case 'play': svg[0] = '0 0 16 20'; svg[1] = 'M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z'; + svg[2] = 'icon-play'; + svg[3] = this.playButtonImg; break; case 'pause': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'stop': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-pause'; + svg[3] = this.pauseButtonImg; break; case 'restart': svg[0] = '0 0 20 20'; svg[1] = 'M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z'; + svg[2] = 'icon-restart'; + svg[3] = this.restartButtonImg; break; case 'rewind': svg[0] = '0 0 20 20'; svg[1] = 'M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z'; + svg[2] = 'icon-rewind'; + svg[3] = this.rewindButtonImg; break; case 'forward': svg[0] = '0 0 20 20'; svg[1] = 'M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z'; + svg[2] = 'icon-forward'; + svg[3] = this.forwardButtonImg; break; case 'previous': svg[0] = '0 0 20 20'; svg[1] = 'M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z'; + svg[2] = 'icon-previous'; + svg[3] = this.previousButtonImg; break; case 'next': svg[0] = '0 0 20 20'; svg[1] = 'M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z'; + svg[2] = 'icon-next'; + svg[3] = this.nextButtonImg; break; case 'slower': - svg[0] = '0 0 20 20'; + svg[0] = '0 0 11 20'; svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z'; + svg[2] = 'icon-slower'; + svg[3] = this.slowerButtonImg; break; case 'faster': svg[0] = '0 0 11 20'; svg[1] = 'M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-faster'; + svg[3] = this.fasterButtonImg; break; case 'turtle': svg[0] = '0 0 20 20'; svg[1] = 'M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z'; + svg[2] = 'icon-turtle'; + svg[3] = this.slowerButtonImg; break; case 'rabbit': svg[0] = '0 0 20 20'; svg[1] = 'M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z'; + svg[2] = 'icon-rabbit'; + svg[3] = this.fasterButtonImg; break; case 'ellipsis': svg[0] = '0 0 20 20'; svg[1] = 'M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z'; + svg[2] = 'icon-ellipsis'; + svg[3] = false; break; case 'pipe': svg[0] = '0 0 20 20'; svg[1] = 'M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z'; + svg[2] = 'icon-pipe'; + svg[3] = false; break; case 'captions': svg[0] = '0 0 20 20'; svg[1] = 'M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z'; + svg[2] = 'icon-captions'; + svg[3] = this.captionsButtonImg; break; case 'descriptions': svg[0] = '0 0 20 20'; svg[1] = 'M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z'; + svg[2] = 'icon-descriptions'; + svg[3] = this.descriptionsButtonImg; break; case 'sign': svg[0] = '0 0 20 20'; svg[1] = 'M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z'; + svg[2] = 'icon-sign'; + svg[3] = this.signButtonImg; break; case 'mute': case 'volume-mute': svg[0] = '0 0 20 20'; svg[1] = 'M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z'; + svg[2] = 'icon-volume-mute'; + svg[3] = this.imgPath + 'volume-mute.png'; break; case 'volume-soft': svg[0] = '0 0 20 20'; svg[1] = 'M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-soft'; + svg[3] = this.imgPath + 'volume-soft.png'; break; case 'volume-medium': svg[0] = '0 0 20 20'; svg[1] = 'M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-medium'; + svg[3] = this.imgPath + 'volume-medium.png'; break; case 'volume-loud': svg[0] = '0 0 21 20'; svg[1] = 'M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-loud'; + svg[3] = this.imgPath + 'volume-loud.png'; break; case 'chapters': svg[0] = '0 0 20 20'; svg[1] = 'M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z'; + svg[2] = 'icon-chapters'; + svg[3] = this.chaptersButtonImg; break; case 'transcript': svg[0] = '0 0 20 20'; svg[1] = 'M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z'; + svg[2] = 'icon-transcript'; + svg[3] = this.transcriptButtonImg; break; case 'preferences': svg[0] = '0 0 20 20'; svg[1] = 'M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z'; + svg[2] = 'icon-preferences'; + svg[3] = this.prefsButtonImg; break; case 'close': svg[0] = '0 0 16 20'; svg[1] = 'M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z'; + svg[2] = 'icon-close'; + svg[3] = null; break; case 'fullscreen-expand': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z'; + svg[2] = 'icon-fullscreen-expand'; + svg[3] = this.fullscreenExpandButtonImg; break; case 'fullscreen-collapse': svg[0] = '0 0 20 20'; svg[1] = 'M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'help': - svg[0] = '0 0 11 20'; - svg[1] = 'M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z'; + svg[2] = 'icon-fullscreen-collapse'; + svg[3] = this.fullscreenCollapseButtonImg; break; } return svg; }; - // Initialize player based on data on page. - // This sets some variables, but does not modify anything. Safe to call multiple times. - // Can call again after updating this.media so long as new media element has the same ID. AblePlayer.prototype.reinitialize = function () { - var deferred, promise, thisObj, errorMsg, srcFile; + var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - // if F12 Developer Tools aren't open in IE (through 9, no longer a problen in IE10) - // console.log causes an error - can't use debug without a console to log messages to - if (! window.console) { - this.debug = false; - } - this.startedPlaying = false; - // TODO: Move this setting to cookie. this.autoScrollTranscript = true; - //this.autoScrollTranscript = this.getCookie(autoScrollTranscript); // (doesn't work) - // Bootstrap from this.media possibly being an ID or other selector. this.$media = $(this.media).first(); this.media = this.$media[0]; - // Set media type to 'audio' or 'video'; this determines some of the behavior of player creation. if (this.$media.is('audio')) { this.mediaType = 'audio'; - } - else if (this.$media.is('video')) { + } else if (this.$media.is('video')) { this.mediaType = 'video'; - } - else { - // Able Player was initialized with some element other than <video> or <audio> + } else { this.provideFallback(); - deferred.fail(); + deferred.reject(); return promise; } @@ -2342,7 +1703,6 @@ var AblePlayerInstances = []; this.player = this.getPlayer(); if (!this.player) { - // an error was generated in getPlayer() this.provideFallback(); } this.setIconType(); @@ -2353,108 +1713,30 @@ var AblePlayerInstances = []; AblePlayer.prototype.setPlayerSize = function(width, height) { - var mediaId = this.$media.attr('id'); - - // Called again after width and height are known - - if (this.mediaType === 'audio') { - if (this.playerWidth) { - this.$ableWrapper.css('width',this.playerWidth + 'px'); - } - } - else if (width > 0 && height > 0) { - this.playerWidth = width; - this.playerHeight = height; - this.aspectRatio = height / width; + if (this.mediaType !== 'audio' && width > 0 && height > 0) { + this.playerWidth = width; + this.playerHeight = height; + this.aspectRatio = height / width; } }; AblePlayer.prototype.setIconType = function() { - // returns either "svg", "font" or "image" (in descending order of preference) - // Test for support of each type. If not supported, test the next type. - // last resort is image icons - - var $tempButton, $testButton, controllerFont; - if (this.forceIconType) { - // use value specified in data-icon-type return false; } - // test for SVG support - // Test this method widely; failed as expected on IE8 and below - // https://stackoverflow.com/a/27568129/744281 - if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) { - // browser supports SVG - this.iconType = 'svg'; - } - else { - // browser does NOT support SVG - // test whether browser can support icon fonts, and whether user has overriding the default style sheet - // which could cause problems with proper display of the icon fonts - if (window.getComputedStyle) { - - // webkit doesn't return calculated styles unless element has been added to the DOM - // and is visible (note: visibly clipped is considered "visible") - // use playpauseButton for font-family test if it exists; otherwise must create a new temp button - if ($('span.icon-play').length) { - $testButton = $('span.icon-play'); - } - else { - $tempButton = $('<span>',{ - 'class': 'icon-play able-clipped' - }); - $('body').append($tempButton); - $testButton = $tempButton; - } - - // the following retrieves the computed value of font-family - // tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works! - // tested in Chrome 49.x with Font Changer plugin - works! - // tested in IE with user-defined style sheet enables - works! - // It does NOT account for users who have "ignore font styles on web pages" checked in IE - // There is no known way to check for that ??? - controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family'); - if (typeof controllerFont !== 'undefined') { - if (controllerFont.indexOf('able') !== -1) { - this.iconType = 'font'; - } - else { - this.iconType = 'image'; - } - } - else { - // couldn't get computed font-family; use images to be safe - this.iconType = 'image'; - } - } - else { - // window.getComputedStyle is not supported (IE 8 and earlier) - // No known way to detect computed font - // The following retrieves the value from the style sheet, not the computed font - // controllerFont = $tempButton.get(0).currentStyle.fontFamily; - // It will therefore return "able", even if the user is overriding that with a custom style sheet - // To be safe, use images - this.iconType = 'image'; - } - if (typeof $tempButton !== 'undefined') { - $tempButton.remove(); - } - } + this.iconType = 'svg'; }; - // Perform one-time setup for this instance of player; called after player is first initialized. AblePlayer.prototype.setupInstance = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); if (this.$media.attr('id')) { this.mediaId = this.$media.attr('id'); - } - else { - // Ensure the base media element always has an ID. + } else { this.mediaId = "ableMediaId_" + this.ableIndex; this.$media.attr('id', this.mediaId); } @@ -2464,24 +1746,18 @@ var AblePlayerInstances = []; AblePlayer.prototype.setupInstancePlaylist = function() { - // find a matching playlist and set this.hasPlaylist - // if there is one, also set this.$playlist, this.playlistIndex, & this.playlistEmbed var thisObj = this; - this.hasPlaylist = false; // will change to true if a matching playlist is found + this.hasPlaylist = false; $('.able-playlist').each(function() { if ($(this).data('player') === thisObj.mediaId) { - // this is the playlist for the current player thisObj.hasPlaylist = true; - // If using an embedded player, we'll replace $playlist with the clone later. thisObj.$playlist = $(this).find('li'); - // check to see if list item has YouTube as its source - // if it does, inject a thumbnail from YouTube var $youTubeVideos = $(this).find('li[data-youtube-id]'); $youTubeVideos.each(function() { - var youTubeId = $(this).attr('data-youtube-id'); + var youTubeId = DOMPurify.sanitize( $(this).attr('data-youtube-id') ); var youTubePoster = thisObj.getYouTubePosterUrl(youTubeId,'120'); var $youTubeImg = $('<img>',{ 'src': youTubePoster, @@ -2490,11 +1766,9 @@ var AblePlayerInstances = []; $(this).find('button').prepend($youTubeImg); }); - // check to see if list item has Vimeo as its source - // if it does, inject a thumbnail from Vimeo var $vimeoVideos = $(this).find('li[data-vimeo-id]'); $vimeoVideos.each(function() { - var vimeoId = $(this).attr('data-youtube-id'); + var vimeoId = $(this).attr('data-vimeo-id'); var vimeoPoster = thisObj.getVimeoPosterUrl(vimeoId,'120'); var $vimeoImg = $('<img>',{ 'src': vimeoPoster, @@ -2503,51 +1777,30 @@ var AblePlayerInstances = []; $(this).find('button').prepend($vimeoImg); }); - // add accessibility to the list markup $(this).find('li span').attr('aria-hidden','true'); thisObj.playlistIndex = 0; var dataEmbedded = $(this).data('embedded'); - if (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) { - // embed playlist within player - thisObj.playlistEmbed = true; - } - else { - thisObj.playlistEmbed = false; - } + thisObj.playlistEmbed = (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) ? true : false; } }); if (this.hasPlaylist && this.loop) { - // browser will loop the current track in the playlist, rather than the playlist - // therefore, need to remove loop attribute from media element - // but keep this.loop as true and handle the playlist looping ourselves this.media.removeAttribute('loop'); } if (this.hasPlaylist && this.playlistEmbed) { - // Copy the playlist out of the dom, so we can reinject when we build the player. var parent = this.$playlist.parent(); this.$playlistDom = parent.clone(); parent.remove(); } if (this.hasPlaylist && this.$sources.length === 0) { - // no source elements were provided. Construct them from the first playlist item this.cuePlaylistItem(0); - // redefine this.$sources now that media contains one or more <source> elements this.$sources = this.$media.find('source'); } }; AblePlayer.prototype.recreatePlayer = function () { - // Creates the appropriate player for the current source. - // This function is called each time a new media instance is loaded - // e.g., - // User clicks on an item in a playlist - // User swaps to/from described version of video - // Blocks of code that only need to be executed once are controlled - // by this.playerCreated - // TODO: Ensure when recreating player that we carry over the mediaId if (!this.player) { console.log("Can't create player; no appropriate player type detected."); return; @@ -2555,38 +1808,33 @@ var AblePlayerInstances = []; var deferred, promise, thisObj, prefsGroups, i; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - this.playerDeleted = false; // reset after deletePlayer() + this.playerDeleted = false; - // set temp stopgap to prevent this function from executing again before finished - this.recreatingPlayer = true; + this.recreatingPlayer = true; if (!this.playerCreated) { - // only call these functions once this.loadCurrentPreferences(); this.injectPlayerCode(); - this.resizePlayer(this.media.videoWidth,this.media.videoHeight); + this.resizePlayer(this.media.videoWidth,this.media.videoHeight); } - this.getSampleDescriptionText(); + this.getSampleDescriptionText(); this.initSignLanguage(); this.initPlayer().then(function() { - thisObj.getTracks().then(function() { + thisObj.getTracks().then(function() { thisObj.initDescription().then(function() { thisObj.setupTracks().then(function() { - if (thisObj.hasClosedDesc) { - if (!thisObj.$descDiv \|\| - (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { - // descDiv either doesn't exist, or exists in an orphaned state - // Either way, it needs to be rebuilt... + if (thisObj.hasClosedDesc) { + if (!thisObj.$descDiv \|\| (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { thisObj.injectTextDescriptionArea(); } } @@ -2603,7 +1851,6 @@ var AblePlayerInstances = []; thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - thisObj.setFullscreen(false); if (typeof thisObj.volume === 'undefined') { thisObj.volume = thisObj.defaultVolume; @@ -2619,16 +1866,10 @@ var AblePlayerInstances = []; thisObj.initDefaultCaption(); } - // setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks - // This tells browsers to ignore the text tracks so Able Player can handle them - // However, timing is critical as browsers - especially Safari - tend to ignore this request - // unless it's sent late in the intialization process. - // If browsers ignore the request, the result is redundant captions thisObj.setMediaAttributes(); thisObj.addControls(); thisObj.addEventListeners(); - // inject each of the hidden forms that will be accessed from the Preferences popup menu prefsGroups = thisObj.getPreferencesGroups(); for (i = 0; i < prefsGroups.length; i++) { thisObj.injectPrefsForm(prefsGroups[i]); @@ -2636,73 +1877,58 @@ var AblePlayerInstances = []; thisObj.setupPopups(); thisObj.updateCaption(); thisObj.injectVTS(); - if (thisObj.chaptersDivLocation) { - thisObj.populateChaptersDiv(); - } + thisObj.populateChaptersDiv(); thisObj.showSearchResults(); - // Go ahead and load media, without user requesting it - // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth - // However, the media needs to load for us to get the media's duration if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.$media[0].load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } } - // refreshControls is called twice building/initializing the player - // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete setTimeout(function() { - thisObj.refreshControls('init'); - deferred.resolve(); - },100); - }); - }); + thisObj.refreshControls(); + deferred.resolve(); + },100); + }); + }); }); }); - }); + }); }); }, - function() { // initPlayer fail + function() { thisObj.provideFallback(); }); - return promise; + return promise; }; AblePlayer.prototype.initPlayer = function () { var thisObj = this; var playerPromise; - // First run player specific initialization. if (this.player === 'html5') { playerPromise = this.initHtml5Player(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { playerPromise = this.initYouTubePlayer(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { playerPromise = this.initVimeoPlayer(); } - // After player specific initialization is done, run remaining general initialization. - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - playerPromise.done( - function () { // done/resolved + playerPromise.then( + function () { if (thisObj.useFixedSeekInterval) { if (!thisObj.seekInterval) { thisObj.seekInterval = thisObj.defaultSeekInterval; } - else { - // fixed seekInterval was already assigned, using value of data-seek-interval attribute - } thisObj.seekIntervalCalculated = true; - } - else { + } else { thisObj.setSeekInterval(); } deferred.resolve(); } - ).fail(function () { // failed + ).finally(function () { deferred.reject(); } ); @@ -2712,27 +1938,20 @@ var AblePlayerInstances = []; AblePlayer.prototype.initStenoFrame = function() { - var thisObj, deferred, promise, $iframe; - thisObj = this; - - deferred = new $.Deferred(); + var deferred, promise; + deferred = new this.defer(); promise = deferred.promise(); if (this.stenoMode && this.$stenoFrame) { if (this.$stenoFrame[0].contentWindow,document.readyState == 'complete') { - // iframe has already loaded deferred.resolve(); - } - else { - // iframe has not loaded. Wait for it. + } else { this.$stenoFrame.on('load',function() { deferred.resolve(); }); } - } - else { - // there is no stenoFrame to initialize + } else { deferred.resolve(); } return promise; @@ -2740,39 +1959,25 @@ var AblePlayerInstances = []; AblePlayer.prototype.setSeekInterval = function () { - // this function is only called if this.useFixedSeekInterval is false - // if this.useChapterTimes, this is called as each new chapter is loaded - // otherwise, it's called once, as the player is initialized var thisObj, duration; thisObj = this; this.seekInterval = this.defaultSeekInterval; - if (this.useChapterTimes) { - duration = this.chapterDuration; - } - else { - duration = this.duration; - } + duration = (this.useChapterTimes) ? this.chapterDuration : this.duration; + if (typeof duration === 'undefined' \|\| duration < 1) { - // no duration; just use default for now but keep trying until duration is available this.seekIntervalCalculated = false; return; - } - else { + } else { if (duration <= 20) { - this.seekInterval = 5; // 4 steps max - } - else if (duration <= 30) { - this.seekInterval = 6; // 5 steps max - } - else if (duration <= 40) { - this.seekInterval = 8; // 5 steps max - } - else if (duration <= 100) { - this.seekInterval = 10; // 10 steps max - } - else { - // never more than 10 steps from start to end - this.seekInterval = (duration / 10); + this.seekInterval = 5; + } else if (duration <= 30) { + this.seekInterval = 6; + } else if (duration <= 40) { + this.seekInterval = 8; + } else if (duration <= 100) { + this.seekInterval = 10; + } else { + this.seekInterval = Math.round(duration / 10, 0); } this.seekIntervalCalculated = true; } @@ -2791,8 +1996,6 @@ var AblePlayerInstances = []; } } if (typeof this.captionLang === 'undefined') { - // No caption track was flagged as default - // find and use a caption language that matches the player language for (i=0; i<captions.length; i++) { if (captions[i].language === this.lang) { this.captionLang = captions[i].language; @@ -2801,73 +2004,52 @@ var AblePlayerInstances = []; } } if (typeof this.captionLang === 'undefined') { - // Still no matching caption track - // just use the first track this.captionLang = captions[0].language; this.selectedCaptions = captions[0]; } if (typeof this.captionLang !== 'undefined') { - // reset transcript selected <option> to this.captionLang if (this.$transcriptLanguageSelect) { this.$transcriptLanguageSelect.find('option[lang=' + this.captionLang + ']').prop('selected',true); } - // sync all other tracks to this same languge this.syncTrackLanguages('init',this.captionLang); } if (this.player === 'vimeo') { if (this.usingVimeoCaptions && this.prefCaptions == 1) { - // initialize Vimeo captions to the default language this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { - // track.language = the iso code for the language - // track.kind = 'captions' or 'subtitles' - // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - - break; - default: - // some other error occurred - - break; - } - }); - } - else { - // disable Vimeo captions. - this.vimeoPlayer.disableTextTrack().then(function() { - // Vimeo captions disabled - }).catch(function(error) { - - }); - } + } + ).catch(function(error) { + switch (error.name) { + case 'InvalidTrackLanguageError': + + break; + case 'InvalidTrackError': + + break; + default: + + break; + } + }); + } else { + this.vimeoPlayer.disableTextTrack().then(function() { + }).catch(function(error) { + + }); } + } } }; AblePlayer.prototype.initHtml5Player = function () { - // Nothing special to do! - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); deferred.resolve(); return promise; }; - // Sets media/track/source attributes; is called whenever player is recreated since $media may have changed. AblePlayer.prototype.setMediaAttributes = function () { - // Firefox puts videos in tab order; remove. this.$media.attr('tabindex', -1); - // Keep native player from displaying captions/subtitles by setting textTrack.mode='disabled' - // https://dev.w3.org/html5/spec-author-view/video.html#text-track-mode - // This should work but historically hasn't been supported in all browsers - // Workaround for non-supporting browsers is to remove default attribute - // We're doing that too in track.js > setupCaptions() var textTracks = this.$media.get(0).textTracks; if (textTracks) { var i = 0; @@ -2880,207 +2062,163 @@ var AblePlayerInstances = []; AblePlayer.prototype.getPlayer = function() { - // Determine which player to use, if any - // return 'html5', 'youtube', 'vimeo', or null - - var i, sourceType, $newItem; - if (this.testFallback) { - return null; - } - else if (this.youTubeId) { - if (this.mediaType !== 'video') { - // attempting to play a YouTube video using an element other than <video> - return null; - } - else { - return 'youtube'; - } - } - else if (this.vimeoId) { - if (this.mediaType !== 'video') { - // attempting to play a Vimeo video using an element other than <video> - return null; - } - else { - return 'vimeo'; - } - - } - else if (this.media.canPlayType) { + if (this.testFallback) { + return null; + } else if (this.youTubeId) { + return (this.mediaType !== 'video') ? null : 'youtube'; + } else if (this.vimeoId) { + return (this.mediaType !== 'video') ? null : 'vimeo'; + } else if (this.media.canPlayType) { return 'html5'; - } - else { - // Browser does not support the available media file + } else { return null; } }; - })(jQuery); (function ($) { - AblePlayer.prototype.setCookie = function(cookieValue) { - - Cookies.set('Able-Player', JSON.stringify(cookieValue), { - expires: 90, - sameSite: 'strict' - }); + AblePlayer.prototype.setPrefs = function(preferences) { + if ( typeof Cookies !== 'undefined' ) { + Cookies.set('Able-Player', JSON.stringify(preferences), { + expires: 90, + sameSite: 'strict' + }); + } else { + localStorage.setItem( 'Able-Player', JSON.stringify( preferences ) ); + } }; - AblePlayer.prototype.getCookie = function() { + AblePlayer.prototype.getPref = function() { - var defaultCookie = { + var defaultPrefs = { preferences: {}, sign: {}, transcript: {}, voices: [] }; - var cookie; + var preferences; try { - cookie = JSON.parse(Cookies.get('Able-Player')); + if ( typeof Cookies !== 'undefined' ) { + preferences = JSON.parse( Cookies.get('Able-Player') ); + } else { + preferences = JSON.parse( localStorage.getItem('Able-Player') ); + } } catch (err) { - // Original cookie can't be parsed; update to default - this.setCookie(defaultCookie); - cookie = defaultCookie; - } - if (cookie) { - return cookie; - } - else { - return defaultCookie; + this.setPrefs( defaultPrefs ); + preferences = defaultPrefs; } + return (preferences) ? preferences : defaultPrefs; }; - AblePlayer.prototype.updateCookie = function( setting ) { - - // called when a particular setting had been updated - // useful for settings updated indepedently of Preferences dialog - // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle() - // setting is any supported preference name (e.g., "prefCaptions") - // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows) - var cookie, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; - cookie = this.getCookie(); + AblePlayer.prototype.updatePreferences = function( setting ) { + var preferences, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; + preferences = this.getPref(); if (setting === 'transcript' \|\| setting === 'sign') { if (setting === 'transcript') { $window = this.$transcriptArea; windowPos = $window.position(); - if (typeof cookie.transcript === 'undefined') { - cookie.transcript = {}; - } - cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.transcript['zindex'] = $window.css('z-index'); - cookie.transcript['top'] = windowPos.top; - cookie.transcript['left'] = windowPos.left; - cookie.transcript['width'] = $window.width(); - cookie.transcript['height'] = $window.height(); - } - else if (setting === 'sign') { + if (typeof preferences.transcript === 'undefined') { + preferences.transcript = {}; + } + preferences.transcript['position'] = $window.css('position'); + preferences.transcript['zindex'] = $window.css('z-index'); + preferences.transcript['top'] = windowPos.top; + preferences.transcript['left'] = windowPos.left; + preferences.transcript['width'] = $window.width(); + preferences.transcript['height'] = $window.height(); + } else if (setting === 'sign') { $window = this.$signWindow; windowPos = $window.position(); - if (typeof cookie.sign === 'undefined') { - cookie.sign = {}; + if (typeof preferences.sign === 'undefined') { + preferences.sign = {}; } - cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.sign['zindex'] = $window.css('z-index'); - cookie.sign['top'] = windowPos.top; - cookie.sign['left'] = windowPos.left; - cookie.sign['width'] = $window.width(); - cookie.sign['height'] = $window.height(); - } - } - else if (setting === 'voice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; - } - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; + preferences.sign['position'] = $window.css('position'); + preferences.sign['zindex'] = $window.css('z-index'); + preferences.sign['top'] = windowPos.top; + preferences.sign['left'] = windowPos.left; + preferences.sign['width'] = $window.width(); + preferences.sign['height'] = $window.height(); + } + } else if (setting === 'voice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; + } + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; } } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (!voiceLangFound) { newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - } - else { + preferences.voices.push(newVoice); + } + } else { available = this.getAvailablePreferences(); - // Rebuild cookie with current cookie values, - // replacing the one value that's been changed for (i = 0; i < available.length; i++) { prefName = available[i]['name']; if (prefName == setting) { - // this is the one that requires an update - cookie.preferences[prefName] = this[prefName]; + preferences.preferences[prefName] = this[prefName]; } } } - // Save updated cookie - this.setCookie(cookie); + this.setPrefs(preferences); }; AblePlayer.prototype.getPreferencesGroups = function() { - // return array of groups in the order in which they will appear - // in the Preferences popup menu - // Human-readable label for each group is defined in translation table if (this.usingYouTubeCaptions) { - // no transcript is possible - return ['captions','descriptions','keyboard']; + return ['captions','descriptions','keyboard']; + } else if (this.usingVimeoCaptions) { + return ['descriptions','keyboard']; + } else { + return ['captions','descriptions','keyboard','transcript']; } - else if (this.usingVimeoCaptions) { - // users cannot control caption appearance - // and no transcript is possible - return ['descriptions','keyboard']; - } - else { - return ['captions','descriptions','keyboard','transcript']; - } } AblePlayer.prototype.getAvailablePreferences = function() { - // Return the list of currently available preferences. - // Preferences with no 'label' are set within player, not shown in Prefs dialog var prefs = []; - // Modifier keys preferences prefs.push({ - 'name': 'prefAltKey', // use alt key with shortcuts - 'label': this.tt.prefAltKey, + 'name': 'prefAltKey', + 'label': this.translate( 'prefAltKey', 'Alt' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ - 'name': 'prefCtrlKey', // use ctrl key with shortcuts - 'label': this.tt.prefCtrlKey, + 'name': 'prefCtrlKey', + 'label': this.translate( 'prefCtrlKey', 'Control' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefShiftKey', - 'label': this.tt.prefShiftKey, + 'label': this.translate( 'prefShiftKey', 'Shift' ), 'group': 'keyboard', 'default': 0 }); - - // Transcript preferences prefs.push({ - 'name': 'prefTranscript', // transcript default state + 'name': 'prefNoKeyShortcuts', + 'label': this.translate( 'prefNoKeyShortcuts', 'Disable Keyboard Shortcuts' ), + 'group': 'keyboard', + 'default': 0 + }); + + prefs.push({ + 'name': 'prefTranscript', 'label': null, 'group': 'transcript', - 'default': 0 // off because turning it on has a certain WOW factor + 'default': 0 }); prefs.push({ - 'name': 'prefHighlight', // highlight transcript as media plays - 'label': this.tt.prefHighlight, + 'name': 'prefHighlight', + 'label': this.translate( 'prefHighlight', 'Highlight transcript as media plays' ), 'group': 'transcript', - 'default': 1 // on because many users can benefit + 'default': 1 }); prefs.push({ 'name': 'prefAutoScrollTranscript', @@ -3089,16 +2227,14 @@ var AblePlayerInstances = []; 'default': 1 }); prefs.push({ - 'name': 'prefTabbable', // tab-enable transcript - 'label': this.tt.prefTabbable, + 'name': 'prefTabbable', + 'label': this.translate( 'prefTabbable', 'Keyboard-enable transcript' ), 'group': 'transcript', - 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page + 'default': 0 }); - // Caption preferences - prefs.push({ - 'name': 'prefCaptions', // closed captions default state + 'name': 'prefCaptions', 'label': null, 'group': 'captions', 'default': this.defaultStateCaptions @@ -3106,34 +2242,24 @@ var AblePlayerInstances = []; if (!this.usingYouTubeCaptions) { - /* // not supported yet - prefs.push({ - 'name': 'prefCaptionsStyle', - 'label': this.tt.prefCaptionsStyle, - 'group': 'captions', - 'default': this.tt.captionsStylePopOn - }); - / - // captions are always positioned above the player for audio if (this.mediaType === 'video') { prefs.push({ 'name': 'prefCaptionsPosition', - 'label': this.tt.prefCaptionsPosition, + 'label': this.translate( 'prefCaptionsPosition', 'Position' ), 'group': 'captions', 'default': this.defaultCaptionsPosition }); - } + } prefs.push({ 'name': 'prefCaptionsFont', - 'label': this.tt.prefCaptionsFont, + 'label': this.translate( 'prefCaptionsFont', 'Font' ), 'group': 'captions', 'default': 'sans-serif' }); } - // This is the one option that is supported by YouTube IFrame API prefs.push({ 'name': 'prefCaptionsSize', - 'label': this.tt.prefCaptionsSize, + 'label': this.translate( 'prefCaptionsSize', 'Font size' ), 'group': 'captions', 'default': '100%' }); @@ -3142,81 +2268,81 @@ var AblePlayerInstances = []; prefs.push({ 'name': 'prefCaptionsColor', - 'label': this.tt.prefCaptionsColor, + 'label': this.translate( 'prefCaptionsColor', 'Text Color' ), 'group': 'captions', 'default': 'white' }); prefs.push({ 'name': 'prefCaptionsBGColor', - 'label': this.tt.prefCaptionsBGColor, + 'label': this.translate( 'prefCaptionsBGColor', 'Background' ), 'group': 'captions', 'default': 'black' }); prefs.push({ 'name': 'prefCaptionsOpacity', - 'label': this.tt.prefCaptionsOpacity, + 'label': this.translate( 'prefCaptionsOpacity', 'Opacity' ), 'group': 'captions', 'default': '100%' }); } - if (this.mediaType === 'video') { - // Description preferences + if (this.mediaType === 'video') { prefs.push({ - 'name': 'prefDesc', // audio description default state + 'name': 'prefDesc', 'label': null, 'group': 'descriptions', 'default': this.defaultStateDescriptions }); prefs.push({ - 'name': 'prefDescMethod', // audio description default format (if both 'video' and 'text' are available) + 'name': 'prefDescMethod', 'label': null, 'group': 'descriptions', - 'default': 'video' // video (an alternative described version) always wins + 'default': 'video' }); prefs.push({ 'name': 'prefDescVoice', - 'label': this.tt.prefDescVoice, + 'label': this.translate( 'prefDescVoice', 'Voice' ), 'group': 'descriptions', - 'default': null // will be set later, in injectPrefsForm() + 'default': null }); prefs.push({ 'name': 'prefDescPitch', - 'label': this.tt.prefDescPitch, + 'label': this.translate( 'prefDescPitch', 'Pitch' ), 'group': 'descriptions', - 'default': 1 // 0 to 2 + 'default': 1 }); prefs.push({ 'name': 'prefDescRate', - 'label': this.tt.prefDescRate, + 'label': this.translate( 'prefDescRate', 'Rate' ), 'group': 'descriptions', - 'default': 1 // 0.1 to 10 (1 is normal speech; 2 is fast but decipherable; >2 is super fast) + 'default': 1 }); prefs.push({ 'name': 'prefDescVolume', - 'label': this.tt.volume, - 'group': 'descriptions', - 'default': 1 // 0 to 1 - }); - prefs.push({ - 'name': 'prefDescPause', // automatically pause when closed description starts - 'label': this.tt.prefDescPause, + 'label': this.translate( 'volume', 'Volume' ), 'group': 'descriptions', - 'default': this.defaultDescPause + 'default': 1 }); + if ( this.descMethod !== 'video' ) { + prefs.push({ + 'name': 'prefDescPause', + 'label': this.translate( 'prefDescPause', 'Automatically pause video when description starts' ), + 'group': 'descriptions', + 'default': this.defaultDescPause + }); + } prefs.push({ - 'name': 'prefDescVisible', // visibly show closed description (if avilable and used) - 'label': this.tt.prefDescVisible, + 'name': 'prefDescVisible', + 'label': this.translate( 'prefDescVisible', 'Make description visible' ), 'group': 'descriptions', - 'default': 0 // off as of 4.3.16, to avoid overloading the player with visible features + 'default': 0 }); } - // Preferences without a category (not shown in Preferences dialogs) prefs.push({ - 'name': 'prefSign', // open sign language window by default if avilable + 'name': 'prefSign', 'label': null, 'group': null, - 'default': 0 // off because clicking an icon to see the sign window has a powerful impact + 'default': 0 }); return prefs; @@ -3224,144 +2350,119 @@ var AblePlayerInstances = []; AblePlayer.prototype.loadCurrentPreferences = function () { - // Load current/default preferences from cookie into the AblePlayer object. var available = this.getAvailablePreferences(); - var cookie = this.getCookie(); - // Copy current cookie values into this object, and fill in any default values. + var preferences = this.getPref(); for (var ii = 0; ii < available.length; ii++) { var prefName = available[ii]['name']; var defaultValue = available[ii]['default']; - if (cookie.preferences[prefName] !== undefined) { - this[prefName] = cookie.preferences[prefName]; - } - else { - cookie.preferences[prefName] = defaultValue; + if (preferences.preferences[prefName] !== undefined) { + this[prefName] = preferences.preferences[prefName]; + } else { + preferences.preferences[prefName] = defaultValue; this[prefName] = defaultValue; } } - // Also load array of preferred voices from cookie - if (typeof cookie.voices !== 'undefined') { - this.prefVoices = cookie.voices; - } + if (typeof preferences.voices !== 'undefined') { + this.prefVoices = preferences.voices; + } - this.setCookie(cookie); + this.setPrefs(preferences); }; AblePlayer.prototype.injectPrefsForm = function (form) { - // Creates a preferences form and injects it. - // form is one of the supported forms (groups) defined in getPreferencesGroups() - - var thisObj, available, descLangs, - $prefsDiv, formTitle, introText, - $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, - $fieldset, fieldsetClass, fieldsetId, - $descFieldset, $descLegend, $legend, legendId, - thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField, - $div1,id1,$radio1,$label1, - $div2,id2,$radio2,$label2, - options,$thisOption,optionValue,optionLang,optionText,sampleCapsDiv, - changedPref,changedSpan,changedText, - currentDescState, prefDescVoice, - $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem, - dialog,saveButton,cancelButton; + + var thisObj, available, + $prefsDiv, formTitle, introText, $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, + $fieldset, fieldsetClass, fieldsetId, $legend, legendId, thisPref, $thisDiv, thisClass, + thisId, $thisLabel, $thisField, options,$thisOption,optionValue,optionLang,optionText, + changedPref,changedSpan,changedText, currentDescState, prefDescVoice, $kbHeading,$kbList, + kbLabels,keys,kbListText,$kbListItem, dialog,$saveButton,$cancelButton,$buttonContainer; thisObj = this; available = this.getAvailablePreferences(); - // outer container, will be assigned role="dialog" $prefsDiv = $('<div>',{ 'class': 'able-prefs-form ' }); var customClass = 'able-prefs-form-' + form; $prefsDiv.addClass(customClass); - // add titles and intros - if (form == 'captions') { - formTitle = this.tt.prefTitleCaptions; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage - } - else if (form == 'descriptions') { - formTitle = this.tt.prefTitleDescriptions; + if (form == 'captions') { + formTitle = this.translate( 'prefTitleCaptions', 'Captions Preferences' ); + } else if (form == 'descriptions') { + formTitle = this.translate( 'prefTitleDescriptions', 'Audio Description Preferences' ); var $prefsIntro = $('<p>',{ - text: this.tt.prefIntroDescription1 + text: this.translate( 'prefIntroDescription1', 'This media player supports audio description in two ways: ' ) }); var $prefsIntroUL = $('<ul>'); var $prefsIntroLI1 = $('<li>',{ - text: this.tt.prefDescFormatOption1 + text: this.translate( 'prefDescFormatOption1', 'alternative described version of video' ) }); var $prefsIntroLI2 = $('<li>',{ - text: this.tt.prefDescFormatOption2 + text: this.translate( 'prefDescFormatOption2', 'text-based description, announced by screen reader' ) }); $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2); if (this.hasOpenDesc && this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2 + ' '; - currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>'; - currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else if (this.hasOpenDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.'; - } - else if (this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else { - currentDescState = this.tt.prefIntroDescriptionNone; + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ) + ' '; + currentDescState += '<strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>'; + currentDescState += ' <em>' + this.translate( 'and', 'and' ) + '</em> <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else if (this.hasOpenDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>.'; + } else if (this.hasClosedDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else { + currentDescState = this.translate( 'prefIntroDescriptionNone', 'The current video has no audio description in either format.' ); } $prefsIntroP2 = $('<p>',{ html: currentDescState }); - p3Text = this.tt.prefIntroDescription3; + p3Text = this.translate( 'prefIntroDescription3', 'Use the following form to set your preferences related to text-based audio description.' ); if (this.hasOpenDesc \|\| this.hasClosedDesc) { - p3Text += ' ' + this.tt.prefIntroDescription4; + p3Text += ' ' + this.translate( 'prefIntroDescription4', 'After you save your settings, audio description can be toggled on/off using the Description button.' ); } $prefsIntroP3 = $('<p>',{ text: p3Text }); - $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3); - } - else if (form == 'keyboard') { - formTitle = this.tt.prefTitleKeyboard; - introText = this.tt.prefIntroKeyboard1; - introText += ' ' + this.tt.prefIntroKeyboard2; - introText += ' ' + this.tt.prefIntroKeyboard3; + $prefsDiv.append( $prefsIntro, $prefsIntroUL, $prefsIntroP2, $prefsIntroP3 ); + } else if (form == 'keyboard') { + formTitle = this.translate( 'prefTitleKeyboard', 'Keyboard Preferences' ); + introText = this.translate( 'prefIntroKeyboard1', 'The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list).' ); + introText += ' ' + this.translate( 'prefIntroKeyboard2', 'Modifier keys (Shift, Alt, and Control) can be assigned below.' ); + introText += ' ' + this.translate( 'prefIntroKeyboard3', 'NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you.' ); $prefsIntro = $('<p>',{ text: introText }); $prefsDiv.append($prefsIntro); - } - else if (form == 'transcript') { - formTitle = this.tt.prefTitleTranscript; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage + } else if (form == 'transcript') { + formTitle = this.translate( 'prefTitleTranscript', 'Transcript Preferences' ); } - $fieldset = $('<div>').attr('role','group'); + $fieldset = $('<div>').attr('role','group'); fieldsetClass = 'able-prefs-' + form; fieldsetId = this.mediaId + '-prefs-' + form; legendId = fieldsetId + '-legend'; $fieldset.addClass(fieldsetClass).attr('id',fieldsetId); if (form === 'keyboard') { - $legend = $('<h2>' + this.tt.prefHeadingKeyboard1 + '</h2>'); + $legend = $('<h2>' + this.translate( 'prefHeadingKeyboard1', 'Modifier keys used for shortcuts' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); - } - else if (form === 'descriptions') { - $legend = $('<h2>' + this.tt.prefHeadingTextDescription + '</h2>'); + } else if (form === 'descriptions') { + $legend = $('<h2>' + this.translate( 'prefHeadingTextDescription', 'Text-based audio description' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); } for (i=0; i<available.length; i++) { - // only include prefs on the current form if they have a label if ((available[i]['group'] == form) && available[i]['label']) { thisPref = available[i]['name']; @@ -3376,8 +2477,7 @@ var AblePlayerInstances = []; id: thisId, }); if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') { - // add a change handler that updates the style of the sample caption text - $thisField.change(function() { + $thisField.on( 'change', function() { changedPref = $(this).attr('name'); thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref); }); @@ -3387,28 +2487,19 @@ var AblePlayerInstances = []; if (thisPref === 'prefCaptionsPosition') { optionValue = options[j]; if (optionValue === 'overlay') { - optionText = this.tt.captionsPositionOverlay; - } - else if (optionValue === 'below') { + optionText = this.translate( 'captionsPositionOverlay', 'Overlay' ); + } else if (optionValue === 'below') { optionValue = options[j]; - optionText = this.tt.captionsPositionBelow; + optionText = this.translate( 'captionsPositionBelow', 'Below video' ); } - } - else if (thisPref === 'prefCaptionsFont' \|\| thisPref === 'prefCaptionsColor' \|\| thisPref === 'prefCaptionsBGColor') { + } else if (thisPref === 'prefCaptionsFont' \|\| thisPref === 'prefCaptionsColor' \|\| thisPref === 'prefCaptionsBGColor') { optionValue = options[j][0]; optionText = options[j][1]; - } - else if (thisPref === 'prefCaptionsOpacity') { + } else if (thisPref === 'prefCaptionsOpacity') { optionValue = options[j]; optionText = options[j]; - if (optionValue === '0%') { - optionText += ' (' + this.tt.transparent + ')'; - } - else if (optionValue === '100%') { - optionText += ' (' + this.tt.solid + ')'; - } - } - else { + optionText += (optionValue === '0%') ? ' (' + this.translate( 'transparent', 'transparent' ) + ')' : ' (' + this.translate( 'solid', 'solid' ) + ')'; + } else { optionValue = options[j]; optionText = options[j]; } @@ -3422,11 +2513,9 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } $thisDiv.append($thisLabel,$thisField); - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); if (thisPref === 'prefDescPause' \|\| thisPref === 'prefDescVisible') { - // these preferences are checkboxes $thisDiv.addClass('able-prefs-checkbox'); $thisField = $('<input>',{ type: 'checkbox', @@ -3434,24 +2523,21 @@ var AblePlayerInstances = []; id: thisId, value: 'true' }); - // check current active value for this preference if (this[thisPref] === 1) { $thisField.prop('checked',true); } $thisDiv.append($thisField,$thisLabel); - } - else if (this.synth) { - // Only show these options if browser supports speech synthesis + } else if (this.synth) { $thisDiv.addClass('able-prefs-select'); $thisField = $('<select>',{ name: thisPref, id: thisId, }); - if (thisPref === 'prefDescVoice' && this.descVoices) { - prefDescVoice = this.getPrefDescVoice(); + if (thisPref === 'prefDescVoice' && this.descVoices.length) { + prefDescVoice = this.getPrefDescVoice(); for (j=0; j < this.descVoices.length; j++) { optionValue = this.descVoices[j].name; - optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); + optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); optionText = optionValue + ' (' + this.descVoices[j].lang + ')'; $thisOption = $('<option>',{ 'value': optionValue, @@ -3464,31 +2550,13 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } this.$voiceSelectField = $thisField; - } - else { - if (thisPref == 'prefDescPitch') { // 0 to 2 + } else { + if (thisPref == 'prefDescPitch') { options = [0,0.5,1,1.5,2]; - } - else if (thisPref == 'prefDescRate') { // 0.1 to 10 - // Tests with a variety of voices on MacOS and Windows - // yielded the following choices that seem reasonable for audio description: - // 0.5 - too slow (exclude this) - // 0.7 - casual - // 0.8 - add this - // 0.9 - add this - // 1 - normal - // 1.1 - add this - // 1.2 - add this - // 1.5 - quick - // 2 - speedy - // 2.5 - fleet - // 3 - fast! (some voices don't get any faster than this - - // Note: if these values are modified, must also modfiy them - // in makePrefsValueReadable() + } else if (thisPref == 'prefDescRate') { + options = [0.7,0.8,0.9,1,1.1,1.2,1.5,2,2.5,3]; - } - else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 + } else if (thisPref == 'prefDescVolume') { options = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]; } if (typeof options !== 'undefined') { @@ -3507,14 +2575,12 @@ var AblePlayerInstances = []; } } } - // add a change handler that announces the sample description text $thisField.on('change',function() { thisObj.announceDescriptionText('sample',thisObj.currentSampleText); }); $thisDiv.append($thisLabel,$thisField); } - } - else { // all other fields are checkboxes + } else { $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); $thisField = $('<input>',{ type: 'checkbox', @@ -3522,226 +2588,192 @@ var AblePlayerInstances = []; id: thisId, value: 'true' }); - // check current active value for this preference if (this[thisPref] === 1) { $thisField.prop('checked',true); } if (form === 'keyboard') { - // add a change handler that updates the list of current keyboard shortcuts $thisField.on('change',function() { changedPref = $(this).attr('name'); if (changedPref === 'prefAltKey') { changedSpan = '.able-modkey-alt'; changedText = thisObj.tt.prefAltKey + ' + '; - } - else if (changedPref === 'prefCtrlKey') { + } else if (changedPref === 'prefCtrlKey') { changedSpan = '.able-modkey-ctrl'; changedText = thisObj.tt.prefCtrlKey + ' + '; - } - else if (changedPref === 'prefShiftKey') { + } else if (changedPref === 'prefShiftKey') { changedSpan = '.able-modkey-shift'; changedText = thisObj.tt.prefShiftKey + ' + '; } - if ($(this).is(':checked')) { - $(changedSpan).text(changedText); - } - else { - $(changedSpan).text(''); + if ( changedPref !== 'prefNoKeyShortcuts' ) { + if ($(this).is(':checked')) { + $(changedSpan).text(changedText); + } else { + $(changedSpan).text(''); + } + } else { + if ($(this).is(':checked')) { + $('.able-modkey-item').addClass('hidden'); + } else { + $('.able-modkey-item').removeClass('hidden'); + } } }); } $thisDiv.append($thisField,$thisLabel); } - $fieldset.append($thisDiv); + if (thisPref === 'prefDescVoice' && !this.descVoices.length) { + } else { + $fieldset.append($thisDiv); + } } } $prefsDiv.append($fieldset); if (form === 'captions') { - // add a sample closed caption div to prefs dialog - // do not show this for YouTube captions, since it's not an accurate reflection if (!this.usingYouTubeCaptions) { this.$sampleCapsDiv = $('<div>',{ 'class': 'able-captions-sample' - }).text(this.tt.sampleCaptionText); + }).text( this.translate( 'sampleCaptionText', 'Sample caption text' ) ); $prefsDiv.append(this.$sampleCapsDiv); this.stylizeCaptions(this.$sampleCapsDiv); } - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { if (this.synth) { - // add a div with sample audio description text this.$sampleDescDiv = $('<div>',{ 'class': 'able-desc-sample' - }).text(this.tt.sampleDescriptionText); + }).text( this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) ); $prefsDiv.append(this.$sampleDescDiv); - this.currentSampleText = this.tt.sampleDescriptionText; + this.currentSampleText = this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ); } - } - else if (form === 'keyboard') { - // add a current list of keyboard shortcuts + } else if (form === 'keyboard') { + let shortcutClass = (this.prefNoKeyShortcuts === 1 ) ? 'able-modkey-item hidden' : 'able-modkey-item'; + $kbHeading = $('<h2>',{ - text: this.tt.prefHeadingKeyboard2 + text: this.translate( 'prefHeadingKeyboard2', 'Current keyboard shortcuts' ) }); $kbList = $('<ul>'); - // create arrays of kbLabels and keys kbLabels = []; keys = []; for (i=0; i<this.controls.length; i++) { if (this.controls[i] === 'play') { - kbLabels.push(this.tt.play + '/' + this.tt.pause); - keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar); - } - else if (this.controls[i] === 'restart') { - kbLabels.push(this.tt.restart); + kbLabels.push( this.translate( 'play', 'Play' ) + '/' + this.translate( 'pause', 'Pause' ) ); + keys.push('p</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-help-modifiers"> ' + this.translate( 'spacebar', 'spacebar' )); + } else if (this.controls[i] === 'restart') { + kbLabels.push(this.translate( 'restart', 'Restart' )); keys.push('s'); - } - else if (this.controls[i] === 'previous') { - kbLabels.push(this.tt.prevTrack); - keys.push('b'); // b = back - } - else if (this.controls[i] === 'next') { - kbLabels.push(this.tt.nextTrack); + } else if (this.controls[i] === 'previous') { + kbLabels.push( this.translate( 'prevTrack', 'Previous track' ) ); + keys.push('b'); + } else if (this.controls[i] === 'next') { + kbLabels.push( this.translate( 'nextTrack', 'Next track' ) ); keys.push('n'); - } - else if (this.controls[i] === 'rewind') { - kbLabels.push(this.tt.rewind); + } else if (this.controls[i] === 'rewind') { + kbLabels.push(this.translate( 'rewind', 'Rewind' )); keys.push('r'); - } - else if (this.controls[i] === 'forward') { - kbLabels.push(this.tt.forward); + } else if (this.controls[i] === 'forward') { + kbLabels.push(this.translate( 'forward', 'Forward' )); keys.push('f'); - } - else if (this.controls[i] === 'volume') { - kbLabels.push(this.tt.volume); - keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9'); - // mute toggle - kbLabels.push(this.tt.mute + '/' + this.tt.unmute); + } else if (this.controls[i] === 'volume') { + kbLabels.push(this.translate( 'volume', 'Volume' )); + keys.push('v</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-modkey">1-9'); + kbLabels.push(this.translate( 'mute', 'Mute' ) + '/' + this.translate( 'unmute', 'Unmute' )); keys.push('m'); - } - else if (this.controls[i] === 'captions') { + } else if (this.controls[i] === 'captions') { if (this.captions.length > 1) { - // caption button launches a Captions popup menu - kbLabels.push(this.tt.captions); - } - else { - // there is only one caption track - // therefore caption button is a toggle + kbLabels.push(this.translate( 'captions', 'Captions' )); + } else { if (this.captionsOn) { - kbLabels.push(this.tt.hideCaptions); - } - else { - kbLabels.push(this.tt.showCaptions); + kbLabels.push(this.translate( 'hideCaptions', 'Hide captions' )); + } else { + kbLabels.push(this.translate( 'showCaptions', 'Show captions' )); } } keys.push('c'); - } - else if (this.controls[i] === 'descriptions') { + } else if (this.controls[i] === 'descriptions') { if (this.descOn) { - kbLabels.push(this.tt.turnOffDescriptions); - } - else { - kbLabels.push(this.tt.turnOnDescriptions); + kbLabels.push(this.translate( 'turnOffDescriptions', 'Turn off descriptions' )); + } else { + kbLabels.push(this.translate( 'turnOnDescriptions', 'Turn on descriptions' )); } keys.push('d'); - } - else if (this.controls[i] === 'prefs') { - kbLabels.push(this.tt.preferences); + } else if (this.controls[i] === 'prefs') { + kbLabels.push(this.translate( 'preferences', 'Preferences' )); keys.push('e'); } - else if (this.controls[i] === 'help') { - kbLabels.push(this.tt.help); - keys.push('h'); - } } for (i=0; i<keys.length; i++) { - // alt kbListText = '<span class="able-modkey-alt">'; if (this.prefAltKey === 1) { - kbListText += this.tt.prefAltKey + ' + '; + kbListText += this.translate( 'prefAltKey', 'Alt' ) + ' + '; } kbListText += '</span>'; - // ctrl kbListText += '<span class="able-modkey-ctrl">'; if (this.prefCtrlKey === 1) { - kbListText += this.tt.prefCtrlKey + ' + '; + kbListText += this.translate( 'prefCtrlKey', 'Control' ) + ' + '; } kbListText += '</span>'; - // shift kbListText += '<span class="able-modkey-shift">'; if (this.prefShiftKey === 1) { - kbListText += this.tt.prefShiftKey + ' + '; + kbListText += this.translate( 'prefShiftKey', 'Shift' ) + ' + '; } kbListText += '</span>'; kbListText += '<span class="able-modkey">' + keys[i] + '</span>'; kbListText += ' = ' + kbLabels[i]; $kbListItem = $('<li>',{ - html: kbListText + 'class': shortcutClass, + html: kbListText, }); $kbList.append($kbListItem); } - // add Escape key - kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>'; - kbListText += ' = ' + this.tt.escapeKeyFunction; + kbListText = '<span class="able-modkey">' + this.translate( 'escapeKey', 'Escape' ) + '</span>'; + kbListText += ' = ' + this.translate( 'escapeKeyFunction', 'Close current dialog or popup menu' ); $kbListItem = $('<li>',{ html: kbListText }); $kbList.append($kbListItem); - // put it all together $prefsDiv.append($kbHeading,$kbList); } - // $prefsDiv (dialog) must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers $('body').append($prefsDiv); - dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', true, formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em'); + dialog = new AccessibleDialog( + $prefsDiv, + this.$prefsButton, + formTitle, + thisObj.tt.closeButtonLabel + ); - // Add save and cancel buttons. - $prefsDiv.append('<hr>'); - saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - saveButton.click(function () { + $buttonContainer = $( '<div class="able-prefs-buttons"></div>' ); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); + $saveButton.on( 'click', function () { dialog.hide(); thisObj.savePrefsFromForm(); }); - cancelButton.click(function () { + $cancelButton.on( 'click', function () { dialog.hide(); thisObj.resetPrefsForm(); }); - - $prefsDiv.append(saveButton); - $prefsDiv.append(cancelButton); - - // Associate the dialog's H1 as aria-labelledby for groups of fields - // (alternative to fieldset and legend) - if (form === 'captions' \|\| form === 'transcript') { - $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); + $buttonContainer.append( $saveButton,$cancelButton ); + $prefsDiv.append($buttonContainer); + if (form === 'captions' \|\| form === 'transcript') { + $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); } - // add global reference for future control if (form === 'captions') { this.captionPrefsDialog = dialog; - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { this.descPrefsDialog = dialog; - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { this.keyboardPrefsDialog = dialog; - } - else if (form === 'transcript') { + } else if (form === 'transcript') { this.transcriptPrefsDialog = dialog; } - // Add click handler for dialog close button - // (button is added in dialog.js) - $('div.able-prefs-form button.modalCloseButton').click(function() { + $('div.able-prefs-form button.modalCloseButton').on( 'click', function() { thisObj.resetPrefsForm(); }) - // Add handler for escape key - $('div.able-prefs-form').keydown(function(e) { - if (e.which === 27) { // escape + $('div.able-prefs-form').on( 'keydown', function(e) { + if (e.key === 'Escape') { thisObj.resetPrefsForm(); } }); @@ -3749,34 +2781,28 @@ var AblePlayerInstances = []; AblePlayer.prototype.getPrefDescVoice = function () { - // return user's preferred voice for the current language from cookie.voices - var lang, cookie, i; + var lang, preferences, i; - if (this.selectedDescriptions) { - lang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - lang = this.captionLang; - } - else { - lang = this.lang; + if (this.selectedDescriptions) { + lang = this.selectedDescriptions.language; + } else if (this.captionLang) { + lang = this.captionLang; + } else { + lang = this.lang; } - cookie = this.getCookie(); - if (cookie.voices) { - for (i=0; i < cookie.voices.length; i++) { - if (cookie.voices[i].lang === lang) { - return cookie.voices[i].name; + preferences = this.getPref(); + if (preferences.voices) { + for (i=0; i < preferences.voices.length; i++) { + if (preferences.voices[i].lang === lang) { + return preferences.voices[i].name; } } } - return null; // user has no saved preference + return null; } AblePlayer.prototype.rebuildDescPrefsForm = function () { - // Called if this.descVoices changes, which may happen if: - // getBrowserVoices() succeeds after an earlier failure - // user changes language of captions/subtitles and descVoices changes to match the new language var i, optionValue, optionText, $thisOption; @@ -3797,162 +2823,116 @@ var AblePlayerInstances = []; } }; - AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { + AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { - // The values for pitch, rate, and volume (web speech API) - // are strange and inconsistent between variables - // this function returns text that is more readable than the values themselves - if (pref === 'prefDescPitch') { - if (value === 0) { - return this.tt.prefDescPitch1; - } - else if (value === 0.5) { - return this.tt.prefDescPitch2; - } - else if (value === 1) { - return this.tt.prefDescPitch3; - } - else if (value === 1.5) { - return this.tt.prefDescPitch4; - } - else if (value === 2) { - return this.tt.prefDescPitch5; - } - } - else if (pref === 'prefDescRate') { - // default in the API is 0.1 to 10, where 1 is normal speaking voice - // our custom range offers several rates close to 1 - // plus a couple of crazy fast ones for sport - // Our more readable options (1-10) or mapped here to API values - if (value === 0.7) { - return 1; - } - else if (value === 0.8) { - return 2; - } - else if (value === 0.9) { - return 3; - } - else if (value === 1) { - return 4; - } - else if (value === 1.1) { - return 5; - } - else if (value === 1.2) { - return 6; - } - else if (value === 1.5) { - return 7; - } - else if (value === 2) { - return 8; - } - else if (value === 2.5) { - return 9; - } - else if (value === 3) { - return 10; - } - } - else if (pref === 'prefDescVolume') { - // values range from 0.1 to 1.0 - return value 10; - } - return value; - }; - - AblePlayer.prototype.resetPrefsForm = function () { - - // Reset preferences form with default values from cookie - // Called when: - // User clicks cancel or close button in Prefs Dialog - // User presses Escape to close Prefs dialog - // User clicks Save in Prefs dialog, & there's more than one player on page - - var thisObj, cookie, available, i, prefName, prefId, thisDiv, thisId; - - thisObj = this; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (i=0; i<available.length; i++) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is a caption-related select box - $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]); - } - else { // all others are checkboxes - if (this[prefName] === 1) { - $('input[name="' + prefName + '"]').prop('checked',true); - } - else { - $('input[name="' + prefName + '"]').prop('checked',false); - } + if (pref === 'prefDescPitch') { + if (value === 0) { + return this.translate( 'prefDescPitch1', 'Very low' ); + } else if (value === 0.5) { + return this.translate( 'prefDescPitch2', 'Low' ); + } else if (value === 1) { + return this.translate( 'prefDescPitch3', 'Default' ); + } else if (value === 1.5) { + return this.translate( 'prefDescPitch4', 'High' ); + } else if (value === 2) { + return this.translate( 'prefDescPitch5', 'Very high' ); + } + } else if (pref === 'prefDescRate') { + if (value === 0.7) { + return 1; + } else if (value === 0.8) { + return 2; + } else if (value === 0.9) { + return 3; + } else if (value === 1) { + return 4; + } else if (value === 1.1) { + return 5; + } else if (value === 1.2) { + return 6; + } else if (value === 1.5) { + return 7; + } else if (value === 2) { + return 8; + } else if (value === 2.5) { + return 9; + } else if (value === 3) { + return 10; + } + } else if (pref === 'prefDescVolume') { + return value * 10; + } + return value; + }; + + AblePlayer.prototype.resetPrefsForm = function () { + + + var thisObj, preferences, available, i, prefName; + + thisObj = this; + preferences = this.getPref(); + available = this.getAvailablePreferences(); + for (i=0; i<available.length; i++) { + prefName = available[i]['name']; + if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + $('select[name="' + prefName + '"]').val(preferences.preferences[prefName]); + } else { + if (this[prefName] === 1) { + $('input[name="' + prefName + '"]').prop('checked',true); + } else { + $('input[name="' + prefName + '"]').prop('checked',false); } } - // also restore style of sample caption div - this.stylizeCaptions(this.$sampleCapsDiv); - }; + } + this.stylizeCaptions(this.$sampleCapsDiv); + }; AblePlayer.prototype.savePrefsFromForm = function () { - // Return a prefs object constructed from the form. - // called when user saves the Preferences form - // update cookie with new value - var cookie, available, prefName, prefId, - voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, + var preferences, available, prefName, prefId, + voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, numCapChanges, capSizeChanged, capSizeValue, newValue; numChanges = 0; - numCapChanges = 0; // changes to caption-style-related preferences + numCapChanges = 0; capSizeChanged = false; - cookie = this.getCookie(); + preferences = this.getPref(); available = this.getAvailablePreferences(); for (var i=0; i < available.length; i++) { - // only prefs with labels are used in the Prefs form if (available[i]['label']) { prefName = available[i]['name']; prefId = this.mediaId + '_' + prefName; - if (prefName === 'prefDescVoice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; + if (prefName === 'prefDescVoice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; } voiceSelectId = this.mediaId + '_prefDescVoice'; this.prefDescVoice = $('select#' + voiceSelectId).find(':selected').val(); this.prefDescVoiceLang = $('select#' + voiceSelectId).find(':selected').attr('data-lang'); - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; } } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (!voiceLangFound) { newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - numChanges++; - } - else if (prefName == 'prefDescMethod') { - // As of v4.0.10, prefDescMethod is no longer a choice - // this.prefDescMethod = $('input[name="' + prefName + '"]:checked').val(); + preferences.voices.push(newVoice); + } + numChanges++; + } else if (prefName == 'prefDescMethod') { this.prefDescMethod = 'video'; - if (this.prefDescMethod !== cookie.preferences['prefDescMethod']) { // user's preference has changed - cookie.preferences['prefDescMethod'] = this.prefDescMethod; + if (this.prefDescMethod !== preferences.preferences['prefDescMethod']) { + preferences.preferences['prefDescMethod'] = this.prefDescMethod; numChanges++; } - } - else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is one of the caption-related select fields + } else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; - // also update global var for this pref (for caption fields, not done elsewhere) + if (preferences.preferences[prefName] !== newValue) { + preferences.preferences[prefName] = newValue; this[prefName] = newValue; numChanges++; numCapChanges++; @@ -3961,78 +2941,59 @@ var AblePlayerInstances = []; capSizeChanged = true; capSizeValue = newValue; } - } - else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { - // this is one of the description-related select fields + } else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; - // also update global var for this pref + if (preferences.preferences[prefName] !== newValue) { + preferences.preferences[prefName] = newValue; this[prefName] = newValue; numChanges++; } - } - else { // all other fields are checkboxes + } else { if ($('input[id="' + prefId + '"]').is(':checked')) { - cookie.preferences[prefName] = 1; + preferences.preferences[prefName] = 1; if (this[prefName] === 1) { - // nothing has changed - } - else { - // user has just turned this pref on + } else { this[prefName] = 1; numChanges++; } - } - else { // thisPref is not checked - cookie.preferences[prefName] = 0; + } else { + preferences.preferences[prefName] = 0; if (this[prefName] === 1) { - // user has just turned this pref off this[prefName] = 0; numChanges++; - } - else { - // nothing has chaged + } else { } } } } } if (numChanges > 0) { - this.setCookie(cookie); - this.showAlert(this.tt.prefSuccess); - } - else { - this.showAlert(this.tt.prefNoChange); + this.setPrefs(preferences); + this.showAlert( this.translate( 'prefSuccess', 'Your changes have been saved.' ) ); + } else { + this.showAlert( this.translate( 'prefNoChange', "You didn't make any changes" ) ); } if (this.player === 'youtube' && (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) && capSizeChanged) { - // update font size of YouTube captions this.youTubePlayer.setOption('captions','fontSize',this.translatePrefs('size',capSizeValue,'youtube')); } if (AblePlayerInstances.length > 1) { - // there are multiple players on this page. - // update prefs for ALL of them for (var i=0; i<AblePlayerInstances.length; i++) { - AblePlayerInstances[i].updatePrefs(); - AblePlayerInstances[i].geteferences(); + AblePlayerInstances[i].updatePlayerPrefs(); + AblePlayerInstances[i].loadCurrentPreferences(); AblePlayerInstances[i].resetPrefsForm(); if (numCapChanges > 0) { AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$captionsDiv); - // also apply same changes to descriptions, if present if (typeof AblePlayerInstances[i].$descDiv !== 'undefined') { AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$descDiv); } } } - } - else { - // there is only one player - this.updatePrefs(); + } else { + this.updatePlayerPrefs(); if (numCapChanges > 0) { this.stylizeCaptions(this.$captionsDiv); - // also apply same changes to descriptions, if present if (typeof this.$descDiv !== 'undefined') { this.stylizeCaptions(this.$descDiv); } @@ -4040,34 +3001,26 @@ var AblePlayerInstances = []; } } - AblePlayer.prototype.updatePrefs = function () { + AblePlayer.prototype.updatePlayerPrefs = function () { - // Update player based on current prefs. Safe to call multiple times. - - if (this.$transcriptDiv) { - // tabbable transcript + if (this.$transcriptDiv) { if (this.prefTabbable === 1) { this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - else { + } else { this.$transcriptDiv.find('span.able-transcript-seekpoint').removeAttr('tabindex'); } - // transcript highlights if (this.prefHighlight === 0) { - // user doesn't want highlights; remove any existing highlights this.$transcriptDiv.find('span').removeClass('able-highlight'); } } - // Re-initialize caption and description in case relevant settings have changed this.updateCaption(); this.initDescription(); }; AblePlayer.prototype.usingModifierKeys = function(e) { - // return true if user is holding down required modifier keys if ((this.prefAltKey === 1) && !e.altKey) { return false; } @@ -4083,13 +3036,10 @@ var AblePlayerInstances = []; })(jQuery); (function ($) { - // See section 4.1 of dev.w3.org/html5/webvtt for format details. - AblePlayer.prototype.parseWebVTT = function(srcFile,text) { + AblePlayer.prototype.parseWebVTT = function(data) { -// var deferred = new $.Deferred(); -// var promise = deferred.promise(); - - // Normalize line ends to \n. + let srcFile = data.src; + let text = data.text; text = text.replace(/(\r\n\|\n\|\r)/g,'\n'); var parserState = { @@ -4111,11 +3061,10 @@ var AblePlayerInstances = []; errString += 'Column: ' + parserState.column + '\n'; errString += err; if (console.warn) { - - } - else if (console.log) { - - } + + } else if (console.log) { + + } } return parserState; } @@ -4128,7 +3077,6 @@ var AblePlayerInstances = []; return results; } - // Applies the action and checks for errors. function act(state, action) { var val = action(state); if (state.error !== null) { @@ -4142,8 +3090,7 @@ var AblePlayerInstances = []; if (cutText[ii] === '\n') { state.column = 1; state.line += 1; - } - else { + } else { state.column += 1; } } @@ -4163,8 +3110,7 @@ var AblePlayerInstances = []; returnText = state.text; updatePosition(state, returnText); state.text = ''; - } - else { + } else { returnText = state.text.substring(0, nextEOL); updatePosition(state, returnText + '\n'); state.text = state.text.substring(nextEOL + 1); @@ -4174,12 +3120,7 @@ var AblePlayerInstances = []; function peekLine(state) { var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - return state.text; - } - else { - return state.text.substring(0, nextEOL); - } + return (nextEOL === -1) ? state.text : state.text.substring(0, nextEOL); } function parseFileBody(state) { @@ -4193,23 +3134,19 @@ var AblePlayerInstances = []; parseMetadataHeaders, eatAtLeast1EmptyLines, parseCuesAndComments]); - } - else { + } else { state.error = "WEBVTT signature not followed by whitespace."; } } - // Parses all metadata headers until a cue is discovered. function parseMetadataHeaders(state) { while (true) { var nextLine = peekLine(state); if (nextLine.indexOf('-->') !== -1) { return; - } - else if (nextLine.length === 0) { + } else if (nextLine.length === 0) { return; - } - else { + } else { var keyValue = act(state, getMetadataKeyValue); state.metadata[keyValue[0]] = keyValue[1]; act(state, eatUntilEOLInclusive); @@ -4242,8 +3179,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -4257,8 +3193,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -4268,18 +3203,13 @@ var AblePlayerInstances = []; function parseCuesAndComments(state) { while (true) { var nextLine = peekLine(state); - // If NOTE is not on a line all its own, it must be followed by a space or tab. if (nextLine.indexOf('NOTE') === 0 && ((nextLine.length === 4) \|\| (nextLine[4] === ' ') \|\| (nextLine[4] === '\t'))) { actList(state, [eatComment, eatEmptyLines]); - } - else if ($.trim(nextLine).length === 0 && state.text.length > 0) { + } else if (nextLine.trim().length === 0 && state.text.length > 0) { act(state, eatEmptyLines); - } - else if ($.trim(nextLine).length > 0) { + } else if (nextLine.trim().length > 0) { act(state, parseCue); - } - else { - // Everythings parsed! + } else { return; } } @@ -4300,12 +3230,11 @@ var AblePlayerInstances = []; errString += 'Column: ' + state.column + '\n'; errString += 'Expected cue timing for cueId \''+cueId+'\' but found: ' + nextLine + '\n'; if (console.warn) { - - } - else if (console.log) { - - } - return; // Return leaving line for parseCuesAndComments to handle + + } else if (console.log) { + + } + return; } } @@ -4324,7 +3253,6 @@ var AblePlayerInstances = []; act(state, eatSpacesOrTabs); var cueSettings = act(state, getCueSettings); - // Cut the newline. cut(state, 1); var components = act(state, getCuePayload); @@ -4351,30 +3279,24 @@ var AblePlayerInstances = []; } function getCuePayload(state) { - // Parser based on instructions in draft. var result = {type: 'internal', tagName: '', value: '', classes: [], annotation: '', parent: null, children: [], language: ''}; var current = result; var languageStack = []; while (state.text.length > 0) { var nextLine = peekLine(state); if (nextLine.indexOf('-->') !== -1 \|\| /^\s+$/.test(nextLine)) { - break; // Handle empty cues + break; } - // Have to separately detect double-lines ending cue due to our non-standard parsing. - // TODO: Redo outer algorithm to conform to W3 spec? if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { cut(state, 2); break; } var token = getCueToken(state); - // We'll use the tokens themselves as objects where possible. if (token.type === 'string') { current.children.push(token); - } - else if (token.type === 'startTag') { + } else if (token.type === 'startTag') { token.type = token.tagName; - // Define token.parent; added by Terrill to fix bug end 'endTag' loop token.parent = current; if ($.inArray(token.tagName, ['i', 'b', 'u', 'ruby']) !== -1) { if (languageStack.length > 0) { @@ -4382,31 +3304,27 @@ var AblePlayerInstances = []; } current.children.push(token); current = token; - } - else if (token.tagName === 'rt' && current.tagName === 'ruby') { + } else if (token.tagName === 'rt' && current.tagName === 'ruby') { if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'c') { + } else if (token.tagName === 'c') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'v') { + } else if (token.tagName === 'v') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'lang') { + } else if (token.tagName === 'lang') { languageStack.push(token.annotation); if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; @@ -4414,22 +3332,16 @@ var AblePlayerInstances = []; current.children.push(token); current = token; } - } - else if (token.type === 'endTag') { + } else if (token.type === 'endTag') { if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) { - // NOTE from Terrill: This was resulting in an error because current.parent was undefined - // Fixed (I think) by assigning current token to token.parent in 'startTag' loop current = current.parent; - } - else if (token.tagName === 'lang' && current.type === 'lang') { + } else if (token.tagName === 'lang' && current.type === 'lang') { current = current.parent; languageStack.pop(); - } - else if (token.tagName === 'ruby' && current.type === 'rt') { + } else if (token.tagName === 'ruby' && current.type === 'rt') { current = current.parent.parent; } - } - else if (token.type === 'timestampTag') { + } else if (token.type === 'timestampTag') { var tempState = { text: token.value, error: null, @@ -4452,7 +3364,6 @@ var AblePlayerInstances = []; return result; } - // Gets a single cue token; uses the method in the w3 specification. function getCueToken(state) { var tokenState = 'data'; var result = []; @@ -4461,228 +3372,179 @@ var AblePlayerInstances = []; while (true) { var c; - // Double newlines indicate end of token. if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { c = '\u0004'; - } - else if (state.text.length > 0) { + } else if (state.text.length > 0) { c = state.text[0]; - } - else { - // End of file. + } else { c = '\u0004'; } if (tokenState === 'data') { if (c === '&') { buffer = '&'; tokenState = 'escape'; - } - else if (c === '<') { + } else if (c === '<') { if (result.length === 0) { tokenState = 'tag'; - } - else { + } else { token.type = 'string'; token.value = result.join(''); return token; } - } - else if (c === '\u0004') { + } else if (c === '\u0004') { return {type: 'string', value: result.join('')}; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'escape') { + } else if (tokenState === 'escape') { if (c === '&') { result.push(buffer); buffer = '&'; - } - else if (c.match(/[0-9a-z]/)) { + } else if (c.match(/[0-9a-z]/)) { buffer += c; - } - else if (c === ';') { + } else if (c === ';') { if (buffer === '&') { result.push('&'); - } - else if (buffer === '<') { + } else if (buffer === '<') { result.push('<'); - } - else if (buffer === '>') { + } else if (buffer === '>') { result.push('>'); - } - else if (buffer === '&lrm') { + } else if (buffer === '&lrm') { result.push('\u200e'); - } - else if (buffer === '&rlm') { + } else if (buffer === '&rlm') { result.push('\u200f'); - } - else if (buffer === ' ') { + } else if (buffer === ' ') { result.push('\u00a0'); - } - else { + } else { result.push(buffer); result.push(';'); } tokenState = 'data'; - } - else if (c === '<' \|\| c === '\u0004') { + } else if (c === '<' \|\| c === '\u0004') { result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { // Handle unescaped & chars as strings + } else if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else { + } else { result.push(buffer); tokenState = 'data'; } - } - else if (tokenState === 'tag') { + } else if (tokenState === 'tag') { if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '/') { + } else if (c === '/') { tokenState = 'endTag'; - } - else if (c.match('[0-9]')) { + } else if (c.match('[0-9]')) { tokenState = 'timestampTag'; result.push(c); - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); break; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = ''; token.type = 'startTag'; return token; - } - else { + } else { result.push(c); tokenState = 'startTag'; } - } - else if (tokenState === 'startTag') { + } else if (tokenState === 'startTag') { if (c === '\t' \|\| c === '\u000c' \|\| c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'startTagClass') { + } else if (tokenState === 'startTagClass') { if (c === '\t' \|\| c === '\u000c' \|\| c === ' ') { token.classes.push(buffer); buffer = ''; tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { token.classes.push(buffer); buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { token.classes.push(buffer); buffer = ""; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else { + } else { buffer += 'c'; } - } - else if (tokenState === 'startTagAnnotation') { + } else if (tokenState === 'startTagAnnotation') { if (c === '>') { cut(state, 1); - buffer = $.trim(buffer).replace(/ +/, ' '); + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else if (c === '\u0004') { - buffer = $.trim(buffer).replace(/ +/, ' '); + } else if (c === '\u0004') { + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else { + } else { buffer += c; } - } - else if (tokenState === 'endTag') { + } else if (tokenState === 'endTag') { if (c === '>') { cut(state, 1); token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'timestampTag') { + } else if (tokenState === 'timestampTag') { if (c === '>') { cut(state, 1); token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else { + } else { throw 'Unknown tokenState ' + tokenState; } @@ -4691,7 +3553,6 @@ var AblePlayerInstances = []; } function eatComment(state) { - // Cut the NOTE line. var noteLine = cutLine(state); if (noteLine.indexOf('-->') !== -1) { state.error = 'Invalid syntax: --> in NOTE line.'; @@ -4699,21 +3560,17 @@ var AblePlayerInstances = []; } while (true) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { - // End of comment. + if ( nextLine.trim().length === 0) { return; - } - else if (nextLine.indexOf('-->') !== -1) { + } else if (nextLine.indexOf('-->') !== -1) { state.error = 'Invalid syntax: --> in comment.'; return; - } - else { + } else { cutLine(state); } } } - // Initial byte order mark. function eatOptionalBOM(state) { if (state.text[0] === '\ufeff') { cut(state, 1); @@ -4721,12 +3578,10 @@ var AblePlayerInstances = []; } - // "WEBVTT" string. function eatSignature(state) { if (state.text.substring(0,6) === 'WEBVTT') { cut(state, 6); - } - else { + } else { state.error = 'Invalid signature.'; } } @@ -4734,8 +3589,7 @@ var AblePlayerInstances = []; function eatArrow(state) { if (state.text.length < 3 \|\| state.text.substring(0,3) !== '-->') { state.error = 'Missing -->'; - } - else { + } else { cut(state, 3); } } @@ -4743,8 +3597,7 @@ var AblePlayerInstances = []; function eatSingleSpaceOrTab(state) { if (state.text[0] === '\t' \|\| state.text[0] === ' ') { cut(state, 1); - } - else { + } else { state.error = 'Missing space.'; } } @@ -4770,8 +3623,7 @@ var AblePlayerInstances = []; var nextEOL = state.text.indexOf('\n'); if (nextEOL === -1) { state.error = 'Missing EOL.'; - } - else { + } else { cut(state, nextEOL + 1); } } @@ -4779,25 +3631,22 @@ var AblePlayerInstances = []; function eatEmptyLines(state) { while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); - } - else { + } else { break; } } } - // Eats empty lines, but throws an error if there's not at least one. function eatAtLeast1EmptyLines(state) { var linesEaten = 0; while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); linesEaten += 1; - } - else { + } else { break; } } @@ -4814,7 +3663,7 @@ var AblePlayerInstances = []; } var timestamp = cut(state, nextSpace); - var results = /((\d\d):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(timestamp); + var results = /((\d+):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(timestamp); if (!results) { state.error = 'Unable to parse timestamp'; @@ -4841,8 +3690,7 @@ var AblePlayerInstances = []; time += parseInt(seconds, 10); time += parseInt(results[6], 10) / 1000; - } - else { + } else { time += parseInt(results[7], 10); time += parseInt(results[8], 10) / 1000; } @@ -4855,130 +3703,81 @@ var AblePlayerInstances = []; AblePlayer.prototype.injectPlayerCode = function() { - // create and inject surrounding HTML structure - // If IOS: - // If video: - // IOS does not support any of the player's functionality - // - everything plays in its own player - // Therefore, AblePlayer is not loaded & all functionality is disabled - // (this all determined. If this is IOS && video, this function is never called) - // If audio: - // HTML cannot be injected as a parent of the <audio> element - // It is therefore injected after the <audio> element - // This is only a problem in IOS 6 and earlier, - // & is a known bug, fixed in IOS 7 - - var thisObj, captionsContainer, prefsGroups, i; - thisObj = this; - // create three wrappers and wrap them around the media element. - // From inner to outer: - // $mediaContainer - contains the original media element - // $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions) - // $ableWrapper - contains additional widgets (e.g., transcript window, sign window) + var captionsContainer; this.$mediaContainer = this.$media.wrap('<div class="able-media-container"></div>').parent(); this.$ableDiv = this.$mediaContainer.wrap('<div class="able"></div>').parent(); this.$ableWrapper = this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(); this.$ableWrapper.addClass('able-skin-' + this.skin); - - this.$ableWrapper.css({ - 'width': this.playerWidth + 'px' - }); if (this.mediaType === 'video') { - // youtube adds its own big play button - // don't show ours unless video has a poster attribute - // (which obstructs the YouTube poster & big play button) if (this.iconType != 'image' && (this.player !== 'youtube' \|\| this.hasPoster)) { this.injectBigPlayButton(); } } - // add container that captions or description will be appended to - // Note: new Jquery object must be assigned _after_ wrap, hence the temp captionsContainer variable - captionsContainer = $('<div>'); - if (this.mediaType === 'video') { - captionsContainer.addClass('able-vidcap-container'); - } - else if (this.mediaType === 'audio') { - captionsContainer.addClass('able-audcap-container'); - // hide this by default. It will be shown if captions are available + captionsContainer = $('<div>'); + if (this.mediaType === 'video') { + captionsContainer.addClass('able-vidcap-container'); + } else if (this.mediaType === 'audio') { + captionsContainer.addClass('able-audcap-container'); captionsContainer.addClass('captions-off'); } - this.injectPlayerControlArea(); // this may need to be injected after captions??? + this.injectPlayerControlArea(); this.$captionsContainer = this.$mediaContainer.wrap(captionsContainer).parent(); - this.injectAlert(); + this.injectAlert(this.$ableDiv); this.injectPlaylist(); - - // Do this last, as it should be prepended to the top of this.$ableDiv - // after everything else has prepended + this.injectAudioPoster(); this.injectOffscreenHeading(); }; + AblePlayer.prototype.injectAudioPoster = function() { + if ( this.mediaType === 'audio' && this.hasPoster ) { + audioPoster = DOMPurify.sanitize(this.audioPoster); + audioPosterAlt = DOMPurify.sanitize(this.audioPosterAlt); + let audioPosterImg = document.createElement( 'img' ); + audioPosterImg.setAttribute( 'src', audioPoster ); + audioPosterImg.setAttribute( 'alt', audioPosterAlt ); + this.$audioWrapper = this.$playerDiv.wrap( '<div class="able-audio-wrapper">' ).parent(); + this.$audioWrapper.prepend( audioPosterImg ); + } + } + AblePlayer.prototype.injectOffscreenHeading = function () { - // Inject an offscreen heading to the media container. - // If heading hasn't already been manually defined via data-heading-level, - // automatically assign a level that is one level deeper than the closest parent heading - // as determined by getNextHeadingLevel() var headingType; if (this.playerHeadingLevel == '0') { - // do NOT inject a heading (at author's request) - } - else { + } else { if (typeof this.playerHeadingLevel === 'undefined') { - this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); // returns in integer 1-6 + this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); } headingType = 'h' + this.playerHeadingLevel.toString(); this.$headingDiv = $('<' + headingType + '>'); this.$ableDiv.prepend(this.$headingDiv); this.$headingDiv.addClass('able-offscreen'); - this.$headingDiv.text(this.tt.playerHeading); + this.$headingDiv.text( this.translate( 'playerHeading', 'Media player' ) ); } }; AblePlayer.prototype.injectBigPlayButton = function () { - var thisObj, svgData, buttonIcon, svgPath; - - thisObj = this; + var thisObj = this; this.$bigPlayButton = $('<button>', { 'class': 'able-big-play-button', 'aria-hidden': false, - 'aria-label': this.tt.play, + 'aria-label': this.translate( 'play', 'Play' ), + 'type': 'button', 'tabindex': 0 }); - if (this.iconType == 'svg') { - svgData = this.getSvgData('play'); - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - this.$bigPlayButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - this.$bigPlayButton.html(this.$bigPlayButton.html()); - } - else { // use icon font - this.$bigPlayIcon = $('<span>', { - 'class': 'icon-play', - }); - this.$bigPlayButton.append(this.$bigPlayIcon); - } + this.getIcon( this.$bigPlayButton, 'play' ); - this.$bigPlayButton.click(function (event) { - event.preventDefault(); + this.$bigPlayButton.on( 'click', function () { thisObj.handlePlay(); }); - + this.$mediaContainer.append(this.$bigPlayButton); }; @@ -4987,10 +3786,10 @@ var AblePlayerInstances = []; this.$playerDiv = $('<div>', { 'class' : 'able-player', 'role' : 'region', - 'aria-label' : this.mediaType + ' player' + 'aria-label' : ( 'audio' === this.mediaType ) ? this.translate( 'audioPlayer', 'audio player' ) : this.translate( 'videoPlayer', 'video player' ) }); - this.$playerDiv.addClass('able-'+this.mediaType); - if (this.hasPlaylist && this.showNowPlaying) { + this.$playerDiv.addClass('able-' + this.mediaType); + if (this.hasPlaylist && this.showNowPlaying) { this.$nowPlayingDiv = $('<div>',{ 'class' : 'able-now-playing', 'aria-live' : 'assertive', @@ -5019,102 +3818,137 @@ var AblePlayerInstances = []; this.$speed = $('<span>',{ 'class' : 'able-speed', - 'aria-live' : 'assertive' - }).text(this.tt.speed + ': 1x'); + 'aria-live' : 'assertive', + 'aria-atomic' : 'true' + }).text(this.translate( 'speed', 'Speed' ) + ': 1x'); this.$status = $('<span>',{ 'class' : 'able-status', 'aria-live' : 'polite' }); - // Put everything together. this.$statusBarDiv.append(this.$timer, this.$speed, this.$status); if (this.showNowPlaying) { this.$playerDiv.append(this.$nowPlayingDiv, this.$controllerDiv, this.$statusBarDiv); - } - else { + } else { this.$playerDiv.append(this.$controllerDiv, this.$statusBarDiv); } - if (this.mediaType === 'video') { - // the player controls go after the media & captions + + if (this.mediaType === 'video') { this.$ableDiv.append(this.$playerDiv); - } - else { - // the player controls go before the media & captions + } else { this.$ableDiv.prepend(this.$playerDiv); } }; AblePlayer.prototype.injectTextDescriptionArea = function () { - // create a div for writing description text this.$descDiv = $('<div>',{ 'class': 'able-descriptions' }); - // Add ARIA so description will be announced by screen readers - // Later (in description.js > showDescription()), - // if browser supports Web Speech API and this.descMethod === 'browser' - // these attributes will be removed this.$descDiv.attr({ 'aria-live': 'assertive', 'aria-atomic': 'true' }); - // Start off with description hidden. - // It will be exposed conditionally within description.js > initDescription() this.$descDiv.hide(); this.$ableDiv.append(this.$descDiv); }; AblePlayer.prototype.getDefaultWidth = function(which) { - - // return default width of resizable elements - // these values are somewhat arbitrary, but seem to result in good usability - // if users disagree, they can resize (and resposition) them + let viewportMaxwidth = window.innerWidth; if (which === 'transcript') { - return 450; - } - else if (which === 'sign') { - return 400; + return ( viewportMaxwidth <= 450 ) ? viewportMaxwidth : 450; + } else if (which === 'sign') { + return ( viewportMaxwidth <= 400 ) ? viewportMaxwidth : 400; } }; - AblePlayer.prototype.positionDraggableWindow = function (which, width) { + AblePlayer.prototype.rePositionDraggableWindow = function (which) { + + let preferences, $window; + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + + if ( which === 'transcript' && $window ) { + if (typeof preferences.transcript !== 'undefined') { + this.prevTranscriptPosition = preferences.transcript; + } + $window.css({ + 'top': 0, + 'left': 0 + }); + } else if ( 'sign' === which && $window ) { + if (typeof preferences.sign !== 'undefined') { + this.prevSignPosition = preferences.sign; + } + $window.css({ + 'top': 0, + 'right': 0, + 'left': 'auto' + }); + } + } - // which is either 'transcript' or 'sign' + AblePlayer.prototype.positionDraggableWindow = function (which, width) { - var cookie, cookiePos, $window, dragged, windowPos, currentWindowPos, firstTime, zIndex; + var preferences, preferencePos, $window, windowPos, viewportWidth, windowWidth; - cookie = this.getCookie(); + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + if ( ! $window ) { + return; + } if (which === 'transcript') { - $window = this.$transcriptArea; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.transcript; + if (typeof preferences.transcript !== 'undefined') { + preferencePos = preferences.transcript; } - } - else if (which === 'sign') { - $window = this.$signWindow; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.sign; + if ( this.prevTranscriptPosition ) { + preferencePos = this.prevTranscriptPosition; + this.prevTranscriptPosition = false; + } + } else if (which === 'sign') { + if (typeof preferences.sign !== 'undefined') { + preferencePos = preferences.sign; + } + if ( this.prevSignPosition ) { + preferencePos = this.prevSignPosition; + this.prevSignPosition = false; } } - if (typeof cookiePos !== 'undefined' && !($.isEmptyObject(cookiePos))) { - // position window using stored values from cookie + if (typeof preferencePos !== 'undefined' && !($.isEmptyObject(preferencePos))) { $window.css({ - 'position': cookiePos['position'], - 'width': cookiePos['width'], - 'z-index': cookiePos['zindex'] + 'position': preferencePos['position'], + 'width': preferencePos['width'], + 'z-index': preferencePos['zindex'] }); - if (cookiePos['position'] === 'absolute') { + if (preferencePos['position'] === 'absolute') { $window.css({ - 'top': cookiePos['top'], - 'left': cookiePos['left'] + 'top': preferencePos['top'], + 'left': preferencePos['left'] }); - } - // since cookie is not page-specific, z-index needs may vary across different pages - this.updateZIndex(which); - } - else { - // position window using default values + topPosition = $window.offset().top; + leftPosition = $window.offset().left; + viewportWidth = window.innerWidth; + windowWidth = $window.width(); + if ( topPosition < 0 ) { + $window.css({ + 'top': preferencePos['top'] - topPosition + }); + } + if ( leftPosition < 0 && ! this.restoringAfterFullscreen ) { + + $window.css({ + 'left': preferencePos['left'] - leftPosition + }); + } + if ( viewportWidth - leftPosition < 30 ) { + $window.css({ + 'left': viewportWidth - windowWidth + }); + } + } + this.updateZIndex(which); + } else { windowPos = this.getOptimumPosition(which, width); if (typeof width === 'undefined') { width = this.getDefaultWidth(which); @@ -5135,117 +3969,85 @@ var AblePlayerInstances = []; AblePlayer.prototype.getOptimumPosition = function (targetWindow, targetWidth) { - // returns optimum position for targetWindow, as an array with the following structure: - // 0 - CSS position ('absolute' or 'relative') - // 1 - top - // 2 - left - // 3 - zindex (if not default) - // targetWindow is either 'transcript' or 'sign' - // if there is room to the right of the player, position element there - // else if there is room the left of the player, position element there - // else position element beneath player - var gap, position, ableWidth, ableHeight, ableOffset, ableTop, ableLeft, - windowWidth, otherWindowWidth, zIndex; + var gap, position, ableWidth, ableOffset, ableLeft, windowWidth, otherWindowWidth; if (typeof targetWidth === 'undefined') { targetWidth = this.getDefaultWidth(targetWindow); } - gap = 5; // number of pixels to preserve between Able Player objects - - position = []; // position, top, left + gap = 5; + position = []; ableWidth = this.$ableDiv.width(); - ableHeight = this.$ableDiv.height(); ableOffset = this.$ableDiv.offset(); - ableTop = ableOffset.top; ableLeft = ableOffset.left; windowWidth = $(window).width(); - otherWindowWidth = 0; // width of other visiable draggable windows will be added to this + otherWindowWidth = 0; if (targetWindow === 'transcript') { - if (typeof this.$signWindow !== 'undefined') { - if (this.$signWindow.is(':visible')) { - otherWindowWidth = this.$signWindow.width() + gap; - } + if (typeof this.$signWindow !== 'undefined' && (this.$signWindow.is(':visible'))) { + otherWindowWidth = this.$signWindow.width() + gap; } - } - else if (targetWindow === 'sign') { - if (typeof this.$transcriptArea !== 'undefined') { - if (this.$transcriptArea.is(':visible')) { - otherWindowWidth = this.$transcriptArea.width() + gap; - } + } else if (targetWindow === 'sign') { + if (typeof this.$transcriptArea !== 'undefined' && (this.$transcriptArea.is(':visible'))) { + otherWindowWidth = this.$transcriptArea.width() + gap; } } if (targetWidth < (windowWidth - (ableLeft + ableWidth + gap + otherWindowWidth))) { - // there's room to the left of $ableDiv position[0] = 'absolute'; position[1] = 0; position[2] = ableWidth + otherWindowWidth + gap; - } - else if (targetWidth + gap < ableLeft) { - // there's room to the right of $ableDiv + } else if (targetWidth + gap < ableLeft) { position[0] = 'absolute'; position[1] = 0; position[2] = ableLeft - targetWidth - gap; - } - else { - // position element below $ableDiv + } else { position[0] = 'relative'; - // no need to define top, left, or z-index } return position; }; - AblePlayer.prototype.injectAlert = function () { - - // inject two alerts, one visible for all users and one for screen reader users only - - var top; - + AblePlayer.prototype.injectAlert = function ($container) { this.$alertBox = $('<div role="alert"></div>'); this.$alertBox.addClass('able-alert'); this.$alertBox.hide(); - this.$alertBox.appendTo(this.$ableDiv); - if (this.mediaType == 'audio') { - top = '-10'; - } - else { - // position just below top of video by default - // but this will change after video player is fully sized - // see control.js > resizePlayer() - top = '10'; - } - this.$alertBox.css({ - top: top + 'px' + + var $alertText = $( '<span></span>' ); + $alertText.appendTo(this.$alertBox); + + var $alertDismiss = $('<button type="button"></button>' ); + $alertDismiss.attr( 'aria-label', this.translate( 'dismissButton', 'Dismiss' ) ); + $alertDismiss.text( '×' ); + $alertDismiss.appendTo(this.$alertBox); + + $alertDismiss.on( 'click', function(e) { + $(this).parent('div').hide(); }); - this.$srAlertBox = $('<div role="alert"></div>'); - this.$srAlertBox.addClass('able-screenreader-alert'); - this.$srAlertBox.appendTo(this.$ableDiv); + this.$alertBox.appendTo($container); + + if ( ! this.$srAlertBox ) { + this.$srAlertBox = $('<div role="alert"></div>'); + this.$srAlertBox.addClass('able-screenreader-alert'); + this.$srAlertBox.appendTo($container); + } }; AblePlayer.prototype.injectPlaylist = function () { if (this.playlistEmbed === true) { - // move playlist into player, immediately before statusBarDiv var playlistClone = this.$playlistDom.clone(); playlistClone.insertBefore(this.$statusBarDiv); - // Update to the new playlist copy. this.$playlist = playlistClone.find('li'); } }; AblePlayer.prototype.createPopup = function (which, tracks) { - // Create popup menu and append to player - // 'which' parameter is either 'captions', 'chapters', 'prefs', 'transcript-window' or 'sign-window' - // 'tracks', if provided, is a list of tracks to be used as menu items - var thisObj, $menu, includeMenuItem, prefCats, i, $menuItem, prefCat, whichPref, - hasDefault, track, windowOptions, whichPref, whichMenu, - $thisItem, $prevItem, $nextItem; + var thisObj, $menu, includeMenuItem, i, $menuItem, prefCat, whichPref, hasDefault, track, + windowOptions, $thisItem, $prevItem, $nextItem, hasDescription, hasTranscript; thisObj = this; @@ -5259,26 +4061,28 @@ var AblePlayerInstances = []; $menu.addClass('able-popup-captions'); } - // Populate menu with menu items if (which === 'prefs') { if (this.prefCats.length > 1) { for (i = 0; i < this.prefCats.length; i++) { + prefCat = this.prefCats[i]; + hasDescription = ( thisObj.hasDescTracks \|\| thisObj.hasOpenDesc \|\| thisObj.hasClosedDesc ) ? true : false; + hasTranscript = ( thisObj.transcriptType === null ) ? false : true; + + if ( prefCat === 'descriptions' && ! hasDescription \|\| prefCat === 'transcript' && ! hasTranscript ) { + continue; + } $menuItem = $('<li></li>',{ 'role': 'menuitem', 'tabindex': '-1' }); - prefCat = this.prefCats[i]; if (prefCat === 'captions') { - $menuItem.text(this.tt.prefMenuCaptions); - } - else if (prefCat === 'descriptions') { - $menuItem.text(this.tt.prefMenuDescriptions); - } - else if (prefCat === 'keyboard') { - $menuItem.text(this.tt.prefMenuKeyboard); - } - else if (prefCat === 'transcript') { - $menuItem.text(this.tt.prefMenuTranscript); + $menuItem.text( this.translate( 'prefMenuCaptions', 'Captions' ) ); + } else if (prefCat === 'descriptions') { + $menuItem.text( this.translate( 'prefMenuDescriptions', 'Descriptions' ) ); + } else if (prefCat === 'keyboard') { + $menuItem.text( this.translate( 'prefMenuKeyboard', 'Keyboard' ) ); + } else if (prefCat === 'transcript') { + $menuItem.text( this.translate( 'prefMenuTranscript', 'Transcript' ) ); } $menuItem.on('click',function() { whichPref = $(this).text(); @@ -5286,14 +4090,11 @@ var AblePlayerInstances = []; thisObj.setFullscreen(false); if (whichPref === thisObj.tt.prefMenuCaptions) { thisObj.captionPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuDescriptions) { + } else if (whichPref === thisObj.tt.prefMenuDescriptions) { thisObj.descPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuKeyboard) { + } else if (whichPref === thisObj.tt.prefMenuKeyboard) { thisObj.keyboardPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuTranscript) { + } else if (whichPref === thisObj.tt.prefMenuTranscript) { thisObj.transcriptPrefsDialog.show(); } thisObj.closePopups(); @@ -5302,22 +4103,17 @@ var AblePlayerInstances = []; $menu.append($menuItem); } this.$prefsButton.attr('data-prefs-popup','menu'); - } - else if (this.prefCats.length == 1) { - // only 1 category, so don't create a popup menu. - // Instead, open dialog directly when user clicks Prefs button + } else if (this.prefCats.length == 1) { this.$prefsButton.attr('data-prefs-popup',this.prefCats[0]); } - } - else if (which === 'captions' \|\| which === 'chapters') { + } else if (which === 'captions' \|\| which === 'chapters') { hasDefault = false; for (i = 0; i < tracks.length; i++) { track = tracks[i]; - if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { - includeMenuItem = false; - } - else { - includeMenuItem = true; + if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { + includeMenuItem = false; + } else { + includeMenuItem = true; } if (includeMenuItem) { $menuItem = $('<li></li>',{ @@ -5328,16 +4124,13 @@ var AblePlayerInstances = []; if (track.def && this.prefCaptions == 1) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); - } - // Get a label using track data + } if (which == 'captions') { $menuItem.text(track.label); $menuItem.on('click',this.getCaptionClickFunction(track)); - } - else if (which == 'chapters') { + } else if (which == 'chapters') { $menuItem.text(this.flattenCueForCaption(track) + ' - ' + this.formatSecondsAsColonTime(track.start)); $menuItem.on('click',this.getChapterClickFunction(track.start)); } @@ -5345,35 +4138,32 @@ var AblePlayerInstances = []; } } if (which === 'captions') { - // add a 'captions off' menu item $menuItem = $('<li></li>',{ 'role': 'menuitemradio', 'tabindex': '-1', - }).text(this.tt.captionsOff); + }).text( this.translate( 'captionsOff', 'Captions off' ) ); if (this.prefCaptions === 0) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); } $menuItem.on('click',this.getCaptionOffFunction()); $menu.append($menuItem); } - } - else if (which === 'transcript-window' \|\| which === 'sign-window') { + } else if (which === 'transcript-window' \|\| which === 'sign-window') { windowOptions = []; windowOptions.push({ 'name': 'move', - 'label': this.tt.windowMove + 'label': this.translate( 'windowMove', 'Move' ) }); windowOptions.push({ 'name': 'resize', - 'label': this.tt.windowResize + 'label': this.translate( 'windowResize', 'Resize' ) }); windowOptions.push({ 'name': 'close', - 'label': this.tt.windowClose + 'label': this.translate( 'windowClose', 'Close' ) }); for (i = 0; i < windowOptions.length; i++) { $menuItem = $('<li></li>',{ @@ -5382,12 +4172,9 @@ var AblePlayerInstances = []; 'data-choice': windowOptions[i].name }); $menuItem.text(windowOptions[i].label); - $menuItem.on('click mousedown',function(e) { + $menuItem.on('click',function(e) { e.stopPropagation(); if (typeof e.button !== 'undefined' && e.button !== 0) { - // this was a mouse click (if click is triggered by keyboard, e.button is undefined) - // and the button was not a left click (left click = 0) - // therefore, ignore this click return false; } if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { @@ -5398,68 +4185,49 @@ var AblePlayerInstances = []; $menu.append($menuItem); } } - // assign default item, if there isn't one already if (which === 'captions' && !hasDefault) { - // check the menu item associated with the default language - // as determined in control.js > syncTrackLanguages() if ($menu.find('li[lang=' + this.captionLang + ']')) { - // a track exists for the default language. Check that item in the menu $menu.find('li[lang=' + this.captionLang + ']').attr('aria-checked','true'); - } - else { - // check the last item (captions off) + } else { $menu.find('li').last().attr('aria-checked','true'); } - } - else if (which === 'chapters') { + } else if (which === 'chapters') { if ($menu.find('li:contains("' + this.defaultChapter + '")')) { $menu.find('li:contains("' + this.defaultChapter + '")').attr('aria-checked','true').addClass('able-focus'); - } - else { + } else { $menu.find('li').first().attr('aria-checked','true').addClass('able-focus'); } } - // add keyboard handlers for navigating within popups $menu.on('keydown',function (e) { - - whichMenu = $(this).attr('id').split('-')[1]; + $thisItem = $(this).find('li:focus'); if ($thisItem.is(':first-child')) { - // this is the first item in the menu - $prevItem = $(this).find('li').last(); // wrap to bottom + $prevItem = $(this).find('li').last(); $nextItem = $thisItem.next(); - } - else if ($thisItem.is(':last-child')) { - // this is the last Item + } else if ($thisItem.is(':last-child')) { $prevItem = $thisItem.prev(); - $nextItem = $(this).find('li').first(); // wrap to top - } - else { + $nextItem = $(this).find('li').first(); + } else { $prevItem = $thisItem.prev(); $nextItem = $thisItem.next(); } - if (e.which === 9) { // Tab + if (e.key === 'Tab') { if (e.shiftKey) { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else { + $prevItem.trigger('focus').addClass('able-focus'); + } else { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); + $nextItem.trigger('focus').addClass('able-focus'); } - } - else if (e.which === 40 \|\| e.which === 39) { // down or right arrow + } else if (e.key === 'ArrowDown' \|\| e.key === 'ArrowRight') { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - else if (e.which == 38 \|\| e.which === 37) { // up or left arrow + $nextItem.trigger('focus').addClass('able-focus'); + } else if (e.key == 'ArrowUp' \|\| e.key === 'ArrowLeft') { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else if (e.which === 32 \|\| e.which === 13) { // space or enter - $thisItem.click(); - } - else if (e.which === 27) { // Escape + $prevItem.trigger('focus').addClass('able-focus'); + } else if (e.key === ' ' \|\| e.key === 'Enter') { + $thisItem.trigger( 'click' ); + } else if (e.key === 'Escape') { $thisItem.removeClass('able-focus'); thisObj.closePopups(); e.stopPropagation; @@ -5476,7 +4244,7 @@ var AblePlayerInstances = []; if (this.chaptersPopup && this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); - this.$chaptersButton.attr('aria-expanded','false').focus(); + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); } if (this.captionsPopup && this.captionsPopup.is(':visible')) { this.captionsPopup.hide(); @@ -5484,52 +4252,40 @@ var AblePlayerInstances = []; this.waitThenFocus(this.$ccButton); } if (this.prefsPopup && this.prefsPopup.is(':visible') && !this.hidingPopup) { - this.hidingPopup = true; // stopgap to prevent popup from re-opening again on keypress + this.hidingPopup = true; this.prefsPopup.hide(); - // restore menu items to their original state this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); this.$prefsButton.attr('aria-expanded', 'false'); if (!this.showingPrefsDialog) { this.waitThenFocus(thisObj.$prefsButton); } - // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; },100); } if (this.$volumeSlider && this.$volumeSlider.is(':visible')) { - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeButton.attr('aria-expanded', 'false').focus(); + this.$volumeSlider.hide().attr('aria-hidden','true'); + this.$volumeButton.attr('aria-expanded', 'false').trigger('focus'); } if (this.$transcriptPopup && this.$transcriptPopup.is(':visible')) { - this.hidingPopup = true; + this.hidingPopup = true; this.$transcriptPopup.hide(); - // restore menu items to their original state this.$transcriptPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$transcriptPopupButton.attr('aria-expanded','false').focus(); - // wait briefly, then reset hidingPopup + this.$transcriptPopupButton.attr('aria-expanded','false').trigger('focus'); setTimeout(function() { thisObj.hidingPopup = false; },100); } if (this.$signPopup && this.$signPopup.is(':visible')) { this.$signPopup.hide(); - // restore menu items to their original state this.$signPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$signPopupButton.attr('aria-expanded','false').focus(); + this.$signPopupButton.attr('aria-expanded','false').trigger('focus'); } }; AblePlayer.prototype.setupPopups = function (which) { - // Create and fill in the popup menu forms for various controls. - // parameter 'which' is passed if refreshing content of an existing popup ('captions' or 'chapters') - // If which is undefined, automatically setup 'captions', 'chapters', and 'prefs' popups - // However, only setup 'transcript-window' and 'sign-window' popups if passed as value of which - var popups, thisObj, hasDefault, i, j, - tracks, track, $trackButton, $trackLabel, - radioName, radioId, $menu, $menuItem, - prefCats, prefCat, prefLabel; + var popups, thisObj, i, tracks; popups = []; if (typeof which === 'undefined') { @@ -5556,33 +4312,26 @@ var AblePlayerInstances = []; thisObj = this; for (var i=0; i<popups.length; i++) { var popup = popups[i]; - hasDefault = false; if (popup == 'prefs') { this.prefsPopup = this.createPopup('prefs'); - } - else if (popup == 'captions') { + } else if (popup == 'captions') { if (typeof this.captionsPopup === 'undefined' \|\| !this.captionsPopup) { this.captionsPopup = this.createPopup('captions',this.captions); } - } - else if (popup == 'chapters') { + } else if (popup == 'chapters') { if (this.selectedChapters) { tracks = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { tracks = this.chapters[0].cues; - } - else { + } else { tracks = []; } if (typeof this.chaptersPopup === 'undefined' \|\| !this.chaptersPopup) { this.chaptersPopup = this.createPopup('chapters',tracks); } - } - else if (popup == 'transcript-window') { + } else if (popup == 'transcript-window') { return this.createPopup('transcript-window'); - } - else if (popup == 'sign-window') { + } else if (popup == 'sign-window') { return this.createPopup('sign-window'); } } @@ -5591,115 +4340,78 @@ var AblePlayerInstances = []; AblePlayer.prototype.provideFallback = function() { - // provide fallback in case of a critical error building the player - // to test, set data-test-fallback to either of the following values: - // 1 = emulate failure to build Able Player - // 2 = emulate browser that doesn't support HTML5 media var i, $fallback; - if (this.usingFallback) { - // fallback has already been implemented. - // stopgap to prevent this function from executing twice on the same media element - return; - } - else { - this.usingFallback = true; + if (this.usingFallback) { + return; + } else { + this.usingFallback = true; } - if (!this.testFallback) { - // this is not a test. - // an actual error has resulted in this function being called. - // use scenario 1 - this.testFallback = 1; + if (!this.testFallback) { + this.testFallback = 1; } - if (typeof this.$media === 'undefined') { - // this function has been called prior to initialize.js > reinitialize() - // before doing anything, need to create the jQuery media object - this.$media = $(this.media); - } - - // get/assign an id for the media element - if (this.$media.attr('id')) { - this.mediaId = this.$media.attr('id'); + if (typeof this.$media === 'undefined') { + this.$media = $(this.media); } - else { + + if (this.$media.attr('id')) { + this.mediaId = this.$media.attr('id'); + } else { this.mediaId = 'media' + Math.floor(Math.random() * 1000000000).toString(); - } - - // check whether element has nested fallback content - this.hasFallback = false; - if (this.$media.children().length) { - i = 0; - while (i < this.$media.children().length && !this.hasFallback) { - if (!(this.$media.children()[i].tagName === 'SOURCE' \|\| - this.$media.children()[i].tagName === 'TRACK')) { - // this element is something other than <source> or <track> - this.hasFallback = true; + } + + this.hasFallback = false; + if (this.$media.children().length) { + i = 0; + while (i < this.$media.children().length && !this.hasFallback) { + if (!(this.$media.children()[i].tagName === 'SOURCE' \|\| + this.$media.children()[i].tagName === 'TRACK')) { + this.hasFallback = true; } - i++; + i++; } } - if (!this.hasFallback) { - // the HTML code does not include any nested fallback content - // inject our own - // NOTE: this message is not translated, since fallback may be needed - // due to an error loading the translation file - // This will only be needed on very rare occasions, so English is ok. - $fallback = $('<p>').text('Media player unavailable.'); - this.$media.append($fallback); + if (!this.hasFallback) { + $fallback = $('<p>').text('Media player unavailable.'); + this.$media.append($fallback); } - // get height and width attributes, if present - // and add them to a style attribute - if (this.$media.attr('width')) { - this.$media.css('width',this.$media.attr('width') + 'px'); + if (this.$media.attr('width')) { + this.$media.css('width',this.$media.attr('width') + 'px'); } - if (this.$media.attr('height')) { - this.$media.css('height',this.$media.attr('height') + 'px'); + if (this.$media.attr('height')) { + this.$media.css('height',this.$media.attr('height') + 'px'); } - // Remove data-able-player attribute - this.$media.removeAttr('data-able-player'); + this.$media.removeAttr('data-able-player'); - // Add controls attribute (so browser will add its own controls) - this.$media.prop('controls',true); + this.$media.prop('controls',true); - if (this.testFallback == 2) { + if (this.testFallback == 2) { - // emulate browser failure to support HTML5 media by changing the media tag name - // browsers should display the supported content that's nested inside $(this.$media).replaceWith($('<foobar id="foobar-' + this.mediaId + '">')); - this.$newFallbackElement = $('#foobar-' + this.mediaId); - - // append all children from the original media - if (this.$media.children().length) { - i = this.$media.children().length - 1; - while (i >= 0) { - this.$newFallbackElement.prepend($(this.$media.children()[i])); - i--; + this.$newFallbackElement = $('#foobar-' + this.mediaId); + + if (this.$media.children().length) { + i = this.$media.children().length - 1; + while (i >= 0) { + this.$newFallbackElement.prepend($(this.$media.children()[i])); + i--; } } - if (!this.hasFallback) { - // inject our own fallback content, defined above + if (!this.hasFallback) { this.$newFallbackElement.append($fallback); } } - return; + return; }; AblePlayer.prototype.calculateControlLayout = function () { - // Calculates the layout for controls based on media and options. - // Returns an array with 4 keys (for legacy skin) or 2 keys (for 2020 skin) - // Keys are the following order: - // 0 = Top left - // 1 = Top right - // 2 = Bottom left (legacy skin only) - // 3 = Bottom right (legacy skin only) - // Each key contains an array of control names to put in that section. - var controlLayout, volumeSupported, playbackSupported, totalButtonWidth, numA11yButtons; + var controlLayout, playbackSupported, numA11yButtons; controlLayout = []; controlLayout[0] = []; @@ -5722,8 +4434,7 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[0].push('previous'); controlLayout[0].push('next'); - } - else if (this.skin == '2020') { + } else { controlLayout[0].push('previous'); controlLayout[0].push('next'); } @@ -5735,8 +4446,7 @@ var AblePlayerInstances = []; controlLayout[2].push('slower'); controlLayout[2].push('faster'); } - } - else { + } else { playbackSupported = false; } @@ -5745,8 +4455,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('captions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('captions'); } } @@ -5754,28 +4463,25 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('sign'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('sign'); } } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { if (this.hasOpenDesc \|\| this.hasClosedDesc) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('descriptions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('descriptions'); } } } - if (this.transcriptType === 'popup' && !(this.hideTranscriptButton)) { + if (this.transcriptType !== null && !(this.hideTranscriptButton)) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('transcript'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('transcript'); } } @@ -5783,8 +4489,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('chapters'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('chapters'); } } @@ -5801,32 +4506,26 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[3].push('preferences'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('preferences'); } - if (this.mediaType === 'video' && this.allowFullscreen) { + if (this.mediaType === 'video' && this.allowFullscreen && this.nativeFullscreenSupported() ) { if (this.skin === 'legacy') { controlLayout[3].push('fullscreen'); - } - else { + } else { controlLayout[1].push('fullscreen'); } } if (this.browserSupportsVolume()) { - volumeSupported = true; // defined in case we decide to move volume button elsewhere this.volumeButton = 'volume-' + this.getVolumeName(this.volume); if (this.skin === 'legacy') { controlLayout[1].push('volume'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('volume'); } - } - else { - volumeSupported = false; + } else { this.volume = false; } return controlLayout; @@ -5834,30 +4533,20 @@ var AblePlayerInstances = []; AblePlayer.prototype.addControls = function() { - // determine which controls to show based on several factors: - // mediaType (audio vs video) - // availability of tracks (e.g., for closed captions & audio description) - // browser support (e.g., for sliders and speedButtons) - // user preferences (???) - // some controls are aligned on the left, and others on the right var thisObj, baseSliderWidth, controlLayout, numSections, - i, j, k, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, $pipeImg, - svgData, svgPath, control, - $buttonLabel, $buttonImg, buttonImgSrc, buttonTitle, $newButton, iconClass, buttonIcon, - buttonUse, buttonText, position, buttonHeight, buttonWidth, buttonSide, controllerWidth, - tooltipId, tooltipY, tooltipX, tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, - captionLabel, popupMenuId; + i, j, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, control, + buttonTitle, $newButton, buttonText, position, buttonHeight, + buttonWidth, buttonSide, controllerWidth, tooltipId, tooltipY, tooltipX, + tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, captionLabel, popupMenuId; thisObj = this; - baseSliderWidth = 100; // arbitrary value, will be recalculated in refreshControls() + baseSliderWidth = 100; - // Initialize the layout into the this.controlLayout variable. controlLayout = this.calculateControlLayout(); numSections = controlLayout.length; - // add an empty div to serve as a tooltip tooltipId = this.mediaId + '-tooltip'; this.$tooltipDiv = $('<div>',{ 'id': tooltipId, @@ -5865,105 +4554,55 @@ var AblePlayerInstances = []; }).hide(); this.$controllerDiv.append(this.$tooltipDiv); - if (this.skin == '2020') { - // add a full-width seek bar + if (this.skin == '2020') { $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); this.$controllerDiv.append($sliderDiv); - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); } + let $controlRow = $('<div class="able-control-row"></div>'); + this.$controllerDiv.append($controlRow); + for (i = 0; i < numSections; i++) { controls = controlLayout[i]; - if ((i % 2) === 0) { // even keys on the left + if ((i % 2) === 0) { $controllerSpan = $('<div>',{ 'class': 'able-left-controls' }); - } - else { // odd keys on the right + } else { $controllerSpan = $('<div>',{ 'class': 'able-right-controls' }); } - this.$controllerDiv.append($controllerSpan); + $controlRow.append($controllerSpan); for (j=0; j<controls.length; j++) { control = controls[j]; if (control === 'seek') { $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); $controllerSpan.append($sliderDiv); if (typeof this.duration === 'undefined' \|\| this.duration === 0) { - // set arbitrary starting duration, and change it when duration is known this.duration = 60; - // also set elapsed to 0 this.elapsed = 0; } - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - else if (control === 'pipe') { + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + } else if (control === 'pipe') { $pipe = $('<span>', { 'tabindex': '-1', - 'aria-hidden': 'true' + 'aria-hidden': 'true', + 'class': 'able-pipe', }); - if (this.iconType === 'font') { - $pipe.addClass('icon-pipe'); - } - else { - $pipeImg = $('<img>', { - src: this.rootPath + 'button-icons/' + this.iconColor + '/pipe.png', - alt: '', - role: 'presentation' - }); - $pipe.append($pipeImg); - } + $pipe.append('\|'); $controllerSpan.append($pipe); - } - else { - // this control is a button - if (control === 'volume') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + this.volumeButton + '.png'; - } - else if (control === 'fullscreen') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/fullscreen-expand.png'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/turtle.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/slower.png'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/rabbit.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/faster.png'; - } - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + control + '.png'; - } + } else { buttonTitle = this.getButtonTitle(control); - // icomoon documentation recommends the following markup for screen readers: - // 1. link element (or in our case, button). Nested inside this element: - // 2. span that contains the icon font (in our case, buttonIcon) - // 3. span that contains a visually hidden label for screen readers (buttonLabel) - // In addition, we are adding aria-label to the button (but not title) - // And if iconType === 'image', we are replacing #2 with an image (with alt="" and role="presentation") - // This has been thoroughly tested and works well in all screen reader/browser combinations - // See https://github.com/ableplayer/ableplayer/issues/81 - - // NOTE: Changed from <button> to <div role="button" as of 4.2.18 - // because <button> elements are rendered poorly in high contrast mode - // in some OS/browser/plugin combinations + $newButton = $('<div>',{ 'role': 'button', 'tabindex': '0', - 'aria-label': buttonTitle, 'class': 'able-button-handler-' + control }); @@ -5971,25 +4610,19 @@ var AblePlayerInstances = []; if (control == 'preferences') { this.prefCats = this.getPreferencesGroups(); if (this.prefCats.length > 1) { - // Prefs button will trigger a menu popupMenuId = this.mediaId + '-prefs-menu'; $newButton.attr({ 'aria-controls': popupMenuId, 'aria-haspopup': 'menu', 'aria-expanded': 'false' - }); - } - else if (this.prefCats.length === 1) { - // Prefs button will trigger a dialog + }); + } else if (this.prefCats.length === 1) { $newButton.attr({ 'aria-haspopup': 'dialog' }); } - } - else if (control === 'volume') { + } else if (control === 'volume') { popupMenuId = this.mediaId + '-volume-slider'; - // volume slider popup is not a menu or a dialog - // therefore, using aria-expanded rather than aria-haspopup to communicate properties/state $newButton.attr({ 'aria-controls': popupMenuId, 'aria-expanded': 'false' @@ -6002,210 +4635,70 @@ var AblePlayerInstances = []; } } } - if (this.iconType === 'font') { - if (control === 'volume') { - iconClass = 'icon-' + this.volumeButton; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-turtle'; - } - else { - iconClass = 'icon-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-rabbit'; - } - else { - iconClass = 'icon-faster'; - } - } - else { - iconClass = 'icon-' + control; - } - buttonIcon = $('<span>',{ - 'class': iconClass, - 'aria-hidden': 'true' - }); - $newButton.append(buttonIcon); + var getControl = control; + if ( control === 'faster' && this.speedIcons === 'animals' ) { + getControl = 'rabbit'; } - else if (this.iconType === 'svg') { - - /* - // Unused option for adding SVG: - // Use <use> element to link to button-icons/able-icons.svg - // Advantage: SVG file can be cached - // Disadvantage: Not supported by Safari 6, IE 6-11, or Edge 12 - // Instead, adding <svg> element within each <button> - if (control === 'volume') { - iconClass = 'svg-' + this.volumeButton; - } - else if (control === 'fullscreen') { - iconClass = 'svg-fullscreen-expand'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-turtle'; - } - else { - iconClass = 'svg-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-rabbit'; - } - else { - iconClass = 'svg-faster'; - } - } - else { - iconClass = 'svg-' + control; - } - buttonIcon = $('<svg>',{ - 'class': iconClass - }); - buttonUse = $('<use>',{ - 'xlink:href': this.rootPath + 'button-icons/able-icons.svg#' + iconClass - }); - buttonIcon.append(buttonUse); - / - var svgData; - if (control === 'volume') { - svgData = this.getSvgData(this.volumeButton); - } - else if (control === 'fullscreen') { - svgData = this.getSvgData('fullscreen-expand'); - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('turtle'); - } - else { - svgData = this.getSvgData('slower'); - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('rabbit'); - } - else { - svgData = this.getSvgData('faster'); - } - } - else { - svgData = this.getSvgData(control); - } - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - $newButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - $newButton.html($newButton.html()); + if ( control === 'slower' && this.speedIcons === 'animals' ) { + getControl = 'turtle'; } - else { - // use images - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); + if ( control === 'volume' ) { + this.getIcon( $newButton, this.volumeButton ); + } else { + if ( 'fullscreen' === getControl ) { + getControl = ( this.fullscreen ) ? 'fullscreen-collapse' : 'fullscreen-expand'; + } + this.getIcon( $newButton, getControl ); } - // add the visibly-hidden label for screen readers that don't support aria-label on the button - var $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(buttonTitle); - $newButton.append($buttonLabel); - // add an event listener that displays a tooltip on mouseenter or focus + + this.setText($newButton,buttonTitle); $newButton.on('mouseenter focus',function(e) { - // when entering a new tooltip, we can forget about hiding the previous tooltip. - // since the same tooltip div is used, it's location just changes. clearTimeout(tooltipTimerId); - var buttonText = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - // position() is expressed using top and left (of button); - // add right (of button) too, for convenience - var controllerWidth = thisObj.$controllerDiv.width(); + buttonText = $(this).attr('aria-label'); + position = $(this).position(); + buttonHeight = $(this).height(); + buttonWidth = $(this).width(); + controllerWidth = thisObj.$controllerDiv.width(); position.right = controllerWidth - position.left - buttonWidth; - // The following formula positions tooltip above the button - // var tooltipY = position.top - buttonHeight - 15; - - // The following formula positions tooltip below the button - // which allows the tooltip to be hoverable as per WCAG 2.x SC 1.4.13 - // without obstructing the seekbar - var tooltipY = position.top + buttonHeight + 5; + tooltipY = position.top + buttonHeight + 5; if ($(this).parent().hasClass('able-right-controls')) { - // this control is on the right side - var buttonSide = 'right'; - } - else { - // this control is on the left side - var buttonSide = 'left'; + buttonSide = 'right'; + } else { + buttonSide = 'left'; } - // populate tooltip, then calculate its width before showing it - var tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); - // center the tooltip horizontally over the button + tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); if (buttonSide == 'left') { - var tooltipX = position.left - tooltipWidth/2; + tooltipX = position.left - tooltipWidth/2; if (tooltipX < 0) { - // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: tooltipX + 'px', right: '', top: tooltipY + 'px' }; - } - else { - var tooltipX = position.right - tooltipWidth/2; + } else { + tooltipX = position.right - tooltipWidth/2; if (tooltipX < 0) { - // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: '', right: tooltipX + 'px', top: tooltipY + 'px' }; } - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); + tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { - // hide tooltip (original line of code) - // AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - // The above line was replaced with the following block - // in order to meet WCAG 2.x SC 1.4.13 - // (keep the tooltip visible if user hovers over it) - // This causes unwanted side effects if tooltips are positioned above the buttons - // as the persistent tooltip obstructs the seekbar, - // blocking users from being able to move a pointer from a button to the seekbar - // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons - - // clear existing timeout before reassigning variable clearTimeout(tooltipTimerId); tooltipTimerId = setTimeout(function() { - // give the user a half second to move cursor to tooltip before removing - // see https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus#hoverable AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }, 500); @@ -6216,95 +4709,69 @@ var AblePlayerInstances = []; thisObj.$tooltipDiv.on('mouseleave blur', function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }); - - }); + + }); }); if (control === 'captions') { if (!this.prefCaptions \|\| this.prefCaptions !== 1) { - // captions are available, but user has them turned off if (this.captions.length > 1) { - captionLabel = this.tt.captions; - } - else { - captionLabel = this.tt.showCaptions; + captionLabel = this.translate( 'captions', 'Captions' ); + } else { + captionLabel = this.translate( 'showCaptions', 'Show captions' ); } $newButton.addClass('buttonOff').attr('title',captionLabel); $newButton.attr('aria-pressed', 'false'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { if (!this.prefDesc \|\| this.prefDesc !== 1) { - // user prefer non-audio described version - // Therefore, load media without description - // Description can be toggled on later with this button - $newButton.addClass('buttonOff').attr('title',this.tt.turnOnDescriptions); + $newButton.addClass('buttonOff').attr( 'title', this.translate( 'turnOnDescriptions', 'Turn on descriptions' ) ); } } $controllerSpan.append($newButton); - // create variables of buttons that are referenced throughout the AblePlayer object if (control === 'play') { this.$playpauseButton = $newButton; - } - else if (control == 'previous') { + } else if (control == 'previous') { this.$prevButton = $newButton; - // if player is being rebuilt because user clicked the Prev button - // return focus to that (newly built) button if (this.buttonWithFocus == 'previous') { - this.$prevButton.focus(); + this.$prevButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control == 'next') { + } else if (control == 'next') { this.$nextButton = $newButton; - // if player is being rebuilt because user clicked the Next button - // return focus to that (newly built) button if (this.buttonWithFocus == 'next') { - this.$nextButton.focus(); + this.$nextButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control === 'captions') { + } else if (control === 'captions') { this.$ccButton = $newButton; - } - else if (control === 'sign') { + } else if (control === 'sign') { this.$signButton = $newButton; - // gray out sign button if sign language window is not active if (!(this.$signWindow.is(':visible'))) { this.$signButton.addClass('buttonOff'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { this.$descButton = $newButton; - // button will be enabled or disabled in description.js > initDescription() - } - else if (control === 'mute') { + } else if (control === 'mute') { this.$muteButton = $newButton; - } - else if (control === 'transcript') { + } else if (control === 'transcript') { this.$transcriptButton = $newButton; - // gray out transcript button if transcript is not active if (!(this.$transcriptDiv.is(':visible'))) { - this.$transcriptButton.addClass('buttonOff').attr('title',this.tt.showTranscript); + this.$transcriptButton.addClass('buttonOff').attr( 'title', this.translate( 'showTranscript', 'Show transcript' ) ); } - } - else if (control === 'fullscreen') { + } else if (control === 'fullscreen') { this.$fullscreenButton = $newButton; - } - else if (control === 'chapters') { + } else if (control === 'chapters') { this.$chaptersButton = $newButton; - } - else if (control === 'preferences') { + } else if (control === 'preferences') { this.$prefsButton = $newButton; - } - else if (control === 'volume') { + } else if (control === 'volume') { this.$volumeButton = $newButton; } } if (control === 'volume') { - // in addition to the volume button, add a hidden slider this.addVolumeSlider($controllerSpan); } } @@ -6314,260 +4781,46 @@ var AblePlayerInstances = []; } if (typeof this.$captionsDiv !== 'undefined') { - // stylize captions based on user prefs this.stylizeCaptions(this.$captionsDiv); } if (typeof this.$descDiv !== 'undefined') { - // stylize descriptions based on user's caption prefs this.stylizeCaptions(this.$descDiv); } - // combine left and right controls arrays for future reference this.controls = []; for (var sec in controlLayout) if (controlLayout.hasOwnProperty(sec)) { this.controls = this.controls.concat(controlLayout[sec]); } - // Update state-based display of controls. - this.refreshControls('init'); - }; - - AblePlayer.prototype.useSvg = function () { - - // Modified from IcoMoon.io svgxuse - // @copyright Copyright (c) 2016 IcoMoon.io - // @license Licensed under MIT license - // See https://github.com/Keyamoon/svgxuse - // @version 1.1.16 - - var cache = Object.create(null); // holds xhr objects to prevent multiple requests - var checkUseElems, - tid; // timeout id - var debouncedCheck = function () { - clearTimeout(tid); - tid = setTimeout(checkUseElems, 100); - }; - var unobserveChanges = function () { - return; - }; - var observeChanges = function () { - var observer; - window.addEventListener('resize', debouncedCheck, false); - window.addEventListener('orientationchange', debouncedCheck, false); - if (window.MutationObserver) { - observer = new MutationObserver(debouncedCheck); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - attributes: true - }); - unobserveChanges = function () { - try { - observer.disconnect(); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - } catch (ignore) {} - }; - } - else { - document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); - unobserveChanges = function () { - document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - }; - } - }; - var xlinkNS = 'http://www.w3.org/1999/xlink'; - checkUseElems = function () { - var base, - bcr, - fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. - hash, - i, - Request, - inProgressCount = 0, - isHidden, - url, - uses, - xhr; - if (window.XMLHttpRequest) { - Request = new XMLHttpRequest(); - if (Request.withCredentials !== undefined) { - Request = XMLHttpRequest; - } - else { - Request = XDomainRequest \|\| undefined; - } - } - if (Request === undefined) { - return; - } - function observeIfDone() { - // If done with making changes, start watching for chagnes in DOM again - inProgressCount -= 1; - if (inProgressCount === 0) { // if all xhrs were resolved - observeChanges(); // watch for changes to DOM - } - } - function attrUpdateFunc(spec) { - return function () { - if (cache[spec.base] !== true) { - spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); - } - }; - } - function onloadFunc(xhr) { - return function () { - var body = document.body; - var x = document.createElement('x'); - var svg; - xhr.onload = null; - x.innerHTML = xhr.responseText; - svg = x.getElementsByTagName('svg')[0]; - if (svg) { - svg.setAttribute('aria-hidden', 'true'); - svg.style.position = 'absolute'; - svg.style.width = 0; - svg.style.height = 0; - svg.style.overflow = 'hidden'; - body.insertBefore(svg, body.firstChild); - } - observeIfDone(); - }; - } - function onErrorTimeout(xhr) { - return function () { - xhr.onerror = null; - xhr.ontimeout = null; - observeIfDone(); - }; - } - unobserveChanges(); // stop watching for changes to DOM - // find all use elements - uses = document.getElementsByTagName('use'); - for (i = 0; i < uses.length; i += 1) { - try { - bcr = uses[i].getBoundingClientRect(); - } catch (ignore) { - // failed to get bounding rectangle of the use element - bcr = false; - } - url = uses[i].getAttributeNS(xlinkNS, 'href').split('#'); - base = url[0]; - hash = url[1]; - isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; - if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { - // the use element is empty - // if there is a reference to an external SVG, try to fetch it - // use the optional fallback URL if there is no reference to an external SVG - if (fallback && !base.length && hash && !document.getElementById(hash)) { - base = fallback; - } - if (base.length) { - // schedule updating xlink:href - xhr = cache[base]; - if (xhr !== true) { - // true signifies that prepending the SVG was not required - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - if (xhr === undefined) { - xhr = new Request(); - cache[base] = xhr; - xhr.onload = onloadFunc(xhr); - xhr.onerror = onErrorTimeout(xhr); - xhr.ontimeout = onErrorTimeout(xhr); - xhr.open('GET', base); - xhr.send(); - inProgressCount += 1; - } - } - } - else { - if (!isHidden) { - if (cache[base] === undefined) { - // remember this URL if the use element was not empty and no request was sent - cache[base] = true; - } - else if (cache[base].onload) { - // if it turns out that prepending the SVG is not necessary, - // abort the in-progress xhr. - cache[base].abort(); - cache[base].onload = undefined; - cache[base] = true; - } - } - } - } - uses = ''; - inProgressCount += 1; - observeIfDone(); - }; -/ - // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. - window.addEventListener('load', function winLoad() { - window.removeEventListener('load', winLoad, false); // to prevent memory leaks - tid = setTimeout(checkUseElems, 0); - }, false); -/ + this.refreshControls(); }; AblePlayer.prototype.cuePlaylistItem = function(sourceIndex) { - // Move to a new item in a playlist. - // NOTE: Swapping source for audio description is handled elsewhere; - // see description.js > swapDescription() - - / - // Decided against preventing a reload of the current item in the playlist. - // If it's clickable, users should be able to click on it and expect something to happen. - // Leaving here though in case it's determined to be desirable. - if (sourceIndex === this.playlistItemIndex) { - // user has requested the item that's currently playing - // just ignore the request - return; - } - this.playlistItemIndex = sourceIndex; - / - var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, sources, s, i, $newSource, nowPlayingSpan; + var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, nowPlayingSpan; var thisObj = this; prevPlayer = this.player; - if (this.initializing) { // this is the first track - user hasn't pressed play yet - // do nothing. - } - else { - if (this.playerCreated) { - // remove the old + if (this.initializing) { + } else { + if (this.playerCreated) { this.deletePlayer('playlist'); } } - // set swappingSrc; needs to be true within recreatePlayer(), called below this.swappingSrc = true; - // if a new playlist item is being requested, and playback has already started, - // it should be ok to play automatically, regardless of how it was requested - if (this.startedPlaying) { - this.okToPlay = true; - } - else { - this.okToPlay = false; + if (this.startedPlaying) { + this.okToPlay = true; + } else { + this.okToPlay = false; } - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + this.loadingMedia = false; - // Determine appropriate player to play this media $newItem = this.$playlist.eq(sourceIndex); if (this.hasAttr($newItem,'data-youtube-id')) { this.youTubeId = this.getYouTubeId($newItem.attr('data-youtube-id')); @@ -6575,40 +4828,32 @@ var AblePlayerInstances = []; this.youTubeDescId = this.getYouTubeId($newItem.attr('data-youtube-desc-id')); } newPlayer = 'youtube'; - } - else if (this.hasAttr($newItem,'data-vimeo-id')) { + } else if (this.hasAttr($newItem,'data-vimeo-id')) { this.vimeoId = this.getVimeoId($newItem.attr('data-vimeo-id')); if (this.hasAttr($newItem,'data-vimeo-desc-id')) { this.vimeoDescId = this.getVimeoId($newItem.attr('data-vimeo-desc-id')); } newPlayer = 'vimeo'; - } - else { - newPlayer = 'html5'; + } else { + newPlayer = 'html5'; } if (newPlayer === 'youtube') { if (prevPlayer === 'html5') { - // pause and hide the previous media if (this.playing) { this.pauseMedia(); } this.$media.hide(); } - } - else { - // the new player is not youtube + } else { this.youTubeId = false; if (prevPlayer === 'youtube') { - // unhide the media element this.$media.show(); } } this.player = newPlayer; - // remove source and track elements from previous playlist item this.$media.empty(); - // transfer media attributes from playlist to media element if (this.hasAttr($newItem,'data-poster')) { this.$media.attr('poster',$newItem.attr('data-poster')); } @@ -6619,75 +4864,86 @@ var AblePlayerInstances = []; this.$media.attr('data-youtube-id',$newItem.attr('data-youtube-id')); } - // add new <source> elements from playlist data var $sourceSpans = $newItem.children('span.able-source'); if ($sourceSpans.length) { $sourceSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src')) { - // this is the only required attribute - var $newSource = $('<source>',{ - 'src': $(this).attr('data-src') - }); - if (thisObj.hasAttr($(this),'data-type')) { - $newSource.attr('type',$(this).attr('data-type')); - } - if (thisObj.hasAttr($(this),'data-desc-src')) { - $newSource.attr('data-desc-src',$(this).attr('data-desc-src')); - } - if (thisObj.hasAttr($(this),'data-sign-src')) { - $newSource.attr('data-sign-src',$(this).attr('data-sign-src')); + const $this = $(this); + + if (thisObj.hasAttr($this, "data-src")) { + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + + if (validate.isProtocolSafe(sanitizedSrc)) { + const $newSource = $("<source>", { src: sanitizedSrc }); + + const optionalAttributes = [ + "data-type", + "data-desc-src", + "data-sign-src", + ]; + + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + const attrValue = $this.attr(attr); + const sanitizedValue = DOMPurify.sanitize(attrValue); + + if (attr.endsWith("-src") && validate.isProtocolSafe(sanitizedValue)) { + $newSource.attr(attr, sanitizedValue); + } else if (!attr.endsWith("-src")) { + $newSource.attr(attr, sanitizedValue); + } + } + }); + + thisObj.$media.append($newSource); } - thisObj.$media.append($newSource); } }); } - // add new <track> elements from playlist data var $trackSpans = $newItem.children('span.able-track'); if ($trackSpans.length) { - // for each element in $trackSpans, create a new <track> element $trackSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src') && - thisObj.hasAttr($(this),'data-kind') && - thisObj.hasAttr($(this),'data-srclang')) { - // all required attributes are present - var $newTrack = $('<track>',{ - 'src': $(this).attr('data-src'), - 'kind': $(this).attr('data-kind'), - 'srclang': $(this).attr('data-srclang') - }); - if (thisObj.hasAttr($(this),'data-label')) { - $newTrack.attr('label',$(this).attr('data-label')); - } - if (thisObj.hasAttr($(this),'data-desc')) { - $newTrack.attr('data-desc',$(this).attr('data-desc')); + const $this = $(this); + if (thisObj.hasAttr($this, "data-src") && thisObj.hasAttr($this, "data-kind") && thisObj.hasAttr($this, "data-srclang")) { + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + if (validate.isProtocolSafe(sanitizedSrc)) { + const $newTrack = $("<track>", { + src: sanitizedSrc, + kind: $this.attr("data-kind"), + srclang: $this.attr("data-srclang"), + }); + const optionalAttributes = [ + "data-label", + "data-desc", + "data-default", + ]; + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + $newTrack.attr(attr, DOMPurify.sanitize($this.attr(attr))); + } + }); + thisObj.$media.append($newTrack); } - thisObj.$media.append($newTrack); } }); } - itemTitle = $newItem.text(); + itemTitle = DOMPurify.sanitize( $newItem.text() ); if (this.hasAttr($newItem,'lang')) { itemLang = $newItem.attr('lang'); } - // Update relevant arrays this.$sources = this.$media.find('source'); - // recreate player, informed by new attributes and track elements - if (this.recreatingPlayer) { - // stopgap to prevent multiple firings of recreatePlayer() - return; + if (this.recreatingPlayer) { + return; } - this.recreatePlayer().then(function() { + this.recreatePlayer().then(function() { - // update playlist to indicate which item is playing thisObj.$playlist.removeClass('able-current') .children('button').removeAttr('aria-current'); thisObj.$playlist.eq(sourceIndex).addClass('able-current') - .children('button').attr('aria-current','true'); - - // update Now Playing div + .children('button').attr('aria-current','true'); + if (thisObj.showNowPlaying === true) { if (typeof thisObj.$nowPlayingDiv !== 'undefined') { nowPlayingSpan = $('<span>'); @@ -6699,60 +4955,39 @@ var AblePlayerInstances = []; } } - // if thisObj.swappingSrc is true, media will autoplay when ready - if (thisObj.initializing) { // this is the first track - user hasn't pressed play yet + if (thisObj.initializing) { thisObj.swappingSrc = false; - } - else { + } else { if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } - } - else if (thisObj.player === 'youtube') { - thisObj.okToPlay = true; + } else if (thisObj.player === 'youtube') { + thisObj.okToPlay = true; } } thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed - }); + thisObj.playerCreated = true; + }); }; AblePlayer.prototype.deletePlayer = function(context) { - // remove player components that need to be rebuilt - // after swapping media sources that have different durations - // or explicitly declared data-desc attributes - // Context is one of the following: - // playlist - called from cuePlaylistItem() - // swap-desc-html - called from swapDescription with this.player == 'html' - // swap-desc-youtube - called from swapDescription with this.player == 'youtube' - // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' - if (this.player === 'youtube' && this.youTubePlayer) { - this.youTubePlayer.destroy(); + if (this.player === 'youtube' && this.youTubePlayer) { + this.youTubePlayer.destroy(); } - if (this.player === 'vimeo' && this.vimeoPlayer) { - this.vimeoPlayer.destroy(); + if (this.player === 'vimeo' && this.vimeoPlayer) { + this.vimeoPlayer.destroy(); } - -/ TODO - Investigate: when is this needed? - // remove previous video's attributes and child elements from media element - this.$media.removeAttr('poster width height'); - this.$media.empty(); -/ - // Empty elements that will be rebuilt this.$controllerDiv.empty(); - // this.$statusBarDiv.empty(); - // this.$timer.empty(); - this.$elapsedTimeContainer.empty().text('0:00'); // span.able-elapsedTime - this.$durationContainer.empty(); // span.able-duration - - // Remove popup windows and modal dialogs; these too will be rebuilt + this.$elapsedTimeContainer.empty().text('0:00'); + this.$durationContainer.empty(); + if (this.$signWindow) { this.$signWindow.remove(); } @@ -6760,159 +4995,93 @@ var AblePlayerInstances = []; this.$transcriptArea.remove(); } $('.able-modal-dialog').remove(); - - // Remove caption and description wrappers + if (this.$captionsWrapper) { this.$captionsWrapper.remove(); } - if (this.$descDiv) { - this.$descDiv.remove(); + if (this.$descDiv) { + this.$descDiv.remove(); } - - // reset key variables + this.hasCaptions = false; this.hasChapters = false; - this.hasDescTracks = false; + this.hasDescTracks = false; this.hasOpenDesc = false; - this.hasClosedDesc = false; + this.hasClosedDesc = false; this.captionsPopup = null; this.chaptersPopup = null; this.transcriptType = null; - this.playerDeleted = true; // will reset to false in recreatePlayer() + this.playerDeleted = true; }; AblePlayer.prototype.getButtonTitle = function(control) { if (control === 'playpause') { - return this.tt.play; - } - else if (control === 'play') { - return this.tt.play; - } - else if (control === 'pause') { - return this.tt.pause; - } - else if (control === 'restart') { - return this.tt.restart; - } - else if (control === 'previous') { - return this.tt.prevTrack; - } - else if (control === 'next') { - return this.tt.nextTrack; - } - else if (control === 'rewind') { - return this.tt.rewind; - } - else if (control === 'forward') { - return this.tt.forward; - } - else if (control === 'captions') { + return this.translate( 'play', 'Play' ); + } else if (control === 'play') { + return this.translate( 'play', 'Play' ); + } else if (control === 'pause') { + return this.translate( 'pause', 'Pause' ); + } else if (control === 'restart') { + return this.translate( 'restart', 'Restart' ); + } else if (control === 'previous') { + return this.translate( 'prevTrack', 'Previous track' ); + } else if (control === 'next') { + return this.translate( 'nextTrack', 'Next track' ); + } else if (control === 'rewind') { + return this.translate( 'rewind', 'Rewind' ); + } else if (control === 'forward') { + return this.translate( 'forward', 'Forward' ); + } else if (control === 'captions') { if (this.captions.length > 1) { - return this.tt.captions; - } - else { - if (this.captionsOn) { - return this.tt.hideCaptions; - } - else { - return this.tt.showCaptions; - } - } - } - else if (control === 'descriptions') { - if (this.descOn) { - return this.tt.turnOffDescriptions; - } - else { - return this.tt.turnOnDescriptions; - } - } - else if (control === 'transcript') { - if (this.$transcriptDiv.is(':visible')) { - return this.tt.hideTranscript; - } - else { - return this.tt.showTranscript; - } - } - else if (control === 'chapters') { - return this.tt.chapters; - } - else if (control === 'sign') { - return this.tt.sign; - } - else if (control === 'volume') { - return this.tt.volume; - } - else if (control === 'faster') { - return this.tt.faster; - } - else if (control === 'slower') { - return this.tt.slower; - } - else if (control === 'preferences') { - return this.tt.preferences; - } - else if (control === 'help') { - // return this.tt.help; - } - else if (control === 'fullscreen') { - if (!this.fullscreen) { - return this.tt.enterFullscreen; - } - else { - return this.tt.exitFullscreen; - } - } - else { - // there should be no other controls, but just in case: - // return the name of the control with first letter in upper case - // ultimately will need to get a translated label from this.tt - if (this.debug) { - - } - return control.charAt(0).toUpperCase() + control.slice(1); + return this.translate( 'captions', 'Captions' ); + } else { + return (this.captionsOn) ? this.translate( 'hideCaptions', 'Hide captions' ) : this.translate( 'showCaptions', 'Show captions' ); + } + } else if (control === 'descriptions') { + return (this.descOn) ? this.translate( 'turnOffDescriptions', 'Turn off descriptions' ) : this.translate( 'turnOnDescriptions', 'Turn on descriptions' ); + } else if (control === 'transcript') { + return (this.$transcriptDiv.is(':visible')) ? this.translate( 'hideTranscript', 'Hide transcript' ) : this.translate( 'showTranscript', 'Show transcript' ); + } else if (control === 'chapters') { + return this.translate( 'chapters', 'Chapters' ); + } else if (control === 'sign') { + return this.translate( 'sign', 'Sign language' ); + } else if (control === 'volume') { + return this.translate( 'volume', 'Volume' ); + } else if (control === 'faster') { + return this.translate( 'faster', 'Faster' ); + } else if (control === 'slower') { + return this.translate( 'slower', 'Slower' ); + } else if (control === 'preferences') { + return this.translate( 'preferences', 'Preferences' ); + } else if (control === 'fullscreen') { + return ( !this.fullscreen ) ? this.translate( 'enterFullScreen', 'Enter full screen' ) : this.translate( 'exitFullScreen', 'Exit full screen' ); + } else { + if (this.debug) { + + } + return this.capitalizeFirstLetter( control ); } }; - - })(jQuery); -/* - * @file validate.js - * @description This file contains the code to validate the VTT data. - / -/* PRE-SANITIZED FUNCTIONS - * Some of the VTT attributes need to be transformed before being sanitized by DOMPurify. - * @namespace preProcessing - / var preProcessing = { - /* - * Transforms tags with class names separated by dots into tags with a class attribute containing space-separated class names. - * @memberof preProcessing - * @param {string} vttContent - The content of the VTT. - * @returns {string} - The VTT content with processed tags. - / transformCSSClasses: function (vttContent) { + if ( vttContent.length > 1000 ) { + throw new Error( "Input too long" ); + } return vttContent.replace( /<(v\|c\|b\|i\|u\|lang\|ruby)\.([\w\.]+)([^>])>/g, function (_, tag, cssClasses, otherAttrs) { - var classAttr = cssClasses.split(".").join(" "); - return "<" + tag + ' class="' + classAttr + '"' + otherAttrs + ">"; + var classAttr = cssClasses.replace(/\./g, " "); + return `<${tag} class="${classAttr}"${otherAttrs}>`; } ); }, - /** - * Transforms <lang> tags by adding a lang attribute with the language code. - * @memberof preProcessing - * @param {string} content - The content with processed CSS classes. - * @returns {string} - The content with <lang> tags transformed. - / transformLangTags: function (content) { return content.replace( /<lang\s+([\w-]+)([^>])>/g, @@ -6922,12 +5091,6 @@ var preProcessing = { ); }, - /** - * Transforms <v> tags by adding a title attribute with the concatenated text and retaining other attributes. - * @memberof preProcessing - * @param {string} content - The content with processed <lang> tags. - * @returns {string} - The content with <v> tags transformed. - / transformVTags: function (content) { return content.replace(/<v\s+([^>]?)>/g, function (_, tagAttributes) { var classMatch = tagAttributes.match(/class="([^"])"/); @@ -6940,7 +5103,6 @@ var preProcessing = { var attributes = []; var titleParts = []; - // Iterate over each token of the tag content nonClassAttributes.forEach(function (token) { if (token.indexOf("=") !== -1) { attributes.push(token); @@ -6970,49 +5132,30 @@ var preProcessing = { }, }; -/* POST-SANITIZED FUNCTIONS - * After sanitizing the VTT data, some tags need to be transformed back to their original form. - * @namespace postProcessing - / var postProcessing = { - /* - * Post-processes <c> tags by converting class attributes to dot-separated class names. - * @memberof postProcessing - * @param {string} vttContent - The VTT content to be processed. - * @returns {string} - The VTT content with processed <c> tags. - / postprocessCTag: function (vttContent) { return vttContent.replace( /<c class="([\w\s]+)">/g, function (_, classNames) { - var classes = classNames.split(" ").join("."); + var classes = classNames.replace(/ /g, "."); return "<c." + classes + ">"; } ); }, - /* - * Post-processes <v> tags by converting class attributes to dot-separated class names. - * @memberof postProcessing - * @param {string} vttContent - The VTT content to be processed. - * @returns {string} - The VTT content with processed <v> tags. - / postprocessVTag: function (vttContent) { return vttContent.replace( - /<v class="([\w\s]+)"([^>])>/g, - function (_, classNames, otherAttrs) { - var classes = classNames.split(" ").join("."); - return "<v." + classes + otherAttrs + ">"; + /<v([^>])class="([\w\s]+)"([^>])>/g, + function (_, beforeClass, classNames, afterClass) { + var classes = classNames.trim().split(/\s+/).join("."); + var attrs = (beforeClass + afterClass) + .replace(/\sclass="[\w\s]+"/, "") + .trim(); + return "<v." + classes + (attrs ? " " + attrs : "") + ">"; } ); }, - /* - * Post-processes <lang> tags by removing the lang attribute and placing the language code directly in the tag. - * @memberof postProcessing - * @param {string} vttContent - The VTT content to be processed. - * @returns {string} - The VTT content with processed <lang> tags. - / postprocessLangTag: function (vttContent) { return vttContent.replace( /<lang lang="([\w-]+)"([^>])>/g, @@ -7023,18 +5166,7 @@ var postProcessing = { }, }; -/** - * Preprocesses, sanitizes and post-processes VTT content. - * @namespace validate - / var validate = { - /* - * Sets up the VTT content before sanitizing by transforming tags. - * This way DOM purify will process the tags correctly. - * @memberof validate - * @param {string} vttContent - The original content of the VTT. - * @returns {string} - The VTT content for the next and final step of preprocessing. - / preProcessVttContent: function (vttContent) { var processedCSS = preProcessing.transformCSSClasses(vttContent); var processedLang = preProcessing.transformLangTags(processedCSS); @@ -7042,21 +5174,15 @@ var validate = { return processedVTags; }, - /* - * Post-processes the sanitized VTT data by converting class attributes to dot-separated class names and other transformations. - * @memberof validate - * @param {string} sanitizedVttContent - The sanitized VTT content to be post-processed. - * @param {string} originalVttContent - The original VTT content before sanitization. - * @returns {string} - The post-processed VTT content. - / postProcessVttContent: function (sanitizedVttContent, originalVttContent) { var processedCTags = postProcessing.postprocessCTag(sanitizedVttContent); var processedVTags = postProcessing.postprocessVTag(processedCTags); var processedLangTags = postProcessing.postprocessLangTag(processedVTags); var arrowReplaced = processedLangTags.replace(/-->/g, "-->"); + var timestampTagReplaced = arrowReplaced.replace(/<([\d:.]+)>/g, '<$1>'); - var finalContent = arrowReplaced.replace( + var finalContent = timestampTagReplaced.replace( /<\/v>/g, function (match, offset) { return originalVttContent.indexOf(match, offset) !== -1 ? match : ""; @@ -7066,12 +5192,6 @@ var validate = { return finalContent; }, - /* - * Sanitizes the VTT data by removing unwanted tags and attributes, and then post-processes it. - * @memberof validate - * @param {string} vttContent - The VTT content to be sanitized and post-processed. - * @returns {string} - The fully processed VTT content. - / sanitizeVttContent: function (vttContent) { if (vttContent === null \|\| vttContent === undefined) { return ""; @@ -7091,48 +5211,39 @@ var validate = { return validate.postProcessVttContent(sanitizedVttContent, vttContent); }, + isProtocolSafe: function (url) { + try { + const parsedUrl = new URL(url, window.location.origin); + return ["http:", "https:"].includes(parsedUrl.protocol); + } catch (e) { + return false; + } + }, }; -// Export the object for use in other files if (typeof module !== "undefined" && module.exports) { module.exports = validate; } -// End of validate.js (function ($) { - // Loads files referenced in track elements, and performs appropriate setup. - // For example, captions and text descriptions. - // This will be called whenever the player is recreated. - // Added in v2.2.23: Also handles YouTube caption tracks AblePlayer.prototype.setupTracks = function () { - var thisObj, - deferred, - promise, - loadingPromises, - loadingPromise, - i, - tracks, - track, - kind; + var thisObj, deferred, promise, loadingPromises, loadingPromise, i, tracks, track, kind; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); loadingPromises = []; if ($("#able-vts").length) { - // Page includes a container for a VTS instance this.vtsTracks = []; this.hasVts = true; } else { this.hasVts = false; } - // Source array for populating the above arrays - // varies, depending on whether there are dedicated description tracks if (this.hasDescTracks && this.descOn) { tracks = this.altTracks; } else { @@ -7140,56 +5251,48 @@ if (typeof module !== "undefined" && module.exports) { } for (i = 0; i < tracks.length; i++) { track = tracks[i]; - kind = track.kind; + kind = ( track.kind ) ? track.kind : 'subtitles'; if (!track.src) { if (thisObj.usingYouTubeCaptions \|\| thisObj.usingVimeoCaptions) { - // skip all the hullabaloo and go straight to setupCaptions thisObj.setupCaptions(track); - } else { - // Nothing to load! - // Skip this track; move on to next i } continue; } - var trackSrc = track.src; - loadingPromise = this.loadTextObject(track.src); // resolves with src, trackText + var trackSrc = track.src; + loadingPromise = this.loadTextObject(trackSrc); loadingPromises.push( loadingPromise.catch(function (src) { - - }) + + }) ); loadingPromise.then( (function (track, kind) { - var trackSrc = track.src; + trackSrc = track.src; var trackLang = track.language; var trackLabel = track.label; var trackDesc = track.desc; - return function (trackSrc, trackText) { - // these are the two vars returned from loadTextObject - - var trackContents = trackText; - var cues = thisObj.parseWebVTT(trackSrc, trackContents).cues; + return function (data) { + var cues = thisObj.parseWebVTT(data).cues; if (thisObj.hasVts) { - // setupVtsTracks() is in vts.js thisObj.setupVtsTracks( kind, trackLang, trackDesc, trackLabel, trackSrc, - trackContents + data.text ); } - if (kind === "captions" \|\| kind === "subtitles") { + if (kind === 'captions' \|\| kind === 'subtitles') { thisObj.setupCaptions(track, cues); - } else if (kind === "descriptions") { + } else if (kind === 'descriptions') { thisObj.setupDescriptions(track, cues); - } else if (kind === "chapters") { + } else if (kind === 'chapters') { thisObj.setupChapters(track, cues); - } else if (kind === "metadata") { - thisObj.setupMetadata(track, cues); + } else if (kind === 'metadata') { + thisObj.setupMetadata(cues); } }; })(track, kind) @@ -7206,89 +5309,58 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.getTracks = function () { - // define an array tracks with the following structure: - // kind - string, e.g. "captions", "descriptions" - // src - string, URL of WebVTT source file - // language - string, lang code - // label - string to display, e.g., in CC menu - // def - Boolean, true if this is the default track - // cues - array with startTime, endTime, and payload - // desc - Boolean, true if track includes a data-desc attribute - var thisObj, - deferred, - promise, - captionTracks, - altCaptionTracks, - trackLang, - trackLabel, - isDefault, - forDesc, - hasDefault, - hasTrackInDefLang, - trackFound, - i, - j, - capLabel, - inserted; + var thisObj, deferred, promise, trackLang, trackLabel, isDefault, forDesc, + hasDefault, hasTrackInDefLang, trackFound, i; thisObj = this; hasDefault = false; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.$tracks = this.$media.find("track"); - this.tracks = []; // only includes tracks that do NOT have data-desc - this.altTracks = []; // only includes tracks that DO have data-desc + this.$tracks = this.$media.find('track'); + this.tracks = []; + this.altTracks = []; - // Arrays for each kind, to be populated later this.captions = []; this.descriptions = []; this.chapters = []; this.meta = []; - this.hasCaptionsTrack = false; // will change to true if one or more tracks has kind="captions" - this.hasDescTracks = false; // will change to true if one or more tracks has data-desc + this.hasCaptionsTrack = false; + this.hasDescTracks = false; if (this.$tracks.length) { this.usingYouTubeCaptions = false; - // create object from HTML5 tracks this.$tracks.each(function (index, element) { - if ($(this).attr("kind") === "captions") { + if ($(this).attr('kind') === 'captions') { thisObj.hasCaptionsTrack = true; - } else if ($(this).attr("kind") === "descriptions") { + } else if ($(this).attr('kind') === 'descriptions') { thisObj.hasClosedDesc = true; } - // srcLang should always be included with <track>, but HTML5 spec doesn't require it - // if not provided, assume track is the same language as the default player language - if ($(this).attr("srclang")) { - trackLang = $(this).attr("srclang"); + if ($(this).attr('srclang')) { + trackLang = $(this).attr('srclang'); } else { trackLang = thisObj.lang; } - if ($(this).attr("label")) { - trackLabel = $(this).attr("label"); + if ($(this).attr('label')) { + trackLabel = $(this).attr('label'); } else { trackLabel = thisObj.getLanguageName(trackLang); } - if (typeof $(this).attr("default") !== "undefined" && !hasDefault) { + if (typeof $(this).attr('default') !== 'undefined' && !hasDefault) { isDefault = true; hasDefault = true; } else if (trackLang === thisObj.lang) { - // this track is in the default lang of the player - // save this for later - // if there is no other default track specified - // this will be the default hasTrackInDefLang = true; - isDefault = false; // for now; this could change if there's no default attribute + isDefault = false; } else { isDefault = false; } if (isDefault) { - // this.captionLang will also be the default language for non-caption tracks thisObj.captionLang = trackLang; } @@ -7300,8 +5372,8 @@ if (typeof module !== "undefined" && module.exports) { } if (forDesc) { thisObj.altTracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -7309,8 +5381,8 @@ if (typeof module !== "undefined" && module.exports) { }); } else { thisObj.tracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -7319,38 +5391,30 @@ if (typeof module !== "undefined" && module.exports) { } if (index == thisObj.$tracks.length - 1) { - // This is the last track. if (!hasDefault) { if (hasTrackInDefLang) { thisObj.captionLang = thisObj.lang; trackFound = false; i = 0; while (i < thisObj.tracks.length && !trackFound) { - if (thisObj.tracks[i]["language"] === thisObj.lang) { - thisObj.tracks[i]["def"] = true; + if (thisObj.tracks[i]['language'] === thisObj.lang) { + thisObj.tracks[i]['def'] = true; trackFound = true; } i++; } } else { - // use the first track - thisObj.tracks[0]["def"] = true; - thisObj.captionLang = thisObj.tracks[0]["language"]; + thisObj.tracks[0]['def'] = true; + thisObj.captionLang = thisObj.tracks[0]['language']; } } - // Remove 'default' attribute from all <track> elements - // This data has already been saved to this.tracks - // and some browsers will display the default captions, - // despite all standard efforts to suppress them thisObj.$media.find("track").removeAttr("default"); } }); } if (!this.$tracks.length \|\| !this.hasCaptionsTrack) { - // this media has no track elements - // if this is a youtube or vimeo player, check there for captions/subtitles - if (this.player === "youtube") { - this.getYouTubeCaptionTracks(this.youTubeId).then(function () { + if (this.player === 'youtube') { + this.getYouTubeCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingYouTubeCaptions = true; if (thisObj.$captionsWrapper) { @@ -7359,7 +5423,7 @@ if (typeof module !== "undefined" && module.exports) { } deferred.resolve(); }); - } else if (this.player === "vimeo") { + } else if (this.player === 'vimeo') { this.getVimeoCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingVimeoCaptions = true; @@ -7370,8 +5434,6 @@ if (typeof module !== "undefined" && module.exports) { deferred.resolve(); }); } else { - // this is neither YouTube nor Vimeo - // there just ain't no tracks (captions or otherwise) this.hasCaptions = false; if (thisObj.$captionsWrapper) { thisObj.$captionsWrapper.remove(); @@ -7379,30 +5441,21 @@ if (typeof module !== "undefined" && module.exports) { deferred.resolve(); } } else { - // there is at least one track with kind="captions" deferred.resolve(); } return promise; }; AblePlayer.prototype.setupCaptions = function (track, cues) { - // Setup player for display of captions (one track at a time) - var thisObj, captions, inserted, i, capLabel; + var inserted, i, capLabel; - // Insert track into captions array - // in its proper alphabetical sequence by label if (typeof cues === "undefined") { cues = null; } if (this.usingYouTubeCaptions \|\| this.usingVimeoCaptions) { - // this.captions has already been populated - // For YouTube, this happens in youtube.js > getYouTubeCaptionTracks() - // For VImeo, this happens in vimeo.js > getVimeoCaptionTracks() - // So, nothing to do here... } else { if (this.captions.length === 0) { - // this is the first this.captions.push({ language: track.language, label: track.label, @@ -7410,12 +5463,10 @@ if (typeof module !== "undefined" && module.exports) { cues: cues, }); } else { - // there are already captions in the array inserted = false; for (i = 0; i < this.captions.length; i++) { capLabel = track.label; if (capLabel.toLowerCase() < this.captions[i].label.toLowerCase()) { - // insert before track i this.captions.splice(i, 0, { language: track.language, label: track.label, @@ -7427,7 +5478,6 @@ if (typeof module !== "undefined" && module.exports) { } } if (!inserted) { - // just add track to the end this.captions.push({ language: track.language, label: track.label, @@ -7438,7 +5488,6 @@ if (typeof module !== "undefined" && module.exports) { } } - // there are captions available this.hasCaptions = true; this.currentCaption = -1; if (this.prefCaptions === 1) { @@ -7446,15 +5495,14 @@ if (typeof module !== "undefined" && module.exports) { } else if (this.prefCaptions === 0) { this.captionsOn = false; } else { - // user has no prefs. Use default state. if (this.defaultStateCaptions === 1) { this.captionsOn = true; } else { this.captionsOn = false; } } - if (this.mediaType === "audio" && this.captionsOn) { - this.$captionsContainer.removeClass("captions-off"); + if (this.mediaType === 'audio' && this.captionsOn) { + this.$captionsContainer.removeClass('captions-off'); } if ( @@ -7462,19 +5510,17 @@ if (typeof module !== "undefined" && module.exports) { (this.$captionsWrapper && !$.contains(this.$ableDiv[0], this.$captionsWrapper[0])) ) { - // captionsWrapper either doesn't exist, or exists in an orphaned state - // Either way, it needs to be rebuilt... - this.$captionsDiv = $("<div>", { + this.$captionsDiv = $('<div>', { class: "able-captions", }); - this.$captionsWrapper = $("<div>", { - class: "able-captions-wrapper", - "aria-hidden": "true", + this.$captionsWrapper = $('<div>', { + class: 'able-captions-wrapper', + 'aria-hidden': 'true', }).hide(); - if (this.prefCaptionsPosition === "below") { - this.$captionsWrapper.addClass("able-captions-below"); + if (this.prefCaptionsPosition === 'below') { + this.$captionsWrapper.addClass('able-captions-below'); } else { - this.$captionsWrapper.addClass("able-captions-overlay"); + this.$captionsWrapper.addClass('able-captions-overlay'); } this.$captionsWrapper.append(this.$captionsDiv); this.$captionsContainer.append(this.$captionsWrapper); @@ -7482,9 +5528,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.setupDescriptions = function (track, cues) { - // called via setupTracks() only if there is track with kind="descriptions" - // prepares for delivery of text description , in case it's needed - // whether and how it's delivered is controlled within description.js > initDescription() this.hasClosedDesc = true; this.currentDescription = -1; @@ -7495,8 +5538,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.setupChapters = function (track, cues) { - // NOTE: WebVTT supports nested timestamps (to form an outline) - // This is not currently supported. this.hasChapters = true; this.chapters.push({ @@ -7505,19 +5546,16 @@ if (typeof module !== "undefined" && module.exports) { }); }; - AblePlayer.prototype.setupMetadata = function (track, cues, trackDesc) { - if (this.metaType === "text") { - // Metadata is only supported if data-meta-div is provided - // The player does not display metadata internally + AblePlayer.prototype.setupMetadata = function (cues) { + if (this.metaType === 'text') { if (this.metaDiv) { - if ($("#" + this.metaDiv)) { - // container exists - this.$metaDiv = $("#" + this.metaDiv); + if ($('#' + this.metaDiv)) { + this.$metaDiv = $('#' + this.metaDiv); this.hasMeta = true; this.meta = cues; } } - } else if (this.metaType === "selector") { + } else if (this.metaType === 'selector') { this.hasMeta = true; this.visibleSelectors = []; this.meta = cues; @@ -7525,89 +5563,71 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.loadTextObject = function (src) { - // TODO: Incorporate the following function, moved from setupTracks() - // convert XML/TTML captions file - / - if (thisObj.useTtml && (trackSrc.endsWith('.xml') \|\| trackText.startsWith('<?xml'))) { - trackContents = thisObj.ttml2webvtt(trackText); - } - / var deferred, promise, thisObj, $tempDiv; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - // create a temp div for holding data - $tempDiv = $("<div>", { - style: "display:none", + $tempDiv = $('<div>', { + style: 'display:none', }); - // Fetch the content manually so it can be sanitized - $.ajax({ - url: src, - dataType: "text", - success: function (data) { - // Sanitize the fetched content - var sanitizedTrackText = validate.sanitizeVttContent(data); + fetch(src) + .then( response => { - // Load the sanitized content into the $tempDiv - $tempDiv.html(sanitizedTrackText); + return response.text(); + }) + .then( vtt => { + var preParsed = vtt.split(/\r?\n\s\r?\n/); + var lines = '', line; - // Resolve the promise with the sanitized content - deferred.resolve(src, sanitizedTrackText); + preParsed.forEach((l) => { + line = validate.sanitizeVttContent(l); + lines += line + "\n\n"; + }); + $tempDiv.html(lines); + let data = { 'src': src, 'text': lines }; + deferred.resolve(data); + $tempDiv.remove(); + }) + .catch( error => { + if (thisObj.debug) { - $tempDiv.remove(); - }, - error: function (req, status, error) { - if (thisObj.debug) { - - } - deferred.reject(src); - $tempDiv.remove(); - }, - }); + } + deferred.reject(src); + $tempDiv.remove(); + }); return promise; }; })(jQuery); - (function ($) { + AblePlayer.prototype.initYouTubePlayer = function () { - var thisObj, deferred, promise, youTubeId, googleApiPromise, json; + var thisObj, deferred, promise, youTubeId; thisObj = this; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.youTubePlayerReady = false; + this.youTubePlayerReady = false; + + youTubeId = (this.youTubeDescId && this.prefDesc) ? this.youTubeDescId : this.youTubeId; - // if a described version is available && user prefers desription - // init player using the described version - if (this.youTubeDescId && this.prefDesc) { - youTubeId = this.youTubeDescId; - } - else { - youTubeId = this.youTubeId; - } this.activeYouTubeId = youTubeId; if (AblePlayer.youTubeIframeAPIReady) { - // Script already loaded and ready. thisObj.finalizeYoutubeInit().then(function() { deferred.resolve(); }); - } - else { - // Has another player already started loading the script? If so, abort... + } else { if (!AblePlayer.loadingYouTubeIframeAPI) { - $.getScript('https://www.youtube.com/iframe_api').fail(function () { - deferred.fail(); - }); + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + + }); } - // Otherwise, keeping waiting for script load event... $('body').on('youTubeIframeAPIReady', function () { thisObj.finalizeYoutubeInit().then(function() { deferred.resolve(); @@ -7619,110 +5639,86 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.finalizeYoutubeInit = function () { - // This is called once we're sure the Youtube iFrame API is loaded -- see above - - var deferred, promise, thisObj, containerId, ccLoadPolicy, videoDimensions, autoplay; + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - thisObj = this; - containerId = this.mediaId + '_youtube'; this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // NOTE: Tried the following in place of the above in January 2016 - // because in some cases two videos were being added to the DOM - // However, once v2.2.23 was fairly stable, unable to reproduce that problem - // so maybe it's not an issue. This is preserved here temporarily, just in case it's needed... - // thisObj.$mediaContainer.html($('<div>').attr('id', containerId)); - - // cc_load_policy: - // 0 - show captions depending on user's preference on YouTube - // 1 - show captions by default, even if the user has turned them off - // IMPORTANT: This must be set to 1 or some browsers - // fail to load any texttracks (observed in Chrome, not in Firefox) - ccLoadPolicy = 1; - if (this.okToPlay) { - autoplay = 1; - } - else { - autoplay = 0; - } + ccLoadPolicy = 1; + autoplay = (this.okToPlay) ? 1 : 0; - // Documentation https://developers.google.com/youtube/player_parameters - if (typeof this.captionLang == 'undefined') { - // init using the default player lang - this.captionLang = this.lang; + if (typeof this.captionLang == 'undefined') { + this.captionLang = this.lang; } this.youTubePlayer = new YT.Player(containerId, { videoId: this.activeYouTubeId, host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', playerVars: { autoplay: autoplay, + cc_lang_pref: this.captionLang, + cc_load_policy: ccLoadPolicy, + controls: 0, + disableKb: 1, enablejsapi: 1, - disableKb: 1, // disable keyboard shortcuts, using our own + hl: this.lang, + iv_load_policy: 3, + origin: window.location.origin, playsinline: this.playsInline, - start: this.startTime, - controls: 0, // no controls, using our own - cc_load_policy: ccLoadPolicy, - cc_lang_pref: this.captionLang, // set the caption language - hl: this.lang, // set the UI language to match Able Player - modestbranding: 1, // no YouTube logo in controller - rel: 0, // when video ends, show only related videos from same channel (1 shows any) - iv_load_policy: 3 // do not show video annotations + rel: 0, + start: this.startTime }, events: { onReady: function () { - thisObj.youTubePlayerReady = true; - if (!thisObj.playerWidth \|\| !thisObj.playerHeight) { + thisObj.youTubePlayerReady = true; + if (!thisObj.playerWidth \|\| !thisObj.playerHeight) { thisObj.getYouTubeDimensions(); } - if (thisObj.playerWidth && thisObj.playerHeight) { + if (thisObj.playerWidth && thisObj.playerHeight) { thisObj.youTubePlayer.setSize(thisObj.playerWidth,thisObj.playerHeight); - thisObj.$ableWrapper.css({ - 'width': thisObj.playerWidth + 'px' - }); } if (thisObj.swappingSrc) { - // swap is now complete thisObj.swappingSrc = false; thisObj.restoreFocus(); thisObj.cueingPlaylistItem = false; if (thisObj.playing \|\| thisObj.okToPlay) { - // resume playing thisObj.playMedia(); } } if (thisObj.userClickedPlaylist) { - thisObj.userClickedPlaylist = false; // reset + thisObj.userClickedPlaylist = false; } - if (thisObj.recreatingPlayer) { - thisObj.recreatingPlayer = false; // reset + if (thisObj.recreatingPlayer) { + thisObj.recreatingPlayer = false; } deferred.resolve(); }, onError: function (x) { - deferred.fail(); + deferred.reject(); }, - onStateChange: function (x) { + onStateChange: function (x) { thisObj.getPlayerState().then(function(playerState) { - // values of playerState: 'playing','paused','buffering','ended' if (playerState === 'playing') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.play(true); + } thisObj.playing = true; thisObj.startedPlaying = true; thisObj.paused = false; - } - else if (playerState == 'ended') { + } else if (playerState == 'ended') { thisObj.onMediaComplete(); - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } if (thisObj.stoppingYouTube && playerState === 'paused') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.pause(true); + } if (typeof thisObj.$posterImg !== 'undefined') { thisObj.$posterImg.show(); } @@ -7732,103 +5728,68 @@ if (typeof module !== "undefined" && module.exports) { thisObj.paused = true; } }); - // If caption tracks are hosted locally, but are also available on YouTube, - // we need to turn them off on YouTube or there will be redundant captions - // This is the most reliable event on which to unload the caption module - if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { - if (thisObj.youTubePlayer.getOptions('captions')) { + if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { + if (thisObj.youTubePlayer.getOptions('captions')) { thisObj.youTubePlayer.unloadModule('captions'); } - } + } + }, + onApiChange: function() { + thisObj.duration = thisObj.youTubePlayer.getDuration(); }, onPlaybackQualityChange: function () { - // do something }, } }); if (!this.hasPlaylist) { - // remove the media element, since YouTube replaces that with its own element in an iframe - // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() this.$media.remove(); - } + } return promise; }; AblePlayer.prototype.getYouTubeDimensions = function (youTubeContainerId) { - // The YouTube iframe API does not have a getSize() of equivalent method - // so, need to get dimensions from YouTube's iframe - - var $iframe, width, height; + var $iframe, width, height; - $iframe = this.$ableWrapper.find('iframe'); + $iframe = this.$ableWrapper.find('iframe'); if (typeof $iframe !== 'undefined') { - if ($iframe.prop('width')) { - width = $iframe.prop('width'); - if ($iframe.prop('height')) { + if ($iframe.prop('width')) { + width = $iframe.prop('width'); + if ($iframe.prop('height')) { height = $iframe.prop('height'); - this.resizePlayer(width,height); + this.resizePlayer(width,height); } } } }; - AblePlayer.prototype.getYouTubeCaptionTracks = function (youTubeId) { + AblePlayer.prototype.getYouTubeCaptionTracks = function () { - // get data via YouTube IFrame Player API, and push data to this.tracks & this.captions - // NOTE: Caption tracks are not available through the IFrame Player API - // until AFTER the video has started playing. - // Therefore, this function plays the video briefly in order to load the captions module - // then stops the video and collects the data needed to build the cc menu - // This is stupid, but seemingly unavoidable. - // Caption tracks could be obtained through the YouTube Data API - // but this required authors to have a Google API key, - // which would complicate Able Player installation - - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - - var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack; + var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack, apiTriggered = false; thisObj = this; - - if (!this.youTubePlayer.getOption('captions','tracklist')) { - - // no tracks were found, probably because the captions module hasn't loaded - // play video briefly (required in order to load the captions module) - // and after the apiChange event is triggered, try again to retreive tracks - this.youTubePlayer.addEventListener('onApiChange',function(x) { - - // getDuration() also requires video to play briefly - // so, let's set that while we're here - thisObj.duration = thisObj.youTubePlayer.getDuration(); - - if (thisObj.loadingYouTubeCaptions) { - // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once - ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); - if (!thisObj.okToPlay) { - // Don't stopVideo() - that cancels loading - // Just pause - // No need to seekTo(0) - so little time has passed it isn't noticeable to the user - thisObj.youTubePlayer.pauseVideo(); + if (!this.youTubePlayer.getOption('captions','tracklist') ) { + this.youTubePlayer.addEventListener('onApiChange',function() { + apiTriggered = true; + thisObj.duration = thisObj.youTubePlayer.getDuration(); + + if (thisObj.loadingYouTubeCaptions) { + ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); + if ( ! thisObj.okToPlay ) { + thisObj.youTubePlayer.pauseVideo(); } - if (ytTracks && ytTracks.length) { - // Step through ytTracks and add them to global tracks array - // Note: Unlike YouTube Data API, the IFrame Player API only returns - // tracks that are published, and does NOT include ASR captions - // So, no additional filtering is required + if (ytTracks && ytTracks.length) { for (i=0; i < ytTracks.length; i++) { - trackLang = ytTracks[i].languageCode; - trackLabel = ytTracks[i].languageName; // displayName and languageName seem to always have the same value - isDefaultTrack = false; - if (typeof thisObj.captionLang !== 'undefined') { - if (trackLang === thisObj.captionLang) { - isDefaultTrack = true; - } - } - else if (typeof thisObj.lang !== 'undefined') { + trackLang = ytTracks[i].languageCode; + trackLabel = ytTracks[i].languageName; + isDefaultTrack = false; + if (typeof thisObj.captionLang !== 'undefined' && (trackLang === thisObj.captionLang) ) { + isDefaultTrack = true; + } else if (typeof thisObj.lang !== 'undefined') { if (trackLang === thisObj.lang) { - isDefaultTrack = true; + isDefaultTrack = true; } } thisObj.tracks.push({ @@ -7842,103 +5803,73 @@ if (typeof module !== "undefined" && module.exports) { 'label': trackLabel, 'def': isDefaultTrack, 'cues': null - }); + }); } thisObj.hasCaptions = true; - // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - } - else { - // there are no YouTube captions - thisObj.usingYouTubeCaptions = false; + thisObj.setupPopups('captions'); + } else { + thisObj.usingYouTubeCaptions = false; thisObj.hasCaptions = false; } - thisObj.loadingYouTubeCaptions = false; - if (thisObj.okToPlay) { + thisObj.loadingYouTubeCaptions = false; + if (thisObj.okToPlay) { thisObj.youTubePlayer.playVideo(); } } - if (thisObj.captionLangPending) { - // user selected a new caption language prior to playback starting - // set it now + if (thisObj.captionLangPending) { thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLangPending}); - thisObj.captionLangPending = null; + thisObj.captionLangPending = null; } - if (typeof thisObj.prefCaptionsSize !== 'undefined') { - // set the default caption size - // this doesn't work until the captions module is loaded + if (typeof thisObj.prefCaptionsSize !== 'undefined') { thisObj.youTubePlayer.setOption('captions','fontSize',thisObj.translatePrefs('size',thisObj.prefCaptionsSize,'youtube')); } deferred.resolve(); }); - // Trigger the above event listener by briefly playing the video - this.loadingYouTubeCaptions = true; - this.youTubePlayer.playVideo(); + this.loadingYouTubeCaptions = true; + this.youTubePlayer.playVideo(); + setTimeout(() => { + if ( ! apiTriggered ) { + setTimeout(() => { + thisObj.youTubePlayer.pauseVideo(); + deferred.resolve(); + }, 500); + } + },500); } return promise; }; - AblePlayer.prototype.getYouTubeTimedTextUrl = function (youTubeId, trackName, trackLang) { - - // return URL for retrieving WebVTT source via YouTube's timedtext API - // Note: This API seems to be undocumented, and could break anytime - // UPDATE: Google removed this API on November 10, 2021 - // This function is no longer called, but is preserved here for reference - var url = 'https://www.youtube.com/api/timedtext?fmt=vtt'; - url += '&v=' + youTubeId; - url += '&lang=' + trackLang; - // if track has a value in the name field, it's required in the URL - if (trackName !== '') { - url += '&name=' + trackName; - } - return url; - }; - AblePlayer.prototype.getYouTubePosterUrl = function (youTubeId, width) { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 - - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; + var url = 'https://img.youtube.com/vi/' + youTubeId; + if (width == '120') { + return url + '/default.jpg'; + } else if (width == '320') { + return url + '/mqdefault.jpg'; + } else if (width == '480') { + return url + '/hqdefault.jpg'; + } else if (width == '640') { + return url + '/sddefault.jpg'; + } else if (width == '1280') { + return url + '/hq720.jpg'; + } else if ( width == '1920' ) { + return url + '/maxresdefault.jpg'; + } + return false; }; AblePlayer.prototype.getYouTubeId = function (url) { - // return a YouTube ID, extracted from a full YouTube URL - // Supported URL patterns (with http or https): - // https://youtu.be/xxx - // https://www.youtube.com/watch?v=xxx - // https://www.youtube.com/embed/xxx - // in all supported patterns, the id is the last 11 characters - var idStartPos, id; + var idStartPos, id; - if (url.indexOf('youtu') !== -1) { - // this is a full Youtube URL - url = url.trim(); - idStartPos = url.length - 11; - id = url.substring(idStartPos); - return id; - } - else { - return url; + if (url.indexOf('youtu') !== -1) { + url = url.trim(); + idStartPos = url.length - 11; + id = url.substring(idStartPos); + return id; + } else { + return url; } }; @@ -7947,34 +5878,17 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { - // Events: - // startTracking(event, position) - // tracking(event, position) - // stopTracking(event, position) - window. AccessibleSlider = function(mediaType, div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { + window.AccessibleSlider = function(div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { - // mediaType is either 'audio' or 'video' - // div is the host element around which the slider will be built - // orientation is either 'horizontal' or 'vertical' - // length is the width or height of the slider, depending on orientation - // min is the low end of the slider scale - // max is the high end of the slider scale - // bigInterval is the number of steps supported by page up/page down (set to 0 if not supported) - // (smallInterval, defined as nextStep below, is always set to 1) - this is the interval supported by arrow keys - // label is used within an aria-label attribute to identify the slider to screen reader users - // className is used as the root within class names (e.g., 'able-' + classname + '-head') - // trackingMedia is true if this is a media timeline; otherwise false - // initialState is either 'visible' or 'hidden' var thisObj, coords; thisObj = this; - // Initialize some variables. - this.position = 0; // Note: position does not change while tracking. + this.position = 0; this.tracking = false; - this.trackDevice = null; // 'mouse' or 'keyboard' + this.trackDevice = null; this.keyTrackPosition = 0; this.lastTrackPosition = 0; this.nextStep = 1; @@ -7982,13 +5896,11 @@ if (typeof module !== "undefined" && module.exports) { this.bodyDiv = $(div); - // Add divs for tracking amount of media loaded and played if (trackingMedia) { this.loadedDiv = $('<div></div>'); this.playedDiv = $('<div></div>'); } - // Add a seekhead this.seekHead = $('<div>',{ 'aria-orientation': orientation, 'class': 'able-' + className + '-head' @@ -7996,11 +5908,9 @@ if (typeof module !== "undefined" && module.exports) { if (initialState === 'visible') { this.seekHead.attr('tabindex', '0'); - } - else { + } else { this.seekHead.attr('tabindex', '-1'); } - // Since head is focusable, it gets the aria roles/titles. this.seekHead.attr({ 'role': 'slider', 'aria-label': label, @@ -8036,8 +5946,7 @@ if (typeof module !== "undefined" && module.exports) { if (orientation === 'horizontal') { this.wrapperDiv.width(length); this.loadedDiv.width(0); - } - else { + } else { this.wrapperDiv.height(length); this.loadedDiv.height(0); } @@ -8050,37 +5959,31 @@ if (typeof module !== "undefined" && module.exports) { this.playedDiv.width(0); this.playedDiv.addClass('able-' + className + '-played'); - // Set a default duration. User can call this dynamically if duration changes. this.setDuration(max); } - // handle seekHead events this.seekHead.on('mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend', function (e) { coords = thisObj.pointerEventToXY(e); if (e.type === 'mouseenter' \|\| e.type === 'focus') { thisObj.overHead = true; - } - else if (e.type === 'mouseleave' \|\| e.type === 'blur') { + } else if (e.type === 'mouseleave' \|\| e.type === 'blur') { thisObj.overHead = false; if (!thisObj.overBody && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { + } else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + } else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(thisObj.seekHead.offset() + (thisObj.seekHead.width() / 2))); if (!thisObj.bodyDiv.is(':focus')) { thisObj.bodyDiv.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } @@ -8090,11 +5993,14 @@ if (typeof module !== "undefined" && module.exports) { } }); - // handle bodyDiv events this.bodyDiv.on( 'mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend', function (e) { + if ( e.button == 2 && e.type == 'mousedown' ) { + return; + } coords = thisObj.pointerEventToXY(e); + let keyPressed = e.key; if (e.type === 'mouseenter') { thisObj.overBody = true; @@ -8102,15 +6008,13 @@ if (typeof module !== "undefined" && module.exports) { x: coords.x, y: coords.y }; - } - else if (e.type === 'mouseleave') { + } else if (e.type === 'mouseleave') { thisObj.overBody = false; thisObj.overBodyMousePos = null; if (!thisObj.overHead && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { + } else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { thisObj.overBodyMousePos = { x: coords.x, y: coords.y @@ -8118,52 +6022,36 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + } else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(coords.x)); thisObj.trackHeadAtPageX(coords.x); if (!thisObj.seekHead.is(':focus')) { thisObj.seekHead.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'keydown') { - // Home - if (e.which === 36) { + } else if (e.type === 'keydown') { + if (e.key === 'Home') { thisObj.trackImmediatelyTo(0); - } - // End - else if (e.which === 35) { + } else if (e.key === 'End') { thisObj.trackImmediatelyTo(thisObj.duration); - } - // Left arrow or down arrow - else if (e.which === 37 \|\| e.which === 40) { + } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowDown') { thisObj.arrowKeyDown(-1); - } - // Right arrow or up arrow - else if (e.which === 39 \|\| e.which === 38) { + } else if (e.key === 'ArrowRight' \|\| e.key === 'ArrowUp') { thisObj.arrowKeyDown(1); - } - // Page up - else if (e.which === 33 && bigInterval > 0) { + } else if (e.key === 'PageUp' && bigInterval > 0) { thisObj.arrowKeyDown(bigInterval); - } - // Page down - else if (e.which === 34 && bigInterval > 0) { + } else if (e.key === 'PageDown' && bigInterval > 0) { thisObj.arrowKeyDown(-bigInterval); - } - else { + } else { return; } e.preventDefault(); - } - else if (e.type === 'keyup') { - if (e.which >= 33 && e.which <= 40) { + } else if (e.type === 'keyup') { + if ( keyPressed === e.key ) { if (thisObj.tracking && thisObj.trackDevice === 'keyboard') { thisObj.stopTracking(thisObj.keyTrackPosition); } @@ -8185,27 +6073,7 @@ if (typeof module !== "undefined" && module.exports) { this.nextStep = 2; } this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/* - AccessibleSlider.prototype.pageUp = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { + } else { this.nextStep = 1; this.inertiaCount = 0; this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); @@ -8213,7 +6081,7 @@ if (typeof module !== "undefined" && module.exports) { this.trackHeadAtPosition(this.keyTrackPosition); } }; -/ + AccessibleSlider.prototype.pageXToPosition = function (pageX) { var offset = pageX - this.bodyDiv.offset().left; var position = this.duration (offset / this.bodyDiv.width()); @@ -8247,7 +6115,6 @@ if (typeof module !== "undefined" && module.exports) { this.loadedDiv.width(this.bodyDiv.width() * this.buffered); }; - // Stops tracking, sets the head location to the current position. AccessibleSlider.prototype.resetHeadLocation = function () { var ratio = this.position / this.duration; var center = this.bodyDiv.width() * ratio; @@ -8268,7 +6135,6 @@ if (typeof module !== "undefined" && module.exports) { this.updateAriaValues(position, updateLive); } - // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. AccessibleSlider.prototype.setBuffered = function (ratio) { if (!isNaN(ratio)) { this.buffered = ratio; @@ -8314,7 +6180,6 @@ if (typeof module !== "undefined" && module.exports) { }; AccessibleSlider.prototype.updateAriaValues = function (position, updateLive) { - // TODO: Localize, move to another function. var pHours = Math.floor(position / 3600); var pMinutes = Math.floor((position % 3600) / 60); var pSeconds = Math.floor(position % 60); @@ -8331,18 +6196,15 @@ if (typeof module !== "undefined" && module.exports) { ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else if (pMinutes > 0) { + } else if (pMinutes > 0) { descriptionText = pMinutes + ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else { + } else { descriptionText = pSeconds + ' ' + pSecondWord; } - /* Comment to stop live region from generating or being used. / if (!this.liveAriaRegion) { this.liveAriaRegion = $('<span>', { 'class': 'able-offscreen', @@ -8354,7 +6216,6 @@ if (typeof module !== "undefined" && module.exports) { this.liveAriaRegion.text(descriptionText); } - // Uncomment the following lines to use aria values instead of separate live region. this.seekHead.attr('aria-valuetext', descriptionText); this.seekHead.attr('aria-valuenow', Math.floor(position).toString()); }; @@ -8370,23 +6231,19 @@ if (typeof module !== "undefined" && module.exports) { this.timeTooltip.show(); if (this.tracking) { this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)); - } - else { + } else { this.timeTooltip.text(this.positionToStr(this.position)); } this.setTooltipPosition(this.seekHead.position().left + (this.seekHead.width() / 2)); - } - else if (this.overBody && this.overBodyMousePos) { + } else if (this.overBody && this.overBodyMousePos) { this.timeTooltip.show(); this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))); this.setTooltipPosition(this.overBodyMousePos.x - this.bodyDiv.offset().left); - } - else { + } else { clearTimeout(this.timeTooltipTimeoutId); var _this = this; this.timeTooltipTimeoutId = setTimeout(function() { - // give user a half second move cursor over tooltip _this.timeTooltip.hide(); }, 500); } @@ -8401,13 +6258,12 @@ if (typeof module !== "undefined" && module.exports) { AccessibleSlider.prototype.setTooltipPosition = function (x) { this.timeTooltip.css({ left: x - (this.timeTooltip.width() / 2) - 10, - bottom: this.seekHead.height() + 10 + bottom: this.seekHead.height() }); }; AccessibleSlider.prototype.positionToStr = function (seconds) { - // same logic as misc.js > formatSecondsAsColonTime() var dHours = Math.floor(seconds / 3600); var dMinutes = Math.floor(seconds / 60) % 60; var dSeconds = Math.floor(seconds % 60); @@ -8419,24 +6275,19 @@ if (typeof module !== "undefined" && module.exports) { dMinutes = '0' + dMinutes; } return dHours + ':' + dMinutes + ':' + dSeconds; - } - else { + } else { return dMinutes + ':' + dSeconds; } }; AccessibleSlider.prototype.pointerEventToXY = function(e) { - // returns array of coordinates x and y in response to both mouse and touch events - // for mouse events, this comes from e.pageX and e.pageY - // for touch events, it's a bit more complicated var out = {x:0, y:0}; if (e.type == 'touchstart' \|\| e.type == 'touchmove' \|\| e.type == 'touchend' \|\| e.type == 'touchcancel') { var touch = e.originalEvent.touches[0] \|\| e.originalEvent.changedTouches[0]; out.x = touch.pageX; out.y = touch.pageY; - } - else if (e.type == 'mousedown' \|\| e.type == 'mouseup' \|\| e.type == 'mousemove' \|\| e.type == 'mouseover'\|\| e.type=='mouseout' \|\| e.type=='mouseenter' \|\| e.type=='mouseleave') { + } else if (e.type == 'mousedown' \|\| e.type == 'mouseup' \|\| e.type == 'mousemove' \|\| e.type == 'mouseover'\|\| e.type=='mouseout' \|\| e.type=='mouseenter' \|\| e.type=='mouseleave') { out.x = e.pageX; out.y = e.pageY; } @@ -8449,19 +6300,13 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addVolumeSlider = function($div) { - // Prior to v4.4.64, we were using a custom-build vertical volunme slider - // Changed to input type="range" because it's standard and gaining more widespread support - // including screen reader support - // TODO: Improve presentation of vertical slider. That requires some CSS finesse. - var thisObj, volumeSliderId, volumeHelpId, volumePct, tickLabelsId, $tickLabels, i, $tickOption, tickLabel; + var thisObj, volumeSliderId, volumeHelpId, volumePct, volumeLabel, volumeHeight; thisObj = this; - // define a few variables volumeSliderId = this.mediaId + '-volume-slider'; volumeHelpId = this.mediaId + '-volume-help'; - tickLabelsId = this.mediaId + '-volume-tick-labels'; this.$volumeSlider = $('<div>',{ 'id': volumeSliderId, @@ -8472,15 +6317,14 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-tooltip', 'role': 'tooltip' }).hide(); - this.$volumeRange = $('<input>',{ + this.$volumeRange = $('<input>',{ 'type': 'range', 'min': '0', 'max': '10', 'step': '1', - 'orient': 'vertical', // non-standard, but required for Firefox - 'aria-label': this.tt.volumeUpDown, + 'orient': 'vertical', + 'aria-label': this.translate( 'volumeUpDown', 'Volume up down' ), 'value': this.volume - // 'list': tickLabelsId // Uncomment this to use tickLabels (see note below) }); volumePct = parseInt(thisObj.volume) / 10 100; this.$volumeHelp = $('<div>',{ @@ -8488,34 +6332,14 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-volume-help', 'aria-live': 'polite' }).text(volumePct + '%'); - this.$volumeButton.attr({ - 'aria-describedby': volumeHelpId - }); - $tickLabels = $('<datalist>',{ - 'id': tickLabelsId - }); - for (i = 0; i <= 10; i++) { - if (i === 0) { - tickLabel = this.tt.mute; - } - else { - tickLabel = (i * 10) + '%'; - } - $tickOption = $('<option>',{ - 'value': i, - 'label': tickLabel - }) - $tickLabels.append($tickOption); - } + volumeLabel = this.$volumeButton.attr( 'aria-label' ); + this.$volumeButton.attr( 'aria-label', volumeLabel + ' ' + volumePct + '%'); this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp); - // To add $tickLabels, use the following line of code to replace the one above - // and uncommnet the 'list' property in the definition of this.$volumeRange above - // As of Nov 2022, this feature is not supported by any screen reader - // this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp,$tickLabels); + volumeHeight = this.$volumeButton.parents( '.able-control-row' )[0]; + this.$volumeSlider.css( 'bottom', volumeHeight.offsetHeight ); $div.append(this.$volumeSlider); - // add event listeners this.$volumeRange.on('change',function (e) { thisObj.handleVolumeChange($(this).val()); }); @@ -8523,23 +6347,19 @@ if (typeof module !== "undefined" && module.exports) { this.$volumeRange.on('input',function (e) { thisObj.handleVolumeChange($(this).val()); }); - + this.$volumeRange.on('keydown',function (e) { - // Escape key or Enter key or Tab key - if (e.which === 27 \|\| e.which === 13 \|\| e.which === 9) { - // close popup + if (e.key === 'Escape' \|\| e.key === 'Tab' \|\| e.key === 'Enter') { if (thisObj.$volumeSlider.is(':visible')) { - thisObj.closingVolume = true; // stopgap + thisObj.closingVolume = true; thisObj.hideVolumePopup(); - } - else { + } else { if (!thisObj.closingVolume) { thisObj.showVolumePopup(); } } - } - else { + } else { return; } }); @@ -8547,98 +6367,59 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.refreshVolumeHelp = function(volume) { - // make adjustments based on current volume var volumePct; volumePct = (volume/10) * 100; - // Update help text - if (this.$volumeHelp) { - this.$volumeHelp.text(volumePct + '%'); + if (this.$volumeHelp) { + this.$volumeHelp.text(volumePct + '%'); } - // Update the default value of the volume slider input field - // This doesn't seem to be necessary; browsers remember the previous setting during a session - // but this is a fallback in case they don't - this.$volumeRange.attr('value',volume); + this.$volumeRange.attr('value',volume); }; AblePlayer.prototype.refreshVolumeButton = function(volume) { - var volumeName, volumePct, volumeLabel, volumeIconClass, volumeImg, newSvgData; + var volumeName, volumePct, volumeLabel; volumeName = this.getVolumeName(volume); volumePct = (volume/10) * 100; - volumeLabel = this.tt.volume + ' ' + volumePct + '%'; + volumeLabel = this.translate( 'volume', 'Volume' ) + ' ' + volumePct + '%'; - if (this.iconType === 'font') { - volumeIconClass = 'icon-volume-' + volumeName; - this.$volumeButton.find('span').first().removeClass().addClass(volumeIconClass); - this.$volumeButton.find('span.able-clipped').text(volumeLabel); - } - else if (this.iconType === 'image') { - volumeImg = this.imgPath + 'volume-' + volumeName + '.png'; - this.$volumeButton.find('img').attr('src',volumeImg); - } - else if (this.iconType === 'svg') { - if (volumeName !== 'mute') { - volumeName = 'volume-' + volumeName; - } - newSvgData = this.getSvgData(volumeName); - this.$volumeButton.find('svg').attr('viewBox',newSvgData[0]); - this.$volumeButton.find('path').attr('d',newSvgData[1]); - } + this.getIcon( this.$volumeButton, 'volume-' + volumeName ); + this.$volumeButton.attr( 'aria-label', volumeLabel ); }; AblePlayer.prototype.handleVolumeButtonClick = function() { if (this.$volumeSlider.is(':visible')) { - this.hideVolumePopup(); - } - else { + this.hideVolumePopup(); + } else { this.showVolumePopup(); } - }; - - AblePlayer.prototype.handleVolumeKeystroke = function(keycode) { - - // keycode is an ASCII key code 49-57 (numeric keys 1-9), - // keyboard shortcuts for changing volume - - var volume; - - if (keycode >= 49 && keycode <= 57) { - volume = keycode - 48; - } - else { - return false; - } + }; + AblePlayer.prototype.handleVolumeKeystroke = function(volume) { if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { - this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) + } else { + this.setVolume(volume); this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); } - }; + }; AblePlayer.prototype.handleVolumeChange = function(volume) { - // handle volume change using the volume input slider if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { - this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) + } else { + this.setVolume(volume); this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); } @@ -8648,8 +6429,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.isMuted()) { this.setMute(false); - } - else { + } else { this.setMute(true); } }; @@ -8660,7 +6440,7 @@ if (typeof module !== "undefined" && module.exports) { this.$tooltipDiv.hide(); this.$volumeSlider.show().attr('aria-hidden','false'); this.$volumeButton.attr('aria-expanded','true'); - this.$volumeButton.focus(); // for screen reader expanded state to be read + this.$volumeButton.focus(); this.waitThenFocus(this.$volumeRange); }; @@ -8670,8 +6450,6 @@ if (typeof module !== "undefined" && module.exports) { this.$volumeSlider.hide().attr('aria-hidden','true'); this.$volumeButton.attr('aria-expanded','false').focus(); - // wait a second before resetting stopgap var - // otherwise the keypress used to close volume popup will trigger the volume button setTimeout(function() { thisObj.closingVolume = false; }, 1000); @@ -8681,21 +6459,17 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { return this.media.muted; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { return this.youTubePlayer.isMuted(); } }; AblePlayer.prototype.setMute = function(mute) { - // mute is either true (muting) or false (unmuting) if (mute) { - // save current volume so it can be restored after unmute this.lastVolume = this.volume; this.volume = 0; - } - else { // restore to previous volume + } else { if (typeof this.lastVolume !== 'undefined') { this.volume = this.lastVolume; } @@ -8703,49 +6477,33 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.media.muted = mute; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (mute) { this.youTubePlayer.mute(); - } - else { + } else { this.youTubePlayer.unMute(); } } - this.setVolume(this.volume); + this.setVolume(this.volume); this.refreshVolumeHelp(this.volume); this.refreshVolumeButton(this.volume); }; AblePlayer.prototype.setVolume = function (volume) { - // volume is 1 to 10 - // convert as needed depending on player - - var newVolume; + var newVolume; + this.syncSignVideo( {'volume' : 0 } ); if (this.player === 'html5') { - // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.media.volume = newVolume; - - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.volume = 0; // always mute - } - } - else if (this.player === 'youtube') { - // volume is 0 to 100 - newVolume = volume * 10; + } else if (this.player === 'youtube') { + newVolume = volume * 10; this.youTubePlayer.setVolume(newVolume); this.volume = volume; - } - else if (this.player === 'vimeo') { - // volume is 0 to 1 - newVolume = volume / 10; + } else if (this.player === 'vimeo') { + newVolume = volume / 10; this.vimeoPlayer.setVolume(newVolume).then(function() { - // setVolume finished. - // could do something here - // successful completion also fires a 'volumechange' event (see event.js) }); } this.lastVolume = volume; @@ -8753,38 +6511,27 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVolume = function (volume) { - // return volume using common audio control scale 1 to 10 if (this.player === 'html5') { - // uses 0 to 1 scale return this.media.volume * 10; - } - else if (this.player === 'youtube') { - // uses 0 to 100 scale - if (this.youTubePlayerReady) { + } else if (this.player === 'youtube') { + if (this.youTubePlayerReady) { return this.youTubePlayer.getVolume() / 10; } } if (this.player === 'vimeo') { - // uses 0 to 1 scale - // this.vimeoPlayer.getVolume() takes too long to resolve with a value - // Just use variable that's already been defined (should be the same value anyway) return this.volume; } }; AblePlayer.prototype.getVolumeName = function (volume) { - // returns 'mute','soft','medium', or 'loud' depending on volume level if (volume == 0) { return 'mute'; - } - else if (volume == 10) { + } else if (volume == 10) { return 'loud'; - } - else if (volume < 5) { + } else if (volume < 5) { return 'soft'; - } - else { + } else { return 'medium'; } }; @@ -8794,72 +6541,57 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"; - // Based on the incredible accessible modal dialog. - window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, isModal, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) { + window.AccessibleDialog = function( modalDiv, $returnElement, title, closeButtonLabel) { this.title = title; this.closeButtonLabel = closeButtonLabel; this.focusedElementBeforeModal = $returnElement; - this.escapeHook = escapeHook; this.baseId = $(modalDiv).attr('id') \|\| Math.floor(Math.random() * 1000000000).toString(); var thisObj = this; var modal = modalDiv; this.modal = modal; - modal.css({ - 'width': width \|\| '50%' - }); + modal.addClass('able-modal-dialog'); - if (!fullscreen) { - var closeButton = $('<button>',{ - 'class': 'modalCloseButton', - 'title': thisObj.closeButtonLabel, - 'aria-label': thisObj.closeButtonLabel - }).text('X'); - closeButton.keydown(function (e) { - // Space key down - if (e.which === 32) { - thisObj.hide(); - } - }).click(function () { + var closeButton = $('<button>',{ + 'class': 'modalCloseButton', + 'title': thisObj.closeButtonLabel, + 'aria-label': thisObj.closeButtonLabel + }).text('×'); + closeButton.on( 'keydown', function (e) { + if (e.key === ' ') { thisObj.hide(); - }); + } + }).on( 'click', function () { + thisObj.hide(); + }); - var titleH1 = $('<h1></h1>'); - titleH1.attr('id', 'modalTitle-' + this.baseId); - titleH1.css('text-align', 'center'); - titleH1.text(title); - this.titleH1 = titleH1; + var titleH1 = $('<h1></h1>'); + titleH1.attr('id', 'modalTitle-' + this.baseId); + titleH1.text(title); + this.titleH1 = titleH1; - modal.attr({ - 'aria-labelledby': 'modalTitle-' + this.baseId, - }); - modal.prepend(titleH1); - modal.prepend(closeButton); - } + modal.attr({ + 'aria-labelledby': 'modalTitle-' + this.baseId, + }); + var modalHeader = $( '<div>', { + 'class': 'able-modal-header' + }); + modalHeader.prepend(titleH1); + modalHeader.prepend(closeButton); + modal.prepend(modalHeader); modal.attr({ 'aria-hidden': 'true', - 'role': dialogRole, + 'role': 'dialog', + 'aria-modal': 'true' }); - if (isModal) { - modal.attr('aria-modal','true'); - } - modal.keydown(function (e) { - // Escape - if (e.which === 27) { - if (thisObj.escapeHook) { - thisObj.escapeHook(e, this); - } - else { - thisObj.hide(); - e.preventDefault(); - } - } - // Tab - else if (e.which === 9) { - // Manually loop tab navigation inside the modal. + modal.on( 'keydown', function (e) { + if (e.key === 'Escape') { + thisObj.hide(); + e.preventDefault(); + } else if (e.key === 'Tab') { var parts = modal.find(''); var focusable = parts.filter(focusableElementsSelector).filter(':visible'); @@ -8870,15 +6602,13 @@ if (typeof module !== "undefined" && module.exports) { var focused = $(':focus'); var currentIndex = focusable.index(focused); if (e.shiftKey) { - // If backwards from first element, go to last. if (currentIndex === 0) { - focusable.get(focusable.length - 1).focus(); + focusable.get(focusable.length - 1).trigger('focus'); e.preventDefault(); } - } - else { + } else { if (currentIndex === focusable.length - 1) { - focusable.get(0).focus(); + focusable.get(0).trigger('focus'); e.preventDefault(); } } @@ -8886,12 +6616,14 @@ if (typeof module !== "undefined" && module.exports) { e.stopPropagation(); }); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + if ( $( 'body' ).hasClass( 'able-modal-active' ) ) { + $( 'body > ') .not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); + } }; AccessibleDialog.prototype.show = function () { if (!this.overlay) { - // Generate overlay. var overlay = $('<div></div>').attr({ 'class': 'able-modal-overlay', 'tabindex': '-1' @@ -8899,13 +6631,14 @@ if (typeof module !== "undefined" && module.exports) { this.overlay = overlay; $('body').append(overlay); - // Keep from moving focus out of dialog when clicking outside of it. overlay.on('mousedown.accessibleModal', function (e) { e.preventDefault(); + thisObj.hide(); }); } - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('inert', true); + $( 'body' ).addClass( 'able-modal-active' ); this.overlay.css('display', 'block'); this.modal.css('display', 'block'); @@ -8920,8 +6653,7 @@ if (typeof module !== "undefined" && module.exports) { } var thisObj = this; setTimeout(function () { - // set focus on the first focusable element - thisObj.modal.find('button.modalCloseButton').first().focus(); + thisObj.modal.find('button.modalCloseButton').first().trigger('focus'); }, 300); }; @@ -8931,14 +6663,14 @@ if (typeof module !== "undefined" && module.exports) { } this.modal.css('display', 'none'); this.modal.attr('aria-hidden', 'true'); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); - this.focusedElementBeforeModal.focus(); + this.focusedElementBeforeModal.trigger('focus'); }; AccessibleDialog.prototype.getInputs = function () { - // return an array of input elements within this dialog if (this.modal) { var inputs = this.modal.find('input'); return inputs; @@ -8950,10 +6682,6 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.getNextHeadingLevel = function ($element) { - // Finds the nearest heading in the ancestor tree - // Loops over each parent of the current element until a heading is found - // If multiple headings are found beneath a given parent, get the closest - // Returns an integer (1-6) representing the next available heading level var $parents, $foundHeadings, numHeadings, headingType, headingNumber; @@ -8967,10 +6695,8 @@ if (typeof module !== "undefined" && module.exports) { } }); if (typeof headingType === "undefined") { - // page has no headings headingNumber = 1; } else { - // Increment closest heading by one if less than 6. headingNumber = parseInt(headingType[1]); headingNumber += 1; if (headingNumber > 6) { @@ -8981,7 +6707,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.countProperties = function (obj) { - // returns the number of properties in an object var count, prop; count = 0; for (prop in obj) { @@ -8996,15 +6721,10 @@ if (typeof module !== "undefined" && module.exports) { seconds, showFullTime ) { - // Takes seconds and converts to string of form hh:mm:ss - // If showFullTime is true, shows 00 for hours if time is less than an hour - // and show milliseconds (e.g., 00:00:04.123 as in Video Track Sorter) - // Otherwise, omits empty hours and milliseconds (e.g., 00:04 as in timer on controller) var dHours, dMinutes, dSeconds, parts, milliSeconds, numShort, i; if (showFullTime) { - // preserve milliseconds, if included in seconds parts = seconds.toString().split("."); if (parts.length === 2) { milliSeconds = parts[1]; @@ -9053,8 +6773,7 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.getSecondsFromColonTime = function (timeStr) { - // Converts string of form hh:mm:ss to seconds - var timeParts, hours, minutes, seconds, newTime; + var timeParts, hours, minutes, seconds; timeParts = timeStr.split(":"); if (timeParts.length === 3) { @@ -9077,21 +6796,42 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.roundDown = function (value, decimals) { - // round value down to the nearest X decimal points - // where X is the value of the decimals parameter return Number(Math.floor(value + "e" + decimals) + "e-" + decimals); }; + AblePlayer.prototype.defer = function() { + const self = this; + const promise = new Promise((resolve, reject) => { + self.resolve = resolve; + self.reject = reject; + self.promise = () => promise; + }); + } + + AblePlayer.prototype.getScript = function( source, callback ) { + var script = document.createElement('script'); + var prior = document.getElementsByTagName('script')[0]; + script.async = 1; + + script.onload = script.onreadystatechange = function( _, isAbort ) { + if ( isAbort \|\| !script.readyState \|\| /loaded\|complete/.test(script.readyState) ) { + script.onload = script.onreadystatechange = null; + script = undefined; + + if ( !isAbort && callback ) { + setTimeout(callback, 0); + } + } + }; + + script.src = source; + prior.parentNode.insertBefore(script, prior); + } + AblePlayer.prototype.hasAttr = function (object, attribute) { - // surprisingly, there is no hasAttr() function in Jquery as of 3.2.1 - // return true if object has attribute; otherwise false - // selector is a Jquery object - // attribute is a string var attr = object.attr(attribute); - // For some browsers, `attr` is undefined; for others, - // `attr` is false. Check for both. if (typeof attr !== typeof undefined && attr !== false) { return true; } else { @@ -9099,293 +6839,157 @@ if (typeof module !== "undefined" && module.exports) { } }; - Number.isInteger = - Number.isInteger \|\| - function (value) { - // polyfill for IE11, which doesn't otherwise support Number.isInteger - // https://stackoverflow.com/a/31720368/744281 - return ( - typeof value === "number" && - isFinite(value) && - Math.floor(value) === value - ); - }; })(jQuery); (function ($) { AblePlayer.prototype.initDescription = function() { - // set default mode for delivering description (open vs closed) - // based on availability and user preference - - // called when player is being built, or when a user - // toggles the Description button or changes a description-related preference - - // The following variables are applicable to delivery of description: - // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) - // prefDesc == 1 if user wants description (i.e., Description button is on); else 0 - // prefDescPause == 1 to pause video when description starts; else 0 - // prefDescVisible == 1 to visibly show text-based description area; else 0 - // prefDescMethod == either 'video' or 'text' (as of v4.0.10, prefDescMethod is always 'video') - // descMethod is the format actually used ('video' or 'text'), regardless of user preference - // hasOpenDesc == true if a described version of video is available via data-desc-src attribute - // hasClosedDesc == true if a description text track is available - // descOn == true if description of either type is on - // readDescriptionsAloud == true if text description is to be announced audibly; otherwise false - // descReader == either 'browser' or 'screenreader' + + var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - if (this.mediaType === 'audio') { - deferred.resolve(); + if (this.mediaType === 'audio') { + deferred.resolve(); } - // check to see if there's an open-described version of this video - // checks only the first source since if a described version is provided, - // it must be provided for all sources this.descFile = this.$sources.first().attr('data-desc-src'); if (typeof this.descFile !== 'undefined') { this.hasOpenDesc = true; - } - else { - // there's no open-described version via data-desc-src, - // but what about data-youtube-desc-src or data-vimeo-desc-src? - // if these exist, they would have been defined earlier - if (this.youTubeDescId \|\| this.vimeoDescId) { - this.hasOpenDesc = true; - } - else { // there are no open-described versions from any source - this.hasOpenDesc = false; - } + } else { + this.hasOpenDesc = (this.youTubeDescId \|\| this.vimeoDescId) ? true : false; } - // Set this.descMethod based on media availability & user preferences + this.descMethod = null; if (this.hasOpenDesc && this.hasClosedDesc) { - // both formats are available. User gets their preference. - if (this.prefDescMethod) { - this.descMethod = this.prefDescMethod; - } - else { - // user has no preference. Video is default. - this.descMethod = 'video'; - } - } - else if (this.hasOpenDesc) { + this.descMethod = (this.prefDescMethod) ? this.prefDescMethod : 'video'; + } else if (this.hasOpenDesc) { this.descMethod = 'video'; - } - else if (this.hasClosedDesc) { + } else if (this.hasClosedDesc) { this.descMethod = 'text'; } - else { - // no description is available for this video - this.descMethod = null; - } - // Set the default state of descriptions - if (this.descMethod) { - if (this.prefDesc === 1) { - this.descOn = true; - } - else if (this.prefDesc === 0) { - this.descOn = false; - } - else { - // user has no prefs. Use default state. - if (this.defaultStateDescriptions === 1) { - this.descOn = true; - } - else { - this.descOn = false; - } + this.descOn = false; + if (this.descMethod) { + if (this.prefDesc === 1) { + this.descOn = true; + } else if (this.prefDesc === 0) { + this.descOn = false; + } else { + this.descOn = (this.defaultStateDescriptions === 1) ? true : false; } } - else { - this.descOn = false; - } - if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc && this.descMethod === 'text') { + + if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc ) { this.injectTextDescriptionArea(); } if (this.descOn) { - if (this.descMethod === 'video') { - if (!this.usingDescribedVersion()) { - // switched from non-described to described version - this.swapDescription(); - } + if (this.descMethod === 'video' && !this.usingDescribedVersion() ) { + this.swapDescription(); } if (this.hasClosedDesc) { if (this.prefDescVisible) { - // make description text visible if (typeof this.$descDiv !== 'undefined') { this.$descDiv.show(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } - } - else { - // keep it visible to screen readers, but hide it visibly + } else { if (typeof this.$descDiv !== 'undefined') { - this.$descDiv.addClass('able-clipped'); + this.$descDiv.addClass('able-offscreen'); } } } - } - else { // description is off. - if (this.descMethod === 'video') { // user has turned off described version of video + } else { + if (this.descMethod === 'video') { if (this.usingDescribedVersion()) { - // user was using the described verion. Swap for non-described version this.swapDescription(); } - } - else if (this.descMethod === 'text') { // user has turned off text description - // hide description div from everyone, including screen reader users + } else if (this.descMethod === 'text') { if (typeof this.$descDiv !== 'undefined') { this.$descDiv.hide(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } } } deferred.resolve(); - return promise; + return promise; }; AblePlayer.prototype.usingDescribedVersion = function () { - // Returns true if currently using audio description, false otherwise. if (this.player === 'youtube') { return (this.activeYouTubeId === this.youTubeDescId); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { return (this.activeVimeoId === this.vimeoDescId); - } - else { + } else { return (this.$sources.first().attr('data-desc-src') === this.$sources.first().attr('src')); } }; - AblePlayer.prototype.initSpeech = function (context) { - - // Some browsers &/or operating systems require a user-initiated click - // before this.synth.getVoices() will work. As of Nov 2022: - // Chrome requires a click before synth.getVoices() will work - // iOS requires a click before synth.speak() will work - // A hack to address this: Listen for ANY click, then play an inaudible utterance - // to intitiate speech synthesis - // https://stackoverflow.com/questions/32193704/js-speech-synthesis-issue-on-ios - // This function does that, and sets this.speechEnabled - // It's called with either of these contexts: - // 'init' - player is being initialized - // 'play' - user has clicked play - // 'prefs' - user has clicked prefs button - // 'desc' - it's time to announce a description! - - var thisObj = this; - - if (this.speechEnabled === null) { - - if (typeof this.synth !== 'undefined') { - // cancel any previous synth instance and reinitialize - this.synth.cancel(); - } + AblePlayer.prototype.initSpeech = function (context) { + var thisObj = this; - if (window.speechSynthesis) { + function attemptEnableSpeech() { + var greeting = new SpeechSynthesisUtterance("\x20"); + greeting.onend = function () { + thisObj.getBrowserVoices(); + if ( + (Array.isArray(thisObj.descVoices) && thisObj.descVoices.length) \|\| + context !== "init" + ) { + thisObj.speechEnabled = true; + } + }; + thisObj.synth.speak(greeting); + } - // browser supports speech synthesis + function handleInitialClick() { + attemptEnableSpeech(); + $(document).off("click", handleInitialClick); + } + if (this.speechEnabled === null) { + if (window.speechSynthesis) { this.synth = window.speechSynthesis; + this.synth.cancel(); - if (context === 'init') { - // handle a click on anything, in case the user - // clicks something before they click 'play' or 'prefs' buttons - // that would allow us to init speech before it's needed - $(document).on('click',function() { - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - } - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; - }); - - // go ahead and call get browser voices in case it might work, - // for browsers that don't require a click - this.getBrowserVoices(); - if (this.descVoices.length) { - this.speechEnabled = true; - } - } - else { // context is either 'play' or 'prefs' or 'desc' - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - }; - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; + if (context === "init") { + attemptEnableSpeech(); + $(document).on("click", handleInitialClick); + } else { + attemptEnableSpeech(); } - } - else { - // browser does not support speech synthesis - this.speechEnabled = false; + } else { + this.speechEnabled = false; } } - }; + }; AblePlayer.prototype.getBrowserVoices = function () { - - // define this.descVoices array - // includes only languages that match the language of the captions or player + var voices, descLangs, voiceLang, preferredLang; - if (this.captionLang) { - preferredLang = this.captionLang.substring(0,2).toLowerCase(); - } - else { - preferredLang = this.lang.substring(0,2).toLowerCase(); - } - this.descVoices = []; + preferredLang = (this.captionLang) ? this.captionLang.substring(0,2).toLowerCase() : this.lang.substring(0,2).toLowerCase(); + + this.descVoices = []; voices = this.synth.getVoices(); descLangs = this.getDescriptionLangs(); if (voices.length > 0) { this.descVoices = []; - // available languages are identified with local suffixes (e.g., en-US) for (var i=0; i<voices.length; i++) { - // match only the first 2 characters of the lang code voiceLang = voices[i].lang.substring(0,2).toLowerCase(); if (voiceLang === preferredLang && (descLangs.indexOf(voiceLang) !== -1)) { - // this voice matches preferredLang - // AND there's a matching description track in this language - // Add this voice to final array this.descVoices.push(voices[i]); } } if (!this.descVoices.length) { - // no voices available in the default language(s) - // just use all voices, regardless of language this.descVoices = voices; } } @@ -9394,9 +6998,6 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getDescriptionLangs = function () { - // returns an array of languages (from srclang atttributes) - // in which there are description tracks - // use only first two characters of the lang code var descLangs = []; if (this.tracks) { for (var i=0; i < this.tracks.length; i++) { @@ -9410,52 +7011,38 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setDescriptionVoice = function () { - // set description voice on player init, or when user changes caption language - // Voice is determined in the following order of precedence: - // 1. User's preferred voice for this language, saved in a cookie - // 2. The first available voice in the array of available voices for this browser in this language - var cookie, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; - cookie = this.getCookie(); - if (typeof cookie.voices !== 'undefined') { - prefDescVoice = this.getPrefDescVoice(); - } - else { - prefDescVoice = null; - } - + var preferences, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; + preferences = this.getPref(); + prefDescVoice = (typeof preferences.voices !== 'undefined') ? this.getPrefDescVoice() : null; + this.getBrowserVoices(); this.rebuildDescPrefsForm(); - if (this.selectedDescriptions) { + if (this.selectedDescriptions) { descLang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - descLang = this.captionLang; - } - else { - descLang = this.lang; + } else if (this.captionLang) { + descLang = this.captionLang; + } else { + descLang = this.lang; } if (this.synth) { voices = this.synth.getVoices(); if (voices.length > 0) { - if (prefDescVoice) { - // select the language that matches prefDescVoice, if it's available - prefVoiceFound = false; + if (prefDescVoice) { + prefVoiceFound = false; for (var i=0; i<voices.length; i++) { - // first, be sure voice is the correct language if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { - if (voices[i].name === prefDescVoice) { - descVoice = voices[i].name; - prefVoiceFound = true; + if (voices[i].name === prefDescVoice) { + descVoice = voices[i].name; + prefVoiceFound = true; break; } } } } - if (!prefVoiceFound) { - // select the first language that matches the first 2 characters of the lang code + if (!prefVoiceFound) { for (var i=0; i<voices.length; i++) { if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { descVoice = voices[i].name; @@ -9463,92 +7050,64 @@ if (typeof module !== "undefined" && module.exports) { } } } - // make this the user's current preferred voice this.prefDescVoice = descVoice; this.prefDescVoiceLang = descLang; - // select this voice in the Description Prefs dialog if (this.$voiceSelectField) { - var selectedOption = this.$voiceSelectField.find('option[value="' + this.prefDescVoice + '"]'); this.$voiceSelectField.val(this.prefDescVoice); } - this.updateCookie('voice'); + this.updatePreferences('voice'); } } }; AblePlayer.prototype.swapDescription = function() { - // swap described and non-described source media, depending on which is playing - // this function is only called in two circumstances: - // 1. Swapping to described version when initializing player (based on user prefs & availability) - // (playerCreated == false) - // 2. User is toggling description - // (playerCreated == true) - var thisObj, i, origSrc, descSrc, srcType, newSource; + var thisObj, i, origSrc, descSrc; thisObj = this; - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + this.loadingMedia = false; - // get element that has focus at the time swap is initiated - // after player is rebuilt, focus will return to that same element - // (if it exists) - this.$focusedElement = $(':focus'); + this.$focusedElement = $(':focus'); + this.activeMedia = this.mediaId; - // get current time of current source, and attempt to start new video at the same time - // whether this is possible will be determined after the new media source has loaded - // see onMediaNewSourceLoad() - if (this.elapsed > 0) { - this.swapTime = this.elapsed; - } - else { - this.swapTime = 0; + if (this.elapsed > 0) { + this.swapTime = this.elapsed; + } else { + this.swapTime = 0; } - if (this.duration > 0) { - this.prevDuration = this.duration; + if (this.duration > 0) { + this.prevDuration = this.duration; } - // Capture current playback state, so media can resume after source is swapped - if (!this.okToPlay) { - this.okToPlay = this.playing; + if (!this.okToPlay) { + this.okToPlay = this.playing; } if (this.descOn) { - // user has requested the described version - this.showAlert(this.tt.alertDescribedVersion); - } - else { - // user has requested the non-described version - this.showAlert(this.tt.alertNonDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); + } else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); } if (this.player === 'html5') { this.swappingSrc = true; - this.paused = true; + this.paused = true; if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described for (i=0; i < this.$sources.length; i++) { - // for all <source> elements, replace src with data-orig-src - origSrc = this.$sources[i].getAttribute('data-orig-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-orig-src') ); srcType = this.$sources[i].getAttribute('type'); if (origSrc) { this.$sources[i].setAttribute('src',origSrc); } - } - } - else { - // the non-described version is currently playing. Swap to described. + } + } else { for (i=0; i < this.$sources.length; i++) { - // for all <source> elements, replace src with data-desc-src (if one exists) - // then store original source in a new data-orig-src attribute - origSrc = this.$sources[i].getAttribute('src'); - descSrc = this.$sources[i].getAttribute('data-desc-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('src') ); + descSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-desc-src') ); srcType = this.$sources[i].getAttribute('type'); if (descSrc) { this.$sources[i].setAttribute('src',descSrc); @@ -9557,90 +7116,58 @@ if (typeof module !== "undefined" && module.exports) { } } - if (this.recreatingPlayer) { - // stopgap to prevent multiple firings of recreatePlayer() - return; - } - if (this.playerCreated) { - // delete old player, then recreate it with new source & tracks - this.deletePlayer('swap-desc-html'); - this.recreatePlayer().then(function() { - if (!thisObj.loadingMedia) { + if (this.recreatingPlayer) { + return; + } + if (this.playerCreated) { + this.deletePlayer('swap-desc-html'); + this.recreatePlayer().then(function() { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } }); + } else { } - else { - // player is in the process of being created - // no need to recreate it - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { + + this.activeYouTubeId = (this.usingDescribedVersion()) ? this.youTubeId : this.youTubeDescId; - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeYouTubeId = this.youTubeId; - } - else { - // the non-described version is currently playing. Swap to described. - this.activeYouTubeId = this.youTubeDescId; - } if (typeof this.youTubePlayer !== 'undefined') { - thisObj.swappingSrc = true; + thisObj.swappingSrc = true; if (thisObj.playing) { - // loadVideoById() loads and immediately plays the new video at swapTime thisObj.youTubePlayer.loadVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - else { - // cueVideoById() loads the new video and seeks to swapTime, but does not play + } else { thisObj.youTubePlayer.cueVideoById(thisObj.activeYouTubeId,thisObj.swapTime); } } - if (this.playerCreated) { - this.deletePlayer('swap-desc-youtube'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-youtube'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { - // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { - // nothing to do here - // next steps occur when youtube onReady event fires - // see youtube.js > finalizeYoutubeInit() - }); - } - else if (this.player === 'vimeo') { + if (this.recreatingPlayer) { + return; + } + this.recreatePlayer().then(function() { + }); + } else if (this.player === 'vimeo') { if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described this.activeVimeoId = this.vimeoId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { - // the non-described version is currently playing. Swap to described. + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); + } else { this.activeVimeoId = this.vimeoDescId; - this.showAlert(this.tt.alertDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); } - if (this.playerCreated) { - this.deletePlayer('swap-desc-vimeo'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-vimeo'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { - // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { - // load the new video source + if (this.recreatingPlayer) { + return; + } + this.recreatePlayer().then(function() { thisObj.vimeoPlayer.loadVideo(thisObj.activeVimeoId).then(function() { if (thisObj.playing) { - // video was playing when user requested an alternative version - // seek to swapTime and continue playback (playback happens automatically) thisObj.vimeoPlayer.setCurrentTime(thisObj.swapTime); - } - else { - // Vimeo autostarts immediately after video loads - // The "Described" button should not trigger playback, so stop this before the user notices. + } else { thisObj.vimeoPlayer.pause(); } }); @@ -9649,36 +7176,30 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.showDescription = function(now) { - - if (!this.hasClosedDesc \|\| this.swappingSrc \|\| !this.descOn \|\| this.descMethod === 'video') { + if (!this.playing \|\| !this.hasClosedDesc \|\| this.swappingSrc \|\| !this.descOn \|\| ( this.descMethod === 'video' && !this.prefDescVisible ) ) { return; } - var thisObj, i, cues, d, thisDescription, descText, msg; + var thisObj, cues, d, thisDescription, descText; thisObj = this; var flattenComponentForDescription = function (component) { var result = []; if (component.type === 'string') { result.push(component.value); - } - else { + } else { for (var i = 0; i < component.children.length; i++) { result.push(flattenComponentForDescription(component.children[i])); } } return result.join(''); }; - + cues = []; if (this.selectedDescriptions) { cues = this.selectedDescriptions.cues; - } - else if (this.descriptions.length >= 1) { + } else if (this.descriptions.length >= 1) { cues = this.descriptions[0].cues; } - else { - cues = []; - } for (d = 0; d < cues.length; d++) { if ((cues[d].start <= now) && (cues[d].end > now)) { thisDescription = d; @@ -9687,25 +7208,18 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisDescription !== 'undefined') { if (this.currentDescription !== thisDescription) { - // temporarily remove aria-live from $status in order to prevent description from being interrupted this.$status.removeAttr('aria-live'); descText = flattenComponentForDescription(cues[thisDescription].components); - if (this.descReader === 'screenreader') { - // load the new description into the container div for screen readers to read + if (this.descReader === 'screenreader') { this.$descDiv.html(descText); - } - else if (this.speechEnabled) { - // use browser's built-in speech synthesis - this.announceDescriptionText('description',descText); + } else if (this.speechEnabled) { + if ( 'video' !== this.descMethod ) { + this.announceDescriptionText('description',descText); + } if (this.prefDescVisible) { - // write description to the screen for sighted users - // but remove ARIA attributes since it isn't intended to be read by screen readers this.$descDiv.html(descText).removeAttr('aria-live aria-atomic'); } - } - else { - // browser does not support speech synthesis - // load the new description into the container div for screen readers to read + } else { this.$descDiv.html(descText); } if (this.prefDescPause && this.descMethod === 'text') { @@ -9714,112 +7228,70 @@ if (typeof module !== "undefined" && module.exports) { } this.currentDescription = thisDescription; } - } - else { + } else { this.$descDiv.html(''); this.currentDescription = -1; - // restore aria-live to $status this.$status.attr('aria-live','polite'); } }; - AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { + AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - // called when user changed playback rate - // adjust rate of audio description to match + var speechRate; - var speechRate; - - if (rate === 0.5) { - speechRate = 0.7; // option 1 in prefs menu - } - else if (rate === 0.75) { - speechRate = 0.8; // option 2 in prefs menu - } - else if (rate === 1.0) { - speechRate = 1; // option 4 in prefs menu (normal speech, default) - } - else if (rate === 1.25) { - speechRate = 1.1; // option 5 in prefs menu - } - else if (rate === 1.5) { - speechRate = 1.2; // option 6 in prefs menu - } - else if (rate === 1.75) { - speechRate = 1.5; // option 7 in prefs menu - } - else if (rate === 2.0) { - speechRate = 2; // option 8 in prefs menu (fast) - } - else if (rate === 2.25) { - speechRate = 2.5; // option 9 in prefs menu (very fast) - } - else if (rate >= 2.5) { - speechRate = 3; // option 10 in prefs menu (super fast) + if (rate === 0.5) { + speechRate = 0.7; + } else if (rate === 0.75) { + speechRate = 0.8; + } else if (rate === 1.0) { + speechRate = 1; + } else if (rate === 1.25) { + speechRate = 1.1; + } else if (rate === 1.5) { + speechRate = 1.2; + } else if (rate === 1.75) { + speechRate = 1.5; + } else if (rate === 2.0) { + speechRate = 2; + } else if (rate === 2.25) { + speechRate = 2.5; + } else if (rate >= 2.5) { + speechRate = 3; } this.prefDescRate = speechRate; - }; + }; AblePlayer.prototype.announceDescriptionText = function(context, text) { - // this function announces description text using speech synthesis - // it's only called if already determined that browser supports speech synthesis - // context is either: - // 'description' - actual description text extracted from WebVTT file - // 'sample' - called when user changes a setting in Description Prefs dialog var thisObj, voiceName, i, voice, pitch, rate, volume, utterance, timeElapsed, secondsElapsed; thisObj = this; - // As of Feb 2021, - // 1. In some browsers (e.g., Chrome) window.speechSynthesis.getVoices() - // returns 0 voices unless the request is triggered with a user click - // Therefore, description may have failed to initialize when the page loaded - // This function cannot have been called without a mouse click. - // Therefore, this is a good time to check that, and try again if needed - // 2. In some browsers, the window.speechSynthesis.speaking property fails to reset, - // and onend event is never fired. This prevents new speech from being spoken. - // window.speechSynthesis.cancel() also fails, so it's impossible to recover. - // This only seems to happen with some voices. - // Typically the first voice in the getVoices() array (index 0) is realiable - // When speech synthesis gets wonky, this is a deep problem that impacts all browsers - // and typically requires a computer reboot to make right again. - // This has been observed frequently in macOS Big Sur, but also in Windows 10 - // To ignore user's voice preferences and always use the first voice, set the following var to true - // This is for testing only; not recommended for production - // unless the voice select field is also removed from the Prefs dialog var useFirstVoice = false; - + if (!this.speechEnabled) { - // voices array failed to load the first time. Try again this.initSpeech('desc'); } if (context === 'sample') { - // get settings from form voiceName = $('#' + this.mediaId + '_prefDescVoice').val(); pitch = $('#' + this.mediaId + '_prefDescPitch').val(); rate = $('#' + this.mediaId + '_prefDescRate').val(); volume = $('#' + this.mediaId + '_prefDescVolume').val(); - } - else { - // get settings from global prefs + } else { voiceName = this.prefDescVoice; pitch = this.prefDescPitch; rate = this.prefDescRate; volume = this.prefDescVolume; } - // get the voice associated with the user's chosen voice name if (this.descVoices) { if (this.descVoices.length > 0) { if (useFirstVoice) { voice = this.descVoices[0]; - } - else if (voiceName) { - // get the voice that matches user's preferred voiceName + } else if (voiceName) { for (i = 0; i < this.descVoices.length; i++) { if (this.descVoices[i].name == voiceName) { voice = this.descVoices[i]; @@ -9828,67 +7300,51 @@ if (typeof module !== "undefined" && module.exports) { } } if (typeof voice === 'undefined') { - // no matching voice was found - // use the first voice in the array voice = this.descVoices[0]; } - utterance = new SpeechSynthesisUtterance(); - utterance.voice = voice; - utterance.voiceURI = 'native'; - utterance.volume = volume; - utterance.rate = rate; - utterance.pitch = pitch; - utterance.text = text; - // TODO: Consider the best language for the utterance: - // language of the web page? (this.lang) - // language of the WebVTT description track? - // language of the user's chosen voice? - // If there's a mismatch between any of these, the description will likely be unintelligible - utterance.lang = this.lang; - utterance.onstart = function(e) { - // utterance has started - }; - utterance.onpause = function(e) { - // utterance has paused - }; - utterance.onend = function(e) { - // utterance has ended - this.speakingDescription = false; - timeElapsed = e.elapsedTime; - // As of Firefox 95, e.elapsedTime is expressed in seconds - // Other browsers (tested in Chrome & Edge) express this in milliseconds - // Assume no utterance will require over 100 seconds to express... - if (timeElapsed > 100) { - // time is likely expressed in milliseconds - secondsElapsed = (e.elapsedTime/1000).toFixed(2); - } - else { - // time is likely already expressed in seconds; just need to round it - secondsElapsed = (e.elapsedTime).toFixed(2); - } - if (this.debug) { - - } - if (context === 'description') { - if (thisObj.prefDescPause) { - if (thisObj.pausedForDescription) { - thisObj.playMedia(); - this.pausedForDescription = false; + } + } else { + voice = null; + } + utterance = new SpeechSynthesisUtterance(); + if (voice) { + utterance.voice = voice; + } + utterance.voiceURI = 'native'; + utterance.volume = volume; + utterance.rate = rate; + utterance.pitch = pitch; + utterance.text = text; + utterance.lang = this.lang; + utterance.onstart = function(e) { + }; + utterance.onpause = function(e) { + }; + utterance.onend = function(e) { + this.speakingDescription = false; + timeElapsed = e.elapsedTime; + secondsElapsed = (timeElapsed > 100) ? (e.elapsedTime/1000).toFixed(2) : (e.elapsedTime).toFixed(2); + + if (this.debug) { + } - } + if (context === 'description') { + if (thisObj.prefDescPause) { + if (thisObj.pausedForDescription) { + thisObj.playMedia(); + this.pausedForDescription = false; } - }; - utterance.onerror = function(e) { - // handle error - - }; - if (this.synth.paused) { - this.synth.resume(); } - this.synth.speak(utterance); - this.speakingDescription = true; } + }; + utterance.onerror = function(e) { + + }; + if (this.synth.paused) { + this.synth.resume(); } + this.synth.speak(utterance); + this.speakingDescription = true; }; })(jQuery); @@ -9897,8 +7353,6 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isIOS = function(version) { - // return true if this is IOS - // if version is provided check for a particular version var userAgent, iOS; @@ -9907,109 +7361,79 @@ if (typeof module !== "undefined" && module.exports) { if (iOS) { if (typeof version !== 'undefined') { if (userAgent.indexOf('os ' + version) !== -1) { - // this is the target version of iOS return true; - } - else { + } else { return false; } - } - else { - // no version was specified + } else { return true; } - } - else { - // this is not IOS + } else { return false; } }; AblePlayer.prototype.browserSupportsVolume = function() { - // To test whether the browser supports changing the volume, - // create a new audio element and try setting the volume to something other than 1. - // Then, retrieve the current setting to see if it preserved it. - // Unfortunately, this doesn't work in iOS. In 2022, our tests yield the same results as reported here: - // https://stackoverflow.com/questions/72861253/how-do-i-detect-if-a-browser-does-not-support-changing-html-audio-volume + var audio, testVolume; - // So, unfortunately we have to resort to sniffing for iOS - // before testing for support in other browsers - var audio, testVolume; - - if (this.isIOS()) { - return false; - } + if (this.isIOS()) { + return false; + } - testVolume = 0.9; // any value between 0.1 and 0.9 - audio = new Audio(); - audio.volume = testVolume; - if (audio.volume === testVolume) { - return true; - } - else { - return false; - } + testVolume = 0.9; + audio = new Audio(); + audio.volume = testVolume; + + return ( audio.volume === testVolume ); }; AblePlayer.prototype.nativeFullscreenSupported = function () { - return document.fullscreenEnabled \|\| - document.webkitFullscreenEnabled \|\| - document.mozFullscreenEnabled \|\| - document.msFullscreenEnabled; + return document.fullscreenEnabled \|\| document.webkitFullscreenEnabled; }; })(jQuery); (function ($) { + AblePlayer.prototype.seekTo = function (newTime) { var thisObj = this; - // define variables to be used for analytics - // e.g., to measure the extent to which users seek back and forward this.seekFromTime = this.media.currentTime; this.seekToTime = newTime; this.seeking = true; this.liveUpdatePending = true; - if (this.speakingDescription) { - this.synth.cancel(); + if (this.speakingDescription) { + this.synth.cancel(); } + this.syncSignVideo( {'time' : this.startTime } ); + if (this.player === 'html5') { var seekable; this.startTime = newTime; - // Check HTML5 media "seekable" property to be sure media is seekable to startTime seekable = this.media.seekable; if (seekable.length > 0 && this.startTime >= seekable.start(0) && this.startTime <= seekable.end(0)) { - // ok to seek to startTime - // canplaythrough will be triggered when seeking is complete - // this.seeking will be set to false at that point - this.media.currentTime = this.startTime; - this.seekStatus = 'complete'; - if (this.hasSignLanguage && this.signVideo) { - // keep sign languge video in sync - this.signVideo.currentTime = this.startTime; - } + this.media.currentTime = this.startTime; + this.seekStatus = 'complete'; + this.syncSignVideo( { 'time' : this.startTime } ); } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.seekTo(newTime,true); if (newTime > 0) { if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } } - } - else if (this.player === 'vimeo') { + this.syncSignVideo( {'time' : newTime } ); + } else if (this.player === 'vimeo') { this.vimeoPlayer.setCurrentTime(newTime).then(function() { - // seek finished. - // successful completion also fires a 'seeked' event (see event.js) thisObj.elapsed = newTime; thisObj.refreshControls('timeline'); }) @@ -10019,32 +7443,19 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getMediaTimes = function (duration, elapsed) { - // Returns an array with keys 'duration' and 'elapsed' - // Vars passed to this function come courtesy of select Vimeo events - // Use those if they're available. - // Otherwise, will need to call the relevant media API - // This function should only be called from onMediaUpdateTime() - // If duration and elapsed are needed other times, use this.duration and this.elapsed - // both values are expressed in seconds, and all player APIs are similar: - // they return a value that is rounded to the nearest second before playback begins, - // then to the nearest thousandth of a second after playback begins - // With HTML5 media API, some browsers are more precise (e.g., Firefox rounds to 6 decimal points) - // but inconsistent (values with 9 decimal points have been sporadically observed in Safari) - // For standardization, values are rounded to 6 decimal points before they're returned var deferred, promise, thisObj, mediaTimes; mediaTimes = {}; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (typeof duration !== 'undefined' && typeof elapsed !== 'undefined') { mediaTimes['duration'] = duration; mediaTimes['elapsed'] = elapsed; deferred.resolve(mediaTimes); - } - else { + } else { this.getDuration().then(function(duration) { mediaTimes['duration'] = thisObj.roundDown(duration,6); thisObj.getElapsed().then(function(elapsed) { @@ -10058,11 +7469,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getDuration = function () { - // returns duration of the current media, expressed in seconds - // function is called by getMediaTimes, and return value is sanitized there var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -10071,39 +7480,31 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getDuration().then(function(duration) { if (duration === undefined \|\| isNaN(duration) \|\| duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { deferred.resolve(0); } - } - else { + } else { var duration; if (this.player === 'html5') { - duration = this.media.duration; - } - else if (this.player === 'youtube') { + duration = this.media.duration; + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { - if (this.duration > 0) { - // duration was already retrieved while checking for captions - duration = this.duration; - } - else { + if (this.duration > 0) { + duration = this.duration; + } else { duration = this.youTubePlayer.getDuration(); } - } - else { // the YouTube player hasn't initialized yet + } else { duration = 0; } } if (duration === undefined \|\| isNaN(duration) \|\| duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } } @@ -10112,12 +7513,10 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getElapsed = function () { - // returns elapsed time of the current media, expressed in seconds - // function is called by getMediaTimes, and return value is sanitized there var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -10126,33 +7525,27 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getCurrentTime().then(function(elapsed) { if (elapsed === undefined \|\| isNaN(elapsed) \|\| elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { deferred.resolve(0); } - } - else { + } else { var elapsed; if (this.player === 'html5') { elapsed = this.media.currentTime; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { elapsed = this.youTubePlayer.getCurrentTime(); - } - else { // the YouTube player hasn't initialized yet + } else { elapsed = 0; } } if (elapsed === undefined \|\| isNaN(elapsed) \|\| elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } } @@ -10161,72 +7554,44 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getPlayerState = function () { - // Returns one of the following states: - // 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. - // 'ended' - Finished playing. - // 'paused' - Not playing, but not stopped or ended. - // 'buffering' - Momentarily paused to load, but will resume once data is loaded. - // 'playing' - Currently playing. - - // Commented out the following in 3.2.1 - not sure of its intended purpose - // It can be useful to know player state even when swapping src - // and the overhead is seemingly minimal - // TODO - Investigate this further. Delete if it's not needed - / - if (this.swappingSrc) { - return; - } - / - var deferred, promise, thisObj, duration, elapsed; - deferred = new $.Deferred(); + + var deferred, promise, thisObj; + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (this.player === 'html5') { if (this.media.ended) { deferred.resolve('ended'); - } - else if (this.media.paused) { + } else if (this.media.paused) { deferred.resolve('paused'); - } - else if (this.media.readyState !== 4) { + } else if (this.media.readyState !== 4) { deferred.resolve('buffering'); - } - else { + } else { deferred.resolve('playing'); } - } - else if (this.player === 'youtube' && this.youTubePlayerReady) { + } else if (this.player === 'youtube' && this.youTubePlayerReady) { var state = this.youTubePlayer.getPlayerState(); if (state === -1 \|\| state === 5) { deferred.resolve('stopped'); - } - else if (state === 0) { + } else if (state === 0) { deferred.resolve('ended'); - } - else if (state === 1) { + } else if (state === 1) { deferred.resolve('playing'); - } - else if (state === 2) { + } else if (state === 2) { deferred.resolve('paused'); - } - else if (state === 3) { + } else if (state === 3) { deferred.resolve('buffering'); } - } - else if (this.player === 'vimeo' && this.vimeoPlayer) { - // curiously, Vimeo's API has no getPlaying(), getBuffering(), or getState() methods - // so maybe if it's neither paused nor ended, it must be playing??? + } else if (this.player === 'vimeo' && this.vimeoPlayer) { this.vimeoPlayer.getPaused().then(function(paused) { if (paused) { deferred.resolve('paused'); - } - else { + } else { thisObj.vimeoPlayer.getEnded().then(function(ended) { if (ended) { deferred.resolve('ended'); - } - else { + } else { deferred.resolve('playing'); } }); @@ -10239,138 +7604,130 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isPlaybackRateSupported = function () { if (this.player === 'html5') { - if (this.media.playbackRate) { - return true; - } - else { - return false; - } - } - else if (this.player === 'youtube') { - // Youtube supports varying playback rates per video. - // Only expose controls if more than one playback rate is available. - if (this.youTubePlayerReady) { - if (this.youTubePlayer.getAvailablePlaybackRates().length > 1) { - return true; - } - else { - return false; - } - } - else { + return (this.media.playbackRate) ? true : false; + } else if (this.player === 'youtube') { + if (this.youTubePlayerReady) { + return (this.youTubePlayer.getAvailablePlaybackRates().length > 1) ? true : false; + } else { return false; } - } - else if (this.player === 'vimeo') { - // since this takes longer to determine, it was set previously in initVimeoPlayer() + } else if (this.player === 'vimeo') { return this.vimeoSupportsPlaybackRateChange; } }; AblePlayer.prototype.setPlaybackRate = function (rate) { - + rate = Math.max(0.5, rate); - if (this.hasClosedDesc && this.descMethod === 'text') { - // keep speech rate in sync with playback rate even if descOn is false - this.syncSpeechToPlaybackRate(rate); + if (this.hasClosedDesc && this.descMethod === 'text') { + this.syncSpeechToPlaybackRate(rate); } + this.syncSignVideo( {'rate' : rate } ); + if (this.player === 'html5') { this.media.playbackRate = rate; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.setPlaybackRate(rate); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.setPlaybackRate(rate); } - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.playbackRate = rate; - } + this.syncSignVideo( { 'rate' : rate } ); this.playbackRate = rate; - this.$speed.text(this.tt.speed + ': ' + rate.toFixed(2).toString() + 'x'); - }; + this.$speed.text( this.translate( 'speed', 'Speed' ) + ': ' + rate.toFixed(2).toString() + 'x'); + }; AblePlayer.prototype.getPlaybackRate = function () { if (this.player === 'html5') { return this.media.playbackRate; - } - else if (this.player === 'youtube') { - if (this.youTubePlayerReady) { - return this.youTubePlayer.getPlaybackRate(); - } + } else if (this.player === 'youtube' && (this.youTubePlayerReady)) { + return this.youTubePlayer.getPlaybackRate(); } }; AblePlayer.prototype.isPaused = function () { - // Note there are three player states that count as paused in this sense, - // and one of them is named 'paused'. - // A better name would be 'isCurrentlyNotPlayingOrBuffering' - - var state; if (this.player === 'vimeo') { - // just rely on value of this.playing - if (this.playing) { - return false; - } - else { - return true; - } - } - else { + return (this.playing) ? false : true; + } else { this.getPlayerState().then(function(state) { - // if any of the following is true, consider the media 'paused' return state === 'paused' \|\| state === 'stopped' \|\| state === 'ended'; }); } }; + AblePlayer.prototype.syncSignVideo = function(options) { + if (this.hasSignLanguage && ( this.signVideo \|\| this.signYoutube ) ) { + if (options && typeof options.time !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.currentTime = options.time; + } else { + this.youTubeSignPlayer.seekTo(options.time,true); + } + } + if (options && typeof options.rate !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.playbackRate = options.rate; + } else { + this.youTubeSignPlayer.setPlaybackRate(options.rate); + } + } + if (options && typeof options.pause !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.pause(true); + } else { + this.youTubeSignPlayer.pauseVideo(); + } + } + if (options && typeof options.play !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.play(true); + } else { + this.youTubeSignPlayer.playVideo(); + } + } + if (options && typeof options.volume !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.volume = 0; + } + } + } + }; + AblePlayer.prototype.pauseMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'pause' : true } ); if (this.player === 'html5') { this.media.pause(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.pause(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.pauseVideo(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.pause(); } }; AblePlayer.prototype.playMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'play' : true } ); if (this.player === 'html5') { this.media.play(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.play(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.playVideo(); if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } this.stoppingYouTube = false; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.play(); } this.startedPlaying = true; if (this.hideControls) { - // wait briefly after playback begins, then hide controls this.hidingControls = true; this.invokeHideControlsTimeout(); } @@ -10378,52 +7735,19 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.fadeControls = function(direction) { - // Visibly fade controls without hiding them from screen reader users - // direction is either 'out' or 'in' - // TODO: This still needs work. - // After the player fades, it's replaced by an empty space - // Would be better if the video and captions expanded to fill the void - // Attempted to fade out to 0 opacity, then move the playerDiv offscreen - // and expand the mediaContainer to fill the vacated space - // However, my attempts to do this have been choppy and buggy - // Code is preserved below and commented out - - var thisObj, mediaHeight, playerHeight, newMediaHeight; var thisObj = this; if (direction == 'out') { - // get the original height of two key components: - mediaHeight = this.$mediaContainer.height(); - playerHeight = this.$playerDiv.height(); - newMediaHeight = mediaHeight + playerHeight; - - // fade slowly to transparency - this.$playerDiv.fadeTo(2000,0,function() { - / - // when finished, position playerDiv offscreen - // thisObj.$playerDiv.addClass('able-offscreen'); - // Expand the height of mediaContainer to fill the void (needs work) - thisObj.$mediaContainer.animate({ - height: newMediaHeight - },500); - / - }); - } - else if (direction == 'in') { - // restore captionsContainer to its original height (needs work) - // this.$mediaContainer.removeAttr('style'); - // fade relatively quickly back to its original position with full opacity - // this.$playerDiv.removeClass('able-offscreen').fadeTo(100,1); - this.$playerDiv.fadeTo(100,1); + this.$playerDiv.addClass( 'fade-out' ).removeClass( 'fade-in' ); + } else if (direction == 'in') { + this.$playerDiv.addClass( 'fade-in' ).removeClass( 'fade-out' ); } }; AblePlayer.prototype.invokeHideControlsTimeout = function () { - // invoke timeout for waiting a few seconds after a mouse move or key down - // before hiding controls again var thisObj = this; this.hideControlsTimeout = window.setTimeout(function() { if (typeof thisObj.playing !== 'undefined' && thisObj.playing === true && thisObj.hideControls) { @@ -10434,56 +7758,31 @@ if (typeof module !== "undefined" && module.exports) { this.hideControlsTimeoutStatus = 'active'; }; - AblePlayer.prototype.refreshControls = function(context, duration, elapsed) { - - // context is one of the following: - // 'init' - initial build (or subsequent change that requires full rebuild) - // 'timeline' - a change may effect time-related controls - // 'captions' - a change may effect caption-related controls - // 'descriptions' - a change may effect description-related controls - // 'transcript' - a change may effect the transcript window or button - // 'fullscreen' - a change has been triggered by full screen toggle - // 'playpause' - a change triggered by either a 'play' or 'pause' event - - // NOTE: context is not currently supported. - // The steps in this function have too many complex interdependencies - // The gains in efficiency are offset by the possibility of introducing bugs - // For now, executing everything + AblePlayer.prototype.refreshControls = function(context = 'init', duration, elapsed) { + + context = 'init'; - // duration and elapsed are passed from callback functions of Vimeo API events - // duration is expressed as sss.xxx - // elapsed is expressed as sss.xxx - var thisObj, duration, elapsed, lastChapterIndex, displayElapsed, - updateLive, textByState, timestamp, widthUsed, - leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount, - buffered, newTop, statusBarHeight, speedHeight, statusBarWidthBreakpoint, - newSvgData; + var thisObj, duration, textByState, timestamp, captionsCount, newTop, statusBarWidthBreakpoint; thisObj = this; - if (this.swappingSrc) { - if (this.playing) { - // wait until new source has loaded before refreshing controls - // can't wait if player is NOT playing because some critical events - // won't fire until playback of new media starts - return; - } + if ( this.swappingSrc && this.playing ) { + return; } - if (context === 'timeline' \|\| context === 'init') { - // all timeline-related functionality requires both duration and elapsed + if ( context === 'timeline' \|\| context === 'init' ) { + var lastChapterIndex, displayElapsed, updateLive, widthUsed, + leftControls, rightControls, seekbarWidth, buffered; if (typeof this.duration === 'undefined') { - // wait until duration is known before proceeding with refresh - return; + return; } if (this.useChapterTimes) { this.chapterDuration = this.getChapterDuration(); this.chapterElapsed = this.getChapterElapsed(); } - if (this.useFixedSeekInterval === false && this.seekIntervalCalculated === false && this.duration > 0) { - // couldn't calculate seekInterval previously; try again. + if ( !this.useFixedSeekInterval && !this.seekIntervalCalculated && this.duration > 0) { this.setSeekInterval(); } @@ -10491,60 +7790,37 @@ if (typeof module !== "undefined" && module.exports) { if (this.useChapterTimes) { lastChapterIndex = this.selectedChapters.cues.length-1; if (this.selectedChapters.cues[lastChapterIndex] == this.currentChapter) { - // this is the last chapter if (this.currentChapter.end !== this.duration) { - // chapter ends before or after video ends - // need to adjust seekbar duration to match video end this.seekBar.setDuration(this.duration - this.currentChapter.start); - } - else { + } else { this.seekBar.setDuration(this.chapterDuration); } - } - else { - // this is not the last chapter + } else { this.seekBar.setDuration(this.chapterDuration); } - } - else { - if (!(this.duration === undefined \|\| isNaN(this.duration) \|\| this.duration === -1)) { - this.seekBar.setDuration(this.duration); - } + } else if ( !(this.duration === undefined \|\| isNaN(this.duration) \|\| this.duration === -1) ) { + this.seekBar.setDuration(this.duration); } if (!(this.seekBar.tracking)) { - // Only update the aria live region if we have an update pending - // (from a seek button control) or if the seekBar has focus. - // We use document.activeElement instead of $(':focus') due to a strange bug: - // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. updateLive = this.liveUpdatePending \|\| this.seekBar.seekHead.is($(document.activeElement)); this.liveUpdatePending = false; if (this.useChapterTimes) { this.seekBar.setPosition(this.chapterElapsed, updateLive); - } - else { + } else { this.seekBar.setPosition(this.elapsed, updateLive); } } - // When seeking, display the seek bar time instead of the actual elapsed time. if (this.seekBar.tracking) { displayElapsed = this.seekBar.lastTrackPosition; - } - else { - if (this.useChapterTimes) { - displayElapsed = this.chapterElapsed; - } - else { - displayElapsed = this.elapsed; - } + } else { + displayElapsed = ( this.useChapterTimes ) ? this.chapterElapsed : this.elapsed; } } - // update elapsed & duration if (typeof this.$durationContainer !== 'undefined') { if (this.useChapterTimes) { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.chapterDuration)); - } - else { + } else { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.duration)); } } @@ -10553,178 +7829,100 @@ if (typeof module !== "undefined" && module.exports) { } if (this.skin === 'legacy') { - // Update seekbar width. - // To do this, we need to calculate the width of all buttons surrounding it. if (this.seekBar) { - widthUsed = 0; + let controlWrapper = this.seekBar.wrapperDiv.parent().parent(); leftControls = this.seekBar.wrapperDiv.parent().prev('div.able-left-controls'); rightControls = leftControls.next('div.able-right-controls'); - leftControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); // true = include margin - } - }); + widthUsed = leftControls.outerWidth(true); rightControls.children().each(function () { if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); + widthUsed += $(this).outerWidth(true) + 5; } }); if (this.fullscreen) { seekbarWidth = $(window).width() - widthUsed; + } else { + seekbarWidth = controlWrapper.width() - widthUsed - 10; } - else { - // seekbar is wide enough to fill the remaining space - // include a 5px buffer to account for minor browser differences - seekbarWidth = this.$ableWrapper.width() - widthUsed - 5; - } - // Sometimes some minor fluctuations based on browser weirdness, so set a threshold. if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) { this.seekBar.setWidth(seekbarWidth); } } } - // Update buffering progress. - // TODO: Currently only using the first HTML5 buffered interval, - // but this fails sometimes when buffering is split into two or more intervals. - if (this.player === 'html5') { - if (this.media.buffered.length > 0) { - buffered = this.media.buffered.end(0); - if (this.useChapterTimes) { - if (buffered > this.chapterDuration) { - buffered = this.chapterDuration; - } - if (this.seekBar) { - this.seekBar.setBuffered(buffered / this.chapterDuration); - } - } - else { - if (this.seekBar) { - if (!isNaN(buffered)) { - this.seekBar.setBuffered(buffered / duration); - } - } + if (this.player === 'html5' && this.media.buffered.length > 0) { + buffered = this.media.buffered.end(0); + if (this.useChapterTimes) { + if (buffered > this.chapterDuration) { + buffered = this.chapterDuration; } - } - } - else if (this.player === 'youtube') { - if (this.seekBar) { - if (this.youTubePlayerReady) { - this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + if (this.seekBar) { + this.seekBar.setBuffered(buffered / this.chapterDuration); } + } else if ( this.seekBar && !isNaN(buffered) ) { + this.seekBar.setBuffered(buffered / duration); } + } else if (this.player === 'youtube' && this.seekBar && this.youTubePlayerReady ) { + this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + } else if (this.player === 'vimeo') { } - else if (this.player === 'vimeo') { - // TODO: Add support for Vimeo buffering update - } - } // end if context == 'timeline' or 'init' - - if (context === 'descriptions' \|\| context == 'init'){ + } + if (context === 'descriptions' \|\| context == 'init') { if (this.$descButton) { - if (this.descOn) { - this.$descButton.removeClass('buttonOff').attr('aria-label',this.tt.turnOffDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOffDescriptions); - } - else { - this.$descButton.addClass('buttonOff').attr('aria-label',this.tt.turnOnDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOnDescriptions); - } + this.toggleButtonState( + this.$descButton, + this.descOn, + this.translate( 'turnOffDescriptions', 'Turn off descriptions' ), + this.translate( 'turnOnDescriptions', 'Turn on descriptions' ), + ); } } - if (context === 'captions' \|\| context == 'init'){ + if (context === 'captions' \|\| context == 'init') { if (this.$ccButton) { captionsCount = this.captions.length; - - // Button has a different title depending on the number of captions. - // If only one caption track, this is "Show captions" and "Hide captions" - // Otherwise, it is just always "Captions" - if (!this.captionsOn) { - this.$ccButton.addClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'false') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.showCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.showCaptions); - } - } - else { - this.$ccButton.removeClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'true') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.hideCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.hideCaptions); - } - } - if (captionsCount > 1) { this.$ccButton.attr({ - 'aria-label': this.tt.captions, 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-captions-menu' }); - this.$ccButton.find('span.able-clipped').text(this.tt.captions); } + var ariaLabelOn = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + var ariaPressed = ( captionsCount > 1 ) ? true : false; + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); } } if (context === 'fullscreen' \|\| context == 'init'){ if (this.$fullscreenButton) { if (!this.fullscreen) { - this.$fullscreenButton.attr('aria-label', this.tt.enterFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-collapse').addClass('icon-fullscreen-expand'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-expand'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenExpandButtonImg); - } - } - else { - this.$fullscreenButton.attr('aria-label',this.tt.exitFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-expand').addClass('icon-fullscreen-collapse'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-collapse'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenCollapseButtonImg); - } + this.$fullscreenButton.attr( 'aria-label', this.translate( 'enterFullScreen', 'Enter full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-expand' ); + } else { + this.$fullscreenButton.attr('aria-label', this.translate( 'exitFullScreen', 'Exit full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-collapse' ); } } } if (context === 'playpause' \|\| context == 'init'){ if (typeof this.$bigPlayButton !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Choose show/hide for big play button and adjust position. if (this.paused && !this.seekBar.tracking) { if (!this.hideBigPlayButton) { this.$bigPlayButton.show(); this.$bigPlayButton.attr('aria-hidden', 'false'); - - } - if (this.fullscreen) { - this.$bigPlayButton.width($(window).width()); - this.$bigPlayButton.height($(window).height()); - } - else { - this.$bigPlayButton.width(this.$mediaContainer.width()); - this.$bigPlayButton.height(this.$mediaContainer.height()); } - } - else { + } else { this.$bigPlayButton.hide(); this.$bigPlayButton.attr('aria-hidden', 'true'); } @@ -10734,31 +7932,25 @@ if (typeof module !== "undefined" && module.exports) { if (context === 'transcript' \|\| context == 'init'){ if (this.transcriptType) { - // Sync checkbox and autoScrollTranscript with user preference if (this.prefAutoScrollTranscript === 1) { this.autoScrollTranscript = true; this.$autoScrollTranscriptCheckbox.prop('checked',true); - } - else { + } else { this.autoScrollTranscript = false; this.$autoScrollTranscriptCheckbox.prop('checked',false); } - // If transcript locked, scroll transcript to current highlight location. if (this.autoScrollTranscript && this.currentHighlight) { newTop = Math.floor(this.$transcriptDiv.scrollTop() + $(this.currentHighlight).position().top - (this.$transcriptDiv.height() / 2) + ($(this.currentHighlight).height() / 2)); if (newTop !== Math.floor(this.$transcriptDiv.scrollTop())) { - // Set a flag to ignore the coming scroll event. - // there's no other way I know of to differentiate programmatic and user-initiated scroll events. this.scrollingTranscript = true; - // only scroll once after moving a highlight if (this.movingHighlight) { this.$transcriptDiv.scrollTop(newTop); - this.movingHighlight = false; - } + this.movingHighlight = false; + } } } } @@ -10768,7 +7960,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$chaptersButton) { this.$chaptersButton.attr({ - 'aria-label': this.tt.chapters, + 'aria-label': this.translate( 'chapters', 'Chapters' ), 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-chapters-menu' }); @@ -10777,234 +7969,115 @@ if (typeof module !== "undefined" && module.exports) { if (context === 'timeline' \|\| context === 'playpause' \|\| context === 'init') { - // update status textByState = { - 'stopped': this.tt.statusStopped, - 'paused': this.tt.statusPaused, - 'playing': this.tt.statusPlaying, - 'buffering': this.tt.statusBuffering, - 'ended': this.tt.statusEnd - }; - - if (this.stoppingYouTube) { - // stoppingYouTube is true temporarily while video is paused and seeking to 0 - // See notes in handleRestart() - // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) - if (this.$status.text() !== this.tt.statusStopped) { - this.$status.text(this.tt.statusStopped); - } - if (this.$playpauseButton.find('span').first().hasClass('icon-pause')) { - if (this.iconType === 'font') { - this.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('play'); - this.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - this.$playpauseButton.find('path').attr('d',newSvgData[1]); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else { - this.$playpauseButton.find('img').attr('src',this.playButtonImg); - } - } - } - else { - if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Update the text only if it's changed since it has role="alert"; - // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. - this.getPlayerState().then(function(currentState) { - if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { - // Debounce updates; only update after status has stayed steadily different for a while - // "A while" is defined differently depending on context - if (thisObj.swappingSrc) { - // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), - // so set a longer wait time before writing a status message - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) - } - } - else { - // for all other contexts (e.g., users clicks Play/Pause) - // user should receive more rapid feedback - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 250; // in ms - } - } - timestamp = (new Date()).getTime(); - if (!thisObj.statusDebounceStart) { - thisObj.statusDebounceStart = timestamp; - // Call refreshControls() again after allotted time has passed - thisObj.debouncingStatus = true; - thisObj.statusTimeout = setTimeout(function () { - thisObj.debouncingStatus = false; - thisObj.refreshControls(context); - }, thisObj.statusMessageThreshold); - } - else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { - thisObj.$status.text(textByState[currentState]); - thisObj.statusDebounceStart = null; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - } - else { - thisObj.statusDebounceStart = null; - thisObj.debouncingStatus = false; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - // Don't change play/pause button display while using the seek bar (or if YouTube stopped) - if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { - if (currentState === 'paused' \|\| currentState === 'stopped' \|\| currentState === 'ended') { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('play'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.playButtonImg); - } - } - else { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-play').addClass('icon-pause'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('pause'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.pauseButtonImg); - } + 'stopped': this.translate( 'statusStopped', 'Stopped' ), + 'paused': this.translate( 'statusPaused', 'Paused' ), + 'playing': this.translate( 'statusPlaying', 'Playing' ), + 'buffering': this.translate( 'statusBuffering', 'Buffering' ), + 'ended': this.translate( 'statusEnd', 'End of track' ) + }; + + if (this.stoppingYouTube) { + if (this.$status.text() !== this.translate( 'statusStopped', 'Stopped' ) ) { + this.$status.text( this.translate( 'statusStopped', 'Stopped' ) ); + } + this.getIcon( this.$playpauseButton, 'play' ); + } else if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { + this.getPlayerState().then(function(currentState) { + if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { + if (thisObj.swappingSrc) { + if (!thisObj.debouncingStatus) { + thisObj.statusMessageThreshold = 2000; } + } else if (!thisObj.debouncingStatus) { + thisObj.statusMessageThreshold = 250; } - }); - } + timestamp = (new Date()).getTime(); + if (!thisObj.statusDebounceStart) { + thisObj.statusDebounceStart = timestamp; + thisObj.debouncingStatus = true; + thisObj.statusTimeout = setTimeout(function () { + thisObj.debouncingStatus = false; + thisObj.refreshControls(context); + }, thisObj.statusMessageThreshold); + } else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { + thisObj.$status.text(textByState[currentState]); + thisObj.statusDebounceStart = null; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + } else { + thisObj.statusDebounceStart = null; + thisObj.debouncingStatus = false; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { + if (currentState === 'paused' \|\| currentState === 'stopped' \|\| currentState === 'ended') { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); + thisObj.getIcon( thisObj.$playpauseButton, 'play' ); + } else { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); + thisObj.getIcon( thisObj.$playpauseButton, 'pause' ); + } + } + }); } } - // Show/hide status bar content conditionally if (!this.fullscreen) { statusBarWidthBreakpoint = 300; - statusBarHeight = this.$statusBarDiv.height(); - speedHeight = this.$statusBarDiv.find('span.able-speed').height(); - if (speedHeight > (statusBarHeight + 5)) { - // speed bar is wrapping (happens often in German player) + if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { this.$statusBarDiv.find('span.able-speed').hide(); this.hidingSpeed = true; - } - else { + } else { if (this.hidingSpeed) { this.$statusBarDiv.find('span.able-speed').show(); this.hidingSpeed = false; } - if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { - // Player is too small for a speed span - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - } } } }; - AblePlayer.prototype.getHiddenWidth = function($el) { - - // jQuery returns for width() if element is hidden - // this function is a workaround - - // save a reference to a cloned element that can be measured - var $hiddenElement = $el.clone().appendTo('body'); - - // calculate the width of the clone - var width = $hiddenElement.outerWidth(); - - // remove the clone from the DOM - $hiddenElement.remove(); - - return width; - }; - AblePlayer.prototype.handlePlay = function(e) { - if (this.paused) { - // user clicked play - this.okToPlay = true; + this.okToPlay = true; this.playMedia(); - if (this.synth.paused) { - // media was paused while description was speaking - // resume utterance - this.synth.resume(); + if (this.synth.paused) { + this.synth.resume(); } - } - else { - // user clicked pause - this.okToPlay = false; + } else { + this.okToPlay = false; this.pauseMedia(); - if (this.speakingDescription) { - // pause the current utterance - // it will resume when the user presses play - this.synth.pause(); + if (this.speakingDescription) { + this.synth.pause(); } } - if (this.speechEnabled === null) { - this.initSpeech('play'); + if (this.speechEnabled === null) { + this.initSpeech('play'); } }; AblePlayer.prototype.handleRestart = function() { - if (this.speakingDescription) { - // cancel audio description - this.synth.cancel(); - } + if (this.speakingDescription) { + this.synth.cancel(); + } this.seekTo(0); }; AblePlayer.prototype.handlePrevTrack = function() { - if (this.playlistIndex === 0) { - // currently on the first track - // wrap to bottom and play the last track - this.playlistIndex = this.$playlist.length - 1; - } - else { - this.playlistIndex--; - } - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings + this.playlistIndex = (this.playlistIndex === 0) ? this.$playlist.length - 1 : this.playlistIndex--; + this.cueingPlaylistItem = true; this.cuePlaylistItem(this.playlistIndex); }; AblePlayer.prototype.handleNextTrack = function() { - if (this.playlistIndex === this.$playlist.length - 1) { - // currently on the last track - // wrap to top and play the forst track - this.playlistIndex = 0; - } - else { - this.playlistIndex++; - } - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings + this.playlistIndex = (this.playlistIndex === this.$playlist.length - 1) ? 0 : this.playlistIndex++; + this.cueingPlaylistItem = true; this.cuePlaylistItem(this.playlistIndex); }; @@ -11013,15 +8086,10 @@ if (typeof module !== "undefined" && module.exports) { var targetTime; targetTime = this.elapsed - this.seekInterval; - if (this.useChapterTimes) { - if (targetTime < this.currentChapter.start) { - targetTime = this.currentChapter.start; - } - } - else { - if (targetTime < 0) { - targetTime = 0; - } + if (this.useChapterTimes && (targetTime < this.currentChapter.start)) { + targetTime = this.currentChapter.start; + } else if (targetTime < 0) { + targetTime = 0; } this.seekTo(targetTime); }; @@ -11034,29 +8102,17 @@ if (typeof module !== "undefined" && module.exports) { targetTime = this.elapsed + this.seekInterval; if (this.useChapterTimes) { if (this.chapters[lastChapterIndex] == this.currentChapter) { - // this is the last chapter if (targetTime > this.duration \|\| targetTime > this.currentChapter.end) { - // targetTime would exceed the end of the video (or chapter) - // scrub to end of whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); - } - else if (this.duration % targetTime < this.seekInterval) { - // nothing left but pocket change after seeking to targetTime - // go ahead and seek to end of video (or chapter), whichever is earliest + } else if (this.duration % targetTime < this.seekInterval) { targetTime = Math.min(this.duration, this.currentChapter.end); } - } - else { - // this is not the last chapter + } else { if (targetTime > this.currentChapter.end) { - // targetTime would exceed the end of the chapter - // scrub exactly to end of chapter targetTime = this.currentChapter.end; } } - } - else { - // not using chapter times + } else { if (targetTime > this.duration) { targetTime = this.duration; } @@ -11072,51 +8128,33 @@ if (typeof module !== "undefined" && module.exports) { this.changeRate(-1); }; - // Increases or decreases playback rate, where dir is 1 or -1 indication direction. AblePlayer.prototype.changeRate = function (dir) { var rates, currentRate, index, newRate, vimeoMin, vimeoMax; if (this.player === 'html5') { this.setPlaybackRate(this.getPlaybackRate() + (0.25 dir)); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { rates = this.youTubePlayer.getAvailablePlaybackRates(); currentRate = this.getPlaybackRate(); index = rates.indexOf(currentRate); if (index === -1) { - - } - else { + + } else { index += dir; - // Can only increase or decrease rate if there's another rate available. if (index < rates.length && index >= 0) { this.setPlaybackRate(rates[index]); } } } - } - else if (this.player === 'vimeo') { - // range is 0.5 to 2 - // increase/decrease in inrements of 0.5 + } else if (this.player === 'vimeo') { vimeoMin = 0.5; vimeoMax = 2; if (dir === 1) { - if (this.vimeoPlaybackRate + 0.5 <= vimeoMax) { - newRate = this.vimeoPlaybackRate + 0.5; - } - else { - newRate = vimeoMax; - } - } - else if (dir === -1) { - if (this.vimeoPlaybackRate - 0.5 >= vimeoMin) { - newRate = this.vimeoPlaybackRate - 0.5; - } - else { - newRate = vimeoMin; - } + newRate = (this.vimeoPlaybackRate + 0.5 <= vimeoMax) ? this.vimeoPlaybackRate + 0.5 : vimeoMax; + } else if (dir === -1) { + newRate = (this.vimeoPlaybackRate - 0.5 >= vimeoMin) ? this.vimeoPlaybackRate - 0.5 : vimeoMin; } this.setPlaybackRate(newRate); } @@ -11125,73 +8163,53 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handleCaptionToggle = function() { var thisObj = this; - var captions; + var captions, ariaPressed; if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it this.hidingPopup = false; return false; } - if (this.captions.length) { - captions = this.captions; - } - else { - captions = []; - } + + captions = (this.captions.length) ? this.captions : []; if (captions.length === 1) { - // When there's only one set of captions, just do an on/off toggle. if (this.captionsOn === true) { - // turn them off this.captionsOn = false; this.prefCaptions = 0; - this.$ccButton.attr('aria-pressed', 'false'); - this.updateCookie('prefCaptions'); + ariaPressed = false; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.unloadModule('captions'); - } - else if (this.usingVimeoCaptions) { - this.vimeoPlayer.disableTextTrack(); - } - else { + } else if (this.usingVimeoCaptions) { + this.vimeoPlayer.disableTextTrack(); + } else { this.$captionsWrapper.hide(); } - } - else { - // captions are off. Turn them on. + } else { this.captionsOn = true; this.prefCaptions = 1; - this.$ccButton.attr('aria-pressed', 'true'); - this.updateCookie('prefCaptions'); + ariaPressed = true; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.loadModule('captions'); - } - else if (this.usingVimeoCaptions) { + } else if (this.usingVimeoCaptions) { this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { - // track.language = the iso code for the language - // track.kind = 'captions' or 'subtitles' - // track.label = the human-readable label }).catch(function(error) { switch (error.name) { case 'InvalidTrackLanguageError': - // no track was available with the specified language - - break; + + break; case 'InvalidTrackError': - // no track was available with the specified language and kind - - break; + + break; default: - // some other error occurred - - break; + + break; } - }); - } - else { + }); + } else { this.$captionsWrapper.show(); } for (var i=0; i<captions.length; i++) { - if (captions[i].def === true) { // this is the default language + if (captions[i].def === true) { this.selectedCaptions = captions[i]; } } @@ -11200,80 +8218,69 @@ if (typeof module !== "undefined" && module.exports) { this.selectedDescriptions = this.descriptions[0]; } } - this.refreshControls('captions'); - } - else { - // there is more than one caption track. - // clicking on a track is handled via caption.js > getCaptionClickFunction() + } else { if (this.captionsPopup && this.captionsPopup.is(':visible')) { this.captionsPopup.hide(); this.hidingPopup = false; this.$ccButton.attr('aria-expanded', 'false') this.waitThenFocus(this.$ccButton); - } - else { + } else { this.closePopups(); if (this.captionsPopup) { this.captionsPopup.show(); this.$ccButton.attr('aria-expanded','true'); - // Gives time to "register" expanded ccButton setTimeout(function() { thisObj.captionsPopup.css('top', thisObj.$ccButton.position().top - thisObj.captionsPopup.outerHeight()); thisObj.captionsPopup.css('left', thisObj.$ccButton.position().left) - // Place focus on the first button (even if another button is checked) thisObj.captionsPopup.find('li').removeClass('able-focus'); - thisObj.captionsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.captionsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } } } + var ariaLabelOn = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); }; - /** - * Gives enough time for DOM changes to take effect before adjusting focus. - * Helpful for allowing screen reading of elements whose state is intermittently changed. - * - * @param {} $el element to focus on - @param {} timeout optional wait time in milliseconds before focus - / AblePlayer.prototype.waitThenFocus = function($el, timeout) { - // Default wait time of 50 ms var _timeout = (timeout === undefined \|\| timeout === null) ? 50 : timeout; - + setTimeout(function() { - $el.focus(); + $el.trigger('focus'); }, _timeout); } AblePlayer.prototype.handleChapters = function () { if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it this.hidingPopup = false; return false; } if (this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); this.hidingPopup = false; - this.$chaptersButton.attr('aria-expanded','false').focus(); - } - else { + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); + } else { this.closePopups(); this.chaptersPopup.show(); this.$chaptersButton.attr('aria-expanded','true'); this.chaptersPopup.css('top', this.$chaptersButton.position().top - this.chaptersPopup.outerHeight()); this.chaptersPopup.css('left', this.$chaptersButton.position().left) - // Highlight the current chapter, if any chapters are checked - // Otherwise, place focus on the first chapter this.chaptersPopup.find('li').removeClass('able-focus'); if (this.chaptersPopup.find('li[aria-checked="true"]').length) { - this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass('able-focus'); - } - else { - this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').focus(); + this.chaptersPopup.find('li[aria-checked="true"]').trigger('focus').addClass('able-focus'); + } else { + this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').trigger('focus'); } } }; @@ -11281,14 +8288,12 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handleDescriptionToggle = function() { this.descOn = !this.descOn; - this.prefDesc = + this.descOn; // convert boolean to integer - this.updateCookie('prefDesc'); + this.prefDesc = + this.descOn; + this.updatePreferences('prefDesc'); if (typeof this.$descDiv !== 'undefined') { if (!this.$descDiv.is(':hidden')) { this.$descDiv.hide(); } - // NOTE: now showing $descDiv here if previously hidden - // that's handled elsewhere, dependent on whether there's text to show } this.initDescription(); this.refreshControls('descriptions'); @@ -11296,164 +8301,109 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handlePrefsClick = function(pref) { - // NOTE: the prefs menu is positioned near the right edge of the player - // This assumes the Prefs button is also positioned in that vicinity - // (last or second-last button the right) - // NOTE: If previously unable to fully populate the Description dialog - // because the Web Speech API failed to getVoices() - // now is a good time to try again - // so the Description dialog can be rebuilt before the user requests it var thisObj, prefsButtonPosition, prefsMenuRight, prefsMenuLeft; thisObj = this; - if (this.speechEnabled === null) { - this.initSpeech('prefs'); + if (this.speechEnabled === null) { + this.initSpeech('prefs'); } if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it this.hidingPopup = false; return false; } if (this.prefsPopup.is(':visible')) { this.prefsPopup.hide(); this.$prefsButton.attr('aria-expanded','false'); - // restore each menu item to original hidden state this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); + this.$prefsButton.trigger('focus'); } - // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; },100); - } - else { + } else { this.closePopups(); this.prefsPopup.show(); this.$prefsButton.attr('aria-expanded','true'); - this.$prefsButton.focus(); // focus first on prefs button to announce expanded state - // give time for focus on button then adjust popup settings and focus + this.$prefsButton.trigger('focus'); setTimeout(function() { prefsButtonPosition = thisObj.$prefsButton.position(); prefsMenuRight = thisObj.$ableDiv.width() - 5; prefsMenuLeft = prefsMenuRight - thisObj.prefsPopup.width(); thisObj.prefsPopup.css('top', prefsButtonPosition.top - thisObj.prefsPopup.outerHeight()); thisObj.prefsPopup.css('left', prefsMenuLeft); - // remove prior focus and set focus on first item; also change tabindex from -1 to 0 thisObj.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','0'); - thisObj.prefsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.prefsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } }; - AblePlayer.prototype.handleHelpClick = function() { - this.setFullscreen(false); - this.helpDialog.show(); - }; - AblePlayer.prototype.handleTranscriptToggle = function () { - var thisObj = this; - - if (this.$transcriptDiv.is(':visible')) { + var visible = this.$transcriptDiv.is(':visible'); + if ( visible ) { this.$transcriptArea.hide(); - this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); this.prefTranscript = 0; - this.$transcriptButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms - // Setting timeout to 100ms is a virtual guarantee of proper functionality - setTimeout(function() { - thisObj.closingTranscript = false; - }, 100); - } - else { - this.positionDraggableWindow('transcript'); - this.$transcriptArea.show(); - // showing transcriptArea has a cascading effect of showing all content within transcriptArea - // need to re-hide the popup menu - this.$transcriptPopup.hide(); - this.$transcriptButton.removeClass('buttonOff').attr('aria-label',this.tt.hideTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.hideTranscript); - this.prefTranscript = 1; - // move focus to first focusable element (window options button) - this.focusNotClick = true; - this.$transcriptArea.find('button').first().focus(); - // wait briefly before resetting stopgap var - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefTranscript'); + if ( this.transcriptType === 'popup' ) { + this.$transcriptButton.trigger('focus').addClass('able-focus'); + setTimeout(function() { + thisObj.closingTranscript = false; + }, 100); + } + } else { + if ( this.transcriptType === 'popup' ) { + this.positionDraggableWindow('transcript'); + this.$transcriptArea.show(); + this.$transcriptPopup.hide(); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.prefTranscript = 1; + this.focusNotClick = true; + this.$transcriptArea.find('button').first().trigger('focus'); + setTimeout(function() { + thisObj.focusNotClick = false; + }, 100); + } else { + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.$transcriptArea.show(); + } + } + this.updatePreferences('prefTranscript'); }; AblePlayer.prototype.handleSignToggle = function () { var thisObj = this; - - if (this.$signWindow.is(':visible')) { + var visible = this.$signWindow.is(':visible'); + if ( visible ) { this.$signWindow.hide(); - this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign); - this.$signButton.find('span.able-clipped').text(this.tt.showSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 0; - this.$signButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button + this.$signButton.trigger('focus').addClass('able-focus'); setTimeout(function() { thisObj.closingSign = false; }, 100); - } - else { + } else { this.positionDraggableWindow('sign'); this.$signWindow.show(); - // showing signWindow has a cascading effect of showing all content within signWindow - // need to re-hide the popup menu this.$signPopup.hide(); - this.$signButton.removeClass('buttonOff').attr('aria-label',this.tt.hideSign); - this.$signButton.find('span.able-clipped').text(this.tt.hideSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 1; this.focusNotClick = true; - this.$signWindow.find('button').first().focus(); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button + this.$signWindow.find('button').first().trigger('focus'); setTimeout(function() { thisObj.focusNotClick = false; }, 100); } - this.updateCookie('prefSign'); + this.updatePreferences('prefSign'); }; - AblePlayer.prototype.isFullscreen = function () { - - // NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen, - // which is defined in setFullscreen() - // This function returns true if any element is fullscreen - // but doesn't tell us whether a particular element is in fullscreen - // (e.g., if there are multiple players on the page) - // The Boolean this.fullscreen is defined separately for each player instance - - if (this.nativeFullscreenSupported()) { - return (document.fullscreenElement \|\| - document.webkitFullscreenElement \|\| - document.webkitCurrentFullscreenElement \|\| - document.mozFullscreenElement \|\| - document.msFullscreenElement) ? true : false; - } - else { - return this.modalFullscreenActive ? true : false; - } - } - AblePlayer.prototype.setFullscreen = function (fullscreen) { if (this.fullscreen == fullscreen) { - // replace isFullscreen() with a Boolean. see function for explanation return; } var thisObj = this; @@ -11461,128 +8411,61 @@ if (typeof module !== "undefined" && module.exports) { var el = $el[0]; if (this.nativeFullscreenSupported()) { - // Note: many varying names for options for browser compatibility. if (fullscreen) { - // Initialize fullscreen - - if (el.requestFullscreen) { - el.requestFullscreen(); + var scroll = { + x: window.pageXOffset \|\| 0, + y: window.pageYOffset \|\| 0 } - else if (el.webkitRequestFullscreen) { - el.webkitRequestFullscreen(); + if (this.prefTranscript === 1) { + this.rePositionDraggableWindow("transcript"); } - else if (el.mozRequestFullscreen) { - el.mozRequestFullscreen(); + if (this.prefSign === 1) { + this.rePositionDraggableWindow("sign"); } - else if (el.msRequestFullscreen) { - el.msRequestFullscreen(); + this.scrollPosition = scroll; + if (el.requestFullscreen) { + el.requestFullscreen(); + } else if (el.webkitRequestFullscreen) { + el.webkitRequestFullscreen(); } this.fullscreen = true; - } - else { - // Exit fullscreen - this.restoringAfterFullscreen = true; + } else { + this.restoringAfterFullscreen = true; if (document.exitFullscreen) { document.exitFullscreen(); - } - else if (document.webkitExitFullscreen) { + } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); - } - else if (document.webkitCancelFullscreen) { + } else if (document.webkitCancelFullscreen) { document.webkitCancelFullscreen(); } - else if (document.mozCancelFullscreen) { - document.mozCancelFullscreen(); + if (this.prefTranscript === 1) { + this.positionDraggableWindow("transcript"); } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); + if (this.prefSign === 1) { + this.positionDraggableWindow("sign"); } this.fullscreen = false; } + } else { } - else { - // Non-native fullscreen support through modal dialog. - // Create dialog on first run through. - if (!this.fullscreenDialog) { - var $dialogDiv = $('<div>'); - // create a hidden alert, communicated to screen readers via aria-describedby - var $fsDialogAlert = $('<p>',{ - 'class': 'able-screenreader-alert' - }).text(this.tt.fullscreen); // In English: "Full screen"; TODO: Add alert text that is more descriptive - $dialogDiv.append($fsDialogAlert); - // now render this as a dialog - this.fullscreenDialog = new AccessibleDialog($dialogDiv, this.$fullscreenButton, 'dialog', true, 'Fullscreen video player', $fsDialogAlert, this.tt.exitFullscreen, '100%', true, function () { thisObj.handleFullscreenToggle() }); - $('body').append($dialogDiv); - } - - // Track whether paused/playing before moving element; moving the element can stop playback. - var wasPaused = this.paused; - - if (fullscreen) { - this.modalFullscreenActive = true; - this.fullscreenDialog.show(); - - // Move player element into fullscreen dialog, then show. - // Put a placeholder element where player was. - this.$modalFullscreenPlaceholder = $('<div class="placeholder">'); - this.$modalFullscreenPlaceholder.insertAfter($el); - $el.appendTo(this.fullscreenDialog.modal); - - // Column left css is 50% by default; set to 100% for full screen. - if ($el === this.$ableColumnLeft) { - $el.width('100%'); - } - var newHeight = $(window).height() - this.$playerDiv.height(); - if (typeof this.$descDiv !== 'undefined') { - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - } - } - else { - this.modalFullscreenActive = false; - if ($el === this.$ableColumnLeft) { - $el.width('50%'); - } - $el.insertAfter(this.$modalFullscreenPlaceholder); - this.$modalFullscreenPlaceholder.remove(); - this.fullscreenDialog.hide(); - } - - // Resume playback if moving stopped it. - if (!wasPaused && this.paused) { - this.playMedia(); - } - } - // add event handlers for changes in fullscreen mode. - // Browsers natively trigger this event with the Escape key, - // in addition to clicking the exit fullscreen button - $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(e) { - // NOTE: e.type = the specific event that fired (in case needing to control for browser-specific idiosyncrasies) + $(document).on('fullscreenchange webkitfullscreenchange', function(e) { if (!thisObj.fullscreen) { - // user has just exited full screen thisObj.restoringAfterFullscreen = true; - } - else if (!thisObj.clickedFullscreenButton) { - // user triggered fullscreenchange without clicking fullscreen button + } else if (!thisObj.clickedFullscreenButton) { thisObj.fullscreen = false; thisObj.restoringAfterFullscreen = true; } thisObj.resizePlayer(); thisObj.refreshControls('fullscreen'); - - // NOTE: The fullscreenchange (or browser-equivalent) event is triggered twice - // when exiting fullscreen via the "Exit fullscreen" button (only once if using Escape) - // Not sure why, but consequently we need to be sure thisObj.clickedFullscreenButton - // continues to be true through both events - // Could use a counter variable to control that (reset to false after the 2nd trigger) - // However, since I don't know why it's happening, and whether it's 100% reliable - // resetting clickedFullscreenButton after a timeout seems to be better approach + if ( thisObj.scrollPosition ) { + scroll = thisObj.scrollPosition; + window.scrollTo( scroll.x, scroll.y ); + } setTimeout(function() { thisObj.clickedFullscreenButton = false; - thisObj.restoringAfterFullscreen = false; - },1000); - }); + thisObj.restoringAfterFullscreen = false; + },100); + }); }; AblePlayer.prototype.handleFullscreenToggle = function () { @@ -11590,249 +8473,218 @@ if (typeof module !== "undefined" && module.exports) { var stillPaused = this.paused; this.setFullscreen(!this.fullscreen); if (stillPaused) { - this.pauseMedia(); // when toggling fullscreen and media is just paused, keep media paused. - } - else if (!stillPaused) { - this.playMedia(); // when toggling fullscreen and media is playing, continue playing. + this.pauseMedia(); + } else if (!stillPaused) { + this.playMedia(); } - // automatically hide controller in fullscreen mode - // then reset back to original setting after exiting fullscreen mode if (this.fullscreen) { this.hideControls = true; if (this.playing) { - // go ahead and hide the controls this.fadeControls('out'); this.controlsHidden = true; } - } - else { - // exit fullscreen mode + } else { this.hideControls = this.hideControlsOriginal; - if (!this.hideControls) { // do not hide controls + if (!this.hideControls) { if (this.controlsHidden) { this.fadeControls('in'); this.controlsHidden = false; } - // if there's an active timeout to fade controls out again, clear it if (this.hideControlsTimeoutStatus === 'active') { window.clearTimeout(this.hideControlsTimeout); this.hideControlsTimeoutStatus = 'clear'; } } } - // don't resizePlayer yet; that will be called in response to the window resize event - // this.resizePlayer(); }; AblePlayer.prototype.handleTranscriptLockToggle = function (val) { - this.autoScrollTranscript = val; // val is boolean - this.prefAutoScrollTranscript = +val; // convert boolean to numeric 1 or 0 for cookie - this.updateCookie('prefAutoScrollTranscript'); + this.autoScrollTranscript = val; + this.prefAutoScrollTranscript = +val; + this.updatePreferences('prefAutoScrollTranscript'); this.refreshControls('transcript'); }; + AblePlayer.prototype.getIcon = function( $button, id, forceImg = false ) { + var iconType = this.iconType; + var iconData = this.getIconData( id ); + iconType = ( null === iconData[3] ) ? 'svg' : iconType; + iconType = ( forceImg === true ) ? 'img' : iconType; - AblePlayer.prototype.showTooltip = function($tooltip) { - - if (($tooltip).is(':animated')) { - $tooltip.stop(true,true).show(); + var existingIcon = $button.find( iconType + '#ableplayer-' + id ); + if ( existingIcon.length > 0 ) { + return; } - else { - $tooltip.stop().show(); + $button.find('svg, img, span').remove(); + + if (iconType === 'font') { + var $buttonIcon = $('<span>', { + 'class': iconData[2], + }); + $button.append( $buttonIcon ); + } else if (iconType === 'svg') { + function getNode(n, v) { + n = document.createElementNS("http://www.w3.org/2000/svg", n); + for (var p in v) { + n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m) { + return "-" + m.toLowerCase(); + }), v[p]); + } + return n; + } + var icon = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ); + icon.setAttribute( 'focusable', 'false' ); + icon.setAttribute( 'aria-hidden', 'true'); + icon.setAttribute( 'viewBox', iconData[0] ); + icon.setAttribute( 'id', 'ableplayer-' + id ); + let path = getNode( 'path', { d: iconData[1] } ); + icon.appendChild( path ); + + $button.append( icon ); + $button.html($button.html()); + } else { + var $buttonImg = $('<img>',{ + 'src': iconData[3], + 'alt': '', + 'role': 'presentation' + }); + $button.append($buttonImg); + $button.find('img').attr('src',iconData[3]); } }; - AblePlayer.prototype.showAlert = function( msg, location ) { - - // location is either of the following: - // 'main' (default) - // 'screenreader (visibly hidden) - // 'sign' (sign language window) - // 'transcript' (trasncript window) - var thisObj, $alertBox, $parentWindow, alertLeft, alertTop; - - thisObj = this; + AblePlayer.prototype.setText = function( $button, text ) { + $button.attr( 'aria-label', text ); + }; - if (location === 'transcript') { - $alertBox = this.$transcriptAlert; - $parentWindow = this.$transcriptArea; - } - else if (location === 'sign') { - $alertBox = this.$signAlert; - $parentWindow = this.$signWindow; - } - else if (location === 'screenreader') { - $alertBox = this.$srAlertBox; - } - else { - $alertBox = this.$alertBox; + AblePlayer.prototype.toggleButtonState = function($button, isOn, onLabel, offLabel, ariaPressed = false, ariaExpanded = false) { + let buttonOff = ( $button.hasClass( 'buttonOff' ) ) ? true : false; + if ( buttonOff && ! isOn \|\| ! buttonOff && isOn ) { + return; } - $alertBox.text(msg).show(); - if (location == 'transcript' \|\| location === 'sign') { - if ($parentWindow.width() > $alertBox.width()) { - alertLeft = $parentWindow.width() / 2 - $alertBox.width() / 2; + if (! isOn) { + $button.addClass('buttonOff').attr('aria-label', offLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'false'); } - else { - // alert box is wider than its container. Position it far left and let it wrap - alertLeft = 10; + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'false' ); } - if (location === 'sign') { - // position alert in the lower third of the sign window (to avoid covering the signer) - alertTop = ($parentWindow.height() / 3) * 2; + } else { + $button.removeClass('buttonOff').attr('aria-label', onLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'true'); } - else if (location === 'transcript') { - // position alert just beneath the toolbar to avoid getting lost among transcript text - alertTop = this.$transcriptToolbar.height() + 30; + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'true' ); } - $alertBox.css({ - top: alertTop + 'px', - left: alertLeft + 'px' - }); } - else if (location !== 'screenreader') { - // The original formula incorporated offset() into the calculation - // but at some point this began resulting in an alert that's off-centered - // Changed in v2.2.17, but here's the original for reference in case needed: - // left: this.$playerDiv.offset().left + (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - $alertBox.css({ - left: (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - }); + }; + + AblePlayer.prototype.showTooltip = function($tooltip) { + + $tooltip.show(); + }; + + AblePlayer.prototype.showAlert = function( msg, location = 'main' ) { + + var thisObj, $alertBox, $parentWindow; + + thisObj = this; + $alertBox = thisObj.$alertBox; + $parentWindow = thisObj.$ableDiv; + if (location === 'transcript') { + $parentWindow = thisObj.$transcriptArea; + } else if (location === 'sign') { + $parentWindow = thisObj.$signWindow; + } else if (location === 'screenreader') { + $alertBox = thisObj.$srAlertBox; } + $alertBox.find('span').text(msg); + $alertBox.appendTo($parentWindow) + $alertBox.css( {'display': 'flex'} ); + if (location !== 'screenreader') { - setTimeout(function () { - $alertBox.fadeOut(300); - }, 3000); + setTimeout( function () { + $alertBox.hide(); + }, 30000 ); } }; AblePlayer.prototype.showedAlert = function (which) { - // returns true if the target alert has already been shown - // useful for throttling alerts that only need to be shown once - // e.g., move alerts with instructions for dragging a window - if (which === 'transcript') { - if (this.showedTranscriptAlert) { - return true; - } - else { - return false; - } - } - else if (which === 'sign') { - if (this.showedSignAlert) { - return true; - } - else { - return false; - } + return this.showedTranscriptAlert ?? false; + } else if (which === 'sign') { + return this.showedSignAlert ?? false; } return false; } - // Resizes all relevant player attributes. AblePlayer.prototype.resizePlayer = function (width, height) { - var captionSizeOkMin, captionSizeOkMax, captionSize, newCaptionSize, newLineHeight; - - var newWidth, newHeight, $iframe, alertTop; + var captionSize, newWidth, newHeight, $iframe; - if (this.mediaType === 'audio') { - return; + if (this.mediaType === 'audio') { + return; } - - if (typeof width !== 'undefined' && typeof height !== 'undefined') { - // this is being called the first time a player is initialized - // width and height were collected from the HTML, YouTube, or Vimeo media API - // so are reflective of the actual size of the media - // use these values to calculate aspectRatio - this.aspectRatio = height / width; - if (this.playerWidth) { - // default width is already defined via a width or data-width attribute. Use that. - newWidth = this.playerWidth; - if (this.playerHeight) { - newHeight = this.playerHeight; - } - else { - newHeight = Math.round(newWidth * this.aspectRatio); - this.playerHeight = newHeight; - } - } - else { - // playerWidth was not defined via HTML attributes - if (this.player === 'html5') { - newWidth = $(window).width(); - } - else { - newWidth = this.$ableWrapper.width(); - } - newHeight = Math.round(newWidth * this.aspectRatio); - } - } - else if (this.fullscreen) { - this.$ableWrapper.addClass('fullscreen'); - newWidth = $(window).width(); - // the 5 pixel buffer is arbitrary, but results in a better fit for all browsers - newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; + if (typeof width !== 'undefined' && typeof height !== 'undefined') { + this.aspectRatio = height / width; + if (this.playerWidth) { + newWidth = this.playerWidth; + if (this.playerHeight) { + newHeight = this.playerHeight; + } else { + newHeight = Math.round(newWidth * this.aspectRatio); + this.playerHeight = newHeight; + } + } else { + newWidth = (this.player === 'html5') ? $(window).width() : this.$ableWrapper.width(); + newHeight = Math.round(newWidth * this.aspectRatio); + } + } else if (this.fullscreen) { + this.$ableWrapper.addClass('fullscreen'); + newWidth = $(window).width(); + newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; this.positionCaptions('overlay'); - } - else { // not fullscreen, and not first time initializing player + } else { this.$ableWrapper.removeClass('fullscreen'); - if (this.player === 'html5') { - if (this.playerWidth) { - newWidth = this.playerWidth; - } - else { - // use full size of window - // player will be downsized to fit container if CSS requires it - newWidth = $(window).width(); - } - } - else { - newWidth = this.$ableWrapper.width(); + if (this.player === 'html5') { + newWidth = (this.playerWidth) ? this.playerWidth : $(window).width(); + } else { + newWidth = this.$ableWrapper.width(); } - newHeight = Math.round(newWidth * this.aspectRatio); - this.positionCaptions(this.prefCaptionsPosition); + newHeight = Math.round(newWidth * this.aspectRatio); + this.positionCaptions(this.prefCaptionsPosition); } if (this.debug) { - - } - // Now size the player with newWidth and newHeight - if (this.player === 'youtube' \|\| this.player === 'vimeo') { - $iframe = this.$ableWrapper.find('iframe'); - if (this.player === 'youtube' && this.youTubePlayer) { - // alternatively, YouTube API offers a method for setting the video size - // this adds width and height attributes to the iframe - // but might have other effects, so best to do it this way - this.youTubePlayer.setSize(newWidth,newHeight); - } - else { - // Vimeo API does not have a method for changing size of player - // Therefore, need to change iframe attributes directly + + } + if (this.player === 'youtube' \|\| this.player === 'vimeo') { + $iframe = this.$ableWrapper.find('iframe'); + if (this.player === 'youtube' && this.youTubePlayer) { + this.youTubePlayer.setSize(newWidth,newHeight); + } else { $iframe.attr({ 'width': newWidth, 'height': newHeight - }); + }); } - if (this.playerWidth && this.playerHeight) { - if (this.fullscreen) { - // remove constraints - $iframe.css({ + if (this.playerWidth && this.playerHeight) { + if (this.fullscreen) { + $iframe.css({ 'max-width': '', 'max-height': '' - }); - } - else { - // use CSS on iframe to enforce explicitly defined size constraints - $iframe.css({ + }); + } else { + $iframe.css({ 'max-width': this.playerWidth + 'px', 'max-height': this.playerHeight + 'px' }); } } - } - else if (this.player === 'html5') { + } else if (this.player === 'html5') { if (this.fullscreen) { this.$media.attr({ 'width': newWidth, @@ -11842,60 +8694,41 @@ if (typeof module !== "undefined" && module.exports) { 'width': newWidth, 'height': newHeight }); - } - else { - // No constraints. Let CSS handle the positioning. + } else { this.$media.removeAttr('width height'); - this.$ableWrapper.css({ - 'width': newWidth + 'px', - 'height': 'auto' - }); - } + this.$ableWrapper.removeAttr( 'style' ); + } } - // Resize captions if (typeof this.$captionsDiv !== 'undefined') { - // Font-size is too small in full screen view - // use viewport units (vw) instead - // % units work fine if not fullscreen - // prefCaptionSize is expressed as a percentage - captionSize = parseInt(this.prefCaptionsSize,10); - if (this.fullscreen) { - captionSize = (captionSize / 100) + 'vw'; + var isSmallScreen = false; + var windowWidth = window.screen.width; + if ( windowWidth < 1200 ) { + isSmallScreen = true; } - else { - captionSize = captionSize + '%'; + captionSize = parseInt(this.prefCaptionsSize,10); + if (this.fullscreen && ! isSmallScreen ) { + captionSize = (captionSize / 100) + 'vw'; + } else if ( this.fullscreen && isSmallScreen ) { + captionSize = '1.2rem'; + } else { + captionSize = captionSize + '%'; } this.$captionsDiv.css({ 'font-size': captionSize }); } - - // Reposition alert message (video player only) - // just below the vertical center of the mediaContainer - // hopefully above captions, but not too far from the controller bar - if (this.mediaType === 'video') { - alertTop = Math.round(this.$mediaContainer.height() / 3) * 2; - this.$alertBox.css({ - top: alertTop + 'px' - }); - } - - this.refreshControls(); + this.refreshControls(); }; AblePlayer.prototype.retrieveOffscreenWindow = function( which, width, height ) { - // check to be sure popup windows ('transcript' or 'sign') are positioned on-screen - // (they sometimes disappear off-screen when entering fullscreen mode) - // if off-screen, recalculate so they are back on screen var window, windowPos, windowTop, windowLeft, windowRight, windowWidth, windowBottom, windowHeight; if (which == 'transcript') { window = this.$transcriptArea; - } - else if (which == 'sign') { + } else if (which == 'sign') { window = this.$signWindow; } windowWidth = window.width(); @@ -11906,121 +8739,73 @@ if (typeof module !== "undefined" && module.exports) { windowRight = windowLeft + windowWidth; windowBottom = windowTop + windowHeight; - if (windowTop < 0) { // off-screen to the top + if (windowTop < 0) { windowTop = 10; window.css('top',windowTop); } - if (windowLeft < 0) { // off-screen to the left + if (windowLeft < 0) { windowLeft = 10; window.css('left',windowLeft); } - if (windowRight > width) { // off-screen to the right + if (windowRight > width) { windowLeft = (width - 20) - windowWidth; window.css('left',windowLeft); } - if (windowBottom > height) { // off-screen to the bottom + if (windowBottom > height) { windowTop = (height - 10) - windowHeight; window.css('top',windowTop); } }; - AblePlayer.prototype.getHighestZIndex = function() { - - // returns the highest z-index on page - // used to ensure dialogs (or potentially other windows) are on top - - var max, $elements, z; - max = 0; - - // exclude the Able Player dialogs and windows - $elements = $('body ').not('.able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area'); - - $elements.each(function(){ - z = $(this).css('z-index'); - if (Number.isInteger(+z)) { // work only with integer values, not 'auto' - if (parseInt(z) > max) { - max = parseInt(z); - } - } - }); - return max; - }; - AblePlayer.prototype.updateZIndex = function(which) { - // update z-index of 'transcript' or 'sign', relative to each other - // direction is always 'up' (i.e., move window to top) - // windows come to the top when the user clicks on them - var defHighZ, defLowZ, highestZ, transcriptZ, signZ, newHighZ, newLowZ; + var defHighZ, defLowZ, transcriptZ, signZ, newHighZ, newLowZ; - // set the default z-indexes, as defined in ableplayer.css - defHighZ = 8000; // by default, assigned to the sign window - defLowZ = 7000; // by default, assigned to the transcript area - highestZ = this.getHighestZIndex(); // highest z-index on the page, excluding Able Player windows & modals + defHighZ = 8000; + defLowZ = 7000; - // NOTE: Although highestZ is collected here, it currently isn't used. - // If something on the page has a higher z-index than the transcript or sign window, do we care? - // Excluding it here assumes "No". Our immediate concern is with the relationship between our own components. - // If we elevate our z-indexes so our content is on top, we run the risk of starting a z-index war. if (typeof this.$transcriptArea === 'undefined' \|\| typeof this.$signWindow === 'undefined' ) { - // at least one of the windows doesn't exist, so there's no conflict - // since z-index may have been stored to a cookie on another page, need to restore default if (typeof this.$transcriptArea !== 'undefined') { transcriptZ = parseInt(this.$transcriptArea.css('z-index')); if (transcriptZ > defLowZ) { - // restore to the default this.$transcriptArea.css('z-index',defLowZ); } - } - else if (typeof this.$signWindow !== 'undefined') { + } else if (typeof this.$signWindow !== 'undefined') { signZ = parseInt(this.$signWindow.css('z-index')); if (signZ > defHighZ) { - // restore to the default this.$signWindow.css('z-index',defHighZ); } } return false; } - // both windows exist - // get current values transcriptZ = parseInt(this.$transcriptArea.css('z-index')); signZ = parseInt(this.$signWindow.css('z-index')); if (transcriptZ === signZ) { - // the two windows are equal; restore defaults (the target window will be on top) newHighZ = defHighZ; newLowZ = defLowZ; - } - else if (transcriptZ > signZ) { + } else if (transcriptZ > signZ) { if (which === 'transcript') { - // transcript is already on top; nothing to do return false; - } - else { - // swap z's + } else { newHighZ = transcriptZ; newLowZ = signZ; } - } - else { // signZ is greater + } else { if (which === 'sign') { - // sign is already on top; nothing to do return false; - } - else { + } else { newHighZ = signZ; newLowZ = transcriptZ; } } - // now assign the new values if (which === 'transcript') { this.$transcriptArea.css('z-index',newHighZ); this.$signWindow.css('z-index',newLowZ); - } - else if (which === 'sign') { + } else if (which === 'sign') { this.$signWindow.css('z-index',newHighZ); this.$transcriptArea.css('z-index',newLowZ); } @@ -12028,42 +8813,29 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.syncTrackLanguages = function (source, language) { - // this function is called when the player is built (source == 'init') - // and again when user changes the language of either 'captions' or 'transcript' - // It syncs the languages of chapters, descriptions, and metadata tracks - // NOTE: Caption and transcript languages are somewhat independent from one another - // If a user changes the caption language, the transcript follows - // However, if a user changes the transcript language, this only affects the transcript - // This was a group decision based on the belief that users may want a transcript - // that is in a different language than the captions - var i, captions, descriptions, chapters, meta, langHasChanged; + var i, captions, descriptions, chapters, meta; - // Captions for (i = 0; i < this.captions.length; i++) { if (this.captions[i].language === language) { captions = this.captions[i]; } } - // Chapters for (i = 0; i < this.chapters.length; i++) { if (this.chapters[i].language === language) { chapters = this.chapters[i]; } } - // Descriptions for (i = 0; i < this.descriptions.length; i++) { if (this.descriptions[i].language === language) { descriptions = this.descriptions[i]; } } - // Metadata for (i = 0; i < this.meta.length; i++) { if (this.meta[i].language === language) { meta = this.meta[i]; } } - // regardless of source... this.transcriptLang = language; if (source === 'init' \|\| source === 'captions') { this.captionLang = language; @@ -12075,25 +8847,19 @@ if (typeof module !== "undefined" && module.exports) { this.transcriptChapters = chapters; this.transcriptDescriptions = descriptions; this.updateChaptersList(); - // the following was commented out in Oct/Nov 2018. - // chapters popup is setup automatically when setupPopups() is called later with no param - // not sure why it was included here. - // this.setupPopups('chapters'); - } - else if (source === 'transcript') { + } else if (source === 'transcript') { this.transcriptCaptions = captions; this.transcriptChapters = chapters; this.transcriptDescriptions = descriptions; } if (this.selectedDescriptions) { - // updating description voice to match new description language - this.setDescriptionVoice(); - if (this.$sampleDescDiv) { - if (this.sampleText) { - for (i = 0; i < this.sampleText.length; i++) { - if (this.sampleText[i].lang === this.selectedDescriptions.language) { - this.currentSampleText = this.sampleText[i]['text']; - this.$sampleDescDiv.html(this.currentSampleText); + this.setDescriptionVoice(); + if (this.$sampleDescDiv) { + if (this.sampleText) { + for (i = 0; i < this.sampleText.length; i++) { + if (this.sampleText[i].lang === this.selectedDescriptions.language) { + this.currentSampleText = this.sampleText[i]['text']; + this.$sampleDescDiv.html(this.currentSampleText); } } } @@ -12124,13 +8890,10 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.updateCaptionsMenu = function (lang) { - // uncheck all previous menu items this.captionsPopup.find("li").attr("aria-checked", "false"); if (typeof lang === "undefined") { - // check the last menu item (captions off) this.captionsPopup.find("li").last().attr("aria-checked", "true"); } else { - // check the newly selected lang this.captionsPopup .find("li[lang=" + lang + "]") .attr("aria-checked", "true"); @@ -12138,8 +8901,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.getCaptionClickFunction = function (track) { - // Returns the function used when a caption is clicked in the captions menu. - // Not called if user clicks "Captions off". Instead, that triggers getCaptionOffFunction() var thisObj = this; return function () { @@ -12148,9 +8909,6 @@ if (typeof module !== "undefined" && module.exports) { thisObj.currentCaption = -1; if (thisObj.usingYouTubeCaptions) { if (thisObj.captionsOn) { - // Two things must be true in order for setOption() to work: - // The YouTube caption module must be loaded - // and the video must have started playing if ( thisObj.youTubePlayer.getOptions("captions") && thisObj.startedPlaying @@ -12159,9 +8917,6 @@ if (typeof module !== "undefined" && module.exports) { languageCode: thisObj.captionLang, }); } else { - // the two conditions were not met - // try again to set the language after onApiChange event is triggered - // meanwhile, the following variable will hold the value thisObj.captionLangPending = thisObj.captionLang; } } else { @@ -12178,28 +8933,21 @@ if (typeof module !== "undefined" && module.exports) { thisObj.vimeoPlayer .enableTextTrack(thisObj.captionLang) .then(function (track) { - // track.language = the iso code for the language - // track.kind = 'captions' or 'subtitles' - // track.label = the human-readable label }) .catch(function (error) { switch (error.name) { case "InvalidTrackLanguageError": - // no track was available with the specified language - - break; + + break; case "InvalidTrackError": - // no track was available with the specified language and kind - - break; + + break; default: - // some other error occurred - - break; + + break; } }); } else { - // using local track elements for captions/subtitles thisObj.syncTrackLanguages("captions", thisObj.captionLang); if (!thisObj.swappingSrc) { thisObj.updateCaption(thisObj.elapsed); @@ -12207,30 +8955,24 @@ if (typeof module !== "undefined" && module.exports) { } } thisObj.captionsOn = true; - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleCaptionToggle()) thisObj.hidingPopup = true; thisObj.captionsPopup.hide(); thisObj.$ccButton.attr("aria-expanded", "false"); if (thisObj.mediaType === "audio") { thisObj.$captionsContainer.removeClass("captions-off"); } - // Ensure stopgap gets cancelled if handleCaptionToggle() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar setTimeout(function () { thisObj.hidingPopup = false; }, 100); thisObj.updateCaptionsMenu(thisObj.captionLang); thisObj.waitThenFocus(thisObj.$ccButton); - // save preference to cookie thisObj.prefCaptions = 1; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); thisObj.refreshControls("captions"); }; }; - // Returns the function used when the "Captions Off" button is clicked in the captions tooltip. AblePlayer.prototype.getCaptionOffFunction = function () { var thisObj = this; return function () { @@ -12246,22 +8988,17 @@ if (typeof module !== "undefined" && module.exports) { thisObj.$captionsContainer.addClass("captions-off"); } - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleCaptionToggle()) thisObj.hidingPopup = true; thisObj.captionsPopup.hide(); thisObj.$ccButton.attr("aria-expanded", "false"); - // Ensure stopgap gets cancelled if handleCaptionToggle() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar setTimeout(function () { thisObj.hidingPopup = false; }, 100); thisObj.updateCaptionsMenu(); thisObj.waitThenFocus(thisObj.$ccButton); - // save preference to cookie thisObj.prefCaptions = 0; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); if (!this.swappingSrc) { thisObj.refreshControls("captions"); thisObj.updateCaption(); @@ -12287,16 +9024,11 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisCaption !== "undefined") { if (this.currentCaption !== thisCaption) { - // it's time to load the new caption into the container div - captionText = this.flattenCueForCaption(cues[thisCaption]).replace( - /\n/g, - "<br>" - ); + captionText = this.flattenCueForCaption(cues[thisCaption]).replace( /\n/g, "<br>" ); this.$captionsDiv.html(captionText); this.currentCaption = thisCaption; if (captionText.length === 0) { - // hide captionsDiv; otherwise background-color is visible due to padding this.$captionsDiv.css("display", "none"); } else { this.$captionsDiv.css("display", "inline-block"); @@ -12309,24 +9041,10 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.flattenCueForCaption = function (cue) { - // Takes a cue and returns the caption text to display - // Also used for chapters - // Support for 'i' and 'b' tags added in 2.3.66 - // TODO: Add support for 'c' (class) and 'ruby' - // c (class): <c.myClass1.myClass2>Some text</c> - // Classes can be used to modify other tags too (e.g., <v.loud>) - // If <c> tag, should be rendered as a <span> - // ruby: http://www.w3schools.com/tags/tag_ruby.asp - // WebVTT also supports 'u' (underline) - // I see no reason to support that in Able Player. - // If it's available authors are likely to use it incorrectly - // where <i> or <b> should be used instead - // Here are the rare use cases where an underline is appropriate on the web: - // http://html5doctor.com/u-element/ var result = []; @@ -12373,24 +9091,23 @@ if (typeof module !== "undefined" && module.exports) { switch (pref) { case "prefCaptionsFont": - options[0] = ["serif", this.tt.serif]; - options[1] = ["sans-serif", this.tt.sans]; - options[2] = ["cursive", this.tt.cursive]; - options[3] = ["fantasy", this.tt.fantasy]; - options[4] = ["monospace", this.tt.monospace]; + options[0] = ["serif", this.translate( 'serif', 'serif' )]; + options[1] = ["sans-serif", this.translate( 'sans', 'sans-serif' )]; + options[2] = ["cursive", this.translate( 'cursive', 'cursive' )]; + options[3] = ["fantasy", this.translate( 'fantasy', 'fantasy' )]; + options[4] = ["monospace", this.translate( 'monospace', 'monospace' )]; break; case "prefCaptionsColor": case "prefCaptionsBGColor": - // HTML color values must be in English - options[0] = ["white", this.tt.white]; - options[1] = ["yellow", this.tt.yellow]; - options[2] = ["green", this.tt.green]; - options[3] = ["cyan", this.tt.cyan]; - options[4] = ["blue", this.tt.blue]; - options[5] = ["magenta", this.tt.magenta]; - options[6] = ["red", this.tt.red]; - options[7] = ["black", this.tt.black]; + options[0] = ["white", this.translate( 'white', 'white' )]; + options[1] = ["yellow", this.translate( 'yellow', 'yellow' )]; + options[2] = ["green", this.translate( 'green', 'green' )]; + options[3] = ["cyan", this.translate( 'cyan', 'cyan' )]; + options[4] = ["blue", this.translate( 'blue', 'blue' )]; + options[5] = ["magenta", this.translate( 'magenta', 'magenta' )]; + options[6] = ["red", this.translate( 'red', 'red' )]; + options[7] = ["black", this.translate( 'black', 'black' )]; break; case "prefCaptionsSize": @@ -12410,8 +9127,8 @@ if (typeof module !== "undefined" && module.exports) { break; case "prefCaptionsStyle": - options[0] = this.tt.captionsStylePopOn; - options[1] = this.tt.captionsStyleRollUp; + options[0] = this.translate( 'captionsStylePopOn', 'Pop-on' ); + options[1] = this.translate( 'captionsStyleRollUp', 'Roll-up' ); break; case "prefCaptionsPosition": @@ -12423,10 +9140,8 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.translatePrefs = function (pref, value, outputFormat) { - // translate current value of pref to a value supported by outputformat if (outputFormat == "youtube") { if (pref === "size") { - // YouTube font sizes are a range from -1 to 3 (0 = default) switch (value) { case "75%": return -1; @@ -12445,17 +9160,12 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.stylizeCaptions = function ($element, pref) { - // $element is the jQuery element containing the captions - // this function handles stylizing of the sample caption text in the Prefs dialog - // plus the actual production captions - // TODO: consider applying the same user prefs to visible text-based description - var property, newValue, opacity, lineHeight; + var property, newValue, opacity; if (typeof $element !== "undefined") { if (pref == "prefCaptionsPosition") { this.positionCaptions(); } else if (typeof pref !== "undefined") { - // just change the one property that user just changed if (pref === "prefCaptionsFont") { property = "font-family"; } else if (pref === "prefCaptionsSize") { @@ -12475,7 +9185,6 @@ if (typeof module !== "undefined" && module.exports) { } $element.css(property, newValue); } else { - // no property was specified, update all styles with current saved prefs opacity = parseFloat(this.prefCaptionsOpacity) / 100.0; $element.css({ "font-family": this.prefCaptionsFont, @@ -12491,7 +9200,6 @@ if (typeof module !== "undefined" && module.exports) { } } if (this.prefCaptionsPosition === "below") { - // also need to add the background color to the wrapper div if (typeof this.$captionsWrapper !== "undefined") { this.$captionsWrapper.css({ "background-color": this.prefCaptionsBGColor, @@ -12499,7 +9207,6 @@ if (typeof module !== "undefined" && module.exports) { }); } } else if (this.prefCaptionsPosition === "overlay") { - // no background color for overlay wrapper, captions are displayed in-line if (typeof this.$captionsWrapper !== "undefined") { this.$captionsWrapper.css({ "background-color": "transparent", @@ -12512,9 +9219,6 @@ if (typeof module !== "undefined" && module.exports) { } }; AblePlayer.prototype.positionCaptions = function (position) { - // set caption position to either 'overlay' or 'below' - // if position parameter was passed to this function, use that - // otherwise use user preference if (typeof position === "undefined") { position = this.prefCaptionsPosition; } @@ -12523,7 +9227,6 @@ if (typeof module !== "undefined" && module.exports) { this.$captionsWrapper .removeClass("able-captions-overlay") .addClass("able-captions-below"); - // also need to update in-line styles this.$captionsWrapper.css({ "background-color": this.prefCaptionsBGColor, opacity: "1", @@ -12545,18 +9248,17 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.populateChaptersDiv = function() { - var headingLevel, headingType, headingId, $chaptersHeading, - $chaptersList; - + var headingLevel, headingType, headingId, $chaptersHeading; + if ( ! this.chaptersDivLocation ) { + return; + } if ($('#' + this.chaptersDivLocation)) { this.$chaptersDiv = $('#' + this.chaptersDivLocation); this.$chaptersDiv.addClass('able-chapters-div'); - // empty content from previous build before starting fresh - this.$chaptersDiv.empty(); + this.$chaptersDiv.empty(); - // add optional header if (this.chaptersTitle) { headingLevel = this.getNextHeadingLevel(this.$chaptersDiv); headingType = 'h' + headingLevel.toString(); @@ -12570,14 +9272,12 @@ if (typeof module !== "undefined" && module.exports) { this.$chaptersNav = $('<nav>'); if (this.chaptersTitle) { - this.$chaptersNav.attr('aria-labelledby',headingId); - } - else { - this.$chaptersNav.attr('aria-label',this.tt.chapters); + this.$chaptersNav.attr( 'aria-labelledby', headingId ); + } else { + this.$chaptersNav.attr( 'aria-label', this.translate( 'chapters', 'Chapters' ) ); } this.$chaptersDiv.append(this.$chaptersNav); - // populate this.$chaptersNav with a list of chapters this.updateChaptersList(); } }; @@ -12585,32 +9285,23 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.updateChaptersList = function() { var thisObj, cues, $chaptersList, c, thisChapter, - $chapterItem, $chapterButton, buttonId, hasDefault, - getClickFunction, $clickedItem, $chaptersList, thisChapterIndex; + $chapterItem, $chapterButton, hasDefault, + getClickFunction, $clickedItem, $chaptersList; thisObj = this; - // TODO: Update this so it can change the chapters popup menu - // currently it only works if chapters are in an external container if (!this.$chaptersNav) { return false; } if (typeof this.useChapterTimes === 'undefined') { - if (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) { - this.useChapterTimes = true; - } - else { - this.useChapterTimes = false; - } + this.useChapterTimes = (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) ? true : false; } if (this.useChapterTimes) { cues = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { cues = this.chapters[0].cues; - } - else { + } else { cues = []; } if (cues.length > 0) { @@ -12623,24 +9314,20 @@ if (typeof module !== "undefined" && module.exports) { 'val': thisChapter }).text(this.flattenCueForCaption(cues[thisChapter])); - // add event listeners getClickFunction = function (time) { return function () { thisObj.seekTrigger = 'chapter'; $clickedItem = $(this).closest('li'); $chaptersList = $(this).closest('ul').find('li'); - thisChapterIndex = $chaptersList.index($clickedItem); $chaptersList.removeClass('able-current-chapter') .children('button').removeAttr('aria-current'); $clickedItem.addClass('able-current-chapter') .children('button').attr('aria-current','true'); - // Need to updateChapter before seeking to it - // Otherwise seekBar is redrawn with wrong chapterDuration and/or chapterTime thisObj.updateChapter(time); thisObj.seekTo(time); } }; - $chapterButton.on('click',getClickFunction(cues[thisChapter].start)); // works with Enter too + $chapterButton.on('click',getClickFunction(cues[thisChapter].start)); $chapterButton.on('focus',function() { $(this).closest('ul').find('li').removeClass('able-focus'); $(this).closest('li').addClass('able-focus'); @@ -12656,7 +9343,6 @@ if (typeof module !== "undefined" && module.exports) { $(this).closest('li').removeClass('able-focus'); }); - // put it all together $chapterItem.append($chapterButton); $chaptersList.append($chapterItem); if (this.defaultChapter === cues[thisChapter].id) { @@ -12666,7 +9352,6 @@ if (typeof module !== "undefined" && module.exports) { } } if (!hasDefault) { - // select the first chapter this.currentChapter = cues[0]; $chaptersList.find('button').first().attr('aria-current','true') .parent('li').addClass('able-current-chapter'); @@ -12678,11 +9363,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.seekToChapter = function(chapterId) { - // step through chapters looking for matching ID var i=0; while (i < this.selectedChapters.cues.length) { if (this.selectedChapters.cues[i].id == chapterId) { - // found the target chapter! Seek to it this.seekTo(this.selectedChapters.cues[i].start); this.updateChapter(this.selectedChapters.cues[i].start); break; @@ -12693,12 +9376,11 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.updateChapter = function (now) { - // as time-synced chapters change during playback, track changes in current chapter if (typeof this.selectedChapters === 'undefined') { return; } - var chapters, i, thisChapterIndex, chapterLabel; + var chapters, i, thisChapterIndex; chapters = this.selectedChapters.cues; for (i = 0; i < chapters.length; i++) { @@ -12709,14 +9391,12 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisChapterIndex !== 'undefined') { if (this.currentChapter !== chapters[thisChapterIndex]) { - // this is a new chapter this.currentChapter = chapters[thisChapterIndex]; if (this.useChapterTimes) { this.chapterDuration = this.getChapterDuration(); - this.seekIntervalCalculated = false; // will be recalculated in setSeekInterval() + this.seekIntervalCalculated = false; } if (typeof this.$chaptersDiv !== 'undefined') { - // chapters are listed in an external container this.$chaptersDiv.find('ul').find('li') .removeClass('able-current-chapter') .children('button').removeAttr('aria-current'); @@ -12730,8 +9410,6 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getChapterDuration = function () { - // called if this.seekbarScope === 'chapter' - // get duration of the current chapter var lastChapterIndex, chapterEnd; @@ -12743,25 +9421,19 @@ if (typeof module !== "undefined" && module.exports) { } lastChapterIndex = this.selectedChapters.cues.length-1; if (this.selectedChapters.cues[lastChapterIndex] == this.currentChapter) { - // this is the last chapter if (this.currentChapter.end !== this.duration) { - // chapter ends before or after video ends, adjust chapter end to match video end chapterEnd = this.duration; this.currentChapter.end = this.duration; - } - else { + } else { chapterEnd = this.currentChapter.end; } - } - else { // this is not the last chapter + } else { chapterEnd = this.currentChapter.end; } return chapterEnd - this.currentChapter.start; }; AblePlayer.prototype.getChapterElapsed = function () { - // called if this.seekbarScope === 'chapter' - // get current elapsed time, relative to the current chapter duration if (typeof this.currentChapter === 'undefined') { return 0; @@ -12769,47 +9441,37 @@ if (typeof module !== "undefined" && module.exports) { if (this.elapsed > this.currentChapter.start) { return this.elapsed - this.currentChapter.start; - } - else { + } else { return 0; } }; AblePlayer.prototype.convertChapterTimeToVideoTime = function (chapterTime) { - // chapterTime is the time within the current chapter - // return the same time, relative to the entire video if (typeof this.currentChapter !== 'undefined') { var newTime = this.currentChapter.start + chapterTime; if (newTime > this.currentChapter.end) { return this.currentChapter.end; - } - else { + } else { return newTime; } - } - else { + } else { return chapterTime; } }; AblePlayer.prototype.getChapterClickFunction = function (time) { - // Returns the function used when a chapter is clicked in the chapters menu. var thisObj = this; return function () { thisObj.seekTrigger = 'chapter'; thisObj.seekTo(time); - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleChapters()) thisObj.hidingPopup = true; thisObj.chaptersPopup.hide(); - // Ensure stopgap gets cancelled if handleChapters() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar setTimeout(function() { thisObj.hidingPopup = false; }, 100); - thisObj.$chaptersButton.focus(); + thisObj.$chaptersButton.trigger('focus'); } }; @@ -12854,46 +9516,43 @@ if (typeof module !== "undefined" && module.exports) { if (typeof thisMeta !== "undefined") { if (this.currentMeta !== thisMeta) { if (this.metaType === "text") { - // it's time to load the new metadata cue into the container div this.$metaDiv.html( this.flattenCueForMeta(cues[thisMeta]).replace(/\n/g, "<br>") ); } else if (this.metaType === "selector") { - // it's time to show content referenced by the designated selector(s) cueText = this.flattenCueForMeta(cues[thisMeta]); cueLines = cueText.split("\n"); for (i = 0; i < cueLines.length; i++) { - line = $.trim(cueLines[i]); + line = cueLines[i].trim(); if (line.toLowerCase().trim() === "pause") { - // don't show big play button when pausing via metadata this.hideBigPlayButton = true; this.pauseMedia(); } else if (line.toLowerCase().substring(0, 6) == "focus:") { focusTarget = line.substring(6).trim(); if ($(focusTarget).length) { - $(focusTarget).focus(); + $(focusTarget).trigger('focus'); } } else { if ($(line).length) { - // selector exists this.currentMeta = thisMeta; showDuration = parseInt($(line).attr("data-duration")); if ( typeof showDuration !== "undefined" && !isNaN(showDuration) ) { - $(line).show().delay(showDuration).fadeOut(); + $(line).show(); + const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + delay(showDuration).then(() => { + $(line).hide(); + }); } else { - // no duration specified. Just show the element until end time specified in VTT file $(line).show(); } - // add to array of visible selectors so it can be hidden at end time this.visibleSelectors.push(line); tempSelectors.push(line); } } } - // now step through this.visibleSelectors and remove anything that's stale if (this.visibleSelectors && this.visibleSelectors.length) { if (this.visibleSelectors.length !== tempSelectors.length) { for (i = this.visibleSelectors.length - 1; i >= 0; i--) { @@ -12907,7 +9566,6 @@ if (typeof module !== "undefined" && module.exports) { } } } else { - // there is currently no metadata. Empty stale content if (typeof this.$metaDiv !== "undefined") { this.$metaDiv.html(""); } @@ -12915,14 +9573,12 @@ if (typeof module !== "undefined" && module.exports) { for (i = 0; i < this.visibleSelectors.length; i++) { $(this.visibleSelectors[i]).hide(); } - // reset array this.visibleSelectors = []; } this.currentMeta = -1; } }; - // Takes a cue and returns the metadata text to display for it. AblePlayer.prototype.flattenCueForMeta = function (cue) { var result = []; @@ -12954,29 +9610,21 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.setupTranscript = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - if (this.usingYouTubeCaptions \|\| this.usingVimeoCaptions) { - // a transcript is not possible + if (this.usingYouTubeCaptions \|\| this.usingVimeoCaptions \|\| this.hideTranscriptButton ) { this.transcriptType = null; deferred.resolve(); } else { if (!this.transcriptType) { - // previously set transcriptType to null since there are no <track> elements - // check again to see if captions have been collected from other sources (e.g., YouTube) if (this.captions.length) { - // captions are possible! Use the default type (popup) - // if other types ('external' and 'manual') were desired, transcriptType would not be null here this.transcriptType = "popup"; } } if (this.transcriptType) { - if ( - this.transcriptType === "popup" \|\| - this.transcriptType === "external" - ) { + if ( this.transcriptType === "popup" \|\| this.transcriptType === "external" ) { this.injectTranscriptArea(); deferred.resolve(); } else if (this.transcriptType === "manual") { @@ -12984,7 +9632,6 @@ if (typeof module !== "undefined" && module.exports) { deferred.resolve(); } } else { - // there is no transcript deferred.resolve(); } } @@ -13003,7 +9650,7 @@ if (typeof module !== "undefined" && module.exports) { this.$transcriptArea = $("<div>", { class: "able-transcript-area", role: "dialog", - "aria-label": this.tt.transcriptTitle, + "aria-label": this.translate( 'transcriptTitle', 'Transcript' ), }); this.$transcriptToolbar = $("<div>", { @@ -13014,30 +9661,30 @@ if (typeof module !== "undefined" && module.exports) { class: "able-transcript", }); - // Transcript toolbar content - // Add auto Scroll checkbox this.$autoScrollTranscriptCheckbox = $("<input>", { id: "autoscroll-transcript-checkbox-" + this.mediaId, type: "checkbox", }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); - this.$transcriptToolbar.append( - $autoScrollLabel, - this.$autoScrollTranscriptCheckbox - ); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); + $autoScrollContainer = $( '<div>', { + 'class': 'autoscroll-transcript' + }); + $autoScrollContainer.append( + $autoScrollLabel, + this.$autoScrollTranscriptCheckbox + ); + this.$transcriptToolbar.append( $autoScrollContainer ); - // Add field for selecting a transcript language - // Only necessary if there is more than one language if (this.captions.length > 1) { $languageSelectWrapper = $("<div>", { class: "transcript-language-select-wrapper", }); $languageSelectLabel = $("<label>", { for: "transcript-language-select-" + this.mediaId, - }).text(this.tt.language); + }).text( this.translate( 'language', 'Language' ) ); this.$transcriptLanguageSelect = $("<select>", { id: "transcript-language-select-" + this.mediaId, }); @@ -13061,19 +9708,17 @@ if (typeof module !== "undefined" && module.exports) { } this.$transcriptArea.append(this.$transcriptToolbar, this.$transcriptDiv); - // If client has provided separate transcript location, put it there. - // Otherwise append it to the body if (this.transcriptDivLocation) { + this.$transcriptArea.removeAttr( 'role' ); + this.$transcriptArea.removeAttr( 'aria-label' ); $("#" + this.transcriptDivLocation).append(this.$transcriptArea); } else { this.$ableWrapper.append(this.$transcriptArea); } - // make it draggable (popup only; NOT external transcript) if (!this.transcriptDivLocation) { this.initDragDrop("transcript"); if (this.prefTranscript === 1) { - // transcript is on. Go ahead and position it this.positionDraggableWindow( "transcript", this.getDefaultWidth("transcript") @@ -13081,7 +9726,6 @@ if (typeof module !== "undefined" && module.exports) { } } - // If client has provided separate transcript location, override user's preference for hiding transcript if (!this.prefTranscript && !this.transcriptDivLocation) { this.$transcriptArea.hide(); } @@ -13090,7 +9734,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addTranscriptAreaEvents = function () { var thisObj = this; - this.$autoScrollTranscriptCheckbox.click(function () { + this.$autoScrollTranscriptCheckbox.on( 'click', function () { thisObj.handleTranscriptLockToggle( thisObj.$autoScrollTranscriptCheckbox.prop("checked") ); @@ -13099,8 +9743,6 @@ if (typeof module !== "undefined" && module.exports) { 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) { thisObj.autoScrollTranscript = false; thisObj.refreshControls("transcript"); @@ -13110,9 +9752,7 @@ if (typeof module !== "undefined" && module.exports) { ); if (typeof this.$transcriptLanguageSelect !== "undefined") { - this.$transcriptLanguageSelect.on("click mousedown", function (e) { - // execute default behavior - // prevent propagation of mouse event to toolbar or window + this.$transcriptLanguageSelect.on('click', function (e) { e.stopPropagation(); }); @@ -13125,9 +9765,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.transcriptSrcHasRequiredParts = function () { - // check the external transcript to be sure it has all required components - // return true or false - // in the process, define all the needed variables and properties if ($("#" + this.transcriptSrc).length) { this.$transcriptArea = $("#" + this.transcriptSrc); @@ -13160,9 +9797,8 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); - // Add an auto-scroll checkbox to the toolbar. this.$autoScrollTranscriptCheckbox = $autoScrollInput; this.$transcriptToolbar.append( $autoScrollLabel, @@ -13180,8 +9816,6 @@ if (typeof module !== "undefined" && module.exports) { if (this.transcriptType === "external" \|\| this.transcriptType === "popup") { var chapters, captions, descriptions; - // Language of transcript might be different than language of captions - // But both are in sync by default if (this.transcriptLang) { captions = this.transcriptCaptions.cues; } else { @@ -13194,11 +9828,9 @@ if (typeof module !== "undefined" && module.exports) { } } - // setup chapters if (this.transcriptChapters) { chapters = this.transcriptChapters.cues; } else if (this.chapters.length > 0) { - // Try and match the caption language. if (this.transcriptLang) { for (var i = 0; i < this.chapters.length; i++) { if (this.chapters[i].language === this.transcriptLang) { @@ -13211,11 +9843,9 @@ if (typeof module !== "undefined" && module.exports) { } } - // setup descriptions if (this.transcriptDescriptions) { descriptions = this.transcriptDescriptions.cues; } else if (this.descriptions.length > 0) { - // Try and match the caption language. if (this.transcriptLang) { for (var i = 0; i < this.descriptions.length; i++) { if (this.descriptions[i].language === this.transcriptLang) { @@ -13234,7 +9864,6 @@ if (typeof module !== "undefined" && module.exports) { descriptions \|\| [] ); this.$transcriptDiv.html(div); - // reset transcript selected <option> to this.transcriptLang if (this.$transcriptLanguageSelect) { this.$transcriptLanguageSelect .find("option:selected") @@ -13247,32 +9876,23 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; - // Make transcript tabbable if preference is turned on. if (this.prefTabbable === 1) { this.$transcriptDiv .find("span.able-transcript-seekpoint") .attr("tabindex", "0"); } - // handle clicks on text within transcript - // Note: This event listeners handles clicks only, not keydown events - // 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 (e) { + .on( '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 += 0.01; - // 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; } }); @@ -13280,7 +9900,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.highlightTranscript = function (currentTime) { - // Show highlight in transcript marking current caption. if (!this.transcriptType) { return; @@ -13291,13 +9910,11 @@ if (typeof module !== "undefined" && module.exports) { currentTime = parseFloat(currentTime); - // Highlight the current transcript item. this.$transcriptArea .find("span.able-transcript-seekpoint") .each(function () { start = parseFloat($(this).attr("data-start")); end = parseFloat($(this).attr("data-end")); - // be sure this isn't a chapter (don't highlight chapter headings) if ($(this).parent().hasClass("able-transcript-chapter-heading")) { isChapterHeading = true; } else { @@ -13305,9 +9922,7 @@ if (typeof module !== "undefined" && module.exports) { } if (currentTime >= start && currentTime <= end && !isChapterHeading) { - // If this item isn't already highlighted, it should be if (!$(this).hasClass("able-highlight")) { - // remove all previous highlights before adding one to current span thisObj.$transcriptArea .find(".able-highlight") .removeClass("able-highlight"); @@ -13319,7 +9934,6 @@ if (typeof module !== "undefined" && module.exports) { }); thisObj.currentHighlight = thisObj.$transcriptArea.find(".able-highlight"); if (thisObj.currentHighlight.length === 0) { - // Nothing highlighted. thisObj.currentHighlight = null; } }; @@ -13334,20 +9948,17 @@ if (typeof module !== "undefined" && module.exports) { var $main = $('<div class="able-transcript-container"></div>'); var transcriptTitle; - // set language for transcript container $main.attr("lang", this.transcriptLang); if (typeof this.transcriptTitle !== "undefined") { transcriptTitle = this.transcriptTitle; } else if (this.lyricsMode) { - transcriptTitle = this.tt.lyricsTitle; + transcriptTitle = this.translate( 'lyricsTitle', 'Lyrics' ); } else { - transcriptTitle = this.tt.transcriptTitle; + transcriptTitle = this.translate( 'transcriptTitle', 'Transcript' ); } if (!this.transcriptDivLocation) { - // only add an HTML heading to internal transcript - // external transcript is expected to have its own heading var headingNumber = this.playerHeadingLevel; headingNumber += 1; var chapterHeadingNumber = headingNumber + 1; @@ -13367,8 +9978,6 @@ if (typeof module !== "undefined" && module.exports) { } $transcriptHeadingTag.text(transcriptTitle); - // set language of transcript heading to language of player - // this is independent of language of transcript $transcriptHeadingTag.attr("lang", this.lang); $main.append($transcriptHeadingTag); @@ -13497,7 +10106,6 @@ if (typeof module !== "undefined" && module.exports) { if (hasParens \|\| hasBrackets) { if (parts > 1) { - // force a line break between sections that contain parens or brackets var silentSpanBreak = "<br/>"; } else { var silentSpanBreak = ""; @@ -13506,12 +10114,9 @@ if (typeof module !== "undefined" && module.exports) { silentSpanBreak + '<span class="able-unspoken">'; var silentSpanClose = "</span>"; if (hasParens && hasBrackets) { - // string has both! if (openBracket < openParen) { - // brackets come first. Parse parens separately hasParens = false; } else { - // parens come first. Parse brackets separately hasBrackets = false; } } @@ -13542,7 +10147,6 @@ if (typeof module !== "undefined" && module.exports) { var $vSpan = $("<span>", { class: "able-unspoken", }); - // don't display "title=" when rendering the voice tag title in the transcript comp.value = comp.value.replace(/^title="\|\"$/g, ""); $vSpan.text("(" + comp.value + ")"); result.push($vSpan); @@ -13565,7 +10169,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (comp.type === "b" \|\| comp.type == "i") { - result.push($tag, " "); + result.push($tag); } } else { for (var i = 0; i < comp.children.length; i++) { @@ -13578,15 +10182,21 @@ if (typeof module !== "undefined" && module.exports) { }; for (var i = 0; i < cap.components.children.length; i++) { + var next_child_tagname; + if ( i < cap.components.children.length - 1 ) { + next_child_tagname = cap.components.children[i + 1].tagName; + } var results = flattenComponentForCaption(cap.components.children[i]); for (var jj = 0; jj < results.length; jj++) { var result = results[jj]; if (typeof result === "string") { - if (thisObj.lyricsMode) { - // add <br> BETWEEN each caption and WITHIN each caption (if payload includes "\n") - result = result.replace(/\n/g, "<br>") + "<br>"; + if (thisObj.lyricsMode) { + result = result.replace(/\n/g,'<br>'); + + if ( !next_child_tagname \|\| ( next_child_tagname !== 'i' && next_child_tagname !== 'b' ) ) { + result += '<br>'; + } } else { - // just add a space between captions result += " "; } } @@ -13599,7 +10209,6 @@ if (typeof module !== "undefined" && module.exports) { div.append(" \n"); }; - // keep looping as long as any one of the three arrays has content while ( nextChapter < chapters.length \|\| nextDesc < descriptions.length \|\| @@ -13610,7 +10219,6 @@ if (typeof module !== "undefined" && module.exports) { nextDesc < descriptions.length && nextCap < captions.length ) { - // they all three have content var firstStart = Math.min( chapters[nextChapter].start, descriptions[nextDesc].start, @@ -13620,19 +10228,16 @@ if (typeof module !== "undefined" && module.exports) { nextChapter < chapters.length && nextDesc < descriptions.length ) { - // chapters & descriptions have content var firstStart = Math.min( chapters[nextChapter].start, descriptions[nextDesc].start ); } else if (nextChapter < chapters.length && nextCap < captions.length) { - // chapters & captions have content var firstStart = Math.min( chapters[nextChapter].start, captions[nextCap].start ); } else if (nextDesc < descriptions.length && nextCap < captions.length) { - // descriptions & captions have content var firstStart = Math.min( descriptions[nextDesc].start, captions[nextCap].start @@ -13670,60 +10275,51 @@ if (typeof module !== "undefined" && module.exports) { } } } - // organize transcript into blocks using [] and () as starting points var $components = $main.children(); var spanCount = 0; - var openBlock = true; $components.each(function () { if ($(this).hasClass("able-transcript-caption")) { if ( $(this).text().indexOf("[") !== -1 \|\| $(this).text().indexOf("(") !== -1 ) { - // this caption includes a bracket or parenth. Start a new block - // close the previous block first if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } $(this).addClass("able-block-temp"); spanCount++; } else { - // this is not a caption. Close the caption block if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } }); + $main = wrapTranscriptBlocks( $main ); + return $main; }; + + var wrapTranscriptBlocks = function( $main ) { + $main.find(".able-block-temp") + .removeClass("able-block-temp") + .wrapAll('<div class="able-transcript-block"></div>'); + + return $main; + } })(jQuery); (function ($) { AblePlayer.prototype.showSearchResults = function () { - // search VTT file for all instances of searchTerms - // Currently just supports search terms separated with one or more spaces - // TODO: Add support for more robust search syntax: - // Search terms wrapped in quotation marks ("") must occur exactly as they appear in the quotes - // Search terms with an attached minus sign (e.g., -term) are to be excluded from results - // Boolean AND/OR operators - // ALSO: Add localization support var thisObj = this; if (this.searchDiv && this.searchString) { - // sanitize search string var cleanSearchString = DOMPurify.sanitize(this.searchString); if ($("#" + this.SearchDiv)) { - var searchStringHtml = "<p>" + this.tt.resultsSummary1 + " "; + var searchStringHtml = "<p>" + this.translate( 'resultsSummary1', 'You searched for:') + ' '; searchStringHtml += '<span id="able-search-term-echo">' + cleanSearchString + "</span>"; searchStringHtml += "</p>"; @@ -13735,19 +10331,16 @@ if (typeof module !== "undefined" && module.exports) { var $resultsSummary = $("<p>", { class: "able-search-results-summary", }); - var resultsSummaryText = this.tt.resultsSummary2; - resultsSummaryText += - " <strong>" + resultsArray.length + "</strong> "; - resultsSummaryText += this.tt.resultsSummary3 + " "; - resultsSummaryText += this.tt.resultsSummary4; - $resultsSummary.html(resultsSummaryText); + var resultsSummaryText = this.translate( 'resultsSummary2', 'Found %1 matching items.', [ '<strong>' + resultsArray.length + '</strong>' ] ); + resultsSummaryText += ' ' + this.translate( 'resultsSummary3', 'Click the time associated with any item to play the video from that point.' ); + $resultsSummary.html( resultsSummaryText ); var $resultsList = $("<ul>"); for (var i = 0; i < resultsArray.length; i++) { var resultId = "aria-search-result-" + i; var $resultsItem = $("<li>", {}); var itemStartTime = this.secondsToTime(resultsArray[i]["start"]); var itemLabel = - this.tt.searchButtonLabel + " " + itemStartTime["title"]; + this.translate( 'searchButtonLabel', 'Play at %1', [ itemStartTime["title"] ] ); var itemStartSpan = $("<button>", { class: "able-search-results-time", "data-start": resultsArray[i]["start"], @@ -13756,11 +10349,9 @@ if (typeof module !== "undefined" && module.exports) { "aria-describedby": resultId, }); itemStartSpan.text(itemStartTime["value"]); - // add a listener for clisk on itemStart itemStartSpan.on("click", function (e) { thisObj.seekTrigger = "search"; var spanStart = parseFloat($(this).attr("data-start")); - // Add a tiny amount so that we're inside the span. spanStart += 0.01; thisObj.seeking = true; thisObj.seekTo(spanStart); @@ -13770,16 +10361,16 @@ if (typeof module !== "undefined" && module.exports) { class: "able-search-result-text", id: resultId, }); - itemText.html("..." + resultsArray[i]["caption"] + "..."); + itemText.html('...' + resultsArray[i]["caption"] + '...'); $resultsItem.append(itemStartSpan, itemText); $resultsList.append($resultsItem); } - $("#" + this.searchDiv) + $('#' + this.searchDiv) .html(searchStringHtml) .append($resultsSummary, $resultsList); } else { - var noResults = $("<p>").text(this.tt.noResultsFound); - $("#" + this.searchDiv) + var noResults = $('<p>').text( this.translate( 'noResultsFound', 'No results found.' ) ); + $('#' + this.searchDiv) .html(searchStringHtml) .append(noResults); } @@ -13788,13 +10379,10 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.searchFor = function (searchString, ignoreCaps) { - // return chronological array of caption cues that match searchTerms var captionLang, captions, results, caption, c, i, j; results = []; - // split searchTerms into an array var searchTerms = searchString.split(" "); if (this.captions.length > 0) { - // Get caption track that matches this.searchLang for (i = 0; i < this.captions.length; i++) { if (this.captions[i].language === this.searchLang) { captionLang = this.searchLang; @@ -13845,8 +10433,6 @@ if (typeof module !== "undefined" && module.exports) { searchTerms, resultString ) { - // highlight ALL found searchTerms in the current resultString - // Need to step through the remaining terms to see if they're present as well searchTerms.forEach(function (searchTerm) { var reg = new RegExp(searchTerm, "gi"); resultString = resultString.replace( @@ -13858,11 +10444,7 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.secondsToTime = function (totalSeconds) { - // return an array of totalSeconds converted into two formats - // time['value'] = HH:MM:SS with hours dropped if there are none - // time['title'] = a speakable rendering, so speech rec users can easily speak the link - // first, round down to nearest second var totalSeconds = Math.floor(totalSeconds); var hours = parseInt(totalSeconds / 3600, 10) % 24; @@ -13873,36 +10455,36 @@ if (typeof module !== "undefined" && module.exports) { if (hours > 0) { value += hours + ":"; if (hours == 1) { - title += "1 " + this.tt.hour + " "; + title += "1 " + this.translate( 'hour', 'hour' ) + " "; } else { - title += hours + " " + this.tt.hours + " "; + title += hours + " " + this.translate( 'hours', 'hours' ) + " "; } } if (minutes < 10) { value += "0" + minutes + ":"; if (minutes > 0) { if (minutes == 1) { - title += "1 " + this.tt.minute + " "; + title += "1 " + this.translate( 'minute', 'minute' ) + " "; } else { - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } } } else { value += minutes + ":"; - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } if (seconds < 10) { value += "0" + seconds; if (seconds > 0) { if (seconds == 1) { - title += "1 " + this.tt.second + " "; + title += "1 " + this.translate( 'second', 'second' ) + " "; } else { - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } } } else { value += seconds; - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } var time = []; time["value"] = value; @@ -13912,28 +10494,22 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); (function ($) { - // Media events AblePlayer.prototype.onMediaUpdateTime = function (duration, elapsed) { - - // duration and elapsed are passed from callback functions of Vimeo API events - // duration is expressed as sss.xxx - // elapsed is expressed as sss.xxx var thisObj = this; this.getMediaTimes(duration,elapsed).then(function(mediaTimes) { thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - if (thisObj.duration > 0) { - // do all the usual time-sync stuff during playback + if (thisObj.duration > 0) { if (thisObj.prefHighlight === 1) { thisObj.highlightTranscript(thisObj.elapsed); - } + } thisObj.updateCaption(thisObj.elapsed); thisObj.showDescription(thisObj.elapsed); thisObj.updateChapter(thisObj.elapsed); thisObj.updateMeta(thisObj.elapsed); - thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); - } + thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); + } }); }; @@ -13952,221 +10528,154 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.onMediaComplete = function () { - // if there's a playlist, advance to next item and start playing if (this.hasPlaylist && !this.cueingPlaylistItem) { if (this.playlistIndex === (this.$playlist.length - 1)) { - // this is the last track in the playlist if (this.loop) { this.playlistIndex = 0; - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings + this.cueingPlaylistItem = true; this.cuePlaylistItem(0); - } - else { + } else { this.playing = false; this.paused = true; } - } - else { - // this is not the last track. Play the next one. + } else { this.playlistIndex++; - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings + this.cueingPlaylistItem = true; this.cuePlaylistItem(this.playlistIndex) } } - this.refreshControls('init'); + this.refreshControls(); }; AblePlayer.prototype.onMediaNewSourceLoad = function () { - var loadIsComplete = false; + var loadIsComplete = false; if (this.cueingPlaylistItem) { - // this variable was set in order to address bugs caused by multiple firings of media 'end' event - // safe to reset now this.cueingPlaylistItem = false; } - if (this.recreatingPlayer) { - // same as above; different bugs - this.recreatingPlayer = false; + if (this.recreatingPlayer) { + this.recreatingPlayer = false; } if (this.playbackRate) { - // user has set playbackRate on a previous src or track - // use that setting on the new src or track too this.setPlaybackRate(this.playbackRate); } if (this.userClickedPlaylist) { if (!this.startedPlaying \|\| this.okToPlay) { - // start playing; no further user action is required this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.seekTrigger == 'restart' \|\| + } else if (this.seekTrigger == 'restart' \|\| this.seekTrigger == 'chapter' \|\| this.seekTrigger == 'transcript' \|\| this.seekTrigger == 'search' ) { - // by clicking on any of these elements, user is likely intending to play - // Not included: elements where user might click multiple times in succession - // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play this.playMedia(); - loadIsComplete = true; - } - else if (this.swappingSrc) { - // new source file has just been loaded + loadIsComplete = true; + } else if (this.swappingSrc) { if (this.hasPlaylist) { - // a new source file from the playlist has just been loaded if ((this.playlistIndex !== this.$playlist.length) \|\| this.loop) { - // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.swapTime > 0) { - if (this.seekStatus === 'complete') { + } else if (this.swapTime > 0) { + if (this.seekStatus === 'complete') { if (this.okToPlay) { - // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else if (this.seekStatus === 'seeking') { - } - else { - if (this.swapTime === this.elapsed) { - // seek is finished! - this.seekStatus = 'complete'; + loadIsComplete = true; + } else if (this.seekStatus === 'seeking') { + } else { + if (this.swapTime === this.elapsed) { + this.seekStatus = 'complete'; if (this.okToPlay) { - // should be able to resume playback - this.playMedia(); - } - loadIsComplete = true; - } - else { - // seeking hasn't started yet - // first, determine whether it's possible - if (this.hasDescTracks) { - // do nothing. Unable to seek ahead if there are descTracks - loadIsComplete = true; + this.playMedia(); } - else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { - // durations of two sources are close enough to making seek ahead in new source ok - this.seekStatus = 'seeking'; + loadIsComplete = true; + } else { + if (this.hasDescTracks) { + loadIsComplete = true; + } else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { + this.seekStatus = 'seeking'; this.seekTo(this.swapTime); - } - else { - // durations of two sources are too dissimilar to support seeking ahead to swapTime. - loadIsComplete = true; + } else { + loadIsComplete = true; } } } - } - else { - // swapTime is 0. No seeking required. - if (this.playing) { - this.playMedia(); - // swap is complete. Reset vars. - loadIsComplete = true; + } else { + if (this.playing) { + this.playMedia(); + loadIsComplete = true; } } - } - else if (!this.startedPlaying) { + } else if (!this.startedPlaying) { if (this.startTime > 0) { if (this.seeking) { - // a seek has already been initiated - // since canplaythrough has been triggered, the seek is complete this.seeking = false; if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; - } - else { - // haven't started seeking yet + loadIsComplete = true; + } else { this.seekTo(this.startTime); } - } - else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { + } else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { this.seekToChapter(this.defaultChapter); - } - else { - // there is no startTime, therefore no seeking required + } else { if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.hasPlaylist) { - // new source media is part of a playlist, but user didn't click on it - // (and somehow, swappingSrc is false) - // this may happen when the previous track ends and next track loads - // this same code is called above when swappingSrc is true + } else if (this.hasPlaylist) { if ((this.playlistIndex !== this.$playlist.length) \|\| this.loop) { - // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } + } else { + loadIsComplete = true; } - else { - // None of the above. - // User is likely seeking to a new time, but not loading a new media source - // need to reset vars - loadIsComplete = true; - } - if (loadIsComplete) { - // reset vars - this.swappingSrc = false; - this.seekStatus = null; - this.swapTime = 0; + if (loadIsComplete) { + this.swappingSrc = false; + this.seekStatus = null; + this.swapTime = 0; this.seekTrigger = null; - this.seekingFromTranscript = false; + this.seekingFromTranscript = false; this.userClickedPlaylist = false; - this.okToPlay = false; + this.okToPlay = false; } - this.refreshControls('init'); - if (this.$focusedElement) { - this.restoreFocus(); - this.$focusedElement = null; + this.refreshControls(); + if (this.$focusedElement) { + this.restoreFocus(); + this.$focusedElement = null; + this.activeMedia = null; } }; - AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { + AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { - // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src - // The durations may not be exact, but they might be "close enough" - // returns true if "close enough", otherwise false - var tolerance, diff; - - tolerance = 1; // number of seconds between rounded durations that is considered "close enough" - - diff = Math.abs(Math.round(d1) - Math.round(d2)); - - if (diff <= tolerance) { - return true; - } - else { - return false; - } + var tolerance, diff; + + tolerance = 1; + diff = Math.abs(Math.round(d1) - Math.round(d2)); + + return (diff <= tolerance) ? true : false; }; - AblePlayer.prototype.restoreFocus = function() { + AblePlayer.prototype.restoreFocus = function() { - // function called after player has been rebuilt (during media swap) - // the original focusedElement no longer exists, - // but this function finds a match in the new player - // and places focus there - var classList; + var classList, $mediaParent; - if (this.$focusedElement) { - - if ((this.$focusedElement).attr('role') === 'button') { + if ( this.$focusedElement && null !== this.activeMedia ) { + $mediaParent = $( '#' + this.activeMedia ).closest( '.able' ); + if ( (this.$focusedElement).attr('role') === 'button' ) { classList = this.$focusedElement.attr("class").split(/\s+/); $.each(classList, function(index, item) { if (item.substring(0,20) === 'able-button-handler-') { - $('div.able-controller div.' + item).focus(); + $mediaParent.find('div.able-controller div.' + item).trigger('focus'); } }); } @@ -14178,23 +10687,20 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; - // Handle seek bar events. this.seekBar.bodyDiv.on('startTracking', function (e) { thisObj.pausedBeforeTracking = thisObj.paused; thisObj.pauseMedia(); }).on('tracking', function (e, position) { - // Scrub transcript, captions, and metadata. thisObj.highlightTranscript(position); thisObj.updateCaption(position); thisObj.showDescription(position); thisObj.updateChapter(thisObj.convertChapterTimeToVideoTime(position)); thisObj.updateMeta(position); - thisObj.refreshControls('init'); + thisObj.refreshControls(); }).on('stopTracking', function (e, position) { if (thisObj.useChapterTimes) { thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); - } - else { + } else { thisObj.seekTo(position); } if (!thisObj.pausedBeforeTracking) { @@ -14206,160 +10712,128 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.onClickPlayerButton = function (el) { - var whichButton, prefsPopup; - - whichButton = this.getButtonNameFromClass($(el).attr('class')); - - if (whichButton === 'play') { - this.clickedPlay = true; - this.handlePlay(); - } - else if (whichButton === 'restart') { - this.seekTrigger = 'restart'; - this.handleRestart(); - } - else if (whichButton === 'previous') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'previous'; - this.buttonWithFocus = 'previous'; - this.handlePrevTrack(); - } - else if (whichButton === 'next') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'next'; - this.buttonWithFocus = 'next'; - this.handleNextTrack(); - } - else if (whichButton === 'rewind') { - this.seekTrigger = 'rewind'; - this.handleRewind(); - } - else if (whichButton === 'forward') { - this.seekTrigger = 'forward'; - this.handleFastForward(); - } - else if (whichButton === 'mute') { - this.handleMute(); - } - else if (whichButton === 'volume') { - this.handleVolumeButtonClick(); - } - else if (whichButton === 'faster') { - this.handleRateIncrease(); - } - else if (whichButton === 'slower') { - this.handleRateDecrease(); - } - else if (whichButton === 'captions') { - this.handleCaptionToggle(); - } - else if (whichButton === 'chapters') { - this.handleChapters(); - } - else if (whichButton === 'descriptions') { - this.handleDescriptionToggle(); - } - else if (whichButton === 'sign') { - if (!this.closingSign) { - this.handleSignToggle(); - } - } - else if (whichButton === 'preferences') { - if ($(el).attr('data-prefs-popup') === 'menu') { - this.handlePrefsClick(); - } - else { - this.showingPrefsDialog = true; // stopgap - this.closePopups(); - prefsPopup = $(el).attr('data-prefs-popup'); - if (prefsPopup === 'keyboard') { - this.keyboardPrefsDialog.show(); - } - else if (prefsPopup === 'captions') { - this.captionPrefsDialog.show(); + whichButton = this.getButtonNameFromClass($(el).attr('class')); + switch ( whichButton ) { + case 'play': + this.clickedPlay = true; + this.handlePlay(); + break; + case 'restart': + this.seekTrigger = 'restart'; + this.handleRestart(); + break; + case 'previous': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'previous'; + this.buttonWithFocus = 'previous'; + this.handlePrevTrack(); + break; + case 'next': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'next'; + this.buttonWithFocus = 'next'; + this.handleNextTrack(); + break; + case 'rewind': + this.seekTrigger = 'rewind'; + this.handleRewind(); + break; + case 'forward': + this.seekTrigger = 'forward'; + this.handleFastForward(); + break; + case 'mute': + this.handleMute(); + break; + case 'volume': + this.handleVolumeButtonClick(); + break; + case 'faster': + this.handleRateIncrease(); + break; + case 'slower': + this.handleRateDecrease(); + break; + case 'captions': + this.handleCaptionToggle(); + break; + case 'chapters': + this.handleChapters(); + break; + case 'descriptions': + this.handleDescriptionToggle(); + break; + case 'sign': + if ( ! this.closingSign ) { + this.handleSignToggle(); } - else if (prefsPopup === 'descriptions') { - this.descPrefsDialog.show(); + break; + case 'preferences': + if ($(el).attr('data-prefs-popup') === 'menu') { + this.handlePrefsClick(); + } else { + this.showingPrefsDialog = true; + this.closePopups(); + prefsPopup = $(el).attr('data-prefs-popup'); + if (prefsPopup === 'keyboard') { + this.keyboardPrefsDialog.show(); + } else if (prefsPopup === 'captions') { + this.captionPrefsDialog.show(); + } else if (prefsPopup === 'descriptions') { + this.descPrefsDialog.show(); + } else if (prefsPopup === 'transcript') { + this.transcriptPrefsDialog.show(); + } + this.showingPrefsDialog = false; } - else if (prefsPopup === 'transcript') { - this.transcriptPrefsDialog.show(); + break; + case 'transcript': + if ( !this.closingTranscript ) { + this.handleTranscriptToggle(); } - this.showingPrefsDialog = false; - } - } - else if (whichButton === 'help') { - this.handleHelpClick(); - } - else if (whichButton === 'transcript') { - if (!this.closingTranscript) { - this.handleTranscriptToggle(); - } - } - else if (whichButton === 'fullscreen') { - this.clickedFullscreenButton = true; - this.handleFullscreenToggle(); + break; + case 'fullscreen': + this.clickedFullscreenButton = true; + this.handleFullscreenToggle(); + break; } }; - AblePlayer.prototype.getButtonNameFromClass = function (classString) { + AblePlayer.prototype.getButtonNameFromClass = function (classString) { + var classes, i; - // player control buttons all have class="able-button-handler-x" where x is the identifier - // buttons might also have other classes assigned though - - var classes, i; - - classes = classString.split(' '); - for (i = 0; i < classes.length; i++) { - if (classes[i].substring(0,20) === 'able-button-handler-') { - return classes[i].substring(20); + classes = classString.split(' '); + for (i = 0; i < classes.length; i++) { + if (classes[i].substring(0,20) === 'able-button-handler-') { + return classes[i].substring(20); } - } - return classString; + } + return classString; } AblePlayer.prototype.okToHandleKeyPress = function () { - - // returns true unless user's focus is on a UI element - // that is likely to need supported keystrokes, including space - + let defaultReturn = true; + if ( this.prefNoKeyShortcuts === 1 ) { + defaultReturn = false; + } var activeElement = AblePlayer.getActiveDOMElement(); - if ($(activeElement).prop('tagName') === 'INPUT') { - return false; - } - else { - return true; - } + return ($(activeElement).prop('tagName') === 'INPUT') ? false : defaultReturn; }; AblePlayer.prototype.onPlayerKeyPress = function (e) { - // handle keystrokes (using DHTML Style Guide recommended key combinations) - // https://web.archive.org/web/20130127004544/http://dev.aol.com/dhtml_style_guide/#mediaplayer - // Modifier keys Alt + Ctrl are on by default, but can be changed within Preferences - // NOTE #1: Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down - // The rest are reasonable best choices - // NOTE #2: If there are multiple players on a single page, keystroke handlers - // are only bound to the FIRST player - // NOTE #3: The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions - // including removal of the "media player" design pattern. There's an issue about that: - // https://github.com/w3c/aria-practices/issues/27 - var which, $thisElement; + var key, $thisElement; - // Convert to lower case. - which = e.which; - if (which >= 65 && which <= 90) { - which += 32; - } + key = e.key; $thisElement = $(document.activeElement); - if (which === 27) { // escape + if (key === 'Escape') { if (this.$transcriptArea && $.contains(this.$transcriptArea[0],$thisElement[0]) && !this.hidingPopup) { - // This element is part of transcript area. this.handleTranscriptToggle(); return false; } @@ -14368,8 +10842,6 @@ if (typeof module !== "undefined" && module.exports) { return false; } - // Only use keypress to control player if focus is NOT on a form field or contenteditable element - // (or a textarea element with player in stenoMode) if (!( $(':focus').is('[contenteditable]') \|\| $(':focus').is('input') \|\| @@ -14380,101 +10852,80 @@ if (typeof module !== "undefined" && module.exports) { (e.target.tagName === 'TEXTAREA' && !this.stenoMode) \|\| e.target.tagName === 'SELECT' )){ - if (which === 27) { // escape + if (key === 'Escape') { this.closePopups(); this.$tooltipDiv.hide(); this.seekBar.hideSliderTooltips(); - } - else if (which === 32) { // spacebar = play/pause - // disable spacebar support for play/pause toggle as of 4.2.10 - // spacebar should not be handled everywhere on the page, since users use that to scroll the page - // when the player has focus, most controls are buttons so spacebar should be used to trigger the buttons + } else if (key === ' ') { if ($thisElement.attr('role') === 'button') { - // register a click on this element e.preventDefault(); - $thisElement.click(); + $thisElement.trigger( 'click' ); } - } - else if (which === 112) { // p = play/pause + } else if ( key === 'p' ) { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePlay(); } - } - else if (which === 115) { // s = stop (now restart) + } else if (key === 's') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRestart(); } - } - else if (which === 109) { // m = mute + } else if (key === 'm') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleMute(); } - } - else if (which === 118) { // v = volume + } else if (key === 'v') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleVolumeButtonClick(); } - } - else if (which >= 49 && which <= 57) { // set volume 1-9 + } else if (key >= 0 && key <= 9) { if (this.usingModifierKeys(e)) { e.preventDefault(); - this.handleVolumeKeystroke(which); + this.handleVolumeKeystroke(key); } - } - else if (which === 99) { // c = caption toggle + } else if (key === 'c') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleCaptionToggle(); } - } - else if (which === 100) { // d = description + } else if (key === 'd') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleDescriptionToggle(); } - } - else if (which === 102) { // f = forward + } else if (key === 'f') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleFastForward(); } - } - else if (which === 114) { // r = rewind + } else if (key === 'r') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRewind(); } - } - else if (which === 98) { // b = back (previous track) + } else if (key === 'b') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrevTrack(); } - } - else if (which === 110) { // n = next track + } else if (key === 'n') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleNextTrack(); } - } - else if (which === 101) { // e = preferences + } else if (key === 'e') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrefsClick(); } - } - else if (which === 13) { // Enter + } else if (key === 'Enter') { if ($thisElement.attr('role') === 'button' \|\| $thisElement.prop('tagName') === 'SPAN') { - // register a click on this element - // if it's a transcript span the transcript span click handler will take over - $thisElement.click(); - } - else if ($thisElement.prop('tagName') === 'LI') { - $thisElement.click(); + $thisElement.trigger( 'click' ); + } else if ($thisElement.prop('tagName') === 'LI') { + $thisElement.trigger( 'click' ); } } } @@ -14484,43 +10935,24 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; - // NOTE: iOS and some browsers do not support autoplay - // and no events are triggered until media begins to play - // Able Player gets around this by automatically loading media in some circumstances - // (see initialize.js > initPlayer() for details) this.$media .on('emptied',function() { - // do something }) .on('loadedmetadata',function() { - // should be able to get duration now - thisObj.duration = thisObj.media.duration; - var x = 50.5; - var y = 51.9; - var diff = Math.abs(Math.round(x)-Math.round(y)); + thisObj.duration = thisObj.media.duration; }) .on('canplay',function() { - // previously handled seeking to startTime here - // but it's probably safer to wait for canplaythrough - // so we know player can seek ahead to anything }) .on('canplaythrough',function() { - // previously onMediaNewSourceLoad() was called on 'loadedmetadata' - // but that proved to be too soon for some of this functionality. - // TODO: Monitor this. If moving it here causes performance issues, - // consider moving some or all of this functionality to 'canplay' - thisObj.onMediaNewSourceLoad(); + thisObj.onMediaNewSourceLoad(); }) .on('play',function() { - // both 'play' and 'playing' seem to be fired in all browsers (including IE11) - // therefore, doing nothing here & doing everything when 'playing' is triggered - thisObj.refreshControls('playpause'); }) .on('playing',function() { thisObj.playing = true; thisObj.paused = false; - thisObj.swappingSrc = false; + thisObj.swappingSrc = false; thisObj.refreshControls('playpause'); }) .on('ended',function() { @@ -14532,39 +10964,28 @@ if (typeof module !== "undefined" && module.exports) { thisObj.refreshControls('timeline'); }) .on('waiting',function() { - // do something - // previously called refreshControls() here but this event probably doesn't warrant a refresh }) .on('durationchange',function() { - // Display new duration. thisObj.refreshControls('timeline'); }) .on('timeupdate',function() { - thisObj.onMediaUpdateTime(); // includes a call to refreshControls() + thisObj.onMediaUpdateTime(); }) - .on('pause',function() { - if (!thisObj.clickedPlay) { - // 'pause' was triggered automatically, not initiated by user - // this happens in some browsers when swapping source - // (e.g., between tracks in a playlist or swapping description) - if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { - // do NOT set playing to false. - // doing so prevents continual playback after new track is loaded - } - else { + .on('pause',function() { + if (!thisObj.clickedPlay) { + if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - thisObj.clickedPlay = false; // done with this variable - thisObj.onMediaPause(); // includes a call to refreshControls() + thisObj.clickedPlay = false; + thisObj.onMediaPause(); }) .on('ratechange',function() { - // do something }) .on('volumechange',function() { thisObj.volume = thisObj.getVolume(); @@ -14573,17 +10994,17 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.debug) { switch (thisObj.media.error.code) { case 1: - - break; + + break; case 2: - - break; + + break; case 3: - - break; + + break; case 4: - - break; + + break; } } }); @@ -14593,129 +11014,75 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; - // Vimeo doesn't seem to support chaining of on() functions - // so each event listener must be attached separately this.vimeoPlayer.on('loaded', function(vimeoId) { - // Triggered when a new video is loaded in the player thisObj.onMediaNewSourceLoad(); }); this.vimeoPlayer.on('play', function(data) { - // Triggered when the video plays thisObj.playing = true; thisObj.startedPlaying = true; thisObj.paused = false; thisObj.refreshControls('playpause'); }); this.vimeoPlayer.on('ended', function(data) { - // Triggered any time the video playback reaches the end. - // Note: when loop is turned on, the ended event will not fire. thisObj.playing = false; thisObj.paused = true; thisObj.onMediaComplete(); }); this.vimeoPlayer.on('bufferstart', function() { - // Triggered when buffering starts in the player. - // This is also triggered during preload and while seeking. - // There is no associated data with this event. }); this.vimeoPlayer.on('bufferend', function() { - // Triggered when buffering ends in the player. - // This is also triggered at the end of preload and seeking. - // There is no associated data with this event. }); this.vimeoPlayer.on('progress', function(data) { - // Triggered as the video is loaded. - // Reports back the amount of the video that has been buffered (NOT the amount played) - // Data has keys duration, percent, and seconds - }); + }); this.vimeoPlayer.on('seeking', function(data) { - // Triggered when the player starts seeking to a specific time. - // A timeupdate event will also be fired at the same time. - }); + }); this.vimeoPlayer.on('seeked', function(data) { - // Triggered when the player seeks to a specific time. - // A timeupdate event will also be fired at the same time. }); this.vimeoPlayer.on('timeupdate',function(data) { - // Triggered as the currentTime of the video updates. - // It generally fires every 250ms, but it may vary depending on the browser. thisObj.onMediaUpdateTime(data['duration'], data['seconds']); }); this.vimeoPlayer.on('pause',function(data) { - // Triggered when the video pauses if (!thisObj.clickedPlay) { - // 'pause' was triggered automatically, not initiated by user - // this happens in some browsers (not Chrome, as of 70.x) - // when swapping source (e.g., between tracks in a playlist, or swapping description) if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { - // do NOT set playing to false. - // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - thisObj.clickedPlay = false; // done with this variable + thisObj.clickedPlay = false; thisObj.onMediaPause(); thisObj.refreshControls('playpause'); }); this.vimeoPlayer.on('playbackratechange',function(data) { - // Triggered when the playback rate of the video in the player changes. - // The ability to change rate can be disabled by the creator - // and the event will not fire for those videos. - // data contains one key: 'playbackRate' thisObj.vimeoPlaybackRate = data['playbackRate']; }); this.vimeoPlayer.on('texttrackchange', function(data) { - // Triggered when the active text track (captions/subtitles) changes. - // The values will be null if text tracks are turned off. - // data contains three keys: kind, label, language }); this.vimeoPlayer.on('volumechange',function(data) { - // Triggered when the volume in the player changes. - // Some devices do not support setting the volume of the video - // independently from the system volume, - // so this event will never fire on those devices. thisObj.volume = data['volume'] 10; }); this.vimeoPlayer.on('error',function(data) { - // do something with the available data - // data contains three keys: message, method, name - // message: A user-friendly error message - // method: The Vimeo API method call that triggered the error - // name: Name of the error (not necesssarily user-friendly) }); }; AblePlayer.prototype.addEventListeners = function () { - var thisObj, whichButton, thisElement; - - // Save the current object context in thisObj for use with inner functions. - thisObj = this; + var thisObj = this; - // Appropriately resize media player for full screen. $(window).on('resize',function () { thisObj.resizePlayer(); }); - // Refresh player if it changes from hidden to visible - // There is no event triggered by a change in visibility - // but MutationObserver works in most browsers (but NOT in IE 10 or earlier) - // http://caniuse.com/#feat=mutationobserver if (window.MutationObserver) { var target = this.$ableDiv[0]; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { - // the player's style attribute has changed. Check to see if it's visible if (thisObj.$ableDiv.is(':visible')) { - thisObj.refreshControls('init'); + thisObj.refreshControls(); } } }); @@ -14723,18 +11090,9 @@ if (typeof module !== "undefined" && module.exports) { var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); } - else { - // browser doesn't support MutationObserver - // TODO: Figure out an alternative solution for this rare use case in older browsers - // See example in buildplayer.js > useSvg() - } if (typeof this.seekBar !== 'undefined') { this.addSeekbarListeners(); - } - else { - // wait a bit and try again - // TODO: Should set this up to keep trying repeatedly. - // Seekbar listeners are critical. + } else { setTimeout(function() { if (typeof thisObj.seekBar !== 'undefined') { thisObj.addSeekbarListeners(); @@ -14742,46 +11100,36 @@ if (typeof module !== "undefined" && module.exports) { },2000); } - // handle clicks on player buttons this.$controllerDiv.find('div[role="button"]').on('click',function(e){ e.stopPropagation(); thisObj.onClickPlayerButton(this); }); - // handle clicks (left only) anywhere on the page. If any popups are open, close them. - $(document).on('click',function(e) { + $('body').on('click', function(e) { - if (e.button !== 0) { // not a left click + if (e.button !== 0) { return false; - } - if ($('.able-popup:visible').length \|\| $('.able-volume-popup:visible')) { - // at least one popup is visible + } + if ($('.able-popup:visible').length \|\| $('.able-volume-slider:visible').length ) { thisObj.closePopups(); } - if (e.target.tagName === 'VIDEO') { - // user clicked the video (not an element that sits on top of the video) - // handle this as a play/pause toggle click - thisObj.clickedPlay = true; - } + if (e.target.tagName === 'VIDEO') { + thisObj.clickedPlay = true; + } }); - // handle mouse movement over player; make controls visible again if hidden this.$ableDiv.on('mousemove',function() { if (thisObj.controlsHidden) { thisObj.fadeControls('in'); thisObj.controlsHidden = false; - // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); thisObj.hideControlsTimeoutStatus = 'clear'; } if (thisObj.hideControls) { - // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { - // if there's already an active timeout, clear it and start timer again + } else { if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); thisObj.hideControlsTimeoutStatus = 'clear'; @@ -14792,8 +11140,7 @@ if (typeof module !== "undefined" && module.exports) { } }); - // if user presses a key from anywhere on the page, show player controls - $(document).keydown(function(e) { + $(document).on( 'keydown', function(e) { if (thisObj.controlsHidden) { thisObj.fadeControls('in'); thisObj.controlsHidden = false; @@ -14802,13 +11149,9 @@ if (typeof module !== "undefined" && module.exports) { thisObj.hideControlsTimeoutStatus = 'clear'; } if (thisObj.hideControls) { - // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { - // controls are visible - // if there's already an active timeout, clear it and start timer again + } else { if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); thisObj.hideControlsTimeoutStatus = 'clear'; @@ -14820,23 +11163,18 @@ if (typeof module !== "undefined" && module.exports) { } }); - // handle local keydown events if this isn't the only player on the page; - // otherwise these are dispatched by global handler (see ableplayer-base,js) - this.$ableDiv.keydown(function (e) { + this.$ableDiv.on( 'keydown', function (e) { if (AblePlayer.nextIndex > 1) { thisObj.onPlayerKeyPress(e); } }); - // If stenoMode is enabled in an iframe, handle keydown events from the iframe if (this.stenoMode && (typeof this.stenoFrameContents !== 'undefined')) { this.stenoFrameContents.on('keydown',function(e) { thisObj.onPlayerKeyPress(e); }); }; - // transcript is not a child of this.$ableDiv - // therefore, must be added separately if (this.$transcriptArea) { this.$transcriptArea.on('keydown',function (e) { if (AblePlayer.nextIndex > 1) { @@ -14845,32 +11183,25 @@ if (typeof module !== "undefined" && module.exports) { }); } - // handle clicks on playlist items if (this.$playlist) { - this.$playlist.click(function(e) { + this.$playlist.on( 'click', function(e) { if (!thisObj.userClickedPlaylist) { - // stopgap in case multiple clicks are fired on the same playlist item - thisObj.userClickedPlaylist = true; // will be set to false after new src is loaded & canplaythrough is triggered + thisObj.userClickedPlaylist = true; thisObj.playlistIndex = $(this).index(); thisObj.cuePlaylistItem(thisObj.playlistIndex); } }); } - // Also play/pause when clicking on the media. - this.$media.click(function () { + this.$media.on( 'click', function () { thisObj.handlePlay(); }); - // add listeners for media events if (this.player === 'html5') { this.addHtml5MediaListeners(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.addVimeoListeners(); - } - else if (this.player === 'youtube') { - // Youtube doesn't give us time update events, so we just periodically generate them ourselves + } else if (this.player === 'youtube') { setInterval(function () { thisObj.onMediaUpdateTime(); }, 300); @@ -14879,21 +11210,12 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); (function ($) { - AblePlayer.prototype.initDragDrop = function ( which ) { - // supported values of which: 'sign', 'transcript' - // NOTE: "Drag and Drop" for Able Player is a metaphor only!!! - // HTML5 Drag & Drop API enables moving elements to new locations in the DOM - // Thats not our purpose; we're simply changing the visible position on-screen - // Therefore, the drag & drop interface was overhauled in v2.3.41 to simple - // use mouse (and keyboard) events to change CSS positioning properties - // There are nevertheless lessons to be learned from Drag & Drop about accessibility: - // http://dev.opera.com/articles/accessible-drag-and-drop/ - var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, + var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, i, x1, y1, x2, y2, $resizeLine, resizeZIndex; thisObj = this; @@ -14902,80 +11224,78 @@ if (typeof module !== "undefined" && module.exports) { $window = this.$transcriptArea; windowName = 'transcript-window'; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + $toolbar.attr( 'aria-label', this.translate( 'transcriptControls', 'Transcript Window Controls' ) ); + } else if (which === 'sign') { $window = this.$signWindow; windowName = 'sign-window'; $toolbar = this.$signToolbar; + $toolbar.attr( 'aria-label', this.translate( 'signControls', 'Sign Language Window Controls' ) ); } - // add class to trigger change in cursor on hover $toolbar.addClass('able-draggable'); + $toolbar.attr( 'role', 'application' ); + + $dragHandle = $('<div>',{ + 'class': 'able-drag-handle' + }); - // add resize handle selector to bottom right corner + $dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'); $resizeHandle = $('<div>',{ 'class': 'able-resizable' }); - // fill it with three parallel diagonal lines $resizeSvg = $('<svg>').attr({ 'width': '100%', 'height': '100%', 'viewBox': '0 0 100 100', 'preserveAspectRatio': 'none' }); - for (i=1; i<=3; i++) { - if (i === 1) { - x1 = '100'; - y1 = '0'; - x2 = '0'; - y2 = '100'; - } - else if (i === 2) { - x1 = '33'; - y1 = '100'; - x2 = '100'; - y2 = '33'; - } - else if (i === 3) { - x1 = '67'; - y1 = '100'; - x2 = '100'; - y2 = '67'; - } - $resizeLine = $('<line>').attr({ + for (i=1; i<=3; i++) { + if (i === 1) { + x1 = '100'; + y1 = '0'; + x2 = '0'; + y2 = '100'; + } else if (i === 2) { + x1 = '33'; + y1 = '100'; + x2 = '100'; + y2 = '33'; + } else if (i === 3) { + x1 = '67'; + y1 = '100'; + x2 = '100'; + y2 = '67'; + } + $resizeLine = $('<line>').attr({ 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2, - 'vector-effect': 'non-scaling-stroke' + 'vector-effect': 'non-scaling-stroke' }) - $resizeSvg.append($resizeLine); + $resizeSvg.append($resizeLine); } - $resizeHandle.html($resizeSvg); + $resizeHandle.html($resizeSvg); - // assign z-index that's slightly higher than parent window resizeZIndex = parseInt($window.css('z-index')) + 100; $resizeHandle.css('z-index',resizeZIndex); $window.append($resizeHandle); + $toolbar.append($dragHandle); - // Final step: Need to refresh the DOM in order for browser to process & display the SVG $resizeHandle.html($resizeHandle.html()); - // add event listener to toolbar to start and end drag - // other event listeners will be added when drag starts - $toolbar.on('mousedown mouseup touchstart touchend', function(e) { + $dragHandle.on('mousedown mouseup touchstart touchend', function(e) { e.stopPropagation(); - if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + if (e.type === 'mousedown' \|\| e.type === 'touchstart' ) { if (!thisObj.windowMenuClickRegistered) { thisObj.windowMenuClickRegistered = true; thisObj.startMouseX = e.pageX; thisObj.startMouseY = e.pageY; - thisObj.dragDevice = 'mouse'; // ok to use this even if device is a touchpad + thisObj.dragDevice = 'mouse'; thisObj.startDrag(which, $window); } - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.dragging && thisObj.dragDevice === 'mouse') { thisObj.endDrag(which); } @@ -14983,7 +11303,6 @@ if (typeof module !== "undefined" && module.exports) { return false; }); - // add event listeners for resizing $resizeHandle.on('mousedown mouseup touchstart touchend', function(e) { e.stopPropagation(); if (e.type === 'mousedown' \|\| e.type === 'touchstart') { @@ -14993,8 +11312,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.startMouseY = e.pageY; thisObj.startResize(which, $window); } - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.resizing) { thisObj.endResize(which); } @@ -15002,7 +11320,6 @@ if (typeof module !== "undefined" && module.exports) { return false; }); - // whenever a window is clicked, bring it to the foreground $window.on('click', function() { if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { @@ -15010,117 +11327,67 @@ if (typeof module !== "undefined" && module.exports) { } thisObj.finishingDrag = false; }); - this.addWindowMenu(which,$window,windowName); }; AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) { - var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg, - $buttonLabel, tooltipId, $tooltip, $popup, - label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip, - $optionList, menuBaseId, options, i, $optionItem, option, menuId; + var thisObj, $windowAlert, menuId, $newButton, tooltipId, $tooltip, $popup, menuId; thisObj = this; - // Add a Boolean that will be set to true temporarily if window button or a menu item is clicked - // This will prevent the click event from also triggering a mousedown event on the toolbar - // (which would unexpectedly send the window into drag mode) this.windowMenuClickRegistered = false; - // Add another Boolean that will be set to true temporarily when mouseup fires at the end of a drag - // this will prevent the click event from being triggered this.finishingDrag = false; - // create an alert div and add it to window - $windowAlert = $('<div role="alert"></div>'); - $windowAlert.addClass('able-alert'); - $windowAlert.hide(); - $windowAlert.appendTo(this.$activeWindow); - $windowAlert.css({ - top: $window.offset().top - }); - - // add button to draggable window which triggers a popup menu - // for now, re-use preferences icon for this purpose menuId = this.mediaId + '-' + windowName + '-menu'; $newButton = $('<button>',{ 'type': 'button', 'tabindex': '0', - 'aria-label': this.tt.windowButtonLabel, 'aria-haspopup': 'true', 'aria-controls': menuId, 'aria-expanded': 'false', 'class': 'able-button-handler-preferences' }); - if (this.iconType === 'font') { - $buttonIcon = $('<span>',{ - 'class': 'icon-preferences', - 'aria-hidden': 'true' - }); - $newButton.append($buttonIcon); - } - else { - // use image - buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png'; - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - - // add the visibly-hidden label for screen readers that don't support aria-label on the button - $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(this.tt.windowButtonLabel); - $newButton.append($buttonLabel); + this.getIcon( $newButton, 'preferences' ); + this.setText( $newButton, this.translate( 'windowButtonLabel', 'Window options' ) ); - // add a tooltip that displays aria-label on mouseenter or focus tooltipId = this.mediaId + '-' + windowName + '-tooltip'; $tooltip = $('<div>',{ 'class' : 'able-tooltip', 'id' : tooltipId }).hide(); + $newButton.on('mouseenter focus',function(e) { var label = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - var tooltipY = position.top - buttonHeight - 5; + var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label); + var tooltipHeight = tooltip.height(); + var tooltipY = ( tooltipHeight + 2 ) * -1; var tooltipX = 0; var tooltipStyle = { - left: '', - right: tooltipX + 'px', + right: '', + left: tooltipX + 'px', top: tooltipY + 'px' }; - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle); + tooltip.css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }); }); - // setup popup menu - $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window' - // define vars and assemble all the parts + $popup = this.setupPopups(windowName); if (which === 'transcript') { - this.$transcriptAlert = $windowAlert; this.$transcriptPopupButton = $newButton; this.$transcriptPopup = $popup; this.$transcriptToolbar.prepend($windowAlert,$newButton,$tooltip,$popup); - } - else if (which === 'sign') { - this.$signAlert = $windowAlert; + } else if (which === 'sign') { this.$signPopupButton = $newButton; this.$signPopup = $popup; this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup); } - // handle button click - $newButton.on('click mousedown keydown',function(e) { + $newButton.on('click keydown',function(e) { if (thisObj.focusNotClick) { return false; @@ -15131,7 +11398,7 @@ if (typeof module !== "undefined" && module.exports) { } e.stopPropagation(); if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { - // don't set windowMenuClickRegistered yet; that happens in handler function + thisObj.handleWindowButtonClick(which, e); } thisObj.finishingDrag = false; @@ -15142,107 +11409,87 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addResizeDialog = function (which, $window) { - var thisObj, $windowPopup, $windowButton, - widthId, heightId, startingWidth, startingHeight, aspectRatio, - $resizeForm, $resizeWrapper, - $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, - $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, - tempWidth, tempHeight, - $saveButton, $cancelButton, newWidth, newHeight, resizeDialog; + var thisObj, $windowPopup, $windowButton, widthId, heightId, + $resizeForm, $resizeWrapper, $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, + $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, $saveButton, $cancelButton, + newWidth, newHeight, resizeDialog; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } widthId = this.mediaId + '-resize-' + which + '-width'; heightId = this.mediaId + '-resize-' + which + '-height'; - startingWidth = $window.width(); - startingHeight = $window.height(); - aspectRatio = startingWidth / startingHeight; $resizeForm = $('<div></div>',{ 'class' : 'able-resize-form' }); - // inner container for all content, will be assigned to modal div's aria-describedby $resizeWrapper = $('<div></div>'); + $resizeControls = $( '<div class="able-prefs-buttons"></div>' ); - // width field $resizeWidthDiv = $('<div></div>'); $resizeWidthInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': widthId, - 'value': startingWidth + 'min': 0, + 'value': '', }); $resizeWidthLabel = $('<label>',{ 'for': widthId - }).text(this.tt.width); + }).text( this.translate( 'width', 'Width' ) ); - // height field $resizeHeightDiv = $('<div></div>'); $resizeHeightInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': heightId, - 'value': startingHeight + 'min': 0, + 'value': '', }); $resizeHeightLabel = $('<label>',{ 'for': heightId - }).text(this.tt.height); - - if (which === 'sign') { - // make height a read-only field - // and calculate its value based on width to preserve aspect ratio - $resizeHeightInput.prop('readonly',true); - $resizeWidthInput.on('input',function() { - tempWidth = $(this).val(); - tempHeight = Math.round(tempWidth/aspectRatio, 0); - $resizeHeightInput.val(tempHeight); - }) - } + }).text( this.translate( 'height', 'Height' ) ); - // Add save and cancel buttons. - $saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - $cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); $saveButton.on('click',function () { newWidth = $('#' + widthId).val(); newHeight = $('#' + heightId).val(); - if (newWidth !== startingWidth \|\| newHeight !== startingHeight) { - thisObj.resizeObject(which,newWidth,newHeight); - thisObj.updateCookie(which); - } + thisObj.resizeObject(which,newWidth,newHeight); + thisObj.updatePreferences(which); + resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); $cancelButton.on('click',function () { resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); - // Now assemble all the parts $resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput); $resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput); $resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv); - $resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton); + $resizeControls.append($saveButton,$cancelButton); + $resizeForm.append($resizeWrapper,$resizeControls); - // must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers $('body').append($resizeForm); - resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'dialog', true, this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em'); + resizeDialog = new AccessibleDialog( + $resizeForm, + $windowButton, + this.translate( 'windowResizeHeading', 'Resize Window' ), + this.translate( 'closeButtonLabel', 'Close' ), + ); if (which === 'transcript') { this.transcriptResizeDialog = resizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.signResizeDialog = resizeDialog; } }; @@ -15252,11 +11499,7 @@ if (typeof module !== "undefined" && module.exports) { var thisObj, $windowPopup, $windowButton, $toolbar, popupTop; thisObj = this; - if (this.focusNotClick) { - // transcript or sign window has just opened, - // and focus moved to the window button - // ignore the keystroke that triggered the popup return false; } @@ -15264,73 +11507,54 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; $toolbar = this.$signToolbar; } - if (e.type === 'keydown') { - // user pressed a key - if (e.which === 32 \|\| e.which === 13) { - // this was Enter or space + if (e.key === ' ' \|\| e.key === 'Enter') { this.windowMenuClickRegistered = true; - } - else if (e.which === 27) { // escape + } else if (e.key === 'Escape') { if ($windowPopup.is(':visible')) { - // close the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - } - else { - // popup isn't open. Close the window + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.trigger('focus'); + } else { if (which === 'sign') { this.handleSignToggle(); - } - else if (which === 'transcript') { + } else if (which === 'transcript') { this.handleTranscriptToggle(); } } - } - else { + } else { return false; } - } - else { - // this was a mouse event + } else { this.windowMenuClickRegistered = true; } - if ($windowPopup.is(':visible')) { - $windowPopup.hide(200,'',function() { - thisObj.windowMenuClickRegistered = false; // reset - }); + if ( $windowPopup.is(':visible') ) { + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; $windowPopup.find('li').removeClass('able-focus'); - $windowButton.attr('aria-expanded','false').focus(); - } - else { - // first, be sure window is on top + $windowButton.attr('aria-expanded','false').trigger('focus'); + } else { this.updateZIndex(which); - popupTop = $windowButton.position().top + $windowButton.outerHeight(); + popupTop = $toolbar.outerHeight() - 1; $windowPopup.css('top', popupTop); - $windowPopup.show(200,'',function() { - $windowButton.attr('aria-expanded','true'); - $(this).find('li').first().focus().addClass('able-focus'); - thisObj.windowMenuClickRegistered = false; // reset - }); + $windowPopup.show(); + $windowButton.attr('aria-expanded','true'); + $(this).find('li').first().trigger('focus').addClass('able-focus'); + thisObj.windowMenuClickRegistered = false; } }; AblePlayer.prototype.handleMenuChoice = function (which, choice, e) { - var thisObj, $window, $windowPopup, $windowButton, resizeDialog, width, height, $thisRadio; + var thisObj, $window, $windowPopup, $windowButton, resizeDialog, startingWidth, startingHeight, + aspectRatio, tempWidth, tempHeight; thisObj = this; if (which === 'transcript') { @@ -15338,31 +11562,36 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; resizeDialog = this.transcriptResizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { $window = this.$signWindow; $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; resizeDialog = this.signResizeDialog; + + startingWidth = $window.outerWidth(); + startingHeight = $window.outerHeight(); + aspectRatio = startingWidth / startingHeight; + widthId = this.mediaId + '-resize-' + which + '-width'; + heightId = this.mediaId + '-resize-' + which + '-height'; + $( '#' + heightId ).prop('readonly',true); + $( '#' + widthId ).on('input',function() { + tempWidth = $(this).val(); + tempHeight = Math.round(tempWidth/aspectRatio); + $( '#' + heightId ).val(tempHeight); + }); } this.$activeWindow = $window; if (e.type === 'keydown') { - if (e.which === 27) { // escape - // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - // also return focus to window options button - $windowButton.focus(); - }); + if (e.key === 'Escape') { + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + $windowButton.trigger('focus'); + return false; - } - else { - // all other keys will be handled by upstream functions + } else { if (choice !== 'close') { this.$activeWindow = $window; } @@ -15370,59 +11599,41 @@ if (typeof module !== "undefined" && module.exports) { } } - // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - }); + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + if (choice !== 'close') { - $windowButton.focus(); + $windowButton.trigger('focus'); } if (choice === 'move') { - - // temporarily add role="application" to activeWindow - // otherwise, screen readers incercept arrow keys and moving window will not work this.$activeWindow.attr('role','application'); if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); + this.showAlert( this.translate( 'windowMoveAlert', 'Drag or use arrow keys to move the window; Enter to stop' ),which); if (which === 'transcript') { this.showedTranscriptAlert = true; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.showedSignAlert = true; } } - if (e.type === 'keydown') { - this.dragDevice = 'keyboard'; - } - else { - this.dragDevice = 'mouse'; - } + this.dragDevice = (e.type === 'keydown') ? 'keyboard' : 'mouse'; this.startDrag(which, $window); - $windowPopup.hide().parent().focus(); - } - else if (choice == 'resize') { - // resize through the menu uses a form, not drag + $windowPopup.hide().parent().attr( 'tabindex', '-1' ).trigger('focus'); + } else if (choice == 'resize') { var resizeFields = resizeDialog.getInputs(); if (resizeFields) { - // reset width and height values in form - resizeFields[0].value = $window.width(); - resizeFields[1].value = $window.height(); + resizeFields[0].value = Math.round( $window.outerWidth() ); + resizeFields[1].value = Math.round( $window.outerHeight() ); } resizeDialog.show(); - } - else if (choice == 'close') { - // close window, place focus on corresponding button on controller bar + } else if (choice == 'close') { if (which === 'transcript') { - this.closingTranscript = true; // stopgrap to prevent double-firing of keypress + this.closingTranscript = true; this.handleTranscriptToggle(); - } - else if (which === 'sign') { - this.closingSign = true; // stopgrap to prevent double-firing of keypress + } else if (which === 'sign') { + this.closingSign = true; this.handleSignToggle(); } } @@ -15430,7 +11641,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.startDrag = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newX, newY; + var thisObj, $windowPopup, startPos, newX, newY; thisObj = this; @@ -15441,30 +11652,16 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; } - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - - // if window's popup menu is open, close it if ($windowPopup.is(':visible')) { $windowPopup.hide(); } - // be sure this window is on top this.updateZIndex(which); - // get starting position of element startPos = this.$activeWindow.position(); this.dragStartX = startPos.left; this.dragStartY = startPos.top; @@ -15473,35 +11670,29 @@ if (typeof module !== "undefined" && module.exports) { this.dragDevice = 'keyboard'; this.dragKeyX = this.dragStartX; this.dragKeyY = this.dragStartY; - // add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd() this.startingDrag = true; - } - else { + } else { this.dragDevice = 'mouse'; - // get offset between mouse position and top left corner of draggable element this.dragOffsetX = this.startMouseX - this.dragStartX; this.dragOffsetY = this.startMouseY - this.dragStartY; } - // prepare element for dragging this.$activeWindow.addClass('able-drag').css({ 'position': 'absolute', 'top': this.dragStartY + 'px', 'left': this.dragStartX + 'px' - }).focus(); + }).trigger('focus'); - // add device-specific event listeners - if (this.dragDevice === 'mouse') { // might also be a touchpad + var dragDevice = this.dragDevice; + if (this.dragDevice === 'mouse') { $(document).on('mousemove touchmove',function(e) { if (thisObj.dragging) { - // calculate new top left based on current mouse position - offset newX = e.pageX - thisObj.dragOffsetX; newY = e.pageY - thisObj.dragOffsetY; thisObj.resetDraggedObject( newX, newY ); } }); - } - else if (this.dragDevice === 'keyboard') { + } else if (this.dragDevice === 'keyboard') { this.$activeWindow.on('keydown',function(e) { if (thisObj.dragging) { thisObj.dragKeys(which, e); @@ -15515,36 +11706,33 @@ if (typeof module !== "undefined" && module.exports) { var key, keySpeed; - var thisObj = this; - - // stopgap to prevent firing on initial Enter or space - // that selected "Move" from menu if (this.startingDrag) { this.startingDrag = false; return false; } - key = e.which; - keySpeed = 10; // pixels per keypress event + key = e.key; + keySpeed = 10; switch (key) { - case 37: // left - case 63234: + case 'ArrowLeft': this.dragKeyX -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveLeft', 'Window moved left' ) ); break; - case 38: // up - case 63232: + case 'ArrowUp': this.dragKeyY -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveUp', 'Window moved up' ) ); break; - case 39: // right - case 63235: + case 'ArrowRight': this.dragKeyX += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveRight', 'Window moved right' ) ); break; - case 40: // down - case 63233: + case 'ArrowDown': this.dragKeyY += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveDown', 'Window moved down' ) ); break; - case 13: // enter - case 27: // escape + case 'Enter': + case 'Escape': + this.$srAlertBox.text( this.translate( 'windowMoveStopped', 'Window move stopped' ) ); this.endDrag(which); return false; default: @@ -15558,6 +11746,9 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.resetDraggedObject = function ( x, y) { + setTimeout( () => { + this.$srAlertBox.text( '' ); + }, 2000 ); this.$activeWindow.css({ 'left': x + 'px', @@ -15569,16 +11760,12 @@ if (typeof module !== "undefined" && module.exports) { var innerHeight; - // which is either 'transcript' or 'sign' this.$activeWindow.css({ 'width': width + 'px', 'height': height + 'px' }); if (which === 'transcript') { - // $activeWindow is the outer $transcriptArea - // but the inner able-transcript also needs to be resized proporitionally - // (it's 50px less than its outer container) innerHeight = height - 50; this.$transcriptDiv.css('height', innerHeight + 'px'); } @@ -15586,248 +11773,292 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.endDrag = function(which) { - var thisObj, $window, $windowPopup, $windowButton; + var thisObj, $windowPopup, $windowButton; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } $(document).off('mousemove mouseup touchmove touchup'); this.$activeWindow.off('keydown').removeClass('able-drag'); - // restore activeWindow role from 'application' to 'dialog' this.$activeWindow.attr('role','dialog'); this.$activeWindow = null; if (this.dragDevice === 'keyboard') { - $windowButton.focus(); + $windowButton.trigger('focus'); } this.dragging = false; - // save final position of dragged element - this.updateCookie(which); + this.updatePreferences(which); - // reset starting mouse positions this.startMouseX = undefined; this.startMouseY = undefined; - // Boolean to stop stray events from firing this.windowMenuClickRegistered = false; - this.finishingDrag = true; // will be reset after window click event - // finishingDrag should e reset after window click event, - // which is triggered automatically after mouseup - // However, in case that's not reliable in some browsers - // need to ensure this gets cancelled + this.finishingDrag = true; setTimeout(function() { thisObj.finishingDrag = false; }, 100); }; - AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) { - - // return true if mouse is close to bottom right corner (resize target) - var tolerance, position, top, left, width, height, bottom, right; - - tolerance = 10; // number of pixels in both directions considered "close enough" - - // first, get position of element - position = $window.offset(); - top = position.top; - left = position.left; - width = $window.width(); - height = $window.height(); - bottom = top + height; - right = left + width; - if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) { - return true; - } - return false; - }; - AblePlayer.prototype.startResize = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight; + var thisObj, $windowPopup, newWidth, newHeight; thisObj = this; this.$activeWindow = $element; this.resizing = true; - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } + $windowPopup = (which === 'transcript') ? this.$transcriptPopup : this.$signPopup; - // if window's popup menu is open, close it & place focus on button (???) if ($windowPopup.is(':visible')) { - $windowPopup.hide().parent().focus(); + $windowPopup.hide().parent().trigger('focus'); } - // get starting width and height startPos = this.$activeWindow.position(); this.dragKeyX = this.dragStartX; this.dragKeyY = this.dragStartY; this.dragStartWidth = this.$activeWindow.width(); - this.dragStartHeight = this.$activeWindow.height(); + this.dragStartHeight = this.$activeWindow.outerHeight(); - // add event listeners $(document).on('mousemove touchmove',function(e) { if (thisObj.resizing) { - // calculate new width and height based on changes to mouse position newWidth = thisObj.dragStartWidth + (e.pageX - thisObj.startMouseX); newHeight = thisObj.dragStartHeight + (e.pageY - thisObj.startMouseY); thisObj.resizeObject( which, newWidth, newHeight ); } }); + return false; }; AblePlayer.prototype.endResize = function(which) { - var $window, $windowPopup, $windowButton; + var $windowPopup, $windowButton; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } $(document).off('mousemove mouseup touchmove touchup'); this.$activeWindow.off('keydown'); - $windowButton.show().focus(); + $windowButton.show().trigger('focus'); this.resizing = false; this.$activeWindow.removeClass('able-resize'); - // save final width and height of dragged element - this.updateCookie(which); + this.updatePreferences(which); - // Booleans for preventing stray events this.windowMenuClickRegistered = false; this.finishingDrag = true; - // finishingDrag should e reset after window click event, - // which is triggered automatically after mouseup - // However, in case that's not reliable in some browsers - // need to ensure this gets cancelled setTimeout(function() { this.finishingDrag = false; }, 100); }; - })(jQuery); (function ($) { AblePlayer.prototype.initSignLanguage = function() { - - // Sign language is only currently supported in HTML5 player, not YouTube or Vimeo - if (this.player === 'html5') { - // check to see if there's a sign language video accompanying this video - // check only the first source - // If sign language is provided, it must be provided for all sources - this.signFile = this.$sources.first().attr('data-sign-src'); - if (this.signFile) { + this.hasSignLanguage = false; + var hasLocalSrc = ( this.$sources.first().attr('data-sign-src') !== undefined && this.$sources.first().attr('data-sign-src') !== "" ); + var hasRemoteSrc = ( this.$media.data('youtube-sign-src') !== undefined && this.$media.data('youtube-sign-src') !== "" ); + var hasRemoteSource = ( this.$sources.first().attr('data-youtube-sign-src') !== undefined && this.$sources.first().attr('data-youtube-sign-src') !== '' ); + if ( ! this.isIOS() && ( hasLocalSrc \|\| hasRemoteSrc \|\| hasRemoteSource ) && ( this.player === 'html5' \|\| this.player === 'youtube' ) ) { + let ytSignSrc = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') ); + let signSrc = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') ); + let signVideo = DOMPurify.sanitize( this.$media.data('youtube-sign-src') ); + this.signFile = (hasLocalSrc ) ? signSrc : false; + if ( hasRemoteSrc ) { + this.signYoutubeId = signVideo; + } else if ( hasRemoteSource ) { + this.signYoutubeId = ytSignSrc; + } + if ( this.signFile \|\| this.signYoutubeId ) { if (this.isIOS()) { - // IOS does not allow multiple videos to play simultaneously - // Therefore, sign language as rendered by Able Player unfortunately won't work - this.hasSignLanguage = false; if (this.debug) { - - } - } - else { + + } + } else { if (this.debug) { - + + } + this.hasSignLanguage = true; + this.injectSignPlayerCode(); + } + } + } + }; + + AblePlayer.prototype.injectSignPlayerCode = function() { + + var thisObj, signVideoId, i, signSrc, srcType, $signSource; + + thisObj = this; + signVideoId = this.mediaId + '-sign'; + + if ( this.signFile \|\| this.signYoutubeId ) { + if ( null !== this.$signDivLocation ) { + this.$signDivLocation.addClass( 'able-sign-window able-fixed' ); + this.$signWindow = this.$signDivLocation; + } else { + this.$signWindow = $('<div>',{ + 'class' : 'able-sign-window', + 'role': 'dialog', + 'aria-label': this.translate( 'sign', 'Sign language' ) + }); + this.$signToolbar = $('<div>',{ + 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' + }); + this.$signWindow.append(this.$signToolbar); + } + + this.$ableWrapper.append(this.$signWindow); + } + + if ( this.signFile ) { + this.$signVideo = $('<video>',{ + 'id' : signVideoId, + 'tabindex' : '-1', + 'muted' : true, + }); + this.signVideo = this.$signVideo[0]; + + if ( this.signFile ) { + $signSource = $('<source>',{ + 'src' : this.signFile, + 'type' : 'video/' + this.signFile.substr(-3) + }); + this.$signVideo.append($signSource); + } else { + for (i=0; i < this.$sources.length; i++) { + signSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-sign-src') ); + srcType = this.$sources[i].getAttribute('type'); + if (signSrc) { + $signSource = $('<source>',{ + 'src' : signSrc, + 'type' : srcType + }); + this.$signVideo.append($signSource); + } else { + this.hasSignLanguage = false; + return; } - this.hasSignLanguage = true; - this.injectSignPlayerCode(); } } - else { - this.hasSignLanguage = false; - } + this.$signWindow.append( this.$signVideo ); + } else if ( this.signYoutubeId ) { + this.signYoutube = this.initYouTubeSignPlayer(); } - else { - this.hasSignLanguage = false; + + if ( null === this.$signDivLocation ) { + this.initDragDrop('sign'); } - }; - AblePlayer.prototype.injectSignPlayerCode = function() { + if (this.prefSign === 1) { + if ( null === this.$signDivLocation ) { + this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); + } + } else { + this.$signWindow.hide(); + } + }; - // create and inject surrounding HTML structure - var thisObj, signVideoId, signVideoWidth, i, signSrc, srcType, $signSource; + AblePlayer.prototype.initYouTubeSignPlayer = function () { + var thisObj, deferred, promise; thisObj = this; + deferred = new this.defer(); + promise = deferred.promise(); - signVideoWidth = this.getDefaultWidth('sign'); + this.youTubeSignPlayerReady = false; - signVideoId = this.mediaId + '-sign'; - this.$signVideo = $('<video>',{ - 'id' : signVideoId, - 'tabindex' : '-1' - }); - this.signVideo = this.$signVideo[0]; - // for each original <source>, add a <source> to the sign <video> - for (i=0; i < this.$sources.length; i++) { - signSrc = this.$sources[i].getAttribute('data-sign-src'); - srcType = this.$sources[i].getAttribute('type'); - if (signSrc) { - $signSource = $('<source>',{ - 'src' : signSrc, - 'type' : srcType - }); - this.$signVideo.append($signSource); - } - else { - // source is missing a sign language version - // can't include sign language - this.hasSignLanguage = false; - break; + if (AblePlayer.youTubeIframeAPIReady) { + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + } else { + if ( ! AblePlayer.loadingYouTubeIframeAPI ) { + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + + }); } + + $('body').on('youTubeIframeAPIReady', function () { + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + }); } + return promise; + }; - this.$signWindow = $('<div>',{ - 'class' : 'able-sign-window', - 'role': 'dialog', - 'aria-label': this.tt.sign - }); - this.$signToolbar = $('<div>',{ - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' - }); + AblePlayer.prototype.finalizeYoutubeSignInit = function () { - this.$signWindow.append(this.$signToolbar, this.$signVideo); + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - this.$ableWrapper.append(this.$signWindow); + deferred = new this.defer(); + promise = deferred.promise(); + thisObj = this; + containerId = this.mediaId + '_youtube_sign'; - // make it draggable - this.initDragDrop('sign'); + this.$signWindow.append($('<div>').attr('id', containerId)); + autoplay = (this.okToPlay) ? 1 : 0; - if (this.prefSign === 1) { - // sign window is on. Go ahead and position it and show it - this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); - } - else { - this.$signWindow.hide(); - } + this.youTubeSignPlayer = new YT.Player(containerId, { + videoId: this.getYouTubeId(this.signYoutubeId), + host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', + playerVars: { + autoplay: autoplay, + cc_lang_pref: this.captionLang, + cc_load_policy: 0, + controls: 0, + disableKb: 1, + enablejsapi: 1, + hl: this.lang, + iv_load_policy: 3, + origin: window.location.origin, + playsinline: this.playsInline, + rel: 0, + start: this.startTime + }, + events: { + onReady: function (player) { + player.target.mute(); + player.target.unloadModule( 'captions' ); + thisObj.youTubeSignPlayerReady = true; + + deferred.resolve(); + }, + onError: function (x) { + deferred.reject(); + }, + onStateChange: function (x) { + thisObj.getPlayerState().then(function() { + }); + }, + onApiChange: function() { + }, + onPlaybackQualityChange: function () { + }, + } + }); + + return promise; }; })(jQuery); (function ($) { - // Look up ISO 639-1 language codes to be used as subtitle labels - // In some instances "name" has been trunctation for readability - // Sources: - // http://stackoverflow.com/questions/3217492/list-of-language-codes-in-yaml-or-json/4900304#4900304 - // https://www.venea.net/web/culture_code var isoLangs = { "ab":{ @@ -16802,86 +13033,89 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getLanguageName = function (key,whichName) { - // return language name associated with lang code "key" - // whichName is either "English" or "local" (i.e., native name) - var lang, code, subTag; + var lang, code, subTag; lang = isoLangs[key.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName; - } - else { - return lang.name; - } - } - else if (key.includes('-')) { + if (lang) { + return (whichName === 'local') ? lang.nativeName : lang.name; + } else if (key.includes('-')) { code = key.substring(0,2); - subTag = key.substring(3); - lang = isoLangs[code.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName + ' (' + subTag + ')'; - } - else { - return lang.name + ' (' + subTag + ')'; - } + subTag = key.substring(3); + lang = isoLangs[code.toLowerCase()]; + if (lang) { + return (whichName === 'local') ? lang.nativeName + ' (' + subTag + ')' : lang.name + ' (' + subTag + ')'; } } - // if all else has failed, use the key as the label return key; }; })(jQuery); (function ($) { AblePlayer.prototype.getSupportedLangs = function() { - // returns an array of languages for which AblePlayer has translation tables - var langs = ['ca','cs','da','de','en','es','fr','he','id','it','ja','nb','nl','pt','pt-br','sv','tr','zh-tw']; + var langs = { + 'ca' : 'Catalan', + 'cs' : 'Czech', + 'da' : 'Danish', + 'de' : 'German', + 'en' : 'English', + 'es' : 'Spanish', + 'fr' : 'French', + 'he' : 'Hebrew', + 'id' : 'Indonesian', + 'it' : 'Italian', + 'ja' : 'Japanese', + 'ms' : 'Malay', + 'nb' : 'Norwegian Bokmål', + 'nl' : 'Dutch', + 'pl' : 'Polish', + 'pt' : 'Portuguese', + 'pt-br' : 'Brazilian Portuguese', + 'sv' : 'Swedish', + 'tr' : 'Turkish', + 'zh-tw' : 'Chinese (Taiwan)' + }; + return langs; }; - AblePlayer.prototype.getTranslationText = function() { + AblePlayer.prototype.translate = function( key, fallback, args = Array() ) { + let translation = ''; + if ( this.tt[ key ] ) { + translation = this.tt[ key ]; + } else { + translation = fallback; + } + if ( args.length > 0 ) { + args.forEach( ( val, index ) => { + let ref = index + 1; + translation = translation.replace( '%' + ref, val ); + }); + } + + return translation; + } - // determine language, then get labels and prompts from corresponding translation var + AblePlayer.prototype.getTranslationText = function() { - var deferred, thisObj, supportedLangs, docLang, msg, translationFile, collapsedLang, i, - similarLangFound; - deferred = $.Deferred(); + var deferred, thisObj, supportedLangs, docLang, translationFile, i, similarLangFound; + deferred = new this.defer(); thisObj = this; - supportedLangs = this.getSupportedLangs(); // returns an array - - if (this.lang) { // a data-lang attribute is included on the media element - if ($.inArray(this.lang,supportedLangs) === -1) { - // the specified language is not supported - if (this.lang.indexOf('-') == 2) { - // this is a localized lang attribute (e.g., fr-CA) - // try the parent language, given the first two characters - if ($.inArray(this.lang.substring(0,2),supportedLangs) !== -1) { - // parent lang is supported. Use that. - this.lang = this.lang.substring(0,2); - } - else { - // the parent language is not supported either - // unable to use the specified language - this.lang = null; - } - } - else { - // this is not a localized language. - // but maybe there's a similar localized language supported - // that has the same parent? - similarLangFound = false; - i = 0; - while (i < supportedLangs.length) { - if (supportedLangs[i].substring(0,2) == this.lang) { - this.lang = supportedLangs[i]; - similarLangFound = true; + supportedLangs = this.getSupportedLangs(); + + if (this.lang) { + if ( Object.hasOwn( supportedLangs,this.lang ) ) { + if ( this.lang.indexOf('-') == 2 ) { + this.lang = ( Object.hasOwn(supportedLangs,this.lang.substring(0,2)) !== -1 ) ? this.lang.substring(0,2) : null; + } else { + similarLangFound = false; + for ( const [key,value] of Object.entries(supportedLangs) ) { + if ( key.substring(0,2) == this.lang ) { + this.lang = supportedLangs[i]; + similarLangFound = true; } - i++; } - if (!similarLangFound) { - // language requested via data-lang is not supported + if ( !similarLangFound ) { this.lang = null; } } @@ -16889,28 +13123,19 @@ if (typeof module !== "undefined" && module.exports) { } if (!this.lang) { - // try the language of the web page, if specified if ($('body').attr('lang')) { docLang = $('body').attr('lang').toLowerCase(); - } - else if ($('html').attr('lang')) { + } else if ($('html').attr('lang')) { docLang = $('html').attr('lang').toLowerCase(); - } - else { + } else { docLang = null; } if (docLang) { - if ($.inArray(docLang,supportedLangs) !== -1) { - // the document language is supported + if ( Object.hasOwn( supportedLangs,docLang ) ) { this.lang = docLang; - } - else { - // the document language is not supported + } else { if (docLang.indexOf('-') == 2) { - // this is a localized lang attribute (e.g., fr-CA) - // try the parent language, given the first two characters - if ($.inArray(docLang.substring(0,2),supportedLangs) !== -1) { - // the parent language is supported. use that. + if ( Object.hasOwn(supportedLangs,docLang.substring(0,2)) ) { this.lang = docLang.substring(0,2); } } @@ -16919,294 +13144,93 @@ if (typeof module !== "undefined" && module.exports) { } if (!this.lang) { - // No supported language has been specified by any means - // Fallback to English this.lang = 'en'; } if (!this.searchLang) { this.searchLang = this.lang; } - translationFile = this.rootPath + 'translations/' + this.lang + '.js'; - $.getJSON(translationFile, function(data) { - // success! - thisObj.tt = data; - deferred.resolve(); - }) - .fail(function() { - - thisObj.provideFallback(); - deferred.fail(); - }) + translationFile = this.rootPath + 'translations/' + this.lang + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + + translationFile = thisObj.rootPath + 'translations/' + thisObj.lang + '.js'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + + thisObj.tt = {}; + thisObj.translationFiles = false; + deferred.resolve(); + }); + }); return deferred.promise(); }; AblePlayer.prototype.getSampleDescriptionText = function() { + if ( ! this.translationFiles ) { + this.sampleText = []; + let translation = { 'lang':'en', 'text': this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) }; + this.sampleText.push(translation); + } else { + var thisObj, supportedLangs, thisLang, translationFile, thisText, translation; + + supportedLangs = this.getSupportedLangs(); + thisObj = this; - // Create an array of sample description text in all languages - // This needs to be readily available for testing different voices - // in the Description Preferences dialog - var thisObj, supportedLangs, i, thisLang, translationFile, thisText, translation; - - supportedLangs = this.getSupportedLangs(); - - thisObj = this; - - this.sampleText = []; - for (i=0; i < supportedLangs.length; i++) { - translationFile = this.rootPath + 'translations/' + supportedLangs[i] + '.js'; - $.getJSON(translationFile, thisLang, (function(thisLang) { - return function(data) { - thisText = data.sampleDescriptionText; - translation = {'lang':thisLang, 'text': thisText}; - thisObj.sampleText.push(translation); - }; - }(supportedLangs[i])) // pass lang to callback function - ); + this.sampleText = []; + for ( const [key,value] of Object.entries(supportedLangs) ) { + translationFile = this.rootPath + 'translations/' + key + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisText = data.sampleDescriptionText; + translation = {'lang':thisLang, 'text': thisText}; + thisObj.sampleText.push(translation); + }); + } } }; })(jQuery); -(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); - -/! Copyright (c) 2014 - Paul Tavares - purtuga - @paul_tavares - MIT License / -;(function($){ - - /** - * Delays the execution of a function until an expression returns true. - * The expression is checked every 100 milliseconds for as many tries - * as defined in in the attempts option - * - * @param {Object} options - * @param {Function} options.when - * Function to execute on every interval. - * Must return true (boolean) in order for - * options.do to be executed. - * @param {Function} [options.exec] - * Function to be executed once options.when() - * returns true. - * @param {Interger} [options.interval=100] - * How long to wait in-between tries. - * @param {Interger} [options.attempts=100] - * How many tries to use before its considered - * a failure. - * @param {Interger} [options.delayed=0] - * Number of miliseconds to wait before execution - is started. Default is imediately. - * - * @return {jQuery.Promise} - * - * @example - * - * $.doWhen({ - * when: function(){ - * return false; - * }, - * exec: function(){ - * alert("never called given false response on when param!"); - * } - * }) - * .fail(function(){ - * alert('ALERT: FAILED CONDITION'); - * }) - * .then(function(){ - * alert("resolved."); - * }); - * - / - $.doWhen = function(options) { - - return $.Deferred(function(dfd){ - - var opt = $.extend({}, { - when: null, - exec: function(){}, - interval: 100, - attempts: 100, - delayed: 0 - }, - options, - { - checkId: null - }), - startChecking = function(){ - - // Check condition now and if true, then resolve object - if (opt.when() === true) { - - opt.exec.call(dfd.promise()); - dfd.resolve(); - return; - - } - - // apply minimal UI and hide the overlay - opt.checkId = setInterval(function(){ - - if (opt.attempts === 0) { - - clearInterval(opt.checkId); - dfd.reject(); - - } else { - - --opt.attempts; - - if (opt.when() === true) { - - opt.attempts = 0; - clearInterval(opt.checkId); - opt.exec.call(dfd.promise()); - dfd.resolve(); - - } - - } - - }, opt.interval); - - }; - - if (opt.delayed > 0) { - - setTimeout(startChecking, Number(opt.delayed)); - - } else { - - startChecking(); - - } - - }).promise(); - - }; - -})(jQuery); -/ 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; + var thisObj, $heading, $instructions, $p1, $p2, $ul, $li1, $li2, $li3, + $fieldset, $legend, i, $radioDiv, radioId, $label, $radio, $saveButton, $savedTable; thisObj = this; - if ($('#able-vts').length) { - // Page includes a container for a VTS instance - - // Are they qualifying tracks? + if ( null !== document.getElementById( 'able-vts' ) ) { 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 + let heading = this.translate( 'vtsHeading', 'Video Transcript Sorter' ); + $heading = $('<h2>').text( heading ); $('#able-vts').append($heading); - // Inject an empty div for writing messages this.$vtsAlert = $('<div>',{ 'id': 'able-vts-alert', 'aria-live': 'polite', @@ -17214,29 +13238,26 @@ if (typeof module !== "undefined" && module.exports) { }) $('#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:'); + $p1 = $('<p>').text( this.translate( 'vtsInstructions1', 'Use the Video Transcript Sorter to modify text tracks:' ) ); $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.'); + $li1 = $('<li>').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 = $('<li>').text( this.translate( 'vtsInstructions3', 'Modify content or start/end times (all are directly editable within the table).' ) ); + $li3 = $('<li>').text( this.translate( 'vtsInstructions4', 'Add new content, such as chapters or descriptions.' ) ); + $p2 = $('<p>').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 = $('<fieldset>'); - $legend = $('<legend>').text('Select a language'); // TODO: Localize this - $fieldset.append($legend) + $legend = $('<legend>').text( this.translate( 'vtsSelectLanguage', 'Select a language' ) ); + $fieldset.append($legend); + $fieldWrapper = $( '<div class="vts-lang-selector"></div>' ); 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', @@ -17249,35 +13270,27 @@ if (typeof module !== "undefined" && module.exports) { 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: - // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; - // TODO: if using this be sure to add lang attr to <div> (see above) }).text(this.getLanguageName(this.langs[i])); $radioDiv.append($radio,$label); - $fieldset.append($radioDiv); + $fieldWrapper.append($radioDiv); } + $fieldset.append( $fieldWrapper ); $('#able-vts').append($fieldset); - - // Inject a 'Save Changes' button + let vtsSave = this.translate( 'vtsSave', 'Generate new .vtt content' ); $saveButton = $('<button>',{ 'type': 'button', 'id': 'able-vts-save', 'value': 'save' - }).text('Save Changes'); // TODO: Localize this + }).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, i, closestKind; + var kindOptions, beforeEditing, editedCell, editedContent, i; kindOptions = ['captions','chapters','descriptions','subtitles']; $('td[contenteditable="true"]').on('focus',function() { beforeEditing = $(this).text(); @@ -17286,61 +13299,43 @@ if (typeof module !== "undefined" && module.exports) { 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') { + } else if (editedContent.substring(0,1) === 'd') { $(this).text('descriptions'); - } - else if (editedContent.substring(0,2) === 'ch') { + } else if (editedContent.substring(0,2) === 'ch') { $(this).text('chapters'); - } - else { - // whatever else they types, assume 'captions' + } else { $(this).text('captions'); } } - } - else if (editedCell === 2 \|\| editedCell === 3) { - // start or end time - // ensure proper formatting (with 3 decimal places) + } else if (editedCell === 2 \|\| editedCell === 3) { $(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 + $(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('Save Changes'); // TODO: Localize this + } else { + $(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('Cancelling saving. Any edits you made have been restored in the VTS table.'); // TODO: Localize this + thisObj.showVtsAlert( thisObj.translate( 'vtsCancel', 'Cancelling saving. Any edits you made have been restored in the VTS table.' ) ); } }); } @@ -17349,10 +13344,6 @@ if (typeof module !== "undefined" && module.exports) { 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) - - // Called from tracks.js var srcFile, vtsCues; srcFile = this.getFilenameFromPath(src); @@ -17370,27 +13361,17 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getFilenameFromPath = function(path) { var lastSlash; - lastSlash = path.lastIndexOf('/'); - if (lastSlash === -1) { - // there are no slashes in path. - return path; - } - else { - return path.substring(lastSlash+1); - } + return (lastSlash === -1) ? path : path.substring(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; }; @@ -17403,10 +13384,8 @@ if (typeof module !== "undefined" && module.exports) { 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; @@ -17414,15 +13393,11 @@ if (typeof module !== "undefined" && module.exports) { 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 + } else { content += nextRow; } - } - else { + } else { blankRow = true; } j++; @@ -17432,10 +13407,9 @@ if (typeof module !== "undefined" && module.exports) { 'end': timeParts[2], 'content': content }); - i = j; //skip ahead + i = j; } - } - else { + } else { i++; } } @@ -17444,37 +13418,21 @@ if (typeof module !== "undefined" && module.exports) { 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; - } + 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 + } else if (lastPart.length < 3) { while (lastPart.length < 3) { lastPart += '0'; } @@ -17485,12 +13443,10 @@ if (typeof module !== "undefined" && module.exports) { 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; + 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(); } @@ -17498,10 +13454,16 @@ if (typeof module !== "undefined" && module.exports) { $table = $('<table>',{ 'lang': lang }); - $tr = $('<tr>',{ - 'lang': 'en' // TEMP, until header row is localized - }); - headers = ['Row #','Kind','Start','End','Content','Actions']; // TODO: Localize this + $thead = $( '<thead>' ); + $tr = $( '<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 = $('<th>', { 'scope': 'col' @@ -17511,9 +13473,9 @@ if (typeof module !== "undefined" && module.exports) { } $tr.append($th); } - $table.append($tr); + $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; @@ -17522,35 +13484,29 @@ if (typeof module !== "undefined" && module.exports) { '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 + }).text(rows[i].content); $tr.append($td); - // Actions $td = this.addVtsActionButtons(rowNum,rows.length); $tr.append($td); @@ -17558,16 +13514,12 @@ if (typeof module !== "undefined" && module.exports) { } $('#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>'); @@ -17603,12 +13555,10 @@ if (typeof module !== "undefined" && module.exports) { $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') { + } else if (button === 'down') { if (rowNum < numRows) { $button = $('<button>',{ 'id': 'able-vts-button-down-' + rowNum, @@ -17636,13 +13586,10 @@ if (typeof module !== "undefined" && module.exports) { $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 + } else if (button === 'insert') { $button = $('<button>',{ 'id': 'able-vts-button-insert-' + rowNum, 'title': 'Insert row below', @@ -17672,12 +13619,9 @@ if (typeof module !== "undefined" && module.exports) { $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 + } else if (button === 'delete') { $button = $('<button>',{ 'id': 'able-vts-button-delete-' + rowNum, 'title': 'Delete row ', @@ -17715,7 +13659,6 @@ if (typeof module !== "undefined" && module.exports) { $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); } @@ -17725,14 +13668,11 @@ if (typeof module !== "undefined" && module.exports) { 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); @@ -17742,24 +13682,20 @@ if (typeof module !== "undefined" && module.exports) { 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; + var credit + = 'Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a>' + + ' from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a>' + + ' are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a>' + ; + return '<div id="able-vts-icon-credit">' + credit + '</div>'; }; 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; } } @@ -17768,15 +13704,11 @@ if (typeof module !== "undefined" && module.exports) { 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, @@ -17789,7 +13721,6 @@ if (typeof module !== "undefined" && module.exports) { } } } - // Now sort cues by start time cues.sort(function(a,b) { return a.start > b.start ? 1 : -1; }); @@ -17799,54 +13730,41 @@ if (typeof module !== "undefined" && module.exports) { 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 + } else if (action == 'down') { this.moveRow(rowNum,'down'); - } - else if (action == 'insert') { - // insert a row below + } else if (action == 'insert') { this.insertRow(rowNum); - } - else if (action == 'delete') { - // delete the row + } else if (action == 'delete') { 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; + 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 + numRows = $rows.length - 1; 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, @@ -17856,9 +13774,7 @@ if (typeof module !== "undefined" && module.exports) { 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']; @@ -17871,48 +13787,40 @@ if (typeof module !== "undefined" && module.exports) { $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 + $rows.eq(i).attr('id','able-vts-row-' + nextRowNum); + $rows.eq(i).find('td').eq(0).text(nextRowNum); $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 + let newAlert = this.translate( 'vtsNewRow', 'A new row %1 has been inserted.', [ newRowNum ] ); + this.showVtsAlert( newAlert ); - // Place focus in new select field - $select.focus(); + $select.trigger('focus'); }; @@ -17922,27 +13830,25 @@ if (typeof module !== "undefined" && module.exports) { $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 + $rows = $table.find('tr'); + numRows = $rows.length - 1; - // 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 + $rows.eq(i).attr('id','able-vts-row-' + nextRowNum); + $rows.eq(i).find('td').eq(0).text(nextRowNum); $buttons = $rows.eq(i).find('button'); this.updateVtsActionButtons($buttons,nextRowNum); } - // Announce the deletion - this.showVtsAlert('Row ' + rowNum + ' has been deleted'); // TODO: Localize this + let newAlert = this.translate( 'vtsDeletedRow', 'Row %1 has been deleted.', [ rowNum ] ); + this.showVtsAlert( newAlert ); }; AblePlayer.prototype.moveRow = function(rowNum,direction) { - // swap two rows - var $rows, $thisRow, otherRowNum, $otherRow, newTimes, msg; + var $rows, $thisRow, otherRowNum, $otherRow, msg; $rows = $('#able-vts table').find('tr'); $thisRow = $('#able-vts table').find('tr').eq(rowNum); @@ -17950,13 +13856,11 @@ if (typeof module !== "undefined" && module.exports) { otherRowNum = parseInt(rowNum) - 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.before($thisRow); - } - else if (direction == 'down') { + } 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); @@ -17964,80 +13868,42 @@ if (typeof module !== "undefined" && module.exports) { $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; + 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); - 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'; - } + 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); - 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; - } + 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 + } else { prevRowNum = null; $prevRow = null; prevKind = null; @@ -18045,25 +13911,13 @@ if (typeof module !== "undefined" && module.exports) { 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; - } + 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 + } else { nextRowNum = null; $nextRow = null; nextKind = null; @@ -18073,91 +13927,48 @@ if (typeof module !== "undefined" && module.exports) { 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) + end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (parseFloat(start) + minDuration[kind]).toFixed(3); + } else if (prevKind === 'chapters') { 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 + end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (parseFloat(start) + minDurartion[kind]).toFixed(3); + } else if (prevKind === 'descriptions') { 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)) + } else { if (prevStart) { - // this is not the first row. if (prevStart < start) { if (start < nextStart) { - // No change is necessary - } - else { - // nextStart needs to be incremented + } else { 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 + } else { start = (parseFloat(prevStart) + minDuration[prevKind]).toFixed(3); end = (parseFloat(start) + minDuration[kind]).toFixed(3); } - } - else { - // this is the first row + } else { if (start < nextStart) { - // No change is necessary - } - else { - // nextStart needs to be incremented + } else { 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) { @@ -18172,36 +13983,29 @@ if (typeof module !== "undefined" && module.exports) { 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 + } else { 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 - this.$vtsAlert.text(message).show().delay(3000).fadeOut('slow'); + 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'); @@ -18218,7 +14022,7 @@ if (typeof module !== "undefined" && module.exports) { 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(); + content = $rows.eq(i).find('td').eq(4)[0].innerText; if (start !== undefined && end !== undefined) { vtt[kind] += start + ' --> ' + end + "\n"; if (content !== 'undefined') { @@ -18236,7 +14040,6 @@ if (typeof module !== "undefined" && module.exports) { 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) } } @@ -18246,14 +14049,13 @@ if (typeof module !== "undefined" && module.exports) { var $heading, filename, $p, pText, $textarea; - $heading = $('<h3>').text(kind.charAt(0).toUpperCase() + kind.slice(1)); + $heading = $('<h3>').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 += '<em>' + kind + '</em> WebVTT file (<strong>' + filename + '</strong>).'; - } - else { + } else { pText += 'into a new ' + this.getLanguageName(lang) + ' <em>' + kind + '</em> WebVTT file.'; } $p = $('<p>',{ @@ -18265,74 +14067,48 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); - (function ($) { + AblePlayer.prototype.initVimeoPlayer = function () { - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; + var thisObj, deferred, promise, containerId, vimeoId, options; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); containerId = this.mediaId + '_vimeo'; - // add container to which Vimeo player iframe will be appended this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // if a described version is available && user prefers desription - // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } + vimeoId = (this.vimeoDescId && this.prefDesc) ? this.vimeoDescId : this.vimeoId; + this.activeVimeoId = vimeoId; - // Notes re. Vimeo Embed Options: - // If a video is owned by a user with a paid Plus, PRO, or Business account, - // setting the "controls" option to "false" will hide the default controls, without hiding captions. - // This is a new option from Vimeo; previously used "background:true" to hide the controller, - // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - if (this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } + autoplay = (this.okToPlay) ? 'true' : 'false'; - if (this.playerWidth) { - if (this.vimeoUrlHasParams) { - // use url param, not id + if (this.playerWidth) { + if (this.vimeoUrlHasParams) { options = { url: vimeoId, width: this.playerWidth, controls: false } - } - else { + } else { options = { id: vimeoId, width: this.playerWidth, controls: false } } - } - else { - // initialize without width & set width later - if (this.vimeoUrlHasParams) { + } else { + if (this.vimeoUrlHasParams) { options = { url: vimeoId, controls: false } - } - else { + } else { options = { id: vimeoId, controls: false @@ -18343,44 +14119,28 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer = new Vimeo.Player(containerId, options); this.vimeoPlayer.ready().then(function() { - // add tabindex -1 on iframe so vimeo frame cannot be focused on $('#'+containerId).children('iframe').attr({ 'tabindex': '-1', 'aria-hidden': true }); - // get video's intrinsic size and initiate player dimensions - thisObj.vimeoPlayer.getVideoWidth().then(function(width) { - if (width) { - // also get height - thisObj.vimeoPlayer.getVideoHeight().then(function(height) { - if (height) { - thisObj.resizePlayer(width,height); + thisObj.vimeoPlayer.getVideoWidth().then(function(width) { + if (width) { + thisObj.vimeoPlayer.getVideoHeight().then(function(height) { + if (height) { + thisObj.resizePlayer(width,height); } - }); + }); } }).catch(function(error) { - // an error occurred getting height or width - // TODO: Test this to see how gracefully it organically recovers }); if (!thisObj.hasPlaylist) { - // remove the media element, since Vimeo replaces that with its own element in an iframe - // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() thisObj.$media.remove(); - // define variables that will impact player setup - // vimeoSupportsPlaybackRateChange - // changing playbackRate is only supported if the video is hosted on a Pro or Business account - // unfortunately there is no direct way to query for that information. - // this.vimeoPlayer.getPlaybackRate() returns a value, regardless of account type - // This is a hack: - // Attempt to change the playbackRate. If it results in an error, assume changing playbackRate is not supported. - // Supported playbackRate values are 0.5 to 2. thisObj.vimeoPlaybackRate = 1; thisObj.vimeoPlayer.setPlaybackRate(thisObj.vimeoPlaybackRate).then(function(playbackRate) { - // playback rate was set thisObj.vimeoSupportsPlaybackRateChange = true; }).catch(function(error) { thisObj.vimeoSupportsPlaybackRateChange = false; @@ -18394,11 +14154,10 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPaused = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getPaused().then(function (paused) { - // paused is Boolean deferred.resolve(paused); }); @@ -18408,11 +14167,10 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoEnded = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getEnded().then(function (ended) { - // ended is Boolean deferred.resolve(ended); }); @@ -18421,11 +14179,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoState = function () { - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; + var deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - thisObj = this; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); promises = []; @@ -18449,41 +14205,29 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoCaptionTracks = function () { - // get data via Vimeo Player API, and push data to this.captions - // Note: Vimeo doesn't expose the caption cues themselves - // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - var thisObj, i, trackId, isDefaultTrack; + var thisObj, i, isDefaultTrack; thisObj = this; this.vimeoPlayer.getTextTracks().then(function(tracks) { - // each Vimeo track includes the following: - // label (local name of the language) - // language (2-character code) - // kind (captions or subtitles, as declared by video owner) - // mode ('disabled' or 'showing') if (tracks.length) { - // create a new button for each caption track for (i=0; i<tracks.length; i++) { thisObj.hasCaptions = true; if (thisObj.prefCaptions === 1) { thisObj.captionsOn = true; - } - else { + } else { thisObj.captionsOn = false; } - // assign the default track based on language of the player if (tracks[i]['language'] === thisObj.lang) { isDefaultTrack = true; - } - else { + } else { isDefaultTrack = false; } thisObj.tracks.push({ @@ -18491,18 +14235,16 @@ if (typeof module !== "undefined" && module.exports) { 'language': tracks[i]['language'], 'label': tracks[i]['label'], 'def': isDefaultTrack - }); + }); } - thisObj.captions = thisObj.tracks; + thisObj.captions = thisObj.tracks; thisObj.hasCaptions = true; - // setupPopups again with new captions array, replacing original thisObj.setupPopups('captions'); deferred.resolve(); - } - else { + } else { thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; + thisObj.usingVimeoCaptions = false; deferred.resolve(); } }); @@ -18512,69 +14254,48 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPosterUrl = function (vimeoId, width) { - // this is a placeholder, copied from getYouTubePosterUrl() - // Vimeo doesn't seem to have anything similar, - // nor does it seem to be possible to get the poster via the Vimeo API - // Vimeo playlist support (with thumbnail images) may require use of data-poster + var url = 'http://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId, imageUrl = ''; - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 + fetch( url ).then( response => { - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; - }; + return response.json(); + }) + .then( json => { + imageUrl = json.thumbnail_url; + }) + .catch( error => { + if (thisObj.debug) { + + } + }); + + return imageUrl; + }; AblePlayer.prototype.getVimeoId = function (url) { - - // return a Vimeo ID, extracted from a full Vimeo URL - // Supported URL patterns are anything containing 'vimeo.com' - // and ending with a '/' followed by the ID. - // (Vimeo IDs do not have predicatable lengths) - - // Update: If URL contains parameters, return the full url - // This will need to be passed to the Vimeo Player API - // as a url parameter, not as an id parameter - this.vimeoUrlHasParams = false; - - var idStartPos, id; - - if (typeof url === 'number') { - // this is likely already a vimeo ID - return url; - } - else if (url.indexOf('vimeo.com') !== -1) { - // this is a full Vimeo URL - if (url.indexOf('?') !== -1) { - // URL contains parameters - this.vimeoUrlHasParams = true; - return url; - } - else { - url = url.trim(); - idStartPos = url.lastIndexOf('/') + 1; - id = url.substring(idStartPos); - return id; - } - } - else { - return url; - } -}; + + + this.vimeoUrlHasParams = false; + + if (typeof url === 'number') { + return url; + } else { + urlObject = new URL(url); + } + if ( 'vimeo.com' === urlObject.hostname \|\| 'player.vimeo.com' === urlObject.hostname ) { + if ( '' !== urlObject.search ) { + this.vimeoUrlHasParams = true; + return url; + } else { + if ( 'player.vimeo.com' === urlObject.hostname ) { + return urlObject.pathname.replace( '/video/', '' ); + } else { + return urlObject.pathname.replace( '/', '' ); + } + } + } else { + return url; + } + }; })(jQuery); diff --git a/src/build/ableplayer.js b/src/build/ableplayer.js index 7a61ad5..dbe8165 100644 --- a/src/build/ableplayer.js +++ b/src/build/ableplayer.js @@ -1,5 +1,5 @@ -/! ableplayer V4.5.1 with DOMPurify included / -/! @license DOMPurify 3.2.4 \| (c) Cure53 and other contributors \| Released under the Apache license 2.0 and Mozilla Public License 2.0 \| github.com/cure53/DOMPurify/blob/3.2.4/LICENSE / +/! ableplayer V4.8.0 with DOMPurify included / +/! @license DOMPurify 3.3.1 \| (c) Cure53 and other contributors \| Released under the Apache license 2.0 and Mozilla Public License 2.0 \| github.com/cure53/DOMPurify/blob/3.3.1/LICENSE / (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : @@ -34,12 +34,18 @@ }; } if (!apply) { - apply = function apply(fun, thisValue, args) { - return fun.apply(thisValue, args); + apply = function apply(func, thisArg) { + for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { + args[_key - 2] = arguments[_key]; + } + return func.apply(thisArg, args); }; } if (!construct) { - construct = function construct(Func, args) { + construct = function construct(Func) { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } return new Func(...args); }; } @@ -65,8 +71,11 @@ / function unapply(func) { return function (thisArg) { - for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; + if (thisArg instanceof RegExp) { + thisArg.lastIndex = 0; + } + for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) { + args[_key3 - 1] = arguments[_key3]; } return apply(func, thisArg, args); }; @@ -77,12 +86,12 @@ * @param func - The constructor function to be wrapped and called. * @returns A new function that constructs an instance of the given constructor function with the provided arguments. / - function unconstruct(func) { + function unconstruct(Func) { return function () { - for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { - args[_key2] = arguments[_key2]; + for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { + args[_key4] = arguments[_key4]; } - return construct(func, args); + return construct(Func, args); }; } /* @@ -181,8 +190,8 @@ return fallbackValue; } - const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']); - const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']); + const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'search', 'section', 'select', 'shadow', 'slot', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']); + const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'enterkeyhint', 'exportparts', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'inputmode', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'part', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']); const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']); // List of SVG elements that are disallowed by default. // We still need to know them so that we can do namespace @@ -195,8 +204,8 @@ const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']); const text = freeze(['#text']); - const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']); - const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']); + const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'exportparts', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inert', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'part', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']); + const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'mask-type', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']); const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']); const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']); @@ -206,7 +215,7 @@ const TMPLIT_EXPR = seal(/\$\{[\w\W]/gm); // eslint-disable-line unicorn/better-regex const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]+$/); // eslint-disable-line no-useless-escape const ARIA_ATTR = seal(/^aria-[\-\w]+$/); // eslint-disable-line no-useless-escape - const IS_ALLOWED_URI = seal(/^(?:(?:(?:f\|ht)tps?\|mailto\|tel\|callto\|sms\|cid\|xmpp):\|[^a-z]\|[a-z+.\-]+(?:[^a-z+.\-:]\|$))/i // eslint-disable-line no-useless-escape + const IS_ALLOWED_URI = seal(/^(?:(?:(?:f\|ht)tps?\|mailto\|tel\|callto\|sms\|cid\|xmpp\|matrix):\|[^a-z]\|[a-z+.\-]+(?:[^a-z+.\-:]\|$))/i // eslint-disable-line no-useless-escape ); const IS_SCRIPT_OR_DATA = seal(/^(?:\w+script\|data):/i); const ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g // eslint-disable-line no-control-regex @@ -303,7 +312,7 @@ function createDOMPurify() { let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal(); const DOMPurify = root => createDOMPurify(root); - DOMPurify.version = '3.2.4'; + DOMPurify.version = '3.3.1'; DOMPurify.removed = []; if (!window \|\| !window.document \|\| window.document.nodeType !== NODE_TYPE.document \|\| !window.Element) { // Not running in a browser, provide a factory function @@ -414,6 +423,21 @@ let FORBID_TAGS = null; / Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) / let FORBID_ATTR = null; + / Config object to store ADD_TAGS/ADD_ATTR functions (when used as functions) / + const EXTRA_ELEMENT_HANDLING = Object.seal(create(null, { + tagCheck: { + writable: true, + configurable: false, + enumerable: true, + value: null + }, + attributeCheck: { + writable: true, + configurable: false, + enumerable: true, + value: null + } + })); / Decide if ARIA attributes are okay / let ALLOW_ARIA_ATTR = true; / Decide if custom data attributes are okay / @@ -542,8 +566,8 @@ URI_SAFE_ATTRIBUTES = objectHasOwnProperty(cfg, 'ADD_URI_SAFE_ATTR') ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR, transformCaseFunc) : DEFAULT_URI_SAFE_ATTRIBUTES; DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS, transformCaseFunc) : DEFAULT_DATA_URI_TAGS; FORBID_CONTENTS = objectHasOwnProperty(cfg, 'FORBID_CONTENTS') ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS; - FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : {}; - FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : {}; + FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : clone({}); + FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : clone({}); USE_PROFILES = objectHasOwnProperty(cfg, 'USE_PROFILES') ? cfg.USE_PROFILES : false; ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true @@ -606,16 +630,24 @@ } / Merge configuration parameters / if (cfg.ADD_TAGS) { - if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) { - ALLOWED_TAGS = clone(ALLOWED_TAGS); + if (typeof cfg.ADD_TAGS === 'function') { + EXTRA_ELEMENT_HANDLING.tagCheck = cfg.ADD_TAGS; + } else { + if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) { + ALLOWED_TAGS = clone(ALLOWED_TAGS); + } + addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc); } - addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc); } if (cfg.ADD_ATTR) { - if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) { - ALLOWED_ATTR = clone(ALLOWED_ATTR); + if (typeof cfg.ADD_ATTR === 'function') { + EXTRA_ELEMENT_HANDLING.attributeCheck = cfg.ADD_ATTR; + } else { + if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) { + ALLOWED_ATTR = clone(ALLOWED_ATTR); + } + addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc); } - addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc); } if (cfg.ADD_URI_SAFE_ATTR) { addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc); @@ -626,6 +658,12 @@ } addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc); } + if (cfg.ADD_FORBID_CONTENTS) { + if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) { + FORBID_CONTENTS = clone(FORBID_CONTENTS); + } + addToSet(FORBID_CONTENTS, cfg.ADD_FORBID_CONTENTS, transformCaseFunc); + } / Add #text in case KEEP_CONTENT is set to true / if (KEEP_CONTENT) { ALLOWED_TAGS['#text'] = true; @@ -908,7 +946,7 @@ allowedTags: ALLOWED_TAGS }); / Detect mXSS attempts abusing namespace confusion / - if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w]/g, currentNode.innerHTML) && regExpTest(/<[/\w]/g, currentNode.textContent)) { + if (SAFE_FOR_XML && currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w!]/g, currentNode.innerHTML) && regExpTest(/<[/\w!]/g, currentNode.textContent)) { _forceRemove(currentNode); return true; } @@ -923,7 +961,7 @@ return true; } / Remove element if anything forbids its presence / - if (!ALLOWED_TAGS[tagName] \|\| FORBID_TAGS[tagName]) { + if (!(EXTRA_ELEMENT_HANDLING.tagCheck instanceof Function && EXTRA_ELEMENT_HANDLING.tagCheck(tagName)) && (!ALLOWED_TAGS[tagName] \|\| FORBID_TAGS[tagName])) { / Check if we have a custom element to handle / if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) { if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) { @@ -995,12 +1033,12 @@ (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data--attributes) XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804) We don't need to check the value; it's always URI safe. / - if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (!ALLOWED_ATTR[lcName] \|\| FORBID_ATTR[lcName]) { + if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (EXTRA_ELEMENT_HANDLING.attributeCheck instanceof Function && EXTRA_ELEMENT_HANDLING.attributeCheck(lcName, lcTag)) ; else if (!ALLOWED_ATTR[lcName] \|\| FORBID_ATTR[lcName]) { if ( // First condition does a very basic check if a) it's basically a valid custom element tagname AND // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck - _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) \|\| CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) \|\| CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) \|\| + _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) \|\| CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) \|\| CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName, lcTag)) \|\| // Alternative, second condition checks if it's an `is`-attribute, AND // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) \|\| CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else { @@ -1060,7 +1098,8 @@ value: attrValue } = attr; const lcName = transformCaseFunc(name); - let value = name === 'value' ? attrValue : stringTrim(attrValue); + const initValue = attrValue; + let value = name === 'value' ? initValue : stringTrim(initValue); / Execute a hook if present / hookEvent.attrName = lcName; hookEvent.attrValue = value; @@ -1078,7 +1117,12 @@ value = SANITIZE_NAMED_PROPS_PREFIX + value; } / Work around a security issue with comments inside attributes / - if (SAFE_FOR_XML && regExpTest(/((--!?\|])>)\|<\/(style\|title)/i, value)) { + if (SAFE_FOR_XML && regExpTest(/((--!?\|])>)\|<\/(style\|title\|textarea)/i, value)) { + _removeAttribute(name, currentNode); + continue; + } + / Make sure we cannot easily use animated hrefs, even if animations are allowed / + if (lcName === 'attributename' && stringMatch(value, 'href')) { _removeAttribute(name, currentNode); continue; } @@ -1086,10 +1130,9 @@ if (hookEvent.forceKeepAttr) { continue; } - / Remove attribute / - _removeAttribute(name, currentNode); / Did the hooks approve of the attribute? / if (!hookEvent.keepAttr) { + _removeAttribute(name, currentNode); continue; } / Work around a security issue in jQuery 3.0 / @@ -1106,6 +1149,7 @@ / Is `value` valid for this attribute? / const lcTag = transformCaseFunc(currentNode.nodeName); if (!_isValidAttribute(lcTag, lcName, value)) { + _removeAttribute(name, currentNode); continue; } / Handle attributes that require Trusted Types / @@ -1126,19 +1170,23 @@ } } / Handle invalid data-* attribute set by try-catching it / - try { - if (namespaceURI) { - currentNode.setAttributeNS(namespaceURI, name, value); - } else { - / Fallback to setAttribute() for browser-unrecognized namespaces e.g. "x-schema". / - currentNode.setAttribute(name, value); - } - if (_isClobbered(currentNode)) { - _forceRemove(currentNode); - } else { - arrayPop(DOMPurify.removed); + if (value !== initValue) { + try { + if (namespaceURI) { + currentNode.setAttributeNS(namespaceURI, name, value); + } else { + / Fallback to setAttribute() for browser-unrecognized namespaces e.g. "x-schema". / + currentNode.setAttribute(name, value); + } + if (_isClobbered(currentNode)) { + _forceRemove(currentNode); + } else { + arrayPop(DOMPurify.removed); + } + } catch (_) { + _removeAttribute(name, currentNode); } - } catch (_) {} + } } / Execute a hook if present / _executeHooks(hooks.afterSanitizeAttributes, currentNode, null); @@ -1346,39 +1394,6 @@ })); -/ - // JavaScript for Able Player - - // HTML5 Media API: - // http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement - // http://dev.w3.org/html5/spec-author-view/video.html - - // W3C API Test Page: - // http://www.w3.org/2010/05/video/mediaevents.html - - // YouTube Player API for iframe Embeds - https://developers.google.com/youtube/iframe_api_reference - - // YouTube Player Parameters - https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 - - // YouTube Data API - https://developers.google.com/youtube/v3 - - // Vimeo Player API - https://github.com/vimeo/player.js - - // Google API Client Library for JavaScript - https://developers.google.com/api-client-library/javascript/dev/dev_jscript - - // Google API Explorer: YouTube services and methods - https://developers.google.com/apis-explorer/#s/youtube/v3/ - - // Web Speech API (Speech Synthesis) - // https://w3c.github.io/speech-api/#tts-section - // https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis -/ - /jslint node: true, browser: true, white: true, indent: 2, unparam: true, plusplus: true / /global $, jQuery / "use strict"; @@ -1388,7 +1403,6 @@ var AblePlayerInstances = []; (function ($) { $(function () { - $('video, audio').each(function (index, element) { if ($(element).data('able-player') !== undefined) { AblePlayerInstances.push(new AblePlayer($(this),$(element))); @@ -1409,12 +1423,13 @@ var AblePlayerInstances = []; } }); - // Construct an AblePlayer object - // Parameters are: - // media - jQuery selector or element identifying the media. + /* + * Construct the AblePlayer object. + * + * @param object media jQuery selector or element identifying the media. + / window.AblePlayer = function(media) { - var thisObj = this; // Keep track of the last player created for use with global events. @@ -1426,80 +1441,49 @@ var AblePlayerInstances = []; return; } - /////////////////////////////// - // // Default variables assignment - // - /////////////////////////////// - // The following variables CAN be overridden with HTML attributes // autoplay (Boolean; if present always resolves to true, regardless of value) if ($(media).attr('autoplay') !== undefined) { - this.autoplay = true; // this value remains constant + this.autoplay = true; // this value remains constant this.okToPlay = true; // this value can change dynamically - } - else { + } else { this.autoplay = false; this.okToPlay = false; } - + // loop (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('loop') !== undefined) { - this.loop = true; - } - else { - this.loop = false; - } + this.loop = ($(media).attr('loop') !== undefined) ? true : false; // playsinline (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('playsinline') !== undefined) { - this.playsInline = '1'; // this value gets passed to YT.Player contructor in youtube.js - } - else { - this.playsInline = '0'; - } + this.playsInline = ($(media).attr('playsinline') !== undefined) ? '1' : '0'; // poster (Boolean, indicating whether media element has a poster attribute) - if ($(media).attr('poster')) { - this.hasPoster = true; - } - else { - this.hasPoster = false; - } + this.hasPoster = ( $(media).attr('poster') \|\| $(media).data('poster') ) ? true : false; - // get height and width attributes, if present - // and add them to variables - // Not currently used, but might be useful for resizing player - if ($(media).attr('width')) { - this.width = $(media).attr('width'); - } - if ($(media).attr('height')) { - this.height = $(media).attr('height'); - } + this.audioPoster = $(media).data('poster'); + this.audioPosterAlt = $(media).data('poster-alt' ); + + // get height and width attributes, if present + // and add them to variables + // Not currently used, but might be useful for resizing player + this.width = $(media).attr('width') ?? 0; + this.height = $(media).attr('height') ?? 0; // start-time - if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) { - this.startTime = $(media).data('start-time'); - } - else { - this.startTime = 0; - } + var startTime = $(media).data('start-time'); + var isNumeric = ( typeof startTime === 'number' \|\| ( typeof startTime === 'string' && value.trim() !== '' && ! isNaN(value) && isFinite( Number(value) ) ) ) ? true : false; + this.startTime = ( startTime !== undefined && isNumeric ) ? startTime : 0; // debug - if ($(media).data('debug') !== undefined && $(media).data('debug') !== false) { - this.debug = true; - } - else { - this.debug = false; - } + this.debug = ($(media).data('debug') !== undefined && $(media).data('debug') !== false) ? true : false; // Path to root directory of Able Player code if ($(media).data('root-path') !== undefined) { // add a trailing slash if there is none this.rootPath = $(media).data('root-path').replace(/\/?$/, '/'); - } - else { + } else { this.rootPath = this.getRootPath(); } @@ -1521,68 +1505,49 @@ var AblePlayerInstances = []; if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) { this.useChaptersButton = false; - } - else { + } else { this.useChaptersButton = true; } - - // Control whether text descriptions are read aloud + + // Control whether text descriptions are read aloud // set to "false" if the sole purpose of the WebVTT descriptions file // is to integrate text description into the transcript - // set to "true" to write description text to a div - // This variable does not* control the method by which description is read. - // For that, see below (this.descMethod) + // set to "true" to write description text to a div + // This variable does not control the method by which description is read. + // For that, see below (this.descMethod) if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) { this.readDescriptionsAloud = false; - } - else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { + } else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { // support both singular and plural spelling of attribute this.readDescriptionsAloud = false; - } - else { + } else { this.readDescriptionsAloud = true; } - // Method by which text descriptions are read - // valid values of data-desc-reader are: - // 'brower' (default) - text-based audio description is handled by the browser, if supported - // 'screenreader' - text-based audio description is always handled by screen readers - // The latter may be preferable by owners of websites in languages that are not well supported - // by the Web Speech API - if ($(media).data('desc-reader') == 'screenreader') { - this.descReader = 'screenreader'; - } - else { - this.descReader = 'browser'; - } - - // Default state of captions and descriptions - // This setting is overridden by user preferences, if they exist - // values for data-state-captions and data-state-descriptions are 'on' or 'off' - if ($(media).data('state-captions') == 'off') { - this.defaultStateCaptions = 0; // off - } - else { - this.defaultStateCaptions = 1; // on by default - } - if ($(media).data('state-descriptions') == 'on') { - this.defaultStateDescriptions = 1; // on - } - else { - this.defaultStateDescriptions = 0; // off by default - } + // setting initial this.descVoices to an empty array + // to be populated later by getBrowserVoices + this.descVoices = []; - // Default setting for prefDescPause - // Extended description (i.e., pausing during description) is on by default - // but this settings give website owners control over that - // since they know the nature of their videos, and whether pausing is necessary - // This setting is overridden by user preferences, if they exist - if ($(media).data('desc-pause-default') == 'off') { - this.defaultDescPause = 0; // off - } - else { - this.defaultDescPause = 1; // on by default - } + // Method by which text descriptions are read + // valid values of data-desc-reader are: + // 'brower' (default) - text-based audio description is handled by the browser, if supported + // 'screenreader' - text-based audio description is always handled by screen readers + // The latter may be preferable by owners of websites in languages that are not well supported + // by the Web Speech API + this.descReader = ($(media).data('desc-reader') == 'screenreader') ? 'screenreader' : 'browser'; + + // Default state of captions and descriptions + // This setting is overridden by user preferences, if they exist + // values for data-state-captions and data-state-descriptions are 'on' or 'off' + this.defaultStateCaptions = ($(media).data('state-captions') == 'off') ? 0 : 1; + this.defaultStateDescriptions = ($(media).data('state-descriptions') == 'on') ? 1 : 0; + + // Default setting for prefDescPause + // Extended description (i.e., pausing during description) is on by default + // but this settings give website owners control over that + // since they know the nature of their videos, and whether pausing is necessary + // This setting is overridden by user preferences, if they exist + this.defaultDescPause = ($(media).data('desc-pause-default') == 'off') ? 0 : 1; // Headings // By default, an off-screen heading is automatically added to the top of the media player @@ -1601,75 +1566,60 @@ var AblePlayerInstances = []; // There are three types of interactive transcripts. // In descending of order of precedence (in case there are conflicting tags), they are: // 1. "manual" - A manually coded external transcript (requires data-transcript-src) - // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div) + // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div & a valid target element) // 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button // If data-include-transcript="false", there is no "popup" transcript - - if ($(media).data('transcript-div') !== undefined && $(media).data('transcript-div') !== "") { - this.transcriptDivLocation = $(media).data('transcript-div'); - } - else { + var transcriptDivLocation = $(media).data('transcript-div'); + if ( transcriptDivLocation !== undefined && transcriptDivLocation !== "" && null !== document.getElementById( transcriptDivLocation ) ) { + this.transcriptDivLocation = transcriptDivLocation; + } else { this.transcriptDivLocation = null; } - if ($(media).data('include-transcript') !== undefined && $(media).data('include-transcript') === false) { - this.hideTranscriptButton = true; - } - else { - this.hideTranscriptButton = null; - } + var includeTranscript = $(media).data('include-transcript'); + this.hideTranscriptButton = ( includeTranscript !== undefined && includeTranscript === false) ? true : false; this.transcriptType = null; if ($(media).data('transcript-src') !== undefined) { this.transcriptSrc = $(media).data('transcript-src'); if (this.transcriptSrcHasRequiredParts()) { this.transcriptType = 'manual'; - } - else { + } else { console.log('ERROR: Able Player transcript is missing required parts'); } - } - else if ($(media).find('track[kind="captions"], track[kind="subtitles"]').length > 0) { + } else if ($(media).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length > 0) { // required tracks are present. COULD automatically generate a transcript - if (this.transcriptDivLocation) { - this.transcriptType = 'external'; - } - else { - this.transcriptType = 'popup'; - } + this.transcriptType = (this.transcriptDivLocation) ? 'external' : 'popup'; } // In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript - // If false (default), line breaks are are removed from transcripts in order to provide a more seamless reading experience + // If false (default), line breaks are are removed from transcripts for a more seamless reading experience // If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem - if ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) { - this.lyricsMode = true; - } - else { - this.lyricsMode = false; - } + this.lyricsMode = ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) ? true : false; - // Transcript Title + // Set Transcript Title if defined explicitly. See transcript.js. if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") { this.transcriptTitle = $(media).data('transcript-title'); } - else { - // do nothing. The default title will be defined later (see transcript.js) + + // Sign Language + // sign language can be a modal (default) or assigned to a div on the page. + var signDivLocation = $(media).data('sign-div'); + if ( signDivLocation !== undefined && signDivLocation !== "" && null !== document.getElementById( signDivLocation ) ) { + this.$signDivLocation = $( '#' + signDivLocation ); + } else { + this.$signDivLocation = null; } // Captions // data-captions-position can be used to set the default captions position // this is only the default, and can be overridden by user preferences // valid values of data-captions-position are 'below' and 'overlay' - if ($(media).data('captions-position') === 'overlay') { - this.defaultCaptionsPosition = 'overlay'; - } - else { // the default, even if not specified - this.defaultCaptionsPosition = 'below'; - } + this.defaultCaptionsPosition = ($(media).data('captions-position') === 'overlay') ? 'overlay' : 'below'; // Chapters - if ($(media).data('chapters-div') !== undefined && $(media).data('chapters-div') !== "") { - this.chaptersDivLocation = $(media).data('chapters-div'); + var chaptersDiv = $(media).data('chapters-div'); + if ( chaptersDiv !== undefined && chaptersDiv !== "") { + this.chaptersDivLocation = chaptersDiv; } if ($(media).data('chapters-title') !== undefined) { @@ -1677,83 +1627,76 @@ var AblePlayerInstances = []; this.chaptersTitle = $(media).data('chapters-title'); } - if ($(media).data('chapters-default') !== undefined && $(media).data('chapters-default') !== "") { - this.defaultChapter = $(media).data('chapters-default'); - } - else { - this.defaultChapter = null; - } + var defaultChapter = $(media).data('chapters-default'); + this.defaultChapter = ( defaultChapter !== undefined && defaultChapter !== "") ? defaultChapter : null; // Slower/Faster buttons // valid values of data-speed-icons are 'animals' (default) and 'arrows' // 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows - if ($(media).data('speed-icons') === 'arrows') { - this.speedIcons = 'arrows'; - } - else { - this.speedIcons = 'animals'; - } + this.speedIcons = ($(media).data('speed-icons') === 'arrows') ? 'arrows' : 'animals'; // Seekbar // valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters' - if ($(media).data('seekbar-scope') === 'chapter' \|\| $(media).data('seekbar-scope') === 'chapters') { - this.seekbarScope = 'chapter'; - } - else { - this.seekbarScope = 'video'; - } + var seekbarScope = $(media).data('seekbar-scope'); + this.seekbarScope = ( seekbarScope === 'chapter' \|\| seekbarScope === 'chapters') ? 'chapter' : 'video'; // YouTube - if ($(media).data('youtube-id') !== undefined && $(media).data('youtube-id') !== "") { - this.youTubeId = this.getYouTubeId($(media).data('youtube-id')); + var youTubeId = $(media).data('youtube-id'); + if ( youTubeId !== undefined && youTubeId !== "") { + this.youTubeId = this.getYouTubeId(youTubeId); + if ( ! this.hasPoster ) { + let poster = this.getYouTubePosterUrl(this.youTubeId,'640'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('youtube-desc-id') !== undefined && $(media).data('youtube-desc-id') !== "") { - this.youTubeDescId = this.getYouTubeId($(media).data('youtube-desc-id')); + var youTubeDescId = $(media).data('youtube-desc-id'); + if ( youTubeDescId !== undefined && youTubeDescId !== "") { + this.youTubeDescId = this.getYouTubeId(youTubeDescId); } - if ($(media).data('youtube-nocookie') !== undefined && $(media).data('youtube-nocookie')) { - this.youTubeNoCookie = true; - } - else { - this.youTubeNoCookie = false; + var youTubeSignId = $(media).data('youtube-sign-src'); + if ( youTubeSignId !== undefined && youTubeSignId !== "") { + this.youTubeSignId = this.getYouTubeId(youTubeSignId); } + var youTubeNoCookie = $(media).data('youtube-nocookie'); + this.youTubeNoCookie = (youTubeNoCookie !== undefined && youTubeNoCookie) ? true : false; + // Vimeo - if ($(media).data('vimeo-id') !== undefined && $(media).data('vimeo-id') !== "") { - this.vimeoId = this.getVimeoId($(media).data('vimeo-id')); + var vimeoId = $(media).data('vimeo-id'); + if ( vimeoId !== undefined && vimeoId !== "") { + this.vimeoId = this.getVimeoId(vimeoId); + if ( ! this.hasPoster ) { + let poster = thisObj.getVimeoPosterUrl(this.vimeoId,'1200'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('vimeo-desc-id') !== undefined && $(media).data('vimeo-desc-id') !== "") { - this.vimeoDescId = this.getVimeoId($(media).data('vimeo-desc-id')); + var vimeoDescId = $(media).data('vimeo-desc-id'); + if ( vimeoDescId !== undefined && vimeoDescId !== "") { + this.vimeoDescId = this.getVimeoId(vimeoDescId); } // Skin // valid values of data-skin are: - // 'legacy' (default), two rows of controls; seekbar positioned in available space within top row - // '2020', all buttons in one row beneath a full-width seekbar - if ($(media).data('skin') == '2020') { - this.skin = '2020'; - } - else { - this.skin = 'legacy'; - } + // '2020' (default as of 4.6), all buttons in one row beneath a full-width seekbar + // 'legacy', two rows of controls; seekbar positioned in available space within top row + this.skin = ($(media).data('skin') == 'legacy') ? 'legacy' : '2020'; - // Size - // width of Able Player is determined using the following order of precedence: - // 1. data-width attribute + // Size + // width of Able Player is determined using the following order of precedence: + // 1. data-width attribute // 2. width attribute (for video or audio, although it is not valid HTML for audio) // 3. Intrinsic size from video (video only, determined later) if ($(media).data('width') !== undefined) { this.playerWidth = parseInt($(media).data('width')); - } - else if ($(media)[0].getAttribute('width')) { - // NOTE: jQuery attr() returns null for all invalid HTML attributes + } else if ($(media)[0].getAttribute('width')) { + // NOTE: jQuery attr() returns null for all invalid HTML attributes // (e.g., width on <audio>) - // but it can be acessed via JavaScript getAttribute() + // but it can be acessed via JavaScript getAttribute() this.playerWidth = parseInt($(media)[0].getAttribute('width')); - } - else { - this.playerWidth = null; + } else { + this.playerWidth = null; } // Icon type @@ -1765,21 +1708,18 @@ var AblePlayerInstances = []; this.forceIconType = false; if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") { var iconType = $(media).data('icon-type'); - if (iconType === 'font' \|\| iconType == 'image' \|\| iconType == 'svg') { + if (iconType === 'font' \|\| iconType === 'image' \|\| iconType === 'svg') { this.iconType = iconType; this.forceIconType = true; } } - if ($(media).data('allow-fullscreen') !== undefined && $(media).data('allow-fullscreen') === false) { - this.allowFullscreen = false; - } - else { - this.allowFullscreen = true; - } - // Define other variables that are used in fullscreen program flow - this.clickedFullscreenButton = false; - this.restoringAfterFullscreen = false; + var allowFullScreen = $(media).data('allow-fullscreen'); + this.allowFullscreen = (allowFullScreen !== undefined && allowFullScreen === false) ? false : true; + + // Define other variables that are used in fullscreen program flow + this.clickedFullscreenButton = false; + this.restoringAfterFullscreen = false; // Seek interval // Number of seconds to seek forward or back with Rewind & Forward buttons @@ -1798,35 +1738,26 @@ var AblePlayerInstances = []; // Now Playing // Shows "Now Playing:" plus the title of the current track above player // Only used if there is a playlist - if ($(media).data('show-now-playing') !== undefined && $(media).data('show-now-playing') === false) { - this.showNowPlaying = false; - } - else { - this.showNowPlaying = true; - } + var showNowPlaying = $(media).data('show-now-playing'); + this.showNowPlaying = (showNowPlaying !== undefined && showNowPlaying === false) ? false : true; // TTML support (experimental); enabled for testing with data-use-ttml (Boolean) if ($(media).data('use-ttml') !== undefined) { this.useTtml = true; // The following may result in a console error. this.convert = require('xml-js'); - } - else { + } else { this.useTtml = false; } // Fallback // The data-test-fallback attribute can be used to test the fallback solution in any browser - if ($(media).data('test-fallback') !== undefined && $(media).data('test-fallback') !== false) { - if ($(media).data('test-fallback') == '2') { - this.testFallback = 2; // emulate browser that doesn't support HTML5 media - } - else { - this.testFallback = 1; // emulate failure to load Able Player - } - } - else { - this.testFallback = false; + var testFallback = $(media).data('test-fallback'); + if ( testFallback !== undefined && testFallback !== false) { + // 1: build error; 2: browser doesn't support media. + this.testFallback = ( testFallback == '2' ) ? 2 : 1; + } else { + this.testFallback = false; } // Language @@ -1835,54 +1766,39 @@ var AblePlayerInstances = []; // 2. Lang attribute on <html> or <body>, if a matching translation file is available // 3. English // Final calculation occurs in translation.js > getTranslationText() - if ($(media).data('lang') !== undefined && $(media).data('lang') !== "") { - this.lang = $(media).data('lang').toLowerCase(); - } - else { - this.lang = null; - } + var lang = $(media).data('lang'); + this.lang = ( lang !== undefined && lang !== "") ? lang.toLowerCase() : null; // Metadata Tracks - if ($(media).data('meta-type') !== undefined && $(media).data('meta-type') !== "") { - this.metaType = $(media).data('meta-type'); + var metaType = $(media).data('meta-type'); + if ( metaType !== undefined && metaType !== "") { + this.metaType = metaType; } - - if ($(media).data('meta-div') !== undefined && $(media).data('meta-div') !== "") { - this.metaDiv = $(media).data('meta-div'); + var metaDiv = $(media).data('meta-div'); + if ( metaDiv !== undefined && metaDiv !== "") { + this.metaDiv = metaDiv; } // Search // conducting a search requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { + var searchDiv = $(media).data('search-div'); + if ( searchDiv !== undefined && searchDiv !== "") { - this.searchDiv = $(media).data('search-div'); + this.searchDiv = searchDiv; // Search term (optional; could be assigned later in a JavaScript application) - if ($(media).data('search') !== undefined && $(media).data('search') !== "") { - this.searchString = $(media).data('search'); + var searchString = $(media).data('search'); + if ( searchString !== undefined && searchString !== "") { + this.searchString = searchString; } // Search Language - if ($(media).data('search-lang') !== undefined && $(media).data('search-lang') !== "") { - this.searchLang = $(media).data('search-lang'); - } - else { - this.searchLang = null; // will change to final value of this.lang in translation.js > getTranslationText() - } + var searchLang = $(media).data('search-lang'); + this.searchLang = ( searchLang !== undefined && searchLang !== "") ? searchLang : null; // Search option: Ignore capitalization in search terms - if ($(media).data('search-ignore-caps') !== undefined && $(media).data('search-ignore-caps') !== false) { - this.searchIgnoreCaps = true; - } - else { - this.searchIgnoreCaps = false; - } - - // conducting a search currently requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - this.searchString = $(media).data('search'); - this.searchDiv = $(media).data('search-div'); - } + var searchIgnoreCaps = $(media).data('search-ignore-caps'); + this.searchIgnoreCaps = ( searchIgnoreCaps !== undefined && searchIgnoreCaps !== false) ? true : false; } // Hide controls when video starts playing @@ -1891,8 +1807,7 @@ var AblePlayerInstances = []; if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) { this.hideControls = true; this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode - } - else { + } else { this.hideControls = false; this.hideControlsOriginal = false; } @@ -1911,13 +1826,11 @@ var AblePlayerInstances = []; this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoMode = false; this.stenoFrameId = null; this.$stenoFrame = null; @@ -1927,9 +1840,7 @@ var AblePlayerInstances = []; this.setDefaults(); //////////////////////////////////////// - // // End assignment of default variables - // //////////////////////////////////////// this.ableIndex = AblePlayer.nextIndex; @@ -1941,21 +1852,15 @@ var AblePlayerInstances = []; // use defer method to defer additional processing until text is retrieved this.tt = {}; var thisObj = this; - $.when(this.getTranslationText()).then( - function () { - if (thisObj.countProperties(thisObj.tt) > 50) { - // close enough to ensure that most text variables are populated - thisObj.setup(); - } - else { - // can't continue loading player with no text - thisObj.provideFallback(); - } + async function fetchTranslations(thisObj) { + try { + await thisObj.getTranslationText(); + thisObj.setup(); + } catch { + thisObj.provideFallback(); } - ). - fail(function() { - thisObj.provideFallback(); - }); + } + fetchTranslations(thisObj); }; // Index to increment every time new player is created. @@ -1970,17 +1875,15 @@ var AblePlayerInstances = []; if (!thisObj.player) { // No player for this media, show last-line fallback. thisObj.provideFallback(); - } - else { + } else { thisObj.setupInstance().then(function () { thisObj.setupInstancePlaylist(); if (thisObj.hasPlaylist) { // for playlists, recreatePlayer() is called from within cuePlaylistItem() - } - else { - thisObj.recreatePlayer().then(function() { + } else { + thisObj.recreatePlayer().then(function() { thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed + thisObj.playerCreated = true; // remains true until browser is refreshed }); } }); @@ -2000,13 +1903,10 @@ var AblePlayerInstances = []; }; AblePlayer.localGetElementById = function(element, id) { - if (element.getRootNode) - { + if (element.getRootNode) { // Use getRootNode() and querySelector() where supported (for shadow DOM support) return $(element.getRootNode().querySelector('#' + id)); - } - else - { + } else { // If getRootNode is not supported it should be safe to use document.getElementById (since there is no shadow DOM support) return $(document.getElementById(id)); } @@ -2075,8 +1975,7 @@ var AblePlayerInstances = []; $el = $('<div>', { 'class': 'able-controller' }).hide(); - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { $el = $('<div>', { 'class': 'able-window-toolbar' }).hide(); @@ -2091,16 +1990,11 @@ var AblePlayerInstances = []; blue = rgb[2]; luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue); // range is 1 - 255; therefore 125 is the tipping point - if (luminance < 125) { // background is dark - iconColor = 'white'; - } - else { // background is light - iconColor = 'black'; - } + iconColor = (luminance < 125) ? 'white' : 'black'; + if ($elements[i] === 'controller') { this.iconColor = iconColor; - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { this.toolbarIconColor = iconColor; } $el.remove(); @@ -2113,20 +2007,16 @@ var AblePlayerInstances = []; this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/'; this.playButtonImg = this.imgPath + 'play.png'; this.pauseButtonImg = this.imgPath + 'pause.png'; - this.restartButtonImg = this.imgPath + 'restart.png'; - this.rewindButtonImg = this.imgPath + 'rewind.png'; this.forwardButtonImg = this.imgPath + 'forward.png'; - this.previousButtonImg = this.imgPath + 'previous.png'; this.nextButtonImg = this.imgPath + 'next.png'; if (this.speedIcons === 'arrows') { this.fasterButtonImg = this.imgPath + 'slower.png'; this.slowerButtonImg = this.imgPath + 'faster.png'; - } - else if (this.speedIcons === 'animals') { + } else if (this.speedIcons === 'animals') { this.fasterButtonImg = this.imgPath + 'rabbit.png'; this.slowerButtonImg = this.imgPath + 'turtle.png'; } @@ -2136,19 +2026,19 @@ var AblePlayerInstances = []; this.signButtonImg = this.imgPath + 'sign.png'; this.transcriptButtonImg = this.imgPath + 'transcript.png'; this.descriptionsButtonImg = this.imgPath + 'descriptions.png'; - this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png'; this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png'; - this.prefsButtonImg = this.imgPath + 'preferences.png'; this.helpButtonImg = this.imgPath + 'help.png'; }; - AblePlayer.prototype.getSvgData = function(button) { + AblePlayer.prototype.getIconData = function(button) { // returns array of values for creating <svg> tag for specified button // 0 = <svg> viewBox attribute // 1 = <path> d (description) attribute + // 2 = icon class for font icons + // 3 = img URL for images. var svg = Array(); switch (button) { @@ -2156,142 +2046,184 @@ var AblePlayerInstances = []; case 'play': svg[0] = '0 0 16 20'; svg[1] = 'M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z'; + svg[2] = 'icon-play'; + svg[3] = this.playButtonImg; break; case 'pause': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'stop': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-pause'; + svg[3] = this.pauseButtonImg; break; case 'restart': svg[0] = '0 0 20 20'; svg[1] = 'M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z'; + svg[2] = 'icon-restart'; + svg[3] = this.restartButtonImg; break; case 'rewind': svg[0] = '0 0 20 20'; svg[1] = 'M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z'; + svg[2] = 'icon-rewind'; + svg[3] = this.rewindButtonImg; break; case 'forward': svg[0] = '0 0 20 20'; svg[1] = 'M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z'; + svg[2] = 'icon-forward'; + svg[3] = this.forwardButtonImg; break; case 'previous': svg[0] = '0 0 20 20'; svg[1] = 'M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z'; + svg[2] = 'icon-previous'; + svg[3] = this.previousButtonImg; break; case 'next': svg[0] = '0 0 20 20'; svg[1] = 'M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z'; + svg[2] = 'icon-next'; + svg[3] = this.nextButtonImg; break; case 'slower': - svg[0] = '0 0 20 20'; + svg[0] = '0 0 11 20'; svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z'; + svg[2] = 'icon-slower'; + svg[3] = this.slowerButtonImg; break; case 'faster': svg[0] = '0 0 11 20'; svg[1] = 'M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-faster'; + svg[3] = this.fasterButtonImg; break; case 'turtle': svg[0] = '0 0 20 20'; svg[1] = 'M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z'; + svg[2] = 'icon-turtle'; + svg[3] = this.slowerButtonImg; break; case 'rabbit': svg[0] = '0 0 20 20'; svg[1] = 'M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z'; + svg[2] = 'icon-rabbit'; + svg[3] = this.fasterButtonImg; break; case 'ellipsis': svg[0] = '0 0 20 20'; svg[1] = 'M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z'; + svg[2] = 'icon-ellipsis'; + svg[3] = false; break; case 'pipe': svg[0] = '0 0 20 20'; svg[1] = 'M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z'; + svg[2] = 'icon-pipe'; + svg[3] = false; break; case 'captions': svg[0] = '0 0 20 20'; svg[1] = 'M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z'; + svg[2] = 'icon-captions'; + svg[3] = this.captionsButtonImg; break; case 'descriptions': svg[0] = '0 0 20 20'; svg[1] = 'M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z'; + svg[2] = 'icon-descriptions'; + svg[3] = this.descriptionsButtonImg; break; case 'sign': svg[0] = '0 0 20 20'; svg[1] = 'M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z'; + svg[2] = 'icon-sign'; + svg[3] = this.signButtonImg; break; case 'mute': case 'volume-mute': svg[0] = '0 0 20 20'; svg[1] = 'M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z'; + svg[2] = 'icon-volume-mute'; + svg[3] = this.imgPath + 'volume-mute.png'; break; case 'volume-soft': svg[0] = '0 0 20 20'; svg[1] = 'M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-soft'; + svg[3] = this.imgPath + 'volume-soft.png'; break; case 'volume-medium': svg[0] = '0 0 20 20'; svg[1] = 'M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-medium'; + svg[3] = this.imgPath + 'volume-medium.png'; break; case 'volume-loud': svg[0] = '0 0 21 20'; svg[1] = 'M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-loud'; + svg[3] = this.imgPath + 'volume-loud.png'; break; case 'chapters': svg[0] = '0 0 20 20'; svg[1] = 'M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z'; + svg[2] = 'icon-chapters'; + svg[3] = this.chaptersButtonImg; break; case 'transcript': svg[0] = '0 0 20 20'; svg[1] = 'M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z'; + svg[2] = 'icon-transcript'; + svg[3] = this.transcriptButtonImg; break; case 'preferences': svg[0] = '0 0 20 20'; svg[1] = 'M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z'; + svg[2] = 'icon-preferences'; + svg[3] = this.prefsButtonImg; break; case 'close': svg[0] = '0 0 16 20'; svg[1] = 'M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z'; + svg[2] = 'icon-close'; + svg[3] = null; break; case 'fullscreen-expand': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z'; + svg[2] = 'icon-fullscreen-expand'; + svg[3] = this.fullscreenExpandButtonImg; break; case 'fullscreen-collapse': svg[0] = '0 0 20 20'; svg[1] = 'M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'help': - svg[0] = '0 0 11 20'; - svg[1] = 'M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z'; + svg[2] = 'icon-fullscreen-collapse'; + svg[3] = this.fullscreenCollapseButtonImg; break; } @@ -2299,26 +2231,20 @@ var AblePlayerInstances = []; }; // Initialize player based on data on page. - // This sets some variables, but does not modify anything. Safe to call multiple times. + // This sets some variables, but does not modify anything. Safe to call multiple times. // Can call again after updating this.media so long as new media element has the same ID. AblePlayer.prototype.reinitialize = function () { - var deferred, promise, thisObj, errorMsg, srcFile; + var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - // if F12 Developer Tools aren't open in IE (through 9, no longer a problen in IE10) - // console.log causes an error - can't use debug without a console to log messages to - if (! window.console) { - this.debug = false; - } - this.startedPlaying = false; - // TODO: Move this setting to cookie. + // TODO: Move this setting to preferences. this.autoScrollTranscript = true; - //this.autoScrollTranscript = this.getCookie(autoScrollTranscript); // (doesn't work) + //this.autoScrollTranscript = this.getPref(autoScrollTranscript); // (doesn't work) // Bootstrap from this.media possibly being an ID or other selector. this.$media = $(this.media).first(); @@ -2327,14 +2253,12 @@ var AblePlayerInstances = []; // Set media type to 'audio' or 'video'; this determines some of the behavior of player creation. if (this.$media.is('audio')) { this.mediaType = 'audio'; - } - else if (this.$media.is('video')) { + } else if (this.$media.is('video')) { this.mediaType = 'video'; - } - else { + } else { // Able Player was initialized with some element other than <video> or <audio> this.provideFallback(); - deferred.fail(); + deferred.reject(); return promise; } @@ -2353,107 +2277,36 @@ var AblePlayerInstances = []; AblePlayer.prototype.setPlayerSize = function(width, height) { - var mediaId = this.$media.attr('id'); - - // Called again after width and height are known - - if (this.mediaType === 'audio') { - if (this.playerWidth) { - this.$ableWrapper.css('width',this.playerWidth + 'px'); - } - } - else if (width > 0 && height > 0) { - this.playerWidth = width; - this.playerHeight = height; - this.aspectRatio = height / width; + // Called again after width and height are known + if (this.mediaType !== 'audio' && width > 0 && height > 0) { + this.playerWidth = width; + this.playerHeight = height; + this.aspectRatio = height / width; } }; AblePlayer.prototype.setIconType = function() { - // returns either "svg", "font" or "image" (in descending order of preference) - // Test for support of each type. If not supported, test the next type. - // last resort is image icons - - var $tempButton, $testButton, controllerFont; - + // Tests for SVG and font support removed in version 4.7.0. + // Browser support for these is no longer a risk; they are widely supported in all browsers. + // This now only returns 'svg' or 'false' if iconType is forced. if (this.forceIconType) { // use value specified in data-icon-type return false; } - // test for SVG support - // Test this method widely; failed as expected on IE8 and below - // https://stackoverflow.com/a/27568129/744281 - if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) { - // browser supports SVG - this.iconType = 'svg'; - } - else { - // browser does NOT support SVG - // test whether browser can support icon fonts, and whether user has overriding the default style sheet - // which could cause problems with proper display of the icon fonts - if (window.getComputedStyle) { - - // webkit doesn't return calculated styles unless element has been added to the DOM - // and is visible (note: visibly clipped is considered "visible") - // use playpauseButton for font-family test if it exists; otherwise must create a new temp button - if ($('span.icon-play').length) { - $testButton = $('span.icon-play'); - } - else { - $tempButton = $('<span>',{ - 'class': 'icon-play able-clipped' - }); - $('body').append($tempButton); - $testButton = $tempButton; - } - - // the following retrieves the computed value of font-family - // tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works! - // tested in Chrome 49.x with Font Changer plugin - works! - // tested in IE with user-defined style sheet enables - works! - // It does NOT account for users who have "ignore font styles on web pages" checked in IE - // There is no known way to check for that ??? - controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family'); - if (typeof controllerFont !== 'undefined') { - if (controllerFont.indexOf('able') !== -1) { - this.iconType = 'font'; - } - else { - this.iconType = 'image'; - } - } - else { - // couldn't get computed font-family; use images to be safe - this.iconType = 'image'; - } - } - else { - // window.getComputedStyle is not supported (IE 8 and earlier) - // No known way to detect computed font - // The following retrieves the value from the style sheet, not the computed font - // controllerFont = $tempButton.get(0).currentStyle.fontFamily; - // It will therefore return "able", even if the user is overriding that with a custom style sheet - // To be safe, use images - this.iconType = 'image'; - } - if (typeof $tempButton !== 'undefined') { - $tempButton.remove(); - } - } + this.iconType = 'svg'; }; // Perform one-time setup for this instance of player; called after player is first initialized. AblePlayer.prototype.setupInstance = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); if (this.$media.attr('id')) { this.mediaId = this.$media.attr('id'); - } - else { + } else { // Ensure the base media element always has an ID. this.mediaId = "ableMediaId_" + this.ableIndex; this.$media.attr('id', this.mediaId); @@ -2481,7 +2334,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from YouTube var $youTubeVideos = $(this).find('li[data-youtube-id]'); $youTubeVideos.each(function() { - var youTubeId = $(this).attr('data-youtube-id'); + var youTubeId = DOMPurify.sanitize( $(this).attr('data-youtube-id') ); var youTubePoster = thisObj.getYouTubePosterUrl(youTubeId,'120'); var $youTubeImg = $('<img>',{ 'src': youTubePoster, @@ -2494,7 +2347,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from Vimeo var $vimeoVideos = $(this).find('li[data-vimeo-id]'); $vimeoVideos.each(function() { - var vimeoId = $(this).attr('data-youtube-id'); + var vimeoId = $(this).attr('data-vimeo-id'); var vimeoPoster = thisObj.getVimeoPosterUrl(vimeoId,'120'); var $vimeoImg = $('<img>',{ 'src': vimeoPoster, @@ -2507,13 +2360,8 @@ var AblePlayerInstances = []; $(this).find('li span').attr('aria-hidden','true'); thisObj.playlistIndex = 0; var dataEmbedded = $(this).data('embedded'); - if (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) { - // embed playlist within player - thisObj.playlistEmbed = true; - } - else { - thisObj.playlistEmbed = false; - } + // is playlist embedded within player? + thisObj.playlistEmbed = (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) ? true : false; } }); @@ -2540,12 +2388,12 @@ var AblePlayerInstances = []; AblePlayer.prototype.recreatePlayer = function () { // Creates the appropriate player for the current source. - // This function is called each time a new media instance is loaded - // e.g., - // User clicks on an item in a playlist - // User swaps to/from described version of video - // Blocks of code that only need to be executed once are controlled - // by this.playerCreated + // This function is called each time a new media instance is loaded + // e.g., + // User clicks on an item in a playlist + // User swaps to/from described version of video + // Blocks of code that only need to be executed once are controlled + // by this.playerCreated // TODO: Ensure when recreating player that we carry over the mediaId if (!this.player) { @@ -2555,38 +2403,37 @@ var AblePlayerInstances = []; var deferred, promise, thisObj, prefsGroups, i; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - this.playerDeleted = false; // reset after deletePlayer() + this.playerDeleted = false; // reset after deletePlayer() // set temp stopgap to prevent this function from executing again before finished - this.recreatingPlayer = true; + this.recreatingPlayer = true; if (!this.playerCreated) { // only call these functions once this.loadCurrentPreferences(); this.injectPlayerCode(); - this.resizePlayer(this.media.videoWidth,this.media.videoHeight); + this.resizePlayer(this.media.videoWidth,this.media.videoHeight); } - this.getSampleDescriptionText(); + this.getSampleDescriptionText(); this.initSignLanguage(); this.initPlayer().then(function() { - thisObj.getTracks().then(function() { + thisObj.getTracks().then(function() { thisObj.initDescription().then(function() { thisObj.setupTracks().then(function() { - if (thisObj.hasClosedDesc) { - if (!thisObj.$descDiv \|\| - (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { - // descDiv either doesn't exist, or exists in an orphaned state - // Either way, it needs to be rebuilt... + if (thisObj.hasClosedDesc) { + if (!thisObj.$descDiv \|\| (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { + // descDiv either doesn't exist, or exists in an orphaned state + // Either way, it needs to be rebuilt... thisObj.injectTextDescriptionArea(); } } @@ -2603,7 +2450,6 @@ var AblePlayerInstances = []; thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - thisObj.setFullscreen(false); if (typeof thisObj.volume === 'undefined') { thisObj.volume = thisObj.defaultVolume; @@ -2636,37 +2482,35 @@ var AblePlayerInstances = []; thisObj.setupPopups(); thisObj.updateCaption(); thisObj.injectVTS(); - if (thisObj.chaptersDivLocation) { - thisObj.populateChaptersDiv(); - } + thisObj.populateChaptersDiv(); thisObj.showSearchResults(); // Go ahead and load media, without user requesting it // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth // However, the media needs to load for us to get the media's duration if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.$media[0].load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } } // refreshControls is called twice building/initializing the player // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete setTimeout(function() { - thisObj.refreshControls('init'); - deferred.resolve(); - },100); - }); - }); + thisObj.refreshControls(); + deferred.resolve(); + },100); + }); + }); }); }); - }); + }); }); }, function() { // initPlayer fail thisObj.provideFallback(); }); - return promise; + return promise; }; AblePlayer.prototype.initPlayer = function () { @@ -2676,33 +2520,28 @@ var AblePlayerInstances = []; // First run player specific initialization. if (this.player === 'html5') { playerPromise = this.initHtml5Player(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { playerPromise = this.initYouTubePlayer(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { playerPromise = this.initVimeoPlayer(); } // After player specific initialization is done, run remaining general initialization. - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - playerPromise.done( + playerPromise.then( function () { // done/resolved if (thisObj.useFixedSeekInterval) { + // if fixed seekInterval was not already assigned (using value of data-seek-interval) if (!thisObj.seekInterval) { thisObj.seekInterval = thisObj.defaultSeekInterval; } - else { - // fixed seekInterval was already assigned, using value of data-seek-interval attribute - } thisObj.seekIntervalCalculated = true; - } - else { + } else { thisObj.setSeekInterval(); } deferred.resolve(); } - ).fail(function () { // failed + ).finally(function () { // failed deferred.reject(); } ); @@ -2712,10 +2551,8 @@ var AblePlayerInstances = []; AblePlayer.prototype.initStenoFrame = function() { - var thisObj, deferred, promise, $iframe; - thisObj = this; - - deferred = new $.Deferred(); + var deferred, promise; + deferred = new this.defer(); promise = deferred.promise(); if (this.stenoMode && this.$stenoFrame) { @@ -2723,15 +2560,13 @@ var AblePlayerInstances = []; if (this.$stenoFrame[0].contentWindow,document.readyState == 'complete') { // iframe has already loaded deferred.resolve(); - } - else { + } else { // iframe has not loaded. Wait for it. this.$stenoFrame.on('load',function() { deferred.resolve(); }); } - } - else { + } else { // there is no stenoFrame to initialize deferred.resolve(); } @@ -2746,33 +2581,24 @@ var AblePlayerInstances = []; var thisObj, duration; thisObj = this; this.seekInterval = this.defaultSeekInterval; - if (this.useChapterTimes) { - duration = this.chapterDuration; - } - else { - duration = this.duration; - } + duration = (this.useChapterTimes) ? this.chapterDuration : this.duration; + if (typeof duration === 'undefined' \|\| duration < 1) { // no duration; just use default for now but keep trying until duration is available this.seekIntervalCalculated = false; return; - } - else { + } else { if (duration <= 20) { this.seekInterval = 5; // 4 steps max - } - else if (duration <= 30) { + } else if (duration <= 30) { this.seekInterval = 6; // 5 steps max - } - else if (duration <= 40) { + } else if (duration <= 40) { this.seekInterval = 8; // 5 steps max - } - else if (duration <= 100) { + } else if (duration <= 100) { this.seekInterval = 10; // 10 steps max - } - else { + } else { // never more than 10 steps from start to end - this.seekInterval = (duration / 10); + this.seekInterval = Math.round(duration / 10, 0); } this.seekIntervalCalculated = true; } @@ -2821,38 +2647,38 @@ var AblePlayerInstances = []; // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); - break; - default: - // some other error occurred - console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); - break; - } - }); - } - else { - // disable Vimeo captions. - this.vimeoPlayer.disableTextTrack().then(function() { - // Vimeo captions disabled - }).catch(function(error) { - console.log('Error disabling Vimeo text track: ',error); - }); - } + } + ).catch(function(error) { + switch (error.name) { + case 'InvalidTrackLanguageError': + // no track was available with the specified language + console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); + break; + case 'InvalidTrackError': + // no track was available with the specified language and kind + console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); + break; + default: + // some other error occurred + console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); + break; + } + }); + } else { + // disable Vimeo captions. + this.vimeoPlayer.disableTextTrack().then(function() { + // Vimeo captions disabled + }).catch(function(error) { + console.log('Error disabling Vimeo text track: ',error); + }); } + } } }; AblePlayer.prototype.initHtml5Player = function () { // Nothing special to do! - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); deferred.resolve(); return promise; @@ -2866,6 +2692,7 @@ var AblePlayerInstances = []; // Keep native player from displaying captions/subtitles by setting textTrack.mode='disabled' // https://dev.w3.org/html5/spec-author-view/video.html#text-track-mode // This should work but historically hasn't been supported in all browsers + // As of July 2025, 96% supported per https://caniuse.com/?search=text-track-mode. // Workaround for non-supporting browsers is to remove default attribute // We're doing that too in track.js > setupCaptions() var textTracks = this.$media.get(0).textTracks; @@ -2882,146 +2709,125 @@ var AblePlayerInstances = []; // Determine which player to use, if any // return 'html5', 'youtube', 'vimeo', or null - - var i, sourceType, $newItem; - if (this.testFallback) { - return null; - } - else if (this.youTubeId) { - if (this.mediaType !== 'video') { - // attempting to play a YouTube video using an element other than <video> - return null; - } - else { - return 'youtube'; - } - } - else if (this.vimeoId) { - if (this.mediaType !== 'video') { - // attempting to play a Vimeo video using an element other than <video> - return null; - } - else { - return 'vimeo'; - } - - } - else if (this.media.canPlayType) { + if (this.testFallback) { + return null; + } else if (this.youTubeId) { + // null if attempting to play a YouTube video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'youtube'; + } else if (this.vimeoId) { + // null if attempting to play a Vimeo video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'vimeo'; + } else if (this.media.canPlayType) { return 'html5'; - } - else { + } else { // Browser does not support the available media file return null; } }; - })(jQuery); (function ($) { - AblePlayer.prototype.setCookie = function(cookieValue) { - - Cookies.set('Able-Player', JSON.stringify(cookieValue), { - expires: 90, - sameSite: 'strict' - }); + AblePlayer.prototype.setPrefs = function(preferences) { + if ( typeof Cookies !== 'undefined' ) { + Cookies.set('Able-Player', JSON.stringify(preferences), { + expires: 90, + sameSite: 'strict' + }); + } else { + localStorage.setItem( 'Able-Player', JSON.stringify( preferences ) ); + } }; - AblePlayer.prototype.getCookie = function() { + AblePlayer.prototype.getPref = function() { - var defaultCookie = { + var defaultPrefs = { preferences: {}, sign: {}, transcript: {}, voices: [] }; - var cookie; + var preferences; try { - cookie = JSON.parse(Cookies.get('Able-Player')); + if ( typeof Cookies !== 'undefined' ) { + preferences = JSON.parse( Cookies.get('Able-Player') ); + } else { + preferences = JSON.parse( localStorage.getItem('Able-Player') ); + } } catch (err) { - // Original cookie can't be parsed; update to default - this.setCookie(defaultCookie); - cookie = defaultCookie; - } - if (cookie) { - return cookie; - } - else { - return defaultCookie; + // Original preferences can't be parsed; update to default + this.setPrefs( defaultPrefs ); + preferences = defaultPrefs; } + return (preferences) ? preferences : defaultPrefs; }; - AblePlayer.prototype.updateCookie = function( setting ) { - - // called when a particular setting had been updated - // useful for settings updated indepedently of Preferences dialog + AblePlayer.prototype.updatePreferences = function( setting ) { + // useful for settings updated independently of Preferences dialog // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle() // setting is any supported preference name (e.g., "prefCaptions") // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows) - var cookie, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; - cookie = this.getCookie(); + var preferences, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; + preferences = this.getPref(); if (setting === 'transcript' \|\| setting === 'sign') { if (setting === 'transcript') { $window = this.$transcriptArea; windowPos = $window.position(); - if (typeof cookie.transcript === 'undefined') { - cookie.transcript = {}; - } - cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.transcript['zindex'] = $window.css('z-index'); - cookie.transcript['top'] = windowPos.top; - cookie.transcript['left'] = windowPos.left; - cookie.transcript['width'] = $window.width(); - cookie.transcript['height'] = $window.height(); - } - else if (setting === 'sign') { + if (typeof preferences.transcript === 'undefined') { + preferences.transcript = {}; + } + preferences.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.transcript['zindex'] = $window.css('z-index'); + preferences.transcript['top'] = windowPos.top; + preferences.transcript['left'] = windowPos.left; + preferences.transcript['width'] = $window.width(); + preferences.transcript['height'] = $window.height(); + } else if (setting === 'sign') { $window = this.$signWindow; windowPos = $window.position(); - if (typeof cookie.sign === 'undefined') { - cookie.sign = {}; - } - cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.sign['zindex'] = $window.css('z-index'); - cookie.sign['top'] = windowPos.top; - cookie.sign['left'] = windowPos.left; - cookie.sign['width'] = $window.width(); - cookie.sign['height'] = $window.height(); - } - } - else if (setting === 'voice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; - } - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; - } - } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (typeof preferences.sign === 'undefined') { + preferences.sign = {}; + } + preferences.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.sign['zindex'] = $window.css('z-index'); + preferences.sign['top'] = windowPos.top; + preferences.sign['left'] = windowPos.left; + preferences.sign['width'] = $window.width(); + preferences.sign['height'] = $window.height(); + } + } else if (setting === 'voice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; + } + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; + } + } + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - } - else { + preferences.voices.push(newVoice); + } + } else { available = this.getAvailablePreferences(); - // Rebuild cookie with current cookie values, + // Rebuild preferences with current preferences values, // replacing the one value that's been changed for (i = 0; i < available.length; i++) { prefName = available[i]['name']; if (prefName == setting) { // this is the one that requires an update - cookie.preferences[prefName] = this[prefName]; + preferences.preferences[prefName] = this[prefName]; } } } - // Save updated cookie - this.setCookie(cookie); + // Save updated preferences + this.setPrefs(preferences); }; AblePlayer.prototype.getPreferencesGroups = function() { @@ -3030,17 +2836,15 @@ var AblePlayerInstances = []; // in the Preferences popup menu // Human-readable label for each group is defined in translation table if (this.usingYouTubeCaptions) { - // no transcript is possible - return ['captions','descriptions','keyboard']; - } - else if (this.usingVimeoCaptions) { + // no transcript is possible + return ['captions','descriptions','keyboard']; + } else if (this.usingVimeoCaptions) { // users cannot control caption appearance // and no transcript is possible - return ['descriptions','keyboard']; + return ['descriptions','keyboard']; + } else { + return ['captions','descriptions','keyboard','transcript']; } - else { - return ['captions','descriptions','keyboard','transcript']; - } } AblePlayer.prototype.getAvailablePreferences = function() { @@ -3052,19 +2856,25 @@ var AblePlayerInstances = []; // Modifier keys preferences prefs.push({ 'name': 'prefAltKey', // use alt key with shortcuts - 'label': this.tt.prefAltKey, + 'label': this.translate( 'prefAltKey', 'Alt' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefCtrlKey', // use ctrl key with shortcuts - 'label': this.tt.prefCtrlKey, + 'label': this.translate( 'prefCtrlKey', 'Control' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefShiftKey', - 'label': this.tt.prefShiftKey, + 'label': this.translate( 'prefShiftKey', 'Shift' ), + 'group': 'keyboard', + 'default': 0 + }); + prefs.push({ + 'name': 'prefNoKeyShortcuts', + 'label': this.translate( 'prefNoKeyShortcuts', 'Disable Keyboard Shortcuts' ), 'group': 'keyboard', 'default': 0 }); @@ -3078,7 +2888,7 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefHighlight', // highlight transcript as media plays - 'label': this.tt.prefHighlight, + 'label': this.translate( 'prefHighlight', 'Highlight transcript as media plays' ), 'group': 'transcript', 'default': 1 // on because many users can benefit }); @@ -3090,13 +2900,12 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefTabbable', // tab-enable transcript - 'label': this.tt.prefTabbable, + 'label': this.translate( 'prefTabbable', 'Keyboard-enable transcript' ), 'group': 'transcript', 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page }); // Caption preferences - prefs.push({ 'name': 'prefCaptions', // closed captions default state 'label': null, @@ -3109,23 +2918,23 @@ var AblePlayerInstances = []; /* // not supported yet prefs.push({ 'name': 'prefCaptionsStyle', - 'label': this.tt.prefCaptionsStyle, + 'label': this.translate( 'prefCaptionsStyle', 'Style' ), 'group': 'captions', - 'default': this.tt.captionsStylePopOn + 'default': this.translate( 'captionsStylePopOn', 'Pop-on' ) }); / - // captions are always positioned above the player for audio + // captions are always positioned above the player for audio if (this.mediaType === 'video') { prefs.push({ 'name': 'prefCaptionsPosition', - 'label': this.tt.prefCaptionsPosition, + 'label': this.translate( 'prefCaptionsPosition', 'Position' ), 'group': 'captions', 'default': this.defaultCaptionsPosition }); - } + } prefs.push({ 'name': 'prefCaptionsFont', - 'label': this.tt.prefCaptionsFont, + 'label': this.translate( 'prefCaptionsFont', 'Font' ), 'group': 'captions', 'default': 'sans-serif' }); @@ -3133,7 +2942,7 @@ var AblePlayerInstances = []; // This is the one option that is supported by YouTube IFrame API prefs.push({ 'name': 'prefCaptionsSize', - 'label': this.tt.prefCaptionsSize, + 'label': this.translate( 'prefCaptionsSize', 'Font size' ), 'group': 'captions', 'default': '100%' }); @@ -3142,25 +2951,25 @@ var AblePlayerInstances = []; prefs.push({ 'name': 'prefCaptionsColor', - 'label': this.tt.prefCaptionsColor, + 'label': this.translate( 'prefCaptionsColor', 'Text Color' ), 'group': 'captions', 'default': 'white' }); prefs.push({ 'name': 'prefCaptionsBGColor', - 'label': this.tt.prefCaptionsBGColor, + 'label': this.translate( 'prefCaptionsBGColor', 'Background' ), 'group': 'captions', 'default': 'black' }); prefs.push({ 'name': 'prefCaptionsOpacity', - 'label': this.tt.prefCaptionsOpacity, + 'label': this.translate( 'prefCaptionsOpacity', 'Opacity' ), 'group': 'captions', 'default': '100%' }); } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { // Description preferences prefs.push({ 'name': 'prefDesc', // audio description default state @@ -3176,37 +2985,40 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefDescVoice', - 'label': this.tt.prefDescVoice, + 'label': this.translate( 'prefDescVoice', 'Voice' ), 'group': 'descriptions', 'default': null // will be set later, in injectPrefsForm() }); prefs.push({ 'name': 'prefDescPitch', - 'label': this.tt.prefDescPitch, + 'label': this.translate( 'prefDescPitch', 'Pitch' ), 'group': 'descriptions', 'default': 1 // 0 to 2 }); prefs.push({ 'name': 'prefDescRate', - 'label': this.tt.prefDescRate, + 'label': this.translate( 'prefDescRate', 'Rate' ), 'group': 'descriptions', 'default': 1 // 0.1 to 10 (1 is normal speech; 2 is fast but decipherable; >2 is super fast) }); prefs.push({ 'name': 'prefDescVolume', - 'label': this.tt.volume, + 'label': this.translate( 'volume', 'Volume' ), 'group': 'descriptions', 'default': 1 // 0 to 1 }); - prefs.push({ - 'name': 'prefDescPause', // automatically pause when closed description starts - 'label': this.tt.prefDescPause, - 'group': 'descriptions', - 'default': this.defaultDescPause - }); + // Don't enable pause option if video described files in use. + if ( this.descMethod !== 'video' ) { + prefs.push({ + 'name': 'prefDescPause', // automatically pause when closed description starts + 'label': this.translate( 'prefDescPause', 'Automatically pause video when description starts' ), + 'group': 'descriptions', + 'default': this.defaultDescPause + }); + } prefs.push({ 'name': 'prefDescVisible', // visibly show closed description (if avilable and used) - 'label': this.tt.prefDescVisible, + 'label': this.translate( 'prefDescVisible', 'Make description visible' ), 'group': 'descriptions', 'default': 0 // off as of 4.3.16, to avoid overloading the player with visible features }); @@ -3224,29 +3036,28 @@ var AblePlayerInstances = []; AblePlayer.prototype.loadCurrentPreferences = function () { - // Load current/default preferences from cookie into the AblePlayer object. + // Load current/default preferences into the AblePlayer object. var available = this.getAvailablePreferences(); - var cookie = this.getCookie(); - // Copy current cookie values into this object, and fill in any default values. + var preferences = this.getPref(); + // Copy current preferences values into this object, and fill in any default values. for (var ii = 0; ii < available.length; ii++) { var prefName = available[ii]['name']; var defaultValue = available[ii]['default']; - if (cookie.preferences[prefName] !== undefined) { - this[prefName] = cookie.preferences[prefName]; - } - else { - cookie.preferences[prefName] = defaultValue; + if (preferences.preferences[prefName] !== undefined) { + this[prefName] = preferences.preferences[prefName]; + } else { + preferences.preferences[prefName] = defaultValue; this[prefName] = defaultValue; } } - // Also load array of preferred voices from cookie - if (typeof cookie.voices !== 'undefined') { - this.prefVoices = cookie.voices; - } + // Also load array of preferred voices from preferences + if (typeof preferences.voices !== 'undefined') { + this.prefVoices = preferences.voices; + } - this.setCookie(cookie); + this.setPrefs(preferences); }; AblePlayer.prototype.injectPrefsForm = function (form) { @@ -3254,19 +3065,12 @@ var AblePlayerInstances = []; // Creates a preferences form and injects it. // form is one of the supported forms (groups) defined in getPreferencesGroups() - var thisObj, available, descLangs, - $prefsDiv, formTitle, introText, - $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, - $fieldset, fieldsetClass, fieldsetId, - $descFieldset, $descLegend, $legend, legendId, - thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField, - $div1,id1,$radio1,$label1, - $div2,id2,$radio2,$label2, - options,$thisOption,optionValue,optionLang,optionText,sampleCapsDiv, - changedPref,changedSpan,changedText, - currentDescState, prefDescVoice, - $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem, - dialog,saveButton,cancelButton; + var thisObj, available, + $prefsDiv, formTitle, introText, $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, + $fieldset, fieldsetClass, fieldsetId, $legend, legendId, thisPref, $thisDiv, thisClass, + thisId, $thisLabel, $thisField, options,$thisOption,optionValue,optionLang,optionText, + changedPref,changedSpan,changedText, currentDescState, prefDescVoice, $kbHeading,$kbList, + kbLabels,keys,kbListText,$kbListItem, dialog,$saveButton,$cancelButton,$buttonContainer; thisObj = this; available = this.getAvailablePreferences(); @@ -3278,83 +3082,74 @@ var AblePlayerInstances = []; var customClass = 'able-prefs-form-' + form; $prefsDiv.addClass(customClass); - // add titles and intros - if (form == 'captions') { - formTitle = this.tt.prefTitleCaptions; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage - } - else if (form == 'descriptions') { - formTitle = this.tt.prefTitleDescriptions; + // add titles and intros + if (form == 'captions') { + formTitle = this.translate( 'prefTitleCaptions', 'Captions Preferences' ); + } else if (form == 'descriptions') { + formTitle = this.translate( 'prefTitleDescriptions', 'Audio Description Preferences' ); var $prefsIntro = $('<p>',{ - text: this.tt.prefIntroDescription1 + text: this.translate( 'prefIntroDescription1', 'This media player supports audio description in two ways: ' ) }); var $prefsIntroUL = $('<ul>'); var $prefsIntroLI1 = $('<li>',{ - text: this.tt.prefDescFormatOption1 + text: this.translate( 'prefDescFormatOption1', 'alternative described version of video' ) }); var $prefsIntroLI2 = $('<li>',{ - text: this.tt.prefDescFormatOption2 + text: this.translate( 'prefDescFormatOption2', 'text-based description, announced by screen reader' ) }); $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2); if (this.hasOpenDesc && this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2 + ' '; - currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>'; - currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else if (this.hasOpenDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.'; - } - else if (this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else { - currentDescState = this.tt.prefIntroDescriptionNone; + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ) + ' '; + currentDescState += '<strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>'; + currentDescState += ' <em>' + this.translate( 'and', 'and' ) + '</em> <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else if (this.hasOpenDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>.'; + } else if (this.hasClosedDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else { + currentDescState = this.translate( 'prefIntroDescriptionNone', 'The current video has no audio description in either format.' ); } $prefsIntroP2 = $('<p>',{ html: currentDescState }); - p3Text = this.tt.prefIntroDescription3; + p3Text = this.translate( 'prefIntroDescription3', 'Use the following form to set your preferences related to text-based audio description.' ); if (this.hasOpenDesc \|\| this.hasClosedDesc) { - p3Text += ' ' + this.tt.prefIntroDescription4; + p3Text += ' ' + this.translate( 'prefIntroDescription4', 'After you save your settings, audio description can be toggled on/off using the Description button.' ); } $prefsIntroP3 = $('<p>',{ text: p3Text }); - $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3); - } - else if (form == 'keyboard') { - formTitle = this.tt.prefTitleKeyboard; - introText = this.tt.prefIntroKeyboard1; - introText += ' ' + this.tt.prefIntroKeyboard2; - introText += ' ' + this.tt.prefIntroKeyboard3; + $prefsDiv.append( $prefsIntro, $prefsIntroUL, $prefsIntroP2, $prefsIntroP3 ); + } else if (form == 'keyboard') { + formTitle = this.translate( 'prefTitleKeyboard', 'Keyboard Preferences' ); + introText = this.translate( 'prefIntroKeyboard1', 'The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list).' ); + introText += ' ' + this.translate( 'prefIntroKeyboard2', 'Modifier keys (Shift, Alt, and Control) can be assigned below.' ); + introText += ' ' + this.translate( 'prefIntroKeyboard3', 'NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you.' ); $prefsIntro = $('<p>',{ text: introText }); $prefsDiv.append($prefsIntro); - } - else if (form == 'transcript') { - formTitle = this.tt.prefTitleTranscript; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage + } else if (form == 'transcript') { + formTitle = this.translate( 'prefTitleTranscript', 'Transcript Preferences' ); } - $fieldset = $('<div>').attr('role','group'); + $fieldset = $('<div>').attr('role','group'); fieldsetClass = 'able-prefs-' + form; fieldsetId = this.mediaId + '-prefs-' + form; legendId = fieldsetId + '-legend'; $fieldset.addClass(fieldsetClass).attr('id',fieldsetId); if (form === 'keyboard') { - $legend = $('<h2>' + this.tt.prefHeadingKeyboard1 + '</h2>'); + $legend = $('<h2>' + this.translate( 'prefHeadingKeyboard1', 'Modifier keys used for shortcuts' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); - } - else if (form === 'descriptions') { - $legend = $('<h2>' + this.tt.prefHeadingTextDescription + '</h2>'); + } else if (form === 'descriptions') { + $legend = $('<h2>' + this.translate( 'prefHeadingTextDescription', 'Text-based audio description' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); @@ -3377,7 +3172,7 @@ var AblePlayerInstances = []; }); if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') { // add a change handler that updates the style of the sample caption text - $thisField.change(function() { + $thisField.on( 'change', function() { changedPref = $(this).attr('name'); thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref); }); @@ -3387,28 +3182,19 @@ var AblePlayerInstances = []; if (thisPref === 'prefCaptionsPosition') { optionValue = options[j]; if (optionValue === 'overlay') { - optionText = this.tt.captionsPositionOverlay; - } - else if (optionValue === 'below') { + optionText = this.translate( 'captionsPositionOverlay', 'Overlay' ); + } else if (optionValue === 'below') { optionValue = options[j]; - optionText = this.tt.captionsPositionBelow; + optionText = this.translate( 'captionsPositionBelow', 'Below video' ); } - } - else if (thisPref === 'prefCaptionsFont' \|\| thisPref === 'prefCaptionsColor' \|\| thisPref === 'prefCaptionsBGColor') { + } else if (thisPref === 'prefCaptionsFont' \|\| thisPref === 'prefCaptionsColor' \|\| thisPref === 'prefCaptionsBGColor') { optionValue = options[j][0]; optionText = options[j][1]; - } - else if (thisPref === 'prefCaptionsOpacity') { + } else if (thisPref === 'prefCaptionsOpacity') { optionValue = options[j]; optionText = options[j]; - if (optionValue === '0%') { - optionText += ' (' + this.tt.transparent + ')'; - } - else if (optionValue === '100%') { - optionText += ' (' + this.tt.solid + ')'; - } - } - else { + optionText += (optionValue === '0%') ? ' (' + this.translate( 'transparent', 'transparent' ) + ')' : ' (' + this.translate( 'solid', 'solid' ) + ')'; + } else { optionValue = options[j]; optionText = options[j]; } @@ -3422,8 +3208,7 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } $thisDiv.append($thisLabel,$thisField); - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); if (thisPref === 'prefDescPause' \|\| thisPref === 'prefDescVisible') { // these preferences are checkboxes @@ -3439,19 +3224,18 @@ var AblePlayerInstances = []; $thisField.prop('checked',true); } $thisDiv.append($thisField,$thisLabel); - } - else if (this.synth) { + } else if (this.synth) { // Only show these options if browser supports speech synthesis $thisDiv.addClass('able-prefs-select'); $thisField = $('<select>',{ name: thisPref, id: thisId, }); - if (thisPref === 'prefDescVoice' && this.descVoices) { - prefDescVoice = this.getPrefDescVoice(); + if (thisPref === 'prefDescVoice' && this.descVoices.length) { + prefDescVoice = this.getPrefDescVoice(); for (j=0; j < this.descVoices.length; j++) { optionValue = this.descVoices[j].name; - optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); + optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); optionText = optionValue + ' (' + this.descVoices[j].lang + ')'; $thisOption = $('<option>',{ 'value': optionValue, @@ -3464,12 +3248,10 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } this.$voiceSelectField = $thisField; - } - else { + } else { if (thisPref == 'prefDescPitch') { // 0 to 2 options = [0,0.5,1,1.5,2]; - } - else if (thisPref == 'prefDescRate') { // 0.1 to 10 + } else if (thisPref == 'prefDescRate') { // 0.1 to 10 // Tests with a variety of voices on MacOS and Windows // yielded the following choices that seem reasonable for audio description: // 0.5 - too slow (exclude this) @@ -3487,8 +3269,7 @@ var AblePlayerInstances = []; // Note: if these values are modified, must also modfiy them // in makePrefsValueReadable() options = [0.7,0.8,0.9,1,1.1,1.2,1.5,2,2.5,3]; - } - else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 + } else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 options = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]; } if (typeof options !== 'undefined') { @@ -3513,8 +3294,7 @@ var AblePlayerInstances = []; }); $thisDiv.append($thisLabel,$thisField); } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); $thisField = $('<input>',{ type: 'checkbox', @@ -3533,26 +3313,35 @@ var AblePlayerInstances = []; if (changedPref === 'prefAltKey') { changedSpan = '.able-modkey-alt'; changedText = thisObj.tt.prefAltKey + ' + '; - } - else if (changedPref === 'prefCtrlKey') { + } else if (changedPref === 'prefCtrlKey') { changedSpan = '.able-modkey-ctrl'; changedText = thisObj.tt.prefCtrlKey + ' + '; - } - else if (changedPref === 'prefShiftKey') { + } else if (changedPref === 'prefShiftKey') { changedSpan = '.able-modkey-shift'; changedText = thisObj.tt.prefShiftKey + ' + '; } - if ($(this).is(':checked')) { - $(changedSpan).text(changedText); - } - else { - $(changedSpan).text(''); + if ( changedPref !== 'prefNoKeyShortcuts' ) { + if ($(this).is(':checked')) { + $(changedSpan).text(changedText); + } else { + $(changedSpan).text(''); + } + } else { + if ($(this).is(':checked')) { + $('.able-modkey-item').addClass('hidden'); + } else { + $('.able-modkey-item').removeClass('hidden'); + } } }); } $thisDiv.append($thisField,$thisLabel); } - $fieldset.append($thisDiv); + if (thisPref === 'prefDescVoice' && !this.descVoices.length) { + // No voices are available (e.g., in Safari 15.4 on Mac OS) + } else { + $fieldset.append($thisDiv); + } } } $prefsDiv.append($fieldset); @@ -3563,25 +3352,25 @@ var AblePlayerInstances = []; if (!this.usingYouTubeCaptions) { this.$sampleCapsDiv = $('<div>',{ 'class': 'able-captions-sample' - }).text(this.tt.sampleCaptionText); + }).text( this.translate( 'sampleCaptionText', 'Sample caption text' ) ); $prefsDiv.append(this.$sampleCapsDiv); this.stylizeCaptions(this.$sampleCapsDiv); } - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { if (this.synth) { // add a div with sample audio description text this.$sampleDescDiv = $('<div>',{ 'class': 'able-desc-sample' - }).text(this.tt.sampleDescriptionText); + }).text( this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) ); $prefsDiv.append(this.$sampleDescDiv); - this.currentSampleText = this.tt.sampleDescriptionText; + this.currentSampleText = this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ); } - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { + let shortcutClass = (this.prefNoKeyShortcuts === 1 ) ? 'able-modkey-item hidden' : 'able-modkey-item'; + // add a current list of keyboard shortcuts $kbHeading = $('<h2>',{ - text: this.tt.prefHeadingKeyboard2 + text: this.translate( 'prefHeadingKeyboard2', 'Current keyboard shortcuts' ) }); $kbList = $('<ul>'); // create arrays of kbLabels and keys @@ -3589,100 +3378,85 @@ var AblePlayerInstances = []; keys = []; for (i=0; i<this.controls.length; i++) { if (this.controls[i] === 'play') { - kbLabels.push(this.tt.play + '/' + this.tt.pause); - keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar); - } - else if (this.controls[i] === 'restart') { - kbLabels.push(this.tt.restart); + kbLabels.push( this.translate( 'play', 'Play' ) + '/' + this.translate( 'pause', 'Pause' ) ); + keys.push('p</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-help-modifiers"> ' + this.translate( 'spacebar', 'spacebar' )); + } else if (this.controls[i] === 'restart') { + kbLabels.push(this.translate( 'restart', 'Restart' )); keys.push('s'); - } - else if (this.controls[i] === 'previous') { - kbLabels.push(this.tt.prevTrack); + } else if (this.controls[i] === 'previous') { + kbLabels.push( this.translate( 'prevTrack', 'Previous track' ) ); keys.push('b'); // b = back - } - else if (this.controls[i] === 'next') { - kbLabels.push(this.tt.nextTrack); + } else if (this.controls[i] === 'next') { + kbLabels.push( this.translate( 'nextTrack', 'Next track' ) ); keys.push('n'); - } - else if (this.controls[i] === 'rewind') { - kbLabels.push(this.tt.rewind); + } else if (this.controls[i] === 'rewind') { + kbLabels.push(this.translate( 'rewind', 'Rewind' )); keys.push('r'); - } - else if (this.controls[i] === 'forward') { - kbLabels.push(this.tt.forward); + } else if (this.controls[i] === 'forward') { + kbLabels.push(this.translate( 'forward', 'Forward' )); keys.push('f'); - } - else if (this.controls[i] === 'volume') { - kbLabels.push(this.tt.volume); - keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9'); + } else if (this.controls[i] === 'volume') { + kbLabels.push(this.translate( 'volume', 'Volume' )); + keys.push('v</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-modkey">1-9'); // mute toggle - kbLabels.push(this.tt.mute + '/' + this.tt.unmute); + kbLabels.push(this.translate( 'mute', 'Mute' ) + '/' + this.translate( 'unmute', 'Unmute' )); keys.push('m'); - } - else if (this.controls[i] === 'captions') { + } else if (this.controls[i] === 'captions') { if (this.captions.length > 1) { // caption button launches a Captions popup menu - kbLabels.push(this.tt.captions); - } - else { + kbLabels.push(this.translate( 'captions', 'Captions' )); + } else { // there is only one caption track // therefore caption button is a toggle if (this.captionsOn) { - kbLabels.push(this.tt.hideCaptions); - } - else { - kbLabels.push(this.tt.showCaptions); + kbLabels.push(this.translate( 'hideCaptions', 'Hide captions' )); + } else { + kbLabels.push(this.translate( 'showCaptions', 'Show captions' )); } } keys.push('c'); - } - else if (this.controls[i] === 'descriptions') { + } else if (this.controls[i] === 'descriptions') { if (this.descOn) { - kbLabels.push(this.tt.turnOffDescriptions); - } - else { - kbLabels.push(this.tt.turnOnDescriptions); + kbLabels.push(this.translate( 'turnOffDescriptions', 'Turn off descriptions' )); + } else { + kbLabels.push(this.translate( 'turnOnDescriptions', 'Turn on descriptions' )); } keys.push('d'); - } - else if (this.controls[i] === 'prefs') { - kbLabels.push(this.tt.preferences); + } else if (this.controls[i] === 'prefs') { + kbLabels.push(this.translate( 'preferences', 'Preferences' )); keys.push('e'); } - else if (this.controls[i] === 'help') { - kbLabels.push(this.tt.help); - keys.push('h'); - } } for (i=0; i<keys.length; i++) { // alt kbListText = '<span class="able-modkey-alt">'; if (this.prefAltKey === 1) { - kbListText += this.tt.prefAltKey + ' + '; + kbListText += this.translate( 'prefAltKey', 'Alt' ) + ' + '; } kbListText += '</span>'; // ctrl kbListText += '<span class="able-modkey-ctrl">'; if (this.prefCtrlKey === 1) { - kbListText += this.tt.prefCtrlKey + ' + '; + kbListText += this.translate( 'prefCtrlKey', 'Control' ) + ' + '; } kbListText += '</span>'; // shift kbListText += '<span class="able-modkey-shift">'; if (this.prefShiftKey === 1) { - kbListText += this.tt.prefShiftKey + ' + '; + kbListText += this.translate( 'prefShiftKey', 'Shift' ) + ' + '; } kbListText += '</span>'; kbListText += '<span class="able-modkey">' + keys[i] + '</span>'; kbListText += ' = ' + kbLabels[i]; $kbListItem = $('<li>',{ - html: kbListText + 'class': shortcutClass, + html: kbListText, }); $kbList.append($kbListItem); } // add Escape key - kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>'; - kbListText += ' = ' + this.tt.escapeKeyFunction; + kbListText = '<span class="able-modkey">' + this.translate( 'escapeKey', 'Escape' ) + '</span>'; + kbListText += ' = ' + this.translate( 'escapeKeyFunction', 'Close current dialog or popup menu' ); $kbListItem = $('<li>',{ html: kbListText }); @@ -3692,56 +3466,53 @@ var AblePlayerInstances = []; } // $prefsDiv (dialog) must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers $('body').append($prefsDiv); - dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', true, formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em'); + dialog = new AccessibleDialog( + $prefsDiv, + this.$prefsButton, + formTitle, + thisObj.tt.closeButtonLabel + ); // Add save and cancel buttons. - $prefsDiv.append('<hr>'); - saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - saveButton.click(function () { + $buttonContainer = $( '<div class="able-prefs-buttons"></div>' ); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); + $saveButton.on( 'click', function () { dialog.hide(); thisObj.savePrefsFromForm(); }); - cancelButton.click(function () { + $cancelButton.on( 'click', function () { dialog.hide(); thisObj.resetPrefsForm(); }); - - $prefsDiv.append(saveButton); - $prefsDiv.append(cancelButton); - + $buttonContainer.append( $saveButton,$cancelButton ); + $prefsDiv.append($buttonContainer); // Associate the dialog's H1 as aria-labelledby for groups of fields - // (alternative to fieldset and legend) - if (form === 'captions' \|\| form === 'transcript') { - $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); + // (alternative to fieldset and legend) + if (form === 'captions' \|\| form === 'transcript') { + $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); } // add global reference for future control if (form === 'captions') { this.captionPrefsDialog = dialog; - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { this.descPrefsDialog = dialog; - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { this.keyboardPrefsDialog = dialog; - } - else if (form === 'transcript') { + } else if (form === 'transcript') { this.transcriptPrefsDialog = dialog; } // Add click handler for dialog close button // (button is added in dialog.js) - $('div.able-prefs-form button.modalCloseButton').click(function() { + $('div.able-prefs-form button.modalCloseButton').on( 'click', function() { thisObj.resetPrefsForm(); }) // Add handler for escape key - $('div.able-prefs-form').keydown(function(e) { - if (e.which === 27) { // escape + $('div.able-prefs-form').on( 'keydown', function(e) { + if (e.key === 'Escape') { thisObj.resetPrefsForm(); } }); @@ -3749,23 +3520,21 @@ var AblePlayerInstances = []; AblePlayer.prototype.getPrefDescVoice = function () { - // return user's preferred voice for the current language from cookie.voices - var lang, cookie, i; + // return user's preferred voice for the current language from preferences.voices + var lang, preferences, i; - if (this.selectedDescriptions) { - lang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - lang = this.captionLang; - } - else { - lang = this.lang; + if (this.selectedDescriptions) { + lang = this.selectedDescriptions.language; + } else if (this.captionLang) { + lang = this.captionLang; + } else { + lang = this.lang; } - cookie = this.getCookie(); - if (cookie.voices) { - for (i=0; i < cookie.voices.length; i++) { - if (cookie.voices[i].lang === lang) { - return cookie.voices[i].name; + preferences = this.getPref(); + if (preferences.voices) { + for (i=0; i < preferences.voices.length; i++) { + if (preferences.voices[i].lang === lang) { + return preferences.voices[i].name; } } } @@ -3774,9 +3543,9 @@ var AblePlayerInstances = []; AblePlayer.prototype.rebuildDescPrefsForm = function () { - // Called if this.descVoices changes, which may happen if: - // getBrowserVoices() succeeds after an earlier failure - // user changes language of captions/subtitles and descVoices changes to match the new language + // Called if this.descVoices changes, which may happen if: + // getBrowserVoices() succeeds after an earlier failure + // user changes language of captions/subtitles and descVoices changes to match the new language var i, optionValue, optionText, $thisOption; @@ -3797,161 +3566,141 @@ var AblePlayerInstances = []; } }; - AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { + AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { + + // The values for pitch, rate, and volume (web speech API) + // are strange and inconsistent between variables + // this function returns text that is more readable than the values themselves + + if (pref === 'prefDescPitch') { + if (value === 0) { + return this.translate( 'prefDescPitch1', 'Very low' ); + } else if (value === 0.5) { + return this.translate( 'prefDescPitch2', 'Low' ); + } else if (value === 1) { + return this.translate( 'prefDescPitch3', 'Default' ); + } else if (value === 1.5) { + return this.translate( 'prefDescPitch4', 'High' ); + } else if (value === 2) { + return this.translate( 'prefDescPitch5', 'Very high' ); + } + } else if (pref === 'prefDescRate') { + // default in the API is 0.1 to 10, where 1 is normal speaking voice + // our custom range offers several rates close to 1 + // plus a couple of crazy fast ones for sport + // Our more readable options (1-10) or mapped here to API values + if (value === 0.7) { + return 1; + } else if (value === 0.8) { + return 2; + } else if (value === 0.9) { + return 3; + } else if (value === 1) { + return 4; + } else if (value === 1.1) { + return 5; + } else if (value === 1.2) { + return 6; + } else if (value === 1.5) { + return 7; + } else if (value === 2) { + return 8; + } else if (value === 2.5) { + return 9; + } else if (value === 3) { + return 10; + } + } else if (pref === 'prefDescVolume') { + // values range from 0.1 to 1.0 + return value 10; + } + return value; + }; - // The values for pitch, rate, and volume (web speech API) - // are strange and inconsistent between variables - // this function returns text that is more readable than the values themselves + AblePlayer.prototype.resetPrefsForm = function () { - if (pref === 'prefDescPitch') { - if (value === 0) { - return this.tt.prefDescPitch1; - } - else if (value === 0.5) { - return this.tt.prefDescPitch2; - } - else if (value === 1) { - return this.tt.prefDescPitch3; - } - else if (value === 1.5) { - return this.tt.prefDescPitch4; - } - else if (value === 2) { - return this.tt.prefDescPitch5; - } - } - else if (pref === 'prefDescRate') { - // default in the API is 0.1 to 10, where 1 is normal speaking voice - // our custom range offers several rates close to 1 - // plus a couple of crazy fast ones for sport - // Our more readable options (1-10) or mapped here to API values - if (value === 0.7) { - return 1; - } - else if (value === 0.8) { - return 2; - } - else if (value === 0.9) { - return 3; - } - else if (value === 1) { - return 4; - } - else if (value === 1.1) { - return 5; - } - else if (value === 1.2) { - return 6; - } - else if (value === 1.5) { - return 7; - } - else if (value === 2) { - return 8; - } - else if (value === 2.5) { - return 9; - } - else if (value === 3) { - return 10; - } - } - else if (pref === 'prefDescVolume') { - // values range from 0.1 to 1.0 - return value * 10; - } - return value; - }; - - AblePlayer.prototype.resetPrefsForm = function () { - - // Reset preferences form with default values from cookie - // Called when: - // User clicks cancel or close button in Prefs Dialog - // User presses Escape to close Prefs dialog - // User clicks Save in Prefs dialog, & there's more than one player on page - - var thisObj, cookie, available, i, prefName, prefId, thisDiv, thisId; - - thisObj = this; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (i=0; i<available.length; i++) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is a caption-related select box - $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]); - } - else { // all others are checkboxes - if (this[prefName] === 1) { - $('input[name="' + prefName + '"]').prop('checked',true); - } - else { - $('input[name="' + prefName + '"]').prop('checked',false); - } + // Reset preferences form with default values from preferences + // Called when: + // User clicks cancel or close button in Prefs Dialog + // User presses Escape to close Prefs dialog + // User clicks Save in Prefs dialog, & there's more than one player on page + + var thisObj, preferences, available, i, prefName; + + thisObj = this; + preferences = this.getPref(); + available = this.getAvailablePreferences(); + for (i=0; i<available.length; i++) { + prefName = available[i]['name']; + if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + // this is a caption-related select box + $('select[name="' + prefName + '"]').val(preferences.preferences[prefName]); + } else { // all others are checkboxes + if (this[prefName] === 1) { + $('input[name="' + prefName + '"]').prop('checked',true); + } else { + $('input[name="' + prefName + '"]').prop('checked',false); } } - // also restore style of sample caption div - this.stylizeCaptions(this.$sampleCapsDiv); - }; + } + // also restore style of sample caption div + this.stylizeCaptions(this.$sampleCapsDiv); + }; AblePlayer.prototype.savePrefsFromForm = function () { // Return a prefs object constructed from the form. // called when user saves the Preferences form - // update cookie with new value - var cookie, available, prefName, prefId, - voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, + // update preferences with new value + var preferences, available, prefName, prefId, + voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, numCapChanges, capSizeChanged, capSizeValue, newValue; numChanges = 0; numCapChanges = 0; // changes to caption-style-related preferences capSizeChanged = false; - cookie = this.getCookie(); + preferences = this.getPref(); available = this.getAvailablePreferences(); for (var i=0; i < available.length; i++) { // only prefs with labels are used in the Prefs form if (available[i]['label']) { prefName = available[i]['name']; prefId = this.mediaId + '_' + prefName; - if (prefName === 'prefDescVoice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; + if (prefName === 'prefDescVoice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; } voiceSelectId = this.mediaId + '_prefDescVoice'; this.prefDescVoice = $('select#' + voiceSelectId).find(':selected').val(); this.prefDescVoiceLang = $('select#' + voiceSelectId).find(':selected').attr('data-lang'); - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; } } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - numChanges++; - } - else if (prefName == 'prefDescMethod') { + preferences.voices.push(newVoice); + } + numChanges++; + } else if (prefName == 'prefDescMethod') { // As of v4.0.10, prefDescMethod is no longer a choice // this.prefDescMethod = $('input[name="' + prefName + '"]:checked').val(); this.prefDescMethod = 'video'; - if (this.prefDescMethod !== cookie.preferences['prefDescMethod']) { // user's preference has changed - cookie.preferences['prefDescMethod'] = this.prefDescMethod; + if (this.prefDescMethod !== preferences.preferences['prefDescMethod']) { // user's preference has changed + preferences.preferences['prefDescMethod'] = this.prefDescMethod; numChanges++; } - } - else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + } else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { // this is one of the caption-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref (for caption fields, not done elsewhere) this[prefName] = newValue; numChanges++; @@ -3961,37 +3710,32 @@ var AblePlayerInstances = []; capSizeChanged = true; capSizeValue = newValue; } - } - else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { + } else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { // this is one of the description-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref this[prefName] = newValue; numChanges++; } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes if ($('input[id="' + prefId + '"]').is(':checked')) { - cookie.preferences[prefName] = 1; + preferences.preferences[prefName] = 1; if (this[prefName] === 1) { // nothing has changed - } - else { + } else { // user has just turned this pref on this[prefName] = 1; numChanges++; } - } - else { // thisPref is not checked - cookie.preferences[prefName] = 0; + } else { // thisPref is not checked + preferences.preferences[prefName] = 0; if (this[prefName] === 1) { // user has just turned this pref off this[prefName] = 0; numChanges++; - } - else { + } else { // nothing has chaged } } @@ -3999,11 +3743,10 @@ var AblePlayerInstances = []; } } if (numChanges > 0) { - this.setCookie(cookie); - this.showAlert(this.tt.prefSuccess); - } - else { - this.showAlert(this.tt.prefNoChange); + this.setPrefs(preferences); + this.showAlert( this.translate( 'prefSuccess', 'Your changes have been saved.' ) ); + } else { + this.showAlert( this.translate( 'prefNoChange', "You didn't make any changes" ) ); } if (this.player === 'youtube' && (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) && @@ -4015,8 +3758,8 @@ var AblePlayerInstances = []; // there are multiple players on this page. // update prefs for ALL of them for (var i=0; i<AblePlayerInstances.length; i++) { - AblePlayerInstances[i].updatePrefs(); - AblePlayerInstances[i].geteferences(); + AblePlayerInstances[i].updatePlayerPrefs(); + AblePlayerInstances[i].loadCurrentPreferences(); AblePlayerInstances[i].resetPrefsForm(); if (numCapChanges > 0) { AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$captionsDiv); @@ -4026,10 +3769,9 @@ var AblePlayerInstances = []; } } } - } - else { + } else { // there is only one player - this.updatePrefs(); + this.updatePlayerPrefs(); if (numCapChanges > 0) { this.stylizeCaptions(this.$captionsDiv); // also apply same changes to descriptions, if present @@ -4040,16 +3782,14 @@ var AblePlayerInstances = []; } } - AblePlayer.prototype.updatePrefs = function () { + AblePlayer.prototype.updatePlayerPrefs = function () { // Update player based on current prefs. Safe to call multiple times. - - if (this.$transcriptDiv) { + if (this.$transcriptDiv) { // tabbable transcript if (this.prefTabbable === 1) { this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - else { + } else { this.$transcriptDiv.find('span.able-transcript-seekpoint').removeAttr('tabindex'); } @@ -4084,11 +3824,10 @@ var AblePlayerInstances = []; (function ($) { // See section 4.1 of dev.w3.org/html5/webvtt for format details. - AblePlayer.prototype.parseWebVTT = function(srcFile,text) { - -// var deferred = new $.Deferred(); -// var promise = deferred.promise(); + AblePlayer.prototype.parseWebVTT = function(data) { + let srcFile = data.src; + let text = data.text; // Normalize line ends to \n. text = text.replace(/(\r\n\|\n\|\r)/g,'\n'); @@ -4112,8 +3851,7 @@ var AblePlayerInstances = []; errString += err; if (console.warn) { console.warn(errString); - } - else if (console.log) { + } else if (console.log) { console.log(errString); } } @@ -4142,8 +3880,7 @@ var AblePlayerInstances = []; if (cutText[ii] === '\n') { state.column = 1; state.line += 1; - } - else { + } else { state.column += 1; } } @@ -4163,8 +3900,7 @@ var AblePlayerInstances = []; returnText = state.text; updatePosition(state, returnText); state.text = ''; - } - else { + } else { returnText = state.text.substring(0, nextEOL); updatePosition(state, returnText + '\n'); state.text = state.text.substring(nextEOL + 1); @@ -4174,12 +3910,7 @@ var AblePlayerInstances = []; function peekLine(state) { var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - return state.text; - } - else { - return state.text.substring(0, nextEOL); - } + return (nextEOL === -1) ? state.text : state.text.substring(0, nextEOL); } function parseFileBody(state) { @@ -4193,8 +3924,7 @@ var AblePlayerInstances = []; parseMetadataHeaders, eatAtLeast1EmptyLines, parseCuesAndComments]); - } - else { + } else { state.error = "WEBVTT signature not followed by whitespace."; } } @@ -4205,11 +3935,9 @@ var AblePlayerInstances = []; var nextLine = peekLine(state); if (nextLine.indexOf('-->') !== -1) { return; - } - else if (nextLine.length === 0) { + } else if (nextLine.length === 0) { return; - } - else { + } else { var keyValue = act(state, getMetadataKeyValue); state.metadata[keyValue[0]] = keyValue[1]; act(state, eatUntilEOLInclusive); @@ -4242,8 +3970,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -4257,8 +3984,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -4271,14 +3997,11 @@ var AblePlayerInstances = []; // If NOTE is not on a line all its own, it must be followed by a space or tab. if (nextLine.indexOf('NOTE') === 0 && ((nextLine.length === 4) \|\| (nextLine[4] === ' ') \|\| (nextLine[4] === '\t'))) { actList(state, [eatComment, eatEmptyLines]); - } - else if ($.trim(nextLine).length === 0 && state.text.length > 0) { + } else if (nextLine.trim().length === 0 && state.text.length > 0) { act(state, eatEmptyLines); - } - else if ($.trim(nextLine).length > 0) { + } else if (nextLine.trim().length > 0) { act(state, parseCue); - } - else { + } else { // Everythings parsed! return; } @@ -4301,8 +4024,7 @@ var AblePlayerInstances = []; errString += 'Expected cue timing for cueId \''+cueId+'\' but found: ' + nextLine + '\n'; if (console.warn) { console.warn(errString); - } - else if (console.log) { + } else if (console.log) { console.log(errString); } return; // Return leaving line for parseCuesAndComments to handle @@ -4371,8 +4093,7 @@ var AblePlayerInstances = []; // We'll use the tokens themselves as objects where possible. if (token.type === 'string') { current.children.push(token); - } - else if (token.type === 'startTag') { + } else if (token.type === 'startTag') { token.type = token.tagName; // Define token.parent; added by Terrill to fix bug end 'endTag' loop token.parent = current; @@ -4382,31 +4103,27 @@ var AblePlayerInstances = []; } current.children.push(token); current = token; - } - else if (token.tagName === 'rt' && current.tagName === 'ruby') { + } else if (token.tagName === 'rt' && current.tagName === 'ruby') { if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'c') { + } else if (token.tagName === 'c') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'v') { + } else if (token.tagName === 'v') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'lang') { + } else if (token.tagName === 'lang') { languageStack.push(token.annotation); if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; @@ -4414,22 +4131,18 @@ var AblePlayerInstances = []; current.children.push(token); current = token; } - } - else if (token.type === 'endTag') { + } else if (token.type === 'endTag') { if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) { // NOTE from Terrill: This was resulting in an error because current.parent was undefined // Fixed (I think) by assigning current token to token.parent in 'startTag' loop current = current.parent; - } - else if (token.tagName === 'lang' && current.type === 'lang') { + } else if (token.tagName === 'lang' && current.type === 'lang') { current = current.parent; languageStack.pop(); - } - else if (token.tagName === 'ruby' && current.type === 'rt') { + } else if (token.tagName === 'ruby' && current.type === 'rt') { current = current.parent.parent; } - } - else if (token.type === 'timestampTag') { + } else if (token.type === 'timestampTag') { var tempState = { text: token.value, error: null, @@ -4464,11 +4177,9 @@ var AblePlayerInstances = []; // Double newlines indicate end of token. if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { c = '\u0004'; - } - else if (state.text.length > 0) { + } else if (state.text.length > 0) { c = state.text[0]; - } - else { + } else { // End of file. c = '\u0004'; } @@ -4476,213 +4187,168 @@ var AblePlayerInstances = []; if (c === '&') { buffer = '&'; tokenState = 'escape'; - } - else if (c === '<') { + } else if (c === '<') { if (result.length === 0) { tokenState = 'tag'; - } - else { + } else { token.type = 'string'; token.value = result.join(''); return token; } - } - else if (c === '\u0004') { + } else if (c === '\u0004') { return {type: 'string', value: result.join('')}; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'escape') { + } else if (tokenState === 'escape') { if (c === '&') { result.push(buffer); buffer = '&'; - } - else if (c.match(/[0-9a-z]/)) { + } else if (c.match(/[0-9a-z]/)) { buffer += c; - } - else if (c === ';') { + } else if (c === ';') { if (buffer === '&') { result.push('&'); - } - else if (buffer === '<') { + } else if (buffer === '<') { result.push('<'); - } - else if (buffer === '>') { + } else if (buffer === '>') { result.push('>'); - } - else if (buffer === '&lrm') { + } else if (buffer === '&lrm') { result.push('\u200e'); - } - else if (buffer === '&rlm') { + } else if (buffer === '&rlm') { result.push('\u200f'); - } - else if (buffer === ' ') { + } else if (buffer === ' ') { result.push('\u00a0'); - } - else { + } else { result.push(buffer); result.push(';'); } tokenState = 'data'; - } - else if (c === '<' \|\| c === '\u0004') { + } else if (c === '<' \|\| c === '\u0004') { result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { // Handle unescaped & chars as strings + } else if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { // Handle unescaped & chars as strings result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else { + } else { result.push(buffer); tokenState = 'data'; } - } - else if (tokenState === 'tag') { + } else if (tokenState === 'tag') { if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '/') { + } else if (c === '/') { tokenState = 'endTag'; - } - else if (c.match('[0-9]')) { + } else if (c.match('[0-9]')) { tokenState = 'timestampTag'; result.push(c); - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); break; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = ''; token.type = 'startTag'; return token; - } - else { + } else { result.push(c); tokenState = 'startTag'; } - } - else if (tokenState === 'startTag') { + } else if (tokenState === 'startTag') { if (c === '\t' \|\| c === '\u000c' \|\| c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'startTagClass') { + } else if (tokenState === 'startTagClass') { if (c === '\t' \|\| c === '\u000c' \|\| c === ' ') { token.classes.push(buffer); buffer = ''; tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { token.classes.push(buffer); buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { token.classes.push(buffer); buffer = ""; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else { + } else { buffer += 'c'; } - } - else if (tokenState === 'startTagAnnotation') { + } else if (tokenState === 'startTagAnnotation') { if (c === '>') { cut(state, 1); - buffer = $.trim(buffer).replace(/ +/, ' '); + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else if (c === '\u0004') { - buffer = $.trim(buffer).replace(/ +/, ' '); + } else if (c === '\u0004') { + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else { + } else { buffer += c; } - } - else if (tokenState === 'endTag') { + } else if (tokenState === 'endTag') { if (c === '>') { cut(state, 1); token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'timestampTag') { + } else if (tokenState === 'timestampTag') { if (c === '>') { cut(state, 1); token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else { + } else { throw 'Unknown tokenState ' + tokenState; } @@ -4699,15 +4365,13 @@ var AblePlayerInstances = []; } while (true) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { // End of comment. return; - } - else if (nextLine.indexOf('-->') !== -1) { + } else if (nextLine.indexOf('-->') !== -1) { state.error = 'Invalid syntax: --> in comment.'; return; - } - else { + } else { cutLine(state); } } @@ -4725,8 +4389,7 @@ var AblePlayerInstances = []; function eatSignature(state) { if (state.text.substring(0,6) === 'WEBVTT') { cut(state, 6); - } - else { + } else { state.error = 'Invalid signature.'; } } @@ -4734,8 +4397,7 @@ var AblePlayerInstances = []; function eatArrow(state) { if (state.text.length < 3 \|\| state.text.substring(0,3) !== '-->') { state.error = 'Missing -->'; - } - else { + } else { cut(state, 3); } } @@ -4743,8 +4405,7 @@ var AblePlayerInstances = []; function eatSingleSpaceOrTab(state) { if (state.text[0] === '\t' \|\| state.text[0] === ' ') { cut(state, 1); - } - else { + } else { state.error = 'Missing space.'; } } @@ -4770,8 +4431,7 @@ var AblePlayerInstances = []; var nextEOL = state.text.indexOf('\n'); if (nextEOL === -1) { state.error = 'Missing EOL.'; - } - else { + } else { cut(state, nextEOL + 1); } } @@ -4779,10 +4439,9 @@ var AblePlayerInstances = []; function eatEmptyLines(state) { while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); - } - else { + } else { break; } } @@ -4793,11 +4452,10 @@ var AblePlayerInstances = []; var linesEaten = 0; while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); linesEaten += 1; - } - else { + } else { break; } } @@ -4814,7 +4472,9 @@ var AblePlayerInstances = []; } var timestamp = cut(state, nextSpace); - var results = /((\d\d):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(timestamp); + // The spec requires exactly 2 characters for minutes and seconds, and 2+ for hours, + // but some VTT generation creates 1 digit hour times (e.g. "1:02:24.000 --> 1:04:48.000") and it seems harmless to allow that here + var results = /((\d+):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(timestamp); if (!results) { state.error = 'Unable to parse timestamp'; @@ -4841,8 +4501,7 @@ var AblePlayerInstances = []; time += parseInt(seconds, 10); time += parseInt(results[6], 10) / 1000; - } - else { + } else { time += parseInt(results[7], 10); time += parseInt(results[8], 10) / 1000; } @@ -4856,23 +4515,13 @@ var AblePlayerInstances = []; AblePlayer.prototype.injectPlayerCode = function() { // create and inject surrounding HTML structure - // If IOS: - // If video: - // IOS does not support any of the player's functionality - // - everything plays in its own player - // Therefore, AblePlayer is not loaded & all functionality is disabled - // (this all determined. If this is IOS && video, this function is never called) - // If audio: - // HTML cannot be injected as a parent of the <audio> element - // It is therefore injected after the <audio> element - // This is only a problem in IOS 6 and earlier, - // & is a known bug, fixed in IOS 7 - - var thisObj, captionsContainer, prefsGroups, i; - thisObj = this; + // If iOS & video: + // iOS does not support any of the player's functionality - everything plays in its own player + // Therefore, AblePlayer is not loaded & all functionality is disabled + // (this all determined. If this is iOS && video, this function is never called) - // create three wrappers and wrap them around the media element. - // From inner to outer: + var captionsContainer; + // Wrappers, from inner to outer: // $mediaContainer - contains the original media element // $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions) // $ableWrapper - contains additional widgets (e.g., transcript window, sign window) @@ -4880,10 +4529,6 @@ var AblePlayerInstances = []; this.$ableDiv = this.$mediaContainer.wrap('<div class="able"></div>').parent(); this.$ableWrapper = this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(); this.$ableWrapper.addClass('able-skin-' + this.skin); - - this.$ableWrapper.css({ - 'width': this.playerWidth + 'px' - }); if (this.mediaType === 'video') { // youtube adds its own big play button @@ -4896,26 +4541,37 @@ var AblePlayerInstances = []; // add container that captions or description will be appended to // Note: new Jquery object must be assigned _after_ wrap, hence the temp captionsContainer variable - captionsContainer = $('<div>'); - if (this.mediaType === 'video') { - captionsContainer.addClass('able-vidcap-container'); - } - else if (this.mediaType === 'audio') { - captionsContainer.addClass('able-audcap-container'); - // hide this by default. It will be shown if captions are available + captionsContainer = $('<div>'); + if (this.mediaType === 'video') { + captionsContainer.addClass('able-vidcap-container'); + } else if (this.mediaType === 'audio') { + captionsContainer.addClass('able-audcap-container'); + // hide this by default. It will be shown if captions are available captionsContainer.addClass('captions-off'); } - this.injectPlayerControlArea(); // this may need to be injected after captions??? + this.injectPlayerControlArea(); // this may need to be injected after captions??? this.$captionsContainer = this.$mediaContainer.wrap(captionsContainer).parent(); - this.injectAlert(); + this.injectAlert(this.$ableDiv); this.injectPlaylist(); - + this.injectAudioPoster(); // Do this last, as it should be prepended to the top of this.$ableDiv // after everything else has prepended this.injectOffscreenHeading(); }; + AblePlayer.prototype.injectAudioPoster = function() { + if ( this.mediaType === 'audio' && this.hasPoster ) { + audioPoster = DOMPurify.sanitize(this.audioPoster); + audioPosterAlt = DOMPurify.sanitize(this.audioPosterAlt); + let audioPosterImg = document.createElement( 'img' ); + audioPosterImg.setAttribute( 'src', audioPoster ); + audioPosterImg.setAttribute( 'alt', audioPosterAlt ); + this.$audioWrapper = this.$playerDiv.wrap( '<div class="able-audio-wrapper">' ).parent(); + this.$audioWrapper.prepend( audioPosterImg ); + } + } + AblePlayer.prototype.injectOffscreenHeading = function () { // Inject an offscreen heading to the media container. @@ -4925,8 +4581,7 @@ var AblePlayerInstances = []; var headingType; if (this.playerHeadingLevel == '0') { // do NOT inject a heading (at author's request) - } - else { + } else { if (typeof this.playerHeadingLevel === 'undefined') { this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); // returns in integer 1-6 } @@ -4934,51 +4589,28 @@ var AblePlayerInstances = []; this.$headingDiv = $('<' + headingType + '>'); this.$ableDiv.prepend(this.$headingDiv); this.$headingDiv.addClass('able-offscreen'); - this.$headingDiv.text(this.tt.playerHeading); + this.$headingDiv.text( this.translate( 'playerHeading', 'Media player' ) ); } }; AblePlayer.prototype.injectBigPlayButton = function () { - var thisObj, svgData, buttonIcon, svgPath; - - thisObj = this; + var thisObj = this; this.$bigPlayButton = $('<button>', { 'class': 'able-big-play-button', 'aria-hidden': false, - 'aria-label': this.tt.play, + 'aria-label': this.translate( 'play', 'Play' ), + 'type': 'button', 'tabindex': 0 }); - if (this.iconType == 'svg') { - svgData = this.getSvgData('play'); - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - this.$bigPlayButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - this.$bigPlayButton.html(this.$bigPlayButton.html()); - } - else { // use icon font - this.$bigPlayIcon = $('<span>', { - 'class': 'icon-play', - }); - this.$bigPlayButton.append(this.$bigPlayIcon); - } + this.getIcon( this.$bigPlayButton, 'play' ); - this.$bigPlayButton.click(function (event) { - event.preventDefault(); + this.$bigPlayButton.on( 'click', function () { thisObj.handlePlay(); }); - + this.$mediaContainer.append(this.$bigPlayButton); }; @@ -4987,10 +4619,10 @@ var AblePlayerInstances = []; this.$playerDiv = $('<div>', { 'class' : 'able-player', 'role' : 'region', - 'aria-label' : this.mediaType + ' player' + 'aria-label' : ( 'audio' === this.mediaType ) ? this.translate( 'audioPlayer', 'audio player' ) : this.translate( 'videoPlayer', 'video player' ) }); - this.$playerDiv.addClass('able-'+this.mediaType); - if (this.hasPlaylist && this.showNowPlaying) { + this.$playerDiv.addClass('able-' + this.mediaType); + if (this.hasPlaylist && this.showNowPlaying) { this.$nowPlayingDiv = $('<div>',{ 'class' : 'able-now-playing', 'aria-live' : 'assertive', @@ -5019,8 +4651,9 @@ var AblePlayerInstances = []; this.$speed = $('<span>',{ 'class' : 'able-speed', - 'aria-live' : 'assertive' - }).text(this.tt.speed + ': 1x'); + 'aria-live' : 'assertive', + 'aria-atomic' : 'true' + }).text(this.translate( 'speed', 'Speed' ) + ': 1x'); this.$status = $('<span>',{ 'class' : 'able-status', @@ -5031,16 +4664,15 @@ var AblePlayerInstances = []; this.$statusBarDiv.append(this.$timer, this.$speed, this.$status); if (this.showNowPlaying) { this.$playerDiv.append(this.$nowPlayingDiv, this.$controllerDiv, this.$statusBarDiv); - } - else { + } else { this.$playerDiv.append(this.$controllerDiv, this.$statusBarDiv); } - if (this.mediaType === 'video') { - // the player controls go after the media & captions + + if (this.mediaType === 'video') { + // the player controls go after the media & captions this.$ableDiv.append(this.$playerDiv); - } - else { - // the player controls go before the media & captions + } else { + // the player controls go before the media & captions this.$ableDiv.prepend(this.$playerDiv); } }; @@ -5052,9 +4684,9 @@ var AblePlayerInstances = []; 'class': 'able-descriptions' }); // Add ARIA so description will be announced by screen readers - // Later (in description.js > showDescription()), + // Later (in description.js > showDescription()), // if browser supports Web Speech API and this.descMethod === 'browser' - // these attributes will be removed + // these attributes will be removed this.$descDiv.attr({ 'aria-live': 'assertive', 'aria-atomic': 'true' @@ -5066,54 +4698,114 @@ var AblePlayerInstances = []; }; AblePlayer.prototype.getDefaultWidth = function(which) { - + let viewportMaxwidth = window.innerWidth; // return default width of resizable elements // these values are somewhat arbitrary, but seem to result in good usability // if users disagree, they can resize (and resposition) them if (which === 'transcript') { - return 450; - } - else if (which === 'sign') { - return 400; + return ( viewportMaxwidth <= 450 ) ? viewportMaxwidth : 450; + } else if (which === 'sign') { + return ( viewportMaxwidth <= 400 ) ? viewportMaxwidth : 400; } }; + /** + * Reposition draggable windows when switched into fullscreen. + * + * @param {string} which 'transcript' or 'sign'. + / + AblePlayer.prototype.rePositionDraggableWindow = function (which) { + + let preferences, $window; + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + console.log( $window ); + if ( which === 'transcript' && $window ) { + if (typeof preferences.transcript !== 'undefined') { + this.prevTranscriptPosition = preferences.transcript; + } + $window.css({ + 'top': 0, + 'left': 0 + }); + } else if ( 'sign' === which && $window ) { + if (typeof preferences.sign !== 'undefined') { + this.prevSignPosition = preferences.sign; + } + $window.css({ + 'top': 0, + 'right': 0, + 'left': 'auto' + }); + } + } + AblePlayer.prototype.positionDraggableWindow = function (which, width) { // which is either 'transcript' or 'sign' + var preferences, preferencePos, $window, windowPos, viewportWidth, windowWidth; - var cookie, cookiePos, $window, dragged, windowPos, currentWindowPos, firstTime, zIndex; - - cookie = this.getCookie(); + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + if ( ! $window ) { + return; + } if (which === 'transcript') { - $window = this.$transcriptArea; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.transcript; + if (typeof preferences.transcript !== 'undefined') { + preferencePos = preferences.transcript; } - } - else if (which === 'sign') { - $window = this.$signWindow; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.sign; + if ( this.prevTranscriptPosition ) { + preferencePos = this.prevTranscriptPosition; + this.prevTranscriptPosition = false; + } + } else if (which === 'sign') { + if (typeof preferences.sign !== 'undefined') { + preferencePos = preferences.sign; + } + if ( this.prevSignPosition ) { + preferencePos = this.prevSignPosition; + this.prevSignPosition = false; } } - if (typeof cookiePos !== 'undefined' && !($.isEmptyObject(cookiePos))) { - // position window using stored values from cookie + if (typeof preferencePos !== 'undefined' && !($.isEmptyObject(preferencePos))) { + // position window using stored values from preferences $window.css({ - 'position': cookiePos['position'], - 'width': cookiePos['width'], - 'z-index': cookiePos['zindex'] + 'position': preferencePos['position'], + 'width': preferencePos['width'], + 'z-index': preferencePos['zindex'] }); - if (cookiePos['position'] === 'absolute') { + if (preferencePos['position'] === 'absolute') { $window.css({ - 'top': cookiePos['top'], - 'left': cookiePos['left'] + 'top': preferencePos['top'], + 'left': preferencePos['left'] }); + // Check whether the window is above the top of the viewport. + topPosition = $window.offset().top; + leftPosition = $window.offset().left; + viewportWidth = window.innerWidth; + windowWidth = $window.width(); + if ( topPosition < 0 ) { + $window.css({ + 'top': preferencePos['top'] - topPosition + }); + } + // If draggable window is off screen to the left. + if ( leftPosition < 0 && ! this.restoringAfterFullscreen ) { + console.log( leftPosition ); + $window.css({ + 'left': preferencePos['left'] - leftPosition + }); + } + // If draggable window is off screen to the right. + if ( viewportWidth - leftPosition < 30 ) { + $window.css({ + 'left': viewportWidth - windowWidth + }); + } } - // since cookie is not page-specific, z-index needs may vary across different pages + // since preferences are not page-specific, z-index needs may vary across different pages this.updateZIndex(which); - } - else { + } else { // position window using default values windowPos = this.getOptimumPosition(which, width); if (typeof width === 'undefined') { @@ -5145,37 +4837,30 @@ var AblePlayerInstances = []; // else if there is room the left of the player, position element there // else position element beneath player - var gap, position, ableWidth, ableHeight, ableOffset, ableTop, ableLeft, - windowWidth, otherWindowWidth, zIndex; + var gap, position, ableWidth, ableOffset, ableLeft, windowWidth, otherWindowWidth; if (typeof targetWidth === 'undefined') { targetWidth = this.getDefaultWidth(targetWindow); } gap = 5; // number of pixels to preserve between Able Player objects - position = []; // position, top, left ableWidth = this.$ableDiv.width(); - ableHeight = this.$ableDiv.height(); ableOffset = this.$ableDiv.offset(); - ableTop = ableOffset.top; ableLeft = ableOffset.left; windowWidth = $(window).width(); otherWindowWidth = 0; // width of other visiable draggable windows will be added to this if (targetWindow === 'transcript') { - if (typeof this.$signWindow !== 'undefined') { - if (this.$signWindow.is(':visible')) { - otherWindowWidth = this.$signWindow.width() + gap; - } + // If placing the transcript window, check position of sign window first. + if (typeof this.$signWindow !== 'undefined' && (this.$signWindow.is(':visible'))) { + otherWindowWidth = this.$signWindow.width() + gap; } - } - else if (targetWindow === 'sign') { - if (typeof this.$transcriptArea !== 'undefined') { - if (this.$transcriptArea.is(':visible')) { - otherWindowWidth = this.$transcriptArea.width() + gap; - } + } else if (targetWindow === 'sign') { + // If placing the sign window, check position of transcript window first. + if (typeof this.$transcriptArea !== 'undefined' && (this.$transcriptArea.is(':visible'))) { + otherWindowWidth = this.$transcriptArea.width() + gap; } } if (targetWidth < (windowWidth - (ableLeft + ableWidth + gap + otherWindowWidth))) { @@ -5183,14 +4868,12 @@ var AblePlayerInstances = []; position[0] = 'absolute'; position[1] = 0; position[2] = ableWidth + otherWindowWidth + gap; - } - else if (targetWidth + gap < ableLeft) { + } else if (targetWidth + gap < ableLeft) { // there's room to the right of $ableDiv position[0] = 'absolute'; position[1] = 0; position[2] = ableLeft - targetWidth - gap; - } - else { + } else { // position element below $ableDiv position[0] = 'relative'; // no need to define top, left, or z-index @@ -5198,32 +4881,31 @@ var AblePlayerInstances = []; return position; }; - AblePlayer.prototype.injectAlert = function () { - + AblePlayer.prototype.injectAlert = function ($container) { // inject two alerts, one visible for all users and one for screen reader users only - - var top; - this.$alertBox = $('<div role="alert"></div>'); this.$alertBox.addClass('able-alert'); this.$alertBox.hide(); - this.$alertBox.appendTo(this.$ableDiv); - if (this.mediaType == 'audio') { - top = '-10'; - } - else { - // position just below top of video by default - // but this will change after video player is fully sized - // see control.js > resizePlayer() - top = '10'; - } - this.$alertBox.css({ - top: top + 'px' + + var $alertText = $( '<span></span>' ); + $alertText.appendTo(this.$alertBox); + + var $alertDismiss = $('<button type="button"></button>' ); + $alertDismiss.attr( 'aria-label', this.translate( 'dismissButton', 'Dismiss' ) ); + $alertDismiss.text( '×' ); + $alertDismiss.appendTo(this.$alertBox); + + $alertDismiss.on( 'click', function(e) { + $(this).parent('div').hide(); }); - this.$srAlertBox = $('<div role="alert"></div>'); - this.$srAlertBox.addClass('able-screenreader-alert'); - this.$srAlertBox.appendTo(this.$ableDiv); + this.$alertBox.appendTo($container); + + if ( ! this.$srAlertBox ) { + this.$srAlertBox = $('<div role="alert"></div>'); + this.$srAlertBox.addClass('able-screenreader-alert'); + this.$srAlertBox.appendTo($container); + } }; AblePlayer.prototype.injectPlaylist = function () { @@ -5243,9 +4925,8 @@ var AblePlayerInstances = []; // 'which' parameter is either 'captions', 'chapters', 'prefs', 'transcript-window' or 'sign-window' // 'tracks', if provided, is a list of tracks to be used as menu items - var thisObj, $menu, includeMenuItem, prefCats, i, $menuItem, prefCat, whichPref, - hasDefault, track, windowOptions, whichPref, whichMenu, - $thisItem, $prevItem, $nextItem; + var thisObj, $menu, includeMenuItem, i, $menuItem, prefCat, whichPref, hasDefault, track, + windowOptions, $thisItem, $prevItem, $nextItem, hasDescription, hasTranscript; thisObj = this; @@ -5263,22 +4944,26 @@ var AblePlayerInstances = []; if (which === 'prefs') { if (this.prefCats.length > 1) { for (i = 0; i < this.prefCats.length; i++) { + prefCat = this.prefCats[i]; + hasDescription = ( thisObj.hasDescTracks \|\| thisObj.hasOpenDesc \|\| thisObj.hasClosedDesc ) ? true : false; + hasTranscript = ( thisObj.transcriptType === null ) ? false : true; + + // If this player does not have descriptions or transcripts, do not output that option preferences. + if ( prefCat === 'descriptions' && ! hasDescription \|\| prefCat === 'transcript' && ! hasTranscript ) { + continue; + } $menuItem = $('<li></li>',{ 'role': 'menuitem', 'tabindex': '-1' }); - prefCat = this.prefCats[i]; if (prefCat === 'captions') { - $menuItem.text(this.tt.prefMenuCaptions); - } - else if (prefCat === 'descriptions') { - $menuItem.text(this.tt.prefMenuDescriptions); - } - else if (prefCat === 'keyboard') { - $menuItem.text(this.tt.prefMenuKeyboard); - } - else if (prefCat === 'transcript') { - $menuItem.text(this.tt.prefMenuTranscript); + $menuItem.text( this.translate( 'prefMenuCaptions', 'Captions' ) ); + } else if (prefCat === 'descriptions') { + $menuItem.text( this.translate( 'prefMenuDescriptions', 'Descriptions' ) ); + } else if (prefCat === 'keyboard') { + $menuItem.text( this.translate( 'prefMenuKeyboard', 'Keyboard' ) ); + } else if (prefCat === 'transcript') { + $menuItem.text( this.translate( 'prefMenuTranscript', 'Transcript' ) ); } $menuItem.on('click',function() { whichPref = $(this).text(); @@ -5286,14 +4971,11 @@ var AblePlayerInstances = []; thisObj.setFullscreen(false); if (whichPref === thisObj.tt.prefMenuCaptions) { thisObj.captionPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuDescriptions) { + } else if (whichPref === thisObj.tt.prefMenuDescriptions) { thisObj.descPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuKeyboard) { + } else if (whichPref === thisObj.tt.prefMenuKeyboard) { thisObj.keyboardPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuTranscript) { + } else if (whichPref === thisObj.tt.prefMenuTranscript) { thisObj.transcriptPrefsDialog.show(); } thisObj.closePopups(); @@ -5302,22 +4984,19 @@ var AblePlayerInstances = []; $menu.append($menuItem); } this.$prefsButton.attr('data-prefs-popup','menu'); - } - else if (this.prefCats.length == 1) { + } else if (this.prefCats.length == 1) { // only 1 category, so don't create a popup menu. // Instead, open dialog directly when user clicks Prefs button this.$prefsButton.attr('data-prefs-popup',this.prefCats[0]); } - } - else if (which === 'captions' \|\| which === 'chapters') { + } else if (which === 'captions' \|\| which === 'chapters') { hasDefault = false; for (i = 0; i < tracks.length; i++) { track = tracks[i]; - if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { - includeMenuItem = false; - } - else { - includeMenuItem = true; + if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { + includeMenuItem = false; + } else { + includeMenuItem = true; } if (includeMenuItem) { $menuItem = $('<li></li>',{ @@ -5328,16 +5007,14 @@ var AblePlayerInstances = []; if (track.def && this.prefCaptions == 1) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); - } + } // Get a label using track data if (which == 'captions') { $menuItem.text(track.label); $menuItem.on('click',this.getCaptionClickFunction(track)); - } - else if (which == 'chapters') { + } else if (which == 'chapters') { $menuItem.text(this.flattenCueForCaption(track) + ' - ' + this.formatSecondsAsColonTime(track.start)); $menuItem.on('click',this.getChapterClickFunction(track.start)); } @@ -5349,31 +5026,29 @@ var AblePlayerInstances = []; $menuItem = $('<li></li>',{ 'role': 'menuitemradio', 'tabindex': '-1', - }).text(this.tt.captionsOff); + }).text( this.translate( 'captionsOff', 'Captions off' ) ); if (this.prefCaptions === 0) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); } $menuItem.on('click',this.getCaptionOffFunction()); $menu.append($menuItem); } - } - else if (which === 'transcript-window' \|\| which === 'sign-window') { + } else if (which === 'transcript-window' \|\| which === 'sign-window') { windowOptions = []; windowOptions.push({ 'name': 'move', - 'label': this.tt.windowMove + 'label': this.translate( 'windowMove', 'Move' ) }); windowOptions.push({ 'name': 'resize', - 'label': this.tt.windowResize + 'label': this.translate( 'windowResize', 'Resize' ) }); windowOptions.push({ 'name': 'close', - 'label': this.tt.windowClose + 'label': this.translate( 'windowClose', 'Close' ) }); for (i = 0; i < windowOptions.length; i++) { $menuItem = $('<li></li>',{ @@ -5382,7 +5057,7 @@ var AblePlayerInstances = []; 'data-choice': windowOptions[i].name }); $menuItem.text(windowOptions[i].label); - $menuItem.on('click mousedown',function(e) { + $menuItem.on('click',function(e) { e.stopPropagation(); if (typeof e.button !== 'undefined' && e.button !== 0) { // this was a mouse click (if click is triggered by keyboard, e.button is undefined) @@ -5405,61 +5080,50 @@ var AblePlayerInstances = []; if ($menu.find('li[lang=' + this.captionLang + ']')) { // a track exists for the default language. Check that item in the menu $menu.find('li[lang=' + this.captionLang + ']').attr('aria-checked','true'); - } - else { + } else { // check the last item (captions off) $menu.find('li').last().attr('aria-checked','true'); } - } - else if (which === 'chapters') { + } else if (which === 'chapters') { if ($menu.find('li:contains("' + this.defaultChapter + '")')) { $menu.find('li:contains("' + this.defaultChapter + '")').attr('aria-checked','true').addClass('able-focus'); - } - else { + } else { $menu.find('li').first().attr('aria-checked','true').addClass('able-focus'); } } // add keyboard handlers for navigating within popups $menu.on('keydown',function (e) { - - whichMenu = $(this).attr('id').split('-')[1]; + $thisItem = $(this).find('li:focus'); if ($thisItem.is(':first-child')) { // this is the first item in the menu $prevItem = $(this).find('li').last(); // wrap to bottom $nextItem = $thisItem.next(); - } - else if ($thisItem.is(':last-child')) { + } else if ($thisItem.is(':last-child')) { // this is the last Item $prevItem = $thisItem.prev(); $nextItem = $(this).find('li').first(); // wrap to top - } - else { + } else { $prevItem = $thisItem.prev(); $nextItem = $thisItem.next(); } - if (e.which === 9) { // Tab + if (e.key === 'Tab') { if (e.shiftKey) { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else { + $prevItem.trigger('focus').addClass('able-focus'); + } else { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); + $nextItem.trigger('focus').addClass('able-focus'); } - } - else if (e.which === 40 \|\| e.which === 39) { // down or right arrow + } else if (e.key === 'ArrowDown' \|\| e.key === 'ArrowRight') { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - else if (e.which == 38 \|\| e.which === 37) { // up or left arrow + $nextItem.trigger('focus').addClass('able-focus'); + } else if (e.key == 'ArrowUp' \|\| e.key === 'ArrowLeft') { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else if (e.which === 32 \|\| e.which === 13) { // space or enter - $thisItem.click(); - } - else if (e.which === 27) { // Escape + $prevItem.trigger('focus').addClass('able-focus'); + } else if (e.key === ' ' \|\| e.key === 'Enter') { + $thisItem.trigger( 'click' ); + } else if (e.key === 'Escape') { $thisItem.removeClass('able-focus'); thisObj.closePopups(); e.stopPropagation; @@ -5476,7 +5140,7 @@ var AblePlayerInstances = []; if (this.chaptersPopup && this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); - this.$chaptersButton.attr('aria-expanded','false').focus(); + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); } if (this.captionsPopup && this.captionsPopup.is(':visible')) { this.captionsPopup.hide(); @@ -5498,15 +5162,15 @@ var AblePlayerInstances = []; },100); } if (this.$volumeSlider && this.$volumeSlider.is(':visible')) { - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeButton.attr('aria-expanded', 'false').focus(); + this.$volumeSlider.hide().attr('aria-hidden','true'); + this.$volumeButton.attr('aria-expanded', 'false').trigger('focus'); } if (this.$transcriptPopup && this.$transcriptPopup.is(':visible')) { - this.hidingPopup = true; + this.hidingPopup = true; this.$transcriptPopup.hide(); // restore menu items to their original state this.$transcriptPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$transcriptPopupButton.attr('aria-expanded','false').focus(); + this.$transcriptPopupButton.attr('aria-expanded','false').trigger('focus'); // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; @@ -5516,7 +5180,7 @@ var AblePlayerInstances = []; this.$signPopup.hide(); // restore menu items to their original state this.$signPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$signPopupButton.attr('aria-expanded','false').focus(); + this.$signPopupButton.attr('aria-expanded','false').trigger('focus'); } }; @@ -5526,10 +5190,7 @@ var AblePlayerInstances = []; // parameter 'which' is passed if refreshing content of an existing popup ('captions' or 'chapters') // If which is undefined, automatically setup 'captions', 'chapters', and 'prefs' popups // However, only setup 'transcript-window' and 'sign-window' popups if passed as value of which - var popups, thisObj, hasDefault, i, j, - tracks, track, $trackButton, $trackLabel, - radioName, radioId, $menu, $menuItem, - prefCats, prefCat, prefLabel; + var popups, thisObj, i, tracks; popups = []; if (typeof which === 'undefined') { @@ -5556,33 +5217,26 @@ var AblePlayerInstances = []; thisObj = this; for (var i=0; i<popups.length; i++) { var popup = popups[i]; - hasDefault = false; if (popup == 'prefs') { this.prefsPopup = this.createPopup('prefs'); - } - else if (popup == 'captions') { + } else if (popup == 'captions') { if (typeof this.captionsPopup === 'undefined' \|\| !this.captionsPopup) { this.captionsPopup = this.createPopup('captions',this.captions); } - } - else if (popup == 'chapters') { + } else if (popup == 'chapters') { if (this.selectedChapters) { tracks = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { tracks = this.chapters[0].cues; - } - else { + } else { tracks = []; } if (typeof this.chaptersPopup === 'undefined' \|\| !this.chaptersPopup) { this.chaptersPopup = this.createPopup('chapters',tracks); } - } - else if (popup == 'transcript-window') { + } else if (popup == 'transcript-window') { return this.createPopup('transcript-window'); - } - else if (popup == 'sign-window') { + } else if (popup == 'sign-window') { return this.createPopup('sign-window'); } } @@ -5591,101 +5245,99 @@ var AblePlayerInstances = []; AblePlayer.prototype.provideFallback = function() { - // provide fallback in case of a critical error building the player - // to test, set data-test-fallback to either of the following values: - // 1 = emulate failure to build Able Player - // 2 = emulate browser that doesn't support HTML5 media + // provide fallback in case of a critical error building the player + // to test, set data-test-fallback to either of the following values: + // 1 = emulate failure to build Able Player + // 2 = emulate browser that doesn't support HTML5 media var i, $fallback; - if (this.usingFallback) { - // fallback has already been implemented. + if (this.usingFallback) { + // fallback has already been implemented. // stopgap to prevent this function from executing twice on the same media element - return; - } - else { - this.usingFallback = true; + return; + } else { + this.usingFallback = true; } - if (!this.testFallback) { - // this is not a test. - // an actual error has resulted in this function being called. - // use scenario 1 - this.testFallback = 1; + if (!this.testFallback) { + // this is not a test. + // an actual error has resulted in this function being called. + // use scenario 1 + this.testFallback = 1; } - if (typeof this.$media === 'undefined') { - // this function has been called prior to initialize.js > reinitialize() + if (typeof this.$media === 'undefined') { + // this function has been called prior to initialize.js > reinitialize() // before doing anything, need to create the jQuery media object - this.$media = $(this.media); - } - - // get/assign an id for the media element - if (this.$media.attr('id')) { - this.mediaId = this.$media.attr('id'); + this.$media = $(this.media); } - else { + + // get/assign an id for the media element + if (this.$media.attr('id')) { + this.mediaId = this.$media.attr('id'); + } else { this.mediaId = 'media' + Math.floor(Math.random() 1000000000).toString(); - } - - // check whether element has nested fallback content - this.hasFallback = false; - if (this.$media.children().length) { - i = 0; - while (i < this.$media.children().length && !this.hasFallback) { - if (!(this.$media.children()[i].tagName === 'SOURCE' \|\| - this.$media.children()[i].tagName === 'TRACK')) { - // this element is something other than <source> or <track> - this.hasFallback = true; + } + + // check whether element has nested fallback content + this.hasFallback = false; + if (this.$media.children().length) { + i = 0; + while (i < this.$media.children().length && !this.hasFallback) { + if (!(this.$media.children()[i].tagName === 'SOURCE' \|\| + this.$media.children()[i].tagName === 'TRACK')) { + // this element is something other than <source> or <track> + this.hasFallback = true; } - i++; + i++; } } - if (!this.hasFallback) { - // the HTML code does not include any nested fallback content - // inject our own - // NOTE: this message is not translated, since fallback may be needed - // due to an error loading the translation file - // This will only be needed on very rare occasions, so English is ok. - $fallback = $('<p>').text('Media player unavailable.'); - this.$media.append($fallback); + if (!this.hasFallback) { + // the HTML code does not include any nested fallback content + // inject our own + // NOTE: this message is not translated, since fallback may be needed + // due to an error loading the translation file + // This will only be needed on very rare occasions, so English is ok. + $fallback = $('<p>').text('Media player unavailable.'); + this.$media.append($fallback); } - // get height and width attributes, if present + // get height and width attributes, if present // and add them to a style attribute - if (this.$media.attr('width')) { - this.$media.css('width',this.$media.attr('width') + 'px'); + if (this.$media.attr('width')) { + this.$media.css('width',this.$media.attr('width') + 'px'); } - if (this.$media.attr('height')) { - this.$media.css('height',this.$media.attr('height') + 'px'); + if (this.$media.attr('height')) { + this.$media.css('height',this.$media.attr('height') + 'px'); } - // Remove data-able-player attribute - this.$media.removeAttr('data-able-player'); + // Remove data-able-player attribute + this.$media.removeAttr('data-able-player'); // Add controls attribute (so browser will add its own controls) - this.$media.prop('controls',true); + this.$media.prop('controls',true); - if (this.testFallback == 2) { + if (this.testFallback == 2) { - // emulate browser failure to support HTML5 media by changing the media tag name - // browsers should display the supported content that's nested inside + // emulate browser failure to support HTML5 media by changing the media tag name + // browsers should display the supported content that's nested inside $(this.$media).replaceWith($('<foobar id="foobar-' + this.mediaId + '">')); - this.$newFallbackElement = $('#foobar-' + this.mediaId); - - // append all children from the original media - if (this.$media.children().length) { - i = this.$media.children().length - 1; - while (i >= 0) { - this.$newFallbackElement.prepend($(this.$media.children()[i])); - i--; + this.$newFallbackElement = $('#foobar-' + this.mediaId); + + // append all children from the original media + if (this.$media.children().length) { + i = this.$media.children().length - 1; + while (i >= 0) { + this.$newFallbackElement.prepend($(this.$media.children()[i])); + i--; } } - if (!this.hasFallback) { + if (!this.hasFallback) { // inject our own fallback content, defined above this.$newFallbackElement.append($fallback); } } - return; + return; }; AblePlayer.prototype.calculateControlLayout = function () { @@ -5699,7 +5351,7 @@ var AblePlayerInstances = []; // 3 = Bottom right (legacy skin only) // Each key contains an array of control names to put in that section. - var controlLayout, volumeSupported, playbackSupported, totalButtonWidth, numA11yButtons; + var controlLayout, playbackSupported, numA11yButtons; controlLayout = []; controlLayout[0] = []; @@ -5722,8 +5374,7 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[0].push('previous'); controlLayout[0].push('next'); - } - else if (this.skin == '2020') { + } else { controlLayout[0].push('previous'); controlLayout[0].push('next'); } @@ -5735,8 +5386,7 @@ var AblePlayerInstances = []; controlLayout[2].push('slower'); controlLayout[2].push('faster'); } - } - else { + } else { playbackSupported = false; } @@ -5745,8 +5395,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('captions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('captions'); } } @@ -5754,28 +5403,25 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('sign'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('sign'); } } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { if (this.hasOpenDesc \|\| this.hasClosedDesc) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('descriptions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('descriptions'); } } } - if (this.transcriptType === 'popup' && !(this.hideTranscriptButton)) { + if (this.transcriptType !== null && !(this.hideTranscriptButton)) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('transcript'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('transcript'); } } @@ -5783,8 +5429,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('chapters'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('chapters'); } } @@ -5801,32 +5446,26 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[3].push('preferences'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('preferences'); } - if (this.mediaType === 'video' && this.allowFullscreen) { + if (this.mediaType === 'video' && this.allowFullscreen && this.nativeFullscreenSupported() ) { if (this.skin === 'legacy') { controlLayout[3].push('fullscreen'); - } - else { + } else { controlLayout[1].push('fullscreen'); } } if (this.browserSupportsVolume()) { - volumeSupported = true; // defined in case we decide to move volume button elsewhere this.volumeButton = 'volume-' + this.getVolumeName(this.volume); if (this.skin === 'legacy') { controlLayout[1].push('volume'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('volume'); } - } - else { - volumeSupported = false; + } else { this.volume = false; } return controlLayout; @@ -5842,12 +5481,10 @@ var AblePlayerInstances = []; // some controls are aligned on the left, and others on the right var thisObj, baseSliderWidth, controlLayout, numSections, - i, j, k, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, $pipeImg, - svgData, svgPath, control, - $buttonLabel, $buttonImg, buttonImgSrc, buttonTitle, $newButton, iconClass, buttonIcon, - buttonUse, buttonText, position, buttonHeight, buttonWidth, buttonSide, controllerWidth, - tooltipId, tooltipY, tooltipX, tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, - captionLabel, popupMenuId; + i, j, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, control, + buttonTitle, $newButton, buttonText, position, buttonHeight, + buttonWidth, buttonSide, controllerWidth, tooltipId, tooltipY, tooltipX, + tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, captionLabel, popupMenuId; thisObj = this; @@ -5865,33 +5502,36 @@ var AblePlayerInstances = []; }).hide(); this.$controllerDiv.append(this.$tooltipDiv); - if (this.skin == '2020') { + if (this.skin == '2020') { // add a full-width seek bar $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); this.$controllerDiv.append($sliderDiv); - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); } + // add a full-width seek bar + let $controlRow = $('<div class="able-control-row"></div>'); + this.$controllerDiv.append($controlRow); + for (i = 0; i < numSections; i++) { controls = controlLayout[i]; if ((i % 2) === 0) { // even keys on the left $controllerSpan = $('<div>',{ 'class': 'able-left-controls' }); - } - else { // odd keys on the right + } else { // odd keys on the right $controllerSpan = $('<div>',{ 'class': 'able-right-controls' }); } - this.$controllerDiv.append($controllerSpan); + $controlRow.append($controllerSpan); for (j=0; j<controls.length; j++) { control = controls[j]; if (control === 'seek') { $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); $controllerSpan.append($sliderDiv); if (typeof this.duration === 'undefined' \|\| this.duration === 0) { // set arbitrary starting duration, and change it when duration is known @@ -5899,53 +5539,17 @@ var AblePlayerInstances = []; // also set elapsed to 0 this.elapsed = 0; } - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - else if (control === 'pipe') { + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + } else if (control === 'pipe') { $pipe = $('<span>', { 'tabindex': '-1', - 'aria-hidden': 'true' + 'aria-hidden': 'true', + 'class': 'able-pipe', }); - if (this.iconType === 'font') { - $pipe.addClass('icon-pipe'); - } - else { - $pipeImg = $('<img>', { - src: this.rootPath + 'button-icons/' + this.iconColor + '/pipe.png', - alt: '', - role: 'presentation' - }); - $pipe.append($pipeImg); - } + $pipe.append('\|'); $controllerSpan.append($pipe); - } - else { + } else { // this control is a button - if (control === 'volume') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + this.volumeButton + '.png'; - } - else if (control === 'fullscreen') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/fullscreen-expand.png'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/turtle.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/slower.png'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/rabbit.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/faster.png'; - } - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + control + '.png'; - } buttonTitle = this.getButtonTitle(control); // icomoon documentation recommends the following markup for screen readers: @@ -5963,7 +5567,6 @@ var AblePlayerInstances = []; $newButton = $('<div>',{ 'role': 'button', 'tabindex': '0', - 'aria-label': buttonTitle, 'class': 'able-button-handler-' + control }); @@ -5977,16 +5580,14 @@ var AblePlayerInstances = []; 'aria-controls': popupMenuId, 'aria-haspopup': 'menu', 'aria-expanded': 'false' - }); - } - else if (this.prefCats.length === 1) { + }); + } else if (this.prefCats.length === 1) { // Prefs button will trigger a dialog $newButton.attr({ 'aria-haspopup': 'dialog' }); } - } - else if (control === 'volume') { + } else if (control === 'volume') { popupMenuId = this.mediaId + '-volume-slider'; // volume slider popup is not a menu or a dialog // therefore, using aria-expanded rather than aria-haspopup to communicate properties/state @@ -6002,130 +5603,23 @@ var AblePlayerInstances = []; } } } - if (this.iconType === 'font') { - if (control === 'volume') { - iconClass = 'icon-' + this.volumeButton; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-turtle'; - } - else { - iconClass = 'icon-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-rabbit'; - } - else { - iconClass = 'icon-faster'; - } - } - else { - iconClass = 'icon-' + control; - } - buttonIcon = $('<span>',{ - 'class': iconClass, - 'aria-hidden': 'true' - }); - $newButton.append(buttonIcon); + var getControl = control; + if ( control === 'faster' && this.speedIcons === 'animals' ) { + getControl = 'rabbit'; } - else if (this.iconType === 'svg') { - - /* - // Unused option for adding SVG: - // Use <use> element to link to button-icons/able-icons.svg - // Advantage: SVG file can be cached - // Disadvantage: Not supported by Safari 6, IE 6-11, or Edge 12 - // Instead, adding <svg> element within each <button> - if (control === 'volume') { - iconClass = 'svg-' + this.volumeButton; - } - else if (control === 'fullscreen') { - iconClass = 'svg-fullscreen-expand'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-turtle'; - } - else { - iconClass = 'svg-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-rabbit'; - } - else { - iconClass = 'svg-faster'; - } - } - else { - iconClass = 'svg-' + control; - } - buttonIcon = $('<svg>',{ - 'class': iconClass - }); - buttonUse = $('<use>',{ - 'xlink:href': this.rootPath + 'button-icons/able-icons.svg#' + iconClass - }); - buttonIcon.append(buttonUse); - / - var svgData; - if (control === 'volume') { - svgData = this.getSvgData(this.volumeButton); - } - else if (control === 'fullscreen') { - svgData = this.getSvgData('fullscreen-expand'); - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('turtle'); - } - else { - svgData = this.getSvgData('slower'); - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('rabbit'); - } - else { - svgData = this.getSvgData('faster'); - } - } - else { - svgData = this.getSvgData(control); - } - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - $newButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - $newButton.html($newButton.html()); + if ( control === 'slower' && this.speedIcons === 'animals' ) { + getControl = 'turtle'; } - else { - // use images - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); + if ( control === 'volume' ) { + this.getIcon( $newButton, this.volumeButton ); + } else { + if ( 'fullscreen' === getControl ) { + getControl = ( this.fullscreen ) ? 'fullscreen-collapse' : 'fullscreen-expand'; + } + this.getIcon( $newButton, getControl ); } - // add the visibly-hidden label for screen readers that don't support aria-label on the button - var $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(buttonTitle); - $newButton.append($buttonLabel); + + this.setText($newButton,buttonTitle); // add an event listener that displays a tooltip on mouseenter or focus $newButton.on('mouseenter focus',function(e) { @@ -6133,73 +5627,63 @@ var AblePlayerInstances = []; // since the same tooltip div is used, it's location just changes. clearTimeout(tooltipTimerId); - var buttonText = $(this).attr('aria-label'); + buttonText = $(this).attr('aria-label'); // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); + position = $(this).position(); + buttonHeight = $(this).height(); + buttonWidth = $(this).width(); // position() is expressed using top and left (of button); // add right (of button) too, for convenience - var controllerWidth = thisObj.$controllerDiv.width(); + controllerWidth = thisObj.$controllerDiv.width(); position.right = controllerWidth - position.left - buttonWidth; - // The following formula positions tooltip above the button - // var tooltipY = position.top - buttonHeight - 15; - - // The following formula positions tooltip below the button + // The following formula positions tooltip below the button // which allows the tooltip to be hoverable as per WCAG 2.x SC 1.4.13 - // without obstructing the seekbar - var tooltipY = position.top + buttonHeight + 5; + // without obstructing the seekbar + tooltipY = position.top + buttonHeight + 5; if ($(this).parent().hasClass('able-right-controls')) { // this control is on the right side - var buttonSide = 'right'; - } - else { + buttonSide = 'right'; + } else { // this control is on the left side - var buttonSide = 'left'; + buttonSide = 'left'; } // populate tooltip, then calculate its width before showing it - var tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); + tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); // center the tooltip horizontally over the button if (buttonSide == 'left') { - var tooltipX = position.left - tooltipWidth/2; + tooltipX = position.left - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: tooltipX + 'px', right: '', top: tooltipY + 'px' }; - } - else { - var tooltipX = position.right - tooltipWidth/2; + } else { + tooltipX = position.right - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: '', right: tooltipX + 'px', top: tooltipY + 'px' }; } - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); + tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { - // hide tooltip (original line of code) - // AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - - // The above line was replaced with the following block - // in order to meet WCAG 2.x SC 1.4.13 // (keep the tooltip visible if user hovers over it) - // This causes unwanted side effects if tooltips are positioned above the buttons - // as the persistent tooltip obstructs the seekbar, - // blocking users from being able to move a pointer from a button to the seekbar - // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons + // This causes unwanted side effects if tooltips are positioned above the buttons + // as the persistent tooltip obstructs the seekbar, + // blocking users from being able to move a pointer from a button to the seekbar + // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons // clear existing timeout before reassigning variable clearTimeout(tooltipTimerId); @@ -6216,29 +5700,27 @@ var AblePlayerInstances = []; thisObj.$tooltipDiv.on('mouseleave blur', function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }); - - }); + + }); }); if (control === 'captions') { if (!this.prefCaptions \|\| this.prefCaptions !== 1) { // captions are available, but user has them turned off if (this.captions.length > 1) { - captionLabel = this.tt.captions; - } - else { - captionLabel = this.tt.showCaptions; + captionLabel = this.translate( 'captions', 'Captions' ); + } else { + captionLabel = this.translate( 'showCaptions', 'Show captions' ); } $newButton.addClass('buttonOff').attr('title',captionLabel); $newButton.attr('aria-pressed', 'false'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { if (!this.prefDesc \|\| this.prefDesc !== 1) { // user prefer non-audio described version // Therefore, load media without description // Description can be toggled on later with this button - $newButton.addClass('buttonOff').attr('title',this.tt.turnOnDescriptions); + $newButton.addClass('buttonOff').attr( 'title', this.translate( 'turnOnDescriptions', 'Turn on descriptions' ) ); } } @@ -6247,59 +5729,48 @@ var AblePlayerInstances = []; // create variables of buttons that are referenced throughout the AblePlayer object if (control === 'play') { this.$playpauseButton = $newButton; - } - else if (control == 'previous') { + } else if (control == 'previous') { this.$prevButton = $newButton; // if player is being rebuilt because user clicked the Prev button // return focus to that (newly built) button if (this.buttonWithFocus == 'previous') { - this.$prevButton.focus(); + this.$prevButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control == 'next') { + } else if (control == 'next') { this.$nextButton = $newButton; // if player is being rebuilt because user clicked the Next button // return focus to that (newly built) button if (this.buttonWithFocus == 'next') { - this.$nextButton.focus(); + this.$nextButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control === 'captions') { + } else if (control === 'captions') { this.$ccButton = $newButton; - } - else if (control === 'sign') { + } else if (control === 'sign') { this.$signButton = $newButton; // gray out sign button if sign language window is not active if (!(this.$signWindow.is(':visible'))) { this.$signButton.addClass('buttonOff'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { this.$descButton = $newButton; // button will be enabled or disabled in description.js > initDescription() - } - else if (control === 'mute') { + } else if (control === 'mute') { this.$muteButton = $newButton; - } - else if (control === 'transcript') { + } else if (control === 'transcript') { this.$transcriptButton = $newButton; // gray out transcript button if transcript is not active if (!(this.$transcriptDiv.is(':visible'))) { - this.$transcriptButton.addClass('buttonOff').attr('title',this.tt.showTranscript); + this.$transcriptButton.addClass('buttonOff').attr( 'title', this.translate( 'showTranscript', 'Show transcript' ) ); } - } - else if (control === 'fullscreen') { + } else if (control === 'fullscreen') { this.$fullscreenButton = $newButton; - } - else if (control === 'chapters') { + } else if (control === 'chapters') { this.$chaptersButton = $newButton; - } - else if (control === 'preferences') { + } else if (control === 'preferences') { this.$prefsButton = $newButton; - } - else if (control === 'volume') { + } else if (control === 'volume') { this.$volumeButton = $newButton; } } @@ -6329,191 +5800,7 @@ var AblePlayerInstances = []; } // Update state-based display of controls. - this.refreshControls('init'); - }; - - AblePlayer.prototype.useSvg = function () { - - // Modified from IcoMoon.io svgxuse - // @copyright Copyright (c) 2016 IcoMoon.io - // @license Licensed under MIT license - // See https://github.com/Keyamoon/svgxuse - // @version 1.1.16 - - var cache = Object.create(null); // holds xhr objects to prevent multiple requests - var checkUseElems, - tid; // timeout id - var debouncedCheck = function () { - clearTimeout(tid); - tid = setTimeout(checkUseElems, 100); - }; - var unobserveChanges = function () { - return; - }; - var observeChanges = function () { - var observer; - window.addEventListener('resize', debouncedCheck, false); - window.addEventListener('orientationchange', debouncedCheck, false); - if (window.MutationObserver) { - observer = new MutationObserver(debouncedCheck); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - attributes: true - }); - unobserveChanges = function () { - try { - observer.disconnect(); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - } catch (ignore) {} - }; - } - else { - document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); - unobserveChanges = function () { - document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - }; - } - }; - var xlinkNS = 'http://www.w3.org/1999/xlink'; - checkUseElems = function () { - var base, - bcr, - fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. - hash, - i, - Request, - inProgressCount = 0, - isHidden, - url, - uses, - xhr; - if (window.XMLHttpRequest) { - Request = new XMLHttpRequest(); - if (Request.withCredentials !== undefined) { - Request = XMLHttpRequest; - } - else { - Request = XDomainRequest \|\| undefined; - } - } - if (Request === undefined) { - return; - } - function observeIfDone() { - // If done with making changes, start watching for chagnes in DOM again - inProgressCount -= 1; - if (inProgressCount === 0) { // if all xhrs were resolved - observeChanges(); // watch for changes to DOM - } - } - function attrUpdateFunc(spec) { - return function () { - if (cache[spec.base] !== true) { - spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); - } - }; - } - function onloadFunc(xhr) { - return function () { - var body = document.body; - var x = document.createElement('x'); - var svg; - xhr.onload = null; - x.innerHTML = xhr.responseText; - svg = x.getElementsByTagName('svg')[0]; - if (svg) { - svg.setAttribute('aria-hidden', 'true'); - svg.style.position = 'absolute'; - svg.style.width = 0; - svg.style.height = 0; - svg.style.overflow = 'hidden'; - body.insertBefore(svg, body.firstChild); - } - observeIfDone(); - }; - } - function onErrorTimeout(xhr) { - return function () { - xhr.onerror = null; - xhr.ontimeout = null; - observeIfDone(); - }; - } - unobserveChanges(); // stop watching for changes to DOM - // find all use elements - uses = document.getElementsByTagName('use'); - for (i = 0; i < uses.length; i += 1) { - try { - bcr = uses[i].getBoundingClientRect(); - } catch (ignore) { - // failed to get bounding rectangle of the use element - bcr = false; - } - url = uses[i].getAttributeNS(xlinkNS, 'href').split('#'); - base = url[0]; - hash = url[1]; - isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; - if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { - // the use element is empty - // if there is a reference to an external SVG, try to fetch it - // use the optional fallback URL if there is no reference to an external SVG - if (fallback && !base.length && hash && !document.getElementById(hash)) { - base = fallback; - } - if (base.length) { - // schedule updating xlink:href - xhr = cache[base]; - if (xhr !== true) { - // true signifies that prepending the SVG was not required - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - if (xhr === undefined) { - xhr = new Request(); - cache[base] = xhr; - xhr.onload = onloadFunc(xhr); - xhr.onerror = onErrorTimeout(xhr); - xhr.ontimeout = onErrorTimeout(xhr); - xhr.open('GET', base); - xhr.send(); - inProgressCount += 1; - } - } - } - else { - if (!isHidden) { - if (cache[base] === undefined) { - // remember this URL if the use element was not empty and no request was sent - cache[base] = true; - } - else if (cache[base].onload) { - // if it turns out that prepending the SVG is not necessary, - // abort the in-progress xhr. - cache[base].abort(); - cache[base].onload = undefined; - cache[base] = true; - } - } - } - } - uses = ''; - inProgressCount += 1; - observeIfDone(); - }; -/ - // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. - window.addEventListener('load', function winLoad() { - window.removeEventListener('load', winLoad, false); // to prevent memory leaks - tid = setTimeout(checkUseElems, 0); - }, false); -/ + this.refreshControls(); }; AblePlayer.prototype.cuePlaylistItem = function(sourceIndex) { @@ -6522,19 +5809,7 @@ var AblePlayerInstances = []; // NOTE: Swapping source for audio description is handled elsewhere; // see description.js > swapDescription() - / - // Decided against preventing a reload of the current item in the playlist. - // If it's clickable, users should be able to click on it and expect something to happen. - // Leaving here though in case it's determined to be desirable. - if (sourceIndex === this.playlistItemIndex) { - // user has requested the item that's currently playing - // just ignore the request - return; - } - this.playlistItemIndex = sourceIndex; - / - - var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, sources, s, i, $newSource, nowPlayingSpan; + var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, nowPlayingSpan; var thisObj = this; @@ -6542,9 +5817,8 @@ var AblePlayerInstances = []; if (this.initializing) { // this is the first track - user hasn't pressed play yet // do nothing. - } - else { - if (this.playerCreated) { + } else { + if (this.playerCreated) { // remove the old this.deletePlayer('playlist'); } @@ -6553,19 +5827,18 @@ var AblePlayerInstances = []; // set swappingSrc; needs to be true within recreatePlayer(), called below this.swappingSrc = true; - // if a new playlist item is being requested, and playback has already started, - // it should be ok to play automatically, regardless of how it was requested - if (this.startedPlaying) { - this.okToPlay = true; - } - else { - this.okToPlay = false; + // if a new playlist item is being requested, and playback has already started, + // it should be ok to play automatically, regardless of how it was requested + if (this.startedPlaying) { + this.okToPlay = true; + } else { + this.okToPlay = false; } - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; // Determine appropriate player to play this media $newItem = this.$playlist.eq(sourceIndex); @@ -6575,16 +5848,14 @@ var AblePlayerInstances = []; this.youTubeDescId = this.getYouTubeId($newItem.attr('data-youtube-desc-id')); } newPlayer = 'youtube'; - } - else if (this.hasAttr($newItem,'data-vimeo-id')) { + } else if (this.hasAttr($newItem,'data-vimeo-id')) { this.vimeoId = this.getVimeoId($newItem.attr('data-vimeo-id')); if (this.hasAttr($newItem,'data-vimeo-desc-id')) { this.vimeoDescId = this.getVimeoId($newItem.attr('data-vimeo-desc-id')); } newPlayer = 'vimeo'; - } - else { - newPlayer = 'html5'; + } else { + newPlayer = 'html5'; } if (newPlayer === 'youtube') { if (prevPlayer === 'html5') { @@ -6594,9 +5865,8 @@ var AblePlayerInstances = []; } this.$media.hide(); } - } - else { - // the new player is not youtube + } else { + // the new player is not youtube this.youTubeId = false; if (prevPlayer === 'youtube') { // unhide the media element @@ -6623,21 +5893,42 @@ var AblePlayerInstances = []; var $sourceSpans = $newItem.children('span.able-source'); if ($sourceSpans.length) { $sourceSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src')) { - // this is the only required attribute - var $newSource = $('<source>',{ - 'src': $(this).attr('data-src') - }); - if (thisObj.hasAttr($(this),'data-type')) { - $newSource.attr('type',$(this).attr('data-type')); - } - if (thisObj.hasAttr($(this),'data-desc-src')) { - $newSource.attr('data-desc-src',$(this).attr('data-desc-src')); - } - if (thisObj.hasAttr($(this),'data-sign-src')) { - $newSource.attr('data-sign-src',$(this).attr('data-sign-src')); + const $this = $(this); + + // Check if the required data-src attribute exists + if (thisObj.hasAttr($this, "data-src")) { + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <source> element with the sanitized src + const $newSource = $("<source>", { src: sanitizedSrc }); + + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-type", + "data-desc-src", + "data-sign-src", + ]; + + // Process optional attributes + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + const attrValue = $this.attr(attr); // Get the attribute value + const sanitizedValue = DOMPurify.sanitize(attrValue); // Sanitize the value + + // If the attribute ends with "-src", validate the protocol + if (attr.endsWith("-src") && validate.isProtocolSafe(sanitizedValue)) { + $newSource.attr(attr, sanitizedValue); // Add the sanitized and validated attribute + } else if (!attr.endsWith("-src")) { + $newSource.attr(attr, sanitizedValue); // Add sanitized value for non-src attributes + } + } + }); + + // Append the new <source> element to the media object + thisObj.$media.append($newSource); } - thisObj.$media.append($newSource); } }); } @@ -6647,27 +5938,37 @@ var AblePlayerInstances = []; if ($trackSpans.length) { // for each element in $trackSpans, create a new <track> element $trackSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src') && - thisObj.hasAttr($(this),'data-kind') && - thisObj.hasAttr($(this),'data-srclang')) { + const $this = $(this); + if (thisObj.hasAttr($this, "data-src") && thisObj.hasAttr($this, "data-kind") && thisObj.hasAttr($this, "data-srclang")) { // all required attributes are present - var $newTrack = $('<track>',{ - 'src': $(this).attr('data-src'), - 'kind': $(this).attr('data-kind'), - 'srclang': $(this).attr('data-srclang') - }); - if (thisObj.hasAttr($(this),'data-label')) { - $newTrack.attr('label',$(this).attr('data-label')); - } - if (thisObj.hasAttr($(this),'data-desc')) { - $newTrack.attr('data-desc',$(this).attr('data-desc')); + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <track> element with the sanitized src + const $newTrack = $("<track>", { + src: sanitizedSrc, + kind: $this.attr("data-kind"), + srclang: $this.attr("data-srclang"), + }); + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-label", + "data-desc", + "data-default", + ]; + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + $newTrack.attr(attr, DOMPurify.sanitize($this.attr(attr))); + } + }); + // Append the new <track> element to the media object + thisObj.$media.append($newTrack); } - thisObj.$media.append($newTrack); } }); } - itemTitle = $newItem.text(); + itemTitle = DOMPurify.sanitize( $newItem.text() ); if (this.hasAttr($newItem,'lang')) { itemLang = $newItem.attr('lang'); } @@ -6675,18 +5976,18 @@ var AblePlayerInstances = []; this.$sources = this.$media.find('source'); // recreate player, informed by new attributes and track elements - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; + return; } - this.recreatePlayer().then(function() { + this.recreatePlayer().then(function() { // update playlist to indicate which item is playing thisObj.$playlist.removeClass('able-current') .children('button').removeAttr('aria-current'); thisObj.$playlist.eq(sourceIndex).addClass('able-current') - .children('button').attr('aria-current','true'); - + .children('button').attr('aria-current','true'); + // update Now Playing div if (thisObj.showNowPlaying === true) { if (typeof thisObj.$nowPlayingDiv !== 'undefined') { @@ -6702,56 +6003,48 @@ var AblePlayerInstances = []; // if thisObj.swappingSrc is true, media will autoplay when ready if (thisObj.initializing) { // this is the first track - user hasn't pressed play yet thisObj.swappingSrc = false; - } - else { + } else { if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } - } - else if (thisObj.player === 'youtube') { - thisObj.okToPlay = true; + } else if (thisObj.player === 'youtube') { + thisObj.okToPlay = true; } } thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed - }); + thisObj.playerCreated = true; // remains true until browser is refreshed + }); }; AblePlayer.prototype.deletePlayer = function(context) { - // remove player components that need to be rebuilt - // after swapping media sources that have different durations - // or explicitly declared data-desc attributes + // remove player components that need to be rebuilt + // after swapping media sources that have different durations + // or explicitly declared data-desc attributes - // Context is one of the following: - // playlist - called from cuePlaylistItem() + // Context is one of the following: + // playlist - called from cuePlaylistItem() // swap-desc-html - called from swapDescription with this.player == 'html' - // swap-desc-youtube - called from swapDescription with this.player == 'youtube' - // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' + // swap-desc-youtube - called from swapDescription with this.player == 'youtube' + // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' - if (this.player === 'youtube' && this.youTubePlayer) { - this.youTubePlayer.destroy(); + if (this.player === 'youtube' && this.youTubePlayer) { + this.youTubePlayer.destroy(); } - if (this.player === 'vimeo' && this.vimeoPlayer) { - this.vimeoPlayer.destroy(); + if (this.player === 'vimeo' && this.vimeoPlayer) { + this.vimeoPlayer.destroy(); } - -/ TODO - Investigate: when is this needed? - // remove previous video's attributes and child elements from media element - this.$media.removeAttr('poster width height'); - this.$media.empty(); -/ // Empty elements that will be rebuilt this.$controllerDiv.empty(); // this.$statusBarDiv.empty(); // this.$timer.empty(); this.$elapsedTimeContainer.empty().text('0:00'); // span.able-elapsedTime this.$durationContainer.empty(); // span.able-duration - + // Remove popup windows and modal dialogs; these too will be rebuilt if (this.$signWindow) { this.$signWindow.remove(); @@ -6760,125 +6053,81 @@ var AblePlayerInstances = []; this.$transcriptArea.remove(); } $('.able-modal-dialog').remove(); - - // Remove caption and description wrappers + + // Remove caption and description wrappers if (this.$captionsWrapper) { this.$captionsWrapper.remove(); } - if (this.$descDiv) { - this.$descDiv.remove(); + if (this.$descDiv) { + this.$descDiv.remove(); } - + // reset key variables this.hasCaptions = false; this.hasChapters = false; - this.hasDescTracks = false; + this.hasDescTracks = false; this.hasOpenDesc = false; - this.hasClosedDesc = false; + this.hasClosedDesc = false; this.captionsPopup = null; this.chaptersPopup = null; this.transcriptType = null; - this.playerDeleted = true; // will reset to false in recreatePlayer() + this.playerDeleted = true; // will reset to false in recreatePlayer() }; AblePlayer.prototype.getButtonTitle = function(control) { if (control === 'playpause') { - return this.tt.play; - } - else if (control === 'play') { - return this.tt.play; - } - else if (control === 'pause') { - return this.tt.pause; - } - else if (control === 'restart') { - return this.tt.restart; - } - else if (control === 'previous') { - return this.tt.prevTrack; - } - else if (control === 'next') { - return this.tt.nextTrack; - } - else if (control === 'rewind') { - return this.tt.rewind; - } - else if (control === 'forward') { - return this.tt.forward; - } - else if (control === 'captions') { + return this.translate( 'play', 'Play' ); + } else if (control === 'play') { + return this.translate( 'play', 'Play' ); + } else if (control === 'pause') { + return this.translate( 'pause', 'Pause' ); + } else if (control === 'restart') { + return this.translate( 'restart', 'Restart' ); + } else if (control === 'previous') { + return this.translate( 'prevTrack', 'Previous track' ); + } else if (control === 'next') { + return this.translate( 'nextTrack', 'Next track' ); + } else if (control === 'rewind') { + return this.translate( 'rewind', 'Rewind' ); + } else if (control === 'forward') { + return this.translate( 'forward', 'Forward' ); + } else if (control === 'captions') { if (this.captions.length > 1) { - return this.tt.captions; - } - else { - if (this.captionsOn) { - return this.tt.hideCaptions; - } - else { - return this.tt.showCaptions; - } - } - } - else if (control === 'descriptions') { - if (this.descOn) { - return this.tt.turnOffDescriptions; - } - else { - return this.tt.turnOnDescriptions; - } - } - else if (control === 'transcript') { - if (this.$transcriptDiv.is(':visible')) { - return this.tt.hideTranscript; - } - else { - return this.tt.showTranscript; - } - } - else if (control === 'chapters') { - return this.tt.chapters; - } - else if (control === 'sign') { - return this.tt.sign; - } - else if (control === 'volume') { - return this.tt.volume; - } - else if (control === 'faster') { - return this.tt.faster; - } - else if (control === 'slower') { - return this.tt.slower; - } - else if (control === 'preferences') { - return this.tt.preferences; - } - else if (control === 'help') { - // return this.tt.help; - } - else if (control === 'fullscreen') { - if (!this.fullscreen) { - return this.tt.enterFullscreen; - } - else { - return this.tt.exitFullscreen; - } - } - else { + return this.translate( 'captions', 'Captions' ); + } else { + return (this.captionsOn) ? this.translate( 'hideCaptions', 'Hide captions' ) : this.translate( 'showCaptions', 'Show captions' ); + } + } else if (control === 'descriptions') { + return (this.descOn) ? this.translate( 'turnOffDescriptions', 'Turn off descriptions' ) : this.translate( 'turnOnDescriptions', 'Turn on descriptions' ); + } else if (control === 'transcript') { + return (this.$transcriptDiv.is(':visible')) ? this.translate( 'hideTranscript', 'Hide transcript' ) : this.translate( 'showTranscript', 'Show transcript' ); + } else if (control === 'chapters') { + return this.translate( 'chapters', 'Chapters' ); + } else if (control === 'sign') { + return this.translate( 'sign', 'Sign language' ); + } else if (control === 'volume') { + return this.translate( 'volume', 'Volume' ); + } else if (control === 'faster') { + return this.translate( 'faster', 'Faster' ); + } else if (control === 'slower') { + return this.translate( 'slower', 'Slower' ); + } else if (control === 'preferences') { + return this.translate( 'preferences', 'Preferences' ); + } else if (control === 'fullscreen') { + return ( !this.fullscreen ) ? this.translate( 'enterFullScreen', 'Enter full screen' ) : this.translate( 'exitFullScreen', 'Exit full screen' ); + } else { // there should be no other controls, but just in case: // return the name of the control with first letter in upper case // ultimately will need to get a translated label from this.tt if (this.debug) { console.log('Found an untranslated label: ' + control); } - return control.charAt(0).toUpperCase() + control.slice(1); + return this.capitalizeFirstLetter( control ); } }; - - })(jQuery); /* @@ -6898,11 +6147,16 @@ var preProcessing = { * @returns {string} - The VTT content with processed tags. / transformCSSClasses: function (vttContent) { + // This function should only be passed one cue at a time. + // Throw an error if the string checked is more than 1000 characters. + if ( vttContent.length > 1000 ) { + throw new Error( "Input too long" ); + } return vttContent.replace( /<(v\|c\|b\|i\|u\|lang\|ruby)\.([\w\.]+)([^>])>/g, function (_, tag, cssClasses, otherAttrs) { - var classAttr = cssClasses.split(".").join(" "); - return "<" + tag + ' class="' + classAttr + '"' + otherAttrs + ">"; + var classAttr = cssClasses.replace(/\./g, " "); + return `<${tag} class="${classAttr}"${otherAttrs}>`; } ); }, @@ -6923,10 +6177,14 @@ var preProcessing = { }, /** - * Transforms <v> tags by adding a title attribute with the concatenated text and retaining other attributes. + * Transforms <v> tags by extracting any non-attribute text as a `title` attribute, + * retains existing attributes (except class), and preserves the class attribute if present. + * Example: <v John class="foo" data-x="y"> becomes <v title="John" data-x="y" class="foo"> + * + * @function * @memberof preProcessing - * @param {string} content - The content with processed <lang> tags. - * @returns {string} - The content with <v> tags transformed. + * @param {string} content - The string content containing <v> tags to process. + * @returns {string} The content with <v> tags transformed to include a title attribute and preserved attributes. / transformVTags: function (content) { return content.replace(/<v\s+([^>]?)>/g, function (_, tagAttributes) { @@ -6985,24 +6243,33 @@ var postProcessing = { return vttContent.replace( /<c class="([\w\s]+)">/g, function (_, classNames) { - var classes = classNames.split(" ").join("."); + var classes = classNames.replace(/ /g, "."); return "<c." + classes + ">"; } ); }, /** - * Post-processes <v> tags by converting class attributes to dot-separated class names. + * * Post-processes <v> tags by converting class attributes, no matter where found in the attribute order, to dot-separated class names. + * For example, <v class="foo bar" title="John"> becomes <v.foo.bar title="John">. + * Removes the class attribute and appends other attributes after the class names. + * + * @function * @memberof postProcessing * @param {string} vttContent - The VTT content to be processed. * @returns {string} - The VTT content with processed <v> tags. / postprocessVTag: function (vttContent) { return vttContent.replace( - /<v class="([\w\s]+)"([^>])>/g, - function (_, classNames, otherAttrs) { - var classes = classNames.split(" ").join("."); - return "<v." + classes + otherAttrs + ">"; + /<v([^>])class="([\w\s]+)"([^>])>/g, + function (_, beforeClass, classNames, afterClass) { + var classes = classNames.trim().split(/\s+/).join("."); + // Rebuild the tag: <v.{classes}{other attributes}> + // Remove class="..." from attributes + var attrs = (beforeClass + afterClass) + .replace(/\sclass="[\w\s]+"/, "") + .trim(); + return "<v." + classes + (attrs ? " " + attrs : "") + ">"; } ); }, @@ -7024,7 +6291,7 @@ var postProcessing = { }; /* - * Preprocesses, sanitizes and post-processes VTT content. + * Preprocesses, sanitizes and post-processes VTT content as well as other utility functions. * @namespace validate / var validate = { @@ -7055,8 +6322,9 @@ var validate = { var processedLangTags = postProcessing.postprocessLangTag(processedVTags); var arrowReplaced = processedLangTags.replace(/-->/g, "-->"); + var timestampTagReplaced = arrowReplaced.replace(/<([\d:.]+)>/g, '<$1>'); - var finalContent = arrowReplaced.replace( + var finalContent = timestampTagReplaced.replace( /<\/v>/g, function (match, offset) { return originalVttContent.indexOf(match, offset) !== -1 ? match : ""; @@ -7091,6 +6359,17 @@ var validate = { return validate.postProcessVttContent(sanitizedVttContent, vttContent); }, + // Utility validation functions + isProtocolSafe: function (url) { + //creates a new URL object for analysis to check if the protocol is http or https + //returns true if there is a match false otherwise + try { + const parsedUrl = new URL(url, window.location.origin); // Resolve relative URLs + return ["http:", "https:"].includes(parsedUrl.protocol); // Allow only HTTP and HTTPS + } catch (e) { + return false; // Invalid URL + } + }, }; // Export the object for use in other files @@ -7103,22 +6382,13 @@ if (typeof module !== "undefined" && module.exports) { // Loads files referenced in track elements, and performs appropriate setup. // For example, captions and text descriptions. // This will be called whenever the player is recreated. - // Added in v2.2.23: Also handles YouTube caption tracks AblePlayer.prototype.setupTracks = function () { - var thisObj, - deferred, - promise, - loadingPromises, - loadingPromise, - i, - tracks, - track, - kind; + var thisObj, deferred, promise, loadingPromises, loadingPromise, i, tracks, track, kind; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); loadingPromises = []; @@ -7140,20 +6410,17 @@ if (typeof module !== "undefined" && module.exports) { } for (i = 0; i < tracks.length; i++) { track = tracks[i]; - kind = track.kind; + kind = ( track.kind ) ? track.kind : 'subtitles'; if (!track.src) { if (thisObj.usingYouTubeCaptions \|\| thisObj.usingVimeoCaptions) { // skip all the hullabaloo and go straight to setupCaptions thisObj.setupCaptions(track); - } else { - // Nothing to load! - // Skip this track; move on to next i } continue; } - var trackSrc = track.src; - loadingPromise = this.loadTextObject(track.src); // resolves with src, trackText + var trackSrc = track.src; + loadingPromise = this.loadTextObject(trackSrc); loadingPromises.push( loadingPromise.catch(function (src) { console.warn("Failed to load captions track from " + src); @@ -7161,35 +6428,31 @@ if (typeof module !== "undefined" && module.exports) { ); loadingPromise.then( (function (track, kind) { - var trackSrc = track.src; + trackSrc = track.src; var trackLang = track.language; var trackLabel = track.label; var trackDesc = track.desc; - return function (trackSrc, trackText) { - // these are the two vars returned from loadTextObject - - var trackContents = trackText; - var cues = thisObj.parseWebVTT(trackSrc, trackContents).cues; + return function (data) { + var cues = thisObj.parseWebVTT(data).cues; if (thisObj.hasVts) { - // setupVtsTracks() is in vts.js thisObj.setupVtsTracks( kind, trackLang, trackDesc, trackLabel, trackSrc, - trackContents + data.text ); } - if (kind === "captions" \|\| kind === "subtitles") { + if (kind === 'captions' \|\| kind === 'subtitles') { thisObj.setupCaptions(track, cues); - } else if (kind === "descriptions") { + } else if (kind === 'descriptions') { thisObj.setupDescriptions(track, cues); - } else if (kind === "chapters") { + } else if (kind === 'chapters') { thisObj.setupChapters(track, cues); - } else if (kind === "metadata") { - thisObj.setupMetadata(track, cues); + } else if (kind === 'metadata') { + thisObj.setupMetadata(cues); } }; })(track, kind) @@ -7215,30 +6478,16 @@ if (typeof module !== "undefined" && module.exports) { // cues - array with startTime, endTime, and payload // desc - Boolean, true if track includes a data-desc attribute - var thisObj, - deferred, - promise, - captionTracks, - altCaptionTracks, - trackLang, - trackLabel, - isDefault, - forDesc, - hasDefault, - hasTrackInDefLang, - trackFound, - i, - j, - capLabel, - inserted; + var thisObj, deferred, promise, trackLang, trackLabel, isDefault, forDesc, + hasDefault, hasTrackInDefLang, trackFound, i; thisObj = this; hasDefault = false; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.$tracks = this.$media.find("track"); + this.$tracks = this.$media.find('track'); this.tracks = []; // only includes tracks that do NOT have data-desc this.altTracks = []; // only includes tracks that DO have data-desc @@ -7255,31 +6504,30 @@ if (typeof module !== "undefined" && module.exports) { this.usingYouTubeCaptions = false; // create object from HTML5 tracks this.$tracks.each(function (index, element) { - if ($(this).attr("kind") === "captions") { + if ($(this).attr('kind') === 'captions') { thisObj.hasCaptionsTrack = true; - } else if ($(this).attr("kind") === "descriptions") { + } else if ($(this).attr('kind') === 'descriptions') { thisObj.hasClosedDesc = true; } // srcLang should always be included with <track>, but HTML5 spec doesn't require it // if not provided, assume track is the same language as the default player language - if ($(this).attr("srclang")) { - trackLang = $(this).attr("srclang"); + if ($(this).attr('srclang')) { + trackLang = $(this).attr('srclang'); } else { trackLang = thisObj.lang; } - if ($(this).attr("label")) { - trackLabel = $(this).attr("label"); + if ($(this).attr('label')) { + trackLabel = $(this).attr('label'); } else { trackLabel = thisObj.getLanguageName(trackLang); } - if (typeof $(this).attr("default") !== "undefined" && !hasDefault) { + if (typeof $(this).attr('default') !== 'undefined' && !hasDefault) { isDefault = true; hasDefault = true; } else if (trackLang === thisObj.lang) { // this track is in the default lang of the player - // save this for later // if there is no other default track specified // this will be the default hasTrackInDefLang = true; @@ -7300,8 +6548,8 @@ if (typeof module !== "undefined" && module.exports) { } if (forDesc) { thisObj.altTracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -7309,8 +6557,8 @@ if (typeof module !== "undefined" && module.exports) { }); } else { thisObj.tracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -7326,16 +6574,16 @@ if (typeof module !== "undefined" && module.exports) { trackFound = false; i = 0; while (i < thisObj.tracks.length && !trackFound) { - if (thisObj.tracks[i]["language"] === thisObj.lang) { - thisObj.tracks[i]["def"] = true; + if (thisObj.tracks[i]['language'] === thisObj.lang) { + thisObj.tracks[i]['def'] = true; trackFound = true; } i++; } } else { // use the first track - thisObj.tracks[0]["def"] = true; - thisObj.captionLang = thisObj.tracks[0]["language"]; + thisObj.tracks[0]['def'] = true; + thisObj.captionLang = thisObj.tracks[0]['language']; } } // Remove 'default' attribute from all <track> elements @@ -7349,8 +6597,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.$tracks.length \|\| !this.hasCaptionsTrack) { // this media has no track elements // if this is a youtube or vimeo player, check there for captions/subtitles - if (this.player === "youtube") { - this.getYouTubeCaptionTracks(this.youTubeId).then(function () { + if (this.player === 'youtube') { + this.getYouTubeCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingYouTubeCaptions = true; if (thisObj.$captionsWrapper) { @@ -7359,7 +6607,7 @@ if (typeof module !== "undefined" && module.exports) { } deferred.resolve(); }); - } else if (this.player === "vimeo") { + } else if (this.player === 'vimeo') { this.getVimeoCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingVimeoCaptions = true; @@ -7387,7 +6635,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setupCaptions = function (track, cues) { // Setup player for display of captions (one track at a time) - var thisObj, captions, inserted, i, capLabel; + var inserted, i, capLabel; // Insert track into captions array // in its proper alphabetical sequence by label @@ -7453,8 +6701,8 @@ if (typeof module !== "undefined" && module.exports) { this.captionsOn = false; } } - if (this.mediaType === "audio" && this.captionsOn) { - this.$captionsContainer.removeClass("captions-off"); + if (this.mediaType === 'audio' && this.captionsOn) { + this.$captionsContainer.removeClass('captions-off'); } if ( @@ -7464,17 +6712,17 @@ if (typeof module !== "undefined" && module.exports) { ) { // captionsWrapper either doesn't exist, or exists in an orphaned state // Either way, it needs to be rebuilt... - this.$captionsDiv = $("<div>", { + this.$captionsDiv = $('<div>', { class: "able-captions", }); - this.$captionsWrapper = $("<div>", { - class: "able-captions-wrapper", - "aria-hidden": "true", + this.$captionsWrapper = $('<div>', { + class: 'able-captions-wrapper', + 'aria-hidden': 'true', }).hide(); - if (this.prefCaptionsPosition === "below") { - this.$captionsWrapper.addClass("able-captions-below"); + if (this.prefCaptionsPosition === 'below') { + this.$captionsWrapper.addClass('able-captions-below'); } else { - this.$captionsWrapper.addClass("able-captions-overlay"); + this.$captionsWrapper.addClass('able-captions-overlay'); } this.$captionsWrapper.append(this.$captionsDiv); this.$captionsContainer.append(this.$captionsWrapper); @@ -7505,19 +6753,19 @@ if (typeof module !== "undefined" && module.exports) { }); }; - AblePlayer.prototype.setupMetadata = function (track, cues, trackDesc) { - if (this.metaType === "text") { + AblePlayer.prototype.setupMetadata = function (cues) { + if (this.metaType === 'text') { // Metadata is only supported if data-meta-div is provided // The player does not display metadata internally if (this.metaDiv) { - if ($("#" + this.metaDiv)) { + if ($('#' + this.metaDiv)) { // container exists - this.$metaDiv = $("#" + this.metaDiv); + this.$metaDiv = $('#' + this.metaDiv); this.hasMeta = true; this.meta = cues; } } - } else if (this.metaType === "selector") { + } else if (this.metaType === 'selector') { this.hasMeta = true; this.visibleSelectors = []; this.meta = cues; @@ -7534,76 +6782,76 @@ if (typeof module !== "undefined" && module.exports) { / var deferred, promise, thisObj, $tempDiv; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; // create a temp div for holding data - $tempDiv = $("<div>", { - style: "display:none", + $tempDiv = $('<div>', { + style: 'display:none', }); // Fetch the content manually so it can be sanitized - $.ajax({ - url: src, - dataType: "text", - success: function (data) { - // Sanitize the fetched content - var sanitizedTrackText = validate.sanitizeVttContent(data); - - // Load the sanitized content into the $tempDiv - $tempDiv.html(sanitizedTrackText); - - // Resolve the promise with the sanitized content - deferred.resolve(src, sanitizedTrackText); - - $tempDiv.remove(); - }, - error: function (req, status, error) { - if (thisObj.debug) { - console.log("error reading file " + src + ": " + status); - } - deferred.reject(src); - $tempDiv.remove(); - }, - }); + fetch(src) + .then( response => { + + return response.text(); + }) + .then( vtt => { + // Split the input on double line breaks to handle each cue individually. + var preParsed = vtt.split(/\r?\n\s\r?\n/); + var lines = '', line; + + preParsed.forEach((l) => { + // Sanitize each line. + line = validate.sanitizeVttContent(l); + lines += line + "\n\n"; + }); + // Load the sanitized content into the $tempDiv + $tempDiv.html(lines); + // Resolve the promise with the sanitized content + let data = { 'src': src, 'text': lines }; + deferred.resolve(data); + $tempDiv.remove(); + }) + .catch( error => { + if (thisObj.debug) { + console.log( "error reading file " + src + ": " + error ); + } + deferred.reject(src); + $tempDiv.remove(); + }); return promise; }; })(jQuery); - (function ($) { + AblePlayer.prototype.initYouTubePlayer = function () { - var thisObj, deferred, promise, youTubeId, googleApiPromise, json; + var thisObj, deferred, promise, youTubeId; thisObj = this; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.youTubePlayerReady = false; + this.youTubePlayerReady = false; // if a described version is available && user prefers desription // init player using the described version - if (this.youTubeDescId && this.prefDesc) { - youTubeId = this.youTubeDescId; - } - else { - youTubeId = this.youTubeId; - } + youTubeId = (this.youTubeDescId && this.prefDesc) ? this.youTubeDescId : this.youTubeId; + this.activeYouTubeId = youTubeId; if (AblePlayer.youTubeIframeAPIReady) { // Script already loaded and ready. thisObj.finalizeYoutubeInit().then(function() { deferred.resolve(); }); - } - else { + } else { // Has another player already started loading the script? If so, abort... if (!AblePlayer.loadingYouTubeIframeAPI) { - $.getScript('https://www.youtube.com/iframe_api').fail(function () { - deferred.fail(); + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + console.log( 'YouTube API loaded' ); }); } @@ -7620,71 +6868,54 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.finalizeYoutubeInit = function () { // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - var deferred, promise, thisObj, containerId, ccLoadPolicy, videoDimensions, autoplay; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - thisObj = this; - containerId = this.mediaId + '_youtube'; this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // NOTE: Tried the following in place of the above in January 2016 - // because in some cases two videos were being added to the DOM - // However, once v2.2.23 was fairly stable, unable to reproduce that problem - // so maybe it's not an issue. This is preserved here temporarily, just in case it's needed... - // thisObj.$mediaContainer.html($('<div>').attr('id', containerId)); // cc_load_policy: // 0 - show captions depending on user's preference on YouTube // 1 - show captions by default, even if the user has turned them off - // IMPORTANT: This must* be set to 1 or some browsers - // fail to load any texttracks (observed in Chrome, not in Firefox) + // IMPORTANT: This must be set to 1 or some browsers + // fail to load any text tracks (observed in Chrome, not in Firefox) ccLoadPolicy = 1; - - if (this.okToPlay) { - autoplay = 1; - } - else { - autoplay = 0; - } + autoplay = (this.okToPlay) ? 1 : 0; // Documentation https://developers.google.com/youtube/player_parameters - if (typeof this.captionLang == 'undefined') { + if (typeof this.captionLang == 'undefined') { // init using the default player lang - this.captionLang = this.lang; + this.captionLang = this.lang; } this.youTubePlayer = new YT.Player(containerId, { videoId: this.activeYouTubeId, host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', playerVars: { autoplay: autoplay, - enablejsapi: 1, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: ccLoadPolicy, + controls: 0, // no controls, using our own disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, playsinline: this.playsInline, - start: this.startTime, - controls: 0, // no controls, using our own - cc_load_policy: ccLoadPolicy, - cc_lang_pref: this.captionLang, // set the caption language - hl: this.lang, // set the UI language to match Able Player - modestbranding: 1, // no YouTube logo in controller rel: 0, // when video ends, show only related videos from same channel (1 shows any) - iv_load_policy: 3 // do not show video annotations + start: this.startTime }, events: { onReady: function () { - thisObj.youTubePlayerReady = true; - if (!thisObj.playerWidth \|\| !thisObj.playerHeight) { + thisObj.youTubePlayerReady = true; + if (!thisObj.playerWidth \|\| !thisObj.playerHeight) { thisObj.getYouTubeDimensions(); } - if (thisObj.playerWidth && thisObj.playerHeight) { + if (thisObj.playerWidth && thisObj.playerHeight) { thisObj.youTubePlayer.setSize(thisObj.playerWidth,thisObj.playerHeight); - thisObj.$ableWrapper.css({ - 'width': thisObj.playerWidth + 'px' - }); } if (thisObj.swappingSrc) { // swap is now complete @@ -7699,30 +6930,34 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.userClickedPlaylist) { thisObj.userClickedPlaylist = false; // reset } - if (thisObj.recreatingPlayer) { + if (thisObj.recreatingPlayer) { thisObj.recreatingPlayer = false; // reset } deferred.resolve(); }, onError: function (x) { - deferred.fail(); + deferred.reject(); }, - onStateChange: function (x) { + onStateChange: function (x) { thisObj.getPlayerState().then(function(playerState) { // values of playerState: 'playing','paused','buffering','ended' if (playerState === 'playing') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.play(true); + } thisObj.playing = true; thisObj.startedPlaying = true; thisObj.paused = false; - } - else if (playerState == 'ended') { + } else if (playerState == 'ended') { thisObj.onMediaComplete(); - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } if (thisObj.stoppingYouTube && playerState === 'paused') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.pause(true); + } if (typeof thisObj.$posterImg !== 'undefined') { thisObj.$posterImg.show(); } @@ -7733,13 +6968,17 @@ if (typeof module !== "undefined" && module.exports) { } }); // If caption tracks are hosted locally, but are also available on YouTube, - // we need to turn them off on YouTube or there will be redundant captions - // This is the most reliable event on which to unload the caption module - if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { - if (thisObj.youTubePlayer.getOptions('captions')) { + // we need to turn them off on YouTube or there will be redundant captions + // This is the most reliable event on which to unload the caption module + if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { + if (thisObj.youTubePlayer.getOptions('captions')) { thisObj.youTubePlayer.unloadModule('captions'); } - } + } + }, + onApiChange: function() { + // getDuration() can be fetched during API change event. + thisObj.duration = thisObj.youTubePlayer.getDuration(); }, onPlaybackQualityChange: function () { // do something @@ -7750,85 +6989,73 @@ if (typeof module !== "undefined" && module.exports) { // remove the media element, since YouTube replaces that with its own element in an iframe // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() this.$media.remove(); - } + } return promise; }; AblePlayer.prototype.getYouTubeDimensions = function (youTubeContainerId) { - // The YouTube iframe API does not have a getSize() of equivalent method - // so, need to get dimensions from YouTube's iframe + // The YouTube iframe API does not have a getSize() of equivalent method + // so, need to get dimensions from YouTube's iframe + var $iframe, width, height; - var $iframe, width, height; - - $iframe = this.$ableWrapper.find('iframe'); + $iframe = this.$ableWrapper.find('iframe'); if (typeof $iframe !== 'undefined') { - if ($iframe.prop('width')) { - width = $iframe.prop('width'); - if ($iframe.prop('height')) { + if ($iframe.prop('width')) { + width = $iframe.prop('width'); + if ($iframe.prop('height')) { height = $iframe.prop('height'); - this.resizePlayer(width,height); + this.resizePlayer(width,height); } } } }; - AblePlayer.prototype.getYouTubeCaptionTracks = function (youTubeId) { - - // get data via YouTube IFrame Player API, and push data to this.tracks & this.captions - // NOTE: Caption tracks are not available through the IFrame Player API - // until AFTER the video has started playing. - // Therefore, this function plays the video briefly in order to load the captions module - // then stops the video and collects the data needed to build the cc menu - // This is stupid, but seemingly unavoidable. - // Caption tracks could be obtained through the YouTube Data API - // but this required authors to have a Google API key, - // which would complicate Able Player installation + /** + * Get data from the YouTube iFrame API. Pushes data into `this.tracks` and `this.captions`. + * Initiates play to trigger loading the captions module, then stops and collects data. + * + * @returns {Promise} promise + / + AblePlayer.prototype.getYouTubeCaptionTracks = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - - var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack; + var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack, apiTriggered = false; thisObj = this; - - if (!this.youTubePlayer.getOption('captions','tracklist')) { - - // no tracks were found, probably because the captions module hasn't loaded - // play video briefly (required in order to load the captions module) - // and after the apiChange event is triggered, try again to retreive tracks - this.youTubePlayer.addEventListener('onApiChange',function(x) { - - // getDuration() also requires video to play briefly - // so, let's set that while we're here - thisObj.duration = thisObj.youTubePlayer.getDuration(); - - if (thisObj.loadingYouTubeCaptions) { - // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once - ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); - if (!thisObj.okToPlay) { - // Don't stopVideo() - that cancels loading - // Just pause - // No need to seekTo(0) - so little time has passed it isn't noticeable to the user - thisObj.youTubePlayer.pauseVideo(); + if (!this.youTubePlayer.getOption('captions','tracklist') ) { + // no tracks were found, probably because the captions module hasn't loaded + // play video briefly (required to load the captions module) + // and after the apiChange event is triggered, try again to retrieve tracks + this.youTubePlayer.addEventListener('onApiChange',function() { + apiTriggered = true; + // getDuration() also requires video to play briefly + // so, let's set that while we're here + thisObj.duration = thisObj.youTubePlayer.getDuration(); + + if (thisObj.loadingYouTubeCaptions) { + // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once + ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); + if ( ! thisObj.okToPlay ) { + // Don't stopVideo() - that cancels loading, just pause. + // No need to seekTo(0) - the time passed isn't noticeable to the user + thisObj.youTubePlayer.pauseVideo(); } - if (ytTracks && ytTracks.length) { + if (ytTracks && ytTracks.length) { // Step through ytTracks and add them to global tracks array - // Note: Unlike YouTube Data API, the IFrame Player API only returns - // tracks that are published, and does NOT include ASR captions - // So, no additional filtering is required + // Note: Unlike YouTube Data API, the IFrame Player API only returns + // tracks that are published, and does NOT include ASR captions + // So, no additional filtering is required for (i=0; i < ytTracks.length; i++) { - trackLang = ytTracks[i].languageCode; + trackLang = ytTracks[i].languageCode; trackLabel = ytTracks[i].languageName; // displayName and languageName seem to always have the same value - isDefaultTrack = false; - if (typeof thisObj.captionLang !== 'undefined') { - if (trackLang === thisObj.captionLang) { - isDefaultTrack = true; - } - } - else if (typeof thisObj.lang !== 'undefined') { + isDefaultTrack = false; + if (typeof thisObj.captionLang !== 'undefined' && (trackLang === thisObj.captionLang) ) { + isDefaultTrack = true; + } else if (typeof thisObj.lang !== 'undefined') { if (trackLang === thisObj.lang) { - isDefaultTrack = true; + isDefaultTrack = true; } } thisObj.tracks.push({ @@ -7842,103 +7069,97 @@ if (typeof module !== "undefined" && module.exports) { 'label': trackLabel, 'def': isDefaultTrack, 'cues': null - }); + }); } thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - } - else { - // there are no YouTube captions - thisObj.usingYouTubeCaptions = false; + thisObj.setupPopups('captions'); + } else { + // there are no YouTube captions + thisObj.usingYouTubeCaptions = false; thisObj.hasCaptions = false; } - thisObj.loadingYouTubeCaptions = false; - if (thisObj.okToPlay) { + thisObj.loadingYouTubeCaptions = false; + if (thisObj.okToPlay) { thisObj.youTubePlayer.playVideo(); } } - if (thisObj.captionLangPending) { - // user selected a new caption language prior to playback starting - // set it now + if (thisObj.captionLangPending) { + // user selected a new caption language prior to playback starting + // set it now thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLangPending}); - thisObj.captionLangPending = null; + thisObj.captionLangPending = null; } - if (typeof thisObj.prefCaptionsSize !== 'undefined') { - // set the default caption size - // this doesn't work until the captions module is loaded + if (typeof thisObj.prefCaptionsSize !== 'undefined') { + // set the default caption size + // this doesn't work until the captions module is loaded thisObj.youTubePlayer.setOption('captions','fontSize',thisObj.translatePrefs('size',thisObj.prefCaptionsSize,'youtube')); } deferred.resolve(); }); - // Trigger the above event listener by briefly playing the video - this.loadingYouTubeCaptions = true; - this.youTubePlayer.playVideo(); + // Trigger the above event listener by briefly playing the video + this.loadingYouTubeCaptions = true; + this.youTubePlayer.playVideo(); + // If onApiChange has not been triggered, the captions module is not loading. + setTimeout(() => { + if ( ! apiTriggered ) { + setTimeout(() => { + // If a second passes without loading captions, assume there are none. + thisObj.youTubePlayer.pauseVideo(); + deferred.resolve(); + }, 500); + } + },500); } return promise; }; - AblePlayer.prototype.getYouTubeTimedTextUrl = function (youTubeId, trackName, trackLang) { - - // return URL for retrieving WebVTT source via YouTube's timedtext API - // Note: This API seems to be undocumented, and could break anytime - // UPDATE: Google removed this API on November 10, 2021 - // This function is no longer called, but is preserved here for reference - var url = 'https://www.youtube.com/api/timedtext?fmt=vtt'; - url += '&v=' + youTubeId; - url += '&lang=' + trackLang; - // if track has a value in the name field, it's required* in the URL - if (trackName !== '') { - url += '&name=' + trackName; - } - return url; - }; - AblePlayer.prototype.getYouTubePosterUrl = function (youTubeId, width) { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 - - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; + // return a URL for retrieving a YouTube poster image + // supported values of width: 120, 320, 480, 640, 1280, 1920. + var url = 'https://img.youtube.com/vi/' + youTubeId; + if (width == '120') { + // default (small) thumbnail, 120 x 90 + return url + '/default.jpg'; + } else if (width == '320') { + // medium quality thumbnail, 320 x 180 + return url + '/mqdefault.jpg'; + } else if (width == '480') { + // high quality thumbnail, 480 x 360 + return url + '/hqdefault.jpg'; + } else if (width == '640') { + // standard definition poster image, 640 x 480 + return url + '/sddefault.jpg'; + } else if (width == '1280') { + // standard definition poster image, 640 x 480 + return url + '/hq720.jpg'; + } else if ( width == '1920' ) { + // standard definition poster image, 640 x 480 + return url + '/maxresdefault.jpg'; + } + return false; }; AblePlayer.prototype.getYouTubeId = function (url) { // return a YouTube ID, extracted from a full YouTube URL - // Supported URL patterns (with http or https): - // https://youtu.be/xxx - // https://www.youtube.com/watch?v=xxx - // https://www.youtube.com/embed/xxx - - // in all supported patterns, the id is the last 11 characters - var idStartPos, id; - - if (url.indexOf('youtu') !== -1) { - // this is a full Youtube URL - url = url.trim(); - idStartPos = url.length - 11; - id = url.substring(idStartPos); - return id; - } - else { - return url; + // Supported URL patterns: + // http\|s://youtu.be/xxx + // http\|s://www.youtube.com/watch?v=xxx + // http\|s://www.youtube.com/embed/xxx + + // in all supported patterns, the id is the last 11 characters + var idStartPos, id; + + if (url.indexOf('youtu') !== -1) { + // this is a full Youtube URL + url = url.trim(); + idStartPos = url.length - 11; + id = url.substring(idStartPos); + return id; + } else { + return url; } }; @@ -7948,13 +7169,12 @@ if (typeof module !== "undefined" && module.exports) { // Events: - // startTracking(event, position) - // tracking(event, position) - // stopTracking(event, position) + // - startTracking(event, position) + // - tracking(event, position) + // - stopTracking(event, position) - window. AccessibleSlider = function(mediaType, div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { + window.AccessibleSlider = function(div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { - // mediaType is either 'audio' or 'video' // div is the host element around which the slider will be built // orientation is either 'horizontal' or 'vertical' // length is the width or height of the slider, depending on orientation @@ -7996,8 +7216,7 @@ if (typeof module !== "undefined" && module.exports) { if (initialState === 'visible') { this.seekHead.attr('tabindex', '0'); - } - else { + } else { this.seekHead.attr('tabindex', '-1'); } // Since head is focusable, it gets the aria roles/titles. @@ -8036,8 +7255,7 @@ if (typeof module !== "undefined" && module.exports) { if (orientation === 'horizontal') { this.wrapperDiv.width(length); this.loadedDiv.width(0); - } - else { + } else { this.wrapperDiv.height(length); this.loadedDiv.height(0); } @@ -8061,26 +7279,22 @@ if (typeof module !== "undefined" && module.exports) { if (e.type === 'mouseenter' \|\| e.type === 'focus') { thisObj.overHead = true; - } - else if (e.type === 'mouseleave' \|\| e.type === 'blur') { + } else if (e.type === 'mouseleave' \|\| e.type === 'blur') { thisObj.overHead = false; if (!thisObj.overBody && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { + } else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + } else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(thisObj.seekHead.offset() + (thisObj.seekHead.width() / 2))); if (!thisObj.bodyDiv.is(':focus')) { thisObj.bodyDiv.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } @@ -8094,7 +7308,12 @@ if (typeof module !== "undefined" && module.exports) { this.bodyDiv.on( 'mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend', function (e) { + // Don't trigger move on right click. + if ( e.button == 2 && e.type == 'mousedown' ) { + return; + } coords = thisObj.pointerEventToXY(e); + let keyPressed = e.key; if (e.type === 'mouseenter') { thisObj.overBody = true; @@ -8102,15 +7321,13 @@ if (typeof module !== "undefined" && module.exports) { x: coords.x, y: coords.y }; - } - else if (e.type === 'mouseleave') { + } else if (e.type === 'mouseleave') { thisObj.overBody = false; thisObj.overBodyMousePos = null; if (!thisObj.overHead && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { + } else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { thisObj.overBodyMousePos = { x: coords.x, y: coords.y @@ -8118,52 +7335,36 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + } else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(coords.x)); thisObj.trackHeadAtPageX(coords.x); if (!thisObj.seekHead.is(':focus')) { thisObj.seekHead.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'keydown') { - // Home - if (e.which === 36) { + } else if (e.type === 'keydown') { + if (e.key === 'Home') { thisObj.trackImmediatelyTo(0); - } - // End - else if (e.which === 35) { + } else if (e.key === 'End') { thisObj.trackImmediatelyTo(thisObj.duration); - } - // Left arrow or down arrow - else if (e.which === 37 \|\| e.which === 40) { + } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowDown') { thisObj.arrowKeyDown(-1); - } - // Right arrow or up arrow - else if (e.which === 39 \|\| e.which === 38) { + } else if (e.key === 'ArrowRight' \|\| e.key === 'ArrowUp') { thisObj.arrowKeyDown(1); - } - // Page up - else if (e.which === 33 && bigInterval > 0) { + } else if (e.key === 'PageUp' && bigInterval > 0) { thisObj.arrowKeyDown(bigInterval); - } - // Page down - else if (e.which === 34 && bigInterval > 0) { + } else if (e.key === 'PageDown' && bigInterval > 0) { thisObj.arrowKeyDown(-bigInterval); - } - else { + } else { return; } e.preventDefault(); - } - else if (e.type === 'keyup') { - if (e.which >= 33 && e.which <= 40) { + } else if (e.type === 'keyup') { + if ( keyPressed === e.key ) { if (thisObj.tracking && thisObj.trackDevice === 'keyboard') { thisObj.stopTracking(thisObj.keyTrackPosition); } @@ -8185,8 +7386,7 @@ if (typeof module !== "undefined" && module.exports) { this.nextStep = 2; } this.trackHeadAtPosition(this.keyTrackPosition); - } - else { + } else { this.nextStep = 1; this.inertiaCount = 0; this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); @@ -8194,26 +7394,7 @@ if (typeof module !== "undefined" && module.exports) { this.trackHeadAtPosition(this.keyTrackPosition); } }; -/* - AccessibleSlider.prototype.pageUp = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/ + AccessibleSlider.prototype.pageXToPosition = function (pageX) { var offset = pageX - this.bodyDiv.offset().left; var position = this.duration (offset / this.bodyDiv.width()); @@ -8268,7 +7449,7 @@ if (typeof module !== "undefined" && module.exports) { this.updateAriaValues(position, updateLive); } - // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. + // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. AccessibleSlider.prototype.setBuffered = function (ratio) { if (!isNaN(ratio)) { this.buffered = ratio; @@ -8331,14 +7512,12 @@ if (typeof module !== "undefined" && module.exports) { ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else if (pMinutes > 0) { + } else if (pMinutes > 0) { descriptionText = pMinutes + ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else { + } else { descriptionText = pSeconds + ' ' + pSecondWord; } @@ -8370,18 +7549,15 @@ if (typeof module !== "undefined" && module.exports) { this.timeTooltip.show(); if (this.tracking) { this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)); - } - else { + } else { this.timeTooltip.text(this.positionToStr(this.position)); } this.setTooltipPosition(this.seekHead.position().left + (this.seekHead.width() / 2)); - } - else if (this.overBody && this.overBodyMousePos) { + } else if (this.overBody && this.overBodyMousePos) { this.timeTooltip.show(); this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))); this.setTooltipPosition(this.overBodyMousePos.x - this.bodyDiv.offset().left); - } - else { + } else { clearTimeout(this.timeTooltipTimeoutId); var _this = this; @@ -8401,7 +7577,7 @@ if (typeof module !== "undefined" && module.exports) { AccessibleSlider.prototype.setTooltipPosition = function (x) { this.timeTooltip.css({ left: x - (this.timeTooltip.width() / 2) - 10, - bottom: this.seekHead.height() + 10 + bottom: this.seekHead.height() }); }; @@ -8419,8 +7595,7 @@ if (typeof module !== "undefined" && module.exports) { dMinutes = '0' + dMinutes; } return dHours + ':' + dMinutes + ':' + dSeconds; - } - else { + } else { return dMinutes + ':' + dSeconds; } }; @@ -8435,8 +7610,7 @@ if (typeof module !== "undefined" && module.exports) { var touch = e.originalEvent.touches[0] \|\| e.originalEvent.changedTouches[0]; out.x = touch.pageX; out.y = touch.pageY; - } - else if (e.type == 'mousedown' \|\| e.type == 'mouseup' \|\| e.type == 'mousemove' \|\| e.type == 'mouseover'\|\| e.type=='mouseout' \|\| e.type=='mouseenter' \|\| e.type=='mouseleave') { + } else if (e.type == 'mousedown' \|\| e.type == 'mouseup' \|\| e.type == 'mousemove' \|\| e.type == 'mouseover'\|\| e.type=='mouseout' \|\| e.type=='mouseenter' \|\| e.type=='mouseleave') { out.x = e.pageX; out.y = e.pageY; } @@ -8449,19 +7623,18 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addVolumeSlider = function($div) { - // Prior to v4.4.64, we were using a custom-build vertical volunme slider - // Changed to input type="range" because it's standard and gaining more widespread support - // including screen reader support - // TODO: Improve presentation of vertical slider. That requires some CSS finesse. + // Prior to v4.4.64, we were using a custom-build vertical volunme slider + // Changed to input type="range" because it's standard and gaining more widespread support + // including screen reader support + // TODO: Improve presentation of vertical slider. That requires some CSS finesse. - var thisObj, volumeSliderId, volumeHelpId, volumePct, tickLabelsId, $tickLabels, i, $tickOption, tickLabel; + var thisObj, volumeSliderId, volumeHelpId, volumePct, volumeLabel, volumeHeight; thisObj = this; // define a few variables volumeSliderId = this.mediaId + '-volume-slider'; volumeHelpId = this.mediaId + '-volume-help'; - tickLabelsId = this.mediaId + '-volume-tick-labels'; this.$volumeSlider = $('<div>',{ 'id': volumeSliderId, @@ -8472,15 +7645,14 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-tooltip', 'role': 'tooltip' }).hide(); - this.$volumeRange = $('<input>',{ + this.$volumeRange = $('<input>',{ 'type': 'range', 'min': '0', 'max': '10', 'step': '1', - 'orient': 'vertical', // non-standard, but required for Firefox - 'aria-label': this.tt.volumeUpDown, + 'orient': 'vertical', // non-standard, but required for Firefox + 'aria-label': this.translate( 'volumeUpDown', 'Volume up down' ), 'value': this.volume - // 'list': tickLabelsId // Uncomment this to use tickLabels (see note below) }); volumePct = parseInt(thisObj.volume) / 10 * 100; this.$volumeHelp = $('<div>',{ @@ -8488,30 +7660,11 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-volume-help', 'aria-live': 'polite' }).text(volumePct + '%'); - this.$volumeButton.attr({ - 'aria-describedby': volumeHelpId - }); - $tickLabels = $('<datalist>',{ - 'id': tickLabelsId - }); - for (i = 0; i <= 10; i++) { - if (i === 0) { - tickLabel = this.tt.mute; - } - else { - tickLabel = (i * 10) + '%'; - } - $tickOption = $('<option>',{ - 'value': i, - 'label': tickLabel - }) - $tickLabels.append($tickOption); - } + volumeLabel = this.$volumeButton.attr( 'aria-label' ); + this.$volumeButton.attr( 'aria-label', volumeLabel + ' ' + volumePct + '%'); this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp); - // To add $tickLabels, use the following line of code to replace the one above - // and uncommnet the 'list' property in the definition of this.$volumeRange above - // As of Nov 2022, this feature is not supported by any screen reader - // this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp,$tickLabels); + volumeHeight = this.$volumeButton.parents( '.able-control-row' )[0]; + this.$volumeSlider.css( 'bottom', volumeHeight.offsetHeight ); $div.append(this.$volumeSlider); @@ -8523,23 +7676,20 @@ if (typeof module !== "undefined" && module.exports) { this.$volumeRange.on('input',function (e) { thisObj.handleVolumeChange($(this).val()); }); - + this.$volumeRange.on('keydown',function (e) { - // Escape key or Enter key or Tab key - if (e.which === 27 \|\| e.which === 13 \|\| e.which === 9) { + if (e.key === 'Escape' \|\| e.key === 'Tab' \|\| e.key === 'Enter') { // close popup if (thisObj.$volumeSlider.is(':visible')) { thisObj.closingVolume = true; // stopgap thisObj.hideVolumePopup(); - } - else { + } else { if (!thisObj.closingVolume) { thisObj.showVolumePopup(); } } - } - else { + } else { return; } }); @@ -8551,93 +7701,61 @@ if (typeof module !== "undefined" && module.exports) { var volumePct; volumePct = (volume/10) * 100; - // Update help text - if (this.$volumeHelp) { - this.$volumeHelp.text(volumePct + '%'); + // Update help text + if (this.$volumeHelp) { + this.$volumeHelp.text(volumePct + '%'); } - // Update the default value of the volume slider input field - // This doesn't seem to be necessary; browsers remember the previous setting during a session - // but this is a fallback in case they don't - this.$volumeRange.attr('value',volume); + // Update the default value of the volume slider input field + // This doesn't seem to be necessary; browsers remember the previous setting during a session + // but this is a fallback in case they don't + this.$volumeRange.attr('value',volume); }; AblePlayer.prototype.refreshVolumeButton = function(volume) { - var volumeName, volumePct, volumeLabel, volumeIconClass, volumeImg, newSvgData; + var volumeName, volumePct, volumeLabel; volumeName = this.getVolumeName(volume); volumePct = (volume/10) * 100; - volumeLabel = this.tt.volume + ' ' + volumePct + '%'; + volumeLabel = this.translate( 'volume', 'Volume' ) + ' ' + volumePct + '%'; - if (this.iconType === 'font') { - volumeIconClass = 'icon-volume-' + volumeName; - this.$volumeButton.find('span').first().removeClass().addClass(volumeIconClass); - this.$volumeButton.find('span.able-clipped').text(volumeLabel); - } - else if (this.iconType === 'image') { - volumeImg = this.imgPath + 'volume-' + volumeName + '.png'; - this.$volumeButton.find('img').attr('src',volumeImg); - } - else if (this.iconType === 'svg') { - if (volumeName !== 'mute') { - volumeName = 'volume-' + volumeName; - } - newSvgData = this.getSvgData(volumeName); - this.$volumeButton.find('svg').attr('viewBox',newSvgData[0]); - this.$volumeButton.find('path').attr('d',newSvgData[1]); - } + this.getIcon( this.$volumeButton, 'volume-' + volumeName ); + this.$volumeButton.attr( 'aria-label', volumeLabel ); }; AblePlayer.prototype.handleVolumeButtonClick = function() { if (this.$volumeSlider.is(':visible')) { - this.hideVolumePopup(); - } - else { + this.hideVolumePopup(); + } else { this.showVolumePopup(); } - }; - - AblePlayer.prototype.handleVolumeKeystroke = function(keycode) { - - // keycode is an ASCII key code 49-57 (numeric keys 1-9), - // keyboard shortcuts for changing volume - - var volume; - - if (keycode >= 49 && keycode <= 57) { - volume = keycode - 48; - } - else { - return false; - } + }; + AblePlayer.prototype.handleVolumeKeystroke = function(volume) { + // keyboard shortcuts for changing volume if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); } - }; + }; AblePlayer.prototype.handleVolumeChange = function(volume) { - // handle volume change using the volume input slider + // handle volume change using the volume input slider if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); @@ -8648,8 +7766,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.isMuted()) { this.setMute(false); - } - else { + } else { this.setMute(true); } }; @@ -8681,8 +7798,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { return this.media.muted; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { return this.youTubePlayer.isMuted(); } }; @@ -8694,8 +7810,7 @@ if (typeof module !== "undefined" && module.exports) { // save current volume so it can be restored after unmute this.lastVolume = this.volume; this.volume = 0; - } - else { // restore to previous volume + } else { // restore to previous volume if (typeof this.lastVolume !== 'undefined') { this.volume = this.lastVolume; } @@ -8703,16 +7818,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.media.muted = mute; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (mute) { this.youTubePlayer.mute(); - } - else { + } else { this.youTubePlayer.unMute(); } } - this.setVolume(this.volume); + this.setVolume(this.volume); this.refreshVolumeHelp(this.volume); this.refreshVolumeButton(this.volume); }; @@ -8722,29 +7835,22 @@ if (typeof module !== "undefined" && module.exports) { // volume is 1 to 10 // convert as needed depending on player - var newVolume; - + var newVolume; + this.syncSignVideo( {'volume' : 0 } ); if (this.player === 'html5') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.media.volume = newVolume; - - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.volume = 0; // always mute - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // volume is 0 to 100 - newVolume = volume * 10; + newVolume = volume * 10; this.youTubePlayer.setVolume(newVolume); this.volume = volume; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.vimeoPlayer.setVolume(newVolume).then(function() { // setVolume finished. - // could do something here // successful completion also fires a 'volumechange' event (see event.js) }); } @@ -8757,10 +7863,9 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { // uses 0 to 1 scale return this.media.volume * 10; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // uses 0 to 100 scale - if (this.youTubePlayerReady) { + if (this.youTubePlayerReady) { return this.youTubePlayer.getVolume() / 10; } } @@ -8777,14 +7882,11 @@ if (typeof module !== "undefined" && module.exports) { // returns 'mute','soft','medium', or 'loud' depending on volume level if (volume == 0) { return 'mute'; - } - else if (volume == 10) { + } else if (volume == 10) { return 'loud'; - } - else if (volume < 5) { + } else if (volume < 5) { return 'soft'; - } - else { + } else { return 'medium'; } }; @@ -8795,70 +7897,57 @@ if (typeof module !== "undefined" && module.exports) { var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"; // Based on the incredible accessible modal dialog. - window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, isModal, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) { + window.AccessibleDialog = function( modalDiv, $returnElement, title, closeButtonLabel) { this.title = title; this.closeButtonLabel = closeButtonLabel; this.focusedElementBeforeModal = $returnElement; - this.escapeHook = escapeHook; this.baseId = $(modalDiv).attr('id') \|\| Math.floor(Math.random() * 1000000000).toString(); var thisObj = this; var modal = modalDiv; this.modal = modal; - modal.css({ - 'width': width \|\| '50%' - }); + modal.addClass('able-modal-dialog'); - if (!fullscreen) { - var closeButton = $('<button>',{ - 'class': 'modalCloseButton', - 'title': thisObj.closeButtonLabel, - 'aria-label': thisObj.closeButtonLabel - }).text('X'); - closeButton.keydown(function (e) { - // Space key down - if (e.which === 32) { - thisObj.hide(); - } - }).click(function () { + var closeButton = $('<button>',{ + 'class': 'modalCloseButton', + 'title': thisObj.closeButtonLabel, + 'aria-label': thisObj.closeButtonLabel + }).text('×'); + closeButton.on( 'keydown', function (e) { + if (e.key === ' ') { thisObj.hide(); - }); + } + }).on( 'click', function () { + thisObj.hide(); + }); - var titleH1 = $('<h1></h1>'); - titleH1.attr('id', 'modalTitle-' + this.baseId); - titleH1.css('text-align', 'center'); - titleH1.text(title); - this.titleH1 = titleH1; + var titleH1 = $('<h1></h1>'); + titleH1.attr('id', 'modalTitle-' + this.baseId); + titleH1.text(title); + this.titleH1 = titleH1; - modal.attr({ - 'aria-labelledby': 'modalTitle-' + this.baseId, - }); - modal.prepend(titleH1); - modal.prepend(closeButton); - } + modal.attr({ + 'aria-labelledby': 'modalTitle-' + this.baseId, + }); + var modalHeader = $( '<div>', { + 'class': 'able-modal-header' + }); + modalHeader.prepend(titleH1); + modalHeader.prepend(closeButton); + modal.prepend(modalHeader); modal.attr({ 'aria-hidden': 'true', - 'role': dialogRole, + 'role': 'dialog', + 'aria-modal': 'true' }); - if (isModal) { - modal.attr('aria-modal','true'); - } - modal.keydown(function (e) { - // Escape - if (e.which === 27) { - if (thisObj.escapeHook) { - thisObj.escapeHook(e, this); - } - else { - thisObj.hide(); - e.preventDefault(); - } - } - // Tab - else if (e.which === 9) { + modal.on( 'keydown', function (e) { + if (e.key === 'Escape') { + thisObj.hide(); + e.preventDefault(); + } else if (e.key === 'Tab') { // Manually loop tab navigation inside the modal. var parts = modal.find(''); var focusable = parts.filter(focusableElementsSelector).filter(':visible'); @@ -8872,13 +7961,12 @@ if (typeof module !== "undefined" && module.exports) { if (e.shiftKey) { // If backwards from first element, go to last. if (currentIndex === 0) { - focusable.get(focusable.length - 1).focus(); + focusable.get(focusable.length - 1).trigger('focus'); e.preventDefault(); } - } - else { + } else { if (currentIndex === focusable.length - 1) { - focusable.get(0).focus(); + focusable.get(0).trigger('focus'); e.preventDefault(); } } @@ -8886,7 +7974,10 @@ if (typeof module !== "undefined" && module.exports) { e.stopPropagation(); }); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + if ( $( 'body' ).hasClass( 'able-modal-active' ) ) { + $( 'body > ') .not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); + } }; AccessibleDialog.prototype.show = function () { @@ -8902,10 +7993,12 @@ if (typeof module !== "undefined" && module.exports) { // Keep from moving focus out of dialog when clicking outside of it. overlay.on('mousedown.accessibleModal', function (e) { e.preventDefault(); + thisObj.hide(); }); } - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('inert', true); + $( 'body' ).addClass( 'able-modal-active' ); this.overlay.css('display', 'block'); this.modal.css('display', 'block'); @@ -8921,7 +8014,7 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; setTimeout(function () { // set focus on the first focusable element - thisObj.modal.find('button.modalCloseButton').first().focus(); + thisObj.modal.find('button.modalCloseButton').first().trigger('focus'); }, 300); }; @@ -8931,9 +8024,10 @@ if (typeof module !== "undefined" && module.exports) { } this.modal.css('display', 'none'); this.modal.attr('aria-hidden', 'true'); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); - this.focusedElementBeforeModal.focus(); + this.focusedElementBeforeModal.trigger('focus'); }; AccessibleDialog.prototype.getInputs = function () { @@ -9054,7 +8148,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getSecondsFromColonTime = function (timeStr) { // Converts string of form hh:mm:ss to seconds - var timeParts, hours, minutes, seconds, newTime; + var timeParts, hours, minutes, seconds; timeParts = timeStr.split(":"); if (timeParts.length === 3) { @@ -9082,6 +8176,35 @@ if (typeof module !== "undefined" && module.exports) { return Number(Math.floor(value + "e" + decimals) + "e-" + decimals); }; + AblePlayer.prototype.defer = function() { + const self = this; + const promise = new Promise((resolve, reject) => { + self.resolve = resolve; + self.reject = reject; + self.promise = () => promise; + }); + } + + AblePlayer.prototype.getScript = function( source, callback ) { + var script = document.createElement('script'); + var prior = document.getElementsByTagName('script')[0]; + script.async = 1; + + script.onload = script.onreadystatechange = function( _, isAbort ) { + if ( isAbort \|\| !script.readyState \|\| /loaded\|complete/.test(script.readyState) ) { + script.onload = script.onreadystatechange = null; + script = undefined; + + if ( !isAbort && callback ) { + setTimeout(callback, 0); + } + } + }; + + script.src = source; + prior.parentNode.insertBefore(script, prior); + } + AblePlayer.prototype.hasAttr = function (object, attribute) { // surprisingly, there is no hasAttr() function in Jquery as of 3.2.1 // return true if object has attribute; otherwise false @@ -9099,17 +8222,6 @@ if (typeof module !== "undefined" && module.exports) { } }; - Number.isInteger = - Number.isInteger \|\| - function (value) { - // polyfill for IE11, which doesn't otherwise support Number.isInteger - // https://stackoverflow.com/a/31720368/744281 - return ( - typeof value === "number" && - isFinite(value) && - Math.floor(value) === value - ); - }; })(jQuery); (function ($) { @@ -9122,12 +8234,12 @@ if (typeof module !== "undefined" && module.exports) { // toggles the Description button or changes a description-related preference // The following variables are applicable to delivery of description: - // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) + // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) // prefDesc == 1 if user wants description (i.e., Description button is on); else 0 // prefDescPause == 1 to pause video when description starts; else 0 // prefDescVisible == 1 to visibly show text-based description area; else 0 // prefDescMethod == either 'video' or 'text' (as of v4.0.10, prefDescMethod is always 'video') - // descMethod is the format actually used ('video' or 'text'), regardless of user preference + // descMethod is the format actually used ('video' or 'text'), regardless of user preference // hasOpenDesc == true if a described version of video is available via data-desc-src attribute // hasClosedDesc == true if a description text track is available // descOn == true if description of either type is on @@ -9136,12 +8248,12 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - if (this.mediaType === 'audio') { - deferred.resolve(); + if (this.mediaType === 'audio') { + deferred.resolve(); } // check to see if there's an open-described version of this video @@ -9150,106 +8262,78 @@ if (typeof module !== "undefined" && module.exports) { this.descFile = this.$sources.first().attr('data-desc-src'); if (typeof this.descFile !== 'undefined') { this.hasOpenDesc = true; - } - else { + } else { // there's no open-described version via data-desc-src, // but what about data-youtube-desc-src or data-vimeo-desc-src? - // if these exist, they would have been defined earlier - if (this.youTubeDescId \|\| this.vimeoDescId) { - this.hasOpenDesc = true; - } - else { // there are no open-described versions from any source - this.hasOpenDesc = false; - } + // if these exist, they would have been defined earlier + this.hasOpenDesc = (this.youTubeDescId \|\| this.vimeoDescId) ? true : false; } // Set this.descMethod based on media availability & user preferences + // no description is available for this video + this.descMethod = null; if (this.hasOpenDesc && this.hasClosedDesc) { - // both formats are available. User gets their preference. - if (this.prefDescMethod) { - this.descMethod = this.prefDescMethod; - } - else { - // user has no preference. Video is default. - this.descMethod = 'video'; - } - } - else if (this.hasOpenDesc) { + // both formats are available. User gets their preference. + this.descMethod = (this.prefDescMethod) ? this.prefDescMethod : 'video'; + } else if (this.hasOpenDesc) { this.descMethod = 'video'; - } - else if (this.hasClosedDesc) { + } else if (this.hasClosedDesc) { this.descMethod = 'text'; } - else { - // no description is available for this video - this.descMethod = null; - } // Set the default state of descriptions - if (this.descMethod) { - if (this.prefDesc === 1) { - this.descOn = true; - } - else if (this.prefDesc === 0) { - this.descOn = false; - } - else { - // user has no prefs. Use default state. - if (this.defaultStateDescriptions === 1) { - this.descOn = true; - } - else { - this.descOn = false; - } + this.descOn = false; + if (this.descMethod) { + if (this.prefDesc === 1) { + this.descOn = true; + } else if (this.prefDesc === 0) { + this.descOn = false; + } else { + // user has no prefs. Use default state. + this.descOn = (this.defaultStateDescriptions === 1) ? true : false; } } - else { - this.descOn = false; - } - if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc && this.descMethod === 'text') { + + // If a video has text audio descriptions, inject the description area. + if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc ) { this.injectTextDescriptionArea(); } if (this.descOn) { - if (this.descMethod === 'video') { - if (!this.usingDescribedVersion()) { - // switched from non-described to described version - this.swapDescription(); - } + if (this.descMethod === 'video' && !this.usingDescribedVersion() ) { + // switched from non-described to described version + this.swapDescription(); } if (this.hasClosedDesc) { if (this.prefDescVisible) { // make description text visible if (typeof this.$descDiv !== 'undefined') { this.$descDiv.show(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } - } - else { + } else { // keep it visible to screen readers, but hide it visibly if (typeof this.$descDiv !== 'undefined') { - this.$descDiv.addClass('able-clipped'); + this.$descDiv.addClass('able-offscreen'); } } } - } - else { // description is off. + } else { // description is off. if (this.descMethod === 'video') { // user has turned off described version of video if (this.usingDescribedVersion()) { // user was using the described verion. Swap for non-described version this.swapDescription(); } - } - else if (this.descMethod === 'text') { // user has turned off text description + } else if (this.descMethod === 'text') { // user has turned off text description // hide description div from everyone, including screen reader users if (typeof this.$descDiv !== 'undefined') { this.$descDiv.hide(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } } } deferred.resolve(); - return promise; + return promise; }; AblePlayer.prototype.usingDescribedVersion = function () { @@ -9258,116 +8342,79 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'youtube') { return (this.activeYouTubeId === this.youTubeDescId); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { return (this.activeVimeoId === this.vimeoDescId); - } - else { + } else { return (this.$sources.first().attr('data-desc-src') === this.$sources.first().attr('src')); } }; - AblePlayer.prototype.initSpeech = function (context) { - - // Some browsers &/or operating systems require a user-initiated click - // before this.synth.getVoices() will work. As of Nov 2022: - // Chrome requires a click before synth.getVoices() will work - // iOS requires a click before synth.speak() will work - // A hack to address this: Listen for ANY click, then play an inaudible utterance - // to intitiate speech synthesis - // https://stackoverflow.com/questions/32193704/js-speech-synthesis-issue-on-ios - // This function does that, and sets this.speechEnabled - // It's called with either of these contexts: - // 'init' - player is being initialized - // 'play' - user has clicked play - // 'prefs' - user has clicked prefs button - // 'desc' - it's time to announce a description! - - var thisObj = this; - - if (this.speechEnabled === null) { - - if (typeof this.synth !== 'undefined') { - // cancel any previous synth instance and reinitialize - this.synth.cancel(); - } +/* + * Initializes speech synthesis capabilities for the player. + * This method addresses browser and OS limitations that require user interaction + * before speech synthesis functions become available. It handles different contexts + * like initialization, playing media, accessing preferences, or announcing descriptions. + * @param {string} context - The context in which the function is called ('init', 'play', 'prefs', 'desc'). + / + AblePlayer.prototype.initSpeech = function (context) { + var thisObj = this; - if (window.speechSynthesis) { + // Function to attempt enabling speech synthesis + function attemptEnableSpeech() { + var greeting = new SpeechSynthesisUtterance("\x20"); + greeting.onend = function () { + thisObj.getBrowserVoices(); + if ( + (Array.isArray(thisObj.descVoices) && thisObj.descVoices.length) \|\| + context !== "init" + ) { + thisObj.speechEnabled = true; + } + }; + thisObj.synth.speak(greeting); + } - // browser supports speech synthesis + // Function to handle the initial click and enable speech synthesis + function handleInitialClick() { + attemptEnableSpeech(); + // Once the utterance starts, remove this specific click event listener + // Ensures the event handler only runs once and cleans up after itself + $(document).off("click", handleInitialClick); + } + if (this.speechEnabled === null) { + if (window.speechSynthesis) { + // Browser supports speech synthesis this.synth = window.speechSynthesis; + this.synth.cancel(); // Cancel any ongoing speech synthesis - if (context === 'init') { - // handle a click on anything, in case the user - // clicks something before they click 'play' or 'prefs' buttons - // that would allow us to init speech before it's needed - $(document).on('click',function() { - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - } - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; - }); - - // go ahead and call get browser voices in case it might work, - // for browsers that don't require a click - this.getBrowserVoices(); - if (this.descVoices.length) { - this.speechEnabled = true; - } - } - else { // context is either 'play' or 'prefs' or 'desc' - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - }; - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; + if (context === "init") { + // Attempt to enable speech synthesis directly for browsers that don't require a click + attemptEnableSpeech(); + // For initial setup, require a user click to enable speech synthesis + // Scoping to a particular handler to avoid conflicts with other click events + $(document).on("click", handleInitialClick); + } else { + // For other contexts, attempt to enable speech synthesis directly + attemptEnableSpeech(); } - } - else { - // browser does not support speech synthesis - this.speechEnabled = false; + } else { + // Browser does not support speech synthesis + this.speechEnabled = false; } } - }; + }; AblePlayer.prototype.getBrowserVoices = function () { - - // define this.descVoices array - // includes only languages that match the language of the captions or player + + // define this.descVoices array + // includes only languages that match the language of the captions or player var voices, descLangs, voiceLang, preferredLang; - if (this.captionLang) { - preferredLang = this.captionLang.substring(0,2).toLowerCase(); - } - else { - preferredLang = this.lang.substring(0,2).toLowerCase(); - } - this.descVoices = []; + preferredLang = (this.captionLang) ? this.captionLang.substring(0,2).toLowerCase() : this.lang.substring(0,2).toLowerCase(); + + this.descVoices = []; voices = this.synth.getVoices(); descLangs = this.getDescriptionLangs(); if (voices.length > 0) { @@ -9377,9 +8424,9 @@ if (typeof module !== "undefined" && module.exports) { // match only the first 2 characters of the lang code voiceLang = voices[i].lang.substring(0,2).toLowerCase(); if (voiceLang === preferredLang && (descLangs.indexOf(voiceLang) !== -1)) { - // this voice matches preferredLang + // this voice matches preferredLang // AND there's a matching description track in this language - // Add this voice to final array + // Add this voice to final array this.descVoices.push(voices[i]); } } @@ -9410,51 +8457,44 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setDescriptionVoice = function () { - // set description voice on player init, or when user changes caption language - // Voice is determined in the following order of precedence: - // 1. User's preferred voice for this language, saved in a cookie + // set description voice on player init, or when user changes caption language + // Voice is determined in the following order of precedence: + // 1. User's preferred voice for this language, saved in preferences // 2. The first available voice in the array of available voices for this browser in this language - var cookie, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; - cookie = this.getCookie(); - if (typeof cookie.voices !== 'undefined') { - prefDescVoice = this.getPrefDescVoice(); - } - else { - prefDescVoice = null; - } - + var preferences, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; + preferences = this.getPref(); + prefDescVoice = (typeof preferences.voices !== 'undefined') ? this.getPrefDescVoice() : null; + this.getBrowserVoices(); this.rebuildDescPrefsForm(); - if (this.selectedDescriptions) { + if (this.selectedDescriptions) { descLang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - descLang = this.captionLang; - } - else { - descLang = this.lang; + } else if (this.captionLang) { + descLang = this.captionLang; + } else { + descLang = this.lang; } if (this.synth) { voices = this.synth.getVoices(); if (voices.length > 0) { - if (prefDescVoice) { - // select the language that matches prefDescVoice, if it's available - prefVoiceFound = false; + if (prefDescVoice) { + // select the language that matches prefDescVoice, if it's available + prefVoiceFound = false; for (var i=0; i<voices.length; i++) { // first, be sure voice is the correct language if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { - if (voices[i].name === prefDescVoice) { - descVoice = voices[i].name; - prefVoiceFound = true; + if (voices[i].name === prefDescVoice) { + descVoice = voices[i].name; + prefVoiceFound = true; break; } } } } - if (!prefVoiceFound) { + if (!prefVoiceFound) { // select the first language that matches the first 2 characters of the lang code for (var i=0; i<voices.length; i++) { if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { @@ -9468,10 +8508,9 @@ if (typeof module !== "undefined" && module.exports) { this.prefDescVoiceLang = descLang; // select this voice in the Description Prefs dialog if (this.$voiceSelectField) { - var selectedOption = this.$voiceSelectField.find('option[value="' + this.prefDescVoice + '"]'); this.$voiceSelectField.val(this.prefDescVoice); } - this.updateCookie('voice'); + this.updatePreferences('voice'); } } }; @@ -9485,70 +8524,66 @@ if (typeof module !== "undefined" && module.exports) { // 2. User is toggling description // (playerCreated == true) - var thisObj, i, origSrc, descSrc, srcType, newSource; + var thisObj, i, origSrc, descSrc; thisObj = this; - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; - // get element that has focus at the time swap is initiated - // after player is rebuilt, focus will return to that same element + // get element that has focus at the time swap is initiated + // after player is rebuilt, focus will return to that same element // (if it exists) - this.$focusedElement = $(':focus'); + this.$focusedElement = $(':focus'); + this.activeMedia = this.mediaId; // get current time of current source, and attempt to start new video at the same time - // whether this is possible will be determined after the new media source has loaded - // see onMediaNewSourceLoad() - if (this.elapsed > 0) { - this.swapTime = this.elapsed; + // whether this is possible will be determined after the new media source has loaded + // see onMediaNewSourceLoad() + if (this.elapsed > 0) { + this.swapTime = this.elapsed; + } else { + this.swapTime = 0; } - else { - this.swapTime = 0; - } - if (this.duration > 0) { - this.prevDuration = this.duration; + if (this.duration > 0) { + this.prevDuration = this.duration; } - // Capture current playback state, so media can resume after source is swapped - if (!this.okToPlay) { - this.okToPlay = this.playing; + // Capture current playback state, so media can resume after source is swapped + if (!this.okToPlay) { + this.okToPlay = this.playing; } if (this.descOn) { - // user has requested the described version - this.showAlert(this.tt.alertDescribedVersion); - } - else { - // user has requested the non-described version - this.showAlert(this.tt.alertNonDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); + } else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); } if (this.player === 'html5') { this.swappingSrc = true; - this.paused = true; + this.paused = true; if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-orig-src - origSrc = this.$sources[i].getAttribute('data-orig-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-orig-src') ); srcType = this.$sources[i].getAttribute('type'); if (origSrc) { this.$sources[i].setAttribute('src',origSrc); } - } - } - else { + } + } else { // the non-described version is currently playing. Swap to described. for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-desc-src (if one exists) // then store original source in a new data-orig-src attribute - origSrc = this.$sources[i].getAttribute('src'); - descSrc = this.$sources[i].getAttribute('data-desc-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('src') ); + descSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-desc-src') ); srcType = this.$sources[i].getAttribute('type'); if (descSrc) { this.$sources[i].setAttribute('src',descSrc); @@ -9557,88 +8592,77 @@ if (typeof module !== "undefined" && module.exports) { } } - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - if (this.playerCreated) { - // delete old player, then recreate it with new source & tracks - this.deletePlayer('swap-desc-html'); - this.recreatePlayer().then(function() { - if (!thisObj.loadingMedia) { + return; + } + if (this.playerCreated) { + // delete old player, then recreate it with new source & tracks + this.deletePlayer('swap-desc-html'); + this.recreatePlayer().then(function() { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } }); - } - else { + } else { // player is in the process of being created - // no need to recreate it - } - } - else if (this.player === 'youtube') { - - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeYouTubeId = this.youTubeId; - } - else { - // the non-described version is currently playing. Swap to described. - this.activeYouTubeId = this.youTubeDescId; + // no need to recreate it } + } else if (this.player === 'youtube') { + + // if the described version is currently playing, swap to non-described + this.activeYouTubeId = (this.usingDescribedVersion()) ? this.youTubeId : this.youTubeDescId; + if (typeof this.youTubePlayer !== 'undefined') { - thisObj.swappingSrc = true; + thisObj.swappingSrc = true; if (thisObj.playing) { // loadVideoById() loads and immediately plays the new video at swapTime thisObj.youTubePlayer.loadVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - else { + } else { // cueVideoById() loads the new video and seeks to swapTime, but does not play thisObj.youTubePlayer.cueVideoById(thisObj.activeYouTubeId,thisObj.swapTime); } } - if (this.playerCreated) { - this.deletePlayer('swap-desc-youtube'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-youtube'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { - // nothing to do here - // next steps occur when youtube onReady event fires - // see youtube.js > finalizeYoutubeInit() - }); - } - else if (this.player === 'vimeo') { + return; + } + this.recreatePlayer().then(function() { + // nothing to do here + // next steps occur when youtube onReady event fires + // see youtube.js > finalizeYoutubeInit() + }); + } else if (this.player === 'vimeo') { if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described this.activeVimeoId = this.vimeoId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); + } else { // the non-described version is currently playing. Swap to described. this.activeVimeoId = this.vimeoDescId; - this.showAlert(this.tt.alertDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); } - if (this.playerCreated) { - this.deletePlayer('swap-desc-vimeo'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-vimeo'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { + return; + } + this.recreatePlayer().then(function() { // load the new video source thisObj.vimeoPlayer.loadVideo(thisObj.activeVimeoId).then(function() { if (thisObj.playing) { // video was playing when user requested an alternative version // seek to swapTime and continue playback (playback happens automatically) thisObj.vimeoPlayer.setCurrentTime(thisObj.swapTime); - } - else { + } else { // Vimeo autostarts immediately after video loads // The "Described" button should not trigger playback, so stop this before the user notices. thisObj.vimeoPlayer.pause(); @@ -9649,36 +8673,30 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.showDescription = function(now) { - - if (!this.hasClosedDesc \|\| this.swappingSrc \|\| !this.descOn \|\| this.descMethod === 'video') { + if (!this.playing \|\| !this.hasClosedDesc \|\| this.swappingSrc \|\| !this.descOn \|\| ( this.descMethod === 'video' && !this.prefDescVisible ) ) { return; } - var thisObj, i, cues, d, thisDescription, descText, msg; + var thisObj, cues, d, thisDescription, descText; thisObj = this; var flattenComponentForDescription = function (component) { var result = []; if (component.type === 'string') { result.push(component.value); - } - else { + } else { for (var i = 0; i < component.children.length; i++) { result.push(flattenComponentForDescription(component.children[i])); } } return result.join(''); }; - + cues = []; if (this.selectedDescriptions) { cues = this.selectedDescriptions.cues; - } - else if (this.descriptions.length >= 1) { + } else if (this.descriptions.length >= 1) { cues = this.descriptions[0].cues; } - else { - cues = []; - } for (d = 0; d < cues.length; d++) { if ((cues[d].start <= now) && (cues[d].end > now)) { thisDescription = d; @@ -9687,35 +8705,35 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisDescription !== 'undefined') { if (this.currentDescription !== thisDescription) { - // temporarily remove aria-live from $status in order to prevent description from being interrupted + // temporarily remove aria-live from $status to prevent description from being interrupted this.$status.removeAttr('aria-live'); descText = flattenComponentForDescription(cues[thisDescription].components); - if (this.descReader === 'screenreader') { + if (this.descReader === 'screenreader') { // load the new description into the container div for screen readers to read this.$descDiv.html(descText); - } - else if (this.speechEnabled) { - // use browser's built-in speech synthesis - this.announceDescriptionText('description',descText); + } else if (this.speechEnabled) { + if ( 'video' !== this.descMethod ) { + // use browser's built-in speech synthesis + this.announceDescriptionText('description',descText); + } if (this.prefDescVisible) { // write description to the screen for sighted users // but remove ARIA attributes since it isn't intended to be read by screen readers this.$descDiv.html(descText).removeAttr('aria-live aria-atomic'); } - } - else { + } else { // browser does not support speech synthesis // load the new description into the container div for screen readers to read this.$descDiv.html(descText); } + // Only pause video if not using a described video. if (this.prefDescPause && this.descMethod === 'text') { this.pauseMedia(); this.pausedForDescription = true; } this.currentDescription = thisDescription; } - } - else { + } else { this.$descDiv.html(''); this.currentDescription = -1; // restore aria-live to $status @@ -9723,42 +8741,33 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - - // called when user changed playback rate - // adjust rate of audio description to match + AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - var speechRate; + // called when user changed playback rate + // adjust rate of audio description to match + var speechRate; - if (rate === 0.5) { - speechRate = 0.7; // option 1 in prefs menu - } - else if (rate === 0.75) { - speechRate = 0.8; // option 2 in prefs menu - } - else if (rate === 1.0) { + if (rate === 0.5) { + speechRate = 0.7; // option 1 in prefs menu + } else if (rate === 0.75) { + speechRate = 0.8; // option 2 in prefs menu + } else if (rate === 1.0) { speechRate = 1; // option 4 in prefs menu (normal speech, default) - } - else if (rate === 1.25) { + } else if (rate === 1.25) { speechRate = 1.1; // option 5 in prefs menu - } - else if (rate === 1.5) { - speechRate = 1.2; // option 6 in prefs menu - } - else if (rate === 1.75) { - speechRate = 1.5; // option 7 in prefs menu - } - else if (rate === 2.0) { + } else if (rate === 1.5) { + speechRate = 1.2; // option 6 in prefs menu + } else if (rate === 1.75) { + speechRate = 1.5; // option 7 in prefs menu + } else if (rate === 2.0) { speechRate = 2; // option 8 in prefs menu (fast) - } - else if (rate === 2.25) { + } else if (rate === 2.25) { speechRate = 2.5; // option 9 in prefs menu (very fast) - } - else if (rate >= 2.5) { - speechRate = 3; // option 10 in prefs menu (super fast) + } else if (rate >= 2.5) { + speechRate = 3; // option 10 in prefs menu (super fast) } this.prefDescRate = speechRate; - }; + }; AblePlayer.prototype.announceDescriptionText = function(context, text) { @@ -9788,10 +8797,10 @@ if (typeof module !== "undefined" && module.exports) { // and typically requires a computer reboot to make right again. // This has been observed frequently in macOS Big Sur, but also in Windows 10 // To ignore user's voice preferences and always use the first voice, set the following var to true - // This is for testing only; not recommended for production - // unless the voice select field is also removed from the Prefs dialog + // This is for testing only; not recommended for production + // unless the voice select field is also removed from the Prefs dialog var useFirstVoice = false; - + if (!this.speechEnabled) { // voices array failed to load the first time. Try again this.initSpeech('desc'); @@ -9803,8 +8812,7 @@ if (typeof module !== "undefined" && module.exports) { pitch = $('#' + this.mediaId + '_prefDescPitch').val(); rate = $('#' + this.mediaId + '_prefDescRate').val(); volume = $('#' + this.mediaId + '_prefDescVolume').val(); - } - else { + } else { // get settings from global prefs voiceName = this.prefDescVoice; pitch = this.prefDescPitch; @@ -9817,8 +8825,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.descVoices.length > 0) { if (useFirstVoice) { voice = this.descVoices[0]; - } - else if (voiceName) { + } else if (voiceName) { // get the voice that matches user's preferred voiceName for (i = 0; i < this.descVoices.length; i++) { if (this.descVoices[i].name == voiceName) { @@ -9832,63 +8839,62 @@ if (typeof module !== "undefined" && module.exports) { // use the first voice in the array voice = this.descVoices[0]; } - utterance = new SpeechSynthesisUtterance(); - utterance.voice = voice; - utterance.voiceURI = 'native'; - utterance.volume = volume; - utterance.rate = rate; - utterance.pitch = pitch; - utterance.text = text; - // TODO: Consider the best language for the utterance: - // language of the web page? (this.lang) - // language of the WebVTT description track? - // language of the user's chosen voice? - // If there's a mismatch between any of these, the description will likely be unintelligible - utterance.lang = this.lang; - utterance.onstart = function(e) { - // utterance has started - }; - utterance.onpause = function(e) { - // utterance has paused - }; - utterance.onend = function(e) { - // utterance has ended - this.speakingDescription = false; - timeElapsed = e.elapsedTime; - // As of Firefox 95, e.elapsedTime is expressed in seconds - // Other browsers (tested in Chrome & Edge) express this in milliseconds - // Assume no utterance will require over 100 seconds to express... - if (timeElapsed > 100) { - // time is likely expressed in milliseconds - secondsElapsed = (e.elapsedTime/1000).toFixed(2); - } - else { - // time is likely already expressed in seconds; just need to round it - secondsElapsed = (e.elapsedTime).toFixed(2); - } - if (this.debug) { - console.log('Finished speaking. That took ' + secondsElapsed + ' seconds.'); - } - if (context === 'description') { - if (thisObj.prefDescPause) { - if (thisObj.pausedForDescription) { - thisObj.playMedia(); - this.pausedForDescription = false; - } - } + } + } else { + voice = null; + } + utterance = new SpeechSynthesisUtterance(); + if (voice) { + utterance.voice = voice; + } + utterance.voiceURI = 'native'; + utterance.volume = volume; + utterance.rate = rate; + utterance.pitch = pitch; + utterance.text = text; + // TODO: Consider the best language for the utterance: + // language of the web page? (this.lang) + // language of the WebVTT description track? + // language of the user's chosen voice? + // If there's a mismatch between any of these, the description will likely be unintelligible + utterance.lang = this.lang; + utterance.onstart = function(e) { + // utterance has started + }; + utterance.onpause = function(e) { + // utterance has paused + }; + utterance.onend = function(e) { + // utterance has ended + this.speakingDescription = false; + timeElapsed = e.elapsedTime; + // As of Firefox 95, e.elapsedTime is expressed in seconds + // Other browsers (tested in Chrome & Edge) express this in milliseconds + // Assume no utterance will require over 100 seconds to express... + // If a large value, time is likely expressed in milliseconds. + secondsElapsed = (timeElapsed > 100) ? (e.elapsedTime/1000).toFixed(2) : (e.elapsedTime).toFixed(2); + + if (this.debug) { + console.log('Finished speaking. That took ' + secondsElapsed + ' seconds.'); + } + if (context === 'description') { + if (thisObj.prefDescPause) { + if (thisObj.pausedForDescription) { + thisObj.playMedia(); + this.pausedForDescription = false; } - }; - utterance.onerror = function(e) { - // handle error - console.log('Web Speech API error',e); - }; - if (this.synth.paused) { - this.synth.resume(); } - this.synth.speak(utterance); - this.speakingDescription = true; } + }; + utterance.onerror = function(e) { + // handle error + console.log('Web Speech API error',e); + }; + if (this.synth.paused) { + this.synth.resume(); } + this.synth.speak(utterance); + this.speakingDescription = true; }; })(jQuery); @@ -9897,7 +8903,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isIOS = function(version) { - // return true if this is IOS + // return true if this is iOS // if version is provided check for a particular version var userAgent, iOS; @@ -9909,61 +8915,48 @@ if (typeof module !== "undefined" && module.exports) { if (userAgent.indexOf('os ' + version) !== -1) { // this is the target version of iOS return true; - } - else { + } else { return false; } - } - else { + } else { // no version was specified return true; } - } - else { - // this is not IOS + } else { + // this is not iOS return false; } }; AblePlayer.prototype.browserSupportsVolume = function() { - // To test whether the browser supports changing the volume, - // create a new audio element and try setting the volume to something other than 1. - // Then, retrieve the current setting to see if it preserved it. + // To test whether the browser supports changing the volume, + // create a new audio element and try setting the volume to something other than 1. + // Then, retrieve the current setting to see if it preserved it. + // This doesn't work in iOS by design: https://developer.apple.com/documentation/avfoundation/avplayer/volume - // Unfortunately, this doesn't work in iOS. In 2022, our tests yield the same results as reported here: - // https://stackoverflow.com/questions/72861253/how-do-i-detect-if-a-browser-does-not-support-changing-html-audio-volume + var audio, testVolume; - // So, unfortunately we have to resort to sniffing for iOS - // before testing for support in other browsers - var audio, testVolume; - - if (this.isIOS()) { - return false; - } + if (this.isIOS()) { + return false; + } - testVolume = 0.9; // any value between 0.1 and 0.9 - audio = new Audio(); - audio.volume = testVolume; - if (audio.volume === testVolume) { - return true; - } - else { - return false; - } + testVolume = 0.9; // any value between 0.1 and 0.9 + audio = new Audio(); + audio.volume = testVolume; + + return ( audio.volume === testVolume ); }; AblePlayer.prototype.nativeFullscreenSupported = function () { - return document.fullscreenEnabled \|\| - document.webkitFullscreenEnabled \|\| - document.mozFullscreenEnabled \|\| - document.msFullscreenEnabled; + return document.fullscreenEnabled \|\| document.webkitFullscreenEnabled; }; })(jQuery); (function ($) { + AblePlayer.prototype.seekTo = function (newTime) { var thisObj = this; @@ -9976,10 +8969,12 @@ if (typeof module !== "undefined" && module.exports) { this.seeking = true; this.liveUpdatePending = true; - if (this.speakingDescription) { - this.synth.cancel(); + if (this.speakingDescription) { + this.synth.cancel(); } + this.syncSignVideo( {'time' : this.startTime } ); + if (this.player === 'html5') { var seekable; @@ -9990,23 +8985,19 @@ if (typeof module !== "undefined" && module.exports) { // ok to seek to startTime // canplaythrough will be triggered when seeking is complete // this.seeking will be set to false at that point - this.media.currentTime = this.startTime; - this.seekStatus = 'complete'; - if (this.hasSignLanguage && this.signVideo) { - // keep sign languge video in sync - this.signVideo.currentTime = this.startTime; - } + this.media.currentTime = this.startTime; + this.seekStatus = 'complete'; + this.syncSignVideo( { 'time' : this.startTime } ); } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.seekTo(newTime,true); if (newTime > 0) { if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } } - } - else if (this.player === 'vimeo') { + this.syncSignVideo( {'time' : newTime } ); + } else if (this.player === 'vimeo') { this.vimeoPlayer.setCurrentTime(newTime).then(function() { // seek finished. // successful completion also fires a 'seeked' event (see event.js) @@ -10036,15 +9027,14 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj, mediaTimes; mediaTimes = {}; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (typeof duration !== 'undefined' && typeof elapsed !== 'undefined') { mediaTimes['duration'] = duration; mediaTimes['elapsed'] = elapsed; deferred.resolve(mediaTimes); - } - else { + } else { this.getDuration().then(function(duration) { mediaTimes['duration'] = thisObj.roundDown(duration,6); thisObj.getElapsed().then(function(elapsed) { @@ -10062,7 +9052,7 @@ if (typeof module !== "undefined" && module.exports) { // function is called by getMediaTimes, and return value is sanitized there var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -10071,39 +9061,32 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getDuration().then(function(duration) { if (duration === undefined \|\| isNaN(duration) \|\| duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var duration; if (this.player === 'html5') { - duration = this.media.duration; - } - else if (this.player === 'youtube') { + duration = this.media.duration; + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { - if (this.duration > 0) { + if (this.duration > 0) { // duration was already retrieved while checking for captions - duration = this.duration; - } - else { + duration = this.duration; + } else { duration = this.youTubePlayer.getDuration(); } - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet duration = 0; } } if (duration === undefined \|\| isNaN(duration) \|\| duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } } @@ -10117,7 +9100,7 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -10126,33 +9109,27 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getCurrentTime().then(function(elapsed) { if (elapsed === undefined \|\| isNaN(elapsed) \|\| elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var elapsed; if (this.player === 'html5') { elapsed = this.media.currentTime; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { elapsed = this.youTubePlayer.getCurrentTime(); - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet elapsed = 0; } } if (elapsed === undefined \|\| isNaN(elapsed) \|\| elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } } @@ -10162,71 +9139,51 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getPlayerState = function () { // Returns one of the following states: - // 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. - // 'ended' - Finished playing. - // 'paused' - Not playing, but not stopped or ended. - // 'buffering' - Momentarily paused to load, but will resume once data is loaded. - // 'playing' - Currently playing. - - // Commented out the following in 3.2.1 - not sure of its intended purpose - // It can be useful to know player state even when swapping src - // and the overhead is seemingly minimal - // TODO - Investigate this further. Delete if it's not needed - / - if (this.swappingSrc) { - return; - } - / - var deferred, promise, thisObj, duration, elapsed; - deferred = new $.Deferred(); + // - 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. + // - 'ended' - Finished playing. + // - 'paused' - Not playing, but not stopped or ended. + // - 'buffering' - Momentarily paused to load, but will resume once data is loaded. + // - 'playing' - Currently playing. + + var deferred, promise, thisObj; + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (this.player === 'html5') { if (this.media.ended) { deferred.resolve('ended'); - } - else if (this.media.paused) { + } else if (this.media.paused) { deferred.resolve('paused'); - } - else if (this.media.readyState !== 4) { + } else if (this.media.readyState !== 4) { deferred.resolve('buffering'); - } - else { + } else { deferred.resolve('playing'); } - } - else if (this.player === 'youtube' && this.youTubePlayerReady) { + } else if (this.player === 'youtube' && this.youTubePlayerReady) { var state = this.youTubePlayer.getPlayerState(); if (state === -1 \|\| state === 5) { deferred.resolve('stopped'); - } - else if (state === 0) { + } else if (state === 0) { deferred.resolve('ended'); - } - else if (state === 1) { + } else if (state === 1) { deferred.resolve('playing'); - } - else if (state === 2) { + } else if (state === 2) { deferred.resolve('paused'); - } - else if (state === 3) { + } else if (state === 3) { deferred.resolve('buffering'); } - } - else if (this.player === 'vimeo' && this.vimeoPlayer) { + } else if (this.player === 'vimeo' && this.vimeoPlayer) { // curiously, Vimeo's API has no getPlaying(), getBuffering(), or getState() methods // so maybe if it's neither paused nor ended, it must be playing??? this.vimeoPlayer.getPaused().then(function(paused) { if (paused) { deferred.resolve('paused'); - } - else { + } else { thisObj.vimeoPlayer.getEnded().then(function(ended) { if (ended) { deferred.resolve('ended'); - } - else { + } else { deferred.resolve('playing'); } }); @@ -10239,89 +9196,63 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isPlaybackRateSupported = function () { if (this.player === 'html5') { - if (this.media.playbackRate) { - return true; - } - else { - return false; - } - } - else if (this.player === 'youtube') { - // Youtube supports varying playback rates per video. + return (this.media.playbackRate) ? true : false; + } else if (this.player === 'youtube') { + // Youtube supports varying playback rates per video. // Only expose controls if more than one playback rate is available. - if (this.youTubePlayerReady) { - if (this.youTubePlayer.getAvailablePlaybackRates().length > 1) { - return true; - } - else { - return false; - } - } - else { + if (this.youTubePlayerReady) { + return (this.youTubePlayer.getAvailablePlaybackRates().length > 1) ? true : false; + } else { return false; } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // since this takes longer to determine, it was set previously in initVimeoPlayer() return this.vimeoSupportsPlaybackRateChange; } }; AblePlayer.prototype.setPlaybackRate = function (rate) { - + rate = Math.max(0.5, rate); - if (this.hasClosedDesc && this.descMethod === 'text') { - // keep speech rate in sync with playback rate even if descOn is false - this.syncSpeechToPlaybackRate(rate); + if (this.hasClosedDesc && this.descMethod === 'text') { + // keep speech rate in sync with playback rate even if descOn is false + this.syncSpeechToPlaybackRate(rate); } + this.syncSignVideo( {'rate' : rate } ); + if (this.player === 'html5') { this.media.playbackRate = rate; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.setPlaybackRate(rate); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.setPlaybackRate(rate); } - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.playbackRate = rate; - } + this.syncSignVideo( { 'rate' : rate } ); this.playbackRate = rate; - this.$speed.text(this.tt.speed + ': ' + rate.toFixed(2).toString() + 'x'); - }; + this.$speed.text( this.translate( 'speed', 'Speed' ) + ': ' + rate.toFixed(2).toString() + 'x'); + }; AblePlayer.prototype.getPlaybackRate = function () { if (this.player === 'html5') { return this.media.playbackRate; - } - else if (this.player === 'youtube') { - if (this.youTubePlayerReady) { - return this.youTubePlayer.getPlaybackRate(); - } + } else if (this.player === 'youtube' && (this.youTubePlayerReady)) { + return this.youTubePlayer.getPlaybackRate(); } }; AblePlayer.prototype.isPaused = function () { - // Note there are three player states that count as paused in this sense, + // Note there are three player states that count as paused in this sense, // and one of them is named 'paused'. // A better name would be 'isCurrentlyNotPlayingOrBuffering' - var state; - if (this.player === 'vimeo') { // just rely on value of this.playing - if (this.playing) { - return false; - } - else { - return true; - } - } - else { + return (this.playing) ? false : true; + } else { this.getPlayerState().then(function(state) { // if any of the following is true, consider the media 'paused' return state === 'paused' \|\| state === 'stopped' \|\| state === 'ended'; @@ -10329,43 +9260,71 @@ if (typeof module !== "undefined" && module.exports) { } }; + AblePlayer.prototype.syncSignVideo = function(options) { + if (this.hasSignLanguage && ( this.signVideo \|\| this.signYoutube ) ) { + if (options && typeof options.time !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.currentTime = options.time; + } else { + this.youTubeSignPlayer.seekTo(options.time,true); + } + } + if (options && typeof options.rate !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.playbackRate = options.rate; + } else { + this.youTubeSignPlayer.setPlaybackRate(options.rate); + } + } + if (options && typeof options.pause !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.pause(true); + } else { + this.youTubeSignPlayer.pauseVideo(); + } + } + if (options && typeof options.play !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.play(true); + } else { + this.youTubeSignPlayer.playVideo(); + } + } + if (options && typeof options.volume !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.volume = 0; + } + } + } + }; + AblePlayer.prototype.pauseMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'pause' : true } ); if (this.player === 'html5') { this.media.pause(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.pause(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.pauseVideo(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.pause(); } }; AblePlayer.prototype.playMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'play' : true } ); if (this.player === 'html5') { this.media.play(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.play(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.playVideo(); if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } this.stoppingYouTube = false; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.play(); } this.startedPlaying = true; @@ -10379,44 +9338,19 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.fadeControls = function(direction) { // Visibly fade controls without hiding them from screen reader users - // direction is either 'out' or 'in' - // TODO: This still needs work. // After the player fades, it's replaced by an empty space // Would be better if the video and captions expanded to fill the void - // Attempted to fade out to 0 opacity, then move the playerDiv offscreen - // and expand the mediaContainer to fill the vacated space - // However, my attempts to do this have been choppy and buggy - // Code is preserved below and commented out + // replace JS animation with CSS animation in 12/2025. - var thisObj, mediaHeight, playerHeight, newMediaHeight; var thisObj = this; if (direction == 'out') { // get the original height of two key components: - mediaHeight = this.$mediaContainer.height(); - playerHeight = this.$playerDiv.height(); - newMediaHeight = mediaHeight + playerHeight; - - // fade slowly to transparency - this.$playerDiv.fadeTo(2000,0,function() { - / - // when finished, position playerDiv offscreen - // thisObj.$playerDiv.addClass('able-offscreen'); - // Expand the height of mediaContainer to fill the void (needs work) - thisObj.$mediaContainer.animate({ - height: newMediaHeight - },500); - / - }); - } - else if (direction == 'in') { - // restore captionsContainer to its original height (needs work) - // this.$mediaContainer.removeAttr('style'); - // fade relatively quickly back to its original position with full opacity - // this.$playerDiv.removeClass('able-offscreen').fadeTo(100,1); - this.$playerDiv.fadeTo(100,1); + this.$playerDiv.addClass( 'fade-out' ).removeClass( 'fade-in' ); + } else if (direction == 'in') { + this.$playerDiv.addClass( 'fade-in' ).removeClass( 'fade-out' ); } }; @@ -10434,7 +9368,7 @@ if (typeof module !== "undefined" && module.exports) { this.hideControlsTimeoutStatus = 'active'; }; - AblePlayer.prototype.refreshControls = function(context, duration, elapsed) { + AblePlayer.prototype.refreshControls = function(context = 'init', duration, elapsed) { // context is one of the following: // 'init' - initial build (or subsequent change that requires full rebuild) @@ -10455,34 +9389,30 @@ if (typeof module !== "undefined" && module.exports) { // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx - var thisObj, duration, elapsed, lastChapterIndex, displayElapsed, - updateLive, textByState, timestamp, widthUsed, - leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount, - buffered, newTop, statusBarHeight, speedHeight, statusBarWidthBreakpoint, - newSvgData; + var thisObj, duration, textByState, timestamp, captionsCount, newTop, statusBarWidthBreakpoint; thisObj = this; - if (this.swappingSrc) { - if (this.playing) { - // wait until new source has loaded before refreshing controls - // can't wait if player is NOT playing because some critical events - // won't fire until playback of new media starts - return; - } + // wait until new source has loaded before refreshing controls + // some critical events won't fire until playback of new media starts + if ( this.swappingSrc && this.playing ) { + return; } - if (context === 'timeline' \|\| context === 'init') { - // all timeline-related functionality requires both duration and elapsed + if ( context === 'timeline' \|\| context === 'init' ) { + // Update timeline controls. + var lastChapterIndex, displayElapsed, updateLive, widthUsed, + leftControls, rightControls, seekbarWidth, buffered; + // all timeline-related functionality requires duration if (typeof this.duration === 'undefined') { - // wait until duration is known before proceeding with refresh - return; + // wait until duration is known before proceeding with refresh + return; } if (this.useChapterTimes) { this.chapterDuration = this.getChapterDuration(); this.chapterElapsed = this.getChapterElapsed(); } - if (this.useFixedSeekInterval === false && this.seekIntervalCalculated === false && this.duration > 0) { + if ( !this.useFixedSeekInterval && !this.seekIntervalCalculated && this.duration > 0) { // couldn't calculate seekInterval previously; try again. this.setSeekInterval(); } @@ -10496,32 +9426,26 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends // need to adjust seekbar duration to match video end this.seekBar.setDuration(this.duration - this.currentChapter.start); - } - else { + } else { this.seekBar.setDuration(this.chapterDuration); } - } - else { + } else { // this is not the last chapter this.seekBar.setDuration(this.chapterDuration); } - } - else { - if (!(this.duration === undefined \|\| isNaN(this.duration) \|\| this.duration === -1)) { - this.seekBar.setDuration(this.duration); - } + } else if ( !(this.duration === undefined \|\| isNaN(this.duration) \|\| this.duration === -1) ) { + this.seekBar.setDuration(this.duration); } if (!(this.seekBar.tracking)) { // Only update the aria live region if we have an update pending // (from a seek button control) or if the seekBar has focus. // We use document.activeElement instead of $(':focus') due to a strange bug: - // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. + // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. updateLive = this.liveUpdatePending \|\| this.seekBar.seekHead.is($(document.activeElement)); this.liveUpdatePending = false; if (this.useChapterTimes) { this.seekBar.setPosition(this.chapterElapsed, updateLive); - } - else { + } else { this.seekBar.setPosition(this.elapsed, updateLive); } } @@ -10529,22 +9453,15 @@ if (typeof module !== "undefined" && module.exports) { // When seeking, display the seek bar time instead of the actual elapsed time. if (this.seekBar.tracking) { displayElapsed = this.seekBar.lastTrackPosition; - } - else { - if (this.useChapterTimes) { - displayElapsed = this.chapterElapsed; - } - else { - displayElapsed = this.elapsed; - } + } else { + displayElapsed = ( this.useChapterTimes ) ? this.chapterElapsed : this.elapsed; } } // update elapsed & duration if (typeof this.$durationContainer !== 'undefined') { if (this.useChapterTimes) { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.chapterDuration)); - } - else { + } else { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.duration)); } } @@ -10556,27 +9473,22 @@ if (typeof module !== "undefined" && module.exports) { // Update seekbar width. // To do this, we need to calculate the width of all buttons surrounding it. if (this.seekBar) { - widthUsed = 0; + let controlWrapper = this.seekBar.wrapperDiv.parent().parent(); leftControls = this.seekBar.wrapperDiv.parent().prev('div.able-left-controls'); rightControls = leftControls.next('div.able-right-controls'); - leftControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); // true = include margin - } - }); + widthUsed = leftControls.outerWidth(true); rightControls.children().each(function () { if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); + widthUsed += $(this).outerWidth(true) + 5; } }); if (this.fullscreen) { seekbarWidth = $(window).width() - widthUsed; - } - else { + } else { // seekbar is wide enough to fill the remaining space - // include a 5px buffer to account for minor browser differences - seekbarWidth = this.$ableWrapper.width() - widthUsed - 5; - } + // include a 10px buffer to account for minor browser differences or custom styles. + seekbarWidth = controlWrapper.width() - widthUsed - 10; + } // Sometimes some minor fluctuations based on browser weirdness, so set a threshold. if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) { this.seekBar.setWidth(seekbarWidth); @@ -10587,122 +9499,69 @@ if (typeof module !== "undefined" && module.exports) { // Update buffering progress. // TODO: Currently only using the first HTML5 buffered interval, // but this fails sometimes when buffering is split into two or more intervals. - if (this.player === 'html5') { - if (this.media.buffered.length > 0) { - buffered = this.media.buffered.end(0); - if (this.useChapterTimes) { - if (buffered > this.chapterDuration) { - buffered = this.chapterDuration; - } - if (this.seekBar) { - this.seekBar.setBuffered(buffered / this.chapterDuration); - } - } - else { - if (this.seekBar) { - if (!isNaN(buffered)) { - this.seekBar.setBuffered(buffered / duration); - } - } + if (this.player === 'html5' && this.media.buffered.length > 0) { + buffered = this.media.buffered.end(0); + if (this.useChapterTimes) { + if (buffered > this.chapterDuration) { + buffered = this.chapterDuration; } - } - } - else if (this.player === 'youtube') { - if (this.seekBar) { - if (this.youTubePlayerReady) { - this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + if (this.seekBar) { + this.seekBar.setBuffered(buffered / this.chapterDuration); } + } else if ( this.seekBar && !isNaN(buffered) ) { + this.seekBar.setBuffered(buffered / duration); } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'youtube' && this.seekBar && this.youTubePlayerReady ) { + this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + } else if (this.player === 'vimeo') { // TODO: Add support for Vimeo buffering update } - } // end if context == 'timeline' or 'init' - - if (context === 'descriptions' \|\| context == 'init'){ + } + if (context === 'descriptions' \|\| context == 'init') { if (this.$descButton) { - if (this.descOn) { - this.$descButton.removeClass('buttonOff').attr('aria-label',this.tt.turnOffDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOffDescriptions); - } - else { - this.$descButton.addClass('buttonOff').attr('aria-label',this.tt.turnOnDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOnDescriptions); - } + this.toggleButtonState( + this.$descButton, + this.descOn, + this.translate( 'turnOffDescriptions', 'Turn off descriptions' ), + this.translate( 'turnOnDescriptions', 'Turn on descriptions' ), + ); } } - if (context === 'captions' \|\| context == 'init'){ + if (context === 'captions' \|\| context == 'init') { if (this.$ccButton) { captionsCount = this.captions.length; - - // Button has a different title depending on the number of captions. - // If only one caption track, this is "Show captions" and "Hide captions" - // Otherwise, it is just always "Captions" - if (!this.captionsOn) { - this.$ccButton.addClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'false') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.showCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.showCaptions); - } - } - else { - this.$ccButton.removeClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'true') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.hideCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.hideCaptions); - } - } - if (captionsCount > 1) { this.$ccButton.attr({ - 'aria-label': this.tt.captions, 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-captions-menu' }); - this.$ccButton.find('span.able-clipped').text(this.tt.captions); } + var ariaLabelOn = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + var ariaPressed = ( captionsCount > 1 ) ? true : false; + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); } } if (context === 'fullscreen' \|\| context == 'init'){ if (this.$fullscreenButton) { if (!this.fullscreen) { - this.$fullscreenButton.attr('aria-label', this.tt.enterFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-collapse').addClass('icon-fullscreen-expand'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-expand'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenExpandButtonImg); - } - } - else { - this.$fullscreenButton.attr('aria-label',this.tt.exitFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-expand').addClass('icon-fullscreen-collapse'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-collapse'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenCollapseButtonImg); - } + this.$fullscreenButton.attr( 'aria-label', this.translate( 'enterFullScreen', 'Enter full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-expand' ); + } else { + this.$fullscreenButton.attr('aria-label', this.translate( 'exitFullScreen', 'Exit full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-collapse' ); } } } @@ -10713,18 +9572,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.hideBigPlayButton) { this.$bigPlayButton.show(); this.$bigPlayButton.attr('aria-hidden', 'false'); - - } - if (this.fullscreen) { - this.$bigPlayButton.width($(window).width()); - this.$bigPlayButton.height($(window).height()); } - else { - this.$bigPlayButton.width(this.$mediaContainer.width()); - this.$bigPlayButton.height(this.$mediaContainer.height()); - } - } - else { + } else { this.$bigPlayButton.hide(); this.$bigPlayButton.attr('aria-hidden', 'true'); } @@ -10738,8 +9587,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.prefAutoScrollTranscript === 1) { this.autoScrollTranscript = true; this.$autoScrollTranscriptCheckbox.prop('checked',true); - } - else { + } else { this.autoScrollTranscript = false; this.$autoScrollTranscriptCheckbox.prop('checked',false); } @@ -10757,8 +9605,8 @@ if (typeof module !== "undefined" && module.exports) { // only scroll once after moving a highlight if (this.movingHighlight) { this.$transcriptDiv.scrollTop(newTop); - this.movingHighlight = false; - } + this.movingHighlight = false; + } } } } @@ -10768,7 +9616,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$chaptersButton) { this.$chaptersButton.attr({ - 'aria-label': this.tt.chapters, + 'aria-label': this.translate( 'chapters', 'Chapters' ), 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-chapters-menu' }); @@ -10779,231 +9627,139 @@ if (typeof module !== "undefined" && module.exports) { // update status textByState = { - 'stopped': this.tt.statusStopped, - 'paused': this.tt.statusPaused, - 'playing': this.tt.statusPlaying, - 'buffering': this.tt.statusBuffering, - 'ended': this.tt.statusEnd + 'stopped': this.translate( 'statusStopped', 'Stopped' ), + 'paused': this.translate( 'statusPaused', 'Paused' ), + 'playing': this.translate( 'statusPlaying', 'Playing' ), + 'buffering': this.translate( 'statusBuffering', 'Buffering' ), + 'ended': this.translate( 'statusEnd', 'End of track' ) }; if (this.stoppingYouTube) { - // stoppingYouTube is true temporarily while video is paused and seeking to 0 - // See notes in handleRestart() - // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) - if (this.$status.text() !== this.tt.statusStopped) { - this.$status.text(this.tt.statusStopped); - } - if (this.$playpauseButton.find('span').first().hasClass('icon-pause')) { - if (this.iconType === 'font') { - this.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('play'); - this.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - this.$playpauseButton.find('path').attr('d',newSvgData[1]); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else { - this.$playpauseButton.find('img').attr('src',this.playButtonImg); - } - } - } - else { - if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Update the text only if it's changed since it has role="alert"; - // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. - this.getPlayerState().then(function(currentState) { - if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { - // Debounce updates; only update after status has stayed steadily different for a while - // "A while" is defined differently depending on context - if (thisObj.swappingSrc) { - // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), - // so set a longer wait time before writing a status message - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) - } - } - else { - // for all other contexts (e.g., users clicks Play/Pause) - // user should receive more rapid feedback - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 250; // in ms - } - } - timestamp = (new Date()).getTime(); - if (!thisObj.statusDebounceStart) { - thisObj.statusDebounceStart = timestamp; - // Call refreshControls() again after allotted time has passed - thisObj.debouncingStatus = true; - thisObj.statusTimeout = setTimeout(function () { - thisObj.debouncingStatus = false; - thisObj.refreshControls(context); - }, thisObj.statusMessageThreshold); - } - else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { - thisObj.$status.text(textByState[currentState]); - thisObj.statusDebounceStart = null; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - } - else { - thisObj.statusDebounceStart = null; - thisObj.debouncingStatus = false; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - // Don't change play/pause button display while using the seek bar (or if YouTube stopped) - if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { - if (currentState === 'paused' \|\| currentState === 'stopped' \|\| currentState === 'ended') { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('play'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.playButtonImg); - } - } - else { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-play').addClass('icon-pause'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('pause'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.pauseButtonImg); - } + // stoppingYouTube is true temporarily while video is paused and seeking to 0 + // See notes in handleRestart() + // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) + if (this.$status.text() !== this.translate( 'statusStopped', 'Stopped' ) ) { + this.$status.text( this.translate( 'statusStopped', 'Stopped' ) ); + } + this.getIcon( this.$playpauseButton, 'play' ); + } else if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { + // Update the text only if it's changed since it has role="alert"; + // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. + this.getPlayerState().then(function(currentState) { + if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { + // Debounce updates; only update after status has stayed steadily different for a while + // "A while" is defined differently depending on context + if (thisObj.swappingSrc) { + // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), + // so set a longer wait time before writing a status message + if (!thisObj.debouncingStatus) { + thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) } + } else if (!thisObj.debouncingStatus) { + // for all other contexts (e.g., users clicks Play/Pause) + // user should receive more rapid feedback + thisObj.statusMessageThreshold = 250; // in ms } - }); - } + timestamp = (new Date()).getTime(); + if (!thisObj.statusDebounceStart) { + thisObj.statusDebounceStart = timestamp; + // Call refreshControls() again after allotted time has passed + thisObj.debouncingStatus = true; + thisObj.statusTimeout = setTimeout(function () { + thisObj.debouncingStatus = false; + thisObj.refreshControls(context); + }, thisObj.statusMessageThreshold); + } else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { + thisObj.$status.text(textByState[currentState]); + thisObj.statusDebounceStart = null; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + } else { + thisObj.statusDebounceStart = null; + thisObj.debouncingStatus = false; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + // Don't change play/pause button display while using the seek bar (or if YouTube stopped) + if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { + if (currentState === 'paused' \|\| currentState === 'stopped' \|\| currentState === 'ended') { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); + thisObj.getIcon( thisObj.$playpauseButton, 'play' ); + } else { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); + thisObj.getIcon( thisObj.$playpauseButton, 'pause' ); + } + } + }); } } // Show/hide status bar content conditionally if (!this.fullscreen) { statusBarWidthBreakpoint = 300; - statusBarHeight = this.$statusBarDiv.height(); - speedHeight = this.$statusBarDiv.find('span.able-speed').height(); - if (speedHeight > (statusBarHeight + 5)) { - // speed bar is wrapping (happens often in German player) + if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { + // Player is too small for a speed span this.$statusBarDiv.find('span.able-speed').hide(); this.hidingSpeed = true; - } - else { + } else { if (this.hidingSpeed) { this.$statusBarDiv.find('span.able-speed').show(); this.hidingSpeed = false; } - if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { - // Player is too small for a speed span - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - } } } }; - AblePlayer.prototype.getHiddenWidth = function($el) { - - // jQuery returns for width() if element is hidden - // this function is a workaround - - // save a reference to a cloned element that can be measured - var $hiddenElement = $el.clone().appendTo('body'); - - // calculate the width of the clone - var width = $hiddenElement.outerWidth(); - - // remove the clone from the DOM - $hiddenElement.remove(); - - return width; - }; - AblePlayer.prototype.handlePlay = function(e) { - if (this.paused) { - // user clicked play - this.okToPlay = true; + // user clicked play + this.okToPlay = true; this.playMedia(); - if (this.synth.paused) { - // media was paused while description was speaking - // resume utterance - this.synth.resume(); + if (this.synth.paused) { + // media was paused while description was speaking + // resume utterance + this.synth.resume(); } - } - else { + } else { // user clicked pause - this.okToPlay = false; + this.okToPlay = false; this.pauseMedia(); - if (this.speakingDescription) { - // pause the current utterance - // it will resume when the user presses play - this.synth.pause(); + if (this.speakingDescription) { + // pause the current utterance + // it will resume when the user presses play + this.synth.pause(); } } - if (this.speechEnabled === null) { - this.initSpeech('play'); + if (this.speechEnabled === null) { + this.initSpeech('play'); } }; AblePlayer.prototype.handleRestart = function() { - if (this.speakingDescription) { - // cancel audio description - this.synth.cancel(); - } + if (this.speakingDescription) { + // cancel audio description + this.synth.cancel(); + } this.seekTo(0); }; AblePlayer.prototype.handlePrevTrack = function() { - if (this.playlistIndex === 0) { - // currently on the first track - // wrap to bottom and play the last track - this.playlistIndex = this.$playlist.length - 1; - } - else { - this.playlistIndex--; - } + // currently on the first track + // wrap to bottom and play the last track + this.playlistIndex = (this.playlistIndex === 0) ? this.$playlist.length - 1 : this.playlistIndex--; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; AblePlayer.prototype.handleNextTrack = function() { - if (this.playlistIndex === this.$playlist.length - 1) { - // currently on the last track - // wrap to top and play the forst track - this.playlistIndex = 0; - } - else { - this.playlistIndex++; - } + // currently on the last track + // wrap to top and play the forst track + this.playlistIndex = (this.playlistIndex === this.$playlist.length - 1) ? 0 : this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; @@ -11013,15 +9769,10 @@ if (typeof module !== "undefined" && module.exports) { var targetTime; targetTime = this.elapsed - this.seekInterval; - if (this.useChapterTimes) { - if (targetTime < this.currentChapter.start) { - targetTime = this.currentChapter.start; - } - } - else { - if (targetTime < 0) { - targetTime = 0; - } + if (this.useChapterTimes && (targetTime < this.currentChapter.start)) { + targetTime = this.currentChapter.start; + } else if (targetTime < 0) { + targetTime = 0; } this.seekTo(targetTime); }; @@ -11039,14 +9790,12 @@ if (typeof module !== "undefined" && module.exports) { // targetTime would exceed the end of the video (or chapter) // scrub to end of whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); - } - else if (this.duration % targetTime < this.seekInterval) { + } else if (this.duration % targetTime < this.seekInterval) { // nothing left but pocket change after seeking to targetTime // go ahead and seek to end of video (or chapter), whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); } - } - else { + } else { // this is not the last chapter if (targetTime > this.currentChapter.end) { // targetTime would exceed the end of the chapter @@ -11054,8 +9803,7 @@ if (typeof module !== "undefined" && module.exports) { targetTime = this.currentChapter.end; } } - } - else { + } else { // not using chapter times if (targetTime > this.duration) { targetTime = this.duration; @@ -11079,16 +9827,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.setPlaybackRate(this.getPlaybackRate() + (0.25 dir)); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { rates = this.youTubePlayer.getAvailablePlaybackRates(); currentRate = this.getPlaybackRate(); index = rates.indexOf(currentRate); if (index === -1) { console.log('ERROR: Youtube returning unknown playback rate ' + currentRate.toString()); - } - else { + } else { index += dir; // Can only increase or decrease rate if there's another rate available. if (index < rates.length && index >= 0) { @@ -11096,27 +9842,15 @@ if (typeof module !== "undefined" && module.exports) { } } } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // range is 0.5 to 2 // increase/decrease in inrements of 0.5 vimeoMin = 0.5; vimeoMax = 2; if (dir === 1) { - if (this.vimeoPlaybackRate + 0.5 <= vimeoMax) { - newRate = this.vimeoPlaybackRate + 0.5; - } - else { - newRate = vimeoMax; - } - } - else if (dir === -1) { - if (this.vimeoPlaybackRate - 0.5 >= vimeoMin) { - newRate = this.vimeoPlaybackRate - 0.5; - } - else { - newRate = vimeoMin; - } + newRate = (this.vimeoPlaybackRate + 0.5 <= vimeoMax) ? this.vimeoPlaybackRate + 0.5 : vimeoMax; + } else if (dir === -1) { + newRate = (this.vimeoPlaybackRate - 0.5 >= vimeoMin) ? this.vimeoPlaybackRate - 0.5 : vimeoMin; } this.setPlaybackRate(newRate); } @@ -11125,47 +9859,39 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handleCaptionToggle = function() { var thisObj = this; - var captions; + var captions, ariaPressed; if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup // immediately after closing it this.hidingPopup = false; return false; } - if (this.captions.length) { - captions = this.captions; - } - else { - captions = []; - } + + captions = (this.captions.length) ? this.captions : []; if (captions.length === 1) { // When there's only one set of captions, just do an on/off toggle. if (this.captionsOn === true) { // turn them off this.captionsOn = false; this.prefCaptions = 0; - this.$ccButton.attr('aria-pressed', 'false'); - this.updateCookie('prefCaptions'); + ariaPressed = false; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.unloadModule('captions'); - } - else if (this.usingVimeoCaptions) { - this.vimeoPlayer.disableTextTrack(); - } - else { + } else if (this.usingVimeoCaptions) { + this.vimeoPlayer.disableTextTrack(); + } else { this.$captionsWrapper.hide(); } - } - else { + } else { // captions are off. Turn them on. this.captionsOn = true; this.prefCaptions = 1; - this.$ccButton.attr('aria-pressed', 'true'); - this.updateCookie('prefCaptions'); + ariaPressed = true; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.loadModule('captions'); - } - else if (this.usingVimeoCaptions) { + } else if (this.usingVimeoCaptions) { this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' @@ -11185,9 +9911,8 @@ if (typeof module !== "undefined" && module.exports) { console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); break; } - }); - } - else { + }); + } else { this.$captionsWrapper.show(); } for (var i=0; i<captions.length; i++) { @@ -11200,9 +9925,7 @@ if (typeof module !== "undefined" && module.exports) { this.selectedDescriptions = this.descriptions[0]; } } - this.refreshControls('captions'); - } - else { + } else { // there is more than one caption track. // clicking on a track is handled via caption.js > getCaptionClickFunction() if (this.captionsPopup && this.captionsPopup.is(':visible')) { @@ -11210,8 +9933,7 @@ if (typeof module !== "undefined" && module.exports) { this.hidingPopup = false; this.$ccButton.attr('aria-expanded', 'false') this.waitThenFocus(this.$ccButton); - } - else { + } else { this.closePopups(); if (this.captionsPopup) { this.captionsPopup.show(); @@ -11223,17 +9945,27 @@ if (typeof module !== "undefined" && module.exports) { thisObj.captionsPopup.css('left', thisObj.$ccButton.position().left) // Place focus on the first button (even if another button is checked) thisObj.captionsPopup.find('li').removeClass('able-focus'); - thisObj.captionsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.captionsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } } } + var ariaLabelOn = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); }; /** * Gives enough time for DOM changes to take effect before adjusting focus. * Helpful for allowing screen reading of elements whose state is intermittently changed. - * + * * @param {} $el element to focus on @param {} timeout optional wait time in milliseconds before focus / @@ -11241,9 +9973,9 @@ if (typeof module !== "undefined" && module.exports) { // Default wait time of 50 ms var _timeout = (timeout === undefined \|\| timeout === null) ? 50 : timeout; - + setTimeout(function() { - $el.focus(); + $el.trigger('focus'); }, _timeout); } @@ -11257,9 +9989,8 @@ if (typeof module !== "undefined" && module.exports) { if (this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); this.hidingPopup = false; - this.$chaptersButton.attr('aria-expanded','false').focus(); - } - else { + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); + } else { this.closePopups(); this.chaptersPopup.show(); this.$chaptersButton.attr('aria-expanded','true'); @@ -11270,10 +10001,9 @@ if (typeof module !== "undefined" && module.exports) { // Otherwise, place focus on the first chapter this.chaptersPopup.find('li').removeClass('able-focus'); if (this.chaptersPopup.find('li[aria-checked="true"]').length) { - this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass('able-focus'); - } - else { - this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').focus(); + this.chaptersPopup.find('li[aria-checked="true"]').trigger('focus').addClass('able-focus'); + } else { + this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').trigger('focus'); } } }; @@ -11282,12 +10012,12 @@ if (typeof module !== "undefined" && module.exports) { this.descOn = !this.descOn; this.prefDesc = + this.descOn; // convert boolean to integer - this.updateCookie('prefDesc'); + this.updatePreferences('prefDesc'); if (typeof this.$descDiv !== 'undefined') { if (!this.$descDiv.is(':hidden')) { this.$descDiv.hide(); } - // NOTE: now showing $descDiv here if previously hidden + // NOTE: now showing $descDiv here if previously hidden // that's handled elsewhere, dependent on whether there's text to show } this.initDescription(); @@ -11309,8 +10039,8 @@ if (typeof module !== "undefined" && module.exports) { thisObj = this; - if (this.speechEnabled === null) { - this.initSpeech('prefs'); + if (this.speechEnabled === null) { + this.initSpeech('prefs'); } if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup @@ -11324,18 +10054,17 @@ if (typeof module !== "undefined" && module.exports) { // restore each menu item to original hidden state this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); + this.$prefsButton.trigger('focus'); } // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; },100); - } - else { + } else { this.closePopups(); this.prefsPopup.show(); this.$prefsButton.attr('aria-expanded','true'); - this.$prefsButton.focus(); // focus first on prefs button to announce expanded state + this.$prefsButton.trigger('focus'); // focus first on prefs button to announce expanded state // give time for focus on button then adjust popup settings and focus setTimeout(function() { prefsButtonPosition = thisObj.$prefsButton.position(); @@ -11345,115 +10074,88 @@ if (typeof module !== "undefined" && module.exports) { thisObj.prefsPopup.css('left', prefsMenuLeft); // remove prior focus and set focus on first item; also change tabindex from -1 to 0 thisObj.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','0'); - thisObj.prefsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.prefsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } }; - AblePlayer.prototype.handleHelpClick = function() { - this.setFullscreen(false); - this.helpDialog.show(); - }; - AblePlayer.prototype.handleTranscriptToggle = function () { - var thisObj = this; - - if (this.$transcriptDiv.is(':visible')) { + var visible = this.$transcriptDiv.is(':visible'); + if ( visible ) { this.$transcriptArea.hide(); - this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); this.prefTranscript = 0; - this.$transcriptButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms - // Setting timeout to 100ms is a virtual guarantee of proper functionality - setTimeout(function() { - thisObj.closingTranscript = false; - }, 100); - } - else { - this.positionDraggableWindow('transcript'); - this.$transcriptArea.show(); - // showing transcriptArea has a cascading effect of showing all content within transcriptArea - // need to re-hide the popup menu - this.$transcriptPopup.hide(); - this.$transcriptButton.removeClass('buttonOff').attr('aria-label',this.tt.hideTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.hideTranscript); - this.prefTranscript = 1; - // move focus to first focusable element (window options button) - this.focusNotClick = true; - this.$transcriptArea.find('button').first().focus(); - // wait briefly before resetting stopgap var - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefTranscript'); + if ( this.transcriptType === 'popup' ) { + this.$transcriptButton.trigger('focus').addClass('able-focus'); + // wait briefly before resetting stopgap var + // otherwise the keypress used to select 'Close' will trigger the transcript button + // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms + // Setting timeout to 100ms is a virtual guarantee of proper functionality + setTimeout(function() { + thisObj.closingTranscript = false; + }, 100); + } + } else { + if ( this.transcriptType === 'popup' ) { + this.positionDraggableWindow('transcript'); + this.$transcriptArea.show(); + // showing transcriptArea has a cascading effect of showing all content within transcriptArea + // need to re-hide the popup menu + this.$transcriptPopup.hide(); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.prefTranscript = 1; + // move focus to first focusable element (window options button) + this.focusNotClick = true; + this.$transcriptArea.find('button').first().trigger('focus'); + // wait briefly before resetting stopgap var + setTimeout(function() { + thisObj.focusNotClick = false; + }, 100); + } else { + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.$transcriptArea.show(); + } + } + this.updatePreferences('prefTranscript'); }; AblePlayer.prototype.handleSignToggle = function () { var thisObj = this; - - if (this.$signWindow.is(':visible')) { + var visible = this.$signWindow.is(':visible'); + if ( visible ) { this.$signWindow.hide(); - this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign); - this.$signButton.find('span.able-clipped').text(this.tt.showSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 0; - this.$signButton.focus().addClass('able-focus'); + this.$signButton.trigger('focus').addClass('able-focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.closingSign = false; }, 100); - } - else { + } else { this.positionDraggableWindow('sign'); this.$signWindow.show(); // showing signWindow has a cascading effect of showing all content within signWindow // need to re-hide the popup menu this.$signPopup.hide(); - this.$signButton.removeClass('buttonOff').attr('aria-label',this.tt.hideSign); - this.$signButton.find('span.able-clipped').text(this.tt.hideSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 1; this.focusNotClick = true; - this.$signWindow.find('button').first().focus(); + this.$signWindow.find('button').first().trigger('focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.focusNotClick = false; }, 100); } - this.updateCookie('prefSign'); + this.updatePreferences('prefSign'); }; - AblePlayer.prototype.isFullscreen = function () { - - // NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen, - // which is defined in setFullscreen() - // This function returns true if any element is fullscreen - // but doesn't tell us whether a particular element is in fullscreen - // (e.g., if there are multiple players on the page) - // The Boolean this.fullscreen is defined separately for each player instance - - if (this.nativeFullscreenSupported()) { - return (document.fullscreenElement \|\| - document.webkitFullscreenElement \|\| - document.webkitCurrentFullscreenElement \|\| - document.mozFullscreenElement \|\| - document.msFullscreenElement) ? true : false; - } - else { - return this.modalFullscreenActive ? true : false; - } - } - AblePlayer.prototype.setFullscreen = function (fullscreen) { if (this.fullscreen == fullscreen) { - // replace isFullscreen() with a Boolean. see function for explanation return; } var thisObj = this; @@ -11463,114 +10165,71 @@ if (typeof module !== "undefined" && module.exports) { if (this.nativeFullscreenSupported()) { // Note: many varying names for options for browser compatibility. if (fullscreen) { + var scroll = { + x: window.pageXOffset \|\| 0, + y: window.pageYOffset \|\| 0 + } + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.rePositionDraggableWindow("transcript"); + } + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.rePositionDraggableWindow("sign"); + } + this.scrollPosition = scroll; // Initialize fullscreen - if (el.requestFullscreen) { el.requestFullscreen(); - } - else if (el.webkitRequestFullscreen) { + } else if (el.webkitRequestFullscreen) { el.webkitRequestFullscreen(); } - else if (el.mozRequestFullscreen) { - el.mozRequestFullscreen(); - } - else if (el.msRequestFullscreen) { - el.msRequestFullscreen(); - } this.fullscreen = true; - } - else { + } else { // Exit fullscreen - this.restoringAfterFullscreen = true; + this.restoringAfterFullscreen = true; if (document.exitFullscreen) { document.exitFullscreen(); - } - else if (document.webkitExitFullscreen) { + } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); - } - else if (document.webkitCancelFullscreen) { + } else if (document.webkitCancelFullscreen) { document.webkitCancelFullscreen(); } - else if (document.mozCancelFullscreen) { - document.mozCancelFullscreen(); + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.positionDraggableWindow("transcript"); } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.positionDraggableWindow("sign"); } this.fullscreen = false; } + } else { + // Removed non-native fullscreen mode in 4.8, which only supported iOS. + // Native fullscreen is on iOS 18+ devices behind a feature flag + // The polyfill hasn't worked for years. } - else { - // Non-native fullscreen support through modal dialog. - // Create dialog on first run through. - if (!this.fullscreenDialog) { - var $dialogDiv = $('<div>'); - // create a hidden alert, communicated to screen readers via aria-describedby - var $fsDialogAlert = $('<p>',{ - 'class': 'able-screenreader-alert' - }).text(this.tt.fullscreen); // In English: "Full screen"; TODO: Add alert text that is more descriptive - $dialogDiv.append($fsDialogAlert); - // now render this as a dialog - this.fullscreenDialog = new AccessibleDialog($dialogDiv, this.$fullscreenButton, 'dialog', true, 'Fullscreen video player', $fsDialogAlert, this.tt.exitFullscreen, '100%', true, function () { thisObj.handleFullscreenToggle() }); - $('body').append($dialogDiv); - } - - // Track whether paused/playing before moving element; moving the element can stop playback. - var wasPaused = this.paused; - - if (fullscreen) { - this.modalFullscreenActive = true; - this.fullscreenDialog.show(); - - // Move player element into fullscreen dialog, then show. - // Put a placeholder element where player was. - this.$modalFullscreenPlaceholder = $('<div class="placeholder">'); - this.$modalFullscreenPlaceholder.insertAfter($el); - $el.appendTo(this.fullscreenDialog.modal); - - // Column left css is 50% by default; set to 100% for full screen. - if ($el === this.$ableColumnLeft) { - $el.width('100%'); - } - var newHeight = $(window).height() - this.$playerDiv.height(); - if (typeof this.$descDiv !== 'undefined') { - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - } - } - else { - this.modalFullscreenActive = false; - if ($el === this.$ableColumnLeft) { - $el.width('50%'); - } - $el.insertAfter(this.$modalFullscreenPlaceholder); - this.$modalFullscreenPlaceholder.remove(); - this.fullscreenDialog.hide(); - } - - // Resume playback if moving stopped it. - if (!wasPaused && this.paused) { - this.playMedia(); - } - } - // add event handlers for changes in fullscreen mode. - // Browsers natively trigger this event with the Escape key, - // in addition to clicking the exit fullscreen button - $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(e) { + // add event handlers for changes in fullscreen mode. + // Browsers natively trigger this event with the Escape key, + // in addition to clicking the exit fullscreen button + $(document).on('fullscreenchange webkitfullscreenchange', function(e) { // NOTE: e.type = the specific event that fired (in case needing to control for browser-specific idiosyncrasies) if (!thisObj.fullscreen) { // user has just exited full screen thisObj.restoringAfterFullscreen = true; - } - else if (!thisObj.clickedFullscreenButton) { + } else if (!thisObj.clickedFullscreenButton) { // user triggered fullscreenchange without clicking fullscreen button thisObj.fullscreen = false; thisObj.restoringAfterFullscreen = true; } thisObj.resizePlayer(); thisObj.refreshControls('fullscreen'); - + // Reset scrollPosition after closing fullscreen. + if ( thisObj.scrollPosition ) { + scroll = thisObj.scrollPosition; + window.scrollTo( scroll.x, scroll.y ); + } // NOTE: The fullscreenchange (or browser-equivalent) event is triggered twice // when exiting fullscreen via the "Exit fullscreen" button (only once if using Escape) // Not sure why, but consequently we need to be sure thisObj.clickedFullscreenButton @@ -11580,9 +10239,9 @@ if (typeof module !== "undefined" && module.exports) { // resetting clickedFullscreenButton after a timeout seems to be better approach setTimeout(function() { thisObj.clickedFullscreenButton = false; - thisObj.restoringAfterFullscreen = false; - },1000); - }); + thisObj.restoringAfterFullscreen = false; + },100); + }); }; AblePlayer.prototype.handleFullscreenToggle = function () { @@ -11591,8 +10250,7 @@ if (typeof module !== "undefined" && module.exports) { this.setFullscreen(!this.fullscreen); if (stillPaused) { this.pauseMedia(); // when toggling fullscreen and media is just paused, keep media paused. - } - else if (!stillPaused) { + } else if (!stillPaused) { this.playMedia(); // when toggling fullscreen and media is playing, continue playing. } // automatically hide controller in fullscreen mode @@ -11604,8 +10262,7 @@ if (typeof module !== "undefined" && module.exports) { this.fadeControls('out'); this.controlsHidden = true; } - } - else { + } else { // exit fullscreen mode this.hideControls = this.hideControlsOriginal; if (!this.hideControls) { // do not hide controls @@ -11620,89 +10277,132 @@ if (typeof module !== "undefined" && module.exports) { } } } - // don't resizePlayer yet; that will be called in response to the window resize event - // this.resizePlayer(); + // don't resizePlayer yet; that will be called in response to the window resize event }; AblePlayer.prototype.handleTranscriptLockToggle = function (val) { this.autoScrollTranscript = val; // val is boolean this.prefAutoScrollTranscript = +val; // convert boolean to numeric 1 or 0 for cookie - this.updateCookie('prefAutoScrollTranscript'); + this.updatePreferences('prefAutoScrollTranscript'); this.refreshControls('transcript'); }; + AblePlayer.prototype.getIcon = function( $button, id, forceImg = false ) { + // Remove existing HTML before generating. + // iconData: [0 = svg viewbox, 1 = svg path, 2 = icon font class, 3 = image file] + var iconType = this.iconType; + var iconData = this.getIconData( id ); + iconType = ( null === iconData[3] ) ? 'svg' : iconType; + iconType = ( forceImg === true ) ? 'img' : iconType; + + var existingIcon = $button.find( iconType + '#ableplayer-' + id ); + // Avoid repainting icon if there's no change. + if ( existingIcon.length > 0 ) { + return; + } + $button.find('svg, img, span').remove(); - AblePlayer.prototype.showTooltip = function($tooltip) { + if (iconType === 'font') { + var $buttonIcon = $('<span>', { + 'class': iconData[2], + }); + $button.append( $buttonIcon ); + } else if (iconType === 'svg') { + // Function to create SVG nodes. + function getNode(n, v) { + n = document.createElementNS("http://www.w3.org/2000/svg", n); + for (var p in v) { + n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m) { + return "-" + m.toLowerCase(); + }), v[p]); + } + return n; + } + var icon = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ); + icon.setAttribute( 'focusable', 'false' ); + icon.setAttribute( 'aria-hidden', 'true'); + icon.setAttribute( 'viewBox', iconData[0] ); + icon.setAttribute( 'id', 'ableplayer-' + id ); + let path = getNode( 'path', { d: iconData[1] } ); + icon.appendChild( path ); + + $button.append( icon ); + // Refresh the DOM. + $button.html($button.html()); + } else { + var $buttonImg = $('<img>',{ + 'src': iconData[3], + 'alt': '', + 'role': 'presentation' + }); + $button.append($buttonImg); + $button.find('img').attr('src',iconData[3]); + } + }; + + AblePlayer.prototype.setText = function( $button, text ) { + $button.attr( 'aria-label', text ); + }; - if (($tooltip).is(':animated')) { - $tooltip.stop(true,true).show(); + AblePlayer.prototype.toggleButtonState = function($button, isOn, onLabel, offLabel, ariaPressed = false, ariaExpanded = false) { + // isOn means "the feature is being turned on". + let buttonOff = ( $button.hasClass( 'buttonOff' ) ) ? true : false; + if ( buttonOff && ! isOn \|\| ! buttonOff && isOn ) { + // Only toggle state if button state does not match feature state. + return; } - else { - $tooltip.stop().show(); + if (! isOn) { + $button.addClass('buttonOff').attr('aria-label', offLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'false'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'false' ); + } + } else { + $button.removeClass('buttonOff').attr('aria-label', onLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'true'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'true' ); + } } }; - AblePlayer.prototype.showAlert = function( msg, location ) { + AblePlayer.prototype.showTooltip = function($tooltip) { + + $tooltip.show(); + }; + + AblePlayer.prototype.showAlert = function( msg, location = 'main' ) { // location is either of the following: // 'main' (default) // 'screenreader (visibly hidden) // 'sign' (sign language window) - // 'transcript' (trasncript window) - var thisObj, $alertBox, $parentWindow, alertLeft, alertTop; + // 'transcript' (transcript window) + var thisObj, $alertBox, $parentWindow; thisObj = this; - + $alertBox = thisObj.$alertBox; + $parentWindow = thisObj.$ableDiv; if (location === 'transcript') { - $alertBox = this.$transcriptAlert; - $parentWindow = this.$transcriptArea; - } - else if (location === 'sign') { - $alertBox = this.$signAlert; - $parentWindow = this.$signWindow; - } - else if (location === 'screenreader') { - $alertBox = this.$srAlertBox; - } - else { - $alertBox = this.$alertBox; - } - $alertBox.text(msg).show(); - if (location == 'transcript' \|\| location === 'sign') { - if ($parentWindow.width() > $alertBox.width()) { - alertLeft = $parentWindow.width() / 2 - $alertBox.width() / 2; - } - else { - // alert box is wider than its container. Position it far left and let it wrap - alertLeft = 10; - } - if (location === 'sign') { - // position alert in the lower third of the sign window (to avoid covering the signer) - alertTop = ($parentWindow.height() / 3) * 2; - } - else if (location === 'transcript') { - // position alert just beneath the toolbar to avoid getting lost among transcript text - alertTop = this.$transcriptToolbar.height() + 30; - } - $alertBox.css({ - top: alertTop + 'px', - left: alertLeft + 'px' - }); - } - else if (location !== 'screenreader') { - // The original formula incorporated offset() into the calculation - // but at some point this began resulting in an alert that's off-centered - // Changed in v2.2.17, but here's the original for reference in case needed: - // left: this.$playerDiv.offset().left + (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - $alertBox.css({ - left: (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - }); + $parentWindow = thisObj.$transcriptArea; + } else if (location === 'sign') { + $parentWindow = thisObj.$signWindow; + } else if (location === 'screenreader') { + $alertBox = thisObj.$srAlertBox; } + $alertBox.find('span').text(msg); + $alertBox.appendTo($parentWindow) + $alertBox.css( {'display': 'flex'} ); + if (location !== 'screenreader') { - setTimeout(function () { - $alertBox.fadeOut(300); - }, 3000); + setTimeout( function () { + $alertBox.hide(); + }, 30000 ); } }; @@ -11711,22 +10411,10 @@ if (typeof module !== "undefined" && module.exports) { // returns true if the target alert has already been shown // useful for throttling alerts that only need to be shown once // e.g., move alerts with instructions for dragging a window - if (which === 'transcript') { - if (this.showedTranscriptAlert) { - return true; - } - else { - return false; - } - } - else if (which === 'sign') { - if (this.showedSignAlert) { - return true; - } - else { - return false; - } + return this.showedTranscriptAlert ?? false; + } else if (which === 'sign') { + return this.showedSignAlert ?? false; } return false; } @@ -11734,105 +10422,82 @@ if (typeof module !== "undefined" && module.exports) { // Resizes all relevant player attributes. AblePlayer.prototype.resizePlayer = function (width, height) { - var captionSizeOkMin, captionSizeOkMax, captionSize, newCaptionSize, newLineHeight; - - var newWidth, newHeight, $iframe, alertTop; + var captionSize, newWidth, newHeight, $iframe; - if (this.mediaType === 'audio') { - return; + if (this.mediaType === 'audio') { + return; } - - if (typeof width !== 'undefined' && typeof height !== 'undefined') { - // this is being called the first time a player is initialized + if (typeof width !== 'undefined' && typeof height !== 'undefined') { + // this is being called the first time a player is initialized // width and height were collected from the HTML, YouTube, or Vimeo media API - // so are reflective of the actual size of the media - // use these values to calculate aspectRatio - this.aspectRatio = height / width; - if (this.playerWidth) { - // default width is already defined via a width or data-width attribute. Use that. - newWidth = this.playerWidth; - if (this.playerHeight) { - newHeight = this.playerHeight; - } - else { - newHeight = Math.round(newWidth * this.aspectRatio); - this.playerHeight = newHeight; - } - } - else { - // playerWidth was not defined via HTML attributes - if (this.player === 'html5') { - newWidth = $(window).width(); - } - else { - newWidth = this.$ableWrapper.width(); - } - newHeight = Math.round(newWidth * this.aspectRatio); - } - } - else if (this.fullscreen) { - this.$ableWrapper.addClass('fullscreen'); - newWidth = $(window).width(); + // so are reflective of the actual size of the media + // use these values to calculate aspectRatio + this.aspectRatio = height / width; + if (this.playerWidth) { + // default width is already defined via a width or data-width attribute. Use that. + newWidth = this.playerWidth; + if (this.playerHeight) { + newHeight = this.playerHeight; + } else { + newHeight = Math.round(newWidth * this.aspectRatio); + this.playerHeight = newHeight; + } + } else { + // playerWidth was not defined via HTML attributes + newWidth = (this.player === 'html5') ? $(window).width() : this.$ableWrapper.width(); + newHeight = Math.round(newWidth * this.aspectRatio); + } + } else if (this.fullscreen) { + this.$ableWrapper.addClass('fullscreen'); + newWidth = $(window).width(); // the 5 pixel buffer is arbitrary, but results in a better fit for all browsers - newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; + newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; this.positionCaptions('overlay'); - } - else { // not fullscreen, and not first time initializing player + } else { // not fullscreen, and not first time initializing player this.$ableWrapper.removeClass('fullscreen'); - if (this.player === 'html5') { - if (this.playerWidth) { - newWidth = this.playerWidth; - } - else { - // use full size of window - // player will be downsized to fit container if CSS requires it - newWidth = $(window).width(); - } - } - else { - newWidth = this.$ableWrapper.width(); + if (this.player === 'html5') { + newWidth = (this.playerWidth) ? this.playerWidth : $(window).width(); + } else { + newWidth = this.$ableWrapper.width(); } - newHeight = Math.round(newWidth * this.aspectRatio); - this.positionCaptions(this.prefCaptionsPosition); + newHeight = Math.round(newWidth * this.aspectRatio); + this.positionCaptions(this.prefCaptionsPosition); } if (this.debug) { - console.log('resizePlayer to ' + newWidth + 'x' + newHeight); + console.log('resizePlayer to ' + newWidth + 'x' + newHeight); } // Now size the player with newWidth and newHeight - if (this.player === 'youtube' \|\| this.player === 'vimeo') { - $iframe = this.$ableWrapper.find('iframe'); - if (this.player === 'youtube' && this.youTubePlayer) { - // alternatively, YouTube API offers a method for setting the video size - // this adds width and height attributes to the iframe - // but might have other effects, so best to do it this way - this.youTubePlayer.setSize(newWidth,newHeight); - } - else { - // Vimeo API does not have a method for changing size of player - // Therefore, need to change iframe attributes directly + if (this.player === 'youtube' \|\| this.player === 'vimeo') { + $iframe = this.$ableWrapper.find('iframe'); + if (this.player === 'youtube' && this.youTubePlayer) { + // alternatively, YouTube API offers a method for setting the video size + // this adds width and height attributes to the iframe + // but might have other effects, so best to do it this way + this.youTubePlayer.setSize(newWidth,newHeight); + } else { + // Vimeo API does not have a method for changing size of player + // Therefore, need to change iframe attributes directly $iframe.attr({ 'width': newWidth, 'height': newHeight - }); + }); } - if (this.playerWidth && this.playerHeight) { - if (this.fullscreen) { - // remove constraints - $iframe.css({ + if (this.playerWidth && this.playerHeight) { + if (this.fullscreen) { + // remove constraints + $iframe.css({ 'max-width': '', 'max-height': '' - }); - } - else { + }); + } else { // use CSS on iframe to enforce explicitly defined size constraints - $iframe.css({ + $iframe.css({ 'max-width': this.playerWidth + 'px', 'max-height': this.playerHeight + 'px' }); } } - } - else if (this.player === 'html5') { + } else if (this.player === 'html5') { if (this.fullscreen) { this.$media.attr({ 'width': newWidth, @@ -11842,46 +10507,37 @@ if (typeof module !== "undefined" && module.exports) { 'width': newWidth, 'height': newHeight }); - } - else { - // No constraints. Let CSS handle the positioning. + } else { + // No constraints. Let CSS handle the positioning. this.$media.removeAttr('width height'); - this.$ableWrapper.css({ - 'width': newWidth + 'px', - 'height': 'auto' - }); - } + this.$ableWrapper.removeAttr( 'style' ); + } } // Resize captions if (typeof this.$captionsDiv !== 'undefined') { - // Font-size is too small in full screen view - // use viewport units (vw) instead - // % units work fine if not fullscreen - // prefCaptionSize is expressed as a percentage - captionSize = parseInt(this.prefCaptionsSize,10); - if (this.fullscreen) { - captionSize = (captionSize / 100) + 'vw'; + // Font-size is too small in full screen view + // use viewport units (vw) for large viewports + // % units work fine if not fullscreen + // prefCaptionSize is expressed as a percentage + var isSmallScreen = false; + var windowWidth = window.screen.width; + if ( windowWidth < 1200 ) { + isSmallScreen = true; } - else { - captionSize = captionSize + '%'; + captionSize = parseInt(this.prefCaptionsSize,10); + if (this.fullscreen && ! isSmallScreen ) { + captionSize = (captionSize / 100) + 'vw'; + } else if ( this.fullscreen && isSmallScreen ) { + captionSize = '1.2rem'; + } else { + captionSize = captionSize + '%'; } this.$captionsDiv.css({ 'font-size': captionSize }); } - - // Reposition alert message (video player only) - // just below the vertical center of the mediaContainer - // hopefully above captions, but not too far from the controller bar - if (this.mediaType === 'video') { - alertTop = Math.round(this.$mediaContainer.height() / 3) * 2; - this.$alertBox.css({ - top: alertTop + 'px' - }); - } - - this.refreshControls(); + this.refreshControls(); }; AblePlayer.prototype.retrieveOffscreenWindow = function( which, width, height ) { @@ -11894,8 +10550,7 @@ if (typeof module !== "undefined" && module.exports) { if (which == 'transcript') { window = this.$transcriptArea; - } - else if (which == 'sign') { + } else if (which == 'sign') { window = this.$signWindow; } windowWidth = window.width(); @@ -11924,41 +10579,18 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.getHighestZIndex = function() { - - // returns the highest z-index on page - // used to ensure dialogs (or potentially other windows) are on top - - var max, $elements, z; - max = 0; - - // exclude the Able Player dialogs and windows - $elements = $('body ').not('.able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area'); - - $elements.each(function(){ - z = $(this).css('z-index'); - if (Number.isInteger(+z)) { // work only with integer values, not 'auto' - if (parseInt(z) > max) { - max = parseInt(z); - } - } - }); - return max; - }; - AblePlayer.prototype.updateZIndex = function(which) { // update z-index of 'transcript' or 'sign', relative to each other // direction is always 'up' (i.e., move window to top) // windows come to the top when the user clicks on them - var defHighZ, defLowZ, highestZ, transcriptZ, signZ, newHighZ, newLowZ; + var defHighZ, defLowZ, transcriptZ, signZ, newHighZ, newLowZ; // set the default z-indexes, as defined in ableplayer.css defHighZ = 8000; // by default, assigned to the sign window defLowZ = 7000; // by default, assigned to the transcript area - highestZ = this.getHighestZIndex(); // highest z-index on the page, excluding Able Player windows & modals - // NOTE: Although highestZ is collected here, it currently isn't used. + // Previously collected the highest z-index. Removed in 4.6. // If something on the page has a higher z-index than the transcript or sign window, do we care? // Excluding it here assumes "No". Our immediate concern is with the relationship between our own components. // If we elevate our z-indexes so our content is on top, we run the risk of starting a z-index war. @@ -11972,8 +10604,7 @@ if (typeof module !== "undefined" && module.exports) { // restore to the default this.$transcriptArea.css('z-index',defLowZ); } - } - else if (typeof this.$signWindow !== 'undefined') { + } else if (typeof this.$signWindow !== 'undefined') { signZ = parseInt(this.$signWindow.css('z-index')); if (signZ > defHighZ) { // restore to the default @@ -11993,24 +10624,20 @@ if (typeof module !== "undefined" && module.exports) { // the two windows are equal; restore defaults (the target window will be on top) newHighZ = defHighZ; newLowZ = defLowZ; - } - else if (transcriptZ > signZ) { + } else if (transcriptZ > signZ) { if (which === 'transcript') { // transcript is already on top; nothing to do return false; - } - else { + } else { // swap z's newHighZ = transcriptZ; newLowZ = signZ; } - } - else { // signZ is greater + } else { // signZ is greater if (which === 'sign') { // sign is already on top; nothing to do return false; - } - else { + } else { newHighZ = signZ; newLowZ = transcriptZ; } @@ -12019,8 +10646,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { this.$transcriptArea.css('z-index',newHighZ); this.$signWindow.css('z-index',newLowZ); - } - else if (which === 'sign') { + } else if (which === 'sign') { this.$signWindow.css('z-index',newHighZ); this.$transcriptArea.css('z-index',newLowZ); } @@ -12037,7 +10663,7 @@ if (typeof module !== "undefined" && module.exports) { // This was a group decision based on the belief that users may want a transcript // that is in a different language than the captions - var i, captions, descriptions, chapters, meta, langHasChanged; + var i, captions, descriptions, chapters, meta; // Captions for (i = 0; i < this.captions.length; i++) { @@ -12079,21 +10705,20 @@ if (typeof module !== "undefined" && module.exports) { // chapters popup is setup automatically when setupPopups() is called later with no param // not sure why it was included here. // this.setupPopups('chapters'); - } - else if (source === 'transcript') { + } else if (source === 'transcript') { this.transcriptCaptions = captions; this.transcriptChapters = chapters; this.transcriptDescriptions = descriptions; } if (this.selectedDescriptions) { - // updating description voice to match new description language - this.setDescriptionVoice(); - if (this.$sampleDescDiv) { - if (this.sampleText) { - for (i = 0; i < this.sampleText.length; i++) { - if (this.sampleText[i].lang === this.selectedDescriptions.language) { - this.currentSampleText = this.sampleText[i]['text']; - this.$sampleDescDiv.html(this.currentSampleText); + // updating description voice to match new description language + this.setDescriptionVoice(); + if (this.$sampleDescDiv) { + if (this.sampleText) { + for (i = 0; i < this.sampleText.length; i++) { + if (this.sampleText[i].lang === this.selectedDescriptions.language) { + this.currentSampleText = this.sampleText[i]['text']; + this.$sampleDescDiv.html(this.currentSampleText); } } } @@ -12239,7 +10864,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 1; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); thisObj.refreshControls("captions"); }; }; @@ -12275,7 +10900,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 0; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); if (!this.swappingSrc) { thisObj.refreshControls("captions"); thisObj.updateCaption(); @@ -12302,10 +10927,7 @@ if (typeof module !== "undefined" && module.exports) { if (typeof thisCaption !== "undefined") { if (this.currentCaption !== thisCaption) { // it's time to load the new caption into the container div - captionText = this.flattenCueForCaption(cues[thisCaption]).replace( - /\n/g, - "<br>" - ); + captionText = this.flattenCueForCaption(cues[thisCaption]).replace( /\n/g, "<br>" ); this.$captionsDiv.html(captionText); this.currentCaption = thisCaption; @@ -12387,24 +11009,24 @@ if (typeof module !== "undefined" && module.exports) { switch (pref) { case "prefCaptionsFont": - options[0] = ["serif", this.tt.serif]; - options[1] = ["sans-serif", this.tt.sans]; - options[2] = ["cursive", this.tt.cursive]; - options[3] = ["fantasy", this.tt.fantasy]; - options[4] = ["monospace", this.tt.monospace]; + options[0] = ["serif", this.translate( 'serif', 'serif' )]; + options[1] = ["sans-serif", this.translate( 'sans', 'sans-serif' )]; + options[2] = ["cursive", this.translate( 'cursive', 'cursive' )]; + options[3] = ["fantasy", this.translate( 'fantasy', 'fantasy' )]; + options[4] = ["monospace", this.translate( 'monospace', 'monospace' )]; break; case "prefCaptionsColor": case "prefCaptionsBGColor": // HTML color values must be in English - options[0] = ["white", this.tt.white]; - options[1] = ["yellow", this.tt.yellow]; - options[2] = ["green", this.tt.green]; - options[3] = ["cyan", this.tt.cyan]; - options[4] = ["blue", this.tt.blue]; - options[5] = ["magenta", this.tt.magenta]; - options[6] = ["red", this.tt.red]; - options[7] = ["black", this.tt.black]; + options[0] = ["white", this.translate( 'white', 'white' )]; + options[1] = ["yellow", this.translate( 'yellow', 'yellow' )]; + options[2] = ["green", this.translate( 'green', 'green' )]; + options[3] = ["cyan", this.translate( 'cyan', 'cyan' )]; + options[4] = ["blue", this.translate( 'blue', 'blue' )]; + options[5] = ["magenta", this.translate( 'magenta', 'magenta' )]; + options[6] = ["red", this.translate( 'red', 'red' )]; + options[7] = ["black", this.translate( 'black', 'black' )]; break; case "prefCaptionsSize": @@ -12424,8 +11046,8 @@ if (typeof module !== "undefined" && module.exports) { break; case "prefCaptionsStyle": - options[0] = this.tt.captionsStylePopOn; - options[1] = this.tt.captionsStyleRollUp; + options[0] = this.translate( 'captionsStylePopOn', 'Pop-on' ); + options[1] = this.translate( 'captionsStyleRollUp', 'Roll-up' ); break; case "prefCaptionsPosition": @@ -12463,7 +11085,7 @@ if (typeof module !== "undefined" && module.exports) { // this function handles stylizing of the sample caption text in the Prefs dialog // plus the actual production captions // TODO: consider applying the same user prefs to visible text-based description - var property, newValue, opacity, lineHeight; + var property, newValue, opacity; if (typeof $element !== "undefined") { if (pref == "prefCaptionsPosition") { @@ -12559,16 +11181,17 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.populateChaptersDiv = function() { - var headingLevel, headingType, headingId, $chaptersHeading, - $chaptersList; - + var headingLevel, headingType, headingId, $chaptersHeading; + if ( ! this.chaptersDivLocation ) { + return; + } if ($('#' + this.chaptersDivLocation)) { this.$chaptersDiv = $('#' + this.chaptersDivLocation); this.$chaptersDiv.addClass('able-chapters-div'); // empty content from previous build before starting fresh - this.$chaptersDiv.empty(); + this.$chaptersDiv.empty(); // add optional header if (this.chaptersTitle) { @@ -12584,10 +11207,9 @@ if (typeof module !== "undefined" && module.exports) { this.$chaptersNav = $('<nav>'); if (this.chaptersTitle) { - this.$chaptersNav.attr('aria-labelledby',headingId); - } - else { - this.$chaptersNav.attr('aria-label',this.tt.chapters); + this.$chaptersNav.attr( 'aria-labelledby', headingId ); + } else { + this.$chaptersNav.attr( 'aria-label', this.translate( 'chapters', 'Chapters' ) ); } this.$chaptersDiv.append(this.$chaptersNav); @@ -12599,32 +11221,25 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.updateChaptersList = function() { var thisObj, cues, $chaptersList, c, thisChapter, - $chapterItem, $chapterButton, buttonId, hasDefault, - getClickFunction, $clickedItem, $chaptersList, thisChapterIndex; + $chapterItem, $chapterButton, hasDefault, + getClickFunction, $clickedItem, $chaptersList; thisObj = this; - // TODO: Update this so it can change the chapters popup menu + // TODO: Update this so it can change the chapters popup menu // currently it only works if chapters are in an external container if (!this.$chaptersNav) { return false; } if (typeof this.useChapterTimes === 'undefined') { - if (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) { - this.useChapterTimes = true; - } - else { - this.useChapterTimes = false; - } + this.useChapterTimes = (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) ? true : false; } if (this.useChapterTimes) { cues = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { cues = this.chapters[0].cues; - } - else { + } else { cues = []; } if (cues.length > 0) { @@ -12643,7 +11258,6 @@ if (typeof module !== "undefined" && module.exports) { thisObj.seekTrigger = 'chapter'; $clickedItem = $(this).closest('li'); $chaptersList = $(this).closest('ul').find('li'); - thisChapterIndex = $chaptersList.index($clickedItem); $chaptersList.removeClass('able-current-chapter') .children('button').removeAttr('aria-current'); $clickedItem.addClass('able-current-chapter') @@ -12712,7 +11326,7 @@ if (typeof module !== "undefined" && module.exports) { return; } - var chapters, i, thisChapterIndex, chapterLabel; + var chapters, i, thisChapterIndex; chapters = this.selectedChapters.cues; for (i = 0; i < chapters.length; i++) { @@ -12762,12 +11376,10 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends, adjust chapter end to match video end chapterEnd = this.duration; this.currentChapter.end = this.duration; - } - else { + } else { chapterEnd = this.currentChapter.end; } - } - else { // this is not the last chapter + } else { // this is not the last chapter chapterEnd = this.currentChapter.end; } return chapterEnd - this.currentChapter.start; @@ -12783,8 +11395,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.elapsed > this.currentChapter.start) { return this.elapsed - this.currentChapter.start; - } - else { + } else { return 0; } }; @@ -12797,12 +11408,10 @@ if (typeof module !== "undefined" && module.exports) { var newTime = this.currentChapter.start + chapterTime; if (newTime > this.currentChapter.end) { return this.currentChapter.end; - } - else { + } else { return newTime; } - } - else { + } else { return chapterTime; } }; @@ -12823,7 +11432,7 @@ if (typeof module !== "undefined" && module.exports) { setTimeout(function() { thisObj.hidingPopup = false; }, 100); - thisObj.$chaptersButton.focus(); + thisObj.$chaptersButton.trigger('focus'); } }; @@ -12877,7 +11486,7 @@ if (typeof module !== "undefined" && module.exports) { cueText = this.flattenCueForMeta(cues[thisMeta]); cueLines = cueText.split("\n"); for (i = 0; i < cueLines.length; i++) { - line = $.trim(cueLines[i]); + line = cueLines[i].trim(); if (line.toLowerCase().trim() === "pause") { // don't show big play button when pausing via metadata this.hideBigPlayButton = true; @@ -12885,7 +11494,7 @@ if (typeof module !== "undefined" && module.exports) { } else if (line.toLowerCase().substring(0, 6) == "focus:") { focusTarget = line.substring(6).trim(); if ($(focusTarget).length) { - $(focusTarget).focus(); + $(focusTarget).trigger('focus'); } } else { if ($(line).length) { @@ -12896,7 +11505,11 @@ if (typeof module !== "undefined" && module.exports) { typeof showDuration !== "undefined" && !isNaN(showDuration) ) { - $(line).show().delay(showDuration).fadeOut(); + $(line).show(); + const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + delay(showDuration).then(() => { + $(line).hide(); + }); } else { // no duration specified. Just show the element until end time specified in VTT file $(line).show(); @@ -12968,11 +11581,11 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.setupTranscript = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - if (this.usingYouTubeCaptions \|\| this.usingVimeoCaptions) { - // a transcript is not possible + if (this.usingYouTubeCaptions \|\| this.usingVimeoCaptions \|\| this.hideTranscriptButton ) { + // a transcript is not possible or is disabled. this.transcriptType = null; deferred.resolve(); } else { @@ -12987,10 +11600,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (this.transcriptType) { - if ( - this.transcriptType === "popup" \|\| - this.transcriptType === "external" - ) { + if ( this.transcriptType === "popup" \|\| this.transcriptType === "external" ) { this.injectTranscriptArea(); deferred.resolve(); } else if (this.transcriptType === "manual") { @@ -13017,7 +11627,7 @@ if (typeof module !== "undefined" && module.exports) { this.$transcriptArea = $("<div>", { class: "able-transcript-area", role: "dialog", - "aria-label": this.tt.transcriptTitle, + "aria-label": this.translate( 'transcriptTitle', 'Transcript' ), }); this.$transcriptToolbar = $("<div>", { @@ -13037,11 +11647,15 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); - this.$transcriptToolbar.append( - $autoScrollLabel, - this.$autoScrollTranscriptCheckbox - ); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); + $autoScrollContainer = $( '<div>', { + 'class': 'autoscroll-transcript' + }); + $autoScrollContainer.append( + $autoScrollLabel, + this.$autoScrollTranscriptCheckbox + ); + this.$transcriptToolbar.append( $autoScrollContainer ); // Add field for selecting a transcript language // Only necessary if there is more than one language @@ -13051,7 +11665,7 @@ if (typeof module !== "undefined" && module.exports) { }); $languageSelectLabel = $("<label>", { for: "transcript-language-select-" + this.mediaId, - }).text(this.tt.language); + }).text( this.translate( 'language', 'Language' ) ); this.$transcriptLanguageSelect = $("<select>", { id: "transcript-language-select-" + this.mediaId, }); @@ -13078,6 +11692,8 @@ if (typeof module !== "undefined" && module.exports) { // If client has provided separate transcript location, put it there. // Otherwise append it to the body if (this.transcriptDivLocation) { + this.$transcriptArea.removeAttr( 'role' ); + this.$transcriptArea.removeAttr( 'aria-label' ); $("#" + this.transcriptDivLocation).append(this.$transcriptArea); } else { this.$ableWrapper.append(this.$transcriptArea); @@ -13104,7 +11720,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addTranscriptAreaEvents = function () { var thisObj = this; - this.$autoScrollTranscriptCheckbox.click(function () { + this.$autoScrollTranscriptCheckbox.on( 'click', function () { thisObj.handleTranscriptLockToggle( thisObj.$autoScrollTranscriptCheckbox.prop("checked") ); @@ -13124,7 +11740,7 @@ if (typeof module !== "undefined" && module.exports) { ); if (typeof this.$transcriptLanguageSelect !== "undefined") { - this.$transcriptLanguageSelect.on("click mousedown", function (e) { + this.$transcriptLanguageSelect.on('click', function (e) { // execute default behavior // prevent propagation of mouse event to toolbar or window e.stopPropagation(); @@ -13174,7 +11790,7 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); // Add an auto-scroll checkbox to the toolbar. this.$autoScrollTranscriptCheckbox = $autoScrollInput; @@ -13275,7 +11891,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$transcriptArea.length > 0) { this.$transcriptArea .find("span.able-transcript-seekpoint") - .click(function (e) { + .on( 'click', function (e) { thisObj.seekTrigger = "transcript"; var spanStart = parseFloat($(this).attr("data-start")); // Add a tiny amount so that we're inside the span. @@ -13354,9 +11970,9 @@ if (typeof module !== "undefined" && module.exports) { if (typeof this.transcriptTitle !== "undefined") { transcriptTitle = this.transcriptTitle; } else if (this.lyricsMode) { - transcriptTitle = this.tt.lyricsTitle; + transcriptTitle = this.translate( 'lyricsTitle', 'Lyrics' ); } else { - transcriptTitle = this.tt.transcriptTitle; + transcriptTitle = this.translate( 'transcriptTitle', 'Transcript' ); } if (!this.transcriptDivLocation) { @@ -13579,7 +12195,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (comp.type === "b" \|\| comp.type == "i") { - result.push($tag, " "); + result.push($tag); } } else { for (var i = 0; i < comp.children.length; i++) { @@ -13592,13 +12208,22 @@ if (typeof module !== "undefined" && module.exports) { }; for (var i = 0; i < cap.components.children.length; i++) { + var next_child_tagname; + if ( i < cap.components.children.length - 1 ) { + next_child_tagname = cap.components.children[i + 1].tagName; + } var results = flattenComponentForCaption(cap.components.children[i]); for (var jj = 0; jj < results.length; jj++) { var result = results[jj]; if (typeof result === "string") { - if (thisObj.lyricsMode) { - // add <br> BETWEEN each caption and WITHIN each caption (if payload includes "\n") - result = result.replace(/\n/g, "<br>") + "<br>"; + if (thisObj.lyricsMode) { + // add <br> WITHIN each caption (if payload includes "\n") + result = result.replace(/\n/g,'<br>'); + + // add <br> BETWEEN each caption, but do not consider sibling style tags within this caption as the next caption! + if ( !next_child_tagname \|\| ( next_child_tagname !== 'i' && next_child_tagname !== 'b' ) ) { + result += '<br>'; + } } else { // just add a space between captions result += " "; @@ -13687,7 +12312,6 @@ if (typeof module !== "undefined" && module.exports) { // organize transcript into blocks using [] and () as starting points var $components = $main.children(); var spanCount = 0; - var openBlock = true; $components.each(function () { if ($(this).hasClass("able-transcript-caption")) { if ( @@ -13697,10 +12321,7 @@ if (typeof module !== "undefined" && module.exports) { // this caption includes a bracket or parenth. Start a new block // close the previous block first if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } @@ -13709,16 +12330,24 @@ if (typeof module !== "undefined" && module.exports) { } else { // this is not a caption. Close the caption block if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } }); + // Close out remaining temp blocks. + $main = wrapTranscriptBlocks( $main ); + return $main; }; + + var wrapTranscriptBlocks = function( $main ) { + $main.find(".able-block-temp") + .removeClass("able-block-temp") + .wrapAll('<div class="able-transcript-block"></div>'); + + return $main; + } })(jQuery); (function ($) { @@ -13737,7 +12366,7 @@ if (typeof module !== "undefined" && module.exports) { // sanitize search string var cleanSearchString = DOMPurify.sanitize(this.searchString); if ($("#" + this.SearchDiv)) { - var searchStringHtml = "<p>" + this.tt.resultsSummary1 + " "; + var searchStringHtml = "<p>" + this.translate( 'resultsSummary1', 'You searched for:') + ' '; searchStringHtml += '<span id="able-search-term-echo">' + cleanSearchString + "</span>"; searchStringHtml += "</p>"; @@ -13749,19 +12378,16 @@ if (typeof module !== "undefined" && module.exports) { var $resultsSummary = $("<p>", { class: "able-search-results-summary", }); - var resultsSummaryText = this.tt.resultsSummary2; - resultsSummaryText += - " <strong>" + resultsArray.length + "</strong> "; - resultsSummaryText += this.tt.resultsSummary3 + " "; - resultsSummaryText += this.tt.resultsSummary4; - $resultsSummary.html(resultsSummaryText); + var resultsSummaryText = this.translate( 'resultsSummary2', 'Found %1 matching items.', [ '<strong>' + resultsArray.length + '</strong>' ] ); + resultsSummaryText += ' ' + this.translate( 'resultsSummary3', 'Click the time associated with any item to play the video from that point.' ); + $resultsSummary.html( resultsSummaryText ); var $resultsList = $("<ul>"); for (var i = 0; i < resultsArray.length; i++) { var resultId = "aria-search-result-" + i; var $resultsItem = $("<li>", {}); var itemStartTime = this.secondsToTime(resultsArray[i]["start"]); var itemLabel = - this.tt.searchButtonLabel + " " + itemStartTime["title"]; + this.translate( 'searchButtonLabel', 'Play at %1', [ itemStartTime["title"] ] ); var itemStartSpan = $("<button>", { class: "able-search-results-time", "data-start": resultsArray[i]["start"], @@ -13784,16 +12410,16 @@ if (typeof module !== "undefined" && module.exports) { class: "able-search-result-text", id: resultId, }); - itemText.html("..." + resultsArray[i]["caption"] + "..."); + itemText.html('...' + resultsArray[i]["caption"] + '...'); $resultsItem.append(itemStartSpan, itemText); $resultsList.append($resultsItem); } - $("#" + this.searchDiv) + $('#' + this.searchDiv) .html(searchStringHtml) .append($resultsSummary, $resultsList); } else { - var noResults = $("<p>").text(this.tt.noResultsFound); - $("#" + this.searchDiv) + var noResults = $('<p>').text( this.translate( 'noResultsFound', 'No results found.' ) ); + $('#' + this.searchDiv) .html(searchStringHtml) .append(noResults); } @@ -13887,36 +12513,36 @@ if (typeof module !== "undefined" && module.exports) { if (hours > 0) { value += hours + ":"; if (hours == 1) { - title += "1 " + this.tt.hour + " "; + title += "1 " + this.translate( 'hour', 'hour' ) + " "; } else { - title += hours + " " + this.tt.hours + " "; + title += hours + " " + this.translate( 'hours', 'hours' ) + " "; } } if (minutes < 10) { value += "0" + minutes + ":"; if (minutes > 0) { if (minutes == 1) { - title += "1 " + this.tt.minute + " "; + title += "1 " + this.translate( 'minute', 'minute' ) + " "; } else { - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } } } else { value += minutes + ":"; - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } if (seconds < 10) { value += "0" + seconds; if (seconds > 0) { if (seconds == 1) { - title += "1 " + this.tt.second + " "; + title += "1 " + this.translate( 'second', 'second' ) + " "; } else { - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } } } else { value += seconds; - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } var time = []; time["value"] = value; @@ -13929,7 +12555,6 @@ if (typeof module !== "undefined" && module.exports) { // Media events AblePlayer.prototype.onMediaUpdateTime = function (duration, elapsed) { - // duration and elapsed are passed from callback functions of Vimeo API events // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx @@ -13937,17 +12562,17 @@ if (typeof module !== "undefined" && module.exports) { this.getMediaTimes(duration,elapsed).then(function(mediaTimes) { thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - if (thisObj.duration > 0) { + if (thisObj.duration > 0) { // do all the usual time-sync stuff during playback if (thisObj.prefHighlight === 1) { thisObj.highlightTranscript(thisObj.elapsed); - } + } thisObj.updateCaption(thisObj.elapsed); thisObj.showDescription(thisObj.elapsed); thisObj.updateChapter(thisObj.elapsed); thisObj.updateMeta(thisObj.elapsed); - thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); - } + thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); + } }); }; @@ -13974,34 +12599,32 @@ if (typeof module !== "undefined" && module.exports) { this.playlistIndex = 0; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(0); - } - else { + } else { this.playing = false; this.paused = true; } - } - else { + } else { // this is not the last track. Play the next one. this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex) } } - this.refreshControls('init'); + this.refreshControls(); }; AblePlayer.prototype.onMediaNewSourceLoad = function () { - var loadIsComplete = false; + var loadIsComplete = false; if (this.cueingPlaylistItem) { - // this variable was set in order to address bugs caused by multiple firings of media 'end' event + // this variable was set to address bugs caused by multiple firings of media 'end' event // safe to reset now this.cueingPlaylistItem = false; } - if (this.recreatingPlayer) { - // same as above; different bugs - this.recreatingPlayer = false; + if (this.recreatingPlayer) { + // same as above; different bugs + this.recreatingPlayer = false; } if (this.playbackRate) { // user has set playbackRate on a previous src or track @@ -14012,10 +12635,9 @@ if (typeof module !== "undefined" && module.exports) { if (!this.startedPlaying \|\| this.okToPlay) { // start playing; no further user action is required this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.seekTrigger == 'restart' \|\| + } else if (this.seekTrigger == 'restart' \|\| this.seekTrigger == 'chapter' \|\| this.seekTrigger == 'transcript' \|\| this.seekTrigger == 'search' @@ -14024,67 +12646,59 @@ if (typeof module !== "undefined" && module.exports) { // Not included: elements where user might click multiple times in succession // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play this.playMedia(); - loadIsComplete = true; - } - else if (this.swappingSrc) { + loadIsComplete = true; + } else if (this.swappingSrc) { // new source file has just been loaded if (this.hasPlaylist) { // a new source file from the playlist has just been loaded if ((this.playlistIndex !== this.$playlist.length) \|\| this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.swapTime > 0) { - if (this.seekStatus === 'complete') { + } else if (this.swapTime > 0) { + if (this.seekStatus === 'complete') { if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else if (this.seekStatus === 'seeking') { - } - else { - if (this.swapTime === this.elapsed) { - // seek is finished! - this.seekStatus = 'complete'; + loadIsComplete = true; + } else if (this.seekStatus === 'seeking') { + // Do nothing. + } else { + if (this.swapTime === this.elapsed) { + // seek is finished! + this.seekStatus = 'complete'; if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else { - // seeking hasn't started yet - // first, determine whether it's possible - if (this.hasDescTracks) { + loadIsComplete = true; + } else { + // seeking hasn't started yet + // first, determine whether it's possible + if (this.hasDescTracks) { // do nothing. Unable to seek ahead if there are descTracks - loadIsComplete = true; - } - else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { + loadIsComplete = true; + } else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { // durations of two sources are close enough to making seek ahead in new source ok - this.seekStatus = 'seeking'; + this.seekStatus = 'seeking'; this.seekTo(this.swapTime); - } - else { - // durations of two sources are too dissimilar to support seeking ahead to swapTime. - loadIsComplete = true; + } else { + // durations of two sources are too dissimilar to support seeking ahead to swapTime. + loadIsComplete = true; } } } - } - else { - // swapTime is 0. No seeking required. - if (this.playing) { - this.playMedia(); - // swap is complete. Reset vars. - loadIsComplete = true; + } else { + // swapTime is 0. No seeking required. + if (this.playing) { + this.playMedia(); + // swap is complete. Reset vars. + loadIsComplete = true; } } - } - else if (!this.startedPlaying) { + } else if (!this.startedPlaying) { if (this.startTime > 0) { if (this.seeking) { // a seek has already been initiated @@ -14093,94 +12707,84 @@ if (typeof module !== "undefined" && module.exports) { if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; - } - else { + loadIsComplete = true; + } else { // haven't started seeking yet this.seekTo(this.startTime); } - } - else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { + } else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { this.seekToChapter(this.defaultChapter); - } - else { + } else { // there is no startTime, therefore no seeking required if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.hasPlaylist) { - // new source media is part of a playlist, but user didn't click on it + } else if (this.hasPlaylist) { + // new source media is part of a playlist, but user didn't click on it // (and somehow, swappingSrc is false) - // this may happen when the previous track ends and next track loads - // this same code is called above when swappingSrc is true + // this may happen when the previous track ends and next track loads + // this same code is called above when swappingSrc is true if ((this.playlistIndex !== this.$playlist.length) \|\| this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else { - // None of the above. + } else { + // None of the above. // User is likely seeking to a new time, but not loading a new media source - // need to reset vars - loadIsComplete = true; - } - if (loadIsComplete) { - // reset vars - this.swappingSrc = false; - this.seekStatus = null; - this.swapTime = 0; + // need to reset vars + loadIsComplete = true; + } + if (loadIsComplete) { + // reset vars + this.swappingSrc = false; + this.seekStatus = null; + this.swapTime = 0; this.seekTrigger = null; - this.seekingFromTranscript = false; + this.seekingFromTranscript = false; this.userClickedPlaylist = false; - this.okToPlay = false; + this.okToPlay = false; } - this.refreshControls('init'); - if (this.$focusedElement) { - this.restoreFocus(); - this.$focusedElement = null; + this.refreshControls(); + if (this.$focusedElement) { + this.restoreFocus(); + this.$focusedElement = null; + this.activeMedia = null; } }; - AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { + AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { - // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src - // The durations may not be exact, but they might be "close enough" - // returns true if "close enough", otherwise false + // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src + // The durations may not be exact, but they might be "close enough" + // returns true if "close enough", otherwise false - var tolerance, diff; - - tolerance = 1; // number of seconds between rounded durations that is considered "close enough" - - diff = Math.abs(Math.round(d1) - Math.round(d2)); - - if (diff <= tolerance) { - return true; - } - else { - return false; - } + var tolerance, diff; + + tolerance = 1; // number of seconds between rounded durations that is considered "close enough" + diff = Math.abs(Math.round(d1) - Math.round(d2)); + + return (diff <= tolerance) ? true : false; }; - AblePlayer.prototype.restoreFocus = function() { + AblePlayer.prototype.restoreFocus = function() { // function called after player has been rebuilt (during media swap) - // the original focusedElement no longer exists, - // but this function finds a match in the new player - // and places focus there + // the original focusedElement no longer exists, + // but this function finds a match in the new player + // and places focus there - var classList; + var classList, $mediaParent; - if (this.$focusedElement) { - - if ((this.$focusedElement).attr('role') === 'button') { + if ( this.$focusedElement && null !== this.activeMedia ) { + $mediaParent = $( '#' + this.activeMedia ).closest( '.able' ); + if ( (this.$focusedElement).attr('role') === 'button' ) { classList = this.$focusedElement.attr("class").split(/\s+/); $.each(classList, function(index, item) { if (item.substring(0,20) === 'able-button-handler-') { - $('div.able-controller div.' + item).focus(); + $mediaParent.find('div.able-controller div.' + item).trigger('focus'); } }); } @@ -14203,12 +12807,11 @@ if (typeof module !== "undefined" && module.exports) { thisObj.showDescription(position); thisObj.updateChapter(thisObj.convertChapterTimeToVideoTime(position)); thisObj.updateMeta(position); - thisObj.refreshControls('init'); + thisObj.refreshControls(); }).on('stopTracking', function (e, position) { if (thisObj.useChapterTimes) { thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); - } - else { + } else { thisObj.seekTo(position); } if (!thisObj.pausedBeforeTracking) { @@ -14220,133 +12823,120 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.onClickPlayerButton = function (el) { - var whichButton, prefsPopup; - - whichButton = this.getButtonNameFromClass($(el).attr('class')); - - if (whichButton === 'play') { - this.clickedPlay = true; - this.handlePlay(); - } - else if (whichButton === 'restart') { - this.seekTrigger = 'restart'; - this.handleRestart(); - } - else if (whichButton === 'previous') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'previous'; - this.buttonWithFocus = 'previous'; - this.handlePrevTrack(); - } - else if (whichButton === 'next') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'next'; - this.buttonWithFocus = 'next'; - this.handleNextTrack(); - } - else if (whichButton === 'rewind') { - this.seekTrigger = 'rewind'; - this.handleRewind(); - } - else if (whichButton === 'forward') { - this.seekTrigger = 'forward'; - this.handleFastForward(); - } - else if (whichButton === 'mute') { - this.handleMute(); - } - else if (whichButton === 'volume') { - this.handleVolumeButtonClick(); - } - else if (whichButton === 'faster') { - this.handleRateIncrease(); - } - else if (whichButton === 'slower') { - this.handleRateDecrease(); - } - else if (whichButton === 'captions') { - this.handleCaptionToggle(); - } - else if (whichButton === 'chapters') { - this.handleChapters(); - } - else if (whichButton === 'descriptions') { - this.handleDescriptionToggle(); - } - else if (whichButton === 'sign') { - if (!this.closingSign) { - this.handleSignToggle(); - } - } - else if (whichButton === 'preferences') { - if ($(el).attr('data-prefs-popup') === 'menu') { - this.handlePrefsClick(); - } - else { - this.showingPrefsDialog = true; // stopgap - this.closePopups(); - prefsPopup = $(el).attr('data-prefs-popup'); - if (prefsPopup === 'keyboard') { - this.keyboardPrefsDialog.show(); - } - else if (prefsPopup === 'captions') { - this.captionPrefsDialog.show(); + whichButton = this.getButtonNameFromClass($(el).attr('class')); + switch ( whichButton ) { + case 'play': + this.clickedPlay = true; + this.handlePlay(); + break; + case 'restart': + this.seekTrigger = 'restart'; + this.handleRestart(); + break; + case 'previous': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'previous'; + this.buttonWithFocus = 'previous'; + this.handlePrevTrack(); + break; + case 'next': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'next'; + this.buttonWithFocus = 'next'; + this.handleNextTrack(); + break; + case 'rewind': + this.seekTrigger = 'rewind'; + this.handleRewind(); + break; + case 'forward': + this.seekTrigger = 'forward'; + this.handleFastForward(); + break; + case 'mute': + this.handleMute(); + break; + case 'volume': + this.handleVolumeButtonClick(); + break; + case 'faster': + this.handleRateIncrease(); + break; + case 'slower': + this.handleRateDecrease(); + break; + case 'captions': + this.handleCaptionToggle(); + break; + case 'chapters': + this.handleChapters(); + break; + case 'descriptions': + this.handleDescriptionToggle(); + break; + case 'sign': + if ( ! this.closingSign ) { + this.handleSignToggle(); } - else if (prefsPopup === 'descriptions') { - this.descPrefsDialog.show(); + break; + case 'preferences': + if ($(el).attr('data-prefs-popup') === 'menu') { + this.handlePrefsClick(); + } else { + this.showingPrefsDialog = true; // stopgap + this.closePopups(); + prefsPopup = $(el).attr('data-prefs-popup'); + if (prefsPopup === 'keyboard') { + this.keyboardPrefsDialog.show(); + } else if (prefsPopup === 'captions') { + this.captionPrefsDialog.show(); + } else if (prefsPopup === 'descriptions') { + this.descPrefsDialog.show(); + } else if (prefsPopup === 'transcript') { + this.transcriptPrefsDialog.show(); + } + this.showingPrefsDialog = false; } - else if (prefsPopup === 'transcript') { - this.transcriptPrefsDialog.show(); + break; + case 'transcript': + if ( !this.closingTranscript ) { + this.handleTranscriptToggle(); } - this.showingPrefsDialog = false; - } - } - else if (whichButton === 'help') { - this.handleHelpClick(); - } - else if (whichButton === 'transcript') { - if (!this.closingTranscript) { - this.handleTranscriptToggle(); - } - } - else if (whichButton === 'fullscreen') { - this.clickedFullscreenButton = true; - this.handleFullscreenToggle(); + break; + case 'fullscreen': + this.clickedFullscreenButton = true; + this.handleFullscreenToggle(); + break; } }; - AblePlayer.prototype.getButtonNameFromClass = function (classString) { - - // player control buttons all have class="able-button-handler-x" where x is the identifier + AblePlayer.prototype.getButtonNameFromClass = function (classString) { + // player control buttons all have class="able-button-handler-x" where x is the identifier // buttons might also have other classes assigned though + var classes, i; - var classes, i; - - classes = classString.split(' '); - for (i = 0; i < classes.length; i++) { - if (classes[i].substring(0,20) === 'able-button-handler-') { - return classes[i].substring(20); + classes = classString.split(' '); + for (i = 0; i < classes.length; i++) { + if (classes[i].substring(0,20) === 'able-button-handler-') { + return classes[i].substring(20); } - } - return classString; + } + return classString; } AblePlayer.prototype.okToHandleKeyPress = function () { - - // returns true unless user's focus is on a UI element + let defaultReturn = true; + if ( this.prefNoKeyShortcuts === 1 ) { + defaultReturn = false; + } + // returns true unless user's focus is on a UI element or user has disabled keyboard shortcuts. // that is likely to need supported keystrokes, including space - var activeElement = AblePlayer.getActiveDOMElement(); - if ($(activeElement).prop('tagName') === 'INPUT') { - return false; - } - else { - return true; - } + return ($(activeElement).prop('tagName') === 'INPUT') ? false : defaultReturn; }; AblePlayer.prototype.onPlayerKeyPress = function (e) { @@ -14354,24 +12944,21 @@ if (typeof module !== "undefined" && module.exports) { // handle keystrokes (using DHTML Style Guide recommended key combinations) // https://web.archive.org/web/20130127004544/http://dev.aol.com/dhtml_style_guide/#mediaplayer // Modifier keys Alt + Ctrl are on by default, but can be changed within Preferences - // NOTE #1: Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down + // - Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down // The rest are reasonable best choices - // NOTE #2: If there are multiple players on a single page, keystroke handlers + // - If there are multiple players on a single page, keystroke handlers // are only bound to the FIRST player - // NOTE #3: The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions + // - The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions // including removal of the "media player" design pattern. There's an issue about that: // https://github.com/w3c/aria-practices/issues/27 - var which, $thisElement; + var key, $thisElement; // Convert to lower case. - which = e.which; - if (which >= 65 && which <= 90) { - which += 32; - } + key = e.key; $thisElement = $(document.activeElement); - if (which === 27) { // escape + if (key === 'Escape') { if (this.$transcriptArea && $.contains(this.$transcriptArea[0],$thisElement[0]) && !this.hidingPopup) { // This element is part of transcript area. this.handleTranscriptToggle(); @@ -14394,101 +12981,86 @@ if (typeof module !== "undefined" && module.exports) { (e.target.tagName === 'TEXTAREA' && !this.stenoMode) \|\| e.target.tagName === 'SELECT' )){ - if (which === 27) { // escape + if (key === 'Escape') { this.closePopups(); this.$tooltipDiv.hide(); this.seekBar.hideSliderTooltips(); - } - else if (which === 32) { // spacebar = play/pause + } else if (key === ' ') { // disable spacebar support for play/pause toggle as of 4.2.10 // spacebar should not be handled everywhere on the page, since users use that to scroll the page // when the player has focus, most controls are buttons so spacebar should be used to trigger the buttons if ($thisElement.attr('role') === 'button') { // register a click on this element e.preventDefault(); - $thisElement.click(); + $thisElement.trigger( 'click' ); } - } - else if (which === 112) { // p = play/pause + } else if ( key === 'p' ) { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePlay(); } - } - else if (which === 115) { // s = stop (now restart) + } else if (key === 's') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRestart(); } - } - else if (which === 109) { // m = mute + } else if (key === 'm') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleMute(); } - } - else if (which === 118) { // v = volume + } else if (key === 'v') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleVolumeButtonClick(); } - } - else if (which >= 49 && which <= 57) { // set volume 1-9 + } else if (key >= 0 && key <= 9) { if (this.usingModifierKeys(e)) { e.preventDefault(); - this.handleVolumeKeystroke(which); + this.handleVolumeKeystroke(key); } - } - else if (which === 99) { // c = caption toggle + } else if (key === 'c') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleCaptionToggle(); } - } - else if (which === 100) { // d = description + } else if (key === 'd') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleDescriptionToggle(); } - } - else if (which === 102) { // f = forward + } else if (key === 'f') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleFastForward(); } - } - else if (which === 114) { // r = rewind + } else if (key === 'r') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRewind(); } - } - else if (which === 98) { // b = back (previous track) + } else if (key === 'b') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrevTrack(); } - } - else if (which === 110) { // n = next track + } else if (key === 'n') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleNextTrack(); } - } - else if (which === 101) { // e = preferences + } else if (key === 'e') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrefsClick(); } - } - else if (which === 13) { // Enter + } else if (key === 'Enter') { if ($thisElement.attr('role') === 'button' \|\| $thisElement.prop('tagName') === 'SPAN') { // register a click on this element // if it's a transcript span the transcript span click handler will take over - $thisElement.click(); - } - else if ($thisElement.prop('tagName') === 'LI') { - $thisElement.click(); + $thisElement.trigger( 'click' ); + } else if ($thisElement.prop('tagName') === 'LI') { + $thisElement.trigger( 'click' ); } } } @@ -14509,10 +13081,7 @@ if (typeof module !== "undefined" && module.exports) { }) .on('loadedmetadata',function() { // should be able to get duration now - thisObj.duration = thisObj.media.duration; - var x = 50.5; - var y = 51.9; - var diff = Math.abs(Math.round(x)-Math.round(y)); + thisObj.duration = thisObj.media.duration; }) .on('canplay',function() { // previously handled seeking to startTime here @@ -14520,21 +13089,21 @@ if (typeof module !== "undefined" && module.exports) { // so we know player can seek ahead to anything }) .on('canplaythrough',function() { - // previously onMediaNewSourceLoad() was called on 'loadedmetadata' - // but that proved to be too soon for some of this functionality. - // TODO: Monitor this. If moving it here causes performance issues, - // consider moving some or all of this functionality to 'canplay' - thisObj.onMediaNewSourceLoad(); + // previously onMediaNewSourceLoad() was called on 'loadedmetadata' + // but that proved to be too soon for some of this functionality. + // TODO: Monitor this. If moving it here causes performance issues, + // consider moving some or all of this functionality to 'canplay' + thisObj.onMediaNewSourceLoad(); }) .on('play',function() { - // both 'play' and 'playing' seem to be fired in all browsers (including IE11) - // therefore, doing nothing here & doing everything when 'playing' is triggered - thisObj.refreshControls('playpause'); + // 'play' indicates that the play method has been called. + // Don't do anything until playback has actually started. }) .on('playing',function() { + // 'playing' indicates that the video is playing. thisObj.playing = true; thisObj.paused = false; - thisObj.swappingSrc = false; + thisObj.swappingSrc = false; thisObj.refreshControls('playpause'); }) .on('ended',function() { @@ -14546,8 +13115,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.refreshControls('timeline'); }) .on('waiting',function() { - // do something - // previously called refreshControls() here but this event probably doesn't warrant a refresh + // could fire a notification about loss of data. }) .on('durationchange',function() { // Display new duration. @@ -14556,21 +13124,19 @@ if (typeof module !== "undefined" && module.exports) { .on('timeupdate',function() { thisObj.onMediaUpdateTime(); // includes a call to refreshControls() }) - .on('pause',function() { - if (!thisObj.clickedPlay) { + .on('pause',function() { + if (!thisObj.clickedPlay) { // 'pause' was triggered automatically, not initiated by user // this happens in some browsers when swapping source // (e.g., between tracks in a playlist or swapping description) - if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { + if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -14641,11 +13207,11 @@ if (typeof module !== "undefined" && module.exports) { // Triggered as the video is loaded. // Reports back the amount of the video that has been buffered (NOT the amount played) // Data has keys duration, percent, and seconds - }); + }); this.vimeoPlayer.on('seeking', function(data) { // Triggered when the player starts seeking to a specific time. // A timeupdate event will also be fired at the same time. - }); + }); this.vimeoPlayer.on('seeked', function(data) { // Triggered when the player seeks to a specific time. // A timeupdate event will also be fired at the same time. @@ -14664,13 +13230,11 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -14708,10 +13272,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addEventListeners = function () { - var thisObj, whichButton, thisElement; - - // Save the current object context in thisObj for use with inner functions. - thisObj = this; + var thisObj = this; // Appropriately resize media player for full screen. $(window).on('resize',function () { @@ -14729,7 +13290,7 @@ if (typeof module !== "undefined" && module.exports) { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { // the player's style attribute has changed. Check to see if it's visible if (thisObj.$ableDiv.is(':visible')) { - thisObj.refreshControls('init'); + thisObj.refreshControls(); } } }); @@ -14737,15 +13298,9 @@ if (typeof module !== "undefined" && module.exports) { var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); } - else { - // browser doesn't support MutationObserver - // TODO: Figure out an alternative solution for this rare use case in older browsers - // See example in buildplayer.js > useSvg() - } if (typeof this.seekBar !== 'undefined') { this.addSeekbarListeners(); - } - else { + } else { // wait a bit and try again // TODO: Should set this up to keep trying repeatedly. // Seekbar listeners are critical. @@ -14763,20 +13318,20 @@ if (typeof module !== "undefined" && module.exports) { }); // handle clicks (left only) anywhere on the page. If any popups are open, close them. - $(document).on('click',function(e) { + $('body').on('click', function(e) { if (e.button !== 0) { // not a left click return false; - } - if ($('.able-popup:visible').length \|\| $('.able-volume-popup:visible')) { + } + if ($('.able-popup:visible').length \|\| $('.able-volume-slider:visible').length ) { // at least one popup is visible thisObj.closePopups(); } - if (e.target.tagName === 'VIDEO') { + if (e.target.tagName === 'VIDEO') { // user clicked the video (not an element that sits on top of the video) - // handle this as a play/pause toggle click - thisObj.clickedPlay = true; - } + // handle this as a play/pause toggle click + thisObj.clickedPlay = true; + } }); // handle mouse movement over player; make controls visible again if hidden @@ -14793,8 +13348,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); @@ -14807,7 +13361,7 @@ if (typeof module !== "undefined" && module.exports) { }); // if user presses a key from anywhere on the page, show player controls - $(document).keydown(function(e) { + $(document).on( 'keydown', function(e) { if (thisObj.controlsHidden) { thisObj.fadeControls('in'); thisObj.controlsHidden = false; @@ -14819,8 +13373,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // controls are visible // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { @@ -14835,8 +13388,8 @@ if (typeof module !== "undefined" && module.exports) { }); // handle local keydown events if this isn't the only player on the page; - // otherwise these are dispatched by global handler (see ableplayer-base,js) - this.$ableDiv.keydown(function (e) { + // otherwise these are dispatched by global handler (see ableplayer-base.js) + this.$ableDiv.on( 'keydown', function (e) { if (AblePlayer.nextIndex > 1) { thisObj.onPlayerKeyPress(e); } @@ -14861,7 +13414,7 @@ if (typeof module !== "undefined" && module.exports) { // handle clicks on playlist items if (this.$playlist) { - this.$playlist.click(function(e) { + this.$playlist.on( 'click', function(e) { if (!thisObj.userClickedPlaylist) { // stopgap in case multiple clicks are fired on the same playlist item thisObj.userClickedPlaylist = true; // will be set to false after new src is loaded & canplaythrough is triggered @@ -14872,18 +13425,16 @@ if (typeof module !== "undefined" && module.exports) { } // Also play/pause when clicking on the media. - this.$media.click(function () { + this.$media.on( 'click', function () { thisObj.handlePlay(); }); // add listeners for media events if (this.player === 'html5') { this.addHtml5MediaListeners(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.addVimeoListeners(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // Youtube doesn't give us time update events, so we just periodically generate them ourselves setInterval(function () { thisObj.onMediaUpdateTime(); @@ -14893,7 +13444,6 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); (function ($) { - AblePlayer.prototype.initDragDrop = function ( which ) { // supported values of which: 'sign', 'transcript' @@ -14901,13 +13451,13 @@ if (typeof module !== "undefined" && module.exports) { // NOTE: "Drag and Drop" for Able Player is a metaphor only!!! // HTML5 Drag & Drop API enables moving elements to new locations in the DOM // Thats not our purpose; we're simply changing the visible position on-screen - // Therefore, the drag & drop interface was overhauled in v2.3.41 to simple + // Therefore, the drag & drop interface was overhauled in v2.3.41 to simply // use mouse (and keyboard) events to change CSS positioning properties // There are nevertheless lessons to be learned from Drag & Drop about accessibility: // http://dev.opera.com/articles/accessible-drag-and-drop/ - var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, + var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, i, x1, y1, x2, y2, $resizeLine, resizeZIndex; thisObj = this; @@ -14916,71 +13466,77 @@ if (typeof module !== "undefined" && module.exports) { $window = this.$transcriptArea; windowName = 'transcript-window'; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + $toolbar.attr( 'aria-label', this.translate( 'transcriptControls', 'Transcript Window Controls' ) ); + } else if (which === 'sign') { $window = this.$signWindow; windowName = 'sign-window'; $toolbar = this.$signToolbar; + $toolbar.attr( 'aria-label', this.translate( 'signControls', 'Sign Language Window Controls' ) ); } // add class to trigger change in cursor on hover $toolbar.addClass('able-draggable'); + $toolbar.attr( 'role', 'application' ); + $dragHandle = $('<div>',{ + 'class': 'able-drag-handle' + }); + + $dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'); // add resize handle selector to bottom right corner $resizeHandle = $('<div>',{ 'class': 'able-resizable' }); - // fill it with three parallel diagonal lines + // fill it with three parallel diagonal lines $resizeSvg = $('<svg>').attr({ 'width': '100%', 'height': '100%', 'viewBox': '0 0 100 100', 'preserveAspectRatio': 'none' }); - for (i=1; i<=3; i++) { - if (i === 1) { - x1 = '100'; - y1 = '0'; - x2 = '0'; - y2 = '100'; - } - else if (i === 2) { - x1 = '33'; - y1 = '100'; - x2 = '100'; - y2 = '33'; - } - else if (i === 3) { - x1 = '67'; - y1 = '100'; - x2 = '100'; - y2 = '67'; - } - $resizeLine = $('<line>').attr({ + for (i=1; i<=3; i++) { + if (i === 1) { + x1 = '100'; + y1 = '0'; + x2 = '0'; + y2 = '100'; + } else if (i === 2) { + x1 = '33'; + y1 = '100'; + x2 = '100'; + y2 = '33'; + } else if (i === 3) { + x1 = '67'; + y1 = '100'; + x2 = '100'; + y2 = '67'; + } + $resizeLine = $('<line>').attr({ 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2, - 'vector-effect': 'non-scaling-stroke' + 'vector-effect': 'non-scaling-stroke' }) - $resizeSvg.append($resizeLine); + $resizeSvg.append($resizeLine); } - $resizeHandle.html($resizeSvg); + $resizeHandle.html($resizeSvg); // assign z-index that's slightly higher than parent window resizeZIndex = parseInt($window.css('z-index')) + 100; $resizeHandle.css('z-index',resizeZIndex); $window.append($resizeHandle); + $toolbar.append($dragHandle); // Final step: Need to refresh the DOM in order for browser to process & display the SVG $resizeHandle.html($resizeHandle.html()); // add event listener to toolbar to start and end drag // other event listeners will be added when drag starts - $toolbar.on('mousedown mouseup touchstart touchend', function(e) { + $dragHandle.on('mousedown mouseup touchstart touchend', function(e) { e.stopPropagation(); - if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + if (e.type === 'mousedown' \|\| e.type === 'touchstart' ) { if (!thisObj.windowMenuClickRegistered) { thisObj.windowMenuClickRegistered = true; thisObj.startMouseX = e.pageX; @@ -14988,8 +13544,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.dragDevice = 'mouse'; // ok to use this even if device is a touchpad thisObj.startDrag(which, $window); } - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.dragging && thisObj.dragDevice === 'mouse') { thisObj.endDrag(which); } @@ -15007,8 +13562,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.startMouseY = e.pageY; thisObj.startResize(which, $window); } - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.resizing) { thisObj.endResize(which); } @@ -15024,16 +13578,12 @@ if (typeof module !== "undefined" && module.exports) { } thisObj.finishingDrag = false; }); - this.addWindowMenu(which,$window,windowName); }; AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) { - var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg, - $buttonLabel, tooltipId, $tooltip, $popup, - label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip, - $optionList, menuBaseId, options, i, $optionItem, option, menuId; + var thisObj, $windowAlert, menuId, $newButton, tooltipId, $tooltip, $popup, menuId; thisObj = this; @@ -15046,50 +13596,18 @@ if (typeof module !== "undefined" && module.exports) { // this will prevent the click event from being triggered this.finishingDrag = false; - // create an alert div and add it to window - $windowAlert = $('<div role="alert"></div>'); - $windowAlert.addClass('able-alert'); - $windowAlert.hide(); - $windowAlert.appendTo(this.$activeWindow); - $windowAlert.css({ - top: $window.offset().top - }); - // add button to draggable window which triggers a popup menu - // for now, re-use preferences icon for this purpose menuId = this.mediaId + '-' + windowName + '-menu'; $newButton = $('<button>',{ 'type': 'button', 'tabindex': '0', - 'aria-label': this.tt.windowButtonLabel, 'aria-haspopup': 'true', 'aria-controls': menuId, 'aria-expanded': 'false', 'class': 'able-button-handler-preferences' }); - if (this.iconType === 'font') { - $buttonIcon = $('<span>',{ - 'class': 'icon-preferences', - 'aria-hidden': 'true' - }); - $newButton.append($buttonIcon); - } - else { - // use image - buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png'; - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - - // add the visibly-hidden label for screen readers that don't support aria-label on the button - $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(this.tt.windowButtonLabel); - $newButton.append($buttonLabel); + this.getIcon( $newButton, 'preferences' ); + this.setText( $newButton, this.translate( 'windowButtonLabel', 'Window options' ) ); // add a tooltip that displays aria-label on mouseenter or focus tooltipId = this.mediaId + '-' + windowName + '-tooltip'; @@ -15097,20 +13615,20 @@ if (typeof module !== "undefined" && module.exports) { 'class' : 'able-tooltip', 'id' : tooltipId }).hide(); + $newButton.on('mouseenter focus',function(e) { var label = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - var tooltipY = position.top - buttonHeight - 5; + var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label); + // get height of the tooltip + var tooltipHeight = tooltip.height(); + var tooltipY = ( tooltipHeight + 2 ) -1; var tooltipX = 0; var tooltipStyle = { - left: '', - right: tooltipX + 'px', + right: '', + left: tooltipX + 'px', top: tooltipY + 'px' }; - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle); + tooltip.css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); @@ -15121,20 +13639,17 @@ if (typeof module !== "undefined" && module.exports) { $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window' // define vars and assemble all the parts if (which === 'transcript') { - this.$transcriptAlert = $windowAlert; this.$transcriptPopupButton = $newButton; this.$transcriptPopup = $popup; this.$transcriptToolbar.prepend($windowAlert,$newButton,$tooltip,$popup); - } - else if (which === 'sign') { - this.$signAlert = $windowAlert; + } else if (which === 'sign') { this.$signPopupButton = $newButton; this.$signPopup = $popup; this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup); } // handle button click - $newButton.on('click mousedown keydown',function(e) { + $newButton.on('click keydown',function(e) { if (thisObj.focusNotClick) { return false; @@ -15145,6 +13660,7 @@ if (typeof module !== "undefined" && module.exports) { } e.stopPropagation(); if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { + console.log( 'firing' ); // don't set windowMenuClickRegistered yet; that happens in handler function thisObj.handleWindowButtonClick(which, e); } @@ -15156,30 +13672,23 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addResizeDialog = function (which, $window) { - var thisObj, $windowPopup, $windowButton, - widthId, heightId, startingWidth, startingHeight, aspectRatio, - $resizeForm, $resizeWrapper, - $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, - $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, - tempWidth, tempHeight, - $saveButton, $cancelButton, newWidth, newHeight, resizeDialog; + var thisObj, $windowPopup, $windowButton, widthId, heightId, + $resizeForm, $resizeWrapper, $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, + $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, $saveButton, $cancelButton, + newWidth, newHeight, resizeDialog; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } widthId = this.mediaId + '-resize-' + which + '-width'; heightId = this.mediaId + '-resize-' + which + '-height'; - startingWidth = $window.width(); - startingHeight = $window.height(); - aspectRatio = startingWidth / startingHeight; $resizeForm = $('<div></div>',{ 'class' : 'able-resize-form' @@ -15187,76 +13696,72 @@ if (typeof module !== "undefined" && module.exports) { // inner container for all content, will be assigned to modal div's aria-describedby $resizeWrapper = $('<div></div>'); + $resizeControls = $( '<div class="able-prefs-buttons"></div>' ); // width field $resizeWidthDiv = $('<div></div>'); $resizeWidthInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': widthId, - 'value': startingWidth + 'min': 0, + 'value': '', }); $resizeWidthLabel = $('<label>',{ 'for': widthId - }).text(this.tt.width); + }).text( this.translate( 'width', 'Width' ) ); // height field $resizeHeightDiv = $('<div></div>'); $resizeHeightInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': heightId, - 'value': startingHeight + 'min': 0, + 'value': '', }); $resizeHeightLabel = $('<label>',{ 'for': heightId - }).text(this.tt.height); - - if (which === 'sign') { - // make height a read-only field - // and calculate its value based on width to preserve aspect ratio - $resizeHeightInput.prop('readonly',true); - $resizeWidthInput.on('input',function() { - tempWidth = $(this).val(); - tempHeight = Math.round(tempWidth/aspectRatio, 0); - $resizeHeightInput.val(tempHeight); - }) - } + }).text( this.translate( 'height', 'Height' ) ); // Add save and cancel buttons. - $saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - $cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); $saveButton.on('click',function () { newWidth = $('#' + widthId).val(); newHeight = $('#' + heightId).val(); - if (newWidth !== startingWidth \|\| newHeight !== startingHeight) { - thisObj.resizeObject(which,newWidth,newHeight); - thisObj.updateCookie(which); - } + thisObj.resizeObject(which,newWidth,newHeight); + thisObj.updatePreferences(which); + resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); $cancelButton.on('click',function () { resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); // Now assemble all the parts $resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput); $resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput); $resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv); - $resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton); + $resizeControls.append($saveButton,$cancelButton); + $resizeForm.append($resizeWrapper,$resizeControls); // must be appended to the BODY! // otherwise when aria-hidden="true" is applied to all background content // that will include an ancestor of the dialog, // which will render the dialog unreadable by screen readers $('body').append($resizeForm); - resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'dialog', true, this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em'); + resizeDialog = new AccessibleDialog( + $resizeForm, + $windowButton, + this.translate( 'windowResizeHeading', 'Resize Window' ), + this.translate( 'closeButtonLabel', 'Close' ), + ); if (which === 'transcript') { this.transcriptResizeDialog = resizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.signResizeDialog = resizeDialog; } }; @@ -15266,7 +13771,6 @@ if (typeof module !== "undefined" && module.exports) { var thisObj, $windowPopup, $windowButton, $toolbar, popupTop; thisObj = this; - if (this.focusNotClick) { // transcript or sign window has just opened, // and focus moved to the window button @@ -15278,73 +13782,62 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; $toolbar = this.$signToolbar; } - if (e.type === 'keydown') { // user pressed a key - if (e.which === 32 \|\| e.which === 13) { - // this was Enter or space + if (e.key === ' ' \|\| e.key === 'Enter') { this.windowMenuClickRegistered = true; - } - else if (e.which === 27) { // escape + } else if (e.key === 'Escape') { if ($windowPopup.is(':visible')) { // close the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - } - else { + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + // also return focus to window options button + $windowButton.trigger('focus'); + } else { // popup isn't open. Close the window if (which === 'sign') { this.handleSignToggle(); - } - else if (which === 'transcript') { + } else if (which === 'transcript') { this.handleTranscriptToggle(); } } - } - else { + } else { return false; } - } - else { + } else { // this was a mouse event this.windowMenuClickRegistered = true; } - if ($windowPopup.is(':visible')) { - $windowPopup.hide(200,'',function() { - thisObj.windowMenuClickRegistered = false; // reset - }); + if ( $windowPopup.is(':visible') ) { + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; // reset $windowPopup.find('li').removeClass('able-focus'); - $windowButton.attr('aria-expanded','false').focus(); - } - else { + $windowButton.attr('aria-expanded','false').trigger('focus'); + } else { // first, be sure window is on top this.updateZIndex(which); - popupTop = $windowButton.position().top + $windowButton.outerHeight(); + popupTop = $toolbar.outerHeight() - 1; $windowPopup.css('top', popupTop); - $windowPopup.show(200,'',function() { - $windowButton.attr('aria-expanded','true'); - $(this).find('li').first().focus().addClass('able-focus'); - thisObj.windowMenuClickRegistered = false; // reset - }); + $windowPopup.show(); + $windowButton.attr('aria-expanded','true'); + $(this).find('li').first().trigger('focus').addClass('able-focus'); + thisObj.windowMenuClickRegistered = false; // reset } }; AblePlayer.prototype.handleMenuChoice = function (which, choice, e) { - var thisObj, $window, $windowPopup, $windowButton, resizeDialog, width, height, $thisRadio; + var thisObj, $window, $windowPopup, $windowButton, resizeDialog, startingWidth, startingHeight, + aspectRatio, tempWidth, tempHeight; thisObj = this; if (which === 'transcript') { @@ -15352,30 +13845,42 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; resizeDialog = this.transcriptResizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { $window = this.$signWindow; $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; resizeDialog = this.signResizeDialog; + + startingWidth = $window.outerWidth(); + startingHeight = $window.outerHeight(); + aspectRatio = startingWidth / startingHeight; + // make height a read-only field + // and calculate its value based on width to preserve aspect ratio + widthId = this.mediaId + '-resize-' + which + '-width'; + heightId = this.mediaId + '-resize-' + which + '-height'; + $( '#' + heightId ).prop('readonly',true); + $( '#' + widthId ).on('input',function() { + tempWidth = $(this).val(); + tempHeight = Math.round(tempWidth/aspectRatio); + $( '#' + heightId ).val(tempHeight); + }); } this.$activeWindow = $window; if (e.type === 'keydown') { - if (e.which === 27) { // escape + if (e.key === 'Escape') { // escape // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - // also return focus to window options button - $windowButton.focus(); - }); + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + // also return focus to window options button + $windowButton.trigger('focus'); + return false; - } - else { + } else { // all other keys will be handled by upstream functions if (choice !== 'close') { this.$activeWindow = $window; @@ -15385,58 +13890,48 @@ if (typeof module !== "undefined" && module.exports) { } // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - }); + $windowPopup.hide(); + // also reset the boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + if (choice !== 'close') { - $windowButton.focus(); + $windowButton.trigger('focus'); } if (choice === 'move') { - // temporarily add role="application" to activeWindow // otherwise, screen readers incercept arrow keys and moving window will not work this.$activeWindow.attr('role','application'); if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); + this.showAlert( this.translate( 'windowMoveAlert', 'Drag or use arrow keys to move the window; Enter to stop' ),which); if (which === 'transcript') { this.showedTranscriptAlert = true; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.showedSignAlert = true; } } - if (e.type === 'keydown') { - this.dragDevice = 'keyboard'; - } - else { - this.dragDevice = 'mouse'; - } + this.dragDevice = (e.type === 'keydown') ? 'keyboard' : 'mouse'; this.startDrag(which, $window); - $windowPopup.hide().parent().focus(); - } - else if (choice == 'resize') { + $windowPopup.hide().parent().attr( 'tabindex', '-1' ).trigger('focus'); + } else if (choice == 'resize') { // resize through the menu uses a form, not drag var resizeFields = resizeDialog.getInputs(); if (resizeFields) { // reset width and height values in form - resizeFields[0].value = $window.width(); - resizeFields[1].value = $window.height(); + resizeFields[0].value = Math.round( $window.outerWidth() ); + resizeFields[1].value = Math.round( $window.outerHeight() ); } resizeDialog.show(); - } - else if (choice == 'close') { + } else if (choice == 'close') { // close window, place focus on corresponding button on controller bar if (which === 'transcript') { - this.closingTranscript = true; // stopgrap to prevent double-firing of keypress + this.closingTranscript = true; // stopgap to prevent double-firing of keypress this.handleTranscriptToggle(); - } - else if (which === 'sign') { - this.closingSign = true; // stopgrap to prevent double-firing of keypress + } else if (which === 'sign') { + this.closingSign = true; // stopgap to prevent double-firing of keypress this.handleSignToggle(); } } @@ -15444,7 +13939,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.startDrag = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newX, newY; + var thisObj, $windowPopup, startPos, newX, newY; thisObj = this; @@ -15455,21 +13950,10 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; } - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - // if window's popup menu is open, close it if ($windowPopup.is(':visible')) { $windowPopup.hide(); @@ -15489,8 +13973,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyY = this.dragStartY; // add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd() this.startingDrag = true; - } - else { + } else { this.dragDevice = 'mouse'; // get offset between mouse position and top left corner of draggable element this.dragOffsetX = this.startMouseX - this.dragStartX; @@ -15502,8 +13985,9 @@ if (typeof module !== "undefined" && module.exports) { 'position': 'absolute', 'top': this.dragStartY + 'px', 'left': this.dragStartX + 'px' - }).focus(); + }).trigger('focus'); + var dragDevice = this.dragDevice; // add device-specific event listeners if (this.dragDevice === 'mouse') { // might also be a touchpad $(document).on('mousemove touchmove',function(e) { @@ -15514,8 +13998,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resetDraggedObject( newX, newY ); } }); - } - else if (this.dragDevice === 'keyboard') { + } else if (this.dragDevice === 'keyboard') { this.$activeWindow.on('keydown',function(e) { if (thisObj.dragging) { thisObj.dragKeys(which, e); @@ -15525,40 +14008,45 @@ if (typeof module !== "undefined" && module.exports) { return false; }; + /** + * Handle moving the transcript or sign window from the keyboard. + * + * @param {string} which 'transcript' or 'sign' window. + * @param {Event} e Triggered event. + / AblePlayer.prototype.dragKeys = function(which, e) { var key, keySpeed; - var thisObj = this; - // stopgap to prevent firing on initial Enter or space // that selected "Move" from menu if (this.startingDrag) { this.startingDrag = false; return false; } - key = e.which; + key = e.key; keySpeed = 10; // pixels per keypress event switch (key) { - case 37: // left - case 63234: + case 'ArrowLeft': // left this.dragKeyX -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveLeft', 'Window moved left' ) ); break; - case 38: // up - case 63232: + case 'ArrowUp': // up this.dragKeyY -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveUp', 'Window moved up' ) ); break; - case 39: // right - case 63235: + case 'ArrowRight': // right this.dragKeyX += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveRight', 'Window moved right' ) ); break; - case 40: // down - case 63233: + case 'ArrowDown': // down this.dragKeyY += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveDown', 'Window moved down' ) ); break; - case 13: // enter - case 27: // escape + case 'Enter': // enter + case 'Escape': // escape + this.$srAlertBox.text( this.translate( 'windowMoveStopped', 'Window move stopped' ) ); this.endDrag(which); return false; default: @@ -15572,6 +14060,9 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.resetDraggedObject = function ( x, y) { + setTimeout( () => { + this.$srAlertBox.text( '' ); + }, 2000 ); this.$activeWindow.css({ 'left': x + 'px', @@ -15591,7 +14082,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { // $activeWindow is the outer $transcriptArea - // but the inner able-transcript also needs to be resized proporitionally + // but the inner able-transcript also needs to be resized proportionally // (it's 50px less than its outer container) innerHeight = height - 50; this.$transcriptDiv.css('height', innerHeight + 'px'); @@ -15600,14 +14091,13 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.endDrag = function(which) { - var thisObj, $window, $windowPopup, $windowButton; + var thisObj, $windowPopup, $windowButton; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } @@ -15619,12 +14109,12 @@ if (typeof module !== "undefined" && module.exports) { this.$activeWindow = null; if (this.dragDevice === 'keyboard') { - $windowButton.focus(); + $windowButton.trigger('focus'); } this.dragging = false; // save final position of dragged element - this.updateCookie(which); + this.updatePreferences(which); // reset starting mouse positions this.startMouseX = undefined; @@ -15633,7 +14123,7 @@ if (typeof module !== "undefined" && module.exports) { // Boolean to stop stray events from firing this.windowMenuClickRegistered = false; this.finishingDrag = true; // will be reset after window click event - // finishingDrag should e reset after window click event, + // finishingDrag should be reset after window click event, // which is triggered automatically after mouseup // However, in case that's not reliable in some browsers // need to ensure this gets cancelled @@ -15642,45 +14132,19 @@ if (typeof module !== "undefined" && module.exports) { }, 100); }; - AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) { - - // return true if mouse is close to bottom right corner (resize target) - var tolerance, position, top, left, width, height, bottom, right; - - tolerance = 10; // number of pixels in both directions considered "close enough" - - // first, get position of element - position = $window.offset(); - top = position.top; - left = position.left; - width = $window.width(); - height = $window.height(); - bottom = top + height; - right = left + width; - if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) { - return true; - } - return false; - }; - AblePlayer.prototype.startResize = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight; + var thisObj, $windowPopup, newWidth, newHeight; thisObj = this; this.$activeWindow = $element; this.resizing = true; - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } + $windowPopup = (which === 'transcript') ? this.$transcriptPopup : this.$signPopup; // if window's popup menu is open, close it & place focus on button (???) if ($windowPopup.is(':visible')) { - $windowPopup.hide().parent().focus(); + $windowPopup.hide().parent().trigger('focus'); } // get starting width and height @@ -15688,7 +14152,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyX = this.dragStartX; this.dragKeyY = this.dragStartY; this.dragStartWidth = this.$activeWindow.width(); - this.dragStartHeight = this.$activeWindow.height(); + this.dragStartHeight = this.$activeWindow.outerHeight(); // add event listeners $(document).on('mousemove touchmove',function(e) { @@ -15699,30 +14163,30 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resizeObject( which, newWidth, newHeight ); } }); + return false; }; AblePlayer.prototype.endResize = function(which) { - var $window, $windowPopup, $windowButton; + var $windowPopup, $windowButton; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } $(document).off('mousemove mouseup touchmove touchup'); this.$activeWindow.off('keydown'); - $windowButton.show().focus(); + $windowButton.show().trigger('focus'); this.resizing = false; this.$activeWindow.removeClass('able-resize'); // save final width and height of dragged element - this.updateCookie(which); + this.updatePreferences(which); // Booleans for preventing stray events this.windowMenuClickRegistered = false; @@ -15736,28 +14200,37 @@ if (typeof module !== "undefined" && module.exports) { this.finishingDrag = false; }, 100); }; - })(jQuery); (function ($) { AblePlayer.prototype.initSignLanguage = function() { - - // Sign language is only currently supported in HTML5 player, not YouTube or Vimeo - if (this.player === 'html5') { + this.hasSignLanguage = false; + // Sign language is only currently supported in HTML5 player and YouTube. + var hasLocalSrc = ( this.$sources.first().attr('data-sign-src') !== undefined && this.$sources.first().attr('data-sign-src') !== "" ); + // YouTube src can either be on a `source` element or on the `video` element. + var hasRemoteSrc = ( this.$media.data('youtube-sign-src') !== undefined && this.$media.data('youtube-sign-src') !== "" ); + var hasRemoteSource = ( this.$sources.first().attr('data-youtube-sign-src') !== undefined && this.$sources.first().attr('data-youtube-sign-src') !== '' ); + if ( ! this.isIOS() && ( hasLocalSrc \|\| hasRemoteSrc \|\| hasRemoteSource ) && ( this.player === 'html5' \|\| this.player === 'youtube' ) ) { // check to see if there's a sign language video accompanying this video // check only the first source // If sign language is provided, it must be provided for all sources - this.signFile = this.$sources.first().attr('data-sign-src'); - if (this.signFile) { + let ytSignSrc = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') ); + let signSrc = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') ); + let signVideo = DOMPurify.sanitize( this.$media.data('youtube-sign-src') ); + this.signFile = (hasLocalSrc ) ? signSrc : false; + if ( hasRemoteSrc ) { + this.signYoutubeId = signVideo; + } else if ( hasRemoteSource ) { + this.signYoutubeId = ytSignSrc; + } + if ( this.signFile \|\| this.signYoutubeId ) { if (this.isIOS()) { - // IOS does not allow multiple videos to play simultaneously + // iOS does not allow multiple videos to play simultaneously // Therefore, sign language as rendered by Able Player unfortunately won't work - this.hasSignLanguage = false; if (this.debug) { - console.log('Sign language has been disabled due to IOS restrictions'); + console.log('Sign language has been disabled due to iOS restrictions'); } - } - else { + } else { if (this.debug) { console.log('This video has an accompanying sign language video: ' + this.signFile); } @@ -15765,73 +14238,179 @@ if (typeof module !== "undefined" && module.exports) { this.injectSignPlayerCode(); } } - else { - this.hasSignLanguage = false; + } + }; + + AblePlayer.prototype.injectSignPlayerCode = function() { + + // create and inject surrounding HTML structure + var thisObj, signVideoId, i, signSrc, srcType, $signSource; + + thisObj = this; + signVideoId = this.mediaId + '-sign'; + + if ( this.signFile \|\| this.signYoutubeId ) { + if ( null !== this.$signDivLocation ) { + this.$signDivLocation.addClass( 'able-sign-window able-fixed' ); + this.$signWindow = this.$signDivLocation; + } else { + this.$signWindow = $('<div>',{ + 'class' : 'able-sign-window', + 'role': 'dialog', + 'aria-label': this.translate( 'sign', 'Sign language' ) + }); + this.$signToolbar = $('<div>',{ + 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' + }); + this.$signWindow.append(this.$signToolbar); + } + + this.$ableWrapper.append(this.$signWindow); + } + + if ( this.signFile ) { + this.$signVideo = $('<video>',{ + 'id' : signVideoId, + 'tabindex' : '-1', + 'muted' : true, + }); + this.signVideo = this.$signVideo[0]; + + if ( this.signFile ) { + $signSource = $('<source>',{ + 'src' : this.signFile, + 'type' : 'video/' + this.signFile.substr(-3) + }); + this.$signVideo.append($signSource); + } else { + // for each original <source>, add a <source> to the sign <video> + for (i=0; i < this.$sources.length; i++) { + signSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-sign-src') ); + srcType = this.$sources[i].getAttribute('type'); + if (signSrc) { + $signSource = $('<source>',{ + 'src' : signSrc, + 'type' : srcType + }); + this.$signVideo.append($signSource); + } else { + // source is missing a sign language version + // can't include sign language + this.hasSignLanguage = false; + return; + } + } + } + this.$signWindow.append( this.$signVideo ); + } else if ( this.signYoutubeId ) { + this.signYoutube = this.initYouTubeSignPlayer(); + } + + // make it draggable + if ( null === this.$signDivLocation ) { + this.initDragDrop('sign'); + } + + if (this.prefSign === 1) { + // sign window is on. Go ahead and position it and show it + if ( null === this.$signDivLocation ) { + this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); } - } - else { - this.hasSignLanguage = false; + } else { + this.$signWindow.hide(); } }; - AblePlayer.prototype.injectSignPlayerCode = function() { - - // create and inject surrounding HTML structure - var thisObj, signVideoId, signVideoWidth, i, signSrc, srcType, $signSource; + AblePlayer.prototype.initYouTubeSignPlayer = function () { + var thisObj, deferred, promise; thisObj = this; + deferred = new this.defer(); + promise = deferred.promise(); - signVideoWidth = this.getDefaultWidth('sign'); + this.youTubeSignPlayerReady = false; - signVideoId = this.mediaId + '-sign'; - this.$signVideo = $('<video>',{ - 'id' : signVideoId, - 'tabindex' : '-1' - }); - this.signVideo = this.$signVideo[0]; - // for each original <source>, add a <source> to the sign <video> - for (i=0; i < this.$sources.length; i++) { - signSrc = this.$sources[i].getAttribute('data-sign-src'); - srcType = this.$sources[i].getAttribute('type'); - if (signSrc) { - $signSource = $('<source>',{ - 'src' : signSrc, - 'type' : srcType + if (AblePlayer.youTubeIframeAPIReady) { + // Script already loaded and ready. + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + } else { + // Has another player already started loading the script? If so, abort... + if ( ! AblePlayer.loadingYouTubeIframeAPI ) { + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + console.log( 'YouTube API loaded' ); }); - this.$signVideo.append($signSource); - } - else { - // source is missing a sign language version - // can't include sign language - this.hasSignLanguage = false; - break; } + + // Otherwise, keeping waiting for script load event... + $('body').on('youTubeIframeAPIReady', function () { + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + }); } + return promise; + }; - this.$signWindow = $('<div>',{ - 'class' : 'able-sign-window', - 'role': 'dialog', - 'aria-label': this.tt.sign - }); - this.$signToolbar = $('<div>',{ - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' - }); + AblePlayer.prototype.finalizeYoutubeSignInit = function () { - this.$signWindow.append(this.$signToolbar, this.$signVideo); + // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - this.$ableWrapper.append(this.$signWindow); + deferred = new this.defer(); + promise = deferred.promise(); + thisObj = this; + containerId = this.mediaId + '_youtube_sign'; - // make it draggable - this.initDragDrop('sign'); + this.$signWindow.append($('<div>').attr('id', containerId)); + autoplay = (this.okToPlay) ? 1 : 0; - if (this.prefSign === 1) { - // sign window is on. Go ahead and position it and show it - this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); - } - else { - this.$signWindow.hide(); - } + // Documentation https://developers.google.com/youtube/player_parameters + this.youTubeSignPlayer = new YT.Player(containerId, { + videoId: this.getYouTubeId(this.signYoutubeId), + host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', + playerVars: { + autoplay: autoplay, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: 0, + controls: 0, // no controls, using our own + disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, + playsinline: this.playsInline, + rel: 0, // when video ends, show only related videos from same channel (1 shows any) + start: this.startTime + }, + events: { + onReady: function (player) { + player.target.mute(); + player.target.unloadModule( 'captions' ); + thisObj.youTubeSignPlayerReady = true; + + deferred.resolve(); + }, + onError: function (x) { + deferred.reject(); + }, + onStateChange: function (x) { + thisObj.getPlayerState().then(function() { + // no actions + }); + }, + onApiChange: function() { + // No actions + }, + onPlaybackQualityChange: function () { + // no actions + }, + } + }); + + return promise; }; })(jQuery); @@ -16819,30 +15398,19 @@ if (typeof module !== "undefined" && module.exports) { // return language name associated with lang code "key" // whichName is either "English" or "local" (i.e., native name) - var lang, code, subTag; + var lang, code, subTag; lang = isoLangs[key.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName; - } - else { - return lang.name; - } - } - else if (key.includes('-')) { + if (lang) { + return (whichName === 'local') ? lang.nativeName : lang.name; + } else if (key.includes('-')) { code = key.substring(0,2); - subTag = key.substring(3); - lang = isoLangs[code.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName + ' (' + subTag + ')'; - } - else { - return lang.name + ' (' + subTag + ')'; - } + subTag = key.substring(3); + lang = isoLangs[code.toLowerCase()]; + if (lang) { + return (whichName === 'local') ? lang.nativeName + ' (' + subTag + ')' : lang.name + ' (' + subTag + ')'; } } - // if all else has failed, use the key as the label + // if all else has failed, use the key as the label return key; }; @@ -16850,51 +15418,86 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.getSupportedLangs = function() { // returns an array of languages for which AblePlayer has translation tables - var langs = ['ca','cs','da','de','en','es','fr','he','id','it','ja','nb','nl','pt','pt-br','sv','tr','zh-tw']; + var langs = { + 'ca' : 'Catalan', + 'cs' : 'Czech', + 'da' : 'Danish', + 'de' : 'German', + 'en' : 'English', + 'es' : 'Spanish', + 'fr' : 'French', + 'he' : 'Hebrew', + 'id' : 'Indonesian', + 'it' : 'Italian', + 'ja' : 'Japanese', + 'ms' : 'Malay', + 'nb' : 'Norwegian Bokmål', + 'nl' : 'Dutch', + 'pl' : 'Polish', + 'pt' : 'Portuguese', + 'pt-br' : 'Brazilian Portuguese', + 'sv' : 'Swedish', + 'tr' : 'Turkish', + 'zh-tw' : 'Chinese (Taiwan)' + }; + return langs; }; + /* + * Fetch a translated string if it exists. + * + * @param {string} key JSON key to locate translated string. + * @param {string} fallback Default language if no translation found. + * @param {Array} args Ordered array of arguments to replace in string. + * @returns + / + AblePlayer.prototype.translate = function( key, fallback, args = Array() ) { + let translation = ''; + if ( this.tt[ key ] ) { + translation = this.tt[ key ]; + } else { + translation = fallback; + } + if ( args.length > 0 ) { + args.forEach( ( val, index ) => { + let ref = index + 1; + translation = translation.replace( '%' + ref, val ); + }); + } + + return translation; + } + AblePlayer.prototype.getTranslationText = function() { // determine language, then get labels and prompts from corresponding translation var - - var deferred, thisObj, supportedLangs, docLang, msg, translationFile, collapsedLang, i, - similarLangFound; - deferred = $.Deferred(); + var deferred, thisObj, supportedLangs, docLang, translationFile, i, similarLangFound; + deferred = new this.defer(); thisObj = this; supportedLangs = this.getSupportedLangs(); // returns an array if (this.lang) { // a data-lang attribute is included on the media element - if ($.inArray(this.lang,supportedLangs) === -1) { + if ( Object.hasOwn( supportedLangs,this.lang ) ) { // the specified language is not supported - if (this.lang.indexOf('-') == 2) { + if ( this.lang.indexOf('-') == 2 ) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(this.lang.substring(0,2),supportedLangs) !== -1) { - // parent lang is supported. Use that. - this.lang = this.lang.substring(0,2); - } - else { - // the parent language is not supported either - // unable to use the specified language - this.lang = null; - } - } - else { + // if parent lang is supported. Use that, else null. + this.lang = ( Object.hasOwn(supportedLangs,this.lang.substring(0,2)) !== -1 ) ? this.lang.substring(0,2) : null; + } else { // this is not a localized language. - // but maybe there's a similar localized language supported - // that has the same parent? - similarLangFound = false; - i = 0; - while (i < supportedLangs.length) { - if (supportedLangs[i].substring(0,2) == this.lang) { - this.lang = supportedLangs[i]; - similarLangFound = true; + // but maybe there's a similar localized language supported + // that has the same parent? + similarLangFound = false; + for ( const [key,value] of Object.entries(supportedLangs) ) { + if ( key.substring(0,2) == this.lang ) { + this.lang = supportedLangs[i]; + similarLangFound = true; } - i++; } - if (!similarLangFound) { + if ( !similarLangFound ) { // language requested via data-lang is not supported this.lang = null; } @@ -16906,24 +15509,21 @@ if (typeof module !== "undefined" && module.exports) { // try the language of the web page, if specified if ($('body').attr('lang')) { docLang = $('body').attr('lang').toLowerCase(); - } - else if ($('html').attr('lang')) { + } else if ($('html').attr('lang')) { docLang = $('html').attr('lang').toLowerCase(); - } - else { + } else { docLang = null; } if (docLang) { - if ($.inArray(docLang,supportedLangs) !== -1) { + if ( Object.hasOwn( supportedLangs,docLang ) ) { // the document language is supported this.lang = docLang; - } - else { + } else { // the document language is not supported if (docLang.indexOf('-') == 2) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(docLang.substring(0,2),supportedLangs) !== -1) { + if ( Object.hasOwn(supportedLangs,docLang.substring(0,2)) ) { // the parent language is supported. use that. this.lang = docLang.substring(0,2); } @@ -16941,248 +15541,70 @@ if (typeof module !== "undefined" && module.exports) { if (!this.searchLang) { this.searchLang = this.lang; } - translationFile = this.rootPath + 'translations/' + this.lang + '.js'; - $.getJSON(translationFile, function(data) { - // success! - thisObj.tt = data; - deferred.resolve(); - }) - .fail(function() { - console.log( "Critical Error: Unable to load translation file:",translationFile); - thisObj.provideFallback(); - deferred.fail(); - }) + translationFile = this.rootPath + 'translations/' + this.lang + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + console.log( "Error: Translation files should be updated to JSON." + error,translationFile); + translationFile = thisObj.rootPath + 'translations/' + thisObj.lang + '.js'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + console.log( "Error: Unable to load translation file:", translationFile); + thisObj.tt = {}; + thisObj.translationFiles = false; + deferred.resolve(); + }); + }); return deferred.promise(); }; AblePlayer.prototype.getSampleDescriptionText = function() { + if ( ! this.translationFiles ) { + this.sampleText = []; + let translation = { 'lang':'en', 'text': this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) }; + this.sampleText.push(translation); + } else { + // Create an array of sample description text in all languages + // This needs to be readily available for testing different voices + // in the Description Preferences dialog + var thisObj, supportedLangs, thisLang, translationFile, thisText, translation; + + supportedLangs = this.getSupportedLangs(); + thisObj = this; - // Create an array of sample description text in all languages - // This needs to be readily available for testing different voices - // in the Description Preferences dialog - var thisObj, supportedLangs, i, thisLang, translationFile, thisText, translation; - - supportedLangs = this.getSupportedLangs(); - - thisObj = this; - - this.sampleText = []; - for (i=0; i < supportedLangs.length; i++) { - translationFile = this.rootPath + 'translations/' + supportedLangs[i] + '.js'; - $.getJSON(translationFile, thisLang, (function(thisLang) { - return function(data) { - thisText = data.sampleDescriptionText; - translation = {'lang':thisLang, 'text': thisText}; - thisObj.sampleText.push(translation); - }; - }(supportedLangs[i])) // pass lang to callback function - ); + this.sampleText = []; + for ( const [key,value] of Object.entries(supportedLangs) ) { + translationFile = this.rootPath + 'translations/' + key + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisText = data.sampleDescriptionText; + translation = {'lang':thisLang, 'text': thisText}; + thisObj.sampleText.push(translation); + }); + } } }; })(jQuery); -(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); - -/! Copyright (c) 2014 - Paul Tavares - purtuga - @paul_tavares - MIT License / -;(function($){ - - /* - * Delays the execution of a function until an expression returns true. - * The expression is checked every 100 milliseconds for as many tries - * as defined in in the attempts option - * - * @param {Object} options - * @param {Function} options.when - * Function to execute on every interval. - * Must return true (boolean) in order for - * options.do to be executed. - * @param {Function} [options.exec] - * Function to be executed once options.when() - * returns true. - * @param {Interger} [options.interval=100] - * How long to wait in-between tries. - * @param {Interger} [options.attempts=100] - * How many tries to use before its considered - * a failure. - * @param {Interger} [options.delayed=0] - * Number of miliseconds to wait before execution - is started. Default is imediately. - * - * @return {jQuery.Promise} - * - * @example - * - * $.doWhen({ - * when: function(){ - * return false; - * }, - * exec: function(){ - * alert("never called given false response on when param!"); - * } - * }) - * .fail(function(){ - * alert('ALERT: FAILED CONDITION'); - * }) - * .then(function(){ - * alert("resolved."); - * }); - * - / - $.doWhen = function(options) { - - return $.Deferred(function(dfd){ - - var opt = $.extend({}, { - when: null, - exec: function(){}, - interval: 100, - attempts: 100, - delayed: 0 - }, - options, - { - checkId: null - }), - startChecking = function(){ - - // Check condition now and if true, then resolve object - if (opt.when() === true) { - - opt.exec.call(dfd.promise()); - dfd.resolve(); - return; - - } - - // apply minimal UI and hide the overlay - opt.checkId = setInterval(function(){ - - if (opt.attempts === 0) { - - clearInterval(opt.checkId); - dfd.reject(); - - } else { - - --opt.attempts; - - if (opt.when() === true) { - - opt.attempts = 0; - clearInterval(opt.checkId); - opt.exec.call(dfd.promise()); - dfd.resolve(); - - } - - } - - }, opt.interval); - - }; - - if (opt.delayed > 0) { - - setTimeout(startChecking, Number(opt.delayed)); - - } else { - - startChecking(); - - } - - }).promise(); - - }; - -})(jQuery); / 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 @@ -17191,24 +15613,14 @@ if (typeof module !== "undefined" && module.exports) { (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; + var thisObj, $heading, $instructions, $p1, $p2, $ul, $li1, $li2, $li3, + $fieldset, $legend, i, $radioDiv, radioId, $label, $radio, $saveButton, $savedTable; thisObj = this; - if ($('#able-vts').length) { - // Page includes a container for a VTS instance - + if ( null !== document.getElementById( 'able-vts' ) ) { // Are they qualifying tracks? if (this.vtsTracks.length) { - // Yes - there are! - // Build an array of unique languages this.langs = []; this.getAllLangs(this.vtsTracks); @@ -17217,7 +15629,8 @@ if (typeof module !== "undefined" && module.exports) { this.vtsLang = this.lang; // Inject a heading - $heading = $('<h2>').text('Video Transcript Sorter'); // TODO: Localize; intelligently assign proper heading level + let heading = this.translate( 'vtsHeading', 'Video Transcript Sorter' ); + $heading = $('<h2>').text( heading ); // TODO: intelligently assign proper heading level $('#able-vts').append($heading); // Inject an empty div for writing messages @@ -17232,20 +15645,21 @@ if (typeof module !== "undefined" && module.exports) { $instructions = $('<div>',{ 'id': 'able-vts-instructions' }); - $p1 = $('<p>').text('Use the Video Transcript Sorter to perform any of the following tasks:'); + $p1 = $('<p>').text( this.translate( 'vtsInstructions1', 'Use the Video Transcript Sorter to modify text tracks:' ) ); $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.'); + $li1 = $('<li>').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 = $('<li>').text( this.translate( 'vtsInstructions3', 'Modify content or start/end times (all are directly editable within the table).' ) ); + $li3 = $('<li>').text( this.translate( 'vtsInstructions4', 'Add new content, such as chapters or descriptions.' ) ); + $p2 = $('<p>').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 = $('<fieldset>'); - $legend = $('<legend>').text('Select a language'); // TODO: Localize this - $fieldset.append($legend) + $legend = $('<legend>').text( this.translate( 'vtsSelectLanguage', 'Select a language' ) ); + $fieldset.append($legend); + $fieldWrapper = $( '<div class="vts-lang-selector"></div>' ); for (i in this.langs) { radioId = 'vts-lang-radio-' + this.langs[i]; $radioDiv = $('<div>',{ @@ -17269,29 +15683,29 @@ if (typeof module !== "undefined" && module.exports) { $label = $('<label>', { 'for': radioId // Two options for label: - // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; + // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; // TODO: if using this be sure to add lang attr to <div> (see above) }).text(this.getLanguageName(this.langs[i])); $radioDiv.append($radio,$label); - $fieldset.append($radioDiv); + $fieldWrapper.append($radioDiv); } + $fieldset.append( $fieldWrapper ); $('#able-vts').append($fieldset); - - // Inject a 'Save Changes' button + let vtsSave = this.translate( 'vtsSave', 'Generate new .vtt content' ); + // Inject a button to generate new files. $saveButton = $('<button>',{ 'type': 'button', 'id': 'able-vts-save', 'value': 'save' - }).text('Save Changes'); // TODO: Localize this + }).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, i, closestKind; + var kindOptions, beforeEditing, editedCell, editedContent, i; kindOptions = ['captions','chapters','descriptions','subtitles']; $('td[contenteditable="true"]').on('focus',function() { beforeEditing = $(this).text(); @@ -17306,20 +15720,16 @@ if (typeof module !== "undefined" && module.exports) { // assume they correctly typed the first character if (editedContent.substring(0,1) === 's') { $(this).text('subtitles'); - } - else if (editedContent.substring(0,1) === 'd') { + } else if (editedContent.substring(0,1) === 'd') { $(this).text('descriptions'); - } - else if (editedContent.substring(0,2) === 'ch') { + } else if (editedContent.substring(0,2) === 'ch') { $(this).text('chapters'); - } - else { + } else { // whatever else they types, assume 'captions' $(this).text('captions'); } } - } - else if (editedCell === 2 \|\| editedCell === 3) { + } else if (editedCell === 2 \|\| editedCell === 3) { // start or end time // ensure proper formatting (with 3 decimal places) $(this).text(thisObj.formatTimestamp(editedContent)); @@ -17331,30 +15741,27 @@ if (typeof module !== "undefined" && module.exports) { 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 + $(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 { + } else { // cancel saving, and restore the table using edited content - $(this).attr('value','save').text('Save Changes'); // TODO: Localize this + $(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('Cancelling saving. Any edits you made have been restored in the VTS table.'); // TODO: Localize this + thisObj.showVtsAlert( thisObj.translate( 'vtsCancel', 'Cancelling saving. Any edits you made have been restored in the VTS table.' ) ); } }); } @@ -17363,10 +15770,8 @@ if (typeof module !== "undefined" && module.exports) { 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) - - // Called from tracks.js + // TODO: Add support for trackDesc + // (to destinguish between tracks for the decribed vs non-described versions) var srcFile, vtsCues; srcFile = this.getFilenameFromPath(src); @@ -17384,15 +15789,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getFilenameFromPath = function(path) { var lastSlash; - lastSlash = path.lastIndexOf('/'); - if (lastSlash === -1) { - // there are no slashes in path. - return path; - } - else { - return path.substring(lastSlash+1); - } + // fix slashes. + return (lastSlash === -1) ? path : path.substring(lastSlash+1); }; AblePlayer.prototype.getFilenameFromTracks = function(kind,lang) { @@ -17430,13 +15829,11 @@ if (typeof module !== "undefined" && module.exports) { if (content.length > 0) { // add back the EOL between rows of content content += "\n" + nextRow; - } - else { + } else { // this is the first row of content. No need for an EOL content += nextRow; } - } - else { + } else { blankRow = true; } j++; @@ -17448,8 +15845,7 @@ if (typeof module !== "undefined" && module.exports) { }); i = j; //skip ahead } - } - else { + } else { i++; } } @@ -17459,12 +15855,7 @@ if (typeof module !== "undefined" && module.exports) { 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; - } + return (/^[0-9:,.]$/.test(timestamp)) ? true : false; }; AblePlayer.prototype.formatTimestamp = function(timestamp) { @@ -17486,8 +15877,7 @@ if (typeof module !== "undefined" && module.exports) { if (lastPart.length > 3) { // chop off any extra digits lastPart = lastPart.substring(0,3); - } - else if (lastPart.length < 3) { + } else if (lastPart.length < 3) { // add trailing zeros while (lastPart.length < 3) { lastPart += '0'; @@ -17501,7 +15891,7 @@ if (typeof module !== "undefined" && module.exports) { // 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; + var $table, $thead, headers, i, $tr, $th, $td, rows, rowNum, rowId; if (action === 'update') { // remove existing table @@ -17512,10 +15902,16 @@ if (typeof module !== "undefined" && module.exports) { $table = $('<table>',{ 'lang': lang }); - $tr = $('<tr>',{ - 'lang': 'en' // TEMP, until header row is localized - }); - headers = ['Row #','Kind','Start','End','Content','Actions']; // TODO: Localize this + $thead = $( '<thead>' ); + $tr = $( '<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 = $('<th>', { 'scope': 'col' @@ -17525,7 +15921,8 @@ if (typeof module !== "undefined" && module.exports) { } $tr.append($th); } - $table.append($tr); + $thead.append($tr); + $table.append($thead); // Get all rows (sorted by start time), and inject them into table rows = this.getAllRows(lang); @@ -17621,8 +16018,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'down') { + } else if (button === 'down') { if (rowNum < numRows) { $button = $('<button>',{ 'id': 'able-vts-button-down-' + rowNum, @@ -17654,8 +16050,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'insert') { + } else if (button === 'insert') { // Add Insert button to all rows $button = $('<button>',{ 'id': 'able-vts-button-insert-' + rowNum, @@ -17689,8 +16084,7 @@ if (typeof module !== "undefined" && module.exports) { // 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') { + } else if (button === 'delete') { // Add Delete button to all rows $button = $('<button>',{ 'id': 'able-vts-button-delete-' + rowNum, @@ -17756,14 +16150,12 @@ if (typeof module !== "undefined" && module.exports) { 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; + var credit + = 'Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a>' + + ' from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a>' + + ' are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a>' + ; + return '<div id="able-vts-icon-credit">' + credit + '</div>'; }; AblePlayer.prototype.getAllLangs = function(tracks) { @@ -17821,16 +16213,13 @@ if (typeof module !== "undefined" && module.exports) { if (action == 'up') { // move the row up this.moveRow(rowNum,'up'); - } - else if (action == 'down') { + } else if (action == 'down') { // move the row down this.moveRow(rowNum,'down'); - } - else if (action == 'insert') { + } else if (action == 'insert') { // insert a row below this.insertRow(rowNum); - } - else if (action == 'delete') { + } else if (action == 'delete') { // delete the row this.deleteRow(rowNum); } @@ -17839,9 +16228,8 @@ if (typeof module !== "undefined" && module.exports) { 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; + 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'); @@ -17923,10 +16311,11 @@ if (typeof module !== "undefined" && module.exports) { this.adjustTimes(newRowNum); // Announce the insertion - this.showVtsAlert('A new row ' + newRowNum + ' has been inserted'); // TODO: Localize this + let newAlert = this.translate( 'vtsNewRow', 'A new row %1 has been inserted.', [ newRowNum ] ); + this.showVtsAlert( newAlert ); // Place focus in new select field - $select.focus(); + $select.trigger('focus'); }; @@ -17949,14 +16338,15 @@ if (typeof module !== "undefined" && module.exports) { } // Announce the deletion - this.showVtsAlert('Row ' + rowNum + ' has been deleted'); // TODO: Localize this + let newAlert = this.translate( 'vtsDeletedRow', 'Row %1 has been deleted.', [ rowNum ] ); + this.showVtsAlert( newAlert ); }; AblePlayer.prototype.moveRow = function(rowNum,direction) { // swap two rows - var $rows, $thisRow, otherRowNum, $otherRow, newTimes, msg; + var $rows, $thisRow, otherRowNum, $otherRow, msg; $rows = $('#able-vts table').find('tr'); $thisRow = $('#able-vts table').find('tr').eq(rowNum); @@ -17964,8 +16354,7 @@ if (typeof module !== "undefined" && module.exports) { otherRowNum = parseInt(rowNum) - 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.before($thisRow); - } - else if (direction == 'down') { + } else if (direction == 'down') { otherRowNum = parseInt(rowNum) + 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.after($thisRow); @@ -17981,9 +16370,8 @@ if (typeof module !== "undefined" && module.exports) { // 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; + // Announce the move + msg = this.translate( 'vtsMovedRow', 'Row %1 has been moved %2 and is now Row %3.', [ rowNum, direction, otherRowNum ] ); this.showVtsAlert(msg); }; @@ -18020,16 +16408,10 @@ if (typeof module !== "undefined" && module.exports) { // 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'; - } + // 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()); @@ -18038,19 +16420,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the first row prevRowNum = null; $prevRow = null; @@ -18064,19 +16439,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the last row nextRowNum = null; $nextRow = null; @@ -18097,62 +16465,43 @@ if (typeof module !== "undefined" && module.exports) { 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') { + // 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); - 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') { + // end the new row immediately before the next row starts + end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (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 { + } 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 { + } 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 { + } else { // start needs to be incremented start = (parseFloat(prevStart) + minDuration[prevKind]).toFixed(3); end = (parseFloat(start) + minDuration[kind]).toFixed(3); } - } - else { + } else { // this is the first row if (start < nextStart) { // No change is necessary - } - else { + } else { // nextStart needs to be incremented nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3); nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3); @@ -18195,9 +16544,8 @@ if (typeof module !== "undefined" && module.exports) { if (kindEnd == -1) { // no spaces found, "kind-" must be the only myclass return myclass.substring(kindStart); - } - else { - // kind-* is one of multiple classes + } 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); } @@ -18209,7 +16557,11 @@ if (typeof module !== "undefined" && module.exports) { // 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'); + 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) { @@ -18232,7 +16584,7 @@ if (typeof module !== "undefined" && module.exports) { 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(); + content = $rows.eq(i).find('td').eq(4)[0].innerText; if (start !== undefined && end !== undefined) { vtt[kind] += start + ' --> ' + end + "\n"; if (content !== 'undefined') { @@ -18260,14 +16612,13 @@ if (typeof module !== "undefined" && module.exports) { var $heading, filename, $p, pText, $textarea; - $heading = $('<h3>').text(kind.charAt(0).toUpperCase() + kind.slice(1)); + $heading = $('<h3>').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 += '<em>' + kind + '</em> WebVTT file (<strong>' + filename + '</strong>).'; - } - else { + } else { pText += 'into a new ' + this.getLanguageName(lang) + ' <em>' + kind + '</em> WebVTT file.'; } $p = $('<p>',{ @@ -18279,14 +16630,14 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); - (function ($) { + AblePlayer.prototype.initVimeoPlayer = function () { - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; + var thisObj, deferred, promise, containerId, vimeoId, options; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); containerId = this.mediaId + '_vimeo'; @@ -18294,14 +16645,10 @@ if (typeof module !== "undefined" && module.exports) { // add container to which Vimeo player iframe will be appended this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // if a described version is available && user prefers desription + // if a described version is available && user prefers description // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } + vimeoId = (this.vimeoDescId && this.prefDesc) ? this.vimeoDescId : this.vimeoId; + this.activeVimeoId = vimeoId; // Notes re. Vimeo Embed Options: @@ -18309,44 +16656,36 @@ if (typeof module !== "undefined" && module.exports) { // setting the "controls" option to "false" will hide the default controls, without hiding captions. // This is a new option from Vimeo; previously used "background:true" to hide the controller, // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) + // - In addition to hiding the controls, it also hides captions + // - It automatically autoplays (initializing the player with autoplay:false does not override this) + // - It automatically loops (but this can be overridden by initializing the player with loop:false) + // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - if (this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } + autoplay = (this.okToPlay) ? 'true' : 'false'; - if (this.playerWidth) { - if (this.vimeoUrlHasParams) { - // use url param, not id + if (this.playerWidth) { + if (this.vimeoUrlHasParams) { + // use url param, not id options = { url: vimeoId, width: this.playerWidth, controls: false } - } - else { + } else { options = { id: vimeoId, width: this.playerWidth, controls: false } } - } - else { - // initialize without width & set width later - if (this.vimeoUrlHasParams) { + } else { + // initialize without width & set width later + if (this.vimeoUrlHasParams) { options = { url: vimeoId, controls: false } - } - else { + } else { options = { id: vimeoId, controls: false @@ -18364,18 +16703,18 @@ if (typeof module !== "undefined" && module.exports) { }); // get video's intrinsic size and initiate player dimensions - thisObj.vimeoPlayer.getVideoWidth().then(function(width) { - if (width) { - // also get height - thisObj.vimeoPlayer.getVideoHeight().then(function(height) { - if (height) { - thisObj.resizePlayer(width,height); + thisObj.vimeoPlayer.getVideoWidth().then(function(width) { + if (width) { + // also get height + thisObj.vimeoPlayer.getVideoHeight().then(function(height) { + if (height) { + thisObj.resizePlayer(width,height); } - }); + }); } }).catch(function(error) { - // an error occurred getting height or width - // TODO: Test this to see how gracefully it organically recovers + // an error occurred getting height or width + // TODO: Test this to see how gracefully it organically recovers }); if (!thisObj.hasPlaylist) { @@ -18408,7 +16747,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPaused = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getPaused().then(function (paused) { @@ -18422,7 +16761,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoEnded = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getEnded().then(function (ended) { @@ -18435,11 +16774,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoState = function () { - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - - thisObj = this; + var deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); promises = []; @@ -18466,10 +16803,10 @@ if (typeof module !== "undefined" && module.exports) { // get data via Vimeo Player API, and push data to this.captions // Note: Vimeo doesn't expose the caption cues themselves // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - var thisObj, i, trackId, isDefaultTrack; + var thisObj, i, isDefaultTrack; thisObj = this; @@ -18489,15 +16826,13 @@ if (typeof module !== "undefined" && module.exports) { thisObj.hasCaptions = true; if (thisObj.prefCaptions === 1) { thisObj.captionsOn = true; - } - else { + } else { thisObj.captionsOn = false; } // assign the default track based on language of the player if (tracks[i]['language'] === thisObj.lang) { isDefaultTrack = true; - } - else { + } else { isDefaultTrack = false; } thisObj.tracks.push({ @@ -18505,18 +16840,17 @@ if (typeof module !== "undefined" && module.exports) { 'language': tracks[i]['language'], 'label': tracks[i]['label'], 'def': isDefaultTrack - }); + }); } - thisObj.captions = thisObj.tracks; + thisObj.captions = thisObj.tracks; thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original thisObj.setupPopups('captions'); deferred.resolve(); - } - else { + } else { thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; + thisObj.usingVimeoCaptions = false; deferred.resolve(); } }); @@ -18526,69 +16860,59 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPosterUrl = function (vimeoId, width) { - // this is a placeholder, copied from getYouTubePosterUrl() - // Vimeo doesn't seem to have anything similar, - // nor does it seem to be possible to get the poster via the Vimeo API - // Vimeo playlist support (with thumbnail images) may require use of data-poster + // Vimeo Oembed only returns a 640px width image. Hope at some point there's an alternative. + var url = 'http://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId, imageUrl = ''; + console.log( url ); + fetch( url ).then( response => { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 + return response.json(); + }) + .then( json => { + imageUrl = json.thumbnail_url; + }) + .catch( error => { + if (thisObj.debug) { + console.log( 'Vimeo API query: ' + error ); + } + }); - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; - }; + return imageUrl; + }; AblePlayer.prototype.getVimeoId = function (url) { - + // return a Vimeo ID, extracted from a full Vimeo URL // Supported URL patterns are anything containing 'vimeo.com' - // and ending with a '/' followed by the ID. + // and ending with a '/' followed by the ID. // (Vimeo IDs do not have predicatable lengths) - - // Update: If URL contains parameters, return the full url - // This will need to be passed to the Vimeo Player API - // as a url parameter, not as an id parameter - this.vimeoUrlHasParams = false; - - var idStartPos, id; - - if (typeof url === 'number') { - // this is likely already a vimeo ID - return url; - } - else if (url.indexOf('vimeo.com') !== -1) { - // this is a full Vimeo URL - if (url.indexOf('?') !== -1) { - // URL contains parameters - this.vimeoUrlHasParams = true; - return url; - } - else { - url = url.trim(); - idStartPos = url.lastIndexOf('/') + 1; - id = url.substring(idStartPos); - return id; - } - } - else { - return url; - } -}; + + // Update: If URL contains parameters, return the full url + // This will need to be passed to the Vimeo Player API + // as a url parameter, not as an id parameter + this.vimeoUrlHasParams = false; + + if (typeof url === 'number') { + // this is likely already a vimeo ID + return url; + } else { + urlObject = new URL(url); + } + if ( 'vimeo.com' === urlObject.hostname \|\| 'player.vimeo.com' === urlObject.hostname ) { + // this is a full Vimeo URL + if ( '' !== urlObject.search ) { + // URL contains parameters + this.vimeoUrlHasParams = true; + return url; + } else { + if ( 'player.vimeo.com' === urlObject.hostname ) { + return urlObject.pathname.replace( '/video/', '' ); + } else { + return urlObject.pathname.replace( '/', '' ); + } + } + } else { + return url; + } + }; })(jQuery); diff --git a/src/build/ableplayer.min.4.4.1.css b/src/build/ableplayer.min.4.4.1.css deleted file mode 100644 index 1fc6ead..0000000 --- a/src/build/ableplayer.min.4.4.1.css +++ /dev/null @@ -1 +0,0 @@ -.able-wrapper{position:relative;margin:0;padding:0;width:100%;height:auto;box-sizing:content-box!important;text-align:left}.able{position:relative;margin:1em 0;width:100%;background-color:#000;box-shadow:0 0 16px #262626;z-index:5000}.able-column-left{float:left}.able-column-right{float:left}.able .able-vidcap-container{background-color:#000;left:0;margin:0;position:relative;top:0}.able-player{font-family:Arial,Helvetica,sans-serif;background-color:#262626}.able-offscreen{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.able-media-container audio{display:none!important}.able-video .able-now-playing{display:none}.able-controller{position:relative;border-bottom:1px solid #4c4c4c;background-color:#464646;min-height:38px;padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:hidden}.able-big-play-button{position:absolute;font-size:8em;opacity:.5;color:#fdfdfd;background-color:transparent;border:none;outline:0;left:0;top:0;padding:0;z-index:6500}.able-big-play-button:hover{opacity:100}.able-left-controls,.able-right-controls{overflow:visible}.able-left-controls div[role=button],.able-right-controls div[role=button]{vertical-align:middle}.able-left-controls{float:left}.able-right-controls{float:right}.able-black-controls,.able-black-controls div[role=button],.able-black-controls label{color:#000!important}.able-black-controls .able-seekbar{border:1px solid #000}.able-black-controls label,.able-white-controls,.able-white-controls div[role=button]{color:#fff!important}.able-white-controls .able-seekbar{border:1px solid #fff}.able-controller div[role=button]{background:0 0;position:relative;display:inline-block;border-style:none;margin:3px;padding:0;font-size:20px;min-width:24px;border:none;overflow:visible!important;z-index:6600}.able-controller div[role=button]>img,.able-controller div[role=button]>span{width:20px;margin:0 auto;padding:0;z-index:6700}.able-controller .buttonOff{opacity:.5;z-index:6800}.able-controller .able-seekbar{margin:0 5px;z-index:6900}.able-controller div[role=button]:focus,.able-controller div[role=button]:hover{outline-style:solid;outline-width:medium}.able-controller div[role=button]:hover{outline-color:#8ab839!important}.able-controller div[role=button]:focus{outline-color:#ffbb37!important}.able-controller button::-moz-focus-inner,.able-search-results button::-moz-focus-inner{border:0}.able-seekbar-wrapper{display:inline-block;vertical-align:middle}.able-seekbar{position:relative;height:.5em;border:1px solid;background-color:#000;margin:0 3px;border-style:solid;border-width:2px;border-color:#fff}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:.5em;background-color:#464646;z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:.5em;background-color:#dadada;z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;top:-.45em;background-color:#fdfdfd;width:.8em;height:.8em;border:1px solid;border-radius:.8em;z-index:5500}.able-volume-slider{width:34px;height:50px;background-color:#464646;padding:10px 0;position:absolute;right:0;top:-74px;display:block;z-index:9100}.able-volume-track{display:block;position:relative;height:100%;width:7px;margin:0 auto;background-color:#000}.able-volume-track.able-volume-track-on{background-color:#dadada;position:absolute;height:20px;top:30px}.able-volume-slider>.able-volume-track{border:1px solid #fff}.able-volume-head{display:inline-block;background-color:#fdfdfd;outline:1px solid #333;position:absolute;height:7px;width:15px;left:-5px;top:23px;z-index:9175}.able-volume-head:focus,.able-volume-head:hover{background-color:#ffbb37!important}.able-volume-help{display:none}.able-status-bar{height:1.5em;min-height:1.5em;color:#ccc;font-size:.9em;background-color:transparent;padding:.5em .5em .25em}.able-status-bar span.able-timer{text-align:left;float:left;width:32%}.able-status-bar span.able-speed{float:left;width:33%;text-align:center}.able-status{font-style:italic;float:right;width:32%;text-align:right}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;line-height:1.35em;display:block;z-index:6000}div.able-captions{display:none;padding:.15em .25em;background-color:#000;font-size:1.1em;color:#fff;opacity:.75}div.able-captions-overlay{position:absolute;margin:0;bottom:0}div.able-captions-below{position:relative;min-height:3.2em}div.able-descriptions{position:relative;color:#ff6;background-color:#262626;min-height:2.8em;border-top:1px solid #666;margin:0;padding:3%;width:94%;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1.1em;color:#fff;background-color:transparent;padding:.5em .5em 1em}div.able-now-playing span{font-size:.9em}div.able-now-playing span span{display:block}div.able-modal-dialog{position:absolute;height:auto;max-width:90%;margin-left:auto;margin-right:auto;top:5%;left:0;right:0;outline:0 none;display:none;color:#000;background-color:#fafafa;box-sizing:content-box!important;z-index:10000}@supports (transform:translate(-50%,-50%)){div.able-modal-dialog{top:50%;left:50%;transform:translate(-50%,-50%)!important}}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:#000;opacity:.5;margin:0;padding:0;top:0;left:0;display:none;z-index:9500}button.modalCloseButton{position:absolute;top:5px;right:5px}button.modal-button{margin-right:5px}div.able-modal-dialog button:focus,div.able-modal-dialog button:hover,div.able-modal-dialog input:focus,div.able-modal-dialog input:hover{outline-style:solid;outline-width:2px}div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:#8ab839}div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:#ffbb37}div.able-modal-dialog h1{font-weight:700;font-size:1.8em;line-height:1.2em;margin:.75em 0;color:#000;text-align:center}.able-help-div,.able-prefs-form,.able-resize-form{background-color:#f5f5f5;border:medium solid #ccc;padding:.5em 1em;margin:0 0 0 1em;width:25em;display:none}.able-prefs-form fieldset{margin-left:0;padding-left:0;border:none}.able-prefs-form legend{color:#000;font-weight:700;font-size:1.1em}.able-prefs-form fieldset div{display:table;margin-left:1em}.able-prefs-form fieldset div input{display:table-cell;width:1em;vertical-align:middle}.able-prefs-form fieldset div label{display:table-cell;padding-left:.5em}fieldset.able-prefs-keys div{float:left;margin-right:1em}div.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1em!important}div.able-prefDescFormat>div{margin-left:1.5em}.able-prefs-captions label,.able-prefs-captions select{display:block;float:left;margin-bottom:.25em}fieldset.able-prefs-captions label{width:6em;text-align:right;padding-right:1em}fieldset.able-prefs-captions select{width:10em;font-size:.9em;border-radius:none}fieldset.able-prefs-descriptions>div.able-prefs-select{margin:.5em 1em}fieldset.able-prefs-descriptions>div.able-prefs-select>label,fieldset.able-prefs-descriptions>div.able-prefs-slider>label{width:6em;text-align:right;padding-right:1em}fieldset.able-prefs-descriptions>div.able-prefs-select>select,fieldset.able-prefs-descriptions>div.able-prefs-slider>select{width:10em;font-size:.9em;border-radius:none}div.able-prefDescPause{margin-top:1em}.able-prefs-form div.able-captions-sample{padding:.5em;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5em;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5em;font-size:1.1em}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1em}.able-resize-form h1{font-size:1.15em}.able-resize-form div div{margin:1em}.able-resize-form label{padding-right:.5em;font-weight:700}.able-resize-form input[type=text]{font-size:1em}.able-resize-form input[readonly]{color:#aaa}.able-window-toolbar{background-color:#464646;min-height:15px;padding:10px;border-style:solid;border-width:0 0 1px 0}.able-draggable:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{position:absolute;top:0;right:0;font-size:1.5em;background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar .able-button-handler-preferences:hover{outline-style:solid;outline-width:medium}.able-window-toolbar .able-button-handler-preferences:hover{outline-color:#8ab839!important}.able-window-toolbar .able-button-handler-preferences:focus{outline-color:#ffbb37!important}.able-window-toolbar .able-popup{position:absolute;cursor:default;right:0;top:0;display:block}.able-drag{border:2px dashed #f90;cursor:move}.able-resizable{position:absolute;width:16px;height:16px;padding:5px 2px;bottom:0;right:0;cursor:nwse-resize;background:transparent url(../images/wingrip.png) no-repeat}.able-sign-window{position:relative;margin:1em;z-index:8000}.able-sign-window video{width:100%}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0}div.able-chapters-div .able-chapters-heading{margin:1em .75em;font-size:1.1em;font-weight:700}div.able-chapters-div ul{list-style-type:none;padding-left:0}div.able-chapters-div ul li{max-width:100%;padding:0;height:2em}div.able-chapters-div button{width:100%;height:100%;border:none;background-color:transparent;color:#000;font-size:1em;text-align:left;padding:.15em 1em}div.able-chapters-div li.able-current-chapter{background-color:#000!important}div.able-chapters-div li.able-current-chapter button{color:#fff!important}div.able-chapters-div li.able-focus{background-color:#4c4c4c}div.able-chapters-div button::-moz-focus-inner,div.able-chapters-div button:focus,div.able-chapters-div button:hover{border:0;outline:0;color:#fff!important}.able-alert,.able-tooltip{position:absolute;padding:5px 10px;border-color:#000;border-width:1px;color:#000!important;background-color:#ccc;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block}.able-alert{background-color:#ffc;box-shadow:0 0 16px #262626;z-index:9400;position:absolute;top:1em}.able-popup{z-index:9200}.able-tooltip{z-index:9000}.able-popup{position:absolute;margin:0;padding:0;border-color:#000;border-width:1px;background-color:#000;opacity:.85;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block;cursor:default}ul.able-popup{list-style-type:none}.able-popup li{padding:.25em 1em .25em .25em;margin:1px;color:#fff}.able-popup li.able-focus{background-color:#ccc;color:#000}.able-popup-captions li{padding-left:1em}.able-popup-captions li[aria-checked=true]{padding-left:0}.able-popup-captions li[aria-checked=true]::before{content:"\2713 "}.able-transcript-area{border-width:1px;border-style:solid;height:400px;z-index:7000;outline:0;padding-bottom:25px;background-color:#fff}.able-transcript{position:relative;overflow-y:scroll;padding-left:5%;padding-right:5%;background-color:#fff;height:350px}.able-transcript div{margin:1em 0}.able-transcript-heading{font-size:1.4em;font-weight:700}.able-transcript-chapter-heading{font-size:1.2em;font-weight:700}.able-transcript div.able-transcript-desc{background-color:#fee;border:thin solid #336;font-style:italic;padding:1em}.able-transcript .able-unspoken{font-weight:700}.able-transcript .able-hidden{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.able-highlight{background:#ff6}.able-previous{background:#000!important;font-style:italic}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:#cf6;cursor:pointer}.able-window-toolbar label{margin-right:10px;color:#fff}.able-controller div[role=button]:focus,.able-controller div[role=button]:hover,.able-controller input:focus,.able-controller input:hover,.able-seekbar-head:focus,.able-seekbar-head:hover,.able-window-toolbar input:focus,.able-window-toolbar input:hover,.able-window-toolbar select:focus,.able-window-toolbar select:hover{outline-style:solid;outline-width:2px}.able-controller div[role=button]:focus,.able-controller input:focus,.able-seekbar-head:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus{outline-color:#ffbb37}.able-controller div[role=button]:hover,.able-controller input:hover,.able-seekbar-head:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover{outline-color:#8ab839}.able-window-toolbar .transcript-language-select-wrapper{float:right;padding-right:30px}.able-playlist{list-style-type:none;margin:0;background-color:#fff;padding:5px 0}.able-playlist li{background-color:#ddd;margin:5px;padding:0;border:2px solid #aaa;border-radius:5px;-moz-border-radius:5px}.able-playlist li button{border:none;color:#000;background-color:transparent;font-size:1em;width:100%;padding:5px 10px;text-align:left}.able-playlist li button:active,.able-playlist li button:focus,.able-playlist li button:hover{background-color:#ffeeb3;color:#000;text-decoration:none;outline:0}.able-playlist li button::-moz-focus-inner{border:0}.able-playlist li button img{width:100px;float:left;margin-right:10px}.able-playlist li.able-current{background-color:#340449;border-color:#230330}.able-playlist li.able-current button{color:#fff;font-weight:700;text-decoration:none;outline:0}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:#000}#able-search-term-echo{font-weight:700;font-style:italic}.able-search-results ul li{font-size:1.1em;margin-bottom:1em}button.able-search-results-time{font-size:1em;font-weight:700;cursor:pointer}button.able-search-results-time:active,button.able-search-results-time:focus,button.able-search-results-time:hover{color:#fff;background-color:#000}.able-search-results-text{padding-left:1em}.able-search-term{background-color:#ffc;font-weight:700}#search-term{font-weight:700;font-style:italic}#able-vts-instructions{margin-bottom:1.5em;padding:1em;border:1px solid #999;width:720px;max-width:90%}#able-vts fieldset{margin:1em;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{float:left;padding-right:1em}#able-vts table{clear:left}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #000;border-collapse:collapse;padding:.5em .75em}#able-vts table th.actions{min-width:140px}#able-vts table td button{width:auto;padding:0;margin:2px}#able-vts table td button svg{width:16px;height:16px}#able-vts table button:hover svg{fill:#c00}tr.kind-chapters,tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{margin:1em}div#able-vts-alert{display:none;position:fixed;top:5px;left:5px;border:2px solid #666;background-color:#ffc;padding:1em;font-weight:700;z-index:9400}button#able-vts-save{font-size:1em;padding:.25em;border-radius:5px;margin-bottom:1em;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}.able-clipped,.able-screenreader-alert{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);width:1px!important;height:1px!important;overflow:hidden!important}.able-error{display:block;background:#ffc;border:2px solid #000;color:red;margin:.75em;padding:.5em}.able-fallback{display:block;text-align:center;border:2px solid #335;background-color:#eee;color:#000;font-weight:700;font-size:1.1em;padding:1em;margin-bottom:1em;max-width:500px;width:95%}.able-fallback div,.able-fallback p,.able-fallback ul{text-align:left}.able-fallback li{font-weight:400}.able-fallback img{width:90%;margin:1em auto;opacity:.3}.able-fallback img.able-poster{position:relative}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:inline-block;width:1em;height:1em;fill:currentColor}div.able-skin-2020 div.able-seekbar-wrapper{width:96%;margin:10px 2%}@font-face{font-family:able;src:url(../button-icons/fonts/able.eot?dqripi);src:url(../button-icons/fonts/able.eot?dqripi#iefix) format('embedded-opentype'),url(../button-icons/fonts/able.ttf?dqripi) format('truetype'),url(../button-icons/fonts/able.woff?dqripi) format('woff'),url(../button-icons/fonts/able.svg?dqripi#able) format('svg');font-weight:400;font-style:normal}.able-wrapper [class=" icon-"],.able-wrapper [class^=icon-]{font-family:able!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-play:before{content:"\f04b"}.icon-pause:before{content:"\f04c"}.icon-stop:before{content:"\f04d"}.icon-restart:before{content:"\e900"}.icon-rewind:before{content:"\e603"}.icon-forward:before{content:"\e604"}.icon-previous:before{content:"\e901"}.icon-next:before{content:"\e902"}.icon-slower:before{content:"\f0dd"}.icon-faster:before{content:"\f0de"}.icon-turtle:before{content:"\e904"}.icon-rabbit:before{content:"\e905"}.icon-ellipsis:before{content:"\e903"}.icon-pipe:before{content:"\e600"}.icon-captions:before{content:"\e601"}.icon-descriptions:before{content:"\e602"}.icon-sign:before{content:"\e60a"}.icon-volume-mute:before{content:"\e606"}.icon-volume-soft:before{content:"\e60c"}.icon-volume-medium:before{content:"\e605"}.icon-volume-loud:before{content:"\e60b"}.icon-volume-up:before{content:"\e607"}.icon-volume-down:before{content:"\e608"}.icon-chapters:before{content:"\e609"}.icon-transcript:before{content:"\f15c"}.icon-preferences:before{content:"\e60d"}.icon-close:before{content:"\f00d"}.icon-fullscreen-expand:before{content:"\f065"}.icon-fullscreen-collapse:before{content:"\f066"}.icon-help:before{content:"\f128"} \ No newline at end of file diff --git a/src/build/ableplayer.min.4.4.1.js b/src/build/ableplayer.min.4.4.1.js deleted file mode 100644 index 0745c6e..0000000 --- a/src/build/ableplayer.min.4.4.1.js +++ /dev/null @@ -1,2 +0,0 @@ -/! ableplayer V4.4.1 / -"use strict";var AblePlayerInstances=[];!function(r){r(document).ready(function(){r("video, audio").each(function(t,e){void 0!==r(e).data("able-player")&&AblePlayerInstances.push(new AblePlayer(r(this),r(e)))})}),window.onYouTubeIframeAPIReady=function(){AblePlayer.youTubeIframeAPIReady=!0,r("body").trigger("youTubeIframeAPIReady",[])},r(window).on("keydown",function(t){1===AblePlayer.nextIndex&&AblePlayer.lastCreated.onPlayerKeyPress(t)}),window.AblePlayer=function(t){if((AblePlayer.lastCreated=this).media=t,0!==r(t).length){if(void 0!==r(t).attr("autoplay")?(this.autoplay=!0,this.okToPlay=!0):(this.autoplay=!1,this.okToPlay=!1),void 0!==r(t).attr("loop")?this.loop=!0:this.loop=!1,void 0!==r(t).attr("playsinline")?this.playsInline="1":this.playsInline="0",r(t).attr("poster")?this.hasPoster=!0:this.hasPoster=!1,void 0!==r(t).data("start-time")&&r.isNumeric(r(t).data("start-time"))?this.startTime=r(t).data("start-time"):this.startTime=0,void 0!==r(t).data("debug")&&!1!==r(t).data("debug")?this.debug=!0:this.debug=!1,void 0!==r(t).data("root-path")?this.rootPath=r(t).data("root-path").replace(/\/?$/,"/"):this.rootPath=this.getRootPath(),this.defaultVolume=7,void 0!==r(t).data("volume")&&""!==r(t).data("volume")){var e=r(t).data("volume");0<=e&&e<=10&&(this.defaultVolume=e)}if(this.volume=this.defaultVolume,void 0!==r(t).data("use-chapters-button")&&!1===r(t).data("use-chapters-button")?this.useChaptersButton=!1:this.useChaptersButton=!0,void 0!==r(t).data("use-descriptions-button")&&!1===r(t).data("use-descriptions-button")?this.useDescriptionsButton=!1:this.useDescriptionsButton=!0,void 0!==r(t).data("descriptions-audible")&&!1===r(t).data("descriptions-audible")?this.exposeTextDescriptions=!1:void 0!==r(t).data("description-audible")&&!1===r(t).data("description-audible")?this.exposeTextDescriptions=!1:this.exposeTextDescriptions=!0,void 0!==r(t).data("heading-level")&&""!==r(t).data("heading-level")){var i=r(t).data("heading-level");/^[0-6]$/.test(i)&&(this.playerHeadingLevel=i)}if(void 0!==r(t).data("transcript-div")&&""!==r(t).data("transcript-div")?this.transcriptDivLocation=r(t).data("transcript-div"):this.transcriptDivLocation=null,void 0!==r(t).data("include-transcript")&&!1===r(t).data("include-transcript")?this.hideTranscriptButton=!0:this.hideTranscriptButton=null,this.transcriptType=null,void 0!==r(t).data("transcript-src")?(this.transcriptSrc=r(t).data("transcript-src"),this.transcriptSrcHasRequiredParts()&&(this.transcriptType="manual")):0<r(t).find('track[kind="captions"], track[kind="subtitles"]').length&&(this.transcriptDivLocation?this.transcriptType="external":this.transcriptType="popup"),void 0!==r(t).data("lyrics-mode")&&!1!==r(t).data("lyrics-mode")?this.lyricsMode=!0:this.lyricsMode=!1,void 0!==r(t).data("transcript-title")&&""!==r(t).data("transcript-title")&&(this.transcriptTitle=r(t).data("transcript-title")),"overlay"===r(t).data("captions-position")?this.defaultCaptionsPosition="overlay":this.defaultCaptionsPosition="below",void 0!==r(t).data("chapters-div")&&""!==r(t).data("chapters-div")&&(this.chaptersDivLocation=r(t).data("chapters-div")),void 0!==r(t).data("chapters-title")&&(this.chaptersTitle=r(t).data("chapters-title")),void 0!==r(t).data("chapters-default")&&""!==r(t).data("chapters-default")?this.defaultChapter=r(t).data("chapters-default"):this.defaultChapter=null,"arrows"===r(t).data("speed-icons")?this.speedIcons="arrows":this.speedIcons="animals","chapter"===r(t).data("seekbar-scope")\|\|"chapters"===r(t).data("seekbar-scope")?this.seekbarScope="chapter":this.seekbarScope="video",void 0!==r(t).data("youtube-id")&&""!==r(t).data("youtube-id")&&(this.youTubeId=r(t).data("youtube-id")),void 0!==r(t).data("youtube-desc-id")&&""!==r(t).data("youtube-desc-id")&&(this.youTubeDescId=r(t).data("youtube-desc-id")),void 0!==r(t).data("youtube-nocookie")&&r(t).data("youtube-nocookie")?this.youTubeNoCookie=!0:this.youTubeNoCookie=!1,void 0!==r(t).data("vimeo-id")&&""!==r(t).data("vimeo-id")&&(this.vimeoId=r(t).data("vimeo-id")),void 0!==r(t).data("vimeo-desc-id")&&""!==r(t).data("vimeo-desc-id")&&(this.vimeoDescId=r(t).data("vimeo-desc-id")),"2020"==r(t).data("skin")?this.skin="2020":this.skin="legacy",this.iconType="font",this.forceIconType=!1,void 0!==r(t).data("icon-type")&&""!==r(t).data("icon-type")){var s=r(t).data("icon-type");"font"!==s&&"image"!=s&&"svg"!=s\|\|(this.iconType=s,this.forceIconType=!0)}if(void 0!==r(t).data("allow-fullscreen")&&!1===r(t).data("allow-fullscreen")?this.allowFullScreen=!1:this.allowFullScreen=!0,this.defaultSeekInterval=10,this.useFixedSeekInterval=!1,void 0!==r(t).data("seek-interval")&&""!==r(t).data("seek-interval")){var a=r(t).data("seek-interval");/^[1-9][0-9]$/.test(a)&&(this.seekInterval=a,this.useFixedSeekInterval=!0)}void 0!==r(t).data("show-now-playing")&&!1===r(t).data("show-now-playing")?this.showNowPlaying=!1:this.showNowPlaying=!0,void 0!==r(t).data("use-ttml")?(this.useTtml=!0,this.convert=require("xml-js")):this.useTtml=!1,void 0!==r(t).data("test-fallback")&&!1!==r(t).data("test-fallback")&&(this.testFallback=!0),void 0!==r(t).data("lang")&&""!==r(t).data("lang")?this.lang=r(t).data("lang").toLowerCase():this.lang=null,void 0!==r(t).data("meta-type")&&""!==r(t).data("meta-type")&&(this.metaType=r(t).data("meta-type")),void 0!==r(t).data("meta-div")&&""!==r(t).data("meta-div")&&(this.metaDiv=r(t).data("meta-div")),void 0!==r(t).data("search-div")&&""!==r(t).data("search-div")&&(this.searchDiv=r(t).data("search-div"),void 0!==r(t).data("search")&&""!==r(t).data("search")&&(this.searchString=r(t).data("search")),void 0!==r(t).data("search-lang")&&""!==r(t).data("search-lang")?this.searchLang=r(t).data("search-lang"):this.searchLang=null,void 0!==r(t).data("search-ignore-caps")&&!1!==r(t).data("search-ignore-caps")?this.searchIgnoreCaps=!0:this.searchIgnoreCaps=!1,void 0!==r(t).data("search-div")&&""!==r(t).data("search-div")&&(this.searchString=r(t).data("search"),this.searchDiv=r(t).data("search-div"))),void 0!==r(t).data("hide-controls")&&!1!==r(t).data("hide-controls")?(this.hideControls=!0,this.hideControlsOriginal=!0):(this.hideControls=!1,this.hideControlsOriginal=!1),void 0!==r(t).data("steno-mode")&&!1!==r(t).data("steno-mode")?(this.stenoMode=!0,void 0!==r(t).data("steno-iframe-id")&&""!==r(t).data("steno-iframe-id")?(this.stenoFrameId=r(t).data("steno-iframe-id"),this.$stenoFrame=r("#"+this.stenoFrameId),this.$stenoFrame.length\|\|(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoMode=!1,this.stenoFrameId=null,this.$stenoFrame=null),this.setDefaults(),this.ableIndex=AblePlayer.nextIndex,AblePlayer.nextIndex+=1,this.title=r(t).attr("title"),this.tt={};var n=this;r.when(this.getTranslationText()).then(function(){50<n.countProperties(n.tt)?n.setup():n.provideFallback()})}else this.provideFallback()},AblePlayer.nextIndex=0,AblePlayer.prototype.setup=function(){var t=this;this.initializing=!0,this.reinitialize().then(function(){t.player?t.setupInstance().then(function(){t.setupInstancePlaylist(),t.hasPlaylist\|\|t.recreatePlayer(),t.initializing=!1,t.playerCreated=!0}):t.provideFallback()})},AblePlayer.getActiveDOMElement=function(){for(var t=document.activeElement;t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t},AblePlayer.localGetElementById=function(t,e){return t.getRootNode?r(t.getRootNode().querySelector("#"+e)):r(document.getElementById(e))},AblePlayer.youTubeIframeAPIReady=!1,AblePlayer.loadingYouTubeIframeAPI=!1}(jQuery),function(r){AblePlayer.prototype.setDefaults=function(){this.playerCreated=!1,this.playing=!1,this.paused=!0,this.clickedPlay=!1,this.fullscreen=!1,this.swappingSrc=!1,this.initializing=!1,this.cueingPlaylistItems=!1,this.okToPlay=!1,this.buttonWithFocus=null,this.getUserAgent(),this.setIconColor(),this.setButtonImages()},AblePlayer.prototype.getRootPath=function(){var t,e,i,s,a,n;for(t=document.getElementsByTagName("script"),e=0;e<t.length;e++)if(-1!==(i=t[e].src).substr(i.lastIndexOf("/")).indexOf("ableplayer")){s=i.split("?")[0];break}return n=(a=s.split("/").slice(0,-1).join("/")).lastIndexOf("/"),a.substring(0,n)+"/"},AblePlayer.prototype.setIconColor=function(){var t,e,i,s,a;for(t=["controller","toolbar"],e=0;e<t.length;e++)"controller"==t[e]?i=r("<div>",{class:"able-controller"}).hide():"toolbar"===t[e]&&(i=r("<div>",{class:"able-window-toolbar"}).hide()),r("body").append(i),a=.2126(s=i.css("background-color").replace(/[^\d,]/g,"").split(","))[0]+.7152s[1]+.0722s[2]<125?"white":"black","controller"===t[e]?this.iconColor=a:"toolbar"===t[e]&&(this.toolbarIconColor=a),i.remove()},AblePlayer.prototype.setButtonImages=function(){this.imgPath=this.rootPath+"button-icons/"+this.iconColor+"/",this.playButtonImg=this.imgPath+"play.png",this.pauseButtonImg=this.imgPath+"pause.png",this.restartButtonImg=this.imgPath+"restart.png",this.rewindButtonImg=this.imgPath+"rewind.png",this.forwardButtonImg=this.imgPath+"forward.png",this.previousButtonImg=this.imgPath+"previous.png",this.nextButtonImg=this.imgPath+"next.png","arrows"===this.speedIcons?(this.fasterButtonImg=this.imgPath+"slower.png",this.slowerButtonImg=this.imgPath+"faster.png"):"animals"===this.speedIcons&&(this.fasterButtonImg=this.imgPath+"rabbit.png",this.slowerButtonImg=this.imgPath+"turtle.png"),this.captionsButtonImg=this.imgPath+"captions.png",this.chaptersButtonImg=this.imgPath+"chapters.png",this.signButtonImg=this.imgPath+"sign.png",this.transcriptButtonImg=this.imgPath+"transcript.png",this.descriptionsButtonImg=this.imgPath+"descriptions.png",this.fullscreenExpandButtonImg=this.imgPath+"fullscreen-expand.png",this.fullscreenCollapseButtonImg=this.imgPath+"fullscreen-collapse.png",this.prefsButtonImg=this.imgPath+"preferences.png",this.helpButtonImg=this.imgPath+"help.png"},AblePlayer.prototype.getSvgData=function(t){var e=Array();switch(t){case"play":e[0]="0 0 16 20",e[1]="M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z";break;case"pause":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"stop":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"restart":e[0]="0 0 20 20",e[1]="M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z";break;case"rewind":e[0]="0 0 20 20",e[1]="M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z";break;case"forward":e[0]="0 0 20 20",e[1]="M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z";break;case"previous":e[0]="0 0 20 20",e[1]="M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z";break;case"next":e[0]="0 0 20 20",e[1]="M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z";break;case"slower":e[0]="0 0 20 20",e[1]="M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z";break;case"faster":e[0]="0 0 11 20",e[1]="M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"turtle":e[0]="0 0 20 20",e[1]="M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z";break;case"rabbit":e[0]="0 0 20 20",e[1]="M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z";break;case"ellipsis":e[0]="0 0 20 20",e[1]="M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z";break;case"pipe":e[0]="0 0 20 20",e[1]="M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z";break;case"captions":e[0]="0 0 20 20",e[1]="M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z";break;case"descriptions":e[0]="0 0 20 20",e[1]="M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z";break;case"sign":e[0]="0 0 20 20",e[1]="M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z";break;case"mute":case"volume-mute":e[0]="0 0 20 20",e[1]="M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z";break;case"volume-soft":e[0]="0 0 20 20",e[1]="M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-medium":e[0]="0 0 20 20",e[1]="M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-loud":e[0]="0 0 21 20",e[1]="M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"chapters":e[0]="0 0 20 20",e[1]="M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z";break;case"transcript":e[0]="0 0 20 20",e[1]="M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z";break;case"preferences":e[0]="0 0 20 20",e[1]="M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z";break;case"close":e[0]="0 0 16 20",e[1]="M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z";break;case"fullscreen-expand":e[0]="0 0 20 20",e[1]="M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z";break;case"fullscreen-collapse":e[0]="0 0 20 20",e[1]="M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"help":e[0]="0 0 11 20",e[1]="M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z"}return e},AblePlayer.prototype.reinitialize=function(){var t,e;if(e=(t=new r.Deferred).promise(),this,window.console\|\|(this.debug=!1),this.startedPlaying=!1,this.autoScrollTranscript=!0,this.$media=r(this.media).first(),this.media=this.$media[0],this.$media.is("audio"))this.mediaType="audio";else{if(!this.$media.is("video"))return this.provideFallback(),t.fail(),e;this.mediaType="video"}return this.$sources=this.$media.find("source"),this.player=this.getPlayer(),this.player\|\|this.provideFallback(),this.setIconType(),this.setDimensions(),t.resolve(),e},AblePlayer.prototype.setDimensions=function(){this.$media.attr("width")&&this.$media.attr("height")?(this.playerMaxWidth=parseInt(this.$media.attr("width"),10),this.playerMaxHeight=parseInt(this.$media.attr("height"),10)):this.$media.attr("width")?this.playerMaxWidth=parseInt(this.$media.attr("width"),10):(this.playerMaxWidth=this.$media.parent().width(),this.playerMaxHeight=this.getMatchingHeight(this.playerMaxWidth)),this.$media.css({width:"100%",height:"auto"})},AblePlayer.prototype.getMatchingHeight=function(e){var t,i,s,a,n;return t=[3840,2560,1920,1280,854,640,426],i=[2160,1440,1080,720,480,360,240],a=s=null,r.each(t,function(t){(null==s\|\|Math.abs(this-e)<Math.abs(s-e))&&(s=this,a=t)}),n=i[a],this.aspectRatio=s/n,Math.round(e/this.aspectRatio)},AblePlayer.prototype.setIconType=function(){var t,e,i;if(this.forceIconType)return!1;document.createElementNS&&document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect?this.iconType="svg":(window.getComputedStyle?(e=r("span.icon-play").length?r("span.icon-play"):(t=r("<span>",{class:"icon-play able-clipped"}),r("body").append(t),t),void 0!==(i=window.getComputedStyle(e.get(0),null).getPropertyValue("font-family"))&&-1!==i.indexOf("able")?this.iconType="font":this.iconType="image"):this.iconType="image",this.debug,void 0!==t&&t.remove())},AblePlayer.prototype.setupInstance=function(){var t=new r.Deferred,e=t.promise();return this.$media.attr("id")?this.mediaId=this.$media.attr("id"):(this.mediaId="ableMediaId_"+this.ableIndex,this.$media.attr("id",this.mediaId)),t.resolve(),e},AblePlayer.prototype.setupInstancePlaylist=function(){var s=this;if(this.hasPlaylist=!1,r(".able-playlist").each(function(){if(r(this).data("player")===s.mediaId){s.hasPlaylist=!0,s.$playlist=r(this).find("li"),r(this).find("li[data-youtube-id]").each(function(){var t=r(this).attr("data-youtube-id"),e=s.getYouTubePosterUrl(t,"120"),i=r("<img>",{src:e,alt:""});r(this).find("button").prepend(i)}),r(this).find("li span").attr("aria-hidden","true"),s.playlistIndex=0;var t=r(this).data("embedded");s.playlistEmbed=void 0!==t&&!1!==t}}),this.hasPlaylist&&this.loop&&this.media.removeAttribute("loop"),this.hasPlaylist&&this.playlistEmbed){var t=this.$playlist.parent();this.$playlistDom=t.clone(),t.remove()}this.hasPlaylist&&0===this.$sources.length&&(this.cuePlaylistItem(0),this.$sources=this.$media.find("source"))},AblePlayer.prototype.recreatePlayer=function(){var e,i,s;(e=this).player?(this.playerCreated\|\|(this.loadCurrentPreferences(),this.injectPlayerCode()),this.initSignLanguage(),this.initPlayer().then(function(){e.setupTracks().then(function(){e.getBrowserVoices(),e.setupTranscript().then(function(){e.initStenoFrame().then(function(){e.stenoMode&&e.$stenoFrame&&(e.stenoFrameContents=e.$stenoFrame.contents()),e.getMediaTimes().then(function(t){for(e.duration=t.duration,e.elapsed=t.elapsed,e.setFullscreen(!1),void 0===e.volume&&(e.volume=e.defaultVolume),e.volume&&e.setVolume(e.volume),e.transcriptType&&(e.addTranscriptAreaEvents(),e.updateTranscript()),"video"===e.mediaType&&e.initDescription(),e.captions.length&&e.initDefaultCaption(),e.setMediaAttributes(),e.addControls(),e.addEventListeners(),i=e.getPreferencesGroups(),s=0;s<i.length;s++)e.injectPrefsForm(i[s]);e.setupPopups(),e.updateCaption(),e.injectVTS(),e.chaptersDivLocation&&e.populateChaptersDiv(),e.showSearchResults(),"html5"===e.player&&e.$media[0].load(),setTimeout(function(){e.refreshControls("init")},100)})})})})},function(){e.provideFallback()})):console.log("Can't create player; no appropriate player type detected.")},AblePlayer.prototype.initPlayer=function(){var t,e=this;"html5"===this.player?t=this.initHtml5Player():"youtube"===this.player?t=this.initYouTubePlayer():"vimeo"===this.player&&(t=this.initVimeoPlayer());var i=new r.Deferred,s=i.promise();return t.done(function(){e.useFixedSeekInterval?(e.seekInterval\|\|(e.seekInterval=e.defaultSeekInterval),e.seekIntervalCalculated=!0):e.setSeekInterval(),i.resolve()}).fail(function(){i.reject()}),s},AblePlayer.prototype.initStenoFrame=function(){var t,e;return this,e=(t=new r.Deferred).promise(),this.stenoMode&&this.$stenoFrame?(this.$stenoFrame[0].contentWindow,"complete"==document.readyState?t.resolve():this.$stenoFrame.on("load",function(){t.resolve()})):t.resolve(),e},AblePlayer.prototype.setSeekInterval=function(){var t;this.seekInterval=this.defaultSeekInterval,void 0===(t=this.useChapterTimes?this.chapterDuration:this.duration)\|\|t<1?this.seekIntervalCalculated=!1:(this.seekInterval=t<=20?5:t<=30?6:t<=40?8:t<=100?10:t/10,this.seekIntervalCalculated=!0)},AblePlayer.prototype.initDefaultCaption=function(){var t,e;if(0<(t=this.captions).length){for(e=0;e<t.length;e++)!0===t[e].def&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);if(void 0===this.captionLang)for(e=0;e<t.length;e++)t[e].language===this.lang&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);void 0===this.captionLang&&(this.captionLang=t[0].language,this.selectedCaptions=t[0]),void 0!==this.captionLang&&(this.$transcriptLanguageSelect&&this.$transcriptLanguageSelect.find("option[lang="+this.captionLang+"]").prop("selected",!0),this.syncTrackLanguages("init",this.captionLang)),"vimeo"===this.player&&(this.usingVimeoCaptions&&1==this.prefCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(t){}).catch(function(t){t.name}):this.vimeoPlayer.disableTextTrack().then(function(){}).catch(function(t){}))}},AblePlayer.prototype.initHtml5Player=function(){var t=new r.Deferred,e=t.promise();return t.resolve(),e},AblePlayer.prototype.setMediaAttributes=function(){this.$media.attr("tabindex",-1);var t=this.$media.get(0).textTracks;if(t)for(var e=0;e<t.length;)t[e].mode="disabled",e+=1},AblePlayer.prototype.getPlayer=function(){return this.youTubeId?"video"!==this.mediaType?null:"youtube":this.vimeoId?"video"!==this.mediaType?null:"vimeo":this.testFallback\|\|(this.isUserAgent("msie 7")\|\|this.isUserAgent("msie 8")\|\|this.isUserAgent("msie 9"))&&"video"===this.mediaType\|\|this.isIOS()&&(this.isIOS(4)\|\|this.isIOS(5)\|\|this.isIOS(6))?null:this.media.canPlayType?"html5":null}}(jQuery),function(q){AblePlayer.prototype.setCookie=function(t){Cookies.set("Able-Player",JSON.stringify(t),{expires:90,sameSite:"strict"})},AblePlayer.prototype.getCookie=function(){var e,i={preferences:{},sign:{},transcript:{}};try{e=JSON.parse(Cookies.get("Able-Player"))}catch(t){this.setCookie(i),e=i}return e\|\|i},AblePlayer.prototype.updateCookie=function(t){var e,i,s,a,n,r;if(e=this.getCookie(),"transcript"===t\|\|"sign"===t)"transcript"===t?(s=(i=this.$transcriptArea).position(),void 0===e.transcript&&(e.transcript={}),e.transcript.position=i.css("position"),e.transcript.zindex=i.css("z-index"),e.transcript.top=s.top,e.transcript.left=s.left,e.transcript.width=i.width(),e.transcript.height=i.height()):"sign"===t&&(s=(i=this.$signWindow).position(),void 0===e.sign&&(e.sign={}),e.sign.position=i.css("position"),e.sign.zindex=i.css("z-index"),e.sign.top=s.top,e.sign.left=s.left,e.sign.width=i.width(),e.sign.height=i.height());else for(a=this.getAvailablePreferences(),n=0;n<a.length;n++)(r=a[n].name)==t&&(e.preferences[r]=this[r]);this.setCookie(e)},AblePlayer.prototype.getPreferencesGroups=function(){if("video"===this.mediaType)return this.usingYouTubeCaptions?["captions","descriptions","keyboard"]:this.usingVimeoCaptions?["descriptions","keyboard"]:["captions","descriptions","keyboard","transcript"];if("audio"===this.mediaType){var t=[];return t.push("keyboard"),this.lyricsMode&&t.push("transcript"),t}},AblePlayer.prototype.getAvailablePreferences=function(){var t=[];return t.push({name:"prefAltKey",label:this.tt.prefAltKey,group:"keyboard",default:1}),t.push({name:"prefCtrlKey",label:this.tt.prefCtrlKey,group:"keyboard",default:1}),t.push({name:"prefShiftKey",label:this.tt.prefShiftKey,group:"keyboard",default:0}),t.push({name:"prefTranscript",label:null,group:"transcript",default:0}),t.push({name:"prefHighlight",label:this.tt.prefHighlight,group:"transcript",default:1}),t.push({name:"prefAutoScrollTranscript",label:null,group:"transcript",default:1}),t.push({name:"prefTabbable",label:this.tt.prefTabbable,group:"transcript",default:0}),"video"===this.mediaType&&(t.push({name:"prefCaptions",label:null,group:"captions",default:1}),this.usingYouTubeCaptions\|\|(t.push({name:"prefCaptionsPosition",label:this.tt.prefCaptionsPosition,group:"captions",default:this.defaultCaptionsPosition}),t.push({name:"prefCaptionsFont",label:this.tt.prefCaptionsFont,group:"captions",default:"sans-serif"})),t.push({name:"prefCaptionsSize",label:this.tt.prefCaptionsSize,group:"captions",default:"100%"}),this.usingYouTubeCaptions\|\|(t.push({name:"prefCaptionsColor",label:this.tt.prefCaptionsColor,group:"captions",default:"white"}),t.push({name:"prefCaptionsBGColor",label:this.tt.prefCaptionsBGColor,group:"captions",default:"black"}),t.push({name:"prefCaptionsOpacity",label:this.tt.prefCaptionsOpacity,group:"captions",default:"100%"})),t.push({name:"prefDesc",label:null,group:"descriptions",default:0}),t.push({name:"prefDescFormat",label:null,group:"descriptions",default:"video"}),t.push({name:"prefDescVoice",label:this.tt.prefDescVoice,group:"descriptions",default:null}),t.push({name:"prefDescPitch",label:this.tt.prefDescPitch,group:"descriptions",default:1}),t.push({name:"prefDescRate",label:this.tt.prefDescRate,group:"descriptions",default:1}),t.push({name:"prefDescVolume",label:this.tt.volume,group:"descriptions",default:1}),t.push({name:"prefDescPause",label:this.tt.prefDescPause,group:"descriptions",default:1}),t.push({name:"prefDescVisible",label:this.tt.prefDescVisible,group:"descriptions",default:0}),t.push({name:"prefSign",label:null,group:null,default:0})),t},AblePlayer.prototype.loadCurrentPreferences=function(){for(var t=this.getAvailablePreferences(),e=this.getCookie(),i=0;i<t.length;i++){var s=t[i].name,a=t[i].default;void 0!==e.preferences[s]?this[s]=e.preferences[s]:(e.preferences[s]=a,this[s]=a)}this.setCookie(e)},AblePlayer.prototype.injectPrefsForm=function(t){var e,i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v,y,b,w,P,k,C,T,$,A,x,D,S,N,I,B,M,F,V,z,L;i=(e=this).getAvailablePreferences();var O="able-prefs-form-"+t;if((s=q("<div>",{class:"able-prefs-form "})).addClass(O),"captions"==t)a=this.tt.prefTitleCaptions,n=this.tt.prefIntroCaptions,W=q("<p>",{text:n}),s.append(W);else if("descriptions"==t){a=this.tt.prefTitleDescriptions;var W=q("<p>",{text:this.tt.prefIntroDescription1}),H=q("<ul>"),R=q("<li>",{text:this.tt.prefDescFormatOption1}),E=q("<li>",{text:this.tt.prefDescFormatOption2});H.append(R,E),this.hasOpenDesc&&this.hasClosedDesc?(D=this.tt.prefIntroDescription2+" ",D+="<strong>"+this.tt.prefDescFormatOption1b+"</strong>",D+=" <em>"+this.tt.and+"</em> <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):this.hasOpenDesc?(D=this.tt.prefIntroDescription2,D+=" <strong>"+this.tt.prefDescFormatOption1b+"</strong>."):this.hasClosedDesc?(D=this.tt.prefIntroDescription2,D+=" <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):D=this.tt.prefIntroDescriptionNone,r=q("<p>",{html:D}),o=this.tt.prefIntroDescription3,(this.hasOpenDesc\|\|this.hasClosedDesc)&&(o+=" "+this.tt.prefIntroDescription4),l=q("<p>",{text:o}),s.append(W,H,r,l)}else"keyboard"==t?(a=this.tt.prefTitleKeyboard,n=this.tt.prefIntroKeyboard1,n+=" "+this.tt.prefIntroKeyboard2,n+=" "+this.tt.prefIntroKeyboard3,W=q("<p>",{text:n}),s.append(W)):"transcript"==t&&(a=this.tt.prefTitleTranscript,n=this.tt.prefIntroTranscript,W=q("<p>",{text:n}),s.append(W));for(c=q("<fieldset>"),u="able-prefs-"+t,d=this.mediaId+"-prefs-"+t,c.addClass(u).attr("id",d),"keyboard"===t?(g=q("<legend>"+this.tt.prefHeadingKeyboard1+"</legend>"),c.append(g)):"descriptions"===t&&(g=q("<legend>"+this.tt.prefHeadingTextDescription+"</legend>"),c.append(g)),h=0;h<i.length;h++)if(i[h].group==t&&i[h].label){if(v="able-"+(f=i[h].name),y=this.mediaId+"_"+f,m=q("<div>").addClass(v),"captions"===t){for(b=q('<label for="'+y+'"> '+i[h].label+"</label>"),w=q("<select>",{name:f,id:y}),"prefCaptions"!==f&&"prefCaptionsStyle"!==f&&w.change(function(){$=q(this).attr("name"),e.stylizeCaptions(e.$sampleCapsDiv,$)}),P=this.getCaptionsOptions(f),p=0;p<P.length;p++)"prefCaptionsPosition"===f?"overlay"===(C=P[p])?T=this.tt.captionsPositionOverlay:"below"===C&&(C=P[p],T=this.tt.captionsPositionBelow):"prefCaptionsFont"===f\|\|"prefCaptionsColor"===f\|\|"prefCaptionsBGColor"===f?(C=P[p][0],T=P[p][1]):"prefCaptionsOpacity"===f?(C=P[p],T=P[p],"0%"===C?T+=" ("+this.tt.transparent+")":"100%"===C&&(T+=" ("+this.tt.solid+")")):(C=P[p],T=P[p]),k=q("<option>",{value:C,text:T}),this[f]===C&&k.prop("selected",!0),w.append(k);m.append(b,w)}else if("descriptions"===t){if(b=q('<label for="'+y+'"> '+i[h].label+"</label>"),"prefDescPause"===f\|\|"prefDescVisible"===f)m.addClass("able-prefs-checkbox"),w=q("<input>",{type:"checkbox",name:f,id:y,value:"true"}),1===this[f]&&w.prop("checked",!0),m.append(w,b);else if(this.synth){if(m.addClass("able-prefs-select"),w=q("<select>",{name:f,id:y}),"prefDescVoice"===f&&this.descVoices)for(p=0;p<this.descVoices.length;p++)T=(C=this.descVoices[p].name)+" ("+this.descVoices[p].lang+")",k=q("<option>",{value:C,text:T}),this[f]==C&&k.prop("selected",!0),w.append(k),this.$voiceSelectField=w;else if("prefDescPitch"==f?P=[0,.5,1,1.5,2]:"prefDescRate"==f?P=[.7,.8,.9,1,1.1,1.2,1.5,2,2.5,3]:"prefDescVolume"==f&&(P=[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]),void 0!==P)for(p=0;p<P.length;p++)C=P[p],T=this.makePrefsValueReadable(f,C),k=q("<option>",{value:C,text:T}),this[f]==C&&k.prop("selected",!0),w.append(k),m.append(b,w);w.on("change",function(){e.announceDescriptionText("sample",e.tt.sampleDescriptionText)}),m.append(b,w)}}else b=q('<label for="'+y+'"> '+i[h].label+"</label>"),w=q("<input>",{type:"checkbox",name:f,id:y,value:"true"}),1===this[f]&&w.prop("checked",!0),"keyboard"===t&&w.on("change",function(){"prefAltKey"===($=q(this).attr("name"))?(A=".able-modkey-alt",x=e.tt.prefAltKey+" + "):"prefCtrlKey"===$?(A=".able-modkey-ctrl",x=e.tt.prefCtrlKey+" + "):"prefShiftKey"===$&&(A=".able-modkey-shift",x=e.tt.prefShiftKey+" + "),q(this).is(":checked")?q(A).text(x):q(A).text("")}),m.append(w,b);c.append(m)}if(s.append(c),"captions"===t)"video"!==this.mediaType\|\|this.usingYouTubeCaptions\|\|(this.$sampleCapsDiv=q("<div>",{class:"able-captions-sample"}).text(this.tt.sampleCaptionText),s.append(this.$sampleCapsDiv),this.stylizeCaptions(this.$sampleCapsDiv));else if("descriptions"===t)this.synth&&(this.$sampleDescDiv=q("<div>",{class:"able-desc-sample"}).text(this.tt.sampleDescriptionText),s.append(this.$sampleDescDiv));else if("keyboard"===t){for(S=q("<h2>",{text:this.tt.prefHeadingKeyboard2}),N=q("<ul>"),I=[],B=[],h=0;h<this.controls.length;h++)"play"===this.controls[h]?(I.push(this.tt.play+"/"+this.tt.pause),B.push("p</span> <em>"+this.tt.or+'</em> <span class="able-help-modifiers"> '+this.tt.spacebar)):"restart"===this.controls[h]?(I.push(this.tt.restart),B.push("s")):"previous"===this.controls[h]?(I.push(this.tt.prevTrack),B.push("b")):"next"===this.controls[h]?(I.push(this.tt.nextTrack),B.push("n")):"rewind"===this.controls[h]?(I.push(this.tt.rewind),B.push("r")):"forward"===this.controls[h]?(I.push(this.tt.forward),B.push("f")):"volume"===this.controls[h]?(I.push(this.tt.volume),B.push("v</span> <em>"+this.tt.or+'</em> <span class="able-modkey">1-9'),I.push(this.tt.mute+"/"+this.tt.unmute),B.push("m")):"captions"===this.controls[h]?(1<this.captions.length?I.push(this.tt.captions):this.captionsOn?I.push(this.tt.hideCaptions):I.push(this.tt.showCaptions),B.push("c")):"descriptions"===this.controls[h]?(this.descOn?I.push(this.tt.turnOffDescriptions):I.push(this.tt.turnOnDescriptions),B.push("d")):"prefs"===this.controls[h]?(I.push(this.tt.preferences),B.push("e")):"help"===this.controls[h]&&(I.push(this.tt.help),B.push("h"));for(h=0;h<B.length;h++)M='<span class="able-modkey-alt">',1===this.prefAltKey&&(M+=this.tt.prefAltKey+" + "),M+="</span>",M+='<span class="able-modkey-ctrl">',1===this.prefCtrlKey&&(M+=this.tt.prefCtrlKey+" + "),M+="</span>",M+='<span class="able-modkey-shift">',1===this.prefShiftKey&&(M+=this.tt.prefShiftKey+" + "),M+="</span>",M+='<span class="able-modkey">'+B[h]+"</span>",M+=" = "+I[h],F=q("<li>",{html:M}),N.append(F);M='<span class="able-modkey">'+this.tt.escapeKey+"</span>",M+=" = "+this.tt.escapeKeyFunction,F=q("<li>",{html:M}),N.append(F),s.append(S,N)}q("body").append(s),V=new AccessibleDialog(s,this.$prefsButton,"dialog",a,W,e.tt.closeButtonLabel,"32em"),s.append("<hr>"),z=q('<button class="modal-button">'+this.tt.save+"</button>"),L=q('<button class="modal-button">'+this.tt.cancel+"</button>"),z.click(function(){V.hide(),e.savePrefsFromForm()}),L.click(function(){V.hide(),e.resetPrefsForm()}),s.append(z),s.append(L),"captions"===t?this.captionPrefsDialog=V:"descriptions"===t?this.descPrefsDialog=V:"keyboard"===t?this.keyboardPrefsDialog=V:"transcript"===t&&(this.transcriptPrefsDialog=V),q("div.able-prefs-form button.modalCloseButton").click(function(){e.resetPrefsForm()}),q("div.able-prefs-form").keydown(function(t){27===t.which&&e.resetPrefsForm()})},AblePlayer.prototype.rebuildDescPrefsForm=function(){var t,e,i,s;for(this.$voiceSelectField=q("#"+this.mediaId+"_prefDescVoice"),t=0;t<this.descVoices.length;t++)i=(e=this.descVoices[t].name)+" ("+this.descVoices[t].lang+")",s=q("<option>",{value:e,text:i}),this.prefDescVoice==e&&s.prop("selected",!0),this.$voiceSelectField.append(s)},AblePlayer.prototype.makePrefsValueReadable=function(t,e){if("prefDescPitch"===t){if(0===e)return this.tt.prefDescPitch1;if(.5===e)return this.tt.prefDescPitch2;if(1===e)return this.tt.prefDescPitch3;if(1.5===e)return this.tt.prefDescPitch4;if(2===e)return this.tt.prefDescPitch5}else if("prefDescRate"===t){if(.7===e)return 1;if(.8===e)return 2;if(.9===e)return 3;if(1===e)return 4;if(1.1===e)return 5;if(1.2===e)return 6;if(1.5===e)return 7;if(2===e)return 8;if(2.5===e)return 9;if(3===e)return 10}else if("prefDescVolume"===t)return 10e;return e},AblePlayer.prototype.resetPrefsForm=function(){var t,e,i,s;for(t=this.getCookie(),e=this.getAvailablePreferences(),i=0;i<e.length;i++)s=e[i].name,this.mediaId+"_"+s,-1!==s.indexOf("Captions")&&"prefCaptions"!==s?q('select[name="'+s+'"]').val(t.preferences[s]):1===this[s]?q('input[name="'+s+'"]').prop("checked",!0):q('input[name="'+s+'"]').prop("checked",!1);this.stylizeCaptions(this.$sampleCapsDiv)},AblePlayer.prototype.savePrefsFromForm=function(){var t,e,i,s,a,n,r,o,l;n=a=0,r=!1,t=this.getCookie(),e=this.getAvailablePreferences();for(var h=0;h<e.length;h++)e[h].label&&(i=e[h].name,s=this.mediaId+"_"+i,"prefDescFormat"==i?(this.prefDescFormat="video",this.prefDescFormat!==t.preferences.prefDescFormat&&(t.preferences.prefDescFormat=this.prefDescFormat,a++)):-1!==i.indexOf("Captions")&&"prefCaptions"!==i?(l=q('select[id="'+s+'"]').val(),t.preferences[i]!==l&&(t.preferences[i]=l,this[i]=l,a++,n++),"prefCaptionsSize"===i&&(r=!0,o=l)):-1!==i.indexOf("Desc")&&"prefDescPause"!==i&&"prefDescVisible"!==i?(l=q('select[id="'+s+'"]').val(),t.preferences[i]!==l&&(t.preferences[i]=l,this[i]=l,a++)):q('input[id="'+s+'"]').is(":checked")?(t.preferences[i]=1)===this[i]\|\|(this[i]=1,a++):(t.preferences[i]=0,1===this[i]&&(this[i]=0,a++)));if(0<a?(this.setCookie(t),this.showAlert(this.tt.prefSuccess)):this.showAlert(this.tt.prefNoChange),"youtube"===this.player&&void 0!==this.usingYouTubeCaptions&&this.usingYouTubeCaptions&&r&&this.youTubePlayer.setOption("captions","fontSize",this.translatePrefs("size",o,"youtube")),1<AblePlayerInstances.length)for(h=0;h<AblePlayerInstances.length;h++)AblePlayerInstances[h].updatePrefs(),AblePlayerInstances[h].geteferences(),AblePlayerInstances[h].resetPrefsForm(),0<n&&(AblePlayerInstances[h].stylizeCaptions(AblePlayerInstances[h].$captionsDiv),void 0!==AblePlayerInstances[h].$descDiv&&AblePlayerInstances[h].stylizeCaptions(AblePlayerInstances[h].$descDiv));else this.updatePrefs(),0<n&&(this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv))},AblePlayer.prototype.updatePrefs=function(){this.$transcriptDiv&&(1===this.prefTabbable?this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"):this.$transcriptDiv.find("span.able-transcript-seekpoint").removeAttr("tabindex"),0===this.prefHighlight&&this.$transcriptDiv.find("span").removeClass("able-highlight")),this.updateCaption(),this.refreshingDesc=!0,this.initDescription()},AblePlayer.prototype.usingModifierKeys=function(t){return!(1===this.prefAltKey&&!t.altKey)&&(!(1===this.prefCtrlKey&&!t.ctrlKey)&&!(1===this.prefShiftKey&&!t.shiftKey))}}(jQuery),function(l){function h(t,e){for(var i=[],s=0;s<e.length;s++)i.push(p(t,e[s]));return i}function p(t,e){var i=e(t);if(null!==t.error)throw t.error;return i}function a(t,e){for(var i=0;i<e.length;i++)"\n"===e[i]?(t.column=1,t.line+=1):t.column+=1}function c(t,e){var i=t.text.substring(0,e);return a(t,i),t.text=t.text.substring(e),i}function u(t,e){var i,s=t.text.indexOf("\n");return-1===s?(a(t,i=t.text),t.text=""):(i=t.text.substring(0,s),a(t,i+"\n"),t.text=t.text.substring(s+1)),i}function d(t){var e=t.text.indexOf("\n");return-1===e?t.text:t.text.substring(0,e)}function s(t){h(t,[w,P]);var e=t.text[0];" "===e\|\|"\t"===e\|\|"\n"===e?h(t,[$,i,x,o]):t.error="WEBVTT signature not followed by whitespace."}function i(t){for(;;){var e=d(t);if(-1!==e.indexOf("--\x3e"))return;if(0===e.length)return;var i=p(t,n);t.metadata[i[0]]=i[1],p(t,$)}}function g(t){var e=[],i=t.indexOf(" ");0<=i&&e.push(i);var s=t.indexOf("\t");0<=s&&e.push(s);var a=t.indexOf("\n");return 0<=a&&e.push(a),Math.min.apply(null,e)}function n(t){var e=t.text.indexOf("\n"),i=c(t,e),s=i.indexOf(":");return-1===s?void(t.error="Missing colon."):[i.substring(0,s),i.substring(s+1)]}function r(t){var e=c(t,g(t.text)),i=e.indexOf(":");return-1===i?void(t.error="Missing colon."):[e.substring(0,i),e.substring(i+1)]}function o(t){for(;;){var e=d(t);if(0!==e.indexOf("NOTE")\|\|4!==e.length&&" "!==e[4]&&"\t"!==e[4])if(0===l.trim(e).length&&0<t.text.length)p(t,A);else{if(!(0<l.trim(e).length))return;p(t,f)}else h(t,[b,A])}}function f(t){var e,i=d(t);if(-1===i.indexOf("--\x3e")&&(e=u(t),-1===(i=d(t)).indexOf("--\x3e")))return"Invalid WebVTT file: "+t.src+"\n","Line: "+t.line+", ","Column: "+t.column+"\n","Expected cue timing for cueId '"+e+"' but found: "+i+"\n",void(console.warn\|\|console.log);var s=h(t,[D,T,k,T,D]),a=s[0],n=s[4];if(n<=a)t.error="Start time is not sooner than end time.";else{p(t,C);var r=p(t,m);c(t,1);var o=p(t,v);void 0===e&&(e=t.cues.length+1),t.cues.push({id:e,start:a,end:n,settings:r,components:o})}}function m(t){for(var e={};0<t.text.length&&"\n"!==t.text[0];){var i=p(t,r);e[i[0]]=i[1],p(t,C)}return e}function v(t){for(var e={type:"internal",tagName:"",value:"",classes:[],annotation:"",parent:null,children:[],language:""},i=e,s=[];0<t.text.length;){var a=d(t);if(-1!==a.indexOf("--\x3e")\|\|/^\s$/.test(a))break;if(2<=t.text.length&&"\n"===t.text[0]&&"\n"===t.text[1]){c(t,2);break}var n=y(t);if("string"===n.type)i.children.push(n);else if("startTag"===n.type)n.type=n.tagName,n.parent=i,-1!==l.inArray(n.tagName,["i","b","u","ruby"])?(0<s.length&&(i.language=s[s.length-1]),i.children.push(n),i=n):"rt"===n.tagName&&"ruby"===i.tagName?(0<s.length&&(i.language=s[s.length-1]),i.children.push(n),i=n):"c"===n.tagName?(n.value=n.annotation,0<s.length&&(i.language=s[s.length-1]),i.children.push(n),i=n):"v"===n.tagName?(n.value=n.annotation,0<s.length&&(i.language=s[s.length-1]),i.children.push(n),i=n):"lang"===n.tagName&&(s.push(n.annotation),0<s.length&&(i.language=s[s.length-1]),i.children.push(n),i=n);else if("endTag"===n.type)n.tagName===i.type&&-1!==l.inArray(n.tagName,["c","i","b","u","ruby","rt","v"])?i=i.parent:"lang"===n.tagName&&"lang"===i.type?(i=i.parent,s.pop()):"ruby"===n.tagName&&"rt"===i.type&&(i=i.parent.parent);else if("timestampTag"===n.type){var r={text:n.value,error:null,metadata:{},cues:[],line:1,column:1};try{var o=p(r,D);0===r.text.length&&(n.value=o,i.push(n))}catch(t){}}}return e}function y(t){for(var e="data",i=[],s="",a={type:"",tagName:"",value:"",classes:[],annotation:"",children:[]};;){var n;if(n=2<=t.text.length&&"\n"===t.text[0]&&"\n"===t.text[1]?"":0<t.text.length?t.text[0]:"","data"===e)if("&"===n)s="&",e="escape";else if("<"===n){if(0!==i.length)return a.type="string",a.value=i.join(""),a;e="tag"}else{if(""===n)return{type:"string",value:i.join("")};i.push(n)}else if("escape"===e)if("&"===n)i.push(s),s="&";else if(n.match(/[0-9a-z]/))s+=n;else if(";"===n)"&"===s?i.push("&"):"<"===s?i.push("<"):">"===s?i.push(">"):"&lrm"===s?i.push("‎"):"&rlm"===s?i.push("‏"):" "===s?i.push(" "):(i.push(s),i.push(";")),e="data";else{if("<"===n\|\|""===n)return i.push(s),a.type="string",a.value=i.join(""),a;if("\t"===n\|\|"\n"===n\|\|"\f"===n\|\|" "===n)return i.push(s),a.type="string",a.value=i.join(""),a;i.push(s),e="data"}else if("tag"===e)if("\t"===n\|\|"\n"===n\|\|"\f"===n\|\|" "===n)e="startTagAnnotation";else if("."===n)e="startTagClass";else if("/"===n)e="endTag";else if(n.match("[0-9]"))e="timestampTag",i.push(n);else{if(">"===n){c(t,1);break}if(""===n)return a.tagName="",a.type="startTag",a;i.push(n),e="startTag"}else if("startTag"===e)if("\t"===n\|\|"\f"===n\|\|" "===n)e="startTagAnnotation";else if("\n"===n)s=n,e="startTagAnnotation";else if("."===n)e="startTagClass";else{if(">"===n)return c(t,1),a.tagName=i.join(""),a.type="startTag",a;if(""===n)return a.tagName=i.join(""),a.type="startTag",a;i.push(n)}else if("startTagClass"===e)if("\t"===n\|\|"\f"===n\|\|" "===n)a.classes.push(s),s="",e="startTagAnnotation";else if("\n"===n)a.classes.push(s),s=n,e="startTagAnnotation";else if("."===n)a.classes.push(s),s="";else{if(">"===n)return c(t,1),a.classes.push(s),a.type="startTag",a.tagName=i.join(""),a;if(""===n)return a.classes.push(s),a.type="startTag",a.tagName=i.join(""),a;s+="c"}else if("startTagAnnotation"===e){if(">"===n)return c(t,1),s=l.trim(s).replace(/ +/," "),a.type="startTag",a.tagName=i.join(""),a.annotation=s,a;if(""===n)return s=l.trim(s).replace(/ +/," "),a.type="startTag",a.tagName=i.join(""),a.annotation=s,a;s+=n}else if("endTag"===e){if(">"===n)return c(t,1),a.type="endTag",a.tagName=i.join(""),a;if(""===n)return a.type="endTag",a.tagName=i.join(""),a;i.push(n)}else{if("timestampTag"!==e)throw"Unknown tokenState "+e;if(">"===n)return c(t,1),a.type="timestampTag",a.name=i.join(""),a;if(""===n)return a.type="timestampTag",a.name=i.join(""),a;i.push(n)}c(t,1)}}function b(t){if(-1===u(t).indexOf("--\x3e"))for(;;){var e=d(t);if(0===l.trim(e).length)return;if(-1!==e.indexOf("--\x3e"))return void(t.error="Invalid syntax: --\x3e in comment.");u(t)}else t.error="Invalid syntax: --\x3e in NOTE line."}function w(t){"\ufeff"===t.text[0]&&c(t,1)}function P(t){"WEBVTT"===t.text.substring(0,6)?c(t,6):t.error="Invalid signature."}function k(t){t.text.length<3\|\|"--\x3e"!==t.text.substring(0,3)?t.error="Missing --\x3e":c(t,3)}function C(t){for(;"\t"===t.text[0]\|\|" "===t.text[0];)c(t,1)}function T(t){for(var e=0;"\t"===t.text[0]\|\|" "===t.text[0];)c(t,1),e+=1;0===e&&(t.error="Missing space.")}function $(t){var e=t.text.indexOf("\n");-1===e?t.error="Missing EOL.":c(t,e+1)}function A(t){for(;0<t.text.length;){var e=d(t);if(0!==l.trim(e).length)break;u(t)}}function x(t){for(var e=0;0<t.text.length;){var i=d(t);if(0!==l.trim(i).length)break;u(t),e+=1}0===e&&(t.error="Missing empty line.")}function D(t){var e=g(t.text);if(-1!==e){var i=c(t,e),s=/((\d\d):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(i);if(s){var a=0,n=s[2],r=s[4];if(r){if(59<parseInt(r,10))return void(t.error="Invalid minute range");n&&(a+=3600parseInt(n,10)),a+=60parseInt(r,10);var o=s[5];if(59<parseInt(o,10))return void(t.error="Invalid second range");a+=parseInt(o,10),a+=parseInt(s[6],10)/1e3}else a+=parseInt(s[7],10),a+=parseInt(s[8],10)/1e3;return a}t.error="Unable to parse timestamp"}else t.error("Missing timing.")}AblePlayer.prototype.parseWebVTT=function(t,e){var i={src:t,text:e=e.replace(/(\r\n\|\n\|\r)/g,"\n"),error:null,metadata:{},cues:[],line:1,column:1};try{p(i,s)}catch(t){"Line: "+i.line+", ","Column: "+i.column+"\n",t,console.warn\|\|console.log}return i}}(jQuery),function($){AblePlayer.prototype.injectPlayerCode=function(){var t;this.$mediaContainer=this.$media.wrap('<div class="able-media-container"></div>').parent(),this.$ableDiv=this.$mediaContainer.wrap('<div class="able"></div>').parent(),this.$ableWrapper=this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(),this.$ableWrapper.addClass("able-skin-"+this.skin),this.$ableWrapper.css({"max-width":this.playerMaxWidth+"px"}),this.injectOffscreenHeading(),"video"===this.mediaType&&("image"==this.iconType\|\|"youtube"===this.player&&!this.hasPoster\|\|this.injectBigPlayButton(),t=$("<div>",{class:"able-vidcap-container"}),this.$vidcapContainer=this.$mediaContainer.wrap(t).parent()),this.injectPlayerControlArea(),this.injectTextDescriptionArea(),this.injectAlert(),this.injectPlaylist()},AblePlayer.prototype.injectOffscreenHeading=function(){var t;"0"==this.playerHeadingLevel\|\|(void 0===this.playerHeadingLevel&&(this.playerHeadingLevel=this.getNextHeadingLevel(this.$ableDiv)),t="h"+this.playerHeadingLevel.toString(),this.$headingDiv=$("<"+t+">"),this.$ableDiv.prepend(this.$headingDiv),this.$headingDiv.addClass("able-offscreen"),this.$headingDiv.text(this.tt.playerHeading))},AblePlayer.prototype.injectBigPlayButton=function(){this.$bigPlayButton=$("<button>",{class:"able-big-play-button icon-play","aria-hidden":!0,tabindex:-1});var t=this;this.$bigPlayButton.click(function(){t.handlePlay()}),this.$mediaContainer.append(this.$bigPlayButton)},AblePlayer.prototype.injectPlayerControlArea=function(){this.$playerDiv=$("<div>",{class:"able-player",role:"region","aria-label":this.mediaType+" player"}),this.$playerDiv.addClass("able-"+this.mediaType),this.$nowPlayingDiv=$("<div>",{class:"able-now-playing","aria-live":"assertive","aria-atomic":"true"}),this.$controllerDiv=$("<div>",{class:"able-controller"}),this.$controllerDiv.addClass("able-"+this.iconColor+"-controls"),this.$statusBarDiv=$("<div>",{class:"able-status-bar"}),this.$timer=$("<span>",{class:"able-timer"}),this.$elapsedTimeContainer=$("<span>",{class:"able-elapsedTime",text:"0:00"}),this.$durationContainer=$("<span>",{class:"able-duration"}),this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer),this.$speed=$("<span>",{class:"able-speed","aria-live":"assertive"}).text(this.tt.speed+": 1x"),this.$status=$("<span>",{class:"able-status","aria-live":"polite"}),this.$statusBarDiv.append(this.$timer,this.$speed,this.$status),this.$playerDiv.append(this.$nowPlayingDiv,this.$controllerDiv,this.$statusBarDiv),this.$ableDiv.append(this.$playerDiv)},AblePlayer.prototype.injectTextDescriptionArea=function(){this.$descDiv=$("<div>",{class:"able-descriptions"}),this.exposeTextDescriptions&&this.$descDiv.attr({"aria-live":"assertive","aria-atomic":"true"}),this.$descDiv.hide(),this.$ableDiv.append(this.$descDiv)},AblePlayer.prototype.getDefaultWidth=function(t){return"transcript"===t?450:"sign"===t?400:void 0},AblePlayer.prototype.positionDraggableWindow=function(t,e){var i,s,a,n;i=this.getCookie(),"transcript"===t?(a=this.$transcriptArea,void 0!==i.transcript&&(s=i.transcript)):"sign"===t&&(a=this.$signWindow,void 0!==i.transcript&&(s=i.sign)),void 0===s\|\|$.isEmptyObject(s)?(n=this.getOptimumPosition(t,e),void 0===e&&(e=this.getDefaultWidth(t)),a.css({position:n[0],width:e,"z-index":n[3]}),"absolute"===n[0]&&a.css({top:n[1]+"px",left:n[2]+"px"})):(a.css({position:s.position,width:s.width,"z-index":s.zindex}),"absolute"===s.position&&a.css({top:s.top,left:s.left}),this.updateZIndex(t))},AblePlayer.prototype.getOptimumPosition=function(t,e){var i,s,a,n,r,o;return void 0===e&&(e=this.getDefaultWidth(t)),5,i=[],s=this.$ableDiv.width(),this.$ableDiv.height(),(a=this.$ableDiv.offset()).top,n=a.left,r=$(window).width(),o=0,"transcript"===t?void 0!==this.$signWindow&&this.$signWindow.is(":visible")&&(o=this.$signWindow.width()+5):"sign"===t&&void 0!==this.$transcriptArea&&this.$transcriptArea.is(":visible")&&(o=this.$transcriptArea.width()+5),e<r-(n+s+5+o)?(i[0]="absolute",i[1]=0,i[2]=s+o+5):e+5<n?(i[0]="absolute",i[1]=0,i[2]=n-e-5):i[0]="relative",i},AblePlayer.prototype.injectPoster=function(t,e){var i,s,a;"youtube"===e?void 0!==this.ytWidth?(s=this.ytWidth,a=this.ytHeight):void 0!==this.playerMaxWidth?(s=this.playerMaxWidth,a=this.playerMaxHeight):void 0!==this.playerWidth&&(s=this.playerWidth,a=this.playerHeight):"fallback"===e&&(s="100%",a="auto"),this.hasPoster&&(i=this.$media.attr("poster"),this.$posterImg=$("<img>",{class:"able-poster",src:i,alt:"",role:"presentation",width:s,height:a}),t.append(this.$posterImg))},AblePlayer.prototype.injectAlert=function(){var t;this.$alertBox=$('<div role="alert"></div>'),this.$alertBox.addClass("able-alert"),this.$alertBox.hide(),this.$alertBox.appendTo(this.$ableDiv),t="audio"==this.mediaType?"-10":2Math.round(this.$mediaContainer.height()/3),this.$alertBox.css({top:t+"px"}),this.$srAlertBox=$('<div role="alert"></div>'),this.$srAlertBox.addClass("able-screenreader-alert"),this.$srAlertBox.appendTo(this.$ableDiv)},AblePlayer.prototype.injectPlaylist=function(){if(!0===this.playlistEmbed){var t=this.$playlistDom.clone();t.insertBefore(this.$statusBarDiv),this.$playlist=t.find("li")}},AblePlayer.prototype.createPopup=function(e,t){var i,s,a,n,r,o,l,h,p,c,u,d;if(s=$("<ul>",{id:(i=this).mediaId+"-"+e+"-menu",class:"able-popup",role:"menu"}).hide(),"captions"===e&&s.addClass("able-popup-captions"),"prefs"===e)if(1<this.prefCats.length){for(a=0;a<this.prefCats.length;a++)n=$("<li></li>",{role:"menuitem",tabindex:"-1"}),"captions"===(r=this.prefCats[a])?n.text(this.tt.prefMenuCaptions):"descriptions"===r?n.text(this.tt.prefMenuDescriptions):"keyboard"===r?n.text(this.tt.prefMenuKeyboard):"transcript"===r&&n.text(this.tt.prefMenuTranscript),n.on("click",function(){p=$(this).text(),i.showingPrefsDialog=!0,i.setFullscreen(!1),p===i.tt.prefMenuCaptions?i.captionPrefsDialog.show():p===i.tt.prefMenuDescriptions?i.descPrefsDialog.show():p===i.tt.prefMenuKeyboard?i.keyboardPrefsDialog.show():p===i.tt.prefMenuTranscript&&i.transcriptPrefsDialog.show(),i.closePopups(),i.showingPrefsDialog=!1}),s.append(n);this.$prefsButton.attr("data-prefs-popup","menu")}else 1==this.prefCats.length&&this.$prefsButton.attr("data-prefs-popup",this.prefCats[0]);else if("captions"===e\|\|"chapters"===e){for(o=!1,a=0;a<t.length;a++)l=t[a],n=$("<li></li>",{role:"menuitemradio",tabindex:"-1",lang:l.language}),l.def&&1==this.prefCaptions?(n.attr("aria-checked","true"),o=!0):n.attr("aria-checked","false"),"captions"==e?(n.text(l.label),n.on("click",this.getCaptionClickFunction(l))):"chapters"==e&&(n.text(this.flattenCueForCaption(l)+" - "+this.formatSecondsAsColonTime(l.start)),n.on("click",this.getChapterClickFunction(l.start))),s.append(n);"captions"===e&&(n=$("<li></li>",{role:"menuitemradio",tabindex:"-1"}).text(this.tt.captionsOff),0===this.prefCaptions?(n.attr("aria-checked","true"),o=!0):n.attr("aria-checked","false"),n.on("click",this.getCaptionOffFunction()),s.append(n))}else if("transcript-window"===e\|\|"sign-window"===e)for((h=[]).push({name:"move",label:this.tt.windowMove}),h.push({name:"resize",label:this.tt.windowResize}),h.push({name:"close",label:this.tt.windowClose}),a=0;a<h.length;a++)(n=$("<li></li>",{role:"menuitem",tabindex:"-1","data-choice":h[a].name})).text(h[a].label),n.on("click mousedown",function(t){if(t.stopPropagation(),void 0!==t.button&&0!==t.button)return!1;i.windowMenuClickRegistered\|\|i.finishingDrag\|\|(i.windowMenuClickRegistered=!0,i.handleMenuChoice(e.substr(0,e.indexOf("-")),$(this).attr("data-choice"),t))}),s.append(n);return"captions"!==e\|\|o?"chapters"===e&&(s.find('li:contains("'+this.defaultChapter+'")')?s.find('li:contains("'+this.defaultChapter+'")').attr("aria-checked","true").addClass("able-focus"):s.find("li").first().attr("aria-checked","true").addClass("able-focus")):s.find("li[lang="+this.captionLang+"]")?s.find("li[lang="+this.captionLang+"]").attr("aria-checked","true"):s.find("li").last().attr("aria-checked","true"),s.on("keydown",function(t){$(this).attr("id").split("-")[1],c=$(this).find("li:focus"),d=c.is(":first-child")?(u=$(this).find("li").last(),c.next()):c.is(":last-child")?(u=c.prev(),$(this).find("li").first()):(u=c.prev(),c.next()),9===t.which?t.shiftKey?(c.removeClass("able-focus"),u.focus().addClass("able-focus")):(c.removeClass("able-focus"),d.focus().addClass("able-focus")):40===t.which\|\|39===t.which?(c.removeClass("able-focus"),d.focus().addClass("able-focus")):38==t.which\|\|37===t.which?(c.removeClass("able-focus"),u.focus().addClass("able-focus")):32===t.which\|\|13===t.which?c.click():27===t.which&&(c.removeClass("able-focus"),i.closePopups()),t.preventDefault()}),this.$controllerDiv.append(s),s},AblePlayer.prototype.closePopups=function(){var t=this;this.chaptersPopup&&this.chaptersPopup.is(":visible")&&(this.chaptersPopup.hide(),this.$chaptersButton.removeAttr("aria-expanded").focus()),this.captionsPopup&&this.captionsPopup.is(":visible")&&(this.captionsPopup.hide(),this.$ccButton.removeAttr("aria-expanded").focus()),this.prefsPopup&&this.prefsPopup.is(":visible")&&!this.hidingPopup&&(this.hidingPopup=!0,this.prefsPopup.hide(),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$prefsButton.removeAttr("aria-expanded"),this.showingPrefsDialog\|\|this.$prefsButton.focus(),setTimeout(function(){t.hidingPopup=!1},100)),this.$volumeSlider&&this.$volumeSlider.is(":visible")&&(this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeAlert.text(this.tt.volumeSliderClosed),this.$volumeButton.removeAttr("aria-expanded").focus()),this.$transcriptPopup&&this.$transcriptPopup.is(":visible")&&(this.$transcriptPopup.hide(),this.$transcriptPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$transcriptPopupButton.removeAttr("aria-expanded").focus()),this.$signPopup&&this.$signPopup.is(":visible")&&(this.$signPopup.hide(),this.$signPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$signPopupButton.removeAttr("aria-expanded").focus())},AblePlayer.prototype.setupPopups=function(t){var e,i;if(e=[],void 0===t&&e.push("prefs"),"captions"!==t&&void 0!==t\|\|0<this.captions.length&&e.push("captions"),"chapters"!==t&&void 0!==t\|\|0<this.chapters.length&&this.useChaptersButton&&e.push("chapters"),"transcript-window"===t&&"popup"===this.transcriptType&&e.push("transcript-window"),"sign-window"===t&&this.hasSignLanguage&&e.push("sign-window"),0<e.length){this;for(var s=0;s<e.length;s++){var a=e[s];if(!1,"prefs"==a)this.prefsPopup=this.createPopup("prefs");else if("captions"==a)void 0!==this.captionsPopup&&this.captionsPopup\|\|(this.captionsPopup=this.createPopup("captions",this.captions));else if("chapters"==a)i=this.selectedChapters?this.selectedChapters.cues:1<=this.chapters.length?this.chapters[0].cues:[],void 0!==this.chaptersPopup&&this.chaptersPopup\|\|(this.chaptersPopup=this.createPopup("chapters",i));else{if("transcript-window"==a)return this.createPopup("transcript-window");if("sign-window"==a)return this.createPopup("sign-window")}}}},AblePlayer.prototype.provideFallback=function(){var t,e,i,s,a,n,r,o,l,h;if(n=!1,t=$("<div>",{class:"able-fallback",role:"alert"}),e=void 0!==this.playerMaxWidth?this.playerMaxWidth+"px":this.$media.attr("width")?parseInt(this.$media.attr("width"),10)+"px":"100%",t.css("max-width",e),i=this.$media.clone(),$("source, track",i).remove(),(s=i.html().trim()).length?t.html(s):(a=this.tt.fallbackError1+" "+this.tt[this.mediaType]+". ",a+=this.tt.fallbackError2+":",s=$("<p>").text(a),t.html(s),n=!0),n){for(h=$("<ul>"),r=this.getSupportingBrowsers(),o=0;o<r.length;o++)(l=$("<li>")).text(r[o].name+" "+r[o].minVersion+" "+this.tt.orHigher),h.append(l);t.append(h)}this.injectPoster(t,"fallback"),void 0!==this.$ableWrapper?(this.$ableWrapper.before(t),this.$ableWrapper.remove()):void 0!==this.$media?(this.$media.before(t),this.$media.remove()):$("body").prepend(t)},AblePlayer.prototype.getSupportingBrowsers=function(){var t=[];return t[0]={name:"Chrome",minVersion:"31"},t[1]={name:"Firefox",minVersion:"34"},t[2]={name:"Internet Explorer",minVersion:"10"},t[3]={name:"Opera",minVersion:"26"},t[4]={name:"Safari for Mac OS X",minVersion:"7.1"},t[5]={name:"Safari for iOS",minVersion:"7.1"},t[6]={name:"Android Browser",minVersion:"4.1"},t[7]={name:"Chrome for Android",minVersion:"40"},t},AblePlayer.prototype.calculateControlLayout=function(){var t,e,i;return(t=[])[0]=[],t[1]=[],"legacy"===this.skin&&(t[2]=[],t[3]=[]),t[0].push("play"),t[0].push("restart"),t[0].push("rewind"),t[0].push("forward"),"legacy"===this.skin&&t[1].push("seek"),this.hasPlaylist&&("legacy"===this.skin?(t[0].push("previous"),t[0].push("next")):"2020"==this.skin&&(t[0].push("previous"),t[0].push("next"))),this.isPlaybackRateSupported()?(e=!0,"legacy"===this.skin&&(t[2].push("slower"),t[2].push("faster"))):e=!1,"video"===this.mediaType&&(i=0,this.hasCaptions&&(i++,"legacy"===this.skin?t[2].push("captions"):"2020"==this.skin&&t[1].push("captions")),this.hasSignLanguage&&(i++,"legacy"===this.skin?t[2].push("sign"):"2020"==this.skin&&t[1].push("sign")),(this.hasOpenDesc\|\|this.hasClosedDesc)&&this.useDescriptionsButton&&(i++,"legacy"===this.skin?t[2].push("descriptions"):"2020"==this.skin&&t[1].push("descriptions"))),"popup"!==this.transcriptType\|\|this.hideTranscriptButton\|\|(i++,"legacy"===this.skin?t[2].push("transcript"):"2020"==this.skin&&t[1].push("transcript")),"video"===this.mediaType&&this.hasChapters&&this.useChaptersButton&&(i++,"legacy"===this.skin?t[2].push("chapters"):"2020"==this.skin&&t[1].push("chapters")),"2020"==this.skin&&0<i&&t[1].push("pipe"),e&&"2020"===this.skin&&(t[1].push("faster"),t[1].push("slower"),t[1].push("pipe")),"legacy"===this.skin?t[3].push("preferences"):"2020"==this.skin&&t[1].push("preferences"),"video"===this.mediaType&&this.allowFullScreen&&("legacy"===this.skin?t[3].push("fullscreen"):t[1].push("fullscreen")),this.browserSupportsVolume()?(!0,this.volumeButton="volume-"+this.getVolumeName(this.volume),"legacy"===this.skin?t[1].push("volume"):"2020"==this.skin&&t[1].push("volume")):(!1,this.volume=!1),t},AblePlayer.prototype.addControls=function(){var u,t,e,i,s,a,n,r,o,l,h,p,c,d,g,f,m,v,y,b,w,P;for(100,e=(t=(u=this).calculateControlLayout()).length,b=this.mediaId+"-tooltip",this.$tooltipDiv=$("<div>",{id:b,class:"able-tooltip"}).hide(),this.$controllerDiv.append(this.$tooltipDiv),"2020"==this.skin&&(r=$('<div class="able-seekbar"></div>'),o=this.mediaType+" "+this.tt.seekbarLabel,this.$controllerDiv.append(r),this.seekBar=new AccessibleSlider(this.mediaType,r,"horizontal",100,0,this.duration,this.seekInterval,o,"seekbar",!0,"visible")),i=0;i<e;i++){for(a=t[i],n=$("<div>",i%2==0?{class:"able-left-controls"}:{class:"able-right-controls"}),this.$controllerDiv.append(n),s=0;s<a.length;s++){if("seek"===(c=a[s]))r=$('<div class="able-seekbar"></div>'),o=this.mediaType+" "+this.tt.seekbarLabel,n.append(r),void 0!==this.duration&&0!==this.duration\|\|(this.duration=60,this.elapsed=0),this.seekBar=new AccessibleSlider(this.mediaType,r,"horizontal",100,0,this.duration,this.seekInterval,o,"seekbar",!0,"visible");else if("pipe"===c)l=$("<span>",{tabindex:"-1","aria-hidden":"true"}),"font"===this.iconType?l.addClass("icon-pipe"):(h=$("<img>",{src:this.rootPath+"button-icons/"+this.iconColor+"/pipe.png",alt:"",role:"presentation"}),l.append(h)),n.append(l);else{if(g="volume"===c?this.rootPath+"button-icons/"+this.iconColor+"/"+this.volumeButton+".png":"fullscreen"===c?this.rootPath+"button-icons/"+this.iconColor+"/fullscreen-expand.png":"slower"===c?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/turtle.png":this.rootPath+"button-icons/"+this.iconColor+"/slower.png":"faster"===c?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/rabbit.png":this.rootPath+"button-icons/"+this.iconColor+"/faster.png":this.rootPath+"button-icons/"+this.iconColor+"/"+c+".png",f=this.getButtonTitle(c),m=$("<div>",{role:"button",tabindex:"0","aria-label":f,class:"able-button-handler-"+c}),"volume"!==c&&"preferences"!==c\|\|("preferences"==c?(this.prefCats=this.getPreferencesGroups(),1<this.prefCats.length?(P=this.mediaId+"-prefs-menu",m.attr({"aria-controls":P,"aria-haspopup":"menu"})):1===this.prefCats.length&&m.attr({"aria-haspopup":"dialog"})):"volume"===c&&(P=this.mediaId+"-volume-slider",m.attr({"aria-controls":P,"aria-expanded":"false"}))),"font"===this.iconType)v="volume"===c?"icon-"+this.volumeButton:"slower"===c?"animals"===this.speedIcons?"icon-turtle":"icon-slower":"faster"===c?"animals"===this.speedIcons?"icon-rabbit":"icon-faster":"icon-"+c,y=$("<span>",{class:v,"aria-hidden":"true"}),m.append(y);else if("svg"===this.iconType){var k;k="volume"===c?this.getSvgData(this.volumeButton):"fullscreen"===c?this.getSvgData("fullscreen-expand"):"slower"===c?"animals"===this.speedIcons?this.getSvgData("turtle"):this.getSvgData("slower"):"faster"===c?"animals"===this.speedIcons?this.getSvgData("rabbit"):this.getSvgData("faster"):this.getSvgData(c),y=$("<svg>",{focusable:"false","aria-hidden":"true",viewBox:k[0]}),p=$("<path>",{d:k[1]}),y.append(p),m.html(y),m.html(m.html())}else d=$("<img>",{src:g,alt:"",role:"presentation"}),m.append(d);var C=$("<span>",{class:"able-clipped"}).text(f);m.append(C),m.on("mouseenter focus",function(t){var e=$(this).attr("aria-label"),i=$(this).position(),s=$(this).height(),a=$(this).width(),n=u.$controllerDiv.width();i.right=n-i.left-a;var r=i.top-s-15;if($(this).parent().hasClass("able-right-controls"))var o="right";else o="left";var l=AblePlayer.localGetElementById(m[0],b).text(e).width();if("left"==o){(p=i.left-l/2)<0&&(p=2);var h={left:p+"px",right:"",top:r+"px"}}else{var p;(p=i.right-l/2)<0&&(p=2);h={left:"",right:p+"px",top:r+"px"}}var c=AblePlayer.localGetElementById(m[0],b).text(e).css(h);u.showTooltip(c),$(this).on("mouseleave blur",function(){AblePlayer.localGetElementById(m[0],b).text("").hide()})}),"captions"===c?this.prefCaptions&&1===this.prefCaptions\|\|(w=1<this.captions.length?this.tt.captions:this.tt.showCaptions,m.addClass("buttonOff").attr("title",w)):"descriptions"===c&&(this.prefDesc&&1===this.prefDesc\|\|m.addClass("buttonOff").attr("title",this.tt.turnOnDescriptions)),n.append(m),"play"===c?this.$playpauseButton=m:"previous"==c?(this.$prevButton=m,"previous"==this.buttonWithFocus&&(this.$prevButton.focus(),this.buttonWithFocus=null)):"next"==c?(this.$nextButton=m,"next"==this.buttonWithFocus&&(this.$nextButton.focus(),this.buttonWithFocus=null)):"captions"===c?this.$ccButton=m:"sign"===c?(this.$signButton=m,this.$signWindow.is(":visible")\|\|this.$signButton.addClass("buttonOff")):"descriptions"===c?this.$descButton=m:"mute"===c?this.$muteButton=m:"transcript"===c?(this.$transcriptButton=m,this.$transcriptDiv.is(":visible")\|\|this.$transcriptButton.addClass("buttonOff").attr("title",this.tt.showTranscript)):"fullscreen"===c?this.$fullscreenButton=m:"chapters"===c?this.$chaptersButton=m:"preferences"===c?this.$prefsButton=m:"volume"===c&&(this.$volumeButton=m)}"volume"===c&&this.addVolumeSlider(n)}i%2==1&&this.$controllerDiv.append('<div style="clear:both;"></div>')}for(var T in"video"===this.mediaType&&(void 0!==this.$captionsDiv&&this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv)),this.controls=[],t)t.hasOwnProperty(T)&&(this.controls=this.controls.concat(t[T]));this.refreshControls("init")},AblePlayer.prototype.useSvg=function(){var t,e,g=Object.create(null),f=function(){clearTimeout(e),e=setTimeout(t,100)},m=function(){},v="http://www.w3.org/1999/xlink";t=function(){var t,e,i,s,a,n,r,o,l,h=0;if(window.XMLHttpRequest&&(a=void 0!==(a=new XMLHttpRequest).withCredentials?XMLHttpRequest:XDomainRequest\|\|void 0),void 0!==a){for(m(),o=document.getElementsByTagName("use"),s=0;s<o.length;s+=1){try{e=o[s].getBoundingClientRect()}catch(t){e=!1}t=(r=o[s].getAttributeNS(v,"href").split("#"))[0],i=r[1],n=e&&0===e.left&&0===e.right&&0===e.top&&0===e.bottom,e&&0===e.width&&0===e.height&&!n?t.length&&(!0!==(l=g[t])&&setTimeout(c({useEl:o[s],base:t,hash:i}),0),void 0===l&&(l=new a,(g[t]=l).onload=u(l),l.onerror=d(l),l.ontimeout=d(l),l.open("GET",t),l.send(),h+=1)):n\|\|(void 0===g[t]?g[t]=!0:g[t].onload&&(g[t].abort(),g[t].onload=void 0,g[t]=!0))}o="",h+=1,p()}function p(){0===(h-=1)&&function(){var t;window.addEventListener("resize",f,!1),window.addEventListener("orientationchange",f,!1),m=window.MutationObserver?((t=new MutationObserver(f)).observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}),function(){try{t.disconnect(),window.removeEventListener("resize",f,!1),window.removeEventListener("orientationchange",f,!1)}catch(t){}}):(document.documentElement.addEventListener("DOMSubtreeModified",f,!1),function(){document.documentElement.removeEventListener("DOMSubtreeModified",f,!1),window.removeEventListener("resize",f,!1),window.removeEventListener("orientationchange",f,!1)})}()}function c(t){return function(){!0!==g[t.base]&&t.useEl.setAttributeNS(v,"xlink:href","#"+t.hash)}}function u(s){return function(){var t,e=document.body,i=document.createElement("x");s.onload=null,i.innerHTML=s.responseText,(t=i.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",e.insertBefore(t,e.firstChild)),p()}}function d(t){return function(){t.onerror=null,t.ontimeout=null,p()}}}},AblePlayer.prototype.cuePlaylistItem=function(t){var e,i,s,a,n,r,o=this;i=this.player,this.initializing\|\|this.playerCreated&&this.deletePlayer(),e=this.$playlist.eq(t),"youtube"===(s=this.hasAttr(e,"data-youtube-id")?(this.youTubeId=e.attr("data-youtube-id"),"youtube"):"html5")?"html5"===i&&(this.playing&&this.pauseMedia(),this.$media.hide()):(this.youTubeId=!1,"youtube"===i&&this.$media.show()),this.player=s,this.swappingSrc=!0,this.hasAttr(e,"data-poster")&&this.$media.attr("poster",e.attr("data-poster")),this.hasAttr(e,"data-width")&&this.$media.attr("width",e.attr("data-width")),this.hasAttr(e,"data-height")&&this.$media.attr("height",e.attr("data-height")),this.hasAttr(e,"data-youtube-desc-id")&&this.$media.attr("data-youtube-desc-id",e.attr("data-youtube-desc-id")),this.youTubeId&&this.$media.attr("data-youtube-id",e.attr("data-youtube-id"));var l=e.children("span.able-source");l.length&&l.each(function(){if(o.hasAttr($(this),"data-src")){var t=$("<source>",{src:$(this).attr("data-src")});o.hasAttr($(this),"data-type")&&t.attr("type",$(this).attr("data-type")),o.hasAttr($(this),"data-desc-src")&&t.attr("data-desc-src",$(this).attr("data-desc-src")),o.hasAttr($(this),"data-sign-src")&&t.attr("data-sign-src",$(this).attr("data-sign-src")),o.$media.append(t)}});var h=e.children("span.able-track");h.length&&h.each(function(){if(o.hasAttr($(this),"data-src")&&o.hasAttr($(this),"data-kind")&&o.hasAttr($(this),"data-srclang")){var t=$("<track>",{src:$(this).attr("data-src"),kind:$(this).attr("data-kind"),srclang:$(this).attr("data-srclang")});o.hasAttr($(this),"data-label")&&t.attr("label",$(this).attr("data-label")),o.$media.append(t)}}),a=e.text(),this.hasAttr(e,"lang")&&(n=e.attr("lang")),this.$sources=this.$media.find("source"),this.recreatePlayer(),this.$playlist.removeClass("able-current"),this.$playlist.eq(t).addClass("able-current"),!0===this.showNowPlaying&&void 0!==this.$nowPlayingDiv&&(r=$("<span>"),void 0!==n&&r.attr("lang",n),r.html("<span>"+this.tt.selectedTrack+":</span>"+a),this.$nowPlayingDiv.html(r)),this.initializing?this.swappingSrc=!1:(this.swappingSrc=!0,"html5"===this.player?this.media.load():"youtube"===this.player&&(this.okToPlay=!0))},AblePlayer.prototype.deletePlayer=function(){"youtube"==this.player&&this.$mediaContainer.find("iframe").remove();this.$media.removeAttr("poster width height"),this.$media.empty(),this.$controllerDiv.empty(),this.$elapsedTimeContainer.empty().text("0:00"),this.$durationContainer.empty(),this.$signWindow&&this.$signWindow.remove(),this.$transcriptArea&&this.$transcriptArea.remove(),$(".able-modal-dialog").remove(),this.hasCaptions=!1,this.hasChapters=!1,this.captionsPopup=null,this.chaptersPopup=null},AblePlayer.prototype.getButtonTitle=function(t){return"playpause"===t?this.tt.play:"play"===t?this.tt.play:"pause"===t?this.tt.pause:"restart"===t?this.tt.restart:"previous"===t?this.tt.prevTrack:"next"===t?this.tt.nextTrack:"rewind"===t?this.tt.rewind:"forward"===t?this.tt.forward:"captions"===t?1<this.captions.length?this.tt.captions:this.captionsOn?this.tt.hideCaptions:this.tt.showCaptions:"descriptions"===t?this.descOn?this.tt.turnOffDescriptions:this.tt.turnOnDescriptions:"transcript"===t?this.$transcriptDiv.is(":visible")?this.tt.hideTranscript:this.tt.showTranscript:"chapters"===t?this.tt.chapters:"sign"===t?this.tt.sign:"volume"===t?this.tt.volume:"faster"===t?this.tt.faster:"slower"===t?this.tt.slower:"preferences"===t?this.tt.preferences:"help"!==t?"fullscreen"===t?this.fullscreen?this.tt.exitFullScreen:this.tt.enterFullScreen:(this.debug,t.charAt(0).toUpperCase()+t.slice(1)):void 0}}(jQuery),function(c){AblePlayer.prototype.setupTracks=function(){var l,a,t,n,r,o,h,p;return l=this,t=(a=new c.Deferred).promise(),n=[],this.captions=[],this.descriptions=[],this.chapters=[],this.meta=[],c("#able-vts").length?(this.vtsTracks=[],this.hasVts=!0):this.hasVts=!1,this.getTracks().then(function(){for(h=l.tracks,o=0;o<h.length;o++){var t=(p=h[o]).kind,e=p.language,i=p.label;if(p.src){var s=p.src;r=l.loadTextObject(s),n.push(r.catch(function(t){})),r.then(function(a,n){a.src;var r=a.language,o=a.label;return function(t,e){var i=e,s=l.parseWebVTT(t,i).cues;l.hasVts&&l.setupVtsTracks(n,r,o,t,i),"captions"===n\|\|"subtitles"===n?l.setupCaptions(a,r,o,s):"descriptions"===n?l.setupDescriptions(a,s,r):"chapters"===n?l.setupChapters(a,s,r):"metadata"===n&&l.setupMetadata(a,s)}}(p,t))}else(l.usingYouTubeCaptions\|\|l.usingVimeoCaptions)&&l.setupCaptions(p,e,i)}c.when.apply(c,n).then(function(){a.resolve()})}),t},AblePlayer.prototype.getTracks=function(){var t,e,i,s,a,n,r,o,l,h;if(t=this,i=(e=new c.Deferred).promise(),this.$tracks=this.$media.find("track"),this.tracks=[],s=[],this.captions=[],this.$tracks.length&&this.$tracks.each(function(){a=c(this).attr("srclang")?c(this).attr("srclang"):t.lang,n=c(this).attr("label")?c(this).attr("label"):t.getLanguageName(a),(r=!!c(this).attr("default")\|\|a===t.lang)&&(t.captionLang=a),t.tracks.push({kind:c(this).attr("kind"),src:c(this).attr("src"),language:a,label:n,def:r}),"captions"!==c(this).attr("kind")&&"subtitles"!=c(this).attr("kind")\|\|s.push({kind:c(this).attr("kind"),src:c(this).attr("src"),language:a,label:n,def:r})}),s.length){for(this.usingYouTubeCaptions=!1,this.usingVimeoCaptions=!1,o=0;o<s.length;o++)if(0===this.captions.length)this.captions.push({language:s[o].language,label:s[o].label,def:s[o].def});else{for(h=!1,l=0;l<this.captions.length;l++)if(s[o].label.toLowerCase()<this.captions[l].label.toLowerCase()){this.captions.splice(l,0,{language:s[o].language,label:s[o].label,def:s[o].def}),h=!0;break}h\|\|this.captions.push({language:s[o].language,label:s[o].label,def:s[o].def})}e.resolve()}else"youtube"===this.player?this.getYouTubeCaptionTracks(this.youTubeId).then(function(){t.usingYouTubeCaptions=!0,e.resolve()}):"vimeo"===this.player?this.getVimeoCaptionTracks().then(function(){t.usingVimeoCaptions=!0,e.resolve()}):(this.hasCaptions=!1,e.resolve());return i},AblePlayer.prototype.setupCaptions=function(t,e,i,s){var a;if(void 0===s&&(s=null),this.captions.length?(this.hasCaptions=!0,this.currentCaption=-1,1===this.prefCaptions?this.captionsOn=!0:this.captionsOn=!1):this.hasCaptions=!1,this.$media.find("track").removeAttr("default"),"video"===this.mediaType){for(this.usingYouTubeCaptions\|\|this.usingVimeoCaptions\|\|this.$captionsDiv\|\|(this.$captionsDiv=c("<div>",{class:"able-captions"}),this.$captionsWrapper=c("<div>",{class:"able-captions-wrapper","aria-hidden":"true"}).hide(),"below"===this.prefCaptionsPosition?this.$captionsWrapper.addClass("able-captions-below"):this.$captionsWrapper.addClass("able-captions-overlay"),this.$captionsWrapper.append(this.$captionsDiv),this.$vidcapContainer.append(this.$captionsWrapper)),a=0;a<this.captions.length;a++)this.captions[a].language===e&&(this.captions[a].cues=s);for(a=0;a<this.tracks.length;a++)this.tracks[a].language===e&&(this.tracks[a].cues=s)}},AblePlayer.prototype.setupDescriptions=function(t,e,i){this.hasClosedDesc=!0,this.currentDescription=-1,this.descriptions.push({cues:e,language:i})},AblePlayer.prototype.setupChapters=function(t,e,i){this.hasChapters=!0,this.chapters.push({cues:e,language:i})},AblePlayer.prototype.setupMetadata=function(t,e){"text"===this.metaType?this.metaDiv&&c("#"+this.metaDiv)&&(this.$metaDiv=c("#"+this.metaDiv),this.hasMeta=!0,this.meta=e):"selector"===this.metaType&&(this.hasMeta=!0,this.visibleSelectors=[],this.meta=e)},AblePlayer.prototype.loadTextObject=function(s){var a,t,n,r;return t=(a=new c.Deferred).promise(),n=this,(r=c("<div>",{style:"display:none"})).load(s,function(t,e,i){"error"===e?(n.debug,a.reject(s)):a.resolve(s,t),r.remove()}),t}}(jQuery),function(h){AblePlayer.prototype.initYouTubePlayer=function(){var t,e,i,s;return t=this,i=(e=new h.Deferred).promise(),s=this.youTubeDescId&&this.prefDesc?this.youTubeDescId:this.youTubeId,this.activeYouTubeId=s,AblePlayer.youTubeIframeAPIReady?this.finalizeYoutubeInit().then(function(){e.resolve()}):(AblePlayer.loadingYouTubeIframeAPI\|\|h.getScript("https://www.youtube.com/iframe_api").fail(function(){e.fail()}),h("body").on("youTubeIframeAPIReady",function(){t.finalizeYoutubeInit().then(function(){e.resolve()})})),i},AblePlayer.prototype.finalizeYoutubeInit=function(){var e,t,i,s,a,n;return t=(e=new h.Deferred).promise(),s=(i=this).mediaId+"_youtube",this.$mediaContainer.prepend(h("<div>").attr("id",s)),1,(a=this.getYouTubeDimensions(this.activeYouTubeId,s))?(this.ytWidth=a[0],this.ytHeight=a[1],this.aspectRatio=i.ytWidth/i.ytHeight):(this.ytWidth=null,this.ytHeight=null),n=this.okToPlay?1:0,void 0===this.captionLang&&(this.captionLang=this.lang),this.youTubePlayer=new YT.Player(s,{videoId:this.activeYouTubeId,host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",width:this.ytWidth,height:this.ytHeight,playerVars:{autoplay:n,enablejsapi:1,disableKb:1,playsinline:this.playsInline,start:this.startTime,controls:0,cc_load_policy:1,cc_lang_pref:this.captionLang,hl:this.lang,modestbranding:1,rel:0,iv_load_policy:3},events:{onReady:function(){i.swappingSrc&&(i.swappingSrc=!1,i.cueingPlaylistItem=!1,i.playing&&i.playMedia()),i.userClickedPlaylist&&(i.userClickedPlaylist=!1),void 0===i.aspectRatio&&i.resizeYouTubePlayer(i.activeYouTubeId,s),e.resolve()},onError:function(t){e.fail()},onStateChange:function(t){i.getPlayerState().then(function(t){"playing"===t?(i.playing=!0,i.startedPlaying=!0,i.paused=!1):"ended"==t?i.onMediaComplete():(i.playing=!1,i.paused=!0),i.stoppingYouTube&&"paused"===t&&(void 0!==i.$posterImg&&i.$posterImg.show(),i.stoppingYouTube=!1,i.seeking=!1,i.playing=!1,i.paused=!0)}),"youtube"!==i.player\|\|i.usingYouTubeCaptions\|\|i.youTubePlayer.getOptions("captions")&&i.youTubePlayer.unloadModule("captions")},onPlaybackQualityChange:function(){}}}),this.injectPoster(this.$mediaContainer,"youtube"),this.hasPlaylist\|\|this.$media.remove(),t},AblePlayer.prototype.getYouTubeDimensions=function(t){var e,i,s,a;return e=[],void 0!==this.playerMaxWidth?(e[0]=this.playerMaxWidth,void 0!==this.playerMaxHeight&&(e[1]=this.playerMaxHeight),e):void 0!==h("#"+t)&&(s=(i=h("#"+t)).width(),a=i.height(),0<s&&0<a)&&(e[0]=s,e[1]=a,e)},AblePlayer.prototype.resizeYouTubePlayer=function(t,e){var i,s,a;void 0!==this.aspectRatio?this.restoringAfterFullScreen?(this.youTubePlayer&&this.youTubePlayer.setSize(this.ytWidth,this.ytHeight),this.restoringAfterFullScreen=!1):(s=this.$ableWrapper.parent().width(),a=Math.round(s/this.aspectRatio),this.$ableWrapper.css({"max-width":s+"px",width:""}),this.youTubePlayer.setSize(s,a),this.fullscreen?this.youTubePlayer.setSize(s,a):this.youTubePlayer.setSize(this.ytWidth,this.ytHeight)):(i=this.getYouTubeDimensions(e))&&(s=i[0],a=i[1],0<s&&0<a&&(this.aspectRatio=s/a,this.ytWidth=s,this.ytHeight=a,s!==this.$ableWrapper.width()&&(s=this.$ableWrapper.width(),a=Math.round(s/this.aspectRatio),this.youTubePlayer&&this.youTubePlayer.setSize(s,a))))},AblePlayer.prototype.getYouTubeCaptionTracks=function(t){var e,i,s,a,n,r,o=new h.Deferred,l=o.promise();return(e=this).youTubePlayer.getOption("captions","tracklist")\|\|(this.youTubePlayer.addEventListener("onApiChange",function(t){if(e.loadingYouTubeCaptions){for(i=e.youTubePlayer.getOption("captions","tracklist"),e.youTubePlayer.stopVideo(),s=0;s<i.length;s++)a=i[s].languageCode,n=i[s].languageName,r=!1,void 0!==e.captionLang?a===e.captionLang&&(r=!0):void 0!==e.lang&&a===e.lang&&(r=!0),e.tracks.push({kind:"captions",language:a,label:n,def:r});e.captions=e.tracks,e.hasCaptions=!0,e.setupPopups("captions"),e.loadingYouTubeCaptions=!1}e.captionLangPending&&(e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLangPending}),e.captionLangPending=null),void 0!==e.prefCaptionsSize&&e.youTubePlayer.setOption("captions","fontSize",e.translatePrefs("size",e.prefCaptionsSize,"youtube")),o.resolve()}),this.loadingYouTubeCaptions=!0,this.youTubePlayer.playVideo()),l},AblePlayer.prototype.getYouTubeTimedTextUrl=function(t,e,i){var s="https://www.youtube.com/api/timedtext?fmt=vtt";return s+="&v="+t,s+="&lang="+i,""!==e&&(s+="&name="+e),s},AblePlayer.prototype.getYouTubeCaptionCues=function(t){var e,i=(e=new h.Deferred).promise();return this.tracks=[],this.tracks.push({kind:"captions",src:"some_file.vtt",language:"en",label:"Fake English captions"}),e.resolve(),i},AblePlayer.prototype.getYouTubePosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+t;return"120"==e?i+"/default.jpg":"320"==e?i+"/hqdefault.jpg":"480"==e?i+"/hqdefault.jpg":"640"==e&&i+"/sddefault.jpg"}}(jQuery),function(d){window.AccessibleSlider=function(t,e,i,s,a,n,r,o,l,h,p){var c,u;(c=this).position=0,this.tracking=!1,this.trackDevice=null,this.keyTrackPosition=0,this.lastTrackPosition=0,this.nextStep=1,this.inertiaCount=0,this.bodyDiv=d(e),h&&(this.loadedDiv=d("<div></div>"),this.playedDiv=d("<div></div>")),this.seekHead=d("<div>",{"aria-orientation":i,class:"able-"+l+"-head"}),"visible"===p?this.seekHead.attr("tabindex","0"):this.seekHead.attr("tabindex","-1"),this.seekHead.attr({role:"slider","aria-label":o,"aria-valuemin":a,"aria-valuemax":n}),this.timeTooltip=d("<div>"),this.bodyDiv.append(this.timeTooltip),this.timeTooltip.attr("role","tooltip"),this.timeTooltip.addClass("able-tooltip"),this.timeTooltip.hide(),this.bodyDiv.append(this.loadedDiv),this.bodyDiv.append(this.playedDiv),this.bodyDiv.append(this.seekHead),this.bodyDiv.wrap("<div></div>"),this.wrapperDiv=this.bodyDiv.parent(),"legacy"===this.skin&&("horizontal"===i?(this.wrapperDiv.width(s),this.loadedDiv.width(0)):(this.wrapperDiv.height(s),this.loadedDiv.height(0))),this.wrapperDiv.addClass("able-"+l+"-wrapper"),h&&(this.loadedDiv.addClass("able-"+l+"-loaded"),this.playedDiv.width(0),this.playedDiv.addClass("able-"+l+"-played"),this.setDuration(n)),this.seekHead.on("mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend",function(t){u=c.pointerEventToXY(t),"mouseenter"===t.type\|\|"focus"===t.type?c.overHead=!0:"mouseleave"===t.type\|\|"blur"===t.type?(c.overHead=!1,!c.overBody&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x))):"mousemove"===t.type\|\|"touchmove"===t.type?c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x):"mousedown"===t.type\|\|"touchstart"===t.type?(c.startTracking("mouse",c.pageXToPosition(c.seekHead.offset()+c.seekHead.width()/2)),c.bodyDiv.is(":focus")\|\|c.bodyDiv.focus(),t.preventDefault()):"mouseup"!==t.type&&"touchend"!==t.type\|\|c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x)),"mousemove"!==t.type&&"mousedown"!==t.type&&"mouseup"!==t.type&&"touchstart"!==t.type&&"touchend"!==t.type&&c.refreshTooltip()}),this.bodyDiv.on("mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend",function(t){if(u=c.pointerEventToXY(t),"mouseenter"===t.type)c.overBody=!0;else if("mouseleave"===t.type)c.overBody=!1,c.overBodyMousePos=null,!c.overHead&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("mousemove"===t.type\|\|"touchmove"===t.type)c.overBodyMousePos={x:u.x,y:u.y},c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x);else if("mousedown"===t.type\|\|"touchstart"===t.type)c.startTracking("mouse",c.pageXToPosition(u.x)),c.trackHeadAtPageX(u.x),c.seekHead.is(":focus")\|\|c.seekHead.focus(),t.preventDefault();else if("mouseup"===t.type\|\|"touchend"===t.type)c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("keydown"===t.type){if(36===t.which)c.trackImmediatelyTo(0);else if(35===t.which)c.trackImmediatelyTo(c.duration);else if(37===t.which\|\|40===t.which)c.arrowKeyDown(-1);else if(39===t.which\|\|38===t.which)c.arrowKeyDown(1);else if(33===t.which&&0<r)c.arrowKeyDown(r);else{if(!(34===t.which&&0<r))return;c.arrowKeyDown(-r)}t.preventDefault()}else"keyup"===t.type&&33<=t.which&&t.which<=40&&(c.tracking&&"keyboard"===c.trackDevice&&c.stopTracking(c.keyTrackPosition),t.preventDefault());"mouseup"!==t.type&&"keydown"!==t.type&&"keydown"!==t.type&&c.refreshTooltip()})},AccessibleSlider.prototype.arrowKeyDown=function(t){this.tracking&&"keyboard"===this.trackDevice?(this.keyTrackPosition=this.boundPos(this.keyTrackPosition+this.nextStept),this.inertiaCount+=1,20===this.inertiaCount&&(this.inertiaCount=0,this.nextStep=2)):(this.nextStep=1,this.inertiaCount=0,this.keyTrackPosition=this.boundPos(this.position+this.nextStept),this.startTracking("keyboard",this.keyTrackPosition)),this.trackHeadAtPosition(this.keyTrackPosition)},AccessibleSlider.prototype.pageXToPosition=function(t){var e=t-this.bodyDiv.offset().left,i=this.duration(e/this.bodyDiv.width());return this.boundPos(i)},AccessibleSlider.prototype.boundPos=function(t){return Math.max(0,Math.min(t,this.duration))},AccessibleSlider.prototype.setDuration=function(t){t!==this.duration&&(this.duration=t,this.resetHeadLocation(),this.seekHead.attr("aria-valuemax",t))},AccessibleSlider.prototype.setWidth=function(t){this.wrapperDiv.width(t),this.resizeDivs(),this.resetHeadLocation()},AccessibleSlider.prototype.getWidth=function(){return this.wrapperDiv.width()},AccessibleSlider.prototype.resizeDivs=function(){this.playedDiv.width(this.bodyDiv.width()(this.position/this.duration)),this.loadedDiv.width(this.bodyDiv.width()this.buffered)},AccessibleSlider.prototype.resetHeadLocation=function(){var t=this.position/this.duration,e=this.bodyDiv.width()t;this.seekHead.css("left",e-this.seekHead.width()/2),this.tracking&&this.stopTracking(this.position)},AccessibleSlider.prototype.setPosition=function(t,e){this.position=t,this.resetHeadLocation(),this.refreshTooltip(),this.resizeDivs(),this.updateAriaValues(t,e)},AccessibleSlider.prototype.setBuffered=function(t){isNaN(t)\|\|(this.buffered=t,this.redrawDivs)},AccessibleSlider.prototype.startTracking=function(t,e){this.tracking\|\|(this.trackDevice=t,this.tracking=!0,this.bodyDiv.trigger("startTracking",[e]))},AccessibleSlider.prototype.stopTracking=function(t){this.trackDevice=null,this.tracking=!1,this.bodyDiv.trigger("stopTracking",[t]),this.setPosition(t,!0)},AccessibleSlider.prototype.trackHeadAtPageX=function(t){var e=this.pageXToPosition(t),i=t-this.bodyDiv.offset().left-this.seekHead.width()/2;i=Math.max(0,Math.min(i,this.bodyDiv.width()-this.seekHead.width())),this.lastTrackPosition=e,this.seekHead.css("left",i),this.reportTrackAtPosition(e)},AccessibleSlider.prototype.trackHeadAtPosition=function(t){var e=t/this.duration,i=this.bodyDiv.width()e;this.lastTrackPosition=t,this.seekHead.css("left",i-this.seekHead.width()/2),this.reportTrackAtPosition(t)},AccessibleSlider.prototype.reportTrackAtPosition=function(t){this.bodyDiv.trigger("tracking",[t]),this.updateAriaValues(t,!0)},AccessibleSlider.prototype.updateAriaValues=function(t,e){var i,s=Math.floor(t/3600),a=Math.floor(t%3600/60),n=Math.floor(t%60),r=1===a?"minute":"minutes",o=1===n?"second":"seconds";i=0<s?s+" "+(1===s?"hour":"hours")+", "+a+" "+r+", "+n+" "+o:0<a?a+" "+r+", "+n+" "+o:n+" "+o,this.liveAriaRegion\|\|(this.liveAriaRegion=d("<span>",{class:"able-offscreen","aria-live":"polite"}),this.wrapperDiv.append(this.liveAriaRegion)),e&&this.liveAriaRegion.text()!==i&&this.liveAriaRegion.text(i),this.seekHead.attr("aria-valuetext",i),this.seekHead.attr("aria-valuenow",Math.floor(t).toString())},AccessibleSlider.prototype.trackImmediatelyTo=function(t){this.startTracking("keyboard",t),this.trackHeadAtPosition(t),this.keyTrackPosition=t},AccessibleSlider.prototype.refreshTooltip=function(){this.overHead?(this.timeTooltip.show(),this.tracking?this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)):this.timeTooltip.text(this.positionToStr(this.position)),this.setTooltipPosition(this.seekHead.position().left+this.seekHead.width()/2)):this.overBody&&this.overBodyMousePos?(this.timeTooltip.show(),this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))),this.setTooltipPosition(this.overBodyMousePos.x-this.bodyDiv.offset().left)):this.timeTooltip.hide()},AccessibleSlider.prototype.setTooltipPosition=function(t){this.timeTooltip.css({left:t-this.timeTooltip.width()/2-10,bottom:this.seekHead.height()+10})},AccessibleSlider.prototype.positionToStr=function(t){var e=Math.floor(t/3600),i=Math.floor(t/60)%60,s=Math.floor(t%60);return s<10&&(s="0"+s),0<e?(i<10&&(i="0"+i),e+":"+i+":"+s):i+":"+s},AccessibleSlider.prototype.pointerEventToXY=function(t){var e={x:0,y:0};if("touchstart"==t.type\|\|"touchmove"==t.type\|\|"touchend"==t.type\|\|"touchcancel"==t.type){var i=t.originalEvent.touches[0]\|\|t.originalEvent.changedTouches[0];e.x=i.pageX,e.y=i.pageY}else"mousedown"!=t.type&&"mouseup"!=t.type&&"mousemove"!=t.type&&"mouseover"!=t.type&&"mouseout"!=t.type&&"mouseenter"!=t.type&&"mouseleave"!=t.type\|\|(e.x=t.pageX,e.y=t.pageY);return e}}(jQuery),function(r){AblePlayer.prototype.addVolumeSlider=function(t){var e,i,s,a,n;i=(e=this).mediaId+"-volume-slider",s=this.mediaId+"-volume-help",this.volumeTrackHeight=50,this.volumeHeadHeight=7,this.volumeTickHeight=this.volumeTrackHeight/10,this.$volumeSlider=r("<div>",{id:i,class:"able-volume-slider","aria-hidden":"true"}).hide(),this.$volumeSliderTooltip=r("<div>",{class:"able-tooltip",role:"tooltip"}).hide(),this.$volumeSliderTrack=r("<div>",{class:"able-volume-track"}),this.$volumeSliderTrackOn=r("<div>",{class:"able-volume-track able-volume-track-on"}),this.$volumeSliderHead=r("<div>",{class:"able-volume-head",role:"slider","aria-orientation":"vertical","aria-label":this.tt.volumeUpDown,"aria-valuemin":0,"aria-valuemax":10,"aria-valuenow":this.volume,tabindex:-1}),this.$volumeSliderTrack.append(this.$volumeSliderTrackOn,this.$volumeSliderHead),this.$volumeAlert=r("<div>",{class:"able-offscreen","aria-live":"assertive","aria-atomic":"true"}),n=parseInt(e.volume)/10100,this.$volumeHelp=r("<div>",{id:s,class:"able-volume-help"}).text(n+"%, "+this.tt.volumeHelp),this.$volumeButton.attr({"aria-describedby":s}),this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeSliderTrack,this.$volumeAlert,this.$volumeHelp),t.append(this.$volumeSlider),this.refreshVolumeSlider(this.volume),this.$volumeSliderHead.on("mousedown",function(t){t.preventDefault(),e.draggingVolume=!0,e.volumeHeadPositionTop=r(this).offset().top}),this.$mediaContainer.on("mouseover",function(t){"youtube"==e.player&&(e.draggingVolume=!1)}),r(document).on("mouseup",function(t){e.draggingVolume=!1}),r(document).on("mousemove",function(t){e.draggingVolume&&(t.pageX,a=t.pageY,e.moveVolumeHead(a))}),this.$volumeSliderHead.on("keydown",function(t){if(37===t.which\|\|40===t.which)e.handleVolume("down");else if(39===t.which\|\|38===t.which)e.handleVolume("up");else{if(27!==t.which&&13!==t.which&&9!==t.which)return;e.$volumeSlider.is(":visible")?(e.closingVolume=!0,e.hideVolumePopup()):e.closingVolume\|\|e.showVolumePopup()}t.preventDefault()})},AblePlayer.prototype.refreshVolumeSlider=function(t){var e,i,s,a,n;i=(e=t/10100)+"%",s=tthis.volumeTickHeight,n=(a=this.volumeTrackHeight-s)-this.volumeHeadHeight,this.$volumeSliderTrackOn&&this.$volumeSliderTrackOn.css({height:s+"px",top:a+"px"}),this.$volumeSliderHead&&(this.$volumeSliderHead.attr({"aria-valuenow":t,"aria-valuetext":i}),this.$volumeSliderHead.css({top:n+"px"})),this.$volumeAlert&&this.$volumeAlert.text(e+"%")},AblePlayer.prototype.refreshVolumeButton=function(t){var e,i,s,a,n,r;e=this.getVolumeName(t),i=t/10100,s=this.tt.volume+" "+i+"%","font"===this.iconType?(a="icon-volume-"+e,this.$volumeButton.find("span").first().removeClass().addClass(a),this.$volumeButton.find("span.able-clipped").text(s)):"image"===this.iconType?(n=this.imgPath+"volume-"+e+".png",this.$volumeButton.find("img").attr("src",n)):"svg"===this.iconType&&("mute"!==e&&(e="volume-"+e),r=this.getSvgData(e),this.$volumeButton.find("svg").attr("viewBox",r[0]),this.$volumeButton.find("path").attr("d",r[1]))},AblePlayer.prototype.moveVolumeHead=function(t){var e,i,s,a=this.volumeHeadPositionTop-t;if(Math.abs(a)>this.volumeTickHeight){if("up"==(e=0<a?"up":"down")&&10==this.volume)return;if("down"==e&&0==this.volume)return;i=Math.round(Math.abs(a)/this.volumeTickHeight),"up"==e?10<(s=this.volume+i)&&(s=10):(s=this.volume-i)<0&&(s=0),this.setVolume(s),this.refreshVolumeSlider(s),this.refreshVolumeButton(s),this.volumeHeadPositionTop=t}},AblePlayer.prototype.handleVolume=function(t){var e;void 0!==t?(49<=t&&t<=57?e=t-48:(e=this.getVolume(),"up"===t&&e<10?e+=1:"down"===t&&0<e&&(e-=1)),this.isMuted()&&0<e?this.setMute(!1):0===e?this.setMute(!0):(this.setVolume(e),this.refreshVolumeSlider(e),this.refreshVolumeButton(e))):this.$volumeSlider.is(":visible")?this.hideVolumePopup():this.closingVolume\|\|this.showVolumePopup()},AblePlayer.prototype.handleMute=function(){this.isMuted()?this.setMute(!1):this.setMute(!0)},AblePlayer.prototype.showVolumePopup=function(){this.closePopups(),this.$tooltipDiv.hide(),this.$volumeSlider.show().attr("aria-hidden","false"),this.$volumeButton.attr("aria-expanded","true"),this.$volumeSliderHead.attr("tabindex","0").focus()},AblePlayer.prototype.hideVolumePopup=function(){var t=this;this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeSliderHead.attr("tabindex","-1"),this.$volumeButton.attr("aria-expanded","false").focus(),setTimeout(function(){t.closingVolume=!1},1e3)},AblePlayer.prototype.isMuted=function(){return"html5"===this.player?this.media.muted:"jw"===this.player&&this.jwPlayer?this.jwPlayer.getMute():"youtube"===this.player?this.youTubePlayer.isMuted():void 0},AblePlayer.prototype.setMute=function(t){t?(this.lastVolume=this.volume,this.volume=0):void 0!==this.lastVolume&&(this.volume=this.lastVolume),"html5"===this.player?this.media.muted=t:"jw"===this.player&&this.jwPlayer?this.jwPlayer.setMute(t):"youtube"===this.player&&(t?this.youTubePlayer.mute():this.youTubePlayer.unMute()),this.refreshVolumeSlider(this.volume),this.refreshVolumeButton(this.volume)},AblePlayer.prototype.setVolume=function(t){"html5"===this.player?(this.media.volume=t/10,this.hasSignLanguage&&this.signVideo&&(this.signVideo.volume=0)):"youtube"===this.player?(this.youTubePlayer.setVolume(10t),this.volume=t):"vimeo"===this.player?this.vimeoPlayer.setVolume(t/10).then(function(){}):"jw"===this.player&&this.jwPlayer&&this.jwPlayer.setVolume(10t),this.lastVolume=t},AblePlayer.prototype.getVolume=function(t){return"html5"===this.player?10this.media.volume:"youtube"===this.player?this.youTubePlayer.getVolume()/10:"vimeo"===this.player?this.volume:"jw"===this.player&&this.jwPlayer?this.jwPlayer.getVolume()/10:void 0},AblePlayer.prototype.getVolumeName=function(t){return 0==t?"mute":10==t?"loud":t<5?"soft":"medium"}}(jQuery),function(d){var g="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]";window.AccessibleDialog=function(t,e,i,s,a,n,r,o,l){this.title=s,this.closeButtonLabel=n,this.focusedElementBeforeModal=e,this.escapeHook=l,this.baseId=d(t).attr("id")\|\|Math.floor(1e9Math.random()).toString();var h=this,p=t;if((this.modal=p).css({width:r\|\|"50%"}),p.addClass("able-modal-dialog"),!o){var c=d("<button>",{class:"modalCloseButton",title:h.closeButtonLabel,"aria-label":h.closeButtonLabel}).text("X");c.keydown(function(t){32===t.which&&h.hide()}).click(function(){h.hide()});var u=d("<h1></h1>");u.attr("id","modalTitle-"+this.baseId),u.css("text-align","center"),u.text(s),a.attr("id","modalDesc-"+this.baseId),p.attr({"aria-labelledby":"modalTitle-"+this.baseId,"aria-describedby":"modalDesc-"+this.baseId}),p.prepend(u),p.prepend(c)}p.attr({"aria-hidden":"true",role:i}),p.keydown(function(t){if(27===t.which)h.escapeHook?h.escapeHook(t,this):(h.hide(),t.preventDefault());else if(9===t.which){var e=p.find("").filter(g).filter(":visible");if(0===e.length)return;var i=d(":focus"),s=e.index(i);t.shiftKey?0===s&&(e.get(e.length-1).focus(),t.preventDefault()):s===e.length-1&&(e.get(0).focus(),t.preventDefault())}t.stopPropagation()}),d("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden")},AccessibleDialog.prototype.show=function(){if(!this.overlay){var t=d("<div></div>").attr({class:"able-modal-overlay",tabindex:"-1"});this.overlay=t,d("body").append(t),t.on("mousedown.accessibleModal",function(t){t.preventDefault()})}d("body > ").not(".able-modal-overlay").not(".able-modal-dialog").attr("aria-hidden","true"),this.overlay.css("display","block"),this.modal.css("display","block"),this.modal.attr({"aria-hidden":"false",tabindex:"-1"}),0===this.modal.find("").filter(g).filter(":visible").length&&this.focusedElementBeforeModal.blur();var e=this;setTimeout(function(){e.modal.find("button.modalCloseButton").first().focus()},300)},AccessibleDialog.prototype.hide=function(){this.overlay&&this.overlay.css("display","none"),this.modal.css("display","none"),this.modal.attr("aria-hidden","true"),d("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden"),this.focusedElementBeforeModal.focus()},AccessibleDialog.prototype.getInputs=function(){return!!this.modal&&this.modal.find("input")}}(jQuery),function(n){AblePlayer.prototype.getNextHeadingLevel=function(t){var e,i,s,a;return t.parents().each(function(){if(e=n(this).children(":header"),i=e.length)return s=e.eq(i-1).prop("tagName"),!1}),void 0===s?a=1:(a=parseInt(s[1]),6<(a+=1)&&(a=6)),a},AblePlayer.prototype.countProperties=function(t){var e,i;for(i in e=0,t)t.hasOwnProperty(i)&&++e;return e},AblePlayer.prototype.formatSecondsAsColonTime=function(t,e){var i,s,a,n,r,o,l;if(e)if(2===(n=t.toString().split(".")).length){if((r=n[1]).length<3)for(o=3-r.length,l=1;l<=o;l++)r+="0"}else r="000";return i=Math.floor(t/3600),s=Math.floor(t/60)%60,(a=Math.floor(t%60))<10&&(a="0"+a),0<i?(s<10&&(s="0"+s),e?i+":"+s+":"+a+"."+r:i+":"+s+":"+a):e?(i<1?i="00":i<10&&(i="0"+i),s<1?s="00":s<10&&(s="0"+s),i+":"+s+":"+a+"."+r):s+":"+a},AblePlayer.prototype.getSecondsFromColonTime=function(t){var e;return 3===(e=t.split(":")).length?3600parseInt(e[0])+60parseInt(e[1])+parseFloat(e[2]):2===e.length?60parseInt(e[0])+parseFloat(e[1]):1===e.length?parseFloat(e[0]):void 0},AblePlayer.prototype.capitalizeFirstLetter=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},AblePlayer.prototype.roundDown=function(t,e){return Number(Math.floor(t+"e"+e)+"e-"+e)},AblePlayer.prototype.hasAttr=function(t,e){var i=t.attr(e);return void 0!==i&&!1!==i},Number.isInteger=Number.isInteger\|\|function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t}}(jQuery),function(p){AblePlayer.prototype.initDescription=function(){this.refreshingDesc?this.prevDescFormat=this.useDescFormat:(this.descFile=this.$sources.first().attr("data-desc-src"),void 0!==this.descFile?this.hasOpenDesc=!0:this.youTubeDescId\|\|this.vimeoDescId?this.hasOpenDesc=!0:this.hasOpenDesc=!1),this.prefDesc?this.hasOpenDesc&&this.hasClosedDesc?(this.useDescFormat=this.prefDescFormat,this.descOn=!0):this.hasOpenDesc?(this.useDescFormat="video",this.descOn=!0):this.hasClosedDesc&&(this.useDescFormat="text",this.descOn=!0):(this.useDescFormat=null,this.descOn=!1),"video"===this.useDescFormat&&(this.exposeTextDescriptions=!1),this.descOn?("video"===this.useDescFormat&&(this.usingDescribedVersion()\|\|this.swapDescription()),this.hasClosedDesc&&(this.prefDescVisible?(this.$descDiv.show(),this.$descDiv.removeClass("able-clipped")):this.$descDiv.addClass("able-clipped"),this.swappingSrc\|\|this.showDescription(this.elapsed))):"video"===this.prevDescFormat?this.usingDescribedVersion()&&this.swapDescription():"text"===this.prevDescFormat&&(this.$descDiv.hide(),this.$descDiv.removeClass("able-clipped")),this.refreshingDesc=!1},AblePlayer.prototype.usingDescribedVersion=function(){return"youtube"===this.player?this.activeYouTubeId===this.youTubeDescId:"vimeo"===this.player?this.activeVimeoId===this.vimeoDescId:this.$sources.first().attr("data-desc-src")===this.$sources.first().attr("src")},AblePlayer.prototype.getBrowserVoices=function(){var t,e,i;if(window.speechSynthesis&&(this.synth=window.speechSynthesis,t=this.synth.getVoices(),e=this.getDescriptionLangs(),0<t.length)){this.descVoices=[];for(var s=0;s<t.length;s++)(i=t[s].lang.substr(0,2).toLowerCase())!==this.lang.substr(0,2).toLowerCase()&&-1===e.indexOf(i)\|\|this.descVoices.push(t[s]);this.descVoices.length\|\|(this.descVoices=t)}return!1},AblePlayer.prototype.getDescriptionLangs=function(){var t=[];if(this.tracks)for(var e=0;e<this.tracks.length;e++)"descriptions"===this.tracks[e].kind&&t.push(this.tracks[e].language.substr(0,2).toLowerCase());return t},AblePlayer.prototype.updateDescriptionVoice=function(){var t,e;if(this.descVoices?this.$voiceSelectField\|\|this.rebuildDescPrefsForm():(this.getBrowserVoices(),this.descVoices&&this.rebuildDescPrefsForm()),e=this.selectedDescriptions.language,this.synth&&0<(t=this.synth.getVoices()).length)for(var i=0;i<t.length;i++)if(t[i].lang.substr(0,2).toLowerCase()===e.substr(0,2).toLowerCase()){this.prefDescVoice=t[i].name,this.$voiceSelectField&&this.$voiceSelectField.val(this.prefDescVoice);break}},AblePlayer.prototype.swapDescription=function(){var t,e,i,s;if((t=this).swapTime=this.elapsed,this.descOn?this.showAlert(this.tt.alertDescribedVersion):this.showAlert(this.tt.alertNonDescribedVersion),"html5"===this.player){if(this.usingDescribedVersion()){for(e=0;e<this.$sources.length;e++)i=this.$sources[e].getAttribute("data-orig-src"),this.$sources[e].getAttribute("type"),i&&this.$sources[e].setAttribute("src",i);this.swappingSrc=!0}else{for(e=0;e<this.$sources.length;e++)i=this.$sources[e].getAttribute("src"),s=this.$sources[e].getAttribute("data-desc-src"),this.$sources[e].getAttribute("type"),s&&(this.$sources[e].setAttribute("src",s),this.$sources[e].setAttribute("data-orig-src",i));this.swappingSrc=!0}"html5"===this.player&&this.media.load()}else"youtube"===this.player?(this.usingDescribedVersion()?(this.activeYouTubeId=this.youTubeId,this.showAlert(this.tt.alertNonDescribedVersion)):(this.activeYouTubeId=this.youTubeDescId,this.showAlert(this.tt.alertDescribedVersion)),void 0!==this.youTubePlayer&&(t.playing?t.youTubePlayer.loadVideoById(t.activeYouTubeId,t.swapTime):t.youTubePlayer.cueVideoById(t.activeYouTubeId,t.swapTime))):"vimeo"===this.player&&(this.usingDescribedVersion()?(this.activeVimeoId=this.vimeoId,this.showAlert(this.tt.alertNonDescribedVersion)):(this.activeVimeoId=this.vimeoDescId,this.showAlert(this.tt.alertDescribedVersion)),this.vimeoPlayer.loadVideo(this.activeVimeoId).then(function(){t.playing?t.vimeoPlayer.setCurrentTime(t.swapTime):t.vimeoPlayer.pause()}))},AblePlayer.prototype.showDescription=function(t){if(this.exposeTextDescriptions&&!this.swappingSrc&&this.descOn){var e,i,s,a,n=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e.push(n(t.children[i]));return e.join("")};for(e=this.selectedDescriptions?this.selectedDescriptions.cues:1<=this.descriptions.length?this.descriptions[0].cues:[],i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s?this.currentDescription!==s&&(this.$status.removeAttr("aria-live"),a=n(e[s].components),window.speechSynthesis?(this.announceDescriptionText("description",a),this.prefDescVisible&&this.$descDiv.html(a).removeAttr("aria-live aria-atomic")):this.$descDiv.html(a),this.prefDescPause&&this.exposeTextDescriptions&&(this.pauseMedia(),this.pausedForDescription=!0),this.currentDescription=s):(this.$descDiv.html(""),this.currentDescription=-1,this.$status.attr("aria-live","polite"))}},AblePlayer.prototype.announceDescriptionText=function(e,t){var i,s,a,n,r,o,l,h;if((i=this).descVoices\|\|this.getBrowserVoices(),l="sample"===e?(s=p("#"+this.mediaId+"_prefDescVoice").val(),r=p("#"+this.mediaId+"_prefDescPitch").val(),o=p("#"+this.mediaId+"_prefDescRate").val(),p("#"+this.mediaId+"_prefDescVolume").val()):(s=this.prefDescVoice,r=this.prefDescPitch,o=this.prefDescRate,this.prefDescVolume),this.descVoices&&0<this.descVoices.length){if(s)for(a=0;a<this.descVoices.length;a++)if(this.descVoices[a].name==s){n=this.descVoices[a];break}void 0===n&&(n=this.descVoices[0]),(h=new SpeechSynthesisUtterance).voice=n,h.voiceURI="native",h.volume=l,h.rate=o,h.pitch=r,h.text=t,h.lang=this.lang,h.onend=function(t){"description"===e&&i.prefDescPause&&i.pausedForDescription&&i.exposeTextDescriptions&&(i.playMedia(),this.pausedForDescription=!1)},h.onerror=function(t){},this.synth.speak(h)}}}(jQuery),jQuery,AblePlayer.prototype.getUserAgent=function(){this.userAgent={},this.userAgent.browser={},/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)?(this.userAgent.browser.name="Firefox",this.userAgent.browser.version=RegExp.$1):/MSIE (\d+\.\d+);/.test(navigator.userAgent)?(this.userAgent.browser.name="Internet Explorer",this.userAgent.browser.version=RegExp.$1):/Trident.rv[ :](\d+\.\d+)/.test(navigator.userAgent)?(this.userAgent.browser.name="Internet Explorer",this.userAgent.browser.version=RegExp.$1):/Edge[\/\s](\d+\.\d+)/.test(navigator.userAgent)?(this.userAgent.browser.name="Edge",this.userAgent.browser.version=RegExp.$1):/OPR\/(\d+\.\d+)/i.test(navigator.userAgent)?(this.userAgent.browser.name="Opera",this.userAgent.browser.version=RegExp.$1):/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor)?(this.userAgent.browser.name="Chrome",/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)&&(this.userAgent.browser.version=RegExp.$1)):/Safari/.test(navigator.userAgent)&&/Apple Computer/.test(navigator.vendor)?(this.userAgent.browser.name="Safari",/Version[\/\s](\d+\.\d+)/.test(navigator.userAgent)&&(this.userAgent.browser.version=RegExp.$1)):(this.userAgent.browser.name="Unknown",this.userAgent.browser.version="Unknown"),-1!=window.navigator.userAgent.indexOf("Windows NT 6.2")?this.userAgent.os="Windows 8":-1!=window.navigator.userAgent.indexOf("Windows NT 6.1")?this.userAgent.os="Windows 7":-1!=window.navigator.userAgent.indexOf("Windows NT 6.0")?this.userAgent.os="Windows Vista":-1!=window.navigator.userAgent.indexOf("Windows NT 5.1")?this.userAgent.os="Windows XP":-1!=window.navigator.userAgent.indexOf("Windows NT 5.0")?this.userAgent.os="Windows 2000":-1!=window.navigator.userAgent.indexOf("Mac")?this.userAgent.os="Mac/iOS":-1!=window.navigator.userAgent.indexOf("X11")?this.userAgent.os="UNIX":-1!=window.navigator.userAgent.indexOf("Linux")&&(this.userAgent.os="Linux"),this.debug},AblePlayer.prototype.isUserAgent=function(t){var e=navigator.userAgent.toLowerCase();return this.debug,-1!==e.indexOf(t.toLowerCase())},AblePlayer.prototype.isIOS=function(t){var e;return e=navigator.userAgent.toLowerCase(),!!/ipad\|iphone\|ipod/.exec(e)&&(void 0===t\|\|-1!==e.indexOf("os "+t))},AblePlayer.prototype.browserSupportsVolume=function(){var t,e;return t=navigator.userAgent.toLowerCase(),!(e=/ipad\|iphone\|ipod\|android\|blackberry\|windows ce\|windows phone\|webos\|playbook/.exec(t))\|\|!("android"!==e[0]\|\|!/firefox/.test(t))},AblePlayer.prototype.nativeFullscreenSupported=function(){return document.fullscreenEnabled\|\|document.webkitFullscreenEnabled\|\|document.mozFullScreenEnabled\|\|document.msFullscreenEnabled},function(v){AblePlayer.prototype.seekTo=function(t){var e,i=this;(this.seekFromTime=this.media.currentTime,this.seekToTime=t,this.seeking=!0,this.liveUpdatePending=!0,"html5"===this.player)?(this.startTime=t,0<(e=this.media.seekable).length&&this.startTime>=e.start(0)&&this.startTime<=e.end(0)&&(this.media.currentTime=this.startTime,this.hasSignLanguage&&this.signVideo&&(this.signVideo.currentTime=this.startTime))):"youtube"===this.player?(this.youTubePlayer.seekTo(t,!0),0<t&&void 0!==this.$posterImg&&this.$posterImg.hide()):"vimeo"===this.player&&this.vimeoPlayer.setCurrentTime(t).then(function(){i.elapsed=t,i.refreshControls("timeline")});this.refreshControls("timeline")},AblePlayer.prototype.getMediaTimes=function(t,e){var i,s,a,n;return n={},s=(i=new v.Deferred).promise(),a=this,void 0!==t&&void 0!==e?(n.duration=t,n.elapsed=e,i.resolve(n)):this.getDuration().then(function(t){n.duration=a.roundDown(t,6),a.getElapsed().then(function(t){n.elapsed=a.roundDown(t,6),i.resolve(n)})}),s},AblePlayer.prototype.getDuration=function(){var e,t,i;(t=(e=new v.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getDuration().then(function(t){void 0===t\|\|isNaN(t)\|\|-1===t?e.resolve(0):e.resolve(t)}):e.resolve(0):("html5"===this.player?i=this.media.duration:"youtube"===this.player&&(i=this.youTubePlayer?this.youTubePlayer.getDuration():0),void 0===i\|\|isNaN(i)\|\|-1===i?e.resolve(0):e.resolve(i));return t},AblePlayer.prototype.getElapsed=function(){var e,t,i;(t=(e=new v.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getCurrentTime().then(function(t){void 0===t\|\|isNaN(t)\|\|-1===t?e.resolve(0):e.resolve(t)}):e.resolve(0):("html5"===this.player?i=this.media.currentTime:"youtube"===this.player&&(i=this.youTubePlayer?this.youTubePlayer.getCurrentTime():0),void 0===i\|\|isNaN(i)\|\|-1===i?e.resolve(0):e.resolve(i));return t},AblePlayer.prototype.getPlayerState=function(){var e,t,i;if(t=(e=new v.Deferred).promise(),"html5"===(i=this).player)this.media.ended?e.resolve("ended"):this.media.paused?e.resolve("paused"):4!==this.media.readyState?e.resolve("buffering"):e.resolve("playing");else if("youtube"===this.player&&this.youTubePlayer){var s=this.youTubePlayer.getPlayerState();-1===s\|\|5===s?e.resolve("stopped"):0===s?e.resolve("ended"):1===s?e.resolve("playing"):2===s?e.resolve("paused"):3===s&&e.resolve("buffering")}else"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.getPaused().then(function(t){t?e.resolve("paused"):i.vimeoPlayer.getEnded().then(function(t){t?e.resolve("ended"):e.resolve("playing")})});return t},AblePlayer.prototype.isPlaybackRateSupported=function(){return"html5"===this.player?!!this.media.playbackRate:"youtube"===this.player?1<this.youTubePlayer.getAvailablePlaybackRates().length:"vimeo"===this.player?this.vimeoSupportsPlaybackRateChange:void 0},AblePlayer.prototype.setPlaybackRate=function(t){t=Math.max(.5,t),"html5"===this.player?this.media.playbackRate=t:"youtube"===this.player?this.youTubePlayer.setPlaybackRate(t):"vimeo"===this.player&&this.vimeoPlayer.setPlaybackRate(t),this.hasSignLanguage&&this.signVideo&&(this.signVideo.playbackRate=t),this.playbackRate=t,this.$speed.text(this.tt.speed+": "+t.toFixed(2).toString()+"x")},AblePlayer.prototype.getPlaybackRate=function(){return"html5"===this.player?this.media.playbackRate:"youtube"===this.player?this.youTubePlayer.getPlaybackRate():void 0},AblePlayer.prototype.isPaused=function(){if("vimeo"===this.player)return!this.playing;this.getPlayerState().then(function(t){return"paused"===t\|\|"stopped"===t\|\|"ended"===t})},AblePlayer.prototype.pauseMedia=function(){"html5"===this.player?(this.media.pause(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.pause(!0)):"youtube"===this.player?this.youTubePlayer.pauseVideo():"vimeo"===this.player&&this.vimeoPlayer.pause()},AblePlayer.prototype.playMedia=function(){"html5"===this.player?(this.media.play(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.play(!0)):"youtube"===this.player?(this.youTubePlayer.playVideo(),void 0!==this.$posterImg&&this.$posterImg.hide(),this.stoppingYouTube=!1):"vimeo"===this.player&&this.vimeoPlayer.play(),this.startedPlaying=!0,this.hideControls&&(this.hidingControls=!0,this.invokeHideControlsTimeout())},AblePlayer.prototype.fadeControls=function(t){"out"==t?(this.$mediaContainer.height(),this.$playerDiv.height(),this.$playerDiv.fadeTo(2e3,0,function(){})):"in"==t&&this.$playerDiv.fadeTo(100,1)},AblePlayer.prototype.invokeHideControlsTimeout=function(){var t=this;this.hideControlsTimeout=window.setTimeout(function(){void 0!==t.playing&&!0===t.playing&&t.hideControls&&(t.fadeControls("out"),t.controlsHidden=!0)},5e3),this.hideControlsTimeoutStatus="active"},AblePlayer.prototype.refreshControls=function(e,t,i){var s,a,n,r,o,l,h,p,c,u,d,g,f,m;e="init",(s=this).swappingSrc&&this.playing\|\|void 0!==this.duration&&(this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.chapterElapsed=this.getChapterElapsed()),!1===this.useFixedSeekInterval&&!1===this.seekIntervalCalculated&&0<this.duration&&this.setSeekInterval(),this.seekBar&&(this.useChapterTimes?(a=this.selectedChapters.cues.length-1,this.selectedChapters.cues[a]==this.currentChapter&&this.currentChapter.end!==this.duration?this.seekBar.setDuration(this.duration-this.currentChapter.start):this.seekBar.setDuration(this.chapterDuration)):void 0===this.duration\|\|isNaN(this.duration)\|\|-1===this.duration\|\|this.seekBar.setDuration(this.duration),this.seekBar.tracking\|\|(r=this.liveUpdatePending\|\|this.seekBar.seekHead.is(v(document.activeElement)),this.liveUpdatePending=!1,this.useChapterTimes?this.seekBar.setPosition(this.chapterElapsed,r):this.seekBar.setPosition(this.elapsed,r)),n=this.seekBar.tracking?this.seekBar.lastTrackPosition:this.useChapterTimes?this.chapterElapsed:this.elapsed),void 0!==this.$durationContainer&&(this.useChapterTimes?this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.chapterDuration)):this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.duration))),void 0!==this.$elapsedTimeContainer&&this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(n)),"legacy"===this.skin&&this.seekBar&&(h=0,c=(p=this.seekBar.wrapperDiv.parent().prev("div.able-left-controls")).next("div.able-right-controls"),p.children().each(function(){"button"==v(this).attr("role")&&(h+=v(this).outerWidth(!0))}),c.children().each(function(){"button"==v(this).attr("role")&&(h+=v(this).outerWidth(!0))}),u=this.fullscreen?v(window).width()-h:this.$ableWrapper.width()-h,5<Math.abs(u-this.seekBar.getWidth())&&this.seekBar.setWidth(u)),"html5"===this.player?0<this.media.buffered.length&&(g=this.media.buffered.end(0),this.useChapterTimes?(g>this.chapterDuration&&(g=this.chapterDuration),this.seekBar&&this.seekBar.setBuffered(g/this.chapterDuration)):this.seekBar&&(isNaN(g)\|\|this.seekBar.setBuffered(g/t))):"youtube"===this.player?this.seekBar&&this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()):this.player,this.$descButton&&(this.descOn?(this.$descButton.removeClass("buttonOff").attr("aria-label",this.tt.turnOffDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOffDescriptions)):(this.$descButton.addClass("buttonOff").attr("aria-label",this.tt.turnOnDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOnDescriptions))),this.$ccButton&&(d=this.captions.length,this.captionsOn?(this.$ccButton.removeClass("buttonOff"),1===d&&(this.$ccButton.attr("aria-label",this.tt.hideCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.hideCaptions))):(this.$ccButton.addClass("buttonOff"),1===d&&(this.$ccButton.attr("aria-label",this.tt.showCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.showCaptions))),1<d&&(this.$ccButton.attr({"aria-label":this.tt.captions,"aria-haspopup":"true","aria-controls":this.mediaId+"-captions-menu"}),this.$ccButton.find("span.able-clipped").text(this.tt.captions))),this.$fullscreenButton&&(this.fullscreen?(this.$fullscreenButton.attr("aria-label",this.tt.exitFullScreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-expand").addClass("icon-fullscreen-collapse"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullScreen)):"svg"===this.iconType?(m=this.getSvgData("fullscreen-collapse"),this.$fullscreenButton.find("svg").attr("viewBox",m[0]),this.$fullscreenButton.find("path").attr("d",m[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullScreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenCollapseButtonImg)):(this.$fullscreenButton.attr("aria-label",this.tt.enterFullScreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-collapse").addClass("icon-fullscreen-expand"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullScreen)):"svg"===this.iconType?(m=this.getSvgData("fullscreen-expand"),this.$fullscreenButton.find("svg").attr("viewBox",m[0]),this.$fullscreenButton.find("path").attr("d",m[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullScreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenExpandButtonImg))),void 0!==this.$bigPlayButton&&void 0!==this.seekBar&&(this.paused&&!this.seekBar.tracking?(this.hideBigPlayButton\|\|this.$bigPlayButton.show(),this.fullscreen?(this.$bigPlayButton.width(v(window).width()),this.$bigPlayButton.height(v(window).height())):(this.$bigPlayButton.width(this.$mediaContainer.width()),this.$bigPlayButton.height(this.$mediaContainer.height()))):this.$bigPlayButton.hide()),this.transcriptType&&(1===this.prefAutoScrollTranscript?(this.autoScrollTranscript=!0,this.$autoScrollTranscriptCheckbox.prop("checked",!0)):(this.autoScrollTranscript=!1,this.$autoScrollTranscriptCheckbox.prop("checked",!1)),this.autoScrollTranscript&&this.currentHighlight&&(f=Math.floor(this.$transcriptDiv.scrollTop()+v(this.currentHighlight).position().top-this.$transcriptDiv.height()/2+v(this.currentHighlight).height()/2))!==Math.floor(this.$transcriptDiv.scrollTop())&&(this.scrollingTranscript=!0,this.movingHighlight&&(this.$transcriptDiv.scrollTop(f),this.movingHighlight=!1))),this.$chaptersButton&&this.$chaptersButton.attr({"aria-label":this.tt.chapters,"aria-haspopup":"true","aria-controls":this.mediaId+"-chapters-menu"}),o={stopped:this.tt.statusStopped,paused:this.tt.statusPaused,playing:this.tt.statusPlaying,buffering:this.tt.statusBuffering,ended:this.tt.statusEnd},this.stoppingYouTube?(this.$status.text()!==this.tt.statusStopped&&this.$status.text(this.tt.statusStopped),this.$playpauseButton.find("span").first().hasClass("icon-pause")&&("font"===this.iconType?(this.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):"svg"===this.iconType?(m=this.getSvgData("play"),this.$playpauseButton.find("svg").attr("viewBox",m[0]),this.$playpauseButton.find("path").attr("d",m[1]),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):this.$playpauseButton.find("img").attr("src",this.playButtonImg))):void 0!==this.$status&&void 0!==this.seekBar&&this.getPlayerState().then(function(t){s.$status.text()===o[t]\|\|s.seekBar.tracking?(s.statusDebounceStart=null,s.debouncingStatus=!1,clearTimeout(s.statusTimeout),s.statusTimeout=null):(s.swappingSrc?s.debouncingStatus\|\|(s.statusMessageThreshold=2e3):s.debouncingStatus\|\|(s.statusMessageThreshold=250),l=(new Date).getTime(),s.statusDebounceStart?l-s.statusDebounceStart>s.statusMessageThreshold&&(s.$status.text(o[t]),s.statusDebounceStart=null,clearTimeout(s.statusTimeout),s.statusTimeout=null):(s.statusDebounceStart=l,s.debouncingStatus=!0,s.statusTimeout=setTimeout(function(){s.debouncingStatus=!1,s.refreshControls(e)},s.statusMessageThreshold))),s.seekBar.tracking\|\|s.stoppingYouTube\|\|("paused"===t\|\|"stopped"===t\|\|"ended"===t?(s.$playpauseButton.attr("aria-label",s.tt.play),"font"===s.iconType?(s.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),s.$playpauseButton.find("span.able-clipped").text(s.tt.play)):"svg"===s.iconType?(m=s.getSvgData("play"),s.$playpauseButton.find("svg").attr("viewBox",m[0]),s.$playpauseButton.find("path").attr("d",m[1]),s.$playpauseButton.find("span.able-clipped").text(s.tt.play)):s.$playpauseButton.find("img").attr("src",s.playButtonImg)):(s.$playpauseButton.attr("aria-label",s.tt.pause),"font"===s.iconType?(s.$playpauseButton.find("span").first().removeClass("icon-play").addClass("icon-pause"),s.$playpauseButton.find("span.able-clipped").text(s.tt.pause)):"svg"===s.iconType?(m=s.getSvgData("pause"),s.$playpauseButton.find("svg").attr("viewBox",m[0]),s.$playpauseButton.find("path").attr("d",m[1]),s.$playpauseButton.find("span.able-clipped").text(s.tt.pause)):s.$playpauseButton.find("img").attr("src",s.pauseButtonImg)))}),this.fullscreen\|\|(this.$statusBarDiv.height()+5<this.$statusBarDiv.find("span.able-speed").height()?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):(this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1),this.$statusBarDiv.width()<300?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1))))},AblePlayer.prototype.getHiddenWidth=function(t){var e=t.clone().appendTo("body"),i=e.outerWidth();return e.remove(),i},AblePlayer.prototype.handlePlay=function(t){this.paused?this.playMedia():this.pauseMedia()},AblePlayer.prototype.handleRestart=function(){this.seekTo(0)},AblePlayer.prototype.handlePrevTrack=function(){0===this.playlistIndex?this.playlistIndex=this.$playlist.length-1:this.playlistIndex--,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleNextTrack=function(){this.playlistIndex===this.$playlist.length-1?this.playlistIndex=0:this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleRewind=function(){var t;t=this.elapsed-this.seekInterval,this.useChapterTimes?t<this.currentChapter.start&&(t=this.currentChapter.start):t<0&&(t=0),this.seekTo(t)},AblePlayer.prototype.handleFastForward=function(){var t,e;e=this.chapters.length-1,t=this.elapsed+this.seekInterval,this.useChapterTimes?this.chapters[e]==this.currentChapter?t>this.duration\|\|t>this.currentChapter.end?t=Math.min(this.duration,this.currentChapter.end):this.duration%t<this.seekInterval&&(t=Math.min(this.duration,this.currentChapter.end)):t>this.currentChapter.end&&(t=this.currentChapter.end):t>this.duration&&(t=this.duration),this.seekTo(t)},AblePlayer.prototype.handleRateIncrease=function(){this.changeRate(1)},AblePlayer.prototype.handleRateDecrease=function(){this.changeRate(-1)},AblePlayer.prototype.changeRate=function(t){var e,i,s,a;"html5"===this.player?this.setPlaybackRate(this.getPlaybackRate()+.25t):"youtube"===this.player?(e=this.youTubePlayer.getAvailablePlaybackRates(),i=this.getPlaybackRate(),-1===(s=e.indexOf(i))\|\|(s+=t)<e.length&&0<=s&&this.setPlaybackRate(e[s])):"vimeo"===this.player&&(1===t?a=this.vimeoPlaybackRate+.5<=2?this.vimeoPlaybackRate+.5:2:-1===t&&(a=.5<=this.vimeoPlaybackRate-.5?this.vimeoPlaybackRate-.5:.5),this.setPlaybackRate(a))},AblePlayer.prototype.handleCaptionToggle=function(){var t;if(this.hidingPopup)return this.hidingPopup=!1;if(1===(t=this.captions.length?this.captions:[]).length){if(!0===this.captionsOn)this.captionsOn=!1,this.prefCaptions=0,this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.unloadModule("captions"):this.$captionsWrapper.hide();else{this.captionsOn=!0,this.prefCaptions=1,this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.loadModule("captions"):this.$captionsWrapper.show();for(var e=0;e<t.length;e++)!0===t[e].def&&(this.selectedCaptions=t[e]);this.selectedCaptions=this.captions[0],0<=this.descriptions.length&&(this.selectedDescriptions=this.descriptions[0])}this.refreshControls("captions")}else this.captionsPopup&&this.captionsPopup.is(":visible")?(this.captionsPopup.hide(),this.hidingPopup=!1,this.$ccButton.removeAttr("aria-expanded").focus()):(this.closePopups(),this.captionsPopup&&(this.captionsPopup.show(),this.$ccButton.attr("aria-expanded","true"),this.captionsPopup.css("top",this.$ccButton.position().top-this.captionsPopup.outerHeight()),this.captionsPopup.css("left",this.$ccButton.position().left),this.captionsPopup.find("li").removeClass("able-focus"),this.captionsPopup.find("li").first().focus().addClass("able-focus")))},AblePlayer.prototype.handleChapters=function(){if(this.hidingPopup)return this.hidingPopup=!1;this.chaptersPopup.is(":visible")?(this.chaptersPopup.hide(),this.hidingPopup=!1,this.$chaptersButton.removeAttr("aria-expanded").focus()):(this.closePopups(),this.chaptersPopup.show(),this.$chaptersButton.attr("aria-expanded","true"),this.chaptersPopup.css("top",this.$chaptersButton.position().top-this.chaptersPopup.outerHeight()),this.chaptersPopup.css("left",this.$chaptersButton.position().left),this.chaptersPopup.find("li").removeClass("able-focus"),this.chaptersPopup.find('li[aria-checked="true"]').length?this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass("able-focus"):this.chaptersPopup.find("li").first().addClass("able-focus").attr("aria-checked","true").focus())},AblePlayer.prototype.handleDescriptionToggle=function(){this.descOn=!this.descOn,this.prefDesc=+this.descOn,this.updateCookie("prefDesc"),this.$descDiv.is(":hidden")\|\|this.$descDiv.hide(),this.refreshingDesc=!0,this.initDescription(),this.refreshControls("descriptions")},AblePlayer.prototype.handlePrefsClick=function(t){var e,i,s;if(this.descVoices\|\|(this.getBrowserVoices(),this.descVoices&&this.rebuildDescPrefsForm()),(e=this).hidingPopup)return this.hidingPopup=!1;this.prefsPopup.is(":visible")?(this.prefsPopup.hide(),this.$prefsButton.removeAttr("aria-expanded"),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.showingPrefsDialog\|\|this.$prefsButton.focus(),setTimeout(function(){e.hidingPopup=!1},100)):(this.closePopups(),this.prefsPopup.show(),this.$prefsButton.attr("aria-expanded","true"),i=this.$prefsButton.position(),s=this.$ableDiv.width()-5-this.prefsPopup.width(),this.prefsPopup.css("top",i.top-this.prefsPopup.outerHeight()),this.prefsPopup.css("left",s),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","0"),this.prefsPopup.find("li").first().focus().addClass("able-focus"))},AblePlayer.prototype.handleHelpClick=function(){this.setFullscreen(!1),this.helpDialog.show()},AblePlayer.prototype.handleTranscriptToggle=function(){var t=this;this.$transcriptDiv.is(":visible")?(this.$transcriptArea.hide(),this.$transcriptButton.addClass("buttonOff").attr("aria-label",this.tt.showTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.showTranscript),this.prefTranscript=0,this.$transcriptButton.focus().addClass("able-focus"),setTimeout(function(){t.closingTranscript=!1},100)):(this.positionDraggableWindow("transcript"),this.$transcriptArea.show(),this.$transcriptPopup.hide(),this.$transcriptButton.removeClass("buttonOff").attr("aria-label",this.tt.hideTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.hideTranscript),this.prefTranscript=1,this.focusNotClick=!0,this.$transcriptArea.find("button").first().focus(),setTimeout(function(){t.focusNotClick=!1},100)),this.updateCookie("prefTranscript")},AblePlayer.prototype.handleSignToggle=function(){var t=this;this.$signWindow.is(":visible")?(this.$signWindow.hide(),this.$signButton.addClass("buttonOff").attr("aria-label",this.tt.showSign),this.$signButton.find("span.able-clipped").text(this.tt.showSign),this.prefSign=0,this.$signButton.focus().addClass("able-focus"),setTimeout(function(){t.closingSign=!1},100)):(this.positionDraggableWindow("sign"),this.$signWindow.show(),this.$signPopup.hide(),this.$signButton.removeClass("buttonOff").attr("aria-label",this.tt.hideSign),this.$signButton.find("span.able-clipped").text(this.tt.hideSign),this.prefSign=1,this.focusNotClick=!0,this.$signWindow.find("button").first().focus(),setTimeout(function(){t.focusNotClick=!1},100)),this.updateCookie("prefSign")},AblePlayer.prototype.isFullscreen=function(){return this.nativeFullscreenSupported()?!!(document.fullscreenElement\|\|document.webkitFullscreenElement\|\|document.webkitCurrentFullScreenElement\|\|document.mozFullScreenElement\|\|document.msFullscreenElement):!!this.modalFullscreenActive},AblePlayer.prototype.setFullscreen=function(t){if(this.fullscreen!=t){var e=this,i=this.$ableWrapper,s=i[0];if(this.nativeFullscreenSupported())t?(this.preFullScreenWidth=this.$ableWrapper.width(),this.preFullScreenHeight=this.$ableWrapper.height(),s.requestFullscreen?s.requestFullscreen():s.webkitRequestFullscreen?s.webkitRequestFullscreen():s.mozRequestFullScreen?s.mozRequestFullScreen():s.msRequestFullscreen&&s.msRequestFullscreen(),this.fullscreen=!0):(document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullScreen?document.webkitCancelFullScreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.msExitFullscreen&&document.msExitFullscreen(),this.fullscreen=!1),v(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange",function(t){e.fullscreen?e.clickedFullscreenButton\|\|(e.fullscreen=!1,e.restoringAfterFullScreen=!0,e.resizePlayer(e.preFullScreenWidth,e.preFullScreenHeight)):(e.restoringAfterFullScreen=!0,e.resizePlayer(e.preFullScreenWidth,e.preFullScreenHeight)),setTimeout(function(){e.clickedFullscreenButton=!1},1e3)});else{if(!this.fullscreenDialog){var a=v("<div>"),n=v("<p>",{class:"able-screenreader-alert"}).text(this.tt.fullscreen);a.append(n),this.fullscreenDialog=new AccessibleDialog(a,this.$fullscreenButton,"dialog","Fullscreen video player",n,this.tt.exitFullScreen,"100%",!0,function(){e.handleFullscreenToggle()}),v("body").append(a)}var r=this.paused;if(t){this.modalFullscreenActive=!0,this.fullscreenDialog.show(),this.$modalFullscreenPlaceholder=v('<div class="placeholder">'),this.$modalFullscreenPlaceholder.insertAfter(i),i.appendTo(this.fullscreenDialog.modal),i===this.$ableColumnLeft&&i.width("100%");var o=v(window).height()-this.$playerDiv.height();this.$descDiv.is(":hidden")\|\|(o-=this.$descDiv.height()),this.resizePlayer(v(window).width(),o)}else this.modalFullscreenActive=!1,i===this.$ableColumnLeft&&i.width("50%"),i.insertAfter(this.$modalFullscreenPlaceholder),this.$modalFullscreenPlaceholder.remove(),this.fullscreenDialog.hide(),this.resizePlayer(this.$ableWrapper.width(),this.$ableWrapper.height());!r&&this.paused&&this.playMedia()}this.refreshControls("fullscreen")}},AblePlayer.prototype.handleFullscreenToggle=function(){var t=this.paused;this.setFullscreen(!this.fullscreen),t?this.pauseMedia():t\|\|this.playMedia(),this.fullscreen?(this.hideControls=!0,this.playing&&(this.fadeControls("out"),this.controlsHidden=!0)):(this.hideControls=this.hideControlsOriginal,this.hideControls\|\|(this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear")))},AblePlayer.prototype.handleTranscriptLockToggle=function(t){this.autoScrollTranscript=t,this.prefAutoScrollTranscript=+t,this.updateCookie("prefAutoScrollTranscript"),this.refreshControls("transcript")},AblePlayer.prototype.showTooltip=function(t){t.is(":animated")?t.stop(!0,!0).show().delay(4e3).fadeOut(1e3):t.stop().show().delay(4e3).fadeOut(1e3)},AblePlayer.prototype.showAlert=function(t,e){var i,s,a,n;"transcript"===e?(i=this.$transcriptAlert,s=this.$transcriptArea):"sign"===e?(i=this.$signAlert,s=this.$signWindow):i="screenreader"===e?this.$srAlertBox:this.$alertBox,i.text(t).show(),"transcript"==e\|\|"sign"===e?(a=s.width()>i.width()?s.width()/2-i.width()/2:10,"sign"===e?n=s.height()/32:"transcript"===e&&(n=this.$transcriptToolbar.height()+30),i.css({top:n+"px",left:a+"px"})):"screenreader"!==e&&i.css({left:this.$playerDiv.width()/2-i.width()/2}),"screenreader"!==e&&setTimeout(function(){i.fadeOut(300)},3e3)},AblePlayer.prototype.showedAlert=function(t){return"transcript"===t?!!this.showedTranscriptAlert:"sign"===t&&!!this.showedSignAlert},AblePlayer.prototype.resizePlayer=function(t,e){var i,s,a;this.fullscreen?(void 0!==this.$vidcapContainer&&(this.$ableWrapper.css({width:t+"px","max-width":""}),this.$vidcapContainer.css({height:e+"px",width:t}),this.$media.css({height:e+"px",width:t})),void 0!==this.$transcriptArea&&this.retrieveOffscreenWindow("transcript",t,e),void 0!==this.$signWindow&&this.retrieveOffscreenWindow("sign",t,e)):this.restoringAfterFullScreen&&(t=this.preFullScreenWidth,e=this.preFullScreenHeight,this.restoringAfterFullScreen=!1,this.$ableWrapper.css({"max-width":t+"px",width:""}),void 0!==this.$vidcapContainer&&this.$vidcapContainer.css({height:"",width:""}),this.$media.css({width:"100%",height:"auto"})),"youtube"===this.player&&this.youTubePlayer&&this.youTubePlayer.setSize(t,e),void 0!==this.$captionsDiv&&(i=parseInt(this.prefCaptionsSize,10),a=(s=1e3<t?1.5i:t<400?i/1.5:i)+25,this.$captionsDiv.css("font-size",s+"%"),this.$captionsWrapper.css("line-height",a+"%")),this.refreshControls("captions")},AblePlayer.prototype.retrieveOffscreenWindow=function(t,e,i){var s,a,n,r,o,l,h,p;"transcript"==t?s=this.$transcriptArea:"sign"==t&&(s=this.$signWindow),l=s.width(),p=s.height(),n=(a=s.position()).top,o=(r=a.left)+l,h=n+p,n<0&&(n=10,s.css("top",n)),r<0&&(r=10,s.css("left",r)),e<o&&(r=e-20-l,s.css("left",r)),i<h&&(n=i-10-p,s.css("top",n))},AblePlayer.prototype.getHighestZIndex=function(){var t,e;return t=0,v("body ").not(".able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area").each(function(){e=v(this).css("z-index"),Number.isInteger(+e)&&parseInt(e)>t&&(t=parseInt(e))}),t},AblePlayer.prototype.updateZIndex=function(t){var e,i,s,a;if(8e3,7e3,this.getHighestZIndex(),void 0===this.$transcriptArea\|\|void 0===this.$signWindow)return void 0!==this.$transcriptArea?7e3<(e=parseInt(this.$transcriptArea.css("z-index")))&&this.$transcriptArea.css("z-index",7e3):void 0!==this.$signWindow&&8e3<(i=parseInt(this.$signWindow.css("z-index")))&&this.$signWindow.css("z-index",8e3),!1;if((e=parseInt(this.$transcriptArea.css("z-index")))===(i=parseInt(this.$signWindow.css("z-index"))))s=8e3,a=7e3;else if(i<e){if("transcript"===t)return!1;s=e,a=i}else{if("sign"===t)return!1;s=i,a=e}"transcript"===t?(this.$transcriptArea.css("z-index",s),this.$signWindow.css("z-index",a)):"sign"===t&&(this.$signWindow.css("z-index",s),this.$transcriptArea.css("z-index",a))},AblePlayer.prototype.syncTrackLanguages=function(t,e){var i,s,a,n,r;for(i=0;i<this.captions.length;i++)this.captions[i].language===e&&(s=this.captions[i]);for(i=0;i<this.chapters.length;i++)this.chapters[i].language===e&&(n=this.chapters[i]);for(i=0;i<this.descriptions.length;i++)this.descriptions[i].language===e&&(a=this.descriptions[i]);for(i=0;i<this.meta.length;i++)this.meta[i].language===e&&(r=this.meta[i]);this.transcriptLang=e,"init"===t\|\|"captions"===t?(this.captionLang=e,this.selectedCaptions=s,this.selectedChapters=n,this.selectedDescriptions=a,this.selectedMeta=r,this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a,this.updateChaptersList()):"transcript"===t&&(this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a),this.selectedDescriptions&&this.selectedDescriptions.language!==this.lang&&this.updateDescriptionVoice(),this.updateTranscript()}}(jQuery),function(n){AblePlayer.prototype.updateCaption=function(t){this.usingYouTubeCaptions\|\|void 0===this.$captionsWrapper\|\|(this.captionsOn?(this.$captionsWrapper.show(),void 0!==t&&this.showCaptions(t)):this.$captionsWrapper&&(this.$captionsWrapper.hide(),this.prefCaptions=0))},AblePlayer.prototype.updateCaptionsMenu=function(t){this.captionsPopup.find("li").attr("aria-checked","false"),void 0===t?this.captionsPopup.find("li").last().attr("aria-checked","true"):this.captionsPopup.find("li[lang="+t+"]").attr("aria-checked","true")},AblePlayer.prototype.getCaptionClickFunction=function(t){var e=this;return function(){e.selectedCaptions=t,e.captionLang=t.language,e.currentCaption=-1,e.usingYouTubeCaptions?e.captionsOn?e.youTubePlayer.getOptions("captions")&&e.startedPlaying?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):e.captionLangPending=e.captionLang:e.youTubePlayer.getOptions("captions")?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):(e.youTubePlayer.loadModule("captions"),e.captionLangPending=e.captionLang):e.usingVimeoCaptions?e.vimeoPlayer.enableTextTrack(e.captionLang).then(function(t){}).catch(function(t){t.name}):(e.syncTrackLanguages("captions",e.captionLang),e.swappingSrc\|\|(e.updateCaption(e.elapsed),e.showDescription(e.elapsed))),e.captionsOn=!0,e.hidingPopup=!0,e.captionsPopup.hide(),setTimeout(function(){e.hidingPopup=!1},100),e.updateCaptionsMenu(e.captionLang),e.$ccButton.focus(),e.prefCaptions=1,e.updateCookie("prefCaptions"),e.refreshControls("captions")}},AblePlayer.prototype.getCaptionOffFunction=function(){var t=this;return function(){"youtube"==t.player?t.youTubePlayer.unloadModule("captions"):t.usingVimeoCaptions&&t.vimeoPlayer.disableTextTrack(),t.captionsOn=!1,t.currentCaption=-1,t.hidingPopup=!0,t.captionsPopup.hide(),setTimeout(function(){t.hidingPopup=!1},100),t.updateCaptionsMenu(),t.$ccButton.focus(),t.prefCaptions=0,t.updateCookie("prefCaptions"),this.swappingSrc\|\|(t.refreshControls("captions"),t.updateCaption())}},AblePlayer.prototype.showCaptions=function(t){var e,i,s,a;for(a=this.selectedCaptions?this.selectedCaptions.cues:1<=this.captions.length?this.captions[0].cues:[],e=0;e<a.length;e++)if(a[e].start<=t&&a[e].end>t){i=e;break}void 0!==i?this.currentCaption!==i&&(s=this.flattenCueForCaption(a[i]).replace("\n","<br>"),this.$captionsDiv.html(s),this.currentCaption=i,0===s.length?this.$captionsDiv.css("display","none"):this.$captionsDiv.css("display","inline-block")):(this.$captionsDiv.html(""),this.currentCaption=-1)},AblePlayer.prototype.flattenCueForCaption=function(t){var e=[],s=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("("+t.value+")"),e=0;e<t.children.length;e++)i.push(s(t.children[e]));else if("i"===t.type){for(i.push("<em>"),e=0;e<t.children.length;e++)i.push(s(t.children[e]));i.push("</em>")}else if("b"===t.type){for(i.push("<strong>"),e=0;e<t.children.length;e++)i.push(s(t.children[e]));i.push("</strong>")}else for(e=0;e<t.children.length;e++)i.push(s(t.children[e]));return i.join("")};if(void 0!==t.components)for(var i=0;i<t.components.children.length;i++)e.push(s(t.components.children[i]));return e.join("")},AblePlayer.prototype.getCaptionsOptions=function(t){var e=[];switch(t){case"prefCaptionsFont":e[0]=["serif",this.tt.serif],e[1]=["sans-serif",this.tt.sans],e[2]=["cursive",this.tt.cursive],e[3]=["fantasy",this.tt.fantasy],e[4]=["monospace",this.tt.monospace];break;case"prefCaptionsColor":case"prefCaptionsBGColor":e[0]=["white",this.tt.white],e[1]=["yellow",this.tt.yellow],e[2]=["green",this.tt.green],e[3]=["cyan",this.tt.cyan],e[4]=["blue",this.tt.blue],e[5]=["magenta",this.tt.magenta],e[6]=["red",this.tt.red],e[7]=["black",this.tt.black];break;case"prefCaptionsSize":e[0]="75%",e[1]="100%",e[2]="125%",e[3]="150%",e[4]="200%";break;case"prefCaptionsOpacity":e[0]="0%",e[1]="25%",e[2]="50%",e[3]="75%",e[4]="100%";break;case"prefCaptionsStyle":e[0]=this.tt.captionsStylePopOn,e[1]=this.tt.captionsStyleRollUp;break;case"prefCaptionsPosition":e[0]="overlay",e[1]="below"}return e},AblePlayer.prototype.translatePrefs=function(t,e,i){if("youtube"==i&&"size"===t)switch(e){case"75%":return-1;case"100%":return 0;case"125%":return 1;case"150%":return 2;case"200%":return 3}return!1},AblePlayer.prototype.stylizeCaptions=function(t,e){var i,s,a;void 0!==t&&("prefCaptionsPosition"==e?this.positionCaptions():void 0!==e?("prefCaptionsFont"===e?i="font-family":"prefCaptionsSize"===e?i="font-size":"prefCaptionsColor"===e?i="color":"prefCaptionsBGColor"===e?i="background-color":"prefCaptionsOpacity"===e&&(i="opacity"),s="prefCaptionsOpacity"===e?parseFloat(n("#"+this.mediaId+"_"+e).val())/100:n("#"+this.mediaId+"_"+e).val(),t.css(i,s)):(a=parseFloat(this.prefCaptionsOpacity)/100,t.css({"font-family":this.prefCaptionsFont,color:this.prefCaptionsColor,"background-color":this.prefCaptionsBGColor,opacity:a}),t===this.$captionsDiv&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"font-size":this.prefCaptionsSize}),"below"===this.prefCaptionsPosition?void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"}):"overlay"===this.prefCaptionsPosition&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":"transparent",opacity:""}),this.positionCaptions()))},AblePlayer.prototype.positionCaptions=function(t){void 0===t&&(t=this.prefCaptionsPosition),void 0!==this.$captionsWrapper&&("below"==t?(this.$captionsWrapper.removeClass("able-captions-overlay").addClass("able-captions-below"),this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"})):(this.$captionsWrapper.removeClass("able-captions-below").addClass("able-captions-overlay"),this.$captionsWrapper.css({"background-color":"transparent",opacity:""})))}}(jQuery),function(p){AblePlayer.prototype.populateChaptersDiv=function(){var t,e,i;p("#"+this.chaptersDivLocation)&&(this.$chaptersDiv=p("#"+this.chaptersDivLocation),this.$chaptersDiv.addClass("able-chapters-div"),this.chaptersTitle&&(t="h"+this.getNextHeadingLevel(this.$chaptersDiv).toString(),e=this.mediaId+"-chapters-heading",i=p("<"+t+">",{class:"able-chapters-heading",id:e}).text(this.chaptersTitle),this.$chaptersDiv.append(i)),this.$chaptersNav=p("<nav>"),this.chaptersTitle?this.$chaptersNav.attr("aria-labelledby",e):this.$chaptersNav.attr("aria-label",this.tt.chapters),this.$chaptersDiv.append(this.$chaptersNav),this.updateChaptersList())},AblePlayer.prototype.updateChaptersList=function(){var e,t,i,s,a,n,r,o,l,h;if(!(e=this).$chaptersNav)return!1;if(void 0===this.useChapterTimes&&("chapter"===this.seekbarScope&&this.selectedChapters.cues.length?this.useChapterTimes=!0:this.useChapterTimes=!1),0<(t=this.useChapterTimes?this.selectedChapters.cues:1<=this.chapters.length?this.chapters[0].cues:[]).length){for(h=p("<ul>"),i=0;i<t.length;i++)s=i,a=p("<li></li>"),o=function(t){return function(){e.seekTrigger="chapter",l=p(this).closest("li"),h=p(this).closest("ul").find("li"),h.index(l),h.removeClass("able-current-chapter").attr("aria-selected",""),l.addClass("able-current-chapter").attr("aria-selected","true"),e.updateChapter(t),e.seekTo(t)}},(n=p("<button>",{type:"button",val:s}).text(this.flattenCueForCaption(t[s]))).on("click",o(t[s].start)),n.on("focus",function(){p(this).closest("ul").find("li").removeClass("able-focus"),p(this).closest("li").addClass("able-focus")}),a.on("hover",function(){p(this).closest("ul").find("li").removeClass("able-focus"),p(this).addClass("able-focus")}),a.on("mouseleave",function(){p(this).removeClass("able-focus")}),n.on("blur",function(){p(this).closest("li").removeClass("able-focus")}),a.append(n),h.append(a),this.defaultChapter===t[s].id&&(n.attr("aria-selected","true").parent("li").addClass("able-current-chapter"),this.currentChapter=t[s],r=!0);r\|\|(this.currentChapter=t[0],h.find("button").first().attr("aria-selected","true").parent("li").addClass("able-current-chapter")),this.$chaptersNav.html(h)}return!1},AblePlayer.prototype.seekToChapter=function(t){for(var e=0;e<this.selectedChapters.cues.length;){if(this.selectedChapters.cues[e].id==t){this.seekTo(this.selectedChapters.cues[e].start),this.updateChapter(this.selectedChapters.cues[e].start);break}e++}},AblePlayer.prototype.updateChapter=function(t){if(void 0!==this.selectedChapters){var e,i,s;for(e=this.selectedChapters.cues,i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s&&this.currentChapter!==e[s]&&(this.currentChapter=e[s],this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.seekIntervalCalculated=!1),void 0!==this.$chaptersDiv&&(this.$chaptersDiv.find("ul").find("li").removeClass("able-current-chapter").attr("aria-selected",""),this.$chaptersDiv.find("ul").find("li").eq(s).addClass("able-current-chapter").attr("aria-selected","true")))}},AblePlayer.prototype.getChapterDuration=function(){var t,e;return void 0===this.currentChapter?0:void 0===this.duration?0:(t=this.selectedChapters.cues.length-1,this.selectedChapters.cues[t]==this.currentChapter&&this.currentChapter.end!==this.duration?(e=this.duration,this.currentChapter.end=this.duration):e=this.currentChapter.end,e-this.currentChapter.start)},AblePlayer.prototype.getChapterElapsed=function(){return void 0===this.currentChapter?0:this.elapsed>this.currentChapter.start?this.elapsed-this.currentChapter.start:0},AblePlayer.prototype.convertChapterTimeToVideoTime=function(t){if(void 0===this.currentChapter)return t;var e=this.currentChapter.start+t;return e>this.currentChapter.end?this.currentChapter.end:e},AblePlayer.prototype.getChapterClickFunction=function(t){var e=this;return function(){e.seekTrigger="chapter",e.seekTo(t),e.hidingPopup=!0,e.chaptersPopup.hide(),setTimeout(function(){e.hidingPopup=!1},100),e.$chaptersButton.focus()}}}(jQuery),function(p){AblePlayer.prototype.updateMeta=function(t){this.hasMeta&&("text"===this.metaType&&this.$metaDiv.show(),this.showMeta(t\|\|this.elapsed))},AblePlayer.prototype.showMeta=function(t){var e,i,s,a,n,r,o,l,h;for(e=[],a=1<=this.meta.length?this.meta:[],i=0;i<a.length;i++)if(a[i].start<=t&&a[i].end>t){s=i;break}if(void 0!==s){if(this.currentMeta!==s)if("text"===this.metaType)this.$metaDiv.html(this.flattenCueForMeta(a[s]).replace("\n","<br>"));else if("selector"===this.metaType){for(n=this.flattenCueForMeta(a[s]).split("\n"),r=0;r<n.length;r++)"pause"===(o=p.trim(n[r])).toLowerCase().trim()?(this.hideBigPlayButton=!0,this.pauseMedia()):"focus:"==o.toLowerCase().substring(0,6)?(h=o.substring(6).trim(),p(h).length&&p(h).focus()):p(o).length&&(this.currentMeta=s,void 0===(l=parseInt(p(o).attr("data-duration")))\|\|isNaN(l)?p(o).show():p(o).show().delay(l).fadeOut(),this.visibleSelectors.push(o),e.push(o));if(this.visibleSelectors&&this.visibleSelectors.length&&this.visibleSelectors.length!==e.length)for(r=this.visibleSelectors.length-1;0<=r;r--)-1==p.inArray(this.visibleSelectors[r],e)&&(p(this.visibleSelectors[r]).hide(),this.visibleSelectors.splice(r,1))}}else{if(void 0!==this.$metaDiv&&this.$metaDiv.html(""),this.visibleSelectors&&this.visibleSelectors.length){for(r=0;r<this.visibleSelectors.length;r++)p(this.visibleSelectors[r]).hide();this.visibleSelectors=[]}this.currentMeta=-1}},AblePlayer.prototype.flattenCueForMeta=function(t){for(var e=[],s=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("["+t.value+"]"),e=0;e<t.children.length;e++)i.push(s(t.children[e]));else for(e=0;e<t.children.length;e++)i.push(s(t.children[e]));return i.join("")},i=0;i<t.components.children.length;i++)e.push(s(t.components.children[i]));return e.join("")}}(jQuery),function(b){AblePlayer.prototype.setupTranscript=function(){var t=new b.Deferred,e=t.promise();return this.transcriptType\|\|!this.captions.length\|\|this.usingYouTubeCaptions\|\|this.usingVimeoCaptions\|\|(this.transcriptType="popup"),this.transcriptType?"popup"===this.transcriptType\|\|"external"===this.transcriptType?(this.injectTranscriptArea(),t.resolve()):"manual"===this.transcriptType&&(this.setupManualTranscript(),t.resolve()):t.resolve(),e},AblePlayer.prototype.injectTranscriptArea=function(){var t,e,i,s,a;if(this.$transcriptArea=b("<div>",{class:"able-transcript-area",role:"dialog","aria-label":this.tt.transcriptTitle}),this.$transcriptToolbar=b("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$transcriptDiv=b("<div>",{class:"able-transcript"}),this.$autoScrollTranscriptCheckbox=b("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),t=b("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$transcriptToolbar.append(t,this.$autoScrollTranscriptCheckbox),1<this.captions.length)for(e=b("<div>",{class:"transcript-language-select-wrapper"}),i=b("<label>",{for:"transcript-language-select-"+this.mediaId}).text(this.tt.language),this.$transcriptLanguageSelect=b("<select>",{id:"transcript-language-select-"+this.mediaId}),s=0;s<this.captions.length;s++)a=b("<option></option>",{value:this.captions[s].language,lang:this.captions[s].language}).text(this.captions[s].label),this.captions[s].def&&a.prop("selected",!0),this.$transcriptLanguageSelect.append(a);e&&(e.append(i,this.$transcriptLanguageSelect),this.$transcriptToolbar.append(e)),this.$transcriptArea.append(this.$transcriptToolbar,this.$transcriptDiv),this.transcriptDivLocation?b("#"+this.transcriptDivLocation).append(this.$transcriptArea):this.$ableWrapper.append(this.$transcriptArea),this.transcriptDivLocation\|\|(this.initDragDrop("transcript"),1===this.prefTranscript&&this.positionDraggableWindow("transcript",this.getDefaultWidth("transcript"))),this.prefTranscript\|\|this.transcriptDivLocation\|\|this.$transcriptArea.hide()},AblePlayer.prototype.addTranscriptAreaEvents=function(){var e=this;this.$autoScrollTranscriptCheckbox.click(function(){e.handleTranscriptLockToggle(e.$autoScrollTranscriptCheckbox.prop("checked"))}),this.$transcriptDiv.on("mousewheel DOMMouseScroll click scroll",function(t){e.scrollingTranscript\|\|(e.autoScrollTranscript=!1,e.refreshControls("transcript")),e.scrollingTranscript=!1}),void 0!==this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.on("click mousedown",function(t){t.stopPropagation()}),this.$transcriptLanguageSelect.on("change",function(){var t=e.$transcriptLanguageSelect.val();e.syncTrackLanguages("transcript",t)}))},AblePlayer.prototype.transcriptSrcHasRequiredParts=function(){return!!(b("#"+this.transcriptSrc).length&&(this.$transcriptArea=b("#"+this.transcriptSrc),this.$transcriptArea.find(".able-window-toolbar").length&&(this.$transcriptToolbar=this.$transcriptArea.find(".able-window-toolbar").eq(0),this.$transcriptArea.find(".able-transcript").length&&(this.$transcriptDiv=this.$transcriptArea.find(".able-transcript").eq(0),this.$transcriptArea.find(".able-transcript-seekpoint").length))))&&(this.$transcriptSeekpoints=this.$transcriptArea.find(".able-transcript-seekpoint"),!0)},AblePlayer.prototype.setupManualTranscript=function(){var t,e;t=b("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),e=b("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$autoScrollTranscriptCheckbox=t,this.$transcriptToolbar.append(e,this.$autoScrollTranscriptCheckbox)},AblePlayer.prototype.updateTranscript=function(){if(this.transcriptType){if("external"===this.transcriptType\|\|"popup"===this.transcriptType){var t,e,i;if(this.transcriptLang?e=this.transcriptCaptions.cues:this.transcriptCaptions?(this.transcriptLang=this.transcriptCaptions.language,e=this.transcriptCaptions.cues):this.selectedCaptions&&(this.transcriptLang=this.captionLang,e=this.selectedCaptions.cues),this.transcriptChapters)t=this.transcriptChapters.cues;else if(0<this.chapters.length){if(this.transcriptLang)for(var s=0;s<this.chapters.length;s++)this.chapters[s].language===this.transcriptLang&&(t=this.chapters[s].cues);void 0===t&&(t=this.chapters[0].cues\|\|[])}if(this.transcriptDescriptions)i=this.transcriptDescriptions.cues;else if(0<this.descriptions.length){if(this.transcriptLang)for(s=0;s<this.descriptions.length;s++)this.descriptions[s].language===this.transcriptLang&&(i=this.descriptions[s].cues);i\|\|(i=this.descriptions[0].cues\|\|[])}var a=this.generateTranscript(t\|\|[],e\|\|[],i\|\|[]);this.$transcriptDiv.html(a),this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.find("option:selected").prop("selected",!1),this.$transcriptLanguageSelect.find("option[lang="+this.transcriptLang+"]").prop("selected",!0))}var n=this;1===this.prefTabbable&&this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"),0<this.$transcriptArea.length&&this.$transcriptArea.find("span.able-transcript-seekpoint").click(function(t){n.seekTrigger="transcript";var e=parseFloat(b(this).attr("data-start"));e+=.01,n.seekingFromTranscript?n.seekingFromTranscript=!1:(n.seekingFromTranscript=!0,n.seekTo(e))})}},AblePlayer.prototype.highlightTranscript=function(t){if(this.transcriptType){var e,i,s,a=this;t=parseFloat(t),this.$transcriptArea.find("span.able-transcript-seekpoint").each(function(){if(e=parseFloat(b(this).attr("data-start")),i=parseFloat(b(this).attr("data-end")),s=!!b(this).parent().hasClass("able-transcript-chapter-heading"),e<=t&&t<=i&&!s)return b(this).hasClass("able-highlight")\|\|(a.$transcriptArea.find(".able-highlight").removeClass("able-highlight"),b(this).addClass("able-highlight"),a.movingHighlight=!0),!1}),a.currentHighlight=a.$transcriptArea.find(".able-highlight"),0===a.currentHighlight.length&&(a.currentHighlight=null)}},AblePlayer.prototype.generateTranscript=function(t,e,i){var s,h=this,a=b('<div class="able-transcript-container"></div>');if(a.attr("lang",this.transcriptLang),s=void 0!==this.transcriptTitle?this.transcriptTitle:this.lyricsMode?this.tt.lyricsTitle:this.tt.transcriptTitle,void 0===this.transcriptDivLocation){var n=this.playerHeadingLevel,p=(n+=1)+1;if(n<=6)var r="h"+n.toString();else r="div";var o=b("<"+r+">");o.addClass("able-transcript-heading"),6<n&&o.attr({role:"heading","aria-level":n}),o.text(s),o.attr("lang",this.lang),a.append(o)}for(var l=0,c=0,u=0,d=function(t,e){if(p<=6)var i="h"+p.toString();else i="div";var s=b("<"+i+">",{class:"able-transcript-chapter-heading"});6<p&&s.attr({role:"heading","aria-level":p});for(var a=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(a(t.children[i]));return e},n=b("<span>",{class:"able-transcript-seekpoint"}),r=0;r<e.components.children.length;r++)for(var o=a(e.components.children[r]),l=0;l<o.length;l++)n.append(o[l]);n.attr("data-start",e.start.toString()),n.attr("data-end",e.end.toString()),s.append(n),t.append(s)},g=function(t,e){var i=b("<div>",{class:"able-transcript-desc"}),s=b("<span>",{class:"able-hidden"});s.attr("lang",h.lang),s.text(h.tt.prefHeadingDescription+": "),i.append(s);for(var a=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(a(t.children[i]));return e},n=b("<span>",{class:"able-transcript-seekpoint"}),r=0;r<e.components.children.length;r++)for(var o=a(e.components.children[r]),l=0;l<o.length;l++)n.append(o[l]);n.attr("data-start",e.start.toString()),n.attr("data-end",e.end.toString()),i.append(n),t.append(i)},f=function(t,e){for(var i=b("<span>",{class:"able-transcript-seekpoint able-transcript-caption"}),o=function(t){var e=[],u=0,d=function(t){var e;u++;var i=[];if(""===t)return i;var s=t.indexOf("["),a=t.indexOf("]"),n=t.indexOf("("),r=t.indexOf(")"),o=-1!==s&&-1!==a,l=-1!==n&&-1!==r;if(l\|\|o){if(1<u)var h="<br/>";else h="";var p=h+'<span class="able-unspoken">',c="</span>";l&&o&&(s<n?l=!1:o=!1)}return l?(e=t.substring(0,n),e+=p,e+=t.substring(n,r+1),e+=c,e+=d(t.substring(r+1)),i.push(e)):o?(e=t.substring(0,s),e+=p,e+=t.substring(s,a+1),e+=c,e+=d(t.substring(a+1)),i.push(e)):i.push(t),i};if("string"===t.type)e=e.concat(d(t.value));else if("v"===t.type){var i=b("<span>",{class:"able-unspoken"});i.text("("+t.value+")"),e.push(i);for(var s=0;s<t.children.length;s++)for(var a=o(t.children[s]),n=0;n<a.length;n++)e.push(a[n])}else if("b"===t.type\|\|"i"===t.type){if("b"===t.type)var r=b("<strong>");else if("i"===t.type)r=b("<em>");for(s=0;s<t.children.length;s++)for(a=o(t.children[s]),n=0;n<a.length;n++)r.append(a[n]);"b"!==t.type&&"i"!=t.type\|\|e.push(r," ")}else for(s=0;s<t.children.length;s++)e=e.concat(o(t.children[s]));return e},s=0;s<e.components.children.length;s++)for(var a=o(e.components.children[s]),n=0;n<a.length;n++){var r=a[n];"string"==typeof r&&(h.lyricsMode?r=r.replace("\n","<br>")+"<br>":r+=" "),i.append(r)}i.attr("data-start",e.start.toString()),i.attr("data-end",e.end.toString()),t.append(i),t.append(" \n")};l<t.length\|\|u<i.length\|\|c<e.length;){if(l<t.length&&u<i.length&&c<e.length)var m=Math.min(t[l].start,i[u].start,e[c].start);else if(l<t.length&&u<i.length)m=Math.min(t[l].start,i[u].start);else if(l<t.length&&c<e.length)m=Math.min(t[l].start,e[c].start);else if(u<i.length&&c<e.length)m=Math.min(i[u].start,e[c].start);else m=null;null!==m?void 0!==t[l]&&t[l].start===m?(d(a,t[l]),l+=1):void 0!==i[u]&&i[u].start===m?(g(a,i[u]),u+=1):(f(a,e[c]),c+=1):l<t.length?(d(a,t[l]),l+=1):u<i.length?(g(a,i[u]),u+=1):c<e.length&&(f(a,e[c]),c+=1)}var v=a.children(),y=0;return v.each(function(){b(this).hasClass("able-transcript-caption")?(-1===b(this).text().indexOf("[")&&-1===b(this).text().indexOf("(")\|\|0<y&&(a.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),y=0),b(this).addClass("able-block-temp"),y++):0<y&&(a.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),y=0)}),a}}(jQuery),function(g){AblePlayer.prototype.showSearchResults=function(){var i=this;if(this.searchDiv&&this.searchString&&g("#"+this.SearchDiv)){var t="<p>"+this.tt.resultsSummary1+" ";t+='<span id="able-search-term-echo">'+this.searchString+"</span>",t+="</p>";var e=this.searchFor(this.searchString,this.searchIgnoreCaps);if(0<e.length){var s=g("<p>",{class:"able-search-results-summary"}),a=this.tt.resultsSummary2;a+=" <strong>"+e.length+"</strong> ",a+=this.tt.resultsSummary3+" ",a+=this.tt.resultsSummary4,s.html(a);for(var n=g("<ul>"),r=0;r<e.length;r++){var o="aria-search-result-"+r,l=g("<li>",{}),h=this.secondsToTime(e[r].start),p=this.tt.searchButtonLabel+" "+h.title,c=g("<button>",{class:"able-search-results-time","data-start":e[r].start,title:p,"aria-label":p,"aria-describedby":o});c.text(h.value),c.on("click",function(t){i.seekTrigger="search";var e=parseFloat(g(this).attr("data-start"));e+=.01,i.seeking=!0,i.seekTo(e)});var u=g("<span>",{class:"able-search-result-text",id:o});u.html("..."+e[r].caption+"..."),l.append(c,u),n.append(l)}g("#"+this.searchDiv).html(t).append(s,n)}else{var d=g("<p>").text(this.tt.noResultsFound);g("#"+this.searchDiv).html(t).append(d)}}},AblePlayer.prototype.searchFor=function(t,e){var i,s,a,n,r,o,l;a=[];var h=t.split(" ");if(0<this.captions.length){for(o=0;o<this.captions.length;o++)this.captions[o].language===this.searchLang&&(i=this.searchLang,s=this.captions[o].cues);if(0<s.length)for(o=r=0;o<s.length;o++)if(-1!==g.inArray(s[o].components.children[0].type,["string","i","b","u","v","c"])){n=this.flattenCueForCaption(s[o]);var p=e?n.toLowerCase():n;for(l=0;l<h.length;l++){var c=e?h[l].toLowerCase():h[l];if(-1!==p.indexOf(c)){a[r]=[],a[r].start=s[o].start,a[r].lang=i,a[r].caption=this.highlightSearchTerm(h,n),r++;break}}}}return a},AblePlayer.prototype.highlightSearchTerm=function(t,i){return t.forEach(function(t){var e=new RegExp(t,"gi");i=i.replace(e,'<span class="able-search-term">$&</span>')}),i},AblePlayer.prototype.secondsToTime=function(t){t=Math.floor(t);var e=parseInt(t/3600,10)%24,i=parseInt(t/60,10)%60,s=t%60,a="",n="";0<e&&(a+=e+":",n+=1==e?"1 "+this.tt.hour+" ":e+" "+this.tt.hours+" "),i<10?(a+="0"+i+":",0<i&&(n+=1==i?"1 "+this.tt.minute+" ":i+" "+this.tt.minutes+" ")):(a+=i+":",n+=i+" "+this.tt.minutes+" "),s<10?(a+="0"+s,0<s&&(n+=1==s?"1 "+this.tt.second+" ":s+" "+this.tt.seconds+" ")):(a+=s,n+=s+" "+this.tt.seconds+" ");var r=[];return r.value=a,r.title=n,r}}(jQuery),function(s){AblePlayer.prototype.onMediaUpdateTime=function(t,e){var i=this;this.getMediaTimes(t,e).then(function(t){i.duration=t.duration,i.elapsed=t.elapsed,i.swappingSrc&&void 0!==i.swapTime?i.swapTime===i.elapsed&&i.playing&&(i.playMedia(),i.swappingSrc=!1,i.swapTime=null):(1===i.prefHighlight&&i.highlightTranscript(i.elapsed),i.updateCaption(i.elapsed),i.showDescription(i.elapsed),i.updateChapter(i.elapsed),i.updateMeta(i.elapsed),i.refreshControls("timeline",i.duration,i.elapsed))})},AblePlayer.prototype.onMediaPause=function(){this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear"),this.refreshControls("playpause")},AblePlayer.prototype.onMediaComplete=function(){this.hasPlaylist&&!this.cueingPlaylistItem&&(this.playlistIndex===this.$playlist.length-1?this.loop?(this.playlistIndex=0,this.cueingPlaylistItem=!0,this.cuePlaylistItem(0)):(this.playing=!1,this.paused=!0):(this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex))),this.refreshControls("init")},AblePlayer.prototype.onMediaNewSourceLoad=function(){this.cueingPlaylistItem&&(this.cueingPlaylistItem=!1),!0===this.swappingSrc&&(0<this.swapTime?this.seekTo(this.swapTime):(this.playing&&this.playMedia(),this.swappingSrc=!1)),this.refreshControls("init")},AblePlayer.prototype.onWindowResize=function(){var t,e;this.fullscreen?(t=s(window).width(),e=this.isUserAgent("Firefox")\|\|this.isUserAgent("Trident")\|\|this.isUserAgent("Edge")?window.innerHeight-this.$playerDiv.outerHeight()-20:window.outerHeight>=window.innerHeight?window.innerHeight-this.$playerDiv.outerHeight():window.outerHeight,this.$descDiv.is(":hidden")\|\|(e-=this.$descDiv.height()),this.positionCaptions("overlay")):this.restoringAfterFullScreen?(t=this.preFullScreenWidth,e=this.preFullScreenHeight):(t=this.$ableWrapper.width(),e=void 0!==this.aspectRatio?Math.round(t/this.aspectRatio):this.$ableWrapper.height(),this.positionCaptions());this.resizePlayer(t,e)},AblePlayer.prototype.addSeekbarListeners=function(){var i=this;this.seekBar.bodyDiv.on("startTracking",function(t){i.pausedBeforeTracking=i.paused,i.pauseMedia()}).on("tracking",function(t,e){i.highlightTranscript(e),i.updateCaption(e),i.showDescription(e),i.updateChapter(i.convertChapterTimeToVideoTime(e)),i.updateMeta(e),i.refreshControls("init")}).on("stopTracking",function(t,e){i.useChapterTimes?i.seekTo(i.convertChapterTimeToVideoTime(e)):i.seekTo(e),i.pausedBeforeTracking\|\|setTimeout(function(){i.playMedia()},200)})},AblePlayer.prototype.onClickPlayerButton=function(t){var e,i;"play"===(e=s(t).attr("class").split(" ")[0].substr(20))?(this.clickedPlay=!0,this.handlePlay()):"restart"===e?(this.seekTrigger="restart",this.handleRestart()):"previous"===e?(this.userClickedPlaylist=!0,this.seekTrigger="previous",this.buttonWithFocus="previous",this.handlePrevTrack()):"next"===e?(this.userClickedPlaylist=!0,this.seekTrigger="next",this.buttonWithFocus="next",this.handleNextTrack()):"rewind"===e?(this.seekTrigger="rewind",this.handleRewind()):"forward"===e?(this.seekTrigger="forward",this.handleFastForward()):"mute"===e?this.handleMute():"volume"===e?this.handleVolume():"faster"===e?this.handleRateIncrease():"slower"===e?this.handleRateDecrease():"captions"===e?this.handleCaptionToggle():"chapters"===e?this.handleChapters():"descriptions"===e?this.handleDescriptionToggle():"sign"===e?this.closingSign\|\|this.handleSignToggle():"preferences"===e?"menu"===s(t).attr("data-prefs-popup")?this.handlePrefsClick():(this.showingPrefsDialog=!0,this.closePopups(),"keyboard"===(i=s(t).attr("data-prefs-popup"))?this.keyboardPrefsDialog.show():"captions"===i?this.captionPrefsDialog.show():"descriptions"===i?this.descPrefsDialog.show():"transcript"===i&&this.transcriptPrefsDialog.show(),this.showingPrefsDialog=!1):"help"===e?this.handleHelpClick():"transcript"===e?this.closingTranscript\|\|this.handleTranscriptToggle():"fullscreen"===e&&(this.clickedFullscreenButton=!0,this.handleFullscreenToggle())},AblePlayer.prototype.okToHandleKeyPress=function(){var t=AblePlayer.getActiveDOMElement();return"INPUT"!==s(t).prop("tagName")},AblePlayer.prototype.onPlayerKeyPress=function(t){var e,i;return 65<=(e=t.which)&&e<=90&&(e+=32),i=s(document.activeElement),27===e&&s.contains(this.$transcriptArea[0],i[0])?(this.handleTranscriptToggle(),!1):!!this.okToHandleKeyPress()&&void(s(":focus").is("[contenteditable]")\|\|s(":focus").is("input")\|\|s(":focus").is("textarea")&&!this.stenoMode\|\|s(":focus").is("select")\|\|t.target.hasAttribute("contenteditable")\|\|"INPUT"===t.target.tagName\|\|"TEXTAREA"===t.target.tagName&&!this.stenoMode\|\|"SELECT"===t.target.tagName\|\|(27===e?this.closePopups():32===e?"button"===i.attr("role")&&(t.preventDefault(),i.click()):112===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handlePlay()):115===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleRestart()):109===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleMute()):118===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleVolume()):49<=e&&e<=57?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleVolume(e)):99===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleCaptionToggle()):100===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleDescriptionToggle()):102===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleFastForward()):114===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleRewind()):98===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handlePrevTrack()):110===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleNextTrack()):101===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handlePrefsClick()):13===e&&("button"===i.attr("role")\|\|"SPAN"===i.prop("tagName")?i.click():"LI"===i.prop("tagName")&&i.click())))},AblePlayer.prototype.addHtml5MediaListeners=function(){var e=this;this.$media.on("emptied",function(){}).on("loadedmetadata",function(){e.duration=e.media.duration,e.onMediaNewSourceLoad()}).on("canplay",function(){}).on("canplaythrough",function(){e.playbackRate&&e.setPlaybackRate(e.playbackRate),e.userClickedPlaylist&&(e.startedPlaying\|\|e.playMedia(),e.userClickedPlaylist=!1),"restart"==e.seekTrigger\|\|"chapter"==e.seekTrigger\|\|"transcript"==e.seekTrigger\|\|"search"==e.seekTrigger?e.playMedia():e.startedPlaying?e.hasPlaylist?(e.playlistIndex!==e.$playlist.length\|\|e.loop)&&e.playMedia():e.getPlayerState().then(function(t){!e.swappingSrc\|\|"stopped"!==t&&"paused"!==t\|\|(e.startedPlaying=!1,0<e.swapTime?e.seekTo(e.swapTime):e.playMedia())}):0<e.startTime?e.seeking?(e.seeking=!1,(e.autoplay\|\|e.okToPlay)&&e.playMedia()):e.seekTo(e.startTime):e.defaultChapter&&void 0!==e.selectedChapters?e.seekToChapter(e.defaultChapter):(e.autoplay\|\|e.okToPlay)&&e.playMedia()}).on("play",function(){e.refreshControls("playpause")}).on("playing",function(){e.playing=!0,e.paused=!1,e.refreshControls("playpause")}).on("ended",function(){e.playing=!1,e.paused=!0,e.onMediaComplete()}).on("progress",function(){e.refreshControls("timeline")}).on("waiting",function(){}).on("durationchange",function(){e.refreshControls("timeline")}).on("timeupdate",function(){e.onMediaUpdateTime()}).on("pause",function(){e.clickedPlay?(e.playing=!1,e.paused=!0):e.hasPlaylist\|\|e.swappingSrc\|\|(e.playing=!1,e.paused=!0),e.clickedPlay=!1,e.onMediaPause()}).on("ratechange",function(){}).on("volumechange",function(){e.volume=e.getVolume(),e.debug}).on("error",function(){e.debug&&e.media.error.code})},AblePlayer.prototype.addVimeoListeners=function(){var e=this;this.vimeoPlayer.on("loaded",function(t){e.onMediaNewSourceLoad()}),this.vimeoPlayer.on("play",function(t){e.playing=!0,e.startedPlaying=!0,e.paused=!1,e.refreshControls("playpause")}),this.vimeoPlayer.on("ended",function(t){e.playing=!1,e.paused=!0,e.onMediaComplete()}),this.vimeoPlayer.on("bufferstart",function(){}),this.vimeoPlayer.on("bufferend",function(){}),this.vimeoPlayer.on("progress",function(t){}),this.vimeoPlayer.on("seeking",function(t){}),this.vimeoPlayer.on("seeked",function(t){}),this.vimeoPlayer.on("timeupdate",function(t){e.onMediaUpdateTime(t.duration,t.seconds)}),this.vimeoPlayer.on("pause",function(t){e.clickedPlay?(e.playing=!1,e.paused=!0):e.hasPlaylist\|\|e.swappingSrc\|\|(e.playing=!1,e.paused=!0),e.clickedPlay=!1,e.onMediaPause(),e.refreshControls("playpause")}),this.vimeoPlayer.on("playbackratechange",function(t){e.vimeoPlaybackRate=t.playbackRate}),this.vimeoPlayer.on("texttrackchange",function(t){}),this.vimeoPlayer.on("volumechange",function(t){e.volume=10t.volume}),this.vimeoPlayer.on("error",function(t){})},AblePlayer.prototype.addEventListeners=function(){var e;if(e=this,s(window).resize(function(){e.onWindowResize()}),window.MutationObserver){var t=this.$ableDiv[0];new MutationObserver(function(t){t.forEach(function(t){"attributes"===t.type&&"style"===t.attributeName&&e.$ableDiv.is(":visible")&&e.refreshControls("init")})}).observe(t,{attributes:!0,childList:!0,characterData:!0})}void 0!==this.seekBar?this.addSeekbarListeners():setTimeout(function(){void 0!==e.seekBar&&e.addSeekbarListeners()},2e3),this.$controllerDiv.find('div[role="button"]').on("click",function(t){t.stopPropagation(),e.onClickPlayerButton(this)}),s(document).on("click",function(t){if(0!==t.button)return!1;(s(".able-popup:visible").length\|\|s(".able-volume-popup:visible"))&&e.closePopups()}),this.$ableDiv.on("mousemove",function(){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),s(document).keydown(function(t){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),this.$ableDiv.keydown(function(t){1<AblePlayer.nextIndex&&e.onPlayerKeyPress(t)}),this.stenoMode&&void 0!==this.stenoFrameContents&&this.stenoFrameContents.on("keydown",function(t){e.onPlayerKeyPress(t)}),this.$transcriptArea&&this.$transcriptArea.on("keydown",function(t){1<AblePlayer.nextIndex&&e.onPlayerKeyPress(t)}),this.$playlist&&this.$playlist.click(function(t){e.userClickedPlaylist\|\|(e.userClickedPlaylist=!0,e.playlistIndex=s(this).index(),e.cuePlaylistItem(e.playlistIndex))}),this.$media.click(function(){e.handlePlay()}),"html5"===this.player?this.addHtml5MediaListeners():"vimeo"===this.player?this.addVimeoListeners():"youtube"===this.player&&setInterval(function(){e.onMediaUpdateTime()},300)}}(jQuery),function($){AblePlayer.prototype.initDragDrop=function(e){var i,s,t,a,n,r;i=this,"transcript"===e?(s=this.$transcriptArea,a="transcript-window",t=this.$transcriptToolbar):"sign"===e&&(s=this.$signWindow,a="sign-window",t=this.$signToolbar),t.addClass("able-draggable"),n=$("<div>",{class:"able-resizable"}),r=parseInt(s.css("z-index"))+100,n.css("z-index",r),s.append(n),t.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type\|\|"touchstart"===t.type?i.windowMenuClickRegistered\|\|(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.dragDevice="mouse",i.startDrag(e,s)):"mouseup"!==t.type&&"touchend"!==t.type\|\|i.dragging&&"mouse"===i.dragDevice&&i.endDrag(e),!1}),n.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type\|\|"touchstart"===t.type?i.windowMenuClickRegistered\|\|(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.startResize(e,s)):"mouseup"!==t.type&&"touchend"!==t.type\|\|i.resizing&&i.endResize(e),!1}),s.on("click",function(){i.windowMenuClickRegistered\|\|i.finishingDrag\|\|i.updateZIndex(e),i.finishingDrag=!1}),this.addWindowMenu(e,s,a)},AblePlayer.prototype.addWindowMenu=function(e,t,i){var r,s,o,a,n,l,h,p,c,u,d;(r=this).windowMenuClickRegistered=!1,this.finishingDrag=!1,(s=$('<div role="alert"></div>')).addClass("able-alert"),s.hide(),s.appendTo(this.$activeWindow),s.css({top:t.offset().top}),d=this.mediaId+"-"+i+"-menu",o=$("<button>",{type:"button",tabindex:"0","aria-label":this.tt.windowButtonLabel,"aria-haspopup":"true","aria-controls":d,class:"able-button-handler-preferences"}),"font"===this.iconType?(a=$("<span>",{class:"icon-preferences","aria-hidden":"true"}),o.append(a)):(n=this.rootPath+"button-icons/"+this.toolbarIconColor+"/preferences.png",l=$("<img>",{src:n,alt:"",role:"presentation"}),o.append(l)),h=$("<span>",{class:"able-clipped"}).text(this.tt.windowButtonLabel),o.append(h),p=this.mediaId+"-"+i+"-tooltip",c=$("<div>",{class:"able-tooltip",id:p}).hide(),o.on("mouseenter focus",function(t){var e=$(this).attr("aria-label"),i=$(this).position(),s=$(this).height(),a=($(this).width(),{left:"",right:"0px",top:i.top-s-5+"px"}),n=AblePlayer.localGetElementById(o[0],p).text(e).css(a);r.showTooltip(n),$(this).on("mouseleave blur",function(){AblePlayer.localGetElementById(o[0],p).text("").hide()})}),u=this.setupPopups(i),"transcript"===e?(this.$transcriptAlert=s,this.$transcriptPopupButton=o,this.$transcriptPopup=u,this.$transcriptToolbar.prepend(s,o,c,u)):"sign"===e&&(this.$signAlert=s,this.$signPopupButton=o,this.$signPopup=u,this.$signToolbar.append(s,o,c,u)),o.on("click mousedown keydown",function(t){return!r.focusNotClick&&(r.dragging?(r.dragKeys(e,t),!1):(t.stopPropagation(),r.windowMenuClickRegistered\|\|r.finishingDrag\|\|r.handleWindowButtonClick(e,t),void(r.finishingDrag=!1)))}),this.addResizeDialog(e,t)},AblePlayer.prototype.addResizeDialog=function(t,e){var i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v,y,b,w,P,k,C,T;i=this,"transcript"===t?(s=this.$transcriptPopup,a=this.$transcriptPopupButton):"sign"===t&&(s=this.$signPopup,a=this.$signPopupButton),n=this.mediaId+"-resize-"+t+"-width",r=this.mediaId+"-resize-"+t+"-height",o=e.width(),l=e.height(),h=o/l,p=$("<div></div>",{class:"able-resize-form"}),c=$("<div></div>"),u=$("<div></div>"),d=$("<input>",{type:"text",id:n,value:o}),g=$("<label>",{for:n}).text(this.tt.width),f=$("<div></div>"),m=$("<input>",{type:"text",id:r,value:l}),v=$("<label>",{for:r}).text(this.tt.height),"sign"===t&&(m.prop("readonly",!0),d.on("input",function(){y=$(this).val(),b=Math.round(y/h,0),m.val(b)})),w=$('<button class="modal-button">'+this.tt.save+"</button>"),P=$('<button class="modal-button">'+this.tt.cancel+"</button>"),w.on("click",function(){k=$("#"+n).val(),C=$("#"+r).val(),k===o&&C===l\|\|(i.resizeObject(t,k,C),i.updateCookie(t)),T.hide(),s.hide(),a.focus()}),P.on("click",function(){T.hide(),s.hide(),a.focus()}),u.append(g,d),f.append(v,m),c.append(u,f),p.append(c,"<hr>",w,P),$("body").append(p),T=new AccessibleDialog(p,a,"alert",this.tt.windowResizeHeading,c,this.tt.closeButtonLabel,"20em"),"transcript"===t?this.transcriptResizeDialog=T:"sign"===t&&(this.signResizeDialog=T)},AblePlayer.prototype.handleWindowButtonClick=function(t,e){var i,s,a,n;if((i=this).focusNotClick)return!1;if("transcript"===t?(s=this.$transcriptPopup,a=this.$transcriptPopupButton,this.$transcriptToolbar):"sign"===t&&(s=this.$signPopup,a=this.$signPopupButton,this.$signToolbar),"keydown"===e.type)if(32===e.which\|\|13===e.which)this.windowMenuClickRegistered=!0;else{if(27!==e.which)return!1;s.is(":visible")?s.hide("fast",function(){i.windowMenuClickRegistered=!1,s.find("li").removeClass("able-focus").attr("tabindex","-1"),a.focus()}):"sign"===t?this.handleSignToggle():"transcript"===t&&this.handleTranscriptToggle()}else this.windowMenuClickRegistered=!0;s.is(":visible")?(s.hide(200,"",function(){i.windowMenuClickRegistered=!1}),s.find("li").removeClass("able-focus"),a.attr("aria-expanded","false").focus()):(this.updateZIndex(t),n=a.position().top+a.outerHeight(),s.css("top",n),s.show(200,"",function(){a.attr("aria-expanded","true"),$(this).find("li").first().focus().addClass("able-focus"),i.windowMenuClickRegistered=!1}))},AblePlayer.prototype.handleMenuChoice=function(t,e,i){var s,a,n,r,o;if(s=this,"transcript"===t?(a=this.$transcriptArea,n=this.$transcriptPopup,r=this.$transcriptPopupButton,o=this.transcriptResizeDialog):"sign"===t&&(a=this.$signWindow,n=this.$signPopup,r=this.$signPopupButton,o=this.signResizeDialog),this.$activeWindow=a,"keydown"===i.type)return 27===i.which?n.hide("fast",function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.focus()}):"close"!==e&&(this.$activeWindow=a),!1;if(n.hide("fast",function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1")}),"close"!==e&&r.focus(),"move"===e)this.$activeWindow.attr("role","application"),this.showedAlert(t)\|\|(this.showAlert(this.tt.windowMoveAlert,t),"transcript"===t?this.showedTranscriptAlert=!0:"sign"===t&&(this.showedSignAlert=!0)),"keydown"===i.type?this.dragDevice="keyboard":this.dragDevice="mouse",this.startDrag(t,a),n.hide().parent().focus();else if("resize"==e){var l=o.getInputs();l&&(l[0].value=a.width(),l[1].value=a.height()),o.show()}else"close"==e&&("transcript"===t?(this.closingTranscript=!0,this.handleTranscriptToggle()):"sign"===t&&(this.closingSign=!0,this.handleSignToggle()))},AblePlayer.prototype.startDrag=function(e,t){var i,s,a,n,r;return(i=this).$activeWindow\|\|(this.$activeWindow=t),this.dragging=!0,"transcript"===e?s=this.$transcriptPopup:"sign"===e&&(s=this.$signPopup),this.showedAlert(e)\|\|(this.showAlert(this.tt.windowMoveAlert,e),"transcript"===e?this.showedTranscriptAlert=!0:"sign"===e&&(this.showedSignAlert=!0)),s.is(":visible")&&s.hide(),this.updateZIndex(e),a=this.$activeWindow.position(),this.dragStartX=a.left,this.dragStartY=a.top,void 0===this.startMouseX?(this.dragDevice="keyboard",this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.startingDrag=!0):(this.dragDevice="mouse",this.dragOffsetX=this.startMouseX-this.dragStartX,this.dragOffsetY=this.startMouseY-this.dragStartY),this.$activeWindow.addClass("able-drag").css({position:"absolute",top:this.dragStartY+"px",left:this.dragStartX+"px"}).focus(),"mouse"===this.dragDevice?$(document).on("mousemove touchmove",function(t){i.dragging&&(n=t.pageX-i.dragOffsetX,r=t.pageY-i.dragOffsetY,i.resetDraggedObject(n,r))}):"keyboard"===this.dragDevice&&this.$activeWindow.on("keydown",function(t){i.dragging&&i.dragKeys(e,t)}),!1},AblePlayer.prototype.dragKeys=function(t,e){if(this.startingDrag)return this.startingDrag=!1;switch(10,e.which){case 37:case 63234:this.dragKeyX-=10;break;case 38:case 63232:this.dragKeyY-=10;break;case 39:case 63235:this.dragKeyX+=10;break;case 40:case 63233:this.dragKeyY+=10;break;case 13:case 27:return this.endDrag(t),!1;default:return!1}return this.resetDraggedObject(this.dragKeyX,this.dragKeyY),e.preventDefault&&e.preventDefault(),!1},AblePlayer.prototype.resetDraggedObject=function(t,e){this.$activeWindow.css({left:t+"px",top:e+"px"})},AblePlayer.prototype.resizeObject=function(t,e,i){var s;this.$activeWindow.css({width:e+"px",height:i+"px"}),"transcript"===t&&(s=i-50,this.$transcriptDiv.css("height",s+"px"))},AblePlayer.prototype.endDrag=function(t){var e,i;e=this,"transcript"===t?(this.$transcriptPopup,i=this.$transcriptPopupButton):"sign"===t&&(this.$signPopup,i=this.$signPopupButton),$(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown").removeClass("able-drag"),this.$activeWindow.attr("role","dialog"),this.$activeWindow=null,"keyboard"===this.dragDevice&&i.focus(),this.dragging=!1,this.updateCookie(t),this.startMouseX=void 0,this.startMouseY=void 0,this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){e.finishingDrag=!1},100)},AblePlayer.prototype.isCloseToCorner=function(t,e,i){var s,a,n,r,o,l;return 10,a=(s=t.offset()).top,n=s.left,r=t.width(),o=a+t.height(),l=n+r,Math.abs(o-i)<=10&&Math.abs(l-e)<=10},AblePlayer.prototype.startResize=function(e,t){var i,s,a,n;return(i=this).$activeWindow=t,this.resizing=!0,"transcript"===e?s=this.$transcriptPopup:"sign"===e&&(s=this.$signPopup),s.is(":visible")&&s.hide().parent().focus(),this.$activeWindow.position(),this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.dragStartWidth=this.$activeWindow.width(),this.dragStartHeight=this.$activeWindow.height(),$(document).on("mousemove touchmove",function(t){i.resizing&&(a=i.dragStartWidth+(t.pageX-i.startMouseX),n=i.dragStartHeight+(t.pageY-i.startMouseY),i.resizeObject(e,a,n))}),!1},AblePlayer.prototype.endResize=function(t){var e;"transcript"===t?(this.$transcriptPopup,e=this.$transcriptPopupButton):"sign"===t&&(this.$signPopup,e=this.$signPopupButton),$(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown"),e.show().focus(),this.resizing=!1,this.$activeWindow.removeClass("able-resize"),this.updateCookie(t),this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){this.finishingDrag=!1},100)}}(jQuery),function(n){AblePlayer.prototype.initSignLanguage=function(){"html5"===this.player?(this.signFile=this.$sources.first().attr("data-sign-src"),this.signFile?this.isIOS()?(this.hasSignLanguage=!1,this.debug):(this.debug,this.hasSignLanguage=!0,this.injectSignPlayerCode()):this.hasSignLanguage=!1):this.hasSignLanguage=!1},AblePlayer.prototype.injectSignPlayerCode=function(){var t,e,i,s,a;for(this.getDefaultWidth("sign"),t=this.mediaId+"-sign",this.$signVideo=n("<video>",{id:t,tabindex:"-1"}),this.signVideo=this.$signVideo[0],e=0;e<this.$sources.length;e++){if(i=this.$sources[e].getAttribute("data-sign-src"),s=this.$sources[e].getAttribute("type"),!i){this.hasSignLanguage=!1;break}a=n("<source>",{src:i,type:s}),this.$signVideo.append(a)}this.$signWindow=n("<div>",{class:"able-sign-window",role:"dialog","aria-label":this.tt.sign}),this.$signToolbar=n("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$signWindow.append(this.$signToolbar,this.$signVideo),this.$ableWrapper.append(this.$signWindow),this.initDragDrop("sign"),1===this.prefSign?this.positionDraggableWindow("sign",this.getDefaultWidth("sign")):this.$signWindow.hide()}}(jQuery),function(t){var n={ab:{name:"Abkhaz",nativeName:"аҧсуа"},aa:{name:"Afar",nativeName:"Afaraf"},af:{name:"Afrikaans",nativeName:"Afrikaans"},ak:{name:"Akan",nativeName:"Akan"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"አማርኛ"},ar:{name:"Arabic",nativeName:"العربية"},an:{name:"Aragonese",nativeName:"Aragonés"},hy:{name:"Armenian",nativeName:"Հայերեն"},as:{name:"Assamese",nativeName:"অসমীয়া"},av:{name:"Avaric",nativeName:"авар мацӀ, магӀарул мацӀ"},ae:{name:"Avestan",nativeName:"avesta"},ay:{name:"Aymara",nativeName:"aymar aru"},az:{name:"Azerbaijani",nativeName:"azərbaycan dili"},bm:{name:"Bambara",nativeName:"bamanankan"},ba:{name:"Bashkir",nativeName:"башҡорт теле"},eu:{name:"Basque",nativeName:"euskara, euskera"},be:{name:"Belarusian",nativeName:"Беларуская"},bn:{name:"Bengali",nativeName:"বাংলা"},bh:{name:"Bihari",nativeName:"भोजपुरी"},bi:{name:"Bislama",nativeName:"Bislama"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},br:{name:"Breton",nativeName:"brezhoneg"},bg:{name:"Bulgarian",nativeName:"български език"},my:{name:"Burmese",nativeName:"ဗမာစာ"},ca:{name:"Catalan",nativeName:"Català"},ch:{name:"Chamorro",nativeName:"Chamoru"},ce:{name:"Chechen",nativeName:"нохчийн мотт"},ny:{name:"Chichewa",nativeName:"chiCheŵa, chinyanja"},zh:{name:"Chinese",nativeName:"中文 (Zhōngwén), 汉语, 漢語"},cv:{name:"Chuvash",nativeName:"чӑваш чӗлхи"},kw:{name:"Cornish",nativeName:"Kernewek"},co:{name:"Corsican",nativeName:"corsu, lingua corsa"},cr:{name:"Cree",nativeName:"ᓀᐦᐃᔭᐍᐏᐣ"},hr:{name:"Croatian",nativeName:"hrvatski"},cs:{name:"Czech",nativeName:"česky, čeština"},da:{name:"Danish",nativeName:"dansk"},dv:{name:"Divehi",nativeName:"ދިވެހި"},nl:{name:"Dutch",nativeName:"Nederlands, Vlaams"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti, eesti keel"},ee:{name:"Ewe",nativeName:"Eʋegbe"},fo:{name:"Faroese",nativeName:"føroyskt"},fj:{name:"Fijian",nativeName:"vosa Vakaviti"},fi:{name:"Finnish",nativeName:"suomi, suomen kieli"},fr:{name:"French",nativeName:"français, langue française"},ff:{name:"Fula",nativeName:"Fulfulde, Pulaar, Pular"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"ქართული"},de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"Ελληνικά"},gn:{name:"Guaraní",nativeName:"Avañeẽ"},gu:{name:"Gujarati",nativeName:"ગુજરાતી"},ht:{name:"Haitian",nativeName:"Kreyòl ayisyen"},ha:{name:"Hausa",nativeName:"Hausa, هَوُسَ"},he:{name:"Hebrew",nativeName:"עברית"},hz:{name:"Herero",nativeName:"Otjiherero"},hi:{name:"Hindi",nativeName:"हिन्दी, हिंदी"},ho:{name:"Hiri Motu",nativeName:"Hiri Motu"},hu:{name:"Hungarian",nativeName:"Magyar"},ia:{name:"Interlingua",nativeName:"Interlingua"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ie:{name:"Interlingue",nativeName:"Originally called Occidental; then Interlingue after WWII"},ga:{name:"Irish",nativeName:"Gaeilge"},ig:{name:"Igbo",nativeName:"Asụsụ Igbo"},ik:{name:"Inupiaq",nativeName:"Iñupiaq, Iñupiatun"},io:{name:"Ido",nativeName:"Ido"},is:{name:"Icelandic",nativeName:"Íslenska"},it:{name:"Italian",nativeName:"Italiano"},iu:{name:"Inuktitut",nativeName:"ᐃᓄᒃᑎᑐᑦ"},ja:{name:"Japanese",nativeName:"日本語 (にほんご／にっぽんご)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kl:{name:"Kalaallisut",nativeName:"kalaallisut, kalaallit oqaasii"},kn:{name:"Kannada",nativeName:"ಕನ್ನಡ"},kr:{name:"Kanuri",nativeName:"Kanuri"},ks:{name:"Kashmiri",nativeName:"कश्मीरी, كشميري‎"},kk:{name:"Kazakh",nativeName:"Қазақ тілі"},km:{name:"Khmer",nativeName:"ភាសាខ្មែរ"},ki:{name:"Kikuyu",nativeName:"Gĩkũyũ"},rw:{name:"Kinyarwanda",nativeName:"Ikinyarwanda"},ky:{name:"Kyrgyz",nativeName:"кыргыз тили"},kv:{name:"Komi",nativeName:"коми кыв"},kg:{name:"Kongo",nativeName:"KiKongo"},ko:{name:"Korean",nativeName:"한국어 (韓國語), 조선말 (朝鮮語)"},ku:{name:"Kurdish",nativeName:"Kurdî, كوردی‎"},kj:{name:"Kuanyama",nativeName:"Kuanyama"},la:{name:"Latin",nativeName:"latine, lingua latina"},lb:{name:"Luxembourgish",nativeName:"Lëtzebuergesch"},lg:{name:"Luganda",nativeName:"Luganda"},li:{name:"Limburgish",nativeName:"Limburgs"},ln:{name:"Lingala",nativeName:"Lingála"},lo:{name:"Lao",nativeName:"ພາສາລາວ"},lt:{name:"Lithuanian",nativeName:"lietuvių kalba"},lu:{name:"Luba-Katanga",nativeName:""},lv:{name:"Latvian",nativeName:"latviešu valoda"},gv:{name:"Manx",nativeName:"Gaelg, Gailck"},mk:{name:"Macedonian",nativeName:"македонски јазик"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu, بهاس ملايو‎"},ml:{name:"Malayalam",nativeName:"മലയാളം"},mt:{name:"Maltese",nativeName:"Malti"},mi:{name:"Māori",nativeName:"te reo Māori"},mr:{name:"Marathi",nativeName:"मराठी"},mh:{name:"Marshallese",nativeName:"Kajin M̧ajeļ"},mn:{name:"Mongolian",nativeName:"монгол"},na:{name:"Nauru",nativeName:"Ekakairũ Naoero"},nv:{name:"Navajo",nativeName:"Diné bizaad, Dinékʼehǰí"},nb:{name:"Norwegian Bokmål",nativeName:"Norsk bokmål"},nd:{name:"North Ndebele",nativeName:"isiNdebele"},ne:{name:"Nepali",nativeName:"नेपाली"},ng:{name:"Ndonga",nativeName:"Owambo"},nn:{name:"Norwegian Nynorsk",nativeName:"Norsk nynorsk"},no:{name:"Norwegian",nativeName:"Norsk"},ii:{name:"Nuosu",nativeName:"ꆈꌠ꒿ Nuosuhxop"},nr:{name:"South Ndebele",nativeName:"isiNdebele"},oc:{name:"Occitan",nativeName:"Occitan"},oj:{name:"Ojibwe",nativeName:"ᐊᓂᔑᓈᐯᒧᐎᓐ"},cu:{name:"Church Slavonic",nativeName:"ѩзыкъ словѣньскъ"},om:{name:"Oromo",nativeName:"Afaan Oromoo"},or:{name:"Oriya",nativeName:"ଓଡ଼ିଆ"},os:{name:"Ossetian",nativeName:"ирон æвзаг"},pa:{name:"Punjabi",nativeName:"ਪੰਜਾਬੀ, پنجابی‎"},pi:{name:"Pāli",nativeName:"पाऴि"},fa:{name:"Persian",nativeName:"فارسی"},pl:{name:"Polish",nativeName:"polski"},ps:{name:"Pashto",nativeName:"پښتو"},pt:{name:"Portuguese",nativeName:"Português"},qu:{name:"Quechua",nativeName:"Runa Simi, Kichwa"},rm:{name:"Romansh",nativeName:"rumantsch grischun"},rn:{name:"Kirundi",nativeName:"kiRundi"},ro:{name:"Romanian",nativeName:"română"},ru:{name:"Russian",nativeName:"русский язык"},sa:{name:"Sanskrit",nativeName:"संस्कृतम्"},sc:{name:"Sardinian",nativeName:"sardu"},sd:{name:"Sindhi",nativeName:"सिन्धी, سنڌي، سندھی‎"},se:{name:"Northern Sami",nativeName:"Davvisámegiella"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},sg:{name:"Sango",nativeName:"yângâ tî sängö"},sr:{name:"Serbian",nativeName:"српски језик"},gd:{name:"Gaelic",nativeName:"Gàidhlig"},sn:{name:"Shona",nativeName:"chiShona"},si:{name:"Sinhalese",nativeName:"සිංහල"},sk:{name:"Slovak",nativeName:"slovenčina"},sl:{name:"Slovene",nativeName:"slovenščina"},so:{name:"Somali",nativeName:"Soomaaliga, af Soomaali"},st:{name:"Southern Sotho",nativeName:"Sesotho"},es:{name:"Spanish",nativeName:"español, castellano"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},ss:{name:"Swati",nativeName:"SiSwati"},sv:{name:"Swedish",nativeName:"svenska"},ta:{name:"Tamil",nativeName:"தமிழ்"},te:{name:"Telugu",nativeName:"తెలుగు"},tg:{name:"Tajik",nativeName:"тоҷикӣ, toğikī, تاجیکی‎"},th:{name:"Thai",nativeName:"ไทย"},ti:{name:"Tigrinya",nativeName:"ትግርኛ"},bo:{name:"Tibetan",nativeName:"བོད་ཡིག"},tk:{name:"Turkmen",nativeName:"Türkmen, Түркмен"},tl:{name:"Tagalog",nativeName:"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔"},tn:{name:"Tswana",nativeName:"Setswana"},to:{name:"Tonga",nativeName:"faka Tonga"},tr:{name:"Turkish",nativeName:"Türkçe"},ts:{name:"Tsonga",nativeName:"Xitsonga"},tt:{name:"Tatar",nativeName:"татарча, tatarça, تاتارچا‎"},tw:{name:"Twi",nativeName:"Twi"},ty:{name:"Tahitian",nativeName:"Reo Tahiti"},ug:{name:"Uyghur",nativeName:"Uyƣurqə, ئۇيغۇرچە‎"},uk:{name:"Ukrainian",nativeName:"українська"},ur:{name:"Urdu",nativeName:"اردو"},uz:{name:"Uzbek",nativeName:"zbek, Ўзбек, أۇزبېك‎"},ve:{name:"Venda",nativeName:"Tshivenḓa"},vi:{name:"Vietnamese",nativeName:"Tiếng Việt"},vo:{name:"Volapük",nativeName:"Volapük"},wa:{name:"Walloon",nativeName:"Walon"},cy:{name:"Welsh",nativeName:"Cymraeg"},wo:{name:"Wolof",nativeName:"Wollof"},fy:{name:"Western Frisian",nativeName:"Frysk"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"ייִדיש"},yo:{name:"Yoruba",nativeName:"Yorùbá"},za:{name:"Zhuang",nativeName:"Saɯ cueŋƅ, Saw cuengh"},"ar-dz":{name:"Arabic (Algeria)",nativeName:"العربية (الجزائر)"},"ar-bh":{name:"Arabic (Bahrain)",nativeName:"العربية (البحرين)"},"ar-eg":{name:"Arabic (Egypt)",nativeName:"العربية (مصر)"},"ar-iq":{name:"Arabic (Iraq)",nativeName:"العربية (العراق)"},"ar-jo":{name:"Arabic (Jordan)",nativeName:"العربية (الأردن)"},"ar-kw":{name:"Arabic (Kuwait)",nativeName:"العربية (الكويت)"},"ar-lb":{name:"Arabic (Lebanon)",nativeName:"العربية (لبنان)"},"ar-ly":{name:"Arabic (Libya)",nativeName:"العربية (ليبيا)"},"ar-ma":{name:"Arabic (Morocco)",nativeName:"العربية (المملكة المغربية)"},"ar-om":{name:"Arabic (Oman)",nativeName:"العربية (عمان)"},"ar-qa":{name:"Arabic (Qatar)",nativeName:"العربية (قطر)"},"ar-sa":{name:"Arabic (Saudi Arabia)",nativeName:"العربية (المملكة العربية السعودية)"},"ar-sy":{name:"Arabic (Syria)",nativeName:"العربية (سوريا)"},"ar-tn":{name:"Arabic (Tunisia)",nativeName:"العربية (تونس)"},"ar-ae":{name:"Arabic (U.A.E.)",nativeName:"العربية (الإمارات العربية المتحدة)"},"ar-ye":{name:"Arabic (Yemen)",nativeName:"العربية (اليمن)"},"de-at":{name:"German (Austria)",nativeName:"Deutsch (Österreich)"},"de-li":{name:"German (Liechtenstein)",nativeName:"Deutsch (Liechtenstein)"},"de-lu":{name:"German (Luxembourg)",nativeName:"Deutsch (Luxemburg)"},"de-ch":{name:"German (Switzerland)",nativeName:"Deutsch (Schweiz)"},"en-au":{name:"English (Australia)",nativeName:"English (Australia)"},"en-bz":{name:"English (Belize)",nativeName:"English (Belize)"},"en-ca":{name:"English (Canada)",nativeName:"English (Canada)"},"en-ie":{name:"English (Ireland)",nativeName:"English (Ireland)"},"en-jm":{name:"English (Jamaica)",nativeName:"English (Jamaica)"},"en-nz":{name:"English (New Zealand)",nativeName:""},"en-za":{name:"English (South Africa)",nativeName:"English (South Africa)"},"en-tt":{name:"English (Trinidad)",nativeName:"English (Trinidad y Tobago)"},"en-gb":{name:"English (United Kingdom)",nativeName:"English (United Kingdom)"},"en-us":{name:"English (United States)",nativeName:"English (United States)"},"es-ar":{name:"Spanish (Argentina)",nativeName:"Español (Argentina)"},"es-bo":{name:"Spanish (Bolivia)",nativeName:"Español (Bolivia)"},"es-cl":{name:"Spanish (Chile)",nativeName:"Español (Chile)"},"es-co":{name:"Spanish (Colombia)",nativeName:"Español (Colombia)"},"es-cr":{name:"Spanish (Costa Rica)",nativeName:"Español (Costa Rica)"},"es-do":{name:"Spanish (Dominican Republic)",nativeName:"Español (República Dominicana)"},"es-ec":{name:"Spanish (Ecuador)",nativeName:"Español (Ecuador)"},"es-sv":{name:"Spanish (El Salvador)",nativeName:"Español (El Salvador)"},"es-gt":{name:"Spanish (Guatemala)",nativeName:"Español (Guatemala)"},"es-hn":{name:"Spanish (Honduras)",nativeName:"Español (Honduras)"},"es-mx":{name:"Spanish (Mexico)",nativeName:"Español (México)"},"es-ni":{name:"Spanish (Nicaragua)",nativeName:"Español (Nicaragua)"},"es-pa":{name:"Spanish (Panama)",nativeName:"Español (Panamá)"},"es-py":{name:"Spanish (Paraguay)",nativeName:"Español (Paraguay)"},"es-pe":{name:"Spanish (Peru)",nativeName:"Español (Perú)"},"es-pr":{name:"Spanish (Puerto Rico)",nativeName:"Español (Puerto Rico)"},"es-uy":{name:"Spanish (Uruguay)",nativeName:"Español (Uruguay)"},"es-ve":{name:"Spanish (Venezuela)",nativeName:"Español (Venezuela)"},"fr-be":{name:"French (Belgium)",nativeName:"français (Belgique)"},"fr-ca":{name:"French (Canada)",nativeName:"français (Canada)"},"fr-lu":{name:"French (Luxembourg)",nativeName:"français (Luxembourg)"},"fr-ch":{name:"French (Switzerland)",nativeName:"français (Suisse)"},"it-ch":{name:"Italian (Switzerland)",nativeName:"italiano (Svizzera)"},"nl-be":{name:"Dutch (Belgium)",nativeName:"Nederlands (België)"},"pt-br":{name:"Portuguese (Brazil)",nativeName:"Português (Brasil)"},"sv-fi":{name:"Swedish (Finland)",nativeName:"svenska (Finland)"},"zh-hk":{name:"Chinese (Hong Kong)",nativeName:"中文(香港特别行政區)"},"zh-cn":{name:"Chinese (PRC)",nativeName:"中文(中华人民共和国)"},"zh-sg":{name:"Chinese (Singapore)",nativeName:"中文(新加坡)"},"zh-tw":{name:"Chinese Traditional (Taiwan)",nativeName:"中文（台灣）"}};AblePlayer.prototype.getLanguageName=function(t,e){var i,s,a;return(i=n[t.toLowerCase()])?"local"===e?i.nativeName:i.name:t.includes("-")&&(s=t.substr(0,2),a=t.substr(3),i=n[s.toLowerCase()])?"local"===e?i.nativeName+" ("+a+")":i.name+" ("+a+")":t}}(jQuery),function(n){AblePlayer.prototype.getSupportedLangs=function(){return["ca","cs","de","en","es","fr","he","id","it","ja","nb","nl","pt-br","sv","tr","zh-tw"]},AblePlayer.prototype.getTranslationText=function(){var e,i,t,s,a;return e=n.Deferred(),t=(i=this).getSupportedLangs(),this.lang&&-1===n.inArray(this.lang,t)&&(2==this.lang.indexOf("-")&&-1!==n.inArray(this.lang.substring(0,2),t)?this.lang=this.lang.substring(0,2):this.lang=null),this.lang\|\|(s=n("body").attr("lang")?n("body").attr("lang").toLowerCase():n("html").attr("lang")?n("html").attr("lang").toLowerCase():null)&&(-1!==n.inArray(s,t)?this.lang=s:2==s.indexOf("-")&&-1!==n.inArray(s.substring(0,2),t)&&(this.lang=s.substring(0,2))),this.lang\|\|(this.lang="en"),this.searchLang\|\|(this.searchLang=this.lang),a=this.rootPath+"translations/"+this.lang+".js",console.log('translation file',a),n.getJSON(a,function(t){console.log('retrieved tt file',t);i.tt=t,e.resolve()}),e.promise()}}(jQuery),jQuery,AblePlayer.prototype.computeEndTime=function(t,e){var i=t.split(":").reverse().map(function(t){return parseFloat(t)}),a=e.split(":").reverse().map(function(t){return parseFloat(t)});return i.reduce(function(t,e,i){var s=e+a[i];return 0===i&&(60<s&&(a[i+1]+=1,s-=60),s=s.toFixed(3)),1===i&&60<s&&(a[i+1]+=1,s-=60),s<10&&(s="0"+s),t.push(s),t},[]).reverse().join(":")},AblePlayer.prototype.ttml2webvtt=function(t){var r=this,e=r.convert.xml2json(t,{ignoreComment:!0,alwaysChildren:!0,compact:!0,spaces:2});return JSON.parse(e).tt.body.div.p.reduce(function(t,e,i){var s=e._text,a=Array.isArray(s),n=e._attributes;return r.computeEndTime(n.begin,n.dur),t+(r.computeEndTime(n.begin,"00:00:0")+" --\x3e ")+r.computeEndTime(n.begin,n.dur)+"\n"+(a?s.join("\n"):s)+"\n\n"},"WEBVTT\n\n\n")},function(a){a.doWhen=function(s){return a.Deferred(function(t){var e=a.extend({},{when:null,exec:function(){},interval:100,attempts:100,delayed:0},s,{checkId:null}),i=function(){if(!0===e.when())return e.exec.call(t.promise()),void t.resolve();e.checkId=setInterval(function(){0===e.attempts?(clearInterval(e.checkId),t.reject()):(--e.attempts,!0===e.when()&&(e.attempts=0,clearInterval(e.checkId),e.exec.call(t.promise()),t.resolve()))},e.interval)};0<e.delayed?setTimeout(i,Number(e.delayed)):i()}).promise()}}(jQuery),function(k){AblePlayer.prototype.injectVTS=function(){var e,t,i,s,a,n,r,o,l,h,p,c,u,d,g,f,m;if(e=this,k("#able-vts").length&&this.vtsTracks.length){for(P in this.langs=[],this.getAllLangs(this.vtsTracks),this.vtsLang=this.lang,t=k("<h2>").text("Video Transcript Sorter"),k("#able-vts").append(t),this.$vtsAlert=k("<div>",{id:"able-vts-alert","aria-live":"polite","aria-atomic":"true"}),k("#able-vts").append(this.$vtsAlert),i=k("<div>",{id:"able-vts-instructions"}),s=k("<p>").text("Use the Video Transcript Sorter to perform any of the following tasks:"),n=k("<ul>"),r=k("<li>").text("Reorder chapters, descriptions, captions, and/or subtitles so they appear in the proper sequence in Able Player's auto-generated transcript."),o=k("<li>").text("Modify content or start/end times (all are directly editable within the table)."),l=k("<li>").text("Insert new content, such as chapters or descriptions."),a=k("<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.'),n.append(r,o,l),i.append(s,n,a),k("#able-vts").append(i),h=k("<fieldset>"),p=k("<legend>").text("Select a language"),h.append(p),this.langs)u="vts-lang-radio-"+this.langs[P],c=k("<div>",{}),g=k("<input>",{type:"radio",name:"vts-lang",id:u,value:this.langs[P]}).on("click",function(){e.vtsLang=k(this).val(),e.showVtsAlert("Loading "+e.getLanguageName(e.vtsLang)+" tracks"),e.injectVtsTable("update",e.vtsLang)}),this.langs[P]==this.lang&&g.prop("checked",!0),d=k("<label>",{for:u}).text(this.getLanguageName(this.langs[P])),c.append(g,d),h.append(c);var v,y,b,w,P;k("#able-vts").append(h),f=k("<button>",{type:"button",id:"able-vts-save",value:"save"}).text("Save Changes"),k("#able-vts").append(f),this.injectVtsTable("add",this.vtsLang),v=["captions","chapters","descriptions","subtitles"],k('td[contenteditable="true"]').on("focus",function(){y=k(this).text()}).on("blur",function(){y!=k(this).text()&&(b=k(this).index(),w=k(this).text(),1===b?-1===k.inArray(w,v)&&("s"===w.substr(0,1)?k(this).text("subtitles"):"d"===w.substr(0,1)?k(this).text("descriptions"):"ch"===w.substr(0,2)?k(this).text("chapters"):k(this).text("captions")):2!==b&&3!==b\|\|k(this).text(e.formatTimestamp(w)))}).on("keydown",function(t){t.stopPropagation()}),k("#able-vts-save").on("click",function(t){t.stopPropagation(),"save"==k(this).attr("value")?(k(this).attr("value","cancel").text("Return to Editor"),m=k("#able-vts table"),k("#able-vts-instructions").hide(),k("#able-vts > fieldset").hide(),k("#able-vts table").remove(),k("#able-vts-icon-credit").remove(),e.parseVtsOutput(m)):(k(this).attr("value","save").text("Save Changes"),k("#able-vts-output").remove(),k("#able-vts-instructions").show(),k("#able-vts > fieldset").show(),k("#able-vts").append(m),k("#able-vts").append(e.getIconCredit()),e.showVtsAlert("Cancelling saving. Any edits you made have been restored in the VTS table."))})}},AblePlayer.prototype.setupVtsTracks=function(t,e,i,s,a){var n,r;n=this.getFilenameFromPath(s),r=this.parseVtsTracks(a),this.vtsTracks.push({kind:t,language:e,label:i,srcFile:n,cues:r})},AblePlayer.prototype.getFilenameFromPath=function(t){var e;return-1===(e=t.lastIndexOf("/"))?t:t.substr(e+1)},AblePlayer.prototype.getFilenameFromTracks=function(t,e){for(var i=0;i<this.vtsTracks.length;i++)if(this.vtsTracks[i].kind===t&&this.vtsTracks[i].language===e)return this.vtsTracks[i].srcFile;return!1},AblePlayer.prototype.parseVtsTracks=function(t){var e,i,s,a,n,r,o,l,h;for(e=t.split("\n"),s=[],a=0;a<e.length;)if(-1!==(r=e[a]).indexOf(" --\x3e ")){if(i=r.trim().split(" "),this.isValidTimestamp(i[0])&&this.isValidTimestamp(i[2])){for(l="",n=a+1,h=!1;n<e.length&&!h;)0<(o=e[n].trim()).length?0<l.length?l+="\n"+o:l+=o:h=!0,n++;s.push({start:i[0],end:i[2],content:l}),a=n}}else a++;return s},AblePlayer.prototype.isValidTimestamp=function(t){return!!/^[0-9:,.]$/.test(t)},AblePlayer.prototype.formatTimestamp=function(t){var e,i=t.substr(0,t.lastIndexOf(".")+1);if(3<(e=t.substr(t.lastIndexOf(".")+1)).length)e=e.substr(0,3);else if(e.length<3)for(;e.length<3;)e+="0";return i+e},AblePlayer.prototype.injectVtsTable=function(t,e){var i,s,a,n,r,o,l,h;for("update"===t&&(k("#able-vts table").remove(),k("#able-vts-icon-credit").remove()),i=k("<table>",{lang:e}),n=k("<tr>",{lang:"en"}),s=["Row #","Kind","Start","End","Content","Actions"],a=0;a<s.length;a++)r=k("<th>",{scope:"col"}).text(s[a]),"Actions"===s[a]&&r.addClass("actions"),n.append(r);for(i.append(n),l=this.getAllRows(e),a=0;a<l.length;a++)n=k("<tr>",{id:"able-vts-row-"+(h=a+1),class:"kind-"+l[a].kind}),o=k("<td>").text(h),n.append(o),o=k("<td>",{contenteditable:"true"}).text(l[a].kind),n.append(o),o=k("<td>",{contenteditable:"true"}).text(l[a].start),n.append(o),o=k("<td>",{contenteditable:"true"}).text(l[a].end),n.append(o),o=k("<td>",{contenteditable:"true"}).text(l[a].content),n.append(o),o=this.addVtsActionButtons(h,l.length),n.append(o),i.append(n);k("#able-vts").append(i),k("#able-vts").append(this.getIconCredit())},AblePlayer.prototype.addVtsActionButtons=function(t,e){var i,s,a,n,r,o,l,h,p,c;for(i=this,s=k("<td>"),a=["up","down","insert","delete"],n=0;n<a.length;n++)"up"===(r=a[n])?1<t&&(o=k("<button>",{id:"able-vts-button-up-"+t,title:"Move up","aria-label":"Move Row "+t+" up"}).on("click",function(t){i.onClickVtsActionButton(t.currentTarget)}),l=k("<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"}),p=k("<path>",{d:"M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101c-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.594l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z"}),h=k("<g>").append(p),l.append(h),o.append(l),o.html(o.html()),s.append(o)):"down"===r?t<e&&(o=k("<button>",{id:"able-vts-button-down-"+t,title:"Move down","aria-label":"Move Row "+t+" down"}).on("click",function(t){i.onClickVtsActionButton(t.currentTarget)}),l=k("<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"}),p=k("<path>",{d:"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.424C1.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.428s9.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"}),h=k("<g>").append(p),l.append(h),o.append(l),o.html(o.html()),s.append(o)):"insert"===r?(o=k("<button>",{id:"able-vts-button-insert-"+t,title:"Insert row below","aria-label":"Insert row before Row "+t}).on("click",function(t){i.onClickVtsActionButton(t.currentTarget)}),l=k("<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"}),p=k("<path>",{d:"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.414C242.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.775H27.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.411c5.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.987h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77c7.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"}),h=k("<g>").append(p),l.append(h),o.append(l),o.html(o.html()),s.append(o)):"delete"===r&&(o=k("<button>",{id:"able-vts-button-delete-"+t,title:"Delete row ","aria-label":"Delete Row "+t}).on("click",function(t){i.onClickVtsActionButton(t.currentTarget)}),l=k("<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"}),p=k("<path>",{d:"M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607C429.063,46.021,414.825,31.782,397.281,31.782z"}),c=k("<path>",{d:"M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042c17.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.891c8.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.804zM238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26c0,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.804c0-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.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z"}),h=k("<g>").append(p,c),l.append(h),o.append(l),o.html(o.html()),s.append(o));return s},AblePlayer.prototype.updateVtsActionButtons=function(t,e){var i,s,a,n,r,o;for(i=0;i<t.length;i++)a=(s=t.eq(i)).attr("id"),n=s.attr("aria-label"),r=a.replace(/[0-9]+/g,e),o=n.replace(/[0-9]+/g,e),s.attr("id",r),s.attr("aria-label",o)},AblePlayer.prototype.getIconCredit=function(){return'<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>'},AblePlayer.prototype.getAllLangs=function(t){var e;for(e in t)t[e].hasOwnProperty("language")&&-1===k.inArray(t[e].language,this.langs)&&(this.langs[this.langs.length]=t[e].language)},AblePlayer.prototype.getAllRows=function(t){var e,i,s,a;for(a=[],e=0;e<this.vtsTracks.length;e++)if((i=this.vtsTracks[e]).language==t)for(s in i.cues)a.push({kind:i.kind,lang:t,id:i.cues[s].id,start:i.cues[s].start,end:i.cues[s].end,content:i.cues[s].content});return a.sort(function(t,e){return t.start>e.start?1:-1}),a},AblePlayer.prototype.onClickVtsActionButton=function(t){var e,i,s;i=(e=k(t).attr("id").split("-"))[3],s=e[4],"up"==i?this.moveRow(s,"up"):"down"==i?this.moveRow(s,"down"):"insert"==i?this.insertRow(s):"delete"==i&&this.deleteRow(s)},AblePlayer.prototype.insertRow=function(t){var e,i,s,a,n,r,o,l,h,p,c,u,d,g,f;for(s=(i=(e=k("#able-vts table")).find("tr")).length-1,a=parseInt(t)+1,n=k("<tr>",{id:"able-vts-row-"+a}),r=k("<td>").text(a),n.append(r),p=null,o=k("<select>",{id:"able-vts-kind-"+a,"aria-label":"What kind of track is this?",placeholder:"Select a kind"}).on("change",function(){p=k(this).val(),c="kind-"+p,u=k(this).closest("tr"),k(this).parent().text(p),u.addClass(c)}),l=["","captions","chapters","descriptions","subtitles"],d=0;d<l.length;d++)h=k("<option>",{value:l[d]}).text(l[d]),o.append(h);for(r=k("<td>").append(o),n.append(r),r=k("<td>",{contenteditable:"true"}),n.append(r),r=k("<td>",{contenteditable:"true"}),n.append(r),r=k("<td>",{contenteditable:"true"}),n.append(r),r=this.addVtsActionButtons(a,s),n.append(r),e.find("tr").eq(t).after(n),d=a;d<=s;d++)g=d+1,i.eq(d).attr("id","able-vts-row-"+g),i.eq(d).find("td").eq(0).text(g),f=i.eq(d).find("button"),this.updateVtsActionButtons(f,g);this.adjustTimes(a),this.showVtsAlert("A new row "+a+" has been inserted"),o.focus()},AblePlayer.prototype.deleteRow=function(t){var e,i,s,a,n,r;for((e=k("#able-vts table"))[0].deleteRow(t),s=(i=e.find("tr")).length-1,a=t;a<=s;a++)n=a,i.eq(a).attr("id","able-vts-row-"+n),i.eq(a).find("td").eq(0).text(n),r=i.eq(a).find("button"),this.updateVtsActionButtons(r,n);this.showVtsAlert("Row "+t+" has been deleted")},AblePlayer.prototype.moveRow=function(t,e){var i,s,a,n;k("#able-vts table").find("tr"),i=k("#able-vts table").find("tr").eq(t),"up"==e?(s=parseInt(t)-1,(a=k("#able-vts table").find("tr").eq(s)).before(i)):"down"==e&&(s=parseInt(t)+1,(a=k("#able-vts table").find("tr").eq(s)).after(i)),i.attr("id","able-vts-row-"+s),i.find("td").eq(0).text(s),this.updateVtsActionButtons(i.find("button"),s),a.attr("id","able-vts-row-"+t),a.find("td").eq(0).text(t),this.updateVtsActionButtons(a.find("button"),t),this.adjustTimes(s),n="Row "+t+" has been moved "+e,n+=" and is now Row "+s,this.showVtsAlert(n)},AblePlayer.prototype.adjustTimes=function(t){var e,i,s,a,n,r,o,l,h,p,c,u,d,g,f,m;(e=[]).captions=.001,e.descriptions=.001,e.chapters=.001,l=(n=(i=k("#able-vts table").find("tr")).eq(t)).is('[class^="kind-"]')?this.getKindFromClass(n.attr("class")):"captions",c=this.getSecondsFromColonTime(n.find("td").eq(2).text()),g=this.getSecondsFromColonTime(n.find("td").eq(3).text()),f=1<t?(s=t-1,h=(r=i.eq(s)).is('[class^="kind-"]')?this.getKindFromClass(r.attr("class")):null,u=this.getSecondsFromColonTime(r.find("td").eq(2).text()),this.getSecondsFromColonTime(r.find("td").eq(3).text())):u=h=r=s=null,m=t<i.length-1?(a=t+1,p=(o=i.eq(a)).is('[class^="kind-"]')?this.getKindFromClass(o.attr("class")):null,d=this.getSecondsFromColonTime(o.find("td").eq(2).text()),this.getSecondsFromColonTime(o.find("td").eq(3).text())):d=p=o=a=null,isNaN(c)?(null==h&&(h="captions",r.attr("class","kind-captions"),r.find("td").eq(1).html("captions")),"captions"===h?(c=(parseFloat(f)+.001).toFixed(3),g=d?(parseFloat(d)-.001).toFixed(3):(parseFloat(c)+e[l]).toFixed(3)):"chapters"===h?(c=(parseFloat(u)+.001).toFixed(3),g=d?(parseFloat(d)-.001).toFixed(3):(parseFloat(c)+minDurartion[l]).toFixed(3)):"descriptions"===h&&(c=(parseFloat(u)+e.descriptions).toFixed(3),g=(parseFloat(c)+e.descriptions).toFixed(3))):u?u<c?c<d\|\|(d=(parseFloat(c)+e[l]).toFixed(3),m=(parseFloat(d)+e[p]).toFixed(3)):(c=(parseFloat(u)+e[h]).toFixed(3),g=(parseFloat(c)+e[l]).toFixed(3)):c<d\|\|(d=(parseFloat(c)+e[l]).toFixed(3),m=(parseFloat(d)+e[p]).toFixed(3)),g-c<e[l]&&(g=(parseFloat(c)+e[l]).toFixed(3),d&&(d=(parseFloat(g)+.001).toFixed(3))),n.find("td").eq(2).text(this.formatSecondsAsColonTime(c,!0)),n.find("td").eq(3).text(this.formatSecondsAsColonTime(g,!0)),r&&(r.find("td").eq(2).text(this.formatSecondsAsColonTime(u,!0)),r.find("td").eq(3).text(this.formatSecondsAsColonTime(f,!0))),o&&(o.find("td").eq(2).text(this.formatSecondsAsColonTime(d,!0)),o.find("td").eq(3).text(this.formatSecondsAsColonTime(m,!0)))},AblePlayer.prototype.getKindFromClass=function(t){var e,i,s;return e=t.indexOf("kind-")+5,s=-1==(i=t.indexOf(" ",e))?t.length-e:i-e,t.substr(e,s)},AblePlayer.prototype.showVtsAlert=function(t){this.$vtsAlert.text(t).show().delay(3e3).fadeOut("slow")},AblePlayer.prototype.parseVtsOutput=function(t){var e,i,s,a,n,r,o,l,h,p;for(e=t.attr("lang"),s=["captions","chapters","descriptions","subtitles"],n={},i=0;i<s.length;i++)n[a=s[i]]="WEBVTT\n\n";if(0<(r=t.find("tr")).length)for(i=0;i<r.length;i++)a=r.eq(i).find("td").eq(1).text(),-1!==k.inArray(a,s)&&(o=r.eq(i).find("td").eq(2).text(),l=r.eq(i).find("td").eq(3).text(),h=r.eq(i).find("td").eq(4).text(),void 0!==o&&void 0!==l&&(n[a]+=o+" --\x3e "+l+"\n","undefined"!==h&&(n[a]+=h),n[a]+="\n\n"));for(p=k("<div>",{id:"able-vts-output"}),k("#able-vts").append(p),i=0;i<s.length;i++)8<n[a=s[i]].length&&this.showWebVttOutput(a,n[a],e)},AblePlayer.prototype.showWebVttOutput=function(t,e,i){var s,a,n,r,o;s=k("<h3>").text(t.charAt(0).toUpperCase()+t.slice(1)),r="If you made changes, copy/paste the following content ",(a=this.getFilenameFromTracks(t,i))?(r+="to replace the original content of your "+this.getLanguageName(i)+" ",r+="<em>"+t+"</em> WebVTT file (<strong>"+a+"</strong>)."):r+="into a new "+this.getLanguageName(i)+" <em>"+t+"</em> WebVTT file.",n=k("<p>",{class:"able-vts-output-instructions"}).html(r),o=k("<textarea>").text(e),k("#able-vts-output").append(s,n,o)}}(jQuery),function(o){AblePlayer.prototype.initVimeoPlayer=function(){var e,t,i,s,a,n,r;return e=this,i=(t=new o.Deferred).promise(),s=this.mediaId+"_vimeo",this.$mediaContainer.prepend(o("<div>").attr("id",s)),a=this.vimeoDescId&&this.prefDesc?this.vimeoDescId:this.vimeoId,this.activeVimeoId=a,this.autoplay&&this.okToPlay?"true":"false",(n=this.getVimeoDimensions(this.activeVimeoId,s))?(this.vimeoWidth=n[0],this.vimeoHeight=n[1],this.aspectRatio=e.ytWidth/e.ytHeight):(this.vimeoWidth=null,this.vimeoHeight=null),r={id:a,width:this.vimeoWidth,controls:!1},this.vimeoPlayer=new Vimeo.Player(s,r),this.vimeoPlayer.ready().then(function(){e.hasPlaylist\|\|(e.$media.remove(),e.vimeoPlaybackRate=1,e.vimeoPlayer.setPlaybackRate(e.vimeoPlaybackRate).then(function(t){e.vimeoSupportsPlaybackRateChange=!0}).catch(function(t){e.vimeoSupportsPlaybackRateChange=!1}),t.resolve())}),i},AblePlayer.prototype.getVimeoPaused=function(){var e,t;return t=(e=new o.Deferred).promise(),this.vimeoPlayer.getPaused().then(function(t){e.resolve(t)}),t},AblePlayer.prototype.getVimeoEnded=function(){var e,t;return t=(e=new o.Deferred).promise(),this.vimeoPlayer.getEnded().then(function(t){e.resolve(t)}),t},AblePlayer.prototype.getVimeoState=function(){var e,t,i,s,a;return this,t=(e=new o.Deferred).promise(),i=[],s=this.vimeoPlayer.getPaused(),a=this.vimeoPlayer.getEnded(),i.push(s),i.push(a),s.then(function(t){e.resolve(t)}),a.then(function(t){e.resolve(t)}),o.when.apply(o,i).then(function(){e.resolve()}),t},AblePlayer.prototype.getVimeoDimensions=function(t){var e,i,s,a;return e=[],void 0!==this.playerMaxWidth?(e[0]=this.playerMaxWidth,void 0!==this.playerMaxHeight&&(e[1]=this.playerMaxHeight),e):void 0!==o("#"+t)&&(s=(i=o("#"+t)).width(),a=i.height(),0<s&&0<a)&&(e[0]=s,e[1]=a,e)},AblePlayer.prototype.getVimeoCaptionTracks=function(){var e,i,s,a=new o.Deferred,t=a.promise();return(e=this).vimeoPlayer.getTextTracks().then(function(t){if(t.length){for(i=0;i<t.length;i++)e.hasCaptions=!0,1===e.prefCaptions?e.captionsOn=!0:e.captionsOn=!1,s=t[i].language===e.lang,e.tracks.push({kind:t[i].kind,language:t[i].language,label:t[i].label,def:s});e.captions=e.tracks,e.hasCaptions=!0,e.setupPopups("captions"),a.resolve()}else e.hasCaptions=!1,e.usingVimeoCaptions=!1,a.resolve()}),t}}(jQuery); \ No newline at end of file diff --git a/src/build/ableplayer.min.css b/src/build/ableplayer.min.css index 642dc12..67b6387 100644 --- a/src/build/ableplayer.min.css +++ b/src/build/ableplayer.min.css @@ -1 +1 @@ -.able-wrapper{position:relative;margin:1em 0;padding:0;max-width:100%;height:auto;box-sizing:content-box!important;text-align:left}.able{position:relative;margin:0;padding:0;width:100%;background-color:#000;box-shadow:0 0 16px #262626;z-index:5000}.able-column-left{float:left}.able-column-right{float:left}.able .able-vidcap-container{background-color:#000;left:0;margin:0;position:relative;top:0}.able .able-audcap-container{background-color:#000;position:relative;margin:0;padding:1.5em .25em}.able-player{font-family:Arial,Helvetica,sans-serif;background-color:#262626}.able-audio{padding-top:1em}.able-offscreen{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.able-media-container audio{display:none!important}.able-controller{position:relative;border-bottom:1px solid #4c4c4c;background-color:#464646;min-height:38px;padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:visible}.able .able-vidcap-container video{max-width:100%}.able-media-container iframe{max-width:100%}.able-big-play-button{position:absolute;font-size:8em;color:#fdfdfd;background-color:transparent;border:none;outline:0;left:0;top:0;padding:0;z-index:6500;opacity:.75}.able-big-play-button:focus,.able-big-play-button:hover{opacity:100}.able-big-play-button .icon-play,.able-big-play-button svg{background-color:#000;padding:1rem 2rem}.able-big-play-button:hover .icon-play,.able-big-play-button:hover svg{outline-style:solid;outline-width:medium;outline-color:#8ab839!important}.able-big-play-button:focus .icon-play,.able-big-play-button:focus svg{outline-style:solid;outline-width:medium;outline-color:#ffbb37!important}.able-left-controls,.able-right-controls{overflow:visible}.able-left-controls div[role=button],.able-right-controls div[role=button]{vertical-align:middle}.able-left-controls{float:left}.able-right-controls{float:right}.able-black-controls,.able-black-controls div[role=button],.able-black-controls label{color:#000!important}.able-black-controls .able-seekbar{border:1px solid #000}.able-black-controls label,.able-white-controls,.able-white-controls div[role=button]{color:#fff!important}.able-white-controls .able-seekbar{border:1px solid #fff}.able-controller div[role=button]{background:0 0;position:relative;display:inline-block;border-style:none;margin:3px;padding:0;font-size:20px;min-width:24px;border:none;overflow:visible!important;z-index:6600}.able-controller div[role=button]>img,.able-controller div[role=button]>span{width:20px;margin:0 auto;padding:0;z-index:6700}.able-controller .buttonOff{opacity:.5;z-index:6800}.able-controller .able-seekbar{margin:0 5px;z-index:6900}.able-controller div[role=button]:focus,.able-controller div[role=button]:hover{outline-style:solid;outline-width:medium}.able-controller div[role=button]:hover{outline-color:#8ab839!important}.able-controller div[role=button]:focus{outline-color:#ffbb37!important}.able-controller button::-moz-focus-inner,.able-search-results button::-moz-focus-inner{border:0}.able-seekbar-wrapper{display:inline-block;vertical-align:middle}.able-seekbar{position:relative;height:.5em;border:1px solid;background-color:#000;margin:0 3px;border-style:solid;border-width:2px;border-color:#fff}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:.5em;background-color:#464646;z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:.5em;background-color:#dadada;z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;top:-.4em;background-color:#fdfdfd;width:.8em;height:.8em;border:1px solid;border-radius:.8em;z-index:5500}.able-volume-slider{width:34px;height:80px;background-color:#464646;margin:0;padding:5px 0;position:absolute;right:0;bottom:60px;display:block;z-index:9100}.able-volume-help{display:none}.able-volume-slider input[type=range]{appearance:slider-vertical;writing-mode:bt-rl;width:28px;height:100%;background:0 0}.able-volume-slider input[type=range]::-moz-range-track{border:1px solid #fff;width:7px;cursor:pointer;background:#000}input[type=range]::-moz-range-thumb{background-color:#fdfdfd;outline:1px solid #333;height:16px;width:24px;z-index:9175}.able-status-bar{height:1.5em;min-height:1.5em;color:#ccc;font-size:.9em;background-color:transparent;padding:.5em .5em .25em}.able-status-bar span.able-timer{text-align:left;float:left;width:32%}.able-status-bar span.able-speed{float:left;width:33%;text-align:center}.able-status{font-style:italic;float:right;width:32%;text-align:right}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;display:block;z-index:6000}div.able-captions{display:none;padding:.15em .25em;line-height:1.35em;background-color:#000;font-size:1em;color:#fff;opacity:.75}div.able-vidcap-container div.able-captions-overlay{position:absolute;margin:0;bottom:.5em}div.able-vidcap-container div.able-captions-below{position:relative;min-height:3.2em}div.able-audcap-container.captions-off{display:none}div.able-descriptions{position:relative;color:#ff6;background-color:#262626;min-height:2.8em;border-top:1px solid #666;margin:0;padding:3%;width:94%;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1.1em;color:#fff;background-color:transparent;padding:.5em .5em 1em}div.able-now-playing span{font-size:.9em}div.able-now-playing span span{display:block}div.able-video div.able-now-playing{display:none}div.able-modal-dialog{position:absolute;height:auto;max-width:90%;margin-left:auto;margin-right:auto;top:5%;left:0;right:0;outline:0 none;display:none;color:#000;background-color:#fafafa;box-sizing:content-box!important;z-index:10000;max-height:90%;overflow:scroll}@supports (transform:translate(-50%,-50%)){div.able-modal-dialog{top:50%;left:50%;transform:translate(-50%,-50%)!important}}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:#000;opacity:.5;margin:0;padding:0;top:0;left:0;display:none;z-index:9500}button.modalCloseButton{position:absolute;top:5px;right:5px}button.modal-button{margin-right:5px}div.able-modal-dialog button:focus,div.able-modal-dialog button:hover,div.able-modal-dialog input:focus,div.able-modal-dialog input:hover{outline-style:solid;outline-width:2px}div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:#8ab839}div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:#ffbb37}div.able-modal-dialog h1{font-weight:700;font-size:1.8em;line-height:1.2em;margin:.75em 0;color:#000;text-align:center}.able-help-div,.able-prefs-form,.able-resize-form{background-color:#f5f5f5;border:medium solid #ccc;padding:.5em 1em;margin:0 0 0 1em;width:25em;display:none}.able-prefs-form div[role=group]{margin:1em 0;padding:0;border:none}.able-prefs-form h2{color:#000;font-weight:700;font-size:1.1em}.able-prefs-form div[role=group]>div{display:table;margin-left:1em}.able-prefs-form div[role=group]>div>input{display:table-cell;width:1em;vertical-align:middle}.able-prefs-form div[role=group]>div>label{display:table-cell;padding-left:.5em}.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1em!important}.able-prefDescFormat>div{margin-left:1.5em}.able-prefs-captions label,.able-prefs-captions select{display:block;float:left;margin-bottom:.25em}.able-prefs-captions label{width:6em;text-align:right;padding-right:1em}.able-prefs-captions select{width:10em;font-size:.9em;border-radius:none}.able-prefs-descriptions>div.able-prefs-select{margin:.5em 1em}.able-prefs-descriptions>div.able-prefs-select>label,.able-prefs-descriptions>div.able-prefs-slider>label{width:6em;text-align:right;padding-right:1em}.able-prefs-descriptions>div.able-prefs-select>select,.able-prefs-descriptions>div.able-prefs-slider>select{width:10em;font-size:.9em;border-radius:none}div.able-prefDescPause{margin-top:1em}.able-prefs-form div.able-captions-sample{padding:.5em;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5em;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5em;font-size:1.1em}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1em}.able-resize-form h1{font-size:1.15em}.able-resize-form div div{margin:1em}.able-resize-form label{padding-right:.5em;font-weight:700}.able-resize-form input[type=text]{font-size:1em}.able-resize-form input[readonly]{color:#aaa}.able-window-toolbar{background-color:#464646;min-height:15px;padding:10px;border-style:solid;border-width:0 0 1px 0}.able-draggable:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{position:absolute;top:0;right:0;font-size:1.5em;background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar .able-button-handler-preferences:hover{outline-style:solid;outline-width:medium}.able-window-toolbar .able-button-handler-preferences:hover{outline-color:#8ab839!important}.able-window-toolbar .able-button-handler-preferences:focus{outline-color:#ffbb37!important}.able-window-toolbar .able-popup{position:absolute;cursor:default;right:0;top:0;display:block}.able-drag{border:2px dashed #f90;cursor:move}.able-resizable{position:absolute;width:20px;height:20px;padding:5px 2px;bottom:0;right:0;cursor:nwse-resize}.able-resizable svg line{stroke:#595959;stroke-width:2px}.able-sign-window{position:relative;margin:1em;z-index:8000}.able-sign-window video{width:100%}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0}div.able-chapters-div .able-chapters-heading{margin:1em .75em;font-size:1.1em;font-weight:700}div.able-chapters-div ul{list-style-type:none;padding-left:0}div.able-chapters-div ul li{max-width:100%;padding:0;height:2em}div.able-chapters-div button{width:100%;height:100%;border:none;background-color:transparent;color:#000;font-size:1em;text-align:left;padding:.15em 1em}div.able-chapters-div li.able-current-chapter{background-color:#000!important}div.able-chapters-div li.able-current-chapter button{color:#fff!important}div.able-chapters-div li.able-focus{background-color:#4c4c4c}div.able-chapters-div button::-moz-focus-inner,div.able-chapters-div button:focus,div.able-chapters-div button:hover{border:0;outline:0;color:#fff!important}div.able-wrapper.fullscreen{margin:0!important;position:fixed!important;top:0!important;background:0 0!important}.able-alert,.able-tooltip{position:absolute;padding:5px 10px;border-color:#000;border-width:1px;color:#000!important;background-color:#ccc;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block}.able-alert{background-color:#ffc;box-shadow:0 0 16px #262626;z-index:9400;position:absolute;top:1em}.able-popup{z-index:9200}.able-tooltip{z-index:9000}.able-popup{position:absolute;margin:0;padding:0;border-color:#000;border-width:1px;background-color:#000;opacity:.85;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block;cursor:default}ul.able-popup{list-style-type:none}.able-popup li{padding:.25em 1em .25em .25em;margin:1px;width:auto;color:#fff}.able-popup li.able-focus{background-color:#ccc;color:#000}.able-popup-captions li{padding-left:1em}.able-popup-captions li[aria-checked=true]{padding-left:0}.able-popup-captions li[aria-checked=true]::before{content:"\2713 "}.able-transcript-area{border-width:1px;border-style:solid;height:400px;z-index:7000;outline:0;padding-bottom:25px;background-color:#fff}.able-transcript{position:relative;overflow-y:scroll;padding-left:5%;padding-right:5%;background-color:#fff;height:350px}.able-transcript div{margin:1em 0}.able-transcript-heading{font-size:1.4em;font-weight:700;margin:1em 0;padding:0}.able-transcript-chapter-heading{font-size:1.2em;font-weight:700;margin:0;padding:0}.able-transcript div.able-transcript-desc{background-color:#fee;border:thin solid #336;font-style:italic;padding:1em}.able-transcript .able-unspoken{font-weight:700}.able-transcript .able-hidden{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover{background-color:#000!important;color:#fff!important;padding:.25em .1em;border:none;outline:0}.able-previous{background:#000!important;font-style:italic}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:#ffc;color:#000;border:none;outline:0;border-bottom:1px solid #000;cursor:pointer}.able-window-toolbar label{display:inline;margin-right:10px;color:#fff}.able-controller div[role=button]:focus,.able-controller div[role=button]:hover,.able-controller input:focus,.able-controller input:hover,.able-seekbar-head:focus,.able-seekbar-head:hover,.able-window-toolbar input:focus,.able-window-toolbar input:hover,.able-window-toolbar select:focus,.able-window-toolbar select:hover{outline-style:solid;outline-width:2px}.able-controller div[role=button]:focus,.able-controller input:focus,.able-seekbar-head:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus{outline-color:#ffbb37}.able-controller div[role=button]:hover,.able-controller input:hover,.able-seekbar-head:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover{outline-color:#8ab839}.able-window-toolbar .transcript-language-select-wrapper{float:right;padding-right:30px}.able-playlist{list-style-type:none;margin:0;background-color:#fff;padding:5px 0}.able-playlist li{background-color:#ddd;margin:5px;padding:0;border:2px solid #aaa;border-radius:5px;width:auto;max-width:100%}.able-playlist li button{border:none;color:#000;background-color:transparent;font-size:1em;width:100%;padding:5px 10px;text-align:left}.able-playlist li button:active,.able-playlist li button:focus,.able-playlist li button:hover{background-color:#ffeeb3;color:#000;text-decoration:none;outline:0}.able-playlist li button::-moz-focus-inner{border:0}.able-playlist li button img{width:100px;float:left;margin-right:10px}.able-playlist li.able-current{background-color:#340449;border-color:#230330}.able-playlist li.able-current button{color:#fff;font-weight:700;text-decoration:none;outline:0}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:#000}#able-search-term-echo{font-weight:700;font-style:italic}.able-search-results ul li{font-size:1.1em;margin-bottom:1em}button.able-search-results-time{font-size:1em;font-weight:700;cursor:pointer}button.able-search-results-time:active,button.able-search-results-time:focus,button.able-search-results-time:hover{color:#fff;background-color:#000}.able-search-results-text{padding-left:1em}.able-search-term{background-color:#ffc;font-weight:700}#search-term{font-weight:700;font-style:italic}#able-vts-instructions{margin-bottom:1.5em;padding:1em;border:1px solid #999;width:720px;max-width:90%}#able-vts fieldset{margin:1em;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{float:left;padding-right:1em}#able-vts table{clear:left}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #000;border-collapse:collapse;padding:.5em .75em}#able-vts table th.actions{min-width:140px}#able-vts table td button{width:auto;padding:0;margin:2px}#able-vts table td button svg{width:16px;height:16px}#able-vts table button:hover svg{fill:#c00}tr.kind-chapters,tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{margin:1em}div#able-vts-alert{display:none;position:fixed;top:5px;left:5px;border:2px solid #666;background-color:#ffc;padding:1em;font-weight:700;z-index:9400}button#able-vts-save{font-size:1em;padding:.25em;border-radius:5px;margin-bottom:1em;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}.able-clipped,.able-screenreader-alert{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);width:1px!important;height:1px!important;overflow:hidden!important}.able-error{display:block;background:#ffc;border:2px solid #000;color:red;margin:.75em;padding:.5em}.able-fallback{display:block;text-align:center;border:2px solid #335;background-color:#eee;color:#000;font-weight:700;font-size:1.1em;padding:1em;margin-bottom:1em;max-width:500px;width:95%}.able-fallback div,.able-fallback p,.able-fallback ul{text-align:left}.able-fallback li{font-weight:400}.able-fallback img{width:90%;margin:1em auto;opacity:.3}.able-fallback img.able-poster{position:relative}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:inline-block;width:1em;height:1em;fill:currentColor}div.able-skin-2020 div.able-seekbar-wrapper{width:99%;margin:10px 3px}@font-face{font-family:able;src:url(../button-icons/fonts/able.eot?dqripi);src:url(../button-icons/fonts/able.eot?dqripi#iefix) format('embedded-opentype'),url(../button-icons/fonts/able.ttf?dqripi) format('truetype'),url(../button-icons/fonts/able.woff?dqripi) format('woff'),url(../button-icons/fonts/able.svg?dqripi#able) format('svg');font-weight:400;font-style:normal}.able-wrapper [class=" icon-"],.able-wrapper [class^=icon-]{font-family:able!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-play:before{content:"\f04b"}.icon-pause:before{content:"\f04c"}.icon-stop:before{content:"\f04d"}.icon-restart:before{content:"\e900"}.icon-rewind:before{content:"\e603"}.icon-forward:before{content:"\e604"}.icon-previous:before{content:"\e901"}.icon-next:before{content:"\e902"}.icon-slower:before{content:"\f0dd"}.icon-faster:before{content:"\f0de"}.icon-turtle:before{content:"\e904"}.icon-rabbit:before{content:"\e905"}.icon-ellipsis:before{content:"\e903"}.icon-pipe:before{content:"\e600"}.icon-captions:before{content:"\e601"}.icon-descriptions:before{content:"\e602"}.icon-sign:before{content:"\e60a"}.icon-volume-mute:before{content:"\e606"}.icon-volume-soft:before{content:"\e60c"}.icon-volume-medium:before{content:"\e605"}.icon-volume-loud:before{content:"\e60b"}.icon-volume-up:before{content:"\e607"}.icon-volume-down:before{content:"\e608"}.icon-chapters:before{content:"\e609"}.icon-transcript:before{content:"\f15c"}.icon-preferences:before{content:"\e60d"}.icon-close:before{content:"\f00d"}.icon-fullscreen-expand:before{content:"\f065"}.icon-fullscreen-collapse:before{content:"\f066"}.icon-help:before{content:"\f128"} \ No newline at end of file +:root{--able-white:#fff;--able-black:#000;--able-transparent-gray:#00000077;--able-medium-light-gray:#a8a8a8;--able-light-gray:#dadada;--able-very-light-gray:#eee;--able-off-white:#fdfdfd;--able-dark-gray:#262626;--able-medium-dark-gray:#333;--able-medium-dark-gray2:#464646;--able-medium-gray:#666;--able-bright-yellow:#ff6;--able-light-yellow:#ffc;--able-bright-orange:#f90;--able-light-orange:#ffbb37;--able-bright-green:#8ab839;--able-light-pink:#fee}.able-chapters-div,.able-modal-dialog,.able-modal-overlay,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{--able-base-control-size:24px;--able-color:var(--able-white);--able-control-background:var(--able-black);--able-control-color:var(--able-white);--able-big-play-background:var(--able-transparent-gray);--able-alert-button-color:var(--able-black);--able-seekbar-border:var(--able-medium-light-gray);--able-seekbar-background:var(--able-black);--able-seekbar-loaded:var(--able-medium-gray);--able-seekbar-played:var(--able-light-gray);--able-seekbar-head:var(--able-off-white);--able-control-label-color:var(--able-white);--able-controller-background:var(--able-medium-dark-gray2);--able-separator-color:var(--able-medium-light-gray);--able-volume-background:var(--able-black);--able-volume-outline:var(--able-medium-gray);--able-statusbar-color:var(--able-light-gray);--able-statusbar-background:var(--able-black);--able-default-caption-color:var(--able-white);--able-default-caption-background:var(--able-black);--able-default-description-color:var(--able-bright-yellow);--able-default-description-background:var(--able-dark-gray);--able-description-border:var(--able-medium-gray);--able-now-playing-color:var(--able-white);--able-now-playing-background:var(--able-black);--able-modal-color:var(--able-black);--able-modal-background:var(--able-off-white);--able-modal-overlay:var(--able-transparent-gray);--able-modal-border:3px solid var(--able-light-gray);--able-drag-outline:var(--able-bright-orange);--able-sign-background:var(--able-white);--able-sign-border:var(--able-black);--able-resizable-color:var(--able-medium-gray);--able-chapter-background:transparent;--able-chapter-color:var(--able-black);--able-current-chapter-background:var(--able-black);--able-current-chapter-color:var(--able-white);--able-focus-outline:var(--able-light-orange);--able-hover-outline:var(--able-bright-green);--able-tooltip-border:var(--able-dark-gray);--able-tooltip-color:var(--able-medium-dark-gray);--able-tooltip-background:var(--able-very-light-gray);--able-alert-background:var(--able-light-yellow);--able-menu-border:var(--able-dark-gray);--able-menu-background:var(--able-black);--able-menu-outline:var(--able-medium-gray);--able-menu-color:var(--able-white);--able-menu-focus-background:var(--able-very-light-gray);--able-menu-focus-color:var(--able-black);--able-transcript-background:var(--able-white);--able-cue-audio-description-background:var(--able-light-pink);--able-cue-audio-description-color:var(--able-dark-gray);--able-cue-highlighted-background:var(--able-black);--able-cue-highlighted-color:var(--able-white);--able-cue-interacting-background:var(--able-light-yellow);--able-cue-interacting-color:var(--able-black);--able-playlist-item-background:var(--able-off-white);--able-playlist-item-color:var(--able-black);--able-playlist-item-button-color:var(--able-black);--able-search-results-button-background:var(--able-white);--able-search-results-button-color:var(--able-black);--able-playlist-current-background:var(--able-white);--able-playlist-current-border:var(--able-dark-gray);--able-playlist-current-outline:var(--able-medium-dark-gray);--able-playlist-current-active-color:var(--able-black);--able-playlist-current-active-background:var(--able-white);--able-search-term-background:var(--able-light-yellow);--able-search-term-color:var(--able-black)}.able-black-controls{--able-control-background:#fff!important;--able-control-color:#000!important}.able-chapters-div,.able-modal-dialog,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.able-chapters-div,.able-chapters-div ,.able-playlist,.able-playlist ,.able-wrapper,.able-wrapper {box-sizing:border-box}.able-wrapper{position:relative;margin:0 auto;padding:0;max-width:100%;height:auto;text-align:start}.able{position:relative;margin:0;padding:0;width:100%;z-index:5000;display:grid}.able-player-transcript .able-window-toolbar input,.able-wrapper .able input{margin:0;padding:2px 4px}.able-control-row{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;padding:8px 9px 8px;gap:4px}.able-pipe{position:relative;top:-2px;color:var(--able-separator-color);margin:0 6px}.able .able-vidcap-container{left:0;margin:0;position:relative;top:0}.able .able-audcap-container{position:relative;margin:0;padding:.5rem;min-height:3.2rem}.able-offscreen,.able-screenreader-alert,.able-transcript .able-hidden{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.able-media-container audio{display:none!important}.able-controller{position:relative;background-color:var(--able-controller-background);padding:0 4px}.able-audio .able-controller{padding-top:8px}.able-skin-legacy .able-controller{padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:visible}.able .able-vidcap-container video{max-width:100%;display:block}.able-media-container iframe,.able-sign-window iframe{max-width:100%!important;display:block!important}.able-wrapper .able button.able-big-play-button{position:absolute;color:var(--able-control-color);background-color:var(--able-big-play-background);background:var(--able-big-play-background);border:none;outline:0;left:0;top:0;padding:0;z-index:6500;opacity:.75;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.able-audio-wrapper{display:flex;gap:4px;align-items:center;padding:4px;background:var(--able-control-background)}.able-audio-wrapper img{max-width:120px}.able-audio-wrapper .able-audio{flex:1}.able-wrapper .able button.able-big-play-button:focus,.able-wrapper .able button.able-big-play-button:hover{opacity:100}.able-big-play-button svg{background-color:var(--able-control-background);padding:1rem;width:8rem;height:8rem;max-width:140px;max-height:140px;border-radius:8px}.able-big-play-button:focus svg,.able-big-play-button:hover svg{outline:3px solid}.able-left-controls,.able-right-controls{overflow:visible;display:flex;gap:3px;align-items:center;flex-wrap:wrap}.able-skin-legacy .able-left-controls,.able-skin-legacy .able-right-controls{width:fit-content}.able-controller,.able-controller button,.able-controller div[role=button]{color:var(--able-control-color)}.able-controller .able-alert button{color:var(--able-alert-button-color)!important}.able-controller .able-seekbar{border:1px solid var(--able-seekbar-border)}.able-controller div[role=button]{background:0 0;position:relative;padding:2px;min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:1rem;height:1rem;border:none;overflow:visible!important;display:flex;justify-content:center;align-items:center;z-index:6600;border-radius:3px}.able-controller div.able-button-handler-play[role=button]{padding:4px}.able-controller .buttonOff{opacity:.5}.able-seekbar-wrapper{display:block;width:100%;padding:6px 12px}.able-skin-legacy .able-seekbar-wrapper{padding:0}.able-seekbar{display:flex;align-items:center;position:relative;height:.5rem;border:1px solid;background-color:var(--able-seekbar-background);z-index:6500}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-loaded);z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-played);z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;background-color:var(--able-seekbar-head);min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:.875rem;height:.875rem;border-radius:100%;z-index:5500}.able-volume-slider{height:120px;background-color:var(--able-volume-background);outline:1px solid var(--able-volume-outline);margin:0;padding:8px;position:absolute;right:0;display:block;z-index:9100}.able-volume-help{display:none}.able-volume-slider input[type=range]{appearance:slider-vertical;writing-mode:bt-rl;width:28px;height:100%;background:0 0}.able-volume-slider input[type=range]::-moz-range-track{border:1px solid #fff;width:7px;cursor:pointer;background:#000}input[type=range]::-moz-range-thumb{background-color:var(--able-control-color);outline:1px solid var(--able-volume-outline);outline-offset:-2px;height:var(--able-base-control-size);width:var(--able-base-control-size);border-radius:100%}.able-status-bar{color:var(--able-statusbar-color);font-size:.875rem;padding:8px 12px;gap:12px;display:flex;align-items:center;justify-content:space-between;background:var(--able-statusbar-background)}.able-status-bar span.able-timer{text-align:start}.able-status-bar span.able-speed{text-align:center}.able-status{font-style:italic;text-align:end}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;display:block;z-index:6000}div.able-captions-wrapper:not(.able-captions-overlay){padding:0}div.able-captions{display:none;padding:4px 6px;line-height:1.4;background-color:var(--able-default-caption-background);font-size:1rem;color:var(--able-default-caption-color);opacity:.75}div.able-vidcap-container div.able-captions-overlay{position:absolute;margin:0;bottom:12px}div.able-vidcap-container div.able-captions-below{position:relative;min-height:4rem;display:flex;justify-content:center;align-items:center}div.able-audcap-container.captions-off{display:none}div.able-descriptions{position:relative;color:var(--able-default-description-color);background-color:var(--able-default-description-background);min-height:4rem;border-top:1px solid var(--able-description-border);margin:0;padding:12px;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1rem;padding:.5rem .5rem 1rem;color:var(--able-now-playing-color);background:var(--able-now-playing-background)}div.able-now-playing span{font-size:.875rem}div.able-video div.able-now-playing{display:none}div.able-modal-dialog{position:fixed;display:none;z-index:10000;max-height:90%;overflow:auto;transform:translate(-50%,-50%)!important;top:50%;left:50%;outline:0 none;color:var(--able-modal-color);background-color:var(--able-modal-background);border:var(--able-modal-border);width:fit-content;max-width:95%;padding:1rem;box-sizing:border-box}@media screen and (width < 800px){div.able-modal-dialog{min-width:95%}}body.able-modal-active{overflow:hidden}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:var(--able-modal-overlay);margin:0;padding:0;top:0;left:0;display:none;z-index:9500}.able-alert button,.able-modal-dialog button{all:unset;padding:4px 12px;font-size:1.125rem;border:2px solid}.able-prefs-buttons{display:flex;gap:8px;margin-top:1rem}.able-modkey-item.hidden{display:none}.able-modal-header{display:flex;justify-content:space-between;gap:8px}.able-modal-dialog .modalCloseButton{margin:0;align-self:flex-start}div.able-modal-dialog h1{font-size:1.5rem;line-height:1.6;margin:0 0 .5rem;order:-1}.able-prefs-form div[role=group]{padding:1rem 0;border:none}.able-prefs-form h2{font-weight:700;font-size:1.1rem}.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1rem!important}.able-prefDescFormat>div{margin-left:1.5rem}.able-prefs-captions>div,.able-prefs-descriptions>div{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.25rem}.able-prefs-captions label,.able-prefs-descriptions label{text-align:end;width:10rem}.able-prefs-checkbox label{width:auto}.able-prefs-captions select,.able-prefs-descriptions select{width:10rem}div.able-prefDescPause{margin-top:1rem}.able-prefs-form div.able-captions-sample{padding:.5rem;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5rem;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5rem;font-size:1.1rem}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1rem}.able-resize-form h1{font-size:1.15rem}.able-resize-form div div{margin:1rem 0}.able-resize-form label{display:block}.able-resize-form input{font-size:1.25rem;padding:4px}.able-resize-form input[readonly]{color:var(--able-separator-color)}.able-window-toolbar{background-color:var(--able-controller-background);color:var(--able-control-color);padding:8px;border:none;display:flex;align-items:center;justify-content:space-between;gap:12px}.able-window-toolbar button{order:1}.able-window-toolbar .autoscroll-transcript{order:3;width:fit-content;text-wrap:nowrap}.able-window-toolbar .transcript-language-select-wrapper{order:4}.able-window-toolbar .able-drag-handle{order:2;width:100%;height:100%}.able-window-toolbar .able-drag-handle svg{height:12px;width:auto;margin:0 auto}.able-window-toolbar .able-drag-handle path{fill:var(--able-medium-light-gray)}.able-draggable:hover .able-drag-handle path{fill:var(--able-very-light-gray)}.able-window-toolbar>div{display:flex}.able-window-toolbar button{color:var(--able-control-color)}.able-window-toolbar .able-button-handler-preferences svg{min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);height:1rem;width:1rem}.able-draggable .able-drag-handle:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences img{display:block}.able-window-toolbar .able-popup{position:absolute;cursor:default;left:0;top:0;display:block;border-radius:0 0 5px 5px;background:var(--able-controller-background)}.able-drag{outline:3px dashed var(--able-drag-outline);outline-offset:2px;cursor:move}.able-resizable{position:absolute;width:24px;height:24px;bottom:0;right:0;padding:1px;cursor:nwse-resize}.able-resizable svg line{stroke:var(--able-resizable-color);stroke-width:2px}.able-sign-window{position:relative;z-index:8000;background:var(--able-sign-background);border:1px solid var(--able-sign-border)}.fade-out{visibility:hidden;opacity:0;transition:visibility 0s 2s,opacity 2s linear}.fade-in{visibility:visible;opacity:1;transition:opacity 1s linear}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.able-sign-window video{width:100%;display:block}.able-sign-window .able-resizable{background:#00000033;background:linear-gradient(to bottom right,transparent 0,transparent 51%,#fff3 51%,#fff3 100%);border-top-left-radius:20px}.able-sign-window:hover .able-resizable{background:var(--able-very-light-gray);background:linear-gradient(to bottom right,transparent 0,transparent 51%,#fffe 51%,#fffe 100%)}.able-sign-window.able-fixed video{margin:0;display:block}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0;max-width:100%}div.able-chapters-div .able-chapters-heading{margin:8px;font-size:1.125rem;font-weight:700}div.able-chapters-div ul,div.able-chapters-div ul li{list-style-type:none;padding:0;margin:0}div.able-chapters-div button{all:unset;width:100%;height:100%;border:none;background-color:var(--able-chapter-background);color:var(--able-chapter-color);font-size:1rem;text-align:start;padding:8px;box-sizing:border-box}div.able-chapters-div li.able-current-chapter button{background-color:var(--able-current-chapter-background);color:var(--able-current-chapter-color)}div.able-chapters-div button:focus{border:0;outline:2px solid var(--able-focus-outline);outline-offset:2px}div.able-chapters-div button:hover{outline:2px solid var(--able-hover-outline);outline-offset:2px}div.able-wrapper.fullscreen{margin:0!important;position:fixed!important;top:0!important;background:0 0!important}.able-tooltip{position:absolute;padding:4px 8px;border:1px solid var(--able-tooltip-border);color:var(--able-tooltip-color)!important;background-color:var(--able-tooltip-background);border-radius:3px;display:block;font-size:.875rem}.able .able-alert{border:none}.able-alert{background-color:var(--able-alert-background);z-index:9400;padding:4px 8px;position:absolute;height:fit-content;width:100%;border:1px solid;border-radius:0;border-left-width:0;border-right-width:0;justify-content:space-between;align-items:center;gap:12px;bottom:0;left:0}.able-popup{z-index:9200}.able-tooltip{z-index:9500}.able ul.able-popup,ul.able-popup{position:absolute;margin:0;padding:0;padding-inline-start:0;list-style-type:none;border-width:1px;border-color:var(--able-menu-border);background-color:var(--able-menu-background);outline:1px solid var(--able-menu-outline);color:var(--able-menu-color);opacity:.95;border-radius:4px;display:grid;cursor:default;width:auto}.able ul.able-popup li,ul.able-popup li{padding:4px 16px;margin:0;width:auto}.able ul.able-popup li:first-of-type,ul.able-popup li:first-of-type{border-radius:4px 4px 0 0}.able ul.able-popup li:last-of-type,ul.able-popup li:last-of-type{border-radius:0 0 4px 4px}.able ul.able-popup li.able-focus,ul.able-popup li.able-focus{background-color:var(--able-menu-focus-background);color:var(--able-menu-focus-color)}.able-popup-captions li[aria-checked=true]::before{content:"\2713"/'';margin-right:4px}.able-transcript-area{border-width:1px;border-style:solid;z-index:7000;padding-bottom:25px;background-color:var(--able-transcript-background)}.able-transcript{position:relative;overflow-y:scroll;padding-left:1rem;padding-right:1rem;background-color:#fff;height:350px}.able-transcript div{margin:1rem 0}.able-transcript-heading{font-size:1.375rem;font-weight:700;margin:.5rem 0;padding:0}.able-transcript-chapter-heading{font-size:1.125rem;font-weight:700;margin:0;padding:0}.able-transcript div.able-transcript-desc{background-color:var(--able-cue-audio-description-background);color:var(--able-cue-audio-description-color);border:1px solid;font-style:italic;padding:.5rem}.able-transcript .able-unspoken{font-weight:700}.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover{background-color:var(--able-cue-highlighted-background)!important;color:var(--able-cue-highlighted-color)!important;padding:.25rem .1rem;border:none;outline:0}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:var(--able-cue-interacting-background);color:var(--able-cue-interacting-color);border:none;outline:0;border-bottom:1px solid;cursor:pointer}.able-window-toolbar label{display:inline;font-size:.875rem;margin-right:.333rem;color:var(--able-control-label-color)}.able-window-toolbar .autoscroll-transcript label{margin-right:0}.able-alert button,.able-controller div[role=button],.able-controller input,.able-modal-dialog button,.able-playlist li button,.able-popup li,.able-search-results li button,.able-seekbar-head,.able-window-toolbar .able-button-handler-preferences,.able-window-toolbar input,.able-window-toolbar select,div.able-modal-dialog button,div.able-modal-dialog input{outline-style:solid;outline-width:3px;outline-color:transparent}.able-alert button:focus,.able-controller div[role=button]:focus,.able-controller input:focus,.able-modal-dialog button:focus,.able-playlist button:focus,.able-search-results li button:focus,.able-seekbar-head:focus,.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus,.able-wrapper .able button.able-big-play-button:focus .icon-play,.able-wrapper .able button.able-big-play-button:focus svg,div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:var(--able-focus-outline)}.able-alert button:hover,.able-controller div[role=button]:hover,.able-controller input:hover,.able-modal-dialog button:hover,.able-playlist li button:hover,.able-popup li:hover,.able-search-results li button:hover,.able-seekbar-head:hover,.able-window-toolbar .able-button-handler-preferences:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover,.able-wrapper .able button.able-big-play-button:hover .icon-play,.able-wrapper .able button.able-big-play-button:hover svg,div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:var(--able-hover-outline)}.able-playlist,.able-search-results ul{list-style-type:none;margin:0;padding:0;display:grid}.able-playlist li,.able-search-results li{background-color:var(--able-playlist-item-background);color:var(--able-playlist-item-color);padding:0;margin:0;border:1px solid;width:auto;border-bottom:none;max-width:100%}.able-search-results li{display:flex}.able-playlist li:first-of-type:not(.able-player.able-playlistli),.able-search-results li:first-of-type{border-radius:5px 5px 0 0}.able-playlist li:last-of-type:not(.able-player.able-playlistli),.able-search-results li:last-of-type{border-bottom:2px solid;border-radius:0 0 5px 5px}.able-playlist li button,.able-search-results li button{border:none;color:var(--able-playlist-item-button-color);background-color:transparent;font-size:.875rem;width:100%;padding:8px;text-align:start;display:flex;align-items:center;gap:12px;outline-offset:-6px}.able-search-results li button{outline-offset:-3px;border-radius:4px}.able-search-results li>span{font-size:.875rem;padding:8px}.able-search-results li button{width:fit-content;background:var(--able-search-results-button-background);color:var(--able-search-results-buttonc-color);border-radius:3px;margin:2px}.able-playlist li button img{max-width:100px;max-height:100px;display:block}.able-playlist li.able-current{background-color:var(--able-playlist-current-background);border-color:var(--able-playlist-current-border);outline:2px solid var(--able-playlist-current-outline);outline-offset:-2px}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:var(--able-playlist-current-active-color);background:var(--able-playlist-current-active-background)}#able-search-term-echo{font-style:italic}button.able-search-results-time{font-weight:700;cursor:pointer}#able-search-term-echo,.able-search-term{background-color:var(--able-search-term-background);color:var(--able-search-term-color);font-weight:700}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:block;fill:currentColor}#able-vts-instructions{padding:1rem;border:1px solid #999;width:100%;margin:0 auto 1.5rem;box-sizing:border-box}#able-vts fieldset{margin:0 auto 1.5rem;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}#able-vts thead tr{background:#f0f0f0}#able-vts table{border-collapse:collapse}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #323232;padding:8px;color:#323232}#able-vts table td[contenteditable=true]{white-space:pre-wrap}#able-vts table td[contenteditable=true]:hover{background:#fff;color:#333}#able-vts table td[contenteditable=true]:focus-within{background:#fff;color:#000}#able-vts table td button{width:auto;padding:2px;margin:1px;display:flex;align-items:center;float:left;color:#323232;background:#f6f6f6;border-radius:2px}#able-vts table td button svg{width:22px;height:22px}#able-vts table button:hover svg{fill:#c00}tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{font-size:.875rem}div#able-vts-alert{display:none;position:fixed;top:16px;left:16px;border:2px solid #666;background-color:var(--able-alert-background);color:var(--able-black);padding:1rem;z-index:9400}button#able-vts-save{font-size:1rem;padding:6px 12px;border-radius:4px;margin-bottom:1rem;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}@media (width < 480px){.able-control-row{gap:8px}.able-control-row div[role=button]{min-width:32px;height:32px}.able-sign-window,.able-transcript-area{position:static!important;width:100%!important}div.able-captions-wrapper:not(.able-captions-overlay){min-height:5rem}} \ No newline at end of file diff --git a/src/build/ableplayer.min.js b/src/build/ableplayer.min.js index 689a873..0b7736d 100644 --- a/src/build/ableplayer.min.js +++ b/src/build/ableplayer.min.js @@ -1,3 +1,3 @@ -/! ableplayer V4.5.1 with DOMPurify included / -/! @license DOMPurify 3.2.4 \| (c) Cure53 and other contributors \| Released under the Apache license 2.0 and Mozilla Public License 2.0 \| github.com/cure53/DOMPurify/blob/3.2.4/LICENSE / -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t\|\|self).DOMPurify=e()}(this,(function(){"use strict";const{entries:t,setPrototypeOf:e,isFrozen:i,getPrototypeOf:s,getOwnPropertyDescriptor:a}=Object;let{freeze:n,seal:r,create:o}=Object,{apply:l,construct:h}="undefined"!=typeof Reflect&&Reflect;n\|\|(n=function freeze(t){return t}),r\|\|(r=function seal(t){return t}),l\|\|(l=function apply(t,e,i){return t.apply(e,i)}),h\|\|(h=function construct(t,e){return new t(...e)});const p=unapply(Array.prototype.forEach),c=unapply(Array.prototype.lastIndexOf),u=unapply(Array.prototype.pop),d=unapply(Array.prototype.push),f=unapply(Array.prototype.splice),m=unapply(String.prototype.toLowerCase),g=unapply(String.prototype.toString),v=unapply(String.prototype.match),y=unapply(String.prototype.replace),b=unapply(String.prototype.indexOf),T=unapply(String.prototype.trim),P=unapply(Object.prototype.hasOwnProperty),k=unapply(RegExp.prototype.test),C=function unconstruct(t){return function(){for(var e=arguments.length,i=new Array(e),s=0;s<e;s++)i[s]=arguments[s];return h(t,i)}}(TypeError);function unapply(t){return function(e){for(var i=arguments.length,s=new Array(i>1?i-1:0),a=1;a<i;a++)s[a-1]=arguments[a];return l(t,e,s)}}function addToSet(t,s){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:m;e&&e(t,null);let n=s.length;for(;n--;){let e=s[n];if("string"==typeof e){const t=a(e);t!==e&&(i(s)\|\|(s[n]=t),e=t)}t[e]=!0}return t}function cleanArray(t){for(let e=0;e<t.length;e++){P(t,e)\|\|(t[e]=null)}return t}function clone(e){const i=o(null);for(const[s,a]of t(e)){P(e,s)&&(Array.isArray(a)?i[s]=cleanArray(a):a&&"object"==typeof a&&a.constructor===Object?i[s]=clone(a):i[s]=a)}return i}function lookupGetter(t,e){for(;null!==t;){const i=a(t,e);if(i){if(i.get)return unapply(i.get);if("function"==typeof i.value)return unapply(i.value)}t=s(t)}return function fallbackValue(){return null}}const w=n(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","section","select","shadow","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),D=n(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","filter","font","g","glyph","glyphref","hkern","image","line","lineargradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),A=n(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),x=n(["animate","color-profile","cursor","discard","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),$=n(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]),S=n(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),N=n(["#text"]),I=n(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","face","for","headers","height","hidden","high","href","hreflang","id","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns","slot"]),M=n(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),B=n(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),L=n(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),E=r(/\{\{[\w\W]\|[\w\W]\}\}/gm),F=r(/<%[\w\W]\|[\w\W]%>/gm),O=r(/\$\{[\w\W]/gm),R=r(/^data-[\-\w.\u00B7-\uFFFF]+$/),V=r(/^aria-[\-\w]+$/),z=r(/^(?:(?:(?:f\|ht)tps?\|mailto\|tel\|callto\|sms\|cid\|xmpp):\|[^a-z]\|[a-z+.\-]+(?:[^a-z+.\-:]\|$))/i),H=r(/^(?:\w+script\|data):/i),W=r(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),_=r(/^html$/i),q=r(/^[a-z][.\w](-[.\w]+)+$/i);var j=Object.freeze({__proto__:null,ARIA_ATTR:V,ATTR_WHITESPACE:W,CUSTOM_ELEMENT:q,DATA_ATTR:R,DOCTYPE_NAME:_,ERB_EXPR:F,IS_ALLOWED_URI:z,IS_SCRIPT_OR_DATA:H,MUSTACHE_EXPR:E,TMPLIT_EXPR:O});const K=1,U=3,Y=7,G=8,X=9,Q=function getGlobal(){return"undefined"==typeof window?null:window};var Z=function createDOMPurify(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Q();const DOMPurify=t=>createDOMPurify(t);if(DOMPurify.version="3.2.4",DOMPurify.removed=[],!e\|\|!e.document\|\|e.document.nodeType!==X\|\|!e.Element)return DOMPurify.isSupported=!1,DOMPurify;let{document:i}=e;const s=i,a=s.currentScript,{DocumentFragment:r,HTMLTemplateElement:l,Node:h,Element:E,NodeFilter:F,NamedNodeMap:O=e.NamedNodeMap\|\|e.MozNamedAttrMap,HTMLFormElement:R,DOMParser:V,trustedTypes:H}=e,W=E.prototype,q=lookupGetter(W,"cloneNode"),Z=lookupGetter(W,"remove"),J=lookupGetter(W,"nextSibling"),tt=lookupGetter(W,"childNodes"),et=lookupGetter(W,"parentNode");if("function"==typeof l){const t=i.createElement("template");t.content&&t.content.ownerDocument&&(i=t.content.ownerDocument)}let it,st="";const{implementation:at,createNodeIterator:nt,createDocumentFragment:rt,getElementsByTagName:ot}=i,{importNode:lt}=s;let ht={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]};DOMPurify.isSupported="function"==typeof t&&"function"==typeof et&&at&&void 0!==at.createHTMLDocument;const{MUSTACHE_EXPR:pt,ERB_EXPR:ct,TMPLIT_EXPR:ut,DATA_ATTR:dt,ARIA_ATTR:ft,IS_SCRIPT_OR_DATA:mt,ATTR_WHITESPACE:gt,CUSTOM_ELEMENT:vt}=j;let{IS_ALLOWED_URI:yt}=j,bt=null;const Tt=addToSet({},[...w,...D,...A,...$,...N]);let Pt=null;const kt=addToSet({},[...I,...M,...B,...L]);let Ct=Object.seal(o(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),wt=null,Dt=null,At=!0,xt=!0,$t=!1,St=!0,Nt=!1,It=!0,Mt=!1,Bt=!1,Lt=!1,Et=!1,Ft=!1,Ot=!1,Rt=!0,Vt=!1,zt=!0,Ht=!1,Wt={},_t=null;const qt=addToSet({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]);let jt=null;const Kt=addToSet({},["audio","video","img","source","image","track"]);let Ut=null;const Yt=addToSet({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),Gt="http://www.w3.org/1998/Math/MathML",Xt="http://www.w3.org/2000/svg",Qt="http://www.w3.org/1999/xhtml";let Zt=Qt,Jt=!1,te=null;const ee=addToSet({},[Gt,Xt,Qt],g);let ie=addToSet({},["mi","mo","mn","ms","mtext"]),se=addToSet({},["annotation-xml"]);const ae=addToSet({},["title","style","font","a","script"]);let ne=null;const re=["application/xhtml+xml","text/html"];let oe=null,le=null;const he=i.createElement("form"),pe=function isRegexOrFunction(t){return t instanceof RegExp\|\|t instanceof Function},ce=function _parseConfig(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!le\|\|le!==t){if(t&&"object"==typeof t\|\|(t={}),t=clone(t),ne=-1===re.indexOf(t.PARSER_MEDIA_TYPE)?"text/html":t.PARSER_MEDIA_TYPE,oe="application/xhtml+xml"===ne?g:m,bt=P(t,"ALLOWED_TAGS")?addToSet({},t.ALLOWED_TAGS,oe):Tt,Pt=P(t,"ALLOWED_ATTR")?addToSet({},t.ALLOWED_ATTR,oe):kt,te=P(t,"ALLOWED_NAMESPACES")?addToSet({},t.ALLOWED_NAMESPACES,g):ee,Ut=P(t,"ADD_URI_SAFE_ATTR")?addToSet(clone(Yt),t.ADD_URI_SAFE_ATTR,oe):Yt,jt=P(t,"ADD_DATA_URI_TAGS")?addToSet(clone(Kt),t.ADD_DATA_URI_TAGS,oe):Kt,_t=P(t,"FORBID_CONTENTS")?addToSet({},t.FORBID_CONTENTS,oe):qt,wt=P(t,"FORBID_TAGS")?addToSet({},t.FORBID_TAGS,oe):{},Dt=P(t,"FORBID_ATTR")?addToSet({},t.FORBID_ATTR,oe):{},Wt=!!P(t,"USE_PROFILES")&&t.USE_PROFILES,At=!1!==t.ALLOW_ARIA_ATTR,xt=!1!==t.ALLOW_DATA_ATTR,$t=t.ALLOW_UNKNOWN_PROTOCOLS\|\|!1,St=!1!==t.ALLOW_SELF_CLOSE_IN_ATTR,Nt=t.SAFE_FOR_TEMPLATES\|\|!1,It=!1!==t.SAFE_FOR_XML,Mt=t.WHOLE_DOCUMENT\|\|!1,Et=t.RETURN_DOM\|\|!1,Ft=t.RETURN_DOM_FRAGMENT\|\|!1,Ot=t.RETURN_TRUSTED_TYPE\|\|!1,Lt=t.FORCE_BODY\|\|!1,Rt=!1!==t.SANITIZE_DOM,Vt=t.SANITIZE_NAMED_PROPS\|\|!1,zt=!1!==t.KEEP_CONTENT,Ht=t.IN_PLACE\|\|!1,yt=t.ALLOWED_URI_REGEXP\|\|z,Zt=t.NAMESPACE\|\|Qt,ie=t.MATHML_TEXT_INTEGRATION_POINTS\|\|ie,se=t.HTML_INTEGRATION_POINTS\|\|se,Ct=t.CUSTOM_ELEMENT_HANDLING\|\|{},t.CUSTOM_ELEMENT_HANDLING&&pe(t.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(Ct.tagNameCheck=t.CUSTOM_ELEMENT_HANDLING.tagNameCheck),t.CUSTOM_ELEMENT_HANDLING&&pe(t.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(Ct.attributeNameCheck=t.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),t.CUSTOM_ELEMENT_HANDLING&&"boolean"==typeof t.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements&&(Ct.allowCustomizedBuiltInElements=t.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),Nt&&(xt=!1),Ft&&(Et=!0),Wt&&(bt=addToSet({},N),Pt=[],!0===Wt.html&&(addToSet(bt,w),addToSet(Pt,I)),!0===Wt.svg&&(addToSet(bt,D),addToSet(Pt,M),addToSet(Pt,L)),!0===Wt.svgFilters&&(addToSet(bt,A),addToSet(Pt,M),addToSet(Pt,L)),!0===Wt.mathMl&&(addToSet(bt,$),addToSet(Pt,B),addToSet(Pt,L))),t.ADD_TAGS&&(bt===Tt&&(bt=clone(bt)),addToSet(bt,t.ADD_TAGS,oe)),t.ADD_ATTR&&(Pt===kt&&(Pt=clone(Pt)),addToSet(Pt,t.ADD_ATTR,oe)),t.ADD_URI_SAFE_ATTR&&addToSet(Ut,t.ADD_URI_SAFE_ATTR,oe),t.FORBID_CONTENTS&&(_t===qt&&(_t=clone(_t)),addToSet(_t,t.FORBID_CONTENTS,oe)),zt&&(bt["#text"]=!0),Mt&&addToSet(bt,["html","head","body"]),bt.table&&(addToSet(bt,["tbody"]),delete wt.tbody),t.TRUSTED_TYPES_POLICY){if("function"!=typeof t.TRUSTED_TYPES_POLICY.createHTML)throw C('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');if("function"!=typeof t.TRUSTED_TYPES_POLICY.createScriptURL)throw C('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');it=t.TRUSTED_TYPES_POLICY,st=it.createHTML("")}else void 0===it&&(it=function _createTrustedTypesPolicy(t,e){if("object"!=typeof t\|\|"function"!=typeof t.createPolicy)return null;let i=null;const s="data-tt-policy-suffix";e&&e.hasAttribute(s)&&(i=e.getAttribute(s));const a="dompurify"+(i?"#"+i:"");try{return t.createPolicy(a,{createHTML:t=>t,createScriptURL:t=>t})}catch(t){return null}}(H,a)),null!==it&&"string"==typeof st&&(st=it.createHTML(""));n&&n(t),le=t}},ue=addToSet({},[...D,...A,...x]),de=addToSet({},[...$,...S]),fe=function _forceRemove(t){d(DOMPurify.removed,{element:t});try{et(t).removeChild(t)}catch(e){Z(t)}},me=function _removeAttribute(t,e){try{d(DOMPurify.removed,{attribute:e.getAttributeNode(t),from:e})}catch(t){d(DOMPurify.removed,{attribute:null,from:e})}if(e.removeAttribute(t),"is"===t)if(Et\|\|Ft)try{fe(e)}catch(t){}else try{e.setAttribute(t,"")}catch(t){}},ge=function _initDocument(t){let e=null,s=null;if(Lt)t="<remove></remove>"+t;else{const e=v(t,/^[\r\n\t ]+/);s=e&&e[0]}"application/xhtml+xml"===ne&&Zt===Qt&&(t='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+t+"</body></html>");const a=it?it.createHTML(t):t;if(Zt===Qt)try{e=(new V).parseFromString(a,ne)}catch(t){}if(!e\|\|!e.documentElement){e=at.createDocument(Zt,"template",null);try{e.documentElement.innerHTML=Jt?st:a}catch(t){}}const n=e.body\|\|e.documentElement;return t&&s&&n.insertBefore(i.createTextNode(s),n.childNodes[0]\|\|null),Zt===Qt?ot.call(e,Mt?"html":"body")[0]:Mt?e.documentElement:n},ve=function _createNodeIterator(t){return nt.call(t.ownerDocument\|\|t,t,F.SHOW_ELEMENT\|F.SHOW_COMMENT\|F.SHOW_TEXT\|F.SHOW_PROCESSING_INSTRUCTION\|F.SHOW_CDATA_SECTION,null)},ye=function _isClobbered(t){return t instanceof R&&("string"!=typeof t.nodeName\|\|"string"!=typeof t.textContent\|\|"function"!=typeof t.removeChild\|\|!(t.attributes instanceof O)\|\|"function"!=typeof t.removeAttribute\|\|"function"!=typeof t.setAttribute\|\|"string"!=typeof t.namespaceURI\|\|"function"!=typeof t.insertBefore\|\|"function"!=typeof t.hasChildNodes)},be=function _isNode(t){return"function"==typeof h&&t instanceof h};function _executeHooks(t,e,i){p(t,(t=>{t.call(DOMPurify,e,i,le)}))}const Te=function _sanitizeElements(t){let e=null;if(_executeHooks(ht.beforeSanitizeElements,t,null),ye(t))return fe(t),!0;const i=oe(t.nodeName);if(_executeHooks(ht.uponSanitizeElement,t,{tagName:i,allowedTags:bt}),t.hasChildNodes()&&!be(t.firstElementChild)&&k(/<[/\w]/g,t.innerHTML)&&k(/<[/\w]/g,t.textContent))return fe(t),!0;if(t.nodeType===Y)return fe(t),!0;if(It&&t.nodeType===G&&k(/<[/\w]/g,t.data))return fe(t),!0;if(!bt[i]\|\|wt[i]){if(!wt[i]&&ke(i)){if(Ct.tagNameCheck instanceof RegExp&&k(Ct.tagNameCheck,i))return!1;if(Ct.tagNameCheck instanceof Function&&Ct.tagNameCheck(i))return!1}if(zt&&!_t[i]){const e=et(t)\|\|t.parentNode,i=tt(t)\|\|t.childNodes;if(i&&e){for(let s=i.length-1;s>=0;--s){const a=q(i[s],!0);a.__removalCount=(t.__removalCount\|\|0)+1,e.insertBefore(a,J(t))}}}return fe(t),!0}return t instanceof E&&!function _checkValidNamespace(t){let e=et(t);e&&e.tagName\|\|(e={namespaceURI:Zt,tagName:"template"});const i=m(t.tagName),s=m(e.tagName);return!!te[t.namespaceURI]&&(t.namespaceURI===Xt?e.namespaceURI===Qt?"svg"===i:e.namespaceURI===Gt?"svg"===i&&("annotation-xml"===s\|\|ie[s]):Boolean(ue[i]):t.namespaceURI===Gt?e.namespaceURI===Qt?"math"===i:e.namespaceURI===Xt?"math"===i&&se[s]:Boolean(de[i]):t.namespaceURI===Qt?!(e.namespaceURI===Xt&&!se[s])&&!(e.namespaceURI===Gt&&!ie[s])&&!de[i]&&(ae[i]\|\|!ue[i]):!("application/xhtml+xml"!==ne\|\|!te[t.namespaceURI]))}(t)?(fe(t),!0):"noscript"!==i&&"noembed"!==i&&"noframes"!==i\|\|!k(/<\/no(script\|embed\|frames)/i,t.innerHTML)?(Nt&&t.nodeType===U&&(e=t.textContent,p([pt,ct,ut],(t=>{e=y(e,t," ")})),t.textContent!==e&&(d(DOMPurify.removed,{element:t.cloneNode()}),t.textContent=e)),_executeHooks(ht.afterSanitizeElements,t,null),!1):(fe(t),!0)},Pe=function _isValidAttribute(t,e,s){if(Rt&&("id"===e\|\|"name"===e)&&(s in i\|\|s in he))return!1;if(xt&&!Dt[e]&&k(dt,e));else if(At&&k(ft,e));else if(!Pt[e]\|\|Dt[e]){if(!(ke(t)&&(Ct.tagNameCheck instanceof RegExp&&k(Ct.tagNameCheck,t)\|\|Ct.tagNameCheck instanceof Function&&Ct.tagNameCheck(t))&&(Ct.attributeNameCheck instanceof RegExp&&k(Ct.attributeNameCheck,e)\|\|Ct.attributeNameCheck instanceof Function&&Ct.attributeNameCheck(e))\|\|"is"===e&&Ct.allowCustomizedBuiltInElements&&(Ct.tagNameCheck instanceof RegExp&&k(Ct.tagNameCheck,s)\|\|Ct.tagNameCheck instanceof Function&&Ct.tagNameCheck(s))))return!1}else if(Ut[e]);else if(k(yt,y(s,gt,"")));else if("src"!==e&&"xlink:href"!==e&&"href"!==e\|\|"script"===t\|\|0!==b(s,"data:")\|\|!jt[t]){if($t&&!k(mt,y(s,gt,"")));else if(s)return!1}else;return!0},ke=function _isBasicCustomElement(t){return"annotation-xml"!==t&&v(t,vt)},Ce=function _sanitizeAttributes(t){_executeHooks(ht.beforeSanitizeAttributes,t,null);const{attributes:e}=t;if(!e\|\|ye(t))return;const i={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:Pt,forceKeepAttr:void 0};let s=e.length;for(;s--;){const a=e[s],{name:n,namespaceURI:r,value:o}=a,l=oe(n);let h="value"===n?o:T(o);if(i.attrName=l,i.attrValue=h,i.keepAttr=!0,i.forceKeepAttr=void 0,_executeHooks(ht.uponSanitizeAttribute,t,i),h=i.attrValue,!Vt\|\|"id"!==l&&"name"!==l\|\|(me(n,t),h="user-content-"+h),It&&k(/((--!?\|])>)\|<\/(style\|title)/i,h)){me(n,t);continue}if(i.forceKeepAttr)continue;if(me(n,t),!i.keepAttr)continue;if(!St&&k(/\/>/i,h)){me(n,t);continue}Nt&&p([pt,ct,ut],(t=>{h=y(h,t," ")}));const c=oe(t.nodeName);if(Pe(c,l,h)){if(it&&"object"==typeof H&&"function"==typeof H.getAttributeType)if(r);else switch(H.getAttributeType(c,l)){case"TrustedHTML":h=it.createHTML(h);break;case"TrustedScriptURL":h=it.createScriptURL(h)}try{r?t.setAttributeNS(r,n,h):t.setAttribute(n,h),ye(t)?fe(t):u(DOMPurify.removed)}catch(t){}}}_executeHooks(ht.afterSanitizeAttributes,t,null)},we=function _sanitizeShadowDOM(t){let e=null;const i=ve(t);for(_executeHooks(ht.beforeSanitizeShadowDOM,t,null);e=i.nextNode();)_executeHooks(ht.uponSanitizeShadowNode,e,null),Te(e),Ce(e),e.content instanceof r&&_sanitizeShadowDOM(e.content);_executeHooks(ht.afterSanitizeShadowDOM,t,null)};return DOMPurify.sanitize=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=null,a=null,n=null,o=null;if(Jt=!t,Jt&&(t="\x3c!--\x3e"),"string"!=typeof t&&!be(t)){if("function"!=typeof t.toString)throw C("toString is not a function");if("string"!=typeof(t=t.toString()))throw C("dirty is not a string, aborting")}if(!DOMPurify.isSupported)return t;if(Bt\|\|ce(e),DOMPurify.removed=[],"string"==typeof t&&(Ht=!1),Ht){if(t.nodeName){const e=oe(t.nodeName);if(!bt[e]\|\|wt[e])throw C("root node is forbidden and cannot be sanitized in-place")}}else if(t instanceof h)i=ge("\x3c!----\x3e"),a=i.ownerDocument.importNode(t,!0),a.nodeType===K&&"BODY"===a.nodeName\|\|"HTML"===a.nodeName?i=a:i.appendChild(a);else{if(!Et&&!Nt&&!Mt&&-1===t.indexOf("<"))return it&&Ot?it.createHTML(t):t;if(i=ge(t),!i)return Et?null:Ot?st:""}i&&Lt&&fe(i.firstChild);const l=ve(Ht?t:i);for(;n=l.nextNode();)Te(n),Ce(n),n.content instanceof r&&we(n.content);if(Ht)return t;if(Et){if(Ft)for(o=rt.call(i.ownerDocument);i.firstChild;)o.appendChild(i.firstChild);else o=i;return(Pt.shadowroot\|\|Pt.shadowrootmode)&&(o=lt.call(s,o,!0)),o}let c=Mt?i.outerHTML:i.innerHTML;return Mt&&bt["!doctype"]&&i.ownerDocument&&i.ownerDocument.doctype&&i.ownerDocument.doctype.name&&k(_,i.ownerDocument.doctype.name)&&(c="<!DOCTYPE "+i.ownerDocument.doctype.name+">\n"+c),Nt&&p([pt,ct,ut],(t=>{c=y(c,t," ")})),it&&Ot?it.createHTML(c):c},DOMPurify.setConfig=function(){ce(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),Bt=!0},DOMPurify.clearConfig=function(){le=null,Bt=!1},DOMPurify.isValidAttribute=function(t,e,i){le\|\|ce({});const s=oe(t),a=oe(e);return Pe(s,a,i)},DOMPurify.addHook=function(t,e){"function"==typeof e&&d(ht[t],e)},DOMPurify.removeHook=function(t,e){if(void 0!==e){const i=c(ht[t],e);return-1===i?void 0:f(ht[t],i,1)[0]}return u(ht[t])},DOMPurify.removeHooks=function(t){ht[t]=[]},DOMPurify.removeAllHooks=function(){ht={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}},DOMPurify}();return Z}));var AblePlayerInstances=[];!function(t){t((function(){t("video, audio").each((function(e,i){void 0!==t(i).data("able-player")&&AblePlayerInstances.push(new AblePlayer(t(this),t(i)))}))})),window.onYouTubeIframeAPIReady=function(){AblePlayer.youTubeIframeAPIReady=!0,t("body").trigger("youTubeIframeAPIReady",[])},t(window).on("keydown",(function(t){1===AblePlayer.nextIndex&&AblePlayer.lastCreated.onPlayerKeyPress(t)})),window.AblePlayer=function(e){if(AblePlayer.lastCreated=this,this.media=e,0!==t(e).length){if(void 0!==t(e).attr("autoplay")?(this.autoplay=!0,this.okToPlay=!0):(this.autoplay=!1,this.okToPlay=!1),void 0!==t(e).attr("loop")?this.loop=!0:this.loop=!1,void 0!==t(e).attr("playsinline")?this.playsInline="1":this.playsInline="0",t(e).attr("poster")?this.hasPoster=!0:this.hasPoster=!1,t(e).attr("width")&&(this.width=t(e).attr("width")),t(e).attr("height")&&(this.height=t(e).attr("height")),void 0!==t(e).data("start-time")&&t.isNumeric(t(e).data("start-time"))?this.startTime=t(e).data("start-time"):this.startTime=0,void 0!==t(e).data("debug")&&!1!==t(e).data("debug")?this.debug=!0:this.debug=!1,void 0!==t(e).data("root-path")?this.rootPath=t(e).data("root-path").replace(/\/?$/,"/"):this.rootPath=this.getRootPath(),this.defaultVolume=7,void 0!==t(e).data("volume")&&""!==t(e).data("volume")){var i=t(e).data("volume");i>=0&&i<=10&&(this.defaultVolume=i)}if(this.volume=this.defaultVolume,void 0!==t(e).data("use-chapters-button")&&!1===t(e).data("use-chapters-button")?this.useChaptersButton=!1:this.useChaptersButton=!0,void 0!==t(e).data("descriptions-audible")&&!1===t(e).data("descriptions-audible")\|\|void 0!==t(e).data("description-audible")&&!1===t(e).data("description-audible")?this.readDescriptionsAloud=!1:this.readDescriptionsAloud=!0,"screenreader"==t(e).data("desc-reader")?this.descReader="screenreader":this.descReader="browser","off"==t(e).data("state-captions")?this.defaultStateCaptions=0:this.defaultStateCaptions=1,"on"==t(e).data("state-descriptions")?this.defaultStateDescriptions=1:this.defaultStateDescriptions=0,"off"==t(e).data("desc-pause-default")?this.defaultDescPause=0:this.defaultDescPause=1,void 0!==t(e).data("heading-level")&&""!==t(e).data("heading-level")){var s=t(e).data("heading-level");/^[0-6]$/.test(s)&&(this.playerHeadingLevel=s)}if(void 0!==t(e).data("transcript-div")&&""!==t(e).data("transcript-div")?this.transcriptDivLocation=t(e).data("transcript-div"):this.transcriptDivLocation=null,void 0!==t(e).data("include-transcript")&&!1===t(e).data("include-transcript")?this.hideTranscriptButton=!0:this.hideTranscriptButton=null,this.transcriptType=null,void 0!==t(e).data("transcript-src")?(this.transcriptSrc=t(e).data("transcript-src"),this.transcriptSrcHasRequiredParts()&&(this.transcriptType="manual")):t(e).find('track[kind="captions"], track[kind="subtitles"]').length>0&&(this.transcriptDivLocation?this.transcriptType="external":this.transcriptType="popup"),void 0!==t(e).data("lyrics-mode")&&!1!==t(e).data("lyrics-mode")?this.lyricsMode=!0:this.lyricsMode=!1,void 0!==t(e).data("transcript-title")&&""!==t(e).data("transcript-title")&&(this.transcriptTitle=t(e).data("transcript-title")),"overlay"===t(e).data("captions-position")?this.defaultCaptionsPosition="overlay":this.defaultCaptionsPosition="below",void 0!==t(e).data("chapters-div")&&""!==t(e).data("chapters-div")&&(this.chaptersDivLocation=t(e).data("chapters-div")),void 0!==t(e).data("chapters-title")&&(this.chaptersTitle=t(e).data("chapters-title")),void 0!==t(e).data("chapters-default")&&""!==t(e).data("chapters-default")?this.defaultChapter=t(e).data("chapters-default"):this.defaultChapter=null,"arrows"===t(e).data("speed-icons")?this.speedIcons="arrows":this.speedIcons="animals","chapter"===t(e).data("seekbar-scope")\|\|"chapters"===t(e).data("seekbar-scope")?this.seekbarScope="chapter":this.seekbarScope="video",void 0!==t(e).data("youtube-id")&&""!==t(e).data("youtube-id")&&(this.youTubeId=this.getYouTubeId(t(e).data("youtube-id"))),void 0!==t(e).data("youtube-desc-id")&&""!==t(e).data("youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(t(e).data("youtube-desc-id"))),void 0!==t(e).data("youtube-nocookie")&&t(e).data("youtube-nocookie")?this.youTubeNoCookie=!0:this.youTubeNoCookie=!1,void 0!==t(e).data("vimeo-id")&&""!==t(e).data("vimeo-id")&&(this.vimeoId=this.getVimeoId(t(e).data("vimeo-id"))),void 0!==t(e).data("vimeo-desc-id")&&""!==t(e).data("vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(t(e).data("vimeo-desc-id"))),"2020"==t(e).data("skin")?this.skin="2020":this.skin="legacy",void 0!==t(e).data("width")?this.playerWidth=parseInt(t(e).data("width")):t(e)[0].getAttribute("width")?this.playerWidth=parseInt(t(e)[0].getAttribute("width")):this.playerWidth=null,this.iconType="font",this.forceIconType=!1,void 0!==t(e).data("icon-type")&&""!==t(e).data("icon-type")){var a=t(e).data("icon-type");"font"!==a&&"image"!=a&&"svg"!=a\|\|(this.iconType=a,this.forceIconType=!0)}if(void 0!==t(e).data("allow-fullscreen")&&!1===t(e).data("allow-fullscreen")?this.allowFullscreen=!1:this.allowFullscreen=!0,this.clickedFullscreenButton=!1,this.restoringAfterFullscreen=!1,this.defaultSeekInterval=10,this.useFixedSeekInterval=!1,void 0!==t(e).data("seek-interval")&&""!==t(e).data("seek-interval")){var n=t(e).data("seek-interval");/^[1-9][0-9]$/.test(n)&&(this.seekInterval=n,this.useFixedSeekInterval=!0)}void 0!==t(e).data("show-now-playing")&&!1===t(e).data("show-now-playing")?this.showNowPlaying=!1:this.showNowPlaying=!0,void 0!==t(e).data("use-ttml")?(this.useTtml=!0,this.convert=require("xml-js")):this.useTtml=!1,void 0!==t(e).data("test-fallback")&&!1!==t(e).data("test-fallback")?"2"==t(e).data("test-fallback")?this.testFallback=2:this.testFallback=1:this.testFallback=!1,void 0!==t(e).data("lang")&&""!==t(e).data("lang")?this.lang=t(e).data("lang").toLowerCase():this.lang=null,void 0!==t(e).data("meta-type")&&""!==t(e).data("meta-type")&&(this.metaType=t(e).data("meta-type")),void 0!==t(e).data("meta-div")&&""!==t(e).data("meta-div")&&(this.metaDiv=t(e).data("meta-div")),void 0!==t(e).data("search-div")&&""!==t(e).data("search-div")&&(this.searchDiv=t(e).data("search-div"),void 0!==t(e).data("search")&&""!==t(e).data("search")&&(this.searchString=t(e).data("search")),void 0!==t(e).data("search-lang")&&""!==t(e).data("search-lang")?this.searchLang=t(e).data("search-lang"):this.searchLang=null,void 0!==t(e).data("search-ignore-caps")&&!1!==t(e).data("search-ignore-caps")?this.searchIgnoreCaps=!0:this.searchIgnoreCaps=!1,void 0!==t(e).data("search-div")&&""!==t(e).data("search-div")&&(this.searchString=t(e).data("search"),this.searchDiv=t(e).data("search-div"))),void 0!==t(e).data("hide-controls")&&!1!==t(e).data("hide-controls")?(this.hideControls=!0,this.hideControlsOriginal=!0):(this.hideControls=!1,this.hideControlsOriginal=!1),void 0!==t(e).data("steno-mode")&&!1!==t(e).data("steno-mode")?(this.stenoMode=!0,void 0!==t(e).data("steno-iframe-id")&&""!==t(e).data("steno-iframe-id")?(this.stenoFrameId=t(e).data("steno-iframe-id"),this.$stenoFrame=t("#"+this.stenoFrameId),this.$stenoFrame.length\|\|(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoMode=!1,this.stenoFrameId=null,this.$stenoFrame=null),this.setDefaults(),this.ableIndex=AblePlayer.nextIndex,AblePlayer.nextIndex+=1,this.title=t(e).attr("title"),this.tt={};var r=this;t.when(this.getTranslationText()).then((function(){r.countProperties(r.tt)>50?r.setup():r.provideFallback()})).fail((function(){r.provideFallback()}))}else this.provideFallback()},AblePlayer.nextIndex=0,AblePlayer.prototype.setup=function(){var t=this;this.initializing=!0,this.reinitialize().then((function(){t.player?t.setupInstance().then((function(){t.setupInstancePlaylist(),t.hasPlaylist\|\|t.recreatePlayer().then((function(){t.initializing=!1,t.playerCreated=!0}))})):t.provideFallback()}))},AblePlayer.getActiveDOMElement=function(){for(var t=document.activeElement;t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t},AblePlayer.localGetElementById=function(e,i){return e.getRootNode?t(e.getRootNode().querySelector("#"+i)):t(document.getElementById(i))},AblePlayer.youTubeIframeAPIReady=!1,AblePlayer.loadingYouTubeIframeAPI=!1}(jQuery),function(t){AblePlayer.prototype.setDefaults=function(){this.playerCreated=!1,this.playing=!1,this.paused=!0,this.clickedPlay=!1,this.fullscreen=!1,this.swappingSrc=!1,this.initializing=!1,this.cueingPlaylistItems=!1,this.buttonWithFocus=null,this.speechEnabled=null,this.setIconColor(),this.setButtonImages()},AblePlayer.prototype.getRootPath=function(){var t,e,i,s,a,n;for(t=document.getElementsByTagName("script"),e=0;e<t.length;e++)if(-1!==(i=t[e].src).substring(i.lastIndexOf("/")).indexOf("ableplayer")){s=i.split("?")[0];break}return n=(a=s.split("/").slice(0,-1).join("/")).lastIndexOf("/"),a.substring(0,n)+"/"},AblePlayer.prototype.setIconColor=function(){var e,i,s,a,n;for(e=["controller","toolbar"],i=0;i<e.length;i++)"controller"==e[i]?s=t("<div>",{class:"able-controller"}).hide():"toolbar"===e[i]&&(s=t("<div>",{class:"able-window-toolbar"}).hide()),t("body").append(s),n=.2126(a=s.css("background-color").replace(/[^\d,]/g,"").split(","))[0]+.7152a[1]+.0722a[2]<125?"white":"black","controller"===e[i]?this.iconColor=n:"toolbar"===e[i]&&(this.toolbarIconColor=n),s.remove()},AblePlayer.prototype.setButtonImages=function(){this.imgPath=this.rootPath+"button-icons/"+this.iconColor+"/",this.playButtonImg=this.imgPath+"play.png",this.pauseButtonImg=this.imgPath+"pause.png",this.restartButtonImg=this.imgPath+"restart.png",this.rewindButtonImg=this.imgPath+"rewind.png",this.forwardButtonImg=this.imgPath+"forward.png",this.previousButtonImg=this.imgPath+"previous.png",this.nextButtonImg=this.imgPath+"next.png","arrows"===this.speedIcons?(this.fasterButtonImg=this.imgPath+"slower.png",this.slowerButtonImg=this.imgPath+"faster.png"):"animals"===this.speedIcons&&(this.fasterButtonImg=this.imgPath+"rabbit.png",this.slowerButtonImg=this.imgPath+"turtle.png"),this.captionsButtonImg=this.imgPath+"captions.png",this.chaptersButtonImg=this.imgPath+"chapters.png",this.signButtonImg=this.imgPath+"sign.png",this.transcriptButtonImg=this.imgPath+"transcript.png",this.descriptionsButtonImg=this.imgPath+"descriptions.png",this.fullscreenExpandButtonImg=this.imgPath+"fullscreen-expand.png",this.fullscreenCollapseButtonImg=this.imgPath+"fullscreen-collapse.png",this.prefsButtonImg=this.imgPath+"preferences.png",this.helpButtonImg=this.imgPath+"help.png"},AblePlayer.prototype.getSvgData=function(t){var e=Array();switch(t){case"play":e[0]="0 0 16 20",e[1]="M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z";break;case"pause":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"stop":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"restart":e[0]="0 0 20 20",e[1]="M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z";break;case"rewind":e[0]="0 0 20 20",e[1]="M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z";break;case"forward":e[0]="0 0 20 20",e[1]="M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z";break;case"previous":e[0]="0 0 20 20",e[1]="M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z";break;case"next":e[0]="0 0 20 20",e[1]="M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z";break;case"slower":e[0]="0 0 20 20",e[1]="M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z";break;case"faster":e[0]="0 0 11 20",e[1]="M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"turtle":e[0]="0 0 20 20",e[1]="M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z";break;case"rabbit":e[0]="0 0 20 20",e[1]="M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z";break;case"ellipsis":e[0]="0 0 20 20",e[1]="M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z";break;case"pipe":e[0]="0 0 20 20",e[1]="M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z";break;case"captions":e[0]="0 0 20 20",e[1]="M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z";break;case"descriptions":e[0]="0 0 20 20",e[1]="M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z";break;case"sign":e[0]="0 0 20 20",e[1]="M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z";break;case"mute":case"volume-mute":e[0]="0 0 20 20",e[1]="M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z";break;case"volume-soft":e[0]="0 0 20 20",e[1]="M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-medium":e[0]="0 0 20 20",e[1]="M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-loud":e[0]="0 0 21 20",e[1]="M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"chapters":e[0]="0 0 20 20",e[1]="M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z";break;case"transcript":e[0]="0 0 20 20",e[1]="M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z";break;case"preferences":e[0]="0 0 20 20",e[1]="M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z";break;case"close":e[0]="0 0 16 20",e[1]="M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z";break;case"fullscreen-expand":e[0]="0 0 20 20",e[1]="M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z";break;case"fullscreen-collapse":e[0]="0 0 20 20",e[1]="M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"help":e[0]="0 0 11 20",e[1]="M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z"}return e},AblePlayer.prototype.reinitialize=function(){var e,i;if(i=(e=new t.Deferred).promise(),window.console\|\|(this.debug=!1),this.startedPlaying=!1,this.autoScrollTranscript=!0,this.$media=t(this.media).first(),this.media=this.$media[0],this.$media.is("audio"))this.mediaType="audio";else{if(!this.$media.is("video"))return this.provideFallback(),e.fail(),i;this.mediaType="video"}return this.$sources=this.$media.find("source"),this.player=this.getPlayer(),this.player\|\|this.provideFallback(),this.setIconType(),e.resolve(),i},AblePlayer.prototype.setPlayerSize=function(t,e){this.$media.attr("id");"audio"===this.mediaType?this.playerWidth&&this.$ableWrapper.css("width",this.playerWidth+"px"):t>0&&e>0&&(this.playerWidth=t,this.playerHeight=e,this.aspectRatio=e/t)},AblePlayer.prototype.setIconType=function(){var e,i,s;if(this.forceIconType)return!1;document.createElementNS&&document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect?this.iconType="svg":(window.getComputedStyle?(t("span.icon-play").length?i=t("span.icon-play"):(e=t("<span>",{class:"icon-play able-clipped"}),t("body").append(e),i=e),void 0!==(s=window.getComputedStyle(i.get(0),null).getPropertyValue("font-family"))&&-1!==s.indexOf("able")?this.iconType="font":this.iconType="image"):this.iconType="image",void 0!==e&&e.remove())},AblePlayer.prototype.setupInstance=function(){var e=new t.Deferred,i=e.promise();return this.$media.attr("id")?this.mediaId=this.$media.attr("id"):(this.mediaId="ableMediaId_"+this.ableIndex,this.$media.attr("id",this.mediaId)),e.resolve(),i},AblePlayer.prototype.setupInstancePlaylist=function(){var e=this;if(this.hasPlaylist=!1,t(".able-playlist").each((function(){if(t(this).data("player")===e.mediaId){e.hasPlaylist=!0,e.$playlist=t(this).find("li"),t(this).find("li[data-youtube-id]").each((function(){var i=t(this).attr("data-youtube-id"),s=e.getYouTubePosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)})),t(this).find("li[data-vimeo-id]").each((function(){var i=t(this).attr("data-youtube-id"),s=e.getVimeoPosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)})),t(this).find("li span").attr("aria-hidden","true"),e.playlistIndex=0;var i=t(this).data("embedded");e.playlistEmbed=void 0!==i&&!1!==i}})),this.hasPlaylist&&this.loop&&this.media.removeAttribute("loop"),this.hasPlaylist&&this.playlistEmbed){var i=this.$playlist.parent();this.$playlistDom=i.clone(),i.remove()}this.hasPlaylist&&0===this.$sources.length&&(this.cuePlaylistItem(0),this.$sources=this.$media.find("source"))},AblePlayer.prototype.recreatePlayer=function(){var e,i,s,a,n;if(this.player)return i=(e=new t.Deferred).promise(),s=this,this.playerDeleted=!1,this.recreatingPlayer=!0,this.playerCreated\|\|(this.loadCurrentPreferences(),this.injectPlayerCode(),this.resizePlayer(this.media.videoWidth,this.media.videoHeight)),this.getSampleDescriptionText(),this.initSignLanguage(),this.initPlayer().then((function(){s.getTracks().then((function(){s.initDescription().then((function(){s.setupTracks().then((function(){s.hasClosedDesc&&(!s.$descDiv\|\|s.$descDiv&&!t.contains(s.$ableDiv[0],s.$descDiv[0]))&&s.injectTextDescriptionArea(),s.initSpeech("init"),s.setupTranscript().then((function(){s.initStenoFrame().then((function(){s.stenoMode&&s.$stenoFrame&&(s.stenoFrameContents=s.$stenoFrame.contents()),s.getMediaTimes().then((function(t){for(s.duration=t.duration,s.elapsed=t.elapsed,s.setFullscreen(!1),void 0===s.volume&&(s.volume=s.defaultVolume),s.volume&&s.setVolume(s.volume),s.transcriptType&&(s.addTranscriptAreaEvents(),s.updateTranscript()),s.captions.length&&s.initDefaultCaption(),s.setMediaAttributes(),s.addControls(),s.addEventListeners(),a=s.getPreferencesGroups(),n=0;n<a.length;n++)s.injectPrefsForm(a[n]);s.setupPopups(),s.updateCaption(),s.injectVTS(),s.chaptersDivLocation&&s.populateChaptersDiv(),s.showSearchResults(),"html5"===s.player&&(s.loadingMedia\|\|(s.$media[0].load(),s.loadingMedia=!0)),setTimeout((function(){s.refreshControls("init"),e.resolve()}),100)}))}))}))}))}))}))}),(function(){s.provideFallback()})),i;console.log("Can't create player; no appropriate player type detected.")},AblePlayer.prototype.initPlayer=function(){var e,i=this;"html5"===this.player?e=this.initHtml5Player():"youtube"===this.player?e=this.initYouTubePlayer():"vimeo"===this.player&&(e=this.initVimeoPlayer());var s=new t.Deferred,a=s.promise();return e.done((function(){i.useFixedSeekInterval?(i.seekInterval\|\|(i.seekInterval=i.defaultSeekInterval),i.seekIntervalCalculated=!0):i.setSeekInterval(),s.resolve()})).fail((function(){s.reject()})),a},AblePlayer.prototype.initStenoFrame=function(){var e,i;return i=(e=new t.Deferred).promise(),this.stenoMode&&this.$stenoFrame?(this.$stenoFrame[0].contentWindow,"complete"==document.readyState?e.resolve():this.$stenoFrame.on("load",(function(){e.resolve()}))):e.resolve(),i},AblePlayer.prototype.setSeekInterval=function(){var t;this.seekInterval=this.defaultSeekInterval,void 0===(t=this.useChapterTimes?this.chapterDuration:this.duration)\|\|t<1?this.seekIntervalCalculated=!1:(this.seekInterval=t<=20?5:t<=30?6:t<=40?8:t<=100?10:t/10,this.seekIntervalCalculated=!0)},AblePlayer.prototype.initDefaultCaption=function(){var t,e;if((t=this.captions).length>0){for(e=0;e<t.length;e++)!0===t[e].def&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);if(void 0===this.captionLang)for(e=0;e<t.length;e++)t[e].language===this.lang&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);void 0===this.captionLang&&(this.captionLang=t[0].language,this.selectedCaptions=t[0]),void 0!==this.captionLang&&(this.$transcriptLanguageSelect&&this.$transcriptLanguageSelect.find("option[lang="+this.captionLang+"]").prop("selected",!0),this.syncTrackLanguages("init",this.captionLang)),"vimeo"===this.player&&(this.usingVimeoCaptions&&1==this.prefCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then((function(t){})).catch((function(t){t.name})):this.vimeoPlayer.disableTextTrack().then((function(){})).catch((function(t){})))}},AblePlayer.prototype.initHtml5Player=function(){var e=new t.Deferred,i=e.promise();return e.resolve(),i},AblePlayer.prototype.setMediaAttributes=function(){this.$media.attr("tabindex",-1);var t=this.$media.get(0).textTracks;if(t)for(var e=0;e<t.length;)t[e].mode="disabled",e+=1},AblePlayer.prototype.getPlayer=function(){return this.testFallback?null:this.youTubeId?"video"!==this.mediaType?null:"youtube":this.vimeoId?"video"!==this.mediaType?null:"vimeo":this.media.canPlayType?"html5":null}}(jQuery),function(t){AblePlayer.prototype.setCookie=function(t){Cookies.set("Able-Player",JSON.stringify(t),{expires:90,sameSite:"strict"})},AblePlayer.prototype.getCookie=function(){var t,e={preferences:{},sign:{},transcript:{},voices:[]};try{t=JSON.parse(Cookies.get("Able-Player"))}catch(i){this.setCookie(e),t=e}return t\|\|e},AblePlayer.prototype.updateCookie=function(t){var e,i,s,a,n,r,o,l;if(e=this.getCookie(),"transcript"===t\|\|"sign"===t)"transcript"===t?(s=(i=this.$transcriptArea).position(),void 0===e.transcript&&(e.transcript={}),e.transcript.position=i.css("position"),e.transcript.zindex=i.css("z-index"),e.transcript.top=s.top,e.transcript.left=s.left,e.transcript.width=i.width(),e.transcript.height=i.height()):"sign"===t&&(s=(i=this.$signWindow).position(),void 0===e.sign&&(e.sign={}),e.sign.position=i.css("position"),e.sign.zindex=i.css("z-index"),e.sign.top=s.top,e.sign.left=s.left,e.sign.width=i.width(),e.sign.height=i.height());else if("voice"===t){void 0===e.voices&&(e.voices=[]),o=!1;for(var h=0;h<e.voices.length;h++)e.voices[h].lang===this.prefDescVoiceLang&&(o=!0,e.voices[h].name=this.prefDescVoice);o\|\|(l={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(l))}else for(a=this.getAvailablePreferences(),n=0;n<a.length;n++)(r=a[n].name)==t&&(e.preferences[r]=this[r]);this.setCookie(e)},AblePlayer.prototype.getPreferencesGroups=function(){return this.usingYouTubeCaptions?["captions","descriptions","keyboard"]:this.usingVimeoCaptions?["descriptions","keyboard"]:["captions","descriptions","keyboard","transcript"]},AblePlayer.prototype.getAvailablePreferences=function(){var t=[];return t.push({name:"prefAltKey",label:this.tt.prefAltKey,group:"keyboard",default:1}),t.push({name:"prefCtrlKey",label:this.tt.prefCtrlKey,group:"keyboard",default:1}),t.push({name:"prefShiftKey",label:this.tt.prefShiftKey,group:"keyboard",default:0}),t.push({name:"prefTranscript",label:null,group:"transcript",default:0}),t.push({name:"prefHighlight",label:this.tt.prefHighlight,group:"transcript",default:1}),t.push({name:"prefAutoScrollTranscript",label:null,group:"transcript",default:1}),t.push({name:"prefTabbable",label:this.tt.prefTabbable,group:"transcript",default:0}),t.push({name:"prefCaptions",label:null,group:"captions",default:this.defaultStateCaptions}),this.usingYouTubeCaptions\|\|("video"===this.mediaType&&t.push({name:"prefCaptionsPosition",label:this.tt.prefCaptionsPosition,group:"captions",default:this.defaultCaptionsPosition}),t.push({name:"prefCaptionsFont",label:this.tt.prefCaptionsFont,group:"captions",default:"sans-serif"})),t.push({name:"prefCaptionsSize",label:this.tt.prefCaptionsSize,group:"captions",default:"100%"}),this.usingYouTubeCaptions\|\|(t.push({name:"prefCaptionsColor",label:this.tt.prefCaptionsColor,group:"captions",default:"white"}),t.push({name:"prefCaptionsBGColor",label:this.tt.prefCaptionsBGColor,group:"captions",default:"black"}),t.push({name:"prefCaptionsOpacity",label:this.tt.prefCaptionsOpacity,group:"captions",default:"100%"})),"video"===this.mediaType&&(t.push({name:"prefDesc",label:null,group:"descriptions",default:this.defaultStateDescriptions}),t.push({name:"prefDescMethod",label:null,group:"descriptions",default:"video"}),t.push({name:"prefDescVoice",label:this.tt.prefDescVoice,group:"descriptions",default:null}),t.push({name:"prefDescPitch",label:this.tt.prefDescPitch,group:"descriptions",default:1}),t.push({name:"prefDescRate",label:this.tt.prefDescRate,group:"descriptions",default:1}),t.push({name:"prefDescVolume",label:this.tt.volume,group:"descriptions",default:1}),t.push({name:"prefDescPause",label:this.tt.prefDescPause,group:"descriptions",default:this.defaultDescPause}),t.push({name:"prefDescVisible",label:this.tt.prefDescVisible,group:"descriptions",default:0})),t.push({name:"prefSign",label:null,group:null,default:0}),t},AblePlayer.prototype.loadCurrentPreferences=function(){for(var t=this.getAvailablePreferences(),e=this.getCookie(),i=0;i<t.length;i++){var s=t[i].name,a=t[i].default;void 0!==e.preferences[s]?this[s]=e.preferences[s]:(e.preferences[s]=a,this[s]=a)}void 0!==e.voices&&(this.prefVoices=e.voices),this.setCookie(e)},AblePlayer.prototype.injectPrefsForm=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,m,g,v,y,b,T,P,k,C,w,D,A,x,$,S,N,I,M,B,L,E,F,O,R,V,z,H;i=this,s=this.getAvailablePreferences();var W="able-prefs-form-"+e;if((a=t("<div>",{class:"able-prefs-form "})).addClass(W),"captions"==e)n=this.tt.prefTitleCaptions;else if("descriptions"==e){n=this.tt.prefTitleDescriptions;var _=t("<p>",{text:this.tt.prefIntroDescription1}),q=t("<ul>"),j=t("<li>",{text:this.tt.prefDescFormatOption1}),K=t("<li>",{text:this.tt.prefDescFormatOption2});q.append(j,K),this.hasOpenDesc&&this.hasClosedDesc?(I=this.tt.prefIntroDescription2+" ",I+="<strong>"+this.tt.prefDescFormatOption1b+"</strong>",I+=" <em>"+this.tt.and+"</em> <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):this.hasOpenDesc?(I=this.tt.prefIntroDescription2,I+=" <strong>"+this.tt.prefDescFormatOption1b+"</strong>."):this.hasClosedDesc?(I=this.tt.prefIntroDescription2,I+=" <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):I=this.tt.prefIntroDescriptionNone,o=t("<p>",{html:I}),l=this.tt.prefIntroDescription3,(this.hasOpenDesc\|\|this.hasClosedDesc)&&(l+=" "+this.tt.prefIntroDescription4),h=t("<p>",{text:l}),a.append(_,q,o,h)}else"keyboard"==e?(n=this.tt.prefTitleKeyboard,r=this.tt.prefIntroKeyboard1,r+=" "+this.tt.prefIntroKeyboard2,r+=" "+this.tt.prefIntroKeyboard3,_=t("<p>",{text:r}),a.append(_)):"transcript"==e&&(n=this.tt.prefTitleTranscript);for(u=t("<div>").attr("role","group"),d="able-prefs-"+e,g=(f=this.mediaId+"-prefs-"+e)+"-legend",u.addClass(d).attr("id",f),"keyboard"===e?((m=t("<h2>"+this.tt.prefHeadingKeyboard1+"</h2>")).attr("id",g),u.attr("aria-labelledby",g),u.append(m)):"descriptions"===e&&((m=t("<h2>"+this.tt.prefHeadingTextDescription+"</h2>")).attr("id",g),u.attr("aria-labelledby",g),u.append(m)),p=0;p<s.length;p++)if(s[p].group==e&&s[p].label){if(b="able-"+(v=s[p].name),T=this.mediaId+"_"+v,y=t("<div>").addClass(b),"captions"===e){for(P=t('<label for="'+T+'"> '+s[p].label+"</label>"),k=t("<select>",{name:v,id:T}),"prefCaptions"!==v&&"prefCaptionsStyle"!==v&&k.change((function(){$=t(this).attr("name"),i.stylizeCaptions(i.$sampleCapsDiv,$)})),C=this.getCaptionsOptions(v),c=0;c<C.length;c++)"prefCaptionsPosition"===v?"overlay"===(D=C[c])?x=this.tt.captionsPositionOverlay:"below"===D&&(D=C[c],x=this.tt.captionsPositionBelow):"prefCaptionsFont"===v\|\|"prefCaptionsColor"===v\|\|"prefCaptionsBGColor"===v?(D=C[c][0],x=C[c][1]):"prefCaptionsOpacity"===v?(D=C[c],x=C[c],"0%"===D?x+=" ("+this.tt.transparent+")":"100%"===D&&(x+=" ("+this.tt.solid+")")):(D=C[c],x=C[c]),w=t("<option>",{value:D,text:x}),this[v]===D&&w.prop("selected",!0),k.append(w);y.append(P,k)}else if("descriptions"===e){if(P=t('<label for="'+T+'"> '+s[p].label+"</label>"),"prefDescPause"===v\|\|"prefDescVisible"===v)y.addClass("able-prefs-checkbox"),k=t("<input>",{type:"checkbox",name:v,id:T,value:"true"}),1===this[v]&&k.prop("checked",!0),y.append(k,P);else if(this.synth){if(y.addClass("able-prefs-select"),k=t("<select>",{name:v,id:T}),"prefDescVoice"===v&&this.descVoices){for(M=this.getPrefDescVoice(),c=0;c<this.descVoices.length;c++)D=this.descVoices[c].name,A=this.descVoices[c].lang.substring(0,2).toLowerCase(),x=D+" ("+this.descVoices[c].lang+")",w=t("<option>",{value:D,"data-lang":A,text:x}),M===D&&w.prop("selected",!0),k.append(w);this.$voiceSelectField=k}else if("prefDescPitch"==v?C=[0,.5,1,1.5,2]:"prefDescRate"==v?C=[.7,.8,.9,1,1.1,1.2,1.5,2,2.5,3]:"prefDescVolume"==v&&(C=[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]),void 0!==C)for(c=0;c<C.length;c++)D=C[c],x=this.makePrefsValueReadable(v,D),w=t("<option>",{value:D,text:x}),this[v]==D&&w.prop("selected",!0),k.append(w),y.append(P,k);k.on("change",(function(){i.announceDescriptionText("sample",i.currentSampleText)})),y.append(P,k)}}else P=t('<label for="'+T+'"> '+s[p].label+"</label>"),k=t("<input>",{type:"checkbox",name:v,id:T,value:"true"}),1===this[v]&&k.prop("checked",!0),"keyboard"===e&&k.on("change",(function(){"prefAltKey"===($=t(this).attr("name"))?(S=".able-modkey-alt",N=i.tt.prefAltKey+" + "):"prefCtrlKey"===$?(S=".able-modkey-ctrl",N=i.tt.prefCtrlKey+" + "):"prefShiftKey"===$&&(S=".able-modkey-shift",N=i.tt.prefShiftKey+" + "),t(this).is(":checked")?t(S).text(N):t(S).text("")})),y.append(k,P);u.append(y)}if(a.append(u),"captions"===e)this.usingYouTubeCaptions\|\|(this.$sampleCapsDiv=t("<div>",{class:"able-captions-sample"}).text(this.tt.sampleCaptionText),a.append(this.$sampleCapsDiv),this.stylizeCaptions(this.$sampleCapsDiv));else if("descriptions"===e)this.synth&&(this.$sampleDescDiv=t("<div>",{class:"able-desc-sample"}).text(this.tt.sampleDescriptionText),a.append(this.$sampleDescDiv),this.currentSampleText=this.tt.sampleDescriptionText);else if("keyboard"===e){for(B=t("<h2>",{text:this.tt.prefHeadingKeyboard2}),L=t("<ul>"),E=[],F=[],p=0;p<this.controls.length;p++)"play"===this.controls[p]?(E.push(this.tt.play+"/"+this.tt.pause),F.push("p</span> <em>"+this.tt.or+'</em> <span class="able-help-modifiers"> '+this.tt.spacebar)):"restart"===this.controls[p]?(E.push(this.tt.restart),F.push("s")):"previous"===this.controls[p]?(E.push(this.tt.prevTrack),F.push("b")):"next"===this.controls[p]?(E.push(this.tt.nextTrack),F.push("n")):"rewind"===this.controls[p]?(E.push(this.tt.rewind),F.push("r")):"forward"===this.controls[p]?(E.push(this.tt.forward),F.push("f")):"volume"===this.controls[p]?(E.push(this.tt.volume),F.push("v</span> <em>"+this.tt.or+'</em> <span class="able-modkey">1-9'),E.push(this.tt.mute+"/"+this.tt.unmute),F.push("m")):"captions"===this.controls[p]?(this.captions.length>1?E.push(this.tt.captions):this.captionsOn?E.push(this.tt.hideCaptions):E.push(this.tt.showCaptions),F.push("c")):"descriptions"===this.controls[p]?(this.descOn?E.push(this.tt.turnOffDescriptions):E.push(this.tt.turnOnDescriptions),F.push("d")):"prefs"===this.controls[p]?(E.push(this.tt.preferences),F.push("e")):"help"===this.controls[p]&&(E.push(this.tt.help),F.push("h"));for(p=0;p<F.length;p++)O='<span class="able-modkey-alt">',1===this.prefAltKey&&(O+=this.tt.prefAltKey+" + "),O+="</span>",O+='<span class="able-modkey-ctrl">',1===this.prefCtrlKey&&(O+=this.tt.prefCtrlKey+" + "),O+="</span>",O+='<span class="able-modkey-shift">',1===this.prefShiftKey&&(O+=this.tt.prefShiftKey+" + "),O+="</span>",O+='<span class="able-modkey">'+F[p]+"</span>",O+=" = "+E[p],R=t("<li>",{html:O}),L.append(R);O='<span class="able-modkey">'+this.tt.escapeKey+"</span>",O+=" = "+this.tt.escapeKeyFunction,R=t("<li>",{html:O}),L.append(R),a.append(B,L)}t("body").append(a),V=new AccessibleDialog(a,this.$prefsButton,"dialog",!0,n,_,i.tt.closeButtonLabel,"32em"),a.append("<hr>"),z=t('<button class="modal-button">'+this.tt.save+"</button>"),H=t('<button class="modal-button">'+this.tt.cancel+"</button>"),z.click((function(){V.hide(),i.savePrefsFromForm()})),H.click((function(){V.hide(),i.resetPrefsForm()})),a.append(z),a.append(H),"captions"!==e&&"transcript"!==e\|\|u.attr("aria-labelledby",V.titleH1.attr("id")),"captions"===e?this.captionPrefsDialog=V:"descriptions"===e?this.descPrefsDialog=V:"keyboard"===e?this.keyboardPrefsDialog=V:"transcript"===e&&(this.transcriptPrefsDialog=V),t("div.able-prefs-form button.modalCloseButton").click((function(){i.resetPrefsForm()})),t("div.able-prefs-form").keydown((function(t){27===t.which&&i.resetPrefsForm()}))},AblePlayer.prototype.getPrefDescVoice=function(){var t,e,i;if(t=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,(e=this.getCookie()).voices)for(i=0;i<e.voices.length;i++)if(e.voices[i].lang===t)return e.voices[i].name;return null},AblePlayer.prototype.rebuildDescPrefsForm=function(){var e,i,s,a;for(this.$voiceSelectField=t("#"+this.mediaId+"_prefDescVoice"),this.$voiceSelectField.empty(),e=0;e<this.descVoices.length;e++)s=(i=this.descVoices[e].name)+" ("+this.descVoices[e].lang+")",a=t("<option>",{value:i,"data-lang":this.descVoices[e].lang.substring(0,2).toLowerCase(),text:s}),this.prefDescVoice==i&&a.prop("selected",!0),this.$voiceSelectField.append(a)},AblePlayer.prototype.makePrefsValueReadable=function(t,e){if("prefDescPitch"===t){if(0===e)return this.tt.prefDescPitch1;if(.5===e)return this.tt.prefDescPitch2;if(1===e)return this.tt.prefDescPitch3;if(1.5===e)return this.tt.prefDescPitch4;if(2===e)return this.tt.prefDescPitch5}else if("prefDescRate"===t){if(.7===e)return 1;if(.8===e)return 2;if(.9===e)return 3;if(1===e)return 4;if(1.1===e)return 5;if(1.2===e)return 6;if(1.5===e)return 7;if(2===e)return 8;if(2.5===e)return 9;if(3===e)return 10}else if("prefDescVolume"===t)return 10e;return e},AblePlayer.prototype.resetPrefsForm=function(){var e,i,s,a;for(e=this.getCookie(),i=this.getAvailablePreferences(),s=0;s<i.length;s++)a=i[s].name,this.mediaId+"_"+a,-1!==a.indexOf("Captions")&&"prefCaptions"!==a?t('select[name="'+a+'"]').val(e.preferences[a]):1===this[a]?t('input[name="'+a+'"]').prop("checked",!0):t('input[name="'+a+'"]').prop("checked",!1);this.stylizeCaptions(this.$sampleCapsDiv)},AblePlayer.prototype.savePrefsFromForm=function(){var e,i,s,a,n,r,o,l,h,p,c,u;o=0,h=0,p=!1,e=this.getCookie(),i=this.getAvailablePreferences();for(var d=0;d<i.length;d++)if(i[d].label)if(s=i[d].name,a=this.mediaId+"_"+s,"prefDescVoice"===s){void 0===e.voices&&(e.voices=[]),n=this.mediaId+"_prefDescVoice",this.prefDescVoice=t("select#"+n).find(":selected").val(),this.prefDescVoiceLang=t("select#"+n).find(":selected").attr("data-lang"),l=!1;for(var f=0;f<e.voices.length;f++)e.voices[f].lang===this.prefDescVoiceLang&&(l=!0,e.voices[f].name=this.prefDescVoice);l\|\|(r={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(r)),o++}else"prefDescMethod"==s?(this.prefDescMethod="video",this.prefDescMethod!==e.preferences.prefDescMethod&&(e.preferences.prefDescMethod=this.prefDescMethod,o++)):-1!==s.indexOf("Captions")&&"prefCaptions"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++,h++),"prefCaptionsSize"===s&&(p=!0,c=u)):-1!==s.indexOf("Desc")&&"prefDescPause"!==s&&"prefDescVisible"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++)):t('input[id="'+a+'"]').is(":checked")?(e.preferences[s]=1,1===this[s]\|\|(this[s]=1,o++)):(e.preferences[s]=0,1===this[s]&&(this[s]=0,o++));if(o>0?(this.setCookie(e),this.showAlert(this.tt.prefSuccess)):this.showAlert(this.tt.prefNoChange),"youtube"===this.player&&void 0!==this.usingYouTubeCaptions&&this.usingYouTubeCaptions&&p&&this.youTubePlayer.setOption("captions","fontSize",this.translatePrefs("size",c,"youtube")),AblePlayerInstances.length>1)for(d=0;d<AblePlayerInstances.length;d++)AblePlayerInstances[d].updatePrefs(),AblePlayerInstances[d].geteferences(),AblePlayerInstances[d].resetPrefsForm(),h>0&&(AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$captionsDiv),void 0!==AblePlayerInstances[d].$descDiv&&AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$descDiv));else this.updatePrefs(),h>0&&(this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv))},AblePlayer.prototype.updatePrefs=function(){this.$transcriptDiv&&(1===this.prefTabbable?this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"):this.$transcriptDiv.find("span.able-transcript-seekpoint").removeAttr("tabindex"),0===this.prefHighlight&&this.$transcriptDiv.find("span").removeClass("able-highlight")),this.updateCaption(),this.initDescription()},AblePlayer.prototype.usingModifierKeys=function(t){return!(1===this.prefAltKey&&!t.altKey)&&(!(1===this.prefCtrlKey&&!t.ctrlKey)&&!(1===this.prefShiftKey&&!t.shiftKey))}}(jQuery),function(t){function actList(t,e){for(var i=[],s=0;s<e.length;s++)i.push(act(t,e[s]));return i}function act(t,e){var i=e(t);if(null!==t.error)throw t.error;return i}function updatePosition(t,e){for(var i=0;i<e.length;i++)"\n"===e[i]?(t.column=1,t.line+=1):t.column+=1}function cut(t,e){var i=t.text.substring(0,e);return updatePosition(t,i),t.text=t.text.substring(e),i}function cutLine(t,e){var i,s=t.text.indexOf("\n");return-1===s?(updatePosition(t,i=t.text),t.text=""):(i=t.text.substring(0,s),updatePosition(t,i+"\n"),t.text=t.text.substring(s+1)),i}function peekLine(t){var e=t.text.indexOf("\n");return-1===e?t.text:t.text.substring(0,e)}function parseFileBody(t){actList(t,[eatOptionalBOM,eatSignature]);var e=t.text[0];" "===e\|\|"\t"===e\|\|"\n"===e?actList(t,[eatUntilEOLInclusive,parseMetadataHeaders,eatAtLeast1EmptyLines,parseCuesAndComments]):t.error="WEBVTT signature not followed by whitespace."}function parseMetadataHeaders(t){for(;;){var e=peekLine(t);if(-1!==e.indexOf("--\x3e"))return;if(0===e.length)return;var i=act(t,getMetadataKeyValue);t.metadata[i[0]]=i[1],act(t,eatUntilEOLInclusive)}}function nextSpaceOrNewline(t){var e=[],i=t.indexOf(" ");i>=0&&e.push(i);var s=t.indexOf("\t");s>=0&&e.push(s);var a=t.indexOf("\n");return a>=0&&e.push(a),Math.min.apply(null,e)}function getMetadataKeyValue(t){var e=t.text.indexOf("\n"),i=cut(t,e),s=i.indexOf(":");return-1===s?void(t.error="Missing colon."):[i.substring(0,s),i.substring(s+1)]}function getSettingsKeyValue(t){var e=cut(t,nextSpaceOrNewline(t.text)),i=e.indexOf(":");return-1===i?void(t.error="Missing colon."):[e.substring(0,i),e.substring(i+1)]}function parseCuesAndComments(e){for(;;){var i=peekLine(e);if(0!==i.indexOf("NOTE")\|\|4!==i.length&&" "!==i[4]&&"\t"!==i[4])if(0===t.trim(i).length&&e.text.length>0)act(e,eatEmptyLines);else{if(!(t.trim(i).length>0))return;act(e,parseCue)}else actList(e,[eatComment,eatEmptyLines])}}function parseCue(t){var e,i=peekLine(t);if(-1===i.indexOf("--\x3e")&&(e=cutLine(t),-1===(i=peekLine(t)).indexOf("--\x3e")))return"Invalid WebVTT file: "+t.src+"\n","Line: "+t.line+", ","Column: "+t.column+"\n",void(console.warn\|\|console.log);var s=actList(t,[getTiming,eatAtLeast1SpacesOrTabs,eatArrow,eatAtLeast1SpacesOrTabs,getTiming]),a=s[0],n=s[4];if(a>=n)t.error="Start time is not sooner than end time.";else{act(t,eatSpacesOrTabs);var r=act(t,getCueSettings);cut(t,1);var o=act(t,getCuePayload);void 0===e&&(e=t.cues.length+1),t.cues.push({id:e,start:a,end:n,settings:r,components:o})}}function getCueSettings(t){for(var e={};t.text.length>0&&"\n"!==t.text[0];){var i=act(t,getSettingsKeyValue);e[i[0]]=i[1],act(t,eatSpacesOrTabs)}return e}function getCuePayload(e){for(var i={type:"internal",tagName:"",value:"",classes:[],annotation:"",parent:null,children:[],language:""},s=i,a=[];e.text.length>0;){var n=peekLine(e);if(-1!==n.indexOf("--\x3e")\|\|/^\s+$/.test(n))break;if(e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]){cut(e,2);break}var r=getCueToken(e);if("string"===r.type)s.children.push(r);else if("startTag"===r.type)r.type=r.tagName,r.parent=s,-1!==t.inArray(r.tagName,["i","b","u","ruby"])\|\|"rt"===r.tagName&&"ruby"===s.tagName?(a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"c"===r.tagName\|\|"v"===r.tagName?(r.value=r.annotation,a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"lang"===r.tagName&&(a.push(r.annotation),a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r);else if("endTag"===r.type)r.tagName===s.type&&-1!==t.inArray(r.tagName,["c","i","b","u","ruby","rt","v"])?s=s.parent:"lang"===r.tagName&&"lang"===s.type?(s=s.parent,a.pop()):"ruby"===r.tagName&&"rt"===s.type&&(s=s.parent.parent);else if("timestampTag"===r.type){var o={text:r.value,error:null,metadata:{},cues:[],line:1,column:1};try{var l=act(o,getTiming);0===o.text.length&&(r.value=l,s.push(r))}catch(t){}}}return i}function getCueToken(e){for(var i="data",s=[],a="",n={type:"",tagName:"",value:"",classes:[],annotation:"",children:[]};;){var r;if(r=e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]?"":e.text.length>0?e.text[0]:"","data"===i)if("&"===r)a="&",i="escape";else if("<"===r){if(0!==s.length)return n.type="string",n.value=s.join(""),n;i="tag"}else{if(""===r)return{type:"string",value:s.join("")};s.push(r)}else if("escape"===i)if("&"===r)s.push(a),a="&";else if(r.match(/[0-9a-z]/))a+=r;else if(";"===r)"&"===a?s.push("&"):"<"===a?s.push("<"):">"===a?s.push(">"):"&lrm"===a?s.push("‎"):"&rlm"===a?s.push("‏"):" "===a?s.push(" "):(s.push(a),s.push(";")),i="data";else{if("<"===r\|\|""===r)return s.push(a),n.type="string",n.value=s.join(""),n;if("\t"===r\|\|"\n"===r\|\|"\f"===r\|\|" "===r)return s.push(a),n.type="string",n.value=s.join(""),n;s.push(a),i="data"}else if("tag"===i)if("\t"===r\|\|"\n"===r\|\|"\f"===r\|\|" "===r)i="startTagAnnotation";else if("."===r)i="startTagClass";else if("/"===r)i="endTag";else if(r.match("[0-9]"))i="timestampTag",s.push(r);else{if(">"===r){cut(e,1);break}if(""===r)return n.tagName="",n.type="startTag",n;s.push(r),i="startTag"}else if("startTag"===i)if("\t"===r\|\|"\f"===r\|\|" "===r)i="startTagAnnotation";else if("\n"===r)a=r,i="startTagAnnotation";else if("."===r)i="startTagClass";else{if(">"===r)return cut(e,1),n.tagName=s.join(""),n.type="startTag",n;if(""===r)return n.tagName=s.join(""),n.type="startTag",n;s.push(r)}else if("startTagClass"===i)if("\t"===r\|\|"\f"===r\|\|" "===r)n.classes.push(a),a="",i="startTagAnnotation";else if("\n"===r)n.classes.push(a),a=r,i="startTagAnnotation";else if("."===r)n.classes.push(a),a="";else{if(">"===r)return cut(e,1),n.classes.push(a),n.type="startTag",n.tagName=s.join(""),n;if(""===r)return n.classes.push(a),n.type="startTag",n.tagName=s.join(""),n;a+="c"}else if("startTagAnnotation"===i){if(">"===r)return cut(e,1),a=t.trim(a).replace(/ +/," "),n.type="startTag",n.tagName=s.join(""),n.annotation=a,n;if(""===r)return a=t.trim(a).replace(/ +/," "),n.type="startTag",n.tagName=s.join(""),n.annotation=a,n;a+=r}else if("endTag"===i){if(">"===r)return cut(e,1),n.type="endTag",n.tagName=s.join(""),n;if(""===r)return n.type="endTag",n.tagName=s.join(""),n;s.push(r)}else{if("timestampTag"!==i)throw"Unknown tokenState "+i;if(">"===r)return cut(e,1),n.type="timestampTag",n.name=s.join(""),n;if(""===r)return n.type="timestampTag",n.name=s.join(""),n;s.push(r)}cut(e,1)}}function eatComment(e){if(-1===cutLine(e).indexOf("--\x3e"))for(;;){var i=peekLine(e);if(0===t.trim(i).length)return;if(-1!==i.indexOf("--\x3e"))return void(e.error="Invalid syntax: --\x3e in comment.");cutLine(e)}else e.error="Invalid syntax: --\x3e in NOTE line."}function eatOptionalBOM(t){"\ufeff"===t.text[0]&&cut(t,1)}function eatSignature(t){"WEBVTT"===t.text.substring(0,6)?cut(t,6):t.error="Invalid signature."}function eatArrow(t){t.text.length<3\|\|"--\x3e"!==t.text.substring(0,3)?t.error="Missing --\x3e":cut(t,3)}function eatSpacesOrTabs(t){for(;"\t"===t.text[0]\|\|" "===t.text[0];)cut(t,1)}function eatAtLeast1SpacesOrTabs(t){for(var e=0;"\t"===t.text[0]\|\|" "===t.text[0];)cut(t,1),e+=1;0===e&&(t.error="Missing space.")}function eatUntilEOLInclusive(t){var e=t.text.indexOf("\n");-1===e?t.error="Missing EOL.":cut(t,e+1)}function eatEmptyLines(e){for(;e.text.length>0;){var i=peekLine(e);if(0!==t.trim(i).length)break;cutLine(e)}}function eatAtLeast1EmptyLines(e){for(var i=0;e.text.length>0;){var s=peekLine(e);if(0!==t.trim(s).length)break;cutLine(e),i+=1}0===i&&(e.error="Missing empty line.")}function getTiming(t){var e=nextSpaceOrNewline(t.text);if(-1!==e){var i=cut(t,e),s=/((\d\d):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(i);if(s){var a=0,n=s[2],r=s[4];if(r){if(parseInt(r,10)>59)return void(t.error="Invalid minute range");n&&(a+=3600parseInt(n,10)),a+=60parseInt(r,10);var o=s[5];if(parseInt(o,10)>59)return void(t.error="Invalid second range");a+=parseInt(o,10),a+=parseInt(s[6],10)/1e3}else a+=parseInt(s[7],10),a+=parseInt(s[8],10)/1e3;return a}t.error="Unable to parse timestamp"}else t.error("Missing timing.")}AblePlayer.prototype.parseWebVTT=function(t,e){var i={src:t,text:e=e.replace(/(\r\n\|\n\|\r)/g,"\n"),error:null,metadata:{},cues:[],line:1,column:1};try{act(i,parseFileBody)}catch(t){console.warn\|\|console.log}return i}}(jQuery),function(t){AblePlayer.prototype.injectPlayerCode=function(){var e;this.$mediaContainer=this.$media.wrap('<div class="able-media-container"></div>').parent(),this.$ableDiv=this.$mediaContainer.wrap('<div class="able"></div>').parent(),this.$ableWrapper=this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(),this.$ableWrapper.addClass("able-skin-"+this.skin),this.$ableWrapper.css({width:this.playerWidth+"px"}),"video"===this.mediaType&&("image"==this.iconType\|\|"youtube"===this.player&&!this.hasPoster\|\|this.injectBigPlayButton()),e=t("<div>"),"video"===this.mediaType?e.addClass("able-vidcap-container"):"audio"===this.mediaType&&(e.addClass("able-audcap-container"),e.addClass("captions-off")),this.injectPlayerControlArea(),this.$captionsContainer=this.$mediaContainer.wrap(e).parent(),this.injectAlert(),this.injectPlaylist(),this.injectOffscreenHeading()},AblePlayer.prototype.injectOffscreenHeading=function(){var e;"0"==this.playerHeadingLevel\|\|(void 0===this.playerHeadingLevel&&(this.playerHeadingLevel=this.getNextHeadingLevel(this.$ableDiv)),e="h"+this.playerHeadingLevel.toString(),this.$headingDiv=t("<"+e+">"),this.$ableDiv.prepend(this.$headingDiv),this.$headingDiv.addClass("able-offscreen"),this.$headingDiv.text(this.tt.playerHeading))},AblePlayer.prototype.injectBigPlayButton=function(){var e,i,s,a;e=this,this.$bigPlayButton=t("<button>",{class:"able-big-play-button","aria-hidden":!1,"aria-label":this.tt.play,tabindex:0}),"svg"==this.iconType?(i=this.getSvgData("play"),s=t("<svg>",{focusable:"false","aria-hidden":"true",viewBox:i[0]}),a=t("<path>",{d:i[1]}),s.append(a),this.$bigPlayButton.html(s),this.$bigPlayButton.html(this.$bigPlayButton.html())):(this.$bigPlayIcon=t("<span>",{class:"icon-play"}),this.$bigPlayButton.append(this.$bigPlayIcon)),this.$bigPlayButton.click((function(t){t.preventDefault(),e.handlePlay()})),this.$mediaContainer.append(this.$bigPlayButton)},AblePlayer.prototype.injectPlayerControlArea=function(){this.$playerDiv=t("<div>",{class:"able-player",role:"region","aria-label":this.mediaType+" player"}),this.$playerDiv.addClass("able-"+this.mediaType),this.hasPlaylist&&this.showNowPlaying&&(this.$nowPlayingDiv=t("<div>",{class:"able-now-playing","aria-live":"assertive","aria-atomic":"true"})),this.$controllerDiv=t("<div>",{class:"able-controller"}),this.$controllerDiv.addClass("able-"+this.iconColor+"-controls"),this.$statusBarDiv=t("<div>",{class:"able-status-bar"}),this.$timer=t("<span>",{class:"able-timer"}),this.$elapsedTimeContainer=t("<span>",{class:"able-elapsedTime",text:"0:00"}),this.$durationContainer=t("<span>",{class:"able-duration"}),this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer),this.$speed=t("<span>",{class:"able-speed","aria-live":"assertive"}).text(this.tt.speed+": 1x"),this.$status=t("<span>",{class:"able-status","aria-live":"polite"}),this.$statusBarDiv.append(this.$timer,this.$speed,this.$status),this.showNowPlaying?this.$playerDiv.append(this.$nowPlayingDiv,this.$controllerDiv,this.$statusBarDiv):this.$playerDiv.append(this.$controllerDiv,this.$statusBarDiv),"video"===this.mediaType?this.$ableDiv.append(this.$playerDiv):this.$ableDiv.prepend(this.$playerDiv)},AblePlayer.prototype.injectTextDescriptionArea=function(){this.$descDiv=t("<div>",{class:"able-descriptions"}),this.$descDiv.attr({"aria-live":"assertive","aria-atomic":"true"}),this.$descDiv.hide(),this.$ableDiv.append(this.$descDiv)},AblePlayer.prototype.getDefaultWidth=function(t){return"transcript"===t?450:"sign"===t?400:void 0},AblePlayer.prototype.positionDraggableWindow=function(e,i){var s,a,n,r;s=this.getCookie(),"transcript"===e?(n=this.$transcriptArea,void 0!==s.transcript&&(a=s.transcript)):"sign"===e&&(n=this.$signWindow,void 0!==s.transcript&&(a=s.sign)),void 0===a\|\|t.isEmptyObject(a)?(r=this.getOptimumPosition(e,i),void 0===i&&(i=this.getDefaultWidth(e)),n.css({position:r[0],width:i,"z-index":r[3]}),"absolute"===r[0]&&n.css({top:r[1]+"px",left:r[2]+"px"})):(n.css({position:a.position,width:a.width,"z-index":a.zindex}),"absolute"===a.position&&n.css({top:a.top,left:a.left}),this.updateZIndex(e))},AblePlayer.prototype.getOptimumPosition=function(e,i){var s,a,n,r,o,l;return void 0===i&&(i=this.getDefaultWidth(e)),s=[],a=this.$ableDiv.width(),this.$ableDiv.height(),(n=this.$ableDiv.offset()).top,r=n.left,o=t(window).width(),l=0,"transcript"===e?void 0!==this.$signWindow&&this.$signWindow.is(":visible")&&(l=this.$signWindow.width()+5):"sign"===e&&void 0!==this.$transcriptArea&&this.$transcriptArea.is(":visible")&&(l=this.$transcriptArea.width()+5),i<o-(r+a+5+l)?(s[0]="absolute",s[1]=0,s[2]=a+l+5):i+5<r?(s[0]="absolute",s[1]=0,s[2]=r-i-5):s[0]="relative",s},AblePlayer.prototype.injectAlert=function(){var e;this.$alertBox=t('<div role="alert"></div>'),this.$alertBox.addClass("able-alert"),this.$alertBox.hide(),this.$alertBox.appendTo(this.$ableDiv),e="audio"==this.mediaType?"-10":"10",this.$alertBox.css({top:e+"px"}),this.$srAlertBox=t('<div role="alert"></div>'),this.$srAlertBox.addClass("able-screenreader-alert"),this.$srAlertBox.appendTo(this.$ableDiv)},AblePlayer.prototype.injectPlaylist=function(){if(!0===this.playlistEmbed){var t=this.$playlistDom.clone();t.insertBefore(this.$statusBarDiv),this.$playlist=t.find("li")}},AblePlayer.prototype.createPopup=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,f;if(s=this,a=t("<ul>",{id:this.mediaId+"-"+e+"-menu",class:"able-popup",role:"menu"}).hide(),"captions"===e&&a.addClass("able-popup-captions"),"prefs"===e)if(this.prefCats.length>1){for(n=0;n<this.prefCats.length;n++)r=t("<li></li>",{role:"menuitem",tabindex:"-1"}),"captions"===(o=this.prefCats[n])?r.text(this.tt.prefMenuCaptions):"descriptions"===o?r.text(this.tt.prefMenuDescriptions):"keyboard"===o?r.text(this.tt.prefMenuKeyboard):"transcript"===o&&r.text(this.tt.prefMenuTranscript),r.on("click",(function(){c=t(this).text(),s.showingPrefsDialog=!0,s.setFullscreen(!1),c===s.tt.prefMenuCaptions?s.captionPrefsDialog.show():c===s.tt.prefMenuDescriptions?s.descPrefsDialog.show():c===s.tt.prefMenuKeyboard?s.keyboardPrefsDialog.show():c===s.tt.prefMenuTranscript&&s.transcriptPrefsDialog.show(),s.closePopups(),s.showingPrefsDialog=!1})),a.append(r);this.$prefsButton.attr("data-prefs-popup","menu")}else 1==this.prefCats.length&&this.$prefsButton.attr("data-prefs-popup",this.prefCats[0]);else if("captions"===e\|\|"chapters"===e){for(l=!1,n=0;n<i.length;n++)h=i[n],("captions"!==e\|\|"html5"!==this.player\|\|void 0!==h.cues)&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1",lang:h.language}),h.def&&1==this.prefCaptions?(r.attr("aria-checked","true"),l=!0):r.attr("aria-checked","false"),"captions"==e?(r.text(h.label),r.on("click",this.getCaptionClickFunction(h))):"chapters"==e&&(r.text(this.flattenCueForCaption(h)+" - "+this.formatSecondsAsColonTime(h.start)),r.on("click",this.getChapterClickFunction(h.start))),a.append(r));"captions"===e&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1"}).text(this.tt.captionsOff),0===this.prefCaptions?(r.attr("aria-checked","true"),l=!0):r.attr("aria-checked","false"),r.on("click",this.getCaptionOffFunction()),a.append(r))}else if("transcript-window"===e\|\|"sign-window"===e)for((p=[]).push({name:"move",label:this.tt.windowMove}),p.push({name:"resize",label:this.tt.windowResize}),p.push({name:"close",label:this.tt.windowClose}),n=0;n<p.length;n++)(r=t("<li></li>",{role:"menuitem",tabindex:"-1","data-choice":p[n].name})).text(p[n].label),r.on("click mousedown",(function(i){if(i.stopPropagation(),void 0!==i.button&&0!==i.button)return!1;s.windowMenuClickRegistered\|\|s.finishingDrag\|\|(s.windowMenuClickRegistered=!0,s.handleMenuChoice(e.substring(0,e.indexOf("-")),t(this).attr("data-choice"),i))})),a.append(r);return"captions"!==e\|\|l?"chapters"===e&&(a.find('li:contains("'+this.defaultChapter+'")')?a.find('li:contains("'+this.defaultChapter+'")').attr("aria-checked","true").addClass("able-focus"):a.find("li").first().attr("aria-checked","true").addClass("able-focus")):a.find("li[lang="+this.captionLang+"]")?a.find("li[lang="+this.captionLang+"]").attr("aria-checked","true"):a.find("li").last().attr("aria-checked","true"),a.on("keydown",(function(e){t(this).attr("id").split("-")[1],(u=t(this).find("li:focus")).is(":first-child")?(d=t(this).find("li").last(),f=u.next()):u.is(":last-child")?(d=u.prev(),f=t(this).find("li").first()):(d=u.prev(),f=u.next()),9===e.which?e.shiftKey?(u.removeClass("able-focus"),d.focus().addClass("able-focus")):(u.removeClass("able-focus"),f.focus().addClass("able-focus")):40===e.which\|\|39===e.which?(u.removeClass("able-focus"),f.focus().addClass("able-focus")):38==e.which\|\|37===e.which?(u.removeClass("able-focus"),d.focus().addClass("able-focus")):32===e.which\|\|13===e.which?u.click():27===e.which&&(u.removeClass("able-focus"),s.closePopups(),e.stopPropagation),e.preventDefault()})),this.$controllerDiv.append(a),a},AblePlayer.prototype.closePopups=function(){var t=this;this.chaptersPopup&&this.chaptersPopup.is(":visible")&&(this.chaptersPopup.hide(),this.$chaptersButton.attr("aria-expanded","false").focus()),this.captionsPopup&&this.captionsPopup.is(":visible")&&(this.captionsPopup.hide(),this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)),this.prefsPopup&&this.prefsPopup.is(":visible")&&!this.hidingPopup&&(this.hidingPopup=!0,this.prefsPopup.hide(),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$prefsButton.attr("aria-expanded","false"),this.showingPrefsDialog\|\|this.waitThenFocus(t.$prefsButton),setTimeout((function(){t.hidingPopup=!1}),100)),this.$volumeSlider&&this.$volumeSlider.is(":visible")&&(this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus()),this.$transcriptPopup&&this.$transcriptPopup.is(":visible")&&(this.hidingPopup=!0,this.$transcriptPopup.hide(),this.$transcriptPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$transcriptPopupButton.attr("aria-expanded","false").focus(),setTimeout((function(){t.hidingPopup=!1}),100)),this.$signPopup&&this.$signPopup.is(":visible")&&(this.$signPopup.hide(),this.$signPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$signPopupButton.attr("aria-expanded","false").focus())},AblePlayer.prototype.setupPopups=function(t){var e,i;if(e=[],void 0===t&&e.push("prefs"),"captions"!==t&&void 0!==t\|\|this.captions.length>0&&e.push("captions"),"chapters"!==t&&void 0!==t\|\|this.chapters.length>0&&this.useChaptersButton&&e.push("chapters"),"transcript-window"===t&&"popup"===this.transcriptType&&e.push("transcript-window"),"sign-window"===t&&this.hasSignLanguage&&e.push("sign-window"),e.length>0){0;for(var s=0;s<e.length;s++){var a=e[s];if("prefs"==a)this.prefsPopup=this.createPopup("prefs");else if("captions"==a)void 0!==this.captionsPopup&&this.captionsPopup\|\|(this.captionsPopup=this.createPopup("captions",this.captions));else if("chapters"==a)i=this.selectedChapters?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[],void 0!==this.chaptersPopup&&this.chaptersPopup\|\|(this.chaptersPopup=this.createPopup("chapters",i));else{if("transcript-window"==a)return this.createPopup("transcript-window");if("sign-window"==a)return this.createPopup("sign-window")}}}},AblePlayer.prototype.provideFallback=function(){var e,i;if(!this.usingFallback){if(this.usingFallback=!0,this.testFallback\|\|(this.testFallback=1),void 0===this.$media&&(this.$media=t(this.media)),this.$media.attr("id")?this.mediaId=this.$media.attr("id"):this.mediaId="media"+Math.floor(1e9Math.random()).toString(),this.hasFallback=!1,this.$media.children().length)for(e=0;e<this.$media.children().length&&!this.hasFallback;)"SOURCE"!==this.$media.children()[e].tagName&&"TRACK"!==this.$media.children()[e].tagName&&(this.hasFallback=!0),e++;if(this.hasFallback\|\|(i=t("<p>").text("Media player unavailable."),this.$media.append(i)),this.$media.attr("width")&&this.$media.css("width",this.$media.attr("width")+"px"),this.$media.attr("height")&&this.$media.css("height",this.$media.attr("height")+"px"),this.$media.removeAttr("data-able-player"),this.$media.prop("controls",!0),2==this.testFallback){if(t(this.$media).replaceWith(t('<foobar id="foobar-'+this.mediaId+'">')),this.$newFallbackElement=t("#foobar-"+this.mediaId),this.$media.children().length)for(e=this.$media.children().length-1;e>=0;)this.$newFallbackElement.prepend(t(this.$media.children()[e])),e--;this.hasFallback\|\|this.$newFallbackElement.append(i)}}},AblePlayer.prototype.calculateControlLayout=function(){var t,e,i;return(t=[])[0]=[],t[1]=[],"legacy"===this.skin&&(t[2]=[],t[3]=[]),t[0].push("play"),t[0].push("restart"),t[0].push("rewind"),t[0].push("forward"),"legacy"===this.skin&&t[1].push("seek"),this.hasPlaylist&&("legacy"===this.skin\|\|"2020"==this.skin)&&(t[0].push("previous"),t[0].push("next")),this.isPlaybackRateSupported()?(e=!0,"legacy"===this.skin&&(t[2].push("slower"),t[2].push("faster"))):e=!1,i=0,this.hasCaptions&&(i++,"legacy"===this.skin?t[2].push("captions"):"2020"==this.skin&&t[1].push("captions")),this.hasSignLanguage&&(i++,"legacy"===this.skin?t[2].push("sign"):"2020"==this.skin&&t[1].push("sign")),"video"===this.mediaType&&(this.hasOpenDesc\|\|this.hasClosedDesc)&&(i++,"legacy"===this.skin?t[2].push("descriptions"):"2020"==this.skin&&t[1].push("descriptions")),"popup"!==this.transcriptType\|\|this.hideTranscriptButton\|\|(i++,"legacy"===this.skin?t[2].push("transcript"):"2020"==this.skin&&t[1].push("transcript")),this.hasChapters&&this.useChaptersButton&&(i++,"legacy"===this.skin?t[2].push("chapters"):"2020"==this.skin&&t[1].push("chapters")),"2020"==this.skin&&i>0&&t[1].push("pipe"),e&&"2020"===this.skin&&(t[1].push("faster"),t[1].push("slower"),t[1].push("pipe")),"legacy"===this.skin?t[3].push("preferences"):"2020"==this.skin&&t[1].push("preferences"),"video"===this.mediaType&&this.allowFullscreen&&("legacy"===this.skin?t[3].push("fullscreen"):t[1].push("fullscreen")),this.browserSupportsVolume()?(this.volumeButton="volume-"+this.getVolumeName(this.volume),("legacy"===this.skin\|\|"2020"==this.skin)&&t[1].push("volume")):this.volume=!1,t},AblePlayer.prototype.addControls=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,f,m,g,v,y,b,T,P,k,C;for(e=this,s=(i=this.calculateControlLayout()).length,T=this.mediaId+"-tooltip",this.$tooltipDiv=t("<div>",{id:T,class:"able-tooltip"}).hide(),this.$controllerDiv.append(this.$tooltipDiv),"2020"==this.skin&&(l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.tt.seekbarLabel,this.$controllerDiv.append(l),this.seekBar=new AccessibleSlider(this.mediaType,l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible")),a=0;a<s;a++){for(r=i[a],o=t("<div>",a%2==0?{class:"able-left-controls"}:{class:"able-right-controls"}),this.$controllerDiv.append(o),n=0;n<r.length;n++){if("seek"===(d=r[n]))l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.tt.seekbarLabel,o.append(l),void 0!==this.duration&&0!==this.duration\|\|(this.duration=60,this.elapsed=0),this.seekBar=new AccessibleSlider(this.mediaType,l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible");else if("pipe"===d)p=t("<span>",{tabindex:"-1","aria-hidden":"true"}),"font"===this.iconType?p.addClass("icon-pipe"):(c=t("<img>",{src:this.rootPath+"button-icons/"+this.iconColor+"/pipe.png",alt:"",role:"presentation"}),p.append(c)),o.append(p);else{if(m="volume"===d?this.rootPath+"button-icons/"+this.iconColor+"/"+this.volumeButton+".png":"fullscreen"===d?this.rootPath+"button-icons/"+this.iconColor+"/fullscreen-expand.png":"slower"===d?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/turtle.png":this.rootPath+"button-icons/"+this.iconColor+"/slower.png":"faster"===d?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/rabbit.png":this.rootPath+"button-icons/"+this.iconColor+"/faster.png":this.rootPath+"button-icons/"+this.iconColor+"/"+d+".png",g=this.getButtonTitle(d),v=t("<div>",{role:"button",tabindex:"0","aria-label":g,class:"able-button-handler-"+d}),"volume"!==d&&"preferences"!==d&&"captions"!==d\|\|("preferences"==d?(this.prefCats=this.getPreferencesGroups(),this.prefCats.length>1?(C=this.mediaId+"-prefs-menu",v.attr({"aria-controls":C,"aria-haspopup":"menu","aria-expanded":"false"})):1===this.prefCats.length&&v.attr({"aria-haspopup":"dialog"})):"volume"===d?(C=this.mediaId+"-volume-slider",v.attr({"aria-controls":C,"aria-expanded":"false"})):"captions"===d&&this.captions&&(this.captions.length>1?v.attr("aria-expanded","false"):v.attr("aria-pressed","false"))),"font"===this.iconType)y="volume"===d?"icon-"+this.volumeButton:"slower"===d?"animals"===this.speedIcons?"icon-turtle":"icon-slower":"faster"===d?"animals"===this.speedIcons?"icon-rabbit":"icon-faster":"icon-"+d,b=t("<span>",{class:y,"aria-hidden":"true"}),v.append(b);else if("svg"===this.iconType){var w;w="volume"===d?this.getSvgData(this.volumeButton):"fullscreen"===d?this.getSvgData("fullscreen-expand"):"slower"===d?"animals"===this.speedIcons?this.getSvgData("turtle"):this.getSvgData("slower"):"faster"===d?"animals"===this.speedIcons?this.getSvgData("rabbit"):this.getSvgData("faster"):this.getSvgData(d),b=t("<svg>",{focusable:"false","aria-hidden":"true",viewBox:w[0]}),u=t("<path>",{d:w[1]}),b.append(u),v.html(b),v.html(v.html())}else f=t("<img>",{src:m,alt:"",role:"presentation"}),v.append(f);var D=t("<span>",{class:"able-clipped"}).text(g);v.append(D),v.on("mouseenter focus",(function(i){clearTimeout(P);var s=t(this).attr("aria-label"),a=t(this).position(),n=t(this).height(),r=t(this).width(),o=e.$controllerDiv.width();a.right=o-a.left-r;var l=a.top+n+5;if(t(this).parent().hasClass("able-right-controls"))var h="right";else h="left";var p=AblePlayer.localGetElementById(v[0],T).text(s).width();if("left"==h){(u=a.left-p/2)<0&&(u=2);var c={left:u+"px",right:"",top:l+"px"}}else{var u;(u=a.right-p/2)<0&&(u=2);c={left:"",right:u+"px",top:l+"px"}}var d=AblePlayer.localGetElementById(v[0],T).text(s).css(c);e.showTooltip(d),t(this).on("mouseleave blur",(function(){clearTimeout(P),P=setTimeout((function(){AblePlayer.localGetElementById(v[0],T).text("").hide()}),500),e.$tooltipDiv.on("mouseenter focus",(function(){clearTimeout(P)})),e.$tooltipDiv.on("mouseleave blur",(function(){AblePlayer.localGetElementById(v[0],T).text("").hide()}))}))})),"captions"===d?this.prefCaptions&&1===this.prefCaptions\|\|(k=this.captions.length>1?this.tt.captions:this.tt.showCaptions,v.addClass("buttonOff").attr("title",k),v.attr("aria-pressed","false")):"descriptions"===d&&(this.prefDesc&&1===this.prefDesc\|\|v.addClass("buttonOff").attr("title",this.tt.turnOnDescriptions)),o.append(v),"play"===d?this.$playpauseButton=v:"previous"==d?(this.$prevButton=v,"previous"==this.buttonWithFocus&&(this.$prevButton.focus(),this.buttonWithFocus=null)):"next"==d?(this.$nextButton=v,"next"==this.buttonWithFocus&&(this.$nextButton.focus(),this.buttonWithFocus=null)):"captions"===d?this.$ccButton=v:"sign"===d?(this.$signButton=v,this.$signWindow.is(":visible")\|\|this.$signButton.addClass("buttonOff")):"descriptions"===d?this.$descButton=v:"mute"===d?this.$muteButton=v:"transcript"===d?(this.$transcriptButton=v,this.$transcriptDiv.is(":visible")\|\|this.$transcriptButton.addClass("buttonOff").attr("title",this.tt.showTranscript)):"fullscreen"===d?this.$fullscreenButton=v:"chapters"===d?this.$chaptersButton=v:"preferences"===d?this.$prefsButton=v:"volume"===d&&(this.$volumeButton=v)}"volume"===d&&this.addVolumeSlider(o)}a%2==1&&this.$controllerDiv.append('<div style="clear:both;"></div>')}for(var A in void 0!==this.$captionsDiv&&this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv),this.controls=[],i)i.hasOwnProperty(A)&&(this.controls=this.controls.concat(i[A]));this.refreshControls("init")},AblePlayer.prototype.useSvg=function(){var t,e,i=Object.create(null),debouncedCheck=function(){clearTimeout(e),e=setTimeout(t,100)},unobserveChanges=function(){},s="http://www.w3.org/1999/xlink";t=function(){var t,e,a,n,r,o,l,h,p,c=0;if(window.XMLHttpRequest&&(r=void 0!==(r=new XMLHttpRequest).withCredentials?XMLHttpRequest:XDomainRequest\|\|void 0),void 0!==r){for(unobserveChanges(),h=document.getElementsByTagName("use"),n=0;n<h.length;n+=1){try{e=h[n].getBoundingClientRect()}catch(t){e=!1}t=(l=h[n].getAttributeNS(s,"href").split("#"))[0],a=l[1],o=e&&0===e.left&&0===e.right&&0===e.top&&0===e.bottom,e&&0===e.width&&0===e.height&&!o?t.length&&(!0!==(p=i[t])&&setTimeout(attrUpdateFunc({useEl:h[n],base:t,hash:a}),0),void 0===p&&(p=new r,i[t]=p,p.onload=onloadFunc(p),p.onerror=onErrorTimeout(p),p.ontimeout=onErrorTimeout(p),p.open("GET",t),p.send(),c+=1)):o\|\|(void 0===i[t]?i[t]=!0:i[t].onload&&(i[t].abort(),i[t].onload=void 0,i[t]=!0))}h="",c+=1,observeIfDone()}function observeIfDone(){var t;0===(c-=1)&&(window.addEventListener("resize",debouncedCheck,!1),window.addEventListener("orientationchange",debouncedCheck,!1),window.MutationObserver?((t=new MutationObserver(debouncedCheck)).observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}),unobserveChanges=function(){try{t.disconnect(),window.removeEventListener("resize",debouncedCheck,!1),window.removeEventListener("orientationchange",debouncedCheck,!1)}catch(t){}}):(document.documentElement.addEventListener("DOMSubtreeModified",debouncedCheck,!1),unobserveChanges=function(){document.documentElement.removeEventListener("DOMSubtreeModified",debouncedCheck,!1),window.removeEventListener("resize",debouncedCheck,!1),window.removeEventListener("orientationchange",debouncedCheck,!1)}))}function attrUpdateFunc(t){return function(){!0!==i[t.base]&&t.useEl.setAttributeNS(s,"xlink:href","#"+t.hash)}}function onloadFunc(t){return function(){var e,i=document.body,s=document.createElement("x");t.onload=null,s.innerHTML=t.responseText,(e=s.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",i.insertBefore(e,i.firstChild)),observeIfDone()}}function onErrorTimeout(t){return function(){t.onerror=null,t.ontimeout=null,observeIfDone()}}}},AblePlayer.prototype.cuePlaylistItem=function(e){var i,s,a,n,r,o,l=this;s=this.player,this.initializing\|\|this.playerCreated&&this.deletePlayer("playlist"),this.swappingSrc=!0,this.startedPlaying?this.okToPlay=!0:this.okToPlay=!1,this.loadingMedia=!1,i=this.$playlist.eq(e),this.hasAttr(i,"data-youtube-id")?(this.youTubeId=this.getYouTubeId(i.attr("data-youtube-id")),this.hasAttr(i,"data-youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(i.attr("data-youtube-desc-id"))),a="youtube"):this.hasAttr(i,"data-vimeo-id")?(this.vimeoId=this.getVimeoId(i.attr("data-vimeo-id")),this.hasAttr(i,"data-vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(i.attr("data-vimeo-desc-id"))),a="vimeo"):a="html5","youtube"===a?"html5"===s&&(this.playing&&this.pauseMedia(),this.$media.hide()):(this.youTubeId=!1,"youtube"===s&&this.$media.show()),this.player=a,this.$media.empty(),this.hasAttr(i,"data-poster")&&this.$media.attr("poster",i.attr("data-poster")),this.hasAttr(i,"data-youtube-desc-id")&&this.$media.attr("data-youtube-desc-id",i.attr("data-youtube-desc-id")),this.youTubeId&&this.$media.attr("data-youtube-id",i.attr("data-youtube-id"));var h=i.children("span.able-source");h.length&&h.each((function(){if(l.hasAttr(t(this),"data-src")){var e=t("<source>",{src:t(this).attr("data-src")});l.hasAttr(t(this),"data-type")&&e.attr("type",t(this).attr("data-type")),l.hasAttr(t(this),"data-desc-src")&&e.attr("data-desc-src",t(this).attr("data-desc-src")),l.hasAttr(t(this),"data-sign-src")&&e.attr("data-sign-src",t(this).attr("data-sign-src")),l.$media.append(e)}}));var p=i.children("span.able-track");p.length&&p.each((function(){if(l.hasAttr(t(this),"data-src")&&l.hasAttr(t(this),"data-kind")&&l.hasAttr(t(this),"data-srclang")){var e=t("<track>",{src:t(this).attr("data-src"),kind:t(this).attr("data-kind"),srclang:t(this).attr("data-srclang")});l.hasAttr(t(this),"data-label")&&e.attr("label",t(this).attr("data-label")),l.hasAttr(t(this),"data-desc")&&e.attr("data-desc",t(this).attr("data-desc")),l.$media.append(e)}})),n=i.text(),this.hasAttr(i,"lang")&&(r=i.attr("lang")),this.$sources=this.$media.find("source"),this.recreatingPlayer\|\|this.recreatePlayer().then((function(){l.$playlist.removeClass("able-current").children("button").removeAttr("aria-current"),l.$playlist.eq(e).addClass("able-current").children("button").attr("aria-current","true"),!0===l.showNowPlaying&&void 0!==l.$nowPlayingDiv&&(o=t("<span>"),void 0!==r&&o.attr("lang",r),o.html("<span>"+l.tt.selectedTrack+":</span>"+n),l.$nowPlayingDiv.html(o)),l.initializing?l.swappingSrc=!1:"html5"===l.player?l.loadingMedia\|\|(l.media.load(),l.loadingMedia=!0):"youtube"===l.player&&(l.okToPlay=!0),l.initializing=!1,l.playerCreated=!0}))},AblePlayer.prototype.deletePlayer=function(e){"youtube"===this.player&&this.youTubePlayer&&this.youTubePlayer.destroy(),"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.destroy(),this.$controllerDiv.empty(),this.$elapsedTimeContainer.empty().text("0:00"),this.$durationContainer.empty(),this.$signWindow&&this.$signWindow.remove(),this.$transcriptArea&&this.$transcriptArea.remove(),t(".able-modal-dialog").remove(),this.$captionsWrapper&&this.$captionsWrapper.remove(),this.$descDiv&&this.$descDiv.remove(),this.hasCaptions=!1,this.hasChapters=!1,this.hasDescTracks=!1,this.hasOpenDesc=!1,this.hasClosedDesc=!1,this.captionsPopup=null,this.chaptersPopup=null,this.transcriptType=null,this.playerDeleted=!0},AblePlayer.prototype.getButtonTitle=function(t){return"playpause"===t\|\|"play"===t?this.tt.play:"pause"===t?this.tt.pause:"restart"===t?this.tt.restart:"previous"===t?this.tt.prevTrack:"next"===t?this.tt.nextTrack:"rewind"===t?this.tt.rewind:"forward"===t?this.tt.forward:"captions"===t?this.captions.length>1?this.tt.captions:this.captionsOn?this.tt.hideCaptions:this.tt.showCaptions:"descriptions"===t?this.descOn?this.tt.turnOffDescriptions:this.tt.turnOnDescriptions:"transcript"===t?this.$transcriptDiv.is(":visible")?this.tt.hideTranscript:this.tt.showTranscript:"chapters"===t?this.tt.chapters:"sign"===t?this.tt.sign:"volume"===t?this.tt.volume:"faster"===t?this.tt.faster:"slower"===t?this.tt.slower:"preferences"===t?this.tt.preferences:"help"!==t?"fullscreen"===t?this.fullscreen?this.tt.exitFullscreen:this.tt.enterFullscreen:(this.debug,t.charAt(0).toUpperCase()+t.slice(1)):void 0}}(jQuery);var preProcessing={transformCSSClasses:function(t){return t.replace(/<(v\|c\|b\|i\|u\|lang\|ruby)\.([\w\.]+)([^>])>/g,(function(t,e,i,s){return"<"+e+' class="'+i.split(".").join(" ")+'"'+s+">"}))},transformLangTags:function(t){return t.replace(/<lang\s+([\w-]+)([^>])>/g,(function(t,e,i){return'<lang lang="'+e+'"'+i+">"}))},transformVTags:function(t){return t.replace(/<v\s+([^>]?)>/g,(function(t,e){var i=e.match(/class="([^"])"/),s=i?i[0]:"",a=e.replace(/class="[^"]"/,"").trim().split(/\s+/),n=[],r=[];a.forEach((function(t){-1!==t.indexOf("=")?n.push(t):r.push(t)}));var o=r.join(" "),l="<v";return o&&(l+=' title="'+o+'"'),n.length>0&&(l+=" "+n.join(" ")),s&&(l+=" "+s),l+=">"}))}},postProcessing={postprocessCTag:function(t){return t.replace(/<c class="([\w\s]+)">/g,(function(t,e){return"<c."+e.split(" ").join(".")+">"}))},postprocessVTag:function(t){return t.replace(/<v class="([\w\s]+)"([^>])>/g,(function(t,e,i){return"<v."+e.split(" ").join(".")+i+">"}))},postprocessLangTag:function(t){return t.replace(/<lang lang="([\w-]+)"([^>])>/g,(function(t,e,i){return"<lang "+e+i+">"}))}},validate={preProcessVttContent:function(t){var e=preProcessing.transformCSSClasses(t),i=preProcessing.transformLangTags(e);return preProcessing.transformVTags(i)},postProcessVttContent:function(t,e){var i=postProcessing.postprocessCTag(t),s=postProcessing.postprocessVTag(i);return postProcessing.postprocessLangTag(s).replace(/-->/g,"--\x3e").replace(/<\/v>/g,(function(t,i){return-1!==e.indexOf(t,i)?t:""}))},sanitizeVttContent:function(t){if(null==t)return"";var e=validate.preProcessVttContent(t),i=DOMPurify.sanitize(e,{ALLOWED_TAGS:["b","i","u","v","c","lang","ruby","rt","rp"],ALLOWED_ATTR:["title","class","lang"],KEEP_CONTENT:!0});return validate.postProcessVttContent(i,t)}};"undefined"!=typeof module&&module.exports&&(module.exports=validate),function(t){AblePlayer.prototype.setupTracks=function(){var e,i,s,a,n,r,o,l,h;for(e=this,s=(i=new t.Deferred).promise(),a=[],t("#able-vts").length?(this.vtsTracks=[],this.hasVts=!0):this.hasVts=!1,o=this.hasDescTracks&&this.descOn?this.altTracks:this.tracks,r=0;r<o.length;r++)if(h=(l=o[r]).kind,l.src){l.src;n=this.loadTextObject(l.src),a.push(n.catch((function(t){}))),n.then(function(t,i){t.src;var s=t.language,a=t.label,n=t.desc;return function(r,o){var l=o,h=e.parseWebVTT(r,l).cues;e.hasVts&&e.setupVtsTracks(i,s,n,a,r,l),"captions"===i\|\|"subtitles"===i?e.setupCaptions(t,h):"descriptions"===i?e.setupDescriptions(t,h):"chapters"===i?e.setupChapters(t,h):"metadata"===i&&e.setupMetadata(t,h)}}(l,h))}else(e.usingYouTubeCaptions\|\|e.usingVimeoCaptions)&&e.setupCaptions(l);return e.usingYouTubeCaptions\|\|e.usingVimeoCaptions?i.resolve():t.when.apply(t,a).then((function(){i.resolve()})),s},AblePlayer.prototype.getTracks=function(){var e,i,s,a,n,r,o,l,h,p,c;return e=this,l=!1,s=(i=new t.Deferred).promise(),this.$tracks=this.$media.find("track"),this.tracks=[],this.altTracks=[],this.captions=[],this.descriptions=[],this.chapters=[],this.meta=[],this.hasCaptionsTrack=!1,this.hasDescTracks=!1,this.$tracks.length&&(this.usingYouTubeCaptions=!1,this.$tracks.each((function(i,s){if("captions"===t(this).attr("kind")?e.hasCaptionsTrack=!0:"descriptions"===t(this).attr("kind")&&(e.hasClosedDesc=!0),a=t(this).attr("srclang")?t(this).attr("srclang"):e.lang,n=t(this).attr("label")?t(this).attr("label"):e.getLanguageName(a),void 0===t(this).attr("default")\|\|l?a===e.lang?(h=!0,r=!1):r=!1:(r=!0,l=!0),r&&(e.captionLang=a),void 0!==t(this).data("desc")?(o=!0,e.hasDescTracks=!0):o=!1,o?e.altTracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}):e.tracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}),i==e.$tracks.length-1){if(!l)if(h)for(e.captionLang=e.lang,p=!1,c=0;c<e.tracks.length&&!p;)e.tracks[c].language===e.lang&&(e.tracks[c].def=!0,p=!0),c++;else e.tracks[0].def=!0,e.captionLang=e.tracks[0].language;e.$media.find("track").removeAttr("default")}}))),this.$tracks.length&&this.hasCaptionsTrack?i.resolve():"youtube"===this.player?this.getYouTubeCaptionTracks(this.youTubeId).then((function(){e.hasCaptions&&(e.usingYouTubeCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()})):"vimeo"===this.player?this.getVimeoCaptionTracks().then((function(){e.hasCaptions&&(e.usingVimeoCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()})):(this.hasCaptions=!1,e.$captionsWrapper&&e.$captionsWrapper.remove(),i.resolve()),s},AblePlayer.prototype.setupCaptions=function(e,i){var s,a;if(void 0===i&&(i=null),this.usingYouTubeCaptions\|\|this.usingVimeoCaptions);else if(0===this.captions.length)this.captions.push({language:e.language,label:e.label,def:e.def,cues:i});else{for(s=!1,a=0;a<this.captions.length;a++)if(e.label.toLowerCase()<this.captions[a].label.toLowerCase()){this.captions.splice(a,0,{language:e.language,label:e.label,def:e.def,cues:i}),s=!0;break}s\|\|this.captions.push({language:e.language,label:e.label,def:e.def,cues:i})}this.hasCaptions=!0,this.currentCaption=-1,1===this.prefCaptions?this.captionsOn=!0:0===this.prefCaptions?this.captionsOn=!1:1===this.defaultStateCaptions?this.captionsOn=!0:this.captionsOn=!1,"audio"===this.mediaType&&this.captionsOn&&this.$captionsContainer.removeClass("captions-off"),(!this.$captionsWrapper\|\|this.$captionsWrapper&&!t.contains(this.$ableDiv[0],this.$captionsWrapper[0]))&&(this.$captionsDiv=t("<div>",{class:"able-captions"}),this.$captionsWrapper=t("<div>",{class:"able-captions-wrapper","aria-hidden":"true"}).hide(),"below"===this.prefCaptionsPosition?this.$captionsWrapper.addClass("able-captions-below"):this.$captionsWrapper.addClass("able-captions-overlay"),this.$captionsWrapper.append(this.$captionsDiv),this.$captionsContainer.append(this.$captionsWrapper))},AblePlayer.prototype.setupDescriptions=function(t,e){this.hasClosedDesc=!0,this.currentDescription=-1,this.descriptions.push({cues:e,language:t.language})},AblePlayer.prototype.setupChapters=function(t,e){this.hasChapters=!0,this.chapters.push({cues:e,language:t.language})},AblePlayer.prototype.setupMetadata=function(e,i,s){"text"===this.metaType?this.metaDiv&&t("#"+this.metaDiv)&&(this.$metaDiv=t("#"+this.metaDiv),this.hasMeta=!0,this.meta=i):"selector"===this.metaType&&(this.hasMeta=!0,this.visibleSelectors=[],this.meta=i)},AblePlayer.prototype.loadTextObject=function(e){var i,s,a,n;return s=(i=new t.Deferred).promise(),a=this,n=t("<div>",{style:"display:none"}),t.ajax({url:e,dataType:"text",success:function(t){var s=validate.sanitizeVttContent(t);n.html(s),i.resolve(e,s),n.remove()},error:function(t,s,r){a.debug,i.reject(e),n.remove()}}),s}}(jQuery),function(t){AblePlayer.prototype.initYouTubePlayer=function(){var e,i,s,a;return e=this,s=(i=new t.Deferred).promise(),this.youTubePlayerReady=!1,a=this.youTubeDescId&&this.prefDesc?this.youTubeDescId:this.youTubeId,this.activeYouTubeId=a,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeInit().then((function(){i.resolve()})):(AblePlayer.loadingYouTubeIframeAPI\|\|t.getScript("https://www.youtube.com/iframe_api").fail((function(){i.fail()})),t("body").on("youTubeIframeAPIReady",(function(){e.finalizeYoutubeInit().then((function(){i.resolve()}))}))),s},AblePlayer.prototype.finalizeYoutubeInit=function(){var e,i,s,a,n;return i=(e=new t.Deferred).promise(),s=this,a=this.mediaId+"_youtube",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.okToPlay?1:0,void 0===this.captionLang&&(this.captionLang=this.lang),this.youTubePlayer=new YT.Player(a,{videoId:this.activeYouTubeId,host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,enablejsapi:1,disableKb:1,playsinline:this.playsInline,start:this.startTime,controls:0,cc_load_policy:1,cc_lang_pref:this.captionLang,hl:this.lang,modestbranding:1,rel:0,iv_load_policy:3},events:{onReady:function(){s.youTubePlayerReady=!0,s.playerWidth&&s.playerHeight\|\|s.getYouTubeDimensions(),s.playerWidth&&s.playerHeight&&(s.youTubePlayer.setSize(s.playerWidth,s.playerHeight),s.$ableWrapper.css({width:s.playerWidth+"px"})),s.swappingSrc&&(s.swappingSrc=!1,s.restoreFocus(),s.cueingPlaylistItem=!1,(s.playing\|\|s.okToPlay)&&s.playMedia()),s.userClickedPlaylist&&(s.userClickedPlaylist=!1),s.recreatingPlayer&&(s.recreatingPlayer=!1),e.resolve()},onError:function(t){e.fail()},onStateChange:function(t){s.getPlayerState().then((function(t){"playing"===t?(s.playing=!0,s.startedPlaying=!0,s.paused=!1):"ended"==t?s.onMediaComplete():(s.playing=!1,s.paused=!0),s.stoppingYouTube&&"paused"===t&&(void 0!==s.$posterImg&&s.$posterImg.show(),s.stoppingYouTube=!1,s.seeking=!1,s.playing=!1,s.paused=!0)})),"youtube"!==s.player\|\|s.usingYouTubeCaptions\|\|s.youTubePlayer.getOptions("captions")&&s.youTubePlayer.unloadModule("captions")},onPlaybackQualityChange:function(){}}}),this.hasPlaylist\|\|this.$media.remove(),i},AblePlayer.prototype.getYouTubeDimensions=function(t){var e,i,s;void 0!==(e=this.$ableWrapper.find("iframe"))&&e.prop("width")&&(i=e.prop("width"),e.prop("height")&&(s=e.prop("height"),this.resizePlayer(i,s)))},AblePlayer.prototype.getYouTubeCaptionTracks=function(e){var i,s,a,n,r,o,l=new t.Deferred,h=l.promise();return i=this,this.youTubePlayer.getOption("captions","tracklist")\|\|(this.youTubePlayer.addEventListener("onApiChange",(function(t){if(i.duration=i.youTubePlayer.getDuration(),i.loadingYouTubeCaptions){if(s=i.youTubePlayer.getOption("captions","tracklist"),i.okToPlay\|\|i.youTubePlayer.pauseVideo(),s&&s.length){for(a=0;a<s.length;a++)n=s[a].languageCode,r=s[a].languageName,o=!1,void 0!==i.captionLang?n===i.captionLang&&(o=!0):void 0!==i.lang&&n===i.lang&&(o=!0),i.tracks.push({kind:"captions",language:n,label:r,def:o}),i.captions.push({language:n,label:r,def:o,cues:null});i.hasCaptions=!0,i.setupPopups("captions")}else i.usingYouTubeCaptions=!1,i.hasCaptions=!1;i.loadingYouTubeCaptions=!1,i.okToPlay&&i.youTubePlayer.playVideo()}i.captionLangPending&&(i.youTubePlayer.setOption("captions","track",{languageCode:i.captionLangPending}),i.captionLangPending=null),void 0!==i.prefCaptionsSize&&i.youTubePlayer.setOption("captions","fontSize",i.translatePrefs("size",i.prefCaptionsSize,"youtube")),l.resolve()})),this.loadingYouTubeCaptions=!0,this.youTubePlayer.playVideo()),h},AblePlayer.prototype.getYouTubeTimedTextUrl=function(t,e,i){var s="https://www.youtube.com/api/timedtext?fmt=vtt";return s+="&v="+t,s+="&lang="+i,""!==e&&(s+="&name="+e),s},AblePlayer.prototype.getYouTubePosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+t;return"120"==e?i+"/default.jpg":"320"==e\|\|"480"==e?i+"/hqdefault.jpg":"640"==e&&i+"/sddefault.jpg"},AblePlayer.prototype.getYouTubeId=function(t){var e;return-1!==t.indexOf("youtu")?(e=(t=t.trim()).length-11,t.substring(e)):t}}(jQuery),function(t){window.AccessibleSlider=function(e,i,s,a,n,r,o,l,h,p,c){var u,d;u=this,this.position=0,this.tracking=!1,this.trackDevice=null,this.keyTrackPosition=0,this.lastTrackPosition=0,this.nextStep=1,this.inertiaCount=0,this.bodyDiv=t(i),p&&(this.loadedDiv=t("<div></div>"),this.playedDiv=t("<div></div>")),this.seekHead=t("<div>",{"aria-orientation":s,class:"able-"+h+"-head"}),"visible"===c?this.seekHead.attr("tabindex","0"):this.seekHead.attr("tabindex","-1"),this.seekHead.attr({role:"slider","aria-label":l,"aria-valuemin":n,"aria-valuemax":r}),this.timeTooltipTimeoutId=null,this.overTooltip=!1,this.timeTooltip=t("<div>"),this.bodyDiv.append(this.timeTooltip),this.timeTooltip.attr("role","tooltip"),this.timeTooltip.addClass("able-tooltip"),this.timeTooltip.on("mouseenter focus",(function(){u.overTooltip=!0,clearInterval(u.timeTooltipTimeoutId)})),this.timeTooltip.on("mouseleave blur",(function(){u.overTooltip=!1,t(this).hide()})),this.timeTooltip.hide(),this.bodyDiv.append(this.loadedDiv),this.bodyDiv.append(this.playedDiv),this.bodyDiv.append(this.seekHead),this.bodyDiv.wrap("<div></div>"),this.wrapperDiv=this.bodyDiv.parent(),"legacy"===this.skin&&("horizontal"===s?(this.wrapperDiv.width(a),this.loadedDiv.width(0)):(this.wrapperDiv.height(a),this.loadedDiv.height(0))),this.wrapperDiv.addClass("able-"+h+"-wrapper"),p&&(this.loadedDiv.addClass("able-"+h+"-loaded"),this.playedDiv.width(0),this.playedDiv.addClass("able-"+h+"-played"),this.setDuration(r)),this.seekHead.on("mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend",(function(t){d=u.pointerEventToXY(t),"mouseenter"===t.type\|\|"focus"===t.type?u.overHead=!0:"mouseleave"===t.type\|\|"blur"===t.type?(u.overHead=!1,!u.overBody&&u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x))):"mousemove"===t.type\|\|"touchmove"===t.type?u.tracking&&"mouse"===u.trackDevice&&u.trackHeadAtPageX(d.x):"mousedown"===t.type\|\|"touchstart"===t.type?(u.startTracking("mouse",u.pageXToPosition(u.seekHead.offset()+u.seekHead.width()/2)),u.bodyDiv.is(":focus")\|\|u.bodyDiv.focus(),t.preventDefault()):"mouseup"!==t.type&&"touchend"!==t.type\|\|u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x)),"mousemove"!==t.type&&"mousedown"!==t.type&&"mouseup"!==t.type&&"touchstart"!==t.type&&"touchend"!==t.type&&u.refreshTooltip()})),this.bodyDiv.on("mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend",(function(t){if(d=u.pointerEventToXY(t),"mouseenter"===t.type)u.overBody=!0,u.overBodyMousePos={x:d.x,y:d.y};else if("mouseleave"===t.type)u.overBody=!1,u.overBodyMousePos=null,!u.overHead&&u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x));else if("mousemove"===t.type\|\|"touchmove"===t.type)u.overBodyMousePos={x:d.x,y:d.y},u.tracking&&"mouse"===u.trackDevice&&u.trackHeadAtPageX(d.x);else if("mousedown"===t.type\|\|"touchstart"===t.type)u.startTracking("mouse",u.pageXToPosition(d.x)),u.trackHeadAtPageX(d.x),u.seekHead.is(":focus")\|\|u.seekHead.focus(),t.preventDefault();else if("mouseup"===t.type\|\|"touchend"===t.type)u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x));else if("keydown"===t.type){if(36===t.which)u.trackImmediatelyTo(0);else if(35===t.which)u.trackImmediatelyTo(u.duration);else if(37===t.which\|\|40===t.which)u.arrowKeyDown(-1);else if(39===t.which\|\|38===t.which)u.arrowKeyDown(1);else if(33===t.which&&o>0)u.arrowKeyDown(o);else{if(!(34===t.which&&o>0))return;u.arrowKeyDown(-o)}t.preventDefault()}else"keyup"===t.type&&t.which>=33&&t.which<=40&&(u.tracking&&"keyboard"===u.trackDevice&&u.stopTracking(u.keyTrackPosition),t.preventDefault());u.overTooltip\|\|"mouseup"===t.type\|\|"keydown"===t.type\|\|"keydown"===t.type\|\|u.refreshTooltip()}))},AccessibleSlider.prototype.arrowKeyDown=function(t){this.tracking&&"keyboard"===this.trackDevice?(this.keyTrackPosition=this.boundPos(this.keyTrackPosition+this.nextStept),this.inertiaCount+=1,20===this.inertiaCount&&(this.inertiaCount=0,this.nextStep=2),this.trackHeadAtPosition(this.keyTrackPosition)):(this.nextStep=1,this.inertiaCount=0,this.keyTrackPosition=this.boundPos(this.position+this.nextStept),this.startTracking("keyboard",this.keyTrackPosition),this.trackHeadAtPosition(this.keyTrackPosition))},AccessibleSlider.prototype.pageXToPosition=function(t){var e=t-this.bodyDiv.offset().left,i=this.duration(e/this.bodyDiv.width());return this.boundPos(i)},AccessibleSlider.prototype.boundPos=function(t){return Math.max(0,Math.min(t,this.duration))},AccessibleSlider.prototype.setDuration=function(t){t!==this.duration&&(this.duration=t,this.resetHeadLocation(),this.seekHead.attr("aria-valuemax",t))},AccessibleSlider.prototype.setWidth=function(t){this.wrapperDiv.width(t),this.resizeDivs(),this.resetHeadLocation()},AccessibleSlider.prototype.getWidth=function(){return this.wrapperDiv.width()},AccessibleSlider.prototype.resizeDivs=function(){this.playedDiv.width(this.bodyDiv.width()(this.position/this.duration)),this.loadedDiv.width(this.bodyDiv.width()this.buffered)},AccessibleSlider.prototype.resetHeadLocation=function(){var t=this.position/this.duration,e=this.bodyDiv.width()t;this.seekHead.css("left",e-this.seekHead.width()/2),this.tracking&&this.stopTracking(this.position)},AccessibleSlider.prototype.setPosition=function(t,e){this.position=t,this.resetHeadLocation(),this.overHead&&this.refreshTooltip(),this.resizeDivs(),this.updateAriaValues(t,e)},AccessibleSlider.prototype.setBuffered=function(t){isNaN(t)\|\|(this.buffered=t,this.redrawDivs)},AccessibleSlider.prototype.startTracking=function(t,e){this.tracking\|\|(this.trackDevice=t,this.tracking=!0,this.bodyDiv.trigger("startTracking",[e]))},AccessibleSlider.prototype.stopTracking=function(t){this.trackDevice=null,this.tracking=!1,this.bodyDiv.trigger("stopTracking",[t]),this.setPosition(t,!0)},AccessibleSlider.prototype.trackHeadAtPageX=function(t){var e=this.pageXToPosition(t),i=t-this.bodyDiv.offset().left-this.seekHead.width()/2;i=Math.max(0,Math.min(i,this.bodyDiv.width()-this.seekHead.width())),this.lastTrackPosition=e,this.seekHead.css("left",i),this.reportTrackAtPosition(e)},AccessibleSlider.prototype.trackHeadAtPosition=function(t){var e=t/this.duration,i=this.bodyDiv.width()e;this.lastTrackPosition=t,this.seekHead.css("left",i-this.seekHead.width()/2),this.reportTrackAtPosition(t)},AccessibleSlider.prototype.reportTrackAtPosition=function(t){this.bodyDiv.trigger("tracking",[t]),this.updateAriaValues(t,!0)},AccessibleSlider.prototype.updateAriaValues=function(e,i){var s,a=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),o=1===n?"minute":"minutes",l=1===r?"second":"seconds";s=a>0?a+" "+(1===a?"hour":"hours")+", "+n+" "+o+", "+r+" "+l:n>0?n+" "+o+", "+r+" "+l:r+" "+l,this.liveAriaRegion\|\|(this.liveAriaRegion=t("<span>",{class:"able-offscreen","aria-live":"polite"}),this.wrapperDiv.append(this.liveAriaRegion)),i&&this.liveAriaRegion.text()!==s&&this.liveAriaRegion.text(s),this.seekHead.attr("aria-valuetext",s),this.seekHead.attr("aria-valuenow",Math.floor(e).toString())},AccessibleSlider.prototype.trackImmediatelyTo=function(t){this.startTracking("keyboard",t),this.trackHeadAtPosition(t),this.keyTrackPosition=t},AccessibleSlider.prototype.refreshTooltip=function(){if(this.overHead)this.timeTooltip.show(),this.tracking?this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)):this.timeTooltip.text(this.positionToStr(this.position)),this.setTooltipPosition(this.seekHead.position().left+this.seekHead.width()/2);else if(this.overBody&&this.overBodyMousePos)this.timeTooltip.show(),this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))),this.setTooltipPosition(this.overBodyMousePos.x-this.bodyDiv.offset().left);else{clearTimeout(this.timeTooltipTimeoutId);var t=this;this.timeTooltipTimeoutId=setTimeout((function(){t.timeTooltip.hide()}),500)}},AccessibleSlider.prototype.hideSliderTooltips=function(){this.overHead=!1,this.overBody=!1,this.timeTooltip.hide()},AccessibleSlider.prototype.setTooltipPosition=function(t){this.timeTooltip.css({left:t-this.timeTooltip.width()/2-10,bottom:this.seekHead.height()+10})},AccessibleSlider.prototype.positionToStr=function(t){var e=Math.floor(t/3600),i=Math.floor(t/60)%60,s=Math.floor(t%60);return s<10&&(s="0"+s),e>0?(i<10&&(i="0"+i),e+":"+i+":"+s):i+":"+s},AccessibleSlider.prototype.pointerEventToXY=function(t){var e={x:0,y:0};if("touchstart"==t.type\|\|"touchmove"==t.type\|\|"touchend"==t.type\|\|"touchcancel"==t.type){var i=t.originalEvent.touches[0]\|\|t.originalEvent.changedTouches[0];e.x=i.pageX,e.y=i.pageY}else"mousedown"!=t.type&&"mouseup"!=t.type&&"mousemove"!=t.type&&"mouseover"!=t.type&&"mouseout"!=t.type&&"mouseenter"!=t.type&&"mouseleave"!=t.type\|\|(e.x=t.pageX,e.y=t.pageY);return e}}(jQuery),function(t){AblePlayer.prototype.addVolumeSlider=function(e){var i,s,a,n,r,o,l,h,p;for(i=this,s=this.mediaId+"-volume-slider",a=this.mediaId+"-volume-help",r=this.mediaId+"-volume-tick-labels",this.$volumeSlider=t("<div>",{id:s,class:"able-volume-slider","aria-hidden":"true"}).hide(),this.$volumeSliderTooltip=t("<div>",{class:"able-tooltip",role:"tooltip"}).hide(),this.$volumeRange=t("<input>",{type:"range",min:"0",max:"10",step:"1",orient:"vertical","aria-label":this.tt.volumeUpDown,value:this.volume}),n=parseInt(i.volume)/10100,this.$volumeHelp=t("<div>",{id:a,class:"able-volume-help","aria-live":"polite"}).text(n+"%"),this.$volumeButton.attr({"aria-describedby":a}),o=t("<datalist>",{id:r}),l=0;l<=10;l++)p=0===l?this.tt.mute:10l+"%",h=t("<option>",{value:l,label:p}),o.append(h);this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp),e.append(this.$volumeSlider),this.$volumeRange.on("change",(function(e){i.handleVolumeChange(t(this).val())})),this.$volumeRange.on("input",(function(e){i.handleVolumeChange(t(this).val())})),this.$volumeRange.on("keydown",(function(t){27!==t.which&&13!==t.which&&9!==t.which\|\|(i.$volumeSlider.is(":visible")?(i.closingVolume=!0,i.hideVolumePopup()):i.closingVolume\|\|i.showVolumePopup())}))},AblePlayer.prototype.refreshVolumeHelp=function(t){var e;e=t/10100,this.$volumeHelp&&this.$volumeHelp.text(e+"%"),this.$volumeRange.attr("value",t)},AblePlayer.prototype.refreshVolumeButton=function(t){var e,i,s,a,n,r;e=this.getVolumeName(t),i=t/10100,s=this.tt.volume+" "+i+"%","font"===this.iconType?(a="icon-volume-"+e,this.$volumeButton.find("span").first().removeClass().addClass(a),this.$volumeButton.find("span.able-clipped").text(s)):"image"===this.iconType?(n=this.imgPath+"volume-"+e+".png",this.$volumeButton.find("img").attr("src",n)):"svg"===this.iconType&&("mute"!==e&&(e="volume-"+e),r=this.getSvgData(e),this.$volumeButton.find("svg").attr("viewBox",r[0]),this.$volumeButton.find("path").attr("d",r[1]))},AblePlayer.prototype.handleVolumeButtonClick=function(){this.$volumeSlider.is(":visible")?this.hideVolumePopup():this.showVolumePopup()},AblePlayer.prototype.handleVolumeKeystroke=function(t){var e;if(!(t>=49&&t<=57))return!1;e=t-48,this.isMuted()&&e>0?this.setMute(!1):0===e?this.setMute(!0):(this.setVolume(e),this.refreshVolumeHelp(e),this.refreshVolumeButton(e))},AblePlayer.prototype.handleVolumeChange=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleMute=function(){this.isMuted()?this.setMute(!1):this.setMute(!0)},AblePlayer.prototype.showVolumePopup=function(){this.closePopups(),this.$tooltipDiv.hide(),this.$volumeSlider.show().attr("aria-hidden","false"),this.$volumeButton.attr("aria-expanded","true"),this.$volumeButton.focus(),this.waitThenFocus(this.$volumeRange)},AblePlayer.prototype.hideVolumePopup=function(){var t=this;this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus(),setTimeout((function(){t.closingVolume=!1}),1e3)},AblePlayer.prototype.isMuted=function(){return"html5"===this.player?this.media.muted:"youtube"===this.player?this.youTubePlayer.isMuted():void 0},AblePlayer.prototype.setMute=function(t){t?(this.lastVolume=this.volume,this.volume=0):void 0!==this.lastVolume&&(this.volume=this.lastVolume),"html5"===this.player?this.media.muted=t:"youtube"===this.player&&(t?this.youTubePlayer.mute():this.youTubePlayer.unMute()),this.setVolume(this.volume),this.refreshVolumeHelp(this.volume),this.refreshVolumeButton(this.volume)},AblePlayer.prototype.setVolume=function(t){var e;"html5"===this.player?(e=t/10,this.media.volume=e,this.hasSignLanguage&&this.signVideo&&(this.signVideo.volume=0)):"youtube"===this.player?(e=10t,this.youTubePlayer.setVolume(e),this.volume=t):"vimeo"===this.player&&(e=t/10,this.vimeoPlayer.setVolume(e).then((function(){}))),this.lastVolume=t},AblePlayer.prototype.getVolume=function(t){return"html5"===this.player?10this.media.volume:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getVolume()/10:"vimeo"===this.player?this.volume:void 0},AblePlayer.prototype.getVolumeName=function(t){return 0==t?"mute":10==t?"loud":t<5?"soft":"medium"}}(jQuery),function(t){var e="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]";window.AccessibleDialog=function(i,s,a,n,r,o,l,h,p,c){this.title=r,this.closeButtonLabel=l,this.focusedElementBeforeModal=s,this.escapeHook=c,this.baseId=t(i).attr("id")\|\|Math.floor(1e9Math.random()).toString();var u=this,d=i;if(this.modal=d,d.css({width:h\|\|"50%"}),d.addClass("able-modal-dialog"),!p){var f=t("<button>",{class:"modalCloseButton",title:u.closeButtonLabel,"aria-label":u.closeButtonLabel}).text("X");f.keydown((function(t){32===t.which&&u.hide()})).click((function(){u.hide()}));var m=t("<h1></h1>");m.attr("id","modalTitle-"+this.baseId),m.css("text-align","center"),m.text(r),this.titleH1=m,d.attr({"aria-labelledby":"modalTitle-"+this.baseId}),d.prepend(m),d.prepend(f)}d.attr({"aria-hidden":"true",role:a}),n&&d.attr("aria-modal","true"),d.keydown((function(i){if(27===i.which)u.escapeHook?u.escapeHook(i,this):(u.hide(),i.preventDefault());else if(9===i.which){var s=d.find("").filter(e).filter(":visible");if(0===s.length)return;var a=t(":focus"),n=s.index(a);i.shiftKey?0===n&&(s.get(s.length-1).focus(),i.preventDefault()):n===s.length-1&&(s.get(0).focus(),i.preventDefault())}i.stopPropagation()})),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden")},AccessibleDialog.prototype.show=function(){if(!this.overlay){var i=t("<div></div>").attr({class:"able-modal-overlay",tabindex:"-1"});this.overlay=i,t("body").append(i),i.on("mousedown.accessibleModal",(function(t){t.preventDefault()}))}t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").attr("aria-hidden","true"),this.overlay.css("display","block"),this.modal.css("display","block"),this.modal.attr({"aria-hidden":"false",tabindex:"-1"}),0===this.modal.find("").filter(e).filter(":visible").length&&this.focusedElementBeforeModal.blur();var s=this;setTimeout((function(){s.modal.find("button.modalCloseButton").first().focus()}),300)},AccessibleDialog.prototype.hide=function(){this.overlay&&this.overlay.css("display","none"),this.modal.css("display","none"),this.modal.attr("aria-hidden","true"),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden"),this.focusedElementBeforeModal.focus()},AccessibleDialog.prototype.getInputs=function(){return!!this.modal&&this.modal.find("input")}}(jQuery),function(t){AblePlayer.prototype.getNextHeadingLevel=function(e){var i,s,a,n;return e.parents().each((function(){if(i=t(this).children(":header"),s=i.length)return a=i.eq(s-1).prop("tagName"),!1})),void 0===a?n=1:(n=parseInt(a[1]),(n+=1)>6&&(n=6)),n},AblePlayer.prototype.countProperties=function(t){var e,i;for(i in e=0,t)t.hasOwnProperty(i)&&++e;return e},AblePlayer.prototype.formatSecondsAsColonTime=function(t,e){var i,s,a,n,r,o,l;if(e)if(2===(n=t.toString().split(".")).length){if((r=n[1]).length<3)for(o=3-r.length,l=1;l<=o;l++)r+="0"}else r="000";return i=Math.floor(t/3600),s=Math.floor(t/60)%60,(a=Math.floor(t%60))<10&&(a="0"+a),i>0?(s<10&&(s="0"+s),e?i+":"+s+":"+a+"."+r:i+":"+s+":"+a):e?(i<1?i="00":i<10&&(i="0"+i),s<1?s="00":s<10&&(s="0"+s),i+":"+s+":"+a+"."+r):s+":"+a},AblePlayer.prototype.getSecondsFromColonTime=function(t){var e;return 3===(e=t.split(":")).length?3600parseInt(e[0])+60parseInt(e[1])+parseFloat(e[2]):2===e.length?60parseInt(e[0])+parseFloat(e[1]):1===e.length?parseFloat(e[0]):void 0},AblePlayer.prototype.capitalizeFirstLetter=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},AblePlayer.prototype.roundDown=function(t,e){return Number(Math.floor(t+"e"+e)+"e-"+e)},AblePlayer.prototype.hasAttr=function(t,e){var i=t.attr(e);return void 0!==i&&!1!==i},Number.isInteger=Number.isInteger\|\|function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t}}(jQuery),function(t){AblePlayer.prototype.initDescription=function(){var e,i;return i=(e=new t.Deferred).promise(),"audio"===this.mediaType&&e.resolve(),this.descFile=this.$sources.first().attr("data-desc-src"),void 0!==this.descFile\|\|this.youTubeDescId\|\|this.vimeoDescId?this.hasOpenDesc=!0:this.hasOpenDesc=!1,this.hasOpenDesc&&this.hasClosedDesc?this.prefDescMethod?this.descMethod=this.prefDescMethod:this.descMethod="video":this.hasOpenDesc?this.descMethod="video":this.hasClosedDesc?this.descMethod="text":this.descMethod=null,this.descMethod?1===this.prefDesc?this.descOn=!0:0===this.prefDesc?this.descOn=!1:1===this.defaultStateDescriptions?this.descOn=!0:this.descOn=!1:this.descOn=!1,void 0===this.$descDiv&&this.hasClosedDesc&&"text"===this.descMethod&&this.injectTextDescriptionArea(),this.descOn?("video"===this.descMethod&&(this.usingDescribedVersion()\|\|this.swapDescription()),this.hasClosedDesc&&(this.prefDescVisible?void 0!==this.$descDiv&&(this.$descDiv.show(),this.$descDiv.removeClass("able-clipped")):void 0!==this.$descDiv&&this.$descDiv.addClass("able-clipped"))):"video"===this.descMethod?this.usingDescribedVersion()&&this.swapDescription():"text"===this.descMethod&&void 0!==this.$descDiv&&(this.$descDiv.hide(),this.$descDiv.removeClass("able-clipped")),e.resolve(),i},AblePlayer.prototype.usingDescribedVersion=function(){return"youtube"===this.player?this.activeYouTubeId===this.youTubeDescId:"vimeo"===this.player?this.activeVimeoId===this.vimeoDescId:this.$sources.first().attr("data-desc-src")===this.$sources.first().attr("src")},AblePlayer.prototype.initSpeech=function(e){var i=this;if(null===this.speechEnabled)if(void 0!==this.synth&&this.synth.cancel(),window.speechSynthesis)if(this.synth=window.speechSynthesis,"init"===e)t(document).on("click",(function(){var e=new SpeechSynthesisUtterance("Hi!");e.volume=0,e.rate=10,i.synth.speak(e),e.onstart=function(e){t(document).off("click")},e.onend=function(t){i.getBrowserVoices(),i.descVoices.length&&(i.speechEnabled=!0)}})),this.getBrowserVoices(),this.descVoices.length&&(this.speechEnabled=!0);else{var s=new SpeechSynthesisUtterance("Hi!");s.volume=0,s.rate=10,i.synth.speak(s),s.onstart=function(e){t(document).off("click")},s.onend=function(t){i.getBrowserVoices(),i.descVoices.length&&(i.speechEnabled=!0)}}else this.speechEnabled=!1},AblePlayer.prototype.getBrowserVoices=function(){var t,e,i,s;if(s=this.captionLang?this.captionLang.substring(0,2).toLowerCase():this.lang.substring(0,2).toLowerCase(),this.descVoices=[],t=this.synth.getVoices(),e=this.getDescriptionLangs(),t.length>0){this.descVoices=[];for(var a=0;a<t.length;a++)(i=t[a].lang.substring(0,2).toLowerCase())===s&&-1!==e.indexOf(i)&&this.descVoices.push(t[a]);this.descVoices.length\|\|(this.descVoices=t)}return!1},AblePlayer.prototype.getDescriptionLangs=function(){var t=[];if(this.tracks)for(var e=0;e<this.tracks.length;e++)"descriptions"===this.tracks[e].kind&&t.push(this.tracks[e].language.substring(0,2).toLowerCase());return t},AblePlayer.prototype.setDescriptionVoice=function(){var t,e,i,s,a;if(e=void 0!==this.getCookie().voices?this.getPrefDescVoice():null,this.getBrowserVoices(),this.rebuildDescPrefsForm(),s=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,this.synth&&(t=this.synth.getVoices()).length>0){if(e){a=!1;for(var n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()&&t[n].name===e){i=t[n].name,a=!0;break}}if(!a)for(n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()){i=t[n].name;break}if(this.prefDescVoice=i,this.prefDescVoiceLang=s,this.$voiceSelectField){this.$voiceSelectField.find('option[value="'+this.prefDescVoice+'"]');this.$voiceSelectField.val(this.prefDescVoice)}this.updateCookie("voice")}},AblePlayer.prototype.swapDescription=function(){var e,i,s,a;if(e=this,this.loadingMedia=!1,this.$focusedElement=t(":focus"),this.elapsed>0?this.swapTime=this.elapsed:this.swapTime=0,this.duration>0&&(this.prevDuration=this.duration),this.okToPlay\|\|(this.okToPlay=this.playing),this.descOn?this.showAlert(this.tt.alertDescribedVersion):this.showAlert(this.tt.alertNonDescribedVersion),"html5"===this.player){if(this.swappingSrc=!0,this.paused=!0,this.usingDescribedVersion())for(i=0;i<this.$sources.length;i++)s=this.$sources[i].getAttribute("data-orig-src"),this.$sources[i].getAttribute("type"),s&&this.$sources[i].setAttribute("src",s);else for(i=0;i<this.$sources.length;i++)s=this.$sources[i].getAttribute("src"),a=this.$sources[i].getAttribute("data-desc-src"),this.$sources[i].getAttribute("type"),a&&(this.$sources[i].setAttribute("src",a),this.$sources[i].setAttribute("data-orig-src",s));if(this.recreatingPlayer)return;this.playerCreated&&(this.deletePlayer("swap-desc-html"),this.recreatePlayer().then((function(){e.loadingMedia\|\|(e.media.load(),e.loadingMedia=!0)})))}else if("youtube"===this.player){if(this.usingDescribedVersion()?this.activeYouTubeId=this.youTubeId:this.activeYouTubeId=this.youTubeDescId,void 0!==this.youTubePlayer&&(e.swappingSrc=!0,e.playing?e.youTubePlayer.loadVideoById(e.activeYouTubeId,e.swapTime):e.youTubePlayer.cueVideoById(e.activeYouTubeId,e.swapTime)),this.playerCreated&&this.deletePlayer("swap-desc-youtube"),this.recreatingPlayer)return;this.recreatePlayer().then((function(){}))}else if("vimeo"===this.player){if(this.usingDescribedVersion()?(this.activeVimeoId=this.vimeoId,this.showAlert(this.tt.alertNonDescribedVersion)):(this.activeVimeoId=this.vimeoDescId,this.showAlert(this.tt.alertDescribedVersion)),this.playerCreated&&this.deletePlayer("swap-desc-vimeo"),this.recreatingPlayer)return;this.recreatePlayer().then((function(){e.vimeoPlayer.loadVideo(e.activeVimeoId).then((function(){e.playing?e.vimeoPlayer.setCurrentTime(e.swapTime):e.vimeoPlayer.pause()}))}))}},AblePlayer.prototype.showDescription=function(t){if(this.hasClosedDesc&&!this.swappingSrc&&this.descOn&&"video"!==this.descMethod){var e,i,s,a;0;var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e.push(flattenComponentForDescription(t.children[i]));return e.join("")};for(e=this.selectedDescriptions?this.selectedDescriptions.cues:this.descriptions.length>=1?this.descriptions[0].cues:[],i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s?this.currentDescription!==s&&(this.$status.removeAttr("aria-live"),a=flattenComponentForDescription(e[s].components),"screenreader"===this.descReader?this.$descDiv.html(a):this.speechEnabled?(this.announceDescriptionText("description",a),this.prefDescVisible&&this.$descDiv.html(a).removeAttr("aria-live aria-atomic")):this.$descDiv.html(a),this.prefDescPause&&"text"===this.descMethod&&(this.pauseMedia(),this.pausedForDescription=!0),this.currentDescription=s):(this.$descDiv.html(""),this.currentDescription=-1,this.$status.attr("aria-live","polite"))}},AblePlayer.prototype.syncSpeechToPlaybackRate=function(t){var e;.5===t?e=.7:.75===t?e=.8:1===t?e=1:1.25===t?e=1.1:1.5===t?e=1.2:1.75===t?e=1.5:2===t?e=2:2.25===t?e=2.5:t>=2.5&&(e=3),this.prefDescRate=e},AblePlayer.prototype.announceDescriptionText=function(e,i){var s,a,n,r,o,l,h,p,c;s=this;if(this.speechEnabled\|\|this.initSpeech("desc"),"sample"===e?(a=t("#"+this.mediaId+"_prefDescVoice").val(),o=t("#"+this.mediaId+"_prefDescPitch").val(),l=t("#"+this.mediaId+"_prefDescRate").val(),h=t("#"+this.mediaId+"_prefDescVolume").val()):(a=this.prefDescVoice,o=this.prefDescPitch,l=this.prefDescRate,h=this.prefDescVolume),this.descVoices&&this.descVoices.length>0){if(a)for(n=0;n<this.descVoices.length;n++)if(this.descVoices[n].name==a){r=this.descVoices[n];break}void 0===r&&(r=this.descVoices[0]),(p=new SpeechSynthesisUtterance).voice=r,p.voiceURI="native",p.volume=h,p.rate=l,p.pitch=o,p.text=i,p.lang=this.lang,p.onstart=function(t){},p.onpause=function(t){},p.onend=function(t){this.speakingDescription=!1,c=t.elapsedTime,c>100?(t.elapsedTime/1e3).toFixed(2):t.elapsedTime.toFixed(2),this.debug,"description"===e&&s.prefDescPause&&s.pausedForDescription&&(s.playMedia(),this.pausedForDescription=!1)},p.onerror=function(t){},this.synth.paused&&this.synth.resume(),this.synth.speak(p),this.speakingDescription=!0}}}(jQuery),jQuery,AblePlayer.prototype.isIOS=function(t){var e;return e=navigator.userAgent.toLowerCase(),!!/ipad\|iphone\|ipod/.exec(e)&&(void 0===t\|\|-1!==e.indexOf("os "+t))},AblePlayer.prototype.browserSupportsVolume=function(){var t;return!this.isIOS()&&((t=new Audio).volume=.9,.9===t.volume)},AblePlayer.prototype.nativeFullscreenSupported=function(){return document.fullscreenEnabled\|\|document.webkitFullscreenEnabled\|\|document.mozFullscreenEnabled\|\|document.msFullscreenEnabled},function(t){AblePlayer.prototype.seekTo=function(t){var e,i=this;(this.seekFromTime=this.media.currentTime,this.seekToTime=t,this.seeking=!0,this.liveUpdatePending=!0,this.speakingDescription&&this.synth.cancel(),"html5"===this.player)?(this.startTime=t,(e=this.media.seekable).length>0&&this.startTime>=e.start(0)&&this.startTime<=e.end(0)&&(this.media.currentTime=this.startTime,this.seekStatus="complete",this.hasSignLanguage&&this.signVideo&&(this.signVideo.currentTime=this.startTime))):"youtube"===this.player?(this.youTubePlayer.seekTo(t,!0),t>0&&void 0!==this.$posterImg&&this.$posterImg.hide()):"vimeo"===this.player&&this.vimeoPlayer.setCurrentTime(t).then((function(){i.elapsed=t,i.refreshControls("timeline")}));this.refreshControls("timeline")},AblePlayer.prototype.getMediaTimes=function(e,i){var s,a,n,r;return r={},a=(s=new t.Deferred).promise(),n=this,void 0!==e&&void 0!==i?(r.duration=e,r.elapsed=i,s.resolve(r)):this.getDuration().then((function(t){r.duration=n.roundDown(t,6),n.getElapsed().then((function(t){r.elapsed=n.roundDown(t,6),s.resolve(r)}))})),a},AblePlayer.prototype.getDuration=function(){var e,i,s;(i=(e=new t.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getDuration().then((function(t){void 0===t\|\|isNaN(t)\|\|-1===t?e.resolve(0):e.resolve(t)})):e.resolve(0):("html5"===this.player?s=this.media.duration:"youtube"===this.player&&(s=this.youTubePlayerReady?this.duration>0?this.duration:this.youTubePlayer.getDuration():0),void 0===s\|\|isNaN(s)\|\|-1===s?e.resolve(0):e.resolve(s));return i},AblePlayer.prototype.getElapsed=function(){var e,i,s;(i=(e=new t.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getCurrentTime().then((function(t){void 0===t\|\|isNaN(t)\|\|-1===t?e.resolve(0):e.resolve(t)})):e.resolve(0):("html5"===this.player?s=this.media.currentTime:"youtube"===this.player&&(s=this.youTubePlayerReady?this.youTubePlayer.getCurrentTime():0),void 0===s\|\|isNaN(s)\|\|-1===s?e.resolve(0):e.resolve(s));return i},AblePlayer.prototype.getPlayerState=function(){var e,i,s;if(i=(e=new t.Deferred).promise(),s=this,"html5"===this.player)this.media.ended?e.resolve("ended"):this.media.paused?e.resolve("paused"):4!==this.media.readyState?e.resolve("buffering"):e.resolve("playing");else if("youtube"===this.player&&this.youTubePlayerReady){var a=this.youTubePlayer.getPlayerState();-1===a\|\|5===a?e.resolve("stopped"):0===a?e.resolve("ended"):1===a?e.resolve("playing"):2===a?e.resolve("paused"):3===a&&e.resolve("buffering")}else"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.getPaused().then((function(t){t?e.resolve("paused"):s.vimeoPlayer.getEnded().then((function(t){t?e.resolve("ended"):e.resolve("playing")}))}));return i},AblePlayer.prototype.isPlaybackRateSupported=function(){return"html5"===this.player?!!this.media.playbackRate:"youtube"===this.player?!!this.youTubePlayerReady&&this.youTubePlayer.getAvailablePlaybackRates().length>1:"vimeo"===this.player?this.vimeoSupportsPlaybackRateChange:void 0},AblePlayer.prototype.setPlaybackRate=function(t){t=Math.max(.5,t),this.hasClosedDesc&&"text"===this.descMethod&&this.syncSpeechToPlaybackRate(t),"html5"===this.player?this.media.playbackRate=t:"youtube"===this.player?this.youTubePlayer.setPlaybackRate(t):"vimeo"===this.player&&this.vimeoPlayer.setPlaybackRate(t),this.hasSignLanguage&&this.signVideo&&(this.signVideo.playbackRate=t),this.playbackRate=t,this.$speed.text(this.tt.speed+": "+t.toFixed(2).toString()+"x")},AblePlayer.prototype.getPlaybackRate=function(){return"html5"===this.player?this.media.playbackRate:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getPlaybackRate():void 0},AblePlayer.prototype.isPaused=function(){if("vimeo"===this.player)return!this.playing;this.getPlayerState().then((function(t){return"paused"===t\|\|"stopped"===t\|\|"ended"===t}))},AblePlayer.prototype.pauseMedia=function(){"html5"===this.player?(this.media.pause(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.pause(!0)):"youtube"===this.player?this.youTubePlayer.pauseVideo():"vimeo"===this.player&&this.vimeoPlayer.pause()},AblePlayer.prototype.playMedia=function(){"html5"===this.player?(this.media.play(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.play(!0)):"youtube"===this.player?(this.youTubePlayer.playVideo(),void 0!==this.$posterImg&&this.$posterImg.hide(),this.stoppingYouTube=!1):"vimeo"===this.player&&this.vimeoPlayer.play(),this.startedPlaying=!0,this.hideControls&&(this.hidingControls=!0,this.invokeHideControlsTimeout())},AblePlayer.prototype.fadeControls=function(t){"out"==t?(this.$mediaContainer.height()+this.$playerDiv.height(),this.$playerDiv.fadeTo(2e3,0,(function(){}))):"in"==t&&this.$playerDiv.fadeTo(100,1)},AblePlayer.prototype.invokeHideControlsTimeout=function(){var t=this;this.hideControlsTimeout=window.setTimeout((function(){void 0!==t.playing&&!0===t.playing&&t.hideControls&&(t.fadeControls("out"),t.controlsHidden=!0)}),5e3),this.hideControlsTimeoutStatus="active"},AblePlayer.prototype.refreshControls=function(e,i,s){var a,n,r,o,l,h,p,c,u,d,f,m,g,v,y;e="init",a=this,this.swappingSrc&&this.playing\|\|void 0!==this.duration&&(this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.chapterElapsed=this.getChapterElapsed()),!1===this.useFixedSeekInterval&&!1===this.seekIntervalCalculated&&this.duration>0&&this.setSeekInterval(),this.seekBar&&(this.useChapterTimes?(n=this.selectedChapters.cues.length-1,this.selectedChapters.cues[n]==this.currentChapter&&this.currentChapter.end!==this.duration?this.seekBar.setDuration(this.duration-this.currentChapter.start):this.seekBar.setDuration(this.chapterDuration)):void 0===this.duration\|\|isNaN(this.duration)\|\|-1===this.duration\|\|this.seekBar.setDuration(this.duration),this.seekBar.tracking\|\|(o=this.liveUpdatePending\|\|this.seekBar.seekHead.is(t(document.activeElement)),this.liveUpdatePending=!1,this.useChapterTimes?this.seekBar.setPosition(this.chapterElapsed,o):this.seekBar.setPosition(this.elapsed,o)),r=this.seekBar.tracking?this.seekBar.lastTrackPosition:this.useChapterTimes?this.chapterElapsed:this.elapsed),void 0!==this.$durationContainer&&(this.useChapterTimes?this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.chapterDuration)):this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.duration))),void 0!==this.$elapsedTimeContainer&&this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(r)),"legacy"===this.skin&&this.seekBar&&(p=0,u=(c=this.seekBar.wrapperDiv.parent().prev("div.able-left-controls")).next("div.able-right-controls"),c.children().each((function(){"button"==t(this).attr("role")&&(p+=t(this).outerWidth(!0))})),u.children().each((function(){"button"==t(this).attr("role")&&(p+=t(this).outerWidth(!0))})),d=this.fullscreen?t(window).width()-p:this.$ableWrapper.width()-p-5,Math.abs(d-this.seekBar.getWidth())>5&&this.seekBar.setWidth(d)),"html5"===this.player?this.media.buffered.length>0&&(m=this.media.buffered.end(0),this.useChapterTimes?(m>this.chapterDuration&&(m=this.chapterDuration),this.seekBar&&this.seekBar.setBuffered(m/this.chapterDuration)):this.seekBar&&(isNaN(m)\|\|this.seekBar.setBuffered(m/i))):"youtube"===this.player?this.seekBar&&this.youTubePlayerReady&&this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()):this.player,this.$descButton&&(this.descOn?(this.$descButton.removeClass("buttonOff").attr("aria-label",this.tt.turnOffDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOffDescriptions)):(this.$descButton.addClass("buttonOff").attr("aria-label",this.tt.turnOnDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOnDescriptions))),this.$ccButton&&(f=this.captions.length,this.captionsOn?(this.$ccButton.removeClass("buttonOff"),this.$ccButton.attr("aria-pressed","true"),1===f&&(this.$ccButton.attr("aria-label",this.tt.hideCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.hideCaptions))):(this.$ccButton.addClass("buttonOff"),this.$ccButton.attr("aria-pressed","false"),1===f&&(this.$ccButton.attr("aria-label",this.tt.showCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.showCaptions))),f>1&&(this.$ccButton.attr({"aria-label":this.tt.captions,"aria-haspopup":"true","aria-controls":this.mediaId+"-captions-menu"}),this.$ccButton.find("span.able-clipped").text(this.tt.captions))),this.$fullscreenButton&&(this.fullscreen?(this.$fullscreenButton.attr("aria-label",this.tt.exitFullscreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-expand").addClass("icon-fullscreen-collapse"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullscreen)):"svg"===this.iconType?(y=this.getSvgData("fullscreen-collapse"),this.$fullscreenButton.find("svg").attr("viewBox",y[0]),this.$fullscreenButton.find("path").attr("d",y[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullscreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenCollapseButtonImg)):(this.$fullscreenButton.attr("aria-label",this.tt.enterFullscreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-collapse").addClass("icon-fullscreen-expand"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullscreen)):"svg"===this.iconType?(y=this.getSvgData("fullscreen-expand"),this.$fullscreenButton.find("svg").attr("viewBox",y[0]),this.$fullscreenButton.find("path").attr("d",y[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullscreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenExpandButtonImg))),void 0!==this.$bigPlayButton&&void 0!==this.seekBar&&(this.paused&&!this.seekBar.tracking?(this.hideBigPlayButton\|\|(this.$bigPlayButton.show(),this.$bigPlayButton.attr("aria-hidden","false")),this.fullscreen?(this.$bigPlayButton.width(t(window).width()),this.$bigPlayButton.height(t(window).height())):(this.$bigPlayButton.width(this.$mediaContainer.width()),this.$bigPlayButton.height(this.$mediaContainer.height()))):(this.$bigPlayButton.hide(),this.$bigPlayButton.attr("aria-hidden","true"))),this.transcriptType&&(1===this.prefAutoScrollTranscript?(this.autoScrollTranscript=!0,this.$autoScrollTranscriptCheckbox.prop("checked",!0)):(this.autoScrollTranscript=!1,this.$autoScrollTranscriptCheckbox.prop("checked",!1)),this.autoScrollTranscript&&this.currentHighlight&&(g=Math.floor(this.$transcriptDiv.scrollTop()+t(this.currentHighlight).position().top-this.$transcriptDiv.height()/2+t(this.currentHighlight).height()/2))!==Math.floor(this.$transcriptDiv.scrollTop())&&(this.scrollingTranscript=!0,this.movingHighlight&&(this.$transcriptDiv.scrollTop(g),this.movingHighlight=!1))),this.$chaptersButton&&this.$chaptersButton.attr({"aria-label":this.tt.chapters,"aria-haspopup":"true","aria-controls":this.mediaId+"-chapters-menu"}),l={stopped:this.tt.statusStopped,paused:this.tt.statusPaused,playing:this.tt.statusPlaying,buffering:this.tt.statusBuffering,ended:this.tt.statusEnd},this.stoppingYouTube?(this.$status.text()!==this.tt.statusStopped&&this.$status.text(this.tt.statusStopped),this.$playpauseButton.find("span").first().hasClass("icon-pause")&&("font"===this.iconType?(this.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):"svg"===this.iconType?(y=this.getSvgData("play"),this.$playpauseButton.find("svg").attr("viewBox",y[0]),this.$playpauseButton.find("path").attr("d",y[1]),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):this.$playpauseButton.find("img").attr("src",this.playButtonImg))):void 0!==this.$status&&void 0!==this.seekBar&&this.getPlayerState().then((function(t){a.$status.text()===l[t]\|\|a.seekBar.tracking?(a.statusDebounceStart=null,a.debouncingStatus=!1,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.swappingSrc?a.debouncingStatus\|\|(a.statusMessageThreshold=2e3):a.debouncingStatus\|\|(a.statusMessageThreshold=250),h=(new Date).getTime(),a.statusDebounceStart?h-a.statusDebounceStart>a.statusMessageThreshold&&(a.$status.text(l[t]),a.statusDebounceStart=null,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.statusDebounceStart=h,a.debouncingStatus=!0,a.statusTimeout=setTimeout((function(){a.debouncingStatus=!1,a.refreshControls(e)}),a.statusMessageThreshold))),a.seekBar.tracking\|\|a.stoppingYouTube\|\|("paused"===t\|\|"stopped"===t\|\|"ended"===t?(a.$playpauseButton.attr("aria-label",a.tt.play),"font"===a.iconType?(a.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),a.$playpauseButton.find("span.able-clipped").text(a.tt.play)):"svg"===a.iconType?(y=a.getSvgData("play"),a.$playpauseButton.find("svg").attr("viewBox",y[0]),a.$playpauseButton.find("path").attr("d",y[1]),a.$playpauseButton.find("span.able-clipped").text(a.tt.play)):a.$playpauseButton.find("img").attr("src",a.playButtonImg)):(a.$playpauseButton.attr("aria-label",a.tt.pause),"font"===a.iconType?(a.$playpauseButton.find("span").first().removeClass("icon-play").addClass("icon-pause"),a.$playpauseButton.find("span.able-clipped").text(a.tt.pause)):"svg"===a.iconType?(y=a.getSvgData("pause"),a.$playpauseButton.find("svg").attr("viewBox",y[0]),a.$playpauseButton.find("path").attr("d",y[1]),a.$playpauseButton.find("span.able-clipped").text(a.tt.pause)):a.$playpauseButton.find("img").attr("src",a.pauseButtonImg)))})),this.fullscreen\|\|(v=this.$statusBarDiv.height(),this.$statusBarDiv.find("span.able-speed").height()>v+5?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):(this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1),this.$statusBarDiv.width()<300?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1))))},AblePlayer.prototype.getHiddenWidth=function(t){var e=t.clone().appendTo("body"),i=e.outerWidth();return e.remove(),i},AblePlayer.prototype.handlePlay=function(t){this.paused?(this.okToPlay=!0,this.playMedia(),this.synth.paused&&this.synth.resume()):(this.okToPlay=!1,this.pauseMedia(),this.speakingDescription&&this.synth.pause()),null===this.speechEnabled&&this.initSpeech("play")},AblePlayer.prototype.handleRestart=function(){this.speakingDescription&&this.synth.cancel(),this.seekTo(0)},AblePlayer.prototype.handlePrevTrack=function(){0===this.playlistIndex?this.playlistIndex=this.$playlist.length-1:this.playlistIndex--,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleNextTrack=function(){this.playlistIndex===this.$playlist.length-1?this.playlistIndex=0:this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleRewind=function(){var t;t=this.elapsed-this.seekInterval,this.useChapterTimes?t<this.currentChapter.start&&(t=this.currentChapter.start):t<0&&(t=0),this.seekTo(t)},AblePlayer.prototype.handleFastForward=function(){var t,e;e=this.chapters.length-1,t=this.elapsed+this.seekInterval,this.useChapterTimes?this.chapters[e]==this.currentChapter?(t>this.duration\|\|t>this.currentChapter.end\|\|this.duration%t<this.seekInterval)&&(t=Math.min(this.duration,this.currentChapter.end)):t>this.currentChapter.end&&(t=this.currentChapter.end):t>this.duration&&(t=this.duration),this.seekTo(t)},AblePlayer.prototype.handleRateIncrease=function(){this.changeRate(1)},AblePlayer.prototype.handleRateDecrease=function(){this.changeRate(-1)},AblePlayer.prototype.changeRate=function(t){var e,i,s,a;"html5"===this.player?this.setPlaybackRate(this.getPlaybackRate()+.25t):"youtube"===this.player?this.youTubePlayerReady&&(e=this.youTubePlayer.getAvailablePlaybackRates(),i=this.getPlaybackRate(),-1===(s=e.indexOf(i))\|\|(s+=t)<e.length&&s>=0&&this.setPlaybackRate(e[s])):"vimeo"===this.player&&(1===t?a=this.vimeoPlaybackRate+.5<=2?this.vimeoPlaybackRate+.5:2:-1===t&&(a=this.vimeoPlaybackRate-.5>=.5?this.vimeoPlaybackRate-.5:.5),this.setPlaybackRate(a))},AblePlayer.prototype.handleCaptionToggle=function(){var t,e=this;if(this.hidingPopup)return this.hidingPopup=!1,!1;if(1===(t=this.captions.length?this.captions:[]).length){if(!0===this.captionsOn)this.captionsOn=!1,this.prefCaptions=0,this.$ccButton.attr("aria-pressed","false"),this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.unloadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.disableTextTrack():this.$captionsWrapper.hide();else{this.captionsOn=!0,this.prefCaptions=1,this.$ccButton.attr("aria-pressed","true"),this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.loadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then((function(t){})).catch((function(t){t.name})):this.$captionsWrapper.show();for(var i=0;i<t.length;i++)!0===t[i].def&&(this.selectedCaptions=t[i]);this.selectedCaptions=this.captions[0],this.descriptions.length>=0&&(this.selectedDescriptions=this.descriptions[0])}this.refreshControls("captions")}else this.captionsPopup&&this.captionsPopup.is(":visible")?(this.captionsPopup.hide(),this.hidingPopup=!1,this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)):(this.closePopups(),this.captionsPopup&&(this.captionsPopup.show(),this.$ccButton.attr("aria-expanded","true"),setTimeout((function(){e.captionsPopup.css("top",e.$ccButton.position().top-e.captionsPopup.outerHeight()),e.captionsPopup.css("left",e.$ccButton.position().left),e.captionsPopup.find("li").removeClass("able-focus"),e.captionsPopup.find("li").first().focus().addClass("able-focus")}),50)))},AblePlayer.prototype.waitThenFocus=function(t,e){setTimeout((function(){t.focus()}),null==e?50:e)},AblePlayer.prototype.handleChapters=function(){if(this.hidingPopup)return this.hidingPopup=!1,!1;this.chaptersPopup.is(":visible")?(this.chaptersPopup.hide(),this.hidingPopup=!1,this.$chaptersButton.attr("aria-expanded","false").focus()):(this.closePopups(),this.chaptersPopup.show(),this.$chaptersButton.attr("aria-expanded","true"),this.chaptersPopup.css("top",this.$chaptersButton.position().top-this.chaptersPopup.outerHeight()),this.chaptersPopup.css("left",this.$chaptersButton.position().left),this.chaptersPopup.find("li").removeClass("able-focus"),this.chaptersPopup.find('li[aria-checked="true"]').length?this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass("able-focus"):this.chaptersPopup.find("li").first().addClass("able-focus").attr("aria-checked","true").focus())},AblePlayer.prototype.handleDescriptionToggle=function(){this.descOn=!this.descOn,this.prefDesc=+this.descOn,this.updateCookie("prefDesc"),void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")\|\|this.$descDiv.hide()),this.initDescription(),this.refreshControls("descriptions")},AblePlayer.prototype.handlePrefsClick=function(t){var e,i,s,a;if(e=this,null===this.speechEnabled&&this.initSpeech("prefs"),this.hidingPopup)return this.hidingPopup=!1,!1;this.prefsPopup.is(":visible")?(this.prefsPopup.hide(),this.$prefsButton.attr("aria-expanded","false"),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.showingPrefsDialog\|\|this.$prefsButton.focus(),setTimeout((function(){e.hidingPopup=!1}),100)):(this.closePopups(),this.prefsPopup.show(),this.$prefsButton.attr("aria-expanded","true"),this.$prefsButton.focus(),setTimeout((function(){i=e.$prefsButton.position(),s=e.$ableDiv.width()-5,a=s-e.prefsPopup.width(),e.prefsPopup.css("top",i.top-e.prefsPopup.outerHeight()),e.prefsPopup.css("left",a),e.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","0"),e.prefsPopup.find("li").first().focus().addClass("able-focus")}),50))},AblePlayer.prototype.handleHelpClick=function(){this.setFullscreen(!1),this.helpDialog.show()},AblePlayer.prototype.handleTranscriptToggle=function(){var t=this;this.$transcriptDiv.is(":visible")?(this.$transcriptArea.hide(),this.$transcriptButton.addClass("buttonOff").attr("aria-label",this.tt.showTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.showTranscript),this.prefTranscript=0,this.$transcriptButton.focus().addClass("able-focus"),setTimeout((function(){t.closingTranscript=!1}),100)):(this.positionDraggableWindow("transcript"),this.$transcriptArea.show(),this.$transcriptPopup.hide(),this.$transcriptButton.removeClass("buttonOff").attr("aria-label",this.tt.hideTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.hideTranscript),this.prefTranscript=1,this.focusNotClick=!0,this.$transcriptArea.find("button").first().focus(),setTimeout((function(){t.focusNotClick=!1}),100)),this.updateCookie("prefTranscript")},AblePlayer.prototype.handleSignToggle=function(){var t=this;this.$signWindow.is(":visible")?(this.$signWindow.hide(),this.$signButton.addClass("buttonOff").attr("aria-label",this.tt.showSign),this.$signButton.find("span.able-clipped").text(this.tt.showSign),this.prefSign=0,this.$signButton.focus().addClass("able-focus"),setTimeout((function(){t.closingSign=!1}),100)):(this.positionDraggableWindow("sign"),this.$signWindow.show(),this.$signPopup.hide(),this.$signButton.removeClass("buttonOff").attr("aria-label",this.tt.hideSign),this.$signButton.find("span.able-clipped").text(this.tt.hideSign),this.prefSign=1,this.focusNotClick=!0,this.$signWindow.find("button").first().focus(),setTimeout((function(){t.focusNotClick=!1}),100)),this.updateCookie("prefSign")},AblePlayer.prototype.isFullscreen=function(){return this.nativeFullscreenSupported()?!!(document.fullscreenElement\|\|document.webkitFullscreenElement\|\|document.webkitCurrentFullscreenElement\|\|document.mozFullscreenElement\|\|document.msFullscreenElement):!!this.modalFullscreenActive},AblePlayer.prototype.setFullscreen=function(e){if(this.fullscreen!=e){var i=this,s=this.$ableWrapper,a=s[0];if(this.nativeFullscreenSupported())e?(a.requestFullscreen?a.requestFullscreen():a.webkitRequestFullscreen?a.webkitRequestFullscreen():a.mozRequestFullscreen?a.mozRequestFullscreen():a.msRequestFullscreen&&a.msRequestFullscreen(),this.fullscreen=!0):(this.restoringAfterFullscreen=!0,document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullscreen?document.webkitCancelFullscreen():document.mozCancelFullscreen?document.mozCancelFullscreen():document.msExitFullscreen&&document.msExitFullscreen(),this.fullscreen=!1);else{if(!this.fullscreenDialog){var n=t("<div>"),r=t("<p>",{class:"able-screenreader-alert"}).text(this.tt.fullscreen);n.append(r),this.fullscreenDialog=new AccessibleDialog(n,this.$fullscreenButton,"dialog",!0,"Fullscreen video player",r,this.tt.exitFullscreen,"100%",!0,(function(){i.handleFullscreenToggle()})),t("body").append(n)}var o=this.paused;if(e){this.modalFullscreenActive=!0,this.fullscreenDialog.show(),this.$modalFullscreenPlaceholder=t('<div class="placeholder">'),this.$modalFullscreenPlaceholder.insertAfter(s),s.appendTo(this.fullscreenDialog.modal),s===this.$ableColumnLeft&&s.width("100%");t(window).height(),this.$playerDiv.height();void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")\|\|this.$descDiv.height())}else this.modalFullscreenActive=!1,s===this.$ableColumnLeft&&s.width("50%"),s.insertAfter(this.$modalFullscreenPlaceholder),this.$modalFullscreenPlaceholder.remove(),this.fullscreenDialog.hide();!o&&this.paused&&this.playMedia()}t(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange",(function(t){i.fullscreen?i.clickedFullscreenButton\|\|(i.fullscreen=!1,i.restoringAfterFullscreen=!0):i.restoringAfterFullscreen=!0,i.resizePlayer(),i.refreshControls("fullscreen"),setTimeout((function(){i.clickedFullscreenButton=!1,i.restoringAfterFullscreen=!1}),1e3)}))}},AblePlayer.prototype.handleFullscreenToggle=function(){var t=this.paused;this.setFullscreen(!this.fullscreen),t?this.pauseMedia():t\|\|this.playMedia(),this.fullscreen?(this.hideControls=!0,this.playing&&(this.fadeControls("out"),this.controlsHidden=!0)):(this.hideControls=this.hideControlsOriginal,this.hideControls\|\|(this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear")))},AblePlayer.prototype.handleTranscriptLockToggle=function(t){this.autoScrollTranscript=t,this.prefAutoScrollTranscript=+t,this.updateCookie("prefAutoScrollTranscript"),this.refreshControls("transcript")},AblePlayer.prototype.showTooltip=function(t){t.is(":animated")?t.stop(!0,!0).show():t.stop().show()},AblePlayer.prototype.showAlert=function(t,e){var i,s,a,n;"transcript"===e?(i=this.$transcriptAlert,s=this.$transcriptArea):"sign"===e?(i=this.$signAlert,s=this.$signWindow):i="screenreader"===e?this.$srAlertBox:this.$alertBox,i.text(t).show(),"transcript"==e\|\|"sign"===e?(a=s.width()>i.width()?s.width()/2-i.width()/2:10,"sign"===e?n=s.height()/32:"transcript"===e&&(n=this.$transcriptToolbar.height()+30),i.css({top:n+"px",left:a+"px"})):"screenreader"!==e&&i.css({left:this.$playerDiv.width()/2-i.width()/2}),"screenreader"!==e&&setTimeout((function(){i.fadeOut(300)}),3e3)},AblePlayer.prototype.showedAlert=function(t){return"transcript"===t?!!this.showedTranscriptAlert:"sign"===t&&!!this.showedSignAlert},AblePlayer.prototype.resizePlayer=function(e,i){var s,a,n,r,o;"audio"!==this.mediaType&&(void 0!==e&&void 0!==i?(this.aspectRatio=i/e,this.playerWidth?(a=this.playerWidth,this.playerHeight?n=this.playerHeight:(n=Math.round(athis.aspectRatio),this.playerHeight=n)):(a="html5"===this.player?t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio))):this.fullscreen?(this.$ableWrapper.addClass("fullscreen"),a=t(window).width(),n=t(window).height()-this.$playerDiv.outerHeight()-5,this.positionCaptions("overlay")):(this.$ableWrapper.removeClass("fullscreen"),a="html5"===this.player?this.playerWidth?this.playerWidth:t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio),this.positionCaptions(this.prefCaptionsPosition)),this.debug,"youtube"===this.player\|\|"vimeo"===this.player?(r=this.$ableWrapper.find("iframe"),"youtube"===this.player&&this.youTubePlayer?this.youTubePlayer.setSize(a,n):r.attr({width:a,height:n}),this.playerWidth&&this.playerHeight&&(this.fullscreen?r.css({"max-width":"","max-height":""}):r.css({"max-width":this.playerWidth+"px","max-height":this.playerHeight+"px"}))):"html5"===this.player&&(this.fullscreen?(this.$media.attr({width:a,height:n}),this.$ableWrapper.css({width:a,height:n})):(this.$media.removeAttr("width height"),this.$ableWrapper.css({width:a+"px",height:"auto"}))),void 0!==this.$captionsDiv&&(s=parseInt(this.prefCaptionsSize,10),this.fullscreen?s=s/100+"vw":s+="%",this.$captionsDiv.css({"font-size":s})),"video"===this.mediaType&&(o=2Math.round(this.$mediaContainer.height()/3),this.$alertBox.css({top:o+"px"})),this.refreshControls())},AblePlayer.prototype.retrieveOffscreenWindow=function(t,e,i){var s,a,n,r,o,l,h,p;"transcript"==t?s=this.$transcriptArea:"sign"==t&&(s=this.$signWindow),l=s.width(),p=s.height(),n=(a=s.position()).top,o=(r=a.left)+l,h=n+p,n<0&&(n=10,s.css("top",n)),r<0&&(r=10,s.css("left",r)),o>e&&(r=e-20-l,s.css("left",r)),h>i&&(n=i-10-p,s.css("top",n))},AblePlayer.prototype.getHighestZIndex=function(){var e,i;return e=0,t("body ").not(".able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area").each((function(){i=t(this).css("z-index"),Number.isInteger(+i)&&parseInt(i)>e&&(e=parseInt(i))})),e},AblePlayer.prototype.updateZIndex=function(t){var e,i,s,a,n,r;if(e=8e3,i=7e3,this.getHighestZIndex(),void 0===this.$transcriptArea\|\|void 0===this.$signWindow)return void 0!==this.$transcriptArea?(s=parseInt(this.$transcriptArea.css("z-index")))>i&&this.$transcriptArea.css("z-index",i):void 0!==this.$signWindow&&(a=parseInt(this.$signWindow.css("z-index")))>e&&this.$signWindow.css("z-index",e),!1;if((s=parseInt(this.$transcriptArea.css("z-index")))===(a=parseInt(this.$signWindow.css("z-index"))))n=e,r=i;else if(s>a){if("transcript"===t)return!1;n=s,r=a}else{if("sign"===t)return!1;n=a,r=s}"transcript"===t?(this.$transcriptArea.css("z-index",n),this.$signWindow.css("z-index",r)):"sign"===t&&(this.$signWindow.css("z-index",n),this.$transcriptArea.css("z-index",r))},AblePlayer.prototype.syncTrackLanguages=function(t,e){var i,s,a,n,r;for(i=0;i<this.captions.length;i++)this.captions[i].language===e&&(s=this.captions[i]);for(i=0;i<this.chapters.length;i++)this.chapters[i].language===e&&(n=this.chapters[i]);for(i=0;i<this.descriptions.length;i++)this.descriptions[i].language===e&&(a=this.descriptions[i]);for(i=0;i<this.meta.length;i++)this.meta[i].language===e&&(r=this.meta[i]);if(this.transcriptLang=e,"init"===t\|\|"captions"===t?(this.captionLang=e,this.selectedCaptions=s,this.selectedChapters=n,this.selectedDescriptions=a,this.selectedMeta=r,this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a,this.updateChaptersList()):"transcript"===t&&(this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a),this.selectedDescriptions&&(this.setDescriptionVoice(),this.$sampleDescDiv&&this.sampleText))for(i=0;i<this.sampleText.length;i++)this.sampleText[i].lang===this.selectedDescriptions.language&&(this.currentSampleText=this.sampleText[i].text,this.$sampleDescDiv.html(this.currentSampleText));this.updateTranscript()}}(jQuery),function(t){AblePlayer.prototype.updateCaption=function(t){this.usingYouTubeCaptions\|\|this.usingVimeoCaptions\|\|void 0===this.$captionsWrapper\|\|(this.captionsOn?(this.$captionsWrapper.show(),void 0!==t&&this.showCaptions(t)):this.$captionsWrapper&&(this.$captionsWrapper.hide(),this.prefCaptions=0))},AblePlayer.prototype.updateCaptionsMenu=function(t){this.captionsPopup.find("li").attr("aria-checked","false"),void 0===t?this.captionsPopup.find("li").last().attr("aria-checked","true"):this.captionsPopup.find("li[lang="+t+"]").attr("aria-checked","true")},AblePlayer.prototype.getCaptionClickFunction=function(t){var e=this;return function(){e.selectedCaptions=t,e.captionLang=t.language,e.currentCaption=-1,e.usingYouTubeCaptions?e.captionsOn?e.youTubePlayer.getOptions("captions")&&e.startedPlaying?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):e.captionLangPending=e.captionLang:e.youTubePlayer.getOptions("captions")?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):(e.youTubePlayer.loadModule("captions"),e.captionLangPending=e.captionLang):e.usingVimeoCaptions?e.vimeoPlayer.enableTextTrack(e.captionLang).then((function(t){})).catch((function(t){t.name})):(e.syncTrackLanguages("captions",e.captionLang),e.swappingSrc\|\|(e.updateCaption(e.elapsed),e.showDescription(e.elapsed))),e.captionsOn=!0,e.hidingPopup=!0,e.captionsPopup.hide(),e.$ccButton.attr("aria-expanded","false"),"audio"===e.mediaType&&e.$captionsContainer.removeClass("captions-off"),setTimeout((function(){e.hidingPopup=!1}),100),e.updateCaptionsMenu(e.captionLang),e.waitThenFocus(e.$ccButton),e.prefCaptions=1,e.updateCookie("prefCaptions"),e.refreshControls("captions")}},AblePlayer.prototype.getCaptionOffFunction=function(){var t=this;return function(){"youtube"==t.player?t.youTubePlayer.unloadModule("captions"):t.usingVimeoCaptions&&t.vimeoPlayer.disableTextTrack(),t.captionsOn=!1,t.currentCaption=-1,"audio"===t.mediaType&&t.$captionsContainer.addClass("captions-off"),t.hidingPopup=!0,t.captionsPopup.hide(),t.$ccButton.attr("aria-expanded","false"),setTimeout((function(){t.hidingPopup=!1}),100),t.updateCaptionsMenu(),t.waitThenFocus(t.$ccButton),t.prefCaptions=0,t.updateCookie("prefCaptions"),this.swappingSrc\|\|(t.refreshControls("captions"),t.updateCaption())}},AblePlayer.prototype.showCaptions=function(t){var e,i,s,a;for(a=this.selectedCaptions.cues.length?this.selectedCaptions.cues:this.captions.length>=1?this.captions[0].cues:[],e=0;e<a.length;e++)if(a[e].start<=t&&a[e].end>t){i=e;break}void 0!==i?this.currentCaption!==i&&(s=this.flattenCueForCaption(a[i]).replace(/\n/g,"<br>"),this.$captionsDiv.html(s),this.currentCaption=i,0===s.length?this.$captionsDiv.css("display","none"):this.$captionsDiv.css("display","inline-block")):(this.$captionsDiv.html("").css("display","none"),this.currentCaption=-1)},AblePlayer.prototype.flattenCueForCaption=function(t){var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("("+t.value+")"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else if("i"===t.type){for(i.push("<em>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</em>")}else if("b"===t.type){for(i.push("<strong>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</strong>")}else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")};if(void 0!==t.components)for(var i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")},AblePlayer.prototype.getCaptionsOptions=function(t){var e=[];switch(t){case"prefCaptionsFont":e[0]=["serif",this.tt.serif],e[1]=["sans-serif",this.tt.sans],e[2]=["cursive",this.tt.cursive],e[3]=["fantasy",this.tt.fantasy],e[4]=["monospace",this.tt.monospace];break;case"prefCaptionsColor":case"prefCaptionsBGColor":e[0]=["white",this.tt.white],e[1]=["yellow",this.tt.yellow],e[2]=["green",this.tt.green],e[3]=["cyan",this.tt.cyan],e[4]=["blue",this.tt.blue],e[5]=["magenta",this.tt.magenta],e[6]=["red",this.tt.red],e[7]=["black",this.tt.black];break;case"prefCaptionsSize":e[0]="75%",e[1]="100%",e[2]="125%",e[3]="150%",e[4]="200%";break;case"prefCaptionsOpacity":e[0]="0%",e[1]="25%",e[2]="50%",e[3]="75%",e[4]="100%";break;case"prefCaptionsStyle":e[0]=this.tt.captionsStylePopOn,e[1]=this.tt.captionsStyleRollUp;break;case"prefCaptionsPosition":e[0]="overlay",e[1]="below"}return e},AblePlayer.prototype.translatePrefs=function(t,e,i){if("youtube"==i&&"size"===t)switch(e){case"75%":return-1;case"100%":return 0;case"125%":return 1;case"150%":return 2;case"200%":return 3}return!1},AblePlayer.prototype.stylizeCaptions=function(e,i){var s,a,n;void 0!==e&&("prefCaptionsPosition"==i?this.positionCaptions():void 0!==i?("prefCaptionsFont"===i?s="font-family":"prefCaptionsSize"===i?s="font-size":"prefCaptionsColor"===i?s="color":"prefCaptionsBGColor"===i?s="background-color":"prefCaptionsOpacity"===i&&(s="opacity"),a="prefCaptionsOpacity"===i?parseFloat(t("#"+this.mediaId+"_"+i).val())/100:t("#"+this.mediaId+"_"+i).val(),e.css(s,a)):(n=parseFloat(this.prefCaptionsOpacity)/100,e.css({"font-family":this.prefCaptionsFont,color:this.prefCaptionsColor,"background-color":this.prefCaptionsBGColor,opacity:n}),e===this.$captionsDiv&&void 0!==this.$captionsDiv&&this.$captionsDiv.css({"font-size":this.prefCaptionsSize}),"below"===this.prefCaptionsPosition?void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"}):"overlay"===this.prefCaptionsPosition&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":"transparent",opacity:""}),this.positionCaptions()))},AblePlayer.prototype.positionCaptions=function(t){void 0===t&&(t=this.prefCaptionsPosition),void 0!==this.$captionsWrapper&&("below"==t?(this.$captionsWrapper.removeClass("able-captions-overlay").addClass("able-captions-below"),this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"})):(this.$captionsWrapper.removeClass("able-captions-below").addClass("able-captions-overlay"),this.$captionsWrapper.css({"background-color":"transparent",opacity:""})))}}(jQuery),function(t){AblePlayer.prototype.populateChaptersDiv=function(){var e,i,s;t("#"+this.chaptersDivLocation)&&(this.$chaptersDiv=t("#"+this.chaptersDivLocation),this.$chaptersDiv.addClass("able-chapters-div"),this.$chaptersDiv.empty(),this.chaptersTitle&&(e="h"+this.getNextHeadingLevel(this.$chaptersDiv).toString(),i=this.mediaId+"-chapters-heading",s=t("<"+e+">",{class:"able-chapters-heading",id:i}).text(this.chaptersTitle),this.$chaptersDiv.append(s)),this.$chaptersNav=t("<nav>"),this.chaptersTitle?this.$chaptersNav.attr("aria-labelledby",i):this.$chaptersNav.attr("aria-label",this.tt.chapters),this.$chaptersDiv.append(this.$chaptersNav),this.updateChaptersList())},AblePlayer.prototype.updateChaptersList=function(){var e,i,s,a,n,r,o,l,h,p;if(e=this,!this.$chaptersNav)return!1;if(void 0===this.useChapterTimes&&("chapter"===this.seekbarScope&&this.selectedChapters.cues.length?this.useChapterTimes=!0:this.useChapterTimes=!1),(i=this.useChapterTimes?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[]).length>0){for(p=t("<ul>"),s=0;s<i.length;s++)a=s,n=t("<li></li>"),l=function(i){return function(){e.seekTrigger="chapter",h=t(this).closest("li"),p=t(this).closest("ul").find("li"),p.index(h),p.removeClass("able-current-chapter").children("button").removeAttr("aria-current"),h.addClass("able-current-chapter").children("button").attr("aria-current","true"),e.updateChapter(i),e.seekTo(i)}},(r=t("<button>",{type:"button",val:a}).text(this.flattenCueForCaption(i[a]))).on("click",l(i[a].start)),r.on("focus",(function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).closest("li").addClass("able-focus")})),n.on("hover",(function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).addClass("able-focus")})),n.on("mouseleave",(function(){t(this).removeClass("able-focus")})),r.on("blur",(function(){t(this).closest("li").removeClass("able-focus")})),n.append(r),p.append(n),this.defaultChapter===i[a].id&&(r.attr("aria-current","true").parent("li").addClass("able-current-chapter"),this.currentChapter=i[a],o=!0);o\|\|(this.currentChapter=i[0],p.find("button").first().attr("aria-current","true").parent("li").addClass("able-current-chapter")),this.$chaptersNav.html(p)}return!1},AblePlayer.prototype.seekToChapter=function(t){for(var e=0;e<this.selectedChapters.cues.length;){if(this.selectedChapters.cues[e].id==t){this.seekTo(this.selectedChapters.cues[e].start),this.updateChapter(this.selectedChapters.cues[e].start);break}e++}},AblePlayer.prototype.updateChapter=function(t){if(void 0!==this.selectedChapters){var e,i,s;for(e=this.selectedChapters.cues,i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s&&this.currentChapter!==e[s]&&(this.currentChapter=e[s],this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.seekIntervalCalculated=!1),void 0!==this.$chaptersDiv&&(this.$chaptersDiv.find("ul").find("li").removeClass("able-current-chapter").children("button").removeAttr("aria-current"),this.$chaptersDiv.find("ul").find("li").eq(s).addClass("able-current-chapter").children("button").attr("aria-current","true")))}},AblePlayer.prototype.getChapterDuration=function(){var t,e;return void 0===this.currentChapter\|\|void 0===this.duration?0:(t=this.selectedChapters.cues.length-1,this.selectedChapters.cues[t]==this.currentChapter&&this.currentChapter.end!==this.duration?(e=this.duration,this.currentChapter.end=this.duration):e=this.currentChapter.end,e-this.currentChapter.start)},AblePlayer.prototype.getChapterElapsed=function(){return void 0===this.currentChapter?0:this.elapsed>this.currentChapter.start?this.elapsed-this.currentChapter.start:0},AblePlayer.prototype.convertChapterTimeToVideoTime=function(t){if(void 0!==this.currentChapter){var e=this.currentChapter.start+t;return e>this.currentChapter.end?this.currentChapter.end:e}return t},AblePlayer.prototype.getChapterClickFunction=function(t){var e=this;return function(){e.seekTrigger="chapter",e.seekTo(t),e.hidingPopup=!0,e.chaptersPopup.hide(),setTimeout((function(){e.hidingPopup=!1}),100),e.$chaptersButton.focus()}}}(jQuery),function(t){AblePlayer.prototype.updateMeta=function(t){this.hasMeta&&("text"===this.metaType?(this.$metaDiv.show(),this.showMeta(t\|\|this.elapsed)):this.showMeta(t\|\|this.elapsed))},AblePlayer.prototype.showMeta=function(e){var i,s,a,n,r,o,l,h,p;for(i=[],n=this.meta.length>=1?this.meta:[],s=0;s<n.length;s++)if(n[s].start<=e&&n[s].end>e){a=s;break}if(void 0!==a){if(this.currentMeta!==a)if("text"===this.metaType)this.$metaDiv.html(this.flattenCueForMeta(n[a]).replace(/\n/g,"<br>"));else if("selector"===this.metaType){for(r=this.flattenCueForMeta(n[a]).split("\n"),o=0;o<r.length;o++)"pause"===(l=t.trim(r[o])).toLowerCase().trim()?(this.hideBigPlayButton=!0,this.pauseMedia()):"focus:"==l.toLowerCase().substring(0,6)?(p=l.substring(6).trim(),t(p).length&&t(p).focus()):t(l).length&&(this.currentMeta=a,void 0===(h=parseInt(t(l).attr("data-duration")))\|\|isNaN(h)?t(l).show():t(l).show().delay(h).fadeOut(),this.visibleSelectors.push(l),i.push(l));if(this.visibleSelectors&&this.visibleSelectors.length&&this.visibleSelectors.length!==i.length)for(o=this.visibleSelectors.length-1;o>=0;o--)-1==t.inArray(this.visibleSelectors[o],i)&&(t(this.visibleSelectors[o]).hide(),this.visibleSelectors.splice(o,1))}}else{if(void 0!==this.$metaDiv&&this.$metaDiv.html(""),this.visibleSelectors&&this.visibleSelectors.length){for(o=0;o<this.visibleSelectors.length;o++)t(this.visibleSelectors[o]).hide();this.visibleSelectors=[]}this.currentMeta=-1}},AblePlayer.prototype.flattenCueForMeta=function(t){for(var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("["+t.value+"]"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")},i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")}}(jQuery),function(t){AblePlayer.prototype.setupTranscript=function(){var e=new t.Deferred,i=e.promise();return this.usingYouTubeCaptions\|\|this.usingVimeoCaptions?(this.transcriptType=null,e.resolve()):(this.transcriptType\|\|this.captions.length&&(this.transcriptType="popup"),this.transcriptType?"popup"===this.transcriptType\|\|"external"===this.transcriptType?(this.injectTranscriptArea(),e.resolve()):"manual"===this.transcriptType&&(this.setupManualTranscript(),e.resolve()):e.resolve()),i},AblePlayer.prototype.injectTranscriptArea=function(){var e,i,s,a,n;if(this.$transcriptArea=t("<div>",{class:"able-transcript-area",role:"dialog","aria-label":this.tt.transcriptTitle}),this.$transcriptToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$transcriptDiv=t("<div>",{class:"able-transcript"}),this.$autoScrollTranscriptCheckbox=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),e=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$transcriptToolbar.append(e,this.$autoScrollTranscriptCheckbox),this.captions.length>1)for(i=t("<div>",{class:"transcript-language-select-wrapper"}),s=t("<label>",{for:"transcript-language-select-"+this.mediaId}).text(this.tt.language),this.$transcriptLanguageSelect=t("<select>",{id:"transcript-language-select-"+this.mediaId}),a=0;a<this.captions.length;a++)n=t("<option></option>",{value:this.captions[a].language,lang:this.captions[a].language}).text(this.captions[a].label),this.captions[a].def&&n.prop("selected",!0),this.$transcriptLanguageSelect.append(n);i&&(i.append(s,this.$transcriptLanguageSelect),this.$transcriptToolbar.append(i)),this.$transcriptArea.append(this.$transcriptToolbar,this.$transcriptDiv),this.transcriptDivLocation?t("#"+this.transcriptDivLocation).append(this.$transcriptArea):this.$ableWrapper.append(this.$transcriptArea),this.transcriptDivLocation\|\|(this.initDragDrop("transcript"),1===this.prefTranscript&&this.positionDraggableWindow("transcript",this.getDefaultWidth("transcript"))),this.prefTranscript\|\|this.transcriptDivLocation\|\|this.$transcriptArea.hide()},AblePlayer.prototype.addTranscriptAreaEvents=function(){var t=this;this.$autoScrollTranscriptCheckbox.click((function(){t.handleTranscriptLockToggle(t.$autoScrollTranscriptCheckbox.prop("checked"))})),this.$transcriptDiv.on("mousewheel DOMMouseScroll click scroll",(function(e){t.scrollingTranscript\|\|(t.autoScrollTranscript=!1,t.refreshControls("transcript")),t.scrollingTranscript=!1})),void 0!==this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.on("click mousedown",(function(t){t.stopPropagation()})),this.$transcriptLanguageSelect.on("change",(function(){var e=t.$transcriptLanguageSelect.val();t.syncTrackLanguages("transcript",e)})))},AblePlayer.prototype.transcriptSrcHasRequiredParts=function(){return!!(t("#"+this.transcriptSrc).length&&(this.$transcriptArea=t("#"+this.transcriptSrc),this.$transcriptArea.find(".able-window-toolbar").length&&(this.$transcriptToolbar=this.$transcriptArea.find(".able-window-toolbar").eq(0),this.$transcriptArea.find(".able-transcript").length&&(this.$transcriptDiv=this.$transcriptArea.find(".able-transcript").eq(0),this.$transcriptArea.find(".able-transcript-seekpoint").length))))&&(this.$transcriptSeekpoints=this.$transcriptArea.find(".able-transcript-seekpoint"),!0)},AblePlayer.prototype.setupManualTranscript=function(){var e,i;e=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),i=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$autoScrollTranscriptCheckbox=e,this.$transcriptToolbar.append(i,this.$autoScrollTranscriptCheckbox)},AblePlayer.prototype.updateTranscript=function(){if(this.transcriptType&&(!this.playerCreated\|\|this.$transcriptArea)){if("external"===this.transcriptType\|\|"popup"===this.transcriptType){var e,i,s;if(this.transcriptLang?i=this.transcriptCaptions.cues:this.transcriptCaptions?(this.transcriptLang=this.transcriptCaptions.language,i=this.transcriptCaptions.cues):this.selectedCaptions&&(this.transcriptLang=this.captionLang,i=this.selectedCaptions.cues),this.transcriptChapters)e=this.transcriptChapters.cues;else if(this.chapters.length>0){if(this.transcriptLang)for(var a=0;a<this.chapters.length;a++)this.chapters[a].language===this.transcriptLang&&(e=this.chapters[a].cues);void 0===e&&(e=this.chapters[0].cues\|\|[])}if(this.transcriptDescriptions)s=this.transcriptDescriptions.cues;else if(this.descriptions.length>0){if(this.transcriptLang)for(a=0;a<this.descriptions.length;a++)this.descriptions[a].language===this.transcriptLang&&(s=this.descriptions[a].cues);s\|\|(s=this.descriptions[0].cues\|\|[])}var n=this.generateTranscript(e\|\|[],i\|\|[],s\|\|[]);this.$transcriptDiv.html(n),this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.find("option:selected").prop("selected",!1),this.$transcriptLanguageSelect.find("option[lang="+this.transcriptLang+"]").prop("selected",!0))}var r=this;1===this.prefTabbable&&this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"),this.$transcriptArea.length>0&&this.$transcriptArea.find("span.able-transcript-seekpoint").click((function(e){r.seekTrigger="transcript";var i=parseFloat(t(this).attr("data-start"));i+=.01,r.seekingFromTranscript?r.seekingFromTranscript=!1:(r.seekingFromTranscript=!0,r.seekTo(i))}))}},AblePlayer.prototype.highlightTranscript=function(e){if(this.transcriptType){var i,s,a,n=this;e=parseFloat(e),this.$transcriptArea.find("span.able-transcript-seekpoint").each((function(){if(i=parseFloat(t(this).attr("data-start")),s=parseFloat(t(this).attr("data-end")),a=!!t(this).parent().hasClass("able-transcript-chapter-heading"),e>=i&&e<=s&&!a)return t(this).hasClass("able-highlight")\|\|(n.$transcriptArea.find(".able-highlight").removeClass("able-highlight"),t(this).addClass("able-highlight"),n.movingHighlight=!0),!1})),n.currentHighlight=n.$transcriptArea.find(".able-highlight"),0===n.currentHighlight.length&&(n.currentHighlight=null)}},AblePlayer.prototype.generateTranscript=function(e,i,s){var a,n=this,r=t('<div class="able-transcript-container"></div>');if(r.attr("lang",this.transcriptLang),a=void 0!==this.transcriptTitle?this.transcriptTitle:this.lyricsMode?this.tt.lyricsTitle:this.tt.transcriptTitle,!this.transcriptDivLocation){var o=this.playerHeadingLevel,l=(o+=1)+1;if(o<=6)var h="h"+o.toString();else h="div";var p=t("<"+h+">");p.addClass("able-transcript-heading"),o>6&&p.attr({role:"heading","aria-level":o}),p.text(a),p.attr("lang",this.lang),r.append(p)}for(var c=0,u=0,d=0,addChapter=function(e,i){if(l<=6)var s="h"+l.toString();else s="div";var a=t("<"+s+">",{class:"able-transcript-chapter-heading"});l>6&&a.attr({role:"heading","aria-level":l});for(var flattenComponentForChapter=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForChapter(t.children[i]));return e},n=t("<span>",{class:"able-transcript-seekpoint"}),r=0;r<i.components.children.length;r++)for(var o=flattenComponentForChapter(i.components.children[r]),h=0;h<o.length;h++)n.append(o[h]);n.attr("data-start",i.start.toString()),n.attr("data-end",i.end.toString()),a.append(n),e.append(a)},addDescription=function(e,i){var s=t("<div>",{class:"able-transcript-desc"}),a=t("<span>",{class:"able-hidden"});a.attr("lang",n.lang),a.text(n.tt.prefHeadingDescription+": "),s.append(a);for(var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForDescription(t.children[i]));return e},r=t("<span>",{class:"able-transcript-seekpoint"}),o=0;o<i.components.children.length;o++)for(var l=flattenComponentForDescription(i.components.children[o]),h=0;h<l.length;h++)r.append(l[h]);r.attr("data-start",i.start.toString()),r.attr("data-end",i.end.toString()),s.append(r),e.append(s)},addCaption=function(e,i){for(var s=t("<span>",{class:"able-transcript-seekpoint able-transcript-caption"}),flattenComponentForCaption=function(e){var i=[],s=0,flattenString=function(t){var e;s++;var i=[];if(""===t)return i;var a=t.indexOf("["),n=t.indexOf("]"),r=t.indexOf("("),o=t.indexOf(")"),l=-1!==a&&-1!==n,h=-1!==r&&-1!==o;if(h\|\|l){if(s>1)var p="<br/>";else p="";var c=p+'<span class="able-unspoken">',u="</span>";h&&l&&(a<r?h=!1:l=!1)}return h?(e=t.substring(0,r),e+=c,e+=t.substring(r,o+1),e+=u,e+=flattenString(t.substring(o+1)),i.push(e)):l?(e=t.substring(0,a),e+=c,e+=t.substring(a,n+1),e+=u,e+=flattenString(t.substring(n+1)),i.push(e)):i.push(t),i};if("string"===e.type)i=i.concat(flattenString(e.value));else if("v"===e.type){var a=t("<span>",{class:"able-unspoken"});e.value=e.value.replace(/^title="\|\"$/g,""),a.text("("+e.value+")"),i.push(a);for(var n=0;n<e.children.length;n++)for(var r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)i.push(r[o])}else if("b"===e.type\|\|"i"===e.type){if("b"===e.type)var l=t("<strong>");else if("i"===e.type)l=t("<em>");for(n=0;n<e.children.length;n++)for(r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)l.append(r[o]);"b"!==e.type&&"i"!=e.type\|\|i.push(l," ")}else for(n=0;n<e.children.length;n++)i=i.concat(flattenComponentForCaption(e.children[n]));return i},a=0;a<i.components.children.length;a++)for(var r=flattenComponentForCaption(i.components.children[a]),o=0;o<r.length;o++){var l=r[o];"string"==typeof l&&(n.lyricsMode?l=l.replace(/\n/g,"<br>")+"<br>":l+=" "),s.append(l)}s.attr("data-start",i.start.toString()),s.attr("data-end",i.end.toString()),e.append(s),e.append(" \n")};c<e.length\|\|d<s.length\|\|u<i.length;){if(c<e.length&&d<s.length&&u<i.length)var f=Math.min(e[c].start,s[d].start,i[u].start);else if(c<e.length&&d<s.length)f=Math.min(e[c].start,s[d].start);else if(c<e.length&&u<i.length)f=Math.min(e[c].start,i[u].start);else if(d<s.length&&u<i.length)f=Math.min(s[d].start,i[u].start);else f=null;null!==f?void 0!==e[c]&&e[c].start===f?(addChapter(r,e[c]),c+=1):void 0!==s[d]&&s[d].start===f?(addDescription(r,s[d]),d+=1):(addCaption(r,i[u]),u+=1):c<e.length?(addChapter(r,e[c]),c+=1):d<s.length?(addDescription(r,s[d]),d+=1):u<i.length&&(addCaption(r,i[u]),u+=1)}var m=r.children(),g=0;return m.each((function(){t(this).hasClass("able-transcript-caption")?(-1===t(this).text().indexOf("[")&&-1===t(this).text().indexOf("(")\|\|g>0&&(r.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),g=0),t(this).addClass("able-block-temp"),g++):g>0&&(r.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),g=0)})),r}}(jQuery),function(t){AblePlayer.prototype.showSearchResults=function(){var e=this;if(this.searchDiv&&this.searchString){var i=DOMPurify.sanitize(this.searchString);if(t("#"+this.SearchDiv)){var s="<p>"+this.tt.resultsSummary1+" ";s+='<span id="able-search-term-echo">'+i+"</span>",s+="</p>";var a=this.searchFor(i,this.searchIgnoreCaps);if(a.length>0){var n=t("<p>",{class:"able-search-results-summary"}),r=this.tt.resultsSummary2;r+=" <strong>"+a.length+"</strong> ",r+=this.tt.resultsSummary3+" ",r+=this.tt.resultsSummary4,n.html(r);for(var o=t("<ul>"),l=0;l<a.length;l++){var h="aria-search-result-"+l,p=t("<li>",{}),c=this.secondsToTime(a[l].start),u=this.tt.searchButtonLabel+" "+c.title,d=t("<button>",{class:"able-search-results-time","data-start":a[l].start,title:u,"aria-label":u,"aria-describedby":h});d.text(c.value),d.on("click",(function(i){e.seekTrigger="search";var s=parseFloat(t(this).attr("data-start"));s+=.01,e.seeking=!0,e.seekTo(s)}));var f=t("<span>",{class:"able-search-result-text",id:h});f.html("..."+a[l].caption+"..."),p.append(d,f),o.append(p)}t("#"+this.searchDiv).html(s).append(n,o)}else{var m=t("<p>").text(this.tt.noResultsFound);t("#"+this.searchDiv).html(s).append(m)}}}},AblePlayer.prototype.searchFor=function(e,i){var s,a,n,r,o,l,h;n=[];var p=e.split(" ");if(this.captions.length>0){for(l=0;l<this.captions.length;l++)this.captions[l].language===this.searchLang&&(s=this.searchLang,a=this.captions[l].cues);if(a.length>0)for(o=0,l=0;l<a.length;l++)if(-1!==t.inArray(a[l].components.children[0].type,["string","i","b","u","v","c"])){r=this.flattenCueForCaption(a[l]);var c=i?r.toLowerCase():r;for(h=0;h<p.length;h++){var u=i?p[h].toLowerCase():p[h];if(-1!==c.indexOf(u)){n[o]=[],n[o].start=a[l].start,n[o].lang=s,n[o].caption=this.highlightSearchTerm(p,r),o++;break}}}}return n},AblePlayer.prototype.highlightSearchTerm=function(t,e){return t.forEach((function(t){var i=new RegExp(t,"gi");e=e.replace(i,'<span class="able-search-term">$&</span>')})),e},AblePlayer.prototype.secondsToTime=function(t){t=Math.floor(t);var e=parseInt(t/3600,10)%24,i=parseInt(t/60,10)%60,s=t%60,a="",n="";e>0&&(a+=e+":",n+=1==e?"1 "+this.tt.hour+" ":e+" "+this.tt.hours+" "),i<10?(a+="0"+i+":",i>0&&(n+=1==i?"1 "+this.tt.minute+" ":i+" "+this.tt.minutes+" ")):(a+=i+":",n+=i+" "+this.tt.minutes+" "),s<10?(a+="0"+s,s>0&&(n+=1==s?"1 "+this.tt.second+" ":s+" "+this.tt.seconds+" ")):(a+=s,n+=s+" "+this.tt.seconds+" ");var r=[];return r.value=a,r.title=n,r}}(jQuery),function(t){AblePlayer.prototype.onMediaUpdateTime=function(t,e){var i=this;this.getMediaTimes(t,e).then((function(t){i.duration=t.duration,i.elapsed=t.elapsed,i.duration>0&&(1===i.prefHighlight&&i.highlightTranscript(i.elapsed),i.updateCaption(i.elapsed),i.showDescription(i.elapsed),i.updateChapter(i.elapsed),i.updateMeta(i.elapsed),i.refreshControls("timeline",i.duration,i.elapsed))}))},AblePlayer.prototype.onMediaPause=function(){this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear"),this.refreshControls("playpause")},AblePlayer.prototype.onMediaComplete=function(){this.hasPlaylist&&!this.cueingPlaylistItem&&(this.playlistIndex===this.$playlist.length-1?this.loop?(this.playlistIndex=0,this.cueingPlaylistItem=!0,this.cuePlaylistItem(0)):(this.playing=!1,this.paused=!0):(this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex))),this.refreshControls("init")},AblePlayer.prototype.onMediaNewSourceLoad=function(){var t=!1;this.cueingPlaylistItem&&(this.cueingPlaylistItem=!1),this.recreatingPlayer&&(this.recreatingPlayer=!1),this.playbackRate&&this.setPlaybackRate(this.playbackRate),this.userClickedPlaylist?this.startedPlaying&&!this.okToPlay\|\|(this.playMedia(),t=!0):"restart"==this.seekTrigger\|\|"chapter"==this.seekTrigger\|\|"transcript"==this.seekTrigger\|\|"search"==this.seekTrigger?(this.playMedia(),t=!0):this.swappingSrc?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length\|\|this.loop)&&(this.playMedia(),t=!0):this.swapTime>0?"complete"===this.seekStatus?(this.okToPlay&&this.playMedia(),t=!0):"seeking"===this.seekStatus\|\|(this.swapTime===this.elapsed?(this.seekStatus="complete",this.okToPlay&&this.playMedia(),t=!0):this.hasDescTracks?t=!0:this.durationsAreCloseEnough(this.duration,this.prevDuration)?(this.seekStatus="seeking",this.seekTo(this.swapTime)):t=!0):this.playing&&(this.playMedia(),t=!0):this.startedPlaying?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length\|\|this.loop)&&(this.playMedia(),t=!0):t=!0:this.startTime>0?this.seeking?(this.seeking=!1,this.okToPlay&&this.playMedia(),t=!0):this.seekTo(this.startTime):this.defaultChapter&&void 0!==this.selectedChapters?this.seekToChapter(this.defaultChapter):(this.okToPlay&&this.playMedia(),t=!0),t&&(this.swappingSrc=!1,this.seekStatus=null,this.swapTime=0,this.seekTrigger=null,this.seekingFromTranscript=!1,this.userClickedPlaylist=!1,this.okToPlay=!1),this.refreshControls("init"),this.$focusedElement&&(this.restoreFocus(),this.$focusedElement=null)},AblePlayer.prototype.durationsAreCloseEnough=function(t,e){return Math.abs(Math.round(t)-Math.round(e))<=1},AblePlayer.prototype.restoreFocus=function(){var e;this.$focusedElement&&"button"===this.$focusedElement.attr("role")&&(e=this.$focusedElement.attr("class").split(/\s+/),t.each(e,(function(e,i){"able-button-handler-"===i.substring(0,20)&&t("div.able-controller div."+i).focus()})))},AblePlayer.prototype.addSeekbarListeners=function(){var t=this;this.seekBar.bodyDiv.on("startTracking",(function(e){t.pausedBeforeTracking=t.paused,t.pauseMedia()})).on("tracking",(function(e,i){t.highlightTranscript(i),t.updateCaption(i),t.showDescription(i),t.updateChapter(t.convertChapterTimeToVideoTime(i)),t.updateMeta(i),t.refreshControls("init")})).on("stopTracking",(function(e,i){t.useChapterTimes?t.seekTo(t.convertChapterTimeToVideoTime(i)):t.seekTo(i),t.pausedBeforeTracking\|\|setTimeout((function(){t.playMedia()}),200)}))},AblePlayer.prototype.onClickPlayerButton=function(e){var i,s;"play"===(i=this.getButtonNameFromClass(t(e).attr("class")))?(this.clickedPlay=!0,this.handlePlay()):"restart"===i?(this.seekTrigger="restart",this.handleRestart()):"previous"===i?(this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="previous",this.buttonWithFocus="previous",this.handlePrevTrack()):"next"===i?(this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="next",this.buttonWithFocus="next",this.handleNextTrack()):"rewind"===i?(this.seekTrigger="rewind",this.handleRewind()):"forward"===i?(this.seekTrigger="forward",this.handleFastForward()):"mute"===i?this.handleMute():"volume"===i?this.handleVolumeButtonClick():"faster"===i?this.handleRateIncrease():"slower"===i?this.handleRateDecrease():"captions"===i?this.handleCaptionToggle():"chapters"===i?this.handleChapters():"descriptions"===i?this.handleDescriptionToggle():"sign"===i?this.closingSign\|\|this.handleSignToggle():"preferences"===i?"menu"===t(e).attr("data-prefs-popup")?this.handlePrefsClick():(this.showingPrefsDialog=!0,this.closePopups(),"keyboard"===(s=t(e).attr("data-prefs-popup"))?this.keyboardPrefsDialog.show():"captions"===s?this.captionPrefsDialog.show():"descriptions"===s?this.descPrefsDialog.show():"transcript"===s&&this.transcriptPrefsDialog.show(),this.showingPrefsDialog=!1):"help"===i?this.handleHelpClick():"transcript"===i?this.closingTranscript\|\|this.handleTranscriptToggle():"fullscreen"===i&&(this.clickedFullscreenButton=!0,this.handleFullscreenToggle())},AblePlayer.prototype.getButtonNameFromClass=function(t){var e,i;for(e=t.split(" "),i=0;i<e.length;i++)if("able-button-handler-"===e[i].substring(0,20))return e[i].substring(20);return t},AblePlayer.prototype.okToHandleKeyPress=function(){var e=AblePlayer.getActiveDOMElement();return"INPUT"!==t(e).prop("tagName")},AblePlayer.prototype.onPlayerKeyPress=function(e){var i,s;return(i=e.which)>=65&&i<=90&&(i+=32),s=t(document.activeElement),27===i&&this.$transcriptArea&&t.contains(this.$transcriptArea[0],s[0])&&!this.hidingPopup?(this.handleTranscriptToggle(),!1):!!this.okToHandleKeyPress()&&void(t(":focus").is("[contenteditable]")\|\|t(":focus").is("input")\|\|t(":focus").is("textarea")&&!this.stenoMode\|\|t(":focus").is("select")\|\|e.target.hasAttribute("contenteditable")\|\|"INPUT"===e.target.tagName\|\|"TEXTAREA"===e.target.tagName&&!this.stenoMode\|\|"SELECT"===e.target.tagName\|\|(27===i?(this.closePopups(),this.$tooltipDiv.hide(),this.seekBar.hideSliderTooltips()):32===i?"button"===s.attr("role")&&(e.preventDefault(),s.click()):112===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePlay()):115===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRestart()):109===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleMute()):118===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeButtonClick()):i>=49&&i<=57?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeKeystroke(i)):99===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleCaptionToggle()):100===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleDescriptionToggle()):102===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleFastForward()):114===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRewind()):98===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrevTrack()):110===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleNextTrack()):101===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrefsClick()):13===i&&("button"===s.attr("role")\|\|"SPAN"===s.prop("tagName")\|\|"LI"===s.prop("tagName"))&&s.click()))},AblePlayer.prototype.addHtml5MediaListeners=function(){var t=this;this.$media.on("emptied",(function(){})).on("loadedmetadata",(function(){t.duration=t.media.duration;Math.abs(Math.round(50.5)-Math.round(51.9))})).on("canplay",(function(){})).on("canplaythrough",(function(){t.onMediaNewSourceLoad()})).on("play",(function(){t.refreshControls("playpause")})).on("playing",(function(){t.playing=!0,t.paused=!1,t.swappingSrc=!1,t.refreshControls("playpause")})).on("ended",(function(){t.playing=!1,t.paused=!0,t.onMediaComplete()})).on("progress",(function(){t.refreshControls("timeline")})).on("waiting",(function(){})).on("durationchange",(function(){t.refreshControls("timeline")})).on("timeupdate",(function(){t.onMediaUpdateTime()})).on("pause",(function(){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist\|\|t.swappingSrc\|\|(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause()})).on("ratechange",(function(){})).on("volumechange",(function(){t.volume=t.getVolume()})).on("error",(function(){t.debug&&t.media.error.code}))},AblePlayer.prototype.addVimeoListeners=function(){var t=this;this.vimeoPlayer.on("loaded",(function(e){t.onMediaNewSourceLoad()})),this.vimeoPlayer.on("play",(function(e){t.playing=!0,t.startedPlaying=!0,t.paused=!1,t.refreshControls("playpause")})),this.vimeoPlayer.on("ended",(function(e){t.playing=!1,t.paused=!0,t.onMediaComplete()})),this.vimeoPlayer.on("bufferstart",(function(){})),this.vimeoPlayer.on("bufferend",(function(){})),this.vimeoPlayer.on("progress",(function(t){})),this.vimeoPlayer.on("seeking",(function(t){})),this.vimeoPlayer.on("seeked",(function(t){})),this.vimeoPlayer.on("timeupdate",(function(e){t.onMediaUpdateTime(e.duration,e.seconds)})),this.vimeoPlayer.on("pause",(function(e){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist\|\|t.swappingSrc\|\|(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause(),t.refreshControls("playpause")})),this.vimeoPlayer.on("playbackratechange",(function(e){t.vimeoPlaybackRate=e.playbackRate})),this.vimeoPlayer.on("texttrackchange",(function(t){})),this.vimeoPlayer.on("volumechange",(function(e){t.volume=10e.volume})),this.vimeoPlayer.on("error",(function(t){}))},AblePlayer.prototype.addEventListeners=function(){var e;if(e=this,t(window).on("resize",(function(){e.resizePlayer()})),window.MutationObserver){var i=this.$ableDiv[0];new MutationObserver((function(t){t.forEach((function(t){"attributes"===t.type&&"style"===t.attributeName&&e.$ableDiv.is(":visible")&&e.refreshControls("init")}))})).observe(i,{attributes:!0,childList:!0,characterData:!0})}void 0!==this.seekBar?this.addSeekbarListeners():setTimeout((function(){void 0!==e.seekBar&&e.addSeekbarListeners()}),2e3),this.$controllerDiv.find('div[role="button"]').on("click",(function(t){t.stopPropagation(),e.onClickPlayerButton(this)})),t(document).on("click",(function(i){if(0!==i.button)return!1;(t(".able-popup:visible").length\|\|t(".able-volume-popup:visible"))&&e.closePopups(),"VIDEO"===i.target.tagName&&(e.clickedPlay=!0)})),this.$ableDiv.on("mousemove",(function(){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())})),t(document).keydown((function(t){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())})),this.$ableDiv.keydown((function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)})),this.stenoMode&&void 0!==this.stenoFrameContents&&this.stenoFrameContents.on("keydown",(function(t){e.onPlayerKeyPress(t)})),this.$transcriptArea&&this.$transcriptArea.on("keydown",(function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)})),this.$playlist&&this.$playlist.click((function(i){e.userClickedPlaylist\|\|(e.userClickedPlaylist=!0,e.playlistIndex=t(this).index(),e.cuePlaylistItem(e.playlistIndex))})),this.$media.click((function(){e.handlePlay()})),"html5"===this.player?this.addHtml5MediaListeners():"vimeo"===this.player?this.addVimeoListeners():"youtube"===this.player&&setInterval((function(){e.onMediaUpdateTime()}),300)}}(jQuery),function(t){AblePlayer.prototype.initDragDrop=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f;for(i=this,"transcript"===e?(s=this.$transcriptArea,n="transcript-window",a=this.$transcriptToolbar):"sign"===e&&(s=this.$signWindow,n="sign-window",a=this.$signToolbar),a.addClass("able-draggable"),r=t("<div>",{class:"able-resizable"}),o=t("<svg>").attr({width:"100%",height:"100%",viewBox:"0 0 100 100",preserveAspectRatio:"none"}),l=1;l<=3;l++)1===l?(h="100",p="0",c="0",u="100"):2===l?(h="33",p="100",c="100",u="33"):3===l&&(h="67",p="100",c="100",u="67"),d=t("<line>").attr({x1:h,y1:p,x2:c,y2:u,"vector-effect":"non-scaling-stroke"}),o.append(d);r.html(o),f=parseInt(s.css("z-index"))+100,r.css("z-index",f),s.append(r),r.html(r.html()),a.on("mousedown mouseup touchstart touchend",(function(t){return t.stopPropagation(),"mousedown"===t.type\|\|"touchstart"===t.type?i.windowMenuClickRegistered\|\|(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.dragDevice="mouse",i.startDrag(e,s)):"mouseup"!==t.type&&"touchend"!==t.type\|\|i.dragging&&"mouse"===i.dragDevice&&i.endDrag(e),!1})),r.on("mousedown mouseup touchstart touchend",(function(t){return t.stopPropagation(),"mousedown"===t.type\|\|"touchstart"===t.type?i.windowMenuClickRegistered\|\|(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.startResize(e,s)):"mouseup"!==t.type&&"touchend"!==t.type\|\|i.resizing&&i.endResize(e),!1})),s.on("click",(function(){i.windowMenuClickRegistered\|\|i.finishingDrag\|\|i.updateZIndex(e),i.finishingDrag=!1})),this.addWindowMenu(e,s,n)},AblePlayer.prototype.addWindowMenu=function(e,i,s){var a,n,r,o,l,h,p,c,u,d,f;a=this,this.windowMenuClickRegistered=!1,this.finishingDrag=!1,(n=t('<div role="alert"></div>')).addClass("able-alert"),n.hide(),n.appendTo(this.$activeWindow),n.css({top:i.offset().top}),f=this.mediaId+"-"+s+"-menu",r=t("<button>",{type:"button",tabindex:"0","aria-label":this.tt.windowButtonLabel,"aria-haspopup":"true","aria-controls":f,"aria-expanded":"false",class:"able-button-handler-preferences"}),"font"===this.iconType?(o=t("<span>",{class:"icon-preferences","aria-hidden":"true"}),r.append(o)):(l=this.rootPath+"button-icons/"+this.toolbarIconColor+"/preferences.png",h=t("<img>",{src:l,alt:"",role:"presentation"}),r.append(h)),p=t("<span>",{class:"able-clipped"}).text(this.tt.windowButtonLabel),r.append(p),c=this.mediaId+"-"+s+"-tooltip",u=t("<div>",{class:"able-tooltip",id:c}).hide(),r.on("mouseenter focus",(function(e){var i=t(this).attr("aria-label"),s=t(this).position(),n=t(this).height(),o=(t(this).width(),{left:"",right:"0px",top:s.top-n-5+"px"}),l=AblePlayer.localGetElementById(r[0],c).text(i).css(o);a.showTooltip(l),t(this).on("mouseleave blur",(function(){AblePlayer.localGetElementById(r[0],c).text("").hide()}))})),d=this.setupPopups(s),"transcript"===e?(this.$transcriptAlert=n,this.$transcriptPopupButton=r,this.$transcriptPopup=d,this.$transcriptToolbar.prepend(n,r,u,d)):"sign"===e&&(this.$signAlert=n,this.$signPopupButton=r,this.$signPopup=d,this.$signToolbar.append(n,r,u,d)),r.on("click mousedown keydown",(function(t){return!a.focusNotClick&&(a.dragging?(a.dragKeys(e,t),!1):(t.stopPropagation(),a.windowMenuClickRegistered\|\|a.finishingDrag\|\|a.handleWindowButtonClick(e,t),void(a.finishingDrag=!1)))})),this.addResizeDialog(e,i)},AblePlayer.prototype.addResizeDialog=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,f,m,g,v,y,b,T,P,k,C,w,D;s=this,"transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton),r=this.mediaId+"-resize-"+e+"-width",o=this.mediaId+"-resize-"+e+"-height",l=i.width(),h=i.height(),p=l/h,c=t("<div></div>",{class:"able-resize-form"}),u=t("<div></div>"),d=t("<div></div>"),f=t("<input>",{type:"text",id:r,value:l}),m=t("<label>",{for:r}).text(this.tt.width),g=t("<div></div>"),v=t("<input>",{type:"text",id:o,value:h}),y=t("<label>",{for:o}).text(this.tt.height),"sign"===e&&(v.prop("readonly",!0),f.on("input",(function(){b=t(this).val(),T=Math.round(b/p,0),v.val(T)}))),P=t('<button class="modal-button">'+this.tt.save+"</button>"),k=t('<button class="modal-button">'+this.tt.cancel+"</button>"),P.on("click",(function(){C=t("#"+r).val(),w=t("#"+o).val(),C===l&&w===h\|\|(s.resizeObject(e,C,w),s.updateCookie(e)),D.hide(),a.hide(),n.focus()})),k.on("click",(function(){D.hide(),a.hide(),n.focus()})),d.append(m,f),g.append(y,v),u.append(d,g),c.append(u,"<hr>",P,k),t("body").append(c),D=new AccessibleDialog(c,n,"dialog",!0,this.tt.windowResizeHeading,u,this.tt.closeButtonLabel,"20em"),"transcript"===e?this.transcriptResizeDialog=D:"sign"===e&&(this.signResizeDialog=D)},AblePlayer.prototype.handleWindowButtonClick=function(e,i){var s,a,n,r;if(s=this,this.focusNotClick)return!1;if("transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton,this.$transcriptToolbar):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton,this.$signToolbar),"keydown"===i.type)if(32===i.which\|\|13===i.which)this.windowMenuClickRegistered=!0;else{if(27!==i.which)return!1;a.is(":visible")?a.hide("fast",(function(){s.windowMenuClickRegistered=!1,a.find("li").removeClass("able-focus").attr("tabindex","-1"),n.focus()})):"sign"===e?this.handleSignToggle():"transcript"===e&&this.handleTranscriptToggle()}else this.windowMenuClickRegistered=!0;a.is(":visible")?(a.hide(200,"",(function(){s.windowMenuClickRegistered=!1})),a.find("li").removeClass("able-focus"),n.attr("aria-expanded","false").focus()):(this.updateZIndex(e),r=n.position().top+n.outerHeight(),a.css("top",r),a.show(200,"",(function(){n.attr("aria-expanded","true"),t(this).find("li").first().focus().addClass("able-focus"),s.windowMenuClickRegistered=!1})))},AblePlayer.prototype.handleMenuChoice=function(t,e,i){var s,a,n,r,o;if(s=this,"transcript"===t?(a=this.$transcriptArea,n=this.$transcriptPopup,r=this.$transcriptPopupButton,o=this.transcriptResizeDialog):"sign"===t&&(a=this.$signWindow,n=this.$signPopup,r=this.$signPopupButton,o=this.signResizeDialog),this.$activeWindow=a,"keydown"===i.type)return 27===i.which?(n.hide("fast",(function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),r.focus()})),!1):("close"!==e&&(this.$activeWindow=a),!1);if(n.hide("fast",(function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false")})),"close"!==e&&r.focus(),"move"===e)this.$activeWindow.attr("role","application"),this.showedAlert(t)\|\|(this.showAlert(this.tt.windowMoveAlert,t),"transcript"===t?this.showedTranscriptAlert=!0:"sign"===t&&(this.showedSignAlert=!0)),"keydown"===i.type?this.dragDevice="keyboard":this.dragDevice="mouse",this.startDrag(t,a),n.hide().parent().focus();else if("resize"==e){var l=o.getInputs();l&&(l[0].value=a.width(),l[1].value=a.height()),o.show()}else"close"==e&&("transcript"===t?(this.closingTranscript=!0,this.handleTranscriptToggle()):"sign"===t&&(this.closingSign=!0,this.handleSignToggle()))},AblePlayer.prototype.startDrag=function(e,i){var s,a,n,r,o;return s=this,this.$activeWindow\|\|(this.$activeWindow=i),this.dragging=!0,"transcript"===e?a=this.$transcriptPopup:"sign"===e&&(a=this.$signPopup),this.showedAlert(e)\|\|(this.showAlert(this.tt.windowMoveAlert,e),"transcript"===e?this.showedTranscriptAlert=!0:"sign"===e&&(this.showedSignAlert=!0)),a.is(":visible")&&a.hide(),this.updateZIndex(e),n=this.$activeWindow.position(),this.dragStartX=n.left,this.dragStartY=n.top,void 0===this.startMouseX?(this.dragDevice="keyboard",this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.startingDrag=!0):(this.dragDevice="mouse",this.dragOffsetX=this.startMouseX-this.dragStartX,this.dragOffsetY=this.startMouseY-this.dragStartY),this.$activeWindow.addClass("able-drag").css({position:"absolute",top:this.dragStartY+"px",left:this.dragStartX+"px"}).focus(),"mouse"===this.dragDevice?t(document).on("mousemove touchmove",(function(t){s.dragging&&(r=t.pageX-s.dragOffsetX,o=t.pageY-s.dragOffsetY,s.resetDraggedObject(r,o))})):"keyboard"===this.dragDevice&&this.$activeWindow.on("keydown",(function(t){s.dragging&&s.dragKeys(e,t)})),!1},AblePlayer.prototype.dragKeys=function(t,e){if(this.startingDrag)return this.startingDrag=!1,!1;switch(e.which){case 37:case 63234:this.dragKeyX-=10;break;case 38:case 63232:this.dragKeyY-=10;break;case 39:case 63235:this.dragKeyX+=10;break;case 40:case 63233:this.dragKeyY+=10;break;case 13:case 27:return this.endDrag(t),!1;default:return!1}return this.resetDraggedObject(this.dragKeyX,this.dragKeyY),e.preventDefault&&e.preventDefault(),!1},AblePlayer.prototype.resetDraggedObject=function(t,e){this.$activeWindow.css({left:t+"px",top:e+"px"})},AblePlayer.prototype.resizeObject=function(t,e,i){var s;this.$activeWindow.css({width:e+"px",height:i+"px"}),"transcript"===t&&(s=i-50,this.$transcriptDiv.css("height",s+"px"))},AblePlayer.prototype.endDrag=function(e){var i,s;i=this,"transcript"===e?(this.$transcriptPopup,s=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,s=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown").removeClass("able-drag"),this.$activeWindow.attr("role","dialog"),this.$activeWindow=null,"keyboard"===this.dragDevice&&s.focus(),this.dragging=!1,this.updateCookie(e),this.startMouseX=void 0,this.startMouseY=void 0,this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout((function(){i.finishingDrag=!1}),100)},AblePlayer.prototype.isCloseToCorner=function(t,e,i){var s,a,n,r,o,l;return a=(s=t.offset()).top,n=s.left,r=t.width(),o=a+t.height(),l=n+r,Math.abs(o-i)<=10&&Math.abs(l-e)<=10},AblePlayer.prototype.startResize=function(e,i){var s,a,n,r;return s=this,this.$activeWindow=i,this.resizing=!0,"transcript"===e?a=this.$transcriptPopup:"sign"===e&&(a=this.$signPopup),a.is(":visible")&&a.hide().parent().focus(),this.$activeWindow.position(),this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.dragStartWidth=this.$activeWindow.width(),this.dragStartHeight=this.$activeWindow.height(),t(document).on("mousemove touchmove",(function(t){s.resizing&&(n=s.dragStartWidth+(t.pageX-s.startMouseX),r=s.dragStartHeight+(t.pageY-s.startMouseY),s.resizeObject(e,n,r))})),!1},AblePlayer.prototype.endResize=function(e){var i;"transcript"===e?(this.$transcriptPopup,i=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,i=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown"),i.show().focus(),this.resizing=!1,this.$activeWindow.removeClass("able-resize"),this.updateCookie(e),this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout((function(){this.finishingDrag=!1}),100)}}(jQuery),function(t){AblePlayer.prototype.initSignLanguage=function(){"html5"===this.player?(this.signFile=this.$sources.first().attr("data-sign-src"),this.signFile?this.isIOS()?(this.hasSignLanguage=!1,this.debug):(this.debug,this.hasSignLanguage=!0,this.injectSignPlayerCode()):this.hasSignLanguage=!1):this.hasSignLanguage=!1},AblePlayer.prototype.injectSignPlayerCode=function(){var e,i,s,a,n;for(this.getDefaultWidth("sign"),e=this.mediaId+"-sign",this.$signVideo=t("<video>",{id:e,tabindex:"-1"}),this.signVideo=this.$signVideo[0],i=0;i<this.$sources.length;i++){if(s=this.$sources[i].getAttribute("data-sign-src"),a=this.$sources[i].getAttribute("type"),!s){this.hasSignLanguage=!1;break}n=t("<source>",{src:s,type:a}),this.$signVideo.append(n)}this.$signWindow=t("<div>",{class:"able-sign-window",role:"dialog","aria-label":this.tt.sign}),this.$signToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$signWindow.append(this.$signToolbar,this.$signVideo),this.$ableWrapper.append(this.$signWindow),this.initDragDrop("sign"),1===this.prefSign?this.positionDraggableWindow("sign",this.getDefaultWidth("sign")):this.$signWindow.hide()}}(jQuery),function(){var t={ab:{name:"Abkhaz",nativeName:"аҧсуа"},aa:{name:"Afar",nativeName:"Afaraf"},af:{name:"Afrikaans",nativeName:"Afrikaans"},ak:{name:"Akan",nativeName:"Akan"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"አማርኛ"},ar:{name:"Arabic",nativeName:"العربية"},an:{name:"Aragonese",nativeName:"Aragonés"},hy:{name:"Armenian",nativeName:"Հայերեն"},as:{name:"Assamese",nativeName:"অসমীয়া"},av:{name:"Avaric",nativeName:"авар мацӀ, магӀарул мацӀ"},ae:{name:"Avestan",nativeName:"avesta"},ay:{name:"Aymara",nativeName:"aymar aru"},az:{name:"Azerbaijani",nativeName:"azərbaycan dili"},bm:{name:"Bambara",nativeName:"bamanankan"},ba:{name:"Bashkir",nativeName:"башҡорт теле"},eu:{name:"Basque",nativeName:"euskara, euskera"},be:{name:"Belarusian",nativeName:"Беларуская"},bn:{name:"Bengali",nativeName:"বাংলা"},bh:{name:"Bihari",nativeName:"भोजपुरी"},bi:{name:"Bislama",nativeName:"Bislama"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},br:{name:"Breton",nativeName:"brezhoneg"},bg:{name:"Bulgarian",nativeName:"български език"},my:{name:"Burmese",nativeName:"ဗမာစာ"},ca:{name:"Catalan",nativeName:"Català"},ch:{name:"Chamorro",nativeName:"Chamoru"},ce:{name:"Chechen",nativeName:"нохчийн мотт"},ny:{name:"Chichewa",nativeName:"chiCheŵa, chinyanja"},zh:{name:"Chinese",nativeName:"中文 (Zhōngwén), 汉语, 漢語"},cv:{name:"Chuvash",nativeName:"чӑваш чӗлхи"},kw:{name:"Cornish",nativeName:"Kernewek"},co:{name:"Corsican",nativeName:"corsu, lingua corsa"},cr:{name:"Cree",nativeName:"ᓀᐦᐃᔭᐍᐏᐣ"},hr:{name:"Croatian",nativeName:"hrvatski"},cs:{name:"Czech",nativeName:"česky, čeština"},da:{name:"Danish",nativeName:"dansk"},dv:{name:"Divehi",nativeName:"ދިވެހި"},nl:{name:"Dutch",nativeName:"Nederlands, Vlaams"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti, eesti keel"},ee:{name:"Ewe",nativeName:"Eʋegbe"},fo:{name:"Faroese",nativeName:"føroyskt"},fj:{name:"Fijian",nativeName:"vosa Vakaviti"},fi:{name:"Finnish",nativeName:"suomi, suomen kieli"},fr:{name:"French",nativeName:"français, langue française"},ff:{name:"Fula",nativeName:"Fulfulde, Pulaar, Pular"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"ქართული"},de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"Ελληνικά"},gn:{name:"Guaraní",nativeName:"Avañeẽ"},gu:{name:"Gujarati",nativeName:"ગુજરાતી"},ht:{name:"Haitian",nativeName:"Kreyòl ayisyen"},ha:{name:"Hausa",nativeName:"Hausa, هَوُسَ"},he:{name:"Hebrew",nativeName:"עברית"},hz:{name:"Herero",nativeName:"Otjiherero"},hi:{name:"Hindi",nativeName:"हिन्दी, हिंदी"},ho:{name:"Hiri Motu",nativeName:"Hiri Motu"},hu:{name:"Hungarian",nativeName:"Magyar"},ia:{name:"Interlingua",nativeName:"Interlingua"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ie:{name:"Interlingue",nativeName:"Originally called Occidental; then Interlingue after WWII"},ga:{name:"Irish",nativeName:"Gaeilge"},ig:{name:"Igbo",nativeName:"Asụsụ Igbo"},ik:{name:"Inupiaq",nativeName:"Iñupiaq, Iñupiatun"},io:{name:"Ido",nativeName:"Ido"},is:{name:"Icelandic",nativeName:"Íslenska"},it:{name:"Italian",nativeName:"Italiano"},iu:{name:"Inuktitut",nativeName:"ᐃᓄᒃᑎᑐᑦ"},ja:{name:"Japanese",nativeName:"日本語 (にほんご／にっぽんご)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kl:{name:"Kalaallisut",nativeName:"kalaallisut, kalaallit oqaasii"},kn:{name:"Kannada",nativeName:"ಕನ್ನಡ"},kr:{name:"Kanuri",nativeName:"Kanuri"},ks:{name:"Kashmiri",nativeName:"कश्मीरी, كشميري‎"},kk:{name:"Kazakh",nativeName:"Қазақ тілі"},km:{name:"Khmer",nativeName:"ភាសាខ្មែរ"},ki:{name:"Kikuyu",nativeName:"Gĩkũyũ"},rw:{name:"Kinyarwanda",nativeName:"Ikinyarwanda"},ky:{name:"Kyrgyz",nativeName:"кыргыз тили"},kv:{name:"Komi",nativeName:"коми кыв"},kg:{name:"Kongo",nativeName:"KiKongo"},ko:{name:"Korean",nativeName:"한국어 (韓國語), 조선말 (朝鮮語)"},ku:{name:"Kurdish",nativeName:"Kurdî, كوردی‎"},kj:{name:"Kuanyama",nativeName:"Kuanyama"},la:{name:"Latin",nativeName:"latine, lingua latina"},lb:{name:"Luxembourgish",nativeName:"Lëtzebuergesch"},lg:{name:"Luganda",nativeName:"Luganda"},li:{name:"Limburgish",nativeName:"Limburgs"},ln:{name:"Lingala",nativeName:"Lingála"},lo:{name:"Lao",nativeName:"ພາສາລາວ"},lt:{name:"Lithuanian",nativeName:"lietuvių kalba"},lu:{name:"Luba-Katanga",nativeName:""},lv:{name:"Latvian",nativeName:"latviešu valoda"},gv:{name:"Manx",nativeName:"Gaelg, Gailck"},mk:{name:"Macedonian",nativeName:"македонски јазик"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu, بهاس ملايو‎"},ml:{name:"Malayalam",nativeName:"മലയാളം"},mt:{name:"Maltese",nativeName:"Malti"},mi:{name:"Māori",nativeName:"te reo Māori"},mr:{name:"Marathi",nativeName:"मराठी"},mh:{name:"Marshallese",nativeName:"Kajin M̧ajeļ"},mn:{name:"Mongolian",nativeName:"монгол"},na:{name:"Nauru",nativeName:"Ekakairũ Naoero"},nv:{name:"Navajo",nativeName:"Diné bizaad, Dinékʼehǰí"},nb:{name:"Norwegian Bokmål",nativeName:"Norsk bokmål"},nd:{name:"North Ndebele",nativeName:"isiNdebele"},ne:{name:"Nepali",nativeName:"नेपाली"},ng:{name:"Ndonga",nativeName:"Owambo"},nn:{name:"Norwegian Nynorsk",nativeName:"Norsk nynorsk"},no:{name:"Norwegian",nativeName:"Norsk"},ii:{name:"Nuosu",nativeName:"ꆈꌠ꒿ Nuosuhxop"},nr:{name:"South Ndebele",nativeName:"isiNdebele"},oc:{name:"Occitan",nativeName:"Occitan"},oj:{name:"Ojibwe",nativeName:"ᐊᓂᔑᓈᐯᒧᐎᓐ"},cu:{name:"Church Slavonic",nativeName:"ѩзыкъ словѣньскъ"},om:{name:"Oromo",nativeName:"Afaan Oromoo"},or:{name:"Oriya",nativeName:"ଓଡ଼ିଆ"},os:{name:"Ossetian",nativeName:"ирон æвзаг"},pa:{name:"Punjabi",nativeName:"ਪੰਜਾਬੀ, پنجابی‎"},pi:{name:"Pāli",nativeName:"पाऴि"},fa:{name:"Persian",nativeName:"فارسی"},pl:{name:"Polish",nativeName:"polski"},ps:{name:"Pashto",nativeName:"پښتو"},pt:{name:"Portuguese",nativeName:"Português"},qu:{name:"Quechua",nativeName:"Runa Simi, Kichwa"},rm:{name:"Romansh",nativeName:"rumantsch grischun"},rn:{name:"Kirundi",nativeName:"kiRundi"},ro:{name:"Romanian",nativeName:"română"},ru:{name:"Russian",nativeName:"русский язык"},sa:{name:"Sanskrit",nativeName:"संस्कृतम्"},sc:{name:"Sardinian",nativeName:"sardu"},sd:{name:"Sindhi",nativeName:"सिन्धी, سنڌي، سندھی‎"},se:{name:"Northern Sami",nativeName:"Davvisámegiella"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},sg:{name:"Sango",nativeName:"yângâ tî sängö"},sr:{name:"Serbian",nativeName:"српски језик"},gd:{name:"Gaelic",nativeName:"Gàidhlig"},sn:{name:"Shona",nativeName:"chiShona"},si:{name:"Sinhalese",nativeName:"සිංහල"},sk:{name:"Slovak",nativeName:"slovenčina"},sl:{name:"Slovene",nativeName:"slovenščina"},so:{name:"Somali",nativeName:"Soomaaliga, af Soomaali"},st:{name:"Southern Sotho",nativeName:"Sesotho"},es:{name:"Spanish",nativeName:"español, castellano"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},ss:{name:"Swati",nativeName:"SiSwati"},sv:{name:"Swedish",nativeName:"svenska"},ta:{name:"Tamil",nativeName:"தமிழ்"},te:{name:"Telugu",nativeName:"తెలుగు"},tg:{name:"Tajik",nativeName:"тоҷикӣ, toğikī, تاجیکی‎"},th:{name:"Thai",nativeName:"ไทย"},ti:{name:"Tigrinya",nativeName:"ትግርኛ"},bo:{name:"Tibetan",nativeName:"བོད་ཡིག"},tk:{name:"Turkmen",nativeName:"Türkmen, Түркмен"},tl:{name:"Tagalog",nativeName:"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔"},tn:{name:"Tswana",nativeName:"Setswana"},to:{name:"Tonga",nativeName:"faka Tonga"},tr:{name:"Turkish",nativeName:"Türkçe"},ts:{name:"Tsonga",nativeName:"Xitsonga"},tt:{name:"Tatar",nativeName:"татарча, tatarça, تاتارچا‎"},tw:{name:"Twi",nativeName:"Twi"},ty:{name:"Tahitian",nativeName:"Reo Tahiti"},ug:{name:"Uyghur",nativeName:"Uyƣurqə, ئۇيغۇرچە‎"},uk:{name:"Ukrainian",nativeName:"українська"},ur:{name:"Urdu",nativeName:"اردو"},uz:{name:"Uzbek",nativeName:"zbek, Ўзбек, أۇزبېك‎"},ve:{name:"Venda",nativeName:"Tshivenḓa"},vi:{name:"Vietnamese",nativeName:"Tiếng Việt"},vo:{name:"Volapük",nativeName:"Volapük"},wa:{name:"Walloon",nativeName:"Walon"},cy:{name:"Welsh",nativeName:"Cymraeg"},wo:{name:"Wolof",nativeName:"Wollof"},fy:{name:"Western Frisian",nativeName:"Frysk"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"ייִדיש"},yo:{name:"Yoruba",nativeName:"Yorùbá"},za:{name:"Zhuang",nativeName:"Saɯ cueŋƅ, Saw cuengh"},"ar-dz":{name:"Arabic (Algeria)",nativeName:"العربية (الجزائر)"},"ar-bh":{name:"Arabic (Bahrain)",nativeName:"العربية (البحرين)"},"ar-eg":{name:"Arabic (Egypt)",nativeName:"العربية (مصر)"},"ar-iq":{name:"Arabic (Iraq)",nativeName:"العربية (العراق)"},"ar-jo":{name:"Arabic (Jordan)",nativeName:"العربية (الأردن)"},"ar-kw":{name:"Arabic (Kuwait)",nativeName:"العربية (الكويت)"},"ar-lb":{name:"Arabic (Lebanon)",nativeName:"العربية (لبنان)"},"ar-ly":{name:"Arabic (Libya)",nativeName:"العربية (ليبيا)"},"ar-ma":{name:"Arabic (Morocco)",nativeName:"العربية (المملكة المغربية)"},"ar-om":{name:"Arabic (Oman)",nativeName:"العربية (عمان)"},"ar-qa":{name:"Arabic (Qatar)",nativeName:"العربية (قطر)"},"ar-sa":{name:"Arabic (Saudi Arabia)",nativeName:"العربية (المملكة العربية السعودية)"},"ar-sy":{name:"Arabic (Syria)",nativeName:"العربية (سوريا)"},"ar-tn":{name:"Arabic (Tunisia)",nativeName:"العربية (تونس)"},"ar-ae":{name:"Arabic (U.A.E.)",nativeName:"العربية (الإمارات العربية المتحدة)"},"ar-ye":{name:"Arabic (Yemen)",nativeName:"العربية (اليمن)"},"de-at":{name:"German (Austria)",nativeName:"Deutsch (Österreich)"},"de-li":{name:"German (Liechtenstein)",nativeName:"Deutsch (Liechtenstein)"},"de-lu":{name:"German (Luxembourg)",nativeName:"Deutsch (Luxemburg)"},"de-ch":{name:"German (Switzerland)",nativeName:"Deutsch (Schweiz)"},"en-au":{name:"English (Australia)",nativeName:"English (Australia)"},"en-bz":{name:"English (Belize)",nativeName:"English (Belize)"},"en-ca":{name:"English (Canada)",nativeName:"English (Canada)"},"en-ie":{name:"English (Ireland)",nativeName:"English (Ireland)"},"en-jm":{name:"English (Jamaica)",nativeName:"English (Jamaica)"},"en-nz":{name:"English (New Zealand)",nativeName:""},"en-za":{name:"English (South Africa)",nativeName:"English (South Africa)"},"en-tt":{name:"English (Trinidad)",nativeName:"English (Trinidad y Tobago)"},"en-gb":{name:"English (United Kingdom)",nativeName:"English (United Kingdom)"},"en-us":{name:"English (United States)",nativeName:"English (United States)"},"es-ar":{name:"Spanish (Argentina)",nativeName:"Español (Argentina)"},"es-bo":{name:"Spanish (Bolivia)",nativeName:"Español (Bolivia)"},"es-cl":{name:"Spanish (Chile)",nativeName:"Español (Chile)"},"es-co":{name:"Spanish (Colombia)",nativeName:"Español (Colombia)"},"es-cr":{name:"Spanish (Costa Rica)",nativeName:"Español (Costa Rica)"},"es-do":{name:"Spanish (Dominican Republic)",nativeName:"Español (República Dominicana)"},"es-ec":{name:"Spanish (Ecuador)",nativeName:"Español (Ecuador)"},"es-sv":{name:"Spanish (El Salvador)",nativeName:"Español (El Salvador)"},"es-gt":{name:"Spanish (Guatemala)",nativeName:"Español (Guatemala)"},"es-hn":{name:"Spanish (Honduras)",nativeName:"Español (Honduras)"},"es-mx":{name:"Spanish (Mexico)",nativeName:"Español (México)"},"es-ni":{name:"Spanish (Nicaragua)",nativeName:"Español (Nicaragua)"},"es-pa":{name:"Spanish (Panama)",nativeName:"Español (Panamá)"},"es-py":{name:"Spanish (Paraguay)",nativeName:"Español (Paraguay)"},"es-pe":{name:"Spanish (Peru)",nativeName:"Español (Perú)"},"es-pr":{name:"Spanish (Puerto Rico)",nativeName:"Español (Puerto Rico)"},"es-uy":{name:"Spanish (Uruguay)",nativeName:"Español (Uruguay)"},"es-ve":{name:"Spanish (Venezuela)",nativeName:"Español (Venezuela)"},"fr-be":{name:"French (Belgium)",nativeName:"français (Belgique)"},"fr-ca":{name:"French (Canada)",nativeName:"français (Canada)"},"fr-lu":{name:"French (Luxembourg)",nativeName:"français (Luxembourg)"},"fr-ch":{name:"French (Switzerland)",nativeName:"français (Suisse)"},"it-ch":{name:"Italian (Switzerland)",nativeName:"italiano (Svizzera)"},"nl-be":{name:"Dutch (Belgium)",nativeName:"Nederlands (België)"},"pt-br":{name:"Portuguese (Brazil)",nativeName:"Português (Brasil)"},"sv-fi":{name:"Swedish (Finland)",nativeName:"svenska (Finland)"},"zh-hk":{name:"Chinese (Hong Kong)",nativeName:"中文(香港特别行政區)"},"zh-cn":{name:"Chinese (PRC)",nativeName:"中文(中华人民共和国)"},"zh-sg":{name:"Chinese (Singapore)",nativeName:"中文(新加坡)"},"zh-tw":{name:"Chinese Traditional (Taiwan)",nativeName:"中文（台灣）"}};AblePlayer.prototype.getLanguageName=function(e,i){var s,a,n;return(s=t[e.toLowerCase()])?"local"===i?s.nativeName:s.name:e.includes("-")&&(a=e.substring(0,2),n=e.substring(3),s=t[a.toLowerCase()])?"local"===i?s.nativeName+" ("+n+")":s.name+" ("+n+")":e}}(jQuery),function(t){AblePlayer.prototype.getSupportedLangs=function(){return["ca","cs","da","de","en","es","fr","he","id","it","ja","nb","nl","pt","pt-br","sv","tr","zh-tw"]},AblePlayer.prototype.getTranslationText=function(){var e,i,s,a,n,r,o;if(e=t.Deferred(),i=this,s=this.getSupportedLangs(),this.lang&&-1===t.inArray(this.lang,s))if(2==this.lang.indexOf("-"))-1!==t.inArray(this.lang.substring(0,2),s)?this.lang=this.lang.substring(0,2):this.lang=null;else{for(o=!1,r=0;r<s.length;)s[r].substring(0,2)==this.lang&&(this.lang=s[r],o=!0),r++;o\|\|(this.lang=null)}return this.lang\|\|(a=t("body").attr("lang")?t("body").attr("lang").toLowerCase():t("html").attr("lang")?t("html").attr("lang").toLowerCase():null)&&(-1!==t.inArray(a,s)?this.lang=a:2==a.indexOf("-")&&-1!==t.inArray(a.substring(0,2),s)&&(this.lang=a.substring(0,2))),this.lang\|\|(this.lang="en"),this.searchLang\|\|(this.searchLang=this.lang),n=this.rootPath+"translations/"+this.lang+".js",t.getJSON(n,(function(t){i.tt=t,e.resolve()})).fail((function(){i.provideFallback(),e.fail()})),e.promise()},AblePlayer.prototype.getSampleDescriptionText=function(){var e,i,s,a,n,r;for(i=this.getSupportedLangs(),e=this,this.sampleText=[],s=0;s<i.length;s++)a=this.rootPath+"translations/"+i[s]+".js",t.getJSON(a,undefined,function(t){return function(i){n=i.sampleDescriptionText,r={lang:t,text:n},e.sampleText.push(r)}}(i[s]))}}(jQuery),jQuery,AblePlayer.prototype.computeEndTime=function(t,e){var i=t.split(":").reverse().map((function(t){return parseFloat(t)})),s=e.split(":").reverse().map((function(t){return parseFloat(t)}));return i.reduce((function(t,e,i){var a=e+s[i];return 0===i&&(a>60&&(s[i+1]+=1,a-=60),a=a.toFixed(3)),1===i&&a>60&&(s[i+1]+=1,a-=60),a<10&&(a="0"+a),t.push(a),t}),[]).reverse().join(":")},AblePlayer.prototype.ttml2webvtt=function(t){var e=this,i=e.convert.xml2json(t,{ignoreComment:!0,alwaysChildren:!0,compact:!0,spaces:2});return JSON.parse(i).tt.body.div.p.reduce((function(t,i,s){var a=i._text,n=Array.isArray(a),r=i._attributes;return e.computeEndTime(r.begin,r.dur),t+(e.computeEndTime(r.begin,"00:00:0")+" --\x3e ")+e.computeEndTime(r.begin,r.dur)+"\n"+(n?a.join("\n"):a)+"\n\n"}),"WEBVTT\n\n\n")},function(t){t.doWhen=function(e){return t.Deferred((function(i){var s=t.extend({},{when:null,exec:function(){},interval:100,attempts:100,delayed:0},e,{checkId:null}),startChecking=function(){if(!0===s.when())return s.exec.call(i.promise()),void i.resolve();s.checkId=setInterval((function(){0===s.attempts?(clearInterval(s.checkId),i.reject()):(--s.attempts,!0===s.when()&&(s.attempts=0,clearInterval(s.checkId),s.exec.call(i.promise()),i.resolve()))}),s.interval)};s.delayed>0?setTimeout(startChecking,Number(s.delayed)):startChecking()})).promise()}}(jQuery),function(t){AblePlayer.prototype.injectVTS=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,f,m,g,v;if(e=this,t("#able-vts").length&&this.vtsTracks.length){for(k in this.langs=[],this.getAllLangs(this.vtsTracks),this.vtsLang=this.lang,i=t("<h2>").text("Video Transcript Sorter"),t("#able-vts").append(i),this.$vtsAlert=t("<div>",{id:"able-vts-alert","aria-live":"polite","aria-atomic":"true"}),t("#able-vts").append(this.$vtsAlert),s=t("<div>",{id:"able-vts-instructions"}),a=t("<p>").text("Use the Video Transcript Sorter to perform any of the following tasks:"),r=t("<ul>"),o=t("<li>").text("Reorder chapters, descriptions, captions, and/or subtitles so they appear in the proper sequence in Able Player's auto-generated transcript."),l=t("<li>").text("Modify content or start/end times (all are directly editable within the table)."),h=t("<li>").text("Insert new content, such as chapters or descriptions."),n=t("<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.'),r.append(o,l,h),s.append(a,r,n),t("#able-vts").append(s),p=t("<fieldset>"),c=t("<legend>").text("Select a language"),p.append(c),this.langs)d="vts-lang-radio-"+this.langs[k],u=t("<div>",{}),m=t("<input>",{type:"radio",name:"vts-lang",id:d,value:this.langs[k]}).on("click",(function(){e.vtsLang=t(this).val(),e.showVtsAlert("Loading "+e.getLanguageName(e.vtsLang)+" tracks"),e.injectVtsTable("update",e.vtsLang)})),this.langs[k]==this.lang&&m.prop("checked",!0),f=t("<label>",{for:d}).text(this.getLanguageName(this.langs[k])),u.append(m,f),p.append(u);var y,b,T,P,k;t("#able-vts").append(p),g=t("<button>",{type:"button",id:"able-vts-save",value:"save"}).text("Save Changes"),t("#able-vts").append(g),this.injectVtsTable("add",this.vtsLang),y=["captions","chapters","descriptions","subtitles"],t('td[contenteditable="true"]').on("focus",(function(){b=t(this).text()})).on("blur",(function(){b!=t(this).text()&&(T=t(this).index(),P=t(this).text(),1===T?-1===t.inArray(P,y)&&("s"===P.substring(0,1)?t(this).text("subtitles"):"d"===P.substring(0,1)?t(this).text("descriptions"):"ch"===P.substring(0,2)?t(this).text("chapters"):t(this).text("captions")):2!==T&&3!==T\|\|t(this).text(e.formatTimestamp(P)))})).on("keydown",(function(t){t.stopPropagation()})),t("#able-vts-save").on("click",(function(i){i.stopPropagation(),"save"==t(this).attr("value")?(t(this).attr("value","cancel").text("Return to Editor"),v=t("#able-vts table"),t("#able-vts-instructions").hide(),t("#able-vts > fieldset").hide(),t("#able-vts table").remove(),t("#able-vts-icon-credit").remove(),e.parseVtsOutput(v)):(t(this).attr("value","save").text("Save Changes"),t("#able-vts-output").remove(),t("#able-vts-instructions").show(),t("#able-vts > fieldset").show(),t("#able-vts").append(v),t("#able-vts").append(e.getIconCredit()),e.showVtsAlert("Cancelling saving. Any edits you made have been restored in the VTS table."))}))}},AblePlayer.prototype.setupVtsTracks=function(t,e,i,s,a,n){var r,o;r=this.getFilenameFromPath(a),o=this.parseVtsTracks(n),this.vtsTracks.push({kind:t,language:e,label:s,srcFile:r,cues:o})},AblePlayer.prototype.getFilenameFromPath=function(t){var e;return-1===(e=t.lastIndexOf("/"))?t:t.substring(e+1)},AblePlayer.prototype.getFilenameFromTracks=function(t,e){for(var i=0;i<this.vtsTracks.length;i++)if(this.vtsTracks[i].kind===t&&this.vtsTracks[i].language===e)return this.vtsTracks[i].srcFile;return!1},AblePlayer.prototype.parseVtsTracks=function(t){var e,i,s,a,n,r,o,l,h;for(e=t.split("\n"),s=[],a=0;a<e.length;)if(-1!==(r=e[a]).indexOf(" --\x3e ")){if(i=r.trim().split(" "),this.isValidTimestamp(i[0])&&this.isValidTimestamp(i[2])){for(l="",n=a+1,h=!1;n<e.length&&!h;)(o=e[n].trim()).length>0?l.length>0?l+="\n"+o:l+=o:h=!0,n++;s.push({start:i[0],end:i[2],content:l}),a=n}}else a++;return s},AblePlayer.prototype.isValidTimestamp=function(t){return!!/^[0-9:,.]$/.test(t)},AblePlayer.prototype.formatTimestamp=function(t){var e,i;if(e=t.substring(0,t.lastIndexOf(".")+1),(i=t.substring(t.lastIndexOf(".")+1)).length>3)i=i.substring(0,3);else if(i.length<3)for(;i.length<3;)i+="0";return e+i},AblePlayer.prototype.injectVtsTable=function(e,i){var s,a,n,r,o,l,h,p;for("update"===e&&(t("#able-vts table").remove(),t("#able-vts-icon-credit").remove()),s=t("<table>",{lang:i}),r=t("<tr>",{lang:"en"}),a=["Row #","Kind","Start","End","Content","Actions"],n=0;n<a.length;n++)o=t("<th>",{scope:"col"}).text(a[n]),"Actions"===a[n]&&o.addClass("actions"),r.append(o);for(s.append(r),h=this.getAllRows(i),n=0;n<h.length;n++)r=t("<tr>",{id:"able-vts-row-"+(p=n+1),class:"kind-"+h[n].kind}),l=t("<td>").text(p),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].kind),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].start),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].end),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].content),r.append(l),l=this.addVtsActionButtons(p,h.length),r.append(l),s.append(r);t("#able-vts").append(s),t("#able-vts").append(this.getIconCredit())},AblePlayer.prototype.addVtsActionButtons=function(e,i){var s,a,n,r,o,l,h,p,c,u;for(s=this,a=t("<td>"),n=["up","down","insert","delete"],r=0;r<n.length;r++)"up"===(o=n[r])?e>1&&(l=t("<button>",{id:"able-vts-button-up-"+e,title:"Move up","aria-label":"Move Row "+e+" up"}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101c-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.594l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"down"===o?e<i&&(l=t("<button>",{id:"able-vts-button-down-"+e,title:"Move down","aria-label":"Move Row "+e+" down"}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"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.424C1.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.428s9.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"insert"===o?(l=t("<button>",{id:"able-vts-button-insert-"+e,title:"Insert row below","aria-label":"Insert row before Row "+e}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"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.414C242.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.775H27.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.411c5.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.987h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77c7.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"delete"===o&&(l=t("<button>",{id:"able-vts-button-delete-"+e,title:"Delete row ","aria-label":"Delete Row "+e}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607C429.063,46.021,414.825,31.782,397.281,31.782z"}),u=t("<path>",{d:"M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042c17.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.891c8.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.804zM238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26c0,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.804c0-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.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z"}),p=t("<g>").append(c,u),h.append(p),l.append(h),l.html(l.html()),a.append(l));return a},AblePlayer.prototype.updateVtsActionButtons=function(t,e){var i,s,a,n,r,o;for(i=0;i<t.length;i++)a=(s=t.eq(i)).attr("id"),n=s.attr("aria-label"),r=a.replace(/[0-9]+/g,e),o=n.replace(/[0-9]+/g,e),s.attr("id",r),s.attr("aria-label",o)},AblePlayer.prototype.getIconCredit=function(){return'<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>'},AblePlayer.prototype.getAllLangs=function(e){var i;for(i in e)e[i].hasOwnProperty("language")&&-1===t.inArray(e[i].language,this.langs)&&(this.langs[this.langs.length]=e[i].language)},AblePlayer.prototype.getAllRows=function(t){var e,i,s,a;for(a=[],e=0;e<this.vtsTracks.length;e++)if((i=this.vtsTracks[e]).language==t)for(s in i.cues)a.push({kind:i.kind,lang:t,id:i.cues[s].id,start:i.cues[s].start,end:i.cues[s].end,content:i.cues[s].content});return a.sort((function(t,e){return t.start>e.start?1:-1})),a},AblePlayer.prototype.onClickVtsActionButton=function(e){var i,s,a;s=(i=t(e).attr("id").split("-"))[3],a=i[4],"up"==s?this.moveRow(a,"up"):"down"==s?this.moveRow(a,"down"):"insert"==s?this.insertRow(a):"delete"==s&&this.deleteRow(a)},AblePlayer.prototype.insertRow=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,m,g;for(a=(s=(i=t("#able-vts table")).find("tr")).length-1,n=parseInt(e)+1,r=t("<tr>",{id:"able-vts-row-"+n}),o=t("<td>").text(n),r.append(o),c=null,l=t("<select>",{id:"able-vts-kind-"+n,"aria-label":"What kind of track is this?",placeholder:"Select a kind"}).on("change",(function(){c=t(this).val(),u="kind-"+c,d=t(this).closest("tr"),t(this).parent().text(c),d.addClass(u)})),h=["","captions","chapters","descriptions","subtitles"],f=0;f<h.length;f++)p=t("<option>",{value:h[f]}).text(h[f]),l.append(p);for(o=t("<td>").append(l),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=this.addVtsActionButtons(n,a),r.append(o),i.find("tr").eq(e).after(r),f=n;f<=a;f++)m=f+1,s.eq(f).attr("id","able-vts-row-"+m),s.eq(f).find("td").eq(0).text(m),g=s.eq(f).find("button"),this.updateVtsActionButtons(g,m);this.adjustTimes(n),this.showVtsAlert("A new row "+n+" has been inserted"),l.focus()},AblePlayer.prototype.deleteRow=function(e){var i,s,a,n,r,o;for((i=t("#able-vts table"))[0].deleteRow(e),a=(s=i.find("tr")).length-1,n=e;n<=a;n++)r=n,s.eq(n).attr("id","able-vts-row-"+r),s.eq(n).find("td").eq(0).text(r),o=s.eq(n).find("button"),this.updateVtsActionButtons(o,r);this.showVtsAlert("Row "+e+" has been deleted")},AblePlayer.prototype.moveRow=function(e,i){var s,a,n,r;t("#able-vts table").find("tr"),s=t("#able-vts table").find("tr").eq(e),"up"==i?(a=parseInt(e)-1,(n=t("#able-vts table").find("tr").eq(a)).before(s)):"down"==i&&(a=parseInt(e)+1,(n=t("#able-vts table").find("tr").eq(a)).after(s)),s.attr("id","able-vts-row-"+a),s.find("td").eq(0).text(a),this.updateVtsActionButtons(s.find("button"),a),n.attr("id","able-vts-row-"+e),n.find("td").eq(0).text(e),this.updateVtsActionButtons(n.find("button"),e),this.adjustTimes(a),r="Row "+e+" has been moved "+i,r+=" and is now Row "+a,this.showVtsAlert(r)},AblePlayer.prototype.adjustTimes=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,m,g,v;(i=[]).captions=.001,i.descriptions=.001,i.chapters=.001,h=(r=(s=t("#able-vts table").find("tr")).eq(e)).is('[class^="kind-"]')?this.getKindFromClass(r.attr("class")):"captions",u=this.getSecondsFromColonTime(r.find("td").eq(2).text()),m=this.getSecondsFromColonTime(r.find("td").eq(3).text()),e>1?(a=e-1,p=(o=s.eq(a)).is('[class^="kind-"]')?this.getKindFromClass(o.attr("class")):null,d=this.getSecondsFromColonTime(o.find("td").eq(2).text()),g=this.getSecondsFromColonTime(o.find("td").eq(3).text())):(a=null,o=null,p=null,d=null,g=null),e<s.length-1?(n=e+1,c=(l=s.eq(n)).is('[class^="kind-"]')?this.getKindFromClass(l.attr("class")):null,f=this.getSecondsFromColonTime(l.find("td").eq(2).text()),v=this.getSecondsFromColonTime(l.find("td").eq(3).text())):(n=null,l=null,c=null,f=null,v=null),isNaN(u)?(null==p&&(p="captions",o.attr("class","kind-captions"),o.find("td").eq(1).html("captions")),"captions"===p?(u=(parseFloat(g)+.001).toFixed(3),m=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+i[h]).toFixed(3)):"chapters"===p?(u=(parseFloat(d)+.001).toFixed(3),m=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+minDurartion[h]).toFixed(3)):"descriptions"===p&&(u=(parseFloat(d)+i.descriptions).toFixed(3),m=(parseFloat(u)+i.descriptions).toFixed(3))):d?d<u?u<f\|\|(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)):(u=(parseFloat(d)+i[p]).toFixed(3),m=(parseFloat(u)+i[h]).toFixed(3)):u<f\|\|(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)),m-u<i[h]&&(m=(parseFloat(u)+i[h]).toFixed(3),f&&(f=(parseFloat(m)+.001).toFixed(3))),r.find("td").eq(2).text(this.formatSecondsAsColonTime(u,!0)),r.find("td").eq(3).text(this.formatSecondsAsColonTime(m,!0)),o&&(o.find("td").eq(2).text(this.formatSecondsAsColonTime(d,!0)),o.find("td").eq(3).text(this.formatSecondsAsColonTime(g,!0))),l&&(l.find("td").eq(2).text(this.formatSecondsAsColonTime(f,!0)),l.find("td").eq(3).text(this.formatSecondsAsColonTime(v,!0)))},AblePlayer.prototype.getKindFromClass=function(t){var e,i;return e=t.indexOf("kind-")+5,-1==(i=t.indexOf(" ",e))?t.substring(e):t.substring(e,i)},AblePlayer.prototype.showVtsAlert=function(t){this.$vtsAlert.text(t).show().delay(3e3).fadeOut("slow")},AblePlayer.prototype.parseVtsOutput=function(e){var i,s,a,n,r,o,l,h,p,c;for(i=e.attr("lang"),a=["captions","chapters","descriptions","subtitles"],r={},s=0;s<a.length;s++)r[n=a[s]]="WEBVTT\n\n";if((o=e.find("tr")).length>0)for(s=0;s<o.length;s++)n=o.eq(s).find("td").eq(1).text(),-1!==t.inArray(n,a)&&(l=o.eq(s).find("td").eq(2).text(),h=o.eq(s).find("td").eq(3).text(),p=o.eq(s).find("td").eq(4).text(),void 0!==l&&void 0!==h&&(r[n]+=l+" --\x3e "+h+"\n","undefined"!==p&&(r[n]+=p),r[n]+="\n\n"));for(c=t("<div>",{id:"able-vts-output"}),t("#able-vts").append(c),s=0;s<a.length;s++)r[n=a[s]].length>8&&this.showWebVttOutput(n,r[n],i)},AblePlayer.prototype.showWebVttOutput=function(e,i,s){var a,n,r,o,l;a=t("<h3>").text(e.charAt(0).toUpperCase()+e.slice(1)),o="If you made changes, copy/paste the following content ",(n=this.getFilenameFromTracks(e,s))?(o+="to replace the original content of your "+this.getLanguageName(s)+" ",o+="<em>"+e+"</em> WebVTT file (<strong>"+n+"</strong>)."):o+="into a new "+this.getLanguageName(s)+" <em>"+e+"</em> WebVTT file.",r=t("<p>",{class:"able-vts-output-instructions"}).html(o),l=t("<textarea>").text(i),t("#able-vts-output").append(a,r,l)}}(jQuery),function(t){AblePlayer.prototype.initVimeoPlayer=function(){var e,i,s,a,n,r;return e=this,s=(i=new t.Deferred).promise(),a=this.mediaId+"_vimeo",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.vimeoDescId&&this.prefDesc?this.vimeoDescId:this.vimeoId,this.activeVimeoId=n,this.okToPlay?"true":"false",r=this.playerWidth?this.vimeoUrlHasParams?{url:n,width:this.playerWidth,controls:!1}:{id:n,width:this.playerWidth,controls:!1}:this.vimeoUrlHasParams?{url:n,controls:!1}:{id:n,controls:!1},this.vimeoPlayer=new Vimeo.Player(a,r),this.vimeoPlayer.ready().then((function(){t("#"+a).children("iframe").attr({tabindex:"-1","aria-hidden":!0}),e.vimeoPlayer.getVideoWidth().then((function(t){t&&e.vimeoPlayer.getVideoHeight().then((function(i){i&&e.resizePlayer(t,i)}))})).catch((function(t){})),e.hasPlaylist\|\|(e.$media.remove(),e.vimeoPlaybackRate=1,e.vimeoPlayer.setPlaybackRate(e.vimeoPlaybackRate).then((function(t){e.vimeoSupportsPlaybackRateChange=!0})).catch((function(t){e.vimeoSupportsPlaybackRateChange=!1})),i.resolve())})),s},AblePlayer.prototype.getVimeoPaused=function(){var e,i;return i=(e=new t.Deferred).promise(),this.vimeoPlayer.getPaused().then((function(t){e.resolve(t)})),i},AblePlayer.prototype.getVimeoEnded=function(){var e,i;return i=(e=new t.Deferred).promise(),this.vimeoPlayer.getEnded().then((function(t){e.resolve(t)})),i},AblePlayer.prototype.getVimeoState=function(){var e,i,s,a,n;return i=(e=new t.Deferred).promise(),s=[],a=this.vimeoPlayer.getPaused(),n=this.vimeoPlayer.getEnded(),s.push(a),s.push(n),a.then((function(t){e.resolve(t)})),n.then((function(t){e.resolve(t)})),t.when.apply(t,s).then((function(){e.resolve()})),i},AblePlayer.prototype.getVimeoCaptionTracks=function(){var e,i,s,a=new t.Deferred,n=a.promise();return e=this,this.vimeoPlayer.getTextTracks().then((function(t){if(t.length){for(i=0;i<t.length;i++)e.hasCaptions=!0,1===e.prefCaptions?e.captionsOn=!0:e.captionsOn=!1,s=t[i].language===e.lang,e.tracks.push({kind:t[i].kind,language:t[i].language,label:t[i].label,def:s});e.captions=e.tracks,e.hasCaptions=!0,e.setupPopups("captions"),a.resolve()}else e.hasCaptions=!1,e.usingVimeoCaptions=!1,a.resolve()})),n},AblePlayer.prototype.getVimeoPosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+youTubeId;return"120"==e?i+"/default.jpg":"320"==e\|\|"480"==e?i+"/hqdefault.jpg":"640"==e&&i+"/sddefault.jpg"},AblePlayer.prototype.getVimeoId=function(t){var e;return this.vimeoUrlHasParams=!1,"number"==typeof t?t:-1!==t.indexOf("vimeo.com")?-1!==t.indexOf("?")?(this.vimeoUrlHasParams=!0,t):(e=(t=t.trim()).lastIndexOf("/")+1,t.substring(e)):t}}(jQuery); \ No newline at end of file +/! ableplayer V4.8.0 with DOMPurify included / +/! @license DOMPurify 3.3.1 \| (c) Cure53 and other contributors \| Released under the Apache license 2.0 and Mozilla Public License 2.0 \| github.com/cure53/DOMPurify/blob/3.3.1/LICENSE / +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t\|\|self).DOMPurify=e()}(this,function(){"use strict";const{entries:t,setPrototypeOf:e,isFrozen:i,getPrototypeOf:a,getOwnPropertyDescriptor:s}=Object;let{freeze:n,seal:r,create:o}=Object,{apply:l,construct:h}="undefined"!=typeof Reflect&&Reflect;n\|\|(n=function freeze(t){return t}),r\|\|(r=function seal(t){return t}),l\|\|(l=function apply(t,e){for(var i=arguments.length,a=new Array(i>2?i-2:0),s=2;s<i;s++)a[s-2]=arguments[s];return t.apply(e,a)}),h\|\|(h=function construct(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),a=1;a<e;a++)i[a-1]=arguments[a];return new t(...i)});const p=unapply(Array.prototype.forEach),c=unapply(Array.prototype.lastIndexOf),u=unapply(Array.prototype.pop),d=unapply(Array.prototype.push),f=unapply(Array.prototype.splice),g=unapply(String.prototype.toLowerCase),m=unapply(String.prototype.toString),v=unapply(String.prototype.match),y=unapply(String.prototype.replace),b=unapply(String.prototype.indexOf),P=unapply(String.prototype.trim),T=unapply(Object.prototype.hasOwnProperty),k=unapply(RegExp.prototype.test),w=function unconstruct(t){return function(){for(var e=arguments.length,i=new Array(e),a=0;a<e;a++)i[a]=arguments[a];return h(t,i)}}(TypeError);function unapply(t){return function(e){e instanceof RegExp&&(e.lastIndex=0);for(var i=arguments.length,a=new Array(i>1?i-1:0),s=1;s<i;s++)a[s-1]=arguments[s];return l(t,e,a)}}function addToSet(t,a){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:g;e&&e(t,null);let n=a.length;for(;n--;){let e=a[n];if("string"==typeof e){const t=s(e);t!==e&&(i(a)\|\|(a[n]=t),e=t)}t[e]=!0}return t}function cleanArray(t){for(let e=0;e<t.length;e++){T(t,e)\|\|(t[e]=null)}return t}function clone(e){const i=o(null);for(const[a,s]of t(e)){T(e,a)&&(Array.isArray(s)?i[a]=cleanArray(s):s&&"object"==typeof s&&s.constructor===Object?i[a]=clone(s):i[a]=s)}return i}function lookupGetter(t,e){for(;null!==t;){const i=s(t,e);if(i){if(i.get)return unapply(i.get);if("function"==typeof i.value)return unapply(i.value)}t=a(t)}return function fallbackValue(){return null}}const C=n(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","search","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),A=n(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","enterkeyhint","exportparts","filter","font","g","glyph","glyphref","hkern","image","inputmode","line","lineargradient","marker","mask","metadata","mpath","part","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),D=n(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),S=n(["animate","color-profile","cursor","discard","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),x=n(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]),$=n(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),N=n(["#text"]),I=n(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","exportparts","face","for","headers","height","hidden","high","href","hreflang","id","inert","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","part","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","slot","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns","slot"]),M=n(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","mask-type","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),B=n(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),L=n(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),E=r(/\{\{[\w\W]\|[\w\W]\}\}/gm),O=r(/<%[\w\W]\|[\w\W]%>/gm),R=r(/\$\{[\w\W]/gm),F=r(/^data-[\-\w.\u00B7-\uFFFF]+$/),V=r(/^aria-[\-\w]+$/),z=r(/^(?:(?:(?:f\|ht)tps?\|mailto\|tel\|callto\|sms\|cid\|xmpp\|matrix):\|[^a-z]\|[a-z+.\-]+(?:[^a-z+.\-:]\|$))/i),H=r(/^(?:\w+script\|data):/i),W=r(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),_=r(/^html$/i),j=r(/^[a-z][.\w](-[.\w]+)+$/i);var q=Object.freeze({__proto__:null,ARIA_ATTR:V,ATTR_WHITESPACE:W,CUSTOM_ELEMENT:j,DATA_ATTR:F,DOCTYPE_NAME:_,ERB_EXPR:O,IS_ALLOWED_URI:z,IS_SCRIPT_OR_DATA:H,MUSTACHE_EXPR:E,TMPLIT_EXPR:R});const K=1,Y=3,U=7,G=8,X=9,Q=function getGlobal(){return"undefined"==typeof window?null:window};var J=function createDOMPurify(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Q();const DOMPurify=t=>createDOMPurify(t);if(DOMPurify.version="3.3.1",DOMPurify.removed=[],!e\|\|!e.document\|\|e.document.nodeType!==X\|\|!e.Element)return DOMPurify.isSupported=!1,DOMPurify;let{document:i}=e;const a=i,s=a.currentScript,{DocumentFragment:r,HTMLTemplateElement:l,Node:h,Element:E,NodeFilter:O,NamedNodeMap:R=e.NamedNodeMap\|\|e.MozNamedAttrMap,HTMLFormElement:F,DOMParser:V,trustedTypes:H}=e,W=E.prototype,j=lookupGetter(W,"cloneNode"),J=lookupGetter(W,"remove"),Z=lookupGetter(W,"nextSibling"),tt=lookupGetter(W,"childNodes"),et=lookupGetter(W,"parentNode");if("function"==typeof l){const t=i.createElement("template");t.content&&t.content.ownerDocument&&(i=t.content.ownerDocument)}let it,at="";const{implementation:st,createNodeIterator:nt,createDocumentFragment:rt,getElementsByTagName:ot}=i,{importNode:lt}=a;let ht={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]};DOMPurify.isSupported="function"==typeof t&&"function"==typeof et&&st&&void 0!==st.createHTMLDocument;const{MUSTACHE_EXPR:pt,ERB_EXPR:ct,TMPLIT_EXPR:ut,DATA_ATTR:dt,ARIA_ATTR:ft,IS_SCRIPT_OR_DATA:gt,ATTR_WHITESPACE:mt,CUSTOM_ELEMENT:vt}=q;let{IS_ALLOWED_URI:yt}=q,bt=null;const Pt=addToSet({},[...C,...A,...D,...x,...N]);let Tt=null;const kt=addToSet({},[...I,...M,...B,...L]);let wt=Object.seal(o(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),Ct=null,At=null;const Dt=Object.seal(o(null,{tagCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeCheck:{writable:!0,configurable:!1,enumerable:!0,value:null}}));let St=!0,xt=!0,$t=!1,Nt=!0,It=!1,Mt=!0,Bt=!1,Lt=!1,Et=!1,Ot=!1,Rt=!1,Ft=!1,Vt=!0,zt=!1,Ht=!0,Wt=!1,_t={},jt=null;const qt=addToSet({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]);let Kt=null;const Yt=addToSet({},["audio","video","img","source","image","track"]);let Ut=null;const Gt=addToSet({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),Xt="http://www.w3.org/1998/Math/MathML",Qt="http://www.w3.org/2000/svg",Jt="http://www.w3.org/1999/xhtml";let Zt=Jt,te=!1,ee=null;const ie=addToSet({},[Xt,Qt,Jt],m);let ae=addToSet({},["mi","mo","mn","ms","mtext"]),se=addToSet({},["annotation-xml"]);const ne=addToSet({},["title","style","font","a","script"]);let re=null;const oe=["application/xhtml+xml","text/html"];let le=null,he=null;const pe=i.createElement("form"),ce=function isRegexOrFunction(t){return t instanceof RegExp\|\|t instanceof Function},ue=function _parseConfig(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!he\|\|he!==t){if(t&&"object"==typeof t\|\|(t={}),t=clone(t),re=-1===oe.indexOf(t.PARSER_MEDIA_TYPE)?"text/html":t.PARSER_MEDIA_TYPE,le="application/xhtml+xml"===re?m:g,bt=T(t,"ALLOWED_TAGS")?addToSet({},t.ALLOWED_TAGS,le):Pt,Tt=T(t,"ALLOWED_ATTR")?addToSet({},t.ALLOWED_ATTR,le):kt,ee=T(t,"ALLOWED_NAMESPACES")?addToSet({},t.ALLOWED_NAMESPACES,m):ie,Ut=T(t,"ADD_URI_SAFE_ATTR")?addToSet(clone(Gt),t.ADD_URI_SAFE_ATTR,le):Gt,Kt=T(t,"ADD_DATA_URI_TAGS")?addToSet(clone(Yt),t.ADD_DATA_URI_TAGS,le):Yt,jt=T(t,"FORBID_CONTENTS")?addToSet({},t.FORBID_CONTENTS,le):qt,Ct=T(t,"FORBID_TAGS")?addToSet({},t.FORBID_TAGS,le):clone({}),At=T(t,"FORBID_ATTR")?addToSet({},t.FORBID_ATTR,le):clone({}),_t=!!T(t,"USE_PROFILES")&&t.USE_PROFILES,St=!1!==t.ALLOW_ARIA_ATTR,xt=!1!==t.ALLOW_DATA_ATTR,$t=t.ALLOW_UNKNOWN_PROTOCOLS\|\|!1,Nt=!1!==t.ALLOW_SELF_CLOSE_IN_ATTR,It=t.SAFE_FOR_TEMPLATES\|\|!1,Mt=!1!==t.SAFE_FOR_XML,Bt=t.WHOLE_DOCUMENT\|\|!1,Ot=t.RETURN_DOM\|\|!1,Rt=t.RETURN_DOM_FRAGMENT\|\|!1,Ft=t.RETURN_TRUSTED_TYPE\|\|!1,Et=t.FORCE_BODY\|\|!1,Vt=!1!==t.SANITIZE_DOM,zt=t.SANITIZE_NAMED_PROPS\|\|!1,Ht=!1!==t.KEEP_CONTENT,Wt=t.IN_PLACE\|\|!1,yt=t.ALLOWED_URI_REGEXP\|\|z,Zt=t.NAMESPACE\|\|Jt,ae=t.MATHML_TEXT_INTEGRATION_POINTS\|\|ae,se=t.HTML_INTEGRATION_POINTS\|\|se,wt=t.CUSTOM_ELEMENT_HANDLING\|\|{},t.CUSTOM_ELEMENT_HANDLING&&ce(t.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(wt.tagNameCheck=t.CUSTOM_ELEMENT_HANDLING.tagNameCheck),t.CUSTOM_ELEMENT_HANDLING&&ce(t.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(wt.attributeNameCheck=t.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),t.CUSTOM_ELEMENT_HANDLING&&"boolean"==typeof t.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements&&(wt.allowCustomizedBuiltInElements=t.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),It&&(xt=!1),Rt&&(Ot=!0),_t&&(bt=addToSet({},N),Tt=[],!0===_t.html&&(addToSet(bt,C),addToSet(Tt,I)),!0===_t.svg&&(addToSet(bt,A),addToSet(Tt,M),addToSet(Tt,L)),!0===_t.svgFilters&&(addToSet(bt,D),addToSet(Tt,M),addToSet(Tt,L)),!0===_t.mathMl&&(addToSet(bt,x),addToSet(Tt,B),addToSet(Tt,L))),t.ADD_TAGS&&("function"==typeof t.ADD_TAGS?Dt.tagCheck=t.ADD_TAGS:(bt===Pt&&(bt=clone(bt)),addToSet(bt,t.ADD_TAGS,le))),t.ADD_ATTR&&("function"==typeof t.ADD_ATTR?Dt.attributeCheck=t.ADD_ATTR:(Tt===kt&&(Tt=clone(Tt)),addToSet(Tt,t.ADD_ATTR,le))),t.ADD_URI_SAFE_ATTR&&addToSet(Ut,t.ADD_URI_SAFE_ATTR,le),t.FORBID_CONTENTS&&(jt===qt&&(jt=clone(jt)),addToSet(jt,t.FORBID_CONTENTS,le)),t.ADD_FORBID_CONTENTS&&(jt===qt&&(jt=clone(jt)),addToSet(jt,t.ADD_FORBID_CONTENTS,le)),Ht&&(bt["#text"]=!0),Bt&&addToSet(bt,["html","head","body"]),bt.table&&(addToSet(bt,["tbody"]),delete Ct.tbody),t.TRUSTED_TYPES_POLICY){if("function"!=typeof t.TRUSTED_TYPES_POLICY.createHTML)throw w('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');if("function"!=typeof t.TRUSTED_TYPES_POLICY.createScriptURL)throw w('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');it=t.TRUSTED_TYPES_POLICY,at=it.createHTML("")}else void 0===it&&(it=function _createTrustedTypesPolicy(t,e){if("object"!=typeof t\|\|"function"!=typeof t.createPolicy)return null;let i=null;const a="data-tt-policy-suffix";e&&e.hasAttribute(a)&&(i=e.getAttribute(a));const s="dompurify"+(i?"#"+i:"");try{return t.createPolicy(s,{createHTML:t=>t,createScriptURL:t=>t})}catch(t){return null}}(H,s)),null!==it&&"string"==typeof at&&(at=it.createHTML(""));n&&n(t),he=t}},de=addToSet({},[...A,...D,...S]),fe=addToSet({},[...x,...$]),ge=function _forceRemove(t){d(DOMPurify.removed,{element:t});try{et(t).removeChild(t)}catch(e){J(t)}},me=function _removeAttribute(t,e){try{d(DOMPurify.removed,{attribute:e.getAttributeNode(t),from:e})}catch(t){d(DOMPurify.removed,{attribute:null,from:e})}if(e.removeAttribute(t),"is"===t)if(Ot\|\|Rt)try{ge(e)}catch(t){}else try{e.setAttribute(t,"")}catch(t){}},ve=function _initDocument(t){let e=null,a=null;if(Et)t="<remove></remove>"+t;else{const e=v(t,/^[\r\n\t ]+/);a=e&&e[0]}"application/xhtml+xml"===re&&Zt===Jt&&(t='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+t+"</body></html>");const s=it?it.createHTML(t):t;if(Zt===Jt)try{e=(new V).parseFromString(s,re)}catch(t){}if(!e\|\|!e.documentElement){e=st.createDocument(Zt,"template",null);try{e.documentElement.innerHTML=te?at:s}catch(t){}}const n=e.body\|\|e.documentElement;return t&&a&&n.insertBefore(i.createTextNode(a),n.childNodes[0]\|\|null),Zt===Jt?ot.call(e,Bt?"html":"body")[0]:Bt?e.documentElement:n},ye=function _createNodeIterator(t){return nt.call(t.ownerDocument\|\|t,t,O.SHOW_ELEMENT\|O.SHOW_COMMENT\|O.SHOW_TEXT\|O.SHOW_PROCESSING_INSTRUCTION\|O.SHOW_CDATA_SECTION,null)},be=function _isClobbered(t){return t instanceof F&&("string"!=typeof t.nodeName\|\|"string"!=typeof t.textContent\|\|"function"!=typeof t.removeChild\|\|!(t.attributes instanceof R)\|\|"function"!=typeof t.removeAttribute\|\|"function"!=typeof t.setAttribute\|\|"string"!=typeof t.namespaceURI\|\|"function"!=typeof t.insertBefore\|\|"function"!=typeof t.hasChildNodes)},Pe=function _isNode(t){return"function"==typeof h&&t instanceof h};function _executeHooks(t,e,i){p(t,t=>{t.call(DOMPurify,e,i,he)})}const Te=function _sanitizeElements(t){let e=null;if(_executeHooks(ht.beforeSanitizeElements,t,null),be(t))return ge(t),!0;const i=le(t.nodeName);if(_executeHooks(ht.uponSanitizeElement,t,{tagName:i,allowedTags:bt}),Mt&&t.hasChildNodes()&&!Pe(t.firstElementChild)&&k(/<[/\w!]/g,t.innerHTML)&&k(/<[/\w!]/g,t.textContent))return ge(t),!0;if(t.nodeType===U)return ge(t),!0;if(Mt&&t.nodeType===G&&k(/<[/\w]/g,t.data))return ge(t),!0;if(!(Dt.tagCheck instanceof Function&&Dt.tagCheck(i))&&(!bt[i]\|\|Ct[i])){if(!Ct[i]&&we(i)){if(wt.tagNameCheck instanceof RegExp&&k(wt.tagNameCheck,i))return!1;if(wt.tagNameCheck instanceof Function&&wt.tagNameCheck(i))return!1}if(Ht&&!jt[i]){const e=et(t)\|\|t.parentNode,i=tt(t)\|\|t.childNodes;if(i&&e){for(let a=i.length-1;a>=0;--a){const s=j(i[a],!0);s.__removalCount=(t.__removalCount\|\|0)+1,e.insertBefore(s,Z(t))}}}return ge(t),!0}return t instanceof E&&!function _checkValidNamespace(t){let e=et(t);e&&e.tagName\|\|(e={namespaceURI:Zt,tagName:"template"});const i=g(t.tagName),a=g(e.tagName);return!!ee[t.namespaceURI]&&(t.namespaceURI===Qt?e.namespaceURI===Jt?"svg"===i:e.namespaceURI===Xt?"svg"===i&&("annotation-xml"===a\|\|ae[a]):Boolean(de[i]):t.namespaceURI===Xt?e.namespaceURI===Jt?"math"===i:e.namespaceURI===Qt?"math"===i&&se[a]:Boolean(fe[i]):t.namespaceURI===Jt?!(e.namespaceURI===Qt&&!se[a])&&!(e.namespaceURI===Xt&&!ae[a])&&!fe[i]&&(ne[i]\|\|!de[i]):!("application/xhtml+xml"!==re\|\|!ee[t.namespaceURI]))}(t)?(ge(t),!0):"noscript"!==i&&"noembed"!==i&&"noframes"!==i\|\|!k(/<\/no(script\|embed\|frames)/i,t.innerHTML)?(It&&t.nodeType===Y&&(e=t.textContent,p([pt,ct,ut],t=>{e=y(e,t," ")}),t.textContent!==e&&(d(DOMPurify.removed,{element:t.cloneNode()}),t.textContent=e)),_executeHooks(ht.afterSanitizeElements,t,null),!1):(ge(t),!0)},ke=function _isValidAttribute(t,e,a){if(Vt&&("id"===e\|\|"name"===e)&&(a in i\|\|a in pe))return!1;if(xt&&!At[e]&&k(dt,e));else if(St&&k(ft,e));else if(Dt.attributeCheck instanceof Function&&Dt.attributeCheck(e,t));else if(!Tt[e]\|\|At[e]){if(!(we(t)&&(wt.tagNameCheck instanceof RegExp&&k(wt.tagNameCheck,t)\|\|wt.tagNameCheck instanceof Function&&wt.tagNameCheck(t))&&(wt.attributeNameCheck instanceof RegExp&&k(wt.attributeNameCheck,e)\|\|wt.attributeNameCheck instanceof Function&&wt.attributeNameCheck(e,t))\|\|"is"===e&&wt.allowCustomizedBuiltInElements&&(wt.tagNameCheck instanceof RegExp&&k(wt.tagNameCheck,a)\|\|wt.tagNameCheck instanceof Function&&wt.tagNameCheck(a))))return!1}else if(Ut[e]);else if(k(yt,y(a,mt,"")));else if("src"!==e&&"xlink:href"!==e&&"href"!==e\|\|"script"===t\|\|0!==b(a,"data:")\|\|!Kt[t]){if($t&&!k(gt,y(a,mt,"")));else if(a)return!1}else;return!0},we=function _isBasicCustomElement(t){return"annotation-xml"!==t&&v(t,vt)},Ce=function _sanitizeAttributes(t){_executeHooks(ht.beforeSanitizeAttributes,t,null);const{attributes:e}=t;if(!e\|\|be(t))return;const i={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:Tt,forceKeepAttr:void 0};let a=e.length;for(;a--;){const s=e[a],{name:n,namespaceURI:r,value:o}=s,l=le(n),h=o;let c="value"===n?h:P(h);if(i.attrName=l,i.attrValue=c,i.keepAttr=!0,i.forceKeepAttr=void 0,_executeHooks(ht.uponSanitizeAttribute,t,i),c=i.attrValue,!zt\|\|"id"!==l&&"name"!==l\|\|(me(n,t),c="user-content-"+c),Mt&&k(/((--!?\|])>)\|<\/(style\|title\|textarea)/i,c)){me(n,t);continue}if("attributename"===l&&v(c,"href")){me(n,t);continue}if(i.forceKeepAttr)continue;if(!i.keepAttr){me(n,t);continue}if(!Nt&&k(/\/>/i,c)){me(n,t);continue}It&&p([pt,ct,ut],t=>{c=y(c,t," ")});const d=le(t.nodeName);if(ke(d,l,c)){if(it&&"object"==typeof H&&"function"==typeof H.getAttributeType)if(r);else switch(H.getAttributeType(d,l)){case"TrustedHTML":c=it.createHTML(c);break;case"TrustedScriptURL":c=it.createScriptURL(c)}if(c!==h)try{r?t.setAttributeNS(r,n,c):t.setAttribute(n,c),be(t)?ge(t):u(DOMPurify.removed)}catch(e){me(n,t)}}else me(n,t)}_executeHooks(ht.afterSanitizeAttributes,t,null)},Ae=function _sanitizeShadowDOM(t){let e=null;const i=ye(t);for(_executeHooks(ht.beforeSanitizeShadowDOM,t,null);e=i.nextNode();)_executeHooks(ht.uponSanitizeShadowNode,e,null),Te(e),Ce(e),e.content instanceof r&&_sanitizeShadowDOM(e.content);_executeHooks(ht.afterSanitizeShadowDOM,t,null)};return DOMPurify.sanitize=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=null,s=null,n=null,o=null;if(te=!t,te&&(t="\x3c!--\x3e"),"string"!=typeof t&&!Pe(t)){if("function"!=typeof t.toString)throw w("toString is not a function");if("string"!=typeof(t=t.toString()))throw w("dirty is not a string, aborting")}if(!DOMPurify.isSupported)return t;if(Lt\|\|ue(e),DOMPurify.removed=[],"string"==typeof t&&(Wt=!1),Wt){if(t.nodeName){const e=le(t.nodeName);if(!bt[e]\|\|Ct[e])throw w("root node is forbidden and cannot be sanitized in-place")}}else if(t instanceof h)i=ve("\x3c!----\x3e"),s=i.ownerDocument.importNode(t,!0),s.nodeType===K&&"BODY"===s.nodeName\|\|"HTML"===s.nodeName?i=s:i.appendChild(s);else{if(!Ot&&!It&&!Bt&&-1===t.indexOf("<"))return it&&Ft?it.createHTML(t):t;if(i=ve(t),!i)return Ot?null:Ft?at:""}i&&Et&&ge(i.firstChild);const l=ye(Wt?t:i);for(;n=l.nextNode();)Te(n),Ce(n),n.content instanceof r&&Ae(n.content);if(Wt)return t;if(Ot){if(Rt)for(o=rt.call(i.ownerDocument);i.firstChild;)o.appendChild(i.firstChild);else o=i;return(Tt.shadowroot\|\|Tt.shadowrootmode)&&(o=lt.call(a,o,!0)),o}let c=Bt?i.outerHTML:i.innerHTML;return Bt&&bt["!doctype"]&&i.ownerDocument&&i.ownerDocument.doctype&&i.ownerDocument.doctype.name&&k(_,i.ownerDocument.doctype.name)&&(c="<!DOCTYPE "+i.ownerDocument.doctype.name+">\n"+c),It&&p([pt,ct,ut],t=>{c=y(c,t," ")}),it&&Ft?it.createHTML(c):c},DOMPurify.setConfig=function(){ue(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),Lt=!0},DOMPurify.clearConfig=function(){he=null,Lt=!1},DOMPurify.isValidAttribute=function(t,e,i){he\|\|ue({});const a=le(t),s=le(e);return ke(a,s,i)},DOMPurify.addHook=function(t,e){"function"==typeof e&&d(ht[t],e)},DOMPurify.removeHook=function(t,e){if(void 0!==e){const i=c(ht[t],e);return-1===i?void 0:f(ht[t],i,1)[0]}return u(ht[t])},DOMPurify.removeHooks=function(t){ht[t]=[]},DOMPurify.removeAllHooks=function(){ht={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}},DOMPurify}();return J});var AblePlayerInstances=[];!function(t){t(function(){t("video, audio").each(function(e,i){void 0!==t(i).data("able-player")&&AblePlayerInstances.push(new AblePlayer(t(this),t(i)))})}),window.onYouTubeIframeAPIReady=function(){AblePlayer.youTubeIframeAPIReady=!0,t("body").trigger("youTubeIframeAPIReady",[])},t(window).on("keydown",function(t){1===AblePlayer.nextIndex&&AblePlayer.lastCreated.onPlayerKeyPress(t)}),window.AblePlayer=function(e){var i=this;if(AblePlayer.lastCreated=this,this.media=e,0!==t(e).length){void 0!==t(e).attr("autoplay")?(this.autoplay=!0,this.okToPlay=!0):(this.autoplay=!1,this.okToPlay=!1),this.loop=void 0!==t(e).attr("loop"),this.playsInline=void 0!==t(e).attr("playsinline")?"1":"0",this.hasPoster=!(!t(e).attr("poster")&&!t(e).data("poster")),this.audioPoster=t(e).data("poster"),this.audioPosterAlt=t(e).data("poster-alt"),this.width=t(e).attr("width")??0,this.height=t(e).attr("height")??0;var a=t(e).data("start-time"),s=!("number"!=typeof a&&("string"!=typeof a\|\|""===value.trim()\|\|isNaN(value)\|\|!isFinite(Number(value))));if(this.startTime=void 0!==a&&s?a:0,this.debug=void 0!==t(e).data("debug")&&!1!==t(e).data("debug"),void 0!==t(e).data("root-path")?this.rootPath=t(e).data("root-path").replace(/\/?$/,"/"):this.rootPath=this.getRootPath(),this.defaultVolume=7,void 0!==t(e).data("volume")&&""!==t(e).data("volume")){var n=t(e).data("volume");n>=0&&n<=10&&(this.defaultVolume=n)}if(this.volume=this.defaultVolume,void 0!==t(e).data("use-chapters-button")&&!1===t(e).data("use-chapters-button")?this.useChaptersButton=!1:this.useChaptersButton=!0,void 0!==t(e).data("descriptions-audible")&&!1===t(e).data("descriptions-audible")\|\|void 0!==t(e).data("description-audible")&&!1===t(e).data("description-audible")?this.readDescriptionsAloud=!1:this.readDescriptionsAloud=!0,this.descVoices=[],this.descReader="screenreader"==t(e).data("desc-reader")?"screenreader":"browser",this.defaultStateCaptions="off"==t(e).data("state-captions")?0:1,this.defaultStateDescriptions="on"==t(e).data("state-descriptions")?1:0,this.defaultDescPause="off"==t(e).data("desc-pause-default")?0:1,void 0!==t(e).data("heading-level")&&""!==t(e).data("heading-level")){var r=t(e).data("heading-level");/^[0-6]$/.test(r)&&(this.playerHeadingLevel=r)}var o=t(e).data("transcript-div");void 0!==o&&""!==o&&null!==document.getElementById(o)?this.transcriptDivLocation=o:this.transcriptDivLocation=null;var l=t(e).data("include-transcript");this.hideTranscriptButton=void 0!==l&&!1===l,this.transcriptType=null,void 0!==t(e).data("transcript-src")?(this.transcriptSrc=t(e).data("transcript-src"),this.transcriptSrcHasRequiredParts()&&(this.transcriptType="manual")):t(e).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length>0&&(this.transcriptType=this.transcriptDivLocation?"external":"popup"),this.lyricsMode=void 0!==t(e).data("lyrics-mode")&&!1!==t(e).data("lyrics-mode"),void 0!==t(e).data("transcript-title")&&""!==t(e).data("transcript-title")&&(this.transcriptTitle=t(e).data("transcript-title"));var h=t(e).data("sign-div");void 0!==h&&""!==h&&null!==document.getElementById(h)?this.$signDivLocation=t("#"+h):this.$signDivLocation=null,this.defaultCaptionsPosition="overlay"===t(e).data("captions-position")?"overlay":"below";var p=t(e).data("chapters-div");void 0!==p&&""!==p&&(this.chaptersDivLocation=p),void 0!==t(e).data("chapters-title")&&(this.chaptersTitle=t(e).data("chapters-title"));var c=t(e).data("chapters-default");this.defaultChapter=void 0!==c&&""!==c?c:null,this.speedIcons="arrows"===t(e).data("speed-icons")?"arrows":"animals";var u=t(e).data("seekbar-scope");this.seekbarScope="chapter"===u\|\|"chapters"===u?"chapter":"video";var d=t(e).data("youtube-id");if(void 0!==d&&""!==d&&(this.youTubeId=this.getYouTubeId(d),!this.hasPoster)){let i=this.getYouTubePosterUrl(this.youTubeId,"640");t(e).attr("poster",i)}var f=t(e).data("youtube-desc-id");void 0!==f&&""!==f&&(this.youTubeDescId=this.getYouTubeId(f));var g=t(e).data("youtube-sign-src");void 0!==g&&""!==g&&(this.youTubeSignId=this.getYouTubeId(g));var m=t(e).data("youtube-nocookie");this.youTubeNoCookie=!(void 0===m\|\|!m);var v=t(e).data("vimeo-id");if(void 0!==v&&""!==v&&(this.vimeoId=this.getVimeoId(v),!this.hasPoster)){let a=i.getVimeoPosterUrl(this.vimeoId,"1200");t(e).attr("poster",a)}var y=t(e).data("vimeo-desc-id");if(void 0!==y&&""!==y&&(this.vimeoDescId=this.getVimeoId(y)),this.skin="legacy"==t(e).data("skin")?"legacy":"2020",void 0!==t(e).data("width")?this.playerWidth=parseInt(t(e).data("width")):t(e)[0].getAttribute("width")?this.playerWidth=parseInt(t(e)[0].getAttribute("width")):this.playerWidth=null,this.iconType="font",this.forceIconType=!1,void 0!==t(e).data("icon-type")&&""!==t(e).data("icon-type")){var b=t(e).data("icon-type");"font"!==b&&"image"!==b&&"svg"!==b\|\|(this.iconType=b,this.forceIconType=!0)}var P=t(e).data("allow-fullscreen");if(this.allowFullscreen=void 0===P\|\|!1!==P,this.clickedFullscreenButton=!1,this.restoringAfterFullscreen=!1,this.defaultSeekInterval=10,this.useFixedSeekInterval=!1,void 0!==t(e).data("seek-interval")&&""!==t(e).data("seek-interval")){var T=t(e).data("seek-interval");/^[1-9][0-9]$/.test(T)&&(this.seekInterval=T,this.useFixedSeekInterval=!0)}var k=t(e).data("show-now-playing");this.showNowPlaying=void 0===k\|\|!1!==k,void 0!==t(e).data("use-ttml")?(this.useTtml=!0,this.convert=require("xml-js")):this.useTtml=!1;var w=t(e).data("test-fallback");this.testFallback=void 0!==w&&!1!==w&&("2"==w?2:1);var C=t(e).data("lang");this.lang=void 0!==C&&""!==C?C.toLowerCase():null;var A=t(e).data("meta-type");void 0!==A&&""!==A&&(this.metaType=A);var D=t(e).data("meta-div");void 0!==D&&""!==D&&(this.metaDiv=D);var S=t(e).data("search-div");if(void 0!==S&&""!==S){this.searchDiv=S;var x=t(e).data("search");void 0!==x&&""!==x&&(this.searchString=x);var $=t(e).data("search-lang");this.searchLang=void 0!==$&&""!==$?$:null;var N=t(e).data("search-ignore-caps");this.searchIgnoreCaps=void 0!==N&&!1!==N}void 0!==t(e).data("hide-controls")&&!1!==t(e).data("hide-controls")?(this.hideControls=!0,this.hideControlsOriginal=!0):(this.hideControls=!1,this.hideControlsOriginal=!1),void 0!==t(e).data("steno-mode")&&!1!==t(e).data("steno-mode")?(this.stenoMode=!0,void 0!==t(e).data("steno-iframe-id")&&""!==t(e).data("steno-iframe-id")?(this.stenoFrameId=t(e).data("steno-iframe-id"),this.$stenoFrame=t("#"+this.stenoFrameId),this.$stenoFrame.length\|\|(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoMode=!1,this.stenoFrameId=null,this.$stenoFrame=null),this.setDefaults(),this.ableIndex=AblePlayer.nextIndex,AblePlayer.nextIndex+=1,this.title=t(e).attr("title"),this.tt={},async function fetchTranslations(t){try{await t.getTranslationText(),t.setup()}catch{t.provideFallback()}}(i=this)}else this.provideFallback()},AblePlayer.nextIndex=0,AblePlayer.prototype.setup=function(){var t=this;this.initializing=!0,this.reinitialize().then(function(){t.player?t.setupInstance().then(function(){t.setupInstancePlaylist(),t.hasPlaylist\|\|t.recreatePlayer().then(function(){t.initializing=!1,t.playerCreated=!0})}):t.provideFallback()})},AblePlayer.getActiveDOMElement=function(){for(var t=document.activeElement;t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t},AblePlayer.localGetElementById=function(e,i){return e.getRootNode?t(e.getRootNode().querySelector("#"+i)):t(document.getElementById(i))},AblePlayer.youTubeIframeAPIReady=!1,AblePlayer.loadingYouTubeIframeAPI=!1}(jQuery),function(t){AblePlayer.prototype.setDefaults=function(){this.playerCreated=!1,this.playing=!1,this.paused=!0,this.clickedPlay=!1,this.fullscreen=!1,this.swappingSrc=!1,this.initializing=!1,this.cueingPlaylistItems=!1,this.buttonWithFocus=null,this.speechEnabled=null,this.setIconColor(),this.setButtonImages()},AblePlayer.prototype.getRootPath=function(){var t,e,i,a,s,n;for(t=document.getElementsByTagName("script"),e=0;e<t.length;e++)if(-1!==(i=t[e].src).substring(i.lastIndexOf("/")).indexOf("ableplayer")){a=i.split("?")[0];break}return n=(s=a.split("/").slice(0,-1).join("/")).lastIndexOf("/"),s.substring(0,n)+"/"},AblePlayer.prototype.setIconColor=function(){var e,i,a,s,n;for(e=["controller","toolbar"],i=0;i<e.length;i++)"controller"==e[i]?a=t("<div>",{class:"able-controller"}).hide():"toolbar"===e[i]&&(a=t("<div>",{class:"able-window-toolbar"}).hide()),t("body").append(a),n=.2126(s=a.css("background-color").replace(/[^\d,]/g,"").split(","))[0]+.7152s[1]+.0722s[2]<125?"white":"black","controller"===e[i]?this.iconColor=n:"toolbar"===e[i]&&(this.toolbarIconColor=n),a.remove()},AblePlayer.prototype.setButtonImages=function(){this.imgPath=this.rootPath+"button-icons/"+this.iconColor+"/",this.playButtonImg=this.imgPath+"play.png",this.pauseButtonImg=this.imgPath+"pause.png",this.restartButtonImg=this.imgPath+"restart.png",this.rewindButtonImg=this.imgPath+"rewind.png",this.forwardButtonImg=this.imgPath+"forward.png",this.previousButtonImg=this.imgPath+"previous.png",this.nextButtonImg=this.imgPath+"next.png","arrows"===this.speedIcons?(this.fasterButtonImg=this.imgPath+"slower.png",this.slowerButtonImg=this.imgPath+"faster.png"):"animals"===this.speedIcons&&(this.fasterButtonImg=this.imgPath+"rabbit.png",this.slowerButtonImg=this.imgPath+"turtle.png"),this.captionsButtonImg=this.imgPath+"captions.png",this.chaptersButtonImg=this.imgPath+"chapters.png",this.signButtonImg=this.imgPath+"sign.png",this.transcriptButtonImg=this.imgPath+"transcript.png",this.descriptionsButtonImg=this.imgPath+"descriptions.png",this.fullscreenExpandButtonImg=this.imgPath+"fullscreen-expand.png",this.fullscreenCollapseButtonImg=this.imgPath+"fullscreen-collapse.png",this.prefsButtonImg=this.imgPath+"preferences.png",this.helpButtonImg=this.imgPath+"help.png"},AblePlayer.prototype.getIconData=function(t){var e=Array();switch(t){case"play":e[0]="0 0 16 20",e[1]="M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z",e[2]="icon-play",e[3]=this.playButtonImg;break;case"pause":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-pause",e[3]=this.pauseButtonImg;break;case"restart":e[0]="0 0 20 20",e[1]="M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z",e[2]="icon-restart",e[3]=this.restartButtonImg;break;case"rewind":e[0]="0 0 20 20",e[1]="M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z",e[2]="icon-rewind",e[3]=this.rewindButtonImg;break;case"forward":e[0]="0 0 20 20",e[1]="M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z",e[2]="icon-forward",e[3]=this.forwardButtonImg;break;case"previous":e[0]="0 0 20 20",e[1]="M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z",e[2]="icon-previous",e[3]=this.previousButtonImg;break;case"next":e[0]="0 0 20 20",e[1]="M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z",e[2]="icon-next",e[3]=this.nextButtonImg;break;case"slower":e[0]="0 0 11 20",e[1]="M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z",e[2]="icon-slower",e[3]=this.slowerButtonImg;break;case"faster":e[0]="0 0 11 20",e[1]="M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-faster",e[3]=this.fasterButtonImg;break;case"turtle":e[0]="0 0 20 20",e[1]="M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z",e[2]="icon-turtle",e[3]=this.slowerButtonImg;break;case"rabbit":e[0]="0 0 20 20",e[1]="M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z",e[2]="icon-rabbit",e[3]=this.fasterButtonImg;break;case"ellipsis":e[0]="0 0 20 20",e[1]="M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z",e[2]="icon-ellipsis",e[3]=!1;break;case"pipe":e[0]="0 0 20 20",e[1]="M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z",e[2]="icon-pipe",e[3]=!1;break;case"captions":e[0]="0 0 20 20",e[1]="M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z",e[2]="icon-captions",e[3]=this.captionsButtonImg;break;case"descriptions":e[0]="0 0 20 20",e[1]="M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z",e[2]="icon-descriptions",e[3]=this.descriptionsButtonImg;break;case"sign":e[0]="0 0 20 20",e[1]="M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z",e[2]="icon-sign",e[3]=this.signButtonImg;break;case"mute":case"volume-mute":e[0]="0 0 20 20",e[1]="M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z",e[2]="icon-volume-mute",e[3]=this.imgPath+"volume-mute.png";break;case"volume-soft":e[0]="0 0 20 20",e[1]="M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-soft",e[3]=this.imgPath+"volume-soft.png";break;case"volume-medium":e[0]="0 0 20 20",e[1]="M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-medium",e[3]=this.imgPath+"volume-medium.png";break;case"volume-loud":e[0]="0 0 21 20",e[1]="M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-loud",e[3]=this.imgPath+"volume-loud.png";break;case"chapters":e[0]="0 0 20 20",e[1]="M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z",e[2]="icon-chapters",e[3]=this.chaptersButtonImg;break;case"transcript":e[0]="0 0 20 20",e[1]="M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z",e[2]="icon-transcript",e[3]=this.transcriptButtonImg;break;case"preferences":e[0]="0 0 20 20",e[1]="M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z",e[2]="icon-preferences",e[3]=this.prefsButtonImg;break;case"close":e[0]="0 0 16 20",e[1]="M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z",e[2]="icon-close",e[3]=null;break;case"fullscreen-expand":e[0]="0 0 20 20",e[1]="M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z",e[2]="icon-fullscreen-expand",e[3]=this.fullscreenExpandButtonImg;break;case"fullscreen-collapse":e[0]="0 0 20 20",e[1]="M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-fullscreen-collapse",e[3]=this.fullscreenCollapseButtonImg}return e},AblePlayer.prototype.reinitialize=function(){var e,i;if(i=(e=new this.defer).promise(),this.startedPlaying=!1,this.autoScrollTranscript=!0,this.$media=t(this.media).first(),this.media=this.$media[0],this.$media.is("audio"))this.mediaType="audio";else{if(!this.$media.is("video"))return this.provideFallback(),e.reject(),i;this.mediaType="video"}return this.$sources=this.$media.find("source"),this.player=this.getPlayer(),this.player\|\|this.provideFallback(),this.setIconType(),e.resolve(),i},AblePlayer.prototype.setPlayerSize=function(t,e){"audio"!==this.mediaType&&t>0&&e>0&&(this.playerWidth=t,this.playerHeight=e,this.aspectRatio=e/t)},AblePlayer.prototype.setIconType=function(){if(this.forceIconType)return!1;this.iconType="svg"},AblePlayer.prototype.setupInstance=function(){var t=new this.defer,e=t.promise();return this.$media.attr("id")?this.mediaId=this.$media.attr("id"):(this.mediaId="ableMediaId_"+this.ableIndex,this.$media.attr("id",this.mediaId)),t.resolve(),e},AblePlayer.prototype.setupInstancePlaylist=function(){var e=this;if(this.hasPlaylist=!1,t(".able-playlist").each(function(){if(t(this).data("player")===e.mediaId){e.hasPlaylist=!0,e.$playlist=t(this).find("li"),t(this).find("li[data-youtube-id]").each(function(){var i=DOMPurify.sanitize(t(this).attr("data-youtube-id")),a=e.getYouTubePosterUrl(i,"120"),s=t("<img>",{src:a,alt:""});t(this).find("button").prepend(s)}),t(this).find("li[data-vimeo-id]").each(function(){var i=t(this).attr("data-vimeo-id"),a=e.getVimeoPosterUrl(i,"120"),s=t("<img>",{src:a,alt:""});t(this).find("button").prepend(s)}),t(this).find("li span").attr("aria-hidden","true"),e.playlistIndex=0;var i=t(this).data("embedded");e.playlistEmbed=void 0!==i&&!1!==i}}),this.hasPlaylist&&this.loop&&this.media.removeAttribute("loop"),this.hasPlaylist&&this.playlistEmbed){var i=this.$playlist.parent();this.$playlistDom=i.clone(),i.remove()}this.hasPlaylist&&0===this.$sources.length&&(this.cuePlaylistItem(0),this.$sources=this.$media.find("source"))},AblePlayer.prototype.recreatePlayer=function(){var e,i,a,s,n;if(this.player)return i=(e=new this.defer).promise(),a=this,this.playerDeleted=!1,this.recreatingPlayer=!0,this.playerCreated\|\|(this.loadCurrentPreferences(),this.injectPlayerCode(),this.resizePlayer(this.media.videoWidth,this.media.videoHeight)),this.getSampleDescriptionText(),this.initSignLanguage(),this.initPlayer().then(function(){a.getTracks().then(function(){a.initDescription().then(function(){a.setupTracks().then(function(){a.hasClosedDesc&&(!a.$descDiv\|\|a.$descDiv&&!t.contains(a.$ableDiv[0],a.$descDiv[0]))&&a.injectTextDescriptionArea(),a.initSpeech("init"),a.setupTranscript().then(function(){a.initStenoFrame().then(function(){a.stenoMode&&a.$stenoFrame&&(a.stenoFrameContents=a.$stenoFrame.contents()),a.getMediaTimes().then(function(t){for(a.duration=t.duration,a.elapsed=t.elapsed,void 0===a.volume&&(a.volume=a.defaultVolume),a.volume&&a.setVolume(a.volume),a.transcriptType&&(a.addTranscriptAreaEvents(),a.updateTranscript()),a.captions.length&&a.initDefaultCaption(),a.setMediaAttributes(),a.addControls(),a.addEventListeners(),s=a.getPreferencesGroups(),n=0;n<s.length;n++)a.injectPrefsForm(s[n]);a.setupPopups(),a.updateCaption(),a.injectVTS(),a.populateChaptersDiv(),a.showSearchResults(),"html5"===a.player&&(a.loadingMedia\|\|(a.$media[0].load(),a.loadingMedia=!0)),setTimeout(function(){a.refreshControls(),e.resolve()},100)})})})})})})},function(){a.provideFallback()}),i;console.log("Can't create player; no appropriate player type detected.")},AblePlayer.prototype.initPlayer=function(){var t,e=this;"html5"===this.player?t=this.initHtml5Player():"youtube"===this.player?t=this.initYouTubePlayer():"vimeo"===this.player&&(t=this.initVimeoPlayer());var i=new this.defer,a=i.promise();return t.then(function(){e.useFixedSeekInterval?(e.seekInterval\|\|(e.seekInterval=e.defaultSeekInterval),e.seekIntervalCalculated=!0):e.setSeekInterval(),i.resolve()}).finally(function(){i.reject()}),a},AblePlayer.prototype.initStenoFrame=function(){var t,e;return e=(t=new this.defer).promise(),this.stenoMode&&this.$stenoFrame?(this.$stenoFrame[0].contentWindow,"complete"==document.readyState?t.resolve():this.$stenoFrame.on("load",function(){t.resolve()})):t.resolve(),e},AblePlayer.prototype.setSeekInterval=function(){var t;this.seekInterval=this.defaultSeekInterval,void 0===(t=this.useChapterTimes?this.chapterDuration:this.duration)\|\|t<1?this.seekIntervalCalculated=!1:(this.seekInterval=t<=20?5:t<=30?6:t<=40?8:t<=100?10:Math.round(t/10,0),this.seekIntervalCalculated=!0)},AblePlayer.prototype.initDefaultCaption=function(){var t,e;if((t=this.captions).length>0){for(e=0;e<t.length;e++)!0===t[e].def&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);if(void 0===this.captionLang)for(e=0;e<t.length;e++)t[e].language===this.lang&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);void 0===this.captionLang&&(this.captionLang=t[0].language,this.selectedCaptions=t[0]),void 0!==this.captionLang&&(this.$transcriptLanguageSelect&&this.$transcriptLanguageSelect.find("option[lang="+this.captionLang+"]").prop("selected",!0),this.syncTrackLanguages("init",this.captionLang)),"vimeo"===this.player&&(this.usingVimeoCaptions&&1==this.prefCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(t){}).catch(function(t){t.name}):this.vimeoPlayer.disableTextTrack().then(function(){}).catch(function(t){}))}},AblePlayer.prototype.initHtml5Player=function(){var t=new this.defer,e=t.promise();return t.resolve(),e},AblePlayer.prototype.setMediaAttributes=function(){this.$media.attr("tabindex",-1);var t=this.$media.get(0).textTracks;if(t)for(var e=0;e<t.length;)t[e].mode="disabled",e+=1},AblePlayer.prototype.getPlayer=function(){return this.testFallback?null:this.youTubeId?"video"!==this.mediaType?null:"youtube":this.vimeoId?"video"!==this.mediaType?null:"vimeo":this.media.canPlayType?"html5":null}}(jQuery),function(t){AblePlayer.prototype.setPrefs=function(t){"undefined"!=typeof Cookies?Cookies.set("Able-Player",JSON.stringify(t),{expires:90,sameSite:"strict"}):localStorage.setItem("Able-Player",JSON.stringify(t))},AblePlayer.prototype.getPref=function(){var t,e={preferences:{},sign:{},transcript:{},voices:[]};try{t="undefined"!=typeof Cookies?JSON.parse(Cookies.get("Able-Player")):JSON.parse(localStorage.getItem("Able-Player"))}catch(i){this.setPrefs(e),t=e}return t\|\|e},AblePlayer.prototype.updatePreferences=function(t){var e,i,a,s,n,r,o,l;if(e=this.getPref(),"transcript"===t\|\|"sign"===t)"transcript"===t?(a=(i=this.$transcriptArea).position(),void 0===e.transcript&&(e.transcript={}),e.transcript.position=i.css("position"),e.transcript.zindex=i.css("z-index"),e.transcript.top=a.top,e.transcript.left=a.left,e.transcript.width=i.width(),e.transcript.height=i.height()):"sign"===t&&(a=(i=this.$signWindow).position(),void 0===e.sign&&(e.sign={}),e.sign.position=i.css("position"),e.sign.zindex=i.css("z-index"),e.sign.top=a.top,e.sign.left=a.left,e.sign.width=i.width(),e.sign.height=i.height());else if("voice"===t){void 0===e.voices&&(e.voices=[]),o=!1;for(var h=0;h<e.voices.length;h++)e.voices[h].lang===this.prefDescVoiceLang&&(o=!0,e.voices[h].name=this.prefDescVoice);o\|\|(l={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(l))}else for(s=this.getAvailablePreferences(),n=0;n<s.length;n++)(r=s[n].name)==t&&(e.preferences[r]=this[r]);this.setPrefs(e)},AblePlayer.prototype.getPreferencesGroups=function(){return this.usingYouTubeCaptions?["captions","descriptions","keyboard"]:this.usingVimeoCaptions?["descriptions","keyboard"]:["captions","descriptions","keyboard","transcript"]},AblePlayer.prototype.getAvailablePreferences=function(){var t=[];return t.push({name:"prefAltKey",label:this.translate("prefAltKey","Alt"),group:"keyboard",default:1}),t.push({name:"prefCtrlKey",label:this.translate("prefCtrlKey","Control"),group:"keyboard",default:1}),t.push({name:"prefShiftKey",label:this.translate("prefShiftKey","Shift"),group:"keyboard",default:0}),t.push({name:"prefNoKeyShortcuts",label:this.translate("prefNoKeyShortcuts","Disable Keyboard Shortcuts"),group:"keyboard",default:0}),t.push({name:"prefTranscript",label:null,group:"transcript",default:0}),t.push({name:"prefHighlight",label:this.translate("prefHighlight","Highlight transcript as media plays"),group:"transcript",default:1}),t.push({name:"prefAutoScrollTranscript",label:null,group:"transcript",default:1}),t.push({name:"prefTabbable",label:this.translate("prefTabbable","Keyboard-enable transcript"),group:"transcript",default:0}),t.push({name:"prefCaptions",label:null,group:"captions",default:this.defaultStateCaptions}),this.usingYouTubeCaptions\|\|("video"===this.mediaType&&t.push({name:"prefCaptionsPosition",label:this.translate("prefCaptionsPosition","Position"),group:"captions",default:this.defaultCaptionsPosition}),t.push({name:"prefCaptionsFont",label:this.translate("prefCaptionsFont","Font"),group:"captions",default:"sans-serif"})),t.push({name:"prefCaptionsSize",label:this.translate("prefCaptionsSize","Font size"),group:"captions",default:"100%"}),this.usingYouTubeCaptions\|\|(t.push({name:"prefCaptionsColor",label:this.translate("prefCaptionsColor","Text Color"),group:"captions",default:"white"}),t.push({name:"prefCaptionsBGColor",label:this.translate("prefCaptionsBGColor","Background"),group:"captions",default:"black"}),t.push({name:"prefCaptionsOpacity",label:this.translate("prefCaptionsOpacity","Opacity"),group:"captions",default:"100%"})),"video"===this.mediaType&&(t.push({name:"prefDesc",label:null,group:"descriptions",default:this.defaultStateDescriptions}),t.push({name:"prefDescMethod",label:null,group:"descriptions",default:"video"}),t.push({name:"prefDescVoice",label:this.translate("prefDescVoice","Voice"),group:"descriptions",default:null}),t.push({name:"prefDescPitch",label:this.translate("prefDescPitch","Pitch"),group:"descriptions",default:1}),t.push({name:"prefDescRate",label:this.translate("prefDescRate","Rate"),group:"descriptions",default:1}),t.push({name:"prefDescVolume",label:this.translate("volume","Volume"),group:"descriptions",default:1}),"video"!==this.descMethod&&t.push({name:"prefDescPause",label:this.translate("prefDescPause","Automatically pause video when description starts"),group:"descriptions",default:this.defaultDescPause}),t.push({name:"prefDescVisible",label:this.translate("prefDescVisible","Make description visible"),group:"descriptions",default:0})),t.push({name:"prefSign",label:null,group:null,default:0}),t},AblePlayer.prototype.loadCurrentPreferences=function(){for(var t=this.getAvailablePreferences(),e=this.getPref(),i=0;i<t.length;i++){var a=t[i].name,s=t[i].default;void 0!==e.preferences[a]?this[a]=e.preferences[a]:(e.preferences[a]=s,this[a]=s)}void 0!==e.voices&&(this.prefVoices=e.voices),this.setPrefs(e)},AblePlayer.prototype.injectPrefsForm=function(e){var i,a,s,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P,T,k,w,C,A,D,S,x,$,N,I,M,B,L,E,O,R,F,V,z,H,W;i=this,a=this.getAvailablePreferences();var _="able-prefs-form-"+e;if((s=t("<div>",{class:"able-prefs-form "})).addClass(_),"captions"==e)n=this.translate("prefTitleCaptions","Captions Preferences");else if("descriptions"==e){n=this.translate("prefTitleDescriptions","Audio Description Preferences");var j=t("<p>",{text:this.translate("prefIntroDescription1","This media player supports audio description in two ways: ")}),q=t("<ul>"),K=t("<li>",{text:this.translate("prefDescFormatOption1","alternative described version of video")}),Y=t("<li>",{text:this.translate("prefDescFormatOption2","text-based description, announced by screen reader")});q.append(K,Y),this.hasOpenDesc&&this.hasClosedDesc?(I=this.translate("prefIntroDescription2","The current video has ")+" ",I+="<strong>"+this.translate("prefDescFormatOption1b","an alternative described version")+"</strong>",I+=" <em>"+this.translate("and","and")+"</em> <strong>"+this.translate("prefDescFormatOption2b","text-based description, announced by screen reader")+"</strong>."):this.hasOpenDesc?(I=this.translate("prefIntroDescription2","The current video has "),I+=" <strong>"+this.translate("prefDescFormatOption1b","an alternative described version")+"</strong>."):this.hasClosedDesc?(I=this.translate("prefIntroDescription2","The current video has "),I+=" <strong>"+this.translate("prefDescFormatOption2b","text-based description, announced by screen reader")+"</strong>."):I=this.translate("prefIntroDescriptionNone","The current video has no audio description in either format."),o=t("<p>",{html:I}),l=this.translate("prefIntroDescription3","Use the following form to set your preferences related to text-based audio description."),(this.hasOpenDesc\|\|this.hasClosedDesc)&&(l+=" "+this.translate("prefIntroDescription4","After you save your settings, audio description can be toggled on/off using the Description button.")),h=t("<p>",{text:l}),s.append(j,q,o,h)}else"keyboard"==e?(n=this.translate("prefTitleKeyboard","Keyboard Preferences"),r=this.translate("prefIntroKeyboard1","The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list)."),r+=" "+this.translate("prefIntroKeyboard2","Modifier keys (Shift, Alt, and Control) can be assigned below."),r+=" "+this.translate("prefIntroKeyboard3","NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you."),j=t("<p>",{text:r}),s.append(j)):"transcript"==e&&(n=this.translate("prefTitleTranscript","Transcript Preferences"));for(u=t("<div>").attr("role","group"),d="able-prefs-"+e,m=(f=this.mediaId+"-prefs-"+e)+"-legend",u.addClass(d).attr("id",f),"keyboard"===e?((g=t("<h2>"+this.translate("prefHeadingKeyboard1","Modifier keys used for shortcuts")+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(g)):"descriptions"===e&&((g=t("<h2>"+this.translate("prefHeadingTextDescription","Text-based audio description")+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(g)),p=0;p<a.length;p++)if(a[p].group==e&&a[p].label){if(b="able-"+(v=a[p].name),P=this.mediaId+"_"+v,y=t("<div>").addClass(b),"captions"===e){for(T=t('<label for="'+P+'"> '+a[p].label+"</label>"),k=t("<select>",{name:v,id:P}),"prefCaptions"!==v&&"prefCaptionsStyle"!==v&&k.on("change",function(){x=t(this).attr("name"),i.stylizeCaptions(i.$sampleCapsDiv,x)}),w=this.getCaptionsOptions(v),c=0;c<w.length;c++)"prefCaptionsPosition"===v?"overlay"===(A=w[c])?S=this.translate("captionsPositionOverlay","Overlay"):"below"===A&&(A=w[c],S=this.translate("captionsPositionBelow","Below video")):"prefCaptionsFont"===v\|\|"prefCaptionsColor"===v\|\|"prefCaptionsBGColor"===v?(A=w[c][0],S=w[c][1]):"prefCaptionsOpacity"===v?(A=w[c],S=w[c],S+="0%"===A?" ("+this.translate("transparent","transparent")+")":" ("+this.translate("solid","solid")+")"):(A=w[c],S=w[c]),C=t("<option>",{value:A,text:S}),this[v]===A&&C.prop("selected",!0),k.append(C);y.append(T,k)}else if("descriptions"===e){if(T=t('<label for="'+P+'"> '+a[p].label+"</label>"),"prefDescPause"===v\|\|"prefDescVisible"===v)y.addClass("able-prefs-checkbox"),k=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&k.prop("checked",!0),y.append(k,T);else if(this.synth){if(y.addClass("able-prefs-select"),k=t("<select>",{name:v,id:P}),"prefDescVoice"===v&&this.descVoices.length){for(M=this.getPrefDescVoice(),c=0;c<this.descVoices.length;c++)A=this.descVoices[c].name,D=this.descVoices[c].lang.substring(0,2).toLowerCase(),S=A+" ("+this.descVoices[c].lang+")",C=t("<option>",{value:A,"data-lang":D,text:S}),M===A&&C.prop("selected",!0),k.append(C);this.$voiceSelectField=k}else if("prefDescPitch"==v?w=[0,.5,1,1.5,2]:"prefDescRate"==v?w=[.7,.8,.9,1,1.1,1.2,1.5,2,2.5,3]:"prefDescVolume"==v&&(w=[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]),void 0!==w)for(c=0;c<w.length;c++)A=w[c],S=this.makePrefsValueReadable(v,A),C=t("<option>",{value:A,text:S}),this[v]==A&&C.prop("selected",!0),k.append(C),y.append(T,k);k.on("change",function(){i.announceDescriptionText("sample",i.currentSampleText)}),y.append(T,k)}}else T=t('<label for="'+P+'"> '+a[p].label+"</label>"),k=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&k.prop("checked",!0),"keyboard"===e&&k.on("change",function(){"prefAltKey"===(x=t(this).attr("name"))?($=".able-modkey-alt",N=i.tt.prefAltKey+" + "):"prefCtrlKey"===x?($=".able-modkey-ctrl",N=i.tt.prefCtrlKey+" + "):"prefShiftKey"===x&&($=".able-modkey-shift",N=i.tt.prefShiftKey+" + "),"prefNoKeyShortcuts"!==x?t(this).is(":checked")?t($).text(N):t($).text(""):t(this).is(":checked")?t(".able-modkey-item").addClass("hidden"):t(".able-modkey-item").removeClass("hidden")}),y.append(k,T);("prefDescVoice"!==v\|\|this.descVoices.length)&&u.append(y)}if(s.append(u),"captions"===e)this.usingYouTubeCaptions\|\|(this.$sampleCapsDiv=t("<div>",{class:"able-captions-sample"}).text(this.translate("sampleCaptionText","Sample caption text")),s.append(this.$sampleCapsDiv),this.stylizeCaptions(this.$sampleCapsDiv));else if("descriptions"===e)this.synth&&(this.$sampleDescDiv=t("<div>",{class:"able-desc-sample"}).text(this.translate("sampleDescriptionText","Adjust settings to hear this sample text.")),s.append(this.$sampleDescDiv),this.currentSampleText=this.translate("sampleDescriptionText","Adjust settings to hear this sample text."));else if("keyboard"===e){let e=1===this.prefNoKeyShortcuts?"able-modkey-item hidden":"able-modkey-item";for(B=t("<h2>",{text:this.translate("prefHeadingKeyboard2","Current keyboard shortcuts")}),L=t("<ul>"),E=[],O=[],p=0;p<this.controls.length;p++)"play"===this.controls[p]?(E.push(this.translate("play","Play")+"/"+this.translate("pause","Pause")),O.push("p</span> <em>"+this.translate("or","or")+'</em> <span class="able-help-modifiers"> '+this.translate("spacebar","spacebar"))):"restart"===this.controls[p]?(E.push(this.translate("restart","Restart")),O.push("s")):"previous"===this.controls[p]?(E.push(this.translate("prevTrack","Previous track")),O.push("b")):"next"===this.controls[p]?(E.push(this.translate("nextTrack","Next track")),O.push("n")):"rewind"===this.controls[p]?(E.push(this.translate("rewind","Rewind")),O.push("r")):"forward"===this.controls[p]?(E.push(this.translate("forward","Forward")),O.push("f")):"volume"===this.controls[p]?(E.push(this.translate("volume","Volume")),O.push("v</span> <em>"+this.translate("or","or")+'</em> <span class="able-modkey">1-9'),E.push(this.translate("mute","Mute")+"/"+this.translate("unmute","Unmute")),O.push("m")):"captions"===this.controls[p]?(this.captions.length>1?E.push(this.translate("captions","Captions")):this.captionsOn?E.push(this.translate("hideCaptions","Hide captions")):E.push(this.translate("showCaptions","Show captions")),O.push("c")):"descriptions"===this.controls[p]?(this.descOn?E.push(this.translate("turnOffDescriptions","Turn off descriptions")):E.push(this.translate("turnOnDescriptions","Turn on descriptions")),O.push("d")):"prefs"===this.controls[p]&&(E.push(this.translate("preferences","Preferences")),O.push("e"));for(p=0;p<O.length;p++)R='<span class="able-modkey-alt">',1===this.prefAltKey&&(R+=this.translate("prefAltKey","Alt")+" + "),R+="</span>",R+='<span class="able-modkey-ctrl">',1===this.prefCtrlKey&&(R+=this.translate("prefCtrlKey","Control")+" + "),R+="</span>",R+='<span class="able-modkey-shift">',1===this.prefShiftKey&&(R+=this.translate("prefShiftKey","Shift")+" + "),R+="</span>",R+='<span class="able-modkey">'+O[p]+"</span>",R+=" = "+E[p],F=t("<li>",{class:e,html:R}),L.append(F);R='<span class="able-modkey">'+this.translate("escapeKey","Escape")+"</span>",R+=" = "+this.translate("escapeKeyFunction","Close current dialog or popup menu"),F=t("<li>",{html:R}),L.append(F),s.append(B,L)}t("body").append(s),V=new AccessibleDialog(s,this.$prefsButton,n,i.tt.closeButtonLabel),W=t('<div class="able-prefs-buttons"></div>'),z=t('<button class="modal-button">'+this.translate("save","Save")+"</button>"),H=t('<button class="modal-button">'+this.translate("cancel","Cancel")+"</button>"),z.on("click",function(){V.hide(),i.savePrefsFromForm()}),H.on("click",function(){V.hide(),i.resetPrefsForm()}),W.append(z,H),s.append(W),"captions"!==e&&"transcript"!==e\|\|u.attr("aria-labelledby",V.titleH1.attr("id")),"captions"===e?this.captionPrefsDialog=V:"descriptions"===e?this.descPrefsDialog=V:"keyboard"===e?this.keyboardPrefsDialog=V:"transcript"===e&&(this.transcriptPrefsDialog=V),t("div.able-prefs-form button.modalCloseButton").on("click",function(){i.resetPrefsForm()}),t("div.able-prefs-form").on("keydown",function(t){"Escape"===t.key&&i.resetPrefsForm()})},AblePlayer.prototype.getPrefDescVoice=function(){var t,e,i;if(t=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,(e=this.getPref()).voices)for(i=0;i<e.voices.length;i++)if(e.voices[i].lang===t)return e.voices[i].name;return null},AblePlayer.prototype.rebuildDescPrefsForm=function(){var e,i,a,s;for(this.$voiceSelectField=t("#"+this.mediaId+"_prefDescVoice"),this.$voiceSelectField.empty(),e=0;e<this.descVoices.length;e++)a=(i=this.descVoices[e].name)+" ("+this.descVoices[e].lang+")",s=t("<option>",{value:i,"data-lang":this.descVoices[e].lang.substring(0,2).toLowerCase(),text:a}),this.prefDescVoice==i&&s.prop("selected",!0),this.$voiceSelectField.append(s)},AblePlayer.prototype.makePrefsValueReadable=function(t,e){if("prefDescPitch"===t){if(0===e)return this.translate("prefDescPitch1","Very low");if(.5===e)return this.translate("prefDescPitch2","Low");if(1===e)return this.translate("prefDescPitch3","Default");if(1.5===e)return this.translate("prefDescPitch4","High");if(2===e)return this.translate("prefDescPitch5","Very high")}else if("prefDescRate"===t){if(.7===e)return 1;if(.8===e)return 2;if(.9===e)return 3;if(1===e)return 4;if(1.1===e)return 5;if(1.2===e)return 6;if(1.5===e)return 7;if(2===e)return 8;if(2.5===e)return 9;if(3===e)return 10}else if("prefDescVolume"===t)return 10e;return e},AblePlayer.prototype.resetPrefsForm=function(){var e,i,a,s;for(e=this.getPref(),i=this.getAvailablePreferences(),a=0;a<i.length;a++)-1!==(s=i[a].name).indexOf("Captions")&&"prefCaptions"!==s?t('select[name="'+s+'"]').val(e.preferences[s]):1===this[s]?t('input[name="'+s+'"]').prop("checked",!0):t('input[name="'+s+'"]').prop("checked",!1);this.stylizeCaptions(this.$sampleCapsDiv)},AblePlayer.prototype.savePrefsFromForm=function(){var e,i,a,s,n,r,o,l,h,p,c,u;o=0,h=0,p=!1,e=this.getPref(),i=this.getAvailablePreferences();for(var d=0;d<i.length;d++)if(i[d].label)if(a=i[d].name,s=this.mediaId+"_"+a,"prefDescVoice"===a){void 0===e.voices&&(e.voices=[]),n=this.mediaId+"_prefDescVoice",this.prefDescVoice=t("select#"+n).find(":selected").val(),this.prefDescVoiceLang=t("select#"+n).find(":selected").attr("data-lang"),l=!1;for(var f=0;f<e.voices.length;f++)e.voices[f].lang===this.prefDescVoiceLang&&(l=!0,e.voices[f].name=this.prefDescVoice);l\|\|(r={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(r)),o++}else"prefDescMethod"==a?(this.prefDescMethod="video",this.prefDescMethod!==e.preferences.prefDescMethod&&(e.preferences.prefDescMethod=this.prefDescMethod,o++)):-1!==a.indexOf("Captions")&&"prefCaptions"!==a?(u=t('select[id="'+s+'"]').val(),e.preferences[a]!==u&&(e.preferences[a]=u,this[a]=u,o++,h++),"prefCaptionsSize"===a&&(p=!0,c=u)):-1!==a.indexOf("Desc")&&"prefDescPause"!==a&&"prefDescVisible"!==a?(u=t('select[id="'+s+'"]').val(),e.preferences[a]!==u&&(e.preferences[a]=u,this[a]=u,o++)):t('input[id="'+s+'"]').is(":checked")?(e.preferences[a]=1,1===this[a]\|\|(this[a]=1,o++)):(e.preferences[a]=0,1===this[a]&&(this[a]=0,o++));if(o>0?(this.setPrefs(e),this.showAlert(this.translate("prefSuccess","Your changes have been saved."))):this.showAlert(this.translate("prefNoChange","You didn't make any changes")),"youtube"===this.player&&void 0!==this.usingYouTubeCaptions&&this.usingYouTubeCaptions&&p&&this.youTubePlayer.setOption("captions","fontSize",this.translatePrefs("size",c,"youtube")),AblePlayerInstances.length>1)for(d=0;d<AblePlayerInstances.length;d++)AblePlayerInstances[d].updatePlayerPrefs(),AblePlayerInstances[d].loadCurrentPreferences(),AblePlayerInstances[d].resetPrefsForm(),h>0&&(AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$captionsDiv),void 0!==AblePlayerInstances[d].$descDiv&&AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$descDiv));else this.updatePlayerPrefs(),h>0&&(this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv))},AblePlayer.prototype.updatePlayerPrefs=function(){this.$transcriptDiv&&(1===this.prefTabbable?this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"):this.$transcriptDiv.find("span.able-transcript-seekpoint").removeAttr("tabindex"),0===this.prefHighlight&&this.$transcriptDiv.find("span").removeClass("able-highlight")),this.updateCaption(),this.initDescription()},AblePlayer.prototype.usingModifierKeys=function(t){return!(1===this.prefAltKey&&!t.altKey)&&(!(1===this.prefCtrlKey&&!t.ctrlKey)&&!(1===this.prefShiftKey&&!t.shiftKey))}}(jQuery),function(t){function actList(t,e){for(var i=[],a=0;a<e.length;a++)i.push(act(t,e[a]));return i}function act(t,e){var i=e(t);if(null!==t.error)throw t.error;return i}function updatePosition(t,e){for(var i=0;i<e.length;i++)"\n"===e[i]?(t.column=1,t.line+=1):t.column+=1}function cut(t,e){var i=t.text.substring(0,e);return updatePosition(t,i),t.text=t.text.substring(e),i}function cutLine(t,e){var i,a=t.text.indexOf("\n");return-1===a?(updatePosition(t,i=t.text),t.text=""):(i=t.text.substring(0,a),updatePosition(t,i+"\n"),t.text=t.text.substring(a+1)),i}function peekLine(t){var e=t.text.indexOf("\n");return-1===e?t.text:t.text.substring(0,e)}function parseFileBody(t){actList(t,[eatOptionalBOM,eatSignature]);var e=t.text[0];" "===e\|\|"\t"===e\|\|"\n"===e?actList(t,[eatUntilEOLInclusive,parseMetadataHeaders,eatAtLeast1EmptyLines,parseCuesAndComments]):t.error="WEBVTT signature not followed by whitespace."}function parseMetadataHeaders(t){for(;;){var e=peekLine(t);if(-1!==e.indexOf("--\x3e"))return;if(0===e.length)return;var i=act(t,getMetadataKeyValue);t.metadata[i[0]]=i[1],act(t,eatUntilEOLInclusive)}}function nextSpaceOrNewline(t){var e=[],i=t.indexOf(" ");i>=0&&e.push(i);var a=t.indexOf("\t");a>=0&&e.push(a);var s=t.indexOf("\n");return s>=0&&e.push(s),Math.min.apply(null,e)}function getMetadataKeyValue(t){var e=t.text.indexOf("\n"),i=cut(t,e),a=i.indexOf(":");return-1===a?void(t.error="Missing colon."):[i.substring(0,a),i.substring(a+1)]}function getSettingsKeyValue(t){var e=cut(t,nextSpaceOrNewline(t.text)),i=e.indexOf(":");return-1===i?void(t.error="Missing colon."):[e.substring(0,i),e.substring(i+1)]}function parseCuesAndComments(t){for(;;){var e=peekLine(t);if(0!==e.indexOf("NOTE")\|\|4!==e.length&&" "!==e[4]&&"\t"!==e[4])if(0===e.trim().length&&t.text.length>0)act(t,eatEmptyLines);else{if(!(e.trim().length>0))return;act(t,parseCue)}else actList(t,[eatComment,eatEmptyLines])}}function parseCue(t){var e,i=peekLine(t);if(-1===i.indexOf("--\x3e")&&(e=cutLine(t),-1===(i=peekLine(t)).indexOf("--\x3e")))return"Invalid WebVTT file: "+t.src+"\n","Line: "+t.line+", ","Column: "+t.column+"\n",void(console.warn\|\|console.log);var a=actList(t,[getTiming,eatAtLeast1SpacesOrTabs,eatArrow,eatAtLeast1SpacesOrTabs,getTiming]),s=a[0],n=a[4];if(s>=n)t.error="Start time is not sooner than end time.";else{act(t,eatSpacesOrTabs);var r=act(t,getCueSettings);cut(t,1);var o=act(t,getCuePayload);void 0===e&&(e=t.cues.length+1),t.cues.push({id:e,start:s,end:n,settings:r,components:o})}}function getCueSettings(t){for(var e={};t.text.length>0&&"\n"!==t.text[0];){var i=act(t,getSettingsKeyValue);e[i[0]]=i[1],act(t,eatSpacesOrTabs)}return e}function getCuePayload(e){for(var i={type:"internal",tagName:"",value:"",classes:[],annotation:"",parent:null,children:[],language:""},a=i,s=[];e.text.length>0;){var n=peekLine(e);if(-1!==n.indexOf("--\x3e")\|\|/^\s+$/.test(n))break;if(e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]){cut(e,2);break}var r=getCueToken(e);if("string"===r.type)a.children.push(r);else if("startTag"===r.type)r.type=r.tagName,r.parent=a,-1!==t.inArray(r.tagName,["i","b","u","ruby"])\|\|"rt"===r.tagName&&"ruby"===a.tagName?(s.length>0&&(a.language=s[s.length-1]),a.children.push(r),a=r):"c"===r.tagName\|\|"v"===r.tagName?(r.value=r.annotation,s.length>0&&(a.language=s[s.length-1]),a.children.push(r),a=r):"lang"===r.tagName&&(s.push(r.annotation),s.length>0&&(a.language=s[s.length-1]),a.children.push(r),a=r);else if("endTag"===r.type)r.tagName===a.type&&-1!==t.inArray(r.tagName,["c","i","b","u","ruby","rt","v"])?a=a.parent:"lang"===r.tagName&&"lang"===a.type?(a=a.parent,s.pop()):"ruby"===r.tagName&&"rt"===a.type&&(a=a.parent.parent);else if("timestampTag"===r.type){var o={text:r.value,error:null,metadata:{},cues:[],line:1,column:1};try{var l=act(o,getTiming);0===o.text.length&&(r.value=l,a.push(r))}catch(t){}}}return i}function getCueToken(t){for(var e="data",i=[],a="",s={type:"",tagName:"",value:"",classes:[],annotation:"",children:[]};;){var n;if(n=t.text.length>=2&&"\n"===t.text[0]&&"\n"===t.text[1]?"":t.text.length>0?t.text[0]:"","data"===e)if("&"===n)a="&",e="escape";else if("<"===n){if(0!==i.length)return s.type="string",s.value=i.join(""),s;e="tag"}else{if(""===n)return{type:"string",value:i.join("")};i.push(n)}else if("escape"===e)if("&"===n)i.push(a),a="&";else if(n.match(/[0-9a-z]/))a+=n;else if(";"===n)"&"===a?i.push("&"):"<"===a?i.push("<"):">"===a?i.push(">"):"&lrm"===a?i.push("‎"):"&rlm"===a?i.push("‏"):" "===a?i.push(" "):(i.push(a),i.push(";")),e="data";else{if("<"===n\|\|""===n)return i.push(a),s.type="string",s.value=i.join(""),s;if("\t"===n\|\|"\n"===n\|\|"\f"===n\|\|" "===n)return i.push(a),s.type="string",s.value=i.join(""),s;i.push(a),e="data"}else if("tag"===e)if("\t"===n\|\|"\n"===n\|\|"\f"===n\|\|" "===n)e="startTagAnnotation";else if("."===n)e="startTagClass";else if("/"===n)e="endTag";else if(n.match("[0-9]"))e="timestampTag",i.push(n);else{if(">"===n){cut(t,1);break}if(""===n)return s.tagName="",s.type="startTag",s;i.push(n),e="startTag"}else if("startTag"===e)if("\t"===n\|\|"\f"===n\|\|" "===n)e="startTagAnnotation";else if("\n"===n)a=n,e="startTagAnnotation";else if("."===n)e="startTagClass";else{if(">"===n)return cut(t,1),s.tagName=i.join(""),s.type="startTag",s;if(""===n)return s.tagName=i.join(""),s.type="startTag",s;i.push(n)}else if("startTagClass"===e)if("\t"===n\|\|"\f"===n\|\|" "===n)s.classes.push(a),a="",e="startTagAnnotation";else if("\n"===n)s.classes.push(a),a=n,e="startTagAnnotation";else if("."===n)s.classes.push(a),a="";else{if(">"===n)return cut(t,1),s.classes.push(a),s.type="startTag",s.tagName=i.join(""),s;if(""===n)return s.classes.push(a),s.type="startTag",s.tagName=i.join(""),s;a+="c"}else if("startTagAnnotation"===e){if(">"===n)return cut(t,1),a=a.trim().replace(/ +/," "),s.type="startTag",s.tagName=i.join(""),s.annotation=a,s;if(""===n)return a=a.trim().replace(/ +/," "),s.type="startTag",s.tagName=i.join(""),s.annotation=a,s;a+=n}else if("endTag"===e){if(">"===n)return cut(t,1),s.type="endTag",s.tagName=i.join(""),s;if(""===n)return s.type="endTag",s.tagName=i.join(""),s;i.push(n)}else{if("timestampTag"!==e)throw"Unknown tokenState "+e;if(">"===n)return cut(t,1),s.type="timestampTag",s.name=i.join(""),s;if(""===n)return s.type="timestampTag",s.name=i.join(""),s;i.push(n)}cut(t,1)}}function eatComment(t){if(-1===cutLine(t).indexOf("--\x3e"))for(;;){var e=peekLine(t);if(0===e.trim().length)return;if(-1!==e.indexOf("--\x3e"))return void(t.error="Invalid syntax: --\x3e in comment.");cutLine(t)}else t.error="Invalid syntax: --\x3e in NOTE line."}function eatOptionalBOM(t){"\ufeff"===t.text[0]&&cut(t,1)}function eatSignature(t){"WEBVTT"===t.text.substring(0,6)?cut(t,6):t.error="Invalid signature."}function eatArrow(t){t.text.length<3\|\|"--\x3e"!==t.text.substring(0,3)?t.error="Missing --\x3e":cut(t,3)}function eatSpacesOrTabs(t){for(;"\t"===t.text[0]\|\|" "===t.text[0];)cut(t,1)}function eatAtLeast1SpacesOrTabs(t){for(var e=0;"\t"===t.text[0]\|\|" "===t.text[0];)cut(t,1),e+=1;0===e&&(t.error="Missing space.")}function eatUntilEOLInclusive(t){var e=t.text.indexOf("\n");-1===e?t.error="Missing EOL.":cut(t,e+1)}function eatEmptyLines(t){for(;t.text.length>0;){if(0!==peekLine(t).trim().length)break;cutLine(t)}}function eatAtLeast1EmptyLines(t){for(var e=0;t.text.length>0;){if(0!==peekLine(t).trim().length)break;cutLine(t),e+=1}0===e&&(t.error="Missing empty line.")}function getTiming(t){var e=nextSpaceOrNewline(t.text);if(-1!==e){var i=cut(t,e),a=/((\d+):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(i);if(a){var s=0,n=a[2],r=a[4];if(r){if(parseInt(r,10)>59)return void(t.error="Invalid minute range");n&&(s+=3600parseInt(n,10)),s+=60parseInt(r,10);var o=a[5];if(parseInt(o,10)>59)return void(t.error="Invalid second range");s+=parseInt(o,10),s+=parseInt(a[6],10)/1e3}else s+=parseInt(a[7],10),s+=parseInt(a[8],10)/1e3;return s}t.error="Unable to parse timestamp"}else t.error("Missing timing.")}AblePlayer.prototype.parseWebVTT=function(t){let e=t.src,i=t.text;i=i.replace(/(\r\n\|\n\|\r)/g,"\n");var a={src:e,text:i,error:null,metadata:{},cues:[],line:1,column:1};try{act(a,parseFileBody)}catch(t){console.warn\|\|console.log}return a}}(jQuery),function(t){AblePlayer.prototype.injectPlayerCode=function(){var e;this.$mediaContainer=this.$media.wrap('<div class="able-media-container"></div>').parent(),this.$ableDiv=this.$mediaContainer.wrap('<div class="able"></div>').parent(),this.$ableWrapper=this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(),this.$ableWrapper.addClass("able-skin-"+this.skin),"video"===this.mediaType&&("image"==this.iconType\|\|"youtube"===this.player&&!this.hasPoster\|\|this.injectBigPlayButton()),e=t("<div>"),"video"===this.mediaType?e.addClass("able-vidcap-container"):"audio"===this.mediaType&&(e.addClass("able-audcap-container"),e.addClass("captions-off")),this.injectPlayerControlArea(),this.$captionsContainer=this.$mediaContainer.wrap(e).parent(),this.injectAlert(this.$ableDiv),this.injectPlaylist(),this.injectAudioPoster(),this.injectOffscreenHeading()},AblePlayer.prototype.injectAudioPoster=function(){if("audio"===this.mediaType&&this.hasPoster){audioPoster=DOMPurify.sanitize(this.audioPoster),audioPosterAlt=DOMPurify.sanitize(this.audioPosterAlt);let t=document.createElement("img");t.setAttribute("src",audioPoster),t.setAttribute("alt",audioPosterAlt),this.$audioWrapper=this.$playerDiv.wrap('<div class="able-audio-wrapper">').parent(),this.$audioWrapper.prepend(t)}},AblePlayer.prototype.injectOffscreenHeading=function(){var e;"0"==this.playerHeadingLevel\|\|(void 0===this.playerHeadingLevel&&(this.playerHeadingLevel=this.getNextHeadingLevel(this.$ableDiv)),e="h"+this.playerHeadingLevel.toString(),this.$headingDiv=t("<"+e+">"),this.$ableDiv.prepend(this.$headingDiv),this.$headingDiv.addClass("able-offscreen"),this.$headingDiv.text(this.translate("playerHeading","Media player")))},AblePlayer.prototype.injectBigPlayButton=function(){var e=this;this.$bigPlayButton=t("<button>",{class:"able-big-play-button","aria-hidden":!1,"aria-label":this.translate("play","Play"),type:"button",tabindex:0}),this.getIcon(this.$bigPlayButton,"play"),this.$bigPlayButton.on("click",function(){e.handlePlay()}),this.$mediaContainer.append(this.$bigPlayButton)},AblePlayer.prototype.injectPlayerControlArea=function(){this.$playerDiv=t("<div>",{class:"able-player",role:"region","aria-label":"audio"===this.mediaType?this.translate("audioPlayer","audio player"):this.translate("videoPlayer","video player")}),this.$playerDiv.addClass("able-"+this.mediaType),this.hasPlaylist&&this.showNowPlaying&&(this.$nowPlayingDiv=t("<div>",{class:"able-now-playing","aria-live":"assertive","aria-atomic":"true"})),this.$controllerDiv=t("<div>",{class:"able-controller"}),this.$controllerDiv.addClass("able-"+this.iconColor+"-controls"),this.$statusBarDiv=t("<div>",{class:"able-status-bar"}),this.$timer=t("<span>",{class:"able-timer"}),this.$elapsedTimeContainer=t("<span>",{class:"able-elapsedTime",text:"0:00"}),this.$durationContainer=t("<span>",{class:"able-duration"}),this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer),this.$speed=t("<span>",{class:"able-speed","aria-live":"assertive","aria-atomic":"true"}).text(this.translate("speed","Speed")+": 1x"),this.$status=t("<span>",{class:"able-status","aria-live":"polite"}),this.$statusBarDiv.append(this.$timer,this.$speed,this.$status),this.showNowPlaying?this.$playerDiv.append(this.$nowPlayingDiv,this.$controllerDiv,this.$statusBarDiv):this.$playerDiv.append(this.$controllerDiv,this.$statusBarDiv),"video"===this.mediaType?this.$ableDiv.append(this.$playerDiv):this.$ableDiv.prepend(this.$playerDiv)},AblePlayer.prototype.injectTextDescriptionArea=function(){this.$descDiv=t("<div>",{class:"able-descriptions"}),this.$descDiv.attr({"aria-live":"assertive","aria-atomic":"true"}),this.$descDiv.hide(),this.$ableDiv.append(this.$descDiv)},AblePlayer.prototype.getDefaultWidth=function(t){let e=window.innerWidth;return"transcript"===t?e<=450?e:450:"sign"===t?e<=400?e:400:void 0},AblePlayer.prototype.rePositionDraggableWindow=function(t){let e,i;e=this.getPref(),i="transcript"===t?this.$transcriptArea:this.$signWindow,"transcript"===t&&i?(void 0!==e.transcript&&(this.prevTranscriptPosition=e.transcript),i.css({top:0,left:0})):"sign"===t&&i&&(void 0!==e.sign&&(this.prevSignPosition=e.sign),i.css({top:0,right:0,left:"auto"}))},AblePlayer.prototype.positionDraggableWindow=function(e,i){var a,s,n,r,o,l;a=this.getPref(),(n="transcript"===e?this.$transcriptArea:this.$signWindow)&&("transcript"===e?(void 0!==a.transcript&&(s=a.transcript),this.prevTranscriptPosition&&(s=this.prevTranscriptPosition,this.prevTranscriptPosition=!1)):"sign"===e&&(void 0!==a.sign&&(s=a.sign),this.prevSignPosition&&(s=this.prevSignPosition,this.prevSignPosition=!1)),void 0===s\|\|t.isEmptyObject(s)?(r=this.getOptimumPosition(e,i),void 0===i&&(i=this.getDefaultWidth(e)),n.css({position:r[0],width:i,"z-index":r[3]}),"absolute"===r[0]&&n.css({top:r[1]+"px",left:r[2]+"px"})):(n.css({position:s.position,width:s.width,"z-index":s.zindex}),"absolute"===s.position&&(n.css({top:s.top,left:s.left}),topPosition=n.offset().top,leftPosition=n.offset().left,o=window.innerWidth,l=n.width(),topPosition<0&&n.css({top:s.top-topPosition}),leftPosition<0&&!this.restoringAfterFullscreen&&n.css({left:s.left-leftPosition}),o-leftPosition<30&&n.css({left:o-l})),this.updateZIndex(e)))},AblePlayer.prototype.getOptimumPosition=function(e,i){var a,s,n,r,o;return void 0===i&&(i=this.getDefaultWidth(e)),a=[],s=this.$ableDiv.width(),n=this.$ableDiv.offset().left,r=t(window).width(),o=0,"transcript"===e?void 0!==this.$signWindow&&this.$signWindow.is(":visible")&&(o=this.$signWindow.width()+5):"sign"===e&&void 0!==this.$transcriptArea&&this.$transcriptArea.is(":visible")&&(o=this.$transcriptArea.width()+5),i<r-(n+s+5+o)?(a[0]="absolute",a[1]=0,a[2]=s+o+5):i+5<n?(a[0]="absolute",a[1]=0,a[2]=n-i-5):a[0]="relative",a},AblePlayer.prototype.injectAlert=function(e){this.$alertBox=t('<div role="alert"></div>'),this.$alertBox.addClass("able-alert"),this.$alertBox.hide(),t("<span></span>").appendTo(this.$alertBox);var i=t('<button type="button"></button>');i.attr("aria-label",this.translate("dismissButton","Dismiss")),i.text("×"),i.appendTo(this.$alertBox),i.on("click",function(e){t(this).parent("div").hide()}),this.$alertBox.appendTo(e),this.$srAlertBox\|\|(this.$srAlertBox=t('<div role="alert"></div>'),this.$srAlertBox.addClass("able-screenreader-alert"),this.$srAlertBox.appendTo(e))},AblePlayer.prototype.injectPlaylist=function(){if(!0===this.playlistEmbed){var t=this.$playlistDom.clone();t.insertBefore(this.$statusBarDiv),this.$playlist=t.find("li")}},AblePlayer.prototype.createPopup=function(e,i){var a,s,n,r,o,l,h,p,c,u,d,f,g,m;if(a=this,s=t("<ul>",{id:this.mediaId+"-"+e+"-menu",class:"able-popup",role:"menu"}).hide(),"captions"===e&&s.addClass("able-popup-captions"),"prefs"===e)if(this.prefCats.length>1){for(n=0;n<this.prefCats.length;n++)o=this.prefCats[n],g=!!(a.hasDescTracks\|\|a.hasOpenDesc\|\|a.hasClosedDesc),m=null!==a.transcriptType,"descriptions"===o&&!g\|\|"transcript"===o&&!m\|\|(r=t("<li></li>",{role:"menuitem",tabindex:"-1"}),"captions"===o?r.text(this.translate("prefMenuCaptions","Captions")):"descriptions"===o?r.text(this.translate("prefMenuDescriptions","Descriptions")):"keyboard"===o?r.text(this.translate("prefMenuKeyboard","Keyboard")):"transcript"===o&&r.text(this.translate("prefMenuTranscript","Transcript")),r.on("click",function(){l=t(this).text(),a.showingPrefsDialog=!0,a.setFullscreen(!1),l===a.tt.prefMenuCaptions?a.captionPrefsDialog.show():l===a.tt.prefMenuDescriptions?a.descPrefsDialog.show():l===a.tt.prefMenuKeyboard?a.keyboardPrefsDialog.show():l===a.tt.prefMenuTranscript&&a.transcriptPrefsDialog.show(),a.closePopups(),a.showingPrefsDialog=!1}),s.append(r));this.$prefsButton.attr("data-prefs-popup","menu")}else 1==this.prefCats.length&&this.$prefsButton.attr("data-prefs-popup",this.prefCats[0]);else if("captions"===e\|\|"chapters"===e){for(h=!1,n=0;n<i.length;n++)p=i[n],("captions"!==e\|\|"html5"!==this.player\|\|void 0!==p.cues)&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1",lang:p.language}),p.def&&1==this.prefCaptions?(r.attr("aria-checked","true"),h=!0):r.attr("aria-checked","false"),"captions"==e?(r.text(p.label),r.on("click",this.getCaptionClickFunction(p))):"chapters"==e&&(r.text(this.flattenCueForCaption(p)+" - "+this.formatSecondsAsColonTime(p.start)),r.on("click",this.getChapterClickFunction(p.start))),s.append(r));"captions"===e&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1"}).text(this.translate("captionsOff","Captions off")),0===this.prefCaptions?(r.attr("aria-checked","true"),h=!0):r.attr("aria-checked","false"),r.on("click",this.getCaptionOffFunction()),s.append(r))}else if("transcript-window"===e\|\|"sign-window"===e)for((c=[]).push({name:"move",label:this.translate("windowMove","Move")}),c.push({name:"resize",label:this.translate("windowResize","Resize")}),c.push({name:"close",label:this.translate("windowClose","Close")}),n=0;n<c.length;n++)(r=t("<li></li>",{role:"menuitem",tabindex:"-1","data-choice":c[n].name})).text(c[n].label),r.on("click",function(i){if(i.stopPropagation(),void 0!==i.button&&0!==i.button)return!1;a.windowMenuClickRegistered\|\|a.finishingDrag\|\|(a.windowMenuClickRegistered=!0,a.handleMenuChoice(e.substring(0,e.indexOf("-")),t(this).attr("data-choice"),i))}),s.append(r);return"captions"!==e\|\|h?"chapters"===e&&(s.find('li:contains("'+this.defaultChapter+'")')?s.find('li:contains("'+this.defaultChapter+'")').attr("aria-checked","true").addClass("able-focus"):s.find("li").first().attr("aria-checked","true").addClass("able-focus")):s.find("li[lang="+this.captionLang+"]")?s.find("li[lang="+this.captionLang+"]").attr("aria-checked","true"):s.find("li").last().attr("aria-checked","true"),s.on("keydown",function(e){(u=t(this).find("li:focus")).is(":first-child")?(d=t(this).find("li").last(),f=u.next()):u.is(":last-child")?(d=u.prev(),f=t(this).find("li").first()):(d=u.prev(),f=u.next()),"Tab"===e.key?e.shiftKey?(u.removeClass("able-focus"),d.trigger("focus").addClass("able-focus")):(u.removeClass("able-focus"),f.trigger("focus").addClass("able-focus")):"ArrowDown"===e.key\|\|"ArrowRight"===e.key?(u.removeClass("able-focus"),f.trigger("focus").addClass("able-focus")):"ArrowUp"==e.key\|\|"ArrowLeft"===e.key?(u.removeClass("able-focus"),d.trigger("focus").addClass("able-focus")):" "===e.key\|\|"Enter"===e.key?u.trigger("click"):"Escape"===e.key&&(u.removeClass("able-focus"),a.closePopups(),e.stopPropagation),e.preventDefault()}),this.$controllerDiv.append(s),s},AblePlayer.prototype.closePopups=function(){var t=this;this.chaptersPopup&&this.chaptersPopup.is(":visible")&&(this.chaptersPopup.hide(),this.$chaptersButton.attr("aria-expanded","false").trigger("focus")),this.captionsPopup&&this.captionsPopup.is(":visible")&&(this.captionsPopup.hide(),this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)),this.prefsPopup&&this.prefsPopup.is(":visible")&&!this.hidingPopup&&(this.hidingPopup=!0,this.prefsPopup.hide(),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$prefsButton.attr("aria-expanded","false"),this.showingPrefsDialog\|\|this.waitThenFocus(t.$prefsButton),setTimeout(function(){t.hidingPopup=!1},100)),this.$volumeSlider&&this.$volumeSlider.is(":visible")&&(this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").trigger("focus")),this.$transcriptPopup&&this.$transcriptPopup.is(":visible")&&(this.hidingPopup=!0,this.$transcriptPopup.hide(),this.$transcriptPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$transcriptPopupButton.attr("aria-expanded","false").trigger("focus"),setTimeout(function(){t.hidingPopup=!1},100)),this.$signPopup&&this.$signPopup.is(":visible")&&(this.$signPopup.hide(),this.$signPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$signPopupButton.attr("aria-expanded","false").trigger("focus"))},AblePlayer.prototype.setupPopups=function(t){var e,i;if(e=[],void 0===t&&e.push("prefs"),"captions"!==t&&void 0!==t\|\|this.captions.length>0&&e.push("captions"),"chapters"!==t&&void 0!==t\|\|this.chapters.length>0&&this.useChaptersButton&&e.push("chapters"),"transcript-window"===t&&"popup"===this.transcriptType&&e.push("transcript-window"),"sign-window"===t&&this.hasSignLanguage&&e.push("sign-window"),e.length>0){0;for(var a=0;a<e.length;a++){var s=e[a];if("prefs"==s)this.prefsPopup=this.createPopup("prefs");else if("captions"==s)void 0!==this.captionsPopup&&this.captionsPopup\|\|(this.captionsPopup=this.createPopup("captions",this.captions));else if("chapters"==s)i=this.selectedChapters?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[],void 0!==this.chaptersPopup&&this.chaptersPopup\|\|(this.chaptersPopup=this.createPopup("chapters",i));else{if("transcript-window"==s)return this.createPopup("transcript-window");if("sign-window"==s)return this.createPopup("sign-window")}}}},AblePlayer.prototype.provideFallback=function(){var e,i;if(!this.usingFallback){if(this.usingFallback=!0,this.testFallback\|\|(this.testFallback=1),void 0===this.$media&&(this.$media=t(this.media)),this.$media.attr("id")?this.mediaId=this.$media.attr("id"):this.mediaId="media"+Math.floor(1e9Math.random()).toString(),this.hasFallback=!1,this.$media.children().length)for(e=0;e<this.$media.children().length&&!this.hasFallback;)"SOURCE"!==this.$media.children()[e].tagName&&"TRACK"!==this.$media.children()[e].tagName&&(this.hasFallback=!0),e++;if(this.hasFallback\|\|(i=t("<p>").text("Media player unavailable."),this.$media.append(i)),this.$media.attr("width")&&this.$media.css("width",this.$media.attr("width")+"px"),this.$media.attr("height")&&this.$media.css("height",this.$media.attr("height")+"px"),this.$media.removeAttr("data-able-player"),this.$media.prop("controls",!0),2==this.testFallback){if(t(this.$media).replaceWith(t('<foobar id="foobar-'+this.mediaId+'">')),this.$newFallbackElement=t("#foobar-"+this.mediaId),this.$media.children().length)for(e=this.$media.children().length-1;e>=0;)this.$newFallbackElement.prepend(t(this.$media.children()[e])),e--;this.hasFallback\|\|this.$newFallbackElement.append(i)}}},AblePlayer.prototype.calculateControlLayout=function(){var t,e,i;return(t=[])[0]=[],t[1]=[],"legacy"===this.skin&&(t[2]=[],t[3]=[]),t[0].push("play"),t[0].push("restart"),t[0].push("rewind"),t[0].push("forward"),"legacy"===this.skin&&t[1].push("seek"),this.hasPlaylist&&(this.skin,t[0].push("previous"),t[0].push("next")),this.isPlaybackRateSupported()?(e=!0,"legacy"===this.skin&&(t[2].push("slower"),t[2].push("faster"))):e=!1,i=0,this.hasCaptions&&(i++,"legacy"===this.skin?t[2].push("captions"):t[1].push("captions")),this.hasSignLanguage&&(i++,"legacy"===this.skin?t[2].push("sign"):t[1].push("sign")),"video"===this.mediaType&&(this.hasOpenDesc\|\|this.hasClosedDesc)&&(i++,"legacy"===this.skin?t[2].push("descriptions"):t[1].push("descriptions")),null===this.transcriptType\|\|this.hideTranscriptButton\|\|(i++,"legacy"===this.skin?t[2].push("transcript"):t[1].push("transcript")),this.hasChapters&&this.useChaptersButton&&(i++,"legacy"===this.skin?t[2].push("chapters"):t[1].push("chapters")),"2020"==this.skin&&i>0&&t[1].push("pipe"),e&&"2020"===this.skin&&(t[1].push("faster"),t[1].push("slower"),t[1].push("pipe")),"legacy"===this.skin?t[3].push("preferences"):t[1].push("preferences"),"video"===this.mediaType&&this.allowFullscreen&&this.nativeFullscreenSupported()&&("legacy"===this.skin?t[3].push("fullscreen"):t[1].push("fullscreen")),this.browserSupportsVolume()?(this.volumeButton="volume-"+this.getVolumeName(this.volume),this.skin,t[1].push("volume")):this.volume=!1,t},AblePlayer.prototype.addControls=function(){var e,i,a,s,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P,T,k,w,C,A,D,S,x;e=this,a=(i=this.calculateControlLayout()).length,P=this.mediaId+"-tooltip",this.$tooltipDiv=t("<div>",{id:P,class:"able-tooltip"}).hide(),this.$controllerDiv.append(this.$tooltipDiv),"2020"==this.skin&&(l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.translate("seekbarLabel","timeline"),this.$controllerDiv.append(l),this.seekBar=new AccessibleSlider(l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible"));let $=t('<div class="able-control-row"></div>');for(this.$controllerDiv.append($),s=0;s<a;s++){for(r=i[s],o=t("<div>",s%2==0?{class:"able-left-controls"}:{class:"able-right-controls"}),$.append(o),n=0;n<r.length;n++){if("seek"===(c=r[n]))l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.translate("seekbarLabel","timeline"),o.append(l),void 0!==this.duration&&0!==this.duration\|\|(this.duration=60,this.elapsed=0),this.seekBar=new AccessibleSlider(l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible");else if("pipe"===c)(p=t("<span>",{tabindex:"-1","aria-hidden":"true",class:"able-pipe"})).append("\|"),o.append(p);else{u=this.getButtonTitle(c),d=t("<div>",{role:"button",tabindex:"0",class:"able-button-handler-"+c}),"volume"!==c&&"preferences"!==c&&"captions"!==c\|\|("preferences"==c?(this.prefCats=this.getPreferencesGroups(),this.prefCats.length>1?(x=this.mediaId+"-prefs-menu",d.attr({"aria-controls":x,"aria-haspopup":"menu","aria-expanded":"false"})):1===this.prefCats.length&&d.attr({"aria-haspopup":"dialog"})):"volume"===c?(x=this.mediaId+"-volume-slider",d.attr({"aria-controls":x,"aria-expanded":"false"})):"captions"===c&&this.captions&&(this.captions.length>1?d.attr("aria-expanded","false"):d.attr("aria-pressed","false")));var N=c;"faster"===c&&"animals"===this.speedIcons&&(N="rabbit"),"slower"===c&&"animals"===this.speedIcons&&(N="turtle"),"volume"===c?this.getIcon(d,this.volumeButton):("fullscreen"===N&&(N=this.fullscreen?"fullscreen-collapse":"fullscreen-expand"),this.getIcon(d,N)),this.setText(d,u),d.on("mouseenter focus",function(i){clearTimeout(D),f=t(this).attr("aria-label"),g=t(this).position(),m=t(this).height(),v=t(this).width(),b=e.$controllerDiv.width(),g.right=b-g.left-v,T=g.top+m+5,y=t(this).parent().hasClass("able-right-controls")?"right":"left",w=AblePlayer.localGetElementById(d[0],P).text(f).width(),"left"==y?((k=g.left-w/2)<0&&(k=2),C={left:k+"px",right:"",top:T+"px"}):((k=g.right-w/2)<0&&(k=2),C={left:"",right:k+"px",top:T+"px"}),A=AblePlayer.localGetElementById(d[0],P).text(f).css(C),e.showTooltip(A),t(this).on("mouseleave blur",function(){clearTimeout(D),D=setTimeout(function(){AblePlayer.localGetElementById(d[0],P).text("").hide()},500),e.$tooltipDiv.on("mouseenter focus",function(){clearTimeout(D)}),e.$tooltipDiv.on("mouseleave blur",function(){AblePlayer.localGetElementById(d[0],P).text("").hide()})})}),"captions"===c?this.prefCaptions&&1===this.prefCaptions\|\|(S=this.captions.length>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),d.addClass("buttonOff").attr("title",S),d.attr("aria-pressed","false")):"descriptions"===c&&(this.prefDesc&&1===this.prefDesc\|\|d.addClass("buttonOff").attr("title",this.translate("turnOnDescriptions","Turn on descriptions"))),o.append(d),"play"===c?this.$playpauseButton=d:"previous"==c?(this.$prevButton=d,"previous"==this.buttonWithFocus&&(this.$prevButton.trigger("focus"),this.buttonWithFocus=null)):"next"==c?(this.$nextButton=d,"next"==this.buttonWithFocus&&(this.$nextButton.trigger("focus"),this.buttonWithFocus=null)):"captions"===c?this.$ccButton=d:"sign"===c?(this.$signButton=d,this.$signWindow.is(":visible")\|\|this.$signButton.addClass("buttonOff")):"descriptions"===c?this.$descButton=d:"mute"===c?this.$muteButton=d:"transcript"===c?(this.$transcriptButton=d,this.$transcriptDiv.is(":visible")\|\|this.$transcriptButton.addClass("buttonOff").attr("title",this.translate("showTranscript","Show transcript"))):"fullscreen"===c?this.$fullscreenButton=d:"chapters"===c?this.$chaptersButton=d:"preferences"===c?this.$prefsButton=d:"volume"===c&&(this.$volumeButton=d)}"volume"===c&&this.addVolumeSlider(o)}s%2==1&&this.$controllerDiv.append('<div style="clear:both;"></div>')}for(var I in void 0!==this.$captionsDiv&&this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv),this.controls=[],i)i.hasOwnProperty(I)&&(this.controls=this.controls.concat(i[I]));this.refreshControls()},AblePlayer.prototype.cuePlaylistItem=function(e){var i,a,s,n,r,o,l=this;a=this.player,this.initializing\|\|this.playerCreated&&this.deletePlayer("playlist"),this.swappingSrc=!0,this.startedPlaying?this.okToPlay=!0:this.okToPlay=!1,this.loadingMedia=!1,i=this.$playlist.eq(e),this.hasAttr(i,"data-youtube-id")?(this.youTubeId=this.getYouTubeId(i.attr("data-youtube-id")),this.hasAttr(i,"data-youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(i.attr("data-youtube-desc-id"))),s="youtube"):this.hasAttr(i,"data-vimeo-id")?(this.vimeoId=this.getVimeoId(i.attr("data-vimeo-id")),this.hasAttr(i,"data-vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(i.attr("data-vimeo-desc-id"))),s="vimeo"):s="html5","youtube"===s?"html5"===a&&(this.playing&&this.pauseMedia(),this.$media.hide()):(this.youTubeId=!1,"youtube"===a&&this.$media.show()),this.player=s,this.$media.empty(),this.hasAttr(i,"data-poster")&&this.$media.attr("poster",i.attr("data-poster")),this.hasAttr(i,"data-youtube-desc-id")&&this.$media.attr("data-youtube-desc-id",i.attr("data-youtube-desc-id")),this.youTubeId&&this.$media.attr("data-youtube-id",i.attr("data-youtube-id"));var h=i.children("span.able-source");h.length&&h.each(function(){const e=t(this);if(l.hasAttr(e,"data-src")){const i=DOMPurify.sanitize(e.attr("data-src"));if(validate.isProtocolSafe(i)){const a=t("<source>",{src:i});["data-type","data-desc-src","data-sign-src"].forEach(t=>{if(l.hasAttr(e,t)){const i=e.attr(t),s=DOMPurify.sanitize(i);t.endsWith("-src")&&validate.isProtocolSafe(s)?a.attr(t,s):t.endsWith("-src")\|\|a.attr(t,s)}}),l.$media.append(a)}}});var p=i.children("span.able-track");p.length&&p.each(function(){const e=t(this);if(l.hasAttr(e,"data-src")&&l.hasAttr(e,"data-kind")&&l.hasAttr(e,"data-srclang")){const i=DOMPurify.sanitize(e.attr("data-src"));if(validate.isProtocolSafe(i)){const a=t("<track>",{src:i,kind:e.attr("data-kind"),srclang:e.attr("data-srclang")});["data-label","data-desc","data-default"].forEach(t=>{l.hasAttr(e,t)&&a.attr(t,DOMPurify.sanitize(e.attr(t)))}),l.$media.append(a)}}}),n=DOMPurify.sanitize(i.text()),this.hasAttr(i,"lang")&&(r=i.attr("lang")),this.$sources=this.$media.find("source"),this.recreatingPlayer\|\|this.recreatePlayer().then(function(){l.$playlist.removeClass("able-current").children("button").removeAttr("aria-current"),l.$playlist.eq(e).addClass("able-current").children("button").attr("aria-current","true"),!0===l.showNowPlaying&&void 0!==l.$nowPlayingDiv&&(o=t("<span>"),void 0!==r&&o.attr("lang",r),o.html("<span>"+l.tt.selectedTrack+":</span>"+n),l.$nowPlayingDiv.html(o)),l.initializing?l.swappingSrc=!1:"html5"===l.player?l.loadingMedia\|\|(l.media.load(),l.loadingMedia=!0):"youtube"===l.player&&(l.okToPlay=!0),l.initializing=!1,l.playerCreated=!0})},AblePlayer.prototype.deletePlayer=function(e){"youtube"===this.player&&this.youTubePlayer&&this.youTubePlayer.destroy(),"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.destroy(),this.$controllerDiv.empty(),this.$elapsedTimeContainer.empty().text("0:00"),this.$durationContainer.empty(),this.$signWindow&&this.$signWindow.remove(),this.$transcriptArea&&this.$transcriptArea.remove(),t(".able-modal-dialog").remove(),this.$captionsWrapper&&this.$captionsWrapper.remove(),this.$descDiv&&this.$descDiv.remove(),this.hasCaptions=!1,this.hasChapters=!1,this.hasDescTracks=!1,this.hasOpenDesc=!1,this.hasClosedDesc=!1,this.captionsPopup=null,this.chaptersPopup=null,this.transcriptType=null,this.playerDeleted=!0},AblePlayer.prototype.getButtonTitle=function(t){return"playpause"===t\|\|"play"===t?this.translate("play","Play"):"pause"===t?this.translate("pause","Pause"):"restart"===t?this.translate("restart","Restart"):"previous"===t?this.translate("prevTrack","Previous track"):"next"===t?this.translate("nextTrack","Next track"):"rewind"===t?this.translate("rewind","Rewind"):"forward"===t?this.translate("forward","Forward"):"captions"===t?this.captions.length>1?this.translate("captions","Captions"):this.captionsOn?this.translate("hideCaptions","Hide captions"):this.translate("showCaptions","Show captions"):"descriptions"===t?this.descOn?this.translate("turnOffDescriptions","Turn off descriptions"):this.translate("turnOnDescriptions","Turn on descriptions"):"transcript"===t?this.$transcriptDiv.is(":visible")?this.translate("hideTranscript","Hide transcript"):this.translate("showTranscript","Show transcript"):"chapters"===t?this.translate("chapters","Chapters"):"sign"===t?this.translate("sign","Sign language"):"volume"===t?this.translate("volume","Volume"):"faster"===t?this.translate("faster","Faster"):"slower"===t?this.translate("slower","Slower"):"preferences"===t?this.translate("preferences","Preferences"):"fullscreen"===t?this.fullscreen?this.translate("exitFullScreen","Exit full screen"):this.translate("enterFullScreen","Enter full screen"):(this.debug,this.capitalizeFirstLetter(t))}}(jQuery);var preProcessing={transformCSSClasses:function(t){if(t.length>1e3)throw new Error("Input too long");return t.replace(/<(v\|c\|b\|i\|u\|lang\|ruby)\.([\w\.]+)([^>])>/g,function(t,e,i,a){return`<${e} class="${i.replace(/\./g," ")}"${a}>`})},transformLangTags:function(t){return t.replace(/<lang\s+([\w-]+)([^>])>/g,function(t,e,i){return'<lang lang="'+e+'"'+i+">"})},transformVTags:function(t){return t.replace(/<v\s+([^>]?)>/g,function(t,e){var i=e.match(/class="([^"])"/),a=i?i[0]:"",s=e.replace(/class="[^"]"/,"").trim().split(/\s+/),n=[],r=[];s.forEach(function(t){-1!==t.indexOf("=")?n.push(t):r.push(t)});var o=r.join(" "),l="<v";return o&&(l+=' title="'+o+'"'),n.length>0&&(l+=" "+n.join(" ")),a&&(l+=" "+a),l+=">"})}},postProcessing={postprocessCTag:function(t){return t.replace(/<c class="([\w\s]+)">/g,function(t,e){return"<c."+e.replace(/ /g,".")+">"})},postprocessVTag:function(t){return t.replace(/<v([^>])class="([\w\s]+)"([^>])>/g,function(t,e,i,a){var s=i.trim().split(/\s+/).join("."),n=(e+a).replace(/\sclass="[\w\s]+"/,"").trim();return"<v."+s+(n?" "+n:"")+">"})},postprocessLangTag:function(t){return t.replace(/<lang lang="([\w-]+)"([^>])>/g,function(t,e,i){return"<lang "+e+i+">"})}},validate={preProcessVttContent:function(t){var e=preProcessing.transformCSSClasses(t),i=preProcessing.transformLangTags(e);return preProcessing.transformVTags(i)},postProcessVttContent:function(t,e){var i=postProcessing.postprocessCTag(t),a=postProcessing.postprocessVTag(i);return postProcessing.postprocessLangTag(a).replace(/-->/g,"--\x3e").replace(/<([\d:.]+)>/g,"<$1>").replace(/<\/v>/g,function(t,i){return-1!==e.indexOf(t,i)?t:""})},sanitizeVttContent:function(t){if(null==t)return"";var e=validate.preProcessVttContent(t),i=DOMPurify.sanitize(e,{ALLOWED_TAGS:["b","i","u","v","c","lang","ruby","rt","rp"],ALLOWED_ATTR:["title","class","lang"],KEEP_CONTENT:!0});return validate.postProcessVttContent(i,t)},isProtocolSafe:function(t){try{const e=new URL(t,window.location.origin);return["http:","https:"].includes(e.protocol)}catch(t){return!1}}};"undefined"!=typeof module&&module.exports&&(module.exports=validate),function(t){AblePlayer.prototype.setupTracks=function(){var e,i,a,s,n,r,o,l,h;for(e=this,a=(i=new this.defer).promise(),s=[],t("#able-vts").length?(this.vtsTracks=[],this.hasVts=!0):this.hasVts=!1,o=this.hasDescTracks&&this.descOn?this.altTracks:this.tracks,r=0;r<o.length;r++)if(h=(l=o[r]).kind?l.kind:"subtitles",l.src){var p=l.src;n=this.loadTextObject(p),s.push(n.catch(function(t){})),n.then(function(t,i){p=t.src;var a=t.language,s=t.label,n=t.desc;return function(r){var o=e.parseWebVTT(r).cues;e.hasVts&&e.setupVtsTracks(i,a,n,s,p,r.text),"captions"===i\|\|"subtitles"===i?e.setupCaptions(t,o):"descriptions"===i?e.setupDescriptions(t,o):"chapters"===i?e.setupChapters(t,o):"metadata"===i&&e.setupMetadata(o)}}(l,h))}else(e.usingYouTubeCaptions\|\|e.usingVimeoCaptions)&&e.setupCaptions(l);return e.usingYouTubeCaptions\|\|e.usingVimeoCaptions?i.resolve():t.when.apply(t,s).then(function(){i.resolve()}),a},AblePlayer.prototype.getTracks=function(){var e,i,a,s,n,r,o,l,h,p,c;return e=this,l=!1,a=(i=new this.defer).promise(),this.$tracks=this.$media.find("track"),this.tracks=[],this.altTracks=[],this.captions=[],this.descriptions=[],this.chapters=[],this.meta=[],this.hasCaptionsTrack=!1,this.hasDescTracks=!1,this.$tracks.length&&(this.usingYouTubeCaptions=!1,this.$tracks.each(function(i,a){if("captions"===t(this).attr("kind")?e.hasCaptionsTrack=!0:"descriptions"===t(this).attr("kind")&&(e.hasClosedDesc=!0),s=t(this).attr("srclang")?t(this).attr("srclang"):e.lang,n=t(this).attr("label")?t(this).attr("label"):e.getLanguageName(s),void 0===t(this).attr("default")\|\|l?s===e.lang?(h=!0,r=!1):r=!1:(r=!0,l=!0),r&&(e.captionLang=s),void 0!==t(this).data("desc")?(o=!0,e.hasDescTracks=!0):o=!1,o?e.altTracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:s,label:n,def:r,desc:o}):e.tracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:s,label:n,def:r,desc:o}),i==e.$tracks.length-1){if(!l)if(h)for(e.captionLang=e.lang,p=!1,c=0;c<e.tracks.length&&!p;)e.tracks[c].language===e.lang&&(e.tracks[c].def=!0,p=!0),c++;else e.tracks[0].def=!0,e.captionLang=e.tracks[0].language;e.$media.find("track").removeAttr("default")}})),this.$tracks.length&&this.hasCaptionsTrack?i.resolve():"youtube"===this.player?this.getYouTubeCaptionTracks().then(function(){e.hasCaptions&&(e.usingYouTubeCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()}):"vimeo"===this.player?this.getVimeoCaptionTracks().then(function(){e.hasCaptions&&(e.usingVimeoCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()}):(this.hasCaptions=!1,e.$captionsWrapper&&e.$captionsWrapper.remove(),i.resolve()),a},AblePlayer.prototype.setupCaptions=function(e,i){var a,s;if(void 0===i&&(i=null),this.usingYouTubeCaptions\|\|this.usingVimeoCaptions);else if(0===this.captions.length)this.captions.push({language:e.language,label:e.label,def:e.def,cues:i});else{for(a=!1,s=0;s<this.captions.length;s++)if(e.label.toLowerCase()<this.captions[s].label.toLowerCase()){this.captions.splice(s,0,{language:e.language,label:e.label,def:e.def,cues:i}),a=!0;break}a\|\|this.captions.push({language:e.language,label:e.label,def:e.def,cues:i})}this.hasCaptions=!0,this.currentCaption=-1,1===this.prefCaptions?this.captionsOn=!0:0===this.prefCaptions?this.captionsOn=!1:1===this.defaultStateCaptions?this.captionsOn=!0:this.captionsOn=!1,"audio"===this.mediaType&&this.captionsOn&&this.$captionsContainer.removeClass("captions-off"),(!this.$captionsWrapper\|\|this.$captionsWrapper&&!t.contains(this.$ableDiv[0],this.$captionsWrapper[0]))&&(this.$captionsDiv=t("<div>",{class:"able-captions"}),this.$captionsWrapper=t("<div>",{class:"able-captions-wrapper","aria-hidden":"true"}).hide(),"below"===this.prefCaptionsPosition?this.$captionsWrapper.addClass("able-captions-below"):this.$captionsWrapper.addClass("able-captions-overlay"),this.$captionsWrapper.append(this.$captionsDiv),this.$captionsContainer.append(this.$captionsWrapper))},AblePlayer.prototype.setupDescriptions=function(t,e){this.hasClosedDesc=!0,this.currentDescription=-1,this.descriptions.push({cues:e,language:t.language})},AblePlayer.prototype.setupChapters=function(t,e){this.hasChapters=!0,this.chapters.push({cues:e,language:t.language})},AblePlayer.prototype.setupMetadata=function(e){"text"===this.metaType?this.metaDiv&&t("#"+this.metaDiv)&&(this.$metaDiv=t("#"+this.metaDiv),this.hasMeta=!0,this.meta=e):"selector"===this.metaType&&(this.hasMeta=!0,this.visibleSelectors=[],this.meta=e)},AblePlayer.prototype.loadTextObject=function(e){var i,a,s,n;return a=(i=new this.defer).promise(),s=this,n=t("<div>",{style:"display:none"}),fetch(e).then(t=>t.text()).then(t=>{var a,s=t.split(/\r?\n\s\r?\n/),r="";s.forEach(t=>{a=validate.sanitizeVttContent(t),r+=a+"\n\n"}),n.html(r);let o={src:e,text:r};i.resolve(o),n.remove()}).catch(t=>{s.debug,i.reject(e),n.remove()}),a}}(jQuery),function(t){AblePlayer.prototype.initYouTubePlayer=function(){var e,i,a,s;return e=this,a=(i=new this.defer).promise(),this.youTubePlayerReady=!1,s=this.youTubeDescId&&this.prefDesc?this.youTubeDescId:this.youTubeId,this.activeYouTubeId=s,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeInit().then(function(){i.resolve()}):(AblePlayer.loadingYouTubeIframeAPI\|\|e.getScript("https://www.youtube.com/iframe_api",function(){}),t("body").on("youTubeIframeAPIReady",function(){e.finalizeYoutubeInit().then(function(){i.resolve()})})),a},AblePlayer.prototype.finalizeYoutubeInit=function(){var e,i,a,s,n;return i=(e=new this.defer).promise(),a=this,s=this.mediaId+"_youtube",this.$mediaContainer.prepend(t("<div>").attr("id",s)),n=this.okToPlay?1:0,void 0===this.captionLang&&(this.captionLang=this.lang),this.youTubePlayer=new YT.Player(s,{videoId:this.activeYouTubeId,host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,cc_lang_pref:this.captionLang,cc_load_policy:1,controls:0,disableKb:1,enablejsapi:1,hl:this.lang,iv_load_policy:3,origin:window.location.origin,playsinline:this.playsInline,rel:0,start:this.startTime},events:{onReady:function(){a.youTubePlayerReady=!0,a.playerWidth&&a.playerHeight\|\|a.getYouTubeDimensions(),a.playerWidth&&a.playerHeight&&a.youTubePlayer.setSize(a.playerWidth,a.playerHeight),a.swappingSrc&&(a.swappingSrc=!1,a.restoreFocus(),a.cueingPlaylistItem=!1,(a.playing\|\|a.okToPlay)&&a.playMedia()),a.userClickedPlaylist&&(a.userClickedPlaylist=!1),a.recreatingPlayer&&(a.recreatingPlayer=!1),e.resolve()},onError:function(t){e.reject()},onStateChange:function(t){a.getPlayerState().then(function(t){"playing"===t?(a.hasSignLanguage&&a.signVideo&&a.signVideo.play(!0),a.playing=!0,a.startedPlaying=!0,a.paused=!1):"ended"==t?a.onMediaComplete():(a.playing=!1,a.paused=!0),a.stoppingYouTube&&"paused"===t&&(a.hasSignLanguage&&a.signVideo&&a.signVideo.pause(!0),void 0!==a.$posterImg&&a.$posterImg.show(),a.stoppingYouTube=!1,a.seeking=!1,a.playing=!1,a.paused=!0)}),"youtube"!==a.player\|\|a.usingYouTubeCaptions\|\|a.youTubePlayer.getOptions("captions")&&a.youTubePlayer.unloadModule("captions")},onApiChange:function(){a.duration=a.youTubePlayer.getDuration()},onPlaybackQualityChange:function(){}}}),this.hasPlaylist\|\|this.$media.remove(),i},AblePlayer.prototype.getYouTubeDimensions=function(t){var e,i,a;void 0!==(e=this.$ableWrapper.find("iframe"))&&e.prop("width")&&(i=e.prop("width"),e.prop("height")&&(a=e.prop("height"),this.resizePlayer(i,a)))},AblePlayer.prototype.getYouTubeCaptionTracks=function(){var t,e,i,a,s,n,r=new this.defer,o=r.promise(),l=!1;return t=this,this.youTubePlayer.getOption("captions","tracklist")\|\|(this.youTubePlayer.addEventListener("onApiChange",function(){if(l=!0,t.duration=t.youTubePlayer.getDuration(),t.loadingYouTubeCaptions){if(e=t.youTubePlayer.getOption("captions","tracklist"),t.okToPlay\|\|t.youTubePlayer.pauseVideo(),e&&e.length){for(i=0;i<e.length;i++)a=e[i].languageCode,s=e[i].languageName,n=!1,(void 0!==t.captionLang&&a===t.captionLang\|\|void 0!==t.lang&&a===t.lang)&&(n=!0),t.tracks.push({kind:"captions",language:a,label:s,def:n}),t.captions.push({language:a,label:s,def:n,cues:null});t.hasCaptions=!0,t.setupPopups("captions")}else t.usingYouTubeCaptions=!1,t.hasCaptions=!1;t.loadingYouTubeCaptions=!1,t.okToPlay&&t.youTubePlayer.playVideo()}t.captionLangPending&&(t.youTubePlayer.setOption("captions","track",{languageCode:t.captionLangPending}),t.captionLangPending=null),void 0!==t.prefCaptionsSize&&t.youTubePlayer.setOption("captions","fontSize",t.translatePrefs("size",t.prefCaptionsSize,"youtube")),r.resolve()}),this.loadingYouTubeCaptions=!0,this.youTubePlayer.playVideo(),setTimeout(()=>{l\|\|setTimeout(()=>{t.youTubePlayer.pauseVideo(),r.resolve()},500)},500)),o},AblePlayer.prototype.getYouTubePosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+t;return"120"==e?i+"/default.jpg":"320"==e?i+"/mqdefault.jpg":"480"==e?i+"/hqdefault.jpg":"640"==e?i+"/sddefault.jpg":"1280"==e?i+"/hq720.jpg":"1920"==e&&i+"/maxresdefault.jpg"},AblePlayer.prototype.getYouTubeId=function(t){var e;return-1!==t.indexOf("youtu")?(e=(t=t.trim()).length-11,t.substring(e)):t}}(jQuery),function(t){window.AccessibleSlider=function(e,i,a,s,n,r,o,l,h,p){var c,u;c=this,this.position=0,this.tracking=!1,this.trackDevice=null,this.keyTrackPosition=0,this.lastTrackPosition=0,this.nextStep=1,this.inertiaCount=0,this.bodyDiv=t(e),h&&(this.loadedDiv=t("<div></div>"),this.playedDiv=t("<div></div>")),this.seekHead=t("<div>",{"aria-orientation":i,class:"able-"+l+"-head"}),"visible"===p?this.seekHead.attr("tabindex","0"):this.seekHead.attr("tabindex","-1"),this.seekHead.attr({role:"slider","aria-label":o,"aria-valuemin":s,"aria-valuemax":n}),this.timeTooltipTimeoutId=null,this.overTooltip=!1,this.timeTooltip=t("<div>"),this.bodyDiv.append(this.timeTooltip),this.timeTooltip.attr("role","tooltip"),this.timeTooltip.addClass("able-tooltip"),this.timeTooltip.on("mouseenter focus",function(){c.overTooltip=!0,clearInterval(c.timeTooltipTimeoutId)}),this.timeTooltip.on("mouseleave blur",function(){c.overTooltip=!1,t(this).hide()}),this.timeTooltip.hide(),this.bodyDiv.append(this.loadedDiv),this.bodyDiv.append(this.playedDiv),this.bodyDiv.append(this.seekHead),this.bodyDiv.wrap("<div></div>"),this.wrapperDiv=this.bodyDiv.parent(),"legacy"===this.skin&&("horizontal"===i?(this.wrapperDiv.width(a),this.loadedDiv.width(0)):(this.wrapperDiv.height(a),this.loadedDiv.height(0))),this.wrapperDiv.addClass("able-"+l+"-wrapper"),h&&(this.loadedDiv.addClass("able-"+l+"-loaded"),this.playedDiv.width(0),this.playedDiv.addClass("able-"+l+"-played"),this.setDuration(n)),this.seekHead.on("mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend",function(t){u=c.pointerEventToXY(t),"mouseenter"===t.type\|\|"focus"===t.type?c.overHead=!0:"mouseleave"===t.type\|\|"blur"===t.type?(c.overHead=!1,!c.overBody&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x))):"mousemove"===t.type\|\|"touchmove"===t.type?c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x):"mousedown"===t.type\|\|"touchstart"===t.type?(c.startTracking("mouse",c.pageXToPosition(c.seekHead.offset()+c.seekHead.width()/2)),c.bodyDiv.is(":focus")\|\|c.bodyDiv.focus(),t.preventDefault()):"mouseup"!==t.type&&"touchend"!==t.type\|\|c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x)),"mousemove"!==t.type&&"mousedown"!==t.type&&"mouseup"!==t.type&&"touchstart"!==t.type&&"touchend"!==t.type&&c.refreshTooltip()}),this.bodyDiv.on("mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend",function(t){if(2==t.button&&"mousedown"==t.type)return;u=c.pointerEventToXY(t);let e=t.key;if("mouseenter"===t.type)c.overBody=!0,c.overBodyMousePos={x:u.x,y:u.y};else if("mouseleave"===t.type)c.overBody=!1,c.overBodyMousePos=null,!c.overHead&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("mousemove"===t.type\|\|"touchmove"===t.type)c.overBodyMousePos={x:u.x,y:u.y},c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x);else if("mousedown"===t.type\|\|"touchstart"===t.type)c.startTracking("mouse",c.pageXToPosition(u.x)),c.trackHeadAtPageX(u.x),c.seekHead.is(":focus")\|\|c.seekHead.focus(),t.preventDefault();else if("mouseup"===t.type\|\|"touchend"===t.type)c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("keydown"===t.type){if("Home"===t.key)c.trackImmediatelyTo(0);else if("End"===t.key)c.trackImmediatelyTo(c.duration);else if("ArrowLeft"===t.key\|\|"ArrowDown"===t.key)c.arrowKeyDown(-1);else if("ArrowRight"===t.key\|\|"ArrowUp"===t.key)c.arrowKeyDown(1);else if("PageUp"===t.key&&r>0)c.arrowKeyDown(r);else{if(!("PageDown"===t.key&&r>0))return;c.arrowKeyDown(-r)}t.preventDefault()}else"keyup"===t.type&&e===t.key&&(c.tracking&&"keyboard"===c.trackDevice&&c.stopTracking(c.keyTrackPosition),t.preventDefault());c.overTooltip\|\|"mouseup"===t.type\|\|"keydown"===t.type\|\|"keydown"===t.type\|\|c.refreshTooltip()})},AccessibleSlider.prototype.arrowKeyDown=function(t){this.tracking&&"keyboard"===this.trackDevice?(this.keyTrackPosition=this.boundPos(this.keyTrackPosition+this.nextStept),this.inertiaCount+=1,20===this.inertiaCount&&(this.inertiaCount=0,this.nextStep=2),this.trackHeadAtPosition(this.keyTrackPosition)):(this.nextStep=1,this.inertiaCount=0,this.keyTrackPosition=this.boundPos(this.position+this.nextStept),this.startTracking("keyboard",this.keyTrackPosition),this.trackHeadAtPosition(this.keyTrackPosition))},AccessibleSlider.prototype.pageXToPosition=function(t){var e=t-this.bodyDiv.offset().left,i=this.duration(e/this.bodyDiv.width());return this.boundPos(i)},AccessibleSlider.prototype.boundPos=function(t){return Math.max(0,Math.min(t,this.duration))},AccessibleSlider.prototype.setDuration=function(t){t!==this.duration&&(this.duration=t,this.resetHeadLocation(),this.seekHead.attr("aria-valuemax",t))},AccessibleSlider.prototype.setWidth=function(t){this.wrapperDiv.width(t),this.resizeDivs(),this.resetHeadLocation()},AccessibleSlider.prototype.getWidth=function(){return this.wrapperDiv.width()},AccessibleSlider.prototype.resizeDivs=function(){this.playedDiv.width(this.bodyDiv.width()(this.position/this.duration)),this.loadedDiv.width(this.bodyDiv.width()this.buffered)},AccessibleSlider.prototype.resetHeadLocation=function(){var t=this.position/this.duration,e=this.bodyDiv.width()t;this.seekHead.css("left",e-this.seekHead.width()/2),this.tracking&&this.stopTracking(this.position)},AccessibleSlider.prototype.setPosition=function(t,e){this.position=t,this.resetHeadLocation(),this.overHead&&this.refreshTooltip(),this.resizeDivs(),this.updateAriaValues(t,e)},AccessibleSlider.prototype.setBuffered=function(t){isNaN(t)\|\|(this.buffered=t,this.redrawDivs)},AccessibleSlider.prototype.startTracking=function(t,e){this.tracking\|\|(this.trackDevice=t,this.tracking=!0,this.bodyDiv.trigger("startTracking",[e]))},AccessibleSlider.prototype.stopTracking=function(t){this.trackDevice=null,this.tracking=!1,this.bodyDiv.trigger("stopTracking",[t]),this.setPosition(t,!0)},AccessibleSlider.prototype.trackHeadAtPageX=function(t){var e=this.pageXToPosition(t),i=t-this.bodyDiv.offset().left-this.seekHead.width()/2;i=Math.max(0,Math.min(i,this.bodyDiv.width()-this.seekHead.width())),this.lastTrackPosition=e,this.seekHead.css("left",i),this.reportTrackAtPosition(e)},AccessibleSlider.prototype.trackHeadAtPosition=function(t){var e=t/this.duration,i=this.bodyDiv.width()e;this.lastTrackPosition=t,this.seekHead.css("left",i-this.seekHead.width()/2),this.reportTrackAtPosition(t)},AccessibleSlider.prototype.reportTrackAtPosition=function(t){this.bodyDiv.trigger("tracking",[t]),this.updateAriaValues(t,!0)},AccessibleSlider.prototype.updateAriaValues=function(e,i){var a,s=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),o=1===n?"minute":"minutes",l=1===r?"second":"seconds";a=s>0?s+" "+(1===s?"hour":"hours")+", "+n+" "+o+", "+r+" "+l:n>0?n+" "+o+", "+r+" "+l:r+" "+l,this.liveAriaRegion\|\|(this.liveAriaRegion=t("<span>",{class:"able-offscreen","aria-live":"polite"}),this.wrapperDiv.append(this.liveAriaRegion)),i&&this.liveAriaRegion.text()!==a&&this.liveAriaRegion.text(a),this.seekHead.attr("aria-valuetext",a),this.seekHead.attr("aria-valuenow",Math.floor(e).toString())},AccessibleSlider.prototype.trackImmediatelyTo=function(t){this.startTracking("keyboard",t),this.trackHeadAtPosition(t),this.keyTrackPosition=t},AccessibleSlider.prototype.refreshTooltip=function(){if(this.overHead)this.timeTooltip.show(),this.tracking?this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)):this.timeTooltip.text(this.positionToStr(this.position)),this.setTooltipPosition(this.seekHead.position().left+this.seekHead.width()/2);else if(this.overBody&&this.overBodyMousePos)this.timeTooltip.show(),this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))),this.setTooltipPosition(this.overBodyMousePos.x-this.bodyDiv.offset().left);else{clearTimeout(this.timeTooltipTimeoutId);var t=this;this.timeTooltipTimeoutId=setTimeout(function(){t.timeTooltip.hide()},500)}},AccessibleSlider.prototype.hideSliderTooltips=function(){this.overHead=!1,this.overBody=!1,this.timeTooltip.hide()},AccessibleSlider.prototype.setTooltipPosition=function(t){this.timeTooltip.css({left:t-this.timeTooltip.width()/2-10,bottom:this.seekHead.height()})},AccessibleSlider.prototype.positionToStr=function(t){var e=Math.floor(t/3600),i=Math.floor(t/60)%60,a=Math.floor(t%60);return a<10&&(a="0"+a),e>0?(i<10&&(i="0"+i),e+":"+i+":"+a):i+":"+a},AccessibleSlider.prototype.pointerEventToXY=function(t){var e={x:0,y:0};if("touchstart"==t.type\|\|"touchmove"==t.type\|\|"touchend"==t.type\|\|"touchcancel"==t.type){var i=t.originalEvent.touches[0]\|\|t.originalEvent.changedTouches[0];e.x=i.pageX,e.y=i.pageY}else"mousedown"!=t.type&&"mouseup"!=t.type&&"mousemove"!=t.type&&"mouseover"!=t.type&&"mouseout"!=t.type&&"mouseenter"!=t.type&&"mouseleave"!=t.type\|\|(e.x=t.pageX,e.y=t.pageY);return e}}(jQuery),function(t){AblePlayer.prototype.addVolumeSlider=function(e){var i,a,s,n,r,o;i=this,a=this.mediaId+"-volume-slider",s=this.mediaId+"-volume-help",this.$volumeSlider=t("<div>",{id:a,class:"able-volume-slider","aria-hidden":"true"}).hide(),this.$volumeSliderTooltip=t("<div>",{class:"able-tooltip",role:"tooltip"}).hide(),this.$volumeRange=t("<input>",{type:"range",min:"0",max:"10",step:"1",orient:"vertical","aria-label":this.translate("volumeUpDown","Volume up down"),value:this.volume}),n=parseInt(i.volume)/10100,this.$volumeHelp=t("<div>",{id:s,class:"able-volume-help","aria-live":"polite"}).text(n+"%"),r=this.$volumeButton.attr("aria-label"),this.$volumeButton.attr("aria-label",r+" "+n+"%"),this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp),o=this.$volumeButton.parents(".able-control-row")[0],this.$volumeSlider.css("bottom",o.offsetHeight),e.append(this.$volumeSlider),this.$volumeRange.on("change",function(e){i.handleVolumeChange(t(this).val())}),this.$volumeRange.on("input",function(e){i.handleVolumeChange(t(this).val())}),this.$volumeRange.on("keydown",function(t){"Escape"!==t.key&&"Tab"!==t.key&&"Enter"!==t.key\|\|(i.$volumeSlider.is(":visible")?(i.closingVolume=!0,i.hideVolumePopup()):i.closingVolume\|\|i.showVolumePopup())})},AblePlayer.prototype.refreshVolumeHelp=function(t){var e;e=t/10100,this.$volumeHelp&&this.$volumeHelp.text(e+"%"),this.$volumeRange.attr("value",t)},AblePlayer.prototype.refreshVolumeButton=function(t){var e,i,a;e=this.getVolumeName(t),i=t/10100,a=this.translate("volume","Volume")+" "+i+"%",this.getIcon(this.$volumeButton,"volume-"+e),this.$volumeButton.attr("aria-label",a)},AblePlayer.prototype.handleVolumeButtonClick=function(){this.$volumeSlider.is(":visible")?this.hideVolumePopup():this.showVolumePopup()},AblePlayer.prototype.handleVolumeKeystroke=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleVolumeChange=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleMute=function(){this.isMuted()?this.setMute(!1):this.setMute(!0)},AblePlayer.prototype.showVolumePopup=function(){this.closePopups(),this.$tooltipDiv.hide(),this.$volumeSlider.show().attr("aria-hidden","false"),this.$volumeButton.attr("aria-expanded","true"),this.$volumeButton.focus(),this.waitThenFocus(this.$volumeRange)},AblePlayer.prototype.hideVolumePopup=function(){var t=this;this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus(),setTimeout(function(){t.closingVolume=!1},1e3)},AblePlayer.prototype.isMuted=function(){return"html5"===this.player?this.media.muted:"youtube"===this.player?this.youTubePlayer.isMuted():void 0},AblePlayer.prototype.setMute=function(t){t?(this.lastVolume=this.volume,this.volume=0):void 0!==this.lastVolume&&(this.volume=this.lastVolume),"html5"===this.player?this.media.muted=t:"youtube"===this.player&&(t?this.youTubePlayer.mute():this.youTubePlayer.unMute()),this.setVolume(this.volume),this.refreshVolumeHelp(this.volume),this.refreshVolumeButton(this.volume)},AblePlayer.prototype.setVolume=function(t){var e;this.syncSignVideo({volume:0}),"html5"===this.player?(e=t/10,this.media.volume=e):"youtube"===this.player?(e=10t,this.youTubePlayer.setVolume(e),this.volume=t):"vimeo"===this.player&&(e=t/10,this.vimeoPlayer.setVolume(e).then(function(){})),this.lastVolume=t},AblePlayer.prototype.getVolume=function(t){return"html5"===this.player?10this.media.volume:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getVolume()/10:"vimeo"===this.player?this.volume:void 0},AblePlayer.prototype.getVolumeName=function(t){return 0==t?"mute":10==t?"loud":t<5?"soft":"medium"}}(jQuery),function(t){var e="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]";window.AccessibleDialog=function(i,a,s,n){this.title=s,this.closeButtonLabel=n,this.focusedElementBeforeModal=a,this.baseId=t(i).attr("id")\|\|Math.floor(1e9Math.random()).toString();var r=this,o=i;this.modal=o,o.addClass("able-modal-dialog");var l=t("<button>",{class:"modalCloseButton",title:r.closeButtonLabel,"aria-label":r.closeButtonLabel}).text("×");l.on("keydown",function(t){" "===t.key&&r.hide()}).on("click",function(){r.hide()});var h=t("<h1></h1>");h.attr("id","modalTitle-"+this.baseId),h.text(s),this.titleH1=h,o.attr({"aria-labelledby":"modalTitle-"+this.baseId});var p=t("<div>",{class:"able-modal-header"});p.prepend(h),p.prepend(l),o.prepend(p),o.attr({"aria-hidden":"true",role:"dialog","aria-modal":"true"}),o.on("keydown",function(i){if("Escape"===i.key)r.hide(),i.preventDefault();else if("Tab"===i.key){var a=o.find("").filter(e).filter(":visible");if(0===a.length)return;var s=t(":focus"),n=a.index(s);i.shiftKey?0===n&&(a.get(a.length-1).trigger("focus"),i.preventDefault()):n===a.length-1&&(a.get(0).trigger("focus"),i.preventDefault())}i.stopPropagation()}),t("body").hasClass("able-modal-active")&&(t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("inert"),t("body").removeClass("able-modal-active"))},AccessibleDialog.prototype.show=function(){if(!this.overlay){var i=t("<div></div>").attr({class:"able-modal-overlay",tabindex:"-1"});this.overlay=i,t("body").append(i),i.on("mousedown.accessibleModal",function(t){t.preventDefault(),a.hide()})}t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").attr("inert",!0),t("body").addClass("able-modal-active"),this.overlay.css("display","block"),this.modal.css("display","block"),this.modal.attr({"aria-hidden":"false",tabindex:"-1"}),0===this.modal.find("").filter(e).filter(":visible").length&&this.focusedElementBeforeModal.blur();var a=this;setTimeout(function(){a.modal.find("button.modalCloseButton").first().trigger("focus")},300)},AccessibleDialog.prototype.hide=function(){this.overlay&&this.overlay.css("display","none"),this.modal.css("display","none"),this.modal.attr("aria-hidden","true"),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("inert"),t("body").removeClass("able-modal-active"),this.focusedElementBeforeModal.trigger("focus")},AccessibleDialog.prototype.getInputs=function(){return!!this.modal&&this.modal.find("input")}}(jQuery),function(t){AblePlayer.prototype.getNextHeadingLevel=function(e){var i,a,s,n;return e.parents().each(function(){if(i=t(this).children(":header"),a=i.length)return s=i.eq(a-1).prop("tagName"),!1}),void 0===s?n=1:(n=parseInt(s[1]),(n+=1)>6&&(n=6)),n},AblePlayer.prototype.countProperties=function(t){var e,i;for(i in e=0,t)t.hasOwnProperty(i)&&++e;return e},AblePlayer.prototype.formatSecondsAsColonTime=function(t,e){var i,a,s,n,r,o,l;if(e)if(2===(n=t.toString().split(".")).length){if((r=n[1]).length<3)for(o=3-r.length,l=1;l<=o;l++)r+="0"}else r="000";return i=Math.floor(t/3600),a=Math.floor(t/60)%60,(s=Math.floor(t%60))<10&&(s="0"+s),i>0?(a<10&&(a="0"+a),e?i+":"+a+":"+s+"."+r:i+":"+a+":"+s):e?(i<1?i="00":i<10&&(i="0"+i),a<1?a="00":a<10&&(a="0"+a),i+":"+a+":"+s+"."+r):a+":"+s},AblePlayer.prototype.getSecondsFromColonTime=function(t){var e;return 3===(e=t.split(":")).length?3600parseInt(e[0])+60parseInt(e[1])+parseFloat(e[2]):2===e.length?60parseInt(e[0])+parseFloat(e[1]):1===e.length?parseFloat(e[0]):void 0},AblePlayer.prototype.capitalizeFirstLetter=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},AblePlayer.prototype.roundDown=function(t,e){return Number(Math.floor(t+"e"+e)+"e-"+e)},AblePlayer.prototype.defer=function(){const t=this,e=new Promise((i,a)=>{t.resolve=i,t.reject=a,t.promise=()=>e})},AblePlayer.prototype.getScript=function(t,e){var i=document.createElement("script"),a=document.getElementsByTagName("script")[0];i.async=1,i.onload=i.onreadystatechange=function(t,a){(a\|\|!i.readyState\|\|/loaded\|complete/.test(i.readyState))&&(i.onload=i.onreadystatechange=null,i=void 0,!a&&e&&setTimeout(e,0))},i.src=t,a.parentNode.insertBefore(i,a)},AblePlayer.prototype.hasAttr=function(t,e){var i=t.attr(e);return void 0!==i&&!1!==i}}(jQuery),function(t){AblePlayer.prototype.initDescription=function(){var t,e;return e=(t=new this.defer).promise(),"audio"===this.mediaType&&t.resolve(),this.descFile=this.$sources.first().attr("data-desc-src"),void 0!==this.descFile?this.hasOpenDesc=!0:this.hasOpenDesc=!(!this.youTubeDescId&&!this.vimeoDescId),this.descMethod=null,this.hasOpenDesc&&this.hasClosedDesc?this.descMethod=this.prefDescMethod?this.prefDescMethod:"video":this.hasOpenDesc?this.descMethod="video":this.hasClosedDesc&&(this.descMethod="text"),this.descOn=!1,this.descMethod&&(1===this.prefDesc?this.descOn=!0:0===this.prefDesc?this.descOn=!1:this.descOn=1===this.defaultStateDescriptions),void 0===this.$descDiv&&this.hasClosedDesc&&this.injectTextDescriptionArea(),this.descOn?("video"!==this.descMethod\|\|this.usingDescribedVersion()\|\|this.swapDescription(),this.hasClosedDesc&&(this.prefDescVisible?void 0!==this.$descDiv&&(this.$descDiv.show(),this.$descDiv.removeClass("able-offscreen")):void 0!==this.$descDiv&&this.$descDiv.addClass("able-offscreen"))):"video"===this.descMethod?this.usingDescribedVersion()&&this.swapDescription():"text"===this.descMethod&&void 0!==this.$descDiv&&(this.$descDiv.hide(),this.$descDiv.removeClass("able-offscreen")),t.resolve(),e},AblePlayer.prototype.usingDescribedVersion=function(){return"youtube"===this.player?this.activeYouTubeId===this.youTubeDescId:"vimeo"===this.player?this.activeVimeoId===this.vimeoDescId:this.$sources.first().attr("data-desc-src")===this.$sources.first().attr("src")},AblePlayer.prototype.initSpeech=function(e){var i=this;function attemptEnableSpeech(){var t=new SpeechSynthesisUtterance(" ");t.onend=function(){i.getBrowserVoices(),(Array.isArray(i.descVoices)&&i.descVoices.length\|\|"init"!==e)&&(i.speechEnabled=!0)},i.synth.speak(t)}null===this.speechEnabled&&(window.speechSynthesis?(this.synth=window.speechSynthesis,this.synth.cancel(),"init"===e?(attemptEnableSpeech(),t(document).on("click",function handleInitialClick(){attemptEnableSpeech(),t(document).off("click",handleInitialClick)})):attemptEnableSpeech()):this.speechEnabled=!1)},AblePlayer.prototype.getBrowserVoices=function(){var t,e,i,a;if(a=this.captionLang?this.captionLang.substring(0,2).toLowerCase():this.lang.substring(0,2).toLowerCase(),this.descVoices=[],t=this.synth.getVoices(),e=this.getDescriptionLangs(),t.length>0){this.descVoices=[];for(var s=0;s<t.length;s++)(i=t[s].lang.substring(0,2).toLowerCase())===a&&-1!==e.indexOf(i)&&this.descVoices.push(t[s]);this.descVoices.length\|\|(this.descVoices=t)}return!1},AblePlayer.prototype.getDescriptionLangs=function(){var t=[];if(this.tracks)for(var e=0;e<this.tracks.length;e++)"descriptions"===this.tracks[e].kind&&t.push(this.tracks[e].language.substring(0,2).toLowerCase());return t},AblePlayer.prototype.setDescriptionVoice=function(){var t,e,i,a,s;if(e=void 0!==this.getPref().voices?this.getPrefDescVoice():null,this.getBrowserVoices(),this.rebuildDescPrefsForm(),a=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,this.synth&&(t=this.synth.getVoices()).length>0){if(e){s=!1;for(var n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===a.substring(0,2).toLowerCase()&&t[n].name===e){i=t[n].name,s=!0;break}}if(!s)for(n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===a.substring(0,2).toLowerCase()){i=t[n].name;break}this.prefDescVoice=i,this.prefDescVoiceLang=a,this.$voiceSelectField&&this.$voiceSelectField.val(this.prefDescVoice),this.updatePreferences("voice")}},AblePlayer.prototype.swapDescription=function(){var e,i,a,s;if(e=this,this.loadingMedia=!1,this.$focusedElement=t(":focus"),this.activeMedia=this.mediaId,this.elapsed>0?this.swapTime=this.elapsed:this.swapTime=0,this.duration>0&&(this.prevDuration=this.duration),this.okToPlay\|\|(this.okToPlay=this.playing),this.descOn?this.showAlert(this.translate("alertDescribedVersion","Using the audio described version of this video")):this.showAlert(this.translate("alertNonDescribedVersion","Using the non-described version of this video")),"html5"===this.player){if(this.swappingSrc=!0,this.paused=!0,this.usingDescribedVersion())for(i=0;i<this.$sources.length;i++)a=DOMPurify.sanitize(this.$sources[i].getAttribute("data-orig-src")),srcType=this.$sources[i].getAttribute("type"),a&&this.$sources[i].setAttribute("src",a);else for(i=0;i<this.$sources.length;i++)a=DOMPurify.sanitize(this.$sources[i].getAttribute("src")),s=DOMPurify.sanitize(this.$sources[i].getAttribute("data-desc-src")),srcType=this.$sources[i].getAttribute("type"),s&&(this.$sources[i].setAttribute("src",s),this.$sources[i].setAttribute("data-orig-src",a));if(this.recreatingPlayer)return;this.playerCreated&&(this.deletePlayer("swap-desc-html"),this.recreatePlayer().then(function(){e.loadingMedia\|\|(e.media.load(),e.loadingMedia=!0)}))}else if("youtube"===this.player){if(this.activeYouTubeId=this.usingDescribedVersion()?this.youTubeId:this.youTubeDescId,void 0!==this.youTubePlayer&&(e.swappingSrc=!0,e.playing?e.youTubePlayer.loadVideoById(e.activeYouTubeId,e.swapTime):e.youTubePlayer.cueVideoById(e.activeYouTubeId,e.swapTime)),this.playerCreated&&this.deletePlayer("swap-desc-youtube"),this.recreatingPlayer)return;this.recreatePlayer().then(function(){})}else if("vimeo"===this.player){if(this.usingDescribedVersion()?(this.activeVimeoId=this.vimeoId,this.showAlert(this.translate("alertNonDescribedVersion","Using the non-described version of this video"))):(this.activeVimeoId=this.vimeoDescId,this.showAlert(this.translate("alertDescribedVersion","Using the audio described version of this video"))),this.playerCreated&&this.deletePlayer("swap-desc-vimeo"),this.recreatingPlayer)return;this.recreatePlayer().then(function(){e.vimeoPlayer.loadVideo(e.activeVimeoId).then(function(){e.playing?e.vimeoPlayer.setCurrentTime(e.swapTime):e.vimeoPlayer.pause()})})}},AblePlayer.prototype.showDescription=function(t){if(this.playing&&this.hasClosedDesc&&!this.swappingSrc&&this.descOn&&("video"!==this.descMethod\|\|this.prefDescVisible)){var e,i,a,s;0;var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e.push(flattenComponentForDescription(t.children[i]));return e.join("")};for(e=[],this.selectedDescriptions?e=this.selectedDescriptions.cues:this.descriptions.length>=1&&(e=this.descriptions[0].cues),i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){a=i;break}void 0!==a?this.currentDescription!==a&&(this.$status.removeAttr("aria-live"),s=flattenComponentForDescription(e[a].components),"screenreader"===this.descReader?this.$descDiv.html(s):this.speechEnabled?("video"!==this.descMethod&&this.announceDescriptionText("description",s),this.prefDescVisible&&this.$descDiv.html(s).removeAttr("aria-live aria-atomic")):this.$descDiv.html(s),this.prefDescPause&&"text"===this.descMethod&&(this.pauseMedia(),this.pausedForDescription=!0),this.currentDescription=a):(this.$descDiv.html(""),this.currentDescription=-1,this.$status.attr("aria-live","polite"))}},AblePlayer.prototype.syncSpeechToPlaybackRate=function(t){var e;.5===t?e=.7:.75===t?e=.8:1===t?e=1:1.25===t?e=1.1:1.5===t?e=1.2:1.75===t?e=1.5:2===t?e=2:2.25===t?e=2.5:t>=2.5&&(e=3),this.prefDescRate=e},AblePlayer.prototype.announceDescriptionText=function(e,i){var a,s,n,r,o,l,h,p,c;a=this;if(this.speechEnabled\|\|this.initSpeech("desc"),"sample"===e?(s=t("#"+this.mediaId+"_prefDescVoice").val(),o=t("#"+this.mediaId+"_prefDescPitch").val(),l=t("#"+this.mediaId+"_prefDescRate").val(),h=t("#"+this.mediaId+"_prefDescVolume").val()):(s=this.prefDescVoice,o=this.prefDescPitch,l=this.prefDescRate,h=this.prefDescVolume),this.descVoices){if(this.descVoices.length>0){if(s)for(n=0;n<this.descVoices.length;n++)if(this.descVoices[n].name==s){r=this.descVoices[n];break}void 0===r&&(r=this.descVoices[0])}}else r=null;p=new SpeechSynthesisUtterance,r&&(p.voice=r),p.voiceURI="native",p.volume=h,p.rate=l,p.pitch=o,p.text=i,p.lang=this.lang,p.onstart=function(t){},p.onpause=function(t){},p.onend=function(t){this.speakingDescription=!1,c=t.elapsedTime,c>100?(t.elapsedTime/1e3).toFixed(2):t.elapsedTime.toFixed(2),this.debug,"description"===e&&a.prefDescPause&&a.pausedForDescription&&(a.playMedia(),this.pausedForDescription=!1)},p.onerror=function(t){},this.synth.paused&&this.synth.resume(),this.synth.speak(p),this.speakingDescription=!0}}(jQuery),jQuery,AblePlayer.prototype.isIOS=function(t){var e;return e=navigator.userAgent.toLowerCase(),!!/ipad\|iphone\|ipod/.exec(e)&&(void 0===t\|\|-1!==e.indexOf("os "+t))},AblePlayer.prototype.browserSupportsVolume=function(){var t;return!this.isIOS()&&((t=new Audio).volume=.9,.9===t.volume)},AblePlayer.prototype.nativeFullscreenSupported=function(){return document.fullscreenEnabled\|\|document.webkitFullscreenEnabled},function(t){AblePlayer.prototype.seekTo=function(t){var e,i=this;(this.seekFromTime=this.media.currentTime,this.seekToTime=t,this.seeking=!0,this.liveUpdatePending=!0,this.speakingDescription&&this.synth.cancel(),this.syncSignVideo({time:this.startTime}),"html5"===this.player)?(this.startTime=t,(e=this.media.seekable).length>0&&this.startTime>=e.start(0)&&this.startTime<=e.end(0)&&(this.media.currentTime=this.startTime,this.seekStatus="complete",this.syncSignVideo({time:this.startTime}))):"youtube"===this.player?(this.youTubePlayer.seekTo(t,!0),t>0&&void 0!==this.$posterImg&&this.$posterImg.hide(),this.syncSignVideo({time:t})):"vimeo"===this.player&&this.vimeoPlayer.setCurrentTime(t).then(function(){i.elapsed=t,i.refreshControls("timeline")});this.refreshControls("timeline")},AblePlayer.prototype.getMediaTimes=function(t,e){var i,a,s,n;return n={},a=(i=new this.defer).promise(),s=this,void 0!==t&&void 0!==e?(n.duration=t,n.elapsed=e,i.resolve(n)):this.getDuration().then(function(t){n.duration=s.roundDown(t,6),s.getElapsed().then(function(t){n.elapsed=s.roundDown(t,6),i.resolve(n)})}),a},AblePlayer.prototype.getDuration=function(){var t,e,i;(e=(t=new this.defer).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getDuration().then(function(e){void 0===e\|\|isNaN(e)\|\|-1===e?t.resolve(0):t.resolve(e)}):t.resolve(0):("html5"===this.player?i=this.media.duration:"youtube"===this.player&&(i=this.youTubePlayerReady?this.duration>0?this.duration:this.youTubePlayer.getDuration():0),void 0===i\|\|isNaN(i)\|\|-1===i?t.resolve(0):t.resolve(i));return e},AblePlayer.prototype.getElapsed=function(){var t,e,i;(e=(t=new this.defer).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getCurrentTime().then(function(e){void 0===e\|\|isNaN(e)\|\|-1===e?t.resolve(0):t.resolve(e)}):t.resolve(0):("html5"===this.player?i=this.media.currentTime:"youtube"===this.player&&(i=this.youTubePlayerReady?this.youTubePlayer.getCurrentTime():0),void 0===i\|\|isNaN(i)\|\|-1===i?t.resolve(0):t.resolve(i));return e},AblePlayer.prototype.getPlayerState=function(){var t,e,i;if(e=(t=new this.defer).promise(),i=this,"html5"===this.player)this.media.ended?t.resolve("ended"):this.media.paused?t.resolve("paused"):4!==this.media.readyState?t.resolve("buffering"):t.resolve("playing");else if("youtube"===this.player&&this.youTubePlayerReady){var a=this.youTubePlayer.getPlayerState();-1===a\|\|5===a?t.resolve("stopped"):0===a?t.resolve("ended"):1===a?t.resolve("playing"):2===a?t.resolve("paused"):3===a&&t.resolve("buffering")}else"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.getPaused().then(function(e){e?t.resolve("paused"):i.vimeoPlayer.getEnded().then(function(e){e?t.resolve("ended"):t.resolve("playing")})});return e},AblePlayer.prototype.isPlaybackRateSupported=function(){return"html5"===this.player?!!this.media.playbackRate:"youtube"===this.player?!!this.youTubePlayerReady&&this.youTubePlayer.getAvailablePlaybackRates().length>1:"vimeo"===this.player?this.vimeoSupportsPlaybackRateChange:void 0},AblePlayer.prototype.setPlaybackRate=function(t){t=Math.max(.5,t),this.hasClosedDesc&&"text"===this.descMethod&&this.syncSpeechToPlaybackRate(t),this.syncSignVideo({rate:t}),"html5"===this.player?this.media.playbackRate=t:"youtube"===this.player?this.youTubePlayer.setPlaybackRate(t):"vimeo"===this.player&&this.vimeoPlayer.setPlaybackRate(t),this.syncSignVideo({rate:t}),this.playbackRate=t,this.$speed.text(this.translate("speed","Speed")+": "+t.toFixed(2).toString()+"x")},AblePlayer.prototype.getPlaybackRate=function(){return"html5"===this.player?this.media.playbackRate:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getPlaybackRate():void 0},AblePlayer.prototype.isPaused=function(){if("vimeo"===this.player)return!this.playing;this.getPlayerState().then(function(t){return"paused"===t\|\|"stopped"===t\|\|"ended"===t})},AblePlayer.prototype.syncSignVideo=function(t){this.hasSignLanguage&&(this.signVideo\|\|this.signYoutube)&&(t&&void 0!==t.time&&(this.signVideo?this.signVideo.currentTime=t.time:this.youTubeSignPlayer.seekTo(t.time,!0)),t&&void 0!==t.rate&&(this.signVideo?this.signVideo.playbackRate=t.rate:this.youTubeSignPlayer.setPlaybackRate(t.rate)),t&&void 0!==t.pause&&(this.signVideo?this.signVideo.pause(!0):this.youTubeSignPlayer.pauseVideo()),t&&void 0!==t.play&&(this.signVideo?this.signVideo.play(!0):this.youTubeSignPlayer.playVideo()),t&&void 0!==t.volume&&this.signVideo&&(this.signVideo.volume=0))},AblePlayer.prototype.pauseMedia=function(){this.syncSignVideo({pause:!0}),"html5"===this.player?this.media.pause(!0):"youtube"===this.player?this.youTubePlayer.pauseVideo():"vimeo"===this.player&&this.vimeoPlayer.pause()},AblePlayer.prototype.playMedia=function(){this.syncSignVideo({play:!0}),"html5"===this.player?this.media.play(!0):"youtube"===this.player?(this.youTubePlayer.playVideo(),void 0!==this.$posterImg&&this.$posterImg.hide(),this.stoppingYouTube=!1):"vimeo"===this.player&&this.vimeoPlayer.play(),this.startedPlaying=!0,this.hideControls&&(this.hidingControls=!0,this.invokeHideControlsTimeout())},AblePlayer.prototype.fadeControls=function(t){"out"==t?this.$playerDiv.addClass("fade-out").removeClass("fade-in"):"in"==t&&this.$playerDiv.addClass("fade-in").removeClass("fade-out")},AblePlayer.prototype.invokeHideControlsTimeout=function(){var t=this;this.hideControlsTimeout=window.setTimeout(function(){void 0!==t.playing&&!0===t.playing&&t.hideControls&&(t.fadeControls("out"),t.controlsHidden=!0)},5e3),this.hideControlsTimeoutStatus="active"},AblePlayer.prototype.refreshControls=function(e="init",i,a){var s,n,r,o,l,h,p,c,u,d,f,g,m;if((e="init",s=this,!this.swappingSrc\|\|!this.playing)&&void 0!==this.duration){if(this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.chapterElapsed=this.getChapterElapsed()),!this.useFixedSeekInterval&&!this.seekIntervalCalculated&&this.duration>0&&this.setSeekInterval(),this.seekBar&&(this.useChapterTimes?(h=this.selectedChapters.cues.length-1,this.selectedChapters.cues[h]==this.currentChapter&&this.currentChapter.end!==this.duration?this.seekBar.setDuration(this.duration-this.currentChapter.start):this.seekBar.setDuration(this.chapterDuration)):void 0===this.duration\|\|isNaN(this.duration)\|\|-1===this.duration\|\|this.seekBar.setDuration(this.duration),this.seekBar.tracking\|\|(c=this.liveUpdatePending\|\|this.seekBar.seekHead.is(t(document.activeElement)),this.liveUpdatePending=!1,this.useChapterTimes?this.seekBar.setPosition(this.chapterElapsed,c):this.seekBar.setPosition(this.elapsed,c)),p=this.seekBar.tracking?this.seekBar.lastTrackPosition:this.useChapterTimes?this.chapterElapsed:this.elapsed),void 0!==this.$durationContainer&&(this.useChapterTimes?this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.chapterDuration)):this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.duration))),void 0!==this.$elapsedTimeContainer&&this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(p)),"legacy"===this.skin&&this.seekBar){let e=this.seekBar.wrapperDiv.parent().parent();f=(d=this.seekBar.wrapperDiv.parent().prev("div.able-left-controls")).next("div.able-right-controls"),u=d.outerWidth(!0),f.children().each(function(){"button"==t(this).attr("role")&&(u+=t(this).outerWidth(!0)+5)}),g=this.fullscreen?t(window).width()-u:e.width()-u-10,Math.abs(g-this.seekBar.getWidth())>5&&this.seekBar.setWidth(g)}if("html5"===this.player&&this.media.buffered.length>0?(m=this.media.buffered.end(0),this.useChapterTimes?(m>this.chapterDuration&&(m=this.chapterDuration),this.seekBar&&this.seekBar.setBuffered(m/this.chapterDuration)):this.seekBar&&!isNaN(m)&&this.seekBar.setBuffered(m/i)):"youtube"===this.player&&this.seekBar&&this.youTubePlayerReady?this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()):this.player,this.$descButton&&this.toggleButtonState(this.$descButton,this.descOn,this.translate("turnOffDescriptions","Turn off descriptions"),this.translate("turnOnDescriptions","Turn on descriptions")),this.$ccButton){(o=this.captions.length)>1&&this.$ccButton.attr({"aria-haspopup":"true","aria-controls":this.mediaId+"-captions-menu"});var v=o>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),y=o>1?this.translate("captions","Captions"):this.translate("hideCaptions","Hide captions"),b=o>1;this.toggleButtonState(this.$ccButton,this.captionsOn,y,v,b)}this.$fullscreenButton&&(this.fullscreen?(this.$fullscreenButton.attr("aria-label",this.translate("exitFullScreen","Exit full screen")),this.getIcon(this.$fullscreenButton,"fullscreen-collapse")):(this.$fullscreenButton.attr("aria-label",this.translate("enterFullScreen","Enter full screen")),this.getIcon(this.$fullscreenButton,"fullscreen-expand"))),void 0!==this.$bigPlayButton&&void 0!==this.seekBar&&(this.paused&&!this.seekBar.tracking?this.hideBigPlayButton\|\|(this.$bigPlayButton.show(),this.$bigPlayButton.attr("aria-hidden","false")):(this.$bigPlayButton.hide(),this.$bigPlayButton.attr("aria-hidden","true"))),this.transcriptType&&(1===this.prefAutoScrollTranscript?(this.autoScrollTranscript=!0,this.$autoScrollTranscriptCheckbox.prop("checked",!0)):(this.autoScrollTranscript=!1,this.$autoScrollTranscriptCheckbox.prop("checked",!1)),this.autoScrollTranscript&&this.currentHighlight&&(l=Math.floor(this.$transcriptDiv.scrollTop()+t(this.currentHighlight).position().top-this.$transcriptDiv.height()/2+t(this.currentHighlight).height()/2))!==Math.floor(this.$transcriptDiv.scrollTop())&&(this.scrollingTranscript=!0,this.movingHighlight&&(this.$transcriptDiv.scrollTop(l),this.movingHighlight=!1))),this.$chaptersButton&&this.$chaptersButton.attr({"aria-label":this.translate("chapters","Chapters"),"aria-haspopup":"true","aria-controls":this.mediaId+"-chapters-menu"}),n={stopped:this.translate("statusStopped","Stopped"),paused:this.translate("statusPaused","Paused"),playing:this.translate("statusPlaying","Playing"),buffering:this.translate("statusBuffering","Buffering"),ended:this.translate("statusEnd","End of track")},this.stoppingYouTube?(this.$status.text()!==this.translate("statusStopped","Stopped")&&this.$status.text(this.translate("statusStopped","Stopped")),this.getIcon(this.$playpauseButton,"play")):void 0!==this.$status&&void 0!==this.seekBar&&this.getPlayerState().then(function(t){s.$status.text()===n[t]\|\|s.seekBar.tracking?(s.statusDebounceStart=null,s.debouncingStatus=!1,clearTimeout(s.statusTimeout),s.statusTimeout=null):(s.swappingSrc?s.debouncingStatus\|\|(s.statusMessageThreshold=2e3):s.debouncingStatus\|\|(s.statusMessageThreshold=250),r=(new Date).getTime(),s.statusDebounceStart?r-s.statusDebounceStart>s.statusMessageThreshold&&(s.$status.text(n[t]),s.statusDebounceStart=null,clearTimeout(s.statusTimeout),s.statusTimeout=null):(s.statusDebounceStart=r,s.debouncingStatus=!0,s.statusTimeout=setTimeout(function(){s.debouncingStatus=!1,s.refreshControls(e)},s.statusMessageThreshold))),s.seekBar.tracking\|\|s.stoppingYouTube\|\|("paused"===t\|\|"stopped"===t\|\|"ended"===t?(s.$playpauseButton.attr("aria-label",s.tt.play),s.getIcon(s.$playpauseButton,"play")):(s.$playpauseButton.attr("aria-label",s.tt.pause),s.getIcon(s.$playpauseButton,"pause")))}),this.fullscreen\|\|(this.$statusBarDiv.width()<300?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1))}},AblePlayer.prototype.handlePlay=function(t){this.paused?(this.okToPlay=!0,this.playMedia(),this.synth.paused&&this.synth.resume()):(this.okToPlay=!1,this.pauseMedia(),this.speakingDescription&&this.synth.pause()),null===this.speechEnabled&&this.initSpeech("play")},AblePlayer.prototype.handleRestart=function(){this.speakingDescription&&this.synth.cancel(),this.seekTo(0)},AblePlayer.prototype.handlePrevTrack=function(){this.playlistIndex=0===this.playlistIndex?this.$playlist.length-1:this.playlistIndex--,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleNextTrack=function(){this.playlistIndex=this.playlistIndex===this.$playlist.length-1?0:this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleRewind=function(){var t;t=this.elapsed-this.seekInterval,this.useChapterTimes&&t<this.currentChapter.start?t=this.currentChapter.start:t<0&&(t=0),this.seekTo(t)},AblePlayer.prototype.handleFastForward=function(){var t,e;e=this.chapters.length-1,t=this.elapsed+this.seekInterval,this.useChapterTimes?this.chapters[e]==this.currentChapter?(t>this.duration\|\|t>this.currentChapter.end\|\|this.duration%t<this.seekInterval)&&(t=Math.min(this.duration,this.currentChapter.end)):t>this.currentChapter.end&&(t=this.currentChapter.end):t>this.duration&&(t=this.duration),this.seekTo(t)},AblePlayer.prototype.handleRateIncrease=function(){this.changeRate(1)},AblePlayer.prototype.handleRateDecrease=function(){this.changeRate(-1)},AblePlayer.prototype.changeRate=function(t){var e,i,a,s;"html5"===this.player?this.setPlaybackRate(this.getPlaybackRate()+.25t):"youtube"===this.player?this.youTubePlayerReady&&(e=this.youTubePlayer.getAvailablePlaybackRates(),i=this.getPlaybackRate(),-1===(a=e.indexOf(i))\|\|(a+=t)<e.length&&a>=0&&this.setPlaybackRate(e[a])):"vimeo"===this.player&&(1===t?s=this.vimeoPlaybackRate+.5<=2?this.vimeoPlaybackRate+.5:2:-1===t&&(s=this.vimeoPlaybackRate-.5>=.5?this.vimeoPlaybackRate-.5:.5),this.setPlaybackRate(s))},AblePlayer.prototype.handleCaptionToggle=function(){var t,e,i=this;if(this.hidingPopup)return this.hidingPopup=!1,!1;if(1===(t=this.captions.length?this.captions:[]).length)if(!0===this.captionsOn)this.captionsOn=!1,this.prefCaptions=0,e=!1,this.updatePreferences("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.unloadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.disableTextTrack():this.$captionsWrapper.hide();else{this.captionsOn=!0,this.prefCaptions=1,e=!0,this.updatePreferences("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.loadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(t){}).catch(function(t){t.name}):this.$captionsWrapper.show();for(var a=0;a<t.length;a++)!0===t[a].def&&(this.selectedCaptions=t[a]);this.selectedCaptions=this.captions[0],this.descriptions.length>=0&&(this.selectedDescriptions=this.descriptions[0])}else this.captionsPopup&&this.captionsPopup.is(":visible")?(this.captionsPopup.hide(),this.hidingPopup=!1,this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)):(this.closePopups(),this.captionsPopup&&(this.captionsPopup.show(),this.$ccButton.attr("aria-expanded","true"),setTimeout(function(){i.captionsPopup.css("top",i.$ccButton.position().top-i.captionsPopup.outerHeight()),i.captionsPopup.css("left",i.$ccButton.position().left),i.captionsPopup.find("li").removeClass("able-focus"),i.captionsPopup.find("li").first().trigger("focus").addClass("able-focus")},50)));var s=t.length>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),n=t.length>1?this.translate("captions","Captions"):this.translate("hideCaptions","Hide captions");this.toggleButtonState(this.$ccButton,this.captionsOn,n,s,e)},AblePlayer.prototype.waitThenFocus=function(t,e){setTimeout(function(){t.trigger("focus")},null==e?50:e)},AblePlayer.prototype.handleChapters=function(){if(this.hidingPopup)return this.hidingPopup=!1,!1;this.chaptersPopup.is(":visible")?(this.chaptersPopup.hide(),this.hidingPopup=!1,this.$chaptersButton.attr("aria-expanded","false").trigger("focus")):(this.closePopups(),this.chaptersPopup.show(),this.$chaptersButton.attr("aria-expanded","true"),this.chaptersPopup.css("top",this.$chaptersButton.position().top-this.chaptersPopup.outerHeight()),this.chaptersPopup.css("left",this.$chaptersButton.position().left),this.chaptersPopup.find("li").removeClass("able-focus"),this.chaptersPopup.find('li[aria-checked="true"]').length?this.chaptersPopup.find('li[aria-checked="true"]').trigger("focus").addClass("able-focus"):this.chaptersPopup.find("li").first().addClass("able-focus").attr("aria-checked","true").trigger("focus"))},AblePlayer.prototype.handleDescriptionToggle=function(){this.descOn=!this.descOn,this.prefDesc=+this.descOn,this.updatePreferences("prefDesc"),void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")\|\|this.$descDiv.hide()),this.initDescription(),this.refreshControls("descriptions")},AblePlayer.prototype.handlePrefsClick=function(t){var e,i,a,s;if(e=this,null===this.speechEnabled&&this.initSpeech("prefs"),this.hidingPopup)return this.hidingPopup=!1,!1;this.prefsPopup.is(":visible")?(this.prefsPopup.hide(),this.$prefsButton.attr("aria-expanded","false"),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.showingPrefsDialog\|\|this.$prefsButton.trigger("focus"),setTimeout(function(){e.hidingPopup=!1},100)):(this.closePopups(),this.prefsPopup.show(),this.$prefsButton.attr("aria-expanded","true"),this.$prefsButton.trigger("focus"),setTimeout(function(){i=e.$prefsButton.position(),a=e.$ableDiv.width()-5,s=a-e.prefsPopup.width(),e.prefsPopup.css("top",i.top-e.prefsPopup.outerHeight()),e.prefsPopup.css("left",s),e.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","0"),e.prefsPopup.find("li").first().trigger("focus").addClass("able-focus")},50))},AblePlayer.prototype.handleTranscriptToggle=function(){var t=this,e=this.$transcriptDiv.is(":visible");e?(this.$transcriptArea.hide(),this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.prefTranscript=0,"popup"===this.transcriptType&&(this.$transcriptButton.trigger("focus").addClass("able-focus"),setTimeout(function(){t.closingTranscript=!1},100))):"popup"===this.transcriptType?(this.positionDraggableWindow("transcript"),this.$transcriptArea.show(),this.$transcriptPopup.hide(),this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.prefTranscript=1,this.focusNotClick=!0,this.$transcriptArea.find("button").first().trigger("focus"),setTimeout(function(){t.focusNotClick=!1},100)):(this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.$transcriptArea.show()),this.updatePreferences("prefTranscript")},AblePlayer.prototype.handleSignToggle=function(){var t=this,e=this.$signWindow.is(":visible");e?(this.$signWindow.hide(),this.toggleButtonState(this.$signButton,!e,this.translate("hideSign","Hide sign language"),this.translate("showSign","Show sign language")),this.prefSign=0,this.$signButton.trigger("focus").addClass("able-focus"),setTimeout(function(){t.closingSign=!1},100)):(this.positionDraggableWindow("sign"),this.$signWindow.show(),this.$signPopup.hide(),this.toggleButtonState(this.$signButton,!e,this.translate("hideSign","Hide sign language"),this.translate("showSign","Show sign language")),this.prefSign=1,this.focusNotClick=!0,this.$signWindow.find("button").first().trigger("focus"),setTimeout(function(){t.focusNotClick=!1},100)),this.updatePreferences("prefSign")},AblePlayer.prototype.setFullscreen=function(e){if(this.fullscreen!=e){var i=this,a=this.$ableWrapper[0];if(this.nativeFullscreenSupported())if(e){var s={x:window.pageXOffset\|\|0,y:window.pageYOffset\|\|0};1===this.prefTranscript&&this.rePositionDraggableWindow("transcript"),1===this.prefSign&&this.rePositionDraggableWindow("sign"),this.scrollPosition=s,a.requestFullscreen?a.requestFullscreen():a.webkitRequestFullscreen&&a.webkitRequestFullscreen(),this.fullscreen=!0}else this.restoringAfterFullscreen=!0,document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullscreen&&document.webkitCancelFullscreen(),1===this.prefTranscript&&this.positionDraggableWindow("transcript"),1===this.prefSign&&this.positionDraggableWindow("sign"),this.fullscreen=!1;t(document).on("fullscreenchange webkitfullscreenchange",function(t){i.fullscreen?i.clickedFullscreenButton\|\|(i.fullscreen=!1,i.restoringAfterFullscreen=!0):i.restoringAfterFullscreen=!0,i.resizePlayer(),i.refreshControls("fullscreen"),i.scrollPosition&&(s=i.scrollPosition,window.scrollTo(s.x,s.y)),setTimeout(function(){i.clickedFullscreenButton=!1,i.restoringAfterFullscreen=!1},100)})}},AblePlayer.prototype.handleFullscreenToggle=function(){var t=this.paused;this.setFullscreen(!this.fullscreen),t?this.pauseMedia():t\|\|this.playMedia(),this.fullscreen?(this.hideControls=!0,this.playing&&(this.fadeControls("out"),this.controlsHidden=!0)):(this.hideControls=this.hideControlsOriginal,this.hideControls\|\|(this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear")))},AblePlayer.prototype.handleTranscriptLockToggle=function(t){this.autoScrollTranscript=t,this.prefAutoScrollTranscript=+t,this.updatePreferences("prefAutoScrollTranscript"),this.refreshControls("transcript")},AblePlayer.prototype.getIcon=function(e,i,a=!1){var s=this.iconType,n=this.getIconData(i);if(s=null===n[3]?"svg":s,s=!0===a?"img":s,!(e.find(s+"#ableplayer-"+i).length>0))if(e.find("svg, img, span").remove(),"font"===s){var r=t("<span>",{class:n[2]});e.append(r)}else if("svg"===s){var o=document.createElementNS("http://www.w3.org/2000/svg","svg");o.setAttribute("focusable","false"),o.setAttribute("aria-hidden","true"),o.setAttribute("viewBox",n[0]),o.setAttribute("id","ableplayer-"+i);let t=function getNode(t,e){for(var i in t=document.createElementNS("http://www.w3.org/2000/svg",t),e)t.setAttributeNS(null,i.replace(/[A-Z]/g,function(t){return"-"+t.toLowerCase()}),e[i]);return t}("path",{d:n[1]});o.appendChild(t),e.append(o),e.html(e.html())}else{var l=t("<img>",{src:n[3],alt:"",role:"presentation"});e.append(l),e.find("img").attr("src",n[3])}},AblePlayer.prototype.setText=function(t,e){t.attr("aria-label",e)},AblePlayer.prototype.toggleButtonState=function(t,e,i,a,s=!1,n=!1){let r=!!t.hasClass("buttonOff");r&&!e\|\|!r&&e\|\|(e?(t.removeClass("buttonOff").attr("aria-label",i),s&&t.attr("aria-pressed","true"),n&&t.attr("aria-expanded","true")):(t.addClass("buttonOff").attr("aria-label",a),s&&t.attr("aria-pressed","false"),n&&t.attr("aria-expanded","false")))},AblePlayer.prototype.showTooltip=function(t){t.show()},AblePlayer.prototype.showAlert=function(t,e="main"){var i,a,s;a=(i=this).$alertBox,s=i.$ableDiv,"transcript"===e?s=i.$transcriptArea:"sign"===e?s=i.$signWindow:"screenreader"===e&&(a=i.$srAlertBox),a.find("span").text(t),a.appendTo(s),a.css({display:"flex"}),"screenreader"!==e&&setTimeout(function(){a.hide()},3e4)},AblePlayer.prototype.showedAlert=function(t){return"transcript"===t?this.showedTranscriptAlert??!1:"sign"===t&&(this.showedSignAlert??!1)},AblePlayer.prototype.resizePlayer=function(e,i){var a,s,n,r;if("audio"!==this.mediaType){if(void 0!==e&&void 0!==i?(this.aspectRatio=i/e,this.playerWidth?(s=this.playerWidth,this.playerHeight?n=this.playerHeight:(n=Math.round(sthis.aspectRatio),this.playerHeight=n)):(s="html5"===this.player?t(window).width():this.$ableWrapper.width(),n=Math.round(sthis.aspectRatio))):this.fullscreen?(this.$ableWrapper.addClass("fullscreen"),s=t(window).width(),n=t(window).height()-this.$playerDiv.outerHeight()-5,this.positionCaptions("overlay")):(this.$ableWrapper.removeClass("fullscreen"),s="html5"===this.player?this.playerWidth?this.playerWidth:t(window).width():this.$ableWrapper.width(),n=Math.round(sthis.aspectRatio),this.positionCaptions(this.prefCaptionsPosition)),this.debug,"youtube"===this.player\|\|"vimeo"===this.player?(r=this.$ableWrapper.find("iframe"),"youtube"===this.player&&this.youTubePlayer?this.youTubePlayer.setSize(s,n):r.attr({width:s,height:n}),this.playerWidth&&this.playerHeight&&(this.fullscreen?r.css({"max-width":"","max-height":""}):r.css({"max-width":this.playerWidth+"px","max-height":this.playerHeight+"px"}))):"html5"===this.player&&(this.fullscreen?(this.$media.attr({width:s,height:n}),this.$ableWrapper.css({width:s,height:n})):(this.$media.removeAttr("width height"),this.$ableWrapper.removeAttr("style"))),void 0!==this.$captionsDiv){var o=!1;window.screen.width<1200&&(o=!0),a=parseInt(this.prefCaptionsSize,10),this.fullscreen&&!o?a=a/100+"vw":this.fullscreen&&o?a="1.2rem":a+="%",this.$captionsDiv.css({"font-size":a})}this.refreshControls()}},AblePlayer.prototype.retrieveOffscreenWindow=function(t,e,i){var a,s,n,r,o,l,h,p;"transcript"==t?a=this.$transcriptArea:"sign"==t&&(a=this.$signWindow),l=a.width(),p=a.height(),n=(s=a.position()).top,o=(r=s.left)+l,h=n+p,n<0&&(n=10,a.css("top",n)),r<0&&(r=10,a.css("left",r)),o>e&&(r=e-20-l,a.css("left",r)),h>i&&(n=i-10-p,a.css("top",n))},AblePlayer.prototype.updateZIndex=function(t){var e,i,a,s,n,r;if(e=8e3,i=7e3,void 0===this.$transcriptArea\|\|void 0===this.$signWindow)return void 0!==this.$transcriptArea?(a=parseInt(this.$transcriptArea.css("z-index")))>i&&this.$transcriptArea.css("z-index",i):void 0!==this.$signWindow&&(s=parseInt(this.$signWindow.css("z-index")))>e&&this.$signWindow.css("z-index",e),!1;if((a=parseInt(this.$transcriptArea.css("z-index")))===(s=parseInt(this.$signWindow.css("z-index"))))n=e,r=i;else if(a>s){if("transcript"===t)return!1;n=a,r=s}else{if("sign"===t)return!1;n=s,r=a}"transcript"===t?(this.$transcriptArea.css("z-index",n),this.$signWindow.css("z-index",r)):"sign"===t&&(this.$signWindow.css("z-index",n),this.$transcriptArea.css("z-index",r))},AblePlayer.prototype.syncTrackLanguages=function(t,e){var i,a,s,n,r;for(i=0;i<this.captions.length;i++)this.captions[i].language===e&&(a=this.captions[i]);for(i=0;i<this.chapters.length;i++)this.chapters[i].language===e&&(n=this.chapters[i]);for(i=0;i<this.descriptions.length;i++)this.descriptions[i].language===e&&(s=this.descriptions[i]);for(i=0;i<this.meta.length;i++)this.meta[i].language===e&&(r=this.meta[i]);if(this.transcriptLang=e,"init"===t\|\|"captions"===t?(this.captionLang=e,this.selectedCaptions=a,this.selectedChapters=n,this.selectedDescriptions=s,this.selectedMeta=r,this.transcriptCaptions=a,this.transcriptChapters=n,this.transcriptDescriptions=s,this.updateChaptersList()):"transcript"===t&&(this.transcriptCaptions=a,this.transcriptChapters=n,this.transcriptDescriptions=s),this.selectedDescriptions&&(this.setDescriptionVoice(),this.$sampleDescDiv&&this.sampleText))for(i=0;i<this.sampleText.length;i++)this.sampleText[i].lang===this.selectedDescriptions.language&&(this.currentSampleText=this.sampleText[i].text,this.$sampleDescDiv.html(this.currentSampleText));this.updateTranscript()}}(jQuery),function(t){AblePlayer.prototype.updateCaption=function(t){this.usingYouTubeCaptions\|\|this.usingVimeoCaptions\|\|void 0===this.$captionsWrapper\|\|(this.captionsOn?(this.$captionsWrapper.show(),void 0!==t&&this.showCaptions(t)):this.$captionsWrapper&&(this.$captionsWrapper.hide(),this.prefCaptions=0))},AblePlayer.prototype.updateCaptionsMenu=function(t){this.captionsPopup.find("li").attr("aria-checked","false"),void 0===t?this.captionsPopup.find("li").last().attr("aria-checked","true"):this.captionsPopup.find("li[lang="+t+"]").attr("aria-checked","true")},AblePlayer.prototype.getCaptionClickFunction=function(t){var e=this;return function(){e.selectedCaptions=t,e.captionLang=t.language,e.currentCaption=-1,e.usingYouTubeCaptions?e.captionsOn?e.youTubePlayer.getOptions("captions")&&e.startedPlaying?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):e.captionLangPending=e.captionLang:e.youTubePlayer.getOptions("captions")?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):(e.youTubePlayer.loadModule("captions"),e.captionLangPending=e.captionLang):e.usingVimeoCaptions?e.vimeoPlayer.enableTextTrack(e.captionLang).then(function(t){}).catch(function(t){t.name}):(e.syncTrackLanguages("captions",e.captionLang),e.swappingSrc\|\|(e.updateCaption(e.elapsed),e.showDescription(e.elapsed))),e.captionsOn=!0,e.hidingPopup=!0,e.captionsPopup.hide(),e.$ccButton.attr("aria-expanded","false"),"audio"===e.mediaType&&e.$captionsContainer.removeClass("captions-off"),setTimeout(function(){e.hidingPopup=!1},100),e.updateCaptionsMenu(e.captionLang),e.waitThenFocus(e.$ccButton),e.prefCaptions=1,e.updatePreferences("prefCaptions"),e.refreshControls("captions")}},AblePlayer.prototype.getCaptionOffFunction=function(){var t=this;return function(){"youtube"==t.player?t.youTubePlayer.unloadModule("captions"):t.usingVimeoCaptions&&t.vimeoPlayer.disableTextTrack(),t.captionsOn=!1,t.currentCaption=-1,"audio"===t.mediaType&&t.$captionsContainer.addClass("captions-off"),t.hidingPopup=!0,t.captionsPopup.hide(),t.$ccButton.attr("aria-expanded","false"),setTimeout(function(){t.hidingPopup=!1},100),t.updateCaptionsMenu(),t.waitThenFocus(t.$ccButton),t.prefCaptions=0,t.updatePreferences("prefCaptions"),this.swappingSrc\|\|(t.refreshControls("captions"),t.updateCaption())}},AblePlayer.prototype.showCaptions=function(t){var e,i,a,s;for(s=this.selectedCaptions.cues.length?this.selectedCaptions.cues:this.captions.length>=1?this.captions[0].cues:[],e=0;e<s.length;e++)if(s[e].start<=t&&s[e].end>t){i=e;break}void 0!==i?this.currentCaption!==i&&(a=this.flattenCueForCaption(s[i]).replace(/\n/g,"<br>"),this.$captionsDiv.html(a),this.currentCaption=i,0===a.length?this.$captionsDiv.css("display","none"):this.$captionsDiv.css("display","inline-block")):(this.$captionsDiv.html("").css("display","none"),this.currentCaption=-1)},AblePlayer.prototype.flattenCueForCaption=function(t){var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("("+t.value+")"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else if("i"===t.type){for(i.push("<em>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</em>")}else if("b"===t.type){for(i.push("<strong>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</strong>")}else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")};if(void 0!==t.components)for(var i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")},AblePlayer.prototype.getCaptionsOptions=function(t){var e=[];switch(t){case"prefCaptionsFont":e[0]=["serif",this.translate("serif","serif")],e[1]=["sans-serif",this.translate("sans","sans-serif")],e[2]=["cursive",this.translate("cursive","cursive")],e[3]=["fantasy",this.translate("fantasy","fantasy")],e[4]=["monospace",this.translate("monospace","monospace")];break;case"prefCaptionsColor":case"prefCaptionsBGColor":e[0]=["white",this.translate("white","white")],e[1]=["yellow",this.translate("yellow","yellow")],e[2]=["green",this.translate("green","green")],e[3]=["cyan",this.translate("cyan","cyan")],e[4]=["blue",this.translate("blue","blue")],e[5]=["magenta",this.translate("magenta","magenta")],e[6]=["red",this.translate("red","red")],e[7]=["black",this.translate("black","black")];break;case"prefCaptionsSize":e[0]="75%",e[1]="100%",e[2]="125%",e[3]="150%",e[4]="200%";break;case"prefCaptionsOpacity":e[0]="0%",e[1]="25%",e[2]="50%",e[3]="75%",e[4]="100%";break;case"prefCaptionsStyle":e[0]=this.translate("captionsStylePopOn","Pop-on"),e[1]=this.translate("captionsStyleRollUp","Roll-up");break;case"prefCaptionsPosition":e[0]="overlay",e[1]="below"}return e},AblePlayer.prototype.translatePrefs=function(t,e,i){if("youtube"==i&&"size"===t)switch(e){case"75%":return-1;case"100%":return 0;case"125%":return 1;case"150%":return 2;case"200%":return 3}return!1},AblePlayer.prototype.stylizeCaptions=function(e,i){var a,s,n;void 0!==e&&("prefCaptionsPosition"==i?this.positionCaptions():void 0!==i?("prefCaptionsFont"===i?a="font-family":"prefCaptionsSize"===i?a="font-size":"prefCaptionsColor"===i?a="color":"prefCaptionsBGColor"===i?a="background-color":"prefCaptionsOpacity"===i&&(a="opacity"),s="prefCaptionsOpacity"===i?parseFloat(t("#"+this.mediaId+"_"+i).val())/100:t("#"+this.mediaId+"_"+i).val(),e.css(a,s)):(n=parseFloat(this.prefCaptionsOpacity)/100,e.css({"font-family":this.prefCaptionsFont,color:this.prefCaptionsColor,"background-color":this.prefCaptionsBGColor,opacity:n}),e===this.$captionsDiv&&void 0!==this.$captionsDiv&&this.$captionsDiv.css({"font-size":this.prefCaptionsSize}),"below"===this.prefCaptionsPosition?void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"}):"overlay"===this.prefCaptionsPosition&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":"transparent",opacity:""}),this.positionCaptions()))},AblePlayer.prototype.positionCaptions=function(t){void 0===t&&(t=this.prefCaptionsPosition),void 0!==this.$captionsWrapper&&("below"==t?(this.$captionsWrapper.removeClass("able-captions-overlay").addClass("able-captions-below"),this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"})):(this.$captionsWrapper.removeClass("able-captions-below").addClass("able-captions-overlay"),this.$captionsWrapper.css({"background-color":"transparent",opacity:""})))}}(jQuery),function(t){AblePlayer.prototype.populateChaptersDiv=function(){var e,i,a;this.chaptersDivLocation&&t("#"+this.chaptersDivLocation)&&(this.$chaptersDiv=t("#"+this.chaptersDivLocation),this.$chaptersDiv.addClass("able-chapters-div"),this.$chaptersDiv.empty(),this.chaptersTitle&&(e="h"+this.getNextHeadingLevel(this.$chaptersDiv).toString(),i=this.mediaId+"-chapters-heading",a=t("<"+e+">",{class:"able-chapters-heading",id:i}).text(this.chaptersTitle),this.$chaptersDiv.append(a)),this.$chaptersNav=t("<nav>"),this.chaptersTitle?this.$chaptersNav.attr("aria-labelledby",i):this.$chaptersNav.attr("aria-label",this.translate("chapters","Chapters")),this.$chaptersDiv.append(this.$chaptersNav),this.updateChaptersList())},AblePlayer.prototype.updateChaptersList=function(){var e,i,a,s,n,r,o,l,h,p;if(e=this,!this.$chaptersNav)return!1;if(void 0===this.useChapterTimes&&(this.useChapterTimes=!("chapter"!==this.seekbarScope\|\|!this.selectedChapters.cues.length)),(i=this.useChapterTimes?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[]).length>0){for(p=t("<ul>"),a=0;a<i.length;a++)s=a,n=t("<li></li>"),l=function(i){return function(){e.seekTrigger="chapter",h=t(this).closest("li"),(p=t(this).closest("ul").find("li")).removeClass("able-current-chapter").children("button").removeAttr("aria-current"),h.addClass("able-current-chapter").children("button").attr("aria-current","true"),e.updateChapter(i),e.seekTo(i)}},(r=t("<button>",{type:"button",val:s}).text(this.flattenCueForCaption(i[s]))).on("click",l(i[s].start)),r.on("focus",function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).closest("li").addClass("able-focus")}),n.on("hover",function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).addClass("able-focus")}),n.on("mouseleave",function(){t(this).removeClass("able-focus")}),r.on("blur",function(){t(this).closest("li").removeClass("able-focus")}),n.append(r),p.append(n),this.defaultChapter===i[s].id&&(r.attr("aria-current","true").parent("li").addClass("able-current-chapter"),this.currentChapter=i[s],o=!0);o\|\|(this.currentChapter=i[0],p.find("button").first().attr("aria-current","true").parent("li").addClass("able-current-chapter")),this.$chaptersNav.html(p)}return!1},AblePlayer.prototype.seekToChapter=function(t){for(var e=0;e<this.selectedChapters.cues.length;){if(this.selectedChapters.cues[e].id==t){this.seekTo(this.selectedChapters.cues[e].start),this.updateChapter(this.selectedChapters.cues[e].start);break}e++}},AblePlayer.prototype.updateChapter=function(t){if(void 0!==this.selectedChapters){var e,i,a;for(e=this.selectedChapters.cues,i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){a=i;break}void 0!==a&&this.currentChapter!==e[a]&&(this.currentChapter=e[a],this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.seekIntervalCalculated=!1),void 0!==this.$chaptersDiv&&(this.$chaptersDiv.find("ul").find("li").removeClass("able-current-chapter").children("button").removeAttr("aria-current"),this.$chaptersDiv.find("ul").find("li").eq(a).addClass("able-current-chapter").children("button").attr("aria-current","true")))}},AblePlayer.prototype.getChapterDuration=function(){var t,e;return void 0===this.currentChapter\|\|void 0===this.duration?0:(t=this.selectedChapters.cues.length-1,this.selectedChapters.cues[t]==this.currentChapter&&this.currentChapter.end!==this.duration?(e=this.duration,this.currentChapter.end=this.duration):e=this.currentChapter.end,e-this.currentChapter.start)},AblePlayer.prototype.getChapterElapsed=function(){return void 0===this.currentChapter?0:this.elapsed>this.currentChapter.start?this.elapsed-this.currentChapter.start:0},AblePlayer.prototype.convertChapterTimeToVideoTime=function(t){if(void 0!==this.currentChapter){var e=this.currentChapter.start+t;return e>this.currentChapter.end?this.currentChapter.end:e}return t},AblePlayer.prototype.getChapterClickFunction=function(t){var e=this;return function(){e.seekTrigger="chapter",e.seekTo(t),e.hidingPopup=!0,e.chaptersPopup.hide(),setTimeout(function(){e.hidingPopup=!1},100),e.$chaptersButton.trigger("focus")}}}(jQuery),function(t){AblePlayer.prototype.updateMeta=function(t){this.hasMeta&&("text"===this.metaType?(this.$metaDiv.show(),this.showMeta(t\|\|this.elapsed)):this.showMeta(t\|\|this.elapsed))},AblePlayer.prototype.showMeta=function(e){var i,a,s,n,r,o,l,h,p;for(i=[],n=this.meta.length>=1?this.meta:[],a=0;a<n.length;a++)if(n[a].start<=e&&n[a].end>e){s=a;break}if(void 0!==s){if(this.currentMeta!==s)if("text"===this.metaType)this.$metaDiv.html(this.flattenCueForMeta(n[s]).replace(/\n/g,"<br>"));else if("selector"===this.metaType){for(r=this.flattenCueForMeta(n[s]).split("\n"),o=0;o<r.length;o++)if("pause"===(l=r[o].trim()).toLowerCase().trim())this.hideBigPlayButton=!0,this.pauseMedia();else if("focus:"==l.toLowerCase().substring(0,6))p=l.substring(6).trim(),t(p).length&&t(p).trigger("focus");else if(t(l).length){if(this.currentMeta=s,void 0===(h=parseInt(t(l).attr("data-duration")))\|\|isNaN(h))t(l).show();else{t(l).show();(t=>new Promise(e=>setTimeout(e,t)))(h).then(()=>{t(l).hide()})}this.visibleSelectors.push(l),i.push(l)}if(this.visibleSelectors&&this.visibleSelectors.length&&this.visibleSelectors.length!==i.length)for(o=this.visibleSelectors.length-1;o>=0;o--)-1==t.inArray(this.visibleSelectors[o],i)&&(t(this.visibleSelectors[o]).hide(),this.visibleSelectors.splice(o,1))}}else{if(void 0!==this.$metaDiv&&this.$metaDiv.html(""),this.visibleSelectors&&this.visibleSelectors.length){for(o=0;o<this.visibleSelectors.length;o++)t(this.visibleSelectors[o]).hide();this.visibleSelectors=[]}this.currentMeta=-1}},AblePlayer.prototype.flattenCueForMeta=function(t){for(var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("["+t.value+"]"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")},i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")}}(jQuery),function(t){AblePlayer.prototype.setupTranscript=function(){var t=new this.defer,e=t.promise();return this.usingYouTubeCaptions\|\|this.usingVimeoCaptions\|\|this.hideTranscriptButton?(this.transcriptType=null,t.resolve()):(this.transcriptType\|\|this.captions.length&&(this.transcriptType="popup"),this.transcriptType?"popup"===this.transcriptType\|\|"external"===this.transcriptType?(this.injectTranscriptArea(),t.resolve()):"manual"===this.transcriptType&&(this.setupManualTranscript(),t.resolve()):t.resolve()),e},AblePlayer.prototype.injectTranscriptArea=function(){var e,i,a,s,n;if(this.$transcriptArea=t("<div>",{class:"able-transcript-area",role:"dialog","aria-label":this.translate("transcriptTitle","Transcript")}),this.$transcriptToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$transcriptDiv=t("<div>",{class:"able-transcript"}),this.$autoScrollTranscriptCheckbox=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),e=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.translate("autoScroll","Auto scroll")),$autoScrollContainer=t("<div>",{class:"autoscroll-transcript"}),$autoScrollContainer.append(e,this.$autoScrollTranscriptCheckbox),this.$transcriptToolbar.append($autoScrollContainer),this.captions.length>1)for(i=t("<div>",{class:"transcript-language-select-wrapper"}),a=t("<label>",{for:"transcript-language-select-"+this.mediaId}).text(this.translate("language","Language")),this.$transcriptLanguageSelect=t("<select>",{id:"transcript-language-select-"+this.mediaId}),s=0;s<this.captions.length;s++)n=t("<option></option>",{value:this.captions[s].language,lang:this.captions[s].language}).text(this.captions[s].label),this.captions[s].def&&n.prop("selected",!0),this.$transcriptLanguageSelect.append(n);i&&(i.append(a,this.$transcriptLanguageSelect),this.$transcriptToolbar.append(i)),this.$transcriptArea.append(this.$transcriptToolbar,this.$transcriptDiv),this.transcriptDivLocation?(this.$transcriptArea.removeAttr("role"),this.$transcriptArea.removeAttr("aria-label"),t("#"+this.transcriptDivLocation).append(this.$transcriptArea)):this.$ableWrapper.append(this.$transcriptArea),this.transcriptDivLocation\|\|(this.initDragDrop("transcript"),1===this.prefTranscript&&this.positionDraggableWindow("transcript",this.getDefaultWidth("transcript"))),this.prefTranscript\|\|this.transcriptDivLocation\|\|this.$transcriptArea.hide()},AblePlayer.prototype.addTranscriptAreaEvents=function(){var t=this;this.$autoScrollTranscriptCheckbox.on("click",function(){t.handleTranscriptLockToggle(t.$autoScrollTranscriptCheckbox.prop("checked"))}),this.$transcriptDiv.on("mousewheel DOMMouseScroll click scroll",function(e){t.scrollingTranscript\|\|(t.autoScrollTranscript=!1,t.refreshControls("transcript")),t.scrollingTranscript=!1}),void 0!==this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.on("click",function(t){t.stopPropagation()}),this.$transcriptLanguageSelect.on("change",function(){var e=t.$transcriptLanguageSelect.val();t.syncTrackLanguages("transcript",e)}))},AblePlayer.prototype.transcriptSrcHasRequiredParts=function(){return!!(t("#"+this.transcriptSrc).length&&(this.$transcriptArea=t("#"+this.transcriptSrc),this.$transcriptArea.find(".able-window-toolbar").length&&(this.$transcriptToolbar=this.$transcriptArea.find(".able-window-toolbar").eq(0),this.$transcriptArea.find(".able-transcript").length&&(this.$transcriptDiv=this.$transcriptArea.find(".able-transcript").eq(0),this.$transcriptArea.find(".able-transcript-seekpoint").length))))&&(this.$transcriptSeekpoints=this.$transcriptArea.find(".able-transcript-seekpoint"),!0)},AblePlayer.prototype.setupManualTranscript=function(){var e,i;e=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),i=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.translate("autoScroll","Auto scroll")),this.$autoScrollTranscriptCheckbox=e,this.$transcriptToolbar.append(i,this.$autoScrollTranscriptCheckbox)},AblePlayer.prototype.updateTranscript=function(){if(this.transcriptType&&(!this.playerCreated\|\|this.$transcriptArea)){if("external"===this.transcriptType\|\|"popup"===this.transcriptType){var e,i,a;if(this.transcriptLang?i=this.transcriptCaptions.cues:this.transcriptCaptions?(this.transcriptLang=this.transcriptCaptions.language,i=this.transcriptCaptions.cues):this.selectedCaptions&&(this.transcriptLang=this.captionLang,i=this.selectedCaptions.cues),this.transcriptChapters)e=this.transcriptChapters.cues;else if(this.chapters.length>0){if(this.transcriptLang)for(var s=0;s<this.chapters.length;s++)this.chapters[s].language===this.transcriptLang&&(e=this.chapters[s].cues);void 0===e&&(e=this.chapters[0].cues\|\|[])}if(this.transcriptDescriptions)a=this.transcriptDescriptions.cues;else if(this.descriptions.length>0){if(this.transcriptLang)for(s=0;s<this.descriptions.length;s++)this.descriptions[s].language===this.transcriptLang&&(a=this.descriptions[s].cues);a\|\|(a=this.descriptions[0].cues\|\|[])}var n=this.generateTranscript(e\|\|[],i\|\|[],a\|\|[]);this.$transcriptDiv.html(n),this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.find("option:selected").prop("selected",!1),this.$transcriptLanguageSelect.find("option[lang="+this.transcriptLang+"]").prop("selected",!0))}var r=this;1===this.prefTabbable&&this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"),this.$transcriptArea.length>0&&this.$transcriptArea.find("span.able-transcript-seekpoint").on("click",function(e){r.seekTrigger="transcript";var i=parseFloat(t(this).attr("data-start"));i+=.01,r.seekingFromTranscript?r.seekingFromTranscript=!1:(r.seekingFromTranscript=!0,r.seekTo(i))})}},AblePlayer.prototype.highlightTranscript=function(e){if(this.transcriptType){var i,a,s,n=this;e=parseFloat(e),this.$transcriptArea.find("span.able-transcript-seekpoint").each(function(){if(i=parseFloat(t(this).attr("data-start")),a=parseFloat(t(this).attr("data-end")),s=!!t(this).parent().hasClass("able-transcript-chapter-heading"),e>=i&&e<=a&&!s)return t(this).hasClass("able-highlight")\|\|(n.$transcriptArea.find(".able-highlight").removeClass("able-highlight"),t(this).addClass("able-highlight"),n.movingHighlight=!0),!1}),n.currentHighlight=n.$transcriptArea.find(".able-highlight"),0===n.currentHighlight.length&&(n.currentHighlight=null)}},AblePlayer.prototype.generateTranscript=function(e,i,a){var s,n=this,r=t('<div class="able-transcript-container"></div>');if(r.attr("lang",this.transcriptLang),s=void 0!==this.transcriptTitle?this.transcriptTitle:this.lyricsMode?this.translate("lyricsTitle","Lyrics"):this.translate("transcriptTitle","Transcript"),!this.transcriptDivLocation){var o=this.playerHeadingLevel,l=(o+=1)+1;if(o<=6)var h="h"+o.toString();else h="div";var p=t("<"+h+">");p.addClass("able-transcript-heading"),o>6&&p.attr({role:"heading","aria-level":o}),p.text(s),p.attr("lang",this.lang),r.append(p)}for(var c=0,u=0,d=0,addChapter=function(e,i){if(l<=6)var a="h"+l.toString();else a="div";var s=t("<"+a+">",{class:"able-transcript-chapter-heading"});l>6&&s.attr({role:"heading","aria-level":l});for(var flattenComponentForChapter=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForChapter(t.children[i]));return e},n=t("<span>",{class:"able-transcript-seekpoint"}),r=0;r<i.components.children.length;r++)for(var o=flattenComponentForChapter(i.components.children[r]),h=0;h<o.length;h++)n.append(o[h]);n.attr("data-start",i.start.toString()),n.attr("data-end",i.end.toString()),s.append(n),e.append(s)},addDescription=function(e,i){var a=t("<div>",{class:"able-transcript-desc"}),s=t("<span>",{class:"able-hidden"});s.attr("lang",n.lang),s.text(n.tt.prefHeadingDescription+": "),a.append(s);for(var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForDescription(t.children[i]));return e},r=t("<span>",{class:"able-transcript-seekpoint"}),o=0;o<i.components.children.length;o++)for(var l=flattenComponentForDescription(i.components.children[o]),h=0;h<l.length;h++)r.append(l[h]);r.attr("data-start",i.start.toString()),r.attr("data-end",i.end.toString()),a.append(r),e.append(a)},addCaption=function(e,i){for(var a=t("<span>",{class:"able-transcript-seekpoint able-transcript-caption"}),flattenComponentForCaption=function(e){var i=[],a=0,flattenString=function(t){var e;a++;var i=[];if(""===t)return i;var s=t.indexOf("["),n=t.indexOf("]"),r=t.indexOf("("),o=t.indexOf(")"),l=-1!==s&&-1!==n,h=-1!==r&&-1!==o;if(h\|\|l){if(a>1)var p="<br/>";else p="";var c=p+'<span class="able-unspoken">',u="</span>";h&&l&&(s<r?h=!1:l=!1)}return h?(e=t.substring(0,r),e+=c,e+=t.substring(r,o+1),e+=u,e+=flattenString(t.substring(o+1)),i.push(e)):l?(e=t.substring(0,s),e+=c,e+=t.substring(s,n+1),e+=u,e+=flattenString(t.substring(n+1)),i.push(e)):i.push(t),i};if("string"===e.type)i=i.concat(flattenString(e.value));else if("v"===e.type){var s=t("<span>",{class:"able-unspoken"});e.value=e.value.replace(/^title="\|\"$/g,""),s.text("("+e.value+")"),i.push(s);for(var n=0;n<e.children.length;n++)for(var r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)i.push(r[o])}else if("b"===e.type\|\|"i"===e.type){if("b"===e.type)var l=t("<strong>");else if("i"===e.type)l=t("<em>");for(n=0;n<e.children.length;n++)for(r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)l.append(r[o]);"b"!==e.type&&"i"!=e.type\|\|i.push(l)}else for(n=0;n<e.children.length;n++)i=i.concat(flattenComponentForCaption(e.children[n]));return i},s=0;s<i.components.children.length;s++){var r;s<i.components.children.length-1&&(r=i.components.children[s+1].tagName);for(var o=flattenComponentForCaption(i.components.children[s]),l=0;l<o.length;l++){var h=o[l];"string"==typeof h&&(n.lyricsMode?(h=h.replace(/\n/g,"<br>"),(!r\|\|"i"!==r&&"b"!==r)&&(h+="<br>")):h+=" "),a.append(h)}}a.attr("data-start",i.start.toString()),a.attr("data-end",i.end.toString()),e.append(a),e.append(" \n")};c<e.length\|\|d<a.length\|\|u<i.length;){if(c<e.length&&d<a.length&&u<i.length)var f=Math.min(e[c].start,a[d].start,i[u].start);else if(c<e.length&&d<a.length)f=Math.min(e[c].start,a[d].start);else if(c<e.length&&u<i.length)f=Math.min(e[c].start,i[u].start);else if(d<a.length&&u<i.length)f=Math.min(a[d].start,i[u].start);else f=null;null!==f?void 0!==e[c]&&e[c].start===f?(addChapter(r,e[c]),c+=1):void 0!==a[d]&&a[d].start===f?(addDescription(r,a[d]),d+=1):(addCaption(r,i[u]),u+=1):c<e.length?(addChapter(r,e[c]),c+=1):d<a.length?(addDescription(r,a[d]),d+=1):u<i.length&&(addCaption(r,i[u]),u+=1)}var g=r.children(),m=0;return g.each(function(){t(this).hasClass("able-transcript-caption")?(-1===t(this).text().indexOf("[")&&-1===t(this).text().indexOf("(")\|\|m>0&&(r=wrapTranscriptBlocks(r),m=0),t(this).addClass("able-block-temp"),m++):m>0&&(r=wrapTranscriptBlocks(r),m=0)}),r=wrapTranscriptBlocks(r)};var wrapTranscriptBlocks=function(t){return t.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),t}}(jQuery),function(t){AblePlayer.prototype.showSearchResults=function(){var e=this;if(this.searchDiv&&this.searchString){var i=DOMPurify.sanitize(this.searchString);if(t("#"+this.SearchDiv)){var a="<p>"+this.translate("resultsSummary1","You searched for:")+" ";a+='<span id="able-search-term-echo">'+i+"</span>",a+="</p>";var s=this.searchFor(i,this.searchIgnoreCaps);if(s.length>0){var n=t("<p>",{class:"able-search-results-summary"}),r=this.translate("resultsSummary2","Found %1 matching items.",["<strong>"+s.length+"</strong>"]);r+=" "+this.translate("resultsSummary3","Click the time associated with any item to play the video from that point."),n.html(r);for(var o=t("<ul>"),l=0;l<s.length;l++){var h="aria-search-result-"+l,p=t("<li>",{}),c=this.secondsToTime(s[l].start),u=this.translate("searchButtonLabel","Play at %1",[c.title]),d=t("<button>",{class:"able-search-results-time","data-start":s[l].start,title:u,"aria-label":u,"aria-describedby":h});d.text(c.value),d.on("click",function(i){e.seekTrigger="search";var a=parseFloat(t(this).attr("data-start"));a+=.01,e.seeking=!0,e.seekTo(a)});var f=t("<span>",{class:"able-search-result-text",id:h});f.html("..."+s[l].caption+"..."),p.append(d,f),o.append(p)}t("#"+this.searchDiv).html(a).append(n,o)}else{var g=t("<p>").text(this.translate("noResultsFound","No results found."));t("#"+this.searchDiv).html(a).append(g)}}}},AblePlayer.prototype.searchFor=function(e,i){var a,s,n,r,o,l,h;n=[];var p=e.split(" ");if(this.captions.length>0){for(l=0;l<this.captions.length;l++)this.captions[l].language===this.searchLang&&(a=this.searchLang,s=this.captions[l].cues);if(s.length>0)for(o=0,l=0;l<s.length;l++)if(-1!==t.inArray(s[l].components.children[0].type,["string","i","b","u","v","c"])){r=this.flattenCueForCaption(s[l]);var c=i?r.toLowerCase():r;for(h=0;h<p.length;h++){var u=i?p[h].toLowerCase():p[h];if(-1!==c.indexOf(u)){n[o]=[],n[o].start=s[l].start,n[o].lang=a,n[o].caption=this.highlightSearchTerm(p,r),o++;break}}}}return n},AblePlayer.prototype.highlightSearchTerm=function(t,e){return t.forEach(function(t){var i=new RegExp(t,"gi");e=e.replace(i,'<span class="able-search-term">$&</span>')}),e},AblePlayer.prototype.secondsToTime=function(t){t=Math.floor(t);var e=parseInt(t/3600,10)%24,i=parseInt(t/60,10)%60,a=t%60,s="",n="";e>0&&(s+=e+":",n+=1==e?"1 "+this.translate("hour","hour")+" ":e+" "+this.translate("hours","hours")+" "),i<10?(s+="0"+i+":",i>0&&(n+=1==i?"1 "+this.translate("minute","minute")+" ":i+" "+this.translate("minutes","minutes")+" ")):(s+=i+":",n+=i+" "+this.translate("minutes","minutes")+" "),a<10?(s+="0"+a,a>0&&(n+=1==a?"1 "+this.translate("second","second")+" ":a+" "+this.translate("seconds","seconds")+" ")):(s+=a,n+=a+" "+this.translate("seconds","seconds")+" ");var r=[];return r.value=s,r.title=n,r}}(jQuery),function(t){AblePlayer.prototype.onMediaUpdateTime=function(t,e){var i=this;this.getMediaTimes(t,e).then(function(t){i.duration=t.duration,i.elapsed=t.elapsed,i.duration>0&&(1===i.prefHighlight&&i.highlightTranscript(i.elapsed),i.updateCaption(i.elapsed),i.showDescription(i.elapsed),i.updateChapter(i.elapsed),i.updateMeta(i.elapsed),i.refreshControls("timeline",i.duration,i.elapsed))})},AblePlayer.prototype.onMediaPause=function(){this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear"),this.refreshControls("playpause")},AblePlayer.prototype.onMediaComplete=function(){this.hasPlaylist&&!this.cueingPlaylistItem&&(this.playlistIndex===this.$playlist.length-1?this.loop?(this.playlistIndex=0,this.cueingPlaylistItem=!0,this.cuePlaylistItem(0)):(this.playing=!1,this.paused=!0):(this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex))),this.refreshControls()},AblePlayer.prototype.onMediaNewSourceLoad=function(){var t=!1;this.cueingPlaylistItem&&(this.cueingPlaylistItem=!1),this.recreatingPlayer&&(this.recreatingPlayer=!1),this.playbackRate&&this.setPlaybackRate(this.playbackRate),this.userClickedPlaylist?this.startedPlaying&&!this.okToPlay\|\|(this.playMedia(),t=!0):"restart"==this.seekTrigger\|\|"chapter"==this.seekTrigger\|\|"transcript"==this.seekTrigger\|\|"search"==this.seekTrigger?(this.playMedia(),t=!0):this.swappingSrc?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length\|\|this.loop)&&(this.playMedia(),t=!0):this.swapTime>0?"complete"===this.seekStatus?(this.okToPlay&&this.playMedia(),t=!0):"seeking"===this.seekStatus\|\|(this.swapTime===this.elapsed?(this.seekStatus="complete",this.okToPlay&&this.playMedia(),t=!0):this.hasDescTracks?t=!0:this.durationsAreCloseEnough(this.duration,this.prevDuration)?(this.seekStatus="seeking",this.seekTo(this.swapTime)):t=!0):this.playing&&(this.playMedia(),t=!0):this.startedPlaying?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length\|\|this.loop)&&(this.playMedia(),t=!0):t=!0:this.startTime>0?this.seeking?(this.seeking=!1,this.okToPlay&&this.playMedia(),t=!0):this.seekTo(this.startTime):this.defaultChapter&&void 0!==this.selectedChapters?this.seekToChapter(this.defaultChapter):(this.okToPlay&&this.playMedia(),t=!0),t&&(this.swappingSrc=!1,this.seekStatus=null,this.swapTime=0,this.seekTrigger=null,this.seekingFromTranscript=!1,this.userClickedPlaylist=!1,this.okToPlay=!1),this.refreshControls(),this.$focusedElement&&(this.restoreFocus(),this.$focusedElement=null,this.activeMedia=null)},AblePlayer.prototype.durationsAreCloseEnough=function(t,e){return Math.abs(Math.round(t)-Math.round(e))<=1},AblePlayer.prototype.restoreFocus=function(){var e,i;this.$focusedElement&&null!==this.activeMedia&&(i=t("#"+this.activeMedia).closest(".able"),"button"===this.$focusedElement.attr("role")&&(e=this.$focusedElement.attr("class").split(/\s+/),t.each(e,function(t,e){"able-button-handler-"===e.substring(0,20)&&i.find("div.able-controller div."+e).trigger("focus")})))},AblePlayer.prototype.addSeekbarListeners=function(){var t=this;this.seekBar.bodyDiv.on("startTracking",function(e){t.pausedBeforeTracking=t.paused,t.pauseMedia()}).on("tracking",function(e,i){t.highlightTranscript(i),t.updateCaption(i),t.showDescription(i),t.updateChapter(t.convertChapterTimeToVideoTime(i)),t.updateMeta(i),t.refreshControls()}).on("stopTracking",function(e,i){t.useChapterTimes?t.seekTo(t.convertChapterTimeToVideoTime(i)):t.seekTo(i),t.pausedBeforeTracking\|\|setTimeout(function(){t.playMedia()},200)})},AblePlayer.prototype.onClickPlayerButton=function(e){var i;switch(this.getButtonNameFromClass(t(e).attr("class"))){case"play":this.clickedPlay=!0,this.handlePlay();break;case"restart":this.seekTrigger="restart",this.handleRestart();break;case"previous":this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="previous",this.buttonWithFocus="previous",this.handlePrevTrack();break;case"next":this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="next",this.buttonWithFocus="next",this.handleNextTrack();break;case"rewind":this.seekTrigger="rewind",this.handleRewind();break;case"forward":this.seekTrigger="forward",this.handleFastForward();break;case"mute":this.handleMute();break;case"volume":this.handleVolumeButtonClick();break;case"faster":this.handleRateIncrease();break;case"slower":this.handleRateDecrease();break;case"captions":this.handleCaptionToggle();break;case"chapters":this.handleChapters();break;case"descriptions":this.handleDescriptionToggle();break;case"sign":this.closingSign\|\|this.handleSignToggle();break;case"preferences":"menu"===t(e).attr("data-prefs-popup")?this.handlePrefsClick():(this.showingPrefsDialog=!0,this.closePopups(),"keyboard"===(i=t(e).attr("data-prefs-popup"))?this.keyboardPrefsDialog.show():"captions"===i?this.captionPrefsDialog.show():"descriptions"===i?this.descPrefsDialog.show():"transcript"===i&&this.transcriptPrefsDialog.show(),this.showingPrefsDialog=!1);break;case"transcript":this.closingTranscript\|\|this.handleTranscriptToggle();break;case"fullscreen":this.clickedFullscreenButton=!0,this.handleFullscreenToggle()}},AblePlayer.prototype.getButtonNameFromClass=function(t){var e,i;for(e=t.split(" "),i=0;i<e.length;i++)if("able-button-handler-"===e[i].substring(0,20))return e[i].substring(20);return t},AblePlayer.prototype.okToHandleKeyPress=function(){let e=!0;1===this.prefNoKeyShortcuts&&(e=!1);var i=AblePlayer.getActiveDOMElement();return"INPUT"!==t(i).prop("tagName")&&e},AblePlayer.prototype.onPlayerKeyPress=function(e){var i,a;return i=e.key,a=t(document.activeElement),"Escape"===i&&this.$transcriptArea&&t.contains(this.$transcriptArea[0],a[0])&&!this.hidingPopup?(this.handleTranscriptToggle(),!1):!!this.okToHandleKeyPress()&&void(t(":focus").is("[contenteditable]")\|\|t(":focus").is("input")\|\|t(":focus").is("textarea")&&!this.stenoMode\|\|t(":focus").is("select")\|\|e.target.hasAttribute("contenteditable")\|\|"INPUT"===e.target.tagName\|\|"TEXTAREA"===e.target.tagName&&!this.stenoMode\|\|"SELECT"===e.target.tagName\|\|("Escape"===i?(this.closePopups(),this.$tooltipDiv.hide(),this.seekBar.hideSliderTooltips()):" "===i?"button"===a.attr("role")&&(e.preventDefault(),a.trigger("click")):"p"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePlay()):"s"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRestart()):"m"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleMute()):"v"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeButtonClick()):i>=0&&i<=9?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeKeystroke(i)):"c"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleCaptionToggle()):"d"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleDescriptionToggle()):"f"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleFastForward()):"r"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRewind()):"b"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrevTrack()):"n"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleNextTrack()):"e"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrefsClick()):"Enter"===i&&("button"===a.attr("role")\|\|"SPAN"===a.prop("tagName")\|\|"LI"===a.prop("tagName"))&&a.trigger("click")))},AblePlayer.prototype.addHtml5MediaListeners=function(){var t=this;this.$media.on("emptied",function(){}).on("loadedmetadata",function(){t.duration=t.media.duration}).on("canplay",function(){}).on("canplaythrough",function(){t.onMediaNewSourceLoad()}).on("play",function(){}).on("playing",function(){t.playing=!0,t.paused=!1,t.swappingSrc=!1,t.refreshControls("playpause")}).on("ended",function(){t.playing=!1,t.paused=!0,t.onMediaComplete()}).on("progress",function(){t.refreshControls("timeline")}).on("waiting",function(){}).on("durationchange",function(){t.refreshControls("timeline")}).on("timeupdate",function(){t.onMediaUpdateTime()}).on("pause",function(){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist\|\|t.swappingSrc\|\|(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause()}).on("ratechange",function(){}).on("volumechange",function(){t.volume=t.getVolume()}).on("error",function(){t.debug&&t.media.error.code})},AblePlayer.prototype.addVimeoListeners=function(){var t=this;this.vimeoPlayer.on("loaded",function(e){t.onMediaNewSourceLoad()}),this.vimeoPlayer.on("play",function(e){t.playing=!0,t.startedPlaying=!0,t.paused=!1,t.refreshControls("playpause")}),this.vimeoPlayer.on("ended",function(e){t.playing=!1,t.paused=!0,t.onMediaComplete()}),this.vimeoPlayer.on("bufferstart",function(){}),this.vimeoPlayer.on("bufferend",function(){}),this.vimeoPlayer.on("progress",function(t){}),this.vimeoPlayer.on("seeking",function(t){}),this.vimeoPlayer.on("seeked",function(t){}),this.vimeoPlayer.on("timeupdate",function(e){t.onMediaUpdateTime(e.duration,e.seconds)}),this.vimeoPlayer.on("pause",function(e){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist\|\|t.swappingSrc\|\|(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause(),t.refreshControls("playpause")}),this.vimeoPlayer.on("playbackratechange",function(e){t.vimeoPlaybackRate=e.playbackRate}),this.vimeoPlayer.on("texttrackchange",function(t){}),this.vimeoPlayer.on("volumechange",function(e){t.volume=10e.volume}),this.vimeoPlayer.on("error",function(t){})},AblePlayer.prototype.addEventListeners=function(){var e=this;if(t(window).on("resize",function(){e.resizePlayer()}),window.MutationObserver){var i=this.$ableDiv[0];new MutationObserver(function(t){t.forEach(function(t){"attributes"===t.type&&"style"===t.attributeName&&e.$ableDiv.is(":visible")&&e.refreshControls()})}).observe(i,{attributes:!0,childList:!0,characterData:!0})}void 0!==this.seekBar?this.addSeekbarListeners():setTimeout(function(){void 0!==e.seekBar&&e.addSeekbarListeners()},2e3),this.$controllerDiv.find('div[role="button"]').on("click",function(t){t.stopPropagation(),e.onClickPlayerButton(this)}),t("body").on("click",function(i){if(0!==i.button)return!1;(t(".able-popup:visible").length\|\|t(".able-volume-slider:visible").length)&&e.closePopups(),"VIDEO"===i.target.tagName&&(e.clickedPlay=!0)}),this.$ableDiv.on("mousemove",function(){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),t(document).on("keydown",function(t){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),this.$ableDiv.on("keydown",function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)}),this.stenoMode&&void 0!==this.stenoFrameContents&&this.stenoFrameContents.on("keydown",function(t){e.onPlayerKeyPress(t)}),this.$transcriptArea&&this.$transcriptArea.on("keydown",function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)}),this.$playlist&&this.$playlist.on("click",function(i){e.userClickedPlaylist\|\|(e.userClickedPlaylist=!0,e.playlistIndex=t(this).index(),e.cuePlaylistItem(e.playlistIndex))}),this.$media.on("click",function(){e.handlePlay()}),"html5"===this.player?this.addHtml5MediaListeners():"vimeo"===this.player?this.addVimeoListeners():"youtube"===this.player&&setInterval(function(){e.onMediaUpdateTime()},300)}}(jQuery),function(t){AblePlayer.prototype.initDragDrop=function(e){var i,a,s,n,r,o,l,h,p,c,u,d,f;for(i=this,"transcript"===e?(a=this.$transcriptArea,n="transcript-window",(s=this.$transcriptToolbar).attr("aria-label",this.translate("transcriptControls","Transcript Window Controls"))):"sign"===e&&(a=this.$signWindow,n="sign-window",(s=this.$signToolbar).attr("aria-label",this.translate("signControls","Sign Language Window Controls"))),s.addClass("able-draggable"),s.attr("role","application"),$dragHandle=t("<div>",{class:"able-drag-handle"}),$dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'),r=t("<div>",{class:"able-resizable"}),o=t("<svg>").attr({width:"100%",height:"100%",viewBox:"0 0 100 100",preserveAspectRatio:"none"}),l=1;l<=3;l++)1===l?(h="100",p="0",c="0",u="100"):2===l?(h="33",p="100",c="100",u="33"):3===l&&(h="67",p="100",c="100",u="67"),d=t("<line>").attr({x1:h,y1:p,x2:c,y2:u,"vector-effect":"non-scaling-stroke"}),o.append(d);r.html(o),f=parseInt(a.css("z-index"))+100,r.css("z-index",f),a.append(r),s.append($dragHandle),r.html(r.html()),$dragHandle.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type\|\|"touchstart"===t.type?i.windowMenuClickRegistered\|\|(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.dragDevice="mouse",i.startDrag(e,a)):"mouseup"!==t.type&&"touchend"!==t.type\|\|i.dragging&&"mouse"===i.dragDevice&&i.endDrag(e),!1}),r.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type\|\|"touchstart"===t.type?i.windowMenuClickRegistered\|\|(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.startResize(e,a)):"mouseup"!==t.type&&"touchend"!==t.type\|\|i.resizing&&i.endResize(e),!1}),a.on("click",function(){i.windowMenuClickRegistered\|\|i.finishingDrag\|\|i.updateZIndex(e),i.finishingDrag=!1}),this.addWindowMenu(e,a,n)},AblePlayer.prototype.addWindowMenu=function(e,i,a){var s,n,r,o,l,h,p;s=this,this.windowMenuClickRegistered=!1,this.finishingDrag=!1,p=this.mediaId+"-"+a+"-menu",r=t("<button>",{type:"button",tabindex:"0","aria-haspopup":"true","aria-controls":p,"aria-expanded":"false",class:"able-button-handler-preferences"}),this.getIcon(r,"preferences"),this.setText(r,this.translate("windowButtonLabel","Window options")),o=this.mediaId+"-"+a+"-tooltip",l=t("<div>",{class:"able-tooltip",id:o}).hide(),r.on("mouseenter focus",function(e){var i=t(this).attr("aria-label"),a=AblePlayer.localGetElementById(r[0],o).text(i),n={right:"",left:"0px",top:-1(a.height()+2)+"px"};a.css(n),s.showTooltip(a),t(this).on("mouseleave blur",function(){AblePlayer.localGetElementById(r[0],o).text("").hide()})}),h=this.setupPopups(a),"transcript"===e?(this.$transcriptPopupButton=r,this.$transcriptPopup=h,this.$transcriptToolbar.prepend(n,r,l,h)):"sign"===e&&(this.$signPopupButton=r,this.$signPopup=h,this.$signToolbar.append(n,r,l,h)),r.on("click keydown",function(t){return!s.focusNotClick&&(s.dragging?(s.dragKeys(e,t),!1):(t.stopPropagation(),s.windowMenuClickRegistered\|\|s.finishingDrag\|\|s.handleWindowButtonClick(e,t),void(s.finishingDrag=!1)))}),this.addResizeDialog(e,i)},AblePlayer.prototype.addResizeDialog=function(e,i){var a,s,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P;a=this,"transcript"===e?(s=this.$transcriptPopup,n=this.$transcriptPopupButton):"sign"===e&&(s=this.$signPopup,n=this.$signPopupButton),r=this.mediaId+"-resize-"+e+"-width",o=this.mediaId+"-resize-"+e+"-height",l=t("<div></div>",{class:"able-resize-form"}),h=t("<div></div>"),$resizeControls=t('<div class="able-prefs-buttons"></div>'),p=t("<div></div>"),c=t("<input>",{type:"number",id:r,min:0,value:""}),u=t("<label>",{for:r}).text(this.translate("width","Width")),d=t("<div></div>"),f=t("<input>",{type:"number",id:o,min:0,value:""}),g=t("<label>",{for:o}).text(this.translate("height","Height")),m=t('<button class="modal-button">'+this.translate("save","Save")+"</button>"),v=t('<button class="modal-button">'+this.translate("cancel","Cancel")+"</button>"),m.on("click",function(){y=t("#"+r).val(),b=t("#"+o).val(),a.resizeObject(e,y,b),a.updatePreferences(e),P.hide(),s.hide(),n.trigger("focus")}),v.on("click",function(){P.hide(),s.hide(),n.trigger("focus")}),p.append(u,c),d.append(g,f),h.append(p,d),$resizeControls.append(m,v),l.append(h,$resizeControls),t("body").append(l),P=new AccessibleDialog(l,n,this.translate("windowResizeHeading","Resize Window"),this.translate("closeButtonLabel","Close")),"transcript"===e?this.transcriptResizeDialog=P:"sign"===e&&(this.signResizeDialog=P)},AblePlayer.prototype.handleWindowButtonClick=function(e,i){var a,s,n,r,o;if(a=this,this.focusNotClick)return!1;if("transcript"===e?(s=this.$transcriptPopup,n=this.$transcriptPopupButton,r=this.$transcriptToolbar):"sign"===e&&(s=this.$signPopup,n=this.$signPopupButton,r=this.$signToolbar),"keydown"===i.type)if(" "===i.key\|\|"Enter"===i.key)this.windowMenuClickRegistered=!0;else{if("Escape"!==i.key)return!1;s.is(":visible")?(s.hide(),a.windowMenuClickRegistered=!1,s.find("li").removeClass("able-focus").attr("tabindex","-1"),n.trigger("focus")):"sign"===e?this.handleSignToggle():"transcript"===e&&this.handleTranscriptToggle()}else this.windowMenuClickRegistered=!0;s.is(":visible")?(s.hide(),a.windowMenuClickRegistered=!1,s.find("li").removeClass("able-focus"),n.attr("aria-expanded","false").trigger("focus")):(this.updateZIndex(e),o=r.outerHeight()-1,s.css("top",o),s.show(),n.attr("aria-expanded","true"),t(this).find("li").first().trigger("focus").addClass("able-focus"),a.windowMenuClickRegistered=!1)},AblePlayer.prototype.handleMenuChoice=function(e,i,a){var s,n,r,o,l,h,p,c,u;if("transcript"===e?(s=this.$transcriptArea,n=this.$transcriptPopup,r=this.$transcriptPopupButton,o=this.transcriptResizeDialog):"sign"===e&&(s=this.$signWindow,n=this.$signPopup,r=this.$signPopupButton,o=this.signResizeDialog,l=s.outerWidth(),h=s.outerHeight(),p=l/h,widthId=this.mediaId+"-resize-"+e+"-width",heightId=this.mediaId+"-resize-"+e+"-height",t("#"+heightId).prop("readonly",!0),t("#"+widthId).on("input",function(){c=t(this).val(),u=Math.round(c/p),t("#"+heightId).val(u)})),this.$activeWindow=s,"keydown"===a.type)return"Escape"===a.key?(n.hide(),this.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),r.trigger("focus"),!1):("close"!==i&&(this.$activeWindow=s),!1);if(n.hide(),this.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),"close"!==i&&r.trigger("focus"),"move"===i)this.$activeWindow.attr("role","application"),this.showedAlert(e)\|\|(this.showAlert(this.translate("windowMoveAlert","Drag or use arrow keys to move the window; Enter to stop"),e),"transcript"===e?this.showedTranscriptAlert=!0:"sign"===e&&(this.showedSignAlert=!0)),this.dragDevice="keydown"===a.type?"keyboard":"mouse",this.startDrag(e,s),n.hide().parent().attr("tabindex","-1").trigger("focus");else if("resize"==i){var d=o.getInputs();d&&(d[0].value=Math.round(s.outerWidth()),d[1].value=Math.round(s.outerHeight())),o.show()}else"close"==i&&("transcript"===e?(this.closingTranscript=!0,this.handleTranscriptToggle()):"sign"===e&&(this.closingSign=!0,this.handleSignToggle()))},AblePlayer.prototype.startDrag=function(e,i){var a,s,n,r,o;a=this,this.$activeWindow\|\|(this.$activeWindow=i),this.dragging=!0,"transcript"===e?s=this.$transcriptPopup:"sign"===e&&(s=this.$signPopup),s.is(":visible")&&s.hide(),this.updateZIndex(e),n=this.$activeWindow.position(),this.dragStartX=n.left,this.dragStartY=n.top,void 0===this.startMouseX?(this.dragDevice="keyboard",this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.startingDrag=!0):(this.dragDevice="mouse",this.dragOffsetX=this.startMouseX-this.dragStartX,this.dragOffsetY=this.startMouseY-this.dragStartY),this.$activeWindow.addClass("able-drag").css({position:"absolute",top:this.dragStartY+"px",left:this.dragStartX+"px"}).trigger("focus");this.dragDevice;return"mouse"===this.dragDevice?t(document).on("mousemove touchmove",function(t){a.dragging&&(r=t.pageX-a.dragOffsetX,o=t.pageY-a.dragOffsetY,a.resetDraggedObject(r,o))}):"keyboard"===this.dragDevice&&this.$activeWindow.on("keydown",function(t){a.dragging&&a.dragKeys(e,t)}),!1},AblePlayer.prototype.dragKeys=function(t,e){if(this.startingDrag)return this.startingDrag=!1,!1;switch(e.key){case"ArrowLeft":this.dragKeyX-=10,this.$srAlertBox.text(this.translate("windowMoveLeft","Window moved left"));break;case"ArrowUp":this.dragKeyY-=10,this.$srAlertBox.text(this.translate("windowMoveUp","Window moved up"));break;case"ArrowRight":this.dragKeyX+=10,this.$srAlertBox.text(this.translate("windowMoveRight","Window moved right"));break;case"ArrowDown":this.dragKeyY+=10,this.$srAlertBox.text(this.translate("windowMoveDown","Window moved down"));break;case"Enter":case"Escape":return this.$srAlertBox.text(this.translate("windowMoveStopped","Window move stopped")),this.endDrag(t),!1;default:return!1}return this.resetDraggedObject(this.dragKeyX,this.dragKeyY),e.preventDefault&&e.preventDefault(),!1},AblePlayer.prototype.resetDraggedObject=function(t,e){setTimeout(()=>{this.$srAlertBox.text("")},2e3),this.$activeWindow.css({left:t+"px",top:e+"px"})},AblePlayer.prototype.resizeObject=function(t,e,i){var a;this.$activeWindow.css({width:e+"px",height:i+"px"}),"transcript"===t&&(a=i-50,this.$transcriptDiv.css("height",a+"px"))},AblePlayer.prototype.endDrag=function(e){var i,a;i=this,"transcript"===e?(this.$transcriptPopup,a=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,a=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown").removeClass("able-drag"),this.$activeWindow.attr("role","dialog"),this.$activeWindow=null,"keyboard"===this.dragDevice&&a.trigger("focus"),this.dragging=!1,this.updatePreferences(e),this.startMouseX=void 0,this.startMouseY=void 0,this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){i.finishingDrag=!1},100)},AblePlayer.prototype.startResize=function(e,i){var a,s,n,r;return a=this,this.$activeWindow=i,this.resizing=!0,(s="transcript"===e?this.$transcriptPopup:this.$signPopup).is(":visible")&&s.hide().parent().trigger("focus"),startPos=this.$activeWindow.position(),this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.dragStartWidth=this.$activeWindow.width(),this.dragStartHeight=this.$activeWindow.outerHeight(),t(document).on("mousemove touchmove",function(t){a.resizing&&(n=a.dragStartWidth+(t.pageX-a.startMouseX),r=a.dragStartHeight+(t.pageY-a.startMouseY),a.resizeObject(e,n,r))}),!1},AblePlayer.prototype.endResize=function(e){var i;"transcript"===e?(this.$transcriptPopup,i=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,i=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown"),i.show().trigger("focus"),this.resizing=!1,this.$activeWindow.removeClass("able-resize"),this.updatePreferences(e),this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){this.finishingDrag=!1},100)}}(jQuery),function(t){AblePlayer.prototype.initSignLanguage=function(){this.hasSignLanguage=!1;var t=void 0!==this.$sources.first().attr("data-sign-src")&&""!==this.$sources.first().attr("data-sign-src"),e=void 0!==this.$media.data("youtube-sign-src")&&""!==this.$media.data("youtube-sign-src"),i=void 0!==this.$sources.first().attr("data-youtube-sign-src")&&""!==this.$sources.first().attr("data-youtube-sign-src");if(!this.isIOS()&&(t\|\|e\|\|i)&&("html5"===this.player\|\|"youtube"===this.player)){let a=this.youTubeSignId??DOMPurify.sanitize(this.$sources.first().attr("data-youtube-sign-src")),s=DOMPurify.sanitize(this.$sources.first().attr("data-sign-src")),n=DOMPurify.sanitize(this.$media.data("youtube-sign-src"));this.signFile=!!t&&s,e?this.signYoutubeId=n:i&&(this.signYoutubeId=a),(this.signFile\|\|this.signYoutubeId)&&(this.isIOS()?this.debug:(this.debug,this.hasSignLanguage=!0,this.injectSignPlayerCode()))}},AblePlayer.prototype.injectSignPlayerCode=function(){var e,i,a,s,n;if(e=this.mediaId+"-sign",(this.signFile\|\|this.signYoutubeId)&&(null!==this.$signDivLocation?(this.$signDivLocation.addClass("able-sign-window able-fixed"),this.$signWindow=this.$signDivLocation):(this.$signWindow=t("<div>",{class:"able-sign-window",role:"dialog","aria-label":this.translate("sign","Sign language")}),this.$signToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$signWindow.append(this.$signToolbar)),this.$ableWrapper.append(this.$signWindow)),this.signFile){if(this.$signVideo=t("<video>",{id:e,tabindex:"-1",muted:!0}),this.signVideo=this.$signVideo[0],this.signFile)n=t("<source>",{src:this.signFile,type:"video/"+this.signFile.substr(-3)}),this.$signVideo.append(n);else for(i=0;i<this.$sources.length;i++){if(a=DOMPurify.sanitize(this.$sources[i].getAttribute("data-sign-src")),s=this.$sources[i].getAttribute("type"),!a)return void(this.hasSignLanguage=!1);n=t("<source>",{src:a,type:s}),this.$signVideo.append(n)}this.$signWindow.append(this.$signVideo)}else this.signYoutubeId&&(this.signYoutube=this.initYouTubeSignPlayer());null===this.$signDivLocation&&this.initDragDrop("sign"),1===this.prefSign?null===this.$signDivLocation&&this.positionDraggableWindow("sign",this.getDefaultWidth("sign")):this.$signWindow.hide()},AblePlayer.prototype.initYouTubeSignPlayer=function(){var e,i,a;return e=this,a=(i=new this.defer).promise(),this.youTubeSignPlayerReady=!1,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeSignInit().then(function(){i.resolve()}):(AblePlayer.loadingYouTubeIframeAPI\|\|e.getScript("https://www.youtube.com/iframe_api",function(){}),t("body").on("youTubeIframeAPIReady",function(){e.finalizeYoutubeSignInit().then(function(){i.resolve()})})),a},AblePlayer.prototype.finalizeYoutubeSignInit=function(){var e,i,a,s,n;return i=(e=new this.defer).promise(),a=this,s=this.mediaId+"_youtube_sign",this.$signWindow.append(t("<div>").attr("id",s)),n=this.okToPlay?1:0,this.youTubeSignPlayer=new YT.Player(s,{videoId:this.getYouTubeId(this.signYoutubeId),host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,cc_lang_pref:this.captionLang,cc_load_policy:0,controls:0,disableKb:1,enablejsapi:1,hl:this.lang,iv_load_policy:3,origin:window.location.origin,playsinline:this.playsInline,rel:0,start:this.startTime},events:{onReady:function(t){t.target.mute(),t.target.unloadModule("captions"),a.youTubeSignPlayerReady=!0,e.resolve()},onError:function(t){e.reject()},onStateChange:function(t){a.getPlayerState().then(function(){})},onApiChange:function(){},onPlaybackQualityChange:function(){}}}),i}}(jQuery),function(){var t={ab:{name:"Abkhaz",nativeName:"аҧсуа"},aa:{name:"Afar",nativeName:"Afaraf"},af:{name:"Afrikaans",nativeName:"Afrikaans"},ak:{name:"Akan",nativeName:"Akan"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"አማርኛ"},ar:{name:"Arabic",nativeName:"العربية"},an:{name:"Aragonese",nativeName:"Aragonés"},hy:{name:"Armenian",nativeName:"Հայերեն"},as:{name:"Assamese",nativeName:"অসমীয়া"},av:{name:"Avaric",nativeName:"авар мацӀ, магӀарул мацӀ"},ae:{name:"Avestan",nativeName:"avesta"},ay:{name:"Aymara",nativeName:"aymar aru"},az:{name:"Azerbaijani",nativeName:"azərbaycan dili"},bm:{name:"Bambara",nativeName:"bamanankan"},ba:{name:"Bashkir",nativeName:"башҡорт теле"},eu:{name:"Basque",nativeName:"euskara, euskera"},be:{name:"Belarusian",nativeName:"Беларуская"},bn:{name:"Bengali",nativeName:"বাংলা"},bh:{name:"Bihari",nativeName:"भोजपुरी"},bi:{name:"Bislama",nativeName:"Bislama"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},br:{name:"Breton",nativeName:"brezhoneg"},bg:{name:"Bulgarian",nativeName:"български език"},my:{name:"Burmese",nativeName:"ဗမာစာ"},ca:{name:"Catalan",nativeName:"Català"},ch:{name:"Chamorro",nativeName:"Chamoru"},ce:{name:"Chechen",nativeName:"нохчийн мотт"},ny:{name:"Chichewa",nativeName:"chiCheŵa, chinyanja"},zh:{name:"Chinese",nativeName:"中文 (Zhōngwén), 汉语, 漢語"},cv:{name:"Chuvash",nativeName:"чӑваш чӗлхи"},kw:{name:"Cornish",nativeName:"Kernewek"},co:{name:"Corsican",nativeName:"corsu, lingua corsa"},cr:{name:"Cree",nativeName:"ᓀᐦᐃᔭᐍᐏᐣ"},hr:{name:"Croatian",nativeName:"hrvatski"},cs:{name:"Czech",nativeName:"česky, čeština"},da:{name:"Danish",nativeName:"dansk"},dv:{name:"Divehi",nativeName:"ދިވެހި"},nl:{name:"Dutch",nativeName:"Nederlands, Vlaams"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti, eesti keel"},ee:{name:"Ewe",nativeName:"Eʋegbe"},fo:{name:"Faroese",nativeName:"føroyskt"},fj:{name:"Fijian",nativeName:"vosa Vakaviti"},fi:{name:"Finnish",nativeName:"suomi, suomen kieli"},fr:{name:"French",nativeName:"français, langue française"},ff:{name:"Fula",nativeName:"Fulfulde, Pulaar, Pular"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"ქართული"},de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"Ελληνικά"},gn:{name:"Guaraní",nativeName:"Avañeẽ"},gu:{name:"Gujarati",nativeName:"ગુજરાતી"},ht:{name:"Haitian",nativeName:"Kreyòl ayisyen"},ha:{name:"Hausa",nativeName:"Hausa, هَوُسَ"},he:{name:"Hebrew",nativeName:"עברית"},hz:{name:"Herero",nativeName:"Otjiherero"},hi:{name:"Hindi",nativeName:"हिन्दी, हिंदी"},ho:{name:"Hiri Motu",nativeName:"Hiri Motu"},hu:{name:"Hungarian",nativeName:"Magyar"},ia:{name:"Interlingua",nativeName:"Interlingua"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ie:{name:"Interlingue",nativeName:"Originally called Occidental; then Interlingue after WWII"},ga:{name:"Irish",nativeName:"Gaeilge"},ig:{name:"Igbo",nativeName:"Asụsụ Igbo"},ik:{name:"Inupiaq",nativeName:"Iñupiaq, Iñupiatun"},io:{name:"Ido",nativeName:"Ido"},is:{name:"Icelandic",nativeName:"Íslenska"},it:{name:"Italian",nativeName:"Italiano"},iu:{name:"Inuktitut",nativeName:"ᐃᓄᒃᑎᑐᑦ"},ja:{name:"Japanese",nativeName:"日本語 (にほんご／にっぽんご)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kl:{name:"Kalaallisut",nativeName:"kalaallisut, kalaallit oqaasii"},kn:{name:"Kannada",nativeName:"ಕನ್ನಡ"},kr:{name:"Kanuri",nativeName:"Kanuri"},ks:{name:"Kashmiri",nativeName:"कश्मीरी, كشميري‎"},kk:{name:"Kazakh",nativeName:"Қазақ тілі"},km:{name:"Khmer",nativeName:"ភាសាខ្មែរ"},ki:{name:"Kikuyu",nativeName:"Gĩkũyũ"},rw:{name:"Kinyarwanda",nativeName:"Ikinyarwanda"},ky:{name:"Kyrgyz",nativeName:"кыргыз тили"},kv:{name:"Komi",nativeName:"коми кыв"},kg:{name:"Kongo",nativeName:"KiKongo"},ko:{name:"Korean",nativeName:"한국어 (韓國語), 조선말 (朝鮮語)"},ku:{name:"Kurdish",nativeName:"Kurdî, كوردی‎"},kj:{name:"Kuanyama",nativeName:"Kuanyama"},la:{name:"Latin",nativeName:"latine, lingua latina"},lb:{name:"Luxembourgish",nativeName:"Lëtzebuergesch"},lg:{name:"Luganda",nativeName:"Luganda"},li:{name:"Limburgish",nativeName:"Limburgs"},ln:{name:"Lingala",nativeName:"Lingála"},lo:{name:"Lao",nativeName:"ພາສາລາວ"},lt:{name:"Lithuanian",nativeName:"lietuvių kalba"},lu:{name:"Luba-Katanga",nativeName:""},lv:{name:"Latvian",nativeName:"latviešu valoda"},gv:{name:"Manx",nativeName:"Gaelg, Gailck"},mk:{name:"Macedonian",nativeName:"македонски јазик"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu, بهاس ملايو‎"},ml:{name:"Malayalam",nativeName:"മലയാളം"},mt:{name:"Maltese",nativeName:"Malti"},mi:{name:"Māori",nativeName:"te reo Māori"},mr:{name:"Marathi",nativeName:"मराठी"},mh:{name:"Marshallese",nativeName:"Kajin M̧ajeļ"},mn:{name:"Mongolian",nativeName:"монгол"},na:{name:"Nauru",nativeName:"Ekakairũ Naoero"},nv:{name:"Navajo",nativeName:"Diné bizaad, Dinékʼehǰí"},nb:{name:"Norwegian Bokmål",nativeName:"Norsk bokmål"},nd:{name:"North Ndebele",nativeName:"isiNdebele"},ne:{name:"Nepali",nativeName:"नेपाली"},ng:{name:"Ndonga",nativeName:"Owambo"},nn:{name:"Norwegian Nynorsk",nativeName:"Norsk nynorsk"},no:{name:"Norwegian",nativeName:"Norsk"},ii:{name:"Nuosu",nativeName:"ꆈꌠ꒿ Nuosuhxop"},nr:{name:"South Ndebele",nativeName:"isiNdebele"},oc:{name:"Occitan",nativeName:"Occitan"},oj:{name:"Ojibwe",nativeName:"ᐊᓂᔑᓈᐯᒧᐎᓐ"},cu:{name:"Church Slavonic",nativeName:"ѩзыкъ словѣньскъ"},om:{name:"Oromo",nativeName:"Afaan Oromoo"},or:{name:"Oriya",nativeName:"ଓଡ଼ିଆ"},os:{name:"Ossetian",nativeName:"ирон æвзаг"},pa:{name:"Punjabi",nativeName:"ਪੰਜਾਬੀ, پنجابی‎"},pi:{name:"Pāli",nativeName:"पाऴि"},fa:{name:"Persian",nativeName:"فارسی"},pl:{name:"Polish",nativeName:"polski"},ps:{name:"Pashto",nativeName:"پښتو"},pt:{name:"Portuguese",nativeName:"Português"},qu:{name:"Quechua",nativeName:"Runa Simi, Kichwa"},rm:{name:"Romansh",nativeName:"rumantsch grischun"},rn:{name:"Kirundi",nativeName:"kiRundi"},ro:{name:"Romanian",nativeName:"română"},ru:{name:"Russian",nativeName:"русский язык"},sa:{name:"Sanskrit",nativeName:"संस्कृतम्"},sc:{name:"Sardinian",nativeName:"sardu"},sd:{name:"Sindhi",nativeName:"सिन्धी, سنڌي، سندھی‎"},se:{name:"Northern Sami",nativeName:"Davvisámegiella"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},sg:{name:"Sango",nativeName:"yângâ tî sängö"},sr:{name:"Serbian",nativeName:"српски језик"},gd:{name:"Gaelic",nativeName:"Gàidhlig"},sn:{name:"Shona",nativeName:"chiShona"},si:{name:"Sinhalese",nativeName:"සිංහල"},sk:{name:"Slovak",nativeName:"slovenčina"},sl:{name:"Slovene",nativeName:"slovenščina"},so:{name:"Somali",nativeName:"Soomaaliga, af Soomaali"},st:{name:"Southern Sotho",nativeName:"Sesotho"},es:{name:"Spanish",nativeName:"español, castellano"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},ss:{name:"Swati",nativeName:"SiSwati"},sv:{name:"Swedish",nativeName:"svenska"},ta:{name:"Tamil",nativeName:"தமிழ்"},te:{name:"Telugu",nativeName:"తెలుగు"},tg:{name:"Tajik",nativeName:"тоҷикӣ, toğikī, تاجیکی‎"},th:{name:"Thai",nativeName:"ไทย"},ti:{name:"Tigrinya",nativeName:"ትግርኛ"},bo:{name:"Tibetan",nativeName:"བོད་ཡིག"},tk:{name:"Turkmen",nativeName:"Türkmen, Түркмен"},tl:{name:"Tagalog",nativeName:"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔"},tn:{name:"Tswana",nativeName:"Setswana"},to:{name:"Tonga",nativeName:"faka Tonga"},tr:{name:"Turkish",nativeName:"Türkçe"},ts:{name:"Tsonga",nativeName:"Xitsonga"},tt:{name:"Tatar",nativeName:"татарча, tatarça, تاتارچا‎"},tw:{name:"Twi",nativeName:"Twi"},ty:{name:"Tahitian",nativeName:"Reo Tahiti"},ug:{name:"Uyghur",nativeName:"Uyƣurqə, ئۇيغۇرچە‎"},uk:{name:"Ukrainian",nativeName:"українська"},ur:{name:"Urdu",nativeName:"اردو"},uz:{name:"Uzbek",nativeName:"zbek, Ўзбек, أۇزبېك‎"},ve:{name:"Venda",nativeName:"Tshivenḓa"},vi:{name:"Vietnamese",nativeName:"Tiếng Việt"},vo:{name:"Volapük",nativeName:"Volapük"},wa:{name:"Walloon",nativeName:"Walon"},cy:{name:"Welsh",nativeName:"Cymraeg"},wo:{name:"Wolof",nativeName:"Wollof"},fy:{name:"Western Frisian",nativeName:"Frysk"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"ייִדיש"},yo:{name:"Yoruba",nativeName:"Yorùbá"},za:{name:"Zhuang",nativeName:"Saɯ cueŋƅ, Saw cuengh"},"ar-dz":{name:"Arabic (Algeria)",nativeName:"العربية (الجزائر)"},"ar-bh":{name:"Arabic (Bahrain)",nativeName:"العربية (البحرين)"},"ar-eg":{name:"Arabic (Egypt)",nativeName:"العربية (مصر)"},"ar-iq":{name:"Arabic (Iraq)",nativeName:"العربية (العراق)"},"ar-jo":{name:"Arabic (Jordan)",nativeName:"العربية (الأردن)"},"ar-kw":{name:"Arabic (Kuwait)",nativeName:"العربية (الكويت)"},"ar-lb":{name:"Arabic (Lebanon)",nativeName:"العربية (لبنان)"},"ar-ly":{name:"Arabic (Libya)",nativeName:"العربية (ليبيا)"},"ar-ma":{name:"Arabic (Morocco)",nativeName:"العربية (المملكة المغربية)"},"ar-om":{name:"Arabic (Oman)",nativeName:"العربية (عمان)"},"ar-qa":{name:"Arabic (Qatar)",nativeName:"العربية (قطر)"},"ar-sa":{name:"Arabic (Saudi Arabia)",nativeName:"العربية (المملكة العربية السعودية)"},"ar-sy":{name:"Arabic (Syria)",nativeName:"العربية (سوريا)"},"ar-tn":{name:"Arabic (Tunisia)",nativeName:"العربية (تونس)"},"ar-ae":{name:"Arabic (U.A.E.)",nativeName:"العربية (الإمارات العربية المتحدة)"},"ar-ye":{name:"Arabic (Yemen)",nativeName:"العربية (اليمن)"},"de-at":{name:"German (Austria)",nativeName:"Deutsch (Österreich)"},"de-li":{name:"German (Liechtenstein)",nativeName:"Deutsch (Liechtenstein)"},"de-lu":{name:"German (Luxembourg)",nativeName:"Deutsch (Luxemburg)"},"de-ch":{name:"German (Switzerland)",nativeName:"Deutsch (Schweiz)"},"en-au":{name:"English (Australia)",nativeName:"English (Australia)"},"en-bz":{name:"English (Belize)",nativeName:"English (Belize)"},"en-ca":{name:"English (Canada)",nativeName:"English (Canada)"},"en-ie":{name:"English (Ireland)",nativeName:"English (Ireland)"},"en-jm":{name:"English (Jamaica)",nativeName:"English (Jamaica)"},"en-nz":{name:"English (New Zealand)",nativeName:""},"en-za":{name:"English (South Africa)",nativeName:"English (South Africa)"},"en-tt":{name:"English (Trinidad)",nativeName:"English (Trinidad y Tobago)"},"en-gb":{name:"English (United Kingdom)",nativeName:"English (United Kingdom)"},"en-us":{name:"English (United States)",nativeName:"English (United States)"},"es-ar":{name:"Spanish (Argentina)",nativeName:"Español (Argentina)"},"es-bo":{name:"Spanish (Bolivia)",nativeName:"Español (Bolivia)"},"es-cl":{name:"Spanish (Chile)",nativeName:"Español (Chile)"},"es-co":{name:"Spanish (Colombia)",nativeName:"Español (Colombia)"},"es-cr":{name:"Spanish (Costa Rica)",nativeName:"Español (Costa Rica)"},"es-do":{name:"Spanish (Dominican Republic)",nativeName:"Español (República Dominicana)"},"es-ec":{name:"Spanish (Ecuador)",nativeName:"Español (Ecuador)"},"es-sv":{name:"Spanish (El Salvador)",nativeName:"Español (El Salvador)"},"es-gt":{name:"Spanish (Guatemala)",nativeName:"Español (Guatemala)"},"es-hn":{name:"Spanish (Honduras)",nativeName:"Español (Honduras)"},"es-mx":{name:"Spanish (Mexico)",nativeName:"Español (México)"},"es-ni":{name:"Spanish (Nicaragua)",nativeName:"Español (Nicaragua)"},"es-pa":{name:"Spanish (Panama)",nativeName:"Español (Panamá)"},"es-py":{name:"Spanish (Paraguay)",nativeName:"Español (Paraguay)"},"es-pe":{name:"Spanish (Peru)",nativeName:"Español (Perú)"},"es-pr":{name:"Spanish (Puerto Rico)",nativeName:"Español (Puerto Rico)"},"es-uy":{name:"Spanish (Uruguay)",nativeName:"Español (Uruguay)"},"es-ve":{name:"Spanish (Venezuela)",nativeName:"Español (Venezuela)"},"fr-be":{name:"French (Belgium)",nativeName:"français (Belgique)"},"fr-ca":{name:"French (Canada)",nativeName:"français (Canada)"},"fr-lu":{name:"French (Luxembourg)",nativeName:"français (Luxembourg)"},"fr-ch":{name:"French (Switzerland)",nativeName:"français (Suisse)"},"it-ch":{name:"Italian (Switzerland)",nativeName:"italiano (Svizzera)"},"nl-be":{name:"Dutch (Belgium)",nativeName:"Nederlands (België)"},"pt-br":{name:"Portuguese (Brazil)",nativeName:"Português (Brasil)"},"sv-fi":{name:"Swedish (Finland)",nativeName:"svenska (Finland)"},"zh-hk":{name:"Chinese (Hong Kong)",nativeName:"中文(香港特别行政區)"},"zh-cn":{name:"Chinese (PRC)",nativeName:"中文(中华人民共和国)"},"zh-sg":{name:"Chinese (Singapore)",nativeName:"中文(新加坡)"},"zh-tw":{name:"Chinese Traditional (Taiwan)",nativeName:"中文（台灣）"}};AblePlayer.prototype.getLanguageName=function(e,i){var a,s,n;return(a=t[e.toLowerCase()])?"local"===i?a.nativeName:a.name:e.includes("-")&&(s=e.substring(0,2),n=e.substring(3),a=t[s.toLowerCase()])?"local"===i?a.nativeName+" ("+n+")":a.name+" ("+n+")":e}}(jQuery),function(t){AblePlayer.prototype.getSupportedLangs=function(){return{ca:"Catalan",cs:"Czech",da:"Danish",de:"German",en:"English",es:"Spanish",fr:"French",he:"Hebrew",id:"Indonesian",it:"Italian",ja:"Japanese",ms:"Malay",nb:"Norwegian Bokmål",nl:"Dutch",pl:"Polish",pt:"Portuguese","pt-br":"Brazilian Portuguese",sv:"Swedish",tr:"Turkish","zh-tw":"Chinese (Taiwan)"}},AblePlayer.prototype.translate=function(t,e,i=Array()){let a="";return a=this.tt[t]?this.tt[t]:e,i.length>0&&i.forEach((t,e)=>{let i=e+1;a=a.replace("%"+i,t)}),a},AblePlayer.prototype.getTranslationText=function(){var e,i,a,s,n,r;if(e=new this.defer,i=this,a=this.getSupportedLangs(),this.lang&&Object.hasOwn(a,this.lang))if(2==this.lang.indexOf("-"))this.lang=-1!==Object.hasOwn(a,this.lang.substring(0,2))?this.lang.substring(0,2):null;else{r=!1;for(const[t,e]of Object.entries(a))t.substring(0,2)==this.lang&&(this.lang=a[undefined],r=!0);r\|\|(this.lang=null)}return this.lang\|\|(s=t("body").attr("lang")?t("body").attr("lang").toLowerCase():t("html").attr("lang")?t("html").attr("lang").toLowerCase():null)&&(Object.hasOwn(a,s)?this.lang=s:2==s.indexOf("-")&&Object.hasOwn(a,s.substring(0,2))&&(this.lang=s.substring(0,2))),this.lang\|\|(this.lang="en"),this.searchLang\|\|(this.searchLang=this.lang),n=this.rootPath+"translations/"+this.lang+".json",fetch(n).then(t=>t.json()).then(t=>{i.tt=t,i.translationFiles=!0,e.resolve()}).catch(t=>{n=i.rootPath+"translations/"+i.lang+".js",fetch(n).then(t=>t.json()).then(t=>{i.tt=t,i.translationFiles=!0,e.resolve()}).catch(t=>{i.tt={},i.translationFiles=!1,e.resolve()})}),e.promise()},AblePlayer.prototype.getSampleDescriptionText=function(){if(this.translationFiles){var t,e,i,a,s;e=this.getSupportedLangs(),t=this,this.sampleText=[];for(const[n,r]of Object.entries(e))i=this.rootPath+"translations/"+n+".json",fetch(i).then(t=>t.json()).then(e=>{a=e.sampleDescriptionText,s={lang:undefined,text:a},t.sampleText.push(s)})}else{this.sampleText=[];let t={lang:"en",text:this.translate("sampleDescriptionText","Adjust settings to hear this sample text.")};this.sampleText.push(t)}}}(jQuery),function(t){AblePlayer.prototype.injectVTS=function(){var e,i,a,s,n,r,o,l,h,p,c,u,d,f,g,m,v;if(e=this,null!==document.getElementById("able-vts")&&this.vtsTracks.length){this.langs=[],this.getAllLangs(this.vtsTracks),this.vtsLang=this.lang;let w=this.translate("vtsHeading","Video Transcript Sorter");for(k in i=t("<h2>").text(w),t("#able-vts").append(i),this.$vtsAlert=t("<div>",{id:"able-vts-alert","aria-live":"polite","aria-atomic":"true"}),t("#able-vts").append(this.$vtsAlert),a=t("<div>",{id:"able-vts-instructions"}),s=t("<p>").text(this.translate("vtsInstructions1","Use the Video Transcript Sorter to modify text tracks:")),r=t("<ul>"),o=t("<li>").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.")),l=t("<li>").text(this.translate("vtsInstructions3","Modify content or start/end times (all are directly editable within the table).")),h=t("<li>").text(this.translate("vtsInstructions4","Add new content, such as chapters or descriptions.")),n=t("<p>").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.')),r.append(o,l,h),a.append(s,r,n),t("#able-vts").append(a),p=t("<fieldset>"),c=t("<legend>").text(this.translate("vtsSelectLanguage","Select a language")),p.append(c),$fieldWrapper=t('<div class="vts-lang-selector"></div>'),this.langs)d="vts-lang-radio-"+this.langs[k],u=t("<div>",{}),g=t("<input>",{type:"radio",name:"vts-lang",id:d,value:this.langs[k]}).on("click",function(){e.vtsLang=t(this).val(),e.showVtsAlert("Loading "+e.getLanguageName(e.vtsLang)+" tracks"),e.injectVtsTable("update",e.vtsLang)}),this.langs[k]==this.lang&&g.prop("checked",!0),f=t("<label>",{for:d}).text(this.getLanguageName(this.langs[k])),u.append(g,f),$fieldWrapper.append(u);p.append($fieldWrapper),t("#able-vts").append(p);let C=this.translate("vtsSave","Generate new .vtt content");var y,b,P,T,k;m=t("<button>",{type:"button",id:"able-vts-save",value:"save"}).text(C),t("#able-vts").append(m),this.injectVtsTable("add",this.vtsLang),y=["captions","chapters","descriptions","subtitles"],t('td[contenteditable="true"]').on("focus",function(){b=t(this).text()}).on("blur",function(){b!=t(this).text()&&(P=t(this).index(),T=t(this).text(),1===P?-1===t.inArray(T,y)&&("s"===T.substring(0,1)?t(this).text("subtitles"):"d"===T.substring(0,1)?t(this).text("descriptions"):"ch"===T.substring(0,2)?t(this).text("chapters"):t(this).text("captions")):2!==P&&3!==P\|\|t(this).text(e.formatTimestamp(T)))}).on("keydown",function(t){t.stopPropagation()}),t("#able-vts-save").on("click",function(i){i.stopPropagation(),"save"==t(this).attr("value")?(t(this).attr("value","cancel").text(e.translate("vtsReturn","Return to Editor")),v=t("#able-vts table"),t("#able-vts-instructions").hide(),t("#able-vts > fieldset").hide(),t("#able-vts table").remove(),t("#able-vts-icon-credit").remove(),e.parseVtsOutput(v)):(t(this).attr("value","save").text(C),t("#able-vts-output").remove(),t("#able-vts-instructions").show(),t("#able-vts > fieldset").show(),t("#able-vts").append(v),t("#able-vts").append(e.getIconCredit()),e.showVtsAlert(e.translate("vtsCancel","Cancelling saving. Any edits you made have been restored in the VTS table.")))})}},AblePlayer.prototype.setupVtsTracks=function(t,e,i,a,s,n){var r,o;r=this.getFilenameFromPath(s),o=this.parseVtsTracks(n),this.vtsTracks.push({kind:t,language:e,label:a,srcFile:r,cues:o})},AblePlayer.prototype.getFilenameFromPath=function(t){var e;return-1===(e=t.lastIndexOf("/"))?t:t.substring(e+1)},AblePlayer.prototype.getFilenameFromTracks=function(t,e){for(var i=0;i<this.vtsTracks.length;i++)if(this.vtsTracks[i].kind===t&&this.vtsTracks[i].language===e)return this.vtsTracks[i].srcFile;return!1},AblePlayer.prototype.parseVtsTracks=function(t){var e,i,a,s,n,r,o,l,h;for(e=t.split("\n"),a=[],s=0;s<e.length;)if(-1!==(r=e[s]).indexOf(" --\x3e ")){if(i=r.trim().split(" "),this.isValidTimestamp(i[0])&&this.isValidTimestamp(i[2])){for(l="",n=s+1,h=!1;n<e.length&&!h;)(o=e[n].trim()).length>0?l.length>0?l+="\n"+o:l+=o:h=!0,n++;a.push({start:i[0],end:i[2],content:l}),s=n}}else s++;return a},AblePlayer.prototype.isValidTimestamp=function(t){return!!/^[0-9:,.]$/.test(t)},AblePlayer.prototype.formatTimestamp=function(t){var e,i;if(e=t.substring(0,t.lastIndexOf(".")+1),(i=t.substring(t.lastIndexOf(".")+1)).length>3)i=i.substring(0,3);else if(i.length<3)for(;i.length<3;)i+="0";return e+i},AblePlayer.prototype.injectVtsTable=function(e,i){var a,s,n,r,o,l,h,p,c;for("update"===e&&(t("#able-vts table").remove(),t("#able-vts-icon-credit").remove()),a=t("<table>",{lang:i}),s=t("<thead>"),o=t("<tr>"),n=[this.translate("vtsRow","Row"),this.translate("vtsKind","Kind"),this.translate("vtsStart","Start"),this.translate("vtsEnd","End"),this.translate("vtsContent","Content"),this.translate("vtsActions","Actions")],r=0;r<n.length;r++)l=t("<th>",{scope:"col"}).text(n[r]),"Actions"===n[r]&&l.addClass("actions"),o.append(l);for(s.append(o),a.append(s),p=this.getAllRows(i),r=0;r<p.length;r++)o=t("<tr>",{id:"able-vts-row-"+(c=r+1),class:"kind-"+p[r].kind}),h=t("<td>").text(c),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].kind),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].start),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].end),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].content),o.append(h),h=this.addVtsActionButtons(c,p.length),o.append(h),a.append(o);t("#able-vts").append(a),t("#able-vts").append(this.getIconCredit())},AblePlayer.prototype.addVtsActionButtons=function(e,i){var a,s,n,r,o,l,h,p,c,u;for(a=this,s=t("<td>"),n=["up","down","insert","delete"],r=0;r<n.length;r++)"up"===(o=n[r])?e>1&&(l=t("<button>",{id:"able-vts-button-up-"+e,title:"Move up","aria-label":"Move Row "+e+" up"}).on("click",function(t){a.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101c-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.594l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),s.append(l)):"down"===o?e<i&&(l=t("<button>",{id:"able-vts-button-down-"+e,title:"Move down","aria-label":"Move Row "+e+" down"}).on("click",function(t){a.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"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.424C1.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.428s9.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),s.append(l)):"insert"===o?(l=t("<button>",{id:"able-vts-button-insert-"+e,title:"Insert row below","aria-label":"Insert row before Row "+e}).on("click",function(t){a.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"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.414C242.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.775H27.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.411c5.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.987h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77c7.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),s.append(l)):"delete"===o&&(l=t("<button>",{id:"able-vts-button-delete-"+e,title:"Delete row ","aria-label":"Delete Row "+e}).on("click",function(t){a.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607C429.063,46.021,414.825,31.782,397.281,31.782z"}),u=t("<path>",{d:"M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042c17.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.891c8.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.804zM238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26c0,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.804c0-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.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z"}),p=t("<g>").append(c,u),h.append(p),l.append(h),l.html(l.html()),s.append(l));return s},AblePlayer.prototype.updateVtsActionButtons=function(t,e){var i,a,s,n,r,o;for(i=0;i<t.length;i++)s=(a=t.eq(i)).attr("id"),n=a.attr("aria-label"),r=s.replace(/[0-9]+/g,e),o=n.replace(/[0-9]+/g,e),a.attr("id",r),a.attr("aria-label",o)},AblePlayer.prototype.getIconCredit=function(){return'<div id="able-vts-icon-credit">Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a> from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a> are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a></div>'},AblePlayer.prototype.getAllLangs=function(e){var i;for(i in e)e[i].hasOwnProperty("language")&&-1===t.inArray(e[i].language,this.langs)&&(this.langs[this.langs.length]=e[i].language)},AblePlayer.prototype.getAllRows=function(t){var e,i,a,s;for(s=[],e=0;e<this.vtsTracks.length;e++)if((i=this.vtsTracks[e]).language==t)for(a in i.cues)s.push({kind:i.kind,lang:t,id:i.cues[a].id,start:i.cues[a].start,end:i.cues[a].end,content:i.cues[a].content});return s.sort(function(t,e){return t.start>e.start?1:-1}),s},AblePlayer.prototype.onClickVtsActionButton=function(e){var i,a,s;a=(i=t(e).attr("id").split("-"))[3],s=i[4],"up"==a?this.moveRow(s,"up"):"down"==a?this.moveRow(s,"down"):"insert"==a?this.insertRow(s):"delete"==a&&this.deleteRow(s)},AblePlayer.prototype.insertRow=function(e){var i,a,s,n,r,o,l,h,p,c,u,d,f,g,m;for(s=(a=(i=t("#able-vts table")).find("tr")).length-1,n=parseInt(e)+1,r=t("<tr>",{id:"able-vts-row-"+n}),o=t("<td>").text(n),r.append(o),u=null,l=t("<select>",{id:"able-vts-kind-"+n,"aria-label":"What kind of track is this?",placeholder:"Select a kind"}).on("change",function(){u=t(this).val(),d="kind-"+u,f=t(this).closest("tr"),t(this).parent().text(u),f.addClass(d)}),h=["","captions","chapters","descriptions","subtitles"],p=0;p<h.length;p++)c=t("<option>",{value:h[p]}).text(h[p]),l.append(c);for(o=t("<td>").append(l),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=this.addVtsActionButtons(n,s),r.append(o),i.find("tr").eq(e).after(r),p=n;p<=s;p++)g=p+1,a.eq(p).attr("id","able-vts-row-"+g),a.eq(p).find("td").eq(0).text(g),m=a.eq(p).find("button"),this.updateVtsActionButtons(m,g);this.adjustTimes(n);let v=this.translate("vtsNewRow","A new row %1 has been inserted.",[n]);this.showVtsAlert(v),l.trigger("focus")},AblePlayer.prototype.deleteRow=function(e){var i,a,s,n,r,o;for((i=t("#able-vts table"))[0].deleteRow(e),s=(a=i.find("tr")).length-1,n=e;n<=s;n++)r=n,a.eq(n).attr("id","able-vts-row-"+r),a.eq(n).find("td").eq(0).text(r),o=a.eq(n).find("button"),this.updateVtsActionButtons(o,r);let l=this.translate("vtsDeletedRow","Row %1 has been deleted.",[e]);this.showVtsAlert(l)},AblePlayer.prototype.moveRow=function(e,i){var a,s,n,r;t("#able-vts table").find("tr"),a=t("#able-vts table").find("tr").eq(e),"up"==i?(s=parseInt(e)-1,(n=t("#able-vts table").find("tr").eq(s)).before(a)):"down"==i&&(s=parseInt(e)+1,(n=t("#able-vts table").find("tr").eq(s)).after(a)),a.attr("id","able-vts-row-"+s),a.find("td").eq(0).text(s),this.updateVtsActionButtons(a.find("button"),s),n.attr("id","able-vts-row-"+e),n.find("td").eq(0).text(e),this.updateVtsActionButtons(n.find("button"),e),this.adjustTimes(s),r=this.translate("vtsMovedRow","Row %1 has been moved %2 and is now Row %3.",[e,i,s]),this.showVtsAlert(r)},AblePlayer.prototype.adjustTimes=function(e){var i,a,s,n,r,o,l,h,p,c,u,d,f,g,m,v;(i=[]).captions=.001,i.descriptions=.001,i.chapters=.001,h=(r=(a=t("#able-vts table").find("tr")).eq(e)).is('[class^="kind-"]')?this.getKindFromClass(r.attr("class")):"captions",u=this.getSecondsFromColonTime(r.find("td").eq(2).text()),g=this.getSecondsFromColonTime(r.find("td").eq(3).text()),e>1?(s=e-1,p=(o=a.eq(s)).is('[class^="kind-"]')?this.getKindFromClass(o.attr("class")):null,d=this.getSecondsFromColonTime(o.find("td").eq(2).text()),m=this.getSecondsFromColonTime(o.find("td").eq(3).text())):(s=null,o=null,p=null,d=null,m=null),e<a.length-1?(n=e+1,c=(l=a.eq(n)).is('[class^="kind-"]')?this.getKindFromClass(l.attr("class")):null,f=this.getSecondsFromColonTime(l.find("td").eq(2).text()),v=this.getSecondsFromColonTime(l.find("td").eq(3).text())):(n=null,l=null,c=null,f=null,v=null),isNaN(u)?(null==p&&(p="captions",o.attr("class","kind-captions"),o.find("td").eq(1).html("captions")),"captions"===p?(u=(parseFloat(m)+.001).toFixed(3),g=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+i[h]).toFixed(3)):"chapters"===p?(u=(parseFloat(d)+.001).toFixed(3),g=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+minDurartion[h]).toFixed(3)):"descriptions"===p&&(u=(parseFloat(d)+i.descriptions).toFixed(3),g=(parseFloat(u)+i.descriptions).toFixed(3))):d?d<u?u<f\|\|(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)):(u=(parseFloat(d)+i[p]).toFixed(3),g=(parseFloat(u)+i[h]).toFixed(3)):u<f\|\|(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)),g-u<i[h]&&(g=(parseFloat(u)+i[h]).toFixed(3),f&&(f=(parseFloat(g)+.001).toFixed(3))),r.find("td").eq(2).text(this.formatSecondsAsColonTime(u,!0)),r.find("td").eq(3).text(this.formatSecondsAsColonTime(g,!0)),o&&(o.find("td").eq(2).text(this.formatSecondsAsColonTime(d,!0)),o.find("td").eq(3).text(this.formatSecondsAsColonTime(m,!0))),l&&(l.find("td").eq(2).text(this.formatSecondsAsColonTime(f,!0)),l.find("td").eq(3).text(this.formatSecondsAsColonTime(v,!0)))},AblePlayer.prototype.getKindFromClass=function(t){var e,i;return e=t.indexOf("kind-")+5,-1==(i=t.indexOf(" ",e))?t.substring(e):t.substring(e,i)},AblePlayer.prototype.showVtsAlert=function(t){var e;this.$vtsAlert.text(t).show(),(e=1e4,new Promise(t=>setTimeout(t,e))).then(()=>{this.$vtsAlert.text(t).hide()})},AblePlayer.prototype.parseVtsOutput=function(e){var i,a,s,n,r,o,l,h,p,c;for(i=e.attr("lang"),s=["captions","chapters","descriptions","subtitles"],r={},a=0;a<s.length;a++)r[n=s[a]]="WEBVTT\n\n";if((o=e.find("tr")).length>0)for(a=0;a<o.length;a++)n=o.eq(a).find("td").eq(1).text(),-1!==t.inArray(n,s)&&(l=o.eq(a).find("td").eq(2).text(),h=o.eq(a).find("td").eq(3).text(),p=o.eq(a).find("td").eq(4)[0].innerText,void 0!==l&&void 0!==h&&(r[n]+=l+" --\x3e "+h+"\n","undefined"!==p&&(r[n]+=p),r[n]+="\n\n"));for(c=t("<div>",{id:"able-vts-output"}),t("#able-vts").append(c),a=0;a<s.length;a++)r[n=s[a]].length>8&&this.showWebVttOutput(n,r[n],i)},AblePlayer.prototype.showWebVttOutput=function(e,i,a){var s,n,r,o,l;s=t("<h3>").text(this.capitalizeFirstLetter(e)),o="If you made changes, copy/paste the following content ",(n=this.getFilenameFromTracks(e,a))?(o+="to replace the original content of your "+this.getLanguageName(a)+" ",o+="<em>"+e+"</em> WebVTT file (<strong>"+n+"</strong>)."):o+="into a new "+this.getLanguageName(a)+" <em>"+e+"</em> WebVTT file.",r=t("<p>",{class:"able-vts-output-instructions"}).html(o),l=t("<textarea>").text(i),t("#able-vts-output").append(s,r,l)}}(jQuery),function(t){AblePlayer.prototype.initVimeoPlayer=function(){var e,i,a,s,n,r;return e=this,a=(i=new this.defer).promise(),s=this.mediaId+"_vimeo",this.$mediaContainer.prepend(t("<div>").attr("id",s)),n=this.vimeoDescId&&this.prefDesc?this.vimeoDescId:this.vimeoId,this.activeVimeoId=n,autoplay=this.okToPlay?"true":"false",r=this.playerWidth?this.vimeoUrlHasParams?{url:n,width:this.playerWidth,controls:!1}:{id:n,width:this.playerWidth,controls:!1}:this.vimeoUrlHasParams?{url:n,controls:!1}:{id:n,controls:!1},this.vimeoPlayer=new Vimeo.Player(s,r),this.vimeoPlayer.ready().then(function(){t("#"+s).children("iframe").attr({tabindex:"-1","aria-hidden":!0}),e.vimeoPlayer.getVideoWidth().then(function(t){t&&e.vimeoPlayer.getVideoHeight().then(function(i){i&&e.resizePlayer(t,i)})}).catch(function(t){}),e.hasPlaylist\|\|(e.$media.remove(),e.vimeoPlaybackRate=1,e.vimeoPlayer.setPlaybackRate(e.vimeoPlaybackRate).then(function(t){e.vimeoSupportsPlaybackRateChange=!0}).catch(function(t){e.vimeoSupportsPlaybackRateChange=!1}),i.resolve())}),a},AblePlayer.prototype.getVimeoPaused=function(){var t,e;return e=(t=new this.defer).promise(),this.vimeoPlayer.getPaused().then(function(e){t.resolve(e)}),e},AblePlayer.prototype.getVimeoEnded=function(){var t,e;return e=(t=new this.defer).promise(),this.vimeoPlayer.getEnded().then(function(e){t.resolve(e)}),e},AblePlayer.prototype.getVimeoState=function(){var e,i,a,s,n;return i=(e=new this.defer).promise(),a=[],s=this.vimeoPlayer.getPaused(),n=this.vimeoPlayer.getEnded(),a.push(s),a.push(n),s.then(function(t){e.resolve(t)}),n.then(function(t){e.resolve(t)}),t.when.apply(t,a).then(function(){e.resolve()}),i},AblePlayer.prototype.getVimeoCaptionTracks=function(){var t,e,i,a=new this.defer,s=a.promise();return t=this,this.vimeoPlayer.getTextTracks().then(function(s){if(s.length){for(e=0;e<s.length;e++)t.hasCaptions=!0,1===t.prefCaptions?t.captionsOn=!0:t.captionsOn=!1,i=s[e].language===t.lang,t.tracks.push({kind:s[e].kind,language:s[e].language,label:s[e].label,def:i});t.captions=t.tracks,t.hasCaptions=!0,t.setupPopups("captions"),a.resolve()}else t.hasCaptions=!1,t.usingVimeoCaptions=!1,a.resolve()}),s},AblePlayer.prototype.getVimeoPosterUrl=function(t,e){var i="";return fetch("http://vimeo.com/api/oembed.json?url=https://vimeo.com/"+t).then(t=>t.json()).then(t=>{i=t.thumbnail_url}).catch(t=>{thisObj.debug}),i},AblePlayer.prototype.getVimeoId=function(t){return this.vimeoUrlHasParams=!1,"number"==typeof t?t:(urlObject=new URL(t),"vimeo.com"===urlObject.hostname\|\|"player.vimeo.com"===urlObject.hostname?""!==urlObject.search?(this.vimeoUrlHasParams=!0,t):"player.vimeo.com"===urlObject.hostname?urlObject.pathname.replace("/video/",""):urlObject.pathname.replace("/",""):t)}}(jQuery); \ No newline at end of file diff --git a/src/build/separate-dompurify/ableplayer.dist.js b/src/build/separate-dompurify/ableplayer.dist.js index ba2f846..69886b5 100644 --- a/src/build/separate-dompurify/ableplayer.dist.js +++ b/src/build/separate-dompurify/ableplayer.dist.js @@ -1,37 +1,4 @@ -/! ableplayer V4.5.1 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / -/* - // JavaScript for Able Player - - // HTML5 Media API: - // http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement - // http://dev.w3.org/html5/spec-author-view/video.html - - // W3C API Test Page: - // http://www.w3.org/2010/05/video/mediaevents.html - - // YouTube Player API for iframe Embeds - https://developers.google.com/youtube/iframe_api_reference - - // YouTube Player Parameters - https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 - - // YouTube Data API - https://developers.google.com/youtube/v3 - - // Vimeo Player API - https://github.com/vimeo/player.js - - // Google API Client Library for JavaScript - https://developers.google.com/api-client-library/javascript/dev/dev_jscript - - // Google API Explorer: YouTube services and methods - https://developers.google.com/apis-explorer/#s/youtube/v3/ - - // Web Speech API (Speech Synthesis) - // https://w3c.github.io/speech-api/#tts-section - // https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis -/ - +/! ableplayer V4.8.0 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / /jslint node: true, browser: true, white: true, indent: 2, unparam: true, plusplus: true / /global $, jQuery / "use strict"; @@ -41,7 +8,6 @@ var AblePlayerInstances = []; (function ($) { $(function () { - $('video, audio').each(function (index, element) { if ($(element).data('able-player') !== undefined) { AblePlayerInstances.push(new AblePlayer($(this),$(element))); @@ -62,12 +28,13 @@ var AblePlayerInstances = []; } }); - // Construct an AblePlayer object - // Parameters are: - // media - jQuery selector or element identifying the media. + /* + * Construct the AblePlayer object. + * + * @param object media jQuery selector or element identifying the media. + / window.AblePlayer = function(media) { - var thisObj = this; // Keep track of the last player created for use with global events. @@ -79,80 +46,49 @@ var AblePlayerInstances = []; return; } - /////////////////////////////// - // // Default variables assignment - // - /////////////////////////////// - // The following variables CAN be overridden with HTML attributes // autoplay (Boolean; if present always resolves to true, regardless of value) if ($(media).attr('autoplay') !== undefined) { - this.autoplay = true; // this value remains constant + this.autoplay = true; // this value remains constant this.okToPlay = true; // this value can change dynamically - } - else { + } else { this.autoplay = false; this.okToPlay = false; } - + // loop (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('loop') !== undefined) { - this.loop = true; - } - else { - this.loop = false; - } + this.loop = ($(media).attr('loop') !== undefined) ? true : false; // playsinline (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('playsinline') !== undefined) { - this.playsInline = '1'; // this value gets passed to YT.Player contructor in youtube.js - } - else { - this.playsInline = '0'; - } + this.playsInline = ($(media).attr('playsinline') !== undefined) ? '1' : '0'; // poster (Boolean, indicating whether media element has a poster attribute) - if ($(media).attr('poster')) { - this.hasPoster = true; - } - else { - this.hasPoster = false; - } + this.hasPoster = ( $(media).attr('poster') \|\| $(media).data('poster') ) ? true : false; - // get height and width attributes, if present - // and add them to variables - // Not currently used, but might be useful for resizing player - if ($(media).attr('width')) { - this.width = $(media).attr('width'); - } - if ($(media).attr('height')) { - this.height = $(media).attr('height'); - } + this.audioPoster = $(media).data('poster'); + this.audioPosterAlt = $(media).data('poster-alt' ); + + // get height and width attributes, if present + // and add them to variables + // Not currently used, but might be useful for resizing player + this.width = $(media).attr('width') ?? 0; + this.height = $(media).attr('height') ?? 0; // start-time - if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) { - this.startTime = $(media).data('start-time'); - } - else { - this.startTime = 0; - } + var startTime = $(media).data('start-time'); + var isNumeric = ( typeof startTime === 'number' \|\| ( typeof startTime === 'string' && value.trim() !== '' && ! isNaN(value) && isFinite( Number(value) ) ) ) ? true : false; + this.startTime = ( startTime !== undefined && isNumeric ) ? startTime : 0; // debug - if ($(media).data('debug') !== undefined && $(media).data('debug') !== false) { - this.debug = true; - } - else { - this.debug = false; - } + this.debug = ($(media).data('debug') !== undefined && $(media).data('debug') !== false) ? true : false; // Path to root directory of Able Player code if ($(media).data('root-path') !== undefined) { // add a trailing slash if there is none this.rootPath = $(media).data('root-path').replace(/\/?$/, '/'); - } - else { + } else { this.rootPath = this.getRootPath(); } @@ -174,68 +110,49 @@ var AblePlayerInstances = []; if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) { this.useChaptersButton = false; - } - else { + } else { this.useChaptersButton = true; } - - // Control whether text descriptions are read aloud + + // Control whether text descriptions are read aloud // set to "false" if the sole purpose of the WebVTT descriptions file // is to integrate text description into the transcript - // set to "true" to write description text to a div - // This variable does not* control the method by which description is read. - // For that, see below (this.descMethod) + // set to "true" to write description text to a div + // This variable does not control the method by which description is read. + // For that, see below (this.descMethod) if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) { this.readDescriptionsAloud = false; - } - else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { + } else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { // support both singular and plural spelling of attribute this.readDescriptionsAloud = false; - } - else { + } else { this.readDescriptionsAloud = true; } - // Method by which text descriptions are read - // valid values of data-desc-reader are: - // 'brower' (default) - text-based audio description is handled by the browser, if supported - // 'screenreader' - text-based audio description is always handled by screen readers - // The latter may be preferable by owners of websites in languages that are not well supported - // by the Web Speech API - if ($(media).data('desc-reader') == 'screenreader') { - this.descReader = 'screenreader'; - } - else { - this.descReader = 'browser'; - } - - // Default state of captions and descriptions - // This setting is overridden by user preferences, if they exist - // values for data-state-captions and data-state-descriptions are 'on' or 'off' - if ($(media).data('state-captions') == 'off') { - this.defaultStateCaptions = 0; // off - } - else { - this.defaultStateCaptions = 1; // on by default - } - if ($(media).data('state-descriptions') == 'on') { - this.defaultStateDescriptions = 1; // on - } - else { - this.defaultStateDescriptions = 0; // off by default - } + // setting initial this.descVoices to an empty array + // to be populated later by getBrowserVoices + this.descVoices = []; - // Default setting for prefDescPause - // Extended description (i.e., pausing during description) is on by default - // but this settings give website owners control over that - // since they know the nature of their videos, and whether pausing is necessary - // This setting is overridden by user preferences, if they exist - if ($(media).data('desc-pause-default') == 'off') { - this.defaultDescPause = 0; // off - } - else { - this.defaultDescPause = 1; // on by default - } + // Method by which text descriptions are read + // valid values of data-desc-reader are: + // 'brower' (default) - text-based audio description is handled by the browser, if supported + // 'screenreader' - text-based audio description is always handled by screen readers + // The latter may be preferable by owners of websites in languages that are not well supported + // by the Web Speech API + this.descReader = ($(media).data('desc-reader') == 'screenreader') ? 'screenreader' : 'browser'; + + // Default state of captions and descriptions + // This setting is overridden by user preferences, if they exist + // values for data-state-captions and data-state-descriptions are 'on' or 'off' + this.defaultStateCaptions = ($(media).data('state-captions') == 'off') ? 0 : 1; + this.defaultStateDescriptions = ($(media).data('state-descriptions') == 'on') ? 1 : 0; + + // Default setting for prefDescPause + // Extended description (i.e., pausing during description) is on by default + // but this settings give website owners control over that + // since they know the nature of their videos, and whether pausing is necessary + // This setting is overridden by user preferences, if they exist + this.defaultDescPause = ($(media).data('desc-pause-default') == 'off') ? 0 : 1; // Headings // By default, an off-screen heading is automatically added to the top of the media player @@ -254,75 +171,60 @@ var AblePlayerInstances = []; // There are three types of interactive transcripts. // In descending of order of precedence (in case there are conflicting tags), they are: // 1. "manual" - A manually coded external transcript (requires data-transcript-src) - // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div) + // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div & a valid target element) // 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button // If data-include-transcript="false", there is no "popup" transcript - - if ($(media).data('transcript-div') !== undefined && $(media).data('transcript-div') !== "") { - this.transcriptDivLocation = $(media).data('transcript-div'); - } - else { + var transcriptDivLocation = $(media).data('transcript-div'); + if ( transcriptDivLocation !== undefined && transcriptDivLocation !== "" && null !== document.getElementById( transcriptDivLocation ) ) { + this.transcriptDivLocation = transcriptDivLocation; + } else { this.transcriptDivLocation = null; } - if ($(media).data('include-transcript') !== undefined && $(media).data('include-transcript') === false) { - this.hideTranscriptButton = true; - } - else { - this.hideTranscriptButton = null; - } + var includeTranscript = $(media).data('include-transcript'); + this.hideTranscriptButton = ( includeTranscript !== undefined && includeTranscript === false) ? true : false; this.transcriptType = null; if ($(media).data('transcript-src') !== undefined) { this.transcriptSrc = $(media).data('transcript-src'); if (this.transcriptSrcHasRequiredParts()) { this.transcriptType = 'manual'; - } - else { + } else { } - } - else if ($(media).find('track[kind="captions"], track[kind="subtitles"]').length > 0) { + } else if ($(media).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length > 0) { // required tracks are present. COULD automatically generate a transcript - if (this.transcriptDivLocation) { - this.transcriptType = 'external'; - } - else { - this.transcriptType = 'popup'; - } + this.transcriptType = (this.transcriptDivLocation) ? 'external' : 'popup'; } // In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript - // If false (default), line breaks are are removed from transcripts in order to provide a more seamless reading experience + // If false (default), line breaks are are removed from transcripts for a more seamless reading experience // If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem - if ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) { - this.lyricsMode = true; - } - else { - this.lyricsMode = false; - } + this.lyricsMode = ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) ? true : false; - // Transcript Title + // Set Transcript Title if defined explicitly. See transcript.js. if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") { this.transcriptTitle = $(media).data('transcript-title'); } - else { - // do nothing. The default title will be defined later (see transcript.js) + + // Sign Language + // sign language can be a modal (default) or assigned to a div on the page. + var signDivLocation = $(media).data('sign-div'); + if ( signDivLocation !== undefined && signDivLocation !== "" && null !== document.getElementById( signDivLocation ) ) { + this.$signDivLocation = $( '#' + signDivLocation ); + } else { + this.$signDivLocation = null; } // Captions // data-captions-position can be used to set the default captions position // this is only the default, and can be overridden by user preferences // valid values of data-captions-position are 'below' and 'overlay' - if ($(media).data('captions-position') === 'overlay') { - this.defaultCaptionsPosition = 'overlay'; - } - else { // the default, even if not specified - this.defaultCaptionsPosition = 'below'; - } + this.defaultCaptionsPosition = ($(media).data('captions-position') === 'overlay') ? 'overlay' : 'below'; // Chapters - if ($(media).data('chapters-div') !== undefined && $(media).data('chapters-div') !== "") { - this.chaptersDivLocation = $(media).data('chapters-div'); + var chaptersDiv = $(media).data('chapters-div'); + if ( chaptersDiv !== undefined && chaptersDiv !== "") { + this.chaptersDivLocation = chaptersDiv; } if ($(media).data('chapters-title') !== undefined) { @@ -330,83 +232,76 @@ var AblePlayerInstances = []; this.chaptersTitle = $(media).data('chapters-title'); } - if ($(media).data('chapters-default') !== undefined && $(media).data('chapters-default') !== "") { - this.defaultChapter = $(media).data('chapters-default'); - } - else { - this.defaultChapter = null; - } + var defaultChapter = $(media).data('chapters-default'); + this.defaultChapter = ( defaultChapter !== undefined && defaultChapter !== "") ? defaultChapter : null; // Slower/Faster buttons // valid values of data-speed-icons are 'animals' (default) and 'arrows' // 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows - if ($(media).data('speed-icons') === 'arrows') { - this.speedIcons = 'arrows'; - } - else { - this.speedIcons = 'animals'; - } + this.speedIcons = ($(media).data('speed-icons') === 'arrows') ? 'arrows' : 'animals'; // Seekbar // valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters' - if ($(media).data('seekbar-scope') === 'chapter' \|\| $(media).data('seekbar-scope') === 'chapters') { - this.seekbarScope = 'chapter'; - } - else { - this.seekbarScope = 'video'; - } + var seekbarScope = $(media).data('seekbar-scope'); + this.seekbarScope = ( seekbarScope === 'chapter' \|\| seekbarScope === 'chapters') ? 'chapter' : 'video'; // YouTube - if ($(media).data('youtube-id') !== undefined && $(media).data('youtube-id') !== "") { - this.youTubeId = this.getYouTubeId($(media).data('youtube-id')); + var youTubeId = $(media).data('youtube-id'); + if ( youTubeId !== undefined && youTubeId !== "") { + this.youTubeId = this.getYouTubeId(youTubeId); + if ( ! this.hasPoster ) { + let poster = this.getYouTubePosterUrl(this.youTubeId,'640'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('youtube-desc-id') !== undefined && $(media).data('youtube-desc-id') !== "") { - this.youTubeDescId = this.getYouTubeId($(media).data('youtube-desc-id')); + var youTubeDescId = $(media).data('youtube-desc-id'); + if ( youTubeDescId !== undefined && youTubeDescId !== "") { + this.youTubeDescId = this.getYouTubeId(youTubeDescId); } - if ($(media).data('youtube-nocookie') !== undefined && $(media).data('youtube-nocookie')) { - this.youTubeNoCookie = true; - } - else { - this.youTubeNoCookie = false; + var youTubeSignId = $(media).data('youtube-sign-src'); + if ( youTubeSignId !== undefined && youTubeSignId !== "") { + this.youTubeSignId = this.getYouTubeId(youTubeSignId); } + var youTubeNoCookie = $(media).data('youtube-nocookie'); + this.youTubeNoCookie = (youTubeNoCookie !== undefined && youTubeNoCookie) ? true : false; + // Vimeo - if ($(media).data('vimeo-id') !== undefined && $(media).data('vimeo-id') !== "") { - this.vimeoId = this.getVimeoId($(media).data('vimeo-id')); + var vimeoId = $(media).data('vimeo-id'); + if ( vimeoId !== undefined && vimeoId !== "") { + this.vimeoId = this.getVimeoId(vimeoId); + if ( ! this.hasPoster ) { + let poster = thisObj.getVimeoPosterUrl(this.vimeoId,'1200'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('vimeo-desc-id') !== undefined && $(media).data('vimeo-desc-id') !== "") { - this.vimeoDescId = this.getVimeoId($(media).data('vimeo-desc-id')); + var vimeoDescId = $(media).data('vimeo-desc-id'); + if ( vimeoDescId !== undefined && vimeoDescId !== "") { + this.vimeoDescId = this.getVimeoId(vimeoDescId); } // Skin // valid values of data-skin are: - // 'legacy' (default), two rows of controls; seekbar positioned in available space within top row - // '2020', all buttons in one row beneath a full-width seekbar - if ($(media).data('skin') == '2020') { - this.skin = '2020'; - } - else { - this.skin = 'legacy'; - } + // '2020' (default as of 4.6), all buttons in one row beneath a full-width seekbar + // 'legacy', two rows of controls; seekbar positioned in available space within top row + this.skin = ($(media).data('skin') == 'legacy') ? 'legacy' : '2020'; - // Size - // width of Able Player is determined using the following order of precedence: - // 1. data-width attribute + // Size + // width of Able Player is determined using the following order of precedence: + // 1. data-width attribute // 2. width attribute (for video or audio, although it is not valid HTML for audio) // 3. Intrinsic size from video (video only, determined later) if ($(media).data('width') !== undefined) { this.playerWidth = parseInt($(media).data('width')); - } - else if ($(media)[0].getAttribute('width')) { - // NOTE: jQuery attr() returns null for all invalid HTML attributes + } else if ($(media)[0].getAttribute('width')) { + // NOTE: jQuery attr() returns null for all invalid HTML attributes // (e.g., width on <audio>) - // but it can be acessed via JavaScript getAttribute() + // but it can be acessed via JavaScript getAttribute() this.playerWidth = parseInt($(media)[0].getAttribute('width')); - } - else { - this.playerWidth = null; + } else { + this.playerWidth = null; } // Icon type @@ -418,21 +313,18 @@ var AblePlayerInstances = []; this.forceIconType = false; if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") { var iconType = $(media).data('icon-type'); - if (iconType === 'font' \|\| iconType == 'image' \|\| iconType == 'svg') { + if (iconType === 'font' \|\| iconType === 'image' \|\| iconType === 'svg') { this.iconType = iconType; this.forceIconType = true; } } - if ($(media).data('allow-fullscreen') !== undefined && $(media).data('allow-fullscreen') === false) { - this.allowFullscreen = false; - } - else { - this.allowFullscreen = true; - } - // Define other variables that are used in fullscreen program flow - this.clickedFullscreenButton = false; - this.restoringAfterFullscreen = false; + var allowFullScreen = $(media).data('allow-fullscreen'); + this.allowFullscreen = (allowFullScreen !== undefined && allowFullScreen === false) ? false : true; + + // Define other variables that are used in fullscreen program flow + this.clickedFullscreenButton = false; + this.restoringAfterFullscreen = false; // Seek interval // Number of seconds to seek forward or back with Rewind & Forward buttons @@ -451,35 +343,26 @@ var AblePlayerInstances = []; // Now Playing // Shows "Now Playing:" plus the title of the current track above player // Only used if there is a playlist - if ($(media).data('show-now-playing') !== undefined && $(media).data('show-now-playing') === false) { - this.showNowPlaying = false; - } - else { - this.showNowPlaying = true; - } + var showNowPlaying = $(media).data('show-now-playing'); + this.showNowPlaying = (showNowPlaying !== undefined && showNowPlaying === false) ? false : true; // TTML support (experimental); enabled for testing with data-use-ttml (Boolean) if ($(media).data('use-ttml') !== undefined) { this.useTtml = true; // The following may result in a console error. this.convert = require('xml-js'); - } - else { + } else { this.useTtml = false; } // Fallback // The data-test-fallback attribute can be used to test the fallback solution in any browser - if ($(media).data('test-fallback') !== undefined && $(media).data('test-fallback') !== false) { - if ($(media).data('test-fallback') == '2') { - this.testFallback = 2; // emulate browser that doesn't support HTML5 media - } - else { - this.testFallback = 1; // emulate failure to load Able Player - } - } - else { - this.testFallback = false; + var testFallback = $(media).data('test-fallback'); + if ( testFallback !== undefined && testFallback !== false) { + // 1: build error; 2: browser doesn't support media. + this.testFallback = ( testFallback == '2' ) ? 2 : 1; + } else { + this.testFallback = false; } // Language @@ -488,54 +371,39 @@ var AblePlayerInstances = []; // 2. Lang attribute on <html> or <body>, if a matching translation file is available // 3. English // Final calculation occurs in translation.js > getTranslationText() - if ($(media).data('lang') !== undefined && $(media).data('lang') !== "") { - this.lang = $(media).data('lang').toLowerCase(); - } - else { - this.lang = null; - } + var lang = $(media).data('lang'); + this.lang = ( lang !== undefined && lang !== "") ? lang.toLowerCase() : null; // Metadata Tracks - if ($(media).data('meta-type') !== undefined && $(media).data('meta-type') !== "") { - this.metaType = $(media).data('meta-type'); + var metaType = $(media).data('meta-type'); + if ( metaType !== undefined && metaType !== "") { + this.metaType = metaType; } - - if ($(media).data('meta-div') !== undefined && $(media).data('meta-div') !== "") { - this.metaDiv = $(media).data('meta-div'); + var metaDiv = $(media).data('meta-div'); + if ( metaDiv !== undefined && metaDiv !== "") { + this.metaDiv = metaDiv; } // Search // conducting a search requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { + var searchDiv = $(media).data('search-div'); + if ( searchDiv !== undefined && searchDiv !== "") { - this.searchDiv = $(media).data('search-div'); + this.searchDiv = searchDiv; // Search term (optional; could be assigned later in a JavaScript application) - if ($(media).data('search') !== undefined && $(media).data('search') !== "") { - this.searchString = $(media).data('search'); + var searchString = $(media).data('search'); + if ( searchString !== undefined && searchString !== "") { + this.searchString = searchString; } // Search Language - if ($(media).data('search-lang') !== undefined && $(media).data('search-lang') !== "") { - this.searchLang = $(media).data('search-lang'); - } - else { - this.searchLang = null; // will change to final value of this.lang in translation.js > getTranslationText() - } + var searchLang = $(media).data('search-lang'); + this.searchLang = ( searchLang !== undefined && searchLang !== "") ? searchLang : null; // Search option: Ignore capitalization in search terms - if ($(media).data('search-ignore-caps') !== undefined && $(media).data('search-ignore-caps') !== false) { - this.searchIgnoreCaps = true; - } - else { - this.searchIgnoreCaps = false; - } - - // conducting a search currently requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - this.searchString = $(media).data('search'); - this.searchDiv = $(media).data('search-div'); - } + var searchIgnoreCaps = $(media).data('search-ignore-caps'); + this.searchIgnoreCaps = ( searchIgnoreCaps !== undefined && searchIgnoreCaps !== false) ? true : false; } // Hide controls when video starts playing @@ -544,8 +412,7 @@ var AblePlayerInstances = []; if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) { this.hideControls = true; this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode - } - else { + } else { this.hideControls = false; this.hideControlsOriginal = false; } @@ -564,13 +431,11 @@ var AblePlayerInstances = []; this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoMode = false; this.stenoFrameId = null; this.$stenoFrame = null; @@ -580,9 +445,7 @@ var AblePlayerInstances = []; this.setDefaults(); //////////////////////////////////////// - // // End assignment of default variables - // //////////////////////////////////////// this.ableIndex = AblePlayer.nextIndex; @@ -594,21 +457,15 @@ var AblePlayerInstances = []; // use defer method to defer additional processing until text is retrieved this.tt = {}; var thisObj = this; - $.when(this.getTranslationText()).then( - function () { - if (thisObj.countProperties(thisObj.tt) > 50) { - // close enough to ensure that most text variables are populated - thisObj.setup(); - } - else { - // can't continue loading player with no text - thisObj.provideFallback(); - } + async function fetchTranslations(thisObj) { + try { + await thisObj.getTranslationText(); + thisObj.setup(); + } catch { + thisObj.provideFallback(); } - ). - fail(function() { - thisObj.provideFallback(); - }); + } + fetchTranslations(thisObj); }; // Index to increment every time new player is created. @@ -623,17 +480,15 @@ var AblePlayerInstances = []; if (!thisObj.player) { // No player for this media, show last-line fallback. thisObj.provideFallback(); - } - else { + } else { thisObj.setupInstance().then(function () { thisObj.setupInstancePlaylist(); if (thisObj.hasPlaylist) { // for playlists, recreatePlayer() is called from within cuePlaylistItem() - } - else { - thisObj.recreatePlayer().then(function() { + } else { + thisObj.recreatePlayer().then(function() { thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed + thisObj.playerCreated = true; // remains true until browser is refreshed }); } }); @@ -653,13 +508,10 @@ var AblePlayerInstances = []; }; AblePlayer.localGetElementById = function(element, id) { - if (element.getRootNode) - { + if (element.getRootNode) { // Use getRootNode() and querySelector() where supported (for shadow DOM support) return $(element.getRootNode().querySelector('#' + id)); - } - else - { + } else { // If getRootNode is not supported it should be safe to use document.getElementById (since there is no shadow DOM support) return $(document.getElementById(id)); } @@ -728,8 +580,7 @@ var AblePlayerInstances = []; $el = $('<div>', { 'class': 'able-controller' }).hide(); - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { $el = $('<div>', { 'class': 'able-window-toolbar' }).hide(); @@ -744,16 +595,11 @@ var AblePlayerInstances = []; blue = rgb[2]; luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue); // range is 1 - 255; therefore 125 is the tipping point - if (luminance < 125) { // background is dark - iconColor = 'white'; - } - else { // background is light - iconColor = 'black'; - } + iconColor = (luminance < 125) ? 'white' : 'black'; + if ($elements[i] === 'controller') { this.iconColor = iconColor; - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { this.toolbarIconColor = iconColor; } $el.remove(); @@ -766,20 +612,16 @@ var AblePlayerInstances = []; this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/'; this.playButtonImg = this.imgPath + 'play.png'; this.pauseButtonImg = this.imgPath + 'pause.png'; - this.restartButtonImg = this.imgPath + 'restart.png'; - this.rewindButtonImg = this.imgPath + 'rewind.png'; this.forwardButtonImg = this.imgPath + 'forward.png'; - this.previousButtonImg = this.imgPath + 'previous.png'; this.nextButtonImg = this.imgPath + 'next.png'; if (this.speedIcons === 'arrows') { this.fasterButtonImg = this.imgPath + 'slower.png'; this.slowerButtonImg = this.imgPath + 'faster.png'; - } - else if (this.speedIcons === 'animals') { + } else if (this.speedIcons === 'animals') { this.fasterButtonImg = this.imgPath + 'rabbit.png'; this.slowerButtonImg = this.imgPath + 'turtle.png'; } @@ -789,19 +631,19 @@ var AblePlayerInstances = []; this.signButtonImg = this.imgPath + 'sign.png'; this.transcriptButtonImg = this.imgPath + 'transcript.png'; this.descriptionsButtonImg = this.imgPath + 'descriptions.png'; - this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png'; this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png'; - this.prefsButtonImg = this.imgPath + 'preferences.png'; this.helpButtonImg = this.imgPath + 'help.png'; }; - AblePlayer.prototype.getSvgData = function(button) { + AblePlayer.prototype.getIconData = function(button) { // returns array of values for creating <svg> tag for specified button // 0 = <svg> viewBox attribute // 1 = <path> d (description) attribute + // 2 = icon class for font icons + // 3 = img URL for images. var svg = Array(); switch (button) { @@ -809,142 +651,184 @@ var AblePlayerInstances = []; case 'play': svg[0] = '0 0 16 20'; svg[1] = 'M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z'; + svg[2] = 'icon-play'; + svg[3] = this.playButtonImg; break; case 'pause': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'stop': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-pause'; + svg[3] = this.pauseButtonImg; break; case 'restart': svg[0] = '0 0 20 20'; svg[1] = 'M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z'; + svg[2] = 'icon-restart'; + svg[3] = this.restartButtonImg; break; case 'rewind': svg[0] = '0 0 20 20'; svg[1] = 'M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z'; + svg[2] = 'icon-rewind'; + svg[3] = this.rewindButtonImg; break; case 'forward': svg[0] = '0 0 20 20'; svg[1] = 'M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z'; + svg[2] = 'icon-forward'; + svg[3] = this.forwardButtonImg; break; case 'previous': svg[0] = '0 0 20 20'; svg[1] = 'M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z'; + svg[2] = 'icon-previous'; + svg[3] = this.previousButtonImg; break; case 'next': svg[0] = '0 0 20 20'; svg[1] = 'M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z'; + svg[2] = 'icon-next'; + svg[3] = this.nextButtonImg; break; case 'slower': - svg[0] = '0 0 20 20'; + svg[0] = '0 0 11 20'; svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z'; + svg[2] = 'icon-slower'; + svg[3] = this.slowerButtonImg; break; case 'faster': svg[0] = '0 0 11 20'; svg[1] = 'M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-faster'; + svg[3] = this.fasterButtonImg; break; case 'turtle': svg[0] = '0 0 20 20'; svg[1] = 'M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z'; + svg[2] = 'icon-turtle'; + svg[3] = this.slowerButtonImg; break; case 'rabbit': svg[0] = '0 0 20 20'; svg[1] = 'M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z'; + svg[2] = 'icon-rabbit'; + svg[3] = this.fasterButtonImg; break; case 'ellipsis': svg[0] = '0 0 20 20'; svg[1] = 'M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z'; + svg[2] = 'icon-ellipsis'; + svg[3] = false; break; case 'pipe': svg[0] = '0 0 20 20'; svg[1] = 'M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z'; + svg[2] = 'icon-pipe'; + svg[3] = false; break; case 'captions': svg[0] = '0 0 20 20'; svg[1] = 'M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z'; + svg[2] = 'icon-captions'; + svg[3] = this.captionsButtonImg; break; case 'descriptions': svg[0] = '0 0 20 20'; svg[1] = 'M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z'; + svg[2] = 'icon-descriptions'; + svg[3] = this.descriptionsButtonImg; break; case 'sign': svg[0] = '0 0 20 20'; svg[1] = 'M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z'; + svg[2] = 'icon-sign'; + svg[3] = this.signButtonImg; break; case 'mute': case 'volume-mute': svg[0] = '0 0 20 20'; svg[1] = 'M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z'; + svg[2] = 'icon-volume-mute'; + svg[3] = this.imgPath + 'volume-mute.png'; break; case 'volume-soft': svg[0] = '0 0 20 20'; svg[1] = 'M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-soft'; + svg[3] = this.imgPath + 'volume-soft.png'; break; case 'volume-medium': svg[0] = '0 0 20 20'; svg[1] = 'M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-medium'; + svg[3] = this.imgPath + 'volume-medium.png'; break; case 'volume-loud': svg[0] = '0 0 21 20'; svg[1] = 'M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-loud'; + svg[3] = this.imgPath + 'volume-loud.png'; break; case 'chapters': svg[0] = '0 0 20 20'; svg[1] = 'M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z'; + svg[2] = 'icon-chapters'; + svg[3] = this.chaptersButtonImg; break; case 'transcript': svg[0] = '0 0 20 20'; svg[1] = 'M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z'; + svg[2] = 'icon-transcript'; + svg[3] = this.transcriptButtonImg; break; case 'preferences': svg[0] = '0 0 20 20'; svg[1] = 'M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z'; + svg[2] = 'icon-preferences'; + svg[3] = this.prefsButtonImg; break; case 'close': svg[0] = '0 0 16 20'; svg[1] = 'M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z'; + svg[2] = 'icon-close'; + svg[3] = null; break; case 'fullscreen-expand': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z'; + svg[2] = 'icon-fullscreen-expand'; + svg[3] = this.fullscreenExpandButtonImg; break; case 'fullscreen-collapse': svg[0] = '0 0 20 20'; svg[1] = 'M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'help': - svg[0] = '0 0 11 20'; - svg[1] = 'M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z'; + svg[2] = 'icon-fullscreen-collapse'; + svg[3] = this.fullscreenCollapseButtonImg; break; } @@ -952,26 +836,20 @@ var AblePlayerInstances = []; }; // Initialize player based on data on page. - // This sets some variables, but does not modify anything. Safe to call multiple times. + // This sets some variables, but does not modify anything. Safe to call multiple times. // Can call again after updating this.media so long as new media element has the same ID. AblePlayer.prototype.reinitialize = function () { - var deferred, promise, thisObj, errorMsg, srcFile; + var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - // if F12 Developer Tools aren't open in IE (through 9, no longer a problen in IE10) - // console.log causes an error - can't use debug without a console to log messages to - if (! window.console) { - this.debug = false; - } - this.startedPlaying = false; - // TODO: Move this setting to cookie. + // TODO: Move this setting to preferences. this.autoScrollTranscript = true; - //this.autoScrollTranscript = this.getCookie(autoScrollTranscript); // (doesn't work) + //this.autoScrollTranscript = this.getPref(autoScrollTranscript); // (doesn't work) // Bootstrap from this.media possibly being an ID or other selector. this.$media = $(this.media).first(); @@ -980,14 +858,12 @@ var AblePlayerInstances = []; // Set media type to 'audio' or 'video'; this determines some of the behavior of player creation. if (this.$media.is('audio')) { this.mediaType = 'audio'; - } - else if (this.$media.is('video')) { + } else if (this.$media.is('video')) { this.mediaType = 'video'; - } - else { + } else { // Able Player was initialized with some element other than <video> or <audio> this.provideFallback(); - deferred.fail(); + deferred.reject(); return promise; } @@ -1006,107 +882,36 @@ var AblePlayerInstances = []; AblePlayer.prototype.setPlayerSize = function(width, height) { - var mediaId = this.$media.attr('id'); - - // Called again after width and height are known - - if (this.mediaType === 'audio') { - if (this.playerWidth) { - this.$ableWrapper.css('width',this.playerWidth + 'px'); - } - } - else if (width > 0 && height > 0) { - this.playerWidth = width; - this.playerHeight = height; - this.aspectRatio = height / width; + // Called again after width and height are known + if (this.mediaType !== 'audio' && width > 0 && height > 0) { + this.playerWidth = width; + this.playerHeight = height; + this.aspectRatio = height / width; } }; AblePlayer.prototype.setIconType = function() { - // returns either "svg", "font" or "image" (in descending order of preference) - // Test for support of each type. If not supported, test the next type. - // last resort is image icons - - var $tempButton, $testButton, controllerFont; - + // Tests for SVG and font support removed in version 4.7.0. + // Browser support for these is no longer a risk; they are widely supported in all browsers. + // This now only returns 'svg' or 'false' if iconType is forced. if (this.forceIconType) { // use value specified in data-icon-type return false; } - // test for SVG support - // Test this method widely; failed as expected on IE8 and below - // https://stackoverflow.com/a/27568129/744281 - if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) { - // browser supports SVG - this.iconType = 'svg'; - } - else { - // browser does NOT support SVG - // test whether browser can support icon fonts, and whether user has overriding the default style sheet - // which could cause problems with proper display of the icon fonts - if (window.getComputedStyle) { - - // webkit doesn't return calculated styles unless element has been added to the DOM - // and is visible (note: visibly clipped is considered "visible") - // use playpauseButton for font-family test if it exists; otherwise must create a new temp button - if ($('span.icon-play').length) { - $testButton = $('span.icon-play'); - } - else { - $tempButton = $('<span>',{ - 'class': 'icon-play able-clipped' - }); - $('body').append($tempButton); - $testButton = $tempButton; - } - - // the following retrieves the computed value of font-family - // tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works! - // tested in Chrome 49.x with Font Changer plugin - works! - // tested in IE with user-defined style sheet enables - works! - // It does NOT account for users who have "ignore font styles on web pages" checked in IE - // There is no known way to check for that ??? - controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family'); - if (typeof controllerFont !== 'undefined') { - if (controllerFont.indexOf('able') !== -1) { - this.iconType = 'font'; - } - else { - this.iconType = 'image'; - } - } - else { - // couldn't get computed font-family; use images to be safe - this.iconType = 'image'; - } - } - else { - // window.getComputedStyle is not supported (IE 8 and earlier) - // No known way to detect computed font - // The following retrieves the value from the style sheet, not the computed font - // controllerFont = $tempButton.get(0).currentStyle.fontFamily; - // It will therefore return "able", even if the user is overriding that with a custom style sheet - // To be safe, use images - this.iconType = 'image'; - } - if (typeof $tempButton !== 'undefined') { - $tempButton.remove(); - } - } + this.iconType = 'svg'; }; // Perform one-time setup for this instance of player; called after player is first initialized. AblePlayer.prototype.setupInstance = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); if (this.$media.attr('id')) { this.mediaId = this.$media.attr('id'); - } - else { + } else { // Ensure the base media element always has an ID. this.mediaId = "ableMediaId_" + this.ableIndex; this.$media.attr('id', this.mediaId); @@ -1134,7 +939,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from YouTube var $youTubeVideos = $(this).find('li[data-youtube-id]'); $youTubeVideos.each(function() { - var youTubeId = $(this).attr('data-youtube-id'); + var youTubeId = DOMPurify.sanitize( $(this).attr('data-youtube-id') ); var youTubePoster = thisObj.getYouTubePosterUrl(youTubeId,'120'); var $youTubeImg = $('<img>',{ 'src': youTubePoster, @@ -1147,7 +952,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from Vimeo var $vimeoVideos = $(this).find('li[data-vimeo-id]'); $vimeoVideos.each(function() { - var vimeoId = $(this).attr('data-youtube-id'); + var vimeoId = $(this).attr('data-vimeo-id'); var vimeoPoster = thisObj.getVimeoPosterUrl(vimeoId,'120'); var $vimeoImg = $('<img>',{ 'src': vimeoPoster, @@ -1160,13 +965,8 @@ var AblePlayerInstances = []; $(this).find('li span').attr('aria-hidden','true'); thisObj.playlistIndex = 0; var dataEmbedded = $(this).data('embedded'); - if (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) { - // embed playlist within player - thisObj.playlistEmbed = true; - } - else { - thisObj.playlistEmbed = false; - } + // is playlist embedded within player? + thisObj.playlistEmbed = (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) ? true : false; } }); @@ -1193,12 +993,12 @@ var AblePlayerInstances = []; AblePlayer.prototype.recreatePlayer = function () { // Creates the appropriate player for the current source. - // This function is called each time a new media instance is loaded - // e.g., - // User clicks on an item in a playlist - // User swaps to/from described version of video - // Blocks of code that only need to be executed once are controlled - // by this.playerCreated + // This function is called each time a new media instance is loaded + // e.g., + // User clicks on an item in a playlist + // User swaps to/from described version of video + // Blocks of code that only need to be executed once are controlled + // by this.playerCreated // TODO: Ensure when recreating player that we carry over the mediaId if (!this.player) { @@ -1208,38 +1008,37 @@ var AblePlayerInstances = []; var deferred, promise, thisObj, prefsGroups, i; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - this.playerDeleted = false; // reset after deletePlayer() + this.playerDeleted = false; // reset after deletePlayer() // set temp stopgap to prevent this function from executing again before finished - this.recreatingPlayer = true; + this.recreatingPlayer = true; if (!this.playerCreated) { // only call these functions once this.loadCurrentPreferences(); this.injectPlayerCode(); - this.resizePlayer(this.media.videoWidth,this.media.videoHeight); + this.resizePlayer(this.media.videoWidth,this.media.videoHeight); } - this.getSampleDescriptionText(); + this.getSampleDescriptionText(); this.initSignLanguage(); this.initPlayer().then(function() { - thisObj.getTracks().then(function() { + thisObj.getTracks().then(function() { thisObj.initDescription().then(function() { thisObj.setupTracks().then(function() { - if (thisObj.hasClosedDesc) { - if (!thisObj.$descDiv \|\| - (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { - // descDiv either doesn't exist, or exists in an orphaned state - // Either way, it needs to be rebuilt... + if (thisObj.hasClosedDesc) { + if (!thisObj.$descDiv \|\| (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { + // descDiv either doesn't exist, or exists in an orphaned state + // Either way, it needs to be rebuilt... thisObj.injectTextDescriptionArea(); } } @@ -1256,7 +1055,6 @@ var AblePlayerInstances = []; thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - thisObj.setFullscreen(false); if (typeof thisObj.volume === 'undefined') { thisObj.volume = thisObj.defaultVolume; @@ -1289,37 +1087,35 @@ var AblePlayerInstances = []; thisObj.setupPopups(); thisObj.updateCaption(); thisObj.injectVTS(); - if (thisObj.chaptersDivLocation) { - thisObj.populateChaptersDiv(); - } + thisObj.populateChaptersDiv(); thisObj.showSearchResults(); // Go ahead and load media, without user requesting it // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth // However, the media needs to load for us to get the media's duration if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.$media[0].load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } } // refreshControls is called twice building/initializing the player // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete setTimeout(function() { - thisObj.refreshControls('init'); - deferred.resolve(); - },100); - }); - }); + thisObj.refreshControls(); + deferred.resolve(); + },100); + }); + }); }); }); - }); + }); }); }, function() { // initPlayer fail thisObj.provideFallback(); }); - return promise; + return promise; }; AblePlayer.prototype.initPlayer = function () { @@ -1329,33 +1125,28 @@ var AblePlayerInstances = []; // First run player specific initialization. if (this.player === 'html5') { playerPromise = this.initHtml5Player(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { playerPromise = this.initYouTubePlayer(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { playerPromise = this.initVimeoPlayer(); } // After player specific initialization is done, run remaining general initialization. - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - playerPromise.done( + playerPromise.then( function () { // done/resolved if (thisObj.useFixedSeekInterval) { + // if fixed seekInterval was not already assigned (using value of data-seek-interval) if (!thisObj.seekInterval) { thisObj.seekInterval = thisObj.defaultSeekInterval; } - else { - // fixed seekInterval was already assigned, using value of data-seek-interval attribute - } thisObj.seekIntervalCalculated = true; - } - else { + } else { thisObj.setSeekInterval(); } deferred.resolve(); } - ).fail(function () { // failed + ).finally(function () { // failed deferred.reject(); } ); @@ -1365,10 +1156,8 @@ var AblePlayerInstances = []; AblePlayer.prototype.initStenoFrame = function() { - var thisObj, deferred, promise, $iframe; - thisObj = this; - - deferred = new $.Deferred(); + var deferred, promise; + deferred = new this.defer(); promise = deferred.promise(); if (this.stenoMode && this.$stenoFrame) { @@ -1376,15 +1165,13 @@ var AblePlayerInstances = []; if (this.$stenoFrame[0].contentWindow,document.readyState == 'complete') { // iframe has already loaded deferred.resolve(); - } - else { + } else { // iframe has not loaded. Wait for it. this.$stenoFrame.on('load',function() { deferred.resolve(); }); } - } - else { + } else { // there is no stenoFrame to initialize deferred.resolve(); } @@ -1399,33 +1186,24 @@ var AblePlayerInstances = []; var thisObj, duration; thisObj = this; this.seekInterval = this.defaultSeekInterval; - if (this.useChapterTimes) { - duration = this.chapterDuration; - } - else { - duration = this.duration; - } + duration = (this.useChapterTimes) ? this.chapterDuration : this.duration; + if (typeof duration === 'undefined' \|\| duration < 1) { // no duration; just use default for now but keep trying until duration is available this.seekIntervalCalculated = false; return; - } - else { + } else { if (duration <= 20) { this.seekInterval = 5; // 4 steps max - } - else if (duration <= 30) { + } else if (duration <= 30) { this.seekInterval = 6; // 5 steps max - } - else if (duration <= 40) { + } else if (duration <= 40) { this.seekInterval = 8; // 5 steps max - } - else if (duration <= 100) { + } else if (duration <= 100) { this.seekInterval = 10; // 10 steps max - } - else { + } else { // never more than 10 steps from start to end - this.seekInterval = (duration / 10); + this.seekInterval = Math.round(duration / 10, 0); } this.seekIntervalCalculated = true; } @@ -1474,38 +1252,38 @@ var AblePlayerInstances = []; // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - - break; - default: - // some other error occurred - - break; - } - }); - } - else { - // disable Vimeo captions. - this.vimeoPlayer.disableTextTrack().then(function() { - // Vimeo captions disabled - }).catch(function(error) { - - }); - } + } + ).catch(function(error) { + switch (error.name) { + case 'InvalidTrackLanguageError': + // no track was available with the specified language + + break; + case 'InvalidTrackError': + // no track was available with the specified language and kind + + break; + default: + // some other error occurred + + break; + } + }); + } else { + // disable Vimeo captions. + this.vimeoPlayer.disableTextTrack().then(function() { + // Vimeo captions disabled + }).catch(function(error) { + + }); } + } } }; AblePlayer.prototype.initHtml5Player = function () { // Nothing special to do! - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); deferred.resolve(); return promise; @@ -1519,6 +1297,7 @@ var AblePlayerInstances = []; // Keep native player from displaying captions/subtitles by setting textTrack.mode='disabled' // https://dev.w3.org/html5/spec-author-view/video.html#text-track-mode // This should work but historically hasn't been supported in all browsers + // As of July 2025, 96% supported per https://caniuse.com/?search=text-track-mode. // Workaround for non-supporting browsers is to remove default attribute // We're doing that too in track.js > setupCaptions() var textTracks = this.$media.get(0).textTracks; @@ -1535,146 +1314,125 @@ var AblePlayerInstances = []; // Determine which player to use, if any // return 'html5', 'youtube', 'vimeo', or null - - var i, sourceType, $newItem; - if (this.testFallback) { - return null; - } - else if (this.youTubeId) { - if (this.mediaType !== 'video') { - // attempting to play a YouTube video using an element other than <video> - return null; - } - else { - return 'youtube'; - } - } - else if (this.vimeoId) { - if (this.mediaType !== 'video') { - // attempting to play a Vimeo video using an element other than <video> - return null; - } - else { - return 'vimeo'; - } - - } - else if (this.media.canPlayType) { + if (this.testFallback) { + return null; + } else if (this.youTubeId) { + // null if attempting to play a YouTube video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'youtube'; + } else if (this.vimeoId) { + // null if attempting to play a Vimeo video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'vimeo'; + } else if (this.media.canPlayType) { return 'html5'; - } - else { + } else { // Browser does not support the available media file return null; } }; - })(jQuery); (function ($) { - AblePlayer.prototype.setCookie = function(cookieValue) { - - Cookies.set('Able-Player', JSON.stringify(cookieValue), { - expires: 90, - sameSite: 'strict' - }); + AblePlayer.prototype.setPrefs = function(preferences) { + if ( typeof Cookies !== 'undefined' ) { + Cookies.set('Able-Player', JSON.stringify(preferences), { + expires: 90, + sameSite: 'strict' + }); + } else { + localStorage.setItem( 'Able-Player', JSON.stringify( preferences ) ); + } }; - AblePlayer.prototype.getCookie = function() { + AblePlayer.prototype.getPref = function() { - var defaultCookie = { + var defaultPrefs = { preferences: {}, sign: {}, transcript: {}, voices: [] }; - var cookie; + var preferences; try { - cookie = JSON.parse(Cookies.get('Able-Player')); + if ( typeof Cookies !== 'undefined' ) { + preferences = JSON.parse( Cookies.get('Able-Player') ); + } else { + preferences = JSON.parse( localStorage.getItem('Able-Player') ); + } } catch (err) { - // Original cookie can't be parsed; update to default - this.setCookie(defaultCookie); - cookie = defaultCookie; - } - if (cookie) { - return cookie; - } - else { - return defaultCookie; + // Original preferences can't be parsed; update to default + this.setPrefs( defaultPrefs ); + preferences = defaultPrefs; } + return (preferences) ? preferences : defaultPrefs; }; - AblePlayer.prototype.updateCookie = function( setting ) { - - // called when a particular setting had been updated - // useful for settings updated indepedently of Preferences dialog + AblePlayer.prototype.updatePreferences = function( setting ) { + // useful for settings updated independently of Preferences dialog // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle() // setting is any supported preference name (e.g., "prefCaptions") // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows) - var cookie, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; - cookie = this.getCookie(); + var preferences, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; + preferences = this.getPref(); if (setting === 'transcript' \|\| setting === 'sign') { if (setting === 'transcript') { $window = this.$transcriptArea; windowPos = $window.position(); - if (typeof cookie.transcript === 'undefined') { - cookie.transcript = {}; - } - cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.transcript['zindex'] = $window.css('z-index'); - cookie.transcript['top'] = windowPos.top; - cookie.transcript['left'] = windowPos.left; - cookie.transcript['width'] = $window.width(); - cookie.transcript['height'] = $window.height(); - } - else if (setting === 'sign') { + if (typeof preferences.transcript === 'undefined') { + preferences.transcript = {}; + } + preferences.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.transcript['zindex'] = $window.css('z-index'); + preferences.transcript['top'] = windowPos.top; + preferences.transcript['left'] = windowPos.left; + preferences.transcript['width'] = $window.width(); + preferences.transcript['height'] = $window.height(); + } else if (setting === 'sign') { $window = this.$signWindow; windowPos = $window.position(); - if (typeof cookie.sign === 'undefined') { - cookie.sign = {}; - } - cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.sign['zindex'] = $window.css('z-index'); - cookie.sign['top'] = windowPos.top; - cookie.sign['left'] = windowPos.left; - cookie.sign['width'] = $window.width(); - cookie.sign['height'] = $window.height(); - } - } - else if (setting === 'voice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; - } - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; - } - } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (typeof preferences.sign === 'undefined') { + preferences.sign = {}; + } + preferences.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.sign['zindex'] = $window.css('z-index'); + preferences.sign['top'] = windowPos.top; + preferences.sign['left'] = windowPos.left; + preferences.sign['width'] = $window.width(); + preferences.sign['height'] = $window.height(); + } + } else if (setting === 'voice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; + } + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; + } + } + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - } - else { + preferences.voices.push(newVoice); + } + } else { available = this.getAvailablePreferences(); - // Rebuild cookie with current cookie values, + // Rebuild preferences with current preferences values, // replacing the one value that's been changed for (i = 0; i < available.length; i++) { prefName = available[i]['name']; if (prefName == setting) { // this is the one that requires an update - cookie.preferences[prefName] = this[prefName]; + preferences.preferences[prefName] = this[prefName]; } } } - // Save updated cookie - this.setCookie(cookie); + // Save updated preferences + this.setPrefs(preferences); }; AblePlayer.prototype.getPreferencesGroups = function() { @@ -1683,17 +1441,15 @@ var AblePlayerInstances = []; // in the Preferences popup menu // Human-readable label for each group is defined in translation table if (this.usingYouTubeCaptions) { - // no transcript is possible - return ['captions','descriptions','keyboard']; - } - else if (this.usingVimeoCaptions) { + // no transcript is possible + return ['captions','descriptions','keyboard']; + } else if (this.usingVimeoCaptions) { // users cannot control caption appearance // and no transcript is possible - return ['descriptions','keyboard']; + return ['descriptions','keyboard']; + } else { + return ['captions','descriptions','keyboard','transcript']; } - else { - return ['captions','descriptions','keyboard','transcript']; - } } AblePlayer.prototype.getAvailablePreferences = function() { @@ -1705,19 +1461,25 @@ var AblePlayerInstances = []; // Modifier keys preferences prefs.push({ 'name': 'prefAltKey', // use alt key with shortcuts - 'label': this.tt.prefAltKey, + 'label': this.translate( 'prefAltKey', 'Alt' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefCtrlKey', // use ctrl key with shortcuts - 'label': this.tt.prefCtrlKey, + 'label': this.translate( 'prefCtrlKey', 'Control' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefShiftKey', - 'label': this.tt.prefShiftKey, + 'label': this.translate( 'prefShiftKey', 'Shift' ), + 'group': 'keyboard', + 'default': 0 + }); + prefs.push({ + 'name': 'prefNoKeyShortcuts', + 'label': this.translate( 'prefNoKeyShortcuts', 'Disable Keyboard Shortcuts' ), 'group': 'keyboard', 'default': 0 }); @@ -1731,7 +1493,7 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefHighlight', // highlight transcript as media plays - 'label': this.tt.prefHighlight, + 'label': this.translate( 'prefHighlight', 'Highlight transcript as media plays' ), 'group': 'transcript', 'default': 1 // on because many users can benefit }); @@ -1743,13 +1505,12 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefTabbable', // tab-enable transcript - 'label': this.tt.prefTabbable, + 'label': this.translate( 'prefTabbable', 'Keyboard-enable transcript' ), 'group': 'transcript', 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page }); // Caption preferences - prefs.push({ 'name': 'prefCaptions', // closed captions default state 'label': null, @@ -1762,23 +1523,23 @@ var AblePlayerInstances = []; /* // not supported yet prefs.push({ 'name': 'prefCaptionsStyle', - 'label': this.tt.prefCaptionsStyle, + 'label': this.translate( 'prefCaptionsStyle', 'Style' ), 'group': 'captions', - 'default': this.tt.captionsStylePopOn + 'default': this.translate( 'captionsStylePopOn', 'Pop-on' ) }); / - // captions are always positioned above the player for audio + // captions are always positioned above the player for audio if (this.mediaType === 'video') { prefs.push({ 'name': 'prefCaptionsPosition', - 'label': this.tt.prefCaptionsPosition, + 'label': this.translate( 'prefCaptionsPosition', 'Position' ), 'group': 'captions', 'default': this.defaultCaptionsPosition }); - } + } prefs.push({ 'name': 'prefCaptionsFont', - 'label': this.tt.prefCaptionsFont, + 'label': this.translate( 'prefCaptionsFont', 'Font' ), 'group': 'captions', 'default': 'sans-serif' }); @@ -1786,7 +1547,7 @@ var AblePlayerInstances = []; // This is the one option that is supported by YouTube IFrame API prefs.push({ 'name': 'prefCaptionsSize', - 'label': this.tt.prefCaptionsSize, + 'label': this.translate( 'prefCaptionsSize', 'Font size' ), 'group': 'captions', 'default': '100%' }); @@ -1795,25 +1556,25 @@ var AblePlayerInstances = []; prefs.push({ 'name': 'prefCaptionsColor', - 'label': this.tt.prefCaptionsColor, + 'label': this.translate( 'prefCaptionsColor', 'Text Color' ), 'group': 'captions', 'default': 'white' }); prefs.push({ 'name': 'prefCaptionsBGColor', - 'label': this.tt.prefCaptionsBGColor, + 'label': this.translate( 'prefCaptionsBGColor', 'Background' ), 'group': 'captions', 'default': 'black' }); prefs.push({ 'name': 'prefCaptionsOpacity', - 'label': this.tt.prefCaptionsOpacity, + 'label': this.translate( 'prefCaptionsOpacity', 'Opacity' ), 'group': 'captions', 'default': '100%' }); } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { // Description preferences prefs.push({ 'name': 'prefDesc', // audio description default state @@ -1829,37 +1590,40 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefDescVoice', - 'label': this.tt.prefDescVoice, + 'label': this.translate( 'prefDescVoice', 'Voice' ), 'group': 'descriptions', 'default': null // will be set later, in injectPrefsForm() }); prefs.push({ 'name': 'prefDescPitch', - 'label': this.tt.prefDescPitch, + 'label': this.translate( 'prefDescPitch', 'Pitch' ), 'group': 'descriptions', 'default': 1 // 0 to 2 }); prefs.push({ 'name': 'prefDescRate', - 'label': this.tt.prefDescRate, + 'label': this.translate( 'prefDescRate', 'Rate' ), 'group': 'descriptions', 'default': 1 // 0.1 to 10 (1 is normal speech; 2 is fast but decipherable; >2 is super fast) }); prefs.push({ 'name': 'prefDescVolume', - 'label': this.tt.volume, + 'label': this.translate( 'volume', 'Volume' ), 'group': 'descriptions', 'default': 1 // 0 to 1 }); - prefs.push({ - 'name': 'prefDescPause', // automatically pause when closed description starts - 'label': this.tt.prefDescPause, - 'group': 'descriptions', - 'default': this.defaultDescPause - }); + // Don't enable pause option if video described files in use. + if ( this.descMethod !== 'video' ) { + prefs.push({ + 'name': 'prefDescPause', // automatically pause when closed description starts + 'label': this.translate( 'prefDescPause', 'Automatically pause video when description starts' ), + 'group': 'descriptions', + 'default': this.defaultDescPause + }); + } prefs.push({ 'name': 'prefDescVisible', // visibly show closed description (if avilable and used) - 'label': this.tt.prefDescVisible, + 'label': this.translate( 'prefDescVisible', 'Make description visible' ), 'group': 'descriptions', 'default': 0 // off as of 4.3.16, to avoid overloading the player with visible features }); @@ -1877,29 +1641,28 @@ var AblePlayerInstances = []; AblePlayer.prototype.loadCurrentPreferences = function () { - // Load current/default preferences from cookie into the AblePlayer object. + // Load current/default preferences into the AblePlayer object. var available = this.getAvailablePreferences(); - var cookie = this.getCookie(); - // Copy current cookie values into this object, and fill in any default values. + var preferences = this.getPref(); + // Copy current preferences values into this object, and fill in any default values. for (var ii = 0; ii < available.length; ii++) { var prefName = available[ii]['name']; var defaultValue = available[ii]['default']; - if (cookie.preferences[prefName] !== undefined) { - this[prefName] = cookie.preferences[prefName]; - } - else { - cookie.preferences[prefName] = defaultValue; + if (preferences.preferences[prefName] !== undefined) { + this[prefName] = preferences.preferences[prefName]; + } else { + preferences.preferences[prefName] = defaultValue; this[prefName] = defaultValue; } } - // Also load array of preferred voices from cookie - if (typeof cookie.voices !== 'undefined') { - this.prefVoices = cookie.voices; - } + // Also load array of preferred voices from preferences + if (typeof preferences.voices !== 'undefined') { + this.prefVoices = preferences.voices; + } - this.setCookie(cookie); + this.setPrefs(preferences); }; AblePlayer.prototype.injectPrefsForm = function (form) { @@ -1907,19 +1670,12 @@ var AblePlayerInstances = []; // Creates a preferences form and injects it. // form is one of the supported forms (groups) defined in getPreferencesGroups() - var thisObj, available, descLangs, - $prefsDiv, formTitle, introText, - $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, - $fieldset, fieldsetClass, fieldsetId, - $descFieldset, $descLegend, $legend, legendId, - thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField, - $div1,id1,$radio1,$label1, - $div2,id2,$radio2,$label2, - options,$thisOption,optionValue,optionLang,optionText,sampleCapsDiv, - changedPref,changedSpan,changedText, - currentDescState, prefDescVoice, - $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem, - dialog,saveButton,cancelButton; + var thisObj, available, + $prefsDiv, formTitle, introText, $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, + $fieldset, fieldsetClass, fieldsetId, $legend, legendId, thisPref, $thisDiv, thisClass, + thisId, $thisLabel, $thisField, options,$thisOption,optionValue,optionLang,optionText, + changedPref,changedSpan,changedText, currentDescState, prefDescVoice, $kbHeading,$kbList, + kbLabels,keys,kbListText,$kbListItem, dialog,$saveButton,$cancelButton,$buttonContainer; thisObj = this; available = this.getAvailablePreferences(); @@ -1931,83 +1687,74 @@ var AblePlayerInstances = []; var customClass = 'able-prefs-form-' + form; $prefsDiv.addClass(customClass); - // add titles and intros - if (form == 'captions') { - formTitle = this.tt.prefTitleCaptions; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage - } - else if (form == 'descriptions') { - formTitle = this.tt.prefTitleDescriptions; + // add titles and intros + if (form == 'captions') { + formTitle = this.translate( 'prefTitleCaptions', 'Captions Preferences' ); + } else if (form == 'descriptions') { + formTitle = this.translate( 'prefTitleDescriptions', 'Audio Description Preferences' ); var $prefsIntro = $('<p>',{ - text: this.tt.prefIntroDescription1 + text: this.translate( 'prefIntroDescription1', 'This media player supports audio description in two ways: ' ) }); var $prefsIntroUL = $('<ul>'); var $prefsIntroLI1 = $('<li>',{ - text: this.tt.prefDescFormatOption1 + text: this.translate( 'prefDescFormatOption1', 'alternative described version of video' ) }); var $prefsIntroLI2 = $('<li>',{ - text: this.tt.prefDescFormatOption2 + text: this.translate( 'prefDescFormatOption2', 'text-based description, announced by screen reader' ) }); $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2); if (this.hasOpenDesc && this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2 + ' '; - currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>'; - currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else if (this.hasOpenDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.'; - } - else if (this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else { - currentDescState = this.tt.prefIntroDescriptionNone; + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ) + ' '; + currentDescState += '<strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>'; + currentDescState += ' <em>' + this.translate( 'and', 'and' ) + '</em> <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else if (this.hasOpenDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>.'; + } else if (this.hasClosedDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else { + currentDescState = this.translate( 'prefIntroDescriptionNone', 'The current video has no audio description in either format.' ); } $prefsIntroP2 = $('<p>',{ html: currentDescState }); - p3Text = this.tt.prefIntroDescription3; + p3Text = this.translate( 'prefIntroDescription3', 'Use the following form to set your preferences related to text-based audio description.' ); if (this.hasOpenDesc \|\| this.hasClosedDesc) { - p3Text += ' ' + this.tt.prefIntroDescription4; + p3Text += ' ' + this.translate( 'prefIntroDescription4', 'After you save your settings, audio description can be toggled on/off using the Description button.' ); } $prefsIntroP3 = $('<p>',{ text: p3Text }); - $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3); - } - else if (form == 'keyboard') { - formTitle = this.tt.prefTitleKeyboard; - introText = this.tt.prefIntroKeyboard1; - introText += ' ' + this.tt.prefIntroKeyboard2; - introText += ' ' + this.tt.prefIntroKeyboard3; + $prefsDiv.append( $prefsIntro, $prefsIntroUL, $prefsIntroP2, $prefsIntroP3 ); + } else if (form == 'keyboard') { + formTitle = this.translate( 'prefTitleKeyboard', 'Keyboard Preferences' ); + introText = this.translate( 'prefIntroKeyboard1', 'The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list).' ); + introText += ' ' + this.translate( 'prefIntroKeyboard2', 'Modifier keys (Shift, Alt, and Control) can be assigned below.' ); + introText += ' ' + this.translate( 'prefIntroKeyboard3', 'NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you.' ); $prefsIntro = $('<p>',{ text: introText }); $prefsDiv.append($prefsIntro); - } - else if (form == 'transcript') { - formTitle = this.tt.prefTitleTranscript; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage + } else if (form == 'transcript') { + formTitle = this.translate( 'prefTitleTranscript', 'Transcript Preferences' ); } - $fieldset = $('<div>').attr('role','group'); + $fieldset = $('<div>').attr('role','group'); fieldsetClass = 'able-prefs-' + form; fieldsetId = this.mediaId + '-prefs-' + form; legendId = fieldsetId + '-legend'; $fieldset.addClass(fieldsetClass).attr('id',fieldsetId); if (form === 'keyboard') { - $legend = $('<h2>' + this.tt.prefHeadingKeyboard1 + '</h2>'); + $legend = $('<h2>' + this.translate( 'prefHeadingKeyboard1', 'Modifier keys used for shortcuts' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); - } - else if (form === 'descriptions') { - $legend = $('<h2>' + this.tt.prefHeadingTextDescription + '</h2>'); + } else if (form === 'descriptions') { + $legend = $('<h2>' + this.translate( 'prefHeadingTextDescription', 'Text-based audio description' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); @@ -2030,7 +1777,7 @@ var AblePlayerInstances = []; }); if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') { // add a change handler that updates the style of the sample caption text - $thisField.change(function() { + $thisField.on( 'change', function() { changedPref = $(this).attr('name'); thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref); }); @@ -2040,28 +1787,19 @@ var AblePlayerInstances = []; if (thisPref === 'prefCaptionsPosition') { optionValue = options[j]; if (optionValue === 'overlay') { - optionText = this.tt.captionsPositionOverlay; - } - else if (optionValue === 'below') { + optionText = this.translate( 'captionsPositionOverlay', 'Overlay' ); + } else if (optionValue === 'below') { optionValue = options[j]; - optionText = this.tt.captionsPositionBelow; + optionText = this.translate( 'captionsPositionBelow', 'Below video' ); } - } - else if (thisPref === 'prefCaptionsFont' \|\| thisPref === 'prefCaptionsColor' \|\| thisPref === 'prefCaptionsBGColor') { + } else if (thisPref === 'prefCaptionsFont' \|\| thisPref === 'prefCaptionsColor' \|\| thisPref === 'prefCaptionsBGColor') { optionValue = options[j][0]; optionText = options[j][1]; - } - else if (thisPref === 'prefCaptionsOpacity') { + } else if (thisPref === 'prefCaptionsOpacity') { optionValue = options[j]; optionText = options[j]; - if (optionValue === '0%') { - optionText += ' (' + this.tt.transparent + ')'; - } - else if (optionValue === '100%') { - optionText += ' (' + this.tt.solid + ')'; - } - } - else { + optionText += (optionValue === '0%') ? ' (' + this.translate( 'transparent', 'transparent' ) + ')' : ' (' + this.translate( 'solid', 'solid' ) + ')'; + } else { optionValue = options[j]; optionText = options[j]; } @@ -2075,8 +1813,7 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } $thisDiv.append($thisLabel,$thisField); - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); if (thisPref === 'prefDescPause' \|\| thisPref === 'prefDescVisible') { // these preferences are checkboxes @@ -2092,19 +1829,18 @@ var AblePlayerInstances = []; $thisField.prop('checked',true); } $thisDiv.append($thisField,$thisLabel); - } - else if (this.synth) { + } else if (this.synth) { // Only show these options if browser supports speech synthesis $thisDiv.addClass('able-prefs-select'); $thisField = $('<select>',{ name: thisPref, id: thisId, }); - if (thisPref === 'prefDescVoice' && this.descVoices) { - prefDescVoice = this.getPrefDescVoice(); + if (thisPref === 'prefDescVoice' && this.descVoices.length) { + prefDescVoice = this.getPrefDescVoice(); for (j=0; j < this.descVoices.length; j++) { optionValue = this.descVoices[j].name; - optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); + optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); optionText = optionValue + ' (' + this.descVoices[j].lang + ')'; $thisOption = $('<option>',{ 'value': optionValue, @@ -2117,12 +1853,10 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } this.$voiceSelectField = $thisField; - } - else { + } else { if (thisPref == 'prefDescPitch') { // 0 to 2 options = [0,0.5,1,1.5,2]; - } - else if (thisPref == 'prefDescRate') { // 0.1 to 10 + } else if (thisPref == 'prefDescRate') { // 0.1 to 10 // Tests with a variety of voices on MacOS and Windows // yielded the following choices that seem reasonable for audio description: // 0.5 - too slow (exclude this) @@ -2140,8 +1874,7 @@ var AblePlayerInstances = []; // Note: if these values are modified, must also modfiy them // in makePrefsValueReadable() options = [0.7,0.8,0.9,1,1.1,1.2,1.5,2,2.5,3]; - } - else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 + } else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 options = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]; } if (typeof options !== 'undefined') { @@ -2166,8 +1899,7 @@ var AblePlayerInstances = []; }); $thisDiv.append($thisLabel,$thisField); } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); $thisField = $('<input>',{ type: 'checkbox', @@ -2186,26 +1918,35 @@ var AblePlayerInstances = []; if (changedPref === 'prefAltKey') { changedSpan = '.able-modkey-alt'; changedText = thisObj.tt.prefAltKey + ' + '; - } - else if (changedPref === 'prefCtrlKey') { + } else if (changedPref === 'prefCtrlKey') { changedSpan = '.able-modkey-ctrl'; changedText = thisObj.tt.prefCtrlKey + ' + '; - } - else if (changedPref === 'prefShiftKey') { + } else if (changedPref === 'prefShiftKey') { changedSpan = '.able-modkey-shift'; changedText = thisObj.tt.prefShiftKey + ' + '; } - if ($(this).is(':checked')) { - $(changedSpan).text(changedText); - } - else { - $(changedSpan).text(''); + if ( changedPref !== 'prefNoKeyShortcuts' ) { + if ($(this).is(':checked')) { + $(changedSpan).text(changedText); + } else { + $(changedSpan).text(''); + } + } else { + if ($(this).is(':checked')) { + $('.able-modkey-item').addClass('hidden'); + } else { + $('.able-modkey-item').removeClass('hidden'); + } } }); } $thisDiv.append($thisField,$thisLabel); } - $fieldset.append($thisDiv); + if (thisPref === 'prefDescVoice' && !this.descVoices.length) { + // No voices are available (e.g., in Safari 15.4 on Mac OS) + } else { + $fieldset.append($thisDiv); + } } } $prefsDiv.append($fieldset); @@ -2216,25 +1957,25 @@ var AblePlayerInstances = []; if (!this.usingYouTubeCaptions) { this.$sampleCapsDiv = $('<div>',{ 'class': 'able-captions-sample' - }).text(this.tt.sampleCaptionText); + }).text( this.translate( 'sampleCaptionText', 'Sample caption text' ) ); $prefsDiv.append(this.$sampleCapsDiv); this.stylizeCaptions(this.$sampleCapsDiv); } - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { if (this.synth) { // add a div with sample audio description text this.$sampleDescDiv = $('<div>',{ 'class': 'able-desc-sample' - }).text(this.tt.sampleDescriptionText); + }).text( this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) ); $prefsDiv.append(this.$sampleDescDiv); - this.currentSampleText = this.tt.sampleDescriptionText; + this.currentSampleText = this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ); } - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { + let shortcutClass = (this.prefNoKeyShortcuts === 1 ) ? 'able-modkey-item hidden' : 'able-modkey-item'; + // add a current list of keyboard shortcuts $kbHeading = $('<h2>',{ - text: this.tt.prefHeadingKeyboard2 + text: this.translate( 'prefHeadingKeyboard2', 'Current keyboard shortcuts' ) }); $kbList = $('<ul>'); // create arrays of kbLabels and keys @@ -2242,100 +1983,85 @@ var AblePlayerInstances = []; keys = []; for (i=0; i<this.controls.length; i++) { if (this.controls[i] === 'play') { - kbLabels.push(this.tt.play + '/' + this.tt.pause); - keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar); - } - else if (this.controls[i] === 'restart') { - kbLabels.push(this.tt.restart); + kbLabels.push( this.translate( 'play', 'Play' ) + '/' + this.translate( 'pause', 'Pause' ) ); + keys.push('p</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-help-modifiers"> ' + this.translate( 'spacebar', 'spacebar' )); + } else if (this.controls[i] === 'restart') { + kbLabels.push(this.translate( 'restart', 'Restart' )); keys.push('s'); - } - else if (this.controls[i] === 'previous') { - kbLabels.push(this.tt.prevTrack); + } else if (this.controls[i] === 'previous') { + kbLabels.push( this.translate( 'prevTrack', 'Previous track' ) ); keys.push('b'); // b = back - } - else if (this.controls[i] === 'next') { - kbLabels.push(this.tt.nextTrack); + } else if (this.controls[i] === 'next') { + kbLabels.push( this.translate( 'nextTrack', 'Next track' ) ); keys.push('n'); - } - else if (this.controls[i] === 'rewind') { - kbLabels.push(this.tt.rewind); + } else if (this.controls[i] === 'rewind') { + kbLabels.push(this.translate( 'rewind', 'Rewind' )); keys.push('r'); - } - else if (this.controls[i] === 'forward') { - kbLabels.push(this.tt.forward); + } else if (this.controls[i] === 'forward') { + kbLabels.push(this.translate( 'forward', 'Forward' )); keys.push('f'); - } - else if (this.controls[i] === 'volume') { - kbLabels.push(this.tt.volume); - keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9'); + } else if (this.controls[i] === 'volume') { + kbLabels.push(this.translate( 'volume', 'Volume' )); + keys.push('v</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-modkey">1-9'); // mute toggle - kbLabels.push(this.tt.mute + '/' + this.tt.unmute); + kbLabels.push(this.translate( 'mute', 'Mute' ) + '/' + this.translate( 'unmute', 'Unmute' )); keys.push('m'); - } - else if (this.controls[i] === 'captions') { + } else if (this.controls[i] === 'captions') { if (this.captions.length > 1) { // caption button launches a Captions popup menu - kbLabels.push(this.tt.captions); - } - else { + kbLabels.push(this.translate( 'captions', 'Captions' )); + } else { // there is only one caption track // therefore caption button is a toggle if (this.captionsOn) { - kbLabels.push(this.tt.hideCaptions); - } - else { - kbLabels.push(this.tt.showCaptions); + kbLabels.push(this.translate( 'hideCaptions', 'Hide captions' )); + } else { + kbLabels.push(this.translate( 'showCaptions', 'Show captions' )); } } keys.push('c'); - } - else if (this.controls[i] === 'descriptions') { + } else if (this.controls[i] === 'descriptions') { if (this.descOn) { - kbLabels.push(this.tt.turnOffDescriptions); - } - else { - kbLabels.push(this.tt.turnOnDescriptions); + kbLabels.push(this.translate( 'turnOffDescriptions', 'Turn off descriptions' )); + } else { + kbLabels.push(this.translate( 'turnOnDescriptions', 'Turn on descriptions' )); } keys.push('d'); - } - else if (this.controls[i] === 'prefs') { - kbLabels.push(this.tt.preferences); + } else if (this.controls[i] === 'prefs') { + kbLabels.push(this.translate( 'preferences', 'Preferences' )); keys.push('e'); } - else if (this.controls[i] === 'help') { - kbLabels.push(this.tt.help); - keys.push('h'); - } } for (i=0; i<keys.length; i++) { // alt kbListText = '<span class="able-modkey-alt">'; if (this.prefAltKey === 1) { - kbListText += this.tt.prefAltKey + ' + '; + kbListText += this.translate( 'prefAltKey', 'Alt' ) + ' + '; } kbListText += '</span>'; // ctrl kbListText += '<span class="able-modkey-ctrl">'; if (this.prefCtrlKey === 1) { - kbListText += this.tt.prefCtrlKey + ' + '; + kbListText += this.translate( 'prefCtrlKey', 'Control' ) + ' + '; } kbListText += '</span>'; // shift kbListText += '<span class="able-modkey-shift">'; if (this.prefShiftKey === 1) { - kbListText += this.tt.prefShiftKey + ' + '; + kbListText += this.translate( 'prefShiftKey', 'Shift' ) + ' + '; } kbListText += '</span>'; kbListText += '<span class="able-modkey">' + keys[i] + '</span>'; kbListText += ' = ' + kbLabels[i]; $kbListItem = $('<li>',{ - html: kbListText + 'class': shortcutClass, + html: kbListText, }); $kbList.append($kbListItem); } // add Escape key - kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>'; - kbListText += ' = ' + this.tt.escapeKeyFunction; + kbListText = '<span class="able-modkey">' + this.translate( 'escapeKey', 'Escape' ) + '</span>'; + kbListText += ' = ' + this.translate( 'escapeKeyFunction', 'Close current dialog or popup menu' ); $kbListItem = $('<li>',{ html: kbListText }); @@ -2345,56 +2071,53 @@ var AblePlayerInstances = []; } // $prefsDiv (dialog) must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers $('body').append($prefsDiv); - dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', true, formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em'); + dialog = new AccessibleDialog( + $prefsDiv, + this.$prefsButton, + formTitle, + thisObj.tt.closeButtonLabel + ); // Add save and cancel buttons. - $prefsDiv.append('<hr>'); - saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - saveButton.click(function () { + $buttonContainer = $( '<div class="able-prefs-buttons"></div>' ); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); + $saveButton.on( 'click', function () { dialog.hide(); thisObj.savePrefsFromForm(); }); - cancelButton.click(function () { + $cancelButton.on( 'click', function () { dialog.hide(); thisObj.resetPrefsForm(); }); - - $prefsDiv.append(saveButton); - $prefsDiv.append(cancelButton); - + $buttonContainer.append( $saveButton,$cancelButton ); + $prefsDiv.append($buttonContainer); // Associate the dialog's H1 as aria-labelledby for groups of fields - // (alternative to fieldset and legend) - if (form === 'captions' \|\| form === 'transcript') { - $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); + // (alternative to fieldset and legend) + if (form === 'captions' \|\| form === 'transcript') { + $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); } // add global reference for future control if (form === 'captions') { this.captionPrefsDialog = dialog; - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { this.descPrefsDialog = dialog; - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { this.keyboardPrefsDialog = dialog; - } - else if (form === 'transcript') { + } else if (form === 'transcript') { this.transcriptPrefsDialog = dialog; } // Add click handler for dialog close button // (button is added in dialog.js) - $('div.able-prefs-form button.modalCloseButton').click(function() { + $('div.able-prefs-form button.modalCloseButton').on( 'click', function() { thisObj.resetPrefsForm(); }) // Add handler for escape key - $('div.able-prefs-form').keydown(function(e) { - if (e.which === 27) { // escape + $('div.able-prefs-form').on( 'keydown', function(e) { + if (e.key === 'Escape') { thisObj.resetPrefsForm(); } }); @@ -2402,23 +2125,21 @@ var AblePlayerInstances = []; AblePlayer.prototype.getPrefDescVoice = function () { - // return user's preferred voice for the current language from cookie.voices - var lang, cookie, i; + // return user's preferred voice for the current language from preferences.voices + var lang, preferences, i; - if (this.selectedDescriptions) { - lang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - lang = this.captionLang; - } - else { - lang = this.lang; + if (this.selectedDescriptions) { + lang = this.selectedDescriptions.language; + } else if (this.captionLang) { + lang = this.captionLang; + } else { + lang = this.lang; } - cookie = this.getCookie(); - if (cookie.voices) { - for (i=0; i < cookie.voices.length; i++) { - if (cookie.voices[i].lang === lang) { - return cookie.voices[i].name; + preferences = this.getPref(); + if (preferences.voices) { + for (i=0; i < preferences.voices.length; i++) { + if (preferences.voices[i].lang === lang) { + return preferences.voices[i].name; } } } @@ -2427,9 +2148,9 @@ var AblePlayerInstances = []; AblePlayer.prototype.rebuildDescPrefsForm = function () { - // Called if this.descVoices changes, which may happen if: - // getBrowserVoices() succeeds after an earlier failure - // user changes language of captions/subtitles and descVoices changes to match the new language + // Called if this.descVoices changes, which may happen if: + // getBrowserVoices() succeeds after an earlier failure + // user changes language of captions/subtitles and descVoices changes to match the new language var i, optionValue, optionText, $thisOption; @@ -2450,161 +2171,141 @@ var AblePlayerInstances = []; } }; - AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { - - // The values for pitch, rate, and volume (web speech API) - // are strange and inconsistent between variables - // this function returns text that is more readable than the values themselves + AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { + + // The values for pitch, rate, and volume (web speech API) + // are strange and inconsistent between variables + // this function returns text that is more readable than the values themselves + + if (pref === 'prefDescPitch') { + if (value === 0) { + return this.translate( 'prefDescPitch1', 'Very low' ); + } else if (value === 0.5) { + return this.translate( 'prefDescPitch2', 'Low' ); + } else if (value === 1) { + return this.translate( 'prefDescPitch3', 'Default' ); + } else if (value === 1.5) { + return this.translate( 'prefDescPitch4', 'High' ); + } else if (value === 2) { + return this.translate( 'prefDescPitch5', 'Very high' ); + } + } else if (pref === 'prefDescRate') { + // default in the API is 0.1 to 10, where 1 is normal speaking voice + // our custom range offers several rates close to 1 + // plus a couple of crazy fast ones for sport + // Our more readable options (1-10) or mapped here to API values + if (value === 0.7) { + return 1; + } else if (value === 0.8) { + return 2; + } else if (value === 0.9) { + return 3; + } else if (value === 1) { + return 4; + } else if (value === 1.1) { + return 5; + } else if (value === 1.2) { + return 6; + } else if (value === 1.5) { + return 7; + } else if (value === 2) { + return 8; + } else if (value === 2.5) { + return 9; + } else if (value === 3) { + return 10; + } + } else if (pref === 'prefDescVolume') { + // values range from 0.1 to 1.0 + return value 10; + } + return value; + }; + + AblePlayer.prototype.resetPrefsForm = function () { + + // Reset preferences form with default values from preferences + // Called when: + // User clicks cancel or close button in Prefs Dialog + // User presses Escape to close Prefs dialog + // User clicks Save in Prefs dialog, & there's more than one player on page + + var thisObj, preferences, available, i, prefName; - if (pref === 'prefDescPitch') { - if (value === 0) { - return this.tt.prefDescPitch1; - } - else if (value === 0.5) { - return this.tt.prefDescPitch2; - } - else if (value === 1) { - return this.tt.prefDescPitch3; - } - else if (value === 1.5) { - return this.tt.prefDescPitch4; - } - else if (value === 2) { - return this.tt.prefDescPitch5; - } - } - else if (pref === 'prefDescRate') { - // default in the API is 0.1 to 10, where 1 is normal speaking voice - // our custom range offers several rates close to 1 - // plus a couple of crazy fast ones for sport - // Our more readable options (1-10) or mapped here to API values - if (value === 0.7) { - return 1; - } - else if (value === 0.8) { - return 2; - } - else if (value === 0.9) { - return 3; - } - else if (value === 1) { - return 4; - } - else if (value === 1.1) { - return 5; - } - else if (value === 1.2) { - return 6; - } - else if (value === 1.5) { - return 7; - } - else if (value === 2) { - return 8; - } - else if (value === 2.5) { - return 9; - } - else if (value === 3) { - return 10; - } - } - else if (pref === 'prefDescVolume') { - // values range from 0.1 to 1.0 - return value * 10; - } - return value; - }; - - AblePlayer.prototype.resetPrefsForm = function () { - - // Reset preferences form with default values from cookie - // Called when: - // User clicks cancel or close button in Prefs Dialog - // User presses Escape to close Prefs dialog - // User clicks Save in Prefs dialog, & there's more than one player on page - - var thisObj, cookie, available, i, prefName, prefId, thisDiv, thisId; - - thisObj = this; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (i=0; i<available.length; i++) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is a caption-related select box - $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]); - } - else { // all others are checkboxes - if (this[prefName] === 1) { - $('input[name="' + prefName + '"]').prop('checked',true); - } - else { - $('input[name="' + prefName + '"]').prop('checked',false); - } + thisObj = this; + preferences = this.getPref(); + available = this.getAvailablePreferences(); + for (i=0; i<available.length; i++) { + prefName = available[i]['name']; + if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + // this is a caption-related select box + $('select[name="' + prefName + '"]').val(preferences.preferences[prefName]); + } else { // all others are checkboxes + if (this[prefName] === 1) { + $('input[name="' + prefName + '"]').prop('checked',true); + } else { + $('input[name="' + prefName + '"]').prop('checked',false); } } - // also restore style of sample caption div - this.stylizeCaptions(this.$sampleCapsDiv); - }; + } + // also restore style of sample caption div + this.stylizeCaptions(this.$sampleCapsDiv); + }; AblePlayer.prototype.savePrefsFromForm = function () { // Return a prefs object constructed from the form. // called when user saves the Preferences form - // update cookie with new value - var cookie, available, prefName, prefId, - voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, + // update preferences with new value + var preferences, available, prefName, prefId, + voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, numCapChanges, capSizeChanged, capSizeValue, newValue; numChanges = 0; numCapChanges = 0; // changes to caption-style-related preferences capSizeChanged = false; - cookie = this.getCookie(); + preferences = this.getPref(); available = this.getAvailablePreferences(); for (var i=0; i < available.length; i++) { // only prefs with labels are used in the Prefs form if (available[i]['label']) { prefName = available[i]['name']; prefId = this.mediaId + '_' + prefName; - if (prefName === 'prefDescVoice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; + if (prefName === 'prefDescVoice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; } voiceSelectId = this.mediaId + '_prefDescVoice'; this.prefDescVoice = $('select#' + voiceSelectId).find(':selected').val(); this.prefDescVoiceLang = $('select#' + voiceSelectId).find(':selected').attr('data-lang'); - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; } } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - numChanges++; - } - else if (prefName == 'prefDescMethod') { + preferences.voices.push(newVoice); + } + numChanges++; + } else if (prefName == 'prefDescMethod') { // As of v4.0.10, prefDescMethod is no longer a choice // this.prefDescMethod = $('input[name="' + prefName + '"]:checked').val(); this.prefDescMethod = 'video'; - if (this.prefDescMethod !== cookie.preferences['prefDescMethod']) { // user's preference has changed - cookie.preferences['prefDescMethod'] = this.prefDescMethod; + if (this.prefDescMethod !== preferences.preferences['prefDescMethod']) { // user's preference has changed + preferences.preferences['prefDescMethod'] = this.prefDescMethod; numChanges++; } - } - else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + } else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { // this is one of the caption-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref (for caption fields, not done elsewhere) this[prefName] = newValue; numChanges++; @@ -2614,37 +2315,32 @@ var AblePlayerInstances = []; capSizeChanged = true; capSizeValue = newValue; } - } - else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { + } else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { // this is one of the description-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref this[prefName] = newValue; numChanges++; } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes if ($('input[id="' + prefId + '"]').is(':checked')) { - cookie.preferences[prefName] = 1; + preferences.preferences[prefName] = 1; if (this[prefName] === 1) { // nothing has changed - } - else { + } else { // user has just turned this pref on this[prefName] = 1; numChanges++; } - } - else { // thisPref is not checked - cookie.preferences[prefName] = 0; + } else { // thisPref is not checked + preferences.preferences[prefName] = 0; if (this[prefName] === 1) { // user has just turned this pref off this[prefName] = 0; numChanges++; - } - else { + } else { // nothing has chaged } } @@ -2652,11 +2348,10 @@ var AblePlayerInstances = []; } } if (numChanges > 0) { - this.setCookie(cookie); - this.showAlert(this.tt.prefSuccess); - } - else { - this.showAlert(this.tt.prefNoChange); + this.setPrefs(preferences); + this.showAlert( this.translate( 'prefSuccess', 'Your changes have been saved.' ) ); + } else { + this.showAlert( this.translate( 'prefNoChange', "You didn't make any changes" ) ); } if (this.player === 'youtube' && (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) && @@ -2668,8 +2363,8 @@ var AblePlayerInstances = []; // there are multiple players on this page. // update prefs for ALL of them for (var i=0; i<AblePlayerInstances.length; i++) { - AblePlayerInstances[i].updatePrefs(); - AblePlayerInstances[i].geteferences(); + AblePlayerInstances[i].updatePlayerPrefs(); + AblePlayerInstances[i].loadCurrentPreferences(); AblePlayerInstances[i].resetPrefsForm(); if (numCapChanges > 0) { AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$captionsDiv); @@ -2679,10 +2374,9 @@ var AblePlayerInstances = []; } } } - } - else { + } else { // there is only one player - this.updatePrefs(); + this.updatePlayerPrefs(); if (numCapChanges > 0) { this.stylizeCaptions(this.$captionsDiv); // also apply same changes to descriptions, if present @@ -2693,16 +2387,14 @@ var AblePlayerInstances = []; } } - AblePlayer.prototype.updatePrefs = function () { + AblePlayer.prototype.updatePlayerPrefs = function () { // Update player based on current prefs. Safe to call multiple times. - - if (this.$transcriptDiv) { + if (this.$transcriptDiv) { // tabbable transcript if (this.prefTabbable === 1) { this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - else { + } else { this.$transcriptDiv.find('span.able-transcript-seekpoint').removeAttr('tabindex'); } @@ -2737,11 +2429,10 @@ var AblePlayerInstances = []; (function ($) { // See section 4.1 of dev.w3.org/html5/webvtt for format details. - AblePlayer.prototype.parseWebVTT = function(srcFile,text) { - -// var deferred = new $.Deferred(); -// var promise = deferred.promise(); + AblePlayer.prototype.parseWebVTT = function(data) { + let srcFile = data.src; + let text = data.text; // Normalize line ends to \n. text = text.replace(/(\r\n\|\n\|\r)/g,'\n'); @@ -2765,8 +2456,7 @@ var AblePlayerInstances = []; errString += err; if (console.warn) { - } - else if (console.log) { + } else if (console.log) { } } @@ -2795,8 +2485,7 @@ var AblePlayerInstances = []; if (cutText[ii] === '\n') { state.column = 1; state.line += 1; - } - else { + } else { state.column += 1; } } @@ -2816,8 +2505,7 @@ var AblePlayerInstances = []; returnText = state.text; updatePosition(state, returnText); state.text = ''; - } - else { + } else { returnText = state.text.substring(0, nextEOL); updatePosition(state, returnText + '\n'); state.text = state.text.substring(nextEOL + 1); @@ -2827,12 +2515,7 @@ var AblePlayerInstances = []; function peekLine(state) { var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - return state.text; - } - else { - return state.text.substring(0, nextEOL); - } + return (nextEOL === -1) ? state.text : state.text.substring(0, nextEOL); } function parseFileBody(state) { @@ -2846,8 +2529,7 @@ var AblePlayerInstances = []; parseMetadataHeaders, eatAtLeast1EmptyLines, parseCuesAndComments]); - } - else { + } else { state.error = "WEBVTT signature not followed by whitespace."; } } @@ -2858,11 +2540,9 @@ var AblePlayerInstances = []; var nextLine = peekLine(state); if (nextLine.indexOf('-->') !== -1) { return; - } - else if (nextLine.length === 0) { + } else if (nextLine.length === 0) { return; - } - else { + } else { var keyValue = act(state, getMetadataKeyValue); state.metadata[keyValue[0]] = keyValue[1]; act(state, eatUntilEOLInclusive); @@ -2895,8 +2575,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -2910,8 +2589,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -2924,14 +2602,11 @@ var AblePlayerInstances = []; // If NOTE is not on a line all its own, it must be followed by a space or tab. if (nextLine.indexOf('NOTE') === 0 && ((nextLine.length === 4) \|\| (nextLine[4] === ' ') \|\| (nextLine[4] === '\t'))) { actList(state, [eatComment, eatEmptyLines]); - } - else if ($.trim(nextLine).length === 0 && state.text.length > 0) { + } else if (nextLine.trim().length === 0 && state.text.length > 0) { act(state, eatEmptyLines); - } - else if ($.trim(nextLine).length > 0) { + } else if (nextLine.trim().length > 0) { act(state, parseCue); - } - else { + } else { // Everythings parsed! return; } @@ -2954,8 +2629,7 @@ var AblePlayerInstances = []; errString += 'Expected cue timing for cueId \''+cueId+'\' but found: ' + nextLine + '\n'; if (console.warn) { - } - else if (console.log) { + } else if (console.log) { } return; // Return leaving line for parseCuesAndComments to handle @@ -3024,8 +2698,7 @@ var AblePlayerInstances = []; // We'll use the tokens themselves as objects where possible. if (token.type === 'string') { current.children.push(token); - } - else if (token.type === 'startTag') { + } else if (token.type === 'startTag') { token.type = token.tagName; // Define token.parent; added by Terrill to fix bug end 'endTag' loop token.parent = current; @@ -3035,31 +2708,27 @@ var AblePlayerInstances = []; } current.children.push(token); current = token; - } - else if (token.tagName === 'rt' && current.tagName === 'ruby') { + } else if (token.tagName === 'rt' && current.tagName === 'ruby') { if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'c') { + } else if (token.tagName === 'c') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'v') { + } else if (token.tagName === 'v') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'lang') { + } else if (token.tagName === 'lang') { languageStack.push(token.annotation); if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; @@ -3067,22 +2736,18 @@ var AblePlayerInstances = []; current.children.push(token); current = token; } - } - else if (token.type === 'endTag') { + } else if (token.type === 'endTag') { if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) { // NOTE from Terrill: This was resulting in an error because current.parent was undefined // Fixed (I think) by assigning current token to token.parent in 'startTag' loop current = current.parent; - } - else if (token.tagName === 'lang' && current.type === 'lang') { + } else if (token.tagName === 'lang' && current.type === 'lang') { current = current.parent; languageStack.pop(); - } - else if (token.tagName === 'ruby' && current.type === 'rt') { + } else if (token.tagName === 'ruby' && current.type === 'rt') { current = current.parent.parent; } - } - else if (token.type === 'timestampTag') { + } else if (token.type === 'timestampTag') { var tempState = { text: token.value, error: null, @@ -3117,11 +2782,9 @@ var AblePlayerInstances = []; // Double newlines indicate end of token. if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { c = '\u0004'; - } - else if (state.text.length > 0) { + } else if (state.text.length > 0) { c = state.text[0]; - } - else { + } else { // End of file. c = '\u0004'; } @@ -3129,213 +2792,168 @@ var AblePlayerInstances = []; if (c === '&') { buffer = '&'; tokenState = 'escape'; - } - else if (c === '<') { + } else if (c === '<') { if (result.length === 0) { tokenState = 'tag'; - } - else { + } else { token.type = 'string'; token.value = result.join(''); return token; } - } - else if (c === '\u0004') { + } else if (c === '\u0004') { return {type: 'string', value: result.join('')}; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'escape') { + } else if (tokenState === 'escape') { if (c === '&') { result.push(buffer); buffer = '&'; - } - else if (c.match(/[0-9a-z]/)) { + } else if (c.match(/[0-9a-z]/)) { buffer += c; - } - else if (c === ';') { + } else if (c === ';') { if (buffer === '&') { result.push('&'); - } - else if (buffer === '<') { + } else if (buffer === '<') { result.push('<'); - } - else if (buffer === '>') { + } else if (buffer === '>') { result.push('>'); - } - else if (buffer === '&lrm') { + } else if (buffer === '&lrm') { result.push('\u200e'); - } - else if (buffer === '&rlm') { + } else if (buffer === '&rlm') { result.push('\u200f'); - } - else if (buffer === ' ') { + } else if (buffer === ' ') { result.push('\u00a0'); - } - else { + } else { result.push(buffer); result.push(';'); } tokenState = 'data'; - } - else if (c === '<' \|\| c === '\u0004') { + } else if (c === '<' \|\| c === '\u0004') { result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { // Handle unescaped & chars as strings + } else if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { // Handle unescaped & chars as strings result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else { + } else { result.push(buffer); tokenState = 'data'; } - } - else if (tokenState === 'tag') { + } else if (tokenState === 'tag') { if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '/') { + } else if (c === '/') { tokenState = 'endTag'; - } - else if (c.match('[0-9]')) { + } else if (c.match('[0-9]')) { tokenState = 'timestampTag'; result.push(c); - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); break; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = ''; token.type = 'startTag'; return token; - } - else { + } else { result.push(c); tokenState = 'startTag'; } - } - else if (tokenState === 'startTag') { + } else if (tokenState === 'startTag') { if (c === '\t' \|\| c === '\u000c' \|\| c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'startTagClass') { + } else if (tokenState === 'startTagClass') { if (c === '\t' \|\| c === '\u000c' \|\| c === ' ') { token.classes.push(buffer); buffer = ''; tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { token.classes.push(buffer); buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { token.classes.push(buffer); buffer = ""; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else { + } else { buffer += 'c'; } - } - else if (tokenState === 'startTagAnnotation') { + } else if (tokenState === 'startTagAnnotation') { if (c === '>') { cut(state, 1); - buffer = $.trim(buffer).replace(/ +/, ' '); + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else if (c === '\u0004') { - buffer = $.trim(buffer).replace(/ +/, ' '); + } else if (c === '\u0004') { + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else { + } else { buffer += c; } - } - else if (tokenState === 'endTag') { + } else if (tokenState === 'endTag') { if (c === '>') { cut(state, 1); token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'timestampTag') { + } else if (tokenState === 'timestampTag') { if (c === '>') { cut(state, 1); token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else { + } else { throw 'Unknown tokenState ' + tokenState; } @@ -3352,15 +2970,13 @@ var AblePlayerInstances = []; } while (true) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { // End of comment. return; - } - else if (nextLine.indexOf('-->') !== -1) { + } else if (nextLine.indexOf('-->') !== -1) { state.error = 'Invalid syntax: --> in comment.'; return; - } - else { + } else { cutLine(state); } } @@ -3378,8 +2994,7 @@ var AblePlayerInstances = []; function eatSignature(state) { if (state.text.substring(0,6) === 'WEBVTT') { cut(state, 6); - } - else { + } else { state.error = 'Invalid signature.'; } } @@ -3387,8 +3002,7 @@ var AblePlayerInstances = []; function eatArrow(state) { if (state.text.length < 3 \|\| state.text.substring(0,3) !== '-->') { state.error = 'Missing -->'; - } - else { + } else { cut(state, 3); } } @@ -3396,8 +3010,7 @@ var AblePlayerInstances = []; function eatSingleSpaceOrTab(state) { if (state.text[0] === '\t' \|\| state.text[0] === ' ') { cut(state, 1); - } - else { + } else { state.error = 'Missing space.'; } } @@ -3423,8 +3036,7 @@ var AblePlayerInstances = []; var nextEOL = state.text.indexOf('\n'); if (nextEOL === -1) { state.error = 'Missing EOL.'; - } - else { + } else { cut(state, nextEOL + 1); } } @@ -3432,10 +3044,9 @@ var AblePlayerInstances = []; function eatEmptyLines(state) { while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); - } - else { + } else { break; } } @@ -3446,11 +3057,10 @@ var AblePlayerInstances = []; var linesEaten = 0; while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); linesEaten += 1; - } - else { + } else { break; } } @@ -3467,7 +3077,9 @@ var AblePlayerInstances = []; } var timestamp = cut(state, nextSpace); - var results = /((\d\d):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(timestamp); + // The spec requires exactly 2 characters for minutes and seconds, and 2+ for hours, + // but some VTT generation creates 1 digit hour times (e.g. "1:02:24.000 --> 1:04:48.000") and it seems harmless to allow that here + var results = /((\d+):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(timestamp); if (!results) { state.error = 'Unable to parse timestamp'; @@ -3494,8 +3106,7 @@ var AblePlayerInstances = []; time += parseInt(seconds, 10); time += parseInt(results[6], 10) / 1000; - } - else { + } else { time += parseInt(results[7], 10); time += parseInt(results[8], 10) / 1000; } @@ -3509,23 +3120,13 @@ var AblePlayerInstances = []; AblePlayer.prototype.injectPlayerCode = function() { // create and inject surrounding HTML structure - // If IOS: - // If video: - // IOS does not support any of the player's functionality - // - everything plays in its own player - // Therefore, AblePlayer is not loaded & all functionality is disabled - // (this all determined. If this is IOS && video, this function is never called) - // If audio: - // HTML cannot be injected as a parent of the <audio> element - // It is therefore injected after the <audio> element - // This is only a problem in IOS 6 and earlier, - // & is a known bug, fixed in IOS 7 - - var thisObj, captionsContainer, prefsGroups, i; - thisObj = this; + // If iOS & video: + // iOS does not support any of the player's functionality - everything plays in its own player + // Therefore, AblePlayer is not loaded & all functionality is disabled + // (this all determined. If this is iOS && video, this function is never called) - // create three wrappers and wrap them around the media element. - // From inner to outer: + var captionsContainer; + // Wrappers, from inner to outer: // $mediaContainer - contains the original media element // $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions) // $ableWrapper - contains additional widgets (e.g., transcript window, sign window) @@ -3533,10 +3134,6 @@ var AblePlayerInstances = []; this.$ableDiv = this.$mediaContainer.wrap('<div class="able"></div>').parent(); this.$ableWrapper = this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(); this.$ableWrapper.addClass('able-skin-' + this.skin); - - this.$ableWrapper.css({ - 'width': this.playerWidth + 'px' - }); if (this.mediaType === 'video') { // youtube adds its own big play button @@ -3549,26 +3146,37 @@ var AblePlayerInstances = []; // add container that captions or description will be appended to // Note: new Jquery object must be assigned _after_ wrap, hence the temp captionsContainer variable - captionsContainer = $('<div>'); - if (this.mediaType === 'video') { - captionsContainer.addClass('able-vidcap-container'); - } - else if (this.mediaType === 'audio') { - captionsContainer.addClass('able-audcap-container'); - // hide this by default. It will be shown if captions are available + captionsContainer = $('<div>'); + if (this.mediaType === 'video') { + captionsContainer.addClass('able-vidcap-container'); + } else if (this.mediaType === 'audio') { + captionsContainer.addClass('able-audcap-container'); + // hide this by default. It will be shown if captions are available captionsContainer.addClass('captions-off'); } - this.injectPlayerControlArea(); // this may need to be injected after captions??? + this.injectPlayerControlArea(); // this may need to be injected after captions??? this.$captionsContainer = this.$mediaContainer.wrap(captionsContainer).parent(); - this.injectAlert(); + this.injectAlert(this.$ableDiv); this.injectPlaylist(); - + this.injectAudioPoster(); // Do this last, as it should be prepended to the top of this.$ableDiv // after everything else has prepended this.injectOffscreenHeading(); }; + AblePlayer.prototype.injectAudioPoster = function() { + if ( this.mediaType === 'audio' && this.hasPoster ) { + audioPoster = DOMPurify.sanitize(this.audioPoster); + audioPosterAlt = DOMPurify.sanitize(this.audioPosterAlt); + let audioPosterImg = document.createElement( 'img' ); + audioPosterImg.setAttribute( 'src', audioPoster ); + audioPosterImg.setAttribute( 'alt', audioPosterAlt ); + this.$audioWrapper = this.$playerDiv.wrap( '<div class="able-audio-wrapper">' ).parent(); + this.$audioWrapper.prepend( audioPosterImg ); + } + } + AblePlayer.prototype.injectOffscreenHeading = function () { // Inject an offscreen heading to the media container. @@ -3578,8 +3186,7 @@ var AblePlayerInstances = []; var headingType; if (this.playerHeadingLevel == '0') { // do NOT inject a heading (at author's request) - } - else { + } else { if (typeof this.playerHeadingLevel === 'undefined') { this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); // returns in integer 1-6 } @@ -3587,51 +3194,28 @@ var AblePlayerInstances = []; this.$headingDiv = $('<' + headingType + '>'); this.$ableDiv.prepend(this.$headingDiv); this.$headingDiv.addClass('able-offscreen'); - this.$headingDiv.text(this.tt.playerHeading); + this.$headingDiv.text( this.translate( 'playerHeading', 'Media player' ) ); } }; AblePlayer.prototype.injectBigPlayButton = function () { - var thisObj, svgData, buttonIcon, svgPath; - - thisObj = this; + var thisObj = this; this.$bigPlayButton = $('<button>', { 'class': 'able-big-play-button', 'aria-hidden': false, - 'aria-label': this.tt.play, + 'aria-label': this.translate( 'play', 'Play' ), + 'type': 'button', 'tabindex': 0 }); - if (this.iconType == 'svg') { - svgData = this.getSvgData('play'); - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - this.$bigPlayButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - this.$bigPlayButton.html(this.$bigPlayButton.html()); - } - else { // use icon font - this.$bigPlayIcon = $('<span>', { - 'class': 'icon-play', - }); - this.$bigPlayButton.append(this.$bigPlayIcon); - } + this.getIcon( this.$bigPlayButton, 'play' ); - this.$bigPlayButton.click(function (event) { - event.preventDefault(); + this.$bigPlayButton.on( 'click', function () { thisObj.handlePlay(); }); - + this.$mediaContainer.append(this.$bigPlayButton); }; @@ -3640,10 +3224,10 @@ var AblePlayerInstances = []; this.$playerDiv = $('<div>', { 'class' : 'able-player', 'role' : 'region', - 'aria-label' : this.mediaType + ' player' + 'aria-label' : ( 'audio' === this.mediaType ) ? this.translate( 'audioPlayer', 'audio player' ) : this.translate( 'videoPlayer', 'video player' ) }); - this.$playerDiv.addClass('able-'+this.mediaType); - if (this.hasPlaylist && this.showNowPlaying) { + this.$playerDiv.addClass('able-' + this.mediaType); + if (this.hasPlaylist && this.showNowPlaying) { this.$nowPlayingDiv = $('<div>',{ 'class' : 'able-now-playing', 'aria-live' : 'assertive', @@ -3672,8 +3256,9 @@ var AblePlayerInstances = []; this.$speed = $('<span>',{ 'class' : 'able-speed', - 'aria-live' : 'assertive' - }).text(this.tt.speed + ': 1x'); + 'aria-live' : 'assertive', + 'aria-atomic' : 'true' + }).text(this.translate( 'speed', 'Speed' ) + ': 1x'); this.$status = $('<span>',{ 'class' : 'able-status', @@ -3684,16 +3269,15 @@ var AblePlayerInstances = []; this.$statusBarDiv.append(this.$timer, this.$speed, this.$status); if (this.showNowPlaying) { this.$playerDiv.append(this.$nowPlayingDiv, this.$controllerDiv, this.$statusBarDiv); - } - else { + } else { this.$playerDiv.append(this.$controllerDiv, this.$statusBarDiv); } - if (this.mediaType === 'video') { - // the player controls go after the media & captions + + if (this.mediaType === 'video') { + // the player controls go after the media & captions this.$ableDiv.append(this.$playerDiv); - } - else { - // the player controls go before the media & captions + } else { + // the player controls go before the media & captions this.$ableDiv.prepend(this.$playerDiv); } }; @@ -3705,9 +3289,9 @@ var AblePlayerInstances = []; 'class': 'able-descriptions' }); // Add ARIA so description will be announced by screen readers - // Later (in description.js > showDescription()), + // Later (in description.js > showDescription()), // if browser supports Web Speech API and this.descMethod === 'browser' - // these attributes will be removed + // these attributes will be removed this.$descDiv.attr({ 'aria-live': 'assertive', 'aria-atomic': 'true' @@ -3719,54 +3303,114 @@ var AblePlayerInstances = []; }; AblePlayer.prototype.getDefaultWidth = function(which) { - + let viewportMaxwidth = window.innerWidth; // return default width of resizable elements // these values are somewhat arbitrary, but seem to result in good usability // if users disagree, they can resize (and resposition) them if (which === 'transcript') { - return 450; - } - else if (which === 'sign') { - return 400; + return ( viewportMaxwidth <= 450 ) ? viewportMaxwidth : 450; + } else if (which === 'sign') { + return ( viewportMaxwidth <= 400 ) ? viewportMaxwidth : 400; } }; + /** + * Reposition draggable windows when switched into fullscreen. + * + * @param {string} which 'transcript' or 'sign'. + / + AblePlayer.prototype.rePositionDraggableWindow = function (which) { + + let preferences, $window; + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + + if ( which === 'transcript' && $window ) { + if (typeof preferences.transcript !== 'undefined') { + this.prevTranscriptPosition = preferences.transcript; + } + $window.css({ + 'top': 0, + 'left': 0 + }); + } else if ( 'sign' === which && $window ) { + if (typeof preferences.sign !== 'undefined') { + this.prevSignPosition = preferences.sign; + } + $window.css({ + 'top': 0, + 'right': 0, + 'left': 'auto' + }); + } + } + AblePlayer.prototype.positionDraggableWindow = function (which, width) { // which is either 'transcript' or 'sign' + var preferences, preferencePos, $window, windowPos, viewportWidth, windowWidth; - var cookie, cookiePos, $window, dragged, windowPos, currentWindowPos, firstTime, zIndex; - - cookie = this.getCookie(); + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + if ( ! $window ) { + return; + } if (which === 'transcript') { - $window = this.$transcriptArea; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.transcript; + if (typeof preferences.transcript !== 'undefined') { + preferencePos = preferences.transcript; } - } - else if (which === 'sign') { - $window = this.$signWindow; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.sign; + if ( this.prevTranscriptPosition ) { + preferencePos = this.prevTranscriptPosition; + this.prevTranscriptPosition = false; + } + } else if (which === 'sign') { + if (typeof preferences.sign !== 'undefined') { + preferencePos = preferences.sign; + } + if ( this.prevSignPosition ) { + preferencePos = this.prevSignPosition; + this.prevSignPosition = false; } } - if (typeof cookiePos !== 'undefined' && !($.isEmptyObject(cookiePos))) { - // position window using stored values from cookie + if (typeof preferencePos !== 'undefined' && !($.isEmptyObject(preferencePos))) { + // position window using stored values from preferences $window.css({ - 'position': cookiePos['position'], - 'width': cookiePos['width'], - 'z-index': cookiePos['zindex'] + 'position': preferencePos['position'], + 'width': preferencePos['width'], + 'z-index': preferencePos['zindex'] }); - if (cookiePos['position'] === 'absolute') { + if (preferencePos['position'] === 'absolute') { $window.css({ - 'top': cookiePos['top'], - 'left': cookiePos['left'] + 'top': preferencePos['top'], + 'left': preferencePos['left'] }); + // Check whether the window is above the top of the viewport. + topPosition = $window.offset().top; + leftPosition = $window.offset().left; + viewportWidth = window.innerWidth; + windowWidth = $window.width(); + if ( topPosition < 0 ) { + $window.css({ + 'top': preferencePos['top'] - topPosition + }); + } + // If draggable window is off screen to the left. + if ( leftPosition < 0 && ! this.restoringAfterFullscreen ) { + + $window.css({ + 'left': preferencePos['left'] - leftPosition + }); + } + // If draggable window is off screen to the right. + if ( viewportWidth - leftPosition < 30 ) { + $window.css({ + 'left': viewportWidth - windowWidth + }); + } } - // since cookie is not page-specific, z-index needs may vary across different pages + // since preferences are not page-specific, z-index needs may vary across different pages this.updateZIndex(which); - } - else { + } else { // position window using default values windowPos = this.getOptimumPosition(which, width); if (typeof width === 'undefined') { @@ -3798,37 +3442,30 @@ var AblePlayerInstances = []; // else if there is room the left of the player, position element there // else position element beneath player - var gap, position, ableWidth, ableHeight, ableOffset, ableTop, ableLeft, - windowWidth, otherWindowWidth, zIndex; + var gap, position, ableWidth, ableOffset, ableLeft, windowWidth, otherWindowWidth; if (typeof targetWidth === 'undefined') { targetWidth = this.getDefaultWidth(targetWindow); } gap = 5; // number of pixels to preserve between Able Player objects - position = []; // position, top, left ableWidth = this.$ableDiv.width(); - ableHeight = this.$ableDiv.height(); ableOffset = this.$ableDiv.offset(); - ableTop = ableOffset.top; ableLeft = ableOffset.left; windowWidth = $(window).width(); otherWindowWidth = 0; // width of other visiable draggable windows will be added to this if (targetWindow === 'transcript') { - if (typeof this.$signWindow !== 'undefined') { - if (this.$signWindow.is(':visible')) { - otherWindowWidth = this.$signWindow.width() + gap; - } + // If placing the transcript window, check position of sign window first. + if (typeof this.$signWindow !== 'undefined' && (this.$signWindow.is(':visible'))) { + otherWindowWidth = this.$signWindow.width() + gap; } - } - else if (targetWindow === 'sign') { - if (typeof this.$transcriptArea !== 'undefined') { - if (this.$transcriptArea.is(':visible')) { - otherWindowWidth = this.$transcriptArea.width() + gap; - } + } else if (targetWindow === 'sign') { + // If placing the sign window, check position of transcript window first. + if (typeof this.$transcriptArea !== 'undefined' && (this.$transcriptArea.is(':visible'))) { + otherWindowWidth = this.$transcriptArea.width() + gap; } } if (targetWidth < (windowWidth - (ableLeft + ableWidth + gap + otherWindowWidth))) { @@ -3836,14 +3473,12 @@ var AblePlayerInstances = []; position[0] = 'absolute'; position[1] = 0; position[2] = ableWidth + otherWindowWidth + gap; - } - else if (targetWidth + gap < ableLeft) { + } else if (targetWidth + gap < ableLeft) { // there's room to the right of $ableDiv position[0] = 'absolute'; position[1] = 0; position[2] = ableLeft - targetWidth - gap; - } - else { + } else { // position element below $ableDiv position[0] = 'relative'; // no need to define top, left, or z-index @@ -3851,32 +3486,31 @@ var AblePlayerInstances = []; return position; }; - AblePlayer.prototype.injectAlert = function () { - + AblePlayer.prototype.injectAlert = function ($container) { // inject two alerts, one visible for all users and one for screen reader users only - - var top; - this.$alertBox = $('<div role="alert"></div>'); this.$alertBox.addClass('able-alert'); this.$alertBox.hide(); - this.$alertBox.appendTo(this.$ableDiv); - if (this.mediaType == 'audio') { - top = '-10'; - } - else { - // position just below top of video by default - // but this will change after video player is fully sized - // see control.js > resizePlayer() - top = '10'; - } - this.$alertBox.css({ - top: top + 'px' + + var $alertText = $( '<span></span>' ); + $alertText.appendTo(this.$alertBox); + + var $alertDismiss = $('<button type="button"></button>' ); + $alertDismiss.attr( 'aria-label', this.translate( 'dismissButton', 'Dismiss' ) ); + $alertDismiss.text( '×' ); + $alertDismiss.appendTo(this.$alertBox); + + $alertDismiss.on( 'click', function(e) { + $(this).parent('div').hide(); }); - this.$srAlertBox = $('<div role="alert"></div>'); - this.$srAlertBox.addClass('able-screenreader-alert'); - this.$srAlertBox.appendTo(this.$ableDiv); + this.$alertBox.appendTo($container); + + if ( ! this.$srAlertBox ) { + this.$srAlertBox = $('<div role="alert"></div>'); + this.$srAlertBox.addClass('able-screenreader-alert'); + this.$srAlertBox.appendTo($container); + } }; AblePlayer.prototype.injectPlaylist = function () { @@ -3896,9 +3530,8 @@ var AblePlayerInstances = []; // 'which' parameter is either 'captions', 'chapters', 'prefs', 'transcript-window' or 'sign-window' // 'tracks', if provided, is a list of tracks to be used as menu items - var thisObj, $menu, includeMenuItem, prefCats, i, $menuItem, prefCat, whichPref, - hasDefault, track, windowOptions, whichPref, whichMenu, - $thisItem, $prevItem, $nextItem; + var thisObj, $menu, includeMenuItem, i, $menuItem, prefCat, whichPref, hasDefault, track, + windowOptions, $thisItem, $prevItem, $nextItem, hasDescription, hasTranscript; thisObj = this; @@ -3916,22 +3549,26 @@ var AblePlayerInstances = []; if (which === 'prefs') { if (this.prefCats.length > 1) { for (i = 0; i < this.prefCats.length; i++) { + prefCat = this.prefCats[i]; + hasDescription = ( thisObj.hasDescTracks \|\| thisObj.hasOpenDesc \|\| thisObj.hasClosedDesc ) ? true : false; + hasTranscript = ( thisObj.transcriptType === null ) ? false : true; + + // If this player does not have descriptions or transcripts, do not output that option preferences. + if ( prefCat === 'descriptions' && ! hasDescription \|\| prefCat === 'transcript' && ! hasTranscript ) { + continue; + } $menuItem = $('<li></li>',{ 'role': 'menuitem', 'tabindex': '-1' }); - prefCat = this.prefCats[i]; if (prefCat === 'captions') { - $menuItem.text(this.tt.prefMenuCaptions); - } - else if (prefCat === 'descriptions') { - $menuItem.text(this.tt.prefMenuDescriptions); - } - else if (prefCat === 'keyboard') { - $menuItem.text(this.tt.prefMenuKeyboard); - } - else if (prefCat === 'transcript') { - $menuItem.text(this.tt.prefMenuTranscript); + $menuItem.text( this.translate( 'prefMenuCaptions', 'Captions' ) ); + } else if (prefCat === 'descriptions') { + $menuItem.text( this.translate( 'prefMenuDescriptions', 'Descriptions' ) ); + } else if (prefCat === 'keyboard') { + $menuItem.text( this.translate( 'prefMenuKeyboard', 'Keyboard' ) ); + } else if (prefCat === 'transcript') { + $menuItem.text( this.translate( 'prefMenuTranscript', 'Transcript' ) ); } $menuItem.on('click',function() { whichPref = $(this).text(); @@ -3939,14 +3576,11 @@ var AblePlayerInstances = []; thisObj.setFullscreen(false); if (whichPref === thisObj.tt.prefMenuCaptions) { thisObj.captionPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuDescriptions) { + } else if (whichPref === thisObj.tt.prefMenuDescriptions) { thisObj.descPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuKeyboard) { + } else if (whichPref === thisObj.tt.prefMenuKeyboard) { thisObj.keyboardPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuTranscript) { + } else if (whichPref === thisObj.tt.prefMenuTranscript) { thisObj.transcriptPrefsDialog.show(); } thisObj.closePopups(); @@ -3955,22 +3589,19 @@ var AblePlayerInstances = []; $menu.append($menuItem); } this.$prefsButton.attr('data-prefs-popup','menu'); - } - else if (this.prefCats.length == 1) { + } else if (this.prefCats.length == 1) { // only 1 category, so don't create a popup menu. // Instead, open dialog directly when user clicks Prefs button this.$prefsButton.attr('data-prefs-popup',this.prefCats[0]); } - } - else if (which === 'captions' \|\| which === 'chapters') { + } else if (which === 'captions' \|\| which === 'chapters') { hasDefault = false; for (i = 0; i < tracks.length; i++) { track = tracks[i]; - if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { - includeMenuItem = false; - } - else { - includeMenuItem = true; + if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { + includeMenuItem = false; + } else { + includeMenuItem = true; } if (includeMenuItem) { $menuItem = $('<li></li>',{ @@ -3981,16 +3612,14 @@ var AblePlayerInstances = []; if (track.def && this.prefCaptions == 1) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); - } + } // Get a label using track data if (which == 'captions') { $menuItem.text(track.label); $menuItem.on('click',this.getCaptionClickFunction(track)); - } - else if (which == 'chapters') { + } else if (which == 'chapters') { $menuItem.text(this.flattenCueForCaption(track) + ' - ' + this.formatSecondsAsColonTime(track.start)); $menuItem.on('click',this.getChapterClickFunction(track.start)); } @@ -4002,31 +3631,29 @@ var AblePlayerInstances = []; $menuItem = $('<li></li>',{ 'role': 'menuitemradio', 'tabindex': '-1', - }).text(this.tt.captionsOff); + }).text( this.translate( 'captionsOff', 'Captions off' ) ); if (this.prefCaptions === 0) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); } $menuItem.on('click',this.getCaptionOffFunction()); $menu.append($menuItem); } - } - else if (which === 'transcript-window' \|\| which === 'sign-window') { + } else if (which === 'transcript-window' \|\| which === 'sign-window') { windowOptions = []; windowOptions.push({ 'name': 'move', - 'label': this.tt.windowMove + 'label': this.translate( 'windowMove', 'Move' ) }); windowOptions.push({ 'name': 'resize', - 'label': this.tt.windowResize + 'label': this.translate( 'windowResize', 'Resize' ) }); windowOptions.push({ 'name': 'close', - 'label': this.tt.windowClose + 'label': this.translate( 'windowClose', 'Close' ) }); for (i = 0; i < windowOptions.length; i++) { $menuItem = $('<li></li>',{ @@ -4035,7 +3662,7 @@ var AblePlayerInstances = []; 'data-choice': windowOptions[i].name }); $menuItem.text(windowOptions[i].label); - $menuItem.on('click mousedown',function(e) { + $menuItem.on('click',function(e) { e.stopPropagation(); if (typeof e.button !== 'undefined' && e.button !== 0) { // this was a mouse click (if click is triggered by keyboard, e.button is undefined) @@ -4058,61 +3685,50 @@ var AblePlayerInstances = []; if ($menu.find('li[lang=' + this.captionLang + ']')) { // a track exists for the default language. Check that item in the menu $menu.find('li[lang=' + this.captionLang + ']').attr('aria-checked','true'); - } - else { + } else { // check the last item (captions off) $menu.find('li').last().attr('aria-checked','true'); } - } - else if (which === 'chapters') { + } else if (which === 'chapters') { if ($menu.find('li:contains("' + this.defaultChapter + '")')) { $menu.find('li:contains("' + this.defaultChapter + '")').attr('aria-checked','true').addClass('able-focus'); - } - else { + } else { $menu.find('li').first().attr('aria-checked','true').addClass('able-focus'); } } // add keyboard handlers for navigating within popups $menu.on('keydown',function (e) { - - whichMenu = $(this).attr('id').split('-')[1]; + $thisItem = $(this).find('li:focus'); if ($thisItem.is(':first-child')) { // this is the first item in the menu $prevItem = $(this).find('li').last(); // wrap to bottom $nextItem = $thisItem.next(); - } - else if ($thisItem.is(':last-child')) { + } else if ($thisItem.is(':last-child')) { // this is the last Item $prevItem = $thisItem.prev(); $nextItem = $(this).find('li').first(); // wrap to top - } - else { + } else { $prevItem = $thisItem.prev(); $nextItem = $thisItem.next(); } - if (e.which === 9) { // Tab + if (e.key === 'Tab') { if (e.shiftKey) { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else { + $prevItem.trigger('focus').addClass('able-focus'); + } else { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); + $nextItem.trigger('focus').addClass('able-focus'); } - } - else if (e.which === 40 \|\| e.which === 39) { // down or right arrow + } else if (e.key === 'ArrowDown' \|\| e.key === 'ArrowRight') { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - else if (e.which == 38 \|\| e.which === 37) { // up or left arrow + $nextItem.trigger('focus').addClass('able-focus'); + } else if (e.key == 'ArrowUp' \|\| e.key === 'ArrowLeft') { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else if (e.which === 32 \|\| e.which === 13) { // space or enter - $thisItem.click(); - } - else if (e.which === 27) { // Escape + $prevItem.trigger('focus').addClass('able-focus'); + } else if (e.key === ' ' \|\| e.key === 'Enter') { + $thisItem.trigger( 'click' ); + } else if (e.key === 'Escape') { $thisItem.removeClass('able-focus'); thisObj.closePopups(); e.stopPropagation; @@ -4129,7 +3745,7 @@ var AblePlayerInstances = []; if (this.chaptersPopup && this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); - this.$chaptersButton.attr('aria-expanded','false').focus(); + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); } if (this.captionsPopup && this.captionsPopup.is(':visible')) { this.captionsPopup.hide(); @@ -4151,15 +3767,15 @@ var AblePlayerInstances = []; },100); } if (this.$volumeSlider && this.$volumeSlider.is(':visible')) { - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeButton.attr('aria-expanded', 'false').focus(); + this.$volumeSlider.hide().attr('aria-hidden','true'); + this.$volumeButton.attr('aria-expanded', 'false').trigger('focus'); } if (this.$transcriptPopup && this.$transcriptPopup.is(':visible')) { - this.hidingPopup = true; + this.hidingPopup = true; this.$transcriptPopup.hide(); // restore menu items to their original state this.$transcriptPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$transcriptPopupButton.attr('aria-expanded','false').focus(); + this.$transcriptPopupButton.attr('aria-expanded','false').trigger('focus'); // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; @@ -4169,7 +3785,7 @@ var AblePlayerInstances = []; this.$signPopup.hide(); // restore menu items to their original state this.$signPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$signPopupButton.attr('aria-expanded','false').focus(); + this.$signPopupButton.attr('aria-expanded','false').trigger('focus'); } }; @@ -4179,10 +3795,7 @@ var AblePlayerInstances = []; // parameter 'which' is passed if refreshing content of an existing popup ('captions' or 'chapters') // If which is undefined, automatically setup 'captions', 'chapters', and 'prefs' popups // However, only setup 'transcript-window' and 'sign-window' popups if passed as value of which - var popups, thisObj, hasDefault, i, j, - tracks, track, $trackButton, $trackLabel, - radioName, radioId, $menu, $menuItem, - prefCats, prefCat, prefLabel; + var popups, thisObj, i, tracks; popups = []; if (typeof which === 'undefined') { @@ -4209,33 +3822,26 @@ var AblePlayerInstances = []; thisObj = this; for (var i=0; i<popups.length; i++) { var popup = popups[i]; - hasDefault = false; if (popup == 'prefs') { this.prefsPopup = this.createPopup('prefs'); - } - else if (popup == 'captions') { + } else if (popup == 'captions') { if (typeof this.captionsPopup === 'undefined' \|\| !this.captionsPopup) { this.captionsPopup = this.createPopup('captions',this.captions); } - } - else if (popup == 'chapters') { + } else if (popup == 'chapters') { if (this.selectedChapters) { tracks = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { tracks = this.chapters[0].cues; - } - else { + } else { tracks = []; } if (typeof this.chaptersPopup === 'undefined' \|\| !this.chaptersPopup) { this.chaptersPopup = this.createPopup('chapters',tracks); } - } - else if (popup == 'transcript-window') { + } else if (popup == 'transcript-window') { return this.createPopup('transcript-window'); - } - else if (popup == 'sign-window') { + } else if (popup == 'sign-window') { return this.createPopup('sign-window'); } } @@ -4244,101 +3850,99 @@ var AblePlayerInstances = []; AblePlayer.prototype.provideFallback = function() { - // provide fallback in case of a critical error building the player - // to test, set data-test-fallback to either of the following values: - // 1 = emulate failure to build Able Player - // 2 = emulate browser that doesn't support HTML5 media + // provide fallback in case of a critical error building the player + // to test, set data-test-fallback to either of the following values: + // 1 = emulate failure to build Able Player + // 2 = emulate browser that doesn't support HTML5 media var i, $fallback; - if (this.usingFallback) { - // fallback has already been implemented. + if (this.usingFallback) { + // fallback has already been implemented. // stopgap to prevent this function from executing twice on the same media element - return; - } - else { - this.usingFallback = true; + return; + } else { + this.usingFallback = true; } - if (!this.testFallback) { - // this is not a test. - // an actual error has resulted in this function being called. - // use scenario 1 - this.testFallback = 1; + if (!this.testFallback) { + // this is not a test. + // an actual error has resulted in this function being called. + // use scenario 1 + this.testFallback = 1; } - if (typeof this.$media === 'undefined') { - // this function has been called prior to initialize.js > reinitialize() + if (typeof this.$media === 'undefined') { + // this function has been called prior to initialize.js > reinitialize() // before doing anything, need to create the jQuery media object - this.$media = $(this.media); - } - - // get/assign an id for the media element - if (this.$media.attr('id')) { - this.mediaId = this.$media.attr('id'); + this.$media = $(this.media); } - else { + + // get/assign an id for the media element + if (this.$media.attr('id')) { + this.mediaId = this.$media.attr('id'); + } else { this.mediaId = 'media' + Math.floor(Math.random() 1000000000).toString(); - } - - // check whether element has nested fallback content - this.hasFallback = false; - if (this.$media.children().length) { - i = 0; - while (i < this.$media.children().length && !this.hasFallback) { - if (!(this.$media.children()[i].tagName === 'SOURCE' \|\| - this.$media.children()[i].tagName === 'TRACK')) { - // this element is something other than <source> or <track> - this.hasFallback = true; + } + + // check whether element has nested fallback content + this.hasFallback = false; + if (this.$media.children().length) { + i = 0; + while (i < this.$media.children().length && !this.hasFallback) { + if (!(this.$media.children()[i].tagName === 'SOURCE' \|\| + this.$media.children()[i].tagName === 'TRACK')) { + // this element is something other than <source> or <track> + this.hasFallback = true; } - i++; + i++; } } - if (!this.hasFallback) { - // the HTML code does not include any nested fallback content - // inject our own - // NOTE: this message is not translated, since fallback may be needed - // due to an error loading the translation file - // This will only be needed on very rare occasions, so English is ok. - $fallback = $('<p>').text('Media player unavailable.'); - this.$media.append($fallback); + if (!this.hasFallback) { + // the HTML code does not include any nested fallback content + // inject our own + // NOTE: this message is not translated, since fallback may be needed + // due to an error loading the translation file + // This will only be needed on very rare occasions, so English is ok. + $fallback = $('<p>').text('Media player unavailable.'); + this.$media.append($fallback); } - // get height and width attributes, if present + // get height and width attributes, if present // and add them to a style attribute - if (this.$media.attr('width')) { - this.$media.css('width',this.$media.attr('width') + 'px'); + if (this.$media.attr('width')) { + this.$media.css('width',this.$media.attr('width') + 'px'); } - if (this.$media.attr('height')) { - this.$media.css('height',this.$media.attr('height') + 'px'); + if (this.$media.attr('height')) { + this.$media.css('height',this.$media.attr('height') + 'px'); } - // Remove data-able-player attribute - this.$media.removeAttr('data-able-player'); + // Remove data-able-player attribute + this.$media.removeAttr('data-able-player'); // Add controls attribute (so browser will add its own controls) - this.$media.prop('controls',true); + this.$media.prop('controls',true); - if (this.testFallback == 2) { + if (this.testFallback == 2) { - // emulate browser failure to support HTML5 media by changing the media tag name - // browsers should display the supported content that's nested inside + // emulate browser failure to support HTML5 media by changing the media tag name + // browsers should display the supported content that's nested inside $(this.$media).replaceWith($('<foobar id="foobar-' + this.mediaId + '">')); - this.$newFallbackElement = $('#foobar-' + this.mediaId); - - // append all children from the original media - if (this.$media.children().length) { - i = this.$media.children().length - 1; - while (i >= 0) { - this.$newFallbackElement.prepend($(this.$media.children()[i])); - i--; + this.$newFallbackElement = $('#foobar-' + this.mediaId); + + // append all children from the original media + if (this.$media.children().length) { + i = this.$media.children().length - 1; + while (i >= 0) { + this.$newFallbackElement.prepend($(this.$media.children()[i])); + i--; } } - if (!this.hasFallback) { + if (!this.hasFallback) { // inject our own fallback content, defined above this.$newFallbackElement.append($fallback); } } - return; + return; }; AblePlayer.prototype.calculateControlLayout = function () { @@ -4352,7 +3956,7 @@ var AblePlayerInstances = []; // 3 = Bottom right (legacy skin only) // Each key contains an array of control names to put in that section. - var controlLayout, volumeSupported, playbackSupported, totalButtonWidth, numA11yButtons; + var controlLayout, playbackSupported, numA11yButtons; controlLayout = []; controlLayout[0] = []; @@ -4375,8 +3979,7 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[0].push('previous'); controlLayout[0].push('next'); - } - else if (this.skin == '2020') { + } else { controlLayout[0].push('previous'); controlLayout[0].push('next'); } @@ -4388,8 +3991,7 @@ var AblePlayerInstances = []; controlLayout[2].push('slower'); controlLayout[2].push('faster'); } - } - else { + } else { playbackSupported = false; } @@ -4398,8 +4000,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('captions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('captions'); } } @@ -4407,28 +4008,25 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('sign'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('sign'); } } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { if (this.hasOpenDesc \|\| this.hasClosedDesc) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('descriptions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('descriptions'); } } } - if (this.transcriptType === 'popup' && !(this.hideTranscriptButton)) { + if (this.transcriptType !== null && !(this.hideTranscriptButton)) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('transcript'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('transcript'); } } @@ -4436,8 +4034,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('chapters'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('chapters'); } } @@ -4454,32 +4051,26 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[3].push('preferences'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('preferences'); } - if (this.mediaType === 'video' && this.allowFullscreen) { + if (this.mediaType === 'video' && this.allowFullscreen && this.nativeFullscreenSupported() ) { if (this.skin === 'legacy') { controlLayout[3].push('fullscreen'); - } - else { + } else { controlLayout[1].push('fullscreen'); } } if (this.browserSupportsVolume()) { - volumeSupported = true; // defined in case we decide to move volume button elsewhere this.volumeButton = 'volume-' + this.getVolumeName(this.volume); if (this.skin === 'legacy') { controlLayout[1].push('volume'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('volume'); } - } - else { - volumeSupported = false; + } else { this.volume = false; } return controlLayout; @@ -4495,12 +4086,10 @@ var AblePlayerInstances = []; // some controls are aligned on the left, and others on the right var thisObj, baseSliderWidth, controlLayout, numSections, - i, j, k, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, $pipeImg, - svgData, svgPath, control, - $buttonLabel, $buttonImg, buttonImgSrc, buttonTitle, $newButton, iconClass, buttonIcon, - buttonUse, buttonText, position, buttonHeight, buttonWidth, buttonSide, controllerWidth, - tooltipId, tooltipY, tooltipX, tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, - captionLabel, popupMenuId; + i, j, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, control, + buttonTitle, $newButton, buttonText, position, buttonHeight, + buttonWidth, buttonSide, controllerWidth, tooltipId, tooltipY, tooltipX, + tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, captionLabel, popupMenuId; thisObj = this; @@ -4518,33 +4107,36 @@ var AblePlayerInstances = []; }).hide(); this.$controllerDiv.append(this.$tooltipDiv); - if (this.skin == '2020') { + if (this.skin == '2020') { // add a full-width seek bar $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); this.$controllerDiv.append($sliderDiv); - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); } + // add a full-width seek bar + let $controlRow = $('<div class="able-control-row"></div>'); + this.$controllerDiv.append($controlRow); + for (i = 0; i < numSections; i++) { controls = controlLayout[i]; if ((i % 2) === 0) { // even keys on the left $controllerSpan = $('<div>',{ 'class': 'able-left-controls' }); - } - else { // odd keys on the right + } else { // odd keys on the right $controllerSpan = $('<div>',{ 'class': 'able-right-controls' }); } - this.$controllerDiv.append($controllerSpan); + $controlRow.append($controllerSpan); for (j=0; j<controls.length; j++) { control = controls[j]; if (control === 'seek') { $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); $controllerSpan.append($sliderDiv); if (typeof this.duration === 'undefined' \|\| this.duration === 0) { // set arbitrary starting duration, and change it when duration is known @@ -4552,53 +4144,17 @@ var AblePlayerInstances = []; // also set elapsed to 0 this.elapsed = 0; } - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - else if (control === 'pipe') { + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + } else if (control === 'pipe') { $pipe = $('<span>', { 'tabindex': '-1', - 'aria-hidden': 'true' + 'aria-hidden': 'true', + 'class': 'able-pipe', }); - if (this.iconType === 'font') { - $pipe.addClass('icon-pipe'); - } - else { - $pipeImg = $('<img>', { - src: this.rootPath + 'button-icons/' + this.iconColor + '/pipe.png', - alt: '', - role: 'presentation' - }); - $pipe.append($pipeImg); - } + $pipe.append('\|'); $controllerSpan.append($pipe); - } - else { + } else { // this control is a button - if (control === 'volume') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + this.volumeButton + '.png'; - } - else if (control === 'fullscreen') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/fullscreen-expand.png'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/turtle.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/slower.png'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/rabbit.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/faster.png'; - } - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + control + '.png'; - } buttonTitle = this.getButtonTitle(control); // icomoon documentation recommends the following markup for screen readers: @@ -4616,7 +4172,6 @@ var AblePlayerInstances = []; $newButton = $('<div>',{ 'role': 'button', 'tabindex': '0', - 'aria-label': buttonTitle, 'class': 'able-button-handler-' + control }); @@ -4630,16 +4185,14 @@ var AblePlayerInstances = []; 'aria-controls': popupMenuId, 'aria-haspopup': 'menu', 'aria-expanded': 'false' - }); - } - else if (this.prefCats.length === 1) { + }); + } else if (this.prefCats.length === 1) { // Prefs button will trigger a dialog $newButton.attr({ 'aria-haspopup': 'dialog' }); } - } - else if (control === 'volume') { + } else if (control === 'volume') { popupMenuId = this.mediaId + '-volume-slider'; // volume slider popup is not a menu or a dialog // therefore, using aria-expanded rather than aria-haspopup to communicate properties/state @@ -4655,130 +4208,23 @@ var AblePlayerInstances = []; } } } - if (this.iconType === 'font') { - if (control === 'volume') { - iconClass = 'icon-' + this.volumeButton; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-turtle'; - } - else { - iconClass = 'icon-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-rabbit'; - } - else { - iconClass = 'icon-faster'; - } - } - else { - iconClass = 'icon-' + control; - } - buttonIcon = $('<span>',{ - 'class': iconClass, - 'aria-hidden': 'true' - }); - $newButton.append(buttonIcon); + var getControl = control; + if ( control === 'faster' && this.speedIcons === 'animals' ) { + getControl = 'rabbit'; } - else if (this.iconType === 'svg') { - - /* - // Unused option for adding SVG: - // Use <use> element to link to button-icons/able-icons.svg - // Advantage: SVG file can be cached - // Disadvantage: Not supported by Safari 6, IE 6-11, or Edge 12 - // Instead, adding <svg> element within each <button> - if (control === 'volume') { - iconClass = 'svg-' + this.volumeButton; - } - else if (control === 'fullscreen') { - iconClass = 'svg-fullscreen-expand'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-turtle'; - } - else { - iconClass = 'svg-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-rabbit'; - } - else { - iconClass = 'svg-faster'; - } - } - else { - iconClass = 'svg-' + control; - } - buttonIcon = $('<svg>',{ - 'class': iconClass - }); - buttonUse = $('<use>',{ - 'xlink:href': this.rootPath + 'button-icons/able-icons.svg#' + iconClass - }); - buttonIcon.append(buttonUse); - / - var svgData; - if (control === 'volume') { - svgData = this.getSvgData(this.volumeButton); - } - else if (control === 'fullscreen') { - svgData = this.getSvgData('fullscreen-expand'); - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('turtle'); - } - else { - svgData = this.getSvgData('slower'); - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('rabbit'); - } - else { - svgData = this.getSvgData('faster'); - } - } - else { - svgData = this.getSvgData(control); - } - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - $newButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - $newButton.html($newButton.html()); + if ( control === 'slower' && this.speedIcons === 'animals' ) { + getControl = 'turtle'; } - else { - // use images - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); + if ( control === 'volume' ) { + this.getIcon( $newButton, this.volumeButton ); + } else { + if ( 'fullscreen' === getControl ) { + getControl = ( this.fullscreen ) ? 'fullscreen-collapse' : 'fullscreen-expand'; + } + this.getIcon( $newButton, getControl ); } - // add the visibly-hidden label for screen readers that don't support aria-label on the button - var $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(buttonTitle); - $newButton.append($buttonLabel); + + this.setText($newButton,buttonTitle); // add an event listener that displays a tooltip on mouseenter or focus $newButton.on('mouseenter focus',function(e) { @@ -4786,73 +4232,63 @@ var AblePlayerInstances = []; // since the same tooltip div is used, it's location just changes. clearTimeout(tooltipTimerId); - var buttonText = $(this).attr('aria-label'); + buttonText = $(this).attr('aria-label'); // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); + position = $(this).position(); + buttonHeight = $(this).height(); + buttonWidth = $(this).width(); // position() is expressed using top and left (of button); // add right (of button) too, for convenience - var controllerWidth = thisObj.$controllerDiv.width(); + controllerWidth = thisObj.$controllerDiv.width(); position.right = controllerWidth - position.left - buttonWidth; - // The following formula positions tooltip above the button - // var tooltipY = position.top - buttonHeight - 15; - - // The following formula positions tooltip below the button + // The following formula positions tooltip below the button // which allows the tooltip to be hoverable as per WCAG 2.x SC 1.4.13 - // without obstructing the seekbar - var tooltipY = position.top + buttonHeight + 5; + // without obstructing the seekbar + tooltipY = position.top + buttonHeight + 5; if ($(this).parent().hasClass('able-right-controls')) { // this control is on the right side - var buttonSide = 'right'; - } - else { + buttonSide = 'right'; + } else { // this control is on the left side - var buttonSide = 'left'; + buttonSide = 'left'; } // populate tooltip, then calculate its width before showing it - var tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); + tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); // center the tooltip horizontally over the button if (buttonSide == 'left') { - var tooltipX = position.left - tooltipWidth/2; + tooltipX = position.left - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: tooltipX + 'px', right: '', top: tooltipY + 'px' }; - } - else { - var tooltipX = position.right - tooltipWidth/2; + } else { + tooltipX = position.right - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: '', right: tooltipX + 'px', top: tooltipY + 'px' }; } - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); + tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { - // hide tooltip (original line of code) - // AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - - // The above line was replaced with the following block - // in order to meet WCAG 2.x SC 1.4.13 // (keep the tooltip visible if user hovers over it) - // This causes unwanted side effects if tooltips are positioned above the buttons - // as the persistent tooltip obstructs the seekbar, - // blocking users from being able to move a pointer from a button to the seekbar - // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons + // This causes unwanted side effects if tooltips are positioned above the buttons + // as the persistent tooltip obstructs the seekbar, + // blocking users from being able to move a pointer from a button to the seekbar + // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons // clear existing timeout before reassigning variable clearTimeout(tooltipTimerId); @@ -4869,29 +4305,27 @@ var AblePlayerInstances = []; thisObj.$tooltipDiv.on('mouseleave blur', function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }); - - }); + + }); }); if (control === 'captions') { if (!this.prefCaptions \|\| this.prefCaptions !== 1) { // captions are available, but user has them turned off if (this.captions.length > 1) { - captionLabel = this.tt.captions; - } - else { - captionLabel = this.tt.showCaptions; + captionLabel = this.translate( 'captions', 'Captions' ); + } else { + captionLabel = this.translate( 'showCaptions', 'Show captions' ); } $newButton.addClass('buttonOff').attr('title',captionLabel); $newButton.attr('aria-pressed', 'false'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { if (!this.prefDesc \|\| this.prefDesc !== 1) { // user prefer non-audio described version // Therefore, load media without description // Description can be toggled on later with this button - $newButton.addClass('buttonOff').attr('title',this.tt.turnOnDescriptions); + $newButton.addClass('buttonOff').attr( 'title', this.translate( 'turnOnDescriptions', 'Turn on descriptions' ) ); } } @@ -4900,59 +4334,48 @@ var AblePlayerInstances = []; // create variables of buttons that are referenced throughout the AblePlayer object if (control === 'play') { this.$playpauseButton = $newButton; - } - else if (control == 'previous') { + } else if (control == 'previous') { this.$prevButton = $newButton; // if player is being rebuilt because user clicked the Prev button // return focus to that (newly built) button if (this.buttonWithFocus == 'previous') { - this.$prevButton.focus(); + this.$prevButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control == 'next') { + } else if (control == 'next') { this.$nextButton = $newButton; // if player is being rebuilt because user clicked the Next button // return focus to that (newly built) button if (this.buttonWithFocus == 'next') { - this.$nextButton.focus(); + this.$nextButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control === 'captions') { + } else if (control === 'captions') { this.$ccButton = $newButton; - } - else if (control === 'sign') { + } else if (control === 'sign') { this.$signButton = $newButton; // gray out sign button if sign language window is not active if (!(this.$signWindow.is(':visible'))) { this.$signButton.addClass('buttonOff'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { this.$descButton = $newButton; // button will be enabled or disabled in description.js > initDescription() - } - else if (control === 'mute') { + } else if (control === 'mute') { this.$muteButton = $newButton; - } - else if (control === 'transcript') { + } else if (control === 'transcript') { this.$transcriptButton = $newButton; // gray out transcript button if transcript is not active if (!(this.$transcriptDiv.is(':visible'))) { - this.$transcriptButton.addClass('buttonOff').attr('title',this.tt.showTranscript); + this.$transcriptButton.addClass('buttonOff').attr( 'title', this.translate( 'showTranscript', 'Show transcript' ) ); } - } - else if (control === 'fullscreen') { + } else if (control === 'fullscreen') { this.$fullscreenButton = $newButton; - } - else if (control === 'chapters') { + } else if (control === 'chapters') { this.$chaptersButton = $newButton; - } - else if (control === 'preferences') { + } else if (control === 'preferences') { this.$prefsButton = $newButton; - } - else if (control === 'volume') { + } else if (control === 'volume') { this.$volumeButton = $newButton; } } @@ -4982,191 +4405,7 @@ var AblePlayerInstances = []; } // Update state-based display of controls. - this.refreshControls('init'); - }; - - AblePlayer.prototype.useSvg = function () { - - // Modified from IcoMoon.io svgxuse - // @copyright Copyright (c) 2016 IcoMoon.io - // @license Licensed under MIT license - // See https://github.com/Keyamoon/svgxuse - // @version 1.1.16 - - var cache = Object.create(null); // holds xhr objects to prevent multiple requests - var checkUseElems, - tid; // timeout id - var debouncedCheck = function () { - clearTimeout(tid); - tid = setTimeout(checkUseElems, 100); - }; - var unobserveChanges = function () { - return; - }; - var observeChanges = function () { - var observer; - window.addEventListener('resize', debouncedCheck, false); - window.addEventListener('orientationchange', debouncedCheck, false); - if (window.MutationObserver) { - observer = new MutationObserver(debouncedCheck); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - attributes: true - }); - unobserveChanges = function () { - try { - observer.disconnect(); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - } catch (ignore) {} - }; - } - else { - document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); - unobserveChanges = function () { - document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - }; - } - }; - var xlinkNS = 'http://www.w3.org/1999/xlink'; - checkUseElems = function () { - var base, - bcr, - fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. - hash, - i, - Request, - inProgressCount = 0, - isHidden, - url, - uses, - xhr; - if (window.XMLHttpRequest) { - Request = new XMLHttpRequest(); - if (Request.withCredentials !== undefined) { - Request = XMLHttpRequest; - } - else { - Request = XDomainRequest \|\| undefined; - } - } - if (Request === undefined) { - return; - } - function observeIfDone() { - // If done with making changes, start watching for chagnes in DOM again - inProgressCount -= 1; - if (inProgressCount === 0) { // if all xhrs were resolved - observeChanges(); // watch for changes to DOM - } - } - function attrUpdateFunc(spec) { - return function () { - if (cache[spec.base] !== true) { - spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); - } - }; - } - function onloadFunc(xhr) { - return function () { - var body = document.body; - var x = document.createElement('x'); - var svg; - xhr.onload = null; - x.innerHTML = xhr.responseText; - svg = x.getElementsByTagName('svg')[0]; - if (svg) { - svg.setAttribute('aria-hidden', 'true'); - svg.style.position = 'absolute'; - svg.style.width = 0; - svg.style.height = 0; - svg.style.overflow = 'hidden'; - body.insertBefore(svg, body.firstChild); - } - observeIfDone(); - }; - } - function onErrorTimeout(xhr) { - return function () { - xhr.onerror = null; - xhr.ontimeout = null; - observeIfDone(); - }; - } - unobserveChanges(); // stop watching for changes to DOM - // find all use elements - uses = document.getElementsByTagName('use'); - for (i = 0; i < uses.length; i += 1) { - try { - bcr = uses[i].getBoundingClientRect(); - } catch (ignore) { - // failed to get bounding rectangle of the use element - bcr = false; - } - url = uses[i].getAttributeNS(xlinkNS, 'href').split('#'); - base = url[0]; - hash = url[1]; - isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; - if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { - // the use element is empty - // if there is a reference to an external SVG, try to fetch it - // use the optional fallback URL if there is no reference to an external SVG - if (fallback && !base.length && hash && !document.getElementById(hash)) { - base = fallback; - } - if (base.length) { - // schedule updating xlink:href - xhr = cache[base]; - if (xhr !== true) { - // true signifies that prepending the SVG was not required - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - if (xhr === undefined) { - xhr = new Request(); - cache[base] = xhr; - xhr.onload = onloadFunc(xhr); - xhr.onerror = onErrorTimeout(xhr); - xhr.ontimeout = onErrorTimeout(xhr); - xhr.open('GET', base); - xhr.send(); - inProgressCount += 1; - } - } - } - else { - if (!isHidden) { - if (cache[base] === undefined) { - // remember this URL if the use element was not empty and no request was sent - cache[base] = true; - } - else if (cache[base].onload) { - // if it turns out that prepending the SVG is not necessary, - // abort the in-progress xhr. - cache[base].abort(); - cache[base].onload = undefined; - cache[base] = true; - } - } - } - } - uses = ''; - inProgressCount += 1; - observeIfDone(); - }; -/ - // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. - window.addEventListener('load', function winLoad() { - window.removeEventListener('load', winLoad, false); // to prevent memory leaks - tid = setTimeout(checkUseElems, 0); - }, false); -/ + this.refreshControls(); }; AblePlayer.prototype.cuePlaylistItem = function(sourceIndex) { @@ -5175,19 +4414,7 @@ var AblePlayerInstances = []; // NOTE: Swapping source for audio description is handled elsewhere; // see description.js > swapDescription() - / - // Decided against preventing a reload of the current item in the playlist. - // If it's clickable, users should be able to click on it and expect something to happen. - // Leaving here though in case it's determined to be desirable. - if (sourceIndex === this.playlistItemIndex) { - // user has requested the item that's currently playing - // just ignore the request - return; - } - this.playlistItemIndex = sourceIndex; - / - - var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, sources, s, i, $newSource, nowPlayingSpan; + var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, nowPlayingSpan; var thisObj = this; @@ -5195,9 +4422,8 @@ var AblePlayerInstances = []; if (this.initializing) { // this is the first track - user hasn't pressed play yet // do nothing. - } - else { - if (this.playerCreated) { + } else { + if (this.playerCreated) { // remove the old this.deletePlayer('playlist'); } @@ -5206,19 +4432,18 @@ var AblePlayerInstances = []; // set swappingSrc; needs to be true within recreatePlayer(), called below this.swappingSrc = true; - // if a new playlist item is being requested, and playback has already started, - // it should be ok to play automatically, regardless of how it was requested - if (this.startedPlaying) { - this.okToPlay = true; - } - else { - this.okToPlay = false; + // if a new playlist item is being requested, and playback has already started, + // it should be ok to play automatically, regardless of how it was requested + if (this.startedPlaying) { + this.okToPlay = true; + } else { + this.okToPlay = false; } - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; // Determine appropriate player to play this media $newItem = this.$playlist.eq(sourceIndex); @@ -5228,16 +4453,14 @@ var AblePlayerInstances = []; this.youTubeDescId = this.getYouTubeId($newItem.attr('data-youtube-desc-id')); } newPlayer = 'youtube'; - } - else if (this.hasAttr($newItem,'data-vimeo-id')) { + } else if (this.hasAttr($newItem,'data-vimeo-id')) { this.vimeoId = this.getVimeoId($newItem.attr('data-vimeo-id')); if (this.hasAttr($newItem,'data-vimeo-desc-id')) { this.vimeoDescId = this.getVimeoId($newItem.attr('data-vimeo-desc-id')); } newPlayer = 'vimeo'; - } - else { - newPlayer = 'html5'; + } else { + newPlayer = 'html5'; } if (newPlayer === 'youtube') { if (prevPlayer === 'html5') { @@ -5247,9 +4470,8 @@ var AblePlayerInstances = []; } this.$media.hide(); } - } - else { - // the new player is not youtube + } else { + // the new player is not youtube this.youTubeId = false; if (prevPlayer === 'youtube') { // unhide the media element @@ -5276,21 +4498,42 @@ var AblePlayerInstances = []; var $sourceSpans = $newItem.children('span.able-source'); if ($sourceSpans.length) { $sourceSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src')) { - // this is the only required attribute - var $newSource = $('<source>',{ - 'src': $(this).attr('data-src') - }); - if (thisObj.hasAttr($(this),'data-type')) { - $newSource.attr('type',$(this).attr('data-type')); - } - if (thisObj.hasAttr($(this),'data-desc-src')) { - $newSource.attr('data-desc-src',$(this).attr('data-desc-src')); - } - if (thisObj.hasAttr($(this),'data-sign-src')) { - $newSource.attr('data-sign-src',$(this).attr('data-sign-src')); + const $this = $(this); + + // Check if the required data-src attribute exists + if (thisObj.hasAttr($this, "data-src")) { + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <source> element with the sanitized src + const $newSource = $("<source>", { src: sanitizedSrc }); + + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-type", + "data-desc-src", + "data-sign-src", + ]; + + // Process optional attributes + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + const attrValue = $this.attr(attr); // Get the attribute value + const sanitizedValue = DOMPurify.sanitize(attrValue); // Sanitize the value + + // If the attribute ends with "-src", validate the protocol + if (attr.endsWith("-src") && validate.isProtocolSafe(sanitizedValue)) { + $newSource.attr(attr, sanitizedValue); // Add the sanitized and validated attribute + } else if (!attr.endsWith("-src")) { + $newSource.attr(attr, sanitizedValue); // Add sanitized value for non-src attributes + } + } + }); + + // Append the new <source> element to the media object + thisObj.$media.append($newSource); } - thisObj.$media.append($newSource); } }); } @@ -5300,27 +4543,37 @@ var AblePlayerInstances = []; if ($trackSpans.length) { // for each element in $trackSpans, create a new <track> element $trackSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src') && - thisObj.hasAttr($(this),'data-kind') && - thisObj.hasAttr($(this),'data-srclang')) { + const $this = $(this); + if (thisObj.hasAttr($this, "data-src") && thisObj.hasAttr($this, "data-kind") && thisObj.hasAttr($this, "data-srclang")) { // all required attributes are present - var $newTrack = $('<track>',{ - 'src': $(this).attr('data-src'), - 'kind': $(this).attr('data-kind'), - 'srclang': $(this).attr('data-srclang') - }); - if (thisObj.hasAttr($(this),'data-label')) { - $newTrack.attr('label',$(this).attr('data-label')); - } - if (thisObj.hasAttr($(this),'data-desc')) { - $newTrack.attr('data-desc',$(this).attr('data-desc')); + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <track> element with the sanitized src + const $newTrack = $("<track>", { + src: sanitizedSrc, + kind: $this.attr("data-kind"), + srclang: $this.attr("data-srclang"), + }); + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-label", + "data-desc", + "data-default", + ]; + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + $newTrack.attr(attr, DOMPurify.sanitize($this.attr(attr))); + } + }); + // Append the new <track> element to the media object + thisObj.$media.append($newTrack); } - thisObj.$media.append($newTrack); } }); } - itemTitle = $newItem.text(); + itemTitle = DOMPurify.sanitize( $newItem.text() ); if (this.hasAttr($newItem,'lang')) { itemLang = $newItem.attr('lang'); } @@ -5328,18 +4581,18 @@ var AblePlayerInstances = []; this.$sources = this.$media.find('source'); // recreate player, informed by new attributes and track elements - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; + return; } - this.recreatePlayer().then(function() { + this.recreatePlayer().then(function() { // update playlist to indicate which item is playing thisObj.$playlist.removeClass('able-current') .children('button').removeAttr('aria-current'); thisObj.$playlist.eq(sourceIndex).addClass('able-current') - .children('button').attr('aria-current','true'); - + .children('button').attr('aria-current','true'); + // update Now Playing div if (thisObj.showNowPlaying === true) { if (typeof thisObj.$nowPlayingDiv !== 'undefined') { @@ -5355,56 +4608,48 @@ var AblePlayerInstances = []; // if thisObj.swappingSrc is true, media will autoplay when ready if (thisObj.initializing) { // this is the first track - user hasn't pressed play yet thisObj.swappingSrc = false; - } - else { + } else { if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } - } - else if (thisObj.player === 'youtube') { - thisObj.okToPlay = true; + } else if (thisObj.player === 'youtube') { + thisObj.okToPlay = true; } } thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed - }); + thisObj.playerCreated = true; // remains true until browser is refreshed + }); }; AblePlayer.prototype.deletePlayer = function(context) { - // remove player components that need to be rebuilt - // after swapping media sources that have different durations - // or explicitly declared data-desc attributes + // remove player components that need to be rebuilt + // after swapping media sources that have different durations + // or explicitly declared data-desc attributes - // Context is one of the following: - // playlist - called from cuePlaylistItem() + // Context is one of the following: + // playlist - called from cuePlaylistItem() // swap-desc-html - called from swapDescription with this.player == 'html' - // swap-desc-youtube - called from swapDescription with this.player == 'youtube' - // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' + // swap-desc-youtube - called from swapDescription with this.player == 'youtube' + // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' - if (this.player === 'youtube' && this.youTubePlayer) { - this.youTubePlayer.destroy(); + if (this.player === 'youtube' && this.youTubePlayer) { + this.youTubePlayer.destroy(); } - if (this.player === 'vimeo' && this.vimeoPlayer) { - this.vimeoPlayer.destroy(); + if (this.player === 'vimeo' && this.vimeoPlayer) { + this.vimeoPlayer.destroy(); } - -/ TODO - Investigate: when is this needed? - // remove previous video's attributes and child elements from media element - this.$media.removeAttr('poster width height'); - this.$media.empty(); -/ // Empty elements that will be rebuilt this.$controllerDiv.empty(); // this.$statusBarDiv.empty(); // this.$timer.empty(); this.$elapsedTimeContainer.empty().text('0:00'); // span.able-elapsedTime this.$durationContainer.empty(); // span.able-duration - + // Remove popup windows and modal dialogs; these too will be rebuilt if (this.$signWindow) { this.$signWindow.remove(); @@ -5413,125 +4658,81 @@ var AblePlayerInstances = []; this.$transcriptArea.remove(); } $('.able-modal-dialog').remove(); - - // Remove caption and description wrappers + + // Remove caption and description wrappers if (this.$captionsWrapper) { this.$captionsWrapper.remove(); } - if (this.$descDiv) { - this.$descDiv.remove(); + if (this.$descDiv) { + this.$descDiv.remove(); } - + // reset key variables this.hasCaptions = false; this.hasChapters = false; - this.hasDescTracks = false; + this.hasDescTracks = false; this.hasOpenDesc = false; - this.hasClosedDesc = false; + this.hasClosedDesc = false; this.captionsPopup = null; this.chaptersPopup = null; this.transcriptType = null; - this.playerDeleted = true; // will reset to false in recreatePlayer() + this.playerDeleted = true; // will reset to false in recreatePlayer() }; AblePlayer.prototype.getButtonTitle = function(control) { if (control === 'playpause') { - return this.tt.play; - } - else if (control === 'play') { - return this.tt.play; - } - else if (control === 'pause') { - return this.tt.pause; - } - else if (control === 'restart') { - return this.tt.restart; - } - else if (control === 'previous') { - return this.tt.prevTrack; - } - else if (control === 'next') { - return this.tt.nextTrack; - } - else if (control === 'rewind') { - return this.tt.rewind; - } - else if (control === 'forward') { - return this.tt.forward; - } - else if (control === 'captions') { + return this.translate( 'play', 'Play' ); + } else if (control === 'play') { + return this.translate( 'play', 'Play' ); + } else if (control === 'pause') { + return this.translate( 'pause', 'Pause' ); + } else if (control === 'restart') { + return this.translate( 'restart', 'Restart' ); + } else if (control === 'previous') { + return this.translate( 'prevTrack', 'Previous track' ); + } else if (control === 'next') { + return this.translate( 'nextTrack', 'Next track' ); + } else if (control === 'rewind') { + return this.translate( 'rewind', 'Rewind' ); + } else if (control === 'forward') { + return this.translate( 'forward', 'Forward' ); + } else if (control === 'captions') { if (this.captions.length > 1) { - return this.tt.captions; - } - else { - if (this.captionsOn) { - return this.tt.hideCaptions; - } - else { - return this.tt.showCaptions; - } - } - } - else if (control === 'descriptions') { - if (this.descOn) { - return this.tt.turnOffDescriptions; - } - else { - return this.tt.turnOnDescriptions; - } - } - else if (control === 'transcript') { - if (this.$transcriptDiv.is(':visible')) { - return this.tt.hideTranscript; - } - else { - return this.tt.showTranscript; - } - } - else if (control === 'chapters') { - return this.tt.chapters; - } - else if (control === 'sign') { - return this.tt.sign; - } - else if (control === 'volume') { - return this.tt.volume; - } - else if (control === 'faster') { - return this.tt.faster; - } - else if (control === 'slower') { - return this.tt.slower; - } - else if (control === 'preferences') { - return this.tt.preferences; - } - else if (control === 'help') { - // return this.tt.help; - } - else if (control === 'fullscreen') { - if (!this.fullscreen) { - return this.tt.enterFullscreen; - } - else { - return this.tt.exitFullscreen; - } - } - else { + return this.translate( 'captions', 'Captions' ); + } else { + return (this.captionsOn) ? this.translate( 'hideCaptions', 'Hide captions' ) : this.translate( 'showCaptions', 'Show captions' ); + } + } else if (control === 'descriptions') { + return (this.descOn) ? this.translate( 'turnOffDescriptions', 'Turn off descriptions' ) : this.translate( 'turnOnDescriptions', 'Turn on descriptions' ); + } else if (control === 'transcript') { + return (this.$transcriptDiv.is(':visible')) ? this.translate( 'hideTranscript', 'Hide transcript' ) : this.translate( 'showTranscript', 'Show transcript' ); + } else if (control === 'chapters') { + return this.translate( 'chapters', 'Chapters' ); + } else if (control === 'sign') { + return this.translate( 'sign', 'Sign language' ); + } else if (control === 'volume') { + return this.translate( 'volume', 'Volume' ); + } else if (control === 'faster') { + return this.translate( 'faster', 'Faster' ); + } else if (control === 'slower') { + return this.translate( 'slower', 'Slower' ); + } else if (control === 'preferences') { + return this.translate( 'preferences', 'Preferences' ); + } else if (control === 'fullscreen') { + return ( !this.fullscreen ) ? this.translate( 'enterFullScreen', 'Enter full screen' ) : this.translate( 'exitFullScreen', 'Exit full screen' ); + } else { // there should be no other controls, but just in case: // return the name of the control with first letter in upper case // ultimately will need to get a translated label from this.tt if (this.debug) { } - return control.charAt(0).toUpperCase() + control.slice(1); + return this.capitalizeFirstLetter( control ); } }; - - })(jQuery); /* @@ -5551,11 +4752,16 @@ var preProcessing = { * @returns {string} - The VTT content with processed tags. / transformCSSClasses: function (vttContent) { + // This function should only be passed one cue at a time. + // Throw an error if the string checked is more than 1000 characters. + if ( vttContent.length > 1000 ) { + throw new Error( "Input too long" ); + } return vttContent.replace( /<(v\|c\|b\|i\|u\|lang\|ruby)\.([\w\.]+)([^>])>/g, function (_, tag, cssClasses, otherAttrs) { - var classAttr = cssClasses.split(".").join(" "); - return "<" + tag + ' class="' + classAttr + '"' + otherAttrs + ">"; + var classAttr = cssClasses.replace(/\./g, " "); + return `<${tag} class="${classAttr}"${otherAttrs}>`; } ); }, @@ -5576,10 +4782,14 @@ var preProcessing = { }, /** - * Transforms <v> tags by adding a title attribute with the concatenated text and retaining other attributes. + * Transforms <v> tags by extracting any non-attribute text as a `title` attribute, + * retains existing attributes (except class), and preserves the class attribute if present. + * Example: <v John class="foo" data-x="y"> becomes <v title="John" data-x="y" class="foo"> + * + * @function * @memberof preProcessing - * @param {string} content - The content with processed <lang> tags. - * @returns {string} - The content with <v> tags transformed. + * @param {string} content - The string content containing <v> tags to process. + * @returns {string} The content with <v> tags transformed to include a title attribute and preserved attributes. / transformVTags: function (content) { return content.replace(/<v\s+([^>]?)>/g, function (_, tagAttributes) { @@ -5638,24 +4848,33 @@ var postProcessing = { return vttContent.replace( /<c class="([\w\s]+)">/g, function (_, classNames) { - var classes = classNames.split(" ").join("."); + var classes = classNames.replace(/ /g, "."); return "<c." + classes + ">"; } ); }, /** - * Post-processes <v> tags by converting class attributes to dot-separated class names. + * * Post-processes <v> tags by converting class attributes, no matter where found in the attribute order, to dot-separated class names. + * For example, <v class="foo bar" title="John"> becomes <v.foo.bar title="John">. + * Removes the class attribute and appends other attributes after the class names. + * + * @function * @memberof postProcessing * @param {string} vttContent - The VTT content to be processed. * @returns {string} - The VTT content with processed <v> tags. / postprocessVTag: function (vttContent) { return vttContent.replace( - /<v class="([\w\s]+)"([^>])>/g, - function (_, classNames, otherAttrs) { - var classes = classNames.split(" ").join("."); - return "<v." + classes + otherAttrs + ">"; + /<v([^>])class="([\w\s]+)"([^>])>/g, + function (_, beforeClass, classNames, afterClass) { + var classes = classNames.trim().split(/\s+/).join("."); + // Rebuild the tag: <v.{classes}{other attributes}> + // Remove class="..." from attributes + var attrs = (beforeClass + afterClass) + .replace(/\sclass="[\w\s]+"/, "") + .trim(); + return "<v." + classes + (attrs ? " " + attrs : "") + ">"; } ); }, @@ -5677,7 +4896,7 @@ var postProcessing = { }; /* - * Preprocesses, sanitizes and post-processes VTT content. + * Preprocesses, sanitizes and post-processes VTT content as well as other utility functions. * @namespace validate / var validate = { @@ -5708,8 +4927,9 @@ var validate = { var processedLangTags = postProcessing.postprocessLangTag(processedVTags); var arrowReplaced = processedLangTags.replace(/-->/g, "-->"); + var timestampTagReplaced = arrowReplaced.replace(/<([\d:.]+)>/g, '<$1>'); - var finalContent = arrowReplaced.replace( + var finalContent = timestampTagReplaced.replace( /<\/v>/g, function (match, offset) { return originalVttContent.indexOf(match, offset) !== -1 ? match : ""; @@ -5744,6 +4964,17 @@ var validate = { return validate.postProcessVttContent(sanitizedVttContent, vttContent); }, + // Utility validation functions + isProtocolSafe: function (url) { + //creates a new URL object for analysis to check if the protocol is http or https + //returns true if there is a match false otherwise + try { + const parsedUrl = new URL(url, window.location.origin); // Resolve relative URLs + return ["http:", "https:"].includes(parsedUrl.protocol); // Allow only HTTP and HTTPS + } catch (e) { + return false; // Invalid URL + } + }, }; // Export the object for use in other files @@ -5756,22 +4987,13 @@ if (typeof module !== "undefined" && module.exports) { // Loads files referenced in track elements, and performs appropriate setup. // For example, captions and text descriptions. // This will be called whenever the player is recreated. - // Added in v2.2.23: Also handles YouTube caption tracks AblePlayer.prototype.setupTracks = function () { - var thisObj, - deferred, - promise, - loadingPromises, - loadingPromise, - i, - tracks, - track, - kind; + var thisObj, deferred, promise, loadingPromises, loadingPromise, i, tracks, track, kind; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); loadingPromises = []; @@ -5793,20 +5015,17 @@ if (typeof module !== "undefined" && module.exports) { } for (i = 0; i < tracks.length; i++) { track = tracks[i]; - kind = track.kind; + kind = ( track.kind ) ? track.kind : 'subtitles'; if (!track.src) { if (thisObj.usingYouTubeCaptions \|\| thisObj.usingVimeoCaptions) { // skip all the hullabaloo and go straight to setupCaptions thisObj.setupCaptions(track); - } else { - // Nothing to load! - // Skip this track; move on to next i } continue; } - var trackSrc = track.src; - loadingPromise = this.loadTextObject(track.src); // resolves with src, trackText + var trackSrc = track.src; + loadingPromise = this.loadTextObject(trackSrc); loadingPromises.push( loadingPromise.catch(function (src) { @@ -5814,35 +5033,31 @@ if (typeof module !== "undefined" && module.exports) { ); loadingPromise.then( (function (track, kind) { - var trackSrc = track.src; + trackSrc = track.src; var trackLang = track.language; var trackLabel = track.label; var trackDesc = track.desc; - return function (trackSrc, trackText) { - // these are the two vars returned from loadTextObject - - var trackContents = trackText; - var cues = thisObj.parseWebVTT(trackSrc, trackContents).cues; + return function (data) { + var cues = thisObj.parseWebVTT(data).cues; if (thisObj.hasVts) { - // setupVtsTracks() is in vts.js thisObj.setupVtsTracks( kind, trackLang, trackDesc, trackLabel, trackSrc, - trackContents + data.text ); } - if (kind === "captions" \|\| kind === "subtitles") { + if (kind === 'captions' \|\| kind === 'subtitles') { thisObj.setupCaptions(track, cues); - } else if (kind === "descriptions") { + } else if (kind === 'descriptions') { thisObj.setupDescriptions(track, cues); - } else if (kind === "chapters") { + } else if (kind === 'chapters') { thisObj.setupChapters(track, cues); - } else if (kind === "metadata") { - thisObj.setupMetadata(track, cues); + } else if (kind === 'metadata') { + thisObj.setupMetadata(cues); } }; })(track, kind) @@ -5868,30 +5083,16 @@ if (typeof module !== "undefined" && module.exports) { // cues - array with startTime, endTime, and payload // desc - Boolean, true if track includes a data-desc attribute - var thisObj, - deferred, - promise, - captionTracks, - altCaptionTracks, - trackLang, - trackLabel, - isDefault, - forDesc, - hasDefault, - hasTrackInDefLang, - trackFound, - i, - j, - capLabel, - inserted; + var thisObj, deferred, promise, trackLang, trackLabel, isDefault, forDesc, + hasDefault, hasTrackInDefLang, trackFound, i; thisObj = this; hasDefault = false; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.$tracks = this.$media.find("track"); + this.$tracks = this.$media.find('track'); this.tracks = []; // only includes tracks that do NOT have data-desc this.altTracks = []; // only includes tracks that DO have data-desc @@ -5908,31 +5109,30 @@ if (typeof module !== "undefined" && module.exports) { this.usingYouTubeCaptions = false; // create object from HTML5 tracks this.$tracks.each(function (index, element) { - if ($(this).attr("kind") === "captions") { + if ($(this).attr('kind') === 'captions') { thisObj.hasCaptionsTrack = true; - } else if ($(this).attr("kind") === "descriptions") { + } else if ($(this).attr('kind') === 'descriptions') { thisObj.hasClosedDesc = true; } // srcLang should always be included with <track>, but HTML5 spec doesn't require it // if not provided, assume track is the same language as the default player language - if ($(this).attr("srclang")) { - trackLang = $(this).attr("srclang"); + if ($(this).attr('srclang')) { + trackLang = $(this).attr('srclang'); } else { trackLang = thisObj.lang; } - if ($(this).attr("label")) { - trackLabel = $(this).attr("label"); + if ($(this).attr('label')) { + trackLabel = $(this).attr('label'); } else { trackLabel = thisObj.getLanguageName(trackLang); } - if (typeof $(this).attr("default") !== "undefined" && !hasDefault) { + if (typeof $(this).attr('default') !== 'undefined' && !hasDefault) { isDefault = true; hasDefault = true; } else if (trackLang === thisObj.lang) { // this track is in the default lang of the player - // save this for later // if there is no other default track specified // this will be the default hasTrackInDefLang = true; @@ -5953,8 +5153,8 @@ if (typeof module !== "undefined" && module.exports) { } if (forDesc) { thisObj.altTracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -5962,8 +5162,8 @@ if (typeof module !== "undefined" && module.exports) { }); } else { thisObj.tracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -5979,16 +5179,16 @@ if (typeof module !== "undefined" && module.exports) { trackFound = false; i = 0; while (i < thisObj.tracks.length && !trackFound) { - if (thisObj.tracks[i]["language"] === thisObj.lang) { - thisObj.tracks[i]["def"] = true; + if (thisObj.tracks[i]['language'] === thisObj.lang) { + thisObj.tracks[i]['def'] = true; trackFound = true; } i++; } } else { // use the first track - thisObj.tracks[0]["def"] = true; - thisObj.captionLang = thisObj.tracks[0]["language"]; + thisObj.tracks[0]['def'] = true; + thisObj.captionLang = thisObj.tracks[0]['language']; } } // Remove 'default' attribute from all <track> elements @@ -6002,8 +5202,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.$tracks.length \|\| !this.hasCaptionsTrack) { // this media has no track elements // if this is a youtube or vimeo player, check there for captions/subtitles - if (this.player === "youtube") { - this.getYouTubeCaptionTracks(this.youTubeId).then(function () { + if (this.player === 'youtube') { + this.getYouTubeCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingYouTubeCaptions = true; if (thisObj.$captionsWrapper) { @@ -6012,7 +5212,7 @@ if (typeof module !== "undefined" && module.exports) { } deferred.resolve(); }); - } else if (this.player === "vimeo") { + } else if (this.player === 'vimeo') { this.getVimeoCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingVimeoCaptions = true; @@ -6040,7 +5240,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setupCaptions = function (track, cues) { // Setup player for display of captions (one track at a time) - var thisObj, captions, inserted, i, capLabel; + var inserted, i, capLabel; // Insert track into captions array // in its proper alphabetical sequence by label @@ -6106,8 +5306,8 @@ if (typeof module !== "undefined" && module.exports) { this.captionsOn = false; } } - if (this.mediaType === "audio" && this.captionsOn) { - this.$captionsContainer.removeClass("captions-off"); + if (this.mediaType === 'audio' && this.captionsOn) { + this.$captionsContainer.removeClass('captions-off'); } if ( @@ -6117,17 +5317,17 @@ if (typeof module !== "undefined" && module.exports) { ) { // captionsWrapper either doesn't exist, or exists in an orphaned state // Either way, it needs to be rebuilt... - this.$captionsDiv = $("<div>", { + this.$captionsDiv = $('<div>', { class: "able-captions", }); - this.$captionsWrapper = $("<div>", { - class: "able-captions-wrapper", - "aria-hidden": "true", + this.$captionsWrapper = $('<div>', { + class: 'able-captions-wrapper', + 'aria-hidden': 'true', }).hide(); - if (this.prefCaptionsPosition === "below") { - this.$captionsWrapper.addClass("able-captions-below"); + if (this.prefCaptionsPosition === 'below') { + this.$captionsWrapper.addClass('able-captions-below'); } else { - this.$captionsWrapper.addClass("able-captions-overlay"); + this.$captionsWrapper.addClass('able-captions-overlay'); } this.$captionsWrapper.append(this.$captionsDiv); this.$captionsContainer.append(this.$captionsWrapper); @@ -6158,19 +5358,19 @@ if (typeof module !== "undefined" && module.exports) { }); }; - AblePlayer.prototype.setupMetadata = function (track, cues, trackDesc) { - if (this.metaType === "text") { + AblePlayer.prototype.setupMetadata = function (cues) { + if (this.metaType === 'text') { // Metadata is only supported if data-meta-div is provided // The player does not display metadata internally if (this.metaDiv) { - if ($("#" + this.metaDiv)) { + if ($('#' + this.metaDiv)) { // container exists - this.$metaDiv = $("#" + this.metaDiv); + this.$metaDiv = $('#' + this.metaDiv); this.hasMeta = true; this.meta = cues; } } - } else if (this.metaType === "selector") { + } else if (this.metaType === 'selector') { this.hasMeta = true; this.visibleSelectors = []; this.meta = cues; @@ -6187,76 +5387,76 @@ if (typeof module !== "undefined" && module.exports) { / var deferred, promise, thisObj, $tempDiv; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; // create a temp div for holding data - $tempDiv = $("<div>", { - style: "display:none", + $tempDiv = $('<div>', { + style: 'display:none', }); // Fetch the content manually so it can be sanitized - $.ajax({ - url: src, - dataType: "text", - success: function (data) { - // Sanitize the fetched content - var sanitizedTrackText = validate.sanitizeVttContent(data); - - // Load the sanitized content into the $tempDiv - $tempDiv.html(sanitizedTrackText); - - // Resolve the promise with the sanitized content - deferred.resolve(src, sanitizedTrackText); - - $tempDiv.remove(); - }, - error: function (req, status, error) { - if (thisObj.debug) { - - } - deferred.reject(src); - $tempDiv.remove(); - }, - }); + fetch(src) + .then( response => { + + return response.text(); + }) + .then( vtt => { + // Split the input on double line breaks to handle each cue individually. + var preParsed = vtt.split(/\r?\n\s\r?\n/); + var lines = '', line; + + preParsed.forEach((l) => { + // Sanitize each line. + line = validate.sanitizeVttContent(l); + lines += line + "\n\n"; + }); + // Load the sanitized content into the $tempDiv + $tempDiv.html(lines); + // Resolve the promise with the sanitized content + let data = { 'src': src, 'text': lines }; + deferred.resolve(data); + $tempDiv.remove(); + }) + .catch( error => { + if (thisObj.debug) { + + } + deferred.reject(src); + $tempDiv.remove(); + }); return promise; }; })(jQuery); - (function ($) { + AblePlayer.prototype.initYouTubePlayer = function () { - var thisObj, deferred, promise, youTubeId, googleApiPromise, json; + var thisObj, deferred, promise, youTubeId; thisObj = this; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.youTubePlayerReady = false; + this.youTubePlayerReady = false; // if a described version is available && user prefers desription // init player using the described version - if (this.youTubeDescId && this.prefDesc) { - youTubeId = this.youTubeDescId; - } - else { - youTubeId = this.youTubeId; - } + youTubeId = (this.youTubeDescId && this.prefDesc) ? this.youTubeDescId : this.youTubeId; + this.activeYouTubeId = youTubeId; if (AblePlayer.youTubeIframeAPIReady) { // Script already loaded and ready. thisObj.finalizeYoutubeInit().then(function() { deferred.resolve(); }); - } - else { + } else { // Has another player already started loading the script? If so, abort... if (!AblePlayer.loadingYouTubeIframeAPI) { - $.getScript('https://www.youtube.com/iframe_api').fail(function () { - deferred.fail(); + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + }); } @@ -6273,71 +5473,54 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.finalizeYoutubeInit = function () { // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - var deferred, promise, thisObj, containerId, ccLoadPolicy, videoDimensions, autoplay; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - thisObj = this; - containerId = this.mediaId + '_youtube'; this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // NOTE: Tried the following in place of the above in January 2016 - // because in some cases two videos were being added to the DOM - // However, once v2.2.23 was fairly stable, unable to reproduce that problem - // so maybe it's not an issue. This is preserved here temporarily, just in case it's needed... - // thisObj.$mediaContainer.html($('<div>').attr('id', containerId)); // cc_load_policy: // 0 - show captions depending on user's preference on YouTube // 1 - show captions by default, even if the user has turned them off - // IMPORTANT: This must* be set to 1 or some browsers - // fail to load any texttracks (observed in Chrome, not in Firefox) + // IMPORTANT: This must be set to 1 or some browsers + // fail to load any text tracks (observed in Chrome, not in Firefox) ccLoadPolicy = 1; - - if (this.okToPlay) { - autoplay = 1; - } - else { - autoplay = 0; - } + autoplay = (this.okToPlay) ? 1 : 0; // Documentation https://developers.google.com/youtube/player_parameters - if (typeof this.captionLang == 'undefined') { + if (typeof this.captionLang == 'undefined') { // init using the default player lang - this.captionLang = this.lang; + this.captionLang = this.lang; } this.youTubePlayer = new YT.Player(containerId, { videoId: this.activeYouTubeId, host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', playerVars: { autoplay: autoplay, - enablejsapi: 1, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: ccLoadPolicy, + controls: 0, // no controls, using our own disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, playsinline: this.playsInline, - start: this.startTime, - controls: 0, // no controls, using our own - cc_load_policy: ccLoadPolicy, - cc_lang_pref: this.captionLang, // set the caption language - hl: this.lang, // set the UI language to match Able Player - modestbranding: 1, // no YouTube logo in controller rel: 0, // when video ends, show only related videos from same channel (1 shows any) - iv_load_policy: 3 // do not show video annotations + start: this.startTime }, events: { onReady: function () { - thisObj.youTubePlayerReady = true; - if (!thisObj.playerWidth \|\| !thisObj.playerHeight) { + thisObj.youTubePlayerReady = true; + if (!thisObj.playerWidth \|\| !thisObj.playerHeight) { thisObj.getYouTubeDimensions(); } - if (thisObj.playerWidth && thisObj.playerHeight) { + if (thisObj.playerWidth && thisObj.playerHeight) { thisObj.youTubePlayer.setSize(thisObj.playerWidth,thisObj.playerHeight); - thisObj.$ableWrapper.css({ - 'width': thisObj.playerWidth + 'px' - }); } if (thisObj.swappingSrc) { // swap is now complete @@ -6352,30 +5535,34 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.userClickedPlaylist) { thisObj.userClickedPlaylist = false; // reset } - if (thisObj.recreatingPlayer) { + if (thisObj.recreatingPlayer) { thisObj.recreatingPlayer = false; // reset } deferred.resolve(); }, onError: function (x) { - deferred.fail(); + deferred.reject(); }, - onStateChange: function (x) { + onStateChange: function (x) { thisObj.getPlayerState().then(function(playerState) { // values of playerState: 'playing','paused','buffering','ended' if (playerState === 'playing') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.play(true); + } thisObj.playing = true; thisObj.startedPlaying = true; thisObj.paused = false; - } - else if (playerState == 'ended') { + } else if (playerState == 'ended') { thisObj.onMediaComplete(); - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } if (thisObj.stoppingYouTube && playerState === 'paused') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.pause(true); + } if (typeof thisObj.$posterImg !== 'undefined') { thisObj.$posterImg.show(); } @@ -6386,13 +5573,17 @@ if (typeof module !== "undefined" && module.exports) { } }); // If caption tracks are hosted locally, but are also available on YouTube, - // we need to turn them off on YouTube or there will be redundant captions - // This is the most reliable event on which to unload the caption module - if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { - if (thisObj.youTubePlayer.getOptions('captions')) { + // we need to turn them off on YouTube or there will be redundant captions + // This is the most reliable event on which to unload the caption module + if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { + if (thisObj.youTubePlayer.getOptions('captions')) { thisObj.youTubePlayer.unloadModule('captions'); } - } + } + }, + onApiChange: function() { + // getDuration() can be fetched during API change event. + thisObj.duration = thisObj.youTubePlayer.getDuration(); }, onPlaybackQualityChange: function () { // do something @@ -6403,85 +5594,73 @@ if (typeof module !== "undefined" && module.exports) { // remove the media element, since YouTube replaces that with its own element in an iframe // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() this.$media.remove(); - } + } return promise; }; AblePlayer.prototype.getYouTubeDimensions = function (youTubeContainerId) { - // The YouTube iframe API does not have a getSize() of equivalent method - // so, need to get dimensions from YouTube's iframe + // The YouTube iframe API does not have a getSize() of equivalent method + // so, need to get dimensions from YouTube's iframe + var $iframe, width, height; - var $iframe, width, height; - - $iframe = this.$ableWrapper.find('iframe'); + $iframe = this.$ableWrapper.find('iframe'); if (typeof $iframe !== 'undefined') { - if ($iframe.prop('width')) { - width = $iframe.prop('width'); - if ($iframe.prop('height')) { + if ($iframe.prop('width')) { + width = $iframe.prop('width'); + if ($iframe.prop('height')) { height = $iframe.prop('height'); - this.resizePlayer(width,height); + this.resizePlayer(width,height); } } } }; - AblePlayer.prototype.getYouTubeCaptionTracks = function (youTubeId) { - - // get data via YouTube IFrame Player API, and push data to this.tracks & this.captions - // NOTE: Caption tracks are not available through the IFrame Player API - // until AFTER the video has started playing. - // Therefore, this function plays the video briefly in order to load the captions module - // then stops the video and collects the data needed to build the cc menu - // This is stupid, but seemingly unavoidable. - // Caption tracks could be obtained through the YouTube Data API - // but this required authors to have a Google API key, - // which would complicate Able Player installation + /** + * Get data from the YouTube iFrame API. Pushes data into `this.tracks` and `this.captions`. + * Initiates play to trigger loading the captions module, then stops and collects data. + * + * @returns {Promise} promise + / + AblePlayer.prototype.getYouTubeCaptionTracks = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - - var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack; + var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack, apiTriggered = false; thisObj = this; - - if (!this.youTubePlayer.getOption('captions','tracklist')) { - - // no tracks were found, probably because the captions module hasn't loaded - // play video briefly (required in order to load the captions module) - // and after the apiChange event is triggered, try again to retreive tracks - this.youTubePlayer.addEventListener('onApiChange',function(x) { - - // getDuration() also requires video to play briefly - // so, let's set that while we're here - thisObj.duration = thisObj.youTubePlayer.getDuration(); - - if (thisObj.loadingYouTubeCaptions) { - // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once - ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); - if (!thisObj.okToPlay) { - // Don't stopVideo() - that cancels loading - // Just pause - // No need to seekTo(0) - so little time has passed it isn't noticeable to the user - thisObj.youTubePlayer.pauseVideo(); - } - if (ytTracks && ytTracks.length) { + if (!this.youTubePlayer.getOption('captions','tracklist') ) { + // no tracks were found, probably because the captions module hasn't loaded + // play video briefly (required to load the captions module) + // and after the apiChange event is triggered, try again to retrieve tracks + this.youTubePlayer.addEventListener('onApiChange',function() { + apiTriggered = true; + // getDuration() also requires video to play briefly + // so, let's set that while we're here + thisObj.duration = thisObj.youTubePlayer.getDuration(); + + if (thisObj.loadingYouTubeCaptions) { + // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once + ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); + if ( ! thisObj.okToPlay ) { + // Don't stopVideo() - that cancels loading, just pause. + // No need to seekTo(0) - the time passed isn't noticeable to the user + thisObj.youTubePlayer.pauseVideo(); + } + if (ytTracks && ytTracks.length) { // Step through ytTracks and add them to global tracks array - // Note: Unlike YouTube Data API, the IFrame Player API only returns - // tracks that are published, and does NOT include ASR captions - // So, no additional filtering is required + // Note: Unlike YouTube Data API, the IFrame Player API only returns + // tracks that are published, and does NOT include ASR captions + // So, no additional filtering is required for (i=0; i < ytTracks.length; i++) { - trackLang = ytTracks[i].languageCode; + trackLang = ytTracks[i].languageCode; trackLabel = ytTracks[i].languageName; // displayName and languageName seem to always have the same value - isDefaultTrack = false; - if (typeof thisObj.captionLang !== 'undefined') { - if (trackLang === thisObj.captionLang) { - isDefaultTrack = true; - } - } - else if (typeof thisObj.lang !== 'undefined') { + isDefaultTrack = false; + if (typeof thisObj.captionLang !== 'undefined' && (trackLang === thisObj.captionLang) ) { + isDefaultTrack = true; + } else if (typeof thisObj.lang !== 'undefined') { if (trackLang === thisObj.lang) { - isDefaultTrack = true; + isDefaultTrack = true; } } thisObj.tracks.push({ @@ -6495,103 +5674,97 @@ if (typeof module !== "undefined" && module.exports) { 'label': trackLabel, 'def': isDefaultTrack, 'cues': null - }); + }); } thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - } - else { - // there are no YouTube captions - thisObj.usingYouTubeCaptions = false; + thisObj.setupPopups('captions'); + } else { + // there are no YouTube captions + thisObj.usingYouTubeCaptions = false; thisObj.hasCaptions = false; } - thisObj.loadingYouTubeCaptions = false; - if (thisObj.okToPlay) { + thisObj.loadingYouTubeCaptions = false; + if (thisObj.okToPlay) { thisObj.youTubePlayer.playVideo(); } } - if (thisObj.captionLangPending) { - // user selected a new caption language prior to playback starting - // set it now + if (thisObj.captionLangPending) { + // user selected a new caption language prior to playback starting + // set it now thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLangPending}); - thisObj.captionLangPending = null; + thisObj.captionLangPending = null; } - if (typeof thisObj.prefCaptionsSize !== 'undefined') { - // set the default caption size - // this doesn't work until the captions module is loaded + if (typeof thisObj.prefCaptionsSize !== 'undefined') { + // set the default caption size + // this doesn't work until the captions module is loaded thisObj.youTubePlayer.setOption('captions','fontSize',thisObj.translatePrefs('size',thisObj.prefCaptionsSize,'youtube')); } deferred.resolve(); }); - // Trigger the above event listener by briefly playing the video - this.loadingYouTubeCaptions = true; - this.youTubePlayer.playVideo(); + // Trigger the above event listener by briefly playing the video + this.loadingYouTubeCaptions = true; + this.youTubePlayer.playVideo(); + // If onApiChange has not been triggered, the captions module is not loading. + setTimeout(() => { + if ( ! apiTriggered ) { + setTimeout(() => { + // If a second passes without loading captions, assume there are none. + thisObj.youTubePlayer.pauseVideo(); + deferred.resolve(); + }, 500); + } + },500); } return promise; }; - AblePlayer.prototype.getYouTubeTimedTextUrl = function (youTubeId, trackName, trackLang) { - - // return URL for retrieving WebVTT source via YouTube's timedtext API - // Note: This API seems to be undocumented, and could break anytime - // UPDATE: Google removed this API on November 10, 2021 - // This function is no longer called, but is preserved here for reference - var url = 'https://www.youtube.com/api/timedtext?fmt=vtt'; - url += '&v=' + youTubeId; - url += '&lang=' + trackLang; - // if track has a value in the name field, it's required* in the URL - if (trackName !== '') { - url += '&name=' + trackName; - } - return url; - }; - AblePlayer.prototype.getYouTubePosterUrl = function (youTubeId, width) { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 - - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; + // return a URL for retrieving a YouTube poster image + // supported values of width: 120, 320, 480, 640, 1280, 1920. + var url = 'https://img.youtube.com/vi/' + youTubeId; + if (width == '120') { + // default (small) thumbnail, 120 x 90 + return url + '/default.jpg'; + } else if (width == '320') { + // medium quality thumbnail, 320 x 180 + return url + '/mqdefault.jpg'; + } else if (width == '480') { + // high quality thumbnail, 480 x 360 + return url + '/hqdefault.jpg'; + } else if (width == '640') { + // standard definition poster image, 640 x 480 + return url + '/sddefault.jpg'; + } else if (width == '1280') { + // standard definition poster image, 640 x 480 + return url + '/hq720.jpg'; + } else if ( width == '1920' ) { + // standard definition poster image, 640 x 480 + return url + '/maxresdefault.jpg'; + } + return false; }; AblePlayer.prototype.getYouTubeId = function (url) { // return a YouTube ID, extracted from a full YouTube URL - // Supported URL patterns (with http or https): - // https://youtu.be/xxx - // https://www.youtube.com/watch?v=xxx - // https://www.youtube.com/embed/xxx - - // in all supported patterns, the id is the last 11 characters - var idStartPos, id; - - if (url.indexOf('youtu') !== -1) { - // this is a full Youtube URL - url = url.trim(); - idStartPos = url.length - 11; - id = url.substring(idStartPos); - return id; - } - else { - return url; + // Supported URL patterns: + // http\|s://youtu.be/xxx + // http\|s://www.youtube.com/watch?v=xxx + // http\|s://www.youtube.com/embed/xxx + + // in all supported patterns, the id is the last 11 characters + var idStartPos, id; + + if (url.indexOf('youtu') !== -1) { + // this is a full Youtube URL + url = url.trim(); + idStartPos = url.length - 11; + id = url.substring(idStartPos); + return id; + } else { + return url; } }; @@ -6601,13 +5774,12 @@ if (typeof module !== "undefined" && module.exports) { // Events: - // startTracking(event, position) - // tracking(event, position) - // stopTracking(event, position) + // - startTracking(event, position) + // - tracking(event, position) + // - stopTracking(event, position) - window. AccessibleSlider = function(mediaType, div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { + window.AccessibleSlider = function(div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { - // mediaType is either 'audio' or 'video' // div is the host element around which the slider will be built // orientation is either 'horizontal' or 'vertical' // length is the width or height of the slider, depending on orientation @@ -6649,8 +5821,7 @@ if (typeof module !== "undefined" && module.exports) { if (initialState === 'visible') { this.seekHead.attr('tabindex', '0'); - } - else { + } else { this.seekHead.attr('tabindex', '-1'); } // Since head is focusable, it gets the aria roles/titles. @@ -6689,8 +5860,7 @@ if (typeof module !== "undefined" && module.exports) { if (orientation === 'horizontal') { this.wrapperDiv.width(length); this.loadedDiv.width(0); - } - else { + } else { this.wrapperDiv.height(length); this.loadedDiv.height(0); } @@ -6714,26 +5884,22 @@ if (typeof module !== "undefined" && module.exports) { if (e.type === 'mouseenter' \|\| e.type === 'focus') { thisObj.overHead = true; - } - else if (e.type === 'mouseleave' \|\| e.type === 'blur') { + } else if (e.type === 'mouseleave' \|\| e.type === 'blur') { thisObj.overHead = false; if (!thisObj.overBody && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { + } else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + } else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(thisObj.seekHead.offset() + (thisObj.seekHead.width() / 2))); if (!thisObj.bodyDiv.is(':focus')) { thisObj.bodyDiv.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } @@ -6747,7 +5913,12 @@ if (typeof module !== "undefined" && module.exports) { this.bodyDiv.on( 'mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend', function (e) { + // Don't trigger move on right click. + if ( e.button == 2 && e.type == 'mousedown' ) { + return; + } coords = thisObj.pointerEventToXY(e); + let keyPressed = e.key; if (e.type === 'mouseenter') { thisObj.overBody = true; @@ -6755,15 +5926,13 @@ if (typeof module !== "undefined" && module.exports) { x: coords.x, y: coords.y }; - } - else if (e.type === 'mouseleave') { + } else if (e.type === 'mouseleave') { thisObj.overBody = false; thisObj.overBodyMousePos = null; if (!thisObj.overHead && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { + } else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { thisObj.overBodyMousePos = { x: coords.x, y: coords.y @@ -6771,52 +5940,36 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + } else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(coords.x)); thisObj.trackHeadAtPageX(coords.x); if (!thisObj.seekHead.is(':focus')) { thisObj.seekHead.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'keydown') { - // Home - if (e.which === 36) { + } else if (e.type === 'keydown') { + if (e.key === 'Home') { thisObj.trackImmediatelyTo(0); - } - // End - else if (e.which === 35) { + } else if (e.key === 'End') { thisObj.trackImmediatelyTo(thisObj.duration); - } - // Left arrow or down arrow - else if (e.which === 37 \|\| e.which === 40) { + } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowDown') { thisObj.arrowKeyDown(-1); - } - // Right arrow or up arrow - else if (e.which === 39 \|\| e.which === 38) { + } else if (e.key === 'ArrowRight' \|\| e.key === 'ArrowUp') { thisObj.arrowKeyDown(1); - } - // Page up - else if (e.which === 33 && bigInterval > 0) { + } else if (e.key === 'PageUp' && bigInterval > 0) { thisObj.arrowKeyDown(bigInterval); - } - // Page down - else if (e.which === 34 && bigInterval > 0) { + } else if (e.key === 'PageDown' && bigInterval > 0) { thisObj.arrowKeyDown(-bigInterval); - } - else { + } else { return; } e.preventDefault(); - } - else if (e.type === 'keyup') { - if (e.which >= 33 && e.which <= 40) { + } else if (e.type === 'keyup') { + if ( keyPressed === e.key ) { if (thisObj.tracking && thisObj.trackDevice === 'keyboard') { thisObj.stopTracking(thisObj.keyTrackPosition); } @@ -6838,27 +5991,7 @@ if (typeof module !== "undefined" && module.exports) { this.nextStep = 2; } this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/* - AccessibleSlider.prototype.pageUp = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { + } else { this.nextStep = 1; this.inertiaCount = 0; this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); @@ -6866,7 +5999,7 @@ if (typeof module !== "undefined" && module.exports) { this.trackHeadAtPosition(this.keyTrackPosition); } }; -/ + AccessibleSlider.prototype.pageXToPosition = function (pageX) { var offset = pageX - this.bodyDiv.offset().left; var position = this.duration (offset / this.bodyDiv.width()); @@ -6921,7 +6054,7 @@ if (typeof module !== "undefined" && module.exports) { this.updateAriaValues(position, updateLive); } - // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. + // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. AccessibleSlider.prototype.setBuffered = function (ratio) { if (!isNaN(ratio)) { this.buffered = ratio; @@ -6984,14 +6117,12 @@ if (typeof module !== "undefined" && module.exports) { ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else if (pMinutes > 0) { + } else if (pMinutes > 0) { descriptionText = pMinutes + ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else { + } else { descriptionText = pSeconds + ' ' + pSecondWord; } @@ -7023,18 +6154,15 @@ if (typeof module !== "undefined" && module.exports) { this.timeTooltip.show(); if (this.tracking) { this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)); - } - else { + } else { this.timeTooltip.text(this.positionToStr(this.position)); } this.setTooltipPosition(this.seekHead.position().left + (this.seekHead.width() / 2)); - } - else if (this.overBody && this.overBodyMousePos) { + } else if (this.overBody && this.overBodyMousePos) { this.timeTooltip.show(); this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))); this.setTooltipPosition(this.overBodyMousePos.x - this.bodyDiv.offset().left); - } - else { + } else { clearTimeout(this.timeTooltipTimeoutId); var _this = this; @@ -7054,7 +6182,7 @@ if (typeof module !== "undefined" && module.exports) { AccessibleSlider.prototype.setTooltipPosition = function (x) { this.timeTooltip.css({ left: x - (this.timeTooltip.width() / 2) - 10, - bottom: this.seekHead.height() + 10 + bottom: this.seekHead.height() }); }; @@ -7072,8 +6200,7 @@ if (typeof module !== "undefined" && module.exports) { dMinutes = '0' + dMinutes; } return dHours + ':' + dMinutes + ':' + dSeconds; - } - else { + } else { return dMinutes + ':' + dSeconds; } }; @@ -7088,8 +6215,7 @@ if (typeof module !== "undefined" && module.exports) { var touch = e.originalEvent.touches[0] \|\| e.originalEvent.changedTouches[0]; out.x = touch.pageX; out.y = touch.pageY; - } - else if (e.type == 'mousedown' \|\| e.type == 'mouseup' \|\| e.type == 'mousemove' \|\| e.type == 'mouseover'\|\| e.type=='mouseout' \|\| e.type=='mouseenter' \|\| e.type=='mouseleave') { + } else if (e.type == 'mousedown' \|\| e.type == 'mouseup' \|\| e.type == 'mousemove' \|\| e.type == 'mouseover'\|\| e.type=='mouseout' \|\| e.type=='mouseenter' \|\| e.type=='mouseleave') { out.x = e.pageX; out.y = e.pageY; } @@ -7102,19 +6228,18 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addVolumeSlider = function($div) { - // Prior to v4.4.64, we were using a custom-build vertical volunme slider - // Changed to input type="range" because it's standard and gaining more widespread support - // including screen reader support - // TODO: Improve presentation of vertical slider. That requires some CSS finesse. + // Prior to v4.4.64, we were using a custom-build vertical volunme slider + // Changed to input type="range" because it's standard and gaining more widespread support + // including screen reader support + // TODO: Improve presentation of vertical slider. That requires some CSS finesse. - var thisObj, volumeSliderId, volumeHelpId, volumePct, tickLabelsId, $tickLabels, i, $tickOption, tickLabel; + var thisObj, volumeSliderId, volumeHelpId, volumePct, volumeLabel, volumeHeight; thisObj = this; // define a few variables volumeSliderId = this.mediaId + '-volume-slider'; volumeHelpId = this.mediaId + '-volume-help'; - tickLabelsId = this.mediaId + '-volume-tick-labels'; this.$volumeSlider = $('<div>',{ 'id': volumeSliderId, @@ -7125,15 +6250,14 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-tooltip', 'role': 'tooltip' }).hide(); - this.$volumeRange = $('<input>',{ + this.$volumeRange = $('<input>',{ 'type': 'range', 'min': '0', 'max': '10', 'step': '1', - 'orient': 'vertical', // non-standard, but required for Firefox - 'aria-label': this.tt.volumeUpDown, + 'orient': 'vertical', // non-standard, but required for Firefox + 'aria-label': this.translate( 'volumeUpDown', 'Volume up down' ), 'value': this.volume - // 'list': tickLabelsId // Uncomment this to use tickLabels (see note below) }); volumePct = parseInt(thisObj.volume) / 10 * 100; this.$volumeHelp = $('<div>',{ @@ -7141,30 +6265,11 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-volume-help', 'aria-live': 'polite' }).text(volumePct + '%'); - this.$volumeButton.attr({ - 'aria-describedby': volumeHelpId - }); - $tickLabels = $('<datalist>',{ - 'id': tickLabelsId - }); - for (i = 0; i <= 10; i++) { - if (i === 0) { - tickLabel = this.tt.mute; - } - else { - tickLabel = (i * 10) + '%'; - } - $tickOption = $('<option>',{ - 'value': i, - 'label': tickLabel - }) - $tickLabels.append($tickOption); - } + volumeLabel = this.$volumeButton.attr( 'aria-label' ); + this.$volumeButton.attr( 'aria-label', volumeLabel + ' ' + volumePct + '%'); this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp); - // To add $tickLabels, use the following line of code to replace the one above - // and uncommnet the 'list' property in the definition of this.$volumeRange above - // As of Nov 2022, this feature is not supported by any screen reader - // this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp,$tickLabels); + volumeHeight = this.$volumeButton.parents( '.able-control-row' )[0]; + this.$volumeSlider.css( 'bottom', volumeHeight.offsetHeight ); $div.append(this.$volumeSlider); @@ -7176,23 +6281,20 @@ if (typeof module !== "undefined" && module.exports) { this.$volumeRange.on('input',function (e) { thisObj.handleVolumeChange($(this).val()); }); - + this.$volumeRange.on('keydown',function (e) { - // Escape key or Enter key or Tab key - if (e.which === 27 \|\| e.which === 13 \|\| e.which === 9) { + if (e.key === 'Escape' \|\| e.key === 'Tab' \|\| e.key === 'Enter') { // close popup if (thisObj.$volumeSlider.is(':visible')) { thisObj.closingVolume = true; // stopgap thisObj.hideVolumePopup(); - } - else { + } else { if (!thisObj.closingVolume) { thisObj.showVolumePopup(); } } - } - else { + } else { return; } }); @@ -7204,93 +6306,61 @@ if (typeof module !== "undefined" && module.exports) { var volumePct; volumePct = (volume/10) * 100; - // Update help text - if (this.$volumeHelp) { - this.$volumeHelp.text(volumePct + '%'); + // Update help text + if (this.$volumeHelp) { + this.$volumeHelp.text(volumePct + '%'); } - // Update the default value of the volume slider input field - // This doesn't seem to be necessary; browsers remember the previous setting during a session - // but this is a fallback in case they don't - this.$volumeRange.attr('value',volume); + // Update the default value of the volume slider input field + // This doesn't seem to be necessary; browsers remember the previous setting during a session + // but this is a fallback in case they don't + this.$volumeRange.attr('value',volume); }; AblePlayer.prototype.refreshVolumeButton = function(volume) { - var volumeName, volumePct, volumeLabel, volumeIconClass, volumeImg, newSvgData; + var volumeName, volumePct, volumeLabel; volumeName = this.getVolumeName(volume); volumePct = (volume/10) * 100; - volumeLabel = this.tt.volume + ' ' + volumePct + '%'; + volumeLabel = this.translate( 'volume', 'Volume' ) + ' ' + volumePct + '%'; - if (this.iconType === 'font') { - volumeIconClass = 'icon-volume-' + volumeName; - this.$volumeButton.find('span').first().removeClass().addClass(volumeIconClass); - this.$volumeButton.find('span.able-clipped').text(volumeLabel); - } - else if (this.iconType === 'image') { - volumeImg = this.imgPath + 'volume-' + volumeName + '.png'; - this.$volumeButton.find('img').attr('src',volumeImg); - } - else if (this.iconType === 'svg') { - if (volumeName !== 'mute') { - volumeName = 'volume-' + volumeName; - } - newSvgData = this.getSvgData(volumeName); - this.$volumeButton.find('svg').attr('viewBox',newSvgData[0]); - this.$volumeButton.find('path').attr('d',newSvgData[1]); - } + this.getIcon( this.$volumeButton, 'volume-' + volumeName ); + this.$volumeButton.attr( 'aria-label', volumeLabel ); }; AblePlayer.prototype.handleVolumeButtonClick = function() { if (this.$volumeSlider.is(':visible')) { - this.hideVolumePopup(); - } - else { + this.hideVolumePopup(); + } else { this.showVolumePopup(); } - }; - - AblePlayer.prototype.handleVolumeKeystroke = function(keycode) { - - // keycode is an ASCII key code 49-57 (numeric keys 1-9), - // keyboard shortcuts for changing volume - - var volume; - - if (keycode >= 49 && keycode <= 57) { - volume = keycode - 48; - } - else { - return false; - } + }; + AblePlayer.prototype.handleVolumeKeystroke = function(volume) { + // keyboard shortcuts for changing volume if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); } - }; + }; AblePlayer.prototype.handleVolumeChange = function(volume) { - // handle volume change using the volume input slider + // handle volume change using the volume input slider if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); @@ -7301,8 +6371,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.isMuted()) { this.setMute(false); - } - else { + } else { this.setMute(true); } }; @@ -7334,8 +6403,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { return this.media.muted; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { return this.youTubePlayer.isMuted(); } }; @@ -7347,8 +6415,7 @@ if (typeof module !== "undefined" && module.exports) { // save current volume so it can be restored after unmute this.lastVolume = this.volume; this.volume = 0; - } - else { // restore to previous volume + } else { // restore to previous volume if (typeof this.lastVolume !== 'undefined') { this.volume = this.lastVolume; } @@ -7356,16 +6423,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.media.muted = mute; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (mute) { this.youTubePlayer.mute(); - } - else { + } else { this.youTubePlayer.unMute(); } } - this.setVolume(this.volume); + this.setVolume(this.volume); this.refreshVolumeHelp(this.volume); this.refreshVolumeButton(this.volume); }; @@ -7375,29 +6440,22 @@ if (typeof module !== "undefined" && module.exports) { // volume is 1 to 10 // convert as needed depending on player - var newVolume; - + var newVolume; + this.syncSignVideo( {'volume' : 0 } ); if (this.player === 'html5') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.media.volume = newVolume; - - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.volume = 0; // always mute - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // volume is 0 to 100 - newVolume = volume * 10; + newVolume = volume * 10; this.youTubePlayer.setVolume(newVolume); this.volume = volume; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.vimeoPlayer.setVolume(newVolume).then(function() { // setVolume finished. - // could do something here // successful completion also fires a 'volumechange' event (see event.js) }); } @@ -7410,10 +6468,9 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { // uses 0 to 1 scale return this.media.volume * 10; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // uses 0 to 100 scale - if (this.youTubePlayerReady) { + if (this.youTubePlayerReady) { return this.youTubePlayer.getVolume() / 10; } } @@ -7430,14 +6487,11 @@ if (typeof module !== "undefined" && module.exports) { // returns 'mute','soft','medium', or 'loud' depending on volume level if (volume == 0) { return 'mute'; - } - else if (volume == 10) { + } else if (volume == 10) { return 'loud'; - } - else if (volume < 5) { + } else if (volume < 5) { return 'soft'; - } - else { + } else { return 'medium'; } }; @@ -7448,70 +6502,57 @@ if (typeof module !== "undefined" && module.exports) { var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"; // Based on the incredible accessible modal dialog. - window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, isModal, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) { + window.AccessibleDialog = function( modalDiv, $returnElement, title, closeButtonLabel) { this.title = title; this.closeButtonLabel = closeButtonLabel; this.focusedElementBeforeModal = $returnElement; - this.escapeHook = escapeHook; this.baseId = $(modalDiv).attr('id') \|\| Math.floor(Math.random() * 1000000000).toString(); var thisObj = this; var modal = modalDiv; this.modal = modal; - modal.css({ - 'width': width \|\| '50%' - }); + modal.addClass('able-modal-dialog'); - if (!fullscreen) { - var closeButton = $('<button>',{ - 'class': 'modalCloseButton', - 'title': thisObj.closeButtonLabel, - 'aria-label': thisObj.closeButtonLabel - }).text('X'); - closeButton.keydown(function (e) { - // Space key down - if (e.which === 32) { - thisObj.hide(); - } - }).click(function () { + var closeButton = $('<button>',{ + 'class': 'modalCloseButton', + 'title': thisObj.closeButtonLabel, + 'aria-label': thisObj.closeButtonLabel + }).text('×'); + closeButton.on( 'keydown', function (e) { + if (e.key === ' ') { thisObj.hide(); - }); + } + }).on( 'click', function () { + thisObj.hide(); + }); - var titleH1 = $('<h1></h1>'); - titleH1.attr('id', 'modalTitle-' + this.baseId); - titleH1.css('text-align', 'center'); - titleH1.text(title); - this.titleH1 = titleH1; + var titleH1 = $('<h1></h1>'); + titleH1.attr('id', 'modalTitle-' + this.baseId); + titleH1.text(title); + this.titleH1 = titleH1; - modal.attr({ - 'aria-labelledby': 'modalTitle-' + this.baseId, - }); - modal.prepend(titleH1); - modal.prepend(closeButton); - } + modal.attr({ + 'aria-labelledby': 'modalTitle-' + this.baseId, + }); + var modalHeader = $( '<div>', { + 'class': 'able-modal-header' + }); + modalHeader.prepend(titleH1); + modalHeader.prepend(closeButton); + modal.prepend(modalHeader); modal.attr({ 'aria-hidden': 'true', - 'role': dialogRole, + 'role': 'dialog', + 'aria-modal': 'true' }); - if (isModal) { - modal.attr('aria-modal','true'); - } - modal.keydown(function (e) { - // Escape - if (e.which === 27) { - if (thisObj.escapeHook) { - thisObj.escapeHook(e, this); - } - else { - thisObj.hide(); - e.preventDefault(); - } - } - // Tab - else if (e.which === 9) { + modal.on( 'keydown', function (e) { + if (e.key === 'Escape') { + thisObj.hide(); + e.preventDefault(); + } else if (e.key === 'Tab') { // Manually loop tab navigation inside the modal. var parts = modal.find(''); var focusable = parts.filter(focusableElementsSelector).filter(':visible'); @@ -7525,13 +6566,12 @@ if (typeof module !== "undefined" && module.exports) { if (e.shiftKey) { // If backwards from first element, go to last. if (currentIndex === 0) { - focusable.get(focusable.length - 1).focus(); + focusable.get(focusable.length - 1).trigger('focus'); e.preventDefault(); } - } - else { + } else { if (currentIndex === focusable.length - 1) { - focusable.get(0).focus(); + focusable.get(0).trigger('focus'); e.preventDefault(); } } @@ -7539,7 +6579,10 @@ if (typeof module !== "undefined" && module.exports) { e.stopPropagation(); }); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + if ( $( 'body' ).hasClass( 'able-modal-active' ) ) { + $( 'body > ') .not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); + } }; AccessibleDialog.prototype.show = function () { @@ -7555,10 +6598,12 @@ if (typeof module !== "undefined" && module.exports) { // Keep from moving focus out of dialog when clicking outside of it. overlay.on('mousedown.accessibleModal', function (e) { e.preventDefault(); + thisObj.hide(); }); } - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('inert', true); + $( 'body' ).addClass( 'able-modal-active' ); this.overlay.css('display', 'block'); this.modal.css('display', 'block'); @@ -7574,7 +6619,7 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; setTimeout(function () { // set focus on the first focusable element - thisObj.modal.find('button.modalCloseButton').first().focus(); + thisObj.modal.find('button.modalCloseButton').first().trigger('focus'); }, 300); }; @@ -7584,9 +6629,10 @@ if (typeof module !== "undefined" && module.exports) { } this.modal.css('display', 'none'); this.modal.attr('aria-hidden', 'true'); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); - this.focusedElementBeforeModal.focus(); + this.focusedElementBeforeModal.trigger('focus'); }; AccessibleDialog.prototype.getInputs = function () { @@ -7707,7 +6753,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getSecondsFromColonTime = function (timeStr) { // Converts string of form hh:mm:ss to seconds - var timeParts, hours, minutes, seconds, newTime; + var timeParts, hours, minutes, seconds; timeParts = timeStr.split(":"); if (timeParts.length === 3) { @@ -7735,6 +6781,35 @@ if (typeof module !== "undefined" && module.exports) { return Number(Math.floor(value + "e" + decimals) + "e-" + decimals); }; + AblePlayer.prototype.defer = function() { + const self = this; + const promise = new Promise((resolve, reject) => { + self.resolve = resolve; + self.reject = reject; + self.promise = () => promise; + }); + } + + AblePlayer.prototype.getScript = function( source, callback ) { + var script = document.createElement('script'); + var prior = document.getElementsByTagName('script')[0]; + script.async = 1; + + script.onload = script.onreadystatechange = function( _, isAbort ) { + if ( isAbort \|\| !script.readyState \|\| /loaded\|complete/.test(script.readyState) ) { + script.onload = script.onreadystatechange = null; + script = undefined; + + if ( !isAbort && callback ) { + setTimeout(callback, 0); + } + } + }; + + script.src = source; + prior.parentNode.insertBefore(script, prior); + } + AblePlayer.prototype.hasAttr = function (object, attribute) { // surprisingly, there is no hasAttr() function in Jquery as of 3.2.1 // return true if object has attribute; otherwise false @@ -7752,17 +6827,6 @@ if (typeof module !== "undefined" && module.exports) { } }; - Number.isInteger = - Number.isInteger \|\| - function (value) { - // polyfill for IE11, which doesn't otherwise support Number.isInteger - // https://stackoverflow.com/a/31720368/744281 - return ( - typeof value === "number" && - isFinite(value) && - Math.floor(value) === value - ); - }; })(jQuery); (function ($) { @@ -7775,12 +6839,12 @@ if (typeof module !== "undefined" && module.exports) { // toggles the Description button or changes a description-related preference // The following variables are applicable to delivery of description: - // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) + // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) // prefDesc == 1 if user wants description (i.e., Description button is on); else 0 // prefDescPause == 1 to pause video when description starts; else 0 // prefDescVisible == 1 to visibly show text-based description area; else 0 // prefDescMethod == either 'video' or 'text' (as of v4.0.10, prefDescMethod is always 'video') - // descMethod is the format actually used ('video' or 'text'), regardless of user preference + // descMethod is the format actually used ('video' or 'text'), regardless of user preference // hasOpenDesc == true if a described version of video is available via data-desc-src attribute // hasClosedDesc == true if a description text track is available // descOn == true if description of either type is on @@ -7789,12 +6853,12 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - if (this.mediaType === 'audio') { - deferred.resolve(); + if (this.mediaType === 'audio') { + deferred.resolve(); } // check to see if there's an open-described version of this video @@ -7803,106 +6867,78 @@ if (typeof module !== "undefined" && module.exports) { this.descFile = this.$sources.first().attr('data-desc-src'); if (typeof this.descFile !== 'undefined') { this.hasOpenDesc = true; - } - else { + } else { // there's no open-described version via data-desc-src, // but what about data-youtube-desc-src or data-vimeo-desc-src? - // if these exist, they would have been defined earlier - if (this.youTubeDescId \|\| this.vimeoDescId) { - this.hasOpenDesc = true; - } - else { // there are no open-described versions from any source - this.hasOpenDesc = false; - } + // if these exist, they would have been defined earlier + this.hasOpenDesc = (this.youTubeDescId \|\| this.vimeoDescId) ? true : false; } // Set this.descMethod based on media availability & user preferences + // no description is available for this video + this.descMethod = null; if (this.hasOpenDesc && this.hasClosedDesc) { - // both formats are available. User gets their preference. - if (this.prefDescMethod) { - this.descMethod = this.prefDescMethod; - } - else { - // user has no preference. Video is default. - this.descMethod = 'video'; - } - } - else if (this.hasOpenDesc) { + // both formats are available. User gets their preference. + this.descMethod = (this.prefDescMethod) ? this.prefDescMethod : 'video'; + } else if (this.hasOpenDesc) { this.descMethod = 'video'; - } - else if (this.hasClosedDesc) { + } else if (this.hasClosedDesc) { this.descMethod = 'text'; } - else { - // no description is available for this video - this.descMethod = null; - } // Set the default state of descriptions - if (this.descMethod) { - if (this.prefDesc === 1) { - this.descOn = true; - } - else if (this.prefDesc === 0) { - this.descOn = false; - } - else { - // user has no prefs. Use default state. - if (this.defaultStateDescriptions === 1) { - this.descOn = true; - } - else { - this.descOn = false; - } + this.descOn = false; + if (this.descMethod) { + if (this.prefDesc === 1) { + this.descOn = true; + } else if (this.prefDesc === 0) { + this.descOn = false; + } else { + // user has no prefs. Use default state. + this.descOn = (this.defaultStateDescriptions === 1) ? true : false; } } - else { - this.descOn = false; - } - if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc && this.descMethod === 'text') { + + // If a video has text audio descriptions, inject the description area. + if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc ) { this.injectTextDescriptionArea(); } if (this.descOn) { - if (this.descMethod === 'video') { - if (!this.usingDescribedVersion()) { - // switched from non-described to described version - this.swapDescription(); - } + if (this.descMethod === 'video' && !this.usingDescribedVersion() ) { + // switched from non-described to described version + this.swapDescription(); } if (this.hasClosedDesc) { if (this.prefDescVisible) { // make description text visible if (typeof this.$descDiv !== 'undefined') { this.$descDiv.show(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } - } - else { + } else { // keep it visible to screen readers, but hide it visibly if (typeof this.$descDiv !== 'undefined') { - this.$descDiv.addClass('able-clipped'); + this.$descDiv.addClass('able-offscreen'); } } } - } - else { // description is off. + } else { // description is off. if (this.descMethod === 'video') { // user has turned off described version of video if (this.usingDescribedVersion()) { // user was using the described verion. Swap for non-described version this.swapDescription(); } - } - else if (this.descMethod === 'text') { // user has turned off text description + } else if (this.descMethod === 'text') { // user has turned off text description // hide description div from everyone, including screen reader users if (typeof this.$descDiv !== 'undefined') { this.$descDiv.hide(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } } } deferred.resolve(); - return promise; + return promise; }; AblePlayer.prototype.usingDescribedVersion = function () { @@ -7911,116 +6947,79 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'youtube') { return (this.activeYouTubeId === this.youTubeDescId); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { return (this.activeVimeoId === this.vimeoDescId); - } - else { + } else { return (this.$sources.first().attr('data-desc-src') === this.$sources.first().attr('src')); } }; - AblePlayer.prototype.initSpeech = function (context) { - - // Some browsers &/or operating systems require a user-initiated click - // before this.synth.getVoices() will work. As of Nov 2022: - // Chrome requires a click before synth.getVoices() will work - // iOS requires a click before synth.speak() will work - // A hack to address this: Listen for ANY click, then play an inaudible utterance - // to intitiate speech synthesis - // https://stackoverflow.com/questions/32193704/js-speech-synthesis-issue-on-ios - // This function does that, and sets this.speechEnabled - // It's called with either of these contexts: - // 'init' - player is being initialized - // 'play' - user has clicked play - // 'prefs' - user has clicked prefs button - // 'desc' - it's time to announce a description! - - var thisObj = this; - - if (this.speechEnabled === null) { - - if (typeof this.synth !== 'undefined') { - // cancel any previous synth instance and reinitialize - this.synth.cancel(); - } +/* + * Initializes speech synthesis capabilities for the player. + * This method addresses browser and OS limitations that require user interaction + * before speech synthesis functions become available. It handles different contexts + * like initialization, playing media, accessing preferences, or announcing descriptions. + * @param {string} context - The context in which the function is called ('init', 'play', 'prefs', 'desc'). + / + AblePlayer.prototype.initSpeech = function (context) { + var thisObj = this; - if (window.speechSynthesis) { + // Function to attempt enabling speech synthesis + function attemptEnableSpeech() { + var greeting = new SpeechSynthesisUtterance("\x20"); + greeting.onend = function () { + thisObj.getBrowserVoices(); + if ( + (Array.isArray(thisObj.descVoices) && thisObj.descVoices.length) \|\| + context !== "init" + ) { + thisObj.speechEnabled = true; + } + }; + thisObj.synth.speak(greeting); + } - // browser supports speech synthesis + // Function to handle the initial click and enable speech synthesis + function handleInitialClick() { + attemptEnableSpeech(); + // Once the utterance starts, remove this specific click event listener + // Ensures the event handler only runs once and cleans up after itself + $(document).off("click", handleInitialClick); + } + if (this.speechEnabled === null) { + if (window.speechSynthesis) { + // Browser supports speech synthesis this.synth = window.speechSynthesis; + this.synth.cancel(); // Cancel any ongoing speech synthesis - if (context === 'init') { - // handle a click on anything, in case the user - // clicks something before they click 'play' or 'prefs' buttons - // that would allow us to init speech before it's needed - $(document).on('click',function() { - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - } - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; - }); - - // go ahead and call get browser voices in case it might work, - // for browsers that don't require a click - this.getBrowserVoices(); - if (this.descVoices.length) { - this.speechEnabled = true; - } - } - else { // context is either 'play' or 'prefs' or 'desc' - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - }; - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; + if (context === "init") { + // Attempt to enable speech synthesis directly for browsers that don't require a click + attemptEnableSpeech(); + // For initial setup, require a user click to enable speech synthesis + // Scoping to a particular handler to avoid conflicts with other click events + $(document).on("click", handleInitialClick); + } else { + // For other contexts, attempt to enable speech synthesis directly + attemptEnableSpeech(); } - } - else { - // browser does not support speech synthesis - this.speechEnabled = false; + } else { + // Browser does not support speech synthesis + this.speechEnabled = false; } } - }; + }; AblePlayer.prototype.getBrowserVoices = function () { - - // define this.descVoices array - // includes only languages that match the language of the captions or player + + // define this.descVoices array + // includes only languages that match the language of the captions or player var voices, descLangs, voiceLang, preferredLang; - if (this.captionLang) { - preferredLang = this.captionLang.substring(0,2).toLowerCase(); - } - else { - preferredLang = this.lang.substring(0,2).toLowerCase(); - } - this.descVoices = []; + preferredLang = (this.captionLang) ? this.captionLang.substring(0,2).toLowerCase() : this.lang.substring(0,2).toLowerCase(); + + this.descVoices = []; voices = this.synth.getVoices(); descLangs = this.getDescriptionLangs(); if (voices.length > 0) { @@ -8030,9 +7029,9 @@ if (typeof module !== "undefined" && module.exports) { // match only the first 2 characters of the lang code voiceLang = voices[i].lang.substring(0,2).toLowerCase(); if (voiceLang === preferredLang && (descLangs.indexOf(voiceLang) !== -1)) { - // this voice matches preferredLang + // this voice matches preferredLang // AND there's a matching description track in this language - // Add this voice to final array + // Add this voice to final array this.descVoices.push(voices[i]); } } @@ -8063,51 +7062,44 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setDescriptionVoice = function () { - // set description voice on player init, or when user changes caption language - // Voice is determined in the following order of precedence: - // 1. User's preferred voice for this language, saved in a cookie + // set description voice on player init, or when user changes caption language + // Voice is determined in the following order of precedence: + // 1. User's preferred voice for this language, saved in preferences // 2. The first available voice in the array of available voices for this browser in this language - var cookie, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; - cookie = this.getCookie(); - if (typeof cookie.voices !== 'undefined') { - prefDescVoice = this.getPrefDescVoice(); - } - else { - prefDescVoice = null; - } - + var preferences, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; + preferences = this.getPref(); + prefDescVoice = (typeof preferences.voices !== 'undefined') ? this.getPrefDescVoice() : null; + this.getBrowserVoices(); this.rebuildDescPrefsForm(); - if (this.selectedDescriptions) { + if (this.selectedDescriptions) { descLang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - descLang = this.captionLang; - } - else { - descLang = this.lang; + } else if (this.captionLang) { + descLang = this.captionLang; + } else { + descLang = this.lang; } if (this.synth) { voices = this.synth.getVoices(); if (voices.length > 0) { - if (prefDescVoice) { - // select the language that matches prefDescVoice, if it's available - prefVoiceFound = false; + if (prefDescVoice) { + // select the language that matches prefDescVoice, if it's available + prefVoiceFound = false; for (var i=0; i<voices.length; i++) { // first, be sure voice is the correct language if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { - if (voices[i].name === prefDescVoice) { - descVoice = voices[i].name; - prefVoiceFound = true; + if (voices[i].name === prefDescVoice) { + descVoice = voices[i].name; + prefVoiceFound = true; break; } } } } - if (!prefVoiceFound) { + if (!prefVoiceFound) { // select the first language that matches the first 2 characters of the lang code for (var i=0; i<voices.length; i++) { if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { @@ -8121,10 +7113,9 @@ if (typeof module !== "undefined" && module.exports) { this.prefDescVoiceLang = descLang; // select this voice in the Description Prefs dialog if (this.$voiceSelectField) { - var selectedOption = this.$voiceSelectField.find('option[value="' + this.prefDescVoice + '"]'); this.$voiceSelectField.val(this.prefDescVoice); } - this.updateCookie('voice'); + this.updatePreferences('voice'); } } }; @@ -8138,70 +7129,66 @@ if (typeof module !== "undefined" && module.exports) { // 2. User is toggling description // (playerCreated == true) - var thisObj, i, origSrc, descSrc, srcType, newSource; + var thisObj, i, origSrc, descSrc; thisObj = this; - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; - // get element that has focus at the time swap is initiated - // after player is rebuilt, focus will return to that same element + // get element that has focus at the time swap is initiated + // after player is rebuilt, focus will return to that same element // (if it exists) - this.$focusedElement = $(':focus'); + this.$focusedElement = $(':focus'); + this.activeMedia = this.mediaId; // get current time of current source, and attempt to start new video at the same time - // whether this is possible will be determined after the new media source has loaded - // see onMediaNewSourceLoad() - if (this.elapsed > 0) { - this.swapTime = this.elapsed; - } - else { - this.swapTime = 0; + // whether this is possible will be determined after the new media source has loaded + // see onMediaNewSourceLoad() + if (this.elapsed > 0) { + this.swapTime = this.elapsed; + } else { + this.swapTime = 0; } - if (this.duration > 0) { - this.prevDuration = this.duration; + if (this.duration > 0) { + this.prevDuration = this.duration; } - // Capture current playback state, so media can resume after source is swapped - if (!this.okToPlay) { - this.okToPlay = this.playing; + // Capture current playback state, so media can resume after source is swapped + if (!this.okToPlay) { + this.okToPlay = this.playing; } if (this.descOn) { - // user has requested the described version - this.showAlert(this.tt.alertDescribedVersion); - } - else { - // user has requested the non-described version - this.showAlert(this.tt.alertNonDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); + } else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); } if (this.player === 'html5') { this.swappingSrc = true; - this.paused = true; + this.paused = true; if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-orig-src - origSrc = this.$sources[i].getAttribute('data-orig-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-orig-src') ); srcType = this.$sources[i].getAttribute('type'); if (origSrc) { this.$sources[i].setAttribute('src',origSrc); } - } - } - else { + } + } else { // the non-described version is currently playing. Swap to described. for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-desc-src (if one exists) // then store original source in a new data-orig-src attribute - origSrc = this.$sources[i].getAttribute('src'); - descSrc = this.$sources[i].getAttribute('data-desc-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('src') ); + descSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-desc-src') ); srcType = this.$sources[i].getAttribute('type'); if (descSrc) { this.$sources[i].setAttribute('src',descSrc); @@ -8210,88 +7197,77 @@ if (typeof module !== "undefined" && module.exports) { } } - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - if (this.playerCreated) { - // delete old player, then recreate it with new source & tracks - this.deletePlayer('swap-desc-html'); - this.recreatePlayer().then(function() { - if (!thisObj.loadingMedia) { + return; + } + if (this.playerCreated) { + // delete old player, then recreate it with new source & tracks + this.deletePlayer('swap-desc-html'); + this.recreatePlayer().then(function() { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } }); - } - else { + } else { // player is in the process of being created - // no need to recreate it - } - } - else if (this.player === 'youtube') { - - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeYouTubeId = this.youTubeId; - } - else { - // the non-described version is currently playing. Swap to described. - this.activeYouTubeId = this.youTubeDescId; + // no need to recreate it } + } else if (this.player === 'youtube') { + + // if the described version is currently playing, swap to non-described + this.activeYouTubeId = (this.usingDescribedVersion()) ? this.youTubeId : this.youTubeDescId; + if (typeof this.youTubePlayer !== 'undefined') { - thisObj.swappingSrc = true; + thisObj.swappingSrc = true; if (thisObj.playing) { // loadVideoById() loads and immediately plays the new video at swapTime thisObj.youTubePlayer.loadVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - else { + } else { // cueVideoById() loads the new video and seeks to swapTime, but does not play thisObj.youTubePlayer.cueVideoById(thisObj.activeYouTubeId,thisObj.swapTime); } } - if (this.playerCreated) { - this.deletePlayer('swap-desc-youtube'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-youtube'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { - // nothing to do here - // next steps occur when youtube onReady event fires - // see youtube.js > finalizeYoutubeInit() - }); - } - else if (this.player === 'vimeo') { + return; + } + this.recreatePlayer().then(function() { + // nothing to do here + // next steps occur when youtube onReady event fires + // see youtube.js > finalizeYoutubeInit() + }); + } else if (this.player === 'vimeo') { if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described this.activeVimeoId = this.vimeoId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); + } else { // the non-described version is currently playing. Swap to described. this.activeVimeoId = this.vimeoDescId; - this.showAlert(this.tt.alertDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); } - if (this.playerCreated) { - this.deletePlayer('swap-desc-vimeo'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-vimeo'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { + return; + } + this.recreatePlayer().then(function() { // load the new video source thisObj.vimeoPlayer.loadVideo(thisObj.activeVimeoId).then(function() { if (thisObj.playing) { // video was playing when user requested an alternative version // seek to swapTime and continue playback (playback happens automatically) thisObj.vimeoPlayer.setCurrentTime(thisObj.swapTime); - } - else { + } else { // Vimeo autostarts immediately after video loads // The "Described" button should not trigger playback, so stop this before the user notices. thisObj.vimeoPlayer.pause(); @@ -8302,36 +7278,30 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.showDescription = function(now) { - - if (!this.hasClosedDesc \|\| this.swappingSrc \|\| !this.descOn \|\| this.descMethod === 'video') { + if (!this.playing \|\| !this.hasClosedDesc \|\| this.swappingSrc \|\| !this.descOn \|\| ( this.descMethod === 'video' && !this.prefDescVisible ) ) { return; } - var thisObj, i, cues, d, thisDescription, descText, msg; + var thisObj, cues, d, thisDescription, descText; thisObj = this; var flattenComponentForDescription = function (component) { var result = []; if (component.type === 'string') { result.push(component.value); - } - else { + } else { for (var i = 0; i < component.children.length; i++) { result.push(flattenComponentForDescription(component.children[i])); } } return result.join(''); }; - + cues = []; if (this.selectedDescriptions) { cues = this.selectedDescriptions.cues; - } - else if (this.descriptions.length >= 1) { + } else if (this.descriptions.length >= 1) { cues = this.descriptions[0].cues; } - else { - cues = []; - } for (d = 0; d < cues.length; d++) { if ((cues[d].start <= now) && (cues[d].end > now)) { thisDescription = d; @@ -8340,35 +7310,35 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisDescription !== 'undefined') { if (this.currentDescription !== thisDescription) { - // temporarily remove aria-live from $status in order to prevent description from being interrupted + // temporarily remove aria-live from $status to prevent description from being interrupted this.$status.removeAttr('aria-live'); descText = flattenComponentForDescription(cues[thisDescription].components); - if (this.descReader === 'screenreader') { + if (this.descReader === 'screenreader') { // load the new description into the container div for screen readers to read this.$descDiv.html(descText); - } - else if (this.speechEnabled) { - // use browser's built-in speech synthesis - this.announceDescriptionText('description',descText); + } else if (this.speechEnabled) { + if ( 'video' !== this.descMethod ) { + // use browser's built-in speech synthesis + this.announceDescriptionText('description',descText); + } if (this.prefDescVisible) { // write description to the screen for sighted users // but remove ARIA attributes since it isn't intended to be read by screen readers this.$descDiv.html(descText).removeAttr('aria-live aria-atomic'); } - } - else { + } else { // browser does not support speech synthesis // load the new description into the container div for screen readers to read this.$descDiv.html(descText); } + // Only pause video if not using a described video. if (this.prefDescPause && this.descMethod === 'text') { this.pauseMedia(); this.pausedForDescription = true; } this.currentDescription = thisDescription; } - } - else { + } else { this.$descDiv.html(''); this.currentDescription = -1; // restore aria-live to $status @@ -8376,42 +7346,33 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - - // called when user changed playback rate - // adjust rate of audio description to match + AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - var speechRate; + // called when user changed playback rate + // adjust rate of audio description to match + var speechRate; - if (rate === 0.5) { - speechRate = 0.7; // option 1 in prefs menu - } - else if (rate === 0.75) { - speechRate = 0.8; // option 2 in prefs menu - } - else if (rate === 1.0) { + if (rate === 0.5) { + speechRate = 0.7; // option 1 in prefs menu + } else if (rate === 0.75) { + speechRate = 0.8; // option 2 in prefs menu + } else if (rate === 1.0) { speechRate = 1; // option 4 in prefs menu (normal speech, default) - } - else if (rate === 1.25) { + } else if (rate === 1.25) { speechRate = 1.1; // option 5 in prefs menu - } - else if (rate === 1.5) { - speechRate = 1.2; // option 6 in prefs menu - } - else if (rate === 1.75) { - speechRate = 1.5; // option 7 in prefs menu - } - else if (rate === 2.0) { + } else if (rate === 1.5) { + speechRate = 1.2; // option 6 in prefs menu + } else if (rate === 1.75) { + speechRate = 1.5; // option 7 in prefs menu + } else if (rate === 2.0) { speechRate = 2; // option 8 in prefs menu (fast) - } - else if (rate === 2.25) { + } else if (rate === 2.25) { speechRate = 2.5; // option 9 in prefs menu (very fast) - } - else if (rate >= 2.5) { - speechRate = 3; // option 10 in prefs menu (super fast) + } else if (rate >= 2.5) { + speechRate = 3; // option 10 in prefs menu (super fast) } this.prefDescRate = speechRate; - }; + }; AblePlayer.prototype.announceDescriptionText = function(context, text) { @@ -8441,10 +7402,10 @@ if (typeof module !== "undefined" && module.exports) { // and typically requires a computer reboot to make right again. // This has been observed frequently in macOS Big Sur, but also in Windows 10 // To ignore user's voice preferences and always use the first voice, set the following var to true - // This is for testing only; not recommended for production - // unless the voice select field is also removed from the Prefs dialog + // This is for testing only; not recommended for production + // unless the voice select field is also removed from the Prefs dialog var useFirstVoice = false; - + if (!this.speechEnabled) { // voices array failed to load the first time. Try again this.initSpeech('desc'); @@ -8456,8 +7417,7 @@ if (typeof module !== "undefined" && module.exports) { pitch = $('#' + this.mediaId + '_prefDescPitch').val(); rate = $('#' + this.mediaId + '_prefDescRate').val(); volume = $('#' + this.mediaId + '_prefDescVolume').val(); - } - else { + } else { // get settings from global prefs voiceName = this.prefDescVoice; pitch = this.prefDescPitch; @@ -8470,8 +7430,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.descVoices.length > 0) { if (useFirstVoice) { voice = this.descVoices[0]; - } - else if (voiceName) { + } else if (voiceName) { // get the voice that matches user's preferred voiceName for (i = 0; i < this.descVoices.length; i++) { if (this.descVoices[i].name == voiceName) { @@ -8485,63 +7444,62 @@ if (typeof module !== "undefined" && module.exports) { // use the first voice in the array voice = this.descVoices[0]; } - utterance = new SpeechSynthesisUtterance(); - utterance.voice = voice; - utterance.voiceURI = 'native'; - utterance.volume = volume; - utterance.rate = rate; - utterance.pitch = pitch; - utterance.text = text; - // TODO: Consider the best language for the utterance: - // language of the web page? (this.lang) - // language of the WebVTT description track? - // language of the user's chosen voice? - // If there's a mismatch between any of these, the description will likely be unintelligible - utterance.lang = this.lang; - utterance.onstart = function(e) { - // utterance has started - }; - utterance.onpause = function(e) { - // utterance has paused - }; - utterance.onend = function(e) { - // utterance has ended - this.speakingDescription = false; - timeElapsed = e.elapsedTime; - // As of Firefox 95, e.elapsedTime is expressed in seconds - // Other browsers (tested in Chrome & Edge) express this in milliseconds - // Assume no utterance will require over 100 seconds to express... - if (timeElapsed > 100) { - // time is likely expressed in milliseconds - secondsElapsed = (e.elapsedTime/1000).toFixed(2); - } - else { - // time is likely already expressed in seconds; just need to round it - secondsElapsed = (e.elapsedTime).toFixed(2); - } - if (this.debug) { - - } - if (context === 'description') { - if (thisObj.prefDescPause) { - if (thisObj.pausedForDescription) { - thisObj.playMedia(); - this.pausedForDescription = false; - } - } + } + } else { + voice = null; + } + utterance = new SpeechSynthesisUtterance(); + if (voice) { + utterance.voice = voice; + } + utterance.voiceURI = 'native'; + utterance.volume = volume; + utterance.rate = rate; + utterance.pitch = pitch; + utterance.text = text; + // TODO: Consider the best language for the utterance: + // language of the web page? (this.lang) + // language of the WebVTT description track? + // language of the user's chosen voice? + // If there's a mismatch between any of these, the description will likely be unintelligible + utterance.lang = this.lang; + utterance.onstart = function(e) { + // utterance has started + }; + utterance.onpause = function(e) { + // utterance has paused + }; + utterance.onend = function(e) { + // utterance has ended + this.speakingDescription = false; + timeElapsed = e.elapsedTime; + // As of Firefox 95, e.elapsedTime is expressed in seconds + // Other browsers (tested in Chrome & Edge) express this in milliseconds + // Assume no utterance will require over 100 seconds to express... + // If a large value, time is likely expressed in milliseconds. + secondsElapsed = (timeElapsed > 100) ? (e.elapsedTime/1000).toFixed(2) : (e.elapsedTime).toFixed(2); + + if (this.debug) { + + } + if (context === 'description') { + if (thisObj.prefDescPause) { + if (thisObj.pausedForDescription) { + thisObj.playMedia(); + this.pausedForDescription = false; } - }; - utterance.onerror = function(e) { - // handle error - - }; - if (this.synth.paused) { - this.synth.resume(); } - this.synth.speak(utterance); - this.speakingDescription = true; } + }; + utterance.onerror = function(e) { + // handle error + + }; + if (this.synth.paused) { + this.synth.resume(); } + this.synth.speak(utterance); + this.speakingDescription = true; }; })(jQuery); @@ -8550,7 +7508,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isIOS = function(version) { - // return true if this is IOS + // return true if this is iOS // if version is provided check for a particular version var userAgent, iOS; @@ -8562,61 +7520,48 @@ if (typeof module !== "undefined" && module.exports) { if (userAgent.indexOf('os ' + version) !== -1) { // this is the target version of iOS return true; - } - else { + } else { return false; } - } - else { + } else { // no version was specified return true; } - } - else { - // this is not IOS + } else { + // this is not iOS return false; } }; AblePlayer.prototype.browserSupportsVolume = function() { - // To test whether the browser supports changing the volume, - // create a new audio element and try setting the volume to something other than 1. - // Then, retrieve the current setting to see if it preserved it. + // To test whether the browser supports changing the volume, + // create a new audio element and try setting the volume to something other than 1. + // Then, retrieve the current setting to see if it preserved it. + // This doesn't work in iOS by design: https://developer.apple.com/documentation/avfoundation/avplayer/volume - // Unfortunately, this doesn't work in iOS. In 2022, our tests yield the same results as reported here: - // https://stackoverflow.com/questions/72861253/how-do-i-detect-if-a-browser-does-not-support-changing-html-audio-volume + var audio, testVolume; - // So, unfortunately we have to resort to sniffing for iOS - // before testing for support in other browsers - var audio, testVolume; - - if (this.isIOS()) { - return false; - } + if (this.isIOS()) { + return false; + } - testVolume = 0.9; // any value between 0.1 and 0.9 - audio = new Audio(); - audio.volume = testVolume; - if (audio.volume === testVolume) { - return true; - } - else { - return false; - } + testVolume = 0.9; // any value between 0.1 and 0.9 + audio = new Audio(); + audio.volume = testVolume; + + return ( audio.volume === testVolume ); }; AblePlayer.prototype.nativeFullscreenSupported = function () { - return document.fullscreenEnabled \|\| - document.webkitFullscreenEnabled \|\| - document.mozFullscreenEnabled \|\| - document.msFullscreenEnabled; + return document.fullscreenEnabled \|\| document.webkitFullscreenEnabled; }; })(jQuery); (function ($) { + AblePlayer.prototype.seekTo = function (newTime) { var thisObj = this; @@ -8629,10 +7574,12 @@ if (typeof module !== "undefined" && module.exports) { this.seeking = true; this.liveUpdatePending = true; - if (this.speakingDescription) { - this.synth.cancel(); + if (this.speakingDescription) { + this.synth.cancel(); } + this.syncSignVideo( {'time' : this.startTime } ); + if (this.player === 'html5') { var seekable; @@ -8643,23 +7590,19 @@ if (typeof module !== "undefined" && module.exports) { // ok to seek to startTime // canplaythrough will be triggered when seeking is complete // this.seeking will be set to false at that point - this.media.currentTime = this.startTime; - this.seekStatus = 'complete'; - if (this.hasSignLanguage && this.signVideo) { - // keep sign languge video in sync - this.signVideo.currentTime = this.startTime; - } + this.media.currentTime = this.startTime; + this.seekStatus = 'complete'; + this.syncSignVideo( { 'time' : this.startTime } ); } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.seekTo(newTime,true); if (newTime > 0) { if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } } - } - else if (this.player === 'vimeo') { + this.syncSignVideo( {'time' : newTime } ); + } else if (this.player === 'vimeo') { this.vimeoPlayer.setCurrentTime(newTime).then(function() { // seek finished. // successful completion also fires a 'seeked' event (see event.js) @@ -8689,15 +7632,14 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj, mediaTimes; mediaTimes = {}; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (typeof duration !== 'undefined' && typeof elapsed !== 'undefined') { mediaTimes['duration'] = duration; mediaTimes['elapsed'] = elapsed; deferred.resolve(mediaTimes); - } - else { + } else { this.getDuration().then(function(duration) { mediaTimes['duration'] = thisObj.roundDown(duration,6); thisObj.getElapsed().then(function(elapsed) { @@ -8715,7 +7657,7 @@ if (typeof module !== "undefined" && module.exports) { // function is called by getMediaTimes, and return value is sanitized there var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -8724,39 +7666,32 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getDuration().then(function(duration) { if (duration === undefined \|\| isNaN(duration) \|\| duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var duration; if (this.player === 'html5') { - duration = this.media.duration; - } - else if (this.player === 'youtube') { + duration = this.media.duration; + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { - if (this.duration > 0) { + if (this.duration > 0) { // duration was already retrieved while checking for captions - duration = this.duration; - } - else { + duration = this.duration; + } else { duration = this.youTubePlayer.getDuration(); } - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet duration = 0; } } if (duration === undefined \|\| isNaN(duration) \|\| duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } } @@ -8770,7 +7705,7 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -8779,33 +7714,27 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getCurrentTime().then(function(elapsed) { if (elapsed === undefined \|\| isNaN(elapsed) \|\| elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var elapsed; if (this.player === 'html5') { elapsed = this.media.currentTime; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { elapsed = this.youTubePlayer.getCurrentTime(); - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet elapsed = 0; } } if (elapsed === undefined \|\| isNaN(elapsed) \|\| elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } } @@ -8815,71 +7744,51 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getPlayerState = function () { // Returns one of the following states: - // 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. - // 'ended' - Finished playing. - // 'paused' - Not playing, but not stopped or ended. - // 'buffering' - Momentarily paused to load, but will resume once data is loaded. - // 'playing' - Currently playing. - - // Commented out the following in 3.2.1 - not sure of its intended purpose - // It can be useful to know player state even when swapping src - // and the overhead is seemingly minimal - // TODO - Investigate this further. Delete if it's not needed - / - if (this.swappingSrc) { - return; - } - / - var deferred, promise, thisObj, duration, elapsed; - deferred = new $.Deferred(); + // - 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. + // - 'ended' - Finished playing. + // - 'paused' - Not playing, but not stopped or ended. + // - 'buffering' - Momentarily paused to load, but will resume once data is loaded. + // - 'playing' - Currently playing. + + var deferred, promise, thisObj; + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (this.player === 'html5') { if (this.media.ended) { deferred.resolve('ended'); - } - else if (this.media.paused) { + } else if (this.media.paused) { deferred.resolve('paused'); - } - else if (this.media.readyState !== 4) { + } else if (this.media.readyState !== 4) { deferred.resolve('buffering'); - } - else { + } else { deferred.resolve('playing'); } - } - else if (this.player === 'youtube' && this.youTubePlayerReady) { + } else if (this.player === 'youtube' && this.youTubePlayerReady) { var state = this.youTubePlayer.getPlayerState(); if (state === -1 \|\| state === 5) { deferred.resolve('stopped'); - } - else if (state === 0) { + } else if (state === 0) { deferred.resolve('ended'); - } - else if (state === 1) { + } else if (state === 1) { deferred.resolve('playing'); - } - else if (state === 2) { + } else if (state === 2) { deferred.resolve('paused'); - } - else if (state === 3) { + } else if (state === 3) { deferred.resolve('buffering'); } - } - else if (this.player === 'vimeo' && this.vimeoPlayer) { + } else if (this.player === 'vimeo' && this.vimeoPlayer) { // curiously, Vimeo's API has no getPlaying(), getBuffering(), or getState() methods // so maybe if it's neither paused nor ended, it must be playing??? this.vimeoPlayer.getPaused().then(function(paused) { if (paused) { deferred.resolve('paused'); - } - else { + } else { thisObj.vimeoPlayer.getEnded().then(function(ended) { if (ended) { deferred.resolve('ended'); - } - else { + } else { deferred.resolve('playing'); } }); @@ -8892,89 +7801,63 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isPlaybackRateSupported = function () { if (this.player === 'html5') { - if (this.media.playbackRate) { - return true; - } - else { - return false; - } - } - else if (this.player === 'youtube') { - // Youtube supports varying playback rates per video. + return (this.media.playbackRate) ? true : false; + } else if (this.player === 'youtube') { + // Youtube supports varying playback rates per video. // Only expose controls if more than one playback rate is available. - if (this.youTubePlayerReady) { - if (this.youTubePlayer.getAvailablePlaybackRates().length > 1) { - return true; - } - else { - return false; - } - } - else { + if (this.youTubePlayerReady) { + return (this.youTubePlayer.getAvailablePlaybackRates().length > 1) ? true : false; + } else { return false; } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // since this takes longer to determine, it was set previously in initVimeoPlayer() return this.vimeoSupportsPlaybackRateChange; } }; AblePlayer.prototype.setPlaybackRate = function (rate) { - + rate = Math.max(0.5, rate); - if (this.hasClosedDesc && this.descMethod === 'text') { - // keep speech rate in sync with playback rate even if descOn is false - this.syncSpeechToPlaybackRate(rate); + if (this.hasClosedDesc && this.descMethod === 'text') { + // keep speech rate in sync with playback rate even if descOn is false + this.syncSpeechToPlaybackRate(rate); } + this.syncSignVideo( {'rate' : rate } ); + if (this.player === 'html5') { this.media.playbackRate = rate; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.setPlaybackRate(rate); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.setPlaybackRate(rate); } - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.playbackRate = rate; - } + this.syncSignVideo( { 'rate' : rate } ); this.playbackRate = rate; - this.$speed.text(this.tt.speed + ': ' + rate.toFixed(2).toString() + 'x'); - }; + this.$speed.text( this.translate( 'speed', 'Speed' ) + ': ' + rate.toFixed(2).toString() + 'x'); + }; AblePlayer.prototype.getPlaybackRate = function () { if (this.player === 'html5') { return this.media.playbackRate; - } - else if (this.player === 'youtube') { - if (this.youTubePlayerReady) { - return this.youTubePlayer.getPlaybackRate(); - } + } else if (this.player === 'youtube' && (this.youTubePlayerReady)) { + return this.youTubePlayer.getPlaybackRate(); } }; AblePlayer.prototype.isPaused = function () { - // Note there are three player states that count as paused in this sense, + // Note there are three player states that count as paused in this sense, // and one of them is named 'paused'. // A better name would be 'isCurrentlyNotPlayingOrBuffering' - var state; - if (this.player === 'vimeo') { // just rely on value of this.playing - if (this.playing) { - return false; - } - else { - return true; - } - } - else { + return (this.playing) ? false : true; + } else { this.getPlayerState().then(function(state) { // if any of the following is true, consider the media 'paused' return state === 'paused' \|\| state === 'stopped' \|\| state === 'ended'; @@ -8982,43 +7865,71 @@ if (typeof module !== "undefined" && module.exports) { } }; + AblePlayer.prototype.syncSignVideo = function(options) { + if (this.hasSignLanguage && ( this.signVideo \|\| this.signYoutube ) ) { + if (options && typeof options.time !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.currentTime = options.time; + } else { + this.youTubeSignPlayer.seekTo(options.time,true); + } + } + if (options && typeof options.rate !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.playbackRate = options.rate; + } else { + this.youTubeSignPlayer.setPlaybackRate(options.rate); + } + } + if (options && typeof options.pause !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.pause(true); + } else { + this.youTubeSignPlayer.pauseVideo(); + } + } + if (options && typeof options.play !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.play(true); + } else { + this.youTubeSignPlayer.playVideo(); + } + } + if (options && typeof options.volume !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.volume = 0; + } + } + } + }; + AblePlayer.prototype.pauseMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'pause' : true } ); if (this.player === 'html5') { this.media.pause(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.pause(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.pauseVideo(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.pause(); } }; AblePlayer.prototype.playMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'play' : true } ); if (this.player === 'html5') { this.media.play(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.play(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.playVideo(); if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } this.stoppingYouTube = false; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.play(); } this.startedPlaying = true; @@ -9032,44 +7943,19 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.fadeControls = function(direction) { // Visibly fade controls without hiding them from screen reader users - // direction is either 'out' or 'in' - // TODO: This still needs work. // After the player fades, it's replaced by an empty space // Would be better if the video and captions expanded to fill the void - // Attempted to fade out to 0 opacity, then move the playerDiv offscreen - // and expand the mediaContainer to fill the vacated space - // However, my attempts to do this have been choppy and buggy - // Code is preserved below and commented out + // replace JS animation with CSS animation in 12/2025. - var thisObj, mediaHeight, playerHeight, newMediaHeight; var thisObj = this; if (direction == 'out') { // get the original height of two key components: - mediaHeight = this.$mediaContainer.height(); - playerHeight = this.$playerDiv.height(); - newMediaHeight = mediaHeight + playerHeight; - - // fade slowly to transparency - this.$playerDiv.fadeTo(2000,0,function() { - / - // when finished, position playerDiv offscreen - // thisObj.$playerDiv.addClass('able-offscreen'); - // Expand the height of mediaContainer to fill the void (needs work) - thisObj.$mediaContainer.animate({ - height: newMediaHeight - },500); - / - }); - } - else if (direction == 'in') { - // restore captionsContainer to its original height (needs work) - // this.$mediaContainer.removeAttr('style'); - // fade relatively quickly back to its original position with full opacity - // this.$playerDiv.removeClass('able-offscreen').fadeTo(100,1); - this.$playerDiv.fadeTo(100,1); + this.$playerDiv.addClass( 'fade-out' ).removeClass( 'fade-in' ); + } else if (direction == 'in') { + this.$playerDiv.addClass( 'fade-in' ).removeClass( 'fade-out' ); } }; @@ -9087,7 +7973,7 @@ if (typeof module !== "undefined" && module.exports) { this.hideControlsTimeoutStatus = 'active'; }; - AblePlayer.prototype.refreshControls = function(context, duration, elapsed) { + AblePlayer.prototype.refreshControls = function(context = 'init', duration, elapsed) { // context is one of the following: // 'init' - initial build (or subsequent change that requires full rebuild) @@ -9108,34 +7994,30 @@ if (typeof module !== "undefined" && module.exports) { // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx - var thisObj, duration, elapsed, lastChapterIndex, displayElapsed, - updateLive, textByState, timestamp, widthUsed, - leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount, - buffered, newTop, statusBarHeight, speedHeight, statusBarWidthBreakpoint, - newSvgData; + var thisObj, duration, textByState, timestamp, captionsCount, newTop, statusBarWidthBreakpoint; thisObj = this; - if (this.swappingSrc) { - if (this.playing) { - // wait until new source has loaded before refreshing controls - // can't wait if player is NOT playing because some critical events - // won't fire until playback of new media starts - return; - } + // wait until new source has loaded before refreshing controls + // some critical events won't fire until playback of new media starts + if ( this.swappingSrc && this.playing ) { + return; } - if (context === 'timeline' \|\| context === 'init') { - // all timeline-related functionality requires both duration and elapsed + if ( context === 'timeline' \|\| context === 'init' ) { + // Update timeline controls. + var lastChapterIndex, displayElapsed, updateLive, widthUsed, + leftControls, rightControls, seekbarWidth, buffered; + // all timeline-related functionality requires duration if (typeof this.duration === 'undefined') { - // wait until duration is known before proceeding with refresh - return; + // wait until duration is known before proceeding with refresh + return; } if (this.useChapterTimes) { this.chapterDuration = this.getChapterDuration(); this.chapterElapsed = this.getChapterElapsed(); } - if (this.useFixedSeekInterval === false && this.seekIntervalCalculated === false && this.duration > 0) { + if ( !this.useFixedSeekInterval && !this.seekIntervalCalculated && this.duration > 0) { // couldn't calculate seekInterval previously; try again. this.setSeekInterval(); } @@ -9149,32 +8031,26 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends // need to adjust seekbar duration to match video end this.seekBar.setDuration(this.duration - this.currentChapter.start); - } - else { + } else { this.seekBar.setDuration(this.chapterDuration); } - } - else { + } else { // this is not the last chapter this.seekBar.setDuration(this.chapterDuration); } - } - else { - if (!(this.duration === undefined \|\| isNaN(this.duration) \|\| this.duration === -1)) { - this.seekBar.setDuration(this.duration); - } + } else if ( !(this.duration === undefined \|\| isNaN(this.duration) \|\| this.duration === -1) ) { + this.seekBar.setDuration(this.duration); } if (!(this.seekBar.tracking)) { // Only update the aria live region if we have an update pending // (from a seek button control) or if the seekBar has focus. // We use document.activeElement instead of $(':focus') due to a strange bug: - // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. + // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. updateLive = this.liveUpdatePending \|\| this.seekBar.seekHead.is($(document.activeElement)); this.liveUpdatePending = false; if (this.useChapterTimes) { this.seekBar.setPosition(this.chapterElapsed, updateLive); - } - else { + } else { this.seekBar.setPosition(this.elapsed, updateLive); } } @@ -9182,22 +8058,15 @@ if (typeof module !== "undefined" && module.exports) { // When seeking, display the seek bar time instead of the actual elapsed time. if (this.seekBar.tracking) { displayElapsed = this.seekBar.lastTrackPosition; - } - else { - if (this.useChapterTimes) { - displayElapsed = this.chapterElapsed; - } - else { - displayElapsed = this.elapsed; - } + } else { + displayElapsed = ( this.useChapterTimes ) ? this.chapterElapsed : this.elapsed; } } // update elapsed & duration if (typeof this.$durationContainer !== 'undefined') { if (this.useChapterTimes) { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.chapterDuration)); - } - else { + } else { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.duration)); } } @@ -9209,27 +8078,22 @@ if (typeof module !== "undefined" && module.exports) { // Update seekbar width. // To do this, we need to calculate the width of all buttons surrounding it. if (this.seekBar) { - widthUsed = 0; + let controlWrapper = this.seekBar.wrapperDiv.parent().parent(); leftControls = this.seekBar.wrapperDiv.parent().prev('div.able-left-controls'); rightControls = leftControls.next('div.able-right-controls'); - leftControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); // true = include margin - } - }); + widthUsed = leftControls.outerWidth(true); rightControls.children().each(function () { if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); + widthUsed += $(this).outerWidth(true) + 5; } }); if (this.fullscreen) { seekbarWidth = $(window).width() - widthUsed; - } - else { + } else { // seekbar is wide enough to fill the remaining space - // include a 5px buffer to account for minor browser differences - seekbarWidth = this.$ableWrapper.width() - widthUsed - 5; - } + // include a 10px buffer to account for minor browser differences or custom styles. + seekbarWidth = controlWrapper.width() - widthUsed - 10; + } // Sometimes some minor fluctuations based on browser weirdness, so set a threshold. if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) { this.seekBar.setWidth(seekbarWidth); @@ -9240,122 +8104,69 @@ if (typeof module !== "undefined" && module.exports) { // Update buffering progress. // TODO: Currently only using the first HTML5 buffered interval, // but this fails sometimes when buffering is split into two or more intervals. - if (this.player === 'html5') { - if (this.media.buffered.length > 0) { - buffered = this.media.buffered.end(0); - if (this.useChapterTimes) { - if (buffered > this.chapterDuration) { - buffered = this.chapterDuration; - } - if (this.seekBar) { - this.seekBar.setBuffered(buffered / this.chapterDuration); - } + if (this.player === 'html5' && this.media.buffered.length > 0) { + buffered = this.media.buffered.end(0); + if (this.useChapterTimes) { + if (buffered > this.chapterDuration) { + buffered = this.chapterDuration; } - else { - if (this.seekBar) { - if (!isNaN(buffered)) { - this.seekBar.setBuffered(buffered / duration); - } - } + if (this.seekBar) { + this.seekBar.setBuffered(buffered / this.chapterDuration); } + } else if ( this.seekBar && !isNaN(buffered) ) { + this.seekBar.setBuffered(buffered / duration); } - } - else if (this.player === 'youtube') { - if (this.seekBar) { - if (this.youTubePlayerReady) { - this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); - } - } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'youtube' && this.seekBar && this.youTubePlayerReady ) { + this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + } else if (this.player === 'vimeo') { // TODO: Add support for Vimeo buffering update } - } // end if context == 'timeline' or 'init' - - if (context === 'descriptions' \|\| context == 'init'){ + } + if (context === 'descriptions' \|\| context == 'init') { if (this.$descButton) { - if (this.descOn) { - this.$descButton.removeClass('buttonOff').attr('aria-label',this.tt.turnOffDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOffDescriptions); - } - else { - this.$descButton.addClass('buttonOff').attr('aria-label',this.tt.turnOnDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOnDescriptions); - } + this.toggleButtonState( + this.$descButton, + this.descOn, + this.translate( 'turnOffDescriptions', 'Turn off descriptions' ), + this.translate( 'turnOnDescriptions', 'Turn on descriptions' ), + ); } } - if (context === 'captions' \|\| context == 'init'){ + if (context === 'captions' \|\| context == 'init') { if (this.$ccButton) { captionsCount = this.captions.length; - - // Button has a different title depending on the number of captions. - // If only one caption track, this is "Show captions" and "Hide captions" - // Otherwise, it is just always "Captions" - if (!this.captionsOn) { - this.$ccButton.addClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'false') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.showCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.showCaptions); - } - } - else { - this.$ccButton.removeClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'true') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.hideCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.hideCaptions); - } - } - if (captionsCount > 1) { this.$ccButton.attr({ - 'aria-label': this.tt.captions, 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-captions-menu' }); - this.$ccButton.find('span.able-clipped').text(this.tt.captions); } + var ariaLabelOn = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + var ariaPressed = ( captionsCount > 1 ) ? true : false; + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); } } if (context === 'fullscreen' \|\| context == 'init'){ if (this.$fullscreenButton) { if (!this.fullscreen) { - this.$fullscreenButton.attr('aria-label', this.tt.enterFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-collapse').addClass('icon-fullscreen-expand'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-expand'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenExpandButtonImg); - } - } - else { - this.$fullscreenButton.attr('aria-label',this.tt.exitFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-expand').addClass('icon-fullscreen-collapse'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-collapse'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenCollapseButtonImg); - } + this.$fullscreenButton.attr( 'aria-label', this.translate( 'enterFullScreen', 'Enter full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-expand' ); + } else { + this.$fullscreenButton.attr('aria-label', this.translate( 'exitFullScreen', 'Exit full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-collapse' ); } } } @@ -9366,18 +8177,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.hideBigPlayButton) { this.$bigPlayButton.show(); this.$bigPlayButton.attr('aria-hidden', 'false'); - - } - if (this.fullscreen) { - this.$bigPlayButton.width($(window).width()); - this.$bigPlayButton.height($(window).height()); } - else { - this.$bigPlayButton.width(this.$mediaContainer.width()); - this.$bigPlayButton.height(this.$mediaContainer.height()); - } - } - else { + } else { this.$bigPlayButton.hide(); this.$bigPlayButton.attr('aria-hidden', 'true'); } @@ -9391,8 +8192,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.prefAutoScrollTranscript === 1) { this.autoScrollTranscript = true; this.$autoScrollTranscriptCheckbox.prop('checked',true); - } - else { + } else { this.autoScrollTranscript = false; this.$autoScrollTranscriptCheckbox.prop('checked',false); } @@ -9410,8 +8210,8 @@ if (typeof module !== "undefined" && module.exports) { // only scroll once after moving a highlight if (this.movingHighlight) { this.$transcriptDiv.scrollTop(newTop); - this.movingHighlight = false; - } + this.movingHighlight = false; + } } } } @@ -9421,7 +8221,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$chaptersButton) { this.$chaptersButton.attr({ - 'aria-label': this.tt.chapters, + 'aria-label': this.translate( 'chapters', 'Chapters' ), 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-chapters-menu' }); @@ -9432,231 +8232,139 @@ if (typeof module !== "undefined" && module.exports) { // update status textByState = { - 'stopped': this.tt.statusStopped, - 'paused': this.tt.statusPaused, - 'playing': this.tt.statusPlaying, - 'buffering': this.tt.statusBuffering, - 'ended': this.tt.statusEnd + 'stopped': this.translate( 'statusStopped', 'Stopped' ), + 'paused': this.translate( 'statusPaused', 'Paused' ), + 'playing': this.translate( 'statusPlaying', 'Playing' ), + 'buffering': this.translate( 'statusBuffering', 'Buffering' ), + 'ended': this.translate( 'statusEnd', 'End of track' ) }; if (this.stoppingYouTube) { // stoppingYouTube is true temporarily while video is paused and seeking to 0 // See notes in handleRestart() // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) - if (this.$status.text() !== this.tt.statusStopped) { - this.$status.text(this.tt.statusStopped); - } - if (this.$playpauseButton.find('span').first().hasClass('icon-pause')) { - if (this.iconType === 'font') { - this.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('play'); - this.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - this.$playpauseButton.find('path').attr('d',newSvgData[1]); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else { - this.$playpauseButton.find('img').attr('src',this.playButtonImg); - } - } - } - else { - if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Update the text only if it's changed since it has role="alert"; - // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. - this.getPlayerState().then(function(currentState) { - if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { - // Debounce updates; only update after status has stayed steadily different for a while - // "A while" is defined differently depending on context - if (thisObj.swappingSrc) { - // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), - // so set a longer wait time before writing a status message - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) - } - } - else { - // for all other contexts (e.g., users clicks Play/Pause) - // user should receive more rapid feedback - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 250; // in ms - } - } - timestamp = (new Date()).getTime(); - if (!thisObj.statusDebounceStart) { - thisObj.statusDebounceStart = timestamp; - // Call refreshControls() again after allotted time has passed - thisObj.debouncingStatus = true; - thisObj.statusTimeout = setTimeout(function () { - thisObj.debouncingStatus = false; - thisObj.refreshControls(context); - }, thisObj.statusMessageThreshold); - } - else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { - thisObj.$status.text(textByState[currentState]); - thisObj.statusDebounceStart = null; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; + if (this.$status.text() !== this.translate( 'statusStopped', 'Stopped' ) ) { + this.$status.text( this.translate( 'statusStopped', 'Stopped' ) ); + } + this.getIcon( this.$playpauseButton, 'play' ); + } else if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { + // Update the text only if it's changed since it has role="alert"; + // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. + this.getPlayerState().then(function(currentState) { + if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { + // Debounce updates; only update after status has stayed steadily different for a while + // "A while" is defined differently depending on context + if (thisObj.swappingSrc) { + // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), + // so set a longer wait time before writing a status message + if (!thisObj.debouncingStatus) { + thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) } + } else if (!thisObj.debouncingStatus) { + // for all other contexts (e.g., users clicks Play/Pause) + // user should receive more rapid feedback + thisObj.statusMessageThreshold = 250; // in ms } - else { + timestamp = (new Date()).getTime(); + if (!thisObj.statusDebounceStart) { + thisObj.statusDebounceStart = timestamp; + // Call refreshControls() again after allotted time has passed + thisObj.debouncingStatus = true; + thisObj.statusTimeout = setTimeout(function () { + thisObj.debouncingStatus = false; + thisObj.refreshControls(context); + }, thisObj.statusMessageThreshold); + } else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { + thisObj.$status.text(textByState[currentState]); thisObj.statusDebounceStart = null; - thisObj.debouncingStatus = false; clearTimeout(thisObj.statusTimeout); thisObj.statusTimeout = null; } - // Don't change play/pause button display while using the seek bar (or if YouTube stopped) - if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { - if (currentState === 'paused' \|\| currentState === 'stopped' \|\| currentState === 'ended') { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('play'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.playButtonImg); - } - } - else { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-play').addClass('icon-pause'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('pause'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.pauseButtonImg); - } - } + } else { + thisObj.statusDebounceStart = null; + thisObj.debouncingStatus = false; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + // Don't change play/pause button display while using the seek bar (or if YouTube stopped) + if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { + if (currentState === 'paused' \|\| currentState === 'stopped' \|\| currentState === 'ended') { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); + thisObj.getIcon( thisObj.$playpauseButton, 'play' ); + } else { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); + thisObj.getIcon( thisObj.$playpauseButton, 'pause' ); } - }); - } + } + }); } } // Show/hide status bar content conditionally if (!this.fullscreen) { statusBarWidthBreakpoint = 300; - statusBarHeight = this.$statusBarDiv.height(); - speedHeight = this.$statusBarDiv.find('span.able-speed').height(); - if (speedHeight > (statusBarHeight + 5)) { - // speed bar is wrapping (happens often in German player) + if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { + // Player is too small for a speed span this.$statusBarDiv.find('span.able-speed').hide(); this.hidingSpeed = true; - } - else { + } else { if (this.hidingSpeed) { this.$statusBarDiv.find('span.able-speed').show(); this.hidingSpeed = false; } - if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { - // Player is too small for a speed span - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - } } } }; - AblePlayer.prototype.getHiddenWidth = function($el) { - - // jQuery returns for width() if element is hidden - // this function is a workaround - - // save a reference to a cloned element that can be measured - var $hiddenElement = $el.clone().appendTo('body'); - - // calculate the width of the clone - var width = $hiddenElement.outerWidth(); - - // remove the clone from the DOM - $hiddenElement.remove(); - - return width; - }; - AblePlayer.prototype.handlePlay = function(e) { - if (this.paused) { - // user clicked play - this.okToPlay = true; + // user clicked play + this.okToPlay = true; this.playMedia(); - if (this.synth.paused) { - // media was paused while description was speaking - // resume utterance - this.synth.resume(); + if (this.synth.paused) { + // media was paused while description was speaking + // resume utterance + this.synth.resume(); } - } - else { + } else { // user clicked pause - this.okToPlay = false; + this.okToPlay = false; this.pauseMedia(); - if (this.speakingDescription) { - // pause the current utterance - // it will resume when the user presses play - this.synth.pause(); + if (this.speakingDescription) { + // pause the current utterance + // it will resume when the user presses play + this.synth.pause(); } } - if (this.speechEnabled === null) { - this.initSpeech('play'); + if (this.speechEnabled === null) { + this.initSpeech('play'); } }; AblePlayer.prototype.handleRestart = function() { - if (this.speakingDescription) { - // cancel audio description - this.synth.cancel(); - } + if (this.speakingDescription) { + // cancel audio description + this.synth.cancel(); + } this.seekTo(0); }; AblePlayer.prototype.handlePrevTrack = function() { - if (this.playlistIndex === 0) { - // currently on the first track - // wrap to bottom and play the last track - this.playlistIndex = this.$playlist.length - 1; - } - else { - this.playlistIndex--; - } + // currently on the first track + // wrap to bottom and play the last track + this.playlistIndex = (this.playlistIndex === 0) ? this.$playlist.length - 1 : this.playlistIndex--; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; AblePlayer.prototype.handleNextTrack = function() { - if (this.playlistIndex === this.$playlist.length - 1) { - // currently on the last track - // wrap to top and play the forst track - this.playlistIndex = 0; - } - else { - this.playlistIndex++; - } + // currently on the last track + // wrap to top and play the forst track + this.playlistIndex = (this.playlistIndex === this.$playlist.length - 1) ? 0 : this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; @@ -9666,15 +8374,10 @@ if (typeof module !== "undefined" && module.exports) { var targetTime; targetTime = this.elapsed - this.seekInterval; - if (this.useChapterTimes) { - if (targetTime < this.currentChapter.start) { - targetTime = this.currentChapter.start; - } - } - else { - if (targetTime < 0) { - targetTime = 0; - } + if (this.useChapterTimes && (targetTime < this.currentChapter.start)) { + targetTime = this.currentChapter.start; + } else if (targetTime < 0) { + targetTime = 0; } this.seekTo(targetTime); }; @@ -9692,14 +8395,12 @@ if (typeof module !== "undefined" && module.exports) { // targetTime would exceed the end of the video (or chapter) // scrub to end of whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); - } - else if (this.duration % targetTime < this.seekInterval) { + } else if (this.duration % targetTime < this.seekInterval) { // nothing left but pocket change after seeking to targetTime // go ahead and seek to end of video (or chapter), whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); } - } - else { + } else { // this is not the last chapter if (targetTime > this.currentChapter.end) { // targetTime would exceed the end of the chapter @@ -9707,8 +8408,7 @@ if (typeof module !== "undefined" && module.exports) { targetTime = this.currentChapter.end; } } - } - else { + } else { // not using chapter times if (targetTime > this.duration) { targetTime = this.duration; @@ -9732,16 +8432,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.setPlaybackRate(this.getPlaybackRate() + (0.25 dir)); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { rates = this.youTubePlayer.getAvailablePlaybackRates(); currentRate = this.getPlaybackRate(); index = rates.indexOf(currentRate); if (index === -1) { - } - else { + } else { index += dir; // Can only increase or decrease rate if there's another rate available. if (index < rates.length && index >= 0) { @@ -9749,27 +8447,15 @@ if (typeof module !== "undefined" && module.exports) { } } } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // range is 0.5 to 2 // increase/decrease in inrements of 0.5 vimeoMin = 0.5; vimeoMax = 2; if (dir === 1) { - if (this.vimeoPlaybackRate + 0.5 <= vimeoMax) { - newRate = this.vimeoPlaybackRate + 0.5; - } - else { - newRate = vimeoMax; - } - } - else if (dir === -1) { - if (this.vimeoPlaybackRate - 0.5 >= vimeoMin) { - newRate = this.vimeoPlaybackRate - 0.5; - } - else { - newRate = vimeoMin; - } + newRate = (this.vimeoPlaybackRate + 0.5 <= vimeoMax) ? this.vimeoPlaybackRate + 0.5 : vimeoMax; + } else if (dir === -1) { + newRate = (this.vimeoPlaybackRate - 0.5 >= vimeoMin) ? this.vimeoPlaybackRate - 0.5 : vimeoMin; } this.setPlaybackRate(newRate); } @@ -9778,47 +8464,39 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handleCaptionToggle = function() { var thisObj = this; - var captions; + var captions, ariaPressed; if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup // immediately after closing it this.hidingPopup = false; return false; } - if (this.captions.length) { - captions = this.captions; - } - else { - captions = []; - } + + captions = (this.captions.length) ? this.captions : []; if (captions.length === 1) { // When there's only one set of captions, just do an on/off toggle. if (this.captionsOn === true) { // turn them off this.captionsOn = false; this.prefCaptions = 0; - this.$ccButton.attr('aria-pressed', 'false'); - this.updateCookie('prefCaptions'); + ariaPressed = false; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.unloadModule('captions'); - } - else if (this.usingVimeoCaptions) { - this.vimeoPlayer.disableTextTrack(); - } - else { + } else if (this.usingVimeoCaptions) { + this.vimeoPlayer.disableTextTrack(); + } else { this.$captionsWrapper.hide(); } - } - else { + } else { // captions are off. Turn them on. this.captionsOn = true; this.prefCaptions = 1; - this.$ccButton.attr('aria-pressed', 'true'); - this.updateCookie('prefCaptions'); + ariaPressed = true; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.loadModule('captions'); - } - else if (this.usingVimeoCaptions) { + } else if (this.usingVimeoCaptions) { this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' @@ -9838,9 +8516,8 @@ if (typeof module !== "undefined" && module.exports) { break; } - }); - } - else { + }); + } else { this.$captionsWrapper.show(); } for (var i=0; i<captions.length; i++) { @@ -9853,9 +8530,7 @@ if (typeof module !== "undefined" && module.exports) { this.selectedDescriptions = this.descriptions[0]; } } - this.refreshControls('captions'); - } - else { + } else { // there is more than one caption track. // clicking on a track is handled via caption.js > getCaptionClickFunction() if (this.captionsPopup && this.captionsPopup.is(':visible')) { @@ -9863,8 +8538,7 @@ if (typeof module !== "undefined" && module.exports) { this.hidingPopup = false; this.$ccButton.attr('aria-expanded', 'false') this.waitThenFocus(this.$ccButton); - } - else { + } else { this.closePopups(); if (this.captionsPopup) { this.captionsPopup.show(); @@ -9876,17 +8550,27 @@ if (typeof module !== "undefined" && module.exports) { thisObj.captionsPopup.css('left', thisObj.$ccButton.position().left) // Place focus on the first button (even if another button is checked) thisObj.captionsPopup.find('li').removeClass('able-focus'); - thisObj.captionsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.captionsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } } } + var ariaLabelOn = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); }; /** * Gives enough time for DOM changes to take effect before adjusting focus. * Helpful for allowing screen reading of elements whose state is intermittently changed. - * + * * @param {} $el element to focus on @param {} timeout optional wait time in milliseconds before focus / @@ -9894,9 +8578,9 @@ if (typeof module !== "undefined" && module.exports) { // Default wait time of 50 ms var _timeout = (timeout === undefined \|\| timeout === null) ? 50 : timeout; - + setTimeout(function() { - $el.focus(); + $el.trigger('focus'); }, _timeout); } @@ -9910,9 +8594,8 @@ if (typeof module !== "undefined" && module.exports) { if (this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); this.hidingPopup = false; - this.$chaptersButton.attr('aria-expanded','false').focus(); - } - else { + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); + } else { this.closePopups(); this.chaptersPopup.show(); this.$chaptersButton.attr('aria-expanded','true'); @@ -9923,10 +8606,9 @@ if (typeof module !== "undefined" && module.exports) { // Otherwise, place focus on the first chapter this.chaptersPopup.find('li').removeClass('able-focus'); if (this.chaptersPopup.find('li[aria-checked="true"]').length) { - this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass('able-focus'); - } - else { - this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').focus(); + this.chaptersPopup.find('li[aria-checked="true"]').trigger('focus').addClass('able-focus'); + } else { + this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').trigger('focus'); } } }; @@ -9935,12 +8617,12 @@ if (typeof module !== "undefined" && module.exports) { this.descOn = !this.descOn; this.prefDesc = + this.descOn; // convert boolean to integer - this.updateCookie('prefDesc'); + this.updatePreferences('prefDesc'); if (typeof this.$descDiv !== 'undefined') { if (!this.$descDiv.is(':hidden')) { this.$descDiv.hide(); } - // NOTE: now showing $descDiv here if previously hidden + // NOTE: now showing $descDiv here if previously hidden // that's handled elsewhere, dependent on whether there's text to show } this.initDescription(); @@ -9962,8 +8644,8 @@ if (typeof module !== "undefined" && module.exports) { thisObj = this; - if (this.speechEnabled === null) { - this.initSpeech('prefs'); + if (this.speechEnabled === null) { + this.initSpeech('prefs'); } if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup @@ -9977,18 +8659,17 @@ if (typeof module !== "undefined" && module.exports) { // restore each menu item to original hidden state this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); + this.$prefsButton.trigger('focus'); } // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; },100); - } - else { + } else { this.closePopups(); this.prefsPopup.show(); this.$prefsButton.attr('aria-expanded','true'); - this.$prefsButton.focus(); // focus first on prefs button to announce expanded state + this.$prefsButton.trigger('focus'); // focus first on prefs button to announce expanded state // give time for focus on button then adjust popup settings and focus setTimeout(function() { prefsButtonPosition = thisObj.$prefsButton.position(); @@ -9998,115 +8679,88 @@ if (typeof module !== "undefined" && module.exports) { thisObj.prefsPopup.css('left', prefsMenuLeft); // remove prior focus and set focus on first item; also change tabindex from -1 to 0 thisObj.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','0'); - thisObj.prefsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.prefsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } }; - AblePlayer.prototype.handleHelpClick = function() { - this.setFullscreen(false); - this.helpDialog.show(); - }; - AblePlayer.prototype.handleTranscriptToggle = function () { - var thisObj = this; - - if (this.$transcriptDiv.is(':visible')) { + var visible = this.$transcriptDiv.is(':visible'); + if ( visible ) { this.$transcriptArea.hide(); - this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); this.prefTranscript = 0; - this.$transcriptButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms - // Setting timeout to 100ms is a virtual guarantee of proper functionality - setTimeout(function() { - thisObj.closingTranscript = false; - }, 100); - } - else { - this.positionDraggableWindow('transcript'); - this.$transcriptArea.show(); - // showing transcriptArea has a cascading effect of showing all content within transcriptArea - // need to re-hide the popup menu - this.$transcriptPopup.hide(); - this.$transcriptButton.removeClass('buttonOff').attr('aria-label',this.tt.hideTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.hideTranscript); - this.prefTranscript = 1; - // move focus to first focusable element (window options button) - this.focusNotClick = true; - this.$transcriptArea.find('button').first().focus(); - // wait briefly before resetting stopgap var - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefTranscript'); + if ( this.transcriptType === 'popup' ) { + this.$transcriptButton.trigger('focus').addClass('able-focus'); + // wait briefly before resetting stopgap var + // otherwise the keypress used to select 'Close' will trigger the transcript button + // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms + // Setting timeout to 100ms is a virtual guarantee of proper functionality + setTimeout(function() { + thisObj.closingTranscript = false; + }, 100); + } + } else { + if ( this.transcriptType === 'popup' ) { + this.positionDraggableWindow('transcript'); + this.$transcriptArea.show(); + // showing transcriptArea has a cascading effect of showing all content within transcriptArea + // need to re-hide the popup menu + this.$transcriptPopup.hide(); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.prefTranscript = 1; + // move focus to first focusable element (window options button) + this.focusNotClick = true; + this.$transcriptArea.find('button').first().trigger('focus'); + // wait briefly before resetting stopgap var + setTimeout(function() { + thisObj.focusNotClick = false; + }, 100); + } else { + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.$transcriptArea.show(); + } + } + this.updatePreferences('prefTranscript'); }; AblePlayer.prototype.handleSignToggle = function () { var thisObj = this; - - if (this.$signWindow.is(':visible')) { + var visible = this.$signWindow.is(':visible'); + if ( visible ) { this.$signWindow.hide(); - this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign); - this.$signButton.find('span.able-clipped').text(this.tt.showSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 0; - this.$signButton.focus().addClass('able-focus'); + this.$signButton.trigger('focus').addClass('able-focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.closingSign = false; }, 100); - } - else { + } else { this.positionDraggableWindow('sign'); this.$signWindow.show(); // showing signWindow has a cascading effect of showing all content within signWindow // need to re-hide the popup menu this.$signPopup.hide(); - this.$signButton.removeClass('buttonOff').attr('aria-label',this.tt.hideSign); - this.$signButton.find('span.able-clipped').text(this.tt.hideSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 1; this.focusNotClick = true; - this.$signWindow.find('button').first().focus(); + this.$signWindow.find('button').first().trigger('focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.focusNotClick = false; }, 100); } - this.updateCookie('prefSign'); + this.updatePreferences('prefSign'); }; - AblePlayer.prototype.isFullscreen = function () { - - // NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen, - // which is defined in setFullscreen() - // This function returns true if any element is fullscreen - // but doesn't tell us whether a particular element is in fullscreen - // (e.g., if there are multiple players on the page) - // The Boolean this.fullscreen is defined separately for each player instance - - if (this.nativeFullscreenSupported()) { - return (document.fullscreenElement \|\| - document.webkitFullscreenElement \|\| - document.webkitCurrentFullscreenElement \|\| - document.mozFullscreenElement \|\| - document.msFullscreenElement) ? true : false; - } - else { - return this.modalFullscreenActive ? true : false; - } - } - AblePlayer.prototype.setFullscreen = function (fullscreen) { if (this.fullscreen == fullscreen) { - // replace isFullscreen() with a Boolean. see function for explanation return; } var thisObj = this; @@ -10116,114 +8770,71 @@ if (typeof module !== "undefined" && module.exports) { if (this.nativeFullscreenSupported()) { // Note: many varying names for options for browser compatibility. if (fullscreen) { + var scroll = { + x: window.pageXOffset \|\| 0, + y: window.pageYOffset \|\| 0 + } + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.rePositionDraggableWindow("transcript"); + } + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.rePositionDraggableWindow("sign"); + } + this.scrollPosition = scroll; // Initialize fullscreen - if (el.requestFullscreen) { el.requestFullscreen(); - } - else if (el.webkitRequestFullscreen) { + } else if (el.webkitRequestFullscreen) { el.webkitRequestFullscreen(); } - else if (el.mozRequestFullscreen) { - el.mozRequestFullscreen(); - } - else if (el.msRequestFullscreen) { - el.msRequestFullscreen(); - } this.fullscreen = true; - } - else { + } else { // Exit fullscreen - this.restoringAfterFullscreen = true; + this.restoringAfterFullscreen = true; if (document.exitFullscreen) { document.exitFullscreen(); - } - else if (document.webkitExitFullscreen) { + } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); - } - else if (document.webkitCancelFullscreen) { + } else if (document.webkitCancelFullscreen) { document.webkitCancelFullscreen(); } - else if (document.mozCancelFullscreen) { - document.mozCancelFullscreen(); + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.positionDraggableWindow("transcript"); } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.positionDraggableWindow("sign"); } this.fullscreen = false; } + } else { + // Removed non-native fullscreen mode in 4.8, which only supported iOS. + // Native fullscreen is on iOS 18+ devices behind a feature flag + // The polyfill hasn't worked for years. } - else { - // Non-native fullscreen support through modal dialog. - // Create dialog on first run through. - if (!this.fullscreenDialog) { - var $dialogDiv = $('<div>'); - // create a hidden alert, communicated to screen readers via aria-describedby - var $fsDialogAlert = $('<p>',{ - 'class': 'able-screenreader-alert' - }).text(this.tt.fullscreen); // In English: "Full screen"; TODO: Add alert text that is more descriptive - $dialogDiv.append($fsDialogAlert); - // now render this as a dialog - this.fullscreenDialog = new AccessibleDialog($dialogDiv, this.$fullscreenButton, 'dialog', true, 'Fullscreen video player', $fsDialogAlert, this.tt.exitFullscreen, '100%', true, function () { thisObj.handleFullscreenToggle() }); - $('body').append($dialogDiv); - } - - // Track whether paused/playing before moving element; moving the element can stop playback. - var wasPaused = this.paused; - - if (fullscreen) { - this.modalFullscreenActive = true; - this.fullscreenDialog.show(); - - // Move player element into fullscreen dialog, then show. - // Put a placeholder element where player was. - this.$modalFullscreenPlaceholder = $('<div class="placeholder">'); - this.$modalFullscreenPlaceholder.insertAfter($el); - $el.appendTo(this.fullscreenDialog.modal); - - // Column left css is 50% by default; set to 100% for full screen. - if ($el === this.$ableColumnLeft) { - $el.width('100%'); - } - var newHeight = $(window).height() - this.$playerDiv.height(); - if (typeof this.$descDiv !== 'undefined') { - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - } - } - else { - this.modalFullscreenActive = false; - if ($el === this.$ableColumnLeft) { - $el.width('50%'); - } - $el.insertAfter(this.$modalFullscreenPlaceholder); - this.$modalFullscreenPlaceholder.remove(); - this.fullscreenDialog.hide(); - } - - // Resume playback if moving stopped it. - if (!wasPaused && this.paused) { - this.playMedia(); - } - } - // add event handlers for changes in fullscreen mode. - // Browsers natively trigger this event with the Escape key, - // in addition to clicking the exit fullscreen button - $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(e) { + // add event handlers for changes in fullscreen mode. + // Browsers natively trigger this event with the Escape key, + // in addition to clicking the exit fullscreen button + $(document).on('fullscreenchange webkitfullscreenchange', function(e) { // NOTE: e.type = the specific event that fired (in case needing to control for browser-specific idiosyncrasies) if (!thisObj.fullscreen) { // user has just exited full screen thisObj.restoringAfterFullscreen = true; - } - else if (!thisObj.clickedFullscreenButton) { + } else if (!thisObj.clickedFullscreenButton) { // user triggered fullscreenchange without clicking fullscreen button thisObj.fullscreen = false; thisObj.restoringAfterFullscreen = true; } thisObj.resizePlayer(); thisObj.refreshControls('fullscreen'); - + // Reset scrollPosition after closing fullscreen. + if ( thisObj.scrollPosition ) { + scroll = thisObj.scrollPosition; + window.scrollTo( scroll.x, scroll.y ); + } // NOTE: The fullscreenchange (or browser-equivalent) event is triggered twice // when exiting fullscreen via the "Exit fullscreen" button (only once if using Escape) // Not sure why, but consequently we need to be sure thisObj.clickedFullscreenButton @@ -10233,9 +8844,9 @@ if (typeof module !== "undefined" && module.exports) { // resetting clickedFullscreenButton after a timeout seems to be better approach setTimeout(function() { thisObj.clickedFullscreenButton = false; - thisObj.restoringAfterFullscreen = false; - },1000); - }); + thisObj.restoringAfterFullscreen = false; + },100); + }); }; AblePlayer.prototype.handleFullscreenToggle = function () { @@ -10244,8 +8855,7 @@ if (typeof module !== "undefined" && module.exports) { this.setFullscreen(!this.fullscreen); if (stillPaused) { this.pauseMedia(); // when toggling fullscreen and media is just paused, keep media paused. - } - else if (!stillPaused) { + } else if (!stillPaused) { this.playMedia(); // when toggling fullscreen and media is playing, continue playing. } // automatically hide controller in fullscreen mode @@ -10257,8 +8867,7 @@ if (typeof module !== "undefined" && module.exports) { this.fadeControls('out'); this.controlsHidden = true; } - } - else { + } else { // exit fullscreen mode this.hideControls = this.hideControlsOriginal; if (!this.hideControls) { // do not hide controls @@ -10273,89 +8882,132 @@ if (typeof module !== "undefined" && module.exports) { } } } - // don't resizePlayer yet; that will be called in response to the window resize event - // this.resizePlayer(); + // don't resizePlayer yet; that will be called in response to the window resize event }; AblePlayer.prototype.handleTranscriptLockToggle = function (val) { this.autoScrollTranscript = val; // val is boolean this.prefAutoScrollTranscript = +val; // convert boolean to numeric 1 or 0 for cookie - this.updateCookie('prefAutoScrollTranscript'); + this.updatePreferences('prefAutoScrollTranscript'); this.refreshControls('transcript'); }; + AblePlayer.prototype.getIcon = function( $button, id, forceImg = false ) { + // Remove existing HTML before generating. + // iconData: [0 = svg viewbox, 1 = svg path, 2 = icon font class, 3 = image file] + var iconType = this.iconType; + var iconData = this.getIconData( id ); + iconType = ( null === iconData[3] ) ? 'svg' : iconType; + iconType = ( forceImg === true ) ? 'img' : iconType; - AblePlayer.prototype.showTooltip = function($tooltip) { + var existingIcon = $button.find( iconType + '#ableplayer-' + id ); + // Avoid repainting icon if there's no change. + if ( existingIcon.length > 0 ) { + return; + } + $button.find('svg, img, span').remove(); + + if (iconType === 'font') { + var $buttonIcon = $('<span>', { + 'class': iconData[2], + }); + $button.append( $buttonIcon ); + } else if (iconType === 'svg') { + // Function to create SVG nodes. + function getNode(n, v) { + n = document.createElementNS("http://www.w3.org/2000/svg", n); + for (var p in v) { + n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m) { + return "-" + m.toLowerCase(); + }), v[p]); + } + return n; + } + var icon = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ); + icon.setAttribute( 'focusable', 'false' ); + icon.setAttribute( 'aria-hidden', 'true'); + icon.setAttribute( 'viewBox', iconData[0] ); + icon.setAttribute( 'id', 'ableplayer-' + id ); + let path = getNode( 'path', { d: iconData[1] } ); + icon.appendChild( path ); + + $button.append( icon ); + // Refresh the DOM. + $button.html($button.html()); + } else { + var $buttonImg = $('<img>',{ + 'src': iconData[3], + 'alt': '', + 'role': 'presentation' + }); + $button.append($buttonImg); + $button.find('img').attr('src',iconData[3]); + } + }; + + AblePlayer.prototype.setText = function( $button, text ) { + $button.attr( 'aria-label', text ); + }; - if (($tooltip).is(':animated')) { - $tooltip.stop(true,true).show(); + AblePlayer.prototype.toggleButtonState = function($button, isOn, onLabel, offLabel, ariaPressed = false, ariaExpanded = false) { + // isOn means "the feature is being turned on". + let buttonOff = ( $button.hasClass( 'buttonOff' ) ) ? true : false; + if ( buttonOff && ! isOn \|\| ! buttonOff && isOn ) { + // Only toggle state if button state does not match feature state. + return; } - else { - $tooltip.stop().show(); + if (! isOn) { + $button.addClass('buttonOff').attr('aria-label', offLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'false'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'false' ); + } + } else { + $button.removeClass('buttonOff').attr('aria-label', onLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'true'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'true' ); + } } }; - AblePlayer.prototype.showAlert = function( msg, location ) { + AblePlayer.prototype.showTooltip = function($tooltip) { + + $tooltip.show(); + }; + + AblePlayer.prototype.showAlert = function( msg, location = 'main' ) { // location is either of the following: // 'main' (default) // 'screenreader (visibly hidden) // 'sign' (sign language window) - // 'transcript' (trasncript window) - var thisObj, $alertBox, $parentWindow, alertLeft, alertTop; + // 'transcript' (transcript window) + var thisObj, $alertBox, $parentWindow; thisObj = this; - + $alertBox = thisObj.$alertBox; + $parentWindow = thisObj.$ableDiv; if (location === 'transcript') { - $alertBox = this.$transcriptAlert; - $parentWindow = this.$transcriptArea; - } - else if (location === 'sign') { - $alertBox = this.$signAlert; - $parentWindow = this.$signWindow; - } - else if (location === 'screenreader') { - $alertBox = this.$srAlertBox; - } - else { - $alertBox = this.$alertBox; - } - $alertBox.text(msg).show(); - if (location == 'transcript' \|\| location === 'sign') { - if ($parentWindow.width() > $alertBox.width()) { - alertLeft = $parentWindow.width() / 2 - $alertBox.width() / 2; - } - else { - // alert box is wider than its container. Position it far left and let it wrap - alertLeft = 10; - } - if (location === 'sign') { - // position alert in the lower third of the sign window (to avoid covering the signer) - alertTop = ($parentWindow.height() / 3) * 2; - } - else if (location === 'transcript') { - // position alert just beneath the toolbar to avoid getting lost among transcript text - alertTop = this.$transcriptToolbar.height() + 30; - } - $alertBox.css({ - top: alertTop + 'px', - left: alertLeft + 'px' - }); - } - else if (location !== 'screenreader') { - // The original formula incorporated offset() into the calculation - // but at some point this began resulting in an alert that's off-centered - // Changed in v2.2.17, but here's the original for reference in case needed: - // left: this.$playerDiv.offset().left + (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - $alertBox.css({ - left: (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - }); + $parentWindow = thisObj.$transcriptArea; + } else if (location === 'sign') { + $parentWindow = thisObj.$signWindow; + } else if (location === 'screenreader') { + $alertBox = thisObj.$srAlertBox; } + $alertBox.find('span').text(msg); + $alertBox.appendTo($parentWindow) + $alertBox.css( {'display': 'flex'} ); + if (location !== 'screenreader') { - setTimeout(function () { - $alertBox.fadeOut(300); - }, 3000); + setTimeout( function () { + $alertBox.hide(); + }, 30000 ); } }; @@ -10364,22 +9016,10 @@ if (typeof module !== "undefined" && module.exports) { // returns true if the target alert has already been shown // useful for throttling alerts that only need to be shown once // e.g., move alerts with instructions for dragging a window - if (which === 'transcript') { - if (this.showedTranscriptAlert) { - return true; - } - else { - return false; - } - } - else if (which === 'sign') { - if (this.showedSignAlert) { - return true; - } - else { - return false; - } + return this.showedTranscriptAlert ?? false; + } else if (which === 'sign') { + return this.showedSignAlert ?? false; } return false; } @@ -10387,105 +9027,82 @@ if (typeof module !== "undefined" && module.exports) { // Resizes all relevant player attributes. AblePlayer.prototype.resizePlayer = function (width, height) { - var captionSizeOkMin, captionSizeOkMax, captionSize, newCaptionSize, newLineHeight; - - var newWidth, newHeight, $iframe, alertTop; + var captionSize, newWidth, newHeight, $iframe; - if (this.mediaType === 'audio') { - return; + if (this.mediaType === 'audio') { + return; } - - if (typeof width !== 'undefined' && typeof height !== 'undefined') { - // this is being called the first time a player is initialized + if (typeof width !== 'undefined' && typeof height !== 'undefined') { + // this is being called the first time a player is initialized // width and height were collected from the HTML, YouTube, or Vimeo media API - // so are reflective of the actual size of the media - // use these values to calculate aspectRatio - this.aspectRatio = height / width; - if (this.playerWidth) { - // default width is already defined via a width or data-width attribute. Use that. - newWidth = this.playerWidth; - if (this.playerHeight) { - newHeight = this.playerHeight; - } - else { - newHeight = Math.round(newWidth * this.aspectRatio); - this.playerHeight = newHeight; - } - } - else { - // playerWidth was not defined via HTML attributes - if (this.player === 'html5') { - newWidth = $(window).width(); - } - else { - newWidth = this.$ableWrapper.width(); - } - newHeight = Math.round(newWidth * this.aspectRatio); - } - } - else if (this.fullscreen) { - this.$ableWrapper.addClass('fullscreen'); - newWidth = $(window).width(); + // so are reflective of the actual size of the media + // use these values to calculate aspectRatio + this.aspectRatio = height / width; + if (this.playerWidth) { + // default width is already defined via a width or data-width attribute. Use that. + newWidth = this.playerWidth; + if (this.playerHeight) { + newHeight = this.playerHeight; + } else { + newHeight = Math.round(newWidth * this.aspectRatio); + this.playerHeight = newHeight; + } + } else { + // playerWidth was not defined via HTML attributes + newWidth = (this.player === 'html5') ? $(window).width() : this.$ableWrapper.width(); + newHeight = Math.round(newWidth * this.aspectRatio); + } + } else if (this.fullscreen) { + this.$ableWrapper.addClass('fullscreen'); + newWidth = $(window).width(); // the 5 pixel buffer is arbitrary, but results in a better fit for all browsers - newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; + newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; this.positionCaptions('overlay'); - } - else { // not fullscreen, and not first time initializing player + } else { // not fullscreen, and not first time initializing player this.$ableWrapper.removeClass('fullscreen'); - if (this.player === 'html5') { - if (this.playerWidth) { - newWidth = this.playerWidth; - } - else { - // use full size of window - // player will be downsized to fit container if CSS requires it - newWidth = $(window).width(); - } - } - else { - newWidth = this.$ableWrapper.width(); + if (this.player === 'html5') { + newWidth = (this.playerWidth) ? this.playerWidth : $(window).width(); + } else { + newWidth = this.$ableWrapper.width(); } - newHeight = Math.round(newWidth * this.aspectRatio); - this.positionCaptions(this.prefCaptionsPosition); + newHeight = Math.round(newWidth * this.aspectRatio); + this.positionCaptions(this.prefCaptionsPosition); } if (this.debug) { - + } // Now size the player with newWidth and newHeight - if (this.player === 'youtube' \|\| this.player === 'vimeo') { - $iframe = this.$ableWrapper.find('iframe'); - if (this.player === 'youtube' && this.youTubePlayer) { - // alternatively, YouTube API offers a method for setting the video size - // this adds width and height attributes to the iframe - // but might have other effects, so best to do it this way - this.youTubePlayer.setSize(newWidth,newHeight); - } - else { - // Vimeo API does not have a method for changing size of player - // Therefore, need to change iframe attributes directly + if (this.player === 'youtube' \|\| this.player === 'vimeo') { + $iframe = this.$ableWrapper.find('iframe'); + if (this.player === 'youtube' && this.youTubePlayer) { + // alternatively, YouTube API offers a method for setting the video size + // this adds width and height attributes to the iframe + // but might have other effects, so best to do it this way + this.youTubePlayer.setSize(newWidth,newHeight); + } else { + // Vimeo API does not have a method for changing size of player + // Therefore, need to change iframe attributes directly $iframe.attr({ 'width': newWidth, 'height': newHeight - }); + }); } - if (this.playerWidth && this.playerHeight) { - if (this.fullscreen) { - // remove constraints - $iframe.css({ + if (this.playerWidth && this.playerHeight) { + if (this.fullscreen) { + // remove constraints + $iframe.css({ 'max-width': '', 'max-height': '' - }); - } - else { + }); + } else { // use CSS on iframe to enforce explicitly defined size constraints - $iframe.css({ + $iframe.css({ 'max-width': this.playerWidth + 'px', 'max-height': this.playerHeight + 'px' }); } } - } - else if (this.player === 'html5') { + } else if (this.player === 'html5') { if (this.fullscreen) { this.$media.attr({ 'width': newWidth, @@ -10495,46 +9112,37 @@ if (typeof module !== "undefined" && module.exports) { 'width': newWidth, 'height': newHeight }); - } - else { - // No constraints. Let CSS handle the positioning. + } else { + // No constraints. Let CSS handle the positioning. this.$media.removeAttr('width height'); - this.$ableWrapper.css({ - 'width': newWidth + 'px', - 'height': 'auto' - }); - } + this.$ableWrapper.removeAttr( 'style' ); + } } // Resize captions if (typeof this.$captionsDiv !== 'undefined') { - // Font-size is too small in full screen view - // use viewport units (vw) instead - // % units work fine if not fullscreen - // prefCaptionSize is expressed as a percentage - captionSize = parseInt(this.prefCaptionsSize,10); - if (this.fullscreen) { - captionSize = (captionSize / 100) + 'vw'; + // Font-size is too small in full screen view + // use viewport units (vw) for large viewports + // % units work fine if not fullscreen + // prefCaptionSize is expressed as a percentage + var isSmallScreen = false; + var windowWidth = window.screen.width; + if ( windowWidth < 1200 ) { + isSmallScreen = true; } - else { - captionSize = captionSize + '%'; + captionSize = parseInt(this.prefCaptionsSize,10); + if (this.fullscreen && ! isSmallScreen ) { + captionSize = (captionSize / 100) + 'vw'; + } else if ( this.fullscreen && isSmallScreen ) { + captionSize = '1.2rem'; + } else { + captionSize = captionSize + '%'; } this.$captionsDiv.css({ 'font-size': captionSize }); } - - // Reposition alert message (video player only) - // just below the vertical center of the mediaContainer - // hopefully above captions, but not too far from the controller bar - if (this.mediaType === 'video') { - alertTop = Math.round(this.$mediaContainer.height() / 3) * 2; - this.$alertBox.css({ - top: alertTop + 'px' - }); - } - - this.refreshControls(); + this.refreshControls(); }; AblePlayer.prototype.retrieveOffscreenWindow = function( which, width, height ) { @@ -10547,8 +9155,7 @@ if (typeof module !== "undefined" && module.exports) { if (which == 'transcript') { window = this.$transcriptArea; - } - else if (which == 'sign') { + } else if (which == 'sign') { window = this.$signWindow; } windowWidth = window.width(); @@ -10577,41 +9184,18 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.getHighestZIndex = function() { - - // returns the highest z-index on page - // used to ensure dialogs (or potentially other windows) are on top - - var max, $elements, z; - max = 0; - - // exclude the Able Player dialogs and windows - $elements = $('body ').not('.able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area'); - - $elements.each(function(){ - z = $(this).css('z-index'); - if (Number.isInteger(+z)) { // work only with integer values, not 'auto' - if (parseInt(z) > max) { - max = parseInt(z); - } - } - }); - return max; - }; - AblePlayer.prototype.updateZIndex = function(which) { // update z-index of 'transcript' or 'sign', relative to each other // direction is always 'up' (i.e., move window to top) // windows come to the top when the user clicks on them - var defHighZ, defLowZ, highestZ, transcriptZ, signZ, newHighZ, newLowZ; + var defHighZ, defLowZ, transcriptZ, signZ, newHighZ, newLowZ; // set the default z-indexes, as defined in ableplayer.css defHighZ = 8000; // by default, assigned to the sign window defLowZ = 7000; // by default, assigned to the transcript area - highestZ = this.getHighestZIndex(); // highest z-index on the page, excluding Able Player windows & modals - // NOTE: Although highestZ is collected here, it currently isn't used. + // Previously collected the highest z-index. Removed in 4.6. // If something on the page has a higher z-index than the transcript or sign window, do we care? // Excluding it here assumes "No". Our immediate concern is with the relationship between our own components. // If we elevate our z-indexes so our content is on top, we run the risk of starting a z-index war. @@ -10625,8 +9209,7 @@ if (typeof module !== "undefined" && module.exports) { // restore to the default this.$transcriptArea.css('z-index',defLowZ); } - } - else if (typeof this.$signWindow !== 'undefined') { + } else if (typeof this.$signWindow !== 'undefined') { signZ = parseInt(this.$signWindow.css('z-index')); if (signZ > defHighZ) { // restore to the default @@ -10646,24 +9229,20 @@ if (typeof module !== "undefined" && module.exports) { // the two windows are equal; restore defaults (the target window will be on top) newHighZ = defHighZ; newLowZ = defLowZ; - } - else if (transcriptZ > signZ) { + } else if (transcriptZ > signZ) { if (which === 'transcript') { // transcript is already on top; nothing to do return false; - } - else { + } else { // swap z's newHighZ = transcriptZ; newLowZ = signZ; } - } - else { // signZ is greater + } else { // signZ is greater if (which === 'sign') { // sign is already on top; nothing to do return false; - } - else { + } else { newHighZ = signZ; newLowZ = transcriptZ; } @@ -10672,8 +9251,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { this.$transcriptArea.css('z-index',newHighZ); this.$signWindow.css('z-index',newLowZ); - } - else if (which === 'sign') { + } else if (which === 'sign') { this.$signWindow.css('z-index',newHighZ); this.$transcriptArea.css('z-index',newLowZ); } @@ -10690,7 +9268,7 @@ if (typeof module !== "undefined" && module.exports) { // This was a group decision based on the belief that users may want a transcript // that is in a different language than the captions - var i, captions, descriptions, chapters, meta, langHasChanged; + var i, captions, descriptions, chapters, meta; // Captions for (i = 0; i < this.captions.length; i++) { @@ -10732,21 +9310,20 @@ if (typeof module !== "undefined" && module.exports) { // chapters popup is setup automatically when setupPopups() is called later with no param // not sure why it was included here. // this.setupPopups('chapters'); - } - else if (source === 'transcript') { + } else if (source === 'transcript') { this.transcriptCaptions = captions; this.transcriptChapters = chapters; this.transcriptDescriptions = descriptions; } if (this.selectedDescriptions) { - // updating description voice to match new description language - this.setDescriptionVoice(); - if (this.$sampleDescDiv) { - if (this.sampleText) { - for (i = 0; i < this.sampleText.length; i++) { - if (this.sampleText[i].lang === this.selectedDescriptions.language) { - this.currentSampleText = this.sampleText[i]['text']; - this.$sampleDescDiv.html(this.currentSampleText); + // updating description voice to match new description language + this.setDescriptionVoice(); + if (this.$sampleDescDiv) { + if (this.sampleText) { + for (i = 0; i < this.sampleText.length; i++) { + if (this.sampleText[i].lang === this.selectedDescriptions.language) { + this.currentSampleText = this.sampleText[i]['text']; + this.$sampleDescDiv.html(this.currentSampleText); } } } @@ -10878,7 +9455,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 1; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); thisObj.refreshControls("captions"); }; }; @@ -10914,7 +9491,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 0; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); if (!this.swappingSrc) { thisObj.refreshControls("captions"); thisObj.updateCaption(); @@ -10941,10 +9518,7 @@ if (typeof module !== "undefined" && module.exports) { if (typeof thisCaption !== "undefined") { if (this.currentCaption !== thisCaption) { // it's time to load the new caption into the container div - captionText = this.flattenCueForCaption(cues[thisCaption]).replace( - /\n/g, - "<br>" - ); + captionText = this.flattenCueForCaption(cues[thisCaption]).replace( /\n/g, "<br>" ); this.$captionsDiv.html(captionText); this.currentCaption = thisCaption; @@ -11026,24 +9600,24 @@ if (typeof module !== "undefined" && module.exports) { switch (pref) { case "prefCaptionsFont": - options[0] = ["serif", this.tt.serif]; - options[1] = ["sans-serif", this.tt.sans]; - options[2] = ["cursive", this.tt.cursive]; - options[3] = ["fantasy", this.tt.fantasy]; - options[4] = ["monospace", this.tt.monospace]; + options[0] = ["serif", this.translate( 'serif', 'serif' )]; + options[1] = ["sans-serif", this.translate( 'sans', 'sans-serif' )]; + options[2] = ["cursive", this.translate( 'cursive', 'cursive' )]; + options[3] = ["fantasy", this.translate( 'fantasy', 'fantasy' )]; + options[4] = ["monospace", this.translate( 'monospace', 'monospace' )]; break; case "prefCaptionsColor": case "prefCaptionsBGColor": // HTML color values must be in English - options[0] = ["white", this.tt.white]; - options[1] = ["yellow", this.tt.yellow]; - options[2] = ["green", this.tt.green]; - options[3] = ["cyan", this.tt.cyan]; - options[4] = ["blue", this.tt.blue]; - options[5] = ["magenta", this.tt.magenta]; - options[6] = ["red", this.tt.red]; - options[7] = ["black", this.tt.black]; + options[0] = ["white", this.translate( 'white', 'white' )]; + options[1] = ["yellow", this.translate( 'yellow', 'yellow' )]; + options[2] = ["green", this.translate( 'green', 'green' )]; + options[3] = ["cyan", this.translate( 'cyan', 'cyan' )]; + options[4] = ["blue", this.translate( 'blue', 'blue' )]; + options[5] = ["magenta", this.translate( 'magenta', 'magenta' )]; + options[6] = ["red", this.translate( 'red', 'red' )]; + options[7] = ["black", this.translate( 'black', 'black' )]; break; case "prefCaptionsSize": @@ -11063,8 +9637,8 @@ if (typeof module !== "undefined" && module.exports) { break; case "prefCaptionsStyle": - options[0] = this.tt.captionsStylePopOn; - options[1] = this.tt.captionsStyleRollUp; + options[0] = this.translate( 'captionsStylePopOn', 'Pop-on' ); + options[1] = this.translate( 'captionsStyleRollUp', 'Roll-up' ); break; case "prefCaptionsPosition": @@ -11102,7 +9676,7 @@ if (typeof module !== "undefined" && module.exports) { // this function handles stylizing of the sample caption text in the Prefs dialog // plus the actual production captions // TODO: consider applying the same user prefs to visible text-based description - var property, newValue, opacity, lineHeight; + var property, newValue, opacity; if (typeof $element !== "undefined") { if (pref == "prefCaptionsPosition") { @@ -11198,16 +9772,17 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.populateChaptersDiv = function() { - var headingLevel, headingType, headingId, $chaptersHeading, - $chaptersList; - + var headingLevel, headingType, headingId, $chaptersHeading; + if ( ! this.chaptersDivLocation ) { + return; + } if ($('#' + this.chaptersDivLocation)) { this.$chaptersDiv = $('#' + this.chaptersDivLocation); this.$chaptersDiv.addClass('able-chapters-div'); // empty content from previous build before starting fresh - this.$chaptersDiv.empty(); + this.$chaptersDiv.empty(); // add optional header if (this.chaptersTitle) { @@ -11223,10 +9798,9 @@ if (typeof module !== "undefined" && module.exports) { this.$chaptersNav = $('<nav>'); if (this.chaptersTitle) { - this.$chaptersNav.attr('aria-labelledby',headingId); - } - else { - this.$chaptersNav.attr('aria-label',this.tt.chapters); + this.$chaptersNav.attr( 'aria-labelledby', headingId ); + } else { + this.$chaptersNav.attr( 'aria-label', this.translate( 'chapters', 'Chapters' ) ); } this.$chaptersDiv.append(this.$chaptersNav); @@ -11238,32 +9812,25 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.updateChaptersList = function() { var thisObj, cues, $chaptersList, c, thisChapter, - $chapterItem, $chapterButton, buttonId, hasDefault, - getClickFunction, $clickedItem, $chaptersList, thisChapterIndex; + $chapterItem, $chapterButton, hasDefault, + getClickFunction, $clickedItem, $chaptersList; thisObj = this; - // TODO: Update this so it can change the chapters popup menu + // TODO: Update this so it can change the chapters popup menu // currently it only works if chapters are in an external container if (!this.$chaptersNav) { return false; } if (typeof this.useChapterTimes === 'undefined') { - if (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) { - this.useChapterTimes = true; - } - else { - this.useChapterTimes = false; - } + this.useChapterTimes = (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) ? true : false; } if (this.useChapterTimes) { cues = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { cues = this.chapters[0].cues; - } - else { + } else { cues = []; } if (cues.length > 0) { @@ -11282,7 +9849,6 @@ if (typeof module !== "undefined" && module.exports) { thisObj.seekTrigger = 'chapter'; $clickedItem = $(this).closest('li'); $chaptersList = $(this).closest('ul').find('li'); - thisChapterIndex = $chaptersList.index($clickedItem); $chaptersList.removeClass('able-current-chapter') .children('button').removeAttr('aria-current'); $clickedItem.addClass('able-current-chapter') @@ -11351,7 +9917,7 @@ if (typeof module !== "undefined" && module.exports) { return; } - var chapters, i, thisChapterIndex, chapterLabel; + var chapters, i, thisChapterIndex; chapters = this.selectedChapters.cues; for (i = 0; i < chapters.length; i++) { @@ -11401,12 +9967,10 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends, adjust chapter end to match video end chapterEnd = this.duration; this.currentChapter.end = this.duration; - } - else { + } else { chapterEnd = this.currentChapter.end; } - } - else { // this is not the last chapter + } else { // this is not the last chapter chapterEnd = this.currentChapter.end; } return chapterEnd - this.currentChapter.start; @@ -11422,8 +9986,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.elapsed > this.currentChapter.start) { return this.elapsed - this.currentChapter.start; - } - else { + } else { return 0; } }; @@ -11436,12 +9999,10 @@ if (typeof module !== "undefined" && module.exports) { var newTime = this.currentChapter.start + chapterTime; if (newTime > this.currentChapter.end) { return this.currentChapter.end; - } - else { + } else { return newTime; } - } - else { + } else { return chapterTime; } }; @@ -11462,7 +10023,7 @@ if (typeof module !== "undefined" && module.exports) { setTimeout(function() { thisObj.hidingPopup = false; }, 100); - thisObj.$chaptersButton.focus(); + thisObj.$chaptersButton.trigger('focus'); } }; @@ -11516,7 +10077,7 @@ if (typeof module !== "undefined" && module.exports) { cueText = this.flattenCueForMeta(cues[thisMeta]); cueLines = cueText.split("\n"); for (i = 0; i < cueLines.length; i++) { - line = $.trim(cueLines[i]); + line = cueLines[i].trim(); if (line.toLowerCase().trim() === "pause") { // don't show big play button when pausing via metadata this.hideBigPlayButton = true; @@ -11524,7 +10085,7 @@ if (typeof module !== "undefined" && module.exports) { } else if (line.toLowerCase().substring(0, 6) == "focus:") { focusTarget = line.substring(6).trim(); if ($(focusTarget).length) { - $(focusTarget).focus(); + $(focusTarget).trigger('focus'); } } else { if ($(line).length) { @@ -11535,7 +10096,11 @@ if (typeof module !== "undefined" && module.exports) { typeof showDuration !== "undefined" && !isNaN(showDuration) ) { - $(line).show().delay(showDuration).fadeOut(); + $(line).show(); + const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + delay(showDuration).then(() => { + $(line).hide(); + }); } else { // no duration specified. Just show the element until end time specified in VTT file $(line).show(); @@ -11607,11 +10172,11 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.setupTranscript = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - if (this.usingYouTubeCaptions \|\| this.usingVimeoCaptions) { - // a transcript is not possible + if (this.usingYouTubeCaptions \|\| this.usingVimeoCaptions \|\| this.hideTranscriptButton ) { + // a transcript is not possible or is disabled. this.transcriptType = null; deferred.resolve(); } else { @@ -11626,10 +10191,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (this.transcriptType) { - if ( - this.transcriptType === "popup" \|\| - this.transcriptType === "external" - ) { + if ( this.transcriptType === "popup" \|\| this.transcriptType === "external" ) { this.injectTranscriptArea(); deferred.resolve(); } else if (this.transcriptType === "manual") { @@ -11656,7 +10218,7 @@ if (typeof module !== "undefined" && module.exports) { this.$transcriptArea = $("<div>", { class: "able-transcript-area", role: "dialog", - "aria-label": this.tt.transcriptTitle, + "aria-label": this.translate( 'transcriptTitle', 'Transcript' ), }); this.$transcriptToolbar = $("<div>", { @@ -11676,11 +10238,15 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); - this.$transcriptToolbar.append( - $autoScrollLabel, - this.$autoScrollTranscriptCheckbox - ); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); + $autoScrollContainer = $( '<div>', { + 'class': 'autoscroll-transcript' + }); + $autoScrollContainer.append( + $autoScrollLabel, + this.$autoScrollTranscriptCheckbox + ); + this.$transcriptToolbar.append( $autoScrollContainer ); // Add field for selecting a transcript language // Only necessary if there is more than one language @@ -11690,7 +10256,7 @@ if (typeof module !== "undefined" && module.exports) { }); $languageSelectLabel = $("<label>", { for: "transcript-language-select-" + this.mediaId, - }).text(this.tt.language); + }).text( this.translate( 'language', 'Language' ) ); this.$transcriptLanguageSelect = $("<select>", { id: "transcript-language-select-" + this.mediaId, }); @@ -11717,6 +10283,8 @@ if (typeof module !== "undefined" && module.exports) { // If client has provided separate transcript location, put it there. // Otherwise append it to the body if (this.transcriptDivLocation) { + this.$transcriptArea.removeAttr( 'role' ); + this.$transcriptArea.removeAttr( 'aria-label' ); $("#" + this.transcriptDivLocation).append(this.$transcriptArea); } else { this.$ableWrapper.append(this.$transcriptArea); @@ -11743,7 +10311,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addTranscriptAreaEvents = function () { var thisObj = this; - this.$autoScrollTranscriptCheckbox.click(function () { + this.$autoScrollTranscriptCheckbox.on( 'click', function () { thisObj.handleTranscriptLockToggle( thisObj.$autoScrollTranscriptCheckbox.prop("checked") ); @@ -11763,7 +10331,7 @@ if (typeof module !== "undefined" && module.exports) { ); if (typeof this.$transcriptLanguageSelect !== "undefined") { - this.$transcriptLanguageSelect.on("click mousedown", function (e) { + this.$transcriptLanguageSelect.on('click', function (e) { // execute default behavior // prevent propagation of mouse event to toolbar or window e.stopPropagation(); @@ -11813,7 +10381,7 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); // Add an auto-scroll checkbox to the toolbar. this.$autoScrollTranscriptCheckbox = $autoScrollInput; @@ -11914,7 +10482,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$transcriptArea.length > 0) { this.$transcriptArea .find("span.able-transcript-seekpoint") - .click(function (e) { + .on( 'click', function (e) { thisObj.seekTrigger = "transcript"; var spanStart = parseFloat($(this).attr("data-start")); // Add a tiny amount so that we're inside the span. @@ -11993,9 +10561,9 @@ if (typeof module !== "undefined" && module.exports) { if (typeof this.transcriptTitle !== "undefined") { transcriptTitle = this.transcriptTitle; } else if (this.lyricsMode) { - transcriptTitle = this.tt.lyricsTitle; + transcriptTitle = this.translate( 'lyricsTitle', 'Lyrics' ); } else { - transcriptTitle = this.tt.transcriptTitle; + transcriptTitle = this.translate( 'transcriptTitle', 'Transcript' ); } if (!this.transcriptDivLocation) { @@ -12218,7 +10786,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (comp.type === "b" \|\| comp.type == "i") { - result.push($tag, " "); + result.push($tag); } } else { for (var i = 0; i < comp.children.length; i++) { @@ -12231,13 +10799,22 @@ if (typeof module !== "undefined" && module.exports) { }; for (var i = 0; i < cap.components.children.length; i++) { + var next_child_tagname; + if ( i < cap.components.children.length - 1 ) { + next_child_tagname = cap.components.children[i + 1].tagName; + } var results = flattenComponentForCaption(cap.components.children[i]); for (var jj = 0; jj < results.length; jj++) { var result = results[jj]; if (typeof result === "string") { - if (thisObj.lyricsMode) { - // add <br> BETWEEN each caption and WITHIN each caption (if payload includes "\n") - result = result.replace(/\n/g, "<br>") + "<br>"; + if (thisObj.lyricsMode) { + // add <br> WITHIN each caption (if payload includes "\n") + result = result.replace(/\n/g,'<br>'); + + // add <br> BETWEEN each caption, but do not consider sibling style tags within this caption as the next caption! + if ( !next_child_tagname \|\| ( next_child_tagname !== 'i' && next_child_tagname !== 'b' ) ) { + result += '<br>'; + } } else { // just add a space between captions result += " "; @@ -12326,7 +10903,6 @@ if (typeof module !== "undefined" && module.exports) { // organize transcript into blocks using [] and () as starting points var $components = $main.children(); var spanCount = 0; - var openBlock = true; $components.each(function () { if ($(this).hasClass("able-transcript-caption")) { if ( @@ -12336,10 +10912,7 @@ if (typeof module !== "undefined" && module.exports) { // this caption includes a bracket or parenth. Start a new block // close the previous block first if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } @@ -12348,16 +10921,24 @@ if (typeof module !== "undefined" && module.exports) { } else { // this is not a caption. Close the caption block if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } }); + // Close out remaining temp blocks. + $main = wrapTranscriptBlocks( $main ); + return $main; }; + + var wrapTranscriptBlocks = function( $main ) { + $main.find(".able-block-temp") + .removeClass("able-block-temp") + .wrapAll('<div class="able-transcript-block"></div>'); + + return $main; + } })(jQuery); (function ($) { @@ -12376,7 +10957,7 @@ if (typeof module !== "undefined" && module.exports) { // sanitize search string var cleanSearchString = DOMPurify.sanitize(this.searchString); if ($("#" + this.SearchDiv)) { - var searchStringHtml = "<p>" + this.tt.resultsSummary1 + " "; + var searchStringHtml = "<p>" + this.translate( 'resultsSummary1', 'You searched for:') + ' '; searchStringHtml += '<span id="able-search-term-echo">' + cleanSearchString + "</span>"; searchStringHtml += "</p>"; @@ -12388,19 +10969,16 @@ if (typeof module !== "undefined" && module.exports) { var $resultsSummary = $("<p>", { class: "able-search-results-summary", }); - var resultsSummaryText = this.tt.resultsSummary2; - resultsSummaryText += - " <strong>" + resultsArray.length + "</strong> "; - resultsSummaryText += this.tt.resultsSummary3 + " "; - resultsSummaryText += this.tt.resultsSummary4; - $resultsSummary.html(resultsSummaryText); + var resultsSummaryText = this.translate( 'resultsSummary2', 'Found %1 matching items.', [ '<strong>' + resultsArray.length + '</strong>' ] ); + resultsSummaryText += ' ' + this.translate( 'resultsSummary3', 'Click the time associated with any item to play the video from that point.' ); + $resultsSummary.html( resultsSummaryText ); var $resultsList = $("<ul>"); for (var i = 0; i < resultsArray.length; i++) { var resultId = "aria-search-result-" + i; var $resultsItem = $("<li>", {}); var itemStartTime = this.secondsToTime(resultsArray[i]["start"]); var itemLabel = - this.tt.searchButtonLabel + " " + itemStartTime["title"]; + this.translate( 'searchButtonLabel', 'Play at %1', [ itemStartTime["title"] ] ); var itemStartSpan = $("<button>", { class: "able-search-results-time", "data-start": resultsArray[i]["start"], @@ -12423,16 +11001,16 @@ if (typeof module !== "undefined" && module.exports) { class: "able-search-result-text", id: resultId, }); - itemText.html("..." + resultsArray[i]["caption"] + "..."); + itemText.html('...' + resultsArray[i]["caption"] + '...'); $resultsItem.append(itemStartSpan, itemText); $resultsList.append($resultsItem); } - $("#" + this.searchDiv) + $('#' + this.searchDiv) .html(searchStringHtml) .append($resultsSummary, $resultsList); } else { - var noResults = $("<p>").text(this.tt.noResultsFound); - $("#" + this.searchDiv) + var noResults = $('<p>').text( this.translate( 'noResultsFound', 'No results found.' ) ); + $('#' + this.searchDiv) .html(searchStringHtml) .append(noResults); } @@ -12526,36 +11104,36 @@ if (typeof module !== "undefined" && module.exports) { if (hours > 0) { value += hours + ":"; if (hours == 1) { - title += "1 " + this.tt.hour + " "; + title += "1 " + this.translate( 'hour', 'hour' ) + " "; } else { - title += hours + " " + this.tt.hours + " "; + title += hours + " " + this.translate( 'hours', 'hours' ) + " "; } } if (minutes < 10) { value += "0" + minutes + ":"; if (minutes > 0) { if (minutes == 1) { - title += "1 " + this.tt.minute + " "; + title += "1 " + this.translate( 'minute', 'minute' ) + " "; } else { - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } } } else { value += minutes + ":"; - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } if (seconds < 10) { value += "0" + seconds; if (seconds > 0) { if (seconds == 1) { - title += "1 " + this.tt.second + " "; + title += "1 " + this.translate( 'second', 'second' ) + " "; } else { - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } } } else { value += seconds; - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } var time = []; time["value"] = value; @@ -12568,7 +11146,6 @@ if (typeof module !== "undefined" && module.exports) { // Media events AblePlayer.prototype.onMediaUpdateTime = function (duration, elapsed) { - // duration and elapsed are passed from callback functions of Vimeo API events // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx @@ -12576,17 +11153,17 @@ if (typeof module !== "undefined" && module.exports) { this.getMediaTimes(duration,elapsed).then(function(mediaTimes) { thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - if (thisObj.duration > 0) { + if (thisObj.duration > 0) { // do all the usual time-sync stuff during playback if (thisObj.prefHighlight === 1) { thisObj.highlightTranscript(thisObj.elapsed); - } + } thisObj.updateCaption(thisObj.elapsed); thisObj.showDescription(thisObj.elapsed); thisObj.updateChapter(thisObj.elapsed); thisObj.updateMeta(thisObj.elapsed); - thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); - } + thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); + } }); }; @@ -12613,34 +11190,32 @@ if (typeof module !== "undefined" && module.exports) { this.playlistIndex = 0; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(0); - } - else { + } else { this.playing = false; this.paused = true; } - } - else { + } else { // this is not the last track. Play the next one. this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex) } } - this.refreshControls('init'); + this.refreshControls(); }; AblePlayer.prototype.onMediaNewSourceLoad = function () { - var loadIsComplete = false; + var loadIsComplete = false; if (this.cueingPlaylistItem) { - // this variable was set in order to address bugs caused by multiple firings of media 'end' event + // this variable was set to address bugs caused by multiple firings of media 'end' event // safe to reset now this.cueingPlaylistItem = false; } - if (this.recreatingPlayer) { - // same as above; different bugs - this.recreatingPlayer = false; + if (this.recreatingPlayer) { + // same as above; different bugs + this.recreatingPlayer = false; } if (this.playbackRate) { // user has set playbackRate on a previous src or track @@ -12651,10 +11226,9 @@ if (typeof module !== "undefined" && module.exports) { if (!this.startedPlaying \|\| this.okToPlay) { // start playing; no further user action is required this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.seekTrigger == 'restart' \|\| + } else if (this.seekTrigger == 'restart' \|\| this.seekTrigger == 'chapter' \|\| this.seekTrigger == 'transcript' \|\| this.seekTrigger == 'search' @@ -12663,67 +11237,59 @@ if (typeof module !== "undefined" && module.exports) { // Not included: elements where user might click multiple times in succession // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play this.playMedia(); - loadIsComplete = true; - } - else if (this.swappingSrc) { + loadIsComplete = true; + } else if (this.swappingSrc) { // new source file has just been loaded if (this.hasPlaylist) { // a new source file from the playlist has just been loaded if ((this.playlistIndex !== this.$playlist.length) \|\| this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.swapTime > 0) { - if (this.seekStatus === 'complete') { + } else if (this.swapTime > 0) { + if (this.seekStatus === 'complete') { if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else if (this.seekStatus === 'seeking') { - } - else { - if (this.swapTime === this.elapsed) { - // seek is finished! - this.seekStatus = 'complete'; + loadIsComplete = true; + } else if (this.seekStatus === 'seeking') { + // Do nothing. + } else { + if (this.swapTime === this.elapsed) { + // seek is finished! + this.seekStatus = 'complete'; if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else { - // seeking hasn't started yet - // first, determine whether it's possible - if (this.hasDescTracks) { + loadIsComplete = true; + } else { + // seeking hasn't started yet + // first, determine whether it's possible + if (this.hasDescTracks) { // do nothing. Unable to seek ahead if there are descTracks - loadIsComplete = true; - } - else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { + loadIsComplete = true; + } else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { // durations of two sources are close enough to making seek ahead in new source ok - this.seekStatus = 'seeking'; + this.seekStatus = 'seeking'; this.seekTo(this.swapTime); - } - else { - // durations of two sources are too dissimilar to support seeking ahead to swapTime. - loadIsComplete = true; + } else { + // durations of two sources are too dissimilar to support seeking ahead to swapTime. + loadIsComplete = true; } } } - } - else { - // swapTime is 0. No seeking required. - if (this.playing) { - this.playMedia(); - // swap is complete. Reset vars. - loadIsComplete = true; + } else { + // swapTime is 0. No seeking required. + if (this.playing) { + this.playMedia(); + // swap is complete. Reset vars. + loadIsComplete = true; } } - } - else if (!this.startedPlaying) { + } else if (!this.startedPlaying) { if (this.startTime > 0) { if (this.seeking) { // a seek has already been initiated @@ -12732,94 +11298,84 @@ if (typeof module !== "undefined" && module.exports) { if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; - } - else { + loadIsComplete = true; + } else { // haven't started seeking yet this.seekTo(this.startTime); } - } - else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { + } else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { this.seekToChapter(this.defaultChapter); - } - else { + } else { // there is no startTime, therefore no seeking required if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.hasPlaylist) { - // new source media is part of a playlist, but user didn't click on it + } else if (this.hasPlaylist) { + // new source media is part of a playlist, but user didn't click on it // (and somehow, swappingSrc is false) - // this may happen when the previous track ends and next track loads - // this same code is called above when swappingSrc is true + // this may happen when the previous track ends and next track loads + // this same code is called above when swappingSrc is true if ((this.playlistIndex !== this.$playlist.length) \|\| this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else { - // None of the above. + } else { + // None of the above. // User is likely seeking to a new time, but not loading a new media source - // need to reset vars - loadIsComplete = true; - } - if (loadIsComplete) { - // reset vars - this.swappingSrc = false; - this.seekStatus = null; - this.swapTime = 0; + // need to reset vars + loadIsComplete = true; + } + if (loadIsComplete) { + // reset vars + this.swappingSrc = false; + this.seekStatus = null; + this.swapTime = 0; this.seekTrigger = null; - this.seekingFromTranscript = false; + this.seekingFromTranscript = false; this.userClickedPlaylist = false; - this.okToPlay = false; + this.okToPlay = false; } - this.refreshControls('init'); - if (this.$focusedElement) { - this.restoreFocus(); - this.$focusedElement = null; + this.refreshControls(); + if (this.$focusedElement) { + this.restoreFocus(); + this.$focusedElement = null; + this.activeMedia = null; } }; - AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { + AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { - // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src - // The durations may not be exact, but they might be "close enough" - // returns true if "close enough", otherwise false + // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src + // The durations may not be exact, but they might be "close enough" + // returns true if "close enough", otherwise false - var tolerance, diff; - - tolerance = 1; // number of seconds between rounded durations that is considered "close enough" - - diff = Math.abs(Math.round(d1) - Math.round(d2)); - - if (diff <= tolerance) { - return true; - } - else { - return false; - } + var tolerance, diff; + + tolerance = 1; // number of seconds between rounded durations that is considered "close enough" + diff = Math.abs(Math.round(d1) - Math.round(d2)); + + return (diff <= tolerance) ? true : false; }; - AblePlayer.prototype.restoreFocus = function() { + AblePlayer.prototype.restoreFocus = function() { // function called after player has been rebuilt (during media swap) - // the original focusedElement no longer exists, - // but this function finds a match in the new player - // and places focus there + // the original focusedElement no longer exists, + // but this function finds a match in the new player + // and places focus there - var classList; + var classList, $mediaParent; - if (this.$focusedElement) { - - if ((this.$focusedElement).attr('role') === 'button') { + if ( this.$focusedElement && null !== this.activeMedia ) { + $mediaParent = $( '#' + this.activeMedia ).closest( '.able' ); + if ( (this.$focusedElement).attr('role') === 'button' ) { classList = this.$focusedElement.attr("class").split(/\s+/); $.each(classList, function(index, item) { if (item.substring(0,20) === 'able-button-handler-') { - $('div.able-controller div.' + item).focus(); + $mediaParent.find('div.able-controller div.' + item).trigger('focus'); } }); } @@ -12842,150 +11398,136 @@ if (typeof module !== "undefined" && module.exports) { thisObj.showDescription(position); thisObj.updateChapter(thisObj.convertChapterTimeToVideoTime(position)); thisObj.updateMeta(position); - thisObj.refreshControls('init'); - }).on('stopTracking', function (e, position) { - if (thisObj.useChapterTimes) { - thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); - } - else { - thisObj.seekTo(position); - } - if (!thisObj.pausedBeforeTracking) { - setTimeout(function () { - thisObj.playMedia(); - }, 200); - } - }); - }; - - AblePlayer.prototype.onClickPlayerButton = function (el) { - - var whichButton, prefsPopup; - - whichButton = this.getButtonNameFromClass($(el).attr('class')); - - if (whichButton === 'play') { - this.clickedPlay = true; - this.handlePlay(); - } - else if (whichButton === 'restart') { - this.seekTrigger = 'restart'; - this.handleRestart(); - } - else if (whichButton === 'previous') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'previous'; - this.buttonWithFocus = 'previous'; - this.handlePrevTrack(); - } - else if (whichButton === 'next') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'next'; - this.buttonWithFocus = 'next'; - this.handleNextTrack(); - } - else if (whichButton === 'rewind') { - this.seekTrigger = 'rewind'; - this.handleRewind(); - } - else if (whichButton === 'forward') { - this.seekTrigger = 'forward'; - this.handleFastForward(); - } - else if (whichButton === 'mute') { - this.handleMute(); - } - else if (whichButton === 'volume') { - this.handleVolumeButtonClick(); - } - else if (whichButton === 'faster') { - this.handleRateIncrease(); - } - else if (whichButton === 'slower') { - this.handleRateDecrease(); - } - else if (whichButton === 'captions') { - this.handleCaptionToggle(); - } - else if (whichButton === 'chapters') { - this.handleChapters(); - } - else if (whichButton === 'descriptions') { - this.handleDescriptionToggle(); - } - else if (whichButton === 'sign') { - if (!this.closingSign) { - this.handleSignToggle(); + thisObj.refreshControls(); + }).on('stopTracking', function (e, position) { + if (thisObj.useChapterTimes) { + thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); + } else { + thisObj.seekTo(position); } - } - else if (whichButton === 'preferences') { - if ($(el).attr('data-prefs-popup') === 'menu') { - this.handlePrefsClick(); + if (!thisObj.pausedBeforeTracking) { + setTimeout(function () { + thisObj.playMedia(); + }, 200); } - else { - this.showingPrefsDialog = true; // stopgap - this.closePopups(); - prefsPopup = $(el).attr('data-prefs-popup'); - if (prefsPopup === 'keyboard') { - this.keyboardPrefsDialog.show(); - } - else if (prefsPopup === 'captions') { - this.captionPrefsDialog.show(); + }); + }; + + AblePlayer.prototype.onClickPlayerButton = function (el) { + var whichButton, prefsPopup; + whichButton = this.getButtonNameFromClass($(el).attr('class')); + switch ( whichButton ) { + case 'play': + this.clickedPlay = true; + this.handlePlay(); + break; + case 'restart': + this.seekTrigger = 'restart'; + this.handleRestart(); + break; + case 'previous': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'previous'; + this.buttonWithFocus = 'previous'; + this.handlePrevTrack(); + break; + case 'next': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'next'; + this.buttonWithFocus = 'next'; + this.handleNextTrack(); + break; + case 'rewind': + this.seekTrigger = 'rewind'; + this.handleRewind(); + break; + case 'forward': + this.seekTrigger = 'forward'; + this.handleFastForward(); + break; + case 'mute': + this.handleMute(); + break; + case 'volume': + this.handleVolumeButtonClick(); + break; + case 'faster': + this.handleRateIncrease(); + break; + case 'slower': + this.handleRateDecrease(); + break; + case 'captions': + this.handleCaptionToggle(); + break; + case 'chapters': + this.handleChapters(); + break; + case 'descriptions': + this.handleDescriptionToggle(); + break; + case 'sign': + if ( ! this.closingSign ) { + this.handleSignToggle(); } - else if (prefsPopup === 'descriptions') { - this.descPrefsDialog.show(); + break; + case 'preferences': + if ($(el).attr('data-prefs-popup') === 'menu') { + this.handlePrefsClick(); + } else { + this.showingPrefsDialog = true; // stopgap + this.closePopups(); + prefsPopup = $(el).attr('data-prefs-popup'); + if (prefsPopup === 'keyboard') { + this.keyboardPrefsDialog.show(); + } else if (prefsPopup === 'captions') { + this.captionPrefsDialog.show(); + } else if (prefsPopup === 'descriptions') { + this.descPrefsDialog.show(); + } else if (prefsPopup === 'transcript') { + this.transcriptPrefsDialog.show(); + } + this.showingPrefsDialog = false; } - else if (prefsPopup === 'transcript') { - this.transcriptPrefsDialog.show(); + break; + case 'transcript': + if ( !this.closingTranscript ) { + this.handleTranscriptToggle(); } - this.showingPrefsDialog = false; - } - } - else if (whichButton === 'help') { - this.handleHelpClick(); - } - else if (whichButton === 'transcript') { - if (!this.closingTranscript) { - this.handleTranscriptToggle(); - } - } - else if (whichButton === 'fullscreen') { - this.clickedFullscreenButton = true; - this.handleFullscreenToggle(); + break; + case 'fullscreen': + this.clickedFullscreenButton = true; + this.handleFullscreenToggle(); + break; } }; - AblePlayer.prototype.getButtonNameFromClass = function (classString) { - - // player control buttons all have class="able-button-handler-x" where x is the identifier + AblePlayer.prototype.getButtonNameFromClass = function (classString) { + // player control buttons all have class="able-button-handler-x" where x is the identifier // buttons might also have other classes assigned though + var classes, i; - var classes, i; - - classes = classString.split(' '); - for (i = 0; i < classes.length; i++) { - if (classes[i].substring(0,20) === 'able-button-handler-') { - return classes[i].substring(20); + classes = classString.split(' '); + for (i = 0; i < classes.length; i++) { + if (classes[i].substring(0,20) === 'able-button-handler-') { + return classes[i].substring(20); } - } - return classString; + } + return classString; } AblePlayer.prototype.okToHandleKeyPress = function () { - - // returns true unless user's focus is on a UI element + let defaultReturn = true; + if ( this.prefNoKeyShortcuts === 1 ) { + defaultReturn = false; + } + // returns true unless user's focus is on a UI element or user has disabled keyboard shortcuts. // that is likely to need supported keystrokes, including space - var activeElement = AblePlayer.getActiveDOMElement(); - if ($(activeElement).prop('tagName') === 'INPUT') { - return false; - } - else { - return true; - } + return ($(activeElement).prop('tagName') === 'INPUT') ? false : defaultReturn; }; AblePlayer.prototype.onPlayerKeyPress = function (e) { @@ -12993,24 +11535,21 @@ if (typeof module !== "undefined" && module.exports) { // handle keystrokes (using DHTML Style Guide recommended key combinations) // https://web.archive.org/web/20130127004544/http://dev.aol.com/dhtml_style_guide/#mediaplayer // Modifier keys Alt + Ctrl are on by default, but can be changed within Preferences - // NOTE #1: Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down + // - Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down // The rest are reasonable best choices - // NOTE #2: If there are multiple players on a single page, keystroke handlers + // - If there are multiple players on a single page, keystroke handlers // are only bound to the FIRST player - // NOTE #3: The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions + // - The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions // including removal of the "media player" design pattern. There's an issue about that: // https://github.com/w3c/aria-practices/issues/27 - var which, $thisElement; + var key, $thisElement; // Convert to lower case. - which = e.which; - if (which >= 65 && which <= 90) { - which += 32; - } + key = e.key; $thisElement = $(document.activeElement); - if (which === 27) { // escape + if (key === 'Escape') { if (this.$transcriptArea && $.contains(this.$transcriptArea[0],$thisElement[0]) && !this.hidingPopup) { // This element is part of transcript area. this.handleTranscriptToggle(); @@ -13033,101 +11572,86 @@ if (typeof module !== "undefined" && module.exports) { (e.target.tagName === 'TEXTAREA' && !this.stenoMode) \|\| e.target.tagName === 'SELECT' )){ - if (which === 27) { // escape + if (key === 'Escape') { this.closePopups(); this.$tooltipDiv.hide(); this.seekBar.hideSliderTooltips(); - } - else if (which === 32) { // spacebar = play/pause + } else if (key === ' ') { // disable spacebar support for play/pause toggle as of 4.2.10 // spacebar should not be handled everywhere on the page, since users use that to scroll the page // when the player has focus, most controls are buttons so spacebar should be used to trigger the buttons if ($thisElement.attr('role') === 'button') { // register a click on this element e.preventDefault(); - $thisElement.click(); + $thisElement.trigger( 'click' ); } - } - else if (which === 112) { // p = play/pause + } else if ( key === 'p' ) { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePlay(); } - } - else if (which === 115) { // s = stop (now restart) + } else if (key === 's') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRestart(); } - } - else if (which === 109) { // m = mute + } else if (key === 'm') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleMute(); } - } - else if (which === 118) { // v = volume + } else if (key === 'v') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleVolumeButtonClick(); } - } - else if (which >= 49 && which <= 57) { // set volume 1-9 + } else if (key >= 0 && key <= 9) { if (this.usingModifierKeys(e)) { e.preventDefault(); - this.handleVolumeKeystroke(which); + this.handleVolumeKeystroke(key); } - } - else if (which === 99) { // c = caption toggle + } else if (key === 'c') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleCaptionToggle(); } - } - else if (which === 100) { // d = description + } else if (key === 'd') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleDescriptionToggle(); } - } - else if (which === 102) { // f = forward + } else if (key === 'f') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleFastForward(); } - } - else if (which === 114) { // r = rewind + } else if (key === 'r') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRewind(); } - } - else if (which === 98) { // b = back (previous track) + } else if (key === 'b') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrevTrack(); } - } - else if (which === 110) { // n = next track + } else if (key === 'n') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleNextTrack(); } - } - else if (which === 101) { // e = preferences + } else if (key === 'e') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrefsClick(); } - } - else if (which === 13) { // Enter + } else if (key === 'Enter') { if ($thisElement.attr('role') === 'button' \|\| $thisElement.prop('tagName') === 'SPAN') { // register a click on this element // if it's a transcript span the transcript span click handler will take over - $thisElement.click(); - } - else if ($thisElement.prop('tagName') === 'LI') { - $thisElement.click(); + $thisElement.trigger( 'click' ); + } else if ($thisElement.prop('tagName') === 'LI') { + $thisElement.trigger( 'click' ); } } } @@ -13148,10 +11672,7 @@ if (typeof module !== "undefined" && module.exports) { }) .on('loadedmetadata',function() { // should be able to get duration now - thisObj.duration = thisObj.media.duration; - var x = 50.5; - var y = 51.9; - var diff = Math.abs(Math.round(x)-Math.round(y)); + thisObj.duration = thisObj.media.duration; }) .on('canplay',function() { // previously handled seeking to startTime here @@ -13159,21 +11680,21 @@ if (typeof module !== "undefined" && module.exports) { // so we know player can seek ahead to anything }) .on('canplaythrough',function() { - // previously onMediaNewSourceLoad() was called on 'loadedmetadata' - // but that proved to be too soon for some of this functionality. - // TODO: Monitor this. If moving it here causes performance issues, - // consider moving some or all of this functionality to 'canplay' - thisObj.onMediaNewSourceLoad(); + // previously onMediaNewSourceLoad() was called on 'loadedmetadata' + // but that proved to be too soon for some of this functionality. + // TODO: Monitor this. If moving it here causes performance issues, + // consider moving some or all of this functionality to 'canplay' + thisObj.onMediaNewSourceLoad(); }) .on('play',function() { - // both 'play' and 'playing' seem to be fired in all browsers (including IE11) - // therefore, doing nothing here & doing everything when 'playing' is triggered - thisObj.refreshControls('playpause'); + // 'play' indicates that the play method has been called. + // Don't do anything until playback has actually started. }) .on('playing',function() { + // 'playing' indicates that the video is playing. thisObj.playing = true; thisObj.paused = false; - thisObj.swappingSrc = false; + thisObj.swappingSrc = false; thisObj.refreshControls('playpause'); }) .on('ended',function() { @@ -13185,8 +11706,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.refreshControls('timeline'); }) .on('waiting',function() { - // do something - // previously called refreshControls() here but this event probably doesn't warrant a refresh + // could fire a notification about loss of data. }) .on('durationchange',function() { // Display new duration. @@ -13195,21 +11715,19 @@ if (typeof module !== "undefined" && module.exports) { .on('timeupdate',function() { thisObj.onMediaUpdateTime(); // includes a call to refreshControls() }) - .on('pause',function() { - if (!thisObj.clickedPlay) { + .on('pause',function() { + if (!thisObj.clickedPlay) { // 'pause' was triggered automatically, not initiated by user // this happens in some browsers when swapping source // (e.g., between tracks in a playlist or swapping description) - if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { + if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -13280,11 +11798,11 @@ if (typeof module !== "undefined" && module.exports) { // Triggered as the video is loaded. // Reports back the amount of the video that has been buffered (NOT the amount played) // Data has keys duration, percent, and seconds - }); + }); this.vimeoPlayer.on('seeking', function(data) { // Triggered when the player starts seeking to a specific time. // A timeupdate event will also be fired at the same time. - }); + }); this.vimeoPlayer.on('seeked', function(data) { // Triggered when the player seeks to a specific time. // A timeupdate event will also be fired at the same time. @@ -13303,13 +11821,11 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -13347,10 +11863,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addEventListeners = function () { - var thisObj, whichButton, thisElement; - - // Save the current object context in thisObj for use with inner functions. - thisObj = this; + var thisObj = this; // Appropriately resize media player for full screen. $(window).on('resize',function () { @@ -13368,7 +11881,7 @@ if (typeof module !== "undefined" && module.exports) { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { // the player's style attribute has changed. Check to see if it's visible if (thisObj.$ableDiv.is(':visible')) { - thisObj.refreshControls('init'); + thisObj.refreshControls(); } } }); @@ -13376,15 +11889,9 @@ if (typeof module !== "undefined" && module.exports) { var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); } - else { - // browser doesn't support MutationObserver - // TODO: Figure out an alternative solution for this rare use case in older browsers - // See example in buildplayer.js > useSvg() - } if (typeof this.seekBar !== 'undefined') { this.addSeekbarListeners(); - } - else { + } else { // wait a bit and try again // TODO: Should set this up to keep trying repeatedly. // Seekbar listeners are critical. @@ -13402,20 +11909,20 @@ if (typeof module !== "undefined" && module.exports) { }); // handle clicks (left only) anywhere on the page. If any popups are open, close them. - $(document).on('click',function(e) { + $('body').on('click', function(e) { if (e.button !== 0) { // not a left click return false; - } - if ($('.able-popup:visible').length \|\| $('.able-volume-popup:visible')) { + } + if ($('.able-popup:visible').length \|\| $('.able-volume-slider:visible').length ) { // at least one popup is visible thisObj.closePopups(); } - if (e.target.tagName === 'VIDEO') { + if (e.target.tagName === 'VIDEO') { // user clicked the video (not an element that sits on top of the video) - // handle this as a play/pause toggle click - thisObj.clickedPlay = true; - } + // handle this as a play/pause toggle click + thisObj.clickedPlay = true; + } }); // handle mouse movement over player; make controls visible again if hidden @@ -13432,8 +11939,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); @@ -13446,7 +11952,7 @@ if (typeof module !== "undefined" && module.exports) { }); // if user presses a key from anywhere on the page, show player controls - $(document).keydown(function(e) { + $(document).on( 'keydown', function(e) { if (thisObj.controlsHidden) { thisObj.fadeControls('in'); thisObj.controlsHidden = false; @@ -13458,8 +11964,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // controls are visible // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { @@ -13474,8 +11979,8 @@ if (typeof module !== "undefined" && module.exports) { }); // handle local keydown events if this isn't the only player on the page; - // otherwise these are dispatched by global handler (see ableplayer-base,js) - this.$ableDiv.keydown(function (e) { + // otherwise these are dispatched by global handler (see ableplayer-base.js) + this.$ableDiv.on( 'keydown', function (e) { if (AblePlayer.nextIndex > 1) { thisObj.onPlayerKeyPress(e); } @@ -13500,7 +12005,7 @@ if (typeof module !== "undefined" && module.exports) { // handle clicks on playlist items if (this.$playlist) { - this.$playlist.click(function(e) { + this.$playlist.on( 'click', function(e) { if (!thisObj.userClickedPlaylist) { // stopgap in case multiple clicks are fired on the same playlist item thisObj.userClickedPlaylist = true; // will be set to false after new src is loaded & canplaythrough is triggered @@ -13511,18 +12016,16 @@ if (typeof module !== "undefined" && module.exports) { } // Also play/pause when clicking on the media. - this.$media.click(function () { + this.$media.on( 'click', function () { thisObj.handlePlay(); }); // add listeners for media events if (this.player === 'html5') { this.addHtml5MediaListeners(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.addVimeoListeners(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // Youtube doesn't give us time update events, so we just periodically generate them ourselves setInterval(function () { thisObj.onMediaUpdateTime(); @@ -13532,7 +12035,6 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); (function ($) { - AblePlayer.prototype.initDragDrop = function ( which ) { // supported values of which: 'sign', 'transcript' @@ -13540,13 +12042,13 @@ if (typeof module !== "undefined" && module.exports) { // NOTE: "Drag and Drop" for Able Player is a metaphor only!!! // HTML5 Drag & Drop API enables moving elements to new locations in the DOM // Thats not our purpose; we're simply changing the visible position on-screen - // Therefore, the drag & drop interface was overhauled in v2.3.41 to simple + // Therefore, the drag & drop interface was overhauled in v2.3.41 to simply // use mouse (and keyboard) events to change CSS positioning properties // There are nevertheless lessons to be learned from Drag & Drop about accessibility: // http://dev.opera.com/articles/accessible-drag-and-drop/ - var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, + var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, i, x1, y1, x2, y2, $resizeLine, resizeZIndex; thisObj = this; @@ -13555,71 +12057,77 @@ if (typeof module !== "undefined" && module.exports) { $window = this.$transcriptArea; windowName = 'transcript-window'; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + $toolbar.attr( 'aria-label', this.translate( 'transcriptControls', 'Transcript Window Controls' ) ); + } else if (which === 'sign') { $window = this.$signWindow; windowName = 'sign-window'; $toolbar = this.$signToolbar; + $toolbar.attr( 'aria-label', this.translate( 'signControls', 'Sign Language Window Controls' ) ); } // add class to trigger change in cursor on hover $toolbar.addClass('able-draggable'); + $toolbar.attr( 'role', 'application' ); + $dragHandle = $('<div>',{ + 'class': 'able-drag-handle' + }); + + $dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'); // add resize handle selector to bottom right corner $resizeHandle = $('<div>',{ 'class': 'able-resizable' }); - // fill it with three parallel diagonal lines + // fill it with three parallel diagonal lines $resizeSvg = $('<svg>').attr({ 'width': '100%', 'height': '100%', 'viewBox': '0 0 100 100', 'preserveAspectRatio': 'none' }); - for (i=1; i<=3; i++) { - if (i === 1) { - x1 = '100'; - y1 = '0'; - x2 = '0'; - y2 = '100'; - } - else if (i === 2) { - x1 = '33'; - y1 = '100'; - x2 = '100'; - y2 = '33'; - } - else if (i === 3) { - x1 = '67'; - y1 = '100'; - x2 = '100'; - y2 = '67'; - } - $resizeLine = $('<line>').attr({ + for (i=1; i<=3; i++) { + if (i === 1) { + x1 = '100'; + y1 = '0'; + x2 = '0'; + y2 = '100'; + } else if (i === 2) { + x1 = '33'; + y1 = '100'; + x2 = '100'; + y2 = '33'; + } else if (i === 3) { + x1 = '67'; + y1 = '100'; + x2 = '100'; + y2 = '67'; + } + $resizeLine = $('<line>').attr({ 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2, - 'vector-effect': 'non-scaling-stroke' + 'vector-effect': 'non-scaling-stroke' }) - $resizeSvg.append($resizeLine); + $resizeSvg.append($resizeLine); } - $resizeHandle.html($resizeSvg); + $resizeHandle.html($resizeSvg); // assign z-index that's slightly higher than parent window resizeZIndex = parseInt($window.css('z-index')) + 100; $resizeHandle.css('z-index',resizeZIndex); $window.append($resizeHandle); + $toolbar.append($dragHandle); // Final step: Need to refresh the DOM in order for browser to process & display the SVG $resizeHandle.html($resizeHandle.html()); // add event listener to toolbar to start and end drag // other event listeners will be added when drag starts - $toolbar.on('mousedown mouseup touchstart touchend', function(e) { + $dragHandle.on('mousedown mouseup touchstart touchend', function(e) { e.stopPropagation(); - if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + if (e.type === 'mousedown' \|\| e.type === 'touchstart' ) { if (!thisObj.windowMenuClickRegistered) { thisObj.windowMenuClickRegistered = true; thisObj.startMouseX = e.pageX; @@ -13627,8 +12135,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.dragDevice = 'mouse'; // ok to use this even if device is a touchpad thisObj.startDrag(which, $window); } - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.dragging && thisObj.dragDevice === 'mouse') { thisObj.endDrag(which); } @@ -13646,8 +12153,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.startMouseY = e.pageY; thisObj.startResize(which, $window); } - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.resizing) { thisObj.endResize(which); } @@ -13663,16 +12169,12 @@ if (typeof module !== "undefined" && module.exports) { } thisObj.finishingDrag = false; }); - this.addWindowMenu(which,$window,windowName); }; AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) { - var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg, - $buttonLabel, tooltipId, $tooltip, $popup, - label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip, - $optionList, menuBaseId, options, i, $optionItem, option, menuId; + var thisObj, $windowAlert, menuId, $newButton, tooltipId, $tooltip, $popup, menuId; thisObj = this; @@ -13685,50 +12187,18 @@ if (typeof module !== "undefined" && module.exports) { // this will prevent the click event from being triggered this.finishingDrag = false; - // create an alert div and add it to window - $windowAlert = $('<div role="alert"></div>'); - $windowAlert.addClass('able-alert'); - $windowAlert.hide(); - $windowAlert.appendTo(this.$activeWindow); - $windowAlert.css({ - top: $window.offset().top - }); - // add button to draggable window which triggers a popup menu - // for now, re-use preferences icon for this purpose menuId = this.mediaId + '-' + windowName + '-menu'; $newButton = $('<button>',{ 'type': 'button', 'tabindex': '0', - 'aria-label': this.tt.windowButtonLabel, 'aria-haspopup': 'true', 'aria-controls': menuId, 'aria-expanded': 'false', 'class': 'able-button-handler-preferences' }); - if (this.iconType === 'font') { - $buttonIcon = $('<span>',{ - 'class': 'icon-preferences', - 'aria-hidden': 'true' - }); - $newButton.append($buttonIcon); - } - else { - // use image - buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png'; - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - - // add the visibly-hidden label for screen readers that don't support aria-label on the button - $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(this.tt.windowButtonLabel); - $newButton.append($buttonLabel); + this.getIcon( $newButton, 'preferences' ); + this.setText( $newButton, this.translate( 'windowButtonLabel', 'Window options' ) ); // add a tooltip that displays aria-label on mouseenter or focus tooltipId = this.mediaId + '-' + windowName + '-tooltip'; @@ -13736,20 +12206,20 @@ if (typeof module !== "undefined" && module.exports) { 'class' : 'able-tooltip', 'id' : tooltipId }).hide(); + $newButton.on('mouseenter focus',function(e) { var label = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - var tooltipY = position.top - buttonHeight - 5; + var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label); + // get height of the tooltip + var tooltipHeight = tooltip.height(); + var tooltipY = ( tooltipHeight + 2 ) -1; var tooltipX = 0; var tooltipStyle = { - left: '', - right: tooltipX + 'px', + right: '', + left: tooltipX + 'px', top: tooltipY + 'px' }; - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle); + tooltip.css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); @@ -13760,20 +12230,17 @@ if (typeof module !== "undefined" && module.exports) { $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window' // define vars and assemble all the parts if (which === 'transcript') { - this.$transcriptAlert = $windowAlert; this.$transcriptPopupButton = $newButton; this.$transcriptPopup = $popup; this.$transcriptToolbar.prepend($windowAlert,$newButton,$tooltip,$popup); - } - else if (which === 'sign') { - this.$signAlert = $windowAlert; + } else if (which === 'sign') { this.$signPopupButton = $newButton; this.$signPopup = $popup; this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup); } // handle button click - $newButton.on('click mousedown keydown',function(e) { + $newButton.on('click keydown',function(e) { if (thisObj.focusNotClick) { return false; @@ -13784,6 +12251,7 @@ if (typeof module !== "undefined" && module.exports) { } e.stopPropagation(); if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { + // don't set windowMenuClickRegistered yet; that happens in handler function thisObj.handleWindowButtonClick(which, e); } @@ -13795,30 +12263,23 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addResizeDialog = function (which, $window) { - var thisObj, $windowPopup, $windowButton, - widthId, heightId, startingWidth, startingHeight, aspectRatio, - $resizeForm, $resizeWrapper, - $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, - $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, - tempWidth, tempHeight, - $saveButton, $cancelButton, newWidth, newHeight, resizeDialog; + var thisObj, $windowPopup, $windowButton, widthId, heightId, + $resizeForm, $resizeWrapper, $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, + $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, $saveButton, $cancelButton, + newWidth, newHeight, resizeDialog; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } widthId = this.mediaId + '-resize-' + which + '-width'; heightId = this.mediaId + '-resize-' + which + '-height'; - startingWidth = $window.width(); - startingHeight = $window.height(); - aspectRatio = startingWidth / startingHeight; $resizeForm = $('<div></div>',{ 'class' : 'able-resize-form' @@ -13826,76 +12287,72 @@ if (typeof module !== "undefined" && module.exports) { // inner container for all content, will be assigned to modal div's aria-describedby $resizeWrapper = $('<div></div>'); + $resizeControls = $( '<div class="able-prefs-buttons"></div>' ); // width field $resizeWidthDiv = $('<div></div>'); $resizeWidthInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': widthId, - 'value': startingWidth + 'min': 0, + 'value': '', }); $resizeWidthLabel = $('<label>',{ 'for': widthId - }).text(this.tt.width); + }).text( this.translate( 'width', 'Width' ) ); // height field $resizeHeightDiv = $('<div></div>'); $resizeHeightInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': heightId, - 'value': startingHeight + 'min': 0, + 'value': '', }); $resizeHeightLabel = $('<label>',{ 'for': heightId - }).text(this.tt.height); - - if (which === 'sign') { - // make height a read-only field - // and calculate its value based on width to preserve aspect ratio - $resizeHeightInput.prop('readonly',true); - $resizeWidthInput.on('input',function() { - tempWidth = $(this).val(); - tempHeight = Math.round(tempWidth/aspectRatio, 0); - $resizeHeightInput.val(tempHeight); - }) - } + }).text( this.translate( 'height', 'Height' ) ); // Add save and cancel buttons. - $saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - $cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); $saveButton.on('click',function () { newWidth = $('#' + widthId).val(); newHeight = $('#' + heightId).val(); - if (newWidth !== startingWidth \|\| newHeight !== startingHeight) { - thisObj.resizeObject(which,newWidth,newHeight); - thisObj.updateCookie(which); - } + thisObj.resizeObject(which,newWidth,newHeight); + thisObj.updatePreferences(which); + resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); $cancelButton.on('click',function () { resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); // Now assemble all the parts $resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput); $resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput); $resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv); - $resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton); + $resizeControls.append($saveButton,$cancelButton); + $resizeForm.append($resizeWrapper,$resizeControls); // must be appended to the BODY! // otherwise when aria-hidden="true" is applied to all background content // that will include an ancestor of the dialog, // which will render the dialog unreadable by screen readers $('body').append($resizeForm); - resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'dialog', true, this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em'); + resizeDialog = new AccessibleDialog( + $resizeForm, + $windowButton, + this.translate( 'windowResizeHeading', 'Resize Window' ), + this.translate( 'closeButtonLabel', 'Close' ), + ); if (which === 'transcript') { this.transcriptResizeDialog = resizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.signResizeDialog = resizeDialog; } }; @@ -13905,7 +12362,6 @@ if (typeof module !== "undefined" && module.exports) { var thisObj, $windowPopup, $windowButton, $toolbar, popupTop; thisObj = this; - if (this.focusNotClick) { // transcript or sign window has just opened, // and focus moved to the window button @@ -13917,73 +12373,62 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; $toolbar = this.$signToolbar; } - if (e.type === 'keydown') { // user pressed a key - if (e.which === 32 \|\| e.which === 13) { - // this was Enter or space + if (e.key === ' ' \|\| e.key === 'Enter') { this.windowMenuClickRegistered = true; - } - else if (e.which === 27) { // escape + } else if (e.key === 'Escape') { if ($windowPopup.is(':visible')) { // close the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - } - else { + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + // also return focus to window options button + $windowButton.trigger('focus'); + } else { // popup isn't open. Close the window if (which === 'sign') { this.handleSignToggle(); - } - else if (which === 'transcript') { + } else if (which === 'transcript') { this.handleTranscriptToggle(); } } - } - else { + } else { return false; } - } - else { + } else { // this was a mouse event this.windowMenuClickRegistered = true; } - if ($windowPopup.is(':visible')) { - $windowPopup.hide(200,'',function() { - thisObj.windowMenuClickRegistered = false; // reset - }); + if ( $windowPopup.is(':visible') ) { + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; // reset $windowPopup.find('li').removeClass('able-focus'); - $windowButton.attr('aria-expanded','false').focus(); - } - else { + $windowButton.attr('aria-expanded','false').trigger('focus'); + } else { // first, be sure window is on top this.updateZIndex(which); - popupTop = $windowButton.position().top + $windowButton.outerHeight(); + popupTop = $toolbar.outerHeight() - 1; $windowPopup.css('top', popupTop); - $windowPopup.show(200,'',function() { - $windowButton.attr('aria-expanded','true'); - $(this).find('li').first().focus().addClass('able-focus'); - thisObj.windowMenuClickRegistered = false; // reset - }); + $windowPopup.show(); + $windowButton.attr('aria-expanded','true'); + $(this).find('li').first().trigger('focus').addClass('able-focus'); + thisObj.windowMenuClickRegistered = false; // reset } }; AblePlayer.prototype.handleMenuChoice = function (which, choice, e) { - var thisObj, $window, $windowPopup, $windowButton, resizeDialog, width, height, $thisRadio; + var thisObj, $window, $windowPopup, $windowButton, resizeDialog, startingWidth, startingHeight, + aspectRatio, tempWidth, tempHeight; thisObj = this; if (which === 'transcript') { @@ -13991,30 +12436,42 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; resizeDialog = this.transcriptResizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { $window = this.$signWindow; $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; resizeDialog = this.signResizeDialog; + + startingWidth = $window.outerWidth(); + startingHeight = $window.outerHeight(); + aspectRatio = startingWidth / startingHeight; + // make height a read-only field + // and calculate its value based on width to preserve aspect ratio + widthId = this.mediaId + '-resize-' + which + '-width'; + heightId = this.mediaId + '-resize-' + which + '-height'; + $( '#' + heightId ).prop('readonly',true); + $( '#' + widthId ).on('input',function() { + tempWidth = $(this).val(); + tempHeight = Math.round(tempWidth/aspectRatio); + $( '#' + heightId ).val(tempHeight); + }); } this.$activeWindow = $window; if (e.type === 'keydown') { - if (e.which === 27) { // escape + if (e.key === 'Escape') { // escape // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - // also return focus to window options button - $windowButton.focus(); - }); + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + // also return focus to window options button + $windowButton.trigger('focus'); + return false; - } - else { + } else { // all other keys will be handled by upstream functions if (choice !== 'close') { this.$activeWindow = $window; @@ -14024,58 +12481,48 @@ if (typeof module !== "undefined" && module.exports) { } // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - }); + $windowPopup.hide(); + // also reset the boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + if (choice !== 'close') { - $windowButton.focus(); + $windowButton.trigger('focus'); } if (choice === 'move') { - // temporarily add role="application" to activeWindow // otherwise, screen readers incercept arrow keys and moving window will not work this.$activeWindow.attr('role','application'); if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); + this.showAlert( this.translate( 'windowMoveAlert', 'Drag or use arrow keys to move the window; Enter to stop' ),which); if (which === 'transcript') { this.showedTranscriptAlert = true; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.showedSignAlert = true; } } - if (e.type === 'keydown') { - this.dragDevice = 'keyboard'; - } - else { - this.dragDevice = 'mouse'; - } + this.dragDevice = (e.type === 'keydown') ? 'keyboard' : 'mouse'; this.startDrag(which, $window); - $windowPopup.hide().parent().focus(); - } - else if (choice == 'resize') { + $windowPopup.hide().parent().attr( 'tabindex', '-1' ).trigger('focus'); + } else if (choice == 'resize') { // resize through the menu uses a form, not drag var resizeFields = resizeDialog.getInputs(); if (resizeFields) { // reset width and height values in form - resizeFields[0].value = $window.width(); - resizeFields[1].value = $window.height(); + resizeFields[0].value = Math.round( $window.outerWidth() ); + resizeFields[1].value = Math.round( $window.outerHeight() ); } resizeDialog.show(); - } - else if (choice == 'close') { + } else if (choice == 'close') { // close window, place focus on corresponding button on controller bar if (which === 'transcript') { - this.closingTranscript = true; // stopgrap to prevent double-firing of keypress + this.closingTranscript = true; // stopgap to prevent double-firing of keypress this.handleTranscriptToggle(); - } - else if (which === 'sign') { - this.closingSign = true; // stopgrap to prevent double-firing of keypress + } else if (which === 'sign') { + this.closingSign = true; // stopgap to prevent double-firing of keypress this.handleSignToggle(); } } @@ -14083,7 +12530,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.startDrag = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newX, newY; + var thisObj, $windowPopup, startPos, newX, newY; thisObj = this; @@ -14094,21 +12541,10 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; } - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - // if window's popup menu is open, close it if ($windowPopup.is(':visible')) { $windowPopup.hide(); @@ -14128,8 +12564,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyY = this.dragStartY; // add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd() this.startingDrag = true; - } - else { + } else { this.dragDevice = 'mouse'; // get offset between mouse position and top left corner of draggable element this.dragOffsetX = this.startMouseX - this.dragStartX; @@ -14141,8 +12576,9 @@ if (typeof module !== "undefined" && module.exports) { 'position': 'absolute', 'top': this.dragStartY + 'px', 'left': this.dragStartX + 'px' - }).focus(); + }).trigger('focus'); + var dragDevice = this.dragDevice; // add device-specific event listeners if (this.dragDevice === 'mouse') { // might also be a touchpad $(document).on('mousemove touchmove',function(e) { @@ -14153,8 +12589,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resetDraggedObject( newX, newY ); } }); - } - else if (this.dragDevice === 'keyboard') { + } else if (this.dragDevice === 'keyboard') { this.$activeWindow.on('keydown',function(e) { if (thisObj.dragging) { thisObj.dragKeys(which, e); @@ -14164,40 +12599,45 @@ if (typeof module !== "undefined" && module.exports) { return false; }; + /** + * Handle moving the transcript or sign window from the keyboard. + * + * @param {string} which 'transcript' or 'sign' window. + * @param {Event} e Triggered event. + / AblePlayer.prototype.dragKeys = function(which, e) { var key, keySpeed; - var thisObj = this; - // stopgap to prevent firing on initial Enter or space // that selected "Move" from menu if (this.startingDrag) { this.startingDrag = false; return false; } - key = e.which; + key = e.key; keySpeed = 10; // pixels per keypress event switch (key) { - case 37: // left - case 63234: + case 'ArrowLeft': // left this.dragKeyX -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveLeft', 'Window moved left' ) ); break; - case 38: // up - case 63232: + case 'ArrowUp': // up this.dragKeyY -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveUp', 'Window moved up' ) ); break; - case 39: // right - case 63235: + case 'ArrowRight': // right this.dragKeyX += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveRight', 'Window moved right' ) ); break; - case 40: // down - case 63233: + case 'ArrowDown': // down this.dragKeyY += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveDown', 'Window moved down' ) ); break; - case 13: // enter - case 27: // escape + case 'Enter': // enter + case 'Escape': // escape + this.$srAlertBox.text( this.translate( 'windowMoveStopped', 'Window move stopped' ) ); this.endDrag(which); return false; default: @@ -14211,6 +12651,9 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.resetDraggedObject = function ( x, y) { + setTimeout( () => { + this.$srAlertBox.text( '' ); + }, 2000 ); this.$activeWindow.css({ 'left': x + 'px', @@ -14230,7 +12673,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { // $activeWindow is the outer $transcriptArea - // but the inner able-transcript also needs to be resized proporitionally + // but the inner able-transcript also needs to be resized proportionally // (it's 50px less than its outer container) innerHeight = height - 50; this.$transcriptDiv.css('height', innerHeight + 'px'); @@ -14239,14 +12682,13 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.endDrag = function(which) { - var thisObj, $window, $windowPopup, $windowButton; + var thisObj, $windowPopup, $windowButton; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } @@ -14258,12 +12700,12 @@ if (typeof module !== "undefined" && module.exports) { this.$activeWindow = null; if (this.dragDevice === 'keyboard') { - $windowButton.focus(); + $windowButton.trigger('focus'); } this.dragging = false; // save final position of dragged element - this.updateCookie(which); + this.updatePreferences(which); // reset starting mouse positions this.startMouseX = undefined; @@ -14272,7 +12714,7 @@ if (typeof module !== "undefined" && module.exports) { // Boolean to stop stray events from firing this.windowMenuClickRegistered = false; this.finishingDrag = true; // will be reset after window click event - // finishingDrag should e reset after window click event, + // finishingDrag should be reset after window click event, // which is triggered automatically after mouseup // However, in case that's not reliable in some browsers // need to ensure this gets cancelled @@ -14281,45 +12723,19 @@ if (typeof module !== "undefined" && module.exports) { }, 100); }; - AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) { - - // return true if mouse is close to bottom right corner (resize target) - var tolerance, position, top, left, width, height, bottom, right; - - tolerance = 10; // number of pixels in both directions considered "close enough" - - // first, get position of element - position = $window.offset(); - top = position.top; - left = position.left; - width = $window.width(); - height = $window.height(); - bottom = top + height; - right = left + width; - if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) { - return true; - } - return false; - }; - AblePlayer.prototype.startResize = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight; + var thisObj, $windowPopup, newWidth, newHeight; thisObj = this; this.$activeWindow = $element; this.resizing = true; - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } + $windowPopup = (which === 'transcript') ? this.$transcriptPopup : this.$signPopup; // if window's popup menu is open, close it & place focus on button (???) if ($windowPopup.is(':visible')) { - $windowPopup.hide().parent().focus(); + $windowPopup.hide().parent().trigger('focus'); } // get starting width and height @@ -14327,7 +12743,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyX = this.dragStartX; this.dragKeyY = this.dragStartY; this.dragStartWidth = this.$activeWindow.width(); - this.dragStartHeight = this.$activeWindow.height(); + this.dragStartHeight = this.$activeWindow.outerHeight(); // add event listeners $(document).on('mousemove touchmove',function(e) { @@ -14338,30 +12754,30 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resizeObject( which, newWidth, newHeight ); } }); + return false; }; AblePlayer.prototype.endResize = function(which) { - var $window, $windowPopup, $windowButton; + var $windowPopup, $windowButton; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } $(document).off('mousemove mouseup touchmove touchup'); this.$activeWindow.off('keydown'); - $windowButton.show().focus(); + $windowButton.show().trigger('focus'); this.resizing = false; this.$activeWindow.removeClass('able-resize'); // save final width and height of dragged element - this.updateCookie(which); + this.updatePreferences(which); // Booleans for preventing stray events this.windowMenuClickRegistered = false; @@ -14375,28 +12791,37 @@ if (typeof module !== "undefined" && module.exports) { this.finishingDrag = false; }, 100); }; - })(jQuery); (function ($) { AblePlayer.prototype.initSignLanguage = function() { - - // Sign language is only currently supported in HTML5 player, not YouTube or Vimeo - if (this.player === 'html5') { + this.hasSignLanguage = false; + // Sign language is only currently supported in HTML5 player and YouTube. + var hasLocalSrc = ( this.$sources.first().attr('data-sign-src') !== undefined && this.$sources.first().attr('data-sign-src') !== "" ); + // YouTube src can either be on a `source` element or on the `video` element. + var hasRemoteSrc = ( this.$media.data('youtube-sign-src') !== undefined && this.$media.data('youtube-sign-src') !== "" ); + var hasRemoteSource = ( this.$sources.first().attr('data-youtube-sign-src') !== undefined && this.$sources.first().attr('data-youtube-sign-src') !== '' ); + if ( ! this.isIOS() && ( hasLocalSrc \|\| hasRemoteSrc \|\| hasRemoteSource ) && ( this.player === 'html5' \|\| this.player === 'youtube' ) ) { // check to see if there's a sign language video accompanying this video // check only the first source // If sign language is provided, it must be provided for all sources - this.signFile = this.$sources.first().attr('data-sign-src'); - if (this.signFile) { + let ytSignSrc = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') ); + let signSrc = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') ); + let signVideo = DOMPurify.sanitize( this.$media.data('youtube-sign-src') ); + this.signFile = (hasLocalSrc ) ? signSrc : false; + if ( hasRemoteSrc ) { + this.signYoutubeId = signVideo; + } else if ( hasRemoteSource ) { + this.signYoutubeId = ytSignSrc; + } + if ( this.signFile \|\| this.signYoutubeId ) { if (this.isIOS()) { - // IOS does not allow multiple videos to play simultaneously + // iOS does not allow multiple videos to play simultaneously // Therefore, sign language as rendered by Able Player unfortunately won't work - this.hasSignLanguage = false; if (this.debug) { } - } - else { + } else { if (this.debug) { } @@ -14404,73 +12829,179 @@ if (typeof module !== "undefined" && module.exports) { this.injectSignPlayerCode(); } } - else { - this.hasSignLanguage = false; + } + }; + + AblePlayer.prototype.injectSignPlayerCode = function() { + + // create and inject surrounding HTML structure + var thisObj, signVideoId, i, signSrc, srcType, $signSource; + + thisObj = this; + signVideoId = this.mediaId + '-sign'; + + if ( this.signFile \|\| this.signYoutubeId ) { + if ( null !== this.$signDivLocation ) { + this.$signDivLocation.addClass( 'able-sign-window able-fixed' ); + this.$signWindow = this.$signDivLocation; + } else { + this.$signWindow = $('<div>',{ + 'class' : 'able-sign-window', + 'role': 'dialog', + 'aria-label': this.translate( 'sign', 'Sign language' ) + }); + this.$signToolbar = $('<div>',{ + 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' + }); + this.$signWindow.append(this.$signToolbar); + } + + this.$ableWrapper.append(this.$signWindow); + } + + if ( this.signFile ) { + this.$signVideo = $('<video>',{ + 'id' : signVideoId, + 'tabindex' : '-1', + 'muted' : true, + }); + this.signVideo = this.$signVideo[0]; + + if ( this.signFile ) { + $signSource = $('<source>',{ + 'src' : this.signFile, + 'type' : 'video/' + this.signFile.substr(-3) + }); + this.$signVideo.append($signSource); + } else { + // for each original <source>, add a <source> to the sign <video> + for (i=0; i < this.$sources.length; i++) { + signSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-sign-src') ); + srcType = this.$sources[i].getAttribute('type'); + if (signSrc) { + $signSource = $('<source>',{ + 'src' : signSrc, + 'type' : srcType + }); + this.$signVideo.append($signSource); + } else { + // source is missing a sign language version + // can't include sign language + this.hasSignLanguage = false; + return; + } + } + } + this.$signWindow.append( this.$signVideo ); + } else if ( this.signYoutubeId ) { + this.signYoutube = this.initYouTubeSignPlayer(); + } + + // make it draggable + if ( null === this.$signDivLocation ) { + this.initDragDrop('sign'); + } + + if (this.prefSign === 1) { + // sign window is on. Go ahead and position it and show it + if ( null === this.$signDivLocation ) { + this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); } + } else { + this.$signWindow.hide(); } - else { - this.hasSignLanguage = false; + }; + + + AblePlayer.prototype.initYouTubeSignPlayer = function () { + + var thisObj, deferred, promise; + thisObj = this; + deferred = new this.defer(); + promise = deferred.promise(); + + this.youTubeSignPlayerReady = false; + + if (AblePlayer.youTubeIframeAPIReady) { + // Script already loaded and ready. + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + } else { + // Has another player already started loading the script? If so, abort... + if ( ! AblePlayer.loadingYouTubeIframeAPI ) { + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + + }); + } + + // Otherwise, keeping waiting for script load event... + $('body').on('youTubeIframeAPIReady', function () { + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + }); } + return promise; }; - AblePlayer.prototype.injectSignPlayerCode = function() { - - // create and inject surrounding HTML structure + AblePlayer.prototype.finalizeYoutubeSignInit = function () { - var thisObj, signVideoId, signVideoWidth, i, signSrc, srcType, $signSource; + // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; + deferred = new this.defer(); + promise = deferred.promise(); thisObj = this; + containerId = this.mediaId + '_youtube_sign'; - signVideoWidth = this.getDefaultWidth('sign'); + this.$signWindow.append($('<div>').attr('id', containerId)); + autoplay = (this.okToPlay) ? 1 : 0; - signVideoId = this.mediaId + '-sign'; - this.$signVideo = $('<video>',{ - 'id' : signVideoId, - 'tabindex' : '-1' - }); - this.signVideo = this.$signVideo[0]; - // for each original <source>, add a <source> to the sign <video> - for (i=0; i < this.$sources.length; i++) { - signSrc = this.$sources[i].getAttribute('data-sign-src'); - srcType = this.$sources[i].getAttribute('type'); - if (signSrc) { - $signSource = $('<source>',{ - 'src' : signSrc, - 'type' : srcType - }); - this.$signVideo.append($signSource); - } - else { - // source is missing a sign language version - // can't include sign language - this.hasSignLanguage = false; - break; - } - } + // Documentation https://developers.google.com/youtube/player_parameters + this.youTubeSignPlayer = new YT.Player(containerId, { + videoId: this.getYouTubeId(this.signYoutubeId), + host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', + playerVars: { + autoplay: autoplay, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: 0, + controls: 0, // no controls, using our own + disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, + playsinline: this.playsInline, + rel: 0, // when video ends, show only related videos from same channel (1 shows any) + start: this.startTime + }, + events: { + onReady: function (player) { + player.target.mute(); + player.target.unloadModule( 'captions' ); + thisObj.youTubeSignPlayerReady = true; - this.$signWindow = $('<div>',{ - 'class' : 'able-sign-window', - 'role': 'dialog', - 'aria-label': this.tt.sign - }); - this.$signToolbar = $('<div>',{ - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' + deferred.resolve(); + }, + onError: function (x) { + deferred.reject(); + }, + onStateChange: function (x) { + thisObj.getPlayerState().then(function() { + // no actions + }); + }, + onApiChange: function() { + // No actions + }, + onPlaybackQualityChange: function () { + // no actions + }, + } }); - this.$signWindow.append(this.$signToolbar, this.$signVideo); - - this.$ableWrapper.append(this.$signWindow); - - // make it draggable - this.initDragDrop('sign'); - - if (this.prefSign === 1) { - // sign window is on. Go ahead and position it and show it - this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); - } - else { - this.$signWindow.hide(); - } + return promise; }; })(jQuery); @@ -15458,30 +13989,19 @@ if (typeof module !== "undefined" && module.exports) { // return language name associated with lang code "key" // whichName is either "English" or "local" (i.e., native name) - var lang, code, subTag; + var lang, code, subTag; lang = isoLangs[key.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName; - } - else { - return lang.name; - } - } - else if (key.includes('-')) { + if (lang) { + return (whichName === 'local') ? lang.nativeName : lang.name; + } else if (key.includes('-')) { code = key.substring(0,2); - subTag = key.substring(3); - lang = isoLangs[code.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName + ' (' + subTag + ')'; - } - else { - return lang.name + ' (' + subTag + ')'; - } + subTag = key.substring(3); + lang = isoLangs[code.toLowerCase()]; + if (lang) { + return (whichName === 'local') ? lang.nativeName + ' (' + subTag + ')' : lang.name + ' (' + subTag + ')'; } } - // if all else has failed, use the key as the label + // if all else has failed, use the key as the label return key; }; @@ -15489,51 +14009,86 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.getSupportedLangs = function() { // returns an array of languages for which AblePlayer has translation tables - var langs = ['ca','cs','da','de','en','es','fr','he','id','it','ja','nb','nl','pt','pt-br','sv','tr','zh-tw']; + var langs = { + 'ca' : 'Catalan', + 'cs' : 'Czech', + 'da' : 'Danish', + 'de' : 'German', + 'en' : 'English', + 'es' : 'Spanish', + 'fr' : 'French', + 'he' : 'Hebrew', + 'id' : 'Indonesian', + 'it' : 'Italian', + 'ja' : 'Japanese', + 'ms' : 'Malay', + 'nb' : 'Norwegian Bokmål', + 'nl' : 'Dutch', + 'pl' : 'Polish', + 'pt' : 'Portuguese', + 'pt-br' : 'Brazilian Portuguese', + 'sv' : 'Swedish', + 'tr' : 'Turkish', + 'zh-tw' : 'Chinese (Taiwan)' + }; + return langs; }; + /* + * Fetch a translated string if it exists. + * + * @param {string} key JSON key to locate translated string. + * @param {string} fallback Default language if no translation found. + * @param {Array} args Ordered array of arguments to replace in string. + * @returns + / + AblePlayer.prototype.translate = function( key, fallback, args = Array() ) { + let translation = ''; + if ( this.tt[ key ] ) { + translation = this.tt[ key ]; + } else { + translation = fallback; + } + if ( args.length > 0 ) { + args.forEach( ( val, index ) => { + let ref = index + 1; + translation = translation.replace( '%' + ref, val ); + }); + } + + return translation; + } + AblePlayer.prototype.getTranslationText = function() { // determine language, then get labels and prompts from corresponding translation var - - var deferred, thisObj, supportedLangs, docLang, msg, translationFile, collapsedLang, i, - similarLangFound; - deferred = $.Deferred(); + var deferred, thisObj, supportedLangs, docLang, translationFile, i, similarLangFound; + deferred = new this.defer(); thisObj = this; supportedLangs = this.getSupportedLangs(); // returns an array if (this.lang) { // a data-lang attribute is included on the media element - if ($.inArray(this.lang,supportedLangs) === -1) { + if ( Object.hasOwn( supportedLangs,this.lang ) ) { // the specified language is not supported - if (this.lang.indexOf('-') == 2) { + if ( this.lang.indexOf('-') == 2 ) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(this.lang.substring(0,2),supportedLangs) !== -1) { - // parent lang is supported. Use that. - this.lang = this.lang.substring(0,2); - } - else { - // the parent language is not supported either - // unable to use the specified language - this.lang = null; - } - } - else { + // if parent lang is supported. Use that, else null. + this.lang = ( Object.hasOwn(supportedLangs,this.lang.substring(0,2)) !== -1 ) ? this.lang.substring(0,2) : null; + } else { // this is not a localized language. - // but maybe there's a similar localized language supported - // that has the same parent? - similarLangFound = false; - i = 0; - while (i < supportedLangs.length) { - if (supportedLangs[i].substring(0,2) == this.lang) { - this.lang = supportedLangs[i]; - similarLangFound = true; + // but maybe there's a similar localized language supported + // that has the same parent? + similarLangFound = false; + for ( const [key,value] of Object.entries(supportedLangs) ) { + if ( key.substring(0,2) == this.lang ) { + this.lang = supportedLangs[i]; + similarLangFound = true; } - i++; } - if (!similarLangFound) { + if ( !similarLangFound ) { // language requested via data-lang is not supported this.lang = null; } @@ -15545,24 +14100,21 @@ if (typeof module !== "undefined" && module.exports) { // try the language of the web page, if specified if ($('body').attr('lang')) { docLang = $('body').attr('lang').toLowerCase(); - } - else if ($('html').attr('lang')) { + } else if ($('html').attr('lang')) { docLang = $('html').attr('lang').toLowerCase(); - } - else { + } else { docLang = null; } if (docLang) { - if ($.inArray(docLang,supportedLangs) !== -1) { + if ( Object.hasOwn( supportedLangs,docLang ) ) { // the document language is supported this.lang = docLang; - } - else { + } else { // the document language is not supported if (docLang.indexOf('-') == 2) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(docLang.substring(0,2),supportedLangs) !== -1) { + if ( Object.hasOwn(supportedLangs,docLang.substring(0,2)) ) { // the parent language is supported. use that. this.lang = docLang.substring(0,2); } @@ -15580,248 +14132,70 @@ if (typeof module !== "undefined" && module.exports) { if (!this.searchLang) { this.searchLang = this.lang; } - translationFile = this.rootPath + 'translations/' + this.lang + '.js'; - $.getJSON(translationFile, function(data) { - // success! - thisObj.tt = data; - deferred.resolve(); - }) - .fail(function() { + translationFile = this.rootPath + 'translations/' + this.lang + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + + translationFile = thisObj.rootPath + 'translations/' + thisObj.lang + '.js'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { - thisObj.provideFallback(); - deferred.fail(); - }) + thisObj.tt = {}; + thisObj.translationFiles = false; + deferred.resolve(); + }); + }); return deferred.promise(); }; AblePlayer.prototype.getSampleDescriptionText = function() { + if ( ! this.translationFiles ) { + this.sampleText = []; + let translation = { 'lang':'en', 'text': this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) }; + this.sampleText.push(translation); + } else { + // Create an array of sample description text in all languages + // This needs to be readily available for testing different voices + // in the Description Preferences dialog + var thisObj, supportedLangs, thisLang, translationFile, thisText, translation; + + supportedLangs = this.getSupportedLangs(); + thisObj = this; - // Create an array of sample description text in all languages - // This needs to be readily available for testing different voices - // in the Description Preferences dialog - var thisObj, supportedLangs, i, thisLang, translationFile, thisText, translation; - - supportedLangs = this.getSupportedLangs(); - - thisObj = this; - - this.sampleText = []; - for (i=0; i < supportedLangs.length; i++) { - translationFile = this.rootPath + 'translations/' + supportedLangs[i] + '.js'; - $.getJSON(translationFile, thisLang, (function(thisLang) { - return function(data) { - thisText = data.sampleDescriptionText; - translation = {'lang':thisLang, 'text': thisText}; - thisObj.sampleText.push(translation); - }; - }(supportedLangs[i])) // pass lang to callback function - ); + this.sampleText = []; + for ( const [key,value] of Object.entries(supportedLangs) ) { + translationFile = this.rootPath + 'translations/' + key + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisText = data.sampleDescriptionText; + translation = {'lang':thisLang, 'text': thisText}; + thisObj.sampleText.push(translation); + }); + } } }; })(jQuery); -(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); - -/! Copyright (c) 2014 - Paul Tavares - purtuga - @paul_tavares - MIT License / -;(function($){ - - /* - * Delays the execution of a function until an expression returns true. - * The expression is checked every 100 milliseconds for as many tries - * as defined in in the attempts option - * - * @param {Object} options - * @param {Function} options.when - * Function to execute on every interval. - * Must return true (boolean) in order for - * options.do to be executed. - * @param {Function} [options.exec] - * Function to be executed once options.when() - * returns true. - * @param {Interger} [options.interval=100] - * How long to wait in-between tries. - * @param {Interger} [options.attempts=100] - * How many tries to use before its considered - * a failure. - * @param {Interger} [options.delayed=0] - * Number of miliseconds to wait before execution - is started. Default is imediately. - * - * @return {jQuery.Promise} - * - * @example - * - * $.doWhen({ - * when: function(){ - * return false; - * }, - * exec: function(){ - * alert("never called given false response on when param!"); - * } - * }) - * .fail(function(){ - * alert('ALERT: FAILED CONDITION'); - * }) - * .then(function(){ - * alert("resolved."); - * }); - * - / - $.doWhen = function(options) { - - return $.Deferred(function(dfd){ - - var opt = $.extend({}, { - when: null, - exec: function(){}, - interval: 100, - attempts: 100, - delayed: 0 - }, - options, - { - checkId: null - }), - startChecking = function(){ - - // Check condition now and if true, then resolve object - if (opt.when() === true) { - - opt.exec.call(dfd.promise()); - dfd.resolve(); - return; - - } - - // apply minimal UI and hide the overlay - opt.checkId = setInterval(function(){ - - if (opt.attempts === 0) { - - clearInterval(opt.checkId); - dfd.reject(); - - } else { - - --opt.attempts; - - if (opt.when() === true) { - - opt.attempts = 0; - clearInterval(opt.checkId); - opt.exec.call(dfd.promise()); - dfd.resolve(); - - } - - } - - }, opt.interval); - - }; - - if (opt.delayed > 0) { - - setTimeout(startChecking, Number(opt.delayed)); - - } else { - - startChecking(); - - } - - }).promise(); - - }; - -})(jQuery); / 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 @@ -15830,24 +14204,14 @@ if (typeof module !== "undefined" && module.exports) { (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; + var thisObj, $heading, $instructions, $p1, $p2, $ul, $li1, $li2, $li3, + $fieldset, $legend, i, $radioDiv, radioId, $label, $radio, $saveButton, $savedTable; thisObj = this; - if ($('#able-vts').length) { - // Page includes a container for a VTS instance - + if ( null !== document.getElementById( 'able-vts' ) ) { // Are they qualifying tracks? if (this.vtsTracks.length) { - // Yes - there are! - // Build an array of unique languages this.langs = []; this.getAllLangs(this.vtsTracks); @@ -15856,7 +14220,8 @@ if (typeof module !== "undefined" && module.exports) { this.vtsLang = this.lang; // Inject a heading - $heading = $('<h2>').text('Video Transcript Sorter'); // TODO: Localize; intelligently assign proper heading level + let heading = this.translate( 'vtsHeading', 'Video Transcript Sorter' ); + $heading = $('<h2>').text( heading ); // TODO: intelligently assign proper heading level $('#able-vts').append($heading); // Inject an empty div for writing messages @@ -15871,20 +14236,21 @@ if (typeof module !== "undefined" && module.exports) { $instructions = $('<div>',{ 'id': 'able-vts-instructions' }); - $p1 = $('<p>').text('Use the Video Transcript Sorter to perform any of the following tasks:'); + $p1 = $('<p>').text( this.translate( 'vtsInstructions1', 'Use the Video Transcript Sorter to modify text tracks:' ) ); $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.'); + $li1 = $('<li>').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 = $('<li>').text( this.translate( 'vtsInstructions3', 'Modify content or start/end times (all are directly editable within the table).' ) ); + $li3 = $('<li>').text( this.translate( 'vtsInstructions4', 'Add new content, such as chapters or descriptions.' ) ); + $p2 = $('<p>').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 = $('<fieldset>'); - $legend = $('<legend>').text('Select a language'); // TODO: Localize this - $fieldset.append($legend) + $legend = $('<legend>').text( this.translate( 'vtsSelectLanguage', 'Select a language' ) ); + $fieldset.append($legend); + $fieldWrapper = $( '<div class="vts-lang-selector"></div>' ); for (i in this.langs) { radioId = 'vts-lang-radio-' + this.langs[i]; $radioDiv = $('<div>',{ @@ -15908,29 +14274,29 @@ if (typeof module !== "undefined" && module.exports) { $label = $('<label>', { 'for': radioId // Two options for label: - // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; + // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; // TODO: if using this be sure to add lang attr to <div> (see above) }).text(this.getLanguageName(this.langs[i])); $radioDiv.append($radio,$label); - $fieldset.append($radioDiv); + $fieldWrapper.append($radioDiv); } + $fieldset.append( $fieldWrapper ); $('#able-vts').append($fieldset); - - // Inject a 'Save Changes' button + let vtsSave = this.translate( 'vtsSave', 'Generate new .vtt content' ); + // Inject a button to generate new files. $saveButton = $('<button>',{ 'type': 'button', 'id': 'able-vts-save', 'value': 'save' - }).text('Save Changes'); // TODO: Localize this + }).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, i, closestKind; + var kindOptions, beforeEditing, editedCell, editedContent, i; kindOptions = ['captions','chapters','descriptions','subtitles']; $('td[contenteditable="true"]').on('focus',function() { beforeEditing = $(this).text(); @@ -15945,20 +14311,16 @@ if (typeof module !== "undefined" && module.exports) { // assume they correctly typed the first character if (editedContent.substring(0,1) === 's') { $(this).text('subtitles'); - } - else if (editedContent.substring(0,1) === 'd') { + } else if (editedContent.substring(0,1) === 'd') { $(this).text('descriptions'); - } - else if (editedContent.substring(0,2) === 'ch') { + } else if (editedContent.substring(0,2) === 'ch') { $(this).text('chapters'); - } - else { + } else { // whatever else they types, assume 'captions' $(this).text('captions'); } } - } - else if (editedCell === 2 \|\| editedCell === 3) { + } else if (editedCell === 2 \|\| editedCell === 3) { // start or end time // ensure proper formatting (with 3 decimal places) $(this).text(thisObj.formatTimestamp(editedContent)); @@ -15970,30 +14332,27 @@ if (typeof module !== "undefined" && module.exports) { 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 + $(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 { + } else { // cancel saving, and restore the table using edited content - $(this).attr('value','save').text('Save Changes'); // TODO: Localize this + $(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('Cancelling saving. Any edits you made have been restored in the VTS table.'); // TODO: Localize this + thisObj.showVtsAlert( thisObj.translate( 'vtsCancel', 'Cancelling saving. Any edits you made have been restored in the VTS table.' ) ); } }); } @@ -16002,10 +14361,8 @@ if (typeof module !== "undefined" && module.exports) { 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) - - // Called from tracks.js + // TODO: Add support for trackDesc + // (to destinguish between tracks for the decribed vs non-described versions) var srcFile, vtsCues; srcFile = this.getFilenameFromPath(src); @@ -16023,15 +14380,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getFilenameFromPath = function(path) { var lastSlash; - lastSlash = path.lastIndexOf('/'); - if (lastSlash === -1) { - // there are no slashes in path. - return path; - } - else { - return path.substring(lastSlash+1); - } + // fix slashes. + return (lastSlash === -1) ? path : path.substring(lastSlash+1); }; AblePlayer.prototype.getFilenameFromTracks = function(kind,lang) { @@ -16069,13 +14420,11 @@ if (typeof module !== "undefined" && module.exports) { if (content.length > 0) { // add back the EOL between rows of content content += "\n" + nextRow; - } - else { + } else { // this is the first row of content. No need for an EOL content += nextRow; } - } - else { + } else { blankRow = true; } j++; @@ -16087,8 +14436,7 @@ if (typeof module !== "undefined" && module.exports) { }); i = j; //skip ahead } - } - else { + } else { i++; } } @@ -16098,12 +14446,7 @@ if (typeof module !== "undefined" && module.exports) { 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; - } + return (/^[0-9:,.]$/.test(timestamp)) ? true : false; }; AblePlayer.prototype.formatTimestamp = function(timestamp) { @@ -16125,8 +14468,7 @@ if (typeof module !== "undefined" && module.exports) { if (lastPart.length > 3) { // chop off any extra digits lastPart = lastPart.substring(0,3); - } - else if (lastPart.length < 3) { + } else if (lastPart.length < 3) { // add trailing zeros while (lastPart.length < 3) { lastPart += '0'; @@ -16140,7 +14482,7 @@ if (typeof module !== "undefined" && module.exports) { // 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; + var $table, $thead, headers, i, $tr, $th, $td, rows, rowNum, rowId; if (action === 'update') { // remove existing table @@ -16151,10 +14493,16 @@ if (typeof module !== "undefined" && module.exports) { $table = $('<table>',{ 'lang': lang }); - $tr = $('<tr>',{ - 'lang': 'en' // TEMP, until header row is localized - }); - headers = ['Row #','Kind','Start','End','Content','Actions']; // TODO: Localize this + $thead = $( '<thead>' ); + $tr = $( '<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 = $('<th>', { 'scope': 'col' @@ -16164,7 +14512,8 @@ if (typeof module !== "undefined" && module.exports) { } $tr.append($th); } - $table.append($tr); + $thead.append($tr); + $table.append($thead); // Get all rows (sorted by start time), and inject them into table rows = this.getAllRows(lang); @@ -16260,8 +14609,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'down') { + } else if (button === 'down') { if (rowNum < numRows) { $button = $('<button>',{ 'id': 'able-vts-button-down-' + rowNum, @@ -16293,8 +14641,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'insert') { + } else if (button === 'insert') { // Add Insert button to all rows $button = $('<button>',{ 'id': 'able-vts-button-insert-' + rowNum, @@ -16328,8 +14675,7 @@ if (typeof module !== "undefined" && module.exports) { // 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') { + } else if (button === 'delete') { // Add Delete button to all rows $button = $('<button>',{ 'id': 'able-vts-button-delete-' + rowNum, @@ -16395,14 +14741,12 @@ if (typeof module !== "undefined" && module.exports) { 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; + var credit + = 'Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a>' + + ' from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a>' + + ' are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a>' + ; + return '<div id="able-vts-icon-credit">' + credit + '</div>'; }; AblePlayer.prototype.getAllLangs = function(tracks) { @@ -16460,16 +14804,13 @@ if (typeof module !== "undefined" && module.exports) { if (action == 'up') { // move the row up this.moveRow(rowNum,'up'); - } - else if (action == 'down') { + } else if (action == 'down') { // move the row down this.moveRow(rowNum,'down'); - } - else if (action == 'insert') { + } else if (action == 'insert') { // insert a row below this.insertRow(rowNum); - } - else if (action == 'delete') { + } else if (action == 'delete') { // delete the row this.deleteRow(rowNum); } @@ -16478,9 +14819,8 @@ if (typeof module !== "undefined" && module.exports) { 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; + 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'); @@ -16562,10 +14902,11 @@ if (typeof module !== "undefined" && module.exports) { this.adjustTimes(newRowNum); // Announce the insertion - this.showVtsAlert('A new row ' + newRowNum + ' has been inserted'); // TODO: Localize this + let newAlert = this.translate( 'vtsNewRow', 'A new row %1 has been inserted.', [ newRowNum ] ); + this.showVtsAlert( newAlert ); // Place focus in new select field - $select.focus(); + $select.trigger('focus'); }; @@ -16588,14 +14929,15 @@ if (typeof module !== "undefined" && module.exports) { } // Announce the deletion - this.showVtsAlert('Row ' + rowNum + ' has been deleted'); // TODO: Localize this + let newAlert = this.translate( 'vtsDeletedRow', 'Row %1 has been deleted.', [ rowNum ] ); + this.showVtsAlert( newAlert ); }; AblePlayer.prototype.moveRow = function(rowNum,direction) { // swap two rows - var $rows, $thisRow, otherRowNum, $otherRow, newTimes, msg; + var $rows, $thisRow, otherRowNum, $otherRow, msg; $rows = $('#able-vts table').find('tr'); $thisRow = $('#able-vts table').find('tr').eq(rowNum); @@ -16603,8 +14945,7 @@ if (typeof module !== "undefined" && module.exports) { otherRowNum = parseInt(rowNum) - 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.before($thisRow); - } - else if (direction == 'down') { + } else if (direction == 'down') { otherRowNum = parseInt(rowNum) + 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.after($thisRow); @@ -16620,9 +14961,8 @@ if (typeof module !== "undefined" && module.exports) { // 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; + // Announce the move + msg = this.translate( 'vtsMovedRow', 'Row %1 has been moved %2 and is now Row %3.', [ rowNum, direction, otherRowNum ] ); this.showVtsAlert(msg); }; @@ -16659,16 +14999,10 @@ if (typeof module !== "undefined" && module.exports) { // 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'; - } + // 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()); @@ -16677,19 +15011,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the first row prevRowNum = null; $prevRow = null; @@ -16703,19 +15030,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the last row nextRowNum = null; $nextRow = null; @@ -16736,62 +15056,43 @@ if (typeof module !== "undefined" && module.exports) { 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') { + // 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); - 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') { + // end the new row immediately before the next row starts + end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (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 { + } 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 { + } 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 { + } else { // start needs to be incremented start = (parseFloat(prevStart) + minDuration[prevKind]).toFixed(3); end = (parseFloat(start) + minDuration[kind]).toFixed(3); } - } - else { + } else { // this is the first row if (start < nextStart) { // No change is necessary - } - else { + } else { // nextStart needs to be incremented nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3); nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3); @@ -16834,9 +15135,8 @@ if (typeof module !== "undefined" && module.exports) { if (kindEnd == -1) { // no spaces found, "kind-" must be the only myclass return myclass.substring(kindStart); - } - else { - // kind-* is one of multiple classes + } 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); } @@ -16848,7 +15148,11 @@ if (typeof module !== "undefined" && module.exports) { // 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'); + 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) { @@ -16871,7 +15175,7 @@ if (typeof module !== "undefined" && module.exports) { 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(); + content = $rows.eq(i).find('td').eq(4)[0].innerText; if (start !== undefined && end !== undefined) { vtt[kind] += start + ' --> ' + end + "\n"; if (content !== 'undefined') { @@ -16899,14 +15203,13 @@ if (typeof module !== "undefined" && module.exports) { var $heading, filename, $p, pText, $textarea; - $heading = $('<h3>').text(kind.charAt(0).toUpperCase() + kind.slice(1)); + $heading = $('<h3>').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 += '<em>' + kind + '</em> WebVTT file (<strong>' + filename + '</strong>).'; - } - else { + } else { pText += 'into a new ' + this.getLanguageName(lang) + ' <em>' + kind + '</em> WebVTT file.'; } $p = $('<p>',{ @@ -16918,14 +15221,14 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); - (function ($) { + AblePlayer.prototype.initVimeoPlayer = function () { - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; + var thisObj, deferred, promise, containerId, vimeoId, options; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); containerId = this.mediaId + '_vimeo'; @@ -16933,14 +15236,10 @@ if (typeof module !== "undefined" && module.exports) { // add container to which Vimeo player iframe will be appended this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // if a described version is available && user prefers desription + // if a described version is available && user prefers description // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } + vimeoId = (this.vimeoDescId && this.prefDesc) ? this.vimeoDescId : this.vimeoId; + this.activeVimeoId = vimeoId; // Notes re. Vimeo Embed Options: @@ -16948,44 +15247,36 @@ if (typeof module !== "undefined" && module.exports) { // setting the "controls" option to "false" will hide the default controls, without hiding captions. // This is a new option from Vimeo; previously used "background:true" to hide the controller, // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) + // - In addition to hiding the controls, it also hides captions + // - It automatically autoplays (initializing the player with autoplay:false does not override this) + // - It automatically loops (but this can be overridden by initializing the player with loop:false) + // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - if (this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } + autoplay = (this.okToPlay) ? 'true' : 'false'; - if (this.playerWidth) { - if (this.vimeoUrlHasParams) { - // use url param, not id + if (this.playerWidth) { + if (this.vimeoUrlHasParams) { + // use url param, not id options = { url: vimeoId, width: this.playerWidth, controls: false } - } - else { + } else { options = { id: vimeoId, width: this.playerWidth, controls: false } } - } - else { - // initialize without width & set width later - if (this.vimeoUrlHasParams) { + } else { + // initialize without width & set width later + if (this.vimeoUrlHasParams) { options = { url: vimeoId, controls: false } - } - else { + } else { options = { id: vimeoId, controls: false @@ -17003,18 +15294,18 @@ if (typeof module !== "undefined" && module.exports) { }); // get video's intrinsic size and initiate player dimensions - thisObj.vimeoPlayer.getVideoWidth().then(function(width) { - if (width) { - // also get height - thisObj.vimeoPlayer.getVideoHeight().then(function(height) { - if (height) { - thisObj.resizePlayer(width,height); + thisObj.vimeoPlayer.getVideoWidth().then(function(width) { + if (width) { + // also get height + thisObj.vimeoPlayer.getVideoHeight().then(function(height) { + if (height) { + thisObj.resizePlayer(width,height); } - }); + }); } }).catch(function(error) { - // an error occurred getting height or width - // TODO: Test this to see how gracefully it organically recovers + // an error occurred getting height or width + // TODO: Test this to see how gracefully it organically recovers }); if (!thisObj.hasPlaylist) { @@ -17047,7 +15338,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPaused = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getPaused().then(function (paused) { @@ -17061,7 +15352,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoEnded = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getEnded().then(function (ended) { @@ -17074,11 +15365,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoState = function () { - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - - thisObj = this; + var deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); promises = []; @@ -17105,10 +15394,10 @@ if (typeof module !== "undefined" && module.exports) { // get data via Vimeo Player API, and push data to this.captions // Note: Vimeo doesn't expose the caption cues themselves // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - var thisObj, i, trackId, isDefaultTrack; + var thisObj, i, isDefaultTrack; thisObj = this; @@ -17128,15 +15417,13 @@ if (typeof module !== "undefined" && module.exports) { thisObj.hasCaptions = true; if (thisObj.prefCaptions === 1) { thisObj.captionsOn = true; - } - else { + } else { thisObj.captionsOn = false; } // assign the default track based on language of the player if (tracks[i]['language'] === thisObj.lang) { isDefaultTrack = true; - } - else { + } else { isDefaultTrack = false; } thisObj.tracks.push({ @@ -17144,18 +15431,17 @@ if (typeof module !== "undefined" && module.exports) { 'language': tracks[i]['language'], 'label': tracks[i]['label'], 'def': isDefaultTrack - }); + }); } - thisObj.captions = thisObj.tracks; + thisObj.captions = thisObj.tracks; thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original thisObj.setupPopups('captions'); deferred.resolve(); - } - else { + } else { thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; + thisObj.usingVimeoCaptions = false; deferred.resolve(); } }); @@ -17165,69 +15451,59 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPosterUrl = function (vimeoId, width) { - // this is a placeholder, copied from getYouTubePosterUrl() - // Vimeo doesn't seem to have anything similar, - // nor does it seem to be possible to get the poster via the Vimeo API - // Vimeo playlist support (with thumbnail images) may require use of data-poster + // Vimeo Oembed only returns a 640px width image. Hope at some point there's an alternative. + var url = 'http://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId, imageUrl = ''; + + fetch( url ).then( response => { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 + return response.json(); + }) + .then( json => { + imageUrl = json.thumbnail_url; + }) + .catch( error => { + if (thisObj.debug) { + + } + }); - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; - }; + return imageUrl; + }; AblePlayer.prototype.getVimeoId = function (url) { - + // return a Vimeo ID, extracted from a full Vimeo URL // Supported URL patterns are anything containing 'vimeo.com' - // and ending with a '/' followed by the ID. + // and ending with a '/' followed by the ID. // (Vimeo IDs do not have predicatable lengths) - - // Update: If URL contains parameters, return the full url - // This will need to be passed to the Vimeo Player API - // as a url parameter, not as an id parameter - this.vimeoUrlHasParams = false; - - var idStartPos, id; - - if (typeof url === 'number') { - // this is likely already a vimeo ID - return url; - } - else if (url.indexOf('vimeo.com') !== -1) { - // this is a full Vimeo URL - if (url.indexOf('?') !== -1) { - // URL contains parameters - this.vimeoUrlHasParams = true; - return url; - } - else { - url = url.trim(); - idStartPos = url.lastIndexOf('/') + 1; - id = url.substring(idStartPos); - return id; - } - } - else { - return url; - } -}; + + // Update: If URL contains parameters, return the full url + // This will need to be passed to the Vimeo Player API + // as a url parameter, not as an id parameter + this.vimeoUrlHasParams = false; + + if (typeof url === 'number') { + // this is likely already a vimeo ID + return url; + } else { + urlObject = new URL(url); + } + if ( 'vimeo.com' === urlObject.hostname \|\| 'player.vimeo.com' === urlObject.hostname ) { + // this is a full Vimeo URL + if ( '' !== urlObject.search ) { + // URL contains parameters + this.vimeoUrlHasParams = true; + return url; + } else { + if ( 'player.vimeo.com' === urlObject.hostname ) { + return urlObject.pathname.replace( '/video/', '' ); + } else { + return urlObject.pathname.replace( '/', '' ); + } + } + } else { + return url; + } + }; })(jQuery); diff --git a/src/build/separate-dompurify/ableplayer.js b/src/build/separate-dompurify/ableplayer.js index baeb735..7d45bd8 100644 --- a/src/build/separate-dompurify/ableplayer.js +++ b/src/build/separate-dompurify/ableplayer.js @@ -1,37 +1,4 @@ -/! ableplayer V4.5.1 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / -/ - // JavaScript for Able Player - - // HTML5 Media API: - // http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement - // http://dev.w3.org/html5/spec-author-view/video.html - - // W3C API Test Page: - // http://www.w3.org/2010/05/video/mediaevents.html - - // YouTube Player API for iframe Embeds - https://developers.google.com/youtube/iframe_api_reference - - // YouTube Player Parameters - https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 - - // YouTube Data API - https://developers.google.com/youtube/v3 - - // Vimeo Player API - https://github.com/vimeo/player.js - - // Google API Client Library for JavaScript - https://developers.google.com/api-client-library/javascript/dev/dev_jscript - - // Google API Explorer: YouTube services and methods - https://developers.google.com/apis-explorer/#s/youtube/v3/ - - // Web Speech API (Speech Synthesis) - // https://w3c.github.io/speech-api/#tts-section - // https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis -/ - +/! ableplayer V4.8.0 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / /jslint node: true, browser: true, white: true, indent: 2, unparam: true, plusplus: true / /global $, jQuery / "use strict"; @@ -41,7 +8,6 @@ var AblePlayerInstances = []; (function ($) { $(function () { - $('video, audio').each(function (index, element) { if ($(element).data('able-player') !== undefined) { AblePlayerInstances.push(new AblePlayer($(this),$(element))); @@ -62,12 +28,13 @@ var AblePlayerInstances = []; } }); - // Construct an AblePlayer object - // Parameters are: - // media - jQuery selector or element identifying the media. + /* + * Construct the AblePlayer object. + * + * @param object media jQuery selector or element identifying the media. + / window.AblePlayer = function(media) { - var thisObj = this; // Keep track of the last player created for use with global events. @@ -79,80 +46,49 @@ var AblePlayerInstances = []; return; } - /////////////////////////////// - // // Default variables assignment - // - /////////////////////////////// - // The following variables CAN be overridden with HTML attributes // autoplay (Boolean; if present always resolves to true, regardless of value) if ($(media).attr('autoplay') !== undefined) { - this.autoplay = true; // this value remains constant + this.autoplay = true; // this value remains constant this.okToPlay = true; // this value can change dynamically - } - else { + } else { this.autoplay = false; this.okToPlay = false; } - + // loop (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('loop') !== undefined) { - this.loop = true; - } - else { - this.loop = false; - } + this.loop = ($(media).attr('loop') !== undefined) ? true : false; // playsinline (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('playsinline') !== undefined) { - this.playsInline = '1'; // this value gets passed to YT.Player contructor in youtube.js - } - else { - this.playsInline = '0'; - } + this.playsInline = ($(media).attr('playsinline') !== undefined) ? '1' : '0'; // poster (Boolean, indicating whether media element has a poster attribute) - if ($(media).attr('poster')) { - this.hasPoster = true; - } - else { - this.hasPoster = false; - } + this.hasPoster = ( $(media).attr('poster') \|\| $(media).data('poster') ) ? true : false; - // get height and width attributes, if present - // and add them to variables - // Not currently used, but might be useful for resizing player - if ($(media).attr('width')) { - this.width = $(media).attr('width'); - } - if ($(media).attr('height')) { - this.height = $(media).attr('height'); - } + this.audioPoster = $(media).data('poster'); + this.audioPosterAlt = $(media).data('poster-alt' ); + + // get height and width attributes, if present + // and add them to variables + // Not currently used, but might be useful for resizing player + this.width = $(media).attr('width') ?? 0; + this.height = $(media).attr('height') ?? 0; // start-time - if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) { - this.startTime = $(media).data('start-time'); - } - else { - this.startTime = 0; - } + var startTime = $(media).data('start-time'); + var isNumeric = ( typeof startTime === 'number' \|\| ( typeof startTime === 'string' && value.trim() !== '' && ! isNaN(value) && isFinite( Number(value) ) ) ) ? true : false; + this.startTime = ( startTime !== undefined && isNumeric ) ? startTime : 0; // debug - if ($(media).data('debug') !== undefined && $(media).data('debug') !== false) { - this.debug = true; - } - else { - this.debug = false; - } + this.debug = ($(media).data('debug') !== undefined && $(media).data('debug') !== false) ? true : false; // Path to root directory of Able Player code if ($(media).data('root-path') !== undefined) { // add a trailing slash if there is none this.rootPath = $(media).data('root-path').replace(/\/?$/, '/'); - } - else { + } else { this.rootPath = this.getRootPath(); } @@ -174,68 +110,49 @@ var AblePlayerInstances = []; if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) { this.useChaptersButton = false; - } - else { + } else { this.useChaptersButton = true; } - - // Control whether text descriptions are read aloud + + // Control whether text descriptions are read aloud // set to "false" if the sole purpose of the WebVTT descriptions file // is to integrate text description into the transcript - // set to "true" to write description text to a div - // This variable does not* control the method by which description is read. - // For that, see below (this.descMethod) + // set to "true" to write description text to a div + // This variable does not control the method by which description is read. + // For that, see below (this.descMethod) if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) { this.readDescriptionsAloud = false; - } - else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { + } else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { // support both singular and plural spelling of attribute this.readDescriptionsAloud = false; - } - else { + } else { this.readDescriptionsAloud = true; } - // Method by which text descriptions are read - // valid values of data-desc-reader are: - // 'brower' (default) - text-based audio description is handled by the browser, if supported - // 'screenreader' - text-based audio description is always handled by screen readers - // The latter may be preferable by owners of websites in languages that are not well supported - // by the Web Speech API - if ($(media).data('desc-reader') == 'screenreader') { - this.descReader = 'screenreader'; - } - else { - this.descReader = 'browser'; - } - - // Default state of captions and descriptions - // This setting is overridden by user preferences, if they exist - // values for data-state-captions and data-state-descriptions are 'on' or 'off' - if ($(media).data('state-captions') == 'off') { - this.defaultStateCaptions = 0; // off - } - else { - this.defaultStateCaptions = 1; // on by default - } - if ($(media).data('state-descriptions') == 'on') { - this.defaultStateDescriptions = 1; // on - } - else { - this.defaultStateDescriptions = 0; // off by default - } + // setting initial this.descVoices to an empty array + // to be populated later by getBrowserVoices + this.descVoices = []; - // Default setting for prefDescPause - // Extended description (i.e., pausing during description) is on by default - // but this settings give website owners control over that - // since they know the nature of their videos, and whether pausing is necessary - // This setting is overridden by user preferences, if they exist - if ($(media).data('desc-pause-default') == 'off') { - this.defaultDescPause = 0; // off - } - else { - this.defaultDescPause = 1; // on by default - } + // Method by which text descriptions are read + // valid values of data-desc-reader are: + // 'brower' (default) - text-based audio description is handled by the browser, if supported + // 'screenreader' - text-based audio description is always handled by screen readers + // The latter may be preferable by owners of websites in languages that are not well supported + // by the Web Speech API + this.descReader = ($(media).data('desc-reader') == 'screenreader') ? 'screenreader' : 'browser'; + + // Default state of captions and descriptions + // This setting is overridden by user preferences, if they exist + // values for data-state-captions and data-state-descriptions are 'on' or 'off' + this.defaultStateCaptions = ($(media).data('state-captions') == 'off') ? 0 : 1; + this.defaultStateDescriptions = ($(media).data('state-descriptions') == 'on') ? 1 : 0; + + // Default setting for prefDescPause + // Extended description (i.e., pausing during description) is on by default + // but this settings give website owners control over that + // since they know the nature of their videos, and whether pausing is necessary + // This setting is overridden by user preferences, if they exist + this.defaultDescPause = ($(media).data('desc-pause-default') == 'off') ? 0 : 1; // Headings // By default, an off-screen heading is automatically added to the top of the media player @@ -254,75 +171,60 @@ var AblePlayerInstances = []; // There are three types of interactive transcripts. // In descending of order of precedence (in case there are conflicting tags), they are: // 1. "manual" - A manually coded external transcript (requires data-transcript-src) - // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div) + // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div & a valid target element) // 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button // If data-include-transcript="false", there is no "popup" transcript - - if ($(media).data('transcript-div') !== undefined && $(media).data('transcript-div') !== "") { - this.transcriptDivLocation = $(media).data('transcript-div'); - } - else { + var transcriptDivLocation = $(media).data('transcript-div'); + if ( transcriptDivLocation !== undefined && transcriptDivLocation !== "" && null !== document.getElementById( transcriptDivLocation ) ) { + this.transcriptDivLocation = transcriptDivLocation; + } else { this.transcriptDivLocation = null; } - if ($(media).data('include-transcript') !== undefined && $(media).data('include-transcript') === false) { - this.hideTranscriptButton = true; - } - else { - this.hideTranscriptButton = null; - } + var includeTranscript = $(media).data('include-transcript'); + this.hideTranscriptButton = ( includeTranscript !== undefined && includeTranscript === false) ? true : false; this.transcriptType = null; if ($(media).data('transcript-src') !== undefined) { this.transcriptSrc = $(media).data('transcript-src'); if (this.transcriptSrcHasRequiredParts()) { this.transcriptType = 'manual'; - } - else { + } else { console.log('ERROR: Able Player transcript is missing required parts'); } - } - else if ($(media).find('track[kind="captions"], track[kind="subtitles"]').length > 0) { + } else if ($(media).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length > 0) { // required tracks are present. COULD automatically generate a transcript - if (this.transcriptDivLocation) { - this.transcriptType = 'external'; - } - else { - this.transcriptType = 'popup'; - } + this.transcriptType = (this.transcriptDivLocation) ? 'external' : 'popup'; } // In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript - // If false (default), line breaks are are removed from transcripts in order to provide a more seamless reading experience + // If false (default), line breaks are are removed from transcripts for a more seamless reading experience // If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem - if ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) { - this.lyricsMode = true; - } - else { - this.lyricsMode = false; - } + this.lyricsMode = ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) ? true : false; - // Transcript Title + // Set Transcript Title if defined explicitly. See transcript.js. if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") { this.transcriptTitle = $(media).data('transcript-title'); } - else { - // do nothing. The default title will be defined later (see transcript.js) + + // Sign Language + // sign language can be a modal (default) or assigned to a div on the page. + var signDivLocation = $(media).data('sign-div'); + if ( signDivLocation !== undefined && signDivLocation !== "" && null !== document.getElementById( signDivLocation ) ) { + this.$signDivLocation = $( '#' + signDivLocation ); + } else { + this.$signDivLocation = null; } // Captions // data-captions-position can be used to set the default captions position // this is only the default, and can be overridden by user preferences // valid values of data-captions-position are 'below' and 'overlay' - if ($(media).data('captions-position') === 'overlay') { - this.defaultCaptionsPosition = 'overlay'; - } - else { // the default, even if not specified - this.defaultCaptionsPosition = 'below'; - } + this.defaultCaptionsPosition = ($(media).data('captions-position') === 'overlay') ? 'overlay' : 'below'; // Chapters - if ($(media).data('chapters-div') !== undefined && $(media).data('chapters-div') !== "") { - this.chaptersDivLocation = $(media).data('chapters-div'); + var chaptersDiv = $(media).data('chapters-div'); + if ( chaptersDiv !== undefined && chaptersDiv !== "") { + this.chaptersDivLocation = chaptersDiv; } if ($(media).data('chapters-title') !== undefined) { @@ -330,83 +232,76 @@ var AblePlayerInstances = []; this.chaptersTitle = $(media).data('chapters-title'); } - if ($(media).data('chapters-default') !== undefined && $(media).data('chapters-default') !== "") { - this.defaultChapter = $(media).data('chapters-default'); - } - else { - this.defaultChapter = null; - } + var defaultChapter = $(media).data('chapters-default'); + this.defaultChapter = ( defaultChapter !== undefined && defaultChapter !== "") ? defaultChapter : null; // Slower/Faster buttons // valid values of data-speed-icons are 'animals' (default) and 'arrows' // 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows - if ($(media).data('speed-icons') === 'arrows') { - this.speedIcons = 'arrows'; - } - else { - this.speedIcons = 'animals'; - } + this.speedIcons = ($(media).data('speed-icons') === 'arrows') ? 'arrows' : 'animals'; // Seekbar // valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters' - if ($(media).data('seekbar-scope') === 'chapter' \|\| $(media).data('seekbar-scope') === 'chapters') { - this.seekbarScope = 'chapter'; - } - else { - this.seekbarScope = 'video'; - } + var seekbarScope = $(media).data('seekbar-scope'); + this.seekbarScope = ( seekbarScope === 'chapter' \|\| seekbarScope === 'chapters') ? 'chapter' : 'video'; // YouTube - if ($(media).data('youtube-id') !== undefined && $(media).data('youtube-id') !== "") { - this.youTubeId = this.getYouTubeId($(media).data('youtube-id')); + var youTubeId = $(media).data('youtube-id'); + if ( youTubeId !== undefined && youTubeId !== "") { + this.youTubeId = this.getYouTubeId(youTubeId); + if ( ! this.hasPoster ) { + let poster = this.getYouTubePosterUrl(this.youTubeId,'640'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('youtube-desc-id') !== undefined && $(media).data('youtube-desc-id') !== "") { - this.youTubeDescId = this.getYouTubeId($(media).data('youtube-desc-id')); + var youTubeDescId = $(media).data('youtube-desc-id'); + if ( youTubeDescId !== undefined && youTubeDescId !== "") { + this.youTubeDescId = this.getYouTubeId(youTubeDescId); } - if ($(media).data('youtube-nocookie') !== undefined && $(media).data('youtube-nocookie')) { - this.youTubeNoCookie = true; - } - else { - this.youTubeNoCookie = false; + var youTubeSignId = $(media).data('youtube-sign-src'); + if ( youTubeSignId !== undefined && youTubeSignId !== "") { + this.youTubeSignId = this.getYouTubeId(youTubeSignId); } + var youTubeNoCookie = $(media).data('youtube-nocookie'); + this.youTubeNoCookie = (youTubeNoCookie !== undefined && youTubeNoCookie) ? true : false; + // Vimeo - if ($(media).data('vimeo-id') !== undefined && $(media).data('vimeo-id') !== "") { - this.vimeoId = this.getVimeoId($(media).data('vimeo-id')); + var vimeoId = $(media).data('vimeo-id'); + if ( vimeoId !== undefined && vimeoId !== "") { + this.vimeoId = this.getVimeoId(vimeoId); + if ( ! this.hasPoster ) { + let poster = thisObj.getVimeoPosterUrl(this.vimeoId,'1200'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('vimeo-desc-id') !== undefined && $(media).data('vimeo-desc-id') !== "") { - this.vimeoDescId = this.getVimeoId($(media).data('vimeo-desc-id')); + var vimeoDescId = $(media).data('vimeo-desc-id'); + if ( vimeoDescId !== undefined && vimeoDescId !== "") { + this.vimeoDescId = this.getVimeoId(vimeoDescId); } // Skin // valid values of data-skin are: - // 'legacy' (default), two rows of controls; seekbar positioned in available space within top row - // '2020', all buttons in one row beneath a full-width seekbar - if ($(media).data('skin') == '2020') { - this.skin = '2020'; - } - else { - this.skin = 'legacy'; - } + // '2020' (default as of 4.6), all buttons in one row beneath a full-width seekbar + // 'legacy', two rows of controls; seekbar positioned in available space within top row + this.skin = ($(media).data('skin') == 'legacy') ? 'legacy' : '2020'; - // Size - // width of Able Player is determined using the following order of precedence: - // 1. data-width attribute + // Size + // width of Able Player is determined using the following order of precedence: + // 1. data-width attribute // 2. width attribute (for video or audio, although it is not valid HTML for audio) // 3. Intrinsic size from video (video only, determined later) if ($(media).data('width') !== undefined) { this.playerWidth = parseInt($(media).data('width')); - } - else if ($(media)[0].getAttribute('width')) { - // NOTE: jQuery attr() returns null for all invalid HTML attributes + } else if ($(media)[0].getAttribute('width')) { + // NOTE: jQuery attr() returns null for all invalid HTML attributes // (e.g., width on <audio>) - // but it can be acessed via JavaScript getAttribute() + // but it can be acessed via JavaScript getAttribute() this.playerWidth = parseInt($(media)[0].getAttribute('width')); - } - else { - this.playerWidth = null; + } else { + this.playerWidth = null; } // Icon type @@ -418,21 +313,18 @@ var AblePlayerInstances = []; this.forceIconType = false; if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") { var iconType = $(media).data('icon-type'); - if (iconType === 'font' \|\| iconType == 'image' \|\| iconType == 'svg') { + if (iconType === 'font' \|\| iconType === 'image' \|\| iconType === 'svg') { this.iconType = iconType; this.forceIconType = true; } } - if ($(media).data('allow-fullscreen') !== undefined && $(media).data('allow-fullscreen') === false) { - this.allowFullscreen = false; - } - else { - this.allowFullscreen = true; - } - // Define other variables that are used in fullscreen program flow - this.clickedFullscreenButton = false; - this.restoringAfterFullscreen = false; + var allowFullScreen = $(media).data('allow-fullscreen'); + this.allowFullscreen = (allowFullScreen !== undefined && allowFullScreen === false) ? false : true; + + // Define other variables that are used in fullscreen program flow + this.clickedFullscreenButton = false; + this.restoringAfterFullscreen = false; // Seek interval // Number of seconds to seek forward or back with Rewind & Forward buttons @@ -451,35 +343,26 @@ var AblePlayerInstances = []; // Now Playing // Shows "Now Playing:" plus the title of the current track above player // Only used if there is a playlist - if ($(media).data('show-now-playing') !== undefined && $(media).data('show-now-playing') === false) { - this.showNowPlaying = false; - } - else { - this.showNowPlaying = true; - } + var showNowPlaying = $(media).data('show-now-playing'); + this.showNowPlaying = (showNowPlaying !== undefined && showNowPlaying === false) ? false : true; // TTML support (experimental); enabled for testing with data-use-ttml (Boolean) if ($(media).data('use-ttml') !== undefined) { this.useTtml = true; // The following may result in a console error. this.convert = require('xml-js'); - } - else { + } else { this.useTtml = false; } // Fallback // The data-test-fallback attribute can be used to test the fallback solution in any browser - if ($(media).data('test-fallback') !== undefined && $(media).data('test-fallback') !== false) { - if ($(media).data('test-fallback') == '2') { - this.testFallback = 2; // emulate browser that doesn't support HTML5 media - } - else { - this.testFallback = 1; // emulate failure to load Able Player - } - } - else { - this.testFallback = false; + var testFallback = $(media).data('test-fallback'); + if ( testFallback !== undefined && testFallback !== false) { + // 1: build error; 2: browser doesn't support media. + this.testFallback = ( testFallback == '2' ) ? 2 : 1; + } else { + this.testFallback = false; } // Language @@ -488,54 +371,39 @@ var AblePlayerInstances = []; // 2. Lang attribute on <html> or <body>, if a matching translation file is available // 3. English // Final calculation occurs in translation.js > getTranslationText() - if ($(media).data('lang') !== undefined && $(media).data('lang') !== "") { - this.lang = $(media).data('lang').toLowerCase(); - } - else { - this.lang = null; - } + var lang = $(media).data('lang'); + this.lang = ( lang !== undefined && lang !== "") ? lang.toLowerCase() : null; // Metadata Tracks - if ($(media).data('meta-type') !== undefined && $(media).data('meta-type') !== "") { - this.metaType = $(media).data('meta-type'); + var metaType = $(media).data('meta-type'); + if ( metaType !== undefined && metaType !== "") { + this.metaType = metaType; } - - if ($(media).data('meta-div') !== undefined && $(media).data('meta-div') !== "") { - this.metaDiv = $(media).data('meta-div'); + var metaDiv = $(media).data('meta-div'); + if ( metaDiv !== undefined && metaDiv !== "") { + this.metaDiv = metaDiv; } // Search // conducting a search requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { + var searchDiv = $(media).data('search-div'); + if ( searchDiv !== undefined && searchDiv !== "") { - this.searchDiv = $(media).data('search-div'); + this.searchDiv = searchDiv; // Search term (optional; could be assigned later in a JavaScript application) - if ($(media).data('search') !== undefined && $(media).data('search') !== "") { - this.searchString = $(media).data('search'); + var searchString = $(media).data('search'); + if ( searchString !== undefined && searchString !== "") { + this.searchString = searchString; } // Search Language - if ($(media).data('search-lang') !== undefined && $(media).data('search-lang') !== "") { - this.searchLang = $(media).data('search-lang'); - } - else { - this.searchLang = null; // will change to final value of this.lang in translation.js > getTranslationText() - } + var searchLang = $(media).data('search-lang'); + this.searchLang = ( searchLang !== undefined && searchLang !== "") ? searchLang : null; // Search option: Ignore capitalization in search terms - if ($(media).data('search-ignore-caps') !== undefined && $(media).data('search-ignore-caps') !== false) { - this.searchIgnoreCaps = true; - } - else { - this.searchIgnoreCaps = false; - } - - // conducting a search currently requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - this.searchString = $(media).data('search'); - this.searchDiv = $(media).data('search-div'); - } + var searchIgnoreCaps = $(media).data('search-ignore-caps'); + this.searchIgnoreCaps = ( searchIgnoreCaps !== undefined && searchIgnoreCaps !== false) ? true : false; } // Hide controls when video starts playing @@ -544,8 +412,7 @@ var AblePlayerInstances = []; if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) { this.hideControls = true; this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode - } - else { + } else { this.hideControls = false; this.hideControlsOriginal = false; } @@ -564,13 +431,11 @@ var AblePlayerInstances = []; this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoMode = false; this.stenoFrameId = null; this.$stenoFrame = null; @@ -580,9 +445,7 @@ var AblePlayerInstances = []; this.setDefaults(); //////////////////////////////////////// - // // End assignment of default variables - // //////////////////////////////////////// this.ableIndex = AblePlayer.nextIndex; @@ -594,21 +457,15 @@ var AblePlayerInstances = []; // use defer method to defer additional processing until text is retrieved this.tt = {}; var thisObj = this; - $.when(this.getTranslationText()).then( - function () { - if (thisObj.countProperties(thisObj.tt) > 50) { - // close enough to ensure that most text variables are populated - thisObj.setup(); - } - else { - // can't continue loading player with no text - thisObj.provideFallback(); - } + async function fetchTranslations(thisObj) { + try { + await thisObj.getTranslationText(); + thisObj.setup(); + } catch { + thisObj.provideFallback(); } - ). - fail(function() { - thisObj.provideFallback(); - }); + } + fetchTranslations(thisObj); }; // Index to increment every time new player is created. @@ -623,17 +480,15 @@ var AblePlayerInstances = []; if (!thisObj.player) { // No player for this media, show last-line fallback. thisObj.provideFallback(); - } - else { + } else { thisObj.setupInstance().then(function () { thisObj.setupInstancePlaylist(); if (thisObj.hasPlaylist) { // for playlists, recreatePlayer() is called from within cuePlaylistItem() - } - else { - thisObj.recreatePlayer().then(function() { + } else { + thisObj.recreatePlayer().then(function() { thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed + thisObj.playerCreated = true; // remains true until browser is refreshed }); } }); @@ -653,13 +508,10 @@ var AblePlayerInstances = []; }; AblePlayer.localGetElementById = function(element, id) { - if (element.getRootNode) - { + if (element.getRootNode) { // Use getRootNode() and querySelector() where supported (for shadow DOM support) return $(element.getRootNode().querySelector('#' + id)); - } - else - { + } else { // If getRootNode is not supported it should be safe to use document.getElementById (since there is no shadow DOM support) return $(document.getElementById(id)); } @@ -728,8 +580,7 @@ var AblePlayerInstances = []; $el = $('<div>', { 'class': 'able-controller' }).hide(); - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { $el = $('<div>', { 'class': 'able-window-toolbar' }).hide(); @@ -744,16 +595,11 @@ var AblePlayerInstances = []; blue = rgb[2]; luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue); // range is 1 - 255; therefore 125 is the tipping point - if (luminance < 125) { // background is dark - iconColor = 'white'; - } - else { // background is light - iconColor = 'black'; - } + iconColor = (luminance < 125) ? 'white' : 'black'; + if ($elements[i] === 'controller') { this.iconColor = iconColor; - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { this.toolbarIconColor = iconColor; } $el.remove(); @@ -766,20 +612,16 @@ var AblePlayerInstances = []; this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/'; this.playButtonImg = this.imgPath + 'play.png'; this.pauseButtonImg = this.imgPath + 'pause.png'; - this.restartButtonImg = this.imgPath + 'restart.png'; - this.rewindButtonImg = this.imgPath + 'rewind.png'; this.forwardButtonImg = this.imgPath + 'forward.png'; - this.previousButtonImg = this.imgPath + 'previous.png'; this.nextButtonImg = this.imgPath + 'next.png'; if (this.speedIcons === 'arrows') { this.fasterButtonImg = this.imgPath + 'slower.png'; this.slowerButtonImg = this.imgPath + 'faster.png'; - } - else if (this.speedIcons === 'animals') { + } else if (this.speedIcons === 'animals') { this.fasterButtonImg = this.imgPath + 'rabbit.png'; this.slowerButtonImg = this.imgPath + 'turtle.png'; } @@ -789,19 +631,19 @@ var AblePlayerInstances = []; this.signButtonImg = this.imgPath + 'sign.png'; this.transcriptButtonImg = this.imgPath + 'transcript.png'; this.descriptionsButtonImg = this.imgPath + 'descriptions.png'; - this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png'; this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png'; - this.prefsButtonImg = this.imgPath + 'preferences.png'; this.helpButtonImg = this.imgPath + 'help.png'; }; - AblePlayer.prototype.getSvgData = function(button) { + AblePlayer.prototype.getIconData = function(button) { // returns array of values for creating <svg> tag for specified button // 0 = <svg> viewBox attribute // 1 = <path> d (description) attribute + // 2 = icon class for font icons + // 3 = img URL for images. var svg = Array(); switch (button) { @@ -809,142 +651,184 @@ var AblePlayerInstances = []; case 'play': svg[0] = '0 0 16 20'; svg[1] = 'M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z'; + svg[2] = 'icon-play'; + svg[3] = this.playButtonImg; break; case 'pause': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'stop': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-pause'; + svg[3] = this.pauseButtonImg; break; case 'restart': svg[0] = '0 0 20 20'; svg[1] = 'M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z'; + svg[2] = 'icon-restart'; + svg[3] = this.restartButtonImg; break; case 'rewind': svg[0] = '0 0 20 20'; svg[1] = 'M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z'; + svg[2] = 'icon-rewind'; + svg[3] = this.rewindButtonImg; break; case 'forward': svg[0] = '0 0 20 20'; svg[1] = 'M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z'; + svg[2] = 'icon-forward'; + svg[3] = this.forwardButtonImg; break; case 'previous': svg[0] = '0 0 20 20'; svg[1] = 'M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z'; + svg[2] = 'icon-previous'; + svg[3] = this.previousButtonImg; break; case 'next': svg[0] = '0 0 20 20'; svg[1] = 'M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z'; + svg[2] = 'icon-next'; + svg[3] = this.nextButtonImg; break; case 'slower': - svg[0] = '0 0 20 20'; + svg[0] = '0 0 11 20'; svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z'; + svg[2] = 'icon-slower'; + svg[3] = this.slowerButtonImg; break; case 'faster': svg[0] = '0 0 11 20'; svg[1] = 'M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-faster'; + svg[3] = this.fasterButtonImg; break; case 'turtle': svg[0] = '0 0 20 20'; svg[1] = 'M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z'; + svg[2] = 'icon-turtle'; + svg[3] = this.slowerButtonImg; break; case 'rabbit': svg[0] = '0 0 20 20'; svg[1] = 'M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z'; + svg[2] = 'icon-rabbit'; + svg[3] = this.fasterButtonImg; break; case 'ellipsis': svg[0] = '0 0 20 20'; svg[1] = 'M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z'; + svg[2] = 'icon-ellipsis'; + svg[3] = false; break; case 'pipe': svg[0] = '0 0 20 20'; svg[1] = 'M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z'; + svg[2] = 'icon-pipe'; + svg[3] = false; break; case 'captions': svg[0] = '0 0 20 20'; svg[1] = 'M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z'; + svg[2] = 'icon-captions'; + svg[3] = this.captionsButtonImg; break; case 'descriptions': svg[0] = '0 0 20 20'; svg[1] = 'M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z'; + svg[2] = 'icon-descriptions'; + svg[3] = this.descriptionsButtonImg; break; case 'sign': svg[0] = '0 0 20 20'; svg[1] = 'M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z'; + svg[2] = 'icon-sign'; + svg[3] = this.signButtonImg; break; case 'mute': case 'volume-mute': svg[0] = '0 0 20 20'; svg[1] = 'M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z'; + svg[2] = 'icon-volume-mute'; + svg[3] = this.imgPath + 'volume-mute.png'; break; case 'volume-soft': svg[0] = '0 0 20 20'; svg[1] = 'M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-soft'; + svg[3] = this.imgPath + 'volume-soft.png'; break; case 'volume-medium': svg[0] = '0 0 20 20'; svg[1] = 'M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-medium'; + svg[3] = this.imgPath + 'volume-medium.png'; break; case 'volume-loud': svg[0] = '0 0 21 20'; svg[1] = 'M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-loud'; + svg[3] = this.imgPath + 'volume-loud.png'; break; case 'chapters': svg[0] = '0 0 20 20'; svg[1] = 'M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z'; + svg[2] = 'icon-chapters'; + svg[3] = this.chaptersButtonImg; break; case 'transcript': svg[0] = '0 0 20 20'; svg[1] = 'M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z'; + svg[2] = 'icon-transcript'; + svg[3] = this.transcriptButtonImg; break; case 'preferences': svg[0] = '0 0 20 20'; svg[1] = 'M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z'; + svg[2] = 'icon-preferences'; + svg[3] = this.prefsButtonImg; break; case 'close': svg[0] = '0 0 16 20'; svg[1] = 'M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z'; + svg[2] = 'icon-close'; + svg[3] = null; break; case 'fullscreen-expand': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z'; + svg[2] = 'icon-fullscreen-expand'; + svg[3] = this.fullscreenExpandButtonImg; break; case 'fullscreen-collapse': svg[0] = '0 0 20 20'; svg[1] = 'M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'help': - svg[0] = '0 0 11 20'; - svg[1] = 'M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z'; + svg[2] = 'icon-fullscreen-collapse'; + svg[3] = this.fullscreenCollapseButtonImg; break; } @@ -952,26 +836,20 @@ var AblePlayerInstances = []; }; // Initialize player based on data on page. - // This sets some variables, but does not modify anything. Safe to call multiple times. + // This sets some variables, but does not modify anything. Safe to call multiple times. // Can call again after updating this.media so long as new media element has the same ID. AblePlayer.prototype.reinitialize = function () { - var deferred, promise, thisObj, errorMsg, srcFile; + var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - // if F12 Developer Tools aren't open in IE (through 9, no longer a problen in IE10) - // console.log causes an error - can't use debug without a console to log messages to - if (! window.console) { - this.debug = false; - } - this.startedPlaying = false; - // TODO: Move this setting to cookie. + // TODO: Move this setting to preferences. this.autoScrollTranscript = true; - //this.autoScrollTranscript = this.getCookie(autoScrollTranscript); // (doesn't work) + //this.autoScrollTranscript = this.getPref(autoScrollTranscript); // (doesn't work) // Bootstrap from this.media possibly being an ID or other selector. this.$media = $(this.media).first(); @@ -980,14 +858,12 @@ var AblePlayerInstances = []; // Set media type to 'audio' or 'video'; this determines some of the behavior of player creation. if (this.$media.is('audio')) { this.mediaType = 'audio'; - } - else if (this.$media.is('video')) { + } else if (this.$media.is('video')) { this.mediaType = 'video'; - } - else { + } else { // Able Player was initialized with some element other than <video> or <audio> this.provideFallback(); - deferred.fail(); + deferred.reject(); return promise; } @@ -1006,107 +882,36 @@ var AblePlayerInstances = []; AblePlayer.prototype.setPlayerSize = function(width, height) { - var mediaId = this.$media.attr('id'); - - // Called again after width and height are known - - if (this.mediaType === 'audio') { - if (this.playerWidth) { - this.$ableWrapper.css('width',this.playerWidth + 'px'); - } - } - else if (width > 0 && height > 0) { - this.playerWidth = width; - this.playerHeight = height; - this.aspectRatio = height / width; + // Called again after width and height are known + if (this.mediaType !== 'audio' && width > 0 && height > 0) { + this.playerWidth = width; + this.playerHeight = height; + this.aspectRatio = height / width; } }; AblePlayer.prototype.setIconType = function() { - // returns either "svg", "font" or "image" (in descending order of preference) - // Test for support of each type. If not supported, test the next type. - // last resort is image icons - - var $tempButton, $testButton, controllerFont; - + // Tests for SVG and font support removed in version 4.7.0. + // Browser support for these is no longer a risk; they are widely supported in all browsers. + // This now only returns 'svg' or 'false' if iconType is forced. if (this.forceIconType) { // use value specified in data-icon-type return false; } - // test for SVG support - // Test this method widely; failed as expected on IE8 and below - // https://stackoverflow.com/a/27568129/744281 - if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) { - // browser supports SVG - this.iconType = 'svg'; - } - else { - // browser does NOT support SVG - // test whether browser can support icon fonts, and whether user has overriding the default style sheet - // which could cause problems with proper display of the icon fonts - if (window.getComputedStyle) { - - // webkit doesn't return calculated styles unless element has been added to the DOM - // and is visible (note: visibly clipped is considered "visible") - // use playpauseButton for font-family test if it exists; otherwise must create a new temp button - if ($('span.icon-play').length) { - $testButton = $('span.icon-play'); - } - else { - $tempButton = $('<span>',{ - 'class': 'icon-play able-clipped' - }); - $('body').append($tempButton); - $testButton = $tempButton; - } - - // the following retrieves the computed value of font-family - // tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works! - // tested in Chrome 49.x with Font Changer plugin - works! - // tested in IE with user-defined style sheet enables - works! - // It does NOT account for users who have "ignore font styles on web pages" checked in IE - // There is no known way to check for that ??? - controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family'); - if (typeof controllerFont !== 'undefined') { - if (controllerFont.indexOf('able') !== -1) { - this.iconType = 'font'; - } - else { - this.iconType = 'image'; - } - } - else { - // couldn't get computed font-family; use images to be safe - this.iconType = 'image'; - } - } - else { - // window.getComputedStyle is not supported (IE 8 and earlier) - // No known way to detect computed font - // The following retrieves the value from the style sheet, not the computed font - // controllerFont = $tempButton.get(0).currentStyle.fontFamily; - // It will therefore return "able", even if the user is overriding that with a custom style sheet - // To be safe, use images - this.iconType = 'image'; - } - if (typeof $tempButton !== 'undefined') { - $tempButton.remove(); - } - } + this.iconType = 'svg'; }; // Perform one-time setup for this instance of player; called after player is first initialized. AblePlayer.prototype.setupInstance = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); if (this.$media.attr('id')) { this.mediaId = this.$media.attr('id'); - } - else { + } else { // Ensure the base media element always has an ID. this.mediaId = "ableMediaId_" + this.ableIndex; this.$media.attr('id', this.mediaId); @@ -1134,7 +939,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from YouTube var $youTubeVideos = $(this).find('li[data-youtube-id]'); $youTubeVideos.each(function() { - var youTubeId = $(this).attr('data-youtube-id'); + var youTubeId = DOMPurify.sanitize( $(this).attr('data-youtube-id') ); var youTubePoster = thisObj.getYouTubePosterUrl(youTubeId,'120'); var $youTubeImg = $('<img>',{ 'src': youTubePoster, @@ -1147,7 +952,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from Vimeo var $vimeoVideos = $(this).find('li[data-vimeo-id]'); $vimeoVideos.each(function() { - var vimeoId = $(this).attr('data-youtube-id'); + var vimeoId = $(this).attr('data-vimeo-id'); var vimeoPoster = thisObj.getVimeoPosterUrl(vimeoId,'120'); var $vimeoImg = $('<img>',{ 'src': vimeoPoster, @@ -1160,13 +965,8 @@ var AblePlayerInstances = []; $(this).find('li span').attr('aria-hidden','true'); thisObj.playlistIndex = 0; var dataEmbedded = $(this).data('embedded'); - if (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) { - // embed playlist within player - thisObj.playlistEmbed = true; - } - else { - thisObj.playlistEmbed = false; - } + // is playlist embedded within player? + thisObj.playlistEmbed = (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) ? true : false; } }); @@ -1193,12 +993,12 @@ var AblePlayerInstances = []; AblePlayer.prototype.recreatePlayer = function () { // Creates the appropriate player for the current source. - // This function is called each time a new media instance is loaded - // e.g., - // User clicks on an item in a playlist - // User swaps to/from described version of video - // Blocks of code that only need to be executed once are controlled - // by this.playerCreated + // This function is called each time a new media instance is loaded + // e.g., + // User clicks on an item in a playlist + // User swaps to/from described version of video + // Blocks of code that only need to be executed once are controlled + // by this.playerCreated // TODO: Ensure when recreating player that we carry over the mediaId if (!this.player) { @@ -1208,38 +1008,37 @@ var AblePlayerInstances = []; var deferred, promise, thisObj, prefsGroups, i; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - this.playerDeleted = false; // reset after deletePlayer() + this.playerDeleted = false; // reset after deletePlayer() // set temp stopgap to prevent this function from executing again before finished - this.recreatingPlayer = true; + this.recreatingPlayer = true; if (!this.playerCreated) { // only call these functions once this.loadCurrentPreferences(); this.injectPlayerCode(); - this.resizePlayer(this.media.videoWidth,this.media.videoHeight); + this.resizePlayer(this.media.videoWidth,this.media.videoHeight); } - this.getSampleDescriptionText(); + this.getSampleDescriptionText(); this.initSignLanguage(); this.initPlayer().then(function() { - thisObj.getTracks().then(function() { + thisObj.getTracks().then(function() { thisObj.initDescription().then(function() { thisObj.setupTracks().then(function() { - if (thisObj.hasClosedDesc) { - if (!thisObj.$descDiv \|\| - (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { - // descDiv either doesn't exist, or exists in an orphaned state - // Either way, it needs to be rebuilt... + if (thisObj.hasClosedDesc) { + if (!thisObj.$descDiv \|\| (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { + // descDiv either doesn't exist, or exists in an orphaned state + // Either way, it needs to be rebuilt... thisObj.injectTextDescriptionArea(); } } @@ -1256,7 +1055,6 @@ var AblePlayerInstances = []; thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - thisObj.setFullscreen(false); if (typeof thisObj.volume === 'undefined') { thisObj.volume = thisObj.defaultVolume; @@ -1289,37 +1087,35 @@ var AblePlayerInstances = []; thisObj.setupPopups(); thisObj.updateCaption(); thisObj.injectVTS(); - if (thisObj.chaptersDivLocation) { - thisObj.populateChaptersDiv(); - } + thisObj.populateChaptersDiv(); thisObj.showSearchResults(); // Go ahead and load media, without user requesting it // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth // However, the media needs to load for us to get the media's duration if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.$media[0].load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } } // refreshControls is called twice building/initializing the player // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete setTimeout(function() { - thisObj.refreshControls('init'); - deferred.resolve(); - },100); - }); - }); + thisObj.refreshControls(); + deferred.resolve(); + },100); + }); + }); }); }); - }); + }); }); }, function() { // initPlayer fail thisObj.provideFallback(); }); - return promise; + return promise; }; AblePlayer.prototype.initPlayer = function () { @@ -1329,33 +1125,28 @@ var AblePlayerInstances = []; // First run player specific initialization. if (this.player === 'html5') { playerPromise = this.initHtml5Player(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { playerPromise = this.initYouTubePlayer(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { playerPromise = this.initVimeoPlayer(); } // After player specific initialization is done, run remaining general initialization. - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - playerPromise.done( + playerPromise.then( function () { // done/resolved if (thisObj.useFixedSeekInterval) { + // if fixed seekInterval was not already assigned (using value of data-seek-interval) if (!thisObj.seekInterval) { thisObj.seekInterval = thisObj.defaultSeekInterval; } - else { - // fixed seekInterval was already assigned, using value of data-seek-interval attribute - } thisObj.seekIntervalCalculated = true; - } - else { + } else { thisObj.setSeekInterval(); } deferred.resolve(); } - ).fail(function () { // failed + ).finally(function () { // failed deferred.reject(); } ); @@ -1365,10 +1156,8 @@ var AblePlayerInstances = []; AblePlayer.prototype.initStenoFrame = function() { - var thisObj, deferred, promise, $iframe; - thisObj = this; - - deferred = new $.Deferred(); + var deferred, promise; + deferred = new this.defer(); promise = deferred.promise(); if (this.stenoMode && this.$stenoFrame) { @@ -1376,15 +1165,13 @@ var AblePlayerInstances = []; if (this.$stenoFrame[0].contentWindow,document.readyState == 'complete') { // iframe has already loaded deferred.resolve(); - } - else { + } else { // iframe has not loaded. Wait for it. this.$stenoFrame.on('load',function() { deferred.resolve(); }); } - } - else { + } else { // there is no stenoFrame to initialize deferred.resolve(); } @@ -1399,33 +1186,24 @@ var AblePlayerInstances = []; var thisObj, duration; thisObj = this; this.seekInterval = this.defaultSeekInterval; - if (this.useChapterTimes) { - duration = this.chapterDuration; - } - else { - duration = this.duration; - } + duration = (this.useChapterTimes) ? this.chapterDuration : this.duration; + if (typeof duration === 'undefined' \|\| duration < 1) { // no duration; just use default for now but keep trying until duration is available this.seekIntervalCalculated = false; return; - } - else { + } else { if (duration <= 20) { this.seekInterval = 5; // 4 steps max - } - else if (duration <= 30) { + } else if (duration <= 30) { this.seekInterval = 6; // 5 steps max - } - else if (duration <= 40) { + } else if (duration <= 40) { this.seekInterval = 8; // 5 steps max - } - else if (duration <= 100) { + } else if (duration <= 100) { this.seekInterval = 10; // 10 steps max - } - else { + } else { // never more than 10 steps from start to end - this.seekInterval = (duration / 10); + this.seekInterval = Math.round(duration / 10, 0); } this.seekIntervalCalculated = true; } @@ -1474,38 +1252,38 @@ var AblePlayerInstances = []; // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); - break; - default: - // some other error occurred - console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); - break; - } - }); - } - else { - // disable Vimeo captions. - this.vimeoPlayer.disableTextTrack().then(function() { - // Vimeo captions disabled - }).catch(function(error) { - console.log('Error disabling Vimeo text track: ',error); - }); - } + } + ).catch(function(error) { + switch (error.name) { + case 'InvalidTrackLanguageError': + // no track was available with the specified language + console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); + break; + case 'InvalidTrackError': + // no track was available with the specified language and kind + console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); + break; + default: + // some other error occurred + console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); + break; + } + }); + } else { + // disable Vimeo captions. + this.vimeoPlayer.disableTextTrack().then(function() { + // Vimeo captions disabled + }).catch(function(error) { + console.log('Error disabling Vimeo text track: ',error); + }); } + } } }; AblePlayer.prototype.initHtml5Player = function () { // Nothing special to do! - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); deferred.resolve(); return promise; @@ -1519,6 +1297,7 @@ var AblePlayerInstances = []; // Keep native player from displaying captions/subtitles by setting textTrack.mode='disabled' // https://dev.w3.org/html5/spec-author-view/video.html#text-track-mode // This should work but historically hasn't been supported in all browsers + // As of July 2025, 96% supported per https://caniuse.com/?search=text-track-mode. // Workaround for non-supporting browsers is to remove default attribute // We're doing that too in track.js > setupCaptions() var textTracks = this.$media.get(0).textTracks; @@ -1535,146 +1314,125 @@ var AblePlayerInstances = []; // Determine which player to use, if any // return 'html5', 'youtube', 'vimeo', or null - - var i, sourceType, $newItem; - if (this.testFallback) { - return null; - } - else if (this.youTubeId) { - if (this.mediaType !== 'video') { - // attempting to play a YouTube video using an element other than <video> - return null; - } - else { - return 'youtube'; - } - } - else if (this.vimeoId) { - if (this.mediaType !== 'video') { - // attempting to play a Vimeo video using an element other than <video> - return null; - } - else { - return 'vimeo'; - } - - } - else if (this.media.canPlayType) { + if (this.testFallback) { + return null; + } else if (this.youTubeId) { + // null if attempting to play a YouTube video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'youtube'; + } else if (this.vimeoId) { + // null if attempting to play a Vimeo video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'vimeo'; + } else if (this.media.canPlayType) { return 'html5'; - } - else { + } else { // Browser does not support the available media file return null; } }; - })(jQuery); (function ($) { - AblePlayer.prototype.setCookie = function(cookieValue) { - - Cookies.set('Able-Player', JSON.stringify(cookieValue), { - expires: 90, - sameSite: 'strict' - }); + AblePlayer.prototype.setPrefs = function(preferences) { + if ( typeof Cookies !== 'undefined' ) { + Cookies.set('Able-Player', JSON.stringify(preferences), { + expires: 90, + sameSite: 'strict' + }); + } else { + localStorage.setItem( 'Able-Player', JSON.stringify( preferences ) ); + } }; - AblePlayer.prototype.getCookie = function() { + AblePlayer.prototype.getPref = function() { - var defaultCookie = { + var defaultPrefs = { preferences: {}, sign: {}, transcript: {}, voices: [] }; - var cookie; + var preferences; try { - cookie = JSON.parse(Cookies.get('Able-Player')); + if ( typeof Cookies !== 'undefined' ) { + preferences = JSON.parse( Cookies.get('Able-Player') ); + } else { + preferences = JSON.parse( localStorage.getItem('Able-Player') ); + } } catch (err) { - // Original cookie can't be parsed; update to default - this.setCookie(defaultCookie); - cookie = defaultCookie; - } - if (cookie) { - return cookie; - } - else { - return defaultCookie; + // Original preferences can't be parsed; update to default + this.setPrefs( defaultPrefs ); + preferences = defaultPrefs; } + return (preferences) ? preferences : defaultPrefs; }; - AblePlayer.prototype.updateCookie = function( setting ) { - - // called when a particular setting had been updated - // useful for settings updated indepedently of Preferences dialog + AblePlayer.prototype.updatePreferences = function( setting ) { + // useful for settings updated independently of Preferences dialog // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle() // setting is any supported preference name (e.g., "prefCaptions") // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows) - var cookie, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; - cookie = this.getCookie(); + var preferences, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; + preferences = this.getPref(); if (setting === 'transcript' \|\| setting === 'sign') { if (setting === 'transcript') { $window = this.$transcriptArea; windowPos = $window.position(); - if (typeof cookie.transcript === 'undefined') { - cookie.transcript = {}; - } - cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.transcript['zindex'] = $window.css('z-index'); - cookie.transcript['top'] = windowPos.top; - cookie.transcript['left'] = windowPos.left; - cookie.transcript['width'] = $window.width(); - cookie.transcript['height'] = $window.height(); - } - else if (setting === 'sign') { + if (typeof preferences.transcript === 'undefined') { + preferences.transcript = {}; + } + preferences.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.transcript['zindex'] = $window.css('z-index'); + preferences.transcript['top'] = windowPos.top; + preferences.transcript['left'] = windowPos.left; + preferences.transcript['width'] = $window.width(); + preferences.transcript['height'] = $window.height(); + } else if (setting === 'sign') { $window = this.$signWindow; windowPos = $window.position(); - if (typeof cookie.sign === 'undefined') { - cookie.sign = {}; - } - cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.sign['zindex'] = $window.css('z-index'); - cookie.sign['top'] = windowPos.top; - cookie.sign['left'] = windowPos.left; - cookie.sign['width'] = $window.width(); - cookie.sign['height'] = $window.height(); - } - } - else if (setting === 'voice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; - } - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; - } - } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (typeof preferences.sign === 'undefined') { + preferences.sign = {}; + } + preferences.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.sign['zindex'] = $window.css('z-index'); + preferences.sign['top'] = windowPos.top; + preferences.sign['left'] = windowPos.left; + preferences.sign['width'] = $window.width(); + preferences.sign['height'] = $window.height(); + } + } else if (setting === 'voice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; + } + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; + } + } + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - } - else { + preferences.voices.push(newVoice); + } + } else { available = this.getAvailablePreferences(); - // Rebuild cookie with current cookie values, + // Rebuild preferences with current preferences values, // replacing the one value that's been changed for (i = 0; i < available.length; i++) { prefName = available[i]['name']; if (prefName == setting) { // this is the one that requires an update - cookie.preferences[prefName] = this[prefName]; + preferences.preferences[prefName] = this[prefName]; } } } - // Save updated cookie - this.setCookie(cookie); + // Save updated preferences + this.setPrefs(preferences); }; AblePlayer.prototype.getPreferencesGroups = function() { @@ -1683,17 +1441,15 @@ var AblePlayerInstances = []; // in the Preferences popup menu // Human-readable label for each group is defined in translation table if (this.usingYouTubeCaptions) { - // no transcript is possible - return ['captions','descriptions','keyboard']; - } - else if (this.usingVimeoCaptions) { + // no transcript is possible + return ['captions','descriptions','keyboard']; + } else if (this.usingVimeoCaptions) { // users cannot control caption appearance // and no transcript is possible - return ['descriptions','keyboard']; + return ['descriptions','keyboard']; + } else { + return ['captions','descriptions','keyboard','transcript']; } - else { - return ['captions','descriptions','keyboard','transcript']; - } } AblePlayer.prototype.getAvailablePreferences = function() { @@ -1705,19 +1461,25 @@ var AblePlayerInstances = []; // Modifier keys preferences prefs.push({ 'name': 'prefAltKey', // use alt key with shortcuts - 'label': this.tt.prefAltKey, + 'label': this.translate( 'prefAltKey', 'Alt' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefCtrlKey', // use ctrl key with shortcuts - 'label': this.tt.prefCtrlKey, + 'label': this.translate( 'prefCtrlKey', 'Control' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefShiftKey', - 'label': this.tt.prefShiftKey, + 'label': this.translate( 'prefShiftKey', 'Shift' ), + 'group': 'keyboard', + 'default': 0 + }); + prefs.push({ + 'name': 'prefNoKeyShortcuts', + 'label': this.translate( 'prefNoKeyShortcuts', 'Disable Keyboard Shortcuts' ), 'group': 'keyboard', 'default': 0 }); @@ -1731,7 +1493,7 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefHighlight', // highlight transcript as media plays - 'label': this.tt.prefHighlight, + 'label': this.translate( 'prefHighlight', 'Highlight transcript as media plays' ), 'group': 'transcript', 'default': 1 // on because many users can benefit }); @@ -1743,13 +1505,12 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefTabbable', // tab-enable transcript - 'label': this.tt.prefTabbable, + 'label': this.translate( 'prefTabbable', 'Keyboard-enable transcript' ), 'group': 'transcript', 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page }); // Caption preferences - prefs.push({ 'name': 'prefCaptions', // closed captions default state 'label': null, @@ -1762,23 +1523,23 @@ var AblePlayerInstances = []; /* // not supported yet prefs.push({ 'name': 'prefCaptionsStyle', - 'label': this.tt.prefCaptionsStyle, + 'label': this.translate( 'prefCaptionsStyle', 'Style' ), 'group': 'captions', - 'default': this.tt.captionsStylePopOn + 'default': this.translate( 'captionsStylePopOn', 'Pop-on' ) }); / - // captions are always positioned above the player for audio + // captions are always positioned above the player for audio if (this.mediaType === 'video') { prefs.push({ 'name': 'prefCaptionsPosition', - 'label': this.tt.prefCaptionsPosition, + 'label': this.translate( 'prefCaptionsPosition', 'Position' ), 'group': 'captions', 'default': this.defaultCaptionsPosition }); - } + } prefs.push({ 'name': 'prefCaptionsFont', - 'label': this.tt.prefCaptionsFont, + 'label': this.translate( 'prefCaptionsFont', 'Font' ), 'group': 'captions', 'default': 'sans-serif' }); @@ -1786,7 +1547,7 @@ var AblePlayerInstances = []; // This is the one option that is supported by YouTube IFrame API prefs.push({ 'name': 'prefCaptionsSize', - 'label': this.tt.prefCaptionsSize, + 'label': this.translate( 'prefCaptionsSize', 'Font size' ), 'group': 'captions', 'default': '100%' }); @@ -1795,25 +1556,25 @@ var AblePlayerInstances = []; prefs.push({ 'name': 'prefCaptionsColor', - 'label': this.tt.prefCaptionsColor, + 'label': this.translate( 'prefCaptionsColor', 'Text Color' ), 'group': 'captions', 'default': 'white' }); prefs.push({ 'name': 'prefCaptionsBGColor', - 'label': this.tt.prefCaptionsBGColor, + 'label': this.translate( 'prefCaptionsBGColor', 'Background' ), 'group': 'captions', 'default': 'black' }); prefs.push({ 'name': 'prefCaptionsOpacity', - 'label': this.tt.prefCaptionsOpacity, + 'label': this.translate( 'prefCaptionsOpacity', 'Opacity' ), 'group': 'captions', 'default': '100%' }); } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { // Description preferences prefs.push({ 'name': 'prefDesc', // audio description default state @@ -1829,37 +1590,40 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefDescVoice', - 'label': this.tt.prefDescVoice, + 'label': this.translate( 'prefDescVoice', 'Voice' ), 'group': 'descriptions', 'default': null // will be set later, in injectPrefsForm() }); prefs.push({ 'name': 'prefDescPitch', - 'label': this.tt.prefDescPitch, + 'label': this.translate( 'prefDescPitch', 'Pitch' ), 'group': 'descriptions', 'default': 1 // 0 to 2 }); prefs.push({ 'name': 'prefDescRate', - 'label': this.tt.prefDescRate, + 'label': this.translate( 'prefDescRate', 'Rate' ), 'group': 'descriptions', 'default': 1 // 0.1 to 10 (1 is normal speech; 2 is fast but decipherable; >2 is super fast) }); prefs.push({ 'name': 'prefDescVolume', - 'label': this.tt.volume, + 'label': this.translate( 'volume', 'Volume' ), 'group': 'descriptions', 'default': 1 // 0 to 1 }); - prefs.push({ - 'name': 'prefDescPause', // automatically pause when closed description starts - 'label': this.tt.prefDescPause, - 'group': 'descriptions', - 'default': this.defaultDescPause - }); + // Don't enable pause option if video described files in use. + if ( this.descMethod !== 'video' ) { + prefs.push({ + 'name': 'prefDescPause', // automatically pause when closed description starts + 'label': this.translate( 'prefDescPause', 'Automatically pause video when description starts' ), + 'group': 'descriptions', + 'default': this.defaultDescPause + }); + } prefs.push({ 'name': 'prefDescVisible', // visibly show closed description (if avilable and used) - 'label': this.tt.prefDescVisible, + 'label': this.translate( 'prefDescVisible', 'Make description visible' ), 'group': 'descriptions', 'default': 0 // off as of 4.3.16, to avoid overloading the player with visible features }); @@ -1877,29 +1641,28 @@ var AblePlayerInstances = []; AblePlayer.prototype.loadCurrentPreferences = function () { - // Load current/default preferences from cookie into the AblePlayer object. + // Load current/default preferences into the AblePlayer object. var available = this.getAvailablePreferences(); - var cookie = this.getCookie(); - // Copy current cookie values into this object, and fill in any default values. + var preferences = this.getPref(); + // Copy current preferences values into this object, and fill in any default values. for (var ii = 0; ii < available.length; ii++) { var prefName = available[ii]['name']; var defaultValue = available[ii]['default']; - if (cookie.preferences[prefName] !== undefined) { - this[prefName] = cookie.preferences[prefName]; - } - else { - cookie.preferences[prefName] = defaultValue; + if (preferences.preferences[prefName] !== undefined) { + this[prefName] = preferences.preferences[prefName]; + } else { + preferences.preferences[prefName] = defaultValue; this[prefName] = defaultValue; } } - // Also load array of preferred voices from cookie - if (typeof cookie.voices !== 'undefined') { - this.prefVoices = cookie.voices; - } + // Also load array of preferred voices from preferences + if (typeof preferences.voices !== 'undefined') { + this.prefVoices = preferences.voices; + } - this.setCookie(cookie); + this.setPrefs(preferences); }; AblePlayer.prototype.injectPrefsForm = function (form) { @@ -1907,19 +1670,12 @@ var AblePlayerInstances = []; // Creates a preferences form and injects it. // form is one of the supported forms (groups) defined in getPreferencesGroups() - var thisObj, available, descLangs, - $prefsDiv, formTitle, introText, - $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, - $fieldset, fieldsetClass, fieldsetId, - $descFieldset, $descLegend, $legend, legendId, - thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField, - $div1,id1,$radio1,$label1, - $div2,id2,$radio2,$label2, - options,$thisOption,optionValue,optionLang,optionText,sampleCapsDiv, - changedPref,changedSpan,changedText, - currentDescState, prefDescVoice, - $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem, - dialog,saveButton,cancelButton; + var thisObj, available, + $prefsDiv, formTitle, introText, $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, + $fieldset, fieldsetClass, fieldsetId, $legend, legendId, thisPref, $thisDiv, thisClass, + thisId, $thisLabel, $thisField, options,$thisOption,optionValue,optionLang,optionText, + changedPref,changedSpan,changedText, currentDescState, prefDescVoice, $kbHeading,$kbList, + kbLabels,keys,kbListText,$kbListItem, dialog,$saveButton,$cancelButton,$buttonContainer; thisObj = this; available = this.getAvailablePreferences(); @@ -1931,83 +1687,74 @@ var AblePlayerInstances = []; var customClass = 'able-prefs-form-' + form; $prefsDiv.addClass(customClass); - // add titles and intros - if (form == 'captions') { - formTitle = this.tt.prefTitleCaptions; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage - } - else if (form == 'descriptions') { - formTitle = this.tt.prefTitleDescriptions; + // add titles and intros + if (form == 'captions') { + formTitle = this.translate( 'prefTitleCaptions', 'Captions Preferences' ); + } else if (form == 'descriptions') { + formTitle = this.translate( 'prefTitleDescriptions', 'Audio Description Preferences' ); var $prefsIntro = $('<p>',{ - text: this.tt.prefIntroDescription1 + text: this.translate( 'prefIntroDescription1', 'This media player supports audio description in two ways: ' ) }); var $prefsIntroUL = $('<ul>'); var $prefsIntroLI1 = $('<li>',{ - text: this.tt.prefDescFormatOption1 + text: this.translate( 'prefDescFormatOption1', 'alternative described version of video' ) }); var $prefsIntroLI2 = $('<li>',{ - text: this.tt.prefDescFormatOption2 + text: this.translate( 'prefDescFormatOption2', 'text-based description, announced by screen reader' ) }); $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2); if (this.hasOpenDesc && this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2 + ' '; - currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>'; - currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else if (this.hasOpenDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.'; - } - else if (this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else { - currentDescState = this.tt.prefIntroDescriptionNone; + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ) + ' '; + currentDescState += '<strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>'; + currentDescState += ' <em>' + this.translate( 'and', 'and' ) + '</em> <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else if (this.hasOpenDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>.'; + } else if (this.hasClosedDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else { + currentDescState = this.translate( 'prefIntroDescriptionNone', 'The current video has no audio description in either format.' ); } $prefsIntroP2 = $('<p>',{ html: currentDescState }); - p3Text = this.tt.prefIntroDescription3; + p3Text = this.translate( 'prefIntroDescription3', 'Use the following form to set your preferences related to text-based audio description.' ); if (this.hasOpenDesc \|\| this.hasClosedDesc) { - p3Text += ' ' + this.tt.prefIntroDescription4; + p3Text += ' ' + this.translate( 'prefIntroDescription4', 'After you save your settings, audio description can be toggled on/off using the Description button.' ); } $prefsIntroP3 = $('<p>',{ text: p3Text }); - $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3); - } - else if (form == 'keyboard') { - formTitle = this.tt.prefTitleKeyboard; - introText = this.tt.prefIntroKeyboard1; - introText += ' ' + this.tt.prefIntroKeyboard2; - introText += ' ' + this.tt.prefIntroKeyboard3; + $prefsDiv.append( $prefsIntro, $prefsIntroUL, $prefsIntroP2, $prefsIntroP3 ); + } else if (form == 'keyboard') { + formTitle = this.translate( 'prefTitleKeyboard', 'Keyboard Preferences' ); + introText = this.translate( 'prefIntroKeyboard1', 'The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list).' ); + introText += ' ' + this.translate( 'prefIntroKeyboard2', 'Modifier keys (Shift, Alt, and Control) can be assigned below.' ); + introText += ' ' + this.translate( 'prefIntroKeyboard3', 'NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you.' ); $prefsIntro = $('<p>',{ text: introText }); $prefsDiv.append($prefsIntro); - } - else if (form == 'transcript') { - formTitle = this.tt.prefTitleTranscript; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage + } else if (form == 'transcript') { + formTitle = this.translate( 'prefTitleTranscript', 'Transcript Preferences' ); } - $fieldset = $('<div>').attr('role','group'); + $fieldset = $('<div>').attr('role','group'); fieldsetClass = 'able-prefs-' + form; fieldsetId = this.mediaId + '-prefs-' + form; legendId = fieldsetId + '-legend'; $fieldset.addClass(fieldsetClass).attr('id',fieldsetId); if (form === 'keyboard') { - $legend = $('<h2>' + this.tt.prefHeadingKeyboard1 + '</h2>'); + $legend = $('<h2>' + this.translate( 'prefHeadingKeyboard1', 'Modifier keys used for shortcuts' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); - } - else if (form === 'descriptions') { - $legend = $('<h2>' + this.tt.prefHeadingTextDescription + '</h2>'); + } else if (form === 'descriptions') { + $legend = $('<h2>' + this.translate( 'prefHeadingTextDescription', 'Text-based audio description' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); @@ -2030,7 +1777,7 @@ var AblePlayerInstances = []; }); if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') { // add a change handler that updates the style of the sample caption text - $thisField.change(function() { + $thisField.on( 'change', function() { changedPref = $(this).attr('name'); thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref); }); @@ -2040,28 +1787,19 @@ var AblePlayerInstances = []; if (thisPref === 'prefCaptionsPosition') { optionValue = options[j]; if (optionValue === 'overlay') { - optionText = this.tt.captionsPositionOverlay; - } - else if (optionValue === 'below') { + optionText = this.translate( 'captionsPositionOverlay', 'Overlay' ); + } else if (optionValue === 'below') { optionValue = options[j]; - optionText = this.tt.captionsPositionBelow; + optionText = this.translate( 'captionsPositionBelow', 'Below video' ); } - } - else if (thisPref === 'prefCaptionsFont' \|\| thisPref === 'prefCaptionsColor' \|\| thisPref === 'prefCaptionsBGColor') { + } else if (thisPref === 'prefCaptionsFont' \|\| thisPref === 'prefCaptionsColor' \|\| thisPref === 'prefCaptionsBGColor') { optionValue = options[j][0]; optionText = options[j][1]; - } - else if (thisPref === 'prefCaptionsOpacity') { + } else if (thisPref === 'prefCaptionsOpacity') { optionValue = options[j]; optionText = options[j]; - if (optionValue === '0%') { - optionText += ' (' + this.tt.transparent + ')'; - } - else if (optionValue === '100%') { - optionText += ' (' + this.tt.solid + ')'; - } - } - else { + optionText += (optionValue === '0%') ? ' (' + this.translate( 'transparent', 'transparent' ) + ')' : ' (' + this.translate( 'solid', 'solid' ) + ')'; + } else { optionValue = options[j]; optionText = options[j]; } @@ -2075,8 +1813,7 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } $thisDiv.append($thisLabel,$thisField); - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); if (thisPref === 'prefDescPause' \|\| thisPref === 'prefDescVisible') { // these preferences are checkboxes @@ -2092,19 +1829,18 @@ var AblePlayerInstances = []; $thisField.prop('checked',true); } $thisDiv.append($thisField,$thisLabel); - } - else if (this.synth) { + } else if (this.synth) { // Only show these options if browser supports speech synthesis $thisDiv.addClass('able-prefs-select'); $thisField = $('<select>',{ name: thisPref, id: thisId, }); - if (thisPref === 'prefDescVoice' && this.descVoices) { - prefDescVoice = this.getPrefDescVoice(); + if (thisPref === 'prefDescVoice' && this.descVoices.length) { + prefDescVoice = this.getPrefDescVoice(); for (j=0; j < this.descVoices.length; j++) { optionValue = this.descVoices[j].name; - optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); + optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); optionText = optionValue + ' (' + this.descVoices[j].lang + ')'; $thisOption = $('<option>',{ 'value': optionValue, @@ -2117,12 +1853,10 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } this.$voiceSelectField = $thisField; - } - else { + } else { if (thisPref == 'prefDescPitch') { // 0 to 2 options = [0,0.5,1,1.5,2]; - } - else if (thisPref == 'prefDescRate') { // 0.1 to 10 + } else if (thisPref == 'prefDescRate') { // 0.1 to 10 // Tests with a variety of voices on MacOS and Windows // yielded the following choices that seem reasonable for audio description: // 0.5 - too slow (exclude this) @@ -2140,8 +1874,7 @@ var AblePlayerInstances = []; // Note: if these values are modified, must also modfiy them // in makePrefsValueReadable() options = [0.7,0.8,0.9,1,1.1,1.2,1.5,2,2.5,3]; - } - else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 + } else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 options = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]; } if (typeof options !== 'undefined') { @@ -2166,8 +1899,7 @@ var AblePlayerInstances = []; }); $thisDiv.append($thisLabel,$thisField); } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); $thisField = $('<input>',{ type: 'checkbox', @@ -2186,26 +1918,35 @@ var AblePlayerInstances = []; if (changedPref === 'prefAltKey') { changedSpan = '.able-modkey-alt'; changedText = thisObj.tt.prefAltKey + ' + '; - } - else if (changedPref === 'prefCtrlKey') { + } else if (changedPref === 'prefCtrlKey') { changedSpan = '.able-modkey-ctrl'; changedText = thisObj.tt.prefCtrlKey + ' + '; - } - else if (changedPref === 'prefShiftKey') { + } else if (changedPref === 'prefShiftKey') { changedSpan = '.able-modkey-shift'; changedText = thisObj.tt.prefShiftKey + ' + '; } - if ($(this).is(':checked')) { - $(changedSpan).text(changedText); - } - else { - $(changedSpan).text(''); + if ( changedPref !== 'prefNoKeyShortcuts' ) { + if ($(this).is(':checked')) { + $(changedSpan).text(changedText); + } else { + $(changedSpan).text(''); + } + } else { + if ($(this).is(':checked')) { + $('.able-modkey-item').addClass('hidden'); + } else { + $('.able-modkey-item').removeClass('hidden'); + } } }); } $thisDiv.append($thisField,$thisLabel); } - $fieldset.append($thisDiv); + if (thisPref === 'prefDescVoice' && !this.descVoices.length) { + // No voices are available (e.g., in Safari 15.4 on Mac OS) + } else { + $fieldset.append($thisDiv); + } } } $prefsDiv.append($fieldset); @@ -2216,25 +1957,25 @@ var AblePlayerInstances = []; if (!this.usingYouTubeCaptions) { this.$sampleCapsDiv = $('<div>',{ 'class': 'able-captions-sample' - }).text(this.tt.sampleCaptionText); + }).text( this.translate( 'sampleCaptionText', 'Sample caption text' ) ); $prefsDiv.append(this.$sampleCapsDiv); this.stylizeCaptions(this.$sampleCapsDiv); } - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { if (this.synth) { // add a div with sample audio description text this.$sampleDescDiv = $('<div>',{ 'class': 'able-desc-sample' - }).text(this.tt.sampleDescriptionText); + }).text( this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) ); $prefsDiv.append(this.$sampleDescDiv); - this.currentSampleText = this.tt.sampleDescriptionText; + this.currentSampleText = this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ); } - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { + let shortcutClass = (this.prefNoKeyShortcuts === 1 ) ? 'able-modkey-item hidden' : 'able-modkey-item'; + // add a current list of keyboard shortcuts $kbHeading = $('<h2>',{ - text: this.tt.prefHeadingKeyboard2 + text: this.translate( 'prefHeadingKeyboard2', 'Current keyboard shortcuts' ) }); $kbList = $('<ul>'); // create arrays of kbLabels and keys @@ -2242,100 +1983,85 @@ var AblePlayerInstances = []; keys = []; for (i=0; i<this.controls.length; i++) { if (this.controls[i] === 'play') { - kbLabels.push(this.tt.play + '/' + this.tt.pause); - keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar); - } - else if (this.controls[i] === 'restart') { - kbLabels.push(this.tt.restart); + kbLabels.push( this.translate( 'play', 'Play' ) + '/' + this.translate( 'pause', 'Pause' ) ); + keys.push('p</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-help-modifiers"> ' + this.translate( 'spacebar', 'spacebar' )); + } else if (this.controls[i] === 'restart') { + kbLabels.push(this.translate( 'restart', 'Restart' )); keys.push('s'); - } - else if (this.controls[i] === 'previous') { - kbLabels.push(this.tt.prevTrack); + } else if (this.controls[i] === 'previous') { + kbLabels.push( this.translate( 'prevTrack', 'Previous track' ) ); keys.push('b'); // b = back - } - else if (this.controls[i] === 'next') { - kbLabels.push(this.tt.nextTrack); + } else if (this.controls[i] === 'next') { + kbLabels.push( this.translate( 'nextTrack', 'Next track' ) ); keys.push('n'); - } - else if (this.controls[i] === 'rewind') { - kbLabels.push(this.tt.rewind); + } else if (this.controls[i] === 'rewind') { + kbLabels.push(this.translate( 'rewind', 'Rewind' )); keys.push('r'); - } - else if (this.controls[i] === 'forward') { - kbLabels.push(this.tt.forward); + } else if (this.controls[i] === 'forward') { + kbLabels.push(this.translate( 'forward', 'Forward' )); keys.push('f'); - } - else if (this.controls[i] === 'volume') { - kbLabels.push(this.tt.volume); - keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9'); + } else if (this.controls[i] === 'volume') { + kbLabels.push(this.translate( 'volume', 'Volume' )); + keys.push('v</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-modkey">1-9'); // mute toggle - kbLabels.push(this.tt.mute + '/' + this.tt.unmute); + kbLabels.push(this.translate( 'mute', 'Mute' ) + '/' + this.translate( 'unmute', 'Unmute' )); keys.push('m'); - } - else if (this.controls[i] === 'captions') { + } else if (this.controls[i] === 'captions') { if (this.captions.length > 1) { // caption button launches a Captions popup menu - kbLabels.push(this.tt.captions); - } - else { + kbLabels.push(this.translate( 'captions', 'Captions' )); + } else { // there is only one caption track // therefore caption button is a toggle if (this.captionsOn) { - kbLabels.push(this.tt.hideCaptions); - } - else { - kbLabels.push(this.tt.showCaptions); + kbLabels.push(this.translate( 'hideCaptions', 'Hide captions' )); + } else { + kbLabels.push(this.translate( 'showCaptions', 'Show captions' )); } } keys.push('c'); - } - else if (this.controls[i] === 'descriptions') { + } else if (this.controls[i] === 'descriptions') { if (this.descOn) { - kbLabels.push(this.tt.turnOffDescriptions); - } - else { - kbLabels.push(this.tt.turnOnDescriptions); + kbLabels.push(this.translate( 'turnOffDescriptions', 'Turn off descriptions' )); + } else { + kbLabels.push(this.translate( 'turnOnDescriptions', 'Turn on descriptions' )); } keys.push('d'); - } - else if (this.controls[i] === 'prefs') { - kbLabels.push(this.tt.preferences); + } else if (this.controls[i] === 'prefs') { + kbLabels.push(this.translate( 'preferences', 'Preferences' )); keys.push('e'); } - else if (this.controls[i] === 'help') { - kbLabels.push(this.tt.help); - keys.push('h'); - } } for (i=0; i<keys.length; i++) { // alt kbListText = '<span class="able-modkey-alt">'; if (this.prefAltKey === 1) { - kbListText += this.tt.prefAltKey + ' + '; + kbListText += this.translate( 'prefAltKey', 'Alt' ) + ' + '; } kbListText += '</span>'; // ctrl kbListText += '<span class="able-modkey-ctrl">'; if (this.prefCtrlKey === 1) { - kbListText += this.tt.prefCtrlKey + ' + '; + kbListText += this.translate( 'prefCtrlKey', 'Control' ) + ' + '; } kbListText += '</span>'; // shift kbListText += '<span class="able-modkey-shift">'; if (this.prefShiftKey === 1) { - kbListText += this.tt.prefShiftKey + ' + '; + kbListText += this.translate( 'prefShiftKey', 'Shift' ) + ' + '; } kbListText += '</span>'; kbListText += '<span class="able-modkey">' + keys[i] + '</span>'; kbListText += ' = ' + kbLabels[i]; $kbListItem = $('<li>',{ - html: kbListText + 'class': shortcutClass, + html: kbListText, }); $kbList.append($kbListItem); } // add Escape key - kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>'; - kbListText += ' = ' + this.tt.escapeKeyFunction; + kbListText = '<span class="able-modkey">' + this.translate( 'escapeKey', 'Escape' ) + '</span>'; + kbListText += ' = ' + this.translate( 'escapeKeyFunction', 'Close current dialog or popup menu' ); $kbListItem = $('<li>',{ html: kbListText }); @@ -2345,56 +2071,53 @@ var AblePlayerInstances = []; } // $prefsDiv (dialog) must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers $('body').append($prefsDiv); - dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', true, formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em'); + dialog = new AccessibleDialog( + $prefsDiv, + this.$prefsButton, + formTitle, + thisObj.tt.closeButtonLabel + ); // Add save and cancel buttons. - $prefsDiv.append('<hr>'); - saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - saveButton.click(function () { + $buttonContainer = $( '<div class="able-prefs-buttons"></div>' ); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); + $saveButton.on( 'click', function () { dialog.hide(); thisObj.savePrefsFromForm(); }); - cancelButton.click(function () { + $cancelButton.on( 'click', function () { dialog.hide(); thisObj.resetPrefsForm(); }); - - $prefsDiv.append(saveButton); - $prefsDiv.append(cancelButton); - + $buttonContainer.append( $saveButton,$cancelButton ); + $prefsDiv.append($buttonContainer); // Associate the dialog's H1 as aria-labelledby for groups of fields - // (alternative to fieldset and legend) - if (form === 'captions' \|\| form === 'transcript') { - $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); + // (alternative to fieldset and legend) + if (form === 'captions' \|\| form === 'transcript') { + $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); } // add global reference for future control if (form === 'captions') { this.captionPrefsDialog = dialog; - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { this.descPrefsDialog = dialog; - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { this.keyboardPrefsDialog = dialog; - } - else if (form === 'transcript') { + } else if (form === 'transcript') { this.transcriptPrefsDialog = dialog; } // Add click handler for dialog close button // (button is added in dialog.js) - $('div.able-prefs-form button.modalCloseButton').click(function() { + $('div.able-prefs-form button.modalCloseButton').on( 'click', function() { thisObj.resetPrefsForm(); }) // Add handler for escape key - $('div.able-prefs-form').keydown(function(e) { - if (e.which === 27) { // escape + $('div.able-prefs-form').on( 'keydown', function(e) { + if (e.key === 'Escape') { thisObj.resetPrefsForm(); } }); @@ -2402,23 +2125,21 @@ var AblePlayerInstances = []; AblePlayer.prototype.getPrefDescVoice = function () { - // return user's preferred voice for the current language from cookie.voices - var lang, cookie, i; + // return user's preferred voice for the current language from preferences.voices + var lang, preferences, i; - if (this.selectedDescriptions) { - lang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - lang = this.captionLang; - } - else { - lang = this.lang; + if (this.selectedDescriptions) { + lang = this.selectedDescriptions.language; + } else if (this.captionLang) { + lang = this.captionLang; + } else { + lang = this.lang; } - cookie = this.getCookie(); - if (cookie.voices) { - for (i=0; i < cookie.voices.length; i++) { - if (cookie.voices[i].lang === lang) { - return cookie.voices[i].name; + preferences = this.getPref(); + if (preferences.voices) { + for (i=0; i < preferences.voices.length; i++) { + if (preferences.voices[i].lang === lang) { + return preferences.voices[i].name; } } } @@ -2427,9 +2148,9 @@ var AblePlayerInstances = []; AblePlayer.prototype.rebuildDescPrefsForm = function () { - // Called if this.descVoices changes, which may happen if: - // getBrowserVoices() succeeds after an earlier failure - // user changes language of captions/subtitles and descVoices changes to match the new language + // Called if this.descVoices changes, which may happen if: + // getBrowserVoices() succeeds after an earlier failure + // user changes language of captions/subtitles and descVoices changes to match the new language var i, optionValue, optionText, $thisOption; @@ -2450,161 +2171,141 @@ var AblePlayerInstances = []; } }; - AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { - - // The values for pitch, rate, and volume (web speech API) - // are strange and inconsistent between variables - // this function returns text that is more readable than the values themselves + AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { + + // The values for pitch, rate, and volume (web speech API) + // are strange and inconsistent between variables + // this function returns text that is more readable than the values themselves + + if (pref === 'prefDescPitch') { + if (value === 0) { + return this.translate( 'prefDescPitch1', 'Very low' ); + } else if (value === 0.5) { + return this.translate( 'prefDescPitch2', 'Low' ); + } else if (value === 1) { + return this.translate( 'prefDescPitch3', 'Default' ); + } else if (value === 1.5) { + return this.translate( 'prefDescPitch4', 'High' ); + } else if (value === 2) { + return this.translate( 'prefDescPitch5', 'Very high' ); + } + } else if (pref === 'prefDescRate') { + // default in the API is 0.1 to 10, where 1 is normal speaking voice + // our custom range offers several rates close to 1 + // plus a couple of crazy fast ones for sport + // Our more readable options (1-10) or mapped here to API values + if (value === 0.7) { + return 1; + } else if (value === 0.8) { + return 2; + } else if (value === 0.9) { + return 3; + } else if (value === 1) { + return 4; + } else if (value === 1.1) { + return 5; + } else if (value === 1.2) { + return 6; + } else if (value === 1.5) { + return 7; + } else if (value === 2) { + return 8; + } else if (value === 2.5) { + return 9; + } else if (value === 3) { + return 10; + } + } else if (pref === 'prefDescVolume') { + // values range from 0.1 to 1.0 + return value 10; + } + return value; + }; + + AblePlayer.prototype.resetPrefsForm = function () { + + // Reset preferences form with default values from preferences + // Called when: + // User clicks cancel or close button in Prefs Dialog + // User presses Escape to close Prefs dialog + // User clicks Save in Prefs dialog, & there's more than one player on page + + var thisObj, preferences, available, i, prefName; - if (pref === 'prefDescPitch') { - if (value === 0) { - return this.tt.prefDescPitch1; - } - else if (value === 0.5) { - return this.tt.prefDescPitch2; - } - else if (value === 1) { - return this.tt.prefDescPitch3; - } - else if (value === 1.5) { - return this.tt.prefDescPitch4; - } - else if (value === 2) { - return this.tt.prefDescPitch5; - } - } - else if (pref === 'prefDescRate') { - // default in the API is 0.1 to 10, where 1 is normal speaking voice - // our custom range offers several rates close to 1 - // plus a couple of crazy fast ones for sport - // Our more readable options (1-10) or mapped here to API values - if (value === 0.7) { - return 1; - } - else if (value === 0.8) { - return 2; - } - else if (value === 0.9) { - return 3; - } - else if (value === 1) { - return 4; - } - else if (value === 1.1) { - return 5; - } - else if (value === 1.2) { - return 6; - } - else if (value === 1.5) { - return 7; - } - else if (value === 2) { - return 8; - } - else if (value === 2.5) { - return 9; - } - else if (value === 3) { - return 10; - } - } - else if (pref === 'prefDescVolume') { - // values range from 0.1 to 1.0 - return value * 10; - } - return value; - }; - - AblePlayer.prototype.resetPrefsForm = function () { - - // Reset preferences form with default values from cookie - // Called when: - // User clicks cancel or close button in Prefs Dialog - // User presses Escape to close Prefs dialog - // User clicks Save in Prefs dialog, & there's more than one player on page - - var thisObj, cookie, available, i, prefName, prefId, thisDiv, thisId; - - thisObj = this; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (i=0; i<available.length; i++) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is a caption-related select box - $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]); - } - else { // all others are checkboxes - if (this[prefName] === 1) { - $('input[name="' + prefName + '"]').prop('checked',true); - } - else { - $('input[name="' + prefName + '"]').prop('checked',false); - } + thisObj = this; + preferences = this.getPref(); + available = this.getAvailablePreferences(); + for (i=0; i<available.length; i++) { + prefName = available[i]['name']; + if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + // this is a caption-related select box + $('select[name="' + prefName + '"]').val(preferences.preferences[prefName]); + } else { // all others are checkboxes + if (this[prefName] === 1) { + $('input[name="' + prefName + '"]').prop('checked',true); + } else { + $('input[name="' + prefName + '"]').prop('checked',false); } } - // also restore style of sample caption div - this.stylizeCaptions(this.$sampleCapsDiv); - }; + } + // also restore style of sample caption div + this.stylizeCaptions(this.$sampleCapsDiv); + }; AblePlayer.prototype.savePrefsFromForm = function () { // Return a prefs object constructed from the form. // called when user saves the Preferences form - // update cookie with new value - var cookie, available, prefName, prefId, - voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, + // update preferences with new value + var preferences, available, prefName, prefId, + voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, numCapChanges, capSizeChanged, capSizeValue, newValue; numChanges = 0; numCapChanges = 0; // changes to caption-style-related preferences capSizeChanged = false; - cookie = this.getCookie(); + preferences = this.getPref(); available = this.getAvailablePreferences(); for (var i=0; i < available.length; i++) { // only prefs with labels are used in the Prefs form if (available[i]['label']) { prefName = available[i]['name']; prefId = this.mediaId + '_' + prefName; - if (prefName === 'prefDescVoice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; + if (prefName === 'prefDescVoice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; } voiceSelectId = this.mediaId + '_prefDescVoice'; this.prefDescVoice = $('select#' + voiceSelectId).find(':selected').val(); this.prefDescVoiceLang = $('select#' + voiceSelectId).find(':selected').attr('data-lang'); - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; } } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - numChanges++; - } - else if (prefName == 'prefDescMethod') { + preferences.voices.push(newVoice); + } + numChanges++; + } else if (prefName == 'prefDescMethod') { // As of v4.0.10, prefDescMethod is no longer a choice // this.prefDescMethod = $('input[name="' + prefName + '"]:checked').val(); this.prefDescMethod = 'video'; - if (this.prefDescMethod !== cookie.preferences['prefDescMethod']) { // user's preference has changed - cookie.preferences['prefDescMethod'] = this.prefDescMethod; + if (this.prefDescMethod !== preferences.preferences['prefDescMethod']) { // user's preference has changed + preferences.preferences['prefDescMethod'] = this.prefDescMethod; numChanges++; } - } - else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + } else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { // this is one of the caption-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref (for caption fields, not done elsewhere) this[prefName] = newValue; numChanges++; @@ -2614,37 +2315,32 @@ var AblePlayerInstances = []; capSizeChanged = true; capSizeValue = newValue; } - } - else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { + } else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { // this is one of the description-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref this[prefName] = newValue; numChanges++; } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes if ($('input[id="' + prefId + '"]').is(':checked')) { - cookie.preferences[prefName] = 1; + preferences.preferences[prefName] = 1; if (this[prefName] === 1) { // nothing has changed - } - else { + } else { // user has just turned this pref on this[prefName] = 1; numChanges++; } - } - else { // thisPref is not checked - cookie.preferences[prefName] = 0; + } else { // thisPref is not checked + preferences.preferences[prefName] = 0; if (this[prefName] === 1) { // user has just turned this pref off this[prefName] = 0; numChanges++; - } - else { + } else { // nothing has chaged } } @@ -2652,11 +2348,10 @@ var AblePlayerInstances = []; } } if (numChanges > 0) { - this.setCookie(cookie); - this.showAlert(this.tt.prefSuccess); - } - else { - this.showAlert(this.tt.prefNoChange); + this.setPrefs(preferences); + this.showAlert( this.translate( 'prefSuccess', 'Your changes have been saved.' ) ); + } else { + this.showAlert( this.translate( 'prefNoChange', "You didn't make any changes" ) ); } if (this.player === 'youtube' && (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) && @@ -2668,8 +2363,8 @@ var AblePlayerInstances = []; // there are multiple players on this page. // update prefs for ALL of them for (var i=0; i<AblePlayerInstances.length; i++) { - AblePlayerInstances[i].updatePrefs(); - AblePlayerInstances[i].geteferences(); + AblePlayerInstances[i].updatePlayerPrefs(); + AblePlayerInstances[i].loadCurrentPreferences(); AblePlayerInstances[i].resetPrefsForm(); if (numCapChanges > 0) { AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$captionsDiv); @@ -2679,10 +2374,9 @@ var AblePlayerInstances = []; } } } - } - else { + } else { // there is only one player - this.updatePrefs(); + this.updatePlayerPrefs(); if (numCapChanges > 0) { this.stylizeCaptions(this.$captionsDiv); // also apply same changes to descriptions, if present @@ -2693,16 +2387,14 @@ var AblePlayerInstances = []; } } - AblePlayer.prototype.updatePrefs = function () { + AblePlayer.prototype.updatePlayerPrefs = function () { // Update player based on current prefs. Safe to call multiple times. - - if (this.$transcriptDiv) { + if (this.$transcriptDiv) { // tabbable transcript if (this.prefTabbable === 1) { this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - else { + } else { this.$transcriptDiv.find('span.able-transcript-seekpoint').removeAttr('tabindex'); } @@ -2737,11 +2429,10 @@ var AblePlayerInstances = []; (function ($) { // See section 4.1 of dev.w3.org/html5/webvtt for format details. - AblePlayer.prototype.parseWebVTT = function(srcFile,text) { - -// var deferred = new $.Deferred(); -// var promise = deferred.promise(); + AblePlayer.prototype.parseWebVTT = function(data) { + let srcFile = data.src; + let text = data.text; // Normalize line ends to \n. text = text.replace(/(\r\n\|\n\|\r)/g,'\n'); @@ -2765,8 +2456,7 @@ var AblePlayerInstances = []; errString += err; if (console.warn) { console.warn(errString); - } - else if (console.log) { + } else if (console.log) { console.log(errString); } } @@ -2795,8 +2485,7 @@ var AblePlayerInstances = []; if (cutText[ii] === '\n') { state.column = 1; state.line += 1; - } - else { + } else { state.column += 1; } } @@ -2816,8 +2505,7 @@ var AblePlayerInstances = []; returnText = state.text; updatePosition(state, returnText); state.text = ''; - } - else { + } else { returnText = state.text.substring(0, nextEOL); updatePosition(state, returnText + '\n'); state.text = state.text.substring(nextEOL + 1); @@ -2827,12 +2515,7 @@ var AblePlayerInstances = []; function peekLine(state) { var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - return state.text; - } - else { - return state.text.substring(0, nextEOL); - } + return (nextEOL === -1) ? state.text : state.text.substring(0, nextEOL); } function parseFileBody(state) { @@ -2846,8 +2529,7 @@ var AblePlayerInstances = []; parseMetadataHeaders, eatAtLeast1EmptyLines, parseCuesAndComments]); - } - else { + } else { state.error = "WEBVTT signature not followed by whitespace."; } } @@ -2858,11 +2540,9 @@ var AblePlayerInstances = []; var nextLine = peekLine(state); if (nextLine.indexOf('-->') !== -1) { return; - } - else if (nextLine.length === 0) { + } else if (nextLine.length === 0) { return; - } - else { + } else { var keyValue = act(state, getMetadataKeyValue); state.metadata[keyValue[0]] = keyValue[1]; act(state, eatUntilEOLInclusive); @@ -2895,8 +2575,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -2910,8 +2589,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -2924,14 +2602,11 @@ var AblePlayerInstances = []; // If NOTE is not on a line all its own, it must be followed by a space or tab. if (nextLine.indexOf('NOTE') === 0 && ((nextLine.length === 4) \|\| (nextLine[4] === ' ') \|\| (nextLine[4] === '\t'))) { actList(state, [eatComment, eatEmptyLines]); - } - else if ($.trim(nextLine).length === 0 && state.text.length > 0) { + } else if (nextLine.trim().length === 0 && state.text.length > 0) { act(state, eatEmptyLines); - } - else if ($.trim(nextLine).length > 0) { + } else if (nextLine.trim().length > 0) { act(state, parseCue); - } - else { + } else { // Everythings parsed! return; } @@ -2954,8 +2629,7 @@ var AblePlayerInstances = []; errString += 'Expected cue timing for cueId \''+cueId+'\' but found: ' + nextLine + '\n'; if (console.warn) { console.warn(errString); - } - else if (console.log) { + } else if (console.log) { console.log(errString); } return; // Return leaving line for parseCuesAndComments to handle @@ -3024,8 +2698,7 @@ var AblePlayerInstances = []; // We'll use the tokens themselves as objects where possible. if (token.type === 'string') { current.children.push(token); - } - else if (token.type === 'startTag') { + } else if (token.type === 'startTag') { token.type = token.tagName; // Define token.parent; added by Terrill to fix bug end 'endTag' loop token.parent = current; @@ -3035,31 +2708,27 @@ var AblePlayerInstances = []; } current.children.push(token); current = token; - } - else if (token.tagName === 'rt' && current.tagName === 'ruby') { + } else if (token.tagName === 'rt' && current.tagName === 'ruby') { if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'c') { + } else if (token.tagName === 'c') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'v') { + } else if (token.tagName === 'v') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'lang') { + } else if (token.tagName === 'lang') { languageStack.push(token.annotation); if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; @@ -3067,22 +2736,18 @@ var AblePlayerInstances = []; current.children.push(token); current = token; } - } - else if (token.type === 'endTag') { + } else if (token.type === 'endTag') { if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) { // NOTE from Terrill: This was resulting in an error because current.parent was undefined // Fixed (I think) by assigning current token to token.parent in 'startTag' loop current = current.parent; - } - else if (token.tagName === 'lang' && current.type === 'lang') { + } else if (token.tagName === 'lang' && current.type === 'lang') { current = current.parent; languageStack.pop(); - } - else if (token.tagName === 'ruby' && current.type === 'rt') { + } else if (token.tagName === 'ruby' && current.type === 'rt') { current = current.parent.parent; } - } - else if (token.type === 'timestampTag') { + } else if (token.type === 'timestampTag') { var tempState = { text: token.value, error: null, @@ -3117,11 +2782,9 @@ var AblePlayerInstances = []; // Double newlines indicate end of token. if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { c = '\u0004'; - } - else if (state.text.length > 0) { + } else if (state.text.length > 0) { c = state.text[0]; - } - else { + } else { // End of file. c = '\u0004'; } @@ -3129,213 +2792,168 @@ var AblePlayerInstances = []; if (c === '&') { buffer = '&'; tokenState = 'escape'; - } - else if (c === '<') { + } else if (c === '<') { if (result.length === 0) { tokenState = 'tag'; - } - else { + } else { token.type = 'string'; token.value = result.join(''); return token; } - } - else if (c === '\u0004') { + } else if (c === '\u0004') { return {type: 'string', value: result.join('')}; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'escape') { + } else if (tokenState === 'escape') { if (c === '&') { result.push(buffer); buffer = '&'; - } - else if (c.match(/[0-9a-z]/)) { + } else if (c.match(/[0-9a-z]/)) { buffer += c; - } - else if (c === ';') { + } else if (c === ';') { if (buffer === '&') { result.push('&'); - } - else if (buffer === '<') { + } else if (buffer === '<') { result.push('<'); - } - else if (buffer === '>') { + } else if (buffer === '>') { result.push('>'); - } - else if (buffer === '&lrm') { + } else if (buffer === '&lrm') { result.push('\u200e'); - } - else if (buffer === '&rlm') { + } else if (buffer === '&rlm') { result.push('\u200f'); - } - else if (buffer === ' ') { + } else if (buffer === ' ') { result.push('\u00a0'); - } - else { + } else { result.push(buffer); result.push(';'); } tokenState = 'data'; - } - else if (c === '<' \|\| c === '\u0004') { + } else if (c === '<' \|\| c === '\u0004') { result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { // Handle unescaped & chars as strings + } else if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { // Handle unescaped & chars as strings result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else { + } else { result.push(buffer); tokenState = 'data'; } - } - else if (tokenState === 'tag') { + } else if (tokenState === 'tag') { if (c === '\t' \|\| c === '\n' \|\| c === '\u000c' \|\| c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '/') { + } else if (c === '/') { tokenState = 'endTag'; - } - else if (c.match('[0-9]')) { + } else if (c.match('[0-9]')) { tokenState = 'timestampTag'; result.push(c); - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); break; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = ''; token.type = 'startTag'; return token; - } - else { + } else { result.push(c); tokenState = 'startTag'; } - } - else if (tokenState === 'startTag') { + } else if (tokenState === 'startTag') { if (c === '\t' \|\| c === '\u000c' \|\| c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'startTagClass') { + } else if (tokenState === 'startTagClass') { if (c === '\t' \|\| c === '\u000c' \|\| c === ' ') { token.classes.push(buffer); buffer = ''; tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { token.classes.push(buffer); buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { token.classes.push(buffer); buffer = ""; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else { + } else { buffer += 'c'; } - } - else if (tokenState === 'startTagAnnotation') { + } else if (tokenState === 'startTagAnnotation') { if (c === '>') { cut(state, 1); - buffer = $.trim(buffer).replace(/ +/, ' '); + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else if (c === '\u0004') { - buffer = $.trim(buffer).replace(/ +/, ' '); + } else if (c === '\u0004') { + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else { + } else { buffer += c; } - } - else if (tokenState === 'endTag') { + } else if (tokenState === 'endTag') { if (c === '>') { cut(state, 1); token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'timestampTag') { + } else if (tokenState === 'timestampTag') { if (c === '>') { cut(state, 1); token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else { + } else { throw 'Unknown tokenState ' + tokenState; } @@ -3352,15 +2970,13 @@ var AblePlayerInstances = []; } while (true) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { // End of comment. return; - } - else if (nextLine.indexOf('-->') !== -1) { + } else if (nextLine.indexOf('-->') !== -1) { state.error = 'Invalid syntax: --> in comment.'; return; - } - else { + } else { cutLine(state); } } @@ -3378,8 +2994,7 @@ var AblePlayerInstances = []; function eatSignature(state) { if (state.text.substring(0,6) === 'WEBVTT') { cut(state, 6); - } - else { + } else { state.error = 'Invalid signature.'; } } @@ -3387,8 +3002,7 @@ var AblePlayerInstances = []; function eatArrow(state) { if (state.text.length < 3 \|\| state.text.substring(0,3) !== '-->') { state.error = 'Missing -->'; - } - else { + } else { cut(state, 3); } } @@ -3396,8 +3010,7 @@ var AblePlayerInstances = []; function eatSingleSpaceOrTab(state) { if (state.text[0] === '\t' \|\| state.text[0] === ' ') { cut(state, 1); - } - else { + } else { state.error = 'Missing space.'; } } @@ -3423,8 +3036,7 @@ var AblePlayerInstances = []; var nextEOL = state.text.indexOf('\n'); if (nextEOL === -1) { state.error = 'Missing EOL.'; - } - else { + } else { cut(state, nextEOL + 1); } } @@ -3432,10 +3044,9 @@ var AblePlayerInstances = []; function eatEmptyLines(state) { while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); - } - else { + } else { break; } } @@ -3446,11 +3057,10 @@ var AblePlayerInstances = []; var linesEaten = 0; while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); linesEaten += 1; - } - else { + } else { break; } } @@ -3467,7 +3077,9 @@ var AblePlayerInstances = []; } var timestamp = cut(state, nextSpace); - var results = /((\d\d):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(timestamp); + // The spec requires exactly 2 characters for minutes and seconds, and 2+ for hours, + // but some VTT generation creates 1 digit hour times (e.g. "1:02:24.000 --> 1:04:48.000") and it seems harmless to allow that here + var results = /((\d+):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(timestamp); if (!results) { state.error = 'Unable to parse timestamp'; @@ -3494,8 +3106,7 @@ var AblePlayerInstances = []; time += parseInt(seconds, 10); time += parseInt(results[6], 10) / 1000; - } - else { + } else { time += parseInt(results[7], 10); time += parseInt(results[8], 10) / 1000; } @@ -3509,23 +3120,13 @@ var AblePlayerInstances = []; AblePlayer.prototype.injectPlayerCode = function() { // create and inject surrounding HTML structure - // If IOS: - // If video: - // IOS does not support any of the player's functionality - // - everything plays in its own player - // Therefore, AblePlayer is not loaded & all functionality is disabled - // (this all determined. If this is IOS && video, this function is never called) - // If audio: - // HTML cannot be injected as a parent of the <audio> element - // It is therefore injected after the <audio> element - // This is only a problem in IOS 6 and earlier, - // & is a known bug, fixed in IOS 7 - - var thisObj, captionsContainer, prefsGroups, i; - thisObj = this; + // If iOS & video: + // iOS does not support any of the player's functionality - everything plays in its own player + // Therefore, AblePlayer is not loaded & all functionality is disabled + // (this all determined. If this is iOS && video, this function is never called) - // create three wrappers and wrap them around the media element. - // From inner to outer: + var captionsContainer; + // Wrappers, from inner to outer: // $mediaContainer - contains the original media element // $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions) // $ableWrapper - contains additional widgets (e.g., transcript window, sign window) @@ -3533,10 +3134,6 @@ var AblePlayerInstances = []; this.$ableDiv = this.$mediaContainer.wrap('<div class="able"></div>').parent(); this.$ableWrapper = this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(); this.$ableWrapper.addClass('able-skin-' + this.skin); - - this.$ableWrapper.css({ - 'width': this.playerWidth + 'px' - }); if (this.mediaType === 'video') { // youtube adds its own big play button @@ -3549,26 +3146,37 @@ var AblePlayerInstances = []; // add container that captions or description will be appended to // Note: new Jquery object must be assigned _after_ wrap, hence the temp captionsContainer variable - captionsContainer = $('<div>'); - if (this.mediaType === 'video') { - captionsContainer.addClass('able-vidcap-container'); - } - else if (this.mediaType === 'audio') { - captionsContainer.addClass('able-audcap-container'); - // hide this by default. It will be shown if captions are available + captionsContainer = $('<div>'); + if (this.mediaType === 'video') { + captionsContainer.addClass('able-vidcap-container'); + } else if (this.mediaType === 'audio') { + captionsContainer.addClass('able-audcap-container'); + // hide this by default. It will be shown if captions are available captionsContainer.addClass('captions-off'); } - this.injectPlayerControlArea(); // this may need to be injected after captions??? + this.injectPlayerControlArea(); // this may need to be injected after captions??? this.$captionsContainer = this.$mediaContainer.wrap(captionsContainer).parent(); - this.injectAlert(); + this.injectAlert(this.$ableDiv); this.injectPlaylist(); - + this.injectAudioPoster(); // Do this last, as it should be prepended to the top of this.$ableDiv // after everything else has prepended this.injectOffscreenHeading(); }; + AblePlayer.prototype.injectAudioPoster = function() { + if ( this.mediaType === 'audio' && this.hasPoster ) { + audioPoster = DOMPurify.sanitize(this.audioPoster); + audioPosterAlt = DOMPurify.sanitize(this.audioPosterAlt); + let audioPosterImg = document.createElement( 'img' ); + audioPosterImg.setAttribute( 'src', audioPoster ); + audioPosterImg.setAttribute( 'alt', audioPosterAlt ); + this.$audioWrapper = this.$playerDiv.wrap( '<div class="able-audio-wrapper">' ).parent(); + this.$audioWrapper.prepend( audioPosterImg ); + } + } + AblePlayer.prototype.injectOffscreenHeading = function () { // Inject an offscreen heading to the media container. @@ -3578,8 +3186,7 @@ var AblePlayerInstances = []; var headingType; if (this.playerHeadingLevel == '0') { // do NOT inject a heading (at author's request) - } - else { + } else { if (typeof this.playerHeadingLevel === 'undefined') { this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); // returns in integer 1-6 } @@ -3587,51 +3194,28 @@ var AblePlayerInstances = []; this.$headingDiv = $('<' + headingType + '>'); this.$ableDiv.prepend(this.$headingDiv); this.$headingDiv.addClass('able-offscreen'); - this.$headingDiv.text(this.tt.playerHeading); + this.$headingDiv.text( this.translate( 'playerHeading', 'Media player' ) ); } }; AblePlayer.prototype.injectBigPlayButton = function () { - var thisObj, svgData, buttonIcon, svgPath; - - thisObj = this; + var thisObj = this; this.$bigPlayButton = $('<button>', { 'class': 'able-big-play-button', 'aria-hidden': false, - 'aria-label': this.tt.play, + 'aria-label': this.translate( 'play', 'Play' ), + 'type': 'button', 'tabindex': 0 }); - if (this.iconType == 'svg') { - svgData = this.getSvgData('play'); - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - this.$bigPlayButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - this.$bigPlayButton.html(this.$bigPlayButton.html()); - } - else { // use icon font - this.$bigPlayIcon = $('<span>', { - 'class': 'icon-play', - }); - this.$bigPlayButton.append(this.$bigPlayIcon); - } + this.getIcon( this.$bigPlayButton, 'play' ); - this.$bigPlayButton.click(function (event) { - event.preventDefault(); + this.$bigPlayButton.on( 'click', function () { thisObj.handlePlay(); }); - + this.$mediaContainer.append(this.$bigPlayButton); }; @@ -3640,10 +3224,10 @@ var AblePlayerInstances = []; this.$playerDiv = $('<div>', { 'class' : 'able-player', 'role' : 'region', - 'aria-label' : this.mediaType + ' player' + 'aria-label' : ( 'audio' === this.mediaType ) ? this.translate( 'audioPlayer', 'audio player' ) : this.translate( 'videoPlayer', 'video player' ) }); - this.$playerDiv.addClass('able-'+this.mediaType); - if (this.hasPlaylist && this.showNowPlaying) { + this.$playerDiv.addClass('able-' + this.mediaType); + if (this.hasPlaylist && this.showNowPlaying) { this.$nowPlayingDiv = $('<div>',{ 'class' : 'able-now-playing', 'aria-live' : 'assertive', @@ -3672,8 +3256,9 @@ var AblePlayerInstances = []; this.$speed = $('<span>',{ 'class' : 'able-speed', - 'aria-live' : 'assertive' - }).text(this.tt.speed + ': 1x'); + 'aria-live' : 'assertive', + 'aria-atomic' : 'true' + }).text(this.translate( 'speed', 'Speed' ) + ': 1x'); this.$status = $('<span>',{ 'class' : 'able-status', @@ -3684,16 +3269,15 @@ var AblePlayerInstances = []; this.$statusBarDiv.append(this.$timer, this.$speed, this.$status); if (this.showNowPlaying) { this.$playerDiv.append(this.$nowPlayingDiv, this.$controllerDiv, this.$statusBarDiv); - } - else { + } else { this.$playerDiv.append(this.$controllerDiv, this.$statusBarDiv); } - if (this.mediaType === 'video') { - // the player controls go after the media & captions + + if (this.mediaType === 'video') { + // the player controls go after the media & captions this.$ableDiv.append(this.$playerDiv); - } - else { - // the player controls go before the media & captions + } else { + // the player controls go before the media & captions this.$ableDiv.prepend(this.$playerDiv); } }; @@ -3705,9 +3289,9 @@ var AblePlayerInstances = []; 'class': 'able-descriptions' }); // Add ARIA so description will be announced by screen readers - // Later (in description.js > showDescription()), + // Later (in description.js > showDescription()), // if browser supports Web Speech API and this.descMethod === 'browser' - // these attributes will be removed + // these attributes will be removed this.$descDiv.attr({ 'aria-live': 'assertive', 'aria-atomic': 'true' @@ -3719,54 +3303,114 @@ var AblePlayerInstances = []; }; AblePlayer.prototype.getDefaultWidth = function(which) { - + let viewportMaxwidth = window.innerWidth; // return default width of resizable elements // these values are somewhat arbitrary, but seem to result in good usability // if users disagree, they can resize (and resposition) them if (which === 'transcript') { - return 450; - } - else if (which === 'sign') { - return 400; + return ( viewportMaxwidth <= 450 ) ? viewportMaxwidth : 450; + } else if (which === 'sign') { + return ( viewportMaxwidth <= 400 ) ? viewportMaxwidth : 400; } }; + /** + * Reposition draggable windows when switched into fullscreen. + * + * @param {string} which 'transcript' or 'sign'. + / + AblePlayer.prototype.rePositionDraggableWindow = function (which) { + + let preferences, $window; + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + console.log( $window ); + if ( which === 'transcript' && $window ) { + if (typeof preferences.transcript !== 'undefined') { + this.prevTranscriptPosition = preferences.transcript; + } + $window.css({ + 'top': 0, + 'left': 0 + }); + } else if ( 'sign' === which && $window ) { + if (typeof preferences.sign !== 'undefined') { + this.prevSignPosition = preferences.sign; + } + $window.css({ + 'top': 0, + 'right': 0, + 'left': 'auto' + }); + } + } + AblePlayer.prototype.positionDraggableWindow = function (which, width) { // which is either 'transcript' or 'sign' + var preferences, preferencePos, $window, windowPos, viewportWidth, windowWidth; - var cookie, cookiePos, $window, dragged, windowPos, currentWindowPos, firstTime, zIndex; - - cookie = this.getCookie(); + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + if ( ! $window ) { + return; + } if (which === 'transcript') { - $window = this.$transcriptArea; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.transcript; + if (typeof preferences.transcript !== 'undefined') { + preferencePos = preferences.transcript; } - } - else if (which === 'sign') { - $window = this.$signWindow; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.sign; + if ( this.prevTranscriptPosition ) { + preferencePos = this.prevTranscriptPosition; + this.prevTranscriptPosition = false; + } + } else if (which === 'sign') { + if (typeof preferences.sign !== 'undefined') { + preferencePos = preferences.sign; + } + if ( this.prevSignPosition ) { + preferencePos = this.prevSignPosition; + this.prevSignPosition = false; } } - if (typeof cookiePos !== 'undefined' && !($.isEmptyObject(cookiePos))) { - // position window using stored values from cookie + if (typeof preferencePos !== 'undefined' && !($.isEmptyObject(preferencePos))) { + // position window using stored values from preferences $window.css({ - 'position': cookiePos['position'], - 'width': cookiePos['width'], - 'z-index': cookiePos['zindex'] + 'position': preferencePos['position'], + 'width': preferencePos['width'], + 'z-index': preferencePos['zindex'] }); - if (cookiePos['position'] === 'absolute') { + if (preferencePos['position'] === 'absolute') { $window.css({ - 'top': cookiePos['top'], - 'left': cookiePos['left'] + 'top': preferencePos['top'], + 'left': preferencePos['left'] }); + // Check whether the window is above the top of the viewport. + topPosition = $window.offset().top; + leftPosition = $window.offset().left; + viewportWidth = window.innerWidth; + windowWidth = $window.width(); + if ( topPosition < 0 ) { + $window.css({ + 'top': preferencePos['top'] - topPosition + }); + } + // If draggable window is off screen to the left. + if ( leftPosition < 0 && ! this.restoringAfterFullscreen ) { + console.log( leftPosition ); + $window.css({ + 'left': preferencePos['left'] - leftPosition + }); + } + // If draggable window is off screen to the right. + if ( viewportWidth - leftPosition < 30 ) { + $window.css({ + 'left': viewportWidth - windowWidth + }); + } } - // since cookie is not page-specific, z-index needs may vary across different pages + // since preferences are not page-specific, z-index needs may vary across different pages this.updateZIndex(which); - } - else { + } else { // position window using default values windowPos = this.getOptimumPosition(which, width); if (typeof width === 'undefined') { @@ -3798,37 +3442,30 @@ var AblePlayerInstances = []; // else if there is room the left of the player, position element there // else position element beneath player - var gap, position, ableWidth, ableHeight, ableOffset, ableTop, ableLeft, - windowWidth, otherWindowWidth, zIndex; + var gap, position, ableWidth, ableOffset, ableLeft, windowWidth, otherWindowWidth; if (typeof targetWidth === 'undefined') { targetWidth = this.getDefaultWidth(targetWindow); } gap = 5; // number of pixels to preserve between Able Player objects - position = []; // position, top, left ableWidth = this.$ableDiv.width(); - ableHeight = this.$ableDiv.height(); ableOffset = this.$ableDiv.offset(); - ableTop = ableOffset.top; ableLeft = ableOffset.left; windowWidth = $(window).width(); otherWindowWidth = 0; // width of other visiable draggable windows will be added to this if (targetWindow === 'transcript') { - if (typeof this.$signWindow !== 'undefined') { - if (this.$signWindow.is(':visible')) { - otherWindowWidth = this.$signWindow.width() + gap; - } + // If placing the transcript window, check position of sign window first. + if (typeof this.$signWindow !== 'undefined' && (this.$signWindow.is(':visible'))) { + otherWindowWidth = this.$signWindow.width() + gap; } - } - else if (targetWindow === 'sign') { - if (typeof this.$transcriptArea !== 'undefined') { - if (this.$transcriptArea.is(':visible')) { - otherWindowWidth = this.$transcriptArea.width() + gap; - } + } else if (targetWindow === 'sign') { + // If placing the sign window, check position of transcript window first. + if (typeof this.$transcriptArea !== 'undefined' && (this.$transcriptArea.is(':visible'))) { + otherWindowWidth = this.$transcriptArea.width() + gap; } } if (targetWidth < (windowWidth - (ableLeft + ableWidth + gap + otherWindowWidth))) { @@ -3836,14 +3473,12 @@ var AblePlayerInstances = []; position[0] = 'absolute'; position[1] = 0; position[2] = ableWidth + otherWindowWidth + gap; - } - else if (targetWidth + gap < ableLeft) { + } else if (targetWidth + gap < ableLeft) { // there's room to the right of $ableDiv position[0] = 'absolute'; position[1] = 0; position[2] = ableLeft - targetWidth - gap; - } - else { + } else { // position element below $ableDiv position[0] = 'relative'; // no need to define top, left, or z-index @@ -3851,32 +3486,31 @@ var AblePlayerInstances = []; return position; }; - AblePlayer.prototype.injectAlert = function () { - + AblePlayer.prototype.injectAlert = function ($container) { // inject two alerts, one visible for all users and one for screen reader users only - - var top; - this.$alertBox = $('<div role="alert"></div>'); this.$alertBox.addClass('able-alert'); this.$alertBox.hide(); - this.$alertBox.appendTo(this.$ableDiv); - if (this.mediaType == 'audio') { - top = '-10'; - } - else { - // position just below top of video by default - // but this will change after video player is fully sized - // see control.js > resizePlayer() - top = '10'; - } - this.$alertBox.css({ - top: top + 'px' + + var $alertText = $( '<span></span>' ); + $alertText.appendTo(this.$alertBox); + + var $alertDismiss = $('<button type="button"></button>' ); + $alertDismiss.attr( 'aria-label', this.translate( 'dismissButton', 'Dismiss' ) ); + $alertDismiss.text( '×' ); + $alertDismiss.appendTo(this.$alertBox); + + $alertDismiss.on( 'click', function(e) { + $(this).parent('div').hide(); }); - this.$srAlertBox = $('<div role="alert"></div>'); - this.$srAlertBox.addClass('able-screenreader-alert'); - this.$srAlertBox.appendTo(this.$ableDiv); + this.$alertBox.appendTo($container); + + if ( ! this.$srAlertBox ) { + this.$srAlertBox = $('<div role="alert"></div>'); + this.$srAlertBox.addClass('able-screenreader-alert'); + this.$srAlertBox.appendTo($container); + } }; AblePlayer.prototype.injectPlaylist = function () { @@ -3896,9 +3530,8 @@ var AblePlayerInstances = []; // 'which' parameter is either 'captions', 'chapters', 'prefs', 'transcript-window' or 'sign-window' // 'tracks', if provided, is a list of tracks to be used as menu items - var thisObj, $menu, includeMenuItem, prefCats, i, $menuItem, prefCat, whichPref, - hasDefault, track, windowOptions, whichPref, whichMenu, - $thisItem, $prevItem, $nextItem; + var thisObj, $menu, includeMenuItem, i, $menuItem, prefCat, whichPref, hasDefault, track, + windowOptions, $thisItem, $prevItem, $nextItem, hasDescription, hasTranscript; thisObj = this; @@ -3916,22 +3549,26 @@ var AblePlayerInstances = []; if (which === 'prefs') { if (this.prefCats.length > 1) { for (i = 0; i < this.prefCats.length; i++) { + prefCat = this.prefCats[i]; + hasDescription = ( thisObj.hasDescTracks \|\| thisObj.hasOpenDesc \|\| thisObj.hasClosedDesc ) ? true : false; + hasTranscript = ( thisObj.transcriptType === null ) ? false : true; + + // If this player does not have descriptions or transcripts, do not output that option preferences. + if ( prefCat === 'descriptions' && ! hasDescription \|\| prefCat === 'transcript' && ! hasTranscript ) { + continue; + } $menuItem = $('<li></li>',{ 'role': 'menuitem', 'tabindex': '-1' }); - prefCat = this.prefCats[i]; if (prefCat === 'captions') { - $menuItem.text(this.tt.prefMenuCaptions); - } - else if (prefCat === 'descriptions') { - $menuItem.text(this.tt.prefMenuDescriptions); - } - else if (prefCat === 'keyboard') { - $menuItem.text(this.tt.prefMenuKeyboard); - } - else if (prefCat === 'transcript') { - $menuItem.text(this.tt.prefMenuTranscript); + $menuItem.text( this.translate( 'prefMenuCaptions', 'Captions' ) ); + } else if (prefCat === 'descriptions') { + $menuItem.text( this.translate( 'prefMenuDescriptions', 'Descriptions' ) ); + } else if (prefCat === 'keyboard') { + $menuItem.text( this.translate( 'prefMenuKeyboard', 'Keyboard' ) ); + } else if (prefCat === 'transcript') { + $menuItem.text( this.translate( 'prefMenuTranscript', 'Transcript' ) ); } $menuItem.on('click',function() { whichPref = $(this).text(); @@ -3939,14 +3576,11 @@ var AblePlayerInstances = []; thisObj.setFullscreen(false); if (whichPref === thisObj.tt.prefMenuCaptions) { thisObj.captionPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuDescriptions) { + } else if (whichPref === thisObj.tt.prefMenuDescriptions) { thisObj.descPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuKeyboard) { + } else if (whichPref === thisObj.tt.prefMenuKeyboard) { thisObj.keyboardPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuTranscript) { + } else if (whichPref === thisObj.tt.prefMenuTranscript) { thisObj.transcriptPrefsDialog.show(); } thisObj.closePopups(); @@ -3955,22 +3589,19 @@ var AblePlayerInstances = []; $menu.append($menuItem); } this.$prefsButton.attr('data-prefs-popup','menu'); - } - else if (this.prefCats.length == 1) { + } else if (this.prefCats.length == 1) { // only 1 category, so don't create a popup menu. // Instead, open dialog directly when user clicks Prefs button this.$prefsButton.attr('data-prefs-popup',this.prefCats[0]); } - } - else if (which === 'captions' \|\| which === 'chapters') { + } else if (which === 'captions' \|\| which === 'chapters') { hasDefault = false; for (i = 0; i < tracks.length; i++) { track = tracks[i]; - if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { - includeMenuItem = false; - } - else { - includeMenuItem = true; + if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { + includeMenuItem = false; + } else { + includeMenuItem = true; } if (includeMenuItem) { $menuItem = $('<li></li>',{ @@ -3981,16 +3612,14 @@ var AblePlayerInstances = []; if (track.def && this.prefCaptions == 1) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); - } + } // Get a label using track data if (which == 'captions') { $menuItem.text(track.label); $menuItem.on('click',this.getCaptionClickFunction(track)); - } - else if (which == 'chapters') { + } else if (which == 'chapters') { $menuItem.text(this.flattenCueForCaption(track) + ' - ' + this.formatSecondsAsColonTime(track.start)); $menuItem.on('click',this.getChapterClickFunction(track.start)); } @@ -4002,31 +3631,29 @@ var AblePlayerInstances = []; $menuItem = $('<li></li>',{ 'role': 'menuitemradio', 'tabindex': '-1', - }).text(this.tt.captionsOff); + }).text( this.translate( 'captionsOff', 'Captions off' ) ); if (this.prefCaptions === 0) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); } $menuItem.on('click',this.getCaptionOffFunction()); $menu.append($menuItem); } - } - else if (which === 'transcript-window' \|\| which === 'sign-window') { + } else if (which === 'transcript-window' \|\| which === 'sign-window') { windowOptions = []; windowOptions.push({ 'name': 'move', - 'label': this.tt.windowMove + 'label': this.translate( 'windowMove', 'Move' ) }); windowOptions.push({ 'name': 'resize', - 'label': this.tt.windowResize + 'label': this.translate( 'windowResize', 'Resize' ) }); windowOptions.push({ 'name': 'close', - 'label': this.tt.windowClose + 'label': this.translate( 'windowClose', 'Close' ) }); for (i = 0; i < windowOptions.length; i++) { $menuItem = $('<li></li>',{ @@ -4035,7 +3662,7 @@ var AblePlayerInstances = []; 'data-choice': windowOptions[i].name }); $menuItem.text(windowOptions[i].label); - $menuItem.on('click mousedown',function(e) { + $menuItem.on('click',function(e) { e.stopPropagation(); if (typeof e.button !== 'undefined' && e.button !== 0) { // this was a mouse click (if click is triggered by keyboard, e.button is undefined) @@ -4058,61 +3685,50 @@ var AblePlayerInstances = []; if ($menu.find('li[lang=' + this.captionLang + ']')) { // a track exists for the default language. Check that item in the menu $menu.find('li[lang=' + this.captionLang + ']').attr('aria-checked','true'); - } - else { + } else { // check the last item (captions off) $menu.find('li').last().attr('aria-checked','true'); } - } - else if (which === 'chapters') { + } else if (which === 'chapters') { if ($menu.find('li:contains("' + this.defaultChapter + '")')) { $menu.find('li:contains("' + this.defaultChapter + '")').attr('aria-checked','true').addClass('able-focus'); - } - else { + } else { $menu.find('li').first().attr('aria-checked','true').addClass('able-focus'); } } // add keyboard handlers for navigating within popups $menu.on('keydown',function (e) { - - whichMenu = $(this).attr('id').split('-')[1]; + $thisItem = $(this).find('li:focus'); if ($thisItem.is(':first-child')) { // this is the first item in the menu $prevItem = $(this).find('li').last(); // wrap to bottom $nextItem = $thisItem.next(); - } - else if ($thisItem.is(':last-child')) { + } else if ($thisItem.is(':last-child')) { // this is the last Item $prevItem = $thisItem.prev(); $nextItem = $(this).find('li').first(); // wrap to top - } - else { + } else { $prevItem = $thisItem.prev(); $nextItem = $thisItem.next(); } - if (e.which === 9) { // Tab + if (e.key === 'Tab') { if (e.shiftKey) { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else { + $prevItem.trigger('focus').addClass('able-focus'); + } else { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); + $nextItem.trigger('focus').addClass('able-focus'); } - } - else if (e.which === 40 \|\| e.which === 39) { // down or right arrow + } else if (e.key === 'ArrowDown' \|\| e.key === 'ArrowRight') { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - else if (e.which == 38 \|\| e.which === 37) { // up or left arrow + $nextItem.trigger('focus').addClass('able-focus'); + } else if (e.key == 'ArrowUp' \|\| e.key === 'ArrowLeft') { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else if (e.which === 32 \|\| e.which === 13) { // space or enter - $thisItem.click(); - } - else if (e.which === 27) { // Escape + $prevItem.trigger('focus').addClass('able-focus'); + } else if (e.key === ' ' \|\| e.key === 'Enter') { + $thisItem.trigger( 'click' ); + } else if (e.key === 'Escape') { $thisItem.removeClass('able-focus'); thisObj.closePopups(); e.stopPropagation; @@ -4129,7 +3745,7 @@ var AblePlayerInstances = []; if (this.chaptersPopup && this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); - this.$chaptersButton.attr('aria-expanded','false').focus(); + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); } if (this.captionsPopup && this.captionsPopup.is(':visible')) { this.captionsPopup.hide(); @@ -4151,15 +3767,15 @@ var AblePlayerInstances = []; },100); } if (this.$volumeSlider && this.$volumeSlider.is(':visible')) { - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeButton.attr('aria-expanded', 'false').focus(); + this.$volumeSlider.hide().attr('aria-hidden','true'); + this.$volumeButton.attr('aria-expanded', 'false').trigger('focus'); } if (this.$transcriptPopup && this.$transcriptPopup.is(':visible')) { - this.hidingPopup = true; + this.hidingPopup = true; this.$transcriptPopup.hide(); // restore menu items to their original state this.$transcriptPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$transcriptPopupButton.attr('aria-expanded','false').focus(); + this.$transcriptPopupButton.attr('aria-expanded','false').trigger('focus'); // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; @@ -4169,7 +3785,7 @@ var AblePlayerInstances = []; this.$signPopup.hide(); // restore menu items to their original state this.$signPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$signPopupButton.attr('aria-expanded','false').focus(); + this.$signPopupButton.attr('aria-expanded','false').trigger('focus'); } }; @@ -4179,10 +3795,7 @@ var AblePlayerInstances = []; // parameter 'which' is passed if refreshing content of an existing popup ('captions' or 'chapters') // If which is undefined, automatically setup 'captions', 'chapters', and 'prefs' popups // However, only setup 'transcript-window' and 'sign-window' popups if passed as value of which - var popups, thisObj, hasDefault, i, j, - tracks, track, $trackButton, $trackLabel, - radioName, radioId, $menu, $menuItem, - prefCats, prefCat, prefLabel; + var popups, thisObj, i, tracks; popups = []; if (typeof which === 'undefined') { @@ -4209,33 +3822,26 @@ var AblePlayerInstances = []; thisObj = this; for (var i=0; i<popups.length; i++) { var popup = popups[i]; - hasDefault = false; if (popup == 'prefs') { this.prefsPopup = this.createPopup('prefs'); - } - else if (popup == 'captions') { + } else if (popup == 'captions') { if (typeof this.captionsPopup === 'undefined' \|\| !this.captionsPopup) { this.captionsPopup = this.createPopup('captions',this.captions); } - } - else if (popup == 'chapters') { + } else if (popup == 'chapters') { if (this.selectedChapters) { tracks = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { tracks = this.chapters[0].cues; - } - else { + } else { tracks = []; } if (typeof this.chaptersPopup === 'undefined' \|\| !this.chaptersPopup) { this.chaptersPopup = this.createPopup('chapters',tracks); } - } - else if (popup == 'transcript-window') { + } else if (popup == 'transcript-window') { return this.createPopup('transcript-window'); - } - else if (popup == 'sign-window') { + } else if (popup == 'sign-window') { return this.createPopup('sign-window'); } } @@ -4244,101 +3850,99 @@ var AblePlayerInstances = []; AblePlayer.prototype.provideFallback = function() { - // provide fallback in case of a critical error building the player - // to test, set data-test-fallback to either of the following values: - // 1 = emulate failure to build Able Player - // 2 = emulate browser that doesn't support HTML5 media + // provide fallback in case of a critical error building the player + // to test, set data-test-fallback to either of the following values: + // 1 = emulate failure to build Able Player + // 2 = emulate browser that doesn't support HTML5 media var i, $fallback; - if (this.usingFallback) { - // fallback has already been implemented. + if (this.usingFallback) { + // fallback has already been implemented. // stopgap to prevent this function from executing twice on the same media element - return; - } - else { - this.usingFallback = true; + return; + } else { + this.usingFallback = true; } - if (!this.testFallback) { - // this is not a test. - // an actual error has resulted in this function being called. - // use scenario 1 - this.testFallback = 1; + if (!this.testFallback) { + // this is not a test. + // an actual error has resulted in this function being called. + // use scenario 1 + this.testFallback = 1; } - if (typeof this.$media === 'undefined') { - // this function has been called prior to initialize.js > reinitialize() + if (typeof this.$media === 'undefined') { + // this function has been called prior to initialize.js > reinitialize() // before doing anything, need to create the jQuery media object - this.$media = $(this.media); - } - - // get/assign an id for the media element - if (this.$media.attr('id')) { - this.mediaId = this.$media.attr('id'); + this.$media = $(this.media); } - else { + + // get/assign an id for the media element + if (this.$media.attr('id')) { + this.mediaId = this.$media.attr('id'); + } else { this.mediaId = 'media' + Math.floor(Math.random() 1000000000).toString(); - } - - // check whether element has nested fallback content - this.hasFallback = false; - if (this.$media.children().length) { - i = 0; - while (i < this.$media.children().length && !this.hasFallback) { - if (!(this.$media.children()[i].tagName === 'SOURCE' \|\| - this.$media.children()[i].tagName === 'TRACK')) { - // this element is something other than <source> or <track> - this.hasFallback = true; + } + + // check whether element has nested fallback content + this.hasFallback = false; + if (this.$media.children().length) { + i = 0; + while (i < this.$media.children().length && !this.hasFallback) { + if (!(this.$media.children()[i].tagName === 'SOURCE' \|\| + this.$media.children()[i].tagName === 'TRACK')) { + // this element is something other than <source> or <track> + this.hasFallback = true; } - i++; + i++; } } - if (!this.hasFallback) { - // the HTML code does not include any nested fallback content - // inject our own - // NOTE: this message is not translated, since fallback may be needed - // due to an error loading the translation file - // This will only be needed on very rare occasions, so English is ok. - $fallback = $('<p>').text('Media player unavailable.'); - this.$media.append($fallback); + if (!this.hasFallback) { + // the HTML code does not include any nested fallback content + // inject our own + // NOTE: this message is not translated, since fallback may be needed + // due to an error loading the translation file + // This will only be needed on very rare occasions, so English is ok. + $fallback = $('<p>').text('Media player unavailable.'); + this.$media.append($fallback); } - // get height and width attributes, if present + // get height and width attributes, if present // and add them to a style attribute - if (this.$media.attr('width')) { - this.$media.css('width',this.$media.attr('width') + 'px'); + if (this.$media.attr('width')) { + this.$media.css('width',this.$media.attr('width') + 'px'); } - if (this.$media.attr('height')) { - this.$media.css('height',this.$media.attr('height') + 'px'); + if (this.$media.attr('height')) { + this.$media.css('height',this.$media.attr('height') + 'px'); } - // Remove data-able-player attribute - this.$media.removeAttr('data-able-player'); + // Remove data-able-player attribute + this.$media.removeAttr('data-able-player'); // Add controls attribute (so browser will add its own controls) - this.$media.prop('controls',true); + this.$media.prop('controls',true); - if (this.testFallback == 2) { + if (this.testFallback == 2) { - // emulate browser failure to support HTML5 media by changing the media tag name - // browsers should display the supported content that's nested inside + // emulate browser failure to support HTML5 media by changing the media tag name + // browsers should display the supported content that's nested inside $(this.$media).replaceWith($('<foobar id="foobar-' + this.mediaId + '">')); - this.$newFallbackElement = $('#foobar-' + this.mediaId); - - // append all children from the original media - if (this.$media.children().length) { - i = this.$media.children().length - 1; - while (i >= 0) { - this.$newFallbackElement.prepend($(this.$media.children()[i])); - i--; + this.$newFallbackElement = $('#foobar-' + this.mediaId); + + // append all children from the original media + if (this.$media.children().length) { + i = this.$media.children().length - 1; + while (i >= 0) { + this.$newFallbackElement.prepend($(this.$media.children()[i])); + i--; } } - if (!this.hasFallback) { + if (!this.hasFallback) { // inject our own fallback content, defined above this.$newFallbackElement.append($fallback); } } - return; + return; }; AblePlayer.prototype.calculateControlLayout = function () { @@ -4352,7 +3956,7 @@ var AblePlayerInstances = []; // 3 = Bottom right (legacy skin only) // Each key contains an array of control names to put in that section. - var controlLayout, volumeSupported, playbackSupported, totalButtonWidth, numA11yButtons; + var controlLayout, playbackSupported, numA11yButtons; controlLayout = []; controlLayout[0] = []; @@ -4375,8 +3979,7 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[0].push('previous'); controlLayout[0].push('next'); - } - else if (this.skin == '2020') { + } else { controlLayout[0].push('previous'); controlLayout[0].push('next'); } @@ -4388,8 +3991,7 @@ var AblePlayerInstances = []; controlLayout[2].push('slower'); controlLayout[2].push('faster'); } - } - else { + } else { playbackSupported = false; } @@ -4398,8 +4000,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('captions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('captions'); } } @@ -4407,28 +4008,25 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('sign'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('sign'); } } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { if (this.hasOpenDesc \|\| this.hasClosedDesc) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('descriptions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('descriptions'); } } } - if (this.transcriptType === 'popup' && !(this.hideTranscriptButton)) { + if (this.transcriptType !== null && !(this.hideTranscriptButton)) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('transcript'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('transcript'); } } @@ -4436,8 +4034,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('chapters'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('chapters'); } } @@ -4454,32 +4051,26 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[3].push('preferences'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('preferences'); } - if (this.mediaType === 'video' && this.allowFullscreen) { + if (this.mediaType === 'video' && this.allowFullscreen && this.nativeFullscreenSupported() ) { if (this.skin === 'legacy') { controlLayout[3].push('fullscreen'); - } - else { + } else { controlLayout[1].push('fullscreen'); } } if (this.browserSupportsVolume()) { - volumeSupported = true; // defined in case we decide to move volume button elsewhere this.volumeButton = 'volume-' + this.getVolumeName(this.volume); if (this.skin === 'legacy') { controlLayout[1].push('volume'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('volume'); } - } - else { - volumeSupported = false; + } else { this.volume = false; } return controlLayout; @@ -4495,12 +4086,10 @@ var AblePlayerInstances = []; // some controls are aligned on the left, and others on the right var thisObj, baseSliderWidth, controlLayout, numSections, - i, j, k, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, $pipeImg, - svgData, svgPath, control, - $buttonLabel, $buttonImg, buttonImgSrc, buttonTitle, $newButton, iconClass, buttonIcon, - buttonUse, buttonText, position, buttonHeight, buttonWidth, buttonSide, controllerWidth, - tooltipId, tooltipY, tooltipX, tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, - captionLabel, popupMenuId; + i, j, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, control, + buttonTitle, $newButton, buttonText, position, buttonHeight, + buttonWidth, buttonSide, controllerWidth, tooltipId, tooltipY, tooltipX, + tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, captionLabel, popupMenuId; thisObj = this; @@ -4518,33 +4107,36 @@ var AblePlayerInstances = []; }).hide(); this.$controllerDiv.append(this.$tooltipDiv); - if (this.skin == '2020') { + if (this.skin == '2020') { // add a full-width seek bar $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); this.$controllerDiv.append($sliderDiv); - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); } + // add a full-width seek bar + let $controlRow = $('<div class="able-control-row"></div>'); + this.$controllerDiv.append($controlRow); + for (i = 0; i < numSections; i++) { controls = controlLayout[i]; if ((i % 2) === 0) { // even keys on the left $controllerSpan = $('<div>',{ 'class': 'able-left-controls' }); - } - else { // odd keys on the right + } else { // odd keys on the right $controllerSpan = $('<div>',{ 'class': 'able-right-controls' }); } - this.$controllerDiv.append($controllerSpan); + $controlRow.append($controllerSpan); for (j=0; j<controls.length; j++) { control = controls[j]; if (control === 'seek') { $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); $controllerSpan.append($sliderDiv); if (typeof this.duration === 'undefined' \|\| this.duration === 0) { // set arbitrary starting duration, and change it when duration is known @@ -4552,53 +4144,17 @@ var AblePlayerInstances = []; // also set elapsed to 0 this.elapsed = 0; } - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - else if (control === 'pipe') { + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + } else if (control === 'pipe') { $pipe = $('<span>', { 'tabindex': '-1', - 'aria-hidden': 'true' + 'aria-hidden': 'true', + 'class': 'able-pipe', }); - if (this.iconType === 'font') { - $pipe.addClass('icon-pipe'); - } - else { - $pipeImg = $('<img>', { - src: this.rootPath + 'button-icons/' + this.iconColor + '/pipe.png', - alt: '', - role: 'presentation' - }); - $pipe.append($pipeImg); - } + $pipe.append('\|'); $controllerSpan.append($pipe); - } - else { + } else { // this control is a button - if (control === 'volume') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + this.volumeButton + '.png'; - } - else if (control === 'fullscreen') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/fullscreen-expand.png'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/turtle.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/slower.png'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/rabbit.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/faster.png'; - } - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + control + '.png'; - } buttonTitle = this.getButtonTitle(control); // icomoon documentation recommends the following markup for screen readers: @@ -4616,7 +4172,6 @@ var AblePlayerInstances = []; $newButton = $('<div>',{ 'role': 'button', 'tabindex': '0', - 'aria-label': buttonTitle, 'class': 'able-button-handler-' + control }); @@ -4630,16 +4185,14 @@ var AblePlayerInstances = []; 'aria-controls': popupMenuId, 'aria-haspopup': 'menu', 'aria-expanded': 'false' - }); - } - else if (this.prefCats.length === 1) { + }); + } else if (this.prefCats.length === 1) { // Prefs button will trigger a dialog $newButton.attr({ 'aria-haspopup': 'dialog' }); } - } - else if (control === 'volume') { + } else if (control === 'volume') { popupMenuId = this.mediaId + '-volume-slider'; // volume slider popup is not a menu or a dialog // therefore, using aria-expanded rather than aria-haspopup to communicate properties/state @@ -4655,130 +4208,23 @@ var AblePlayerInstances = []; } } } - if (this.iconType === 'font') { - if (control === 'volume') { - iconClass = 'icon-' + this.volumeButton; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-turtle'; - } - else { - iconClass = 'icon-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-rabbit'; - } - else { - iconClass = 'icon-faster'; - } - } - else { - iconClass = 'icon-' + control; - } - buttonIcon = $('<span>',{ - 'class': iconClass, - 'aria-hidden': 'true' - }); - $newButton.append(buttonIcon); + var getControl = control; + if ( control === 'faster' && this.speedIcons === 'animals' ) { + getControl = 'rabbit'; } - else if (this.iconType === 'svg') { - - /* - // Unused option for adding SVG: - // Use <use> element to link to button-icons/able-icons.svg - // Advantage: SVG file can be cached - // Disadvantage: Not supported by Safari 6, IE 6-11, or Edge 12 - // Instead, adding <svg> element within each <button> - if (control === 'volume') { - iconClass = 'svg-' + this.volumeButton; - } - else if (control === 'fullscreen') { - iconClass = 'svg-fullscreen-expand'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-turtle'; - } - else { - iconClass = 'svg-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-rabbit'; - } - else { - iconClass = 'svg-faster'; - } - } - else { - iconClass = 'svg-' + control; - } - buttonIcon = $('<svg>',{ - 'class': iconClass - }); - buttonUse = $('<use>',{ - 'xlink:href': this.rootPath + 'button-icons/able-icons.svg#' + iconClass - }); - buttonIcon.append(buttonUse); - / - var svgData; - if (control === 'volume') { - svgData = this.getSvgData(this.volumeButton); - } - else if (control === 'fullscreen') { - svgData = this.getSvgData('fullscreen-expand'); - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('turtle'); - } - else { - svgData = this.getSvgData('slower'); - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('rabbit'); - } - else { - svgData = this.getSvgData('faster'); - } - } - else { - svgData = this.getSvgData(control); - } - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - $newButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - $newButton.html($newButton.html()); + if ( control === 'slower' && this.speedIcons === 'animals' ) { + getControl = 'turtle'; } - else { - // use images - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); + if ( control === 'volume' ) { + this.getIcon( $newButton, this.volumeButton ); + } else { + if ( 'fullscreen' === getControl ) { + getControl = ( this.fullscreen ) ? 'fullscreen-collapse' : 'fullscreen-expand'; + } + this.getIcon( $newButton, getControl ); } - // add the visibly-hidden label for screen readers that don't support aria-label on the button - var $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(buttonTitle); - $newButton.append($buttonLabel); + + this.setText($newButton,buttonTitle); // add an event listener that displays a tooltip on mouseenter or focus $newButton.on('mouseenter focus',function(e) { @@ -4786,73 +4232,63 @@ var AblePlayerInstances = []; // since the same tooltip div is used, it's location just changes. clearTimeout(tooltipTimerId); - var buttonText = $(this).attr('aria-label'); + buttonText = $(this).attr('aria-label'); // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); + position = $(this).position(); + buttonHeight = $(this).height(); + buttonWidth = $(this).width(); // position() is expressed using top and left (of button); // add right (of button) too, for convenience - var controllerWidth = thisObj.$controllerDiv.width(); + controllerWidth = thisObj.$controllerDiv.width(); position.right = controllerWidth - position.left - buttonWidth; - // The following formula positions tooltip above the button - // var tooltipY = position.top - buttonHeight - 15; - - // The following formula positions tooltip below the button + // The following formula positions tooltip below the button // which allows the tooltip to be hoverable as per WCAG 2.x SC 1.4.13 - // without obstructing the seekbar - var tooltipY = position.top + buttonHeight + 5; + // without obstructing the seekbar + tooltipY = position.top + buttonHeight + 5; if ($(this).parent().hasClass('able-right-controls')) { // this control is on the right side - var buttonSide = 'right'; - } - else { + buttonSide = 'right'; + } else { // this control is on the left side - var buttonSide = 'left'; + buttonSide = 'left'; } // populate tooltip, then calculate its width before showing it - var tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); + tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); // center the tooltip horizontally over the button if (buttonSide == 'left') { - var tooltipX = position.left - tooltipWidth/2; + tooltipX = position.left - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: tooltipX + 'px', right: '', top: tooltipY + 'px' }; - } - else { - var tooltipX = position.right - tooltipWidth/2; + } else { + tooltipX = position.right - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: '', right: tooltipX + 'px', top: tooltipY + 'px' }; } - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); + tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { - // hide tooltip (original line of code) - // AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - - // The above line was replaced with the following block - // in order to meet WCAG 2.x SC 1.4.13 // (keep the tooltip visible if user hovers over it) - // This causes unwanted side effects if tooltips are positioned above the buttons - // as the persistent tooltip obstructs the seekbar, - // blocking users from being able to move a pointer from a button to the seekbar - // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons + // This causes unwanted side effects if tooltips are positioned above the buttons + // as the persistent tooltip obstructs the seekbar, + // blocking users from being able to move a pointer from a button to the seekbar + // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons // clear existing timeout before reassigning variable clearTimeout(tooltipTimerId); @@ -4869,29 +4305,27 @@ var AblePlayerInstances = []; thisObj.$tooltipDiv.on('mouseleave blur', function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }); - - }); + + }); }); if (control === 'captions') { if (!this.prefCaptions \|\| this.prefCaptions !== 1) { // captions are available, but user has them turned off if (this.captions.length > 1) { - captionLabel = this.tt.captions; - } - else { - captionLabel = this.tt.showCaptions; + captionLabel = this.translate( 'captions', 'Captions' ); + } else { + captionLabel = this.translate( 'showCaptions', 'Show captions' ); } $newButton.addClass('buttonOff').attr('title',captionLabel); $newButton.attr('aria-pressed', 'false'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { if (!this.prefDesc \|\| this.prefDesc !== 1) { // user prefer non-audio described version // Therefore, load media without description // Description can be toggled on later with this button - $newButton.addClass('buttonOff').attr('title',this.tt.turnOnDescriptions); + $newButton.addClass('buttonOff').attr( 'title', this.translate( 'turnOnDescriptions', 'Turn on descriptions' ) ); } } @@ -4900,59 +4334,48 @@ var AblePlayerInstances = []; // create variables of buttons that are referenced throughout the AblePlayer object if (control === 'play') { this.$playpauseButton = $newButton; - } - else if (control == 'previous') { + } else if (control == 'previous') { this.$prevButton = $newButton; // if player is being rebuilt because user clicked the Prev button // return focus to that (newly built) button if (this.buttonWithFocus == 'previous') { - this.$prevButton.focus(); + this.$prevButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control == 'next') { + } else if (control == 'next') { this.$nextButton = $newButton; // if player is being rebuilt because user clicked the Next button // return focus to that (newly built) button if (this.buttonWithFocus == 'next') { - this.$nextButton.focus(); + this.$nextButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control === 'captions') { + } else if (control === 'captions') { this.$ccButton = $newButton; - } - else if (control === 'sign') { + } else if (control === 'sign') { this.$signButton = $newButton; // gray out sign button if sign language window is not active if (!(this.$signWindow.is(':visible'))) { this.$signButton.addClass('buttonOff'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { this.$descButton = $newButton; // button will be enabled or disabled in description.js > initDescription() - } - else if (control === 'mute') { + } else if (control === 'mute') { this.$muteButton = $newButton; - } - else if (control === 'transcript') { + } else if (control === 'transcript') { this.$transcriptButton = $newButton; // gray out transcript button if transcript is not active if (!(this.$transcriptDiv.is(':visible'))) { - this.$transcriptButton.addClass('buttonOff').attr('title',this.tt.showTranscript); + this.$transcriptButton.addClass('buttonOff').attr( 'title', this.translate( 'showTranscript', 'Show transcript' ) ); } - } - else if (control === 'fullscreen') { + } else if (control === 'fullscreen') { this.$fullscreenButton = $newButton; - } - else if (control === 'chapters') { + } else if (control === 'chapters') { this.$chaptersButton = $newButton; - } - else if (control === 'preferences') { + } else if (control === 'preferences') { this.$prefsButton = $newButton; - } - else if (control === 'volume') { + } else if (control === 'volume') { this.$volumeButton = $newButton; } } @@ -4982,191 +4405,7 @@ var AblePlayerInstances = []; } // Update state-based display of controls. - this.refreshControls('init'); - }; - - AblePlayer.prototype.useSvg = function () { - - // Modified from IcoMoon.io svgxuse - // @copyright Copyright (c) 2016 IcoMoon.io - // @license Licensed under MIT license - // See https://github.com/Keyamoon/svgxuse - // @version 1.1.16 - - var cache = Object.create(null); // holds xhr objects to prevent multiple requests - var checkUseElems, - tid; // timeout id - var debouncedCheck = function () { - clearTimeout(tid); - tid = setTimeout(checkUseElems, 100); - }; - var unobserveChanges = function () { - return; - }; - var observeChanges = function () { - var observer; - window.addEventListener('resize', debouncedCheck, false); - window.addEventListener('orientationchange', debouncedCheck, false); - if (window.MutationObserver) { - observer = new MutationObserver(debouncedCheck); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - attributes: true - }); - unobserveChanges = function () { - try { - observer.disconnect(); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - } catch (ignore) {} - }; - } - else { - document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); - unobserveChanges = function () { - document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - }; - } - }; - var xlinkNS = 'http://www.w3.org/1999/xlink'; - checkUseElems = function () { - var base, - bcr, - fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. - hash, - i, - Request, - inProgressCount = 0, - isHidden, - url, - uses, - xhr; - if (window.XMLHttpRequest) { - Request = new XMLHttpRequest(); - if (Request.withCredentials !== undefined) { - Request = XMLHttpRequest; - } - else { - Request = XDomainRequest \|\| undefined; - } - } - if (Request === undefined) { - return; - } - function observeIfDone() { - // If done with making changes, start watching for chagnes in DOM again - inProgressCount -= 1; - if (inProgressCount === 0) { // if all xhrs were resolved - observeChanges(); // watch for changes to DOM - } - } - function attrUpdateFunc(spec) { - return function () { - if (cache[spec.base] !== true) { - spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); - } - }; - } - function onloadFunc(xhr) { - return function () { - var body = document.body; - var x = document.createElement('x'); - var svg; - xhr.onload = null; - x.innerHTML = xhr.responseText; - svg = x.getElementsByTagName('svg')[0]; - if (svg) { - svg.setAttribute('aria-hidden', 'true'); - svg.style.position = 'absolute'; - svg.style.width = 0; - svg.style.height = 0; - svg.style.overflow = 'hidden'; - body.insertBefore(svg, body.firstChild); - } - observeIfDone(); - }; - } - function onErrorTimeout(xhr) { - return function () { - xhr.onerror = null; - xhr.ontimeout = null; - observeIfDone(); - }; - } - unobserveChanges(); // stop watching for changes to DOM - // find all use elements - uses = document.getElementsByTagName('use'); - for (i = 0; i < uses.length; i += 1) { - try { - bcr = uses[i].getBoundingClientRect(); - } catch (ignore) { - // failed to get bounding rectangle of the use element - bcr = false; - } - url = uses[i].getAttributeNS(xlinkNS, 'href').split('#'); - base = url[0]; - hash = url[1]; - isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; - if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { - // the use element is empty - // if there is a reference to an external SVG, try to fetch it - // use the optional fallback URL if there is no reference to an external SVG - if (fallback && !base.length && hash && !document.getElementById(hash)) { - base = fallback; - } - if (base.length) { - // schedule updating xlink:href - xhr = cache[base]; - if (xhr !== true) { - // true signifies that prepending the SVG was not required - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - if (xhr === undefined) { - xhr = new Request(); - cache[base] = xhr; - xhr.onload = onloadFunc(xhr); - xhr.onerror = onErrorTimeout(xhr); - xhr.ontimeout = onErrorTimeout(xhr); - xhr.open('GET', base); - xhr.send(); - inProgressCount += 1; - } - } - } - else { - if (!isHidden) { - if (cache[base] === undefined) { - // remember this URL if the use element was not empty and no request was sent - cache[base] = true; - } - else if (cache[base].onload) { - // if it turns out that prepending the SVG is not necessary, - // abort the in-progress xhr. - cache[base].abort(); - cache[base].onload = undefined; - cache[base] = true; - } - } - } - } - uses = ''; - inProgressCount += 1; - observeIfDone(); - }; -/ - // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. - window.addEventListener('load', function winLoad() { - window.removeEventListener('load', winLoad, false); // to prevent memory leaks - tid = setTimeout(checkUseElems, 0); - }, false); -/ + this.refreshControls(); }; AblePlayer.prototype.cuePlaylistItem = function(sourceIndex) { @@ -5175,19 +4414,7 @@ var AblePlayerInstances = []; // NOTE: Swapping source for audio description is handled elsewhere; // see description.js > swapDescription() - / - // Decided against preventing a reload of the current item in the playlist. - // If it's clickable, users should be able to click on it and expect something to happen. - // Leaving here though in case it's determined to be desirable. - if (sourceIndex === this.playlistItemIndex) { - // user has requested the item that's currently playing - // just ignore the request - return; - } - this.playlistItemIndex = sourceIndex; - / - - var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, sources, s, i, $newSource, nowPlayingSpan; + var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, nowPlayingSpan; var thisObj = this; @@ -5195,9 +4422,8 @@ var AblePlayerInstances = []; if (this.initializing) { // this is the first track - user hasn't pressed play yet // do nothing. - } - else { - if (this.playerCreated) { + } else { + if (this.playerCreated) { // remove the old this.deletePlayer('playlist'); } @@ -5206,19 +4432,18 @@ var AblePlayerInstances = []; // set swappingSrc; needs to be true within recreatePlayer(), called below this.swappingSrc = true; - // if a new playlist item is being requested, and playback has already started, - // it should be ok to play automatically, regardless of how it was requested - if (this.startedPlaying) { - this.okToPlay = true; - } - else { - this.okToPlay = false; + // if a new playlist item is being requested, and playback has already started, + // it should be ok to play automatically, regardless of how it was requested + if (this.startedPlaying) { + this.okToPlay = true; + } else { + this.okToPlay = false; } - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; // Determine appropriate player to play this media $newItem = this.$playlist.eq(sourceIndex); @@ -5228,16 +4453,14 @@ var AblePlayerInstances = []; this.youTubeDescId = this.getYouTubeId($newItem.attr('data-youtube-desc-id')); } newPlayer = 'youtube'; - } - else if (this.hasAttr($newItem,'data-vimeo-id')) { + } else if (this.hasAttr($newItem,'data-vimeo-id')) { this.vimeoId = this.getVimeoId($newItem.attr('data-vimeo-id')); if (this.hasAttr($newItem,'data-vimeo-desc-id')) { this.vimeoDescId = this.getVimeoId($newItem.attr('data-vimeo-desc-id')); } newPlayer = 'vimeo'; - } - else { - newPlayer = 'html5'; + } else { + newPlayer = 'html5'; } if (newPlayer === 'youtube') { if (prevPlayer === 'html5') { @@ -5247,9 +4470,8 @@ var AblePlayerInstances = []; } this.$media.hide(); } - } - else { - // the new player is not youtube + } else { + // the new player is not youtube this.youTubeId = false; if (prevPlayer === 'youtube') { // unhide the media element @@ -5276,21 +4498,42 @@ var AblePlayerInstances = []; var $sourceSpans = $newItem.children('span.able-source'); if ($sourceSpans.length) { $sourceSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src')) { - // this is the only required attribute - var $newSource = $('<source>',{ - 'src': $(this).attr('data-src') - }); - if (thisObj.hasAttr($(this),'data-type')) { - $newSource.attr('type',$(this).attr('data-type')); - } - if (thisObj.hasAttr($(this),'data-desc-src')) { - $newSource.attr('data-desc-src',$(this).attr('data-desc-src')); - } - if (thisObj.hasAttr($(this),'data-sign-src')) { - $newSource.attr('data-sign-src',$(this).attr('data-sign-src')); + const $this = $(this); + + // Check if the required data-src attribute exists + if (thisObj.hasAttr($this, "data-src")) { + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <source> element with the sanitized src + const $newSource = $("<source>", { src: sanitizedSrc }); + + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-type", + "data-desc-src", + "data-sign-src", + ]; + + // Process optional attributes + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + const attrValue = $this.attr(attr); // Get the attribute value + const sanitizedValue = DOMPurify.sanitize(attrValue); // Sanitize the value + + // If the attribute ends with "-src", validate the protocol + if (attr.endsWith("-src") && validate.isProtocolSafe(sanitizedValue)) { + $newSource.attr(attr, sanitizedValue); // Add the sanitized and validated attribute + } else if (!attr.endsWith("-src")) { + $newSource.attr(attr, sanitizedValue); // Add sanitized value for non-src attributes + } + } + }); + + // Append the new <source> element to the media object + thisObj.$media.append($newSource); } - thisObj.$media.append($newSource); } }); } @@ -5300,27 +4543,37 @@ var AblePlayerInstances = []; if ($trackSpans.length) { // for each element in $trackSpans, create a new <track> element $trackSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src') && - thisObj.hasAttr($(this),'data-kind') && - thisObj.hasAttr($(this),'data-srclang')) { + const $this = $(this); + if (thisObj.hasAttr($this, "data-src") && thisObj.hasAttr($this, "data-kind") && thisObj.hasAttr($this, "data-srclang")) { // all required attributes are present - var $newTrack = $('<track>',{ - 'src': $(this).attr('data-src'), - 'kind': $(this).attr('data-kind'), - 'srclang': $(this).attr('data-srclang') - }); - if (thisObj.hasAttr($(this),'data-label')) { - $newTrack.attr('label',$(this).attr('data-label')); - } - if (thisObj.hasAttr($(this),'data-desc')) { - $newTrack.attr('data-desc',$(this).attr('data-desc')); + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <track> element with the sanitized src + const $newTrack = $("<track>", { + src: sanitizedSrc, + kind: $this.attr("data-kind"), + srclang: $this.attr("data-srclang"), + }); + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-label", + "data-desc", + "data-default", + ]; + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + $newTrack.attr(attr, DOMPurify.sanitize($this.attr(attr))); + } + }); + // Append the new <track> element to the media object + thisObj.$media.append($newTrack); } - thisObj.$media.append($newTrack); } }); } - itemTitle = $newItem.text(); + itemTitle = DOMPurify.sanitize( $newItem.text() ); if (this.hasAttr($newItem,'lang')) { itemLang = $newItem.attr('lang'); } @@ -5328,18 +4581,18 @@ var AblePlayerInstances = []; this.$sources = this.$media.find('source'); // recreate player, informed by new attributes and track elements - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; + return; } - this.recreatePlayer().then(function() { + this.recreatePlayer().then(function() { // update playlist to indicate which item is playing thisObj.$playlist.removeClass('able-current') .children('button').removeAttr('aria-current'); thisObj.$playlist.eq(sourceIndex).addClass('able-current') - .children('button').attr('aria-current','true'); - + .children('button').attr('aria-current','true'); + // update Now Playing div if (thisObj.showNowPlaying === true) { if (typeof thisObj.$nowPlayingDiv !== 'undefined') { @@ -5355,56 +4608,48 @@ var AblePlayerInstances = []; // if thisObj.swappingSrc is true, media will autoplay when ready if (thisObj.initializing) { // this is the first track - user hasn't pressed play yet thisObj.swappingSrc = false; - } - else { + } else { if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } - } - else if (thisObj.player === 'youtube') { - thisObj.okToPlay = true; + } else if (thisObj.player === 'youtube') { + thisObj.okToPlay = true; } } thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed - }); + thisObj.playerCreated = true; // remains true until browser is refreshed + }); }; AblePlayer.prototype.deletePlayer = function(context) { - // remove player components that need to be rebuilt - // after swapping media sources that have different durations - // or explicitly declared data-desc attributes + // remove player components that need to be rebuilt + // after swapping media sources that have different durations + // or explicitly declared data-desc attributes - // Context is one of the following: - // playlist - called from cuePlaylistItem() + // Context is one of the following: + // playlist - called from cuePlaylistItem() // swap-desc-html - called from swapDescription with this.player == 'html' - // swap-desc-youtube - called from swapDescription with this.player == 'youtube' - // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' + // swap-desc-youtube - called from swapDescription with this.player == 'youtube' + // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' - if (this.player === 'youtube' && this.youTubePlayer) { - this.youTubePlayer.destroy(); + if (this.player === 'youtube' && this.youTubePlayer) { + this.youTubePlayer.destroy(); } - if (this.player === 'vimeo' && this.vimeoPlayer) { - this.vimeoPlayer.destroy(); + if (this.player === 'vimeo' && this.vimeoPlayer) { + this.vimeoPlayer.destroy(); } - -/ TODO - Investigate: when is this needed? - // remove previous video's attributes and child elements from media element - this.$media.removeAttr('poster width height'); - this.$media.empty(); -/ // Empty elements that will be rebuilt this.$controllerDiv.empty(); // this.$statusBarDiv.empty(); // this.$timer.empty(); this.$elapsedTimeContainer.empty().text('0:00'); // span.able-elapsedTime this.$durationContainer.empty(); // span.able-duration - + // Remove popup windows and modal dialogs; these too will be rebuilt if (this.$signWindow) { this.$signWindow.remove(); @@ -5413,125 +4658,81 @@ var AblePlayerInstances = []; this.$transcriptArea.remove(); } $('.able-modal-dialog').remove(); - - // Remove caption and description wrappers + + // Remove caption and description wrappers if (this.$captionsWrapper) { this.$captionsWrapper.remove(); } - if (this.$descDiv) { - this.$descDiv.remove(); + if (this.$descDiv) { + this.$descDiv.remove(); } - + // reset key variables this.hasCaptions = false; this.hasChapters = false; - this.hasDescTracks = false; + this.hasDescTracks = false; this.hasOpenDesc = false; - this.hasClosedDesc = false; + this.hasClosedDesc = false; this.captionsPopup = null; this.chaptersPopup = null; this.transcriptType = null; - this.playerDeleted = true; // will reset to false in recreatePlayer() + this.playerDeleted = true; // will reset to false in recreatePlayer() }; AblePlayer.prototype.getButtonTitle = function(control) { if (control === 'playpause') { - return this.tt.play; - } - else if (control === 'play') { - return this.tt.play; - } - else if (control === 'pause') { - return this.tt.pause; - } - else if (control === 'restart') { - return this.tt.restart; - } - else if (control === 'previous') { - return this.tt.prevTrack; - } - else if (control === 'next') { - return this.tt.nextTrack; - } - else if (control === 'rewind') { - return this.tt.rewind; - } - else if (control === 'forward') { - return this.tt.forward; - } - else if (control === 'captions') { + return this.translate( 'play', 'Play' ); + } else if (control === 'play') { + return this.translate( 'play', 'Play' ); + } else if (control === 'pause') { + return this.translate( 'pause', 'Pause' ); + } else if (control === 'restart') { + return this.translate( 'restart', 'Restart' ); + } else if (control === 'previous') { + return this.translate( 'prevTrack', 'Previous track' ); + } else if (control === 'next') { + return this.translate( 'nextTrack', 'Next track' ); + } else if (control === 'rewind') { + return this.translate( 'rewind', 'Rewind' ); + } else if (control === 'forward') { + return this.translate( 'forward', 'Forward' ); + } else if (control === 'captions') { if (this.captions.length > 1) { - return this.tt.captions; - } - else { - if (this.captionsOn) { - return this.tt.hideCaptions; - } - else { - return this.tt.showCaptions; - } - } - } - else if (control === 'descriptions') { - if (this.descOn) { - return this.tt.turnOffDescriptions; - } - else { - return this.tt.turnOnDescriptions; - } - } - else if (control === 'transcript') { - if (this.$transcriptDiv.is(':visible')) { - return this.tt.hideTranscript; - } - else { - return this.tt.showTranscript; - } - } - else if (control === 'chapters') { - return this.tt.chapters; - } - else if (control === 'sign') { - return this.tt.sign; - } - else if (control === 'volume') { - return this.tt.volume; - } - else if (control === 'faster') { - return this.tt.faster; - } - else if (control === 'slower') { - return this.tt.slower; - } - else if (control === 'preferences') { - return this.tt.preferences; - } - else if (control === 'help') { - // return this.tt.help; - } - else if (control === 'fullscreen') { - if (!this.fullscreen) { - return this.tt.enterFullscreen; - } - else { - return this.tt.exitFullscreen; - } - } - else { + return this.translate( 'captions', 'Captions' ); + } else { + return (this.captionsOn) ? this.translate( 'hideCaptions', 'Hide captions' ) : this.translate( 'showCaptions', 'Show captions' ); + } + } else if (control === 'descriptions') { + return (this.descOn) ? this.translate( 'turnOffDescriptions', 'Turn off descriptions' ) : this.translate( 'turnOnDescriptions', 'Turn on descriptions' ); + } else if (control === 'transcript') { + return (this.$transcriptDiv.is(':visible')) ? this.translate( 'hideTranscript', 'Hide transcript' ) : this.translate( 'showTranscript', 'Show transcript' ); + } else if (control === 'chapters') { + return this.translate( 'chapters', 'Chapters' ); + } else if (control === 'sign') { + return this.translate( 'sign', 'Sign language' ); + } else if (control === 'volume') { + return this.translate( 'volume', 'Volume' ); + } else if (control === 'faster') { + return this.translate( 'faster', 'Faster' ); + } else if (control === 'slower') { + return this.translate( 'slower', 'Slower' ); + } else if (control === 'preferences') { + return this.translate( 'preferences', 'Preferences' ); + } else if (control === 'fullscreen') { + return ( !this.fullscreen ) ? this.translate( 'enterFullScreen', 'Enter full screen' ) : this.translate( 'exitFullScreen', 'Exit full screen' ); + } else { // there should be no other controls, but just in case: // return the name of the control with first letter in upper case // ultimately will need to get a translated label from this.tt if (this.debug) { console.log('Found an untranslated label: ' + control); } - return control.charAt(0).toUpperCase() + control.slice(1); + return this.capitalizeFirstLetter( control ); } }; - - })(jQuery); /* @@ -5551,11 +4752,16 @@ var preProcessing = { * @returns {string} - The VTT content with processed tags. / transformCSSClasses: function (vttContent) { + // This function should only be passed one cue at a time. + // Throw an error if the string checked is more than 1000 characters. + if ( vttContent.length > 1000 ) { + throw new Error( "Input too long" ); + } return vttContent.replace( /<(v\|c\|b\|i\|u\|lang\|ruby)\.([\w\.]+)([^>])>/g, function (_, tag, cssClasses, otherAttrs) { - var classAttr = cssClasses.split(".").join(" "); - return "<" + tag + ' class="' + classAttr + '"' + otherAttrs + ">"; + var classAttr = cssClasses.replace(/\./g, " "); + return `<${tag} class="${classAttr}"${otherAttrs}>`; } ); }, @@ -5576,10 +4782,14 @@ var preProcessing = { }, /** - * Transforms <v> tags by adding a title attribute with the concatenated text and retaining other attributes. + * Transforms <v> tags by extracting any non-attribute text as a `title` attribute, + * retains existing attributes (except class), and preserves the class attribute if present. + * Example: <v John class="foo" data-x="y"> becomes <v title="John" data-x="y" class="foo"> + * + * @function * @memberof preProcessing - * @param {string} content - The content with processed <lang> tags. - * @returns {string} - The content with <v> tags transformed. + * @param {string} content - The string content containing <v> tags to process. + * @returns {string} The content with <v> tags transformed to include a title attribute and preserved attributes. / transformVTags: function (content) { return content.replace(/<v\s+([^>]?)>/g, function (_, tagAttributes) { @@ -5638,24 +4848,33 @@ var postProcessing = { return vttContent.replace( /<c class="([\w\s]+)">/g, function (_, classNames) { - var classes = classNames.split(" ").join("."); + var classes = classNames.replace(/ /g, "."); return "<c." + classes + ">"; } ); }, /** - * Post-processes <v> tags by converting class attributes to dot-separated class names. + * * Post-processes <v> tags by converting class attributes, no matter where found in the attribute order, to dot-separated class names. + * For example, <v class="foo bar" title="John"> becomes <v.foo.bar title="John">. + * Removes the class attribute and appends other attributes after the class names. + * + * @function * @memberof postProcessing * @param {string} vttContent - The VTT content to be processed. * @returns {string} - The VTT content with processed <v> tags. / postprocessVTag: function (vttContent) { return vttContent.replace( - /<v class="([\w\s]+)"([^>])>/g, - function (_, classNames, otherAttrs) { - var classes = classNames.split(" ").join("."); - return "<v." + classes + otherAttrs + ">"; + /<v([^>])class="([\w\s]+)"([^>])>/g, + function (_, beforeClass, classNames, afterClass) { + var classes = classNames.trim().split(/\s+/).join("."); + // Rebuild the tag: <v.{classes}{other attributes}> + // Remove class="..." from attributes + var attrs = (beforeClass + afterClass) + .replace(/\sclass="[\w\s]+"/, "") + .trim(); + return "<v." + classes + (attrs ? " " + attrs : "") + ">"; } ); }, @@ -5677,7 +4896,7 @@ var postProcessing = { }; /* - * Preprocesses, sanitizes and post-processes VTT content. + * Preprocesses, sanitizes and post-processes VTT content as well as other utility functions. * @namespace validate / var validate = { @@ -5708,8 +4927,9 @@ var validate = { var processedLangTags = postProcessing.postprocessLangTag(processedVTags); var arrowReplaced = processedLangTags.replace(/-->/g, "-->"); + var timestampTagReplaced = arrowReplaced.replace(/<([\d:.]+)>/g, '<$1>'); - var finalContent = arrowReplaced.replace( + var finalContent = timestampTagReplaced.replace( /<\/v>/g, function (match, offset) { return originalVttContent.indexOf(match, offset) !== -1 ? match : ""; @@ -5744,6 +4964,17 @@ var validate = { return validate.postProcessVttContent(sanitizedVttContent, vttContent); }, + // Utility validation functions + isProtocolSafe: function (url) { + //creates a new URL object for analysis to check if the protocol is http or https + //returns true if there is a match false otherwise + try { + const parsedUrl = new URL(url, window.location.origin); // Resolve relative URLs + return ["http:", "https:"].includes(parsedUrl.protocol); // Allow only HTTP and HTTPS + } catch (e) { + return false; // Invalid URL + } + }, }; // Export the object for use in other files @@ -5756,22 +4987,13 @@ if (typeof module !== "undefined" && module.exports) { // Loads files referenced in track elements, and performs appropriate setup. // For example, captions and text descriptions. // This will be called whenever the player is recreated. - // Added in v2.2.23: Also handles YouTube caption tracks AblePlayer.prototype.setupTracks = function () { - var thisObj, - deferred, - promise, - loadingPromises, - loadingPromise, - i, - tracks, - track, - kind; + var thisObj, deferred, promise, loadingPromises, loadingPromise, i, tracks, track, kind; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); loadingPromises = []; @@ -5793,20 +5015,17 @@ if (typeof module !== "undefined" && module.exports) { } for (i = 0; i < tracks.length; i++) { track = tracks[i]; - kind = track.kind; + kind = ( track.kind ) ? track.kind : 'subtitles'; if (!track.src) { if (thisObj.usingYouTubeCaptions \|\| thisObj.usingVimeoCaptions) { // skip all the hullabaloo and go straight to setupCaptions thisObj.setupCaptions(track); - } else { - // Nothing to load! - // Skip this track; move on to next i } continue; } - var trackSrc = track.src; - loadingPromise = this.loadTextObject(track.src); // resolves with src, trackText + var trackSrc = track.src; + loadingPromise = this.loadTextObject(trackSrc); loadingPromises.push( loadingPromise.catch(function (src) { console.warn("Failed to load captions track from " + src); @@ -5814,35 +5033,31 @@ if (typeof module !== "undefined" && module.exports) { ); loadingPromise.then( (function (track, kind) { - var trackSrc = track.src; + trackSrc = track.src; var trackLang = track.language; var trackLabel = track.label; var trackDesc = track.desc; - return function (trackSrc, trackText) { - // these are the two vars returned from loadTextObject - - var trackContents = trackText; - var cues = thisObj.parseWebVTT(trackSrc, trackContents).cues; + return function (data) { + var cues = thisObj.parseWebVTT(data).cues; if (thisObj.hasVts) { - // setupVtsTracks() is in vts.js thisObj.setupVtsTracks( kind, trackLang, trackDesc, trackLabel, trackSrc, - trackContents + data.text ); } - if (kind === "captions" \|\| kind === "subtitles") { + if (kind === 'captions' \|\| kind === 'subtitles') { thisObj.setupCaptions(track, cues); - } else if (kind === "descriptions") { + } else if (kind === 'descriptions') { thisObj.setupDescriptions(track, cues); - } else if (kind === "chapters") { + } else if (kind === 'chapters') { thisObj.setupChapters(track, cues); - } else if (kind === "metadata") { - thisObj.setupMetadata(track, cues); + } else if (kind === 'metadata') { + thisObj.setupMetadata(cues); } }; })(track, kind) @@ -5868,30 +5083,16 @@ if (typeof module !== "undefined" && module.exports) { // cues - array with startTime, endTime, and payload // desc - Boolean, true if track includes a data-desc attribute - var thisObj, - deferred, - promise, - captionTracks, - altCaptionTracks, - trackLang, - trackLabel, - isDefault, - forDesc, - hasDefault, - hasTrackInDefLang, - trackFound, - i, - j, - capLabel, - inserted; + var thisObj, deferred, promise, trackLang, trackLabel, isDefault, forDesc, + hasDefault, hasTrackInDefLang, trackFound, i; thisObj = this; hasDefault = false; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.$tracks = this.$media.find("track"); + this.$tracks = this.$media.find('track'); this.tracks = []; // only includes tracks that do NOT have data-desc this.altTracks = []; // only includes tracks that DO have data-desc @@ -5908,31 +5109,30 @@ if (typeof module !== "undefined" && module.exports) { this.usingYouTubeCaptions = false; // create object from HTML5 tracks this.$tracks.each(function (index, element) { - if ($(this).attr("kind") === "captions") { + if ($(this).attr('kind') === 'captions') { thisObj.hasCaptionsTrack = true; - } else if ($(this).attr("kind") === "descriptions") { + } else if ($(this).attr('kind') === 'descriptions') { thisObj.hasClosedDesc = true; } // srcLang should always be included with <track>, but HTML5 spec doesn't require it // if not provided, assume track is the same language as the default player language - if ($(this).attr("srclang")) { - trackLang = $(this).attr("srclang"); + if ($(this).attr('srclang')) { + trackLang = $(this).attr('srclang'); } else { trackLang = thisObj.lang; } - if ($(this).attr("label")) { - trackLabel = $(this).attr("label"); + if ($(this).attr('label')) { + trackLabel = $(this).attr('label'); } else { trackLabel = thisObj.getLanguageName(trackLang); } - if (typeof $(this).attr("default") !== "undefined" && !hasDefault) { + if (typeof $(this).attr('default') !== 'undefined' && !hasDefault) { isDefault = true; hasDefault = true; } else if (trackLang === thisObj.lang) { // this track is in the default lang of the player - // save this for later // if there is no other default track specified // this will be the default hasTrackInDefLang = true; @@ -5953,8 +5153,8 @@ if (typeof module !== "undefined" && module.exports) { } if (forDesc) { thisObj.altTracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -5962,8 +5162,8 @@ if (typeof module !== "undefined" && module.exports) { }); } else { thisObj.tracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -5979,16 +5179,16 @@ if (typeof module !== "undefined" && module.exports) { trackFound = false; i = 0; while (i < thisObj.tracks.length && !trackFound) { - if (thisObj.tracks[i]["language"] === thisObj.lang) { - thisObj.tracks[i]["def"] = true; + if (thisObj.tracks[i]['language'] === thisObj.lang) { + thisObj.tracks[i]['def'] = true; trackFound = true; } i++; } } else { // use the first track - thisObj.tracks[0]["def"] = true; - thisObj.captionLang = thisObj.tracks[0]["language"]; + thisObj.tracks[0]['def'] = true; + thisObj.captionLang = thisObj.tracks[0]['language']; } } // Remove 'default' attribute from all <track> elements @@ -6002,8 +5202,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.$tracks.length \|\| !this.hasCaptionsTrack) { // this media has no track elements // if this is a youtube or vimeo player, check there for captions/subtitles - if (this.player === "youtube") { - this.getYouTubeCaptionTracks(this.youTubeId).then(function () { + if (this.player === 'youtube') { + this.getYouTubeCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingYouTubeCaptions = true; if (thisObj.$captionsWrapper) { @@ -6012,7 +5212,7 @@ if (typeof module !== "undefined" && module.exports) { } deferred.resolve(); }); - } else if (this.player === "vimeo") { + } else if (this.player === 'vimeo') { this.getVimeoCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingVimeoCaptions = true; @@ -6040,7 +5240,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setupCaptions = function (track, cues) { // Setup player for display of captions (one track at a time) - var thisObj, captions, inserted, i, capLabel; + var inserted, i, capLabel; // Insert track into captions array // in its proper alphabetical sequence by label @@ -6106,8 +5306,8 @@ if (typeof module !== "undefined" && module.exports) { this.captionsOn = false; } } - if (this.mediaType === "audio" && this.captionsOn) { - this.$captionsContainer.removeClass("captions-off"); + if (this.mediaType === 'audio' && this.captionsOn) { + this.$captionsContainer.removeClass('captions-off'); } if ( @@ -6117,17 +5317,17 @@ if (typeof module !== "undefined" && module.exports) { ) { // captionsWrapper either doesn't exist, or exists in an orphaned state // Either way, it needs to be rebuilt... - this.$captionsDiv = $("<div>", { + this.$captionsDiv = $('<div>', { class: "able-captions", }); - this.$captionsWrapper = $("<div>", { - class: "able-captions-wrapper", - "aria-hidden": "true", + this.$captionsWrapper = $('<div>', { + class: 'able-captions-wrapper', + 'aria-hidden': 'true', }).hide(); - if (this.prefCaptionsPosition === "below") { - this.$captionsWrapper.addClass("able-captions-below"); + if (this.prefCaptionsPosition === 'below') { + this.$captionsWrapper.addClass('able-captions-below'); } else { - this.$captionsWrapper.addClass("able-captions-overlay"); + this.$captionsWrapper.addClass('able-captions-overlay'); } this.$captionsWrapper.append(this.$captionsDiv); this.$captionsContainer.append(this.$captionsWrapper); @@ -6158,19 +5358,19 @@ if (typeof module !== "undefined" && module.exports) { }); }; - AblePlayer.prototype.setupMetadata = function (track, cues, trackDesc) { - if (this.metaType === "text") { + AblePlayer.prototype.setupMetadata = function (cues) { + if (this.metaType === 'text') { // Metadata is only supported if data-meta-div is provided // The player does not display metadata internally if (this.metaDiv) { - if ($("#" + this.metaDiv)) { + if ($('#' + this.metaDiv)) { // container exists - this.$metaDiv = $("#" + this.metaDiv); + this.$metaDiv = $('#' + this.metaDiv); this.hasMeta = true; this.meta = cues; } } - } else if (this.metaType === "selector") { + } else if (this.metaType === 'selector') { this.hasMeta = true; this.visibleSelectors = []; this.meta = cues; @@ -6187,76 +5387,76 @@ if (typeof module !== "undefined" && module.exports) { / var deferred, promise, thisObj, $tempDiv; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; // create a temp div for holding data - $tempDiv = $("<div>", { - style: "display:none", + $tempDiv = $('<div>', { + style: 'display:none', }); // Fetch the content manually so it can be sanitized - $.ajax({ - url: src, - dataType: "text", - success: function (data) { - // Sanitize the fetched content - var sanitizedTrackText = validate.sanitizeVttContent(data); - - // Load the sanitized content into the $tempDiv - $tempDiv.html(sanitizedTrackText); - - // Resolve the promise with the sanitized content - deferred.resolve(src, sanitizedTrackText); - - $tempDiv.remove(); - }, - error: function (req, status, error) { - if (thisObj.debug) { - console.log("error reading file " + src + ": " + status); - } - deferred.reject(src); - $tempDiv.remove(); - }, - }); + fetch(src) + .then( response => { + + return response.text(); + }) + .then( vtt => { + // Split the input on double line breaks to handle each cue individually. + var preParsed = vtt.split(/\r?\n\s\r?\n/); + var lines = '', line; + + preParsed.forEach((l) => { + // Sanitize each line. + line = validate.sanitizeVttContent(l); + lines += line + "\n\n"; + }); + // Load the sanitized content into the $tempDiv + $tempDiv.html(lines); + // Resolve the promise with the sanitized content + let data = { 'src': src, 'text': lines }; + deferred.resolve(data); + $tempDiv.remove(); + }) + .catch( error => { + if (thisObj.debug) { + console.log( "error reading file " + src + ": " + error ); + } + deferred.reject(src); + $tempDiv.remove(); + }); return promise; }; })(jQuery); - (function ($) { + AblePlayer.prototype.initYouTubePlayer = function () { - var thisObj, deferred, promise, youTubeId, googleApiPromise, json; + var thisObj, deferred, promise, youTubeId; thisObj = this; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.youTubePlayerReady = false; + this.youTubePlayerReady = false; // if a described version is available && user prefers desription // init player using the described version - if (this.youTubeDescId && this.prefDesc) { - youTubeId = this.youTubeDescId; - } - else { - youTubeId = this.youTubeId; - } + youTubeId = (this.youTubeDescId && this.prefDesc) ? this.youTubeDescId : this.youTubeId; + this.activeYouTubeId = youTubeId; if (AblePlayer.youTubeIframeAPIReady) { // Script already loaded and ready. thisObj.finalizeYoutubeInit().then(function() { deferred.resolve(); }); - } - else { + } else { // Has another player already started loading the script? If so, abort... if (!AblePlayer.loadingYouTubeIframeAPI) { - $.getScript('https://www.youtube.com/iframe_api').fail(function () { - deferred.fail(); + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + console.log( 'YouTube API loaded' ); }); } @@ -6273,71 +5473,54 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.finalizeYoutubeInit = function () { // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - var deferred, promise, thisObj, containerId, ccLoadPolicy, videoDimensions, autoplay; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - thisObj = this; - containerId = this.mediaId + '_youtube'; this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // NOTE: Tried the following in place of the above in January 2016 - // because in some cases two videos were being added to the DOM - // However, once v2.2.23 was fairly stable, unable to reproduce that problem - // so maybe it's not an issue. This is preserved here temporarily, just in case it's needed... - // thisObj.$mediaContainer.html($('<div>').attr('id', containerId)); // cc_load_policy: // 0 - show captions depending on user's preference on YouTube // 1 - show captions by default, even if the user has turned them off - // IMPORTANT: This must* be set to 1 or some browsers - // fail to load any texttracks (observed in Chrome, not in Firefox) + // IMPORTANT: This must be set to 1 or some browsers + // fail to load any text tracks (observed in Chrome, not in Firefox) ccLoadPolicy = 1; - - if (this.okToPlay) { - autoplay = 1; - } - else { - autoplay = 0; - } + autoplay = (this.okToPlay) ? 1 : 0; // Documentation https://developers.google.com/youtube/player_parameters - if (typeof this.captionLang == 'undefined') { + if (typeof this.captionLang == 'undefined') { // init using the default player lang - this.captionLang = this.lang; + this.captionLang = this.lang; } this.youTubePlayer = new YT.Player(containerId, { videoId: this.activeYouTubeId, host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', playerVars: { autoplay: autoplay, - enablejsapi: 1, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: ccLoadPolicy, + controls: 0, // no controls, using our own disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, playsinline: this.playsInline, - start: this.startTime, - controls: 0, // no controls, using our own - cc_load_policy: ccLoadPolicy, - cc_lang_pref: this.captionLang, // set the caption language - hl: this.lang, // set the UI language to match Able Player - modestbranding: 1, // no YouTube logo in controller rel: 0, // when video ends, show only related videos from same channel (1 shows any) - iv_load_policy: 3 // do not show video annotations + start: this.startTime }, events: { onReady: function () { - thisObj.youTubePlayerReady = true; - if (!thisObj.playerWidth \|\| !thisObj.playerHeight) { + thisObj.youTubePlayerReady = true; + if (!thisObj.playerWidth \|\| !thisObj.playerHeight) { thisObj.getYouTubeDimensions(); } - if (thisObj.playerWidth && thisObj.playerHeight) { + if (thisObj.playerWidth && thisObj.playerHeight) { thisObj.youTubePlayer.setSize(thisObj.playerWidth,thisObj.playerHeight); - thisObj.$ableWrapper.css({ - 'width': thisObj.playerWidth + 'px' - }); } if (thisObj.swappingSrc) { // swap is now complete @@ -6352,30 +5535,34 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.userClickedPlaylist) { thisObj.userClickedPlaylist = false; // reset } - if (thisObj.recreatingPlayer) { + if (thisObj.recreatingPlayer) { thisObj.recreatingPlayer = false; // reset } deferred.resolve(); }, onError: function (x) { - deferred.fail(); + deferred.reject(); }, - onStateChange: function (x) { + onStateChange: function (x) { thisObj.getPlayerState().then(function(playerState) { // values of playerState: 'playing','paused','buffering','ended' if (playerState === 'playing') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.play(true); + } thisObj.playing = true; thisObj.startedPlaying = true; thisObj.paused = false; - } - else if (playerState == 'ended') { + } else if (playerState == 'ended') { thisObj.onMediaComplete(); - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } if (thisObj.stoppingYouTube && playerState === 'paused') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.pause(true); + } if (typeof thisObj.$posterImg !== 'undefined') { thisObj.$posterImg.show(); } @@ -6386,13 +5573,17 @@ if (typeof module !== "undefined" && module.exports) { } }); // If caption tracks are hosted locally, but are also available on YouTube, - // we need to turn them off on YouTube or there will be redundant captions - // This is the most reliable event on which to unload the caption module - if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { - if (thisObj.youTubePlayer.getOptions('captions')) { + // we need to turn them off on YouTube or there will be redundant captions + // This is the most reliable event on which to unload the caption module + if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { + if (thisObj.youTubePlayer.getOptions('captions')) { thisObj.youTubePlayer.unloadModule('captions'); } - } + } + }, + onApiChange: function() { + // getDuration() can be fetched during API change event. + thisObj.duration = thisObj.youTubePlayer.getDuration(); }, onPlaybackQualityChange: function () { // do something @@ -6403,85 +5594,73 @@ if (typeof module !== "undefined" && module.exports) { // remove the media element, since YouTube replaces that with its own element in an iframe // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() this.$media.remove(); - } + } return promise; }; AblePlayer.prototype.getYouTubeDimensions = function (youTubeContainerId) { - // The YouTube iframe API does not have a getSize() of equivalent method - // so, need to get dimensions from YouTube's iframe - - var $iframe, width, height; + // The YouTube iframe API does not have a getSize() of equivalent method + // so, need to get dimensions from YouTube's iframe + var $iframe, width, height; - $iframe = this.$ableWrapper.find('iframe'); + $iframe = this.$ableWrapper.find('iframe'); if (typeof $iframe !== 'undefined') { - if ($iframe.prop('width')) { - width = $iframe.prop('width'); - if ($iframe.prop('height')) { + if ($iframe.prop('width')) { + width = $iframe.prop('width'); + if ($iframe.prop('height')) { height = $iframe.prop('height'); - this.resizePlayer(width,height); + this.resizePlayer(width,height); } } } }; - AblePlayer.prototype.getYouTubeCaptionTracks = function (youTubeId) { - - // get data via YouTube IFrame Player API, and push data to this.tracks & this.captions - // NOTE: Caption tracks are not available through the IFrame Player API - // until AFTER the video has started playing. - // Therefore, this function plays the video briefly in order to load the captions module - // then stops the video and collects the data needed to build the cc menu - // This is stupid, but seemingly unavoidable. - // Caption tracks could be obtained through the YouTube Data API - // but this required authors to have a Google API key, - // which would complicate Able Player installation + /** + * Get data from the YouTube iFrame API. Pushes data into `this.tracks` and `this.captions`. + * Initiates play to trigger loading the captions module, then stops and collects data. + * + * @returns {Promise} promise + / + AblePlayer.prototype.getYouTubeCaptionTracks = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - - var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack; + var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack, apiTriggered = false; thisObj = this; - - if (!this.youTubePlayer.getOption('captions','tracklist')) { - - // no tracks were found, probably because the captions module hasn't loaded - // play video briefly (required in order to load the captions module) - // and after the apiChange event is triggered, try again to retreive tracks - this.youTubePlayer.addEventListener('onApiChange',function(x) { - - // getDuration() also requires video to play briefly - // so, let's set that while we're here - thisObj.duration = thisObj.youTubePlayer.getDuration(); - - if (thisObj.loadingYouTubeCaptions) { - // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once - ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); - if (!thisObj.okToPlay) { - // Don't stopVideo() - that cancels loading - // Just pause - // No need to seekTo(0) - so little time has passed it isn't noticeable to the user - thisObj.youTubePlayer.pauseVideo(); - } - if (ytTracks && ytTracks.length) { + if (!this.youTubePlayer.getOption('captions','tracklist') ) { + // no tracks were found, probably because the captions module hasn't loaded + // play video briefly (required to load the captions module) + // and after the apiChange event is triggered, try again to retrieve tracks + this.youTubePlayer.addEventListener('onApiChange',function() { + apiTriggered = true; + // getDuration() also requires video to play briefly + // so, let's set that while we're here + thisObj.duration = thisObj.youTubePlayer.getDuration(); + + if (thisObj.loadingYouTubeCaptions) { + // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once + ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); + if ( ! thisObj.okToPlay ) { + // Don't stopVideo() - that cancels loading, just pause. + // No need to seekTo(0) - the time passed isn't noticeable to the user + thisObj.youTubePlayer.pauseVideo(); + } + if (ytTracks && ytTracks.length) { // Step through ytTracks and add them to global tracks array - // Note: Unlike YouTube Data API, the IFrame Player API only returns - // tracks that are published, and does NOT include ASR captions - // So, no additional filtering is required + // Note: Unlike YouTube Data API, the IFrame Player API only returns + // tracks that are published, and does NOT include ASR captions + // So, no additional filtering is required for (i=0; i < ytTracks.length; i++) { - trackLang = ytTracks[i].languageCode; + trackLang = ytTracks[i].languageCode; trackLabel = ytTracks[i].languageName; // displayName and languageName seem to always have the same value - isDefaultTrack = false; - if (typeof thisObj.captionLang !== 'undefined') { - if (trackLang === thisObj.captionLang) { - isDefaultTrack = true; - } - } - else if (typeof thisObj.lang !== 'undefined') { + isDefaultTrack = false; + if (typeof thisObj.captionLang !== 'undefined' && (trackLang === thisObj.captionLang) ) { + isDefaultTrack = true; + } else if (typeof thisObj.lang !== 'undefined') { if (trackLang === thisObj.lang) { - isDefaultTrack = true; + isDefaultTrack = true; } } thisObj.tracks.push({ @@ -6495,103 +5674,97 @@ if (typeof module !== "undefined" && module.exports) { 'label': trackLabel, 'def': isDefaultTrack, 'cues': null - }); + }); } thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - } - else { - // there are no YouTube captions - thisObj.usingYouTubeCaptions = false; + thisObj.setupPopups('captions'); + } else { + // there are no YouTube captions + thisObj.usingYouTubeCaptions = false; thisObj.hasCaptions = false; } - thisObj.loadingYouTubeCaptions = false; - if (thisObj.okToPlay) { + thisObj.loadingYouTubeCaptions = false; + if (thisObj.okToPlay) { thisObj.youTubePlayer.playVideo(); } } - if (thisObj.captionLangPending) { - // user selected a new caption language prior to playback starting - // set it now + if (thisObj.captionLangPending) { + // user selected a new caption language prior to playback starting + // set it now thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLangPending}); - thisObj.captionLangPending = null; + thisObj.captionLangPending = null; } - if (typeof thisObj.prefCaptionsSize !== 'undefined') { - // set the default caption size - // this doesn't work until the captions module is loaded + if (typeof thisObj.prefCaptionsSize !== 'undefined') { + // set the default caption size + // this doesn't work until the captions module is loaded thisObj.youTubePlayer.setOption('captions','fontSize',thisObj.translatePrefs('size',thisObj.prefCaptionsSize,'youtube')); } deferred.resolve(); }); - // Trigger the above event listener by briefly playing the video - this.loadingYouTubeCaptions = true; - this.youTubePlayer.playVideo(); + // Trigger the above event listener by briefly playing the video + this.loadingYouTubeCaptions = true; + this.youTubePlayer.playVideo(); + // If onApiChange has not been triggered, the captions module is not loading. + setTimeout(() => { + if ( ! apiTriggered ) { + setTimeout(() => { + // If a second passes without loading captions, assume there are none. + thisObj.youTubePlayer.pauseVideo(); + deferred.resolve(); + }, 500); + } + },500); } return promise; }; - AblePlayer.prototype.getYouTubeTimedTextUrl = function (youTubeId, trackName, trackLang) { - - // return URL for retrieving WebVTT source via YouTube's timedtext API - // Note: This API seems to be undocumented, and could break anytime - // UPDATE: Google removed this API on November 10, 2021 - // This function is no longer called, but is preserved here for reference - var url = 'https://www.youtube.com/api/timedtext?fmt=vtt'; - url += '&v=' + youTubeId; - url += '&lang=' + trackLang; - // if track has a value in the name field, it's required* in the URL - if (trackName !== '') { - url += '&name=' + trackName; - } - return url; - }; - AblePlayer.prototype.getYouTubePosterUrl = function (youTubeId, width) { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 - - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; + // return a URL for retrieving a YouTube poster image + // supported values of width: 120, 320, 480, 640, 1280, 1920. + var url = 'https://img.youtube.com/vi/' + youTubeId; + if (width == '120') { + // default (small) thumbnail, 120 x 90 + return url + '/default.jpg'; + } else if (width == '320') { + // medium quality thumbnail, 320 x 180 + return url + '/mqdefault.jpg'; + } else if (width == '480') { + // high quality thumbnail, 480 x 360 + return url + '/hqdefault.jpg'; + } else if (width == '640') { + // standard definition poster image, 640 x 480 + return url + '/sddefault.jpg'; + } else if (width == '1280') { + // standard definition poster image, 640 x 480 + return url + '/hq720.jpg'; + } else if ( width == '1920' ) { + // standard definition poster image, 640 x 480 + return url + '/maxresdefault.jpg'; + } + return false; }; AblePlayer.prototype.getYouTubeId = function (url) { // return a YouTube ID, extracted from a full YouTube URL - // Supported URL patterns (with http or https): - // https://youtu.be/xxx - // https://www.youtube.com/watch?v=xxx - // https://www.youtube.com/embed/xxx - - // in all supported patterns, the id is the last 11 characters - var idStartPos, id; - - if (url.indexOf('youtu') !== -1) { - // this is a full Youtube URL - url = url.trim(); - idStartPos = url.length - 11; - id = url.substring(idStartPos); - return id; - } - else { - return url; + // Supported URL patterns: + // http\|s://youtu.be/xxx + // http\|s://www.youtube.com/watch?v=xxx + // http\|s://www.youtube.com/embed/xxx + + // in all supported patterns, the id is the last 11 characters + var idStartPos, id; + + if (url.indexOf('youtu') !== -1) { + // this is a full Youtube URL + url = url.trim(); + idStartPos = url.length - 11; + id = url.substring(idStartPos); + return id; + } else { + return url; } }; @@ -6601,13 +5774,12 @@ if (typeof module !== "undefined" && module.exports) { // Events: - // startTracking(event, position) - // tracking(event, position) - // stopTracking(event, position) + // - startTracking(event, position) + // - tracking(event, position) + // - stopTracking(event, position) - window. AccessibleSlider = function(mediaType, div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { + window.AccessibleSlider = function(div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { - // mediaType is either 'audio' or 'video' // div is the host element around which the slider will be built // orientation is either 'horizontal' or 'vertical' // length is the width or height of the slider, depending on orientation @@ -6649,8 +5821,7 @@ if (typeof module !== "undefined" && module.exports) { if (initialState === 'visible') { this.seekHead.attr('tabindex', '0'); - } - else { + } else { this.seekHead.attr('tabindex', '-1'); } // Since head is focusable, it gets the aria roles/titles. @@ -6689,8 +5860,7 @@ if (typeof module !== "undefined" && module.exports) { if (orientation === 'horizontal') { this.wrapperDiv.width(length); this.loadedDiv.width(0); - } - else { + } else { this.wrapperDiv.height(length); this.loadedDiv.height(0); } @@ -6714,26 +5884,22 @@ if (typeof module !== "undefined" && module.exports) { if (e.type === 'mouseenter' \|\| e.type === 'focus') { thisObj.overHead = true; - } - else if (e.type === 'mouseleave' \|\| e.type === 'blur') { + } else if (e.type === 'mouseleave' \|\| e.type === 'blur') { thisObj.overHead = false; if (!thisObj.overBody && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { + } else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + } else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(thisObj.seekHead.offset() + (thisObj.seekHead.width() / 2))); if (!thisObj.bodyDiv.is(':focus')) { thisObj.bodyDiv.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } @@ -6747,7 +5913,12 @@ if (typeof module !== "undefined" && module.exports) { this.bodyDiv.on( 'mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend', function (e) { + // Don't trigger move on right click. + if ( e.button == 2 && e.type == 'mousedown' ) { + return; + } coords = thisObj.pointerEventToXY(e); + let keyPressed = e.key; if (e.type === 'mouseenter') { thisObj.overBody = true; @@ -6755,15 +5926,13 @@ if (typeof module !== "undefined" && module.exports) { x: coords.x, y: coords.y }; - } - else if (e.type === 'mouseleave') { + } else if (e.type === 'mouseleave') { thisObj.overBody = false; thisObj.overBodyMousePos = null; if (!thisObj.overHead && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { + } else if (e.type === 'mousemove' \|\| e.type === 'touchmove') { thisObj.overBodyMousePos = { x: coords.x, y: coords.y @@ -6771,52 +5940,36 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + } else if (e.type === 'mousedown' \|\| e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(coords.x)); thisObj.trackHeadAtPageX(coords.x); if (!thisObj.seekHead.is(':focus')) { thisObj.seekHead.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'keydown') { - // Home - if (e.which === 36) { + } else if (e.type === 'keydown') { + if (e.key === 'Home') { thisObj.trackImmediatelyTo(0); - } - // End - else if (e.which === 35) { + } else if (e.key === 'End') { thisObj.trackImmediatelyTo(thisObj.duration); - } - // Left arrow or down arrow - else if (e.which === 37 \|\| e.which === 40) { + } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowDown') { thisObj.arrowKeyDown(-1); - } - // Right arrow or up arrow - else if (e.which === 39 \|\| e.which === 38) { + } else if (e.key === 'ArrowRight' \|\| e.key === 'ArrowUp') { thisObj.arrowKeyDown(1); - } - // Page up - else if (e.which === 33 && bigInterval > 0) { + } else if (e.key === 'PageUp' && bigInterval > 0) { thisObj.arrowKeyDown(bigInterval); - } - // Page down - else if (e.which === 34 && bigInterval > 0) { + } else if (e.key === 'PageDown' && bigInterval > 0) { thisObj.arrowKeyDown(-bigInterval); - } - else { + } else { return; } e.preventDefault(); - } - else if (e.type === 'keyup') { - if (e.which >= 33 && e.which <= 40) { + } else if (e.type === 'keyup') { + if ( keyPressed === e.key ) { if (thisObj.tracking && thisObj.trackDevice === 'keyboard') { thisObj.stopTracking(thisObj.keyTrackPosition); } @@ -6838,27 +5991,7 @@ if (typeof module !== "undefined" && module.exports) { this.nextStep = 2; } this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/* - AccessibleSlider.prototype.pageUp = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { + } else { this.nextStep = 1; this.inertiaCount = 0; this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); @@ -6866,7 +5999,7 @@ if (typeof module !== "undefined" && module.exports) { this.trackHeadAtPosition(this.keyTrackPosition); } }; -/ + AccessibleSlider.prototype.pageXToPosition = function (pageX) { var offset = pageX - this.bodyDiv.offset().left; var position = this.duration (offset / this.bodyDiv.width()); @@ -6921,7 +6054,7 @@ if (typeof module !== "undefined" && module.exports) { this.updateAriaValues(position, updateLive); } - // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. + // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. AccessibleSlider.prototype.setBuffered = function (ratio) { if (!isNaN(ratio)) { this.buffered = ratio; @@ -6984,14 +6117,12 @@ if (typeof module !== "undefined" && module.exports) { ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else if (pMinutes > 0) { + } else if (pMinutes > 0) { descriptionText = pMinutes + ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else { + } else { descriptionText = pSeconds + ' ' + pSecondWord; } @@ -7023,18 +6154,15 @@ if (typeof module !== "undefined" && module.exports) { this.timeTooltip.show(); if (this.tracking) { this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)); - } - else { + } else { this.timeTooltip.text(this.positionToStr(this.position)); } this.setTooltipPosition(this.seekHead.position().left + (this.seekHead.width() / 2)); - } - else if (this.overBody && this.overBodyMousePos) { + } else if (this.overBody && this.overBodyMousePos) { this.timeTooltip.show(); this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))); this.setTooltipPosition(this.overBodyMousePos.x - this.bodyDiv.offset().left); - } - else { + } else { clearTimeout(this.timeTooltipTimeoutId); var _this = this; @@ -7054,7 +6182,7 @@ if (typeof module !== "undefined" && module.exports) { AccessibleSlider.prototype.setTooltipPosition = function (x) { this.timeTooltip.css({ left: x - (this.timeTooltip.width() / 2) - 10, - bottom: this.seekHead.height() + 10 + bottom: this.seekHead.height() }); }; @@ -7072,8 +6200,7 @@ if (typeof module !== "undefined" && module.exports) { dMinutes = '0' + dMinutes; } return dHours + ':' + dMinutes + ':' + dSeconds; - } - else { + } else { return dMinutes + ':' + dSeconds; } }; @@ -7088,8 +6215,7 @@ if (typeof module !== "undefined" && module.exports) { var touch = e.originalEvent.touches[0] \|\| e.originalEvent.changedTouches[0]; out.x = touch.pageX; out.y = touch.pageY; - } - else if (e.type == 'mousedown' \|\| e.type == 'mouseup' \|\| e.type == 'mousemove' \|\| e.type == 'mouseover'\|\| e.type=='mouseout' \|\| e.type=='mouseenter' \|\| e.type=='mouseleave') { + } else if (e.type == 'mousedown' \|\| e.type == 'mouseup' \|\| e.type == 'mousemove' \|\| e.type == 'mouseover'\|\| e.type=='mouseout' \|\| e.type=='mouseenter' \|\| e.type=='mouseleave') { out.x = e.pageX; out.y = e.pageY; } @@ -7102,19 +6228,18 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addVolumeSlider = function($div) { - // Prior to v4.4.64, we were using a custom-build vertical volunme slider - // Changed to input type="range" because it's standard and gaining more widespread support - // including screen reader support - // TODO: Improve presentation of vertical slider. That requires some CSS finesse. + // Prior to v4.4.64, we were using a custom-build vertical volunme slider + // Changed to input type="range" because it's standard and gaining more widespread support + // including screen reader support + // TODO: Improve presentation of vertical slider. That requires some CSS finesse. - var thisObj, volumeSliderId, volumeHelpId, volumePct, tickLabelsId, $tickLabels, i, $tickOption, tickLabel; + var thisObj, volumeSliderId, volumeHelpId, volumePct, volumeLabel, volumeHeight; thisObj = this; // define a few variables volumeSliderId = this.mediaId + '-volume-slider'; volumeHelpId = this.mediaId + '-volume-help'; - tickLabelsId = this.mediaId + '-volume-tick-labels'; this.$volumeSlider = $('<div>',{ 'id': volumeSliderId, @@ -7125,15 +6250,14 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-tooltip', 'role': 'tooltip' }).hide(); - this.$volumeRange = $('<input>',{ + this.$volumeRange = $('<input>',{ 'type': 'range', 'min': '0', 'max': '10', 'step': '1', - 'orient': 'vertical', // non-standard, but required for Firefox - 'aria-label': this.tt.volumeUpDown, + 'orient': 'vertical', // non-standard, but required for Firefox + 'aria-label': this.translate( 'volumeUpDown', 'Volume up down' ), 'value': this.volume - // 'list': tickLabelsId // Uncomment this to use tickLabels (see note below) }); volumePct = parseInt(thisObj.volume) / 10 * 100; this.$volumeHelp = $('<div>',{ @@ -7141,30 +6265,11 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-volume-help', 'aria-live': 'polite' }).text(volumePct + '%'); - this.$volumeButton.attr({ - 'aria-describedby': volumeHelpId - }); - $tickLabels = $('<datalist>',{ - 'id': tickLabelsId - }); - for (i = 0; i <= 10; i++) { - if (i === 0) { - tickLabel = this.tt.mute; - } - else { - tickLabel = (i * 10) + '%'; - } - $tickOption = $('<option>',{ - 'value': i, - 'label': tickLabel - }) - $tickLabels.append($tickOption); - } + volumeLabel = this.$volumeButton.attr( 'aria-label' ); + this.$volumeButton.attr( 'aria-label', volumeLabel + ' ' + volumePct + '%'); this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp); - // To add $tickLabels, use the following line of code to replace the one above - // and uncommnet the 'list' property in the definition of this.$volumeRange above - // As of Nov 2022, this feature is not supported by any screen reader - // this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp,$tickLabels); + volumeHeight = this.$volumeButton.parents( '.able-control-row' )[0]; + this.$volumeSlider.css( 'bottom', volumeHeight.offsetHeight ); $div.append(this.$volumeSlider); @@ -7176,23 +6281,20 @@ if (typeof module !== "undefined" && module.exports) { this.$volumeRange.on('input',function (e) { thisObj.handleVolumeChange($(this).val()); }); - + this.$volumeRange.on('keydown',function (e) { - // Escape key or Enter key or Tab key - if (e.which === 27 \|\| e.which === 13 \|\| e.which === 9) { + if (e.key === 'Escape' \|\| e.key === 'Tab' \|\| e.key === 'Enter') { // close popup if (thisObj.$volumeSlider.is(':visible')) { thisObj.closingVolume = true; // stopgap thisObj.hideVolumePopup(); - } - else { + } else { if (!thisObj.closingVolume) { thisObj.showVolumePopup(); } } - } - else { + } else { return; } }); @@ -7204,93 +6306,61 @@ if (typeof module !== "undefined" && module.exports) { var volumePct; volumePct = (volume/10) * 100; - // Update help text - if (this.$volumeHelp) { - this.$volumeHelp.text(volumePct + '%'); + // Update help text + if (this.$volumeHelp) { + this.$volumeHelp.text(volumePct + '%'); } - // Update the default value of the volume slider input field - // This doesn't seem to be necessary; browsers remember the previous setting during a session - // but this is a fallback in case they don't - this.$volumeRange.attr('value',volume); + // Update the default value of the volume slider input field + // This doesn't seem to be necessary; browsers remember the previous setting during a session + // but this is a fallback in case they don't + this.$volumeRange.attr('value',volume); }; AblePlayer.prototype.refreshVolumeButton = function(volume) { - var volumeName, volumePct, volumeLabel, volumeIconClass, volumeImg, newSvgData; + var volumeName, volumePct, volumeLabel; volumeName = this.getVolumeName(volume); volumePct = (volume/10) * 100; - volumeLabel = this.tt.volume + ' ' + volumePct + '%'; + volumeLabel = this.translate( 'volume', 'Volume' ) + ' ' + volumePct + '%'; - if (this.iconType === 'font') { - volumeIconClass = 'icon-volume-' + volumeName; - this.$volumeButton.find('span').first().removeClass().addClass(volumeIconClass); - this.$volumeButton.find('span.able-clipped').text(volumeLabel); - } - else if (this.iconType === 'image') { - volumeImg = this.imgPath + 'volume-' + volumeName + '.png'; - this.$volumeButton.find('img').attr('src',volumeImg); - } - else if (this.iconType === 'svg') { - if (volumeName !== 'mute') { - volumeName = 'volume-' + volumeName; - } - newSvgData = this.getSvgData(volumeName); - this.$volumeButton.find('svg').attr('viewBox',newSvgData[0]); - this.$volumeButton.find('path').attr('d',newSvgData[1]); - } + this.getIcon( this.$volumeButton, 'volume-' + volumeName ); + this.$volumeButton.attr( 'aria-label', volumeLabel ); }; AblePlayer.prototype.handleVolumeButtonClick = function() { if (this.$volumeSlider.is(':visible')) { - this.hideVolumePopup(); - } - else { + this.hideVolumePopup(); + } else { this.showVolumePopup(); } - }; - - AblePlayer.prototype.handleVolumeKeystroke = function(keycode) { - - // keycode is an ASCII key code 49-57 (numeric keys 1-9), - // keyboard shortcuts for changing volume - - var volume; - - if (keycode >= 49 && keycode <= 57) { - volume = keycode - 48; - } - else { - return false; - } + }; + AblePlayer.prototype.handleVolumeKeystroke = function(volume) { + // keyboard shortcuts for changing volume if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); } - }; + }; AblePlayer.prototype.handleVolumeChange = function(volume) { - // handle volume change using the volume input slider + // handle volume change using the volume input slider if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); @@ -7301,8 +6371,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.isMuted()) { this.setMute(false); - } - else { + } else { this.setMute(true); } }; @@ -7334,8 +6403,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { return this.media.muted; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { return this.youTubePlayer.isMuted(); } }; @@ -7347,8 +6415,7 @@ if (typeof module !== "undefined" && module.exports) { // save current volume so it can be restored after unmute this.lastVolume = this.volume; this.volume = 0; - } - else { // restore to previous volume + } else { // restore to previous volume if (typeof this.lastVolume !== 'undefined') { this.volume = this.lastVolume; } @@ -7356,16 +6423,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.media.muted = mute; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (mute) { this.youTubePlayer.mute(); - } - else { + } else { this.youTubePlayer.unMute(); } } - this.setVolume(this.volume); + this.setVolume(this.volume); this.refreshVolumeHelp(this.volume); this.refreshVolumeButton(this.volume); }; @@ -7375,29 +6440,22 @@ if (typeof module !== "undefined" && module.exports) { // volume is 1 to 10 // convert as needed depending on player - var newVolume; - + var newVolume; + this.syncSignVideo( {'volume' : 0 } ); if (this.player === 'html5') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.media.volume = newVolume; - - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.volume = 0; // always mute - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // volume is 0 to 100 - newVolume = volume * 10; + newVolume = volume * 10; this.youTubePlayer.setVolume(newVolume); this.volume = volume; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.vimeoPlayer.setVolume(newVolume).then(function() { // setVolume finished. - // could do something here // successful completion also fires a 'volumechange' event (see event.js) }); } @@ -7410,10 +6468,9 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { // uses 0 to 1 scale return this.media.volume * 10; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // uses 0 to 100 scale - if (this.youTubePlayerReady) { + if (this.youTubePlayerReady) { return this.youTubePlayer.getVolume() / 10; } } @@ -7430,14 +6487,11 @@ if (typeof module !== "undefined" && module.exports) { // returns 'mute','soft','medium', or 'loud' depending on volume level if (volume == 0) { return 'mute'; - } - else if (volume == 10) { + } else if (volume == 10) { return 'loud'; - } - else if (volume < 5) { + } else if (volume < 5) { return 'soft'; - } - else { + } else { return 'medium'; } }; @@ -7448,70 +6502,57 @@ if (typeof module !== "undefined" && module.exports) { var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"; // Based on the incredible accessible modal dialog. - window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, isModal, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) { + window.AccessibleDialog = function( modalDiv, $returnElement, title, closeButtonLabel) { this.title = title; this.closeButtonLabel = closeButtonLabel; this.focusedElementBeforeModal = $returnElement; - this.escapeHook = escapeHook; this.baseId = $(modalDiv).attr('id') \|\| Math.floor(Math.random() * 1000000000).toString(); var thisObj = this; var modal = modalDiv; this.modal = modal; - modal.css({ - 'width': width \|\| '50%' - }); + modal.addClass('able-modal-dialog'); - if (!fullscreen) { - var closeButton = $('<button>',{ - 'class': 'modalCloseButton', - 'title': thisObj.closeButtonLabel, - 'aria-label': thisObj.closeButtonLabel - }).text('X'); - closeButton.keydown(function (e) { - // Space key down - if (e.which === 32) { - thisObj.hide(); - } - }).click(function () { + var closeButton = $('<button>',{ + 'class': 'modalCloseButton', + 'title': thisObj.closeButtonLabel, + 'aria-label': thisObj.closeButtonLabel + }).text('×'); + closeButton.on( 'keydown', function (e) { + if (e.key === ' ') { thisObj.hide(); - }); + } + }).on( 'click', function () { + thisObj.hide(); + }); - var titleH1 = $('<h1></h1>'); - titleH1.attr('id', 'modalTitle-' + this.baseId); - titleH1.css('text-align', 'center'); - titleH1.text(title); - this.titleH1 = titleH1; + var titleH1 = $('<h1></h1>'); + titleH1.attr('id', 'modalTitle-' + this.baseId); + titleH1.text(title); + this.titleH1 = titleH1; - modal.attr({ - 'aria-labelledby': 'modalTitle-' + this.baseId, - }); - modal.prepend(titleH1); - modal.prepend(closeButton); - } + modal.attr({ + 'aria-labelledby': 'modalTitle-' + this.baseId, + }); + var modalHeader = $( '<div>', { + 'class': 'able-modal-header' + }); + modalHeader.prepend(titleH1); + modalHeader.prepend(closeButton); + modal.prepend(modalHeader); modal.attr({ 'aria-hidden': 'true', - 'role': dialogRole, + 'role': 'dialog', + 'aria-modal': 'true' }); - if (isModal) { - modal.attr('aria-modal','true'); - } - modal.keydown(function (e) { - // Escape - if (e.which === 27) { - if (thisObj.escapeHook) { - thisObj.escapeHook(e, this); - } - else { - thisObj.hide(); - e.preventDefault(); - } - } - // Tab - else if (e.which === 9) { + modal.on( 'keydown', function (e) { + if (e.key === 'Escape') { + thisObj.hide(); + e.preventDefault(); + } else if (e.key === 'Tab') { // Manually loop tab navigation inside the modal. var parts = modal.find(''); var focusable = parts.filter(focusableElementsSelector).filter(':visible'); @@ -7525,13 +6566,12 @@ if (typeof module !== "undefined" && module.exports) { if (e.shiftKey) { // If backwards from first element, go to last. if (currentIndex === 0) { - focusable.get(focusable.length - 1).focus(); + focusable.get(focusable.length - 1).trigger('focus'); e.preventDefault(); } - } - else { + } else { if (currentIndex === focusable.length - 1) { - focusable.get(0).focus(); + focusable.get(0).trigger('focus'); e.preventDefault(); } } @@ -7539,7 +6579,10 @@ if (typeof module !== "undefined" && module.exports) { e.stopPropagation(); }); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + if ( $( 'body' ).hasClass( 'able-modal-active' ) ) { + $( 'body > ') .not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); + } }; AccessibleDialog.prototype.show = function () { @@ -7555,10 +6598,12 @@ if (typeof module !== "undefined" && module.exports) { // Keep from moving focus out of dialog when clicking outside of it. overlay.on('mousedown.accessibleModal', function (e) { e.preventDefault(); + thisObj.hide(); }); } - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('inert', true); + $( 'body' ).addClass( 'able-modal-active' ); this.overlay.css('display', 'block'); this.modal.css('display', 'block'); @@ -7574,7 +6619,7 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; setTimeout(function () { // set focus on the first focusable element - thisObj.modal.find('button.modalCloseButton').first().focus(); + thisObj.modal.find('button.modalCloseButton').first().trigger('focus'); }, 300); }; @@ -7584,9 +6629,10 @@ if (typeof module !== "undefined" && module.exports) { } this.modal.css('display', 'none'); this.modal.attr('aria-hidden', 'true'); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); - this.focusedElementBeforeModal.focus(); + this.focusedElementBeforeModal.trigger('focus'); }; AccessibleDialog.prototype.getInputs = function () { @@ -7707,7 +6753,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getSecondsFromColonTime = function (timeStr) { // Converts string of form hh:mm:ss to seconds - var timeParts, hours, minutes, seconds, newTime; + var timeParts, hours, minutes, seconds; timeParts = timeStr.split(":"); if (timeParts.length === 3) { @@ -7735,6 +6781,35 @@ if (typeof module !== "undefined" && module.exports) { return Number(Math.floor(value + "e" + decimals) + "e-" + decimals); }; + AblePlayer.prototype.defer = function() { + const self = this; + const promise = new Promise((resolve, reject) => { + self.resolve = resolve; + self.reject = reject; + self.promise = () => promise; + }); + } + + AblePlayer.prototype.getScript = function( source, callback ) { + var script = document.createElement('script'); + var prior = document.getElementsByTagName('script')[0]; + script.async = 1; + + script.onload = script.onreadystatechange = function( _, isAbort ) { + if ( isAbort \|\| !script.readyState \|\| /loaded\|complete/.test(script.readyState) ) { + script.onload = script.onreadystatechange = null; + script = undefined; + + if ( !isAbort && callback ) { + setTimeout(callback, 0); + } + } + }; + + script.src = source; + prior.parentNode.insertBefore(script, prior); + } + AblePlayer.prototype.hasAttr = function (object, attribute) { // surprisingly, there is no hasAttr() function in Jquery as of 3.2.1 // return true if object has attribute; otherwise false @@ -7752,17 +6827,6 @@ if (typeof module !== "undefined" && module.exports) { } }; - Number.isInteger = - Number.isInteger \|\| - function (value) { - // polyfill for IE11, which doesn't otherwise support Number.isInteger - // https://stackoverflow.com/a/31720368/744281 - return ( - typeof value === "number" && - isFinite(value) && - Math.floor(value) === value - ); - }; })(jQuery); (function ($) { @@ -7775,12 +6839,12 @@ if (typeof module !== "undefined" && module.exports) { // toggles the Description button or changes a description-related preference // The following variables are applicable to delivery of description: - // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) + // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) // prefDesc == 1 if user wants description (i.e., Description button is on); else 0 // prefDescPause == 1 to pause video when description starts; else 0 // prefDescVisible == 1 to visibly show text-based description area; else 0 // prefDescMethod == either 'video' or 'text' (as of v4.0.10, prefDescMethod is always 'video') - // descMethod is the format actually used ('video' or 'text'), regardless of user preference + // descMethod is the format actually used ('video' or 'text'), regardless of user preference // hasOpenDesc == true if a described version of video is available via data-desc-src attribute // hasClosedDesc == true if a description text track is available // descOn == true if description of either type is on @@ -7789,12 +6853,12 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - if (this.mediaType === 'audio') { - deferred.resolve(); + if (this.mediaType === 'audio') { + deferred.resolve(); } // check to see if there's an open-described version of this video @@ -7803,106 +6867,78 @@ if (typeof module !== "undefined" && module.exports) { this.descFile = this.$sources.first().attr('data-desc-src'); if (typeof this.descFile !== 'undefined') { this.hasOpenDesc = true; - } - else { + } else { // there's no open-described version via data-desc-src, // but what about data-youtube-desc-src or data-vimeo-desc-src? - // if these exist, they would have been defined earlier - if (this.youTubeDescId \|\| this.vimeoDescId) { - this.hasOpenDesc = true; - } - else { // there are no open-described versions from any source - this.hasOpenDesc = false; - } + // if these exist, they would have been defined earlier + this.hasOpenDesc = (this.youTubeDescId \|\| this.vimeoDescId) ? true : false; } // Set this.descMethod based on media availability & user preferences + // no description is available for this video + this.descMethod = null; if (this.hasOpenDesc && this.hasClosedDesc) { - // both formats are available. User gets their preference. - if (this.prefDescMethod) { - this.descMethod = this.prefDescMethod; - } - else { - // user has no preference. Video is default. - this.descMethod = 'video'; - } - } - else if (this.hasOpenDesc) { + // both formats are available. User gets their preference. + this.descMethod = (this.prefDescMethod) ? this.prefDescMethod : 'video'; + } else if (this.hasOpenDesc) { this.descMethod = 'video'; - } - else if (this.hasClosedDesc) { + } else if (this.hasClosedDesc) { this.descMethod = 'text'; } - else { - // no description is available for this video - this.descMethod = null; - } // Set the default state of descriptions - if (this.descMethod) { - if (this.prefDesc === 1) { - this.descOn = true; - } - else if (this.prefDesc === 0) { - this.descOn = false; - } - else { - // user has no prefs. Use default state. - if (this.defaultStateDescriptions === 1) { - this.descOn = true; - } - else { - this.descOn = false; - } + this.descOn = false; + if (this.descMethod) { + if (this.prefDesc === 1) { + this.descOn = true; + } else if (this.prefDesc === 0) { + this.descOn = false; + } else { + // user has no prefs. Use default state. + this.descOn = (this.defaultStateDescriptions === 1) ? true : false; } } - else { - this.descOn = false; - } - if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc && this.descMethod === 'text') { + + // If a video has text audio descriptions, inject the description area. + if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc ) { this.injectTextDescriptionArea(); } if (this.descOn) { - if (this.descMethod === 'video') { - if (!this.usingDescribedVersion()) { - // switched from non-described to described version - this.swapDescription(); - } + if (this.descMethod === 'video' && !this.usingDescribedVersion() ) { + // switched from non-described to described version + this.swapDescription(); } if (this.hasClosedDesc) { if (this.prefDescVisible) { // make description text visible if (typeof this.$descDiv !== 'undefined') { this.$descDiv.show(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } - } - else { + } else { // keep it visible to screen readers, but hide it visibly if (typeof this.$descDiv !== 'undefined') { - this.$descDiv.addClass('able-clipped'); + this.$descDiv.addClass('able-offscreen'); } } } - } - else { // description is off. + } else { // description is off. if (this.descMethod === 'video') { // user has turned off described version of video if (this.usingDescribedVersion()) { // user was using the described verion. Swap for non-described version this.swapDescription(); } - } - else if (this.descMethod === 'text') { // user has turned off text description + } else if (this.descMethod === 'text') { // user has turned off text description // hide description div from everyone, including screen reader users if (typeof this.$descDiv !== 'undefined') { this.$descDiv.hide(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } } } deferred.resolve(); - return promise; + return promise; }; AblePlayer.prototype.usingDescribedVersion = function () { @@ -7911,116 +6947,79 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'youtube') { return (this.activeYouTubeId === this.youTubeDescId); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { return (this.activeVimeoId === this.vimeoDescId); - } - else { + } else { return (this.$sources.first().attr('data-desc-src') === this.$sources.first().attr('src')); } }; - AblePlayer.prototype.initSpeech = function (context) { - - // Some browsers &/or operating systems require a user-initiated click - // before this.synth.getVoices() will work. As of Nov 2022: - // Chrome requires a click before synth.getVoices() will work - // iOS requires a click before synth.speak() will work - // A hack to address this: Listen for ANY click, then play an inaudible utterance - // to intitiate speech synthesis - // https://stackoverflow.com/questions/32193704/js-speech-synthesis-issue-on-ios - // This function does that, and sets this.speechEnabled - // It's called with either of these contexts: - // 'init' - player is being initialized - // 'play' - user has clicked play - // 'prefs' - user has clicked prefs button - // 'desc' - it's time to announce a description! - - var thisObj = this; - - if (this.speechEnabled === null) { - - if (typeof this.synth !== 'undefined') { - // cancel any previous synth instance and reinitialize - this.synth.cancel(); - } +/* + * Initializes speech synthesis capabilities for the player. + * This method addresses browser and OS limitations that require user interaction + * before speech synthesis functions become available. It handles different contexts + * like initialization, playing media, accessing preferences, or announcing descriptions. + * @param {string} context - The context in which the function is called ('init', 'play', 'prefs', 'desc'). + / + AblePlayer.prototype.initSpeech = function (context) { + var thisObj = this; - if (window.speechSynthesis) { + // Function to attempt enabling speech synthesis + function attemptEnableSpeech() { + var greeting = new SpeechSynthesisUtterance("\x20"); + greeting.onend = function () { + thisObj.getBrowserVoices(); + if ( + (Array.isArray(thisObj.descVoices) && thisObj.descVoices.length) \|\| + context !== "init" + ) { + thisObj.speechEnabled = true; + } + }; + thisObj.synth.speak(greeting); + } - // browser supports speech synthesis + // Function to handle the initial click and enable speech synthesis + function handleInitialClick() { + attemptEnableSpeech(); + // Once the utterance starts, remove this specific click event listener + // Ensures the event handler only runs once and cleans up after itself + $(document).off("click", handleInitialClick); + } + if (this.speechEnabled === null) { + if (window.speechSynthesis) { + // Browser supports speech synthesis this.synth = window.speechSynthesis; + this.synth.cancel(); // Cancel any ongoing speech synthesis - if (context === 'init') { - // handle a click on anything, in case the user - // clicks something before they click 'play' or 'prefs' buttons - // that would allow us to init speech before it's needed - $(document).on('click',function() { - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - } - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; - }); - - // go ahead and call get browser voices in case it might work, - // for browsers that don't require a click - this.getBrowserVoices(); - if (this.descVoices.length) { - this.speechEnabled = true; - } - } - else { // context is either 'play' or 'prefs' or 'desc' - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - }; - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; + if (context === "init") { + // Attempt to enable speech synthesis directly for browsers that don't require a click + attemptEnableSpeech(); + // For initial setup, require a user click to enable speech synthesis + // Scoping to a particular handler to avoid conflicts with other click events + $(document).on("click", handleInitialClick); + } else { + // For other contexts, attempt to enable speech synthesis directly + attemptEnableSpeech(); } - } - else { - // browser does not support speech synthesis - this.speechEnabled = false; + } else { + // Browser does not support speech synthesis + this.speechEnabled = false; } } - }; + }; AblePlayer.prototype.getBrowserVoices = function () { - - // define this.descVoices array - // includes only languages that match the language of the captions or player + + // define this.descVoices array + // includes only languages that match the language of the captions or player var voices, descLangs, voiceLang, preferredLang; - if (this.captionLang) { - preferredLang = this.captionLang.substring(0,2).toLowerCase(); - } - else { - preferredLang = this.lang.substring(0,2).toLowerCase(); - } - this.descVoices = []; + preferredLang = (this.captionLang) ? this.captionLang.substring(0,2).toLowerCase() : this.lang.substring(0,2).toLowerCase(); + + this.descVoices = []; voices = this.synth.getVoices(); descLangs = this.getDescriptionLangs(); if (voices.length > 0) { @@ -8030,9 +7029,9 @@ if (typeof module !== "undefined" && module.exports) { // match only the first 2 characters of the lang code voiceLang = voices[i].lang.substring(0,2).toLowerCase(); if (voiceLang === preferredLang && (descLangs.indexOf(voiceLang) !== -1)) { - // this voice matches preferredLang + // this voice matches preferredLang // AND there's a matching description track in this language - // Add this voice to final array + // Add this voice to final array this.descVoices.push(voices[i]); } } @@ -8063,51 +7062,44 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setDescriptionVoice = function () { - // set description voice on player init, or when user changes caption language - // Voice is determined in the following order of precedence: - // 1. User's preferred voice for this language, saved in a cookie + // set description voice on player init, or when user changes caption language + // Voice is determined in the following order of precedence: + // 1. User's preferred voice for this language, saved in preferences // 2. The first available voice in the array of available voices for this browser in this language - var cookie, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; - cookie = this.getCookie(); - if (typeof cookie.voices !== 'undefined') { - prefDescVoice = this.getPrefDescVoice(); - } - else { - prefDescVoice = null; - } - + var preferences, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; + preferences = this.getPref(); + prefDescVoice = (typeof preferences.voices !== 'undefined') ? this.getPrefDescVoice() : null; + this.getBrowserVoices(); this.rebuildDescPrefsForm(); - if (this.selectedDescriptions) { + if (this.selectedDescriptions) { descLang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - descLang = this.captionLang; - } - else { - descLang = this.lang; + } else if (this.captionLang) { + descLang = this.captionLang; + } else { + descLang = this.lang; } if (this.synth) { voices = this.synth.getVoices(); if (voices.length > 0) { - if (prefDescVoice) { - // select the language that matches prefDescVoice, if it's available - prefVoiceFound = false; + if (prefDescVoice) { + // select the language that matches prefDescVoice, if it's available + prefVoiceFound = false; for (var i=0; i<voices.length; i++) { // first, be sure voice is the correct language if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { - if (voices[i].name === prefDescVoice) { - descVoice = voices[i].name; - prefVoiceFound = true; + if (voices[i].name === prefDescVoice) { + descVoice = voices[i].name; + prefVoiceFound = true; break; } } } } - if (!prefVoiceFound) { + if (!prefVoiceFound) { // select the first language that matches the first 2 characters of the lang code for (var i=0; i<voices.length; i++) { if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { @@ -8121,10 +7113,9 @@ if (typeof module !== "undefined" && module.exports) { this.prefDescVoiceLang = descLang; // select this voice in the Description Prefs dialog if (this.$voiceSelectField) { - var selectedOption = this.$voiceSelectField.find('option[value="' + this.prefDescVoice + '"]'); this.$voiceSelectField.val(this.prefDescVoice); } - this.updateCookie('voice'); + this.updatePreferences('voice'); } } }; @@ -8138,70 +7129,66 @@ if (typeof module !== "undefined" && module.exports) { // 2. User is toggling description // (playerCreated == true) - var thisObj, i, origSrc, descSrc, srcType, newSource; + var thisObj, i, origSrc, descSrc; thisObj = this; - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; - // get element that has focus at the time swap is initiated - // after player is rebuilt, focus will return to that same element + // get element that has focus at the time swap is initiated + // after player is rebuilt, focus will return to that same element // (if it exists) - this.$focusedElement = $(':focus'); + this.$focusedElement = $(':focus'); + this.activeMedia = this.mediaId; // get current time of current source, and attempt to start new video at the same time - // whether this is possible will be determined after the new media source has loaded - // see onMediaNewSourceLoad() - if (this.elapsed > 0) { - this.swapTime = this.elapsed; + // whether this is possible will be determined after the new media source has loaded + // see onMediaNewSourceLoad() + if (this.elapsed > 0) { + this.swapTime = this.elapsed; + } else { + this.swapTime = 0; } - else { - this.swapTime = 0; - } - if (this.duration > 0) { - this.prevDuration = this.duration; + if (this.duration > 0) { + this.prevDuration = this.duration; } - // Capture current playback state, so media can resume after source is swapped - if (!this.okToPlay) { - this.okToPlay = this.playing; + // Capture current playback state, so media can resume after source is swapped + if (!this.okToPlay) { + this.okToPlay = this.playing; } if (this.descOn) { - // user has requested the described version - this.showAlert(this.tt.alertDescribedVersion); - } - else { - // user has requested the non-described version - this.showAlert(this.tt.alertNonDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); + } else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); } if (this.player === 'html5') { this.swappingSrc = true; - this.paused = true; + this.paused = true; if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-orig-src - origSrc = this.$sources[i].getAttribute('data-orig-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-orig-src') ); srcType = this.$sources[i].getAttribute('type'); if (origSrc) { this.$sources[i].setAttribute('src',origSrc); } - } - } - else { + } + } else { // the non-described version is currently playing. Swap to described. for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-desc-src (if one exists) // then store original source in a new data-orig-src attribute - origSrc = this.$sources[i].getAttribute('src'); - descSrc = this.$sources[i].getAttribute('data-desc-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('src') ); + descSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-desc-src') ); srcType = this.$sources[i].getAttribute('type'); if (descSrc) { this.$sources[i].setAttribute('src',descSrc); @@ -8210,88 +7197,77 @@ if (typeof module !== "undefined" && module.exports) { } } - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - if (this.playerCreated) { - // delete old player, then recreate it with new source & tracks - this.deletePlayer('swap-desc-html'); - this.recreatePlayer().then(function() { - if (!thisObj.loadingMedia) { + return; + } + if (this.playerCreated) { + // delete old player, then recreate it with new source & tracks + this.deletePlayer('swap-desc-html'); + this.recreatePlayer().then(function() { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } }); - } - else { + } else { // player is in the process of being created - // no need to recreate it - } - } - else if (this.player === 'youtube') { - - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeYouTubeId = this.youTubeId; - } - else { - // the non-described version is currently playing. Swap to described. - this.activeYouTubeId = this.youTubeDescId; + // no need to recreate it } + } else if (this.player === 'youtube') { + + // if the described version is currently playing, swap to non-described + this.activeYouTubeId = (this.usingDescribedVersion()) ? this.youTubeId : this.youTubeDescId; + if (typeof this.youTubePlayer !== 'undefined') { - thisObj.swappingSrc = true; + thisObj.swappingSrc = true; if (thisObj.playing) { // loadVideoById() loads and immediately plays the new video at swapTime thisObj.youTubePlayer.loadVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - else { + } else { // cueVideoById() loads the new video and seeks to swapTime, but does not play thisObj.youTubePlayer.cueVideoById(thisObj.activeYouTubeId,thisObj.swapTime); } } - if (this.playerCreated) { - this.deletePlayer('swap-desc-youtube'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-youtube'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { - // nothing to do here - // next steps occur when youtube onReady event fires - // see youtube.js > finalizeYoutubeInit() - }); - } - else if (this.player === 'vimeo') { + return; + } + this.recreatePlayer().then(function() { + // nothing to do here + // next steps occur when youtube onReady event fires + // see youtube.js > finalizeYoutubeInit() + }); + } else if (this.player === 'vimeo') { if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described this.activeVimeoId = this.vimeoId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); + } else { // the non-described version is currently playing. Swap to described. this.activeVimeoId = this.vimeoDescId; - this.showAlert(this.tt.alertDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); } - if (this.playerCreated) { - this.deletePlayer('swap-desc-vimeo'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-vimeo'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { + return; + } + this.recreatePlayer().then(function() { // load the new video source thisObj.vimeoPlayer.loadVideo(thisObj.activeVimeoId).then(function() { if (thisObj.playing) { // video was playing when user requested an alternative version // seek to swapTime and continue playback (playback happens automatically) thisObj.vimeoPlayer.setCurrentTime(thisObj.swapTime); - } - else { + } else { // Vimeo autostarts immediately after video loads // The "Described" button should not trigger playback, so stop this before the user notices. thisObj.vimeoPlayer.pause(); @@ -8302,36 +7278,30 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.showDescription = function(now) { - - if (!this.hasClosedDesc \|\| this.swappingSrc \|\| !this.descOn \|\| this.descMethod === 'video') { + if (!this.playing \|\| !this.hasClosedDesc \|\| this.swappingSrc \|\| !this.descOn \|\| ( this.descMethod === 'video' && !this.prefDescVisible ) ) { return; } - var thisObj, i, cues, d, thisDescription, descText, msg; + var thisObj, cues, d, thisDescription, descText; thisObj = this; var flattenComponentForDescription = function (component) { var result = []; if (component.type === 'string') { result.push(component.value); - } - else { + } else { for (var i = 0; i < component.children.length; i++) { result.push(flattenComponentForDescription(component.children[i])); } } return result.join(''); }; - + cues = []; if (this.selectedDescriptions) { cues = this.selectedDescriptions.cues; - } - else if (this.descriptions.length >= 1) { + } else if (this.descriptions.length >= 1) { cues = this.descriptions[0].cues; } - else { - cues = []; - } for (d = 0; d < cues.length; d++) { if ((cues[d].start <= now) && (cues[d].end > now)) { thisDescription = d; @@ -8340,35 +7310,35 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisDescription !== 'undefined') { if (this.currentDescription !== thisDescription) { - // temporarily remove aria-live from $status in order to prevent description from being interrupted + // temporarily remove aria-live from $status to prevent description from being interrupted this.$status.removeAttr('aria-live'); descText = flattenComponentForDescription(cues[thisDescription].components); - if (this.descReader === 'screenreader') { + if (this.descReader === 'screenreader') { // load the new description into the container div for screen readers to read this.$descDiv.html(descText); - } - else if (this.speechEnabled) { - // use browser's built-in speech synthesis - this.announceDescriptionText('description',descText); + } else if (this.speechEnabled) { + if ( 'video' !== this.descMethod ) { + // use browser's built-in speech synthesis + this.announceDescriptionText('description',descText); + } if (this.prefDescVisible) { // write description to the screen for sighted users // but remove ARIA attributes since it isn't intended to be read by screen readers this.$descDiv.html(descText).removeAttr('aria-live aria-atomic'); } - } - else { + } else { // browser does not support speech synthesis // load the new description into the container div for screen readers to read this.$descDiv.html(descText); } + // Only pause video if not using a described video. if (this.prefDescPause && this.descMethod === 'text') { this.pauseMedia(); this.pausedForDescription = true; } this.currentDescription = thisDescription; } - } - else { + } else { this.$descDiv.html(''); this.currentDescription = -1; // restore aria-live to $status @@ -8376,42 +7346,33 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { + AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - // called when user changed playback rate - // adjust rate of audio description to match + // called when user changed playback rate + // adjust rate of audio description to match + var speechRate; - var speechRate; - - if (rate === 0.5) { - speechRate = 0.7; // option 1 in prefs menu - } - else if (rate === 0.75) { - speechRate = 0.8; // option 2 in prefs menu - } - else if (rate === 1.0) { + if (rate === 0.5) { + speechRate = 0.7; // option 1 in prefs menu + } else if (rate === 0.75) { + speechRate = 0.8; // option 2 in prefs menu + } else if (rate === 1.0) { speechRate = 1; // option 4 in prefs menu (normal speech, default) - } - else if (rate === 1.25) { + } else if (rate === 1.25) { speechRate = 1.1; // option 5 in prefs menu - } - else if (rate === 1.5) { - speechRate = 1.2; // option 6 in prefs menu - } - else if (rate === 1.75) { - speechRate = 1.5; // option 7 in prefs menu - } - else if (rate === 2.0) { + } else if (rate === 1.5) { + speechRate = 1.2; // option 6 in prefs menu + } else if (rate === 1.75) { + speechRate = 1.5; // option 7 in prefs menu + } else if (rate === 2.0) { speechRate = 2; // option 8 in prefs menu (fast) - } - else if (rate === 2.25) { + } else if (rate === 2.25) { speechRate = 2.5; // option 9 in prefs menu (very fast) - } - else if (rate >= 2.5) { - speechRate = 3; // option 10 in prefs menu (super fast) + } else if (rate >= 2.5) { + speechRate = 3; // option 10 in prefs menu (super fast) } this.prefDescRate = speechRate; - }; + }; AblePlayer.prototype.announceDescriptionText = function(context, text) { @@ -8441,10 +7402,10 @@ if (typeof module !== "undefined" && module.exports) { // and typically requires a computer reboot to make right again. // This has been observed frequently in macOS Big Sur, but also in Windows 10 // To ignore user's voice preferences and always use the first voice, set the following var to true - // This is for testing only; not recommended for production - // unless the voice select field is also removed from the Prefs dialog + // This is for testing only; not recommended for production + // unless the voice select field is also removed from the Prefs dialog var useFirstVoice = false; - + if (!this.speechEnabled) { // voices array failed to load the first time. Try again this.initSpeech('desc'); @@ -8456,8 +7417,7 @@ if (typeof module !== "undefined" && module.exports) { pitch = $('#' + this.mediaId + '_prefDescPitch').val(); rate = $('#' + this.mediaId + '_prefDescRate').val(); volume = $('#' + this.mediaId + '_prefDescVolume').val(); - } - else { + } else { // get settings from global prefs voiceName = this.prefDescVoice; pitch = this.prefDescPitch; @@ -8470,8 +7430,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.descVoices.length > 0) { if (useFirstVoice) { voice = this.descVoices[0]; - } - else if (voiceName) { + } else if (voiceName) { // get the voice that matches user's preferred voiceName for (i = 0; i < this.descVoices.length; i++) { if (this.descVoices[i].name == voiceName) { @@ -8485,63 +7444,62 @@ if (typeof module !== "undefined" && module.exports) { // use the first voice in the array voice = this.descVoices[0]; } - utterance = new SpeechSynthesisUtterance(); - utterance.voice = voice; - utterance.voiceURI = 'native'; - utterance.volume = volume; - utterance.rate = rate; - utterance.pitch = pitch; - utterance.text = text; - // TODO: Consider the best language for the utterance: - // language of the web page? (this.lang) - // language of the WebVTT description track? - // language of the user's chosen voice? - // If there's a mismatch between any of these, the description will likely be unintelligible - utterance.lang = this.lang; - utterance.onstart = function(e) { - // utterance has started - }; - utterance.onpause = function(e) { - // utterance has paused - }; - utterance.onend = function(e) { - // utterance has ended - this.speakingDescription = false; - timeElapsed = e.elapsedTime; - // As of Firefox 95, e.elapsedTime is expressed in seconds - // Other browsers (tested in Chrome & Edge) express this in milliseconds - // Assume no utterance will require over 100 seconds to express... - if (timeElapsed > 100) { - // time is likely expressed in milliseconds - secondsElapsed = (e.elapsedTime/1000).toFixed(2); - } - else { - // time is likely already expressed in seconds; just need to round it - secondsElapsed = (e.elapsedTime).toFixed(2); - } - if (this.debug) { - console.log('Finished speaking. That took ' + secondsElapsed + ' seconds.'); - } - if (context === 'description') { - if (thisObj.prefDescPause) { - if (thisObj.pausedForDescription) { - thisObj.playMedia(); - this.pausedForDescription = false; - } - } - } - }; - utterance.onerror = function(e) { - // handle error - console.log('Web Speech API error',e); - }; - if (this.synth.paused) { - this.synth.resume(); - } - this.synth.speak(utterance); - this.speakingDescription = true; } + } else { + voice = null; + } + utterance = new SpeechSynthesisUtterance(); + if (voice) { + utterance.voice = voice; + } + utterance.voiceURI = 'native'; + utterance.volume = volume; + utterance.rate = rate; + utterance.pitch = pitch; + utterance.text = text; + // TODO: Consider the best language for the utterance: + // language of the web page? (this.lang) + // language of the WebVTT description track? + // language of the user's chosen voice? + // If there's a mismatch between any of these, the description will likely be unintelligible + utterance.lang = this.lang; + utterance.onstart = function(e) { + // utterance has started + }; + utterance.onpause = function(e) { + // utterance has paused + }; + utterance.onend = function(e) { + // utterance has ended + this.speakingDescription = false; + timeElapsed = e.elapsedTime; + // As of Firefox 95, e.elapsedTime is expressed in seconds + // Other browsers (tested in Chrome & Edge) express this in milliseconds + // Assume no utterance will require over 100 seconds to express... + // If a large value, time is likely expressed in milliseconds. + secondsElapsed = (timeElapsed > 100) ? (e.elapsedTime/1000).toFixed(2) : (e.elapsedTime).toFixed(2); + + if (this.debug) { + console.log('Finished speaking. That took ' + secondsElapsed + ' seconds.'); + } + if (context === 'description') { + if (thisObj.prefDescPause) { + if (thisObj.pausedForDescription) { + thisObj.playMedia(); + this.pausedForDescription = false; + } + } + } + }; + utterance.onerror = function(e) { + // handle error + console.log('Web Speech API error',e); + }; + if (this.synth.paused) { + this.synth.resume(); } + this.synth.speak(utterance); + this.speakingDescription = true; }; })(jQuery); @@ -8550,7 +7508,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isIOS = function(version) { - // return true if this is IOS + // return true if this is iOS // if version is provided check for a particular version var userAgent, iOS; @@ -8562,61 +7520,48 @@ if (typeof module !== "undefined" && module.exports) { if (userAgent.indexOf('os ' + version) !== -1) { // this is the target version of iOS return true; - } - else { + } else { return false; } - } - else { + } else { // no version was specified return true; } - } - else { - // this is not IOS + } else { + // this is not iOS return false; } }; AblePlayer.prototype.browserSupportsVolume = function() { - // To test whether the browser supports changing the volume, - // create a new audio element and try setting the volume to something other than 1. - // Then, retrieve the current setting to see if it preserved it. + // To test whether the browser supports changing the volume, + // create a new audio element and try setting the volume to something other than 1. + // Then, retrieve the current setting to see if it preserved it. + // This doesn't work in iOS by design: https://developer.apple.com/documentation/avfoundation/avplayer/volume - // Unfortunately, this doesn't work in iOS. In 2022, our tests yield the same results as reported here: - // https://stackoverflow.com/questions/72861253/how-do-i-detect-if-a-browser-does-not-support-changing-html-audio-volume + var audio, testVolume; - // So, unfortunately we have to resort to sniffing for iOS - // before testing for support in other browsers - var audio, testVolume; - - if (this.isIOS()) { - return false; - } + if (this.isIOS()) { + return false; + } - testVolume = 0.9; // any value between 0.1 and 0.9 - audio = new Audio(); - audio.volume = testVolume; - if (audio.volume === testVolume) { - return true; - } - else { - return false; - } + testVolume = 0.9; // any value between 0.1 and 0.9 + audio = new Audio(); + audio.volume = testVolume; + + return ( audio.volume === testVolume ); }; AblePlayer.prototype.nativeFullscreenSupported = function () { - return document.fullscreenEnabled \|\| - document.webkitFullscreenEnabled \|\| - document.mozFullscreenEnabled \|\| - document.msFullscreenEnabled; + return document.fullscreenEnabled \|\| document.webkitFullscreenEnabled; }; })(jQuery); (function ($) { + AblePlayer.prototype.seekTo = function (newTime) { var thisObj = this; @@ -8629,10 +7574,12 @@ if (typeof module !== "undefined" && module.exports) { this.seeking = true; this.liveUpdatePending = true; - if (this.speakingDescription) { - this.synth.cancel(); + if (this.speakingDescription) { + this.synth.cancel(); } + this.syncSignVideo( {'time' : this.startTime } ); + if (this.player === 'html5') { var seekable; @@ -8643,23 +7590,19 @@ if (typeof module !== "undefined" && module.exports) { // ok to seek to startTime // canplaythrough will be triggered when seeking is complete // this.seeking will be set to false at that point - this.media.currentTime = this.startTime; - this.seekStatus = 'complete'; - if (this.hasSignLanguage && this.signVideo) { - // keep sign languge video in sync - this.signVideo.currentTime = this.startTime; - } + this.media.currentTime = this.startTime; + this.seekStatus = 'complete'; + this.syncSignVideo( { 'time' : this.startTime } ); } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.seekTo(newTime,true); if (newTime > 0) { if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } } - } - else if (this.player === 'vimeo') { + this.syncSignVideo( {'time' : newTime } ); + } else if (this.player === 'vimeo') { this.vimeoPlayer.setCurrentTime(newTime).then(function() { // seek finished. // successful completion also fires a 'seeked' event (see event.js) @@ -8689,15 +7632,14 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj, mediaTimes; mediaTimes = {}; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (typeof duration !== 'undefined' && typeof elapsed !== 'undefined') { mediaTimes['duration'] = duration; mediaTimes['elapsed'] = elapsed; deferred.resolve(mediaTimes); - } - else { + } else { this.getDuration().then(function(duration) { mediaTimes['duration'] = thisObj.roundDown(duration,6); thisObj.getElapsed().then(function(elapsed) { @@ -8715,7 +7657,7 @@ if (typeof module !== "undefined" && module.exports) { // function is called by getMediaTimes, and return value is sanitized there var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -8724,39 +7666,32 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getDuration().then(function(duration) { if (duration === undefined \|\| isNaN(duration) \|\| duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var duration; if (this.player === 'html5') { - duration = this.media.duration; - } - else if (this.player === 'youtube') { + duration = this.media.duration; + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { - if (this.duration > 0) { + if (this.duration > 0) { // duration was already retrieved while checking for captions - duration = this.duration; - } - else { + duration = this.duration; + } else { duration = this.youTubePlayer.getDuration(); } - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet duration = 0; } } if (duration === undefined \|\| isNaN(duration) \|\| duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } } @@ -8770,7 +7705,7 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -8779,33 +7714,27 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getCurrentTime().then(function(elapsed) { if (elapsed === undefined \|\| isNaN(elapsed) \|\| elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var elapsed; if (this.player === 'html5') { elapsed = this.media.currentTime; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { elapsed = this.youTubePlayer.getCurrentTime(); - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet elapsed = 0; } } if (elapsed === undefined \|\| isNaN(elapsed) \|\| elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } } @@ -8815,71 +7744,51 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getPlayerState = function () { // Returns one of the following states: - // 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. - // 'ended' - Finished playing. - // 'paused' - Not playing, but not stopped or ended. - // 'buffering' - Momentarily paused to load, but will resume once data is loaded. - // 'playing' - Currently playing. - - // Commented out the following in 3.2.1 - not sure of its intended purpose - // It can be useful to know player state even when swapping src - // and the overhead is seemingly minimal - // TODO - Investigate this further. Delete if it's not needed - / - if (this.swappingSrc) { - return; - } - / - var deferred, promise, thisObj, duration, elapsed; - deferred = new $.Deferred(); + // - 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. + // - 'ended' - Finished playing. + // - 'paused' - Not playing, but not stopped or ended. + // - 'buffering' - Momentarily paused to load, but will resume once data is loaded. + // - 'playing' - Currently playing. + + var deferred, promise, thisObj; + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (this.player === 'html5') { if (this.media.ended) { deferred.resolve('ended'); - } - else if (this.media.paused) { + } else if (this.media.paused) { deferred.resolve('paused'); - } - else if (this.media.readyState !== 4) { + } else if (this.media.readyState !== 4) { deferred.resolve('buffering'); - } - else { + } else { deferred.resolve('playing'); } - } - else if (this.player === 'youtube' && this.youTubePlayerReady) { + } else if (this.player === 'youtube' && this.youTubePlayerReady) { var state = this.youTubePlayer.getPlayerState(); if (state === -1 \|\| state === 5) { deferred.resolve('stopped'); - } - else if (state === 0) { + } else if (state === 0) { deferred.resolve('ended'); - } - else if (state === 1) { + } else if (state === 1) { deferred.resolve('playing'); - } - else if (state === 2) { + } else if (state === 2) { deferred.resolve('paused'); - } - else if (state === 3) { + } else if (state === 3) { deferred.resolve('buffering'); } - } - else if (this.player === 'vimeo' && this.vimeoPlayer) { + } else if (this.player === 'vimeo' && this.vimeoPlayer) { // curiously, Vimeo's API has no getPlaying(), getBuffering(), or getState() methods // so maybe if it's neither paused nor ended, it must be playing??? this.vimeoPlayer.getPaused().then(function(paused) { if (paused) { deferred.resolve('paused'); - } - else { + } else { thisObj.vimeoPlayer.getEnded().then(function(ended) { if (ended) { deferred.resolve('ended'); - } - else { + } else { deferred.resolve('playing'); } }); @@ -8892,89 +7801,63 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isPlaybackRateSupported = function () { if (this.player === 'html5') { - if (this.media.playbackRate) { - return true; - } - else { - return false; - } - } - else if (this.player === 'youtube') { - // Youtube supports varying playback rates per video. + return (this.media.playbackRate) ? true : false; + } else if (this.player === 'youtube') { + // Youtube supports varying playback rates per video. // Only expose controls if more than one playback rate is available. - if (this.youTubePlayerReady) { - if (this.youTubePlayer.getAvailablePlaybackRates().length > 1) { - return true; - } - else { - return false; - } - } - else { + if (this.youTubePlayerReady) { + return (this.youTubePlayer.getAvailablePlaybackRates().length > 1) ? true : false; + } else { return false; } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // since this takes longer to determine, it was set previously in initVimeoPlayer() return this.vimeoSupportsPlaybackRateChange; } }; AblePlayer.prototype.setPlaybackRate = function (rate) { - + rate = Math.max(0.5, rate); - if (this.hasClosedDesc && this.descMethod === 'text') { - // keep speech rate in sync with playback rate even if descOn is false - this.syncSpeechToPlaybackRate(rate); + if (this.hasClosedDesc && this.descMethod === 'text') { + // keep speech rate in sync with playback rate even if descOn is false + this.syncSpeechToPlaybackRate(rate); } + this.syncSignVideo( {'rate' : rate } ); + if (this.player === 'html5') { this.media.playbackRate = rate; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.setPlaybackRate(rate); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.setPlaybackRate(rate); } - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.playbackRate = rate; - } + this.syncSignVideo( { 'rate' : rate } ); this.playbackRate = rate; - this.$speed.text(this.tt.speed + ': ' + rate.toFixed(2).toString() + 'x'); - }; + this.$speed.text( this.translate( 'speed', 'Speed' ) + ': ' + rate.toFixed(2).toString() + 'x'); + }; AblePlayer.prototype.getPlaybackRate = function () { if (this.player === 'html5') { return this.media.playbackRate; - } - else if (this.player === 'youtube') { - if (this.youTubePlayerReady) { - return this.youTubePlayer.getPlaybackRate(); - } + } else if (this.player === 'youtube' && (this.youTubePlayerReady)) { + return this.youTubePlayer.getPlaybackRate(); } }; AblePlayer.prototype.isPaused = function () { - // Note there are three player states that count as paused in this sense, + // Note there are three player states that count as paused in this sense, // and one of them is named 'paused'. // A better name would be 'isCurrentlyNotPlayingOrBuffering' - var state; - if (this.player === 'vimeo') { // just rely on value of this.playing - if (this.playing) { - return false; - } - else { - return true; - } - } - else { + return (this.playing) ? false : true; + } else { this.getPlayerState().then(function(state) { // if any of the following is true, consider the media 'paused' return state === 'paused' \|\| state === 'stopped' \|\| state === 'ended'; @@ -8982,43 +7865,71 @@ if (typeof module !== "undefined" && module.exports) { } }; + AblePlayer.prototype.syncSignVideo = function(options) { + if (this.hasSignLanguage && ( this.signVideo \|\| this.signYoutube ) ) { + if (options && typeof options.time !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.currentTime = options.time; + } else { + this.youTubeSignPlayer.seekTo(options.time,true); + } + } + if (options && typeof options.rate !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.playbackRate = options.rate; + } else { + this.youTubeSignPlayer.setPlaybackRate(options.rate); + } + } + if (options && typeof options.pause !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.pause(true); + } else { + this.youTubeSignPlayer.pauseVideo(); + } + } + if (options && typeof options.play !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.play(true); + } else { + this.youTubeSignPlayer.playVideo(); + } + } + if (options && typeof options.volume !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.volume = 0; + } + } + } + }; + AblePlayer.prototype.pauseMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'pause' : true } ); if (this.player === 'html5') { this.media.pause(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.pause(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.pauseVideo(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.pause(); } }; AblePlayer.prototype.playMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'play' : true } ); if (this.player === 'html5') { this.media.play(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.play(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.playVideo(); if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } this.stoppingYouTube = false; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.play(); } this.startedPlaying = true; @@ -9032,44 +7943,19 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.fadeControls = function(direction) { // Visibly fade controls without hiding them from screen reader users - // direction is either 'out' or 'in' - // TODO: This still needs work. // After the player fades, it's replaced by an empty space // Would be better if the video and captions expanded to fill the void - // Attempted to fade out to 0 opacity, then move the playerDiv offscreen - // and expand the mediaContainer to fill the vacated space - // However, my attempts to do this have been choppy and buggy - // Code is preserved below and commented out + // replace JS animation with CSS animation in 12/2025. - var thisObj, mediaHeight, playerHeight, newMediaHeight; var thisObj = this; if (direction == 'out') { // get the original height of two key components: - mediaHeight = this.$mediaContainer.height(); - playerHeight = this.$playerDiv.height(); - newMediaHeight = mediaHeight + playerHeight; - - // fade slowly to transparency - this.$playerDiv.fadeTo(2000,0,function() { - / - // when finished, position playerDiv offscreen - // thisObj.$playerDiv.addClass('able-offscreen'); - // Expand the height of mediaContainer to fill the void (needs work) - thisObj.$mediaContainer.animate({ - height: newMediaHeight - },500); - / - }); - } - else if (direction == 'in') { - // restore captionsContainer to its original height (needs work) - // this.$mediaContainer.removeAttr('style'); - // fade relatively quickly back to its original position with full opacity - // this.$playerDiv.removeClass('able-offscreen').fadeTo(100,1); - this.$playerDiv.fadeTo(100,1); + this.$playerDiv.addClass( 'fade-out' ).removeClass( 'fade-in' ); + } else if (direction == 'in') { + this.$playerDiv.addClass( 'fade-in' ).removeClass( 'fade-out' ); } }; @@ -9087,7 +7973,7 @@ if (typeof module !== "undefined" && module.exports) { this.hideControlsTimeoutStatus = 'active'; }; - AblePlayer.prototype.refreshControls = function(context, duration, elapsed) { + AblePlayer.prototype.refreshControls = function(context = 'init', duration, elapsed) { // context is one of the following: // 'init' - initial build (or subsequent change that requires full rebuild) @@ -9108,34 +7994,30 @@ if (typeof module !== "undefined" && module.exports) { // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx - var thisObj, duration, elapsed, lastChapterIndex, displayElapsed, - updateLive, textByState, timestamp, widthUsed, - leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount, - buffered, newTop, statusBarHeight, speedHeight, statusBarWidthBreakpoint, - newSvgData; + var thisObj, duration, textByState, timestamp, captionsCount, newTop, statusBarWidthBreakpoint; thisObj = this; - if (this.swappingSrc) { - if (this.playing) { - // wait until new source has loaded before refreshing controls - // can't wait if player is NOT playing because some critical events - // won't fire until playback of new media starts - return; - } + // wait until new source has loaded before refreshing controls + // some critical events won't fire until playback of new media starts + if ( this.swappingSrc && this.playing ) { + return; } - if (context === 'timeline' \|\| context === 'init') { - // all timeline-related functionality requires both duration and elapsed + if ( context === 'timeline' \|\| context === 'init' ) { + // Update timeline controls. + var lastChapterIndex, displayElapsed, updateLive, widthUsed, + leftControls, rightControls, seekbarWidth, buffered; + // all timeline-related functionality requires duration if (typeof this.duration === 'undefined') { - // wait until duration is known before proceeding with refresh - return; + // wait until duration is known before proceeding with refresh + return; } if (this.useChapterTimes) { this.chapterDuration = this.getChapterDuration(); this.chapterElapsed = this.getChapterElapsed(); } - if (this.useFixedSeekInterval === false && this.seekIntervalCalculated === false && this.duration > 0) { + if ( !this.useFixedSeekInterval && !this.seekIntervalCalculated && this.duration > 0) { // couldn't calculate seekInterval previously; try again. this.setSeekInterval(); } @@ -9149,32 +8031,26 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends // need to adjust seekbar duration to match video end this.seekBar.setDuration(this.duration - this.currentChapter.start); - } - else { + } else { this.seekBar.setDuration(this.chapterDuration); } - } - else { + } else { // this is not the last chapter this.seekBar.setDuration(this.chapterDuration); } - } - else { - if (!(this.duration === undefined \|\| isNaN(this.duration) \|\| this.duration === -1)) { - this.seekBar.setDuration(this.duration); - } + } else if ( !(this.duration === undefined \|\| isNaN(this.duration) \|\| this.duration === -1) ) { + this.seekBar.setDuration(this.duration); } if (!(this.seekBar.tracking)) { // Only update the aria live region if we have an update pending // (from a seek button control) or if the seekBar has focus. // We use document.activeElement instead of $(':focus') due to a strange bug: - // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. + // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. updateLive = this.liveUpdatePending \|\| this.seekBar.seekHead.is($(document.activeElement)); this.liveUpdatePending = false; if (this.useChapterTimes) { this.seekBar.setPosition(this.chapterElapsed, updateLive); - } - else { + } else { this.seekBar.setPosition(this.elapsed, updateLive); } } @@ -9182,22 +8058,15 @@ if (typeof module !== "undefined" && module.exports) { // When seeking, display the seek bar time instead of the actual elapsed time. if (this.seekBar.tracking) { displayElapsed = this.seekBar.lastTrackPosition; - } - else { - if (this.useChapterTimes) { - displayElapsed = this.chapterElapsed; - } - else { - displayElapsed = this.elapsed; - } + } else { + displayElapsed = ( this.useChapterTimes ) ? this.chapterElapsed : this.elapsed; } } // update elapsed & duration if (typeof this.$durationContainer !== 'undefined') { if (this.useChapterTimes) { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.chapterDuration)); - } - else { + } else { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.duration)); } } @@ -9209,27 +8078,22 @@ if (typeof module !== "undefined" && module.exports) { // Update seekbar width. // To do this, we need to calculate the width of all buttons surrounding it. if (this.seekBar) { - widthUsed = 0; + let controlWrapper = this.seekBar.wrapperDiv.parent().parent(); leftControls = this.seekBar.wrapperDiv.parent().prev('div.able-left-controls'); rightControls = leftControls.next('div.able-right-controls'); - leftControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); // true = include margin - } - }); + widthUsed = leftControls.outerWidth(true); rightControls.children().each(function () { if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); + widthUsed += $(this).outerWidth(true) + 5; } }); if (this.fullscreen) { seekbarWidth = $(window).width() - widthUsed; - } - else { + } else { // seekbar is wide enough to fill the remaining space - // include a 5px buffer to account for minor browser differences - seekbarWidth = this.$ableWrapper.width() - widthUsed - 5; - } + // include a 10px buffer to account for minor browser differences or custom styles. + seekbarWidth = controlWrapper.width() - widthUsed - 10; + } // Sometimes some minor fluctuations based on browser weirdness, so set a threshold. if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) { this.seekBar.setWidth(seekbarWidth); @@ -9240,122 +8104,69 @@ if (typeof module !== "undefined" && module.exports) { // Update buffering progress. // TODO: Currently only using the first HTML5 buffered interval, // but this fails sometimes when buffering is split into two or more intervals. - if (this.player === 'html5') { - if (this.media.buffered.length > 0) { - buffered = this.media.buffered.end(0); - if (this.useChapterTimes) { - if (buffered > this.chapterDuration) { - buffered = this.chapterDuration; - } - if (this.seekBar) { - this.seekBar.setBuffered(buffered / this.chapterDuration); - } - } - else { - if (this.seekBar) { - if (!isNaN(buffered)) { - this.seekBar.setBuffered(buffered / duration); - } - } + if (this.player === 'html5' && this.media.buffered.length > 0) { + buffered = this.media.buffered.end(0); + if (this.useChapterTimes) { + if (buffered > this.chapterDuration) { + buffered = this.chapterDuration; } - } - } - else if (this.player === 'youtube') { - if (this.seekBar) { - if (this.youTubePlayerReady) { - this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + if (this.seekBar) { + this.seekBar.setBuffered(buffered / this.chapterDuration); } + } else if ( this.seekBar && !isNaN(buffered) ) { + this.seekBar.setBuffered(buffered / duration); } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'youtube' && this.seekBar && this.youTubePlayerReady ) { + this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + } else if (this.player === 'vimeo') { // TODO: Add support for Vimeo buffering update } - } // end if context == 'timeline' or 'init' - - if (context === 'descriptions' \|\| context == 'init'){ + } + if (context === 'descriptions' \|\| context == 'init') { if (this.$descButton) { - if (this.descOn) { - this.$descButton.removeClass('buttonOff').attr('aria-label',this.tt.turnOffDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOffDescriptions); - } - else { - this.$descButton.addClass('buttonOff').attr('aria-label',this.tt.turnOnDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOnDescriptions); - } + this.toggleButtonState( + this.$descButton, + this.descOn, + this.translate( 'turnOffDescriptions', 'Turn off descriptions' ), + this.translate( 'turnOnDescriptions', 'Turn on descriptions' ), + ); } } - if (context === 'captions' \|\| context == 'init'){ + if (context === 'captions' \|\| context == 'init') { if (this.$ccButton) { captionsCount = this.captions.length; - - // Button has a different title depending on the number of captions. - // If only one caption track, this is "Show captions" and "Hide captions" - // Otherwise, it is just always "Captions" - if (!this.captionsOn) { - this.$ccButton.addClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'false') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.showCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.showCaptions); - } - } - else { - this.$ccButton.removeClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'true') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.hideCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.hideCaptions); - } - } - if (captionsCount > 1) { this.$ccButton.attr({ - 'aria-label': this.tt.captions, 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-captions-menu' }); - this.$ccButton.find('span.able-clipped').text(this.tt.captions); } + var ariaLabelOn = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + var ariaPressed = ( captionsCount > 1 ) ? true : false; + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); } } if (context === 'fullscreen' \|\| context == 'init'){ if (this.$fullscreenButton) { if (!this.fullscreen) { - this.$fullscreenButton.attr('aria-label', this.tt.enterFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-collapse').addClass('icon-fullscreen-expand'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-expand'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenExpandButtonImg); - } - } - else { - this.$fullscreenButton.attr('aria-label',this.tt.exitFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-expand').addClass('icon-fullscreen-collapse'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-collapse'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenCollapseButtonImg); - } + this.$fullscreenButton.attr( 'aria-label', this.translate( 'enterFullScreen', 'Enter full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-expand' ); + } else { + this.$fullscreenButton.attr('aria-label', this.translate( 'exitFullScreen', 'Exit full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-collapse' ); } } } @@ -9366,18 +8177,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.hideBigPlayButton) { this.$bigPlayButton.show(); this.$bigPlayButton.attr('aria-hidden', 'false'); - - } - if (this.fullscreen) { - this.$bigPlayButton.width($(window).width()); - this.$bigPlayButton.height($(window).height()); } - else { - this.$bigPlayButton.width(this.$mediaContainer.width()); - this.$bigPlayButton.height(this.$mediaContainer.height()); - } - } - else { + } else { this.$bigPlayButton.hide(); this.$bigPlayButton.attr('aria-hidden', 'true'); } @@ -9391,8 +8192,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.prefAutoScrollTranscript === 1) { this.autoScrollTranscript = true; this.$autoScrollTranscriptCheckbox.prop('checked',true); - } - else { + } else { this.autoScrollTranscript = false; this.$autoScrollTranscriptCheckbox.prop('checked',false); } @@ -9410,8 +8210,8 @@ if (typeof module !== "undefined" && module.exports) { // only scroll once after moving a highlight if (this.movingHighlight) { this.$transcriptDiv.scrollTop(newTop); - this.movingHighlight = false; - } + this.movingHighlight = false; + } } } } @@ -9421,7 +8221,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$chaptersButton) { this.$chaptersButton.attr({ - 'aria-label': this.tt.chapters, + 'aria-label': this.translate( 'chapters', 'Chapters' ), 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-chapters-menu' }); @@ -9432,231 +8232,139 @@ if (typeof module !== "undefined" && module.exports) { // update status textByState = { - 'stopped': this.tt.statusStopped, - 'paused': this.tt.statusPaused, - 'playing': this.tt.statusPlaying, - 'buffering': this.tt.statusBuffering, - 'ended': this.tt.statusEnd + 'stopped': this.translate( 'statusStopped', 'Stopped' ), + 'paused': this.translate( 'statusPaused', 'Paused' ), + 'playing': this.translate( 'statusPlaying', 'Playing' ), + 'buffering': this.translate( 'statusBuffering', 'Buffering' ), + 'ended': this.translate( 'statusEnd', 'End of track' ) }; if (this.stoppingYouTube) { // stoppingYouTube is true temporarily while video is paused and seeking to 0 // See notes in handleRestart() // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) - if (this.$status.text() !== this.tt.statusStopped) { - this.$status.text(this.tt.statusStopped); - } - if (this.$playpauseButton.find('span').first().hasClass('icon-pause')) { - if (this.iconType === 'font') { - this.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('play'); - this.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - this.$playpauseButton.find('path').attr('d',newSvgData[1]); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else { - this.$playpauseButton.find('img').attr('src',this.playButtonImg); - } - } - } - else { - if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Update the text only if it's changed since it has role="alert"; - // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. - this.getPlayerState().then(function(currentState) { - if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { - // Debounce updates; only update after status has stayed steadily different for a while - // "A while" is defined differently depending on context - if (thisObj.swappingSrc) { - // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), - // so set a longer wait time before writing a status message - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) - } - } - else { - // for all other contexts (e.g., users clicks Play/Pause) - // user should receive more rapid feedback - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 250; // in ms - } - } - timestamp = (new Date()).getTime(); - if (!thisObj.statusDebounceStart) { - thisObj.statusDebounceStart = timestamp; - // Call refreshControls() again after allotted time has passed - thisObj.debouncingStatus = true; - thisObj.statusTimeout = setTimeout(function () { - thisObj.debouncingStatus = false; - thisObj.refreshControls(context); - }, thisObj.statusMessageThreshold); - } - else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { - thisObj.$status.text(textByState[currentState]); - thisObj.statusDebounceStart = null; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; + if (this.$status.text() !== this.translate( 'statusStopped', 'Stopped' ) ) { + this.$status.text( this.translate( 'statusStopped', 'Stopped' ) ); + } + this.getIcon( this.$playpauseButton, 'play' ); + } else if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { + // Update the text only if it's changed since it has role="alert"; + // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. + this.getPlayerState().then(function(currentState) { + if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { + // Debounce updates; only update after status has stayed steadily different for a while + // "A while" is defined differently depending on context + if (thisObj.swappingSrc) { + // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), + // so set a longer wait time before writing a status message + if (!thisObj.debouncingStatus) { + thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) } + } else if (!thisObj.debouncingStatus) { + // for all other contexts (e.g., users clicks Play/Pause) + // user should receive more rapid feedback + thisObj.statusMessageThreshold = 250; // in ms } - else { + timestamp = (new Date()).getTime(); + if (!thisObj.statusDebounceStart) { + thisObj.statusDebounceStart = timestamp; + // Call refreshControls() again after allotted time has passed + thisObj.debouncingStatus = true; + thisObj.statusTimeout = setTimeout(function () { + thisObj.debouncingStatus = false; + thisObj.refreshControls(context); + }, thisObj.statusMessageThreshold); + } else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { + thisObj.$status.text(textByState[currentState]); thisObj.statusDebounceStart = null; - thisObj.debouncingStatus = false; clearTimeout(thisObj.statusTimeout); thisObj.statusTimeout = null; } - // Don't change play/pause button display while using the seek bar (or if YouTube stopped) - if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { - if (currentState === 'paused' \|\| currentState === 'stopped' \|\| currentState === 'ended') { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('play'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.playButtonImg); - } - } - else { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-play').addClass('icon-pause'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('pause'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.pauseButtonImg); - } - } + } else { + thisObj.statusDebounceStart = null; + thisObj.debouncingStatus = false; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + // Don't change play/pause button display while using the seek bar (or if YouTube stopped) + if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { + if (currentState === 'paused' \|\| currentState === 'stopped' \|\| currentState === 'ended') { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); + thisObj.getIcon( thisObj.$playpauseButton, 'play' ); + } else { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); + thisObj.getIcon( thisObj.$playpauseButton, 'pause' ); } - }); - } + } + }); } } // Show/hide status bar content conditionally if (!this.fullscreen) { statusBarWidthBreakpoint = 300; - statusBarHeight = this.$statusBarDiv.height(); - speedHeight = this.$statusBarDiv.find('span.able-speed').height(); - if (speedHeight > (statusBarHeight + 5)) { - // speed bar is wrapping (happens often in German player) + if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { + // Player is too small for a speed span this.$statusBarDiv.find('span.able-speed').hide(); this.hidingSpeed = true; - } - else { + } else { if (this.hidingSpeed) { this.$statusBarDiv.find('span.able-speed').show(); this.hidingSpeed = false; } - if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { - // Player is too small for a speed span - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - } } } }; - AblePlayer.prototype.getHiddenWidth = function($el) { - - // jQuery returns for width() if element is hidden - // this function is a workaround - - // save a reference to a cloned element that can be measured - var $hiddenElement = $el.clone().appendTo('body'); - - // calculate the width of the clone - var width = $hiddenElement.outerWidth(); - - // remove the clone from the DOM - $hiddenElement.remove(); - - return width; - }; - AblePlayer.prototype.handlePlay = function(e) { - if (this.paused) { - // user clicked play - this.okToPlay = true; + // user clicked play + this.okToPlay = true; this.playMedia(); - if (this.synth.paused) { - // media was paused while description was speaking - // resume utterance - this.synth.resume(); + if (this.synth.paused) { + // media was paused while description was speaking + // resume utterance + this.synth.resume(); } - } - else { + } else { // user clicked pause - this.okToPlay = false; + this.okToPlay = false; this.pauseMedia(); - if (this.speakingDescription) { - // pause the current utterance - // it will resume when the user presses play - this.synth.pause(); + if (this.speakingDescription) { + // pause the current utterance + // it will resume when the user presses play + this.synth.pause(); } } - if (this.speechEnabled === null) { - this.initSpeech('play'); + if (this.speechEnabled === null) { + this.initSpeech('play'); } }; AblePlayer.prototype.handleRestart = function() { - if (this.speakingDescription) { - // cancel audio description - this.synth.cancel(); - } + if (this.speakingDescription) { + // cancel audio description + this.synth.cancel(); + } this.seekTo(0); }; AblePlayer.prototype.handlePrevTrack = function() { - if (this.playlistIndex === 0) { - // currently on the first track - // wrap to bottom and play the last track - this.playlistIndex = this.$playlist.length - 1; - } - else { - this.playlistIndex--; - } + // currently on the first track + // wrap to bottom and play the last track + this.playlistIndex = (this.playlistIndex === 0) ? this.$playlist.length - 1 : this.playlistIndex--; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; AblePlayer.prototype.handleNextTrack = function() { - if (this.playlistIndex === this.$playlist.length - 1) { - // currently on the last track - // wrap to top and play the forst track - this.playlistIndex = 0; - } - else { - this.playlistIndex++; - } + // currently on the last track + // wrap to top and play the forst track + this.playlistIndex = (this.playlistIndex === this.$playlist.length - 1) ? 0 : this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; @@ -9666,15 +8374,10 @@ if (typeof module !== "undefined" && module.exports) { var targetTime; targetTime = this.elapsed - this.seekInterval; - if (this.useChapterTimes) { - if (targetTime < this.currentChapter.start) { - targetTime = this.currentChapter.start; - } - } - else { - if (targetTime < 0) { - targetTime = 0; - } + if (this.useChapterTimes && (targetTime < this.currentChapter.start)) { + targetTime = this.currentChapter.start; + } else if (targetTime < 0) { + targetTime = 0; } this.seekTo(targetTime); }; @@ -9692,14 +8395,12 @@ if (typeof module !== "undefined" && module.exports) { // targetTime would exceed the end of the video (or chapter) // scrub to end of whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); - } - else if (this.duration % targetTime < this.seekInterval) { + } else if (this.duration % targetTime < this.seekInterval) { // nothing left but pocket change after seeking to targetTime // go ahead and seek to end of video (or chapter), whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); } - } - else { + } else { // this is not the last chapter if (targetTime > this.currentChapter.end) { // targetTime would exceed the end of the chapter @@ -9707,8 +8408,7 @@ if (typeof module !== "undefined" && module.exports) { targetTime = this.currentChapter.end; } } - } - else { + } else { // not using chapter times if (targetTime > this.duration) { targetTime = this.duration; @@ -9732,16 +8432,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.setPlaybackRate(this.getPlaybackRate() + (0.25 dir)); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { rates = this.youTubePlayer.getAvailablePlaybackRates(); currentRate = this.getPlaybackRate(); index = rates.indexOf(currentRate); if (index === -1) { console.log('ERROR: Youtube returning unknown playback rate ' + currentRate.toString()); - } - else { + } else { index += dir; // Can only increase or decrease rate if there's another rate available. if (index < rates.length && index >= 0) { @@ -9749,27 +8447,15 @@ if (typeof module !== "undefined" && module.exports) { } } } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // range is 0.5 to 2 // increase/decrease in inrements of 0.5 vimeoMin = 0.5; vimeoMax = 2; if (dir === 1) { - if (this.vimeoPlaybackRate + 0.5 <= vimeoMax) { - newRate = this.vimeoPlaybackRate + 0.5; - } - else { - newRate = vimeoMax; - } - } - else if (dir === -1) { - if (this.vimeoPlaybackRate - 0.5 >= vimeoMin) { - newRate = this.vimeoPlaybackRate - 0.5; - } - else { - newRate = vimeoMin; - } + newRate = (this.vimeoPlaybackRate + 0.5 <= vimeoMax) ? this.vimeoPlaybackRate + 0.5 : vimeoMax; + } else if (dir === -1) { + newRate = (this.vimeoPlaybackRate - 0.5 >= vimeoMin) ? this.vimeoPlaybackRate - 0.5 : vimeoMin; } this.setPlaybackRate(newRate); } @@ -9778,47 +8464,39 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handleCaptionToggle = function() { var thisObj = this; - var captions; + var captions, ariaPressed; if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup // immediately after closing it this.hidingPopup = false; return false; } - if (this.captions.length) { - captions = this.captions; - } - else { - captions = []; - } + + captions = (this.captions.length) ? this.captions : []; if (captions.length === 1) { // When there's only one set of captions, just do an on/off toggle. if (this.captionsOn === true) { // turn them off this.captionsOn = false; this.prefCaptions = 0; - this.$ccButton.attr('aria-pressed', 'false'); - this.updateCookie('prefCaptions'); + ariaPressed = false; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.unloadModule('captions'); - } - else if (this.usingVimeoCaptions) { - this.vimeoPlayer.disableTextTrack(); - } - else { + } else if (this.usingVimeoCaptions) { + this.vimeoPlayer.disableTextTrack(); + } else { this.$captionsWrapper.hide(); } - } - else { + } else { // captions are off. Turn them on. this.captionsOn = true; this.prefCaptions = 1; - this.$ccButton.attr('aria-pressed', 'true'); - this.updateCookie('prefCaptions'); + ariaPressed = true; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.loadModule('captions'); - } - else if (this.usingVimeoCaptions) { + } else if (this.usingVimeoCaptions) { this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' @@ -9838,9 +8516,8 @@ if (typeof module !== "undefined" && module.exports) { console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); break; } - }); - } - else { + }); + } else { this.$captionsWrapper.show(); } for (var i=0; i<captions.length; i++) { @@ -9853,9 +8530,7 @@ if (typeof module !== "undefined" && module.exports) { this.selectedDescriptions = this.descriptions[0]; } } - this.refreshControls('captions'); - } - else { + } else { // there is more than one caption track. // clicking on a track is handled via caption.js > getCaptionClickFunction() if (this.captionsPopup && this.captionsPopup.is(':visible')) { @@ -9863,8 +8538,7 @@ if (typeof module !== "undefined" && module.exports) { this.hidingPopup = false; this.$ccButton.attr('aria-expanded', 'false') this.waitThenFocus(this.$ccButton); - } - else { + } else { this.closePopups(); if (this.captionsPopup) { this.captionsPopup.show(); @@ -9876,17 +8550,27 @@ if (typeof module !== "undefined" && module.exports) { thisObj.captionsPopup.css('left', thisObj.$ccButton.position().left) // Place focus on the first button (even if another button is checked) thisObj.captionsPopup.find('li').removeClass('able-focus'); - thisObj.captionsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.captionsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } } } + var ariaLabelOn = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); }; /** * Gives enough time for DOM changes to take effect before adjusting focus. * Helpful for allowing screen reading of elements whose state is intermittently changed. - * + * * @param {} $el element to focus on @param {} timeout optional wait time in milliseconds before focus / @@ -9894,9 +8578,9 @@ if (typeof module !== "undefined" && module.exports) { // Default wait time of 50 ms var _timeout = (timeout === undefined \|\| timeout === null) ? 50 : timeout; - + setTimeout(function() { - $el.focus(); + $el.trigger('focus'); }, _timeout); } @@ -9910,9 +8594,8 @@ if (typeof module !== "undefined" && module.exports) { if (this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); this.hidingPopup = false; - this.$chaptersButton.attr('aria-expanded','false').focus(); - } - else { + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); + } else { this.closePopups(); this.chaptersPopup.show(); this.$chaptersButton.attr('aria-expanded','true'); @@ -9923,10 +8606,9 @@ if (typeof module !== "undefined" && module.exports) { // Otherwise, place focus on the first chapter this.chaptersPopup.find('li').removeClass('able-focus'); if (this.chaptersPopup.find('li[aria-checked="true"]').length) { - this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass('able-focus'); - } - else { - this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').focus(); + this.chaptersPopup.find('li[aria-checked="true"]').trigger('focus').addClass('able-focus'); + } else { + this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').trigger('focus'); } } }; @@ -9935,12 +8617,12 @@ if (typeof module !== "undefined" && module.exports) { this.descOn = !this.descOn; this.prefDesc = + this.descOn; // convert boolean to integer - this.updateCookie('prefDesc'); + this.updatePreferences('prefDesc'); if (typeof this.$descDiv !== 'undefined') { if (!this.$descDiv.is(':hidden')) { this.$descDiv.hide(); } - // NOTE: now showing $descDiv here if previously hidden + // NOTE: now showing $descDiv here if previously hidden // that's handled elsewhere, dependent on whether there's text to show } this.initDescription(); @@ -9962,8 +8644,8 @@ if (typeof module !== "undefined" && module.exports) { thisObj = this; - if (this.speechEnabled === null) { - this.initSpeech('prefs'); + if (this.speechEnabled === null) { + this.initSpeech('prefs'); } if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup @@ -9977,18 +8659,17 @@ if (typeof module !== "undefined" && module.exports) { // restore each menu item to original hidden state this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); + this.$prefsButton.trigger('focus'); } // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; },100); - } - else { + } else { this.closePopups(); this.prefsPopup.show(); this.$prefsButton.attr('aria-expanded','true'); - this.$prefsButton.focus(); // focus first on prefs button to announce expanded state + this.$prefsButton.trigger('focus'); // focus first on prefs button to announce expanded state // give time for focus on button then adjust popup settings and focus setTimeout(function() { prefsButtonPosition = thisObj.$prefsButton.position(); @@ -9998,115 +8679,88 @@ if (typeof module !== "undefined" && module.exports) { thisObj.prefsPopup.css('left', prefsMenuLeft); // remove prior focus and set focus on first item; also change tabindex from -1 to 0 thisObj.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','0'); - thisObj.prefsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.prefsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } }; - AblePlayer.prototype.handleHelpClick = function() { - this.setFullscreen(false); - this.helpDialog.show(); - }; - AblePlayer.prototype.handleTranscriptToggle = function () { - var thisObj = this; - - if (this.$transcriptDiv.is(':visible')) { + var visible = this.$transcriptDiv.is(':visible'); + if ( visible ) { this.$transcriptArea.hide(); - this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); this.prefTranscript = 0; - this.$transcriptButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms - // Setting timeout to 100ms is a virtual guarantee of proper functionality - setTimeout(function() { - thisObj.closingTranscript = false; - }, 100); - } - else { - this.positionDraggableWindow('transcript'); - this.$transcriptArea.show(); - // showing transcriptArea has a cascading effect of showing all content within transcriptArea - // need to re-hide the popup menu - this.$transcriptPopup.hide(); - this.$transcriptButton.removeClass('buttonOff').attr('aria-label',this.tt.hideTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.hideTranscript); - this.prefTranscript = 1; - // move focus to first focusable element (window options button) - this.focusNotClick = true; - this.$transcriptArea.find('button').first().focus(); - // wait briefly before resetting stopgap var - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefTranscript'); + if ( this.transcriptType === 'popup' ) { + this.$transcriptButton.trigger('focus').addClass('able-focus'); + // wait briefly before resetting stopgap var + // otherwise the keypress used to select 'Close' will trigger the transcript button + // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms + // Setting timeout to 100ms is a virtual guarantee of proper functionality + setTimeout(function() { + thisObj.closingTranscript = false; + }, 100); + } + } else { + if ( this.transcriptType === 'popup' ) { + this.positionDraggableWindow('transcript'); + this.$transcriptArea.show(); + // showing transcriptArea has a cascading effect of showing all content within transcriptArea + // need to re-hide the popup menu + this.$transcriptPopup.hide(); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.prefTranscript = 1; + // move focus to first focusable element (window options button) + this.focusNotClick = true; + this.$transcriptArea.find('button').first().trigger('focus'); + // wait briefly before resetting stopgap var + setTimeout(function() { + thisObj.focusNotClick = false; + }, 100); + } else { + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.$transcriptArea.show(); + } + } + this.updatePreferences('prefTranscript'); }; AblePlayer.prototype.handleSignToggle = function () { var thisObj = this; - - if (this.$signWindow.is(':visible')) { + var visible = this.$signWindow.is(':visible'); + if ( visible ) { this.$signWindow.hide(); - this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign); - this.$signButton.find('span.able-clipped').text(this.tt.showSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 0; - this.$signButton.focus().addClass('able-focus'); + this.$signButton.trigger('focus').addClass('able-focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.closingSign = false; }, 100); - } - else { + } else { this.positionDraggableWindow('sign'); this.$signWindow.show(); // showing signWindow has a cascading effect of showing all content within signWindow // need to re-hide the popup menu this.$signPopup.hide(); - this.$signButton.removeClass('buttonOff').attr('aria-label',this.tt.hideSign); - this.$signButton.find('span.able-clipped').text(this.tt.hideSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 1; this.focusNotClick = true; - this.$signWindow.find('button').first().focus(); + this.$signWindow.find('button').first().trigger('focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.focusNotClick = false; }, 100); } - this.updateCookie('prefSign'); + this.updatePreferences('prefSign'); }; - AblePlayer.prototype.isFullscreen = function () { - - // NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen, - // which is defined in setFullscreen() - // This function returns true if any element is fullscreen - // but doesn't tell us whether a particular element is in fullscreen - // (e.g., if there are multiple players on the page) - // The Boolean this.fullscreen is defined separately for each player instance - - if (this.nativeFullscreenSupported()) { - return (document.fullscreenElement \|\| - document.webkitFullscreenElement \|\| - document.webkitCurrentFullscreenElement \|\| - document.mozFullscreenElement \|\| - document.msFullscreenElement) ? true : false; - } - else { - return this.modalFullscreenActive ? true : false; - } - } - AblePlayer.prototype.setFullscreen = function (fullscreen) { if (this.fullscreen == fullscreen) { - // replace isFullscreen() with a Boolean. see function for explanation return; } var thisObj = this; @@ -10116,114 +8770,71 @@ if (typeof module !== "undefined" && module.exports) { if (this.nativeFullscreenSupported()) { // Note: many varying names for options for browser compatibility. if (fullscreen) { + var scroll = { + x: window.pageXOffset \|\| 0, + y: window.pageYOffset \|\| 0 + } + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.rePositionDraggableWindow("transcript"); + } + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.rePositionDraggableWindow("sign"); + } + this.scrollPosition = scroll; // Initialize fullscreen - if (el.requestFullscreen) { el.requestFullscreen(); - } - else if (el.webkitRequestFullscreen) { + } else if (el.webkitRequestFullscreen) { el.webkitRequestFullscreen(); } - else if (el.mozRequestFullscreen) { - el.mozRequestFullscreen(); - } - else if (el.msRequestFullscreen) { - el.msRequestFullscreen(); - } this.fullscreen = true; - } - else { + } else { // Exit fullscreen - this.restoringAfterFullscreen = true; + this.restoringAfterFullscreen = true; if (document.exitFullscreen) { document.exitFullscreen(); - } - else if (document.webkitExitFullscreen) { + } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); - } - else if (document.webkitCancelFullscreen) { + } else if (document.webkitCancelFullscreen) { document.webkitCancelFullscreen(); } - else if (document.mozCancelFullscreen) { - document.mozCancelFullscreen(); + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.positionDraggableWindow("transcript"); } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.positionDraggableWindow("sign"); } this.fullscreen = false; } + } else { + // Removed non-native fullscreen mode in 4.8, which only supported iOS. + // Native fullscreen is on iOS 18+ devices behind a feature flag + // The polyfill hasn't worked for years. } - else { - // Non-native fullscreen support through modal dialog. - // Create dialog on first run through. - if (!this.fullscreenDialog) { - var $dialogDiv = $('<div>'); - // create a hidden alert, communicated to screen readers via aria-describedby - var $fsDialogAlert = $('<p>',{ - 'class': 'able-screenreader-alert' - }).text(this.tt.fullscreen); // In English: "Full screen"; TODO: Add alert text that is more descriptive - $dialogDiv.append($fsDialogAlert); - // now render this as a dialog - this.fullscreenDialog = new AccessibleDialog($dialogDiv, this.$fullscreenButton, 'dialog', true, 'Fullscreen video player', $fsDialogAlert, this.tt.exitFullscreen, '100%', true, function () { thisObj.handleFullscreenToggle() }); - $('body').append($dialogDiv); - } - - // Track whether paused/playing before moving element; moving the element can stop playback. - var wasPaused = this.paused; - - if (fullscreen) { - this.modalFullscreenActive = true; - this.fullscreenDialog.show(); - - // Move player element into fullscreen dialog, then show. - // Put a placeholder element where player was. - this.$modalFullscreenPlaceholder = $('<div class="placeholder">'); - this.$modalFullscreenPlaceholder.insertAfter($el); - $el.appendTo(this.fullscreenDialog.modal); - - // Column left css is 50% by default; set to 100% for full screen. - if ($el === this.$ableColumnLeft) { - $el.width('100%'); - } - var newHeight = $(window).height() - this.$playerDiv.height(); - if (typeof this.$descDiv !== 'undefined') { - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - } - } - else { - this.modalFullscreenActive = false; - if ($el === this.$ableColumnLeft) { - $el.width('50%'); - } - $el.insertAfter(this.$modalFullscreenPlaceholder); - this.$modalFullscreenPlaceholder.remove(); - this.fullscreenDialog.hide(); - } - - // Resume playback if moving stopped it. - if (!wasPaused && this.paused) { - this.playMedia(); - } - } - // add event handlers for changes in fullscreen mode. - // Browsers natively trigger this event with the Escape key, - // in addition to clicking the exit fullscreen button - $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(e) { + // add event handlers for changes in fullscreen mode. + // Browsers natively trigger this event with the Escape key, + // in addition to clicking the exit fullscreen button + $(document).on('fullscreenchange webkitfullscreenchange', function(e) { // NOTE: e.type = the specific event that fired (in case needing to control for browser-specific idiosyncrasies) if (!thisObj.fullscreen) { // user has just exited full screen thisObj.restoringAfterFullscreen = true; - } - else if (!thisObj.clickedFullscreenButton) { + } else if (!thisObj.clickedFullscreenButton) { // user triggered fullscreenchange without clicking fullscreen button thisObj.fullscreen = false; thisObj.restoringAfterFullscreen = true; } thisObj.resizePlayer(); thisObj.refreshControls('fullscreen'); - + // Reset scrollPosition after closing fullscreen. + if ( thisObj.scrollPosition ) { + scroll = thisObj.scrollPosition; + window.scrollTo( scroll.x, scroll.y ); + } // NOTE: The fullscreenchange (or browser-equivalent) event is triggered twice // when exiting fullscreen via the "Exit fullscreen" button (only once if using Escape) // Not sure why, but consequently we need to be sure thisObj.clickedFullscreenButton @@ -10233,9 +8844,9 @@ if (typeof module !== "undefined" && module.exports) { // resetting clickedFullscreenButton after a timeout seems to be better approach setTimeout(function() { thisObj.clickedFullscreenButton = false; - thisObj.restoringAfterFullscreen = false; - },1000); - }); + thisObj.restoringAfterFullscreen = false; + },100); + }); }; AblePlayer.prototype.handleFullscreenToggle = function () { @@ -10244,8 +8855,7 @@ if (typeof module !== "undefined" && module.exports) { this.setFullscreen(!this.fullscreen); if (stillPaused) { this.pauseMedia(); // when toggling fullscreen and media is just paused, keep media paused. - } - else if (!stillPaused) { + } else if (!stillPaused) { this.playMedia(); // when toggling fullscreen and media is playing, continue playing. } // automatically hide controller in fullscreen mode @@ -10257,8 +8867,7 @@ if (typeof module !== "undefined" && module.exports) { this.fadeControls('out'); this.controlsHidden = true; } - } - else { + } else { // exit fullscreen mode this.hideControls = this.hideControlsOriginal; if (!this.hideControls) { // do not hide controls @@ -10273,89 +8882,132 @@ if (typeof module !== "undefined" && module.exports) { } } } - // don't resizePlayer yet; that will be called in response to the window resize event - // this.resizePlayer(); + // don't resizePlayer yet; that will be called in response to the window resize event }; AblePlayer.prototype.handleTranscriptLockToggle = function (val) { this.autoScrollTranscript = val; // val is boolean this.prefAutoScrollTranscript = +val; // convert boolean to numeric 1 or 0 for cookie - this.updateCookie('prefAutoScrollTranscript'); + this.updatePreferences('prefAutoScrollTranscript'); this.refreshControls('transcript'); }; + AblePlayer.prototype.getIcon = function( $button, id, forceImg = false ) { + // Remove existing HTML before generating. + // iconData: [0 = svg viewbox, 1 = svg path, 2 = icon font class, 3 = image file] + var iconType = this.iconType; + var iconData = this.getIconData( id ); + iconType = ( null === iconData[3] ) ? 'svg' : iconType; + iconType = ( forceImg === true ) ? 'img' : iconType; - AblePlayer.prototype.showTooltip = function($tooltip) { + var existingIcon = $button.find( iconType + '#ableplayer-' + id ); + // Avoid repainting icon if there's no change. + if ( existingIcon.length > 0 ) { + return; + } + $button.find('svg, img, span').remove(); - if (($tooltip).is(':animated')) { - $tooltip.stop(true,true).show(); + if (iconType === 'font') { + var $buttonIcon = $('<span>', { + 'class': iconData[2], + }); + $button.append( $buttonIcon ); + } else if (iconType === 'svg') { + // Function to create SVG nodes. + function getNode(n, v) { + n = document.createElementNS("http://www.w3.org/2000/svg", n); + for (var p in v) { + n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m) { + return "-" + m.toLowerCase(); + }), v[p]); + } + return n; + } + var icon = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ); + icon.setAttribute( 'focusable', 'false' ); + icon.setAttribute( 'aria-hidden', 'true'); + icon.setAttribute( 'viewBox', iconData[0] ); + icon.setAttribute( 'id', 'ableplayer-' + id ); + let path = getNode( 'path', { d: iconData[1] } ); + icon.appendChild( path ); + + $button.append( icon ); + // Refresh the DOM. + $button.html($button.html()); + } else { + var $buttonImg = $('<img>',{ + 'src': iconData[3], + 'alt': '', + 'role': 'presentation' + }); + $button.append($buttonImg); + $button.find('img').attr('src',iconData[3]); } - else { - $tooltip.stop().show(); + }; + + AblePlayer.prototype.setText = function( $button, text ) { + $button.attr( 'aria-label', text ); + }; + + AblePlayer.prototype.toggleButtonState = function($button, isOn, onLabel, offLabel, ariaPressed = false, ariaExpanded = false) { + // isOn means "the feature is being turned on". + let buttonOff = ( $button.hasClass( 'buttonOff' ) ) ? true : false; + if ( buttonOff && ! isOn \|\| ! buttonOff && isOn ) { + // Only toggle state if button state does not match feature state. + return; } + if (! isOn) { + $button.addClass('buttonOff').attr('aria-label', offLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'false'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'false' ); + } + } else { + $button.removeClass('buttonOff').attr('aria-label', onLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'true'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'true' ); + } + } + }; + + AblePlayer.prototype.showTooltip = function($tooltip) { + + $tooltip.show(); }; - AblePlayer.prototype.showAlert = function( msg, location ) { + AblePlayer.prototype.showAlert = function( msg, location = 'main' ) { // location is either of the following: // 'main' (default) // 'screenreader (visibly hidden) // 'sign' (sign language window) - // 'transcript' (trasncript window) - var thisObj, $alertBox, $parentWindow, alertLeft, alertTop; + // 'transcript' (transcript window) + var thisObj, $alertBox, $parentWindow; thisObj = this; - + $alertBox = thisObj.$alertBox; + $parentWindow = thisObj.$ableDiv; if (location === 'transcript') { - $alertBox = this.$transcriptAlert; - $parentWindow = this.$transcriptArea; - } - else if (location === 'sign') { - $alertBox = this.$signAlert; - $parentWindow = this.$signWindow; - } - else if (location === 'screenreader') { - $alertBox = this.$srAlertBox; - } - else { - $alertBox = this.$alertBox; - } - $alertBox.text(msg).show(); - if (location == 'transcript' \|\| location === 'sign') { - if ($parentWindow.width() > $alertBox.width()) { - alertLeft = $parentWindow.width() / 2 - $alertBox.width() / 2; - } - else { - // alert box is wider than its container. Position it far left and let it wrap - alertLeft = 10; - } - if (location === 'sign') { - // position alert in the lower third of the sign window (to avoid covering the signer) - alertTop = ($parentWindow.height() / 3) * 2; - } - else if (location === 'transcript') { - // position alert just beneath the toolbar to avoid getting lost among transcript text - alertTop = this.$transcriptToolbar.height() + 30; - } - $alertBox.css({ - top: alertTop + 'px', - left: alertLeft + 'px' - }); - } - else if (location !== 'screenreader') { - // The original formula incorporated offset() into the calculation - // but at some point this began resulting in an alert that's off-centered - // Changed in v2.2.17, but here's the original for reference in case needed: - // left: this.$playerDiv.offset().left + (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - $alertBox.css({ - left: (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - }); + $parentWindow = thisObj.$transcriptArea; + } else if (location === 'sign') { + $parentWindow = thisObj.$signWindow; + } else if (location === 'screenreader') { + $alertBox = thisObj.$srAlertBox; } + $alertBox.find('span').text(msg); + $alertBox.appendTo($parentWindow) + $alertBox.css( {'display': 'flex'} ); + if (location !== 'screenreader') { - setTimeout(function () { - $alertBox.fadeOut(300); - }, 3000); + setTimeout( function () { + $alertBox.hide(); + }, 30000 ); } }; @@ -10364,22 +9016,10 @@ if (typeof module !== "undefined" && module.exports) { // returns true if the target alert has already been shown // useful for throttling alerts that only need to be shown once // e.g., move alerts with instructions for dragging a window - if (which === 'transcript') { - if (this.showedTranscriptAlert) { - return true; - } - else { - return false; - } - } - else if (which === 'sign') { - if (this.showedSignAlert) { - return true; - } - else { - return false; - } + return this.showedTranscriptAlert ?? false; + } else if (which === 'sign') { + return this.showedSignAlert ?? false; } return false; } @@ -10387,105 +9027,82 @@ if (typeof module !== "undefined" && module.exports) { // Resizes all relevant player attributes. AblePlayer.prototype.resizePlayer = function (width, height) { - var captionSizeOkMin, captionSizeOkMax, captionSize, newCaptionSize, newLineHeight; - - var newWidth, newHeight, $iframe, alertTop; + var captionSize, newWidth, newHeight, $iframe; - if (this.mediaType === 'audio') { - return; + if (this.mediaType === 'audio') { + return; } - - if (typeof width !== 'undefined' && typeof height !== 'undefined') { - // this is being called the first time a player is initialized + if (typeof width !== 'undefined' && typeof height !== 'undefined') { + // this is being called the first time a player is initialized // width and height were collected from the HTML, YouTube, or Vimeo media API - // so are reflective of the actual size of the media - // use these values to calculate aspectRatio - this.aspectRatio = height / width; - if (this.playerWidth) { - // default width is already defined via a width or data-width attribute. Use that. - newWidth = this.playerWidth; - if (this.playerHeight) { - newHeight = this.playerHeight; - } - else { - newHeight = Math.round(newWidth * this.aspectRatio); - this.playerHeight = newHeight; - } - } - else { - // playerWidth was not defined via HTML attributes - if (this.player === 'html5') { - newWidth = $(window).width(); - } - else { - newWidth = this.$ableWrapper.width(); - } - newHeight = Math.round(newWidth * this.aspectRatio); - } - } - else if (this.fullscreen) { - this.$ableWrapper.addClass('fullscreen'); - newWidth = $(window).width(); + // so are reflective of the actual size of the media + // use these values to calculate aspectRatio + this.aspectRatio = height / width; + if (this.playerWidth) { + // default width is already defined via a width or data-width attribute. Use that. + newWidth = this.playerWidth; + if (this.playerHeight) { + newHeight = this.playerHeight; + } else { + newHeight = Math.round(newWidth * this.aspectRatio); + this.playerHeight = newHeight; + } + } else { + // playerWidth was not defined via HTML attributes + newWidth = (this.player === 'html5') ? $(window).width() : this.$ableWrapper.width(); + newHeight = Math.round(newWidth * this.aspectRatio); + } + } else if (this.fullscreen) { + this.$ableWrapper.addClass('fullscreen'); + newWidth = $(window).width(); // the 5 pixel buffer is arbitrary, but results in a better fit for all browsers - newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; + newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; this.positionCaptions('overlay'); - } - else { // not fullscreen, and not first time initializing player + } else { // not fullscreen, and not first time initializing player this.$ableWrapper.removeClass('fullscreen'); - if (this.player === 'html5') { - if (this.playerWidth) { - newWidth = this.playerWidth; - } - else { - // use full size of window - // player will be downsized to fit container if CSS requires it - newWidth = $(window).width(); - } - } - else { - newWidth = this.$ableWrapper.width(); + if (this.player === 'html5') { + newWidth = (this.playerWidth) ? this.playerWidth : $(window).width(); + } else { + newWidth = this.$ableWrapper.width(); } - newHeight = Math.round(newWidth * this.aspectRatio); - this.positionCaptions(this.prefCaptionsPosition); + newHeight = Math.round(newWidth * this.aspectRatio); + this.positionCaptions(this.prefCaptionsPosition); } if (this.debug) { - console.log('resizePlayer to ' + newWidth + 'x' + newHeight); + console.log('resizePlayer to ' + newWidth + 'x' + newHeight); } // Now size the player with newWidth and newHeight - if (this.player === 'youtube' \|\| this.player === 'vimeo') { - $iframe = this.$ableWrapper.find('iframe'); - if (this.player === 'youtube' && this.youTubePlayer) { - // alternatively, YouTube API offers a method for setting the video size - // this adds width and height attributes to the iframe - // but might have other effects, so best to do it this way - this.youTubePlayer.setSize(newWidth,newHeight); - } - else { - // Vimeo API does not have a method for changing size of player - // Therefore, need to change iframe attributes directly + if (this.player === 'youtube' \|\| this.player === 'vimeo') { + $iframe = this.$ableWrapper.find('iframe'); + if (this.player === 'youtube' && this.youTubePlayer) { + // alternatively, YouTube API offers a method for setting the video size + // this adds width and height attributes to the iframe + // but might have other effects, so best to do it this way + this.youTubePlayer.setSize(newWidth,newHeight); + } else { + // Vimeo API does not have a method for changing size of player + // Therefore, need to change iframe attributes directly $iframe.attr({ 'width': newWidth, 'height': newHeight - }); + }); } - if (this.playerWidth && this.playerHeight) { - if (this.fullscreen) { - // remove constraints - $iframe.css({ + if (this.playerWidth && this.playerHeight) { + if (this.fullscreen) { + // remove constraints + $iframe.css({ 'max-width': '', 'max-height': '' - }); - } - else { + }); + } else { // use CSS on iframe to enforce explicitly defined size constraints - $iframe.css({ + $iframe.css({ 'max-width': this.playerWidth + 'px', 'max-height': this.playerHeight + 'px' }); } } - } - else if (this.player === 'html5') { + } else if (this.player === 'html5') { if (this.fullscreen) { this.$media.attr({ 'width': newWidth, @@ -10495,46 +9112,37 @@ if (typeof module !== "undefined" && module.exports) { 'width': newWidth, 'height': newHeight }); - } - else { - // No constraints. Let CSS handle the positioning. + } else { + // No constraints. Let CSS handle the positioning. this.$media.removeAttr('width height'); - this.$ableWrapper.css({ - 'width': newWidth + 'px', - 'height': 'auto' - }); - } + this.$ableWrapper.removeAttr( 'style' ); + } } // Resize captions if (typeof this.$captionsDiv !== 'undefined') { - // Font-size is too small in full screen view - // use viewport units (vw) instead - // % units work fine if not fullscreen - // prefCaptionSize is expressed as a percentage - captionSize = parseInt(this.prefCaptionsSize,10); - if (this.fullscreen) { - captionSize = (captionSize / 100) + 'vw'; + // Font-size is too small in full screen view + // use viewport units (vw) for large viewports + // % units work fine if not fullscreen + // prefCaptionSize is expressed as a percentage + var isSmallScreen = false; + var windowWidth = window.screen.width; + if ( windowWidth < 1200 ) { + isSmallScreen = true; } - else { - captionSize = captionSize + '%'; + captionSize = parseInt(this.prefCaptionsSize,10); + if (this.fullscreen && ! isSmallScreen ) { + captionSize = (captionSize / 100) + 'vw'; + } else if ( this.fullscreen && isSmallScreen ) { + captionSize = '1.2rem'; + } else { + captionSize = captionSize + '%'; } this.$captionsDiv.css({ 'font-size': captionSize }); } - - // Reposition alert message (video player only) - // just below the vertical center of the mediaContainer - // hopefully above captions, but not too far from the controller bar - if (this.mediaType === 'video') { - alertTop = Math.round(this.$mediaContainer.height() / 3) * 2; - this.$alertBox.css({ - top: alertTop + 'px' - }); - } - - this.refreshControls(); + this.refreshControls(); }; AblePlayer.prototype.retrieveOffscreenWindow = function( which, width, height ) { @@ -10547,8 +9155,7 @@ if (typeof module !== "undefined" && module.exports) { if (which == 'transcript') { window = this.$transcriptArea; - } - else if (which == 'sign') { + } else if (which == 'sign') { window = this.$signWindow; } windowWidth = window.width(); @@ -10577,41 +9184,18 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.getHighestZIndex = function() { - - // returns the highest z-index on page - // used to ensure dialogs (or potentially other windows) are on top - - var max, $elements, z; - max = 0; - - // exclude the Able Player dialogs and windows - $elements = $('body ').not('.able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area'); - - $elements.each(function(){ - z = $(this).css('z-index'); - if (Number.isInteger(+z)) { // work only with integer values, not 'auto' - if (parseInt(z) > max) { - max = parseInt(z); - } - } - }); - return max; - }; - AblePlayer.prototype.updateZIndex = function(which) { // update z-index of 'transcript' or 'sign', relative to each other // direction is always 'up' (i.e., move window to top) // windows come to the top when the user clicks on them - var defHighZ, defLowZ, highestZ, transcriptZ, signZ, newHighZ, newLowZ; + var defHighZ, defLowZ, transcriptZ, signZ, newHighZ, newLowZ; // set the default z-indexes, as defined in ableplayer.css defHighZ = 8000; // by default, assigned to the sign window defLowZ = 7000; // by default, assigned to the transcript area - highestZ = this.getHighestZIndex(); // highest z-index on the page, excluding Able Player windows & modals - // NOTE: Although highestZ is collected here, it currently isn't used. + // Previously collected the highest z-index. Removed in 4.6. // If something on the page has a higher z-index than the transcript or sign window, do we care? // Excluding it here assumes "No". Our immediate concern is with the relationship between our own components. // If we elevate our z-indexes so our content is on top, we run the risk of starting a z-index war. @@ -10625,8 +9209,7 @@ if (typeof module !== "undefined" && module.exports) { // restore to the default this.$transcriptArea.css('z-index',defLowZ); } - } - else if (typeof this.$signWindow !== 'undefined') { + } else if (typeof this.$signWindow !== 'undefined') { signZ = parseInt(this.$signWindow.css('z-index')); if (signZ > defHighZ) { // restore to the default @@ -10646,24 +9229,20 @@ if (typeof module !== "undefined" && module.exports) { // the two windows are equal; restore defaults (the target window will be on top) newHighZ = defHighZ; newLowZ = defLowZ; - } - else if (transcriptZ > signZ) { + } else if (transcriptZ > signZ) { if (which === 'transcript') { // transcript is already on top; nothing to do return false; - } - else { + } else { // swap z's newHighZ = transcriptZ; newLowZ = signZ; } - } - else { // signZ is greater + } else { // signZ is greater if (which === 'sign') { // sign is already on top; nothing to do return false; - } - else { + } else { newHighZ = signZ; newLowZ = transcriptZ; } @@ -10672,8 +9251,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { this.$transcriptArea.css('z-index',newHighZ); this.$signWindow.css('z-index',newLowZ); - } - else if (which === 'sign') { + } else if (which === 'sign') { this.$signWindow.css('z-index',newHighZ); this.$transcriptArea.css('z-index',newLowZ); } @@ -10690,7 +9268,7 @@ if (typeof module !== "undefined" && module.exports) { // This was a group decision based on the belief that users may want a transcript // that is in a different language than the captions - var i, captions, descriptions, chapters, meta, langHasChanged; + var i, captions, descriptions, chapters, meta; // Captions for (i = 0; i < this.captions.length; i++) { @@ -10732,21 +9310,20 @@ if (typeof module !== "undefined" && module.exports) { // chapters popup is setup automatically when setupPopups() is called later with no param // not sure why it was included here. // this.setupPopups('chapters'); - } - else if (source === 'transcript') { + } else if (source === 'transcript') { this.transcriptCaptions = captions; this.transcriptChapters = chapters; this.transcriptDescriptions = descriptions; } if (this.selectedDescriptions) { - // updating description voice to match new description language - this.setDescriptionVoice(); - if (this.$sampleDescDiv) { - if (this.sampleText) { - for (i = 0; i < this.sampleText.length; i++) { - if (this.sampleText[i].lang === this.selectedDescriptions.language) { - this.currentSampleText = this.sampleText[i]['text']; - this.$sampleDescDiv.html(this.currentSampleText); + // updating description voice to match new description language + this.setDescriptionVoice(); + if (this.$sampleDescDiv) { + if (this.sampleText) { + for (i = 0; i < this.sampleText.length; i++) { + if (this.sampleText[i].lang === this.selectedDescriptions.language) { + this.currentSampleText = this.sampleText[i]['text']; + this.$sampleDescDiv.html(this.currentSampleText); } } } @@ -10892,7 +9469,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 1; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); thisObj.refreshControls("captions"); }; }; @@ -10928,7 +9505,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 0; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); if (!this.swappingSrc) { thisObj.refreshControls("captions"); thisObj.updateCaption(); @@ -10955,10 +9532,7 @@ if (typeof module !== "undefined" && module.exports) { if (typeof thisCaption !== "undefined") { if (this.currentCaption !== thisCaption) { // it's time to load the new caption into the container div - captionText = this.flattenCueForCaption(cues[thisCaption]).replace( - /\n/g, - "<br>" - ); + captionText = this.flattenCueForCaption(cues[thisCaption]).replace( /\n/g, "<br>" ); this.$captionsDiv.html(captionText); this.currentCaption = thisCaption; @@ -11040,24 +9614,24 @@ if (typeof module !== "undefined" && module.exports) { switch (pref) { case "prefCaptionsFont": - options[0] = ["serif", this.tt.serif]; - options[1] = ["sans-serif", this.tt.sans]; - options[2] = ["cursive", this.tt.cursive]; - options[3] = ["fantasy", this.tt.fantasy]; - options[4] = ["monospace", this.tt.monospace]; + options[0] = ["serif", this.translate( 'serif', 'serif' )]; + options[1] = ["sans-serif", this.translate( 'sans', 'sans-serif' )]; + options[2] = ["cursive", this.translate( 'cursive', 'cursive' )]; + options[3] = ["fantasy", this.translate( 'fantasy', 'fantasy' )]; + options[4] = ["monospace", this.translate( 'monospace', 'monospace' )]; break; case "prefCaptionsColor": case "prefCaptionsBGColor": // HTML color values must be in English - options[0] = ["white", this.tt.white]; - options[1] = ["yellow", this.tt.yellow]; - options[2] = ["green", this.tt.green]; - options[3] = ["cyan", this.tt.cyan]; - options[4] = ["blue", this.tt.blue]; - options[5] = ["magenta", this.tt.magenta]; - options[6] = ["red", this.tt.red]; - options[7] = ["black", this.tt.black]; + options[0] = ["white", this.translate( 'white', 'white' )]; + options[1] = ["yellow", this.translate( 'yellow', 'yellow' )]; + options[2] = ["green", this.translate( 'green', 'green' )]; + options[3] = ["cyan", this.translate( 'cyan', 'cyan' )]; + options[4] = ["blue", this.translate( 'blue', 'blue' )]; + options[5] = ["magenta", this.translate( 'magenta', 'magenta' )]; + options[6] = ["red", this.translate( 'red', 'red' )]; + options[7] = ["black", this.translate( 'black', 'black' )]; break; case "prefCaptionsSize": @@ -11077,8 +9651,8 @@ if (typeof module !== "undefined" && module.exports) { break; case "prefCaptionsStyle": - options[0] = this.tt.captionsStylePopOn; - options[1] = this.tt.captionsStyleRollUp; + options[0] = this.translate( 'captionsStylePopOn', 'Pop-on' ); + options[1] = this.translate( 'captionsStyleRollUp', 'Roll-up' ); break; case "prefCaptionsPosition": @@ -11116,7 +9690,7 @@ if (typeof module !== "undefined" && module.exports) { // this function handles stylizing of the sample caption text in the Prefs dialog // plus the actual production captions // TODO: consider applying the same user prefs to visible text-based description - var property, newValue, opacity, lineHeight; + var property, newValue, opacity; if (typeof $element !== "undefined") { if (pref == "prefCaptionsPosition") { @@ -11212,16 +9786,17 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.populateChaptersDiv = function() { - var headingLevel, headingType, headingId, $chaptersHeading, - $chaptersList; - + var headingLevel, headingType, headingId, $chaptersHeading; + if ( ! this.chaptersDivLocation ) { + return; + } if ($('#' + this.chaptersDivLocation)) { this.$chaptersDiv = $('#' + this.chaptersDivLocation); this.$chaptersDiv.addClass('able-chapters-div'); // empty content from previous build before starting fresh - this.$chaptersDiv.empty(); + this.$chaptersDiv.empty(); // add optional header if (this.chaptersTitle) { @@ -11237,10 +9812,9 @@ if (typeof module !== "undefined" && module.exports) { this.$chaptersNav = $('<nav>'); if (this.chaptersTitle) { - this.$chaptersNav.attr('aria-labelledby',headingId); - } - else { - this.$chaptersNav.attr('aria-label',this.tt.chapters); + this.$chaptersNav.attr( 'aria-labelledby', headingId ); + } else { + this.$chaptersNav.attr( 'aria-label', this.translate( 'chapters', 'Chapters' ) ); } this.$chaptersDiv.append(this.$chaptersNav); @@ -11252,32 +9826,25 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.updateChaptersList = function() { var thisObj, cues, $chaptersList, c, thisChapter, - $chapterItem, $chapterButton, buttonId, hasDefault, - getClickFunction, $clickedItem, $chaptersList, thisChapterIndex; + $chapterItem, $chapterButton, hasDefault, + getClickFunction, $clickedItem, $chaptersList; thisObj = this; - // TODO: Update this so it can change the chapters popup menu + // TODO: Update this so it can change the chapters popup menu // currently it only works if chapters are in an external container if (!this.$chaptersNav) { return false; } if (typeof this.useChapterTimes === 'undefined') { - if (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) { - this.useChapterTimes = true; - } - else { - this.useChapterTimes = false; - } + this.useChapterTimes = (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) ? true : false; } if (this.useChapterTimes) { cues = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { cues = this.chapters[0].cues; - } - else { + } else { cues = []; } if (cues.length > 0) { @@ -11296,7 +9863,6 @@ if (typeof module !== "undefined" && module.exports) { thisObj.seekTrigger = 'chapter'; $clickedItem = $(this).closest('li'); $chaptersList = $(this).closest('ul').find('li'); - thisChapterIndex = $chaptersList.index($clickedItem); $chaptersList.removeClass('able-current-chapter') .children('button').removeAttr('aria-current'); $clickedItem.addClass('able-current-chapter') @@ -11365,7 +9931,7 @@ if (typeof module !== "undefined" && module.exports) { return; } - var chapters, i, thisChapterIndex, chapterLabel; + var chapters, i, thisChapterIndex; chapters = this.selectedChapters.cues; for (i = 0; i < chapters.length; i++) { @@ -11415,12 +9981,10 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends, adjust chapter end to match video end chapterEnd = this.duration; this.currentChapter.end = this.duration; - } - else { + } else { chapterEnd = this.currentChapter.end; } - } - else { // this is not the last chapter + } else { // this is not the last chapter chapterEnd = this.currentChapter.end; } return chapterEnd - this.currentChapter.start; @@ -11436,8 +10000,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.elapsed > this.currentChapter.start) { return this.elapsed - this.currentChapter.start; - } - else { + } else { return 0; } }; @@ -11450,12 +10013,10 @@ if (typeof module !== "undefined" && module.exports) { var newTime = this.currentChapter.start + chapterTime; if (newTime > this.currentChapter.end) { return this.currentChapter.end; - } - else { + } else { return newTime; } - } - else { + } else { return chapterTime; } }; @@ -11476,7 +10037,7 @@ if (typeof module !== "undefined" && module.exports) { setTimeout(function() { thisObj.hidingPopup = false; }, 100); - thisObj.$chaptersButton.focus(); + thisObj.$chaptersButton.trigger('focus'); } }; @@ -11530,7 +10091,7 @@ if (typeof module !== "undefined" && module.exports) { cueText = this.flattenCueForMeta(cues[thisMeta]); cueLines = cueText.split("\n"); for (i = 0; i < cueLines.length; i++) { - line = $.trim(cueLines[i]); + line = cueLines[i].trim(); if (line.toLowerCase().trim() === "pause") { // don't show big play button when pausing via metadata this.hideBigPlayButton = true; @@ -11538,7 +10099,7 @@ if (typeof module !== "undefined" && module.exports) { } else if (line.toLowerCase().substring(0, 6) == "focus:") { focusTarget = line.substring(6).trim(); if ($(focusTarget).length) { - $(focusTarget).focus(); + $(focusTarget).trigger('focus'); } } else { if ($(line).length) { @@ -11549,7 +10110,11 @@ if (typeof module !== "undefined" && module.exports) { typeof showDuration !== "undefined" && !isNaN(showDuration) ) { - $(line).show().delay(showDuration).fadeOut(); + $(line).show(); + const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + delay(showDuration).then(() => { + $(line).hide(); + }); } else { // no duration specified. Just show the element until end time specified in VTT file $(line).show(); @@ -11621,11 +10186,11 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.setupTranscript = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - if (this.usingYouTubeCaptions \|\| this.usingVimeoCaptions) { - // a transcript is not possible + if (this.usingYouTubeCaptions \|\| this.usingVimeoCaptions \|\| this.hideTranscriptButton ) { + // a transcript is not possible or is disabled. this.transcriptType = null; deferred.resolve(); } else { @@ -11640,10 +10205,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (this.transcriptType) { - if ( - this.transcriptType === "popup" \|\| - this.transcriptType === "external" - ) { + if ( this.transcriptType === "popup" \|\| this.transcriptType === "external" ) { this.injectTranscriptArea(); deferred.resolve(); } else if (this.transcriptType === "manual") { @@ -11670,7 +10232,7 @@ if (typeof module !== "undefined" && module.exports) { this.$transcriptArea = $("<div>", { class: "able-transcript-area", role: "dialog", - "aria-label": this.tt.transcriptTitle, + "aria-label": this.translate( 'transcriptTitle', 'Transcript' ), }); this.$transcriptToolbar = $("<div>", { @@ -11690,11 +10252,15 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); - this.$transcriptToolbar.append( - $autoScrollLabel, - this.$autoScrollTranscriptCheckbox - ); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); + $autoScrollContainer = $( '<div>', { + 'class': 'autoscroll-transcript' + }); + $autoScrollContainer.append( + $autoScrollLabel, + this.$autoScrollTranscriptCheckbox + ); + this.$transcriptToolbar.append( $autoScrollContainer ); // Add field for selecting a transcript language // Only necessary if there is more than one language @@ -11704,7 +10270,7 @@ if (typeof module !== "undefined" && module.exports) { }); $languageSelectLabel = $("<label>", { for: "transcript-language-select-" + this.mediaId, - }).text(this.tt.language); + }).text( this.translate( 'language', 'Language' ) ); this.$transcriptLanguageSelect = $("<select>", { id: "transcript-language-select-" + this.mediaId, }); @@ -11731,6 +10297,8 @@ if (typeof module !== "undefined" && module.exports) { // If client has provided separate transcript location, put it there. // Otherwise append it to the body if (this.transcriptDivLocation) { + this.$transcriptArea.removeAttr( 'role' ); + this.$transcriptArea.removeAttr( 'aria-label' ); $("#" + this.transcriptDivLocation).append(this.$transcriptArea); } else { this.$ableWrapper.append(this.$transcriptArea); @@ -11757,7 +10325,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addTranscriptAreaEvents = function () { var thisObj = this; - this.$autoScrollTranscriptCheckbox.click(function () { + this.$autoScrollTranscriptCheckbox.on( 'click', function () { thisObj.handleTranscriptLockToggle( thisObj.$autoScrollTranscriptCheckbox.prop("checked") ); @@ -11777,7 +10345,7 @@ if (typeof module !== "undefined" && module.exports) { ); if (typeof this.$transcriptLanguageSelect !== "undefined") { - this.$transcriptLanguageSelect.on("click mousedown", function (e) { + this.$transcriptLanguageSelect.on('click', function (e) { // execute default behavior // prevent propagation of mouse event to toolbar or window e.stopPropagation(); @@ -11827,7 +10395,7 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); // Add an auto-scroll checkbox to the toolbar. this.$autoScrollTranscriptCheckbox = $autoScrollInput; @@ -11928,7 +10496,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$transcriptArea.length > 0) { this.$transcriptArea .find("span.able-transcript-seekpoint") - .click(function (e) { + .on( 'click', function (e) { thisObj.seekTrigger = "transcript"; var spanStart = parseFloat($(this).attr("data-start")); // Add a tiny amount so that we're inside the span. @@ -12007,9 +10575,9 @@ if (typeof module !== "undefined" && module.exports) { if (typeof this.transcriptTitle !== "undefined") { transcriptTitle = this.transcriptTitle; } else if (this.lyricsMode) { - transcriptTitle = this.tt.lyricsTitle; + transcriptTitle = this.translate( 'lyricsTitle', 'Lyrics' ); } else { - transcriptTitle = this.tt.transcriptTitle; + transcriptTitle = this.translate( 'transcriptTitle', 'Transcript' ); } if (!this.transcriptDivLocation) { @@ -12232,7 +10800,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (comp.type === "b" \|\| comp.type == "i") { - result.push($tag, " "); + result.push($tag); } } else { for (var i = 0; i < comp.children.length; i++) { @@ -12245,13 +10813,22 @@ if (typeof module !== "undefined" && module.exports) { }; for (var i = 0; i < cap.components.children.length; i++) { + var next_child_tagname; + if ( i < cap.components.children.length - 1 ) { + next_child_tagname = cap.components.children[i + 1].tagName; + } var results = flattenComponentForCaption(cap.components.children[i]); for (var jj = 0; jj < results.length; jj++) { var result = results[jj]; if (typeof result === "string") { - if (thisObj.lyricsMode) { - // add <br> BETWEEN each caption and WITHIN each caption (if payload includes "\n") - result = result.replace(/\n/g, "<br>") + "<br>"; + if (thisObj.lyricsMode) { + // add <br> WITHIN each caption (if payload includes "\n") + result = result.replace(/\n/g,'<br>'); + + // add <br> BETWEEN each caption, but do not consider sibling style tags within this caption as the next caption! + if ( !next_child_tagname \|\| ( next_child_tagname !== 'i' && next_child_tagname !== 'b' ) ) { + result += '<br>'; + } } else { // just add a space between captions result += " "; @@ -12340,7 +10917,6 @@ if (typeof module !== "undefined" && module.exports) { // organize transcript into blocks using [] and () as starting points var $components = $main.children(); var spanCount = 0; - var openBlock = true; $components.each(function () { if ($(this).hasClass("able-transcript-caption")) { if ( @@ -12350,10 +10926,7 @@ if (typeof module !== "undefined" && module.exports) { // this caption includes a bracket or parenth. Start a new block // close the previous block first if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } @@ -12362,16 +10935,24 @@ if (typeof module !== "undefined" && module.exports) { } else { // this is not a caption. Close the caption block if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } }); + // Close out remaining temp blocks. + $main = wrapTranscriptBlocks( $main ); + return $main; }; + + var wrapTranscriptBlocks = function( $main ) { + $main.find(".able-block-temp") + .removeClass("able-block-temp") + .wrapAll('<div class="able-transcript-block"></div>'); + + return $main; + } })(jQuery); (function ($) { @@ -12390,7 +10971,7 @@ if (typeof module !== "undefined" && module.exports) { // sanitize search string var cleanSearchString = DOMPurify.sanitize(this.searchString); if ($("#" + this.SearchDiv)) { - var searchStringHtml = "<p>" + this.tt.resultsSummary1 + " "; + var searchStringHtml = "<p>" + this.translate( 'resultsSummary1', 'You searched for:') + ' '; searchStringHtml += '<span id="able-search-term-echo">' + cleanSearchString + "</span>"; searchStringHtml += "</p>"; @@ -12402,19 +10983,16 @@ if (typeof module !== "undefined" && module.exports) { var $resultsSummary = $("<p>", { class: "able-search-results-summary", }); - var resultsSummaryText = this.tt.resultsSummary2; - resultsSummaryText += - " <strong>" + resultsArray.length + "</strong> "; - resultsSummaryText += this.tt.resultsSummary3 + " "; - resultsSummaryText += this.tt.resultsSummary4; - $resultsSummary.html(resultsSummaryText); + var resultsSummaryText = this.translate( 'resultsSummary2', 'Found %1 matching items.', [ '<strong>' + resultsArray.length + '</strong>' ] ); + resultsSummaryText += ' ' + this.translate( 'resultsSummary3', 'Click the time associated with any item to play the video from that point.' ); + $resultsSummary.html( resultsSummaryText ); var $resultsList = $("<ul>"); for (var i = 0; i < resultsArray.length; i++) { var resultId = "aria-search-result-" + i; var $resultsItem = $("<li>", {}); var itemStartTime = this.secondsToTime(resultsArray[i]["start"]); var itemLabel = - this.tt.searchButtonLabel + " " + itemStartTime["title"]; + this.translate( 'searchButtonLabel', 'Play at %1', [ itemStartTime["title"] ] ); var itemStartSpan = $("<button>", { class: "able-search-results-time", "data-start": resultsArray[i]["start"], @@ -12437,16 +11015,16 @@ if (typeof module !== "undefined" && module.exports) { class: "able-search-result-text", id: resultId, }); - itemText.html("..." + resultsArray[i]["caption"] + "..."); + itemText.html('...' + resultsArray[i]["caption"] + '...'); $resultsItem.append(itemStartSpan, itemText); $resultsList.append($resultsItem); } - $("#" + this.searchDiv) + $('#' + this.searchDiv) .html(searchStringHtml) .append($resultsSummary, $resultsList); } else { - var noResults = $("<p>").text(this.tt.noResultsFound); - $("#" + this.searchDiv) + var noResults = $('<p>').text( this.translate( 'noResultsFound', 'No results found.' ) ); + $('#' + this.searchDiv) .html(searchStringHtml) .append(noResults); } @@ -12540,36 +11118,36 @@ if (typeof module !== "undefined" && module.exports) { if (hours > 0) { value += hours + ":"; if (hours == 1) { - title += "1 " + this.tt.hour + " "; + title += "1 " + this.translate( 'hour', 'hour' ) + " "; } else { - title += hours + " " + this.tt.hours + " "; + title += hours + " " + this.translate( 'hours', 'hours' ) + " "; } } if (minutes < 10) { value += "0" + minutes + ":"; if (minutes > 0) { if (minutes == 1) { - title += "1 " + this.tt.minute + " "; + title += "1 " + this.translate( 'minute', 'minute' ) + " "; } else { - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } } } else { value += minutes + ":"; - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } if (seconds < 10) { value += "0" + seconds; if (seconds > 0) { if (seconds == 1) { - title += "1 " + this.tt.second + " "; + title += "1 " + this.translate( 'second', 'second' ) + " "; } else { - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } } } else { value += seconds; - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } var time = []; time["value"] = value; @@ -12582,7 +11160,6 @@ if (typeof module !== "undefined" && module.exports) { // Media events AblePlayer.prototype.onMediaUpdateTime = function (duration, elapsed) { - // duration and elapsed are passed from callback functions of Vimeo API events // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx @@ -12590,17 +11167,17 @@ if (typeof module !== "undefined" && module.exports) { this.getMediaTimes(duration,elapsed).then(function(mediaTimes) { thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - if (thisObj.duration > 0) { + if (thisObj.duration > 0) { // do all the usual time-sync stuff during playback if (thisObj.prefHighlight === 1) { thisObj.highlightTranscript(thisObj.elapsed); - } + } thisObj.updateCaption(thisObj.elapsed); thisObj.showDescription(thisObj.elapsed); thisObj.updateChapter(thisObj.elapsed); thisObj.updateMeta(thisObj.elapsed); - thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); - } + thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); + } }); }; @@ -12627,34 +11204,32 @@ if (typeof module !== "undefined" && module.exports) { this.playlistIndex = 0; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(0); - } - else { + } else { this.playing = false; this.paused = true; } - } - else { + } else { // this is not the last track. Play the next one. this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex) } } - this.refreshControls('init'); + this.refreshControls(); }; AblePlayer.prototype.onMediaNewSourceLoad = function () { - var loadIsComplete = false; + var loadIsComplete = false; if (this.cueingPlaylistItem) { - // this variable was set in order to address bugs caused by multiple firings of media 'end' event + // this variable was set to address bugs caused by multiple firings of media 'end' event // safe to reset now this.cueingPlaylistItem = false; } - if (this.recreatingPlayer) { - // same as above; different bugs - this.recreatingPlayer = false; + if (this.recreatingPlayer) { + // same as above; different bugs + this.recreatingPlayer = false; } if (this.playbackRate) { // user has set playbackRate on a previous src or track @@ -12665,10 +11240,9 @@ if (typeof module !== "undefined" && module.exports) { if (!this.startedPlaying \|\| this.okToPlay) { // start playing; no further user action is required this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.seekTrigger == 'restart' \|\| + } else if (this.seekTrigger == 'restart' \|\| this.seekTrigger == 'chapter' \|\| this.seekTrigger == 'transcript' \|\| this.seekTrigger == 'search' @@ -12677,67 +11251,59 @@ if (typeof module !== "undefined" && module.exports) { // Not included: elements where user might click multiple times in succession // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play this.playMedia(); - loadIsComplete = true; - } - else if (this.swappingSrc) { + loadIsComplete = true; + } else if (this.swappingSrc) { // new source file has just been loaded if (this.hasPlaylist) { // a new source file from the playlist has just been loaded if ((this.playlistIndex !== this.$playlist.length) \|\| this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.swapTime > 0) { - if (this.seekStatus === 'complete') { + } else if (this.swapTime > 0) { + if (this.seekStatus === 'complete') { if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else if (this.seekStatus === 'seeking') { - } - else { - if (this.swapTime === this.elapsed) { - // seek is finished! - this.seekStatus = 'complete'; + loadIsComplete = true; + } else if (this.seekStatus === 'seeking') { + // Do nothing. + } else { + if (this.swapTime === this.elapsed) { + // seek is finished! + this.seekStatus = 'complete'; if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else { - // seeking hasn't started yet - // first, determine whether it's possible - if (this.hasDescTracks) { + loadIsComplete = true; + } else { + // seeking hasn't started yet + // first, determine whether it's possible + if (this.hasDescTracks) { // do nothing. Unable to seek ahead if there are descTracks - loadIsComplete = true; - } - else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { + loadIsComplete = true; + } else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { // durations of two sources are close enough to making seek ahead in new source ok - this.seekStatus = 'seeking'; + this.seekStatus = 'seeking'; this.seekTo(this.swapTime); - } - else { - // durations of two sources are too dissimilar to support seeking ahead to swapTime. - loadIsComplete = true; + } else { + // durations of two sources are too dissimilar to support seeking ahead to swapTime. + loadIsComplete = true; } } } - } - else { - // swapTime is 0. No seeking required. - if (this.playing) { - this.playMedia(); - // swap is complete. Reset vars. - loadIsComplete = true; + } else { + // swapTime is 0. No seeking required. + if (this.playing) { + this.playMedia(); + // swap is complete. Reset vars. + loadIsComplete = true; } } - } - else if (!this.startedPlaying) { + } else if (!this.startedPlaying) { if (this.startTime > 0) { if (this.seeking) { // a seek has already been initiated @@ -12746,94 +11312,84 @@ if (typeof module !== "undefined" && module.exports) { if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; - } - else { + loadIsComplete = true; + } else { // haven't started seeking yet this.seekTo(this.startTime); } - } - else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { + } else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { this.seekToChapter(this.defaultChapter); - } - else { + } else { // there is no startTime, therefore no seeking required if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.hasPlaylist) { - // new source media is part of a playlist, but user didn't click on it + } else if (this.hasPlaylist) { + // new source media is part of a playlist, but user didn't click on it // (and somehow, swappingSrc is false) - // this may happen when the previous track ends and next track loads - // this same code is called above when swappingSrc is true + // this may happen when the previous track ends and next track loads + // this same code is called above when swappingSrc is true if ((this.playlistIndex !== this.$playlist.length) \|\| this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else { - // None of the above. + } else { + // None of the above. // User is likely seeking to a new time, but not loading a new media source - // need to reset vars - loadIsComplete = true; - } - if (loadIsComplete) { - // reset vars - this.swappingSrc = false; - this.seekStatus = null; - this.swapTime = 0; + // need to reset vars + loadIsComplete = true; + } + if (loadIsComplete) { + // reset vars + this.swappingSrc = false; + this.seekStatus = null; + this.swapTime = 0; this.seekTrigger = null; - this.seekingFromTranscript = false; + this.seekingFromTranscript = false; this.userClickedPlaylist = false; - this.okToPlay = false; + this.okToPlay = false; } - this.refreshControls('init'); - if (this.$focusedElement) { - this.restoreFocus(); - this.$focusedElement = null; + this.refreshControls(); + if (this.$focusedElement) { + this.restoreFocus(); + this.$focusedElement = null; + this.activeMedia = null; } }; - AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { + AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { - // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src - // The durations may not be exact, but they might be "close enough" - // returns true if "close enough", otherwise false + // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src + // The durations may not be exact, but they might be "close enough" + // returns true if "close enough", otherwise false - var tolerance, diff; - - tolerance = 1; // number of seconds between rounded durations that is considered "close enough" - - diff = Math.abs(Math.round(d1) - Math.round(d2)); - - if (diff <= tolerance) { - return true; - } - else { - return false; - } + var tolerance, diff; + + tolerance = 1; // number of seconds between rounded durations that is considered "close enough" + diff = Math.abs(Math.round(d1) - Math.round(d2)); + + return (diff <= tolerance) ? true : false; }; - AblePlayer.prototype.restoreFocus = function() { + AblePlayer.prototype.restoreFocus = function() { // function called after player has been rebuilt (during media swap) - // the original focusedElement no longer exists, - // but this function finds a match in the new player - // and places focus there + // the original focusedElement no longer exists, + // but this function finds a match in the new player + // and places focus there - var classList; + var classList, $mediaParent; - if (this.$focusedElement) { - - if ((this.$focusedElement).attr('role') === 'button') { + if ( this.$focusedElement && null !== this.activeMedia ) { + $mediaParent = $( '#' + this.activeMedia ).closest( '.able' ); + if ( (this.$focusedElement).attr('role') === 'button' ) { classList = this.$focusedElement.attr("class").split(/\s+/); $.each(classList, function(index, item) { if (item.substring(0,20) === 'able-button-handler-') { - $('div.able-controller div.' + item).focus(); + $mediaParent.find('div.able-controller div.' + item).trigger('focus'); } }); } @@ -12856,12 +11412,11 @@ if (typeof module !== "undefined" && module.exports) { thisObj.showDescription(position); thisObj.updateChapter(thisObj.convertChapterTimeToVideoTime(position)); thisObj.updateMeta(position); - thisObj.refreshControls('init'); + thisObj.refreshControls(); }).on('stopTracking', function (e, position) { if (thisObj.useChapterTimes) { thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); - } - else { + } else { thisObj.seekTo(position); } if (!thisObj.pausedBeforeTracking) { @@ -12873,133 +11428,120 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.onClickPlayerButton = function (el) { - var whichButton, prefsPopup; - - whichButton = this.getButtonNameFromClass($(el).attr('class')); - - if (whichButton === 'play') { - this.clickedPlay = true; - this.handlePlay(); - } - else if (whichButton === 'restart') { - this.seekTrigger = 'restart'; - this.handleRestart(); - } - else if (whichButton === 'previous') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'previous'; - this.buttonWithFocus = 'previous'; - this.handlePrevTrack(); - } - else if (whichButton === 'next') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'next'; - this.buttonWithFocus = 'next'; - this.handleNextTrack(); - } - else if (whichButton === 'rewind') { - this.seekTrigger = 'rewind'; - this.handleRewind(); - } - else if (whichButton === 'forward') { - this.seekTrigger = 'forward'; - this.handleFastForward(); - } - else if (whichButton === 'mute') { - this.handleMute(); - } - else if (whichButton === 'volume') { - this.handleVolumeButtonClick(); - } - else if (whichButton === 'faster') { - this.handleRateIncrease(); - } - else if (whichButton === 'slower') { - this.handleRateDecrease(); - } - else if (whichButton === 'captions') { - this.handleCaptionToggle(); - } - else if (whichButton === 'chapters') { - this.handleChapters(); - } - else if (whichButton === 'descriptions') { - this.handleDescriptionToggle(); - } - else if (whichButton === 'sign') { - if (!this.closingSign) { - this.handleSignToggle(); - } - } - else if (whichButton === 'preferences') { - if ($(el).attr('data-prefs-popup') === 'menu') { - this.handlePrefsClick(); - } - else { - this.showingPrefsDialog = true; // stopgap - this.closePopups(); - prefsPopup = $(el).attr('data-prefs-popup'); - if (prefsPopup === 'keyboard') { - this.keyboardPrefsDialog.show(); - } - else if (prefsPopup === 'captions') { - this.captionPrefsDialog.show(); + whichButton = this.getButtonNameFromClass($(el).attr('class')); + switch ( whichButton ) { + case 'play': + this.clickedPlay = true; + this.handlePlay(); + break; + case 'restart': + this.seekTrigger = 'restart'; + this.handleRestart(); + break; + case 'previous': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'previous'; + this.buttonWithFocus = 'previous'; + this.handlePrevTrack(); + break; + case 'next': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'next'; + this.buttonWithFocus = 'next'; + this.handleNextTrack(); + break; + case 'rewind': + this.seekTrigger = 'rewind'; + this.handleRewind(); + break; + case 'forward': + this.seekTrigger = 'forward'; + this.handleFastForward(); + break; + case 'mute': + this.handleMute(); + break; + case 'volume': + this.handleVolumeButtonClick(); + break; + case 'faster': + this.handleRateIncrease(); + break; + case 'slower': + this.handleRateDecrease(); + break; + case 'captions': + this.handleCaptionToggle(); + break; + case 'chapters': + this.handleChapters(); + break; + case 'descriptions': + this.handleDescriptionToggle(); + break; + case 'sign': + if ( ! this.closingSign ) { + this.handleSignToggle(); } - else if (prefsPopup === 'descriptions') { - this.descPrefsDialog.show(); + break; + case 'preferences': + if ($(el).attr('data-prefs-popup') === 'menu') { + this.handlePrefsClick(); + } else { + this.showingPrefsDialog = true; // stopgap + this.closePopups(); + prefsPopup = $(el).attr('data-prefs-popup'); + if (prefsPopup === 'keyboard') { + this.keyboardPrefsDialog.show(); + } else if (prefsPopup === 'captions') { + this.captionPrefsDialog.show(); + } else if (prefsPopup === 'descriptions') { + this.descPrefsDialog.show(); + } else if (prefsPopup === 'transcript') { + this.transcriptPrefsDialog.show(); + } + this.showingPrefsDialog = false; } - else if (prefsPopup === 'transcript') { - this.transcriptPrefsDialog.show(); + break; + case 'transcript': + if ( !this.closingTranscript ) { + this.handleTranscriptToggle(); } - this.showingPrefsDialog = false; - } - } - else if (whichButton === 'help') { - this.handleHelpClick(); - } - else if (whichButton === 'transcript') { - if (!this.closingTranscript) { - this.handleTranscriptToggle(); - } - } - else if (whichButton === 'fullscreen') { - this.clickedFullscreenButton = true; - this.handleFullscreenToggle(); + break; + case 'fullscreen': + this.clickedFullscreenButton = true; + this.handleFullscreenToggle(); + break; } }; - AblePlayer.prototype.getButtonNameFromClass = function (classString) { - - // player control buttons all have class="able-button-handler-x" where x is the identifier + AblePlayer.prototype.getButtonNameFromClass = function (classString) { + // player control buttons all have class="able-button-handler-x" where x is the identifier // buttons might also have other classes assigned though + var classes, i; - var classes, i; - - classes = classString.split(' '); - for (i = 0; i < classes.length; i++) { - if (classes[i].substring(0,20) === 'able-button-handler-') { - return classes[i].substring(20); + classes = classString.split(' '); + for (i = 0; i < classes.length; i++) { + if (classes[i].substring(0,20) === 'able-button-handler-') { + return classes[i].substring(20); } - } - return classString; + } + return classString; } AblePlayer.prototype.okToHandleKeyPress = function () { - - // returns true unless user's focus is on a UI element + let defaultReturn = true; + if ( this.prefNoKeyShortcuts === 1 ) { + defaultReturn = false; + } + // returns true unless user's focus is on a UI element or user has disabled keyboard shortcuts. // that is likely to need supported keystrokes, including space - var activeElement = AblePlayer.getActiveDOMElement(); - if ($(activeElement).prop('tagName') === 'INPUT') { - return false; - } - else { - return true; - } + return ($(activeElement).prop('tagName') === 'INPUT') ? false : defaultReturn; }; AblePlayer.prototype.onPlayerKeyPress = function (e) { @@ -13007,24 +11549,21 @@ if (typeof module !== "undefined" && module.exports) { // handle keystrokes (using DHTML Style Guide recommended key combinations) // https://web.archive.org/web/20130127004544/http://dev.aol.com/dhtml_style_guide/#mediaplayer // Modifier keys Alt + Ctrl are on by default, but can be changed within Preferences - // NOTE #1: Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down + // - Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down // The rest are reasonable best choices - // NOTE #2: If there are multiple players on a single page, keystroke handlers + // - If there are multiple players on a single page, keystroke handlers // are only bound to the FIRST player - // NOTE #3: The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions + // - The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions // including removal of the "media player" design pattern. There's an issue about that: // https://github.com/w3c/aria-practices/issues/27 - var which, $thisElement; + var key, $thisElement; // Convert to lower case. - which = e.which; - if (which >= 65 && which <= 90) { - which += 32; - } + key = e.key; $thisElement = $(document.activeElement); - if (which === 27) { // escape + if (key === 'Escape') { if (this.$transcriptArea && $.contains(this.$transcriptArea[0],$thisElement[0]) && !this.hidingPopup) { // This element is part of transcript area. this.handleTranscriptToggle(); @@ -13047,101 +11586,86 @@ if (typeof module !== "undefined" && module.exports) { (e.target.tagName === 'TEXTAREA' && !this.stenoMode) \|\| e.target.tagName === 'SELECT' )){ - if (which === 27) { // escape + if (key === 'Escape') { this.closePopups(); this.$tooltipDiv.hide(); this.seekBar.hideSliderTooltips(); - } - else if (which === 32) { // spacebar = play/pause + } else if (key === ' ') { // disable spacebar support for play/pause toggle as of 4.2.10 // spacebar should not be handled everywhere on the page, since users use that to scroll the page // when the player has focus, most controls are buttons so spacebar should be used to trigger the buttons if ($thisElement.attr('role') === 'button') { // register a click on this element e.preventDefault(); - $thisElement.click(); + $thisElement.trigger( 'click' ); } - } - else if (which === 112) { // p = play/pause + } else if ( key === 'p' ) { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePlay(); } - } - else if (which === 115) { // s = stop (now restart) + } else if (key === 's') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRestart(); } - } - else if (which === 109) { // m = mute + } else if (key === 'm') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleMute(); } - } - else if (which === 118) { // v = volume + } else if (key === 'v') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleVolumeButtonClick(); } - } - else if (which >= 49 && which <= 57) { // set volume 1-9 + } else if (key >= 0 && key <= 9) { if (this.usingModifierKeys(e)) { e.preventDefault(); - this.handleVolumeKeystroke(which); + this.handleVolumeKeystroke(key); } - } - else if (which === 99) { // c = caption toggle + } else if (key === 'c') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleCaptionToggle(); } - } - else if (which === 100) { // d = description + } else if (key === 'd') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleDescriptionToggle(); } - } - else if (which === 102) { // f = forward + } else if (key === 'f') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleFastForward(); } - } - else if (which === 114) { // r = rewind + } else if (key === 'r') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRewind(); } - } - else if (which === 98) { // b = back (previous track) + } else if (key === 'b') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrevTrack(); } - } - else if (which === 110) { // n = next track + } else if (key === 'n') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleNextTrack(); } - } - else if (which === 101) { // e = preferences + } else if (key === 'e') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrefsClick(); } - } - else if (which === 13) { // Enter + } else if (key === 'Enter') { if ($thisElement.attr('role') === 'button' \|\| $thisElement.prop('tagName') === 'SPAN') { // register a click on this element // if it's a transcript span the transcript span click handler will take over - $thisElement.click(); - } - else if ($thisElement.prop('tagName') === 'LI') { - $thisElement.click(); + $thisElement.trigger( 'click' ); + } else if ($thisElement.prop('tagName') === 'LI') { + $thisElement.trigger( 'click' ); } } } @@ -13162,10 +11686,7 @@ if (typeof module !== "undefined" && module.exports) { }) .on('loadedmetadata',function() { // should be able to get duration now - thisObj.duration = thisObj.media.duration; - var x = 50.5; - var y = 51.9; - var diff = Math.abs(Math.round(x)-Math.round(y)); + thisObj.duration = thisObj.media.duration; }) .on('canplay',function() { // previously handled seeking to startTime here @@ -13173,21 +11694,21 @@ if (typeof module !== "undefined" && module.exports) { // so we know player can seek ahead to anything }) .on('canplaythrough',function() { - // previously onMediaNewSourceLoad() was called on 'loadedmetadata' - // but that proved to be too soon for some of this functionality. - // TODO: Monitor this. If moving it here causes performance issues, - // consider moving some or all of this functionality to 'canplay' - thisObj.onMediaNewSourceLoad(); + // previously onMediaNewSourceLoad() was called on 'loadedmetadata' + // but that proved to be too soon for some of this functionality. + // TODO: Monitor this. If moving it here causes performance issues, + // consider moving some or all of this functionality to 'canplay' + thisObj.onMediaNewSourceLoad(); }) .on('play',function() { - // both 'play' and 'playing' seem to be fired in all browsers (including IE11) - // therefore, doing nothing here & doing everything when 'playing' is triggered - thisObj.refreshControls('playpause'); + // 'play' indicates that the play method has been called. + // Don't do anything until playback has actually started. }) .on('playing',function() { + // 'playing' indicates that the video is playing. thisObj.playing = true; thisObj.paused = false; - thisObj.swappingSrc = false; + thisObj.swappingSrc = false; thisObj.refreshControls('playpause'); }) .on('ended',function() { @@ -13199,8 +11720,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.refreshControls('timeline'); }) .on('waiting',function() { - // do something - // previously called refreshControls() here but this event probably doesn't warrant a refresh + // could fire a notification about loss of data. }) .on('durationchange',function() { // Display new duration. @@ -13209,21 +11729,19 @@ if (typeof module !== "undefined" && module.exports) { .on('timeupdate',function() { thisObj.onMediaUpdateTime(); // includes a call to refreshControls() }) - .on('pause',function() { - if (!thisObj.clickedPlay) { + .on('pause',function() { + if (!thisObj.clickedPlay) { // 'pause' was triggered automatically, not initiated by user // this happens in some browsers when swapping source // (e.g., between tracks in a playlist or swapping description) - if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { + if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -13294,11 +11812,11 @@ if (typeof module !== "undefined" && module.exports) { // Triggered as the video is loaded. // Reports back the amount of the video that has been buffered (NOT the amount played) // Data has keys duration, percent, and seconds - }); + }); this.vimeoPlayer.on('seeking', function(data) { // Triggered when the player starts seeking to a specific time. // A timeupdate event will also be fired at the same time. - }); + }); this.vimeoPlayer.on('seeked', function(data) { // Triggered when the player seeks to a specific time. // A timeupdate event will also be fired at the same time. @@ -13317,13 +11835,11 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.hasPlaylist \|\| thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -13361,10 +11877,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addEventListeners = function () { - var thisObj, whichButton, thisElement; - - // Save the current object context in thisObj for use with inner functions. - thisObj = this; + var thisObj = this; // Appropriately resize media player for full screen. $(window).on('resize',function () { @@ -13382,7 +11895,7 @@ if (typeof module !== "undefined" && module.exports) { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { // the player's style attribute has changed. Check to see if it's visible if (thisObj.$ableDiv.is(':visible')) { - thisObj.refreshControls('init'); + thisObj.refreshControls(); } } }); @@ -13390,15 +11903,9 @@ if (typeof module !== "undefined" && module.exports) { var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); } - else { - // browser doesn't support MutationObserver - // TODO: Figure out an alternative solution for this rare use case in older browsers - // See example in buildplayer.js > useSvg() - } if (typeof this.seekBar !== 'undefined') { this.addSeekbarListeners(); - } - else { + } else { // wait a bit and try again // TODO: Should set this up to keep trying repeatedly. // Seekbar listeners are critical. @@ -13416,20 +11923,20 @@ if (typeof module !== "undefined" && module.exports) { }); // handle clicks (left only) anywhere on the page. If any popups are open, close them. - $(document).on('click',function(e) { + $('body').on('click', function(e) { if (e.button !== 0) { // not a left click return false; - } - if ($('.able-popup:visible').length \|\| $('.able-volume-popup:visible')) { + } + if ($('.able-popup:visible').length \|\| $('.able-volume-slider:visible').length ) { // at least one popup is visible thisObj.closePopups(); } - if (e.target.tagName === 'VIDEO') { + if (e.target.tagName === 'VIDEO') { // user clicked the video (not an element that sits on top of the video) - // handle this as a play/pause toggle click - thisObj.clickedPlay = true; - } + // handle this as a play/pause toggle click + thisObj.clickedPlay = true; + } }); // handle mouse movement over player; make controls visible again if hidden @@ -13446,8 +11953,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); @@ -13460,7 +11966,7 @@ if (typeof module !== "undefined" && module.exports) { }); // if user presses a key from anywhere on the page, show player controls - $(document).keydown(function(e) { + $(document).on( 'keydown', function(e) { if (thisObj.controlsHidden) { thisObj.fadeControls('in'); thisObj.controlsHidden = false; @@ -13472,8 +11978,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // controls are visible // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { @@ -13488,8 +11993,8 @@ if (typeof module !== "undefined" && module.exports) { }); // handle local keydown events if this isn't the only player on the page; - // otherwise these are dispatched by global handler (see ableplayer-base,js) - this.$ableDiv.keydown(function (e) { + // otherwise these are dispatched by global handler (see ableplayer-base.js) + this.$ableDiv.on( 'keydown', function (e) { if (AblePlayer.nextIndex > 1) { thisObj.onPlayerKeyPress(e); } @@ -13514,7 +12019,7 @@ if (typeof module !== "undefined" && module.exports) { // handle clicks on playlist items if (this.$playlist) { - this.$playlist.click(function(e) { + this.$playlist.on( 'click', function(e) { if (!thisObj.userClickedPlaylist) { // stopgap in case multiple clicks are fired on the same playlist item thisObj.userClickedPlaylist = true; // will be set to false after new src is loaded & canplaythrough is triggered @@ -13525,18 +12030,16 @@ if (typeof module !== "undefined" && module.exports) { } // Also play/pause when clicking on the media. - this.$media.click(function () { + this.$media.on( 'click', function () { thisObj.handlePlay(); }); // add listeners for media events if (this.player === 'html5') { this.addHtml5MediaListeners(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.addVimeoListeners(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // Youtube doesn't give us time update events, so we just periodically generate them ourselves setInterval(function () { thisObj.onMediaUpdateTime(); @@ -13546,7 +12049,6 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); (function ($) { - AblePlayer.prototype.initDragDrop = function ( which ) { // supported values of which: 'sign', 'transcript' @@ -13554,13 +12056,13 @@ if (typeof module !== "undefined" && module.exports) { // NOTE: "Drag and Drop" for Able Player is a metaphor only!!! // HTML5 Drag & Drop API enables moving elements to new locations in the DOM // Thats not our purpose; we're simply changing the visible position on-screen - // Therefore, the drag & drop interface was overhauled in v2.3.41 to simple + // Therefore, the drag & drop interface was overhauled in v2.3.41 to simply // use mouse (and keyboard) events to change CSS positioning properties // There are nevertheless lessons to be learned from Drag & Drop about accessibility: // http://dev.opera.com/articles/accessible-drag-and-drop/ - var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, + var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, i, x1, y1, x2, y2, $resizeLine, resizeZIndex; thisObj = this; @@ -13569,71 +12071,77 @@ if (typeof module !== "undefined" && module.exports) { $window = this.$transcriptArea; windowName = 'transcript-window'; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + $toolbar.attr( 'aria-label', this.translate( 'transcriptControls', 'Transcript Window Controls' ) ); + } else if (which === 'sign') { $window = this.$signWindow; windowName = 'sign-window'; $toolbar = this.$signToolbar; + $toolbar.attr( 'aria-label', this.translate( 'signControls', 'Sign Language Window Controls' ) ); } // add class to trigger change in cursor on hover $toolbar.addClass('able-draggable'); + $toolbar.attr( 'role', 'application' ); + + $dragHandle = $('<div>',{ + 'class': 'able-drag-handle' + }); + $dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'); // add resize handle selector to bottom right corner $resizeHandle = $('<div>',{ 'class': 'able-resizable' }); - // fill it with three parallel diagonal lines + // fill it with three parallel diagonal lines $resizeSvg = $('<svg>').attr({ 'width': '100%', 'height': '100%', 'viewBox': '0 0 100 100', 'preserveAspectRatio': 'none' }); - for (i=1; i<=3; i++) { - if (i === 1) { - x1 = '100'; - y1 = '0'; - x2 = '0'; - y2 = '100'; - } - else if (i === 2) { - x1 = '33'; - y1 = '100'; - x2 = '100'; - y2 = '33'; - } - else if (i === 3) { - x1 = '67'; - y1 = '100'; - x2 = '100'; - y2 = '67'; - } - $resizeLine = $('<line>').attr({ + for (i=1; i<=3; i++) { + if (i === 1) { + x1 = '100'; + y1 = '0'; + x2 = '0'; + y2 = '100'; + } else if (i === 2) { + x1 = '33'; + y1 = '100'; + x2 = '100'; + y2 = '33'; + } else if (i === 3) { + x1 = '67'; + y1 = '100'; + x2 = '100'; + y2 = '67'; + } + $resizeLine = $('<line>').attr({ 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2, - 'vector-effect': 'non-scaling-stroke' + 'vector-effect': 'non-scaling-stroke' }) - $resizeSvg.append($resizeLine); + $resizeSvg.append($resizeLine); } - $resizeHandle.html($resizeSvg); + $resizeHandle.html($resizeSvg); // assign z-index that's slightly higher than parent window resizeZIndex = parseInt($window.css('z-index')) + 100; $resizeHandle.css('z-index',resizeZIndex); $window.append($resizeHandle); + $toolbar.append($dragHandle); // Final step: Need to refresh the DOM in order for browser to process & display the SVG $resizeHandle.html($resizeHandle.html()); // add event listener to toolbar to start and end drag // other event listeners will be added when drag starts - $toolbar.on('mousedown mouseup touchstart touchend', function(e) { + $dragHandle.on('mousedown mouseup touchstart touchend', function(e) { e.stopPropagation(); - if (e.type === 'mousedown' \|\| e.type === 'touchstart') { + if (e.type === 'mousedown' \|\| e.type === 'touchstart' ) { if (!thisObj.windowMenuClickRegistered) { thisObj.windowMenuClickRegistered = true; thisObj.startMouseX = e.pageX; @@ -13641,8 +12149,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.dragDevice = 'mouse'; // ok to use this even if device is a touchpad thisObj.startDrag(which, $window); } - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.dragging && thisObj.dragDevice === 'mouse') { thisObj.endDrag(which); } @@ -13660,8 +12167,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.startMouseY = e.pageY; thisObj.startResize(which, $window); } - } - else if (e.type === 'mouseup' \|\| e.type === 'touchend') { + } else if (e.type === 'mouseup' \|\| e.type === 'touchend') { if (thisObj.resizing) { thisObj.endResize(which); } @@ -13677,16 +12183,12 @@ if (typeof module !== "undefined" && module.exports) { } thisObj.finishingDrag = false; }); - this.addWindowMenu(which,$window,windowName); }; AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) { - var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg, - $buttonLabel, tooltipId, $tooltip, $popup, - label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip, - $optionList, menuBaseId, options, i, $optionItem, option, menuId; + var thisObj, $windowAlert, menuId, $newButton, tooltipId, $tooltip, $popup, menuId; thisObj = this; @@ -13699,50 +12201,18 @@ if (typeof module !== "undefined" && module.exports) { // this will prevent the click event from being triggered this.finishingDrag = false; - // create an alert div and add it to window - $windowAlert = $('<div role="alert"></div>'); - $windowAlert.addClass('able-alert'); - $windowAlert.hide(); - $windowAlert.appendTo(this.$activeWindow); - $windowAlert.css({ - top: $window.offset().top - }); - // add button to draggable window which triggers a popup menu - // for now, re-use preferences icon for this purpose menuId = this.mediaId + '-' + windowName + '-menu'; $newButton = $('<button>',{ 'type': 'button', 'tabindex': '0', - 'aria-label': this.tt.windowButtonLabel, 'aria-haspopup': 'true', 'aria-controls': menuId, 'aria-expanded': 'false', 'class': 'able-button-handler-preferences' }); - if (this.iconType === 'font') { - $buttonIcon = $('<span>',{ - 'class': 'icon-preferences', - 'aria-hidden': 'true' - }); - $newButton.append($buttonIcon); - } - else { - // use image - buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png'; - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - - // add the visibly-hidden label for screen readers that don't support aria-label on the button - $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(this.tt.windowButtonLabel); - $newButton.append($buttonLabel); + this.getIcon( $newButton, 'preferences' ); + this.setText( $newButton, this.translate( 'windowButtonLabel', 'Window options' ) ); // add a tooltip that displays aria-label on mouseenter or focus tooltipId = this.mediaId + '-' + windowName + '-tooltip'; @@ -13750,20 +12220,20 @@ if (typeof module !== "undefined" && module.exports) { 'class' : 'able-tooltip', 'id' : tooltipId }).hide(); + $newButton.on('mouseenter focus',function(e) { var label = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - var tooltipY = position.top - buttonHeight - 5; + var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label); + // get height of the tooltip + var tooltipHeight = tooltip.height(); + var tooltipY = ( tooltipHeight + 2 ) -1; var tooltipX = 0; var tooltipStyle = { - left: '', - right: tooltipX + 'px', + right: '', + left: tooltipX + 'px', top: tooltipY + 'px' }; - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle); + tooltip.css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); @@ -13774,20 +12244,17 @@ if (typeof module !== "undefined" && module.exports) { $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window' // define vars and assemble all the parts if (which === 'transcript') { - this.$transcriptAlert = $windowAlert; this.$transcriptPopupButton = $newButton; this.$transcriptPopup = $popup; this.$transcriptToolbar.prepend($windowAlert,$newButton,$tooltip,$popup); - } - else if (which === 'sign') { - this.$signAlert = $windowAlert; + } else if (which === 'sign') { this.$signPopupButton = $newButton; this.$signPopup = $popup; this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup); } // handle button click - $newButton.on('click mousedown keydown',function(e) { + $newButton.on('click keydown',function(e) { if (thisObj.focusNotClick) { return false; @@ -13798,6 +12265,7 @@ if (typeof module !== "undefined" && module.exports) { } e.stopPropagation(); if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { + console.log( 'firing' ); // don't set windowMenuClickRegistered yet; that happens in handler function thisObj.handleWindowButtonClick(which, e); } @@ -13809,30 +12277,23 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addResizeDialog = function (which, $window) { - var thisObj, $windowPopup, $windowButton, - widthId, heightId, startingWidth, startingHeight, aspectRatio, - $resizeForm, $resizeWrapper, - $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, - $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, - tempWidth, tempHeight, - $saveButton, $cancelButton, newWidth, newHeight, resizeDialog; + var thisObj, $windowPopup, $windowButton, widthId, heightId, + $resizeForm, $resizeWrapper, $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, + $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, $saveButton, $cancelButton, + newWidth, newHeight, resizeDialog; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } widthId = this.mediaId + '-resize-' + which + '-width'; heightId = this.mediaId + '-resize-' + which + '-height'; - startingWidth = $window.width(); - startingHeight = $window.height(); - aspectRatio = startingWidth / startingHeight; $resizeForm = $('<div></div>',{ 'class' : 'able-resize-form' @@ -13840,76 +12301,72 @@ if (typeof module !== "undefined" && module.exports) { // inner container for all content, will be assigned to modal div's aria-describedby $resizeWrapper = $('<div></div>'); + $resizeControls = $( '<div class="able-prefs-buttons"></div>' ); // width field $resizeWidthDiv = $('<div></div>'); $resizeWidthInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': widthId, - 'value': startingWidth + 'min': 0, + 'value': '', }); $resizeWidthLabel = $('<label>',{ 'for': widthId - }).text(this.tt.width); + }).text( this.translate( 'width', 'Width' ) ); // height field $resizeHeightDiv = $('<div></div>'); $resizeHeightInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': heightId, - 'value': startingHeight + 'min': 0, + 'value': '', }); $resizeHeightLabel = $('<label>',{ 'for': heightId - }).text(this.tt.height); - - if (which === 'sign') { - // make height a read-only field - // and calculate its value based on width to preserve aspect ratio - $resizeHeightInput.prop('readonly',true); - $resizeWidthInput.on('input',function() { - tempWidth = $(this).val(); - tempHeight = Math.round(tempWidth/aspectRatio, 0); - $resizeHeightInput.val(tempHeight); - }) - } + }).text( this.translate( 'height', 'Height' ) ); // Add save and cancel buttons. - $saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - $cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); $saveButton.on('click',function () { newWidth = $('#' + widthId).val(); newHeight = $('#' + heightId).val(); - if (newWidth !== startingWidth \|\| newHeight !== startingHeight) { - thisObj.resizeObject(which,newWidth,newHeight); - thisObj.updateCookie(which); - } + thisObj.resizeObject(which,newWidth,newHeight); + thisObj.updatePreferences(which); + resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); $cancelButton.on('click',function () { resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); // Now assemble all the parts $resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput); $resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput); $resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv); - $resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton); + $resizeControls.append($saveButton,$cancelButton); + $resizeForm.append($resizeWrapper,$resizeControls); // must be appended to the BODY! // otherwise when aria-hidden="true" is applied to all background content // that will include an ancestor of the dialog, // which will render the dialog unreadable by screen readers $('body').append($resizeForm); - resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'dialog', true, this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em'); + resizeDialog = new AccessibleDialog( + $resizeForm, + $windowButton, + this.translate( 'windowResizeHeading', 'Resize Window' ), + this.translate( 'closeButtonLabel', 'Close' ), + ); if (which === 'transcript') { this.transcriptResizeDialog = resizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.signResizeDialog = resizeDialog; } }; @@ -13919,7 +12376,6 @@ if (typeof module !== "undefined" && module.exports) { var thisObj, $windowPopup, $windowButton, $toolbar, popupTop; thisObj = this; - if (this.focusNotClick) { // transcript or sign window has just opened, // and focus moved to the window button @@ -13931,73 +12387,62 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; $toolbar = this.$signToolbar; } - if (e.type === 'keydown') { // user pressed a key - if (e.which === 32 \|\| e.which === 13) { - // this was Enter or space + if (e.key === ' ' \|\| e.key === 'Enter') { this.windowMenuClickRegistered = true; - } - else if (e.which === 27) { // escape + } else if (e.key === 'Escape') { if ($windowPopup.is(':visible')) { // close the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - } - else { + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + // also return focus to window options button + $windowButton.trigger('focus'); + } else { // popup isn't open. Close the window if (which === 'sign') { this.handleSignToggle(); - } - else if (which === 'transcript') { + } else if (which === 'transcript') { this.handleTranscriptToggle(); } } - } - else { + } else { return false; } - } - else { + } else { // this was a mouse event this.windowMenuClickRegistered = true; } - if ($windowPopup.is(':visible')) { - $windowPopup.hide(200,'',function() { - thisObj.windowMenuClickRegistered = false; // reset - }); + if ( $windowPopup.is(':visible') ) { + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; // reset $windowPopup.find('li').removeClass('able-focus'); - $windowButton.attr('aria-expanded','false').focus(); - } - else { + $windowButton.attr('aria-expanded','false').trigger('focus'); + } else { // first, be sure window is on top this.updateZIndex(which); - popupTop = $windowButton.position().top + $windowButton.outerHeight(); + popupTop = $toolbar.outerHeight() - 1; $windowPopup.css('top', popupTop); - $windowPopup.show(200,'',function() { - $windowButton.attr('aria-expanded','true'); - $(this).find('li').first().focus().addClass('able-focus'); - thisObj.windowMenuClickRegistered = false; // reset - }); + $windowPopup.show(); + $windowButton.attr('aria-expanded','true'); + $(this).find('li').first().trigger('focus').addClass('able-focus'); + thisObj.windowMenuClickRegistered = false; // reset } }; AblePlayer.prototype.handleMenuChoice = function (which, choice, e) { - var thisObj, $window, $windowPopup, $windowButton, resizeDialog, width, height, $thisRadio; + var thisObj, $window, $windowPopup, $windowButton, resizeDialog, startingWidth, startingHeight, + aspectRatio, tempWidth, tempHeight; thisObj = this; if (which === 'transcript') { @@ -14005,30 +12450,42 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; resizeDialog = this.transcriptResizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { $window = this.$signWindow; $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; resizeDialog = this.signResizeDialog; + + startingWidth = $window.outerWidth(); + startingHeight = $window.outerHeight(); + aspectRatio = startingWidth / startingHeight; + // make height a read-only field + // and calculate its value based on width to preserve aspect ratio + widthId = this.mediaId + '-resize-' + which + '-width'; + heightId = this.mediaId + '-resize-' + which + '-height'; + $( '#' + heightId ).prop('readonly',true); + $( '#' + widthId ).on('input',function() { + tempWidth = $(this).val(); + tempHeight = Math.round(tempWidth/aspectRatio); + $( '#' + heightId ).val(tempHeight); + }); } this.$activeWindow = $window; if (e.type === 'keydown') { - if (e.which === 27) { // escape + if (e.key === 'Escape') { // escape // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - // also return focus to window options button - $windowButton.focus(); - }); + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + // also return focus to window options button + $windowButton.trigger('focus'); + return false; - } - else { + } else { // all other keys will be handled by upstream functions if (choice !== 'close') { this.$activeWindow = $window; @@ -14038,58 +12495,48 @@ if (typeof module !== "undefined" && module.exports) { } // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - }); + $windowPopup.hide(); + // also reset the boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + if (choice !== 'close') { - $windowButton.focus(); + $windowButton.trigger('focus'); } if (choice === 'move') { - // temporarily add role="application" to activeWindow // otherwise, screen readers incercept arrow keys and moving window will not work this.$activeWindow.attr('role','application'); if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); + this.showAlert( this.translate( 'windowMoveAlert', 'Drag or use arrow keys to move the window; Enter to stop' ),which); if (which === 'transcript') { this.showedTranscriptAlert = true; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.showedSignAlert = true; } } - if (e.type === 'keydown') { - this.dragDevice = 'keyboard'; - } - else { - this.dragDevice = 'mouse'; - } + this.dragDevice = (e.type === 'keydown') ? 'keyboard' : 'mouse'; this.startDrag(which, $window); - $windowPopup.hide().parent().focus(); - } - else if (choice == 'resize') { + $windowPopup.hide().parent().attr( 'tabindex', '-1' ).trigger('focus'); + } else if (choice == 'resize') { // resize through the menu uses a form, not drag var resizeFields = resizeDialog.getInputs(); if (resizeFields) { // reset width and height values in form - resizeFields[0].value = $window.width(); - resizeFields[1].value = $window.height(); + resizeFields[0].value = Math.round( $window.outerWidth() ); + resizeFields[1].value = Math.round( $window.outerHeight() ); } resizeDialog.show(); - } - else if (choice == 'close') { + } else if (choice == 'close') { // close window, place focus on corresponding button on controller bar if (which === 'transcript') { - this.closingTranscript = true; // stopgrap to prevent double-firing of keypress + this.closingTranscript = true; // stopgap to prevent double-firing of keypress this.handleTranscriptToggle(); - } - else if (which === 'sign') { - this.closingSign = true; // stopgrap to prevent double-firing of keypress + } else if (which === 'sign') { + this.closingSign = true; // stopgap to prevent double-firing of keypress this.handleSignToggle(); } } @@ -14097,7 +12544,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.startDrag = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newX, newY; + var thisObj, $windowPopup, startPos, newX, newY; thisObj = this; @@ -14108,21 +12555,10 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; } - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - // if window's popup menu is open, close it if ($windowPopup.is(':visible')) { $windowPopup.hide(); @@ -14142,8 +12578,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyY = this.dragStartY; // add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd() this.startingDrag = true; - } - else { + } else { this.dragDevice = 'mouse'; // get offset between mouse position and top left corner of draggable element this.dragOffsetX = this.startMouseX - this.dragStartX; @@ -14155,8 +12590,9 @@ if (typeof module !== "undefined" && module.exports) { 'position': 'absolute', 'top': this.dragStartY + 'px', 'left': this.dragStartX + 'px' - }).focus(); + }).trigger('focus'); + var dragDevice = this.dragDevice; // add device-specific event listeners if (this.dragDevice === 'mouse') { // might also be a touchpad $(document).on('mousemove touchmove',function(e) { @@ -14167,8 +12603,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resetDraggedObject( newX, newY ); } }); - } - else if (this.dragDevice === 'keyboard') { + } else if (this.dragDevice === 'keyboard') { this.$activeWindow.on('keydown',function(e) { if (thisObj.dragging) { thisObj.dragKeys(which, e); @@ -14178,40 +12613,45 @@ if (typeof module !== "undefined" && module.exports) { return false; }; + /** + * Handle moving the transcript or sign window from the keyboard. + * + * @param {string} which 'transcript' or 'sign' window. + * @param {Event} e Triggered event. + / AblePlayer.prototype.dragKeys = function(which, e) { var key, keySpeed; - var thisObj = this; - // stopgap to prevent firing on initial Enter or space // that selected "Move" from menu if (this.startingDrag) { this.startingDrag = false; return false; } - key = e.which; + key = e.key; keySpeed = 10; // pixels per keypress event switch (key) { - case 37: // left - case 63234: + case 'ArrowLeft': // left this.dragKeyX -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveLeft', 'Window moved left' ) ); break; - case 38: // up - case 63232: + case 'ArrowUp': // up this.dragKeyY -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveUp', 'Window moved up' ) ); break; - case 39: // right - case 63235: + case 'ArrowRight': // right this.dragKeyX += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveRight', 'Window moved right' ) ); break; - case 40: // down - case 63233: + case 'ArrowDown': // down this.dragKeyY += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveDown', 'Window moved down' ) ); break; - case 13: // enter - case 27: // escape + case 'Enter': // enter + case 'Escape': // escape + this.$srAlertBox.text( this.translate( 'windowMoveStopped', 'Window move stopped' ) ); this.endDrag(which); return false; default: @@ -14225,6 +12665,9 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.resetDraggedObject = function ( x, y) { + setTimeout( () => { + this.$srAlertBox.text( '' ); + }, 2000 ); this.$activeWindow.css({ 'left': x + 'px', @@ -14244,7 +12687,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { // $activeWindow is the outer $transcriptArea - // but the inner able-transcript also needs to be resized proporitionally + // but the inner able-transcript also needs to be resized proportionally // (it's 50px less than its outer container) innerHeight = height - 50; this.$transcriptDiv.css('height', innerHeight + 'px'); @@ -14253,14 +12696,13 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.endDrag = function(which) { - var thisObj, $window, $windowPopup, $windowButton; + var thisObj, $windowPopup, $windowButton; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } @@ -14272,12 +12714,12 @@ if (typeof module !== "undefined" && module.exports) { this.$activeWindow = null; if (this.dragDevice === 'keyboard') { - $windowButton.focus(); + $windowButton.trigger('focus'); } this.dragging = false; // save final position of dragged element - this.updateCookie(which); + this.updatePreferences(which); // reset starting mouse positions this.startMouseX = undefined; @@ -14286,7 +12728,7 @@ if (typeof module !== "undefined" && module.exports) { // Boolean to stop stray events from firing this.windowMenuClickRegistered = false; this.finishingDrag = true; // will be reset after window click event - // finishingDrag should e reset after window click event, + // finishingDrag should be reset after window click event, // which is triggered automatically after mouseup // However, in case that's not reliable in some browsers // need to ensure this gets cancelled @@ -14295,45 +12737,19 @@ if (typeof module !== "undefined" && module.exports) { }, 100); }; - AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) { - - // return true if mouse is close to bottom right corner (resize target) - var tolerance, position, top, left, width, height, bottom, right; - - tolerance = 10; // number of pixels in both directions considered "close enough" - - // first, get position of element - position = $window.offset(); - top = position.top; - left = position.left; - width = $window.width(); - height = $window.height(); - bottom = top + height; - right = left + width; - if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) { - return true; - } - return false; - }; - AblePlayer.prototype.startResize = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight; + var thisObj, $windowPopup, newWidth, newHeight; thisObj = this; this.$activeWindow = $element; this.resizing = true; - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } + $windowPopup = (which === 'transcript') ? this.$transcriptPopup : this.$signPopup; // if window's popup menu is open, close it & place focus on button (???) if ($windowPopup.is(':visible')) { - $windowPopup.hide().parent().focus(); + $windowPopup.hide().parent().trigger('focus'); } // get starting width and height @@ -14341,7 +12757,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyX = this.dragStartX; this.dragKeyY = this.dragStartY; this.dragStartWidth = this.$activeWindow.width(); - this.dragStartHeight = this.$activeWindow.height(); + this.dragStartHeight = this.$activeWindow.outerHeight(); // add event listeners $(document).on('mousemove touchmove',function(e) { @@ -14352,30 +12768,30 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resizeObject( which, newWidth, newHeight ); } }); + return false; }; AblePlayer.prototype.endResize = function(which) { - var $window, $windowPopup, $windowButton; + var $windowPopup, $windowButton; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } $(document).off('mousemove mouseup touchmove touchup'); this.$activeWindow.off('keydown'); - $windowButton.show().focus(); + $windowButton.show().trigger('focus'); this.resizing = false; this.$activeWindow.removeClass('able-resize'); // save final width and height of dragged element - this.updateCookie(which); + this.updatePreferences(which); // Booleans for preventing stray events this.windowMenuClickRegistered = false; @@ -14389,28 +12805,37 @@ if (typeof module !== "undefined" && module.exports) { this.finishingDrag = false; }, 100); }; - })(jQuery); (function ($) { AblePlayer.prototype.initSignLanguage = function() { - - // Sign language is only currently supported in HTML5 player, not YouTube or Vimeo - if (this.player === 'html5') { + this.hasSignLanguage = false; + // Sign language is only currently supported in HTML5 player and YouTube. + var hasLocalSrc = ( this.$sources.first().attr('data-sign-src') !== undefined && this.$sources.first().attr('data-sign-src') !== "" ); + // YouTube src can either be on a `source` element or on the `video` element. + var hasRemoteSrc = ( this.$media.data('youtube-sign-src') !== undefined && this.$media.data('youtube-sign-src') !== "" ); + var hasRemoteSource = ( this.$sources.first().attr('data-youtube-sign-src') !== undefined && this.$sources.first().attr('data-youtube-sign-src') !== '' ); + if ( ! this.isIOS() && ( hasLocalSrc \|\| hasRemoteSrc \|\| hasRemoteSource ) && ( this.player === 'html5' \|\| this.player === 'youtube' ) ) { // check to see if there's a sign language video accompanying this video // check only the first source // If sign language is provided, it must be provided for all sources - this.signFile = this.$sources.first().attr('data-sign-src'); - if (this.signFile) { + let ytSignSrc = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') ); + let signSrc = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') ); + let signVideo = DOMPurify.sanitize( this.$media.data('youtube-sign-src') ); + this.signFile = (hasLocalSrc ) ? signSrc : false; + if ( hasRemoteSrc ) { + this.signYoutubeId = signVideo; + } else if ( hasRemoteSource ) { + this.signYoutubeId = ytSignSrc; + } + if ( this.signFile \|\| this.signYoutubeId ) { if (this.isIOS()) { - // IOS does not allow multiple videos to play simultaneously + // iOS does not allow multiple videos to play simultaneously // Therefore, sign language as rendered by Able Player unfortunately won't work - this.hasSignLanguage = false; if (this.debug) { - console.log('Sign language has been disabled due to IOS restrictions'); + console.log('Sign language has been disabled due to iOS restrictions'); } - } - else { + } else { if (this.debug) { console.log('This video has an accompanying sign language video: ' + this.signFile); } @@ -14418,73 +12843,179 @@ if (typeof module !== "undefined" && module.exports) { this.injectSignPlayerCode(); } } - else { - this.hasSignLanguage = false; - } - } - else { - this.hasSignLanguage = false; } }; AblePlayer.prototype.injectSignPlayerCode = function() { - // create and inject surrounding HTML structure + // create and inject surrounding HTML structure + var thisObj, signVideoId, i, signSrc, srcType, $signSource; + + thisObj = this; + signVideoId = this.mediaId + '-sign'; + + if ( this.signFile \|\| this.signYoutubeId ) { + if ( null !== this.$signDivLocation ) { + this.$signDivLocation.addClass( 'able-sign-window able-fixed' ); + this.$signWindow = this.$signDivLocation; + } else { + this.$signWindow = $('<div>',{ + 'class' : 'able-sign-window', + 'role': 'dialog', + 'aria-label': this.translate( 'sign', 'Sign language' ) + }); + this.$signToolbar = $('<div>',{ + 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' + }); + this.$signWindow.append(this.$signToolbar); + } + + this.$ableWrapper.append(this.$signWindow); + } + + if ( this.signFile ) { + this.$signVideo = $('<video>',{ + 'id' : signVideoId, + 'tabindex' : '-1', + 'muted' : true, + }); + this.signVideo = this.$signVideo[0]; + + if ( this.signFile ) { + $signSource = $('<source>',{ + 'src' : this.signFile, + 'type' : 'video/' + this.signFile.substr(-3) + }); + this.$signVideo.append($signSource); + } else { + // for each original <source>, add a <source> to the sign <video> + for (i=0; i < this.$sources.length; i++) { + signSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-sign-src') ); + srcType = this.$sources[i].getAttribute('type'); + if (signSrc) { + $signSource = $('<source>',{ + 'src' : signSrc, + 'type' : srcType + }); + this.$signVideo.append($signSource); + } else { + // source is missing a sign language version + // can't include sign language + this.hasSignLanguage = false; + return; + } + } + } + this.$signWindow.append( this.$signVideo ); + } else if ( this.signYoutubeId ) { + this.signYoutube = this.initYouTubeSignPlayer(); + } + + // make it draggable + if ( null === this.$signDivLocation ) { + this.initDragDrop('sign'); + } + + if (this.prefSign === 1) { + // sign window is on. Go ahead and position it and show it + if ( null === this.$signDivLocation ) { + this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); + } + } else { + this.$signWindow.hide(); + } + }; + - var thisObj, signVideoId, signVideoWidth, i, signSrc, srcType, $signSource; + AblePlayer.prototype.initYouTubeSignPlayer = function () { + var thisObj, deferred, promise; thisObj = this; + deferred = new this.defer(); + promise = deferred.promise(); - signVideoWidth = this.getDefaultWidth('sign'); + this.youTubeSignPlayerReady = false; - signVideoId = this.mediaId + '-sign'; - this.$signVideo = $('<video>',{ - 'id' : signVideoId, - 'tabindex' : '-1' - }); - this.signVideo = this.$signVideo[0]; - // for each original <source>, add a <source> to the sign <video> - for (i=0; i < this.$sources.length; i++) { - signSrc = this.$sources[i].getAttribute('data-sign-src'); - srcType = this.$sources[i].getAttribute('type'); - if (signSrc) { - $signSource = $('<source>',{ - 'src' : signSrc, - 'type' : srcType + if (AblePlayer.youTubeIframeAPIReady) { + // Script already loaded and ready. + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + } else { + // Has another player already started loading the script? If so, abort... + if ( ! AblePlayer.loadingYouTubeIframeAPI ) { + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + console.log( 'YouTube API loaded' ); }); - this.$signVideo.append($signSource); - } - else { - // source is missing a sign language version - // can't include sign language - this.hasSignLanguage = false; - break; } + + // Otherwise, keeping waiting for script load event... + $('body').on('youTubeIframeAPIReady', function () { + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + }); } + return promise; + }; - this.$signWindow = $('<div>',{ - 'class' : 'able-sign-window', - 'role': 'dialog', - 'aria-label': this.tt.sign - }); - this.$signToolbar = $('<div>',{ - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' - }); + AblePlayer.prototype.finalizeYoutubeSignInit = function () { - this.$signWindow.append(this.$signToolbar, this.$signVideo); + // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - this.$ableWrapper.append(this.$signWindow); + deferred = new this.defer(); + promise = deferred.promise(); + thisObj = this; + containerId = this.mediaId + '_youtube_sign'; - // make it draggable - this.initDragDrop('sign'); + this.$signWindow.append($('<div>').attr('id', containerId)); + autoplay = (this.okToPlay) ? 1 : 0; - if (this.prefSign === 1) { - // sign window is on. Go ahead and position it and show it - this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); - } - else { - this.$signWindow.hide(); - } + // Documentation https://developers.google.com/youtube/player_parameters + this.youTubeSignPlayer = new YT.Player(containerId, { + videoId: this.getYouTubeId(this.signYoutubeId), + host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', + playerVars: { + autoplay: autoplay, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: 0, + controls: 0, // no controls, using our own + disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, + playsinline: this.playsInline, + rel: 0, // when video ends, show only related videos from same channel (1 shows any) + start: this.startTime + }, + events: { + onReady: function (player) { + player.target.mute(); + player.target.unloadModule( 'captions' ); + thisObj.youTubeSignPlayerReady = true; + + deferred.resolve(); + }, + onError: function (x) { + deferred.reject(); + }, + onStateChange: function (x) { + thisObj.getPlayerState().then(function() { + // no actions + }); + }, + onApiChange: function() { + // No actions + }, + onPlaybackQualityChange: function () { + // no actions + }, + } + }); + + return promise; }; })(jQuery); @@ -15472,30 +14003,19 @@ if (typeof module !== "undefined" && module.exports) { // return language name associated with lang code "key" // whichName is either "English" or "local" (i.e., native name) - var lang, code, subTag; + var lang, code, subTag; lang = isoLangs[key.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName; - } - else { - return lang.name; - } - } - else if (key.includes('-')) { + if (lang) { + return (whichName === 'local') ? lang.nativeName : lang.name; + } else if (key.includes('-')) { code = key.substring(0,2); - subTag = key.substring(3); - lang = isoLangs[code.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName + ' (' + subTag + ')'; - } - else { - return lang.name + ' (' + subTag + ')'; - } + subTag = key.substring(3); + lang = isoLangs[code.toLowerCase()]; + if (lang) { + return (whichName === 'local') ? lang.nativeName + ' (' + subTag + ')' : lang.name + ' (' + subTag + ')'; } } - // if all else has failed, use the key as the label + // if all else has failed, use the key as the label return key; }; @@ -15503,51 +14023,86 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.getSupportedLangs = function() { // returns an array of languages for which AblePlayer has translation tables - var langs = ['ca','cs','da','de','en','es','fr','he','id','it','ja','nb','nl','pt','pt-br','sv','tr','zh-tw']; + var langs = { + 'ca' : 'Catalan', + 'cs' : 'Czech', + 'da' : 'Danish', + 'de' : 'German', + 'en' : 'English', + 'es' : 'Spanish', + 'fr' : 'French', + 'he' : 'Hebrew', + 'id' : 'Indonesian', + 'it' : 'Italian', + 'ja' : 'Japanese', + 'ms' : 'Malay', + 'nb' : 'Norwegian Bokmål', + 'nl' : 'Dutch', + 'pl' : 'Polish', + 'pt' : 'Portuguese', + 'pt-br' : 'Brazilian Portuguese', + 'sv' : 'Swedish', + 'tr' : 'Turkish', + 'zh-tw' : 'Chinese (Taiwan)' + }; + return langs; }; + /* + * Fetch a translated string if it exists. + * + * @param {string} key JSON key to locate translated string. + * @param {string} fallback Default language if no translation found. + * @param {Array} args Ordered array of arguments to replace in string. + * @returns + / + AblePlayer.prototype.translate = function( key, fallback, args = Array() ) { + let translation = ''; + if ( this.tt[ key ] ) { + translation = this.tt[ key ]; + } else { + translation = fallback; + } + if ( args.length > 0 ) { + args.forEach( ( val, index ) => { + let ref = index + 1; + translation = translation.replace( '%' + ref, val ); + }); + } + + return translation; + } + AblePlayer.prototype.getTranslationText = function() { // determine language, then get labels and prompts from corresponding translation var - - var deferred, thisObj, supportedLangs, docLang, msg, translationFile, collapsedLang, i, - similarLangFound; - deferred = $.Deferred(); + var deferred, thisObj, supportedLangs, docLang, translationFile, i, similarLangFound; + deferred = new this.defer(); thisObj = this; supportedLangs = this.getSupportedLangs(); // returns an array if (this.lang) { // a data-lang attribute is included on the media element - if ($.inArray(this.lang,supportedLangs) === -1) { + if ( Object.hasOwn( supportedLangs,this.lang ) ) { // the specified language is not supported - if (this.lang.indexOf('-') == 2) { + if ( this.lang.indexOf('-') == 2 ) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(this.lang.substring(0,2),supportedLangs) !== -1) { - // parent lang is supported. Use that. - this.lang = this.lang.substring(0,2); - } - else { - // the parent language is not supported either - // unable to use the specified language - this.lang = null; - } - } - else { + // if parent lang is supported. Use that, else null. + this.lang = ( Object.hasOwn(supportedLangs,this.lang.substring(0,2)) !== -1 ) ? this.lang.substring(0,2) : null; + } else { // this is not a localized language. - // but maybe there's a similar localized language supported - // that has the same parent? - similarLangFound = false; - i = 0; - while (i < supportedLangs.length) { - if (supportedLangs[i].substring(0,2) == this.lang) { - this.lang = supportedLangs[i]; - similarLangFound = true; + // but maybe there's a similar localized language supported + // that has the same parent? + similarLangFound = false; + for ( const [key,value] of Object.entries(supportedLangs) ) { + if ( key.substring(0,2) == this.lang ) { + this.lang = supportedLangs[i]; + similarLangFound = true; } - i++; } - if (!similarLangFound) { + if ( !similarLangFound ) { // language requested via data-lang is not supported this.lang = null; } @@ -15559,24 +14114,21 @@ if (typeof module !== "undefined" && module.exports) { // try the language of the web page, if specified if ($('body').attr('lang')) { docLang = $('body').attr('lang').toLowerCase(); - } - else if ($('html').attr('lang')) { + } else if ($('html').attr('lang')) { docLang = $('html').attr('lang').toLowerCase(); - } - else { + } else { docLang = null; } if (docLang) { - if ($.inArray(docLang,supportedLangs) !== -1) { + if ( Object.hasOwn( supportedLangs,docLang ) ) { // the document language is supported this.lang = docLang; - } - else { + } else { // the document language is not supported if (docLang.indexOf('-') == 2) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(docLang.substring(0,2),supportedLangs) !== -1) { + if ( Object.hasOwn(supportedLangs,docLang.substring(0,2)) ) { // the parent language is supported. use that. this.lang = docLang.substring(0,2); } @@ -15594,248 +14146,70 @@ if (typeof module !== "undefined" && module.exports) { if (!this.searchLang) { this.searchLang = this.lang; } - translationFile = this.rootPath + 'translations/' + this.lang + '.js'; - $.getJSON(translationFile, function(data) { - // success! - thisObj.tt = data; - deferred.resolve(); - }) - .fail(function() { - console.log( "Critical Error: Unable to load translation file:",translationFile); - thisObj.provideFallback(); - deferred.fail(); - }) + translationFile = this.rootPath + 'translations/' + this.lang + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + console.log( "Error: Translation files should be updated to JSON." + error,translationFile); + translationFile = thisObj.rootPath + 'translations/' + thisObj.lang + '.js'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + console.log( "Error: Unable to load translation file:", translationFile); + thisObj.tt = {}; + thisObj.translationFiles = false; + deferred.resolve(); + }); + }); return deferred.promise(); }; AblePlayer.prototype.getSampleDescriptionText = function() { + if ( ! this.translationFiles ) { + this.sampleText = []; + let translation = { 'lang':'en', 'text': this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) }; + this.sampleText.push(translation); + } else { + // Create an array of sample description text in all languages + // This needs to be readily available for testing different voices + // in the Description Preferences dialog + var thisObj, supportedLangs, thisLang, translationFile, thisText, translation; + + supportedLangs = this.getSupportedLangs(); + thisObj = this; - // Create an array of sample description text in all languages - // This needs to be readily available for testing different voices - // in the Description Preferences dialog - var thisObj, supportedLangs, i, thisLang, translationFile, thisText, translation; - - supportedLangs = this.getSupportedLangs(); - - thisObj = this; - - this.sampleText = []; - for (i=0; i < supportedLangs.length; i++) { - translationFile = this.rootPath + 'translations/' + supportedLangs[i] + '.js'; - $.getJSON(translationFile, thisLang, (function(thisLang) { - return function(data) { - thisText = data.sampleDescriptionText; - translation = {'lang':thisLang, 'text': thisText}; - thisObj.sampleText.push(translation); - }; - }(supportedLangs[i])) // pass lang to callback function - ); + this.sampleText = []; + for ( const [key,value] of Object.entries(supportedLangs) ) { + translationFile = this.rootPath + 'translations/' + key + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisText = data.sampleDescriptionText; + translation = {'lang':thisLang, 'text': thisText}; + thisObj.sampleText.push(translation); + }); + } } }; })(jQuery); -(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); - -/! Copyright (c) 2014 - Paul Tavares - purtuga - @paul_tavares - MIT License / -;(function($){ - - /* - * Delays the execution of a function until an expression returns true. - * The expression is checked every 100 milliseconds for as many tries - * as defined in in the attempts option - * - * @param {Object} options - * @param {Function} options.when - * Function to execute on every interval. - * Must return true (boolean) in order for - * options.do to be executed. - * @param {Function} [options.exec] - * Function to be executed once options.when() - * returns true. - * @param {Interger} [options.interval=100] - * How long to wait in-between tries. - * @param {Interger} [options.attempts=100] - * How many tries to use before its considered - * a failure. - * @param {Interger} [options.delayed=0] - * Number of miliseconds to wait before execution - is started. Default is imediately. - * - * @return {jQuery.Promise} - * - * @example - * - * $.doWhen({ - * when: function(){ - * return false; - * }, - * exec: function(){ - * alert("never called given false response on when param!"); - * } - * }) - * .fail(function(){ - * alert('ALERT: FAILED CONDITION'); - * }) - * .then(function(){ - * alert("resolved."); - * }); - * - / - $.doWhen = function(options) { - - return $.Deferred(function(dfd){ - - var opt = $.extend({}, { - when: null, - exec: function(){}, - interval: 100, - attempts: 100, - delayed: 0 - }, - options, - { - checkId: null - }), - startChecking = function(){ - - // Check condition now and if true, then resolve object - if (opt.when() === true) { - - opt.exec.call(dfd.promise()); - dfd.resolve(); - return; - - } - - // apply minimal UI and hide the overlay - opt.checkId = setInterval(function(){ - - if (opt.attempts === 0) { - - clearInterval(opt.checkId); - dfd.reject(); - - } else { - - --opt.attempts; - - if (opt.when() === true) { - - opt.attempts = 0; - clearInterval(opt.checkId); - opt.exec.call(dfd.promise()); - dfd.resolve(); - - } - - } - - }, opt.interval); - - }; - - if (opt.delayed > 0) { - - setTimeout(startChecking, Number(opt.delayed)); - - } else { - - startChecking(); - - } - - }).promise(); - - }; - -})(jQuery); / 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 @@ -15844,24 +14218,14 @@ if (typeof module !== "undefined" && module.exports) { (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; + var thisObj, $heading, $instructions, $p1, $p2, $ul, $li1, $li2, $li3, + $fieldset, $legend, i, $radioDiv, radioId, $label, $radio, $saveButton, $savedTable; thisObj = this; - if ($('#able-vts').length) { - // Page includes a container for a VTS instance - + if ( null !== document.getElementById( 'able-vts' ) ) { // Are they qualifying tracks? if (this.vtsTracks.length) { - // Yes - there are! - // Build an array of unique languages this.langs = []; this.getAllLangs(this.vtsTracks); @@ -15870,7 +14234,8 @@ if (typeof module !== "undefined" && module.exports) { this.vtsLang = this.lang; // Inject a heading - $heading = $('<h2>').text('Video Transcript Sorter'); // TODO: Localize; intelligently assign proper heading level + let heading = this.translate( 'vtsHeading', 'Video Transcript Sorter' ); + $heading = $('<h2>').text( heading ); // TODO: intelligently assign proper heading level $('#able-vts').append($heading); // Inject an empty div for writing messages @@ -15885,20 +14250,21 @@ if (typeof module !== "undefined" && module.exports) { $instructions = $('<div>',{ 'id': 'able-vts-instructions' }); - $p1 = $('<p>').text('Use the Video Transcript Sorter to perform any of the following tasks:'); + $p1 = $('<p>').text( this.translate( 'vtsInstructions1', 'Use the Video Transcript Sorter to modify text tracks:' ) ); $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.'); + $li1 = $('<li>').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 = $('<li>').text( this.translate( 'vtsInstructions3', 'Modify content or start/end times (all are directly editable within the table).' ) ); + $li3 = $('<li>').text( this.translate( 'vtsInstructions4', 'Add new content, such as chapters or descriptions.' ) ); + $p2 = $('<p>').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 = $('<fieldset>'); - $legend = $('<legend>').text('Select a language'); // TODO: Localize this - $fieldset.append($legend) + $legend = $('<legend>').text( this.translate( 'vtsSelectLanguage', 'Select a language' ) ); + $fieldset.append($legend); + $fieldWrapper = $( '<div class="vts-lang-selector"></div>' ); for (i in this.langs) { radioId = 'vts-lang-radio-' + this.langs[i]; $radioDiv = $('<div>',{ @@ -15922,29 +14288,29 @@ if (typeof module !== "undefined" && module.exports) { $label = $('<label>', { 'for': radioId // Two options for label: - // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; + // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; // TODO: if using this be sure to add lang attr to <div> (see above) }).text(this.getLanguageName(this.langs[i])); $radioDiv.append($radio,$label); - $fieldset.append($radioDiv); + $fieldWrapper.append($radioDiv); } + $fieldset.append( $fieldWrapper ); $('#able-vts').append($fieldset); - - // Inject a 'Save Changes' button + let vtsSave = this.translate( 'vtsSave', 'Generate new .vtt content' ); + // Inject a button to generate new files. $saveButton = $('<button>',{ 'type': 'button', 'id': 'able-vts-save', 'value': 'save' - }).text('Save Changes'); // TODO: Localize this + }).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, i, closestKind; + var kindOptions, beforeEditing, editedCell, editedContent, i; kindOptions = ['captions','chapters','descriptions','subtitles']; $('td[contenteditable="true"]').on('focus',function() { beforeEditing = $(this).text(); @@ -15959,20 +14325,16 @@ if (typeof module !== "undefined" && module.exports) { // assume they correctly typed the first character if (editedContent.substring(0,1) === 's') { $(this).text('subtitles'); - } - else if (editedContent.substring(0,1) === 'd') { + } else if (editedContent.substring(0,1) === 'd') { $(this).text('descriptions'); - } - else if (editedContent.substring(0,2) === 'ch') { + } else if (editedContent.substring(0,2) === 'ch') { $(this).text('chapters'); - } - else { + } else { // whatever else they types, assume 'captions' $(this).text('captions'); } } - } - else if (editedCell === 2 \|\| editedCell === 3) { + } else if (editedCell === 2 \|\| editedCell === 3) { // start or end time // ensure proper formatting (with 3 decimal places) $(this).text(thisObj.formatTimestamp(editedContent)); @@ -15984,30 +14346,27 @@ if (typeof module !== "undefined" && module.exports) { 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 + $(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 { + } else { // cancel saving, and restore the table using edited content - $(this).attr('value','save').text('Save Changes'); // TODO: Localize this + $(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('Cancelling saving. Any edits you made have been restored in the VTS table.'); // TODO: Localize this + thisObj.showVtsAlert( thisObj.translate( 'vtsCancel', 'Cancelling saving. Any edits you made have been restored in the VTS table.' ) ); } }); } @@ -16016,10 +14375,8 @@ if (typeof module !== "undefined" && module.exports) { 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) - - // Called from tracks.js + // TODO: Add support for trackDesc + // (to destinguish between tracks for the decribed vs non-described versions) var srcFile, vtsCues; srcFile = this.getFilenameFromPath(src); @@ -16037,15 +14394,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getFilenameFromPath = function(path) { var lastSlash; - lastSlash = path.lastIndexOf('/'); - if (lastSlash === -1) { - // there are no slashes in path. - return path; - } - else { - return path.substring(lastSlash+1); - } + // fix slashes. + return (lastSlash === -1) ? path : path.substring(lastSlash+1); }; AblePlayer.prototype.getFilenameFromTracks = function(kind,lang) { @@ -16083,13 +14434,11 @@ if (typeof module !== "undefined" && module.exports) { if (content.length > 0) { // add back the EOL between rows of content content += "\n" + nextRow; - } - else { + } else { // this is the first row of content. No need for an EOL content += nextRow; } - } - else { + } else { blankRow = true; } j++; @@ -16101,8 +14450,7 @@ if (typeof module !== "undefined" && module.exports) { }); i = j; //skip ahead } - } - else { + } else { i++; } } @@ -16112,12 +14460,7 @@ if (typeof module !== "undefined" && module.exports) { 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; - } + return (/^[0-9:,.]$/.test(timestamp)) ? true : false; }; AblePlayer.prototype.formatTimestamp = function(timestamp) { @@ -16139,8 +14482,7 @@ if (typeof module !== "undefined" && module.exports) { if (lastPart.length > 3) { // chop off any extra digits lastPart = lastPart.substring(0,3); - } - else if (lastPart.length < 3) { + } else if (lastPart.length < 3) { // add trailing zeros while (lastPart.length < 3) { lastPart += '0'; @@ -16154,7 +14496,7 @@ if (typeof module !== "undefined" && module.exports) { // 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; + var $table, $thead, headers, i, $tr, $th, $td, rows, rowNum, rowId; if (action === 'update') { // remove existing table @@ -16165,10 +14507,16 @@ if (typeof module !== "undefined" && module.exports) { $table = $('<table>',{ 'lang': lang }); - $tr = $('<tr>',{ - 'lang': 'en' // TEMP, until header row is localized - }); - headers = ['Row #','Kind','Start','End','Content','Actions']; // TODO: Localize this + $thead = $( '<thead>' ); + $tr = $( '<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 = $('<th>', { 'scope': 'col' @@ -16178,7 +14526,8 @@ if (typeof module !== "undefined" && module.exports) { } $tr.append($th); } - $table.append($tr); + $thead.append($tr); + $table.append($thead); // Get all rows (sorted by start time), and inject them into table rows = this.getAllRows(lang); @@ -16274,8 +14623,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'down') { + } else if (button === 'down') { if (rowNum < numRows) { $button = $('<button>',{ 'id': 'able-vts-button-down-' + rowNum, @@ -16307,8 +14655,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'insert') { + } else if (button === 'insert') { // Add Insert button to all rows $button = $('<button>',{ 'id': 'able-vts-button-insert-' + rowNum, @@ -16342,8 +14689,7 @@ if (typeof module !== "undefined" && module.exports) { // 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') { + } else if (button === 'delete') { // Add Delete button to all rows $button = $('<button>',{ 'id': 'able-vts-button-delete-' + rowNum, @@ -16409,14 +14755,12 @@ if (typeof module !== "undefined" && module.exports) { 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; + var credit + = 'Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a>' + + ' from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a>' + + ' are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a>' + ; + return '<div id="able-vts-icon-credit">' + credit + '</div>'; }; AblePlayer.prototype.getAllLangs = function(tracks) { @@ -16474,16 +14818,13 @@ if (typeof module !== "undefined" && module.exports) { if (action == 'up') { // move the row up this.moveRow(rowNum,'up'); - } - else if (action == 'down') { + } else if (action == 'down') { // move the row down this.moveRow(rowNum,'down'); - } - else if (action == 'insert') { + } else if (action == 'insert') { // insert a row below this.insertRow(rowNum); - } - else if (action == 'delete') { + } else if (action == 'delete') { // delete the row this.deleteRow(rowNum); } @@ -16492,9 +14833,8 @@ if (typeof module !== "undefined" && module.exports) { 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; + 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'); @@ -16576,10 +14916,11 @@ if (typeof module !== "undefined" && module.exports) { this.adjustTimes(newRowNum); // Announce the insertion - this.showVtsAlert('A new row ' + newRowNum + ' has been inserted'); // TODO: Localize this + let newAlert = this.translate( 'vtsNewRow', 'A new row %1 has been inserted.', [ newRowNum ] ); + this.showVtsAlert( newAlert ); // Place focus in new select field - $select.focus(); + $select.trigger('focus'); }; @@ -16602,14 +14943,15 @@ if (typeof module !== "undefined" && module.exports) { } // Announce the deletion - this.showVtsAlert('Row ' + rowNum + ' has been deleted'); // TODO: Localize this + let newAlert = this.translate( 'vtsDeletedRow', 'Row %1 has been deleted.', [ rowNum ] ); + this.showVtsAlert( newAlert ); }; AblePlayer.prototype.moveRow = function(rowNum,direction) { // swap two rows - var $rows, $thisRow, otherRowNum, $otherRow, newTimes, msg; + var $rows, $thisRow, otherRowNum, $otherRow, msg; $rows = $('#able-vts table').find('tr'); $thisRow = $('#able-vts table').find('tr').eq(rowNum); @@ -16617,8 +14959,7 @@ if (typeof module !== "undefined" && module.exports) { otherRowNum = parseInt(rowNum) - 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.before($thisRow); - } - else if (direction == 'down') { + } else if (direction == 'down') { otherRowNum = parseInt(rowNum) + 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.after($thisRow); @@ -16634,9 +14975,8 @@ if (typeof module !== "undefined" && module.exports) { // 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; + // Announce the move + msg = this.translate( 'vtsMovedRow', 'Row %1 has been moved %2 and is now Row %3.', [ rowNum, direction, otherRowNum ] ); this.showVtsAlert(msg); }; @@ -16673,16 +15013,10 @@ if (typeof module !== "undefined" && module.exports) { // 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'; - } + // 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()); @@ -16691,19 +15025,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the first row prevRowNum = null; $prevRow = null; @@ -16717,19 +15044,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the last row nextRowNum = null; $nextRow = null; @@ -16750,62 +15070,43 @@ if (typeof module !== "undefined" && module.exports) { 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') { + // 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); - 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') { + // end the new row immediately before the next row starts + end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (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 { + } 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 { + } 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 { + } else { // start needs to be incremented start = (parseFloat(prevStart) + minDuration[prevKind]).toFixed(3); end = (parseFloat(start) + minDuration[kind]).toFixed(3); } - } - else { + } else { // this is the first row if (start < nextStart) { // No change is necessary - } - else { + } else { // nextStart needs to be incremented nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3); nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3); @@ -16848,9 +15149,8 @@ if (typeof module !== "undefined" && module.exports) { if (kindEnd == -1) { // no spaces found, "kind-" must be the only myclass return myclass.substring(kindStart); - } - else { - // kind-* is one of multiple classes + } 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); } @@ -16862,7 +15162,11 @@ if (typeof module !== "undefined" && module.exports) { // 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'); + 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) { @@ -16885,7 +15189,7 @@ if (typeof module !== "undefined" && module.exports) { 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(); + content = $rows.eq(i).find('td').eq(4)[0].innerText; if (start !== undefined && end !== undefined) { vtt[kind] += start + ' --> ' + end + "\n"; if (content !== 'undefined') { @@ -16913,14 +15217,13 @@ if (typeof module !== "undefined" && module.exports) { var $heading, filename, $p, pText, $textarea; - $heading = $('<h3>').text(kind.charAt(0).toUpperCase() + kind.slice(1)); + $heading = $('<h3>').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 += '<em>' + kind + '</em> WebVTT file (<strong>' + filename + '</strong>).'; - } - else { + } else { pText += 'into a new ' + this.getLanguageName(lang) + ' <em>' + kind + '</em> WebVTT file.'; } $p = $('<p>',{ @@ -16932,14 +15235,14 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); - (function ($) { + AblePlayer.prototype.initVimeoPlayer = function () { - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; + var thisObj, deferred, promise, containerId, vimeoId, options; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); containerId = this.mediaId + '_vimeo'; @@ -16947,14 +15250,10 @@ if (typeof module !== "undefined" && module.exports) { // add container to which Vimeo player iframe will be appended this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // if a described version is available && user prefers desription + // if a described version is available && user prefers description // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } + vimeoId = (this.vimeoDescId && this.prefDesc) ? this.vimeoDescId : this.vimeoId; + this.activeVimeoId = vimeoId; // Notes re. Vimeo Embed Options: @@ -16962,44 +15261,36 @@ if (typeof module !== "undefined" && module.exports) { // setting the "controls" option to "false" will hide the default controls, without hiding captions. // This is a new option from Vimeo; previously used "background:true" to hide the controller, // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) + // - In addition to hiding the controls, it also hides captions + // - It automatically autoplays (initializing the player with autoplay:false does not override this) + // - It automatically loops (but this can be overridden by initializing the player with loop:false) + // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - if (this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } + autoplay = (this.okToPlay) ? 'true' : 'false'; - if (this.playerWidth) { - if (this.vimeoUrlHasParams) { - // use url param, not id + if (this.playerWidth) { + if (this.vimeoUrlHasParams) { + // use url param, not id options = { url: vimeoId, width: this.playerWidth, controls: false } - } - else { + } else { options = { id: vimeoId, width: this.playerWidth, controls: false } } - } - else { - // initialize without width & set width later - if (this.vimeoUrlHasParams) { + } else { + // initialize without width & set width later + if (this.vimeoUrlHasParams) { options = { url: vimeoId, controls: false } - } - else { + } else { options = { id: vimeoId, controls: false @@ -17017,18 +15308,18 @@ if (typeof module !== "undefined" && module.exports) { }); // get video's intrinsic size and initiate player dimensions - thisObj.vimeoPlayer.getVideoWidth().then(function(width) { - if (width) { - // also get height - thisObj.vimeoPlayer.getVideoHeight().then(function(height) { - if (height) { - thisObj.resizePlayer(width,height); + thisObj.vimeoPlayer.getVideoWidth().then(function(width) { + if (width) { + // also get height + thisObj.vimeoPlayer.getVideoHeight().then(function(height) { + if (height) { + thisObj.resizePlayer(width,height); } - }); + }); } }).catch(function(error) { - // an error occurred getting height or width - // TODO: Test this to see how gracefully it organically recovers + // an error occurred getting height or width + // TODO: Test this to see how gracefully it organically recovers }); if (!thisObj.hasPlaylist) { @@ -17061,7 +15352,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPaused = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getPaused().then(function (paused) { @@ -17075,7 +15366,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoEnded = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getEnded().then(function (ended) { @@ -17088,11 +15379,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoState = function () { - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - - thisObj = this; + var deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); promises = []; @@ -17119,10 +15408,10 @@ if (typeof module !== "undefined" && module.exports) { // get data via Vimeo Player API, and push data to this.captions // Note: Vimeo doesn't expose the caption cues themselves // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - var thisObj, i, trackId, isDefaultTrack; + var thisObj, i, isDefaultTrack; thisObj = this; @@ -17142,15 +15431,13 @@ if (typeof module !== "undefined" && module.exports) { thisObj.hasCaptions = true; if (thisObj.prefCaptions === 1) { thisObj.captionsOn = true; - } - else { + } else { thisObj.captionsOn = false; } // assign the default track based on language of the player if (tracks[i]['language'] === thisObj.lang) { isDefaultTrack = true; - } - else { + } else { isDefaultTrack = false; } thisObj.tracks.push({ @@ -17158,18 +15445,17 @@ if (typeof module !== "undefined" && module.exports) { 'language': tracks[i]['language'], 'label': tracks[i]['label'], 'def': isDefaultTrack - }); + }); } - thisObj.captions = thisObj.tracks; + thisObj.captions = thisObj.tracks; thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original thisObj.setupPopups('captions'); deferred.resolve(); - } - else { + } else { thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; + thisObj.usingVimeoCaptions = false; deferred.resolve(); } }); @@ -17179,69 +15465,59 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPosterUrl = function (vimeoId, width) { - // this is a placeholder, copied from getYouTubePosterUrl() - // Vimeo doesn't seem to have anything similar, - // nor does it seem to be possible to get the poster via the Vimeo API - // Vimeo playlist support (with thumbnail images) may require use of data-poster + // Vimeo Oembed only returns a 640px width image. Hope at some point there's an alternative. + var url = 'http://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId, imageUrl = ''; + console.log( url ); + fetch( url ).then( response => { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 + return response.json(); + }) + .then( json => { + imageUrl = json.thumbnail_url; + }) + .catch( error => { + if (thisObj.debug) { + console.log( 'Vimeo API query: ' + error ); + } + }); - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; - }; + return imageUrl; + }; AblePlayer.prototype.getVimeoId = function (url) { - + // return a Vimeo ID, extracted from a full Vimeo URL // Supported URL patterns are anything containing 'vimeo.com' - // and ending with a '/' followed by the ID. + // and ending with a '/' followed by the ID. // (Vimeo IDs do not have predicatable lengths) - - // Update: If URL contains parameters, return the full url - // This will need to be passed to the Vimeo Player API - // as a url parameter, not as an id parameter - this.vimeoUrlHasParams = false; - - var idStartPos, id; - - if (typeof url === 'number') { - // this is likely already a vimeo ID - return url; - } - else if (url.indexOf('vimeo.com') !== -1) { - // this is a full Vimeo URL - if (url.indexOf('?') !== -1) { - // URL contains parameters - this.vimeoUrlHasParams = true; - return url; - } - else { - url = url.trim(); - idStartPos = url.lastIndexOf('/') + 1; - id = url.substring(idStartPos); - return id; - } - } - else { - return url; - } -}; + + // Update: If URL contains parameters, return the full url + // This will need to be passed to the Vimeo Player API + // as a url parameter, not as an id parameter + this.vimeoUrlHasParams = false; + + if (typeof url === 'number') { + // this is likely already a vimeo ID + return url; + } else { + urlObject = new URL(url); + } + if ( 'vimeo.com' === urlObject.hostname \|\| 'player.vimeo.com' === urlObject.hostname ) { + // this is a full Vimeo URL + if ( '' !== urlObject.search ) { + // URL contains parameters + this.vimeoUrlHasParams = true; + return url; + } else { + if ( 'player.vimeo.com' === urlObject.hostname ) { + return urlObject.pathname.replace( '/video/', '' ); + } else { + return urlObject.pathname.replace( '/', '' ); + } + } + } else { + return url; + } + }; })(jQuery); diff --git a/src/build/separate-dompurify/ableplayer.min.js b/src/build/separate-dompurify/ableplayer.min.js index 93a513a..b8a71b7 100644 --- a/src/build/separate-dompurify/ableplayer.min.js +++ b/src/build/separate-dompurify/ableplayer.min.js @@ -1,2 +1,2 @@ -/! ableplayer V4.5.1 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / -"use strict";var AblePlayerInstances=[];!function(t){t((function(){t("video, audio").each((function(e,i){void 0!==t(i).data("able-player")&&AblePlayerInstances.push(new AblePlayer(t(this),t(i)))}))})),window.onYouTubeIframeAPIReady=function(){AblePlayer.youTubeIframeAPIReady=!0,t("body").trigger("youTubeIframeAPIReady",[])},t(window).on("keydown",(function(t){1===AblePlayer.nextIndex&&AblePlayer.lastCreated.onPlayerKeyPress(t)})),window.AblePlayer=function(e){if(AblePlayer.lastCreated=this,this.media=e,0!==t(e).length){if(void 0!==t(e).attr("autoplay")?(this.autoplay=!0,this.okToPlay=!0):(this.autoplay=!1,this.okToPlay=!1),void 0!==t(e).attr("loop")?this.loop=!0:this.loop=!1,void 0!==t(e).attr("playsinline")?this.playsInline="1":this.playsInline="0",t(e).attr("poster")?this.hasPoster=!0:this.hasPoster=!1,t(e).attr("width")&&(this.width=t(e).attr("width")),t(e).attr("height")&&(this.height=t(e).attr("height")),void 0!==t(e).data("start-time")&&t.isNumeric(t(e).data("start-time"))?this.startTime=t(e).data("start-time"):this.startTime=0,void 0!==t(e).data("debug")&&!1!==t(e).data("debug")?this.debug=!0:this.debug=!1,void 0!==t(e).data("root-path")?this.rootPath=t(e).data("root-path").replace(/\/?$/,"/"):this.rootPath=this.getRootPath(),this.defaultVolume=7,void 0!==t(e).data("volume")&&""!==t(e).data("volume")){var i=t(e).data("volume");i>=0&&i<=10&&(this.defaultVolume=i)}if(this.volume=this.defaultVolume,void 0!==t(e).data("use-chapters-button")&&!1===t(e).data("use-chapters-button")?this.useChaptersButton=!1:this.useChaptersButton=!0,void 0!==t(e).data("descriptions-audible")&&!1===t(e).data("descriptions-audible")\|\|void 0!==t(e).data("description-audible")&&!1===t(e).data("description-audible")?this.readDescriptionsAloud=!1:this.readDescriptionsAloud=!0,"screenreader"==t(e).data("desc-reader")?this.descReader="screenreader":this.descReader="browser","off"==t(e).data("state-captions")?this.defaultStateCaptions=0:this.defaultStateCaptions=1,"on"==t(e).data("state-descriptions")?this.defaultStateDescriptions=1:this.defaultStateDescriptions=0,"off"==t(e).data("desc-pause-default")?this.defaultDescPause=0:this.defaultDescPause=1,void 0!==t(e).data("heading-level")&&""!==t(e).data("heading-level")){var s=t(e).data("heading-level");/^[0-6]$/.test(s)&&(this.playerHeadingLevel=s)}if(void 0!==t(e).data("transcript-div")&&""!==t(e).data("transcript-div")?this.transcriptDivLocation=t(e).data("transcript-div"):this.transcriptDivLocation=null,void 0!==t(e).data("include-transcript")&&!1===t(e).data("include-transcript")?this.hideTranscriptButton=!0:this.hideTranscriptButton=null,this.transcriptType=null,void 0!==t(e).data("transcript-src")?(this.transcriptSrc=t(e).data("transcript-src"),this.transcriptSrcHasRequiredParts()&&(this.transcriptType="manual")):t(e).find('track[kind="captions"], track[kind="subtitles"]').length>0&&(this.transcriptDivLocation?this.transcriptType="external":this.transcriptType="popup"),void 0!==t(e).data("lyrics-mode")&&!1!==t(e).data("lyrics-mode")?this.lyricsMode=!0:this.lyricsMode=!1,void 0!==t(e).data("transcript-title")&&""!==t(e).data("transcript-title")&&(this.transcriptTitle=t(e).data("transcript-title")),"overlay"===t(e).data("captions-position")?this.defaultCaptionsPosition="overlay":this.defaultCaptionsPosition="below",void 0!==t(e).data("chapters-div")&&""!==t(e).data("chapters-div")&&(this.chaptersDivLocation=t(e).data("chapters-div")),void 0!==t(e).data("chapters-title")&&(this.chaptersTitle=t(e).data("chapters-title")),void 0!==t(e).data("chapters-default")&&""!==t(e).data("chapters-default")?this.defaultChapter=t(e).data("chapters-default"):this.defaultChapter=null,"arrows"===t(e).data("speed-icons")?this.speedIcons="arrows":this.speedIcons="animals","chapter"===t(e).data("seekbar-scope")\|\|"chapters"===t(e).data("seekbar-scope")?this.seekbarScope="chapter":this.seekbarScope="video",void 0!==t(e).data("youtube-id")&&""!==t(e).data("youtube-id")&&(this.youTubeId=this.getYouTubeId(t(e).data("youtube-id"))),void 0!==t(e).data("youtube-desc-id")&&""!==t(e).data("youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(t(e).data("youtube-desc-id"))),void 0!==t(e).data("youtube-nocookie")&&t(e).data("youtube-nocookie")?this.youTubeNoCookie=!0:this.youTubeNoCookie=!1,void 0!==t(e).data("vimeo-id")&&""!==t(e).data("vimeo-id")&&(this.vimeoId=this.getVimeoId(t(e).data("vimeo-id"))),void 0!==t(e).data("vimeo-desc-id")&&""!==t(e).data("vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(t(e).data("vimeo-desc-id"))),"2020"==t(e).data("skin")?this.skin="2020":this.skin="legacy",void 0!==t(e).data("width")?this.playerWidth=parseInt(t(e).data("width")):t(e)[0].getAttribute("width")?this.playerWidth=parseInt(t(e)[0].getAttribute("width")):this.playerWidth=null,this.iconType="font",this.forceIconType=!1,void 0!==t(e).data("icon-type")&&""!==t(e).data("icon-type")){var a=t(e).data("icon-type");"font"!==a&&"image"!=a&&"svg"!=a\|\|(this.iconType=a,this.forceIconType=!0)}if(void 0!==t(e).data("allow-fullscreen")&&!1===t(e).data("allow-fullscreen")?this.allowFullscreen=!1:this.allowFullscreen=!0,this.clickedFullscreenButton=!1,this.restoringAfterFullscreen=!1,this.defaultSeekInterval=10,this.useFixedSeekInterval=!1,void 0!==t(e).data("seek-interval")&&""!==t(e).data("seek-interval")){var n=t(e).data("seek-interval");/^[1-9][0-9]$/.test(n)&&(this.seekInterval=n,this.useFixedSeekInterval=!0)}void 0!==t(e).data("show-now-playing")&&!1===t(e).data("show-now-playing")?this.showNowPlaying=!1:this.showNowPlaying=!0,void 0!==t(e).data("use-ttml")?(this.useTtml=!0,this.convert=require("xml-js")):this.useTtml=!1,void 0!==t(e).data("test-fallback")&&!1!==t(e).data("test-fallback")?"2"==t(e).data("test-fallback")?this.testFallback=2:this.testFallback=1:this.testFallback=!1,void 0!==t(e).data("lang")&&""!==t(e).data("lang")?this.lang=t(e).data("lang").toLowerCase():this.lang=null,void 0!==t(e).data("meta-type")&&""!==t(e).data("meta-type")&&(this.metaType=t(e).data("meta-type")),void 0!==t(e).data("meta-div")&&""!==t(e).data("meta-div")&&(this.metaDiv=t(e).data("meta-div")),void 0!==t(e).data("search-div")&&""!==t(e).data("search-div")&&(this.searchDiv=t(e).data("search-div"),void 0!==t(e).data("search")&&""!==t(e).data("search")&&(this.searchString=t(e).data("search")),void 0!==t(e).data("search-lang")&&""!==t(e).data("search-lang")?this.searchLang=t(e).data("search-lang"):this.searchLang=null,void 0!==t(e).data("search-ignore-caps")&&!1!==t(e).data("search-ignore-caps")?this.searchIgnoreCaps=!0:this.searchIgnoreCaps=!1,void 0!==t(e).data("search-div")&&""!==t(e).data("search-div")&&(this.searchString=t(e).data("search"),this.searchDiv=t(e).data("search-div"))),void 0!==t(e).data("hide-controls")&&!1!==t(e).data("hide-controls")?(this.hideControls=!0,this.hideControlsOriginal=!0):(this.hideControls=!1,this.hideControlsOriginal=!1),void 0!==t(e).data("steno-mode")&&!1!==t(e).data("steno-mode")?(this.stenoMode=!0,void 0!==t(e).data("steno-iframe-id")&&""!==t(e).data("steno-iframe-id")?(this.stenoFrameId=t(e).data("steno-iframe-id"),this.$stenoFrame=t("#"+this.stenoFrameId),this.$stenoFrame.length\|\|(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoMode=!1,this.stenoFrameId=null,this.$stenoFrame=null),this.setDefaults(),this.ableIndex=AblePlayer.nextIndex,AblePlayer.nextIndex+=1,this.title=t(e).attr("title"),this.tt={};var r=this;t.when(this.getTranslationText()).then((function(){r.countProperties(r.tt)>50?r.setup():r.provideFallback()})).fail((function(){r.provideFallback()}))}else this.provideFallback()},AblePlayer.nextIndex=0,AblePlayer.prototype.setup=function(){var t=this;this.initializing=!0,this.reinitialize().then((function(){t.player?t.setupInstance().then((function(){t.setupInstancePlaylist(),t.hasPlaylist\|\|t.recreatePlayer().then((function(){t.initializing=!1,t.playerCreated=!0}))})):t.provideFallback()}))},AblePlayer.getActiveDOMElement=function(){for(var t=document.activeElement;t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t},AblePlayer.localGetElementById=function(e,i){return e.getRootNode?t(e.getRootNode().querySelector("#"+i)):t(document.getElementById(i))},AblePlayer.youTubeIframeAPIReady=!1,AblePlayer.loadingYouTubeIframeAPI=!1}(jQuery),function(t){AblePlayer.prototype.setDefaults=function(){this.playerCreated=!1,this.playing=!1,this.paused=!0,this.clickedPlay=!1,this.fullscreen=!1,this.swappingSrc=!1,this.initializing=!1,this.cueingPlaylistItems=!1,this.buttonWithFocus=null,this.speechEnabled=null,this.setIconColor(),this.setButtonImages()},AblePlayer.prototype.getRootPath=function(){var t,e,i,s,a,n;for(t=document.getElementsByTagName("script"),e=0;e<t.length;e++)if(-1!==(i=t[e].src).substring(i.lastIndexOf("/")).indexOf("ableplayer")){s=i.split("?")[0];break}return n=(a=s.split("/").slice(0,-1).join("/")).lastIndexOf("/"),a.substring(0,n)+"/"},AblePlayer.prototype.setIconColor=function(){var e,i,s,a,n;for(e=["controller","toolbar"],i=0;i<e.length;i++)"controller"==e[i]?s=t("<div>",{class:"able-controller"}).hide():"toolbar"===e[i]&&(s=t("<div>",{class:"able-window-toolbar"}).hide()),t("body").append(s),n=.2126(a=s.css("background-color").replace(/[^\d,]/g,"").split(","))[0]+.7152a[1]+.0722a[2]<125?"white":"black","controller"===e[i]?this.iconColor=n:"toolbar"===e[i]&&(this.toolbarIconColor=n),s.remove()},AblePlayer.prototype.setButtonImages=function(){this.imgPath=this.rootPath+"button-icons/"+this.iconColor+"/",this.playButtonImg=this.imgPath+"play.png",this.pauseButtonImg=this.imgPath+"pause.png",this.restartButtonImg=this.imgPath+"restart.png",this.rewindButtonImg=this.imgPath+"rewind.png",this.forwardButtonImg=this.imgPath+"forward.png",this.previousButtonImg=this.imgPath+"previous.png",this.nextButtonImg=this.imgPath+"next.png","arrows"===this.speedIcons?(this.fasterButtonImg=this.imgPath+"slower.png",this.slowerButtonImg=this.imgPath+"faster.png"):"animals"===this.speedIcons&&(this.fasterButtonImg=this.imgPath+"rabbit.png",this.slowerButtonImg=this.imgPath+"turtle.png"),this.captionsButtonImg=this.imgPath+"captions.png",this.chaptersButtonImg=this.imgPath+"chapters.png",this.signButtonImg=this.imgPath+"sign.png",this.transcriptButtonImg=this.imgPath+"transcript.png",this.descriptionsButtonImg=this.imgPath+"descriptions.png",this.fullscreenExpandButtonImg=this.imgPath+"fullscreen-expand.png",this.fullscreenCollapseButtonImg=this.imgPath+"fullscreen-collapse.png",this.prefsButtonImg=this.imgPath+"preferences.png",this.helpButtonImg=this.imgPath+"help.png"},AblePlayer.prototype.getSvgData=function(t){var e=Array();switch(t){case"play":e[0]="0 0 16 20",e[1]="M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z";break;case"pause":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"stop":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"restart":e[0]="0 0 20 20",e[1]="M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z";break;case"rewind":e[0]="0 0 20 20",e[1]="M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z";break;case"forward":e[0]="0 0 20 20",e[1]="M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z";break;case"previous":e[0]="0 0 20 20",e[1]="M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z";break;case"next":e[0]="0 0 20 20",e[1]="M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z";break;case"slower":e[0]="0 0 20 20",e[1]="M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z";break;case"faster":e[0]="0 0 11 20",e[1]="M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"turtle":e[0]="0 0 20 20",e[1]="M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z";break;case"rabbit":e[0]="0 0 20 20",e[1]="M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z";break;case"ellipsis":e[0]="0 0 20 20",e[1]="M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z";break;case"pipe":e[0]="0 0 20 20",e[1]="M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z";break;case"captions":e[0]="0 0 20 20",e[1]="M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z";break;case"descriptions":e[0]="0 0 20 20",e[1]="M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z";break;case"sign":e[0]="0 0 20 20",e[1]="M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z";break;case"mute":case"volume-mute":e[0]="0 0 20 20",e[1]="M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z";break;case"volume-soft":e[0]="0 0 20 20",e[1]="M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-medium":e[0]="0 0 20 20",e[1]="M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-loud":e[0]="0 0 21 20",e[1]="M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"chapters":e[0]="0 0 20 20",e[1]="M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z";break;case"transcript":e[0]="0 0 20 20",e[1]="M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z";break;case"preferences":e[0]="0 0 20 20",e[1]="M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z";break;case"close":e[0]="0 0 16 20",e[1]="M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z";break;case"fullscreen-expand":e[0]="0 0 20 20",e[1]="M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z";break;case"fullscreen-collapse":e[0]="0 0 20 20",e[1]="M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"help":e[0]="0 0 11 20",e[1]="M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z"}return e},AblePlayer.prototype.reinitialize=function(){var e,i;if(i=(e=new t.Deferred).promise(),window.console\|\|(this.debug=!1),this.startedPlaying=!1,this.autoScrollTranscript=!0,this.$media=t(this.media).first(),this.media=this.$media[0],this.$media.is("audio"))this.mediaType="audio";else{if(!this.$media.is("video"))return this.provideFallback(),e.fail(),i;this.mediaType="video"}return this.$sources=this.$media.find("source"),this.player=this.getPlayer(),this.player\|\|this.provideFallback(),this.setIconType(),e.resolve(),i},AblePlayer.prototype.setPlayerSize=function(t,e){this.$media.attr("id");"audio"===this.mediaType?this.playerWidth&&this.$ableWrapper.css("width",this.playerWidth+"px"):t>0&&e>0&&(this.playerWidth=t,this.playerHeight=e,this.aspectRatio=e/t)},AblePlayer.prototype.setIconType=function(){var e,i,s;if(this.forceIconType)return!1;document.createElementNS&&document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect?this.iconType="svg":(window.getComputedStyle?(t("span.icon-play").length?i=t("span.icon-play"):(e=t("<span>",{class:"icon-play able-clipped"}),t("body").append(e),i=e),void 0!==(s=window.getComputedStyle(i.get(0),null).getPropertyValue("font-family"))&&-1!==s.indexOf("able")?this.iconType="font":this.iconType="image"):this.iconType="image",void 0!==e&&e.remove())},AblePlayer.prototype.setupInstance=function(){var e=new t.Deferred,i=e.promise();return this.$media.attr("id")?this.mediaId=this.$media.attr("id"):(this.mediaId="ableMediaId_"+this.ableIndex,this.$media.attr("id",this.mediaId)),e.resolve(),i},AblePlayer.prototype.setupInstancePlaylist=function(){var e=this;if(this.hasPlaylist=!1,t(".able-playlist").each((function(){if(t(this).data("player")===e.mediaId){e.hasPlaylist=!0,e.$playlist=t(this).find("li"),t(this).find("li[data-youtube-id]").each((function(){var i=t(this).attr("data-youtube-id"),s=e.getYouTubePosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)})),t(this).find("li[data-vimeo-id]").each((function(){var i=t(this).attr("data-youtube-id"),s=e.getVimeoPosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)})),t(this).find("li span").attr("aria-hidden","true"),e.playlistIndex=0;var i=t(this).data("embedded");e.playlistEmbed=void 0!==i&&!1!==i}})),this.hasPlaylist&&this.loop&&this.media.removeAttribute("loop"),this.hasPlaylist&&this.playlistEmbed){var i=this.$playlist.parent();this.$playlistDom=i.clone(),i.remove()}this.hasPlaylist&&0===this.$sources.length&&(this.cuePlaylistItem(0),this.$sources=this.$media.find("source"))},AblePlayer.prototype.recreatePlayer=function(){var e,i,s,a,n;if(this.player)return i=(e=new t.Deferred).promise(),s=this,this.playerDeleted=!1,this.recreatingPlayer=!0,this.playerCreated\|\|(this.loadCurrentPreferences(),this.injectPlayerCode(),this.resizePlayer(this.media.videoWidth,this.media.videoHeight)),this.getSampleDescriptionText(),this.initSignLanguage(),this.initPlayer().then((function(){s.getTracks().then((function(){s.initDescription().then((function(){s.setupTracks().then((function(){s.hasClosedDesc&&(!s.$descDiv\|\|s.$descDiv&&!t.contains(s.$ableDiv[0],s.$descDiv[0]))&&s.injectTextDescriptionArea(),s.initSpeech("init"),s.setupTranscript().then((function(){s.initStenoFrame().then((function(){s.stenoMode&&s.$stenoFrame&&(s.stenoFrameContents=s.$stenoFrame.contents()),s.getMediaTimes().then((function(t){for(s.duration=t.duration,s.elapsed=t.elapsed,s.setFullscreen(!1),void 0===s.volume&&(s.volume=s.defaultVolume),s.volume&&s.setVolume(s.volume),s.transcriptType&&(s.addTranscriptAreaEvents(),s.updateTranscript()),s.captions.length&&s.initDefaultCaption(),s.setMediaAttributes(),s.addControls(),s.addEventListeners(),a=s.getPreferencesGroups(),n=0;n<a.length;n++)s.injectPrefsForm(a[n]);s.setupPopups(),s.updateCaption(),s.injectVTS(),s.chaptersDivLocation&&s.populateChaptersDiv(),s.showSearchResults(),"html5"===s.player&&(s.loadingMedia\|\|(s.$media[0].load(),s.loadingMedia=!0)),setTimeout((function(){s.refreshControls("init"),e.resolve()}),100)}))}))}))}))}))}))}),(function(){s.provideFallback()})),i;console.log("Can't create player; no appropriate player type detected.")},AblePlayer.prototype.initPlayer=function(){var e,i=this;"html5"===this.player?e=this.initHtml5Player():"youtube"===this.player?e=this.initYouTubePlayer():"vimeo"===this.player&&(e=this.initVimeoPlayer());var s=new t.Deferred,a=s.promise();return e.done((function(){i.useFixedSeekInterval?(i.seekInterval\|\|(i.seekInterval=i.defaultSeekInterval),i.seekIntervalCalculated=!0):i.setSeekInterval(),s.resolve()})).fail((function(){s.reject()})),a},AblePlayer.prototype.initStenoFrame=function(){var e,i;return i=(e=new t.Deferred).promise(),this.stenoMode&&this.$stenoFrame?(this.$stenoFrame[0].contentWindow,"complete"==document.readyState?e.resolve():this.$stenoFrame.on("load",(function(){e.resolve()}))):e.resolve(),i},AblePlayer.prototype.setSeekInterval=function(){var t;this.seekInterval=this.defaultSeekInterval,void 0===(t=this.useChapterTimes?this.chapterDuration:this.duration)\|\|t<1?this.seekIntervalCalculated=!1:(this.seekInterval=t<=20?5:t<=30?6:t<=40?8:t<=100?10:t/10,this.seekIntervalCalculated=!0)},AblePlayer.prototype.initDefaultCaption=function(){var t,e;if((t=this.captions).length>0){for(e=0;e<t.length;e++)!0===t[e].def&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);if(void 0===this.captionLang)for(e=0;e<t.length;e++)t[e].language===this.lang&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);void 0===this.captionLang&&(this.captionLang=t[0].language,this.selectedCaptions=t[0]),void 0!==this.captionLang&&(this.$transcriptLanguageSelect&&this.$transcriptLanguageSelect.find("option[lang="+this.captionLang+"]").prop("selected",!0),this.syncTrackLanguages("init",this.captionLang)),"vimeo"===this.player&&(this.usingVimeoCaptions&&1==this.prefCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then((function(t){})).catch((function(t){t.name})):this.vimeoPlayer.disableTextTrack().then((function(){})).catch((function(t){})))}},AblePlayer.prototype.initHtml5Player=function(){var e=new t.Deferred,i=e.promise();return e.resolve(),i},AblePlayer.prototype.setMediaAttributes=function(){this.$media.attr("tabindex",-1);var t=this.$media.get(0).textTracks;if(t)for(var e=0;e<t.length;)t[e].mode="disabled",e+=1},AblePlayer.prototype.getPlayer=function(){return this.testFallback?null:this.youTubeId?"video"!==this.mediaType?null:"youtube":this.vimeoId?"video"!==this.mediaType?null:"vimeo":this.media.canPlayType?"html5":null}}(jQuery),function(t){AblePlayer.prototype.setCookie=function(t){Cookies.set("Able-Player",JSON.stringify(t),{expires:90,sameSite:"strict"})},AblePlayer.prototype.getCookie=function(){var t,e={preferences:{},sign:{},transcript:{},voices:[]};try{t=JSON.parse(Cookies.get("Able-Player"))}catch(i){this.setCookie(e),t=e}return t\|\|e},AblePlayer.prototype.updateCookie=function(t){var e,i,s,a,n,r,o,l;if(e=this.getCookie(),"transcript"===t\|\|"sign"===t)"transcript"===t?(s=(i=this.$transcriptArea).position(),void 0===e.transcript&&(e.transcript={}),e.transcript.position=i.css("position"),e.transcript.zindex=i.css("z-index"),e.transcript.top=s.top,e.transcript.left=s.left,e.transcript.width=i.width(),e.transcript.height=i.height()):"sign"===t&&(s=(i=this.$signWindow).position(),void 0===e.sign&&(e.sign={}),e.sign.position=i.css("position"),e.sign.zindex=i.css("z-index"),e.sign.top=s.top,e.sign.left=s.left,e.sign.width=i.width(),e.sign.height=i.height());else if("voice"===t){void 0===e.voices&&(e.voices=[]),o=!1;for(var h=0;h<e.voices.length;h++)e.voices[h].lang===this.prefDescVoiceLang&&(o=!0,e.voices[h].name=this.prefDescVoice);o\|\|(l={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(l))}else for(a=this.getAvailablePreferences(),n=0;n<a.length;n++)(r=a[n].name)==t&&(e.preferences[r]=this[r]);this.setCookie(e)},AblePlayer.prototype.getPreferencesGroups=function(){return this.usingYouTubeCaptions?["captions","descriptions","keyboard"]:this.usingVimeoCaptions?["descriptions","keyboard"]:["captions","descriptions","keyboard","transcript"]},AblePlayer.prototype.getAvailablePreferences=function(){var t=[];return t.push({name:"prefAltKey",label:this.tt.prefAltKey,group:"keyboard",default:1}),t.push({name:"prefCtrlKey",label:this.tt.prefCtrlKey,group:"keyboard",default:1}),t.push({name:"prefShiftKey",label:this.tt.prefShiftKey,group:"keyboard",default:0}),t.push({name:"prefTranscript",label:null,group:"transcript",default:0}),t.push({name:"prefHighlight",label:this.tt.prefHighlight,group:"transcript",default:1}),t.push({name:"prefAutoScrollTranscript",label:null,group:"transcript",default:1}),t.push({name:"prefTabbable",label:this.tt.prefTabbable,group:"transcript",default:0}),t.push({name:"prefCaptions",label:null,group:"captions",default:this.defaultStateCaptions}),this.usingYouTubeCaptions\|\|("video"===this.mediaType&&t.push({name:"prefCaptionsPosition",label:this.tt.prefCaptionsPosition,group:"captions",default:this.defaultCaptionsPosition}),t.push({name:"prefCaptionsFont",label:this.tt.prefCaptionsFont,group:"captions",default:"sans-serif"})),t.push({name:"prefCaptionsSize",label:this.tt.prefCaptionsSize,group:"captions",default:"100%"}),this.usingYouTubeCaptions\|\|(t.push({name:"prefCaptionsColor",label:this.tt.prefCaptionsColor,group:"captions",default:"white"}),t.push({name:"prefCaptionsBGColor",label:this.tt.prefCaptionsBGColor,group:"captions",default:"black"}),t.push({name:"prefCaptionsOpacity",label:this.tt.prefCaptionsOpacity,group:"captions",default:"100%"})),"video"===this.mediaType&&(t.push({name:"prefDesc",label:null,group:"descriptions",default:this.defaultStateDescriptions}),t.push({name:"prefDescMethod",label:null,group:"descriptions",default:"video"}),t.push({name:"prefDescVoice",label:this.tt.prefDescVoice,group:"descriptions",default:null}),t.push({name:"prefDescPitch",label:this.tt.prefDescPitch,group:"descriptions",default:1}),t.push({name:"prefDescRate",label:this.tt.prefDescRate,group:"descriptions",default:1}),t.push({name:"prefDescVolume",label:this.tt.volume,group:"descriptions",default:1}),t.push({name:"prefDescPause",label:this.tt.prefDescPause,group:"descriptions",default:this.defaultDescPause}),t.push({name:"prefDescVisible",label:this.tt.prefDescVisible,group:"descriptions",default:0})),t.push({name:"prefSign",label:null,group:null,default:0}),t},AblePlayer.prototype.loadCurrentPreferences=function(){for(var t=this.getAvailablePreferences(),e=this.getCookie(),i=0;i<t.length;i++){var s=t[i].name,a=t[i].default;void 0!==e.preferences[s]?this[s]=e.preferences[s]:(e.preferences[s]=a,this[s]=a)}void 0!==e.voices&&(this.prefVoices=e.voices),this.setCookie(e)},AblePlayer.prototype.injectPrefsForm=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P,k,T,C,w,$,D,x,A,S,I,N,B,M,F,V,L,O,z,E,R,W;i=this,s=this.getAvailablePreferences();var q="able-prefs-form-"+e;if((a=t("<div>",{class:"able-prefs-form "})).addClass(q),"captions"==e)n=this.tt.prefTitleCaptions;else if("descriptions"==e){n=this.tt.prefTitleDescriptions;var H=t("<p>",{text:this.tt.prefIntroDescription1}),j=t("<ul>"),K=t("<li>",{text:this.tt.prefDescFormatOption1}),Y=t("<li>",{text:this.tt.prefDescFormatOption2});j.append(K,Y),this.hasOpenDesc&&this.hasClosedDesc?(N=this.tt.prefIntroDescription2+" ",N+="<strong>"+this.tt.prefDescFormatOption1b+"</strong>",N+=" <em>"+this.tt.and+"</em> <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):this.hasOpenDesc?(N=this.tt.prefIntroDescription2,N+=" <strong>"+this.tt.prefDescFormatOption1b+"</strong>."):this.hasClosedDesc?(N=this.tt.prefIntroDescription2,N+=" <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):N=this.tt.prefIntroDescriptionNone,o=t("<p>",{html:N}),l=this.tt.prefIntroDescription3,(this.hasOpenDesc\|\|this.hasClosedDesc)&&(l+=" "+this.tt.prefIntroDescription4),h=t("<p>",{text:l}),a.append(H,j,o,h)}else"keyboard"==e?(n=this.tt.prefTitleKeyboard,r=this.tt.prefIntroKeyboard1,r+=" "+this.tt.prefIntroKeyboard2,r+=" "+this.tt.prefIntroKeyboard3,H=t("<p>",{text:r}),a.append(H)):"transcript"==e&&(n=this.tt.prefTitleTranscript);for(u=t("<div>").attr("role","group"),d="able-prefs-"+e,m=(f=this.mediaId+"-prefs-"+e)+"-legend",u.addClass(d).attr("id",f),"keyboard"===e?((g=t("<h2>"+this.tt.prefHeadingKeyboard1+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(g)):"descriptions"===e&&((g=t("<h2>"+this.tt.prefHeadingTextDescription+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(g)),p=0;p<s.length;p++)if(s[p].group==e&&s[p].label){if(b="able-"+(v=s[p].name),P=this.mediaId+"_"+v,y=t("<div>").addClass(b),"captions"===e){for(k=t('<label for="'+P+'"> '+s[p].label+"</label>"),T=t("<select>",{name:v,id:P}),"prefCaptions"!==v&&"prefCaptionsStyle"!==v&&T.change((function(){A=t(this).attr("name"),i.stylizeCaptions(i.$sampleCapsDiv,A)})),C=this.getCaptionsOptions(v),c=0;c<C.length;c++)"prefCaptionsPosition"===v?"overlay"===($=C[c])?x=this.tt.captionsPositionOverlay:"below"===$&&($=C[c],x=this.tt.captionsPositionBelow):"prefCaptionsFont"===v\|\|"prefCaptionsColor"===v\|\|"prefCaptionsBGColor"===v?($=C[c][0],x=C[c][1]):"prefCaptionsOpacity"===v?($=C[c],x=C[c],"0%"===$?x+=" ("+this.tt.transparent+")":"100%"===$&&(x+=" ("+this.tt.solid+")")):($=C[c],x=C[c]),w=t("<option>",{value:$,text:x}),this[v]===$&&w.prop("selected",!0),T.append(w);y.append(k,T)}else if("descriptions"===e){if(k=t('<label for="'+P+'"> '+s[p].label+"</label>"),"prefDescPause"===v\|\|"prefDescVisible"===v)y.addClass("able-prefs-checkbox"),T=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&T.prop("checked",!0),y.append(T,k);else if(this.synth){if(y.addClass("able-prefs-select"),T=t("<select>",{name:v,id:P}),"prefDescVoice"===v&&this.descVoices){for(B=this.getPrefDescVoice(),c=0;c<this.descVoices.length;c++)$=this.descVoices[c].name,D=this.descVoices[c].lang.substring(0,2).toLowerCase(),x=$+" ("+this.descVoices[c].lang+")",w=t("<option>",{value:$,"data-lang":D,text:x}),B===$&&w.prop("selected",!0),T.append(w);this.$voiceSelectField=T}else if("prefDescPitch"==v?C=[0,.5,1,1.5,2]:"prefDescRate"==v?C=[.7,.8,.9,1,1.1,1.2,1.5,2,2.5,3]:"prefDescVolume"==v&&(C=[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]),void 0!==C)for(c=0;c<C.length;c++)$=C[c],x=this.makePrefsValueReadable(v,$),w=t("<option>",{value:$,text:x}),this[v]==$&&w.prop("selected",!0),T.append(w),y.append(k,T);T.on("change",(function(){i.announceDescriptionText("sample",i.currentSampleText)})),y.append(k,T)}}else k=t('<label for="'+P+'"> '+s[p].label+"</label>"),T=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&T.prop("checked",!0),"keyboard"===e&&T.on("change",(function(){"prefAltKey"===(A=t(this).attr("name"))?(S=".able-modkey-alt",I=i.tt.prefAltKey+" + "):"prefCtrlKey"===A?(S=".able-modkey-ctrl",I=i.tt.prefCtrlKey+" + "):"prefShiftKey"===A&&(S=".able-modkey-shift",I=i.tt.prefShiftKey+" + "),t(this).is(":checked")?t(S).text(I):t(S).text("")})),y.append(T,k);u.append(y)}if(a.append(u),"captions"===e)this.usingYouTubeCaptions\|\|(this.$sampleCapsDiv=t("<div>",{class:"able-captions-sample"}).text(this.tt.sampleCaptionText),a.append(this.$sampleCapsDiv),this.stylizeCaptions(this.$sampleCapsDiv));else if("descriptions"===e)this.synth&&(this.$sampleDescDiv=t("<div>",{class:"able-desc-sample"}).text(this.tt.sampleDescriptionText),a.append(this.$sampleDescDiv),this.currentSampleText=this.tt.sampleDescriptionText);else if("keyboard"===e){for(M=t("<h2>",{text:this.tt.prefHeadingKeyboard2}),F=t("<ul>"),V=[],L=[],p=0;p<this.controls.length;p++)"play"===this.controls[p]?(V.push(this.tt.play+"/"+this.tt.pause),L.push("p</span> <em>"+this.tt.or+'</em> <span class="able-help-modifiers"> '+this.tt.spacebar)):"restart"===this.controls[p]?(V.push(this.tt.restart),L.push("s")):"previous"===this.controls[p]?(V.push(this.tt.prevTrack),L.push("b")):"next"===this.controls[p]?(V.push(this.tt.nextTrack),L.push("n")):"rewind"===this.controls[p]?(V.push(this.tt.rewind),L.push("r")):"forward"===this.controls[p]?(V.push(this.tt.forward),L.push("f")):"volume"===this.controls[p]?(V.push(this.tt.volume),L.push("v</span> <em>"+this.tt.or+'</em> <span class="able-modkey">1-9'),V.push(this.tt.mute+"/"+this.tt.unmute),L.push("m")):"captions"===this.controls[p]?(this.captions.length>1?V.push(this.tt.captions):this.captionsOn?V.push(this.tt.hideCaptions):V.push(this.tt.showCaptions),L.push("c")):"descriptions"===this.controls[p]?(this.descOn?V.push(this.tt.turnOffDescriptions):V.push(this.tt.turnOnDescriptions),L.push("d")):"prefs"===this.controls[p]?(V.push(this.tt.preferences),L.push("e")):"help"===this.controls[p]&&(V.push(this.tt.help),L.push("h"));for(p=0;p<L.length;p++)O='<span class="able-modkey-alt">',1===this.prefAltKey&&(O+=this.tt.prefAltKey+" + "),O+="</span>",O+='<span class="able-modkey-ctrl">',1===this.prefCtrlKey&&(O+=this.tt.prefCtrlKey+" + "),O+="</span>",O+='<span class="able-modkey-shift">',1===this.prefShiftKey&&(O+=this.tt.prefShiftKey+" + "),O+="</span>",O+='<span class="able-modkey">'+L[p]+"</span>",O+=" = "+V[p],z=t("<li>",{html:O}),F.append(z);O='<span class="able-modkey">'+this.tt.escapeKey+"</span>",O+=" = "+this.tt.escapeKeyFunction,z=t("<li>",{html:O}),F.append(z),a.append(M,F)}t("body").append(a),E=new AccessibleDialog(a,this.$prefsButton,"dialog",!0,n,H,i.tt.closeButtonLabel,"32em"),a.append("<hr>"),R=t('<button class="modal-button">'+this.tt.save+"</button>"),W=t('<button class="modal-button">'+this.tt.cancel+"</button>"),R.click((function(){E.hide(),i.savePrefsFromForm()})),W.click((function(){E.hide(),i.resetPrefsForm()})),a.append(R),a.append(W),"captions"!==e&&"transcript"!==e\|\|u.attr("aria-labelledby",E.titleH1.attr("id")),"captions"===e?this.captionPrefsDialog=E:"descriptions"===e?this.descPrefsDialog=E:"keyboard"===e?this.keyboardPrefsDialog=E:"transcript"===e&&(this.transcriptPrefsDialog=E),t("div.able-prefs-form button.modalCloseButton").click((function(){i.resetPrefsForm()})),t("div.able-prefs-form").keydown((function(t){27===t.which&&i.resetPrefsForm()}))},AblePlayer.prototype.getPrefDescVoice=function(){var t,e,i;if(t=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,(e=this.getCookie()).voices)for(i=0;i<e.voices.length;i++)if(e.voices[i].lang===t)return e.voices[i].name;return null},AblePlayer.prototype.rebuildDescPrefsForm=function(){var e,i,s,a;for(this.$voiceSelectField=t("#"+this.mediaId+"_prefDescVoice"),this.$voiceSelectField.empty(),e=0;e<this.descVoices.length;e++)s=(i=this.descVoices[e].name)+" ("+this.descVoices[e].lang+")",a=t("<option>",{value:i,"data-lang":this.descVoices[e].lang.substring(0,2).toLowerCase(),text:s}),this.prefDescVoice==i&&a.prop("selected",!0),this.$voiceSelectField.append(a)},AblePlayer.prototype.makePrefsValueReadable=function(t,e){if("prefDescPitch"===t){if(0===e)return this.tt.prefDescPitch1;if(.5===e)return this.tt.prefDescPitch2;if(1===e)return this.tt.prefDescPitch3;if(1.5===e)return this.tt.prefDescPitch4;if(2===e)return this.tt.prefDescPitch5}else if("prefDescRate"===t){if(.7===e)return 1;if(.8===e)return 2;if(.9===e)return 3;if(1===e)return 4;if(1.1===e)return 5;if(1.2===e)return 6;if(1.5===e)return 7;if(2===e)return 8;if(2.5===e)return 9;if(3===e)return 10}else if("prefDescVolume"===t)return 10e;return e},AblePlayer.prototype.resetPrefsForm=function(){var e,i,s,a;for(e=this.getCookie(),i=this.getAvailablePreferences(),s=0;s<i.length;s++)a=i[s].name,this.mediaId+"_"+a,-1!==a.indexOf("Captions")&&"prefCaptions"!==a?t('select[name="'+a+'"]').val(e.preferences[a]):1===this[a]?t('input[name="'+a+'"]').prop("checked",!0):t('input[name="'+a+'"]').prop("checked",!1);this.stylizeCaptions(this.$sampleCapsDiv)},AblePlayer.prototype.savePrefsFromForm=function(){var e,i,s,a,n,r,o,l,h,p,c,u;o=0,h=0,p=!1,e=this.getCookie(),i=this.getAvailablePreferences();for(var d=0;d<i.length;d++)if(i[d].label)if(s=i[d].name,a=this.mediaId+"_"+s,"prefDescVoice"===s){void 0===e.voices&&(e.voices=[]),n=this.mediaId+"_prefDescVoice",this.prefDescVoice=t("select#"+n).find(":selected").val(),this.prefDescVoiceLang=t("select#"+n).find(":selected").attr("data-lang"),l=!1;for(var f=0;f<e.voices.length;f++)e.voices[f].lang===this.prefDescVoiceLang&&(l=!0,e.voices[f].name=this.prefDescVoice);l\|\|(r={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(r)),o++}else"prefDescMethod"==s?(this.prefDescMethod="video",this.prefDescMethod!==e.preferences.prefDescMethod&&(e.preferences.prefDescMethod=this.prefDescMethod,o++)):-1!==s.indexOf("Captions")&&"prefCaptions"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++,h++),"prefCaptionsSize"===s&&(p=!0,c=u)):-1!==s.indexOf("Desc")&&"prefDescPause"!==s&&"prefDescVisible"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++)):t('input[id="'+a+'"]').is(":checked")?(e.preferences[s]=1,1===this[s]\|\|(this[s]=1,o++)):(e.preferences[s]=0,1===this[s]&&(this[s]=0,o++));if(o>0?(this.setCookie(e),this.showAlert(this.tt.prefSuccess)):this.showAlert(this.tt.prefNoChange),"youtube"===this.player&&void 0!==this.usingYouTubeCaptions&&this.usingYouTubeCaptions&&p&&this.youTubePlayer.setOption("captions","fontSize",this.translatePrefs("size",c,"youtube")),AblePlayerInstances.length>1)for(d=0;d<AblePlayerInstances.length;d++)AblePlayerInstances[d].updatePrefs(),AblePlayerInstances[d].geteferences(),AblePlayerInstances[d].resetPrefsForm(),h>0&&(AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$captionsDiv),void 0!==AblePlayerInstances[d].$descDiv&&AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$descDiv));else this.updatePrefs(),h>0&&(this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv))},AblePlayer.prototype.updatePrefs=function(){this.$transcriptDiv&&(1===this.prefTabbable?this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"):this.$transcriptDiv.find("span.able-transcript-seekpoint").removeAttr("tabindex"),0===this.prefHighlight&&this.$transcriptDiv.find("span").removeClass("able-highlight")),this.updateCaption(),this.initDescription()},AblePlayer.prototype.usingModifierKeys=function(t){return!(1===this.prefAltKey&&!t.altKey)&&(!(1===this.prefCtrlKey&&!t.ctrlKey)&&!(1===this.prefShiftKey&&!t.shiftKey))}}(jQuery),function(t){function actList(t,e){for(var i=[],s=0;s<e.length;s++)i.push(act(t,e[s]));return i}function act(t,e){var i=e(t);if(null!==t.error)throw t.error;return i}function updatePosition(t,e){for(var i=0;i<e.length;i++)"\n"===e[i]?(t.column=1,t.line+=1):t.column+=1}function cut(t,e){var i=t.text.substring(0,e);return updatePosition(t,i),t.text=t.text.substring(e),i}function cutLine(t,e){var i,s=t.text.indexOf("\n");return-1===s?(updatePosition(t,i=t.text),t.text=""):(i=t.text.substring(0,s),updatePosition(t,i+"\n"),t.text=t.text.substring(s+1)),i}function peekLine(t){var e=t.text.indexOf("\n");return-1===e?t.text:t.text.substring(0,e)}function parseFileBody(t){actList(t,[eatOptionalBOM,eatSignature]);var e=t.text[0];" "===e\|\|"\t"===e\|\|"\n"===e?actList(t,[eatUntilEOLInclusive,parseMetadataHeaders,eatAtLeast1EmptyLines,parseCuesAndComments]):t.error="WEBVTT signature not followed by whitespace."}function parseMetadataHeaders(t){for(;;){var e=peekLine(t);if(-1!==e.indexOf("--\x3e"))return;if(0===e.length)return;var i=act(t,getMetadataKeyValue);t.metadata[i[0]]=i[1],act(t,eatUntilEOLInclusive)}}function nextSpaceOrNewline(t){var e=[],i=t.indexOf(" ");i>=0&&e.push(i);var s=t.indexOf("\t");s>=0&&e.push(s);var a=t.indexOf("\n");return a>=0&&e.push(a),Math.min.apply(null,e)}function getMetadataKeyValue(t){var e=t.text.indexOf("\n"),i=cut(t,e),s=i.indexOf(":");return-1===s?void(t.error="Missing colon."):[i.substring(0,s),i.substring(s+1)]}function getSettingsKeyValue(t){var e=cut(t,nextSpaceOrNewline(t.text)),i=e.indexOf(":");return-1===i?void(t.error="Missing colon."):[e.substring(0,i),e.substring(i+1)]}function parseCuesAndComments(e){for(;;){var i=peekLine(e);if(0!==i.indexOf("NOTE")\|\|4!==i.length&&" "!==i[4]&&"\t"!==i[4])if(0===t.trim(i).length&&e.text.length>0)act(e,eatEmptyLines);else{if(!(t.trim(i).length>0))return;act(e,parseCue)}else actList(e,[eatComment,eatEmptyLines])}}function parseCue(t){var e,i=peekLine(t);if(-1===i.indexOf("--\x3e")&&(e=cutLine(t),-1===(i=peekLine(t)).indexOf("--\x3e")))return"Invalid WebVTT file: "+t.src+"\n","Line: "+t.line+", ","Column: "+t.column+"\n",void(console.warn\|\|console.log);var s=actList(t,[getTiming,eatAtLeast1SpacesOrTabs,eatArrow,eatAtLeast1SpacesOrTabs,getTiming]),a=s[0],n=s[4];if(a>=n)t.error="Start time is not sooner than end time.";else{act(t,eatSpacesOrTabs);var r=act(t,getCueSettings);cut(t,1);var o=act(t,getCuePayload);void 0===e&&(e=t.cues.length+1),t.cues.push({id:e,start:a,end:n,settings:r,components:o})}}function getCueSettings(t){for(var e={};t.text.length>0&&"\n"!==t.text[0];){var i=act(t,getSettingsKeyValue);e[i[0]]=i[1],act(t,eatSpacesOrTabs)}return e}function getCuePayload(e){for(var i={type:"internal",tagName:"",value:"",classes:[],annotation:"",parent:null,children:[],language:""},s=i,a=[];e.text.length>0;){var n=peekLine(e);if(-1!==n.indexOf("--\x3e")\|\|/^\s+$/.test(n))break;if(e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]){cut(e,2);break}var r=getCueToken(e);if("string"===r.type)s.children.push(r);else if("startTag"===r.type)r.type=r.tagName,r.parent=s,-1!==t.inArray(r.tagName,["i","b","u","ruby"])\|\|"rt"===r.tagName&&"ruby"===s.tagName?(a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"c"===r.tagName\|\|"v"===r.tagName?(r.value=r.annotation,a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"lang"===r.tagName&&(a.push(r.annotation),a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r);else if("endTag"===r.type)r.tagName===s.type&&-1!==t.inArray(r.tagName,["c","i","b","u","ruby","rt","v"])?s=s.parent:"lang"===r.tagName&&"lang"===s.type?(s=s.parent,a.pop()):"ruby"===r.tagName&&"rt"===s.type&&(s=s.parent.parent);else if("timestampTag"===r.type){var o={text:r.value,error:null,metadata:{},cues:[],line:1,column:1};try{var l=act(o,getTiming);0===o.text.length&&(r.value=l,s.push(r))}catch(t){}}}return i}function getCueToken(e){for(var i="data",s=[],a="",n={type:"",tagName:"",value:"",classes:[],annotation:"",children:[]};;){var r;if(r=e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]?"":e.text.length>0?e.text[0]:"","data"===i)if("&"===r)a="&",i="escape";else if("<"===r){if(0!==s.length)return n.type="string",n.value=s.join(""),n;i="tag"}else{if(""===r)return{type:"string",value:s.join("")};s.push(r)}else if("escape"===i)if("&"===r)s.push(a),a="&";else if(r.match(/[0-9a-z]/))a+=r;else if(";"===r)"&"===a?s.push("&"):"<"===a?s.push("<"):">"===a?s.push(">"):"&lrm"===a?s.push("‎"):"&rlm"===a?s.push("‏"):" "===a?s.push(" "):(s.push(a),s.push(";")),i="data";else{if("<"===r\|\|""===r)return s.push(a),n.type="string",n.value=s.join(""),n;if("\t"===r\|\|"\n"===r\|\|"\f"===r\|\|" "===r)return s.push(a),n.type="string",n.value=s.join(""),n;s.push(a),i="data"}else if("tag"===i)if("\t"===r\|\|"\n"===r\|\|"\f"===r\|\|" "===r)i="startTagAnnotation";else if("."===r)i="startTagClass";else if("/"===r)i="endTag";else if(r.match("[0-9]"))i="timestampTag",s.push(r);else{if(">"===r){cut(e,1);break}if(""===r)return n.tagName="",n.type="startTag",n;s.push(r),i="startTag"}else if("startTag"===i)if("\t"===r\|\|"\f"===r\|\|" "===r)i="startTagAnnotation";else if("\n"===r)a=r,i="startTagAnnotation";else if("."===r)i="startTagClass";else{if(">"===r)return cut(e,1),n.tagName=s.join(""),n.type="startTag",n;if(""===r)return n.tagName=s.join(""),n.type="startTag",n;s.push(r)}else if("startTagClass"===i)if("\t"===r\|\|"\f"===r\|\|" "===r)n.classes.push(a),a="",i="startTagAnnotation";else if("\n"===r)n.classes.push(a),a=r,i="startTagAnnotation";else if("."===r)n.classes.push(a),a="";else{if(">"===r)return cut(e,1),n.classes.push(a),n.type="startTag",n.tagName=s.join(""),n;if(""===r)return n.classes.push(a),n.type="startTag",n.tagName=s.join(""),n;a+="c"}else if("startTagAnnotation"===i){if(">"===r)return cut(e,1),a=t.trim(a).replace(/ +/," "),n.type="startTag",n.tagName=s.join(""),n.annotation=a,n;if(""===r)return a=t.trim(a).replace(/ +/," "),n.type="startTag",n.tagName=s.join(""),n.annotation=a,n;a+=r}else if("endTag"===i){if(">"===r)return cut(e,1),n.type="endTag",n.tagName=s.join(""),n;if(""===r)return n.type="endTag",n.tagName=s.join(""),n;s.push(r)}else{if("timestampTag"!==i)throw"Unknown tokenState "+i;if(">"===r)return cut(e,1),n.type="timestampTag",n.name=s.join(""),n;if(""===r)return n.type="timestampTag",n.name=s.join(""),n;s.push(r)}cut(e,1)}}function eatComment(e){if(-1===cutLine(e).indexOf("--\x3e"))for(;;){var i=peekLine(e);if(0===t.trim(i).length)return;if(-1!==i.indexOf("--\x3e"))return void(e.error="Invalid syntax: --\x3e in comment.");cutLine(e)}else e.error="Invalid syntax: --\x3e in NOTE line."}function eatOptionalBOM(t){"\ufeff"===t.text[0]&&cut(t,1)}function eatSignature(t){"WEBVTT"===t.text.substring(0,6)?cut(t,6):t.error="Invalid signature."}function eatArrow(t){t.text.length<3\|\|"--\x3e"!==t.text.substring(0,3)?t.error="Missing --\x3e":cut(t,3)}function eatSpacesOrTabs(t){for(;"\t"===t.text[0]\|\|" "===t.text[0];)cut(t,1)}function eatAtLeast1SpacesOrTabs(t){for(var e=0;"\t"===t.text[0]\|\|" "===t.text[0];)cut(t,1),e+=1;0===e&&(t.error="Missing space.")}function eatUntilEOLInclusive(t){var e=t.text.indexOf("\n");-1===e?t.error="Missing EOL.":cut(t,e+1)}function eatEmptyLines(e){for(;e.text.length>0;){var i=peekLine(e);if(0!==t.trim(i).length)break;cutLine(e)}}function eatAtLeast1EmptyLines(e){for(var i=0;e.text.length>0;){var s=peekLine(e);if(0!==t.trim(s).length)break;cutLine(e),i+=1}0===i&&(e.error="Missing empty line.")}function getTiming(t){var e=nextSpaceOrNewline(t.text);if(-1!==e){var i=cut(t,e),s=/((\d\d):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(i);if(s){var a=0,n=s[2],r=s[4];if(r){if(parseInt(r,10)>59)return void(t.error="Invalid minute range");n&&(a+=3600parseInt(n,10)),a+=60parseInt(r,10);var o=s[5];if(parseInt(o,10)>59)return void(t.error="Invalid second range");a+=parseInt(o,10),a+=parseInt(s[6],10)/1e3}else a+=parseInt(s[7],10),a+=parseInt(s[8],10)/1e3;return a}t.error="Unable to parse timestamp"}else t.error("Missing timing.")}AblePlayer.prototype.parseWebVTT=function(t,e){var i={src:t,text:e=e.replace(/(\r\n\|\n\|\r)/g,"\n"),error:null,metadata:{},cues:[],line:1,column:1};try{act(i,parseFileBody)}catch(t){console.warn\|\|console.log}return i}}(jQuery),function(t){AblePlayer.prototype.injectPlayerCode=function(){var e;this.$mediaContainer=this.$media.wrap('<div class="able-media-container"></div>').parent(),this.$ableDiv=this.$mediaContainer.wrap('<div class="able"></div>').parent(),this.$ableWrapper=this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(),this.$ableWrapper.addClass("able-skin-"+this.skin),this.$ableWrapper.css({width:this.playerWidth+"px"}),"video"===this.mediaType&&("image"==this.iconType\|\|"youtube"===this.player&&!this.hasPoster\|\|this.injectBigPlayButton()),e=t("<div>"),"video"===this.mediaType?e.addClass("able-vidcap-container"):"audio"===this.mediaType&&(e.addClass("able-audcap-container"),e.addClass("captions-off")),this.injectPlayerControlArea(),this.$captionsContainer=this.$mediaContainer.wrap(e).parent(),this.injectAlert(),this.injectPlaylist(),this.injectOffscreenHeading()},AblePlayer.prototype.injectOffscreenHeading=function(){var e;"0"==this.playerHeadingLevel\|\|(void 0===this.playerHeadingLevel&&(this.playerHeadingLevel=this.getNextHeadingLevel(this.$ableDiv)),e="h"+this.playerHeadingLevel.toString(),this.$headingDiv=t("<"+e+">"),this.$ableDiv.prepend(this.$headingDiv),this.$headingDiv.addClass("able-offscreen"),this.$headingDiv.text(this.tt.playerHeading))},AblePlayer.prototype.injectBigPlayButton=function(){var e,i,s,a;e=this,this.$bigPlayButton=t("<button>",{class:"able-big-play-button","aria-hidden":!1,"aria-label":this.tt.play,tabindex:0}),"svg"==this.iconType?(i=this.getSvgData("play"),s=t("<svg>",{focusable:"false","aria-hidden":"true",viewBox:i[0]}),a=t("<path>",{d:i[1]}),s.append(a),this.$bigPlayButton.html(s),this.$bigPlayButton.html(this.$bigPlayButton.html())):(this.$bigPlayIcon=t("<span>",{class:"icon-play"}),this.$bigPlayButton.append(this.$bigPlayIcon)),this.$bigPlayButton.click((function(t){t.preventDefault(),e.handlePlay()})),this.$mediaContainer.append(this.$bigPlayButton)},AblePlayer.prototype.injectPlayerControlArea=function(){this.$playerDiv=t("<div>",{class:"able-player",role:"region","aria-label":this.mediaType+" player"}),this.$playerDiv.addClass("able-"+this.mediaType),this.hasPlaylist&&this.showNowPlaying&&(this.$nowPlayingDiv=t("<div>",{class:"able-now-playing","aria-live":"assertive","aria-atomic":"true"})),this.$controllerDiv=t("<div>",{class:"able-controller"}),this.$controllerDiv.addClass("able-"+this.iconColor+"-controls"),this.$statusBarDiv=t("<div>",{class:"able-status-bar"}),this.$timer=t("<span>",{class:"able-timer"}),this.$elapsedTimeContainer=t("<span>",{class:"able-elapsedTime",text:"0:00"}),this.$durationContainer=t("<span>",{class:"able-duration"}),this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer),this.$speed=t("<span>",{class:"able-speed","aria-live":"assertive"}).text(this.tt.speed+": 1x"),this.$status=t("<span>",{class:"able-status","aria-live":"polite"}),this.$statusBarDiv.append(this.$timer,this.$speed,this.$status),this.showNowPlaying?this.$playerDiv.append(this.$nowPlayingDiv,this.$controllerDiv,this.$statusBarDiv):this.$playerDiv.append(this.$controllerDiv,this.$statusBarDiv),"video"===this.mediaType?this.$ableDiv.append(this.$playerDiv):this.$ableDiv.prepend(this.$playerDiv)},AblePlayer.prototype.injectTextDescriptionArea=function(){this.$descDiv=t("<div>",{class:"able-descriptions"}),this.$descDiv.attr({"aria-live":"assertive","aria-atomic":"true"}),this.$descDiv.hide(),this.$ableDiv.append(this.$descDiv)},AblePlayer.prototype.getDefaultWidth=function(t){return"transcript"===t?450:"sign"===t?400:void 0},AblePlayer.prototype.positionDraggableWindow=function(e,i){var s,a,n,r;s=this.getCookie(),"transcript"===e?(n=this.$transcriptArea,void 0!==s.transcript&&(a=s.transcript)):"sign"===e&&(n=this.$signWindow,void 0!==s.transcript&&(a=s.sign)),void 0===a\|\|t.isEmptyObject(a)?(r=this.getOptimumPosition(e,i),void 0===i&&(i=this.getDefaultWidth(e)),n.css({position:r[0],width:i,"z-index":r[3]}),"absolute"===r[0]&&n.css({top:r[1]+"px",left:r[2]+"px"})):(n.css({position:a.position,width:a.width,"z-index":a.zindex}),"absolute"===a.position&&n.css({top:a.top,left:a.left}),this.updateZIndex(e))},AblePlayer.prototype.getOptimumPosition=function(e,i){var s,a,n,r,o,l;return void 0===i&&(i=this.getDefaultWidth(e)),s=[],a=this.$ableDiv.width(),this.$ableDiv.height(),(n=this.$ableDiv.offset()).top,r=n.left,o=t(window).width(),l=0,"transcript"===e?void 0!==this.$signWindow&&this.$signWindow.is(":visible")&&(l=this.$signWindow.width()+5):"sign"===e&&void 0!==this.$transcriptArea&&this.$transcriptArea.is(":visible")&&(l=this.$transcriptArea.width()+5),i<o-(r+a+5+l)?(s[0]="absolute",s[1]=0,s[2]=a+l+5):i+5<r?(s[0]="absolute",s[1]=0,s[2]=r-i-5):s[0]="relative",s},AblePlayer.prototype.injectAlert=function(){var e;this.$alertBox=t('<div role="alert"></div>'),this.$alertBox.addClass("able-alert"),this.$alertBox.hide(),this.$alertBox.appendTo(this.$ableDiv),e="audio"==this.mediaType?"-10":"10",this.$alertBox.css({top:e+"px"}),this.$srAlertBox=t('<div role="alert"></div>'),this.$srAlertBox.addClass("able-screenreader-alert"),this.$srAlertBox.appendTo(this.$ableDiv)},AblePlayer.prototype.injectPlaylist=function(){if(!0===this.playlistEmbed){var t=this.$playlistDom.clone();t.insertBefore(this.$statusBarDiv),this.$playlist=t.find("li")}},AblePlayer.prototype.createPopup=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,f;if(s=this,a=t("<ul>",{id:this.mediaId+"-"+e+"-menu",class:"able-popup",role:"menu"}).hide(),"captions"===e&&a.addClass("able-popup-captions"),"prefs"===e)if(this.prefCats.length>1){for(n=0;n<this.prefCats.length;n++)r=t("<li></li>",{role:"menuitem",tabindex:"-1"}),"captions"===(o=this.prefCats[n])?r.text(this.tt.prefMenuCaptions):"descriptions"===o?r.text(this.tt.prefMenuDescriptions):"keyboard"===o?r.text(this.tt.prefMenuKeyboard):"transcript"===o&&r.text(this.tt.prefMenuTranscript),r.on("click",(function(){c=t(this).text(),s.showingPrefsDialog=!0,s.setFullscreen(!1),c===s.tt.prefMenuCaptions?s.captionPrefsDialog.show():c===s.tt.prefMenuDescriptions?s.descPrefsDialog.show():c===s.tt.prefMenuKeyboard?s.keyboardPrefsDialog.show():c===s.tt.prefMenuTranscript&&s.transcriptPrefsDialog.show(),s.closePopups(),s.showingPrefsDialog=!1})),a.append(r);this.$prefsButton.attr("data-prefs-popup","menu")}else 1==this.prefCats.length&&this.$prefsButton.attr("data-prefs-popup",this.prefCats[0]);else if("captions"===e\|\|"chapters"===e){for(l=!1,n=0;n<i.length;n++)h=i[n],("captions"!==e\|\|"html5"!==this.player\|\|void 0!==h.cues)&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1",lang:h.language}),h.def&&1==this.prefCaptions?(r.attr("aria-checked","true"),l=!0):r.attr("aria-checked","false"),"captions"==e?(r.text(h.label),r.on("click",this.getCaptionClickFunction(h))):"chapters"==e&&(r.text(this.flattenCueForCaption(h)+" - "+this.formatSecondsAsColonTime(h.start)),r.on("click",this.getChapterClickFunction(h.start))),a.append(r));"captions"===e&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1"}).text(this.tt.captionsOff),0===this.prefCaptions?(r.attr("aria-checked","true"),l=!0):r.attr("aria-checked","false"),r.on("click",this.getCaptionOffFunction()),a.append(r))}else if("transcript-window"===e\|\|"sign-window"===e)for((p=[]).push({name:"move",label:this.tt.windowMove}),p.push({name:"resize",label:this.tt.windowResize}),p.push({name:"close",label:this.tt.windowClose}),n=0;n<p.length;n++)(r=t("<li></li>",{role:"menuitem",tabindex:"-1","data-choice":p[n].name})).text(p[n].label),r.on("click mousedown",(function(i){if(i.stopPropagation(),void 0!==i.button&&0!==i.button)return!1;s.windowMenuClickRegistered\|\|s.finishingDrag\|\|(s.windowMenuClickRegistered=!0,s.handleMenuChoice(e.substring(0,e.indexOf("-")),t(this).attr("data-choice"),i))})),a.append(r);return"captions"!==e\|\|l?"chapters"===e&&(a.find('li:contains("'+this.defaultChapter+'")')?a.find('li:contains("'+this.defaultChapter+'")').attr("aria-checked","true").addClass("able-focus"):a.find("li").first().attr("aria-checked","true").addClass("able-focus")):a.find("li[lang="+this.captionLang+"]")?a.find("li[lang="+this.captionLang+"]").attr("aria-checked","true"):a.find("li").last().attr("aria-checked","true"),a.on("keydown",(function(e){t(this).attr("id").split("-")[1],(u=t(this).find("li:focus")).is(":first-child")?(d=t(this).find("li").last(),f=u.next()):u.is(":last-child")?(d=u.prev(),f=t(this).find("li").first()):(d=u.prev(),f=u.next()),9===e.which?e.shiftKey?(u.removeClass("able-focus"),d.focus().addClass("able-focus")):(u.removeClass("able-focus"),f.focus().addClass("able-focus")):40===e.which\|\|39===e.which?(u.removeClass("able-focus"),f.focus().addClass("able-focus")):38==e.which\|\|37===e.which?(u.removeClass("able-focus"),d.focus().addClass("able-focus")):32===e.which\|\|13===e.which?u.click():27===e.which&&(u.removeClass("able-focus"),s.closePopups(),e.stopPropagation),e.preventDefault()})),this.$controllerDiv.append(a),a},AblePlayer.prototype.closePopups=function(){var t=this;this.chaptersPopup&&this.chaptersPopup.is(":visible")&&(this.chaptersPopup.hide(),this.$chaptersButton.attr("aria-expanded","false").focus()),this.captionsPopup&&this.captionsPopup.is(":visible")&&(this.captionsPopup.hide(),this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)),this.prefsPopup&&this.prefsPopup.is(":visible")&&!this.hidingPopup&&(this.hidingPopup=!0,this.prefsPopup.hide(),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$prefsButton.attr("aria-expanded","false"),this.showingPrefsDialog\|\|this.waitThenFocus(t.$prefsButton),setTimeout((function(){t.hidingPopup=!1}),100)),this.$volumeSlider&&this.$volumeSlider.is(":visible")&&(this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus()),this.$transcriptPopup&&this.$transcriptPopup.is(":visible")&&(this.hidingPopup=!0,this.$transcriptPopup.hide(),this.$transcriptPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$transcriptPopupButton.attr("aria-expanded","false").focus(),setTimeout((function(){t.hidingPopup=!1}),100)),this.$signPopup&&this.$signPopup.is(":visible")&&(this.$signPopup.hide(),this.$signPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$signPopupButton.attr("aria-expanded","false").focus())},AblePlayer.prototype.setupPopups=function(t){var e,i;if(e=[],void 0===t&&e.push("prefs"),"captions"!==t&&void 0!==t\|\|this.captions.length>0&&e.push("captions"),"chapters"!==t&&void 0!==t\|\|this.chapters.length>0&&this.useChaptersButton&&e.push("chapters"),"transcript-window"===t&&"popup"===this.transcriptType&&e.push("transcript-window"),"sign-window"===t&&this.hasSignLanguage&&e.push("sign-window"),e.length>0){0;for(var s=0;s<e.length;s++){var a=e[s];if("prefs"==a)this.prefsPopup=this.createPopup("prefs");else if("captions"==a)void 0!==this.captionsPopup&&this.captionsPopup\|\|(this.captionsPopup=this.createPopup("captions",this.captions));else if("chapters"==a)i=this.selectedChapters?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[],void 0!==this.chaptersPopup&&this.chaptersPopup\|\|(this.chaptersPopup=this.createPopup("chapters",i));else{if("transcript-window"==a)return this.createPopup("transcript-window");if("sign-window"==a)return this.createPopup("sign-window")}}}},AblePlayer.prototype.provideFallback=function(){var e,i;if(!this.usingFallback){if(this.usingFallback=!0,this.testFallback\|\|(this.testFallback=1),void 0===this.$media&&(this.$media=t(this.media)),this.$media.attr("id")?this.mediaId=this.$media.attr("id"):this.mediaId="media"+Math.floor(1e9Math.random()).toString(),this.hasFallback=!1,this.$media.children().length)for(e=0;e<this.$media.children().length&&!this.hasFallback;)"SOURCE"!==this.$media.children()[e].tagName&&"TRACK"!==this.$media.children()[e].tagName&&(this.hasFallback=!0),e++;if(this.hasFallback\|\|(i=t("<p>").text("Media player unavailable."),this.$media.append(i)),this.$media.attr("width")&&this.$media.css("width",this.$media.attr("width")+"px"),this.$media.attr("height")&&this.$media.css("height",this.$media.attr("height")+"px"),this.$media.removeAttr("data-able-player"),this.$media.prop("controls",!0),2==this.testFallback){if(t(this.$media).replaceWith(t('<foobar id="foobar-'+this.mediaId+'">')),this.$newFallbackElement=t("#foobar-"+this.mediaId),this.$media.children().length)for(e=this.$media.children().length-1;e>=0;)this.$newFallbackElement.prepend(t(this.$media.children()[e])),e--;this.hasFallback\|\|this.$newFallbackElement.append(i)}}},AblePlayer.prototype.calculateControlLayout=function(){var t,e,i;return(t=[])[0]=[],t[1]=[],"legacy"===this.skin&&(t[2]=[],t[3]=[]),t[0].push("play"),t[0].push("restart"),t[0].push("rewind"),t[0].push("forward"),"legacy"===this.skin&&t[1].push("seek"),this.hasPlaylist&&("legacy"===this.skin\|\|"2020"==this.skin)&&(t[0].push("previous"),t[0].push("next")),this.isPlaybackRateSupported()?(e=!0,"legacy"===this.skin&&(t[2].push("slower"),t[2].push("faster"))):e=!1,i=0,this.hasCaptions&&(i++,"legacy"===this.skin?t[2].push("captions"):"2020"==this.skin&&t[1].push("captions")),this.hasSignLanguage&&(i++,"legacy"===this.skin?t[2].push("sign"):"2020"==this.skin&&t[1].push("sign")),"video"===this.mediaType&&(this.hasOpenDesc\|\|this.hasClosedDesc)&&(i++,"legacy"===this.skin?t[2].push("descriptions"):"2020"==this.skin&&t[1].push("descriptions")),"popup"!==this.transcriptType\|\|this.hideTranscriptButton\|\|(i++,"legacy"===this.skin?t[2].push("transcript"):"2020"==this.skin&&t[1].push("transcript")),this.hasChapters&&this.useChaptersButton&&(i++,"legacy"===this.skin?t[2].push("chapters"):"2020"==this.skin&&t[1].push("chapters")),"2020"==this.skin&&i>0&&t[1].push("pipe"),e&&"2020"===this.skin&&(t[1].push("faster"),t[1].push("slower"),t[1].push("pipe")),"legacy"===this.skin?t[3].push("preferences"):"2020"==this.skin&&t[1].push("preferences"),"video"===this.mediaType&&this.allowFullscreen&&("legacy"===this.skin?t[3].push("fullscreen"):t[1].push("fullscreen")),this.browserSupportsVolume()?(this.volumeButton="volume-"+this.getVolumeName(this.volume),("legacy"===this.skin\|\|"2020"==this.skin)&&t[1].push("volume")):this.volume=!1,t},AblePlayer.prototype.addControls=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P,k,T,C;for(e=this,s=(i=this.calculateControlLayout()).length,P=this.mediaId+"-tooltip",this.$tooltipDiv=t("<div>",{id:P,class:"able-tooltip"}).hide(),this.$controllerDiv.append(this.$tooltipDiv),"2020"==this.skin&&(l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.tt.seekbarLabel,this.$controllerDiv.append(l),this.seekBar=new AccessibleSlider(this.mediaType,l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible")),a=0;a<s;a++){for(r=i[a],o=t("<div>",a%2==0?{class:"able-left-controls"}:{class:"able-right-controls"}),this.$controllerDiv.append(o),n=0;n<r.length;n++){if("seek"===(d=r[n]))l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.tt.seekbarLabel,o.append(l),void 0!==this.duration&&0!==this.duration\|\|(this.duration=60,this.elapsed=0),this.seekBar=new AccessibleSlider(this.mediaType,l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible");else if("pipe"===d)p=t("<span>",{tabindex:"-1","aria-hidden":"true"}),"font"===this.iconType?p.addClass("icon-pipe"):(c=t("<img>",{src:this.rootPath+"button-icons/"+this.iconColor+"/pipe.png",alt:"",role:"presentation"}),p.append(c)),o.append(p);else{if(g="volume"===d?this.rootPath+"button-icons/"+this.iconColor+"/"+this.volumeButton+".png":"fullscreen"===d?this.rootPath+"button-icons/"+this.iconColor+"/fullscreen-expand.png":"slower"===d?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/turtle.png":this.rootPath+"button-icons/"+this.iconColor+"/slower.png":"faster"===d?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/rabbit.png":this.rootPath+"button-icons/"+this.iconColor+"/faster.png":this.rootPath+"button-icons/"+this.iconColor+"/"+d+".png",m=this.getButtonTitle(d),v=t("<div>",{role:"button",tabindex:"0","aria-label":m,class:"able-button-handler-"+d}),"volume"!==d&&"preferences"!==d&&"captions"!==d\|\|("preferences"==d?(this.prefCats=this.getPreferencesGroups(),this.prefCats.length>1?(C=this.mediaId+"-prefs-menu",v.attr({"aria-controls":C,"aria-haspopup":"menu","aria-expanded":"false"})):1===this.prefCats.length&&v.attr({"aria-haspopup":"dialog"})):"volume"===d?(C=this.mediaId+"-volume-slider",v.attr({"aria-controls":C,"aria-expanded":"false"})):"captions"===d&&this.captions&&(this.captions.length>1?v.attr("aria-expanded","false"):v.attr("aria-pressed","false"))),"font"===this.iconType)y="volume"===d?"icon-"+this.volumeButton:"slower"===d?"animals"===this.speedIcons?"icon-turtle":"icon-slower":"faster"===d?"animals"===this.speedIcons?"icon-rabbit":"icon-faster":"icon-"+d,b=t("<span>",{class:y,"aria-hidden":"true"}),v.append(b);else if("svg"===this.iconType){var w;w="volume"===d?this.getSvgData(this.volumeButton):"fullscreen"===d?this.getSvgData("fullscreen-expand"):"slower"===d?"animals"===this.speedIcons?this.getSvgData("turtle"):this.getSvgData("slower"):"faster"===d?"animals"===this.speedIcons?this.getSvgData("rabbit"):this.getSvgData("faster"):this.getSvgData(d),b=t("<svg>",{focusable:"false","aria-hidden":"true",viewBox:w[0]}),u=t("<path>",{d:w[1]}),b.append(u),v.html(b),v.html(v.html())}else f=t("<img>",{src:g,alt:"",role:"presentation"}),v.append(f);var $=t("<span>",{class:"able-clipped"}).text(m);v.append($),v.on("mouseenter focus",(function(i){clearTimeout(k);var s=t(this).attr("aria-label"),a=t(this).position(),n=t(this).height(),r=t(this).width(),o=e.$controllerDiv.width();a.right=o-a.left-r;var l=a.top+n+5;if(t(this).parent().hasClass("able-right-controls"))var h="right";else h="left";var p=AblePlayer.localGetElementById(v[0],P).text(s).width();if("left"==h){(u=a.left-p/2)<0&&(u=2);var c={left:u+"px",right:"",top:l+"px"}}else{var u;(u=a.right-p/2)<0&&(u=2);c={left:"",right:u+"px",top:l+"px"}}var d=AblePlayer.localGetElementById(v[0],P).text(s).css(c);e.showTooltip(d),t(this).on("mouseleave blur",(function(){clearTimeout(k),k=setTimeout((function(){AblePlayer.localGetElementById(v[0],P).text("").hide()}),500),e.$tooltipDiv.on("mouseenter focus",(function(){clearTimeout(k)})),e.$tooltipDiv.on("mouseleave blur",(function(){AblePlayer.localGetElementById(v[0],P).text("").hide()}))}))})),"captions"===d?this.prefCaptions&&1===this.prefCaptions\|\|(T=this.captions.length>1?this.tt.captions:this.tt.showCaptions,v.addClass("buttonOff").attr("title",T),v.attr("aria-pressed","false")):"descriptions"===d&&(this.prefDesc&&1===this.prefDesc\|\|v.addClass("buttonOff").attr("title",this.tt.turnOnDescriptions)),o.append(v),"play"===d?this.$playpauseButton=v:"previous"==d?(this.$prevButton=v,"previous"==this.buttonWithFocus&&(this.$prevButton.focus(),this.buttonWithFocus=null)):"next"==d?(this.$nextButton=v,"next"==this.buttonWithFocus&&(this.$nextButton.focus(),this.buttonWithFocus=null)):"captions"===d?this.$ccButton=v:"sign"===d?(this.$signButton=v,this.$signWindow.is(":visible")\|\|this.$signButton.addClass("buttonOff")):"descriptions"===d?this.$descButton=v:"mute"===d?this.$muteButton=v:"transcript"===d?(this.$transcriptButton=v,this.$transcriptDiv.is(":visible")\|\|this.$transcriptButton.addClass("buttonOff").attr("title",this.tt.showTranscript)):"fullscreen"===d?this.$fullscreenButton=v:"chapters"===d?this.$chaptersButton=v:"preferences"===d?this.$prefsButton=v:"volume"===d&&(this.$volumeButton=v)}"volume"===d&&this.addVolumeSlider(o)}a%2==1&&this.$controllerDiv.append('<div style="clear:both;"></div>')}for(var D in void 0!==this.$captionsDiv&&this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv),this.controls=[],i)i.hasOwnProperty(D)&&(this.controls=this.controls.concat(i[D]));this.refreshControls("init")},AblePlayer.prototype.useSvg=function(){var t,e,i=Object.create(null),debouncedCheck=function(){clearTimeout(e),e=setTimeout(t,100)},unobserveChanges=function(){},s="http://www.w3.org/1999/xlink";t=function(){var t,e,a,n,r,o,l,h,p,c=0;if(window.XMLHttpRequest&&(r=void 0!==(r=new XMLHttpRequest).withCredentials?XMLHttpRequest:XDomainRequest\|\|void 0),void 0!==r){for(unobserveChanges(),h=document.getElementsByTagName("use"),n=0;n<h.length;n+=1){try{e=h[n].getBoundingClientRect()}catch(t){e=!1}t=(l=h[n].getAttributeNS(s,"href").split("#"))[0],a=l[1],o=e&&0===e.left&&0===e.right&&0===e.top&&0===e.bottom,e&&0===e.width&&0===e.height&&!o?t.length&&(!0!==(p=i[t])&&setTimeout(attrUpdateFunc({useEl:h[n],base:t,hash:a}),0),void 0===p&&(p=new r,i[t]=p,p.onload=onloadFunc(p),p.onerror=onErrorTimeout(p),p.ontimeout=onErrorTimeout(p),p.open("GET",t),p.send(),c+=1)):o\|\|(void 0===i[t]?i[t]=!0:i[t].onload&&(i[t].abort(),i[t].onload=void 0,i[t]=!0))}h="",c+=1,observeIfDone()}function observeIfDone(){var t;0===(c-=1)&&(window.addEventListener("resize",debouncedCheck,!1),window.addEventListener("orientationchange",debouncedCheck,!1),window.MutationObserver?((t=new MutationObserver(debouncedCheck)).observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}),unobserveChanges=function(){try{t.disconnect(),window.removeEventListener("resize",debouncedCheck,!1),window.removeEventListener("orientationchange",debouncedCheck,!1)}catch(t){}}):(document.documentElement.addEventListener("DOMSubtreeModified",debouncedCheck,!1),unobserveChanges=function(){document.documentElement.removeEventListener("DOMSubtreeModified",debouncedCheck,!1),window.removeEventListener("resize",debouncedCheck,!1),window.removeEventListener("orientationchange",debouncedCheck,!1)}))}function attrUpdateFunc(t){return function(){!0!==i[t.base]&&t.useEl.setAttributeNS(s,"xlink:href","#"+t.hash)}}function onloadFunc(t){return function(){var e,i=document.body,s=document.createElement("x");t.onload=null,s.innerHTML=t.responseText,(e=s.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",i.insertBefore(e,i.firstChild)),observeIfDone()}}function onErrorTimeout(t){return function(){t.onerror=null,t.ontimeout=null,observeIfDone()}}}},AblePlayer.prototype.cuePlaylistItem=function(e){var i,s,a,n,r,o,l=this;s=this.player,this.initializing\|\|this.playerCreated&&this.deletePlayer("playlist"),this.swappingSrc=!0,this.startedPlaying?this.okToPlay=!0:this.okToPlay=!1,this.loadingMedia=!1,i=this.$playlist.eq(e),this.hasAttr(i,"data-youtube-id")?(this.youTubeId=this.getYouTubeId(i.attr("data-youtube-id")),this.hasAttr(i,"data-youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(i.attr("data-youtube-desc-id"))),a="youtube"):this.hasAttr(i,"data-vimeo-id")?(this.vimeoId=this.getVimeoId(i.attr("data-vimeo-id")),this.hasAttr(i,"data-vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(i.attr("data-vimeo-desc-id"))),a="vimeo"):a="html5","youtube"===a?"html5"===s&&(this.playing&&this.pauseMedia(),this.$media.hide()):(this.youTubeId=!1,"youtube"===s&&this.$media.show()),this.player=a,this.$media.empty(),this.hasAttr(i,"data-poster")&&this.$media.attr("poster",i.attr("data-poster")),this.hasAttr(i,"data-youtube-desc-id")&&this.$media.attr("data-youtube-desc-id",i.attr("data-youtube-desc-id")),this.youTubeId&&this.$media.attr("data-youtube-id",i.attr("data-youtube-id"));var h=i.children("span.able-source");h.length&&h.each((function(){if(l.hasAttr(t(this),"data-src")){var e=t("<source>",{src:t(this).attr("data-src")});l.hasAttr(t(this),"data-type")&&e.attr("type",t(this).attr("data-type")),l.hasAttr(t(this),"data-desc-src")&&e.attr("data-desc-src",t(this).attr("data-desc-src")),l.hasAttr(t(this),"data-sign-src")&&e.attr("data-sign-src",t(this).attr("data-sign-src")),l.$media.append(e)}}));var p=i.children("span.able-track");p.length&&p.each((function(){if(l.hasAttr(t(this),"data-src")&&l.hasAttr(t(this),"data-kind")&&l.hasAttr(t(this),"data-srclang")){var e=t("<track>",{src:t(this).attr("data-src"),kind:t(this).attr("data-kind"),srclang:t(this).attr("data-srclang")});l.hasAttr(t(this),"data-label")&&e.attr("label",t(this).attr("data-label")),l.hasAttr(t(this),"data-desc")&&e.attr("data-desc",t(this).attr("data-desc")),l.$media.append(e)}})),n=i.text(),this.hasAttr(i,"lang")&&(r=i.attr("lang")),this.$sources=this.$media.find("source"),this.recreatingPlayer\|\|this.recreatePlayer().then((function(){l.$playlist.removeClass("able-current").children("button").removeAttr("aria-current"),l.$playlist.eq(e).addClass("able-current").children("button").attr("aria-current","true"),!0===l.showNowPlaying&&void 0!==l.$nowPlayingDiv&&(o=t("<span>"),void 0!==r&&o.attr("lang",r),o.html("<span>"+l.tt.selectedTrack+":</span>"+n),l.$nowPlayingDiv.html(o)),l.initializing?l.swappingSrc=!1:"html5"===l.player?l.loadingMedia\|\|(l.media.load(),l.loadingMedia=!0):"youtube"===l.player&&(l.okToPlay=!0),l.initializing=!1,l.playerCreated=!0}))},AblePlayer.prototype.deletePlayer=function(e){"youtube"===this.player&&this.youTubePlayer&&this.youTubePlayer.destroy(),"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.destroy(),this.$controllerDiv.empty(),this.$elapsedTimeContainer.empty().text("0:00"),this.$durationContainer.empty(),this.$signWindow&&this.$signWindow.remove(),this.$transcriptArea&&this.$transcriptArea.remove(),t(".able-modal-dialog").remove(),this.$captionsWrapper&&this.$captionsWrapper.remove(),this.$descDiv&&this.$descDiv.remove(),this.hasCaptions=!1,this.hasChapters=!1,this.hasDescTracks=!1,this.hasOpenDesc=!1,this.hasClosedDesc=!1,this.captionsPopup=null,this.chaptersPopup=null,this.transcriptType=null,this.playerDeleted=!0},AblePlayer.prototype.getButtonTitle=function(t){return"playpause"===t\|\|"play"===t?this.tt.play:"pause"===t?this.tt.pause:"restart"===t?this.tt.restart:"previous"===t?this.tt.prevTrack:"next"===t?this.tt.nextTrack:"rewind"===t?this.tt.rewind:"forward"===t?this.tt.forward:"captions"===t?this.captions.length>1?this.tt.captions:this.captionsOn?this.tt.hideCaptions:this.tt.showCaptions:"descriptions"===t?this.descOn?this.tt.turnOffDescriptions:this.tt.turnOnDescriptions:"transcript"===t?this.$transcriptDiv.is(":visible")?this.tt.hideTranscript:this.tt.showTranscript:"chapters"===t?this.tt.chapters:"sign"===t?this.tt.sign:"volume"===t?this.tt.volume:"faster"===t?this.tt.faster:"slower"===t?this.tt.slower:"preferences"===t?this.tt.preferences:"help"!==t?"fullscreen"===t?this.fullscreen?this.tt.exitFullscreen:this.tt.enterFullscreen:(this.debug,t.charAt(0).toUpperCase()+t.slice(1)):void 0}}(jQuery);var preProcessing={transformCSSClasses:function(t){return t.replace(/<(v\|c\|b\|i\|u\|lang\|ruby)\.([\w\.]+)([^>])>/g,(function(t,e,i,s){return"<"+e+' class="'+i.split(".").join(" ")+'"'+s+">"}))},transformLangTags:function(t){return t.replace(/<lang\s+([\w-]+)([^>])>/g,(function(t,e,i){return'<lang lang="'+e+'"'+i+">"}))},transformVTags:function(t){return t.replace(/<v\s+([^>]?)>/g,(function(t,e){var i=e.match(/class="([^"])"/),s=i?i[0]:"",a=e.replace(/class="[^"]"/,"").trim().split(/\s+/),n=[],r=[];a.forEach((function(t){-1!==t.indexOf("=")?n.push(t):r.push(t)}));var o=r.join(" "),l="<v";return o&&(l+=' title="'+o+'"'),n.length>0&&(l+=" "+n.join(" ")),s&&(l+=" "+s),l+=">"}))}},postProcessing={postprocessCTag:function(t){return t.replace(/<c class="([\w\s]+)">/g,(function(t,e){return"<c."+e.split(" ").join(".")+">"}))},postprocessVTag:function(t){return t.replace(/<v class="([\w\s]+)"([^>])>/g,(function(t,e,i){return"<v."+e.split(" ").join(".")+i+">"}))},postprocessLangTag:function(t){return t.replace(/<lang lang="([\w-]+)"([^>])>/g,(function(t,e,i){return"<lang "+e+i+">"}))}},validate={preProcessVttContent:function(t){var e=preProcessing.transformCSSClasses(t),i=preProcessing.transformLangTags(e);return preProcessing.transformVTags(i)},postProcessVttContent:function(t,e){var i=postProcessing.postprocessCTag(t),s=postProcessing.postprocessVTag(i);return postProcessing.postprocessLangTag(s).replace(/-->/g,"--\x3e").replace(/<\/v>/g,(function(t,i){return-1!==e.indexOf(t,i)?t:""}))},sanitizeVttContent:function(t){if(null==t)return"";var e=validate.preProcessVttContent(t),i=DOMPurify.sanitize(e,{ALLOWED_TAGS:["b","i","u","v","c","lang","ruby","rt","rp"],ALLOWED_ATTR:["title","class","lang"],KEEP_CONTENT:!0});return validate.postProcessVttContent(i,t)}};"undefined"!=typeof module&&module.exports&&(module.exports=validate),function(t){AblePlayer.prototype.setupTracks=function(){var e,i,s,a,n,r,o,l,h;for(e=this,s=(i=new t.Deferred).promise(),a=[],t("#able-vts").length?(this.vtsTracks=[],this.hasVts=!0):this.hasVts=!1,o=this.hasDescTracks&&this.descOn?this.altTracks:this.tracks,r=0;r<o.length;r++)if(h=(l=o[r]).kind,l.src){l.src;n=this.loadTextObject(l.src),a.push(n.catch((function(t){}))),n.then(function(t,i){t.src;var s=t.language,a=t.label,n=t.desc;return function(r,o){var l=o,h=e.parseWebVTT(r,l).cues;e.hasVts&&e.setupVtsTracks(i,s,n,a,r,l),"captions"===i\|\|"subtitles"===i?e.setupCaptions(t,h):"descriptions"===i?e.setupDescriptions(t,h):"chapters"===i?e.setupChapters(t,h):"metadata"===i&&e.setupMetadata(t,h)}}(l,h))}else(e.usingYouTubeCaptions\|\|e.usingVimeoCaptions)&&e.setupCaptions(l);return e.usingYouTubeCaptions\|\|e.usingVimeoCaptions?i.resolve():t.when.apply(t,a).then((function(){i.resolve()})),s},AblePlayer.prototype.getTracks=function(){var e,i,s,a,n,r,o,l,h,p,c;return e=this,l=!1,s=(i=new t.Deferred).promise(),this.$tracks=this.$media.find("track"),this.tracks=[],this.altTracks=[],this.captions=[],this.descriptions=[],this.chapters=[],this.meta=[],this.hasCaptionsTrack=!1,this.hasDescTracks=!1,this.$tracks.length&&(this.usingYouTubeCaptions=!1,this.$tracks.each((function(i,s){if("captions"===t(this).attr("kind")?e.hasCaptionsTrack=!0:"descriptions"===t(this).attr("kind")&&(e.hasClosedDesc=!0),a=t(this).attr("srclang")?t(this).attr("srclang"):e.lang,n=t(this).attr("label")?t(this).attr("label"):e.getLanguageName(a),void 0===t(this).attr("default")\|\|l?a===e.lang?(h=!0,r=!1):r=!1:(r=!0,l=!0),r&&(e.captionLang=a),void 0!==t(this).data("desc")?(o=!0,e.hasDescTracks=!0):o=!1,o?e.altTracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}):e.tracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}),i==e.$tracks.length-1){if(!l)if(h)for(e.captionLang=e.lang,p=!1,c=0;c<e.tracks.length&&!p;)e.tracks[c].language===e.lang&&(e.tracks[c].def=!0,p=!0),c++;else e.tracks[0].def=!0,e.captionLang=e.tracks[0].language;e.$media.find("track").removeAttr("default")}}))),this.$tracks.length&&this.hasCaptionsTrack?i.resolve():"youtube"===this.player?this.getYouTubeCaptionTracks(this.youTubeId).then((function(){e.hasCaptions&&(e.usingYouTubeCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()})):"vimeo"===this.player?this.getVimeoCaptionTracks().then((function(){e.hasCaptions&&(e.usingVimeoCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()})):(this.hasCaptions=!1,e.$captionsWrapper&&e.$captionsWrapper.remove(),i.resolve()),s},AblePlayer.prototype.setupCaptions=function(e,i){var s,a;if(void 0===i&&(i=null),this.usingYouTubeCaptions\|\|this.usingVimeoCaptions);else if(0===this.captions.length)this.captions.push({language:e.language,label:e.label,def:e.def,cues:i});else{for(s=!1,a=0;a<this.captions.length;a++)if(e.label.toLowerCase()<this.captions[a].label.toLowerCase()){this.captions.splice(a,0,{language:e.language,label:e.label,def:e.def,cues:i}),s=!0;break}s\|\|this.captions.push({language:e.language,label:e.label,def:e.def,cues:i})}this.hasCaptions=!0,this.currentCaption=-1,1===this.prefCaptions?this.captionsOn=!0:0===this.prefCaptions?this.captionsOn=!1:1===this.defaultStateCaptions?this.captionsOn=!0:this.captionsOn=!1,"audio"===this.mediaType&&this.captionsOn&&this.$captionsContainer.removeClass("captions-off"),(!this.$captionsWrapper\|\|this.$captionsWrapper&&!t.contains(this.$ableDiv[0],this.$captionsWrapper[0]))&&(this.$captionsDiv=t("<div>",{class:"able-captions"}),this.$captionsWrapper=t("<div>",{class:"able-captions-wrapper","aria-hidden":"true"}).hide(),"below"===this.prefCaptionsPosition?this.$captionsWrapper.addClass("able-captions-below"):this.$captionsWrapper.addClass("able-captions-overlay"),this.$captionsWrapper.append(this.$captionsDiv),this.$captionsContainer.append(this.$captionsWrapper))},AblePlayer.prototype.setupDescriptions=function(t,e){this.hasClosedDesc=!0,this.currentDescription=-1,this.descriptions.push({cues:e,language:t.language})},AblePlayer.prototype.setupChapters=function(t,e){this.hasChapters=!0,this.chapters.push({cues:e,language:t.language})},AblePlayer.prototype.setupMetadata=function(e,i,s){"text"===this.metaType?this.metaDiv&&t("#"+this.metaDiv)&&(this.$metaDiv=t("#"+this.metaDiv),this.hasMeta=!0,this.meta=i):"selector"===this.metaType&&(this.hasMeta=!0,this.visibleSelectors=[],this.meta=i)},AblePlayer.prototype.loadTextObject=function(e){var i,s,a,n;return s=(i=new t.Deferred).promise(),a=this,n=t("<div>",{style:"display:none"}),t.ajax({url:e,dataType:"text",success:function(t){var s=validate.sanitizeVttContent(t);n.html(s),i.resolve(e,s),n.remove()},error:function(t,s,r){a.debug,i.reject(e),n.remove()}}),s}}(jQuery),function(t){AblePlayer.prototype.initYouTubePlayer=function(){var e,i,s,a;return e=this,s=(i=new t.Deferred).promise(),this.youTubePlayerReady=!1,a=this.youTubeDescId&&this.prefDesc?this.youTubeDescId:this.youTubeId,this.activeYouTubeId=a,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeInit().then((function(){i.resolve()})):(AblePlayer.loadingYouTubeIframeAPI\|\|t.getScript("https://www.youtube.com/iframe_api").fail((function(){i.fail()})),t("body").on("youTubeIframeAPIReady",(function(){e.finalizeYoutubeInit().then((function(){i.resolve()}))}))),s},AblePlayer.prototype.finalizeYoutubeInit=function(){var e,i,s,a,n;return i=(e=new t.Deferred).promise(),s=this,a=this.mediaId+"_youtube",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.okToPlay?1:0,void 0===this.captionLang&&(this.captionLang=this.lang),this.youTubePlayer=new YT.Player(a,{videoId:this.activeYouTubeId,host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,enablejsapi:1,disableKb:1,playsinline:this.playsInline,start:this.startTime,controls:0,cc_load_policy:1,cc_lang_pref:this.captionLang,hl:this.lang,modestbranding:1,rel:0,iv_load_policy:3},events:{onReady:function(){s.youTubePlayerReady=!0,s.playerWidth&&s.playerHeight\|\|s.getYouTubeDimensions(),s.playerWidth&&s.playerHeight&&(s.youTubePlayer.setSize(s.playerWidth,s.playerHeight),s.$ableWrapper.css({width:s.playerWidth+"px"})),s.swappingSrc&&(s.swappingSrc=!1,s.restoreFocus(),s.cueingPlaylistItem=!1,(s.playing\|\|s.okToPlay)&&s.playMedia()),s.userClickedPlaylist&&(s.userClickedPlaylist=!1),s.recreatingPlayer&&(s.recreatingPlayer=!1),e.resolve()},onError:function(t){e.fail()},onStateChange:function(t){s.getPlayerState().then((function(t){"playing"===t?(s.playing=!0,s.startedPlaying=!0,s.paused=!1):"ended"==t?s.onMediaComplete():(s.playing=!1,s.paused=!0),s.stoppingYouTube&&"paused"===t&&(void 0!==s.$posterImg&&s.$posterImg.show(),s.stoppingYouTube=!1,s.seeking=!1,s.playing=!1,s.paused=!0)})),"youtube"!==s.player\|\|s.usingYouTubeCaptions\|\|s.youTubePlayer.getOptions("captions")&&s.youTubePlayer.unloadModule("captions")},onPlaybackQualityChange:function(){}}}),this.hasPlaylist\|\|this.$media.remove(),i},AblePlayer.prototype.getYouTubeDimensions=function(t){var e,i,s;void 0!==(e=this.$ableWrapper.find("iframe"))&&e.prop("width")&&(i=e.prop("width"),e.prop("height")&&(s=e.prop("height"),this.resizePlayer(i,s)))},AblePlayer.prototype.getYouTubeCaptionTracks=function(e){var i,s,a,n,r,o,l=new t.Deferred,h=l.promise();return i=this,this.youTubePlayer.getOption("captions","tracklist")\|\|(this.youTubePlayer.addEventListener("onApiChange",(function(t){if(i.duration=i.youTubePlayer.getDuration(),i.loadingYouTubeCaptions){if(s=i.youTubePlayer.getOption("captions","tracklist"),i.okToPlay\|\|i.youTubePlayer.pauseVideo(),s&&s.length){for(a=0;a<s.length;a++)n=s[a].languageCode,r=s[a].languageName,o=!1,void 0!==i.captionLang?n===i.captionLang&&(o=!0):void 0!==i.lang&&n===i.lang&&(o=!0),i.tracks.push({kind:"captions",language:n,label:r,def:o}),i.captions.push({language:n,label:r,def:o,cues:null});i.hasCaptions=!0,i.setupPopups("captions")}else i.usingYouTubeCaptions=!1,i.hasCaptions=!1;i.loadingYouTubeCaptions=!1,i.okToPlay&&i.youTubePlayer.playVideo()}i.captionLangPending&&(i.youTubePlayer.setOption("captions","track",{languageCode:i.captionLangPending}),i.captionLangPending=null),void 0!==i.prefCaptionsSize&&i.youTubePlayer.setOption("captions","fontSize",i.translatePrefs("size",i.prefCaptionsSize,"youtube")),l.resolve()})),this.loadingYouTubeCaptions=!0,this.youTubePlayer.playVideo()),h},AblePlayer.prototype.getYouTubeTimedTextUrl=function(t,e,i){var s="https://www.youtube.com/api/timedtext?fmt=vtt";return s+="&v="+t,s+="&lang="+i,""!==e&&(s+="&name="+e),s},AblePlayer.prototype.getYouTubePosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+t;return"120"==e?i+"/default.jpg":"320"==e\|\|"480"==e?i+"/hqdefault.jpg":"640"==e&&i+"/sddefault.jpg"},AblePlayer.prototype.getYouTubeId=function(t){var e;return-1!==t.indexOf("youtu")?(e=(t=t.trim()).length-11,t.substring(e)):t}}(jQuery),function(t){window.AccessibleSlider=function(e,i,s,a,n,r,o,l,h,p,c){var u,d;u=this,this.position=0,this.tracking=!1,this.trackDevice=null,this.keyTrackPosition=0,this.lastTrackPosition=0,this.nextStep=1,this.inertiaCount=0,this.bodyDiv=t(i),p&&(this.loadedDiv=t("<div></div>"),this.playedDiv=t("<div></div>")),this.seekHead=t("<div>",{"aria-orientation":s,class:"able-"+h+"-head"}),"visible"===c?this.seekHead.attr("tabindex","0"):this.seekHead.attr("tabindex","-1"),this.seekHead.attr({role:"slider","aria-label":l,"aria-valuemin":n,"aria-valuemax":r}),this.timeTooltipTimeoutId=null,this.overTooltip=!1,this.timeTooltip=t("<div>"),this.bodyDiv.append(this.timeTooltip),this.timeTooltip.attr("role","tooltip"),this.timeTooltip.addClass("able-tooltip"),this.timeTooltip.on("mouseenter focus",(function(){u.overTooltip=!0,clearInterval(u.timeTooltipTimeoutId)})),this.timeTooltip.on("mouseleave blur",(function(){u.overTooltip=!1,t(this).hide()})),this.timeTooltip.hide(),this.bodyDiv.append(this.loadedDiv),this.bodyDiv.append(this.playedDiv),this.bodyDiv.append(this.seekHead),this.bodyDiv.wrap("<div></div>"),this.wrapperDiv=this.bodyDiv.parent(),"legacy"===this.skin&&("horizontal"===s?(this.wrapperDiv.width(a),this.loadedDiv.width(0)):(this.wrapperDiv.height(a),this.loadedDiv.height(0))),this.wrapperDiv.addClass("able-"+h+"-wrapper"),p&&(this.loadedDiv.addClass("able-"+h+"-loaded"),this.playedDiv.width(0),this.playedDiv.addClass("able-"+h+"-played"),this.setDuration(r)),this.seekHead.on("mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend",(function(t){d=u.pointerEventToXY(t),"mouseenter"===t.type\|\|"focus"===t.type?u.overHead=!0:"mouseleave"===t.type\|\|"blur"===t.type?(u.overHead=!1,!u.overBody&&u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x))):"mousemove"===t.type\|\|"touchmove"===t.type?u.tracking&&"mouse"===u.trackDevice&&u.trackHeadAtPageX(d.x):"mousedown"===t.type\|\|"touchstart"===t.type?(u.startTracking("mouse",u.pageXToPosition(u.seekHead.offset()+u.seekHead.width()/2)),u.bodyDiv.is(":focus")\|\|u.bodyDiv.focus(),t.preventDefault()):"mouseup"!==t.type&&"touchend"!==t.type\|\|u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x)),"mousemove"!==t.type&&"mousedown"!==t.type&&"mouseup"!==t.type&&"touchstart"!==t.type&&"touchend"!==t.type&&u.refreshTooltip()})),this.bodyDiv.on("mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend",(function(t){if(d=u.pointerEventToXY(t),"mouseenter"===t.type)u.overBody=!0,u.overBodyMousePos={x:d.x,y:d.y};else if("mouseleave"===t.type)u.overBody=!1,u.overBodyMousePos=null,!u.overHead&&u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x));else if("mousemove"===t.type\|\|"touchmove"===t.type)u.overBodyMousePos={x:d.x,y:d.y},u.tracking&&"mouse"===u.trackDevice&&u.trackHeadAtPageX(d.x);else if("mousedown"===t.type\|\|"touchstart"===t.type)u.startTracking("mouse",u.pageXToPosition(d.x)),u.trackHeadAtPageX(d.x),u.seekHead.is(":focus")\|\|u.seekHead.focus(),t.preventDefault();else if("mouseup"===t.type\|\|"touchend"===t.type)u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x));else if("keydown"===t.type){if(36===t.which)u.trackImmediatelyTo(0);else if(35===t.which)u.trackImmediatelyTo(u.duration);else if(37===t.which\|\|40===t.which)u.arrowKeyDown(-1);else if(39===t.which\|\|38===t.which)u.arrowKeyDown(1);else if(33===t.which&&o>0)u.arrowKeyDown(o);else{if(!(34===t.which&&o>0))return;u.arrowKeyDown(-o)}t.preventDefault()}else"keyup"===t.type&&t.which>=33&&t.which<=40&&(u.tracking&&"keyboard"===u.trackDevice&&u.stopTracking(u.keyTrackPosition),t.preventDefault());u.overTooltip\|\|"mouseup"===t.type\|\|"keydown"===t.type\|\|"keydown"===t.type\|\|u.refreshTooltip()}))},AccessibleSlider.prototype.arrowKeyDown=function(t){this.tracking&&"keyboard"===this.trackDevice?(this.keyTrackPosition=this.boundPos(this.keyTrackPosition+this.nextStept),this.inertiaCount+=1,20===this.inertiaCount&&(this.inertiaCount=0,this.nextStep=2),this.trackHeadAtPosition(this.keyTrackPosition)):(this.nextStep=1,this.inertiaCount=0,this.keyTrackPosition=this.boundPos(this.position+this.nextStept),this.startTracking("keyboard",this.keyTrackPosition),this.trackHeadAtPosition(this.keyTrackPosition))},AccessibleSlider.prototype.pageXToPosition=function(t){var e=t-this.bodyDiv.offset().left,i=this.duration(e/this.bodyDiv.width());return this.boundPos(i)},AccessibleSlider.prototype.boundPos=function(t){return Math.max(0,Math.min(t,this.duration))},AccessibleSlider.prototype.setDuration=function(t){t!==this.duration&&(this.duration=t,this.resetHeadLocation(),this.seekHead.attr("aria-valuemax",t))},AccessibleSlider.prototype.setWidth=function(t){this.wrapperDiv.width(t),this.resizeDivs(),this.resetHeadLocation()},AccessibleSlider.prototype.getWidth=function(){return this.wrapperDiv.width()},AccessibleSlider.prototype.resizeDivs=function(){this.playedDiv.width(this.bodyDiv.width()(this.position/this.duration)),this.loadedDiv.width(this.bodyDiv.width()this.buffered)},AccessibleSlider.prototype.resetHeadLocation=function(){var t=this.position/this.duration,e=this.bodyDiv.width()t;this.seekHead.css("left",e-this.seekHead.width()/2),this.tracking&&this.stopTracking(this.position)},AccessibleSlider.prototype.setPosition=function(t,e){this.position=t,this.resetHeadLocation(),this.overHead&&this.refreshTooltip(),this.resizeDivs(),this.updateAriaValues(t,e)},AccessibleSlider.prototype.setBuffered=function(t){isNaN(t)\|\|(this.buffered=t,this.redrawDivs)},AccessibleSlider.prototype.startTracking=function(t,e){this.tracking\|\|(this.trackDevice=t,this.tracking=!0,this.bodyDiv.trigger("startTracking",[e]))},AccessibleSlider.prototype.stopTracking=function(t){this.trackDevice=null,this.tracking=!1,this.bodyDiv.trigger("stopTracking",[t]),this.setPosition(t,!0)},AccessibleSlider.prototype.trackHeadAtPageX=function(t){var e=this.pageXToPosition(t),i=t-this.bodyDiv.offset().left-this.seekHead.width()/2;i=Math.max(0,Math.min(i,this.bodyDiv.width()-this.seekHead.width())),this.lastTrackPosition=e,this.seekHead.css("left",i),this.reportTrackAtPosition(e)},AccessibleSlider.prototype.trackHeadAtPosition=function(t){var e=t/this.duration,i=this.bodyDiv.width()e;this.lastTrackPosition=t,this.seekHead.css("left",i-this.seekHead.width()/2),this.reportTrackAtPosition(t)},AccessibleSlider.prototype.reportTrackAtPosition=function(t){this.bodyDiv.trigger("tracking",[t]),this.updateAriaValues(t,!0)},AccessibleSlider.prototype.updateAriaValues=function(e,i){var s,a=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),o=1===n?"minute":"minutes",l=1===r?"second":"seconds";s=a>0?a+" "+(1===a?"hour":"hours")+", "+n+" "+o+", "+r+" "+l:n>0?n+" "+o+", "+r+" "+l:r+" "+l,this.liveAriaRegion\|\|(this.liveAriaRegion=t("<span>",{class:"able-offscreen","aria-live":"polite"}),this.wrapperDiv.append(this.liveAriaRegion)),i&&this.liveAriaRegion.text()!==s&&this.liveAriaRegion.text(s),this.seekHead.attr("aria-valuetext",s),this.seekHead.attr("aria-valuenow",Math.floor(e).toString())},AccessibleSlider.prototype.trackImmediatelyTo=function(t){this.startTracking("keyboard",t),this.trackHeadAtPosition(t),this.keyTrackPosition=t},AccessibleSlider.prototype.refreshTooltip=function(){if(this.overHead)this.timeTooltip.show(),this.tracking?this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)):this.timeTooltip.text(this.positionToStr(this.position)),this.setTooltipPosition(this.seekHead.position().left+this.seekHead.width()/2);else if(this.overBody&&this.overBodyMousePos)this.timeTooltip.show(),this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))),this.setTooltipPosition(this.overBodyMousePos.x-this.bodyDiv.offset().left);else{clearTimeout(this.timeTooltipTimeoutId);var t=this;this.timeTooltipTimeoutId=setTimeout((function(){t.timeTooltip.hide()}),500)}},AccessibleSlider.prototype.hideSliderTooltips=function(){this.overHead=!1,this.overBody=!1,this.timeTooltip.hide()},AccessibleSlider.prototype.setTooltipPosition=function(t){this.timeTooltip.css({left:t-this.timeTooltip.width()/2-10,bottom:this.seekHead.height()+10})},AccessibleSlider.prototype.positionToStr=function(t){var e=Math.floor(t/3600),i=Math.floor(t/60)%60,s=Math.floor(t%60);return s<10&&(s="0"+s),e>0?(i<10&&(i="0"+i),e+":"+i+":"+s):i+":"+s},AccessibleSlider.prototype.pointerEventToXY=function(t){var e={x:0,y:0};if("touchstart"==t.type\|\|"touchmove"==t.type\|\|"touchend"==t.type\|\|"touchcancel"==t.type){var i=t.originalEvent.touches[0]\|\|t.originalEvent.changedTouches[0];e.x=i.pageX,e.y=i.pageY}else"mousedown"!=t.type&&"mouseup"!=t.type&&"mousemove"!=t.type&&"mouseover"!=t.type&&"mouseout"!=t.type&&"mouseenter"!=t.type&&"mouseleave"!=t.type\|\|(e.x=t.pageX,e.y=t.pageY);return e}}(jQuery),function(t){AblePlayer.prototype.addVolumeSlider=function(e){var i,s,a,n,r,o,l,h,p;for(i=this,s=this.mediaId+"-volume-slider",a=this.mediaId+"-volume-help",r=this.mediaId+"-volume-tick-labels",this.$volumeSlider=t("<div>",{id:s,class:"able-volume-slider","aria-hidden":"true"}).hide(),this.$volumeSliderTooltip=t("<div>",{class:"able-tooltip",role:"tooltip"}).hide(),this.$volumeRange=t("<input>",{type:"range",min:"0",max:"10",step:"1",orient:"vertical","aria-label":this.tt.volumeUpDown,value:this.volume}),n=parseInt(i.volume)/10100,this.$volumeHelp=t("<div>",{id:a,class:"able-volume-help","aria-live":"polite"}).text(n+"%"),this.$volumeButton.attr({"aria-describedby":a}),o=t("<datalist>",{id:r}),l=0;l<=10;l++)p=0===l?this.tt.mute:10l+"%",h=t("<option>",{value:l,label:p}),o.append(h);this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp),e.append(this.$volumeSlider),this.$volumeRange.on("change",(function(e){i.handleVolumeChange(t(this).val())})),this.$volumeRange.on("input",(function(e){i.handleVolumeChange(t(this).val())})),this.$volumeRange.on("keydown",(function(t){27!==t.which&&13!==t.which&&9!==t.which\|\|(i.$volumeSlider.is(":visible")?(i.closingVolume=!0,i.hideVolumePopup()):i.closingVolume\|\|i.showVolumePopup())}))},AblePlayer.prototype.refreshVolumeHelp=function(t){var e;e=t/10100,this.$volumeHelp&&this.$volumeHelp.text(e+"%"),this.$volumeRange.attr("value",t)},AblePlayer.prototype.refreshVolumeButton=function(t){var e,i,s,a,n,r;e=this.getVolumeName(t),i=t/10100,s=this.tt.volume+" "+i+"%","font"===this.iconType?(a="icon-volume-"+e,this.$volumeButton.find("span").first().removeClass().addClass(a),this.$volumeButton.find("span.able-clipped").text(s)):"image"===this.iconType?(n=this.imgPath+"volume-"+e+".png",this.$volumeButton.find("img").attr("src",n)):"svg"===this.iconType&&("mute"!==e&&(e="volume-"+e),r=this.getSvgData(e),this.$volumeButton.find("svg").attr("viewBox",r[0]),this.$volumeButton.find("path").attr("d",r[1]))},AblePlayer.prototype.handleVolumeButtonClick=function(){this.$volumeSlider.is(":visible")?this.hideVolumePopup():this.showVolumePopup()},AblePlayer.prototype.handleVolumeKeystroke=function(t){var e;if(!(t>=49&&t<=57))return!1;e=t-48,this.isMuted()&&e>0?this.setMute(!1):0===e?this.setMute(!0):(this.setVolume(e),this.refreshVolumeHelp(e),this.refreshVolumeButton(e))},AblePlayer.prototype.handleVolumeChange=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleMute=function(){this.isMuted()?this.setMute(!1):this.setMute(!0)},AblePlayer.prototype.showVolumePopup=function(){this.closePopups(),this.$tooltipDiv.hide(),this.$volumeSlider.show().attr("aria-hidden","false"),this.$volumeButton.attr("aria-expanded","true"),this.$volumeButton.focus(),this.waitThenFocus(this.$volumeRange)},AblePlayer.prototype.hideVolumePopup=function(){var t=this;this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus(),setTimeout((function(){t.closingVolume=!1}),1e3)},AblePlayer.prototype.isMuted=function(){return"html5"===this.player?this.media.muted:"youtube"===this.player?this.youTubePlayer.isMuted():void 0},AblePlayer.prototype.setMute=function(t){t?(this.lastVolume=this.volume,this.volume=0):void 0!==this.lastVolume&&(this.volume=this.lastVolume),"html5"===this.player?this.media.muted=t:"youtube"===this.player&&(t?this.youTubePlayer.mute():this.youTubePlayer.unMute()),this.setVolume(this.volume),this.refreshVolumeHelp(this.volume),this.refreshVolumeButton(this.volume)},AblePlayer.prototype.setVolume=function(t){var e;"html5"===this.player?(e=t/10,this.media.volume=e,this.hasSignLanguage&&this.signVideo&&(this.signVideo.volume=0)):"youtube"===this.player?(e=10t,this.youTubePlayer.setVolume(e),this.volume=t):"vimeo"===this.player&&(e=t/10,this.vimeoPlayer.setVolume(e).then((function(){}))),this.lastVolume=t},AblePlayer.prototype.getVolume=function(t){return"html5"===this.player?10this.media.volume:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getVolume()/10:"vimeo"===this.player?this.volume:void 0},AblePlayer.prototype.getVolumeName=function(t){return 0==t?"mute":10==t?"loud":t<5?"soft":"medium"}}(jQuery),function(t){var e="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]";window.AccessibleDialog=function(i,s,a,n,r,o,l,h,p,c){this.title=r,this.closeButtonLabel=l,this.focusedElementBeforeModal=s,this.escapeHook=c,this.baseId=t(i).attr("id")\|\|Math.floor(1e9Math.random()).toString();var u=this,d=i;if(this.modal=d,d.css({width:h\|\|"50%"}),d.addClass("able-modal-dialog"),!p){var f=t("<button>",{class:"modalCloseButton",title:u.closeButtonLabel,"aria-label":u.closeButtonLabel}).text("X");f.keydown((function(t){32===t.which&&u.hide()})).click((function(){u.hide()}));var g=t("<h1></h1>");g.attr("id","modalTitle-"+this.baseId),g.css("text-align","center"),g.text(r),this.titleH1=g,d.attr({"aria-labelledby":"modalTitle-"+this.baseId}),d.prepend(g),d.prepend(f)}d.attr({"aria-hidden":"true",role:a}),n&&d.attr("aria-modal","true"),d.keydown((function(i){if(27===i.which)u.escapeHook?u.escapeHook(i,this):(u.hide(),i.preventDefault());else if(9===i.which){var s=d.find("").filter(e).filter(":visible");if(0===s.length)return;var a=t(":focus"),n=s.index(a);i.shiftKey?0===n&&(s.get(s.length-1).focus(),i.preventDefault()):n===s.length-1&&(s.get(0).focus(),i.preventDefault())}i.stopPropagation()})),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden")},AccessibleDialog.prototype.show=function(){if(!this.overlay){var i=t("<div></div>").attr({class:"able-modal-overlay",tabindex:"-1"});this.overlay=i,t("body").append(i),i.on("mousedown.accessibleModal",(function(t){t.preventDefault()}))}t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").attr("aria-hidden","true"),this.overlay.css("display","block"),this.modal.css("display","block"),this.modal.attr({"aria-hidden":"false",tabindex:"-1"}),0===this.modal.find("").filter(e).filter(":visible").length&&this.focusedElementBeforeModal.blur();var s=this;setTimeout((function(){s.modal.find("button.modalCloseButton").first().focus()}),300)},AccessibleDialog.prototype.hide=function(){this.overlay&&this.overlay.css("display","none"),this.modal.css("display","none"),this.modal.attr("aria-hidden","true"),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden"),this.focusedElementBeforeModal.focus()},AccessibleDialog.prototype.getInputs=function(){return!!this.modal&&this.modal.find("input")}}(jQuery),function(t){AblePlayer.prototype.getNextHeadingLevel=function(e){var i,s,a,n;return e.parents().each((function(){if(i=t(this).children(":header"),s=i.length)return a=i.eq(s-1).prop("tagName"),!1})),void 0===a?n=1:(n=parseInt(a[1]),(n+=1)>6&&(n=6)),n},AblePlayer.prototype.countProperties=function(t){var e,i;for(i in e=0,t)t.hasOwnProperty(i)&&++e;return e},AblePlayer.prototype.formatSecondsAsColonTime=function(t,e){var i,s,a,n,r,o,l;if(e)if(2===(n=t.toString().split(".")).length){if((r=n[1]).length<3)for(o=3-r.length,l=1;l<=o;l++)r+="0"}else r="000";return i=Math.floor(t/3600),s=Math.floor(t/60)%60,(a=Math.floor(t%60))<10&&(a="0"+a),i>0?(s<10&&(s="0"+s),e?i+":"+s+":"+a+"."+r:i+":"+s+":"+a):e?(i<1?i="00":i<10&&(i="0"+i),s<1?s="00":s<10&&(s="0"+s),i+":"+s+":"+a+"."+r):s+":"+a},AblePlayer.prototype.getSecondsFromColonTime=function(t){var e;return 3===(e=t.split(":")).length?3600parseInt(e[0])+60parseInt(e[1])+parseFloat(e[2]):2===e.length?60parseInt(e[0])+parseFloat(e[1]):1===e.length?parseFloat(e[0]):void 0},AblePlayer.prototype.capitalizeFirstLetter=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},AblePlayer.prototype.roundDown=function(t,e){return Number(Math.floor(t+"e"+e)+"e-"+e)},AblePlayer.prototype.hasAttr=function(t,e){var i=t.attr(e);return void 0!==i&&!1!==i},Number.isInteger=Number.isInteger\|\|function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t}}(jQuery),function(t){AblePlayer.prototype.initDescription=function(){var e,i;return i=(e=new t.Deferred).promise(),"audio"===this.mediaType&&e.resolve(),this.descFile=this.$sources.first().attr("data-desc-src"),void 0!==this.descFile\|\|this.youTubeDescId\|\|this.vimeoDescId?this.hasOpenDesc=!0:this.hasOpenDesc=!1,this.hasOpenDesc&&this.hasClosedDesc?this.prefDescMethod?this.descMethod=this.prefDescMethod:this.descMethod="video":this.hasOpenDesc?this.descMethod="video":this.hasClosedDesc?this.descMethod="text":this.descMethod=null,this.descMethod?1===this.prefDesc?this.descOn=!0:0===this.prefDesc?this.descOn=!1:1===this.defaultStateDescriptions?this.descOn=!0:this.descOn=!1:this.descOn=!1,void 0===this.$descDiv&&this.hasClosedDesc&&"text"===this.descMethod&&this.injectTextDescriptionArea(),this.descOn?("video"===this.descMethod&&(this.usingDescribedVersion()\|\|this.swapDescription()),this.hasClosedDesc&&(this.prefDescVisible?void 0!==this.$descDiv&&(this.$descDiv.show(),this.$descDiv.removeClass("able-clipped")):void 0!==this.$descDiv&&this.$descDiv.addClass("able-clipped"))):"video"===this.descMethod?this.usingDescribedVersion()&&this.swapDescription():"text"===this.descMethod&&void 0!==this.$descDiv&&(this.$descDiv.hide(),this.$descDiv.removeClass("able-clipped")),e.resolve(),i},AblePlayer.prototype.usingDescribedVersion=function(){return"youtube"===this.player?this.activeYouTubeId===this.youTubeDescId:"vimeo"===this.player?this.activeVimeoId===this.vimeoDescId:this.$sources.first().attr("data-desc-src")===this.$sources.first().attr("src")},AblePlayer.prototype.initSpeech=function(e){var i=this;if(null===this.speechEnabled)if(void 0!==this.synth&&this.synth.cancel(),window.speechSynthesis)if(this.synth=window.speechSynthesis,"init"===e)t(document).on("click",(function(){var e=new SpeechSynthesisUtterance("Hi!");e.volume=0,e.rate=10,i.synth.speak(e),e.onstart=function(e){t(document).off("click")},e.onend=function(t){i.getBrowserVoices(),i.descVoices.length&&(i.speechEnabled=!0)}})),this.getBrowserVoices(),this.descVoices.length&&(this.speechEnabled=!0);else{var s=new SpeechSynthesisUtterance("Hi!");s.volume=0,s.rate=10,i.synth.speak(s),s.onstart=function(e){t(document).off("click")},s.onend=function(t){i.getBrowserVoices(),i.descVoices.length&&(i.speechEnabled=!0)}}else this.speechEnabled=!1},AblePlayer.prototype.getBrowserVoices=function(){var t,e,i,s;if(s=this.captionLang?this.captionLang.substring(0,2).toLowerCase():this.lang.substring(0,2).toLowerCase(),this.descVoices=[],t=this.synth.getVoices(),e=this.getDescriptionLangs(),t.length>0){this.descVoices=[];for(var a=0;a<t.length;a++)(i=t[a].lang.substring(0,2).toLowerCase())===s&&-1!==e.indexOf(i)&&this.descVoices.push(t[a]);this.descVoices.length\|\|(this.descVoices=t)}return!1},AblePlayer.prototype.getDescriptionLangs=function(){var t=[];if(this.tracks)for(var e=0;e<this.tracks.length;e++)"descriptions"===this.tracks[e].kind&&t.push(this.tracks[e].language.substring(0,2).toLowerCase());return t},AblePlayer.prototype.setDescriptionVoice=function(){var t,e,i,s,a;if(e=void 0!==this.getCookie().voices?this.getPrefDescVoice():null,this.getBrowserVoices(),this.rebuildDescPrefsForm(),s=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,this.synth&&(t=this.synth.getVoices()).length>0){if(e){a=!1;for(var n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()&&t[n].name===e){i=t[n].name,a=!0;break}}if(!a)for(n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()){i=t[n].name;break}if(this.prefDescVoice=i,this.prefDescVoiceLang=s,this.$voiceSelectField){this.$voiceSelectField.find('option[value="'+this.prefDescVoice+'"]');this.$voiceSelectField.val(this.prefDescVoice)}this.updateCookie("voice")}},AblePlayer.prototype.swapDescription=function(){var e,i,s,a;if(e=this,this.loadingMedia=!1,this.$focusedElement=t(":focus"),this.elapsed>0?this.swapTime=this.elapsed:this.swapTime=0,this.duration>0&&(this.prevDuration=this.duration),this.okToPlay\|\|(this.okToPlay=this.playing),this.descOn?this.showAlert(this.tt.alertDescribedVersion):this.showAlert(this.tt.alertNonDescribedVersion),"html5"===this.player){if(this.swappingSrc=!0,this.paused=!0,this.usingDescribedVersion())for(i=0;i<this.$sources.length;i++)s=this.$sources[i].getAttribute("data-orig-src"),this.$sources[i].getAttribute("type"),s&&this.$sources[i].setAttribute("src",s);else for(i=0;i<this.$sources.length;i++)s=this.$sources[i].getAttribute("src"),a=this.$sources[i].getAttribute("data-desc-src"),this.$sources[i].getAttribute("type"),a&&(this.$sources[i].setAttribute("src",a),this.$sources[i].setAttribute("data-orig-src",s));if(this.recreatingPlayer)return;this.playerCreated&&(this.deletePlayer("swap-desc-html"),this.recreatePlayer().then((function(){e.loadingMedia\|\|(e.media.load(),e.loadingMedia=!0)})))}else if("youtube"===this.player){if(this.usingDescribedVersion()?this.activeYouTubeId=this.youTubeId:this.activeYouTubeId=this.youTubeDescId,void 0!==this.youTubePlayer&&(e.swappingSrc=!0,e.playing?e.youTubePlayer.loadVideoById(e.activeYouTubeId,e.swapTime):e.youTubePlayer.cueVideoById(e.activeYouTubeId,e.swapTime)),this.playerCreated&&this.deletePlayer("swap-desc-youtube"),this.recreatingPlayer)return;this.recreatePlayer().then((function(){}))}else if("vimeo"===this.player){if(this.usingDescribedVersion()?(this.activeVimeoId=this.vimeoId,this.showAlert(this.tt.alertNonDescribedVersion)):(this.activeVimeoId=this.vimeoDescId,this.showAlert(this.tt.alertDescribedVersion)),this.playerCreated&&this.deletePlayer("swap-desc-vimeo"),this.recreatingPlayer)return;this.recreatePlayer().then((function(){e.vimeoPlayer.loadVideo(e.activeVimeoId).then((function(){e.playing?e.vimeoPlayer.setCurrentTime(e.swapTime):e.vimeoPlayer.pause()}))}))}},AblePlayer.prototype.showDescription=function(t){if(this.hasClosedDesc&&!this.swappingSrc&&this.descOn&&"video"!==this.descMethod){var e,i,s,a;0;var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e.push(flattenComponentForDescription(t.children[i]));return e.join("")};for(e=this.selectedDescriptions?this.selectedDescriptions.cues:this.descriptions.length>=1?this.descriptions[0].cues:[],i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s?this.currentDescription!==s&&(this.$status.removeAttr("aria-live"),a=flattenComponentForDescription(e[s].components),"screenreader"===this.descReader?this.$descDiv.html(a):this.speechEnabled?(this.announceDescriptionText("description",a),this.prefDescVisible&&this.$descDiv.html(a).removeAttr("aria-live aria-atomic")):this.$descDiv.html(a),this.prefDescPause&&"text"===this.descMethod&&(this.pauseMedia(),this.pausedForDescription=!0),this.currentDescription=s):(this.$descDiv.html(""),this.currentDescription=-1,this.$status.attr("aria-live","polite"))}},AblePlayer.prototype.syncSpeechToPlaybackRate=function(t){var e;.5===t?e=.7:.75===t?e=.8:1===t?e=1:1.25===t?e=1.1:1.5===t?e=1.2:1.75===t?e=1.5:2===t?e=2:2.25===t?e=2.5:t>=2.5&&(e=3),this.prefDescRate=e},AblePlayer.prototype.announceDescriptionText=function(e,i){var s,a,n,r,o,l,h,p,c;s=this;if(this.speechEnabled\|\|this.initSpeech("desc"),"sample"===e?(a=t("#"+this.mediaId+"_prefDescVoice").val(),o=t("#"+this.mediaId+"_prefDescPitch").val(),l=t("#"+this.mediaId+"_prefDescRate").val(),h=t("#"+this.mediaId+"_prefDescVolume").val()):(a=this.prefDescVoice,o=this.prefDescPitch,l=this.prefDescRate,h=this.prefDescVolume),this.descVoices&&this.descVoices.length>0){if(a)for(n=0;n<this.descVoices.length;n++)if(this.descVoices[n].name==a){r=this.descVoices[n];break}void 0===r&&(r=this.descVoices[0]),(p=new SpeechSynthesisUtterance).voice=r,p.voiceURI="native",p.volume=h,p.rate=l,p.pitch=o,p.text=i,p.lang=this.lang,p.onstart=function(t){},p.onpause=function(t){},p.onend=function(t){this.speakingDescription=!1,c=t.elapsedTime,c>100?(t.elapsedTime/1e3).toFixed(2):t.elapsedTime.toFixed(2),this.debug,"description"===e&&s.prefDescPause&&s.pausedForDescription&&(s.playMedia(),this.pausedForDescription=!1)},p.onerror=function(t){},this.synth.paused&&this.synth.resume(),this.synth.speak(p),this.speakingDescription=!0}}}(jQuery),jQuery,AblePlayer.prototype.isIOS=function(t){var e;return e=navigator.userAgent.toLowerCase(),!!/ipad\|iphone\|ipod/.exec(e)&&(void 0===t\|\|-1!==e.indexOf("os "+t))},AblePlayer.prototype.browserSupportsVolume=function(){var t;return!this.isIOS()&&((t=new Audio).volume=.9,.9===t.volume)},AblePlayer.prototype.nativeFullscreenSupported=function(){return document.fullscreenEnabled\|\|document.webkitFullscreenEnabled\|\|document.mozFullscreenEnabled\|\|document.msFullscreenEnabled},function(t){AblePlayer.prototype.seekTo=function(t){var e,i=this;(this.seekFromTime=this.media.currentTime,this.seekToTime=t,this.seeking=!0,this.liveUpdatePending=!0,this.speakingDescription&&this.synth.cancel(),"html5"===this.player)?(this.startTime=t,(e=this.media.seekable).length>0&&this.startTime>=e.start(0)&&this.startTime<=e.end(0)&&(this.media.currentTime=this.startTime,this.seekStatus="complete",this.hasSignLanguage&&this.signVideo&&(this.signVideo.currentTime=this.startTime))):"youtube"===this.player?(this.youTubePlayer.seekTo(t,!0),t>0&&void 0!==this.$posterImg&&this.$posterImg.hide()):"vimeo"===this.player&&this.vimeoPlayer.setCurrentTime(t).then((function(){i.elapsed=t,i.refreshControls("timeline")}));this.refreshControls("timeline")},AblePlayer.prototype.getMediaTimes=function(e,i){var s,a,n,r;return r={},a=(s=new t.Deferred).promise(),n=this,void 0!==e&&void 0!==i?(r.duration=e,r.elapsed=i,s.resolve(r)):this.getDuration().then((function(t){r.duration=n.roundDown(t,6),n.getElapsed().then((function(t){r.elapsed=n.roundDown(t,6),s.resolve(r)}))})),a},AblePlayer.prototype.getDuration=function(){var e,i,s;(i=(e=new t.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getDuration().then((function(t){void 0===t\|\|isNaN(t)\|\|-1===t?e.resolve(0):e.resolve(t)})):e.resolve(0):("html5"===this.player?s=this.media.duration:"youtube"===this.player&&(s=this.youTubePlayerReady?this.duration>0?this.duration:this.youTubePlayer.getDuration():0),void 0===s\|\|isNaN(s)\|\|-1===s?e.resolve(0):e.resolve(s));return i},AblePlayer.prototype.getElapsed=function(){var e,i,s;(i=(e=new t.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getCurrentTime().then((function(t){void 0===t\|\|isNaN(t)\|\|-1===t?e.resolve(0):e.resolve(t)})):e.resolve(0):("html5"===this.player?s=this.media.currentTime:"youtube"===this.player&&(s=this.youTubePlayerReady?this.youTubePlayer.getCurrentTime():0),void 0===s\|\|isNaN(s)\|\|-1===s?e.resolve(0):e.resolve(s));return i},AblePlayer.prototype.getPlayerState=function(){var e,i,s;if(i=(e=new t.Deferred).promise(),s=this,"html5"===this.player)this.media.ended?e.resolve("ended"):this.media.paused?e.resolve("paused"):4!==this.media.readyState?e.resolve("buffering"):e.resolve("playing");else if("youtube"===this.player&&this.youTubePlayerReady){var a=this.youTubePlayer.getPlayerState();-1===a\|\|5===a?e.resolve("stopped"):0===a?e.resolve("ended"):1===a?e.resolve("playing"):2===a?e.resolve("paused"):3===a&&e.resolve("buffering")}else"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.getPaused().then((function(t){t?e.resolve("paused"):s.vimeoPlayer.getEnded().then((function(t){t?e.resolve("ended"):e.resolve("playing")}))}));return i},AblePlayer.prototype.isPlaybackRateSupported=function(){return"html5"===this.player?!!this.media.playbackRate:"youtube"===this.player?!!this.youTubePlayerReady&&this.youTubePlayer.getAvailablePlaybackRates().length>1:"vimeo"===this.player?this.vimeoSupportsPlaybackRateChange:void 0},AblePlayer.prototype.setPlaybackRate=function(t){t=Math.max(.5,t),this.hasClosedDesc&&"text"===this.descMethod&&this.syncSpeechToPlaybackRate(t),"html5"===this.player?this.media.playbackRate=t:"youtube"===this.player?this.youTubePlayer.setPlaybackRate(t):"vimeo"===this.player&&this.vimeoPlayer.setPlaybackRate(t),this.hasSignLanguage&&this.signVideo&&(this.signVideo.playbackRate=t),this.playbackRate=t,this.$speed.text(this.tt.speed+": "+t.toFixed(2).toString()+"x")},AblePlayer.prototype.getPlaybackRate=function(){return"html5"===this.player?this.media.playbackRate:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getPlaybackRate():void 0},AblePlayer.prototype.isPaused=function(){if("vimeo"===this.player)return!this.playing;this.getPlayerState().then((function(t){return"paused"===t\|\|"stopped"===t\|\|"ended"===t}))},AblePlayer.prototype.pauseMedia=function(){"html5"===this.player?(this.media.pause(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.pause(!0)):"youtube"===this.player?this.youTubePlayer.pauseVideo():"vimeo"===this.player&&this.vimeoPlayer.pause()},AblePlayer.prototype.playMedia=function(){"html5"===this.player?(this.media.play(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.play(!0)):"youtube"===this.player?(this.youTubePlayer.playVideo(),void 0!==this.$posterImg&&this.$posterImg.hide(),this.stoppingYouTube=!1):"vimeo"===this.player&&this.vimeoPlayer.play(),this.startedPlaying=!0,this.hideControls&&(this.hidingControls=!0,this.invokeHideControlsTimeout())},AblePlayer.prototype.fadeControls=function(t){"out"==t?(this.$mediaContainer.height()+this.$playerDiv.height(),this.$playerDiv.fadeTo(2e3,0,(function(){}))):"in"==t&&this.$playerDiv.fadeTo(100,1)},AblePlayer.prototype.invokeHideControlsTimeout=function(){var t=this;this.hideControlsTimeout=window.setTimeout((function(){void 0!==t.playing&&!0===t.playing&&t.hideControls&&(t.fadeControls("out"),t.controlsHidden=!0)}),5e3),this.hideControlsTimeoutStatus="active"},AblePlayer.prototype.refreshControls=function(e,i,s){var a,n,r,o,l,h,p,c,u,d,f,g,m,v,y;e="init",a=this,this.swappingSrc&&this.playing\|\|void 0!==this.duration&&(this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.chapterElapsed=this.getChapterElapsed()),!1===this.useFixedSeekInterval&&!1===this.seekIntervalCalculated&&this.duration>0&&this.setSeekInterval(),this.seekBar&&(this.useChapterTimes?(n=this.selectedChapters.cues.length-1,this.selectedChapters.cues[n]==this.currentChapter&&this.currentChapter.end!==this.duration?this.seekBar.setDuration(this.duration-this.currentChapter.start):this.seekBar.setDuration(this.chapterDuration)):void 0===this.duration\|\|isNaN(this.duration)\|\|-1===this.duration\|\|this.seekBar.setDuration(this.duration),this.seekBar.tracking\|\|(o=this.liveUpdatePending\|\|this.seekBar.seekHead.is(t(document.activeElement)),this.liveUpdatePending=!1,this.useChapterTimes?this.seekBar.setPosition(this.chapterElapsed,o):this.seekBar.setPosition(this.elapsed,o)),r=this.seekBar.tracking?this.seekBar.lastTrackPosition:this.useChapterTimes?this.chapterElapsed:this.elapsed),void 0!==this.$durationContainer&&(this.useChapterTimes?this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.chapterDuration)):this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.duration))),void 0!==this.$elapsedTimeContainer&&this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(r)),"legacy"===this.skin&&this.seekBar&&(p=0,u=(c=this.seekBar.wrapperDiv.parent().prev("div.able-left-controls")).next("div.able-right-controls"),c.children().each((function(){"button"==t(this).attr("role")&&(p+=t(this).outerWidth(!0))})),u.children().each((function(){"button"==t(this).attr("role")&&(p+=t(this).outerWidth(!0))})),d=this.fullscreen?t(window).width()-p:this.$ableWrapper.width()-p-5,Math.abs(d-this.seekBar.getWidth())>5&&this.seekBar.setWidth(d)),"html5"===this.player?this.media.buffered.length>0&&(g=this.media.buffered.end(0),this.useChapterTimes?(g>this.chapterDuration&&(g=this.chapterDuration),this.seekBar&&this.seekBar.setBuffered(g/this.chapterDuration)):this.seekBar&&(isNaN(g)\|\|this.seekBar.setBuffered(g/i))):"youtube"===this.player?this.seekBar&&this.youTubePlayerReady&&this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()):this.player,this.$descButton&&(this.descOn?(this.$descButton.removeClass("buttonOff").attr("aria-label",this.tt.turnOffDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOffDescriptions)):(this.$descButton.addClass("buttonOff").attr("aria-label",this.tt.turnOnDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOnDescriptions))),this.$ccButton&&(f=this.captions.length,this.captionsOn?(this.$ccButton.removeClass("buttonOff"),this.$ccButton.attr("aria-pressed","true"),1===f&&(this.$ccButton.attr("aria-label",this.tt.hideCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.hideCaptions))):(this.$ccButton.addClass("buttonOff"),this.$ccButton.attr("aria-pressed","false"),1===f&&(this.$ccButton.attr("aria-label",this.tt.showCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.showCaptions))),f>1&&(this.$ccButton.attr({"aria-label":this.tt.captions,"aria-haspopup":"true","aria-controls":this.mediaId+"-captions-menu"}),this.$ccButton.find("span.able-clipped").text(this.tt.captions))),this.$fullscreenButton&&(this.fullscreen?(this.$fullscreenButton.attr("aria-label",this.tt.exitFullscreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-expand").addClass("icon-fullscreen-collapse"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullscreen)):"svg"===this.iconType?(y=this.getSvgData("fullscreen-collapse"),this.$fullscreenButton.find("svg").attr("viewBox",y[0]),this.$fullscreenButton.find("path").attr("d",y[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullscreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenCollapseButtonImg)):(this.$fullscreenButton.attr("aria-label",this.tt.enterFullscreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-collapse").addClass("icon-fullscreen-expand"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullscreen)):"svg"===this.iconType?(y=this.getSvgData("fullscreen-expand"),this.$fullscreenButton.find("svg").attr("viewBox",y[0]),this.$fullscreenButton.find("path").attr("d",y[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullscreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenExpandButtonImg))),void 0!==this.$bigPlayButton&&void 0!==this.seekBar&&(this.paused&&!this.seekBar.tracking?(this.hideBigPlayButton\|\|(this.$bigPlayButton.show(),this.$bigPlayButton.attr("aria-hidden","false")),this.fullscreen?(this.$bigPlayButton.width(t(window).width()),this.$bigPlayButton.height(t(window).height())):(this.$bigPlayButton.width(this.$mediaContainer.width()),this.$bigPlayButton.height(this.$mediaContainer.height()))):(this.$bigPlayButton.hide(),this.$bigPlayButton.attr("aria-hidden","true"))),this.transcriptType&&(1===this.prefAutoScrollTranscript?(this.autoScrollTranscript=!0,this.$autoScrollTranscriptCheckbox.prop("checked",!0)):(this.autoScrollTranscript=!1,this.$autoScrollTranscriptCheckbox.prop("checked",!1)),this.autoScrollTranscript&&this.currentHighlight&&(m=Math.floor(this.$transcriptDiv.scrollTop()+t(this.currentHighlight).position().top-this.$transcriptDiv.height()/2+t(this.currentHighlight).height()/2))!==Math.floor(this.$transcriptDiv.scrollTop())&&(this.scrollingTranscript=!0,this.movingHighlight&&(this.$transcriptDiv.scrollTop(m),this.movingHighlight=!1))),this.$chaptersButton&&this.$chaptersButton.attr({"aria-label":this.tt.chapters,"aria-haspopup":"true","aria-controls":this.mediaId+"-chapters-menu"}),l={stopped:this.tt.statusStopped,paused:this.tt.statusPaused,playing:this.tt.statusPlaying,buffering:this.tt.statusBuffering,ended:this.tt.statusEnd},this.stoppingYouTube?(this.$status.text()!==this.tt.statusStopped&&this.$status.text(this.tt.statusStopped),this.$playpauseButton.find("span").first().hasClass("icon-pause")&&("font"===this.iconType?(this.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):"svg"===this.iconType?(y=this.getSvgData("play"),this.$playpauseButton.find("svg").attr("viewBox",y[0]),this.$playpauseButton.find("path").attr("d",y[1]),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):this.$playpauseButton.find("img").attr("src",this.playButtonImg))):void 0!==this.$status&&void 0!==this.seekBar&&this.getPlayerState().then((function(t){a.$status.text()===l[t]\|\|a.seekBar.tracking?(a.statusDebounceStart=null,a.debouncingStatus=!1,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.swappingSrc?a.debouncingStatus\|\|(a.statusMessageThreshold=2e3):a.debouncingStatus\|\|(a.statusMessageThreshold=250),h=(new Date).getTime(),a.statusDebounceStart?h-a.statusDebounceStart>a.statusMessageThreshold&&(a.$status.text(l[t]),a.statusDebounceStart=null,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.statusDebounceStart=h,a.debouncingStatus=!0,a.statusTimeout=setTimeout((function(){a.debouncingStatus=!1,a.refreshControls(e)}),a.statusMessageThreshold))),a.seekBar.tracking\|\|a.stoppingYouTube\|\|("paused"===t\|\|"stopped"===t\|\|"ended"===t?(a.$playpauseButton.attr("aria-label",a.tt.play),"font"===a.iconType?(a.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),a.$playpauseButton.find("span.able-clipped").text(a.tt.play)):"svg"===a.iconType?(y=a.getSvgData("play"),a.$playpauseButton.find("svg").attr("viewBox",y[0]),a.$playpauseButton.find("path").attr("d",y[1]),a.$playpauseButton.find("span.able-clipped").text(a.tt.play)):a.$playpauseButton.find("img").attr("src",a.playButtonImg)):(a.$playpauseButton.attr("aria-label",a.tt.pause),"font"===a.iconType?(a.$playpauseButton.find("span").first().removeClass("icon-play").addClass("icon-pause"),a.$playpauseButton.find("span.able-clipped").text(a.tt.pause)):"svg"===a.iconType?(y=a.getSvgData("pause"),a.$playpauseButton.find("svg").attr("viewBox",y[0]),a.$playpauseButton.find("path").attr("d",y[1]),a.$playpauseButton.find("span.able-clipped").text(a.tt.pause)):a.$playpauseButton.find("img").attr("src",a.pauseButtonImg)))})),this.fullscreen\|\|(v=this.$statusBarDiv.height(),this.$statusBarDiv.find("span.able-speed").height()>v+5?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):(this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1),this.$statusBarDiv.width()<300?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1))))},AblePlayer.prototype.getHiddenWidth=function(t){var e=t.clone().appendTo("body"),i=e.outerWidth();return e.remove(),i},AblePlayer.prototype.handlePlay=function(t){this.paused?(this.okToPlay=!0,this.playMedia(),this.synth.paused&&this.synth.resume()):(this.okToPlay=!1,this.pauseMedia(),this.speakingDescription&&this.synth.pause()),null===this.speechEnabled&&this.initSpeech("play")},AblePlayer.prototype.handleRestart=function(){this.speakingDescription&&this.synth.cancel(),this.seekTo(0)},AblePlayer.prototype.handlePrevTrack=function(){0===this.playlistIndex?this.playlistIndex=this.$playlist.length-1:this.playlistIndex--,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleNextTrack=function(){this.playlistIndex===this.$playlist.length-1?this.playlistIndex=0:this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleRewind=function(){var t;t=this.elapsed-this.seekInterval,this.useChapterTimes?t<this.currentChapter.start&&(t=this.currentChapter.start):t<0&&(t=0),this.seekTo(t)},AblePlayer.prototype.handleFastForward=function(){var t,e;e=this.chapters.length-1,t=this.elapsed+this.seekInterval,this.useChapterTimes?this.chapters[e]==this.currentChapter?(t>this.duration\|\|t>this.currentChapter.end\|\|this.duration%t<this.seekInterval)&&(t=Math.min(this.duration,this.currentChapter.end)):t>this.currentChapter.end&&(t=this.currentChapter.end):t>this.duration&&(t=this.duration),this.seekTo(t)},AblePlayer.prototype.handleRateIncrease=function(){this.changeRate(1)},AblePlayer.prototype.handleRateDecrease=function(){this.changeRate(-1)},AblePlayer.prototype.changeRate=function(t){var e,i,s,a;"html5"===this.player?this.setPlaybackRate(this.getPlaybackRate()+.25t):"youtube"===this.player?this.youTubePlayerReady&&(e=this.youTubePlayer.getAvailablePlaybackRates(),i=this.getPlaybackRate(),-1===(s=e.indexOf(i))\|\|(s+=t)<e.length&&s>=0&&this.setPlaybackRate(e[s])):"vimeo"===this.player&&(1===t?a=this.vimeoPlaybackRate+.5<=2?this.vimeoPlaybackRate+.5:2:-1===t&&(a=this.vimeoPlaybackRate-.5>=.5?this.vimeoPlaybackRate-.5:.5),this.setPlaybackRate(a))},AblePlayer.prototype.handleCaptionToggle=function(){var t,e=this;if(this.hidingPopup)return this.hidingPopup=!1,!1;if(1===(t=this.captions.length?this.captions:[]).length){if(!0===this.captionsOn)this.captionsOn=!1,this.prefCaptions=0,this.$ccButton.attr("aria-pressed","false"),this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.unloadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.disableTextTrack():this.$captionsWrapper.hide();else{this.captionsOn=!0,this.prefCaptions=1,this.$ccButton.attr("aria-pressed","true"),this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.loadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then((function(t){})).catch((function(t){t.name})):this.$captionsWrapper.show();for(var i=0;i<t.length;i++)!0===t[i].def&&(this.selectedCaptions=t[i]);this.selectedCaptions=this.captions[0],this.descriptions.length>=0&&(this.selectedDescriptions=this.descriptions[0])}this.refreshControls("captions")}else this.captionsPopup&&this.captionsPopup.is(":visible")?(this.captionsPopup.hide(),this.hidingPopup=!1,this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)):(this.closePopups(),this.captionsPopup&&(this.captionsPopup.show(),this.$ccButton.attr("aria-expanded","true"),setTimeout((function(){e.captionsPopup.css("top",e.$ccButton.position().top-e.captionsPopup.outerHeight()),e.captionsPopup.css("left",e.$ccButton.position().left),e.captionsPopup.find("li").removeClass("able-focus"),e.captionsPopup.find("li").first().focus().addClass("able-focus")}),50)))},AblePlayer.prototype.waitThenFocus=function(t,e){setTimeout((function(){t.focus()}),null==e?50:e)},AblePlayer.prototype.handleChapters=function(){if(this.hidingPopup)return this.hidingPopup=!1,!1;this.chaptersPopup.is(":visible")?(this.chaptersPopup.hide(),this.hidingPopup=!1,this.$chaptersButton.attr("aria-expanded","false").focus()):(this.closePopups(),this.chaptersPopup.show(),this.$chaptersButton.attr("aria-expanded","true"),this.chaptersPopup.css("top",this.$chaptersButton.position().top-this.chaptersPopup.outerHeight()),this.chaptersPopup.css("left",this.$chaptersButton.position().left),this.chaptersPopup.find("li").removeClass("able-focus"),this.chaptersPopup.find('li[aria-checked="true"]').length?this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass("able-focus"):this.chaptersPopup.find("li").first().addClass("able-focus").attr("aria-checked","true").focus())},AblePlayer.prototype.handleDescriptionToggle=function(){this.descOn=!this.descOn,this.prefDesc=+this.descOn,this.updateCookie("prefDesc"),void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")\|\|this.$descDiv.hide()),this.initDescription(),this.refreshControls("descriptions")},AblePlayer.prototype.handlePrefsClick=function(t){var e,i,s,a;if(e=this,null===this.speechEnabled&&this.initSpeech("prefs"),this.hidingPopup)return this.hidingPopup=!1,!1;this.prefsPopup.is(":visible")?(this.prefsPopup.hide(),this.$prefsButton.attr("aria-expanded","false"),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.showingPrefsDialog\|\|this.$prefsButton.focus(),setTimeout((function(){e.hidingPopup=!1}),100)):(this.closePopups(),this.prefsPopup.show(),this.$prefsButton.attr("aria-expanded","true"),this.$prefsButton.focus(),setTimeout((function(){i=e.$prefsButton.position(),s=e.$ableDiv.width()-5,a=s-e.prefsPopup.width(),e.prefsPopup.css("top",i.top-e.prefsPopup.outerHeight()),e.prefsPopup.css("left",a),e.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","0"),e.prefsPopup.find("li").first().focus().addClass("able-focus")}),50))},AblePlayer.prototype.handleHelpClick=function(){this.setFullscreen(!1),this.helpDialog.show()},AblePlayer.prototype.handleTranscriptToggle=function(){var t=this;this.$transcriptDiv.is(":visible")?(this.$transcriptArea.hide(),this.$transcriptButton.addClass("buttonOff").attr("aria-label",this.tt.showTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.showTranscript),this.prefTranscript=0,this.$transcriptButton.focus().addClass("able-focus"),setTimeout((function(){t.closingTranscript=!1}),100)):(this.positionDraggableWindow("transcript"),this.$transcriptArea.show(),this.$transcriptPopup.hide(),this.$transcriptButton.removeClass("buttonOff").attr("aria-label",this.tt.hideTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.hideTranscript),this.prefTranscript=1,this.focusNotClick=!0,this.$transcriptArea.find("button").first().focus(),setTimeout((function(){t.focusNotClick=!1}),100)),this.updateCookie("prefTranscript")},AblePlayer.prototype.handleSignToggle=function(){var t=this;this.$signWindow.is(":visible")?(this.$signWindow.hide(),this.$signButton.addClass("buttonOff").attr("aria-label",this.tt.showSign),this.$signButton.find("span.able-clipped").text(this.tt.showSign),this.prefSign=0,this.$signButton.focus().addClass("able-focus"),setTimeout((function(){t.closingSign=!1}),100)):(this.positionDraggableWindow("sign"),this.$signWindow.show(),this.$signPopup.hide(),this.$signButton.removeClass("buttonOff").attr("aria-label",this.tt.hideSign),this.$signButton.find("span.able-clipped").text(this.tt.hideSign),this.prefSign=1,this.focusNotClick=!0,this.$signWindow.find("button").first().focus(),setTimeout((function(){t.focusNotClick=!1}),100)),this.updateCookie("prefSign")},AblePlayer.prototype.isFullscreen=function(){return this.nativeFullscreenSupported()?!!(document.fullscreenElement\|\|document.webkitFullscreenElement\|\|document.webkitCurrentFullscreenElement\|\|document.mozFullscreenElement\|\|document.msFullscreenElement):!!this.modalFullscreenActive},AblePlayer.prototype.setFullscreen=function(e){if(this.fullscreen!=e){var i=this,s=this.$ableWrapper,a=s[0];if(this.nativeFullscreenSupported())e?(a.requestFullscreen?a.requestFullscreen():a.webkitRequestFullscreen?a.webkitRequestFullscreen():a.mozRequestFullscreen?a.mozRequestFullscreen():a.msRequestFullscreen&&a.msRequestFullscreen(),this.fullscreen=!0):(this.restoringAfterFullscreen=!0,document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullscreen?document.webkitCancelFullscreen():document.mozCancelFullscreen?document.mozCancelFullscreen():document.msExitFullscreen&&document.msExitFullscreen(),this.fullscreen=!1);else{if(!this.fullscreenDialog){var n=t("<div>"),r=t("<p>",{class:"able-screenreader-alert"}).text(this.tt.fullscreen);n.append(r),this.fullscreenDialog=new AccessibleDialog(n,this.$fullscreenButton,"dialog",!0,"Fullscreen video player",r,this.tt.exitFullscreen,"100%",!0,(function(){i.handleFullscreenToggle()})),t("body").append(n)}var o=this.paused;if(e){this.modalFullscreenActive=!0,this.fullscreenDialog.show(),this.$modalFullscreenPlaceholder=t('<div class="placeholder">'),this.$modalFullscreenPlaceholder.insertAfter(s),s.appendTo(this.fullscreenDialog.modal),s===this.$ableColumnLeft&&s.width("100%");t(window).height(),this.$playerDiv.height();void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")\|\|this.$descDiv.height())}else this.modalFullscreenActive=!1,s===this.$ableColumnLeft&&s.width("50%"),s.insertAfter(this.$modalFullscreenPlaceholder),this.$modalFullscreenPlaceholder.remove(),this.fullscreenDialog.hide();!o&&this.paused&&this.playMedia()}t(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange",(function(t){i.fullscreen?i.clickedFullscreenButton\|\|(i.fullscreen=!1,i.restoringAfterFullscreen=!0):i.restoringAfterFullscreen=!0,i.resizePlayer(),i.refreshControls("fullscreen"),setTimeout((function(){i.clickedFullscreenButton=!1,i.restoringAfterFullscreen=!1}),1e3)}))}},AblePlayer.prototype.handleFullscreenToggle=function(){var t=this.paused;this.setFullscreen(!this.fullscreen),t?this.pauseMedia():t\|\|this.playMedia(),this.fullscreen?(this.hideControls=!0,this.playing&&(this.fadeControls("out"),this.controlsHidden=!0)):(this.hideControls=this.hideControlsOriginal,this.hideControls\|\|(this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear")))},AblePlayer.prototype.handleTranscriptLockToggle=function(t){this.autoScrollTranscript=t,this.prefAutoScrollTranscript=+t,this.updateCookie("prefAutoScrollTranscript"),this.refreshControls("transcript")},AblePlayer.prototype.showTooltip=function(t){t.is(":animated")?t.stop(!0,!0).show():t.stop().show()},AblePlayer.prototype.showAlert=function(t,e){var i,s,a,n;"transcript"===e?(i=this.$transcriptAlert,s=this.$transcriptArea):"sign"===e?(i=this.$signAlert,s=this.$signWindow):i="screenreader"===e?this.$srAlertBox:this.$alertBox,i.text(t).show(),"transcript"==e\|\|"sign"===e?(a=s.width()>i.width()?s.width()/2-i.width()/2:10,"sign"===e?n=s.height()/32:"transcript"===e&&(n=this.$transcriptToolbar.height()+30),i.css({top:n+"px",left:a+"px"})):"screenreader"!==e&&i.css({left:this.$playerDiv.width()/2-i.width()/2}),"screenreader"!==e&&setTimeout((function(){i.fadeOut(300)}),3e3)},AblePlayer.prototype.showedAlert=function(t){return"transcript"===t?!!this.showedTranscriptAlert:"sign"===t&&!!this.showedSignAlert},AblePlayer.prototype.resizePlayer=function(e,i){var s,a,n,r,o;"audio"!==this.mediaType&&(void 0!==e&&void 0!==i?(this.aspectRatio=i/e,this.playerWidth?(a=this.playerWidth,this.playerHeight?n=this.playerHeight:(n=Math.round(athis.aspectRatio),this.playerHeight=n)):(a="html5"===this.player?t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio))):this.fullscreen?(this.$ableWrapper.addClass("fullscreen"),a=t(window).width(),n=t(window).height()-this.$playerDiv.outerHeight()-5,this.positionCaptions("overlay")):(this.$ableWrapper.removeClass("fullscreen"),a="html5"===this.player?this.playerWidth?this.playerWidth:t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio),this.positionCaptions(this.prefCaptionsPosition)),this.debug,"youtube"===this.player\|\|"vimeo"===this.player?(r=this.$ableWrapper.find("iframe"),"youtube"===this.player&&this.youTubePlayer?this.youTubePlayer.setSize(a,n):r.attr({width:a,height:n}),this.playerWidth&&this.playerHeight&&(this.fullscreen?r.css({"max-width":"","max-height":""}):r.css({"max-width":this.playerWidth+"px","max-height":this.playerHeight+"px"}))):"html5"===this.player&&(this.fullscreen?(this.$media.attr({width:a,height:n}),this.$ableWrapper.css({width:a,height:n})):(this.$media.removeAttr("width height"),this.$ableWrapper.css({width:a+"px",height:"auto"}))),void 0!==this.$captionsDiv&&(s=parseInt(this.prefCaptionsSize,10),this.fullscreen?s=s/100+"vw":s+="%",this.$captionsDiv.css({"font-size":s})),"video"===this.mediaType&&(o=2Math.round(this.$mediaContainer.height()/3),this.$alertBox.css({top:o+"px"})),this.refreshControls())},AblePlayer.prototype.retrieveOffscreenWindow=function(t,e,i){var s,a,n,r,o,l,h,p;"transcript"==t?s=this.$transcriptArea:"sign"==t&&(s=this.$signWindow),l=s.width(),p=s.height(),n=(a=s.position()).top,o=(r=a.left)+l,h=n+p,n<0&&(n=10,s.css("top",n)),r<0&&(r=10,s.css("left",r)),o>e&&(r=e-20-l,s.css("left",r)),h>i&&(n=i-10-p,s.css("top",n))},AblePlayer.prototype.getHighestZIndex=function(){var e,i;return e=0,t("body ").not(".able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area").each((function(){i=t(this).css("z-index"),Number.isInteger(+i)&&parseInt(i)>e&&(e=parseInt(i))})),e},AblePlayer.prototype.updateZIndex=function(t){var e,i,s,a,n,r;if(e=8e3,i=7e3,this.getHighestZIndex(),void 0===this.$transcriptArea\|\|void 0===this.$signWindow)return void 0!==this.$transcriptArea?(s=parseInt(this.$transcriptArea.css("z-index")))>i&&this.$transcriptArea.css("z-index",i):void 0!==this.$signWindow&&(a=parseInt(this.$signWindow.css("z-index")))>e&&this.$signWindow.css("z-index",e),!1;if((s=parseInt(this.$transcriptArea.css("z-index")))===(a=parseInt(this.$signWindow.css("z-index"))))n=e,r=i;else if(s>a){if("transcript"===t)return!1;n=s,r=a}else{if("sign"===t)return!1;n=a,r=s}"transcript"===t?(this.$transcriptArea.css("z-index",n),this.$signWindow.css("z-index",r)):"sign"===t&&(this.$signWindow.css("z-index",n),this.$transcriptArea.css("z-index",r))},AblePlayer.prototype.syncTrackLanguages=function(t,e){var i,s,a,n,r;for(i=0;i<this.captions.length;i++)this.captions[i].language===e&&(s=this.captions[i]);for(i=0;i<this.chapters.length;i++)this.chapters[i].language===e&&(n=this.chapters[i]);for(i=0;i<this.descriptions.length;i++)this.descriptions[i].language===e&&(a=this.descriptions[i]);for(i=0;i<this.meta.length;i++)this.meta[i].language===e&&(r=this.meta[i]);if(this.transcriptLang=e,"init"===t\|\|"captions"===t?(this.captionLang=e,this.selectedCaptions=s,this.selectedChapters=n,this.selectedDescriptions=a,this.selectedMeta=r,this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a,this.updateChaptersList()):"transcript"===t&&(this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a),this.selectedDescriptions&&(this.setDescriptionVoice(),this.$sampleDescDiv&&this.sampleText))for(i=0;i<this.sampleText.length;i++)this.sampleText[i].lang===this.selectedDescriptions.language&&(this.currentSampleText=this.sampleText[i].text,this.$sampleDescDiv.html(this.currentSampleText));this.updateTranscript()}}(jQuery),function(t){AblePlayer.prototype.updateCaption=function(t){this.usingYouTubeCaptions\|\|this.usingVimeoCaptions\|\|void 0===this.$captionsWrapper\|\|(this.captionsOn?(this.$captionsWrapper.show(),void 0!==t&&this.showCaptions(t)):this.$captionsWrapper&&(this.$captionsWrapper.hide(),this.prefCaptions=0))},AblePlayer.prototype.updateCaptionsMenu=function(t){this.captionsPopup.find("li").attr("aria-checked","false"),void 0===t?this.captionsPopup.find("li").last().attr("aria-checked","true"):this.captionsPopup.find("li[lang="+t+"]").attr("aria-checked","true")},AblePlayer.prototype.getCaptionClickFunction=function(t){var e=this;return function(){e.selectedCaptions=t,e.captionLang=t.language,e.currentCaption=-1,e.usingYouTubeCaptions?e.captionsOn?e.youTubePlayer.getOptions("captions")&&e.startedPlaying?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):e.captionLangPending=e.captionLang:e.youTubePlayer.getOptions("captions")?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):(e.youTubePlayer.loadModule("captions"),e.captionLangPending=e.captionLang):e.usingVimeoCaptions?e.vimeoPlayer.enableTextTrack(e.captionLang).then((function(t){})).catch((function(t){t.name})):(e.syncTrackLanguages("captions",e.captionLang),e.swappingSrc\|\|(e.updateCaption(e.elapsed),e.showDescription(e.elapsed))),e.captionsOn=!0,e.hidingPopup=!0,e.captionsPopup.hide(),e.$ccButton.attr("aria-expanded","false"),"audio"===e.mediaType&&e.$captionsContainer.removeClass("captions-off"),setTimeout((function(){e.hidingPopup=!1}),100),e.updateCaptionsMenu(e.captionLang),e.waitThenFocus(e.$ccButton),e.prefCaptions=1,e.updateCookie("prefCaptions"),e.refreshControls("captions")}},AblePlayer.prototype.getCaptionOffFunction=function(){var t=this;return function(){"youtube"==t.player?t.youTubePlayer.unloadModule("captions"):t.usingVimeoCaptions&&t.vimeoPlayer.disableTextTrack(),t.captionsOn=!1,t.currentCaption=-1,"audio"===t.mediaType&&t.$captionsContainer.addClass("captions-off"),t.hidingPopup=!0,t.captionsPopup.hide(),t.$ccButton.attr("aria-expanded","false"),setTimeout((function(){t.hidingPopup=!1}),100),t.updateCaptionsMenu(),t.waitThenFocus(t.$ccButton),t.prefCaptions=0,t.updateCookie("prefCaptions"),this.swappingSrc\|\|(t.refreshControls("captions"),t.updateCaption())}},AblePlayer.prototype.showCaptions=function(t){var e,i,s,a;for(a=this.selectedCaptions.cues.length?this.selectedCaptions.cues:this.captions.length>=1?this.captions[0].cues:[],e=0;e<a.length;e++)if(a[e].start<=t&&a[e].end>t){i=e;break}void 0!==i?this.currentCaption!==i&&(s=this.flattenCueForCaption(a[i]).replace(/\n/g,"<br>"),this.$captionsDiv.html(s),this.currentCaption=i,0===s.length?this.$captionsDiv.css("display","none"):this.$captionsDiv.css("display","inline-block")):(this.$captionsDiv.html("").css("display","none"),this.currentCaption=-1)},AblePlayer.prototype.flattenCueForCaption=function(t){var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("("+t.value+")"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else if("i"===t.type){for(i.push("<em>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</em>")}else if("b"===t.type){for(i.push("<strong>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</strong>")}else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")};if(void 0!==t.components)for(var i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")},AblePlayer.prototype.getCaptionsOptions=function(t){var e=[];switch(t){case"prefCaptionsFont":e[0]=["serif",this.tt.serif],e[1]=["sans-serif",this.tt.sans],e[2]=["cursive",this.tt.cursive],e[3]=["fantasy",this.tt.fantasy],e[4]=["monospace",this.tt.monospace];break;case"prefCaptionsColor":case"prefCaptionsBGColor":e[0]=["white",this.tt.white],e[1]=["yellow",this.tt.yellow],e[2]=["green",this.tt.green],e[3]=["cyan",this.tt.cyan],e[4]=["blue",this.tt.blue],e[5]=["magenta",this.tt.magenta],e[6]=["red",this.tt.red],e[7]=["black",this.tt.black];break;case"prefCaptionsSize":e[0]="75%",e[1]="100%",e[2]="125%",e[3]="150%",e[4]="200%";break;case"prefCaptionsOpacity":e[0]="0%",e[1]="25%",e[2]="50%",e[3]="75%",e[4]="100%";break;case"prefCaptionsStyle":e[0]=this.tt.captionsStylePopOn,e[1]=this.tt.captionsStyleRollUp;break;case"prefCaptionsPosition":e[0]="overlay",e[1]="below"}return e},AblePlayer.prototype.translatePrefs=function(t,e,i){if("youtube"==i&&"size"===t)switch(e){case"75%":return-1;case"100%":return 0;case"125%":return 1;case"150%":return 2;case"200%":return 3}return!1},AblePlayer.prototype.stylizeCaptions=function(e,i){var s,a,n;void 0!==e&&("prefCaptionsPosition"==i?this.positionCaptions():void 0!==i?("prefCaptionsFont"===i?s="font-family":"prefCaptionsSize"===i?s="font-size":"prefCaptionsColor"===i?s="color":"prefCaptionsBGColor"===i?s="background-color":"prefCaptionsOpacity"===i&&(s="opacity"),a="prefCaptionsOpacity"===i?parseFloat(t("#"+this.mediaId+"_"+i).val())/100:t("#"+this.mediaId+"_"+i).val(),e.css(s,a)):(n=parseFloat(this.prefCaptionsOpacity)/100,e.css({"font-family":this.prefCaptionsFont,color:this.prefCaptionsColor,"background-color":this.prefCaptionsBGColor,opacity:n}),e===this.$captionsDiv&&void 0!==this.$captionsDiv&&this.$captionsDiv.css({"font-size":this.prefCaptionsSize}),"below"===this.prefCaptionsPosition?void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"}):"overlay"===this.prefCaptionsPosition&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":"transparent",opacity:""}),this.positionCaptions()))},AblePlayer.prototype.positionCaptions=function(t){void 0===t&&(t=this.prefCaptionsPosition),void 0!==this.$captionsWrapper&&("below"==t?(this.$captionsWrapper.removeClass("able-captions-overlay").addClass("able-captions-below"),this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"})):(this.$captionsWrapper.removeClass("able-captions-below").addClass("able-captions-overlay"),this.$captionsWrapper.css({"background-color":"transparent",opacity:""})))}}(jQuery),function(t){AblePlayer.prototype.populateChaptersDiv=function(){var e,i,s;t("#"+this.chaptersDivLocation)&&(this.$chaptersDiv=t("#"+this.chaptersDivLocation),this.$chaptersDiv.addClass("able-chapters-div"),this.$chaptersDiv.empty(),this.chaptersTitle&&(e="h"+this.getNextHeadingLevel(this.$chaptersDiv).toString(),i=this.mediaId+"-chapters-heading",s=t("<"+e+">",{class:"able-chapters-heading",id:i}).text(this.chaptersTitle),this.$chaptersDiv.append(s)),this.$chaptersNav=t("<nav>"),this.chaptersTitle?this.$chaptersNav.attr("aria-labelledby",i):this.$chaptersNav.attr("aria-label",this.tt.chapters),this.$chaptersDiv.append(this.$chaptersNav),this.updateChaptersList())},AblePlayer.prototype.updateChaptersList=function(){var e,i,s,a,n,r,o,l,h,p;if(e=this,!this.$chaptersNav)return!1;if(void 0===this.useChapterTimes&&("chapter"===this.seekbarScope&&this.selectedChapters.cues.length?this.useChapterTimes=!0:this.useChapterTimes=!1),(i=this.useChapterTimes?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[]).length>0){for(p=t("<ul>"),s=0;s<i.length;s++)a=s,n=t("<li></li>"),l=function(i){return function(){e.seekTrigger="chapter",h=t(this).closest("li"),p=t(this).closest("ul").find("li"),p.index(h),p.removeClass("able-current-chapter").children("button").removeAttr("aria-current"),h.addClass("able-current-chapter").children("button").attr("aria-current","true"),e.updateChapter(i),e.seekTo(i)}},(r=t("<button>",{type:"button",val:a}).text(this.flattenCueForCaption(i[a]))).on("click",l(i[a].start)),r.on("focus",(function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).closest("li").addClass("able-focus")})),n.on("hover",(function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).addClass("able-focus")})),n.on("mouseleave",(function(){t(this).removeClass("able-focus")})),r.on("blur",(function(){t(this).closest("li").removeClass("able-focus")})),n.append(r),p.append(n),this.defaultChapter===i[a].id&&(r.attr("aria-current","true").parent("li").addClass("able-current-chapter"),this.currentChapter=i[a],o=!0);o\|\|(this.currentChapter=i[0],p.find("button").first().attr("aria-current","true").parent("li").addClass("able-current-chapter")),this.$chaptersNav.html(p)}return!1},AblePlayer.prototype.seekToChapter=function(t){for(var e=0;e<this.selectedChapters.cues.length;){if(this.selectedChapters.cues[e].id==t){this.seekTo(this.selectedChapters.cues[e].start),this.updateChapter(this.selectedChapters.cues[e].start);break}e++}},AblePlayer.prototype.updateChapter=function(t){if(void 0!==this.selectedChapters){var e,i,s;for(e=this.selectedChapters.cues,i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s&&this.currentChapter!==e[s]&&(this.currentChapter=e[s],this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.seekIntervalCalculated=!1),void 0!==this.$chaptersDiv&&(this.$chaptersDiv.find("ul").find("li").removeClass("able-current-chapter").children("button").removeAttr("aria-current"),this.$chaptersDiv.find("ul").find("li").eq(s).addClass("able-current-chapter").children("button").attr("aria-current","true")))}},AblePlayer.prototype.getChapterDuration=function(){var t,e;return void 0===this.currentChapter\|\|void 0===this.duration?0:(t=this.selectedChapters.cues.length-1,this.selectedChapters.cues[t]==this.currentChapter&&this.currentChapter.end!==this.duration?(e=this.duration,this.currentChapter.end=this.duration):e=this.currentChapter.end,e-this.currentChapter.start)},AblePlayer.prototype.getChapterElapsed=function(){return void 0===this.currentChapter?0:this.elapsed>this.currentChapter.start?this.elapsed-this.currentChapter.start:0},AblePlayer.prototype.convertChapterTimeToVideoTime=function(t){if(void 0!==this.currentChapter){var e=this.currentChapter.start+t;return e>this.currentChapter.end?this.currentChapter.end:e}return t},AblePlayer.prototype.getChapterClickFunction=function(t){var e=this;return function(){e.seekTrigger="chapter",e.seekTo(t),e.hidingPopup=!0,e.chaptersPopup.hide(),setTimeout((function(){e.hidingPopup=!1}),100),e.$chaptersButton.focus()}}}(jQuery),function(t){AblePlayer.prototype.updateMeta=function(t){this.hasMeta&&("text"===this.metaType?(this.$metaDiv.show(),this.showMeta(t\|\|this.elapsed)):this.showMeta(t\|\|this.elapsed))},AblePlayer.prototype.showMeta=function(e){var i,s,a,n,r,o,l,h,p;for(i=[],n=this.meta.length>=1?this.meta:[],s=0;s<n.length;s++)if(n[s].start<=e&&n[s].end>e){a=s;break}if(void 0!==a){if(this.currentMeta!==a)if("text"===this.metaType)this.$metaDiv.html(this.flattenCueForMeta(n[a]).replace(/\n/g,"<br>"));else if("selector"===this.metaType){for(r=this.flattenCueForMeta(n[a]).split("\n"),o=0;o<r.length;o++)"pause"===(l=t.trim(r[o])).toLowerCase().trim()?(this.hideBigPlayButton=!0,this.pauseMedia()):"focus:"==l.toLowerCase().substring(0,6)?(p=l.substring(6).trim(),t(p).length&&t(p).focus()):t(l).length&&(this.currentMeta=a,void 0===(h=parseInt(t(l).attr("data-duration")))\|\|isNaN(h)?t(l).show():t(l).show().delay(h).fadeOut(),this.visibleSelectors.push(l),i.push(l));if(this.visibleSelectors&&this.visibleSelectors.length&&this.visibleSelectors.length!==i.length)for(o=this.visibleSelectors.length-1;o>=0;o--)-1==t.inArray(this.visibleSelectors[o],i)&&(t(this.visibleSelectors[o]).hide(),this.visibleSelectors.splice(o,1))}}else{if(void 0!==this.$metaDiv&&this.$metaDiv.html(""),this.visibleSelectors&&this.visibleSelectors.length){for(o=0;o<this.visibleSelectors.length;o++)t(this.visibleSelectors[o]).hide();this.visibleSelectors=[]}this.currentMeta=-1}},AblePlayer.prototype.flattenCueForMeta=function(t){for(var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("["+t.value+"]"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")},i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")}}(jQuery),function(t){AblePlayer.prototype.setupTranscript=function(){var e=new t.Deferred,i=e.promise();return this.usingYouTubeCaptions\|\|this.usingVimeoCaptions?(this.transcriptType=null,e.resolve()):(this.transcriptType\|\|this.captions.length&&(this.transcriptType="popup"),this.transcriptType?"popup"===this.transcriptType\|\|"external"===this.transcriptType?(this.injectTranscriptArea(),e.resolve()):"manual"===this.transcriptType&&(this.setupManualTranscript(),e.resolve()):e.resolve()),i},AblePlayer.prototype.injectTranscriptArea=function(){var e,i,s,a,n;if(this.$transcriptArea=t("<div>",{class:"able-transcript-area",role:"dialog","aria-label":this.tt.transcriptTitle}),this.$transcriptToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$transcriptDiv=t("<div>",{class:"able-transcript"}),this.$autoScrollTranscriptCheckbox=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),e=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$transcriptToolbar.append(e,this.$autoScrollTranscriptCheckbox),this.captions.length>1)for(i=t("<div>",{class:"transcript-language-select-wrapper"}),s=t("<label>",{for:"transcript-language-select-"+this.mediaId}).text(this.tt.language),this.$transcriptLanguageSelect=t("<select>",{id:"transcript-language-select-"+this.mediaId}),a=0;a<this.captions.length;a++)n=t("<option></option>",{value:this.captions[a].language,lang:this.captions[a].language}).text(this.captions[a].label),this.captions[a].def&&n.prop("selected",!0),this.$transcriptLanguageSelect.append(n);i&&(i.append(s,this.$transcriptLanguageSelect),this.$transcriptToolbar.append(i)),this.$transcriptArea.append(this.$transcriptToolbar,this.$transcriptDiv),this.transcriptDivLocation?t("#"+this.transcriptDivLocation).append(this.$transcriptArea):this.$ableWrapper.append(this.$transcriptArea),this.transcriptDivLocation\|\|(this.initDragDrop("transcript"),1===this.prefTranscript&&this.positionDraggableWindow("transcript",this.getDefaultWidth("transcript"))),this.prefTranscript\|\|this.transcriptDivLocation\|\|this.$transcriptArea.hide()},AblePlayer.prototype.addTranscriptAreaEvents=function(){var t=this;this.$autoScrollTranscriptCheckbox.click((function(){t.handleTranscriptLockToggle(t.$autoScrollTranscriptCheckbox.prop("checked"))})),this.$transcriptDiv.on("mousewheel DOMMouseScroll click scroll",(function(e){t.scrollingTranscript\|\|(t.autoScrollTranscript=!1,t.refreshControls("transcript")),t.scrollingTranscript=!1})),void 0!==this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.on("click mousedown",(function(t){t.stopPropagation()})),this.$transcriptLanguageSelect.on("change",(function(){var e=t.$transcriptLanguageSelect.val();t.syncTrackLanguages("transcript",e)})))},AblePlayer.prototype.transcriptSrcHasRequiredParts=function(){return!!(t("#"+this.transcriptSrc).length&&(this.$transcriptArea=t("#"+this.transcriptSrc),this.$transcriptArea.find(".able-window-toolbar").length&&(this.$transcriptToolbar=this.$transcriptArea.find(".able-window-toolbar").eq(0),this.$transcriptArea.find(".able-transcript").length&&(this.$transcriptDiv=this.$transcriptArea.find(".able-transcript").eq(0),this.$transcriptArea.find(".able-transcript-seekpoint").length))))&&(this.$transcriptSeekpoints=this.$transcriptArea.find(".able-transcript-seekpoint"),!0)},AblePlayer.prototype.setupManualTranscript=function(){var e,i;e=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),i=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$autoScrollTranscriptCheckbox=e,this.$transcriptToolbar.append(i,this.$autoScrollTranscriptCheckbox)},AblePlayer.prototype.updateTranscript=function(){if(this.transcriptType&&(!this.playerCreated\|\|this.$transcriptArea)){if("external"===this.transcriptType\|\|"popup"===this.transcriptType){var e,i,s;if(this.transcriptLang?i=this.transcriptCaptions.cues:this.transcriptCaptions?(this.transcriptLang=this.transcriptCaptions.language,i=this.transcriptCaptions.cues):this.selectedCaptions&&(this.transcriptLang=this.captionLang,i=this.selectedCaptions.cues),this.transcriptChapters)e=this.transcriptChapters.cues;else if(this.chapters.length>0){if(this.transcriptLang)for(var a=0;a<this.chapters.length;a++)this.chapters[a].language===this.transcriptLang&&(e=this.chapters[a].cues);void 0===e&&(e=this.chapters[0].cues\|\|[])}if(this.transcriptDescriptions)s=this.transcriptDescriptions.cues;else if(this.descriptions.length>0){if(this.transcriptLang)for(a=0;a<this.descriptions.length;a++)this.descriptions[a].language===this.transcriptLang&&(s=this.descriptions[a].cues);s\|\|(s=this.descriptions[0].cues\|\|[])}var n=this.generateTranscript(e\|\|[],i\|\|[],s\|\|[]);this.$transcriptDiv.html(n),this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.find("option:selected").prop("selected",!1),this.$transcriptLanguageSelect.find("option[lang="+this.transcriptLang+"]").prop("selected",!0))}var r=this;1===this.prefTabbable&&this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"),this.$transcriptArea.length>0&&this.$transcriptArea.find("span.able-transcript-seekpoint").click((function(e){r.seekTrigger="transcript";var i=parseFloat(t(this).attr("data-start"));i+=.01,r.seekingFromTranscript?r.seekingFromTranscript=!1:(r.seekingFromTranscript=!0,r.seekTo(i))}))}},AblePlayer.prototype.highlightTranscript=function(e){if(this.transcriptType){var i,s,a,n=this;e=parseFloat(e),this.$transcriptArea.find("span.able-transcript-seekpoint").each((function(){if(i=parseFloat(t(this).attr("data-start")),s=parseFloat(t(this).attr("data-end")),a=!!t(this).parent().hasClass("able-transcript-chapter-heading"),e>=i&&e<=s&&!a)return t(this).hasClass("able-highlight")\|\|(n.$transcriptArea.find(".able-highlight").removeClass("able-highlight"),t(this).addClass("able-highlight"),n.movingHighlight=!0),!1})),n.currentHighlight=n.$transcriptArea.find(".able-highlight"),0===n.currentHighlight.length&&(n.currentHighlight=null)}},AblePlayer.prototype.generateTranscript=function(e,i,s){var a,n=this,r=t('<div class="able-transcript-container"></div>');if(r.attr("lang",this.transcriptLang),a=void 0!==this.transcriptTitle?this.transcriptTitle:this.lyricsMode?this.tt.lyricsTitle:this.tt.transcriptTitle,!this.transcriptDivLocation){var o=this.playerHeadingLevel,l=(o+=1)+1;if(o<=6)var h="h"+o.toString();else h="div";var p=t("<"+h+">");p.addClass("able-transcript-heading"),o>6&&p.attr({role:"heading","aria-level":o}),p.text(a),p.attr("lang",this.lang),r.append(p)}for(var c=0,u=0,d=0,addChapter=function(e,i){if(l<=6)var s="h"+l.toString();else s="div";var a=t("<"+s+">",{class:"able-transcript-chapter-heading"});l>6&&a.attr({role:"heading","aria-level":l});for(var flattenComponentForChapter=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForChapter(t.children[i]));return e},n=t("<span>",{class:"able-transcript-seekpoint"}),r=0;r<i.components.children.length;r++)for(var o=flattenComponentForChapter(i.components.children[r]),h=0;h<o.length;h++)n.append(o[h]);n.attr("data-start",i.start.toString()),n.attr("data-end",i.end.toString()),a.append(n),e.append(a)},addDescription=function(e,i){var s=t("<div>",{class:"able-transcript-desc"}),a=t("<span>",{class:"able-hidden"});a.attr("lang",n.lang),a.text(n.tt.prefHeadingDescription+": "),s.append(a);for(var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForDescription(t.children[i]));return e},r=t("<span>",{class:"able-transcript-seekpoint"}),o=0;o<i.components.children.length;o++)for(var l=flattenComponentForDescription(i.components.children[o]),h=0;h<l.length;h++)r.append(l[h]);r.attr("data-start",i.start.toString()),r.attr("data-end",i.end.toString()),s.append(r),e.append(s)},addCaption=function(e,i){for(var s=t("<span>",{class:"able-transcript-seekpoint able-transcript-caption"}),flattenComponentForCaption=function(e){var i=[],s=0,flattenString=function(t){var e;s++;var i=[];if(""===t)return i;var a=t.indexOf("["),n=t.indexOf("]"),r=t.indexOf("("),o=t.indexOf(")"),l=-1!==a&&-1!==n,h=-1!==r&&-1!==o;if(h\|\|l){if(s>1)var p="<br/>";else p="";var c=p+'<span class="able-unspoken">',u="</span>";h&&l&&(a<r?h=!1:l=!1)}return h?(e=t.substring(0,r),e+=c,e+=t.substring(r,o+1),e+=u,e+=flattenString(t.substring(o+1)),i.push(e)):l?(e=t.substring(0,a),e+=c,e+=t.substring(a,n+1),e+=u,e+=flattenString(t.substring(n+1)),i.push(e)):i.push(t),i};if("string"===e.type)i=i.concat(flattenString(e.value));else if("v"===e.type){var a=t("<span>",{class:"able-unspoken"});e.value=e.value.replace(/^title="\|\"$/g,""),a.text("("+e.value+")"),i.push(a);for(var n=0;n<e.children.length;n++)for(var r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)i.push(r[o])}else if("b"===e.type\|\|"i"===e.type){if("b"===e.type)var l=t("<strong>");else if("i"===e.type)l=t("<em>");for(n=0;n<e.children.length;n++)for(r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)l.append(r[o]);"b"!==e.type&&"i"!=e.type\|\|i.push(l," ")}else for(n=0;n<e.children.length;n++)i=i.concat(flattenComponentForCaption(e.children[n]));return i},a=0;a<i.components.children.length;a++)for(var r=flattenComponentForCaption(i.components.children[a]),o=0;o<r.length;o++){var l=r[o];"string"==typeof l&&(n.lyricsMode?l=l.replace(/\n/g,"<br>")+"<br>":l+=" "),s.append(l)}s.attr("data-start",i.start.toString()),s.attr("data-end",i.end.toString()),e.append(s),e.append(" \n")};c<e.length\|\|d<s.length\|\|u<i.length;){if(c<e.length&&d<s.length&&u<i.length)var f=Math.min(e[c].start,s[d].start,i[u].start);else if(c<e.length&&d<s.length)f=Math.min(e[c].start,s[d].start);else if(c<e.length&&u<i.length)f=Math.min(e[c].start,i[u].start);else if(d<s.length&&u<i.length)f=Math.min(s[d].start,i[u].start);else f=null;null!==f?void 0!==e[c]&&e[c].start===f?(addChapter(r,e[c]),c+=1):void 0!==s[d]&&s[d].start===f?(addDescription(r,s[d]),d+=1):(addCaption(r,i[u]),u+=1):c<e.length?(addChapter(r,e[c]),c+=1):d<s.length?(addDescription(r,s[d]),d+=1):u<i.length&&(addCaption(r,i[u]),u+=1)}var g=r.children(),m=0;return g.each((function(){t(this).hasClass("able-transcript-caption")?(-1===t(this).text().indexOf("[")&&-1===t(this).text().indexOf("(")\|\|m>0&&(r.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),m=0),t(this).addClass("able-block-temp"),m++):m>0&&(r.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),m=0)})),r}}(jQuery),function(t){AblePlayer.prototype.showSearchResults=function(){var e=this;if(this.searchDiv&&this.searchString){var i=DOMPurify.sanitize(this.searchString);if(t("#"+this.SearchDiv)){var s="<p>"+this.tt.resultsSummary1+" ";s+='<span id="able-search-term-echo">'+i+"</span>",s+="</p>";var a=this.searchFor(i,this.searchIgnoreCaps);if(a.length>0){var n=t("<p>",{class:"able-search-results-summary"}),r=this.tt.resultsSummary2;r+=" <strong>"+a.length+"</strong> ",r+=this.tt.resultsSummary3+" ",r+=this.tt.resultsSummary4,n.html(r);for(var o=t("<ul>"),l=0;l<a.length;l++){var h="aria-search-result-"+l,p=t("<li>",{}),c=this.secondsToTime(a[l].start),u=this.tt.searchButtonLabel+" "+c.title,d=t("<button>",{class:"able-search-results-time","data-start":a[l].start,title:u,"aria-label":u,"aria-describedby":h});d.text(c.value),d.on("click",(function(i){e.seekTrigger="search";var s=parseFloat(t(this).attr("data-start"));s+=.01,e.seeking=!0,e.seekTo(s)}));var f=t("<span>",{class:"able-search-result-text",id:h});f.html("..."+a[l].caption+"..."),p.append(d,f),o.append(p)}t("#"+this.searchDiv).html(s).append(n,o)}else{var g=t("<p>").text(this.tt.noResultsFound);t("#"+this.searchDiv).html(s).append(g)}}}},AblePlayer.prototype.searchFor=function(e,i){var s,a,n,r,o,l,h;n=[];var p=e.split(" ");if(this.captions.length>0){for(l=0;l<this.captions.length;l++)this.captions[l].language===this.searchLang&&(s=this.searchLang,a=this.captions[l].cues);if(a.length>0)for(o=0,l=0;l<a.length;l++)if(-1!==t.inArray(a[l].components.children[0].type,["string","i","b","u","v","c"])){r=this.flattenCueForCaption(a[l]);var c=i?r.toLowerCase():r;for(h=0;h<p.length;h++){var u=i?p[h].toLowerCase():p[h];if(-1!==c.indexOf(u)){n[o]=[],n[o].start=a[l].start,n[o].lang=s,n[o].caption=this.highlightSearchTerm(p,r),o++;break}}}}return n},AblePlayer.prototype.highlightSearchTerm=function(t,e){return t.forEach((function(t){var i=new RegExp(t,"gi");e=e.replace(i,'<span class="able-search-term">$&</span>')})),e},AblePlayer.prototype.secondsToTime=function(t){t=Math.floor(t);var e=parseInt(t/3600,10)%24,i=parseInt(t/60,10)%60,s=t%60,a="",n="";e>0&&(a+=e+":",n+=1==e?"1 "+this.tt.hour+" ":e+" "+this.tt.hours+" "),i<10?(a+="0"+i+":",i>0&&(n+=1==i?"1 "+this.tt.minute+" ":i+" "+this.tt.minutes+" ")):(a+=i+":",n+=i+" "+this.tt.minutes+" "),s<10?(a+="0"+s,s>0&&(n+=1==s?"1 "+this.tt.second+" ":s+" "+this.tt.seconds+" ")):(a+=s,n+=s+" "+this.tt.seconds+" ");var r=[];return r.value=a,r.title=n,r}}(jQuery),function(t){AblePlayer.prototype.onMediaUpdateTime=function(t,e){var i=this;this.getMediaTimes(t,e).then((function(t){i.duration=t.duration,i.elapsed=t.elapsed,i.duration>0&&(1===i.prefHighlight&&i.highlightTranscript(i.elapsed),i.updateCaption(i.elapsed),i.showDescription(i.elapsed),i.updateChapter(i.elapsed),i.updateMeta(i.elapsed),i.refreshControls("timeline",i.duration,i.elapsed))}))},AblePlayer.prototype.onMediaPause=function(){this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear"),this.refreshControls("playpause")},AblePlayer.prototype.onMediaComplete=function(){this.hasPlaylist&&!this.cueingPlaylistItem&&(this.playlistIndex===this.$playlist.length-1?this.loop?(this.playlistIndex=0,this.cueingPlaylistItem=!0,this.cuePlaylistItem(0)):(this.playing=!1,this.paused=!0):(this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex))),this.refreshControls("init")},AblePlayer.prototype.onMediaNewSourceLoad=function(){var t=!1;this.cueingPlaylistItem&&(this.cueingPlaylistItem=!1),this.recreatingPlayer&&(this.recreatingPlayer=!1),this.playbackRate&&this.setPlaybackRate(this.playbackRate),this.userClickedPlaylist?this.startedPlaying&&!this.okToPlay\|\|(this.playMedia(),t=!0):"restart"==this.seekTrigger\|\|"chapter"==this.seekTrigger\|\|"transcript"==this.seekTrigger\|\|"search"==this.seekTrigger?(this.playMedia(),t=!0):this.swappingSrc?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length\|\|this.loop)&&(this.playMedia(),t=!0):this.swapTime>0?"complete"===this.seekStatus?(this.okToPlay&&this.playMedia(),t=!0):"seeking"===this.seekStatus\|\|(this.swapTime===this.elapsed?(this.seekStatus="complete",this.okToPlay&&this.playMedia(),t=!0):this.hasDescTracks?t=!0:this.durationsAreCloseEnough(this.duration,this.prevDuration)?(this.seekStatus="seeking",this.seekTo(this.swapTime)):t=!0):this.playing&&(this.playMedia(),t=!0):this.startedPlaying?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length\|\|this.loop)&&(this.playMedia(),t=!0):t=!0:this.startTime>0?this.seeking?(this.seeking=!1,this.okToPlay&&this.playMedia(),t=!0):this.seekTo(this.startTime):this.defaultChapter&&void 0!==this.selectedChapters?this.seekToChapter(this.defaultChapter):(this.okToPlay&&this.playMedia(),t=!0),t&&(this.swappingSrc=!1,this.seekStatus=null,this.swapTime=0,this.seekTrigger=null,this.seekingFromTranscript=!1,this.userClickedPlaylist=!1,this.okToPlay=!1),this.refreshControls("init"),this.$focusedElement&&(this.restoreFocus(),this.$focusedElement=null)},AblePlayer.prototype.durationsAreCloseEnough=function(t,e){return Math.abs(Math.round(t)-Math.round(e))<=1},AblePlayer.prototype.restoreFocus=function(){var e;this.$focusedElement&&"button"===this.$focusedElement.attr("role")&&(e=this.$focusedElement.attr("class").split(/\s+/),t.each(e,(function(e,i){"able-button-handler-"===i.substring(0,20)&&t("div.able-controller div."+i).focus()})))},AblePlayer.prototype.addSeekbarListeners=function(){var t=this;this.seekBar.bodyDiv.on("startTracking",(function(e){t.pausedBeforeTracking=t.paused,t.pauseMedia()})).on("tracking",(function(e,i){t.highlightTranscript(i),t.updateCaption(i),t.showDescription(i),t.updateChapter(t.convertChapterTimeToVideoTime(i)),t.updateMeta(i),t.refreshControls("init")})).on("stopTracking",(function(e,i){t.useChapterTimes?t.seekTo(t.convertChapterTimeToVideoTime(i)):t.seekTo(i),t.pausedBeforeTracking\|\|setTimeout((function(){t.playMedia()}),200)}))},AblePlayer.prototype.onClickPlayerButton=function(e){var i,s;"play"===(i=this.getButtonNameFromClass(t(e).attr("class")))?(this.clickedPlay=!0,this.handlePlay()):"restart"===i?(this.seekTrigger="restart",this.handleRestart()):"previous"===i?(this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="previous",this.buttonWithFocus="previous",this.handlePrevTrack()):"next"===i?(this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="next",this.buttonWithFocus="next",this.handleNextTrack()):"rewind"===i?(this.seekTrigger="rewind",this.handleRewind()):"forward"===i?(this.seekTrigger="forward",this.handleFastForward()):"mute"===i?this.handleMute():"volume"===i?this.handleVolumeButtonClick():"faster"===i?this.handleRateIncrease():"slower"===i?this.handleRateDecrease():"captions"===i?this.handleCaptionToggle():"chapters"===i?this.handleChapters():"descriptions"===i?this.handleDescriptionToggle():"sign"===i?this.closingSign\|\|this.handleSignToggle():"preferences"===i?"menu"===t(e).attr("data-prefs-popup")?this.handlePrefsClick():(this.showingPrefsDialog=!0,this.closePopups(),"keyboard"===(s=t(e).attr("data-prefs-popup"))?this.keyboardPrefsDialog.show():"captions"===s?this.captionPrefsDialog.show():"descriptions"===s?this.descPrefsDialog.show():"transcript"===s&&this.transcriptPrefsDialog.show(),this.showingPrefsDialog=!1):"help"===i?this.handleHelpClick():"transcript"===i?this.closingTranscript\|\|this.handleTranscriptToggle():"fullscreen"===i&&(this.clickedFullscreenButton=!0,this.handleFullscreenToggle())},AblePlayer.prototype.getButtonNameFromClass=function(t){var e,i;for(e=t.split(" "),i=0;i<e.length;i++)if("able-button-handler-"===e[i].substring(0,20))return e[i].substring(20);return t},AblePlayer.prototype.okToHandleKeyPress=function(){var e=AblePlayer.getActiveDOMElement();return"INPUT"!==t(e).prop("tagName")},AblePlayer.prototype.onPlayerKeyPress=function(e){var i,s;return(i=e.which)>=65&&i<=90&&(i+=32),s=t(document.activeElement),27===i&&this.$transcriptArea&&t.contains(this.$transcriptArea[0],s[0])&&!this.hidingPopup?(this.handleTranscriptToggle(),!1):!!this.okToHandleKeyPress()&&void(t(":focus").is("[contenteditable]")\|\|t(":focus").is("input")\|\|t(":focus").is("textarea")&&!this.stenoMode\|\|t(":focus").is("select")\|\|e.target.hasAttribute("contenteditable")\|\|"INPUT"===e.target.tagName\|\|"TEXTAREA"===e.target.tagName&&!this.stenoMode\|\|"SELECT"===e.target.tagName\|\|(27===i?(this.closePopups(),this.$tooltipDiv.hide(),this.seekBar.hideSliderTooltips()):32===i?"button"===s.attr("role")&&(e.preventDefault(),s.click()):112===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePlay()):115===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRestart()):109===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleMute()):118===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeButtonClick()):i>=49&&i<=57?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeKeystroke(i)):99===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleCaptionToggle()):100===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleDescriptionToggle()):102===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleFastForward()):114===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRewind()):98===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrevTrack()):110===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleNextTrack()):101===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrefsClick()):13===i&&("button"===s.attr("role")\|\|"SPAN"===s.prop("tagName")\|\|"LI"===s.prop("tagName"))&&s.click()))},AblePlayer.prototype.addHtml5MediaListeners=function(){var t=this;this.$media.on("emptied",(function(){})).on("loadedmetadata",(function(){t.duration=t.media.duration;Math.abs(Math.round(50.5)-Math.round(51.9))})).on("canplay",(function(){})).on("canplaythrough",(function(){t.onMediaNewSourceLoad()})).on("play",(function(){t.refreshControls("playpause")})).on("playing",(function(){t.playing=!0,t.paused=!1,t.swappingSrc=!1,t.refreshControls("playpause")})).on("ended",(function(){t.playing=!1,t.paused=!0,t.onMediaComplete()})).on("progress",(function(){t.refreshControls("timeline")})).on("waiting",(function(){})).on("durationchange",(function(){t.refreshControls("timeline")})).on("timeupdate",(function(){t.onMediaUpdateTime()})).on("pause",(function(){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist\|\|t.swappingSrc\|\|(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause()})).on("ratechange",(function(){})).on("volumechange",(function(){t.volume=t.getVolume()})).on("error",(function(){t.debug&&t.media.error.code}))},AblePlayer.prototype.addVimeoListeners=function(){var t=this;this.vimeoPlayer.on("loaded",(function(e){t.onMediaNewSourceLoad()})),this.vimeoPlayer.on("play",(function(e){t.playing=!0,t.startedPlaying=!0,t.paused=!1,t.refreshControls("playpause")})),this.vimeoPlayer.on("ended",(function(e){t.playing=!1,t.paused=!0,t.onMediaComplete()})),this.vimeoPlayer.on("bufferstart",(function(){})),this.vimeoPlayer.on("bufferend",(function(){})),this.vimeoPlayer.on("progress",(function(t){})),this.vimeoPlayer.on("seeking",(function(t){})),this.vimeoPlayer.on("seeked",(function(t){})),this.vimeoPlayer.on("timeupdate",(function(e){t.onMediaUpdateTime(e.duration,e.seconds)})),this.vimeoPlayer.on("pause",(function(e){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist\|\|t.swappingSrc\|\|(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause(),t.refreshControls("playpause")})),this.vimeoPlayer.on("playbackratechange",(function(e){t.vimeoPlaybackRate=e.playbackRate})),this.vimeoPlayer.on("texttrackchange",(function(t){})),this.vimeoPlayer.on("volumechange",(function(e){t.volume=10e.volume})),this.vimeoPlayer.on("error",(function(t){}))},AblePlayer.prototype.addEventListeners=function(){var e;if(e=this,t(window).on("resize",(function(){e.resizePlayer()})),window.MutationObserver){var i=this.$ableDiv[0];new MutationObserver((function(t){t.forEach((function(t){"attributes"===t.type&&"style"===t.attributeName&&e.$ableDiv.is(":visible")&&e.refreshControls("init")}))})).observe(i,{attributes:!0,childList:!0,characterData:!0})}void 0!==this.seekBar?this.addSeekbarListeners():setTimeout((function(){void 0!==e.seekBar&&e.addSeekbarListeners()}),2e3),this.$controllerDiv.find('div[role="button"]').on("click",(function(t){t.stopPropagation(),e.onClickPlayerButton(this)})),t(document).on("click",(function(i){if(0!==i.button)return!1;(t(".able-popup:visible").length\|\|t(".able-volume-popup:visible"))&&e.closePopups(),"VIDEO"===i.target.tagName&&(e.clickedPlay=!0)})),this.$ableDiv.on("mousemove",(function(){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())})),t(document).keydown((function(t){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())})),this.$ableDiv.keydown((function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)})),this.stenoMode&&void 0!==this.stenoFrameContents&&this.stenoFrameContents.on("keydown",(function(t){e.onPlayerKeyPress(t)})),this.$transcriptArea&&this.$transcriptArea.on("keydown",(function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)})),this.$playlist&&this.$playlist.click((function(i){e.userClickedPlaylist\|\|(e.userClickedPlaylist=!0,e.playlistIndex=t(this).index(),e.cuePlaylistItem(e.playlistIndex))})),this.$media.click((function(){e.handlePlay()})),"html5"===this.player?this.addHtml5MediaListeners():"vimeo"===this.player?this.addVimeoListeners():"youtube"===this.player&&setInterval((function(){e.onMediaUpdateTime()}),300)}}(jQuery),function(t){AblePlayer.prototype.initDragDrop=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f;for(i=this,"transcript"===e?(s=this.$transcriptArea,n="transcript-window",a=this.$transcriptToolbar):"sign"===e&&(s=this.$signWindow,n="sign-window",a=this.$signToolbar),a.addClass("able-draggable"),r=t("<div>",{class:"able-resizable"}),o=t("<svg>").attr({width:"100%",height:"100%",viewBox:"0 0 100 100",preserveAspectRatio:"none"}),l=1;l<=3;l++)1===l?(h="100",p="0",c="0",u="100"):2===l?(h="33",p="100",c="100",u="33"):3===l&&(h="67",p="100",c="100",u="67"),d=t("<line>").attr({x1:h,y1:p,x2:c,y2:u,"vector-effect":"non-scaling-stroke"}),o.append(d);r.html(o),f=parseInt(s.css("z-index"))+100,r.css("z-index",f),s.append(r),r.html(r.html()),a.on("mousedown mouseup touchstart touchend",(function(t){return t.stopPropagation(),"mousedown"===t.type\|\|"touchstart"===t.type?i.windowMenuClickRegistered\|\|(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.dragDevice="mouse",i.startDrag(e,s)):"mouseup"!==t.type&&"touchend"!==t.type\|\|i.dragging&&"mouse"===i.dragDevice&&i.endDrag(e),!1})),r.on("mousedown mouseup touchstart touchend",(function(t){return t.stopPropagation(),"mousedown"===t.type\|\|"touchstart"===t.type?i.windowMenuClickRegistered\|\|(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.startResize(e,s)):"mouseup"!==t.type&&"touchend"!==t.type\|\|i.resizing&&i.endResize(e),!1})),s.on("click",(function(){i.windowMenuClickRegistered\|\|i.finishingDrag\|\|i.updateZIndex(e),i.finishingDrag=!1})),this.addWindowMenu(e,s,n)},AblePlayer.prototype.addWindowMenu=function(e,i,s){var a,n,r,o,l,h,p,c,u,d,f;a=this,this.windowMenuClickRegistered=!1,this.finishingDrag=!1,(n=t('<div role="alert"></div>')).addClass("able-alert"),n.hide(),n.appendTo(this.$activeWindow),n.css({top:i.offset().top}),f=this.mediaId+"-"+s+"-menu",r=t("<button>",{type:"button",tabindex:"0","aria-label":this.tt.windowButtonLabel,"aria-haspopup":"true","aria-controls":f,"aria-expanded":"false",class:"able-button-handler-preferences"}),"font"===this.iconType?(o=t("<span>",{class:"icon-preferences","aria-hidden":"true"}),r.append(o)):(l=this.rootPath+"button-icons/"+this.toolbarIconColor+"/preferences.png",h=t("<img>",{src:l,alt:"",role:"presentation"}),r.append(h)),p=t("<span>",{class:"able-clipped"}).text(this.tt.windowButtonLabel),r.append(p),c=this.mediaId+"-"+s+"-tooltip",u=t("<div>",{class:"able-tooltip",id:c}).hide(),r.on("mouseenter focus",(function(e){var i=t(this).attr("aria-label"),s=t(this).position(),n=t(this).height(),o=(t(this).width(),{left:"",right:"0px",top:s.top-n-5+"px"}),l=AblePlayer.localGetElementById(r[0],c).text(i).css(o);a.showTooltip(l),t(this).on("mouseleave blur",(function(){AblePlayer.localGetElementById(r[0],c).text("").hide()}))})),d=this.setupPopups(s),"transcript"===e?(this.$transcriptAlert=n,this.$transcriptPopupButton=r,this.$transcriptPopup=d,this.$transcriptToolbar.prepend(n,r,u,d)):"sign"===e&&(this.$signAlert=n,this.$signPopupButton=r,this.$signPopup=d,this.$signToolbar.append(n,r,u,d)),r.on("click mousedown keydown",(function(t){return!a.focusNotClick&&(a.dragging?(a.dragKeys(e,t),!1):(t.stopPropagation(),a.windowMenuClickRegistered\|\|a.finishingDrag\|\|a.handleWindowButtonClick(e,t),void(a.finishingDrag=!1)))})),this.addResizeDialog(e,i)},AblePlayer.prototype.addResizeDialog=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P,k,T,C,w,$;s=this,"transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton),r=this.mediaId+"-resize-"+e+"-width",o=this.mediaId+"-resize-"+e+"-height",l=i.width(),h=i.height(),p=l/h,c=t("<div></div>",{class:"able-resize-form"}),u=t("<div></div>"),d=t("<div></div>"),f=t("<input>",{type:"text",id:r,value:l}),g=t("<label>",{for:r}).text(this.tt.width),m=t("<div></div>"),v=t("<input>",{type:"text",id:o,value:h}),y=t("<label>",{for:o}).text(this.tt.height),"sign"===e&&(v.prop("readonly",!0),f.on("input",(function(){b=t(this).val(),P=Math.round(b/p,0),v.val(P)}))),k=t('<button class="modal-button">'+this.tt.save+"</button>"),T=t('<button class="modal-button">'+this.tt.cancel+"</button>"),k.on("click",(function(){C=t("#"+r).val(),w=t("#"+o).val(),C===l&&w===h\|\|(s.resizeObject(e,C,w),s.updateCookie(e)),$.hide(),a.hide(),n.focus()})),T.on("click",(function(){$.hide(),a.hide(),n.focus()})),d.append(g,f),m.append(y,v),u.append(d,m),c.append(u,"<hr>",k,T),t("body").append(c),$=new AccessibleDialog(c,n,"dialog",!0,this.tt.windowResizeHeading,u,this.tt.closeButtonLabel,"20em"),"transcript"===e?this.transcriptResizeDialog=$:"sign"===e&&(this.signResizeDialog=$)},AblePlayer.prototype.handleWindowButtonClick=function(e,i){var s,a,n,r;if(s=this,this.focusNotClick)return!1;if("transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton,this.$transcriptToolbar):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton,this.$signToolbar),"keydown"===i.type)if(32===i.which\|\|13===i.which)this.windowMenuClickRegistered=!0;else{if(27!==i.which)return!1;a.is(":visible")?a.hide("fast",(function(){s.windowMenuClickRegistered=!1,a.find("li").removeClass("able-focus").attr("tabindex","-1"),n.focus()})):"sign"===e?this.handleSignToggle():"transcript"===e&&this.handleTranscriptToggle()}else this.windowMenuClickRegistered=!0;a.is(":visible")?(a.hide(200,"",(function(){s.windowMenuClickRegistered=!1})),a.find("li").removeClass("able-focus"),n.attr("aria-expanded","false").focus()):(this.updateZIndex(e),r=n.position().top+n.outerHeight(),a.css("top",r),a.show(200,"",(function(){n.attr("aria-expanded","true"),t(this).find("li").first().focus().addClass("able-focus"),s.windowMenuClickRegistered=!1})))},AblePlayer.prototype.handleMenuChoice=function(t,e,i){var s,a,n,r,o;if(s=this,"transcript"===t?(a=this.$transcriptArea,n=this.$transcriptPopup,r=this.$transcriptPopupButton,o=this.transcriptResizeDialog):"sign"===t&&(a=this.$signWindow,n=this.$signPopup,r=this.$signPopupButton,o=this.signResizeDialog),this.$activeWindow=a,"keydown"===i.type)return 27===i.which?(n.hide("fast",(function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),r.focus()})),!1):("close"!==e&&(this.$activeWindow=a),!1);if(n.hide("fast",(function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false")})),"close"!==e&&r.focus(),"move"===e)this.$activeWindow.attr("role","application"),this.showedAlert(t)\|\|(this.showAlert(this.tt.windowMoveAlert,t),"transcript"===t?this.showedTranscriptAlert=!0:"sign"===t&&(this.showedSignAlert=!0)),"keydown"===i.type?this.dragDevice="keyboard":this.dragDevice="mouse",this.startDrag(t,a),n.hide().parent().focus();else if("resize"==e){var l=o.getInputs();l&&(l[0].value=a.width(),l[1].value=a.height()),o.show()}else"close"==e&&("transcript"===t?(this.closingTranscript=!0,this.handleTranscriptToggle()):"sign"===t&&(this.closingSign=!0,this.handleSignToggle()))},AblePlayer.prototype.startDrag=function(e,i){var s,a,n,r,o;return s=this,this.$activeWindow\|\|(this.$activeWindow=i),this.dragging=!0,"transcript"===e?a=this.$transcriptPopup:"sign"===e&&(a=this.$signPopup),this.showedAlert(e)\|\|(this.showAlert(this.tt.windowMoveAlert,e),"transcript"===e?this.showedTranscriptAlert=!0:"sign"===e&&(this.showedSignAlert=!0)),a.is(":visible")&&a.hide(),this.updateZIndex(e),n=this.$activeWindow.position(),this.dragStartX=n.left,this.dragStartY=n.top,void 0===this.startMouseX?(this.dragDevice="keyboard",this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.startingDrag=!0):(this.dragDevice="mouse",this.dragOffsetX=this.startMouseX-this.dragStartX,this.dragOffsetY=this.startMouseY-this.dragStartY),this.$activeWindow.addClass("able-drag").css({position:"absolute",top:this.dragStartY+"px",left:this.dragStartX+"px"}).focus(),"mouse"===this.dragDevice?t(document).on("mousemove touchmove",(function(t){s.dragging&&(r=t.pageX-s.dragOffsetX,o=t.pageY-s.dragOffsetY,s.resetDraggedObject(r,o))})):"keyboard"===this.dragDevice&&this.$activeWindow.on("keydown",(function(t){s.dragging&&s.dragKeys(e,t)})),!1},AblePlayer.prototype.dragKeys=function(t,e){if(this.startingDrag)return this.startingDrag=!1,!1;switch(e.which){case 37:case 63234:this.dragKeyX-=10;break;case 38:case 63232:this.dragKeyY-=10;break;case 39:case 63235:this.dragKeyX+=10;break;case 40:case 63233:this.dragKeyY+=10;break;case 13:case 27:return this.endDrag(t),!1;default:return!1}return this.resetDraggedObject(this.dragKeyX,this.dragKeyY),e.preventDefault&&e.preventDefault(),!1},AblePlayer.prototype.resetDraggedObject=function(t,e){this.$activeWindow.css({left:t+"px",top:e+"px"})},AblePlayer.prototype.resizeObject=function(t,e,i){var s;this.$activeWindow.css({width:e+"px",height:i+"px"}),"transcript"===t&&(s=i-50,this.$transcriptDiv.css("height",s+"px"))},AblePlayer.prototype.endDrag=function(e){var i,s;i=this,"transcript"===e?(this.$transcriptPopup,s=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,s=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown").removeClass("able-drag"),this.$activeWindow.attr("role","dialog"),this.$activeWindow=null,"keyboard"===this.dragDevice&&s.focus(),this.dragging=!1,this.updateCookie(e),this.startMouseX=void 0,this.startMouseY=void 0,this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout((function(){i.finishingDrag=!1}),100)},AblePlayer.prototype.isCloseToCorner=function(t,e,i){var s,a,n,r,o,l;return a=(s=t.offset()).top,n=s.left,r=t.width(),o=a+t.height(),l=n+r,Math.abs(o-i)<=10&&Math.abs(l-e)<=10},AblePlayer.prototype.startResize=function(e,i){var s,a,n,r;return s=this,this.$activeWindow=i,this.resizing=!0,"transcript"===e?a=this.$transcriptPopup:"sign"===e&&(a=this.$signPopup),a.is(":visible")&&a.hide().parent().focus(),this.$activeWindow.position(),this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.dragStartWidth=this.$activeWindow.width(),this.dragStartHeight=this.$activeWindow.height(),t(document).on("mousemove touchmove",(function(t){s.resizing&&(n=s.dragStartWidth+(t.pageX-s.startMouseX),r=s.dragStartHeight+(t.pageY-s.startMouseY),s.resizeObject(e,n,r))})),!1},AblePlayer.prototype.endResize=function(e){var i;"transcript"===e?(this.$transcriptPopup,i=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,i=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown"),i.show().focus(),this.resizing=!1,this.$activeWindow.removeClass("able-resize"),this.updateCookie(e),this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout((function(){this.finishingDrag=!1}),100)}}(jQuery),function(t){AblePlayer.prototype.initSignLanguage=function(){"html5"===this.player?(this.signFile=this.$sources.first().attr("data-sign-src"),this.signFile?this.isIOS()?(this.hasSignLanguage=!1,this.debug):(this.debug,this.hasSignLanguage=!0,this.injectSignPlayerCode()):this.hasSignLanguage=!1):this.hasSignLanguage=!1},AblePlayer.prototype.injectSignPlayerCode=function(){var e,i,s,a,n;for(this.getDefaultWidth("sign"),e=this.mediaId+"-sign",this.$signVideo=t("<video>",{id:e,tabindex:"-1"}),this.signVideo=this.$signVideo[0],i=0;i<this.$sources.length;i++){if(s=this.$sources[i].getAttribute("data-sign-src"),a=this.$sources[i].getAttribute("type"),!s){this.hasSignLanguage=!1;break}n=t("<source>",{src:s,type:a}),this.$signVideo.append(n)}this.$signWindow=t("<div>",{class:"able-sign-window",role:"dialog","aria-label":this.tt.sign}),this.$signToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$signWindow.append(this.$signToolbar,this.$signVideo),this.$ableWrapper.append(this.$signWindow),this.initDragDrop("sign"),1===this.prefSign?this.positionDraggableWindow("sign",this.getDefaultWidth("sign")):this.$signWindow.hide()}}(jQuery),function(){var t={ab:{name:"Abkhaz",nativeName:"аҧсуа"},aa:{name:"Afar",nativeName:"Afaraf"},af:{name:"Afrikaans",nativeName:"Afrikaans"},ak:{name:"Akan",nativeName:"Akan"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"አማርኛ"},ar:{name:"Arabic",nativeName:"العربية"},an:{name:"Aragonese",nativeName:"Aragonés"},hy:{name:"Armenian",nativeName:"Հայերեն"},as:{name:"Assamese",nativeName:"অসমীয়া"},av:{name:"Avaric",nativeName:"авар мацӀ, магӀарул мацӀ"},ae:{name:"Avestan",nativeName:"avesta"},ay:{name:"Aymara",nativeName:"aymar aru"},az:{name:"Azerbaijani",nativeName:"azərbaycan dili"},bm:{name:"Bambara",nativeName:"bamanankan"},ba:{name:"Bashkir",nativeName:"башҡорт теле"},eu:{name:"Basque",nativeName:"euskara, euskera"},be:{name:"Belarusian",nativeName:"Беларуская"},bn:{name:"Bengali",nativeName:"বাংলা"},bh:{name:"Bihari",nativeName:"भोजपुरी"},bi:{name:"Bislama",nativeName:"Bislama"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},br:{name:"Breton",nativeName:"brezhoneg"},bg:{name:"Bulgarian",nativeName:"български език"},my:{name:"Burmese",nativeName:"ဗမာစာ"},ca:{name:"Catalan",nativeName:"Català"},ch:{name:"Chamorro",nativeName:"Chamoru"},ce:{name:"Chechen",nativeName:"нохчийн мотт"},ny:{name:"Chichewa",nativeName:"chiCheŵa, chinyanja"},zh:{name:"Chinese",nativeName:"中文 (Zhōngwén), 汉语, 漢語"},cv:{name:"Chuvash",nativeName:"чӑваш чӗлхи"},kw:{name:"Cornish",nativeName:"Kernewek"},co:{name:"Corsican",nativeName:"corsu, lingua corsa"},cr:{name:"Cree",nativeName:"ᓀᐦᐃᔭᐍᐏᐣ"},hr:{name:"Croatian",nativeName:"hrvatski"},cs:{name:"Czech",nativeName:"česky, čeština"},da:{name:"Danish",nativeName:"dansk"},dv:{name:"Divehi",nativeName:"ދިވެހި"},nl:{name:"Dutch",nativeName:"Nederlands, Vlaams"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti, eesti keel"},ee:{name:"Ewe",nativeName:"Eʋegbe"},fo:{name:"Faroese",nativeName:"føroyskt"},fj:{name:"Fijian",nativeName:"vosa Vakaviti"},fi:{name:"Finnish",nativeName:"suomi, suomen kieli"},fr:{name:"French",nativeName:"français, langue française"},ff:{name:"Fula",nativeName:"Fulfulde, Pulaar, Pular"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"ქართული"},de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"Ελληνικά"},gn:{name:"Guaraní",nativeName:"Avañeẽ"},gu:{name:"Gujarati",nativeName:"ગુજરાતી"},ht:{name:"Haitian",nativeName:"Kreyòl ayisyen"},ha:{name:"Hausa",nativeName:"Hausa, هَوُسَ"},he:{name:"Hebrew",nativeName:"עברית"},hz:{name:"Herero",nativeName:"Otjiherero"},hi:{name:"Hindi",nativeName:"हिन्दी, हिंदी"},ho:{name:"Hiri Motu",nativeName:"Hiri Motu"},hu:{name:"Hungarian",nativeName:"Magyar"},ia:{name:"Interlingua",nativeName:"Interlingua"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ie:{name:"Interlingue",nativeName:"Originally called Occidental; then Interlingue after WWII"},ga:{name:"Irish",nativeName:"Gaeilge"},ig:{name:"Igbo",nativeName:"Asụsụ Igbo"},ik:{name:"Inupiaq",nativeName:"Iñupiaq, Iñupiatun"},io:{name:"Ido",nativeName:"Ido"},is:{name:"Icelandic",nativeName:"Íslenska"},it:{name:"Italian",nativeName:"Italiano"},iu:{name:"Inuktitut",nativeName:"ᐃᓄᒃᑎᑐᑦ"},ja:{name:"Japanese",nativeName:"日本語 (にほんご／にっぽんご)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kl:{name:"Kalaallisut",nativeName:"kalaallisut, kalaallit oqaasii"},kn:{name:"Kannada",nativeName:"ಕನ್ನಡ"},kr:{name:"Kanuri",nativeName:"Kanuri"},ks:{name:"Kashmiri",nativeName:"कश्मीरी, كشميري‎"},kk:{name:"Kazakh",nativeName:"Қазақ тілі"},km:{name:"Khmer",nativeName:"ភាសាខ្មែរ"},ki:{name:"Kikuyu",nativeName:"Gĩkũyũ"},rw:{name:"Kinyarwanda",nativeName:"Ikinyarwanda"},ky:{name:"Kyrgyz",nativeName:"кыргыз тили"},kv:{name:"Komi",nativeName:"коми кыв"},kg:{name:"Kongo",nativeName:"KiKongo"},ko:{name:"Korean",nativeName:"한국어 (韓國語), 조선말 (朝鮮語)"},ku:{name:"Kurdish",nativeName:"Kurdî, كوردی‎"},kj:{name:"Kuanyama",nativeName:"Kuanyama"},la:{name:"Latin",nativeName:"latine, lingua latina"},lb:{name:"Luxembourgish",nativeName:"Lëtzebuergesch"},lg:{name:"Luganda",nativeName:"Luganda"},li:{name:"Limburgish",nativeName:"Limburgs"},ln:{name:"Lingala",nativeName:"Lingála"},lo:{name:"Lao",nativeName:"ພາສາລາວ"},lt:{name:"Lithuanian",nativeName:"lietuvių kalba"},lu:{name:"Luba-Katanga",nativeName:""},lv:{name:"Latvian",nativeName:"latviešu valoda"},gv:{name:"Manx",nativeName:"Gaelg, Gailck"},mk:{name:"Macedonian",nativeName:"македонски јазик"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu, بهاس ملايو‎"},ml:{name:"Malayalam",nativeName:"മലയാളം"},mt:{name:"Maltese",nativeName:"Malti"},mi:{name:"Māori",nativeName:"te reo Māori"},mr:{name:"Marathi",nativeName:"मराठी"},mh:{name:"Marshallese",nativeName:"Kajin M̧ajeļ"},mn:{name:"Mongolian",nativeName:"монгол"},na:{name:"Nauru",nativeName:"Ekakairũ Naoero"},nv:{name:"Navajo",nativeName:"Diné bizaad, Dinékʼehǰí"},nb:{name:"Norwegian Bokmål",nativeName:"Norsk bokmål"},nd:{name:"North Ndebele",nativeName:"isiNdebele"},ne:{name:"Nepali",nativeName:"नेपाली"},ng:{name:"Ndonga",nativeName:"Owambo"},nn:{name:"Norwegian Nynorsk",nativeName:"Norsk nynorsk"},no:{name:"Norwegian",nativeName:"Norsk"},ii:{name:"Nuosu",nativeName:"ꆈꌠ꒿ Nuosuhxop"},nr:{name:"South Ndebele",nativeName:"isiNdebele"},oc:{name:"Occitan",nativeName:"Occitan"},oj:{name:"Ojibwe",nativeName:"ᐊᓂᔑᓈᐯᒧᐎᓐ"},cu:{name:"Church Slavonic",nativeName:"ѩзыкъ словѣньскъ"},om:{name:"Oromo",nativeName:"Afaan Oromoo"},or:{name:"Oriya",nativeName:"ଓଡ଼ିଆ"},os:{name:"Ossetian",nativeName:"ирон æвзаг"},pa:{name:"Punjabi",nativeName:"ਪੰਜਾਬੀ, پنجابی‎"},pi:{name:"Pāli",nativeName:"पाऴि"},fa:{name:"Persian",nativeName:"فارسی"},pl:{name:"Polish",nativeName:"polski"},ps:{name:"Pashto",nativeName:"پښتو"},pt:{name:"Portuguese",nativeName:"Português"},qu:{name:"Quechua",nativeName:"Runa Simi, Kichwa"},rm:{name:"Romansh",nativeName:"rumantsch grischun"},rn:{name:"Kirundi",nativeName:"kiRundi"},ro:{name:"Romanian",nativeName:"română"},ru:{name:"Russian",nativeName:"русский язык"},sa:{name:"Sanskrit",nativeName:"संस्कृतम्"},sc:{name:"Sardinian",nativeName:"sardu"},sd:{name:"Sindhi",nativeName:"सिन्धी, سنڌي، سندھی‎"},se:{name:"Northern Sami",nativeName:"Davvisámegiella"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},sg:{name:"Sango",nativeName:"yângâ tî sängö"},sr:{name:"Serbian",nativeName:"српски језик"},gd:{name:"Gaelic",nativeName:"Gàidhlig"},sn:{name:"Shona",nativeName:"chiShona"},si:{name:"Sinhalese",nativeName:"සිංහල"},sk:{name:"Slovak",nativeName:"slovenčina"},sl:{name:"Slovene",nativeName:"slovenščina"},so:{name:"Somali",nativeName:"Soomaaliga, af Soomaali"},st:{name:"Southern Sotho",nativeName:"Sesotho"},es:{name:"Spanish",nativeName:"español, castellano"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},ss:{name:"Swati",nativeName:"SiSwati"},sv:{name:"Swedish",nativeName:"svenska"},ta:{name:"Tamil",nativeName:"தமிழ்"},te:{name:"Telugu",nativeName:"తెలుగు"},tg:{name:"Tajik",nativeName:"тоҷикӣ, toğikī, تاجیکی‎"},th:{name:"Thai",nativeName:"ไทย"},ti:{name:"Tigrinya",nativeName:"ትግርኛ"},bo:{name:"Tibetan",nativeName:"བོད་ཡིག"},tk:{name:"Turkmen",nativeName:"Türkmen, Түркмен"},tl:{name:"Tagalog",nativeName:"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔"},tn:{name:"Tswana",nativeName:"Setswana"},to:{name:"Tonga",nativeName:"faka Tonga"},tr:{name:"Turkish",nativeName:"Türkçe"},ts:{name:"Tsonga",nativeName:"Xitsonga"},tt:{name:"Tatar",nativeName:"татарча, tatarça, تاتارچا‎"},tw:{name:"Twi",nativeName:"Twi"},ty:{name:"Tahitian",nativeName:"Reo Tahiti"},ug:{name:"Uyghur",nativeName:"Uyƣurqə, ئۇيغۇرچە‎"},uk:{name:"Ukrainian",nativeName:"українська"},ur:{name:"Urdu",nativeName:"اردو"},uz:{name:"Uzbek",nativeName:"zbek, Ўзбек, أۇزبېك‎"},ve:{name:"Venda",nativeName:"Tshivenḓa"},vi:{name:"Vietnamese",nativeName:"Tiếng Việt"},vo:{name:"Volapük",nativeName:"Volapük"},wa:{name:"Walloon",nativeName:"Walon"},cy:{name:"Welsh",nativeName:"Cymraeg"},wo:{name:"Wolof",nativeName:"Wollof"},fy:{name:"Western Frisian",nativeName:"Frysk"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"ייִדיש"},yo:{name:"Yoruba",nativeName:"Yorùbá"},za:{name:"Zhuang",nativeName:"Saɯ cueŋƅ, Saw cuengh"},"ar-dz":{name:"Arabic (Algeria)",nativeName:"العربية (الجزائر)"},"ar-bh":{name:"Arabic (Bahrain)",nativeName:"العربية (البحرين)"},"ar-eg":{name:"Arabic (Egypt)",nativeName:"العربية (مصر)"},"ar-iq":{name:"Arabic (Iraq)",nativeName:"العربية (العراق)"},"ar-jo":{name:"Arabic (Jordan)",nativeName:"العربية (الأردن)"},"ar-kw":{name:"Arabic (Kuwait)",nativeName:"العربية (الكويت)"},"ar-lb":{name:"Arabic (Lebanon)",nativeName:"العربية (لبنان)"},"ar-ly":{name:"Arabic (Libya)",nativeName:"العربية (ليبيا)"},"ar-ma":{name:"Arabic (Morocco)",nativeName:"العربية (المملكة المغربية)"},"ar-om":{name:"Arabic (Oman)",nativeName:"العربية (عمان)"},"ar-qa":{name:"Arabic (Qatar)",nativeName:"العربية (قطر)"},"ar-sa":{name:"Arabic (Saudi Arabia)",nativeName:"العربية (المملكة العربية السعودية)"},"ar-sy":{name:"Arabic (Syria)",nativeName:"العربية (سوريا)"},"ar-tn":{name:"Arabic (Tunisia)",nativeName:"العربية (تونس)"},"ar-ae":{name:"Arabic (U.A.E.)",nativeName:"العربية (الإمارات العربية المتحدة)"},"ar-ye":{name:"Arabic (Yemen)",nativeName:"العربية (اليمن)"},"de-at":{name:"German (Austria)",nativeName:"Deutsch (Österreich)"},"de-li":{name:"German (Liechtenstein)",nativeName:"Deutsch (Liechtenstein)"},"de-lu":{name:"German (Luxembourg)",nativeName:"Deutsch (Luxemburg)"},"de-ch":{name:"German (Switzerland)",nativeName:"Deutsch (Schweiz)"},"en-au":{name:"English (Australia)",nativeName:"English (Australia)"},"en-bz":{name:"English (Belize)",nativeName:"English (Belize)"},"en-ca":{name:"English (Canada)",nativeName:"English (Canada)"},"en-ie":{name:"English (Ireland)",nativeName:"English (Ireland)"},"en-jm":{name:"English (Jamaica)",nativeName:"English (Jamaica)"},"en-nz":{name:"English (New Zealand)",nativeName:""},"en-za":{name:"English (South Africa)",nativeName:"English (South Africa)"},"en-tt":{name:"English (Trinidad)",nativeName:"English (Trinidad y Tobago)"},"en-gb":{name:"English (United Kingdom)",nativeName:"English (United Kingdom)"},"en-us":{name:"English (United States)",nativeName:"English (United States)"},"es-ar":{name:"Spanish (Argentina)",nativeName:"Español (Argentina)"},"es-bo":{name:"Spanish (Bolivia)",nativeName:"Español (Bolivia)"},"es-cl":{name:"Spanish (Chile)",nativeName:"Español (Chile)"},"es-co":{name:"Spanish (Colombia)",nativeName:"Español (Colombia)"},"es-cr":{name:"Spanish (Costa Rica)",nativeName:"Español (Costa Rica)"},"es-do":{name:"Spanish (Dominican Republic)",nativeName:"Español (República Dominicana)"},"es-ec":{name:"Spanish (Ecuador)",nativeName:"Español (Ecuador)"},"es-sv":{name:"Spanish (El Salvador)",nativeName:"Español (El Salvador)"},"es-gt":{name:"Spanish (Guatemala)",nativeName:"Español (Guatemala)"},"es-hn":{name:"Spanish (Honduras)",nativeName:"Español (Honduras)"},"es-mx":{name:"Spanish (Mexico)",nativeName:"Español (México)"},"es-ni":{name:"Spanish (Nicaragua)",nativeName:"Español (Nicaragua)"},"es-pa":{name:"Spanish (Panama)",nativeName:"Español (Panamá)"},"es-py":{name:"Spanish (Paraguay)",nativeName:"Español (Paraguay)"},"es-pe":{name:"Spanish (Peru)",nativeName:"Español (Perú)"},"es-pr":{name:"Spanish (Puerto Rico)",nativeName:"Español (Puerto Rico)"},"es-uy":{name:"Spanish (Uruguay)",nativeName:"Español (Uruguay)"},"es-ve":{name:"Spanish (Venezuela)",nativeName:"Español (Venezuela)"},"fr-be":{name:"French (Belgium)",nativeName:"français (Belgique)"},"fr-ca":{name:"French (Canada)",nativeName:"français (Canada)"},"fr-lu":{name:"French (Luxembourg)",nativeName:"français (Luxembourg)"},"fr-ch":{name:"French (Switzerland)",nativeName:"français (Suisse)"},"it-ch":{name:"Italian (Switzerland)",nativeName:"italiano (Svizzera)"},"nl-be":{name:"Dutch (Belgium)",nativeName:"Nederlands (België)"},"pt-br":{name:"Portuguese (Brazil)",nativeName:"Português (Brasil)"},"sv-fi":{name:"Swedish (Finland)",nativeName:"svenska (Finland)"},"zh-hk":{name:"Chinese (Hong Kong)",nativeName:"中文(香港特别行政區)"},"zh-cn":{name:"Chinese (PRC)",nativeName:"中文(中华人民共和国)"},"zh-sg":{name:"Chinese (Singapore)",nativeName:"中文(新加坡)"},"zh-tw":{name:"Chinese Traditional (Taiwan)",nativeName:"中文（台灣）"}};AblePlayer.prototype.getLanguageName=function(e,i){var s,a,n;return(s=t[e.toLowerCase()])?"local"===i?s.nativeName:s.name:e.includes("-")&&(a=e.substring(0,2),n=e.substring(3),s=t[a.toLowerCase()])?"local"===i?s.nativeName+" ("+n+")":s.name+" ("+n+")":e}}(jQuery),function(t){AblePlayer.prototype.getSupportedLangs=function(){return["ca","cs","da","de","en","es","fr","he","id","it","ja","nb","nl","pt","pt-br","sv","tr","zh-tw"]},AblePlayer.prototype.getTranslationText=function(){var e,i,s,a,n,r,o;if(e=t.Deferred(),i=this,s=this.getSupportedLangs(),this.lang&&-1===t.inArray(this.lang,s))if(2==this.lang.indexOf("-"))-1!==t.inArray(this.lang.substring(0,2),s)?this.lang=this.lang.substring(0,2):this.lang=null;else{for(o=!1,r=0;r<s.length;)s[r].substring(0,2)==this.lang&&(this.lang=s[r],o=!0),r++;o\|\|(this.lang=null)}return this.lang\|\|(a=t("body").attr("lang")?t("body").attr("lang").toLowerCase():t("html").attr("lang")?t("html").attr("lang").toLowerCase():null)&&(-1!==t.inArray(a,s)?this.lang=a:2==a.indexOf("-")&&-1!==t.inArray(a.substring(0,2),s)&&(this.lang=a.substring(0,2))),this.lang\|\|(this.lang="en"),this.searchLang\|\|(this.searchLang=this.lang),n=this.rootPath+"translations/"+this.lang+".js",t.getJSON(n,(function(t){i.tt=t,e.resolve()})).fail((function(){i.provideFallback(),e.fail()})),e.promise()},AblePlayer.prototype.getSampleDescriptionText=function(){var e,i,s,a,n,r;for(i=this.getSupportedLangs(),e=this,this.sampleText=[],s=0;s<i.length;s++)a=this.rootPath+"translations/"+i[s]+".js",t.getJSON(a,undefined,function(t){return function(i){n=i.sampleDescriptionText,r={lang:t,text:n},e.sampleText.push(r)}}(i[s]))}}(jQuery),jQuery,AblePlayer.prototype.computeEndTime=function(t,e){var i=t.split(":").reverse().map((function(t){return parseFloat(t)})),s=e.split(":").reverse().map((function(t){return parseFloat(t)}));return i.reduce((function(t,e,i){var a=e+s[i];return 0===i&&(a>60&&(s[i+1]+=1,a-=60),a=a.toFixed(3)),1===i&&a>60&&(s[i+1]+=1,a-=60),a<10&&(a="0"+a),t.push(a),t}),[]).reverse().join(":")},AblePlayer.prototype.ttml2webvtt=function(t){var e=this,i=e.convert.xml2json(t,{ignoreComment:!0,alwaysChildren:!0,compact:!0,spaces:2});return JSON.parse(i).tt.body.div.p.reduce((function(t,i,s){var a=i._text,n=Array.isArray(a),r=i._attributes;return e.computeEndTime(r.begin,r.dur),t+(e.computeEndTime(r.begin,"00:00:0")+" --\x3e ")+e.computeEndTime(r.begin,r.dur)+"\n"+(n?a.join("\n"):a)+"\n\n"}),"WEBVTT\n\n\n")},function(t){t.doWhen=function(e){return t.Deferred((function(i){var s=t.extend({},{when:null,exec:function(){},interval:100,attempts:100,delayed:0},e,{checkId:null}),startChecking=function(){if(!0===s.when())return s.exec.call(i.promise()),void i.resolve();s.checkId=setInterval((function(){0===s.attempts?(clearInterval(s.checkId),i.reject()):(--s.attempts,!0===s.when()&&(s.attempts=0,clearInterval(s.checkId),s.exec.call(i.promise()),i.resolve()))}),s.interval)};s.delayed>0?setTimeout(startChecking,Number(s.delayed)):startChecking()})).promise()}}(jQuery),function(t){AblePlayer.prototype.injectVTS=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,f,g,m,v;if(e=this,t("#able-vts").length&&this.vtsTracks.length){for(T in this.langs=[],this.getAllLangs(this.vtsTracks),this.vtsLang=this.lang,i=t("<h2>").text("Video Transcript Sorter"),t("#able-vts").append(i),this.$vtsAlert=t("<div>",{id:"able-vts-alert","aria-live":"polite","aria-atomic":"true"}),t("#able-vts").append(this.$vtsAlert),s=t("<div>",{id:"able-vts-instructions"}),a=t("<p>").text("Use the Video Transcript Sorter to perform any of the following tasks:"),r=t("<ul>"),o=t("<li>").text("Reorder chapters, descriptions, captions, and/or subtitles so they appear in the proper sequence in Able Player's auto-generated transcript."),l=t("<li>").text("Modify content or start/end times (all are directly editable within the table)."),h=t("<li>").text("Insert new content, such as chapters or descriptions."),n=t("<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.'),r.append(o,l,h),s.append(a,r,n),t("#able-vts").append(s),p=t("<fieldset>"),c=t("<legend>").text("Select a language"),p.append(c),this.langs)d="vts-lang-radio-"+this.langs[T],u=t("<div>",{}),g=t("<input>",{type:"radio",name:"vts-lang",id:d,value:this.langs[T]}).on("click",(function(){e.vtsLang=t(this).val(),e.showVtsAlert("Loading "+e.getLanguageName(e.vtsLang)+" tracks"),e.injectVtsTable("update",e.vtsLang)})),this.langs[T]==this.lang&&g.prop("checked",!0),f=t("<label>",{for:d}).text(this.getLanguageName(this.langs[T])),u.append(g,f),p.append(u);var y,b,P,k,T;t("#able-vts").append(p),m=t("<button>",{type:"button",id:"able-vts-save",value:"save"}).text("Save Changes"),t("#able-vts").append(m),this.injectVtsTable("add",this.vtsLang),y=["captions","chapters","descriptions","subtitles"],t('td[contenteditable="true"]').on("focus",(function(){b=t(this).text()})).on("blur",(function(){b!=t(this).text()&&(P=t(this).index(),k=t(this).text(),1===P?-1===t.inArray(k,y)&&("s"===k.substring(0,1)?t(this).text("subtitles"):"d"===k.substring(0,1)?t(this).text("descriptions"):"ch"===k.substring(0,2)?t(this).text("chapters"):t(this).text("captions")):2!==P&&3!==P\|\|t(this).text(e.formatTimestamp(k)))})).on("keydown",(function(t){t.stopPropagation()})),t("#able-vts-save").on("click",(function(i){i.stopPropagation(),"save"==t(this).attr("value")?(t(this).attr("value","cancel").text("Return to Editor"),v=t("#able-vts table"),t("#able-vts-instructions").hide(),t("#able-vts > fieldset").hide(),t("#able-vts table").remove(),t("#able-vts-icon-credit").remove(),e.parseVtsOutput(v)):(t(this).attr("value","save").text("Save Changes"),t("#able-vts-output").remove(),t("#able-vts-instructions").show(),t("#able-vts > fieldset").show(),t("#able-vts").append(v),t("#able-vts").append(e.getIconCredit()),e.showVtsAlert("Cancelling saving. Any edits you made have been restored in the VTS table."))}))}},AblePlayer.prototype.setupVtsTracks=function(t,e,i,s,a,n){var r,o;r=this.getFilenameFromPath(a),o=this.parseVtsTracks(n),this.vtsTracks.push({kind:t,language:e,label:s,srcFile:r,cues:o})},AblePlayer.prototype.getFilenameFromPath=function(t){var e;return-1===(e=t.lastIndexOf("/"))?t:t.substring(e+1)},AblePlayer.prototype.getFilenameFromTracks=function(t,e){for(var i=0;i<this.vtsTracks.length;i++)if(this.vtsTracks[i].kind===t&&this.vtsTracks[i].language===e)return this.vtsTracks[i].srcFile;return!1},AblePlayer.prototype.parseVtsTracks=function(t){var e,i,s,a,n,r,o,l,h;for(e=t.split("\n"),s=[],a=0;a<e.length;)if(-1!==(r=e[a]).indexOf(" --\x3e ")){if(i=r.trim().split(" "),this.isValidTimestamp(i[0])&&this.isValidTimestamp(i[2])){for(l="",n=a+1,h=!1;n<e.length&&!h;)(o=e[n].trim()).length>0?l.length>0?l+="\n"+o:l+=o:h=!0,n++;s.push({start:i[0],end:i[2],content:l}),a=n}}else a++;return s},AblePlayer.prototype.isValidTimestamp=function(t){return!!/^[0-9:,.]$/.test(t)},AblePlayer.prototype.formatTimestamp=function(t){var e,i;if(e=t.substring(0,t.lastIndexOf(".")+1),(i=t.substring(t.lastIndexOf(".")+1)).length>3)i=i.substring(0,3);else if(i.length<3)for(;i.length<3;)i+="0";return e+i},AblePlayer.prototype.injectVtsTable=function(e,i){var s,a,n,r,o,l,h,p;for("update"===e&&(t("#able-vts table").remove(),t("#able-vts-icon-credit").remove()),s=t("<table>",{lang:i}),r=t("<tr>",{lang:"en"}),a=["Row #","Kind","Start","End","Content","Actions"],n=0;n<a.length;n++)o=t("<th>",{scope:"col"}).text(a[n]),"Actions"===a[n]&&o.addClass("actions"),r.append(o);for(s.append(r),h=this.getAllRows(i),n=0;n<h.length;n++)r=t("<tr>",{id:"able-vts-row-"+(p=n+1),class:"kind-"+h[n].kind}),l=t("<td>").text(p),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].kind),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].start),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].end),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].content),r.append(l),l=this.addVtsActionButtons(p,h.length),r.append(l),s.append(r);t("#able-vts").append(s),t("#able-vts").append(this.getIconCredit())},AblePlayer.prototype.addVtsActionButtons=function(e,i){var s,a,n,r,o,l,h,p,c,u;for(s=this,a=t("<td>"),n=["up","down","insert","delete"],r=0;r<n.length;r++)"up"===(o=n[r])?e>1&&(l=t("<button>",{id:"able-vts-button-up-"+e,title:"Move up","aria-label":"Move Row "+e+" up"}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101c-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.594l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"down"===o?e<i&&(l=t("<button>",{id:"able-vts-button-down-"+e,title:"Move down","aria-label":"Move Row "+e+" down"}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"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.424C1.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.428s9.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"insert"===o?(l=t("<button>",{id:"able-vts-button-insert-"+e,title:"Insert row below","aria-label":"Insert row before Row "+e}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"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.414C242.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.775H27.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.411c5.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.987h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77c7.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"delete"===o&&(l=t("<button>",{id:"able-vts-button-delete-"+e,title:"Delete row ","aria-label":"Delete Row "+e}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607C429.063,46.021,414.825,31.782,397.281,31.782z"}),u=t("<path>",{d:"M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042c17.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.891c8.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.804zM238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26c0,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.804c0-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.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z"}),p=t("<g>").append(c,u),h.append(p),l.append(h),l.html(l.html()),a.append(l));return a},AblePlayer.prototype.updateVtsActionButtons=function(t,e){var i,s,a,n,r,o;for(i=0;i<t.length;i++)a=(s=t.eq(i)).attr("id"),n=s.attr("aria-label"),r=a.replace(/[0-9]+/g,e),o=n.replace(/[0-9]+/g,e),s.attr("id",r),s.attr("aria-label",o)},AblePlayer.prototype.getIconCredit=function(){return'<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>'},AblePlayer.prototype.getAllLangs=function(e){var i;for(i in e)e[i].hasOwnProperty("language")&&-1===t.inArray(e[i].language,this.langs)&&(this.langs[this.langs.length]=e[i].language)},AblePlayer.prototype.getAllRows=function(t){var e,i,s,a;for(a=[],e=0;e<this.vtsTracks.length;e++)if((i=this.vtsTracks[e]).language==t)for(s in i.cues)a.push({kind:i.kind,lang:t,id:i.cues[s].id,start:i.cues[s].start,end:i.cues[s].end,content:i.cues[s].content});return a.sort((function(t,e){return t.start>e.start?1:-1})),a},AblePlayer.prototype.onClickVtsActionButton=function(e){var i,s,a;s=(i=t(e).attr("id").split("-"))[3],a=i[4],"up"==s?this.moveRow(a,"up"):"down"==s?this.moveRow(a,"down"):"insert"==s?this.insertRow(a):"delete"==s&&this.deleteRow(a)},AblePlayer.prototype.insertRow=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,g,m;for(a=(s=(i=t("#able-vts table")).find("tr")).length-1,n=parseInt(e)+1,r=t("<tr>",{id:"able-vts-row-"+n}),o=t("<td>").text(n),r.append(o),c=null,l=t("<select>",{id:"able-vts-kind-"+n,"aria-label":"What kind of track is this?",placeholder:"Select a kind"}).on("change",(function(){c=t(this).val(),u="kind-"+c,d=t(this).closest("tr"),t(this).parent().text(c),d.addClass(u)})),h=["","captions","chapters","descriptions","subtitles"],f=0;f<h.length;f++)p=t("<option>",{value:h[f]}).text(h[f]),l.append(p);for(o=t("<td>").append(l),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=this.addVtsActionButtons(n,a),r.append(o),i.find("tr").eq(e).after(r),f=n;f<=a;f++)g=f+1,s.eq(f).attr("id","able-vts-row-"+g),s.eq(f).find("td").eq(0).text(g),m=s.eq(f).find("button"),this.updateVtsActionButtons(m,g);this.adjustTimes(n),this.showVtsAlert("A new row "+n+" has been inserted"),l.focus()},AblePlayer.prototype.deleteRow=function(e){var i,s,a,n,r,o;for((i=t("#able-vts table"))[0].deleteRow(e),a=(s=i.find("tr")).length-1,n=e;n<=a;n++)r=n,s.eq(n).attr("id","able-vts-row-"+r),s.eq(n).find("td").eq(0).text(r),o=s.eq(n).find("button"),this.updateVtsActionButtons(o,r);this.showVtsAlert("Row "+e+" has been deleted")},AblePlayer.prototype.moveRow=function(e,i){var s,a,n,r;t("#able-vts table").find("tr"),s=t("#able-vts table").find("tr").eq(e),"up"==i?(a=parseInt(e)-1,(n=t("#able-vts table").find("tr").eq(a)).before(s)):"down"==i&&(a=parseInt(e)+1,(n=t("#able-vts table").find("tr").eq(a)).after(s)),s.attr("id","able-vts-row-"+a),s.find("td").eq(0).text(a),this.updateVtsActionButtons(s.find("button"),a),n.attr("id","able-vts-row-"+e),n.find("td").eq(0).text(e),this.updateVtsActionButtons(n.find("button"),e),this.adjustTimes(a),r="Row "+e+" has been moved "+i,r+=" and is now Row "+a,this.showVtsAlert(r)},AblePlayer.prototype.adjustTimes=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,g,m,v;(i=[]).captions=.001,i.descriptions=.001,i.chapters=.001,h=(r=(s=t("#able-vts table").find("tr")).eq(e)).is('[class^="kind-"]')?this.getKindFromClass(r.attr("class")):"captions",u=this.getSecondsFromColonTime(r.find("td").eq(2).text()),g=this.getSecondsFromColonTime(r.find("td").eq(3).text()),e>1?(a=e-1,p=(o=s.eq(a)).is('[class^="kind-"]')?this.getKindFromClass(o.attr("class")):null,d=this.getSecondsFromColonTime(o.find("td").eq(2).text()),m=this.getSecondsFromColonTime(o.find("td").eq(3).text())):(a=null,o=null,p=null,d=null,m=null),e<s.length-1?(n=e+1,c=(l=s.eq(n)).is('[class^="kind-"]')?this.getKindFromClass(l.attr("class")):null,f=this.getSecondsFromColonTime(l.find("td").eq(2).text()),v=this.getSecondsFromColonTime(l.find("td").eq(3).text())):(n=null,l=null,c=null,f=null,v=null),isNaN(u)?(null==p&&(p="captions",o.attr("class","kind-captions"),o.find("td").eq(1).html("captions")),"captions"===p?(u=(parseFloat(m)+.001).toFixed(3),g=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+i[h]).toFixed(3)):"chapters"===p?(u=(parseFloat(d)+.001).toFixed(3),g=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+minDurartion[h]).toFixed(3)):"descriptions"===p&&(u=(parseFloat(d)+i.descriptions).toFixed(3),g=(parseFloat(u)+i.descriptions).toFixed(3))):d?d<u?u<f\|\|(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)):(u=(parseFloat(d)+i[p]).toFixed(3),g=(parseFloat(u)+i[h]).toFixed(3)):u<f\|\|(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)),g-u<i[h]&&(g=(parseFloat(u)+i[h]).toFixed(3),f&&(f=(parseFloat(g)+.001).toFixed(3))),r.find("td").eq(2).text(this.formatSecondsAsColonTime(u,!0)),r.find("td").eq(3).text(this.formatSecondsAsColonTime(g,!0)),o&&(o.find("td").eq(2).text(this.formatSecondsAsColonTime(d,!0)),o.find("td").eq(3).text(this.formatSecondsAsColonTime(m,!0))),l&&(l.find("td").eq(2).text(this.formatSecondsAsColonTime(f,!0)),l.find("td").eq(3).text(this.formatSecondsAsColonTime(v,!0)))},AblePlayer.prototype.getKindFromClass=function(t){var e,i;return e=t.indexOf("kind-")+5,-1==(i=t.indexOf(" ",e))?t.substring(e):t.substring(e,i)},AblePlayer.prototype.showVtsAlert=function(t){this.$vtsAlert.text(t).show().delay(3e3).fadeOut("slow")},AblePlayer.prototype.parseVtsOutput=function(e){var i,s,a,n,r,o,l,h,p,c;for(i=e.attr("lang"),a=["captions","chapters","descriptions","subtitles"],r={},s=0;s<a.length;s++)r[n=a[s]]="WEBVTT\n\n";if((o=e.find("tr")).length>0)for(s=0;s<o.length;s++)n=o.eq(s).find("td").eq(1).text(),-1!==t.inArray(n,a)&&(l=o.eq(s).find("td").eq(2).text(),h=o.eq(s).find("td").eq(3).text(),p=o.eq(s).find("td").eq(4).text(),void 0!==l&&void 0!==h&&(r[n]+=l+" --\x3e "+h+"\n","undefined"!==p&&(r[n]+=p),r[n]+="\n\n"));for(c=t("<div>",{id:"able-vts-output"}),t("#able-vts").append(c),s=0;s<a.length;s++)r[n=a[s]].length>8&&this.showWebVttOutput(n,r[n],i)},AblePlayer.prototype.showWebVttOutput=function(e,i,s){var a,n,r,o,l;a=t("<h3>").text(e.charAt(0).toUpperCase()+e.slice(1)),o="If you made changes, copy/paste the following content ",(n=this.getFilenameFromTracks(e,s))?(o+="to replace the original content of your "+this.getLanguageName(s)+" ",o+="<em>"+e+"</em> WebVTT file (<strong>"+n+"</strong>)."):o+="into a new "+this.getLanguageName(s)+" <em>"+e+"</em> WebVTT file.",r=t("<p>",{class:"able-vts-output-instructions"}).html(o),l=t("<textarea>").text(i),t("#able-vts-output").append(a,r,l)}}(jQuery),function(t){AblePlayer.prototype.initVimeoPlayer=function(){var e,i,s,a,n,r;return e=this,s=(i=new t.Deferred).promise(),a=this.mediaId+"_vimeo",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.vimeoDescId&&this.prefDesc?this.vimeoDescId:this.vimeoId,this.activeVimeoId=n,this.okToPlay?"true":"false",r=this.playerWidth?this.vimeoUrlHasParams?{url:n,width:this.playerWidth,controls:!1}:{id:n,width:this.playerWidth,controls:!1}:this.vimeoUrlHasParams?{url:n,controls:!1}:{id:n,controls:!1},this.vimeoPlayer=new Vimeo.Player(a,r),this.vimeoPlayer.ready().then((function(){t("#"+a).children("iframe").attr({tabindex:"-1","aria-hidden":!0}),e.vimeoPlayer.getVideoWidth().then((function(t){t&&e.vimeoPlayer.getVideoHeight().then((function(i){i&&e.resizePlayer(t,i)}))})).catch((function(t){})),e.hasPlaylist\|\|(e.$media.remove(),e.vimeoPlaybackRate=1,e.vimeoPlayer.setPlaybackRate(e.vimeoPlaybackRate).then((function(t){e.vimeoSupportsPlaybackRateChange=!0})).catch((function(t){e.vimeoSupportsPlaybackRateChange=!1})),i.resolve())})),s},AblePlayer.prototype.getVimeoPaused=function(){var e,i;return i=(e=new t.Deferred).promise(),this.vimeoPlayer.getPaused().then((function(t){e.resolve(t)})),i},AblePlayer.prototype.getVimeoEnded=function(){var e,i;return i=(e=new t.Deferred).promise(),this.vimeoPlayer.getEnded().then((function(t){e.resolve(t)})),i},AblePlayer.prototype.getVimeoState=function(){var e,i,s,a,n;return i=(e=new t.Deferred).promise(),s=[],a=this.vimeoPlayer.getPaused(),n=this.vimeoPlayer.getEnded(),s.push(a),s.push(n),a.then((function(t){e.resolve(t)})),n.then((function(t){e.resolve(t)})),t.when.apply(t,s).then((function(){e.resolve()})),i},AblePlayer.prototype.getVimeoCaptionTracks=function(){var e,i,s,a=new t.Deferred,n=a.promise();return e=this,this.vimeoPlayer.getTextTracks().then((function(t){if(t.length){for(i=0;i<t.length;i++)e.hasCaptions=!0,1===e.prefCaptions?e.captionsOn=!0:e.captionsOn=!1,s=t[i].language===e.lang,e.tracks.push({kind:t[i].kind,language:t[i].language,label:t[i].label,def:s});e.captions=e.tracks,e.hasCaptions=!0,e.setupPopups("captions"),a.resolve()}else e.hasCaptions=!1,e.usingVimeoCaptions=!1,a.resolve()})),n},AblePlayer.prototype.getVimeoPosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+youTubeId;return"120"==e?i+"/default.jpg":"320"==e\|\|"480"==e?i+"/hqdefault.jpg":"640"==e&&i+"/sddefault.jpg"},AblePlayer.prototype.getVimeoId=function(t){var e;return this.vimeoUrlHasParams=!1,"number"==typeof t?t:-1!==t.indexOf("vimeo.com")?-1!==t.indexOf("?")?(this.vimeoUrlHasParams=!0,t):(e=(t=t.trim()).lastIndexOf("/")+1,t.substring(e)):t}}(jQuery); \ No newline at end of file +/! ableplayer V4.8.0 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / +"use strict";var AblePlayerInstances=[];!function(t){t(function(){t("video, audio").each(function(e,i){void 0!==t(i).data("able-player")&&AblePlayerInstances.push(new AblePlayer(t(this),t(i)))})}),window.onYouTubeIframeAPIReady=function(){AblePlayer.youTubeIframeAPIReady=!0,t("body").trigger("youTubeIframeAPIReady",[])},t(window).on("keydown",function(t){1===AblePlayer.nextIndex&&AblePlayer.lastCreated.onPlayerKeyPress(t)}),window.AblePlayer=function(e){var i=this;if(AblePlayer.lastCreated=this,this.media=e,0!==t(e).length){void 0!==t(e).attr("autoplay")?(this.autoplay=!0,this.okToPlay=!0):(this.autoplay=!1,this.okToPlay=!1),this.loop=void 0!==t(e).attr("loop"),this.playsInline=void 0!==t(e).attr("playsinline")?"1":"0",this.hasPoster=!(!t(e).attr("poster")&&!t(e).data("poster")),this.audioPoster=t(e).data("poster"),this.audioPosterAlt=t(e).data("poster-alt"),this.width=t(e).attr("width")??0,this.height=t(e).attr("height")??0;var s=t(e).data("start-time"),a=!("number"!=typeof s&&("string"!=typeof s\|\|""===value.trim()\|\|isNaN(value)\|\|!isFinite(Number(value))));if(this.startTime=void 0!==s&&a?s:0,this.debug=void 0!==t(e).data("debug")&&!1!==t(e).data("debug"),void 0!==t(e).data("root-path")?this.rootPath=t(e).data("root-path").replace(/\/?$/,"/"):this.rootPath=this.getRootPath(),this.defaultVolume=7,void 0!==t(e).data("volume")&&""!==t(e).data("volume")){var n=t(e).data("volume");n>=0&&n<=10&&(this.defaultVolume=n)}if(this.volume=this.defaultVolume,void 0!==t(e).data("use-chapters-button")&&!1===t(e).data("use-chapters-button")?this.useChaptersButton=!1:this.useChaptersButton=!0,void 0!==t(e).data("descriptions-audible")&&!1===t(e).data("descriptions-audible")\|\|void 0!==t(e).data("description-audible")&&!1===t(e).data("description-audible")?this.readDescriptionsAloud=!1:this.readDescriptionsAloud=!0,this.descVoices=[],this.descReader="screenreader"==t(e).data("desc-reader")?"screenreader":"browser",this.defaultStateCaptions="off"==t(e).data("state-captions")?0:1,this.defaultStateDescriptions="on"==t(e).data("state-descriptions")?1:0,this.defaultDescPause="off"==t(e).data("desc-pause-default")?0:1,void 0!==t(e).data("heading-level")&&""!==t(e).data("heading-level")){var r=t(e).data("heading-level");/^[0-6]$/.test(r)&&(this.playerHeadingLevel=r)}var o=t(e).data("transcript-div");void 0!==o&&""!==o&&null!==document.getElementById(o)?this.transcriptDivLocation=o:this.transcriptDivLocation=null;var l=t(e).data("include-transcript");this.hideTranscriptButton=void 0!==l&&!1===l,this.transcriptType=null,void 0!==t(e).data("transcript-src")?(this.transcriptSrc=t(e).data("transcript-src"),this.transcriptSrcHasRequiredParts()&&(this.transcriptType="manual")):t(e).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length>0&&(this.transcriptType=this.transcriptDivLocation?"external":"popup"),this.lyricsMode=void 0!==t(e).data("lyrics-mode")&&!1!==t(e).data("lyrics-mode"),void 0!==t(e).data("transcript-title")&&""!==t(e).data("transcript-title")&&(this.transcriptTitle=t(e).data("transcript-title"));var h=t(e).data("sign-div");void 0!==h&&""!==h&&null!==document.getElementById(h)?this.$signDivLocation=t("#"+h):this.$signDivLocation=null,this.defaultCaptionsPosition="overlay"===t(e).data("captions-position")?"overlay":"below";var p=t(e).data("chapters-div");void 0!==p&&""!==p&&(this.chaptersDivLocation=p),void 0!==t(e).data("chapters-title")&&(this.chaptersTitle=t(e).data("chapters-title"));var c=t(e).data("chapters-default");this.defaultChapter=void 0!==c&&""!==c?c:null,this.speedIcons="arrows"===t(e).data("speed-icons")?"arrows":"animals";var u=t(e).data("seekbar-scope");this.seekbarScope="chapter"===u\|\|"chapters"===u?"chapter":"video";var d=t(e).data("youtube-id");if(void 0!==d&&""!==d&&(this.youTubeId=this.getYouTubeId(d),!this.hasPoster)){let i=this.getYouTubePosterUrl(this.youTubeId,"640");t(e).attr("poster",i)}var g=t(e).data("youtube-desc-id");void 0!==g&&""!==g&&(this.youTubeDescId=this.getYouTubeId(g));var f=t(e).data("youtube-sign-src");void 0!==f&&""!==f&&(this.youTubeSignId=this.getYouTubeId(f));var m=t(e).data("youtube-nocookie");this.youTubeNoCookie=!(void 0===m\|\|!m);var v=t(e).data("vimeo-id");if(void 0!==v&&""!==v&&(this.vimeoId=this.getVimeoId(v),!this.hasPoster)){let s=i.getVimeoPosterUrl(this.vimeoId,"1200");t(e).attr("poster",s)}var y=t(e).data("vimeo-desc-id");if(void 0!==y&&""!==y&&(this.vimeoDescId=this.getVimeoId(y)),this.skin="legacy"==t(e).data("skin")?"legacy":"2020",void 0!==t(e).data("width")?this.playerWidth=parseInt(t(e).data("width")):t(e)[0].getAttribute("width")?this.playerWidth=parseInt(t(e)[0].getAttribute("width")):this.playerWidth=null,this.iconType="font",this.forceIconType=!1,void 0!==t(e).data("icon-type")&&""!==t(e).data("icon-type")){var b=t(e).data("icon-type");"font"!==b&&"image"!==b&&"svg"!==b\|\|(this.iconType=b,this.forceIconType=!0)}var P=t(e).data("allow-fullscreen");if(this.allowFullscreen=void 0===P\|\|!1!==P,this.clickedFullscreenButton=!1,this.restoringAfterFullscreen=!1,this.defaultSeekInterval=10,this.useFixedSeekInterval=!1,void 0!==t(e).data("seek-interval")&&""!==t(e).data("seek-interval")){var k=t(e).data("seek-interval");/^[1-9][0-9]$/.test(k)&&(this.seekInterval=k,this.useFixedSeekInterval=!0)}var T=t(e).data("show-now-playing");this.showNowPlaying=void 0===T\|\|!1!==T,void 0!==t(e).data("use-ttml")?(this.useTtml=!0,this.convert=require("xml-js")):this.useTtml=!1;var w=t(e).data("test-fallback");this.testFallback=void 0!==w&&!1!==w&&("2"==w?2:1);var C=t(e).data("lang");this.lang=void 0!==C&&""!==C?C.toLowerCase():null;var $=t(e).data("meta-type");void 0!==$&&""!==$&&(this.metaType=$);var D=t(e).data("meta-div");void 0!==D&&""!==D&&(this.metaDiv=D);var A=t(e).data("search-div");if(void 0!==A&&""!==A){this.searchDiv=A;var x=t(e).data("search");void 0!==x&&""!==x&&(this.searchString=x);var S=t(e).data("search-lang");this.searchLang=void 0!==S&&""!==S?S:null;var I=t(e).data("search-ignore-caps");this.searchIgnoreCaps=void 0!==I&&!1!==I}void 0!==t(e).data("hide-controls")&&!1!==t(e).data("hide-controls")?(this.hideControls=!0,this.hideControlsOriginal=!0):(this.hideControls=!1,this.hideControlsOriginal=!1),void 0!==t(e).data("steno-mode")&&!1!==t(e).data("steno-mode")?(this.stenoMode=!0,void 0!==t(e).data("steno-iframe-id")&&""!==t(e).data("steno-iframe-id")?(this.stenoFrameId=t(e).data("steno-iframe-id"),this.$stenoFrame=t("#"+this.stenoFrameId),this.$stenoFrame.length\|\|(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoMode=!1,this.stenoFrameId=null,this.$stenoFrame=null),this.setDefaults(),this.ableIndex=AblePlayer.nextIndex,AblePlayer.nextIndex+=1,this.title=t(e).attr("title"),this.tt={},async function fetchTranslations(t){try{await t.getTranslationText(),t.setup()}catch{t.provideFallback()}}(i=this)}else this.provideFallback()},AblePlayer.nextIndex=0,AblePlayer.prototype.setup=function(){var t=this;this.initializing=!0,this.reinitialize().then(function(){t.player?t.setupInstance().then(function(){t.setupInstancePlaylist(),t.hasPlaylist\|\|t.recreatePlayer().then(function(){t.initializing=!1,t.playerCreated=!0})}):t.provideFallback()})},AblePlayer.getActiveDOMElement=function(){for(var t=document.activeElement;t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t},AblePlayer.localGetElementById=function(e,i){return e.getRootNode?t(e.getRootNode().querySelector("#"+i)):t(document.getElementById(i))},AblePlayer.youTubeIframeAPIReady=!1,AblePlayer.loadingYouTubeIframeAPI=!1}(jQuery),function(t){AblePlayer.prototype.setDefaults=function(){this.playerCreated=!1,this.playing=!1,this.paused=!0,this.clickedPlay=!1,this.fullscreen=!1,this.swappingSrc=!1,this.initializing=!1,this.cueingPlaylistItems=!1,this.buttonWithFocus=null,this.speechEnabled=null,this.setIconColor(),this.setButtonImages()},AblePlayer.prototype.getRootPath=function(){var t,e,i,s,a,n;for(t=document.getElementsByTagName("script"),e=0;e<t.length;e++)if(-1!==(i=t[e].src).substring(i.lastIndexOf("/")).indexOf("ableplayer")){s=i.split("?")[0];break}return n=(a=s.split("/").slice(0,-1).join("/")).lastIndexOf("/"),a.substring(0,n)+"/"},AblePlayer.prototype.setIconColor=function(){var e,i,s,a,n;for(e=["controller","toolbar"],i=0;i<e.length;i++)"controller"==e[i]?s=t("<div>",{class:"able-controller"}).hide():"toolbar"===e[i]&&(s=t("<div>",{class:"able-window-toolbar"}).hide()),t("body").append(s),n=.2126(a=s.css("background-color").replace(/[^\d,]/g,"").split(","))[0]+.7152a[1]+.0722a[2]<125?"white":"black","controller"===e[i]?this.iconColor=n:"toolbar"===e[i]&&(this.toolbarIconColor=n),s.remove()},AblePlayer.prototype.setButtonImages=function(){this.imgPath=this.rootPath+"button-icons/"+this.iconColor+"/",this.playButtonImg=this.imgPath+"play.png",this.pauseButtonImg=this.imgPath+"pause.png",this.restartButtonImg=this.imgPath+"restart.png",this.rewindButtonImg=this.imgPath+"rewind.png",this.forwardButtonImg=this.imgPath+"forward.png",this.previousButtonImg=this.imgPath+"previous.png",this.nextButtonImg=this.imgPath+"next.png","arrows"===this.speedIcons?(this.fasterButtonImg=this.imgPath+"slower.png",this.slowerButtonImg=this.imgPath+"faster.png"):"animals"===this.speedIcons&&(this.fasterButtonImg=this.imgPath+"rabbit.png",this.slowerButtonImg=this.imgPath+"turtle.png"),this.captionsButtonImg=this.imgPath+"captions.png",this.chaptersButtonImg=this.imgPath+"chapters.png",this.signButtonImg=this.imgPath+"sign.png",this.transcriptButtonImg=this.imgPath+"transcript.png",this.descriptionsButtonImg=this.imgPath+"descriptions.png",this.fullscreenExpandButtonImg=this.imgPath+"fullscreen-expand.png",this.fullscreenCollapseButtonImg=this.imgPath+"fullscreen-collapse.png",this.prefsButtonImg=this.imgPath+"preferences.png",this.helpButtonImg=this.imgPath+"help.png"},AblePlayer.prototype.getIconData=function(t){var e=Array();switch(t){case"play":e[0]="0 0 16 20",e[1]="M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z",e[2]="icon-play",e[3]=this.playButtonImg;break;case"pause":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-pause",e[3]=this.pauseButtonImg;break;case"restart":e[0]="0 0 20 20",e[1]="M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z",e[2]="icon-restart",e[3]=this.restartButtonImg;break;case"rewind":e[0]="0 0 20 20",e[1]="M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z",e[2]="icon-rewind",e[3]=this.rewindButtonImg;break;case"forward":e[0]="0 0 20 20",e[1]="M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z",e[2]="icon-forward",e[3]=this.forwardButtonImg;break;case"previous":e[0]="0 0 20 20",e[1]="M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z",e[2]="icon-previous",e[3]=this.previousButtonImg;break;case"next":e[0]="0 0 20 20",e[1]="M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z",e[2]="icon-next",e[3]=this.nextButtonImg;break;case"slower":e[0]="0 0 11 20",e[1]="M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z",e[2]="icon-slower",e[3]=this.slowerButtonImg;break;case"faster":e[0]="0 0 11 20",e[1]="M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-faster",e[3]=this.fasterButtonImg;break;case"turtle":e[0]="0 0 20 20",e[1]="M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z",e[2]="icon-turtle",e[3]=this.slowerButtonImg;break;case"rabbit":e[0]="0 0 20 20",e[1]="M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z",e[2]="icon-rabbit",e[3]=this.fasterButtonImg;break;case"ellipsis":e[0]="0 0 20 20",e[1]="M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z",e[2]="icon-ellipsis",e[3]=!1;break;case"pipe":e[0]="0 0 20 20",e[1]="M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z",e[2]="icon-pipe",e[3]=!1;break;case"captions":e[0]="0 0 20 20",e[1]="M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z",e[2]="icon-captions",e[3]=this.captionsButtonImg;break;case"descriptions":e[0]="0 0 20 20",e[1]="M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z",e[2]="icon-descriptions",e[3]=this.descriptionsButtonImg;break;case"sign":e[0]="0 0 20 20",e[1]="M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z",e[2]="icon-sign",e[3]=this.signButtonImg;break;case"mute":case"volume-mute":e[0]="0 0 20 20",e[1]="M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z",e[2]="icon-volume-mute",e[3]=this.imgPath+"volume-mute.png";break;case"volume-soft":e[0]="0 0 20 20",e[1]="M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-soft",e[3]=this.imgPath+"volume-soft.png";break;case"volume-medium":e[0]="0 0 20 20",e[1]="M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-medium",e[3]=this.imgPath+"volume-medium.png";break;case"volume-loud":e[0]="0 0 21 20",e[1]="M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-loud",e[3]=this.imgPath+"volume-loud.png";break;case"chapters":e[0]="0 0 20 20",e[1]="M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z",e[2]="icon-chapters",e[3]=this.chaptersButtonImg;break;case"transcript":e[0]="0 0 20 20",e[1]="M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z",e[2]="icon-transcript",e[3]=this.transcriptButtonImg;break;case"preferences":e[0]="0 0 20 20",e[1]="M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z",e[2]="icon-preferences",e[3]=this.prefsButtonImg;break;case"close":e[0]="0 0 16 20",e[1]="M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z",e[2]="icon-close",e[3]=null;break;case"fullscreen-expand":e[0]="0 0 20 20",e[1]="M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z",e[2]="icon-fullscreen-expand",e[3]=this.fullscreenExpandButtonImg;break;case"fullscreen-collapse":e[0]="0 0 20 20",e[1]="M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-fullscreen-collapse",e[3]=this.fullscreenCollapseButtonImg}return e},AblePlayer.prototype.reinitialize=function(){var e,i;if(i=(e=new this.defer).promise(),this.startedPlaying=!1,this.autoScrollTranscript=!0,this.$media=t(this.media).first(),this.media=this.$media[0],this.$media.is("audio"))this.mediaType="audio";else{if(!this.$media.is("video"))return this.provideFallback(),e.reject(),i;this.mediaType="video"}return this.$sources=this.$media.find("source"),this.player=this.getPlayer(),this.player\|\|this.provideFallback(),this.setIconType(),e.resolve(),i},AblePlayer.prototype.setPlayerSize=function(t,e){"audio"!==this.mediaType&&t>0&&e>0&&(this.playerWidth=t,this.playerHeight=e,this.aspectRatio=e/t)},AblePlayer.prototype.setIconType=function(){if(this.forceIconType)return!1;this.iconType="svg"},AblePlayer.prototype.setupInstance=function(){var t=new this.defer,e=t.promise();return this.$media.attr("id")?this.mediaId=this.$media.attr("id"):(this.mediaId="ableMediaId_"+this.ableIndex,this.$media.attr("id",this.mediaId)),t.resolve(),e},AblePlayer.prototype.setupInstancePlaylist=function(){var e=this;if(this.hasPlaylist=!1,t(".able-playlist").each(function(){if(t(this).data("player")===e.mediaId){e.hasPlaylist=!0,e.$playlist=t(this).find("li"),t(this).find("li[data-youtube-id]").each(function(){var i=DOMPurify.sanitize(t(this).attr("data-youtube-id")),s=e.getYouTubePosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)}),t(this).find("li[data-vimeo-id]").each(function(){var i=t(this).attr("data-vimeo-id"),s=e.getVimeoPosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)}),t(this).find("li span").attr("aria-hidden","true"),e.playlistIndex=0;var i=t(this).data("embedded");e.playlistEmbed=void 0!==i&&!1!==i}}),this.hasPlaylist&&this.loop&&this.media.removeAttribute("loop"),this.hasPlaylist&&this.playlistEmbed){var i=this.$playlist.parent();this.$playlistDom=i.clone(),i.remove()}this.hasPlaylist&&0===this.$sources.length&&(this.cuePlaylistItem(0),this.$sources=this.$media.find("source"))},AblePlayer.prototype.recreatePlayer=function(){var e,i,s,a,n;if(this.player)return i=(e=new this.defer).promise(),s=this,this.playerDeleted=!1,this.recreatingPlayer=!0,this.playerCreated\|\|(this.loadCurrentPreferences(),this.injectPlayerCode(),this.resizePlayer(this.media.videoWidth,this.media.videoHeight)),this.getSampleDescriptionText(),this.initSignLanguage(),this.initPlayer().then(function(){s.getTracks().then(function(){s.initDescription().then(function(){s.setupTracks().then(function(){s.hasClosedDesc&&(!s.$descDiv\|\|s.$descDiv&&!t.contains(s.$ableDiv[0],s.$descDiv[0]))&&s.injectTextDescriptionArea(),s.initSpeech("init"),s.setupTranscript().then(function(){s.initStenoFrame().then(function(){s.stenoMode&&s.$stenoFrame&&(s.stenoFrameContents=s.$stenoFrame.contents()),s.getMediaTimes().then(function(t){for(s.duration=t.duration,s.elapsed=t.elapsed,void 0===s.volume&&(s.volume=s.defaultVolume),s.volume&&s.setVolume(s.volume),s.transcriptType&&(s.addTranscriptAreaEvents(),s.updateTranscript()),s.captions.length&&s.initDefaultCaption(),s.setMediaAttributes(),s.addControls(),s.addEventListeners(),a=s.getPreferencesGroups(),n=0;n<a.length;n++)s.injectPrefsForm(a[n]);s.setupPopups(),s.updateCaption(),s.injectVTS(),s.populateChaptersDiv(),s.showSearchResults(),"html5"===s.player&&(s.loadingMedia\|\|(s.$media[0].load(),s.loadingMedia=!0)),setTimeout(function(){s.refreshControls(),e.resolve()},100)})})})})})})},function(){s.provideFallback()}),i;console.log("Can't create player; no appropriate player type detected.")},AblePlayer.prototype.initPlayer=function(){var t,e=this;"html5"===this.player?t=this.initHtml5Player():"youtube"===this.player?t=this.initYouTubePlayer():"vimeo"===this.player&&(t=this.initVimeoPlayer());var i=new this.defer,s=i.promise();return t.then(function(){e.useFixedSeekInterval?(e.seekInterval\|\|(e.seekInterval=e.defaultSeekInterval),e.seekIntervalCalculated=!0):e.setSeekInterval(),i.resolve()}).finally(function(){i.reject()}),s},AblePlayer.prototype.initStenoFrame=function(){var t,e;return e=(t=new this.defer).promise(),this.stenoMode&&this.$stenoFrame?(this.$stenoFrame[0].contentWindow,"complete"==document.readyState?t.resolve():this.$stenoFrame.on("load",function(){t.resolve()})):t.resolve(),e},AblePlayer.prototype.setSeekInterval=function(){var t;this.seekInterval=this.defaultSeekInterval,void 0===(t=this.useChapterTimes?this.chapterDuration:this.duration)\|\|t<1?this.seekIntervalCalculated=!1:(this.seekInterval=t<=20?5:t<=30?6:t<=40?8:t<=100?10:Math.round(t/10,0),this.seekIntervalCalculated=!0)},AblePlayer.prototype.initDefaultCaption=function(){var t,e;if((t=this.captions).length>0){for(e=0;e<t.length;e++)!0===t[e].def&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);if(void 0===this.captionLang)for(e=0;e<t.length;e++)t[e].language===this.lang&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);void 0===this.captionLang&&(this.captionLang=t[0].language,this.selectedCaptions=t[0]),void 0!==this.captionLang&&(this.$transcriptLanguageSelect&&this.$transcriptLanguageSelect.find("option[lang="+this.captionLang+"]").prop("selected",!0),this.syncTrackLanguages("init",this.captionLang)),"vimeo"===this.player&&(this.usingVimeoCaptions&&1==this.prefCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(t){}).catch(function(t){t.name}):this.vimeoPlayer.disableTextTrack().then(function(){}).catch(function(t){}))}},AblePlayer.prototype.initHtml5Player=function(){var t=new this.defer,e=t.promise();return t.resolve(),e},AblePlayer.prototype.setMediaAttributes=function(){this.$media.attr("tabindex",-1);var t=this.$media.get(0).textTracks;if(t)for(var e=0;e<t.length;)t[e].mode="disabled",e+=1},AblePlayer.prototype.getPlayer=function(){return this.testFallback?null:this.youTubeId?"video"!==this.mediaType?null:"youtube":this.vimeoId?"video"!==this.mediaType?null:"vimeo":this.media.canPlayType?"html5":null}}(jQuery),function(t){AblePlayer.prototype.setPrefs=function(t){"undefined"!=typeof Cookies?Cookies.set("Able-Player",JSON.stringify(t),{expires:90,sameSite:"strict"}):localStorage.setItem("Able-Player",JSON.stringify(t))},AblePlayer.prototype.getPref=function(){var t,e={preferences:{},sign:{},transcript:{},voices:[]};try{t="undefined"!=typeof Cookies?JSON.parse(Cookies.get("Able-Player")):JSON.parse(localStorage.getItem("Able-Player"))}catch(i){this.setPrefs(e),t=e}return t\|\|e},AblePlayer.prototype.updatePreferences=function(t){var e,i,s,a,n,r,o,l;if(e=this.getPref(),"transcript"===t\|\|"sign"===t)"transcript"===t?(s=(i=this.$transcriptArea).position(),void 0===e.transcript&&(e.transcript={}),e.transcript.position=i.css("position"),e.transcript.zindex=i.css("z-index"),e.transcript.top=s.top,e.transcript.left=s.left,e.transcript.width=i.width(),e.transcript.height=i.height()):"sign"===t&&(s=(i=this.$signWindow).position(),void 0===e.sign&&(e.sign={}),e.sign.position=i.css("position"),e.sign.zindex=i.css("z-index"),e.sign.top=s.top,e.sign.left=s.left,e.sign.width=i.width(),e.sign.height=i.height());else if("voice"===t){void 0===e.voices&&(e.voices=[]),o=!1;for(var h=0;h<e.voices.length;h++)e.voices[h].lang===this.prefDescVoiceLang&&(o=!0,e.voices[h].name=this.prefDescVoice);o\|\|(l={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(l))}else for(a=this.getAvailablePreferences(),n=0;n<a.length;n++)(r=a[n].name)==t&&(e.preferences[r]=this[r]);this.setPrefs(e)},AblePlayer.prototype.getPreferencesGroups=function(){return this.usingYouTubeCaptions?["captions","descriptions","keyboard"]:this.usingVimeoCaptions?["descriptions","keyboard"]:["captions","descriptions","keyboard","transcript"]},AblePlayer.prototype.getAvailablePreferences=function(){var t=[];return t.push({name:"prefAltKey",label:this.translate("prefAltKey","Alt"),group:"keyboard",default:1}),t.push({name:"prefCtrlKey",label:this.translate("prefCtrlKey","Control"),group:"keyboard",default:1}),t.push({name:"prefShiftKey",label:this.translate("prefShiftKey","Shift"),group:"keyboard",default:0}),t.push({name:"prefNoKeyShortcuts",label:this.translate("prefNoKeyShortcuts","Disable Keyboard Shortcuts"),group:"keyboard",default:0}),t.push({name:"prefTranscript",label:null,group:"transcript",default:0}),t.push({name:"prefHighlight",label:this.translate("prefHighlight","Highlight transcript as media plays"),group:"transcript",default:1}),t.push({name:"prefAutoScrollTranscript",label:null,group:"transcript",default:1}),t.push({name:"prefTabbable",label:this.translate("prefTabbable","Keyboard-enable transcript"),group:"transcript",default:0}),t.push({name:"prefCaptions",label:null,group:"captions",default:this.defaultStateCaptions}),this.usingYouTubeCaptions\|\|("video"===this.mediaType&&t.push({name:"prefCaptionsPosition",label:this.translate("prefCaptionsPosition","Position"),group:"captions",default:this.defaultCaptionsPosition}),t.push({name:"prefCaptionsFont",label:this.translate("prefCaptionsFont","Font"),group:"captions",default:"sans-serif"})),t.push({name:"prefCaptionsSize",label:this.translate("prefCaptionsSize","Font size"),group:"captions",default:"100%"}),this.usingYouTubeCaptions\|\|(t.push({name:"prefCaptionsColor",label:this.translate("prefCaptionsColor","Text Color"),group:"captions",default:"white"}),t.push({name:"prefCaptionsBGColor",label:this.translate("prefCaptionsBGColor","Background"),group:"captions",default:"black"}),t.push({name:"prefCaptionsOpacity",label:this.translate("prefCaptionsOpacity","Opacity"),group:"captions",default:"100%"})),"video"===this.mediaType&&(t.push({name:"prefDesc",label:null,group:"descriptions",default:this.defaultStateDescriptions}),t.push({name:"prefDescMethod",label:null,group:"descriptions",default:"video"}),t.push({name:"prefDescVoice",label:this.translate("prefDescVoice","Voice"),group:"descriptions",default:null}),t.push({name:"prefDescPitch",label:this.translate("prefDescPitch","Pitch"),group:"descriptions",default:1}),t.push({name:"prefDescRate",label:this.translate("prefDescRate","Rate"),group:"descriptions",default:1}),t.push({name:"prefDescVolume",label:this.translate("volume","Volume"),group:"descriptions",default:1}),"video"!==this.descMethod&&t.push({name:"prefDescPause",label:this.translate("prefDescPause","Automatically pause video when description starts"),group:"descriptions",default:this.defaultDescPause}),t.push({name:"prefDescVisible",label:this.translate("prefDescVisible","Make description visible"),group:"descriptions",default:0})),t.push({name:"prefSign",label:null,group:null,default:0}),t},AblePlayer.prototype.loadCurrentPreferences=function(){for(var t=this.getAvailablePreferences(),e=this.getPref(),i=0;i<t.length;i++){var s=t[i].name,a=t[i].default;void 0!==e.preferences[s]?this[s]=e.preferences[s]:(e.preferences[s]=a,this[s]=a)}void 0!==e.voices&&(this.prefVoices=e.voices),this.setPrefs(e)},AblePlayer.prototype.injectPrefsForm=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v,y,b,P,k,T,w,C,$,D,A,x,S,I,N,M,B,V,L,F,O,z,R,E,W,H;i=this,s=this.getAvailablePreferences();var j="able-prefs-form-"+e;if((a=t("<div>",{class:"able-prefs-form "})).addClass(j),"captions"==e)n=this.translate("prefTitleCaptions","Captions Preferences");else if("descriptions"==e){n=this.translate("prefTitleDescriptions","Audio Description Preferences");var q=t("<p>",{text:this.translate("prefIntroDescription1","This media player supports audio description in two ways: ")}),K=t("<ul>"),Y=t("<li>",{text:this.translate("prefDescFormatOption1","alternative described version of video")}),U=t("<li>",{text:this.translate("prefDescFormatOption2","text-based description, announced by screen reader")});K.append(Y,U),this.hasOpenDesc&&this.hasClosedDesc?(N=this.translate("prefIntroDescription2","The current video has ")+" ",N+="<strong>"+this.translate("prefDescFormatOption1b","an alternative described version")+"</strong>",N+=" <em>"+this.translate("and","and")+"</em> <strong>"+this.translate("prefDescFormatOption2b","text-based description, announced by screen reader")+"</strong>."):this.hasOpenDesc?(N=this.translate("prefIntroDescription2","The current video has "),N+=" <strong>"+this.translate("prefDescFormatOption1b","an alternative described version")+"</strong>."):this.hasClosedDesc?(N=this.translate("prefIntroDescription2","The current video has "),N+=" <strong>"+this.translate("prefDescFormatOption2b","text-based description, announced by screen reader")+"</strong>."):N=this.translate("prefIntroDescriptionNone","The current video has no audio description in either format."),o=t("<p>",{html:N}),l=this.translate("prefIntroDescription3","Use the following form to set your preferences related to text-based audio description."),(this.hasOpenDesc\|\|this.hasClosedDesc)&&(l+=" "+this.translate("prefIntroDescription4","After you save your settings, audio description can be toggled on/off using the Description button.")),h=t("<p>",{text:l}),a.append(q,K,o,h)}else"keyboard"==e?(n=this.translate("prefTitleKeyboard","Keyboard Preferences"),r=this.translate("prefIntroKeyboard1","The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list)."),r+=" "+this.translate("prefIntroKeyboard2","Modifier keys (Shift, Alt, and Control) can be assigned below."),r+=" "+this.translate("prefIntroKeyboard3","NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you."),q=t("<p>",{text:r}),a.append(q)):"transcript"==e&&(n=this.translate("prefTitleTranscript","Transcript Preferences"));for(u=t("<div>").attr("role","group"),d="able-prefs-"+e,m=(g=this.mediaId+"-prefs-"+e)+"-legend",u.addClass(d).attr("id",g),"keyboard"===e?((f=t("<h2>"+this.translate("prefHeadingKeyboard1","Modifier keys used for shortcuts")+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(f)):"descriptions"===e&&((f=t("<h2>"+this.translate("prefHeadingTextDescription","Text-based audio description")+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(f)),p=0;p<s.length;p++)if(s[p].group==e&&s[p].label){if(b="able-"+(v=s[p].name),P=this.mediaId+"_"+v,y=t("<div>").addClass(b),"captions"===e){for(k=t('<label for="'+P+'"> '+s[p].label+"</label>"),T=t("<select>",{name:v,id:P}),"prefCaptions"!==v&&"prefCaptionsStyle"!==v&&T.on("change",function(){x=t(this).attr("name"),i.stylizeCaptions(i.$sampleCapsDiv,x)}),w=this.getCaptionsOptions(v),c=0;c<w.length;c++)"prefCaptionsPosition"===v?"overlay"===($=w[c])?A=this.translate("captionsPositionOverlay","Overlay"):"below"===$&&($=w[c],A=this.translate("captionsPositionBelow","Below video")):"prefCaptionsFont"===v\|\|"prefCaptionsColor"===v\|\|"prefCaptionsBGColor"===v?($=w[c][0],A=w[c][1]):"prefCaptionsOpacity"===v?($=w[c],A=w[c],A+="0%"===$?" ("+this.translate("transparent","transparent")+")":" ("+this.translate("solid","solid")+")"):($=w[c],A=w[c]),C=t("<option>",{value:$,text:A}),this[v]===$&&C.prop("selected",!0),T.append(C);y.append(k,T)}else if("descriptions"===e){if(k=t('<label for="'+P+'"> '+s[p].label+"</label>"),"prefDescPause"===v\|\|"prefDescVisible"===v)y.addClass("able-prefs-checkbox"),T=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&T.prop("checked",!0),y.append(T,k);else if(this.synth){if(y.addClass("able-prefs-select"),T=t("<select>",{name:v,id:P}),"prefDescVoice"===v&&this.descVoices.length){for(M=this.getPrefDescVoice(),c=0;c<this.descVoices.length;c++)$=this.descVoices[c].name,D=this.descVoices[c].lang.substring(0,2).toLowerCase(),A=$+" ("+this.descVoices[c].lang+")",C=t("<option>",{value:$,"data-lang":D,text:A}),M===$&&C.prop("selected",!0),T.append(C);this.$voiceSelectField=T}else if("prefDescPitch"==v?w=[0,.5,1,1.5,2]:"prefDescRate"==v?w=[.7,.8,.9,1,1.1,1.2,1.5,2,2.5,3]:"prefDescVolume"==v&&(w=[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]),void 0!==w)for(c=0;c<w.length;c++)$=w[c],A=this.makePrefsValueReadable(v,$),C=t("<option>",{value:$,text:A}),this[v]==$&&C.prop("selected",!0),T.append(C),y.append(k,T);T.on("change",function(){i.announceDescriptionText("sample",i.currentSampleText)}),y.append(k,T)}}else k=t('<label for="'+P+'"> '+s[p].label+"</label>"),T=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&T.prop("checked",!0),"keyboard"===e&&T.on("change",function(){"prefAltKey"===(x=t(this).attr("name"))?(S=".able-modkey-alt",I=i.tt.prefAltKey+" + "):"prefCtrlKey"===x?(S=".able-modkey-ctrl",I=i.tt.prefCtrlKey+" + "):"prefShiftKey"===x&&(S=".able-modkey-shift",I=i.tt.prefShiftKey+" + "),"prefNoKeyShortcuts"!==x?t(this).is(":checked")?t(S).text(I):t(S).text(""):t(this).is(":checked")?t(".able-modkey-item").addClass("hidden"):t(".able-modkey-item").removeClass("hidden")}),y.append(T,k);("prefDescVoice"!==v\|\|this.descVoices.length)&&u.append(y)}if(a.append(u),"captions"===e)this.usingYouTubeCaptions\|\|(this.$sampleCapsDiv=t("<div>",{class:"able-captions-sample"}).text(this.translate("sampleCaptionText","Sample caption text")),a.append(this.$sampleCapsDiv),this.stylizeCaptions(this.$sampleCapsDiv));else if("descriptions"===e)this.synth&&(this.$sampleDescDiv=t("<div>",{class:"able-desc-sample"}).text(this.translate("sampleDescriptionText","Adjust settings to hear this sample text.")),a.append(this.$sampleDescDiv),this.currentSampleText=this.translate("sampleDescriptionText","Adjust settings to hear this sample text."));else if("keyboard"===e){let e=1===this.prefNoKeyShortcuts?"able-modkey-item hidden":"able-modkey-item";for(B=t("<h2>",{text:this.translate("prefHeadingKeyboard2","Current keyboard shortcuts")}),V=t("<ul>"),L=[],F=[],p=0;p<this.controls.length;p++)"play"===this.controls[p]?(L.push(this.translate("play","Play")+"/"+this.translate("pause","Pause")),F.push("p</span> <em>"+this.translate("or","or")+'</em> <span class="able-help-modifiers"> '+this.translate("spacebar","spacebar"))):"restart"===this.controls[p]?(L.push(this.translate("restart","Restart")),F.push("s")):"previous"===this.controls[p]?(L.push(this.translate("prevTrack","Previous track")),F.push("b")):"next"===this.controls[p]?(L.push(this.translate("nextTrack","Next track")),F.push("n")):"rewind"===this.controls[p]?(L.push(this.translate("rewind","Rewind")),F.push("r")):"forward"===this.controls[p]?(L.push(this.translate("forward","Forward")),F.push("f")):"volume"===this.controls[p]?(L.push(this.translate("volume","Volume")),F.push("v</span> <em>"+this.translate("or","or")+'</em> <span class="able-modkey">1-9'),L.push(this.translate("mute","Mute")+"/"+this.translate("unmute","Unmute")),F.push("m")):"captions"===this.controls[p]?(this.captions.length>1?L.push(this.translate("captions","Captions")):this.captionsOn?L.push(this.translate("hideCaptions","Hide captions")):L.push(this.translate("showCaptions","Show captions")),F.push("c")):"descriptions"===this.controls[p]?(this.descOn?L.push(this.translate("turnOffDescriptions","Turn off descriptions")):L.push(this.translate("turnOnDescriptions","Turn on descriptions")),F.push("d")):"prefs"===this.controls[p]&&(L.push(this.translate("preferences","Preferences")),F.push("e"));for(p=0;p<F.length;p++)O='<span class="able-modkey-alt">',1===this.prefAltKey&&(O+=this.translate("prefAltKey","Alt")+" + "),O+="</span>",O+='<span class="able-modkey-ctrl">',1===this.prefCtrlKey&&(O+=this.translate("prefCtrlKey","Control")+" + "),O+="</span>",O+='<span class="able-modkey-shift">',1===this.prefShiftKey&&(O+=this.translate("prefShiftKey","Shift")+" + "),O+="</span>",O+='<span class="able-modkey">'+F[p]+"</span>",O+=" = "+L[p],z=t("<li>",{class:e,html:O}),V.append(z);O='<span class="able-modkey">'+this.translate("escapeKey","Escape")+"</span>",O+=" = "+this.translate("escapeKeyFunction","Close current dialog or popup menu"),z=t("<li>",{html:O}),V.append(z),a.append(B,V)}t("body").append(a),R=new AccessibleDialog(a,this.$prefsButton,n,i.tt.closeButtonLabel),H=t('<div class="able-prefs-buttons"></div>'),E=t('<button class="modal-button">'+this.translate("save","Save")+"</button>"),W=t('<button class="modal-button">'+this.translate("cancel","Cancel")+"</button>"),E.on("click",function(){R.hide(),i.savePrefsFromForm()}),W.on("click",function(){R.hide(),i.resetPrefsForm()}),H.append(E,W),a.append(H),"captions"!==e&&"transcript"!==e\|\|u.attr("aria-labelledby",R.titleH1.attr("id")),"captions"===e?this.captionPrefsDialog=R:"descriptions"===e?this.descPrefsDialog=R:"keyboard"===e?this.keyboardPrefsDialog=R:"transcript"===e&&(this.transcriptPrefsDialog=R),t("div.able-prefs-form button.modalCloseButton").on("click",function(){i.resetPrefsForm()}),t("div.able-prefs-form").on("keydown",function(t){"Escape"===t.key&&i.resetPrefsForm()})},AblePlayer.prototype.getPrefDescVoice=function(){var t,e,i;if(t=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,(e=this.getPref()).voices)for(i=0;i<e.voices.length;i++)if(e.voices[i].lang===t)return e.voices[i].name;return null},AblePlayer.prototype.rebuildDescPrefsForm=function(){var e,i,s,a;for(this.$voiceSelectField=t("#"+this.mediaId+"_prefDescVoice"),this.$voiceSelectField.empty(),e=0;e<this.descVoices.length;e++)s=(i=this.descVoices[e].name)+" ("+this.descVoices[e].lang+")",a=t("<option>",{value:i,"data-lang":this.descVoices[e].lang.substring(0,2).toLowerCase(),text:s}),this.prefDescVoice==i&&a.prop("selected",!0),this.$voiceSelectField.append(a)},AblePlayer.prototype.makePrefsValueReadable=function(t,e){if("prefDescPitch"===t){if(0===e)return this.translate("prefDescPitch1","Very low");if(.5===e)return this.translate("prefDescPitch2","Low");if(1===e)return this.translate("prefDescPitch3","Default");if(1.5===e)return this.translate("prefDescPitch4","High");if(2===e)return this.translate("prefDescPitch5","Very high")}else if("prefDescRate"===t){if(.7===e)return 1;if(.8===e)return 2;if(.9===e)return 3;if(1===e)return 4;if(1.1===e)return 5;if(1.2===e)return 6;if(1.5===e)return 7;if(2===e)return 8;if(2.5===e)return 9;if(3===e)return 10}else if("prefDescVolume"===t)return 10e;return e},AblePlayer.prototype.resetPrefsForm=function(){var e,i,s,a;for(e=this.getPref(),i=this.getAvailablePreferences(),s=0;s<i.length;s++)-1!==(a=i[s].name).indexOf("Captions")&&"prefCaptions"!==a?t('select[name="'+a+'"]').val(e.preferences[a]):1===this[a]?t('input[name="'+a+'"]').prop("checked",!0):t('input[name="'+a+'"]').prop("checked",!1);this.stylizeCaptions(this.$sampleCapsDiv)},AblePlayer.prototype.savePrefsFromForm=function(){var e,i,s,a,n,r,o,l,h,p,c,u;o=0,h=0,p=!1,e=this.getPref(),i=this.getAvailablePreferences();for(var d=0;d<i.length;d++)if(i[d].label)if(s=i[d].name,a=this.mediaId+"_"+s,"prefDescVoice"===s){void 0===e.voices&&(e.voices=[]),n=this.mediaId+"_prefDescVoice",this.prefDescVoice=t("select#"+n).find(":selected").val(),this.prefDescVoiceLang=t("select#"+n).find(":selected").attr("data-lang"),l=!1;for(var g=0;g<e.voices.length;g++)e.voices[g].lang===this.prefDescVoiceLang&&(l=!0,e.voices[g].name=this.prefDescVoice);l\|\|(r={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(r)),o++}else"prefDescMethod"==s?(this.prefDescMethod="video",this.prefDescMethod!==e.preferences.prefDescMethod&&(e.preferences.prefDescMethod=this.prefDescMethod,o++)):-1!==s.indexOf("Captions")&&"prefCaptions"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++,h++),"prefCaptionsSize"===s&&(p=!0,c=u)):-1!==s.indexOf("Desc")&&"prefDescPause"!==s&&"prefDescVisible"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++)):t('input[id="'+a+'"]').is(":checked")?(e.preferences[s]=1,1===this[s]\|\|(this[s]=1,o++)):(e.preferences[s]=0,1===this[s]&&(this[s]=0,o++));if(o>0?(this.setPrefs(e),this.showAlert(this.translate("prefSuccess","Your changes have been saved."))):this.showAlert(this.translate("prefNoChange","You didn't make any changes")),"youtube"===this.player&&void 0!==this.usingYouTubeCaptions&&this.usingYouTubeCaptions&&p&&this.youTubePlayer.setOption("captions","fontSize",this.translatePrefs("size",c,"youtube")),AblePlayerInstances.length>1)for(d=0;d<AblePlayerInstances.length;d++)AblePlayerInstances[d].updatePlayerPrefs(),AblePlayerInstances[d].loadCurrentPreferences(),AblePlayerInstances[d].resetPrefsForm(),h>0&&(AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$captionsDiv),void 0!==AblePlayerInstances[d].$descDiv&&AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$descDiv));else this.updatePlayerPrefs(),h>0&&(this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv))},AblePlayer.prototype.updatePlayerPrefs=function(){this.$transcriptDiv&&(1===this.prefTabbable?this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"):this.$transcriptDiv.find("span.able-transcript-seekpoint").removeAttr("tabindex"),0===this.prefHighlight&&this.$transcriptDiv.find("span").removeClass("able-highlight")),this.updateCaption(),this.initDescription()},AblePlayer.prototype.usingModifierKeys=function(t){return!(1===this.prefAltKey&&!t.altKey)&&(!(1===this.prefCtrlKey&&!t.ctrlKey)&&!(1===this.prefShiftKey&&!t.shiftKey))}}(jQuery),function(t){function actList(t,e){for(var i=[],s=0;s<e.length;s++)i.push(act(t,e[s]));return i}function act(t,e){var i=e(t);if(null!==t.error)throw t.error;return i}function updatePosition(t,e){for(var i=0;i<e.length;i++)"\n"===e[i]?(t.column=1,t.line+=1):t.column+=1}function cut(t,e){var i=t.text.substring(0,e);return updatePosition(t,i),t.text=t.text.substring(e),i}function cutLine(t,e){var i,s=t.text.indexOf("\n");return-1===s?(updatePosition(t,i=t.text),t.text=""):(i=t.text.substring(0,s),updatePosition(t,i+"\n"),t.text=t.text.substring(s+1)),i}function peekLine(t){var e=t.text.indexOf("\n");return-1===e?t.text:t.text.substring(0,e)}function parseFileBody(t){actList(t,[eatOptionalBOM,eatSignature]);var e=t.text[0];" "===e\|\|"\t"===e\|\|"\n"===e?actList(t,[eatUntilEOLInclusive,parseMetadataHeaders,eatAtLeast1EmptyLines,parseCuesAndComments]):t.error="WEBVTT signature not followed by whitespace."}function parseMetadataHeaders(t){for(;;){var e=peekLine(t);if(-1!==e.indexOf("--\x3e"))return;if(0===e.length)return;var i=act(t,getMetadataKeyValue);t.metadata[i[0]]=i[1],act(t,eatUntilEOLInclusive)}}function nextSpaceOrNewline(t){var e=[],i=t.indexOf(" ");i>=0&&e.push(i);var s=t.indexOf("\t");s>=0&&e.push(s);var a=t.indexOf("\n");return a>=0&&e.push(a),Math.min.apply(null,e)}function getMetadataKeyValue(t){var e=t.text.indexOf("\n"),i=cut(t,e),s=i.indexOf(":");return-1===s?void(t.error="Missing colon."):[i.substring(0,s),i.substring(s+1)]}function getSettingsKeyValue(t){var e=cut(t,nextSpaceOrNewline(t.text)),i=e.indexOf(":");return-1===i?void(t.error="Missing colon."):[e.substring(0,i),e.substring(i+1)]}function parseCuesAndComments(t){for(;;){var e=peekLine(t);if(0!==e.indexOf("NOTE")\|\|4!==e.length&&" "!==e[4]&&"\t"!==e[4])if(0===e.trim().length&&t.text.length>0)act(t,eatEmptyLines);else{if(!(e.trim().length>0))return;act(t,parseCue)}else actList(t,[eatComment,eatEmptyLines])}}function parseCue(t){var e,i=peekLine(t);if(-1===i.indexOf("--\x3e")&&(e=cutLine(t),-1===(i=peekLine(t)).indexOf("--\x3e")))return"Invalid WebVTT file: "+t.src+"\n","Line: "+t.line+", ","Column: "+t.column+"\n",void(console.warn\|\|console.log);var s=actList(t,[getTiming,eatAtLeast1SpacesOrTabs,eatArrow,eatAtLeast1SpacesOrTabs,getTiming]),a=s[0],n=s[4];if(a>=n)t.error="Start time is not sooner than end time.";else{act(t,eatSpacesOrTabs);var r=act(t,getCueSettings);cut(t,1);var o=act(t,getCuePayload);void 0===e&&(e=t.cues.length+1),t.cues.push({id:e,start:a,end:n,settings:r,components:o})}}function getCueSettings(t){for(var e={};t.text.length>0&&"\n"!==t.text[0];){var i=act(t,getSettingsKeyValue);e[i[0]]=i[1],act(t,eatSpacesOrTabs)}return e}function getCuePayload(e){for(var i={type:"internal",tagName:"",value:"",classes:[],annotation:"",parent:null,children:[],language:""},s=i,a=[];e.text.length>0;){var n=peekLine(e);if(-1!==n.indexOf("--\x3e")\|\|/^\s+$/.test(n))break;if(e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]){cut(e,2);break}var r=getCueToken(e);if("string"===r.type)s.children.push(r);else if("startTag"===r.type)r.type=r.tagName,r.parent=s,-1!==t.inArray(r.tagName,["i","b","u","ruby"])\|\|"rt"===r.tagName&&"ruby"===s.tagName?(a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"c"===r.tagName\|\|"v"===r.tagName?(r.value=r.annotation,a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"lang"===r.tagName&&(a.push(r.annotation),a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r);else if("endTag"===r.type)r.tagName===s.type&&-1!==t.inArray(r.tagName,["c","i","b","u","ruby","rt","v"])?s=s.parent:"lang"===r.tagName&&"lang"===s.type?(s=s.parent,a.pop()):"ruby"===r.tagName&&"rt"===s.type&&(s=s.parent.parent);else if("timestampTag"===r.type){var o={text:r.value,error:null,metadata:{},cues:[],line:1,column:1};try{var l=act(o,getTiming);0===o.text.length&&(r.value=l,s.push(r))}catch(t){}}}return i}function getCueToken(t){for(var e="data",i=[],s="",a={type:"",tagName:"",value:"",classes:[],annotation:"",children:[]};;){var n;if(n=t.text.length>=2&&"\n"===t.text[0]&&"\n"===t.text[1]?"":t.text.length>0?t.text[0]:"","data"===e)if("&"===n)s="&",e="escape";else if("<"===n){if(0!==i.length)return a.type="string",a.value=i.join(""),a;e="tag"}else{if(""===n)return{type:"string",value:i.join("")};i.push(n)}else if("escape"===e)if("&"===n)i.push(s),s="&";else if(n.match(/[0-9a-z]/))s+=n;else if(";"===n)"&"===s?i.push("&"):"<"===s?i.push("<"):">"===s?i.push(">"):"&lrm"===s?i.push("‎"):"&rlm"===s?i.push("‏"):" "===s?i.push(" "):(i.push(s),i.push(";")),e="data";else{if("<"===n\|\|""===n)return i.push(s),a.type="string",a.value=i.join(""),a;if("\t"===n\|\|"\n"===n\|\|"\f"===n\|\|" "===n)return i.push(s),a.type="string",a.value=i.join(""),a;i.push(s),e="data"}else if("tag"===e)if("\t"===n\|\|"\n"===n\|\|"\f"===n\|\|" "===n)e="startTagAnnotation";else if("."===n)e="startTagClass";else if("/"===n)e="endTag";else if(n.match("[0-9]"))e="timestampTag",i.push(n);else{if(">"===n){cut(t,1);break}if(""===n)return a.tagName="",a.type="startTag",a;i.push(n),e="startTag"}else if("startTag"===e)if("\t"===n\|\|"\f"===n\|\|" "===n)e="startTagAnnotation";else if("\n"===n)s=n,e="startTagAnnotation";else if("."===n)e="startTagClass";else{if(">"===n)return cut(t,1),a.tagName=i.join(""),a.type="startTag",a;if(""===n)return a.tagName=i.join(""),a.type="startTag",a;i.push(n)}else if("startTagClass"===e)if("\t"===n\|\|"\f"===n\|\|" "===n)a.classes.push(s),s="",e="startTagAnnotation";else if("\n"===n)a.classes.push(s),s=n,e="startTagAnnotation";else if("."===n)a.classes.push(s),s="";else{if(">"===n)return cut(t,1),a.classes.push(s),a.type="startTag",a.tagName=i.join(""),a;if(""===n)return a.classes.push(s),a.type="startTag",a.tagName=i.join(""),a;s+="c"}else if("startTagAnnotation"===e){if(">"===n)return cut(t,1),s=s.trim().replace(/ +/," "),a.type="startTag",a.tagName=i.join(""),a.annotation=s,a;if(""===n)return s=s.trim().replace(/ +/," "),a.type="startTag",a.tagName=i.join(""),a.annotation=s,a;s+=n}else if("endTag"===e){if(">"===n)return cut(t,1),a.type="endTag",a.tagName=i.join(""),a;if(""===n)return a.type="endTag",a.tagName=i.join(""),a;i.push(n)}else{if("timestampTag"!==e)throw"Unknown tokenState "+e;if(">"===n)return cut(t,1),a.type="timestampTag",a.name=i.join(""),a;if(""===n)return a.type="timestampTag",a.name=i.join(""),a;i.push(n)}cut(t,1)}}function eatComment(t){if(-1===cutLine(t).indexOf("--\x3e"))for(;;){var e=peekLine(t);if(0===e.trim().length)return;if(-1!==e.indexOf("--\x3e"))return void(t.error="Invalid syntax: --\x3e in comment.");cutLine(t)}else t.error="Invalid syntax: --\x3e in NOTE line."}function eatOptionalBOM(t){"\ufeff"===t.text[0]&&cut(t,1)}function eatSignature(t){"WEBVTT"===t.text.substring(0,6)?cut(t,6):t.error="Invalid signature."}function eatArrow(t){t.text.length<3\|\|"--\x3e"!==t.text.substring(0,3)?t.error="Missing --\x3e":cut(t,3)}function eatSpacesOrTabs(t){for(;"\t"===t.text[0]\|\|" "===t.text[0];)cut(t,1)}function eatAtLeast1SpacesOrTabs(t){for(var e=0;"\t"===t.text[0]\|\|" "===t.text[0];)cut(t,1),e+=1;0===e&&(t.error="Missing space.")}function eatUntilEOLInclusive(t){var e=t.text.indexOf("\n");-1===e?t.error="Missing EOL.":cut(t,e+1)}function eatEmptyLines(t){for(;t.text.length>0;){if(0!==peekLine(t).trim().length)break;cutLine(t)}}function eatAtLeast1EmptyLines(t){for(var e=0;t.text.length>0;){if(0!==peekLine(t).trim().length)break;cutLine(t),e+=1}0===e&&(t.error="Missing empty line.")}function getTiming(t){var e=nextSpaceOrNewline(t.text);if(-1!==e){var i=cut(t,e),s=/((\d+):)?((\d\d):)(\d\d).(\d\d\d)\|(\d+).(\d\d\d)/.exec(i);if(s){var a=0,n=s[2],r=s[4];if(r){if(parseInt(r,10)>59)return void(t.error="Invalid minute range");n&&(a+=3600parseInt(n,10)),a+=60parseInt(r,10);var o=s[5];if(parseInt(o,10)>59)return void(t.error="Invalid second range");a+=parseInt(o,10),a+=parseInt(s[6],10)/1e3}else a+=parseInt(s[7],10),a+=parseInt(s[8],10)/1e3;return a}t.error="Unable to parse timestamp"}else t.error("Missing timing.")}AblePlayer.prototype.parseWebVTT=function(t){let e=t.src,i=t.text;i=i.replace(/(\r\n\|\n\|\r)/g,"\n");var s={src:e,text:i,error:null,metadata:{},cues:[],line:1,column:1};try{act(s,parseFileBody)}catch(t){console.warn\|\|console.log}return s}}(jQuery),function(t){AblePlayer.prototype.injectPlayerCode=function(){var e;this.$mediaContainer=this.$media.wrap('<div class="able-media-container"></div>').parent(),this.$ableDiv=this.$mediaContainer.wrap('<div class="able"></div>').parent(),this.$ableWrapper=this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(),this.$ableWrapper.addClass("able-skin-"+this.skin),"video"===this.mediaType&&("image"==this.iconType\|\|"youtube"===this.player&&!this.hasPoster\|\|this.injectBigPlayButton()),e=t("<div>"),"video"===this.mediaType?e.addClass("able-vidcap-container"):"audio"===this.mediaType&&(e.addClass("able-audcap-container"),e.addClass("captions-off")),this.injectPlayerControlArea(),this.$captionsContainer=this.$mediaContainer.wrap(e).parent(),this.injectAlert(this.$ableDiv),this.injectPlaylist(),this.injectAudioPoster(),this.injectOffscreenHeading()},AblePlayer.prototype.injectAudioPoster=function(){if("audio"===this.mediaType&&this.hasPoster){audioPoster=DOMPurify.sanitize(this.audioPoster),audioPosterAlt=DOMPurify.sanitize(this.audioPosterAlt);let t=document.createElement("img");t.setAttribute("src",audioPoster),t.setAttribute("alt",audioPosterAlt),this.$audioWrapper=this.$playerDiv.wrap('<div class="able-audio-wrapper">').parent(),this.$audioWrapper.prepend(t)}},AblePlayer.prototype.injectOffscreenHeading=function(){var e;"0"==this.playerHeadingLevel\|\|(void 0===this.playerHeadingLevel&&(this.playerHeadingLevel=this.getNextHeadingLevel(this.$ableDiv)),e="h"+this.playerHeadingLevel.toString(),this.$headingDiv=t("<"+e+">"),this.$ableDiv.prepend(this.$headingDiv),this.$headingDiv.addClass("able-offscreen"),this.$headingDiv.text(this.translate("playerHeading","Media player")))},AblePlayer.prototype.injectBigPlayButton=function(){var e=this;this.$bigPlayButton=t("<button>",{class:"able-big-play-button","aria-hidden":!1,"aria-label":this.translate("play","Play"),type:"button",tabindex:0}),this.getIcon(this.$bigPlayButton,"play"),this.$bigPlayButton.on("click",function(){e.handlePlay()}),this.$mediaContainer.append(this.$bigPlayButton)},AblePlayer.prototype.injectPlayerControlArea=function(){this.$playerDiv=t("<div>",{class:"able-player",role:"region","aria-label":"audio"===this.mediaType?this.translate("audioPlayer","audio player"):this.translate("videoPlayer","video player")}),this.$playerDiv.addClass("able-"+this.mediaType),this.hasPlaylist&&this.showNowPlaying&&(this.$nowPlayingDiv=t("<div>",{class:"able-now-playing","aria-live":"assertive","aria-atomic":"true"})),this.$controllerDiv=t("<div>",{class:"able-controller"}),this.$controllerDiv.addClass("able-"+this.iconColor+"-controls"),this.$statusBarDiv=t("<div>",{class:"able-status-bar"}),this.$timer=t("<span>",{class:"able-timer"}),this.$elapsedTimeContainer=t("<span>",{class:"able-elapsedTime",text:"0:00"}),this.$durationContainer=t("<span>",{class:"able-duration"}),this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer),this.$speed=t("<span>",{class:"able-speed","aria-live":"assertive","aria-atomic":"true"}).text(this.translate("speed","Speed")+": 1x"),this.$status=t("<span>",{class:"able-status","aria-live":"polite"}),this.$statusBarDiv.append(this.$timer,this.$speed,this.$status),this.showNowPlaying?this.$playerDiv.append(this.$nowPlayingDiv,this.$controllerDiv,this.$statusBarDiv):this.$playerDiv.append(this.$controllerDiv,this.$statusBarDiv),"video"===this.mediaType?this.$ableDiv.append(this.$playerDiv):this.$ableDiv.prepend(this.$playerDiv)},AblePlayer.prototype.injectTextDescriptionArea=function(){this.$descDiv=t("<div>",{class:"able-descriptions"}),this.$descDiv.attr({"aria-live":"assertive","aria-atomic":"true"}),this.$descDiv.hide(),this.$ableDiv.append(this.$descDiv)},AblePlayer.prototype.getDefaultWidth=function(t){let e=window.innerWidth;return"transcript"===t?e<=450?e:450:"sign"===t?e<=400?e:400:void 0},AblePlayer.prototype.rePositionDraggableWindow=function(t){let e,i;e=this.getPref(),i="transcript"===t?this.$transcriptArea:this.$signWindow,"transcript"===t&&i?(void 0!==e.transcript&&(this.prevTranscriptPosition=e.transcript),i.css({top:0,left:0})):"sign"===t&&i&&(void 0!==e.sign&&(this.prevSignPosition=e.sign),i.css({top:0,right:0,left:"auto"}))},AblePlayer.prototype.positionDraggableWindow=function(e,i){var s,a,n,r,o,l;s=this.getPref(),(n="transcript"===e?this.$transcriptArea:this.$signWindow)&&("transcript"===e?(void 0!==s.transcript&&(a=s.transcript),this.prevTranscriptPosition&&(a=this.prevTranscriptPosition,this.prevTranscriptPosition=!1)):"sign"===e&&(void 0!==s.sign&&(a=s.sign),this.prevSignPosition&&(a=this.prevSignPosition,this.prevSignPosition=!1)),void 0===a\|\|t.isEmptyObject(a)?(r=this.getOptimumPosition(e,i),void 0===i&&(i=this.getDefaultWidth(e)),n.css({position:r[0],width:i,"z-index":r[3]}),"absolute"===r[0]&&n.css({top:r[1]+"px",left:r[2]+"px"})):(n.css({position:a.position,width:a.width,"z-index":a.zindex}),"absolute"===a.position&&(n.css({top:a.top,left:a.left}),topPosition=n.offset().top,leftPosition=n.offset().left,o=window.innerWidth,l=n.width(),topPosition<0&&n.css({top:a.top-topPosition}),leftPosition<0&&!this.restoringAfterFullscreen&&n.css({left:a.left-leftPosition}),o-leftPosition<30&&n.css({left:o-l})),this.updateZIndex(e)))},AblePlayer.prototype.getOptimumPosition=function(e,i){var s,a,n,r,o;return void 0===i&&(i=this.getDefaultWidth(e)),s=[],a=this.$ableDiv.width(),n=this.$ableDiv.offset().left,r=t(window).width(),o=0,"transcript"===e?void 0!==this.$signWindow&&this.$signWindow.is(":visible")&&(o=this.$signWindow.width()+5):"sign"===e&&void 0!==this.$transcriptArea&&this.$transcriptArea.is(":visible")&&(o=this.$transcriptArea.width()+5),i<r-(n+a+5+o)?(s[0]="absolute",s[1]=0,s[2]=a+o+5):i+5<n?(s[0]="absolute",s[1]=0,s[2]=n-i-5):s[0]="relative",s},AblePlayer.prototype.injectAlert=function(e){this.$alertBox=t('<div role="alert"></div>'),this.$alertBox.addClass("able-alert"),this.$alertBox.hide(),t("<span></span>").appendTo(this.$alertBox);var i=t('<button type="button"></button>');i.attr("aria-label",this.translate("dismissButton","Dismiss")),i.text("×"),i.appendTo(this.$alertBox),i.on("click",function(e){t(this).parent("div").hide()}),this.$alertBox.appendTo(e),this.$srAlertBox\|\|(this.$srAlertBox=t('<div role="alert"></div>'),this.$srAlertBox.addClass("able-screenreader-alert"),this.$srAlertBox.appendTo(e))},AblePlayer.prototype.injectPlaylist=function(){if(!0===this.playlistEmbed){var t=this.$playlistDom.clone();t.insertBefore(this.$statusBarDiv),this.$playlist=t.find("li")}},AblePlayer.prototype.createPopup=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,g,f,m;if(s=this,a=t("<ul>",{id:this.mediaId+"-"+e+"-menu",class:"able-popup",role:"menu"}).hide(),"captions"===e&&a.addClass("able-popup-captions"),"prefs"===e)if(this.prefCats.length>1){for(n=0;n<this.prefCats.length;n++)o=this.prefCats[n],f=!!(s.hasDescTracks\|\|s.hasOpenDesc\|\|s.hasClosedDesc),m=null!==s.transcriptType,"descriptions"===o&&!f\|\|"transcript"===o&&!m\|\|(r=t("<li></li>",{role:"menuitem",tabindex:"-1"}),"captions"===o?r.text(this.translate("prefMenuCaptions","Captions")):"descriptions"===o?r.text(this.translate("prefMenuDescriptions","Descriptions")):"keyboard"===o?r.text(this.translate("prefMenuKeyboard","Keyboard")):"transcript"===o&&r.text(this.translate("prefMenuTranscript","Transcript")),r.on("click",function(){l=t(this).text(),s.showingPrefsDialog=!0,s.setFullscreen(!1),l===s.tt.prefMenuCaptions?s.captionPrefsDialog.show():l===s.tt.prefMenuDescriptions?s.descPrefsDialog.show():l===s.tt.prefMenuKeyboard?s.keyboardPrefsDialog.show():l===s.tt.prefMenuTranscript&&s.transcriptPrefsDialog.show(),s.closePopups(),s.showingPrefsDialog=!1}),a.append(r));this.$prefsButton.attr("data-prefs-popup","menu")}else 1==this.prefCats.length&&this.$prefsButton.attr("data-prefs-popup",this.prefCats[0]);else if("captions"===e\|\|"chapters"===e){for(h=!1,n=0;n<i.length;n++)p=i[n],("captions"!==e\|\|"html5"!==this.player\|\|void 0!==p.cues)&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1",lang:p.language}),p.def&&1==this.prefCaptions?(r.attr("aria-checked","true"),h=!0):r.attr("aria-checked","false"),"captions"==e?(r.text(p.label),r.on("click",this.getCaptionClickFunction(p))):"chapters"==e&&(r.text(this.flattenCueForCaption(p)+" - "+this.formatSecondsAsColonTime(p.start)),r.on("click",this.getChapterClickFunction(p.start))),a.append(r));"captions"===e&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1"}).text(this.translate("captionsOff","Captions off")),0===this.prefCaptions?(r.attr("aria-checked","true"),h=!0):r.attr("aria-checked","false"),r.on("click",this.getCaptionOffFunction()),a.append(r))}else if("transcript-window"===e\|\|"sign-window"===e)for((c=[]).push({name:"move",label:this.translate("windowMove","Move")}),c.push({name:"resize",label:this.translate("windowResize","Resize")}),c.push({name:"close",label:this.translate("windowClose","Close")}),n=0;n<c.length;n++)(r=t("<li></li>",{role:"menuitem",tabindex:"-1","data-choice":c[n].name})).text(c[n].label),r.on("click",function(i){if(i.stopPropagation(),void 0!==i.button&&0!==i.button)return!1;s.windowMenuClickRegistered\|\|s.finishingDrag\|\|(s.windowMenuClickRegistered=!0,s.handleMenuChoice(e.substring(0,e.indexOf("-")),t(this).attr("data-choice"),i))}),a.append(r);return"captions"!==e\|\|h?"chapters"===e&&(a.find('li:contains("'+this.defaultChapter+'")')?a.find('li:contains("'+this.defaultChapter+'")').attr("aria-checked","true").addClass("able-focus"):a.find("li").first().attr("aria-checked","true").addClass("able-focus")):a.find("li[lang="+this.captionLang+"]")?a.find("li[lang="+this.captionLang+"]").attr("aria-checked","true"):a.find("li").last().attr("aria-checked","true"),a.on("keydown",function(e){(u=t(this).find("li:focus")).is(":first-child")?(d=t(this).find("li").last(),g=u.next()):u.is(":last-child")?(d=u.prev(),g=t(this).find("li").first()):(d=u.prev(),g=u.next()),"Tab"===e.key?e.shiftKey?(u.removeClass("able-focus"),d.trigger("focus").addClass("able-focus")):(u.removeClass("able-focus"),g.trigger("focus").addClass("able-focus")):"ArrowDown"===e.key\|\|"ArrowRight"===e.key?(u.removeClass("able-focus"),g.trigger("focus").addClass("able-focus")):"ArrowUp"==e.key\|\|"ArrowLeft"===e.key?(u.removeClass("able-focus"),d.trigger("focus").addClass("able-focus")):" "===e.key\|\|"Enter"===e.key?u.trigger("click"):"Escape"===e.key&&(u.removeClass("able-focus"),s.closePopups(),e.stopPropagation),e.preventDefault()}),this.$controllerDiv.append(a),a},AblePlayer.prototype.closePopups=function(){var t=this;this.chaptersPopup&&this.chaptersPopup.is(":visible")&&(this.chaptersPopup.hide(),this.$chaptersButton.attr("aria-expanded","false").trigger("focus")),this.captionsPopup&&this.captionsPopup.is(":visible")&&(this.captionsPopup.hide(),this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)),this.prefsPopup&&this.prefsPopup.is(":visible")&&!this.hidingPopup&&(this.hidingPopup=!0,this.prefsPopup.hide(),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$prefsButton.attr("aria-expanded","false"),this.showingPrefsDialog\|\|this.waitThenFocus(t.$prefsButton),setTimeout(function(){t.hidingPopup=!1},100)),this.$volumeSlider&&this.$volumeSlider.is(":visible")&&(this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").trigger("focus")),this.$transcriptPopup&&this.$transcriptPopup.is(":visible")&&(this.hidingPopup=!0,this.$transcriptPopup.hide(),this.$transcriptPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$transcriptPopupButton.attr("aria-expanded","false").trigger("focus"),setTimeout(function(){t.hidingPopup=!1},100)),this.$signPopup&&this.$signPopup.is(":visible")&&(this.$signPopup.hide(),this.$signPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$signPopupButton.attr("aria-expanded","false").trigger("focus"))},AblePlayer.prototype.setupPopups=function(t){var e,i;if(e=[],void 0===t&&e.push("prefs"),"captions"!==t&&void 0!==t\|\|this.captions.length>0&&e.push("captions"),"chapters"!==t&&void 0!==t\|\|this.chapters.length>0&&this.useChaptersButton&&e.push("chapters"),"transcript-window"===t&&"popup"===this.transcriptType&&e.push("transcript-window"),"sign-window"===t&&this.hasSignLanguage&&e.push("sign-window"),e.length>0){0;for(var s=0;s<e.length;s++){var a=e[s];if("prefs"==a)this.prefsPopup=this.createPopup("prefs");else if("captions"==a)void 0!==this.captionsPopup&&this.captionsPopup\|\|(this.captionsPopup=this.createPopup("captions",this.captions));else if("chapters"==a)i=this.selectedChapters?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[],void 0!==this.chaptersPopup&&this.chaptersPopup\|\|(this.chaptersPopup=this.createPopup("chapters",i));else{if("transcript-window"==a)return this.createPopup("transcript-window");if("sign-window"==a)return this.createPopup("sign-window")}}}},AblePlayer.prototype.provideFallback=function(){var e,i;if(!this.usingFallback){if(this.usingFallback=!0,this.testFallback\|\|(this.testFallback=1),void 0===this.$media&&(this.$media=t(this.media)),this.$media.attr("id")?this.mediaId=this.$media.attr("id"):this.mediaId="media"+Math.floor(1e9Math.random()).toString(),this.hasFallback=!1,this.$media.children().length)for(e=0;e<this.$media.children().length&&!this.hasFallback;)"SOURCE"!==this.$media.children()[e].tagName&&"TRACK"!==this.$media.children()[e].tagName&&(this.hasFallback=!0),e++;if(this.hasFallback\|\|(i=t("<p>").text("Media player unavailable."),this.$media.append(i)),this.$media.attr("width")&&this.$media.css("width",this.$media.attr("width")+"px"),this.$media.attr("height")&&this.$media.css("height",this.$media.attr("height")+"px"),this.$media.removeAttr("data-able-player"),this.$media.prop("controls",!0),2==this.testFallback){if(t(this.$media).replaceWith(t('<foobar id="foobar-'+this.mediaId+'">')),this.$newFallbackElement=t("#foobar-"+this.mediaId),this.$media.children().length)for(e=this.$media.children().length-1;e>=0;)this.$newFallbackElement.prepend(t(this.$media.children()[e])),e--;this.hasFallback\|\|this.$newFallbackElement.append(i)}}},AblePlayer.prototype.calculateControlLayout=function(){var t,e,i;return(t=[])[0]=[],t[1]=[],"legacy"===this.skin&&(t[2]=[],t[3]=[]),t[0].push("play"),t[0].push("restart"),t[0].push("rewind"),t[0].push("forward"),"legacy"===this.skin&&t[1].push("seek"),this.hasPlaylist&&(this.skin,t[0].push("previous"),t[0].push("next")),this.isPlaybackRateSupported()?(e=!0,"legacy"===this.skin&&(t[2].push("slower"),t[2].push("faster"))):e=!1,i=0,this.hasCaptions&&(i++,"legacy"===this.skin?t[2].push("captions"):t[1].push("captions")),this.hasSignLanguage&&(i++,"legacy"===this.skin?t[2].push("sign"):t[1].push("sign")),"video"===this.mediaType&&(this.hasOpenDesc\|\|this.hasClosedDesc)&&(i++,"legacy"===this.skin?t[2].push("descriptions"):t[1].push("descriptions")),null===this.transcriptType\|\|this.hideTranscriptButton\|\|(i++,"legacy"===this.skin?t[2].push("transcript"):t[1].push("transcript")),this.hasChapters&&this.useChaptersButton&&(i++,"legacy"===this.skin?t[2].push("chapters"):t[1].push("chapters")),"2020"==this.skin&&i>0&&t[1].push("pipe"),e&&"2020"===this.skin&&(t[1].push("faster"),t[1].push("slower"),t[1].push("pipe")),"legacy"===this.skin?t[3].push("preferences"):t[1].push("preferences"),"video"===this.mediaType&&this.allowFullscreen&&this.nativeFullscreenSupported()&&("legacy"===this.skin?t[3].push("fullscreen"):t[1].push("fullscreen")),this.browserSupportsVolume()?(this.volumeButton="volume-"+this.getVolumeName(this.volume),this.skin,t[1].push("volume")):this.volume=!1,t},AblePlayer.prototype.addControls=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v,y,b,P,k,T,w,C,$,D,A,x;e=this,s=(i=this.calculateControlLayout()).length,P=this.mediaId+"-tooltip",this.$tooltipDiv=t("<div>",{id:P,class:"able-tooltip"}).hide(),this.$controllerDiv.append(this.$tooltipDiv),"2020"==this.skin&&(l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.translate("seekbarLabel","timeline"),this.$controllerDiv.append(l),this.seekBar=new AccessibleSlider(l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible"));let S=t('<div class="able-control-row"></div>');for(this.$controllerDiv.append(S),a=0;a<s;a++){for(r=i[a],o=t("<div>",a%2==0?{class:"able-left-controls"}:{class:"able-right-controls"}),S.append(o),n=0;n<r.length;n++){if("seek"===(c=r[n]))l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.translate("seekbarLabel","timeline"),o.append(l),void 0!==this.duration&&0!==this.duration\|\|(this.duration=60,this.elapsed=0),this.seekBar=new AccessibleSlider(l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible");else if("pipe"===c)(p=t("<span>",{tabindex:"-1","aria-hidden":"true",class:"able-pipe"})).append("\|"),o.append(p);else{u=this.getButtonTitle(c),d=t("<div>",{role:"button",tabindex:"0",class:"able-button-handler-"+c}),"volume"!==c&&"preferences"!==c&&"captions"!==c\|\|("preferences"==c?(this.prefCats=this.getPreferencesGroups(),this.prefCats.length>1?(x=this.mediaId+"-prefs-menu",d.attr({"aria-controls":x,"aria-haspopup":"menu","aria-expanded":"false"})):1===this.prefCats.length&&d.attr({"aria-haspopup":"dialog"})):"volume"===c?(x=this.mediaId+"-volume-slider",d.attr({"aria-controls":x,"aria-expanded":"false"})):"captions"===c&&this.captions&&(this.captions.length>1?d.attr("aria-expanded","false"):d.attr("aria-pressed","false")));var I=c;"faster"===c&&"animals"===this.speedIcons&&(I="rabbit"),"slower"===c&&"animals"===this.speedIcons&&(I="turtle"),"volume"===c?this.getIcon(d,this.volumeButton):("fullscreen"===I&&(I=this.fullscreen?"fullscreen-collapse":"fullscreen-expand"),this.getIcon(d,I)),this.setText(d,u),d.on("mouseenter focus",function(i){clearTimeout(D),g=t(this).attr("aria-label"),f=t(this).position(),m=t(this).height(),v=t(this).width(),b=e.$controllerDiv.width(),f.right=b-f.left-v,k=f.top+m+5,y=t(this).parent().hasClass("able-right-controls")?"right":"left",w=AblePlayer.localGetElementById(d[0],P).text(g).width(),"left"==y?((T=f.left-w/2)<0&&(T=2),C={left:T+"px",right:"",top:k+"px"}):((T=f.right-w/2)<0&&(T=2),C={left:"",right:T+"px",top:k+"px"}),$=AblePlayer.localGetElementById(d[0],P).text(g).css(C),e.showTooltip($),t(this).on("mouseleave blur",function(){clearTimeout(D),D=setTimeout(function(){AblePlayer.localGetElementById(d[0],P).text("").hide()},500),e.$tooltipDiv.on("mouseenter focus",function(){clearTimeout(D)}),e.$tooltipDiv.on("mouseleave blur",function(){AblePlayer.localGetElementById(d[0],P).text("").hide()})})}),"captions"===c?this.prefCaptions&&1===this.prefCaptions\|\|(A=this.captions.length>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),d.addClass("buttonOff").attr("title",A),d.attr("aria-pressed","false")):"descriptions"===c&&(this.prefDesc&&1===this.prefDesc\|\|d.addClass("buttonOff").attr("title",this.translate("turnOnDescriptions","Turn on descriptions"))),o.append(d),"play"===c?this.$playpauseButton=d:"previous"==c?(this.$prevButton=d,"previous"==this.buttonWithFocus&&(this.$prevButton.trigger("focus"),this.buttonWithFocus=null)):"next"==c?(this.$nextButton=d,"next"==this.buttonWithFocus&&(this.$nextButton.trigger("focus"),this.buttonWithFocus=null)):"captions"===c?this.$ccButton=d:"sign"===c?(this.$signButton=d,this.$signWindow.is(":visible")\|\|this.$signButton.addClass("buttonOff")):"descriptions"===c?this.$descButton=d:"mute"===c?this.$muteButton=d:"transcript"===c?(this.$transcriptButton=d,this.$transcriptDiv.is(":visible")\|\|this.$transcriptButton.addClass("buttonOff").attr("title",this.translate("showTranscript","Show transcript"))):"fullscreen"===c?this.$fullscreenButton=d:"chapters"===c?this.$chaptersButton=d:"preferences"===c?this.$prefsButton=d:"volume"===c&&(this.$volumeButton=d)}"volume"===c&&this.addVolumeSlider(o)}a%2==1&&this.$controllerDiv.append('<div style="clear:both;"></div>')}for(var N in void 0!==this.$captionsDiv&&this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv),this.controls=[],i)i.hasOwnProperty(N)&&(this.controls=this.controls.concat(i[N]));this.refreshControls()},AblePlayer.prototype.cuePlaylistItem=function(e){var i,s,a,n,r,o,l=this;s=this.player,this.initializing\|\|this.playerCreated&&this.deletePlayer("playlist"),this.swappingSrc=!0,this.startedPlaying?this.okToPlay=!0:this.okToPlay=!1,this.loadingMedia=!1,i=this.$playlist.eq(e),this.hasAttr(i,"data-youtube-id")?(this.youTubeId=this.getYouTubeId(i.attr("data-youtube-id")),this.hasAttr(i,"data-youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(i.attr("data-youtube-desc-id"))),a="youtube"):this.hasAttr(i,"data-vimeo-id")?(this.vimeoId=this.getVimeoId(i.attr("data-vimeo-id")),this.hasAttr(i,"data-vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(i.attr("data-vimeo-desc-id"))),a="vimeo"):a="html5","youtube"===a?"html5"===s&&(this.playing&&this.pauseMedia(),this.$media.hide()):(this.youTubeId=!1,"youtube"===s&&this.$media.show()),this.player=a,this.$media.empty(),this.hasAttr(i,"data-poster")&&this.$media.attr("poster",i.attr("data-poster")),this.hasAttr(i,"data-youtube-desc-id")&&this.$media.attr("data-youtube-desc-id",i.attr("data-youtube-desc-id")),this.youTubeId&&this.$media.attr("data-youtube-id",i.attr("data-youtube-id"));var h=i.children("span.able-source");h.length&&h.each(function(){const e=t(this);if(l.hasAttr(e,"data-src")){const i=DOMPurify.sanitize(e.attr("data-src"));if(validate.isProtocolSafe(i)){const s=t("<source>",{src:i});["data-type","data-desc-src","data-sign-src"].forEach(t=>{if(l.hasAttr(e,t)){const i=e.attr(t),a=DOMPurify.sanitize(i);t.endsWith("-src")&&validate.isProtocolSafe(a)?s.attr(t,a):t.endsWith("-src")\|\|s.attr(t,a)}}),l.$media.append(s)}}});var p=i.children("span.able-track");p.length&&p.each(function(){const e=t(this);if(l.hasAttr(e,"data-src")&&l.hasAttr(e,"data-kind")&&l.hasAttr(e,"data-srclang")){const i=DOMPurify.sanitize(e.attr("data-src"));if(validate.isProtocolSafe(i)){const s=t("<track>",{src:i,kind:e.attr("data-kind"),srclang:e.attr("data-srclang")});["data-label","data-desc","data-default"].forEach(t=>{l.hasAttr(e,t)&&s.attr(t,DOMPurify.sanitize(e.attr(t)))}),l.$media.append(s)}}}),n=DOMPurify.sanitize(i.text()),this.hasAttr(i,"lang")&&(r=i.attr("lang")),this.$sources=this.$media.find("source"),this.recreatingPlayer\|\|this.recreatePlayer().then(function(){l.$playlist.removeClass("able-current").children("button").removeAttr("aria-current"),l.$playlist.eq(e).addClass("able-current").children("button").attr("aria-current","true"),!0===l.showNowPlaying&&void 0!==l.$nowPlayingDiv&&(o=t("<span>"),void 0!==r&&o.attr("lang",r),o.html("<span>"+l.tt.selectedTrack+":</span>"+n),l.$nowPlayingDiv.html(o)),l.initializing?l.swappingSrc=!1:"html5"===l.player?l.loadingMedia\|\|(l.media.load(),l.loadingMedia=!0):"youtube"===l.player&&(l.okToPlay=!0),l.initializing=!1,l.playerCreated=!0})},AblePlayer.prototype.deletePlayer=function(e){"youtube"===this.player&&this.youTubePlayer&&this.youTubePlayer.destroy(),"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.destroy(),this.$controllerDiv.empty(),this.$elapsedTimeContainer.empty().text("0:00"),this.$durationContainer.empty(),this.$signWindow&&this.$signWindow.remove(),this.$transcriptArea&&this.$transcriptArea.remove(),t(".able-modal-dialog").remove(),this.$captionsWrapper&&this.$captionsWrapper.remove(),this.$descDiv&&this.$descDiv.remove(),this.hasCaptions=!1,this.hasChapters=!1,this.hasDescTracks=!1,this.hasOpenDesc=!1,this.hasClosedDesc=!1,this.captionsPopup=null,this.chaptersPopup=null,this.transcriptType=null,this.playerDeleted=!0},AblePlayer.prototype.getButtonTitle=function(t){return"playpause"===t\|\|"play"===t?this.translate("play","Play"):"pause"===t?this.translate("pause","Pause"):"restart"===t?this.translate("restart","Restart"):"previous"===t?this.translate("prevTrack","Previous track"):"next"===t?this.translate("nextTrack","Next track"):"rewind"===t?this.translate("rewind","Rewind"):"forward"===t?this.translate("forward","Forward"):"captions"===t?this.captions.length>1?this.translate("captions","Captions"):this.captionsOn?this.translate("hideCaptions","Hide captions"):this.translate("showCaptions","Show captions"):"descriptions"===t?this.descOn?this.translate("turnOffDescriptions","Turn off descriptions"):this.translate("turnOnDescriptions","Turn on descriptions"):"transcript"===t?this.$transcriptDiv.is(":visible")?this.translate("hideTranscript","Hide transcript"):this.translate("showTranscript","Show transcript"):"chapters"===t?this.translate("chapters","Chapters"):"sign"===t?this.translate("sign","Sign language"):"volume"===t?this.translate("volume","Volume"):"faster"===t?this.translate("faster","Faster"):"slower"===t?this.translate("slower","Slower"):"preferences"===t?this.translate("preferences","Preferences"):"fullscreen"===t?this.fullscreen?this.translate("exitFullScreen","Exit full screen"):this.translate("enterFullScreen","Enter full screen"):(this.debug,this.capitalizeFirstLetter(t))}}(jQuery);var preProcessing={transformCSSClasses:function(t){if(t.length>1e3)throw new Error("Input too long");return t.replace(/<(v\|c\|b\|i\|u\|lang\|ruby)\.([\w\.]+)([^>])>/g,function(t,e,i,s){return`<${e} class="${i.replace(/\./g," ")}"${s}>`})},transformLangTags:function(t){return t.replace(/<lang\s+([\w-]+)([^>])>/g,function(t,e,i){return'<lang lang="'+e+'"'+i+">"})},transformVTags:function(t){return t.replace(/<v\s+([^>]?)>/g,function(t,e){var i=e.match(/class="([^"])"/),s=i?i[0]:"",a=e.replace(/class="[^"]"/,"").trim().split(/\s+/),n=[],r=[];a.forEach(function(t){-1!==t.indexOf("=")?n.push(t):r.push(t)});var o=r.join(" "),l="<v";return o&&(l+=' title="'+o+'"'),n.length>0&&(l+=" "+n.join(" ")),s&&(l+=" "+s),l+=">"})}},postProcessing={postprocessCTag:function(t){return t.replace(/<c class="([\w\s]+)">/g,function(t,e){return"<c."+e.replace(/ /g,".")+">"})},postprocessVTag:function(t){return t.replace(/<v([^>])class="([\w\s]+)"([^>])>/g,function(t,e,i,s){var a=i.trim().split(/\s+/).join("."),n=(e+s).replace(/\sclass="[\w\s]+"/,"").trim();return"<v."+a+(n?" "+n:"")+">"})},postprocessLangTag:function(t){return t.replace(/<lang lang="([\w-]+)"([^>])>/g,function(t,e,i){return"<lang "+e+i+">"})}},validate={preProcessVttContent:function(t){var e=preProcessing.transformCSSClasses(t),i=preProcessing.transformLangTags(e);return preProcessing.transformVTags(i)},postProcessVttContent:function(t,e){var i=postProcessing.postprocessCTag(t),s=postProcessing.postprocessVTag(i);return postProcessing.postprocessLangTag(s).replace(/-->/g,"--\x3e").replace(/<([\d:.]+)>/g,"<$1>").replace(/<\/v>/g,function(t,i){return-1!==e.indexOf(t,i)?t:""})},sanitizeVttContent:function(t){if(null==t)return"";var e=validate.preProcessVttContent(t),i=DOMPurify.sanitize(e,{ALLOWED_TAGS:["b","i","u","v","c","lang","ruby","rt","rp"],ALLOWED_ATTR:["title","class","lang"],KEEP_CONTENT:!0});return validate.postProcessVttContent(i,t)},isProtocolSafe:function(t){try{const e=new URL(t,window.location.origin);return["http:","https:"].includes(e.protocol)}catch(t){return!1}}};"undefined"!=typeof module&&module.exports&&(module.exports=validate),function(t){AblePlayer.prototype.setupTracks=function(){var e,i,s,a,n,r,o,l,h;for(e=this,s=(i=new this.defer).promise(),a=[],t("#able-vts").length?(this.vtsTracks=[],this.hasVts=!0):this.hasVts=!1,o=this.hasDescTracks&&this.descOn?this.altTracks:this.tracks,r=0;r<o.length;r++)if(h=(l=o[r]).kind?l.kind:"subtitles",l.src){var p=l.src;n=this.loadTextObject(p),a.push(n.catch(function(t){})),n.then(function(t,i){p=t.src;var s=t.language,a=t.label,n=t.desc;return function(r){var o=e.parseWebVTT(r).cues;e.hasVts&&e.setupVtsTracks(i,s,n,a,p,r.text),"captions"===i\|\|"subtitles"===i?e.setupCaptions(t,o):"descriptions"===i?e.setupDescriptions(t,o):"chapters"===i?e.setupChapters(t,o):"metadata"===i&&e.setupMetadata(o)}}(l,h))}else(e.usingYouTubeCaptions\|\|e.usingVimeoCaptions)&&e.setupCaptions(l);return e.usingYouTubeCaptions\|\|e.usingVimeoCaptions?i.resolve():t.when.apply(t,a).then(function(){i.resolve()}),s},AblePlayer.prototype.getTracks=function(){var e,i,s,a,n,r,o,l,h,p,c;return e=this,l=!1,s=(i=new this.defer).promise(),this.$tracks=this.$media.find("track"),this.tracks=[],this.altTracks=[],this.captions=[],this.descriptions=[],this.chapters=[],this.meta=[],this.hasCaptionsTrack=!1,this.hasDescTracks=!1,this.$tracks.length&&(this.usingYouTubeCaptions=!1,this.$tracks.each(function(i,s){if("captions"===t(this).attr("kind")?e.hasCaptionsTrack=!0:"descriptions"===t(this).attr("kind")&&(e.hasClosedDesc=!0),a=t(this).attr("srclang")?t(this).attr("srclang"):e.lang,n=t(this).attr("label")?t(this).attr("label"):e.getLanguageName(a),void 0===t(this).attr("default")\|\|l?a===e.lang?(h=!0,r=!1):r=!1:(r=!0,l=!0),r&&(e.captionLang=a),void 0!==t(this).data("desc")?(o=!0,e.hasDescTracks=!0):o=!1,o?e.altTracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}):e.tracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}),i==e.$tracks.length-1){if(!l)if(h)for(e.captionLang=e.lang,p=!1,c=0;c<e.tracks.length&&!p;)e.tracks[c].language===e.lang&&(e.tracks[c].def=!0,p=!0),c++;else e.tracks[0].def=!0,e.captionLang=e.tracks[0].language;e.$media.find("track").removeAttr("default")}})),this.$tracks.length&&this.hasCaptionsTrack?i.resolve():"youtube"===this.player?this.getYouTubeCaptionTracks().then(function(){e.hasCaptions&&(e.usingYouTubeCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()}):"vimeo"===this.player?this.getVimeoCaptionTracks().then(function(){e.hasCaptions&&(e.usingVimeoCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()}):(this.hasCaptions=!1,e.$captionsWrapper&&e.$captionsWrapper.remove(),i.resolve()),s},AblePlayer.prototype.setupCaptions=function(e,i){var s,a;if(void 0===i&&(i=null),this.usingYouTubeCaptions\|\|this.usingVimeoCaptions);else if(0===this.captions.length)this.captions.push({language:e.language,label:e.label,def:e.def,cues:i});else{for(s=!1,a=0;a<this.captions.length;a++)if(e.label.toLowerCase()<this.captions[a].label.toLowerCase()){this.captions.splice(a,0,{language:e.language,label:e.label,def:e.def,cues:i}),s=!0;break}s\|\|this.captions.push({language:e.language,label:e.label,def:e.def,cues:i})}this.hasCaptions=!0,this.currentCaption=-1,1===this.prefCaptions?this.captionsOn=!0:0===this.prefCaptions?this.captionsOn=!1:1===this.defaultStateCaptions?this.captionsOn=!0:this.captionsOn=!1,"audio"===this.mediaType&&this.captionsOn&&this.$captionsContainer.removeClass("captions-off"),(!this.$captionsWrapper\|\|this.$captionsWrapper&&!t.contains(this.$ableDiv[0],this.$captionsWrapper[0]))&&(this.$captionsDiv=t("<div>",{class:"able-captions"}),this.$captionsWrapper=t("<div>",{class:"able-captions-wrapper","aria-hidden":"true"}).hide(),"below"===this.prefCaptionsPosition?this.$captionsWrapper.addClass("able-captions-below"):this.$captionsWrapper.addClass("able-captions-overlay"),this.$captionsWrapper.append(this.$captionsDiv),this.$captionsContainer.append(this.$captionsWrapper))},AblePlayer.prototype.setupDescriptions=function(t,e){this.hasClosedDesc=!0,this.currentDescription=-1,this.descriptions.push({cues:e,language:t.language})},AblePlayer.prototype.setupChapters=function(t,e){this.hasChapters=!0,this.chapters.push({cues:e,language:t.language})},AblePlayer.prototype.setupMetadata=function(e){"text"===this.metaType?this.metaDiv&&t("#"+this.metaDiv)&&(this.$metaDiv=t("#"+this.metaDiv),this.hasMeta=!0,this.meta=e):"selector"===this.metaType&&(this.hasMeta=!0,this.visibleSelectors=[],this.meta=e)},AblePlayer.prototype.loadTextObject=function(e){var i,s,a,n;return s=(i=new this.defer).promise(),a=this,n=t("<div>",{style:"display:none"}),fetch(e).then(t=>t.text()).then(t=>{var s,a=t.split(/\r?\n\s\r?\n/),r="";a.forEach(t=>{s=validate.sanitizeVttContent(t),r+=s+"\n\n"}),n.html(r);let o={src:e,text:r};i.resolve(o),n.remove()}).catch(t=>{a.debug,i.reject(e),n.remove()}),s}}(jQuery),function(t){AblePlayer.prototype.initYouTubePlayer=function(){var e,i,s,a;return e=this,s=(i=new this.defer).promise(),this.youTubePlayerReady=!1,a=this.youTubeDescId&&this.prefDesc?this.youTubeDescId:this.youTubeId,this.activeYouTubeId=a,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeInit().then(function(){i.resolve()}):(AblePlayer.loadingYouTubeIframeAPI\|\|e.getScript("https://www.youtube.com/iframe_api",function(){}),t("body").on("youTubeIframeAPIReady",function(){e.finalizeYoutubeInit().then(function(){i.resolve()})})),s},AblePlayer.prototype.finalizeYoutubeInit=function(){var e,i,s,a,n;return i=(e=new this.defer).promise(),s=this,a=this.mediaId+"_youtube",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.okToPlay?1:0,void 0===this.captionLang&&(this.captionLang=this.lang),this.youTubePlayer=new YT.Player(a,{videoId:this.activeYouTubeId,host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,cc_lang_pref:this.captionLang,cc_load_policy:1,controls:0,disableKb:1,enablejsapi:1,hl:this.lang,iv_load_policy:3,origin:window.location.origin,playsinline:this.playsInline,rel:0,start:this.startTime},events:{onReady:function(){s.youTubePlayerReady=!0,s.playerWidth&&s.playerHeight\|\|s.getYouTubeDimensions(),s.playerWidth&&s.playerHeight&&s.youTubePlayer.setSize(s.playerWidth,s.playerHeight),s.swappingSrc&&(s.swappingSrc=!1,s.restoreFocus(),s.cueingPlaylistItem=!1,(s.playing\|\|s.okToPlay)&&s.playMedia()),s.userClickedPlaylist&&(s.userClickedPlaylist=!1),s.recreatingPlayer&&(s.recreatingPlayer=!1),e.resolve()},onError:function(t){e.reject()},onStateChange:function(t){s.getPlayerState().then(function(t){"playing"===t?(s.hasSignLanguage&&s.signVideo&&s.signVideo.play(!0),s.playing=!0,s.startedPlaying=!0,s.paused=!1):"ended"==t?s.onMediaComplete():(s.playing=!1,s.paused=!0),s.stoppingYouTube&&"paused"===t&&(s.hasSignLanguage&&s.signVideo&&s.signVideo.pause(!0),void 0!==s.$posterImg&&s.$posterImg.show(),s.stoppingYouTube=!1,s.seeking=!1,s.playing=!1,s.paused=!0)}),"youtube"!==s.player\|\|s.usingYouTubeCaptions\|\|s.youTubePlayer.getOptions("captions")&&s.youTubePlayer.unloadModule("captions")},onApiChange:function(){s.duration=s.youTubePlayer.getDuration()},onPlaybackQualityChange:function(){}}}),this.hasPlaylist\|\|this.$media.remove(),i},AblePlayer.prototype.getYouTubeDimensions=function(t){var e,i,s;void 0!==(e=this.$ableWrapper.find("iframe"))&&e.prop("width")&&(i=e.prop("width"),e.prop("height")&&(s=e.prop("height"),this.resizePlayer(i,s)))},AblePlayer.prototype.getYouTubeCaptionTracks=function(){var t,e,i,s,a,n,r=new this.defer,o=r.promise(),l=!1;return t=this,this.youTubePlayer.getOption("captions","tracklist")\|\|(this.youTubePlayer.addEventListener("onApiChange",function(){if(l=!0,t.duration=t.youTubePlayer.getDuration(),t.loadingYouTubeCaptions){if(e=t.youTubePlayer.getOption("captions","tracklist"),t.okToPlay\|\|t.youTubePlayer.pauseVideo(),e&&e.length){for(i=0;i<e.length;i++)s=e[i].languageCode,a=e[i].languageName,n=!1,(void 0!==t.captionLang&&s===t.captionLang\|\|void 0!==t.lang&&s===t.lang)&&(n=!0),t.tracks.push({kind:"captions",language:s,label:a,def:n}),t.captions.push({language:s,label:a,def:n,cues:null});t.hasCaptions=!0,t.setupPopups("captions")}else t.usingYouTubeCaptions=!1,t.hasCaptions=!1;t.loadingYouTubeCaptions=!1,t.okToPlay&&t.youTubePlayer.playVideo()}t.captionLangPending&&(t.youTubePlayer.setOption("captions","track",{languageCode:t.captionLangPending}),t.captionLangPending=null),void 0!==t.prefCaptionsSize&&t.youTubePlayer.setOption("captions","fontSize",t.translatePrefs("size",t.prefCaptionsSize,"youtube")),r.resolve()}),this.loadingYouTubeCaptions=!0,this.youTubePlayer.playVideo(),setTimeout(()=>{l\|\|setTimeout(()=>{t.youTubePlayer.pauseVideo(),r.resolve()},500)},500)),o},AblePlayer.prototype.getYouTubePosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+t;return"120"==e?i+"/default.jpg":"320"==e?i+"/mqdefault.jpg":"480"==e?i+"/hqdefault.jpg":"640"==e?i+"/sddefault.jpg":"1280"==e?i+"/hq720.jpg":"1920"==e&&i+"/maxresdefault.jpg"},AblePlayer.prototype.getYouTubeId=function(t){var e;return-1!==t.indexOf("youtu")?(e=(t=t.trim()).length-11,t.substring(e)):t}}(jQuery),function(t){window.AccessibleSlider=function(e,i,s,a,n,r,o,l,h,p){var c,u;c=this,this.position=0,this.tracking=!1,this.trackDevice=null,this.keyTrackPosition=0,this.lastTrackPosition=0,this.nextStep=1,this.inertiaCount=0,this.bodyDiv=t(e),h&&(this.loadedDiv=t("<div></div>"),this.playedDiv=t("<div></div>")),this.seekHead=t("<div>",{"aria-orientation":i,class:"able-"+l+"-head"}),"visible"===p?this.seekHead.attr("tabindex","0"):this.seekHead.attr("tabindex","-1"),this.seekHead.attr({role:"slider","aria-label":o,"aria-valuemin":a,"aria-valuemax":n}),this.timeTooltipTimeoutId=null,this.overTooltip=!1,this.timeTooltip=t("<div>"),this.bodyDiv.append(this.timeTooltip),this.timeTooltip.attr("role","tooltip"),this.timeTooltip.addClass("able-tooltip"),this.timeTooltip.on("mouseenter focus",function(){c.overTooltip=!0,clearInterval(c.timeTooltipTimeoutId)}),this.timeTooltip.on("mouseleave blur",function(){c.overTooltip=!1,t(this).hide()}),this.timeTooltip.hide(),this.bodyDiv.append(this.loadedDiv),this.bodyDiv.append(this.playedDiv),this.bodyDiv.append(this.seekHead),this.bodyDiv.wrap("<div></div>"),this.wrapperDiv=this.bodyDiv.parent(),"legacy"===this.skin&&("horizontal"===i?(this.wrapperDiv.width(s),this.loadedDiv.width(0)):(this.wrapperDiv.height(s),this.loadedDiv.height(0))),this.wrapperDiv.addClass("able-"+l+"-wrapper"),h&&(this.loadedDiv.addClass("able-"+l+"-loaded"),this.playedDiv.width(0),this.playedDiv.addClass("able-"+l+"-played"),this.setDuration(n)),this.seekHead.on("mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend",function(t){u=c.pointerEventToXY(t),"mouseenter"===t.type\|\|"focus"===t.type?c.overHead=!0:"mouseleave"===t.type\|\|"blur"===t.type?(c.overHead=!1,!c.overBody&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x))):"mousemove"===t.type\|\|"touchmove"===t.type?c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x):"mousedown"===t.type\|\|"touchstart"===t.type?(c.startTracking("mouse",c.pageXToPosition(c.seekHead.offset()+c.seekHead.width()/2)),c.bodyDiv.is(":focus")\|\|c.bodyDiv.focus(),t.preventDefault()):"mouseup"!==t.type&&"touchend"!==t.type\|\|c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x)),"mousemove"!==t.type&&"mousedown"!==t.type&&"mouseup"!==t.type&&"touchstart"!==t.type&&"touchend"!==t.type&&c.refreshTooltip()}),this.bodyDiv.on("mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend",function(t){if(2==t.button&&"mousedown"==t.type)return;u=c.pointerEventToXY(t);let e=t.key;if("mouseenter"===t.type)c.overBody=!0,c.overBodyMousePos={x:u.x,y:u.y};else if("mouseleave"===t.type)c.overBody=!1,c.overBodyMousePos=null,!c.overHead&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("mousemove"===t.type\|\|"touchmove"===t.type)c.overBodyMousePos={x:u.x,y:u.y},c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x);else if("mousedown"===t.type\|\|"touchstart"===t.type)c.startTracking("mouse",c.pageXToPosition(u.x)),c.trackHeadAtPageX(u.x),c.seekHead.is(":focus")\|\|c.seekHead.focus(),t.preventDefault();else if("mouseup"===t.type\|\|"touchend"===t.type)c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("keydown"===t.type){if("Home"===t.key)c.trackImmediatelyTo(0);else if("End"===t.key)c.trackImmediatelyTo(c.duration);else if("ArrowLeft"===t.key\|\|"ArrowDown"===t.key)c.arrowKeyDown(-1);else if("ArrowRight"===t.key\|\|"ArrowUp"===t.key)c.arrowKeyDown(1);else if("PageUp"===t.key&&r>0)c.arrowKeyDown(r);else{if(!("PageDown"===t.key&&r>0))return;c.arrowKeyDown(-r)}t.preventDefault()}else"keyup"===t.type&&e===t.key&&(c.tracking&&"keyboard"===c.trackDevice&&c.stopTracking(c.keyTrackPosition),t.preventDefault());c.overTooltip\|\|"mouseup"===t.type\|\|"keydown"===t.type\|\|"keydown"===t.type\|\|c.refreshTooltip()})},AccessibleSlider.prototype.arrowKeyDown=function(t){this.tracking&&"keyboard"===this.trackDevice?(this.keyTrackPosition=this.boundPos(this.keyTrackPosition+this.nextStept),this.inertiaCount+=1,20===this.inertiaCount&&(this.inertiaCount=0,this.nextStep=2),this.trackHeadAtPosition(this.keyTrackPosition)):(this.nextStep=1,this.inertiaCount=0,this.keyTrackPosition=this.boundPos(this.position+this.nextStept),this.startTracking("keyboard",this.keyTrackPosition),this.trackHeadAtPosition(this.keyTrackPosition))},AccessibleSlider.prototype.pageXToPosition=function(t){var e=t-this.bodyDiv.offset().left,i=this.duration(e/this.bodyDiv.width());return this.boundPos(i)},AccessibleSlider.prototype.boundPos=function(t){return Math.max(0,Math.min(t,this.duration))},AccessibleSlider.prototype.setDuration=function(t){t!==this.duration&&(this.duration=t,this.resetHeadLocation(),this.seekHead.attr("aria-valuemax",t))},AccessibleSlider.prototype.setWidth=function(t){this.wrapperDiv.width(t),this.resizeDivs(),this.resetHeadLocation()},AccessibleSlider.prototype.getWidth=function(){return this.wrapperDiv.width()},AccessibleSlider.prototype.resizeDivs=function(){this.playedDiv.width(this.bodyDiv.width()(this.position/this.duration)),this.loadedDiv.width(this.bodyDiv.width()this.buffered)},AccessibleSlider.prototype.resetHeadLocation=function(){var t=this.position/this.duration,e=this.bodyDiv.width()t;this.seekHead.css("left",e-this.seekHead.width()/2),this.tracking&&this.stopTracking(this.position)},AccessibleSlider.prototype.setPosition=function(t,e){this.position=t,this.resetHeadLocation(),this.overHead&&this.refreshTooltip(),this.resizeDivs(),this.updateAriaValues(t,e)},AccessibleSlider.prototype.setBuffered=function(t){isNaN(t)\|\|(this.buffered=t,this.redrawDivs)},AccessibleSlider.prototype.startTracking=function(t,e){this.tracking\|\|(this.trackDevice=t,this.tracking=!0,this.bodyDiv.trigger("startTracking",[e]))},AccessibleSlider.prototype.stopTracking=function(t){this.trackDevice=null,this.tracking=!1,this.bodyDiv.trigger("stopTracking",[t]),this.setPosition(t,!0)},AccessibleSlider.prototype.trackHeadAtPageX=function(t){var e=this.pageXToPosition(t),i=t-this.bodyDiv.offset().left-this.seekHead.width()/2;i=Math.max(0,Math.min(i,this.bodyDiv.width()-this.seekHead.width())),this.lastTrackPosition=e,this.seekHead.css("left",i),this.reportTrackAtPosition(e)},AccessibleSlider.prototype.trackHeadAtPosition=function(t){var e=t/this.duration,i=this.bodyDiv.width()e;this.lastTrackPosition=t,this.seekHead.css("left",i-this.seekHead.width()/2),this.reportTrackAtPosition(t)},AccessibleSlider.prototype.reportTrackAtPosition=function(t){this.bodyDiv.trigger("tracking",[t]),this.updateAriaValues(t,!0)},AccessibleSlider.prototype.updateAriaValues=function(e,i){var s,a=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),o=1===n?"minute":"minutes",l=1===r?"second":"seconds";s=a>0?a+" "+(1===a?"hour":"hours")+", "+n+" "+o+", "+r+" "+l:n>0?n+" "+o+", "+r+" "+l:r+" "+l,this.liveAriaRegion\|\|(this.liveAriaRegion=t("<span>",{class:"able-offscreen","aria-live":"polite"}),this.wrapperDiv.append(this.liveAriaRegion)),i&&this.liveAriaRegion.text()!==s&&this.liveAriaRegion.text(s),this.seekHead.attr("aria-valuetext",s),this.seekHead.attr("aria-valuenow",Math.floor(e).toString())},AccessibleSlider.prototype.trackImmediatelyTo=function(t){this.startTracking("keyboard",t),this.trackHeadAtPosition(t),this.keyTrackPosition=t},AccessibleSlider.prototype.refreshTooltip=function(){if(this.overHead)this.timeTooltip.show(),this.tracking?this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)):this.timeTooltip.text(this.positionToStr(this.position)),this.setTooltipPosition(this.seekHead.position().left+this.seekHead.width()/2);else if(this.overBody&&this.overBodyMousePos)this.timeTooltip.show(),this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))),this.setTooltipPosition(this.overBodyMousePos.x-this.bodyDiv.offset().left);else{clearTimeout(this.timeTooltipTimeoutId);var t=this;this.timeTooltipTimeoutId=setTimeout(function(){t.timeTooltip.hide()},500)}},AccessibleSlider.prototype.hideSliderTooltips=function(){this.overHead=!1,this.overBody=!1,this.timeTooltip.hide()},AccessibleSlider.prototype.setTooltipPosition=function(t){this.timeTooltip.css({left:t-this.timeTooltip.width()/2-10,bottom:this.seekHead.height()})},AccessibleSlider.prototype.positionToStr=function(t){var e=Math.floor(t/3600),i=Math.floor(t/60)%60,s=Math.floor(t%60);return s<10&&(s="0"+s),e>0?(i<10&&(i="0"+i),e+":"+i+":"+s):i+":"+s},AccessibleSlider.prototype.pointerEventToXY=function(t){var e={x:0,y:0};if("touchstart"==t.type\|\|"touchmove"==t.type\|\|"touchend"==t.type\|\|"touchcancel"==t.type){var i=t.originalEvent.touches[0]\|\|t.originalEvent.changedTouches[0];e.x=i.pageX,e.y=i.pageY}else"mousedown"!=t.type&&"mouseup"!=t.type&&"mousemove"!=t.type&&"mouseover"!=t.type&&"mouseout"!=t.type&&"mouseenter"!=t.type&&"mouseleave"!=t.type\|\|(e.x=t.pageX,e.y=t.pageY);return e}}(jQuery),function(t){AblePlayer.prototype.addVolumeSlider=function(e){var i,s,a,n,r,o;i=this,s=this.mediaId+"-volume-slider",a=this.mediaId+"-volume-help",this.$volumeSlider=t("<div>",{id:s,class:"able-volume-slider","aria-hidden":"true"}).hide(),this.$volumeSliderTooltip=t("<div>",{class:"able-tooltip",role:"tooltip"}).hide(),this.$volumeRange=t("<input>",{type:"range",min:"0",max:"10",step:"1",orient:"vertical","aria-label":this.translate("volumeUpDown","Volume up down"),value:this.volume}),n=parseInt(i.volume)/10100,this.$volumeHelp=t("<div>",{id:a,class:"able-volume-help","aria-live":"polite"}).text(n+"%"),r=this.$volumeButton.attr("aria-label"),this.$volumeButton.attr("aria-label",r+" "+n+"%"),this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp),o=this.$volumeButton.parents(".able-control-row")[0],this.$volumeSlider.css("bottom",o.offsetHeight),e.append(this.$volumeSlider),this.$volumeRange.on("change",function(e){i.handleVolumeChange(t(this).val())}),this.$volumeRange.on("input",function(e){i.handleVolumeChange(t(this).val())}),this.$volumeRange.on("keydown",function(t){"Escape"!==t.key&&"Tab"!==t.key&&"Enter"!==t.key\|\|(i.$volumeSlider.is(":visible")?(i.closingVolume=!0,i.hideVolumePopup()):i.closingVolume\|\|i.showVolumePopup())})},AblePlayer.prototype.refreshVolumeHelp=function(t){var e;e=t/10100,this.$volumeHelp&&this.$volumeHelp.text(e+"%"),this.$volumeRange.attr("value",t)},AblePlayer.prototype.refreshVolumeButton=function(t){var e,i,s;e=this.getVolumeName(t),i=t/10100,s=this.translate("volume","Volume")+" "+i+"%",this.getIcon(this.$volumeButton,"volume-"+e),this.$volumeButton.attr("aria-label",s)},AblePlayer.prototype.handleVolumeButtonClick=function(){this.$volumeSlider.is(":visible")?this.hideVolumePopup():this.showVolumePopup()},AblePlayer.prototype.handleVolumeKeystroke=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleVolumeChange=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleMute=function(){this.isMuted()?this.setMute(!1):this.setMute(!0)},AblePlayer.prototype.showVolumePopup=function(){this.closePopups(),this.$tooltipDiv.hide(),this.$volumeSlider.show().attr("aria-hidden","false"),this.$volumeButton.attr("aria-expanded","true"),this.$volumeButton.focus(),this.waitThenFocus(this.$volumeRange)},AblePlayer.prototype.hideVolumePopup=function(){var t=this;this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus(),setTimeout(function(){t.closingVolume=!1},1e3)},AblePlayer.prototype.isMuted=function(){return"html5"===this.player?this.media.muted:"youtube"===this.player?this.youTubePlayer.isMuted():void 0},AblePlayer.prototype.setMute=function(t){t?(this.lastVolume=this.volume,this.volume=0):void 0!==this.lastVolume&&(this.volume=this.lastVolume),"html5"===this.player?this.media.muted=t:"youtube"===this.player&&(t?this.youTubePlayer.mute():this.youTubePlayer.unMute()),this.setVolume(this.volume),this.refreshVolumeHelp(this.volume),this.refreshVolumeButton(this.volume)},AblePlayer.prototype.setVolume=function(t){var e;this.syncSignVideo({volume:0}),"html5"===this.player?(e=t/10,this.media.volume=e):"youtube"===this.player?(e=10t,this.youTubePlayer.setVolume(e),this.volume=t):"vimeo"===this.player&&(e=t/10,this.vimeoPlayer.setVolume(e).then(function(){})),this.lastVolume=t},AblePlayer.prototype.getVolume=function(t){return"html5"===this.player?10this.media.volume:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getVolume()/10:"vimeo"===this.player?this.volume:void 0},AblePlayer.prototype.getVolumeName=function(t){return 0==t?"mute":10==t?"loud":t<5?"soft":"medium"}}(jQuery),function(t){var e="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]";window.AccessibleDialog=function(i,s,a,n){this.title=a,this.closeButtonLabel=n,this.focusedElementBeforeModal=s,this.baseId=t(i).attr("id")\|\|Math.floor(1e9Math.random()).toString();var r=this,o=i;this.modal=o,o.addClass("able-modal-dialog");var l=t("<button>",{class:"modalCloseButton",title:r.closeButtonLabel,"aria-label":r.closeButtonLabel}).text("×");l.on("keydown",function(t){" "===t.key&&r.hide()}).on("click",function(){r.hide()});var h=t("<h1></h1>");h.attr("id","modalTitle-"+this.baseId),h.text(a),this.titleH1=h,o.attr({"aria-labelledby":"modalTitle-"+this.baseId});var p=t("<div>",{class:"able-modal-header"});p.prepend(h),p.prepend(l),o.prepend(p),o.attr({"aria-hidden":"true",role:"dialog","aria-modal":"true"}),o.on("keydown",function(i){if("Escape"===i.key)r.hide(),i.preventDefault();else if("Tab"===i.key){var s=o.find("").filter(e).filter(":visible");if(0===s.length)return;var a=t(":focus"),n=s.index(a);i.shiftKey?0===n&&(s.get(s.length-1).trigger("focus"),i.preventDefault()):n===s.length-1&&(s.get(0).trigger("focus"),i.preventDefault())}i.stopPropagation()}),t("body").hasClass("able-modal-active")&&(t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("inert"),t("body").removeClass("able-modal-active"))},AccessibleDialog.prototype.show=function(){if(!this.overlay){var i=t("<div></div>").attr({class:"able-modal-overlay",tabindex:"-1"});this.overlay=i,t("body").append(i),i.on("mousedown.accessibleModal",function(t){t.preventDefault(),s.hide()})}t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").attr("inert",!0),t("body").addClass("able-modal-active"),this.overlay.css("display","block"),this.modal.css("display","block"),this.modal.attr({"aria-hidden":"false",tabindex:"-1"}),0===this.modal.find("").filter(e).filter(":visible").length&&this.focusedElementBeforeModal.blur();var s=this;setTimeout(function(){s.modal.find("button.modalCloseButton").first().trigger("focus")},300)},AccessibleDialog.prototype.hide=function(){this.overlay&&this.overlay.css("display","none"),this.modal.css("display","none"),this.modal.attr("aria-hidden","true"),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("inert"),t("body").removeClass("able-modal-active"),this.focusedElementBeforeModal.trigger("focus")},AccessibleDialog.prototype.getInputs=function(){return!!this.modal&&this.modal.find("input")}}(jQuery),function(t){AblePlayer.prototype.getNextHeadingLevel=function(e){var i,s,a,n;return e.parents().each(function(){if(i=t(this).children(":header"),s=i.length)return a=i.eq(s-1).prop("tagName"),!1}),void 0===a?n=1:(n=parseInt(a[1]),(n+=1)>6&&(n=6)),n},AblePlayer.prototype.countProperties=function(t){var e,i;for(i in e=0,t)t.hasOwnProperty(i)&&++e;return e},AblePlayer.prototype.formatSecondsAsColonTime=function(t,e){var i,s,a,n,r,o,l;if(e)if(2===(n=t.toString().split(".")).length){if((r=n[1]).length<3)for(o=3-r.length,l=1;l<=o;l++)r+="0"}else r="000";return i=Math.floor(t/3600),s=Math.floor(t/60)%60,(a=Math.floor(t%60))<10&&(a="0"+a),i>0?(s<10&&(s="0"+s),e?i+":"+s+":"+a+"."+r:i+":"+s+":"+a):e?(i<1?i="00":i<10&&(i="0"+i),s<1?s="00":s<10&&(s="0"+s),i+":"+s+":"+a+"."+r):s+":"+a},AblePlayer.prototype.getSecondsFromColonTime=function(t){var e;return 3===(e=t.split(":")).length?3600parseInt(e[0])+60parseInt(e[1])+parseFloat(e[2]):2===e.length?60parseInt(e[0])+parseFloat(e[1]):1===e.length?parseFloat(e[0]):void 0},AblePlayer.prototype.capitalizeFirstLetter=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},AblePlayer.prototype.roundDown=function(t,e){return Number(Math.floor(t+"e"+e)+"e-"+e)},AblePlayer.prototype.defer=function(){const t=this,e=new Promise((i,s)=>{t.resolve=i,t.reject=s,t.promise=()=>e})},AblePlayer.prototype.getScript=function(t,e){var i=document.createElement("script"),s=document.getElementsByTagName("script")[0];i.async=1,i.onload=i.onreadystatechange=function(t,s){(s\|\|!i.readyState\|\|/loaded\|complete/.test(i.readyState))&&(i.onload=i.onreadystatechange=null,i=void 0,!s&&e&&setTimeout(e,0))},i.src=t,s.parentNode.insertBefore(i,s)},AblePlayer.prototype.hasAttr=function(t,e){var i=t.attr(e);return void 0!==i&&!1!==i}}(jQuery),function(t){AblePlayer.prototype.initDescription=function(){var t,e;return e=(t=new this.defer).promise(),"audio"===this.mediaType&&t.resolve(),this.descFile=this.$sources.first().attr("data-desc-src"),void 0!==this.descFile?this.hasOpenDesc=!0:this.hasOpenDesc=!(!this.youTubeDescId&&!this.vimeoDescId),this.descMethod=null,this.hasOpenDesc&&this.hasClosedDesc?this.descMethod=this.prefDescMethod?this.prefDescMethod:"video":this.hasOpenDesc?this.descMethod="video":this.hasClosedDesc&&(this.descMethod="text"),this.descOn=!1,this.descMethod&&(1===this.prefDesc?this.descOn=!0:0===this.prefDesc?this.descOn=!1:this.descOn=1===this.defaultStateDescriptions),void 0===this.$descDiv&&this.hasClosedDesc&&this.injectTextDescriptionArea(),this.descOn?("video"!==this.descMethod\|\|this.usingDescribedVersion()\|\|this.swapDescription(),this.hasClosedDesc&&(this.prefDescVisible?void 0!==this.$descDiv&&(this.$descDiv.show(),this.$descDiv.removeClass("able-offscreen")):void 0!==this.$descDiv&&this.$descDiv.addClass("able-offscreen"))):"video"===this.descMethod?this.usingDescribedVersion()&&this.swapDescription():"text"===this.descMethod&&void 0!==this.$descDiv&&(this.$descDiv.hide(),this.$descDiv.removeClass("able-offscreen")),t.resolve(),e},AblePlayer.prototype.usingDescribedVersion=function(){return"youtube"===this.player?this.activeYouTubeId===this.youTubeDescId:"vimeo"===this.player?this.activeVimeoId===this.vimeoDescId:this.$sources.first().attr("data-desc-src")===this.$sources.first().attr("src")},AblePlayer.prototype.initSpeech=function(e){var i=this;function attemptEnableSpeech(){var t=new SpeechSynthesisUtterance(" ");t.onend=function(){i.getBrowserVoices(),(Array.isArray(i.descVoices)&&i.descVoices.length\|\|"init"!==e)&&(i.speechEnabled=!0)},i.synth.speak(t)}null===this.speechEnabled&&(window.speechSynthesis?(this.synth=window.speechSynthesis,this.synth.cancel(),"init"===e?(attemptEnableSpeech(),t(document).on("click",function handleInitialClick(){attemptEnableSpeech(),t(document).off("click",handleInitialClick)})):attemptEnableSpeech()):this.speechEnabled=!1)},AblePlayer.prototype.getBrowserVoices=function(){var t,e,i,s;if(s=this.captionLang?this.captionLang.substring(0,2).toLowerCase():this.lang.substring(0,2).toLowerCase(),this.descVoices=[],t=this.synth.getVoices(),e=this.getDescriptionLangs(),t.length>0){this.descVoices=[];for(var a=0;a<t.length;a++)(i=t[a].lang.substring(0,2).toLowerCase())===s&&-1!==e.indexOf(i)&&this.descVoices.push(t[a]);this.descVoices.length\|\|(this.descVoices=t)}return!1},AblePlayer.prototype.getDescriptionLangs=function(){var t=[];if(this.tracks)for(var e=0;e<this.tracks.length;e++)"descriptions"===this.tracks[e].kind&&t.push(this.tracks[e].language.substring(0,2).toLowerCase());return t},AblePlayer.prototype.setDescriptionVoice=function(){var t,e,i,s,a;if(e=void 0!==this.getPref().voices?this.getPrefDescVoice():null,this.getBrowserVoices(),this.rebuildDescPrefsForm(),s=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,this.synth&&(t=this.synth.getVoices()).length>0){if(e){a=!1;for(var n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()&&t[n].name===e){i=t[n].name,a=!0;break}}if(!a)for(n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()){i=t[n].name;break}this.prefDescVoice=i,this.prefDescVoiceLang=s,this.$voiceSelectField&&this.$voiceSelectField.val(this.prefDescVoice),this.updatePreferences("voice")}},AblePlayer.prototype.swapDescription=function(){var e,i,s,a;if(e=this,this.loadingMedia=!1,this.$focusedElement=t(":focus"),this.activeMedia=this.mediaId,this.elapsed>0?this.swapTime=this.elapsed:this.swapTime=0,this.duration>0&&(this.prevDuration=this.duration),this.okToPlay\|\|(this.okToPlay=this.playing),this.descOn?this.showAlert(this.translate("alertDescribedVersion","Using the audio described version of this video")):this.showAlert(this.translate("alertNonDescribedVersion","Using the non-described version of this video")),"html5"===this.player){if(this.swappingSrc=!0,this.paused=!0,this.usingDescribedVersion())for(i=0;i<this.$sources.length;i++)s=DOMPurify.sanitize(this.$sources[i].getAttribute("data-orig-src")),srcType=this.$sources[i].getAttribute("type"),s&&this.$sources[i].setAttribute("src",s);else for(i=0;i<this.$sources.length;i++)s=DOMPurify.sanitize(this.$sources[i].getAttribute("src")),a=DOMPurify.sanitize(this.$sources[i].getAttribute("data-desc-src")),srcType=this.$sources[i].getAttribute("type"),a&&(this.$sources[i].setAttribute("src",a),this.$sources[i].setAttribute("data-orig-src",s));if(this.recreatingPlayer)return;this.playerCreated&&(this.deletePlayer("swap-desc-html"),this.recreatePlayer().then(function(){e.loadingMedia\|\|(e.media.load(),e.loadingMedia=!0)}))}else if("youtube"===this.player){if(this.activeYouTubeId=this.usingDescribedVersion()?this.youTubeId:this.youTubeDescId,void 0!==this.youTubePlayer&&(e.swappingSrc=!0,e.playing?e.youTubePlayer.loadVideoById(e.activeYouTubeId,e.swapTime):e.youTubePlayer.cueVideoById(e.activeYouTubeId,e.swapTime)),this.playerCreated&&this.deletePlayer("swap-desc-youtube"),this.recreatingPlayer)return;this.recreatePlayer().then(function(){})}else if("vimeo"===this.player){if(this.usingDescribedVersion()?(this.activeVimeoId=this.vimeoId,this.showAlert(this.translate("alertNonDescribedVersion","Using the non-described version of this video"))):(this.activeVimeoId=this.vimeoDescId,this.showAlert(this.translate("alertDescribedVersion","Using the audio described version of this video"))),this.playerCreated&&this.deletePlayer("swap-desc-vimeo"),this.recreatingPlayer)return;this.recreatePlayer().then(function(){e.vimeoPlayer.loadVideo(e.activeVimeoId).then(function(){e.playing?e.vimeoPlayer.setCurrentTime(e.swapTime):e.vimeoPlayer.pause()})})}},AblePlayer.prototype.showDescription=function(t){if(this.playing&&this.hasClosedDesc&&!this.swappingSrc&&this.descOn&&("video"!==this.descMethod\|\|this.prefDescVisible)){var e,i,s,a;0;var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e.push(flattenComponentForDescription(t.children[i]));return e.join("")};for(e=[],this.selectedDescriptions?e=this.selectedDescriptions.cues:this.descriptions.length>=1&&(e=this.descriptions[0].cues),i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s?this.currentDescription!==s&&(this.$status.removeAttr("aria-live"),a=flattenComponentForDescription(e[s].components),"screenreader"===this.descReader?this.$descDiv.html(a):this.speechEnabled?("video"!==this.descMethod&&this.announceDescriptionText("description",a),this.prefDescVisible&&this.$descDiv.html(a).removeAttr("aria-live aria-atomic")):this.$descDiv.html(a),this.prefDescPause&&"text"===this.descMethod&&(this.pauseMedia(),this.pausedForDescription=!0),this.currentDescription=s):(this.$descDiv.html(""),this.currentDescription=-1,this.$status.attr("aria-live","polite"))}},AblePlayer.prototype.syncSpeechToPlaybackRate=function(t){var e;.5===t?e=.7:.75===t?e=.8:1===t?e=1:1.25===t?e=1.1:1.5===t?e=1.2:1.75===t?e=1.5:2===t?e=2:2.25===t?e=2.5:t>=2.5&&(e=3),this.prefDescRate=e},AblePlayer.prototype.announceDescriptionText=function(e,i){var s,a,n,r,o,l,h,p,c;s=this;if(this.speechEnabled\|\|this.initSpeech("desc"),"sample"===e?(a=t("#"+this.mediaId+"_prefDescVoice").val(),o=t("#"+this.mediaId+"_prefDescPitch").val(),l=t("#"+this.mediaId+"_prefDescRate").val(),h=t("#"+this.mediaId+"_prefDescVolume").val()):(a=this.prefDescVoice,o=this.prefDescPitch,l=this.prefDescRate,h=this.prefDescVolume),this.descVoices){if(this.descVoices.length>0){if(a)for(n=0;n<this.descVoices.length;n++)if(this.descVoices[n].name==a){r=this.descVoices[n];break}void 0===r&&(r=this.descVoices[0])}}else r=null;p=new SpeechSynthesisUtterance,r&&(p.voice=r),p.voiceURI="native",p.volume=h,p.rate=l,p.pitch=o,p.text=i,p.lang=this.lang,p.onstart=function(t){},p.onpause=function(t){},p.onend=function(t){this.speakingDescription=!1,c=t.elapsedTime,c>100?(t.elapsedTime/1e3).toFixed(2):t.elapsedTime.toFixed(2),this.debug,"description"===e&&s.prefDescPause&&s.pausedForDescription&&(s.playMedia(),this.pausedForDescription=!1)},p.onerror=function(t){},this.synth.paused&&this.synth.resume(),this.synth.speak(p),this.speakingDescription=!0}}(jQuery),jQuery,AblePlayer.prototype.isIOS=function(t){var e;return e=navigator.userAgent.toLowerCase(),!!/ipad\|iphone\|ipod/.exec(e)&&(void 0===t\|\|-1!==e.indexOf("os "+t))},AblePlayer.prototype.browserSupportsVolume=function(){var t;return!this.isIOS()&&((t=new Audio).volume=.9,.9===t.volume)},AblePlayer.prototype.nativeFullscreenSupported=function(){return document.fullscreenEnabled\|\|document.webkitFullscreenEnabled},function(t){AblePlayer.prototype.seekTo=function(t){var e,i=this;(this.seekFromTime=this.media.currentTime,this.seekToTime=t,this.seeking=!0,this.liveUpdatePending=!0,this.speakingDescription&&this.synth.cancel(),this.syncSignVideo({time:this.startTime}),"html5"===this.player)?(this.startTime=t,(e=this.media.seekable).length>0&&this.startTime>=e.start(0)&&this.startTime<=e.end(0)&&(this.media.currentTime=this.startTime,this.seekStatus="complete",this.syncSignVideo({time:this.startTime}))):"youtube"===this.player?(this.youTubePlayer.seekTo(t,!0),t>0&&void 0!==this.$posterImg&&this.$posterImg.hide(),this.syncSignVideo({time:t})):"vimeo"===this.player&&this.vimeoPlayer.setCurrentTime(t).then(function(){i.elapsed=t,i.refreshControls("timeline")});this.refreshControls("timeline")},AblePlayer.prototype.getMediaTimes=function(t,e){var i,s,a,n;return n={},s=(i=new this.defer).promise(),a=this,void 0!==t&&void 0!==e?(n.duration=t,n.elapsed=e,i.resolve(n)):this.getDuration().then(function(t){n.duration=a.roundDown(t,6),a.getElapsed().then(function(t){n.elapsed=a.roundDown(t,6),i.resolve(n)})}),s},AblePlayer.prototype.getDuration=function(){var t,e,i;(e=(t=new this.defer).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getDuration().then(function(e){void 0===e\|\|isNaN(e)\|\|-1===e?t.resolve(0):t.resolve(e)}):t.resolve(0):("html5"===this.player?i=this.media.duration:"youtube"===this.player&&(i=this.youTubePlayerReady?this.duration>0?this.duration:this.youTubePlayer.getDuration():0),void 0===i\|\|isNaN(i)\|\|-1===i?t.resolve(0):t.resolve(i));return e},AblePlayer.prototype.getElapsed=function(){var t,e,i;(e=(t=new this.defer).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getCurrentTime().then(function(e){void 0===e\|\|isNaN(e)\|\|-1===e?t.resolve(0):t.resolve(e)}):t.resolve(0):("html5"===this.player?i=this.media.currentTime:"youtube"===this.player&&(i=this.youTubePlayerReady?this.youTubePlayer.getCurrentTime():0),void 0===i\|\|isNaN(i)\|\|-1===i?t.resolve(0):t.resolve(i));return e},AblePlayer.prototype.getPlayerState=function(){var t,e,i;if(e=(t=new this.defer).promise(),i=this,"html5"===this.player)this.media.ended?t.resolve("ended"):this.media.paused?t.resolve("paused"):4!==this.media.readyState?t.resolve("buffering"):t.resolve("playing");else if("youtube"===this.player&&this.youTubePlayerReady){var s=this.youTubePlayer.getPlayerState();-1===s\|\|5===s?t.resolve("stopped"):0===s?t.resolve("ended"):1===s?t.resolve("playing"):2===s?t.resolve("paused"):3===s&&t.resolve("buffering")}else"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.getPaused().then(function(e){e?t.resolve("paused"):i.vimeoPlayer.getEnded().then(function(e){e?t.resolve("ended"):t.resolve("playing")})});return e},AblePlayer.prototype.isPlaybackRateSupported=function(){return"html5"===this.player?!!this.media.playbackRate:"youtube"===this.player?!!this.youTubePlayerReady&&this.youTubePlayer.getAvailablePlaybackRates().length>1:"vimeo"===this.player?this.vimeoSupportsPlaybackRateChange:void 0},AblePlayer.prototype.setPlaybackRate=function(t){t=Math.max(.5,t),this.hasClosedDesc&&"text"===this.descMethod&&this.syncSpeechToPlaybackRate(t),this.syncSignVideo({rate:t}),"html5"===this.player?this.media.playbackRate=t:"youtube"===this.player?this.youTubePlayer.setPlaybackRate(t):"vimeo"===this.player&&this.vimeoPlayer.setPlaybackRate(t),this.syncSignVideo({rate:t}),this.playbackRate=t,this.$speed.text(this.translate("speed","Speed")+": "+t.toFixed(2).toString()+"x")},AblePlayer.prototype.getPlaybackRate=function(){return"html5"===this.player?this.media.playbackRate:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getPlaybackRate():void 0},AblePlayer.prototype.isPaused=function(){if("vimeo"===this.player)return!this.playing;this.getPlayerState().then(function(t){return"paused"===t\|\|"stopped"===t\|\|"ended"===t})},AblePlayer.prototype.syncSignVideo=function(t){this.hasSignLanguage&&(this.signVideo\|\|this.signYoutube)&&(t&&void 0!==t.time&&(this.signVideo?this.signVideo.currentTime=t.time:this.youTubeSignPlayer.seekTo(t.time,!0)),t&&void 0!==t.rate&&(this.signVideo?this.signVideo.playbackRate=t.rate:this.youTubeSignPlayer.setPlaybackRate(t.rate)),t&&void 0!==t.pause&&(this.signVideo?this.signVideo.pause(!0):this.youTubeSignPlayer.pauseVideo()),t&&void 0!==t.play&&(this.signVideo?this.signVideo.play(!0):this.youTubeSignPlayer.playVideo()),t&&void 0!==t.volume&&this.signVideo&&(this.signVideo.volume=0))},AblePlayer.prototype.pauseMedia=function(){this.syncSignVideo({pause:!0}),"html5"===this.player?this.media.pause(!0):"youtube"===this.player?this.youTubePlayer.pauseVideo():"vimeo"===this.player&&this.vimeoPlayer.pause()},AblePlayer.prototype.playMedia=function(){this.syncSignVideo({play:!0}),"html5"===this.player?this.media.play(!0):"youtube"===this.player?(this.youTubePlayer.playVideo(),void 0!==this.$posterImg&&this.$posterImg.hide(),this.stoppingYouTube=!1):"vimeo"===this.player&&this.vimeoPlayer.play(),this.startedPlaying=!0,this.hideControls&&(this.hidingControls=!0,this.invokeHideControlsTimeout())},AblePlayer.prototype.fadeControls=function(t){"out"==t?this.$playerDiv.addClass("fade-out").removeClass("fade-in"):"in"==t&&this.$playerDiv.addClass("fade-in").removeClass("fade-out")},AblePlayer.prototype.invokeHideControlsTimeout=function(){var t=this;this.hideControlsTimeout=window.setTimeout(function(){void 0!==t.playing&&!0===t.playing&&t.hideControls&&(t.fadeControls("out"),t.controlsHidden=!0)},5e3),this.hideControlsTimeoutStatus="active"},AblePlayer.prototype.refreshControls=function(e="init",i,s){var a,n,r,o,l,h,p,c,u,d,g,f,m;if((e="init",a=this,!this.swappingSrc\|\|!this.playing)&&void 0!==this.duration){if(this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.chapterElapsed=this.getChapterElapsed()),!this.useFixedSeekInterval&&!this.seekIntervalCalculated&&this.duration>0&&this.setSeekInterval(),this.seekBar&&(this.useChapterTimes?(h=this.selectedChapters.cues.length-1,this.selectedChapters.cues[h]==this.currentChapter&&this.currentChapter.end!==this.duration?this.seekBar.setDuration(this.duration-this.currentChapter.start):this.seekBar.setDuration(this.chapterDuration)):void 0===this.duration\|\|isNaN(this.duration)\|\|-1===this.duration\|\|this.seekBar.setDuration(this.duration),this.seekBar.tracking\|\|(c=this.liveUpdatePending\|\|this.seekBar.seekHead.is(t(document.activeElement)),this.liveUpdatePending=!1,this.useChapterTimes?this.seekBar.setPosition(this.chapterElapsed,c):this.seekBar.setPosition(this.elapsed,c)),p=this.seekBar.tracking?this.seekBar.lastTrackPosition:this.useChapterTimes?this.chapterElapsed:this.elapsed),void 0!==this.$durationContainer&&(this.useChapterTimes?this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.chapterDuration)):this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.duration))),void 0!==this.$elapsedTimeContainer&&this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(p)),"legacy"===this.skin&&this.seekBar){let e=this.seekBar.wrapperDiv.parent().parent();g=(d=this.seekBar.wrapperDiv.parent().prev("div.able-left-controls")).next("div.able-right-controls"),u=d.outerWidth(!0),g.children().each(function(){"button"==t(this).attr("role")&&(u+=t(this).outerWidth(!0)+5)}),f=this.fullscreen?t(window).width()-u:e.width()-u-10,Math.abs(f-this.seekBar.getWidth())>5&&this.seekBar.setWidth(f)}if("html5"===this.player&&this.media.buffered.length>0?(m=this.media.buffered.end(0),this.useChapterTimes?(m>this.chapterDuration&&(m=this.chapterDuration),this.seekBar&&this.seekBar.setBuffered(m/this.chapterDuration)):this.seekBar&&!isNaN(m)&&this.seekBar.setBuffered(m/i)):"youtube"===this.player&&this.seekBar&&this.youTubePlayerReady?this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()):this.player,this.$descButton&&this.toggleButtonState(this.$descButton,this.descOn,this.translate("turnOffDescriptions","Turn off descriptions"),this.translate("turnOnDescriptions","Turn on descriptions")),this.$ccButton){(o=this.captions.length)>1&&this.$ccButton.attr({"aria-haspopup":"true","aria-controls":this.mediaId+"-captions-menu"});var v=o>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),y=o>1?this.translate("captions","Captions"):this.translate("hideCaptions","Hide captions"),b=o>1;this.toggleButtonState(this.$ccButton,this.captionsOn,y,v,b)}this.$fullscreenButton&&(this.fullscreen?(this.$fullscreenButton.attr("aria-label",this.translate("exitFullScreen","Exit full screen")),this.getIcon(this.$fullscreenButton,"fullscreen-collapse")):(this.$fullscreenButton.attr("aria-label",this.translate("enterFullScreen","Enter full screen")),this.getIcon(this.$fullscreenButton,"fullscreen-expand"))),void 0!==this.$bigPlayButton&&void 0!==this.seekBar&&(this.paused&&!this.seekBar.tracking?this.hideBigPlayButton\|\|(this.$bigPlayButton.show(),this.$bigPlayButton.attr("aria-hidden","false")):(this.$bigPlayButton.hide(),this.$bigPlayButton.attr("aria-hidden","true"))),this.transcriptType&&(1===this.prefAutoScrollTranscript?(this.autoScrollTranscript=!0,this.$autoScrollTranscriptCheckbox.prop("checked",!0)):(this.autoScrollTranscript=!1,this.$autoScrollTranscriptCheckbox.prop("checked",!1)),this.autoScrollTranscript&&this.currentHighlight&&(l=Math.floor(this.$transcriptDiv.scrollTop()+t(this.currentHighlight).position().top-this.$transcriptDiv.height()/2+t(this.currentHighlight).height()/2))!==Math.floor(this.$transcriptDiv.scrollTop())&&(this.scrollingTranscript=!0,this.movingHighlight&&(this.$transcriptDiv.scrollTop(l),this.movingHighlight=!1))),this.$chaptersButton&&this.$chaptersButton.attr({"aria-label":this.translate("chapters","Chapters"),"aria-haspopup":"true","aria-controls":this.mediaId+"-chapters-menu"}),n={stopped:this.translate("statusStopped","Stopped"),paused:this.translate("statusPaused","Paused"),playing:this.translate("statusPlaying","Playing"),buffering:this.translate("statusBuffering","Buffering"),ended:this.translate("statusEnd","End of track")},this.stoppingYouTube?(this.$status.text()!==this.translate("statusStopped","Stopped")&&this.$status.text(this.translate("statusStopped","Stopped")),this.getIcon(this.$playpauseButton,"play")):void 0!==this.$status&&void 0!==this.seekBar&&this.getPlayerState().then(function(t){a.$status.text()===n[t]\|\|a.seekBar.tracking?(a.statusDebounceStart=null,a.debouncingStatus=!1,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.swappingSrc?a.debouncingStatus\|\|(a.statusMessageThreshold=2e3):a.debouncingStatus\|\|(a.statusMessageThreshold=250),r=(new Date).getTime(),a.statusDebounceStart?r-a.statusDebounceStart>a.statusMessageThreshold&&(a.$status.text(n[t]),a.statusDebounceStart=null,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.statusDebounceStart=r,a.debouncingStatus=!0,a.statusTimeout=setTimeout(function(){a.debouncingStatus=!1,a.refreshControls(e)},a.statusMessageThreshold))),a.seekBar.tracking\|\|a.stoppingYouTube\|\|("paused"===t\|\|"stopped"===t\|\|"ended"===t?(a.$playpauseButton.attr("aria-label",a.tt.play),a.getIcon(a.$playpauseButton,"play")):(a.$playpauseButton.attr("aria-label",a.tt.pause),a.getIcon(a.$playpauseButton,"pause")))}),this.fullscreen\|\|(this.$statusBarDiv.width()<300?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1))}},AblePlayer.prototype.handlePlay=function(t){this.paused?(this.okToPlay=!0,this.playMedia(),this.synth.paused&&this.synth.resume()):(this.okToPlay=!1,this.pauseMedia(),this.speakingDescription&&this.synth.pause()),null===this.speechEnabled&&this.initSpeech("play")},AblePlayer.prototype.handleRestart=function(){this.speakingDescription&&this.synth.cancel(),this.seekTo(0)},AblePlayer.prototype.handlePrevTrack=function(){this.playlistIndex=0===this.playlistIndex?this.$playlist.length-1:this.playlistIndex--,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleNextTrack=function(){this.playlistIndex=this.playlistIndex===this.$playlist.length-1?0:this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleRewind=function(){var t;t=this.elapsed-this.seekInterval,this.useChapterTimes&&t<this.currentChapter.start?t=this.currentChapter.start:t<0&&(t=0),this.seekTo(t)},AblePlayer.prototype.handleFastForward=function(){var t,e;e=this.chapters.length-1,t=this.elapsed+this.seekInterval,this.useChapterTimes?this.chapters[e]==this.currentChapter?(t>this.duration\|\|t>this.currentChapter.end\|\|this.duration%t<this.seekInterval)&&(t=Math.min(this.duration,this.currentChapter.end)):t>this.currentChapter.end&&(t=this.currentChapter.end):t>this.duration&&(t=this.duration),this.seekTo(t)},AblePlayer.prototype.handleRateIncrease=function(){this.changeRate(1)},AblePlayer.prototype.handleRateDecrease=function(){this.changeRate(-1)},AblePlayer.prototype.changeRate=function(t){var e,i,s,a;"html5"===this.player?this.setPlaybackRate(this.getPlaybackRate()+.25t):"youtube"===this.player?this.youTubePlayerReady&&(e=this.youTubePlayer.getAvailablePlaybackRates(),i=this.getPlaybackRate(),-1===(s=e.indexOf(i))\|\|(s+=t)<e.length&&s>=0&&this.setPlaybackRate(e[s])):"vimeo"===this.player&&(1===t?a=this.vimeoPlaybackRate+.5<=2?this.vimeoPlaybackRate+.5:2:-1===t&&(a=this.vimeoPlaybackRate-.5>=.5?this.vimeoPlaybackRate-.5:.5),this.setPlaybackRate(a))},AblePlayer.prototype.handleCaptionToggle=function(){var t,e,i=this;if(this.hidingPopup)return this.hidingPopup=!1,!1;if(1===(t=this.captions.length?this.captions:[]).length)if(!0===this.captionsOn)this.captionsOn=!1,this.prefCaptions=0,e=!1,this.updatePreferences("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.unloadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.disableTextTrack():this.$captionsWrapper.hide();else{this.captionsOn=!0,this.prefCaptions=1,e=!0,this.updatePreferences("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.loadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(t){}).catch(function(t){t.name}):this.$captionsWrapper.show();for(var s=0;s<t.length;s++)!0===t[s].def&&(this.selectedCaptions=t[s]);this.selectedCaptions=this.captions[0],this.descriptions.length>=0&&(this.selectedDescriptions=this.descriptions[0])}else this.captionsPopup&&this.captionsPopup.is(":visible")?(this.captionsPopup.hide(),this.hidingPopup=!1,this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)):(this.closePopups(),this.captionsPopup&&(this.captionsPopup.show(),this.$ccButton.attr("aria-expanded","true"),setTimeout(function(){i.captionsPopup.css("top",i.$ccButton.position().top-i.captionsPopup.outerHeight()),i.captionsPopup.css("left",i.$ccButton.position().left),i.captionsPopup.find("li").removeClass("able-focus"),i.captionsPopup.find("li").first().trigger("focus").addClass("able-focus")},50)));var a=t.length>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),n=t.length>1?this.translate("captions","Captions"):this.translate("hideCaptions","Hide captions");this.toggleButtonState(this.$ccButton,this.captionsOn,n,a,e)},AblePlayer.prototype.waitThenFocus=function(t,e){setTimeout(function(){t.trigger("focus")},null==e?50:e)},AblePlayer.prototype.handleChapters=function(){if(this.hidingPopup)return this.hidingPopup=!1,!1;this.chaptersPopup.is(":visible")?(this.chaptersPopup.hide(),this.hidingPopup=!1,this.$chaptersButton.attr("aria-expanded","false").trigger("focus")):(this.closePopups(),this.chaptersPopup.show(),this.$chaptersButton.attr("aria-expanded","true"),this.chaptersPopup.css("top",this.$chaptersButton.position().top-this.chaptersPopup.outerHeight()),this.chaptersPopup.css("left",this.$chaptersButton.position().left),this.chaptersPopup.find("li").removeClass("able-focus"),this.chaptersPopup.find('li[aria-checked="true"]').length?this.chaptersPopup.find('li[aria-checked="true"]').trigger("focus").addClass("able-focus"):this.chaptersPopup.find("li").first().addClass("able-focus").attr("aria-checked","true").trigger("focus"))},AblePlayer.prototype.handleDescriptionToggle=function(){this.descOn=!this.descOn,this.prefDesc=+this.descOn,this.updatePreferences("prefDesc"),void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")\|\|this.$descDiv.hide()),this.initDescription(),this.refreshControls("descriptions")},AblePlayer.prototype.handlePrefsClick=function(t){var e,i,s,a;if(e=this,null===this.speechEnabled&&this.initSpeech("prefs"),this.hidingPopup)return this.hidingPopup=!1,!1;this.prefsPopup.is(":visible")?(this.prefsPopup.hide(),this.$prefsButton.attr("aria-expanded","false"),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.showingPrefsDialog\|\|this.$prefsButton.trigger("focus"),setTimeout(function(){e.hidingPopup=!1},100)):(this.closePopups(),this.prefsPopup.show(),this.$prefsButton.attr("aria-expanded","true"),this.$prefsButton.trigger("focus"),setTimeout(function(){i=e.$prefsButton.position(),s=e.$ableDiv.width()-5,a=s-e.prefsPopup.width(),e.prefsPopup.css("top",i.top-e.prefsPopup.outerHeight()),e.prefsPopup.css("left",a),e.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","0"),e.prefsPopup.find("li").first().trigger("focus").addClass("able-focus")},50))},AblePlayer.prototype.handleTranscriptToggle=function(){var t=this,e=this.$transcriptDiv.is(":visible");e?(this.$transcriptArea.hide(),this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.prefTranscript=0,"popup"===this.transcriptType&&(this.$transcriptButton.trigger("focus").addClass("able-focus"),setTimeout(function(){t.closingTranscript=!1},100))):"popup"===this.transcriptType?(this.positionDraggableWindow("transcript"),this.$transcriptArea.show(),this.$transcriptPopup.hide(),this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.prefTranscript=1,this.focusNotClick=!0,this.$transcriptArea.find("button").first().trigger("focus"),setTimeout(function(){t.focusNotClick=!1},100)):(this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.$transcriptArea.show()),this.updatePreferences("prefTranscript")},AblePlayer.prototype.handleSignToggle=function(){var t=this,e=this.$signWindow.is(":visible");e?(this.$signWindow.hide(),this.toggleButtonState(this.$signButton,!e,this.translate("hideSign","Hide sign language"),this.translate("showSign","Show sign language")),this.prefSign=0,this.$signButton.trigger("focus").addClass("able-focus"),setTimeout(function(){t.closingSign=!1},100)):(this.positionDraggableWindow("sign"),this.$signWindow.show(),this.$signPopup.hide(),this.toggleButtonState(this.$signButton,!e,this.translate("hideSign","Hide sign language"),this.translate("showSign","Show sign language")),this.prefSign=1,this.focusNotClick=!0,this.$signWindow.find("button").first().trigger("focus"),setTimeout(function(){t.focusNotClick=!1},100)),this.updatePreferences("prefSign")},AblePlayer.prototype.setFullscreen=function(e){if(this.fullscreen!=e){var i=this,s=this.$ableWrapper[0];if(this.nativeFullscreenSupported())if(e){var a={x:window.pageXOffset\|\|0,y:window.pageYOffset\|\|0};1===this.prefTranscript&&this.rePositionDraggableWindow("transcript"),1===this.prefSign&&this.rePositionDraggableWindow("sign"),this.scrollPosition=a,s.requestFullscreen?s.requestFullscreen():s.webkitRequestFullscreen&&s.webkitRequestFullscreen(),this.fullscreen=!0}else this.restoringAfterFullscreen=!0,document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullscreen&&document.webkitCancelFullscreen(),1===this.prefTranscript&&this.positionDraggableWindow("transcript"),1===this.prefSign&&this.positionDraggableWindow("sign"),this.fullscreen=!1;t(document).on("fullscreenchange webkitfullscreenchange",function(t){i.fullscreen?i.clickedFullscreenButton\|\|(i.fullscreen=!1,i.restoringAfterFullscreen=!0):i.restoringAfterFullscreen=!0,i.resizePlayer(),i.refreshControls("fullscreen"),i.scrollPosition&&(a=i.scrollPosition,window.scrollTo(a.x,a.y)),setTimeout(function(){i.clickedFullscreenButton=!1,i.restoringAfterFullscreen=!1},100)})}},AblePlayer.prototype.handleFullscreenToggle=function(){var t=this.paused;this.setFullscreen(!this.fullscreen),t?this.pauseMedia():t\|\|this.playMedia(),this.fullscreen?(this.hideControls=!0,this.playing&&(this.fadeControls("out"),this.controlsHidden=!0)):(this.hideControls=this.hideControlsOriginal,this.hideControls\|\|(this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear")))},AblePlayer.prototype.handleTranscriptLockToggle=function(t){this.autoScrollTranscript=t,this.prefAutoScrollTranscript=+t,this.updatePreferences("prefAutoScrollTranscript"),this.refreshControls("transcript")},AblePlayer.prototype.getIcon=function(e,i,s=!1){var a=this.iconType,n=this.getIconData(i);if(a=null===n[3]?"svg":a,a=!0===s?"img":a,!(e.find(a+"#ableplayer-"+i).length>0))if(e.find("svg, img, span").remove(),"font"===a){var r=t("<span>",{class:n[2]});e.append(r)}else if("svg"===a){function getNode(t,e){for(var i in t=document.createElementNS("http://www.w3.org/2000/svg",t),e)t.setAttributeNS(null,i.replace(/[A-Z]/g,function(t){return"-"+t.toLowerCase()}),e[i]);return t}var o=document.createElementNS("http://www.w3.org/2000/svg","svg");o.setAttribute("focusable","false"),o.setAttribute("aria-hidden","true"),o.setAttribute("viewBox",n[0]),o.setAttribute("id","ableplayer-"+i);let h=getNode("path",{d:n[1]});o.appendChild(h),e.append(o),e.html(e.html())}else{var l=t("<img>",{src:n[3],alt:"",role:"presentation"});e.append(l),e.find("img").attr("src",n[3])}},AblePlayer.prototype.setText=function(t,e){t.attr("aria-label",e)},AblePlayer.prototype.toggleButtonState=function(t,e,i,s,a=!1,n=!1){let r=!!t.hasClass("buttonOff");r&&!e\|\|!r&&e\|\|(e?(t.removeClass("buttonOff").attr("aria-label",i),a&&t.attr("aria-pressed","true"),n&&t.attr("aria-expanded","true")):(t.addClass("buttonOff").attr("aria-label",s),a&&t.attr("aria-pressed","false"),n&&t.attr("aria-expanded","false")))},AblePlayer.prototype.showTooltip=function(t){t.show()},AblePlayer.prototype.showAlert=function(t,e="main"){var i,s,a;s=(i=this).$alertBox,a=i.$ableDiv,"transcript"===e?a=i.$transcriptArea:"sign"===e?a=i.$signWindow:"screenreader"===e&&(s=i.$srAlertBox),s.find("span").text(t),s.appendTo(a),s.css({display:"flex"}),"screenreader"!==e&&setTimeout(function(){s.hide()},3e4)},AblePlayer.prototype.showedAlert=function(t){return"transcript"===t?this.showedTranscriptAlert??!1:"sign"===t&&(this.showedSignAlert??!1)},AblePlayer.prototype.resizePlayer=function(e,i){var s,a,n,r;if("audio"!==this.mediaType){if(void 0!==e&&void 0!==i?(this.aspectRatio=i/e,this.playerWidth?(a=this.playerWidth,this.playerHeight?n=this.playerHeight:(n=Math.round(athis.aspectRatio),this.playerHeight=n)):(a="html5"===this.player?t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio))):this.fullscreen?(this.$ableWrapper.addClass("fullscreen"),a=t(window).width(),n=t(window).height()-this.$playerDiv.outerHeight()-5,this.positionCaptions("overlay")):(this.$ableWrapper.removeClass("fullscreen"),a="html5"===this.player?this.playerWidth?this.playerWidth:t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio),this.positionCaptions(this.prefCaptionsPosition)),this.debug,"youtube"===this.player\|\|"vimeo"===this.player?(r=this.$ableWrapper.find("iframe"),"youtube"===this.player&&this.youTubePlayer?this.youTubePlayer.setSize(a,n):r.attr({width:a,height:n}),this.playerWidth&&this.playerHeight&&(this.fullscreen?r.css({"max-width":"","max-height":""}):r.css({"max-width":this.playerWidth+"px","max-height":this.playerHeight+"px"}))):"html5"===this.player&&(this.fullscreen?(this.$media.attr({width:a,height:n}),this.$ableWrapper.css({width:a,height:n})):(this.$media.removeAttr("width height"),this.$ableWrapper.removeAttr("style"))),void 0!==this.$captionsDiv){var o=!1;window.screen.width<1200&&(o=!0),s=parseInt(this.prefCaptionsSize,10),this.fullscreen&&!o?s=s/100+"vw":this.fullscreen&&o?s="1.2rem":s+="%",this.$captionsDiv.css({"font-size":s})}this.refreshControls()}},AblePlayer.prototype.retrieveOffscreenWindow=function(t,e,i){var s,a,n,r,o,l,h,p;"transcript"==t?s=this.$transcriptArea:"sign"==t&&(s=this.$signWindow),l=s.width(),p=s.height(),n=(a=s.position()).top,o=(r=a.left)+l,h=n+p,n<0&&(n=10,s.css("top",n)),r<0&&(r=10,s.css("left",r)),o>e&&(r=e-20-l,s.css("left",r)),h>i&&(n=i-10-p,s.css("top",n))},AblePlayer.prototype.updateZIndex=function(t){var e,i,s,a,n,r;if(e=8e3,i=7e3,void 0===this.$transcriptArea\|\|void 0===this.$signWindow)return void 0!==this.$transcriptArea?(s=parseInt(this.$transcriptArea.css("z-index")))>i&&this.$transcriptArea.css("z-index",i):void 0!==this.$signWindow&&(a=parseInt(this.$signWindow.css("z-index")))>e&&this.$signWindow.css("z-index",e),!1;if((s=parseInt(this.$transcriptArea.css("z-index")))===(a=parseInt(this.$signWindow.css("z-index"))))n=e,r=i;else if(s>a){if("transcript"===t)return!1;n=s,r=a}else{if("sign"===t)return!1;n=a,r=s}"transcript"===t?(this.$transcriptArea.css("z-index",n),this.$signWindow.css("z-index",r)):"sign"===t&&(this.$signWindow.css("z-index",n),this.$transcriptArea.css("z-index",r))},AblePlayer.prototype.syncTrackLanguages=function(t,e){var i,s,a,n,r;for(i=0;i<this.captions.length;i++)this.captions[i].language===e&&(s=this.captions[i]);for(i=0;i<this.chapters.length;i++)this.chapters[i].language===e&&(n=this.chapters[i]);for(i=0;i<this.descriptions.length;i++)this.descriptions[i].language===e&&(a=this.descriptions[i]);for(i=0;i<this.meta.length;i++)this.meta[i].language===e&&(r=this.meta[i]);if(this.transcriptLang=e,"init"===t\|\|"captions"===t?(this.captionLang=e,this.selectedCaptions=s,this.selectedChapters=n,this.selectedDescriptions=a,this.selectedMeta=r,this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a,this.updateChaptersList()):"transcript"===t&&(this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a),this.selectedDescriptions&&(this.setDescriptionVoice(),this.$sampleDescDiv&&this.sampleText))for(i=0;i<this.sampleText.length;i++)this.sampleText[i].lang===this.selectedDescriptions.language&&(this.currentSampleText=this.sampleText[i].text,this.$sampleDescDiv.html(this.currentSampleText));this.updateTranscript()}}(jQuery),function(t){AblePlayer.prototype.updateCaption=function(t){this.usingYouTubeCaptions\|\|this.usingVimeoCaptions\|\|void 0===this.$captionsWrapper\|\|(this.captionsOn?(this.$captionsWrapper.show(),void 0!==t&&this.showCaptions(t)):this.$captionsWrapper&&(this.$captionsWrapper.hide(),this.prefCaptions=0))},AblePlayer.prototype.updateCaptionsMenu=function(t){this.captionsPopup.find("li").attr("aria-checked","false"),void 0===t?this.captionsPopup.find("li").last().attr("aria-checked","true"):this.captionsPopup.find("li[lang="+t+"]").attr("aria-checked","true")},AblePlayer.prototype.getCaptionClickFunction=function(t){var e=this;return function(){e.selectedCaptions=t,e.captionLang=t.language,e.currentCaption=-1,e.usingYouTubeCaptions?e.captionsOn?e.youTubePlayer.getOptions("captions")&&e.startedPlaying?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):e.captionLangPending=e.captionLang:e.youTubePlayer.getOptions("captions")?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):(e.youTubePlayer.loadModule("captions"),e.captionLangPending=e.captionLang):e.usingVimeoCaptions?e.vimeoPlayer.enableTextTrack(e.captionLang).then(function(t){}).catch(function(t){t.name}):(e.syncTrackLanguages("captions",e.captionLang),e.swappingSrc\|\|(e.updateCaption(e.elapsed),e.showDescription(e.elapsed))),e.captionsOn=!0,e.hidingPopup=!0,e.captionsPopup.hide(),e.$ccButton.attr("aria-expanded","false"),"audio"===e.mediaType&&e.$captionsContainer.removeClass("captions-off"),setTimeout(function(){e.hidingPopup=!1},100),e.updateCaptionsMenu(e.captionLang),e.waitThenFocus(e.$ccButton),e.prefCaptions=1,e.updatePreferences("prefCaptions"),e.refreshControls("captions")}},AblePlayer.prototype.getCaptionOffFunction=function(){var t=this;return function(){"youtube"==t.player?t.youTubePlayer.unloadModule("captions"):t.usingVimeoCaptions&&t.vimeoPlayer.disableTextTrack(),t.captionsOn=!1,t.currentCaption=-1,"audio"===t.mediaType&&t.$captionsContainer.addClass("captions-off"),t.hidingPopup=!0,t.captionsPopup.hide(),t.$ccButton.attr("aria-expanded","false"),setTimeout(function(){t.hidingPopup=!1},100),t.updateCaptionsMenu(),t.waitThenFocus(t.$ccButton),t.prefCaptions=0,t.updatePreferences("prefCaptions"),this.swappingSrc\|\|(t.refreshControls("captions"),t.updateCaption())}},AblePlayer.prototype.showCaptions=function(t){var e,i,s,a;for(a=this.selectedCaptions.cues.length?this.selectedCaptions.cues:this.captions.length>=1?this.captions[0].cues:[],e=0;e<a.length;e++)if(a[e].start<=t&&a[e].end>t){i=e;break}void 0!==i?this.currentCaption!==i&&(s=this.flattenCueForCaption(a[i]).replace(/\n/g,"<br>"),this.$captionsDiv.html(s),this.currentCaption=i,0===s.length?this.$captionsDiv.css("display","none"):this.$captionsDiv.css("display","inline-block")):(this.$captionsDiv.html("").css("display","none"),this.currentCaption=-1)},AblePlayer.prototype.flattenCueForCaption=function(t){var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("("+t.value+")"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else if("i"===t.type){for(i.push("<em>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</em>")}else if("b"===t.type){for(i.push("<strong>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</strong>")}else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")};if(void 0!==t.components)for(var i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")},AblePlayer.prototype.getCaptionsOptions=function(t){var e=[];switch(t){case"prefCaptionsFont":e[0]=["serif",this.translate("serif","serif")],e[1]=["sans-serif",this.translate("sans","sans-serif")],e[2]=["cursive",this.translate("cursive","cursive")],e[3]=["fantasy",this.translate("fantasy","fantasy")],e[4]=["monospace",this.translate("monospace","monospace")];break;case"prefCaptionsColor":case"prefCaptionsBGColor":e[0]=["white",this.translate("white","white")],e[1]=["yellow",this.translate("yellow","yellow")],e[2]=["green",this.translate("green","green")],e[3]=["cyan",this.translate("cyan","cyan")],e[4]=["blue",this.translate("blue","blue")],e[5]=["magenta",this.translate("magenta","magenta")],e[6]=["red",this.translate("red","red")],e[7]=["black",this.translate("black","black")];break;case"prefCaptionsSize":e[0]="75%",e[1]="100%",e[2]="125%",e[3]="150%",e[4]="200%";break;case"prefCaptionsOpacity":e[0]="0%",e[1]="25%",e[2]="50%",e[3]="75%",e[4]="100%";break;case"prefCaptionsStyle":e[0]=this.translate("captionsStylePopOn","Pop-on"),e[1]=this.translate("captionsStyleRollUp","Roll-up");break;case"prefCaptionsPosition":e[0]="overlay",e[1]="below"}return e},AblePlayer.prototype.translatePrefs=function(t,e,i){if("youtube"==i&&"size"===t)switch(e){case"75%":return-1;case"100%":return 0;case"125%":return 1;case"150%":return 2;case"200%":return 3}return!1},AblePlayer.prototype.stylizeCaptions=function(e,i){var s,a,n;void 0!==e&&("prefCaptionsPosition"==i?this.positionCaptions():void 0!==i?("prefCaptionsFont"===i?s="font-family":"prefCaptionsSize"===i?s="font-size":"prefCaptionsColor"===i?s="color":"prefCaptionsBGColor"===i?s="background-color":"prefCaptionsOpacity"===i&&(s="opacity"),a="prefCaptionsOpacity"===i?parseFloat(t("#"+this.mediaId+"_"+i).val())/100:t("#"+this.mediaId+"_"+i).val(),e.css(s,a)):(n=parseFloat(this.prefCaptionsOpacity)/100,e.css({"font-family":this.prefCaptionsFont,color:this.prefCaptionsColor,"background-color":this.prefCaptionsBGColor,opacity:n}),e===this.$captionsDiv&&void 0!==this.$captionsDiv&&this.$captionsDiv.css({"font-size":this.prefCaptionsSize}),"below"===this.prefCaptionsPosition?void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"}):"overlay"===this.prefCaptionsPosition&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":"transparent",opacity:""}),this.positionCaptions()))},AblePlayer.prototype.positionCaptions=function(t){void 0===t&&(t=this.prefCaptionsPosition),void 0!==this.$captionsWrapper&&("below"==t?(this.$captionsWrapper.removeClass("able-captions-overlay").addClass("able-captions-below"),this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"})):(this.$captionsWrapper.removeClass("able-captions-below").addClass("able-captions-overlay"),this.$captionsWrapper.css({"background-color":"transparent",opacity:""})))}}(jQuery),function(t){AblePlayer.prototype.populateChaptersDiv=function(){var e,i,s;this.chaptersDivLocation&&t("#"+this.chaptersDivLocation)&&(this.$chaptersDiv=t("#"+this.chaptersDivLocation),this.$chaptersDiv.addClass("able-chapters-div"),this.$chaptersDiv.empty(),this.chaptersTitle&&(e="h"+this.getNextHeadingLevel(this.$chaptersDiv).toString(),i=this.mediaId+"-chapters-heading",s=t("<"+e+">",{class:"able-chapters-heading",id:i}).text(this.chaptersTitle),this.$chaptersDiv.append(s)),this.$chaptersNav=t("<nav>"),this.chaptersTitle?this.$chaptersNav.attr("aria-labelledby",i):this.$chaptersNav.attr("aria-label",this.translate("chapters","Chapters")),this.$chaptersDiv.append(this.$chaptersNav),this.updateChaptersList())},AblePlayer.prototype.updateChaptersList=function(){var e,i,s,a,n,r,o,l,h,p;if(e=this,!this.$chaptersNav)return!1;if(void 0===this.useChapterTimes&&(this.useChapterTimes=!("chapter"!==this.seekbarScope\|\|!this.selectedChapters.cues.length)),(i=this.useChapterTimes?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[]).length>0){for(p=t("<ul>"),s=0;s<i.length;s++)a=s,n=t("<li></li>"),l=function(i){return function(){e.seekTrigger="chapter",h=t(this).closest("li"),(p=t(this).closest("ul").find("li")).removeClass("able-current-chapter").children("button").removeAttr("aria-current"),h.addClass("able-current-chapter").children("button").attr("aria-current","true"),e.updateChapter(i),e.seekTo(i)}},(r=t("<button>",{type:"button",val:a}).text(this.flattenCueForCaption(i[a]))).on("click",l(i[a].start)),r.on("focus",function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).closest("li").addClass("able-focus")}),n.on("hover",function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).addClass("able-focus")}),n.on("mouseleave",function(){t(this).removeClass("able-focus")}),r.on("blur",function(){t(this).closest("li").removeClass("able-focus")}),n.append(r),p.append(n),this.defaultChapter===i[a].id&&(r.attr("aria-current","true").parent("li").addClass("able-current-chapter"),this.currentChapter=i[a],o=!0);o\|\|(this.currentChapter=i[0],p.find("button").first().attr("aria-current","true").parent("li").addClass("able-current-chapter")),this.$chaptersNav.html(p)}return!1},AblePlayer.prototype.seekToChapter=function(t){for(var e=0;e<this.selectedChapters.cues.length;){if(this.selectedChapters.cues[e].id==t){this.seekTo(this.selectedChapters.cues[e].start),this.updateChapter(this.selectedChapters.cues[e].start);break}e++}},AblePlayer.prototype.updateChapter=function(t){if(void 0!==this.selectedChapters){var e,i,s;for(e=this.selectedChapters.cues,i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s&&this.currentChapter!==e[s]&&(this.currentChapter=e[s],this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.seekIntervalCalculated=!1),void 0!==this.$chaptersDiv&&(this.$chaptersDiv.find("ul").find("li").removeClass("able-current-chapter").children("button").removeAttr("aria-current"),this.$chaptersDiv.find("ul").find("li").eq(s).addClass("able-current-chapter").children("button").attr("aria-current","true")))}},AblePlayer.prototype.getChapterDuration=function(){var t,e;return void 0===this.currentChapter\|\|void 0===this.duration?0:(t=this.selectedChapters.cues.length-1,this.selectedChapters.cues[t]==this.currentChapter&&this.currentChapter.end!==this.duration?(e=this.duration,this.currentChapter.end=this.duration):e=this.currentChapter.end,e-this.currentChapter.start)},AblePlayer.prototype.getChapterElapsed=function(){return void 0===this.currentChapter?0:this.elapsed>this.currentChapter.start?this.elapsed-this.currentChapter.start:0},AblePlayer.prototype.convertChapterTimeToVideoTime=function(t){if(void 0!==this.currentChapter){var e=this.currentChapter.start+t;return e>this.currentChapter.end?this.currentChapter.end:e}return t},AblePlayer.prototype.getChapterClickFunction=function(t){var e=this;return function(){e.seekTrigger="chapter",e.seekTo(t),e.hidingPopup=!0,e.chaptersPopup.hide(),setTimeout(function(){e.hidingPopup=!1},100),e.$chaptersButton.trigger("focus")}}}(jQuery),function(t){AblePlayer.prototype.updateMeta=function(t){this.hasMeta&&("text"===this.metaType?(this.$metaDiv.show(),this.showMeta(t\|\|this.elapsed)):this.showMeta(t\|\|this.elapsed))},AblePlayer.prototype.showMeta=function(e){var i,s,a,n,r,o,l,h,p;for(i=[],n=this.meta.length>=1?this.meta:[],s=0;s<n.length;s++)if(n[s].start<=e&&n[s].end>e){a=s;break}if(void 0!==a){if(this.currentMeta!==a)if("text"===this.metaType)this.$metaDiv.html(this.flattenCueForMeta(n[a]).replace(/\n/g,"<br>"));else if("selector"===this.metaType){for(r=this.flattenCueForMeta(n[a]).split("\n"),o=0;o<r.length;o++)if("pause"===(l=r[o].trim()).toLowerCase().trim())this.hideBigPlayButton=!0,this.pauseMedia();else if("focus:"==l.toLowerCase().substring(0,6))p=l.substring(6).trim(),t(p).length&&t(p).trigger("focus");else if(t(l).length){if(this.currentMeta=a,void 0===(h=parseInt(t(l).attr("data-duration")))\|\|isNaN(h))t(l).show();else{t(l).show();(t=>new Promise(e=>setTimeout(e,t)))(h).then(()=>{t(l).hide()})}this.visibleSelectors.push(l),i.push(l)}if(this.visibleSelectors&&this.visibleSelectors.length&&this.visibleSelectors.length!==i.length)for(o=this.visibleSelectors.length-1;o>=0;o--)-1==t.inArray(this.visibleSelectors[o],i)&&(t(this.visibleSelectors[o]).hide(),this.visibleSelectors.splice(o,1))}}else{if(void 0!==this.$metaDiv&&this.$metaDiv.html(""),this.visibleSelectors&&this.visibleSelectors.length){for(o=0;o<this.visibleSelectors.length;o++)t(this.visibleSelectors[o]).hide();this.visibleSelectors=[]}this.currentMeta=-1}},AblePlayer.prototype.flattenCueForMeta=function(t){for(var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("["+t.value+"]"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")},i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")}}(jQuery),function(t){AblePlayer.prototype.setupTranscript=function(){var t=new this.defer,e=t.promise();return this.usingYouTubeCaptions\|\|this.usingVimeoCaptions\|\|this.hideTranscriptButton?(this.transcriptType=null,t.resolve()):(this.transcriptType\|\|this.captions.length&&(this.transcriptType="popup"),this.transcriptType?"popup"===this.transcriptType\|\|"external"===this.transcriptType?(this.injectTranscriptArea(),t.resolve()):"manual"===this.transcriptType&&(this.setupManualTranscript(),t.resolve()):t.resolve()),e},AblePlayer.prototype.injectTranscriptArea=function(){var e,i,s,a,n;if(this.$transcriptArea=t("<div>",{class:"able-transcript-area",role:"dialog","aria-label":this.translate("transcriptTitle","Transcript")}),this.$transcriptToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$transcriptDiv=t("<div>",{class:"able-transcript"}),this.$autoScrollTranscriptCheckbox=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),e=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.translate("autoScroll","Auto scroll")),$autoScrollContainer=t("<div>",{class:"autoscroll-transcript"}),$autoScrollContainer.append(e,this.$autoScrollTranscriptCheckbox),this.$transcriptToolbar.append($autoScrollContainer),this.captions.length>1)for(i=t("<div>",{class:"transcript-language-select-wrapper"}),s=t("<label>",{for:"transcript-language-select-"+this.mediaId}).text(this.translate("language","Language")),this.$transcriptLanguageSelect=t("<select>",{id:"transcript-language-select-"+this.mediaId}),a=0;a<this.captions.length;a++)n=t("<option></option>",{value:this.captions[a].language,lang:this.captions[a].language}).text(this.captions[a].label),this.captions[a].def&&n.prop("selected",!0),this.$transcriptLanguageSelect.append(n);i&&(i.append(s,this.$transcriptLanguageSelect),this.$transcriptToolbar.append(i)),this.$transcriptArea.append(this.$transcriptToolbar,this.$transcriptDiv),this.transcriptDivLocation?(this.$transcriptArea.removeAttr("role"),this.$transcriptArea.removeAttr("aria-label"),t("#"+this.transcriptDivLocation).append(this.$transcriptArea)):this.$ableWrapper.append(this.$transcriptArea),this.transcriptDivLocation\|\|(this.initDragDrop("transcript"),1===this.prefTranscript&&this.positionDraggableWindow("transcript",this.getDefaultWidth("transcript"))),this.prefTranscript\|\|this.transcriptDivLocation\|\|this.$transcriptArea.hide()},AblePlayer.prototype.addTranscriptAreaEvents=function(){var t=this;this.$autoScrollTranscriptCheckbox.on("click",function(){t.handleTranscriptLockToggle(t.$autoScrollTranscriptCheckbox.prop("checked"))}),this.$transcriptDiv.on("mousewheel DOMMouseScroll click scroll",function(e){t.scrollingTranscript\|\|(t.autoScrollTranscript=!1,t.refreshControls("transcript")),t.scrollingTranscript=!1}),void 0!==this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.on("click",function(t){t.stopPropagation()}),this.$transcriptLanguageSelect.on("change",function(){var e=t.$transcriptLanguageSelect.val();t.syncTrackLanguages("transcript",e)}))},AblePlayer.prototype.transcriptSrcHasRequiredParts=function(){return!!(t("#"+this.transcriptSrc).length&&(this.$transcriptArea=t("#"+this.transcriptSrc),this.$transcriptArea.find(".able-window-toolbar").length&&(this.$transcriptToolbar=this.$transcriptArea.find(".able-window-toolbar").eq(0),this.$transcriptArea.find(".able-transcript").length&&(this.$transcriptDiv=this.$transcriptArea.find(".able-transcript").eq(0),this.$transcriptArea.find(".able-transcript-seekpoint").length))))&&(this.$transcriptSeekpoints=this.$transcriptArea.find(".able-transcript-seekpoint"),!0)},AblePlayer.prototype.setupManualTranscript=function(){var e,i;e=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),i=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.translate("autoScroll","Auto scroll")),this.$autoScrollTranscriptCheckbox=e,this.$transcriptToolbar.append(i,this.$autoScrollTranscriptCheckbox)},AblePlayer.prototype.updateTranscript=function(){if(this.transcriptType&&(!this.playerCreated\|\|this.$transcriptArea)){if("external"===this.transcriptType\|\|"popup"===this.transcriptType){var e,i,s;if(this.transcriptLang?i=this.transcriptCaptions.cues:this.transcriptCaptions?(this.transcriptLang=this.transcriptCaptions.language,i=this.transcriptCaptions.cues):this.selectedCaptions&&(this.transcriptLang=this.captionLang,i=this.selectedCaptions.cues),this.transcriptChapters)e=this.transcriptChapters.cues;else if(this.chapters.length>0){if(this.transcriptLang)for(var a=0;a<this.chapters.length;a++)this.chapters[a].language===this.transcriptLang&&(e=this.chapters[a].cues);void 0===e&&(e=this.chapters[0].cues\|\|[])}if(this.transcriptDescriptions)s=this.transcriptDescriptions.cues;else if(this.descriptions.length>0){if(this.transcriptLang)for(a=0;a<this.descriptions.length;a++)this.descriptions[a].language===this.transcriptLang&&(s=this.descriptions[a].cues);s\|\|(s=this.descriptions[0].cues\|\|[])}var n=this.generateTranscript(e\|\|[],i\|\|[],s\|\|[]);this.$transcriptDiv.html(n),this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.find("option:selected").prop("selected",!1),this.$transcriptLanguageSelect.find("option[lang="+this.transcriptLang+"]").prop("selected",!0))}var r=this;1===this.prefTabbable&&this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"),this.$transcriptArea.length>0&&this.$transcriptArea.find("span.able-transcript-seekpoint").on("click",function(e){r.seekTrigger="transcript";var i=parseFloat(t(this).attr("data-start"));i+=.01,r.seekingFromTranscript?r.seekingFromTranscript=!1:(r.seekingFromTranscript=!0,r.seekTo(i))})}},AblePlayer.prototype.highlightTranscript=function(e){if(this.transcriptType){var i,s,a,n=this;e=parseFloat(e),this.$transcriptArea.find("span.able-transcript-seekpoint").each(function(){if(i=parseFloat(t(this).attr("data-start")),s=parseFloat(t(this).attr("data-end")),a=!!t(this).parent().hasClass("able-transcript-chapter-heading"),e>=i&&e<=s&&!a)return t(this).hasClass("able-highlight")\|\|(n.$transcriptArea.find(".able-highlight").removeClass("able-highlight"),t(this).addClass("able-highlight"),n.movingHighlight=!0),!1}),n.currentHighlight=n.$transcriptArea.find(".able-highlight"),0===n.currentHighlight.length&&(n.currentHighlight=null)}},AblePlayer.prototype.generateTranscript=function(e,i,s){var a,n=this,r=t('<div class="able-transcript-container"></div>');if(r.attr("lang",this.transcriptLang),a=void 0!==this.transcriptTitle?this.transcriptTitle:this.lyricsMode?this.translate("lyricsTitle","Lyrics"):this.translate("transcriptTitle","Transcript"),!this.transcriptDivLocation){var o=this.playerHeadingLevel,l=(o+=1)+1;if(o<=6)var h="h"+o.toString();else h="div";var p=t("<"+h+">");p.addClass("able-transcript-heading"),o>6&&p.attr({role:"heading","aria-level":o}),p.text(a),p.attr("lang",this.lang),r.append(p)}for(var c=0,u=0,d=0,addChapter=function(e,i){if(l<=6)var s="h"+l.toString();else s="div";var a=t("<"+s+">",{class:"able-transcript-chapter-heading"});l>6&&a.attr({role:"heading","aria-level":l});for(var flattenComponentForChapter=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForChapter(t.children[i]));return e},n=t("<span>",{class:"able-transcript-seekpoint"}),r=0;r<i.components.children.length;r++)for(var o=flattenComponentForChapter(i.components.children[r]),h=0;h<o.length;h++)n.append(o[h]);n.attr("data-start",i.start.toString()),n.attr("data-end",i.end.toString()),a.append(n),e.append(a)},addDescription=function(e,i){var s=t("<div>",{class:"able-transcript-desc"}),a=t("<span>",{class:"able-hidden"});a.attr("lang",n.lang),a.text(n.tt.prefHeadingDescription+": "),s.append(a);for(var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForDescription(t.children[i]));return e},r=t("<span>",{class:"able-transcript-seekpoint"}),o=0;o<i.components.children.length;o++)for(var l=flattenComponentForDescription(i.components.children[o]),h=0;h<l.length;h++)r.append(l[h]);r.attr("data-start",i.start.toString()),r.attr("data-end",i.end.toString()),s.append(r),e.append(s)},addCaption=function(e,i){for(var s=t("<span>",{class:"able-transcript-seekpoint able-transcript-caption"}),flattenComponentForCaption=function(e){var i=[],s=0,flattenString=function(t){var e;s++;var i=[];if(""===t)return i;var a=t.indexOf("["),n=t.indexOf("]"),r=t.indexOf("("),o=t.indexOf(")"),l=-1!==a&&-1!==n,h=-1!==r&&-1!==o;if(h\|\|l){if(s>1)var p="<br/>";else p="";var c=p+'<span class="able-unspoken">',u="</span>";h&&l&&(a<r?h=!1:l=!1)}return h?(e=t.substring(0,r),e+=c,e+=t.substring(r,o+1),e+=u,e+=flattenString(t.substring(o+1)),i.push(e)):l?(e=t.substring(0,a),e+=c,e+=t.substring(a,n+1),e+=u,e+=flattenString(t.substring(n+1)),i.push(e)):i.push(t),i};if("string"===e.type)i=i.concat(flattenString(e.value));else if("v"===e.type){var a=t("<span>",{class:"able-unspoken"});e.value=e.value.replace(/^title="\|\"$/g,""),a.text("("+e.value+")"),i.push(a);for(var n=0;n<e.children.length;n++)for(var r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)i.push(r[o])}else if("b"===e.type\|\|"i"===e.type){if("b"===e.type)var l=t("<strong>");else if("i"===e.type)l=t("<em>");for(n=0;n<e.children.length;n++)for(r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)l.append(r[o]);"b"!==e.type&&"i"!=e.type\|\|i.push(l)}else for(n=0;n<e.children.length;n++)i=i.concat(flattenComponentForCaption(e.children[n]));return i},a=0;a<i.components.children.length;a++){var r;a<i.components.children.length-1&&(r=i.components.children[a+1].tagName);for(var o=flattenComponentForCaption(i.components.children[a]),l=0;l<o.length;l++){var h=o[l];"string"==typeof h&&(n.lyricsMode?(h=h.replace(/\n/g,"<br>"),(!r\|\|"i"!==r&&"b"!==r)&&(h+="<br>")):h+=" "),s.append(h)}}s.attr("data-start",i.start.toString()),s.attr("data-end",i.end.toString()),e.append(s),e.append(" \n")};c<e.length\|\|d<s.length\|\|u<i.length;){if(c<e.length&&d<s.length&&u<i.length)var g=Math.min(e[c].start,s[d].start,i[u].start);else if(c<e.length&&d<s.length)g=Math.min(e[c].start,s[d].start);else if(c<e.length&&u<i.length)g=Math.min(e[c].start,i[u].start);else if(d<s.length&&u<i.length)g=Math.min(s[d].start,i[u].start);else g=null;null!==g?void 0!==e[c]&&e[c].start===g?(addChapter(r,e[c]),c+=1):void 0!==s[d]&&s[d].start===g?(addDescription(r,s[d]),d+=1):(addCaption(r,i[u]),u+=1):c<e.length?(addChapter(r,e[c]),c+=1):d<s.length?(addDescription(r,s[d]),d+=1):u<i.length&&(addCaption(r,i[u]),u+=1)}var f=r.children(),m=0;return f.each(function(){t(this).hasClass("able-transcript-caption")?(-1===t(this).text().indexOf("[")&&-1===t(this).text().indexOf("(")\|\|m>0&&(r=wrapTranscriptBlocks(r),m=0),t(this).addClass("able-block-temp"),m++):m>0&&(r=wrapTranscriptBlocks(r),m=0)}),r=wrapTranscriptBlocks(r)};var wrapTranscriptBlocks=function(t){return t.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),t}}(jQuery),function(t){AblePlayer.prototype.showSearchResults=function(){var e=this;if(this.searchDiv&&this.searchString){var i=DOMPurify.sanitize(this.searchString);if(t("#"+this.SearchDiv)){var s="<p>"+this.translate("resultsSummary1","You searched for:")+" ";s+='<span id="able-search-term-echo">'+i+"</span>",s+="</p>";var a=this.searchFor(i,this.searchIgnoreCaps);if(a.length>0){var n=t("<p>",{class:"able-search-results-summary"}),r=this.translate("resultsSummary2","Found %1 matching items.",["<strong>"+a.length+"</strong>"]);r+=" "+this.translate("resultsSummary3","Click the time associated with any item to play the video from that point."),n.html(r);for(var o=t("<ul>"),l=0;l<a.length;l++){var h="aria-search-result-"+l,p=t("<li>",{}),c=this.secondsToTime(a[l].start),u=this.translate("searchButtonLabel","Play at %1",[c.title]),d=t("<button>",{class:"able-search-results-time","data-start":a[l].start,title:u,"aria-label":u,"aria-describedby":h});d.text(c.value),d.on("click",function(i){e.seekTrigger="search";var s=parseFloat(t(this).attr("data-start"));s+=.01,e.seeking=!0,e.seekTo(s)});var g=t("<span>",{class:"able-search-result-text",id:h});g.html("..."+a[l].caption+"..."),p.append(d,g),o.append(p)}t("#"+this.searchDiv).html(s).append(n,o)}else{var f=t("<p>").text(this.translate("noResultsFound","No results found."));t("#"+this.searchDiv).html(s).append(f)}}}},AblePlayer.prototype.searchFor=function(e,i){var s,a,n,r,o,l,h;n=[];var p=e.split(" ");if(this.captions.length>0){for(l=0;l<this.captions.length;l++)this.captions[l].language===this.searchLang&&(s=this.searchLang,a=this.captions[l].cues);if(a.length>0)for(o=0,l=0;l<a.length;l++)if(-1!==t.inArray(a[l].components.children[0].type,["string","i","b","u","v","c"])){r=this.flattenCueForCaption(a[l]);var c=i?r.toLowerCase():r;for(h=0;h<p.length;h++){var u=i?p[h].toLowerCase():p[h];if(-1!==c.indexOf(u)){n[o]=[],n[o].start=a[l].start,n[o].lang=s,n[o].caption=this.highlightSearchTerm(p,r),o++;break}}}}return n},AblePlayer.prototype.highlightSearchTerm=function(t,e){return t.forEach(function(t){var i=new RegExp(t,"gi");e=e.replace(i,'<span class="able-search-term">$&</span>')}),e},AblePlayer.prototype.secondsToTime=function(t){t=Math.floor(t);var e=parseInt(t/3600,10)%24,i=parseInt(t/60,10)%60,s=t%60,a="",n="";e>0&&(a+=e+":",n+=1==e?"1 "+this.translate("hour","hour")+" ":e+" "+this.translate("hours","hours")+" "),i<10?(a+="0"+i+":",i>0&&(n+=1==i?"1 "+this.translate("minute","minute")+" ":i+" "+this.translate("minutes","minutes")+" ")):(a+=i+":",n+=i+" "+this.translate("minutes","minutes")+" "),s<10?(a+="0"+s,s>0&&(n+=1==s?"1 "+this.translate("second","second")+" ":s+" "+this.translate("seconds","seconds")+" ")):(a+=s,n+=s+" "+this.translate("seconds","seconds")+" ");var r=[];return r.value=a,r.title=n,r}}(jQuery),function(t){AblePlayer.prototype.onMediaUpdateTime=function(t,e){var i=this;this.getMediaTimes(t,e).then(function(t){i.duration=t.duration,i.elapsed=t.elapsed,i.duration>0&&(1===i.prefHighlight&&i.highlightTranscript(i.elapsed),i.updateCaption(i.elapsed),i.showDescription(i.elapsed),i.updateChapter(i.elapsed),i.updateMeta(i.elapsed),i.refreshControls("timeline",i.duration,i.elapsed))})},AblePlayer.prototype.onMediaPause=function(){this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear"),this.refreshControls("playpause")},AblePlayer.prototype.onMediaComplete=function(){this.hasPlaylist&&!this.cueingPlaylistItem&&(this.playlistIndex===this.$playlist.length-1?this.loop?(this.playlistIndex=0,this.cueingPlaylistItem=!0,this.cuePlaylistItem(0)):(this.playing=!1,this.paused=!0):(this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex))),this.refreshControls()},AblePlayer.prototype.onMediaNewSourceLoad=function(){var t=!1;this.cueingPlaylistItem&&(this.cueingPlaylistItem=!1),this.recreatingPlayer&&(this.recreatingPlayer=!1),this.playbackRate&&this.setPlaybackRate(this.playbackRate),this.userClickedPlaylist?this.startedPlaying&&!this.okToPlay\|\|(this.playMedia(),t=!0):"restart"==this.seekTrigger\|\|"chapter"==this.seekTrigger\|\|"transcript"==this.seekTrigger\|\|"search"==this.seekTrigger?(this.playMedia(),t=!0):this.swappingSrc?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length\|\|this.loop)&&(this.playMedia(),t=!0):this.swapTime>0?"complete"===this.seekStatus?(this.okToPlay&&this.playMedia(),t=!0):"seeking"===this.seekStatus\|\|(this.swapTime===this.elapsed?(this.seekStatus="complete",this.okToPlay&&this.playMedia(),t=!0):this.hasDescTracks?t=!0:this.durationsAreCloseEnough(this.duration,this.prevDuration)?(this.seekStatus="seeking",this.seekTo(this.swapTime)):t=!0):this.playing&&(this.playMedia(),t=!0):this.startedPlaying?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length\|\|this.loop)&&(this.playMedia(),t=!0):t=!0:this.startTime>0?this.seeking?(this.seeking=!1,this.okToPlay&&this.playMedia(),t=!0):this.seekTo(this.startTime):this.defaultChapter&&void 0!==this.selectedChapters?this.seekToChapter(this.defaultChapter):(this.okToPlay&&this.playMedia(),t=!0),t&&(this.swappingSrc=!1,this.seekStatus=null,this.swapTime=0,this.seekTrigger=null,this.seekingFromTranscript=!1,this.userClickedPlaylist=!1,this.okToPlay=!1),this.refreshControls(),this.$focusedElement&&(this.restoreFocus(),this.$focusedElement=null,this.activeMedia=null)},AblePlayer.prototype.durationsAreCloseEnough=function(t,e){return Math.abs(Math.round(t)-Math.round(e))<=1},AblePlayer.prototype.restoreFocus=function(){var e,i;this.$focusedElement&&null!==this.activeMedia&&(i=t("#"+this.activeMedia).closest(".able"),"button"===this.$focusedElement.attr("role")&&(e=this.$focusedElement.attr("class").split(/\s+/),t.each(e,function(t,e){"able-button-handler-"===e.substring(0,20)&&i.find("div.able-controller div."+e).trigger("focus")})))},AblePlayer.prototype.addSeekbarListeners=function(){var t=this;this.seekBar.bodyDiv.on("startTracking",function(e){t.pausedBeforeTracking=t.paused,t.pauseMedia()}).on("tracking",function(e,i){t.highlightTranscript(i),t.updateCaption(i),t.showDescription(i),t.updateChapter(t.convertChapterTimeToVideoTime(i)),t.updateMeta(i),t.refreshControls()}).on("stopTracking",function(e,i){t.useChapterTimes?t.seekTo(t.convertChapterTimeToVideoTime(i)):t.seekTo(i),t.pausedBeforeTracking\|\|setTimeout(function(){t.playMedia()},200)})},AblePlayer.prototype.onClickPlayerButton=function(e){var i;switch(this.getButtonNameFromClass(t(e).attr("class"))){case"play":this.clickedPlay=!0,this.handlePlay();break;case"restart":this.seekTrigger="restart",this.handleRestart();break;case"previous":this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="previous",this.buttonWithFocus="previous",this.handlePrevTrack();break;case"next":this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="next",this.buttonWithFocus="next",this.handleNextTrack();break;case"rewind":this.seekTrigger="rewind",this.handleRewind();break;case"forward":this.seekTrigger="forward",this.handleFastForward();break;case"mute":this.handleMute();break;case"volume":this.handleVolumeButtonClick();break;case"faster":this.handleRateIncrease();break;case"slower":this.handleRateDecrease();break;case"captions":this.handleCaptionToggle();break;case"chapters":this.handleChapters();break;case"descriptions":this.handleDescriptionToggle();break;case"sign":this.closingSign\|\|this.handleSignToggle();break;case"preferences":"menu"===t(e).attr("data-prefs-popup")?this.handlePrefsClick():(this.showingPrefsDialog=!0,this.closePopups(),"keyboard"===(i=t(e).attr("data-prefs-popup"))?this.keyboardPrefsDialog.show():"captions"===i?this.captionPrefsDialog.show():"descriptions"===i?this.descPrefsDialog.show():"transcript"===i&&this.transcriptPrefsDialog.show(),this.showingPrefsDialog=!1);break;case"transcript":this.closingTranscript\|\|this.handleTranscriptToggle();break;case"fullscreen":this.clickedFullscreenButton=!0,this.handleFullscreenToggle()}},AblePlayer.prototype.getButtonNameFromClass=function(t){var e,i;for(e=t.split(" "),i=0;i<e.length;i++)if("able-button-handler-"===e[i].substring(0,20))return e[i].substring(20);return t},AblePlayer.prototype.okToHandleKeyPress=function(){let e=!0;1===this.prefNoKeyShortcuts&&(e=!1);var i=AblePlayer.getActiveDOMElement();return"INPUT"!==t(i).prop("tagName")&&e},AblePlayer.prototype.onPlayerKeyPress=function(e){var i,s;return i=e.key,s=t(document.activeElement),"Escape"===i&&this.$transcriptArea&&t.contains(this.$transcriptArea[0],s[0])&&!this.hidingPopup?(this.handleTranscriptToggle(),!1):!!this.okToHandleKeyPress()&&void(t(":focus").is("[contenteditable]")\|\|t(":focus").is("input")\|\|t(":focus").is("textarea")&&!this.stenoMode\|\|t(":focus").is("select")\|\|e.target.hasAttribute("contenteditable")\|\|"INPUT"===e.target.tagName\|\|"TEXTAREA"===e.target.tagName&&!this.stenoMode\|\|"SELECT"===e.target.tagName\|\|("Escape"===i?(this.closePopups(),this.$tooltipDiv.hide(),this.seekBar.hideSliderTooltips()):" "===i?"button"===s.attr("role")&&(e.preventDefault(),s.trigger("click")):"p"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePlay()):"s"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRestart()):"m"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleMute()):"v"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeButtonClick()):i>=0&&i<=9?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeKeystroke(i)):"c"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleCaptionToggle()):"d"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleDescriptionToggle()):"f"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleFastForward()):"r"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRewind()):"b"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrevTrack()):"n"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleNextTrack()):"e"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrefsClick()):"Enter"===i&&("button"===s.attr("role")\|\|"SPAN"===s.prop("tagName")\|\|"LI"===s.prop("tagName"))&&s.trigger("click")))},AblePlayer.prototype.addHtml5MediaListeners=function(){var t=this;this.$media.on("emptied",function(){}).on("loadedmetadata",function(){t.duration=t.media.duration}).on("canplay",function(){}).on("canplaythrough",function(){t.onMediaNewSourceLoad()}).on("play",function(){}).on("playing",function(){t.playing=!0,t.paused=!1,t.swappingSrc=!1,t.refreshControls("playpause")}).on("ended",function(){t.playing=!1,t.paused=!0,t.onMediaComplete()}).on("progress",function(){t.refreshControls("timeline")}).on("waiting",function(){}).on("durationchange",function(){t.refreshControls("timeline")}).on("timeupdate",function(){t.onMediaUpdateTime()}).on("pause",function(){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist\|\|t.swappingSrc\|\|(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause()}).on("ratechange",function(){}).on("volumechange",function(){t.volume=t.getVolume()}).on("error",function(){t.debug&&t.media.error.code})},AblePlayer.prototype.addVimeoListeners=function(){var t=this;this.vimeoPlayer.on("loaded",function(e){t.onMediaNewSourceLoad()}),this.vimeoPlayer.on("play",function(e){t.playing=!0,t.startedPlaying=!0,t.paused=!1,t.refreshControls("playpause")}),this.vimeoPlayer.on("ended",function(e){t.playing=!1,t.paused=!0,t.onMediaComplete()}),this.vimeoPlayer.on("bufferstart",function(){}),this.vimeoPlayer.on("bufferend",function(){}),this.vimeoPlayer.on("progress",function(t){}),this.vimeoPlayer.on("seeking",function(t){}),this.vimeoPlayer.on("seeked",function(t){}),this.vimeoPlayer.on("timeupdate",function(e){t.onMediaUpdateTime(e.duration,e.seconds)}),this.vimeoPlayer.on("pause",function(e){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist\|\|t.swappingSrc\|\|(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause(),t.refreshControls("playpause")}),this.vimeoPlayer.on("playbackratechange",function(e){t.vimeoPlaybackRate=e.playbackRate}),this.vimeoPlayer.on("texttrackchange",function(t){}),this.vimeoPlayer.on("volumechange",function(e){t.volume=10e.volume}),this.vimeoPlayer.on("error",function(t){})},AblePlayer.prototype.addEventListeners=function(){var e=this;if(t(window).on("resize",function(){e.resizePlayer()}),window.MutationObserver){var i=this.$ableDiv[0];new MutationObserver(function(t){t.forEach(function(t){"attributes"===t.type&&"style"===t.attributeName&&e.$ableDiv.is(":visible")&&e.refreshControls()})}).observe(i,{attributes:!0,childList:!0,characterData:!0})}void 0!==this.seekBar?this.addSeekbarListeners():setTimeout(function(){void 0!==e.seekBar&&e.addSeekbarListeners()},2e3),this.$controllerDiv.find('div[role="button"]').on("click",function(t){t.stopPropagation(),e.onClickPlayerButton(this)}),t("body").on("click",function(i){if(0!==i.button)return!1;(t(".able-popup:visible").length\|\|t(".able-volume-slider:visible").length)&&e.closePopups(),"VIDEO"===i.target.tagName&&(e.clickedPlay=!0)}),this.$ableDiv.on("mousemove",function(){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),t(document).on("keydown",function(t){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),this.$ableDiv.on("keydown",function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)}),this.stenoMode&&void 0!==this.stenoFrameContents&&this.stenoFrameContents.on("keydown",function(t){e.onPlayerKeyPress(t)}),this.$transcriptArea&&this.$transcriptArea.on("keydown",function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)}),this.$playlist&&this.$playlist.on("click",function(i){e.userClickedPlaylist\|\|(e.userClickedPlaylist=!0,e.playlistIndex=t(this).index(),e.cuePlaylistItem(e.playlistIndex))}),this.$media.on("click",function(){e.handlePlay()}),"html5"===this.player?this.addHtml5MediaListeners():"vimeo"===this.player?this.addVimeoListeners():"youtube"===this.player&&setInterval(function(){e.onMediaUpdateTime()},300)}}(jQuery),function(t){AblePlayer.prototype.initDragDrop=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,g;for(i=this,"transcript"===e?(s=this.$transcriptArea,n="transcript-window",(a=this.$transcriptToolbar).attr("aria-label",this.translate("transcriptControls","Transcript Window Controls"))):"sign"===e&&(s=this.$signWindow,n="sign-window",(a=this.$signToolbar).attr("aria-label",this.translate("signControls","Sign Language Window Controls"))),a.addClass("able-draggable"),a.attr("role","application"),$dragHandle=t("<div>",{class:"able-drag-handle"}),$dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'),r=t("<div>",{class:"able-resizable"}),o=t("<svg>").attr({width:"100%",height:"100%",viewBox:"0 0 100 100",preserveAspectRatio:"none"}),l=1;l<=3;l++)1===l?(h="100",p="0",c="0",u="100"):2===l?(h="33",p="100",c="100",u="33"):3===l&&(h="67",p="100",c="100",u="67"),d=t("<line>").attr({x1:h,y1:p,x2:c,y2:u,"vector-effect":"non-scaling-stroke"}),o.append(d);r.html(o),g=parseInt(s.css("z-index"))+100,r.css("z-index",g),s.append(r),a.append($dragHandle),r.html(r.html()),$dragHandle.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type\|\|"touchstart"===t.type?i.windowMenuClickRegistered\|\|(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.dragDevice="mouse",i.startDrag(e,s)):"mouseup"!==t.type&&"touchend"!==t.type\|\|i.dragging&&"mouse"===i.dragDevice&&i.endDrag(e),!1}),r.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type\|\|"touchstart"===t.type?i.windowMenuClickRegistered\|\|(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.startResize(e,s)):"mouseup"!==t.type&&"touchend"!==t.type\|\|i.resizing&&i.endResize(e),!1}),s.on("click",function(){i.windowMenuClickRegistered\|\|i.finishingDrag\|\|i.updateZIndex(e),i.finishingDrag=!1}),this.addWindowMenu(e,s,n)},AblePlayer.prototype.addWindowMenu=function(e,i,s){var a,n,r,o,l,h,p;a=this,this.windowMenuClickRegistered=!1,this.finishingDrag=!1,p=this.mediaId+"-"+s+"-menu",r=t("<button>",{type:"button",tabindex:"0","aria-haspopup":"true","aria-controls":p,"aria-expanded":"false",class:"able-button-handler-preferences"}),this.getIcon(r,"preferences"),this.setText(r,this.translate("windowButtonLabel","Window options")),o=this.mediaId+"-"+s+"-tooltip",l=t("<div>",{class:"able-tooltip",id:o}).hide(),r.on("mouseenter focus",function(e){var i=t(this).attr("aria-label"),s=AblePlayer.localGetElementById(r[0],o).text(i),n={right:"",left:"0px",top:-1(s.height()+2)+"px"};s.css(n),a.showTooltip(s),t(this).on("mouseleave blur",function(){AblePlayer.localGetElementById(r[0],o).text("").hide()})}),h=this.setupPopups(s),"transcript"===e?(this.$transcriptPopupButton=r,this.$transcriptPopup=h,this.$transcriptToolbar.prepend(n,r,l,h)):"sign"===e&&(this.$signPopupButton=r,this.$signPopup=h,this.$signToolbar.append(n,r,l,h)),r.on("click keydown",function(t){return!a.focusNotClick&&(a.dragging?(a.dragKeys(e,t),!1):(t.stopPropagation(),a.windowMenuClickRegistered\|\|a.finishingDrag\|\|a.handleWindowButtonClick(e,t),void(a.finishingDrag=!1)))}),this.addResizeDialog(e,i)},AblePlayer.prototype.addResizeDialog=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,g,f,m,v,y,b,P;s=this,"transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton),r=this.mediaId+"-resize-"+e+"-width",o=this.mediaId+"-resize-"+e+"-height",l=t("<div></div>",{class:"able-resize-form"}),h=t("<div></div>"),$resizeControls=t('<div class="able-prefs-buttons"></div>'),p=t("<div></div>"),c=t("<input>",{type:"number",id:r,min:0,value:""}),u=t("<label>",{for:r}).text(this.translate("width","Width")),d=t("<div></div>"),g=t("<input>",{type:"number",id:o,min:0,value:""}),f=t("<label>",{for:o}).text(this.translate("height","Height")),m=t('<button class="modal-button">'+this.translate("save","Save")+"</button>"),v=t('<button class="modal-button">'+this.translate("cancel","Cancel")+"</button>"),m.on("click",function(){y=t("#"+r).val(),b=t("#"+o).val(),s.resizeObject(e,y,b),s.updatePreferences(e),P.hide(),a.hide(),n.trigger("focus")}),v.on("click",function(){P.hide(),a.hide(),n.trigger("focus")}),p.append(u,c),d.append(f,g),h.append(p,d),$resizeControls.append(m,v),l.append(h,$resizeControls),t("body").append(l),P=new AccessibleDialog(l,n,this.translate("windowResizeHeading","Resize Window"),this.translate("closeButtonLabel","Close")),"transcript"===e?this.transcriptResizeDialog=P:"sign"===e&&(this.signResizeDialog=P)},AblePlayer.prototype.handleWindowButtonClick=function(e,i){var s,a,n,r,o;if(s=this,this.focusNotClick)return!1;if("transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton,r=this.$transcriptToolbar):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton,r=this.$signToolbar),"keydown"===i.type)if(" "===i.key\|\|"Enter"===i.key)this.windowMenuClickRegistered=!0;else{if("Escape"!==i.key)return!1;a.is(":visible")?(a.hide(),s.windowMenuClickRegistered=!1,a.find("li").removeClass("able-focus").attr("tabindex","-1"),n.trigger("focus")):"sign"===e?this.handleSignToggle():"transcript"===e&&this.handleTranscriptToggle()}else this.windowMenuClickRegistered=!0;a.is(":visible")?(a.hide(),s.windowMenuClickRegistered=!1,a.find("li").removeClass("able-focus"),n.attr("aria-expanded","false").trigger("focus")):(this.updateZIndex(e),o=r.outerHeight()-1,a.css("top",o),a.show(),n.attr("aria-expanded","true"),t(this).find("li").first().trigger("focus").addClass("able-focus"),s.windowMenuClickRegistered=!1)},AblePlayer.prototype.handleMenuChoice=function(e,i,s){var a,n,r,o,l,h,p,c,u;if("transcript"===e?(a=this.$transcriptArea,n=this.$transcriptPopup,r=this.$transcriptPopupButton,o=this.transcriptResizeDialog):"sign"===e&&(a=this.$signWindow,n=this.$signPopup,r=this.$signPopupButton,o=this.signResizeDialog,l=a.outerWidth(),h=a.outerHeight(),p=l/h,widthId=this.mediaId+"-resize-"+e+"-width",heightId=this.mediaId+"-resize-"+e+"-height",t("#"+heightId).prop("readonly",!0),t("#"+widthId).on("input",function(){c=t(this).val(),u=Math.round(c/p),t("#"+heightId).val(u)})),this.$activeWindow=a,"keydown"===s.type)return"Escape"===s.key?(n.hide(),this.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),r.trigger("focus"),!1):("close"!==i&&(this.$activeWindow=a),!1);if(n.hide(),this.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),"close"!==i&&r.trigger("focus"),"move"===i)this.$activeWindow.attr("role","application"),this.showedAlert(e)\|\|(this.showAlert(this.translate("windowMoveAlert","Drag or use arrow keys to move the window; Enter to stop"),e),"transcript"===e?this.showedTranscriptAlert=!0:"sign"===e&&(this.showedSignAlert=!0)),this.dragDevice="keydown"===s.type?"keyboard":"mouse",this.startDrag(e,a),n.hide().parent().attr("tabindex","-1").trigger("focus");else if("resize"==i){var d=o.getInputs();d&&(d[0].value=Math.round(a.outerWidth()),d[1].value=Math.round(a.outerHeight())),o.show()}else"close"==i&&("transcript"===e?(this.closingTranscript=!0,this.handleTranscriptToggle()):"sign"===e&&(this.closingSign=!0,this.handleSignToggle()))},AblePlayer.prototype.startDrag=function(e,i){var s,a,n,r,o;s=this,this.$activeWindow\|\|(this.$activeWindow=i),this.dragging=!0,"transcript"===e?a=this.$transcriptPopup:"sign"===e&&(a=this.$signPopup),a.is(":visible")&&a.hide(),this.updateZIndex(e),n=this.$activeWindow.position(),this.dragStartX=n.left,this.dragStartY=n.top,void 0===this.startMouseX?(this.dragDevice="keyboard",this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.startingDrag=!0):(this.dragDevice="mouse",this.dragOffsetX=this.startMouseX-this.dragStartX,this.dragOffsetY=this.startMouseY-this.dragStartY),this.$activeWindow.addClass("able-drag").css({position:"absolute",top:this.dragStartY+"px",left:this.dragStartX+"px"}).trigger("focus");this.dragDevice;return"mouse"===this.dragDevice?t(document).on("mousemove touchmove",function(t){s.dragging&&(r=t.pageX-s.dragOffsetX,o=t.pageY-s.dragOffsetY,s.resetDraggedObject(r,o))}):"keyboard"===this.dragDevice&&this.$activeWindow.on("keydown",function(t){s.dragging&&s.dragKeys(e,t)}),!1},AblePlayer.prototype.dragKeys=function(t,e){if(this.startingDrag)return this.startingDrag=!1,!1;switch(e.key){case"ArrowLeft":this.dragKeyX-=10,this.$srAlertBox.text(this.translate("windowMoveLeft","Window moved left"));break;case"ArrowUp":this.dragKeyY-=10,this.$srAlertBox.text(this.translate("windowMoveUp","Window moved up"));break;case"ArrowRight":this.dragKeyX+=10,this.$srAlertBox.text(this.translate("windowMoveRight","Window moved right"));break;case"ArrowDown":this.dragKeyY+=10,this.$srAlertBox.text(this.translate("windowMoveDown","Window moved down"));break;case"Enter":case"Escape":return this.$srAlertBox.text(this.translate("windowMoveStopped","Window move stopped")),this.endDrag(t),!1;default:return!1}return this.resetDraggedObject(this.dragKeyX,this.dragKeyY),e.preventDefault&&e.preventDefault(),!1},AblePlayer.prototype.resetDraggedObject=function(t,e){setTimeout(()=>{this.$srAlertBox.text("")},2e3),this.$activeWindow.css({left:t+"px",top:e+"px"})},AblePlayer.prototype.resizeObject=function(t,e,i){var s;this.$activeWindow.css({width:e+"px",height:i+"px"}),"transcript"===t&&(s=i-50,this.$transcriptDiv.css("height",s+"px"))},AblePlayer.prototype.endDrag=function(e){var i,s;i=this,"transcript"===e?(this.$transcriptPopup,s=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,s=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown").removeClass("able-drag"),this.$activeWindow.attr("role","dialog"),this.$activeWindow=null,"keyboard"===this.dragDevice&&s.trigger("focus"),this.dragging=!1,this.updatePreferences(e),this.startMouseX=void 0,this.startMouseY=void 0,this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){i.finishingDrag=!1},100)},AblePlayer.prototype.startResize=function(e,i){var s,a,n,r;return s=this,this.$activeWindow=i,this.resizing=!0,(a="transcript"===e?this.$transcriptPopup:this.$signPopup).is(":visible")&&a.hide().parent().trigger("focus"),startPos=this.$activeWindow.position(),this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.dragStartWidth=this.$activeWindow.width(),this.dragStartHeight=this.$activeWindow.outerHeight(),t(document).on("mousemove touchmove",function(t){s.resizing&&(n=s.dragStartWidth+(t.pageX-s.startMouseX),r=s.dragStartHeight+(t.pageY-s.startMouseY),s.resizeObject(e,n,r))}),!1},AblePlayer.prototype.endResize=function(e){var i;"transcript"===e?(this.$transcriptPopup,i=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,i=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown"),i.show().trigger("focus"),this.resizing=!1,this.$activeWindow.removeClass("able-resize"),this.updatePreferences(e),this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){this.finishingDrag=!1},100)}}(jQuery),function(t){AblePlayer.prototype.initSignLanguage=function(){this.hasSignLanguage=!1;var t=void 0!==this.$sources.first().attr("data-sign-src")&&""!==this.$sources.first().attr("data-sign-src"),e=void 0!==this.$media.data("youtube-sign-src")&&""!==this.$media.data("youtube-sign-src"),i=void 0!==this.$sources.first().attr("data-youtube-sign-src")&&""!==this.$sources.first().attr("data-youtube-sign-src");if(!this.isIOS()&&(t\|\|e\|\|i)&&("html5"===this.player\|\|"youtube"===this.player)){let s=this.youTubeSignId??DOMPurify.sanitize(this.$sources.first().attr("data-youtube-sign-src")),a=DOMPurify.sanitize(this.$sources.first().attr("data-sign-src")),n=DOMPurify.sanitize(this.$media.data("youtube-sign-src"));this.signFile=!!t&&a,e?this.signYoutubeId=n:i&&(this.signYoutubeId=s),(this.signFile\|\|this.signYoutubeId)&&(this.isIOS()?this.debug:(this.debug,this.hasSignLanguage=!0,this.injectSignPlayerCode()))}},AblePlayer.prototype.injectSignPlayerCode=function(){var e,i,s,a,n;if(e=this.mediaId+"-sign",(this.signFile\|\|this.signYoutubeId)&&(null!==this.$signDivLocation?(this.$signDivLocation.addClass("able-sign-window able-fixed"),this.$signWindow=this.$signDivLocation):(this.$signWindow=t("<div>",{class:"able-sign-window",role:"dialog","aria-label":this.translate("sign","Sign language")}),this.$signToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$signWindow.append(this.$signToolbar)),this.$ableWrapper.append(this.$signWindow)),this.signFile){if(this.$signVideo=t("<video>",{id:e,tabindex:"-1",muted:!0}),this.signVideo=this.$signVideo[0],this.signFile)n=t("<source>",{src:this.signFile,type:"video/"+this.signFile.substr(-3)}),this.$signVideo.append(n);else for(i=0;i<this.$sources.length;i++){if(s=DOMPurify.sanitize(this.$sources[i].getAttribute("data-sign-src")),a=this.$sources[i].getAttribute("type"),!s)return void(this.hasSignLanguage=!1);n=t("<source>",{src:s,type:a}),this.$signVideo.append(n)}this.$signWindow.append(this.$signVideo)}else this.signYoutubeId&&(this.signYoutube=this.initYouTubeSignPlayer());null===this.$signDivLocation&&this.initDragDrop("sign"),1===this.prefSign?null===this.$signDivLocation&&this.positionDraggableWindow("sign",this.getDefaultWidth("sign")):this.$signWindow.hide()},AblePlayer.prototype.initYouTubeSignPlayer=function(){var e,i,s;return e=this,s=(i=new this.defer).promise(),this.youTubeSignPlayerReady=!1,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeSignInit().then(function(){i.resolve()}):(AblePlayer.loadingYouTubeIframeAPI\|\|e.getScript("https://www.youtube.com/iframe_api",function(){}),t("body").on("youTubeIframeAPIReady",function(){e.finalizeYoutubeSignInit().then(function(){i.resolve()})})),s},AblePlayer.prototype.finalizeYoutubeSignInit=function(){var e,i,s,a,n;return i=(e=new this.defer).promise(),s=this,a=this.mediaId+"_youtube_sign",this.$signWindow.append(t("<div>").attr("id",a)),n=this.okToPlay?1:0,this.youTubeSignPlayer=new YT.Player(a,{videoId:this.getYouTubeId(this.signYoutubeId),host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,cc_lang_pref:this.captionLang,cc_load_policy:0,controls:0,disableKb:1,enablejsapi:1,hl:this.lang,iv_load_policy:3,origin:window.location.origin,playsinline:this.playsInline,rel:0,start:this.startTime},events:{onReady:function(t){t.target.mute(),t.target.unloadModule("captions"),s.youTubeSignPlayerReady=!0,e.resolve()},onError:function(t){e.reject()},onStateChange:function(t){s.getPlayerState().then(function(){})},onApiChange:function(){},onPlaybackQualityChange:function(){}}}),i}}(jQuery),function(){var t={ab:{name:"Abkhaz",nativeName:"аҧсуа"},aa:{name:"Afar",nativeName:"Afaraf"},af:{name:"Afrikaans",nativeName:"Afrikaans"},ak:{name:"Akan",nativeName:"Akan"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"አማርኛ"},ar:{name:"Arabic",nativeName:"العربية"},an:{name:"Aragonese",nativeName:"Aragonés"},hy:{name:"Armenian",nativeName:"Հայերեն"},as:{name:"Assamese",nativeName:"অসমীয়া"},av:{name:"Avaric",nativeName:"авар мацӀ, магӀарул мацӀ"},ae:{name:"Avestan",nativeName:"avesta"},ay:{name:"Aymara",nativeName:"aymar aru"},az:{name:"Azerbaijani",nativeName:"azərbaycan dili"},bm:{name:"Bambara",nativeName:"bamanankan"},ba:{name:"Bashkir",nativeName:"башҡорт теле"},eu:{name:"Basque",nativeName:"euskara, euskera"},be:{name:"Belarusian",nativeName:"Беларуская"},bn:{name:"Bengali",nativeName:"বাংলা"},bh:{name:"Bihari",nativeName:"भोजपुरी"},bi:{name:"Bislama",nativeName:"Bislama"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},br:{name:"Breton",nativeName:"brezhoneg"},bg:{name:"Bulgarian",nativeName:"български език"},my:{name:"Burmese",nativeName:"ဗမာစာ"},ca:{name:"Catalan",nativeName:"Català"},ch:{name:"Chamorro",nativeName:"Chamoru"},ce:{name:"Chechen",nativeName:"нохчийн мотт"},ny:{name:"Chichewa",nativeName:"chiCheŵa, chinyanja"},zh:{name:"Chinese",nativeName:"中文 (Zhōngwén), 汉语, 漢語"},cv:{name:"Chuvash",nativeName:"чӑваш чӗлхи"},kw:{name:"Cornish",nativeName:"Kernewek"},co:{name:"Corsican",nativeName:"corsu, lingua corsa"},cr:{name:"Cree",nativeName:"ᓀᐦᐃᔭᐍᐏᐣ"},hr:{name:"Croatian",nativeName:"hrvatski"},cs:{name:"Czech",nativeName:"česky, čeština"},da:{name:"Danish",nativeName:"dansk"},dv:{name:"Divehi",nativeName:"ދިވެހި"},nl:{name:"Dutch",nativeName:"Nederlands, Vlaams"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti, eesti keel"},ee:{name:"Ewe",nativeName:"Eʋegbe"},fo:{name:"Faroese",nativeName:"føroyskt"},fj:{name:"Fijian",nativeName:"vosa Vakaviti"},fi:{name:"Finnish",nativeName:"suomi, suomen kieli"},fr:{name:"French",nativeName:"français, langue française"},ff:{name:"Fula",nativeName:"Fulfulde, Pulaar, Pular"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"ქართული"},de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"Ελληνικά"},gn:{name:"Guaraní",nativeName:"Avañeẽ"},gu:{name:"Gujarati",nativeName:"ગુજરાતી"},ht:{name:"Haitian",nativeName:"Kreyòl ayisyen"},ha:{name:"Hausa",nativeName:"Hausa, هَوُسَ"},he:{name:"Hebrew",nativeName:"עברית"},hz:{name:"Herero",nativeName:"Otjiherero"},hi:{name:"Hindi",nativeName:"हिन्दी, हिंदी"},ho:{name:"Hiri Motu",nativeName:"Hiri Motu"},hu:{name:"Hungarian",nativeName:"Magyar"},ia:{name:"Interlingua",nativeName:"Interlingua"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ie:{name:"Interlingue",nativeName:"Originally called Occidental; then Interlingue after WWII"},ga:{name:"Irish",nativeName:"Gaeilge"},ig:{name:"Igbo",nativeName:"Asụsụ Igbo"},ik:{name:"Inupiaq",nativeName:"Iñupiaq, Iñupiatun"},io:{name:"Ido",nativeName:"Ido"},is:{name:"Icelandic",nativeName:"Íslenska"},it:{name:"Italian",nativeName:"Italiano"},iu:{name:"Inuktitut",nativeName:"ᐃᓄᒃᑎᑐᑦ"},ja:{name:"Japanese",nativeName:"日本語 (にほんご／にっぽんご)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kl:{name:"Kalaallisut",nativeName:"kalaallisut, kalaallit oqaasii"},kn:{name:"Kannada",nativeName:"ಕನ್ನಡ"},kr:{name:"Kanuri",nativeName:"Kanuri"},ks:{name:"Kashmiri",nativeName:"कश्मीरी, كشميري‎"},kk:{name:"Kazakh",nativeName:"Қазақ тілі"},km:{name:"Khmer",nativeName:"ភាសាខ្មែរ"},ki:{name:"Kikuyu",nativeName:"Gĩkũyũ"},rw:{name:"Kinyarwanda",nativeName:"Ikinyarwanda"},ky:{name:"Kyrgyz",nativeName:"кыргыз тили"},kv:{name:"Komi",nativeName:"коми кыв"},kg:{name:"Kongo",nativeName:"KiKongo"},ko:{name:"Korean",nativeName:"한국어 (韓國語), 조선말 (朝鮮語)"},ku:{name:"Kurdish",nativeName:"Kurdî, كوردی‎"},kj:{name:"Kuanyama",nativeName:"Kuanyama"},la:{name:"Latin",nativeName:"latine, lingua latina"},lb:{name:"Luxembourgish",nativeName:"Lëtzebuergesch"},lg:{name:"Luganda",nativeName:"Luganda"},li:{name:"Limburgish",nativeName:"Limburgs"},ln:{name:"Lingala",nativeName:"Lingála"},lo:{name:"Lao",nativeName:"ພາສາລາວ"},lt:{name:"Lithuanian",nativeName:"lietuvių kalba"},lu:{name:"Luba-Katanga",nativeName:""},lv:{name:"Latvian",nativeName:"latviešu valoda"},gv:{name:"Manx",nativeName:"Gaelg, Gailck"},mk:{name:"Macedonian",nativeName:"македонски јазик"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu, بهاس ملايو‎"},ml:{name:"Malayalam",nativeName:"മലയാളം"},mt:{name:"Maltese",nativeName:"Malti"},mi:{name:"Māori",nativeName:"te reo Māori"},mr:{name:"Marathi",nativeName:"मराठी"},mh:{name:"Marshallese",nativeName:"Kajin M̧ajeļ"},mn:{name:"Mongolian",nativeName:"монгол"},na:{name:"Nauru",nativeName:"Ekakairũ Naoero"},nv:{name:"Navajo",nativeName:"Diné bizaad, Dinékʼehǰí"},nb:{name:"Norwegian Bokmål",nativeName:"Norsk bokmål"},nd:{name:"North Ndebele",nativeName:"isiNdebele"},ne:{name:"Nepali",nativeName:"नेपाली"},ng:{name:"Ndonga",nativeName:"Owambo"},nn:{name:"Norwegian Nynorsk",nativeName:"Norsk nynorsk"},no:{name:"Norwegian",nativeName:"Norsk"},ii:{name:"Nuosu",nativeName:"ꆈꌠ꒿ Nuosuhxop"},nr:{name:"South Ndebele",nativeName:"isiNdebele"},oc:{name:"Occitan",nativeName:"Occitan"},oj:{name:"Ojibwe",nativeName:"ᐊᓂᔑᓈᐯᒧᐎᓐ"},cu:{name:"Church Slavonic",nativeName:"ѩзыкъ словѣньскъ"},om:{name:"Oromo",nativeName:"Afaan Oromoo"},or:{name:"Oriya",nativeName:"ଓଡ଼ିଆ"},os:{name:"Ossetian",nativeName:"ирон æвзаг"},pa:{name:"Punjabi",nativeName:"ਪੰਜਾਬੀ, پنجابی‎"},pi:{name:"Pāli",nativeName:"पाऴि"},fa:{name:"Persian",nativeName:"فارسی"},pl:{name:"Polish",nativeName:"polski"},ps:{name:"Pashto",nativeName:"پښتو"},pt:{name:"Portuguese",nativeName:"Português"},qu:{name:"Quechua",nativeName:"Runa Simi, Kichwa"},rm:{name:"Romansh",nativeName:"rumantsch grischun"},rn:{name:"Kirundi",nativeName:"kiRundi"},ro:{name:"Romanian",nativeName:"română"},ru:{name:"Russian",nativeName:"русский язык"},sa:{name:"Sanskrit",nativeName:"संस्कृतम्"},sc:{name:"Sardinian",nativeName:"sardu"},sd:{name:"Sindhi",nativeName:"सिन्धी, سنڌي، سندھی‎"},se:{name:"Northern Sami",nativeName:"Davvisámegiella"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},sg:{name:"Sango",nativeName:"yângâ tî sängö"},sr:{name:"Serbian",nativeName:"српски језик"},gd:{name:"Gaelic",nativeName:"Gàidhlig"},sn:{name:"Shona",nativeName:"chiShona"},si:{name:"Sinhalese",nativeName:"සිංහල"},sk:{name:"Slovak",nativeName:"slovenčina"},sl:{name:"Slovene",nativeName:"slovenščina"},so:{name:"Somali",nativeName:"Soomaaliga, af Soomaali"},st:{name:"Southern Sotho",nativeName:"Sesotho"},es:{name:"Spanish",nativeName:"español, castellano"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},ss:{name:"Swati",nativeName:"SiSwati"},sv:{name:"Swedish",nativeName:"svenska"},ta:{name:"Tamil",nativeName:"தமிழ்"},te:{name:"Telugu",nativeName:"తెలుగు"},tg:{name:"Tajik",nativeName:"тоҷикӣ, toğikī, تاجیکی‎"},th:{name:"Thai",nativeName:"ไทย"},ti:{name:"Tigrinya",nativeName:"ትግርኛ"},bo:{name:"Tibetan",nativeName:"བོད་ཡིག"},tk:{name:"Turkmen",nativeName:"Türkmen, Түркмен"},tl:{name:"Tagalog",nativeName:"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔"},tn:{name:"Tswana",nativeName:"Setswana"},to:{name:"Tonga",nativeName:"faka Tonga"},tr:{name:"Turkish",nativeName:"Türkçe"},ts:{name:"Tsonga",nativeName:"Xitsonga"},tt:{name:"Tatar",nativeName:"татарча, tatarça, تاتارچا‎"},tw:{name:"Twi",nativeName:"Twi"},ty:{name:"Tahitian",nativeName:"Reo Tahiti"},ug:{name:"Uyghur",nativeName:"Uyƣurqə, ئۇيغۇرچە‎"},uk:{name:"Ukrainian",nativeName:"українська"},ur:{name:"Urdu",nativeName:"اردو"},uz:{name:"Uzbek",nativeName:"zbek, Ўзбек, أۇزبېك‎"},ve:{name:"Venda",nativeName:"Tshivenḓa"},vi:{name:"Vietnamese",nativeName:"Tiếng Việt"},vo:{name:"Volapük",nativeName:"Volapük"},wa:{name:"Walloon",nativeName:"Walon"},cy:{name:"Welsh",nativeName:"Cymraeg"},wo:{name:"Wolof",nativeName:"Wollof"},fy:{name:"Western Frisian",nativeName:"Frysk"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"ייִדיש"},yo:{name:"Yoruba",nativeName:"Yorùbá"},za:{name:"Zhuang",nativeName:"Saɯ cueŋƅ, Saw cuengh"},"ar-dz":{name:"Arabic (Algeria)",nativeName:"العربية (الجزائر)"},"ar-bh":{name:"Arabic (Bahrain)",nativeName:"العربية (البحرين)"},"ar-eg":{name:"Arabic (Egypt)",nativeName:"العربية (مصر)"},"ar-iq":{name:"Arabic (Iraq)",nativeName:"العربية (العراق)"},"ar-jo":{name:"Arabic (Jordan)",nativeName:"العربية (الأردن)"},"ar-kw":{name:"Arabic (Kuwait)",nativeName:"العربية (الكويت)"},"ar-lb":{name:"Arabic (Lebanon)",nativeName:"العربية (لبنان)"},"ar-ly":{name:"Arabic (Libya)",nativeName:"العربية (ليبيا)"},"ar-ma":{name:"Arabic (Morocco)",nativeName:"العربية (المملكة المغربية)"},"ar-om":{name:"Arabic (Oman)",nativeName:"العربية (عمان)"},"ar-qa":{name:"Arabic (Qatar)",nativeName:"العربية (قطر)"},"ar-sa":{name:"Arabic (Saudi Arabia)",nativeName:"العربية (المملكة العربية السعودية)"},"ar-sy":{name:"Arabic (Syria)",nativeName:"العربية (سوريا)"},"ar-tn":{name:"Arabic (Tunisia)",nativeName:"العربية (تونس)"},"ar-ae":{name:"Arabic (U.A.E.)",nativeName:"العربية (الإمارات العربية المتحدة)"},"ar-ye":{name:"Arabic (Yemen)",nativeName:"العربية (اليمن)"},"de-at":{name:"German (Austria)",nativeName:"Deutsch (Österreich)"},"de-li":{name:"German (Liechtenstein)",nativeName:"Deutsch (Liechtenstein)"},"de-lu":{name:"German (Luxembourg)",nativeName:"Deutsch (Luxemburg)"},"de-ch":{name:"German (Switzerland)",nativeName:"Deutsch (Schweiz)"},"en-au":{name:"English (Australia)",nativeName:"English (Australia)"},"en-bz":{name:"English (Belize)",nativeName:"English (Belize)"},"en-ca":{name:"English (Canada)",nativeName:"English (Canada)"},"en-ie":{name:"English (Ireland)",nativeName:"English (Ireland)"},"en-jm":{name:"English (Jamaica)",nativeName:"English (Jamaica)"},"en-nz":{name:"English (New Zealand)",nativeName:""},"en-za":{name:"English (South Africa)",nativeName:"English (South Africa)"},"en-tt":{name:"English (Trinidad)",nativeName:"English (Trinidad y Tobago)"},"en-gb":{name:"English (United Kingdom)",nativeName:"English (United Kingdom)"},"en-us":{name:"English (United States)",nativeName:"English (United States)"},"es-ar":{name:"Spanish (Argentina)",nativeName:"Español (Argentina)"},"es-bo":{name:"Spanish (Bolivia)",nativeName:"Español (Bolivia)"},"es-cl":{name:"Spanish (Chile)",nativeName:"Español (Chile)"},"es-co":{name:"Spanish (Colombia)",nativeName:"Español (Colombia)"},"es-cr":{name:"Spanish (Costa Rica)",nativeName:"Español (Costa Rica)"},"es-do":{name:"Spanish (Dominican Republic)",nativeName:"Español (República Dominicana)"},"es-ec":{name:"Spanish (Ecuador)",nativeName:"Español (Ecuador)"},"es-sv":{name:"Spanish (El Salvador)",nativeName:"Español (El Salvador)"},"es-gt":{name:"Spanish (Guatemala)",nativeName:"Español (Guatemala)"},"es-hn":{name:"Spanish (Honduras)",nativeName:"Español (Honduras)"},"es-mx":{name:"Spanish (Mexico)",nativeName:"Español (México)"},"es-ni":{name:"Spanish (Nicaragua)",nativeName:"Español (Nicaragua)"},"es-pa":{name:"Spanish (Panama)",nativeName:"Español (Panamá)"},"es-py":{name:"Spanish (Paraguay)",nativeName:"Español (Paraguay)"},"es-pe":{name:"Spanish (Peru)",nativeName:"Español (Perú)"},"es-pr":{name:"Spanish (Puerto Rico)",nativeName:"Español (Puerto Rico)"},"es-uy":{name:"Spanish (Uruguay)",nativeName:"Español (Uruguay)"},"es-ve":{name:"Spanish (Venezuela)",nativeName:"Español (Venezuela)"},"fr-be":{name:"French (Belgium)",nativeName:"français (Belgique)"},"fr-ca":{name:"French (Canada)",nativeName:"français (Canada)"},"fr-lu":{name:"French (Luxembourg)",nativeName:"français (Luxembourg)"},"fr-ch":{name:"French (Switzerland)",nativeName:"français (Suisse)"},"it-ch":{name:"Italian (Switzerland)",nativeName:"italiano (Svizzera)"},"nl-be":{name:"Dutch (Belgium)",nativeName:"Nederlands (België)"},"pt-br":{name:"Portuguese (Brazil)",nativeName:"Português (Brasil)"},"sv-fi":{name:"Swedish (Finland)",nativeName:"svenska (Finland)"},"zh-hk":{name:"Chinese (Hong Kong)",nativeName:"中文(香港特别行政區)"},"zh-cn":{name:"Chinese (PRC)",nativeName:"中文(中华人民共和国)"},"zh-sg":{name:"Chinese (Singapore)",nativeName:"中文(新加坡)"},"zh-tw":{name:"Chinese Traditional (Taiwan)",nativeName:"中文（台灣）"}};AblePlayer.prototype.getLanguageName=function(e,i){var s,a,n;return(s=t[e.toLowerCase()])?"local"===i?s.nativeName:s.name:e.includes("-")&&(a=e.substring(0,2),n=e.substring(3),s=t[a.toLowerCase()])?"local"===i?s.nativeName+" ("+n+")":s.name+" ("+n+")":e}}(jQuery),function(t){AblePlayer.prototype.getSupportedLangs=function(){return{ca:"Catalan",cs:"Czech",da:"Danish",de:"German",en:"English",es:"Spanish",fr:"French",he:"Hebrew",id:"Indonesian",it:"Italian",ja:"Japanese",ms:"Malay",nb:"Norwegian Bokmål",nl:"Dutch",pl:"Polish",pt:"Portuguese","pt-br":"Brazilian Portuguese",sv:"Swedish",tr:"Turkish","zh-tw":"Chinese (Taiwan)"}},AblePlayer.prototype.translate=function(t,e,i=Array()){let s="";return s=this.tt[t]?this.tt[t]:e,i.length>0&&i.forEach((t,e)=>{let i=e+1;s=s.replace("%"+i,t)}),s},AblePlayer.prototype.getTranslationText=function(){var e,i,s,a,n,r;if(e=new this.defer,i=this,s=this.getSupportedLangs(),this.lang&&Object.hasOwn(s,this.lang))if(2==this.lang.indexOf("-"))this.lang=-1!==Object.hasOwn(s,this.lang.substring(0,2))?this.lang.substring(0,2):null;else{r=!1;for(const[t,e]of Object.entries(s))t.substring(0,2)==this.lang&&(this.lang=s[undefined],r=!0);r\|\|(this.lang=null)}return this.lang\|\|(a=t("body").attr("lang")?t("body").attr("lang").toLowerCase():t("html").attr("lang")?t("html").attr("lang").toLowerCase():null)&&(Object.hasOwn(s,a)?this.lang=a:2==a.indexOf("-")&&Object.hasOwn(s,a.substring(0,2))&&(this.lang=a.substring(0,2))),this.lang\|\|(this.lang="en"),this.searchLang\|\|(this.searchLang=this.lang),n=this.rootPath+"translations/"+this.lang+".json",fetch(n).then(t=>t.json()).then(t=>{i.tt=t,i.translationFiles=!0,e.resolve()}).catch(t=>{n=i.rootPath+"translations/"+i.lang+".js",fetch(n).then(t=>t.json()).then(t=>{i.tt=t,i.translationFiles=!0,e.resolve()}).catch(t=>{i.tt={},i.translationFiles=!1,e.resolve()})}),e.promise()},AblePlayer.prototype.getSampleDescriptionText=function(){if(this.translationFiles){var t,e,i,s,a;e=this.getSupportedLangs(),t=this,this.sampleText=[];for(const[n,r]of Object.entries(e))i=this.rootPath+"translations/"+n+".json",fetch(i).then(t=>t.json()).then(e=>{s=e.sampleDescriptionText,a={lang:undefined,text:s},t.sampleText.push(a)})}else{this.sampleText=[];let t={lang:"en",text:this.translate("sampleDescriptionText","Adjust settings to hear this sample text.")};this.sampleText.push(t)}}}(jQuery),function(t){AblePlayer.prototype.injectVTS=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v;if(e=this,null!==document.getElementById("able-vts")&&this.vtsTracks.length){this.langs=[],this.getAllLangs(this.vtsTracks),this.vtsLang=this.lang;let w=this.translate("vtsHeading","Video Transcript Sorter");for(T in i=t("<h2>").text(w),t("#able-vts").append(i),this.$vtsAlert=t("<div>",{id:"able-vts-alert","aria-live":"polite","aria-atomic":"true"}),t("#able-vts").append(this.$vtsAlert),s=t("<div>",{id:"able-vts-instructions"}),a=t("<p>").text(this.translate("vtsInstructions1","Use the Video Transcript Sorter to modify text tracks:")),r=t("<ul>"),o=t("<li>").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.")),l=t("<li>").text(this.translate("vtsInstructions3","Modify content or start/end times (all are directly editable within the table).")),h=t("<li>").text(this.translate("vtsInstructions4","Add new content, such as chapters or descriptions.")),n=t("<p>").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.')),r.append(o,l,h),s.append(a,r,n),t("#able-vts").append(s),p=t("<fieldset>"),c=t("<legend>").text(this.translate("vtsSelectLanguage","Select a language")),p.append(c),$fieldWrapper=t('<div class="vts-lang-selector"></div>'),this.langs)d="vts-lang-radio-"+this.langs[T],u=t("<div>",{}),f=t("<input>",{type:"radio",name:"vts-lang",id:d,value:this.langs[T]}).on("click",function(){e.vtsLang=t(this).val(),e.showVtsAlert("Loading "+e.getLanguageName(e.vtsLang)+" tracks"),e.injectVtsTable("update",e.vtsLang)}),this.langs[T]==this.lang&&f.prop("checked",!0),g=t("<label>",{for:d}).text(this.getLanguageName(this.langs[T])),u.append(f,g),$fieldWrapper.append(u);p.append($fieldWrapper),t("#able-vts").append(p);let C=this.translate("vtsSave","Generate new .vtt content");var y,b,P,k,T;m=t("<button>",{type:"button",id:"able-vts-save",value:"save"}).text(C),t("#able-vts").append(m),this.injectVtsTable("add",this.vtsLang),y=["captions","chapters","descriptions","subtitles"],t('td[contenteditable="true"]').on("focus",function(){b=t(this).text()}).on("blur",function(){b!=t(this).text()&&(P=t(this).index(),k=t(this).text(),1===P?-1===t.inArray(k,y)&&("s"===k.substring(0,1)?t(this).text("subtitles"):"d"===k.substring(0,1)?t(this).text("descriptions"):"ch"===k.substring(0,2)?t(this).text("chapters"):t(this).text("captions")):2!==P&&3!==P\|\|t(this).text(e.formatTimestamp(k)))}).on("keydown",function(t){t.stopPropagation()}),t("#able-vts-save").on("click",function(i){i.stopPropagation(),"save"==t(this).attr("value")?(t(this).attr("value","cancel").text(e.translate("vtsReturn","Return to Editor")),v=t("#able-vts table"),t("#able-vts-instructions").hide(),t("#able-vts > fieldset").hide(),t("#able-vts table").remove(),t("#able-vts-icon-credit").remove(),e.parseVtsOutput(v)):(t(this).attr("value","save").text(C),t("#able-vts-output").remove(),t("#able-vts-instructions").show(),t("#able-vts > fieldset").show(),t("#able-vts").append(v),t("#able-vts").append(e.getIconCredit()),e.showVtsAlert(e.translate("vtsCancel","Cancelling saving. Any edits you made have been restored in the VTS table.")))})}},AblePlayer.prototype.setupVtsTracks=function(t,e,i,s,a,n){var r,o;r=this.getFilenameFromPath(a),o=this.parseVtsTracks(n),this.vtsTracks.push({kind:t,language:e,label:s,srcFile:r,cues:o})},AblePlayer.prototype.getFilenameFromPath=function(t){var e;return-1===(e=t.lastIndexOf("/"))?t:t.substring(e+1)},AblePlayer.prototype.getFilenameFromTracks=function(t,e){for(var i=0;i<this.vtsTracks.length;i++)if(this.vtsTracks[i].kind===t&&this.vtsTracks[i].language===e)return this.vtsTracks[i].srcFile;return!1},AblePlayer.prototype.parseVtsTracks=function(t){var e,i,s,a,n,r,o,l,h;for(e=t.split("\n"),s=[],a=0;a<e.length;)if(-1!==(r=e[a]).indexOf(" --\x3e ")){if(i=r.trim().split(" "),this.isValidTimestamp(i[0])&&this.isValidTimestamp(i[2])){for(l="",n=a+1,h=!1;n<e.length&&!h;)(o=e[n].trim()).length>0?l.length>0?l+="\n"+o:l+=o:h=!0,n++;s.push({start:i[0],end:i[2],content:l}),a=n}}else a++;return s},AblePlayer.prototype.isValidTimestamp=function(t){return!!/^[0-9:,.]$/.test(t)},AblePlayer.prototype.formatTimestamp=function(t){var e,i;if(e=t.substring(0,t.lastIndexOf(".")+1),(i=t.substring(t.lastIndexOf(".")+1)).length>3)i=i.substring(0,3);else if(i.length<3)for(;i.length<3;)i+="0";return e+i},AblePlayer.prototype.injectVtsTable=function(e,i){var s,a,n,r,o,l,h,p,c;for("update"===e&&(t("#able-vts table").remove(),t("#able-vts-icon-credit").remove()),s=t("<table>",{lang:i}),a=t("<thead>"),o=t("<tr>"),n=[this.translate("vtsRow","Row"),this.translate("vtsKind","Kind"),this.translate("vtsStart","Start"),this.translate("vtsEnd","End"),this.translate("vtsContent","Content"),this.translate("vtsActions","Actions")],r=0;r<n.length;r++)l=t("<th>",{scope:"col"}).text(n[r]),"Actions"===n[r]&&l.addClass("actions"),o.append(l);for(a.append(o),s.append(a),p=this.getAllRows(i),r=0;r<p.length;r++)o=t("<tr>",{id:"able-vts-row-"+(c=r+1),class:"kind-"+p[r].kind}),h=t("<td>").text(c),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].kind),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].start),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].end),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].content),o.append(h),h=this.addVtsActionButtons(c,p.length),o.append(h),s.append(o);t("#able-vts").append(s),t("#able-vts").append(this.getIconCredit())},AblePlayer.prototype.addVtsActionButtons=function(e,i){var s,a,n,r,o,l,h,p,c,u;for(s=this,a=t("<td>"),n=["up","down","insert","delete"],r=0;r<n.length;r++)"up"===(o=n[r])?e>1&&(l=t("<button>",{id:"able-vts-button-up-"+e,title:"Move up","aria-label":"Move Row "+e+" up"}).on("click",function(t){s.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101c-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.594l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"down"===o?e<i&&(l=t("<button>",{id:"able-vts-button-down-"+e,title:"Move down","aria-label":"Move Row "+e+" down"}).on("click",function(t){s.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"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.424C1.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.428s9.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"insert"===o?(l=t("<button>",{id:"able-vts-button-insert-"+e,title:"Insert row below","aria-label":"Insert row before Row "+e}).on("click",function(t){s.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"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.414C242.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.775H27.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.411c5.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.987h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77c7.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"delete"===o&&(l=t("<button>",{id:"able-vts-button-delete-"+e,title:"Delete row ","aria-label":"Delete Row "+e}).on("click",function(t){s.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607C429.063,46.021,414.825,31.782,397.281,31.782z"}),u=t("<path>",{d:"M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042c17.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.891c8.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.804zM238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26c0,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.804c0-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.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z"}),p=t("<g>").append(c,u),h.append(p),l.append(h),l.html(l.html()),a.append(l));return a},AblePlayer.prototype.updateVtsActionButtons=function(t,e){var i,s,a,n,r,o;for(i=0;i<t.length;i++)a=(s=t.eq(i)).attr("id"),n=s.attr("aria-label"),r=a.replace(/[0-9]+/g,e),o=n.replace(/[0-9]+/g,e),s.attr("id",r),s.attr("aria-label",o)},AblePlayer.prototype.getIconCredit=function(){return'<div id="able-vts-icon-credit">Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a> from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a> are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a></div>'},AblePlayer.prototype.getAllLangs=function(e){var i;for(i in e)e[i].hasOwnProperty("language")&&-1===t.inArray(e[i].language,this.langs)&&(this.langs[this.langs.length]=e[i].language)},AblePlayer.prototype.getAllRows=function(t){var e,i,s,a;for(a=[],e=0;e<this.vtsTracks.length;e++)if((i=this.vtsTracks[e]).language==t)for(s in i.cues)a.push({kind:i.kind,lang:t,id:i.cues[s].id,start:i.cues[s].start,end:i.cues[s].end,content:i.cues[s].content});return a.sort(function(t,e){return t.start>e.start?1:-1}),a},AblePlayer.prototype.onClickVtsActionButton=function(e){var i,s,a;s=(i=t(e).attr("id").split("-"))[3],a=i[4],"up"==s?this.moveRow(a,"up"):"down"==s?this.moveRow(a,"down"):"insert"==s?this.insertRow(a):"delete"==s&&this.deleteRow(a)},AblePlayer.prototype.insertRow=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,g,f,m;for(a=(s=(i=t("#able-vts table")).find("tr")).length-1,n=parseInt(e)+1,r=t("<tr>",{id:"able-vts-row-"+n}),o=t("<td>").text(n),r.append(o),u=null,l=t("<select>",{id:"able-vts-kind-"+n,"aria-label":"What kind of track is this?",placeholder:"Select a kind"}).on("change",function(){u=t(this).val(),d="kind-"+u,g=t(this).closest("tr"),t(this).parent().text(u),g.addClass(d)}),h=["","captions","chapters","descriptions","subtitles"],p=0;p<h.length;p++)c=t("<option>",{value:h[p]}).text(h[p]),l.append(c);for(o=t("<td>").append(l),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=this.addVtsActionButtons(n,a),r.append(o),i.find("tr").eq(e).after(r),p=n;p<=a;p++)f=p+1,s.eq(p).attr("id","able-vts-row-"+f),s.eq(p).find("td").eq(0).text(f),m=s.eq(p).find("button"),this.updateVtsActionButtons(m,f);this.adjustTimes(n);let v=this.translate("vtsNewRow","A new row %1 has been inserted.",[n]);this.showVtsAlert(v),l.trigger("focus")},AblePlayer.prototype.deleteRow=function(e){var i,s,a,n,r,o;for((i=t("#able-vts table"))[0].deleteRow(e),a=(s=i.find("tr")).length-1,n=e;n<=a;n++)r=n,s.eq(n).attr("id","able-vts-row-"+r),s.eq(n).find("td").eq(0).text(r),o=s.eq(n).find("button"),this.updateVtsActionButtons(o,r);let l=this.translate("vtsDeletedRow","Row %1 has been deleted.",[e]);this.showVtsAlert(l)},AblePlayer.prototype.moveRow=function(e,i){var s,a,n,r;t("#able-vts table").find("tr"),s=t("#able-vts table").find("tr").eq(e),"up"==i?(a=parseInt(e)-1,(n=t("#able-vts table").find("tr").eq(a)).before(s)):"down"==i&&(a=parseInt(e)+1,(n=t("#able-vts table").find("tr").eq(a)).after(s)),s.attr("id","able-vts-row-"+a),s.find("td").eq(0).text(a),this.updateVtsActionButtons(s.find("button"),a),n.attr("id","able-vts-row-"+e),n.find("td").eq(0).text(e),this.updateVtsActionButtons(n.find("button"),e),this.adjustTimes(a),r=this.translate("vtsMovedRow","Row %1 has been moved %2 and is now Row %3.",[e,i,a]),this.showVtsAlert(r)},AblePlayer.prototype.adjustTimes=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v;(i=[]).captions=.001,i.descriptions=.001,i.chapters=.001,h=(r=(s=t("#able-vts table").find("tr")).eq(e)).is('[class^="kind-"]')?this.getKindFromClass(r.attr("class")):"captions",u=this.getSecondsFromColonTime(r.find("td").eq(2).text()),f=this.getSecondsFromColonTime(r.find("td").eq(3).text()),e>1?(a=e-1,p=(o=s.eq(a)).is('[class^="kind-"]')?this.getKindFromClass(o.attr("class")):null,d=this.getSecondsFromColonTime(o.find("td").eq(2).text()),m=this.getSecondsFromColonTime(o.find("td").eq(3).text())):(a=null,o=null,p=null,d=null,m=null),e<s.length-1?(n=e+1,c=(l=s.eq(n)).is('[class^="kind-"]')?this.getKindFromClass(l.attr("class")):null,g=this.getSecondsFromColonTime(l.find("td").eq(2).text()),v=this.getSecondsFromColonTime(l.find("td").eq(3).text())):(n=null,l=null,c=null,g=null,v=null),isNaN(u)?(null==p&&(p="captions",o.attr("class","kind-captions"),o.find("td").eq(1).html("captions")),"captions"===p?(u=(parseFloat(m)+.001).toFixed(3),f=g?(parseFloat(g)-.001).toFixed(3):(parseFloat(u)+i[h]).toFixed(3)):"chapters"===p?(u=(parseFloat(d)+.001).toFixed(3),f=g?(parseFloat(g)-.001).toFixed(3):(parseFloat(u)+minDurartion[h]).toFixed(3)):"descriptions"===p&&(u=(parseFloat(d)+i.descriptions).toFixed(3),f=(parseFloat(u)+i.descriptions).toFixed(3))):d?d<u?u<g\|\|(g=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(g)+i[c]).toFixed(3)):(u=(parseFloat(d)+i[p]).toFixed(3),f=(parseFloat(u)+i[h]).toFixed(3)):u<g\|\|(g=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(g)+i[c]).toFixed(3)),f-u<i[h]&&(f=(parseFloat(u)+i[h]).toFixed(3),g&&(g=(parseFloat(f)+.001).toFixed(3))),r.find("td").eq(2).text(this.formatSecondsAsColonTime(u,!0)),r.find("td").eq(3).text(this.formatSecondsAsColonTime(f,!0)),o&&(o.find("td").eq(2).text(this.formatSecondsAsColonTime(d,!0)),o.find("td").eq(3).text(this.formatSecondsAsColonTime(m,!0))),l&&(l.find("td").eq(2).text(this.formatSecondsAsColonTime(g,!0)),l.find("td").eq(3).text(this.formatSecondsAsColonTime(v,!0)))},AblePlayer.prototype.getKindFromClass=function(t){var e,i;return e=t.indexOf("kind-")+5,-1==(i=t.indexOf(" ",e))?t.substring(e):t.substring(e,i)},AblePlayer.prototype.showVtsAlert=function(t){var e;this.$vtsAlert.text(t).show(),(e=1e4,new Promise(t=>setTimeout(t,e))).then(()=>{this.$vtsAlert.text(t).hide()})},AblePlayer.prototype.parseVtsOutput=function(e){var i,s,a,n,r,o,l,h,p,c;for(i=e.attr("lang"),a=["captions","chapters","descriptions","subtitles"],r={},s=0;s<a.length;s++)r[n=a[s]]="WEBVTT\n\n";if((o=e.find("tr")).length>0)for(s=0;s<o.length;s++)n=o.eq(s).find("td").eq(1).text(),-1!==t.inArray(n,a)&&(l=o.eq(s).find("td").eq(2).text(),h=o.eq(s).find("td").eq(3).text(),p=o.eq(s).find("td").eq(4)[0].innerText,void 0!==l&&void 0!==h&&(r[n]+=l+" --\x3e "+h+"\n","undefined"!==p&&(r[n]+=p),r[n]+="\n\n"));for(c=t("<div>",{id:"able-vts-output"}),t("#able-vts").append(c),s=0;s<a.length;s++)r[n=a[s]].length>8&&this.showWebVttOutput(n,r[n],i)},AblePlayer.prototype.showWebVttOutput=function(e,i,s){var a,n,r,o,l;a=t("<h3>").text(this.capitalizeFirstLetter(e)),o="If you made changes, copy/paste the following content ",(n=this.getFilenameFromTracks(e,s))?(o+="to replace the original content of your "+this.getLanguageName(s)+" ",o+="<em>"+e+"</em> WebVTT file (<strong>"+n+"</strong>)."):o+="into a new "+this.getLanguageName(s)+" <em>"+e+"</em> WebVTT file.",r=t("<p>",{class:"able-vts-output-instructions"}).html(o),l=t("<textarea>").text(i),t("#able-vts-output").append(a,r,l)}}(jQuery),function(t){AblePlayer.prototype.initVimeoPlayer=function(){var e,i,s,a,n,r;return e=this,s=(i=new this.defer).promise(),a=this.mediaId+"_vimeo",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.vimeoDescId&&this.prefDesc?this.vimeoDescId:this.vimeoId,this.activeVimeoId=n,autoplay=this.okToPlay?"true":"false",r=this.playerWidth?this.vimeoUrlHasParams?{url:n,width:this.playerWidth,controls:!1}:{id:n,width:this.playerWidth,controls:!1}:this.vimeoUrlHasParams?{url:n,controls:!1}:{id:n,controls:!1},this.vimeoPlayer=new Vimeo.Player(a,r),this.vimeoPlayer.ready().then(function(){t("#"+a).children("iframe").attr({tabindex:"-1","aria-hidden":!0}),e.vimeoPlayer.getVideoWidth().then(function(t){t&&e.vimeoPlayer.getVideoHeight().then(function(i){i&&e.resizePlayer(t,i)})}).catch(function(t){}),e.hasPlaylist\|\|(e.$media.remove(),e.vimeoPlaybackRate=1,e.vimeoPlayer.setPlaybackRate(e.vimeoPlaybackRate).then(function(t){e.vimeoSupportsPlaybackRateChange=!0}).catch(function(t){e.vimeoSupportsPlaybackRateChange=!1}),i.resolve())}),s},AblePlayer.prototype.getVimeoPaused=function(){var t,e;return e=(t=new this.defer).promise(),this.vimeoPlayer.getPaused().then(function(e){t.resolve(e)}),e},AblePlayer.prototype.getVimeoEnded=function(){var t,e;return e=(t=new this.defer).promise(),this.vimeoPlayer.getEnded().then(function(e){t.resolve(e)}),e},AblePlayer.prototype.getVimeoState=function(){var e,i,s,a,n;return i=(e=new this.defer).promise(),s=[],a=this.vimeoPlayer.getPaused(),n=this.vimeoPlayer.getEnded(),s.push(a),s.push(n),a.then(function(t){e.resolve(t)}),n.then(function(t){e.resolve(t)}),t.when.apply(t,s).then(function(){e.resolve()}),i},AblePlayer.prototype.getVimeoCaptionTracks=function(){var t,e,i,s=new this.defer,a=s.promise();return t=this,this.vimeoPlayer.getTextTracks().then(function(a){if(a.length){for(e=0;e<a.length;e++)t.hasCaptions=!0,1===t.prefCaptions?t.captionsOn=!0:t.captionsOn=!1,i=a[e].language===t.lang,t.tracks.push({kind:a[e].kind,language:a[e].language,label:a[e].label,def:i});t.captions=t.tracks,t.hasCaptions=!0,t.setupPopups("captions"),s.resolve()}else t.hasCaptions=!1,t.usingVimeoCaptions=!1,s.resolve()}),a},AblePlayer.prototype.getVimeoPosterUrl=function(t,e){var i="";return fetch("http://vimeo.com/api/oembed.json?url=https://vimeo.com/"+t).then(t=>t.json()).then(t=>{i=t.thumbnail_url}).catch(t=>{thisObj.debug}),i},AblePlayer.prototype.getVimeoId=function(t){return this.vimeoUrlHasParams=!1,"number"==typeof t?t:(urlObject=new URL(t),"vimeo.com"===urlObject.hostname\|\|"player.vimeo.com"===urlObject.hostname?""!==urlObject.search?(this.vimeoUrlHasParams=!0,t):"player.vimeo.com"===urlObject.hostname?urlObject.pathname.replace("/video/",""):urlObject.pathname.replace("/",""):t)}}(jQuery); \ No newline at end of file diff --git a/src/build/separate-dompurify/purify.min.js b/src/build/separate-dompurify/purify.min.js index 950b98f..7f9a438 100644 --- a/src/build/separate-dompurify/purify.min.js +++ b/src/build/separate-dompurify/purify.min.js @@ -1,2 +1,2 @@ -/! @license DOMPurify 3.2.4 \| (c) Cure53 and other contributors \| Released under the Apache license 2.0 and Mozilla Public License 2.0 \| github.com/cure53/DOMPurify/blob/3.2.4/LICENSE / -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e\|\|self).DOMPurify=t()}(this,(function(){"use strict";const{entries:e,setPrototypeOf:t,isFrozen:n,getPrototypeOf:o,getOwnPropertyDescriptor:a}=Object;let{freeze:r,seal:i,create:l}=Object,{apply:c,construct:s}="undefined"!=typeof Reflect&&Reflect;r\|\|(r=function freeze(e){return e}),i\|\|(i=function seal(e){return e}),c\|\|(c=function apply(e,t,n){return e.apply(t,n)}),s\|\|(s=function construct(e,t){return new e(...t)});const u=unapply(Array.prototype.forEach),d=unapply(Array.prototype.lastIndexOf),p=unapply(Array.prototype.pop),m=unapply(Array.prototype.push),f=unapply(Array.prototype.splice),h=unapply(String.prototype.toLowerCase),T=unapply(String.prototype.toString),g=unapply(String.prototype.match),y=unapply(String.prototype.replace),S=unapply(String.prototype.indexOf),_=unapply(String.prototype.trim),E=unapply(Object.prototype.hasOwnProperty),A=unapply(RegExp.prototype.test),b=function unconstruct(e){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return s(e,n)}}(TypeError);function unapply(e){return function(t){for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a<n;a++)o[a-1]=arguments[a];return c(e,t,o)}}function addToSet(e,o){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:h;t&&t(e,null);let r=o.length;for(;r--;){let t=o[r];if("string"==typeof t){const e=a(t);e!==t&&(n(o)\|\|(o[r]=e),t=e)}e[t]=!0}return e}function cleanArray(e){for(let t=0;t<e.length;t++){E(e,t)\|\|(e[t]=null)}return e}function clone(t){const n=l(null);for(const[o,a]of e(t)){E(t,o)&&(Array.isArray(a)?n[o]=cleanArray(a):a&&"object"==typeof a&&a.constructor===Object?n[o]=clone(a):n[o]=a)}return n}function lookupGetter(e,t){for(;null!==e;){const n=a(e,t);if(n){if(n.get)return unapply(n.get);if("function"==typeof n.value)return unapply(n.value)}e=o(e)}return function fallbackValue(){return null}}const N=r(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","section","select","shadow","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),R=r(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","filter","font","g","glyph","glyphref","hkern","image","line","lineargradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),w=r(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),O=r(["animate","color-profile","cursor","discard","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),k=r(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]),D=r(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),x=r(["#text"]),v=r(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","face","for","headers","height","hidden","high","href","hreflang","id","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns","slot"]),C=r(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),L=r(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),M=r(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),I=i(/\{\{[\w\W]\|[\w\W]\}\}/gm),z=i(/<%[\w\W]\|[\w\W]%>/gm),P=i(/\$\{[\w\W]/gm),U=i(/^data-[\-\w.\u00B7-\uFFFF]+$/),H=i(/^aria-[\-\w]+$/),F=i(/^(?:(?:(?:f\|ht)tps?\|mailto\|tel\|callto\|sms\|cid\|xmpp):\|[^a-z]\|[a-z+.\-]+(?:[^a-z+.\-:]\|$))/i),G=i(/^(?:\w+script\|data):/i),B=i(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),W=i(/^html$/i),Y=i(/^[a-z][.\w](-[.\w]+)+$/i);var j=Object.freeze({__proto__:null,ARIA_ATTR:H,ATTR_WHITESPACE:B,CUSTOM_ELEMENT:Y,DATA_ATTR:U,DOCTYPE_NAME:W,ERB_EXPR:z,IS_ALLOWED_URI:F,IS_SCRIPT_OR_DATA:G,MUSTACHE_EXPR:I,TMPLIT_EXPR:P});const X=1,q=3,V=7,$=8,K=9,Z=function getGlobal(){return"undefined"==typeof window?null:window};var J=function createDOMPurify(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Z();const DOMPurify=e=>createDOMPurify(e);if(DOMPurify.version="3.2.4",DOMPurify.removed=[],!t\|\|!t.document\|\|t.document.nodeType!==K\|\|!t.Element)return DOMPurify.isSupported=!1,DOMPurify;let{document:n}=t;const o=n,a=o.currentScript,{DocumentFragment:i,HTMLTemplateElement:c,Node:s,Element:I,NodeFilter:z,NamedNodeMap:P=t.NamedNodeMap\|\|t.MozNamedAttrMap,HTMLFormElement:U,DOMParser:H,trustedTypes:G}=t,B=I.prototype,Y=lookupGetter(B,"cloneNode"),J=lookupGetter(B,"remove"),Q=lookupGetter(B,"nextSibling"),ee=lookupGetter(B,"childNodes"),te=lookupGetter(B,"parentNode");if("function"==typeof c){const e=n.createElement("template");e.content&&e.content.ownerDocument&&(n=e.content.ownerDocument)}let ne,oe="";const{implementation:ae,createNodeIterator:re,createDocumentFragment:ie,getElementsByTagName:le}=n,{importNode:ce}=o;let se={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]};DOMPurify.isSupported="function"==typeof e&&"function"==typeof te&&ae&&void 0!==ae.createHTMLDocument;const{MUSTACHE_EXPR:ue,ERB_EXPR:de,TMPLIT_EXPR:pe,DATA_ATTR:me,ARIA_ATTR:fe,IS_SCRIPT_OR_DATA:he,ATTR_WHITESPACE:Te,CUSTOM_ELEMENT:ge}=j;let{IS_ALLOWED_URI:ye}=j,Se=null;const _e=addToSet({},[...N,...R,...w,...k,...x]);let Ee=null;const Ae=addToSet({},[...v,...C,...L,...M]);let be=Object.seal(l(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),Ne=null,Re=null,we=!0,Oe=!0,ke=!1,De=!0,xe=!1,ve=!0,Ce=!1,Le=!1,Me=!1,Ie=!1,ze=!1,Pe=!1,Ue=!0,He=!1,Fe=!0,Ge=!1,Be={},We=null;const Ye=addToSet({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]);let je=null;const Xe=addToSet({},["audio","video","img","source","image","track"]);let qe=null;const Ve=addToSet({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),$e="http://www.w3.org/1998/Math/MathML",Ke="http://www.w3.org/2000/svg",Ze="http://www.w3.org/1999/xhtml";let Je=Ze,Qe=!1,et=null;const tt=addToSet({},[$e,Ke,Ze],T);let nt=addToSet({},["mi","mo","mn","ms","mtext"]),ot=addToSet({},["annotation-xml"]);const at=addToSet({},["title","style","font","a","script"]);let rt=null;const it=["application/xhtml+xml","text/html"];let lt=null,ct=null;const st=n.createElement("form"),ut=function isRegexOrFunction(e){return e instanceof RegExp\|\|e instanceof Function},dt=function _parseConfig(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!ct\|\|ct!==e){if(e&&"object"==typeof e\|\|(e={}),e=clone(e),rt=-1===it.indexOf(e.PARSER_MEDIA_TYPE)?"text/html":e.PARSER_MEDIA_TYPE,lt="application/xhtml+xml"===rt?T:h,Se=E(e,"ALLOWED_TAGS")?addToSet({},e.ALLOWED_TAGS,lt):_e,Ee=E(e,"ALLOWED_ATTR")?addToSet({},e.ALLOWED_ATTR,lt):Ae,et=E(e,"ALLOWED_NAMESPACES")?addToSet({},e.ALLOWED_NAMESPACES,T):tt,qe=E(e,"ADD_URI_SAFE_ATTR")?addToSet(clone(Ve),e.ADD_URI_SAFE_ATTR,lt):Ve,je=E(e,"ADD_DATA_URI_TAGS")?addToSet(clone(Xe),e.ADD_DATA_URI_TAGS,lt):Xe,We=E(e,"FORBID_CONTENTS")?addToSet({},e.FORBID_CONTENTS,lt):Ye,Ne=E(e,"FORBID_TAGS")?addToSet({},e.FORBID_TAGS,lt):{},Re=E(e,"FORBID_ATTR")?addToSet({},e.FORBID_ATTR,lt):{},Be=!!E(e,"USE_PROFILES")&&e.USE_PROFILES,we=!1!==e.ALLOW_ARIA_ATTR,Oe=!1!==e.ALLOW_DATA_ATTR,ke=e.ALLOW_UNKNOWN_PROTOCOLS\|\|!1,De=!1!==e.ALLOW_SELF_CLOSE_IN_ATTR,xe=e.SAFE_FOR_TEMPLATES\|\|!1,ve=!1!==e.SAFE_FOR_XML,Ce=e.WHOLE_DOCUMENT\|\|!1,Ie=e.RETURN_DOM\|\|!1,ze=e.RETURN_DOM_FRAGMENT\|\|!1,Pe=e.RETURN_TRUSTED_TYPE\|\|!1,Me=e.FORCE_BODY\|\|!1,Ue=!1!==e.SANITIZE_DOM,He=e.SANITIZE_NAMED_PROPS\|\|!1,Fe=!1!==e.KEEP_CONTENT,Ge=e.IN_PLACE\|\|!1,ye=e.ALLOWED_URI_REGEXP\|\|F,Je=e.NAMESPACE\|\|Ze,nt=e.MATHML_TEXT_INTEGRATION_POINTS\|\|nt,ot=e.HTML_INTEGRATION_POINTS\|\|ot,be=e.CUSTOM_ELEMENT_HANDLING\|\|{},e.CUSTOM_ELEMENT_HANDLING&&ut(e.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(be.tagNameCheck=e.CUSTOM_ELEMENT_HANDLING.tagNameCheck),e.CUSTOM_ELEMENT_HANDLING&&ut(e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(be.attributeNameCheck=e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),e.CUSTOM_ELEMENT_HANDLING&&"boolean"==typeof e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements&&(be.allowCustomizedBuiltInElements=e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),xe&&(Oe=!1),ze&&(Ie=!0),Be&&(Se=addToSet({},x),Ee=[],!0===Be.html&&(addToSet(Se,N),addToSet(Ee,v)),!0===Be.svg&&(addToSet(Se,R),addToSet(Ee,C),addToSet(Ee,M)),!0===Be.svgFilters&&(addToSet(Se,w),addToSet(Ee,C),addToSet(Ee,M)),!0===Be.mathMl&&(addToSet(Se,k),addToSet(Ee,L),addToSet(Ee,M))),e.ADD_TAGS&&(Se===_e&&(Se=clone(Se)),addToSet(Se,e.ADD_TAGS,lt)),e.ADD_ATTR&&(Ee===Ae&&(Ee=clone(Ee)),addToSet(Ee,e.ADD_ATTR,lt)),e.ADD_URI_SAFE_ATTR&&addToSet(qe,e.ADD_URI_SAFE_ATTR,lt),e.FORBID_CONTENTS&&(We===Ye&&(We=clone(We)),addToSet(We,e.FORBID_CONTENTS,lt)),Fe&&(Se["#text"]=!0),Ce&&addToSet(Se,["html","head","body"]),Se.table&&(addToSet(Se,["tbody"]),delete Ne.tbody),e.TRUSTED_TYPES_POLICY){if("function"!=typeof e.TRUSTED_TYPES_POLICY.createHTML)throw b('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');if("function"!=typeof e.TRUSTED_TYPES_POLICY.createScriptURL)throw b('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');ne=e.TRUSTED_TYPES_POLICY,oe=ne.createHTML("")}else void 0===ne&&(ne=function _createTrustedTypesPolicy(e,t){if("object"!=typeof e\|\|"function"!=typeof e.createPolicy)return null;let n=null;const o="data-tt-policy-suffix";t&&t.hasAttribute(o)&&(n=t.getAttribute(o));const a="dompurify"+(n?"#"+n:"");try{return e.createPolicy(a,{createHTML:e=>e,createScriptURL:e=>e})}catch(e){return console.warn("TrustedTypes policy "+a+" could not be created."),null}}(G,a)),null!==ne&&"string"==typeof oe&&(oe=ne.createHTML(""));r&&r(e),ct=e}},pt=addToSet({},[...R,...w,...O]),mt=addToSet({},[...k,...D]),ft=function _forceRemove(e){m(DOMPurify.removed,{element:e});try{te(e).removeChild(e)}catch(t){J(e)}},ht=function _removeAttribute(e,t){try{m(DOMPurify.removed,{attribute:t.getAttributeNode(e),from:t})}catch(e){m(DOMPurify.removed,{attribute:null,from:t})}if(t.removeAttribute(e),"is"===e)if(Ie\|\|ze)try{ft(t)}catch(e){}else try{t.setAttribute(e,"")}catch(e){}},Tt=function _initDocument(e){let t=null,o=null;if(Me)e="<remove></remove>"+e;else{const t=g(e,/^[\r\n\t ]+/);o=t&&t[0]}"application/xhtml+xml"===rt&&Je===Ze&&(e='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+e+"</body></html>");const a=ne?ne.createHTML(e):e;if(Je===Ze)try{t=(new H).parseFromString(a,rt)}catch(e){}if(!t\|\|!t.documentElement){t=ae.createDocument(Je,"template",null);try{t.documentElement.innerHTML=Qe?oe:a}catch(e){}}const r=t.body\|\|t.documentElement;return e&&o&&r.insertBefore(n.createTextNode(o),r.childNodes[0]\|\|null),Je===Ze?le.call(t,Ce?"html":"body")[0]:Ce?t.documentElement:r},gt=function _createNodeIterator(e){return re.call(e.ownerDocument\|\|e,e,z.SHOW_ELEMENT\|z.SHOW_COMMENT\|z.SHOW_TEXT\|z.SHOW_PROCESSING_INSTRUCTION\|z.SHOW_CDATA_SECTION,null)},yt=function _isClobbered(e){return e instanceof U&&("string"!=typeof e.nodeName\|\|"string"!=typeof e.textContent\|\|"function"!=typeof e.removeChild\|\|!(e.attributes instanceof P)\|\|"function"!=typeof e.removeAttribute\|\|"function"!=typeof e.setAttribute\|\|"string"!=typeof e.namespaceURI\|\|"function"!=typeof e.insertBefore\|\|"function"!=typeof e.hasChildNodes)},St=function _isNode(e){return"function"==typeof s&&e instanceof s};function _executeHooks(e,t,n){u(e,(e=>{e.call(DOMPurify,t,n,ct)}))}const _t=function _sanitizeElements(e){let t=null;if(_executeHooks(se.beforeSanitizeElements,e,null),yt(e))return ft(e),!0;const n=lt(e.nodeName);if(_executeHooks(se.uponSanitizeElement,e,{tagName:n,allowedTags:Se}),e.hasChildNodes()&&!St(e.firstElementChild)&&A(/<[/\w]/g,e.innerHTML)&&A(/<[/\w]/g,e.textContent))return ft(e),!0;if(e.nodeType===V)return ft(e),!0;if(ve&&e.nodeType===$&&A(/<[/\w]/g,e.data))return ft(e),!0;if(!Se[n]\|\|Ne[n]){if(!Ne[n]&&At(n)){if(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,n))return!1;if(be.tagNameCheck instanceof Function&&be.tagNameCheck(n))return!1}if(Fe&&!We[n]){const t=te(e)\|\|e.parentNode,n=ee(e)\|\|e.childNodes;if(n&&t){for(let o=n.length-1;o>=0;--o){const a=Y(n[o],!0);a.__removalCount=(e.__removalCount\|\|0)+1,t.insertBefore(a,Q(e))}}}return ft(e),!0}return e instanceof I&&!function _checkValidNamespace(e){let t=te(e);t&&t.tagName\|\|(t={namespaceURI:Je,tagName:"template"});const n=h(e.tagName),o=h(t.tagName);return!!et[e.namespaceURI]&&(e.namespaceURI===Ke?t.namespaceURI===Ze?"svg"===n:t.namespaceURI===$e?"svg"===n&&("annotation-xml"===o\|\|nt[o]):Boolean(pt[n]):e.namespaceURI===$e?t.namespaceURI===Ze?"math"===n:t.namespaceURI===Ke?"math"===n&&ot[o]:Boolean(mt[n]):e.namespaceURI===Ze?!(t.namespaceURI===Ke&&!ot[o])&&!(t.namespaceURI===$e&&!nt[o])&&!mt[n]&&(at[n]\|\|!pt[n]):!("application/xhtml+xml"!==rt\|\|!et[e.namespaceURI]))}(e)?(ft(e),!0):"noscript"!==n&&"noembed"!==n&&"noframes"!==n\|\|!A(/<\/no(script\|embed\|frames)/i,e.innerHTML)?(xe&&e.nodeType===q&&(t=e.textContent,u([ue,de,pe],(e=>{t=y(t,e," ")})),e.textContent!==t&&(m(DOMPurify.removed,{element:e.cloneNode()}),e.textContent=t)),_executeHooks(se.afterSanitizeElements,e,null),!1):(ft(e),!0)},Et=function _isValidAttribute(e,t,o){if(Ue&&("id"===t\|\|"name"===t)&&(o in n\|\|o in st))return!1;if(Oe&&!Re[t]&&A(me,t));else if(we&&A(fe,t));else if(!Ee[t]\|\|Re[t]){if(!(At(e)&&(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,e)\|\|be.tagNameCheck instanceof Function&&be.tagNameCheck(e))&&(be.attributeNameCheck instanceof RegExp&&A(be.attributeNameCheck,t)\|\|be.attributeNameCheck instanceof Function&&be.attributeNameCheck(t))\|\|"is"===t&&be.allowCustomizedBuiltInElements&&(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,o)\|\|be.tagNameCheck instanceof Function&&be.tagNameCheck(o))))return!1}else if(qe[t]);else if(A(ye,y(o,Te,"")));else if("src"!==t&&"xlink:href"!==t&&"href"!==t\|\|"script"===e\|\|0!==S(o,"data:")\|\|!je[e]){if(ke&&!A(he,y(o,Te,"")));else if(o)return!1}else;return!0},At=function _isBasicCustomElement(e){return"annotation-xml"!==e&&g(e,ge)},bt=function _sanitizeAttributes(e){_executeHooks(se.beforeSanitizeAttributes,e,null);const{attributes:t}=e;if(!t\|\|yt(e))return;const n={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:Ee,forceKeepAttr:void 0};let o=t.length;for(;o--;){const a=t[o],{name:r,namespaceURI:i,value:l}=a,c=lt(r);let s="value"===r?l:_(l);if(n.attrName=c,n.attrValue=s,n.keepAttr=!0,n.forceKeepAttr=void 0,_executeHooks(se.uponSanitizeAttribute,e,n),s=n.attrValue,!He\|\|"id"!==c&&"name"!==c\|\|(ht(r,e),s="user-content-"+s),ve&&A(/((--!?\|])>)\|<\/(style\|title)/i,s)){ht(r,e);continue}if(n.forceKeepAttr)continue;if(ht(r,e),!n.keepAttr)continue;if(!De&&A(/\/>/i,s)){ht(r,e);continue}xe&&u([ue,de,pe],(e=>{s=y(s,e," ")}));const d=lt(e.nodeName);if(Et(d,c,s)){if(ne&&"object"==typeof G&&"function"==typeof G.getAttributeType)if(i);else switch(G.getAttributeType(d,c)){case"TrustedHTML":s=ne.createHTML(s);break;case"TrustedScriptURL":s=ne.createScriptURL(s)}try{i?e.setAttributeNS(i,r,s):e.setAttribute(r,s),yt(e)?ft(e):p(DOMPurify.removed)}catch(e){}}}_executeHooks(se.afterSanitizeAttributes,e,null)},Nt=function _sanitizeShadowDOM(e){let t=null;const n=gt(e);for(_executeHooks(se.beforeSanitizeShadowDOM,e,null);t=n.nextNode();)_executeHooks(se.uponSanitizeShadowNode,t,null),_t(t),bt(t),t.content instanceof i&&_sanitizeShadowDOM(t.content);_executeHooks(se.afterSanitizeShadowDOM,e,null)};return DOMPurify.sanitize=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=null,a=null,r=null,l=null;if(Qe=!e,Qe&&(e="\x3c!--\x3e"),"string"!=typeof e&&!St(e)){if("function"!=typeof e.toString)throw b("toString is not a function");if("string"!=typeof(e=e.toString()))throw b("dirty is not a string, aborting")}if(!DOMPurify.isSupported)return e;if(Le\|\|dt(t),DOMPurify.removed=[],"string"==typeof e&&(Ge=!1),Ge){if(e.nodeName){const t=lt(e.nodeName);if(!Se[t]\|\|Ne[t])throw b("root node is forbidden and cannot be sanitized in-place")}}else if(e instanceof s)n=Tt("\x3c!----\x3e"),a=n.ownerDocument.importNode(e,!0),a.nodeType===X&&"BODY"===a.nodeName\|\|"HTML"===a.nodeName?n=a:n.appendChild(a);else{if(!Ie&&!xe&&!Ce&&-1===e.indexOf("<"))return ne&&Pe?ne.createHTML(e):e;if(n=Tt(e),!n)return Ie?null:Pe?oe:""}n&&Me&&ft(n.firstChild);const c=gt(Ge?e:n);for(;r=c.nextNode();)_t(r),bt(r),r.content instanceof i&&Nt(r.content);if(Ge)return e;if(Ie){if(ze)for(l=ie.call(n.ownerDocument);n.firstChild;)l.appendChild(n.firstChild);else l=n;return(Ee.shadowroot\|\|Ee.shadowrootmode)&&(l=ce.call(o,l,!0)),l}let d=Ce?n.outerHTML:n.innerHTML;return Ce&&Se["!doctype"]&&n.ownerDocument&&n.ownerDocument.doctype&&n.ownerDocument.doctype.name&&A(W,n.ownerDocument.doctype.name)&&(d="<!DOCTYPE "+n.ownerDocument.doctype.name+">\n"+d),xe&&u([ue,de,pe],(e=>{d=y(d,e," ")})),ne&&Pe?ne.createHTML(d):d},DOMPurify.setConfig=function(){dt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),Le=!0},DOMPurify.clearConfig=function(){ct=null,Le=!1},DOMPurify.isValidAttribute=function(e,t,n){ct\|\|dt({});const o=lt(e),a=lt(t);return Et(o,a,n)},DOMPurify.addHook=function(e,t){"function"==typeof t&&m(se[e],t)},DOMPurify.removeHook=function(e,t){if(void 0!==t){const n=d(se[e],t);return-1===n?void 0:f(se[e],n,1)[0]}return p(se[e])},DOMPurify.removeHooks=function(e){se[e]=[]},DOMPurify.removeAllHooks=function(){se={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}},DOMPurify}();return J})); \ No newline at end of file +/! @license DOMPurify 3.3.1 \| (c) Cure53 and other contributors \| Released under the Apache license 2.0 and Mozilla Public License 2.0 \| github.com/cure53/DOMPurify/blob/3.3.1/LICENSE / +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e\|\|self).DOMPurify=t()}(this,function(){"use strict";const{entries:e,setPrototypeOf:t,isFrozen:n,getPrototypeOf:o,getOwnPropertyDescriptor:a}=Object;let{freeze:r,seal:i,create:l}=Object,{apply:c,construct:s}="undefined"!=typeof Reflect&&Reflect;r\|\|(r=function freeze(e){return e}),i\|\|(i=function seal(e){return e}),c\|\|(c=function apply(e,t){for(var n=arguments.length,o=new Array(n>2?n-2:0),a=2;a<n;a++)o[a-2]=arguments[a];return e.apply(t,o)}),s\|\|(s=function construct(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];return new e(...n)});const u=unapply(Array.prototype.forEach),p=unapply(Array.prototype.lastIndexOf),d=unapply(Array.prototype.pop),m=unapply(Array.prototype.push),f=unapply(Array.prototype.splice),h=unapply(String.prototype.toLowerCase),T=unapply(String.prototype.toString),g=unapply(String.prototype.match),y=unapply(String.prototype.replace),S=unapply(String.prototype.indexOf),_=unapply(String.prototype.trim),E=unapply(Object.prototype.hasOwnProperty),A=unapply(RegExp.prototype.test),b=function unconstruct(e){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return s(e,n)}}(TypeError);function unapply(e){return function(t){t instanceof RegExp&&(t.lastIndex=0);for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a<n;a++)o[a-1]=arguments[a];return c(e,t,o)}}function addToSet(e,o){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:h;t&&t(e,null);let r=o.length;for(;r--;){let t=o[r];if("string"==typeof t){const e=a(t);e!==t&&(n(o)\|\|(o[r]=e),t=e)}e[t]=!0}return e}function cleanArray(e){for(let t=0;t<e.length;t++){E(e,t)\|\|(e[t]=null)}return e}function clone(t){const n=l(null);for(const[o,a]of e(t)){E(t,o)&&(Array.isArray(a)?n[o]=cleanArray(a):a&&"object"==typeof a&&a.constructor===Object?n[o]=clone(a):n[o]=a)}return n}function lookupGetter(e,t){for(;null!==e;){const n=a(e,t);if(n){if(n.get)return unapply(n.get);if("function"==typeof n.value)return unapply(n.value)}e=o(e)}return function fallbackValue(){return null}}const N=r(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","search","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),D=r(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","enterkeyhint","exportparts","filter","font","g","glyph","glyphref","hkern","image","inputmode","line","lineargradient","marker","mask","metadata","mpath","part","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),k=r(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),R=r(["animate","color-profile","cursor","discard","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),w=r(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]),O=r(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),x=r(["#text"]),C=r(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","exportparts","face","for","headers","height","hidden","high","href","hreflang","id","inert","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","part","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","slot","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns","slot"]),v=r(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","mask-type","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),L=r(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),M=r(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),I=i(/\{\{[\w\W]\|[\w\W]\}\}/gm),z=i(/<%[\w\W]\|[\w\W]%>/gm),P=i(/\$\{[\w\W]/gm),U=i(/^data-[\-\w.\u00B7-\uFFFF]+$/),H=i(/^aria-[\-\w]+$/),F=i(/^(?:(?:(?:f\|ht)tps?\|mailto\|tel\|callto\|sms\|cid\|xmpp\|matrix):\|[^a-z]\|[a-z+.\-]+(?:[^a-z+.\-:]\|$))/i),G=i(/^(?:\w+script\|data):/i),B=i(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),W=i(/^html$/i),Y=i(/^[a-z][.\w](-[.\w]+)+$/i);var j=Object.freeze({__proto__:null,ARIA_ATTR:H,ATTR_WHITESPACE:B,CUSTOM_ELEMENT:Y,DATA_ATTR:U,DOCTYPE_NAME:W,ERB_EXPR:z,IS_ALLOWED_URI:F,IS_SCRIPT_OR_DATA:G,MUSTACHE_EXPR:I,TMPLIT_EXPR:P});const X=1,q=3,V=7,$=8,K=9,Z=function getGlobal(){return"undefined"==typeof window?null:window};var J=function createDOMPurify(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Z();const DOMPurify=e=>createDOMPurify(e);if(DOMPurify.version="3.3.1",DOMPurify.removed=[],!t\|\|!t.document\|\|t.document.nodeType!==K\|\|!t.Element)return DOMPurify.isSupported=!1,DOMPurify;let{document:n}=t;const o=n,a=o.currentScript,{DocumentFragment:i,HTMLTemplateElement:c,Node:s,Element:I,NodeFilter:z,NamedNodeMap:P=t.NamedNodeMap\|\|t.MozNamedAttrMap,HTMLFormElement:U,DOMParser:H,trustedTypes:G}=t,B=I.prototype,Y=lookupGetter(B,"cloneNode"),J=lookupGetter(B,"remove"),Q=lookupGetter(B,"nextSibling"),ee=lookupGetter(B,"childNodes"),te=lookupGetter(B,"parentNode");if("function"==typeof c){const e=n.createElement("template");e.content&&e.content.ownerDocument&&(n=e.content.ownerDocument)}let ne,oe="";const{implementation:ae,createNodeIterator:re,createDocumentFragment:ie,getElementsByTagName:le}=n,{importNode:ce}=o;let se={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]};DOMPurify.isSupported="function"==typeof e&&"function"==typeof te&&ae&&void 0!==ae.createHTMLDocument;const{MUSTACHE_EXPR:ue,ERB_EXPR:pe,TMPLIT_EXPR:de,DATA_ATTR:me,ARIA_ATTR:fe,IS_SCRIPT_OR_DATA:he,ATTR_WHITESPACE:Te,CUSTOM_ELEMENT:ge}=j;let{IS_ALLOWED_URI:ye}=j,Se=null;const _e=addToSet({},[...N,...D,...k,...w,...x]);let Ee=null;const Ae=addToSet({},[...C,...v,...L,...M]);let be=Object.seal(l(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),Ne=null,De=null;const ke=Object.seal(l(null,{tagCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeCheck:{writable:!0,configurable:!1,enumerable:!0,value:null}}));let Re=!0,we=!0,Oe=!1,xe=!0,Ce=!1,ve=!0,Le=!1,Me=!1,Ie=!1,ze=!1,Pe=!1,Ue=!1,He=!0,Fe=!1,Ge=!0,Be=!1,We={},Ye=null;const je=addToSet({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]);let Xe=null;const qe=addToSet({},["audio","video","img","source","image","track"]);let Ve=null;const $e=addToSet({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),Ke="http://www.w3.org/1998/Math/MathML",Ze="http://www.w3.org/2000/svg",Je="http://www.w3.org/1999/xhtml";let Qe=Je,et=!1,tt=null;const nt=addToSet({},[Ke,Ze,Je],T);let ot=addToSet({},["mi","mo","mn","ms","mtext"]),at=addToSet({},["annotation-xml"]);const rt=addToSet({},["title","style","font","a","script"]);let it=null;const lt=["application/xhtml+xml","text/html"];let ct=null,st=null;const ut=n.createElement("form"),pt=function isRegexOrFunction(e){return e instanceof RegExp\|\|e instanceof Function},dt=function _parseConfig(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!st\|\|st!==e){if(e&&"object"==typeof e\|\|(e={}),e=clone(e),it=-1===lt.indexOf(e.PARSER_MEDIA_TYPE)?"text/html":e.PARSER_MEDIA_TYPE,ct="application/xhtml+xml"===it?T:h,Se=E(e,"ALLOWED_TAGS")?addToSet({},e.ALLOWED_TAGS,ct):_e,Ee=E(e,"ALLOWED_ATTR")?addToSet({},e.ALLOWED_ATTR,ct):Ae,tt=E(e,"ALLOWED_NAMESPACES")?addToSet({},e.ALLOWED_NAMESPACES,T):nt,Ve=E(e,"ADD_URI_SAFE_ATTR")?addToSet(clone($e),e.ADD_URI_SAFE_ATTR,ct):$e,Xe=E(e,"ADD_DATA_URI_TAGS")?addToSet(clone(qe),e.ADD_DATA_URI_TAGS,ct):qe,Ye=E(e,"FORBID_CONTENTS")?addToSet({},e.FORBID_CONTENTS,ct):je,Ne=E(e,"FORBID_TAGS")?addToSet({},e.FORBID_TAGS,ct):clone({}),De=E(e,"FORBID_ATTR")?addToSet({},e.FORBID_ATTR,ct):clone({}),We=!!E(e,"USE_PROFILES")&&e.USE_PROFILES,Re=!1!==e.ALLOW_ARIA_ATTR,we=!1!==e.ALLOW_DATA_ATTR,Oe=e.ALLOW_UNKNOWN_PROTOCOLS\|\|!1,xe=!1!==e.ALLOW_SELF_CLOSE_IN_ATTR,Ce=e.SAFE_FOR_TEMPLATES\|\|!1,ve=!1!==e.SAFE_FOR_XML,Le=e.WHOLE_DOCUMENT\|\|!1,ze=e.RETURN_DOM\|\|!1,Pe=e.RETURN_DOM_FRAGMENT\|\|!1,Ue=e.RETURN_TRUSTED_TYPE\|\|!1,Ie=e.FORCE_BODY\|\|!1,He=!1!==e.SANITIZE_DOM,Fe=e.SANITIZE_NAMED_PROPS\|\|!1,Ge=!1!==e.KEEP_CONTENT,Be=e.IN_PLACE\|\|!1,ye=e.ALLOWED_URI_REGEXP\|\|F,Qe=e.NAMESPACE\|\|Je,ot=e.MATHML_TEXT_INTEGRATION_POINTS\|\|ot,at=e.HTML_INTEGRATION_POINTS\|\|at,be=e.CUSTOM_ELEMENT_HANDLING\|\|{},e.CUSTOM_ELEMENT_HANDLING&&pt(e.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(be.tagNameCheck=e.CUSTOM_ELEMENT_HANDLING.tagNameCheck),e.CUSTOM_ELEMENT_HANDLING&&pt(e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(be.attributeNameCheck=e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),e.CUSTOM_ELEMENT_HANDLING&&"boolean"==typeof e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements&&(be.allowCustomizedBuiltInElements=e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),Ce&&(we=!1),Pe&&(ze=!0),We&&(Se=addToSet({},x),Ee=[],!0===We.html&&(addToSet(Se,N),addToSet(Ee,C)),!0===We.svg&&(addToSet(Se,D),addToSet(Ee,v),addToSet(Ee,M)),!0===We.svgFilters&&(addToSet(Se,k),addToSet(Ee,v),addToSet(Ee,M)),!0===We.mathMl&&(addToSet(Se,w),addToSet(Ee,L),addToSet(Ee,M))),e.ADD_TAGS&&("function"==typeof e.ADD_TAGS?ke.tagCheck=e.ADD_TAGS:(Se===_e&&(Se=clone(Se)),addToSet(Se,e.ADD_TAGS,ct))),e.ADD_ATTR&&("function"==typeof e.ADD_ATTR?ke.attributeCheck=e.ADD_ATTR:(Ee===Ae&&(Ee=clone(Ee)),addToSet(Ee,e.ADD_ATTR,ct))),e.ADD_URI_SAFE_ATTR&&addToSet(Ve,e.ADD_URI_SAFE_ATTR,ct),e.FORBID_CONTENTS&&(Ye===je&&(Ye=clone(Ye)),addToSet(Ye,e.FORBID_CONTENTS,ct)),e.ADD_FORBID_CONTENTS&&(Ye===je&&(Ye=clone(Ye)),addToSet(Ye,e.ADD_FORBID_CONTENTS,ct)),Ge&&(Se["#text"]=!0),Le&&addToSet(Se,["html","head","body"]),Se.table&&(addToSet(Se,["tbody"]),delete Ne.tbody),e.TRUSTED_TYPES_POLICY){if("function"!=typeof e.TRUSTED_TYPES_POLICY.createHTML)throw b('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');if("function"!=typeof e.TRUSTED_TYPES_POLICY.createScriptURL)throw b('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');ne=e.TRUSTED_TYPES_POLICY,oe=ne.createHTML("")}else void 0===ne&&(ne=function _createTrustedTypesPolicy(e,t){if("object"!=typeof e\|\|"function"!=typeof e.createPolicy)return null;let n=null;const o="data-tt-policy-suffix";t&&t.hasAttribute(o)&&(n=t.getAttribute(o));const a="dompurify"+(n?"#"+n:"");try{return e.createPolicy(a,{createHTML:e=>e,createScriptURL:e=>e})}catch(e){return console.warn("TrustedTypes policy "+a+" could not be created."),null}}(G,a)),null!==ne&&"string"==typeof oe&&(oe=ne.createHTML(""));r&&r(e),st=e}},mt=addToSet({},[...D,...k,...R]),ft=addToSet({},[...w,...O]),ht=function _forceRemove(e){m(DOMPurify.removed,{element:e});try{te(e).removeChild(e)}catch(t){J(e)}},Tt=function _removeAttribute(e,t){try{m(DOMPurify.removed,{attribute:t.getAttributeNode(e),from:t})}catch(e){m(DOMPurify.removed,{attribute:null,from:t})}if(t.removeAttribute(e),"is"===e)if(ze\|\|Pe)try{ht(t)}catch(e){}else try{t.setAttribute(e,"")}catch(e){}},gt=function _initDocument(e){let t=null,o=null;if(Ie)e="<remove></remove>"+e;else{const t=g(e,/^[\r\n\t ]+/);o=t&&t[0]}"application/xhtml+xml"===it&&Qe===Je&&(e='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+e+"</body></html>");const a=ne?ne.createHTML(e):e;if(Qe===Je)try{t=(new H).parseFromString(a,it)}catch(e){}if(!t\|\|!t.documentElement){t=ae.createDocument(Qe,"template",null);try{t.documentElement.innerHTML=et?oe:a}catch(e){}}const r=t.body\|\|t.documentElement;return e&&o&&r.insertBefore(n.createTextNode(o),r.childNodes[0]\|\|null),Qe===Je?le.call(t,Le?"html":"body")[0]:Le?t.documentElement:r},yt=function _createNodeIterator(e){return re.call(e.ownerDocument\|\|e,e,z.SHOW_ELEMENT\|z.SHOW_COMMENT\|z.SHOW_TEXT\|z.SHOW_PROCESSING_INSTRUCTION\|z.SHOW_CDATA_SECTION,null)},St=function _isClobbered(e){return e instanceof U&&("string"!=typeof e.nodeName\|\|"string"!=typeof e.textContent\|\|"function"!=typeof e.removeChild\|\|!(e.attributes instanceof P)\|\|"function"!=typeof e.removeAttribute\|\|"function"!=typeof e.setAttribute\|\|"string"!=typeof e.namespaceURI\|\|"function"!=typeof e.insertBefore\|\|"function"!=typeof e.hasChildNodes)},_t=function _isNode(e){return"function"==typeof s&&e instanceof s};function _executeHooks(e,t,n){u(e,e=>{e.call(DOMPurify,t,n,st)})}const Et=function _sanitizeElements(e){let t=null;if(_executeHooks(se.beforeSanitizeElements,e,null),St(e))return ht(e),!0;const n=ct(e.nodeName);if(_executeHooks(se.uponSanitizeElement,e,{tagName:n,allowedTags:Se}),ve&&e.hasChildNodes()&&!_t(e.firstElementChild)&&A(/<[/\w!]/g,e.innerHTML)&&A(/<[/\w!]/g,e.textContent))return ht(e),!0;if(e.nodeType===V)return ht(e),!0;if(ve&&e.nodeType===$&&A(/<[/\w]/g,e.data))return ht(e),!0;if(!(ke.tagCheck instanceof Function&&ke.tagCheck(n))&&(!Se[n]\|\|Ne[n])){if(!Ne[n]&&bt(n)){if(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,n))return!1;if(be.tagNameCheck instanceof Function&&be.tagNameCheck(n))return!1}if(Ge&&!Ye[n]){const t=te(e)\|\|e.parentNode,n=ee(e)\|\|e.childNodes;if(n&&t){for(let o=n.length-1;o>=0;--o){const a=Y(n[o],!0);a.__removalCount=(e.__removalCount\|\|0)+1,t.insertBefore(a,Q(e))}}}return ht(e),!0}return e instanceof I&&!function _checkValidNamespace(e){let t=te(e);t&&t.tagName\|\|(t={namespaceURI:Qe,tagName:"template"});const n=h(e.tagName),o=h(t.tagName);return!!tt[e.namespaceURI]&&(e.namespaceURI===Ze?t.namespaceURI===Je?"svg"===n:t.namespaceURI===Ke?"svg"===n&&("annotation-xml"===o\|\|ot[o]):Boolean(mt[n]):e.namespaceURI===Ke?t.namespaceURI===Je?"math"===n:t.namespaceURI===Ze?"math"===n&&at[o]:Boolean(ft[n]):e.namespaceURI===Je?!(t.namespaceURI===Ze&&!at[o])&&!(t.namespaceURI===Ke&&!ot[o])&&!ft[n]&&(rt[n]\|\|!mt[n]):!("application/xhtml+xml"!==it\|\|!tt[e.namespaceURI]))}(e)?(ht(e),!0):"noscript"!==n&&"noembed"!==n&&"noframes"!==n\|\|!A(/<\/no(script\|embed\|frames)/i,e.innerHTML)?(Ce&&e.nodeType===q&&(t=e.textContent,u([ue,pe,de],e=>{t=y(t,e," ")}),e.textContent!==t&&(m(DOMPurify.removed,{element:e.cloneNode()}),e.textContent=t)),_executeHooks(se.afterSanitizeElements,e,null),!1):(ht(e),!0)},At=function _isValidAttribute(e,t,o){if(He&&("id"===t\|\|"name"===t)&&(o in n\|\|o in ut))return!1;if(we&&!De[t]&&A(me,t));else if(Re&&A(fe,t));else if(ke.attributeCheck instanceof Function&&ke.attributeCheck(t,e));else if(!Ee[t]\|\|De[t]){if(!(bt(e)&&(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,e)\|\|be.tagNameCheck instanceof Function&&be.tagNameCheck(e))&&(be.attributeNameCheck instanceof RegExp&&A(be.attributeNameCheck,t)\|\|be.attributeNameCheck instanceof Function&&be.attributeNameCheck(t,e))\|\|"is"===t&&be.allowCustomizedBuiltInElements&&(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,o)\|\|be.tagNameCheck instanceof Function&&be.tagNameCheck(o))))return!1}else if(Ve[t]);else if(A(ye,y(o,Te,"")));else if("src"!==t&&"xlink:href"!==t&&"href"!==t\|\|"script"===e\|\|0!==S(o,"data:")\|\|!Xe[e]){if(Oe&&!A(he,y(o,Te,"")));else if(o)return!1}else;return!0},bt=function _isBasicCustomElement(e){return"annotation-xml"!==e&&g(e,ge)},Nt=function _sanitizeAttributes(e){_executeHooks(se.beforeSanitizeAttributes,e,null);const{attributes:t}=e;if(!t\|\|St(e))return;const n={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:Ee,forceKeepAttr:void 0};let o=t.length;for(;o--;){const a=t[o],{name:r,namespaceURI:i,value:l}=a,c=ct(r),s=l;let p="value"===r?s:_(s);if(n.attrName=c,n.attrValue=p,n.keepAttr=!0,n.forceKeepAttr=void 0,_executeHooks(se.uponSanitizeAttribute,e,n),p=n.attrValue,!Fe\|\|"id"!==c&&"name"!==c\|\|(Tt(r,e),p="user-content-"+p),ve&&A(/((--!?\|])>)\|<\/(style\|title\|textarea)/i,p)){Tt(r,e);continue}if("attributename"===c&&g(p,"href")){Tt(r,e);continue}if(n.forceKeepAttr)continue;if(!n.keepAttr){Tt(r,e);continue}if(!xe&&A(/\/>/i,p)){Tt(r,e);continue}Ce&&u([ue,pe,de],e=>{p=y(p,e," ")});const m=ct(e.nodeName);if(At(m,c,p)){if(ne&&"object"==typeof G&&"function"==typeof G.getAttributeType)if(i);else switch(G.getAttributeType(m,c)){case"TrustedHTML":p=ne.createHTML(p);break;case"TrustedScriptURL":p=ne.createScriptURL(p)}if(p!==s)try{i?e.setAttributeNS(i,r,p):e.setAttribute(r,p),St(e)?ht(e):d(DOMPurify.removed)}catch(t){Tt(r,e)}}else Tt(r,e)}_executeHooks(se.afterSanitizeAttributes,e,null)},Dt=function _sanitizeShadowDOM(e){let t=null;const n=yt(e);for(_executeHooks(se.beforeSanitizeShadowDOM,e,null);t=n.nextNode();)_executeHooks(se.uponSanitizeShadowNode,t,null),Et(t),Nt(t),t.content instanceof i&&_sanitizeShadowDOM(t.content);_executeHooks(se.afterSanitizeShadowDOM,e,null)};return DOMPurify.sanitize=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=null,a=null,r=null,l=null;if(et=!e,et&&(e="\x3c!--\x3e"),"string"!=typeof e&&!_t(e)){if("function"!=typeof e.toString)throw b("toString is not a function");if("string"!=typeof(e=e.toString()))throw b("dirty is not a string, aborting")}if(!DOMPurify.isSupported)return e;if(Me\|\|dt(t),DOMPurify.removed=[],"string"==typeof e&&(Be=!1),Be){if(e.nodeName){const t=ct(e.nodeName);if(!Se[t]\|\|Ne[t])throw b("root node is forbidden and cannot be sanitized in-place")}}else if(e instanceof s)n=gt("\x3c!----\x3e"),a=n.ownerDocument.importNode(e,!0),a.nodeType===X&&"BODY"===a.nodeName\|\|"HTML"===a.nodeName?n=a:n.appendChild(a);else{if(!ze&&!Ce&&!Le&&-1===e.indexOf("<"))return ne&&Ue?ne.createHTML(e):e;if(n=gt(e),!n)return ze?null:Ue?oe:""}n&&Ie&&ht(n.firstChild);const c=yt(Be?e:n);for(;r=c.nextNode();)Et(r),Nt(r),r.content instanceof i&&Dt(r.content);if(Be)return e;if(ze){if(Pe)for(l=ie.call(n.ownerDocument);n.firstChild;)l.appendChild(n.firstChild);else l=n;return(Ee.shadowroot\|\|Ee.shadowrootmode)&&(l=ce.call(o,l,!0)),l}let p=Le?n.outerHTML:n.innerHTML;return Le&&Se["!doctype"]&&n.ownerDocument&&n.ownerDocument.doctype&&n.ownerDocument.doctype.name&&A(W,n.ownerDocument.doctype.name)&&(p="<!DOCTYPE "+n.ownerDocument.doctype.name+">\n"+p),Ce&&u([ue,pe,de],e=>{p=y(p,e," ")}),ne&&Ue?ne.createHTML(p):p},DOMPurify.setConfig=function(){dt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),Me=!0},DOMPurify.clearConfig=function(){st=null,Me=!1},DOMPurify.isValidAttribute=function(e,t,n){st\|\|dt({});const o=ct(e),a=ct(t);return At(o,a,n)},DOMPurify.addHook=function(e,t){"function"==typeof t&&m(se[e],t)},DOMPurify.removeHook=function(e,t){if(void 0!==t){const n=p(se[e],t);return-1===n?void 0:f(se[e],n,1)[0]}return d(se[e])},DOMPurify.removeHooks=function(e){se[e]=[]},DOMPurify.removeAllHooks=function(){se={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}},DOMPurify}();return J}); \ No newline at end of file diff --git a/src/images/wingrip.png b/src/images/wingrip.png deleted file mode 100644 index 0b9cb1b..0000000 Binary files a/src/images/wingrip.png and /dev/null differ diff --git a/src/inc/generator.php b/src/inc/generator.php new file mode 100644 index 0000000..3d2651d --- /dev/null +++ b/src/inc/generator.php @@ -0,0 +1,555 @@ +<?php +/* + * Construct shortcodes. + * + * @category Core + * @package AblePlayer + * @author Joe Dolson + * @license GPLv3 + * @link https://www.joedolson.com/ableplayer/ + / + +if ( ! defined( 'ABSPATH' ) ) { + exit; +} + +/* + * Create a shortcode for Able Player. + * + * @param string $format Output type. Default is 'shortcode', can output values in array. + / +function ableplayer_generate( $format = 'shortcode' ) { + if ( isset( $_POST['generator'] ) ) { + $nonce = sanitize_text_field( $_POST['_wpnonce'] ); + if ( ! wp_verify_nonce( $nonce, 'ableplayer-nonce' ) ) { + wp_die( 'Invalid nonce' ); + } + $string = ''; + $array = array(); + $shortcode = 'ableplayer'; + $keys = array( 'youtube-id', 'vimeo-id', 'media-id', 'youtube-desc-id', 'youtube-sign-src', 'vimeo-desc-id', 'media-desc-id', 'media-asl-id', 'poster', 'captions', 'subtitles', 'descriptions', 'chapters', 'autoplay', 'loop', 'playsinline', 'hidecontrols', 'heading', 'speed', 'start', 'volume', 'seekinterval' ); + $post = map_deep( $_POST, 'sanitize_text_field' ); + + if ( empty( $post['youtube-id'] ) && empty( $post['vimeo-id'] ) && empty( $post['media-id'] ) ) { + return array( + 'message' => __( 'You must specify at least one media source', 'ableplayer' ), + 'type' => 'error', + ); + } + foreach ( $post as $key => $v ) { + if ( in_array( $key, $keys, true ) ) { + if ( 'speed' === $key && ableplayer_get_settings( 'default_speed' ) === $v ) { + continue; + } + if ( 'heading' === $key && ableplayer_get_settings( 'default_heading' ) === $v ) { + continue; + } + if ( '' !== $v ) { + if ( in_array( $key, array( 'captions', 'subtitles', 'descriptions', 'chapters' ), true ) ) { + $v .= ableplayer_shortcode_track( $key, $post ); + } + $array[ $key ] = $v; + $string .= " $key="$v""; + } + } + } + $output = esc_html( $shortcode . $string ); + ableplayer_update_setting( 'last_shortcode', $output ); + + if ( 'shortcode' === $format && ! is_array( $output ) ) { + $return = "<div class='notice notice-info'><p><textarea readonly='readonly' class='large-text readonly'>[$output] "; + echo wp_kses( $return, ableplayer_kses_elements() ); + } else { + if ( is_array( $output ) ) { + return $output; + } + $array['shortcode'] = "[$output]"; + $array['message'] = __( 'New shortcode created.', 'ableplayer' ); + $array['type'] = 'success'; + + return $array; + } + } +} + +/* + * Get the srclang and label for a shortcode track. + * + * @param string $kind Type of track. + * @param array $post Array of data to test. + * + * @return string + / +function ableplayer_shortcode_track( $kind, $post ) { + // Handle track srclang and label. + $default_lang = str_replace( '_', '-', get_locale() ); + $kinds = array( + 'captions' => __( 'Captions', 'ableplayer' ), + 'subtitles' => __( 'Subtitles', 'ableplayer' ), + 'descriptions' => __( 'Audio Description', 'ableplayer' ), + 'chapters' => __( 'Chapters', 'ableplayer' ), + ); + + $v = ''; + $srclang = isset( $post[ $kind . '-srclang' ] ) ? $post[ $kind . '-srclang' ] : ''; + $label = isset( $post[ $kind . '-label' ] ) ? $post[ $kind . '-label' ] : ''; + if ( $srclang && $srclang !== $default_lang ) { + $v .= '\|' . $srclang; + } + if ( $label && $label !== $kinds['captions'] ) { + $v .= '\|' . $label; + } + + return $v; +} + +/* + * Form to create a shortcode + * + * @param array $data Data submitted from shortcode generator. + / +function ableplayer_generator( $data = array() ) { + ?> + + + + + + + [ableplayer] shortcode.', 'ableplayer' ); + $message_type = isset( $params['type'] ) ? $params['type'] : 'info'; + $shortcode = isset( $params['shortcode'] ) ? $params['shortcode'] : '[ableplayer]'; + $last_shortcode = ableplayer_get_settings( 'last_shortcode' ); + $shortcode = ( ! isset( $params['shortcode'] ) && $last_shortcode ) ? "[$last_shortcode]" : $shortcode; + $default_lang = str_replace( '_', '-', get_locale() ); + $kinds = array( + 'captions' => __( 'Captions', 'ableplayer' ), + 'subtitles' => __( 'Subtitles', 'ableplayer' ), + 'descriptions' => __( 'Audio Description', 'ableplayer' ), + 'chapters' => __( 'Chapters', 'ableplayer' ), + ); + ?> + + + $message_type, + 'additional_classes' => array( 'inline' ), + ) + ); + ?> + + Shortcode' . $shortcode . ' + ' . __( 'Shortcode Copied', 'ableplayer' ) . ' + ' + ); + } + ?> + + + + + + 'source_type', + 'label' => __( 'Video Source Type', 'ableplayer' ), + 'type' => 'select', + 'default' => array( + 'youtube' => 'YouTube', + 'vimeo' => 'Vimeo', + 'local' => 'Local', + ), + ), + 'generator' + ); + ?> + + + 'youtube-id', + 'label' => __( 'YouTube Source', 'ableplayer' ), + 'type' => 'url', + 'atts' => array( + 'placeholder' => 'https://youtube.com', + ), + ), + 'generator' + ); + ableplayer_settings_field( + array( + 'name' => 'youtube-desc-id', + 'label' => __( 'YouTube Audio Described Source', 'ableplayer' ), + 'type' => 'url', + 'atts' => array( + 'placeholder' => 'https://youtube.com', + ), + ), + 'generator' + ); + ableplayer_settings_field( + array( + 'name' => 'youtube-sign-src', + 'label' => __( 'YouTube Sign Language Source', 'ableplayer' ), + 'type' => 'url', + 'atts' => array( + 'placeholder' => 'https://youtube.com', + ), + ), + 'generator' + ); + ?> + + + 'vimeo-id', + 'label' => __( 'Vimeo Source', 'ableplayer' ), + 'type' => 'url', + 'atts' => array( + 'placeholder' => 'https://vimeo.com', + ), + ), + 'generator' + ); + ableplayer_settings_field( + array( + 'name' => 'vimeo-desc-id', + 'label' => __( 'Vimeo Audio Described Source', 'ableplayer' ), + 'type' => 'url', + 'atts' => array( + 'placeholder' => 'https://vimeo.com', + ), + ), + 'generator' + ); + ?> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 'captions-srclang', + 'label' => __( 'Language Code', 'ableplayer' ), + 'type' => 'text', + 'default' => $default_lang, + ), + 'generator' + ); + ableplayer_settings_field( + array( + 'name' => 'captions-label', + 'label' => __( 'Captions Label', 'ableplayer' ), + 'type' => 'text', + 'default' => $kinds['captions'], + ), + 'generator' + ); + ?> + + + + + + + + + + + + + 'subtitles-srclang', + 'label' => __( 'Language Code', 'ableplayer' ), + 'type' => 'text', + 'default' => $default_lang, + ), + 'generator' + ); + ableplayer_settings_field( + array( + 'name' => 'subtitles-label', + 'label' => __( 'Subtitles Label', 'ableplayer' ), + 'type' => 'text', + 'default' => $kinds['subtitles'], + ), + 'generator' + ); + ?> + + + + + + + + + + + + + 'descriptions-srclang', + 'label' => __( 'Language Code', 'ableplayer' ), + 'type' => 'text', + 'default' => $default_lang, + ), + 'generator' + ); + ableplayer_settings_field( + array( + 'name' => 'descriptions-label', + 'label' => __( 'Descriptions Label', 'ableplayer' ), + 'type' => 'text', + 'default' => $kinds['descriptions'], + ), + 'generator' + ); + ?> + + + + + + + + + + + + + 'chapter-srclang', + 'label' => __( 'Language Code', 'ableplayer' ), + 'type' => 'text', + 'default' => $default_lang, + ), + 'generator' + ); + ableplayer_settings_field( + array( + 'name' => 'chapter-label', + 'label' => __( 'Chapters Label', 'ableplayer' ), + 'type' => 'text', + 'default' => $kinds['chapters'], + ), + 'generator' + ); + ?> + + + + + + + + + + 'autoplay', + 'label' => __( 'Enable Autoplay', 'ableplayer' ), + 'type' => 'checkbox-single', + ), + 'generator' + ); + ?> + + + 'loop', + 'label' => __( 'Enable Looping', 'ableplayer' ), + 'type' => 'checkbox-single', + ), + 'generator' + ); + ?> + + + 'playsinline', + 'label' => __( 'Play inline on mobile devices', 'ableplayer' ), + 'type' => 'checkbox-single', + ), + 'generator' + ); + ?> + + + 'hidecontrols', + 'label' => __( 'Hide controls while playing', 'ableplayer' ), + 'type' => 'checkbox-single', + ), + 'generator' + ); + ?> + + + 'heading', + 'label' => __( 'Hidden heading level', 'ableplayer' ), + 'type' => 'select', + 'default' => array( + 'auto' => __( 'Automatically assigned', 'ableplayer' ), + '0' => __( 'No heading', 'ableplayer' ), + '2' => 'h2', + '3' => 'h3', + '4' => 'h4', + ), + ), + 'generator' + ); + ?> + + + 'speed', + 'label' => __( 'Speed selection control', 'ableplayer' ), + 'type' => 'select', + 'default' => array( + 'animals' => __( 'Animals: Tortoise and Hare', 'ableplayer' ), + 'arrows' => __( 'Arrows', 'ableplayer' ), + ), + ), + 'generator' + ); + ?> + + + 'start', + 'label' => __( 'Start time in seconds', 'ableplayer' ), + 'type' => 'number', + 'atts' => array( + 'min' => '0', + 'step' => '1', + ), + ), + 'generator' + ); + ?> + + + 'volume', + 'label' => __( 'Initial volume', 'ableplayer' ), + 'type' => 'number', + 'atts' => array( + 'min' => '0', + 'max' => '10', + 'step' => '1', + ), + ), + 'generator' + ); + ?> + + + 'seekinterval', + 'label' => __( 'Seek interval', 'ableplayer' ), + 'type' => 'number', + 'note' => __( 'A value of 0 lets Able Player calculate the seek interval based on video length.', 'ableplayer' ), + 'atts' => array( + 'min' => '0', + 'step' => '5', + ), + ), + 'generator' + ); + ?> + + + + + array( + 'class' => array(), + 'style' => array(), + 'focusable' => array(), + 'role' => array(), + 'aria-labelledby' => array(), + 'xmlns' => array(), + 'viewbox' => array(), + ), + 'g' => array( + 'fill' => array(), + ), + 'title' => array( + 'id' => array(), + 'title' => array(), + ), + 'path' => array( + 'd' => array(), + 'fill' => array(), + ), + 'h2' => array( + 'class' => array(), + 'id' => array(), + ), + 'h3' => array( + 'class' => array(), + 'id' => array(), + ), + 'h4' => array( + 'class' => array(), + 'id' => array(), + ), + 'h5' => array( + 'class' => array(), + 'id' => array(), + ), + 'h6' => array( + 'class' => array(), + 'id' => array(), + ), + 'label' => array( + 'for' => array(), + 'class' => array(), + 'id' => array(), + 'aria-labelledby' => array(), + ), + 'option' => array( + 'value' => array(), + 'selected' => array(), + 'data-period' => array(), + ), + 'select' => array( + 'id' => array(), + 'aria-describedby' => array(), + 'aria-labelledby' => array(), + 'name' => array(), + 'disabled' => array(), + 'min' => array(), + 'max' => array(), + 'required' => array(), + 'readonly' => array(), + 'autocomplete' => array(), + 'class' => array(), + ), + 'input' => array( + 'id' => array(), + 'class' => array(), + 'aria-describedby' => array(), + 'aria-labelledby' => array(), + 'value' => array(), + 'type' => array(), + 'name' => array(), + 'size' => array(), + 'checked' => array(), + 'disabled' => array(), + 'min' => array(), + 'max' => array(), + 'required' => array(), + 'readonly' => array(), + 'autocomplete' => array(), + 'placeholder' => array(), + 'data-variable' => array(), + 'maxlength' => array(), + 'step' => array(), + 'data-context' => array(), + 'data-action' => array(), + ), + 'textarea' => array( + 'id' => array(), + 'class' => array(), + 'cols' => array(), + 'rows' => array(), + 'aria-describedby' => array(), + 'aria-labelledby' => array(), + 'disabled' => array(), + 'required' => array(), + 'readonly' => array(), + 'name' => array(), + 'placeholder' => array(), + ), + 'form' => array( + 'id' => array(), + 'name' => array(), + 'action' => array(), + 'method' => array(), + 'class' => array(), + 'role' => array(), + ), + 'button' => array( + 'name' => array(), + 'disabled' => array(), + 'type' => array(), + 'class' => array(), + 'aria-expanded' => array(), + 'aria-describedby' => array(), + 'role' => array(), + 'aria-selected' => array(), + 'aria-controls' => array(), + 'data-type' => array(), + 'aria-pressed' => array(), + 'id' => array(), + 'data-context' => array(), + 'data-model' => array(), + 'data-event' => array(), + 'data-modal-content-id' => array(), + 'data-modal-prefix-class' => array(), + 'data-modal-close-text' => array(), + 'data-modal-title' => array(), + 'data-begin' => array(), + 'data-end' => array(), + 'data-value' => array(), + 'value' => array(), + ), + 'ul' => array( + 'class' => array(), + 'id' => array(), + ), + 'fieldset' => array( + 'class' => array(), + 'id' => array(), + ), + 'legend' => array( + 'class' => array(), + 'id' => array(), + ), + 'li' => array( + 'class' => array(), + ), + 'span' => array( + 'id' => array(), + 'class' => array(), + 'aria-live' => array(), + 'aria-hidden' => array(), + 'style' => array(), + 'lang' => array(), + 'title' => array(), + ), + 'em' => array( + 'id' => array(), + 'class' => array(), + 'aria-hidden' => array(), + ), + 'i' => array( + 'id' => array(), + 'class' => array(), + 'aria-live' => array(), + 'aria-hidden' => array(), + ), + 'strong' => array( + 'id' => array(), + 'class' => array(), + 'aria-hidden' => array(), + ), + 'b' => array( + 'id' => array(), + 'class' => array(), + ), + 'abbr' => array( + 'title' => array(), + 'aria-hidden' => array(), + ), + 'hr' => array( + 'class' => array(), + ), + 'p' => array( + 'class' => array(), + ), + 'div' => array( + 'class' => array(), + 'aria-live' => array(), + 'id' => array(), + 'role' => array(), + 'data-default' => array(), + 'aria-labelledby' => array(), + 'style' => array(), + 'lang' => array(), + 'aria-label' => array(), + 'tabindex' => array(), + 'data-maptype' => array(), + 'data-title' => array(), + 'data-address' => array(), + 'data-icon' => array(), + 'data-lat' => array(), + 'data-lng' => array(), + ), + 'img' => array( + 'class' => true, + 'src' => true, + 'alt' => true, + 'width' => true, + 'height' => true, + 'id' => true, + 'longdesc' => true, + 'tabindex' => true, + 'loading' => true, + 'srcset' => true, + ), + 'br' => array(), + 'table' => array( + 'class' => array(), + 'id' => array(), + 'aria-labelledby' => array(), + ), + 'caption' => array(), + 'thead' => array(), + 'tfoot' => array(), + 'tbody' => array(), + 'tr' => array( + 'class' => array(), + 'id' => array(), + ), + 'th' => array( + 'scope' => array(), + 'class' => array(), + 'id' => array(), + 'aria-sort' => array(), + + ), + 'td' => array( + 'class' => array(), + 'id' => array(), + 'aria-live' => array(), + 'aria-current' => array(), + ), + 'a' => array( + 'aria-label' => array(), + 'aria-labelledby' => array(), + 'aria-describedby' => array(), + 'href' => array(), + 'class' => array(), + 'aria-current' => array(), + 'target' => array(), + 'aria-pressed' => array(), + 'data-title' => array(), + 'id' => array(), + 'rel' => array(), + ), + 'section' => array( + 'id' => array(), + 'class' => array(), + ), + 'aside' => array( + 'id' => array(), + 'class' => array(), + ), + 'code' => array( + 'class' => array(), + ), + 'pre' => array( + 'class' => array(), + ), + 'duet-date-picker' => array( + 'identifier' => array(), + 'first-day-of-week' => array(), + 'name' => array(), + 'value' => array(), + 'required' => array(), + ), + 'time' => array( + 'data-label' => array(), + 'class' => array(), + 'datetime' => array(), + ), + 'iframe' => array( + 'width' => array(), + 'height' => array(), + 'src' => array(), + 'title' => array(), + 'frameborder' => array(), + 'allow' => array(), + 'allowfullscreen' => array(), + ), + 'article' => array( + 'id' => array(), + 'class' => array(), + ), + 'header' => array( + 'id' => array(), + 'class' => array(), + ), + 'nav' => array( + 'id' => array(), + 'class' => array(), + 'aria-label' => array(), + ), + ); + + return $elements; +} diff --git a/src/inc/settings.php b/src/inc/settings.php new file mode 100644 index 0000000..ce582bb --- /dev/null +++ b/src/inc/settings.php @@ -0,0 +1,612 @@ +"; + $element = ''; + $close = ''; + if ( ! empty( $wrap ) ) { + $el = isset( $wrap['element'] ) ? $wrap['element'] : 'p'; + $class = ''; + $id = ''; + if ( isset( $wrap['class'] ) && '' !== $wrap['class'] ) { + $class = ' class="' . $wrap['class'] . '"'; + } + if ( isset( $wrap['id'] ) && '' !== $wrap['id'] ) { + $id = ' id="' . $wrap['id'] . '"'; + } + $element = "<$el$class$id>"; + $close = ""; + } + + $options = ''; + $attributes = ''; + $return = ''; + if ( 'text' === $type \|\| 'url' === $type \|\| 'email' === $type ) { + $base_atts = array( + 'size' => '30', + ); + } else { + $base_atts = $atts; + } + $value = ableplayer_get_settings( $name ); + $value = ( 'generator' === $context && ! is_string( $value ) ) ? '' : $value; + $atts = array_merge( $base_atts, $atts ); + if ( is_array( $atts ) && ! empty( $atts ) ) { + foreach ( $atts as $key => $val ) { + $attributes .= " $key='" . esc_attr( $val ) . "'"; + } + } + if ( 'checkbox' !== $type ) { + if ( is_array( $default ) ) { + $hold = ''; + } else { + $hold = $default; + } + $value = ( '' !== $value ) ? esc_attr( wp_unslash( $value ) ) : $hold; + } else { + $value = ( ! empty( $value ) ) ? (array) $value : $default; + } + switch ( $type ) { + case 'text': + case 'url': + case 'email': + case 'number': + if ( $note ) { + $note = sprintf( str_replace( '%', '', $note ), "`$value`" ); + $note = "$help_icon$note"; + $aria = " aria-describedby='$id-note'"; + } else { + $note = ''; + $aria = ''; + } + $note_top = ( 'top' === $position ) ? $note : ''; + $note_bottom = ( 'bottom' === $position ) ? $note : ''; + $return = "$element$label $note_top $close $note_bottom"; + break; + case 'hidden': + $return = ""; + break; + case 'textarea': + if ( $note ) { + $note = sprintf( $note, "`$value`" ); + $note = "$help_icon$note"; + $aria = " aria-describedby='$id-note'"; + } else { + $note = ''; + $aria = ''; + } + $return = "$element$label " . esc_attr( $value ) . "$close$note"; + break; + case 'checkbox-single': + $checked = checked( 'true', ableplayer_get_settings( $name ), false ); + if ( $note ) { + $note = "$help_icon" . sprintf( $note, "`$value`" ) . ''; + $aria = " aria-describedby='$id-note'"; + } else { + $note = ''; + $aria = ''; + } + $return = "$element $label$close$note"; + break; + case 'checkbox': + case 'radio': + if ( $note ) { + $note = sprintf( $note, "`$value`" ); + $note = "$help_icon$note"; + $aria = " aria-describedby='$id-note'"; + } else { + $note = ''; + $aria = ''; + } + $att_name = $name; + if ( 'checkbox' === $type ) { + $att_name = $name . '[]'; + } + if ( is_array( $label ) ) { + foreach ( $label as $k => $v ) { + if ( 'radio' === $type ) { + $checked = ( $k === $value ) ? ' checked="checked"' : ''; + } else { + $checked = ( in_array( $k, $value, true ) ) ? ' checked="checked"' : ''; + } + $options .= " $element $v$close "; + } + } + $return = "$options $note"; + break; + case 'select': + if ( $note ) { + $note = sprintf( $note, "`$value`" ); + $note = "$help_icon$note"; + $aria = " aria-describedby='$id-note'"; + } else { + $note = ''; + $aria = ''; + } + if ( is_array( $default ) ) { + foreach ( $default as $k => $v ) { + $checked = ( (string) $k === (string) $value ) ? ' selected="selected"' : ''; + $options .= ""; + } + } + $return = " + $label + $element$close + $note"; + break; + } + + if ( true === $echo ) { + echo wp_kses( $return, ableplayer_kses_elements() ); + } else { + return $return; + } +} + +/* + * Save a group of Able Player settings. + * + * @param array $settings An array of settings. + * + * @return bool + / +function ableplayer_update_options( $settings ) { + if ( empty( $settings ) ) { + return false; + } + $defaults = ableplayer_default_settings(); + $options = get_option( 'ableplayer_settings' ); + if ( ! is_array( $options ) ) { + $options = $defaults; + } + $settings = array_merge( $options, $settings ); + + return update_option( 'ableplayer_settings', $settings ); +} + +/* + * Update Able Player settings. + * + * @param array $post POST data. + / +function ableplayer_update_settings( $post ) { + $settings = array(); + $replace_video = ( ! empty( $post['replace_video'] ) && 'on' === $post['replace_video'] ) ? 'true' : 'false'; + $replace_audio = ( ! empty( $post['replace_audio'] ) && 'on' === $post['replace_audio'] ) ? 'true' : 'false'; + $exclude_class = ( ! empty( $post['exclude_class'] ) ) ? sanitize_text_field( $post['exclude_class'] ) : ''; + $replace_playlists = ( ! empty( $post['replace_playlists'] ) && 'on' === $post['replace_playlists'] ) ? 'true' : 'false'; + $disable_elements = ( ! empty( $post['disable_elements'] ) && 'on' === $post['disable_elements'] ) ? 'true' : 'false'; + $youtube_nocookie = ( ! empty( $post['youtube_nocookie'] ) && 'on' === $post['youtube_nocookie'] ) ? 'true' : 'false'; + $play_inline = ( ! empty( $post['play_inline'] ) && 'on' === $post['play_inline'] ) ? 'true' : 'false'; + $render_transcript = ( ! empty( $post['render_transcript'] ) && 'on' === $post['render_transcript'] ) ? 'true' : 'false'; + $hide_controls = ( ! empty( $post['hide_controls'] ) && 'on' === $post['hide_controls'] ) ? 'true' : 'false'; + $default_speed = ( isset( $post['default_speed'] ) ) ? $post['default_speed'] : 'animals'; + $seek_interval = ( isset( $post['seek_interval'] ) && $post['seek_interval'] > 5 ) ? absint( $post['seek_interval'] ) : ''; + $default_heading = ( isset( $post['default_heading'] ) && 'auto' !== $post['default_heading'] ) ? absint( $post['default_heading'] ) : 'auto'; + $vimeo = ( ! empty( $post['vimeo'] ) && 'on' === $post['vimeo'] ) ? 'true' : 'false'; + $cookies = ( ! empty( $post['cookies'] ) && 'on' === $post['cookies'] ) ? 'true' : 'false'; + + $settings['replace_video'] = $replace_video; + $settings['replace_audio'] = $replace_audio; + $settings['exclude_class'] = $exclude_class; + $settings['replace_playlists'] = $replace_playlists; + $settings['disable_elements'] = $disable_elements; + $settings['youtube_nocookie'] = $youtube_nocookie; + $settings['seek_interval'] = $seek_interval; + $settings['play_inline'] = $play_inline; + $settings['render_transcript'] = $render_transcript; + $settings['hide_controls'] = $hide_controls; + $settings['default_speed'] = $default_speed; + $settings['default_heading'] = $default_heading; + $settings['vimeo'] = $vimeo; + $settings['cookies'] = $cookies; + + ableplayer_update_options( $settings ); +} + +/* + * Build Able Player settings form. + / +function ableplayer_settings_form() { + if ( ! empty( $_POST ) ) { + $nonce = $_REQUEST['_wpnonce']; + if ( ! wp_verify_nonce( $nonce, 'ableplayer-nonce' ) ) { + wp_die( 'Able Player: Security check failed' ); + } + $post = map_deep( $_POST, 'sanitize_textarea_field' ); + if ( isset( $post['ableplayer_settings'] ) ) { + ableplayer_update_settings( $post ); + wp_admin_notice( + __( 'Able Player Default Settings saved', 'ableplayer' ), + array( + 'type' => 'success', + ) + ); + } + } + ?> + + + + + + + + + + + + + + + + + + 'vimeo', + 'label' => __( 'Load the Vimeo player scripts globally.', 'ableplayer' ), + 'type' => 'checkbox-single', + 'note' => __( 'Required to play media from Vimeo outside of the AblePlayer shortcode.', 'ableplayer' ), + ) + ); + ?> + + + 'cookies', + 'label' => __( 'Store user settings in cookies.', 'ableplayer' ), + 'type' => 'checkbox-single', + 'note' => __( 'Required if you need to access user settings from server-side code.', 'ableplayer' ), + ) + ); + ?> + + + 'replace_video', + 'label' => __( 'Use Able Player for all `video` elements.', 'ableplayer' ), + 'type' => 'checkbox-single', + 'note' => __( 'Does not replace Vimeo or YouTube Embed blocks', 'ableplayer' ), + ) + ); + ?> + + + 'replace_audio', + 'label' => __( 'Use Able Player for all `audio` elements.', 'ableplayer' ), + 'type' => 'checkbox-single', + ) + ); + ?> + + + 'exclude_class', + 'label' => __( 'Exclude class from Able Player parsing', 'ableplayer' ), + 'note' => __( 'Disable Able Player on `video` or `audio` elements with this class or with a parent element with the class.', 'ableplayer' ), + 'type' => 'text', + ) + ); + ?> + + + 'replace_playlists', + 'label' => __( 'Use Able Player for WordPress media playlists.', 'ableplayer' ), + 'type' => 'checkbox-single', + ) + ); + ?> + + + 'disable_elements', + 'label' => __( 'Disable MediaElement JS.', 'ableplayer' ), + 'type' => 'checkbox-single', + 'note' => __( 'Recommended if using any element replacement options.', 'ableplayer' ), + ) + ); + ?> + + + 'youtube_nocookie', + 'label' => __( 'Set YouTube videos to use the nocookie parameter for increased privacy.', 'ableplayer' ), + 'type' => 'checkbox-single', + ) + ); + ?> + + + 'play_inline', + 'label' => __( 'Force mobile devices to play inline, instead of using their own media player.', 'ableplayer' ), + 'type' => 'checkbox-single', + ) + ); + ?> + + + 'render_transcript', + 'label' => __( 'Insert interactive transcript container.', 'ableplayer' ), + 'type' => 'checkbox-single', + ) + ); + ?> + + + 'default_speed', + 'label' => __( 'Preferred speed control icon', 'ableplayer' ), + 'type' => 'select', + 'default' => array( + 'animals' => __( 'Animals: Tortoise and Hare', 'ableplayer' ), + 'arrows' => __( 'Arrows', 'ableplayer' ), + ), + ) + ); + ?> + + + 'seek_interval', + 'label' => __( 'Default seek interval in seconds.', 'ableplayer' ), + 'type' => 'number', + 'atts' => array( + 'min' => 5, + 'step' => 5, + ), + ) + ); + ?> + + + 'hide_controls', + 'label' => __( 'Visually hide controls during playback', 'ableplayer' ), + 'type' => 'checkbox-single', + ) + ); + ?> + + + 'default_heading', + 'label' => __( 'Default hidden heading level', 'ableplayer' ), + 'type' => 'select', + 'default' => array( + 'auto' => __( 'Automatically set', 'ableplayer' ), + '0' => __( 'No heading', 'ableplayer' ), + '2' => 'H2', + '3' => 'H3', + '4' => 'H4', + ), + ) + ); + ?> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Able Player accessible media player.', 'ableplayer' ), 'https://ableplayer.github.io/ableplayer/' ) ); + ?> + + + Sponsor Joe Dolson, Able Player lead developer.', 'ableplayer' ), 'https://www.joedolson.com/donate/' ) ); + ?> + + + + + Mastodon + + + + Bluesky + + + + LinkedIn + + + + GitHub + + + + + + + + 'false', + 'replace_audio' => 'false', + 'exclude_class' => '', + 'replace_playlists' => 'false', + 'disable_elements' => 'false', + 'youtube_nocookie' => 'false', + 'play_inline' => 'true', + 'render_transcript' => 'true', + 'default_speed' => 'animals', + 'seek_interval' => '30', + 'hide_controls' => 'false', + 'default_heading' => 'auto', + 'last_shortcode' => '', + 'vimeo' => 'false', + 'cookies' => 'false', + ); + + return $settings; +} diff --git a/src/readme.txt b/src/readme.txt index 2148e63..3cb3fd1 100644 --- a/src/readme.txt +++ b/src/readme.txt @@ -1,12 +1,13 @@ === Able Player, accessible HTML5 media player === Contributors: terrillthompson, joedolson Plugin URI: https://github.com/ableplayer/ableplayer-wordpress -Author URI: http://terrillthompson.com +Author URI: https://www.joedolson.com +Donate link: https://www.joedolson.com/donate/ Tags: html5,media,audio,video,accessibility Requires at least: 4.9 -Tested up to: 6.8 -Requires PHP: 7.0 -Stable tag: 1.2.1 +Tested up to: 6.9 +Requires PHP: 7.4 +Stable tag: 2.3.0 License: MIT License URI: https://github.com/ableplayer/ableplayer-wordpress/blob/master/LICENSE @@ -19,8 +20,8 @@ This plug-in uses Able Player, an open-source fully-accessible cross-browser HTM == Installation == 1. Upload the unzipped folder `ableplayer` to the `/wp-content/plugins/` directory. -1. Activate the Able Player plugin through the 'Plugins' menu in WordPress -1. Follow the Instructions for Use +1. Activate the Able Player plugin through the 'Plugins' menu in WordPress. +1. Follow the Instructions for Use. == Screenshots == @@ -29,11 +30,17 @@ This plug-in uses Able Player, an open-source fully-accessible cross-browser HTM == Instructions for Use == -There are currently two ways to add an Able Player instance to a WordPress site: +There are currently three ways to add an Able Player instance to a WordPress site: -1. Enter or paste any valid HTML5 Able Player code into your web page. Full documentation is available on the [Able Player](http://ableplayer.github.io/ableplayer) project page on GitHub. +1. Go to Settings > Able Player > Settings and enable the options to use Able Player for all video, audio, and playlists. Able Player will automatically replace MediaElement.js or the default WordPress video/audio blocks with Able Player. +2. Go to Settings > Able Player > Shortcodes to generate an `[ableplayer]` shortcode. +3. Enter or paste any valid HTML5 Able Player code into your web page. Full documentation is available on the [Able Player](http://ableplayer.github.io/ableplayer) project page on GitHub. -2. Enter an `[ableplayer]` shortcode. The shortcode is intended for adding videos hosted on YouTube or Vimeo, with captions and subtitles hosted on these services. For anything more complex, use HTML. +Using the media rewriting in option #1, Able Player will replace any `audio` or `video` block. Any tracks added to that block will be automatically handled, giving you support for all the standard Able Player features: captions, navigable transcripts, subtitles, chapters, and audio description. + +Using option #2, you can create Able Player shortcodes that support most of the basic Able Player features, with support for Vimeo, YouTube, or local video. + +Option #3 supports the full scope of Able Player features. == The [ableplayer] shortcode == @@ -43,13 +50,29 @@ The `[ableplayer]` shortcode supports the following attributes. `youtube-id` - 11-character YouTube ID or YouTube URL. * `vimeo-id` - Vimeo ID or URL. +* `media-id` - An attachment ID for a media file in your WordPress media library or the URL to a hosted video. -= Optional attributes = += Additional Player Content = +* `captions` - Attachment ID or URL to `.vtt` captions file. Optional pipe separator for language code and label. +* `subtitles` - Attachment ID or URL to `.vtt` subtitles file. Optional pipe separator for language code and label. +* `chapters` - Attachment ID or URL to `.vtt` chapters file. Optional pipe separator for language code and label. +* `descriptions` - Attachment ID or URL to `.vtt` audio descriptions file. Optional pipe separator for language code and label. * `youtube-desc-id` - YouTube URL or ID of a described version of the video +* `youtube-sign-src` - YouTube URL or ID of a sign language interpreted accompanying video * `vimeo-desc-id` - Vimeo URL or ID of a described version of the video + +All captions, subtitles, chapters, and descriptions tracks must be in `.vtt` format. The shortcode only supports a single set of values for each type of data; to add multiple tracks of the same type you can use the Video block or add custom HTML. + +Either an attachment ID or a URL for your track `.vtt` is required; you can optionally add a language code and a custom label: + +`captions="/path/to/file.vtt\|es\|Español"` + +By default, the language will be your WordPress installation language, with the labels "Captions", "Subtitles", "Chapters" or "Audio Description". + += Player Options = + * `youtube-nocookie` - "true" or "false" (use "true" to embed YouTube untracked, for added privacy) -* `id` - a unique id for the player (if omitted, one will be automatically assigned) * `autoplay` - "true" or "false" (default is "false") * `loop` - "true" or "false" (default is "false") * `playsinline` - "true" or "false" (default is "true"). By setting to "false", some devices (e.g., iPhones) will play the video in their own media player rather than in Able Player. @@ -63,6 +86,8 @@ The `[ableplayer]` shortcode supports the following attributes. * `volume` - "0" to "10" (default is "7" to avoid overpowering screen reader audio). Some browsers do not support this. * `seekinterval` - number of seconds to forward/rewind with the Forward and Rewind buttons. If omitted, the interval will be intelligently assigned based on length of the video. * `nowplaying` - "true" or "false" to include a "Selected Track" section within the media player (default is "false"). +* `transcript-div` - ID attribute of a target element that will contain the video transcript +* `id` - a unique id for the player (if omitted, one will be automatically assigned) == Examples == @@ -70,8 +95,7 @@ The `[ableplayer]` shortcode supports the following attributes. This example uses HTML to add an audio player to the page, with one source (an MP3 file). ```html - + ``` = Example 2 = @@ -89,28 +113,91 @@ This example uses HTML to add a video player to the page, with one source (an MP = Example 3 = +This example uses the shortcode to add a video player to the page, with one source (an MP4 file) and four tracks (for captions, descriptions, and chapters in English; and subtitles in Spanish). All sources are fetched as WordPress media attachments. +```html + [ableplayer poster="21" media-id="24" captions="25\|en\|English" subtitles="26\|es\|Español" descriptions="27" chapters="28"] +``` + += Example 4 = + This example uses a shortcode to add a YouTube player to the page, with two versions of the video, one with audio description and the other without (the user can toggle between the two versions using the D button). ``` [ableplayer youtube-id="XXXXXXXXXXX" youtube-desc-id="YYYYYYYYYYY"] ``` -= Example 4 = += Example 5 = This example uses a shortcode to add a Vimeo player to the page, with two versions of the video, one with audio description and the other without (the user can toggle between the two versions using the D button). ``` [ableplayer vimeo-id="XXXXXXXXX" vimeo-desc-id="YYYYYYYYY"] ``` -== Roadmap == -1. Provide a user interface by which authors can select and configure default options through WordPress. -1. Interface directly with WordPress media libraries so users can select their media files and other assets rather than typing in URLs. +The Able Player plugin was originally created by [Terrill Thompson](https://terrillthompson.com). == Changelog == += 2.3.0 = + +* Add Playground previews on .org +* Update to [Able Player v4.8.0](https://github.com/ableplayer/ableplayer/releases/tag/v4.8.0). +* New feature to enable/disable cookies. +* Bug fix: Use history.pushState on tabs change. + += 2.2.1 = + +* Bug fix: Speed parameter variable misnamed in JS, so icons always defaulted to arrows. +* Bug fix: Minified JS out of date. + += 2.2.0 = + +* Update to [Able Player v4.7.0](https://github.com/ableplayer/ableplayer/releases/tag/v4.7.0). +* Add support for sign language sources from YouTube, new in Able Player 4.7. +* Remove `data-href` from allowed attributes in Able Player KSES. +* Trim all shortcode attributes of whitespace. +* Cast poster attribute to int if is numeric. +* Update screenshots. + += 2.1.0 = + +* Privacy: Only load Vimeo player.js if used in shortcode or enabled in settings. +* Styling: Updates to shipped styling to better avoid layout conflicts. +* Bug fix: Invalid comparison set all video types to `video/mp4`. +* Bug fix: Switch to `audio` player if file loaded is audio only. +* Bug fix: Address a couple cases where attributes could be unnecessarily added to content. +* Change: Load Able Player and video scripts deferred. + += 2.0.2 = + +* Bug fix: Default `nowplaying` attribute to empty, rather than false. +* Bug fix: Omit skin attribute if empty or 2020. +* Bug fix: If video mimetype is `video/quicktime`, override and set as `video/mp4`, as some browsers require this. + += 2.0.1 = + +* Bug fix: Shortcode generator passed an ID, but required a URL. +* Bug fix: Layout issue in description, subtitle, and chapter fields in shortcode generator. +* Bug fix: Incorrectly marked up data sources in shortcode rendering. + += 2.0.0 = + +* Feature: Settings to enable Able Player to parse `video` and `audio` blocks. +* Feature: Settings to enable Able Player to replace MediaElement.js playlists. +* Feature: Setting to disable MediaElement.js. +* Feature: Settings to configure default behaviors for Able Player. +* Feature: Shortcode generation tool to build Able Player shortcodes. +* Feature: Support for local video sources in shortcode. +* Feature: Support for captions, subtitles, chapters, and audio description tracks in shortcode. +* Feature: Automatically enable transcript div for Able Players with appropriate tracks. +* Upgrade to Able Player v4.6.0 + += 1.2.2 = + +* Security: Stored Cross Site Scripting vulnerability in shortcode. Props Peter Thaleikis, reported via WordFence. Also reported by Johska via Patchstack. + = 1.2.1 = * Change: Updates Able Player to version 4.5.1. -* Security: Upstream security update to add DomPurify to AblePlayer. +* Security: Upstream security update to add DomPurify to Able Player. * API: Makes Able Player with DomPurify as an unincorporated dependency available, switchable using the `able_player_js` filter. = 1.2.0 = diff --git a/src/screenshot-1.png b/src/screenshot-1.png index f8a9071..4584351 100644 Binary files a/src/screenshot-1.png and b/src/screenshot-1.png differ diff --git a/src/screenshot-2.png b/src/screenshot-2.png index 831d422..8c2ed59 100644 Binary files a/src/screenshot-2.png and b/src/screenshot-2.png differ diff --git a/src/styles/ableplayer-4.6.0.css b/src/styles/ableplayer-4.6.0.css new file mode 100644 index 0000000..5075caa --- /dev/null +++ b/src/styles/ableplayer-4.6.0.css @@ -0,0 +1,1345 @@ +/* + Able Player core styles + + Default z-index map: + + * Modal dialog + div.able-modal-dialog = 10000 + div.able-modal-overlay = 9500 + + * Items that should always be on top (9000): + #able-vts = 9400 + .able-alert = 9400 + .able-window-toolbar .able-button-handler-preferences = 9300 + .able-popup = 9200 + .able-volume-head = 9175 + .able-volume-slider = 9150 + .able-tooltip = 9000 + + * Pop-ups with critical content: (7000 - 8000): + .able-sign-window = 8000 + .able-transcript-area = 7000 + + * Player controls: (5000 - 6000) + .able-controller .able-seekbar = 6900 + .able-controller .buttonOff = 6800 + .able-controller div[role="button"] > img = 6700 + .able-controller div[role="button"] > span = 6700 + .able-controller div[role="button"] = 6600 + .able-big-play-button = 6500 + div.able-captions-wrapper = 6000 + .able-seekbar-head = 5500 + .able-seekbar-played = 5200 + .able-seekbar-loaded = 5100 + .able = 5000 +/ +.able-wrapper { + position: relative; + margin: 1em 0; + padding: 0; + max-width: 100%; + height: auto; + box-sizing: content-box !important; + text-align: left; +} + +.able-player-transcript .able-window-toolbar input, +.able-wrapper .able input { + margin: 0; + padding: 2px 4px; +} + +.able { + position: relative; + margin: 0; + padding: 0; + width: 100%; / will be changed dynamically as player is constructed / + background-color: #000; + box-shadow: 0px 0px 16px #262626; + z-index: 5000; +} +.able-control-row { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; + margin: 5px 0; +} +.able .able-vidcap-container { + background-color: #000; + left: 0; + margin: 0; + position: relative; + top: 0; +} +.able .able-audcap-container { + background-color: #000; + position: relative; + margin: 0; + padding: 1.5em 0.25em; +} +.able-player { + font-family: Arial, Helvetica, sans-serif; + background-color: #262626; / background color of player (appears on top & bottom) / +} +.able-audio { + padding-top: 1em; +} +/ Screen reader hidden text classes / +.able-transcript .able-hidden, +.able-clipped, .able-screenreader-alert, .able-offscreen { + border: 0; + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; +} +.able-media-container audio { + display: none !important; +} +.able-controller { + position: relative; + border-bottom: 1px solid #4c4c4c; + background-color: #464646; / background color of controller bar / + min-height: 38px; / height of button (20px) + 4px border + 4px padding / + padding: 0; +} +.able-poster { + position: absolute; + top: 0; + left: 0; + width: 100% !important; + height: auto !important; +} +.able .able-vidcap-container { + overflow: visible; +} +.able .able-vidcap-container video { + max-width: 100%; + display: block; / Prevents excess height after element / +} + +/ + YouTube and Vimeo +/ +.able-media-container iframe { + max-width: 100% !important; +} + +/ + Controller Buttons & Controls +/ +.able-wrapper .able button.able-big-play-button { + position: absolute; + color: #fdfdfd; + background-color: transparent; + border: none; + outline: none; + left: 0; + top: 0; + padding: 0; + z-index: 6500; + / + Opacity value chosen to achieve a + contrast ratio of 5.63 in the worst case. + / + opacity: 0.75; + display: flex; + align-items: center; + justify-content: center; + border-radius: 5px; +} + +.able-big-play-button:hover, .able-big-play-button:focus { + opacity: 100; +} + +.able-big-play-button .icon-play, +.able-big-play-button svg { + background-color: #000; + padding: 1rem; + width: 40%; + height: 40%; + min-width: 140px; + min-height: 140px; + border-radius: 5px; +} +.able-big-play-button:hover .icon-play, +.able-big-play-button:hover svg { + outline-style: solid; + outline-width: medium; + outline-color: #8ab839 !important; / green / +} +.able-big-play-button:focus .icon-play, +.able-big-play-button:focus svg { + outline-style: solid; + outline-width: medium; + outline-color: #ffbb37 !important; / yellow / +} +.able-left-controls, .able-right-controls { + overflow: visible; + display: flex; + align-items: center; +} +.able-left-controls div[role="button"], .able-right-controls div[role="button"] { + vertical-align: middle; +} +.able-black-controls, +.able-black-controls button, +.able-black-controls div[role="button"], +.able-black-controls label { + color: #000 !important; +} +.able-black-controls .able-seekbar { + border: 1px solid #000; +} +.able-white-controls, +.able-white-controls button, +.able-white-controls div[role="button"], +.able-black-controls label { + color: #fff !important; +} +.able-white-controls .able-seekbar { + border: 1px solid #fff; +} +.able-controller div[role="button"] { + background: none; + position: relative; + display: inline-block; + border-style: none; + margin: 3px; + padding: 0; + font-size: 20px; + min-width: 24px; + min-height: 24px; + border: none; + overflow: visible !important; + display: flex; + justify-content: center; + align-items: center; + z-index: 6600; +} +.able-controller div[role="button"] > span, +.able-controller div[role="button"] > img { + width: 20px; + margin: 0 auto; + padding: 0; + z-index: 6700; + display: block; +} +.able-controller .buttonOff { + opacity: 0.5; + z-index: 6800; +} +.able-controller .able-seekbar { + margin: 0 5px; + z-index: 6900; +} +.able-controller div[role="button"]:hover, +.able-controller div[role="button"]:focus { + outline-style: solid; + outline-width: medium; +} +.able-controller div[role="button"]:hover { + outline-color: #8ab839 !important; / green / +} +.able-controller div[role="button"]:focus { + outline-color: #ffbb37 !important; / yellow / +} +.able-controller button::-moz-focus-inner, +.able-search-results button::-moz-focus-inner { + border: 0; +} + + +/ + Seekbar +/ +.able-seekbar-wrapper { + display: inline-block; + vertical-align: middle; +} +.able-seekbar { + position: relative; + height: 0.5em; + border: 1px solid; + background-color: #000; + margin: 0 3px; + border-style: solid; + border-width: 2px; + border-color: #fff; +} +.able-seekbar-loaded { + display: inline-block; + position: absolute; + left: 0; + top: 0; + height: 0.5em; + background-color: #464646; + z-index: 5100; +} +.able-seekbar-played { + display: inline-block; + position: absolute; + left: 0; + top: 0; + height: 0.5em; + background-color: #dadada; + z-index: 5200; +} +.able-seekbar-head { + display: inline-block; + position: relative; + left: 0; + top: -0.4em; + background-color: #fdfdfd; + width: 0.8em; + height: 0.8em; + border: 1px solid; + border-radius: 0.8em; + z-index: 5500; +} + +/ + Volume Slider +/ +.able-volume-slider { + height: 120px; + background-color: #464646; / same as .able-controller / + margin: 0; + padding: 8px; + position: absolute; + right: 0px; + bottom: 66px; + display: block; + z-index: 9100; +} +.able-volume-help { / not visible; used in aria-describedby / + display: none; +} + +.able-volume-slider input[type="range"] { + appearance: slider-vertical; + writing-mode: bt-rl; + / -webkit-appearance: none; / / Hides the slider so that custom slider can be made / + width: 28px; + height: 100%; + background: transparent; / Otherwise white in Chrome / +} +/ + Style slider in Firefox +/ +.able-volume-slider input[type=range]::-moz-range-track { + border: 1px solid #fff; + width: 7px; + cursor: pointer; + background: #000; +} +input[type=range]::-moz-range-thumb { + background-color: #fdfdfd; + outline: 1px solid #333; + height: 16px; + width: 24px; + z-index: 9175; +} + +/ + Status Bar +/ +.able-status-bar { + height: 1.5em; + min-height: 1.5em; + color: #ccc; + font-size: 0.9em; + background-color: transparent; + padding: 0.5em 0.5em 0.25em; +} +.able-status-bar span.able-timer { + / contains both span.elapsedTime and span.duration / + text-align: left; + float: left; + width: 32%; +} +.able-status-bar span.able-speed { + float: left; + width: 33%; + text-align: center; +} +.able-status { + font-style: italic; + float: right; + width: 32%; + text-align :right; +} + +/ + Captions and Descriptions +/ + +div.able-captions-wrapper { + width: 100%; + margin: 0; + padding: 0; + text-align: center; + display: block; + z-index: 6000; +} +div.able-captions { + display: none; + padding: 0.15em 0.25em; + line-height: 1.35em; + / settings that are overridden by user prefs / + background-color: #000; + font-size: 1em; + color: #fff; + opacity: 0.75; +} +div.able-vidcap-container div.able-captions-overlay { + position: absolute; + margin: 0; + bottom: 0.5em; +} +div.able-vidcap-container div.able-captions-below { + position: relative; + min-height: 3.2em; +} +div.able-audcap-container.captions-off { + display: none; +} +div.able-descriptions { + position: relative; + color: #ff6; / yellow, to differentiate it from captions / + background-color: #262626; + min-height: 2.8em; + border-top: 1px solid #666; + margin: 0; + padding: 3%; + width: 94%; + text-align: center; +} + +/ + Now Playing +/ +div.able-now-playing { + text-align: center; + font-weight: bold; + font-size: 1.1em; + color: #fff; + background-color: transparent; + padding: 0.5em 0.5em 1em; +} +div.able-now-playing span { + font-size: 0.9em; +} +div.able-now-playing span span { + display: block; +} +div.able-video div.able-now-playing { + display: none; +} + +/ + Modal Dialogs +/ +div.able-modal-dialog { + position: absolute; + height: auto; + max-width: 90%; + margin-left: auto; + margin-right: auto; + top: 5%; + left: 0px; + right: 0px; + outline: 0px none; + display: none; + color: #000; + background-color: #fafafa; + box-sizing: content-box !important; + z-index: 10000; + max-height: 90%; + overflow: auto; +} +@supports (transform: translate(-50%,-50%)) { + div.able-modal-dialog { + top: 50%; + left: 50%; + width: 50rem; + max-width: 100%; + margin-left: 0; + margin-right: 0; + transform: translate(-50%,-50%) !important; + } +} + +div.able-modal-overlay { + position: fixed; + width: 100%; + height: 100%; + background-color: #000; + opacity: 0.5; + margin: 0; + padding: 0; + top: 0; + left: 0; + display: none; + z-index: 9500; +} +button.modalCloseButton { + position: absolute; + top: 5px; + right: 5px; + font-weight: 700; + font-size: 1.2rem; +} +button.modal-button { + margin-right: 5px; +} +div.able-modal-dialog input:hover, +div.able-modal-dialog input:focus, +div.able-modal-dialog button:hover, +div.able-modal-dialog button:focus { + outline-style: solid; + outline-width: 2px; +} +div.able-modal-dialog input:hover, +div.able-modal-dialog button:hover { + outline-color: #8ab839; / green / +} +div.able-modal-dialog input:focus, +div.able-modal-dialog button:focus { + outline-color: #ffbb37; / yellow / +} +div.able-modal-dialog h1 { + font-weight: bold; + font-size: 1.8em; + line-height: 1.2em; + margin: 0.75em 0; + color: #000; + text-align: center; +} +.able-prefs-form, +.able-help-div, +.able-resize-form { + background-color: #f5f5f5; + border: medium solid #ccc; + padding: 0.5em 1em; + margin: 0 0 0 1em; + width: 25em; + display: none; +} + +/ + Preferences Form +/ + +.able-prefs-form div[role="group"] { + margin: 1em 0; + padding: 0; + border: none; +} +.able-prefs-form h2 { + color: #000; + font-weight: bold; + font-size: 1.1em; +} +.able-prefs-form div[role="group"] > div { + display: table; + margin-left: 1em; +} +.able-prefs-form div[role="group"] > div > input { + display: table-cell; + width: 1em; + vertical-align: middle; +} +.able-prefs-form div[role="group"] > div > label { + display: table-cell; + padding-left: 0.5em; +} +.able-desc-pref-prompt { + font-weight: bold; + font-style: italic; + margin-left: 1em !important; +} +.able-prefDescFormat > div { + margin-left: 1.5em; +} +.able-prefs-captions label, +.able-prefs-captions select { + display: block; + float: left; + margin-bottom: 0.25em; +} +.able-prefs-captions label { + width: 6em; + text-align: right; + padding-right: 1em; +} +.able-prefs-captions select { + width: 10em; + font-size: 0.9em; + border-radius: none; +} +.able-prefs-descriptions > div.able-prefs-select { + margin: 0.5em 1em; +} +.able-prefs-descriptions > div.able-prefs-select > label, +.able-prefs-descriptions > div.able-prefs-slider > label { + width: 6em; + text-align: right; + padding-right: 1em; +} +.able-prefs-descriptions > div.able-prefs-select > select, +.able-prefs-descriptions > div.able-prefs-slider > select { + width: 10em; + font-size: 0.9em; + border-radius: none; +} +div.able-prefDescPause { + margin-top: 1em; +} +.able-prefs-form div.able-captions-sample { + padding: 0.5em; + text-align: center; +} +.able-prefs-form div.able-desc-sample { + padding: 0.5em; + text-align: center; + color: #fff; + background-color: #000; +} +.able-prefs-form h2 { + margin-top: 0; + margin-bottom: 0.5em; + font-size: 1.1em; +} +.able-prefs-form ul { + margin-top: 0; +} + +/ + Keyboard Preferences Dialog +/ +able-prefs-form-keyboard ul { + list-style-type: none; +} +span.able-modkey-alt, +span.able-modkey-ctrl, +span.able-modkey-shift { + color: #666; + font-style: italic; +} +span.able-modkey { + font-weight: bold; + color: #000; + font-size: 1.1em; +} + +/ + Resize Window Dialog +/ + +.able-resize-form h1 { + font-size: 1.15em; +} +.able-resize-form div div { + margin: 1em; +} +.able-resize-form label { + padding-right: 0.5em; + font-weight: bold; +} +.able-resize-form input[type="text"] { + font-size: 1em; +} +.able-resize-form input[readonly] { + color: #aaa; +} + +/ + Drag & Drop +/ + +.able-window-toolbar { + background-color: #464646; + min-height: 15px; + padding: 10px; + border-style: solid; + border-width: 0 0 1px 0; + display: flex; + align-items: center; + justify-content: space-between; +} +.able-draggable:hover { + cursor: move; +} +.able-window-toolbar .able-button-handler-preferences { + font-size: 1.5em; + background-color: transparent; + border: none; + outline: none; + padding: 0; + z-index: 9300; +} +.able-window-toolbar .able-button-handler-preferences:hover, +.able-window-toolbar .able-button-handler-preferences:focus { + outline-style: solid; + outline-width: medium; +} +.able-window-toolbar .able-button-handler-preferences:hover { + outline-color: #8ab839 !important; / green / +} +.able-window-toolbar .able-button-handler-preferences:focus { + outline-color: #ffbb37 !important; / yellow / +} +.able-window-toolbar .able-button-handler-preferences img { + display: block; +} +.able-window-toolbar .able-popup { + position: absolute; + cursor: default; + left: 0; + top: 0; + display: block; + border-radius: 0 0 5px 5px; + background: #464646; + opacity: .95; +} +.able-drag { + border: 2px dashed #f90; + cursor: move; +} +.able-resizable { + position: absolute; + width: 20px; + height: 20px; + padding: 3px 3px; + bottom: 0; + right: 0; + cursor: nwse-resize; +} +.able-resizable svg line { + stroke: #595959; + stroke-width: 2px; +} + +/ + Sign Language Window +/ + +.able-sign-window { + position: relative; + margin: 1em; + / max-width: 100%; / + z-index: 8000; +} +.able-sign-window video { + width: 100%; +} +.able-sign-window:focus { + outline: none; +} + + +/ + External chapters div +/ +div.able-chapters-div { + padding: 0; +} +div.able-chapters-div .able-chapters-heading { + margin: 1em 0.75em; + font-size: 1.1em; + font-weight: bold; +} +div.able-chapters-div ul { + list-style-type: none; + padding-left: 0; +} +div.able-chapters-div ul li { + max-width: 100%; + padding: 0; + height: 2em; +} +div.able-chapters-div button { + width: 100%; + height: 100%; + border: none; + background-color: transparent; + color: #000; + font-size: 1em; + text-align: left; + padding: 0.15em 1em; +} +div.able-chapters-div li.able-current-chapter { + background-color: #000 !important; +} +div.able-chapters-div li.able-current-chapter button { + color: #fff !important; +} +div.able-chapters-div li.able-focus { + background-color: #4c4c4c; +} +div.able-chapters-div button:focus, +div.able-chapters-div button:hover, +div.able-chapters-div button::-moz-focus-inner { + border: 0; + outline: none; + color: #fff !important; +} + +div.able-wrapper.fullscreen { + margin: 0 !important; + position: fixed !important; + top: 0 !important; + background: none !important; +} + +/ + Tooltips & Alerts +/ +.able-tooltip, .able-alert { + position: absolute; + padding: 5px 10px; + border-color: #000; + border-width: 1px; + color: #000 !important; + background-color: #ccc; + border-radius: 5px; + display: block; +} +.able-alert { + background-color: #ffc; + box-shadow: 0px 0px 16px #262626; + z-index: 9400; + position: absolute; + top: 1em; +} +.able-popup { + z-index: 9200; +} +.able-tooltip { + z-index: 9000; +} + +/ + Popup Menus +/ +.able-popup { + position: absolute; + margin: 0; + padding: 0; + border-color: #000; + border-width: 1px; + background-color: #000; + opacity: 0.85; + border-radius: 5px; + display: block; + cursor: default; +} +ul.able-popup { + list-style-type: none; +} +.able-popup li { + padding: 0.25em 1em 0.25em 0.25em; + margin: 1px; + width: auto; + color: #fff; +} +.able-popup li.able-focus { + background-color: #ccc; + color: #000; +} +.able-popup-captions li { + padding-left: 1em; +} +.able-popup-captions li[aria-checked="true"] { + padding-left: 0; +} +.able-popup-captions li[aria-checked="true"]::before { + content: "\2713 "; / check mark; for heavier mark us 2714 / +} + +/ + Transcript +/ + +.able-transcript-area { + border-width: 1px; + border-style: solid; + z-index: 7000; + outline: none; + padding-bottom: 25px; / keep content above 16x16px drag icon / + background-color: #fff; +} +.able-transcript { + position: relative; / must be positioned for scrolling / + overflow-y: scroll; + padding-left: 1rem; + padding-right: 1rem; + background-color: #fff; + height: 350px; +} +.able-transcript div { + margin: 1em 0; +} +.able-transcript-heading { + font-size: 1.4em; + font-weight: bold; + margin: 1em 0; + padding: 0; +} +.able-transcript-chapter-heading { + font-size: 1.2em; + font-weight: bold; + margin: 0; + padding: 0; +} +.able-transcript div.able-transcript-desc { + background-color: #fee; + border: thin solid #336; + font-style: italic; + padding: 1em; +} +.able-transcript .able-unspoken { + font-weight: bold; +} +.able-highlight, +.able-highlight span:hover, +.able-highlight span:focus, +.able-highlight span:active { + background-color: #000 !important; + color: #fff !important; + padding: 0.25em 0.10em; + border: none; + outline: none; +} +.able-previous { + background: black !important; + font-style: italic; +} +.able-transcript span:hover, +.able-transcript span:focus, +.able-transcript span:active { + background: #ffc; / light yellow / + color: #000; + border: none; + outline: none; + border-bottom: 1px solid #000; + cursor: pointer; +} +.able-window-toolbar label { + display: inline; + margin-right: 10px; + color: #fff; +} +.able-window-toolbar input:focus, +.able-window-toolbar input:hover, +.able-window-toolbar select:focus, +.able-window-toolbar select:hover, +.able-controller input:focus, +.able-controller input:hover, +.able-controller div[role="button"]:focus, +.able-controller div[role="button"]:hover, +.able-seekbar-head:focus, +.able-seekbar-head:hover { + outline-style: solid; + outline-width: 2px; +} +.able-window-toolbar input:focus, +.able-window-toolbar select:focus, +.able-controller input:focus, +.able-controller div[role="button"]:focus, +.able-seekbar-head:focus { + outline-color: #ffbb37; / yellow / +} +.able-window-toolbar input:hover, +.able-window-toolbar select:hover, +.able-controller input:hover, +.able-controller div[role="button"]:hover, +.able-seekbar-head:hover { + outline-color: #8ab839; / green / +} +.able-window-toolbar .transcript-language-select-wrapper { + float: right; + padding-right: 30px; +} + +/ + Playlist (both audio and video) +/ + +.able-playlist { + list-style-type: none; + margin: 0; + background-color: #fff; + padding: 5px 0; +} +.able-playlist li { + background-color: #ddd; / default background color of each item in playlist / + margin: 5px; + padding: 0; + border: 2px solid #aaa; + border-radius: 5px; + width: auto; + max-width: 100%; +} +.able-playlist li button { + border: none; + color: #000; + background-color: transparent; + font-size: 1em; + width: 100%; + padding: 5px 10px; + text-align: left; +} +.able-playlist li button:hover, +.able-playlist li button:focus, +.able-playlist li button:active { / playlist items when they have mouse or keyboard focus / + background-color: #ffeeb3; + color: #000; + text-decoration: none; + outline: none; +} +.able-playlist li button::-moz-focus-inner { + border: 0; +} +.able-playlist li button img { + width: 100px; + float: left; + margin-right: 10px; + display: block; +} +.able-playlist li.able-current { / currently selected playlist item / + background-color: #340449; + border-color: #230330; +} +.able-playlist li.able-current button { + color: #fff; + font-weight: bold; + text-decoration: none; + outline: none; +} +.able-playlist li.able-current button:hover, +.able-playlist li.able-current button:focus, +.able-playlist li.able-current button:active { + color: #000; +} + +/ Search Styling / +#able-search-term-echo { + font-weight: bold; + font-style: italic; +} +.able-search-results ul li { + font-size: 1.1em; + margin-bottom: 1em; +} +button.able-search-results-time { + font-size: 1em; + font-weight: bold; + cursor: pointer; +} +button.able-search-results-time:hover, +button.able-search-results-time:focus, +button.able-search-results-time:active { + color: #fff; + background-color: #000; +} +.able-search-results-text { + padding-left: 1em; +} +.able-search-term { + background-color: #ffc; + font-weight: bold; +} +#search-term { + font-weight: bold; + font-style: italic; +} + +/ Video Transcript Sorter (VTS) / +#able-vts-instructions { + padding: 1em; + border: 1px solid #999; + width: 100%; + margin: 0 auto 1.5rem; + box-sizing: border-box; +} +#able-vts fieldset { + margin: 0 auto 1.5rem; + border: none; +} +#able-vts fieldset legend { + color: #000; + font-weight: bold; +} +#able-vts fieldset div { + float: left; + display: flex; + gap: .5rem; + align-items: center; + padding-right: 1em; +} + +#able-vts thead tr { + background: #f0f0f0; +} + +#able-vts table, +#able-vts table th, +#able-vts table td { + border: 1px solid #323232; + border-collapse: collapse; + padding: 8px; + color: #323232; +} +#able-vts table td[contenteditable="true"]:hover { + background: #fff; + color: #333; +} +#able-vts table td[contenteditable="true"]:focus-within { + background: #fff; + color: #000; +} +#able-vts table td button { + width: auto; + padding: 2px; + margin: 1px; + display: flex; + align-items: center; + float: left; + color: #323232; + background: #f6f6f6; + border-radius: 2px; +} +#able-vts table td button svg { + width: 22px; + height: 22px; +} +#able-vts table button:hover svg { + fill: #c00; +} +tr.kind-chapters, +tr.kind-subtitles { + background-color: #fff; +} +tr.kind-descriptions { + background-color: #fee; +} +tr.kind-chapters { + background-color: #e6ffe6; +} +.able-vts-dragging { + background-color: #ffc; +} +div#able-vts-icon-credit { + margin: 1em; +} +div#able-vts-alert { + display: none; + position: fixed; + top: 5px; + left: 5px; + border: 2px solid #666; + background-color: #ffc; + padding: 1em; + font-weight: bold; + z-index: 9400; +} +button#able-vts-save { + font-size: 1em; + padding: 6px 12px; + border-radius: 4px; + margin-bottom: 1em; + font-weight: bold; +} +button#able-vts-save:hover, +button#able-vts-save:focus { + color: #fff; + background-color: #060; +} +.able-vts-output-instructions { + width: 720px; + max-width: 90%; +} +#able-vts textarea { + height: 200px; + width: 720px; + max-width: 90%; +} + +/ Misc / +.able-error { + display: block; + background: #ffc; + border: 2px solid #000; + color: #f00; + margin: 0.75em; + padding: 0.5em; +} +.able-fallback { + display: block; + text-align: center; + border: 2px solid #333355; + background-color: #eee; + color: #000; + font-weight: bold; + font-size: 1.1em; + padding: 1em; + margin-bottom: 1em; + max-width: 500px; + width: 95%; +} +.able-fallback div, +.able-fallback ul, +.able-fallback p { + text-align: left; +} +.able-fallback li { + font-weight: normal; +} +.able-fallback img { + width: 90%; + margin: 1em auto; + opacity: 0.3; +} +.able-fallback img.able-poster { + position: relative; +} + +/ + SVG Icons +/ +.able-wrapper div[role="button"] svg, +.able-modal-dialog div[role="button"] svg, +.able-wrapper button svg, +.able-modal-dialog button svg { + display: block; + width: 1em; + height: 1em; + fill: currentColor; +} + +/ + Styles for 2020 Skin +/ +div.able-skin-2020 div.able-seekbar-wrapper { + width: 99%; + margin: 10px 3px; +} + +/ + icomoon.io font styling +/ +@font-face { + font-family: 'able'; + src: url('../button-icons/fonts/able.eot?dqripi'); + src: url('../button-icons/fonts/able.eot?dqripi#iefix') format('embedded-opentype'), + url('../button-icons/fonts/able.ttf?dqripi') format('truetype'), + url('../button-icons/fonts/able.woff?dqripi') format('woff'), + url('../button-icons/fonts/able.svg?dqripi#able') format('svg'); + font-weight: normal; + font-style: normal; +} + +.able-wrapper [class^="icon-"], .able-wrapper [class=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts / + font-family: 'able' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + / Better Font Rendering =========== / + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-play:before { + content: "\f04b" / ""; +} +.icon-pause:before { + content: "\f04c" / ""; +} +.icon-restart:before { + content: "\e900" / ""; +} +.icon-rewind:before { + content: "\e603" / ""; +} +.icon-forward:before { + content: "\e604" / ""; +} +.icon-previous:before { + content: "\e901" / ""; +} +.icon-next:before { + content: "\e902" / ""; +} +.icon-slower:before { + content: "\f0dd" / ""; +} +.icon-faster:before { + content: "\f0de" / ""; +} +.icon-turtle:before { + content: "\e904" / ""; +} +.icon-rabbit:before { + content: "\e905" / ""; +} +.icon-ellipsis:before { + content: "\e903" / ""; +} +.icon-pipe:before { + content: "\e600" / ""; +} +.icon-captions:before { + content: "\e601" / ""; +} +.icon-descriptions:before { + content: "\e602" / ""; +} +.icon-sign:before { + content: "\e60a" / ""; +} +.icon-volume-mute:before { + content: "\e606" / ""; +} +.icon-volume-soft:before { + content: "\e60c" / ""; +} +.icon-volume-medium:before { + content: "\e605" / ""; +} +.icon-volume-loud:before { + content: "\e60b" / ""; +} +.icon-chapters:before { + content: "\e609" / ""; +} +.icon-transcript:before { + content: "\f15c" / ""; +} +.icon-preferences:before { + content: "\e60d" / ""; +} +.icon-close:before { + content: "\f00d" / ""; +} +.icon-fullscreen-expand:before { + content: "\f065" / ""; +} +.icon-fullscreen-collapse:before { + content: "\f066" / ""; +} +.icon-help:before { + content: "\f128" / ""; +} diff --git a/src/styles/ableplayer.css b/src/styles/ableplayer.css index 2c93dc2..792f565 100644 --- a/src/styles/ableplayer.css +++ b/src/styles/ableplayer.css @@ -1,1410 +1,1465 @@ -/ - Able Player core styles - - Default z-index map: - - * Modal dialog - div.able-modal-dialog = 10000 - div.able-modal-overlay = 9500 - - * Items that should always be on top (9000): - #able-vts = 9400 - .able-alert = 9400 - .able-window-toolbar .able-button-handler-preferences = 9300 - .able-popup = 9200 - .able-volume-head = 9175 - .able-volume-slider = 9150 - .able-tooltip = 9000 - - * Pop-ups with critical content: (7000 - 8000): - .able-sign-window = 8000 - .able-transcript-area = 7000 - - * Player controls: (5000 - 6000) - .able-controller .able-seekbar = 6900 - .able-controller .buttonOff = 6800 - .able-controller div[role="button"] > img = 6700 - .able-controller div[role="button"] > span = 6700 - .able-controller div[role="button"] = 6600 - .able-big-play-button = 6500 - div.able-captions-wrapper = 6000 - .able-seekbar-head = 5500 - .able-seekbar-played = 5200 - .able-seekbar-loaded = 5100 - .able = 5000 -/ +/* + * Able Player core styles + * + * Default z-index map: + * + * Modal dialog + * div.able-modal-dialog = 10000 + * div.able-modal-overlay = 9500 + * + * Items that should always be on top (9000): + * #able-vts = 9400 + * .able-alert = 9400 + * .able-window-toolbar .able-button-handler-preferences = 9300 + * .able-popup = 9200 + * .able-volume-head = 9175 + * .able-volume-slider = 9150 + * .able-tooltip = 9500 + * + * Pop-ups with critical content: (7000 - 8000): + * .able-sign-window = 8000 + * .able-transcript-area = 7000 + * + * Player controls: (5000 - 6000) + * .able-controller div[role="button"] = 6600 + * .able-big-play-button = 6500 + * .able-seekbar = 6500 + * div.able-captions-wrapper = 6000 + * .able-seekbar-head = 5500 + * .able-seekbar-played = 5200 + * .able-seekbar-loaded = 5100 + * .able = 5000 +*/ + +:root { + --able-white: #fff; + --able-black: #000; + --able-transparent-gray: #00000077; + --able-medium-light-gray: #a8a8a8; + --able-light-gray: #dadada; + --able-very-light-gray: #eee; + --able-off-white: #fdfdfd; + --able-dark-gray: #262626; + --able-medium-dark-gray: #333; + --able-medium-dark-gray2: #464646; + --able-medium-gray: #666; + --able-bright-yellow: #ff6; + --able-light-yellow: #ffc; + --able-bright-orange: #f90; + --able-light-orange: #ffbb37; + --able-bright-green: #8ab839; + --able-light-pink: #fee; +} + +.able-modal-overlay, +.able-playlist, +.able-search-results, +.able-chapters-div, +.able-modal-dialog, +.able-transcript-area, +.able-wrapper { + --able-base-control-size: 24px; + --able-color: var(--able-white); + --able-control-background: var(--able-black); + --able-control-color: var(--able-white); + --able-big-play-background: var(--able-transparent-gray); + --able-alert-button-color: var(--able-black); + --able-seekbar-border: var(--able-medium-light-gray); + --able-seekbar-background: var(--able-black); + --able-seekbar-loaded: var(--able-medium-gray); + --able-seekbar-played: var(--able-light-gray); + --able-seekbar-head: var(--able-off-white); + --able-control-label-color: var(--able-white); + --able-controller-background: var(--able-medium-dark-gray2); + --able-separator-color: var(--able-medium-light-gray); + --able-volume-background: var(--able-black); + --able-volume-outline: var(--able-medium-gray); + --able-statusbar-color: var(--able-light-gray); + --able-statusbar-background: var(--able-black); + --able-default-caption-color: var(--able-white); + --able-default-caption-background: var(--able-black); + --able-default-description-color: var(--able-bright-yellow); + --able-default-description-background: var(--able-dark-gray); + --able-description-border: var(--able-medium-gray); + --able-now-playing-color: var(--able-white); + --able-now-playing-background: var(--able-black); + --able-modal-color: var(--able-black); + --able-modal-background: var(--able-off-white); + --able-modal-overlay: var(--able-transparent-gray); + --able-modal-border: 3px solid var(--able-light-gray); + --able-drag-outline: var(--able-bright-orange); + --able-sign-background: var(--able-white); + --able-sign-border: var(--able-black); + --able-resizable-color: var(--able-medium-gray); + --able-chapter-background: transparent; + --able-chapter-color: var(--able-black); + --able-current-chapter-background: var(--able-black); + --able-current-chapter-color: var(--able-white); + --able-focus-outline: var(--able-light-orange); + --able-hover-outline: var(--able-bright-green); + --able-tooltip-border: var(--able-dark-gray); + --able-tooltip-color: var(--able-medium-dark-gray); + --able-tooltip-background: var(--able-very-light-gray); + --able-alert-background: var(--able-light-yellow); + --able-menu-border: var(--able-dark-gray); + --able-menu-background: var(--able-black); + --able-menu-outline: var(--able-medium-gray); + --able-menu-color: var(--able-white); + --able-menu-focus-background: var(--able-very-light-gray); + --able-menu-focus-color: var(--able-black); + --able-transcript-background: var(--able-white); + --able-cue-audio-description-background: var(--able-light-pink); + --able-cue-audio-description-color: var(--able-dark-gray); + --able-cue-highlighted-background: var(--able-black); + --able-cue-highlighted-color: var(--able-white); + --able-cue-interacting-background: var(--able-light-yellow); + --able-cue-interacting-color: var(--able-black); + --able-playlist-item-background: var(--able-off-white); + --able-playlist-item-color: var(--able-black); + --able-playlist-item-button-color: var(--able-black); + --able-search-results-button-background: var(--able-white); + --able-search-results-button-color: var(--able-black); + --able-playlist-current-background: var(--able-white); + --able-playlist-current-border: var(--able-dark-gray); + --able-playlist-current-outline: var(--able-medium-dark-gray); + --able-playlist-current-active-color: var(--able-black); + --able-playlist-current-active-background: var(--able-white); + --able-search-term-background: var(--able-light-yellow); + --able-search-term-color: var(--able-black); +} + +.able-black-controls { + --able-control-background: #fff !important; + --able-control-color: #000 !important; +} + +.able-playlist, +.able-search-results, +.able-chapters-div, +.able-modal-dialog, +.able-transcript-area, .able-wrapper { - position: relative; - margin: 0; - padding: 0; - width: 100%; - height: auto; - box-sizing: content-box !important; - text-align: left; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } + +.able-playlist, .able-playlist , +.able-chapters-div, .able-chapters-div , +.able-wrapper, .able-wrapper { + box-sizing: border-box; +} + +.able-wrapper { + position: relative; + margin: 0 auto; + padding: 0; + max-width: 100%; + height: auto; + text-align: start; +} + .able { - position: relative; - margin: 1em 0; - width: 100%; /* will be changed dynamically as player is contructed / - background-color: #000; - box-shadow: 0px 0px 16px #262626; - z-index: 5000; + position: relative; + margin: 0; + padding: 0; + width: 100%; / will be changed dynamically as player is constructed / + z-index: 5000; + display: grid; } -.able-column-left { - float: left; + +.able-player-transcript .able-window-toolbar input, +.able-wrapper .able input { + margin: 0; + padding: 2px 4px; } -.able-column-right { - float: left; + +.able-control-row { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; + padding: 8px 9px 8px; + gap: 4px; } + +.able-pipe { + position: relative; + top: -2px; + color: var(--able-separator-color); + margin: 0 6px; +} + .able .able-vidcap-container { - background-color: black; - / height: 360px; / - left: 0; - margin: 0; - position: relative; - top: 0; -} -.able-player { - font-family: Arial, Helvetica, sans-serif; - background-color: #262626; / background color of player (appears on top & bottom) / -} -.able-offscreen { - position: absolute; - left: -10000px; - top: auto; - width: 1px; + left: 0; + margin: 0; + position: relative; + top: 0; +} + +.able .able-audcap-container { + position: relative; + margin: 0; + padding: .5rem; + min-height: 3.2rem; +} + +/ Screen reader hidden text classes / +.able-transcript .able-hidden, +.able-screenreader-alert, .able-offscreen { + border: 0; + clip-path: inset(50%); height: 1px; + margin: -1px; overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; } + .able-media-container audio { - display: none !important; -} -.able-video { -} -.able-video .able-now-playing { - display: none; / not currently used for video / + display: none !important; } + .able-controller { position: relative; - border-bottom: 1px solid #4c4c4c; - background-color: #464646; / background color of controller bar / - min-height: 38px; / height of button (20px) + 4px border + 4px padding / + background-color: var(--able-controller-background); / background color of controller bar / + padding: 0 4px; +} + +.able-audio .able-controller { + padding-top: 8px; +} + +.able-skin-legacy .able-controller { padding: 0; } + .able-poster { - position: absolute; - top: 0; - left: 0; - width: 100% !important; - height: auto !important; + position: absolute; + top: 0; + left: 0; + width: 100% !important; + height: auto !important; } + .able .able-vidcap-container { - overflow: hidden; -} - -/ - Controller Buttons & Controls -/ -.able-big-play-button { - position: absolute; - font-size: 8em; - opacity: 0.5; - filter:alpha(opacity=50); / for IE / - color: #fdfdfd; - background-color: transparent; - border: none; - outline: none; - left: 0; - top: 0; - padding: 0; - z-index: 6500; -} -.able-big-play-button:hover { - opacity: 100; - filter:alpha(opacity=100); / for IE / + overflow: visible; } -.able-left-controls, .able-right-controls { - overflow: visible; + +.able .able-vidcap-container video { + max-width: 100%; + width: 100%; + display: block; / Prevents excess height after element / } -.able-left-controls div[role="button"], .able-right-controls div[role="button"] { - vertical-align: middle; + +/ YouTube and Vimeo / +.able-sign-window iframe, +.able-media-container iframe { + max-width: 100% !important; + display: block !important; } -.able-left-controls { - float: left; + +/ Controller Buttons & Controls / +.able-wrapper .able button.able-big-play-button { + position: absolute; + color: var(--able-control-color); + background-color: var(--able-big-play-background); + background: var(--able-big-play-background); + border: none; + outline: none; + left: 0; + top: 0; + padding: 0; + z-index: 6500; + opacity: 0.75; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.able-audio-wrapper { + display: flex; + gap: 4px; + align-items: center; + padding: 4px; + background: var(--able-control-background); } -.able-right-controls { - float: right; + +.able-audio-wrapper img { + max-width: 120px; } -.able-black-controls, -.able-black-controls div[role="button"], -.able-black-controls label { - color: #000 !important; + +.able-audio-wrapper .able-audio { + flex: 1; } -.able-black-controls .able-seekbar { - border: 1px solid #000; + +.able-wrapper .able button.able-big-play-button:hover, +.able-wrapper .able button.able-big-play-button:focus { + opacity: 100; } -.able-white-controls, -.able-white-controls div[role="button"], -.able-black-controls label { - color: #FFF !important; + +.able-big-play-button svg { + background-color: var(--able-control-background); + padding: 1rem; + width: 8rem; + height: 8rem; + max-width: 140px; + max-height: 140px; + border-radius: 8px; } -.able-white-controls .able-seekbar { - border: 1px solid #FFF; + +.able-big-play-button:hover svg, +.able-big-play-button:focus svg { + outline: 3px solid; } -.able-controller div[role="button"] { - background: none; - position: relative; - display: inline-block; - border-style: none; - margin: 3px; - padding: 0; - font-size: 20px; - min-width: 24px; -/ outline: 2px solid #464646; / / same color as .able-controller background-color / - border: none; - overflow: visible !important; - z-index: 6600; -} -.able-controller div[role="button"] > span, -.able-controller div[role="button"] > img { - width: 20px; - margin: 0 auto; - padding: 0; - z-index: 6700; + +.able-left-controls, .able-right-controls { + overflow: visible; + display: flex; + gap: 3px; + align-items: center; + flex-wrap: wrap; } -.able-controller .buttonOff { - opacity: 0.5; - filter:alpha(opacity=50); / for IE / - z-index: 6800; + +.able-skin-legacy .able-left-controls, +.able-skin-legacy .able-right-controls { + width: fit-content; } -.able-controller .able-seekbar { - margin: 0 5px; - z-index: 6900; + +.able-controller, +.able-controller button, +.able-controller div[role="button"]{ + color: var(--able-control-color); } -.able-controller div[role="button"]:hover, -.able-controller div[role="button"]:focus { - outline-style: solid; - outline-width: medium; + +.able-controller .able-alert button { + color: var(--able-alert-button-color) !important; } -.able-controller div[role="button"]:hover { - outline-color: #8AB839 !important; / green / + +.able-controller .able-seekbar { + border: 1px solid var(--able-seekbar-border); } -.able-controller div[role="button"]:focus { - outline-color: #ffbb37 !important; / yellow / + +.able-controller div[role="button"] { + background: none; + position: relative; + padding: 2px; + min-width: var(--able-base-control-size); + min-height: var(--able-base-control-size); + width: 1rem; + height: 1rem; + border: none; + overflow: visible !important; + display: flex; + justify-content: center; + align-items: center; + z-index: 6600; + border-radius: 3px; } -.able-controller button::-moz-focus-inner, -.able-search-results button::-moz-focus-inner { - border: 0; + +.able-controller div.able-button-handler-play[role="button"] { + / The icon appears too large if this button doesn't have padding. / + padding: 4px; } +.able-controller .buttonOff { + opacity: 0.5; +} -/ - Seekbar -/ +/ Seekbar / .able-seekbar-wrapper { - display: inline-block; - vertical-align: middle; + display: block; + width: 100%; + padding: 6px 12px; } + +.able-skin-legacy .able-seekbar-wrapper { + padding: 0; +} + .able-seekbar { - position: relative; - height: 0.5em; - border: 1px solid; - background-color: #000000; - margin: 0 3px; - border-style: solid; - border-width: 2px; - border-color: #ffffff; + display: flex; + align-items: center; + position: relative; + height: 0.5rem; + border: 1px solid; + background-color: var(--able-seekbar-background); + z-index: 6500; } + .able-seekbar-loaded { - display: inline-block; - position: absolute; - left: 0; - top: 0; - height: 0.5em; - background-color: #464646; - z-index: 5100; + display: inline-block; + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: var(--able-seekbar-loaded); + z-index: 5100; } + .able-seekbar-played { - display: inline-block; - position: absolute; - left: 0; - top: 0; - height: 0.5em; - background-color: #DADADA; - z-index: 5200; + display: inline-block; + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: var(--able-seekbar-played); + z-index: 5200; } + .able-seekbar-head { - display: inline-block; - position: relative; - left: 0; - top: -0.45em; - background-color: #FDFDFD; - width: 0.8em; - height: 0.8em; - border: 1px solid; - border-radius: 0.8em; - z-index: 5500; -} - -/ - Volume Slider -/ + display: inline-block; + position: relative; + left: 0; + background-color: var(--able-seekbar-head); + min-width: var(--able-base-control-size); + min-height: var(--able-base-control-size); + width: .875rem; + height: .875rem; + border-radius: 100%; + z-index: 5500; +} + +/ Volume Slider / .able-volume-slider { - width: 34px; - height: 50px; - background-color: #464646; / same as .able-controller / - padding: 10px 0; - position: absolute; - right: 0px; - top: -74px; - display: block; - z-index: 9100; -} -.able-volume-track { - display: block; - position: relative; - height: 100%; / = 50px after padding / - width: 7px; - margin: 0 auto; - background-color: #000; -} -.able-volume-track.able-volume-track-on { - background-color: #dadada; - position: absolute; - height: 20px; / change dynamically; 5px per volume tick / - top: 30px; / change dynamically; 50px - height / -} -.able-volume-slider > .able-volume-track { - / add border only to the outer track / - border: 1px solid #FFF; -} -.able-volume-head { - display: inline-block; - background-color: #fdfdfd; - outline: 1px solid #333; - position: absolute; - height: 7px; - width: 15px; - left: -5px; - top: 23px; / change dynamically; .able-volume-track-on top - 7 / - z-index: 9175; -} -.able-volume-head:hover, -.able-volume-head:focus { - background-color: #ffbb37 !important; / yellow / + height: 120px; + background-color: var(--able-volume-background); + outline: 1px solid var(--able-volume-outline); + margin: 0; + padding: 8px; + position: absolute; + right: 0px; + display: block; + z-index: 9100; } + .able-volume-help { / not visible; used in aria-describedby / - display: none; -} - -/ -input[type=range]:focus { - outline: none; -} -input[type=range]::-webkit-slider-runnable-track { - width: 100%; - height: 8.4px; - cursor: pointer; - animate: 0.2s; - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - background: #3071a9; - border-radius: 1.3px; - border: 0.2px solid #010101; -} -input[type=range]::-webkit-slider-thumb { - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - border: 1px solid #000000; - height: 36px; - width: 16px; - border-radius: 3px; - background: #ffffff; - cursor: pointer; - -webkit-appearance: none; - margin-top: -14px; -} -input[type=range]:focus::-webkit-slider-runnable-track { - background: #367ebd; -} -input[type=range]::-moz-range-track { - width: 100%; - height: 8.4px; - cursor: pointer; - animate: 0.2s; - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - background: #3071a9; - border-radius: 1.3px; - border: 0.2px solid #010101; + display: none; +} + +.able-volume-slider input[type="range"] { + appearance: slider-vertical; + writing-mode: bt-rl; + width: 28px; + height: 100%; + background: transparent; /* Otherwise white in Chrome / +} + +/ Style slider in Firefox / +.able-volume-slider input[type=range]::-moz-range-track { + border: 1px solid #fff; + width: 7px; + cursor: pointer; + background: #000; } + input[type=range]::-moz-range-thumb { - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - border: 1px solid #000000; - height: 36px; - width: 16px; - border-radius: 3px; - background: #ffffff; - cursor: pointer; -} -input[type=range]::-ms-track { - width: 100%; - height: 8.4px; - cursor: pointer; - animate: 0.2s; - background: transparent; - border-color: transparent; - border-width: 16px 0; - color: transparent; -} -input[type=range]::-ms-fill-lower { - background: #2a6495; - border: 0.2px solid #010101; - border-radius: 2.6px; - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; -} -input[type=range]::-ms-fill-upper { - background: #3071a9; - border: 0.2px solid #010101; - border-radius: 2.6px; - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; -} -input[type=range]::-ms-thumb { - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - border: 1px solid #000000; - height: 36px; - width: 16px; - border-radius: 3px; - background: #ffffff; - cursor: pointer; -} -input[type=range]:focus::-ms-fill-lower { - background: #3071a9; -} -input[type=range]:focus::-ms-fill-upper { - background: #367ebd; -} -/ - -/* - Status Bar -/ + background-color: var(--able-control-color); + outline: 1px solid var(--able-volume-outline); + outline-offset: -2px; + height: var(--able-base-control-size); + width: var(--able-base-control-size); + border-radius: 100%; +} +/ Status Bar / .able-status-bar { - height: 1.5em; - min-height: 1.5em; - color: #CCC; - font-size: 0.9em; - background-color: transparent; - padding: 0.5em 0.5em 0.25em; + color: var(--able-statusbar-color); + font-size: 0.875rem; + padding: 8px 12px; + gap: 12px; + display: flex; + align-items: center; + justify-content: space-between; + background: var(--able-statusbar-background); } + .able-status-bar span.able-timer { - / contains both span.elapsedTime and span.duration / - text-align: left; - float: left; - width: 32%; + text-align: start; } + .able-status-bar span.able-speed { - float: left; - width: 33%; - text-align: center; + text-align: center; } + .able-status { font-style: italic; - float: right; - width: 32%; - text-align :right; + text-align: end; } -/ - Captions and Descriptions -/ - +/ Captions and Descriptions / div.able-captions-wrapper { - width: 100%; - margin: 0; - padding: 0; - text-align: center; - line-height: 1.35em; - display: block; - z-index: 6000; + width: 100%; + margin: 0; + padding: 0; + text-align: center; + display: block; + z-index: 6000; +} + +div.able-captions-wrapper:not(.able-captions-overlay) { + padding: 0; } + div.able-captions { - display: none; - padding: 0.15em 0.25em; - / settings that are overridden by user prefs / - background-color: black; - font-size: 1.1em; - color: white; - opacity: 0.75; -} -div.able-captions-overlay { - position: absolute; - margin: 0; - bottom: 0; -} -div.able-captions-below { - position: relative; - min-height: 3.2em; + display: none; + padding: 4px 6px; + line-height: 1.4; + / settings that are overridden by user prefs / + background-color: var(--able-default-caption-background); + font-size: 1rem; + color: var(--able-default-caption-color); + opacity: 0.75; } -div.able-descriptions { - position: relative; - color: #FF6; / yellow, to differentiate it from captions / - background-color: #262626; - min-height: 2.8em; - border-top: 1px solid #666; - margin: 0; - padding: 3%; - width: 94%; - text-align: center; + +div.able-vidcap-container div.able-captions-overlay { + position: absolute; + margin: 0; + bottom: 12px; } -/ - Now Playing -/ +div.able-vidcap-container div.able-captions-below { + position: relative; + min-height: 4rem; + display: flex; + justify-content: center; + align-items: center; +} +div.able-audcap-container.captions-off { + display: none; +} + +div.able-descriptions { + position: relative; + color: var(--able-default-description-color); / yellow, to differentiate it from captions / + background-color: var(--able-default-description-background); + min-height: 4rem; + border-top: 1px solid var(--able-description-border); + margin: 0; + padding: 12px; + text-align: center; +} + +/ Now Playing / div.able-now-playing { text-align: center; font-weight: bold; - font-size: 1.1em; - color: #FFFFFF; - background-color: transparent; - padding: 0.5em 0.5em 1em; + font-size: 1rem; + padding: 0.5rem 0.5rem 1rem; + color: var(--able-now-playing-color); + background: var(--able-now-playing-background); } + div.able-now-playing span { - font-size: 0.9em; + font-size: 0.875rem; } -div.able-now-playing span span { - display: block; + +div.able-video div.able-now-playing { + display: none; } -/ - Modal Dialogs -/ +/ Modal Dialogs / div.able-modal-dialog { - position: absolute; - height: auto; - max-width: 90%; - margin-left: auto; - margin-right: auto; - top: 5%; - left: 0px; - right: 0px; - outline: 0px none; - display: none; - color: #000; - background-color: #FAFAFA; - box-sizing: content-box !important; - z-index: 10000; -} -@supports (transform: translate(-50%,-50%)) { + position: fixed; + display: none; + z-index: 10000; + max-height: 90%; + overflow: auto; + transform: translate(-50%,-50%) !important; + top: 50%; + left: 50%; + outline: 0px none; + color: var(--able-modal-color); + background-color: var(--able-modal-background); + border: var(--able-modal-border); + width: fit-content; + max-width: 95%; + padding: 1rem; + box-sizing: border-box; +} + +@media screen and ( width < 800px ) { div.able-modal-dialog { - top: 50%; - left: 50%; - transform: translate(-50%,-50%) !important; + min-width: 95%; } } -div.able-modal-overlay { - position: fixed; - width: 100%; - height: 100%; - background-color: #000; - opacity: 0.5; - margin: 0; - padding: 0; - top: 0; - left: 0; - display: none; - z-index: 9500; -} -button.modalCloseButton { - position: absolute; - top: 5px; - right: 5px; -} -button.modal-button { - margin-right: 5px; +body.able-modal-active { + overflow: hidden; } -div.able-modal-dialog input:hover, -div.able-modal-dialog input:focus, -div.able-modal-dialog button:hover, -div.able-modal-dialog button:focus { - outline-style: solid; - outline-width: 2px; + +div.able-modal-overlay { + position: fixed; + width: 100%; + height: 100%; + background-color: var(--able-modal-overlay); + margin: 0; + padding: 0; + top: 0; + left: 0; + display: none; + z-index: 9500; } -div.able-modal-dialog input:hover, -div.able-modal-dialog button:hover { - outline-color: #8AB839; / green / + +.able-alert button, +.able-modal-dialog button { + all: unset; + padding: 4px 12px; + font-size: 1.125rem; + border: 2px solid; } -div.able-modal-dialog input:focus, -div.able-modal-dialog button:focus { - outline-color: #ffbb37; / yellow / + +.able-prefs-buttons { + display: flex; + gap: 8px; + margin-top: 1rem; } -div.able-modal-dialog h1 { - font-weight: bold; - font-size: 1.8em; - line-height: 1.2em; - margin: 0.75em 0; - color: #000; - text-align: center; -} -.able-prefs-form, -.able-help-div, -.able-resize-form { - background-color: #F5F5F5; - border: medium solid #ccc; - padding: 0.5em 1em; - margin: 0 0 0 1em; - width: 25em; + +.able-modkey-item.hidden { display: none; } -/ - Preferences Form -/ +.able-modal-header { + display: flex; + justify-content: space-between; + gap: 8px; +} + +.able-modal-dialog .modalCloseButton { + margin: 0; + align-self: flex-start; +} -.able-prefs-form fieldset { - margin-left: 0; - padding-left: 0; +div.able-modal-dialog h1 { + font-size: 1.5rem; + line-height: 1.6; + margin: 0 0 .5rem; + order: -1; +} + +/ Preferences Form / +.able-prefs-form div[role="group"] { + padding: 1rem 0; border: none; } -.able-prefs-form legend { - color: black; + +.able-prefs-form h2 { font-weight: bold; - font-size: 1.1em; + font-size: 1.1rem; } -.able-prefs-form fieldset div { - display: table; - margin-left: 1em; -} -.able-prefs-form fieldset div input { - display: table-cell; - width: 1em; - vertical-align: middle; + +.able-desc-pref-prompt { + font-weight: bold; + font-style: italic; + margin-left: 1rem !important; } -.able-prefs-form fieldset div label { - display: table-cell; - padding-left: 0.5em; + +.able-prefDescFormat > div { + margin-left: 1.5rem; } -fieldset.able-prefs-keys div { - float: left; - margin-right: 1em; + +.able-prefs-descriptions > div, +.able-prefs-captions > div { + display: flex; + flex-wrap: wrap; + gap: .5rem; + margin-bottom: .25rem; } -div.able-desc-pref-prompt { - font-weight: bold; - font-style: italic; - margin-left: 1em !important; + +.able-prefs-descriptions label, +.able-prefs-captions label { + text-align: end; + width: 10rem; } -div.able-prefDescFormat > div { - margin-left: 1.5em; + +.able-prefs-checkbox label { + width: auto; } -.able-prefs-captions label, + +.able-prefs-descriptions select, .able-prefs-captions select { - display: block; - float: left; - margin-bottom: 0.25em; -} -fieldset.able-prefs-captions label { - width: 6em; - text-align: right; - padding-right: 1em; -} -fieldset.able-prefs-captions select { - width: 10em; - font-size: 0.9em; - border-radius: none; -} -fieldset.able-prefs-descriptions > div.able-prefs-select { - margin: 0.5em 1em; -} -fieldset.able-prefs-descriptions > div.able-prefs-select > label, -fieldset.able-prefs-descriptions > div.able-prefs-slider > label { - width: 6em; - text-align: right; - padding-right: 1em; -} -fieldset.able-prefs-descriptions > div.able-prefs-select > select, -fieldset.able-prefs-descriptions > div.able-prefs-slider > select { - width: 10em; - font-size: 0.9em; - border-radius: none; + width: 10rem; } + div.able-prefDescPause { - margin-top: 1em; + margin-top: 1rem; } + .able-prefs-form div.able-captions-sample { - padding: 0.5em; - text-align: center; + padding: 0.5rem; + text-align: center; } + .able-prefs-form div.able-desc-sample { - padding: 0.5em; - text-align: center; - color: #FFF; - background-color: #000; + padding: 0.5rem; + text-align: center; + color: #fff; + background-color: #000; } + .able-prefs-form h2 { - margin-top: 0; - margin-bottom: 0.5em; - font-size: 1.1em; + margin-top: 0; + margin-bottom: 0.5rem; + font-size: 1.1rem; } + .able-prefs-form ul { - margin-top: 0; + margin-top: 0; } -/ - Keyboard Preferences Dialog -/ +/ Keyboard Preferences Dialog / able-prefs-form-keyboard ul { list-style-type: none; } + span.able-modkey-alt, span.able-modkey-ctrl, span.able-modkey-shift { - color: #666; - font-style: italic; + color: #666; + font-style: italic; } + span.able-modkey { - font-weight: bold; - color: #000; - font-size: 1.1em; + font-weight: bold; + color: #000; + font-size: 1.1rem; } -/ - Resize Window Dialog -/ - +/ Resize Window Dialog / .able-resize-form h1 { - font-size: 1.15em; + font-size: 1.15rem; } + .able-resize-form div div { - margin: 1em; + margin: 1rem 0; } + .able-resize-form label { - padding-right: 0.5em; - font-weight: bold; + display: block; } -.able-resize-form input[type="text"] { - font-size: 1em; + +.able-resize-form input { + font-size: 1.25rem; + padding: 4px; } + .able-resize-form input[readonly] { - color: #AAA; + color: var(--able-separator-color); } -/ - Drag & Drop -/ - +/ Drag & Drop / .able-window-toolbar { - background-color: #464646; - min-height: 15px; - padding: 10px; - border-style: solid; - border-width: 0 0 1px 0; + background-color: var(--able-controller-background); + color: var(--able-control-color); + padding: 8px; + border: none; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; } -.able-draggable:hover { - cursor: move; + +.able-window-toolbar button { + order: 1; } -.able-window-toolbar .able-button-handler-preferences { - position: absolute; - top: 0; - right: 0; - font-size: 1.5em; - background-color: transparent; - border: none; - outline: none; - padding: 0; - z-index: 9300; + +.able-window-toolbar .autoscroll-transcript { + order: 3; + width: fit-content; + text-wrap: nowrap; } -.able-window-toolbar .able-button-handler-preferences:hover, -.able-window-toolbar .able-button-handler-preferences:focus { - outline-style: solid; - outline-width: medium; + +.able-window-toolbar .transcript-language-select-wrapper { + order: 4; } -.able-window-toolbar .able-button-handler-preferences:hover { - outline-color: #8AB839 !important; / green / + +.able-window-toolbar .able-drag-handle { + order: 2; + width: 100%; + height: 100%; +} + +.able-window-toolbar .able-drag-handle svg { + height: 12px; + width: auto; + margin: 0 auto; +} + +.able-window-toolbar .able-drag-handle path { + fill: var(--able-medium-light-gray); +} + +.able-draggable:hover .able-drag-handle path { + fill: var(--able-very-light-gray); } -.able-window-toolbar .able-button-handler-preferences:focus { - outline-color: #ffbb37 !important; / yellow / + +.able-window-toolbar > div { + display: flex; +} + +.able-window-toolbar button { + color: var(--able-control-color); +} + +.able-window-toolbar .able-button-handler-preferences svg { + min-width: var(--able-base-control-size); + min-height: var(--able-base-control-size); + height: 1rem; + width: 1rem; +} + +.able-draggable .able-drag-handle:hover { + cursor: move; } + +.able-window-toolbar .able-button-handler-preferences { + background-color: transparent; + border: none; + outline: none; + padding: 0; + z-index: 9300; +} + +.able-window-toolbar .able-button-handler-preferences img { + display: block; +} + .able-window-toolbar .able-popup { - position: absolute; - cursor: default; - right: 0; - top: 0; - display: block; + position: absolute; + cursor: default; + left: 0; + top: 0; + display: block; + border-radius: 0 0 5px 5px; + background: var(--able-controller-background); } + .able-drag { - border: 2px dashed #F90; - cursor: move; + outline: 3px dashed var(--able-drag-outline); + outline-offset: 2px; + cursor: move; } + .able-resizable { - position: absolute; - width: 16px; - height: 16px; - padding: 5px 2px; - bottom: 0; - right: 0; - cursor: nwse-resize; - background: transparent url('../images/wingrip.png') no-repeat; + position: absolute; + width: 24px; + height: 24px; + bottom: 0; + right: 0; + padding: 1px; + cursor: nwse-resize; } -/ - Sign Language Window -/ +.able-resizable svg line { + stroke: var(--able-resizable-color); + stroke-width: 2px; +} +/ Sign Language Window / .able-sign-window { - position: relative; - margin: 1em; - / max-width: 100%; / - z-index: 8000; + position: relative; + z-index: 8000; + background: var(--able-sign-background); + border: 1px solid var(--able-sign-border); +} + +.fade-out { + visibility: hidden; + opacity: 0; + transition: visibility 0s 2s, opacity 2s linear; +} + +.fade-in { + visibility: visible; + opacity: 1; + transition: opacity 1s linear; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } } + .able-sign-window video { - width: 100%; + width: 100%; + display: block; } -.able-sign-window:focus { - outline: none; + +.able-sign-window .able-resizable { + background: #00000033; + background: linear-gradient(to bottom right, transparent 0%, transparent 51%, #fff3 51%, #fff3 100%); + border-top-left-radius: 20px; } +.able-sign-window:hover .able-resizable { + background: var(--able-very-light-gray); + background: linear-gradient(to bottom right, transparent 0%, transparent 51%, #fffe 51%, #fffe 100%); -/ - External chapters div -/ +} + +.able-sign-window.able-fixed video { + margin: 0; + display: block; +} + +.able-sign-window:focus { + outline: none; +} + +/ External chapters div / div.able-chapters-div { - padding: 0; + padding: 0; + max-width: 100%; } + div.able-chapters-div .able-chapters-heading { - margin: 1em 0.75em; - font-size: 1.1em; - font-weight: bold; -} -div.able-chapters-div ul { - list-style-type: none; - padding-left: 0; + margin: 8px; + font-size: 1.125rem; + font-weight: bold; } + +div.able-chapters-div ul, div.able-chapters-div ul li { - max-width: 100%; - padding: 0; - height: 2em; + list-style-type: none; + padding: 0; + margin: 0; } + div.able-chapters-div button { - width: 100%; - height: 100%; - border: none; - background-color: transparent; - color: #000; - font-size: 1em; - text-align: left; - padding: 0.15em 1em; -} -div.able-chapters-div li.able-current-chapter { - background-color: #000 !important; + all: unset; + width: 100%; + height: 100%; + border: none; + background-color: var(--able-chapter-background); + color: var(--able-chapter-color); + font-size: 1rem; + text-align: start; + padding: 8px; + box-sizing: border-box; } + div.able-chapters-div li.able-current-chapter button { - color: #FFF !important; -} -div.able-chapters-div li.able-focus { - background-color: #4C4C4C; -} -div.able-chapters-div button:focus, -div.able-chapters-div button:hover, -div.able-chapters-div button::-moz-focus-inner { - border: 0; - outline: none; - color: #FFF !important; -} - -/ - Fullscreen settings - In v2.2.4b commented out :-webkit-full-screen style - This was causing the toolbar in fullscreen mode to be positioned slightly offscreen in webkit browsers - Safari had an additional problem in window height was being calculated (see event.js > onWindowResize()) - Commenting out this style appears have no adverse effect in any browser - All other fullscreen styles were already commented out, and left here solely for reference -/ -/ -:-webkit-full-screen { - position: fixed; - width: 100%; - height: 100%; - top: 0; - background: none; -} -:-moz-full-screen { - position: fixed; - width: 100%; - height: 100%; - top: 0; - bottom: 20; - background: none; -} - -:-ms-fullscreen { - position: fixed; - width: 100%; - height: 100%; - top: 0; - background: none; -} - -:fullscreen { - position: fixed; - width: 100%; - height: 80%; - top: 0; - background: none; -} -/ - -/ - Tooltips & Alerts -/ - -.able-tooltip, .able-alert { - position: absolute; - padding: 5px 10px; - border-color: black; - border-width: 1px; - color: #000 !important; - background-color: #CCCCCC; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - display: block; + background-color: var(--able-current-chapter-background); + color: var(--able-current-chapter-color); +} + +div.able-chapters-div button:focus { + border: 0; + outline: 2px solid var(--able-focus-outline); + outline-offset: 2px; +} + +div.able-chapters-div button:hover { + outline: 2px solid var(--able-hover-outline); + outline-offset: 2px; +} + +div.able-wrapper.fullscreen { + margin: 0 !important; + position: fixed !important; + top: 0 !important; + background: none !important; } + +/ Tooltips & Alerts / +.able-tooltip { + position: absolute; + padding: 4px 8px; + border: 1px solid var(--able-tooltip-border); + color: var(--able-tooltip-color) !important; + background-color: var(--able-tooltip-background); + border-radius: 3px; + display: block; + font-size: .875rem; +} + +.able .able-alert { + border: none; +} + .able-alert { - background-color: #FFFFCC; - box-shadow: 0px 0px 16px #262626; - z-index: 9400; - position: absolute; - top: 1em; + background-color: var(--able-alert-background); + z-index: 9400; + padding: 4px 8px; + position: absolute; + height: fit-content; + width: 100%; + border: 1px solid; + border-radius: 0; + border-left-width: 0; + border-right-width: 0; + justify-content: space-between; + align-items: center; + gap: 12px; + bottom: 0; + left: 0; } + .able-popup { - z-index: 9200; + z-index: 9200; } + .able-tooltip { - z-index: 9000; + z-index: 9500; } -/ - Popup Menus -/ -.able-popup { - position: absolute; - margin: 0; - padding: 0; - border-color: black; - border-width: 1px; - background-color: #000; - opacity: 0.85; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - display: block; - cursor: default; -} -ul.able-popup { - list-style-type: none; -} -.able-popup li { - padding: 0.25em 1em 0.25em 0.25em; - margin: 1px; - color: #FFF; -} -.able-popup li.able-focus { - background-color: #CCC; - color: #000; -} -.able-popup-captions li { - padding-left: 1em; -} -.able-popup-captions li[aria-checked="true"] { - padding-left: 0; +/ Popup Menus / +ul.able-popup, +.able ul.able-popup { + position: absolute; + margin: 0; + padding: 0; + padding-inline-start: 0; + list-style-type: none; + border-width: 1px; + border-color: var(--able-menu-border); + background-color: var(--able-menu-background); + outline: 1px solid var(--able-menu-outline); + color: var(--able-menu-color); + opacity: 0.95; + border-radius: 4px; + display: grid; + cursor: default; + width: auto; } -.able-popup-captions li[aria-checked="true"]::before { - content: "\2713 "; / check mark; for heavier mark us 2714 / + +ul.able-popup li, +.able ul.able-popup li { + padding: 4px 16px; + margin: 0; + width: auto; +} + +ul.able-popup li:first-of-type, +.able ul.able-popup li:first-of-type { + border-radius: 4px 4px 0 0; +} + +ul.able-popup li:last-of-type, +.able ul.able-popup li:last-of-type { + border-radius: 0 0 4px 4px; +} + +ul.able-popup li.able-focus, +.able ul.able-popup li.able-focus { + background-color: var(--able-menu-focus-background); + color: var(--able-menu-focus-color); } -/ - Transcript -/ +.able-popup-captions li[aria-checked="true"]::before { + content: "\2713" / ''; / check mark; for heavier mark use 2714 / + margin-right: 4px; +} +/ Transcript / .able-transcript-area { - border-width: 1px; - border-style: solid; - height: 400px; - z-index: 7000; - outline: none; - padding-bottom: 25px; / keep content above 16x16px drag icon / - background-color: #FFF; + border-width: 1px; + border-style: solid; + z-index: 7000; + padding-bottom: 25px; / keep content above drag icon / + background-color: var(--able-transcript-background); } + .able-transcript { position: relative; / must be positioned for scrolling / - overflow-y: scroll; - padding-left: 5%; - padding-right: 5%; - / width: 90%; / - background-color: #FFF; - height: 350px; + overflow-y: scroll; + padding-left: 1rem; + padding-right: 1rem; + background-color: #fff; + height: 350px; } + .able-transcript div { - margin: 1em 0; + margin: 1rem 0; } + .able-transcript-heading { - font-size: 1.4em; - font-weight: bold; + font-size: 1.375rem; + font-weight: bold; + margin: .5rem 0; + padding: 0; } + .able-transcript-chapter-heading { - font-size: 1.2em; - font-weight: bold; + font-size: 1.125rem; + font-weight: bold; + margin: 0; + padding: 0; } + .able-transcript div.able-transcript-desc { - background-color: #FEE; - border: thin solid #336; + background-color: var(--able-cue-audio-description-background); + color: var(--able-cue-audio-description-color); + border: 1px solid; font-style: italic; - padding: 1em; + padding: .5rem; } + .able-transcript .able-unspoken { font-weight: bold; } -.able-transcript .able-hidden { - position: absolute !important; - clip: rect(1px 1px 1px 1px); / IE6, IE7 / - clip: rect(1px, 1px, 1px, 1px); -} -.able-highlight { - background: #FF6; / light yellow / -} -.able-previous { - background: black !important; - font-style: italic; + +.able-highlight, +.able-highlight span:hover, +.able-highlight span:focus, +.able-highlight span:active { + background-color: var(--able-cue-highlighted-background) !important; + color: var(--able-cue-highlighted-color) !important; + padding: 0.25rem 0.10rem; + border: none; + outline: none; } + .able-transcript span:hover, .able-transcript span:focus, .able-transcript span:active { - background: #CF6; / light green / + background: var(--able-cue-interacting-background); / light yellow / + color: var(--able-cue-interacting-color); + border: none; + outline: none; + border-bottom: 1px solid; cursor: pointer; } + .able-window-toolbar label { - margin-right: 10px; - color: #FFF; + display: inline; + font-size: .875rem; + margin-right: .333rem; + color: var(--able-control-label-color); } -.able-window-toolbar input:focus, -.able-window-toolbar input:hover, -.able-window-toolbar select:focus, -.able-window-toolbar select:hover, -.able-controller input:focus, -.able-controller input:hover, -.able-controller div[role="button"]:focus, -.able-controller div[role="button"]:hover, -.able-seekbar-head:focus, -.able-seekbar-head:hover { - outline-style: solid; - outline-width: 2px; + +.able-window-toolbar .autoscroll-transcript label { + margin-right: 0; +} + +div.able-modal-dialog input, +div.able-modal-dialog button, +.able-window-toolbar .able-button-handler-preferences, +.able-playlist li button, +.able-search-results li button, +.able-alert button, +.able-modal-dialog button, +.able-popup li, +.able-window-toolbar input, +.able-window-toolbar select, +.able-controller input, +.able-controller div[role="button"], +.able-seekbar-head { + outline-style: solid; + outline-width: 3px; + outline-color: transparent; } + +.able-playlist button:focus, +.able-search-results li button:focus, +.able-alert button:focus, +.able-modal-dialog button:focus, +.able-wrapper .able button.able-big-play-button:focus .icon-play, +.able-wrapper .able button.able-big-play-button:focus svg, +.able-controller div[role="button"]:focus, +div.able-modal-dialog input:focus, +div.able-modal-dialog button:focus, +.able-window-toolbar .able-button-handler-preferences:focus, .able-window-toolbar input:focus, .able-window-toolbar select:focus, .able-controller input:focus, -.able-controller div[role="button"]:focus, +.able-controller div[role="button"]:focus, .able-seekbar-head:focus { - outline-color: #ffbb37; / yellow / + outline-color: var(--able-focus-outline); } + +/ Control hover colors. / +.able-playlist li button:hover, +.able-search-results li button:hover, +.able-alert button:hover, +.able-modal-dialog button:hover, +.able-wrapper .able button.able-big-play-button:hover .icon-play, +.able-wrapper .able button.able-big-play-button:hover svg, +.able-popup li:hover, +.able-controller div[role="button"]:hover, +div.able-modal-dialog input:hover, +div.able-modal-dialog button:hover, +.able-window-toolbar .able-button-handler-preferences:hover, .able-window-toolbar input:hover, .able-window-toolbar select:hover, .able-controller input:hover, -.able-controller div[role="button"]:hover, +.able-controller div[role="button"]:hover, .able-seekbar-head:hover { - outline-color: #8AB839; / green / -} -.able-window-toolbar .transcript-language-select-wrapper { - float: right; - padding-right: 30px; + outline-color: var(--able-hover-outline); } -/ - Playlist (both audio and video) -/ - +/ Playlist (both audio and video) / +.able-search-results ul, .able-playlist { list-style-type: none; margin: 0; - background-color: #FFFFFF; - padding: 5px 0; + padding: 0; + display: grid; } + +.able-search-results li, .able-playlist li { - background-color: #DDDDDD; / default background color of each item in playlist / - margin: 5px; + background-color: var(--able-playlist-item-background); / default background color of each item in playlist / + color: var(--able-playlist-item-color); padding: 0; - border: 2px solid #AAA; - border-radius: 5px; - -moz-border-radius: 5px; + margin: 0; + border: 1px solid; + width: auto; + border-bottom: none; + max-width: 100%; } + +.able-search-results li { + display: flex; +} + +.able-search-results li:first-of-type, +.able-playlist li:first-of-type:not(.able-player .able-playlist li) { + border-radius: 5px 5px 0 0; +} + +.able-search-results li:last-of-type, +.able-playlist li:last-of-type:not(.able-player .able-playlist li) { + border-bottom: 2px solid; + border-radius: 0 0 5px 5px; +} + +.able-search-results li button, .able-playlist li button { border: none; - color: #000000; + color: var(--able-playlist-item-button-color); background-color: transparent; - font-size: 1em; + font-size: .875rem; width: 100%; - padding: 5px 10px; - text-align: left; + padding: 8px; + text-align: start; + display: flex; + align-items: center; + gap: 12px; + outline-offset: -6px; } -.able-playlist li button:hover, -.able-playlist li button:focus, -.able-playlist li button:active { / playlist items when they have mouse or keyboard focus / - background-color: #FFEEB3; - color: #000000; - text-decoration: none; - outline: none; + +.able-search-results li button { + outline-offset: -3px; + border-radius: 4px; +} + +.able-search-results li > span { + font-size: .875rem; + padding: 8px; } -.able-playlist li button::-moz-focus-inner { - border: 0; + +.able-search-results li button { + width: fit-content; + background: var(--able-search-results-button-background); + color: var(--able-search-results-buttonc-color); + border-radius: 3px; + margin: 2px; } + .able-playlist li button img { - width: 100px; - float: left; - margin-right: 10px; + max-width: 100px; + max-height: 100px; + display: block; } + .able-playlist li.able-current { / currently selected playlist item / - background-color: #340449; - border-color: #230330; -} -.able-playlist li.able-current button { - color: #FFFFFF; - font-weight: bold; - text-decoration: none; - outline: none; + background-color: var(--able-playlist-current-background); + border-color: var(--able-playlist-current-border); + outline: 2px solid var(--able-playlist-current-outline); + outline-offset: -2px; } + .able-playlist li.able-current button:hover, .able-playlist li.able-current button:focus, -.able-playlist li.able-current button:active { - color: #000000; +.able-playlist li.able-current button:active { + color: var(--able-playlist-current-active-color); + background: var(--able-playlist-current-active-background); } -/ - Search -/ - +/ Search Styling / #able-search-term-echo { - font-weight: bold; - font-style: italic; -} -.able-search-results ul li { - font-size: 1.1em; - margin-bottom: 1em; + font-style: italic; } + button.able-search-results-time { - font-size: 1em; - font-weight: bold; - cursor: pointer; -} -button.able-search-results-time:hover, -button.able-search-results-time:focus, -button.able-search-results-time:active { - color: #FFF; - background-color: #000; -} -.able-search-results-text { - padding-left: 1em; + font-weight: bold; + cursor: pointer; } + +#able-search-term-echo, .able-search-term { - background-color: #FFC; + background-color: var(--able-search-term-background); + color: var(--able-search-term-color); font-weight: bold; } - #search-term { - font-weight: bold; - font-style: italic; - } + +/ SVG Icons / +.able-wrapper div[role="button"] svg, +.able-modal-dialog div[role="button"] svg, +.able-wrapper button svg, +.able-modal-dialog button svg { + display: block; + fill: currentColor; +} -/ - Video Transcript Sorter (VTS) -/ +/ Video Transcript Sorter (VTS) / #able-vts-instructions { - margin-bottom: 1.5em; - padding: 1em; + padding: 1rem; border: 1px solid #999; - width: 720px; - max-width: 90%; + width: 100%; + margin: 0 auto 1.5rem; + box-sizing: border-box; } + #able-vts fieldset { - margin: 1em; - border: none; + margin: 0 auto 1.5rem; + border: none; } + #able-vts fieldset legend { - color: #000; - font-weight: bold; + color: #000; + font-weight: bold; } + #able-vts fieldset div { - float: left; - padding-right: 1em; + display: flex; + flex-wrap: wrap; + gap: .5rem; + align-items: center; +} + +#able-vts thead tr { + background: #f0f0f0; } + #able-vts table { - clear: left; + border-collapse: collapse; } #able-vts table, #able-vts table th, #able-vts table td { - border: 1px solid black; - border-collapse: collapse; - padding: 0.5em 0.75em; + border: 1px solid #323232; + padding: 8px; + color: #323232; +} + +#able-vts table td[contenteditable="true"] { + white-space: pre-wrap; +} + +#able-vts table td[contenteditable="true"]:hover { + background: #fff; + color: #333; } -#able-vts table th.actions { - min-width: 140px; + +#able-vts table td[contenteditable="true"]:focus-within { + background: #fff; + color: #000; } + #able-vts table td button { - width: auto; - padding: 0; - margin: 2px; + width: auto; + padding: 2px; + margin: 1px; + display: flex; + align-items: center; + float: left; + color: #323232; + background: #f6f6f6; + border-radius: 2px; } + #able-vts table td button svg { - width: 16px; - height: 16px; -} -#able-vts table button:hover, -#able-vts table button:focus { - / border: 3px solid #66c2ff; / + width: 22px; + height: 22px; } + #able-vts table button:hover svg { - fill: #C00; + fill: #c00; } -tr.kind-chapters, + tr.kind-subtitles { - background-color: #FFF; + background-color: #fff; } + tr.kind-descriptions { - background-color: #FEE; + background-color: #fee; } + tr.kind-chapters { - background-color: #e6ffe6; + background-color: #e6ffe6; } + .able-vts-dragging { - background-color: #FFC; + background-color: #ffc; } + div#able-vts-icon-credit { - margin: 1em; + font-size: .875rem; } + div#able-vts-alert { - display: none; - position: fixed; - top: 5px; - left: 5px; - border: 2px solid #666; - background-color: #FFC; - padding: 1em; - font-weight: bold; - z-index: 9400; + display: none; + position: fixed; + top: 16px; + left: 16px; + border: 2px solid #666; + background-color: var(--able-alert-background); + color: var(--able-black); + padding: 1rem; + z-index: 9400; } + button#able-vts-save { - font-size: 1em; - padding: 0.25em; - border-radius: 5px; - margin-bottom: 1em; + font-size: 1rem; + padding: 6px 12px; + border-radius: 4px; + margin-bottom: 1rem; font-weight: bold; } + button#able-vts-save:hover, button#able-vts-save:focus { - color: white; - background-color: #060; + color: #fff; + background-color: #060; } + .able-vts-output-instructions { width: 720px; max-width: 90%; } + #able-vts textarea { height: 200px; width: 720px; max-width: 90%; } -/ - Misc -/ - -.able-clipped, .able-screenreader-alert { - / hide from sighted users, but not screen reader users / - position: absolute !important; - clip: rect(1px 1px 1px 1px); / IE6, IE7 / - clip: rect(1px, 1px, 1px, 1px); - / additional rules are needed to ensure clipped buttons are truly invisible in Safari on Mac OS X / - width: 1px !important; - height: 1px !important; - overflow: hidden !important; -} -.able-error { - display: block; - background: #ffc; - border: 2px solid #000; - color: #FF0000; - margin: 0.75em; - padding: 0.5em; -} -.able-fallback { - display: block; - text-align: center; - border: 2px solid #333355; - background-color: #EEE; - color: #000; - font-weight: bold; - font-size: 1.1em; - padding: 1em; - margin-bottom: 1em; - max-width: 500px; - width: 95%; -} -.able-fallback div, -.able-fallback ul, -.able-fallback p { - text-align: left; -} -.able-fallback li { - font-weight: normal; -} -.able-fallback img { - width: 90%; - margin: 1em auto; - opacity: 0.3; -} -.able-fallback img.able-poster { - position: relative; -} - -/ - SVG Icons -/ -.able-wrapper div[role="button"] svg, -.able-modal-dialog div[role="button"] svg, -.able-wrapper button svg, -.able-modal-dialog button svg { - display: inline-block; - width: 1em; - height: 1em; - fill: currentColor; -} - -/ - Styles for 2020 Skin -/ -div.able-skin-2020 div.able-seekbar-wrapper { - width: 96%; - margin: 10px 2%; -} - -/ - icomoon.io font styling -/ -@font-face { - font-family: 'able'; - src: url('../button-icons/fonts/able.eot?dqripi'); - src: url('../button-icons/fonts/able.eot?dqripi#iefix') format('embedded-opentype'), - url('../button-icons/fonts/able.ttf?dqripi') format('truetype'), - url('../button-icons/fonts/able.woff?dqripi') format('woff'), - url('../button-icons/fonts/able.svg?dqripi#able') format('svg'); - font-weight: normal; - font-style: normal; -} - -.able-wrapper [class^="icon-"], .able-wrapper [class=" icon-"] { - /* use !important to prevent issues with browser extensions that change fonts / - font-family: 'able' !important; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - / Better Font Rendering =========== / - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-play:before { - content: "\f04b"; -} -.icon-pause:before { - content: "\f04c"; -} -.icon-stop:before { - content: "\f04d"; -} -.icon-restart:before { - content: "\e900"; -} -.icon-rewind:before { - content: "\e603"; -} -.icon-forward:before { - content: "\e604"; -} -.icon-previous:before { - content: "\e901"; -} -.icon-next:before { - content: "\e902"; -} -.icon-slower:before { - content: "\f0dd"; -} -.icon-faster:before { - content: "\f0de"; -} -.icon-turtle:before { - content: "\e904"; -} -.icon-rabbit:before { - content: "\e905"; -} -.icon-ellipsis:before { - content: "\e903"; -} -.icon-pipe:before { - content: "\e600"; -} -.icon-captions:before { - content: "\e601"; -} -.icon-descriptions:before { - content: "\e602"; -} -.icon-sign:before { - content: "\e60a"; -} -.icon-volume-mute:before { - content: "\e606"; -} -.icon-volume-soft:before { - content: "\e60c"; -} -.icon-volume-medium:before { - content: "\e605"; -} -.icon-volume-loud:before { - content: "\e60b"; -} -.icon-volume-up:before { - content: "\e607"; -} -.icon-volume-down:before { - content: "\e608"; -} -.icon-chapters:before { - content: "\e609"; -} -.icon-transcript:before { - content: "\f15c"; -} -.icon-preferences:before { - content: "\e60d"; -} -.icon-close:before { - content: "\f00d"; -} -.icon-fullscreen-expand:before { - content: "\f065"; -} -.icon-fullscreen-collapse:before { - content: "\f066"; -} -.icon-help:before { - content: "\f128"; -} - - +@media ( width < 480px ) { + .able-control-row { + gap: 8px; + } + .able-control-row div[role="button"] { + min-width: 32px; + height: 32px; + } + .able-sign-window, + .able-transcript-area { + position: static !important; + width: 100% !important; + } + div.able-captions-wrapper:not(.able-captions-overlay) { + min-height: 5rem; + } +} \ No newline at end of file diff --git a/src/thirdparty/js.cookie.js b/src/thirdparty/js.cookie.js index 80a7551..d36c82b 100644 --- a/src/thirdparty/js.cookie.js +++ b/src/thirdparty/js.cookie.js @@ -1,163 +1,147 @@ -/! - * JavaScript Cookie v2.2.1 - * https://github.com/js-cookie/js-cookie - * - * Copyright 2006, 2015 Klaus Hartl & Fagner Brack - * Released under the MIT license - / -;(function (factory) { - var registeredInModuleLoader; - if (typeof define === 'function' && define.amd) { - define(factory); - registeredInModuleLoader = true; - } - if (typeof exports === 'object') { - module.exports = factory(); - registeredInModuleLoader = true; - } - if (!registeredInModuleLoader) { - var OldCookies = window.Cookies; - var api = window.Cookies = factory(); - api.noConflict = function () { - window.Cookies = OldCookies; - return api; - }; - } -}(function () { - function extend () { - var i = 0; - var result = {}; - for (; i < arguments.length; i++) { - var attributes = arguments[ i ]; - for (var key in attributes) { - result[key] = attributes[key]; - } - } - return result; - } - - function decode (s) { - return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent); - } - - function init (converter) { - function api() {} - - function set (key, value, attributes) { - if (typeof document === 'undefined') { - return; - } - - attributes = extend({ - path: '/' - }, api.defaults, attributes); - - if (typeof attributes.expires === 'number') { - attributes.expires = new Date(new Date() 1 + attributes.expires * 864e+5); - } - - // We're using "expires" because "max-age" is not supported by IE - attributes.expires = attributes.expires ? attributes.expires.toUTCString() : ''; - - try { - var result = JSON.stringify(value); - if (/^[\{\[]/.test(result)) { - value = result; - } - } catch (e) {} - - value = converter.write ? - converter.write(value, key) : - encodeURIComponent(String(value)) - .replace(/%(23\|24\|26\|2B\|3A\|3C\|3E\|3D\|2F\|3F\|40\|5B\|5D\|5E\|60\|7B\|7D\|7C)/g, decodeURIComponent); - - key = encodeURIComponent(String(key)) - .replace(/%(23\|24\|26\|2B\|5E\|60\|7C)/g, decodeURIComponent) - .replace(/[\(\)]/g, escape); - - var stringifiedAttributes = ''; - for (var attributeName in attributes) { - if (!attributes[attributeName]) { - continue; - } - stringifiedAttributes += '; ' + attributeName; - if (attributes[attributeName] === true) { - continue; - } - - // Considers RFC 6265 section 5.2: - // ... - // 3. If the remaining unparsed-attributes contains a %x3B (";") - // character: - // Consume the characters of the unparsed-attributes up to, - // not including, the first %x3B (";") character. - // ... - stringifiedAttributes += '=' + attributes[attributeName].split(';')[0]; - } - - return (document.cookie = key + '=' + value + stringifiedAttributes); - } - - function get (key, json) { - if (typeof document === 'undefined') { - return; - } - - var jar = {}; - // To prevent the for loop in the first place assign an empty array - // in case there are no cookies at all. - var cookies = document.cookie ? document.cookie.split('; ') : []; - var i = 0; - - for (; i < cookies.length; i++) { - var parts = cookies[i].split('='); - var cookie = parts.slice(1).join('='); - - if (!json && cookie.charAt(0) === '"') { - cookie = cookie.slice(1, -1); - } - - try { - var name = decode(parts[0]); - cookie = (converter.read \|\| converter)(cookie, name) \|\| - decode(cookie); - - if (json) { - try { - cookie = JSON.parse(cookie); - } catch (e) {} - } - - jar[name] = cookie; - - if (key === name) { - break; - } - } catch (e) {} - } - - return key ? jar[key] : jar; - } - - api.set = set; - api.get = function (key) { - return get(key, false /* read as raw /); - }; - api.getJSON = function (key) { - return get(key, true / read as json /); - }; - api.remove = function (key, attributes) { - set(key, '', extend(attributes, { - expires: -1 - })); - }; - - api.defaults = {}; - - api.withConverter = init; - - return api; - } - - return init(function () {}); -})); +/! js-cookie v3.0.1 \| MIT / +; +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = global \|\| self, (function () { + var current = global.Cookies; + var exports = global.Cookies = factory(); + exports.noConflict = function () { global.Cookies = current; return exports; }; + }())); +}(this, (function () { 'use strict'; + + / eslint-disable no-var / + function assign (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + for (var key in source) { + target[key] = source[key]; + } + } + return target + } + / eslint-enable no-var / + + / eslint-disable no-var / + var defaultConverter = { + read: function (value) { + if (value[0] === '"') { + value = value.slice(1, -1); + } + return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent) + }, + write: function (value) { + return encodeURIComponent(value).replace( + /%(2[346BF]\|3[AC-F]\|40\|5[BDE]\|60\|7[BCD])/g, + decodeURIComponent + ) + } + }; + / eslint-enable no-var / + + / eslint-disable no-var / + + function init (converter, defaultAttributes) { + function set (key, value, attributes) { + if (typeof document === 'undefined') { + return + } + + attributes = assign({}, defaultAttributes, attributes); + + if (typeof attributes.expires === 'number') { + attributes.expires = new Date(Date.now() + attributes.expires 864e5); + } + if (attributes.expires) { + attributes.expires = attributes.expires.toUTCString(); + } + + key = encodeURIComponent(key) + .replace(/%(2[346B]\|5E\|60\|7C)/g, decodeURIComponent) + .replace(/[()]/g, escape); + + var stringifiedAttributes = ''; + for (var attributeName in attributes) { + if (!attributes[attributeName]) { + continue + } + + stringifiedAttributes += '; ' + attributeName; + + if (attributes[attributeName] === true) { + continue + } + + // Considers RFC 6265 section 5.2: + // ... + // 3. If the remaining unparsed-attributes contains a %x3B (";") + // character: + // Consume the characters of the unparsed-attributes up to, + // not including, the first %x3B (";") character. + // ... + stringifiedAttributes += '=' + attributes[attributeName].split(';')[0]; + } + + return (document.cookie = + key + '=' + converter.write(value, key) + stringifiedAttributes) + } + + function get (key) { + if (typeof document === 'undefined' \|\| (arguments.length && !key)) { + return + } + + // To prevent the for loop in the first place assign an empty array + // in case there are no cookies at all. + var cookies = document.cookie ? document.cookie.split('; ') : []; + var jar = {}; + for (var i = 0; i < cookies.length; i++) { + var parts = cookies[i].split('='); + var value = parts.slice(1).join('='); + + try { + var foundKey = decodeURIComponent(parts[0]); + jar[foundKey] = converter.read(value, foundKey); + + if (key === foundKey) { + break + } + } catch (e) {} + } + + return key ? jar[key] : jar + } + + return Object.create( + { + set: set, + get: get, + remove: function (key, attributes) { + set( + key, + '', + assign({}, attributes, { + expires: -1 + }) + ); + }, + withAttributes: function (attributes) { + return init(this.converter, assign({}, this.attributes, attributes)) + }, + withConverter: function (converter) { + return init(assign({}, this.converter, converter), this.attributes) + } + }, + { + attributes: { value: Object.freeze(defaultAttributes) }, + converter: { value: Object.freeze(converter) } + } + ) + } + + var api = init(defaultConverter, { path: '/' }); + /* eslint-enable no-var / + + return api; + +}))); diff --git a/src/thirdparty/js.cookie.min.js b/src/thirdparty/js.cookie.min.js new file mode 100644 index 0000000..90a7672 --- /dev/null +++ b/src/thirdparty/js.cookie.min.js @@ -0,0 +1,2 @@ +/! js-cookie v3.0.1 \| MIT */ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e\|\|self,function(){var n=e.Cookies,o=e.Cookies=t();o.noConflict=function(){return e.Cookies=n,o}}())}(this,(function(){"use strict";function e(e){for(var t=1;t

',{ - '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(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 += '' + 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); - }; - -})(jQuery); - - -(function ($) { - AblePlayer.prototype.initVimeoPlayer = function () { - - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - containerId = this.mediaId + '_vimeo'; - - // add container to which Vimeo player iframe will be appended - this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - - // if a described version is available && user prefers desription - // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } - this.activeVimeoId = vimeoId; - - // Notes re. Vimeo Embed Options: - // If a video is owned by a user with a paid Plus, PRO, or Business account, - // setting the "controls" option to "false" will hide the default controls, without hiding captions. - // This is a new option from Vimeo; previously used "background:true" to hide the controller, - // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - - if (this.autoplay && this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } - - videoDimensions = this.getVimeoDimensions(this.activeVimeoId, containerId); - if (videoDimensions) { - this.vimeoWidth = videoDimensions[0]; - this.vimeoHeight = videoDimensions[1]; - this.aspectRatio = thisObj.ytWidth / thisObj.ytHeight; - } - else { - // dimensions are initially unknown - // sending null values to Vimeo results in a video that uses the default Vimeo dimensions - // these can then be scraped from the iframe and applied to this.$ableWrapper - this.vimeoWidth = null; - this.vimeoHeight = null; - } - - options = { - id: vimeoId, - width: this.vimeoWidth, - controls: false - }; - - this.vimeoPlayer = new Vimeo.Player(containerId, options); - - this.vimeoPlayer.ready().then(function() { - - if (!thisObj.hasPlaylist) { - // remove the media element, since Vimeo replaces that with its own element in an iframe - // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() - thisObj.$media.remove(); - - // define variables that will impact player setup - - // vimeoSupportsPlaybackRateChange - // changing playbackRate is only supported if the video is hosted on a Pro or Business account - // unfortunately there is no direct way to query for that information. - // this.vimeoPlayer.getPlaybackRate() returns a value, regardless of account type - // This is a hack: - // Attempt to change the playbackRate. If it results in an error, assume changing playbackRate is not supported. - // Supported playbackRate values are 0.5 to 2. - thisObj.vimeoPlaybackRate = 1; - thisObj.vimeoPlayer.setPlaybackRate(thisObj.vimeoPlaybackRate).then(function(playbackRate) { - // playback rate was set - thisObj.vimeoSupportsPlaybackRateChange = true; - }).catch(function(error) { - thisObj.vimeoSupportsPlaybackRateChange = false; - }); - deferred.resolve(); - } - }); - return promise; - }; - - AblePlayer.prototype.getVimeoPaused = function () { - - var deferred, promise; - deferred = new $.Deferred(); - promise = deferred.promise(); - - this.vimeoPlayer.getPaused().then(function (paused) { - // paused is Boolean - deferred.resolve(paused); - }); - - return promise; - } - - AblePlayer.prototype.getVimeoEnded = function () { - - var deferred, promise; - deferred = new $.Deferred(); - promise = deferred.promise(); - - this.vimeoPlayer.getEnded().then(function (ended) { - // ended is Boolean - deferred.resolve(ended); - }); - - return promise; - } - - AblePlayer.prototype.getVimeoState = function () { - - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - promises = []; - - gettingPausedPromise = this.vimeoPlayer.getPaused(); - gettingEndedPromise = this.vimeoPlayer.getEnded(); - - promises.push(gettingPausedPromise); - promises.push(gettingEndedPromise); - - gettingPausedPromise.then(function (paused) { - deferred.resolve(paused); - }); - gettingEndedPromise.then(function (ended) { - deferred.resolve(ended); - }); - $.when.apply($, promises).then(function () { - deferred.resolve(); - }); - return promise; - } - - AblePlayer.prototype.getVimeoDimensions = function (vimeoContainerId) { - - // get dimensions of Vimeo video, return array with width & height - - var d, url, $iframe, width, height; - - d = []; - - if (typeof this.playerMaxWidth !== 'undefined') { - d[0] = this.playerMaxWidth; - // optional: set height as well; not required though since Vimeo will adjust height to match width - if (typeof this.playerMaxHeight !== 'undefined') { - d[1] = this.playerMaxHeight; - } - return d; - } - else { - if (typeof $('#' + vimeoContainerId) !== 'undefined') { - $iframe = $('#' + vimeoContainerId); - width = $iframe.width(); - height = $iframe.height(); - if (width > 0 && height > 0) { - d[0] = width; - d[1] = height; - return d; - } - } - } - return false; - }; - - AblePlayer.prototype.getVimeoCaptionTracks = function () { - - // get data via Vimeo Player API, and push data to this.captions - // Note: Vimeo doesn't expose the caption cues themselves - // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - var thisObj, i, trackId, isDefaultTrack; - - thisObj = this; - - this.vimeoPlayer.getTextTracks().then(function(tracks) { - - // each Vimeo track includes the following: - // label (local name of the language) - // language (2-character code) - // kind (captions or subtitles, as declared by video owner) - // mode ('disabled' or 'showing') - - if (tracks.length) { - - // create a new button for each caption track - for (i=0; i<tracks.length; i++) { - - thisObj.hasCaptions = true; - if (thisObj.prefCaptions === 1) { - thisObj.captionsOn = true; - } - else { - thisObj.captionsOn = false; - } - // assign the default track based on language of the player - if (tracks[i]['language'] === thisObj.lang) { - isDefaultTrack = true; - } - else { - isDefaultTrack = false; - } - thisObj.tracks.push({ - 'kind': tracks[i]['kind'], - 'language': tracks[i]['language'], - 'label': tracks[i]['label'], - 'def': isDefaultTrack - }); - } - thisObj.captions = thisObj.tracks; - thisObj.hasCaptions = true; - - // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - deferred.resolve(); - } - else { - thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; - deferred.resolve(); - } - }); - - return promise; - }; - -})(jQuery); diff --git a/src/build/ableplayer.css b/src/build/ableplayer.css deleted file mode 100644 index 94f51c9..0000000 --- a/src/build/ableplayer.css +++ /dev/null @@ -1,1316 +0,0 @@ -.able-wrapper { - position: relative; - margin: 1em 0; - padding: 0; - max-width: 100%; - height: auto; - box-sizing: content-box!important; - text-align: left; -} - -.able { - position: relative; - margin: 0; - padding: 0; - width: 100%; - background-color: #000; - box-shadow: 0 0 16px #262626; - z-index: 5000; -} - -.able-column-left { - float: left; -} - -.able-column-right { - float: left; -} - -.able .able-vidcap-container { - background-color: #000; - left: 0; - margin: 0; - position: relative; - top: 0; -} - -.able .able-audcap-container { - background-color: #000; - position: relative; - margin: 0; - padding: 1.5em .25em; -} - -.able-player { - font-family: Arial,Helvetica,sans-serif; - background-color: #262626; -} - -.able-audio { - padding-top: 1em; -} - -.able-offscreen { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; -} - -.able-media-container audio { - display: none!important; -} - -.able-controller { - position: relative; - border-bottom: 1px solid #4c4c4c; - background-color: #464646; - min-height: 38px; - padding: 0; -} - -.able-poster { - position: absolute; - top: 0; - left: 0; - width: 100%!important; - height: auto!important; -} - -.able .able-vidcap-container { - overflow: visible; -} - -.able .able-vidcap-container video { - max-width: 100%; -} - -.able-media-container iframe { - max-width: 100%; -} - -.able-big-play-button { - position: absolute; - font-size: 8em; - color: #fdfdfd; - background-color: transparent; - border: none; - outline: 0; - left: 0; - top: 0; - padding: 0; - z-index: 6500; - opacity: .75; -} - -.able-big-play-button:focus,.able-big-play-button:hover { - opacity: 100; -} - -.able-big-play-button .icon-play,.able-big-play-button svg { - background-color: #000; - padding: 1rem 2rem; -} - -.able-big-play-button:hover .icon-play,.able-big-play-button:hover svg { - outline-style: solid; - outline-width: medium; - outline-color: #8ab839!important; -} - -.able-big-play-button:focus .icon-play,.able-big-play-button:focus svg { - outline-style: solid; - outline-width: medium; - outline-color: #ffbb37!important; -} - -.able-left-controls,.able-right-controls { - overflow: visible; -} - -.able-left-controls div[role=button],.able-right-controls div[role=button] { - vertical-align: middle; -} - -.able-left-controls { - float: left; -} - -.able-right-controls { - float: right; -} - -.able-black-controls,.able-black-controls div[role=button],.able-black-controls label { - color: #000!important; -} - -.able-black-controls .able-seekbar { - border: 1px solid #000; -} - -.able-black-controls label,.able-white-controls,.able-white-controls div[role=button] { - color: #fff!important; -} - -.able-white-controls .able-seekbar { - border: 1px solid #fff; -} - -.able-controller div[role=button] { - background: 0 0; - position: relative; - display: inline-block; - border-style: none; - margin: 3px; - padding: 0; - font-size: 20px; - min-width: 24px; - border: none; - overflow: visible!important; - z-index: 6600; -} - -.able-controller div[role=button]>img,.able-controller div[role=button]>span { - width: 20px; - margin: 0 auto; - padding: 0; - z-index: 6700; -} - -.able-controller .buttonOff { - opacity: .5; - z-index: 6800; -} - -.able-controller .able-seekbar { - margin: 0 5px; - z-index: 6900; -} - -.able-controller div[role=button]:focus,.able-controller div[role=button]:hover { - outline-style: solid; - outline-width: medium; -} - -.able-controller div[role=button]:hover { - outline-color: #8ab839!important; -} - -.able-controller div[role=button]:focus { - outline-color: #ffbb37!important; -} - -.able-controller button::-moz-focus-inner,.able-search-results button::-moz-focus-inner { - border: 0; -} - -.able-seekbar-wrapper { - display: inline-block; - vertical-align: middle; -} - -.able-seekbar { - position: relative; - height: .5em; - border: 1px solid; - background-color: #000; - margin: 0 3px; - border-style: solid; - border-width: 2px; - border-color: #fff; -} - -.able-seekbar-loaded { - display: inline-block; - position: absolute; - left: 0; - top: 0; - height: .5em; - background-color: #464646; - z-index: 5100; -} - -.able-seekbar-played { - display: inline-block; - position: absolute; - left: 0; - top: 0; - height: .5em; - background-color: #dadada; - z-index: 5200; -} - -.able-seekbar-head { - display: inline-block; - position: relative; - left: 0; - top: -.4em; - background-color: #fdfdfd; - width: .8em; - height: .8em; - border: 1px solid; - border-radius: .8em; - z-index: 5500; -} - -.able-volume-slider { - width: 34px; - height: 80px; - background-color: #464646; - margin: 0; - padding: 5px 0; - position: absolute; - right: 0; - bottom: 60px; - display: block; - z-index: 9100; -} - -.able-volume-help { - display: none; -} - -.able-volume-slider input[type=range] { - appearance: slider-vertical; - writing-mode: bt-rl; - width: 28px; - height: 100%; - background: 0 0; -} - -.able-volume-slider input[type=range]::-moz-range-track { - border: 1px solid #fff; - width: 7px; - cursor: pointer; - background: #000; -} - -input[type=range]::-moz-range-thumb { - background-color: #fdfdfd; - outline: 1px solid #333; - height: 16px; - width: 24px; - z-index: 9175; -} - -.able-status-bar { - height: 1.5em; - min-height: 1.5em; - color: #ccc; - font-size: .9em; - background-color: transparent; - padding: .5em .5em .25em; -} - -.able-status-bar span.able-timer { - text-align: left; - float: left; - width: 32%; -} - -.able-status-bar span.able-speed { - float: left; - width: 33%; - text-align: center; -} - -.able-status { - font-style: italic; - float: right; - width: 32%; - text-align: right; -} - -div.able-captions-wrapper { - width: 100%; - margin: 0; - padding: 0; - text-align: center; - display: block; - z-index: 6000; -} - -div.able-captions { - display: none; - padding: .15em .25em; - line-height: 1.35em; - background-color: #000; - font-size: 1em; - color: #fff; - opacity: .75; -} - -div.able-vidcap-container div.able-captions-overlay { - position: absolute; - margin: 0; - bottom: .5em; -} - -div.able-vidcap-container div.able-captions-below { - position: relative; - min-height: 3.2em; -} - -div.able-audcap-container.captions-off { - display: none; -} - -div.able-descriptions { - position: relative; - color: #ff6; - background-color: #262626; - min-height: 2.8em; - border-top: 1px solid #666; - margin: 0; - padding: 3%; - width: 94%; - text-align: center; -} - -div.able-now-playing { - text-align: center; - font-weight: 700; - font-size: 1.1em; - color: #fff; - background-color: transparent; - padding: .5em .5em 1em; -} - -div.able-now-playing span { - font-size: .9em; -} - -div.able-now-playing span span { - display: block; -} - -div.able-video div.able-now-playing { - display: none; -} - -div.able-modal-dialog { - position: absolute; - height: auto; - max-width: 90%; - margin-left: auto; - margin-right: auto; - top: 5%; - left: 0; - right: 0; - outline: 0 none; - display: none; - color: #000; - background-color: #fafafa; - box-sizing: content-box!important; - z-index: 10000; - max-height: 90%; - overflow: scroll; -} - -@supports (transform:translate(-50%,-50%)) { - div.able-modal-dialog { - top: 50%; - left: 50%; - transform: translate(-50%,-50%)!important; - } -} - -div.able-modal-overlay { - position: fixed; - width: 100%; - height: 100%; - background-color: #000; - opacity: .5; - margin: 0; - padding: 0; - top: 0; - left: 0; - display: none; - z-index: 9500; -} - -button.modalCloseButton { - position: absolute; - top: 5px; - right: 5px; -} - -button.modal-button { - margin-right: 5px; -} - -div.able-modal-dialog button:focus,div.able-modal-dialog button:hover,div.able-modal-dialog input:focus,div.able-modal-dialog input:hover { - outline-style: solid; - outline-width: 2px; -} - -div.able-modal-dialog button:hover,div.able-modal-dialog input:hover { - outline-color: #8ab839; -} - -div.able-modal-dialog button:focus,div.able-modal-dialog input:focus { - outline-color: #ffbb37; -} - -div.able-modal-dialog h1 { - font-weight: 700; - font-size: 1.8em; - line-height: 1.2em; - margin: .75em 0; - color: #000; - text-align: center; -} - -.able-help-div,.able-prefs-form,.able-resize-form { - background-color: #f5f5f5; - border: medium solid #ccc; - padding: .5em 1em; - margin: 0 0 0 1em; - width: 25em; - display: none; -} - -.able-prefs-form div[role=group] { - margin: 1em 0; - padding: 0; - border: none; -} - -.able-prefs-form h2 { - color: #000; - font-weight: 700; - font-size: 1.1em; -} - -.able-prefs-form div[role=group]>div { - display: table; - margin-left: 1em; -} - -.able-prefs-form div[role=group]>div>input { - display: table-cell; - width: 1em; - vertical-align: middle; -} - -.able-prefs-form div[role=group]>div>label { - display: table-cell; - padding-left: .5em; -} - -.able-desc-pref-prompt { - font-weight: 700; - font-style: italic; - margin-left: 1em!important; -} - -.able-prefDescFormat>div { - margin-left: 1.5em; -} - -.able-prefs-captions label,.able-prefs-captions select { - display: block; - float: left; - margin-bottom: .25em; -} - -.able-prefs-captions label { - width: 6em; - text-align: right; - padding-right: 1em; -} - -.able-prefs-captions select { - width: 10em; - font-size: .9em; - border-radius: none; -} - -.able-prefs-descriptions>div.able-prefs-select { - margin: .5em 1em; -} - -.able-prefs-descriptions>div.able-prefs-select>label,.able-prefs-descriptions>div.able-prefs-slider>label { - width: 6em; - text-align: right; - padding-right: 1em; -} - -.able-prefs-descriptions>div.able-prefs-select>select,.able-prefs-descriptions>div.able-prefs-slider>select { - width: 10em; - font-size: .9em; - border-radius: none; -} - -div.able-prefDescPause { - margin-top: 1em; -} - -.able-prefs-form div.able-captions-sample { - padding: .5em; - text-align: center; -} - -.able-prefs-form div.able-desc-sample { - padding: .5em; - text-align: center; - color: #fff; - background-color: #000; -} - -.able-prefs-form h2 { - margin-top: 0; - margin-bottom: .5em; - font-size: 1.1em; -} - -.able-prefs-form ul { - margin-top: 0; -} - -able-prefs-form-keyboard ul { - list-style-type: none; -} - -span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift { - color: #666; - font-style: italic; -} - -span.able-modkey { - font-weight: 700; - color: #000; - font-size: 1.1em; -} - -.able-resize-form h1 { - font-size: 1.15em; -} - -.able-resize-form div div { - margin: 1em; -} - -.able-resize-form label { - padding-right: .5em; - font-weight: 700; -} - -.able-resize-form input[type=text] { - font-size: 1em; -} - -.able-resize-form input[readonly] { - color: #aaa; -} - -.able-window-toolbar { - background-color: #464646; - min-height: 15px; - padding: 10px; - border-style: solid; - border-width: 0 0 1px 0; -} - -.able-draggable:hover { - cursor: move; -} - -.able-window-toolbar .able-button-handler-preferences { - position: absolute; - top: 0; - right: 0; - font-size: 1.5em; - background-color: transparent; - border: none; - outline: 0; - padding: 0; - z-index: 9300; -} - -.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar .able-button-handler-preferences:hover { - outline-style: solid; - outline-width: medium; -} - -.able-window-toolbar .able-button-handler-preferences:hover { - outline-color: #8ab839!important; -} - -.able-window-toolbar .able-button-handler-preferences:focus { - outline-color: #ffbb37!important; -} - -.able-window-toolbar .able-popup { - position: absolute; - cursor: default; - right: 0; - top: 0; - display: block; -} - -.able-drag { - border: 2px dashed #f90; - cursor: move; -} - -.able-resizable { - position: absolute; - width: 20px; - height: 20px; - padding: 5px 2px; - bottom: 0; - right: 0; - cursor: nwse-resize; -} - -.able-resizable svg line { - stroke: #595959; - stroke-width: 2px; -} - -.able-sign-window { - position: relative; - margin: 1em; - z-index: 8000; -} - -.able-sign-window video { - width: 100%; -} - -.able-sign-window:focus { - outline: 0; -} - -div.able-chapters-div { - padding: 0; -} - -div.able-chapters-div .able-chapters-heading { - margin: 1em .75em; - font-size: 1.1em; - font-weight: 700; -} - -div.able-chapters-div ul { - list-style-type: none; - padding-left: 0; -} - -div.able-chapters-div ul li { - max-width: 100%; - padding: 0; - height: 2em; -} - -div.able-chapters-div button { - width: 100%; - height: 100%; - border: none; - background-color: transparent; - color: #000; - font-size: 1em; - text-align: left; - padding: .15em 1em; -} - -div.able-chapters-div li.able-current-chapter { - background-color: #000!important; -} - -div.able-chapters-div li.able-current-chapter button { - color: #fff!important; -} - -div.able-chapters-div li.able-focus { - background-color: #4c4c4c; -} - -div.able-chapters-div button::-moz-focus-inner,div.able-chapters-div button:focus,div.able-chapters-div button:hover { - border: 0; - outline: 0; - color: #fff!important; -} - -div.able-wrapper.fullscreen { - margin: 0!important; - position: fixed!important; - top: 0!important; - background: 0 0!important; -} - -.able-alert,.able-tooltip { - position: absolute; - padding: 5px 10px; - border-color: #000; - border-width: 1px; - color: #000!important; - background-color: #ccc; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - display: block; -} - -.able-alert { - background-color: #ffc; - box-shadow: 0 0 16px #262626; - z-index: 9400; - position: absolute; - top: 1em; -} - -.able-popup { - z-index: 9200; -} - -.able-tooltip { - z-index: 9000; -} - -.able-popup { - position: absolute; - margin: 0; - padding: 0; - border-color: #000; - border-width: 1px; - background-color: #000; - opacity: .85; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - display: block; - cursor: default; -} - -ul.able-popup { - list-style-type: none; -} - -.able-popup li { - padding: .25em 1em .25em .25em; - margin: 1px; - width: auto; - color: #fff; -} - -.able-popup li.able-focus { - background-color: #ccc; - color: #000; -} - -.able-popup-captions li { - padding-left: 1em; -} - -.able-popup-captions li[aria-checked=true] { - padding-left: 0; -} - -.able-popup-captions li[aria-checked=true]::before { - content: "\2713 "; -} - -.able-transcript-area { - border-width: 1px; - border-style: solid; - height: 400px; - z-index: 7000; - outline: 0; - padding-bottom: 25px; - background-color: #fff; -} - -.able-transcript { - position: relative; - overflow-y: scroll; - padding-left: 5%; - padding-right: 5%; - background-color: #fff; - height: 350px; -} - -.able-transcript div { - margin: 1em 0; -} - -.able-transcript-heading { - font-size: 1.4em; - font-weight: 700; - margin: 1em 0; - padding: 0; -} - -.able-transcript-chapter-heading { - font-size: 1.2em; - font-weight: 700; - margin: 0; - padding: 0; -} - -.able-transcript div.able-transcript-desc { - background-color: #fee; - border: thin solid #336; - font-style: italic; - padding: 1em; -} - -.able-transcript .able-unspoken { - font-weight: 700; -} - -.able-transcript .able-hidden { - position: absolute!important; - clip: rect(1px 1px 1px 1px); - clip: rect(1px,1px,1px,1px); -} - -.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover { - background-color: #000!important; - color: #fff!important; - padding: .25em .1em; - border: none; - outline: 0; -} - -.able-previous { - background: #000!important; - font-style: italic; -} - -.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover { - background: #ffc; - color: #000; - border: none; - outline: 0; - border-bottom: 1px solid #000; - cursor: pointer; -} - -.able-window-toolbar label { - display: inline; - margin-right: 10px; - color: #fff; -} - -.able-controller div[role=button]:focus,.able-controller div[role=button]:hover,.able-controller input:focus,.able-controller input:hover,.able-seekbar-head:focus,.able-seekbar-head:hover,.able-window-toolbar input:focus,.able-window-toolbar input:hover,.able-window-toolbar select:focus,.able-window-toolbar select:hover { - outline-style: solid; - outline-width: 2px; -} - -.able-controller div[role=button]:focus,.able-controller input:focus,.able-seekbar-head:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus { - outline-color: #ffbb37; -} - -.able-controller div[role=button]:hover,.able-controller input:hover,.able-seekbar-head:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover { - outline-color: #8ab839; -} - -.able-window-toolbar .transcript-language-select-wrapper { - float: right; - padding-right: 30px; -} - -.able-playlist { - list-style-type: none; - margin: 0; - background-color: #fff; - padding: 5px 0; -} - -.able-playlist li { - background-color: #ddd; - margin: 5px; - padding: 0; - border: 2px solid #aaa; - border-radius: 5px; - width: auto; - max-width: 100%; -} - -.able-playlist li button { - border: none; - color: #000; - background-color: transparent; - font-size: 1em; - width: 100%; - padding: 5px 10px; - text-align: left; -} - -.able-playlist li button:active,.able-playlist li button:focus,.able-playlist li button:hover { - background-color: #ffeeb3; - color: #000; - text-decoration: none; - outline: 0; -} - -.able-playlist li button::-moz-focus-inner { - border: 0; -} - -.able-playlist li button img { - width: 100px; - float: left; - margin-right: 10px; -} - -.able-playlist li.able-current { - background-color: #340449; - border-color: #230330; -} - -.able-playlist li.able-current button { - color: #fff; - font-weight: 700; - text-decoration: none; - outline: 0; -} - -.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover { - color: #000; -} - -#able-search-term-echo { - font-weight: 700; - font-style: italic; -} - -.able-search-results ul li { - font-size: 1.1em; - margin-bottom: 1em; -} - -button.able-search-results-time { - font-size: 1em; - font-weight: 700; - cursor: pointer; -} - -button.able-search-results-time:active,button.able-search-results-time:focus,button.able-search-results-time:hover { - color: #fff; - background-color: #000; -} - -.able-search-results-text { - padding-left: 1em; -} - -.able-search-term { - background-color: #ffc; - font-weight: 700; -} - -#search-term { - font-weight: 700; - font-style: italic; -} - -#able-vts-instructions { - margin-bottom: 1.5em; - padding: 1em; - border: 1px solid #999; - width: 720px; - max-width: 90%; -} - -#able-vts fieldset { - margin: 1em; - border: none; -} - -#able-vts fieldset legend { - color: #000; - font-weight: 700; -} - -#able-vts fieldset div { - float: left; - padding-right: 1em; -} - -#able-vts table { - clear: left; -} - -#able-vts table,#able-vts table td,#able-vts table th { - border: 1px solid #000; - border-collapse: collapse; - padding: .5em .75em; -} - -#able-vts table th.actions { - min-width: 140px; -} - -#able-vts table td button { - width: auto; - padding: 0; - margin: 2px; -} - -#able-vts table td button svg { - width: 16px; - height: 16px; -} - -#able-vts table button:hover svg { - fill: #c00; -} - -tr.kind-chapters,tr.kind-subtitles { - background-color: #fff; -} - -tr.kind-descriptions { - background-color: #fee; -} - -tr.kind-chapters { - background-color: #e6ffe6; -} - -.able-vts-dragging { - background-color: #ffc; -} - -div#able-vts-icon-credit { - margin: 1em; -} - -div#able-vts-alert { - display: none; - position: fixed; - top: 5px; - left: 5px; - border: 2px solid #666; - background-color: #ffc; - padding: 1em; - font-weight: 700; - z-index: 9400; -} - -button#able-vts-save { - font-size: 1em; - padding: .25em; - border-radius: 5px; - margin-bottom: 1em; - font-weight: 700; -} - -button#able-vts-save:focus,button#able-vts-save:hover { - color: #fff; - background-color: #060; -} - -.able-vts-output-instructions { - width: 720px; - max-width: 90%; -} - -#able-vts textarea { - height: 200px; - width: 720px; - max-width: 90%; -} - -.able-clipped,.able-screenreader-alert { - position: absolute!important; - clip: rect(1px 1px 1px 1px); - clip: rect(1px,1px,1px,1px); - width: 1px!important; - height: 1px!important; - overflow: hidden!important; -} - -.able-error { - display: block; - background: #ffc; - border: 2px solid #000; - color: red; - margin: .75em; - padding: .5em; -} - -.able-fallback { - display: block; - text-align: center; - border: 2px solid #335; - background-color: #eee; - color: #000; - font-weight: 700; - font-size: 1.1em; - padding: 1em; - margin-bottom: 1em; - max-width: 500px; - width: 95%; -} - -.able-fallback div,.able-fallback p,.able-fallback ul { - text-align: left; -} - -.able-fallback li { - font-weight: 400; -} - -.able-fallback img { - width: 90%; - margin: 1em auto; - opacity: .3; -} - -.able-fallback img.able-poster { - position: relative; -} - -.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg { - display: inline-block; - width: 1em; - height: 1em; - fill: currentColor; -} - -div.able-skin-2020 div.able-seekbar-wrapper { - width: 99%; - margin: 10px 3px; -} - -@font-face { - font-family:able;src:url(../button-icons/fonts/able.eot?dqripi);src:url(../button-icons/fonts/able.eot?dqripi#iefix) format('embedded-opentype'),url(../button-icons/fonts/able.ttf?dqripi) format('truetype'),url(../button-icons/fonts/able.woff?dqripi) format('woff'),url(../button-icons/fonts/able.svg?dqripi#able) format('svg');font-weight:400;font-style:normal; -} - -.able-wrapper [class=" icon-"],.able-wrapper [class^=icon-] { - font-family: able!important; - speak: none; - font-style: normal; - font-weight: 400; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-play:before { - content: "\f04b"; -} - -.icon-pause:before { - content: "\f04c"; -} - -.icon-stop:before { - content: "\f04d"; -} - -.icon-restart:before { - content: "\e900"; -} - -.icon-rewind:before { - content: "\e603"; -} - -.icon-forward:before { - content: "\e604"; -} - -.icon-previous:before { - content: "\e901"; -} - -.icon-next:before { - content: "\e902"; -} - -.icon-slower:before { - content: "\f0dd"; -} - -.icon-faster:before { - content: "\f0de"; -} - -.icon-turtle:before { - content: "\e904"; -} - -.icon-rabbit:before { - content: "\e905"; -} - -.icon-ellipsis:before { - content: "\e903"; -} - -.icon-pipe:before { - content: "\e600"; -} - -.icon-captions:before { - content: "\e601"; -} - -.icon-descriptions:before { - content: "\e602"; -} - -.icon-sign:before { - content: "\e60a"; -} - -.icon-volume-mute:before { - content: "\e606"; -} - -.icon-volume-soft:before { - content: "\e60c"; -} - -.icon-volume-medium:before { - content: "\e605"; -} - -.icon-volume-loud:before { - content: "\e60b"; -} - -.icon-volume-up:before { - content: "\e607"; -} - -.icon-volume-down:before { - content: "\e608"; -} - -.icon-chapters:before { - content: "\e609"; -} - -.icon-transcript:before { - content: "\f15c"; -} - -.icon-preferences:before { - content: "\e60d"; -} - -.icon-close:before { - content: "\f00d"; -} - -.icon-fullscreen-expand:before { - content: "\f065"; -} - -.icon-fullscreen-collapse:before { - content: "\f066"; -} - -.icon-help:before { - content: "\f128"; -} \ No newline at end of file diff --git a/src/build/ableplayer.dist.4.4.1.js b/src/build/ableplayer.dist.4.4.1.js deleted file mode 100644 index 45249a0..0000000 --- a/src/build/ableplayer.dist.4.4.1.js +++ /dev/null @@ -1,16190 +0,0 @@ -/ - // JavaScript for Able Player - - // HTML5 Media API: - // http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement - // http://dev.w3.org/html5/spec-author-view/video.html - - // W3C API Test Page: - // http://www.w3.org/2010/05/video/mediaevents.html - - // YouTube Player API for iframe Embeds - https://developers.google.com/youtube/iframe_api_reference - // YouTube Player Parameters - https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 - - // YouTube Data API - https://developers.google.com/youtube/v3 - - // Vimeo Player API - https://github.com/vimeo/player.js - - // Google API Client Library for JavaScript - https://developers.google.com/api-client-library/javascript/dev/dev_jscript - - // Google API Explorer: YouTube services and methods - https://developers.google.com/apis-explorer/#s/youtube/v3/ - - // Web Speech API (Speech Synthesis) - // https://w3c.github.io/speech-api/#tts-section - // https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis -/ - -/jslint node: true, browser: true, white: true, indent: 2, unparam: true, plusplus: true / -/global $, jQuery / -"use strict"; - -// maintain an array of Able Player instances for use globally (e.g., for keeping prefs in sync) -var AblePlayerInstances = []; - -(function ($) { - $(document).ready(function () { - - $('video, audio').each(function (index, element) { - if ($(element).data('able-player') !== undefined) { - AblePlayerInstances.push(new AblePlayer($(this),$(element))); - } - }); - }); - - // YouTube player support; pass ready event to jQuery so we can catch in player. - window.onYouTubeIframeAPIReady = function() { - AblePlayer.youTubeIframeAPIReady = true; - $('body').trigger('youTubeIframeAPIReady', []); - }; - // If there is only one player on the page, dispatch global keydown events to it - // Otherwise, keydowwn events are handled locally (see event.js > handleEventListeners()) - $(window).on('keydown',function(e) { - if (AblePlayer.nextIndex === 1) { - AblePlayer.lastCreated.onPlayerKeyPress(e); - } - }); - - // Construct an AblePlayer object - // Parameters are: - // media - jQuery selector or element identifying the media. - window.AblePlayer = function(media) { - - - var thisObj = this; - - // Keep track of the last player created for use with global events. - AblePlayer.lastCreated = this; - this.media = media; - if ($(media).length === 0) { - this.provideFallback(); - return; - } - - /////////////////////////////// - // - // Default variables assignment - // - /////////////////////////////// - - // The following variables CAN be overridden with HTML attributes - - // autoplay (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('autoplay') !== undefined) { - this.autoplay = true; // this value remains constant - this.okToPlay = true; // this value can change dynamically - } - else { - this.autoplay = false; - this.okToPlay = false; - } - - // loop (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('loop') !== undefined) { - this.loop = true; - } - else { - this.loop = false; - } - - // playsinline (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('playsinline') !== undefined) { - this.playsInline = '1'; // this value gets passed to YT.Player contructor in youtube.js - } - else { - this.playsInline = '0'; - } - - // poster (Boolean, indicating whether media element has a poster attribute) - if ($(media).attr('poster')) { - this.hasPoster = true; - } - else { - this.hasPoster = false; - } - - // start-time - if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) { - this.startTime = $(media).data('start-time'); - } - else { - this.startTime = 0; - } - - // debug - if ($(media).data('debug') !== undefined && $(media).data('debug') !== false) { - this.debug = true; - } - else { - this.debug = false; - } - - // Path to root directory of Able Player code - if ($(media).data('root-path') !== undefined) { - // add a trailing slash if there is none - this.rootPath = $(media).data('root-path').replace(/\/?$/, '/'); - } - else { - this.rootPath = this.getRootPath(); - } - - // Volume - // Range is 0 to 10. Best not to crank it to avoid overpowering screen readers - this.defaultVolume = 7; - if ($(media).data('volume') !== undefined && $(media).data('volume') !== "") { - var volume = $(media).data('volume'); - if (volume >= 0 && volume <= 10) { - this.defaultVolume = volume; - } - } - this.volume = this.defaultVolume; - - // Optional Buttons - // Buttons are added to the player controller if relevant media is present - // However, in some applications it might be undesirable to show buttons - // (e.g., if chapters or transcripts are provided in an external container) - - if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) { - this.useChaptersButton = false; - } - else { - this.useChaptersButton = true; - } - - if ($(media).data('use-descriptions-button') !== undefined && $(media).data('use-descriptions-button') === false) { - this.useDescriptionsButton = false; - } - else { - this.useDescriptionsButton = true; - } - - // Silence audio description - // set to "false" if the sole purposes of the WebVTT descriptions file - // is to display description text visibly and to integrate it into the transcript - if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) { - this.exposeTextDescriptions = false; - } - else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { - // support both singular and plural spelling of attribute - this.exposeTextDescriptions = false; - } - else { - this.exposeTextDescriptions = true; - } - - // Headings - // By default, an off-screen heading is automatically added to the top of the media player - // It is intelligently assigned a heading level based on context, via misc.js > getNextHeadingLevel() - // Authors can override this behavior by manually assigning a heading level using data-heading-level - // Accepted values are 1-6, or 0 which indicates "no heading" - // (i.e., author has already hard-coded a heading before the media player; Able Player doesn't need to do this) - if ($(media).data('heading-level') !== undefined && $(media).data('heading-level') !== "") { - var headingLevel = $(media).data('heading-level'); - if (/^[0-6]$/.test(headingLevel)) { // must be a valid HTML heading level 1-6; or 0 - this.playerHeadingLevel = headingLevel; - } - } - - // Transcripts - // There are three types of interactive transcripts. - // In descending of order of precedence (in case there are conflicting tags), they are: - // 1. "manual" - A manually coded external transcript (requires data-transcript-src) - // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div) - // 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button - // If data-include-transcript="false", there is no "popup" transcript - - if ($(media).data('transcript-div') !== undefined && $(media).data('transcript-div') !== "") { - this.transcriptDivLocation = $(media).data('transcript-div'); - } - else { - this.transcriptDivLocation = null; - } - if ($(media).data('include-transcript') !== undefined && $(media).data('include-transcript') === false) { - this.hideTranscriptButton = true; - } - else { - this.hideTranscriptButton = null; - } - - this.transcriptType = null; - if ($(media).data('transcript-src') !== undefined) { - this.transcriptSrc = $(media).data('transcript-src'); - if (this.transcriptSrcHasRequiredParts()) { - this.transcriptType = 'manual'; - } - } - else if ($(media).find('track[kind="captions"], track[kind="subtitles"]').length > 0) { - // required tracks are present. COULD automatically generate a transcript - if (this.transcriptDivLocation) { - this.transcriptType = 'external'; - } - else { - this.transcriptType = 'popup'; - } - } - - // In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript - // If false (default), line breaks are are removed from transcripts in order to provide a more seamless reading experience - // If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem - if ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) { - this.lyricsMode = true; - } - else { - this.lyricsMode = false; - } - - // Transcript Title - if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") { - this.transcriptTitle = $(media).data('transcript-title'); - } - else { - // do nothing. The default title will be defined later (see transcript.js) - } - - // Captions - // data-captions-position can be used to set the default captions position - // this is only the default, and can be overridden by user preferences - // valid values of data-captions-position are 'below' and 'overlay' - if ($(media).data('captions-position') === 'overlay') { - this.defaultCaptionsPosition = 'overlay'; - } - else { // the default, even if not specified - this.defaultCaptionsPosition = 'below'; - } - - // Chapters - if ($(media).data('chapters-div') !== undefined && $(media).data('chapters-div') !== "") { - this.chaptersDivLocation = $(media).data('chapters-div'); - } - - if ($(media).data('chapters-title') !== undefined) { - // NOTE: empty string is valid; results in no title being displayed - this.chaptersTitle = $(media).data('chapters-title'); - } - - if ($(media).data('chapters-default') !== undefined && $(media).data('chapters-default') !== "") { - this.defaultChapter = $(media).data('chapters-default'); - } - else { - this.defaultChapter = null; - } - - // Slower/Faster buttons - // valid values of data-speed-icons are 'animals' (default) and 'arrows' - // 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows - if ($(media).data('speed-icons') === 'arrows') { - this.speedIcons = 'arrows'; - } - else { - this.speedIcons = 'animals'; - } - - // Seekbar - // valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters' - if ($(media).data('seekbar-scope') === 'chapter' || $(media).data('seekbar-scope') === 'chapters') { - this.seekbarScope = 'chapter'; - } - else { - this.seekbarScope = 'video'; - } - - // YouTube - if ($(media).data('youtube-id') !== undefined && $(media).data('youtube-id') !== "") { - this.youTubeId = $(media).data('youtube-id'); - } - - if ($(media).data('youtube-desc-id') !== undefined && $(media).data('youtube-desc-id') !== "") { - this.youTubeDescId = $(media).data('youtube-desc-id'); - } - - if ($(media).data('youtube-nocookie') !== undefined && $(media).data('youtube-nocookie')) { - this.youTubeNoCookie = true; - } - else { - this.youTubeNoCookie = false; - } - - // Vimeo - if ($(media).data('vimeo-id') !== undefined && $(media).data('vimeo-id') !== "") { - this.vimeoId = $(media).data('vimeo-id'); - } - if ($(media).data('vimeo-desc-id') !== undefined && $(media).data('vimeo-desc-id') !== "") { - this.vimeoDescId = $(media).data('vimeo-desc-id'); - } - - // Skin - // valid values of data-skin are: - // 'legacy' (default), two rows of controls; seekbar positioned in available space within top row - // '2020', all buttons in one row beneath a full-width seekbar - if ($(media).data('skin') == '2020') { - this.skin = '2020'; - } - else { - this.skin = 'legacy'; - } - - // Icon type - // By default, AblePlayer 3.0.33 and higher uses SVG icons for the player controls - // Fallback for browsers that don't support SVG is scalable icomoon fonts - // Ultimate fallback is images, if the user has a custom style sheet that overrides font-family - // Use data-icon-type to force controls to use either 'svg', 'font', or 'images' - this.iconType = 'font'; - this.forceIconType = false; - if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") { - var iconType = $(media).data('icon-type'); - if (iconType === 'font' || iconType == 'image' || iconType == 'svg') { - this.iconType = iconType; - this.forceIconType = true; - } - } - - if ($(media).data('allow-fullscreen') !== undefined && $(media).data('allow-fullscreen') === false) { - this.allowFullScreen = false; - } - else { - this.allowFullScreen = true; - } - - // Seek interval - // Number of seconds to seek forward or back with Rewind & Forward buttons - // Unless specified with data-seek-interval, the default value is re-calculated in initialize.js > setSeekInterval(); - // Calculation attempts to intelligently assign a reasonable interval based on media length - this.defaultSeekInterval = 10; - this.useFixedSeekInterval = false; // will change to true if media has valid data-seek-interval attribute - if ($(media).data('seek-interval') !== undefined && $(media).data('seek-interval') !== "") { - var seekInterval = $(media).data('seek-interval'); - if (/^[1-9][0-9]$/.test(seekInterval)) { // must be a whole number greater than 0 - this.seekInterval = seekInterval; - this.useFixedSeekInterval = true; // do not override with calculuation - } - } - - // Now Playing - // Shows "Now Playing:" plus the title of the current track above player - // Only used if there is a playlist - if ($(media).data('show-now-playing') !== undefined && $(media).data('show-now-playing') === false) { - this.showNowPlaying = false; - } - else { - this.showNowPlaying = true; - } - - // TTML support (experimental); enabled for testing with data-use-ttml (Boolean) - if ($(media).data('use-ttml') !== undefined) { - this.useTtml = true; - // The following may result in a console error. - this.convert = require('xml-js'); - } - else { - this.useTtml = false; - } - - // Fallback - // The only supported fallback content as of version 4.0 is: - // 1. Content nested within the <audio> or <video> element. - // 2. A standard localized message (see buildplayer.js > provideFallback() - // The data-test-fallback attribute can be used to test the fallback solution in any browser - if ($(media).data('test-fallback') !== undefined && $(media).data('test-fallback') !== false) { - this.testFallback = true; - } - - // Language - // Player language is determined given the following precedence: - // 1. The value of data-lang on the media element, if provided and a matching translation file is available - // 2. Lang attribute on <html> or <body>, if a matching translation file is available - // 3. English - // Final calculation occurs in translation.js > getTranslationText() - if ($(media).data('lang') !== undefined && $(media).data('lang') !== "") { - this.lang = $(media).data('lang').toLowerCase(); - } - else { - this.lang = null; - } - - // Metadata Tracks - if ($(media).data('meta-type') !== undefined && $(media).data('meta-type') !== "") { - this.metaType = $(media).data('meta-type'); - } - - if ($(media).data('meta-div') !== undefined && $(media).data('meta-div') !== "") { - this.metaDiv = $(media).data('meta-div'); - } - - // Search - // conducting a search requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - - this.searchDiv = $(media).data('search-div'); - - // Search term (optional; could be assigned later in a JavaScript application) - if ($(media).data('search') !== undefined && $(media).data('search') !== "") { - this.searchString = $(media).data('search'); - } - - // Search Language - if ($(media).data('search-lang') !== undefined && $(media).data('search-lang') !== "") { - this.searchLang = $(media).data('search-lang'); - } - else { - this.searchLang = null; // will change to final value of this.lang in translation.js > getTranslationText() - } - - // Search option: Ignore capitalization in search terms - if ($(media).data('search-ignore-caps') !== undefined && $(media).data('search-ignore-caps') !== false) { - this.searchIgnoreCaps = true; - } - else { - this.searchIgnoreCaps = false; - } - - // conducting a search currently requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - this.searchString = $(media).data('search'); - this.searchDiv = $(media).data('search-div'); - } - } - - // Hide controls when video starts playing - // They will reappear again when user presses a key or moves the mouse - // As of v4.0, controls are hidden automatically on playback in fullscreen mode - if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) { - this.hideControls = true; - this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode - } - else { - this.hideControls = false; - this.hideControlsOriginal = false; - } - - // Steno mode - // Enable support for Able Player keyboard shortcuts in textaarea fields - // so users can control the player while transcribing - if ($(media).data('steno-mode') !== undefined && $(media).data('steno-mode') !== false) { - this.stenoMode = true; - // Add support for stenography in an iframe via data-steno-iframe-id - if ($(media).data('steno-iframe-id') !== undefined && $(media).data('steno-iframe-id') !== "") { - this.stenoFrameId = $(media).data('steno-iframe-id'); - this.$stenoFrame = $('#' + this.stenoFrameId); - if (!(this.$stenoFrame.length)) { - // iframe not found - this.stenoFrameId = null; - this.$stenoFrame = null; - } - } - else { - this.stenoFrameId = null; - this.$stenoFrame = null; - } - } - else { - this.stenoMode = false; - this.stenoFrameId = null; - this.$stenoFrame = null; - } - - // Define built-in variables that CANNOT be overridden with HTML attributes - this.setDefaults(); - - //////////////////////////////////////// - // - // End assignment of default variables - // - //////////////////////////////////////// - - this.ableIndex = AblePlayer.nextIndex; - AblePlayer.nextIndex += 1; - - this.title = $(media).attr('title'); - - // populate translation object with localized versions of all labels and prompts - // use defer method to defer additional processing until text is retrieved - this.tt = {}; - var thisObj = this; - $.when(this.getTranslationText()).then( - function () { - if (thisObj.countProperties(thisObj.tt) > 50) { - // close enough to ensure that most text variables are populated - thisObj.setup(); - } - else { - // can't continue loading player with no text - thisObj.provideFallback(); - } - } - ); - }; - - // Index to increment every time new player is created. - AblePlayer.nextIndex = 0; - - AblePlayer.prototype.setup = function() { - - var thisObj = this; - this.initializing = true; // will remain true until entire sequence of function calls is complete - this.reinitialize().then(function () { - if (!thisObj.player) { - // No player for this media, show last-line fallback. - thisObj.provideFallback(); - } - else { - thisObj.setupInstance().then(function () { - thisObj.setupInstancePlaylist(); - if (!thisObj.hasPlaylist) { - // for playlists, recreatePlayer() is called from within cuePlaylistItem() - thisObj.recreatePlayer(); - } - thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed - }); - } - }); - }; - - AblePlayer.getActiveDOMElement = function () { - var activeElement = document.activeElement; - - // For shadow DOMs we need to keep digging down through the DOMs - while (activeElement.shadowRoot && activeElement.shadowRoot.activeElement) { - activeElement = activeElement.shadowRoot.activeElement; - } - - return activeElement; - }; - - AblePlayer.localGetElementById = function(element, id) { - if (element.getRootNode) - { - // Use getRootNode() and querySelector() where supported (for shadow DOM support) - return $(element.getRootNode().querySelector('#' + id)); - } - else - { - // If getRootNode is not supported it should be safe to use document.getElementById (since there is no shadow DOM support) - return $(document.getElementById(id)); - } - }; - - AblePlayer.youTubeIframeAPIReady = false; - AblePlayer.loadingYouTubeIframeAPI = false; -})(jQuery); - -(function ($) { - // Set default variable values. - AblePlayer.prototype.setDefaults = function () { - - this.playerCreated = false; // will set to true after recreatePlayer() is complete the first time - this.playing = false; // will change to true after 'playing' event is triggered - this.paused = true; // will always be the opposite of this.playing (available for convenience) - this.clickedPlay = false; // will change to true temporarily if user clicks 'play' (or pause) - this.fullscreen = false; // will change to true if player is in full screen mode - this.swappingSrc = false; // will change to true temporarily while media source is being swapped - this.initializing = false; // will change to true temporarily while initPlayer() is processing - this.cueingPlaylistItems = false; // will change to true temporarily while cueing next playlist item - this.okToPlay = false; // will change to true if conditions are acceptible for automatic playback after media loads - this.buttonWithFocus = null; // will change to 'previous' or 'next' if user clicks either of those buttons - - this.getUserAgent(); - this.setIconColor(); - this.setButtonImages(); - }; - - AblePlayer.prototype.getRootPath = function() { - - // returns Able Player root path (assumes ableplayer.js is in /build, one directory removed from root) - var scripts, i, scriptSrc, scriptFile, fullPath, ablePath, parentFolderIndex, rootPath; - scripts= document.getElementsByTagName('script'); - for (i=0; i < scripts.length; i++) { - scriptSrc = scripts[i].src; - scriptFile = scriptSrc.substr(scriptSrc.lastIndexOf('/')); - if (scriptFile.indexOf('ableplayer') !== -1) { - // this is the ableplayerscript - fullPath = scriptSrc.split('?')[0]; // remove any ? params - break; - } - } - ablePath= fullPath.split('/').slice(0, -1).join('/'); // remove last filename part of path - parentFolderIndex = ablePath.lastIndexOf('/'); - rootPath = ablePath.substring(0, parentFolderIndex) + '/'; - return rootPath; - } - - AblePlayer.prototype.setIconColor = function() { - - // determine the best color choice (white or black) for icons, - // given the background-color of their container elements - // Source for relative luminance formula: - // https://en.wikipedia.org/wiki/Relative_luminance - - // We need to know the color before* creating the element - // so the element doesn't exist yet when this function is called - // therefore, need to create a temporary element then remove it after color is determined - // Temp element must be added to the DOM or WebKit can't retrieve its CSS properties - - var $elements, i, $el, bgColor, rgb, red, green, blue, luminance, iconColor; - - $elements = ['controller', 'toolbar']; - for (i=0; i<$elements.length; i++) { - if ($elements[i] == 'controller') { - $el = $('<div>', { - 'class': 'able-controller' - }).hide(); - } - else if ($elements[i] === 'toolbar') { - $el = $('<div>', { - 'class': 'able-window-toolbar' - }).hide(); - } - $('body').append($el); - bgColor = $el.css('background-color'); - // bgColor is a string in the form 'rgb(R, G, B)', perhaps with a 4th item for alpha; - // split the 3 or 4 channels into an array - rgb = bgColor.replace(/[^\d,]/g, '').split(','); - red = rgb[0]; - green = rgb[1]; - blue = rgb[2]; - luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue); - // range is 1 - 255; therefore 125 is the tipping point - if (luminance < 125) { // background is dark - iconColor = 'white'; - } - else { // background is light - iconColor = 'black'; - } - if ($elements[i] === 'controller') { - this.iconColor = iconColor; - } - else if ($elements[i] === 'toolbar') { - this.toolbarIconColor = iconColor; - } - $el.remove(); - } - }; - - AblePlayer.prototype.setButtonImages = function() { - - // NOTE: volume button images are now set dynamically within volume.js - this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/'; - this.playButtonImg = this.imgPath + 'play.png'; - this.pauseButtonImg = this.imgPath + 'pause.png'; - - this.restartButtonImg = this.imgPath + 'restart.png'; - - this.rewindButtonImg = this.imgPath + 'rewind.png'; - this.forwardButtonImg = this.imgPath + 'forward.png'; - - this.previousButtonImg = this.imgPath + 'previous.png'; - this.nextButtonImg = this.imgPath + 'next.png'; - - if (this.speedIcons === 'arrows') { - this.fasterButtonImg = this.imgPath + 'slower.png'; - this.slowerButtonImg = this.imgPath + 'faster.png'; - } - else if (this.speedIcons === 'animals') { - this.fasterButtonImg = this.imgPath + 'rabbit.png'; - this.slowerButtonImg = this.imgPath + 'turtle.png'; - } - - this.captionsButtonImg = this.imgPath + 'captions.png'; - this.chaptersButtonImg = this.imgPath + 'chapters.png'; - this.signButtonImg = this.imgPath + 'sign.png'; - this.transcriptButtonImg = this.imgPath + 'transcript.png'; - this.descriptionsButtonImg = this.imgPath + 'descriptions.png'; - - this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png'; - this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png'; - - this.prefsButtonImg = this.imgPath + 'preferences.png'; - this.helpButtonImg = this.imgPath + 'help.png'; - }; - - AblePlayer.prototype.getSvgData = function(button) { - - // returns array of values for creating <svg> tag for specified button - // 0 = <svg> viewBox attribute - // 1 = <path> d (description) attribute - var svg = Array(); - - switch (button) { - - case 'play': - svg[0] = '0 0 16 20'; - svg[1] = 'M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z'; - break; - - case 'pause': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'stop': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'restart': - svg[0] = '0 0 20 20'; - svg[1] = 'M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z'; - break; - - case 'rewind': - svg[0] = '0 0 20 20'; - svg[1] = 'M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z'; - break; - - case 'forward': - svg[0] = '0 0 20 20'; - svg[1] = 'M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z'; - break; - - case 'previous': - svg[0] = '0 0 20 20'; - svg[1] = 'M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z'; - break; - - case 'next': - svg[0] = '0 0 20 20'; - svg[1] = 'M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z'; - break; - - case 'slower': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z'; - break; - - case 'faster': - svg[0] = '0 0 11 20'; - svg[1] = 'M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'turtle': - svg[0] = '0 0 20 20'; - svg[1] = 'M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z'; - break; - - case 'rabbit': - svg[0] = '0 0 20 20'; - svg[1] = 'M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z'; - break; - - case 'ellipsis': - svg[0] = '0 0 20 20'; - svg[1] = 'M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z'; - break; - - case 'pipe': - svg[0] = '0 0 20 20'; - svg[1] = 'M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z'; - break; - - case 'captions': - svg[0] = '0 0 20 20'; - svg[1] = 'M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z'; - break; - - case 'descriptions': - svg[0] = '0 0 20 20'; - svg[1] = 'M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z'; - break; - - case 'sign': - svg[0] = '0 0 20 20'; - svg[1] = 'M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z'; - break; - - case 'mute': - case 'volume-mute': - svg[0] = '0 0 20 20'; - svg[1] = 'M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z'; - break; - - case 'volume-soft': - svg[0] = '0 0 20 20'; - svg[1] = 'M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; - break; - - case 'volume-medium': - svg[0] = '0 0 20 20'; - svg[1] = 'M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; - break; - - case 'volume-loud': - svg[0] = '0 0 21 20'; - svg[1] = 'M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; - break; - - case 'chapters': - svg[0] = '0 0 20 20'; - svg[1] = 'M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z'; - break; - - case 'transcript': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z'; - break; - - case 'preferences': - svg[0] = '0 0 20 20'; - svg[1] = 'M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z'; - break; - - case 'close': - svg[0] = '0 0 16 20'; - svg[1] = 'M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z'; - break; - - case 'fullscreen-expand': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z'; - break; - - case 'fullscreen-collapse': - svg[0] = '0 0 20 20'; - svg[1] = 'M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'help': - svg[0] = '0 0 11 20'; - svg[1] = 'M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z'; - break; - } - - return svg; - }; - - // Initialize player based on data on page. - // This sets some variables, but does not modify anything. Safe to call multiple times. - // Can call again after updating this.media so long as new media element has the same ID. - AblePlayer.prototype.reinitialize = function () { - - var deferred, promise, thisObj, errorMsg, srcFile; - - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - - // if F12 Developer Tools aren't open in IE (through 9, no longer a problen in IE10) - // console.log causes an error - can't use debug without a console to log messages to - if (! window.console) { - this.debug = false; - } - - this.startedPlaying = false; - // TODO: Move this setting to cookie. - this.autoScrollTranscript = true; - //this.autoScrollTranscript = this.getCookie(autoScrollTranscript); // (doesn't work) - - // Bootstrap from this.media possibly being an ID or other selector. - this.$media = $(this.media).first(); - this.media = this.$media[0]; - // Set media type to 'audio' or 'video'; this determines some of the behavior of player creation. - if (this.$media.is('audio')) { - this.mediaType = 'audio'; - } - else if (this.$media.is('video')) { - this.mediaType = 'video'; - } - else { - // Able Player was initialized with some element other than <video> or <audio> - this.provideFallback(); - deferred.fail(); - return promise; - } - - this.$sources = this.$media.find('source'); - - this.player = this.getPlayer(); - if (!this.player) { - // an error was generated in getPlayer() - this.provideFallback(); - } - this.setIconType(); - this.setDimensions(); - - deferred.resolve(); - return promise; - }; - - AblePlayer.prototype.setDimensions = function() { - // if media element includes width and height attributes, - // use these to set the max-width and max-height of the player - if (this.$media.attr('width') && this.$media.attr('height')) { - this.playerMaxWidth = parseInt(this.$media.attr('width'), 10); - this.playerMaxHeight = parseInt(this.$media.attr('height'), 10); - } - else if (this.$media.attr('width')) { - // media element includes a width attribute, but not height - this.playerMaxWidth = parseInt(this.$media.attr('width'), 10); - } - else { - // set width to width of #player - // don't set height though; YouTube will automatically set that to match width - this.playerMaxWidth = this.$media.parent().width(); - this.playerMaxHeight = this.getMatchingHeight(this.playerMaxWidth); - } - // override width and height attributes with in-line CSS to make video responsive - this.$media.css({ - 'width': '100%', - 'height': 'auto' - }); - }; - - AblePlayer.prototype.getMatchingHeight = function(width) { - - // returns likely height for a video, given width - // These calculations assume 16:9 aspect ratio (the YouTube standard) - // Videos recorded in other resolutions will be sized to fit, with black bars on each side - // This function is only called if the <video> element does not have width and height attributes - - var widths, heights, closestWidth, closestIndex, closestHeight, height; - - widths = [ 3840, 2560, 1920, 1280, 854, 640, 426 ]; - heights = [ 2160, 1440, 1080, 720, 480, 360, 240 ]; - closestWidth = null; - closestIndex = null; - - $.each(widths, function(index){ - if (closestWidth == null || Math.abs(this - width) < Math.abs(closestWidth - width)) { - closestWidth = this; - closestIndex = index; - } - }); - closestHeight = heights[closestIndex]; - this.aspectRatio = closestWidth / closestHeight; - height = Math.round(width / this.aspectRatio); - return height; - }; - - AblePlayer.prototype.setIconType = function() { - - // returns either "svg", "font" or "image" (in descending order of preference) - // Test for support of each type. If not supported, test the next type. - // last resort is image icons - - var $tempButton, $testButton, controllerFont; - - if (this.forceIconType) { - // use value specified in data-icon-type - return false; - } - - // test for SVG support - // Test this method widely; failed as expected on IE8 and below - // https://stackoverflow.com/a/27568129/744281 - if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) { - // browser supports SVG - this.iconType = 'svg'; - } - else { - // browser does NOT support SVG - // test whether browser can support icon fonts, and whether user has overriding the default style sheet - // which could cause problems with proper display of the icon fonts - if (window.getComputedStyle) { - - // webkit doesn't return calculated styles unless element has been added to the DOM - // and is visible (note: visibly clipped is considered "visible") - // use playpauseButton for font-family test if it exists; otherwise must create a new temp button - if ($('span.icon-play').length) { - $testButton = $('span.icon-play'); - } - else { - $tempButton = $('<span>',{ - 'class': 'icon-play able-clipped' - }); - $('body').append($tempButton); - $testButton = $tempButton; - } - - // the following retrieves the computed value of font-family - // tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works! - // tested in Chrome 49.x with Font Changer plugin - works! - // tested in IE with user-defined style sheet enables - works! - // It does NOT account for users who have "ignore font styles on web pages" checked in IE - // There is no known way to check for that ??? - controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family'); - if (typeof controllerFont !== 'undefined') { - if (controllerFont.indexOf('able') !== -1) { - this.iconType = 'font'; - } - else { - this.iconType = 'image'; - } - } - else { - // couldn't get computed font-family; use images to be safe - this.iconType = 'image'; - } - } - else { // window.getComputedStyle is not supported (IE 8 and earlier) - // No known way to detect computed font - // The following retrieves the value from the style sheet, not the computed font - // controllerFont = $tempButton.get(0).currentStyle.fontFamily; - // It will therefore return "able", even if the user is overriding that with a custom style sheet - // To be safe, use images - this.iconType = 'image'; - } - if (this.debug) { - - } - if (typeof $tempButton !== 'undefined') { - $tempButton.remove(); - } - } - }; - - // Perform one-time setup for this instance of player; called after player is first initialized. - AblePlayer.prototype.setupInstance = function () { - - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - if (this.$media.attr('id')) { - this.mediaId = this.$media.attr('id'); - } - else { - // Ensure the base media element always has an ID. - this.mediaId = "ableMediaId_" + this.ableIndex; - this.$media.attr('id', this.mediaId); - } - deferred.resolve(); - return promise; - }; - - AblePlayer.prototype.setupInstancePlaylist = function() { - - // find a matching playlist and set this.hasPlaylist - // if there is one, also set this.$playlist, this.playlistIndex, & this.playlistEmbed - var thisObj = this; - - this.hasPlaylist = false; // will change to true if a matching playlist is found - - $('.able-playlist').each(function() { - if ($(this).data('player') === thisObj.mediaId) { - // this is the playlist for the current player - thisObj.hasPlaylist = true; - // If using an embedded player, we'll replace $playlist with the clone later. - thisObj.$playlist = $(this).find('li'); - - // check to see if list item has YouTube as its source - // if it does, inject a thumbnail from YouTube - var $youTubeVideos = $(this).find('li[data-youtube-id]'); - $youTubeVideos.each(function() { - var youTubeId = $(this).attr('data-youtube-id'); - var youTubePoster = thisObj.getYouTubePosterUrl(youTubeId,'120'); - var $youTubeImg = $('<img>',{ - 'src': youTubePoster, - 'alt': '' - }); - $(this).find('button').prepend($youTubeImg); - }); - - // add accessibility to the list markup - $(this).find('li span').attr('aria-hidden','true'); - thisObj.playlistIndex = 0; - var dataEmbedded = $(this).data('embedded'); - if (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) { - // embed playlist within player - thisObj.playlistEmbed = true; - } - else { - thisObj.playlistEmbed = false; - } - } - }); - - if (this.hasPlaylist && this.loop) { - // browser will loop the current track in the playlist, rather than the playlist - // therefore, need to remove loop attribute from media element - // but keep this.loop as true and handle the playlist looping ourselves - this.media.removeAttribute('loop'); - } - if (this.hasPlaylist && this.playlistEmbed) { - // Copy the playlist out of the dom, so we can reinject when we build the player. - var parent = this.$playlist.parent(); - this.$playlistDom = parent.clone(); - parent.remove(); - } - if (this.hasPlaylist && this.$sources.length === 0) { - // no source elements were provided. Construct them from the first playlist item - this.cuePlaylistItem(0); - // redefine this.$sources now that media contains one or more <source> elements - this.$sources = this.$media.find('source'); - } - - }; - - AblePlayer.prototype.recreatePlayer = function () { - - // Creates the appropriate player for the current source. - var thisObj, prefsGroups, i; - thisObj = this; - - // TODO: Ensure when recreating player that we carry over the mediaId - if (!this.player) { - console.log("Can't create player; no appropriate player type detected."); - return; - } - if (!this.playerCreated) { - // only call these functions once - this.loadCurrentPreferences(); - this.injectPlayerCode(); - } - - // call all remaining functions each time a new media instance is loaded - - this.initSignLanguage(); - - this.initPlayer().then(function() { - - thisObj.setupTracks().then(function() { - - thisObj.getBrowserVoices(); - - thisObj.setupTranscript().then(function() { - - thisObj.initStenoFrame().then(function() { - - if (thisObj.stenoMode && thisObj.$stenoFrame) { - thisObj.stenoFrameContents = thisObj.$stenoFrame.contents(); - } - - thisObj.getMediaTimes().then(function(mediaTimes) { - - thisObj.duration = mediaTimes['duration']; - thisObj.elapsed = mediaTimes['elapsed']; - - thisObj.setFullscreen(false); - - if (typeof thisObj.volume === 'undefined') { - thisObj.volume = thisObj.defaultVolume; - } - if (thisObj.volume) { - thisObj.setVolume(thisObj.volume); - } - - if (thisObj.transcriptType) { - thisObj.addTranscriptAreaEvents(); - thisObj.updateTranscript(); - } - if (thisObj.mediaType === 'video') { - thisObj.initDescription(); - } - if (thisObj.captions.length) { - thisObj.initDefaultCaption(); - } - - // setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks - // This tells browsers to ignore the text tracks so Able Player can handle them - // However, timing is critical as browsers - especially Safari - tend to ignore this request - // unless it's sent late in the intialization process. - // If browsers ignore the request, the result is redundant captions - thisObj.setMediaAttributes(); - thisObj.addControls(); - - thisObj.addEventListeners(); - - // inject each of the hidden forms that will be accessed from the Preferences popup menu - prefsGroups = thisObj.getPreferencesGroups(); - for (i = 0; i < prefsGroups.length; i++) { - thisObj.injectPrefsForm(prefsGroups[i]); - } - thisObj.setupPopups(); - thisObj.updateCaption(); - thisObj.injectVTS(); - if (thisObj.chaptersDivLocation) { - thisObj.populateChaptersDiv(); - } - thisObj.showSearchResults(); - - // Go ahead and load media, without user requesting it - // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth - // However, the media needs to load before the 'loadedmetadata' event is fired - // and until that happens we can't get the media's duration - if (thisObj.player === 'html5') { - thisObj.$media[0].load(); - } - // refreshControls is called twice building/initializing the player - // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete - setTimeout(function() { - thisObj.refreshControls('init'); - },100); - }); - }); - }); - - }); - }, - function() { // initPlayer fail - thisObj.provideFallback(); - }); - }; - - AblePlayer.prototype.initPlayer = function () { - - var thisObj = this; - var playerPromise; - // First run player specific initialization. - if (this.player === 'html5') { - playerPromise = this.initHtml5Player(); - } - else if (this.player === 'youtube') { - playerPromise = this.initYouTubePlayer(); - } - else if (this.player === 'vimeo') { - playerPromise = this.initVimeoPlayer(); - } - // After player specific initialization is done, run remaining general initialization. - var deferred = new $.Deferred(); - var promise = deferred.promise(); - playerPromise.done( - function () { // done/resolved - if (thisObj.useFixedSeekInterval) { - if (!thisObj.seekInterval) { - thisObj.seekInterval = thisObj.defaultSeekInterval; - } - else { - // fixed seekInterval was already assigned, using value of data-seek-interval attribute - } - thisObj.seekIntervalCalculated = true; - } - else { - thisObj.setSeekInterval(); - } - deferred.resolve(); - } - ).fail(function () { // failed - deferred.reject(); - } - ); - - return promise; - }; - - AblePlayer.prototype.initStenoFrame = function() { - - var thisObj, deferred, promise, $iframe; - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - if (this.stenoMode && this.$stenoFrame) { - - if (this.$stenoFrame[0].contentWindow,document.readyState == 'complete') { - // iframe has already loaded - deferred.resolve(); - } - else { - // iframe has not loaded. Wait for it. - this.$stenoFrame.on('load',function() { - deferred.resolve(); - }); - } - } - else { - // there is no stenoFrame to initialize - deferred.resolve(); - } - return promise; - }; - - AblePlayer.prototype.setSeekInterval = function () { - - // this function is only called if this.useFixedSeekInterval is false - // if this.useChapterTimes, this is called as each new chapter is loaded - // otherwise, it's called once, as the player is initialized - var thisObj, duration; - thisObj = this; - this.seekInterval = this.defaultSeekInterval; - if (this.useChapterTimes) { - duration = this.chapterDuration; - } - else { - duration = this.duration; - } - if (typeof duration === 'undefined' || duration < 1) { - // no duration; just use default for now but keep trying until duration is available - this.seekIntervalCalculated = false; - return; - } - else { - if (duration <= 20) { - this.seekInterval = 5; // 4 steps max - } - else if (duration <= 30) { - this.seekInterval = 6; // 5 steps max - } - else if (duration <= 40) { - this.seekInterval = 8; // 5 steps max - } - else if (duration <= 100) { - this.seekInterval = 10; // 10 steps max - } - else { - // never more than 10 steps from start to end - this.seekInterval = (duration / 10); - } - this.seekIntervalCalculated = true; - } - }; - - AblePlayer.prototype.initDefaultCaption = function () { - - var captions, i; - - captions = this.captions; - if (captions.length > 0) { - for (i=0; i<captions.length; i++) { - if (captions[i].def === true) { - this.captionLang = captions[i].language; - this.selectedCaptions = captions[i]; - } - } - if (typeof this.captionLang === 'undefined') { - // No caption track was flagged as default - // find and use a caption language that matches the player language - for (i=0; i<captions.length; i++) { - if (captions[i].language === this.lang) { - this.captionLang = captions[i].language; - this.selectedCaptions = captions[i]; - } - } - } - if (typeof this.captionLang === 'undefined') { - // Still no matching caption track - // just use the first track - this.captionLang = captions[0].language; - this.selectedCaptions = captions[0]; - } - if (typeof this.captionLang !== 'undefined') { - // reset transcript selected <option> to this.captionLang - if (this.$transcriptLanguageSelect) { - this.$transcriptLanguageSelect.find('option[lang=' + this.captionLang + ']').prop('selected',true); - } - // sync all other tracks to this same languge - this.syncTrackLanguages('init',this.captionLang); - } - if (this.player === 'vimeo') { - if (this.usingVimeoCaptions && this.prefCaptions == 1) { - // initialize Vimeo captions to the default language - this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { - // track.language = the iso code for the language - // track.kind = 'captions' or 'subtitles' - // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - - break; - default: - // some other error occurred - - break; - } - }); - } - else { - // disable Vimeo captions. - this.vimeoPlayer.disableTextTrack().then(function() { - // Vimeo captions disabled - }).catch(function(error) { - - }); - } - } - } - }; - - AblePlayer.prototype.initHtml5Player = function () { - // Nothing special to do! - var deferred = new $.Deferred(); - var promise = deferred.promise(); - deferred.resolve(); - return promise; - }; - - // Sets media/track/source attributes; is called whenever player is recreated since $media may have changed. - AblePlayer.prototype.setMediaAttributes = function () { - // Firefox puts videos in tab order; remove. - this.$media.attr('tabindex', -1); - - // Keep native player from displaying captions/subtitles by setting textTrack.mode='disabled' - // https://dev.w3.org/html5/spec-author-view/video.html#text-track-mode - // This should work but historically hasn't been supported in all browsers - // Workaround for non-supporting browsers is to remove default attribute - // We're doing that too in track.js > setupCaptions() - var textTracks = this.$media.get(0).textTracks; - if (textTracks) { - var i = 0; - while (i < textTracks.length) { - textTracks[i].mode = 'disabled'; - i += 1; - } - } - }; - - AblePlayer.prototype.getPlayer = function() { - - // Determine which player to use, if any - // return 'html5', 'youtube', 'vimeo', or null - - var i, sourceType, $newItem; - if (this.youTubeId) { - if (this.mediaType !== 'video') { - // attempting to play a YouTube video using an element other than <video> - return null; - } - else { - return 'youtube'; - } - } - else if (this.vimeoId) { - if (this.mediaType !== 'video') { - // attempting to play a Vimeo video using an element other than <video> - return null; - } - else { - return 'vimeo'; - } - - } - else if (this.testFallback || - ((this.isUserAgent('msie 7') || this.isUserAgent('msie 8') || this.isUserAgent('msie 9')) && this.mediaType === 'video') || - (this.isIOS() && (this.isIOS(4) || this.isIOS(5) || this.isIOS(6))) - ) { - // the user wants to test the fallback player, or - // the user is using an older version of IE or IOS, - // both of which had buggy implementation of HTML5 video - return null; - } - else if (this.media.canPlayType) { - return 'html5'; - } - else { - // Browser does not support the available media file - return null; - } - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.setCookie = function(cookieValue) { - - Cookies.set('Able-Player', JSON.stringify(cookieValue), { - expires: 90, - sameSite: 'strict' - }); - }; - - AblePlayer.prototype.getCookie = function() { - - var defaultCookie = { - preferences: {}, - sign: {}, - transcript: {} - }; - - var cookie; - try { - cookie = JSON.parse(Cookies.get('Able-Player')); - } - catch (err) { - // Original cookie can't be parsed; update to default - this.setCookie(defaultCookie); - cookie = defaultCookie; - } - if (cookie) { - return cookie; - } - else { - return defaultCookie; - } - }; - - AblePlayer.prototype.updateCookie = function( setting ) { - - // called when a particular setting had been updated - // useful for settings updated indepedently of Preferences dialog - // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle() - // setting is any supported preference name (e.g., "prefCaptions") - // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows) - var cookie, $window, windowPos, available, i, prefName; - cookie = this.getCookie(); - - if (setting === 'transcript' || setting === 'sign') { - if (setting === 'transcript') { - $window = this.$transcriptArea; - windowPos = $window.position(); - if (typeof cookie.transcript === 'undefined') { - cookie.transcript = {}; - } - cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.transcript['zindex'] = $window.css('z-index'); - cookie.transcript['top'] = windowPos.top; - cookie.transcript['left'] = windowPos.left; - cookie.transcript['width'] = $window.width(); - cookie.transcript['height'] = $window.height(); - } - else if (setting === 'sign') { - $window = this.$signWindow; - windowPos = $window.position(); - if (typeof cookie.sign === 'undefined') { - cookie.sign = {}; - } - cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.sign['zindex'] = $window.css('z-index'); - cookie.sign['top'] = windowPos.top; - cookie.sign['left'] = windowPos.left; - cookie.sign['width'] = $window.width(); - cookie.sign['height'] = $window.height(); - } - } - else { - available = this.getAvailablePreferences(); - // Rebuild cookie with current cookie values, - // replacing the one value that's been changed - for (i = 0; i < available.length; i++) { - prefName = available[i]['name']; - if (prefName == setting) { - // this is the one that requires an update - cookie.preferences[prefName] = this[prefName]; - } - } - } - // Save updated cookie - this.setCookie(cookie); - }; - - AblePlayer.prototype.getPreferencesGroups = function() { - - // return array of groups in the order in which they will appear - // in the Preferences popup menu - // Human-readable label for each group is defined in translation table - if (this.mediaType === 'video') { - if (this.usingYouTubeCaptions) { - // no transcript is possible - return ['captions','descriptions','keyboard']; - } - else if (this.usingVimeoCaptions) { - // users cannot control caption appearance - // and no transcript is possible - return ['descriptions','keyboard']; - } - else { - return ['captions','descriptions','keyboard','transcript']; - } - } - else if (this.mediaType === 'audio') { - var groups = []; - groups.push('keyboard'); - if (this.lyricsMode) { - groups.push('transcript'); - } - return groups; - } - } - - AblePlayer.prototype.getAvailablePreferences = function() { - - // Return the list of currently available preferences. - // Preferences with no 'label' are set within player, not shown in Prefs dialog - var prefs = []; - - // Modifier keys preferences - prefs.push({ - 'name': 'prefAltKey', // use alt key with shortcuts - 'label': this.tt.prefAltKey, - 'group': 'keyboard', - 'default': 1 - }); - prefs.push({ - 'name': 'prefCtrlKey', // use ctrl key with shortcuts - 'label': this.tt.prefCtrlKey, - 'group': 'keyboard', - 'default': 1 - }); - prefs.push({ - 'name': 'prefShiftKey', - 'label': this.tt.prefShiftKey, - 'group': 'keyboard', - 'default': 0 - }); - - // Transcript preferences - prefs.push({ - 'name': 'prefTranscript', // transcript default state - 'label': null, - 'group': 'transcript', - 'default': 0 // off because turning it on has a certain WOW factor - }); - prefs.push({ - 'name': 'prefHighlight', // highlight transcript as media plays - 'label': this.tt.prefHighlight, - 'group': 'transcript', - 'default': 1 // on because many users can benefit - }); - prefs.push({ - 'name': 'prefAutoScrollTranscript', - 'label': null, - 'group': 'transcript', - 'default': 1 - }); - prefs.push({ - 'name': 'prefTabbable', // tab-enable transcript - 'label': this.tt.prefTabbable, - 'group': 'transcript', - 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page - }); - - if (this.mediaType === 'video') { - - // Caption preferences - - prefs.push({ - 'name': 'prefCaptions', // closed captions default state - 'label': null, - 'group': 'captions', - 'default': 1 - }); - - if (!this.usingYouTubeCaptions) { - - /* // not supported yet - prefs.push({ - 'name': 'prefCaptionsStyle', - 'label': this.tt.prefCaptionsStyle, - 'group': 'captions', - 'default': this.tt.captionsStylePopOn - }); - / - prefs.push({ - 'name': 'prefCaptionsPosition', - 'label': this.tt.prefCaptionsPosition, - 'group': 'captions', - 'default': this.defaultCaptionsPosition - }); - - prefs.push({ - 'name': 'prefCaptionsFont', - 'label': this.tt.prefCaptionsFont, - 'group': 'captions', - 'default': 'sans-serif' - }); - } - - // This is the one option that is supported by YouTube IFrame API - prefs.push({ - 'name': 'prefCaptionsSize', - 'label': this.tt.prefCaptionsSize, - 'group': 'captions', - 'default': '100%' - }); - - if (!this.usingYouTubeCaptions) { - - prefs.push({ - 'name': 'prefCaptionsColor', - 'label': this.tt.prefCaptionsColor, - 'group': 'captions', - 'default': 'white' - }); - prefs.push({ - 'name': 'prefCaptionsBGColor', - 'label': this.tt.prefCaptionsBGColor, - 'group': 'captions', - 'default': 'black' - }); - prefs.push({ - 'name': 'prefCaptionsOpacity', - 'label': this.tt.prefCaptionsOpacity, - 'group': 'captions', - 'default': '100%' - }); - } - - // Description preferences - prefs.push({ - 'name': 'prefDesc', // audio description default state - 'label': null, - 'group': 'descriptions', - 'default': 0 // off because users who don't need it might find it distracting - }); - prefs.push({ - 'name': 'prefDescFormat', // audio description default format (if both 'video' and 'text' are available) - 'label': null, - 'group': 'descriptions', - 'default': 'video' // video (an alternative described version) always wins - }); - prefs.push({ - 'name': 'prefDescVoice', - 'label': this.tt.prefDescVoice, - 'group': 'descriptions', - 'default': null // will be set later, in injectPrefsForm() - }); - prefs.push({ - 'name': 'prefDescPitch', - 'label': this.tt.prefDescPitch, - 'group': 'descriptions', - 'default': 1 // 0 to 2 - }); - prefs.push({ - 'name': 'prefDescRate', - 'label': this.tt.prefDescRate, - 'group': 'descriptions', - 'default': 1 // 0.1 to 10 (1 is normal speech; 2 is fast but decipherable; >2 is super fast) - }); - prefs.push({ - 'name': 'prefDescVolume', - 'label': this.tt.volume, - 'group': 'descriptions', - 'default': 1 // 0 to 1 - }); - prefs.push({ - 'name': 'prefDescPause', // automatically pause when closed description starts - 'label': this.tt.prefDescPause, - 'group': 'descriptions', - 'default': 1 // on as of 4.3.16, because extended description is frequently necessary - }); - prefs.push({ - 'name': 'prefDescVisible', // visibly show closed description (if avilable and used) - 'label': this.tt.prefDescVisible, - 'group': 'descriptions', - 'default': 0 // off as of 4.3.16, to avoid overloading the player with visible features - }); - - // Video preferences without a category (not shown in Preferences dialogs) - prefs.push({ - 'name': 'prefSign', // open sign language window by default if avilable - 'label': null, - 'group': null, - 'default': 0 // off because clicking an icon to see the sign window has a powerful impact - }); - - } - return prefs; - }; - - AblePlayer.prototype.loadCurrentPreferences = function () { - - // Load current/default preferences from cookie into the AblePlayer object. - - var available = this.getAvailablePreferences(); - var cookie = this.getCookie(); - // Copy current cookie values into this object, and fill in any default values. - for (var ii = 0; ii < available.length; ii++) { - var prefName = available[ii]['name']; - var defaultValue = available[ii]['default']; - if (cookie.preferences[prefName] !== undefined) { - this[prefName] = cookie.preferences[prefName]; - } - else { - cookie.preferences[prefName] = defaultValue; - this[prefName] = defaultValue; - } - } - - // Save since we may have added default values. - this.setCookie(cookie); - }; - - AblePlayer.prototype.injectPrefsForm = function (form) { - - // Creates a preferences form and injects it. - // form is one of the supported forms (groups) defined in getPreferencesGroups() - - var thisObj, available, descLangs, - $prefsDiv, formTitle, introText, - $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, - $fieldset, fieldsetClass, fieldsetId, - $descFieldset, $descLegend, $legend, - thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField, - $div1,id1,$radio1,$label1, - $div2,id2,$radio2,$label2, - options,$thisOption,optionValue,optionText,sampleCapsDiv, - changedPref,changedSpan,changedText, - currentDescState, - $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem, - dialog,saveButton,cancelButton; - - thisObj = this; - available = this.getAvailablePreferences(); - - // outer container, will be assigned role="dialog" - $prefsDiv = $('<div>',{ - 'class': 'able-prefs-form ' - }); - var customClass = 'able-prefs-form-' + form; - $prefsDiv.addClass(customClass); - - // add intro - if (form == 'captions') { - formTitle = this.tt.prefTitleCaptions; - introText = this.tt.prefIntroCaptions; - // Uncomment the following line to include a cookie warning - // Not included for now in order to cut down on unnecessary verbiage - // introText += ' ' + this.tt.prefCookieWarning; - $prefsIntro = $('<p>',{ - text: introText - }); - $prefsDiv.append($prefsIntro); - } - else if (form == 'descriptions') { - formTitle = this.tt.prefTitleDescriptions; - var $prefsIntro = $('<p>',{ - text: this.tt.prefIntroDescription1 - }); - var $prefsIntroUL = $('<ul>'); - var $prefsIntroLI1 = $('<li>',{ - text: this.tt.prefDescFormatOption1 - }); - var $prefsIntroLI2 = $('<li>',{ - text: this.tt.prefDescFormatOption2 - }); - - $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2); - if (this.hasOpenDesc && this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2 + ' '; - currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>'; - currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else if (this.hasOpenDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.'; - } - else if (this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else { - currentDescState = this.tt.prefIntroDescriptionNone; - } - $prefsIntroP2 = $('<p>',{ - html: currentDescState - }); - - p3Text = this.tt.prefIntroDescription3; - if (this.hasOpenDesc || this.hasClosedDesc) { - p3Text += ' ' + this.tt.prefIntroDescription4; - } - $prefsIntroP3 = $('<p>',{ - text: p3Text - }); - - $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3); - } - else if (form == 'keyboard') { - formTitle = this.tt.prefTitleKeyboard; - introText = this.tt.prefIntroKeyboard1; - introText += ' ' + this.tt.prefIntroKeyboard2; - introText += ' ' + this.tt.prefIntroKeyboard3; - $prefsIntro = $('<p>',{ - text: introText - }); - $prefsDiv.append($prefsIntro); - } - else if (form == 'transcript') { - formTitle = this.tt.prefTitleTranscript; - introText = this.tt.prefIntroTranscript; - // Uncomment the following line to include a cookie warning - // Not included for now in order to cut down on unnecessary verbiage - // introText += ' ' + this.tt.prefCookieWarning; - $prefsIntro = $('<p>',{ - text: introText - }); - $prefsDiv.append($prefsIntro); - } - - $fieldset = $('<fieldset>'); - fieldsetClass = 'able-prefs-' + form; - fieldsetId = this.mediaId + '-prefs-' + form; - $fieldset.addClass(fieldsetClass).attr('id',fieldsetId); - if (form === 'keyboard') { - $legend = $('<legend>' + this.tt.prefHeadingKeyboard1 + '</legend>'); - $fieldset.append($legend); - } - else if (form === 'descriptions') { - $legend = $('<legend>' + this.tt.prefHeadingTextDescription + '</legend>'); - $fieldset.append($legend); - } - for (i=0; i<available.length; i++) { - - // only include prefs on the current form if they have a label - if ((available[i]['group'] == form) && available[i]['label']) { - - thisPref = available[i]['name']; - thisClass = 'able-' + thisPref; - thisId = this.mediaId + '_' + thisPref; - $thisDiv = $('<div>').addClass(thisClass); - - if (form === 'captions') { - $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); - $thisField = $('<select>',{ - name: thisPref, - id: thisId, - }); - if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') { - // add a change handler that updates the style of the sample caption text - $thisField.change(function() { - changedPref = $(this).attr('name'); - thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref); - }); - } - options = this.getCaptionsOptions(thisPref); - for (j=0; j < options.length; j++) { - if (thisPref === 'prefCaptionsPosition') { - optionValue = options[j]; - if (optionValue === 'overlay') { - optionText = this.tt.captionsPositionOverlay; - } - else if (optionValue === 'below') { - optionValue = options[j]; - optionText = this.tt.captionsPositionBelow; - } - } - else if (thisPref === 'prefCaptionsFont' || thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') { - optionValue = options[j][0]; - optionText = options[j][1]; - } - else if (thisPref === 'prefCaptionsOpacity') { - optionValue = options[j]; - optionText = options[j]; - if (optionValue === '0%') { - optionText += ' (' + this.tt.transparent + ')'; - } - else if (optionValue === '100%') { - optionText += ' (' + this.tt.solid + ')'; - } - } - else { - optionValue = options[j]; - optionText = options[j]; - } - $thisOption = $('<option>',{ - value: optionValue, - text: optionText - }); - if (this[thisPref] === optionValue) { - $thisOption.prop('selected',true); - } - $thisField.append($thisOption); - } - $thisDiv.append($thisLabel,$thisField); - } - else if (form === 'descriptions') { - $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); - if (thisPref === 'prefDescPause' || thisPref === 'prefDescVisible') { - // these preferences are checkboxes - $thisDiv.addClass('able-prefs-checkbox'); - $thisField = $('<input>',{ - type: 'checkbox', - name: thisPref, - id: thisId, - value: 'true' - }); - // check current active value for this preference - if (this[thisPref] === 1) { - $thisField.prop('checked',true); - } - $thisDiv.append($thisField,$thisLabel); - } - else if (this.synth) { - // Only show these options if browser supports speech synthesis - $thisDiv.addClass('able-prefs-select'); - $thisField = $('<select>',{ - name: thisPref, - id: thisId, - }); - if (thisPref === 'prefDescVoice' && this.descVoices) { - for (j=0; j < this.descVoices.length; j++) { - optionValue = this.descVoices[j].name; - optionText = optionValue + ' (' + this.descVoices[j].lang + ')'; - $thisOption = $('<option>',{ - value: optionValue, - text: optionText - }); - if (this[thisPref] == optionValue) { - $thisOption.prop('selected',true); - } - $thisField.append($thisOption); - this.$voiceSelectField = $thisField; - } - } - else { - if (thisPref == 'prefDescPitch') { // 0 to 2 - options = [0,0.5,1,1.5,2]; - } - else if (thisPref == 'prefDescRate') { // 0.1 to 10 - // Tests with a variety of voices on MacOS and Windows - // yielded the following choices that seem reasonable for audio description: - // 0.5 - too slow (exclude this) - // 0.7 - casual - // 0.8 - add this - // 0.9 - add this - // 1 - normal - // 1.1 - add this - // 1.2 - add this - // 1.5 - quick - // 2 - speedy - // 2.5 - fleet - // 3 - fast! (some voices don't get any faster than this - - // Note: if these values are modified, must also modfiy them - // in makePrefsValueReadable() - options = [0.7,0.8,0.9,1,1.1,1.2,1.5,2,2.5,3]; - } - else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 - options = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]; - } - if (typeof options !== 'undefined') { - for (j=0; j < options.length; j++) { - optionValue = options[j]; - optionText = this.makePrefsValueReadable(thisPref,optionValue); - $thisOption = $('<option>',{ - value: optionValue, - text: optionText - }); - if (this[thisPref] == optionValue) { - $thisOption.prop('selected',true); - } - $thisField.append($thisOption); - $thisDiv.append($thisLabel,$thisField); - } - } - } - // add a change handler that announces the sample description text - $thisField.on('change',function() { - thisObj.announceDescriptionText('sample',thisObj.tt.sampleDescriptionText); - }); - $thisDiv.append($thisLabel,$thisField); - } - } - else { // all other fields are checkboxes - $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); - $thisField = $('<input>',{ - type: 'checkbox', - name: thisPref, - id: thisId, - value: 'true' - }); - // check current active value for this preference - if (this[thisPref] === 1) { - $thisField.prop('checked',true); - } - if (form === 'keyboard') { - // add a change handler that updates the list of current keyboard shortcuts - $thisField.on('change',function() { - changedPref = $(this).attr('name'); - if (changedPref === 'prefAltKey') { - changedSpan = '.able-modkey-alt'; - changedText = thisObj.tt.prefAltKey + ' + '; - } - else if (changedPref === 'prefCtrlKey') { - changedSpan = '.able-modkey-ctrl'; - changedText = thisObj.tt.prefCtrlKey + ' + '; - } - else if (changedPref === 'prefShiftKey') { - changedSpan = '.able-modkey-shift'; - changedText = thisObj.tt.prefShiftKey + ' + '; - } - if ($(this).is(':checked')) { - $(changedSpan).text(changedText); - } - else { - $(changedSpan).text(''); - } - }); - } - $thisDiv.append($thisField,$thisLabel); - } - $fieldset.append($thisDiv); - } - } - $prefsDiv.append($fieldset); - - if (form === 'captions') { - // add a sample closed caption div to prefs dialog - // do not show this for YouTube captions, since it's not an accurate reflection - if (this.mediaType === 'video' && !this.usingYouTubeCaptions) { - this.$sampleCapsDiv = $('<div>',{ - 'class': 'able-captions-sample' - }).text(this.tt.sampleCaptionText); - $prefsDiv.append(this.$sampleCapsDiv); - this.stylizeCaptions(this.$sampleCapsDiv); - } - } - else if (form === 'descriptions') { - if (this.synth) { - // add a div with sample audio description text - this.$sampleDescDiv = $('<div>',{ - 'class': 'able-desc-sample' - }).text(this.tt.sampleDescriptionText); - $prefsDiv.append(this.$sampleDescDiv); - } - } - else if (form === 'keyboard') { - // add a current list of keyboard shortcuts - $kbHeading = $('<h2>',{ - text: this.tt.prefHeadingKeyboard2 - }); - $kbList = $('<ul>'); - // create arrays of kbLabels and keys - kbLabels = []; - keys = []; - for (i=0; i<this.controls.length; i++) { - if (this.controls[i] === 'play') { - kbLabels.push(this.tt.play + '/' + this.tt.pause); - keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar); - } - else if (this.controls[i] === 'restart') { - kbLabels.push(this.tt.restart); - keys.push('s'); - } - else if (this.controls[i] === 'previous') { - kbLabels.push(this.tt.prevTrack); - keys.push('b'); // b = back - } - else if (this.controls[i] === 'next') { - kbLabels.push(this.tt.nextTrack); - keys.push('n'); - } - else if (this.controls[i] === 'rewind') { - kbLabels.push(this.tt.rewind); - keys.push('r'); - } - else if (this.controls[i] === 'forward') { - kbLabels.push(this.tt.forward); - keys.push('f'); - } - else if (this.controls[i] === 'volume') { - kbLabels.push(this.tt.volume); - keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9'); - // mute toggle - kbLabels.push(this.tt.mute + '/' + this.tt.unmute); - keys.push('m'); - } - else if (this.controls[i] === 'captions') { - if (this.captions.length > 1) { - // caption button launches a Captions popup menu - kbLabels.push(this.tt.captions); - } - else { - // there is only one caption track - // therefore caption button is a toggle - if (this.captionsOn) { - kbLabels.push(this.tt.hideCaptions); - } - else { - kbLabels.push(this.tt.showCaptions); - } - } - keys.push('c'); - } - else if (this.controls[i] === 'descriptions') { - if (this.descOn) { - kbLabels.push(this.tt.turnOffDescriptions); - } - else { - kbLabels.push(this.tt.turnOnDescriptions); - } - keys.push('d'); - } - else if (this.controls[i] === 'prefs') { - kbLabels.push(this.tt.preferences); - keys.push('e'); - } - else if (this.controls[i] === 'help') { - kbLabels.push(this.tt.help); - keys.push('h'); - } - } - for (i=0; i<keys.length; i++) { - // alt - kbListText = '<span class="able-modkey-alt">'; - if (this.prefAltKey === 1) { - kbListText += this.tt.prefAltKey + ' + '; - } - kbListText += '</span>'; - // ctrl - kbListText += '<span class="able-modkey-ctrl">'; - if (this.prefCtrlKey === 1) { - kbListText += this.tt.prefCtrlKey + ' + '; - } - kbListText += '</span>'; - // shift - kbListText += '<span class="able-modkey-shift">'; - if (this.prefShiftKey === 1) { - kbListText += this.tt.prefShiftKey + ' + '; - } - kbListText += '</span>'; - kbListText += '<span class="able-modkey">' + keys[i] + '</span>'; - kbListText += ' = ' + kbLabels[i]; - $kbListItem = $('<li>',{ - html: kbListText - }); - $kbList.append($kbListItem); - } - // add Escape key - kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>'; - kbListText += ' = ' + this.tt.escapeKeyFunction; - $kbListItem = $('<li>',{ - html: kbListText - }); - $kbList.append($kbListItem); - // put it all together - $prefsDiv.append($kbHeading,$kbList); - } - - // $prefsDiv (dialog) must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers - $('body').append($prefsDiv); - dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em'); - - // Add save and cancel buttons. - $prefsDiv.append('<hr>'); - saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - saveButton.click(function () { - dialog.hide(); - thisObj.savePrefsFromForm(); - }); - cancelButton.click(function () { - dialog.hide(); - thisObj.resetPrefsForm(); - }); - - $prefsDiv.append(saveButton); - $prefsDiv.append(cancelButton); - - // add global reference for future control - if (form === 'captions') { - this.captionPrefsDialog = dialog; - } - else if (form === 'descriptions') { - this.descPrefsDialog = dialog; - } - else if (form === 'keyboard') { - this.keyboardPrefsDialog = dialog; - } - else if (form === 'transcript') { - this.transcriptPrefsDialog = dialog; - } - - // Add click handler for dialog close button - // (button is added in dialog.js) - $('div.able-prefs-form button.modalCloseButton').click(function() { - thisObj.resetPrefsForm(); - }) - // Add handler for escape key - $('div.able-prefs-form').keydown(function(e) { - if (e.which === 27) { // escape - thisObj.resetPrefsForm(); - } - }); - }; - - AblePlayer.prototype.rebuildDescPrefsForm = function () { - - // Called if getBrowserVoices() succeeded after an earlier failure - - var i, optionValue, optionText, $thisOption; - - this.$voiceSelectField = $('#' + this.mediaId + '_prefDescVoice'); - for (i=0; i < this.descVoices.length; i++) { - optionValue = this.descVoices[i].name; - optionText = optionValue + ' (' + this.descVoices[i].lang + ')'; - $thisOption = $('<option>',{ - value: optionValue, - text: optionText - }); - if (this.prefDescVoice == optionValue) { - $thisOption.prop('selected',true); - } - this.$voiceSelectField.append($thisOption); - } - }; - - AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { - - // The values for pitch, rate, and volume (web speech API) - // are strange and inconsistent between variables - // this function returns text that is more readable than the values themselves - - if (pref === 'prefDescPitch') { - if (value === 0) { - return this.tt.prefDescPitch1; - } - else if (value === 0.5) { - return this.tt.prefDescPitch2; - } - else if (value === 1) { - return this.tt.prefDescPitch3; - } - else if (value === 1.5) { - return this.tt.prefDescPitch4; - } - else if (value === 2) { - return this.tt.prefDescPitch5; - } - } - else if (pref === 'prefDescRate') { - // default in the API is 0.1 to 10, where 1 is normal speaking voice - // our custom range offers severa rates close to 1 - // plus a couple of crazy fast ones for sport - // Our options (1-10) or mapped here to 0.5 to 0.14 - if (value === 0.7) { - return 1; - } - else if (value === 0.8) { - return 2; - } - else if (value === 0.9) { - return 3; - } - else if (value === 1) { - return 4; - } - else if (value === 1.1) { - return 5; - } - else if (value === 1.2) { - return 6; - } - else if (value === 1.5) { - return 7; - } - else if (value === 2) { - return 8; - } - else if (value === 2.5) { - return 9; - } - else if (value === 3) { - return 10; - } - } - else if (pref === 'prefDescVolume') { - // values range from 0.1 to 1.0 - return value 10; - } - return value; - }; - - AblePlayer.prototype.resetPrefsForm = function () { - - // Reset preferences form with default values from cookie - // Called when: - // User clicks cancel or close button in Prefs Dialog - // User presses Escape to close Prefs dialog - // User clicks Save in Prefs dialog, & there's more than one player on page - - var thisObj, cookie, available, i, prefName, prefId, thisDiv, thisId; - - thisObj = this; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (i=0; i<available.length; i++) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is a caption-related select box - $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]); - } - else { // all others are checkboxes - if (this[prefName] === 1) { - $('input[name="' + prefName + '"]').prop('checked',true); - } - else { - $('input[name="' + prefName + '"]').prop('checked',false); - } - } - } - // also restore style of sample caption div - this.stylizeCaptions(this.$sampleCapsDiv); - }; - - AblePlayer.prototype.savePrefsFromForm = function () { - - // Return a prefs object constructed from the form. - // called when user saves the Preferences form - // update cookie with new value - var cookie, available, prefName, prefId, numChanges, - numCapChanges, capSizeChanged, capSizeValue, newValue; - - numChanges = 0; - numCapChanges = 0; // changes to caption-style-related preferences - capSizeChanged = false; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (var i=0; i < available.length; i++) { - // only prefs with labels are used in the Prefs form - if (available[i]['label']) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if (prefName == 'prefDescFormat') { - // As of v4.0.10, prefDescFormat is no longer a choice - // this.prefDescFormat = $('input[name="' + prefName + '"]:checked').val(); - this.prefDescFormat = 'video'; - if (this.prefDescFormat !== cookie.preferences['prefDescFormat']) { // user's preference has changed - cookie.preferences['prefDescFormat'] = this.prefDescFormat; - numChanges++; - } - } - else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is one of the caption-related select fields - newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; - // also update global var for this pref (for caption fields, not done elsewhere) - this[prefName] = newValue; - numChanges++; - numCapChanges++; - } - if (prefName === 'prefCaptionsSize') { - capSizeChanged = true; - capSizeValue = newValue; - } - } - else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { - // this is one of the description-related select fields - newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; - // also update global var for this pref - this[prefName] = newValue; - numChanges++; - } - } - else { // all other fields are checkboxes - if ($('input[id="' + prefId + '"]').is(':checked')) { - cookie.preferences[prefName] = 1; - if (this[prefName] === 1) { - // nothing has changed - } - else { - // user has just turned this pref on - this[prefName] = 1; - numChanges++; - } - } - else { // thisPref is not checked - cookie.preferences[prefName] = 0; - if (this[prefName] === 1) { - // user has just turned this pref off - this[prefName] = 0; - numChanges++; - } - else { - // nothing has chaged - } - } - } - } - } - if (numChanges > 0) { - this.setCookie(cookie); - this.showAlert(this.tt.prefSuccess); - } - else { - this.showAlert(this.tt.prefNoChange); - } - if (this.player === 'youtube' && - (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) && - capSizeChanged) { - // update font size of YouTube captions - this.youTubePlayer.setOption('captions','fontSize',this.translatePrefs('size',capSizeValue,'youtube')); - } - if (AblePlayerInstances.length > 1) { - // there are multiple players on this page. - // update prefs for ALL of them - for (var i=0; i<AblePlayerInstances.length; i++) { - AblePlayerInstances[i].updatePrefs(); - AblePlayerInstances[i].geteferences(); - AblePlayerInstances[i].resetPrefsForm(); - if (numCapChanges > 0) { - AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$captionsDiv); - // also apply same changes to descriptions, if present - if (typeof AblePlayerInstances[i].$descDiv !== 'undefined') { - AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$descDiv); - } - } - } - } - else { - // there is only one player - this.updatePrefs(); - if (numCapChanges > 0) { - this.stylizeCaptions(this.$captionsDiv); - // also apply same changes to descriptions, if present - if (typeof this.$descDiv !== 'undefined') { - this.stylizeCaptions(this.$descDiv); - } - } - } - } - - AblePlayer.prototype.updatePrefs = function () { - - // Update player based on current prefs. Safe to call multiple times. - - if (this.$transcriptDiv) { - // tabbable transcript - if (this.prefTabbable === 1) { - this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - else { - this.$transcriptDiv.find('span.able-transcript-seekpoint').removeAttr('tabindex'); - } - - // transcript highlights - if (this.prefHighlight === 0) { - // user doesn't want highlights; remove any existing highlights - this.$transcriptDiv.find('span').removeClass('able-highlight'); - } - } - - // Re-initialize caption and description in case relevant settings have changed - this.updateCaption(); - this.refreshingDesc = true; - this.initDescription(); - }; - - AblePlayer.prototype.usingModifierKeys = function(e) { - - // return true if user is holding down required modifier keys - if ((this.prefAltKey === 1) && !e.altKey) { - return false; - } - if ((this.prefCtrlKey === 1) && !e.ctrlKey) { - return false; - } - if ((this.prefShiftKey === 1) && !e.shiftKey) { - return false; - } - return true; - }; - -})(jQuery); - -(function ($) { - // See section 4.1 of dev.w3.org/html5/webvtt for format details. - AblePlayer.prototype.parseWebVTT = function(srcFile,text) { - -// var deferred = new $.Deferred(); -// var promise = deferred.promise(); - - // Normalize line ends to \n. - text = text.replace(/(\r\n|\n|\r)/g,'\n'); - - var parserState = { - src: srcFile, - text: text, - error: null, - metadata: {}, - cues: [], - line: 1, - column: 1 - }; - - try { - act(parserState, parseFileBody); - } - catch (err) { - var errString = 'Invalid WebVTT file: ' + parserState.src + '\n'; - errString += 'Line: ' + parserState.line + ', '; - errString += 'Column: ' + parserState.column + '\n'; - errString += err; - if (console.warn) { - - } - else if (console.log) { - - } - } - return parserState; - } - - function actList(state, list) { - var results = []; - for (var ii = 0; ii < list.length; ii++) { - results.push(act(state, list[ii])); - } - return results; - } - - // Applies the action and checks for errors. - function act(state, action) { - var val = action(state); - if (state.error !== null) { - throw state.error; - } - return val; - } - - function updatePosition(state, cutText) { - for (var ii = 0; ii < cutText.length; ii++) { - if (cutText[ii] === '\n') { - state.column = 1; - state.line += 1; - } - else { - state.column += 1; - } - } - } - - function cut(state, length) { - var returnText = state.text.substring(0, length); - updatePosition(state, returnText); - state.text = state.text.substring(length); - return returnText; - } - - function cutLine(state, length) { - var nextEOL = state.text.indexOf('\n'); - var returnText; - if (nextEOL === -1) { - returnText = state.text; - updatePosition(state, returnText); - state.text = ''; - } - else { - returnText = state.text.substring(0, nextEOL); - updatePosition(state, returnText + '\n'); - state.text = state.text.substring(nextEOL + 1); - } - return returnText; - } - - function peekLine(state) { - var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - return state.text; - } - else { - return state.text.substring(0, nextEOL); - } - } - - function parseFileBody(state) { - actList(state, [ - eatOptionalBOM, - eatSignature]); - var c = state.text[0]; - if (c === ' ' || c === '\t' || c === '\n') { - actList(state, [ - eatUntilEOLInclusive, - parseMetadataHeaders, - eatAtLeast1EmptyLines, - parseCuesAndComments]); - } - else { - state.error = "WEBVTT signature not followed by whitespace."; - } - } - - // Parses all metadata headers until a cue is discovered. - function parseMetadataHeaders(state) { - while (true) { - var nextLine = peekLine(state); - if (nextLine.indexOf('-->') !== -1) { - return; - } - else if (nextLine.length === 0) { - return; - } - else { - var keyValue = act(state, getMetadataKeyValue); - state.metadata[keyValue[0]] = keyValue[1]; - act(state, eatUntilEOLInclusive); - } - } - } - - function nextSpaceOrNewline(s) { - var possible = []; - var spaceIndex = s.indexOf(' '); - if (spaceIndex >= 0) { - possible.push(spaceIndex); - } - var tabIndex = s.indexOf('\t'); - if (tabIndex >= 0) { - possible.push(tabIndex); - } - var lineIndex = s.indexOf('\n'); - if (lineIndex >= 0) { - possible.push(lineIndex); - } - - return Math.min.apply(null, possible); - } - - function getMetadataKeyValue(state) { - var next = state.text.indexOf('\n'); - var pair = cut(state, next); - var colon = pair.indexOf(':'); - if (colon === -1) { - state.error = 'Missing colon.'; - return; - } - else { - var pairName = pair.substring(0, colon); - var pairValue = pair.substring(colon + 1); - return [pairName, pairValue]; - } - } - - function getSettingsKeyValue(state) { - var next = nextSpaceOrNewline(state.text); - var pair = cut(state, next); - var colon = pair.indexOf(':'); - if (colon === -1) { - state.error = 'Missing colon.'; - return; - } - else { - var pairName = pair.substring(0, colon); - var pairValue = pair.substring(colon + 1); - return [pairName, pairValue]; - } - } - - function parseCuesAndComments(state) { - while (true) { - var nextLine = peekLine(state); - // If NOTE is not on a line all its own, it must be followed by a space or tab. - if (nextLine.indexOf('NOTE') === 0 && ((nextLine.length === 4) || (nextLine[4] === ' ') || (nextLine[4] === '\t'))) { - actList(state, [eatComment, eatEmptyLines]); - } - else if ($.trim(nextLine).length === 0 && state.text.length > 0) { - act(state, eatEmptyLines); - } - else if ($.trim(nextLine).length > 0) { - act(state, parseCue); - } - else { - // Everythings parsed! - return; - } - } - } - - function parseCue(state) { - - var nextLine = peekLine(state); - var cueId; - var errString; - - if(nextLine.indexOf('-->') === -1) { - cueId = cutLine(state); - nextLine = peekLine(state); - if(nextLine.indexOf('-->') === -1) { - errString = 'Invalid WebVTT file: ' + state.src + '\n'; - errString += 'Line: ' + state.line + ', '; - errString += 'Column: ' + state.column + '\n'; - errString += 'Expected cue timing for cueId \''+cueId+'\' but found: ' + nextLine + '\n'; - if (console.warn) { - - } - else if (console.log) { - - } - return; // Return leaving line for parseCuesAndComments to handle - } - } - - var cueTimings = actList(state, [getTiming, - eatAtLeast1SpacesOrTabs, - eatArrow, - eatAtLeast1SpacesOrTabs, - getTiming]); - - var startTime = cueTimings[0]; - var endTime = cueTimings[4]; - if (startTime >= endTime) { - state.error = 'Start time is not sooner than end time.'; - return; - } - - act(state, eatSpacesOrTabs); - var cueSettings = act(state, getCueSettings); - // Cut the newline. - cut(state, 1); - var components = act(state, getCuePayload); - - if (typeof cueId === 'undefined') { - cueId = state.cues.length + 1; - } - state.cues.push({ - id: cueId, - start: startTime, - end: endTime, - settings: cueSettings, - components: components - }); - } - - function getCueSettings(state) { - var cueSettings = {}; - while (state.text.length > 0 && state.text[0] !== '\n') { - var keyValue = act(state, getSettingsKeyValue); - cueSettings[keyValue[0]] = keyValue[1]; - act(state, eatSpacesOrTabs); - } - return cueSettings; - } - - function getCuePayload(state) { - // Parser based on instructions in draft. - var result = {type: 'internal', tagName: '', value: '', classes: [], annotation: '', parent: null, children: [], language: ''}; - var current = result; - var languageStack = []; - while (state.text.length > 0) { - var nextLine = peekLine(state); - if (nextLine.indexOf('-->') !== -1 || /^\s$/.test(nextLine)) { - break; // Handle empty cues - } - // Have to separately detect double-lines ending cue due to our non-standard parsing. - // TODO: Redo outer algorithm to conform to W3 spec? - if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { - cut(state, 2); - break; - } - - var token = getCueToken(state); - // We'll use the tokens themselves as objects where possible. - if (token.type === 'string') { - current.children.push(token); - } - else if (token.type === 'startTag') { - token.type = token.tagName; - // Define token.parent; added by Terrill to fix bug end 'endTag' loop - token.parent = current; - if ($.inArray(token.tagName, ['i', 'b', 'u', 'ruby']) !== -1) { - if (languageStack.length > 0) { - current.language = languageStack[languageStack.length - 1]; - } - current.children.push(token); - current = token; - } - else if (token.tagName === 'rt' && current.tagName === 'ruby') { - if (languageStack.length > 0) { - current.language = languageStack[languageStack.length - 1]; - } - current.children.push(token); - current = token; - } - else if (token.tagName === 'c') { - token.value = token.annotation; - if (languageStack.length > 0) { - current.language = languageStack[languageStack.length - 1]; - } - current.children.push(token); - current = token; - } - else if (token.tagName === 'v') { - token.value = token.annotation; - if (languageStack.length > 0) { - current.language = languageStack[languageStack.length - 1]; - } - current.children.push(token); - current = token; - } - else if (token.tagName === 'lang') { - languageStack.push(token.annotation); - if (languageStack.length > 0) { - current.language = languageStack[languageStack.length - 1]; - } - current.children.push(token); - current = token; - } - } - else if (token.type === 'endTag') { - if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) { - // NOTE from Terrill: This was resulting in an error because current.parent was undefined - // Fixed (I think) by assigning current token to token.parent in 'startTag' loop - current = current.parent; - } - else if (token.tagName === 'lang' && current.type === 'lang') { - current = current.parent; - languageStack.pop(); - } - else if (token.tagName === 'ruby' && current.type === 'rt') { - current = current.parent.parent; - } - } - else if (token.type === 'timestampTag') { - var tempState = { - text: token.value, - error: null, - metadata: {}, - cues: [], - line: 1, - column: 1 - }; - try { - var timing = act(tempState, getTiming); - if (tempState.text.length === 0) { - token.value = timing; - current.push(token); - } - } - catch (err) { - } - } - } - return result; - } - - // Gets a single cue token; uses the method in the w3 specification. - function getCueToken(state) { - var tokenState = 'data'; - var result = []; - var buffer = ''; - var token = {type: '', tagName: '', value: '', classes: [], annotation: '', children: []} - - while (true) { - var c; - // Double newlines indicate end of token. - if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { - c = '\u0004'; - } - else if (state.text.length > 0) { - c = state.text[0]; - } - else { - // End of file. - c = '\u0004'; - } - if (tokenState === 'data') { - if (c === '&') { - buffer = '&'; - tokenState = 'escape'; - } - else if (c === '<') { - if (result.length === 0) { - tokenState = 'tag'; - } - else { - token.type = 'string'; - token.value = result.join(''); - return token; - } - } - else if (c === '\u0004') { - return {type: 'string', value: result.join('')}; - } - else { - result.push(c); - } - } - else if (tokenState === 'escape') { - if (c === '&') { - result.push(buffer); - buffer = '&'; - } - else if (c.match(/[0-9a-z]/)) { - buffer += c; - } - else if (c === ';') { - if (buffer === '&') { - result.push('&'); - } - else if (buffer === '<') { - result.push('<'); - } - else if (buffer === '>') { - result.push('>'); - } - else if (buffer === '&lrm') { - result.push('\u200e'); - } - else if (buffer === '&rlm') { - result.push('\u200f'); - } - else if (buffer === ' ') { - result.push('\u00a0'); - } - else { - result.push(buffer); - result.push(';'); - } - tokenState = 'data'; - } - else if (c === '<' || c === '\u0004') { - result.push(buffer); - token.type = 'string'; - token.value = result.join(''); - return token; - } - else if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { // Handle unescaped & chars as strings - result.push(buffer); - token.type = 'string'; - token.value = result.join(''); - return token; - } - else { - result.push(buffer); - tokenState = 'data'; - } - } - else if (tokenState === 'tag') { - if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { - tokenState = 'startTagAnnotation'; - } - else if (c === '.') { - tokenState = 'startTagClass'; - } - else if (c === '/') { - tokenState = 'endTag'; - } - else if (c.match('[0-9]')) { - tokenState = 'timestampTag'; - result.push(c); - } - else if (c === '>') { - cut(state, 1); - break; - } - else if (c === '\u0004') { - token.tagName = ''; - token.type = 'startTag'; - return token; - } - else { - result.push(c); - tokenState = 'startTag'; - } - } - else if (tokenState === 'startTag') { - if (c === '\t' || c === '\u000c' || c === ' ') { - tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { - buffer = c; - tokenState = 'startTagAnnotation'; - } - else if (c === '.') { - tokenState = 'startTagClass'; - } - else if (c === '>') { - cut(state, 1); - token.tagName = result.join(''); - token.type = 'startTag'; - return token; - } - else if (c === '\u0004') { - token.tagName = result.join(''); - token.type = 'startTag'; - return token; - } - else { - result.push(c); - } - } - else if (tokenState === 'startTagClass') { - if (c === '\t' || c === '\u000c' || c === ' ') { - token.classes.push(buffer); - buffer = ''; - tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { - token.classes.push(buffer); - buffer = c; - tokenState = 'startTagAnnotation'; - } - else if (c === '.') { - token.classes.push(buffer); - buffer = ""; - } - else if (c === '>') { - cut(state, 1); - token.classes.push(buffer); - token.type = 'startTag'; - token.tagName = result.join(''); - return token; - } - else if (c === '\u0004') { - token.classes.push(buffer); - token.type = 'startTag'; - token.tagName = result.join(''); - return token; - } - else { - buffer += 'c'; - } - } - else if (tokenState === 'startTagAnnotation') { - if (c === '>') { - cut(state, 1); - buffer = $.trim(buffer).replace(/ +/, ' '); - token.type = 'startTag'; - token.tagName = result.join(''); - token.annotation = buffer; - return token; - } - else if (c === '\u0004') { - buffer = $.trim(buffer).replace(/ +/, ' '); - token.type = 'startTag'; - token.tagName = result.join(''); - token.annotation = buffer; - return token; - } - else { - buffer += c; - } - } - else if (tokenState === 'endTag') { - if (c === '>') { - cut(state, 1); - token.type = 'endTag'; - token.tagName = result.join(''); - return token; - } - else if (c === '\u0004') { - token.type = 'endTag'; - token.tagName = result.join(''); - return token; - } - else { - result.push(c); - } - } - else if (tokenState === 'timestampTag') { - if (c === '>') { - cut(state, 1); - token.type = 'timestampTag'; - token.name = result.join(''); - return token; - } - else if (c === '\u0004') { - token.type = 'timestampTag'; - token.name = result.join(''); - return token; - } - else { - result.push(c); - } - } - else { - throw 'Unknown tokenState ' + tokenState; - } - - cut(state, 1); - } - } - - function eatComment(state) { - // Cut the NOTE line. - var noteLine = cutLine(state); - if (noteLine.indexOf('-->') !== -1) { - state.error = 'Invalid syntax: --> in NOTE line.'; - return; - } - while (true) { - var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { - // End of comment. - return; - } - else if (nextLine.indexOf('-->') !== -1) { - state.error = 'Invalid syntax: --> in comment.'; - return; - } - else { - cutLine(state); - } - } - } - - // Initial byte order mark. - function eatOptionalBOM(state) { - if (state.text[0] === '\ufeff') { - cut(state, 1); - } - - } - - // "WEBVTT" string. - function eatSignature(state) { - if (state.text.substring(0,6) === 'WEBVTT') { - cut(state, 6); - } - else { - state.error = 'Invalid signature.'; - } - } - - function eatArrow(state) { - if (state.text.length < 3 || state.text.substring(0,3) !== '-->') { - state.error = 'Missing -->'; - } - else { - cut(state, 3); - } - } - - function eatSingleSpaceOrTab(state) { - if (state.text[0] === '\t' || state.text[0] === ' ') { - cut(state, 1); - } - else { - state.error = 'Missing space.'; - } - } - - function eatSpacesOrTabs(state) { - while (state.text[0] === '\t' || state.text[0] === ' ') { - cut(state, 1); - } - } - - function eatAtLeast1SpacesOrTabs(state) { - var numEaten = 0; - while (state.text[0] === '\t' || state.text[0] === ' ') { - cut(state, 1); - numEaten += 1; - } - if (numEaten === 0) { - state.error = 'Missing space.'; - } - } - - function eatUntilEOLInclusive(state) { - var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - state.error = 'Missing EOL.'; - } - else { - cut(state, nextEOL + 1); - } - } - - function eatEmptyLines(state) { - while (state.text.length > 0) { - var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { - cutLine(state); - } - else { - break; - } - } - } - - // Eats empty lines, but throws an error if there's not at least one. - function eatAtLeast1EmptyLines(state) { - var linesEaten = 0; - while (state.text.length > 0) { - var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { - cutLine(state); - linesEaten += 1; - } - else { - break; - } - } - if (linesEaten === 0) { - state.error = 'Missing empty line.'; - } - } - - function getTiming(state) { - var nextSpace = nextSpaceOrNewline(state.text); - if (nextSpace === -1) { - state.error('Missing timing.'); - return; - } - var timestamp = cut(state, nextSpace); - - var results = /((\d\d):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(timestamp); - - if (!results) { - state.error = 'Unable to parse timestamp'; - return; - } - var time = 0; - var hours = results[2]; - var minutes = results[4]; - - if (minutes) { - if (parseInt(minutes, 10) > 59) { - state.error = 'Invalid minute range'; - return; - } - if (hours) { - time += 3600 parseInt(hours, 10); - } - time += 60 * parseInt(minutes, 10); - var seconds = results[5]; - if (parseInt(seconds, 10) > 59) { - state.error = 'Invalid second range'; - return; - } - - time += parseInt(seconds, 10); - time += parseInt(results[6], 10) / 1000; - } - else { - time += parseInt(results[7], 10); - time += parseInt(results[8], 10) / 1000; - } - - return time; - } -})(jQuery); - -(function ($) { - - AblePlayer.prototype.injectPlayerCode = function() { - - // create and inject surrounding HTML structure - // If IOS: - // If video: - // IOS does not support any of the player's functionality - // - everything plays in its own player - // Therefore, AblePlayer is not loaded & all functionality is disabled - // (this all determined. If this is IOS && video, this function is never called) - // If audio: - // HTML cannot be injected as a parent of the <audio> element - // It is therefore injected after the <audio> element - // This is only a problem in IOS 6 and earlier, - // & is a known bug, fixed in IOS 7 - - var thisObj, vidcapContainer, prefsGroups, i; - thisObj = this; - - // create three wrappers and wrap them around the media element. From inner to outer: - // $mediaContainer - contains the original media element - // $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions) - // $ableWrapper - contains additional widgets (e.g., transcript window, sign window) - this.$mediaContainer = this.$media.wrap('<div class="able-media-container"></div>').parent(); - this.$ableDiv = this.$mediaContainer.wrap('<div class="able"></div>').parent(); - this.$ableWrapper = this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(); - this.$ableWrapper.addClass('able-skin-' + this.skin); - - // NOTE: Excluding the following from youtube was resulting in a player - // that exceeds the width of the YouTube video - // Unclear why it was originally excluded; commented out in 3.1.20 - // if (this.player !== 'youtube') { - this.$ableWrapper.css({ - 'max-width': this.playerMaxWidth + 'px' - }); - - this.injectOffscreenHeading(); - - if (this.mediaType === 'video') { - // youtube adds its own big play button - // don't show ours unless video has a poster attribute - // (which obstructs the YouTube poster & big play button) - if (this.iconType != 'image' && (this.player !== 'youtube' || this.hasPoster)) { - this.injectBigPlayButton(); - } - - // add container that captions or description will be appended to - // Note: new Jquery object must be assigned _after_ wrap, hence the temp vidcapContainer variable - vidcapContainer = $('<div>',{ - 'class' : 'able-vidcap-container' - }); - this.$vidcapContainer = this.$mediaContainer.wrap(vidcapContainer).parent(); - } - this.injectPlayerControlArea(); - this.injectTextDescriptionArea(); - this.injectAlert(); - this.injectPlaylist(); - }; - - AblePlayer.prototype.injectOffscreenHeading = function () { - // Inject an offscreen heading to the media container. - // If heading hasn't already been manually defined via data-heading-level, - // automatically assign a level that is one level deeper than the closest parent heading - // as determined by getNextHeadingLevel() - var headingType; - if (this.playerHeadingLevel == '0') { - // do NOT inject a heading (at author's request) - } - else { - if (typeof this.playerHeadingLevel === 'undefined') { - this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); // returns in integer 1-6 - } - headingType = 'h' + this.playerHeadingLevel.toString(); - this.$headingDiv = $('<' + headingType + '>'); - this.$ableDiv.prepend(this.$headingDiv); - this.$headingDiv.addClass('able-offscreen'); - this.$headingDiv.text(this.tt.playerHeading); - } - }; - - AblePlayer.prototype.injectBigPlayButton = function () { - - this.$bigPlayButton = $('<button>', { - 'class': 'able-big-play-button icon-play', - 'aria-hidden': true, - 'tabindex': -1 - }); - - var thisObj = this; - this.$bigPlayButton.click(function () { - thisObj.handlePlay(); - }); - - this.$mediaContainer.append(this.$bigPlayButton); - }; - - AblePlayer.prototype.injectPlayerControlArea = function () { - - this.$playerDiv = $('<div>', { - 'class' : 'able-player', - 'role' : 'region', - 'aria-label' : this.mediaType + ' player' - }); - this.$playerDiv.addClass('able-'+this.mediaType); - - // The default skin depends a bit on a Now Playing div - // so go ahead and add one - // However, it's only populated if this.showNowPlaying = true - this.$nowPlayingDiv = $('<div>',{ - 'class' : 'able-now-playing', - 'aria-live' : 'assertive', - 'aria-atomic': 'true' - }); - - this.$controllerDiv = $('<div>',{ - 'class' : 'able-controller' - }); - this.$controllerDiv.addClass('able-' + this.iconColor + '-controls'); - - this.$statusBarDiv = $('<div>',{ - 'class' : 'able-status-bar' - }); - this.$timer = $('<span>',{ - 'class' : 'able-timer' - }); - this.$elapsedTimeContainer = $('<span>',{ - 'class': 'able-elapsedTime', - text: '0:00' - }); - this.$durationContainer = $('<span>',{ - 'class': 'able-duration' - }); - this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer); - - this.$speed = $('<span>',{ - 'class' : 'able-speed', - 'aria-live' : 'assertive' - }).text(this.tt.speed + ': 1x'); - - this.$status = $('<span>',{ - 'class' : 'able-status', - 'aria-live' : 'polite' - }); - - // Put everything together. - this.$statusBarDiv.append(this.$timer, this.$speed, this.$status); - this.$playerDiv.append(this.$nowPlayingDiv, this.$controllerDiv, this.$statusBarDiv); - this.$ableDiv.append(this.$playerDiv); - }; - - AblePlayer.prototype.injectTextDescriptionArea = function () { - - // create a div for exposing description - // description will be exposed via role="alert" & announced by screen readers - this.$descDiv = $('<div>',{ - 'class': 'able-descriptions' - }); - if (this.exposeTextDescriptions) { - this.$descDiv.attr({ - 'aria-live': 'assertive', - 'aria-atomic': 'true' - }); - } - // Start off with description hidden. - // It will be exposed conditionally within description.js > initDescription() - this.$descDiv.hide(); - this.$ableDiv.append(this.$descDiv); - }; - - AblePlayer.prototype.getDefaultWidth = function(which) { - - // return default width of resizable elements - // these values are somewhat arbitrary, but seem to result in good usability - // if users disagree, they can resize (and resposition) them - if (which === 'transcript') { - return 450; - } - else if (which === 'sign') { - return 400; - } - }; - - AblePlayer.prototype.positionDraggableWindow = function (which, width) { - - // which is either 'transcript' or 'sign' - - var cookie, cookiePos, $window, dragged, windowPos, currentWindowPos, firstTime, zIndex; - - cookie = this.getCookie(); - if (which === 'transcript') { - $window = this.$transcriptArea; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.transcript; - } - } - else if (which === 'sign') { - $window = this.$signWindow; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.sign; - } - } - if (typeof cookiePos !== 'undefined' && !($.isEmptyObject(cookiePos))) { - // position window using stored values from cookie - $window.css({ - 'position': cookiePos['position'], - 'width': cookiePos['width'], - 'z-index': cookiePos['zindex'] - }); - if (cookiePos['position'] === 'absolute') { - $window.css({ - 'top': cookiePos['top'], - 'left': cookiePos['left'] - }); - } - // since cookie is not page-specific, z-index needs may vary across different pages - this.updateZIndex(which); - } - else { - // position window using default values - windowPos = this.getOptimumPosition(which, width); - if (typeof width === 'undefined') { - width = this.getDefaultWidth(which); - } - $window.css({ - 'position': windowPos[0], - 'width': width, - 'z-index': windowPos[3] - }); - if (windowPos[0] === 'absolute') { - $window.css({ - 'top': windowPos[1] + 'px', - 'left': windowPos[2] + 'px', - }); - } - } - }; - - AblePlayer.prototype.getOptimumPosition = function (targetWindow, targetWidth) { - - // returns optimum position for targetWindow, as an array with the following structure: - // 0 - CSS position ('absolute' or 'relative') - // 1 - top - // 2 - left - // 3 - zindex (if not default) - // targetWindow is either 'transcript' or 'sign' - // if there is room to the right of the player, position element there - // else if there is room the left of the player, position element there - // else position element beneath player - - var gap, position, ableWidth, ableHeight, ableOffset, ableTop, ableLeft, - windowWidth, otherWindowWidth, zIndex; - - if (typeof targetWidth === 'undefined') { - targetWidth = this.getDefaultWidth(targetWindow); - } - - gap = 5; // number of pixels to preserve between Able Player objects - - position = []; // position, top, left - - ableWidth = this.$ableDiv.width(); - ableHeight = this.$ableDiv.height(); - ableOffset = this.$ableDiv.offset(); - ableTop = ableOffset.top; - ableLeft = ableOffset.left; - windowWidth = $(window).width(); - otherWindowWidth = 0; // width of other visiable draggable windows will be added to this - - if (targetWindow === 'transcript') { - if (typeof this.$signWindow !== 'undefined') { - if (this.$signWindow.is(':visible')) { - otherWindowWidth = this.$signWindow.width() + gap; - } - } - } - else if (targetWindow === 'sign') { - if (typeof this.$transcriptArea !== 'undefined') { - if (this.$transcriptArea.is(':visible')) { - otherWindowWidth = this.$transcriptArea.width() + gap; - } - } - } - if (targetWidth < (windowWidth - (ableLeft + ableWidth + gap + otherWindowWidth))) { - // there's room to the left of $ableDiv - position[0] = 'absolute'; - position[1] = 0; - position[2] = ableWidth + otherWindowWidth + gap; - } - else if (targetWidth + gap < ableLeft) { - // there's room to the right of $ableDiv - position[0] = 'absolute'; - position[1] = 0; - position[2] = ableLeft - targetWidth - gap; - } - else { - // position element below $ableDiv - position[0] = 'relative'; - // no need to define top, left, or z-index - } - return position; - }; - - AblePlayer.prototype.injectPoster = function ($element, context) { - - // get poster attribute from media element and append that as an img to $element - // context is either 'youtube' or 'fallback' - var poster, width, height; - - if (context === 'youtube') { - if (typeof this.ytWidth !== 'undefined') { - width = this.ytWidth; - height = this.ytHeight; - } - else if (typeof this.playerMaxWidth !== 'undefined') { - width = this.playerMaxWidth; - height = this.playerMaxHeight; - } - else if (typeof this.playerWidth !== 'undefined') { - width = this.playerWidth; - height = this.playerHeight; - } - } - else if (context === 'fallback') { - width = '100%'; - height = 'auto'; - } - - if (this.hasPoster) { - poster = this.$media.attr('poster'); - this.$posterImg = $('<img>',{ - 'class': 'able-poster', - 'src' : poster, - 'alt' : "", - 'role': "presentation", - 'width': width, - 'height': height - }); - $element.append(this.$posterImg); - } - }; - - AblePlayer.prototype.injectAlert = function () { - - // inject two alerts, one visible for all users and one for screen reader users only - - var top; - - this.$alertBox = $('<div role="alert"></div>'); - this.$alertBox.addClass('able-alert'); - this.$alertBox.hide(); - this.$alertBox.appendTo(this.$ableDiv); - if (this.mediaType == 'audio') { - top = '-10'; - } - else { - // position just below the vertical center of the mediaContainer - // hopefully above captions, but not too far from the controller bar - top = Math.round(this.$mediaContainer.height() / 3) * 2; - } - this.$alertBox.css({ - top: top + 'px' - }); - - this.$srAlertBox = $('<div role="alert"></div>'); - this.$srAlertBox.addClass('able-screenreader-alert'); - this.$srAlertBox.appendTo(this.$ableDiv); - }; - - AblePlayer.prototype.injectPlaylist = function () { - - if (this.playlistEmbed === true) { - // move playlist into player, immediately before statusBarDiv - var playlistClone = this.$playlistDom.clone(); - playlistClone.insertBefore(this.$statusBarDiv); - // Update to the new playlist copy. - this.$playlist = playlistClone.find('li'); - } - }; - - AblePlayer.prototype.createPopup = function (which, tracks) { - - // Create popup menu and append to player - // 'which' parameter is either 'captions', 'chapters', 'prefs', 'transcript-window' or 'sign-window' - // 'tracks', if provided, is a list of tracks to be used as menu items - - var thisObj, $menu, prefCats, i, $menuItem, prefCat, whichPref, - hasDefault, track, windowOptions, whichPref, whichMenu, - $thisItem, $prevItem, $nextItem; - - thisObj = this; - - $menu = $('<ul>',{ - 'id': this.mediaId + '-' + which + '-menu', - 'class': 'able-popup', - 'role': 'menu' - }).hide(); - - if (which === 'captions') { - $menu.addClass('able-popup-captions'); - } - - // Populate menu with menu items - if (which === 'prefs') { - if (this.prefCats.length > 1) { - for (i = 0; i < this.prefCats.length; i++) { - $menuItem = $('<li></li>',{ - 'role': 'menuitem', - 'tabindex': '-1' - }); - prefCat = this.prefCats[i]; - if (prefCat === 'captions') { - $menuItem.text(this.tt.prefMenuCaptions); - } - else if (prefCat === 'descriptions') { - $menuItem.text(this.tt.prefMenuDescriptions); - } - else if (prefCat === 'keyboard') { - $menuItem.text(this.tt.prefMenuKeyboard); - } - else if (prefCat === 'transcript') { - $menuItem.text(this.tt.prefMenuTranscript); - } - $menuItem.on('click',function() { - whichPref = $(this).text(); - thisObj.showingPrefsDialog = true; - thisObj.setFullscreen(false); - if (whichPref === thisObj.tt.prefMenuCaptions) { - thisObj.captionPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuDescriptions) { - thisObj.descPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuKeyboard) { - thisObj.keyboardPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuTranscript) { - thisObj.transcriptPrefsDialog.show(); - } - thisObj.closePopups(); - thisObj.showingPrefsDialog = false; - }); - $menu.append($menuItem); - } - this.$prefsButton.attr('data-prefs-popup','menu'); - } - else if (this.prefCats.length == 1) { - // only 1 category, so don't create a popup menu. - // Instead, open dialog directly when user clicks Prefs button - this.$prefsButton.attr('data-prefs-popup',this.prefCats[0]); - } - } - else if (which === 'captions' || which === 'chapters') { - hasDefault = false; - for (i = 0; i < tracks.length; i++) { - track = tracks[i]; - $menuItem = $('<li></li>',{ - 'role': 'menuitemradio', - 'tabindex': '-1', - 'lang': track.language - }); - if (track.def && this.prefCaptions == 1) { - $menuItem.attr('aria-checked','true'); - hasDefault = true; - } - else { - $menuItem.attr('aria-checked','false'); - } - // Get a label using track data - if (which == 'captions') { - $menuItem.text(track.label); - $menuItem.on('click',this.getCaptionClickFunction(track)); - } - else if (which == 'chapters') { - $menuItem.text(this.flattenCueForCaption(track) + ' - ' + this.formatSecondsAsColonTime(track.start)); - $menuItem.on('click',this.getChapterClickFunction(track.start)); - } - $menu.append($menuItem); - } - if (which === 'captions') { - // add a 'captions off' menu item - $menuItem = $('<li></li>',{ - 'role': 'menuitemradio', - 'tabindex': '-1', - }).text(this.tt.captionsOff); - if (this.prefCaptions === 0) { - $menuItem.attr('aria-checked','true'); - hasDefault = true; - } - else { - $menuItem.attr('aria-checked','false'); - } - $menuItem.on('click',this.getCaptionOffFunction()); - $menu.append($menuItem); - } - } - else if (which === 'transcript-window' || which === 'sign-window') { - windowOptions = []; - windowOptions.push({ - 'name': 'move', - 'label': this.tt.windowMove - }); - windowOptions.push({ - 'name': 'resize', - 'label': this.tt.windowResize - }); - windowOptions.push({ - 'name': 'close', - 'label': this.tt.windowClose - }); - for (i = 0; i < windowOptions.length; i++) { - $menuItem = $('<li></li>',{ - 'role': 'menuitem', - 'tabindex': '-1', - 'data-choice': windowOptions[i].name - }); - $menuItem.text(windowOptions[i].label); - $menuItem.on('click mousedown',function(e) { - e.stopPropagation(); - if (typeof e.button !== 'undefined' && e.button !== 0) { - // this was a mouse click (if click is triggered by keyboard, e.button is undefined) - // and the button was not a left click (left click = 0) - // therefore, ignore this click - return false; - } - if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { - thisObj.windowMenuClickRegistered = true; - thisObj.handleMenuChoice(which.substr(0, which.indexOf('-')), $(this).attr('data-choice'), e); - } - }); - $menu.append($menuItem); - } - } - // assign default item, if there isn't one already - if (which === 'captions' && !hasDefault) { - // check the menu item associated with the default language - // as determined in control.js > syncTrackLanguages() - if ($menu.find('li[lang=' + this.captionLang + ']')) { - // a track exists for the default language. Check that item in the menu - $menu.find('li[lang=' + this.captionLang + ']').attr('aria-checked','true'); - } - else { - // check the last item (captions off) - $menu.find('li').last().attr('aria-checked','true'); - } - } - else if (which === 'chapters') { - if ($menu.find('li:contains("' + this.defaultChapter + '")')) { - $menu.find('li:contains("' + this.defaultChapter + '")').attr('aria-checked','true').addClass('able-focus'); - } - else { - $menu.find('li').first().attr('aria-checked','true').addClass('able-focus'); - } - } - // add keyboard handlers for navigating within popups - $menu.on('keydown',function (e) { - - whichMenu = $(this).attr('id').split('-')[1]; - $thisItem = $(this).find('li:focus'); - if ($thisItem.is(':first-child')) { - // this is the first item in the menu - $prevItem = $(this).find('li').last(); // wrap to bottom - $nextItem = $thisItem.next(); - } - else if ($thisItem.is(':last-child')) { - // this is the last Item - $prevItem = $thisItem.prev(); - $nextItem = $(this).find('li').first(); // wrap to top - } - else { - $prevItem = $thisItem.prev(); - $nextItem = $thisItem.next(); - } - if (e.which === 9) { // Tab - if (e.shiftKey) { - $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else { - $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - } - else if (e.which === 40 || e.which === 39) { // down or right arrow - $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - else if (e.which == 38 || e.which === 37) { // up or left arrow - $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else if (e.which === 32 || e.which === 13) { // space or enter - $thisItem.click(); - } - else if (e.which === 27) { // Escape - $thisItem.removeClass('able-focus'); - thisObj.closePopups(); - } - e.preventDefault(); - }); - this.$controllerDiv.append($menu); - return $menu; - }; - - AblePlayer.prototype.closePopups = function () { - - var thisObj = this; - - if (this.chaptersPopup && this.chaptersPopup.is(':visible')) { - this.chaptersPopup.hide(); - this.$chaptersButton.removeAttr('aria-expanded').focus(); - } - if (this.captionsPopup && this.captionsPopup.is(':visible')) { - this.captionsPopup.hide(); - this.$ccButton.removeAttr('aria-expanded').focus(); - } - if (this.prefsPopup && this.prefsPopup.is(':visible') && !this.hidingPopup) { - this.hidingPopup = true; // stopgap to prevent popup from re-opening again on keypress - this.prefsPopup.hide(); - // restore menu items to their original state - this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$prefsButton.removeAttr('aria-expanded'); - if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); - } - // wait briefly, then reset hidingPopup - setTimeout(function() { - thisObj.hidingPopup = false; - },100); - } - if (this.$volumeSlider && this.$volumeSlider.is(':visible')) { - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeAlert.text(this.tt.volumeSliderClosed); - this.$volumeButton.removeAttr('aria-expanded').focus(); - } - if (this.$transcriptPopup && this.$transcriptPopup.is(':visible')) { - this.$transcriptPopup.hide(); - // restore menu items to their original state - this.$transcriptPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$transcriptPopupButton.removeAttr('aria-expanded').focus(); - } - if (this.$signPopup && this.$signPopup.is(':visible')) { - this.$signPopup.hide(); - // restore menu items to their original state - this.$signPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$signPopupButton.removeAttr('aria-expanded').focus(); - } - }; - - AblePlayer.prototype.setupPopups = function (which) { - - // Create and fill in the popup menu forms for various controls. - // parameter 'which' is passed if refreshing content of an existing popup ('captions' or 'chapters') - // If which is undefined, automatically setup 'captions', 'chapters', and 'prefs' popups - // However, only setup 'transcript-window' and 'sign-window' popups if passed as value of which - var popups, thisObj, hasDefault, i, j, - tracks, track, $trackButton, $trackLabel, - radioName, radioId, $menu, $menuItem, - prefCats, prefCat, prefLabel; - - popups = []; - if (typeof which === 'undefined') { - popups.push('prefs'); - } - - if (which === 'captions' || (typeof which === 'undefined')) { - if (this.captions.length > 0) { - popups.push('captions'); - } - } - if (which === 'chapters' || (typeof which === 'undefined')) { - if (this.chapters.length > 0 && this.useChaptersButton) { - popups.push('chapters'); - } - } - if (which === 'transcript-window' && this.transcriptType === 'popup') { - popups.push('transcript-window'); - } - if (which === 'sign-window' && this.hasSignLanguage) { - popups.push('sign-window'); - } - if (popups.length > 0) { - thisObj = this; - for (var i=0; i<popups.length; i++) { - var popup = popups[i]; - hasDefault = false; - if (popup == 'prefs') { - this.prefsPopup = this.createPopup('prefs'); - } - else if (popup == 'captions') { - if (typeof this.captionsPopup === 'undefined' || !this.captionsPopup) { - this.captionsPopup = this.createPopup('captions',this.captions); - } - } - else if (popup == 'chapters') { - if (this.selectedChapters) { - tracks = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { - tracks = this.chapters[0].cues; - } - else { - tracks = []; - } - if (typeof this.chaptersPopup === 'undefined' || !this.chaptersPopup) { - this.chaptersPopup = this.createPopup('chapters',tracks); - } - } - else if (popup == 'transcript-window') { - return this.createPopup('transcript-window'); - } - else if (popup == 'sign-window') { - return this.createPopup('sign-window'); - } - } - } - }; - - AblePlayer.prototype.provideFallback = function() { - - // provide ultimate fallback for users who are unable to play the media - // If there is HTML content nested within the media element, display that - // Otherwise, display standard localized error text - - var $fallbackDiv, width, mediaClone, fallback, fallbackText, - showBrowserList, browsers, i, b, browserList; - - // Could show list of supporting browsers if 99.9% confident the error is truly an outdated browser - // Too many sites say "You need to update your browser" when in fact I'm using a current version - showBrowserList = false; - - $fallbackDiv = $('<div>',{ - 'class' : 'able-fallback', - 'role' : 'alert', - }); - // override default width of .able-fallback with player width, if known - if (typeof this.playerMaxWidth !== 'undefined') { - width = this.playerMaxWidth + 'px'; - } - else if (this.$media.attr('width')) { - width = parseInt(this.$media.attr('width'), 10) + 'px'; - } - else { - width = '100%'; - } - $fallbackDiv.css('max-width',width); - - // use fallback content that's nested inside the HTML5 media element, if there is any - mediaClone = this.$media.clone(); - $('source, track', mediaClone).remove(); - fallback = mediaClone.html().trim(); - if (fallback.length) { - $fallbackDiv.html(fallback); - } - else { - // use standard localized error message - fallbackText = this.tt.fallbackError1 + ' ' + this.tt[this.mediaType] + '. '; - fallbackText += this.tt.fallbackError2 + ':'; - fallback = $('<p>').text(fallbackText); - $fallbackDiv.html(fallback); - showBrowserList = true; - } - - if (showBrowserList) { - browserList = $('<ul>'); - browsers = this.getSupportingBrowsers(); - for (i=0; i<browsers.length; i++) { - b = $('<li>'); - b.text(browsers[i].name + ' ' + browsers[i].minVersion + ' ' + this.tt.orHigher); - browserList.append(b); - } - $fallbackDiv.append(browserList); - } - - // if there's a poster, show that as well - this.injectPoster($fallbackDiv, 'fallback'); - - // inject $fallbackDiv into the DOM and remove broken content - if (typeof this.$ableWrapper !== 'undefined') { - this.$ableWrapper.before($fallbackDiv); - this.$ableWrapper.remove(); - } - else if (typeof this.$media !== 'undefined') { - this.$media.before($fallbackDiv); - this.$media.remove(); - } - else { - $('body').prepend($fallbackDiv); - } - }; - - AblePlayer.prototype.getSupportingBrowsers = function() { - - var browsers = []; - browsers[0] = { - name:'Chrome', - minVersion: '31' - }; - browsers[1] = { - name:'Firefox', - minVersion: '34' - }; - browsers[2] = { - name:'Internet Explorer', - minVersion: '10' - }; - browsers[3] = { - name:'Opera', - minVersion: '26' - }; - browsers[4] = { - name:'Safari for Mac OS X', - minVersion: '7.1' - }; - browsers[5] = { - name:'Safari for iOS', - minVersion: '7.1' - }; - browsers[6] = { - name:'Android Browser', - minVersion: '4.1' - }; - browsers[7] = { - name:'Chrome for Android', - minVersion: '40' - }; - return browsers; - } - - AblePlayer.prototype.calculateControlLayout = function () { - - // Calculates the layout for controls based on media and options. - // Returns an array with 4 keys (for legacy skin) or 2 keys (for 2020 skin) - // Keys are the following order: - // 0 = Top left - // 1 = Top right - // 2 = Bottom left (legacy skin only) - // 3 = Bottom right (legacy skin only) - // Each key contains an array of control names to put in that section. - - var controlLayout, volumeSupported, playbackSupported, totalButtonWidth, numA11yButtons; - - controlLayout = []; - controlLayout[0] = []; - controlLayout[1] = []; - if (this.skin === 'legacy') { - controlLayout[2] = []; - controlLayout[3] = []; - } - - controlLayout[0].push('play'); - controlLayout[0].push('restart'); - controlLayout[0].push('rewind'); - controlLayout[0].push('forward'); - - if (this.skin === 'legacy') { - controlLayout[1].push('seek'); - } - - if (this.hasPlaylist) { - if (this.skin === 'legacy') { - controlLayout[0].push('previous'); - controlLayout[0].push('next'); - } - else if (this.skin == '2020') { - controlLayout[0].push('previous'); - controlLayout[0].push('next'); - } - } - - if (this.isPlaybackRateSupported()) { - playbackSupported = true; - if (this.skin === 'legacy') { - controlLayout[2].push('slower'); - controlLayout[2].push('faster'); - } - } - else { - playbackSupported = false; - } - - if (this.mediaType === 'video') { - numA11yButtons = 0; - if (this.hasCaptions) { - numA11yButtons++; - if (this.skin === 'legacy') { - controlLayout[2].push('captions'); - } - else if (this.skin == '2020') { - controlLayout[1].push('captions'); - } - } - if (this.hasSignLanguage) { - numA11yButtons++; - if (this.skin === 'legacy') { - controlLayout[2].push('sign'); - } - else if (this.skin == '2020') { - controlLayout[1].push('sign'); - } - } - if ((this.hasOpenDesc || this.hasClosedDesc) && (this.useDescriptionsButton)) { - numA11yButtons++; - if (this.skin === 'legacy') { - controlLayout[2].push('descriptions'); - } - else if (this.skin == '2020') { - controlLayout[1].push('descriptions'); - } - } - } - if (this.transcriptType === 'popup' && !(this.hideTranscriptButton)) { - numA11yButtons++; - if (this.skin === 'legacy') { - controlLayout[2].push('transcript'); - } - else if (this.skin == '2020') { - controlLayout[1].push('transcript'); - } - } - - if (this.mediaType === 'video' && this.hasChapters && this.useChaptersButton) { - numA11yButtons++; - if (this.skin === 'legacy') { - controlLayout[2].push('chapters'); - } - else if (this.skin == '2020') { - controlLayout[1].push('chapters'); - } - } - - if (this.skin == '2020' && numA11yButtons > 0) { - controlLayout[1].push('pipe'); - } - - if (playbackSupported && this.skin === '2020') { - controlLayout[1].push('faster'); - controlLayout[1].push('slower'); - controlLayout[1].push('pipe'); - } - - if (this.skin === 'legacy') { - controlLayout[3].push('preferences'); - } - else if (this.skin == '2020') { - controlLayout[1].push('preferences'); - } - - if (this.mediaType === 'video' && this.allowFullScreen) { - if (this.skin === 'legacy') { - controlLayout[3].push('fullscreen'); - } - else { - controlLayout[1].push('fullscreen'); - } - } - - if (this.browserSupportsVolume()) { - volumeSupported = true; // defined in case we decide to move volume button elsewhere - this.volumeButton = 'volume-' + this.getVolumeName(this.volume); - if (this.skin === 'legacy') { - controlLayout[1].push('volume'); - } - else if (this.skin == '2020') { - controlLayout[1].push('volume'); - } - } - else { - volumeSupported = false; - this.volume = false; - } - return controlLayout; - }; - - AblePlayer.prototype.addControls = function() { - - // determine which controls to show based on several factors: - // mediaType (audio vs video) - // availability of tracks (e.g., for closed captions & audio description) - // browser support (e.g., for sliders and speedButtons) - // user preferences (???) - // some controls are aligned on the left, and others on the right - - var thisObj, baseSliderWidth, controlLayout, numSections, - i, j, k, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, $pipeImg, - svgData, svgPath, control, - $buttonLabel, $buttonImg, buttonImgSrc, buttonTitle, $newButton, iconClass, buttonIcon, - buttonUse, buttonText, position, buttonHeight, buttonWidth, buttonSide, controllerWidth, - tooltipId, tooltipY, tooltipX, tooltipWidth, tooltipStyle, tooltip, - captionLabel, popupMenuId; - - thisObj = this; - - baseSliderWidth = 100; // arbitrary value, will be recalculated in refreshControls() - - // Initialize the layout into the this.controlLayout variable. - controlLayout = this.calculateControlLayout(); - numSections = controlLayout.length; - - // add an empty div to serve as a tooltip - tooltipId = this.mediaId + '-tooltip'; - this.$tooltipDiv = $('<div>',{ - 'id': tooltipId, - 'class': 'able-tooltip' - }).hide(); - this.$controllerDiv.append(this.$tooltipDiv); - - if (this.skin == '2020') { - // add a full-width seek bar - $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; - this.$controllerDiv.append($sliderDiv); - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - - // step separately through left and right controls - for (i = 0; i < numSections; i++) { - controls = controlLayout[i]; - if ((i % 2) === 0) { // even keys on the left - $controllerSpan = $('<div>',{ - 'class': 'able-left-controls' - }); - } - else { // odd keys on the right - $controllerSpan = $('<div>',{ - 'class': 'able-right-controls' - }); - } - this.$controllerDiv.append($controllerSpan); - for (j=0; j<controls.length; j++) { - control = controls[j]; - if (control === 'seek') { - $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; - $controllerSpan.append($sliderDiv); - if (typeof this.duration === 'undefined' || this.duration === 0) { - // set arbitrary starting duration, and change it when duration is known - this.duration = 60; - // also set elapsed to 0 - this.elapsed = 0; - } - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - else if (control === 'pipe') { - $pipe = $('<span>', { - 'tabindex': '-1', - 'aria-hidden': 'true' - }); - if (this.iconType === 'font') { - $pipe.addClass('icon-pipe'); - } - else { - $pipeImg = $('<img>', { - src: this.rootPath + 'button-icons/' + this.iconColor + '/pipe.png', - alt: '', - role: 'presentation' - }); - $pipe.append($pipeImg); - } - $controllerSpan.append($pipe); - } - else { - // this control is a button - if (control === 'volume') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + this.volumeButton + '.png'; - } - else if (control === 'fullscreen') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/fullscreen-expand.png'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/turtle.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/slower.png'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/rabbit.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/faster.png'; - } - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + control + '.png'; - } - buttonTitle = this.getButtonTitle(control); - - // icomoon documentation recommends the following markup for screen readers: - // 1. link element (or in our case, button). Nested inside this element: - // 2. span that contains the icon font (in our case, buttonIcon) - // 3. span that contains a visually hidden label for screen readers (buttonLabel) - // In addition, we are adding aria-label to the button (but not title) - // And if iconType === 'image', we are replacing #2 with an image (with alt="" and role="presentation") - // This has been thoroughly tested and works well in all screen reader/browser combinations - // See https://github.com/ableplayer/ableplayer/issues/81 - - // NOTE: Changed from <button> to <div role="button" as of 4.2.18 - // because <button> elements are rendered poorly in high contrast mode - // in some OS/browser/plugin combinations - $newButton = $('<div>',{ - 'role': 'button', - 'tabindex': '0', - 'aria-label': buttonTitle, - 'class': 'able-button-handler-' + control - }); - - if (control === 'volume' || control === 'preferences') { - if (control == 'preferences') { - this.prefCats = this.getPreferencesGroups(); - if (this.prefCats.length > 1) { - // Prefs button will trigger a menu - popupMenuId = this.mediaId + '-prefs-menu'; - $newButton.attr({ - 'aria-controls': popupMenuId, - 'aria-haspopup': 'menu' - }); - } - else if (this.prefCats.length === 1) { - // Prefs button will trigger a dialog - $newButton.attr({ - 'aria-haspopup': 'dialog' - }); - } - } - else if (control === 'volume') { - popupMenuId = this.mediaId + '-volume-slider'; - // volume slider popup is not a menu or a dialog - // therefore, using aria-expanded rather than aria-haspopup to communicate properties/state - $newButton.attr({ - 'aria-controls': popupMenuId, - 'aria-expanded': 'false' - }); - } - } - if (this.iconType === 'font') { - if (control === 'volume') { - iconClass = 'icon-' + this.volumeButton; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-turtle'; - } - else { - iconClass = 'icon-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-rabbit'; - } - else { - iconClass = 'icon-faster'; - } - } - else { - iconClass = 'icon-' + control; - } - buttonIcon = $('<span>',{ - 'class': iconClass, - 'aria-hidden': 'true' - }); - $newButton.append(buttonIcon); - } - else if (this.iconType === 'svg') { - - /* - // Unused option for adding SVG: - // Use <use> element to link to button-icons/able-icons.svg - // Advantage: SVG file can be cached - // Disadvantage: Not supported by Safari 6, IE 6-11, or Edge 12 - // Instead, adding <svg> element within each <button> - if (control === 'volume') { - iconClass = 'svg-' + this.volumeButton; - } - else if (control === 'fullscreen') { - iconClass = 'svg-fullscreen-expand'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-turtle'; - } - else { - iconClass = 'svg-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-rabbit'; - } - else { - iconClass = 'svg-faster'; - } - } - else { - iconClass = 'svg-' + control; - } - buttonIcon = $('<svg>',{ - 'class': iconClass - }); - buttonUse = $('<use>',{ - 'xlink:href': this.rootPath + 'button-icons/able-icons.svg#' + iconClass - }); - buttonIcon.append(buttonUse); - / - var svgData; - if (control === 'volume') { - svgData = this.getSvgData(this.volumeButton); - } - else if (control === 'fullscreen') { - svgData = this.getSvgData('fullscreen-expand'); - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('turtle'); - } - else { - svgData = this.getSvgData('slower'); - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('rabbit'); - } - else { - svgData = this.getSvgData('faster'); - } - } - else { - svgData = this.getSvgData(control); - } - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - $newButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - $newButton.html($newButton.html()); - } - else { - // use images - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - // add the visibly-hidden label for screen readers that don't support aria-label on the button - var $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(buttonTitle); - $newButton.append($buttonLabel); - // add an event listener that displays a tooltip on mouseenter or focus - $newButton.on('mouseenter focus',function(e) { - var buttonText = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - // position() is expressed using top and left (of button); - // add right (of button) too, for convenience - var controllerWidth = thisObj.$controllerDiv.width(); - position.right = controllerWidth - position.left - buttonWidth; - var tooltipY = position.top - buttonHeight - 15; - - if ($(this).parent().hasClass('able-right-controls')) { - // this control is on the right side - var buttonSide = 'right'; - } - else { - // this control is on the left side - var buttonSide = 'left'; - } - // populate tooltip, then calculate its width before showing it - var tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); - // center the tooltip horizontally over the button - if (buttonSide == 'left') { - var tooltipX = position.left - tooltipWidth/2; - if (tooltipX < 0) { - // tooltip would exceed the bounds of the player. Adjust. - tooltipX = 2; - } - var tooltipStyle = { - left: tooltipX + 'px', - right: '', - top: tooltipY + 'px' - }; - } - else { - var tooltipX = position.right - tooltipWidth/2; - if (tooltipX < 0) { - // tooltip would exceed the bounds of the player. Adjust. - tooltipX = 2; - } - var tooltipStyle = { - left: '', - right: tooltipX + 'px', - top: tooltipY + 'px' - }; - } - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); - thisObj.showTooltip(tooltip); - $(this).on('mouseleave blur',function() { - AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - }) - }); - - if (control === 'captions') { - if (!this.prefCaptions || this.prefCaptions !== 1) { - // captions are available, but user has them turned off - if (this.captions.length > 1) { - captionLabel = this.tt.captions; - } - else { - captionLabel = this.tt.showCaptions; - } - $newButton.addClass('buttonOff').attr('title',captionLabel); - } - } - else if (control === 'descriptions') { - if (!this.prefDesc || this.prefDesc !== 1) { - // user prefer non-audio described version - // Therefore, load media without description - // Description can be toggled on later with this button - $newButton.addClass('buttonOff').attr('title',this.tt.turnOnDescriptions); - } - } - - $controllerSpan.append($newButton); - - // create variables of buttons that are referenced throughout the AblePlayer object - if (control === 'play') { - this.$playpauseButton = $newButton; - } - else if (control == 'previous') { - this.$prevButton = $newButton; - // if player is being rebuilt because user clicked the Prev button - // return focus to that (newly built) button - if (this.buttonWithFocus == 'previous') { - this.$prevButton.focus(); - this.buttonWithFocus = null; - } - } - else if (control == 'next') { - this.$nextButton = $newButton; - // if player is being rebuilt because user clicked the Next button - // return focus to that (newly built) button - if (this.buttonWithFocus == 'next') { - this.$nextButton.focus(); - this.buttonWithFocus = null; - } - } - else if (control === 'captions') { - this.$ccButton = $newButton; - } - else if (control === 'sign') { - this.$signButton = $newButton; - // gray out sign button if sign language window is not active - if (!(this.$signWindow.is(':visible'))) { - this.$signButton.addClass('buttonOff'); - } - } - else if (control === 'descriptions') { - this.$descButton = $newButton; - // button will be enabled or disabled in description.js > initDescription() - } - else if (control === 'mute') { - this.$muteButton = $newButton; - } - else if (control === 'transcript') { - this.$transcriptButton = $newButton; - // gray out transcript button if transcript is not active - if (!(this.$transcriptDiv.is(':visible'))) { - this.$transcriptButton.addClass('buttonOff').attr('title',this.tt.showTranscript); - } - } - else if (control === 'fullscreen') { - this.$fullscreenButton = $newButton; - } - else if (control === 'chapters') { - this.$chaptersButton = $newButton; - } - else if (control === 'preferences') { - this.$prefsButton = $newButton; - } - else if (control === 'volume') { - this.$volumeButton = $newButton; - } - } - if (control === 'volume') { - // in addition to the volume button, add a hidden slider - this.addVolumeSlider($controllerSpan); - } - } - if ((i % 2) == 1) { - this.$controllerDiv.append('<div style="clear:both;"></div>'); - } - } - - if (this.mediaType === 'video') { - - if (typeof this.$captionsDiv !== 'undefined') { - // stylize captions based on user prefs - this.stylizeCaptions(this.$captionsDiv); - } - if (typeof this.$descDiv !== 'undefined') { - // stylize descriptions based on user's caption prefs - this.stylizeCaptions(this.$descDiv); - } - } - - // combine left and right controls arrays for future reference - this.controls = []; - for (var sec in controlLayout) if (controlLayout.hasOwnProperty(sec)) { - this.controls = this.controls.concat(controlLayout[sec]); - } - - // Update state-based display of controls. - this.refreshControls('init'); - }; - - AblePlayer.prototype.useSvg = function () { - - // Modified from IcoMoon.io svgxuse - // @copyright Copyright (c) 2016 IcoMoon.io - // @license Licensed under MIT license - // See https://github.com/Keyamoon/svgxuse - // @version 1.1.16 - - var cache = Object.create(null); // holds xhr objects to prevent multiple requests - var checkUseElems, - tid; // timeout id - var debouncedCheck = function () { - clearTimeout(tid); - tid = setTimeout(checkUseElems, 100); - }; - var unobserveChanges = function () { - return; - }; - var observeChanges = function () { - var observer; - window.addEventListener('resize', debouncedCheck, false); - window.addEventListener('orientationchange', debouncedCheck, false); - if (window.MutationObserver) { - observer = new MutationObserver(debouncedCheck); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - attributes: true - }); - unobserveChanges = function () { - try { - observer.disconnect(); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - } catch (ignore) {} - }; - } - else { - document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); - unobserveChanges = function () { - document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - }; - } - }; - var xlinkNS = 'http://www.w3.org/1999/xlink'; - checkUseElems = function () { - var base, - bcr, - fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. - hash, - i, - Request, - inProgressCount = 0, - isHidden, - url, - uses, - xhr; - if (window.XMLHttpRequest) { - Request = new XMLHttpRequest(); - if (Request.withCredentials !== undefined) { - Request = XMLHttpRequest; - } - else { - Request = XDomainRequest || undefined; - } - } - if (Request === undefined) { - return; - } - function observeIfDone() { - // If done with making changes, start watching for chagnes in DOM again - inProgressCount -= 1; - if (inProgressCount === 0) { // if all xhrs were resolved - observeChanges(); // watch for changes to DOM - } - } - function attrUpdateFunc(spec) { - return function () { - if (cache[spec.base] !== true) { - spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); - } - }; - } - function onloadFunc(xhr) { - return function () { - var body = document.body; - var x = document.createElement('x'); - var svg; - xhr.onload = null; - x.innerHTML = xhr.responseText; - svg = x.getElementsByTagName('svg')[0]; - if (svg) { - svg.setAttribute('aria-hidden', 'true'); - svg.style.position = 'absolute'; - svg.style.width = 0; - svg.style.height = 0; - svg.style.overflow = 'hidden'; - body.insertBefore(svg, body.firstChild); - } - observeIfDone(); - }; - } - function onErrorTimeout(xhr) { - return function () { - xhr.onerror = null; - xhr.ontimeout = null; - observeIfDone(); - }; - } - unobserveChanges(); // stop watching for changes to DOM - // find all use elements - uses = document.getElementsByTagName('use'); - for (i = 0; i < uses.length; i += 1) { - try { - bcr = uses[i].getBoundingClientRect(); - } catch (ignore) { - // failed to get bounding rectangle of the use element - bcr = false; - } - url = uses[i].getAttributeNS(xlinkNS, 'href').split('#'); - base = url[0]; - hash = url[1]; - isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; - if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { - // the use element is empty - // if there is a reference to an external SVG, try to fetch it - // use the optional fallback URL if there is no reference to an external SVG - if (fallback && !base.length && hash && !document.getElementById(hash)) { - base = fallback; - } - if (base.length) { - // schedule updating xlink:href - xhr = cache[base]; - if (xhr !== true) { - // true signifies that prepending the SVG was not required - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - if (xhr === undefined) { - xhr = new Request(); - cache[base] = xhr; - xhr.onload = onloadFunc(xhr); - xhr.onerror = onErrorTimeout(xhr); - xhr.ontimeout = onErrorTimeout(xhr); - xhr.open('GET', base); - xhr.send(); - inProgressCount += 1; - } - } - } - else { - if (!isHidden) { - if (cache[base] === undefined) { - // remember this URL if the use element was not empty and no request was sent - cache[base] = true; - } - else if (cache[base].onload) { - // if it turns out that prepending the SVG is not necessary, - // abort the in-progress xhr. - cache[base].abort(); - cache[base].onload = undefined; - cache[base] = true; - } - } - } - } - uses = ''; - inProgressCount += 1; - observeIfDone(); - }; -/ - // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. - window.addEventListener('load', function winLoad() { - window.removeEventListener('load', winLoad, false); // to prevent memory leaks - tid = setTimeout(checkUseElems, 0); - }, false); -/ - }; - - AblePlayer.prototype.cuePlaylistItem = function(sourceIndex) { - - // Move to a new item in a playlist. - // NOTE: Swapping source for audio description is handled elsewhere; - // see description.js > swapDescription() - - / - // Decided against preventing a reload of the current item in the playlist. - // If it's clickable, users should be able to click on it and expect something to happen. - // Leaving here though in case it's determined to be desirable. - if (sourceIndex === this.playlistItemIndex) { - // user has requested the item that's currently playing - // just ignore the request - return; - } - this.playlistItemIndex = sourceIndex; - / - - var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, sources, s, i, $newSource, nowPlayingSpan; - - var thisObj = this; - - prevPlayer = this.player; - - if (this.initializing) { // this is the first track - user hasn't pressed play yet - // do nothing. - } - else { - if (this.playerCreated) { - // remove the old - this.deletePlayer(); - } - } - - // Determine appropriate player to play this media - $newItem = this.$playlist.eq(sourceIndex); - if (this.hasAttr($newItem,'data-youtube-id')) { - this.youTubeId = $newItem.attr('data-youtube-id'); - newPlayer = 'youtube'; - } - else { - newPlayer = 'html5'; - } - - if (newPlayer === 'youtube') { - if (prevPlayer === 'html5') { - // pause and hide the previous media - if (this.playing) { - this.pauseMedia(); - } - this.$media.hide(); - } - } - else { - // the new player is not youtube - this.youTubeId = false; - if (prevPlayer === 'youtube') { - // unhide the media element - this.$media.show(); - } - } - this.player = newPlayer; - - // set swappingSrc; needs to be true within recreatePlayer(), called below - this.swappingSrc = true; - - // transfer media attributes from playlist to media element - if (this.hasAttr($newItem,'data-poster')) { - this.$media.attr('poster',$newItem.attr('data-poster')); - } - if (this.hasAttr($newItem,'data-width')) { - this.$media.attr('width',$newItem.attr('data-width')); - } - if (this.hasAttr($newItem,'data-height')) { - this.$media.attr('height',$newItem.attr('data-height')); - } - if (this.hasAttr($newItem,'data-youtube-desc-id')) { - this.$media.attr('data-youtube-desc-id',$newItem.attr('data-youtube-desc-id')); - } - if (this.youTubeId) { - this.$media.attr('data-youtube-id',$newItem.attr('data-youtube-id')); - } - - // add new <source> elements from playlist data - var $sourceSpans = $newItem.children('span.able-source'); - if ($sourceSpans.length) { - $sourceSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src')) { - // this is the only required attribute - var $newSource = $('<source>',{ - 'src': $(this).attr('data-src') - }); - if (thisObj.hasAttr($(this),'data-type')) { - $newSource.attr('type',$(this).attr('data-type')); - } - if (thisObj.hasAttr($(this),'data-desc-src')) { - $newSource.attr('data-desc-src',$(this).attr('data-desc-src')); - } - if (thisObj.hasAttr($(this),'data-sign-src')) { - $newSource.attr('data-sign-src',$(this).attr('data-sign-src')); - } - thisObj.$media.append($newSource); - } - }); - } - - // add new <track> elements from playlist data - var $trackSpans = $newItem.children('span.able-track'); - if ($trackSpans.length) { - // for each element in $trackSpans, create a new <track> element - $trackSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src') && - thisObj.hasAttr($(this),'data-kind') && - thisObj.hasAttr($(this),'data-srclang')) { - // all required attributes are present - var $newTrack = $('<track>',{ - 'src': $(this).attr('data-src'), - 'kind': $(this).attr('data-kind'), - 'srclang': $(this).attr('data-srclang') - }); - if (thisObj.hasAttr($(this),'data-label')) { - $newTrack.attr('label',$(this).attr('data-label')); - } - thisObj.$media.append($newTrack); - } - }); - } - - itemTitle = $newItem.text(); - if (this.hasAttr($newItem,'lang')) { - itemLang = $newItem.attr('lang'); - } - // Update relevant arrays - this.$sources = this.$media.find('source'); - - // recreate player, informed by new attributes and track elements - this.recreatePlayer(); - - // update playlist to indicate which item is playing - //$('.able-playlist li').removeClass('able-current'); - this.$playlist.removeClass('able-current'); - this.$playlist.eq(sourceIndex).addClass('able-current'); - - // update Now Playing div - if (this.showNowPlaying === true) { - if (typeof this.$nowPlayingDiv !== 'undefined') { - nowPlayingSpan = $('<span>'); - if (typeof itemLang !== 'undefined') { - nowPlayingSpan.attr('lang',itemLang); - } - nowPlayingSpan.html('<span>' + this.tt.selectedTrack + ':</span>' + itemTitle); - this.$nowPlayingDiv.html(nowPlayingSpan); - } - } - - // if this.swappingSrc is true, media will autoplay when ready - if (this.initializing) { // this is the first track - user hasn't pressed play yet - this.swappingSrc = false; - } - else { - this.swappingSrc = true; - if (this.player === 'html5') { - this.media.load(); - } - else if (this.player === 'youtube') { - this.okToPlay = true; - } - } - }; - - AblePlayer.prototype.deletePlayer = function() { - - // remove previous video's attributes and child elements from media element - if (this.player == 'youtube') { - var $youTubeIframe = this.$mediaContainer.find('iframe'); - $youTubeIframe.remove(); - } - this.$media.removeAttr('poster width height'); - this.$media.empty(); - - // Empty elements that will be rebuilt - this.$controllerDiv.empty(); - // this.$statusBarDiv.empty(); - // this.$timer.empty(); - this.$elapsedTimeContainer.empty().text('0:00'); // span.able-elapsedTime - this.$durationContainer.empty(); // span.able-duration - - // Remove popup windows and modal dialogs; these too will be rebuilt - if (this.$signWindow) { - this.$signWindow.remove(); - } - if (this.$transcriptArea) { - this.$transcriptArea.remove(); - } - $('.able-modal-dialog').remove(); - - // reset key variables - this.hasCaptions = false; - this.hasChapters = false; - this.captionsPopup = null; - this.chaptersPopup = null; - }; - - AblePlayer.prototype.getButtonTitle = function(control) { - - if (control === 'playpause') { - return this.tt.play; - } - else if (control === 'play') { - return this.tt.play; - } - else if (control === 'pause') { - return this.tt.pause; - } - else if (control === 'restart') { - return this.tt.restart; - } - else if (control === 'previous') { - return this.tt.prevTrack; - } - else if (control === 'next') { - return this.tt.nextTrack; - } - else if (control === 'rewind') { - return this.tt.rewind; - } - else if (control === 'forward') { - return this.tt.forward; - } - else if (control === 'captions') { - if (this.captions.length > 1) { - return this.tt.captions; - } - else { - if (this.captionsOn) { - return this.tt.hideCaptions; - } - else { - return this.tt.showCaptions; - } - } - } - else if (control === 'descriptions') { - if (this.descOn) { - return this.tt.turnOffDescriptions; - } - else { - return this.tt.turnOnDescriptions; - } - } - else if (control === 'transcript') { - if (this.$transcriptDiv.is(':visible')) { - return this.tt.hideTranscript; - } - else { - return this.tt.showTranscript; - } - } - else if (control === 'chapters') { - return this.tt.chapters; - } - else if (control === 'sign') { - return this.tt.sign; - } - else if (control === 'volume') { - return this.tt.volume; - } - else if (control === 'faster') { - return this.tt.faster; - } - else if (control === 'slower') { - return this.tt.slower; - } - else if (control === 'preferences') { - return this.tt.preferences; - } - else if (control === 'help') { - // return this.tt.help; - } - else if (control === 'fullscreen') { - if (!this.fullscreen) { - return this.tt.enterFullScreen; - } - else { - return this.tt.exitFullScreen; - } - } - else { - // there should be no other controls, but just in case: - // return the name of the control with first letter in upper case - // ultimately will need to get a translated label from this.tt - if (this.debug) { - - } - return control.charAt(0).toUpperCase() + control.slice(1); - } - }; - - -})(jQuery); - -(function ($) { - // Loads files referenced in track elements, and performs appropriate setup. - // For example, captions and text descriptions. - // This will be called whenever the player is recreated. - // Added in v2.2.23: Also handles YouTube caption tracks - - AblePlayer.prototype.setupTracks = function() { - - var thisObj, deferred, promise, loadingPromises, loadingPromise, i, tracks, track; - - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - loadingPromises = []; - - this.captions = []; - this.descriptions = []; - this.chapters = []; - this.meta = []; - - if ($('#able-vts').length) { - // Page includes a container for a VTS instance - this.vtsTracks = []; - this.hasVts = true; - } - else { - this.hasVts = false; - } - - this.getTracks().then(function() { - - tracks = thisObj.tracks; - - for (i=0; i < tracks.length; i++) { - - track = tracks[i]; - - var kind = track.kind; - var trackLang = track.language; - var trackLabel = track.label; - - if (!track.src) { - if (thisObj.usingYouTubeCaptions || thisObj.usingVimeoCaptions) { - // skip all the hullabaloo and go straight to setupCaptions - thisObj.setupCaptions(track,trackLang,trackLabel); - } - else { - // Nothing to load! - // Skip this track; move on to next i - } - continue; - } - - var trackSrc = track.src; - - loadingPromise = thisObj.loadTextObject(trackSrc); // resolves with src, trackText - loadingPromises.push(loadingPromise.catch(function(src) { })); - - loadingPromise.then((function (track, kind) { - - var trackSrc = track.src; - var trackLang = track.language; - var trackLabel = track.label; - - return function (trackSrc, trackText) { // these are the two vars returned from loadTextObject - - var trackContents = trackText; - var cues = thisObj.parseWebVTT(trackSrc, trackContents).cues; - - if (thisObj.hasVts) { - // setupVtsTracks() is in vts.js - thisObj.setupVtsTracks(kind, trackLang, trackLabel, trackSrc, trackContents); - } - - if (kind === 'captions' || kind === 'subtitles') { - thisObj.setupCaptions(track, trackLang, trackLabel, cues); - } - else if (kind === 'descriptions') { - thisObj.setupDescriptions(track, cues, trackLang); - } - else if (kind === 'chapters') { - thisObj.setupChapters(track, cues, trackLang); - } - else if (kind === 'metadata') { - thisObj.setupMetadata(track, cues); - } - } - })(track, kind)); - } - $.when.apply($, loadingPromises).then(function () { - deferred.resolve(); - }); - }); - - return promise; - }; - - AblePlayer.prototype.getTracks = function() { - - // define an array tracks with the following structure: - // kind - string, e.g. "captions", "descriptions" - // src - string, URL of WebVTT source file - // language - string, lang code - // label - string to display, e.g., in CC menu - // def - Boolean, true if this is the default track - // cues - array with startTime, endTime, and payload - - var thisObj, deferred, promise, captionTracks, trackLang, trackLabel, isDefault, - i, j, capLabel, inserted; - - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - this.$tracks = this.$media.find('track'); - this.tracks = []; - captionTracks = []; - this.captions = []; - - if (this.$tracks.length) { - - // create object from HTML5 tracks - this.$tracks.each(function() { - - // srcLang should always be included with <track>, but HTML5 spec doesn't require it - // if not provided, assume track is the same language as the default player language - if ($(this).attr('srclang')) { - trackLang = $(this).attr('srclang'); - } - else { - trackLang = thisObj.lang; - } - if ($(this).attr('label')) { - trackLabel = $(this).attr('label'); - } - else { - trackLabel = thisObj.getLanguageName(trackLang); - } - - if ($(this).attr('default')) { - isDefault = true; - } - else if (trackLang === thisObj.lang) { - // There is no @default attribute, - // but this is the user's/browser's default language - // so make it the default caption track - isDefault = true; - } - else { - isDefault = false; - } - - if (isDefault) { - // this.captionLang will also be the default language for non-caption tracks - thisObj.captionLang = trackLang; - } - - thisObj.tracks.push({ - 'kind': $(this).attr('kind'), - 'src': $(this).attr('src'), - 'language': trackLang, - 'label': trackLabel, - 'def': isDefault - }); - - if ($(this).attr('kind') === 'captions' || $(this).attr('kind') == 'subtitles') { - // also add this track to a dedicated captions object - captionTracks.push({ - 'kind': $(this).attr('kind'), - 'src': $(this).attr('src'), - 'language': trackLang, - 'label': trackLabel, - 'def': isDefault - }); - } - }); - } - - if (captionTracks.length) { - // HTML captions or subtitles were found. - // Use those, and sort them alphabetically. - this.usingYouTubeCaptions = false; - this.usingVimeoCaptions = false; - for (i = 0; i < captionTracks.length; i++) { - if (this.captions.length === 0) { // this is the first - this.captions.push({ - 'language': captionTracks[i].language, - 'label': captionTracks[i].label, - 'def': captionTracks[i].def - }); - } - else { // there are already captions in the array - inserted = false; - for (j = 0; j < this.captions.length; j++) { - capLabel = captionTracks[i].label; - if (capLabel.toLowerCase() < this.captions[j].label.toLowerCase()) { - // insert before track j - this.captions.splice(j,0,{ - 'language': captionTracks[i].language, - 'label': captionTracks[i].label, - 'def': captionTracks[i].def - }); - inserted = true; - break; - } - } - if (!inserted) { - // just add track to the end - this.captions.push({ - 'language': captionTracks[i].language, - 'label': captionTracks[i].label, - 'def': captionTracks[i].def - }); - } - } - } - deferred.resolve(); - } - else { - // if this is a youtube or vimeo player, check there for captions/subtitles - if (this.player === 'youtube') { - this.getYouTubeCaptionTracks(this.youTubeId).then(function() { - thisObj.usingYouTubeCaptions = true; - deferred.resolve(); - }); - } - else if (this.player === 'vimeo') { - this.getVimeoCaptionTracks().then(function() { - thisObj.usingVimeoCaptions = true; - deferred.resolve(); - }); - } - else { - // this is neither YouTube nor Vimeo - // there just ain't no caption tracks - this.hasCaptions = false; - deferred.resolve(); - } - } - return promise; - }; - - AblePlayer.prototype.setupCaptions = function (track, trackLang, trackLabel, cues) { - - // Setup player for display of captions - var thisObj, inserted, i, capLabel; - - thisObj = this; - - if (typeof cues === 'undefined') { - cues = null; - } - - if (this.captions.length) { - // there are captions available - this.hasCaptions = true; - this.currentCaption = -1; // TODO: clarify purpose of this - if (this.prefCaptions === 1) { - this.captionsOn = true; - } - else { - this.captionsOn = false; - } - } - else { - this.hasCaptions = false; - } - - // Remove 'default' attribute from all <track> elements - // This data has already been saved to this.tracks - // and some browsers will display the default captions, despite all standard efforts to suppress them - this.$media.find('track').removeAttr('default'); - - // Currently only showing captions for video, not audio - // TODO: Revisit this to enable captions for audio - if (this.mediaType === 'video') { - - if (!(this.usingYouTubeCaptions || this.usingVimeoCaptions)) { - // create a pair of nested divs for displaying captions - // includes aria-hidden="true" because otherwise - // captions being added and removed causes sporadic changes to focus in JAWS - // (not a problem in NVDA or VoiceOver) - if (!this.$captionsDiv) { - this.$captionsDiv = $('<div>',{ - 'class': 'able-captions', - }); - this.$captionsWrapper = $('<div>',{ - 'class': 'able-captions-wrapper', - 'aria-hidden': 'true' - }).hide(); - if (this.prefCaptionsPosition === 'below') { - this.$captionsWrapper.addClass('able-captions-below'); - } - else { - this.$captionsWrapper.addClass('able-captions-overlay'); - } - this.$captionsWrapper.append(this.$captionsDiv); - this.$vidcapContainer.append(this.$captionsWrapper); - } - } - // Add cues to this.captions for the current language - for (i = 0; i < this.captions.length; i++) { - if (this.captions[i].language === trackLang) { - this.captions[i].cues = cues; - } - } - // Do the same for this.tracks - for (i = 0; i < this.tracks.length; i++) { - if (this.tracks[i].language === trackLang) { - this.tracks[i].cues = cues; - } - } - } - }; - - AblePlayer.prototype.setupDescriptions = function (track, cues, trackLang) { - - // called via setupTracks() only if there is track with kind="descriptions" - // prepares for delivery of text description , in case it's needed - // whether and how it's delivered is controlled within description.js > initDescription() - - this.hasClosedDesc = true; - this.currentDescription = -1; - this.descriptions.push({ - cues: cues, - language: trackLang - }); - }; - - AblePlayer.prototype.setupChapters = function (track, cues, trackLang) { - - // NOTE: WebVTT supports nested timestamps (to form an outline) - // This is not currently supported. - - this.hasChapters = true; - - this.chapters.push({ - cues: cues, - language: trackLang - }); - }; - - AblePlayer.prototype.setupMetadata = function(track, cues) { - - if (this.metaType === 'text') { - // Metadata is only supported if data-meta-div is provided - // The player does not display metadata internally - if (this.metaDiv) { - if ($('#' + this.metaDiv)) { - // container exists - this.$metaDiv = $('#' + this.metaDiv); - this.hasMeta = true; - this.meta = cues; - } - } - } - else if (this.metaType === 'selector') { - this.hasMeta = true; - this.visibleSelectors = []; - this.meta = cues; - } - }; - - AblePlayer.prototype.loadTextObject = function(src) { - -// TODO: Incorporate the following function, moved from setupTracks() -// convert XMl/TTML captions file -/ -if (thisObj.useTtml && (trackSrc.endsWith('.xml') || trackText.startsWith('<?xml'))) { - trackContents = thisObj.ttml2webvtt(trackText); -} -/ - var deferred, promise, thisObj, $tempDiv; - - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - - // create a temp div for holding data - $tempDiv = $('<div>',{ - style: 'display:none' - }); - $tempDiv.load(src, function (trackText, status, req) { - if (status === 'error') { - if (thisObj.debug) { - - } - deferred.reject(src); - } - else { - deferred.resolve(src, trackText); - } - $tempDiv.remove(); - }); - return promise; - }; - -})(jQuery); - - -(function ($) { - AblePlayer.prototype.initYouTubePlayer = function () { - - var thisObj, deferred, promise, youTubeId, googleApiPromise, json; - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - // if a described version is available && user prefers desription - // init player using the described version - if (this.youTubeDescId && this.prefDesc) { - youTubeId = this.youTubeDescId; - } - else { - youTubeId = this.youTubeId; - } - this.activeYouTubeId = youTubeId; - if (AblePlayer.youTubeIframeAPIReady) { - // Script already loaded and ready. - this.finalizeYoutubeInit().then(function() { - deferred.resolve(); - }); - } - else { - // Has another player already started loading the script? If so, abort... - if (!AblePlayer.loadingYouTubeIframeAPI) { - $.getScript('https://www.youtube.com/iframe_api').fail(function () { - deferred.fail(); - }); - } - - // Otherwise, keeping waiting for script load event... - $('body').on('youTubeIframeAPIReady', function () { - thisObj.finalizeYoutubeInit().then(function() { - deferred.resolve(); - }); - }); - } - return promise; - }; - - AblePlayer.prototype.finalizeYoutubeInit = function () { - - // This is called once we're sure the Youtube iFrame API is loaded -- see above - - var deferred, promise, thisObj, containerId, ccLoadPolicy, videoDimensions, autoplay; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - thisObj = this; - - containerId = this.mediaId + '_youtube'; - - this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // NOTE: Tried the following in place of the above in January 2016 - // because in some cases two videos were being added to the DOM - // However, once v2.2.23 was fairly stable, unable to reproduce that problem - // so maybe it's not an issue. This is preserved here temporarily, just in case it's needed... - // thisObj.$mediaContainer.html($('<div>').attr('id', containerId)); - - // cc_load_policy: - // 0 - show captions depending on user's preference on YouTube - // 1 - show captions by default, even if the user has turned them off - // IMPORTANT: This must* be set to 1 or some browsers - // fail to load any texttracks (observed in Chrome, not in Firefox) - ccLoadPolicy = 1; - - videoDimensions = this.getYouTubeDimensions(this.activeYouTubeId, containerId); - if (videoDimensions) { - this.ytWidth = videoDimensions[0]; - this.ytHeight = videoDimensions[1]; - this.aspectRatio = thisObj.ytWidth / thisObj.ytHeight; - } - else { - // dimensions are initially unknown - // sending null values to YouTube results in a video that uses the default YouTube dimensions - // these can then be scraped from the iframe and applied to this.$ableWrapper - this.ytWidth = null; - this.ytHeight = null; - } - - if (this.okToPlay) { - autoplay = 1; - } - else { - autoplay = 0; - } - - // Documentation https://developers.google.com/youtube/player_parameters - - if (typeof this.captionLang == 'undefined') { - // init using the default player lang - this.captionLang = this.lang; - } - - this.youTubePlayer = new YT.Player(containerId, { - videoId: this.activeYouTubeId, - host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', - width: this.ytWidth, - height: this.ytHeight, - playerVars: { - autoplay: autoplay, - enablejsapi: 1, - disableKb: 1, // disable keyboard shortcuts, using our own - playsinline: this.playsInline, - start: this.startTime, - controls: 0, // no controls, using our own - cc_load_policy: ccLoadPolicy, - cc_lang_pref: this.captionLang, // set the caption language - hl: this.lang, // set the UI language to match Able Player - modestbranding: 1, // no YouTube logo in controller - rel: 0, // when video ends, show only related videos from same channel (1 shows any) - iv_load_policy: 3 // do not show video annotations - }, - events: { - onReady: function () { - - if (thisObj.swappingSrc) { - // swap is now complete - thisObj.swappingSrc = false; - thisObj.cueingPlaylistItem = false; - if (thisObj.playing) { - // resume playing - thisObj.playMedia(); - } - } - if (thisObj.userClickedPlaylist) { - thisObj.userClickedPlaylist = false; // reset - } - if (typeof thisObj.aspectRatio === 'undefined') { - thisObj.resizeYouTubePlayer(thisObj.activeYouTubeId, containerId); - } - deferred.resolve(); - }, - onError: function (x) { - deferred.fail(); - }, - onStateChange: function (x) { - thisObj.getPlayerState().then(function(playerState) { - - // values of playerState: 'playing','paused','buffering','ended' - if (playerState === 'playing') { - thisObj.playing = true; - thisObj.startedPlaying = true; - thisObj.paused = false; - } - else if (playerState == 'ended') { - thisObj.onMediaComplete(); - } - else { - thisObj.playing = false; - thisObj.paused = true; - } - if (thisObj.stoppingYouTube && playerState === 'paused') { - if (typeof thisObj.$posterImg !== 'undefined') { - thisObj.$posterImg.show(); - } - thisObj.stoppingYouTube = false; - thisObj.seeking = false; - thisObj.playing = false; - thisObj.paused = true; - } - }); - // If caption tracks are hosted locally, but are also available on YouTube, - // we need to turn them off on YouTube or there will be redundant captions - // This is the most reliable event on which to unload the caption module - if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { - if (thisObj.youTubePlayer.getOptions('captions')) { - thisObj.youTubePlayer.unloadModule('captions'); - } - } - }, - onPlaybackQualityChange: function () { - // do something - }, - } - }); - - this.injectPoster(this.$mediaContainer, 'youtube'); - if (!this.hasPlaylist) { - // remove the media element, since YouTube replaces that with its own element in an iframe - // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() - this.$media.remove(); - } - return promise; - }; - - AblePlayer.prototype.getYouTubeDimensions = function (youTubeContainerId) { - - // get dimensions of YouTube video, return array with width & height - // Sources, in order of priority: - // 1. The width and height attributes on <video> - // 2. YouTube (not yet supported; can't seem to get this data via YouTube Data API without OAuth!) - - var d, url, $iframe, width, height; - - d = []; - - if (typeof this.playerMaxWidth !== 'undefined') { - d[0] = this.playerMaxWidth; - // optional: set height as well; not required though since YouTube will adjust height to match width - if (typeof this.playerMaxHeight !== 'undefined') { - d[1] = this.playerMaxHeight; - } - return d; - } - else { - if (typeof $('#' + youTubeContainerId) !== 'undefined') { - $iframe = $('#' + youTubeContainerId); - width = $iframe.width(); - height = $iframe.height(); - if (width > 0 && height > 0) { - d[0] = width; - d[1] = height; - return d; - } - } - } - return false; - }; - - AblePlayer.prototype.resizeYouTubePlayer = function(youTubeId, youTubeContainerId) { - - // called after player is ready, if youTube dimensions were previously unknown - // Now need to get them from the iframe element that YouTube injected - // and resize Able Player to match - var d, width, height; - if (typeof this.aspectRatio !== 'undefined') { - // video dimensions have already been collected - if (this.restoringAfterFullScreen) { - // restore using saved values - if (this.youTubePlayer) { - this.youTubePlayer.setSize(this.ytWidth, this.ytHeight); - } - this.restoringAfterFullScreen = false; - } - else { - // recalculate with new wrapper size - width = this.$ableWrapper.parent().width(); - height = Math.round(width / this.aspectRatio); - this.$ableWrapper.css({ - 'max-width': width + 'px', - 'width': '' - }); - this.youTubePlayer.setSize(width, height); - if (this.fullscreen) { - this.youTubePlayer.setSize(width, height); - } - else { - // resizing due to a change in window size, not full screen - this.youTubePlayer.setSize(this.ytWidth, this.ytHeight); - } - } - } - else { - d = this.getYouTubeDimensions(youTubeContainerId); - if (d) { - width = d[0]; - height = d[1]; - if (width > 0 && height > 0) { - this.aspectRatio = width / height; - this.ytWidth = width; - this.ytHeight = height; - if (width !== this.$ableWrapper.width()) { - // now that we've retrieved YouTube's default width, - // need to adjust to fit the current player wrapper - width = this.$ableWrapper.width(); - height = Math.round(width / this.aspectRatio); - if (this.youTubePlayer) { - this.youTubePlayer.setSize(width, height); - } - } - } - } - } - }; - - AblePlayer.prototype.getYouTubeCaptionTracks = function (youTubeId) { - - // get data via YouTube IFrame Player API, and push data to this.tracks & this.captions - // NOTE: Caption tracks are not available through the IFrame Player API - // until AFTER the video has started playing. - // Therefore, this function plays the video briefly in order to load the captions module - // then stops the video and collects the data needed to build the cc menu - // This is stupid, but seemingly unavoidable. - // Caption tracks could be obtained through the YouTube Data API - // but this required authors to have a Google API key, - // which would complicate Able Player installation - - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack; - - thisObj = this; - - if (!this.youTubePlayer.getOption('captions','tracklist')) { - // no tracks were found, probably because the captions module hasn't loaded - // play video briefly (required in order to load the captions module) - // and after the apiChange event is triggered, try again to retreive tracks - this.youTubePlayer.addEventListener('onApiChange',function(x) { - if (thisObj.loadingYouTubeCaptions) { - // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once - ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); - thisObj.youTubePlayer.stopVideo(); - // Step through ytTracks and add them to global tracks array - // Note: Unlike YouTube Data API, the IFrame Player API only returns - // tracks that are published, and does NOT include ASR captions - // So, no additional filtering is required - for (i=0; i < ytTracks.length; i++) { - trackLang = ytTracks[i].languageCode; - trackLabel = ytTracks[i].languageName; // displayName and languageName seem to always have the same value - isDefaultTrack = false; - if (typeof thisObj.captionLang !== 'undefined') { - if (trackLang === thisObj.captionLang) { - isDefaultTrack = true; - } - } - else if (typeof thisObj.lang !== 'undefined') { - if (trackLang === thisObj.lang) { - isDefaultTrack = true; - } - } - thisObj.tracks.push({ - 'kind': 'captions', - 'language': trackLang, - 'label': trackLabel, - 'def': isDefaultTrack - }); - } - thisObj.captions = thisObj.tracks; - thisObj.hasCaptions = true; - // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - thisObj.loadingYouTubeCaptions = false; - } - if (thisObj.captionLangPending) { - // user selected a new caption language prior to playback starting - // set it now - thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLangPending}); - thisObj.captionLangPending = null; - } - if (typeof thisObj.prefCaptionsSize !== 'undefined') { - // set the default caption size - // this doesn't work until the captions module is loaded - thisObj.youTubePlayer.setOption('captions','fontSize',thisObj.translatePrefs('size',thisObj.prefCaptionsSize,'youtube')); - } - deferred.resolve(); - }); - // Trigger the above event listener by briefly playing the video - this.loadingYouTubeCaptions = true; - this.youTubePlayer.playVideo(); - } - return promise; - }; - - AblePlayer.prototype.getYouTubeTimedTextUrl = function (youTubeId, trackName, trackLang) { - - // return URL for retrieving WebVTT source via YouTube's timedtext API - // Note: This API seems to be undocumented, and could break anytime - // UPDATE: Google removed this API on November 10, 2021 - // This function is no longer called, but is preserved here for reference - var url = 'https://www.youtube.com/api/timedtext?fmt=vtt'; - url += '&v=' + youTubeId; - url += '&lang=' + trackLang; - // if track has a value in the name field, it's required in the URL - if (trackName !== '') { - url += '&name=' + trackName; - } - return url; - }; - - - AblePlayer.prototype.getYouTubeCaptionCues = function (youTubeId) { - - var deferred, promise, thisObj; - - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - thisObj = this; - - this.tracks = []; - this.tracks.push({ - 'kind': 'captions', - 'src': 'some_file.vtt', - 'language': 'en', - 'label': 'Fake English captions' - }); - - deferred.resolve(); - return promise; - }; - - AblePlayer.prototype.getYouTubePosterUrl = function (youTubeId, width) { - - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 - - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; - }; - -})(jQuery); - -(function ($) { - - - // Events: - // startTracking(event, position) - // tracking(event, position) - // stopTracking(event, position) - - window. AccessibleSlider = function(mediaType, div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { - - // mediaType is either 'audio' or 'video' - // div is the host element around which the slider will be built - // orientation is either 'horizontal' or 'vertical' - // length is the width or height of the slider, depending on orientation - // min is the low end of the slider scale - // max is the high end of the slider scale - // bigInterval is the number of steps supported by page up/page down (set to 0 if not supported) - // (smallInterval, defined as nextStep below, is always set to 1) - this is the interval supported by arrow keys - // label is used within an aria-label attribute to identify the slider to screen reader users - // className is used as the root within class names (e.g., 'able-' + classname + '-head') - // trackingMedia is true if this is a media timeline; otherwise false - // initialState is either 'visible' or 'hidden' - - var thisObj, coords; - - thisObj = this; - - // Initialize some variables. - this.position = 0; // Note: position does not change while tracking. - this.tracking = false; - this.trackDevice = null; // 'mouse' or 'keyboard' - this.keyTrackPosition = 0; - this.lastTrackPosition = 0; - this.nextStep = 1; - this.inertiaCount = 0; - - this.bodyDiv = $(div); - - // Add divs for tracking amount of media loaded and played - if (trackingMedia) { - this.loadedDiv = $('<div></div>'); - this.playedDiv = $('<div></div>'); - } - - // Add a seekhead - this.seekHead = $('<div>',{ - 'aria-orientation': orientation, - 'class': 'able-' + className + '-head' - }); - - if (initialState === 'visible') { - this.seekHead.attr('tabindex', '0'); - } - else { - this.seekHead.attr('tabindex', '-1'); - } - // Since head is focusable, it gets the aria roles/titles. - this.seekHead.attr({ - 'role': 'slider', - 'aria-label': label, - 'aria-valuemin': min, - 'aria-valuemax': max - }); - - this.timeTooltip = $('<div>'); - this.bodyDiv.append(this.timeTooltip); - - this.timeTooltip.attr('role', 'tooltip'); - this.timeTooltip.addClass('able-tooltip'); - this.timeTooltip.hide(); - - this.bodyDiv.append(this.loadedDiv); - this.bodyDiv.append(this.playedDiv); - this.bodyDiv.append(this.seekHead); - - this.bodyDiv.wrap('<div></div>'); - this.wrapperDiv = this.bodyDiv.parent(); - - if (this.skin === 'legacy') { - if (orientation === 'horizontal') { - this.wrapperDiv.width(length); - this.loadedDiv.width(0); - } - else { - this.wrapperDiv.height(length); - this.loadedDiv.height(0); - } - } - this.wrapperDiv.addClass('able-' + className + '-wrapper'); - - if (trackingMedia) { - this.loadedDiv.addClass('able-' + className + '-loaded'); - - this.playedDiv.width(0); - this.playedDiv.addClass('able-' + className + '-played'); - - // Set a default duration. User can call this dynamically if duration changes. - this.setDuration(max); - } - - // handle seekHead events - this.seekHead.on('mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend', function (e) { - - coords = thisObj.pointerEventToXY(e); - - if (e.type === 'mouseenter' || e.type === 'focus') { - thisObj.overHead = true; - } - else if (e.type === 'mouseleave' || e.type === 'blur') { - thisObj.overHead = false; - if (!thisObj.overBody && thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); - } - } - else if (e.type === 'mousemove' || e.type === 'touchmove') { - if (thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.trackHeadAtPageX(coords.x); - } - } - else if (e.type === 'mousedown' || e.type === 'touchstart') { - thisObj.startTracking('mouse', thisObj.pageXToPosition(thisObj.seekHead.offset() + (thisObj.seekHead.width() / 2))); - if (!thisObj.bodyDiv.is(':focus')) { - thisObj.bodyDiv.focus(); - } - e.preventDefault(); - } - else if (e.type === 'mouseup' || e.type === 'touchend') { - if (thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); - } - } - if (e.type !== 'mousemove' && e.type !== 'mousedown' && e.type !== 'mouseup' && e.type !== 'touchstart' && e.type !== 'touchend') { - thisObj.refreshTooltip(); - } - }); - - // handle bodyDiv events - this.bodyDiv.on( - 'mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend', function (e) { - - coords = thisObj.pointerEventToXY(e); - - if (e.type === 'mouseenter') { - thisObj.overBody = true; - } - else if (e.type === 'mouseleave') { - thisObj.overBody = false; - thisObj.overBodyMousePos = null; - if (!thisObj.overHead && thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); - } - } - else if (e.type === 'mousemove' || e.type === 'touchmove') { - thisObj.overBodyMousePos = { - x: coords.x, - y: coords.y - }; - if (thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.trackHeadAtPageX(coords.x); - } - } - else if (e.type === 'mousedown' || e.type === 'touchstart') { - thisObj.startTracking('mouse', thisObj.pageXToPosition(coords.x)); - thisObj.trackHeadAtPageX(coords.x); - if (!thisObj.seekHead.is(':focus')) { - thisObj.seekHead.focus(); - } - e.preventDefault(); - } - else if (e.type === 'mouseup' || e.type === 'touchend') { - if (thisObj.tracking && thisObj.trackDevice === 'mouse') { - thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); - } - } - else if (e.type === 'keydown') { - // Home - if (e.which === 36) { - thisObj.trackImmediatelyTo(0); - } - // End - else if (e.which === 35) { - thisObj.trackImmediatelyTo(thisObj.duration); - } - // Left arrow or down arrow - else if (e.which === 37 || e.which === 40) { - thisObj.arrowKeyDown(-1); - } - // Right arrow or up arrow - else if (e.which === 39 || e.which === 38) { - thisObj.arrowKeyDown(1); - } - // Page up - else if (e.which === 33 && bigInterval > 0) { - thisObj.arrowKeyDown(bigInterval); - } - // Page down - else if (e.which === 34 && bigInterval > 0) { - thisObj.arrowKeyDown(-bigInterval); - } - else { - return; - } - e.preventDefault(); - } - else if (e.type === 'keyup') { - if (e.which >= 33 && e.which <= 40) { - if (thisObj.tracking && thisObj.trackDevice === 'keyboard') { - thisObj.stopTracking(thisObj.keyTrackPosition); - } - e.preventDefault(); - } - } - if (e.type !== 'mouseup' && e.type !== 'keydown' && e.type !== 'keydown') { - thisObj.refreshTooltip(); - } - }); - } - - AccessibleSlider.prototype.arrowKeyDown = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/* - AccessibleSlider.prototype.pageUp = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/ - AccessibleSlider.prototype.pageXToPosition = function (pageX) { - var offset = pageX - this.bodyDiv.offset().left; - var position = this.duration (offset / this.bodyDiv.width()); - return this.boundPos(position); - }; - - AccessibleSlider.prototype.boundPos = function (position) { - return Math.max(0, Math.min(position, this.duration)); - } - - AccessibleSlider.prototype.setDuration = function (duration) { - if (duration !== this.duration) { - this.duration = duration; - this.resetHeadLocation(); - this.seekHead.attr('aria-valuemax', duration); - } - }; - - AccessibleSlider.prototype.setWidth = function (width) { - this.wrapperDiv.width(width); - this.resizeDivs(); - this.resetHeadLocation(); - }; - - AccessibleSlider.prototype.getWidth = function () { - return this.wrapperDiv.width(); - }; - - AccessibleSlider.prototype.resizeDivs = function () { - this.playedDiv.width(this.bodyDiv.width() * (this.position / this.duration)); - this.loadedDiv.width(this.bodyDiv.width() * this.buffered); - }; - - // Stops tracking, sets the head location to the current position. - AccessibleSlider.prototype.resetHeadLocation = function () { - var ratio = this.position / this.duration; - var center = this.bodyDiv.width() * ratio; - this.seekHead.css('left', center - (this.seekHead.width() / 2)); - - if (this.tracking) { - this.stopTracking(this.position); - } - }; - - AccessibleSlider.prototype.setPosition = function (position, updateLive) { - this.position = position; - this.resetHeadLocation(); - this.refreshTooltip(); - this.resizeDivs(); - this.updateAriaValues(position, updateLive); - } - - // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. - AccessibleSlider.prototype.setBuffered = function (ratio) { - if (!isNaN(ratio)) { - this.buffered = ratio; - this.redrawDivs; - } - } - - AccessibleSlider.prototype.startTracking = function (device, position) { - if (!this.tracking) { - this.trackDevice = device; - this.tracking = true; - this.bodyDiv.trigger('startTracking', [position]); - } - }; - - AccessibleSlider.prototype.stopTracking = function (position) { - this.trackDevice = null; - this.tracking = false; - this.bodyDiv.trigger('stopTracking', [position]); - this.setPosition(position, true); - }; - - AccessibleSlider.prototype.trackHeadAtPageX = function (pageX) { - var position = this.pageXToPosition(pageX); - var newLeft = pageX - this.bodyDiv.offset().left - (this.seekHead.width() / 2); - newLeft = Math.max(0, Math.min(newLeft, this.bodyDiv.width() - this.seekHead.width())); - this.lastTrackPosition = position; - this.seekHead.css('left', newLeft); - this.reportTrackAtPosition(position); - }; - - AccessibleSlider.prototype.trackHeadAtPosition = function (position) { - var ratio = position / this.duration; - var center = this.bodyDiv.width() * ratio; - this.lastTrackPosition = position; - this.seekHead.css('left', center - (this.seekHead.width() / 2)); - this.reportTrackAtPosition(position); - }; - - AccessibleSlider.prototype.reportTrackAtPosition = function (position) { - this.bodyDiv.trigger('tracking', [position]); - this.updateAriaValues(position, true); - }; - - AccessibleSlider.prototype.updateAriaValues = function (position, updateLive) { - // TODO: Localize, move to another function. - var pHours = Math.floor(position / 3600); - var pMinutes = Math.floor((position % 3600) / 60); - var pSeconds = Math.floor(position % 60); - - var pHourWord = pHours === 1 ? 'hour' : 'hours'; - var pMinuteWord = pMinutes === 1 ? 'minute' : 'minutes'; - var pSecondWord = pSeconds === 1 ? 'second' : 'seconds'; - - var descriptionText; - if (pHours > 0) { - descriptionText = pHours + - ' ' + pHourWord + - ', ' + pMinutes + - ' ' + pMinuteWord + - ', ' + pSeconds + - ' ' + pSecondWord; - } - else if (pMinutes > 0) { - descriptionText = pMinutes + - ' ' + pMinuteWord + - ', ' + pSeconds + - ' ' + pSecondWord; - } - else { - descriptionText = pSeconds + ' ' + pSecondWord; - } - - /* Comment to stop live region from generating or being used. / - if (!this.liveAriaRegion) { - this.liveAriaRegion = $('<span>', { - 'class': 'able-offscreen', - 'aria-live': 'polite' - }); - this.wrapperDiv.append(this.liveAriaRegion); - } - if (updateLive && (this.liveAriaRegion.text() !== descriptionText)) { - this.liveAriaRegion.text(descriptionText); - } - - // Uncomment the following lines to use aria values instead of separate live region. - this.seekHead.attr('aria-valuetext', descriptionText); - this.seekHead.attr('aria-valuenow', Math.floor(position).toString()); - }; - - AccessibleSlider.prototype.trackImmediatelyTo = function (position) { - this.startTracking('keyboard', position); - this.trackHeadAtPosition(position); - this.keyTrackPosition = position; - }; - - AccessibleSlider.prototype.refreshTooltip = function () { - if (this.overHead) { - this.timeTooltip.show(); - if (this.tracking) { - this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)); - } - else { - this.timeTooltip.text(this.positionToStr(this.position)); - } - this.setTooltipPosition(this.seekHead.position().left + (this.seekHead.width() / 2)); - } - else if (this.overBody && this.overBodyMousePos) { - this.timeTooltip.show(); - this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))); - this.setTooltipPosition(this.overBodyMousePos.x - this.bodyDiv.offset().left); - } - else { - this.timeTooltip.hide(); - } - }; - - AccessibleSlider.prototype.setTooltipPosition = function (x) { - this.timeTooltip.css({ - left: x - (this.timeTooltip.width() / 2) - 10, - bottom: this.seekHead.height() + 10 - }); - }; - - AccessibleSlider.prototype.positionToStr = function (seconds) { - - // same logic as misc.js > formatSecondsAsColonTime() - var dHours = Math.floor(seconds / 3600); - var dMinutes = Math.floor(seconds / 60) % 60; - var dSeconds = Math.floor(seconds % 60); - if (dSeconds < 10) { - dSeconds = '0' + dSeconds; - } - if (dHours > 0) { - if (dMinutes < 10) { - dMinutes = '0' + dMinutes; - } - return dHours + ':' + dMinutes + ':' + dSeconds; - } - else { - return dMinutes + ':' + dSeconds; - } - }; - - AccessibleSlider.prototype.pointerEventToXY = function(e) { - - // returns array of coordinates x and y in response to both mouse and touch events - // for mouse events, this comes from e.pageX and e.pageY - // for touch events, it's a bit more complicated - var out = {x:0, y:0}; - if (e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel') { - var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - out.x = touch.pageX; - out.y = touch.pageY; - } - else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') { - out.x = e.pageX; - out.y = e.pageY; - } - return out; - }; - -})(jQuery); - -(function ($) { - - AblePlayer.prototype.addVolumeSlider = function($div) { - - // input type="range" requires IE10 and later - // and still isn't supported by Opera Mini as of v8 - // Also, vertical orientation of slider requires CSS hacks - // and causes problems in some screen readers - // Therefore, building a custom vertical volume slider - var thisObj, volumeSliderId, volumeHelpId, x, y, volumePct; - - thisObj = this; - - // define a few variables - volumeSliderId = this.mediaId + '-volume-slider'; - volumeHelpId = this.mediaId + '-volume-help'; - this.volumeTrackHeight = 50; // must match CSS height for .able-volume-slider - this.volumeHeadHeight = 7; // must match CSS height for .able-volume-head - this.volumeTickHeight = this.volumeTrackHeight / 10; - - this.$volumeSlider = $('<div>',{ - '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' - }); - this.$volumeSliderTrackOn = $('<div>',{ - 'class': 'able-volume-track able-volume-track-on' - }); - this.$volumeSliderHead = $('<div>',{ - 'class': 'able-volume-head', - 'role': 'slider', - 'aria-orientation': 'vertical', - 'aria-label': this.tt.volumeUpDown, - 'aria-valuemin': 0, - 'aria-valuemax': 10, - 'aria-valuenow': this.volume, - 'tabindex': -1 - }); - this.$volumeSliderTrack.append(this.$volumeSliderTrackOn,this.$volumeSliderHead); - this.$volumeAlert = $('<div>',{ - 'class': 'able-offscreen', - 'aria-live': 'assertive', - 'aria-atomic': 'true' - }); - volumePct = parseInt(thisObj.volume) / 10 100; - this.$volumeHelp = $('<div>',{ - 'id': volumeHelpId, - 'class': 'able-volume-help' - }).text(volumePct + '%, ' + this.tt.volumeHelp); - this.$volumeButton.attr({ - 'aria-describedby': volumeHelpId - }); - this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeSliderTrack,this.$volumeAlert,this.$volumeHelp) - $div.append(this.$volumeSlider); - this.refreshVolumeSlider(this.volume); - - // add event listeners - 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 (e) { - if(thisObj.player == 'youtube'){ - thisObj.draggingVolume = false; - } - }); - - $(document).on('mouseup',function (e) { - thisObj.draggingVolume = false; - }); - - $(document).on('mousemove',function (e) { - if (thisObj.draggingVolume) { - x = e.pageX; - y = e.pageY; - thisObj.moveVolumeHead(y); - } - }); - - this.$volumeSliderHead.on('keydown',function (e) { - - // Left arrow or down arrow - if (e.which === 37 || e.which === 40) { - thisObj.handleVolume('down'); - } - // Right arrow or up arrow - else if (e.which === 39 || e.which === 38) { - thisObj.handleVolume('up'); - } - // Escape key or Enter key or Tab key - else if (e.which === 27 || e.which === 13 || e.which === 9) { - // close popup - if (thisObj.$volumeSlider.is(':visible')) { - thisObj.closingVolume = true; // stopgap - thisObj.hideVolumePopup(); - } - else { - if (!thisObj.closingVolume) { - thisObj.showVolumePopup(); - } - } - } - else { - return; - } - e.preventDefault(); - }); - }; - - AblePlayer.prototype.refreshVolumeSlider = function(volume) { - - // adjust slider position based on current volume - var volumePct, volumePctText; - volumePct = (volume/10) * 100; - volumePctText = volumePct + '%'; - - var trackOnHeight, trackOnTop, headTop; - trackOnHeight = volume * this.volumeTickHeight; - trackOnTop = this.volumeTrackHeight - trackOnHeight; - headTop = trackOnTop - this.volumeHeadHeight; - - if (this.$volumeSliderTrackOn) { - this.$volumeSliderTrackOn.css({ - 'height': trackOnHeight + 'px', - 'top': trackOnTop + 'px' - }); - } - if (this.$volumeSliderHead) { - this.$volumeSliderHead.attr({ - 'aria-valuenow': volume, - 'aria-valuetext': volumePctText - }); - this.$volumeSliderHead.css({ - 'top': headTop + 'px' - }); - } - if (this.$volumeAlert) { - this.$volumeAlert.text(volumePct + '%'); - } - }; - - AblePlayer.prototype.refreshVolumeButton = function(volume) { - - var volumeName, volumePct, volumeLabel, volumeIconClass, volumeImg, newSvgData; - - volumeName = this.getVolumeName(volume); - volumePct = (volume/10) * 100; - volumeLabel = this.tt.volume + ' ' + volumePct + '%'; - - if (this.iconType === 'font') { - volumeIconClass = 'icon-volume-' + volumeName; - this.$volumeButton.find('span').first().removeClass().addClass(volumeIconClass); - this.$volumeButton.find('span.able-clipped').text(volumeLabel); - } - else if (this.iconType === 'image') { - volumeImg = this.imgPath + 'volume-' + volumeName + '.png'; - this.$volumeButton.find('img').attr('src',volumeImg); - } - else if (this.iconType === 'svg') { - if (volumeName !== 'mute') { - volumeName = 'volume-' + volumeName; - } - newSvgData = this.getSvgData(volumeName); - this.$volumeButton.find('svg').attr('viewBox',newSvgData[0]); - this.$volumeButton.find('path').attr('d',newSvgData[1]); - } - }; - - AblePlayer.prototype.moveVolumeHead = function(y) { - - // y is current position after mousemove - var diff, direction, ticksDiff, newVolume, maxedOut; - - var diff = this.volumeHeadPositionTop - y; - - // only move the volume head if user had dragged at least one tick - // this is more efficient, plus creates a "snapping' effect - if (Math.abs(diff) > this.volumeTickHeight) { - if (diff > 0) { - direction = 'up'; - } - else { - direction = 'down'; - } - if (direction == 'up' && this.volume == 10) { - // can't go any higher - return; - } - else if (direction == 'down' && this.volume == 0) { - // can't go any lower - return; - } - else { - ticksDiff = Math.round(Math.abs(diff) / this.volumeTickHeight); - if (direction == 'up') { - newVolume = this.volume + ticksDiff; - if (newVolume > 10) { - newVolume = 10; - } - } - else { // direction is down - newVolume = this.volume - ticksDiff; - if (newVolume < 0) { - newVolume = 0; - } - } - this.setVolume(newVolume); // this.volume will be updated after volumechange event fires (event.js) - this.refreshVolumeSlider(newVolume); - this.refreshVolumeButton(newVolume); - this.volumeHeadPositionTop = y; - } - } - }; - - AblePlayer.prototype.handleVolume = function(direction) { - - // 'direction is either 'up','down', or an ASCII key code 49-57 (numeric keys 1-9) - // Action: calculate and change the volume - // Don't change this.volume and this.volumeButton yet - wait for 'volumechange' event to fire (event.js) - - // If NO direction is provided, user has just clicked on the Volume button - // Action: show slider - var volume; - - if (typeof direction === 'undefined') { - if (this.$volumeSlider.is(':visible')) { - this.hideVolumePopup(); - } - else { - if (!this.closingVolume) { - this.showVolumePopup(); - } - } - return; - } - - if (direction >= 49 && direction <= 57) { - volume = direction - 48; - } - else { - - volume = this.getVolume(); - - if (direction === 'up' && volume < 10) { - volume += 1; - } - else if (direction === 'down' && volume > 0) { - volume -= 1; - } - } - - if (this.isMuted() && volume > 0) { - this.setMute(false); - } - else if (volume === 0) { - this.setMute(true); - } - else { - this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) - this.refreshVolumeSlider(volume); - this.refreshVolumeButton(volume); - } - }; - - AblePlayer.prototype.handleMute = function() { - - if (this.isMuted()) { - this.setMute(false); - } - else { - this.setMute(true); - } - }; - - AblePlayer.prototype.showVolumePopup = function() { - - this.closePopups(); - this.$tooltipDiv.hide(); - this.$volumeSlider.show().attr('aria-hidden','false'); - this.$volumeButton.attr('aria-expanded','true'); - this.$volumeSliderHead.attr('tabindex','0').focus(); - }; - - AblePlayer.prototype.hideVolumePopup = function() { - - var thisObj = this; - - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeSliderHead.attr('tabindex','-1'); - this.$volumeButton.attr('aria-expanded','false').focus(); - // wait a second before resetting stopgap var - // otherwise the keypress used to close volume popup will trigger the volume button - setTimeout(function() { - thisObj.closingVolume = false; - }, 1000); - }; - - AblePlayer.prototype.isMuted = function () { - - if (this.player === 'html5') { - return this.media.muted; - } - else if (this.player === 'jw' && this.jwPlayer) { - return this.jwPlayer.getMute(); - } - else if (this.player === 'youtube') { - return this.youTubePlayer.isMuted(); - } - }; - - AblePlayer.prototype.setMute = function(mute) { - - // mute is either true (muting) or false (unmuting) - if (mute) { - // save current volume so it can be restored after unmute - this.lastVolume = this.volume; - this.volume = 0; - } - else { // restore to previous volume - if (typeof this.lastVolume !== 'undefined') { - this.volume = this.lastVolume; - } - } - - if (this.player === 'html5') { - this.media.muted = mute; - } - else if (this.player === 'jw' && this.jwPlayer) { - this.jwPlayer.setMute(mute); - } - else if (this.player === 'youtube') { - if (mute) { - this.youTubePlayer.mute(); - } - else { - this.youTubePlayer.unMute(); - } - } - this.refreshVolumeSlider(this.volume); - this.refreshVolumeButton(this.volume); - }; - - AblePlayer.prototype.setVolume = function (volume) { - - // volume is 1 to 10 - // convert as needed depending on player - - if (this.player === 'html5') { - // volume is 0 to 1 - this.media.volume = volume / 10; - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.volume = 0; // always mute - } - } - else if (this.player === 'youtube') { - // volume is 0 to 100 - this.youTubePlayer.setVolume(volume * 10); - this.volume = volume; - } - else if (this.player === 'vimeo') { - // volume is 0 to 1 - this.vimeoPlayer.setVolume(volume / 10).then(function() { - // setVolume finished. - // could do something here - // successful completion also fires a 'volumechange' event (see event.js) - }); - } - else if (this.player === 'jw' && this.jwPlayer) { - // volume is 0 to 100 - this.jwPlayer.setVolume(volume * 10); - } - this.lastVolume = volume; - }; - - AblePlayer.prototype.getVolume = function (volume) { - - // return volume using common audio control scale 1 to 10 - if (this.player === 'html5') { - // uses 0 to 1 scale - return this.media.volume * 10; - } - else if (this.player === 'youtube') { - // uses 0 to 100 scale - return this.youTubePlayer.getVolume() / 10; - } - if (this.player === 'vimeo') { - // uses 0 to 1 scale - // this.vimeoPlayer.getVolume() takes too long to resolve with a value - // Just use variable that's already been defined (should be the same value anyway) - return this.volume; - } - else if (this.player === 'jw' && this.jwPlayer) { - // uses 0 to 100 scale - return this.jwPlayer.getVolume() / 10; - } - }; - - AblePlayer.prototype.getVolumeName = function (volume) { - - // returns 'mute','soft','medium', or 'loud' depending on volume level - if (volume == 0) { - return 'mute'; - } - else if (volume == 10) { - return 'loud'; - } - else if (volume < 5) { - return 'soft'; - } - else { - return 'medium'; - } - }; - -})(jQuery); - -(function ($) { - var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"; - - // Based on the incredible accessible modal dialog. - window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) { - - this.title = title; - this.closeButtonLabel = closeButtonLabel; - this.focusedElementBeforeModal = $returnElement; - this.escapeHook = escapeHook; - this.baseId = $(modalDiv).attr('id') || Math.floor(Math.random() * 1000000000).toString(); - var thisObj = this; - var modal = modalDiv; - this.modal = modal; - modal.css({ - 'width': width || '50%' - }); - modal.addClass('able-modal-dialog'); - - if (!fullscreen) { - var closeButton = $('<button>',{ - 'class': 'modalCloseButton', - 'title': thisObj.closeButtonLabel, - 'aria-label': thisObj.closeButtonLabel - }).text('X'); - closeButton.keydown(function (e) { - // Space key down - if (e.which === 32) { - thisObj.hide(); - } - }).click(function () { - thisObj.hide(); - }); - - var titleH1 = $('<h1></h1>'); - titleH1.attr('id', 'modalTitle-' + this.baseId); - titleH1.css('text-align', 'center'); - titleH1.text(title); - - $descDiv.attr('id', 'modalDesc-' + this.baseId); - - modal.attr({ - 'aria-labelledby': 'modalTitle-' + this.baseId, - 'aria-describedby': 'modalDesc-' + this.baseId - }); - modal.prepend(titleH1); - modal.prepend(closeButton); - } - - modal.attr({ - 'aria-hidden': 'true', - 'role': dialogRole - }); - - modal.keydown(function (e) { - // Escape - if (e.which === 27) { - if (thisObj.escapeHook) { - thisObj.escapeHook(e, this); - } - else { - thisObj.hide(); - e.preventDefault(); - } - } - // Tab - else if (e.which === 9) { - // Manually loop tab navigation inside the modal. - var parts = modal.find(''); - var focusable = parts.filter(focusableElementsSelector).filter(':visible'); - - if (focusable.length === 0) { - return; - } - - var focused = $(':focus'); - var currentIndex = focusable.index(focused); - if (e.shiftKey) { - // If backwards from first element, go to last. - if (currentIndex === 0) { - focusable.get(focusable.length - 1).focus(); - e.preventDefault(); - } - } - else { - if (currentIndex === focusable.length - 1) { - focusable.get(0).focus(); - e.preventDefault(); - } - } - } - e.stopPropagation(); - }); - - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); - }; - - AccessibleDialog.prototype.show = function () { - if (!this.overlay) { - // Generate overlay. - var overlay = $('<div></div>').attr({ - 'class': 'able-modal-overlay', - 'tabindex': '-1' - }); - this.overlay = overlay; - $('body').append(overlay); - - // Keep from moving focus out of dialog when clicking outside of it. - overlay.on('mousedown.accessibleModal', function (e) { - e.preventDefault(); - }); - } - - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true'); - - this.overlay.css('display', 'block'); - this.modal.css('display', 'block'); - this.modal.attr({ - 'aria-hidden': 'false', - 'tabindex': '-1' - }); - - var focusable = this.modal.find("").filter(focusableElementsSelector).filter(':visible'); - if (focusable.length === 0) { - this.focusedElementBeforeModal.blur(); - } - var thisObj = this; - setTimeout(function () { - // set focus on the first focusable element - thisObj.modal.find('button.modalCloseButton').first().focus(); - }, 300); - }; - - AccessibleDialog.prototype.hide = function () { - if (this.overlay) { - this.overlay.css('display', 'none'); - } - this.modal.css('display', 'none'); - this.modal.attr('aria-hidden', 'true'); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); - - this.focusedElementBeforeModal.focus(); - }; - - AccessibleDialog.prototype.getInputs = function () { - - // return an array of input elements within this dialog - if (this.modal) { - var inputs = this.modal.find('input'); - return inputs; - } - return false; - }; - -})(jQuery); - -(function ($) { - - AblePlayer.prototype.getNextHeadingLevel = function($element) { - - // Finds the nearest heading in the ancestor tree - // Loops over each parent of the current element until a heading is found - // If multiple headings are found beneath a given parent, get the closest - // Returns an integer (1-6) representing the next available heading level - - var $parents, $foundHeadings, numHeadings, headingType, headingNumber; - - $parents = $element.parents(); - $parents.each(function(){ - $foundHeadings = $(this).children(':header'); - numHeadings = $foundHeadings.length; - if (numHeadings) { - headingType = $foundHeadings.eq(numHeadings-1).prop('tagName'); - return false; - } - }); - if (typeof headingType === 'undefined') { - // page has no headings - headingNumber = 1; - } - else { - // Increment closest heading by one if less than 6. - headingNumber = parseInt(headingType[1]); - headingNumber += 1; - if (headingNumber > 6) { - headingNumber = 6; - } - } - return headingNumber; - }; - - AblePlayer.prototype.countProperties = function(obj) { - - // returns the number of properties in an object - var count, prop; - count = 0; - for (prop in obj) { - if (obj.hasOwnProperty(prop)) { - ++count; - } - } - return count; - }; - - AblePlayer.prototype.formatSecondsAsColonTime = function (seconds, showFullTime) { - - // Takes seconds and converts to string of form hh:mm:ss - // If showFullTime is true, shows 00 for hours if time is less than an hour - // and show milliseconds (e.g., 00:00:04.123 as in Video Track Sorter) - // Otherwise, omits empty hours and milliseconds (e.g., 00:04 as in timer on controller) - - var dHours, dMinutes, dSeconds, - parts, milliSeconds, numShort, i; - - if (showFullTime) { - // preserve milliseconds, if included in seconds - parts = seconds.toString().split('.'); - if (parts.length === 2) { - milliSeconds = parts[1]; - if (milliSeconds.length < 3) { - numShort = 3 - milliSeconds.length; - for (i=1; i <= numShort; i++) { - milliSeconds += '0'; - } - } - } - else { - milliSeconds = '000'; - } - } - dHours = Math.floor(seconds / 3600); - dMinutes = Math.floor(seconds / 60) % 60; - dSeconds = Math.floor(seconds % 60); - if (dSeconds < 10) { - dSeconds = '0' + dSeconds; - } - if (dHours > 0) { - if (dMinutes < 10) { - dMinutes = '0' + dMinutes; - } - if (showFullTime) { - return dHours + ':' + dMinutes + ':' + dSeconds + '.' + milliSeconds; - } - else { - return dHours + ':' + dMinutes + ':' + dSeconds; - } - } - else { - if (showFullTime) { - if (dHours < 1) { - dHours = '00'; - } - else if (dHours < 10) { - dHours = '0' + dHours; - } - if (dMinutes < 1) { - dMinutes = '00'; - } - else if (dMinutes < 10) { - dMinutes = '0' + dMinutes; - } - return dHours + ':' + dMinutes + ':' + dSeconds + '.' + milliSeconds; - } - else { - return dMinutes + ':' + dSeconds; - } - } - }; - - AblePlayer.prototype.getSecondsFromColonTime = function (timeStr) { - - // Converts string of form hh:mm:ss to seconds - var timeParts, hours, minutes, seconds, newTime; - - timeParts = timeStr.split(':'); - if (timeParts.length === 3) { - hours = parseInt(timeParts[0]); - minutes = parseInt(timeParts[1]); - seconds = parseFloat(timeParts[2]); - return ((hours 3600) + (minutes * 60) + (seconds)); - } - else if (timeParts.length === 2) { - minutes = parseInt(timeParts[0]); - seconds = parseFloat(timeParts[1]); - return ((minutes * 60) + (seconds)); - } - else if (timeParts.length === 1) { - seconds = parseFloat(timeParts[0]); - return seconds; - } - }; - - AblePlayer.prototype.capitalizeFirstLetter = function (string) { - return string.charAt(0).toUpperCase() + string.slice(1); - }; - - AblePlayer.prototype.roundDown = function (value, decimals) { - - // round value down to the nearest X decimal points - // where X is the value of the decimals parameter - return Number(Math.floor(value+'e'+decimals)+'e-'+decimals); - }; - - AblePlayer.prototype.hasAttr = function (object, attribute) { - - // surprisingly, there is no hasAttr() function in Jquery as of 3.2.1 - // return true if object has attribute; otherwise false - // selector is a Jquery object - // attribute is a string - - var attr = object.attr(attribute); - - // For some browsers, `attr` is undefined; for others, - // `attr` is false. Check for both. - if (typeof attr !== typeof undefined && attr !== false) { - return true; - } - else { - return false; - } - }; - - Number.isInteger = Number.isInteger || function(value) { - - // polyfill for IE11, which doesn't otherwise support Number.isInteger - // https://stackoverflow.com/a/31720368/744281 - return typeof value === "number" && isFinite(value) && Math.floor(value) === value; - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.initDescription = function() { - - // set default mode for delivering description (open vs closed) - // based on availability and user preference - - // called when player is being built, or when a user - // toggles the Description button or changes a description-related preference - // In the latter two scendarios, this.refreshingDesc == true via control.js > handleDescriptionToggle() - - // The following variables are applicable to delivery of description: - // prefDesc == 1 if user wants description (i.e., Description button is on); else 0 - // prefDescFormat == either 'video' or 'text' (as of v4.0.10, prefDescFormat is always 'video') - // useDescFormat is the format actually used ('video' or 'text'), regardless of user preference - // prevDescFormat is the value of useDescFormat before user toggled off description - // prefDescPause == 1 to pause video when description starts; else 0 - // prefDescVisible == 1 to visibly show text-based description area; else 0 - // hasOpenDesc == true if a described version of video is available via data-desc-src attribute - // hasClosedDesc == true if a description text track is available - // descOn == true if description of either type is on - // exposeTextDescriptions == true if text description is to be announced audibly; otherwise false - - var thisObj = this; - if (this.refreshingDesc) { - this.prevDescFormat = this.useDescFormat; - } - else { - // this is the initial build - // first, check to see if there's an open-described version of this video - // checks only the first source since if a described version is provided, - // it must be provided for all sources - this.descFile = this.$sources.first().attr('data-desc-src'); - if (typeof this.descFile !== 'undefined') { - this.hasOpenDesc = true; - } - else { - // there's no open-described version via data-desc-src, - // but what about data-youtube-desc-src or data-vimeo-desc-src? - if (this.youTubeDescId || this.vimeoDescId) { - this.hasOpenDesc = true; - } - else { // there are no open-described versions from any source - this.hasOpenDesc = false; - } - } - } - - // Set this.useDescFormat based on media availability & user preferences - if (this.prefDesc) { - if (this.hasOpenDesc && this.hasClosedDesc) { - // both formats are available. User gets their preference. - this.useDescFormat = this.prefDescFormat; - this.descOn = true; - } - else if (this.hasOpenDesc) { - this.useDescFormat = 'video'; - this.descOn = true; - } - else if (this.hasClosedDesc) { - this.useDescFormat = 'text'; - this.descOn = true; - } - } - else { - // prefDesc is not set for this user - this.useDescFormat = null; - this.descOn = false; - } - - if (this.useDescFormat === 'video') { - // If text descriptions are also available, silence them - this.exposeTextDescriptions = false; - } - - if (this.descOn) { - if (this.useDescFormat === 'video') { - if (!this.usingDescribedVersion()) { - // switched from non-described to described version - this.swapDescription(); - } - } - if (this.hasClosedDesc) { - if (this.prefDescVisible) { - // make description text visible - // New in v4.0.10: Do this regardless of useDescFormat - this.$descDiv.show(); - this.$descDiv.removeClass('able-clipped'); - } - else { - // keep it visible to screen readers, but hide it visibly - this.$descDiv.addClass('able-clipped'); - } - if (!this.swappingSrc) { - this.showDescription(this.elapsed); - } - } - } - else { // description is off. - if (this.prevDescFormat === 'video') { // user has turned off described version of video - if (this.usingDescribedVersion()) { - // user was using the described verion. Swap for non-described version - this.swapDescription(); - } - } - else if (this.prevDescFormat === 'text') { // user has turned off text description - // hide description div from everyone, including screen reader users - this.$descDiv.hide(); - this.$descDiv.removeClass('able-clipped'); - } - } - this.refreshingDesc = false; - }; - - AblePlayer.prototype.usingDescribedVersion = function () { - - // Returns true if currently using audio description, false otherwise. - - if (this.player === 'youtube') { - return (this.activeYouTubeId === this.youTubeDescId); - } - else if (this.player === 'vimeo') { - return (this.activeVimeoId === this.vimeoDescId); - } - else { - return (this.$sources.first().attr('data-desc-src') === this.$sources.first().attr('src')); - } - }; - - AblePlayer.prototype.getBrowserVoices = function () { - - // define this.descVoices - // NOTE: Some browsers (e.g., Chrome) require a user-initiated click before - // this.synth.getVoices() will work - - var voices, descLangs, voiceLang, playerLang; - - // if browser supports Web Speech API - // define this.descvoices (an array of available voices in this browser) - if (window.speechSynthesis) { - this.synth = window.speechSynthesis; - voices = this.synth.getVoices(); - descLangs = this.getDescriptionLangs(); - if (voices.length > 0) { - this.descVoices = []; - // available languages are identified with local suffixes (e.g., en-US) - for (var i=0; i<voices.length; i++) { - // match only the first 2 characters of the lang code - // include any language for which there is a matching description track - // as well as the overall player lang - voiceLang = voices[i].lang.substr(0,2).toLowerCase(); - playerLang = this.lang.substr(0,2).toLowerCase(); - if (voiceLang === playerLang || (descLangs.indexOf(voiceLang) !== -1)) { - // this is a match. Add to the final array - this.descVoices.push(voices[i]); - } - } - if (!this.descVoices.length) { - // no voices available in the default language(s) - // just use all voices, regardless of language - this.descVoices = voices; - } - } - } - return false; - }; - - AblePlayer.prototype.getDescriptionLangs = function () { - - // returns an array of languages (from srclang atttributes) - // in which there are description tracks - // use only first two characters of the lang code - var descLangs = []; - if (this.tracks) { - for (var i=0; i < this.tracks.length; i++) { - if (this.tracks[i].kind === 'descriptions') { - descLangs.push(this.tracks[i].language.substr(0,2).toLowerCase()); - } - } - } - return descLangs; - }; - - AblePlayer.prototype.updateDescriptionVoice = function () { - - // Called if user chooses a subtitle language for which there is a matching - // description track, and the subtitle language is different than the player language - // This ensures the description is read in a proper voice for the selected language - - var voices, descVoice; - if (!this.descVoices) { - this.getBrowserVoices(); - if (this.descVoices) { - this.rebuildDescPrefsForm(); - } - } - else if (!this.$voiceSelectField) { - this.rebuildDescPrefsForm(); - } - - descVoice = this.selectedDescriptions.language; - - if (this.synth) { - voices = this.synth.getVoices(); - if (voices.length > 0) { - // available languages are identified with local suffixes (e.g., en-US) - for (var i=0; i<voices.length; i++) { - // select the first language that matches the first 2 characters of the lang code - if (voices[i].lang.substr(0,2).toLowerCase() === descVoice.substr(0,2).toLowerCase()) { - // make this the user's current preferred voice - this.prefDescVoice = voices[i].name; - // select this voice in the Description Prefs dialog - if (this.$voiceSelectField) { - this.$voiceSelectField.val(this.prefDescVoice); - } - break; - } - } - } - } - }; - - AblePlayer.prototype.swapDescription = function() { - - // swap described and non-described source media, depending on which is playing - // this function is only called in two circumstances: - // 1. Swapping to described version when initializing player (based on user prefs & availability) - // 2. User is toggling description - var thisObj, i, origSrc, descSrc, srcType, newSource; - - thisObj = this; - - // get current time, and start new video at the same time - // NOTE: There is some risk in resuming playback at the same start time - // since the described version might include extended audio description (with pauses) - // and might therefore be longer than the non-described version - // The benefits though would seem to outweigh this risk - - this.swapTime = this.elapsed; // video will scrub to this time after loaded (see event.js) - if (this.descOn) { - // user has requested the described version - this.showAlert(this.tt.alertDescribedVersion); - } - else { - // user has requested the non-described version - this.showAlert(this.tt.alertNonDescribedVersion); - } - if (this.player === 'html5') { - - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - for (i=0; i < this.$sources.length; i++) { - // for all <source> elements, replace src with data-orig-src - origSrc = this.$sources[i].getAttribute('data-orig-src'); - srcType = this.$sources[i].getAttribute('type'); - if (origSrc) { - this.$sources[i].setAttribute('src',origSrc); - } - } - // No need to check for this.initializing - // This function is only called during initialization - // if swapping from non-described to described - this.swappingSrc = true; - } - else { - // the non-described version is currently playing. Swap to described. - for (i=0; i < this.$sources.length; i++) { - // for all <source> elements, replace src with data-desc-src (if one exists) - // then store original source in a new data-orig-src attribute - origSrc = this.$sources[i].getAttribute('src'); - descSrc = this.$sources[i].getAttribute('data-desc-src'); - srcType = this.$sources[i].getAttribute('type'); - if (descSrc) { - this.$sources[i].setAttribute('src',descSrc); - this.$sources[i].setAttribute('data-orig-src',origSrc); - } - } - this.swappingSrc = true; - } - - // now reload the source file. - if (this.player === 'html5') { - this.media.load(); - } - } - else if (this.player === 'youtube') { - - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeYouTubeId = this.youTubeId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { - // the non-described version is currently playing. Swap to described. - this.activeYouTubeId = this.youTubeDescId; - this.showAlert(this.tt.alertDescribedVersion); - } - if (typeof this.youTubePlayer !== 'undefined') { - - if (thisObj.playing) { - // loadVideoById() loads and immediately plays the new video at swapTime - thisObj.youTubePlayer.loadVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - else { - // cueVideoById() loads the new video and seeks to swapTime, but does not play - thisObj.youTubePlayer.cueVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - } - } - else if (this.player === 'vimeo') { - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeVimeoId = this.vimeoId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { - // the non-described version is currently playing. Swap to described. - this.activeVimeoId = this.vimeoDescId; - this.showAlert(this.tt.alertDescribedVersion); - } - // load the new video source - this.vimeoPlayer.loadVideo(this.activeVimeoId).then(function() { - - if (thisObj.playing) { - // video was playing when user requested an alternative version - // seek to swapTime and continue playback (playback happens automatically) - thisObj.vimeoPlayer.setCurrentTime(thisObj.swapTime); - } - else { - // Vimeo autostarts immediately after video loads - // The "Described" button should not trigger playback, so stop this before the user notices. - thisObj.vimeoPlayer.pause(); - } - }); - } - }; - - AblePlayer.prototype.showDescription = function(now) { - - // there's a lot of redundancy between this function and showCaptions - // Trying to combine them ended up in a mess though. Keeping as is for now. - - if (!this.exposeTextDescriptions || this.swappingSrc || !this.descOn) { - return; - } - - var thisObj, i, cues, d, thisDescription, descText, msg; - thisObj = this; - - var flattenComponentForDescription = function (component) { - var result = []; - if (component.type === 'string') { - result.push(component.value); - } - else { - for (var i = 0; i < component.children.length; i++) { - result.push(flattenComponentForDescription(component.children[i])); - } - } - return result.join(''); - }; - - if (this.selectedDescriptions) { - cues = this.selectedDescriptions.cues; - } - else if (this.descriptions.length >= 1) { - cues = this.descriptions[0].cues; - } - else { - cues = []; - } - for (d = 0; d < cues.length; d++) { - if ((cues[d].start <= now) && (cues[d].end > now)) { - thisDescription = d; - break; - } - } - if (typeof thisDescription !== 'undefined') { - if (this.currentDescription !== thisDescription) { - // temporarily remove aria-live from $status in order to prevent description from being interrupted - this.$status.removeAttr('aria-live'); - descText = flattenComponentForDescription(cues[thisDescription].components); - if (window.speechSynthesis) { - // browser supports speech synthsis - this.announceDescriptionText('description',descText); - if (this.prefDescVisible) { - // write description to the screen for sighted users - // but remove ARIA attributes since it isn't intended to be read by screen readers - this.$descDiv.html(descText).removeAttr('aria-live aria-atomic'); - } - } - else { - // browser does not support speech synthesis - // load the new description into the container div for screen readers to read - this.$descDiv.html(descText); - } - if (this.prefDescPause && this.exposeTextDescriptions) { - this.pauseMedia(); - this.pausedForDescription = true; - } - this.currentDescription = thisDescription; - } - } - else { - this.$descDiv.html(''); - this.currentDescription = -1; - // restore aria-live to $status - this.$status.attr('aria-live','polite'); - } - }; - - AblePlayer.prototype.announceDescriptionText = function(context, text) { - - // this function announces description text using speech synthesis - // it's only called if already determined that browser supports speech synthesis - // context is either: - // 'description' - actual description text extracted from WebVTT file - // 'sample' - called when user changes a setting in Description Prefs dialog - - var thisObj, speechTimeout, voiceName, i, voice, pitch, rate, volume, utterance; - - thisObj = this; - - // As of Feb 2021, - // 1. In some browsers (e.g., Chrome) window.speechSynthesis.getVoices() - // returns 0 voices unless the request is triggered with a user click - // Therefore, description may have failed to initialize when the page loaded - // This function cannot have been called without a mouse click. - // Therefore, this is a good time to check that, and try again if needed - // 2. In some browsers, the window.speechSynthesis.speaking property fails to reset, - // and onend event is never fired. This prevents new speech from being spoken. - // window.speechSynthesis.cancel() also fails, so it's impossible to recover. - // This only seems to happen with some voices. - // Typically the first voice in the getVoices() array (index 0) is realiable - // When speech synthesis gets wonky, this is a deep problem that impacts all browsers - // and typically requires a computer reboot to make right again. - // This has been observed frequently in macOS Big Sur, but also in Windows 10 - // To ignore user's voice preferences and always use the first voice, set the following var to true - // This is for testing only; not recommended for production - // unless the voice select field is also removed from the Prefs dialog - var useFirstVoice = false; - - if (!this.descVoices) { - // voices array failed to load the first time. Try again - this.getBrowserVoices(); - } - - if (context === 'sample') { - // get settings from form - voiceName = $('#' + this.mediaId + '_prefDescVoice').val(); - pitch = $('#' + this.mediaId + '_prefDescPitch').val(); - rate = $('#' + this.mediaId + '_prefDescRate').val(); - volume = $('#' + this.mediaId + '_prefDescVolume').val(); - } - else { - // get settings from global prefs - voiceName = this.prefDescVoice; - pitch = this.prefDescPitch; - rate = this.prefDescRate; - volume = this.prefDescVolume; - } - - // get the voice associated with the user's chosen voice name - if (this.descVoices) { - if (this.descVoices.length > 0) { - if (useFirstVoice) { - voice = this.descVoices[0]; - } - else if (voiceName) { - // get the voice that matches user's preferred voiceName - for (i = 0; i < this.descVoices.length; i++) { - if (this.descVoices[i].name == voiceName) { - voice = this.descVoices[i]; - break; - } - } - } - if (typeof voice === 'undefined') { - // no matching voice was found - // use the first voice in the array - voice = this.descVoices[0]; - } - - utterance = new SpeechSynthesisUtterance(); - utterance.voice = voice; - utterance.voiceURI = 'native'; - utterance.volume = volume; - utterance.rate = rate; - utterance.pitch = pitch; - utterance.text = text; - // TODO: Consider the best language for the utterance: - // language of the web page? (this.lang) - // language of the WebVTT description track? - // language of the user's chosen voice? - // If there's a mismatch between any of these, the description will likely be unintelligible - utterance.lang = this.lang; - utterance.onend = function(e) { - // do something after speaking - - if (context === 'description') { - if (thisObj.prefDescPause) { - if (thisObj.pausedForDescription && thisObj.exposeTextDescriptions) { - thisObj.playMedia(); - this.pausedForDescription = false; - } - } - } - }; - utterance.onerror = function(e) { - // handle error - - } - this.synth.speak(utterance); - } - } - }; - -})(jQuery); - -(function ($) { - - AblePlayer.prototype.getUserAgent = function() { - - // Whenever possible we avoid browser sniffing. Better to do feature detection. - // However, in case it's needed... - // this function defines a userAgent array that can be used to query for common browsers and OSs - // NOTE: This would be much simpler with jQuery.browser but that was removed from jQuery 1.9 - // http://api.jquery.com/jQuery.browser/ - this.userAgent = {}; - this.userAgent.browser = {}; - - // Test for common browsers - if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits); - this.userAgent.browser.name = 'Firefox'; - this.userAgent.browser.version = RegExp.$1; // capture x.x portion - } - else if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x (IE10 or lower) - this.userAgent.browser.name = 'Internet Explorer'; - this.userAgent.browser.version = RegExp.$1; - } - else if (/Trident.rv[ :](\d+\.\d+)/.test(navigator.userAgent)) { // test for IE11 or higher - this.userAgent.browser.name = 'Internet Explorer'; - this.userAgent.browser.version = RegExp.$1; - } - else if (/Edge[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { // test for MS Edge - this.userAgent.browser.name = 'Edge'; - this.userAgent.browser.version = RegExp.$1; - } - else if (/OPR\/(\d+\.\d+)/i.test(navigator.userAgent)) { // Opera 15 or over - this.userAgent.browser.name = 'Opera'; - this.userAgent.browser.version = RegExp.$1; - } - else if (/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)) { - this.userAgent.browser.name = 'Chrome'; - if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { - this.userAgent.browser.version = RegExp.$1; - } - } - else if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) { - this.userAgent.browser.name = 'Safari'; - if (/Version[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { - this.userAgent.browser.version = RegExp.$1; - } - } - else { - this.userAgent.browser.name = 'Unknown'; - this.userAgent.browser.version = 'Unknown'; - } - - // Now test for common operating systems - if (window.navigator.userAgent.indexOf("Windows NT 6.2") != -1) { - this.userAgent.os = "Windows 8"; - } - else if (window.navigator.userAgent.indexOf("Windows NT 6.1") != -1) { - this.userAgent.os = "Windows 7"; - } - else if (window.navigator.userAgent.indexOf("Windows NT 6.0") != -1) { - this.userAgent.os = "Windows Vista"; - } - else if (window.navigator.userAgent.indexOf("Windows NT 5.1") != -1) { - this.userAgent.os = "Windows XP"; - } - else if (window.navigator.userAgent.indexOf("Windows NT 5.0") != -1) { - this.userAgent.os = "Windows 2000"; - } - else if (window.navigator.userAgent.indexOf("Mac")!=-1) { - this.userAgent.os = "Mac/iOS"; - } - else if (window.navigator.userAgent.indexOf("X11")!=-1) { - this.userAgent.os = "UNIX"; - } - else if (window.navigator.userAgent.indexOf("Linux")!=-1) { - this.userAgent.os = "Linux"; - } - if (this.debug) { - - - - - - } - }; - - AblePlayer.prototype.isUserAgent = function(which) { - - var userAgent = navigator.userAgent.toLowerCase(); - if (this.debug) { - - } - if (userAgent.indexOf(which.toLowerCase()) !== -1) { - return true; - } - else { - return false; - } - }; - - AblePlayer.prototype.isIOS = function(version) { - - // return true if this is IOS - // if version is provided check for a particular version - - var userAgent, iOS; - - userAgent = navigator.userAgent.toLowerCase(); - iOS = /ipad|iphone|ipod/.exec(userAgent); - if (iOS) { - if (typeof version !== 'undefined') { - if (userAgent.indexOf('os ' + version) !== -1) { - // this is the target version of iOS - return true; - } - else { - return false; - } - } - else { - // no version was specified - return true; - } - } - else { - // this is not IOS - return false; - } - }; - - AblePlayer.prototype.browserSupportsVolume = function() { - - // ideally we could test for volume support - // However, that doesn't seem to be reliable - // http://stackoverflow.com/questions/12301435/html5-video-tag-volume-support - - var userAgent, noVolume; - - userAgent = navigator.userAgent.toLowerCase(); - noVolume = /ipad|iphone|ipod|android|blackberry|windows ce|windows phone|webos|playbook/.exec(userAgent); - if (noVolume) { - if (noVolume[0] === 'android' && /firefox/.test(userAgent)) { - // Firefox on android DOES support changing the volume: - return true; - } - else { - return false; - } - } - else { - // as far as we know, this userAgent supports volume control - return true; - } - }; - - AblePlayer.prototype.nativeFullscreenSupported = function () { - - return document.fullscreenEnabled || - document.webkitFullscreenEnabled || - document.mozFullScreenEnabled || - document.msFullscreenEnabled; - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.seekTo = function (newTime) { - - var thisObj = this; - - // define variables to be used for analytics - // e.g., to measure the extent to which users seek back and forward - this.seekFromTime = this.media.currentTime; - this.seekToTime = newTime; - - this.seeking = true; - this.liveUpdatePending = true; - if (this.player === 'html5') { - var seekable; - - this.startTime = newTime; - // Check HTML5 media "seekable" property to be sure media is seekable to startTime - seekable = this.media.seekable; - if (seekable.length > 0 && this.startTime >= seekable.start(0) && this.startTime <= seekable.end(0)) { - // ok to seek to startTime - // canplaythrough will be triggered when seeking is complete - // this.seeking will be set to false at that point - this.media.currentTime = this.startTime; - if (this.hasSignLanguage && this.signVideo) { - // keep sign languge video in sync - this.signVideo.currentTime = this.startTime; - } - } - } - else if (this.player === 'youtube') { - this.youTubePlayer.seekTo(newTime,true); - if (newTime > 0) { - if (typeof this.$posterImg !== 'undefined') { - this.$posterImg.hide(); - } - } - } - else if (this.player === 'vimeo') { - this.vimeoPlayer.setCurrentTime(newTime).then(function() { - // seek finished. - // successful completion also fires a 'seeked' event (see event.js) - thisObj.elapsed = newTime; - thisObj.refreshControls('timeline'); - }) - } - this.refreshControls('timeline'); - }; - - AblePlayer.prototype.getMediaTimes = function (duration, elapsed) { - - // Returns an array with keys 'duration' and 'elapsed' - // Vars passed to this function come courtesy of select Vimeo events - // Use those if they're available. - // Otherwise, will need to call the relevant media API - // This function should only be called from onMediaUpdateTime() - // If duration and elapsed are needed other times, use this.duration and this.elapsed - - // both values are expressed in seconds, and all player APIs are similar: - // they return a value that is rounded to the nearest second before playback begins, - // then to the nearest thousandth of a second after playback begins - // With HTML5 media API, some browsers are more precise (e.g., Firefox rounds to 6 decimal points) - // but inconsistent (values with 9 decimal points have been sporadically observed in Safari) - // For standardization, values are rounded to 6 decimal points before they're returned - - var deferred, promise, thisObj, mediaTimes; - mediaTimes = {}; - - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - if (typeof duration !== 'undefined' && typeof elapsed !== 'undefined') { - mediaTimes['duration'] = duration; - mediaTimes['elapsed'] = elapsed; - deferred.resolve(mediaTimes); - } - else { - this.getDuration().then(function(duration) { - mediaTimes['duration'] = thisObj.roundDown(duration,6); - thisObj.getElapsed().then(function(elapsed) { - mediaTimes['elapsed'] = thisObj.roundDown(elapsed,6); - deferred.resolve(mediaTimes); - }); - }); - } - return promise; - }; - - AblePlayer.prototype.getDuration = function () { - - // returns duration of the current media, expressed in seconds - // function is called by getMediaTimes, and return value is sanitized there - - var deferred, promise, thisObj; - - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - - if (this.player === 'vimeo') { - if (this.vimeoPlayer) { - this.vimeoPlayer.getDuration().then(function(duration) { - if (duration === undefined || isNaN(duration) || duration === -1) { - deferred.resolve(0); - } - else { - deferred.resolve(duration); - } - }); - } - else { // vimeoPlayer hasn't been initialized yet. - deferred.resolve(0); - } - } - else { - var duration; - if (this.player === 'html5') { - duration = this.media.duration; - } - else if (this.player === 'youtube') { - if (this.youTubePlayer) { - duration = this.youTubePlayer.getDuration(); - } - else { // the YouTube player hasn't initialized yet - duration = 0; - } - } - if (duration === undefined || isNaN(duration) || duration === -1) { - deferred.resolve(0); - } - else { - deferred.resolve(duration); - } - } - return promise; - }; - - AblePlayer.prototype.getElapsed = function () { - - // returns elapsed time of the current media, expressed in seconds - // function is called by getMediaTimes, and return value is sanitized there - - var deferred, promise, thisObj; - - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - - if (this.player === 'vimeo') { - if (this.vimeoPlayer) { - this.vimeoPlayer.getCurrentTime().then(function(elapsed) { - if (elapsed === undefined || isNaN(elapsed) || elapsed === -1) { - deferred.resolve(0); - } - else { - deferred.resolve(elapsed); - } - }); - } - else { // vimeoPlayer hasn't been initialized yet. - deferred.resolve(0); - } - } - else { - var elapsed; - if (this.player === 'html5') { - elapsed = this.media.currentTime; - } - else if (this.player === 'youtube') { - if (this.youTubePlayer) { - elapsed = this.youTubePlayer.getCurrentTime(); - } - else { // the YouTube player hasn't initialized yet - elapsed = 0; - } - } - if (elapsed === undefined || isNaN(elapsed) || elapsed === -1) { - deferred.resolve(0); - } - else { - deferred.resolve(elapsed); - } - } - return promise; - }; - - AblePlayer.prototype.getPlayerState = function () { - - // Returns one of the following states: - // 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. - // 'ended' - Finished playing. - // 'paused' - Not playing, but not stopped or ended. - // 'buffering' - Momentarily paused to load, but will resume once data is loaded. - // 'playing' - Currently playing. - - // Commented out the following in 3.2.1 - not sure of its intended purpose - // It can be useful to know player state even when swapping src - // and the overhead is seemingly minimal - /* - if (this.swappingSrc) { - return; - } - / - var deferred, promise, thisObj, duration, elapsed; - deferred = new $.Deferred(); - promise = deferred.promise(); - thisObj = this; - - if (this.player === 'html5') { - if (this.media.ended) { - deferred.resolve('ended'); - } - else if (this.media.paused) { - deferred.resolve('paused'); - } - else if (this.media.readyState !== 4) { - deferred.resolve('buffering'); - } - else { - deferred.resolve('playing'); - } - } - else if (this.player === 'youtube' && this.youTubePlayer) { - var state = this.youTubePlayer.getPlayerState(); - if (state === -1 || state === 5) { - deferred.resolve('stopped'); - } - else if (state === 0) { - deferred.resolve('ended'); - } - else if (state === 1) { - deferred.resolve('playing'); - } - else if (state === 2) { - deferred.resolve('paused'); - } - else if (state === 3) { - deferred.resolve('buffering'); - } - } - else if (this.player === 'vimeo' && this.vimeoPlayer) { - // curiously, Vimeo's API has no getPlaying(), getBuffering(), or getState() methods - // so maybe if it's neither paused nor ended, it must be playing??? - this.vimeoPlayer.getPaused().then(function(paused) { - if (paused) { - deferred.resolve('paused'); - } - else { - thisObj.vimeoPlayer.getEnded().then(function(ended) { - if (ended) { - deferred.resolve('ended'); - } - else { - deferred.resolve('playing'); - } - }); - } - }); - } - return promise; - }; - - AblePlayer.prototype.isPlaybackRateSupported = function () { - - if (this.player === 'html5') { - if (this.media.playbackRate) { - return true; - } - else { - return false; - } - } - else if (this.player === 'youtube') { - // Youtube supports varying playback rates per video. Only expose controls if more than one playback rate is available. - if (this.youTubePlayer.getAvailablePlaybackRates().length > 1) { - return true; - } - else { - return false; - } - } - else if (this.player === 'vimeo') { - // since this takes longer to determine, it was set previously in initVimeoPlayer() - return this.vimeoSupportsPlaybackRateChange; - } - }; - - AblePlayer.prototype.setPlaybackRate = function (rate) { - - rate = Math.max(0.5, rate); - if (this.player === 'html5') { - this.media.playbackRate = rate; - } - else if (this.player === 'youtube') { - this.youTubePlayer.setPlaybackRate(rate); - } - else if (this.player === 'vimeo') { - this.vimeoPlayer.setPlaybackRate(rate); - } - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.playbackRate = rate; - } - this.playbackRate = rate; - this.$speed.text(this.tt.speed + ': ' + rate.toFixed(2).toString() + 'x'); - }; - - AblePlayer.prototype.getPlaybackRate = function () { - - if (this.player === 'html5') { - return this.media.playbackRate; - } - else if (this.player === 'youtube') { - return this.youTubePlayer.getPlaybackRate(); - } - }; - - AblePlayer.prototype.isPaused = function () { - - // Note there are three player states that count as paused in this sense, - // and one of them is named 'paused'. - // A better name would be 'isCurrentlyNotPlayingOrBuffering' - - var state; - - if (this.player === 'vimeo') { - // just rely on value of this.playing - if (this.playing) { - return false; - } - else { - return true; - } - } - else { - this.getPlayerState().then(function(state) { - // if any of the following is true, consider the media 'paused' - return state === 'paused' || state === 'stopped' || state === 'ended'; - }); - } - }; - - AblePlayer.prototype.pauseMedia = function () { - - var thisObj = this; - - if (this.player === 'html5') { - this.media.pause(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.pause(true); - } - } - else if (this.player === 'youtube') { - this.youTubePlayer.pauseVideo(); - } - else if (this.player === 'vimeo') { - this.vimeoPlayer.pause(); - } - }; - - AblePlayer.prototype.playMedia = function () { - - var thisObj = this; - - if (this.player === 'html5') { - this.media.play(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.play(true); - } - } - else if (this.player === 'youtube') { - this.youTubePlayer.playVideo(); - if (typeof this.$posterImg !== 'undefined') { - this.$posterImg.hide(); - } - this.stoppingYouTube = false; - } - else if (this.player === 'vimeo') { - this.vimeoPlayer.play(); - } - this.startedPlaying = true; - if (this.hideControls) { - // wait briefly after playback begins, then hide controls - this.hidingControls = true; - this.invokeHideControlsTimeout(); - } - }; - - AblePlayer.prototype.fadeControls = function(direction) { - - // Visibly fade controls without hiding them from screen reader users - - // direction is either 'out' or 'in' - - // TODO: This still needs work. - // After the player fades, it's replaced by an empty space - // Would be better if the video and captions expanded to fill the void - // Attempted to fade out to 0 opacity, then move the playerDiv offscreen - // and expand the mediaContainer to fill the vacated space - // However, my attempts to do this have been choppy and buggy - // Code is preserved below and commented out - - var thisObj, mediaHeight, playerHeight, newMediaHeight; - var thisObj = this; - - if (direction == 'out') { - // get the original height of two key components: - mediaHeight = this.$mediaContainer.height(); - playerHeight = this.$playerDiv.height(); - newMediaHeight = mediaHeight + playerHeight; - - // fade slowly to transparency - this.$playerDiv.fadeTo(2000,0,function() { - / - // when finished, position playerDiv offscreen - // thisObj.$playerDiv.addClass('able-offscreen'); - // Expand the height of mediaContainer to fill the void (needs work) - thisObj.$mediaContainer.animate({ - height: newMediaHeight - },500); - / - }); - } - else if (direction == 'in') { - // restore vidcapContainer to its original height (needs work) - // this.$mediaContainer.removeAttr('style'); - // fade relatively quickly back to its original position with full opacity - // this.$playerDiv.removeClass('able-offscreen').fadeTo(100,1); - this.$playerDiv.fadeTo(100,1); - } - }; - - AblePlayer.prototype.invokeHideControlsTimeout = function () { - - // invoke timeout for waiting a few seconds after a mouse move or key down - // before hiding controls again - var thisObj = this; - this.hideControlsTimeout = window.setTimeout(function() { - if (typeof thisObj.playing !== 'undefined' && thisObj.playing === true && thisObj.hideControls) { - thisObj.fadeControls('out'); - thisObj.controlsHidden = true; - } - },5000); - this.hideControlsTimeoutStatus = 'active'; - }; - - AblePlayer.prototype.refreshControls = function(context, duration, elapsed) { - - // context is one of the following: - // 'init' - initial build (or subsequent change that requires full rebuild) - // 'timeline' - a change may effect time-related controls - // 'captions' - a change may effect caption-related controls - // 'descriptions' - a change may effect description-related controls - // 'transcript' - a change may effect the transcript window or button - // 'fullscreen' - a change has been triggered by full screen toggle - // 'playpause' - a change triggered by either a 'play' or 'pause' event - - // NOTE: context is not currently supported. - // The steps in this function have too many complex interdependencies - // The gains in efficiency are offset by the possibility of introducing bugs - // For now, executing everything - context = 'init'; - - // duration and elapsed are passed from callback functions of Vimeo API events - // duration is expressed as sss.xxx - // elapsed is expressed as sss.xxx - - var thisObj, duration, elapsed, lastChapterIndex, displayElapsed, - updateLive, textByState, timestamp, widthUsed, - leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount, - buffered, newTop, statusBarHeight, speedHeight, statusBarWidthBreakpoint, - newSvgData; - - thisObj = this; - if (this.swappingSrc) { - if (this.playing) { - // wait until new source has loaded before refreshing controls - // can't wait if player is NOT playing because some critical events - // won't fire until playback of new media starts - return; - } - } - - if (context === 'timeline' || context === 'init') { - // all timeline-related functionality requires both duration and elapsed - if (typeof this.duration === 'undefined') { - // wait until duration is known before proceeding with refresh - return; - } - if (this.useChapterTimes) { - this.chapterDuration = this.getChapterDuration(); - this.chapterElapsed = this.getChapterElapsed(); - } - - if (this.useFixedSeekInterval === false && this.seekIntervalCalculated === false && this.duration > 0) { - // couldn't calculate seekInterval previously; try again. - this.setSeekInterval(); - } - - if (this.seekBar) { - if (this.useChapterTimes) { - lastChapterIndex = this.selectedChapters.cues.length-1; - if (this.selectedChapters.cues[lastChapterIndex] == this.currentChapter) { - // this is the last chapter - if (this.currentChapter.end !== this.duration) { - // chapter ends before or after video ends - // need to adjust seekbar duration to match video end - this.seekBar.setDuration(this.duration - this.currentChapter.start); - } - else { - this.seekBar.setDuration(this.chapterDuration); - } - } - else { - // this is not the last chapter - this.seekBar.setDuration(this.chapterDuration); - } - } - else { - if (!(this.duration === undefined || isNaN(this.duration) || this.duration === -1)) { - this.seekBar.setDuration(this.duration); - } - } - if (!(this.seekBar.tracking)) { - // Only update the aria live region if we have an update pending - // (from a seek button control) or if the seekBar has focus. - // We use document.activeElement instead of $(':focus') due to a strange bug: - // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. - updateLive = this.liveUpdatePending || this.seekBar.seekHead.is($(document.activeElement)); - this.liveUpdatePending = false; - if (this.useChapterTimes) { - this.seekBar.setPosition(this.chapterElapsed, updateLive); - } - else { - this.seekBar.setPosition(this.elapsed, updateLive); - } - } - - // When seeking, display the seek bar time instead of the actual elapsed time. - if (this.seekBar.tracking) { - displayElapsed = this.seekBar.lastTrackPosition; - } - else { - if (this.useChapterTimes) { - displayElapsed = this.chapterElapsed; - } - else { - displayElapsed = this.elapsed; - } - } - } - // update elapsed & duration - if (typeof this.$durationContainer !== 'undefined') { - if (this.useChapterTimes) { - this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.chapterDuration)); - } - else { - this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.duration)); - } - } - if (typeof this.$elapsedTimeContainer !== 'undefined') { - this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(displayElapsed)); - } - - if (this.skin === 'legacy') { - // Update seekbar width. - // To do this, we need to calculate the width of all buttons surrounding it. - if (this.seekBar) { - widthUsed = 0; - leftControls = this.seekBar.wrapperDiv.parent().prev('div.able-left-controls'); - rightControls = leftControls.next('div.able-right-controls'); - leftControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); // true = include margin - } - }); - rightControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); - } - }); - if (this.fullscreen) { - seekbarWidth = $(window).width() - widthUsed; - } - else { - seekbarWidth = this.$ableWrapper.width() - widthUsed; - } - // Sometimes some minor fluctuations based on browser weirdness, so set a threshold. - if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) { - this.seekBar.setWidth(seekbarWidth); - } - } - } - - // Update buffering progress. - // TODO: Currently only using the first HTML5 buffered interval, - // but this fails sometimes when buffering is split into two or more intervals. - if (this.player === 'html5') { - if (this.media.buffered.length > 0) { - buffered = this.media.buffered.end(0); - if (this.useChapterTimes) { - if (buffered > this.chapterDuration) { - buffered = this.chapterDuration; - } - if (this.seekBar) { - this.seekBar.setBuffered(buffered / this.chapterDuration); - } - } - else { - if (this.seekBar) { - if (!isNaN(buffered)) { - this.seekBar.setBuffered(buffered / duration); - } - } - } - } - } - else if (this.player === 'youtube') { - if (this.seekBar) { - this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); - } - } - else if (this.player === 'vimeo') { - // TODO: Add support for Vimeo buffering update - } - } // end if context == 'timeline' or 'init' - - if (context === 'descriptions' || context == 'init'){ - - if (this.$descButton) { - if (this.descOn) { - this.$descButton.removeClass('buttonOff').attr('aria-label',this.tt.turnOffDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOffDescriptions); - } - else { - this.$descButton.addClass('buttonOff').attr('aria-label',this.tt.turnOnDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOnDescriptions); - } - } - } - - if (context === 'captions' || context == 'init'){ - - if (this.$ccButton) { - - captionsCount = this.captions.length; - - // Button has a different title depending on the number of captions. - // If only one caption track, this is "Show captions" and "Hide captions" - // Otherwise, it is just always "Captions" - if (!this.captionsOn) { - this.$ccButton.addClass('buttonOff'); - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.showCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.showCaptions); - } - } - else { - this.$ccButton.removeClass('buttonOff'); - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.hideCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.hideCaptions); - } - } - - if (captionsCount > 1) { - this.$ccButton.attr({ - 'aria-label': this.tt.captions, - 'aria-haspopup': 'true', - 'aria-controls': this.mediaId + '-captions-menu' - }); - this.$ccButton.find('span.able-clipped').text(this.tt.captions); - } - } - } - - if (context === 'fullscreen' || context == 'init'){ - - if (this.$fullscreenButton) { - if (!this.fullscreen) { - this.$fullscreenButton.attr('aria-label', this.tt.enterFullScreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-collapse').addClass('icon-fullscreen-expand'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullScreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-expand'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullScreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenExpandButtonImg); - } - } - else { - this.$fullscreenButton.attr('aria-label',this.tt.exitFullScreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-expand').addClass('icon-fullscreen-collapse'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullScreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-collapse'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullScreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenCollapseButtonImg); - } - } - } - } - if (context === 'playpause' || context == 'init'){ - if (typeof this.$bigPlayButton !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Choose show/hide for big play button and adjust position. - if (this.paused && !this.seekBar.tracking) { - if (!this.hideBigPlayButton) { - this.$bigPlayButton.show(); - } - if (this.fullscreen) { - this.$bigPlayButton.width($(window).width()); - this.$bigPlayButton.height($(window).height()); - } - else { - this.$bigPlayButton.width(this.$mediaContainer.width()); - this.$bigPlayButton.height(this.$mediaContainer.height()); - } - } - else { - this.$bigPlayButton.hide(); - } - } - } - - if (context === 'transcript' || context == 'init'){ - - if (this.transcriptType) { - // Sync checkbox and autoScrollTranscript with user preference - if (this.prefAutoScrollTranscript === 1) { - this.autoScrollTranscript = true; - this.$autoScrollTranscriptCheckbox.prop('checked',true); - } - else { - this.autoScrollTranscript = false; - this.$autoScrollTranscriptCheckbox.prop('checked',false); - } - - // If transcript locked, scroll transcript to current highlight location. - if (this.autoScrollTranscript && this.currentHighlight) { - newTop = Math.floor(this.$transcriptDiv.scrollTop() + - $(this.currentHighlight).position().top - - (this.$transcriptDiv.height() / 2) + - ($(this.currentHighlight).height() / 2)); - if (newTop !== Math.floor(this.$transcriptDiv.scrollTop())) { - // Set a flag to ignore the coming scroll event. - // there's no other way I know of to differentiate programmatic and user-initiated scroll events. - this.scrollingTranscript = true; - // only scroll once after moving a highlight - if (this.movingHighlight) { - this.$transcriptDiv.scrollTop(newTop); - this.movingHighlight = false; - } - } - } - } - } - - if (context === 'init') { - - if (this.$chaptersButton) { - this.$chaptersButton.attr({ - 'aria-label': this.tt.chapters, - 'aria-haspopup': 'true', - 'aria-controls': this.mediaId + '-chapters-menu' - }); - } - } - - if (context === 'timeline' || context === 'playpause' || context === 'init') { - - // update status - textByState = { - 'stopped': this.tt.statusStopped, - 'paused': this.tt.statusPaused, - 'playing': this.tt.statusPlaying, - 'buffering': this.tt.statusBuffering, - 'ended': this.tt.statusEnd - }; - - if (this.stoppingYouTube) { - // stoppingYouTube is true temporarily while video is paused and seeking to 0 - // See notes in handleRestart() - // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) - if (this.$status.text() !== this.tt.statusStopped) { - this.$status.text(this.tt.statusStopped); - } - if (this.$playpauseButton.find('span').first().hasClass('icon-pause')) { - if (this.iconType === 'font') { - this.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('play'); - this.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - this.$playpauseButton.find('path').attr('d',newSvgData[1]); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else { - this.$playpauseButton.find('img').attr('src',this.playButtonImg); - } - } - } - else { - if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Update the text only if it's changed since it has role="alert"; - // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. - this.getPlayerState().then(function(currentState) { - if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { - // Debounce updates; only update after status has stayed steadily different for a while - // "A while" is defined differently depending on context - if (thisObj.swappingSrc) { - // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), - // so set a longer wait time before writing a status message - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) - } - } - else { - // for all other contexts (e.g., users clicks Play/Pause) - // user should receive more rapid feedback - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 250; // in ms - } - } - timestamp = (new Date()).getTime(); - if (!thisObj.statusDebounceStart) { - thisObj.statusDebounceStart = timestamp; - // Call refreshControls() again after allotted time has passed - thisObj.debouncingStatus = true; - thisObj.statusTimeout = setTimeout(function () { - thisObj.debouncingStatus = false; - thisObj.refreshControls(context); - }, thisObj.statusMessageThreshold); - } - else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { - thisObj.$status.text(textByState[currentState]); - thisObj.statusDebounceStart = null; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - } - else { - thisObj.statusDebounceStart = null; - thisObj.debouncingStatus = false; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - // Don't change play/pause button display while using the seek bar (or if YouTube stopped) - if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { - if (currentState === 'paused' || currentState === 'stopped' || currentState === 'ended') { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('play'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.playButtonImg); - } - } - else { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-play').addClass('icon-pause'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('pause'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.pauseButtonImg); - } - } - } - }); - } - } - } - - // Show/hide status bar content conditionally - if (!this.fullscreen) { - statusBarWidthBreakpoint = 300; - statusBarHeight = this.$statusBarDiv.height(); - speedHeight = this.$statusBarDiv.find('span.able-speed').height(); - if (speedHeight > (statusBarHeight + 5)) { - // speed bar is wrapping (happens often in German player) - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { - // Player is too small for a speed span - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - } - } - } - - }; - - AblePlayer.prototype.getHiddenWidth = function($el) { - - // jQuery returns for width() if element is hidden - // this function is a workaround - - // save a reference to a cloned element that can be measured - var $hiddenElement = $el.clone().appendTo('body'); - - // calculate the width of the clone - var width = $hiddenElement.outerWidth(); - - // remove the clone from the DOM - $hiddenElement.remove(); - - return width; - }; - - AblePlayer.prototype.handlePlay = function(e) { - - if (this.paused) { - this.playMedia(); - } - else { - this.pauseMedia(); - } - }; - - AblePlayer.prototype.handleRestart = function() { - - this.seekTo(0); - }; - - AblePlayer.prototype.handlePrevTrack = function() { - - if (this.playlistIndex === 0) { - // currently on the first track - // wrap to bottom and play the last track - this.playlistIndex = this.$playlist.length - 1; - } - else { - this.playlistIndex--; - } - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings - this.cuePlaylistItem(this.playlistIndex); - }; - - AblePlayer.prototype.handleNextTrack = function() { - - if (this.playlistIndex === this.$playlist.length - 1) { - // currently on the last track - // wrap to top and play the forst track - this.playlistIndex = 0; - } - else { - this.playlistIndex++; - } - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings - this.cuePlaylistItem(this.playlistIndex); - }; - - AblePlayer.prototype.handleRewind = function() { - - var targetTime; - - targetTime = this.elapsed - this.seekInterval; - if (this.useChapterTimes) { - if (targetTime < this.currentChapter.start) { - targetTime = this.currentChapter.start; - } - } - else { - if (targetTime < 0) { - targetTime = 0; - } - } - this.seekTo(targetTime); - }; - - AblePlayer.prototype.handleFastForward = function() { - - var targetTime, lastChapterIndex; - - lastChapterIndex = this.chapters.length-1; - targetTime = this.elapsed + this.seekInterval; - if (this.useChapterTimes) { - if (this.chapters[lastChapterIndex] == this.currentChapter) { - // this is the last chapter - if (targetTime > this.duration || targetTime > this.currentChapter.end) { - // targetTime would exceed the end of the video (or chapter) - // scrub to end of whichever is earliest - targetTime = Math.min(this.duration, this.currentChapter.end); - } - else if (this.duration % targetTime < this.seekInterval) { - // nothing left but pocket change after seeking to targetTime - // go ahead and seek to end of video (or chapter), whichever is earliest - targetTime = Math.min(this.duration, this.currentChapter.end); - } - } - else { - // this is not the last chapter - if (targetTime > this.currentChapter.end) { - // targetTime would exceed the end of the chapter - // scrub exactly to end of chapter - targetTime = this.currentChapter.end; - } - } - } - else { - // not using chapter times - if (targetTime > this.duration) { - targetTime = this.duration; - } - } - this.seekTo(targetTime); - }; - - AblePlayer.prototype.handleRateIncrease = function() { - this.changeRate(1); - }; - - AblePlayer.prototype.handleRateDecrease = function() { - this.changeRate(-1); - }; - - // Increases or decreases playback rate, where dir is 1 or -1 indication direction. - AblePlayer.prototype.changeRate = function (dir) { - - var rates, currentRate, index, newRate, vimeoMin, vimeoMax; - - if (this.player === 'html5') { - this.setPlaybackRate(this.getPlaybackRate() + (0.25 dir)); - } - else if (this.player === 'youtube') { - rates = this.youTubePlayer.getAvailablePlaybackRates(); - currentRate = this.getPlaybackRate(); - index = rates.indexOf(currentRate); - if (index === -1) { - - } - else { - index += dir; - // Can only increase or decrease rate if there's another rate available. - if (index < rates.length && index >= 0) { - this.setPlaybackRate(rates[index]); - } - } - } - else if (this.player === 'vimeo') { - // range is 0.5 to 2 - // increase/decrease in inrements of 0.5 - vimeoMin = 0.5; - vimeoMax = 2; - if (dir === 1) { - if (this.vimeoPlaybackRate + 0.5 <= vimeoMax) { - newRate = this.vimeoPlaybackRate + 0.5; - } - else { - newRate = vimeoMax; - } - } - else if (dir === -1) { - if (this.vimeoPlaybackRate - 0.5 >= vimeoMin) { - newRate = this.vimeoPlaybackRate - 0.5; - } - else { - newRate = vimeoMin; - } - } - this.setPlaybackRate(newRate); - } - }; - - AblePlayer.prototype.handleCaptionToggle = function() { - - var captions; - if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it - this.hidingPopup = false; - return false; - } - if (this.captions.length) { - captions = this.captions; - } - else { - captions = []; - } - if (captions.length === 1) { - // When there's only one set of captions, just do an on/off toggle. - if (this.captionsOn === true) { - // turn them off - this.captionsOn = false; - this.prefCaptions = 0; - this.updateCookie('prefCaptions'); - if (this.usingYouTubeCaptions) { - this.youTubePlayer.unloadModule('captions'); - } - else { - this.$captionsWrapper.hide(); - } - } - else { - // captions are off. Turn them on. - this.captionsOn = true; - this.prefCaptions = 1; - this.updateCookie('prefCaptions'); - if (this.usingYouTubeCaptions) { - this.youTubePlayer.loadModule('captions'); - } - else { - this.$captionsWrapper.show(); - } - for (var i=0; i<captions.length; i++) { - if (captions[i].def === true) { // this is the default language - this.selectedCaptions = captions[i]; - } - } - this.selectedCaptions = this.captions[0]; - if (this.descriptions.length >= 0) { - this.selectedDescriptions = this.descriptions[0]; - } - } - this.refreshControls('captions'); - } - else { - // there is more than one caption track. - // clicking on a track is handled via caption.js > getCaptionClickFunction() - if (this.captionsPopup && this.captionsPopup.is(':visible')) { - this.captionsPopup.hide(); - this.hidingPopup = false; - this.$ccButton.removeAttr('aria-expanded').focus(); - } - else { - this.closePopups(); - if (this.captionsPopup) { - this.captionsPopup.show(); - this.$ccButton.attr('aria-expanded','true'); - this.captionsPopup.css('top', this.$ccButton.position().top - this.captionsPopup.outerHeight()); - this.captionsPopup.css('left', this.$ccButton.position().left) - // Place focus on the first button (even if another button is checked) - this.captionsPopup.find('li').removeClass('able-focus'); - this.captionsPopup.find('li').first().focus().addClass('able-focus'); - } - } - } - }; - - AblePlayer.prototype.handleChapters = function () { - if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it - this.hidingPopup = false; - return false; - } - if (this.chaptersPopup.is(':visible')) { - this.chaptersPopup.hide(); - this.hidingPopup = false; - this.$chaptersButton.removeAttr('aria-expanded').focus(); - } - else { - this.closePopups(); - this.chaptersPopup.show(); - this.$chaptersButton.attr('aria-expanded','true'); - this.chaptersPopup.css('top', this.$chaptersButton.position().top - this.chaptersPopup.outerHeight()); - this.chaptersPopup.css('left', this.$chaptersButton.position().left) - - // Highlight the current chapter, if any chapters are checked - // Otherwise, place focus on the first chapter - this.chaptersPopup.find('li').removeClass('able-focus'); - if (this.chaptersPopup.find('li[aria-checked="true"]').length) { - this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass('able-focus'); - } - else { - this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').focus(); - } - } - }; - - AblePlayer.prototype.handleDescriptionToggle = function() { - - this.descOn = !this.descOn; - this.prefDesc = + this.descOn; // convert boolean to integer - this.updateCookie('prefDesc'); - if (!this.$descDiv.is(':hidden')) { - this.$descDiv.hide(); - } - this.refreshingDesc = true; - this.initDescription(); - this.refreshControls('descriptions'); - }; - - AblePlayer.prototype.handlePrefsClick = function(pref) { - - // NOTE: the prefs menu is positioned near the right edge of the player - // This assumes the Prefs button is also positioned in that vicinity - // (last or second-last button the right) - - // NOTE: If previously unable to fully populate the Description dialog - // because the Web Speech API failed to getVoices() - // now is a good time to try again - // so the Description dialog can be rebuilt before the user requests it - if (!this.descVoices) { - this.getBrowserVoices(); - if (this.descVoices) { - this.rebuildDescPrefsForm(); - } - } - - var thisObj, prefsButtonPosition, prefsMenuRight, prefsMenuLeft; - - thisObj = this; - - if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it - this.hidingPopup = false; - return false; - } - if (this.prefsPopup.is(':visible')) { - this.prefsPopup.hide(); - this.$prefsButton.removeAttr('aria-expanded'); - // restore each menu item to original hidden state - this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); - } - // wait briefly, then reset hidingPopup - setTimeout(function() { - thisObj.hidingPopup = false; - },100); - } - else { - this.closePopups(); - this.prefsPopup.show(); - this.$prefsButton.attr('aria-expanded','true'); - prefsButtonPosition = this.$prefsButton.position(); - prefsMenuRight = this.$ableDiv.width() - 5; - prefsMenuLeft = prefsMenuRight - this.prefsPopup.width(); - this.prefsPopup.css('top', prefsButtonPosition.top - this.prefsPopup.outerHeight()); - this.prefsPopup.css('left', prefsMenuLeft); - // remove prior focus and set focus on first item; also change tabindex from -1 to 0 - this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','0'); - this.prefsPopup.find('li').first().focus().addClass('able-focus'); - - } - }; - - AblePlayer.prototype.handleHelpClick = function() { - this.setFullscreen(false); - this.helpDialog.show(); - }; - - AblePlayer.prototype.handleTranscriptToggle = function () { - - var thisObj = this; - - if (this.$transcriptDiv.is(':visible')) { - this.$transcriptArea.hide(); - this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript); - this.prefTranscript = 0; - this.$transcriptButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms - // Setting timeout to 100ms is a virtual guarantee of proper functionality - setTimeout(function() { - thisObj.closingTranscript = false; - }, 100); - } - else { - this.positionDraggableWindow('transcript'); - this.$transcriptArea.show(); - // showing transcriptArea has a cascading effect of showing all content within transcriptArea - // need to re-hide the popup menu - this.$transcriptPopup.hide(); - this.$transcriptButton.removeClass('buttonOff').attr('aria-label',this.tt.hideTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.hideTranscript); - this.prefTranscript = 1; - // move focus to first focusable element (window options button) - this.focusNotClick = true; - this.$transcriptArea.find('button').first().focus(); - // wait briefly before resetting stopgap var - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefTranscript'); - }; - - AblePlayer.prototype.handleSignToggle = function () { - - var thisObj = this; - - if (this.$signWindow.is(':visible')) { - this.$signWindow.hide(); - this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign); - this.$signButton.find('span.able-clipped').text(this.tt.showSign); - this.prefSign = 0; - this.$signButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - setTimeout(function() { - thisObj.closingSign = false; - }, 100); - } - else { - this.positionDraggableWindow('sign'); - this.$signWindow.show(); - // showing signWindow has a cascading effect of showing all content within signWindow - // need to re-hide the popup menu - this.$signPopup.hide(); - this.$signButton.removeClass('buttonOff').attr('aria-label',this.tt.hideSign); - this.$signButton.find('span.able-clipped').text(this.tt.hideSign); - this.prefSign = 1; - this.focusNotClick = true; - this.$signWindow.find('button').first().focus(); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefSign'); - }; - - AblePlayer.prototype.isFullscreen = function () { - - // NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen, - // which is defined in setFullscreen() - // This function returns true if any element is fullscreen - // but doesn't tell us whether a particular element is in fullscreen - // (e.g., if there are multiple players on the page) - // The Boolean this.fullscreen is defined separately for each player instance - - if (this.nativeFullscreenSupported()) { - return (document.fullscreenElement || - document.webkitFullscreenElement || - document.webkitCurrentFullScreenElement || - document.mozFullScreenElement || - document.msFullscreenElement) ? true : false; - } - else { - return this.modalFullscreenActive ? true : false; - } - } - - AblePlayer.prototype.setFullscreen = function (fullscreen) { - - if (this.fullscreen == fullscreen) { - // replace isFullscreen() with a Boolean. see function for explanation - return; - } - var thisObj = this; - var $el = this.$ableWrapper; - var el = $el[0]; - - if (this.nativeFullscreenSupported()) { - // Note: many varying names for options for browser compatibility. - if (fullscreen) { - // Initialize fullscreen - - // But first, capture current settings so they can be restored later - this.preFullScreenWidth = this.$ableWrapper.width(); - this.preFullScreenHeight = this.$ableWrapper.height(); - if (el.requestFullscreen) { - el.requestFullscreen(); - } - else if (el.webkitRequestFullscreen) { - el.webkitRequestFullscreen(); - } - else if (el.mozRequestFullScreen) { - el.mozRequestFullScreen(); - } - else if (el.msRequestFullscreen) { - el.msRequestFullscreen(); - } - this.fullscreen = true; - } - else { - // Exit fullscreen - if (document.exitFullscreen) { - document.exitFullscreen(); - } - else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } - else if (document.webkitCancelFullScreen) { - document.webkitCancelFullScreen(); - } - else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - this.fullscreen = false; - } - // add event handlers for changes in full screen mode - // currently most changes are made in response to windowResize event - // However, that alone is not resulting in a properly restored player size in Opera Mac - // More on the Opera Mac bug: https://github.com/ableplayer/ableplayer/issues/162 - // this fullscreen event handler added specifically for Opera Mac, - // but includes event listeners for all browsers in case its functionality could be expanded - // Added functionality in 2.3.45 for handling YouTube return from fullscreen as well - $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(e) { - // NOTE: e.type = the specific event that fired (in case needing to control for browser-specific idiosyncrasies) - if (!thisObj.fullscreen) { - // user has just exited full screen - thisObj.restoringAfterFullScreen = true; - thisObj.resizePlayer(thisObj.preFullScreenWidth,thisObj.preFullScreenHeight); - } - else if (!thisObj.clickedFullscreenButton) { - // user triggered fullscreenchange without clicking (or pressing) fullscreen button - // this is only possible if they pressed Escape to exit fullscreen mode - thisObj.fullscreen = false; - thisObj.restoringAfterFullScreen = true; - thisObj.resizePlayer(thisObj.preFullScreenWidth,thisObj.preFullScreenHeight); - } - // NOTE: The fullscreenchange (or browser-equivalent) event is triggered twice - // when exiting fullscreen via the "Exit fullscreen" button (only once if using Escape) - // Not sure why, but consequently we need to be sure thisObj.clickedFullScreenButton - // continues to be true through both events - // Could use a counter variable to control that (reset to false after the 2nd trigger) - // However, since I don't know why it's happening, and whether it's 100% reliable - // resetting clickedFullScreenButton after a timeout seems to be better approach - setTimeout(function() { - thisObj.clickedFullscreenButton = false; - },1000); - }); - } - else { - // Non-native fullscreen support through modal dialog. - // Create dialog on first run through. - if (!this.fullscreenDialog) { - var $dialogDiv = $('<div>'); - // create a hidden alert, communicated to screen readers via aria-describedby - var $fsDialogAlert = $('<p>',{ - 'class': 'able-screenreader-alert' - }).text(this.tt.fullscreen); // In English: "Full screen"; TODO: Add alert text that is more descriptive - $dialogDiv.append($fsDialogAlert); - // now render this as a dialog - this.fullscreenDialog = new AccessibleDialog($dialogDiv, this.$fullscreenButton, 'dialog', 'Fullscreen video player', $fsDialogAlert, this.tt.exitFullScreen, '100%', true, function () { thisObj.handleFullscreenToggle() }); - $('body').append($dialogDiv); - } - - // Track whether paused/playing before moving element; moving the element can stop playback. - var wasPaused = this.paused; - - if (fullscreen) { - this.modalFullscreenActive = true; - this.fullscreenDialog.show(); - - // Move player element into fullscreen dialog, then show. - // Put a placeholder element where player was. - this.$modalFullscreenPlaceholder = $('<div class="placeholder">'); - this.$modalFullscreenPlaceholder.insertAfter($el); - $el.appendTo(this.fullscreenDialog.modal); - - // Column left css is 50% by default; set to 100% for full screen. - if ($el === this.$ableColumnLeft) { - $el.width('100%'); - } - var newHeight = $(window).height() - this.$playerDiv.height(); - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - this.resizePlayer($(window).width(), newHeight); - } - else { - this.modalFullscreenActive = false; - if ($el === this.$ableColumnLeft) { - $el.width('50%'); - } - $el.insertAfter(this.$modalFullscreenPlaceholder); - this.$modalFullscreenPlaceholder.remove(); - this.fullscreenDialog.hide(); - this.resizePlayer(this.$ableWrapper.width(), this.$ableWrapper.height()); - } - - // Resume playback if moving stopped it. - if (!wasPaused && this.paused) { - this.playMedia(); - } - } - this.refreshControls('fullscreen'); - }; - - AblePlayer.prototype.handleFullscreenToggle = function () { - - var stillPaused = this.paused; - this.setFullscreen(!this.fullscreen); - if (stillPaused) { - this.pauseMedia(); // when toggling fullscreen and media is just paused, keep media paused. - } - else if (!stillPaused) { - this.playMedia(); // when toggling fullscreen and media is playing, continue playing. - } - // automatically hide controller in fullscreen mode - // then reset back to original setting after exiting fullscreen mode - if (this.fullscreen) { - this.hideControls = true; - if (this.playing) { - // go ahead and hide the controls - this.fadeControls('out'); - this.controlsHidden = true; - } - } - else { - // exit fullscreen mode - this.hideControls = this.hideControlsOriginal; - if (!this.hideControls) { // do not hide controls - if (this.controlsHidden) { - this.fadeControls('in'); - this.controlsHidden = false; - } - // if there's an active timeout to fade controls out again, clear it - if (this.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(this.hideControlsTimeout); - this.hideControlsTimeoutStatus = 'clear'; - } - } - } - }; - - AblePlayer.prototype.handleTranscriptLockToggle = function (val) { - - this.autoScrollTranscript = val; // val is boolean - this.prefAutoScrollTranscript = +val; // convert boolean to numeric 1 or 0 for cookie - this.updateCookie('prefAutoScrollTranscript'); - this.refreshControls('transcript'); - }; - - - AblePlayer.prototype.showTooltip = function($tooltip) { - - if (($tooltip).is(':animated')) { - $tooltip.stop(true,true).show().delay(4000).fadeOut(1000); - } - else { - $tooltip.stop().show().delay(4000).fadeOut(1000); - } - }; - - AblePlayer.prototype.showAlert = function( msg, location ) { - - // location is either of the following: - // 'main' (default) - // 'screenreader (visibly hidden) - // 'sign' (sign language window) - // 'transcript' (trasncript window) - var thisObj, $alertBox, $parentWindow, alertLeft, alertTop; - - thisObj = this; - - if (location === 'transcript') { - $alertBox = this.$transcriptAlert; - $parentWindow = this.$transcriptArea; - } - else if (location === 'sign') { - $alertBox = this.$signAlert; - $parentWindow = this.$signWindow; - } - else if (location === 'screenreader') { - $alertBox = this.$srAlertBox; - } - else { - $alertBox = this.$alertBox; - } - $alertBox.text(msg).show(); - if (location == 'transcript' || location === 'sign') { - if ($parentWindow.width() > $alertBox.width()) { - alertLeft = $parentWindow.width() / 2 - $alertBox.width() / 2; - } - else { - // alert box is wider than its container. Position it far left and let it wrap - alertLeft = 10; - } - if (location === 'sign') { - // position alert in the lower third of the sign window (to avoid covering the signer) - alertTop = ($parentWindow.height() / 3) * 2; - } - else if (location === 'transcript') { - // position alert just beneath the toolbar to avoid getting lost among transcript text - alertTop = this.$transcriptToolbar.height() + 30; - } - $alertBox.css({ - top: alertTop + 'px', - left: alertLeft + 'px' - }); - } - else if (location !== 'screenreader') { - // The original formula incorporated offset() into the calculation - // but at some point this began resulting in an alert that's off-centered - // Changed in v2.2.17, but here's the original for reference in case needed: - // left: this.$playerDiv.offset().left + (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - $alertBox.css({ - left: (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - }); - } - if (location !== 'screenreader') { - setTimeout(function () { - $alertBox.fadeOut(300); - }, 3000); - } - }; - - AblePlayer.prototype.showedAlert = function (which) { - - // returns true if the target alert has already been shown - // useful for throttling alerts that only need to be shown once - // e.g., move alerts with instructions for dragging a window - - if (which === 'transcript') { - if (this.showedTranscriptAlert) { - return true; - } - else { - return false; - } - } - else if (which === 'sign') { - if (this.showedSignAlert) { - return true; - } - else { - return false; - } - } - return false; - } - - // Resizes all relevant player attributes. - AblePlayer.prototype.resizePlayer = function (width, height) { - - var captionSizeOkMin, captionSizeOkMax, captionSize, newCaptionSize, newLineHeight; - - if (this.fullscreen) { // replace isFullscreen() with a Boolean. see function for explanation - if (typeof this.$vidcapContainer !== 'undefined') { - this.$ableWrapper.css({ - 'width': width + 'px', - 'max-width': '' - }) - this.$vidcapContainer.css({ - 'height': height + 'px', - 'width': width - }); - this.$media.css({ - 'height': height + 'px', - 'width': width - }) - } - if (typeof this.$transcriptArea !== 'undefined') { - this.retrieveOffscreenWindow('transcript',width,height); - } - if (typeof this.$signWindow !== 'undefined') { - this.retrieveOffscreenWindow('sign',width,height); - } - } - else { - // player resized - if (this.restoringAfterFullScreen) { - // User has just exited fullscreen mode. Restore to previous settings - width = this.preFullScreenWidth; - height = this.preFullScreenHeight; - this.restoringAfterFullScreen = false; - this.$ableWrapper.css({ - 'max-width': width + 'px', - 'width': '' - }); - if (typeof this.$vidcapContainer !== 'undefined') { - this.$vidcapContainer.css({ - 'height': '', - 'width': '' - }); - } - this.$media.css({ - 'width': '100%', - 'height': 'auto' - }); - } - } - - // resize YouTube - if (this.player === 'youtube' && this.youTubePlayer) { - this.youTubePlayer.setSize(width, height); - } - - // Resize captions - if (typeof this.$captionsDiv !== 'undefined') { - - // Font-size is too small in full screen view & too large in small-width view - // The following vars define a somewhat arbitary zone outside of which - // caption size requires adjustment - captionSizeOkMin = 400; - captionSizeOkMax = 1000; - captionSize = parseInt(this.prefCaptionsSize,10); - - // TODO: Need a better formula so that it scales proportionally to viewport - if (width > captionSizeOkMax) { - newCaptionSize = captionSize * 1.5; - } - else if (width < captionSizeOkMin) { - newCaptionSize = captionSize / 1.5; - } - else { - newCaptionSize = captionSize; - } - newLineHeight = newCaptionSize + 25; - this.$captionsDiv.css('font-size',newCaptionSize + '%'); - this.$captionsWrapper.css('line-height',newLineHeight + '%'); - } - this.refreshControls('captions'); - }; - - AblePlayer.prototype.retrieveOffscreenWindow = function( which, width, height ) { - - // check to be sure popup windows ('transcript' or 'sign') are positioned on-screen - // (they sometimes disappear off-screen when entering fullscreen mode) - // if off-screen, recalculate so they are back on screen - - var window, windowPos, windowTop, windowLeft, windowRight, windowWidth, windowBottom, windowHeight; - - if (which == 'transcript') { - window = this.$transcriptArea; - } - else if (which == 'sign') { - window = this.$signWindow; - } - windowWidth = window.width(); - windowHeight = window.height(); - windowPos = window.position(); - windowTop = windowPos.top; - windowLeft = windowPos.left; - windowRight = windowLeft + windowWidth; - windowBottom = windowTop + windowHeight; - - if (windowTop < 0) { // off-screen to the top - windowTop = 10; - window.css('top',windowTop); - } - if (windowLeft < 0) { // off-screen to the left - windowLeft = 10; - window.css('left',windowLeft); - } - if (windowRight > width) { // off-screen to the right - windowLeft = (width - 20) - windowWidth; - window.css('left',windowLeft); - } - if (windowBottom > height) { // off-screen to the bottom - windowTop = (height - 10) - windowHeight; - window.css('top',windowTop); - } - }; - - AblePlayer.prototype.getHighestZIndex = function() { - - // returns the highest z-index on page - // used to ensure dialogs (or potentially other windows) are on top - - var max, $elements, z; - max = 0; - - // exclude the Able Player dialogs and windows - $elements = $('body ').not('.able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area'); - - $elements.each(function(){ - z = $(this).css('z-index'); - if (Number.isInteger(+z)) { // work only with integer values, not 'auto' - if (parseInt(z) > max) { - max = parseInt(z); - } - } - }); - return max; - }; - - AblePlayer.prototype.updateZIndex = function(which) { - - // update z-index of 'transcript' or 'sign', relative to each other - // direction is always 'up' (i.e., move window to top) - // windows come to the top when the user clicks on them - var defHighZ, defLowZ, highestZ, transcriptZ, signZ, newHighZ, newLowZ; - - // set the default z-indexes, as defined in ableplayer.css - defHighZ = 8000; // by default, assigned to the sign window - defLowZ = 7000; // by default, assigned to the transcript area - highestZ = this.getHighestZIndex(); // highest z-index on the page, excluding Able Player windows & modals - - // NOTE: Although highestZ is collected here, it currently isn't used. - // If something on the page has a higher z-index than the transcript or sign window, do we care? - // Excluding it here assumes "No". Our immediate concern is with the relationship between our own components. - // If we elevate our z-indexes so our content is on top, we run the risk of starting a z-index war. - - if (typeof this.$transcriptArea === 'undefined' || typeof this.$signWindow === 'undefined' ) { - // at least one of the windows doesn't exist, so there's no conflict - // since z-index may have been stored to a cookie on another page, need to restore default - if (typeof this.$transcriptArea !== 'undefined') { - transcriptZ = parseInt(this.$transcriptArea.css('z-index')); - if (transcriptZ > defLowZ) { - // restore to the default - this.$transcriptArea.css('z-index',defLowZ); - } - } - else if (typeof this.$signWindow !== 'undefined') { - signZ = parseInt(this.$signWindow.css('z-index')); - if (signZ > defHighZ) { - // restore to the default - this.$signWindow.css('z-index',defHighZ); - } - } - return false; - } - - // both windows exist - - // get current values - transcriptZ = parseInt(this.$transcriptArea.css('z-index')); - signZ = parseInt(this.$signWindow.css('z-index')); - - if (transcriptZ === signZ) { - // the two windows are equal; restore defaults (the target window will be on top) - newHighZ = defHighZ; - newLowZ = defLowZ; - } - else if (transcriptZ > signZ) { - if (which === 'transcript') { - // transcript is already on top; nothing to do - return false; - } - else { - // swap z's - newHighZ = transcriptZ; - newLowZ = signZ; - } - } - else { // signZ is greater - if (which === 'sign') { - // sign is already on top; nothing to do - return false; - } - else { - newHighZ = signZ; - newLowZ = transcriptZ; - } - } - // now assign the new values - if (which === 'transcript') { - this.$transcriptArea.css('z-index',newHighZ); - this.$signWindow.css('z-index',newLowZ); - } - else if (which === 'sign') { - this.$signWindow.css('z-index',newHighZ); - this.$transcriptArea.css('z-index',newLowZ); - } - }; - - AblePlayer.prototype.syncTrackLanguages = function (source, language) { - - // this function is called when the player is built (source == 'init') - // and again when user changes the language of either 'captions' or 'transcript' - // It syncs the languages of chapters, descriptions, and metadata tracks - // NOTE: Caption and transcript languages are somewhat independent from one another - // If a user changes the caption language, the transcript follows - // However, if a user changes the transcript language, this only affects the transcript - // This was a group decision based on the belief that users may want a transcript - // that is in a different language than the captions - - var i, captions, descriptions, chapters, meta; - - // Captions - for (i = 0; i < this.captions.length; i++) { - if (this.captions[i].language === language) { - captions = this.captions[i]; - } - } - // Chapters - for (i = 0; i < this.chapters.length; i++) { - if (this.chapters[i].language === language) { - chapters = this.chapters[i]; - } - } - // Descriptions - for (i = 0; i < this.descriptions.length; i++) { - if (this.descriptions[i].language === language) { - descriptions = this.descriptions[i]; - } - } - // Metadata - for (i = 0; i < this.meta.length; i++) { - if (this.meta[i].language === language) { - meta = this.meta[i]; - } - } - // regardless of source... - this.transcriptLang = language; - - if (source === 'init' || source === 'captions') { - this.captionLang = language; - this.selectedCaptions = captions; - this.selectedChapters = chapters; - this.selectedDescriptions = descriptions; - this.selectedMeta = meta; - this.transcriptCaptions = captions; - this.transcriptChapters = chapters; - this.transcriptDescriptions = descriptions; - this.updateChaptersList(); - // the following was commented out in Oct/Nov 2018. - // chapters popup is setup automatically when setupPopups() is called later with no param - // not sure why it was included here. - // this.setupPopups('chapters'); - } - else if (source === 'transcript') { - this.transcriptCaptions = captions; - this.transcriptChapters = chapters; - this.transcriptDescriptions = descriptions; - } - if (this.selectedDescriptions) { - if (this.selectedDescriptions.language !== this.lang) { - // updating description voice to match new description language - this.updateDescriptionVoice(); - } - } - this.updateTranscript(); - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.updateCaption = function (time) { - - if (!this.usingYouTubeCaptions && (typeof this.$captionsWrapper !== 'undefined')) { - if (this.captionsOn) { - this.$captionsWrapper.show(); - if (typeof time !== 'undefined') { - this.showCaptions(time); - } - } - else if (this.$captionsWrapper) { - this.$captionsWrapper.hide(); - this.prefCaptions = 0; - } - } - }; - - AblePlayer.prototype.updateCaptionsMenu = function (lang) { - - // uncheck all previous menu items - this.captionsPopup.find('li').attr('aria-checked','false'); - if (typeof lang === 'undefined') { - // check the last menu item (captions off) - this.captionsPopup.find('li').last().attr('aria-checked','true'); - } - else { - // check the newly selected lang - this.captionsPopup.find('li[lang=' + lang + ']').attr('aria-checked','true'); - } - }; - - AblePlayer.prototype.getCaptionClickFunction = function (track) { - - // Returns the function used when a caption is clicked in the captions menu. - // Not called if user clicks "Captions off". Instead, that triggers getCaptionOffFunction() - - var thisObj = this; - return function () { - thisObj.selectedCaptions = track; - thisObj.captionLang = track.language; - thisObj.currentCaption = -1; - if (thisObj.usingYouTubeCaptions) { - if (thisObj.captionsOn) { - // Two things must be true in order for setOption() to work: - // The YouTube caption module must be loaded - // and the video must have started playing - if (thisObj.youTubePlayer.getOptions('captions') && thisObj.startedPlaying) { - thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLang}); - } - else { - // the two conditions were not met - // try again to set the language after onApiChange event is triggered - // meanwhile, the following variable will hold the value - thisObj.captionLangPending = thisObj.captionLang; - } - } - else { - if (thisObj.youTubePlayer.getOptions('captions')) { - thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLang}); - } - else { - thisObj.youTubePlayer.loadModule('captions'); - thisObj.captionLangPending = thisObj.captionLang; - } - } - } - else if (thisObj.usingVimeoCaptions) { - thisObj.vimeoPlayer.enableTextTrack(thisObj.captionLang).then(function(track) { - // track.language = the iso code for the language - // track.kind = 'captions' or 'subtitles' - // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - - break; - default: - // some other error occurred - - break; - } - }); - } - else { // using local track elements for captions/subtitles - thisObj.syncTrackLanguages('captions',thisObj.captionLang); - if (!thisObj.swappingSrc) { - thisObj.updateCaption(thisObj.elapsed); - thisObj.showDescription(thisObj.elapsed); - } - } - thisObj.captionsOn = true; - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleCaptionToggle()) - thisObj.hidingPopup = true; - thisObj.captionsPopup.hide(); - // Ensure stopgap gets cancelled if handleCaptionToggle() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar - setTimeout(function() { - thisObj.hidingPopup = false; - }, 100); - thisObj.updateCaptionsMenu(thisObj.captionLang); - thisObj.$ccButton.focus(); - - // save preference to cookie - thisObj.prefCaptions = 1; - thisObj.updateCookie('prefCaptions'); - thisObj.refreshControls('captions'); - } - }; - - // Returns the function used when the "Captions Off" button is clicked in the captions tooltip. - AblePlayer.prototype.getCaptionOffFunction = function () { - var thisObj = this; - return function () { - if (thisObj.player == 'youtube') { - thisObj.youTubePlayer.unloadModule('captions'); - } - else if (thisObj.usingVimeoCaptions) { - thisObj.vimeoPlayer.disableTextTrack(); - } - thisObj.captionsOn = false; - thisObj.currentCaption = -1; - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleCaptionToggle()) - thisObj.hidingPopup = true; - thisObj.captionsPopup.hide(); - // Ensure stopgap gets cancelled if handleCaptionToggle() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar - setTimeout(function() { - thisObj.hidingPopup = false; - }, 100); - thisObj.updateCaptionsMenu(); - thisObj.$ccButton.focus(); - - // save preference to cookie - thisObj.prefCaptions = 0; - thisObj.updateCookie('prefCaptions'); - if (!this.swappingSrc) { - thisObj.refreshControls('captions'); - thisObj.updateCaption(); - } - } - }; - - AblePlayer.prototype.showCaptions = function(now) { - - var c, thisCaption, captionText; - var cues; - if (this.selectedCaptions) { - cues = this.selectedCaptions.cues; - } - else if (this.captions.length >= 1) { - cues = this.captions[0].cues; - } - else { - cues = []; - } - for (c = 0; c < cues.length; c++) { - if ((cues[c].start <= now) && (cues[c].end > now)) { - thisCaption = c; - break; - } - } - if (typeof thisCaption !== 'undefined') { - if (this.currentCaption !== thisCaption) { - // it's time to load the new caption into the container div - captionText = this.flattenCueForCaption(cues[thisCaption]).replace('\n', '<br>'); - this.$captionsDiv.html(captionText); - this.currentCaption = thisCaption; - if (captionText.length === 0) { - // hide captionsDiv; otherwise background-color is visible due to padding - this.$captionsDiv.css('display','none'); - } - else { - this.$captionsDiv.css('display','inline-block'); - } - } - } - else { - this.$captionsDiv.html(''); - this.currentCaption = -1; - } - }; - - AblePlayer.prototype.flattenCueForCaption = function (cue) { - - // Takes a cue and returns the caption text to display - // Also used for chapters - - // Support for 'i' and 'b' tags added in 2.3.66 - // TODO: Add support for 'c' (class) and 'ruby' - - // c (class): <c.myClass1.myClass2>Some text</c> - // Classes can be used to modify other tags too (e.g., <v.loud>) - // If <c> tag, should be rendered as a <span> - - // ruby: http://www.w3schools.com/tags/tag_ruby.asp - - // WebVTT also supports 'u' (underline) - // I see no reason to support that in Able Player. - // If it's available authors are likely to use it incorrectly - // where <i> or <b> should be used instead - // Here are the rare use cases where an underline is appropriate on the web: - // http://html5doctor.com/u-element/ - - var result = []; - - var flattenComponent = function (component) { - var result = [], ii; - if (component.type === 'string') { - result.push(component.value); - } - else if (component.type === 'v') { - result.push('(' + component.value + ')'); - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - } - else if (component.type === 'i') { - result.push('<em>'); - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - result.push('</em>'); - } - else if (component.type === 'b') { - result.push('<strong>'); - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - result.push('</strong>'); - } - else { - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - } - return result.join(''); - }; - - if (typeof cue.components !== 'undefined') { - for (var ii = 0; ii < cue.components.children.length; ii++) { - result.push(flattenComponent(cue.components.children[ii])); - } - } - return result.join(''); - }; - - AblePlayer.prototype.getCaptionsOptions = function(pref) { - - var options = []; - - switch (pref) { - - case 'prefCaptionsFont': - options[0] = ['serif',this.tt.serif]; - options[1] = ['sans-serif',this.tt.sans]; - options[2] = ['cursive',this.tt.cursive]; - options[3] = ['fantasy',this.tt.fantasy]; - options[4] = ['monospace',this.tt.monospace]; - break; - - case 'prefCaptionsColor': - case 'prefCaptionsBGColor': - // HTML color values must be in English - options[0] = ['white',this.tt.white]; - options[1] = ['yellow',this.tt.yellow]; - options[2] = ['green',this.tt.green]; - options[3] = ['cyan',this.tt.cyan]; - options[4] = ['blue',this.tt.blue]; - options[5] = ['magenta',this.tt.magenta]; - options[6] = ['red',this.tt.red]; - options[7] = ['black',this.tt.black]; - break; - - case 'prefCaptionsSize': - options[0] = '75%'; - options[1] = '100%'; - options[2] = '125%'; - options[3] = '150%'; - options[4] = '200%'; - break; - - case 'prefCaptionsOpacity': - options[0] = '0%'; - options[1] = '25%'; - options[2] = '50%'; - options[3] = '75%'; - options[4] = '100%'; - break; - - case 'prefCaptionsStyle': - options[0] = this.tt.captionsStylePopOn; - options[1] = this.tt.captionsStyleRollUp; - break; - - case 'prefCaptionsPosition': - options[0] = 'overlay'; - options[1] = 'below'; - break; - - } - return options; - }; - - AblePlayer.prototype.translatePrefs = function(pref, value, outputFormat) { - - // translate current value of pref to a value supported by outputformat - if (outputFormat == 'youtube') { - if (pref === 'size') { - // YouTube font sizes are a range from -1 to 3 (0 = default) - switch (value) { - case '75%': - return -1; - case '100%': - return 0; - case '125%': - return 1; - case '150%': - return 2; - case '200%': - return 3; - } - } - } - return false; - } - - AblePlayer.prototype.stylizeCaptions = function($element, pref) { - - // $element is the jQuery element containing the captions - // this function handles stylizing of the sample caption text in the Prefs dialog - // plus the actual production captions - // TODO: consider applying the same user prefs to visible text-based description - var property, newValue, opacity, lineHeight; - - if (typeof $element !== 'undefined') { - if (pref == 'prefCaptionsPosition') { - this.positionCaptions(); - } - else if (typeof pref !== 'undefined') { - // just change the one property that user just changed - if (pref === 'prefCaptionsFont') { - property = 'font-family'; - } - else if (pref === 'prefCaptionsSize') { - property = 'font-size'; - } - else if (pref === 'prefCaptionsColor') { - property = 'color'; - } - else if (pref === 'prefCaptionsBGColor') { - property = 'background-color'; - } - else if (pref === 'prefCaptionsOpacity') { - property = 'opacity'; - } - if (pref === 'prefCaptionsOpacity') { - newValue = parseFloat($('#' + this.mediaId + '_' + pref).val()) / 100.0; - } - else { - newValue = $('#' + this.mediaId + '_' + pref).val(); - } - $element.css(property, newValue); - } - else { // no property was specified, update all styles with current saved prefs - opacity = parseFloat(this.prefCaptionsOpacity) / 100.0; - $element.css({ - 'font-family': this.prefCaptionsFont, - 'color': this.prefCaptionsColor, - 'background-color': this.prefCaptionsBGColor, - 'opacity': opacity - }); - if ($element === this.$captionsDiv) { - if (typeof this.$captionsWrapper !== 'undefined') { - this.$captionsWrapper.css({ - 'font-size': this.prefCaptionsSize - }); - } - } - if (this.prefCaptionsPosition === 'below') { - // also need to add the background color to the wrapper div - if (typeof this.$captionsWrapper !== 'undefined') { - this.$captionsWrapper.css({ - 'background-color': this.prefCaptionsBGColor, - 'opacity': '1' - }); - } - } - else if (this.prefCaptionsPosition === 'overlay') { - // no background color for overlay wrapper, captions are displayed in-line - if (typeof this.$captionsWrapper !== 'undefined') { - this.$captionsWrapper.css({ - 'background-color': 'transparent', - 'opacity': '' - }); - } - } - this.positionCaptions(); - } - } - }; - AblePlayer.prototype.positionCaptions = function(position) { - - // set caption position to either 'overlay' or 'below' - // if position parameter was passed to this function, use that - // otherwise use user preference - if (typeof position === 'undefined') { - position = this.prefCaptionsPosition; - } - if (typeof this.$captionsWrapper !== 'undefined') { - - if (position == 'below') { - this.$captionsWrapper.removeClass('able-captions-overlay').addClass('able-captions-below'); - // also need to update in-line styles - this.$captionsWrapper.css({ - 'background-color': this.prefCaptionsBGColor, - 'opacity': '1' - }); - } - else { - this.$captionsWrapper.removeClass('able-captions-below').addClass('able-captions-overlay'); - this.$captionsWrapper.css({ - 'background-color': 'transparent', - 'opacity': '' - }); - } - } - }; - -})(jQuery); - -(function ($) { - - AblePlayer.prototype.populateChaptersDiv = function() { - - var headingLevel, headingType, headingId, $chaptersHeading, - $chaptersList; - - if ($('#' + this.chaptersDivLocation)) { - this.$chaptersDiv = $('#' + this.chaptersDivLocation); - this.$chaptersDiv.addClass('able-chapters-div'); - - // add optional header - if (this.chaptersTitle) { - headingLevel = this.getNextHeadingLevel(this.$chaptersDiv); - headingType = 'h' + headingLevel.toString(); - headingId = this.mediaId + '-chapters-heading'; - $chaptersHeading = $('<' + headingType + '>', { - 'class': 'able-chapters-heading', - 'id': headingId - }).text(this.chaptersTitle); - this.$chaptersDiv.append($chaptersHeading); - } - - this.$chaptersNav = $('<nav>'); - if (this.chaptersTitle) { - this.$chaptersNav.attr('aria-labelledby',headingId); - } - else { - this.$chaptersNav.attr('aria-label',this.tt.chapters); - } - this.$chaptersDiv.append(this.$chaptersNav); - - // populate this.$chaptersNav with a list of chapters - this.updateChaptersList(); - } - }; - - AblePlayer.prototype.updateChaptersList = function() { - - var thisObj, cues, $chaptersList, c, thisChapter, - $chapterItem, $chapterButton, buttonId, hasDefault, - getClickFunction, $clickedItem, $chaptersList, thisChapterIndex; - - thisObj = this; - - if (!this.$chaptersNav) { - return false; - } - - if (typeof this.useChapterTimes === 'undefined') { - if (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) { - this.useChapterTimes = true; - } - else { - this.useChapterTimes = false; - } - } - - if (this.useChapterTimes) { - cues = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { - cues = this.chapters[0].cues; - } - else { - cues = []; - } - if (cues.length > 0) { - $chaptersList = $('<ul>'); - for (c = 0; c < cues.length; c++) { - thisChapter = c; - $chapterItem = $('<li></li>'); - $chapterButton = $('<button>',{ - 'type': 'button', - 'val': thisChapter - }).text(this.flattenCueForCaption(cues[thisChapter])); - - // add event listeners - getClickFunction = function (time) { - return function () { - thisObj.seekTrigger = 'chapter'; - $clickedItem = $(this).closest('li'); - $chaptersList = $(this).closest('ul').find('li'); - thisChapterIndex = $chaptersList.index($clickedItem); - $chaptersList.removeClass('able-current-chapter').attr('aria-selected',''); - $clickedItem.addClass('able-current-chapter').attr('aria-selected','true'); - // Need to updateChapter before seeking to it - // Otherwise seekBar is redrawn with wrong chapterDuration and/or chapterTime - thisObj.updateChapter(time); - thisObj.seekTo(time); - } - }; - $chapterButton.on('click',getClickFunction(cues[thisChapter].start)); // works with Enter too - $chapterButton.on('focus',function() { - $(this).closest('ul').find('li').removeClass('able-focus'); - $(this).closest('li').addClass('able-focus'); - }); - $chapterItem.on('hover',function() { - $(this).closest('ul').find('li').removeClass('able-focus'); - $(this).addClass('able-focus'); - }); - $chapterItem.on('mouseleave',function() { - $(this).removeClass('able-focus'); - }); - $chapterButton.on('blur',function() { - $(this).closest('li').removeClass('able-focus'); - }); - - // put it all together - $chapterItem.append($chapterButton); - $chaptersList.append($chapterItem); - if (this.defaultChapter === cues[thisChapter].id) { - $chapterButton.attr('aria-selected','true').parent('li').addClass('able-current-chapter'); - this.currentChapter = cues[thisChapter]; - hasDefault = true; - } - } - if (!hasDefault) { - // select the first chapter - this.currentChapter = cues[0]; - $chaptersList.find('button').first().attr('aria-selected','true') - .parent('li').addClass('able-current-chapter'); - } - this.$chaptersNav.html($chaptersList); - } - return false; - }; - - AblePlayer.prototype.seekToChapter = function(chapterId) { - - // step through chapters looking for matching ID - var i=0; - while (i < this.selectedChapters.cues.length) { - if (this.selectedChapters.cues[i].id == chapterId) { - // found the target chapter! Seek to it - this.seekTo(this.selectedChapters.cues[i].start); - this.updateChapter(this.selectedChapters.cues[i].start); - break; - } - i++; - } - }; - - AblePlayer.prototype.updateChapter = function (now) { - - // as time-synced chapters change during playback, track changes in current chapter - if (typeof this.selectedChapters === 'undefined') { - return; - } - - var chapters, i, thisChapterIndex, chapterLabel; - - chapters = this.selectedChapters.cues; - for (i = 0; i < chapters.length; i++) { - if ((chapters[i].start <= now) && (chapters[i].end > now)) { - thisChapterIndex = i; - break; - } - } - if (typeof thisChapterIndex !== 'undefined') { - if (this.currentChapter !== chapters[thisChapterIndex]) { - // this is a new chapter - this.currentChapter = chapters[thisChapterIndex]; - if (this.useChapterTimes) { - this.chapterDuration = this.getChapterDuration(); - this.seekIntervalCalculated = false; // will be recalculated in setSeekInterval() - } - if (typeof this.$chaptersDiv !== 'undefined') { - // chapters are listed in an external container - this.$chaptersDiv.find('ul').find('li').removeClass('able-current-chapter').attr('aria-selected',''); - this.$chaptersDiv.find('ul').find('li').eq(thisChapterIndex) - .addClass('able-current-chapter').attr('aria-selected','true'); - } - } - } - }; - - AblePlayer.prototype.getChapterDuration = function () { - - // called if this.seekbarScope === 'chapter' - // get duration of the current chapter - - var lastChapterIndex, chapterEnd; - - if (typeof this.currentChapter === 'undefined') { - return 0; - } - if (typeof this.duration === 'undefined') { - return 0; - } - lastChapterIndex = this.selectedChapters.cues.length-1; - if (this.selectedChapters.cues[lastChapterIndex] == this.currentChapter) { - // this is the last chapter - if (this.currentChapter.end !== this.duration) { - // chapter ends before or after video ends, adjust chapter end to match video end - chapterEnd = this.duration; - this.currentChapter.end = this.duration; - } - else { - chapterEnd = this.currentChapter.end; - } - } - else { // this is not the last chapter - chapterEnd = this.currentChapter.end; - } - return chapterEnd - this.currentChapter.start; - }; - - AblePlayer.prototype.getChapterElapsed = function () { - // called if this.seekbarScope === 'chapter' - // get current elapsed time, relative to the current chapter duration - - if (typeof this.currentChapter === 'undefined') { - return 0; - } - - if (this.elapsed > this.currentChapter.start) { - return this.elapsed - this.currentChapter.start; - } - else { - return 0; - } - }; - - AblePlayer.prototype.convertChapterTimeToVideoTime = function (chapterTime) { - - // chapterTime is the time within the current chapter - // return the same time, relative to the entire video - if (typeof this.currentChapter !== 'undefined') { - var newTime = this.currentChapter.start + chapterTime; - if (newTime > this.currentChapter.end) { - return this.currentChapter.end; - } - else { - return newTime; - } - } - else { - return chapterTime; - } - }; - - AblePlayer.prototype.getChapterClickFunction = function (time) { - - // Returns the function used when a chapter is clicked in the chapters menu. - var thisObj = this; - return function () { - thisObj.seekTrigger = 'chapter'; - thisObj.seekTo(time); - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleChapters()) - thisObj.hidingPopup = true; - thisObj.chaptersPopup.hide(); - // Ensure stopgap gets cancelled if handleChapters() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar - setTimeout(function() { - thisObj.hidingPopup = false; - }, 100); - thisObj.$chaptersButton.focus(); - } - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.updateMeta = function (time) { - if (this.hasMeta) { - if (this.metaType === 'text') { - this.$metaDiv.show(); - this.showMeta(time || this.elapsed); - } - else { - this.showMeta(time || this.elapsed); - } - } - }; - - AblePlayer.prototype.showMeta = function(now) { - var tempSelectors, m, thisMeta, - cues, cueText, cueLines, i, line, - showDuration, focusTarget; - - tempSelectors = []; - if (this.meta.length >= 1) { - cues = this.meta; - } - else { - cues = []; - } - for (m = 0; m < cues.length; m++) { - if ((cues[m].start <= now) && (cues[m].end > now)) { - thisMeta = m; - break; - } - } - if (typeof thisMeta !== 'undefined') { - if (this.currentMeta !== thisMeta) { - if (this.metaType === 'text') { - // it's time to load the new metadata cue into the container div - this.$metaDiv.html(this.flattenCueForMeta(cues[thisMeta]).replace('\n', '<br>')); - } - else if (this.metaType === 'selector') { - // it's time to show content referenced by the designated selector(s) - cueText = this.flattenCueForMeta(cues[thisMeta]); - cueLines = cueText.split('\n'); - for (i=0; i<cueLines.length; i++) { - line = $.trim(cueLines[i]); - if (line.toLowerCase().trim() === 'pause') { - // don't show big play button when pausing via metadata - this.hideBigPlayButton = true; - this.pauseMedia(); - } - else if (line.toLowerCase().substring(0,6) == 'focus:') { - focusTarget = line.substring(6).trim(); - if ($(focusTarget).length) { - $(focusTarget).focus(); - } - } - else { - if ($(line).length) { - // selector exists - this.currentMeta = thisMeta; - showDuration = parseInt($(line).attr('data-duration')); - if (typeof showDuration !== 'undefined' && !isNaN(showDuration)) { - $(line).show().delay(showDuration).fadeOut(); - } - else { - // no duration specified. Just show the element until end time specified in VTT file - $(line).show(); - } - // add to array of visible selectors so it can be hidden at end time - this.visibleSelectors.push(line); - tempSelectors.push(line); - - } - } - } - // now step through this.visibleSelectors and remove anything that's stale - if (this.visibleSelectors && this.visibleSelectors.length) { - if (this.visibleSelectors.length !== tempSelectors.length) { - for (i=this.visibleSelectors.length-1; i>=0; i--) { - if ($.inArray(this.visibleSelectors[i],tempSelectors) == -1) { - $(this.visibleSelectors[i]).hide(); - this.visibleSelectors.splice(i,1); - } - } - } - } - - } - } - } - else { - // there is currently no metadata. Empty stale content - if (typeof this.$metaDiv !== 'undefined') { - this.$metaDiv.html(''); - } - if (this.visibleSelectors && this.visibleSelectors.length) { - for (i=0; i<this.visibleSelectors.length; i++) { - $(this.visibleSelectors[i]).hide(); - } - // reset array - this.visibleSelectors = []; - } - this.currentMeta = -1; - } - }; - - // Takes a cue and returns the metadata text to display for it. - AblePlayer.prototype.flattenCueForMeta = function (cue) { - var result = []; - - var flattenComponent = function (component) { - var result = [], ii; - if (component.type === 'string') { - result.push(component.value); - } - else if (component.type === 'v') { - result.push('[' + component.value + ']'); - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - } - else { - for (ii = 0; ii < component.children.length; ii++) { - result.push(flattenComponent(component.children[ii])); - } - } - return result.join(''); - } - - for (var ii = 0; ii < cue.components.children.length; ii++) { - result.push(flattenComponent(cue.components.children[ii])); - } - - return result.join(''); - }; - -})(jQuery); - -(function ($) { - - AblePlayer.prototype.setupTranscript = function() { - - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - if (!this.transcriptType) { - // previously set transcriptType to null since there are no <track> elements - // check again to see if captions have been collected from other sources (e.g., YouTube) - - if (this.captions.length && (!(this.usingYouTubeCaptions || this.usingVimeoCaptions))) { - // captions are possible! Use the default type (popup) - // if other types ('external' and 'manual') were desired, transcriptType would not be null here - this.transcriptType = 'popup'; - } - } - - if (this.transcriptType) { - if (this.transcriptType === 'popup' || this.transcriptType === 'external') { - this.injectTranscriptArea(); - deferred.resolve(); - } - else if (this.transcriptType === 'manual') { - this.setupManualTranscript(); - deferred.resolve(); - } - } - else { - // there is no transcript - deferred.resolve(); - } - return promise; - }; - - AblePlayer.prototype.injectTranscriptArea = function() { - - var thisObj, $autoScrollLabel, $languageSelectWrapper, $languageSelectLabel, i, $option; - - thisObj = this; - this.$transcriptArea = $('<div>', { - 'class': 'able-transcript-area', - 'role': 'dialog', - 'aria-label': this.tt.transcriptTitle - }); - - this.$transcriptToolbar = $('<div>', { - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' - }); - - this.$transcriptDiv = $('<div>', { - 'class' : 'able-transcript' - }); - - // Transcript toolbar content - - // Add auto Scroll checkbox - this.$autoScrollTranscriptCheckbox = $('<input>', { - 'id': 'autoscroll-transcript-checkbox-' + this.mediaId, - 'type': 'checkbox' - }); - $autoScrollLabel = $('<label>', { - 'for': 'autoscroll-transcript-checkbox-' + this.mediaId - }).text(this.tt.autoScroll); - this.$transcriptToolbar.append($autoScrollLabel,this.$autoScrollTranscriptCheckbox); - - // Add field for selecting a transcript language - // Only necessary if there is more than one language - if (this.captions.length > 1) { - $languageSelectWrapper = $('<div>',{ - 'class': 'transcript-language-select-wrapper' - }); - $languageSelectLabel = $('<label>',{ - 'for': 'transcript-language-select-' + this.mediaId - }).text(this.tt.language); - this.$transcriptLanguageSelect = $('<select>',{ - 'id': 'transcript-language-select-' + this.mediaId - }); - for (i=0; i < this.captions.length; i++) { - $option = $('<option></option>',{ - value: this.captions[i]['language'], - lang: this.captions[i]['language'] - }).text(this.captions[i]['label']); - if (this.captions[i]['def']) { - $option.prop('selected',true); - } - this.$transcriptLanguageSelect.append($option); - } - } - if ($languageSelectWrapper) { - $languageSelectWrapper.append($languageSelectLabel,this.$transcriptLanguageSelect); - this.$transcriptToolbar.append($languageSelectWrapper); - } - this.$transcriptArea.append(this.$transcriptToolbar, this.$transcriptDiv); - - // If client has provided separate transcript location, put it there. - // Otherwise append it to the body - if (this.transcriptDivLocation) { - $('#' + this.transcriptDivLocation).append(this.$transcriptArea); - } - else { - this.$ableWrapper.append(this.$transcriptArea); - } - - // make it draggable (popup only; NOT external transcript) - if (!this.transcriptDivLocation) { - this.initDragDrop('transcript'); - if (this.prefTranscript === 1) { - // transcript is on. Go ahead and position it - this.positionDraggableWindow('transcript',this.getDefaultWidth('transcript')); - } - } - - // If client has provided separate transcript location, override user's preference for hiding transcript - if (!this.prefTranscript && !this.transcriptDivLocation) { - this.$transcriptArea.hide(); - } - }; - - AblePlayer.prototype.addTranscriptAreaEvents = function() { - - var thisObj = this; - - this.$autoScrollTranscriptCheckbox.click(function () { - thisObj.handleTranscriptLockToggle(thisObj.$autoScrollTranscriptCheckbox.prop('checked')); - }); - - 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) { - thisObj.autoScrollTranscript = false; - thisObj.refreshControls('transcript'); - } - thisObj.scrollingTranscript = false; - }); - - if (typeof this.$transcriptLanguageSelect !== 'undefined') { - - this.$transcriptLanguageSelect.on('click mousedown',function (e) { - // execute default behavior - // prevent propagation of mouse event to toolbar or window - e.stopPropagation(); - }); - - this.$transcriptLanguageSelect.on('change',function () { - - var language = thisObj.$transcriptLanguageSelect.val(); - - thisObj.syncTrackLanguages('transcript',language); - }); - } - }; - - AblePlayer.prototype.transcriptSrcHasRequiredParts = function() { - - // check the external transcript to be sure it has all required components - // return true or false - // in the process, define all the needed variables and properties - - if ($('#' + this.transcriptSrc).length) { - this.$transcriptArea = $('#' + this.transcriptSrc); - if (this.$transcriptArea.find('.able-window-toolbar').length) { - this.$transcriptToolbar = this.$transcriptArea.find('.able-window-toolbar').eq(0); - if (this.$transcriptArea.find('.able-transcript').length) { - this.$transcriptDiv = this.$transcriptArea.find('.able-transcript').eq(0); - if (this.$transcriptArea.find('.able-transcript-seekpoint').length) { - this.$transcriptSeekpoints = this.$transcriptArea.find('.able-transcript-seekpoint'); - return true; - } - } - } - } - return false; - } - - AblePlayer.prototype.setupManualTranscript = function() { - - var $autoScrollInput, $autoScrollLabel; - - $autoScrollInput = $('<input>', { - 'id': 'autoscroll-transcript-checkbox-' + this.mediaId, - 'type': 'checkbox' - }); - $autoScrollLabel = $('<label>', { - 'for': 'autoscroll-transcript-checkbox-' + this.mediaId - }).text(this.tt.autoScroll); - - // Add an auto-scroll checkbox to the toolbar. - this.$autoScrollTranscriptCheckbox = $autoScrollInput; - this.$transcriptToolbar.append($autoScrollLabel, this.$autoScrollTranscriptCheckbox); - - }; - - AblePlayer.prototype.updateTranscript = function() { - - if (!this.transcriptType) { - return; - } - - if (this.transcriptType === 'external' || this.transcriptType === 'popup') { - - var chapters, captions, descriptions; - - // Language of transcript might be different than language of captions - // But both are in sync by default - if (this.transcriptLang) { - captions = this.transcriptCaptions.cues; - } - else { - if (this.transcriptCaptions) { - this.transcriptLang = this.transcriptCaptions.language; - captions = this.transcriptCaptions.cues; - } - else if (this.selectedCaptions) { - this.transcriptLang = this.captionLang; - captions = this.selectedCaptions.cues; - } - } - - // setup chapters - if (this.transcriptChapters) { - chapters = this.transcriptChapters.cues; - } - else if (this.chapters.length > 0) { - // Try and match the caption language. - if (this.transcriptLang) { - for (var i = 0; i < this.chapters.length; i++) { - if (this.chapters[i].language === this.transcriptLang) { - chapters = this.chapters[i].cues; - } - } - } - if (typeof chapters === 'undefined') { - chapters = this.chapters[0].cues || []; - } - } - - // setup descriptions - if (this.transcriptDescriptions) { - descriptions = this.transcriptDescriptions.cues; - } - else if (this.descriptions.length > 0) { - // Try and match the caption language. - if (this.transcriptLang) { - for (var i = 0; i < this.descriptions.length; i++) { - if (this.descriptions[i].language === this.transcriptLang) { - descriptions = this.descriptions[i].cues; - } - } - } - if (!descriptions) { - descriptions = this.descriptions[0].cues || []; - } - } - - var div = this.generateTranscript(chapters || [], captions || [], descriptions || []); - - this.$transcriptDiv.html(div); - // reset transcript selected <option> to this.transcriptLang - if (this.$transcriptLanguageSelect) { - this.$transcriptLanguageSelect.find('option:selected').prop('selected',false); - this.$transcriptLanguageSelect.find('option[lang=' + this.transcriptLang + ']').prop('selected',true); - } - } - - var thisObj = this; - - // Make transcript tabbable if preference is turned on. - if (this.prefTabbable === 1) { - this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - - // handle clicks on text within transcript - // Note: This event listeners handles clicks only, not keydown events - // 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(e) { - thisObj.seekTrigger = 'transcript'; - var spanStart = parseFloat($(this).attr('data-start')); - // Add a tiny amount so that we're inside the span. - spanStart += .01; - // 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; - } - }); - } - }; - - AblePlayer.prototype.highlightTranscript = function (currentTime) { - - // Show highlight in transcript marking current caption. - - if (!this.transcriptType) { - return; - } - - var start, end, isChapterHeading; - var thisObj = this; - - currentTime = parseFloat(currentTime); - - // Highlight the current transcript item. - this.$transcriptArea.find('span.able-transcript-seekpoint').each(function() { - start = parseFloat($(this).attr('data-start')); - end = parseFloat($(this).attr('data-end')); - // be sure this isn't a chapter (don't highlight chapter headings) - if ($(this).parent().hasClass('able-transcript-chapter-heading')) { - isChapterHeading = true; - } - else { - isChapterHeading = false; - } - - if (currentTime >= start && currentTime <= end && !isChapterHeading) { - - // If this item isn't already highlighted, it should be - if (!($(this).hasClass('able-highlight'))) { - // remove all previous highlights before adding one to current span - thisObj.$transcriptArea.find('.able-highlight').removeClass('able-highlight'); - $(this).addClass('able-highlight'); - thisObj.movingHighlight = true; - } - return false; - } - }); - thisObj.currentHighlight = thisObj.$transcriptArea.find('.able-highlight'); - if (thisObj.currentHighlight.length === 0) { - // Nothing highlighted. - thisObj.currentHighlight = null; - } - }; - - AblePlayer.prototype.generateTranscript = function(chapters, captions, descriptions) { - - var thisObj = this; - - var $main = $('<div class="able-transcript-container"></div>'); - var transcriptTitle; - - // set language for transcript container - $main.attr('lang', this.transcriptLang); - - if (typeof this.transcriptTitle !== 'undefined') { - transcriptTitle = this.transcriptTitle; - } - else if (this.lyricsMode) { - transcriptTitle = this.tt.lyricsTitle; - } - else { - transcriptTitle = this.tt.transcriptTitle; - } - - if (typeof this.transcriptDivLocation === 'undefined') { - // only add an HTML heading to internal transcript - // external transcript is expected to have its own heading - var headingNumber = this.playerHeadingLevel; - headingNumber += 1; - var chapterHeadingNumber = headingNumber + 1; - - if (headingNumber <= 6) { - var transcriptHeading = 'h' + headingNumber.toString(); - } - else { - var transcriptHeading = 'div'; - } - // var transcriptHeadingTag = '<' + transcriptHeading + ' class="able-transcript-heading">'; - var $transcriptHeadingTag = $('<' + transcriptHeading + '>'); - $transcriptHeadingTag.addClass('able-transcript-heading'); - if (headingNumber > 6) { - $transcriptHeadingTag.attr({ - 'role': 'heading', - 'aria-level': headingNumber - }); - } - $transcriptHeadingTag.text(transcriptTitle); - - // set language of transcript heading to language of player - // this is independent of language of transcript - $transcriptHeadingTag.attr('lang', this.lang); - - $main.append($transcriptHeadingTag); - } - - var nextChapter = 0; - var nextCap = 0; - var nextDesc = 0; - - var addChapter = function(div, chap) { - - if (chapterHeadingNumber <= 6) { - var chapterHeading = 'h' + chapterHeadingNumber.toString(); - } - else { - var chapterHeading = 'div'; - } - - var $chapterHeadingTag = $('<' + chapterHeading + '>',{ - 'class': 'able-transcript-chapter-heading' - }); - if (chapterHeadingNumber > 6) { - $chapterHeadingTag.attr({ - 'role': 'heading', - 'aria-level': chapterHeadingNumber - }); - } - - var flattenComponentForChapter = function(comp) { - - var result = []; - if (comp.type === 'string') { - result.push(comp.value); - } - else { - for (var i = 0; i < comp.children.length; i++) { - result = result.concat(flattenComponentForChapter(comp.children[i])); - } - } - return result; - } - - var $chapSpan = $('<span>',{ - 'class': 'able-transcript-seekpoint' - }); - for (var i = 0; i < chap.components.children.length; i++) { - var results = flattenComponentForChapter(chap.components.children[i]); - for (var jj = 0; jj < results.length; jj++) { - $chapSpan.append(results[jj]); - } - } - $chapSpan.attr('data-start', chap.start.toString()); - $chapSpan.attr('data-end', chap.end.toString()); - $chapterHeadingTag.append($chapSpan); - - div.append($chapterHeadingTag); - }; - - var addDescription = function(div, desc) { - var $descDiv = $('<div>', { - 'class': 'able-transcript-desc' - }); - var $descHiddenSpan = $('<span>',{ - 'class': 'able-hidden' - }); - $descHiddenSpan.attr('lang', thisObj.lang); - $descHiddenSpan.text(thisObj.tt.prefHeadingDescription + ': '); - $descDiv.append($descHiddenSpan); - - var flattenComponentForDescription = function(comp) { - - var result = []; - if (comp.type === 'string') { - result.push(comp.value); - } - else { - for (var i = 0; i < comp.children.length; i++) { - result = result.concat(flattenComponentForDescription(comp.children[i])); - } - } - return result; - } - - var $descSpan = $('<span>',{ - 'class': 'able-transcript-seekpoint' - }); - for (var i = 0; i < desc.components.children.length; i++) { - var results = flattenComponentForDescription(desc.components.children[i]); - for (var jj = 0; jj < results.length; jj++) { - $descSpan.append(results[jj]); - } - } - $descSpan.attr('data-start', desc.start.toString()); - $descSpan.attr('data-end', desc.end.toString()); - $descDiv.append($descSpan); - - div.append($descDiv); - }; - - var addCaption = function(div, cap) { - - var $capSpan = $('<span>',{ - 'class': 'able-transcript-seekpoint able-transcript-caption' - }); - - var flattenComponentForCaption = function(comp) { - - var result = []; - - var parts = 0; - - var flattenString = function (str) { - - parts++; - - var flatStr; - var result = []; - if (str === '') { - return result; - } - - var openBracket = str.indexOf('['); - var closeBracket = str.indexOf(']'); - var openParen = str.indexOf('('); - var closeParen = str.indexOf(')'); - - var hasBrackets = openBracket !== -1 && closeBracket !== -1; - var hasParens = openParen !== -1 && closeParen !== -1; - - if (hasParens || hasBrackets) { - if (parts > 1) { - // force a line break between sections that contain parens or brackets - var silentSpanBreak = '<br/>'; - } - else { - var silentSpanBreak = ''; - } - var silentSpanOpen = silentSpanBreak + '<span class="able-unspoken">'; - var silentSpanClose = '</span>'; - if (hasParens && hasBrackets) { - // string has both! - if (openBracket < openParen) { - // brackets come first. Parse parens separately - hasParens = false; - } - else { - // parens come first. Parse brackets separately - hasBrackets = false; - } - } - } - if (hasParens) { - flatStr = str.substring(0, openParen); - flatStr += silentSpanOpen; - flatStr += str.substring(openParen, closeParen + 1); - flatStr += silentSpanClose; - flatStr += flattenString(str.substring(closeParen + 1)); - result.push(flatStr); - } - else if (hasBrackets) { - flatStr = str.substring(0, openBracket); - flatStr += silentSpanOpen; - flatStr += str.substring(openBracket, closeBracket + 1); - flatStr += silentSpanClose; - flatStr += flattenString(str.substring(closeBracket + 1)); - result.push(flatStr); - } - else { - result.push(str); - } - return result; - }; - - if (comp.type === 'string') { - result = result.concat(flattenString(comp.value)); - } - else if (comp.type === 'v') { - var $vSpan = $('<span>',{ - 'class': 'able-unspoken' - }); - $vSpan.text('(' + comp.value + ')'); - result.push($vSpan); - for (var i = 0; i < comp.children.length; i++) { - var subResults = flattenComponentForCaption(comp.children[i]); - for (var jj = 0; jj < subResults.length; jj++) { - result.push(subResults[jj]); - } - } - } - else if (comp.type === 'b' || comp.type === 'i') { - if (comp.type === 'b') { - var $tag = $('<strong>'); - } - else if (comp.type === 'i') { - var $tag = $('<em>'); - } - for (var i = 0; i < comp.children.length; i++) { - var subResults = flattenComponentForCaption(comp.children[i]); - for (var jj = 0; jj < subResults.length; jj++) { - $tag.append(subResults[jj]); - } - } - if (comp.type === 'b' || comp.type == 'i') { - result.push($tag,' '); - } - } - else { - for (var i = 0; i < comp.children.length; i++) { - result = result.concat(flattenComponentForCaption(comp.children[i])); - } - } - return result; - }; - - for (var i = 0; i < cap.components.children.length; i++) { - var results = flattenComponentForCaption(cap.components.children[i]); - for (var jj = 0; jj < results.length; jj++) { - var result = results[jj]; - if (typeof result === 'string') { - if (thisObj.lyricsMode) { - // add <br> BETWEEN each caption and WITHIN each caption (if payload includes "\n") - result = result.replace('\n','<br>') + '<br>'; - } - else { - // just add a space between captions - result += ' '; - } - } - $capSpan.append(result); - } - } - $capSpan.attr('data-start', cap.start.toString()); - $capSpan.attr('data-end', cap.end.toString()); - div.append($capSpan); - div.append(' \n'); - }; - - // keep looping as long as any one of the three arrays has content - while ((nextChapter < chapters.length) || (nextDesc < descriptions.length) || (nextCap < captions.length)) { - - if ((nextChapter < chapters.length) && (nextDesc < descriptions.length) && (nextCap < captions.length)) { - // they all three have content - var firstStart = Math.min(chapters[nextChapter].start,descriptions[nextDesc].start,captions[nextCap].start); - } - else if ((nextChapter < chapters.length) && (nextDesc < descriptions.length)) { - // chapters & descriptions have content - var firstStart = Math.min(chapters[nextChapter].start,descriptions[nextDesc].start); - } - else if ((nextChapter < chapters.length) && (nextCap < captions.length)) { - // chapters & captions have content - var firstStart = Math.min(chapters[nextChapter].start,captions[nextCap].start); - } - else if ((nextDesc < descriptions.length) && (nextCap < captions.length)) { - // descriptions & captions have content - var firstStart = Math.min(descriptions[nextDesc].start,captions[nextCap].start); - } - else { - var firstStart = null; - } - if (firstStart !== null) { - if (typeof chapters[nextChapter] !== 'undefined' && chapters[nextChapter].start === firstStart) { - addChapter($main, chapters[nextChapter]); - nextChapter += 1; - } - else if (typeof descriptions[nextDesc] !== 'undefined' && descriptions[nextDesc].start === firstStart) { - addDescription($main, descriptions[nextDesc]); - nextDesc += 1; - } - else { - addCaption($main, captions[nextCap]); - nextCap += 1; - } - } - else { - if (nextChapter < chapters.length) { - addChapter($main, chapters[nextChapter]); - nextChapter += 1; - } - else if (nextDesc < descriptions.length) { - addDescription($main, descriptions[nextDesc]); - nextDesc += 1; - } - else if (nextCap < captions.length) { - addCaption($main, captions[nextCap]); - nextCap += 1; - } - } - } - // organize transcript into blocks using [] and () as starting points - var $components = $main.children(); - var spanCount = 0; - var openBlock = true; - $components.each(function() { - if ($(this).hasClass('able-transcript-caption')) { - if ($(this).text().indexOf('[') !== -1 || $(this).text().indexOf('(') !== -1) { - // this caption includes a bracket or parenth. Start a new block - // close the previous block first - if (spanCount > 0) { - $main.find('.able-block-temp').removeClass('able-block-temp').wrapAll('<div class="able-transcript-block"></div>'); - spanCount = 0; - } - } - $(this).addClass('able-block-temp'); - spanCount++; - } - else { - // this is not a caption. Close the caption block - if (spanCount > 0) { - $main.find('.able-block-temp').removeClass('able-block-temp').wrapAll('<div class="able-transcript-block"></div>'); - spanCount = 0; - } - } - }); - return $main; - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.showSearchResults = function() { - - // search VTT file for all instances of searchTerms - // Currently just supports search terms separated with one or more spaces - - // TODO: Add support for more robust search syntax: - // Search terms wrapped in quotation marks ("") must occur exactly as they appear in the quotes - // Search terms with an attached minus sign (e.g., -term) are to be excluded from results - // Boolean AND/OR operators - // ALSO: Add localization support - - var thisObj = this; - if (this.searchDiv && this.searchString) { - if ($('#' + this.SearchDiv)) { - var searchStringHtml = '<p>' + this.tt.resultsSummary1 + ' '; - searchStringHtml += '<span id="able-search-term-echo">' + this.searchString + '</span>'; - searchStringHtml += '</p>'; - var resultsArray = this.searchFor(this.searchString, this.searchIgnoreCaps); - if (resultsArray.length > 0) { - var $resultsSummary = $('<p>',{ - 'class': 'able-search-results-summary' - }); - var resultsSummaryText = this.tt.resultsSummary2; - resultsSummaryText += ' <strong>' + resultsArray.length + '</strong> '; - resultsSummaryText += this.tt.resultsSummary3 + ' '; - resultsSummaryText += this.tt.resultsSummary4; - $resultsSummary.html(resultsSummaryText); - var $resultsList = $('<ul>'); - for (var i = 0; i < resultsArray.length; i++) { - var resultId = 'aria-search-result-' + i; - var $resultsItem = $('<li>',{}); - var itemStartTime = this.secondsToTime(resultsArray[i]['start']); - var itemLabel = this.tt.searchButtonLabel + ' ' + itemStartTime['title']; - var itemStartSpan = $('<button>',{ - 'class': 'able-search-results-time', - 'data-start': resultsArray[i]['start'], - 'title': itemLabel, - 'aria-label': itemLabel, - 'aria-describedby': resultId - }); - itemStartSpan.text(itemStartTime['value']); - // add a listener for clisk on itemStart - itemStartSpan.on('click',function(e) { - thisObj.seekTrigger = 'search'; - var spanStart = parseFloat($(this).attr('data-start')); - // Add a tiny amount so that we're inside the span. - spanStart += .01; - thisObj.seeking = true; - thisObj.seekTo(spanStart); - }); - - var itemText = $('<span>',{ - 'class': 'able-search-result-text', - 'id': resultId - }) - itemText.html('...' + resultsArray[i]['caption'] + '...'); - $resultsItem.append(itemStartSpan, itemText); - $resultsList.append($resultsItem); - } - $('#' + this.searchDiv).html(searchStringHtml).append($resultsSummary,$resultsList); - } - else { - var noResults = $('<p>').text(this.tt.noResultsFound); - $('#' + this.searchDiv).html(searchStringHtml).append(noResults); - } - } - } - }; - - AblePlayer.prototype.searchFor = function(searchString, ignoreCaps) { - - // return chronological array of caption cues that match searchTerms - var captionLang, captions, results, caption, c, i, j; - results = []; - // split searchTerms into an array - var searchTerms = searchString.split(' '); - if (this.captions.length > 0) { - // Get caption track that matches this.searchLang - for (i=0; i < this.captions.length; i++) { - if (this.captions[i].language === this.searchLang) { - captionLang = this.searchLang; - captions = this.captions[i].cues; - } - } - if (captions.length > 0) { - c = 0; - for (i = 0; i < captions.length; i++) { - if ($.inArray(captions[i].components.children[0]['type'], ['string','i','b','u','v','c']) !== -1) { - caption = this.flattenCueForCaption(captions[i]); - var captionNormalized = ignoreCaps ? caption.toLowerCase() : caption; - for (j = 0; j < searchTerms.length; j++) { - var searchTermNormalized = ignoreCaps ? searchTerms[j].toLowerCase() : searchTerms[j]; - if (captionNormalized.indexOf(searchTermNormalized) !== -1) { - results[c] = []; - results[c]['start'] = captions[i].start; - results[c]['lang'] = captionLang; - results[c]['caption'] = this.highlightSearchTerm(searchTerms,caption); - c++; - break; - } - } - } - } - } - } - return results; - }; - - AblePlayer.prototype.highlightSearchTerm = function(searchTerms, resultString) { - // highlight ALL found searchTerms in the current resultString - // Need to step through the remaining terms to see if they're present as well - searchTerms.forEach(function(searchTerm) { - var reg = new RegExp(searchTerm, 'gi'); - resultString = resultString.replace(reg, '<span class="able-search-term">$&</span>'); - }); - return resultString; - }; - - AblePlayer.prototype.secondsToTime = function(totalSeconds) { - - // return an array of totalSeconds converted into two formats - // time['value'] = HH:MM:SS with hours dropped if there are none - // time['title'] = a speakable rendering, so speech rec users can easily speak the link - - // first, round down to nearest second - var totalSeconds = Math.floor(totalSeconds); - - var hours = parseInt( totalSeconds / 3600 , 10) % 24; - var minutes = parseInt( totalSeconds / 60 , 10) % 60; - var seconds = totalSeconds % 60; - var value = ''; - var title = ''; - if (hours > 0) { - value += hours + ':'; - if (hours == 1) { - title += '1 ' + this.tt.hour + ' '; - } - else { - title += hours + ' ' + this.tt.hours + ' '; - } - } - if (minutes < 10) { - value += '0' + minutes + ':'; - if (minutes > 0) { - if (minutes == 1) { - title += '1 ' + this.tt.minute + ' '; - } - else { - title += minutes + ' ' + this.tt.minutes + ' '; - } - } - } - else { - value += minutes + ':'; - title += minutes + ' ' + this.tt.minutes + ' '; - } - if (seconds < 10) { - value += '0' + seconds; - if (seconds > 0) { - if (seconds == 1) { - title += '1 ' + this.tt.second + ' '; - } - else { - title += seconds + ' ' + this.tt.seconds + ' '; - } - } - } - else { - value += seconds; - title += seconds + ' ' + this.tt.seconds + ' '; - } - var time = []; - time['value'] = value; - time['title'] = title; - return time; - }; -})(jQuery); - -(function ($) { - // Media events - AblePlayer.prototype.onMediaUpdateTime = function (duration, elapsed) { - - // duration and elapsed are passed from callback functions of Vimeo API events - // duration is expressed as sss.xxx - // elapsed is expressed as sss.xxx - var thisObj = this; - this.getMediaTimes(duration,elapsed).then(function(mediaTimes) { - thisObj.duration = mediaTimes['duration']; - thisObj.elapsed = mediaTimes['elapsed']; - if (thisObj.swappingSrc && (typeof thisObj.swapTime !== 'undefined')) { - if (thisObj.swapTime === thisObj.elapsed) { - // described version been swapped and media has scrubbed to time of previous version - if (thisObj.playing) { - // resume playback - thisObj.playMedia(); - // reset vars - thisObj.swappingSrc = false; - thisObj.swapTime = null; - } - } - } - else { - // do all the usual time-sync stuff during playback - if (thisObj.prefHighlight === 1) { - thisObj.highlightTranscript(thisObj.elapsed); - } - thisObj.updateCaption(thisObj.elapsed); - thisObj.showDescription(thisObj.elapsed); - thisObj.updateChapter(thisObj.elapsed); - thisObj.updateMeta(thisObj.elapsed); - thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); - } - }); - }; - - AblePlayer.prototype.onMediaPause = function () { - - if (this.controlsHidden) { - this.fadeControls('in'); - this.controlsHidden = false; - } - if (this.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(this.hideControlsTimeout); - this.hideControlsTimeoutStatus = 'clear'; - - } - this.refreshControls('playpause'); - }; - - AblePlayer.prototype.onMediaComplete = function () { - // if there's a playlist, advance to next item and start playing - if (this.hasPlaylist && !this.cueingPlaylistItem) { - if (this.playlistIndex === (this.$playlist.length - 1)) { - // this is the last track in the playlist - if (this.loop) { - this.playlistIndex = 0; - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings - this.cuePlaylistItem(0); - } - else { - this.playing = false; - this.paused = true; - } - } - else { - // this is not the last track. Play the next one. - this.playlistIndex++; - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings - this.cuePlaylistItem(this.playlistIndex) - } - } - this.refreshControls('init'); - }; - - AblePlayer.prototype.onMediaNewSourceLoad = function () { - - if (this.cueingPlaylistItem) { - // this variable was set in order to address bugs caused by multiple firings of media 'end' event - // safe to reset now - this.cueingPlaylistItem = false; - } - if (this.swappingSrc === true) { - // new source file has just been loaded - if (this.swapTime > 0) { - // this.swappingSrc will be set to false after seek is complete - // see onMediaUpdateTime() - this.seekTo(this.swapTime); - } - else { - if (this.playing) { - // should be able to resume playback - this.playMedia(); - } - this.swappingSrc = false; // swapping is finished - } - } - this.refreshControls('init'); - }; - - // End Media events - - AblePlayer.prototype.onWindowResize = function () { - - if (this.fullscreen) { // replace isFullscreen() with a Boolean. see function for explanation - - var newWidth, newHeight; - - newWidth = $(window).width(); - - // haven't isolated why, but some browsers return an innerHeight that's 20px too tall in fullscreen mode - // Test results: - // Browsers that require a 20px adjustment: Firefox, IE11 (Trident), Edge - if (this.isUserAgent('Firefox') || this.isUserAgent('Trident') || this.isUserAgent('Edge')) { - newHeight = window.innerHeight - this.$playerDiv.outerHeight() - 20; - } - else if (window.outerHeight >= window.innerHeight) { - // Browsers that do NOT require adjustment: Chrome, Safari, Opera, MSIE 10 - newHeight = window.innerHeight - this.$playerDiv.outerHeight(); - } - else { - // Observed in Safari 9.0.1 on Mac OS X: outerHeight is actually less than innerHeight - // Maybe a bug, or maybe window.outerHeight is already adjusted for controller height(?) - // No longer observed in Safari 9.0.2 - newHeight = window.outerHeight; - } - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - this.positionCaptions('overlay'); - } - else { // not fullscreen - if (this.restoringAfterFullScreen) { - newWidth = this.preFullScreenWidth; - newHeight = this.preFullScreenHeight; - } - else { - // not restoring after full screen - newWidth = this.$ableWrapper.width(); - if (typeof this.aspectRatio !== 'undefined') { - newHeight = Math.round(newWidth / this.aspectRatio); - } - else { - // not likely, since this.aspectRatio is defined during intialization - // however, this is a fallback scenario just in case - newHeight = this.$ableWrapper.height(); - } - this.positionCaptions(); // reset with this.prefCaptionsPosition - } - } - this.resizePlayer(newWidth, newHeight); - }; - - AblePlayer.prototype.addSeekbarListeners = function () { - - var thisObj = this; - - // Handle seek bar events. - this.seekBar.bodyDiv.on('startTracking', function (e) { - thisObj.pausedBeforeTracking = thisObj.paused; - thisObj.pauseMedia(); - }).on('tracking', function (e, position) { - // Scrub transcript, captions, and metadata. - thisObj.highlightTranscript(position); - thisObj.updateCaption(position); - thisObj.showDescription(position); - thisObj.updateChapter(thisObj.convertChapterTimeToVideoTime(position)); - thisObj.updateMeta(position); - thisObj.refreshControls('init'); - }).on('stopTracking', function (e, position) { - if (thisObj.useChapterTimes) { - thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); - } - else { - thisObj.seekTo(position); - } - if (!thisObj.pausedBeforeTracking) { - setTimeout(function () { - thisObj.playMedia(); - }, 200); - } - }); - }; - - AblePlayer.prototype.onClickPlayerButton = function (el) { - - // TODO: This is super-fragile since we need to know the length of the class name to split off; update this to other way of dispatching? - - var whichButton, prefsPopup; - whichButton = $(el).attr('class').split(' ')[0].substr(20); - if (whichButton === 'play') { - this.clickedPlay = true; - this.handlePlay(); - } - else if (whichButton === 'restart') { - this.seekTrigger = 'restart'; - this.handleRestart(); - } - else if (whichButton === 'previous') { - this.userClickedPlaylist = true; - this.seekTrigger = 'previous'; - this.buttonWithFocus = 'previous'; - this.handlePrevTrack(); - } - else if (whichButton === 'next') { - this.userClickedPlaylist = true; - this.seekTrigger = 'next'; - this.buttonWithFocus = 'next'; - this.handleNextTrack(); - } - else if (whichButton === 'rewind') { - this.seekTrigger = 'rewind'; - this.handleRewind(); - } - else if (whichButton === 'forward') { - this.seekTrigger = 'forward'; - this.handleFastForward(); - } - else if (whichButton === 'mute') { - this.handleMute(); - } - else if (whichButton === 'volume') { - this.handleVolume(); - } - else if (whichButton === 'faster') { - this.handleRateIncrease(); - } - else if (whichButton === 'slower') { - this.handleRateDecrease(); - } - else if (whichButton === 'captions') { - this.handleCaptionToggle(); - } - else if (whichButton === 'chapters') { - this.handleChapters(); - } - else if (whichButton === 'descriptions') { - this.handleDescriptionToggle(); - } - else if (whichButton === 'sign') { - if (!this.closingSign) { - this.handleSignToggle(); - } - } - else if (whichButton === 'preferences') { - if ($(el).attr('data-prefs-popup') === 'menu') { - this.handlePrefsClick(); - } - else { - this.showingPrefsDialog = true; // stopgap - this.closePopups(); - prefsPopup = $(el).attr('data-prefs-popup'); - if (prefsPopup === 'keyboard') { - this.keyboardPrefsDialog.show(); - } - else if (prefsPopup === 'captions') { - this.captionPrefsDialog.show(); - } - else if (prefsPopup === 'descriptions') { - this.descPrefsDialog.show(); - } - else if (prefsPopup === 'transcript') { - this.transcriptPrefsDialog.show(); - } - this.showingPrefsDialog = false; - } - } - else if (whichButton === 'help') { - this.handleHelpClick(); - } - else if (whichButton === 'transcript') { - if (!this.closingTranscript) { - this.handleTranscriptToggle(); - } - } - else if (whichButton === 'fullscreen') { - this.clickedFullscreenButton = true; - this.handleFullscreenToggle(); - } - }; - - AblePlayer.prototype.okToHandleKeyPress = function () { - - // returns true unless user's focus is on a UI element - // that is likely to need supported keystrokes, including space - - var activeElement = AblePlayer.getActiveDOMElement(); - - if ($(activeElement).prop('tagName') === 'INPUT') { - return false; - } - else { - return true; - } - }; - - AblePlayer.prototype.onPlayerKeyPress = function (e) { - - // handle keystrokes (using DHTML Style Guide recommended key combinations) - // https://web.archive.org/web/20130127004544/http://dev.aol.com/dhtml_style_guide/#mediaplayer - // Modifier keys Alt + Ctrl are on by default, but can be changed within Preferences - // NOTE #1: Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down - // The rest are reasonable best choices - // NOTE #2: If there are multiple players on a single page, keystroke handlers - // are only bound to the FIRST player - // NOTE #3: The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions - // including removal of the "media player" design pattern. There's an issue about that: - // https://github.com/w3c/aria-practices/issues/27 - - var which, $thisElement; - - // Convert to lower case. - which = e.which; - if (which >= 65 && which <= 90) { - which += 32; - } - $thisElement = $(document.activeElement); - - if (which === 27) { // escape - if ($.contains(this.$transcriptArea[0],$thisElement[0])) { - // This element is part of transcript area. - this.handleTranscriptToggle(); - return false; - } - } - if (!this.okToHandleKeyPress()) { - return false; - } - - // Only use keypress to control player if focus is NOT on a form field or contenteditable element - // (or a textarea element with player in stenoMode) - if (!( - $(':focus').is('[contenteditable]') || - $(':focus').is('input') || - ($(':focus').is('textarea') && !this.stenoMode) || - $(':focus').is('select') || - e.target.hasAttribute('contenteditable') || - e.target.tagName === 'INPUT' || - (e.target.tagName === 'TEXTAREA' && !this.stenoMode) || - e.target.tagName === 'SELECT' - )){ - if (which === 27) { // escape - this.closePopups(); - } - else if (which === 32) { // spacebar = play/pause - // disable spacebar support for play/pause toggle as of 4.2.10 - // spacebar should not be handled everywhere on the page, since users use that to scroll the page - // when the player has focus, most controls are buttons so spacebar should be used to trigger the buttons - if ($thisElement.attr('role') === 'button') { - // register a click on this element - e.preventDefault(); - $thisElement.click(); - } - } - else if (which === 112) { // p = play/pause - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handlePlay(); - } - } - else if (which === 115) { // s = stop (now restart) - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleRestart(); - } - } - else if (which === 109) { // m = mute - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleMute(); - } - } - else if (which === 118) { // v = volume - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleVolume(); - } - } - else if (which >= 49 && which <= 57) { // set volume 1-9 - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleVolume(which); - } - } - else if (which === 99) { // c = caption toggle - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleCaptionToggle(); - } - } - else if (which === 100) { // d = description - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleDescriptionToggle(); - } - } - else if (which === 102) { // f = forward - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleFastForward(); - } - } - else if (which === 114) { // r = rewind - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleRewind(); - } - } - else if (which === 98) { // b = back (previous track) - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handlePrevTrack(); - } - } - else if (which === 110) { // n = next track - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handleNextTrack(); - } - } - else if (which === 101) { // e = preferences - if (this.usingModifierKeys(e)) { - e.preventDefault(); - this.handlePrefsClick(); - } - } - else if (which === 13) { // Enter - if ($thisElement.attr('role') === 'button' || $thisElement.prop('tagName') === 'SPAN') { - // register a click on this element - // if it's a transcript span the transcript span click handler will take over - $thisElement.click(); - } - else if ($thisElement.prop('tagName') === 'LI') { - $thisElement.click(); - } - } - } - }; - - AblePlayer.prototype.addHtml5MediaListeners = function () { - - var thisObj = this; - - // NOTE: iOS and some browsers do not support autoplay - // and no events are triggered until media begins to play - // Able Player gets around this by automatically loading media in some circumstances - // (see initialize.js > initPlayer() for details) - this.$media - .on('emptied',function() { - // do something - }) - .on('loadedmetadata',function() { - // should be able to get duration now - thisObj.duration = thisObj.media.duration; - thisObj.onMediaNewSourceLoad(); - }) - .on('canplay',function() { - // previously handled seeking to startTime here - // but it's probably safer to wait for canplaythrough - // so we know player can seek ahead to anything - }) - .on('canplaythrough',function() { - if (thisObj.playbackRate) { - // user has set playbackRate on a previous src or track - // use that setting on the new src or track too - thisObj.setPlaybackRate(thisObj.playbackRate); - } - if (thisObj.userClickedPlaylist) { - if (!thisObj.startedPlaying) { - // start playing; no further user action is required - thisObj.playMedia(); - } - thisObj.userClickedPlaylist = false; // reset - } - if (thisObj.seekTrigger == 'restart' || - thisObj.seekTrigger == 'chapter' || - thisObj.seekTrigger == 'transcript' || - thisObj.seekTrigger == 'search' - ) { - // by clicking on any of these elements, user is likely intending to play - // Not included: elements where user might click multiple times in succession - // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play - thisObj.playMedia(); - } - else if (!thisObj.startedPlaying) { - if (thisObj.startTime > 0) { - if (thisObj.seeking) { - // a seek has already been initiated - // since canplaythrough has been triggered, the seek is complete - thisObj.seeking = false; - if (thisObj.autoplay || thisObj.okToPlay) { - thisObj.playMedia(); - } - } - else { - // haven't started seeking yet - thisObj.seekTo(thisObj.startTime); - } - } - else if (thisObj.defaultChapter && typeof thisObj.selectedChapters !== 'undefined') { - thisObj.seekToChapter(thisObj.defaultChapter); - } - else { - // there is no startTime, therefore no seeking required - if (thisObj.autoplay || thisObj.okToPlay) { - thisObj.playMedia(); - } - } - } - else if (thisObj.hasPlaylist) { - if ((thisObj.playlistIndex !== thisObj.$playlist.length) || thisObj.loop) { - // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) - thisObj.playMedia(); - } - } - else { - // already started playing - // we're here because a new media source has been loaded and is ready to resume playback - thisObj.getPlayerState().then(function(currentState) { - if (thisObj.swappingSrc && (currentState === 'stopped' || currentState === 'paused')) { - thisObj.startedPlaying = false; - if (thisObj.swapTime > 0) { - thisObj.seekTo(thisObj.swapTime); - } - else { - thisObj.playMedia(); - } - } - }); - } - }) - .on('play',function() { - // both 'play' and 'playing' seem to be fired in all browsers (including IE11) - // therefore, doing nothing here & doing everything when 'playing' is triggered - thisObj.refreshControls('playpause'); - }) - .on('playing',function() { - thisObj.playing = true; - thisObj.paused = false; - thisObj.refreshControls('playpause'); - }) - .on('ended',function() { - thisObj.playing = false; - thisObj.paused = true; - thisObj.onMediaComplete(); - }) - .on('progress', function() { - thisObj.refreshControls('timeline'); - }) - .on('waiting',function() { - // do something - // previously called refreshControls() here but this event probably doesn't warrant a refresh - }) - .on('durationchange',function() { - // Display new duration. - thisObj.refreshControls('timeline'); - }) - .on('timeupdate',function() { - thisObj.onMediaUpdateTime(); // includes a call to refreshControls() - }) - .on('pause',function() { - if (!thisObj.clickedPlay) { - // 'pause' was triggered automatically, not initiated by user - // this happens in some browsers when swapping source - // (e.g., between tracks in a playlist or swapping description) - if (thisObj.hasPlaylist || thisObj.swappingSrc) { - // do NOT set playing to false. - // doing so prevents continual playback after new track is loaded - } - else { - thisObj.playing = false; - thisObj.paused = true; - } - } - else { - thisObj.playing = false; - thisObj.paused = true; - } - thisObj.clickedPlay = false; // done with this variable - thisObj.onMediaPause(); // includes a call to refreshControls() - }) - .on('ratechange',function() { - // do something - }) - .on('volumechange',function() { - thisObj.volume = thisObj.getVolume(); - if (thisObj.debug) { - - } - }) - .on('error',function() { - if (thisObj.debug) { - switch (thisObj.media.error.code) { - case 1: - - break; - case 2: - - break; - case 3: - - break; - case 4: - - break; - } - } - }); - }; - - AblePlayer.prototype.addVimeoListeners = function () { - -// The following content is orphaned. It was in 'canplaythrough' but there's no equivalent event in Vimeo. -// Maybe it should go under 'loaded' or 'progress' ??? -/ - if (thisObj.userClickedPlaylist) { - if (!thisObj.startedPlaying) { - // start playing; no further user action is required - thisObj.playMedia(); - } - thisObj.userClickedPlaylist = false; // reset - } - if (thisObj.seekTrigger == 'restart' || thisObj.seekTrigger == 'chapter' || thisObj.seekTrigger == 'transcript') { - // by clicking on any of these elements, user is likely intending to play - // Not included: elements where user might click multiple times in succession - // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play - thisObj.playMedia(); - } - else if (!thisObj.startedPlaying) { - if (thisObj.startTime > 0) { - if (thisObj.seeking) { - // a seek has already been initiated - // since canplaythrough has been triggered, the seek is complete - thisObj.seeking = false; - if (thisObj.autoplay || thisObj.okToPlay) { - thisObj.playMedia(); - } - } - else { - // haven't started seeking yet - thisObj.seekTo(thisObj.startTime); - } - } - else if (thisObj.defaultChapter && typeof thisObj.selectedChapters !== 'undefined') { - thisObj.seekToChapter(thisObj.defaultChapter); - } - else { - // there is no startTime, therefore no seeking required - if (thisObj.autoplay || thisObj.okToPlay) { - thisObj.playMedia(); - } - } - } - else if (thisObj.hasPlaylist) { - if ((thisObj.playlistIndex !== thisObj.$playlist.length) || thisObj.loop) { - // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) - thisObj.playMedia(); - } - } - else { - // already started playing - // we're here because a new media source has been loaded and is ready to resume playback - thisObj.getPlayerState().then(function(currentState) { - if (thisObj.swappingSrc && currentState === 'stopped') { - // Safari is the only browser that returns value of 'stopped' (observed in 12.0.1 on MacOS) - // This prevents 'timeupdate' events from triggering, which prevents the new media src - // from resuming playback at swapTime - // This is a hack to jump start Safari - thisObj.startedPlaying = false; - if (thisObj.swapTime > 0) { - thisObj.seekTo(thisObj.swapTime); - } - else { - thisObj.playMedia(); - } - } - }); - } - -/ - - var thisObj = this; - - // Vimeo doesn't seem to support chaining of on() functions - // so each event listener must be attached separately - this.vimeoPlayer.on('loaded', function(vimeoId) { - // Triggered when a new video is loaded in the player - thisObj.onMediaNewSourceLoad(); - }); - this.vimeoPlayer.on('play', function(data) { - // Triggered when the video plays - thisObj.playing = true; - thisObj.startedPlaying = true; - thisObj.paused = false; - thisObj.refreshControls('playpause'); - }); - this.vimeoPlayer.on('ended', function(data) { - // Triggered any time the video playback reaches the end. - // Note: when loop is turned on, the ended event will not fire. - thisObj.playing = false; - thisObj.paused = true; - thisObj.onMediaComplete(); - }); - this.vimeoPlayer.on('bufferstart', function() { - // Triggered when buffering starts in the player. - // This is also triggered during preload and while seeking. - // There is no associated data with this event. - }); - this.vimeoPlayer.on('bufferend', function() { - // Triggered when buffering ends in the player. - // This is also triggered at the end of preload and seeking. - // There is no associated data with this event. - }); - this.vimeoPlayer.on('progress', function(data) { - // Triggered as the video is loaded. - // Reports back the amount of the video that has been buffered (NOT the amount played) - // Data has keys duration, percent, and seconds - }); - this.vimeoPlayer.on('seeking', function(data) { - // Triggered when the player starts seeking to a specific time. - // A timeupdate event will also be fired at the same time. - }); - this.vimeoPlayer.on('seeked', function(data) { - // Triggered when the player seeks to a specific time. - // A timeupdate event will also be fired at the same time. - }); - this.vimeoPlayer.on('timeupdate',function(data) { - // Triggered as the currentTime of the video updates. - // It generally fires every 250ms, but it may vary depending on the browser. - thisObj.onMediaUpdateTime(data['duration'], data['seconds']); - }); - this.vimeoPlayer.on('pause',function(data) { - // Triggered when the video pauses - if (!thisObj.clickedPlay) { - // 'pause' was triggered automatically, not initiated by user - // this happens in some browsers (not Chrome, as of 70.x) - // when swapping source (e.g., between tracks in a playlist, or swapping description) - if (thisObj.hasPlaylist || thisObj.swappingSrc) { - // do NOT set playing to false. - // doing so prevents continual playback after new track is loaded - } - else { - thisObj.playing = false; - thisObj.paused = true; - } - } - else { - thisObj.playing = false; - thisObj.paused = true; - } - thisObj.clickedPlay = false; // done with this variable - thisObj.onMediaPause(); - thisObj.refreshControls('playpause'); - }); - this.vimeoPlayer.on('playbackratechange',function(data) { - // Triggered when the playback rate of the video in the player changes. - // The ability to change rate can be disabled by the creator - // and the event will not fire for those videos. - // data contains one key: 'playbackRate' - thisObj.vimeoPlaybackRate = data['playbackRate']; - }); - this.vimeoPlayer.on('texttrackchange', function(data) { - // Triggered when the active text track (captions/subtitles) changes. - // The values will be null if text tracks are turned off. - // data contains three keys: kind, label, language - }); - this.vimeoPlayer.on('volumechange',function(data) { - // Triggered when the volume in the player changes. - // Some devices do not support setting the volume of the video - // independently from the system volume, - // so this event will never fire on those devices. - thisObj.volume = data['volume'] 10; - }); - this.vimeoPlayer.on('error',function(data) { - // do something with the available data - // data contains three keys: message, method, name - // message: A user-friendly error message - // method: The Vimeo API method call that triggered the error - // name: Name of the error (not necesssarily user-friendly) - }); - }; - - AblePlayer.prototype.addEventListeners = function () { - - var thisObj, whichButton, thisElement; - - // Save the current object context in thisObj for use with inner functions. - thisObj = this; - - // Appropriately resize media player for full screen. - $(window).resize(function () { - thisObj.onWindowResize(); - }); - - // Refresh player if it changes from hidden to visible - // There is no event triggered by a change in visibility - // but MutationObserver works in most browsers (but NOT in IE 10 or earlier) - // http://caniuse.com/#feat=mutationobserver - if (window.MutationObserver) { - var target = this.$ableDiv[0]; - var observer = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - if (mutation.type === 'attributes' && mutation.attributeName === 'style') { - // the player's style attribute has changed. Check to see if it's visible - if (thisObj.$ableDiv.is(':visible')) { - thisObj.refreshControls('init'); - } - } - }); - }); - var config = { attributes: true, childList: true, characterData: true }; - observer.observe(target, config); - } - else { - // browser doesn't support MutationObserver - // TODO: Figure out an alternative solution for this rare use case in older browsers - // See example in buildplayer.js > useSvg() - } - if (typeof this.seekBar !== 'undefined') { - this.addSeekbarListeners(); - } - else { - // wait a bit and try again - // TODO: Should set this up to keep trying repeatedly. - // Seekbar listeners are critical. - setTimeout(function() { - if (typeof thisObj.seekBar !== 'undefined') { - thisObj.addSeekbarListeners(); - } - },2000); - } - - // handle clicks on player buttons - this.$controllerDiv.find('div[role="button"]').on('click',function(e){ - e.stopPropagation(); - thisObj.onClickPlayerButton(this); - }); - - // handle clicks (left only) anywhere on the page. If any popups are open, close them. - $(document).on('click',function(e) { - - if (e.button !== 0) { // not a left click - return false; - } - if ($('.able-popup:visible').length || $('.able-volume-popup:visible')) { - // at least one popup is visible - thisObj.closePopups(); - } - }); - - // handle mouse movement over player; make controls visible again if hidden - this.$ableDiv.on('mousemove',function() { - if (thisObj.controlsHidden) { - thisObj.fadeControls('in'); - thisObj.controlsHidden = false; - // if there's already an active timeout, clear it and start timer again - if (thisObj.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(thisObj.hideControlsTimeout); - thisObj.hideControlsTimeoutStatus = 'clear'; - } - if (thisObj.hideControls) { - // after showing controls, hide them again after a brief timeout - thisObj.invokeHideControlsTimeout(); - } - } - else { - // if there's already an active timeout, clear it and start timer again - if (thisObj.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(thisObj.hideControlsTimeout); - thisObj.hideControlsTimeoutStatus = 'clear'; - if (thisObj.hideControls) { - thisObj.invokeHideControlsTimeout(); - } - } - } - }); - - // if user presses a key from anywhere on the page, show player controls - $(document).keydown(function(e) { - if (thisObj.controlsHidden) { - thisObj.fadeControls('in'); - thisObj.controlsHidden = false; - if (thisObj.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(thisObj.hideControlsTimeout); - thisObj.hideControlsTimeoutStatus = 'clear'; - } - if (thisObj.hideControls) { - // after showing controls, hide them again after a brief timeout - thisObj.invokeHideControlsTimeout(); - } - } - else { - // controls are visible - // if there's already an active timeout, clear it and start timer again - if (thisObj.hideControlsTimeoutStatus === 'active') { - window.clearTimeout(thisObj.hideControlsTimeout); - thisObj.hideControlsTimeoutStatus = 'clear'; - - if (thisObj.hideControls) { - thisObj.invokeHideControlsTimeout(); - } - } - } - }); - - // handle local keydown events if this isn't the only player on the page; - // otherwise these are dispatched by global handler (see ableplayer-base,js) - this.$ableDiv.keydown(function (e) { - if (AblePlayer.nextIndex > 1) { - thisObj.onPlayerKeyPress(e); - } - }); - - // If stenoMode is enabled in an iframe, handle keydown events from the iframe - if (this.stenoMode && (typeof this.stenoFrameContents !== 'undefined')) { - this.stenoFrameContents.on('keydown',function(e) { - thisObj.onPlayerKeyPress(e); - }); - }; - - // transcript is not a child of this.$ableDiv - // therefore, must be added separately - if (this.$transcriptArea) { - this.$transcriptArea.on('keydown',function (e) { - if (AblePlayer.nextIndex > 1) { - thisObj.onPlayerKeyPress(e); - } - }); - } - - // handle clicks on playlist items - if (this.$playlist) { - this.$playlist.click(function(e) { - if (!thisObj.userClickedPlaylist) { - // stopgap in case multiple clicks are fired on the same playlist item - thisObj.userClickedPlaylist = true; // will be set to false after new src is loaded & canplaythrough is triggered - thisObj.playlistIndex = $(this).index(); - thisObj.cuePlaylistItem(thisObj.playlistIndex); - } - }); - } - - // Also play/pause when clicking on the media. - this.$media.click(function () { - thisObj.handlePlay(); - }); - - // add listeners for media events - if (this.player === 'html5') { - this.addHtml5MediaListeners(); - } - else if (this.player === 'vimeo') { - this.addVimeoListeners(); - } - else if (this.player === 'youtube') { - // Youtube doesn't give us time update events, so we just periodically generate them ourselves - setInterval(function () { - thisObj.onMediaUpdateTime(); - }, 300); - } - }; -})(jQuery); - -(function ($) { - - AblePlayer.prototype.initDragDrop = function ( which ) { - - // supported values of which: 'sign', 'transcript' - - // NOTE: "Drag and Drop" for Able Player is a metaphor only!!! - // HTML5 Drag & Drop API enables moving elements to new locations in the DOM - // Thats not our purpose; we're simply changing the visible position on-screen - // Therefore, the drag & drop interface was overhauled in v2.3.41 to simple - // use mouse (and keyboard) events to change CSS positioning properties - - // There are nevertheless lessons to be learned from Drag & Drop about accessibility: - // http://dev.opera.com/articles/accessible-drag-and-drop/ - - var thisObj, $window, $toolbar, windowName, $resizeHandle, resizeZIndex; - - thisObj = this; - - if (which === 'transcript') { - $window = this.$transcriptArea; - windowName = 'transcript-window'; - $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { - $window = this.$signWindow; - windowName = 'sign-window'; - $toolbar = this.$signToolbar; - } - - // add class to trigger change in cursor on hover - $toolbar.addClass('able-draggable'); - - // add resize handle selector to bottom right corner - $resizeHandle = $('<div>',{ - 'class': 'able-resizable' - }); - // assign z-index that's slightly higher than parent window - resizeZIndex = parseInt($window.css('z-index')) + 100; - $resizeHandle.css('z-index',resizeZIndex); - $window.append($resizeHandle); - - // add event listener to toolbar to start and end drag - // other event listeners will be added when drag starts - $toolbar.on('mousedown mouseup touchstart touchend', function(e) { - e.stopPropagation(); - if (e.type === 'mousedown' || e.type === 'touchstart') { - if (!thisObj.windowMenuClickRegistered) { - thisObj.windowMenuClickRegistered = true; - thisObj.startMouseX = e.pageX; - thisObj.startMouseY = e.pageY; - thisObj.dragDevice = 'mouse'; // ok to use this even if device is a touchpad - thisObj.startDrag(which, $window); - } - } - else if (e.type === 'mouseup' || e.type === 'touchend') { - if (thisObj.dragging && thisObj.dragDevice === 'mouse') { - thisObj.endDrag(which); - } - } - return false; - }); - - // add event listeners for resizing - $resizeHandle.on('mousedown mouseup touchstart touchend', function(e) { - e.stopPropagation(); - if (e.type === 'mousedown' || e.type === 'touchstart') { - if (!thisObj.windowMenuClickRegistered) { - thisObj.windowMenuClickRegistered = true; - thisObj.startMouseX = e.pageX; - thisObj.startMouseY = e.pageY; - thisObj.startResize(which, $window); - } - } - else if (e.type === 'mouseup' || e.type === 'touchend') { - if (thisObj.resizing) { - thisObj.endResize(which); - } - } - return false; - }); - - // whenever a window is clicked, bring it to the foreground - $window.on('click', function() { - - if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { - thisObj.updateZIndex(which); - } - thisObj.finishingDrag = false; - }); - - this.addWindowMenu(which,$window,windowName); - }; - - AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) { - - var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg, - $buttonLabel, tooltipId, $tooltip, $popup, - label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip, - $optionList, menuBaseId, options, i, $optionItem, option, menuId; - - thisObj = this; - - // Add a Boolean that will be set to true temporarily if window button or a menu item is clicked - // This will prevent the click event from also triggering a mousedown event on the toolbar - // (which would unexpectedly send the window into drag mode) - this.windowMenuClickRegistered = false; - - // Add another Boolean that will be set to true temporarily when mouseup fires at the end of a drag - // this will prevent the click event from being triggered - this.finishingDrag = false; - - // create an alert div and add it to window - $windowAlert = $('<div role="alert"></div>'); - $windowAlert.addClass('able-alert'); - $windowAlert.hide(); - $windowAlert.appendTo(this.$activeWindow); - $windowAlert.css({ - top: $window.offset().top - }); - - // add button to draggable window which triggers a popup menu - // for now, re-use preferences icon for this purpose - menuId = this.mediaId + '-' + windowName + '-menu'; - $newButton = $('<button>',{ - 'type': 'button', - 'tabindex': '0', - 'aria-label': this.tt.windowButtonLabel, - 'aria-haspopup': 'true', - 'aria-controls': menuId, - 'class': 'able-button-handler-preferences' - }); - if (this.iconType === 'font') { - $buttonIcon = $('<span>',{ - 'class': 'icon-preferences', - 'aria-hidden': 'true' - }); - $newButton.append($buttonIcon); - } - else { - // use image - buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png'; - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - - // add the visibly-hidden label for screen readers that don't support aria-label on the button - $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(this.tt.windowButtonLabel); - $newButton.append($buttonLabel); - - // add a tooltip that displays aria-label on mouseenter or focus - tooltipId = this.mediaId + '-' + windowName + '-tooltip'; - $tooltip = $('<div>',{ - 'class' : 'able-tooltip', - 'id' : tooltipId - }).hide(); - $newButton.on('mouseenter focus',function(e) { - var label = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - var tooltipY = position.top - buttonHeight - 5; - var tooltipX = 0; - var tooltipStyle = { - left: '', - right: tooltipX + 'px', - top: tooltipY + 'px' - }; - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle); - thisObj.showTooltip(tooltip); - $(this).on('mouseleave blur',function() { - AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - }); - }); - - // setup popup menu - $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window' - // define vars and assemble all the parts - if (which === 'transcript') { - this.$transcriptAlert = $windowAlert; - this.$transcriptPopupButton = $newButton; - this.$transcriptPopup = $popup; - this.$transcriptToolbar.prepend($windowAlert,$newButton,$tooltip,$popup); - } - else if (which === 'sign') { - this.$signAlert = $windowAlert; - this.$signPopupButton = $newButton; - this.$signPopup = $popup; - this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup); - } - - // handle button click - $newButton.on('click mousedown keydown',function(e) { - - if (thisObj.focusNotClick) { - return false; - } - if (thisObj.dragging) { - thisObj.dragKeys(which, e); - return false; - } - e.stopPropagation(); - if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { - // don't set windowMenuClickRegistered yet; that happens in handler function - thisObj.handleWindowButtonClick(which, e); - } - thisObj.finishingDrag = false; - }); - - this.addResizeDialog(which, $window); - }; - - AblePlayer.prototype.addResizeDialog = function (which, $window) { - - var thisObj, $windowPopup, $windowButton, - widthId, heightId, startingWidth, startingHeight, aspectRatio, - $resizeForm, $resizeWrapper, - $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, - $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, - tempWidth, tempHeight, - $saveButton, $cancelButton, newWidth, newHeight, resizeDialog; - - thisObj = this; - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - $windowButton = this.$signPopupButton; - } - - widthId = this.mediaId + '-resize-' + which + '-width'; - heightId = this.mediaId + '-resize-' + which + '-height'; - startingWidth = $window.width(); - startingHeight = $window.height(); - aspectRatio = startingWidth / startingHeight; - - $resizeForm = $('<div></div>',{ - 'class' : 'able-resize-form' - }); - - // inner container for all content, will be assigned to modal div's aria-describedby - $resizeWrapper = $('<div></div>'); - - // width field - $resizeWidthDiv = $('<div></div>'); - $resizeWidthInput = $('<input>',{ - 'type': 'text', - 'id': widthId, - 'value': startingWidth - }); - $resizeWidthLabel = $('<label>',{ - 'for': widthId - }).text(this.tt.width); - - // height field - $resizeHeightDiv = $('<div></div>'); - $resizeHeightInput = $('<input>',{ - 'type': 'text', - 'id': heightId, - 'value': startingHeight - }); - $resizeHeightLabel = $('<label>',{ - 'for': heightId - }).text(this.tt.height); - - if (which === 'sign') { - // make height a read-only field - // and calculate its value based on width to preserve aspect ratio - $resizeHeightInput.prop('readonly',true); - $resizeWidthInput.on('input',function() { - tempWidth = $(this).val(); - tempHeight = Math.round(tempWidth/aspectRatio, 0); - $resizeHeightInput.val(tempHeight); - }) - } - - // Add save and cancel buttons. - $saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - $cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - $saveButton.on('click',function () { - newWidth = $('#' + widthId).val(); - newHeight = $('#' + heightId).val(); - if (newWidth !== startingWidth || newHeight !== startingHeight) { - thisObj.resizeObject(which,newWidth,newHeight); - thisObj.updateCookie(which); - } - resizeDialog.hide(); - $windowPopup.hide(); - $windowButton.focus(); - }); - $cancelButton.on('click',function () { - resizeDialog.hide(); - $windowPopup.hide(); - $windowButton.focus(); - }); - - // Now assemble all the parts - $resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput); - $resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput); - $resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv); - $resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton); - - // must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers - $('body').append($resizeForm); - resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'alert', this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em'); - if (which === 'transcript') { - this.transcriptResizeDialog = resizeDialog; - } - else if (which === 'sign') { - this.signResizeDialog = resizeDialog; - } - }; - - AblePlayer.prototype.handleWindowButtonClick = function (which, e) { - - var thisObj, $windowPopup, $windowButton, $toolbar, popupTop; - - thisObj = this; - - if (this.focusNotClick) { - // transcript or sign window has just opened, - // and focus moved to the window button - // ignore the keystroke that triggered the popup - return false; - } - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - $windowButton = this.$transcriptPopupButton; - $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - $windowButton = this.$signPopupButton; - $toolbar = this.$signToolbar; - } - - if (e.type === 'keydown') { - // user pressed a key - if (e.which === 32 || e.which === 13) { - // this was Enter or space - this.windowMenuClickRegistered = true; - } - else if (e.which === 27) { // escape - if ($windowPopup.is(':visible')) { - // close the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - } - else { - // popup isn't open. Close the window - if (which === 'sign') { - this.handleSignToggle(); - } - else if (which === 'transcript') { - this.handleTranscriptToggle(); - } - } - } - else { - return false; - } - } - else { - // this was a mouse event - this.windowMenuClickRegistered = true; - } - - if ($windowPopup.is(':visible')) { - $windowPopup.hide(200,'',function() { - thisObj.windowMenuClickRegistered = false; // reset - }); - $windowPopup.find('li').removeClass('able-focus'); - $windowButton.attr('aria-expanded','false').focus(); - } - else { - // first, be sure window is on top - this.updateZIndex(which); - popupTop = $windowButton.position().top + $windowButton.outerHeight(); - $windowPopup.css('top', popupTop); - $windowPopup.show(200,'',function() { - $windowButton.attr('aria-expanded','true'); - $(this).find('li').first().focus().addClass('able-focus'); - thisObj.windowMenuClickRegistered = false; // reset - }); - } - }; - - AblePlayer.prototype.handleMenuChoice = function (which, choice, e) { - - var thisObj, $window, $windowPopup, $windowButton, resizeDialog, width, height, $thisRadio; - - thisObj = this; - if (which === 'transcript') { - $window = this.$transcriptArea; - $windowPopup = this.$transcriptPopup; - $windowButton = this.$transcriptPopupButton; - resizeDialog = this.transcriptResizeDialog; - } - else if (which === 'sign') { - $window = this.$signWindow; - $windowPopup = this.$signPopup; - $windowButton = this.$signPopupButton; - resizeDialog = this.signResizeDialog; - } - this.$activeWindow = $window; - - if (e.type === 'keydown') { - if (e.which === 27) { // escape - // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - return false; - } - else { - // all other keys will be handled by upstream functions - if (choice !== 'close') { - this.$activeWindow = $window; - } - return false; - } - } - - // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - }); - if (choice !== 'close') { - $windowButton.focus(); - } - if (choice === 'move') { - - // temporarily add role="application" to activeWindow - // otherwise, screen readers incercept arrow keys and moving window will not work - this.$activeWindow.attr('role','application'); - - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - if (e.type === 'keydown') { - this.dragDevice = 'keyboard'; - } - else { - this.dragDevice = 'mouse'; - } - this.startDrag(which, $window); - $windowPopup.hide().parent().focus(); - } - else if (choice == 'resize') { - // resize through the menu uses a form, not drag - var resizeFields = resizeDialog.getInputs(); - if (resizeFields) { - // reset width and height values in form - resizeFields[0].value = $window.width(); - resizeFields[1].value = $window.height(); - } - resizeDialog.show(); - } - else if (choice == 'close') { - // close window, place focus on corresponding button on controller bar - if (which === 'transcript') { - this.closingTranscript = true; // stopgrap to prevent double-firing of keypress - this.handleTranscriptToggle(); - } - else if (which === 'sign') { - this.closingSign = true; // stopgrap to prevent double-firing of keypress - this.handleSignToggle(); - } - } - }; - - AblePlayer.prototype.startDrag = function(which, $element) { - - var thisObj, $windowPopup, zIndex, startPos, newX, newY; - - thisObj = this; - - if (!this.$activeWindow) { - this.$activeWindow = $element; - } - this.dragging = true; - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } - - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - - // if window's popup menu is open, close it - if ($windowPopup.is(':visible')) { - $windowPopup.hide(); - } - - // be sure this window is on top - this.updateZIndex(which); - - // get starting position of element - startPos = this.$activeWindow.position(); - this.dragStartX = startPos.left; - this.dragStartY = startPos.top; - - if (typeof this.startMouseX === 'undefined') { - this.dragDevice = 'keyboard'; - this.dragKeyX = this.dragStartX; - this.dragKeyY = this.dragStartY; - // add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd() - this.startingDrag = true; - } - else { - this.dragDevice = 'mouse'; - // get offset between mouse position and top left corner of draggable element - this.dragOffsetX = this.startMouseX - this.dragStartX; - this.dragOffsetY = this.startMouseY - this.dragStartY; - } - - // prepare element for dragging - this.$activeWindow.addClass('able-drag').css({ - 'position': 'absolute', - 'top': this.dragStartY + 'px', - 'left': this.dragStartX + 'px' - }).focus(); - - // add device-specific event listeners - if (this.dragDevice === 'mouse') { // might also be a touchpad - $(document).on('mousemove touchmove',function(e) { - if (thisObj.dragging) { - // calculate new top left based on current mouse position - offset - newX = e.pageX - thisObj.dragOffsetX; - newY = e.pageY - thisObj.dragOffsetY; - thisObj.resetDraggedObject( newX, newY ); - } - }); - } - else if (this.dragDevice === 'keyboard') { - this.$activeWindow.on('keydown',function(e) { - if (thisObj.dragging) { - thisObj.dragKeys(which, e); - } - }); - } - return false; - }; - - AblePlayer.prototype.dragKeys = function(which, e) { - - var key, keySpeed; - - var thisObj = this; - - // stopgap to prevent firing on initial Enter or space - // that selected "Move" from menu - if (this.startingDrag) { - this.startingDrag = false; - return false; - } - key = e.which; - keySpeed = 10; // pixels per keypress event - - switch (key) { - case 37: // left - case 63234: - this.dragKeyX -= keySpeed; - break; - case 38: // up - case 63232: - this.dragKeyY -= keySpeed; - break; - case 39: // right - case 63235: - this.dragKeyX += keySpeed; - break; - case 40: // down - case 63233: - this.dragKeyY += keySpeed; - break; - case 13: // enter - case 27: // escape - this.endDrag(which); - return false; - default: - return false; - } - this.resetDraggedObject(this.dragKeyX,this.dragKeyY); - if (e.preventDefault) { - e.preventDefault(); - } - return false; - }; - - AblePlayer.prototype.resetDraggedObject = function ( x, y) { - - this.$activeWindow.css({ - 'left': x + 'px', - 'top': y + 'px' - }); - }, - - AblePlayer.prototype.resizeObject = function ( which, width, height ) { - - var innerHeight; - - // which is either 'transcript' or 'sign' - this.$activeWindow.css({ - 'width': width + 'px', - 'height': height + 'px' - }); - - if (which === 'transcript') { - // $activeWindow is the outer $transcriptArea - // but the inner able-transcript also needs to be resized proporitionally - // (it's 50px less than its outer container) - innerHeight = height - 50; - this.$transcriptDiv.css('height', innerHeight + 'px'); - } - }; - - AblePlayer.prototype.endDrag = function(which) { - - var thisObj, $window, $windowPopup, $windowButton; - thisObj = this; - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - $windowButton = this.$signPopupButton; - } - - $(document).off('mousemove mouseup touchmove touchup'); - this.$activeWindow.off('keydown').removeClass('able-drag'); - // restore activeWindow role from 'application' to 'dialog' - this.$activeWindow.attr('role','dialog'); - this.$activeWindow = null; - - if (this.dragDevice === 'keyboard') { - $windowButton.focus(); - } - this.dragging = false; - - // save final position of dragged element - this.updateCookie(which); - - // reset starting mouse positions - this.startMouseX = undefined; - this.startMouseY = undefined; - - // Boolean to stop stray events from firing - this.windowMenuClickRegistered = false; - this.finishingDrag = true; // will be reset after window click event - // finishingDrag should e reset after window click event, - // which is triggered automatically after mouseup - // However, in case that's not reliable in some browsers - // need to ensure this gets cancelled - setTimeout(function() { - thisObj.finishingDrag = false; - }, 100); - }; - - AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) { - - // return true if mouse is close to bottom right corner (resize target) - var tolerance, position, top, left, width, height, bottom, right; - - tolerance = 10; // number of pixels in both directions considered "close enough" - - // first, get position of element - position = $window.offset(); - top = position.top; - left = position.left; - width = $window.width(); - height = $window.height(); - bottom = top + height; - right = left + width; - if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) { - return true; - } - return false; - }; - - AblePlayer.prototype.startResize = function(which, $element) { - - var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight; - - thisObj = this; - this.$activeWindow = $element; - this.resizing = true; - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } - - // if window's popup menu is open, close it & place focus on button (???) - if ($windowPopup.is(':visible')) { - $windowPopup.hide().parent().focus(); - } - - // get starting width and height - startPos = this.$activeWindow.position(); - this.dragKeyX = this.dragStartX; - this.dragKeyY = this.dragStartY; - this.dragStartWidth = this.$activeWindow.width(); - this.dragStartHeight = this.$activeWindow.height(); - - // add event listeners - $(document).on('mousemove touchmove',function(e) { - if (thisObj.resizing) { - // calculate new width and height based on changes to mouse position - newWidth = thisObj.dragStartWidth + (e.pageX - thisObj.startMouseX); - newHeight = thisObj.dragStartHeight + (e.pageY - thisObj.startMouseY); - thisObj.resizeObject( which, newWidth, newHeight ); - } - }); - return false; - }; - - AblePlayer.prototype.endResize = function(which) { - - var $window, $windowPopup, $windowButton; - - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - $windowButton = this.$signPopupButton; - } - - $(document).off('mousemove mouseup touchmove touchup'); - this.$activeWindow.off('keydown'); - $windowButton.show().focus(); - this.resizing = false; - this.$activeWindow.removeClass('able-resize'); - - // save final width and height of dragged element - this.updateCookie(which); - - // Booleans for preventing stray events - this.windowMenuClickRegistered = false; - this.finishingDrag = true; - - // finishingDrag should e reset after window click event, - // which is triggered automatically after mouseup - // However, in case that's not reliable in some browsers - // need to ensure this gets cancelled - setTimeout(function() { - this.finishingDrag = false; - }, 100); - }; - -})(jQuery); - -(function ($) { - AblePlayer.prototype.initSignLanguage = function() { - - // Sign language is only currently supported in HTML5 player, not YouTube or Vimeo - if (this.player === 'html5') { - // check to see if there's a sign language video accompanying this video - // check only the first source - // If sign language is provided, it must be provided for all sources - this.signFile = this.$sources.first().attr('data-sign-src'); - if (this.signFile) { - if (this.isIOS()) { - // IOS does not allow multiple videos to play simultaneously - // Therefore, sign language as rendered by Able Player unfortunately won't work - this.hasSignLanguage = false; - if (this.debug) { - - } - } - else { - if (this.debug) { - - } - this.hasSignLanguage = true; - this.injectSignPlayerCode(); - } - } - else { - this.hasSignLanguage = false; - } - } - else { - this.hasSignLanguage = false; - } - }; - - AblePlayer.prototype.injectSignPlayerCode = function() { - - // create and inject surrounding HTML structure - - var thisObj, signVideoId, signVideoWidth, i, signSrc, srcType, $signSource; - - thisObj = this; - - signVideoWidth = this.getDefaultWidth('sign'); - - signVideoId = this.mediaId + '-sign'; - this.$signVideo = $('<video>',{ - 'id' : signVideoId, - 'tabindex' : '-1' - }); - this.signVideo = this.$signVideo[0]; - // for each original <source>, add a <source> to the sign <video> - for (i=0; i < this.$sources.length; i++) { - signSrc = this.$sources[i].getAttribute('data-sign-src'); - srcType = this.$sources[i].getAttribute('type'); - if (signSrc) { - $signSource = $('<source>',{ - 'src' : signSrc, - 'type' : srcType - }); - this.$signVideo.append($signSource); - } - else { - // source is missing a sign language version - // can't include sign language - this.hasSignLanguage = false; - break; - } - } - - this.$signWindow = $('<div>',{ - 'class' : 'able-sign-window', - 'role': 'dialog', - 'aria-label': this.tt.sign - }); - this.$signToolbar = $('<div>',{ - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' - }); - - this.$signWindow.append(this.$signToolbar, this.$signVideo); - - this.$ableWrapper.append(this.$signWindow); - - // make it draggable - this.initDragDrop('sign'); - - if (this.prefSign === 1) { - // sign window is on. Go ahead and position it and show it - this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); - } - else { - this.$signWindow.hide(); - } - }; - -})(jQuery); - -(function ($) { - // Look up ISO 639-1 language codes to be used as subtitle labels - // In some instances "name" has been trunctation for readability - // Sources: - // http://stackoverflow.com/questions/3217492/list-of-language-codes-in-yaml-or-json/4900304#4900304 - // https://www.venea.net/web/culture_code - - var isoLangs = { - "ab":{ - "name":"Abkhaz", - "nativeName":"аҧсуа" - }, - "aa":{ - "name":"Afar", - "nativeName":"Afaraf" - }, - "af":{ - "name":"Afrikaans", - "nativeName":"Afrikaans" - }, - "ak":{ - "name":"Akan", - "nativeName":"Akan" - }, - "sq":{ - "name":"Albanian", - "nativeName":"Shqip" - }, - "am":{ - "name":"Amharic", - "nativeName":"አማርኛ" - }, - "ar":{ - "name":"Arabic", - "nativeName":"العربية" - }, - "an":{ - "name":"Aragonese", - "nativeName":"Aragonés" - }, - "hy":{ - "name":"Armenian", - "nativeName":"Հայերեն" - }, - "as":{ - "name":"Assamese", - "nativeName":"অসমীয়া" - }, - "av":{ - "name":"Avaric", - "nativeName":"авар мацӀ, магӀарул мацӀ" - }, - "ae":{ - "name":"Avestan", - "nativeName":"avesta" - }, - "ay":{ - "name":"Aymara", - "nativeName":"aymar aru" - }, - "az":{ - "name":"Azerbaijani", - "nativeName":"azərbaycan dili" - }, - "bm":{ - "name":"Bambara", - "nativeName":"bamanankan" - }, - "ba":{ - "name":"Bashkir", - "nativeName":"башҡорт теле" - }, - "eu":{ - "name":"Basque", - "nativeName":"euskara, euskera" - }, - "be":{ - "name":"Belarusian", - "nativeName":"Беларуская" - }, - "bn":{ - "name":"Bengali", - "nativeName":"বাংলা" - }, - "bh":{ - "name":"Bihari", - "nativeName":"भोजपुरी" - }, - "bi":{ - "name":"Bislama", - "nativeName":"Bislama" - }, - "bs":{ - "name":"Bosnian", - "nativeName":"bosanski jezik" - }, - "br":{ - "name":"Breton", - "nativeName":"brezhoneg" - }, - "bg":{ - "name":"Bulgarian", - "nativeName":"български език" - }, - "my":{ - "name":"Burmese", - "nativeName":"ဗမာစာ" - }, - "ca":{ - "name":"Catalan", - "nativeName":"Català" - }, - "ch":{ - "name":"Chamorro", - "nativeName":"Chamoru" - }, - "ce":{ - "name":"Chechen", - "nativeName":"нохчийн мотт" - }, - "ny":{ - "name":"Chichewa", - "nativeName":"chiCheŵa, chinyanja" - }, - "zh":{ - "name":"Chinese", - "nativeName":"中文 (Zhōngwén), 汉语, 漢語" - }, - "cv":{ - "name":"Chuvash", - "nativeName":"чӑваш чӗлхи" - }, - "kw":{ - "name":"Cornish", - "nativeName":"Kernewek" - }, - "co":{ - "name":"Corsican", - "nativeName":"corsu, lingua corsa" - }, - "cr":{ - "name":"Cree", - "nativeName":"ᓀᐦᐃᔭᐍᐏᐣ" - }, - "hr":{ - "name":"Croatian", - "nativeName":"hrvatski" - }, - "cs":{ - "name":"Czech", - "nativeName":"česky, čeština" - }, - "da":{ - "name":"Danish", - "nativeName":"dansk" - }, - "dv":{ - "name":"Divehi", - "nativeName":"ދިވެހި" - }, - "nl":{ - "name":"Dutch", - "nativeName":"Nederlands, Vlaams" - }, - "en":{ - "name":"English", - "nativeName":"English" - }, - "eo":{ - "name":"Esperanto", - "nativeName":"Esperanto" - }, - "et":{ - "name":"Estonian", - "nativeName":"eesti, eesti keel" - }, - "ee":{ - "name":"Ewe", - "nativeName":"Eʋegbe" - }, - "fo":{ - "name":"Faroese", - "nativeName":"føroyskt" - }, - "fj":{ - "name":"Fijian", - "nativeName":"vosa Vakaviti" - }, - "fi":{ - "name":"Finnish", - "nativeName":"suomi, suomen kieli" - }, - "fr":{ - "name":"French", - "nativeName":"français, langue française" - }, - "ff":{ - "name":"Fula", - "nativeName":"Fulfulde, Pulaar, Pular" - }, - "gl":{ - "name":"Galician", - "nativeName":"Galego" - }, - "ka":{ - "name":"Georgian", - "nativeName":"ქართული" - }, - "de":{ - "name":"German", - "nativeName":"Deutsch" - }, - "el":{ - "name":"Greek", - "nativeName":"Ελληνικά" - }, - "gn":{ - "name":"Guaraní", - "nativeName":"Avañeẽ" - }, - "gu":{ - "name":"Gujarati", - "nativeName":"ગુજરાતી" - }, - "ht":{ - "name":"Haitian", - "nativeName":"Kreyòl ayisyen" - }, - "ha":{ - "name":"Hausa", - "nativeName":"Hausa, هَوُسَ" - }, - "he":{ - "name":"Hebrew", - "nativeName":"עברית" - }, - "hz":{ - "name":"Herero", - "nativeName":"Otjiherero" - }, - "hi":{ - "name":"Hindi", - "nativeName":"हिन्दी, हिंदी" - }, - "ho":{ - "name":"Hiri Motu", - "nativeName":"Hiri Motu" - }, - "hu":{ - "name":"Hungarian", - "nativeName":"Magyar" - }, - "ia":{ - "name":"Interlingua", - "nativeName":"Interlingua" - }, - "id":{ - "name":"Indonesian", - "nativeName":"Bahasa Indonesia" - }, - "ie":{ - "name":"Interlingue", - "nativeName":"Originally called Occidental; then Interlingue after WWII" - }, - "ga":{ - "name":"Irish", - "nativeName":"Gaeilge" - }, - "ig":{ - "name":"Igbo", - "nativeName":"Asụsụ Igbo" - }, - "ik":{ - "name":"Inupiaq", - "nativeName":"Iñupiaq, Iñupiatun" - }, - "io":{ - "name":"Ido", - "nativeName":"Ido" - }, - "is":{ - "name":"Icelandic", - "nativeName":"Íslenska" - }, - "it":{ - "name":"Italian", - "nativeName":"Italiano" - }, - "iu":{ - "name":"Inuktitut", - "nativeName":"ᐃᓄᒃᑎᑐᑦ" - }, - "ja":{ - "name":"Japanese", - "nativeName":"日本語 (にほんご／にっぽんご)" - }, - "jv":{ - "name":"Javanese", - "nativeName":"basa Jawa" - }, - "kl":{ - "name":"Kalaallisut", - "nativeName":"kalaallisut, kalaallit oqaasii" - }, - "kn":{ - "name":"Kannada", - "nativeName":"ಕನ್ನಡ" - }, - "kr":{ - "name":"Kanuri", - "nativeName":"Kanuri" - }, - "ks":{ - "name":"Kashmiri", - "nativeName":"कश्मीरी, كشميري‎" - }, - "kk":{ - "name":"Kazakh", - "nativeName":"Қазақ тілі" - }, - "km":{ - "name":"Khmer", - "nativeName":"ភាសាខ្មែរ" - }, - "ki":{ - "name":"Kikuyu", - "nativeName":"Gĩkũyũ" - }, - "rw":{ - "name":"Kinyarwanda", - "nativeName":"Ikinyarwanda" - }, - "ky":{ - "name":"Kyrgyz", - "nativeName":"кыргыз тили" - }, - "kv":{ - "name":"Komi", - "nativeName":"коми кыв" - }, - "kg":{ - "name":"Kongo", - "nativeName":"KiKongo" - }, - "ko":{ - "name":"Korean", - "nativeName":"한국어 (韓國語), 조선말 (朝鮮語)" - }, - "ku":{ - "name":"Kurdish", - "nativeName":"Kurdî, كوردی‎" - }, - "kj":{ - "name":"Kuanyama", - "nativeName":"Kuanyama" - }, - "la":{ - "name":"Latin", - "nativeName":"latine, lingua latina" - }, - "lb":{ - "name":"Luxembourgish", - "nativeName":"Lëtzebuergesch" - }, - "lg":{ - "name":"Luganda", - "nativeName":"Luganda" - }, - "li":{ - "name":"Limburgish", - "nativeName":"Limburgs" - }, - "ln":{ - "name":"Lingala", - "nativeName":"Lingála" - }, - "lo":{ - "name":"Lao", - "nativeName":"ພາສາລາວ" - }, - "lt":{ - "name":"Lithuanian", - "nativeName":"lietuvių kalba" - }, - "lu":{ - "name":"Luba-Katanga", - "nativeName":"" - }, - "lv":{ - "name":"Latvian", - "nativeName":"latviešu valoda" - }, - "gv":{ - "name":"Manx", - "nativeName":"Gaelg, Gailck" - }, - "mk":{ - "name":"Macedonian", - "nativeName":"македонски јазик" - }, - "mg":{ - "name":"Malagasy", - "nativeName":"Malagasy fiteny" - }, - "ms":{ - "name":"Malay", - "nativeName":"bahasa Melayu, بهاس ملايو‎" - }, - "ml":{ - "name":"Malayalam", - "nativeName":"മലയാളം" - }, - "mt":{ - "name":"Maltese", - "nativeName":"Malti" - }, - "mi":{ - "name":"Māori", - "nativeName":"te reo Māori" - }, - "mr":{ - "name":"Marathi", - "nativeName":"मराठी" - }, - "mh":{ - "name":"Marshallese", - "nativeName":"Kajin M̧ajeļ" - }, - "mn":{ - "name":"Mongolian", - "nativeName":"монгол" - }, - "na":{ - "name":"Nauru", - "nativeName":"Ekakairũ Naoero" - }, - "nv":{ - "name":"Navajo", - "nativeName":"Diné bizaad, Dinékʼehǰí" - }, - "nb":{ - "name":"Norwegian Bokmål", - "nativeName":"Norsk bokmål" - }, - "nd":{ - "name":"North Ndebele", - "nativeName":"isiNdebele" - }, - "ne":{ - "name":"Nepali", - "nativeName":"नेपाली" - }, - "ng":{ - "name":"Ndonga", - "nativeName":"Owambo" - }, - "nn":{ - "name":"Norwegian Nynorsk", - "nativeName":"Norsk nynorsk" - }, - "no":{ - "name":"Norwegian", - "nativeName":"Norsk" - }, - "ii":{ - "name":"Nuosu", - "nativeName":"ꆈꌠ꒿ Nuosuhxop" - }, - "nr":{ - "name":"South Ndebele", - "nativeName":"isiNdebele" - }, - "oc":{ - "name":"Occitan", - "nativeName":"Occitan" - }, - "oj":{ - "name":"Ojibwe", - "nativeName":"ᐊᓂᔑᓈᐯᒧᐎᓐ" - }, - "cu":{ - "name":"Church Slavonic", - "nativeName":"ѩзыкъ словѣньскъ" - }, - "om":{ - "name":"Oromo", - "nativeName":"Afaan Oromoo" - }, - "or":{ - "name":"Oriya", - "nativeName":"ଓଡ଼ିଆ" - }, - "os":{ - "name":"Ossetian", - "nativeName":"ирон æвзаг" - }, - "pa":{ - "name":"Punjabi", - "nativeName":"ਪੰਜਾਬੀ, پنجابی‎" - }, - "pi":{ - "name":"Pāli", - "nativeName":"पाऴि" - }, - "fa":{ - "name":"Persian", - "nativeName":"فارسی" - }, - "pl":{ - "name":"Polish", - "nativeName":"polski" - }, - "ps":{ - "name":"Pashto", - "nativeName":"پښتو" - }, - "pt":{ - "name":"Portuguese", - "nativeName":"Português" - }, - "qu":{ - "name":"Quechua", - "nativeName":"Runa Simi, Kichwa" - }, - "rm":{ - "name":"Romansh", - "nativeName":"rumantsch grischun" - }, - "rn":{ - "name":"Kirundi", - "nativeName":"kiRundi" - }, - "ro":{ - "name":"Romanian", - "nativeName":"română" - }, - "ru":{ - "name":"Russian", - "nativeName":"русский язык" - }, - "sa":{ - "name":"Sanskrit", - "nativeName":"संस्कृतम्" - }, - "sc":{ - "name":"Sardinian", - "nativeName":"sardu" - }, - "sd":{ - "name":"Sindhi", - "nativeName":"सिन्धी, سنڌي، سندھی‎" - }, - "se":{ - "name":"Northern Sami", - "nativeName":"Davvisámegiella" - }, - "sm":{ - "name":"Samoan", - "nativeName":"gagana faa Samoa" - }, - "sg":{ - "name":"Sango", - "nativeName":"yângâ tî sängö" - }, - "sr":{ - "name":"Serbian", - "nativeName":"српски језик" - }, - "gd":{ - "name":"Gaelic", - "nativeName":"Gàidhlig" - }, - "sn":{ - "name":"Shona", - "nativeName":"chiShona" - }, - "si":{ - "name":"Sinhalese", - "nativeName":"සිංහල" - }, - "sk":{ - "name":"Slovak", - "nativeName":"slovenčina" - }, - "sl":{ - "name":"Slovene", - "nativeName":"slovenščina" - }, - "so":{ - "name":"Somali", - "nativeName":"Soomaaliga, af Soomaali" - }, - "st":{ - "name":"Southern Sotho", - "nativeName":"Sesotho" - }, - "es":{ - "name":"Spanish", - "nativeName":"español, castellano" - }, - "su":{ - "name":"Sundanese", - "nativeName":"Basa Sunda" - }, - "sw":{ - "name":"Swahili", - "nativeName":"Kiswahili" - }, - "ss":{ - "name":"Swati", - "nativeName":"SiSwati" - }, - "sv":{ - "name":"Swedish", - "nativeName":"svenska" - }, - "ta":{ - "name":"Tamil", - "nativeName":"தமிழ்" - }, - "te":{ - "name":"Telugu", - "nativeName":"తెలుగు" - }, - "tg":{ - "name":"Tajik", - "nativeName":"тоҷикӣ, toğikī, تاجیکی‎" - }, - "th":{ - "name":"Thai", - "nativeName":"ไทย" - }, - "ti":{ - "name":"Tigrinya", - "nativeName":"ትግርኛ" - }, - "bo":{ - "name":"Tibetan", - "nativeName":"བོད་ཡིག" - }, - "tk":{ - "name":"Turkmen", - "nativeName":"Türkmen, Түркмен" - }, - "tl":{ - "name":"Tagalog", - "nativeName":"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔" - }, - "tn":{ - "name":"Tswana", - "nativeName":"Setswana" - }, - "to":{ - "name":"Tonga", - "nativeName":"faka Tonga" - }, - "tr":{ - "name":"Turkish", - "nativeName":"Türkçe" - }, - "ts":{ - "name":"Tsonga", - "nativeName":"Xitsonga" - }, - "tt":{ - "name":"Tatar", - "nativeName":"татарча, tatarça, تاتارچا‎" - }, - "tw":{ - "name":"Twi", - "nativeName":"Twi" - }, - "ty":{ - "name":"Tahitian", - "nativeName":"Reo Tahiti" - }, - "ug":{ - "name":"Uyghur", - "nativeName":"Uyƣurqə, ئۇيغۇرچە‎" - }, - "uk":{ - "name":"Ukrainian", - "nativeName":"українська" - }, - "ur":{ - "name":"Urdu", - "nativeName":"اردو" - }, - "uz":{ - "name":"Uzbek", - "nativeName":"zbek, Ўзбек, أۇزبېك‎" - }, - "ve":{ - "name":"Venda", - "nativeName":"Tshivenḓa" - }, - "vi":{ - "name":"Vietnamese", - "nativeName":"Tiếng Việt" - }, - "vo":{ - "name":"Volapük", - "nativeName":"Volapük" - }, - "wa":{ - "name":"Walloon", - "nativeName":"Walon" - }, - "cy":{ - "name":"Welsh", - "nativeName":"Cymraeg" - }, - "wo":{ - "name":"Wolof", - "nativeName":"Wollof" - }, - "fy":{ - "name":"Western Frisian", - "nativeName":"Frysk" - }, - "xh":{ - "name":"Xhosa", - "nativeName":"isiXhosa" - }, - "yi":{ - "name":"Yiddish", - "nativeName":"ייִדיש" - }, - "yo":{ - "name":"Yoruba", - "nativeName":"Yorùbá" - }, - "za":{ - "name":"Zhuang", - "nativeName":"Saɯ cueŋƅ, Saw cuengh" - }, - "ar-dz":{ - "name":"Arabic (Algeria)", - "nativeName":"العربية (الجزائر)" - }, - "ar-bh":{ - "name":"Arabic (Bahrain)", - "nativeName":"العربية (البحرين)" - }, - "ar-eg":{ - "name":"Arabic (Egypt)", - "nativeName":"العربية (مصر)" - }, - "ar-iq":{ - "name":"Arabic (Iraq)", - "nativeName":"العربية (العراق)" - }, - "ar-jo":{ - "name":"Arabic (Jordan)", - "nativeName":"العربية (الأردن)" - }, - "ar-kw":{ - "name":"Arabic (Kuwait)", - "nativeName":"العربية (الكويت)" - }, - "ar-lb":{ - "name":"Arabic (Lebanon)", - "nativeName":"العربية (لبنان)" - }, - "ar-ly":{ - "name":"Arabic (Libya)", - "nativeName":"العربية (ليبيا)" - }, - "ar-ma":{ - "name":"Arabic (Morocco)", - "nativeName":"العربية (المملكة المغربية)" - }, - "ar-om":{ - "name":"Arabic (Oman)", - "nativeName":"العربية (عمان)" - }, - "ar-qa":{ - "name":"Arabic (Qatar)", - "nativeName":"العربية (قطر)" - }, - "ar-sa":{ - "name":"Arabic (Saudi Arabia)", - "nativeName":"العربية (المملكة العربية السعودية)" - }, - "ar-sy":{ - "name":"Arabic (Syria)", - "nativeName":"العربية (سوريا)" - }, - "ar-tn":{ - "name":"Arabic (Tunisia)", - "nativeName":"العربية (تونس)" - }, - "ar-ae":{ - "name":"Arabic (U.A.E.)", - "nativeName":"العربية (الإمارات العربية المتحدة)" - }, - "ar-ye":{ - "name":"Arabic (Yemen)", - "nativeName":"العربية (اليمن)" - }, - "de-at":{ - "name":"German (Austria)", - "nativeName":"Deutsch (Österreich)" - }, - "de-li":{ - "name":"German (Liechtenstein)", - "nativeName":"Deutsch (Liechtenstein)" - }, - "de-lu":{ - "name":"German (Luxembourg)", - "nativeName":"Deutsch (Luxemburg)" - }, - "de-ch":{ - "name":"German (Switzerland)", - "nativeName":"Deutsch (Schweiz)" - }, - "en-au":{ - "name":"English (Australia)", - "nativeName":"English (Australia)" - }, - "en-bz":{ - "name":"English (Belize)", - "nativeName":"English (Belize)" - }, - "en-ca":{ - "name":"English (Canada)", - "nativeName":"English (Canada)" - }, - "en-ie":{ - "name":"English (Ireland)", - "nativeName":"English (Ireland)" - }, - "en-jm":{ - "name":"English (Jamaica)", - "nativeName":"English (Jamaica)" - }, - "en-nz":{ - "name":"English (New Zealand)", - "nativeName":"" - }, - "en-za":{ - "name":"English (South Africa)", - "nativeName":"English (South Africa)" - }, - "en-tt":{ - "name":"English (Trinidad)", - "nativeName":"English (Trinidad y Tobago)" - }, - "en-gb":{ - "name":"English (United Kingdom)", - "nativeName":"English (United Kingdom)" - }, - "en-us":{ - "name":"English (United States)", - "nativeName":"English (United States)" - }, - "es-ar":{ - "name":"Spanish (Argentina)", - "nativeName":"Español (Argentina)" - }, - "es-bo":{ - "name":"Spanish (Bolivia)", - "nativeName":"Español (Bolivia)" - }, - "es-cl":{ - "name":"Spanish (Chile)", - "nativeName":"Español (Chile)" - }, - "es-co":{ - "name":"Spanish (Colombia)", - "nativeName":"Español (Colombia)" - }, - "es-cr":{ - "name":"Spanish (Costa Rica)", - "nativeName":"Español (Costa Rica)" - }, - "es-do":{ - "name":"Spanish (Dominican Republic)", - "nativeName":"Español (República Dominicana)" - }, - "es-ec":{ - "name":"Spanish (Ecuador)", - "nativeName":"Español (Ecuador)" - }, - "es-sv":{ - "name":"Spanish (El Salvador)", - "nativeName":"Español (El Salvador)" - }, - "es-gt":{ - "name":"Spanish (Guatemala)", - "nativeName":"Español (Guatemala)" - }, - "es-hn":{ - "name":"Spanish (Honduras)", - "nativeName":"Español (Honduras)" - }, - "es-mx":{ - "name":"Spanish (Mexico)", - "nativeName":"Español (México)" - }, - "es-ni":{ - "name":"Spanish (Nicaragua)", - "nativeName":"Español (Nicaragua)" - }, - "es-pa":{ - "name":"Spanish (Panama)", - "nativeName":"Español (Panamá)" - }, - "es-py":{ - "name":"Spanish (Paraguay)", - "nativeName":"Español (Paraguay)" - }, - "es-pe":{ - "name":"Spanish (Peru)", - "nativeName":"Español (Perú)" - }, - "es-pr":{ - "name":"Spanish (Puerto Rico)", - "nativeName":"Español (Puerto Rico)" - }, - "es-uy":{ - "name":"Spanish (Uruguay)", - "nativeName":"Español (Uruguay)" - }, - "es-ve":{ - "name":"Spanish (Venezuela)", - "nativeName":"Español (Venezuela)" - }, - "fr-be":{ - "name":"French (Belgium)", - "nativeName":"français (Belgique)" - }, - "fr-ca":{ - "name":"French (Canada)", - "nativeName":"français (Canada)" - }, - "fr-lu":{ - "name":"French (Luxembourg)", - "nativeName":"français (Luxembourg)" - }, - "fr-ch":{ - "name":"French (Switzerland)", - "nativeName":"français (Suisse)" - }, - "it-ch":{ - "name":"Italian (Switzerland)", - "nativeName":"italiano (Svizzera)" - }, - "nl-be":{ - "name":"Dutch (Belgium)", - "nativeName":"Nederlands (België)" - }, - "pt-br":{ - "name":"Portuguese (Brazil)", - "nativeName":"Português (Brasil)" - }, - "sv-fi":{ - "name":"Swedish (Finland)", - "nativeName":"svenska (Finland)" - }, - "zh-hk":{ - "name":"Chinese (Hong Kong)", - "nativeName":"中文(香港特别行政區)" - }, - "zh-cn":{ - "name":"Chinese (PRC)", - "nativeName":"中文(中华人民共和国)" - }, - "zh-sg":{ - "name":"Chinese (Singapore)", - "nativeName":"中文(新加坡)" - }, - "zh-tw":{ - "name":"Chinese Traditional (Taiwan)", - "nativeName":"中文（台灣）" - } - } - - AblePlayer.prototype.getLanguageName = function (key,whichName) { - - // return language name associated with lang code "key" - // whichName is either "English" or "local" (i.e., native name) - - var lang, code, subTag; - lang = isoLangs[key.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName; - } - else { - return lang.name; - } - } - else if (key.includes('-')) { - code = key.substr(0,2); - subTag = key.substr(3); - lang = isoLangs[code.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName + ' (' + subTag + ')'; - } - else { - return lang.name + ' (' + subTag + ')'; - } - } - } - // if all else has failed, use the key as the label - return key; - }; - -})(jQuery); -(function ($) { - AblePlayer.prototype.getSupportedLangs = function() { - // returns an array of languages for which AblePlayer has translation tables - var langs = ['ca','cs','de','en','es','fr','he','id','it','ja','nb','nl','pt-br','sv','tr','zh-tw']; - return langs; - }; - - AblePlayer.prototype.getTranslationText = function() { - - // determine language, then get labels and prompts from corresponding translation var - - var deferred, thisObj, supportedLangs, docLang, msg, translationFile, collapsedLang; - deferred = $.Deferred(); - thisObj = this; - - supportedLangs = this.getSupportedLangs(); // returns an array - - if (this.lang) { // a data-lang attribute is included on the media element - if ($.inArray(this.lang,supportedLangs) === -1) { - // the specified language is not supported - if (this.lang.indexOf('-') == 2) { - // this is a localized lang attribute (e.g., fr-CA) - // try the parent language, given the first two characters - if ($.inArray(this.lang.substring(0,2),supportedLangs) !== -1) { - // parent lang is supported. Use that. - this.lang = this.lang.substring(0,2); - } - else { - // the parent language is not supported either - // unable to use the specified language - this.lang = null; - } - } - else { - // this is not a localized language. - // since it's not supported, we're unable to use it. - this.lang = null; - } - } - } - - if (!this.lang) { - // try the language of the web page, if specified - if ($('body').attr('lang')) { - docLang = $('body').attr('lang').toLowerCase(); - } - else if ($('html').attr('lang')) { - docLang = $('html').attr('lang').toLowerCase(); - } - else { - docLang = null; - } - if (docLang) { - if ($.inArray(docLang,supportedLangs) !== -1) { - // the document language is supported - this.lang = docLang; - } - else { - // the document language is not supported - if (docLang.indexOf('-') == 2) { - // this is a localized lang attribute (e.g., fr-CA) - // try the parent language, given the first two characters - if ($.inArray(docLang.substring(0,2),supportedLangs) !== -1) { - // the parent language is supported. use that. - this.lang = docLang.substring(0,2); - } - } - } - } - } - - if (!this.lang) { - // No supported language has been specified by any means - // Fallback to English - this.lang = 'en'; - } - if (!this.searchLang) { - this.searchLang = this.lang; - } - translationFile = this.rootPath + 'translations/' + this.lang + '.js'; - $.getJSON(translationFile, function(data) { - thisObj.tt = data; - deferred.resolve(); - }); - return deferred.promise(); - }; - -})(jQuery); - -(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); - -/! Copyright (c) 2014 - Paul Tavares - purtuga - @paul_tavares - MIT License / -;(function($){ - - /** - * Delays the execution of a function until an expression returns true. - * The expression is checked every 100 milliseconds for as many tries - * as defined in in the attempts option - * - * @param {Object} options - * @param {Function} options.when - * Function to execute on every interval. - * Must return true (boolean) in order for - * options.do to be executed. - * @param {Function} [options.exec] - * Function to be executed once options.when() - * returns true. - * @param {Interger} [options.interval=100] - * How long to wait in-between tries. - * @param {Interger} [options.attempts=100] - * How many tries to use before its considered - * a failure. - * @param {Interger} [options.delayed=0] - * Number of miliseconds to wait before execution - is started. Default is imediately. - * - * @return {jQuery.Promise} - * - * @example - * - * $.doWhen({ - * when: function(){ - * return false; - * }, - * exec: function(){ - * alert("never called given false response on when param!"); - * } - * }) - * .fail(function(){ - * alert('ALERT: FAILED CONDITION'); - * }) - * .then(function(){ - * alert("resolved."); - * }); - * - / - $.doWhen = function(options) { - - return $.Deferred(function(dfd){ - - var opt = $.extend({}, { - when: null, - exec: function(){}, - interval: 100, - attempts: 100, - delayed: 0 - }, - options, - { - checkId: null - }), - startChecking = function(){ - - // Check condition now and if true, then resolve object - if (opt.when() === true) { - - opt.exec.call(dfd.promise()); - dfd.resolve(); - return; - - } - - // apply minimal UI and hide the overlay - opt.checkId = setInterval(function(){ - - if (opt.attempts === 0) { - - clearInterval(opt.checkId); - dfd.reject(); - - } else { - - --opt.attempts; - - if (opt.when() === true) { - - opt.attempts = 0; - clearInterval(opt.checkId); - opt.exec.call(dfd.promise()); - dfd.resolve(); - - } - - } - - }, opt.interval); - - }; - - if (opt.delayed > 0) { - - setTimeout(startChecking, Number(opt.delayed)); - - } else { - - startChecking(); - - } - - }).promise(); - - }; - -})(jQuery); -/ 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: - // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; - // TODO: if using this be sure to add lang attr to <div> (see above) - }).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); - - -(function ($) { - AblePlayer.prototype.initVimeoPlayer = function () { - - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - - containerId = this.mediaId + '_vimeo'; - - // add container to which Vimeo player iframe will be appended - this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - - // if a described version is available && user prefers desription - // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } - this.activeVimeoId = vimeoId; - - // Notes re. Vimeo Embed Options: - // If a video is owned by a user with a paid Plus, PRO, or Business account, - // setting the "controls" option to "false" will hide the default controls, without hiding captions. - // This is a new option from Vimeo; previously used "background:true" to hide the controller, - // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - - if (this.autoplay && this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } - - videoDimensions = this.getVimeoDimensions(this.activeVimeoId, containerId); - if (videoDimensions) { - this.vimeoWidth = videoDimensions[0]; - this.vimeoHeight = videoDimensions[1]; - this.aspectRatio = thisObj.ytWidth / thisObj.ytHeight; - } - else { - // dimensions are initially unknown - // sending null values to Vimeo results in a video that uses the default Vimeo dimensions - // these can then be scraped from the iframe and applied to this.$ableWrapper - this.vimeoWidth = null; - this.vimeoHeight = null; - } - - options = { - id: vimeoId, - width: this.vimeoWidth, - controls: false - }; - - this.vimeoPlayer = new Vimeo.Player(containerId, options); - - this.vimeoPlayer.ready().then(function() { - - if (!thisObj.hasPlaylist) { - // remove the media element, since Vimeo replaces that with its own element in an iframe - // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() - thisObj.$media.remove(); - - // define variables that will impact player setup - - // vimeoSupportsPlaybackRateChange - // changing playbackRate is only supported if the video is hosted on a Pro or Business account - // unfortunately there is no direct way to query for that information. - // this.vimeoPlayer.getPlaybackRate() returns a value, regardless of account type - // This is a hack: - // Attempt to change the playbackRate. If it results in an error, assume changing playbackRate is not supported. - // Supported playbackRate values are 0.5 to 2. - thisObj.vimeoPlaybackRate = 1; - thisObj.vimeoPlayer.setPlaybackRate(thisObj.vimeoPlaybackRate).then(function(playbackRate) { - // playback rate was set - thisObj.vimeoSupportsPlaybackRateChange = true; - }).catch(function(error) { - thisObj.vimeoSupportsPlaybackRateChange = false; - }); - deferred.resolve(); - } - }); - return promise; - }; - - AblePlayer.prototype.getVimeoPaused = function () { - - var deferred, promise; - deferred = new $.Deferred(); - promise = deferred.promise(); - - this.vimeoPlayer.getPaused().then(function (paused) { - // paused is Boolean - deferred.resolve(paused); - }); - - return promise; - } - - AblePlayer.prototype.getVimeoEnded = function () { - - var deferred, promise; - deferred = new $.Deferred(); - promise = deferred.promise(); - - this.vimeoPlayer.getEnded().then(function (ended) { - // ended is Boolean - deferred.resolve(ended); - }); - - return promise; - } - - AblePlayer.prototype.getVimeoState = function () { - - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - - thisObj = this; - - deferred = new $.Deferred(); - promise = deferred.promise(); - promises = []; - - gettingPausedPromise = this.vimeoPlayer.getPaused(); - gettingEndedPromise = this.vimeoPlayer.getEnded(); - - promises.push(gettingPausedPromise); - promises.push(gettingEndedPromise); - - gettingPausedPromise.then(function (paused) { - deferred.resolve(paused); - }); - gettingEndedPromise.then(function (ended) { - deferred.resolve(ended); - }); - $.when.apply($, promises).then(function () { - deferred.resolve(); - }); - return promise; - } - - AblePlayer.prototype.getVimeoDimensions = function (vimeoContainerId) { - - // get dimensions of Vimeo video, return array with width & height - - var d, url, $iframe, width, height; - - d = []; - - if (typeof this.playerMaxWidth !== 'undefined') { - d[0] = this.playerMaxWidth; - // optional: set height as well; not required though since Vimeo will adjust height to match width - if (typeof this.playerMaxHeight !== 'undefined') { - d[1] = this.playerMaxHeight; - } - return d; - } - else { - if (typeof $('#' + vimeoContainerId) !== 'undefined') { - $iframe = $('#' + vimeoContainerId); - width = $iframe.width(); - height = $iframe.height(); - if (width > 0 && height > 0) { - d[0] = width; - d[1] = height; - return d; - } - } - } - return false; - }; - - AblePlayer.prototype.getVimeoCaptionTracks = function () { - - // get data via Vimeo Player API, and push data to this.captions - // Note: Vimeo doesn't expose the caption cues themselves - // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); - var promise = deferred.promise(); - - var thisObj, i, trackId, isDefaultTrack; - - thisObj = this; - - this.vimeoPlayer.getTextTracks().then(function(tracks) { - - // each Vimeo track includes the following: - // label (local name of the language) - // language (2-character code) - // kind (captions or subtitles, as declared by video owner) - // mode ('disabled' or 'showing') - - if (tracks.length) { - - // create a new button for each caption track - for (i=0; i<tracks.length; i++) { - - thisObj.hasCaptions = true; - if (thisObj.prefCaptions === 1) { - thisObj.captionsOn = true; - } - else { - thisObj.captionsOn = false; - } - // assign the default track based on language of the player - if (tracks[i]['language'] === thisObj.lang) { - isDefaultTrack = true; - } - else { - isDefaultTrack = false; - } - thisObj.tracks.push({ - 'kind': tracks[i]['kind'], - 'language': tracks[i]['language'], - 'label': tracks[i]['label'], - 'def': isDefaultTrack - }); - } - thisObj.captions = thisObj.tracks; - thisObj.hasCaptions = true; - - // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - deferred.resolve(); - } - else { - thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; - deferred.resolve(); - } - }); - - return promise; - }; - -})(jQuery); diff --git a/src/build/ableplayer.dist.js b/src/build/ableplayer.dist.js index 2ffff87..117f03f 100644 --- a/src/build/ableplayer.dist.js +++ b/src/build/ableplayer.dist.js @@ -1,5 +1,5 @@ -/! ableplayer V4.5.1 with DOMPurify included / -/! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE / +/! ableplayer V4.8.0 with DOMPurify included / +/! @license DOMPurify 3.3.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.1/LICENSE / (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : @@ -18,7 +18,7 @@ freeze, seal, create - } = Object; // eslint-disable-line import/no-mutable-exports + } = Object; let { apply, construct @@ -34,12 +34,18 @@ }; } if (!apply) { - apply = function apply(fun, thisValue, args) { - return fun.apply(thisValue, args); + apply = function apply(func, thisArg) { + for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { + args[_key - 2] = arguments[_key]; + } + return func.apply(thisArg, args); }; } if (!construct) { - construct = function construct(Func, args) { + construct = function construct(Func) { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } return new Func(...args); }; } @@ -57,48 +63,28 @@ const objectHasOwnProperty = unapply(Object.prototype.hasOwnProperty); const regExpTest = unapply(RegExp.prototype.test); const typeErrorCreate = unconstruct(TypeError); - /** - * Creates a new function that calls the given function with a specified thisArg and arguments. - * - * @param func - The function to be wrapped and called. - * @returns A new function that calls the given function with a specified thisArg and arguments. - */ function unapply(func) { return function (thisArg) { - for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; + if (thisArg instanceof RegExp) { + thisArg.lastIndex = 0; + } + for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) { + args[_key3 - 1] = arguments[_key3]; } return apply(func, thisArg, args); }; } - /** - * Creates a new function that constructs an instance of the given constructor function with the provided arguments. - * - * @param func - The constructor function to be wrapped and called. - * @returns A new function that constructs an instance of the given constructor function with the provided arguments. - */ - function unconstruct(func) { + function unconstruct(Func) { return function () { - for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { - args[_key2] = arguments[_key2]; + for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { + args[_key4] = arguments[_key4]; } - return construct(func, args); + return construct(Func, args); }; } - /** - * Add properties to a lookup table - * - * @param set - The set to which elements will be added. - * @param array - The array containing elements to be added to the set. - * @param transformCaseFunc - An optional function to transform the case of each element before adding to the set. - * @returns The modified set with added elements. - */ function addToSet(set, array) { let transformCaseFunc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : stringToLowerCase; if (setPrototypeOf) { - // Make 'in' and truthy checks like Boolean(set.constructor) - // independent of any properties defined on Object.prototype. - // Prevent prototype setters from intercepting set as a this value. setPrototypeOf(set, null); } let l = array.length; @@ -107,7 +93,6 @@ if (typeof element === 'string') { const lcElement = transformCaseFunc(element); if (lcElement !== element) { - // Config presets (e.g. tags.js, attrs.js) are immutable. if (!isFrozen(array)) { array[l] = lcElement; } @@ -118,12 +103,6 @@ } return set; } - /** - * Clean up an array to harden against CSPP - * - * @param array - The array to be cleaned. - * @returns The cleaned version of the array - */ function cleanArray(array) { for (let index = 0; index < array.length; index++) { const isPropertyExist = objectHasOwnProperty(array, index); @@ -133,12 +112,6 @@ } return array; } - /** - * Shallow clone an object - * - * @param object - The object to be cloned. - * @returns A new object that copies the original. - */ function clone(object) { const newObject = create(null); for (const [property, value] of entries(object)) { @@ -155,13 +128,6 @@ } return newObject; } - /** - * This method automatically checks if the prop is function or getter and behaves accordingly. - * - * @param object - The object to look up the getter function in its prototype chain. - * @param prop - The property name for which to find the getter function. - * @returns The getter function found in the prototype chain or a fallback function. - / function lookupGetter(object, prop) { while (object !== null) { const desc = getOwnPropertyDescriptor(object, prop); @@ -181,40 +147,33 @@ return fallbackValue; } - const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']); - const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']); + const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'search', 'section', 'select', 'shadow', 'slot', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']); + const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'enterkeyhint', 'exportparts', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'inputmode', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'part', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']); const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']); - // List of SVG elements that are disallowed by default. - // We still need to know them so that we can do namespace - // checks properly in case one wants to add them to - // allow-list. const svgDisallowed = freeze(['animate', 'color-profile', 'cursor', 'discard', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use']); const mathMl$1 = freeze(['math', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'mprescripts']); - // Similarly to SVG, we want to know all MathML elements, - // even those that we disallow by default. const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']); const text = freeze(['#text']); - const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']); - const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']); + const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'exportparts', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inert', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'part', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']); + const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'mask-type', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']); const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']); const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']); - // eslint-disable-next-line unicorn/better-regex - const MUSTACHE_EXPR = seal(/\{\{[\w\W]|[\w\W]\}\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode + const MUSTACHE_EXPR = seal(/\{\{[\w\W]|[\w\W]\}\}/gm); const ERB_EXPR = seal(/<%[\w\W]|[\w\W]%>/gm); - const TMPLIT_EXPR = seal(/\$\{[\w\W]/gm); // eslint-disable-line unicorn/better-regex - const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]+$/); // eslint-disable-line no-useless-escape - const ARIA_ATTR = seal(/^aria-[\-\w]+$/); // eslint-disable-line no-useless-escape - const IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i // eslint-disable-line no-useless-escape + const TMPLIT_EXPR = seal(/\$\{[\w\W]/gm); + const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]+$/); + const ARIA_ATTR = seal(/^aria-[\-\w]+$/); + const IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i ); const IS_SCRIPT_OR_DATA = seal(/^(?:\w+script|data):/i); - const ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g // eslint-disable-line no-control-regex + const ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g ); const DOCTYPE_NAME = seal(/^html$/i); const CUSTOM_ELEMENT = seal(/^[a-z][.\w](-[.\w]+)+$/i); - var EXPRESSIONS = /#PURE/Object.freeze({ + var EXPRESSIONS = Object.freeze({ proto: null, ARIA_ATTR: ARIA_ATTR, ATTR_WHITESPACE: ATTR_WHITESPACE, @@ -228,42 +187,27 @@ TMPLIT_EXPR: TMPLIT_EXPR }); - /* eslint-disable @typescript-eslint/indent */ - // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType const NODE_TYPE = { element: 1, attribute: 2, text: 3, cdataSection: 4, entityReference: 5, - // Deprecated entityNode: 6, - // Deprecated progressingInstruction: 7, comment: 8, document: 9, documentType: 10, documentFragment: 11, - notation: 12 // Deprecated + notation: 12 }; const getGlobal = function getGlobal() { return typeof window === 'undefined' ? null : window; }; - /** - * Creates a no-op policy for internal use only. - * Don't export this function outside this module! - * @param trustedTypes The policy factory. - * @param purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix). - * @return The policy created (or null, if Trusted Types - * are not supported or creating the policy failed). - */ const _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) { if (typeof trustedTypes !== 'object' || typeof trustedTypes.createPolicy !== 'function') { return null; } - // Allow the callers to control the unique policy name - // by adding a data-tt-policy-suffix to the script element with the DOMPurify. - // Policy creation with duplicate names throws in Trusted Types. let suffix = null; const ATTR_NAME = 'data-tt-policy-suffix'; if (purifyHostElement && purifyHostElement.hasAttribute(ATTR_NAME)) { @@ -280,11 +224,8 @@ } }); } catch (_) { - // Policy creation failed (most likely another DOMPurify script has - // already run). Skip creating the policy, as this will only cause errors - // if TT are enforced. - - return null; + + return null; } }; const _createHooksMap = function _createHooksMap() { @@ -303,11 +244,9 @@ function createDOMPurify() { let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal(); const DOMPurify = root => createDOMPurify(root); - DOMPurify.version = '3.2.4'; + DOMPurify.version = '3.3.1'; DOMPurify.removed = []; if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) { - // Not running in a browser, provide a factory function - // so that you can pass your own Window DOMPurify.isSupported = false; return DOMPurify; } @@ -333,12 +272,6 @@ const getNextSibling = lookupGetter(ElementPrototype, 'nextSibling'); const getChildNodes = lookupGetter(ElementPrototype, 'childNodes'); const getParentNode = lookupGetter(ElementPrototype, 'parentNode'); - // As per issue #47, the web-components registry is inherited by a - // new document created via createHTMLDocument. As per the spec - // (http://w3c.github.io/webcomponents/spec/custom/#creating-and-passing-registries) - // a new empty registry is used when creating a template contents owner - // document, so we use that as our parent document to ensure nothing - // is inherited. if (typeof HTMLTemplateElement === 'function') { const template = document.createElement('template'); if (template.content && template.content.ownerDocument) { @@ -357,9 +290,6 @@ importNode } = originalDocument; let hooks = _createHooksMap(); - /** - * Expose whether this browser supports running the full DOMPurify. - */ DOMPurify.isSupported = typeof entries === 'function' && typeof getParentNode === 'function' && implementation && implementation.createHTMLDocument !== undefined; const { MUSTACHE_EXPR, @@ -374,22 +304,10 @@ let { IS_ALLOWED_URI: IS_ALLOWED_URI$1 } = EXPRESSIONS; - /** - * We consider the elements and attributes below to be safe. Ideally - * don't add any new ones but feel free to remove unwanted ones. - / - / allowed element names / let ALLOWED_TAGS = null; const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text]); - / Allowed attribute names / let ALLOWED_ATTR = null; const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]); - / - * Configure how DOMPurify should handle custom elements and their attributes as well as customized built-in elements. - * @property {RegExp|Function|null} tagNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any custom elements) - * @property {RegExp|Function|null} attributeNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any attributes not on the allow list) - * @property {boolean} allowCustomizedBuiltInElements allow custom elements derived from built-ins if they pass CUSTOM_ELEMENT_HANDLING.tagNameCheck. Default: `false`. - / let CUSTOM_ELEMENT_HANDLING = Object.seal(create(null, { tagNameCheck: { writable: true, @@ -410,156 +328,101 @@ value: false } })); - / Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) / let FORBID_TAGS = null; - / Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) / let FORBID_ATTR = null; - / Decide if ARIA attributes are okay / + const EXTRA_ELEMENT_HANDLING = Object.seal(create(null, { + tagCheck: { + writable: true, + configurable: false, + enumerable: true, + value: null + }, + attributeCheck: { + writable: true, + configurable: false, + enumerable: true, + value: null + } + })); let ALLOW_ARIA_ATTR = true; - / Decide if custom data attributes are okay / let ALLOW_DATA_ATTR = true; - / Decide if unknown protocols are okay / let ALLOW_UNKNOWN_PROTOCOLS = false; - / Decide if self-closing tags in attributes are allowed. - * Usually removed due to a mXSS issue in jQuery 3.0 / let ALLOW_SELF_CLOSE_IN_ATTR = true; - / Output should be safe for common template engines. - * This means, DOMPurify removes data attributes, mustaches and ERB - / let SAFE_FOR_TEMPLATES = false; - / Output should be safe even for XML used within HTML and alike. - * This means, DOMPurify removes comments when containing risky content. - / let SAFE_FOR_XML = true; - / Decide if document with <html>... should be returned / let WHOLE_DOCUMENT = false; - / Track whether config is already set on this instance of DOMPurify. / let SET_CONFIG = false; - / Decide if all elements (e.g. style, script) must be children of - * document.body. By default, browsers might move them to document.head / let FORCE_BODY = false; - / Decide if a DOM `HTMLBodyElement` should be returned, instead of a html - * string (or a TrustedHTML object if Trusted Types are supported). - * If `WHOLE_DOCUMENT` is enabled a `HTMLHtmlElement` will be returned instead - / let RETURN_DOM = false; - / Decide if a DOM `DocumentFragment` should be returned, instead of a html - * string (or a TrustedHTML object if Trusted Types are supported) / let RETURN_DOM_FRAGMENT = false; - / Try to return a Trusted Type object instead of a string, return a string in - * case Trusted Types are not supported / let RETURN_TRUSTED_TYPE = false; - / Output should be free from DOM clobbering attacks? - * This sanitizes markups named with colliding, clobberable built-in DOM APIs. - / let SANITIZE_DOM = true; - / Achieve full DOM Clobbering protection by isolating the namespace of named - * properties and JS variables, mitigating attacks that abuse the HTML/DOM spec rules. - * - * HTML/DOM spec rules that enable DOM Clobbering: - * - Named Access on Window (§7.3.3) - * - DOM Tree Accessors (§3.1.5) - * - Form Element Parent-Child Relations (§4.10.3) - * - Iframe srcdoc / Nested WindowProxies (§4.8.5) - * - HTMLCollection (§4.2.10.2) - * - * Namespace isolation is implemented by prefixing `id` and `name` attributes - * with a constant string, i.e., `user-content-` - / let SANITIZE_NAMED_PROPS = false; const SANITIZE_NAMED_PROPS_PREFIX = 'user-content-'; - / Keep element content when removing element? / let KEEP_CONTENT = true; - / If a `Node` is passed to sanitize(), then performs sanitization in-place instead - * of importing it into a new Document and returning a sanitized copy / let IN_PLACE = false; - / Allow usage of profiles like html, svg and mathMl / let USE_PROFILES = {}; - / Tags to ignore content of when KEEP_CONTENT is true / let FORBID_CONTENTS = null; const DEFAULT_FORBID_CONTENTS = addToSet({}, ['annotation-xml', 'audio', 'colgroup', 'desc', 'foreignobject', 'head', 'iframe', 'math', 'mi', 'mn', 'mo', 'ms', 'mtext', 'noembed', 'noframes', 'noscript', 'plaintext', 'script', 'style', 'svg', 'template', 'thead', 'title', 'video', 'xmp']); - / Tags that are safe for data: URIs / let DATA_URI_TAGS = null; const DEFAULT_DATA_URI_TAGS = addToSet({}, ['audio', 'video', 'img', 'source', 'image', 'track']); - / Attributes safe for values like "javascript:" / let URI_SAFE_ATTRIBUTES = null; const DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ['alt', 'class', 'for', 'id', 'label', 'name', 'pattern', 'placeholder', 'role', 'summary', 'title', 'value', 'style', 'xmlns']); const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML'; const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'; const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml'; - / Document namespace / let NAMESPACE = HTML_NAMESPACE; let IS_EMPTY_INPUT = false; - / Allowed XHTML+XML namespaces / let ALLOWED_NAMESPACES = null; const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString); let MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']); let HTML_INTEGRATION_POINTS = addToSet({}, ['annotation-xml']); - // Certain elements are allowed in both SVG and HTML - // namespace. We need to specify them explicitly - // so that they don't get erroneously deleted from - // HTML namespace. const COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, ['title', 'style', 'font', 'a', 'script']); - / Parsing of strict XHTML documents / let PARSER_MEDIA_TYPE = null; const SUPPORTED_PARSER_MEDIA_TYPES = ['application/xhtml+xml', 'text/html']; const DEFAULT_PARSER_MEDIA_TYPE = 'text/html'; let transformCaseFunc = null; - / Keep a reference to config to pass to hooks / let CONFIG = null; - / Ideally, do not touch anything below this line / - / ______________________________________________ */ const formElement = document.createElement('form'); const isRegexOrFunction = function isRegexOrFunction(testValue) { return testValue instanceof RegExp || testValue instanceof Function; }; - /** - * _parseConfig - * - * @param cfg optional config literal - / - // eslint-disable-next-line complexity const _parseConfig = function _parseConfig() { let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; if (CONFIG && CONFIG === cfg) { return; } - / Shield configuration object from tampering / if (!cfg || typeof cfg !== 'object') { cfg = {}; } - / Shield configuration object from prototype pollution / cfg = clone(cfg); PARSER_MEDIA_TYPE = - // eslint-disable-next-line unicorn/prefer-includes SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? DEFAULT_PARSER_MEDIA_TYPE : cfg.PARSER_MEDIA_TYPE; - // HTML tags and attributes are not case-sensitive, converting to lowercase. Keeping XHTML as is. transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? stringToString : stringToLowerCase; - / Set configuration parameters / ALLOWED_TAGS = objectHasOwnProperty(cfg, 'ALLOWED_TAGS') ? addToSet({}, cfg.ALLOWED_TAGS, transformCaseFunc) : DEFAULT_ALLOWED_TAGS; ALLOWED_ATTR = objectHasOwnProperty(cfg, 'ALLOWED_ATTR') ? addToSet({}, cfg.ALLOWED_ATTR, transformCaseFunc) : DEFAULT_ALLOWED_ATTR; ALLOWED_NAMESPACES = objectHasOwnProperty(cfg, 'ALLOWED_NAMESPACES') ? addToSet({}, cfg.ALLOWED_NAMESPACES, stringToString) : DEFAULT_ALLOWED_NAMESPACES; URI_SAFE_ATTRIBUTES = objectHasOwnProperty(cfg, 'ADD_URI_SAFE_ATTR') ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR, transformCaseFunc) : DEFAULT_URI_SAFE_ATTRIBUTES; DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS, transformCaseFunc) : DEFAULT_DATA_URI_TAGS; FORBID_CONTENTS = objectHasOwnProperty(cfg, 'FORBID_CONTENTS') ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS; - FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : {}; - FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : {}; + FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : clone({}); + FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : clone({}); USE_PROFILES = objectHasOwnProperty(cfg, 'USE_PROFILES') ? cfg.USE_PROFILES : false; - ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true - ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true - ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false; // Default false - ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false; // Default true - SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false; // Default false - SAFE_FOR_XML = cfg.SAFE_FOR_XML !== false; // Default true - WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false; // Default false - RETURN_DOM = cfg.RETURN_DOM || false; // Default false - RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false; // Default false - RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false; // Default false - FORCE_BODY = cfg.FORCE_BODY || false; // Default false - SANITIZE_DOM = cfg.SANITIZE_DOM !== false; // Default true - SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS || false; // Default false - KEEP_CONTENT = cfg.KEEP_CONTENT !== false; // Default true - IN_PLACE = cfg.IN_PLACE || false; // Default false + ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; + ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; + ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false; + ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false; + SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false; + SAFE_FOR_XML = cfg.SAFE_FOR_XML !== false; + WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false; + RETURN_DOM = cfg.RETURN_DOM || false; + RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false; + RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false; + FORCE_BODY = cfg.FORCE_BODY || false; + SANITIZE_DOM = cfg.SANITIZE_DOM !== false; + SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS || false; + KEEP_CONTENT = cfg.KEEP_CONTENT !== false; + IN_PLACE = cfg.IN_PLACE || false; IS_ALLOWED_URI$1 = cfg.ALLOWED_URI_REGEXP || IS_ALLOWED_URI; NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE; MATHML_TEXT_INTEGRATION_POINTS = cfg.MATHML_TEXT_INTEGRATION_POINTS || MATHML_TEXT_INTEGRATION_POINTS; @@ -580,7 +443,6 @@ if (RETURN_DOM_FRAGMENT) { RETURN_DOM = true; } - / Parse profile info / if (USE_PROFILES) { ALLOWED_TAGS = addToSet({}, text); ALLOWED_ATTR = []; @@ -604,18 +466,25 @@ addToSet(ALLOWED_ATTR, xml); } } - / Merge configuration parameters / if (cfg.ADD_TAGS) { - if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) { - ALLOWED_TAGS = clone(ALLOWED_TAGS); + if (typeof cfg.ADD_TAGS === 'function') { + EXTRA_ELEMENT_HANDLING.tagCheck = cfg.ADD_TAGS; + } else { + if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) { + ALLOWED_TAGS = clone(ALLOWED_TAGS); + } + addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc); } - addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc); } if (cfg.ADD_ATTR) { - if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) { - ALLOWED_ATTR = clone(ALLOWED_ATTR); + if (typeof cfg.ADD_ATTR === 'function') { + EXTRA_ELEMENT_HANDLING.attributeCheck = cfg.ADD_ATTR; + } else { + if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) { + ALLOWED_ATTR = clone(ALLOWED_ATTR); + } + addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc); } - addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc); } if (cfg.ADD_URI_SAFE_ATTR) { addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc); @@ -626,15 +495,18 @@ } addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc); } - / Add #text in case KEEP_CONTENT is set to true / + if (cfg.ADD_FORBID_CONTENTS) { + if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) { + FORBID_CONTENTS = clone(FORBID_CONTENTS); + } + addToSet(FORBID_CONTENTS, cfg.ADD_FORBID_CONTENTS, transformCaseFunc); + } if (KEEP_CONTENT) { ALLOWED_TAGS['#text'] = true; } - / Add html, head and body to ALLOWED_TAGS in case WHOLE_DOCUMENT is true / if (WHOLE_DOCUMENT) { addToSet(ALLOWED_TAGS, ['html', 'head', 'body']); } - / Add tbody to ALLOWED_TAGS in case tables are permitted, see #286, #365 / if (ALLOWED_TAGS.table) { addToSet(ALLOWED_TAGS, ['tbody']); delete FORBID_TAGS.tbody; @@ -646,42 +518,25 @@ if (typeof cfg.TRUSTED_TYPES_POLICY.createScriptURL !== 'function') { throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.'); } - // Overwrite existing TrustedTypes policy. trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY; - // Sign local variables required by `sanitize`. emptyHTML = trustedTypesPolicy.createHTML(''); } else { - // Uninitialized policy, attempt to initialize the internal dompurify policy. if (trustedTypesPolicy === undefined) { trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, currentScript); } - // If creating the internal policy succeeded sign internal variables. if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') { emptyHTML = trustedTypesPolicy.createHTML(''); } } - // Prevent further manipulation of configuration. - // Not available in IE8, Safari 5, etc. if (freeze) { freeze(cfg); } CONFIG = cfg; }; - / Keep track of all possible SVG and MathML tags - * so that we can perform the namespace checks - * correctly. */ const ALL_SVG_TAGS = addToSet({}, [...svg$1, ...svgFilters, ...svgDisallowed]); const ALL_MATHML_TAGS = addToSet({}, [...mathMl$1, ...mathMlDisallowed]); - /** - * @param element a DOM element whose namespace is being checked - * @returns Return false if the element has a - * namespace that a spec-compliant parser would never - * return. Return true otherwise. - */ const _checkValidNamespace = function _checkValidNamespace(element) { let parent = getParentNode(element); - // In JSDOM, if we're inside shadow DOM, then parentNode - // can be null. We just simulate parent in this case. if (!parent || !parent.tagName) { parent = { namespaceURI: NAMESPACE, @@ -694,84 +549,47 @@ return false; } if (element.namespaceURI === SVG_NAMESPACE) { - // The only way to switch from HTML namespace to SVG - // is via <svg>. If it happens via any other tag, then - // it should be killed. if (parent.namespaceURI === HTML_NAMESPACE) { return tagName === 'svg'; } - // The only way to switch from MathML to SVG is via` - // svg if parent is either <annotation-xml> or MathML - // text integration points. if (parent.namespaceURI === MATHML_NAMESPACE) { return tagName === 'svg' && (parentTagName === 'annotation-xml' || MATHML_TEXT_INTEGRATION_POINTS[parentTagName]); } - // We only allow elements that are defined in SVG - // spec. All others are disallowed in SVG namespace. return Boolean(ALL_SVG_TAGS[tagName]); } if (element.namespaceURI === MATHML_NAMESPACE) { - // The only way to switch from HTML namespace to MathML - // is via <math>. If it happens via any other tag, then - // it should be killed. if (parent.namespaceURI === HTML_NAMESPACE) { return tagName === 'math'; } - // The only way to switch from SVG to MathML is via - // <math> and HTML integration points if (parent.namespaceURI === SVG_NAMESPACE) { return tagName === 'math' && HTML_INTEGRATION_POINTS[parentTagName]; } - // We only allow elements that are defined in MathML - // spec. All others are disallowed in MathML namespace. return Boolean(ALL_MATHML_TAGS[tagName]); } if (element.namespaceURI === HTML_NAMESPACE) { - // The only way to switch from SVG to HTML is via - // HTML integration points, and from MathML to HTML - // is via MathML text integration points if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) { return false; } if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) { return false; } - // We disallow tags that are specific for MathML - // or SVG and should never appear in HTML namespace return !ALL_MATHML_TAGS[tagName] && (COMMON_SVG_AND_HTML_ELEMENTS[tagName] || !ALL_SVG_TAGS[tagName]); } - // For XHTML and XML documents that support custom namespaces if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && ALLOWED_NAMESPACES[element.namespaceURI]) { return true; } - // The code should never reach this place (this means - // that the element somehow got namespace that is not - // HTML, SVG, MathML or allowed via ALLOWED_NAMESPACES). - // Return false just in case. return false; }; - /** - * _forceRemove - * - * @param node a DOM node - */ const _forceRemove = function _forceRemove(node) { arrayPush(DOMPurify.removed, { element: node }); try { - // eslint-disable-next-line unicorn/prefer-dom-node-remove getParentNode(node).removeChild(node); } catch (_) { remove(node); } }; - /** - * _removeAttribute - * - * @param name an Attribute name - * @param element a DOM node - */ const _removeAttribute = function _removeAttribute(name, element) { try { arrayPush(DOMPurify.removed, { @@ -785,7 +603,6 @@ }); } element.removeAttribute(name); - // We void attribute values for unremovable "is" attributes if (name === 'is') { if (RETURN_DOM || RETURN_DOM_FRAGMENT) { try { @@ -798,82 +615,47 @@ } } }; - /** - * _initDocument - * - * @param dirty - a string of dirty markup - * @return a DOM, filled with the dirty markup - / const _initDocument = function _initDocument(dirty) { - / Create a HTML document / let doc = null; let leadingWhitespace = null; if (FORCE_BODY) { dirty = '<remove></remove>' + dirty; } else { - / If FORCE_BODY isn't used, leading whitespace needs to be preserved manually / const matches = stringMatch(dirty, /^[\r\n\t ]+/); leadingWhitespace = matches && matches[0]; } if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && NAMESPACE === HTML_NAMESPACE) { - // Root of XHTML doc must contain xmlns declaration (see https://www.w3.org/TR/xhtml1/normative.html#strict) dirty = '<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>' + dirty + '</body></html>'; } const dirtyPayload = trustedTypesPolicy ? trustedTypesPolicy.createHTML(dirty) : dirty; - / - * Use the DOMParser API by default, fallback later if needs be - * DOMParser not work for svg when has multiple root element. - / if (NAMESPACE === HTML_NAMESPACE) { try { doc = new DOMParser().parseFromString(dirtyPayload, PARSER_MEDIA_TYPE); } catch (_) {} } - / Use createHTMLDocument in case DOMParser is not available / if (!doc || !doc.documentElement) { doc = implementation.createDocument(NAMESPACE, 'template', null); try { doc.documentElement.innerHTML = IS_EMPTY_INPUT ? emptyHTML : dirtyPayload; } catch (_) { - // Syntax error if dirtyPayload is invalid xml } } const body = doc.body || doc.documentElement; if (dirty && leadingWhitespace) { body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] || null); } - / Work on whole document or just its body */ if (NAMESPACE === HTML_NAMESPACE) { return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? 'html' : 'body')[0]; } return WHOLE_DOCUMENT ? doc.documentElement : body; }; - /** - * Creates a NodeIterator object that you can use to traverse filtered lists of nodes or elements in a document. - * - * @param root The root element or node to start traversing on. - * @return The created NodeIterator - */ const _createNodeIterator = function _createNodeIterator(root) { return createNodeIterator.call(root.ownerDocument || root, root, - // eslint-disable-next-line no-bitwise NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_PROCESSING_INSTRUCTION | NodeFilter.SHOW_CDATA_SECTION, null); }; - /** - * _isClobbered - * - * @param element element to check for clobbering attacks - * @return true if clobbered, false if safe - */ const _isClobbered = function _isClobbered(element) { return element instanceof HTMLFormElement && (typeof element.nodeName !== 'string' || typeof element.textContent !== 'string' || typeof element.removeChild !== 'function' || !(element.attributes instanceof NamedNodeMap) || typeof element.removeAttribute !== 'function' || typeof element.setAttribute !== 'function' || typeof element.namespaceURI !== 'string' || typeof element.insertBefore !== 'function' || typeof element.hasChildNodes !== 'function'); }; - /** - * Checks whether the given object is a DOM node. - * - * @param value object to check whether it's a DOM node - * @return true is object is a DOM node - */ const _isNode = function _isNode(value) { return typeof Node === 'function' && value instanceof Node; }; @@ -882,49 +664,31 @@ hook.call(DOMPurify, currentNode, data, CONFIG); }); } - /** - * _sanitizeElements - * - * @protect nodeName - * @protect textContent - * @protect removeChild - * @param currentNode to check for permission to exist - * @return true if node was killed, false if left alive - / const _sanitizeElements = function _sanitizeElements(currentNode) { let content = null; - / Execute a hook if present / _executeHooks(hooks.beforeSanitizeElements, currentNode, null); - / Check if element is clobbered or can clobber / if (_isClobbered(currentNode)) { _forceRemove(currentNode); return true; } - / Now let's check the element's type and name / const tagName = transformCaseFunc(currentNode.nodeName); - / Execute a hook if present / _executeHooks(hooks.uponSanitizeElement, currentNode, { tagName, allowedTags: ALLOWED_TAGS }); - / Detect mXSS attempts abusing namespace confusion / - if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w]/g, currentNode.innerHTML) && regExpTest(/<[/\w]/g, currentNode.textContent)) { + if (SAFE_FOR_XML && currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w!]/g, currentNode.innerHTML) && regExpTest(/<[/\w!]/g, currentNode.textContent)) { _forceRemove(currentNode); return true; } - / Remove any occurrence of processing instructions / if (currentNode.nodeType === NODE_TYPE.progressingInstruction) { _forceRemove(currentNode); return true; } - / Remove any kind of possibly harmful comments / if (SAFE_FOR_XML && currentNode.nodeType === NODE_TYPE.comment && regExpTest(/<[/\w]/g, currentNode.data)) { _forceRemove(currentNode); return true; } - / Remove element if anything forbids its presence / - if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) { - / Check if we have a custom element to handle / + if (!(EXTRA_ELEMENT_HANDLING.tagCheck instanceof Function && EXTRA_ELEMENT_HANDLING.tagCheck(tagName)) && (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName])) { if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) { if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) { return false; @@ -933,7 +697,6 @@ return false; } } - / Keep content except for bad-listed elements / if (KEEP_CONTENT && !FORBID_CONTENTS[tagName]) { const parentNode = getParentNode(currentNode) || currentNode.parentNode; const childNodes = getChildNodes(currentNode) || currentNode.childNodes; @@ -949,19 +712,15 @@ _forceRemove(currentNode); return true; } - / Check whether element has a valid namespace / if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) { _forceRemove(currentNode); return true; } - / Make sure that older browsers don't get fallback-tag mXSS / if ((tagName === 'noscript' || tagName === 'noembed' || tagName === 'noframes') && regExpTest(/<\/no(script|embed|frames)/i, currentNode.innerHTML)) { _forceRemove(currentNode); return true; } - / Sanitize element content to be template-safe / if (SAFE_FOR_TEMPLATES && currentNode.nodeType === NODE_TYPE.text) { - / Get the element's text content / content = currentNode.textContent; arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => { content = stringReplace(content, expr, ' '); @@ -973,73 +732,32 @@ currentNode.textContent = content; } } - / Execute a hook if present */ _executeHooks(hooks.afterSanitizeElements, currentNode, null); return false; }; - /** - * _isValidAttribute - * - * @param lcTag Lowercase tag name of containing element. - * @param lcName Lowercase attribute name. - * @param value Attribute value. - * @return Returns true if `value` is valid, otherwise false. - / - // eslint-disable-next-line complexity const _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) { - / Make sure attribute cannot clobber / if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) { return false; } - / Allow valid data-* attributes: At least one character after "-" - (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data--attributes) - XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804) - We don't need to check the value; it's always URI safe. / - if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) { + if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (EXTRA_ELEMENT_HANDLING.attributeCheck instanceof Function && EXTRA_ELEMENT_HANDLING.attributeCheck(lcName, lcTag)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) { if ( - // First condition does a very basic check if a) it's basically a valid custom element tagname AND - // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck - // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck - _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) || - // Alternative, second condition checks if it's an `is`-attribute, AND - // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck + _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName, lcTag)) || lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else { return false; } - /* Check value is safe. First, is attr inert? If so, is safe */ } else if (URI_SAFE_ATTRIBUTES[lcName]) ; else if (regExpTest(IS_ALLOWED_URI$1, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if ((lcName === 'src' || lcName === 'xlink:href' || lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]) ; else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if (value) { return false; } else ; return true; }; - /** - * _isBasicCustomElement - * checks if at least one dash is included in tagName, and it's not the first char - * for more sophisticated checking see https://github.com/sindresorhus/validate-element-name - * - * @param tagName name of the tag of the node to sanitize - * @returns Returns true if the tag name meets the basic criteria for a custom element, otherwise false. - */ const _isBasicCustomElement = function _isBasicCustomElement(tagName) { return tagName !== 'annotation-xml' && stringMatch(tagName, CUSTOM_ELEMENT); }; - /** - * _sanitizeAttributes - * - * @protect attributes - * @protect nodeName - * @protect removeAttribute - * @protect setAttribute - * - * @param currentNode to sanitize - / const _sanitizeAttributes = function _sanitizeAttributes(currentNode) { - / Execute a hook if present / _executeHooks(hooks.beforeSanitizeAttributes, currentNode, null); const { attributes } = currentNode; - / Check if we have attributes; if not we might have a text node / if (!attributes || _isClobbered(currentNode)) { return; } @@ -1051,7 +769,6 @@ forceKeepAttr: undefined }; let l = attributes.length; - / Go backwards over all attributes; safely remove bad ones / while (l--) { const attr = attributes[l]; const { @@ -1060,55 +777,47 @@ value: attrValue } = attr; const lcName = transformCaseFunc(name); - let value = name === 'value' ? attrValue : stringTrim(attrValue); - / Execute a hook if present / + const initValue = attrValue; + let value = name === 'value' ? initValue : stringTrim(initValue); hookEvent.attrName = lcName; hookEvent.attrValue = value; hookEvent.keepAttr = true; - hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set + hookEvent.forceKeepAttr = undefined; _executeHooks(hooks.uponSanitizeAttribute, currentNode, hookEvent); value = hookEvent.attrValue; - / Full DOM Clobbering protection via namespace isolation, - * Prefix id and name attributes with `user-content-` - / if (SANITIZE_NAMED_PROPS && (lcName === 'id' || lcName === 'name')) { - // Remove the attribute with this value _removeAttribute(name, currentNode); - // Prefix the value and later re-create the attribute with the sanitized value value = SANITIZE_NAMED_PROPS_PREFIX + value; } - / Work around a security issue with comments inside attributes / - if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title)/i, value)) { + if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title|textarea)/i, value)) { + _removeAttribute(name, currentNode); + continue; + } + if (lcName === 'attributename' && stringMatch(value, 'href')) { _removeAttribute(name, currentNode); continue; } - / Did the hooks approve of the attribute? / if (hookEvent.forceKeepAttr) { continue; } - / Remove attribute / - _removeAttribute(name, currentNode); - / Did the hooks approve of the attribute? / if (!hookEvent.keepAttr) { + _removeAttribute(name, currentNode); continue; } - / Work around a security issue in jQuery 3.0 / if (!ALLOW_SELF_CLOSE_IN_ATTR && regExpTest(/\/>/i, value)) { _removeAttribute(name, currentNode); continue; } - / Sanitize attribute content to be template-safe / if (SAFE_FOR_TEMPLATES) { arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => { value = stringReplace(value, expr, ' '); }); } - / Is `value` valid for this attribute? / const lcTag = transformCaseFunc(currentNode.nodeName); if (!_isValidAttribute(lcTag, lcName, value)) { + _removeAttribute(name, currentNode); continue; } - / Handle attributes that require Trusted Types / if (trustedTypesPolicy && typeof trustedTypes === 'object' && typeof trustedTypes.getAttributeType === 'function') { if (namespaceURI) ; else { switch (trustedTypes.getAttributeType(lcTag, lcName)) { @@ -1125,64 +834,49 @@ } } } - / Handle invalid data-* attribute set by try-catching it / - try { - if (namespaceURI) { - currentNode.setAttributeNS(namespaceURI, name, value); - } else { - / Fallback to setAttribute() for browser-unrecognized namespaces e.g. "x-schema". / - currentNode.setAttribute(name, value); - } - if (_isClobbered(currentNode)) { - _forceRemove(currentNode); - } else { - arrayPop(DOMPurify.removed); + if (value !== initValue) { + try { + if (namespaceURI) { + currentNode.setAttributeNS(namespaceURI, name, value); + } else { + currentNode.setAttribute(name, value); + } + if (_isClobbered(currentNode)) { + _forceRemove(currentNode); + } else { + arrayPop(DOMPurify.removed); + } + } catch (_) { + _removeAttribute(name, currentNode); } - } catch (_) {} + } } - / Execute a hook if present */ _executeHooks(hooks.afterSanitizeAttributes, currentNode, null); }; - /** - * _sanitizeShadowDOM - * - * @param fragment to iterate over recursively - / const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) { let shadowNode = null; const shadowIterator = _createNodeIterator(fragment); - / Execute a hook if present / _executeHooks(hooks.beforeSanitizeShadowDOM, fragment, null); while (shadowNode = shadowIterator.nextNode()) { - / Execute a hook if present / _executeHooks(hooks.uponSanitizeShadowNode, shadowNode, null); - / Sanitize tags and elements / _sanitizeElements(shadowNode); - / Check attributes next / _sanitizeAttributes(shadowNode); - / Deep shadow DOM detected / if (shadowNode.content instanceof DocumentFragment) { _sanitizeShadowDOM(shadowNode.content); } } - / Execute a hook if present / _executeHooks(hooks.afterSanitizeShadowDOM, fragment, null); }; - // eslint-disable-next-line complexity DOMPurify.sanitize = function (dirty) { let cfg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; let body = null; let importedNode = null; let currentNode = null; let returnNode = null; - / Make sure we have a string to sanitize. - DO NOT return early, as this will return the wrong type if - the user has requested a DOM object rather than a string / IS_EMPTY_INPUT = !dirty; if (IS_EMPTY_INPUT) { dirty = ''); importedNode = body.ownerDocument.importNode(dirty, true); if (importedNode.nodeType === NODE_TYPE.element && importedNode.nodeName === 'BODY') { - / Node is already a body, use as is / body = importedNode; } else if (importedNode.nodeName === 'HTML') { body = importedNode; } else { - // eslint-disable-next-line unicorn/prefer-dom-node-append body.appendChild(importedNode); } } else { - / Exit directly if we have nothing to do / if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT && - // eslint-disable-next-line unicorn/prefer-includes dirty.indexOf('<') === -1) { return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(dirty) : dirty; } - / Initialize the document to work on / body = _initDocument(dirty); - / Check we have a DOM node from the data / if (!body) { return RETURN_DOM ? null : RETURN_TRUSTED_TYPE ? emptyHTML : ''; } } - / Remove first element node (ours) if FORCE_BODY is set / if (body && FORCE_BODY) { _forceRemove(body.firstChild); } - / Get node iterator / const nodeIterator = _createNodeIterator(IN_PLACE ? dirty : body); - / Now start iterating over the created document / while (currentNode = nodeIterator.nextNode()) { - / Sanitize tags and elements / _sanitizeElements(currentNode); - / Check attributes next / _sanitizeAttributes(currentNode); - / Shadow DOM detected, sanitize it / if (currentNode.content instanceof DocumentFragment) { _sanitizeShadowDOM(currentNode.content); } } - / If we sanitized `dirty` in-place, return it. / if (IN_PLACE) { return dirty; } - / Return sanitized string or DOM / if (RETURN_DOM) { if (RETURN_DOM_FRAGMENT) { returnNode = createDocumentFragment.call(body.ownerDocument); while (body.firstChild) { - // eslint-disable-next-line unicorn/prefer-dom-node-append returnNode.appendChild(body.firstChild); } } else { returnNode = body; } if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.shadowrootmode) { - / - AdoptNode() is not used because internal state is not reset - (e.g. the past names map of a HTMLFormElement), this is safe - in theory but we would rather not risk another attack vector. - The state that is cloned by importNode() is explicitly defined - by the specs. - / returnNode = importNode.call(originalDocument, returnNode, true); } return returnNode; } let serializedHTML = WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML; - / Serialize doctype if allowed / if (WHOLE_DOCUMENT && ALLOWED_TAGS['!doctype'] && body.ownerDocument && body.ownerDocument.doctype && body.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, body.ownerDocument.doctype.name)) { serializedHTML = '<!DOCTYPE ' + body.ownerDocument.doctype.name + '>\n' + serializedHTML; } - / Sanitize final string template-safe / if (SAFE_FOR_TEMPLATES) { arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => { serializedHTML = stringReplace(serializedHTML, expr, ' '); @@ -1310,7 +973,6 @@ SET_CONFIG = false; }; DOMPurify.isValidAttribute = function (tag, attr, value) { - / Initialize shared config vars if necessary. / if (!CONFIG) { _parseConfig({}); } @@ -1346,49 +1008,12 @@ })); -/ - // JavaScript for Able Player - - // HTML5 Media API: - // http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement - // http://dev.w3.org/html5/spec-author-view/video.html - - // W3C API Test Page: - // http://www.w3.org/2010/05/video/mediaevents.html - - // YouTube Player API for iframe Embeds - https://developers.google.com/youtube/iframe_api_reference - - // YouTube Player Parameters - https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 - - // YouTube Data API - https://developers.google.com/youtube/v3 - - // Vimeo Player API - https://github.com/vimeo/player.js - - // Google API Client Library for JavaScript - https://developers.google.com/api-client-library/javascript/dev/dev_jscript - - // Google API Explorer: YouTube services and methods - https://developers.google.com/apis-explorer/#s/youtube/v3/ - - // Web Speech API (Speech Synthesis) - // https://w3c.github.io/speech-api/#tts-section - // https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis -/ - -/jslint node: true, browser: true, white: true, indent: 2, unparam: true, plusplus: true / -/global $, jQuery / "use strict"; -// maintain an array of Able Player instances for use globally (e.g., for keeping prefs in sync) var AblePlayerInstances = []; (function ($) { $(function () { - $('video, audio').each(function (index, element) { if ($(element).data('able-player') !== undefined) { AblePlayerInstances.push(new AblePlayer($(this),$(element))); @@ -1396,28 +1021,20 @@ var AblePlayerInstances = []; }); }); - // YouTube player support; pass ready event to jQuery so we can catch in player. window.onYouTubeIframeAPIReady = function() { AblePlayer.youTubeIframeAPIReady = true; $('body').trigger('youTubeIframeAPIReady', []); }; - // If there is only one player on the page, dispatch global keydown events to it - // Otherwise, keydowwn events are handled locally (see event.js > handleEventListeners()) $(window).on('keydown',function(e) { if (AblePlayer.nextIndex === 1) { AblePlayer.lastCreated.onPlayerKeyPress(e); } }); - // Construct an AblePlayer object - // Parameters are: - // media - jQuery selector or element identifying the media. window.AblePlayer = function(media) { - var thisObj = this; - // Keep track of the last player created for use with global events. AblePlayer.lastCreated = this; this.media = media; @@ -1426,85 +1043,39 @@ var AblePlayerInstances = []; return; } - /////////////////////////////// - // - // Default variables assignment - // - /////////////////////////////// - // The following variables CAN be overridden with HTML attributes - - // autoplay (Boolean; if present always resolves to true, regardless of value) if ($(media).attr('autoplay') !== undefined) { - this.autoplay = true; // this value remains constant - this.okToPlay = true; // this value can change dynamically - } - else { + this.autoplay = true; + this.okToPlay = true; + } else { this.autoplay = false; this.okToPlay = false; } - - // loop (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('loop') !== undefined) { - this.loop = true; - } - else { - this.loop = false; - } - // playsinline (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('playsinline') !== undefined) { - this.playsInline = '1'; // this value gets passed to YT.Player contructor in youtube.js - } - else { - this.playsInline = '0'; - } + this.loop = ($(media).attr('loop') !== undefined) ? true : false; - // poster (Boolean, indicating whether media element has a poster attribute) - if ($(media).attr('poster')) { - this.hasPoster = true; - } - else { - this.hasPoster = false; - } + this.playsInline = ($(media).attr('playsinline') !== undefined) ? '1' : '0'; - // get height and width attributes, if present - // and add them to variables - // Not currently used, but might be useful for resizing player - if ($(media).attr('width')) { - this.width = $(media).attr('width'); - } - if ($(media).attr('height')) { - this.height = $(media).attr('height'); - } + this.hasPoster = ( $(media).attr('poster') || $(media).data('poster') ) ? true : false; - // start-time - if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) { - this.startTime = $(media).data('start-time'); - } - else { - this.startTime = 0; - } + this.audioPoster = $(media).data('poster'); + this.audioPosterAlt = $(media).data('poster-alt' ); - // debug - if ($(media).data('debug') !== undefined && $(media).data('debug') !== false) { - this.debug = true; - } - else { - this.debug = false; - } + this.width = $(media).attr('width') ?? 0; + this.height = $(media).attr('height') ?? 0; + + var startTime = $(media).data('start-time'); + var isNumeric = ( typeof startTime === 'number' || ( typeof startTime === 'string' && value.trim() !== '' && ! isNaN(value) && isFinite( Number(value) ) ) ) ? true : false; + this.startTime = ( startTime !== undefined && isNumeric ) ? startTime : 0; + + this.debug = ($(media).data('debug') !== undefined && $(media).data('debug') !== false) ? true : false; - // Path to root directory of Able Player code if ($(media).data('root-path') !== undefined) { - // add a trailing slash if there is none this.rootPath = $(media).data('root-path').replace(/\/?$/, '/'); - } - else { + } else { this.rootPath = this.getRootPath(); } - // Volume - // Range is 0 to 10. Best not to crank it to avoid overpowering screen readers this.defaultVolume = 7; if ($(media).data('volume') !== undefined && $(media).data('volume') !== "") { var volume = $(media).data('volume'); @@ -1514,473 +1085,273 @@ var AblePlayerInstances = []; } this.volume = this.defaultVolume; - // Optional Buttons - // Buttons are added to the player controller if relevant media is present - // However, in some applications it might be undesirable to show buttons - // (e.g., if chapters or transcripts are provided in an external container) if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) { this.useChaptersButton = false; - } - else { + } else { this.useChaptersButton = true; } - - // Control whether text descriptions are read aloud - // set to "false" if the sole purpose of the WebVTT descriptions file - // is to integrate text description into the transcript - // set to "true" to write description text to a div - // This variable does not* control the method by which description is read. - // For that, see below (this.descMethod) + if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) { this.readDescriptionsAloud = false; - } - else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { - // support both singular and plural spelling of attribute + } else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { this.readDescriptionsAloud = false; - } - else { + } else { this.readDescriptionsAloud = true; } - // Method by which text descriptions are read - // valid values of data-desc-reader are: - // 'brower' (default) - text-based audio description is handled by the browser, if supported - // 'screenreader' - text-based audio description is always handled by screen readers - // The latter may be preferable by owners of websites in languages that are not well supported - // by the Web Speech API - if ($(media).data('desc-reader') == 'screenreader') { - this.descReader = 'screenreader'; - } - else { - this.descReader = 'browser'; - } + this.descVoices = []; - // Default state of captions and descriptions - // This setting is overridden by user preferences, if they exist - // values for data-state-captions and data-state-descriptions are 'on' or 'off' - if ($(media).data('state-captions') == 'off') { - this.defaultStateCaptions = 0; // off - } - else { - this.defaultStateCaptions = 1; // on by default - } - if ($(media).data('state-descriptions') == 'on') { - this.defaultStateDescriptions = 1; // on - } - else { - this.defaultStateDescriptions = 0; // off by default - } + this.descReader = ($(media).data('desc-reader') == 'screenreader') ? 'screenreader' : 'browser'; - // Default setting for prefDescPause - // Extended description (i.e., pausing during description) is on by default - // but this settings give website owners control over that - // since they know the nature of their videos, and whether pausing is necessary - // This setting is overridden by user preferences, if they exist - if ($(media).data('desc-pause-default') == 'off') { - this.defaultDescPause = 0; // off - } - else { - this.defaultDescPause = 1; // on by default - } + this.defaultStateCaptions = ($(media).data('state-captions') == 'off') ? 0 : 1; + this.defaultStateDescriptions = ($(media).data('state-descriptions') == 'on') ? 1 : 0; + + this.defaultDescPause = ($(media).data('desc-pause-default') == 'off') ? 0 : 1; - // Headings - // By default, an off-screen heading is automatically added to the top of the media player - // It is intelligently assigned a heading level based on context, via misc.js > getNextHeadingLevel() - // Authors can override this behavior by manually assigning a heading level using data-heading-level - // Accepted values are 1-6, or 0 which indicates "no heading" - // (i.e., author has already hard-coded a heading before the media player; Able Player doesn't need to do this) if ($(media).data('heading-level') !== undefined && $(media).data('heading-level') !== "") { var headingLevel = $(media).data('heading-level'); - if (/^[0-6]$/.test(headingLevel)) { // must be a valid HTML heading level 1-6; or 0 + if (/^[0-6]$/.test(headingLevel)) { this.playerHeadingLevel = headingLevel; } } - // Transcripts - // There are three types of interactive transcripts. - // In descending of order of precedence (in case there are conflicting tags), they are: - // 1. "manual" - A manually coded external transcript (requires data-transcript-src) - // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div) - // 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button - // If data-include-transcript="false", there is no "popup" transcript - - if ($(media).data('transcript-div') !== undefined && $(media).data('transcript-div') !== "") { - this.transcriptDivLocation = $(media).data('transcript-div'); - } - else { + var transcriptDivLocation = $(media).data('transcript-div'); + if ( transcriptDivLocation !== undefined && transcriptDivLocation !== "" && null !== document.getElementById( transcriptDivLocation ) ) { + this.transcriptDivLocation = transcriptDivLocation; + } else { this.transcriptDivLocation = null; } - if ($(media).data('include-transcript') !== undefined && $(media).data('include-transcript') === false) { - this.hideTranscriptButton = true; - } - else { - this.hideTranscriptButton = null; - } + var includeTranscript = $(media).data('include-transcript'); + this.hideTranscriptButton = ( includeTranscript !== undefined && includeTranscript === false) ? true : false; this.transcriptType = null; if ($(media).data('transcript-src') !== undefined) { this.transcriptSrc = $(media).data('transcript-src'); if (this.transcriptSrcHasRequiredParts()) { this.transcriptType = 'manual'; - } - else { - - } - } - else if ($(media).find('track[kind="captions"], track[kind="subtitles"]').length > 0) { - // required tracks are present. COULD automatically generate a transcript - if (this.transcriptDivLocation) { - this.transcriptType = 'external'; - } - else { - this.transcriptType = 'popup'; - } - } + } else { - // In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript - // If false (default), line breaks are are removed from transcripts in order to provide a more seamless reading experience - // If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem - if ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) { - this.lyricsMode = true; - } - else { - this.lyricsMode = false; + } + } else if ($(media).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length > 0) { + this.transcriptType = (this.transcriptDivLocation) ? 'external' : 'popup'; } - // Transcript Title + this.lyricsMode = ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) ? true : false; + if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") { this.transcriptTitle = $(media).data('transcript-title'); } - else { - // do nothing. The default title will be defined later (see transcript.js) - } - // Captions - // data-captions-position can be used to set the default captions position - // this is only the default, and can be overridden by user preferences - // valid values of data-captions-position are 'below' and 'overlay' - if ($(media).data('captions-position') === 'overlay') { - this.defaultCaptionsPosition = 'overlay'; - } - else { // the default, even if not specified - this.defaultCaptionsPosition = 'below'; + var signDivLocation = $(media).data('sign-div'); + if ( signDivLocation !== undefined && signDivLocation !== "" && null !== document.getElementById( signDivLocation ) ) { + this.$signDivLocation = $( '#' + signDivLocation ); + } else { + this.$signDivLocation = null; } - // Chapters - if ($(media).data('chapters-div') !== undefined && $(media).data('chapters-div') !== "") { - this.chaptersDivLocation = $(media).data('chapters-div'); + this.defaultCaptionsPosition = ($(media).data('captions-position') === 'overlay') ? 'overlay' : 'below'; + + var chaptersDiv = $(media).data('chapters-div'); + if ( chaptersDiv !== undefined && chaptersDiv !== "") { + this.chaptersDivLocation = chaptersDiv; } if ($(media).data('chapters-title') !== undefined) { - // NOTE: empty string is valid; results in no title being displayed this.chaptersTitle = $(media).data('chapters-title'); } - if ($(media).data('chapters-default') !== undefined && $(media).data('chapters-default') !== "") { - this.defaultChapter = $(media).data('chapters-default'); - } - else { - this.defaultChapter = null; - } + var defaultChapter = $(media).data('chapters-default'); + this.defaultChapter = ( defaultChapter !== undefined && defaultChapter !== "") ? defaultChapter : null; - // Slower/Faster buttons - // valid values of data-speed-icons are 'animals' (default) and 'arrows' - // 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows - if ($(media).data('speed-icons') === 'arrows') { - this.speedIcons = 'arrows'; - } - else { - this.speedIcons = 'animals'; - } + this.speedIcons = ($(media).data('speed-icons') === 'arrows') ? 'arrows' : 'animals'; - // Seekbar - // valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters' - if ($(media).data('seekbar-scope') === 'chapter' || $(media).data('seekbar-scope') === 'chapters') { - this.seekbarScope = 'chapter'; - } - else { - this.seekbarScope = 'video'; - } + var seekbarScope = $(media).data('seekbar-scope'); + this.seekbarScope = ( seekbarScope === 'chapter' || seekbarScope === 'chapters') ? 'chapter' : 'video'; - // YouTube - if ($(media).data('youtube-id') !== undefined && $(media).data('youtube-id') !== "") { - this.youTubeId = this.getYouTubeId($(media).data('youtube-id')); + var youTubeId = $(media).data('youtube-id'); + if ( youTubeId !== undefined && youTubeId !== "") { + this.youTubeId = this.getYouTubeId(youTubeId); + if ( ! this.hasPoster ) { + let poster = this.getYouTubePosterUrl(this.youTubeId,'640'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('youtube-desc-id') !== undefined && $(media).data('youtube-desc-id') !== "") { - this.youTubeDescId = this.getYouTubeId($(media).data('youtube-desc-id')); + var youTubeDescId = $(media).data('youtube-desc-id'); + if ( youTubeDescId !== undefined && youTubeDescId !== "") { + this.youTubeDescId = this.getYouTubeId(youTubeDescId); } - if ($(media).data('youtube-nocookie') !== undefined && $(media).data('youtube-nocookie')) { - this.youTubeNoCookie = true; - } - else { - this.youTubeNoCookie = false; + var youTubeSignId = $(media).data('youtube-sign-src'); + if ( youTubeSignId !== undefined && youTubeSignId !== "") { + this.youTubeSignId = this.getYouTubeId(youTubeSignId); } - // Vimeo - if ($(media).data('vimeo-id') !== undefined && $(media).data('vimeo-id') !== "") { - this.vimeoId = this.getVimeoId($(media).data('vimeo-id')); - } - if ($(media).data('vimeo-desc-id') !== undefined && $(media).data('vimeo-desc-id') !== "") { - this.vimeoDescId = this.getVimeoId($(media).data('vimeo-desc-id')); - } + var youTubeNoCookie = $(media).data('youtube-nocookie'); + this.youTubeNoCookie = (youTubeNoCookie !== undefined && youTubeNoCookie) ? true : false; - // Skin - // valid values of data-skin are: - // 'legacy' (default), two rows of controls; seekbar positioned in available space within top row - // '2020', all buttons in one row beneath a full-width seekbar - if ($(media).data('skin') == '2020') { - this.skin = '2020'; + var vimeoId = $(media).data('vimeo-id'); + if ( vimeoId !== undefined && vimeoId !== "") { + this.vimeoId = this.getVimeoId(vimeoId); + if ( ! this.hasPoster ) { + let poster = thisObj.getVimeoPosterUrl(this.vimeoId,'1200'); + $(media).attr( 'poster', poster ); + } } - else { - this.skin = 'legacy'; + var vimeoDescId = $(media).data('vimeo-desc-id'); + if ( vimeoDescId !== undefined && vimeoDescId !== "") { + this.vimeoDescId = this.getVimeoId(vimeoDescId); } - // Size - // width of Able Player is determined using the following order of precedence: - // 1. data-width attribute - // 2. width attribute (for video or audio, although it is not valid HTML for audio) - // 3. Intrinsic size from video (video only, determined later) + this.skin = ($(media).data('skin') == 'legacy') ? 'legacy' : '2020'; + if ($(media).data('width') !== undefined) { this.playerWidth = parseInt($(media).data('width')); - } - else if ($(media)[0].getAttribute('width')) { - // NOTE: jQuery attr() returns null for all invalid HTML attributes - // (e.g., width on <audio>) - // but it can be acessed via JavaScript getAttribute() + } else if ($(media)[0].getAttribute('width')) { this.playerWidth = parseInt($(media)[0].getAttribute('width')); - } - else { - this.playerWidth = null; + } else { + this.playerWidth = null; } - // Icon type - // By default, AblePlayer 3.0.33 and higher uses SVG icons for the player controls - // Fallback for browsers that don't support SVG is scalable icomoon fonts - // Ultimate fallback is images, if the user has a custom style sheet that overrides font-family - // Use data-icon-type to force controls to use either 'svg', 'font', or 'images' this.iconType = 'font'; this.forceIconType = false; if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") { var iconType = $(media).data('icon-type'); - if (iconType === 'font' || iconType == 'image' || iconType == 'svg') { + if (iconType === 'font' || iconType === 'image' || iconType === 'svg') { this.iconType = iconType; this.forceIconType = true; } } - if ($(media).data('allow-fullscreen') !== undefined && $(media).data('allow-fullscreen') === false) { - this.allowFullscreen = false; - } - else { - this.allowFullscreen = true; - } - // Define other variables that are used in fullscreen program flow - this.clickedFullscreenButton = false; - this.restoringAfterFullscreen = false; + var allowFullScreen = $(media).data('allow-fullscreen'); + this.allowFullscreen = (allowFullScreen !== undefined && allowFullScreen === false) ? false : true; + + this.clickedFullscreenButton = false; + this.restoringAfterFullscreen = false; - // Seek interval - // Number of seconds to seek forward or back with Rewind & Forward buttons - // Unless specified with data-seek-interval, the default value is re-calculated in initialize.js > setSeekInterval(); - // Calculation attempts to intelligently assign a reasonable interval based on media length this.defaultSeekInterval = 10; - this.useFixedSeekInterval = false; // will change to true if media has valid data-seek-interval attribute + this.useFixedSeekInterval = false; if ($(media).data('seek-interval') !== undefined && $(media).data('seek-interval') !== "") { var seekInterval = $(media).data('seek-interval'); - if (/^[1-9][0-9]$/.test(seekInterval)) { // must be a whole number greater than 0 + if (/^[1-9][0-9]$/.test(seekInterval)) { this.seekInterval = seekInterval; - this.useFixedSeekInterval = true; // do not override with calculuation + this.useFixedSeekInterval = true; } } - // Now Playing - // Shows "Now Playing:" plus the title of the current track above player - // Only used if there is a playlist - if ($(media).data('show-now-playing') !== undefined && $(media).data('show-now-playing') === false) { - this.showNowPlaying = false; - } - else { - this.showNowPlaying = true; - } + var showNowPlaying = $(media).data('show-now-playing'); + this.showNowPlaying = (showNowPlaying !== undefined && showNowPlaying === false) ? false : true; - // TTML support (experimental); enabled for testing with data-use-ttml (Boolean) if ($(media).data('use-ttml') !== undefined) { this.useTtml = true; - // The following may result in a console error. this.convert = require('xml-js'); - } - else { + } else { this.useTtml = false; } - // Fallback - // The data-test-fallback attribute can be used to test the fallback solution in any browser - if ($(media).data('test-fallback') !== undefined && $(media).data('test-fallback') !== false) { - if ($(media).data('test-fallback') == '2') { - this.testFallback = 2; // emulate browser that doesn't support HTML5 media - } - else { - this.testFallback = 1; // emulate failure to load Able Player - } - } - else { - this.testFallback = false; + var testFallback = $(media).data('test-fallback'); + if ( testFallback !== undefined && testFallback !== false) { + this.testFallback = ( testFallback == '2' ) ? 2 : 1; + } else { + this.testFallback = false; } - // Language - // Player language is determined given the following precedence: - // 1. The value of data-lang on the media element, if provided and a matching translation file is available - // 2. Lang attribute on <html> or <body>, if a matching translation file is available - // 3. English - // Final calculation occurs in translation.js > getTranslationText() - if ($(media).data('lang') !== undefined && $(media).data('lang') !== "") { - this.lang = $(media).data('lang').toLowerCase(); - } - else { - this.lang = null; - } + var lang = $(media).data('lang'); + this.lang = ( lang !== undefined && lang !== "") ? lang.toLowerCase() : null; - // Metadata Tracks - if ($(media).data('meta-type') !== undefined && $(media).data('meta-type') !== "") { - this.metaType = $(media).data('meta-type'); + var metaType = $(media).data('meta-type'); + if ( metaType !== undefined && metaType !== "") { + this.metaType = metaType; } - - if ($(media).data('meta-div') !== undefined && $(media).data('meta-div') !== "") { - this.metaDiv = $(media).data('meta-div'); + var metaDiv = $(media).data('meta-div'); + if ( metaDiv !== undefined && metaDiv !== "") { + this.metaDiv = metaDiv; } - // Search - // conducting a search requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - - this.searchDiv = $(media).data('search-div'); + var searchDiv = $(media).data('search-div'); + if ( searchDiv !== undefined && searchDiv !== "") { - // Search term (optional; could be assigned later in a JavaScript application) - if ($(media).data('search') !== undefined && $(media).data('search') !== "") { - this.searchString = $(media).data('search'); - } + this.searchDiv = searchDiv; - // Search Language - if ($(media).data('search-lang') !== undefined && $(media).data('search-lang') !== "") { - this.searchLang = $(media).data('search-lang'); - } - else { - this.searchLang = null; // will change to final value of this.lang in translation.js > getTranslationText() + var searchString = $(media).data('search'); + if ( searchString !== undefined && searchString !== "") { + this.searchString = searchString; } - // Search option: Ignore capitalization in search terms - if ($(media).data('search-ignore-caps') !== undefined && $(media).data('search-ignore-caps') !== false) { - this.searchIgnoreCaps = true; - } - else { - this.searchIgnoreCaps = false; - } + var searchLang = $(media).data('search-lang'); + this.searchLang = ( searchLang !== undefined && searchLang !== "") ? searchLang : null; - // conducting a search currently requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - this.searchString = $(media).data('search'); - this.searchDiv = $(media).data('search-div'); - } + var searchIgnoreCaps = $(media).data('search-ignore-caps'); + this.searchIgnoreCaps = ( searchIgnoreCaps !== undefined && searchIgnoreCaps !== false) ? true : false; } - // Hide controls when video starts playing - // They will reappear again when user presses a key or moves the mouse - // As of v4.0, controls are hidden automatically on playback in fullscreen mode if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) { this.hideControls = true; - this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode - } - else { + this.hideControlsOriginal = true; + } else { this.hideControls = false; this.hideControlsOriginal = false; } - // Steno mode - // Enable support for Able Player keyboard shortcuts in textaarea fields - // so users can control the player while transcribing if ($(media).data('steno-mode') !== undefined && $(media).data('steno-mode') !== false) { this.stenoMode = true; - // Add support for stenography in an iframe via data-steno-iframe-id if ($(media).data('steno-iframe-id') !== undefined && $(media).data('steno-iframe-id') !== "") { this.stenoFrameId = $(media).data('steno-iframe-id'); this.$stenoFrame = $('#' + this.stenoFrameId); if (!(this.$stenoFrame.length)) { - // iframe not found this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoMode = false; this.stenoFrameId = null; this.$stenoFrame = null; } - // Define built-in variables that CANNOT be overridden with HTML attributes this.setDefaults(); - //////////////////////////////////////// - // - // End assignment of default variables - // - //////////////////////////////////////// this.ableIndex = AblePlayer.nextIndex; AblePlayer.nextIndex += 1; this.title = $(media).attr('title'); - // populate translation object with localized versions of all labels and prompts - // use defer method to defer additional processing until text is retrieved this.tt = {}; var thisObj = this; - $.when(this.getTranslationText()).then( - function () { - if (thisObj.countProperties(thisObj.tt) > 50) { - // close enough to ensure that most text variables are populated - thisObj.setup(); - } - else { - // can't continue loading player with no text - thisObj.provideFallback(); - } + async function fetchTranslations(thisObj) { + try { + await thisObj.getTranslationText(); + thisObj.setup(); + } catch { + thisObj.provideFallback(); } - ). - fail(function() { - thisObj.provideFallback(); - }); + } + fetchTranslations(thisObj); }; - // Index to increment every time new player is created. AblePlayer.nextIndex = 0; AblePlayer.prototype.setup = function() { var thisObj = this; - this.initializing = true; // will remain true until entire sequence of function calls is complete + this.initializing = true; this.reinitialize().then(function () { if (!thisObj.player) { - // No player for this media, show last-line fallback. thisObj.provideFallback(); - } - else { + } else { thisObj.setupInstance().then(function () { thisObj.setupInstancePlaylist(); if (thisObj.hasPlaylist) { - // for playlists, recreatePlayer() is called from within cuePlaylistItem() - } - else { - thisObj.recreatePlayer().then(function() { + } else { + thisObj.recreatePlayer().then(function() { thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed + thisObj.playerCreated = true; }); } }); @@ -1991,7 +1362,6 @@ var AblePlayerInstances = []; AblePlayer.getActiveDOMElement = function () { var activeElement = document.activeElement; - // For shadow DOMs we need to keep digging down through the DOMs while (activeElement.shadowRoot && activeElement.shadowRoot.activeElement) { activeElement = activeElement.shadowRoot.activeElement; } @@ -2000,14 +1370,9 @@ var AblePlayerInstances = []; }; AblePlayer.localGetElementById = function(element, id) { - if (element.getRootNode) - { - // Use getRootNode() and querySelector() where supported (for shadow DOM support) + if (element.getRootNode) { return $(element.getRootNode().querySelector('#' + id)); - } - else - { - // If getRootNode is not supported it should be safe to use document.getElementById (since there is no shadow DOM support) + } else { return $(document.getElementById(id)); } }; @@ -2017,19 +1382,18 @@ var AblePlayerInstances = []; })(jQuery); (function ($) { - // Set default variable values. AblePlayer.prototype.setDefaults = function () { - this.playerCreated = false; // will set to true after recreatePlayer() is complete the first time - this.playing = false; // will change to true after 'playing' event is triggered - this.paused = true; // will always be the opposite of this.playing (available for convenience) - this.clickedPlay = false; // will change to true temporarily if user clicks 'play' (or pause) - this.fullscreen = false; // will change to true if player is in full screen mode - this.swappingSrc = false; // will change to true temporarily while media source is being swapped - this.initializing = false; // will change to true temporarily while initPlayer() is processing - this.cueingPlaylistItems = false; // will change to true temporarily while cueing next playlist item - this.buttonWithFocus = null; // will change to 'previous' or 'next' if user clicks either of those buttons - this.speechEnabled = null; // will change either to 'true' in initSpeech(), or false if not supported + this.playerCreated = false; + this.playing = false; + this.paused = true; + this.clickedPlay = false; + this.fullscreen = false; + this.swappingSrc = false; + this.initializing = false; + this.cueingPlaylistItems = false; + this.buttonWithFocus = null; + this.speechEnabled = null; this.setIconColor(); this.setButtonImages(); @@ -2037,19 +1401,17 @@ var AblePlayerInstances = []; AblePlayer.prototype.getRootPath = function() { - // returns Able Player root path (assumes ableplayer.js is in /build, one directory removed from root) var scripts, i, scriptSrc, scriptFile, fullPath, ablePath, parentFolderIndex, rootPath; scripts= document.getElementsByTagName('script'); for (i=0; i < scripts.length; i++) { scriptSrc = scripts[i].src; scriptFile = scriptSrc.substring(scriptSrc.lastIndexOf('/')); if (scriptFile.indexOf('ableplayer') !== -1) { - // this is the ableplayerscript - fullPath = scriptSrc.split('?')[0]; // remove any ? params + fullPath = scriptSrc.split('?')[0]; break; } } - ablePath= fullPath.split('/').slice(0, -1).join('/'); // remove last filename part of path + ablePath= fullPath.split('/').slice(0, -1).join('/'); parentFolderIndex = ablePath.lastIndexOf('/'); rootPath = ablePath.substring(0, parentFolderIndex) + '/'; return rootPath; @@ -2057,15 +1419,7 @@ var AblePlayerInstances = []; AblePlayer.prototype.setIconColor = function() { - // determine the best color choice (white or black) for icons, - // given the background-color of their container elements - // Source for relative luminance formula: - // https://en.wikipedia.org/wiki/Relative_luminance - // We need to know the color before creating the element - // so the element doesn't exist yet when this function is called - // therefore, need to create a temporary element then remove it after color is determined - // Temp element must be added to the DOM or WebKit can't retrieve its CSS properties var $elements, i, $el, bgColor, rgb, red, green, blue, luminance, iconColor; @@ -2075,32 +1429,23 @@ var AblePlayerInstances = []; $el = $('<div>', { 'class': 'able-controller' }).hide(); - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { $el = $('<div>', { 'class': 'able-window-toolbar' }).hide(); } $('body').append($el); bgColor = $el.css('background-color'); - // bgColor is a string in the form 'rgb(R, G, B)', perhaps with a 4th item for alpha; - // split the 3 or 4 channels into an array rgb = bgColor.replace(/[^\d,]/g, '').split(','); red = rgb[0]; green = rgb[1]; blue = rgb[2]; luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue); - // range is 1 - 255; therefore 125 is the tipping point - if (luminance < 125) { // background is dark - iconColor = 'white'; - } - else { // background is light - iconColor = 'black'; - } + iconColor = (luminance < 125) ? 'white' : 'black'; + if ($elements[i] === 'controller') { this.iconColor = iconColor; - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { this.toolbarIconColor = iconColor; } $el.remove(); @@ -2109,24 +1454,19 @@ var AblePlayerInstances = []; AblePlayer.prototype.setButtonImages = function() { - // NOTE: volume button images are now set dynamically within volume.js this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/'; this.playButtonImg = this.imgPath + 'play.png'; this.pauseButtonImg = this.imgPath + 'pause.png'; - this.restartButtonImg = this.imgPath + 'restart.png'; - this.rewindButtonImg = this.imgPath + 'rewind.png'; this.forwardButtonImg = this.imgPath + 'forward.png'; - this.previousButtonImg = this.imgPath + 'previous.png'; this.nextButtonImg = this.imgPath + 'next.png'; if (this.speedIcons === 'arrows') { this.fasterButtonImg = this.imgPath + 'slower.png'; this.slowerButtonImg = this.imgPath + 'faster.png'; - } - else if (this.speedIcons === 'animals') { + } else if (this.speedIcons === 'animals') { this.fasterButtonImg = this.imgPath + 'rabbit.png'; this.slowerButtonImg = this.imgPath + 'turtle.png'; } @@ -2136,19 +1476,14 @@ var AblePlayerInstances = []; this.signButtonImg = this.imgPath + 'sign.png'; this.transcriptButtonImg = this.imgPath + 'transcript.png'; this.descriptionsButtonImg = this.imgPath + 'descriptions.png'; - this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png'; this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png'; - this.prefsButtonImg = this.imgPath + 'preferences.png'; this.helpButtonImg = this.imgPath + 'help.png'; }; - AblePlayer.prototype.getSvgData = function(button) { + AblePlayer.prototype.getIconData = function(button) { - // returns array of values for creating <svg> tag for specified button - // 0 = <svg> viewBox attribute - // 1 = <path> d (description) attribute var svg = Array(); switch (button) { @@ -2156,185 +1491,211 @@ var AblePlayerInstances = []; case 'play': svg[0] = '0 0 16 20'; svg[1] = 'M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z'; + svg[2] = 'icon-play'; + svg[3] = this.playButtonImg; break; case 'pause': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'stop': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-pause'; + svg[3] = this.pauseButtonImg; break; case 'restart': svg[0] = '0 0 20 20'; svg[1] = 'M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z'; + svg[2] = 'icon-restart'; + svg[3] = this.restartButtonImg; break; case 'rewind': svg[0] = '0 0 20 20'; svg[1] = 'M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z'; + svg[2] = 'icon-rewind'; + svg[3] = this.rewindButtonImg; break; case 'forward': svg[0] = '0 0 20 20'; svg[1] = 'M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z'; + svg[2] = 'icon-forward'; + svg[3] = this.forwardButtonImg; break; case 'previous': svg[0] = '0 0 20 20'; svg[1] = 'M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z'; + svg[2] = 'icon-previous'; + svg[3] = this.previousButtonImg; break; case 'next': svg[0] = '0 0 20 20'; svg[1] = 'M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z'; + svg[2] = 'icon-next'; + svg[3] = this.nextButtonImg; break; case 'slower': - svg[0] = '0 0 20 20'; + svg[0] = '0 0 11 20'; svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z'; + svg[2] = 'icon-slower'; + svg[3] = this.slowerButtonImg; break; case 'faster': svg[0] = '0 0 11 20'; svg[1] = 'M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-faster'; + svg[3] = this.fasterButtonImg; break; case 'turtle': svg[0] = '0 0 20 20'; svg[1] = 'M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z'; + svg[2] = 'icon-turtle'; + svg[3] = this.slowerButtonImg; break; case 'rabbit': svg[0] = '0 0 20 20'; svg[1] = 'M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z'; + svg[2] = 'icon-rabbit'; + svg[3] = this.fasterButtonImg; break; case 'ellipsis': svg[0] = '0 0 20 20'; svg[1] = 'M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z'; + svg[2] = 'icon-ellipsis'; + svg[3] = false; break; case 'pipe': svg[0] = '0 0 20 20'; svg[1] = 'M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z'; + svg[2] = 'icon-pipe'; + svg[3] = false; break; case 'captions': svg[0] = '0 0 20 20'; svg[1] = 'M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z'; + svg[2] = 'icon-captions'; + svg[3] = this.captionsButtonImg; break; case 'descriptions': svg[0] = '0 0 20 20'; svg[1] = 'M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z'; + svg[2] = 'icon-descriptions'; + svg[3] = this.descriptionsButtonImg; break; case 'sign': svg[0] = '0 0 20 20'; svg[1] = 'M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z'; + svg[2] = 'icon-sign'; + svg[3] = this.signButtonImg; break; case 'mute': case 'volume-mute': svg[0] = '0 0 20 20'; svg[1] = 'M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z'; + svg[2] = 'icon-volume-mute'; + svg[3] = this.imgPath + 'volume-mute.png'; break; case 'volume-soft': svg[0] = '0 0 20 20'; svg[1] = 'M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-soft'; + svg[3] = this.imgPath + 'volume-soft.png'; break; case 'volume-medium': svg[0] = '0 0 20 20'; svg[1] = 'M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-medium'; + svg[3] = this.imgPath + 'volume-medium.png'; break; case 'volume-loud': svg[0] = '0 0 21 20'; svg[1] = 'M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-loud'; + svg[3] = this.imgPath + 'volume-loud.png'; break; case 'chapters': svg[0] = '0 0 20 20'; svg[1] = 'M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z'; + svg[2] = 'icon-chapters'; + svg[3] = this.chaptersButtonImg; break; case 'transcript': svg[0] = '0 0 20 20'; svg[1] = 'M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z'; + svg[2] = 'icon-transcript'; + svg[3] = this.transcriptButtonImg; break; case 'preferences': svg[0] = '0 0 20 20'; svg[1] = 'M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z'; + svg[2] = 'icon-preferences'; + svg[3] = this.prefsButtonImg; break; case 'close': svg[0] = '0 0 16 20'; svg[1] = 'M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z'; + svg[2] = 'icon-close'; + svg[3] = null; break; case 'fullscreen-expand': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z'; + svg[2] = 'icon-fullscreen-expand'; + svg[3] = this.fullscreenExpandButtonImg; break; case 'fullscreen-collapse': svg[0] = '0 0 20 20'; svg[1] = 'M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'help': - svg[0] = '0 0 11 20'; - svg[1] = 'M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z'; + svg[2] = 'icon-fullscreen-collapse'; + svg[3] = this.fullscreenCollapseButtonImg; break; } return svg; }; - // Initialize player based on data on page. - // This sets some variables, but does not modify anything. Safe to call multiple times. - // Can call again after updating this.media so long as new media element has the same ID. AblePlayer.prototype.reinitialize = function () { - var deferred, promise, thisObj, errorMsg, srcFile; + var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - // if F12 Developer Tools aren't open in IE (through 9, no longer a problen in IE10) - // console.log causes an error - can't use debug without a console to log messages to - if (! window.console) { - this.debug = false; - } - this.startedPlaying = false; - // TODO: Move this setting to cookie. this.autoScrollTranscript = true; - //this.autoScrollTranscript = this.getCookie(autoScrollTranscript); // (doesn't work) - // Bootstrap from this.media possibly being an ID or other selector. this.$media = $(this.media).first(); this.media = this.$media[0]; - // Set media type to 'audio' or 'video'; this determines some of the behavior of player creation. if (this.$media.is('audio')) { this.mediaType = 'audio'; - } - else if (this.$media.is('video')) { + } else if (this.$media.is('video')) { this.mediaType = 'video'; - } - else { - // Able Player was initialized with some element other than <video> or <audio> + } else { this.provideFallback(); - deferred.fail(); + deferred.reject(); return promise; } @@ -2342,7 +1703,6 @@ var AblePlayerInstances = []; this.player = this.getPlayer(); if (!this.player) { - // an error was generated in getPlayer() this.provideFallback(); } this.setIconType(); @@ -2353,108 +1713,30 @@ var AblePlayerInstances = []; AblePlayer.prototype.setPlayerSize = function(width, height) { - var mediaId = this.$media.attr('id'); - - // Called again after width and height are known - - if (this.mediaType === 'audio') { - if (this.playerWidth) { - this.$ableWrapper.css('width',this.playerWidth + 'px'); - } - } - else if (width > 0 && height > 0) { - this.playerWidth = width; - this.playerHeight = height; - this.aspectRatio = height / width; + if (this.mediaType !== 'audio' && width > 0 && height > 0) { + this.playerWidth = width; + this.playerHeight = height; + this.aspectRatio = height / width; } }; AblePlayer.prototype.setIconType = function() { - // returns either "svg", "font" or "image" (in descending order of preference) - // Test for support of each type. If not supported, test the next type. - // last resort is image icons - - var $tempButton, $testButton, controllerFont; - if (this.forceIconType) { - // use value specified in data-icon-type return false; } - // test for SVG support - // Test this method widely; failed as expected on IE8 and below - // https://stackoverflow.com/a/27568129/744281 - if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) { - // browser supports SVG - this.iconType = 'svg'; - } - else { - // browser does NOT support SVG - // test whether browser can support icon fonts, and whether user has overriding the default style sheet - // which could cause problems with proper display of the icon fonts - if (window.getComputedStyle) { - - // webkit doesn't return calculated styles unless element has been added to the DOM - // and is visible (note: visibly clipped is considered "visible") - // use playpauseButton for font-family test if it exists; otherwise must create a new temp button - if ($('span.icon-play').length) { - $testButton = $('span.icon-play'); - } - else { - $tempButton = $('<span>',{ - 'class': 'icon-play able-clipped' - }); - $('body').append($tempButton); - $testButton = $tempButton; - } - - // the following retrieves the computed value of font-family - // tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works! - // tested in Chrome 49.x with Font Changer plugin - works! - // tested in IE with user-defined style sheet enables - works! - // It does NOT account for users who have "ignore font styles on web pages" checked in IE - // There is no known way to check for that ??? - controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family'); - if (typeof controllerFont !== 'undefined') { - if (controllerFont.indexOf('able') !== -1) { - this.iconType = 'font'; - } - else { - this.iconType = 'image'; - } - } - else { - // couldn't get computed font-family; use images to be safe - this.iconType = 'image'; - } - } - else { - // window.getComputedStyle is not supported (IE 8 and earlier) - // No known way to detect computed font - // The following retrieves the value from the style sheet, not the computed font - // controllerFont = $tempButton.get(0).currentStyle.fontFamily; - // It will therefore return "able", even if the user is overriding that with a custom style sheet - // To be safe, use images - this.iconType = 'image'; - } - if (typeof $tempButton !== 'undefined') { - $tempButton.remove(); - } - } + this.iconType = 'svg'; }; - // Perform one-time setup for this instance of player; called after player is first initialized. AblePlayer.prototype.setupInstance = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); if (this.$media.attr('id')) { this.mediaId = this.$media.attr('id'); - } - else { - // Ensure the base media element always has an ID. + } else { this.mediaId = "ableMediaId_" + this.ableIndex; this.$media.attr('id', this.mediaId); } @@ -2464,24 +1746,18 @@ var AblePlayerInstances = []; AblePlayer.prototype.setupInstancePlaylist = function() { - // find a matching playlist and set this.hasPlaylist - // if there is one, also set this.$playlist, this.playlistIndex, & this.playlistEmbed var thisObj = this; - this.hasPlaylist = false; // will change to true if a matching playlist is found + this.hasPlaylist = false; $('.able-playlist').each(function() { if ($(this).data('player') === thisObj.mediaId) { - // this is the playlist for the current player thisObj.hasPlaylist = true; - // If using an embedded player, we'll replace $playlist with the clone later. thisObj.$playlist = $(this).find('li'); - // check to see if list item has YouTube as its source - // if it does, inject a thumbnail from YouTube var $youTubeVideos = $(this).find('li[data-youtube-id]'); $youTubeVideos.each(function() { - var youTubeId = $(this).attr('data-youtube-id'); + var youTubeId = DOMPurify.sanitize( $(this).attr('data-youtube-id') ); var youTubePoster = thisObj.getYouTubePosterUrl(youTubeId,'120'); var $youTubeImg = $('<img>',{ 'src': youTubePoster, @@ -2490,11 +1766,9 @@ var AblePlayerInstances = []; $(this).find('button').prepend($youTubeImg); }); - // check to see if list item has Vimeo as its source - // if it does, inject a thumbnail from Vimeo var $vimeoVideos = $(this).find('li[data-vimeo-id]'); $vimeoVideos.each(function() { - var vimeoId = $(this).attr('data-youtube-id'); + var vimeoId = $(this).attr('data-vimeo-id'); var vimeoPoster = thisObj.getVimeoPosterUrl(vimeoId,'120'); var $vimeoImg = $('<img>',{ 'src': vimeoPoster, @@ -2503,51 +1777,30 @@ var AblePlayerInstances = []; $(this).find('button').prepend($vimeoImg); }); - // add accessibility to the list markup $(this).find('li span').attr('aria-hidden','true'); thisObj.playlistIndex = 0; var dataEmbedded = $(this).data('embedded'); - if (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) { - // embed playlist within player - thisObj.playlistEmbed = true; - } - else { - thisObj.playlistEmbed = false; - } + thisObj.playlistEmbed = (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) ? true : false; } }); if (this.hasPlaylist && this.loop) { - // browser will loop the current track in the playlist, rather than the playlist - // therefore, need to remove loop attribute from media element - // but keep this.loop as true and handle the playlist looping ourselves this.media.removeAttribute('loop'); } if (this.hasPlaylist && this.playlistEmbed) { - // Copy the playlist out of the dom, so we can reinject when we build the player. var parent = this.$playlist.parent(); this.$playlistDom = parent.clone(); parent.remove(); } if (this.hasPlaylist && this.$sources.length === 0) { - // no source elements were provided. Construct them from the first playlist item this.cuePlaylistItem(0); - // redefine this.$sources now that media contains one or more <source> elements this.$sources = this.$media.find('source'); } }; AblePlayer.prototype.recreatePlayer = function () { - // Creates the appropriate player for the current source. - // This function is called each time a new media instance is loaded - // e.g., - // User clicks on an item in a playlist - // User swaps to/from described version of video - // Blocks of code that only need to be executed once are controlled - // by this.playerCreated - // TODO: Ensure when recreating player that we carry over the mediaId if (!this.player) { console.log("Can't create player; no appropriate player type detected."); return; @@ -2555,38 +1808,33 @@ var AblePlayerInstances = []; var deferred, promise, thisObj, prefsGroups, i; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - this.playerDeleted = false; // reset after deletePlayer() + this.playerDeleted = false; - // set temp stopgap to prevent this function from executing again before finished - this.recreatingPlayer = true; + this.recreatingPlayer = true; if (!this.playerCreated) { - // only call these functions once this.loadCurrentPreferences(); this.injectPlayerCode(); - this.resizePlayer(this.media.videoWidth,this.media.videoHeight); + this.resizePlayer(this.media.videoWidth,this.media.videoHeight); } - this.getSampleDescriptionText(); + this.getSampleDescriptionText(); this.initSignLanguage(); this.initPlayer().then(function() { - thisObj.getTracks().then(function() { + thisObj.getTracks().then(function() { thisObj.initDescription().then(function() { thisObj.setupTracks().then(function() { - if (thisObj.hasClosedDesc) { - if (!thisObj.$descDiv || - (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { - // descDiv either doesn't exist, or exists in an orphaned state - // Either way, it needs to be rebuilt... + if (thisObj.hasClosedDesc) { + if (!thisObj.$descDiv || (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { thisObj.injectTextDescriptionArea(); } } @@ -2603,7 +1851,6 @@ var AblePlayerInstances = []; thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - thisObj.setFullscreen(false); if (typeof thisObj.volume === 'undefined') { thisObj.volume = thisObj.defaultVolume; @@ -2619,16 +1866,10 @@ var AblePlayerInstances = []; thisObj.initDefaultCaption(); } - // setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks - // This tells browsers to ignore the text tracks so Able Player can handle them - // However, timing is critical as browsers - especially Safari - tend to ignore this request - // unless it's sent late in the intialization process. - // If browsers ignore the request, the result is redundant captions thisObj.setMediaAttributes(); thisObj.addControls(); thisObj.addEventListeners(); - // inject each of the hidden forms that will be accessed from the Preferences popup menu prefsGroups = thisObj.getPreferencesGroups(); for (i = 0; i < prefsGroups.length; i++) { thisObj.injectPrefsForm(prefsGroups[i]); @@ -2636,73 +1877,58 @@ var AblePlayerInstances = []; thisObj.setupPopups(); thisObj.updateCaption(); thisObj.injectVTS(); - if (thisObj.chaptersDivLocation) { - thisObj.populateChaptersDiv(); - } + thisObj.populateChaptersDiv(); thisObj.showSearchResults(); - // Go ahead and load media, without user requesting it - // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth - // However, the media needs to load for us to get the media's duration if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.$media[0].load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } } - // refreshControls is called twice building/initializing the player - // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete setTimeout(function() { - thisObj.refreshControls('init'); - deferred.resolve(); - },100); - }); - }); + thisObj.refreshControls(); + deferred.resolve(); + },100); + }); + }); }); }); - }); + }); }); }, - function() { // initPlayer fail + function() { thisObj.provideFallback(); }); - return promise; + return promise; }; AblePlayer.prototype.initPlayer = function () { var thisObj = this; var playerPromise; - // First run player specific initialization. if (this.player === 'html5') { playerPromise = this.initHtml5Player(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { playerPromise = this.initYouTubePlayer(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { playerPromise = this.initVimeoPlayer(); } - // After player specific initialization is done, run remaining general initialization. - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - playerPromise.done( - function () { // done/resolved + playerPromise.then( + function () { if (thisObj.useFixedSeekInterval) { if (!thisObj.seekInterval) { thisObj.seekInterval = thisObj.defaultSeekInterval; } - else { - // fixed seekInterval was already assigned, using value of data-seek-interval attribute - } thisObj.seekIntervalCalculated = true; - } - else { + } else { thisObj.setSeekInterval(); } deferred.resolve(); } - ).fail(function () { // failed + ).finally(function () { deferred.reject(); } ); @@ -2712,27 +1938,20 @@ var AblePlayerInstances = []; AblePlayer.prototype.initStenoFrame = function() { - var thisObj, deferred, promise, $iframe; - thisObj = this; - - deferred = new $.Deferred(); + var deferred, promise; + deferred = new this.defer(); promise = deferred.promise(); if (this.stenoMode && this.$stenoFrame) { if (this.$stenoFrame[0].contentWindow,document.readyState == 'complete') { - // iframe has already loaded deferred.resolve(); - } - else { - // iframe has not loaded. Wait for it. + } else { this.$stenoFrame.on('load',function() { deferred.resolve(); }); } - } - else { - // there is no stenoFrame to initialize + } else { deferred.resolve(); } return promise; @@ -2740,39 +1959,25 @@ var AblePlayerInstances = []; AblePlayer.prototype.setSeekInterval = function () { - // this function is only called if this.useFixedSeekInterval is false - // if this.useChapterTimes, this is called as each new chapter is loaded - // otherwise, it's called once, as the player is initialized var thisObj, duration; thisObj = this; this.seekInterval = this.defaultSeekInterval; - if (this.useChapterTimes) { - duration = this.chapterDuration; - } - else { - duration = this.duration; - } + duration = (this.useChapterTimes) ? this.chapterDuration : this.duration; + if (typeof duration === 'undefined' || duration < 1) { - // no duration; just use default for now but keep trying until duration is available this.seekIntervalCalculated = false; return; - } - else { + } else { if (duration <= 20) { - this.seekInterval = 5; // 4 steps max - } - else if (duration <= 30) { - this.seekInterval = 6; // 5 steps max - } - else if (duration <= 40) { - this.seekInterval = 8; // 5 steps max - } - else if (duration <= 100) { - this.seekInterval = 10; // 10 steps max - } - else { - // never more than 10 steps from start to end - this.seekInterval = (duration / 10); + this.seekInterval = 5; + } else if (duration <= 30) { + this.seekInterval = 6; + } else if (duration <= 40) { + this.seekInterval = 8; + } else if (duration <= 100) { + this.seekInterval = 10; + } else { + this.seekInterval = Math.round(duration / 10, 0); } this.seekIntervalCalculated = true; } @@ -2791,8 +1996,6 @@ var AblePlayerInstances = []; } } if (typeof this.captionLang === 'undefined') { - // No caption track was flagged as default - // find and use a caption language that matches the player language for (i=0; i<captions.length; i++) { if (captions[i].language === this.lang) { this.captionLang = captions[i].language; @@ -2801,73 +2004,52 @@ var AblePlayerInstances = []; } } if (typeof this.captionLang === 'undefined') { - // Still no matching caption track - // just use the first track this.captionLang = captions[0].language; this.selectedCaptions = captions[0]; } if (typeof this.captionLang !== 'undefined') { - // reset transcript selected <option> to this.captionLang if (this.$transcriptLanguageSelect) { this.$transcriptLanguageSelect.find('option[lang=' + this.captionLang + ']').prop('selected',true); } - // sync all other tracks to this same languge this.syncTrackLanguages('init',this.captionLang); } if (this.player === 'vimeo') { if (this.usingVimeoCaptions && this.prefCaptions == 1) { - // initialize Vimeo captions to the default language this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { - // track.language = the iso code for the language - // track.kind = 'captions' or 'subtitles' - // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - - break; - default: - // some other error occurred - - break; - } - }); - } - else { - // disable Vimeo captions. - this.vimeoPlayer.disableTextTrack().then(function() { - // Vimeo captions disabled - }).catch(function(error) { - - }); - } + } + ).catch(function(error) { + switch (error.name) { + case 'InvalidTrackLanguageError': + + break; + case 'InvalidTrackError': + + break; + default: + + break; + } + }); + } else { + this.vimeoPlayer.disableTextTrack().then(function() { + }).catch(function(error) { + + }); } + } } }; AblePlayer.prototype.initHtml5Player = function () { - // Nothing special to do! - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); deferred.resolve(); return promise; }; - // Sets media/track/source attributes; is called whenever player is recreated since $media may have changed. AblePlayer.prototype.setMediaAttributes = function () { - // Firefox puts videos in tab order; remove. this.$media.attr('tabindex', -1); - // Keep native player from displaying captions/subtitles by setting textTrack.mode='disabled' - // https://dev.w3.org/html5/spec-author-view/video.html#text-track-mode - // This should work but historically hasn't been supported in all browsers - // Workaround for non-supporting browsers is to remove default attribute - // We're doing that too in track.js > setupCaptions() var textTracks = this.$media.get(0).textTracks; if (textTracks) { var i = 0; @@ -2880,207 +2062,163 @@ var AblePlayerInstances = []; AblePlayer.prototype.getPlayer = function() { - // Determine which player to use, if any - // return 'html5', 'youtube', 'vimeo', or null - - var i, sourceType, $newItem; - if (this.testFallback) { - return null; - } - else if (this.youTubeId) { - if (this.mediaType !== 'video') { - // attempting to play a YouTube video using an element other than <video> - return null; - } - else { - return 'youtube'; - } - } - else if (this.vimeoId) { - if (this.mediaType !== 'video') { - // attempting to play a Vimeo video using an element other than <video> - return null; - } - else { - return 'vimeo'; - } - - } - else if (this.media.canPlayType) { + if (this.testFallback) { + return null; + } else if (this.youTubeId) { + return (this.mediaType !== 'video') ? null : 'youtube'; + } else if (this.vimeoId) { + return (this.mediaType !== 'video') ? null : 'vimeo'; + } else if (this.media.canPlayType) { return 'html5'; - } - else { - // Browser does not support the available media file + } else { return null; } }; - })(jQuery); (function ($) { - AblePlayer.prototype.setCookie = function(cookieValue) { - - Cookies.set('Able-Player', JSON.stringify(cookieValue), { - expires: 90, - sameSite: 'strict' - }); + AblePlayer.prototype.setPrefs = function(preferences) { + if ( typeof Cookies !== 'undefined' ) { + Cookies.set('Able-Player', JSON.stringify(preferences), { + expires: 90, + sameSite: 'strict' + }); + } else { + localStorage.setItem( 'Able-Player', JSON.stringify( preferences ) ); + } }; - AblePlayer.prototype.getCookie = function() { + AblePlayer.prototype.getPref = function() { - var defaultCookie = { + var defaultPrefs = { preferences: {}, sign: {}, transcript: {}, voices: [] }; - var cookie; + var preferences; try { - cookie = JSON.parse(Cookies.get('Able-Player')); + if ( typeof Cookies !== 'undefined' ) { + preferences = JSON.parse( Cookies.get('Able-Player') ); + } else { + preferences = JSON.parse( localStorage.getItem('Able-Player') ); + } } catch (err) { - // Original cookie can't be parsed; update to default - this.setCookie(defaultCookie); - cookie = defaultCookie; - } - if (cookie) { - return cookie; - } - else { - return defaultCookie; + this.setPrefs( defaultPrefs ); + preferences = defaultPrefs; } + return (preferences) ? preferences : defaultPrefs; }; - AblePlayer.prototype.updateCookie = function( setting ) { - - // called when a particular setting had been updated - // useful for settings updated indepedently of Preferences dialog - // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle() - // setting is any supported preference name (e.g., "prefCaptions") - // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows) - var cookie, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; - cookie = this.getCookie(); + AblePlayer.prototype.updatePreferences = function( setting ) { + var preferences, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; + preferences = this.getPref(); if (setting === 'transcript' || setting === 'sign') { if (setting === 'transcript') { $window = this.$transcriptArea; windowPos = $window.position(); - if (typeof cookie.transcript === 'undefined') { - cookie.transcript = {}; - } - cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.transcript['zindex'] = $window.css('z-index'); - cookie.transcript['top'] = windowPos.top; - cookie.transcript['left'] = windowPos.left; - cookie.transcript['width'] = $window.width(); - cookie.transcript['height'] = $window.height(); - } - else if (setting === 'sign') { + if (typeof preferences.transcript === 'undefined') { + preferences.transcript = {}; + } + preferences.transcript['position'] = $window.css('position'); + preferences.transcript['zindex'] = $window.css('z-index'); + preferences.transcript['top'] = windowPos.top; + preferences.transcript['left'] = windowPos.left; + preferences.transcript['width'] = $window.width(); + preferences.transcript['height'] = $window.height(); + } else if (setting === 'sign') { $window = this.$signWindow; windowPos = $window.position(); - if (typeof cookie.sign === 'undefined') { - cookie.sign = {}; + if (typeof preferences.sign === 'undefined') { + preferences.sign = {}; } - cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.sign['zindex'] = $window.css('z-index'); - cookie.sign['top'] = windowPos.top; - cookie.sign['left'] = windowPos.left; - cookie.sign['width'] = $window.width(); - cookie.sign['height'] = $window.height(); - } - } - else if (setting === 'voice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; - } - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; + preferences.sign['position'] = $window.css('position'); + preferences.sign['zindex'] = $window.css('z-index'); + preferences.sign['top'] = windowPos.top; + preferences.sign['left'] = windowPos.left; + preferences.sign['width'] = $window.width(); + preferences.sign['height'] = $window.height(); + } + } else if (setting === 'voice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; + } + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; } } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (!voiceLangFound) { newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - } - else { + preferences.voices.push(newVoice); + } + } else { available = this.getAvailablePreferences(); - // Rebuild cookie with current cookie values, - // replacing the one value that's been changed for (i = 0; i < available.length; i++) { prefName = available[i]['name']; if (prefName == setting) { - // this is the one that requires an update - cookie.preferences[prefName] = this[prefName]; + preferences.preferences[prefName] = this[prefName]; } } } - // Save updated cookie - this.setCookie(cookie); + this.setPrefs(preferences); }; AblePlayer.prototype.getPreferencesGroups = function() { - // return array of groups in the order in which they will appear - // in the Preferences popup menu - // Human-readable label for each group is defined in translation table if (this.usingYouTubeCaptions) { - // no transcript is possible - return ['captions','descriptions','keyboard']; + return ['captions','descriptions','keyboard']; + } else if (this.usingVimeoCaptions) { + return ['descriptions','keyboard']; + } else { + return ['captions','descriptions','keyboard','transcript']; } - else if (this.usingVimeoCaptions) { - // users cannot control caption appearance - // and no transcript is possible - return ['descriptions','keyboard']; - } - else { - return ['captions','descriptions','keyboard','transcript']; - } } AblePlayer.prototype.getAvailablePreferences = function() { - // Return the list of currently available preferences. - // Preferences with no 'label' are set within player, not shown in Prefs dialog var prefs = []; - // Modifier keys preferences prefs.push({ - 'name': 'prefAltKey', // use alt key with shortcuts - 'label': this.tt.prefAltKey, + 'name': 'prefAltKey', + 'label': this.translate( 'prefAltKey', 'Alt' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ - 'name': 'prefCtrlKey', // use ctrl key with shortcuts - 'label': this.tt.prefCtrlKey, + 'name': 'prefCtrlKey', + 'label': this.translate( 'prefCtrlKey', 'Control' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefShiftKey', - 'label': this.tt.prefShiftKey, + 'label': this.translate( 'prefShiftKey', 'Shift' ), 'group': 'keyboard', 'default': 0 }); - - // Transcript preferences prefs.push({ - 'name': 'prefTranscript', // transcript default state + 'name': 'prefNoKeyShortcuts', + 'label': this.translate( 'prefNoKeyShortcuts', 'Disable Keyboard Shortcuts' ), + 'group': 'keyboard', + 'default': 0 + }); + + prefs.push({ + 'name': 'prefTranscript', 'label': null, 'group': 'transcript', - 'default': 0 // off because turning it on has a certain WOW factor + 'default': 0 }); prefs.push({ - 'name': 'prefHighlight', // highlight transcript as media plays - 'label': this.tt.prefHighlight, + 'name': 'prefHighlight', + 'label': this.translate( 'prefHighlight', 'Highlight transcript as media plays' ), 'group': 'transcript', - 'default': 1 // on because many users can benefit + 'default': 1 }); prefs.push({ 'name': 'prefAutoScrollTranscript', @@ -3089,16 +2227,14 @@ var AblePlayerInstances = []; 'default': 1 }); prefs.push({ - 'name': 'prefTabbable', // tab-enable transcript - 'label': this.tt.prefTabbable, + 'name': 'prefTabbable', + 'label': this.translate( 'prefTabbable', 'Keyboard-enable transcript' ), 'group': 'transcript', - 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page + 'default': 0 }); - // Caption preferences - prefs.push({ - 'name': 'prefCaptions', // closed captions default state + 'name': 'prefCaptions', 'label': null, 'group': 'captions', 'default': this.defaultStateCaptions @@ -3106,34 +2242,24 @@ var AblePlayerInstances = []; if (!this.usingYouTubeCaptions) { - /* // not supported yet - prefs.push({ - 'name': 'prefCaptionsStyle', - 'label': this.tt.prefCaptionsStyle, - 'group': 'captions', - 'default': this.tt.captionsStylePopOn - }); - / - // captions are always positioned above the player for audio if (this.mediaType === 'video') { prefs.push({ 'name': 'prefCaptionsPosition', - 'label': this.tt.prefCaptionsPosition, + 'label': this.translate( 'prefCaptionsPosition', 'Position' ), 'group': 'captions', 'default': this.defaultCaptionsPosition }); - } + } prefs.push({ 'name': 'prefCaptionsFont', - 'label': this.tt.prefCaptionsFont, + 'label': this.translate( 'prefCaptionsFont', 'Font' ), 'group': 'captions', 'default': 'sans-serif' }); } - // This is the one option that is supported by YouTube IFrame API prefs.push({ 'name': 'prefCaptionsSize', - 'label': this.tt.prefCaptionsSize, + 'label': this.translate( 'prefCaptionsSize', 'Font size' ), 'group': 'captions', 'default': '100%' }); @@ -3142,81 +2268,81 @@ var AblePlayerInstances = []; prefs.push({ 'name': 'prefCaptionsColor', - 'label': this.tt.prefCaptionsColor, + 'label': this.translate( 'prefCaptionsColor', 'Text Color' ), 'group': 'captions', 'default': 'white' }); prefs.push({ 'name': 'prefCaptionsBGColor', - 'label': this.tt.prefCaptionsBGColor, + 'label': this.translate( 'prefCaptionsBGColor', 'Background' ), 'group': 'captions', 'default': 'black' }); prefs.push({ 'name': 'prefCaptionsOpacity', - 'label': this.tt.prefCaptionsOpacity, + 'label': this.translate( 'prefCaptionsOpacity', 'Opacity' ), 'group': 'captions', 'default': '100%' }); } - if (this.mediaType === 'video') { - // Description preferences + if (this.mediaType === 'video') { prefs.push({ - 'name': 'prefDesc', // audio description default state + 'name': 'prefDesc', 'label': null, 'group': 'descriptions', 'default': this.defaultStateDescriptions }); prefs.push({ - 'name': 'prefDescMethod', // audio description default format (if both 'video' and 'text' are available) + 'name': 'prefDescMethod', 'label': null, 'group': 'descriptions', - 'default': 'video' // video (an alternative described version) always wins + 'default': 'video' }); prefs.push({ 'name': 'prefDescVoice', - 'label': this.tt.prefDescVoice, + 'label': this.translate( 'prefDescVoice', 'Voice' ), 'group': 'descriptions', - 'default': null // will be set later, in injectPrefsForm() + 'default': null }); prefs.push({ 'name': 'prefDescPitch', - 'label': this.tt.prefDescPitch, + 'label': this.translate( 'prefDescPitch', 'Pitch' ), 'group': 'descriptions', - 'default': 1 // 0 to 2 + 'default': 1 }); prefs.push({ 'name': 'prefDescRate', - 'label': this.tt.prefDescRate, + 'label': this.translate( 'prefDescRate', 'Rate' ), 'group': 'descriptions', - 'default': 1 // 0.1 to 10 (1 is normal speech; 2 is fast but decipherable; >2 is super fast) + 'default': 1 }); prefs.push({ 'name': 'prefDescVolume', - 'label': this.tt.volume, - 'group': 'descriptions', - 'default': 1 // 0 to 1 - }); - prefs.push({ - 'name': 'prefDescPause', // automatically pause when closed description starts - 'label': this.tt.prefDescPause, + 'label': this.translate( 'volume', 'Volume' ), 'group': 'descriptions', - 'default': this.defaultDescPause + 'default': 1 }); + if ( this.descMethod !== 'video' ) { + prefs.push({ + 'name': 'prefDescPause', + 'label': this.translate( 'prefDescPause', 'Automatically pause video when description starts' ), + 'group': 'descriptions', + 'default': this.defaultDescPause + }); + } prefs.push({ - 'name': 'prefDescVisible', // visibly show closed description (if avilable and used) - 'label': this.tt.prefDescVisible, + 'name': 'prefDescVisible', + 'label': this.translate( 'prefDescVisible', 'Make description visible' ), 'group': 'descriptions', - 'default': 0 // off as of 4.3.16, to avoid overloading the player with visible features + 'default': 0 }); } - // Preferences without a category (not shown in Preferences dialogs) prefs.push({ - 'name': 'prefSign', // open sign language window by default if avilable + 'name': 'prefSign', 'label': null, 'group': null, - 'default': 0 // off because clicking an icon to see the sign window has a powerful impact + 'default': 0 }); return prefs; @@ -3224,144 +2350,119 @@ var AblePlayerInstances = []; AblePlayer.prototype.loadCurrentPreferences = function () { - // Load current/default preferences from cookie into the AblePlayer object. var available = this.getAvailablePreferences(); - var cookie = this.getCookie(); - // Copy current cookie values into this object, and fill in any default values. + var preferences = this.getPref(); for (var ii = 0; ii < available.length; ii++) { var prefName = available[ii]['name']; var defaultValue = available[ii]['default']; - if (cookie.preferences[prefName] !== undefined) { - this[prefName] = cookie.preferences[prefName]; - } - else { - cookie.preferences[prefName] = defaultValue; + if (preferences.preferences[prefName] !== undefined) { + this[prefName] = preferences.preferences[prefName]; + } else { + preferences.preferences[prefName] = defaultValue; this[prefName] = defaultValue; } } - // Also load array of preferred voices from cookie - if (typeof cookie.voices !== 'undefined') { - this.prefVoices = cookie.voices; - } + if (typeof preferences.voices !== 'undefined') { + this.prefVoices = preferences.voices; + } - this.setCookie(cookie); + this.setPrefs(preferences); }; AblePlayer.prototype.injectPrefsForm = function (form) { - // Creates a preferences form and injects it. - // form is one of the supported forms (groups) defined in getPreferencesGroups() - - var thisObj, available, descLangs, - $prefsDiv, formTitle, introText, - $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, - $fieldset, fieldsetClass, fieldsetId, - $descFieldset, $descLegend, $legend, legendId, - thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField, - $div1,id1,$radio1,$label1, - $div2,id2,$radio2,$label2, - options,$thisOption,optionValue,optionLang,optionText,sampleCapsDiv, - changedPref,changedSpan,changedText, - currentDescState, prefDescVoice, - $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem, - dialog,saveButton,cancelButton; + + var thisObj, available, + $prefsDiv, formTitle, introText, $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, + $fieldset, fieldsetClass, fieldsetId, $legend, legendId, thisPref, $thisDiv, thisClass, + thisId, $thisLabel, $thisField, options,$thisOption,optionValue,optionLang,optionText, + changedPref,changedSpan,changedText, currentDescState, prefDescVoice, $kbHeading,$kbList, + kbLabels,keys,kbListText,$kbListItem, dialog,$saveButton,$cancelButton,$buttonContainer; thisObj = this; available = this.getAvailablePreferences(); - // outer container, will be assigned role="dialog" $prefsDiv = $('<div>',{ 'class': 'able-prefs-form ' }); var customClass = 'able-prefs-form-' + form; $prefsDiv.addClass(customClass); - // add titles and intros - if (form == 'captions') { - formTitle = this.tt.prefTitleCaptions; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage - } - else if (form == 'descriptions') { - formTitle = this.tt.prefTitleDescriptions; + if (form == 'captions') { + formTitle = this.translate( 'prefTitleCaptions', 'Captions Preferences' ); + } else if (form == 'descriptions') { + formTitle = this.translate( 'prefTitleDescriptions', 'Audio Description Preferences' ); var $prefsIntro = $('<p>',{ - text: this.tt.prefIntroDescription1 + text: this.translate( 'prefIntroDescription1', 'This media player supports audio description in two ways: ' ) }); var $prefsIntroUL = $('<ul>'); var $prefsIntroLI1 = $('<li>',{ - text: this.tt.prefDescFormatOption1 + text: this.translate( 'prefDescFormatOption1', 'alternative described version of video' ) }); var $prefsIntroLI2 = $('<li>',{ - text: this.tt.prefDescFormatOption2 + text: this.translate( 'prefDescFormatOption2', 'text-based description, announced by screen reader' ) }); $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2); if (this.hasOpenDesc && this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2 + ' '; - currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>'; - currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else if (this.hasOpenDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.'; - } - else if (this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else { - currentDescState = this.tt.prefIntroDescriptionNone; + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ) + ' '; + currentDescState += '<strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>'; + currentDescState += ' <em>' + this.translate( 'and', 'and' ) + '</em> <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else if (this.hasOpenDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>.'; + } else if (this.hasClosedDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else { + currentDescState = this.translate( 'prefIntroDescriptionNone', 'The current video has no audio description in either format.' ); } $prefsIntroP2 = $('<p>',{ html: currentDescState }); - p3Text = this.tt.prefIntroDescription3; + p3Text = this.translate( 'prefIntroDescription3', 'Use the following form to set your preferences related to text-based audio description.' ); if (this.hasOpenDesc || this.hasClosedDesc) { - p3Text += ' ' + this.tt.prefIntroDescription4; + p3Text += ' ' + this.translate( 'prefIntroDescription4', 'After you save your settings, audio description can be toggled on/off using the Description button.' ); } $prefsIntroP3 = $('<p>',{ text: p3Text }); - $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3); - } - else if (form == 'keyboard') { - formTitle = this.tt.prefTitleKeyboard; - introText = this.tt.prefIntroKeyboard1; - introText += ' ' + this.tt.prefIntroKeyboard2; - introText += ' ' + this.tt.prefIntroKeyboard3; + $prefsDiv.append( $prefsIntro, $prefsIntroUL, $prefsIntroP2, $prefsIntroP3 ); + } else if (form == 'keyboard') { + formTitle = this.translate( 'prefTitleKeyboard', 'Keyboard Preferences' ); + introText = this.translate( 'prefIntroKeyboard1', 'The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list).' ); + introText += ' ' + this.translate( 'prefIntroKeyboard2', 'Modifier keys (Shift, Alt, and Control) can be assigned below.' ); + introText += ' ' + this.translate( 'prefIntroKeyboard3', 'NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you.' ); $prefsIntro = $('<p>',{ text: introText }); $prefsDiv.append($prefsIntro); - } - else if (form == 'transcript') { - formTitle = this.tt.prefTitleTranscript; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage + } else if (form == 'transcript') { + formTitle = this.translate( 'prefTitleTranscript', 'Transcript Preferences' ); } - $fieldset = $('<div>').attr('role','group'); + $fieldset = $('<div>').attr('role','group'); fieldsetClass = 'able-prefs-' + form; fieldsetId = this.mediaId + '-prefs-' + form; legendId = fieldsetId + '-legend'; $fieldset.addClass(fieldsetClass).attr('id',fieldsetId); if (form === 'keyboard') { - $legend = $('<h2>' + this.tt.prefHeadingKeyboard1 + '</h2>'); + $legend = $('<h2>' + this.translate( 'prefHeadingKeyboard1', 'Modifier keys used for shortcuts' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); - } - else if (form === 'descriptions') { - $legend = $('<h2>' + this.tt.prefHeadingTextDescription + '</h2>'); + } else if (form === 'descriptions') { + $legend = $('<h2>' + this.translate( 'prefHeadingTextDescription', 'Text-based audio description' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); } for (i=0; i<available.length; i++) { - // only include prefs on the current form if they have a label if ((available[i]['group'] == form) && available[i]['label']) { thisPref = available[i]['name']; @@ -3376,8 +2477,7 @@ var AblePlayerInstances = []; id: thisId, }); if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') { - // add a change handler that updates the style of the sample caption text - $thisField.change(function() { + $thisField.on( 'change', function() { changedPref = $(this).attr('name'); thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref); }); @@ -3387,28 +2487,19 @@ var AblePlayerInstances = []; if (thisPref === 'prefCaptionsPosition') { optionValue = options[j]; if (optionValue === 'overlay') { - optionText = this.tt.captionsPositionOverlay; - } - else if (optionValue === 'below') { + optionText = this.translate( 'captionsPositionOverlay', 'Overlay' ); + } else if (optionValue === 'below') { optionValue = options[j]; - optionText = this.tt.captionsPositionBelow; + optionText = this.translate( 'captionsPositionBelow', 'Below video' ); } - } - else if (thisPref === 'prefCaptionsFont' || thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') { + } else if (thisPref === 'prefCaptionsFont' || thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') { optionValue = options[j][0]; optionText = options[j][1]; - } - else if (thisPref === 'prefCaptionsOpacity') { + } else if (thisPref === 'prefCaptionsOpacity') { optionValue = options[j]; optionText = options[j]; - if (optionValue === '0%') { - optionText += ' (' + this.tt.transparent + ')'; - } - else if (optionValue === '100%') { - optionText += ' (' + this.tt.solid + ')'; - } - } - else { + optionText += (optionValue === '0%') ? ' (' + this.translate( 'transparent', 'transparent' ) + ')' : ' (' + this.translate( 'solid', 'solid' ) + ')'; + } else { optionValue = options[j]; optionText = options[j]; } @@ -3422,11 +2513,9 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } $thisDiv.append($thisLabel,$thisField); - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); if (thisPref === 'prefDescPause' || thisPref === 'prefDescVisible') { - // these preferences are checkboxes $thisDiv.addClass('able-prefs-checkbox'); $thisField = $('<input>',{ type: 'checkbox', @@ -3434,24 +2523,21 @@ var AblePlayerInstances = []; id: thisId, value: 'true' }); - // check current active value for this preference if (this[thisPref] === 1) { $thisField.prop('checked',true); } $thisDiv.append($thisField,$thisLabel); - } - else if (this.synth) { - // Only show these options if browser supports speech synthesis + } else if (this.synth) { $thisDiv.addClass('able-prefs-select'); $thisField = $('<select>',{ name: thisPref, id: thisId, }); - if (thisPref === 'prefDescVoice' && this.descVoices) { - prefDescVoice = this.getPrefDescVoice(); + if (thisPref === 'prefDescVoice' && this.descVoices.length) { + prefDescVoice = this.getPrefDescVoice(); for (j=0; j < this.descVoices.length; j++) { optionValue = this.descVoices[j].name; - optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); + optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); optionText = optionValue + ' (' + this.descVoices[j].lang + ')'; $thisOption = $('<option>',{ 'value': optionValue, @@ -3464,31 +2550,13 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } this.$voiceSelectField = $thisField; - } - else { - if (thisPref == 'prefDescPitch') { // 0 to 2 + } else { + if (thisPref == 'prefDescPitch') { options = [0,0.5,1,1.5,2]; - } - else if (thisPref == 'prefDescRate') { // 0.1 to 10 - // Tests with a variety of voices on MacOS and Windows - // yielded the following choices that seem reasonable for audio description: - // 0.5 - too slow (exclude this) - // 0.7 - casual - // 0.8 - add this - // 0.9 - add this - // 1 - normal - // 1.1 - add this - // 1.2 - add this - // 1.5 - quick - // 2 - speedy - // 2.5 - fleet - // 3 - fast! (some voices don't get any faster than this - - // Note: if these values are modified, must also modfiy them - // in makePrefsValueReadable() + } else if (thisPref == 'prefDescRate') { + options = [0.7,0.8,0.9,1,1.1,1.2,1.5,2,2.5,3]; - } - else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 + } else if (thisPref == 'prefDescVolume') { options = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]; } if (typeof options !== 'undefined') { @@ -3507,14 +2575,12 @@ var AblePlayerInstances = []; } } } - // add a change handler that announces the sample description text $thisField.on('change',function() { thisObj.announceDescriptionText('sample',thisObj.currentSampleText); }); $thisDiv.append($thisLabel,$thisField); } - } - else { // all other fields are checkboxes + } else { $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); $thisField = $('<input>',{ type: 'checkbox', @@ -3522,226 +2588,192 @@ var AblePlayerInstances = []; id: thisId, value: 'true' }); - // check current active value for this preference if (this[thisPref] === 1) { $thisField.prop('checked',true); } if (form === 'keyboard') { - // add a change handler that updates the list of current keyboard shortcuts $thisField.on('change',function() { changedPref = $(this).attr('name'); if (changedPref === 'prefAltKey') { changedSpan = '.able-modkey-alt'; changedText = thisObj.tt.prefAltKey + ' + '; - } - else if (changedPref === 'prefCtrlKey') { + } else if (changedPref === 'prefCtrlKey') { changedSpan = '.able-modkey-ctrl'; changedText = thisObj.tt.prefCtrlKey + ' + '; - } - else if (changedPref === 'prefShiftKey') { + } else if (changedPref === 'prefShiftKey') { changedSpan = '.able-modkey-shift'; changedText = thisObj.tt.prefShiftKey + ' + '; } - if ($(this).is(':checked')) { - $(changedSpan).text(changedText); - } - else { - $(changedSpan).text(''); + if ( changedPref !== 'prefNoKeyShortcuts' ) { + if ($(this).is(':checked')) { + $(changedSpan).text(changedText); + } else { + $(changedSpan).text(''); + } + } else { + if ($(this).is(':checked')) { + $('.able-modkey-item').addClass('hidden'); + } else { + $('.able-modkey-item').removeClass('hidden'); + } } }); } $thisDiv.append($thisField,$thisLabel); } - $fieldset.append($thisDiv); + if (thisPref === 'prefDescVoice' && !this.descVoices.length) { + } else { + $fieldset.append($thisDiv); + } } } $prefsDiv.append($fieldset); if (form === 'captions') { - // add a sample closed caption div to prefs dialog - // do not show this for YouTube captions, since it's not an accurate reflection if (!this.usingYouTubeCaptions) { this.$sampleCapsDiv = $('<div>',{ 'class': 'able-captions-sample' - }).text(this.tt.sampleCaptionText); + }).text( this.translate( 'sampleCaptionText', 'Sample caption text' ) ); $prefsDiv.append(this.$sampleCapsDiv); this.stylizeCaptions(this.$sampleCapsDiv); } - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { if (this.synth) { - // add a div with sample audio description text this.$sampleDescDiv = $('<div>',{ 'class': 'able-desc-sample' - }).text(this.tt.sampleDescriptionText); + }).text( this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) ); $prefsDiv.append(this.$sampleDescDiv); - this.currentSampleText = this.tt.sampleDescriptionText; + this.currentSampleText = this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ); } - } - else if (form === 'keyboard') { - // add a current list of keyboard shortcuts + } else if (form === 'keyboard') { + let shortcutClass = (this.prefNoKeyShortcuts === 1 ) ? 'able-modkey-item hidden' : 'able-modkey-item'; + $kbHeading = $('<h2>',{ - text: this.tt.prefHeadingKeyboard2 + text: this.translate( 'prefHeadingKeyboard2', 'Current keyboard shortcuts' ) }); $kbList = $('<ul>'); - // create arrays of kbLabels and keys kbLabels = []; keys = []; for (i=0; i<this.controls.length; i++) { if (this.controls[i] === 'play') { - kbLabels.push(this.tt.play + '/' + this.tt.pause); - keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar); - } - else if (this.controls[i] === 'restart') { - kbLabels.push(this.tt.restart); + kbLabels.push( this.translate( 'play', 'Play' ) + '/' + this.translate( 'pause', 'Pause' ) ); + keys.push('p</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-help-modifiers"> ' + this.translate( 'spacebar', 'spacebar' )); + } else if (this.controls[i] === 'restart') { + kbLabels.push(this.translate( 'restart', 'Restart' )); keys.push('s'); - } - else if (this.controls[i] === 'previous') { - kbLabels.push(this.tt.prevTrack); - keys.push('b'); // b = back - } - else if (this.controls[i] === 'next') { - kbLabels.push(this.tt.nextTrack); + } else if (this.controls[i] === 'previous') { + kbLabels.push( this.translate( 'prevTrack', 'Previous track' ) ); + keys.push('b'); + } else if (this.controls[i] === 'next') { + kbLabels.push( this.translate( 'nextTrack', 'Next track' ) ); keys.push('n'); - } - else if (this.controls[i] === 'rewind') { - kbLabels.push(this.tt.rewind); + } else if (this.controls[i] === 'rewind') { + kbLabels.push(this.translate( 'rewind', 'Rewind' )); keys.push('r'); - } - else if (this.controls[i] === 'forward') { - kbLabels.push(this.tt.forward); + } else if (this.controls[i] === 'forward') { + kbLabels.push(this.translate( 'forward', 'Forward' )); keys.push('f'); - } - else if (this.controls[i] === 'volume') { - kbLabels.push(this.tt.volume); - keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9'); - // mute toggle - kbLabels.push(this.tt.mute + '/' + this.tt.unmute); + } else if (this.controls[i] === 'volume') { + kbLabels.push(this.translate( 'volume', 'Volume' )); + keys.push('v</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-modkey">1-9'); + kbLabels.push(this.translate( 'mute', 'Mute' ) + '/' + this.translate( 'unmute', 'Unmute' )); keys.push('m'); - } - else if (this.controls[i] === 'captions') { + } else if (this.controls[i] === 'captions') { if (this.captions.length > 1) { - // caption button launches a Captions popup menu - kbLabels.push(this.tt.captions); - } - else { - // there is only one caption track - // therefore caption button is a toggle + kbLabels.push(this.translate( 'captions', 'Captions' )); + } else { if (this.captionsOn) { - kbLabels.push(this.tt.hideCaptions); - } - else { - kbLabels.push(this.tt.showCaptions); + kbLabels.push(this.translate( 'hideCaptions', 'Hide captions' )); + } else { + kbLabels.push(this.translate( 'showCaptions', 'Show captions' )); } } keys.push('c'); - } - else if (this.controls[i] === 'descriptions') { + } else if (this.controls[i] === 'descriptions') { if (this.descOn) { - kbLabels.push(this.tt.turnOffDescriptions); - } - else { - kbLabels.push(this.tt.turnOnDescriptions); + kbLabels.push(this.translate( 'turnOffDescriptions', 'Turn off descriptions' )); + } else { + kbLabels.push(this.translate( 'turnOnDescriptions', 'Turn on descriptions' )); } keys.push('d'); - } - else if (this.controls[i] === 'prefs') { - kbLabels.push(this.tt.preferences); + } else if (this.controls[i] === 'prefs') { + kbLabels.push(this.translate( 'preferences', 'Preferences' )); keys.push('e'); } - else if (this.controls[i] === 'help') { - kbLabels.push(this.tt.help); - keys.push('h'); - } } for (i=0; i<keys.length; i++) { - // alt kbListText = '<span class="able-modkey-alt">'; if (this.prefAltKey === 1) { - kbListText += this.tt.prefAltKey + ' + '; + kbListText += this.translate( 'prefAltKey', 'Alt' ) + ' + '; } kbListText += '</span>'; - // ctrl kbListText += '<span class="able-modkey-ctrl">'; if (this.prefCtrlKey === 1) { - kbListText += this.tt.prefCtrlKey + ' + '; + kbListText += this.translate( 'prefCtrlKey', 'Control' ) + ' + '; } kbListText += '</span>'; - // shift kbListText += '<span class="able-modkey-shift">'; if (this.prefShiftKey === 1) { - kbListText += this.tt.prefShiftKey + ' + '; + kbListText += this.translate( 'prefShiftKey', 'Shift' ) + ' + '; } kbListText += '</span>'; kbListText += '<span class="able-modkey">' + keys[i] + '</span>'; kbListText += ' = ' + kbLabels[i]; $kbListItem = $('<li>',{ - html: kbListText + 'class': shortcutClass, + html: kbListText, }); $kbList.append($kbListItem); } - // add Escape key - kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>'; - kbListText += ' = ' + this.tt.escapeKeyFunction; + kbListText = '<span class="able-modkey">' + this.translate( 'escapeKey', 'Escape' ) + '</span>'; + kbListText += ' = ' + this.translate( 'escapeKeyFunction', 'Close current dialog or popup menu' ); $kbListItem = $('<li>',{ html: kbListText }); $kbList.append($kbListItem); - // put it all together $prefsDiv.append($kbHeading,$kbList); } - // $prefsDiv (dialog) must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers $('body').append($prefsDiv); - dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', true, formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em'); + dialog = new AccessibleDialog( + $prefsDiv, + this.$prefsButton, + formTitle, + thisObj.tt.closeButtonLabel + ); - // Add save and cancel buttons. - $prefsDiv.append('<hr>'); - saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - saveButton.click(function () { + $buttonContainer = $( '<div class="able-prefs-buttons"></div>' ); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); + $saveButton.on( 'click', function () { dialog.hide(); thisObj.savePrefsFromForm(); }); - cancelButton.click(function () { + $cancelButton.on( 'click', function () { dialog.hide(); thisObj.resetPrefsForm(); }); - - $prefsDiv.append(saveButton); - $prefsDiv.append(cancelButton); - - // Associate the dialog's H1 as aria-labelledby for groups of fields - // (alternative to fieldset and legend) - if (form === 'captions' || form === 'transcript') { - $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); + $buttonContainer.append( $saveButton,$cancelButton ); + $prefsDiv.append($buttonContainer); + if (form === 'captions' || form === 'transcript') { + $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); } - // add global reference for future control if (form === 'captions') { this.captionPrefsDialog = dialog; - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { this.descPrefsDialog = dialog; - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { this.keyboardPrefsDialog = dialog; - } - else if (form === 'transcript') { + } else if (form === 'transcript') { this.transcriptPrefsDialog = dialog; } - // Add click handler for dialog close button - // (button is added in dialog.js) - $('div.able-prefs-form button.modalCloseButton').click(function() { + $('div.able-prefs-form button.modalCloseButton').on( 'click', function() { thisObj.resetPrefsForm(); }) - // Add handler for escape key - $('div.able-prefs-form').keydown(function(e) { - if (e.which === 27) { // escape + $('div.able-prefs-form').on( 'keydown', function(e) { + if (e.key === 'Escape') { thisObj.resetPrefsForm(); } }); @@ -3749,34 +2781,28 @@ var AblePlayerInstances = []; AblePlayer.prototype.getPrefDescVoice = function () { - // return user's preferred voice for the current language from cookie.voices - var lang, cookie, i; + var lang, preferences, i; - if (this.selectedDescriptions) { - lang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - lang = this.captionLang; - } - else { - lang = this.lang; + if (this.selectedDescriptions) { + lang = this.selectedDescriptions.language; + } else if (this.captionLang) { + lang = this.captionLang; + } else { + lang = this.lang; } - cookie = this.getCookie(); - if (cookie.voices) { - for (i=0; i < cookie.voices.length; i++) { - if (cookie.voices[i].lang === lang) { - return cookie.voices[i].name; + preferences = this.getPref(); + if (preferences.voices) { + for (i=0; i < preferences.voices.length; i++) { + if (preferences.voices[i].lang === lang) { + return preferences.voices[i].name; } } } - return null; // user has no saved preference + return null; } AblePlayer.prototype.rebuildDescPrefsForm = function () { - // Called if this.descVoices changes, which may happen if: - // getBrowserVoices() succeeds after an earlier failure - // user changes language of captions/subtitles and descVoices changes to match the new language var i, optionValue, optionText, $thisOption; @@ -3797,162 +2823,116 @@ var AblePlayerInstances = []; } }; - AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { + AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { - // The values for pitch, rate, and volume (web speech API) - // are strange and inconsistent between variables - // this function returns text that is more readable than the values themselves - if (pref === 'prefDescPitch') { - if (value === 0) { - return this.tt.prefDescPitch1; - } - else if (value === 0.5) { - return this.tt.prefDescPitch2; - } - else if (value === 1) { - return this.tt.prefDescPitch3; - } - else if (value === 1.5) { - return this.tt.prefDescPitch4; - } - else if (value === 2) { - return this.tt.prefDescPitch5; - } - } - else if (pref === 'prefDescRate') { - // default in the API is 0.1 to 10, where 1 is normal speaking voice - // our custom range offers several rates close to 1 - // plus a couple of crazy fast ones for sport - // Our more readable options (1-10) or mapped here to API values - if (value === 0.7) { - return 1; - } - else if (value === 0.8) { - return 2; - } - else if (value === 0.9) { - return 3; - } - else if (value === 1) { - return 4; - } - else if (value === 1.1) { - return 5; - } - else if (value === 1.2) { - return 6; - } - else if (value === 1.5) { - return 7; - } - else if (value === 2) { - return 8; - } - else if (value === 2.5) { - return 9; - } - else if (value === 3) { - return 10; - } - } - else if (pref === 'prefDescVolume') { - // values range from 0.1 to 1.0 - return value 10; - } - return value; - }; - - AblePlayer.prototype.resetPrefsForm = function () { - - // Reset preferences form with default values from cookie - // Called when: - // User clicks cancel or close button in Prefs Dialog - // User presses Escape to close Prefs dialog - // User clicks Save in Prefs dialog, & there's more than one player on page - - var thisObj, cookie, available, i, prefName, prefId, thisDiv, thisId; - - thisObj = this; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (i=0; i<available.length; i++) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is a caption-related select box - $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]); - } - else { // all others are checkboxes - if (this[prefName] === 1) { - $('input[name="' + prefName + '"]').prop('checked',true); - } - else { - $('input[name="' + prefName + '"]').prop('checked',false); - } + if (pref === 'prefDescPitch') { + if (value === 0) { + return this.translate( 'prefDescPitch1', 'Very low' ); + } else if (value === 0.5) { + return this.translate( 'prefDescPitch2', 'Low' ); + } else if (value === 1) { + return this.translate( 'prefDescPitch3', 'Default' ); + } else if (value === 1.5) { + return this.translate( 'prefDescPitch4', 'High' ); + } else if (value === 2) { + return this.translate( 'prefDescPitch5', 'Very high' ); + } + } else if (pref === 'prefDescRate') { + if (value === 0.7) { + return 1; + } else if (value === 0.8) { + return 2; + } else if (value === 0.9) { + return 3; + } else if (value === 1) { + return 4; + } else if (value === 1.1) { + return 5; + } else if (value === 1.2) { + return 6; + } else if (value === 1.5) { + return 7; + } else if (value === 2) { + return 8; + } else if (value === 2.5) { + return 9; + } else if (value === 3) { + return 10; + } + } else if (pref === 'prefDescVolume') { + return value * 10; + } + return value; + }; + + AblePlayer.prototype.resetPrefsForm = function () { + + + var thisObj, preferences, available, i, prefName; + + thisObj = this; + preferences = this.getPref(); + available = this.getAvailablePreferences(); + for (i=0; i<available.length; i++) { + prefName = available[i]['name']; + if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + $('select[name="' + prefName + '"]').val(preferences.preferences[prefName]); + } else { + if (this[prefName] === 1) { + $('input[name="' + prefName + '"]').prop('checked',true); + } else { + $('input[name="' + prefName + '"]').prop('checked',false); } } - // also restore style of sample caption div - this.stylizeCaptions(this.$sampleCapsDiv); - }; + } + this.stylizeCaptions(this.$sampleCapsDiv); + }; AblePlayer.prototype.savePrefsFromForm = function () { - // Return a prefs object constructed from the form. - // called when user saves the Preferences form - // update cookie with new value - var cookie, available, prefName, prefId, - voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, + var preferences, available, prefName, prefId, + voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, numCapChanges, capSizeChanged, capSizeValue, newValue; numChanges = 0; - numCapChanges = 0; // changes to caption-style-related preferences + numCapChanges = 0; capSizeChanged = false; - cookie = this.getCookie(); + preferences = this.getPref(); available = this.getAvailablePreferences(); for (var i=0; i < available.length; i++) { - // only prefs with labels are used in the Prefs form if (available[i]['label']) { prefName = available[i]['name']; prefId = this.mediaId + '_' + prefName; - if (prefName === 'prefDescVoice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; + if (prefName === 'prefDescVoice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; } voiceSelectId = this.mediaId + '_prefDescVoice'; this.prefDescVoice = $('select#' + voiceSelectId).find(':selected').val(); this.prefDescVoiceLang = $('select#' + voiceSelectId).find(':selected').attr('data-lang'); - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; } } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (!voiceLangFound) { newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - numChanges++; - } - else if (prefName == 'prefDescMethod') { - // As of v4.0.10, prefDescMethod is no longer a choice - // this.prefDescMethod = $('input[name="' + prefName + '"]:checked').val(); + preferences.voices.push(newVoice); + } + numChanges++; + } else if (prefName == 'prefDescMethod') { this.prefDescMethod = 'video'; - if (this.prefDescMethod !== cookie.preferences['prefDescMethod']) { // user's preference has changed - cookie.preferences['prefDescMethod'] = this.prefDescMethod; + if (this.prefDescMethod !== preferences.preferences['prefDescMethod']) { + preferences.preferences['prefDescMethod'] = this.prefDescMethod; numChanges++; } - } - else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is one of the caption-related select fields + } else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; - // also update global var for this pref (for caption fields, not done elsewhere) + if (preferences.preferences[prefName] !== newValue) { + preferences.preferences[prefName] = newValue; this[prefName] = newValue; numChanges++; numCapChanges++; @@ -3961,78 +2941,59 @@ var AblePlayerInstances = []; capSizeChanged = true; capSizeValue = newValue; } - } - else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { - // this is one of the description-related select fields + } else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; - // also update global var for this pref + if (preferences.preferences[prefName] !== newValue) { + preferences.preferences[prefName] = newValue; this[prefName] = newValue; numChanges++; } - } - else { // all other fields are checkboxes + } else { if ($('input[id="' + prefId + '"]').is(':checked')) { - cookie.preferences[prefName] = 1; + preferences.preferences[prefName] = 1; if (this[prefName] === 1) { - // nothing has changed - } - else { - // user has just turned this pref on + } else { this[prefName] = 1; numChanges++; } - } - else { // thisPref is not checked - cookie.preferences[prefName] = 0; + } else { + preferences.preferences[prefName] = 0; if (this[prefName] === 1) { - // user has just turned this pref off this[prefName] = 0; numChanges++; - } - else { - // nothing has chaged + } else { } } } } } if (numChanges > 0) { - this.setCookie(cookie); - this.showAlert(this.tt.prefSuccess); - } - else { - this.showAlert(this.tt.prefNoChange); + this.setPrefs(preferences); + this.showAlert( this.translate( 'prefSuccess', 'Your changes have been saved.' ) ); + } else { + this.showAlert( this.translate( 'prefNoChange', "You didn't make any changes" ) ); } if (this.player === 'youtube' && (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) && capSizeChanged) { - // update font size of YouTube captions this.youTubePlayer.setOption('captions','fontSize',this.translatePrefs('size',capSizeValue,'youtube')); } if (AblePlayerInstances.length > 1) { - // there are multiple players on this page. - // update prefs for ALL of them for (var i=0; i<AblePlayerInstances.length; i++) { - AblePlayerInstances[i].updatePrefs(); - AblePlayerInstances[i].geteferences(); + AblePlayerInstances[i].updatePlayerPrefs(); + AblePlayerInstances[i].loadCurrentPreferences(); AblePlayerInstances[i].resetPrefsForm(); if (numCapChanges > 0) { AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$captionsDiv); - // also apply same changes to descriptions, if present if (typeof AblePlayerInstances[i].$descDiv !== 'undefined') { AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$descDiv); } } } - } - else { - // there is only one player - this.updatePrefs(); + } else { + this.updatePlayerPrefs(); if (numCapChanges > 0) { this.stylizeCaptions(this.$captionsDiv); - // also apply same changes to descriptions, if present if (typeof this.$descDiv !== 'undefined') { this.stylizeCaptions(this.$descDiv); } @@ -4040,34 +3001,26 @@ var AblePlayerInstances = []; } } - AblePlayer.prototype.updatePrefs = function () { + AblePlayer.prototype.updatePlayerPrefs = function () { - // Update player based on current prefs. Safe to call multiple times. - - if (this.$transcriptDiv) { - // tabbable transcript + if (this.$transcriptDiv) { if (this.prefTabbable === 1) { this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - else { + } else { this.$transcriptDiv.find('span.able-transcript-seekpoint').removeAttr('tabindex'); } - // transcript highlights if (this.prefHighlight === 0) { - // user doesn't want highlights; remove any existing highlights this.$transcriptDiv.find('span').removeClass('able-highlight'); } } - // Re-initialize caption and description in case relevant settings have changed this.updateCaption(); this.initDescription(); }; AblePlayer.prototype.usingModifierKeys = function(e) { - // return true if user is holding down required modifier keys if ((this.prefAltKey === 1) && !e.altKey) { return false; } @@ -4083,13 +3036,10 @@ var AblePlayerInstances = []; })(jQuery); (function ($) { - // See section 4.1 of dev.w3.org/html5/webvtt for format details. - AblePlayer.prototype.parseWebVTT = function(srcFile,text) { + AblePlayer.prototype.parseWebVTT = function(data) { -// var deferred = new $.Deferred(); -// var promise = deferred.promise(); - - // Normalize line ends to \n. + let srcFile = data.src; + let text = data.text; text = text.replace(/(\r\n|\n|\r)/g,'\n'); var parserState = { @@ -4111,11 +3061,10 @@ var AblePlayerInstances = []; errString += 'Column: ' + parserState.column + '\n'; errString += err; if (console.warn) { - - } - else if (console.log) { - - } + + } else if (console.log) { + + } } return parserState; } @@ -4128,7 +3077,6 @@ var AblePlayerInstances = []; return results; } - // Applies the action and checks for errors. function act(state, action) { var val = action(state); if (state.error !== null) { @@ -4142,8 +3090,7 @@ var AblePlayerInstances = []; if (cutText[ii] === '\n') { state.column = 1; state.line += 1; - } - else { + } else { state.column += 1; } } @@ -4163,8 +3110,7 @@ var AblePlayerInstances = []; returnText = state.text; updatePosition(state, returnText); state.text = ''; - } - else { + } else { returnText = state.text.substring(0, nextEOL); updatePosition(state, returnText + '\n'); state.text = state.text.substring(nextEOL + 1); @@ -4174,12 +3120,7 @@ var AblePlayerInstances = []; function peekLine(state) { var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - return state.text; - } - else { - return state.text.substring(0, nextEOL); - } + return (nextEOL === -1) ? state.text : state.text.substring(0, nextEOL); } function parseFileBody(state) { @@ -4193,23 +3134,19 @@ var AblePlayerInstances = []; parseMetadataHeaders, eatAtLeast1EmptyLines, parseCuesAndComments]); - } - else { + } else { state.error = "WEBVTT signature not followed by whitespace."; } } - // Parses all metadata headers until a cue is discovered. function parseMetadataHeaders(state) { while (true) { var nextLine = peekLine(state); if (nextLine.indexOf('-->') !== -1) { return; - } - else if (nextLine.length === 0) { + } else if (nextLine.length === 0) { return; - } - else { + } else { var keyValue = act(state, getMetadataKeyValue); state.metadata[keyValue[0]] = keyValue[1]; act(state, eatUntilEOLInclusive); @@ -4242,8 +3179,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -4257,8 +3193,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -4268,18 +3203,13 @@ var AblePlayerInstances = []; function parseCuesAndComments(state) { while (true) { var nextLine = peekLine(state); - // If NOTE is not on a line all its own, it must be followed by a space or tab. if (nextLine.indexOf('NOTE') === 0 && ((nextLine.length === 4) || (nextLine[4] === ' ') || (nextLine[4] === '\t'))) { actList(state, [eatComment, eatEmptyLines]); - } - else if ($.trim(nextLine).length === 0 && state.text.length > 0) { + } else if (nextLine.trim().length === 0 && state.text.length > 0) { act(state, eatEmptyLines); - } - else if ($.trim(nextLine).length > 0) { + } else if (nextLine.trim().length > 0) { act(state, parseCue); - } - else { - // Everythings parsed! + } else { return; } } @@ -4300,12 +3230,11 @@ var AblePlayerInstances = []; errString += 'Column: ' + state.column + '\n'; errString += 'Expected cue timing for cueId \''+cueId+'\' but found: ' + nextLine + '\n'; if (console.warn) { - - } - else if (console.log) { - - } - return; // Return leaving line for parseCuesAndComments to handle + + } else if (console.log) { + + } + return; } } @@ -4324,7 +3253,6 @@ var AblePlayerInstances = []; act(state, eatSpacesOrTabs); var cueSettings = act(state, getCueSettings); - // Cut the newline. cut(state, 1); var components = act(state, getCuePayload); @@ -4351,30 +3279,24 @@ var AblePlayerInstances = []; } function getCuePayload(state) { - // Parser based on instructions in draft. var result = {type: 'internal', tagName: '', value: '', classes: [], annotation: '', parent: null, children: [], language: ''}; var current = result; var languageStack = []; while (state.text.length > 0) { var nextLine = peekLine(state); if (nextLine.indexOf('-->') !== -1 || /^\s+$/.test(nextLine)) { - break; // Handle empty cues + break; } - // Have to separately detect double-lines ending cue due to our non-standard parsing. - // TODO: Redo outer algorithm to conform to W3 spec? if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { cut(state, 2); break; } var token = getCueToken(state); - // We'll use the tokens themselves as objects where possible. if (token.type === 'string') { current.children.push(token); - } - else if (token.type === 'startTag') { + } else if (token.type === 'startTag') { token.type = token.tagName; - // Define token.parent; added by Terrill to fix bug end 'endTag' loop token.parent = current; if ($.inArray(token.tagName, ['i', 'b', 'u', 'ruby']) !== -1) { if (languageStack.length > 0) { @@ -4382,31 +3304,27 @@ var AblePlayerInstances = []; } current.children.push(token); current = token; - } - else if (token.tagName === 'rt' && current.tagName === 'ruby') { + } else if (token.tagName === 'rt' && current.tagName === 'ruby') { if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'c') { + } else if (token.tagName === 'c') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'v') { + } else if (token.tagName === 'v') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'lang') { + } else if (token.tagName === 'lang') { languageStack.push(token.annotation); if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; @@ -4414,22 +3332,16 @@ var AblePlayerInstances = []; current.children.push(token); current = token; } - } - else if (token.type === 'endTag') { + } else if (token.type === 'endTag') { if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) { - // NOTE from Terrill: This was resulting in an error because current.parent was undefined - // Fixed (I think) by assigning current token to token.parent in 'startTag' loop current = current.parent; - } - else if (token.tagName === 'lang' && current.type === 'lang') { + } else if (token.tagName === 'lang' && current.type === 'lang') { current = current.parent; languageStack.pop(); - } - else if (token.tagName === 'ruby' && current.type === 'rt') { + } else if (token.tagName === 'ruby' && current.type === 'rt') { current = current.parent.parent; } - } - else if (token.type === 'timestampTag') { + } else if (token.type === 'timestampTag') { var tempState = { text: token.value, error: null, @@ -4452,7 +3364,6 @@ var AblePlayerInstances = []; return result; } - // Gets a single cue token; uses the method in the w3 specification. function getCueToken(state) { var tokenState = 'data'; var result = []; @@ -4461,228 +3372,179 @@ var AblePlayerInstances = []; while (true) { var c; - // Double newlines indicate end of token. if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { c = '\u0004'; - } - else if (state.text.length > 0) { + } else if (state.text.length > 0) { c = state.text[0]; - } - else { - // End of file. + } else { c = '\u0004'; } if (tokenState === 'data') { if (c === '&') { buffer = '&'; tokenState = 'escape'; - } - else if (c === '<') { + } else if (c === '<') { if (result.length === 0) { tokenState = 'tag'; - } - else { + } else { token.type = 'string'; token.value = result.join(''); return token; } - } - else if (c === '\u0004') { + } else if (c === '\u0004') { return {type: 'string', value: result.join('')}; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'escape') { + } else if (tokenState === 'escape') { if (c === '&') { result.push(buffer); buffer = '&'; - } - else if (c.match(/[0-9a-z]/)) { + } else if (c.match(/[0-9a-z]/)) { buffer += c; - } - else if (c === ';') { + } else if (c === ';') { if (buffer === '&') { result.push('&'); - } - else if (buffer === '<') { + } else if (buffer === '<') { result.push('<'); - } - else if (buffer === '>') { + } else if (buffer === '>') { result.push('>'); - } - else if (buffer === '&lrm') { + } else if (buffer === '&lrm') { result.push('\u200e'); - } - else if (buffer === '&rlm') { + } else if (buffer === '&rlm') { result.push('\u200f'); - } - else if (buffer === ' ') { + } else if (buffer === ' ') { result.push('\u00a0'); - } - else { + } else { result.push(buffer); result.push(';'); } tokenState = 'data'; - } - else if (c === '<' || c === '\u0004') { + } else if (c === '<' || c === '\u0004') { result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { // Handle unescaped & chars as strings + } else if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else { + } else { result.push(buffer); tokenState = 'data'; } - } - else if (tokenState === 'tag') { + } else if (tokenState === 'tag') { if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '/') { + } else if (c === '/') { tokenState = 'endTag'; - } - else if (c.match('[0-9]')) { + } else if (c.match('[0-9]')) { tokenState = 'timestampTag'; result.push(c); - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); break; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = ''; token.type = 'startTag'; return token; - } - else { + } else { result.push(c); tokenState = 'startTag'; } - } - else if (tokenState === 'startTag') { + } else if (tokenState === 'startTag') { if (c === '\t' || c === '\u000c' || c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'startTagClass') { + } else if (tokenState === 'startTagClass') { if (c === '\t' || c === '\u000c' || c === ' ') { token.classes.push(buffer); buffer = ''; tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { token.classes.push(buffer); buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { token.classes.push(buffer); buffer = ""; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else { + } else { buffer += 'c'; } - } - else if (tokenState === 'startTagAnnotation') { + } else if (tokenState === 'startTagAnnotation') { if (c === '>') { cut(state, 1); - buffer = $.trim(buffer).replace(/ +/, ' '); + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else if (c === '\u0004') { - buffer = $.trim(buffer).replace(/ +/, ' '); + } else if (c === '\u0004') { + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else { + } else { buffer += c; } - } - else if (tokenState === 'endTag') { + } else if (tokenState === 'endTag') { if (c === '>') { cut(state, 1); token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'timestampTag') { + } else if (tokenState === 'timestampTag') { if (c === '>') { cut(state, 1); token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else { + } else { throw 'Unknown tokenState ' + tokenState; } @@ -4691,7 +3553,6 @@ var AblePlayerInstances = []; } function eatComment(state) { - // Cut the NOTE line. var noteLine = cutLine(state); if (noteLine.indexOf('-->') !== -1) { state.error = 'Invalid syntax: --> in NOTE line.'; @@ -4699,21 +3560,17 @@ var AblePlayerInstances = []; } while (true) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { - // End of comment. + if ( nextLine.trim().length === 0) { return; - } - else if (nextLine.indexOf('-->') !== -1) { + } else if (nextLine.indexOf('-->') !== -1) { state.error = 'Invalid syntax: --> in comment.'; return; - } - else { + } else { cutLine(state); } } } - // Initial byte order mark. function eatOptionalBOM(state) { if (state.text[0] === '\ufeff') { cut(state, 1); @@ -4721,12 +3578,10 @@ var AblePlayerInstances = []; } - // "WEBVTT" string. function eatSignature(state) { if (state.text.substring(0,6) === 'WEBVTT') { cut(state, 6); - } - else { + } else { state.error = 'Invalid signature.'; } } @@ -4734,8 +3589,7 @@ var AblePlayerInstances = []; function eatArrow(state) { if (state.text.length < 3 || state.text.substring(0,3) !== '-->') { state.error = 'Missing -->'; - } - else { + } else { cut(state, 3); } } @@ -4743,8 +3597,7 @@ var AblePlayerInstances = []; function eatSingleSpaceOrTab(state) { if (state.text[0] === '\t' || state.text[0] === ' ') { cut(state, 1); - } - else { + } else { state.error = 'Missing space.'; } } @@ -4770,8 +3623,7 @@ var AblePlayerInstances = []; var nextEOL = state.text.indexOf('\n'); if (nextEOL === -1) { state.error = 'Missing EOL.'; - } - else { + } else { cut(state, nextEOL + 1); } } @@ -4779,25 +3631,22 @@ var AblePlayerInstances = []; function eatEmptyLines(state) { while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); - } - else { + } else { break; } } } - // Eats empty lines, but throws an error if there's not at least one. function eatAtLeast1EmptyLines(state) { var linesEaten = 0; while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); linesEaten += 1; - } - else { + } else { break; } } @@ -4814,7 +3663,7 @@ var AblePlayerInstances = []; } var timestamp = cut(state, nextSpace); - var results = /((\d\d):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(timestamp); + var results = /((\d+):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(timestamp); if (!results) { state.error = 'Unable to parse timestamp'; @@ -4841,8 +3690,7 @@ var AblePlayerInstances = []; time += parseInt(seconds, 10); time += parseInt(results[6], 10) / 1000; - } - else { + } else { time += parseInt(results[7], 10); time += parseInt(results[8], 10) / 1000; } @@ -4855,130 +3703,81 @@ var AblePlayerInstances = []; AblePlayer.prototype.injectPlayerCode = function() { - // create and inject surrounding HTML structure - // If IOS: - // If video: - // IOS does not support any of the player's functionality - // - everything plays in its own player - // Therefore, AblePlayer is not loaded & all functionality is disabled - // (this all determined. If this is IOS && video, this function is never called) - // If audio: - // HTML cannot be injected as a parent of the <audio> element - // It is therefore injected after the <audio> element - // This is only a problem in IOS 6 and earlier, - // & is a known bug, fixed in IOS 7 - - var thisObj, captionsContainer, prefsGroups, i; - thisObj = this; - // create three wrappers and wrap them around the media element. - // From inner to outer: - // $mediaContainer - contains the original media element - // $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions) - // $ableWrapper - contains additional widgets (e.g., transcript window, sign window) + var captionsContainer; this.$mediaContainer = this.$media.wrap('<div class="able-media-container"></div>').parent(); this.$ableDiv = this.$mediaContainer.wrap('<div class="able"></div>').parent(); this.$ableWrapper = this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(); this.$ableWrapper.addClass('able-skin-' + this.skin); - - this.$ableWrapper.css({ - 'width': this.playerWidth + 'px' - }); if (this.mediaType === 'video') { - // youtube adds its own big play button - // don't show ours unless video has a poster attribute - // (which obstructs the YouTube poster & big play button) if (this.iconType != 'image' && (this.player !== 'youtube' || this.hasPoster)) { this.injectBigPlayButton(); } } - // add container that captions or description will be appended to - // Note: new Jquery object must be assigned _after_ wrap, hence the temp captionsContainer variable - captionsContainer = $('<div>'); - if (this.mediaType === 'video') { - captionsContainer.addClass('able-vidcap-container'); - } - else if (this.mediaType === 'audio') { - captionsContainer.addClass('able-audcap-container'); - // hide this by default. It will be shown if captions are available + captionsContainer = $('<div>'); + if (this.mediaType === 'video') { + captionsContainer.addClass('able-vidcap-container'); + } else if (this.mediaType === 'audio') { + captionsContainer.addClass('able-audcap-container'); captionsContainer.addClass('captions-off'); } - this.injectPlayerControlArea(); // this may need to be injected after captions??? + this.injectPlayerControlArea(); this.$captionsContainer = this.$mediaContainer.wrap(captionsContainer).parent(); - this.injectAlert(); + this.injectAlert(this.$ableDiv); this.injectPlaylist(); - - // Do this last, as it should be prepended to the top of this.$ableDiv - // after everything else has prepended + this.injectAudioPoster(); this.injectOffscreenHeading(); }; + AblePlayer.prototype.injectAudioPoster = function() { + if ( this.mediaType === 'audio' && this.hasPoster ) { + audioPoster = DOMPurify.sanitize(this.audioPoster); + audioPosterAlt = DOMPurify.sanitize(this.audioPosterAlt); + let audioPosterImg = document.createElement( 'img' ); + audioPosterImg.setAttribute( 'src', audioPoster ); + audioPosterImg.setAttribute( 'alt', audioPosterAlt ); + this.$audioWrapper = this.$playerDiv.wrap( '<div class="able-audio-wrapper">' ).parent(); + this.$audioWrapper.prepend( audioPosterImg ); + } + } + AblePlayer.prototype.injectOffscreenHeading = function () { - // Inject an offscreen heading to the media container. - // If heading hasn't already been manually defined via data-heading-level, - // automatically assign a level that is one level deeper than the closest parent heading - // as determined by getNextHeadingLevel() var headingType; if (this.playerHeadingLevel == '0') { - // do NOT inject a heading (at author's request) - } - else { + } else { if (typeof this.playerHeadingLevel === 'undefined') { - this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); // returns in integer 1-6 + this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); } headingType = 'h' + this.playerHeadingLevel.toString(); this.$headingDiv = $('<' + headingType + '>'); this.$ableDiv.prepend(this.$headingDiv); this.$headingDiv.addClass('able-offscreen'); - this.$headingDiv.text(this.tt.playerHeading); + this.$headingDiv.text( this.translate( 'playerHeading', 'Media player' ) ); } }; AblePlayer.prototype.injectBigPlayButton = function () { - var thisObj, svgData, buttonIcon, svgPath; - - thisObj = this; + var thisObj = this; this.$bigPlayButton = $('<button>', { 'class': 'able-big-play-button', 'aria-hidden': false, - 'aria-label': this.tt.play, + 'aria-label': this.translate( 'play', 'Play' ), + 'type': 'button', 'tabindex': 0 }); - if (this.iconType == 'svg') { - svgData = this.getSvgData('play'); - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - this.$bigPlayButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - this.$bigPlayButton.html(this.$bigPlayButton.html()); - } - else { // use icon font - this.$bigPlayIcon = $('<span>', { - 'class': 'icon-play', - }); - this.$bigPlayButton.append(this.$bigPlayIcon); - } + this.getIcon( this.$bigPlayButton, 'play' ); - this.$bigPlayButton.click(function (event) { - event.preventDefault(); + this.$bigPlayButton.on( 'click', function () { thisObj.handlePlay(); }); - + this.$mediaContainer.append(this.$bigPlayButton); }; @@ -4987,10 +3786,10 @@ var AblePlayerInstances = []; this.$playerDiv = $('<div>', { 'class' : 'able-player', 'role' : 'region', - 'aria-label' : this.mediaType + ' player' + 'aria-label' : ( 'audio' === this.mediaType ) ? this.translate( 'audioPlayer', 'audio player' ) : this.translate( 'videoPlayer', 'video player' ) }); - this.$playerDiv.addClass('able-'+this.mediaType); - if (this.hasPlaylist && this.showNowPlaying) { + this.$playerDiv.addClass('able-' + this.mediaType); + if (this.hasPlaylist && this.showNowPlaying) { this.$nowPlayingDiv = $('<div>',{ 'class' : 'able-now-playing', 'aria-live' : 'assertive', @@ -5019,102 +3818,137 @@ var AblePlayerInstances = []; this.$speed = $('<span>',{ 'class' : 'able-speed', - 'aria-live' : 'assertive' - }).text(this.tt.speed + ': 1x'); + 'aria-live' : 'assertive', + 'aria-atomic' : 'true' + }).text(this.translate( 'speed', 'Speed' ) + ': 1x'); this.$status = $('<span>',{ 'class' : 'able-status', 'aria-live' : 'polite' }); - // Put everything together. this.$statusBarDiv.append(this.$timer, this.$speed, this.$status); if (this.showNowPlaying) { this.$playerDiv.append(this.$nowPlayingDiv, this.$controllerDiv, this.$statusBarDiv); - } - else { + } else { this.$playerDiv.append(this.$controllerDiv, this.$statusBarDiv); } - if (this.mediaType === 'video') { - // the player controls go after the media & captions + + if (this.mediaType === 'video') { this.$ableDiv.append(this.$playerDiv); - } - else { - // the player controls go before the media & captions + } else { this.$ableDiv.prepend(this.$playerDiv); } }; AblePlayer.prototype.injectTextDescriptionArea = function () { - // create a div for writing description text this.$descDiv = $('<div>',{ 'class': 'able-descriptions' }); - // Add ARIA so description will be announced by screen readers - // Later (in description.js > showDescription()), - // if browser supports Web Speech API and this.descMethod === 'browser' - // these attributes will be removed this.$descDiv.attr({ 'aria-live': 'assertive', 'aria-atomic': 'true' }); - // Start off with description hidden. - // It will be exposed conditionally within description.js > initDescription() this.$descDiv.hide(); this.$ableDiv.append(this.$descDiv); }; AblePlayer.prototype.getDefaultWidth = function(which) { - - // return default width of resizable elements - // these values are somewhat arbitrary, but seem to result in good usability - // if users disagree, they can resize (and resposition) them + let viewportMaxwidth = window.innerWidth; if (which === 'transcript') { - return 450; - } - else if (which === 'sign') { - return 400; + return ( viewportMaxwidth <= 450 ) ? viewportMaxwidth : 450; + } else if (which === 'sign') { + return ( viewportMaxwidth <= 400 ) ? viewportMaxwidth : 400; } }; - AblePlayer.prototype.positionDraggableWindow = function (which, width) { + AblePlayer.prototype.rePositionDraggableWindow = function (which) { + + let preferences, $window; + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + + if ( which === 'transcript' && $window ) { + if (typeof preferences.transcript !== 'undefined') { + this.prevTranscriptPosition = preferences.transcript; + } + $window.css({ + 'top': 0, + 'left': 0 + }); + } else if ( 'sign' === which && $window ) { + if (typeof preferences.sign !== 'undefined') { + this.prevSignPosition = preferences.sign; + } + $window.css({ + 'top': 0, + 'right': 0, + 'left': 'auto' + }); + } + } - // which is either 'transcript' or 'sign' + AblePlayer.prototype.positionDraggableWindow = function (which, width) { - var cookie, cookiePos, $window, dragged, windowPos, currentWindowPos, firstTime, zIndex; + var preferences, preferencePos, $window, windowPos, viewportWidth, windowWidth; - cookie = this.getCookie(); + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + if ( ! $window ) { + return; + } if (which === 'transcript') { - $window = this.$transcriptArea; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.transcript; + if (typeof preferences.transcript !== 'undefined') { + preferencePos = preferences.transcript; } - } - else if (which === 'sign') { - $window = this.$signWindow; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.sign; + if ( this.prevTranscriptPosition ) { + preferencePos = this.prevTranscriptPosition; + this.prevTranscriptPosition = false; + } + } else if (which === 'sign') { + if (typeof preferences.sign !== 'undefined') { + preferencePos = preferences.sign; + } + if ( this.prevSignPosition ) { + preferencePos = this.prevSignPosition; + this.prevSignPosition = false; } } - if (typeof cookiePos !== 'undefined' && !($.isEmptyObject(cookiePos))) { - // position window using stored values from cookie + if (typeof preferencePos !== 'undefined' && !($.isEmptyObject(preferencePos))) { $window.css({ - 'position': cookiePos['position'], - 'width': cookiePos['width'], - 'z-index': cookiePos['zindex'] + 'position': preferencePos['position'], + 'width': preferencePos['width'], + 'z-index': preferencePos['zindex'] }); - if (cookiePos['position'] === 'absolute') { + if (preferencePos['position'] === 'absolute') { $window.css({ - 'top': cookiePos['top'], - 'left': cookiePos['left'] + 'top': preferencePos['top'], + 'left': preferencePos['left'] }); - } - // since cookie is not page-specific, z-index needs may vary across different pages - this.updateZIndex(which); - } - else { - // position window using default values + topPosition = $window.offset().top; + leftPosition = $window.offset().left; + viewportWidth = window.innerWidth; + windowWidth = $window.width(); + if ( topPosition < 0 ) { + $window.css({ + 'top': preferencePos['top'] - topPosition + }); + } + if ( leftPosition < 0 && ! this.restoringAfterFullscreen ) { + + $window.css({ + 'left': preferencePos['left'] - leftPosition + }); + } + if ( viewportWidth - leftPosition < 30 ) { + $window.css({ + 'left': viewportWidth - windowWidth + }); + } + } + this.updateZIndex(which); + } else { windowPos = this.getOptimumPosition(which, width); if (typeof width === 'undefined') { width = this.getDefaultWidth(which); @@ -5135,117 +3969,85 @@ var AblePlayerInstances = []; AblePlayer.prototype.getOptimumPosition = function (targetWindow, targetWidth) { - // returns optimum position for targetWindow, as an array with the following structure: - // 0 - CSS position ('absolute' or 'relative') - // 1 - top - // 2 - left - // 3 - zindex (if not default) - // targetWindow is either 'transcript' or 'sign' - // if there is room to the right of the player, position element there - // else if there is room the left of the player, position element there - // else position element beneath player - var gap, position, ableWidth, ableHeight, ableOffset, ableTop, ableLeft, - windowWidth, otherWindowWidth, zIndex; + var gap, position, ableWidth, ableOffset, ableLeft, windowWidth, otherWindowWidth; if (typeof targetWidth === 'undefined') { targetWidth = this.getDefaultWidth(targetWindow); } - gap = 5; // number of pixels to preserve between Able Player objects - - position = []; // position, top, left + gap = 5; + position = []; ableWidth = this.$ableDiv.width(); - ableHeight = this.$ableDiv.height(); ableOffset = this.$ableDiv.offset(); - ableTop = ableOffset.top; ableLeft = ableOffset.left; windowWidth = $(window).width(); - otherWindowWidth = 0; // width of other visiable draggable windows will be added to this + otherWindowWidth = 0; if (targetWindow === 'transcript') { - if (typeof this.$signWindow !== 'undefined') { - if (this.$signWindow.is(':visible')) { - otherWindowWidth = this.$signWindow.width() + gap; - } + if (typeof this.$signWindow !== 'undefined' && (this.$signWindow.is(':visible'))) { + otherWindowWidth = this.$signWindow.width() + gap; } - } - else if (targetWindow === 'sign') { - if (typeof this.$transcriptArea !== 'undefined') { - if (this.$transcriptArea.is(':visible')) { - otherWindowWidth = this.$transcriptArea.width() + gap; - } + } else if (targetWindow === 'sign') { + if (typeof this.$transcriptArea !== 'undefined' && (this.$transcriptArea.is(':visible'))) { + otherWindowWidth = this.$transcriptArea.width() + gap; } } if (targetWidth < (windowWidth - (ableLeft + ableWidth + gap + otherWindowWidth))) { - // there's room to the left of $ableDiv position[0] = 'absolute'; position[1] = 0; position[2] = ableWidth + otherWindowWidth + gap; - } - else if (targetWidth + gap < ableLeft) { - // there's room to the right of $ableDiv + } else if (targetWidth + gap < ableLeft) { position[0] = 'absolute'; position[1] = 0; position[2] = ableLeft - targetWidth - gap; - } - else { - // position element below $ableDiv + } else { position[0] = 'relative'; - // no need to define top, left, or z-index } return position; }; - AblePlayer.prototype.injectAlert = function () { - - // inject two alerts, one visible for all users and one for screen reader users only - - var top; - + AblePlayer.prototype.injectAlert = function ($container) { this.$alertBox = $('<div role="alert"></div>'); this.$alertBox.addClass('able-alert'); this.$alertBox.hide(); - this.$alertBox.appendTo(this.$ableDiv); - if (this.mediaType == 'audio') { - top = '-10'; - } - else { - // position just below top of video by default - // but this will change after video player is fully sized - // see control.js > resizePlayer() - top = '10'; - } - this.$alertBox.css({ - top: top + 'px' + + var $alertText = $( '<span></span>' ); + $alertText.appendTo(this.$alertBox); + + var $alertDismiss = $('<button type="button"></button>' ); + $alertDismiss.attr( 'aria-label', this.translate( 'dismissButton', 'Dismiss' ) ); + $alertDismiss.text( '×' ); + $alertDismiss.appendTo(this.$alertBox); + + $alertDismiss.on( 'click', function(e) { + $(this).parent('div').hide(); }); - this.$srAlertBox = $('<div role="alert"></div>'); - this.$srAlertBox.addClass('able-screenreader-alert'); - this.$srAlertBox.appendTo(this.$ableDiv); + this.$alertBox.appendTo($container); + + if ( ! this.$srAlertBox ) { + this.$srAlertBox = $('<div role="alert"></div>'); + this.$srAlertBox.addClass('able-screenreader-alert'); + this.$srAlertBox.appendTo($container); + } }; AblePlayer.prototype.injectPlaylist = function () { if (this.playlistEmbed === true) { - // move playlist into player, immediately before statusBarDiv var playlistClone = this.$playlistDom.clone(); playlistClone.insertBefore(this.$statusBarDiv); - // Update to the new playlist copy. this.$playlist = playlistClone.find('li'); } }; AblePlayer.prototype.createPopup = function (which, tracks) { - // Create popup menu and append to player - // 'which' parameter is either 'captions', 'chapters', 'prefs', 'transcript-window' or 'sign-window' - // 'tracks', if provided, is a list of tracks to be used as menu items - var thisObj, $menu, includeMenuItem, prefCats, i, $menuItem, prefCat, whichPref, - hasDefault, track, windowOptions, whichPref, whichMenu, - $thisItem, $prevItem, $nextItem; + var thisObj, $menu, includeMenuItem, i, $menuItem, prefCat, whichPref, hasDefault, track, + windowOptions, $thisItem, $prevItem, $nextItem, hasDescription, hasTranscript; thisObj = this; @@ -5259,26 +4061,28 @@ var AblePlayerInstances = []; $menu.addClass('able-popup-captions'); } - // Populate menu with menu items if (which === 'prefs') { if (this.prefCats.length > 1) { for (i = 0; i < this.prefCats.length; i++) { + prefCat = this.prefCats[i]; + hasDescription = ( thisObj.hasDescTracks || thisObj.hasOpenDesc || thisObj.hasClosedDesc ) ? true : false; + hasTranscript = ( thisObj.transcriptType === null ) ? false : true; + + if ( prefCat === 'descriptions' && ! hasDescription || prefCat === 'transcript' && ! hasTranscript ) { + continue; + } $menuItem = $('<li></li>',{ 'role': 'menuitem', 'tabindex': '-1' }); - prefCat = this.prefCats[i]; if (prefCat === 'captions') { - $menuItem.text(this.tt.prefMenuCaptions); - } - else if (prefCat === 'descriptions') { - $menuItem.text(this.tt.prefMenuDescriptions); - } - else if (prefCat === 'keyboard') { - $menuItem.text(this.tt.prefMenuKeyboard); - } - else if (prefCat === 'transcript') { - $menuItem.text(this.tt.prefMenuTranscript); + $menuItem.text( this.translate( 'prefMenuCaptions', 'Captions' ) ); + } else if (prefCat === 'descriptions') { + $menuItem.text( this.translate( 'prefMenuDescriptions', 'Descriptions' ) ); + } else if (prefCat === 'keyboard') { + $menuItem.text( this.translate( 'prefMenuKeyboard', 'Keyboard' ) ); + } else if (prefCat === 'transcript') { + $menuItem.text( this.translate( 'prefMenuTranscript', 'Transcript' ) ); } $menuItem.on('click',function() { whichPref = $(this).text(); @@ -5286,14 +4090,11 @@ var AblePlayerInstances = []; thisObj.setFullscreen(false); if (whichPref === thisObj.tt.prefMenuCaptions) { thisObj.captionPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuDescriptions) { + } else if (whichPref === thisObj.tt.prefMenuDescriptions) { thisObj.descPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuKeyboard) { + } else if (whichPref === thisObj.tt.prefMenuKeyboard) { thisObj.keyboardPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuTranscript) { + } else if (whichPref === thisObj.tt.prefMenuTranscript) { thisObj.transcriptPrefsDialog.show(); } thisObj.closePopups(); @@ -5302,22 +4103,17 @@ var AblePlayerInstances = []; $menu.append($menuItem); } this.$prefsButton.attr('data-prefs-popup','menu'); - } - else if (this.prefCats.length == 1) { - // only 1 category, so don't create a popup menu. - // Instead, open dialog directly when user clicks Prefs button + } else if (this.prefCats.length == 1) { this.$prefsButton.attr('data-prefs-popup',this.prefCats[0]); } - } - else if (which === 'captions' || which === 'chapters') { + } else if (which === 'captions' || which === 'chapters') { hasDefault = false; for (i = 0; i < tracks.length; i++) { track = tracks[i]; - if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { - includeMenuItem = false; - } - else { - includeMenuItem = true; + if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { + includeMenuItem = false; + } else { + includeMenuItem = true; } if (includeMenuItem) { $menuItem = $('<li></li>',{ @@ -5328,16 +4124,13 @@ var AblePlayerInstances = []; if (track.def && this.prefCaptions == 1) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); - } - // Get a label using track data + } if (which == 'captions') { $menuItem.text(track.label); $menuItem.on('click',this.getCaptionClickFunction(track)); - } - else if (which == 'chapters') { + } else if (which == 'chapters') { $menuItem.text(this.flattenCueForCaption(track) + ' - ' + this.formatSecondsAsColonTime(track.start)); $menuItem.on('click',this.getChapterClickFunction(track.start)); } @@ -5345,35 +4138,32 @@ var AblePlayerInstances = []; } } if (which === 'captions') { - // add a 'captions off' menu item $menuItem = $('<li></li>',{ 'role': 'menuitemradio', 'tabindex': '-1', - }).text(this.tt.captionsOff); + }).text( this.translate( 'captionsOff', 'Captions off' ) ); if (this.prefCaptions === 0) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); } $menuItem.on('click',this.getCaptionOffFunction()); $menu.append($menuItem); } - } - else if (which === 'transcript-window' || which === 'sign-window') { + } else if (which === 'transcript-window' || which === 'sign-window') { windowOptions = []; windowOptions.push({ 'name': 'move', - 'label': this.tt.windowMove + 'label': this.translate( 'windowMove', 'Move' ) }); windowOptions.push({ 'name': 'resize', - 'label': this.tt.windowResize + 'label': this.translate( 'windowResize', 'Resize' ) }); windowOptions.push({ 'name': 'close', - 'label': this.tt.windowClose + 'label': this.translate( 'windowClose', 'Close' ) }); for (i = 0; i < windowOptions.length; i++) { $menuItem = $('<li></li>',{ @@ -5382,12 +4172,9 @@ var AblePlayerInstances = []; 'data-choice': windowOptions[i].name }); $menuItem.text(windowOptions[i].label); - $menuItem.on('click mousedown',function(e) { + $menuItem.on('click',function(e) { e.stopPropagation(); if (typeof e.button !== 'undefined' && e.button !== 0) { - // this was a mouse click (if click is triggered by keyboard, e.button is undefined) - // and the button was not a left click (left click = 0) - // therefore, ignore this click return false; } if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { @@ -5398,68 +4185,49 @@ var AblePlayerInstances = []; $menu.append($menuItem); } } - // assign default item, if there isn't one already if (which === 'captions' && !hasDefault) { - // check the menu item associated with the default language - // as determined in control.js > syncTrackLanguages() if ($menu.find('li[lang=' + this.captionLang + ']')) { - // a track exists for the default language. Check that item in the menu $menu.find('li[lang=' + this.captionLang + ']').attr('aria-checked','true'); - } - else { - // check the last item (captions off) + } else { $menu.find('li').last().attr('aria-checked','true'); } - } - else if (which === 'chapters') { + } else if (which === 'chapters') { if ($menu.find('li:contains("' + this.defaultChapter + '")')) { $menu.find('li:contains("' + this.defaultChapter + '")').attr('aria-checked','true').addClass('able-focus'); - } - else { + } else { $menu.find('li').first().attr('aria-checked','true').addClass('able-focus'); } } - // add keyboard handlers for navigating within popups $menu.on('keydown',function (e) { - - whichMenu = $(this).attr('id').split('-')[1]; + $thisItem = $(this).find('li:focus'); if ($thisItem.is(':first-child')) { - // this is the first item in the menu - $prevItem = $(this).find('li').last(); // wrap to bottom + $prevItem = $(this).find('li').last(); $nextItem = $thisItem.next(); - } - else if ($thisItem.is(':last-child')) { - // this is the last Item + } else if ($thisItem.is(':last-child')) { $prevItem = $thisItem.prev(); - $nextItem = $(this).find('li').first(); // wrap to top - } - else { + $nextItem = $(this).find('li').first(); + } else { $prevItem = $thisItem.prev(); $nextItem = $thisItem.next(); } - if (e.which === 9) { // Tab + if (e.key === 'Tab') { if (e.shiftKey) { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else { + $prevItem.trigger('focus').addClass('able-focus'); + } else { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); + $nextItem.trigger('focus').addClass('able-focus'); } - } - else if (e.which === 40 || e.which === 39) { // down or right arrow + } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - else if (e.which == 38 || e.which === 37) { // up or left arrow + $nextItem.trigger('focus').addClass('able-focus'); + } else if (e.key == 'ArrowUp' || e.key === 'ArrowLeft') { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else if (e.which === 32 || e.which === 13) { // space or enter - $thisItem.click(); - } - else if (e.which === 27) { // Escape + $prevItem.trigger('focus').addClass('able-focus'); + } else if (e.key === ' ' || e.key === 'Enter') { + $thisItem.trigger( 'click' ); + } else if (e.key === 'Escape') { $thisItem.removeClass('able-focus'); thisObj.closePopups(); e.stopPropagation; @@ -5476,7 +4244,7 @@ var AblePlayerInstances = []; if (this.chaptersPopup && this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); - this.$chaptersButton.attr('aria-expanded','false').focus(); + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); } if (this.captionsPopup && this.captionsPopup.is(':visible')) { this.captionsPopup.hide(); @@ -5484,52 +4252,40 @@ var AblePlayerInstances = []; this.waitThenFocus(this.$ccButton); } if (this.prefsPopup && this.prefsPopup.is(':visible') && !this.hidingPopup) { - this.hidingPopup = true; // stopgap to prevent popup from re-opening again on keypress + this.hidingPopup = true; this.prefsPopup.hide(); - // restore menu items to their original state this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); this.$prefsButton.attr('aria-expanded', 'false'); if (!this.showingPrefsDialog) { this.waitThenFocus(thisObj.$prefsButton); } - // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; },100); } if (this.$volumeSlider && this.$volumeSlider.is(':visible')) { - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeButton.attr('aria-expanded', 'false').focus(); + this.$volumeSlider.hide().attr('aria-hidden','true'); + this.$volumeButton.attr('aria-expanded', 'false').trigger('focus'); } if (this.$transcriptPopup && this.$transcriptPopup.is(':visible')) { - this.hidingPopup = true; + this.hidingPopup = true; this.$transcriptPopup.hide(); - // restore menu items to their original state this.$transcriptPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$transcriptPopupButton.attr('aria-expanded','false').focus(); - // wait briefly, then reset hidingPopup + this.$transcriptPopupButton.attr('aria-expanded','false').trigger('focus'); setTimeout(function() { thisObj.hidingPopup = false; },100); } if (this.$signPopup && this.$signPopup.is(':visible')) { this.$signPopup.hide(); - // restore menu items to their original state this.$signPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$signPopupButton.attr('aria-expanded','false').focus(); + this.$signPopupButton.attr('aria-expanded','false').trigger('focus'); } }; AblePlayer.prototype.setupPopups = function (which) { - // Create and fill in the popup menu forms for various controls. - // parameter 'which' is passed if refreshing content of an existing popup ('captions' or 'chapters') - // If which is undefined, automatically setup 'captions', 'chapters', and 'prefs' popups - // However, only setup 'transcript-window' and 'sign-window' popups if passed as value of which - var popups, thisObj, hasDefault, i, j, - tracks, track, $trackButton, $trackLabel, - radioName, radioId, $menu, $menuItem, - prefCats, prefCat, prefLabel; + var popups, thisObj, i, tracks; popups = []; if (typeof which === 'undefined') { @@ -5556,33 +4312,26 @@ var AblePlayerInstances = []; thisObj = this; for (var i=0; i<popups.length; i++) { var popup = popups[i]; - hasDefault = false; if (popup == 'prefs') { this.prefsPopup = this.createPopup('prefs'); - } - else if (popup == 'captions') { + } else if (popup == 'captions') { if (typeof this.captionsPopup === 'undefined' || !this.captionsPopup) { this.captionsPopup = this.createPopup('captions',this.captions); } - } - else if (popup == 'chapters') { + } else if (popup == 'chapters') { if (this.selectedChapters) { tracks = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { tracks = this.chapters[0].cues; - } - else { + } else { tracks = []; } if (typeof this.chaptersPopup === 'undefined' || !this.chaptersPopup) { this.chaptersPopup = this.createPopup('chapters',tracks); } - } - else if (popup == 'transcript-window') { + } else if (popup == 'transcript-window') { return this.createPopup('transcript-window'); - } - else if (popup == 'sign-window') { + } else if (popup == 'sign-window') { return this.createPopup('sign-window'); } } @@ -5591,115 +4340,78 @@ var AblePlayerInstances = []; AblePlayer.prototype.provideFallback = function() { - // provide fallback in case of a critical error building the player - // to test, set data-test-fallback to either of the following values: - // 1 = emulate failure to build Able Player - // 2 = emulate browser that doesn't support HTML5 media var i, $fallback; - if (this.usingFallback) { - // fallback has already been implemented. - // stopgap to prevent this function from executing twice on the same media element - return; - } - else { - this.usingFallback = true; + if (this.usingFallback) { + return; + } else { + this.usingFallback = true; } - if (!this.testFallback) { - // this is not a test. - // an actual error has resulted in this function being called. - // use scenario 1 - this.testFallback = 1; + if (!this.testFallback) { + this.testFallback = 1; } - if (typeof this.$media === 'undefined') { - // this function has been called prior to initialize.js > reinitialize() - // before doing anything, need to create the jQuery media object - this.$media = $(this.media); - } - - // get/assign an id for the media element - if (this.$media.attr('id')) { - this.mediaId = this.$media.attr('id'); + if (typeof this.$media === 'undefined') { + this.$media = $(this.media); } - else { + + if (this.$media.attr('id')) { + this.mediaId = this.$media.attr('id'); + } else { this.mediaId = 'media' + Math.floor(Math.random() * 1000000000).toString(); - } - - // check whether element has nested fallback content - this.hasFallback = false; - if (this.$media.children().length) { - i = 0; - while (i < this.$media.children().length && !this.hasFallback) { - if (!(this.$media.children()[i].tagName === 'SOURCE' || - this.$media.children()[i].tagName === 'TRACK')) { - // this element is something other than <source> or <track> - this.hasFallback = true; + } + + this.hasFallback = false; + if (this.$media.children().length) { + i = 0; + while (i < this.$media.children().length && !this.hasFallback) { + if (!(this.$media.children()[i].tagName === 'SOURCE' || + this.$media.children()[i].tagName === 'TRACK')) { + this.hasFallback = true; } - i++; + i++; } } - if (!this.hasFallback) { - // the HTML code does not include any nested fallback content - // inject our own - // NOTE: this message is not translated, since fallback may be needed - // due to an error loading the translation file - // This will only be needed on very rare occasions, so English is ok. - $fallback = $('<p>').text('Media player unavailable.'); - this.$media.append($fallback); + if (!this.hasFallback) { + $fallback = $('<p>').text('Media player unavailable.'); + this.$media.append($fallback); } - // get height and width attributes, if present - // and add them to a style attribute - if (this.$media.attr('width')) { - this.$media.css('width',this.$media.attr('width') + 'px'); + if (this.$media.attr('width')) { + this.$media.css('width',this.$media.attr('width') + 'px'); } - if (this.$media.attr('height')) { - this.$media.css('height',this.$media.attr('height') + 'px'); + if (this.$media.attr('height')) { + this.$media.css('height',this.$media.attr('height') + 'px'); } - // Remove data-able-player attribute - this.$media.removeAttr('data-able-player'); + this.$media.removeAttr('data-able-player'); - // Add controls attribute (so browser will add its own controls) - this.$media.prop('controls',true); + this.$media.prop('controls',true); - if (this.testFallback == 2) { + if (this.testFallback == 2) { - // emulate browser failure to support HTML5 media by changing the media tag name - // browsers should display the supported content that's nested inside $(this.$media).replaceWith($('<foobar id="foobar-' + this.mediaId + '">')); - this.$newFallbackElement = $('#foobar-' + this.mediaId); - - // append all children from the original media - if (this.$media.children().length) { - i = this.$media.children().length - 1; - while (i >= 0) { - this.$newFallbackElement.prepend($(this.$media.children()[i])); - i--; + this.$newFallbackElement = $('#foobar-' + this.mediaId); + + if (this.$media.children().length) { + i = this.$media.children().length - 1; + while (i >= 0) { + this.$newFallbackElement.prepend($(this.$media.children()[i])); + i--; } } - if (!this.hasFallback) { - // inject our own fallback content, defined above + if (!this.hasFallback) { this.$newFallbackElement.append($fallback); } } - return; + return; }; AblePlayer.prototype.calculateControlLayout = function () { - // Calculates the layout for controls based on media and options. - // Returns an array with 4 keys (for legacy skin) or 2 keys (for 2020 skin) - // Keys are the following order: - // 0 = Top left - // 1 = Top right - // 2 = Bottom left (legacy skin only) - // 3 = Bottom right (legacy skin only) - // Each key contains an array of control names to put in that section. - var controlLayout, volumeSupported, playbackSupported, totalButtonWidth, numA11yButtons; + var controlLayout, playbackSupported, numA11yButtons; controlLayout = []; controlLayout[0] = []; @@ -5722,8 +4434,7 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[0].push('previous'); controlLayout[0].push('next'); - } - else if (this.skin == '2020') { + } else { controlLayout[0].push('previous'); controlLayout[0].push('next'); } @@ -5735,8 +4446,7 @@ var AblePlayerInstances = []; controlLayout[2].push('slower'); controlLayout[2].push('faster'); } - } - else { + } else { playbackSupported = false; } @@ -5745,8 +4455,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('captions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('captions'); } } @@ -5754,28 +4463,25 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('sign'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('sign'); } } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { if (this.hasOpenDesc || this.hasClosedDesc) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('descriptions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('descriptions'); } } } - if (this.transcriptType === 'popup' && !(this.hideTranscriptButton)) { + if (this.transcriptType !== null && !(this.hideTranscriptButton)) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('transcript'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('transcript'); } } @@ -5783,8 +4489,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('chapters'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('chapters'); } } @@ -5801,32 +4506,26 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[3].push('preferences'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('preferences'); } - if (this.mediaType === 'video' && this.allowFullscreen) { + if (this.mediaType === 'video' && this.allowFullscreen && this.nativeFullscreenSupported() ) { if (this.skin === 'legacy') { controlLayout[3].push('fullscreen'); - } - else { + } else { controlLayout[1].push('fullscreen'); } } if (this.browserSupportsVolume()) { - volumeSupported = true; // defined in case we decide to move volume button elsewhere this.volumeButton = 'volume-' + this.getVolumeName(this.volume); if (this.skin === 'legacy') { controlLayout[1].push('volume'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('volume'); } - } - else { - volumeSupported = false; + } else { this.volume = false; } return controlLayout; @@ -5834,30 +4533,20 @@ var AblePlayerInstances = []; AblePlayer.prototype.addControls = function() { - // determine which controls to show based on several factors: - // mediaType (audio vs video) - // availability of tracks (e.g., for closed captions & audio description) - // browser support (e.g., for sliders and speedButtons) - // user preferences (???) - // some controls are aligned on the left, and others on the right var thisObj, baseSliderWidth, controlLayout, numSections, - i, j, k, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, $pipeImg, - svgData, svgPath, control, - $buttonLabel, $buttonImg, buttonImgSrc, buttonTitle, $newButton, iconClass, buttonIcon, - buttonUse, buttonText, position, buttonHeight, buttonWidth, buttonSide, controllerWidth, - tooltipId, tooltipY, tooltipX, tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, - captionLabel, popupMenuId; + i, j, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, control, + buttonTitle, $newButton, buttonText, position, buttonHeight, + buttonWidth, buttonSide, controllerWidth, tooltipId, tooltipY, tooltipX, + tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, captionLabel, popupMenuId; thisObj = this; - baseSliderWidth = 100; // arbitrary value, will be recalculated in refreshControls() + baseSliderWidth = 100; - // Initialize the layout into the this.controlLayout variable. controlLayout = this.calculateControlLayout(); numSections = controlLayout.length; - // add an empty div to serve as a tooltip tooltipId = this.mediaId + '-tooltip'; this.$tooltipDiv = $('<div>',{ 'id': tooltipId, @@ -5865,105 +4554,55 @@ var AblePlayerInstances = []; }).hide(); this.$controllerDiv.append(this.$tooltipDiv); - if (this.skin == '2020') { - // add a full-width seek bar + if (this.skin == '2020') { $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); this.$controllerDiv.append($sliderDiv); - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); } + let $controlRow = $('<div class="able-control-row"></div>'); + this.$controllerDiv.append($controlRow); + for (i = 0; i < numSections; i++) { controls = controlLayout[i]; - if ((i % 2) === 0) { // even keys on the left + if ((i % 2) === 0) { $controllerSpan = $('<div>',{ 'class': 'able-left-controls' }); - } - else { // odd keys on the right + } else { $controllerSpan = $('<div>',{ 'class': 'able-right-controls' }); } - this.$controllerDiv.append($controllerSpan); + $controlRow.append($controllerSpan); for (j=0; j<controls.length; j++) { control = controls[j]; if (control === 'seek') { $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); $controllerSpan.append($sliderDiv); if (typeof this.duration === 'undefined' || this.duration === 0) { - // set arbitrary starting duration, and change it when duration is known this.duration = 60; - // also set elapsed to 0 this.elapsed = 0; } - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - else if (control === 'pipe') { + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + } else if (control === 'pipe') { $pipe = $('<span>', { 'tabindex': '-1', - 'aria-hidden': 'true' + 'aria-hidden': 'true', + 'class': 'able-pipe', }); - if (this.iconType === 'font') { - $pipe.addClass('icon-pipe'); - } - else { - $pipeImg = $('<img>', { - src: this.rootPath + 'button-icons/' + this.iconColor + '/pipe.png', - alt: '', - role: 'presentation' - }); - $pipe.append($pipeImg); - } + $pipe.append('|'); $controllerSpan.append($pipe); - } - else { - // this control is a button - if (control === 'volume') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + this.volumeButton + '.png'; - } - else if (control === 'fullscreen') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/fullscreen-expand.png'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/turtle.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/slower.png'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/rabbit.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/faster.png'; - } - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + control + '.png'; - } + } else { buttonTitle = this.getButtonTitle(control); - // icomoon documentation recommends the following markup for screen readers: - // 1. link element (or in our case, button). Nested inside this element: - // 2. span that contains the icon font (in our case, buttonIcon) - // 3. span that contains a visually hidden label for screen readers (buttonLabel) - // In addition, we are adding aria-label to the button (but not title) - // And if iconType === 'image', we are replacing #2 with an image (with alt="" and role="presentation") - // This has been thoroughly tested and works well in all screen reader/browser combinations - // See https://github.com/ableplayer/ableplayer/issues/81 - - // NOTE: Changed from <button> to <div role="button" as of 4.2.18 - // because <button> elements are rendered poorly in high contrast mode - // in some OS/browser/plugin combinations + $newButton = $('<div>',{ 'role': 'button', 'tabindex': '0', - 'aria-label': buttonTitle, 'class': 'able-button-handler-' + control }); @@ -5971,25 +4610,19 @@ var AblePlayerInstances = []; if (control == 'preferences') { this.prefCats = this.getPreferencesGroups(); if (this.prefCats.length > 1) { - // Prefs button will trigger a menu popupMenuId = this.mediaId + '-prefs-menu'; $newButton.attr({ 'aria-controls': popupMenuId, 'aria-haspopup': 'menu', 'aria-expanded': 'false' - }); - } - else if (this.prefCats.length === 1) { - // Prefs button will trigger a dialog + }); + } else if (this.prefCats.length === 1) { $newButton.attr({ 'aria-haspopup': 'dialog' }); } - } - else if (control === 'volume') { + } else if (control === 'volume') { popupMenuId = this.mediaId + '-volume-slider'; - // volume slider popup is not a menu or a dialog - // therefore, using aria-expanded rather than aria-haspopup to communicate properties/state $newButton.attr({ 'aria-controls': popupMenuId, 'aria-expanded': 'false' @@ -6002,210 +4635,70 @@ var AblePlayerInstances = []; } } } - if (this.iconType === 'font') { - if (control === 'volume') { - iconClass = 'icon-' + this.volumeButton; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-turtle'; - } - else { - iconClass = 'icon-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-rabbit'; - } - else { - iconClass = 'icon-faster'; - } - } - else { - iconClass = 'icon-' + control; - } - buttonIcon = $('<span>',{ - 'class': iconClass, - 'aria-hidden': 'true' - }); - $newButton.append(buttonIcon); + var getControl = control; + if ( control === 'faster' && this.speedIcons === 'animals' ) { + getControl = 'rabbit'; } - else if (this.iconType === 'svg') { - - /* - // Unused option for adding SVG: - // Use <use> element to link to button-icons/able-icons.svg - // Advantage: SVG file can be cached - // Disadvantage: Not supported by Safari 6, IE 6-11, or Edge 12 - // Instead, adding <svg> element within each <button> - if (control === 'volume') { - iconClass = 'svg-' + this.volumeButton; - } - else if (control === 'fullscreen') { - iconClass = 'svg-fullscreen-expand'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-turtle'; - } - else { - iconClass = 'svg-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-rabbit'; - } - else { - iconClass = 'svg-faster'; - } - } - else { - iconClass = 'svg-' + control; - } - buttonIcon = $('<svg>',{ - 'class': iconClass - }); - buttonUse = $('<use>',{ - 'xlink:href': this.rootPath + 'button-icons/able-icons.svg#' + iconClass - }); - buttonIcon.append(buttonUse); - / - var svgData; - if (control === 'volume') { - svgData = this.getSvgData(this.volumeButton); - } - else if (control === 'fullscreen') { - svgData = this.getSvgData('fullscreen-expand'); - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('turtle'); - } - else { - svgData = this.getSvgData('slower'); - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('rabbit'); - } - else { - svgData = this.getSvgData('faster'); - } - } - else { - svgData = this.getSvgData(control); - } - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - $newButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - $newButton.html($newButton.html()); + if ( control === 'slower' && this.speedIcons === 'animals' ) { + getControl = 'turtle'; } - else { - // use images - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); + if ( control === 'volume' ) { + this.getIcon( $newButton, this.volumeButton ); + } else { + if ( 'fullscreen' === getControl ) { + getControl = ( this.fullscreen ) ? 'fullscreen-collapse' : 'fullscreen-expand'; + } + this.getIcon( $newButton, getControl ); } - // add the visibly-hidden label for screen readers that don't support aria-label on the button - var $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(buttonTitle); - $newButton.append($buttonLabel); - // add an event listener that displays a tooltip on mouseenter or focus + + this.setText($newButton,buttonTitle); $newButton.on('mouseenter focus',function(e) { - // when entering a new tooltip, we can forget about hiding the previous tooltip. - // since the same tooltip div is used, it's location just changes. clearTimeout(tooltipTimerId); - var buttonText = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - // position() is expressed using top and left (of button); - // add right (of button) too, for convenience - var controllerWidth = thisObj.$controllerDiv.width(); + buttonText = $(this).attr('aria-label'); + position = $(this).position(); + buttonHeight = $(this).height(); + buttonWidth = $(this).width(); + controllerWidth = thisObj.$controllerDiv.width(); position.right = controllerWidth - position.left - buttonWidth; - // The following formula positions tooltip above the button - // var tooltipY = position.top - buttonHeight - 15; - - // The following formula positions tooltip below the button - // which allows the tooltip to be hoverable as per WCAG 2.x SC 1.4.13 - // without obstructing the seekbar - var tooltipY = position.top + buttonHeight + 5; + tooltipY = position.top + buttonHeight + 5; if ($(this).parent().hasClass('able-right-controls')) { - // this control is on the right side - var buttonSide = 'right'; - } - else { - // this control is on the left side - var buttonSide = 'left'; + buttonSide = 'right'; + } else { + buttonSide = 'left'; } - // populate tooltip, then calculate its width before showing it - var tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); - // center the tooltip horizontally over the button + tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); if (buttonSide == 'left') { - var tooltipX = position.left - tooltipWidth/2; + tooltipX = position.left - tooltipWidth/2; if (tooltipX < 0) { - // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: tooltipX + 'px', right: '', top: tooltipY + 'px' }; - } - else { - var tooltipX = position.right - tooltipWidth/2; + } else { + tooltipX = position.right - tooltipWidth/2; if (tooltipX < 0) { - // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: '', right: tooltipX + 'px', top: tooltipY + 'px' }; } - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); + tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { - // hide tooltip (original line of code) - // AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - // The above line was replaced with the following block - // in order to meet WCAG 2.x SC 1.4.13 - // (keep the tooltip visible if user hovers over it) - // This causes unwanted side effects if tooltips are positioned above the buttons - // as the persistent tooltip obstructs the seekbar, - // blocking users from being able to move a pointer from a button to the seekbar - // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons - - // clear existing timeout before reassigning variable clearTimeout(tooltipTimerId); tooltipTimerId = setTimeout(function() { - // give the user a half second to move cursor to tooltip before removing - // see https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus#hoverable AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }, 500); @@ -6216,95 +4709,69 @@ var AblePlayerInstances = []; thisObj.$tooltipDiv.on('mouseleave blur', function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }); - - }); + + }); }); if (control === 'captions') { if (!this.prefCaptions || this.prefCaptions !== 1) { - // captions are available, but user has them turned off if (this.captions.length > 1) { - captionLabel = this.tt.captions; - } - else { - captionLabel = this.tt.showCaptions; + captionLabel = this.translate( 'captions', 'Captions' ); + } else { + captionLabel = this.translate( 'showCaptions', 'Show captions' ); } $newButton.addClass('buttonOff').attr('title',captionLabel); $newButton.attr('aria-pressed', 'false'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { if (!this.prefDesc || this.prefDesc !== 1) { - // user prefer non-audio described version - // Therefore, load media without description - // Description can be toggled on later with this button - $newButton.addClass('buttonOff').attr('title',this.tt.turnOnDescriptions); + $newButton.addClass('buttonOff').attr( 'title', this.translate( 'turnOnDescriptions', 'Turn on descriptions' ) ); } } $controllerSpan.append($newButton); - // create variables of buttons that are referenced throughout the AblePlayer object if (control === 'play') { this.$playpauseButton = $newButton; - } - else if (control == 'previous') { + } else if (control == 'previous') { this.$prevButton = $newButton; - // if player is being rebuilt because user clicked the Prev button - // return focus to that (newly built) button if (this.buttonWithFocus == 'previous') { - this.$prevButton.focus(); + this.$prevButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control == 'next') { + } else if (control == 'next') { this.$nextButton = $newButton; - // if player is being rebuilt because user clicked the Next button - // return focus to that (newly built) button if (this.buttonWithFocus == 'next') { - this.$nextButton.focus(); + this.$nextButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control === 'captions') { + } else if (control === 'captions') { this.$ccButton = $newButton; - } - else if (control === 'sign') { + } else if (control === 'sign') { this.$signButton = $newButton; - // gray out sign button if sign language window is not active if (!(this.$signWindow.is(':visible'))) { this.$signButton.addClass('buttonOff'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { this.$descButton = $newButton; - // button will be enabled or disabled in description.js > initDescription() - } - else if (control === 'mute') { + } else if (control === 'mute') { this.$muteButton = $newButton; - } - else if (control === 'transcript') { + } else if (control === 'transcript') { this.$transcriptButton = $newButton; - // gray out transcript button if transcript is not active if (!(this.$transcriptDiv.is(':visible'))) { - this.$transcriptButton.addClass('buttonOff').attr('title',this.tt.showTranscript); + this.$transcriptButton.addClass('buttonOff').attr( 'title', this.translate( 'showTranscript', 'Show transcript' ) ); } - } - else if (control === 'fullscreen') { + } else if (control === 'fullscreen') { this.$fullscreenButton = $newButton; - } - else if (control === 'chapters') { + } else if (control === 'chapters') { this.$chaptersButton = $newButton; - } - else if (control === 'preferences') { + } else if (control === 'preferences') { this.$prefsButton = $newButton; - } - else if (control === 'volume') { + } else if (control === 'volume') { this.$volumeButton = $newButton; } } if (control === 'volume') { - // in addition to the volume button, add a hidden slider this.addVolumeSlider($controllerSpan); } } @@ -6314,260 +4781,46 @@ var AblePlayerInstances = []; } if (typeof this.$captionsDiv !== 'undefined') { - // stylize captions based on user prefs this.stylizeCaptions(this.$captionsDiv); } if (typeof this.$descDiv !== 'undefined') { - // stylize descriptions based on user's caption prefs this.stylizeCaptions(this.$descDiv); } - // combine left and right controls arrays for future reference this.controls = []; for (var sec in controlLayout) if (controlLayout.hasOwnProperty(sec)) { this.controls = this.controls.concat(controlLayout[sec]); } - // Update state-based display of controls. - this.refreshControls('init'); - }; - - AblePlayer.prototype.useSvg = function () { - - // Modified from IcoMoon.io svgxuse - // @copyright Copyright (c) 2016 IcoMoon.io - // @license Licensed under MIT license - // See https://github.com/Keyamoon/svgxuse - // @version 1.1.16 - - var cache = Object.create(null); // holds xhr objects to prevent multiple requests - var checkUseElems, - tid; // timeout id - var debouncedCheck = function () { - clearTimeout(tid); - tid = setTimeout(checkUseElems, 100); - }; - var unobserveChanges = function () { - return; - }; - var observeChanges = function () { - var observer; - window.addEventListener('resize', debouncedCheck, false); - window.addEventListener('orientationchange', debouncedCheck, false); - if (window.MutationObserver) { - observer = new MutationObserver(debouncedCheck); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - attributes: true - }); - unobserveChanges = function () { - try { - observer.disconnect(); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - } catch (ignore) {} - }; - } - else { - document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); - unobserveChanges = function () { - document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - }; - } - }; - var xlinkNS = 'http://www.w3.org/1999/xlink'; - checkUseElems = function () { - var base, - bcr, - fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. - hash, - i, - Request, - inProgressCount = 0, - isHidden, - url, - uses, - xhr; - if (window.XMLHttpRequest) { - Request = new XMLHttpRequest(); - if (Request.withCredentials !== undefined) { - Request = XMLHttpRequest; - } - else { - Request = XDomainRequest || undefined; - } - } - if (Request === undefined) { - return; - } - function observeIfDone() { - // If done with making changes, start watching for chagnes in DOM again - inProgressCount -= 1; - if (inProgressCount === 0) { // if all xhrs were resolved - observeChanges(); // watch for changes to DOM - } - } - function attrUpdateFunc(spec) { - return function () { - if (cache[spec.base] !== true) { - spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); - } - }; - } - function onloadFunc(xhr) { - return function () { - var body = document.body; - var x = document.createElement('x'); - var svg; - xhr.onload = null; - x.innerHTML = xhr.responseText; - svg = x.getElementsByTagName('svg')[0]; - if (svg) { - svg.setAttribute('aria-hidden', 'true'); - svg.style.position = 'absolute'; - svg.style.width = 0; - svg.style.height = 0; - svg.style.overflow = 'hidden'; - body.insertBefore(svg, body.firstChild); - } - observeIfDone(); - }; - } - function onErrorTimeout(xhr) { - return function () { - xhr.onerror = null; - xhr.ontimeout = null; - observeIfDone(); - }; - } - unobserveChanges(); // stop watching for changes to DOM - // find all use elements - uses = document.getElementsByTagName('use'); - for (i = 0; i < uses.length; i += 1) { - try { - bcr = uses[i].getBoundingClientRect(); - } catch (ignore) { - // failed to get bounding rectangle of the use element - bcr = false; - } - url = uses[i].getAttributeNS(xlinkNS, 'href').split('#'); - base = url[0]; - hash = url[1]; - isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; - if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { - // the use element is empty - // if there is a reference to an external SVG, try to fetch it - // use the optional fallback URL if there is no reference to an external SVG - if (fallback && !base.length && hash && !document.getElementById(hash)) { - base = fallback; - } - if (base.length) { - // schedule updating xlink:href - xhr = cache[base]; - if (xhr !== true) { - // true signifies that prepending the SVG was not required - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - if (xhr === undefined) { - xhr = new Request(); - cache[base] = xhr; - xhr.onload = onloadFunc(xhr); - xhr.onerror = onErrorTimeout(xhr); - xhr.ontimeout = onErrorTimeout(xhr); - xhr.open('GET', base); - xhr.send(); - inProgressCount += 1; - } - } - } - else { - if (!isHidden) { - if (cache[base] === undefined) { - // remember this URL if the use element was not empty and no request was sent - cache[base] = true; - } - else if (cache[base].onload) { - // if it turns out that prepending the SVG is not necessary, - // abort the in-progress xhr. - cache[base].abort(); - cache[base].onload = undefined; - cache[base] = true; - } - } - } - } - uses = ''; - inProgressCount += 1; - observeIfDone(); - }; -/ - // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. - window.addEventListener('load', function winLoad() { - window.removeEventListener('load', winLoad, false); // to prevent memory leaks - tid = setTimeout(checkUseElems, 0); - }, false); -/ + this.refreshControls(); }; AblePlayer.prototype.cuePlaylistItem = function(sourceIndex) { - // Move to a new item in a playlist. - // NOTE: Swapping source for audio description is handled elsewhere; - // see description.js > swapDescription() - - / - // Decided against preventing a reload of the current item in the playlist. - // If it's clickable, users should be able to click on it and expect something to happen. - // Leaving here though in case it's determined to be desirable. - if (sourceIndex === this.playlistItemIndex) { - // user has requested the item that's currently playing - // just ignore the request - return; - } - this.playlistItemIndex = sourceIndex; - / - var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, sources, s, i, $newSource, nowPlayingSpan; + var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, nowPlayingSpan; var thisObj = this; prevPlayer = this.player; - if (this.initializing) { // this is the first track - user hasn't pressed play yet - // do nothing. - } - else { - if (this.playerCreated) { - // remove the old + if (this.initializing) { + } else { + if (this.playerCreated) { this.deletePlayer('playlist'); } } - // set swappingSrc; needs to be true within recreatePlayer(), called below this.swappingSrc = true; - // if a new playlist item is being requested, and playback has already started, - // it should be ok to play automatically, regardless of how it was requested - if (this.startedPlaying) { - this.okToPlay = true; - } - else { - this.okToPlay = false; + if (this.startedPlaying) { + this.okToPlay = true; + } else { + this.okToPlay = false; } - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + this.loadingMedia = false; - // Determine appropriate player to play this media $newItem = this.$playlist.eq(sourceIndex); if (this.hasAttr($newItem,'data-youtube-id')) { this.youTubeId = this.getYouTubeId($newItem.attr('data-youtube-id')); @@ -6575,40 +4828,32 @@ var AblePlayerInstances = []; this.youTubeDescId = this.getYouTubeId($newItem.attr('data-youtube-desc-id')); } newPlayer = 'youtube'; - } - else if (this.hasAttr($newItem,'data-vimeo-id')) { + } else if (this.hasAttr($newItem,'data-vimeo-id')) { this.vimeoId = this.getVimeoId($newItem.attr('data-vimeo-id')); if (this.hasAttr($newItem,'data-vimeo-desc-id')) { this.vimeoDescId = this.getVimeoId($newItem.attr('data-vimeo-desc-id')); } newPlayer = 'vimeo'; - } - else { - newPlayer = 'html5'; + } else { + newPlayer = 'html5'; } if (newPlayer === 'youtube') { if (prevPlayer === 'html5') { - // pause and hide the previous media if (this.playing) { this.pauseMedia(); } this.$media.hide(); } - } - else { - // the new player is not youtube + } else { this.youTubeId = false; if (prevPlayer === 'youtube') { - // unhide the media element this.$media.show(); } } this.player = newPlayer; - // remove source and track elements from previous playlist item this.$media.empty(); - // transfer media attributes from playlist to media element if (this.hasAttr($newItem,'data-poster')) { this.$media.attr('poster',$newItem.attr('data-poster')); } @@ -6619,75 +4864,86 @@ var AblePlayerInstances = []; this.$media.attr('data-youtube-id',$newItem.attr('data-youtube-id')); } - // add new <source> elements from playlist data var $sourceSpans = $newItem.children('span.able-source'); if ($sourceSpans.length) { $sourceSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src')) { - // this is the only required attribute - var $newSource = $('<source>',{ - 'src': $(this).attr('data-src') - }); - if (thisObj.hasAttr($(this),'data-type')) { - $newSource.attr('type',$(this).attr('data-type')); - } - if (thisObj.hasAttr($(this),'data-desc-src')) { - $newSource.attr('data-desc-src',$(this).attr('data-desc-src')); - } - if (thisObj.hasAttr($(this),'data-sign-src')) { - $newSource.attr('data-sign-src',$(this).attr('data-sign-src')); + const $this = $(this); + + if (thisObj.hasAttr($this, "data-src")) { + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + + if (validate.isProtocolSafe(sanitizedSrc)) { + const $newSource = $("<source>", { src: sanitizedSrc }); + + const optionalAttributes = [ + "data-type", + "data-desc-src", + "data-sign-src", + ]; + + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + const attrValue = $this.attr(attr); + const sanitizedValue = DOMPurify.sanitize(attrValue); + + if (attr.endsWith("-src") && validate.isProtocolSafe(sanitizedValue)) { + $newSource.attr(attr, sanitizedValue); + } else if (!attr.endsWith("-src")) { + $newSource.attr(attr, sanitizedValue); + } + } + }); + + thisObj.$media.append($newSource); } - thisObj.$media.append($newSource); } }); } - // add new <track> elements from playlist data var $trackSpans = $newItem.children('span.able-track'); if ($trackSpans.length) { - // for each element in $trackSpans, create a new <track> element $trackSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src') && - thisObj.hasAttr($(this),'data-kind') && - thisObj.hasAttr($(this),'data-srclang')) { - // all required attributes are present - var $newTrack = $('<track>',{ - 'src': $(this).attr('data-src'), - 'kind': $(this).attr('data-kind'), - 'srclang': $(this).attr('data-srclang') - }); - if (thisObj.hasAttr($(this),'data-label')) { - $newTrack.attr('label',$(this).attr('data-label')); - } - if (thisObj.hasAttr($(this),'data-desc')) { - $newTrack.attr('data-desc',$(this).attr('data-desc')); + const $this = $(this); + if (thisObj.hasAttr($this, "data-src") && thisObj.hasAttr($this, "data-kind") && thisObj.hasAttr($this, "data-srclang")) { + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + if (validate.isProtocolSafe(sanitizedSrc)) { + const $newTrack = $("<track>", { + src: sanitizedSrc, + kind: $this.attr("data-kind"), + srclang: $this.attr("data-srclang"), + }); + const optionalAttributes = [ + "data-label", + "data-desc", + "data-default", + ]; + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + $newTrack.attr(attr, DOMPurify.sanitize($this.attr(attr))); + } + }); + thisObj.$media.append($newTrack); } - thisObj.$media.append($newTrack); } }); } - itemTitle = $newItem.text(); + itemTitle = DOMPurify.sanitize( $newItem.text() ); if (this.hasAttr($newItem,'lang')) { itemLang = $newItem.attr('lang'); } - // Update relevant arrays this.$sources = this.$media.find('source'); - // recreate player, informed by new attributes and track elements - if (this.recreatingPlayer) { - // stopgap to prevent multiple firings of recreatePlayer() - return; + if (this.recreatingPlayer) { + return; } - this.recreatePlayer().then(function() { + this.recreatePlayer().then(function() { - // update playlist to indicate which item is playing thisObj.$playlist.removeClass('able-current') .children('button').removeAttr('aria-current'); thisObj.$playlist.eq(sourceIndex).addClass('able-current') - .children('button').attr('aria-current','true'); - - // update Now Playing div + .children('button').attr('aria-current','true'); + if (thisObj.showNowPlaying === true) { if (typeof thisObj.$nowPlayingDiv !== 'undefined') { nowPlayingSpan = $('<span>'); @@ -6699,60 +4955,39 @@ var AblePlayerInstances = []; } } - // if thisObj.swappingSrc is true, media will autoplay when ready - if (thisObj.initializing) { // this is the first track - user hasn't pressed play yet + if (thisObj.initializing) { thisObj.swappingSrc = false; - } - else { + } else { if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } - } - else if (thisObj.player === 'youtube') { - thisObj.okToPlay = true; + } else if (thisObj.player === 'youtube') { + thisObj.okToPlay = true; } } thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed - }); + thisObj.playerCreated = true; + }); }; AblePlayer.prototype.deletePlayer = function(context) { - // remove player components that need to be rebuilt - // after swapping media sources that have different durations - // or explicitly declared data-desc attributes - // Context is one of the following: - // playlist - called from cuePlaylistItem() - // swap-desc-html - called from swapDescription with this.player == 'html' - // swap-desc-youtube - called from swapDescription with this.player == 'youtube' - // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' - if (this.player === 'youtube' && this.youTubePlayer) { - this.youTubePlayer.destroy(); + if (this.player === 'youtube' && this.youTubePlayer) { + this.youTubePlayer.destroy(); } - if (this.player === 'vimeo' && this.vimeoPlayer) { - this.vimeoPlayer.destroy(); + if (this.player === 'vimeo' && this.vimeoPlayer) { + this.vimeoPlayer.destroy(); } - -/ TODO - Investigate: when is this needed? - // remove previous video's attributes and child elements from media element - this.$media.removeAttr('poster width height'); - this.$media.empty(); -*/ - // Empty elements that will be rebuilt this.$controllerDiv.empty(); - // this.$statusBarDiv.empty(); - // this.$timer.empty(); - this.$elapsedTimeContainer.empty().text('0:00'); // span.able-elapsedTime - this.$durationContainer.empty(); // span.able-duration - - // Remove popup windows and modal dialogs; these too will be rebuilt + this.$elapsedTimeContainer.empty().text('0:00'); + this.$durationContainer.empty(); + if (this.$signWindow) { this.$signWindow.remove(); } @@ -6760,159 +4995,93 @@ var AblePlayerInstances = []; this.$transcriptArea.remove(); } $('.able-modal-dialog').remove(); - - // Remove caption and description wrappers + if (this.$captionsWrapper) { this.$captionsWrapper.remove(); } - if (this.$descDiv) { - this.$descDiv.remove(); + if (this.$descDiv) { + this.$descDiv.remove(); } - - // reset key variables + this.hasCaptions = false; this.hasChapters = false; - this.hasDescTracks = false; + this.hasDescTracks = false; this.hasOpenDesc = false; - this.hasClosedDesc = false; + this.hasClosedDesc = false; this.captionsPopup = null; this.chaptersPopup = null; this.transcriptType = null; - this.playerDeleted = true; // will reset to false in recreatePlayer() + this.playerDeleted = true; }; AblePlayer.prototype.getButtonTitle = function(control) { if (control === 'playpause') { - return this.tt.play; - } - else if (control === 'play') { - return this.tt.play; - } - else if (control === 'pause') { - return this.tt.pause; - } - else if (control === 'restart') { - return this.tt.restart; - } - else if (control === 'previous') { - return this.tt.prevTrack; - } - else if (control === 'next') { - return this.tt.nextTrack; - } - else if (control === 'rewind') { - return this.tt.rewind; - } - else if (control === 'forward') { - return this.tt.forward; - } - else if (control === 'captions') { + return this.translate( 'play', 'Play' ); + } else if (control === 'play') { + return this.translate( 'play', 'Play' ); + } else if (control === 'pause') { + return this.translate( 'pause', 'Pause' ); + } else if (control === 'restart') { + return this.translate( 'restart', 'Restart' ); + } else if (control === 'previous') { + return this.translate( 'prevTrack', 'Previous track' ); + } else if (control === 'next') { + return this.translate( 'nextTrack', 'Next track' ); + } else if (control === 'rewind') { + return this.translate( 'rewind', 'Rewind' ); + } else if (control === 'forward') { + return this.translate( 'forward', 'Forward' ); + } else if (control === 'captions') { if (this.captions.length > 1) { - return this.tt.captions; - } - else { - if (this.captionsOn) { - return this.tt.hideCaptions; - } - else { - return this.tt.showCaptions; - } - } - } - else if (control === 'descriptions') { - if (this.descOn) { - return this.tt.turnOffDescriptions; - } - else { - return this.tt.turnOnDescriptions; - } - } - else if (control === 'transcript') { - if (this.$transcriptDiv.is(':visible')) { - return this.tt.hideTranscript; - } - else { - return this.tt.showTranscript; - } - } - else if (control === 'chapters') { - return this.tt.chapters; - } - else if (control === 'sign') { - return this.tt.sign; - } - else if (control === 'volume') { - return this.tt.volume; - } - else if (control === 'faster') { - return this.tt.faster; - } - else if (control === 'slower') { - return this.tt.slower; - } - else if (control === 'preferences') { - return this.tt.preferences; - } - else if (control === 'help') { - // return this.tt.help; - } - else if (control === 'fullscreen') { - if (!this.fullscreen) { - return this.tt.enterFullscreen; - } - else { - return this.tt.exitFullscreen; - } - } - else { - // there should be no other controls, but just in case: - // return the name of the control with first letter in upper case - // ultimately will need to get a translated label from this.tt - if (this.debug) { - - } - return control.charAt(0).toUpperCase() + control.slice(1); + return this.translate( 'captions', 'Captions' ); + } else { + return (this.captionsOn) ? this.translate( 'hideCaptions', 'Hide captions' ) : this.translate( 'showCaptions', 'Show captions' ); + } + } else if (control === 'descriptions') { + return (this.descOn) ? this.translate( 'turnOffDescriptions', 'Turn off descriptions' ) : this.translate( 'turnOnDescriptions', 'Turn on descriptions' ); + } else if (control === 'transcript') { + return (this.$transcriptDiv.is(':visible')) ? this.translate( 'hideTranscript', 'Hide transcript' ) : this.translate( 'showTranscript', 'Show transcript' ); + } else if (control === 'chapters') { + return this.translate( 'chapters', 'Chapters' ); + } else if (control === 'sign') { + return this.translate( 'sign', 'Sign language' ); + } else if (control === 'volume') { + return this.translate( 'volume', 'Volume' ); + } else if (control === 'faster') { + return this.translate( 'faster', 'Faster' ); + } else if (control === 'slower') { + return this.translate( 'slower', 'Slower' ); + } else if (control === 'preferences') { + return this.translate( 'preferences', 'Preferences' ); + } else if (control === 'fullscreen') { + return ( !this.fullscreen ) ? this.translate( 'enterFullScreen', 'Enter full screen' ) : this.translate( 'exitFullScreen', 'Exit full screen' ); + } else { + if (this.debug) { + + } + return this.capitalizeFirstLetter( control ); } }; - - })(jQuery); -/** - * @file validate.js - * @description This file contains the code to validate the VTT data. - */ -/** PRE-SANITIZED FUNCTIONS - * Some of the VTT attributes need to be transformed before being sanitized by DOMPurify. - * @namespace preProcessing - */ var preProcessing = { - /** - * Transforms tags with class names separated by dots into tags with a class attribute containing space-separated class names. - * @memberof preProcessing - * @param {string} vttContent - The content of the VTT. - * @returns {string} - The VTT content with processed tags. - / transformCSSClasses: function (vttContent) { + if ( vttContent.length > 1000 ) { + throw new Error( "Input too long" ); + } return vttContent.replace( /<(v|c|b|i|u|lang|ruby)\.([\w\.]+)([^>])>/g, function (_, tag, cssClasses, otherAttrs) { - var classAttr = cssClasses.split(".").join(" "); - return "<" + tag + ' class="' + classAttr + '"' + otherAttrs + ">"; + var classAttr = cssClasses.replace(/\./g, " "); + return `<${tag} class="${classAttr}"${otherAttrs}>`; } ); }, - /** - * Transforms <lang> tags by adding a lang attribute with the language code. - * @memberof preProcessing - * @param {string} content - The content with processed CSS classes. - * @returns {string} - The content with <lang> tags transformed. - / transformLangTags: function (content) { return content.replace( /<lang\s+([\w-]+)([^>])>/g, @@ -6922,12 +5091,6 @@ var preProcessing = { ); }, - /** - * Transforms <v> tags by adding a title attribute with the concatenated text and retaining other attributes. - * @memberof preProcessing - * @param {string} content - The content with processed <lang> tags. - * @returns {string} - The content with <v> tags transformed. - / transformVTags: function (content) { return content.replace(/<v\s+([^>]?)>/g, function (_, tagAttributes) { var classMatch = tagAttributes.match(/class="([^"]*)"/); @@ -6940,7 +5103,6 @@ var preProcessing = { var attributes = []; var titleParts = []; - // Iterate over each token of the tag content nonClassAttributes.forEach(function (token) { if (token.indexOf("=") !== -1) { attributes.push(token); @@ -6970,49 +5132,30 @@ var preProcessing = { }, }; -/** POST-SANITIZED FUNCTIONS - * After sanitizing the VTT data, some tags need to be transformed back to their original form. - * @namespace postProcessing - */ var postProcessing = { - /** - * Post-processes <c> tags by converting class attributes to dot-separated class names. - * @memberof postProcessing - * @param {string} vttContent - The VTT content to be processed. - * @returns {string} - The VTT content with processed <c> tags. - */ postprocessCTag: function (vttContent) { return vttContent.replace( /<c class="([\w\s]+)">/g, function (_, classNames) { - var classes = classNames.split(" ").join("."); + var classes = classNames.replace(/ /g, "."); return "<c." + classes + ">"; } ); }, - /** - * Post-processes <v> tags by converting class attributes to dot-separated class names. - * @memberof postProcessing - * @param {string} vttContent - The VTT content to be processed. - * @returns {string} - The VTT content with processed <v> tags. - / postprocessVTag: function (vttContent) { return vttContent.replace( - /<v class="([\w\s]+)"([^>])>/g, - function (_, classNames, otherAttrs) { - var classes = classNames.split(" ").join("."); - return "<v." + classes + otherAttrs + ">"; + /<v([^>])class="([\w\s]+)"([^>])>/g, + function (_, beforeClass, classNames, afterClass) { + var classes = classNames.trim().split(/\s+/).join("."); + var attrs = (beforeClass + afterClass) + .replace(/\s*class="[\w\s]+"/, "") + .trim(); + return "<v." + classes + (attrs ? " " + attrs : "") + ">"; } ); }, - /** - * Post-processes <lang> tags by removing the lang attribute and placing the language code directly in the tag. - * @memberof postProcessing - * @param {string} vttContent - The VTT content to be processed. - * @returns {string} - The VTT content with processed <lang> tags. - / postprocessLangTag: function (vttContent) { return vttContent.replace( /<lang lang="([\w-]+)"([^>])>/g, @@ -7023,18 +5166,7 @@ var postProcessing = { }, }; -/** - * Preprocesses, sanitizes and post-processes VTT content. - * @namespace validate - */ var validate = { - /** - * Sets up the VTT content before sanitizing by transforming tags. - * This way DOM purify will process the tags correctly. - * @memberof validate - * @param {string} vttContent - The original content of the VTT. - * @returns {string} - The VTT content for the next and final step of preprocessing. - */ preProcessVttContent: function (vttContent) { var processedCSS = preProcessing.transformCSSClasses(vttContent); var processedLang = preProcessing.transformLangTags(processedCSS); @@ -7042,21 +5174,15 @@ var validate = { return processedVTags; }, - /** - * Post-processes the sanitized VTT data by converting class attributes to dot-separated class names and other transformations. - * @memberof validate - * @param {string} sanitizedVttContent - The sanitized VTT content to be post-processed. - * @param {string} originalVttContent - The original VTT content before sanitization. - * @returns {string} - The post-processed VTT content. - */ postProcessVttContent: function (sanitizedVttContent, originalVttContent) { var processedCTags = postProcessing.postprocessCTag(sanitizedVttContent); var processedVTags = postProcessing.postprocessVTag(processedCTags); var processedLangTags = postProcessing.postprocessLangTag(processedVTags); var arrowReplaced = processedLangTags.replace(/-->/g, "-->"); + var timestampTagReplaced = arrowReplaced.replace(/<([\d:.]+)>/g, '<$1>'); - var finalContent = arrowReplaced.replace( + var finalContent = timestampTagReplaced.replace( /<\/v>/g, function (match, offset) { return originalVttContent.indexOf(match, offset) !== -1 ? match : ""; @@ -7066,12 +5192,6 @@ var validate = { return finalContent; }, - /** - * Sanitizes the VTT data by removing unwanted tags and attributes, and then post-processes it. - * @memberof validate - * @param {string} vttContent - The VTT content to be sanitized and post-processed. - * @returns {string} - The fully processed VTT content. - / sanitizeVttContent: function (vttContent) { if (vttContent === null || vttContent === undefined) { return ""; @@ -7091,48 +5211,39 @@ var validate = { return validate.postProcessVttContent(sanitizedVttContent, vttContent); }, + isProtocolSafe: function (url) { + try { + const parsedUrl = new URL(url, window.location.origin); + return ["http:", "https:"].includes(parsedUrl.protocol); + } catch (e) { + return false; + } + }, }; -// Export the object for use in other files if (typeof module !== "undefined" && module.exports) { module.exports = validate; } -// End of validate.js (function ($) { - // Loads files referenced in track elements, and performs appropriate setup. - // For example, captions and text descriptions. - // This will be called whenever the player is recreated. - // Added in v2.2.23: Also handles YouTube caption tracks AblePlayer.prototype.setupTracks = function () { - var thisObj, - deferred, - promise, - loadingPromises, - loadingPromise, - i, - tracks, - track, - kind; + var thisObj, deferred, promise, loadingPromises, loadingPromise, i, tracks, track, kind; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); loadingPromises = []; if ($("#able-vts").length) { - // Page includes a container for a VTS instance this.vtsTracks = []; this.hasVts = true; } else { this.hasVts = false; } - // Source array for populating the above arrays - // varies, depending on whether there are dedicated description tracks if (this.hasDescTracks && this.descOn) { tracks = this.altTracks; } else { @@ -7140,56 +5251,48 @@ if (typeof module !== "undefined" && module.exports) { } for (i = 0; i < tracks.length; i++) { track = tracks[i]; - kind = track.kind; + kind = ( track.kind ) ? track.kind : 'subtitles'; if (!track.src) { if (thisObj.usingYouTubeCaptions || thisObj.usingVimeoCaptions) { - // skip all the hullabaloo and go straight to setupCaptions thisObj.setupCaptions(track); - } else { - // Nothing to load! - // Skip this track; move on to next i } continue; } - var trackSrc = track.src; - loadingPromise = this.loadTextObject(track.src); // resolves with src, trackText + var trackSrc = track.src; + loadingPromise = this.loadTextObject(trackSrc); loadingPromises.push( loadingPromise.catch(function (src) { - - }) + + }) ); loadingPromise.then( (function (track, kind) { - var trackSrc = track.src; + trackSrc = track.src; var trackLang = track.language; var trackLabel = track.label; var trackDesc = track.desc; - return function (trackSrc, trackText) { - // these are the two vars returned from loadTextObject - - var trackContents = trackText; - var cues = thisObj.parseWebVTT(trackSrc, trackContents).cues; + return function (data) { + var cues = thisObj.parseWebVTT(data).cues; if (thisObj.hasVts) { - // setupVtsTracks() is in vts.js thisObj.setupVtsTracks( kind, trackLang, trackDesc, trackLabel, trackSrc, - trackContents + data.text ); } - if (kind === "captions" || kind === "subtitles") { + if (kind === 'captions' || kind === 'subtitles') { thisObj.setupCaptions(track, cues); - } else if (kind === "descriptions") { + } else if (kind === 'descriptions') { thisObj.setupDescriptions(track, cues); - } else if (kind === "chapters") { + } else if (kind === 'chapters') { thisObj.setupChapters(track, cues); - } else if (kind === "metadata") { - thisObj.setupMetadata(track, cues); + } else if (kind === 'metadata') { + thisObj.setupMetadata(cues); } }; })(track, kind) @@ -7206,89 +5309,58 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.getTracks = function () { - // define an array tracks with the following structure: - // kind - string, e.g. "captions", "descriptions" - // src - string, URL of WebVTT source file - // language - string, lang code - // label - string to display, e.g., in CC menu - // def - Boolean, true if this is the default track - // cues - array with startTime, endTime, and payload - // desc - Boolean, true if track includes a data-desc attribute - var thisObj, - deferred, - promise, - captionTracks, - altCaptionTracks, - trackLang, - trackLabel, - isDefault, - forDesc, - hasDefault, - hasTrackInDefLang, - trackFound, - i, - j, - capLabel, - inserted; + var thisObj, deferred, promise, trackLang, trackLabel, isDefault, forDesc, + hasDefault, hasTrackInDefLang, trackFound, i; thisObj = this; hasDefault = false; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.$tracks = this.$media.find("track"); - this.tracks = []; // only includes tracks that do NOT have data-desc - this.altTracks = []; // only includes tracks that DO have data-desc + this.$tracks = this.$media.find('track'); + this.tracks = []; + this.altTracks = []; - // Arrays for each kind, to be populated later this.captions = []; this.descriptions = []; this.chapters = []; this.meta = []; - this.hasCaptionsTrack = false; // will change to true if one or more tracks has kind="captions" - this.hasDescTracks = false; // will change to true if one or more tracks has data-desc + this.hasCaptionsTrack = false; + this.hasDescTracks = false; if (this.$tracks.length) { this.usingYouTubeCaptions = false; - // create object from HTML5 tracks this.$tracks.each(function (index, element) { - if ($(this).attr("kind") === "captions") { + if ($(this).attr('kind') === 'captions') { thisObj.hasCaptionsTrack = true; - } else if ($(this).attr("kind") === "descriptions") { + } else if ($(this).attr('kind') === 'descriptions') { thisObj.hasClosedDesc = true; } - // srcLang should always be included with <track>, but HTML5 spec doesn't require it - // if not provided, assume track is the same language as the default player language - if ($(this).attr("srclang")) { - trackLang = $(this).attr("srclang"); + if ($(this).attr('srclang')) { + trackLang = $(this).attr('srclang'); } else { trackLang = thisObj.lang; } - if ($(this).attr("label")) { - trackLabel = $(this).attr("label"); + if ($(this).attr('label')) { + trackLabel = $(this).attr('label'); } else { trackLabel = thisObj.getLanguageName(trackLang); } - if (typeof $(this).attr("default") !== "undefined" && !hasDefault) { + if (typeof $(this).attr('default') !== 'undefined' && !hasDefault) { isDefault = true; hasDefault = true; } else if (trackLang === thisObj.lang) { - // this track is in the default lang of the player - // save this for later - // if there is no other default track specified - // this will be the default hasTrackInDefLang = true; - isDefault = false; // for now; this could change if there's no default attribute + isDefault = false; } else { isDefault = false; } if (isDefault) { - // this.captionLang will also be the default language for non-caption tracks thisObj.captionLang = trackLang; } @@ -7300,8 +5372,8 @@ if (typeof module !== "undefined" && module.exports) { } if (forDesc) { thisObj.altTracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -7309,8 +5381,8 @@ if (typeof module !== "undefined" && module.exports) { }); } else { thisObj.tracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -7319,38 +5391,30 @@ if (typeof module !== "undefined" && module.exports) { } if (index == thisObj.$tracks.length - 1) { - // This is the last track. if (!hasDefault) { if (hasTrackInDefLang) { thisObj.captionLang = thisObj.lang; trackFound = false; i = 0; while (i < thisObj.tracks.length && !trackFound) { - if (thisObj.tracks[i]["language"] === thisObj.lang) { - thisObj.tracks[i]["def"] = true; + if (thisObj.tracks[i]['language'] === thisObj.lang) { + thisObj.tracks[i]['def'] = true; trackFound = true; } i++; } } else { - // use the first track - thisObj.tracks[0]["def"] = true; - thisObj.captionLang = thisObj.tracks[0]["language"]; + thisObj.tracks[0]['def'] = true; + thisObj.captionLang = thisObj.tracks[0]['language']; } } - // Remove 'default' attribute from all <track> elements - // This data has already been saved to this.tracks - // and some browsers will display the default captions, - // despite all standard efforts to suppress them thisObj.$media.find("track").removeAttr("default"); } }); } if (!this.$tracks.length || !this.hasCaptionsTrack) { - // this media has no track elements - // if this is a youtube or vimeo player, check there for captions/subtitles - if (this.player === "youtube") { - this.getYouTubeCaptionTracks(this.youTubeId).then(function () { + if (this.player === 'youtube') { + this.getYouTubeCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingYouTubeCaptions = true; if (thisObj.$captionsWrapper) { @@ -7359,7 +5423,7 @@ if (typeof module !== "undefined" && module.exports) { } deferred.resolve(); }); - } else if (this.player === "vimeo") { + } else if (this.player === 'vimeo') { this.getVimeoCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingVimeoCaptions = true; @@ -7370,8 +5434,6 @@ if (typeof module !== "undefined" && module.exports) { deferred.resolve(); }); } else { - // this is neither YouTube nor Vimeo - // there just ain't no tracks (captions or otherwise) this.hasCaptions = false; if (thisObj.$captionsWrapper) { thisObj.$captionsWrapper.remove(); @@ -7379,30 +5441,21 @@ if (typeof module !== "undefined" && module.exports) { deferred.resolve(); } } else { - // there is at least one track with kind="captions" deferred.resolve(); } return promise; }; AblePlayer.prototype.setupCaptions = function (track, cues) { - // Setup player for display of captions (one track at a time) - var thisObj, captions, inserted, i, capLabel; + var inserted, i, capLabel; - // Insert track into captions array - // in its proper alphabetical sequence by label if (typeof cues === "undefined") { cues = null; } if (this.usingYouTubeCaptions || this.usingVimeoCaptions) { - // this.captions has already been populated - // For YouTube, this happens in youtube.js > getYouTubeCaptionTracks() - // For VImeo, this happens in vimeo.js > getVimeoCaptionTracks() - // So, nothing to do here... } else { if (this.captions.length === 0) { - // this is the first this.captions.push({ language: track.language, label: track.label, @@ -7410,12 +5463,10 @@ if (typeof module !== "undefined" && module.exports) { cues: cues, }); } else { - // there are already captions in the array inserted = false; for (i = 0; i < this.captions.length; i++) { capLabel = track.label; if (capLabel.toLowerCase() < this.captions[i].label.toLowerCase()) { - // insert before track i this.captions.splice(i, 0, { language: track.language, label: track.label, @@ -7427,7 +5478,6 @@ if (typeof module !== "undefined" && module.exports) { } } if (!inserted) { - // just add track to the end this.captions.push({ language: track.language, label: track.label, @@ -7438,7 +5488,6 @@ if (typeof module !== "undefined" && module.exports) { } } - // there are captions available this.hasCaptions = true; this.currentCaption = -1; if (this.prefCaptions === 1) { @@ -7446,15 +5495,14 @@ if (typeof module !== "undefined" && module.exports) { } else if (this.prefCaptions === 0) { this.captionsOn = false; } else { - // user has no prefs. Use default state. if (this.defaultStateCaptions === 1) { this.captionsOn = true; } else { this.captionsOn = false; } } - if (this.mediaType === "audio" && this.captionsOn) { - this.$captionsContainer.removeClass("captions-off"); + if (this.mediaType === 'audio' && this.captionsOn) { + this.$captionsContainer.removeClass('captions-off'); } if ( @@ -7462,19 +5510,17 @@ if (typeof module !== "undefined" && module.exports) { (this.$captionsWrapper && !$.contains(this.$ableDiv[0], this.$captionsWrapper[0])) ) { - // captionsWrapper either doesn't exist, or exists in an orphaned state - // Either way, it needs to be rebuilt... - this.$captionsDiv = $("<div>", { + this.$captionsDiv = $('<div>', { class: "able-captions", }); - this.$captionsWrapper = $("<div>", { - class: "able-captions-wrapper", - "aria-hidden": "true", + this.$captionsWrapper = $('<div>', { + class: 'able-captions-wrapper', + 'aria-hidden': 'true', }).hide(); - if (this.prefCaptionsPosition === "below") { - this.$captionsWrapper.addClass("able-captions-below"); + if (this.prefCaptionsPosition === 'below') { + this.$captionsWrapper.addClass('able-captions-below'); } else { - this.$captionsWrapper.addClass("able-captions-overlay"); + this.$captionsWrapper.addClass('able-captions-overlay'); } this.$captionsWrapper.append(this.$captionsDiv); this.$captionsContainer.append(this.$captionsWrapper); @@ -7482,9 +5528,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.setupDescriptions = function (track, cues) { - // called via setupTracks() only if there is track with kind="descriptions" - // prepares for delivery of text description , in case it's needed - // whether and how it's delivered is controlled within description.js > initDescription() this.hasClosedDesc = true; this.currentDescription = -1; @@ -7495,8 +5538,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.setupChapters = function (track, cues) { - // NOTE: WebVTT supports nested timestamps (to form an outline) - // This is not currently supported. this.hasChapters = true; this.chapters.push({ @@ -7505,19 +5546,16 @@ if (typeof module !== "undefined" && module.exports) { }); }; - AblePlayer.prototype.setupMetadata = function (track, cues, trackDesc) { - if (this.metaType === "text") { - // Metadata is only supported if data-meta-div is provided - // The player does not display metadata internally + AblePlayer.prototype.setupMetadata = function (cues) { + if (this.metaType === 'text') { if (this.metaDiv) { - if ($("#" + this.metaDiv)) { - // container exists - this.$metaDiv = $("#" + this.metaDiv); + if ($('#' + this.metaDiv)) { + this.$metaDiv = $('#' + this.metaDiv); this.hasMeta = true; this.meta = cues; } } - } else if (this.metaType === "selector") { + } else if (this.metaType === 'selector') { this.hasMeta = true; this.visibleSelectors = []; this.meta = cues; @@ -7525,89 +5563,71 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.loadTextObject = function (src) { - // TODO: Incorporate the following function, moved from setupTracks() - // convert XML/TTML captions file - / - if (thisObj.useTtml && (trackSrc.endsWith('.xml') || trackText.startsWith('<?xml'))) { - trackContents = thisObj.ttml2webvtt(trackText); - } - / var deferred, promise, thisObj, $tempDiv; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - // create a temp div for holding data - $tempDiv = $("<div>", { - style: "display:none", + $tempDiv = $('<div>', { + style: 'display:none', }); - // Fetch the content manually so it can be sanitized - $.ajax({ - url: src, - dataType: "text", - success: function (data) { - // Sanitize the fetched content - var sanitizedTrackText = validate.sanitizeVttContent(data); + fetch(src) + .then( response => { - // Load the sanitized content into the $tempDiv - $tempDiv.html(sanitizedTrackText); + return response.text(); + }) + .then( vtt => { + var preParsed = vtt.split(/\r?\n\s\r?\n/); + var lines = '', line; - // Resolve the promise with the sanitized content - deferred.resolve(src, sanitizedTrackText); + preParsed.forEach((l) => { + line = validate.sanitizeVttContent(l); + lines += line + "\n\n"; + }); + $tempDiv.html(lines); + let data = { 'src': src, 'text': lines }; + deferred.resolve(data); + $tempDiv.remove(); + }) + .catch( error => { + if (thisObj.debug) { - $tempDiv.remove(); - }, - error: function (req, status, error) { - if (thisObj.debug) { - - } - deferred.reject(src); - $tempDiv.remove(); - }, - }); + } + deferred.reject(src); + $tempDiv.remove(); + }); return promise; }; })(jQuery); - (function ($) { + AblePlayer.prototype.initYouTubePlayer = function () { - var thisObj, deferred, promise, youTubeId, googleApiPromise, json; + var thisObj, deferred, promise, youTubeId; thisObj = this; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.youTubePlayerReady = false; + this.youTubePlayerReady = false; + + youTubeId = (this.youTubeDescId && this.prefDesc) ? this.youTubeDescId : this.youTubeId; - // if a described version is available && user prefers desription - // init player using the described version - if (this.youTubeDescId && this.prefDesc) { - youTubeId = this.youTubeDescId; - } - else { - youTubeId = this.youTubeId; - } this.activeYouTubeId = youTubeId; if (AblePlayer.youTubeIframeAPIReady) { - // Script already loaded and ready. thisObj.finalizeYoutubeInit().then(function() { deferred.resolve(); }); - } - else { - // Has another player already started loading the script? If so, abort... + } else { if (!AblePlayer.loadingYouTubeIframeAPI) { - $.getScript('https://www.youtube.com/iframe_api').fail(function () { - deferred.fail(); - }); + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + + }); } - // Otherwise, keeping waiting for script load event... $('body').on('youTubeIframeAPIReady', function () { thisObj.finalizeYoutubeInit().then(function() { deferred.resolve(); @@ -7619,110 +5639,86 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.finalizeYoutubeInit = function () { - // This is called once we're sure the Youtube iFrame API is loaded -- see above - - var deferred, promise, thisObj, containerId, ccLoadPolicy, videoDimensions, autoplay; + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - thisObj = this; - containerId = this.mediaId + '_youtube'; this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // NOTE: Tried the following in place of the above in January 2016 - // because in some cases two videos were being added to the DOM - // However, once v2.2.23 was fairly stable, unable to reproduce that problem - // so maybe it's not an issue. This is preserved here temporarily, just in case it's needed... - // thisObj.$mediaContainer.html($('<div>').attr('id', containerId)); - - // cc_load_policy: - // 0 - show captions depending on user's preference on YouTube - // 1 - show captions by default, even if the user has turned them off - // IMPORTANT: This must be set to 1 or some browsers - // fail to load any texttracks (observed in Chrome, not in Firefox) - ccLoadPolicy = 1; - if (this.okToPlay) { - autoplay = 1; - } - else { - autoplay = 0; - } + ccLoadPolicy = 1; + autoplay = (this.okToPlay) ? 1 : 0; - // Documentation https://developers.google.com/youtube/player_parameters - if (typeof this.captionLang == 'undefined') { - // init using the default player lang - this.captionLang = this.lang; + if (typeof this.captionLang == 'undefined') { + this.captionLang = this.lang; } this.youTubePlayer = new YT.Player(containerId, { videoId: this.activeYouTubeId, host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', playerVars: { autoplay: autoplay, + cc_lang_pref: this.captionLang, + cc_load_policy: ccLoadPolicy, + controls: 0, + disableKb: 1, enablejsapi: 1, - disableKb: 1, // disable keyboard shortcuts, using our own + hl: this.lang, + iv_load_policy: 3, + origin: window.location.origin, playsinline: this.playsInline, - start: this.startTime, - controls: 0, // no controls, using our own - cc_load_policy: ccLoadPolicy, - cc_lang_pref: this.captionLang, // set the caption language - hl: this.lang, // set the UI language to match Able Player - modestbranding: 1, // no YouTube logo in controller - rel: 0, // when video ends, show only related videos from same channel (1 shows any) - iv_load_policy: 3 // do not show video annotations + rel: 0, + start: this.startTime }, events: { onReady: function () { - thisObj.youTubePlayerReady = true; - if (!thisObj.playerWidth || !thisObj.playerHeight) { + thisObj.youTubePlayerReady = true; + if (!thisObj.playerWidth || !thisObj.playerHeight) { thisObj.getYouTubeDimensions(); } - if (thisObj.playerWidth && thisObj.playerHeight) { + if (thisObj.playerWidth && thisObj.playerHeight) { thisObj.youTubePlayer.setSize(thisObj.playerWidth,thisObj.playerHeight); - thisObj.$ableWrapper.css({ - 'width': thisObj.playerWidth + 'px' - }); } if (thisObj.swappingSrc) { - // swap is now complete thisObj.swappingSrc = false; thisObj.restoreFocus(); thisObj.cueingPlaylistItem = false; if (thisObj.playing || thisObj.okToPlay) { - // resume playing thisObj.playMedia(); } } if (thisObj.userClickedPlaylist) { - thisObj.userClickedPlaylist = false; // reset + thisObj.userClickedPlaylist = false; } - if (thisObj.recreatingPlayer) { - thisObj.recreatingPlayer = false; // reset + if (thisObj.recreatingPlayer) { + thisObj.recreatingPlayer = false; } deferred.resolve(); }, onError: function (x) { - deferred.fail(); + deferred.reject(); }, - onStateChange: function (x) { + onStateChange: function (x) { thisObj.getPlayerState().then(function(playerState) { - // values of playerState: 'playing','paused','buffering','ended' if (playerState === 'playing') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.play(true); + } thisObj.playing = true; thisObj.startedPlaying = true; thisObj.paused = false; - } - else if (playerState == 'ended') { + } else if (playerState == 'ended') { thisObj.onMediaComplete(); - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } if (thisObj.stoppingYouTube && playerState === 'paused') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.pause(true); + } if (typeof thisObj.$posterImg !== 'undefined') { thisObj.$posterImg.show(); } @@ -7732,103 +5728,68 @@ if (typeof module !== "undefined" && module.exports) { thisObj.paused = true; } }); - // If caption tracks are hosted locally, but are also available on YouTube, - // we need to turn them off on YouTube or there will be redundant captions - // This is the most reliable event on which to unload the caption module - if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { - if (thisObj.youTubePlayer.getOptions('captions')) { + if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { + if (thisObj.youTubePlayer.getOptions('captions')) { thisObj.youTubePlayer.unloadModule('captions'); } - } + } + }, + onApiChange: function() { + thisObj.duration = thisObj.youTubePlayer.getDuration(); }, onPlaybackQualityChange: function () { - // do something }, } }); if (!this.hasPlaylist) { - // remove the media element, since YouTube replaces that with its own element in an iframe - // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() this.$media.remove(); - } + } return promise; }; AblePlayer.prototype.getYouTubeDimensions = function (youTubeContainerId) { - // The YouTube iframe API does not have a getSize() of equivalent method - // so, need to get dimensions from YouTube's iframe - - var $iframe, width, height; + var $iframe, width, height; - $iframe = this.$ableWrapper.find('iframe'); + $iframe = this.$ableWrapper.find('iframe'); if (typeof $iframe !== 'undefined') { - if ($iframe.prop('width')) { - width = $iframe.prop('width'); - if ($iframe.prop('height')) { + if ($iframe.prop('width')) { + width = $iframe.prop('width'); + if ($iframe.prop('height')) { height = $iframe.prop('height'); - this.resizePlayer(width,height); + this.resizePlayer(width,height); } } } }; - AblePlayer.prototype.getYouTubeCaptionTracks = function (youTubeId) { + AblePlayer.prototype.getYouTubeCaptionTracks = function () { - // get data via YouTube IFrame Player API, and push data to this.tracks & this.captions - // NOTE: Caption tracks are not available through the IFrame Player API - // until AFTER the video has started playing. - // Therefore, this function plays the video briefly in order to load the captions module - // then stops the video and collects the data needed to build the cc menu - // This is stupid, but seemingly unavoidable. - // Caption tracks could be obtained through the YouTube Data API - // but this required authors to have a Google API key, - // which would complicate Able Player installation - - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - - var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack; + var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack, apiTriggered = false; thisObj = this; - - if (!this.youTubePlayer.getOption('captions','tracklist')) { - - // no tracks were found, probably because the captions module hasn't loaded - // play video briefly (required in order to load the captions module) - // and after the apiChange event is triggered, try again to retreive tracks - this.youTubePlayer.addEventListener('onApiChange',function(x) { - - // getDuration() also requires video to play briefly - // so, let's set that while we're here - thisObj.duration = thisObj.youTubePlayer.getDuration(); - - if (thisObj.loadingYouTubeCaptions) { - // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once - ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); - if (!thisObj.okToPlay) { - // Don't stopVideo() - that cancels loading - // Just pause - // No need to seekTo(0) - so little time has passed it isn't noticeable to the user - thisObj.youTubePlayer.pauseVideo(); + if (!this.youTubePlayer.getOption('captions','tracklist') ) { + this.youTubePlayer.addEventListener('onApiChange',function() { + apiTriggered = true; + thisObj.duration = thisObj.youTubePlayer.getDuration(); + + if (thisObj.loadingYouTubeCaptions) { + ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); + if ( ! thisObj.okToPlay ) { + thisObj.youTubePlayer.pauseVideo(); } - if (ytTracks && ytTracks.length) { - // Step through ytTracks and add them to global tracks array - // Note: Unlike YouTube Data API, the IFrame Player API only returns - // tracks that are published, and does NOT include ASR captions - // So, no additional filtering is required + if (ytTracks && ytTracks.length) { for (i=0; i < ytTracks.length; i++) { - trackLang = ytTracks[i].languageCode; - trackLabel = ytTracks[i].languageName; // displayName and languageName seem to always have the same value - isDefaultTrack = false; - if (typeof thisObj.captionLang !== 'undefined') { - if (trackLang === thisObj.captionLang) { - isDefaultTrack = true; - } - } - else if (typeof thisObj.lang !== 'undefined') { + trackLang = ytTracks[i].languageCode; + trackLabel = ytTracks[i].languageName; + isDefaultTrack = false; + if (typeof thisObj.captionLang !== 'undefined' && (trackLang === thisObj.captionLang) ) { + isDefaultTrack = true; + } else if (typeof thisObj.lang !== 'undefined') { if (trackLang === thisObj.lang) { - isDefaultTrack = true; + isDefaultTrack = true; } } thisObj.tracks.push({ @@ -7842,103 +5803,73 @@ if (typeof module !== "undefined" && module.exports) { 'label': trackLabel, 'def': isDefaultTrack, 'cues': null - }); + }); } thisObj.hasCaptions = true; - // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - } - else { - // there are no YouTube captions - thisObj.usingYouTubeCaptions = false; + thisObj.setupPopups('captions'); + } else { + thisObj.usingYouTubeCaptions = false; thisObj.hasCaptions = false; } - thisObj.loadingYouTubeCaptions = false; - if (thisObj.okToPlay) { + thisObj.loadingYouTubeCaptions = false; + if (thisObj.okToPlay) { thisObj.youTubePlayer.playVideo(); } } - if (thisObj.captionLangPending) { - // user selected a new caption language prior to playback starting - // set it now + if (thisObj.captionLangPending) { thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLangPending}); - thisObj.captionLangPending = null; + thisObj.captionLangPending = null; } - if (typeof thisObj.prefCaptionsSize !== 'undefined') { - // set the default caption size - // this doesn't work until the captions module is loaded + if (typeof thisObj.prefCaptionsSize !== 'undefined') { thisObj.youTubePlayer.setOption('captions','fontSize',thisObj.translatePrefs('size',thisObj.prefCaptionsSize,'youtube')); } deferred.resolve(); }); - // Trigger the above event listener by briefly playing the video - this.loadingYouTubeCaptions = true; - this.youTubePlayer.playVideo(); + this.loadingYouTubeCaptions = true; + this.youTubePlayer.playVideo(); + setTimeout(() => { + if ( ! apiTriggered ) { + setTimeout(() => { + thisObj.youTubePlayer.pauseVideo(); + deferred.resolve(); + }, 500); + } + },500); } return promise; }; - AblePlayer.prototype.getYouTubeTimedTextUrl = function (youTubeId, trackName, trackLang) { - - // return URL for retrieving WebVTT source via YouTube's timedtext API - // Note: This API seems to be undocumented, and could break anytime - // UPDATE: Google removed this API on November 10, 2021 - // This function is no longer called, but is preserved here for reference - var url = 'https://www.youtube.com/api/timedtext?fmt=vtt'; - url += '&v=' + youTubeId; - url += '&lang=' + trackLang; - // if track has a value in the name field, it's required in the URL - if (trackName !== '') { - url += '&name=' + trackName; - } - return url; - }; - AblePlayer.prototype.getYouTubePosterUrl = function (youTubeId, width) { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 - - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; + var url = 'https://img.youtube.com/vi/' + youTubeId; + if (width == '120') { + return url + '/default.jpg'; + } else if (width == '320') { + return url + '/mqdefault.jpg'; + } else if (width == '480') { + return url + '/hqdefault.jpg'; + } else if (width == '640') { + return url + '/sddefault.jpg'; + } else if (width == '1280') { + return url + '/hq720.jpg'; + } else if ( width == '1920' ) { + return url + '/maxresdefault.jpg'; + } + return false; }; AblePlayer.prototype.getYouTubeId = function (url) { - // return a YouTube ID, extracted from a full YouTube URL - // Supported URL patterns (with http or https): - // https://youtu.be/xxx - // https://www.youtube.com/watch?v=xxx - // https://www.youtube.com/embed/xxx - // in all supported patterns, the id is the last 11 characters - var idStartPos, id; + var idStartPos, id; - if (url.indexOf('youtu') !== -1) { - // this is a full Youtube URL - url = url.trim(); - idStartPos = url.length - 11; - id = url.substring(idStartPos); - return id; - } - else { - return url; + if (url.indexOf('youtu') !== -1) { + url = url.trim(); + idStartPos = url.length - 11; + id = url.substring(idStartPos); + return id; + } else { + return url; } }; @@ -7947,34 +5878,17 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { - // Events: - // startTracking(event, position) - // tracking(event, position) - // stopTracking(event, position) - window. AccessibleSlider = function(mediaType, div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { + window.AccessibleSlider = function(div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { - // mediaType is either 'audio' or 'video' - // div is the host element around which the slider will be built - // orientation is either 'horizontal' or 'vertical' - // length is the width or height of the slider, depending on orientation - // min is the low end of the slider scale - // max is the high end of the slider scale - // bigInterval is the number of steps supported by page up/page down (set to 0 if not supported) - // (smallInterval, defined as nextStep below, is always set to 1) - this is the interval supported by arrow keys - // label is used within an aria-label attribute to identify the slider to screen reader users - // className is used as the root within class names (e.g., 'able-' + classname + '-head') - // trackingMedia is true if this is a media timeline; otherwise false - // initialState is either 'visible' or 'hidden' var thisObj, coords; thisObj = this; - // Initialize some variables. - this.position = 0; // Note: position does not change while tracking. + this.position = 0; this.tracking = false; - this.trackDevice = null; // 'mouse' or 'keyboard' + this.trackDevice = null; this.keyTrackPosition = 0; this.lastTrackPosition = 0; this.nextStep = 1; @@ -7982,13 +5896,11 @@ if (typeof module !== "undefined" && module.exports) { this.bodyDiv = $(div); - // Add divs for tracking amount of media loaded and played if (trackingMedia) { this.loadedDiv = $('<div></div>'); this.playedDiv = $('<div></div>'); } - // Add a seekhead this.seekHead = $('<div>',{ 'aria-orientation': orientation, 'class': 'able-' + className + '-head' @@ -7996,11 +5908,9 @@ if (typeof module !== "undefined" && module.exports) { if (initialState === 'visible') { this.seekHead.attr('tabindex', '0'); - } - else { + } else { this.seekHead.attr('tabindex', '-1'); } - // Since head is focusable, it gets the aria roles/titles. this.seekHead.attr({ 'role': 'slider', 'aria-label': label, @@ -8036,8 +5946,7 @@ if (typeof module !== "undefined" && module.exports) { if (orientation === 'horizontal') { this.wrapperDiv.width(length); this.loadedDiv.width(0); - } - else { + } else { this.wrapperDiv.height(length); this.loadedDiv.height(0); } @@ -8050,37 +5959,31 @@ if (typeof module !== "undefined" && module.exports) { this.playedDiv.width(0); this.playedDiv.addClass('able-' + className + '-played'); - // Set a default duration. User can call this dynamically if duration changes. this.setDuration(max); } - // handle seekHead events this.seekHead.on('mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend', function (e) { coords = thisObj.pointerEventToXY(e); if (e.type === 'mouseenter' || e.type === 'focus') { thisObj.overHead = true; - } - else if (e.type === 'mouseleave' || e.type === 'blur') { + } else if (e.type === 'mouseleave' || e.type === 'blur') { thisObj.overHead = false; if (!thisObj.overBody && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' || e.type === 'touchmove') { + } else if (e.type === 'mousemove' || e.type === 'touchmove') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' || e.type === 'touchstart') { + } else if (e.type === 'mousedown' || e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(thisObj.seekHead.offset() + (thisObj.seekHead.width() / 2))); if (!thisObj.bodyDiv.is(':focus')) { thisObj.bodyDiv.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } @@ -8090,11 +5993,14 @@ if (typeof module !== "undefined" && module.exports) { } }); - // handle bodyDiv events this.bodyDiv.on( 'mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend', function (e) { + if ( e.button == 2 && e.type == 'mousedown' ) { + return; + } coords = thisObj.pointerEventToXY(e); + let keyPressed = e.key; if (e.type === 'mouseenter') { thisObj.overBody = true; @@ -8102,15 +6008,13 @@ if (typeof module !== "undefined" && module.exports) { x: coords.x, y: coords.y }; - } - else if (e.type === 'mouseleave') { + } else if (e.type === 'mouseleave') { thisObj.overBody = false; thisObj.overBodyMousePos = null; if (!thisObj.overHead && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' || e.type === 'touchmove') { + } else if (e.type === 'mousemove' || e.type === 'touchmove') { thisObj.overBodyMousePos = { x: coords.x, y: coords.y @@ -8118,52 +6022,36 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' || e.type === 'touchstart') { + } else if (e.type === 'mousedown' || e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(coords.x)); thisObj.trackHeadAtPageX(coords.x); if (!thisObj.seekHead.is(':focus')) { thisObj.seekHead.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'keydown') { - // Home - if (e.which === 36) { + } else if (e.type === 'keydown') { + if (e.key === 'Home') { thisObj.trackImmediatelyTo(0); - } - // End - else if (e.which === 35) { + } else if (e.key === 'End') { thisObj.trackImmediatelyTo(thisObj.duration); - } - // Left arrow or down arrow - else if (e.which === 37 || e.which === 40) { + } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { thisObj.arrowKeyDown(-1); - } - // Right arrow or up arrow - else if (e.which === 39 || e.which === 38) { + } else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { thisObj.arrowKeyDown(1); - } - // Page up - else if (e.which === 33 && bigInterval > 0) { + } else if (e.key === 'PageUp' && bigInterval > 0) { thisObj.arrowKeyDown(bigInterval); - } - // Page down - else if (e.which === 34 && bigInterval > 0) { + } else if (e.key === 'PageDown' && bigInterval > 0) { thisObj.arrowKeyDown(-bigInterval); - } - else { + } else { return; } e.preventDefault(); - } - else if (e.type === 'keyup') { - if (e.which >= 33 && e.which <= 40) { + } else if (e.type === 'keyup') { + if ( keyPressed === e.key ) { if (thisObj.tracking && thisObj.trackDevice === 'keyboard') { thisObj.stopTracking(thisObj.keyTrackPosition); } @@ -8185,27 +6073,7 @@ if (typeof module !== "undefined" && module.exports) { this.nextStep = 2; } this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/* - AccessibleSlider.prototype.pageUp = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { + } else { this.nextStep = 1; this.inertiaCount = 0; this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); @@ -8213,7 +6081,7 @@ if (typeof module !== "undefined" && module.exports) { this.trackHeadAtPosition(this.keyTrackPosition); } }; -/ + AccessibleSlider.prototype.pageXToPosition = function (pageX) { var offset = pageX - this.bodyDiv.offset().left; var position = this.duration (offset / this.bodyDiv.width()); @@ -8247,7 +6115,6 @@ if (typeof module !== "undefined" && module.exports) { this.loadedDiv.width(this.bodyDiv.width() * this.buffered); }; - // Stops tracking, sets the head location to the current position. AccessibleSlider.prototype.resetHeadLocation = function () { var ratio = this.position / this.duration; var center = this.bodyDiv.width() * ratio; @@ -8268,7 +6135,6 @@ if (typeof module !== "undefined" && module.exports) { this.updateAriaValues(position, updateLive); } - // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. AccessibleSlider.prototype.setBuffered = function (ratio) { if (!isNaN(ratio)) { this.buffered = ratio; @@ -8314,7 +6180,6 @@ if (typeof module !== "undefined" && module.exports) { }; AccessibleSlider.prototype.updateAriaValues = function (position, updateLive) { - // TODO: Localize, move to another function. var pHours = Math.floor(position / 3600); var pMinutes = Math.floor((position % 3600) / 60); var pSeconds = Math.floor(position % 60); @@ -8331,18 +6196,15 @@ if (typeof module !== "undefined" && module.exports) { ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else if (pMinutes > 0) { + } else if (pMinutes > 0) { descriptionText = pMinutes + ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else { + } else { descriptionText = pSeconds + ' ' + pSecondWord; } - /* Comment to stop live region from generating or being used. / if (!this.liveAriaRegion) { this.liveAriaRegion = $('<span>', { 'class': 'able-offscreen', @@ -8354,7 +6216,6 @@ if (typeof module !== "undefined" && module.exports) { this.liveAriaRegion.text(descriptionText); } - // Uncomment the following lines to use aria values instead of separate live region. this.seekHead.attr('aria-valuetext', descriptionText); this.seekHead.attr('aria-valuenow', Math.floor(position).toString()); }; @@ -8370,23 +6231,19 @@ if (typeof module !== "undefined" && module.exports) { this.timeTooltip.show(); if (this.tracking) { this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)); - } - else { + } else { this.timeTooltip.text(this.positionToStr(this.position)); } this.setTooltipPosition(this.seekHead.position().left + (this.seekHead.width() / 2)); - } - else if (this.overBody && this.overBodyMousePos) { + } else if (this.overBody && this.overBodyMousePos) { this.timeTooltip.show(); this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))); this.setTooltipPosition(this.overBodyMousePos.x - this.bodyDiv.offset().left); - } - else { + } else { clearTimeout(this.timeTooltipTimeoutId); var _this = this; this.timeTooltipTimeoutId = setTimeout(function() { - // give user a half second move cursor over tooltip _this.timeTooltip.hide(); }, 500); } @@ -8401,13 +6258,12 @@ if (typeof module !== "undefined" && module.exports) { AccessibleSlider.prototype.setTooltipPosition = function (x) { this.timeTooltip.css({ left: x - (this.timeTooltip.width() / 2) - 10, - bottom: this.seekHead.height() + 10 + bottom: this.seekHead.height() }); }; AccessibleSlider.prototype.positionToStr = function (seconds) { - // same logic as misc.js > formatSecondsAsColonTime() var dHours = Math.floor(seconds / 3600); var dMinutes = Math.floor(seconds / 60) % 60; var dSeconds = Math.floor(seconds % 60); @@ -8419,24 +6275,19 @@ if (typeof module !== "undefined" && module.exports) { dMinutes = '0' + dMinutes; } return dHours + ':' + dMinutes + ':' + dSeconds; - } - else { + } else { return dMinutes + ':' + dSeconds; } }; AccessibleSlider.prototype.pointerEventToXY = function(e) { - // returns array of coordinates x and y in response to both mouse and touch events - // for mouse events, this comes from e.pageX and e.pageY - // for touch events, it's a bit more complicated var out = {x:0, y:0}; if (e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel') { var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; out.x = touch.pageX; out.y = touch.pageY; - } - else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') { + } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') { out.x = e.pageX; out.y = e.pageY; } @@ -8449,19 +6300,13 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addVolumeSlider = function($div) { - // Prior to v4.4.64, we were using a custom-build vertical volunme slider - // Changed to input type="range" because it's standard and gaining more widespread support - // including screen reader support - // TODO: Improve presentation of vertical slider. That requires some CSS finesse. - var thisObj, volumeSliderId, volumeHelpId, volumePct, tickLabelsId, $tickLabels, i, $tickOption, tickLabel; + var thisObj, volumeSliderId, volumeHelpId, volumePct, volumeLabel, volumeHeight; thisObj = this; - // define a few variables volumeSliderId = this.mediaId + '-volume-slider'; volumeHelpId = this.mediaId + '-volume-help'; - tickLabelsId = this.mediaId + '-volume-tick-labels'; this.$volumeSlider = $('<div>',{ 'id': volumeSliderId, @@ -8472,15 +6317,14 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-tooltip', 'role': 'tooltip' }).hide(); - this.$volumeRange = $('<input>',{ + this.$volumeRange = $('<input>',{ 'type': 'range', 'min': '0', 'max': '10', 'step': '1', - 'orient': 'vertical', // non-standard, but required for Firefox - 'aria-label': this.tt.volumeUpDown, + 'orient': 'vertical', + 'aria-label': this.translate( 'volumeUpDown', 'Volume up down' ), 'value': this.volume - // 'list': tickLabelsId // Uncomment this to use tickLabels (see note below) }); volumePct = parseInt(thisObj.volume) / 10 100; this.$volumeHelp = $('<div>',{ @@ -8488,34 +6332,14 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-volume-help', 'aria-live': 'polite' }).text(volumePct + '%'); - this.$volumeButton.attr({ - 'aria-describedby': volumeHelpId - }); - $tickLabels = $('<datalist>',{ - 'id': tickLabelsId - }); - for (i = 0; i <= 10; i++) { - if (i === 0) { - tickLabel = this.tt.mute; - } - else { - tickLabel = (i * 10) + '%'; - } - $tickOption = $('<option>',{ - 'value': i, - 'label': tickLabel - }) - $tickLabels.append($tickOption); - } + volumeLabel = this.$volumeButton.attr( 'aria-label' ); + this.$volumeButton.attr( 'aria-label', volumeLabel + ' ' + volumePct + '%'); this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp); - // To add $tickLabels, use the following line of code to replace the one above - // and uncommnet the 'list' property in the definition of this.$volumeRange above - // As of Nov 2022, this feature is not supported by any screen reader - // this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp,$tickLabels); + volumeHeight = this.$volumeButton.parents( '.able-control-row' )[0]; + this.$volumeSlider.css( 'bottom', volumeHeight.offsetHeight ); $div.append(this.$volumeSlider); - // add event listeners this.$volumeRange.on('change',function (e) { thisObj.handleVolumeChange($(this).val()); }); @@ -8523,23 +6347,19 @@ if (typeof module !== "undefined" && module.exports) { this.$volumeRange.on('input',function (e) { thisObj.handleVolumeChange($(this).val()); }); - + this.$volumeRange.on('keydown',function (e) { - // Escape key or Enter key or Tab key - if (e.which === 27 || e.which === 13 || e.which === 9) { - // close popup + if (e.key === 'Escape' || e.key === 'Tab' || e.key === 'Enter') { if (thisObj.$volumeSlider.is(':visible')) { - thisObj.closingVolume = true; // stopgap + thisObj.closingVolume = true; thisObj.hideVolumePopup(); - } - else { + } else { if (!thisObj.closingVolume) { thisObj.showVolumePopup(); } } - } - else { + } else { return; } }); @@ -8547,98 +6367,59 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.refreshVolumeHelp = function(volume) { - // make adjustments based on current volume var volumePct; volumePct = (volume/10) * 100; - // Update help text - if (this.$volumeHelp) { - this.$volumeHelp.text(volumePct + '%'); + if (this.$volumeHelp) { + this.$volumeHelp.text(volumePct + '%'); } - // Update the default value of the volume slider input field - // This doesn't seem to be necessary; browsers remember the previous setting during a session - // but this is a fallback in case they don't - this.$volumeRange.attr('value',volume); + this.$volumeRange.attr('value',volume); }; AblePlayer.prototype.refreshVolumeButton = function(volume) { - var volumeName, volumePct, volumeLabel, volumeIconClass, volumeImg, newSvgData; + var volumeName, volumePct, volumeLabel; volumeName = this.getVolumeName(volume); volumePct = (volume/10) * 100; - volumeLabel = this.tt.volume + ' ' + volumePct + '%'; + volumeLabel = this.translate( 'volume', 'Volume' ) + ' ' + volumePct + '%'; - if (this.iconType === 'font') { - volumeIconClass = 'icon-volume-' + volumeName; - this.$volumeButton.find('span').first().removeClass().addClass(volumeIconClass); - this.$volumeButton.find('span.able-clipped').text(volumeLabel); - } - else if (this.iconType === 'image') { - volumeImg = this.imgPath + 'volume-' + volumeName + '.png'; - this.$volumeButton.find('img').attr('src',volumeImg); - } - else if (this.iconType === 'svg') { - if (volumeName !== 'mute') { - volumeName = 'volume-' + volumeName; - } - newSvgData = this.getSvgData(volumeName); - this.$volumeButton.find('svg').attr('viewBox',newSvgData[0]); - this.$volumeButton.find('path').attr('d',newSvgData[1]); - } + this.getIcon( this.$volumeButton, 'volume-' + volumeName ); + this.$volumeButton.attr( 'aria-label', volumeLabel ); }; AblePlayer.prototype.handleVolumeButtonClick = function() { if (this.$volumeSlider.is(':visible')) { - this.hideVolumePopup(); - } - else { + this.hideVolumePopup(); + } else { this.showVolumePopup(); } - }; - - AblePlayer.prototype.handleVolumeKeystroke = function(keycode) { - - // keycode is an ASCII key code 49-57 (numeric keys 1-9), - // keyboard shortcuts for changing volume - - var volume; - - if (keycode >= 49 && keycode <= 57) { - volume = keycode - 48; - } - else { - return false; - } + }; + AblePlayer.prototype.handleVolumeKeystroke = function(volume) { if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { - this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) + } else { + this.setVolume(volume); this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); } - }; + }; AblePlayer.prototype.handleVolumeChange = function(volume) { - // handle volume change using the volume input slider if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { - this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) + } else { + this.setVolume(volume); this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); } @@ -8648,8 +6429,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.isMuted()) { this.setMute(false); - } - else { + } else { this.setMute(true); } }; @@ -8660,7 +6440,7 @@ if (typeof module !== "undefined" && module.exports) { this.$tooltipDiv.hide(); this.$volumeSlider.show().attr('aria-hidden','false'); this.$volumeButton.attr('aria-expanded','true'); - this.$volumeButton.focus(); // for screen reader expanded state to be read + this.$volumeButton.focus(); this.waitThenFocus(this.$volumeRange); }; @@ -8670,8 +6450,6 @@ if (typeof module !== "undefined" && module.exports) { this.$volumeSlider.hide().attr('aria-hidden','true'); this.$volumeButton.attr('aria-expanded','false').focus(); - // wait a second before resetting stopgap var - // otherwise the keypress used to close volume popup will trigger the volume button setTimeout(function() { thisObj.closingVolume = false; }, 1000); @@ -8681,21 +6459,17 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { return this.media.muted; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { return this.youTubePlayer.isMuted(); } }; AblePlayer.prototype.setMute = function(mute) { - // mute is either true (muting) or false (unmuting) if (mute) { - // save current volume so it can be restored after unmute this.lastVolume = this.volume; this.volume = 0; - } - else { // restore to previous volume + } else { if (typeof this.lastVolume !== 'undefined') { this.volume = this.lastVolume; } @@ -8703,49 +6477,33 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.media.muted = mute; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (mute) { this.youTubePlayer.mute(); - } - else { + } else { this.youTubePlayer.unMute(); } } - this.setVolume(this.volume); + this.setVolume(this.volume); this.refreshVolumeHelp(this.volume); this.refreshVolumeButton(this.volume); }; AblePlayer.prototype.setVolume = function (volume) { - // volume is 1 to 10 - // convert as needed depending on player - - var newVolume; + var newVolume; + this.syncSignVideo( {'volume' : 0 } ); if (this.player === 'html5') { - // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.media.volume = newVolume; - - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.volume = 0; // always mute - } - } - else if (this.player === 'youtube') { - // volume is 0 to 100 - newVolume = volume * 10; + } else if (this.player === 'youtube') { + newVolume = volume * 10; this.youTubePlayer.setVolume(newVolume); this.volume = volume; - } - else if (this.player === 'vimeo') { - // volume is 0 to 1 - newVolume = volume / 10; + } else if (this.player === 'vimeo') { + newVolume = volume / 10; this.vimeoPlayer.setVolume(newVolume).then(function() { - // setVolume finished. - // could do something here - // successful completion also fires a 'volumechange' event (see event.js) }); } this.lastVolume = volume; @@ -8753,38 +6511,27 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVolume = function (volume) { - // return volume using common audio control scale 1 to 10 if (this.player === 'html5') { - // uses 0 to 1 scale return this.media.volume * 10; - } - else if (this.player === 'youtube') { - // uses 0 to 100 scale - if (this.youTubePlayerReady) { + } else if (this.player === 'youtube') { + if (this.youTubePlayerReady) { return this.youTubePlayer.getVolume() / 10; } } if (this.player === 'vimeo') { - // uses 0 to 1 scale - // this.vimeoPlayer.getVolume() takes too long to resolve with a value - // Just use variable that's already been defined (should be the same value anyway) return this.volume; } }; AblePlayer.prototype.getVolumeName = function (volume) { - // returns 'mute','soft','medium', or 'loud' depending on volume level if (volume == 0) { return 'mute'; - } - else if (volume == 10) { + } else if (volume == 10) { return 'loud'; - } - else if (volume < 5) { + } else if (volume < 5) { return 'soft'; - } - else { + } else { return 'medium'; } }; @@ -8794,72 +6541,57 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"; - // Based on the incredible accessible modal dialog. - window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, isModal, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) { + window.AccessibleDialog = function( modalDiv, $returnElement, title, closeButtonLabel) { this.title = title; this.closeButtonLabel = closeButtonLabel; this.focusedElementBeforeModal = $returnElement; - this.escapeHook = escapeHook; this.baseId = $(modalDiv).attr('id') || Math.floor(Math.random() * 1000000000).toString(); var thisObj = this; var modal = modalDiv; this.modal = modal; - modal.css({ - 'width': width || '50%' - }); + modal.addClass('able-modal-dialog'); - if (!fullscreen) { - var closeButton = $('<button>',{ - 'class': 'modalCloseButton', - 'title': thisObj.closeButtonLabel, - 'aria-label': thisObj.closeButtonLabel - }).text('X'); - closeButton.keydown(function (e) { - // Space key down - if (e.which === 32) { - thisObj.hide(); - } - }).click(function () { + var closeButton = $('<button>',{ + 'class': 'modalCloseButton', + 'title': thisObj.closeButtonLabel, + 'aria-label': thisObj.closeButtonLabel + }).text('×'); + closeButton.on( 'keydown', function (e) { + if (e.key === ' ') { thisObj.hide(); - }); + } + }).on( 'click', function () { + thisObj.hide(); + }); - var titleH1 = $('<h1></h1>'); - titleH1.attr('id', 'modalTitle-' + this.baseId); - titleH1.css('text-align', 'center'); - titleH1.text(title); - this.titleH1 = titleH1; + var titleH1 = $('<h1></h1>'); + titleH1.attr('id', 'modalTitle-' + this.baseId); + titleH1.text(title); + this.titleH1 = titleH1; - modal.attr({ - 'aria-labelledby': 'modalTitle-' + this.baseId, - }); - modal.prepend(titleH1); - modal.prepend(closeButton); - } + modal.attr({ + 'aria-labelledby': 'modalTitle-' + this.baseId, + }); + var modalHeader = $( '<div>', { + 'class': 'able-modal-header' + }); + modalHeader.prepend(titleH1); + modalHeader.prepend(closeButton); + modal.prepend(modalHeader); modal.attr({ 'aria-hidden': 'true', - 'role': dialogRole, + 'role': 'dialog', + 'aria-modal': 'true' }); - if (isModal) { - modal.attr('aria-modal','true'); - } - modal.keydown(function (e) { - // Escape - if (e.which === 27) { - if (thisObj.escapeHook) { - thisObj.escapeHook(e, this); - } - else { - thisObj.hide(); - e.preventDefault(); - } - } - // Tab - else if (e.which === 9) { - // Manually loop tab navigation inside the modal. + modal.on( 'keydown', function (e) { + if (e.key === 'Escape') { + thisObj.hide(); + e.preventDefault(); + } else if (e.key === 'Tab') { var parts = modal.find(''); var focusable = parts.filter(focusableElementsSelector).filter(':visible'); @@ -8870,15 +6602,13 @@ if (typeof module !== "undefined" && module.exports) { var focused = $(':focus'); var currentIndex = focusable.index(focused); if (e.shiftKey) { - // If backwards from first element, go to last. if (currentIndex === 0) { - focusable.get(focusable.length - 1).focus(); + focusable.get(focusable.length - 1).trigger('focus'); e.preventDefault(); } - } - else { + } else { if (currentIndex === focusable.length - 1) { - focusable.get(0).focus(); + focusable.get(0).trigger('focus'); e.preventDefault(); } } @@ -8886,12 +6616,14 @@ if (typeof module !== "undefined" && module.exports) { e.stopPropagation(); }); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + if ( $( 'body' ).hasClass( 'able-modal-active' ) ) { + $( 'body > ') .not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); + } }; AccessibleDialog.prototype.show = function () { if (!this.overlay) { - // Generate overlay. var overlay = $('<div></div>').attr({ 'class': 'able-modal-overlay', 'tabindex': '-1' @@ -8899,13 +6631,14 @@ if (typeof module !== "undefined" && module.exports) { this.overlay = overlay; $('body').append(overlay); - // Keep from moving focus out of dialog when clicking outside of it. overlay.on('mousedown.accessibleModal', function (e) { e.preventDefault(); + thisObj.hide(); }); } - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('inert', true); + $( 'body' ).addClass( 'able-modal-active' ); this.overlay.css('display', 'block'); this.modal.css('display', 'block'); @@ -8920,8 +6653,7 @@ if (typeof module !== "undefined" && module.exports) { } var thisObj = this; setTimeout(function () { - // set focus on the first focusable element - thisObj.modal.find('button.modalCloseButton').first().focus(); + thisObj.modal.find('button.modalCloseButton').first().trigger('focus'); }, 300); }; @@ -8931,14 +6663,14 @@ if (typeof module !== "undefined" && module.exports) { } this.modal.css('display', 'none'); this.modal.attr('aria-hidden', 'true'); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); - this.focusedElementBeforeModal.focus(); + this.focusedElementBeforeModal.trigger('focus'); }; AccessibleDialog.prototype.getInputs = function () { - // return an array of input elements within this dialog if (this.modal) { var inputs = this.modal.find('input'); return inputs; @@ -8950,10 +6682,6 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.getNextHeadingLevel = function ($element) { - // Finds the nearest heading in the ancestor tree - // Loops over each parent of the current element until a heading is found - // If multiple headings are found beneath a given parent, get the closest - // Returns an integer (1-6) representing the next available heading level var $parents, $foundHeadings, numHeadings, headingType, headingNumber; @@ -8967,10 +6695,8 @@ if (typeof module !== "undefined" && module.exports) { } }); if (typeof headingType === "undefined") { - // page has no headings headingNumber = 1; } else { - // Increment closest heading by one if less than 6. headingNumber = parseInt(headingType[1]); headingNumber += 1; if (headingNumber > 6) { @@ -8981,7 +6707,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.countProperties = function (obj) { - // returns the number of properties in an object var count, prop; count = 0; for (prop in obj) { @@ -8996,15 +6721,10 @@ if (typeof module !== "undefined" && module.exports) { seconds, showFullTime ) { - // Takes seconds and converts to string of form hh:mm:ss - // If showFullTime is true, shows 00 for hours if time is less than an hour - // and show milliseconds (e.g., 00:00:04.123 as in Video Track Sorter) - // Otherwise, omits empty hours and milliseconds (e.g., 00:04 as in timer on controller) var dHours, dMinutes, dSeconds, parts, milliSeconds, numShort, i; if (showFullTime) { - // preserve milliseconds, if included in seconds parts = seconds.toString().split("."); if (parts.length === 2) { milliSeconds = parts[1]; @@ -9053,8 +6773,7 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.getSecondsFromColonTime = function (timeStr) { - // Converts string of form hh:mm:ss to seconds - var timeParts, hours, minutes, seconds, newTime; + var timeParts, hours, minutes, seconds; timeParts = timeStr.split(":"); if (timeParts.length === 3) { @@ -9077,21 +6796,42 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.roundDown = function (value, decimals) { - // round value down to the nearest X decimal points - // where X is the value of the decimals parameter return Number(Math.floor(value + "e" + decimals) + "e-" + decimals); }; + AblePlayer.prototype.defer = function() { + const self = this; + const promise = new Promise((resolve, reject) => { + self.resolve = resolve; + self.reject = reject; + self.promise = () => promise; + }); + } + + AblePlayer.prototype.getScript = function( source, callback ) { + var script = document.createElement('script'); + var prior = document.getElementsByTagName('script')[0]; + script.async = 1; + + script.onload = script.onreadystatechange = function( _, isAbort ) { + if ( isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) { + script.onload = script.onreadystatechange = null; + script = undefined; + + if ( !isAbort && callback ) { + setTimeout(callback, 0); + } + } + }; + + script.src = source; + prior.parentNode.insertBefore(script, prior); + } + AblePlayer.prototype.hasAttr = function (object, attribute) { - // surprisingly, there is no hasAttr() function in Jquery as of 3.2.1 - // return true if object has attribute; otherwise false - // selector is a Jquery object - // attribute is a string var attr = object.attr(attribute); - // For some browsers, `attr` is undefined; for others, - // `attr` is false. Check for both. if (typeof attr !== typeof undefined && attr !== false) { return true; } else { @@ -9099,293 +6839,157 @@ if (typeof module !== "undefined" && module.exports) { } }; - Number.isInteger = - Number.isInteger || - function (value) { - // polyfill for IE11, which doesn't otherwise support Number.isInteger - // https://stackoverflow.com/a/31720368/744281 - return ( - typeof value === "number" && - isFinite(value) && - Math.floor(value) === value - ); - }; })(jQuery); (function ($) { AblePlayer.prototype.initDescription = function() { - // set default mode for delivering description (open vs closed) - // based on availability and user preference - - // called when player is being built, or when a user - // toggles the Description button or changes a description-related preference - - // The following variables are applicable to delivery of description: - // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) - // prefDesc == 1 if user wants description (i.e., Description button is on); else 0 - // prefDescPause == 1 to pause video when description starts; else 0 - // prefDescVisible == 1 to visibly show text-based description area; else 0 - // prefDescMethod == either 'video' or 'text' (as of v4.0.10, prefDescMethod is always 'video') - // descMethod is the format actually used ('video' or 'text'), regardless of user preference - // hasOpenDesc == true if a described version of video is available via data-desc-src attribute - // hasClosedDesc == true if a description text track is available - // descOn == true if description of either type is on - // readDescriptionsAloud == true if text description is to be announced audibly; otherwise false - // descReader == either 'browser' or 'screenreader' + + var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - if (this.mediaType === 'audio') { - deferred.resolve(); + if (this.mediaType === 'audio') { + deferred.resolve(); } - // check to see if there's an open-described version of this video - // checks only the first source since if a described version is provided, - // it must be provided for all sources this.descFile = this.$sources.first().attr('data-desc-src'); if (typeof this.descFile !== 'undefined') { this.hasOpenDesc = true; - } - else { - // there's no open-described version via data-desc-src, - // but what about data-youtube-desc-src or data-vimeo-desc-src? - // if these exist, they would have been defined earlier - if (this.youTubeDescId || this.vimeoDescId) { - this.hasOpenDesc = true; - } - else { // there are no open-described versions from any source - this.hasOpenDesc = false; - } + } else { + this.hasOpenDesc = (this.youTubeDescId || this.vimeoDescId) ? true : false; } - // Set this.descMethod based on media availability & user preferences + this.descMethod = null; if (this.hasOpenDesc && this.hasClosedDesc) { - // both formats are available. User gets their preference. - if (this.prefDescMethod) { - this.descMethod = this.prefDescMethod; - } - else { - // user has no preference. Video is default. - this.descMethod = 'video'; - } - } - else if (this.hasOpenDesc) { + this.descMethod = (this.prefDescMethod) ? this.prefDescMethod : 'video'; + } else if (this.hasOpenDesc) { this.descMethod = 'video'; - } - else if (this.hasClosedDesc) { + } else if (this.hasClosedDesc) { this.descMethod = 'text'; } - else { - // no description is available for this video - this.descMethod = null; - } - // Set the default state of descriptions - if (this.descMethod) { - if (this.prefDesc === 1) { - this.descOn = true; - } - else if (this.prefDesc === 0) { - this.descOn = false; - } - else { - // user has no prefs. Use default state. - if (this.defaultStateDescriptions === 1) { - this.descOn = true; - } - else { - this.descOn = false; - } + this.descOn = false; + if (this.descMethod) { + if (this.prefDesc === 1) { + this.descOn = true; + } else if (this.prefDesc === 0) { + this.descOn = false; + } else { + this.descOn = (this.defaultStateDescriptions === 1) ? true : false; } } - else { - this.descOn = false; - } - if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc && this.descMethod === 'text') { + + if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc ) { this.injectTextDescriptionArea(); } if (this.descOn) { - if (this.descMethod === 'video') { - if (!this.usingDescribedVersion()) { - // switched from non-described to described version - this.swapDescription(); - } + if (this.descMethod === 'video' && !this.usingDescribedVersion() ) { + this.swapDescription(); } if (this.hasClosedDesc) { if (this.prefDescVisible) { - // make description text visible if (typeof this.$descDiv !== 'undefined') { this.$descDiv.show(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } - } - else { - // keep it visible to screen readers, but hide it visibly + } else { if (typeof this.$descDiv !== 'undefined') { - this.$descDiv.addClass('able-clipped'); + this.$descDiv.addClass('able-offscreen'); } } } - } - else { // description is off. - if (this.descMethod === 'video') { // user has turned off described version of video + } else { + if (this.descMethod === 'video') { if (this.usingDescribedVersion()) { - // user was using the described verion. Swap for non-described version this.swapDescription(); } - } - else if (this.descMethod === 'text') { // user has turned off text description - // hide description div from everyone, including screen reader users + } else if (this.descMethod === 'text') { if (typeof this.$descDiv !== 'undefined') { this.$descDiv.hide(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } } } deferred.resolve(); - return promise; + return promise; }; AblePlayer.prototype.usingDescribedVersion = function () { - // Returns true if currently using audio description, false otherwise. if (this.player === 'youtube') { return (this.activeYouTubeId === this.youTubeDescId); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { return (this.activeVimeoId === this.vimeoDescId); - } - else { + } else { return (this.$sources.first().attr('data-desc-src') === this.$sources.first().attr('src')); } }; - AblePlayer.prototype.initSpeech = function (context) { - - // Some browsers &/or operating systems require a user-initiated click - // before this.synth.getVoices() will work. As of Nov 2022: - // Chrome requires a click before synth.getVoices() will work - // iOS requires a click before synth.speak() will work - // A hack to address this: Listen for ANY click, then play an inaudible utterance - // to intitiate speech synthesis - // https://stackoverflow.com/questions/32193704/js-speech-synthesis-issue-on-ios - // This function does that, and sets this.speechEnabled - // It's called with either of these contexts: - // 'init' - player is being initialized - // 'play' - user has clicked play - // 'prefs' - user has clicked prefs button - // 'desc' - it's time to announce a description! - - var thisObj = this; - - if (this.speechEnabled === null) { - - if (typeof this.synth !== 'undefined') { - // cancel any previous synth instance and reinitialize - this.synth.cancel(); - } + AblePlayer.prototype.initSpeech = function (context) { + var thisObj = this; - if (window.speechSynthesis) { + function attemptEnableSpeech() { + var greeting = new SpeechSynthesisUtterance("\x20"); + greeting.onend = function () { + thisObj.getBrowserVoices(); + if ( + (Array.isArray(thisObj.descVoices) && thisObj.descVoices.length) || + context !== "init" + ) { + thisObj.speechEnabled = true; + } + }; + thisObj.synth.speak(greeting); + } - // browser supports speech synthesis + function handleInitialClick() { + attemptEnableSpeech(); + $(document).off("click", handleInitialClick); + } + if (this.speechEnabled === null) { + if (window.speechSynthesis) { this.synth = window.speechSynthesis; + this.synth.cancel(); - if (context === 'init') { - // handle a click on anything, in case the user - // clicks something before they click 'play' or 'prefs' buttons - // that would allow us to init speech before it's needed - $(document).on('click',function() { - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - } - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; - }); - - // go ahead and call get browser voices in case it might work, - // for browsers that don't require a click - this.getBrowserVoices(); - if (this.descVoices.length) { - this.speechEnabled = true; - } - } - else { // context is either 'play' or 'prefs' or 'desc' - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - }; - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; + if (context === "init") { + attemptEnableSpeech(); + $(document).on("click", handleInitialClick); + } else { + attemptEnableSpeech(); } - } - else { - // browser does not support speech synthesis - this.speechEnabled = false; + } else { + this.speechEnabled = false; } } - }; + }; AblePlayer.prototype.getBrowserVoices = function () { - - // define this.descVoices array - // includes only languages that match the language of the captions or player + var voices, descLangs, voiceLang, preferredLang; - if (this.captionLang) { - preferredLang = this.captionLang.substring(0,2).toLowerCase(); - } - else { - preferredLang = this.lang.substring(0,2).toLowerCase(); - } - this.descVoices = []; + preferredLang = (this.captionLang) ? this.captionLang.substring(0,2).toLowerCase() : this.lang.substring(0,2).toLowerCase(); + + this.descVoices = []; voices = this.synth.getVoices(); descLangs = this.getDescriptionLangs(); if (voices.length > 0) { this.descVoices = []; - // available languages are identified with local suffixes (e.g., en-US) for (var i=0; i<voices.length; i++) { - // match only the first 2 characters of the lang code voiceLang = voices[i].lang.substring(0,2).toLowerCase(); if (voiceLang === preferredLang && (descLangs.indexOf(voiceLang) !== -1)) { - // this voice matches preferredLang - // AND there's a matching description track in this language - // Add this voice to final array this.descVoices.push(voices[i]); } } if (!this.descVoices.length) { - // no voices available in the default language(s) - // just use all voices, regardless of language this.descVoices = voices; } } @@ -9394,9 +6998,6 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getDescriptionLangs = function () { - // returns an array of languages (from srclang atttributes) - // in which there are description tracks - // use only first two characters of the lang code var descLangs = []; if (this.tracks) { for (var i=0; i < this.tracks.length; i++) { @@ -9410,52 +7011,38 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setDescriptionVoice = function () { - // set description voice on player init, or when user changes caption language - // Voice is determined in the following order of precedence: - // 1. User's preferred voice for this language, saved in a cookie - // 2. The first available voice in the array of available voices for this browser in this language - var cookie, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; - cookie = this.getCookie(); - if (typeof cookie.voices !== 'undefined') { - prefDescVoice = this.getPrefDescVoice(); - } - else { - prefDescVoice = null; - } - + var preferences, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; + preferences = this.getPref(); + prefDescVoice = (typeof preferences.voices !== 'undefined') ? this.getPrefDescVoice() : null; + this.getBrowserVoices(); this.rebuildDescPrefsForm(); - if (this.selectedDescriptions) { + if (this.selectedDescriptions) { descLang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - descLang = this.captionLang; - } - else { - descLang = this.lang; + } else if (this.captionLang) { + descLang = this.captionLang; + } else { + descLang = this.lang; } if (this.synth) { voices = this.synth.getVoices(); if (voices.length > 0) { - if (prefDescVoice) { - // select the language that matches prefDescVoice, if it's available - prefVoiceFound = false; + if (prefDescVoice) { + prefVoiceFound = false; for (var i=0; i<voices.length; i++) { - // first, be sure voice is the correct language if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { - if (voices[i].name === prefDescVoice) { - descVoice = voices[i].name; - prefVoiceFound = true; + if (voices[i].name === prefDescVoice) { + descVoice = voices[i].name; + prefVoiceFound = true; break; } } } } - if (!prefVoiceFound) { - // select the first language that matches the first 2 characters of the lang code + if (!prefVoiceFound) { for (var i=0; i<voices.length; i++) { if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { descVoice = voices[i].name; @@ -9463,92 +7050,64 @@ if (typeof module !== "undefined" && module.exports) { } } } - // make this the user's current preferred voice this.prefDescVoice = descVoice; this.prefDescVoiceLang = descLang; - // select this voice in the Description Prefs dialog if (this.$voiceSelectField) { - var selectedOption = this.$voiceSelectField.find('option[value="' + this.prefDescVoice + '"]'); this.$voiceSelectField.val(this.prefDescVoice); } - this.updateCookie('voice'); + this.updatePreferences('voice'); } } }; AblePlayer.prototype.swapDescription = function() { - // swap described and non-described source media, depending on which is playing - // this function is only called in two circumstances: - // 1. Swapping to described version when initializing player (based on user prefs & availability) - // (playerCreated == false) - // 2. User is toggling description - // (playerCreated == true) - var thisObj, i, origSrc, descSrc, srcType, newSource; + var thisObj, i, origSrc, descSrc; thisObj = this; - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + this.loadingMedia = false; - // get element that has focus at the time swap is initiated - // after player is rebuilt, focus will return to that same element - // (if it exists) - this.$focusedElement = $(':focus'); + this.$focusedElement = $(':focus'); + this.activeMedia = this.mediaId; - // get current time of current source, and attempt to start new video at the same time - // whether this is possible will be determined after the new media source has loaded - // see onMediaNewSourceLoad() - if (this.elapsed > 0) { - this.swapTime = this.elapsed; - } - else { - this.swapTime = 0; + if (this.elapsed > 0) { + this.swapTime = this.elapsed; + } else { + this.swapTime = 0; } - if (this.duration > 0) { - this.prevDuration = this.duration; + if (this.duration > 0) { + this.prevDuration = this.duration; } - // Capture current playback state, so media can resume after source is swapped - if (!this.okToPlay) { - this.okToPlay = this.playing; + if (!this.okToPlay) { + this.okToPlay = this.playing; } if (this.descOn) { - // user has requested the described version - this.showAlert(this.tt.alertDescribedVersion); - } - else { - // user has requested the non-described version - this.showAlert(this.tt.alertNonDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); + } else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); } if (this.player === 'html5') { this.swappingSrc = true; - this.paused = true; + this.paused = true; if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described for (i=0; i < this.$sources.length; i++) { - // for all <source> elements, replace src with data-orig-src - origSrc = this.$sources[i].getAttribute('data-orig-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-orig-src') ); srcType = this.$sources[i].getAttribute('type'); if (origSrc) { this.$sources[i].setAttribute('src',origSrc); } - } - } - else { - // the non-described version is currently playing. Swap to described. + } + } else { for (i=0; i < this.$sources.length; i++) { - // for all <source> elements, replace src with data-desc-src (if one exists) - // then store original source in a new data-orig-src attribute - origSrc = this.$sources[i].getAttribute('src'); - descSrc = this.$sources[i].getAttribute('data-desc-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('src') ); + descSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-desc-src') ); srcType = this.$sources[i].getAttribute('type'); if (descSrc) { this.$sources[i].setAttribute('src',descSrc); @@ -9557,90 +7116,58 @@ if (typeof module !== "undefined" && module.exports) { } } - if (this.recreatingPlayer) { - // stopgap to prevent multiple firings of recreatePlayer() - return; - } - if (this.playerCreated) { - // delete old player, then recreate it with new source & tracks - this.deletePlayer('swap-desc-html'); - this.recreatePlayer().then(function() { - if (!thisObj.loadingMedia) { + if (this.recreatingPlayer) { + return; + } + if (this.playerCreated) { + this.deletePlayer('swap-desc-html'); + this.recreatePlayer().then(function() { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } }); + } else { } - else { - // player is in the process of being created - // no need to recreate it - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { + + this.activeYouTubeId = (this.usingDescribedVersion()) ? this.youTubeId : this.youTubeDescId; - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeYouTubeId = this.youTubeId; - } - else { - // the non-described version is currently playing. Swap to described. - this.activeYouTubeId = this.youTubeDescId; - } if (typeof this.youTubePlayer !== 'undefined') { - thisObj.swappingSrc = true; + thisObj.swappingSrc = true; if (thisObj.playing) { - // loadVideoById() loads and immediately plays the new video at swapTime thisObj.youTubePlayer.loadVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - else { - // cueVideoById() loads the new video and seeks to swapTime, but does not play + } else { thisObj.youTubePlayer.cueVideoById(thisObj.activeYouTubeId,thisObj.swapTime); } } - if (this.playerCreated) { - this.deletePlayer('swap-desc-youtube'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-youtube'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { - // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { - // nothing to do here - // next steps occur when youtube onReady event fires - // see youtube.js > finalizeYoutubeInit() - }); - } - else if (this.player === 'vimeo') { + if (this.recreatingPlayer) { + return; + } + this.recreatePlayer().then(function() { + }); + } else if (this.player === 'vimeo') { if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described this.activeVimeoId = this.vimeoId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { - // the non-described version is currently playing. Swap to described. + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); + } else { this.activeVimeoId = this.vimeoDescId; - this.showAlert(this.tt.alertDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); } - if (this.playerCreated) { - this.deletePlayer('swap-desc-vimeo'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-vimeo'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { - // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { - // load the new video source + if (this.recreatingPlayer) { + return; + } + this.recreatePlayer().then(function() { thisObj.vimeoPlayer.loadVideo(thisObj.activeVimeoId).then(function() { if (thisObj.playing) { - // video was playing when user requested an alternative version - // seek to swapTime and continue playback (playback happens automatically) thisObj.vimeoPlayer.setCurrentTime(thisObj.swapTime); - } - else { - // Vimeo autostarts immediately after video loads - // The "Described" button should not trigger playback, so stop this before the user notices. + } else { thisObj.vimeoPlayer.pause(); } }); @@ -9649,36 +7176,30 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.showDescription = function(now) { - - if (!this.hasClosedDesc || this.swappingSrc || !this.descOn || this.descMethod === 'video') { + if (!this.playing || !this.hasClosedDesc || this.swappingSrc || !this.descOn || ( this.descMethod === 'video' && !this.prefDescVisible ) ) { return; } - var thisObj, i, cues, d, thisDescription, descText, msg; + var thisObj, cues, d, thisDescription, descText; thisObj = this; var flattenComponentForDescription = function (component) { var result = []; if (component.type === 'string') { result.push(component.value); - } - else { + } else { for (var i = 0; i < component.children.length; i++) { result.push(flattenComponentForDescription(component.children[i])); } } return result.join(''); }; - + cues = []; if (this.selectedDescriptions) { cues = this.selectedDescriptions.cues; - } - else if (this.descriptions.length >= 1) { + } else if (this.descriptions.length >= 1) { cues = this.descriptions[0].cues; } - else { - cues = []; - } for (d = 0; d < cues.length; d++) { if ((cues[d].start <= now) && (cues[d].end > now)) { thisDescription = d; @@ -9687,25 +7208,18 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisDescription !== 'undefined') { if (this.currentDescription !== thisDescription) { - // temporarily remove aria-live from $status in order to prevent description from being interrupted this.$status.removeAttr('aria-live'); descText = flattenComponentForDescription(cues[thisDescription].components); - if (this.descReader === 'screenreader') { - // load the new description into the container div for screen readers to read + if (this.descReader === 'screenreader') { this.$descDiv.html(descText); - } - else if (this.speechEnabled) { - // use browser's built-in speech synthesis - this.announceDescriptionText('description',descText); + } else if (this.speechEnabled) { + if ( 'video' !== this.descMethod ) { + this.announceDescriptionText('description',descText); + } if (this.prefDescVisible) { - // write description to the screen for sighted users - // but remove ARIA attributes since it isn't intended to be read by screen readers this.$descDiv.html(descText).removeAttr('aria-live aria-atomic'); } - } - else { - // browser does not support speech synthesis - // load the new description into the container div for screen readers to read + } else { this.$descDiv.html(descText); } if (this.prefDescPause && this.descMethod === 'text') { @@ -9714,112 +7228,70 @@ if (typeof module !== "undefined" && module.exports) { } this.currentDescription = thisDescription; } - } - else { + } else { this.$descDiv.html(''); this.currentDescription = -1; - // restore aria-live to $status this.$status.attr('aria-live','polite'); } }; - AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { + AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - // called when user changed playback rate - // adjust rate of audio description to match + var speechRate; - var speechRate; - - if (rate === 0.5) { - speechRate = 0.7; // option 1 in prefs menu - } - else if (rate === 0.75) { - speechRate = 0.8; // option 2 in prefs menu - } - else if (rate === 1.0) { - speechRate = 1; // option 4 in prefs menu (normal speech, default) - } - else if (rate === 1.25) { - speechRate = 1.1; // option 5 in prefs menu - } - else if (rate === 1.5) { - speechRate = 1.2; // option 6 in prefs menu - } - else if (rate === 1.75) { - speechRate = 1.5; // option 7 in prefs menu - } - else if (rate === 2.0) { - speechRate = 2; // option 8 in prefs menu (fast) - } - else if (rate === 2.25) { - speechRate = 2.5; // option 9 in prefs menu (very fast) - } - else if (rate >= 2.5) { - speechRate = 3; // option 10 in prefs menu (super fast) + if (rate === 0.5) { + speechRate = 0.7; + } else if (rate === 0.75) { + speechRate = 0.8; + } else if (rate === 1.0) { + speechRate = 1; + } else if (rate === 1.25) { + speechRate = 1.1; + } else if (rate === 1.5) { + speechRate = 1.2; + } else if (rate === 1.75) { + speechRate = 1.5; + } else if (rate === 2.0) { + speechRate = 2; + } else if (rate === 2.25) { + speechRate = 2.5; + } else if (rate >= 2.5) { + speechRate = 3; } this.prefDescRate = speechRate; - }; + }; AblePlayer.prototype.announceDescriptionText = function(context, text) { - // this function announces description text using speech synthesis - // it's only called if already determined that browser supports speech synthesis - // context is either: - // 'description' - actual description text extracted from WebVTT file - // 'sample' - called when user changes a setting in Description Prefs dialog var thisObj, voiceName, i, voice, pitch, rate, volume, utterance, timeElapsed, secondsElapsed; thisObj = this; - // As of Feb 2021, - // 1. In some browsers (e.g., Chrome) window.speechSynthesis.getVoices() - // returns 0 voices unless the request is triggered with a user click - // Therefore, description may have failed to initialize when the page loaded - // This function cannot have been called without a mouse click. - // Therefore, this is a good time to check that, and try again if needed - // 2. In some browsers, the window.speechSynthesis.speaking property fails to reset, - // and onend event is never fired. This prevents new speech from being spoken. - // window.speechSynthesis.cancel() also fails, so it's impossible to recover. - // This only seems to happen with some voices. - // Typically the first voice in the getVoices() array (index 0) is realiable - // When speech synthesis gets wonky, this is a deep problem that impacts all browsers - // and typically requires a computer reboot to make right again. - // This has been observed frequently in macOS Big Sur, but also in Windows 10 - // To ignore user's voice preferences and always use the first voice, set the following var to true - // This is for testing only; not recommended for production - // unless the voice select field is also removed from the Prefs dialog var useFirstVoice = false; - + if (!this.speechEnabled) { - // voices array failed to load the first time. Try again this.initSpeech('desc'); } if (context === 'sample') { - // get settings from form voiceName = $('#' + this.mediaId + '_prefDescVoice').val(); pitch = $('#' + this.mediaId + '_prefDescPitch').val(); rate = $('#' + this.mediaId + '_prefDescRate').val(); volume = $('#' + this.mediaId + '_prefDescVolume').val(); - } - else { - // get settings from global prefs + } else { voiceName = this.prefDescVoice; pitch = this.prefDescPitch; rate = this.prefDescRate; volume = this.prefDescVolume; } - // get the voice associated with the user's chosen voice name if (this.descVoices) { if (this.descVoices.length > 0) { if (useFirstVoice) { voice = this.descVoices[0]; - } - else if (voiceName) { - // get the voice that matches user's preferred voiceName + } else if (voiceName) { for (i = 0; i < this.descVoices.length; i++) { if (this.descVoices[i].name == voiceName) { voice = this.descVoices[i]; @@ -9828,67 +7300,51 @@ if (typeof module !== "undefined" && module.exports) { } } if (typeof voice === 'undefined') { - // no matching voice was found - // use the first voice in the array voice = this.descVoices[0]; } - utterance = new SpeechSynthesisUtterance(); - utterance.voice = voice; - utterance.voiceURI = 'native'; - utterance.volume = volume; - utterance.rate = rate; - utterance.pitch = pitch; - utterance.text = text; - // TODO: Consider the best language for the utterance: - // language of the web page? (this.lang) - // language of the WebVTT description track? - // language of the user's chosen voice? - // If there's a mismatch between any of these, the description will likely be unintelligible - utterance.lang = this.lang; - utterance.onstart = function(e) { - // utterance has started - }; - utterance.onpause = function(e) { - // utterance has paused - }; - utterance.onend = function(e) { - // utterance has ended - this.speakingDescription = false; - timeElapsed = e.elapsedTime; - // As of Firefox 95, e.elapsedTime is expressed in seconds - // Other browsers (tested in Chrome & Edge) express this in milliseconds - // Assume no utterance will require over 100 seconds to express... - if (timeElapsed > 100) { - // time is likely expressed in milliseconds - secondsElapsed = (e.elapsedTime/1000).toFixed(2); - } - else { - // time is likely already expressed in seconds; just need to round it - secondsElapsed = (e.elapsedTime).toFixed(2); - } - if (this.debug) { - - } - if (context === 'description') { - if (thisObj.prefDescPause) { - if (thisObj.pausedForDescription) { - thisObj.playMedia(); - this.pausedForDescription = false; + } + } else { + voice = null; + } + utterance = new SpeechSynthesisUtterance(); + if (voice) { + utterance.voice = voice; + } + utterance.voiceURI = 'native'; + utterance.volume = volume; + utterance.rate = rate; + utterance.pitch = pitch; + utterance.text = text; + utterance.lang = this.lang; + utterance.onstart = function(e) { + }; + utterance.onpause = function(e) { + }; + utterance.onend = function(e) { + this.speakingDescription = false; + timeElapsed = e.elapsedTime; + secondsElapsed = (timeElapsed > 100) ? (e.elapsedTime/1000).toFixed(2) : (e.elapsedTime).toFixed(2); + + if (this.debug) { + } - } + if (context === 'description') { + if (thisObj.prefDescPause) { + if (thisObj.pausedForDescription) { + thisObj.playMedia(); + this.pausedForDescription = false; } - }; - utterance.onerror = function(e) { - // handle error - - }; - if (this.synth.paused) { - this.synth.resume(); } - this.synth.speak(utterance); - this.speakingDescription = true; } + }; + utterance.onerror = function(e) { + + }; + if (this.synth.paused) { + this.synth.resume(); } + this.synth.speak(utterance); + this.speakingDescription = true; }; })(jQuery); @@ -9897,8 +7353,6 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isIOS = function(version) { - // return true if this is IOS - // if version is provided check for a particular version var userAgent, iOS; @@ -9907,109 +7361,79 @@ if (typeof module !== "undefined" && module.exports) { if (iOS) { if (typeof version !== 'undefined') { if (userAgent.indexOf('os ' + version) !== -1) { - // this is the target version of iOS return true; - } - else { + } else { return false; } - } - else { - // no version was specified + } else { return true; } - } - else { - // this is not IOS + } else { return false; } }; AblePlayer.prototype.browserSupportsVolume = function() { - // To test whether the browser supports changing the volume, - // create a new audio element and try setting the volume to something other than 1. - // Then, retrieve the current setting to see if it preserved it. - // Unfortunately, this doesn't work in iOS. In 2022, our tests yield the same results as reported here: - // https://stackoverflow.com/questions/72861253/how-do-i-detect-if-a-browser-does-not-support-changing-html-audio-volume + var audio, testVolume; - // So, unfortunately we have to resort to sniffing for iOS - // before testing for support in other browsers - var audio, testVolume; - - if (this.isIOS()) { - return false; - } + if (this.isIOS()) { + return false; + } - testVolume = 0.9; // any value between 0.1 and 0.9 - audio = new Audio(); - audio.volume = testVolume; - if (audio.volume === testVolume) { - return true; - } - else { - return false; - } + testVolume = 0.9; + audio = new Audio(); + audio.volume = testVolume; + + return ( audio.volume === testVolume ); }; AblePlayer.prototype.nativeFullscreenSupported = function () { - return document.fullscreenEnabled || - document.webkitFullscreenEnabled || - document.mozFullscreenEnabled || - document.msFullscreenEnabled; + return document.fullscreenEnabled || document.webkitFullscreenEnabled; }; })(jQuery); (function ($) { + AblePlayer.prototype.seekTo = function (newTime) { var thisObj = this; - // define variables to be used for analytics - // e.g., to measure the extent to which users seek back and forward this.seekFromTime = this.media.currentTime; this.seekToTime = newTime; this.seeking = true; this.liveUpdatePending = true; - if (this.speakingDescription) { - this.synth.cancel(); + if (this.speakingDescription) { + this.synth.cancel(); } + this.syncSignVideo( {'time' : this.startTime } ); + if (this.player === 'html5') { var seekable; this.startTime = newTime; - // Check HTML5 media "seekable" property to be sure media is seekable to startTime seekable = this.media.seekable; if (seekable.length > 0 && this.startTime >= seekable.start(0) && this.startTime <= seekable.end(0)) { - // ok to seek to startTime - // canplaythrough will be triggered when seeking is complete - // this.seeking will be set to false at that point - this.media.currentTime = this.startTime; - this.seekStatus = 'complete'; - if (this.hasSignLanguage && this.signVideo) { - // keep sign languge video in sync - this.signVideo.currentTime = this.startTime; - } + this.media.currentTime = this.startTime; + this.seekStatus = 'complete'; + this.syncSignVideo( { 'time' : this.startTime } ); } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.seekTo(newTime,true); if (newTime > 0) { if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } } - } - else if (this.player === 'vimeo') { + this.syncSignVideo( {'time' : newTime } ); + } else if (this.player === 'vimeo') { this.vimeoPlayer.setCurrentTime(newTime).then(function() { - // seek finished. - // successful completion also fires a 'seeked' event (see event.js) thisObj.elapsed = newTime; thisObj.refreshControls('timeline'); }) @@ -10019,32 +7443,19 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getMediaTimes = function (duration, elapsed) { - // Returns an array with keys 'duration' and 'elapsed' - // Vars passed to this function come courtesy of select Vimeo events - // Use those if they're available. - // Otherwise, will need to call the relevant media API - // This function should only be called from onMediaUpdateTime() - // If duration and elapsed are needed other times, use this.duration and this.elapsed - // both values are expressed in seconds, and all player APIs are similar: - // they return a value that is rounded to the nearest second before playback begins, - // then to the nearest thousandth of a second after playback begins - // With HTML5 media API, some browsers are more precise (e.g., Firefox rounds to 6 decimal points) - // but inconsistent (values with 9 decimal points have been sporadically observed in Safari) - // For standardization, values are rounded to 6 decimal points before they're returned var deferred, promise, thisObj, mediaTimes; mediaTimes = {}; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (typeof duration !== 'undefined' && typeof elapsed !== 'undefined') { mediaTimes['duration'] = duration; mediaTimes['elapsed'] = elapsed; deferred.resolve(mediaTimes); - } - else { + } else { this.getDuration().then(function(duration) { mediaTimes['duration'] = thisObj.roundDown(duration,6); thisObj.getElapsed().then(function(elapsed) { @@ -10058,11 +7469,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getDuration = function () { - // returns duration of the current media, expressed in seconds - // function is called by getMediaTimes, and return value is sanitized there var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -10071,39 +7480,31 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getDuration().then(function(duration) { if (duration === undefined || isNaN(duration) || duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { deferred.resolve(0); } - } - else { + } else { var duration; if (this.player === 'html5') { - duration = this.media.duration; - } - else if (this.player === 'youtube') { + duration = this.media.duration; + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { - if (this.duration > 0) { - // duration was already retrieved while checking for captions - duration = this.duration; - } - else { + if (this.duration > 0) { + duration = this.duration; + } else { duration = this.youTubePlayer.getDuration(); } - } - else { // the YouTube player hasn't initialized yet + } else { duration = 0; } } if (duration === undefined || isNaN(duration) || duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } } @@ -10112,12 +7513,10 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getElapsed = function () { - // returns elapsed time of the current media, expressed in seconds - // function is called by getMediaTimes, and return value is sanitized there var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -10126,33 +7525,27 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getCurrentTime().then(function(elapsed) { if (elapsed === undefined || isNaN(elapsed) || elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { deferred.resolve(0); } - } - else { + } else { var elapsed; if (this.player === 'html5') { elapsed = this.media.currentTime; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { elapsed = this.youTubePlayer.getCurrentTime(); - } - else { // the YouTube player hasn't initialized yet + } else { elapsed = 0; } } if (elapsed === undefined || isNaN(elapsed) || elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } } @@ -10161,72 +7554,44 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getPlayerState = function () { - // Returns one of the following states: - // 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. - // 'ended' - Finished playing. - // 'paused' - Not playing, but not stopped or ended. - // 'buffering' - Momentarily paused to load, but will resume once data is loaded. - // 'playing' - Currently playing. - - // Commented out the following in 3.2.1 - not sure of its intended purpose - // It can be useful to know player state even when swapping src - // and the overhead is seemingly minimal - // TODO - Investigate this further. Delete if it's not needed - / - if (this.swappingSrc) { - return; - } - / - var deferred, promise, thisObj, duration, elapsed; - deferred = new $.Deferred(); + + var deferred, promise, thisObj; + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (this.player === 'html5') { if (this.media.ended) { deferred.resolve('ended'); - } - else if (this.media.paused) { + } else if (this.media.paused) { deferred.resolve('paused'); - } - else if (this.media.readyState !== 4) { + } else if (this.media.readyState !== 4) { deferred.resolve('buffering'); - } - else { + } else { deferred.resolve('playing'); } - } - else if (this.player === 'youtube' && this.youTubePlayerReady) { + } else if (this.player === 'youtube' && this.youTubePlayerReady) { var state = this.youTubePlayer.getPlayerState(); if (state === -1 || state === 5) { deferred.resolve('stopped'); - } - else if (state === 0) { + } else if (state === 0) { deferred.resolve('ended'); - } - else if (state === 1) { + } else if (state === 1) { deferred.resolve('playing'); - } - else if (state === 2) { + } else if (state === 2) { deferred.resolve('paused'); - } - else if (state === 3) { + } else if (state === 3) { deferred.resolve('buffering'); } - } - else if (this.player === 'vimeo' && this.vimeoPlayer) { - // curiously, Vimeo's API has no getPlaying(), getBuffering(), or getState() methods - // so maybe if it's neither paused nor ended, it must be playing??? + } else if (this.player === 'vimeo' && this.vimeoPlayer) { this.vimeoPlayer.getPaused().then(function(paused) { if (paused) { deferred.resolve('paused'); - } - else { + } else { thisObj.vimeoPlayer.getEnded().then(function(ended) { if (ended) { deferred.resolve('ended'); - } - else { + } else { deferred.resolve('playing'); } }); @@ -10239,138 +7604,130 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isPlaybackRateSupported = function () { if (this.player === 'html5') { - if (this.media.playbackRate) { - return true; - } - else { - return false; - } - } - else if (this.player === 'youtube') { - // Youtube supports varying playback rates per video. - // Only expose controls if more than one playback rate is available. - if (this.youTubePlayerReady) { - if (this.youTubePlayer.getAvailablePlaybackRates().length > 1) { - return true; - } - else { - return false; - } - } - else { + return (this.media.playbackRate) ? true : false; + } else if (this.player === 'youtube') { + if (this.youTubePlayerReady) { + return (this.youTubePlayer.getAvailablePlaybackRates().length > 1) ? true : false; + } else { return false; } - } - else if (this.player === 'vimeo') { - // since this takes longer to determine, it was set previously in initVimeoPlayer() + } else if (this.player === 'vimeo') { return this.vimeoSupportsPlaybackRateChange; } }; AblePlayer.prototype.setPlaybackRate = function (rate) { - + rate = Math.max(0.5, rate); - if (this.hasClosedDesc && this.descMethod === 'text') { - // keep speech rate in sync with playback rate even if descOn is false - this.syncSpeechToPlaybackRate(rate); + if (this.hasClosedDesc && this.descMethod === 'text') { + this.syncSpeechToPlaybackRate(rate); } + this.syncSignVideo( {'rate' : rate } ); + if (this.player === 'html5') { this.media.playbackRate = rate; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.setPlaybackRate(rate); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.setPlaybackRate(rate); } - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.playbackRate = rate; - } + this.syncSignVideo( { 'rate' : rate } ); this.playbackRate = rate; - this.$speed.text(this.tt.speed + ': ' + rate.toFixed(2).toString() + 'x'); - }; + this.$speed.text( this.translate( 'speed', 'Speed' ) + ': ' + rate.toFixed(2).toString() + 'x'); + }; AblePlayer.prototype.getPlaybackRate = function () { if (this.player === 'html5') { return this.media.playbackRate; - } - else if (this.player === 'youtube') { - if (this.youTubePlayerReady) { - return this.youTubePlayer.getPlaybackRate(); - } + } else if (this.player === 'youtube' && (this.youTubePlayerReady)) { + return this.youTubePlayer.getPlaybackRate(); } }; AblePlayer.prototype.isPaused = function () { - // Note there are three player states that count as paused in this sense, - // and one of them is named 'paused'. - // A better name would be 'isCurrentlyNotPlayingOrBuffering' - - var state; if (this.player === 'vimeo') { - // just rely on value of this.playing - if (this.playing) { - return false; - } - else { - return true; - } - } - else { + return (this.playing) ? false : true; + } else { this.getPlayerState().then(function(state) { - // if any of the following is true, consider the media 'paused' return state === 'paused' || state === 'stopped' || state === 'ended'; }); } }; + AblePlayer.prototype.syncSignVideo = function(options) { + if (this.hasSignLanguage && ( this.signVideo || this.signYoutube ) ) { + if (options && typeof options.time !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.currentTime = options.time; + } else { + this.youTubeSignPlayer.seekTo(options.time,true); + } + } + if (options && typeof options.rate !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.playbackRate = options.rate; + } else { + this.youTubeSignPlayer.setPlaybackRate(options.rate); + } + } + if (options && typeof options.pause !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.pause(true); + } else { + this.youTubeSignPlayer.pauseVideo(); + } + } + if (options && typeof options.play !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.play(true); + } else { + this.youTubeSignPlayer.playVideo(); + } + } + if (options && typeof options.volume !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.volume = 0; + } + } + } + }; + AblePlayer.prototype.pauseMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'pause' : true } ); if (this.player === 'html5') { this.media.pause(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.pause(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.pauseVideo(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.pause(); } }; AblePlayer.prototype.playMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'play' : true } ); if (this.player === 'html5') { this.media.play(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.play(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.playVideo(); if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } this.stoppingYouTube = false; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.play(); } this.startedPlaying = true; if (this.hideControls) { - // wait briefly after playback begins, then hide controls this.hidingControls = true; this.invokeHideControlsTimeout(); } @@ -10378,52 +7735,19 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.fadeControls = function(direction) { - // Visibly fade controls without hiding them from screen reader users - // direction is either 'out' or 'in' - // TODO: This still needs work. - // After the player fades, it's replaced by an empty space - // Would be better if the video and captions expanded to fill the void - // Attempted to fade out to 0 opacity, then move the playerDiv offscreen - // and expand the mediaContainer to fill the vacated space - // However, my attempts to do this have been choppy and buggy - // Code is preserved below and commented out - - var thisObj, mediaHeight, playerHeight, newMediaHeight; var thisObj = this; if (direction == 'out') { - // get the original height of two key components: - mediaHeight = this.$mediaContainer.height(); - playerHeight = this.$playerDiv.height(); - newMediaHeight = mediaHeight + playerHeight; - - // fade slowly to transparency - this.$playerDiv.fadeTo(2000,0,function() { - / - // when finished, position playerDiv offscreen - // thisObj.$playerDiv.addClass('able-offscreen'); - // Expand the height of mediaContainer to fill the void (needs work) - thisObj.$mediaContainer.animate({ - height: newMediaHeight - },500); - / - }); - } - else if (direction == 'in') { - // restore captionsContainer to its original height (needs work) - // this.$mediaContainer.removeAttr('style'); - // fade relatively quickly back to its original position with full opacity - // this.$playerDiv.removeClass('able-offscreen').fadeTo(100,1); - this.$playerDiv.fadeTo(100,1); + this.$playerDiv.addClass( 'fade-out' ).removeClass( 'fade-in' ); + } else if (direction == 'in') { + this.$playerDiv.addClass( 'fade-in' ).removeClass( 'fade-out' ); } }; AblePlayer.prototype.invokeHideControlsTimeout = function () { - // invoke timeout for waiting a few seconds after a mouse move or key down - // before hiding controls again var thisObj = this; this.hideControlsTimeout = window.setTimeout(function() { if (typeof thisObj.playing !== 'undefined' && thisObj.playing === true && thisObj.hideControls) { @@ -10434,56 +7758,31 @@ if (typeof module !== "undefined" && module.exports) { this.hideControlsTimeoutStatus = 'active'; }; - AblePlayer.prototype.refreshControls = function(context, duration, elapsed) { - - // context is one of the following: - // 'init' - initial build (or subsequent change that requires full rebuild) - // 'timeline' - a change may effect time-related controls - // 'captions' - a change may effect caption-related controls - // 'descriptions' - a change may effect description-related controls - // 'transcript' - a change may effect the transcript window or button - // 'fullscreen' - a change has been triggered by full screen toggle - // 'playpause' - a change triggered by either a 'play' or 'pause' event - - // NOTE: context is not currently supported. - // The steps in this function have too many complex interdependencies - // The gains in efficiency are offset by the possibility of introducing bugs - // For now, executing everything + AblePlayer.prototype.refreshControls = function(context = 'init', duration, elapsed) { + + context = 'init'; - // duration and elapsed are passed from callback functions of Vimeo API events - // duration is expressed as sss.xxx - // elapsed is expressed as sss.xxx - var thisObj, duration, elapsed, lastChapterIndex, displayElapsed, - updateLive, textByState, timestamp, widthUsed, - leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount, - buffered, newTop, statusBarHeight, speedHeight, statusBarWidthBreakpoint, - newSvgData; + var thisObj, duration, textByState, timestamp, captionsCount, newTop, statusBarWidthBreakpoint; thisObj = this; - if (this.swappingSrc) { - if (this.playing) { - // wait until new source has loaded before refreshing controls - // can't wait if player is NOT playing because some critical events - // won't fire until playback of new media starts - return; - } + if ( this.swappingSrc && this.playing ) { + return; } - if (context === 'timeline' || context === 'init') { - // all timeline-related functionality requires both duration and elapsed + if ( context === 'timeline' || context === 'init' ) { + var lastChapterIndex, displayElapsed, updateLive, widthUsed, + leftControls, rightControls, seekbarWidth, buffered; if (typeof this.duration === 'undefined') { - // wait until duration is known before proceeding with refresh - return; + return; } if (this.useChapterTimes) { this.chapterDuration = this.getChapterDuration(); this.chapterElapsed = this.getChapterElapsed(); } - if (this.useFixedSeekInterval === false && this.seekIntervalCalculated === false && this.duration > 0) { - // couldn't calculate seekInterval previously; try again. + if ( !this.useFixedSeekInterval && !this.seekIntervalCalculated && this.duration > 0) { this.setSeekInterval(); } @@ -10491,60 +7790,37 @@ if (typeof module !== "undefined" && module.exports) { if (this.useChapterTimes) { lastChapterIndex = this.selectedChapters.cues.length-1; if (this.selectedChapters.cues[lastChapterIndex] == this.currentChapter) { - // this is the last chapter if (this.currentChapter.end !== this.duration) { - // chapter ends before or after video ends - // need to adjust seekbar duration to match video end this.seekBar.setDuration(this.duration - this.currentChapter.start); - } - else { + } else { this.seekBar.setDuration(this.chapterDuration); } - } - else { - // this is not the last chapter + } else { this.seekBar.setDuration(this.chapterDuration); } - } - else { - if (!(this.duration === undefined || isNaN(this.duration) || this.duration === -1)) { - this.seekBar.setDuration(this.duration); - } + } else if ( !(this.duration === undefined || isNaN(this.duration) || this.duration === -1) ) { + this.seekBar.setDuration(this.duration); } if (!(this.seekBar.tracking)) { - // Only update the aria live region if we have an update pending - // (from a seek button control) or if the seekBar has focus. - // We use document.activeElement instead of $(':focus') due to a strange bug: - // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. updateLive = this.liveUpdatePending || this.seekBar.seekHead.is($(document.activeElement)); this.liveUpdatePending = false; if (this.useChapterTimes) { this.seekBar.setPosition(this.chapterElapsed, updateLive); - } - else { + } else { this.seekBar.setPosition(this.elapsed, updateLive); } } - // When seeking, display the seek bar time instead of the actual elapsed time. if (this.seekBar.tracking) { displayElapsed = this.seekBar.lastTrackPosition; - } - else { - if (this.useChapterTimes) { - displayElapsed = this.chapterElapsed; - } - else { - displayElapsed = this.elapsed; - } + } else { + displayElapsed = ( this.useChapterTimes ) ? this.chapterElapsed : this.elapsed; } } - // update elapsed & duration if (typeof this.$durationContainer !== 'undefined') { if (this.useChapterTimes) { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.chapterDuration)); - } - else { + } else { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.duration)); } } @@ -10553,178 +7829,100 @@ if (typeof module !== "undefined" && module.exports) { } if (this.skin === 'legacy') { - // Update seekbar width. - // To do this, we need to calculate the width of all buttons surrounding it. if (this.seekBar) { - widthUsed = 0; + let controlWrapper = this.seekBar.wrapperDiv.parent().parent(); leftControls = this.seekBar.wrapperDiv.parent().prev('div.able-left-controls'); rightControls = leftControls.next('div.able-right-controls'); - leftControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); // true = include margin - } - }); + widthUsed = leftControls.outerWidth(true); rightControls.children().each(function () { if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); + widthUsed += $(this).outerWidth(true) + 5; } }); if (this.fullscreen) { seekbarWidth = $(window).width() - widthUsed; + } else { + seekbarWidth = controlWrapper.width() - widthUsed - 10; } - else { - // seekbar is wide enough to fill the remaining space - // include a 5px buffer to account for minor browser differences - seekbarWidth = this.$ableWrapper.width() - widthUsed - 5; - } - // Sometimes some minor fluctuations based on browser weirdness, so set a threshold. if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) { this.seekBar.setWidth(seekbarWidth); } } } - // Update buffering progress. - // TODO: Currently only using the first HTML5 buffered interval, - // but this fails sometimes when buffering is split into two or more intervals. - if (this.player === 'html5') { - if (this.media.buffered.length > 0) { - buffered = this.media.buffered.end(0); - if (this.useChapterTimes) { - if (buffered > this.chapterDuration) { - buffered = this.chapterDuration; - } - if (this.seekBar) { - this.seekBar.setBuffered(buffered / this.chapterDuration); - } - } - else { - if (this.seekBar) { - if (!isNaN(buffered)) { - this.seekBar.setBuffered(buffered / duration); - } - } + if (this.player === 'html5' && this.media.buffered.length > 0) { + buffered = this.media.buffered.end(0); + if (this.useChapterTimes) { + if (buffered > this.chapterDuration) { + buffered = this.chapterDuration; } - } - } - else if (this.player === 'youtube') { - if (this.seekBar) { - if (this.youTubePlayerReady) { - this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + if (this.seekBar) { + this.seekBar.setBuffered(buffered / this.chapterDuration); } + } else if ( this.seekBar && !isNaN(buffered) ) { + this.seekBar.setBuffered(buffered / duration); } + } else if (this.player === 'youtube' && this.seekBar && this.youTubePlayerReady ) { + this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + } else if (this.player === 'vimeo') { } - else if (this.player === 'vimeo') { - // TODO: Add support for Vimeo buffering update - } - } // end if context == 'timeline' or 'init' - - if (context === 'descriptions' || context == 'init'){ + } + if (context === 'descriptions' || context == 'init') { if (this.$descButton) { - if (this.descOn) { - this.$descButton.removeClass('buttonOff').attr('aria-label',this.tt.turnOffDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOffDescriptions); - } - else { - this.$descButton.addClass('buttonOff').attr('aria-label',this.tt.turnOnDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOnDescriptions); - } + this.toggleButtonState( + this.$descButton, + this.descOn, + this.translate( 'turnOffDescriptions', 'Turn off descriptions' ), + this.translate( 'turnOnDescriptions', 'Turn on descriptions' ), + ); } } - if (context === 'captions' || context == 'init'){ + if (context === 'captions' || context == 'init') { if (this.$ccButton) { captionsCount = this.captions.length; - - // Button has a different title depending on the number of captions. - // If only one caption track, this is "Show captions" and "Hide captions" - // Otherwise, it is just always "Captions" - if (!this.captionsOn) { - this.$ccButton.addClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'false') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.showCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.showCaptions); - } - } - else { - this.$ccButton.removeClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'true') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.hideCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.hideCaptions); - } - } - if (captionsCount > 1) { this.$ccButton.attr({ - 'aria-label': this.tt.captions, 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-captions-menu' }); - this.$ccButton.find('span.able-clipped').text(this.tt.captions); } + var ariaLabelOn = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + var ariaPressed = ( captionsCount > 1 ) ? true : false; + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); } } if (context === 'fullscreen' || context == 'init'){ if (this.$fullscreenButton) { if (!this.fullscreen) { - this.$fullscreenButton.attr('aria-label', this.tt.enterFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-collapse').addClass('icon-fullscreen-expand'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-expand'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenExpandButtonImg); - } - } - else { - this.$fullscreenButton.attr('aria-label',this.tt.exitFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-expand').addClass('icon-fullscreen-collapse'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-collapse'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenCollapseButtonImg); - } + this.$fullscreenButton.attr( 'aria-label', this.translate( 'enterFullScreen', 'Enter full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-expand' ); + } else { + this.$fullscreenButton.attr('aria-label', this.translate( 'exitFullScreen', 'Exit full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-collapse' ); } } } if (context === 'playpause' || context == 'init'){ if (typeof this.$bigPlayButton !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Choose show/hide for big play button and adjust position. if (this.paused && !this.seekBar.tracking) { if (!this.hideBigPlayButton) { this.$bigPlayButton.show(); this.$bigPlayButton.attr('aria-hidden', 'false'); - - } - if (this.fullscreen) { - this.$bigPlayButton.width($(window).width()); - this.$bigPlayButton.height($(window).height()); - } - else { - this.$bigPlayButton.width(this.$mediaContainer.width()); - this.$bigPlayButton.height(this.$mediaContainer.height()); } - } - else { + } else { this.$bigPlayButton.hide(); this.$bigPlayButton.attr('aria-hidden', 'true'); } @@ -10734,31 +7932,25 @@ if (typeof module !== "undefined" && module.exports) { if (context === 'transcript' || context == 'init'){ if (this.transcriptType) { - // Sync checkbox and autoScrollTranscript with user preference if (this.prefAutoScrollTranscript === 1) { this.autoScrollTranscript = true; this.$autoScrollTranscriptCheckbox.prop('checked',true); - } - else { + } else { this.autoScrollTranscript = false; this.$autoScrollTranscriptCheckbox.prop('checked',false); } - // If transcript locked, scroll transcript to current highlight location. if (this.autoScrollTranscript && this.currentHighlight) { newTop = Math.floor(this.$transcriptDiv.scrollTop() + $(this.currentHighlight).position().top - (this.$transcriptDiv.height() / 2) + ($(this.currentHighlight).height() / 2)); if (newTop !== Math.floor(this.$transcriptDiv.scrollTop())) { - // Set a flag to ignore the coming scroll event. - // there's no other way I know of to differentiate programmatic and user-initiated scroll events. this.scrollingTranscript = true; - // only scroll once after moving a highlight if (this.movingHighlight) { this.$transcriptDiv.scrollTop(newTop); - this.movingHighlight = false; - } + this.movingHighlight = false; + } } } } @@ -10768,7 +7960,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$chaptersButton) { this.$chaptersButton.attr({ - 'aria-label': this.tt.chapters, + 'aria-label': this.translate( 'chapters', 'Chapters' ), 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-chapters-menu' }); @@ -10777,234 +7969,115 @@ if (typeof module !== "undefined" && module.exports) { if (context === 'timeline' || context === 'playpause' || context === 'init') { - // update status textByState = { - 'stopped': this.tt.statusStopped, - 'paused': this.tt.statusPaused, - 'playing': this.tt.statusPlaying, - 'buffering': this.tt.statusBuffering, - 'ended': this.tt.statusEnd - }; - - if (this.stoppingYouTube) { - // stoppingYouTube is true temporarily while video is paused and seeking to 0 - // See notes in handleRestart() - // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) - if (this.$status.text() !== this.tt.statusStopped) { - this.$status.text(this.tt.statusStopped); - } - if (this.$playpauseButton.find('span').first().hasClass('icon-pause')) { - if (this.iconType === 'font') { - this.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('play'); - this.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - this.$playpauseButton.find('path').attr('d',newSvgData[1]); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else { - this.$playpauseButton.find('img').attr('src',this.playButtonImg); - } - } - } - else { - if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Update the text only if it's changed since it has role="alert"; - // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. - this.getPlayerState().then(function(currentState) { - if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { - // Debounce updates; only update after status has stayed steadily different for a while - // "A while" is defined differently depending on context - if (thisObj.swappingSrc) { - // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), - // so set a longer wait time before writing a status message - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) - } - } - else { - // for all other contexts (e.g., users clicks Play/Pause) - // user should receive more rapid feedback - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 250; // in ms - } - } - timestamp = (new Date()).getTime(); - if (!thisObj.statusDebounceStart) { - thisObj.statusDebounceStart = timestamp; - // Call refreshControls() again after allotted time has passed - thisObj.debouncingStatus = true; - thisObj.statusTimeout = setTimeout(function () { - thisObj.debouncingStatus = false; - thisObj.refreshControls(context); - }, thisObj.statusMessageThreshold); - } - else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { - thisObj.$status.text(textByState[currentState]); - thisObj.statusDebounceStart = null; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - } - else { - thisObj.statusDebounceStart = null; - thisObj.debouncingStatus = false; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - // Don't change play/pause button display while using the seek bar (or if YouTube stopped) - if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { - if (currentState === 'paused' || currentState === 'stopped' || currentState === 'ended') { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('play'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.playButtonImg); - } - } - else { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-play').addClass('icon-pause'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('pause'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.pauseButtonImg); - } + 'stopped': this.translate( 'statusStopped', 'Stopped' ), + 'paused': this.translate( 'statusPaused', 'Paused' ), + 'playing': this.translate( 'statusPlaying', 'Playing' ), + 'buffering': this.translate( 'statusBuffering', 'Buffering' ), + 'ended': this.translate( 'statusEnd', 'End of track' ) + }; + + if (this.stoppingYouTube) { + if (this.$status.text() !== this.translate( 'statusStopped', 'Stopped' ) ) { + this.$status.text( this.translate( 'statusStopped', 'Stopped' ) ); + } + this.getIcon( this.$playpauseButton, 'play' ); + } else if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { + this.getPlayerState().then(function(currentState) { + if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { + if (thisObj.swappingSrc) { + if (!thisObj.debouncingStatus) { + thisObj.statusMessageThreshold = 2000; } + } else if (!thisObj.debouncingStatus) { + thisObj.statusMessageThreshold = 250; } - }); - } + timestamp = (new Date()).getTime(); + if (!thisObj.statusDebounceStart) { + thisObj.statusDebounceStart = timestamp; + thisObj.debouncingStatus = true; + thisObj.statusTimeout = setTimeout(function () { + thisObj.debouncingStatus = false; + thisObj.refreshControls(context); + }, thisObj.statusMessageThreshold); + } else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { + thisObj.$status.text(textByState[currentState]); + thisObj.statusDebounceStart = null; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + } else { + thisObj.statusDebounceStart = null; + thisObj.debouncingStatus = false; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { + if (currentState === 'paused' || currentState === 'stopped' || currentState === 'ended') { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); + thisObj.getIcon( thisObj.$playpauseButton, 'play' ); + } else { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); + thisObj.getIcon( thisObj.$playpauseButton, 'pause' ); + } + } + }); } } - // Show/hide status bar content conditionally if (!this.fullscreen) { statusBarWidthBreakpoint = 300; - statusBarHeight = this.$statusBarDiv.height(); - speedHeight = this.$statusBarDiv.find('span.able-speed').height(); - if (speedHeight > (statusBarHeight + 5)) { - // speed bar is wrapping (happens often in German player) + if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { this.$statusBarDiv.find('span.able-speed').hide(); this.hidingSpeed = true; - } - else { + } else { if (this.hidingSpeed) { this.$statusBarDiv.find('span.able-speed').show(); this.hidingSpeed = false; } - if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { - // Player is too small for a speed span - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - } } } }; - AblePlayer.prototype.getHiddenWidth = function($el) { - - // jQuery returns for width() if element is hidden - // this function is a workaround - - // save a reference to a cloned element that can be measured - var $hiddenElement = $el.clone().appendTo('body'); - - // calculate the width of the clone - var width = $hiddenElement.outerWidth(); - - // remove the clone from the DOM - $hiddenElement.remove(); - - return width; - }; - AblePlayer.prototype.handlePlay = function(e) { - if (this.paused) { - // user clicked play - this.okToPlay = true; + this.okToPlay = true; this.playMedia(); - if (this.synth.paused) { - // media was paused while description was speaking - // resume utterance - this.synth.resume(); + if (this.synth.paused) { + this.synth.resume(); } - } - else { - // user clicked pause - this.okToPlay = false; + } else { + this.okToPlay = false; this.pauseMedia(); - if (this.speakingDescription) { - // pause the current utterance - // it will resume when the user presses play - this.synth.pause(); + if (this.speakingDescription) { + this.synth.pause(); } } - if (this.speechEnabled === null) { - this.initSpeech('play'); + if (this.speechEnabled === null) { + this.initSpeech('play'); } }; AblePlayer.prototype.handleRestart = function() { - if (this.speakingDescription) { - // cancel audio description - this.synth.cancel(); - } + if (this.speakingDescription) { + this.synth.cancel(); + } this.seekTo(0); }; AblePlayer.prototype.handlePrevTrack = function() { - if (this.playlistIndex === 0) { - // currently on the first track - // wrap to bottom and play the last track - this.playlistIndex = this.$playlist.length - 1; - } - else { - this.playlistIndex--; - } - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings + this.playlistIndex = (this.playlistIndex === 0) ? this.$playlist.length - 1 : this.playlistIndex--; + this.cueingPlaylistItem = true; this.cuePlaylistItem(this.playlistIndex); }; AblePlayer.prototype.handleNextTrack = function() { - if (this.playlistIndex === this.$playlist.length - 1) { - // currently on the last track - // wrap to top and play the forst track - this.playlistIndex = 0; - } - else { - this.playlistIndex++; - } - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings + this.playlistIndex = (this.playlistIndex === this.$playlist.length - 1) ? 0 : this.playlistIndex++; + this.cueingPlaylistItem = true; this.cuePlaylistItem(this.playlistIndex); }; @@ -11013,15 +8086,10 @@ if (typeof module !== "undefined" && module.exports) { var targetTime; targetTime = this.elapsed - this.seekInterval; - if (this.useChapterTimes) { - if (targetTime < this.currentChapter.start) { - targetTime = this.currentChapter.start; - } - } - else { - if (targetTime < 0) { - targetTime = 0; - } + if (this.useChapterTimes && (targetTime < this.currentChapter.start)) { + targetTime = this.currentChapter.start; + } else if (targetTime < 0) { + targetTime = 0; } this.seekTo(targetTime); }; @@ -11034,29 +8102,17 @@ if (typeof module !== "undefined" && module.exports) { targetTime = this.elapsed + this.seekInterval; if (this.useChapterTimes) { if (this.chapters[lastChapterIndex] == this.currentChapter) { - // this is the last chapter if (targetTime > this.duration || targetTime > this.currentChapter.end) { - // targetTime would exceed the end of the video (or chapter) - // scrub to end of whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); - } - else if (this.duration % targetTime < this.seekInterval) { - // nothing left but pocket change after seeking to targetTime - // go ahead and seek to end of video (or chapter), whichever is earliest + } else if (this.duration % targetTime < this.seekInterval) { targetTime = Math.min(this.duration, this.currentChapter.end); } - } - else { - // this is not the last chapter + } else { if (targetTime > this.currentChapter.end) { - // targetTime would exceed the end of the chapter - // scrub exactly to end of chapter targetTime = this.currentChapter.end; } } - } - else { - // not using chapter times + } else { if (targetTime > this.duration) { targetTime = this.duration; } @@ -11072,51 +8128,33 @@ if (typeof module !== "undefined" && module.exports) { this.changeRate(-1); }; - // Increases or decreases playback rate, where dir is 1 or -1 indication direction. AblePlayer.prototype.changeRate = function (dir) { var rates, currentRate, index, newRate, vimeoMin, vimeoMax; if (this.player === 'html5') { this.setPlaybackRate(this.getPlaybackRate() + (0.25 dir)); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { rates = this.youTubePlayer.getAvailablePlaybackRates(); currentRate = this.getPlaybackRate(); index = rates.indexOf(currentRate); if (index === -1) { - - } - else { + + } else { index += dir; - // Can only increase or decrease rate if there's another rate available. if (index < rates.length && index >= 0) { this.setPlaybackRate(rates[index]); } } } - } - else if (this.player === 'vimeo') { - // range is 0.5 to 2 - // increase/decrease in inrements of 0.5 + } else if (this.player === 'vimeo') { vimeoMin = 0.5; vimeoMax = 2; if (dir === 1) { - if (this.vimeoPlaybackRate + 0.5 <= vimeoMax) { - newRate = this.vimeoPlaybackRate + 0.5; - } - else { - newRate = vimeoMax; - } - } - else if (dir === -1) { - if (this.vimeoPlaybackRate - 0.5 >= vimeoMin) { - newRate = this.vimeoPlaybackRate - 0.5; - } - else { - newRate = vimeoMin; - } + newRate = (this.vimeoPlaybackRate + 0.5 <= vimeoMax) ? this.vimeoPlaybackRate + 0.5 : vimeoMax; + } else if (dir === -1) { + newRate = (this.vimeoPlaybackRate - 0.5 >= vimeoMin) ? this.vimeoPlaybackRate - 0.5 : vimeoMin; } this.setPlaybackRate(newRate); } @@ -11125,73 +8163,53 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handleCaptionToggle = function() { var thisObj = this; - var captions; + var captions, ariaPressed; if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it this.hidingPopup = false; return false; } - if (this.captions.length) { - captions = this.captions; - } - else { - captions = []; - } + + captions = (this.captions.length) ? this.captions : []; if (captions.length === 1) { - // When there's only one set of captions, just do an on/off toggle. if (this.captionsOn === true) { - // turn them off this.captionsOn = false; this.prefCaptions = 0; - this.$ccButton.attr('aria-pressed', 'false'); - this.updateCookie('prefCaptions'); + ariaPressed = false; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.unloadModule('captions'); - } - else if (this.usingVimeoCaptions) { - this.vimeoPlayer.disableTextTrack(); - } - else { + } else if (this.usingVimeoCaptions) { + this.vimeoPlayer.disableTextTrack(); + } else { this.$captionsWrapper.hide(); } - } - else { - // captions are off. Turn them on. + } else { this.captionsOn = true; this.prefCaptions = 1; - this.$ccButton.attr('aria-pressed', 'true'); - this.updateCookie('prefCaptions'); + ariaPressed = true; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.loadModule('captions'); - } - else if (this.usingVimeoCaptions) { + } else if (this.usingVimeoCaptions) { this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { - // track.language = the iso code for the language - // track.kind = 'captions' or 'subtitles' - // track.label = the human-readable label }).catch(function(error) { switch (error.name) { case 'InvalidTrackLanguageError': - // no track was available with the specified language - - break; + + break; case 'InvalidTrackError': - // no track was available with the specified language and kind - - break; + + break; default: - // some other error occurred - - break; + + break; } - }); - } - else { + }); + } else { this.$captionsWrapper.show(); } for (var i=0; i<captions.length; i++) { - if (captions[i].def === true) { // this is the default language + if (captions[i].def === true) { this.selectedCaptions = captions[i]; } } @@ -11200,80 +8218,69 @@ if (typeof module !== "undefined" && module.exports) { this.selectedDescriptions = this.descriptions[0]; } } - this.refreshControls('captions'); - } - else { - // there is more than one caption track. - // clicking on a track is handled via caption.js > getCaptionClickFunction() + } else { if (this.captionsPopup && this.captionsPopup.is(':visible')) { this.captionsPopup.hide(); this.hidingPopup = false; this.$ccButton.attr('aria-expanded', 'false') this.waitThenFocus(this.$ccButton); - } - else { + } else { this.closePopups(); if (this.captionsPopup) { this.captionsPopup.show(); this.$ccButton.attr('aria-expanded','true'); - // Gives time to "register" expanded ccButton setTimeout(function() { thisObj.captionsPopup.css('top', thisObj.$ccButton.position().top - thisObj.captionsPopup.outerHeight()); thisObj.captionsPopup.css('left', thisObj.$ccButton.position().left) - // Place focus on the first button (even if another button is checked) thisObj.captionsPopup.find('li').removeClass('able-focus'); - thisObj.captionsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.captionsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } } } + var ariaLabelOn = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); }; - /** - * Gives enough time for DOM changes to take effect before adjusting focus. - * Helpful for allowing screen reading of elements whose state is intermittently changed. - * - * @param {} $el element to focus on - @param {} timeout optional wait time in milliseconds before focus - / AblePlayer.prototype.waitThenFocus = function($el, timeout) { - // Default wait time of 50 ms var _timeout = (timeout === undefined || timeout === null) ? 50 : timeout; - + setTimeout(function() { - $el.focus(); + $el.trigger('focus'); }, _timeout); } AblePlayer.prototype.handleChapters = function () { if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it this.hidingPopup = false; return false; } if (this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); this.hidingPopup = false; - this.$chaptersButton.attr('aria-expanded','false').focus(); - } - else { + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); + } else { this.closePopups(); this.chaptersPopup.show(); this.$chaptersButton.attr('aria-expanded','true'); this.chaptersPopup.css('top', this.$chaptersButton.position().top - this.chaptersPopup.outerHeight()); this.chaptersPopup.css('left', this.$chaptersButton.position().left) - // Highlight the current chapter, if any chapters are checked - // Otherwise, place focus on the first chapter this.chaptersPopup.find('li').removeClass('able-focus'); if (this.chaptersPopup.find('li[aria-checked="true"]').length) { - this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass('able-focus'); - } - else { - this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').focus(); + this.chaptersPopup.find('li[aria-checked="true"]').trigger('focus').addClass('able-focus'); + } else { + this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').trigger('focus'); } } }; @@ -11281,14 +8288,12 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handleDescriptionToggle = function() { this.descOn = !this.descOn; - this.prefDesc = + this.descOn; // convert boolean to integer - this.updateCookie('prefDesc'); + this.prefDesc = + this.descOn; + this.updatePreferences('prefDesc'); if (typeof this.$descDiv !== 'undefined') { if (!this.$descDiv.is(':hidden')) { this.$descDiv.hide(); } - // NOTE: now showing $descDiv here if previously hidden - // that's handled elsewhere, dependent on whether there's text to show } this.initDescription(); this.refreshControls('descriptions'); @@ -11296,164 +8301,109 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handlePrefsClick = function(pref) { - // NOTE: the prefs menu is positioned near the right edge of the player - // This assumes the Prefs button is also positioned in that vicinity - // (last or second-last button the right) - // NOTE: If previously unable to fully populate the Description dialog - // because the Web Speech API failed to getVoices() - // now is a good time to try again - // so the Description dialog can be rebuilt before the user requests it var thisObj, prefsButtonPosition, prefsMenuRight, prefsMenuLeft; thisObj = this; - if (this.speechEnabled === null) { - this.initSpeech('prefs'); + if (this.speechEnabled === null) { + this.initSpeech('prefs'); } if (this.hidingPopup) { - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it this.hidingPopup = false; return false; } if (this.prefsPopup.is(':visible')) { this.prefsPopup.hide(); this.$prefsButton.attr('aria-expanded','false'); - // restore each menu item to original hidden state this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); + this.$prefsButton.trigger('focus'); } - // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; },100); - } - else { + } else { this.closePopups(); this.prefsPopup.show(); this.$prefsButton.attr('aria-expanded','true'); - this.$prefsButton.focus(); // focus first on prefs button to announce expanded state - // give time for focus on button then adjust popup settings and focus + this.$prefsButton.trigger('focus'); setTimeout(function() { prefsButtonPosition = thisObj.$prefsButton.position(); prefsMenuRight = thisObj.$ableDiv.width() - 5; prefsMenuLeft = prefsMenuRight - thisObj.prefsPopup.width(); thisObj.prefsPopup.css('top', prefsButtonPosition.top - thisObj.prefsPopup.outerHeight()); thisObj.prefsPopup.css('left', prefsMenuLeft); - // remove prior focus and set focus on first item; also change tabindex from -1 to 0 thisObj.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','0'); - thisObj.prefsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.prefsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } }; - AblePlayer.prototype.handleHelpClick = function() { - this.setFullscreen(false); - this.helpDialog.show(); - }; - AblePlayer.prototype.handleTranscriptToggle = function () { - var thisObj = this; - - if (this.$transcriptDiv.is(':visible')) { + var visible = this.$transcriptDiv.is(':visible'); + if ( visible ) { this.$transcriptArea.hide(); - this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); this.prefTranscript = 0; - this.$transcriptButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms - // Setting timeout to 100ms is a virtual guarantee of proper functionality - setTimeout(function() { - thisObj.closingTranscript = false; - }, 100); - } - else { - this.positionDraggableWindow('transcript'); - this.$transcriptArea.show(); - // showing transcriptArea has a cascading effect of showing all content within transcriptArea - // need to re-hide the popup menu - this.$transcriptPopup.hide(); - this.$transcriptButton.removeClass('buttonOff').attr('aria-label',this.tt.hideTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.hideTranscript); - this.prefTranscript = 1; - // move focus to first focusable element (window options button) - this.focusNotClick = true; - this.$transcriptArea.find('button').first().focus(); - // wait briefly before resetting stopgap var - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefTranscript'); + if ( this.transcriptType === 'popup' ) { + this.$transcriptButton.trigger('focus').addClass('able-focus'); + setTimeout(function() { + thisObj.closingTranscript = false; + }, 100); + } + } else { + if ( this.transcriptType === 'popup' ) { + this.positionDraggableWindow('transcript'); + this.$transcriptArea.show(); + this.$transcriptPopup.hide(); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.prefTranscript = 1; + this.focusNotClick = true; + this.$transcriptArea.find('button').first().trigger('focus'); + setTimeout(function() { + thisObj.focusNotClick = false; + }, 100); + } else { + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.$transcriptArea.show(); + } + } + this.updatePreferences('prefTranscript'); }; AblePlayer.prototype.handleSignToggle = function () { var thisObj = this; - - if (this.$signWindow.is(':visible')) { + var visible = this.$signWindow.is(':visible'); + if ( visible ) { this.$signWindow.hide(); - this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign); - this.$signButton.find('span.able-clipped').text(this.tt.showSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 0; - this.$signButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button + this.$signButton.trigger('focus').addClass('able-focus'); setTimeout(function() { thisObj.closingSign = false; }, 100); - } - else { + } else { this.positionDraggableWindow('sign'); this.$signWindow.show(); - // showing signWindow has a cascading effect of showing all content within signWindow - // need to re-hide the popup menu this.$signPopup.hide(); - this.$signButton.removeClass('buttonOff').attr('aria-label',this.tt.hideSign); - this.$signButton.find('span.able-clipped').text(this.tt.hideSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 1; this.focusNotClick = true; - this.$signWindow.find('button').first().focus(); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button + this.$signWindow.find('button').first().trigger('focus'); setTimeout(function() { thisObj.focusNotClick = false; }, 100); } - this.updateCookie('prefSign'); + this.updatePreferences('prefSign'); }; - AblePlayer.prototype.isFullscreen = function () { - - // NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen, - // which is defined in setFullscreen() - // This function returns true if any element is fullscreen - // but doesn't tell us whether a particular element is in fullscreen - // (e.g., if there are multiple players on the page) - // The Boolean this.fullscreen is defined separately for each player instance - - if (this.nativeFullscreenSupported()) { - return (document.fullscreenElement || - document.webkitFullscreenElement || - document.webkitCurrentFullscreenElement || - document.mozFullscreenElement || - document.msFullscreenElement) ? true : false; - } - else { - return this.modalFullscreenActive ? true : false; - } - } - AblePlayer.prototype.setFullscreen = function (fullscreen) { if (this.fullscreen == fullscreen) { - // replace isFullscreen() with a Boolean. see function for explanation return; } var thisObj = this; @@ -11461,128 +8411,61 @@ if (typeof module !== "undefined" && module.exports) { var el = $el[0]; if (this.nativeFullscreenSupported()) { - // Note: many varying names for options for browser compatibility. if (fullscreen) { - // Initialize fullscreen - - if (el.requestFullscreen) { - el.requestFullscreen(); + var scroll = { + x: window.pageXOffset || 0, + y: window.pageYOffset || 0 } - else if (el.webkitRequestFullscreen) { - el.webkitRequestFullscreen(); + if (this.prefTranscript === 1) { + this.rePositionDraggableWindow("transcript"); } - else if (el.mozRequestFullscreen) { - el.mozRequestFullscreen(); + if (this.prefSign === 1) { + this.rePositionDraggableWindow("sign"); } - else if (el.msRequestFullscreen) { - el.msRequestFullscreen(); + this.scrollPosition = scroll; + if (el.requestFullscreen) { + el.requestFullscreen(); + } else if (el.webkitRequestFullscreen) { + el.webkitRequestFullscreen(); } this.fullscreen = true; - } - else { - // Exit fullscreen - this.restoringAfterFullscreen = true; + } else { + this.restoringAfterFullscreen = true; if (document.exitFullscreen) { document.exitFullscreen(); - } - else if (document.webkitExitFullscreen) { + } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); - } - else if (document.webkitCancelFullscreen) { + } else if (document.webkitCancelFullscreen) { document.webkitCancelFullscreen(); } - else if (document.mozCancelFullscreen) { - document.mozCancelFullscreen(); + if (this.prefTranscript === 1) { + this.positionDraggableWindow("transcript"); } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); + if (this.prefSign === 1) { + this.positionDraggableWindow("sign"); } this.fullscreen = false; } + } else { } - else { - // Non-native fullscreen support through modal dialog. - // Create dialog on first run through. - if (!this.fullscreenDialog) { - var $dialogDiv = $('<div>'); - // create a hidden alert, communicated to screen readers via aria-describedby - var $fsDialogAlert = $('<p>',{ - 'class': 'able-screenreader-alert' - }).text(this.tt.fullscreen); // In English: "Full screen"; TODO: Add alert text that is more descriptive - $dialogDiv.append($fsDialogAlert); - // now render this as a dialog - this.fullscreenDialog = new AccessibleDialog($dialogDiv, this.$fullscreenButton, 'dialog', true, 'Fullscreen video player', $fsDialogAlert, this.tt.exitFullscreen, '100%', true, function () { thisObj.handleFullscreenToggle() }); - $('body').append($dialogDiv); - } - - // Track whether paused/playing before moving element; moving the element can stop playback. - var wasPaused = this.paused; - - if (fullscreen) { - this.modalFullscreenActive = true; - this.fullscreenDialog.show(); - - // Move player element into fullscreen dialog, then show. - // Put a placeholder element where player was. - this.$modalFullscreenPlaceholder = $('<div class="placeholder">'); - this.$modalFullscreenPlaceholder.insertAfter($el); - $el.appendTo(this.fullscreenDialog.modal); - - // Column left css is 50% by default; set to 100% for full screen. - if ($el === this.$ableColumnLeft) { - $el.width('100%'); - } - var newHeight = $(window).height() - this.$playerDiv.height(); - if (typeof this.$descDiv !== 'undefined') { - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - } - } - else { - this.modalFullscreenActive = false; - if ($el === this.$ableColumnLeft) { - $el.width('50%'); - } - $el.insertAfter(this.$modalFullscreenPlaceholder); - this.$modalFullscreenPlaceholder.remove(); - this.fullscreenDialog.hide(); - } - - // Resume playback if moving stopped it. - if (!wasPaused && this.paused) { - this.playMedia(); - } - } - // add event handlers for changes in fullscreen mode. - // Browsers natively trigger this event with the Escape key, - // in addition to clicking the exit fullscreen button - $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(e) { - // NOTE: e.type = the specific event that fired (in case needing to control for browser-specific idiosyncrasies) + $(document).on('fullscreenchange webkitfullscreenchange', function(e) { if (!thisObj.fullscreen) { - // user has just exited full screen thisObj.restoringAfterFullscreen = true; - } - else if (!thisObj.clickedFullscreenButton) { - // user triggered fullscreenchange without clicking fullscreen button + } else if (!thisObj.clickedFullscreenButton) { thisObj.fullscreen = false; thisObj.restoringAfterFullscreen = true; } thisObj.resizePlayer(); thisObj.refreshControls('fullscreen'); - - // NOTE: The fullscreenchange (or browser-equivalent) event is triggered twice - // when exiting fullscreen via the "Exit fullscreen" button (only once if using Escape) - // Not sure why, but consequently we need to be sure thisObj.clickedFullscreenButton - // continues to be true through both events - // Could use a counter variable to control that (reset to false after the 2nd trigger) - // However, since I don't know why it's happening, and whether it's 100% reliable - // resetting clickedFullscreenButton after a timeout seems to be better approach + if ( thisObj.scrollPosition ) { + scroll = thisObj.scrollPosition; + window.scrollTo( scroll.x, scroll.y ); + } setTimeout(function() { thisObj.clickedFullscreenButton = false; - thisObj.restoringAfterFullscreen = false; - },1000); - }); + thisObj.restoringAfterFullscreen = false; + },100); + }); }; AblePlayer.prototype.handleFullscreenToggle = function () { @@ -11590,249 +8473,218 @@ if (typeof module !== "undefined" && module.exports) { var stillPaused = this.paused; this.setFullscreen(!this.fullscreen); if (stillPaused) { - this.pauseMedia(); // when toggling fullscreen and media is just paused, keep media paused. - } - else if (!stillPaused) { - this.playMedia(); // when toggling fullscreen and media is playing, continue playing. + this.pauseMedia(); + } else if (!stillPaused) { + this.playMedia(); } - // automatically hide controller in fullscreen mode - // then reset back to original setting after exiting fullscreen mode if (this.fullscreen) { this.hideControls = true; if (this.playing) { - // go ahead and hide the controls this.fadeControls('out'); this.controlsHidden = true; } - } - else { - // exit fullscreen mode + } else { this.hideControls = this.hideControlsOriginal; - if (!this.hideControls) { // do not hide controls + if (!this.hideControls) { if (this.controlsHidden) { this.fadeControls('in'); this.controlsHidden = false; } - // if there's an active timeout to fade controls out again, clear it if (this.hideControlsTimeoutStatus === 'active') { window.clearTimeout(this.hideControlsTimeout); this.hideControlsTimeoutStatus = 'clear'; } } } - // don't resizePlayer yet; that will be called in response to the window resize event - // this.resizePlayer(); }; AblePlayer.prototype.handleTranscriptLockToggle = function (val) { - this.autoScrollTranscript = val; // val is boolean - this.prefAutoScrollTranscript = +val; // convert boolean to numeric 1 or 0 for cookie - this.updateCookie('prefAutoScrollTranscript'); + this.autoScrollTranscript = val; + this.prefAutoScrollTranscript = +val; + this.updatePreferences('prefAutoScrollTranscript'); this.refreshControls('transcript'); }; + AblePlayer.prototype.getIcon = function( $button, id, forceImg = false ) { + var iconType = this.iconType; + var iconData = this.getIconData( id ); + iconType = ( null === iconData[3] ) ? 'svg' : iconType; + iconType = ( forceImg === true ) ? 'img' : iconType; - AblePlayer.prototype.showTooltip = function($tooltip) { - - if (($tooltip).is(':animated')) { - $tooltip.stop(true,true).show(); + var existingIcon = $button.find( iconType + '#ableplayer-' + id ); + if ( existingIcon.length > 0 ) { + return; } - else { - $tooltip.stop().show(); + $button.find('svg, img, span').remove(); + + if (iconType === 'font') { + var $buttonIcon = $('<span>', { + 'class': iconData[2], + }); + $button.append( $buttonIcon ); + } else if (iconType === 'svg') { + function getNode(n, v) { + n = document.createElementNS("http://www.w3.org/2000/svg", n); + for (var p in v) { + n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m) { + return "-" + m.toLowerCase(); + }), v[p]); + } + return n; + } + var icon = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ); + icon.setAttribute( 'focusable', 'false' ); + icon.setAttribute( 'aria-hidden', 'true'); + icon.setAttribute( 'viewBox', iconData[0] ); + icon.setAttribute( 'id', 'ableplayer-' + id ); + let path = getNode( 'path', { d: iconData[1] } ); + icon.appendChild( path ); + + $button.append( icon ); + $button.html($button.html()); + } else { + var $buttonImg = $('<img>',{ + 'src': iconData[3], + 'alt': '', + 'role': 'presentation' + }); + $button.append($buttonImg); + $button.find('img').attr('src',iconData[3]); } }; - AblePlayer.prototype.showAlert = function( msg, location ) { - - // location is either of the following: - // 'main' (default) - // 'screenreader (visibly hidden) - // 'sign' (sign language window) - // 'transcript' (trasncript window) - var thisObj, $alertBox, $parentWindow, alertLeft, alertTop; - - thisObj = this; + AblePlayer.prototype.setText = function( $button, text ) { + $button.attr( 'aria-label', text ); + }; - if (location === 'transcript') { - $alertBox = this.$transcriptAlert; - $parentWindow = this.$transcriptArea; - } - else if (location === 'sign') { - $alertBox = this.$signAlert; - $parentWindow = this.$signWindow; - } - else if (location === 'screenreader') { - $alertBox = this.$srAlertBox; - } - else { - $alertBox = this.$alertBox; + AblePlayer.prototype.toggleButtonState = function($button, isOn, onLabel, offLabel, ariaPressed = false, ariaExpanded = false) { + let buttonOff = ( $button.hasClass( 'buttonOff' ) ) ? true : false; + if ( buttonOff && ! isOn || ! buttonOff && isOn ) { + return; } - $alertBox.text(msg).show(); - if (location == 'transcript' || location === 'sign') { - if ($parentWindow.width() > $alertBox.width()) { - alertLeft = $parentWindow.width() / 2 - $alertBox.width() / 2; + if (! isOn) { + $button.addClass('buttonOff').attr('aria-label', offLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'false'); } - else { - // alert box is wider than its container. Position it far left and let it wrap - alertLeft = 10; + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'false' ); } - if (location === 'sign') { - // position alert in the lower third of the sign window (to avoid covering the signer) - alertTop = ($parentWindow.height() / 3) * 2; + } else { + $button.removeClass('buttonOff').attr('aria-label', onLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'true'); } - else if (location === 'transcript') { - // position alert just beneath the toolbar to avoid getting lost among transcript text - alertTop = this.$transcriptToolbar.height() + 30; + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'true' ); } - $alertBox.css({ - top: alertTop + 'px', - left: alertLeft + 'px' - }); } - else if (location !== 'screenreader') { - // The original formula incorporated offset() into the calculation - // but at some point this began resulting in an alert that's off-centered - // Changed in v2.2.17, but here's the original for reference in case needed: - // left: this.$playerDiv.offset().left + (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - $alertBox.css({ - left: (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - }); + }; + + AblePlayer.prototype.showTooltip = function($tooltip) { + + $tooltip.show(); + }; + + AblePlayer.prototype.showAlert = function( msg, location = 'main' ) { + + var thisObj, $alertBox, $parentWindow; + + thisObj = this; + $alertBox = thisObj.$alertBox; + $parentWindow = thisObj.$ableDiv; + if (location === 'transcript') { + $parentWindow = thisObj.$transcriptArea; + } else if (location === 'sign') { + $parentWindow = thisObj.$signWindow; + } else if (location === 'screenreader') { + $alertBox = thisObj.$srAlertBox; } + $alertBox.find('span').text(msg); + $alertBox.appendTo($parentWindow) + $alertBox.css( {'display': 'flex'} ); + if (location !== 'screenreader') { - setTimeout(function () { - $alertBox.fadeOut(300); - }, 3000); + setTimeout( function () { + $alertBox.hide(); + }, 30000 ); } }; AblePlayer.prototype.showedAlert = function (which) { - // returns true if the target alert has already been shown - // useful for throttling alerts that only need to be shown once - // e.g., move alerts with instructions for dragging a window - if (which === 'transcript') { - if (this.showedTranscriptAlert) { - return true; - } - else { - return false; - } - } - else if (which === 'sign') { - if (this.showedSignAlert) { - return true; - } - else { - return false; - } + return this.showedTranscriptAlert ?? false; + } else if (which === 'sign') { + return this.showedSignAlert ?? false; } return false; } - // Resizes all relevant player attributes. AblePlayer.prototype.resizePlayer = function (width, height) { - var captionSizeOkMin, captionSizeOkMax, captionSize, newCaptionSize, newLineHeight; - - var newWidth, newHeight, $iframe, alertTop; + var captionSize, newWidth, newHeight, $iframe; - if (this.mediaType === 'audio') { - return; + if (this.mediaType === 'audio') { + return; } - - if (typeof width !== 'undefined' && typeof height !== 'undefined') { - // this is being called the first time a player is initialized - // width and height were collected from the HTML, YouTube, or Vimeo media API - // so are reflective of the actual size of the media - // use these values to calculate aspectRatio - this.aspectRatio = height / width; - if (this.playerWidth) { - // default width is already defined via a width or data-width attribute. Use that. - newWidth = this.playerWidth; - if (this.playerHeight) { - newHeight = this.playerHeight; - } - else { - newHeight = Math.round(newWidth * this.aspectRatio); - this.playerHeight = newHeight; - } - } - else { - // playerWidth was not defined via HTML attributes - if (this.player === 'html5') { - newWidth = $(window).width(); - } - else { - newWidth = this.$ableWrapper.width(); - } - newHeight = Math.round(newWidth * this.aspectRatio); - } - } - else if (this.fullscreen) { - this.$ableWrapper.addClass('fullscreen'); - newWidth = $(window).width(); - // the 5 pixel buffer is arbitrary, but results in a better fit for all browsers - newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; + if (typeof width !== 'undefined' && typeof height !== 'undefined') { + this.aspectRatio = height / width; + if (this.playerWidth) { + newWidth = this.playerWidth; + if (this.playerHeight) { + newHeight = this.playerHeight; + } else { + newHeight = Math.round(newWidth * this.aspectRatio); + this.playerHeight = newHeight; + } + } else { + newWidth = (this.player === 'html5') ? $(window).width() : this.$ableWrapper.width(); + newHeight = Math.round(newWidth * this.aspectRatio); + } + } else if (this.fullscreen) { + this.$ableWrapper.addClass('fullscreen'); + newWidth = $(window).width(); + newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; this.positionCaptions('overlay'); - } - else { // not fullscreen, and not first time initializing player + } else { this.$ableWrapper.removeClass('fullscreen'); - if (this.player === 'html5') { - if (this.playerWidth) { - newWidth = this.playerWidth; - } - else { - // use full size of window - // player will be downsized to fit container if CSS requires it - newWidth = $(window).width(); - } - } - else { - newWidth = this.$ableWrapper.width(); + if (this.player === 'html5') { + newWidth = (this.playerWidth) ? this.playerWidth : $(window).width(); + } else { + newWidth = this.$ableWrapper.width(); } - newHeight = Math.round(newWidth * this.aspectRatio); - this.positionCaptions(this.prefCaptionsPosition); + newHeight = Math.round(newWidth * this.aspectRatio); + this.positionCaptions(this.prefCaptionsPosition); } if (this.debug) { - - } - // Now size the player with newWidth and newHeight - if (this.player === 'youtube' || this.player === 'vimeo') { - $iframe = this.$ableWrapper.find('iframe'); - if (this.player === 'youtube' && this.youTubePlayer) { - // alternatively, YouTube API offers a method for setting the video size - // this adds width and height attributes to the iframe - // but might have other effects, so best to do it this way - this.youTubePlayer.setSize(newWidth,newHeight); - } - else { - // Vimeo API does not have a method for changing size of player - // Therefore, need to change iframe attributes directly + + } + if (this.player === 'youtube' || this.player === 'vimeo') { + $iframe = this.$ableWrapper.find('iframe'); + if (this.player === 'youtube' && this.youTubePlayer) { + this.youTubePlayer.setSize(newWidth,newHeight); + } else { $iframe.attr({ 'width': newWidth, 'height': newHeight - }); + }); } - if (this.playerWidth && this.playerHeight) { - if (this.fullscreen) { - // remove constraints - $iframe.css({ + if (this.playerWidth && this.playerHeight) { + if (this.fullscreen) { + $iframe.css({ 'max-width': '', 'max-height': '' - }); - } - else { - // use CSS on iframe to enforce explicitly defined size constraints - $iframe.css({ + }); + } else { + $iframe.css({ 'max-width': this.playerWidth + 'px', 'max-height': this.playerHeight + 'px' }); } } - } - else if (this.player === 'html5') { + } else if (this.player === 'html5') { if (this.fullscreen) { this.$media.attr({ 'width': newWidth, @@ -11842,60 +8694,41 @@ if (typeof module !== "undefined" && module.exports) { 'width': newWidth, 'height': newHeight }); - } - else { - // No constraints. Let CSS handle the positioning. + } else { this.$media.removeAttr('width height'); - this.$ableWrapper.css({ - 'width': newWidth + 'px', - 'height': 'auto' - }); - } + this.$ableWrapper.removeAttr( 'style' ); + } } - // Resize captions if (typeof this.$captionsDiv !== 'undefined') { - // Font-size is too small in full screen view - // use viewport units (vw) instead - // % units work fine if not fullscreen - // prefCaptionSize is expressed as a percentage - captionSize = parseInt(this.prefCaptionsSize,10); - if (this.fullscreen) { - captionSize = (captionSize / 100) + 'vw'; + var isSmallScreen = false; + var windowWidth = window.screen.width; + if ( windowWidth < 1200 ) { + isSmallScreen = true; } - else { - captionSize = captionSize + '%'; + captionSize = parseInt(this.prefCaptionsSize,10); + if (this.fullscreen && ! isSmallScreen ) { + captionSize = (captionSize / 100) + 'vw'; + } else if ( this.fullscreen && isSmallScreen ) { + captionSize = '1.2rem'; + } else { + captionSize = captionSize + '%'; } this.$captionsDiv.css({ 'font-size': captionSize }); } - - // Reposition alert message (video player only) - // just below the vertical center of the mediaContainer - // hopefully above captions, but not too far from the controller bar - if (this.mediaType === 'video') { - alertTop = Math.round(this.$mediaContainer.height() / 3) * 2; - this.$alertBox.css({ - top: alertTop + 'px' - }); - } - - this.refreshControls(); + this.refreshControls(); }; AblePlayer.prototype.retrieveOffscreenWindow = function( which, width, height ) { - // check to be sure popup windows ('transcript' or 'sign') are positioned on-screen - // (they sometimes disappear off-screen when entering fullscreen mode) - // if off-screen, recalculate so they are back on screen var window, windowPos, windowTop, windowLeft, windowRight, windowWidth, windowBottom, windowHeight; if (which == 'transcript') { window = this.$transcriptArea; - } - else if (which == 'sign') { + } else if (which == 'sign') { window = this.$signWindow; } windowWidth = window.width(); @@ -11906,121 +8739,73 @@ if (typeof module !== "undefined" && module.exports) { windowRight = windowLeft + windowWidth; windowBottom = windowTop + windowHeight; - if (windowTop < 0) { // off-screen to the top + if (windowTop < 0) { windowTop = 10; window.css('top',windowTop); } - if (windowLeft < 0) { // off-screen to the left + if (windowLeft < 0) { windowLeft = 10; window.css('left',windowLeft); } - if (windowRight > width) { // off-screen to the right + if (windowRight > width) { windowLeft = (width - 20) - windowWidth; window.css('left',windowLeft); } - if (windowBottom > height) { // off-screen to the bottom + if (windowBottom > height) { windowTop = (height - 10) - windowHeight; window.css('top',windowTop); } }; - AblePlayer.prototype.getHighestZIndex = function() { - - // returns the highest z-index on page - // used to ensure dialogs (or potentially other windows) are on top - - var max, $elements, z; - max = 0; - - // exclude the Able Player dialogs and windows - $elements = $('body ').not('.able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area'); - - $elements.each(function(){ - z = $(this).css('z-index'); - if (Number.isInteger(+z)) { // work only with integer values, not 'auto' - if (parseInt(z) > max) { - max = parseInt(z); - } - } - }); - return max; - }; - AblePlayer.prototype.updateZIndex = function(which) { - // update z-index of 'transcript' or 'sign', relative to each other - // direction is always 'up' (i.e., move window to top) - // windows come to the top when the user clicks on them - var defHighZ, defLowZ, highestZ, transcriptZ, signZ, newHighZ, newLowZ; + var defHighZ, defLowZ, transcriptZ, signZ, newHighZ, newLowZ; - // set the default z-indexes, as defined in ableplayer.css - defHighZ = 8000; // by default, assigned to the sign window - defLowZ = 7000; // by default, assigned to the transcript area - highestZ = this.getHighestZIndex(); // highest z-index on the page, excluding Able Player windows & modals + defHighZ = 8000; + defLowZ = 7000; - // NOTE: Although highestZ is collected here, it currently isn't used. - // If something on the page has a higher z-index than the transcript or sign window, do we care? - // Excluding it here assumes "No". Our immediate concern is with the relationship between our own components. - // If we elevate our z-indexes so our content is on top, we run the risk of starting a z-index war. if (typeof this.$transcriptArea === 'undefined' || typeof this.$signWindow === 'undefined' ) { - // at least one of the windows doesn't exist, so there's no conflict - // since z-index may have been stored to a cookie on another page, need to restore default if (typeof this.$transcriptArea !== 'undefined') { transcriptZ = parseInt(this.$transcriptArea.css('z-index')); if (transcriptZ > defLowZ) { - // restore to the default this.$transcriptArea.css('z-index',defLowZ); } - } - else if (typeof this.$signWindow !== 'undefined') { + } else if (typeof this.$signWindow !== 'undefined') { signZ = parseInt(this.$signWindow.css('z-index')); if (signZ > defHighZ) { - // restore to the default this.$signWindow.css('z-index',defHighZ); } } return false; } - // both windows exist - // get current values transcriptZ = parseInt(this.$transcriptArea.css('z-index')); signZ = parseInt(this.$signWindow.css('z-index')); if (transcriptZ === signZ) { - // the two windows are equal; restore defaults (the target window will be on top) newHighZ = defHighZ; newLowZ = defLowZ; - } - else if (transcriptZ > signZ) { + } else if (transcriptZ > signZ) { if (which === 'transcript') { - // transcript is already on top; nothing to do return false; - } - else { - // swap z's + } else { newHighZ = transcriptZ; newLowZ = signZ; } - } - else { // signZ is greater + } else { if (which === 'sign') { - // sign is already on top; nothing to do return false; - } - else { + } else { newHighZ = signZ; newLowZ = transcriptZ; } } - // now assign the new values if (which === 'transcript') { this.$transcriptArea.css('z-index',newHighZ); this.$signWindow.css('z-index',newLowZ); - } - else if (which === 'sign') { + } else if (which === 'sign') { this.$signWindow.css('z-index',newHighZ); this.$transcriptArea.css('z-index',newLowZ); } @@ -12028,42 +8813,29 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.syncTrackLanguages = function (source, language) { - // this function is called when the player is built (source == 'init') - // and again when user changes the language of either 'captions' or 'transcript' - // It syncs the languages of chapters, descriptions, and metadata tracks - // NOTE: Caption and transcript languages are somewhat independent from one another - // If a user changes the caption language, the transcript follows - // However, if a user changes the transcript language, this only affects the transcript - // This was a group decision based on the belief that users may want a transcript - // that is in a different language than the captions - var i, captions, descriptions, chapters, meta, langHasChanged; + var i, captions, descriptions, chapters, meta; - // Captions for (i = 0; i < this.captions.length; i++) { if (this.captions[i].language === language) { captions = this.captions[i]; } } - // Chapters for (i = 0; i < this.chapters.length; i++) { if (this.chapters[i].language === language) { chapters = this.chapters[i]; } } - // Descriptions for (i = 0; i < this.descriptions.length; i++) { if (this.descriptions[i].language === language) { descriptions = this.descriptions[i]; } } - // Metadata for (i = 0; i < this.meta.length; i++) { if (this.meta[i].language === language) { meta = this.meta[i]; } } - // regardless of source... this.transcriptLang = language; if (source === 'init' || source === 'captions') { this.captionLang = language; @@ -12075,25 +8847,19 @@ if (typeof module !== "undefined" && module.exports) { this.transcriptChapters = chapters; this.transcriptDescriptions = descriptions; this.updateChaptersList(); - // the following was commented out in Oct/Nov 2018. - // chapters popup is setup automatically when setupPopups() is called later with no param - // not sure why it was included here. - // this.setupPopups('chapters'); - } - else if (source === 'transcript') { + } else if (source === 'transcript') { this.transcriptCaptions = captions; this.transcriptChapters = chapters; this.transcriptDescriptions = descriptions; } if (this.selectedDescriptions) { - // updating description voice to match new description language - this.setDescriptionVoice(); - if (this.$sampleDescDiv) { - if (this.sampleText) { - for (i = 0; i < this.sampleText.length; i++) { - if (this.sampleText[i].lang === this.selectedDescriptions.language) { - this.currentSampleText = this.sampleText[i]['text']; - this.$sampleDescDiv.html(this.currentSampleText); + this.setDescriptionVoice(); + if (this.$sampleDescDiv) { + if (this.sampleText) { + for (i = 0; i < this.sampleText.length; i++) { + if (this.sampleText[i].lang === this.selectedDescriptions.language) { + this.currentSampleText = this.sampleText[i]['text']; + this.$sampleDescDiv.html(this.currentSampleText); } } } @@ -12124,13 +8890,10 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.updateCaptionsMenu = function (lang) { - // uncheck all previous menu items this.captionsPopup.find("li").attr("aria-checked", "false"); if (typeof lang === "undefined") { - // check the last menu item (captions off) this.captionsPopup.find("li").last().attr("aria-checked", "true"); } else { - // check the newly selected lang this.captionsPopup .find("li[lang=" + lang + "]") .attr("aria-checked", "true"); @@ -12138,8 +8901,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.getCaptionClickFunction = function (track) { - // Returns the function used when a caption is clicked in the captions menu. - // Not called if user clicks "Captions off". Instead, that triggers getCaptionOffFunction() var thisObj = this; return function () { @@ -12148,9 +8909,6 @@ if (typeof module !== "undefined" && module.exports) { thisObj.currentCaption = -1; if (thisObj.usingYouTubeCaptions) { if (thisObj.captionsOn) { - // Two things must be true in order for setOption() to work: - // The YouTube caption module must be loaded - // and the video must have started playing if ( thisObj.youTubePlayer.getOptions("captions") && thisObj.startedPlaying @@ -12159,9 +8917,6 @@ if (typeof module !== "undefined" && module.exports) { languageCode: thisObj.captionLang, }); } else { - // the two conditions were not met - // try again to set the language after onApiChange event is triggered - // meanwhile, the following variable will hold the value thisObj.captionLangPending = thisObj.captionLang; } } else { @@ -12178,28 +8933,21 @@ if (typeof module !== "undefined" && module.exports) { thisObj.vimeoPlayer .enableTextTrack(thisObj.captionLang) .then(function (track) { - // track.language = the iso code for the language - // track.kind = 'captions' or 'subtitles' - // track.label = the human-readable label }) .catch(function (error) { switch (error.name) { case "InvalidTrackLanguageError": - // no track was available with the specified language - - break; + + break; case "InvalidTrackError": - // no track was available with the specified language and kind - - break; + + break; default: - // some other error occurred - - break; + + break; } }); } else { - // using local track elements for captions/subtitles thisObj.syncTrackLanguages("captions", thisObj.captionLang); if (!thisObj.swappingSrc) { thisObj.updateCaption(thisObj.elapsed); @@ -12207,30 +8955,24 @@ if (typeof module !== "undefined" && module.exports) { } } thisObj.captionsOn = true; - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleCaptionToggle()) thisObj.hidingPopup = true; thisObj.captionsPopup.hide(); thisObj.$ccButton.attr("aria-expanded", "false"); if (thisObj.mediaType === "audio") { thisObj.$captionsContainer.removeClass("captions-off"); } - // Ensure stopgap gets cancelled if handleCaptionToggle() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar setTimeout(function () { thisObj.hidingPopup = false; }, 100); thisObj.updateCaptionsMenu(thisObj.captionLang); thisObj.waitThenFocus(thisObj.$ccButton); - // save preference to cookie thisObj.prefCaptions = 1; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); thisObj.refreshControls("captions"); }; }; - // Returns the function used when the "Captions Off" button is clicked in the captions tooltip. AblePlayer.prototype.getCaptionOffFunction = function () { var thisObj = this; return function () { @@ -12246,22 +8988,17 @@ if (typeof module !== "undefined" && module.exports) { thisObj.$captionsContainer.addClass("captions-off"); } - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleCaptionToggle()) thisObj.hidingPopup = true; thisObj.captionsPopup.hide(); thisObj.$ccButton.attr("aria-expanded", "false"); - // Ensure stopgap gets cancelled if handleCaptionToggle() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar setTimeout(function () { thisObj.hidingPopup = false; }, 100); thisObj.updateCaptionsMenu(); thisObj.waitThenFocus(thisObj.$ccButton); - // save preference to cookie thisObj.prefCaptions = 0; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); if (!this.swappingSrc) { thisObj.refreshControls("captions"); thisObj.updateCaption(); @@ -12287,16 +9024,11 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisCaption !== "undefined") { if (this.currentCaption !== thisCaption) { - // it's time to load the new caption into the container div - captionText = this.flattenCueForCaption(cues[thisCaption]).replace( - /\n/g, - "<br>" - ); + captionText = this.flattenCueForCaption(cues[thisCaption]).replace( /\n/g, "<br>" ); this.$captionsDiv.html(captionText); this.currentCaption = thisCaption; if (captionText.length === 0) { - // hide captionsDiv; otherwise background-color is visible due to padding this.$captionsDiv.css("display", "none"); } else { this.$captionsDiv.css("display", "inline-block"); @@ -12309,24 +9041,10 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.flattenCueForCaption = function (cue) { - // Takes a cue and returns the caption text to display - // Also used for chapters - // Support for 'i' and 'b' tags added in 2.3.66 - // TODO: Add support for 'c' (class) and 'ruby' - // c (class): <c.myClass1.myClass2>Some text</c> - // Classes can be used to modify other tags too (e.g., <v.loud>) - // If <c> tag, should be rendered as a <span> - // ruby: http://www.w3schools.com/tags/tag_ruby.asp - // WebVTT also supports 'u' (underline) - // I see no reason to support that in Able Player. - // If it's available authors are likely to use it incorrectly - // where <i> or <b> should be used instead - // Here are the rare use cases where an underline is appropriate on the web: - // http://html5doctor.com/u-element/ var result = []; @@ -12373,24 +9091,23 @@ if (typeof module !== "undefined" && module.exports) { switch (pref) { case "prefCaptionsFont": - options[0] = ["serif", this.tt.serif]; - options[1] = ["sans-serif", this.tt.sans]; - options[2] = ["cursive", this.tt.cursive]; - options[3] = ["fantasy", this.tt.fantasy]; - options[4] = ["monospace", this.tt.monospace]; + options[0] = ["serif", this.translate( 'serif', 'serif' )]; + options[1] = ["sans-serif", this.translate( 'sans', 'sans-serif' )]; + options[2] = ["cursive", this.translate( 'cursive', 'cursive' )]; + options[3] = ["fantasy", this.translate( 'fantasy', 'fantasy' )]; + options[4] = ["monospace", this.translate( 'monospace', 'monospace' )]; break; case "prefCaptionsColor": case "prefCaptionsBGColor": - // HTML color values must be in English - options[0] = ["white", this.tt.white]; - options[1] = ["yellow", this.tt.yellow]; - options[2] = ["green", this.tt.green]; - options[3] = ["cyan", this.tt.cyan]; - options[4] = ["blue", this.tt.blue]; - options[5] = ["magenta", this.tt.magenta]; - options[6] = ["red", this.tt.red]; - options[7] = ["black", this.tt.black]; + options[0] = ["white", this.translate( 'white', 'white' )]; + options[1] = ["yellow", this.translate( 'yellow', 'yellow' )]; + options[2] = ["green", this.translate( 'green', 'green' )]; + options[3] = ["cyan", this.translate( 'cyan', 'cyan' )]; + options[4] = ["blue", this.translate( 'blue', 'blue' )]; + options[5] = ["magenta", this.translate( 'magenta', 'magenta' )]; + options[6] = ["red", this.translate( 'red', 'red' )]; + options[7] = ["black", this.translate( 'black', 'black' )]; break; case "prefCaptionsSize": @@ -12410,8 +9127,8 @@ if (typeof module !== "undefined" && module.exports) { break; case "prefCaptionsStyle": - options[0] = this.tt.captionsStylePopOn; - options[1] = this.tt.captionsStyleRollUp; + options[0] = this.translate( 'captionsStylePopOn', 'Pop-on' ); + options[1] = this.translate( 'captionsStyleRollUp', 'Roll-up' ); break; case "prefCaptionsPosition": @@ -12423,10 +9140,8 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.translatePrefs = function (pref, value, outputFormat) { - // translate current value of pref to a value supported by outputformat if (outputFormat == "youtube") { if (pref === "size") { - // YouTube font sizes are a range from -1 to 3 (0 = default) switch (value) { case "75%": return -1; @@ -12445,17 +9160,12 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.stylizeCaptions = function ($element, pref) { - // $element is the jQuery element containing the captions - // this function handles stylizing of the sample caption text in the Prefs dialog - // plus the actual production captions - // TODO: consider applying the same user prefs to visible text-based description - var property, newValue, opacity, lineHeight; + var property, newValue, opacity; if (typeof $element !== "undefined") { if (pref == "prefCaptionsPosition") { this.positionCaptions(); } else if (typeof pref !== "undefined") { - // just change the one property that user just changed if (pref === "prefCaptionsFont") { property = "font-family"; } else if (pref === "prefCaptionsSize") { @@ -12475,7 +9185,6 @@ if (typeof module !== "undefined" && module.exports) { } $element.css(property, newValue); } else { - // no property was specified, update all styles with current saved prefs opacity = parseFloat(this.prefCaptionsOpacity) / 100.0; $element.css({ "font-family": this.prefCaptionsFont, @@ -12491,7 +9200,6 @@ if (typeof module !== "undefined" && module.exports) { } } if (this.prefCaptionsPosition === "below") { - // also need to add the background color to the wrapper div if (typeof this.$captionsWrapper !== "undefined") { this.$captionsWrapper.css({ "background-color": this.prefCaptionsBGColor, @@ -12499,7 +9207,6 @@ if (typeof module !== "undefined" && module.exports) { }); } } else if (this.prefCaptionsPosition === "overlay") { - // no background color for overlay wrapper, captions are displayed in-line if (typeof this.$captionsWrapper !== "undefined") { this.$captionsWrapper.css({ "background-color": "transparent", @@ -12512,9 +9219,6 @@ if (typeof module !== "undefined" && module.exports) { } }; AblePlayer.prototype.positionCaptions = function (position) { - // set caption position to either 'overlay' or 'below' - // if position parameter was passed to this function, use that - // otherwise use user preference if (typeof position === "undefined") { position = this.prefCaptionsPosition; } @@ -12523,7 +9227,6 @@ if (typeof module !== "undefined" && module.exports) { this.$captionsWrapper .removeClass("able-captions-overlay") .addClass("able-captions-below"); - // also need to update in-line styles this.$captionsWrapper.css({ "background-color": this.prefCaptionsBGColor, opacity: "1", @@ -12545,18 +9248,17 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.populateChaptersDiv = function() { - var headingLevel, headingType, headingId, $chaptersHeading, - $chaptersList; - + var headingLevel, headingType, headingId, $chaptersHeading; + if ( ! this.chaptersDivLocation ) { + return; + } if ($('#' + this.chaptersDivLocation)) { this.$chaptersDiv = $('#' + this.chaptersDivLocation); this.$chaptersDiv.addClass('able-chapters-div'); - // empty content from previous build before starting fresh - this.$chaptersDiv.empty(); + this.$chaptersDiv.empty(); - // add optional header if (this.chaptersTitle) { headingLevel = this.getNextHeadingLevel(this.$chaptersDiv); headingType = 'h' + headingLevel.toString(); @@ -12570,14 +9272,12 @@ if (typeof module !== "undefined" && module.exports) { this.$chaptersNav = $('<nav>'); if (this.chaptersTitle) { - this.$chaptersNav.attr('aria-labelledby',headingId); - } - else { - this.$chaptersNav.attr('aria-label',this.tt.chapters); + this.$chaptersNav.attr( 'aria-labelledby', headingId ); + } else { + this.$chaptersNav.attr( 'aria-label', this.translate( 'chapters', 'Chapters' ) ); } this.$chaptersDiv.append(this.$chaptersNav); - // populate this.$chaptersNav with a list of chapters this.updateChaptersList(); } }; @@ -12585,32 +9285,23 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.updateChaptersList = function() { var thisObj, cues, $chaptersList, c, thisChapter, - $chapterItem, $chapterButton, buttonId, hasDefault, - getClickFunction, $clickedItem, $chaptersList, thisChapterIndex; + $chapterItem, $chapterButton, hasDefault, + getClickFunction, $clickedItem, $chaptersList; thisObj = this; - // TODO: Update this so it can change the chapters popup menu - // currently it only works if chapters are in an external container if (!this.$chaptersNav) { return false; } if (typeof this.useChapterTimes === 'undefined') { - if (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) { - this.useChapterTimes = true; - } - else { - this.useChapterTimes = false; - } + this.useChapterTimes = (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) ? true : false; } if (this.useChapterTimes) { cues = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { cues = this.chapters[0].cues; - } - else { + } else { cues = []; } if (cues.length > 0) { @@ -12623,24 +9314,20 @@ if (typeof module !== "undefined" && module.exports) { 'val': thisChapter }).text(this.flattenCueForCaption(cues[thisChapter])); - // add event listeners getClickFunction = function (time) { return function () { thisObj.seekTrigger = 'chapter'; $clickedItem = $(this).closest('li'); $chaptersList = $(this).closest('ul').find('li'); - thisChapterIndex = $chaptersList.index($clickedItem); $chaptersList.removeClass('able-current-chapter') .children('button').removeAttr('aria-current'); $clickedItem.addClass('able-current-chapter') .children('button').attr('aria-current','true'); - // Need to updateChapter before seeking to it - // Otherwise seekBar is redrawn with wrong chapterDuration and/or chapterTime thisObj.updateChapter(time); thisObj.seekTo(time); } }; - $chapterButton.on('click',getClickFunction(cues[thisChapter].start)); // works with Enter too + $chapterButton.on('click',getClickFunction(cues[thisChapter].start)); $chapterButton.on('focus',function() { $(this).closest('ul').find('li').removeClass('able-focus'); $(this).closest('li').addClass('able-focus'); @@ -12656,7 +9343,6 @@ if (typeof module !== "undefined" && module.exports) { $(this).closest('li').removeClass('able-focus'); }); - // put it all together $chapterItem.append($chapterButton); $chaptersList.append($chapterItem); if (this.defaultChapter === cues[thisChapter].id) { @@ -12666,7 +9352,6 @@ if (typeof module !== "undefined" && module.exports) { } } if (!hasDefault) { - // select the first chapter this.currentChapter = cues[0]; $chaptersList.find('button').first().attr('aria-current','true') .parent('li').addClass('able-current-chapter'); @@ -12678,11 +9363,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.seekToChapter = function(chapterId) { - // step through chapters looking for matching ID var i=0; while (i < this.selectedChapters.cues.length) { if (this.selectedChapters.cues[i].id == chapterId) { - // found the target chapter! Seek to it this.seekTo(this.selectedChapters.cues[i].start); this.updateChapter(this.selectedChapters.cues[i].start); break; @@ -12693,12 +9376,11 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.updateChapter = function (now) { - // as time-synced chapters change during playback, track changes in current chapter if (typeof this.selectedChapters === 'undefined') { return; } - var chapters, i, thisChapterIndex, chapterLabel; + var chapters, i, thisChapterIndex; chapters = this.selectedChapters.cues; for (i = 0; i < chapters.length; i++) { @@ -12709,14 +9391,12 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisChapterIndex !== 'undefined') { if (this.currentChapter !== chapters[thisChapterIndex]) { - // this is a new chapter this.currentChapter = chapters[thisChapterIndex]; if (this.useChapterTimes) { this.chapterDuration = this.getChapterDuration(); - this.seekIntervalCalculated = false; // will be recalculated in setSeekInterval() + this.seekIntervalCalculated = false; } if (typeof this.$chaptersDiv !== 'undefined') { - // chapters are listed in an external container this.$chaptersDiv.find('ul').find('li') .removeClass('able-current-chapter') .children('button').removeAttr('aria-current'); @@ -12730,8 +9410,6 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getChapterDuration = function () { - // called if this.seekbarScope === 'chapter' - // get duration of the current chapter var lastChapterIndex, chapterEnd; @@ -12743,25 +9421,19 @@ if (typeof module !== "undefined" && module.exports) { } lastChapterIndex = this.selectedChapters.cues.length-1; if (this.selectedChapters.cues[lastChapterIndex] == this.currentChapter) { - // this is the last chapter if (this.currentChapter.end !== this.duration) { - // chapter ends before or after video ends, adjust chapter end to match video end chapterEnd = this.duration; this.currentChapter.end = this.duration; - } - else { + } else { chapterEnd = this.currentChapter.end; } - } - else { // this is not the last chapter + } else { chapterEnd = this.currentChapter.end; } return chapterEnd - this.currentChapter.start; }; AblePlayer.prototype.getChapterElapsed = function () { - // called if this.seekbarScope === 'chapter' - // get current elapsed time, relative to the current chapter duration if (typeof this.currentChapter === 'undefined') { return 0; @@ -12769,47 +9441,37 @@ if (typeof module !== "undefined" && module.exports) { if (this.elapsed > this.currentChapter.start) { return this.elapsed - this.currentChapter.start; - } - else { + } else { return 0; } }; AblePlayer.prototype.convertChapterTimeToVideoTime = function (chapterTime) { - // chapterTime is the time within the current chapter - // return the same time, relative to the entire video if (typeof this.currentChapter !== 'undefined') { var newTime = this.currentChapter.start + chapterTime; if (newTime > this.currentChapter.end) { return this.currentChapter.end; - } - else { + } else { return newTime; } - } - else { + } else { return chapterTime; } }; AblePlayer.prototype.getChapterClickFunction = function (time) { - // Returns the function used when a chapter is clicked in the chapters menu. var thisObj = this; return function () { thisObj.seekTrigger = 'chapter'; thisObj.seekTo(time); - // stopgap to prevent spacebar in Firefox from reopening popup - // immediately after closing it (used in handleChapters()) thisObj.hidingPopup = true; thisObj.chaptersPopup.hide(); - // Ensure stopgap gets cancelled if handleChapters() isn't called - // e.g., if user triggered button with Enter or mouse click, not spacebar setTimeout(function() { thisObj.hidingPopup = false; }, 100); - thisObj.$chaptersButton.focus(); + thisObj.$chaptersButton.trigger('focus'); } }; @@ -12854,46 +9516,43 @@ if (typeof module !== "undefined" && module.exports) { if (typeof thisMeta !== "undefined") { if (this.currentMeta !== thisMeta) { if (this.metaType === "text") { - // it's time to load the new metadata cue into the container div this.$metaDiv.html( this.flattenCueForMeta(cues[thisMeta]).replace(/\n/g, "<br>") ); } else if (this.metaType === "selector") { - // it's time to show content referenced by the designated selector(s) cueText = this.flattenCueForMeta(cues[thisMeta]); cueLines = cueText.split("\n"); for (i = 0; i < cueLines.length; i++) { - line = $.trim(cueLines[i]); + line = cueLines[i].trim(); if (line.toLowerCase().trim() === "pause") { - // don't show big play button when pausing via metadata this.hideBigPlayButton = true; this.pauseMedia(); } else if (line.toLowerCase().substring(0, 6) == "focus:") { focusTarget = line.substring(6).trim(); if ($(focusTarget).length) { - $(focusTarget).focus(); + $(focusTarget).trigger('focus'); } } else { if ($(line).length) { - // selector exists this.currentMeta = thisMeta; showDuration = parseInt($(line).attr("data-duration")); if ( typeof showDuration !== "undefined" && !isNaN(showDuration) ) { - $(line).show().delay(showDuration).fadeOut(); + $(line).show(); + const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + delay(showDuration).then(() => { + $(line).hide(); + }); } else { - // no duration specified. Just show the element until end time specified in VTT file $(line).show(); } - // add to array of visible selectors so it can be hidden at end time this.visibleSelectors.push(line); tempSelectors.push(line); } } } - // now step through this.visibleSelectors and remove anything that's stale if (this.visibleSelectors && this.visibleSelectors.length) { if (this.visibleSelectors.length !== tempSelectors.length) { for (i = this.visibleSelectors.length - 1; i >= 0; i--) { @@ -12907,7 +9566,6 @@ if (typeof module !== "undefined" && module.exports) { } } } else { - // there is currently no metadata. Empty stale content if (typeof this.$metaDiv !== "undefined") { this.$metaDiv.html(""); } @@ -12915,14 +9573,12 @@ if (typeof module !== "undefined" && module.exports) { for (i = 0; i < this.visibleSelectors.length; i++) { $(this.visibleSelectors[i]).hide(); } - // reset array this.visibleSelectors = []; } this.currentMeta = -1; } }; - // Takes a cue and returns the metadata text to display for it. AblePlayer.prototype.flattenCueForMeta = function (cue) { var result = []; @@ -12954,29 +9610,21 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.setupTranscript = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - if (this.usingYouTubeCaptions || this.usingVimeoCaptions) { - // a transcript is not possible + if (this.usingYouTubeCaptions || this.usingVimeoCaptions || this.hideTranscriptButton ) { this.transcriptType = null; deferred.resolve(); } else { if (!this.transcriptType) { - // previously set transcriptType to null since there are no <track> elements - // check again to see if captions have been collected from other sources (e.g., YouTube) if (this.captions.length) { - // captions are possible! Use the default type (popup) - // if other types ('external' and 'manual') were desired, transcriptType would not be null here this.transcriptType = "popup"; } } if (this.transcriptType) { - if ( - this.transcriptType === "popup" || - this.transcriptType === "external" - ) { + if ( this.transcriptType === "popup" || this.transcriptType === "external" ) { this.injectTranscriptArea(); deferred.resolve(); } else if (this.transcriptType === "manual") { @@ -12984,7 +9632,6 @@ if (typeof module !== "undefined" && module.exports) { deferred.resolve(); } } else { - // there is no transcript deferred.resolve(); } } @@ -13003,7 +9650,7 @@ if (typeof module !== "undefined" && module.exports) { this.$transcriptArea = $("<div>", { class: "able-transcript-area", role: "dialog", - "aria-label": this.tt.transcriptTitle, + "aria-label": this.translate( 'transcriptTitle', 'Transcript' ), }); this.$transcriptToolbar = $("<div>", { @@ -13014,30 +9661,30 @@ if (typeof module !== "undefined" && module.exports) { class: "able-transcript", }); - // Transcript toolbar content - // Add auto Scroll checkbox this.$autoScrollTranscriptCheckbox = $("<input>", { id: "autoscroll-transcript-checkbox-" + this.mediaId, type: "checkbox", }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); - this.$transcriptToolbar.append( - $autoScrollLabel, - this.$autoScrollTranscriptCheckbox - ); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); + $autoScrollContainer = $( '<div>', { + 'class': 'autoscroll-transcript' + }); + $autoScrollContainer.append( + $autoScrollLabel, + this.$autoScrollTranscriptCheckbox + ); + this.$transcriptToolbar.append( $autoScrollContainer ); - // Add field for selecting a transcript language - // Only necessary if there is more than one language if (this.captions.length > 1) { $languageSelectWrapper = $("<div>", { class: "transcript-language-select-wrapper", }); $languageSelectLabel = $("<label>", { for: "transcript-language-select-" + this.mediaId, - }).text(this.tt.language); + }).text( this.translate( 'language', 'Language' ) ); this.$transcriptLanguageSelect = $("<select>", { id: "transcript-language-select-" + this.mediaId, }); @@ -13061,19 +9708,17 @@ if (typeof module !== "undefined" && module.exports) { } this.$transcriptArea.append(this.$transcriptToolbar, this.$transcriptDiv); - // If client has provided separate transcript location, put it there. - // Otherwise append it to the body if (this.transcriptDivLocation) { + this.$transcriptArea.removeAttr( 'role' ); + this.$transcriptArea.removeAttr( 'aria-label' ); $("#" + this.transcriptDivLocation).append(this.$transcriptArea); } else { this.$ableWrapper.append(this.$transcriptArea); } - // make it draggable (popup only; NOT external transcript) if (!this.transcriptDivLocation) { this.initDragDrop("transcript"); if (this.prefTranscript === 1) { - // transcript is on. Go ahead and position it this.positionDraggableWindow( "transcript", this.getDefaultWidth("transcript") @@ -13081,7 +9726,6 @@ if (typeof module !== "undefined" && module.exports) { } } - // If client has provided separate transcript location, override user's preference for hiding transcript if (!this.prefTranscript && !this.transcriptDivLocation) { this.$transcriptArea.hide(); } @@ -13090,7 +9734,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addTranscriptAreaEvents = function () { var thisObj = this; - this.$autoScrollTranscriptCheckbox.click(function () { + this.$autoScrollTranscriptCheckbox.on( 'click', function () { thisObj.handleTranscriptLockToggle( thisObj.$autoScrollTranscriptCheckbox.prop("checked") ); @@ -13099,8 +9743,6 @@ if (typeof module !== "undefined" && module.exports) { 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) { thisObj.autoScrollTranscript = false; thisObj.refreshControls("transcript"); @@ -13110,9 +9752,7 @@ if (typeof module !== "undefined" && module.exports) { ); if (typeof this.$transcriptLanguageSelect !== "undefined") { - this.$transcriptLanguageSelect.on("click mousedown", function (e) { - // execute default behavior - // prevent propagation of mouse event to toolbar or window + this.$transcriptLanguageSelect.on('click', function (e) { e.stopPropagation(); }); @@ -13125,9 +9765,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.transcriptSrcHasRequiredParts = function () { - // check the external transcript to be sure it has all required components - // return true or false - // in the process, define all the needed variables and properties if ($("#" + this.transcriptSrc).length) { this.$transcriptArea = $("#" + this.transcriptSrc); @@ -13160,9 +9797,8 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); - // Add an auto-scroll checkbox to the toolbar. this.$autoScrollTranscriptCheckbox = $autoScrollInput; this.$transcriptToolbar.append( $autoScrollLabel, @@ -13180,8 +9816,6 @@ if (typeof module !== "undefined" && module.exports) { if (this.transcriptType === "external" || this.transcriptType === "popup") { var chapters, captions, descriptions; - // Language of transcript might be different than language of captions - // But both are in sync by default if (this.transcriptLang) { captions = this.transcriptCaptions.cues; } else { @@ -13194,11 +9828,9 @@ if (typeof module !== "undefined" && module.exports) { } } - // setup chapters if (this.transcriptChapters) { chapters = this.transcriptChapters.cues; } else if (this.chapters.length > 0) { - // Try and match the caption language. if (this.transcriptLang) { for (var i = 0; i < this.chapters.length; i++) { if (this.chapters[i].language === this.transcriptLang) { @@ -13211,11 +9843,9 @@ if (typeof module !== "undefined" && module.exports) { } } - // setup descriptions if (this.transcriptDescriptions) { descriptions = this.transcriptDescriptions.cues; } else if (this.descriptions.length > 0) { - // Try and match the caption language. if (this.transcriptLang) { for (var i = 0; i < this.descriptions.length; i++) { if (this.descriptions[i].language === this.transcriptLang) { @@ -13234,7 +9864,6 @@ if (typeof module !== "undefined" && module.exports) { descriptions || [] ); this.$transcriptDiv.html(div); - // reset transcript selected <option> to this.transcriptLang if (this.$transcriptLanguageSelect) { this.$transcriptLanguageSelect .find("option:selected") @@ -13247,32 +9876,23 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; - // Make transcript tabbable if preference is turned on. if (this.prefTabbable === 1) { this.$transcriptDiv .find("span.able-transcript-seekpoint") .attr("tabindex", "0"); } - // handle clicks on text within transcript - // Note: This event listeners handles clicks only, not keydown events - // 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 (e) { + .on( '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 += 0.01; - // 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; } }); @@ -13280,7 +9900,6 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.highlightTranscript = function (currentTime) { - // Show highlight in transcript marking current caption. if (!this.transcriptType) { return; @@ -13291,13 +9910,11 @@ if (typeof module !== "undefined" && module.exports) { currentTime = parseFloat(currentTime); - // Highlight the current transcript item. this.$transcriptArea .find("span.able-transcript-seekpoint") .each(function () { start = parseFloat($(this).attr("data-start")); end = parseFloat($(this).attr("data-end")); - // be sure this isn't a chapter (don't highlight chapter headings) if ($(this).parent().hasClass("able-transcript-chapter-heading")) { isChapterHeading = true; } else { @@ -13305,9 +9922,7 @@ if (typeof module !== "undefined" && module.exports) { } if (currentTime >= start && currentTime <= end && !isChapterHeading) { - // If this item isn't already highlighted, it should be if (!$(this).hasClass("able-highlight")) { - // remove all previous highlights before adding one to current span thisObj.$transcriptArea .find(".able-highlight") .removeClass("able-highlight"); @@ -13319,7 +9934,6 @@ if (typeof module !== "undefined" && module.exports) { }); thisObj.currentHighlight = thisObj.$transcriptArea.find(".able-highlight"); if (thisObj.currentHighlight.length === 0) { - // Nothing highlighted. thisObj.currentHighlight = null; } }; @@ -13334,20 +9948,17 @@ if (typeof module !== "undefined" && module.exports) { var $main = $('<div class="able-transcript-container"></div>'); var transcriptTitle; - // set language for transcript container $main.attr("lang", this.transcriptLang); if (typeof this.transcriptTitle !== "undefined") { transcriptTitle = this.transcriptTitle; } else if (this.lyricsMode) { - transcriptTitle = this.tt.lyricsTitle; + transcriptTitle = this.translate( 'lyricsTitle', 'Lyrics' ); } else { - transcriptTitle = this.tt.transcriptTitle; + transcriptTitle = this.translate( 'transcriptTitle', 'Transcript' ); } if (!this.transcriptDivLocation) { - // only add an HTML heading to internal transcript - // external transcript is expected to have its own heading var headingNumber = this.playerHeadingLevel; headingNumber += 1; var chapterHeadingNumber = headingNumber + 1; @@ -13367,8 +9978,6 @@ if (typeof module !== "undefined" && module.exports) { } $transcriptHeadingTag.text(transcriptTitle); - // set language of transcript heading to language of player - // this is independent of language of transcript $transcriptHeadingTag.attr("lang", this.lang); $main.append($transcriptHeadingTag); @@ -13497,7 +10106,6 @@ if (typeof module !== "undefined" && module.exports) { if (hasParens || hasBrackets) { if (parts > 1) { - // force a line break between sections that contain parens or brackets var silentSpanBreak = "<br/>"; } else { var silentSpanBreak = ""; @@ -13506,12 +10114,9 @@ if (typeof module !== "undefined" && module.exports) { silentSpanBreak + '<span class="able-unspoken">'; var silentSpanClose = "</span>"; if (hasParens && hasBrackets) { - // string has both! if (openBracket < openParen) { - // brackets come first. Parse parens separately hasParens = false; } else { - // parens come first. Parse brackets separately hasBrackets = false; } } @@ -13542,7 +10147,6 @@ if (typeof module !== "undefined" && module.exports) { var $vSpan = $("<span>", { class: "able-unspoken", }); - // don't display "title=" when rendering the voice tag title in the transcript comp.value = comp.value.replace(/^title="|\"$/g, ""); $vSpan.text("(" + comp.value + ")"); result.push($vSpan); @@ -13565,7 +10169,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (comp.type === "b" || comp.type == "i") { - result.push($tag, " "); + result.push($tag); } } else { for (var i = 0; i < comp.children.length; i++) { @@ -13578,15 +10182,21 @@ if (typeof module !== "undefined" && module.exports) { }; for (var i = 0; i < cap.components.children.length; i++) { + var next_child_tagname; + if ( i < cap.components.children.length - 1 ) { + next_child_tagname = cap.components.children[i + 1].tagName; + } var results = flattenComponentForCaption(cap.components.children[i]); for (var jj = 0; jj < results.length; jj++) { var result = results[jj]; if (typeof result === "string") { - if (thisObj.lyricsMode) { - // add <br> BETWEEN each caption and WITHIN each caption (if payload includes "\n") - result = result.replace(/\n/g, "<br>") + "<br>"; + if (thisObj.lyricsMode) { + result = result.replace(/\n/g,'<br>'); + + if ( !next_child_tagname || ( next_child_tagname !== 'i' && next_child_tagname !== 'b' ) ) { + result += '<br>'; + } } else { - // just add a space between captions result += " "; } } @@ -13599,7 +10209,6 @@ if (typeof module !== "undefined" && module.exports) { div.append(" \n"); }; - // keep looping as long as any one of the three arrays has content while ( nextChapter < chapters.length || nextDesc < descriptions.length || @@ -13610,7 +10219,6 @@ if (typeof module !== "undefined" && module.exports) { nextDesc < descriptions.length && nextCap < captions.length ) { - // they all three have content var firstStart = Math.min( chapters[nextChapter].start, descriptions[nextDesc].start, @@ -13620,19 +10228,16 @@ if (typeof module !== "undefined" && module.exports) { nextChapter < chapters.length && nextDesc < descriptions.length ) { - // chapters & descriptions have content var firstStart = Math.min( chapters[nextChapter].start, descriptions[nextDesc].start ); } else if (nextChapter < chapters.length && nextCap < captions.length) { - // chapters & captions have content var firstStart = Math.min( chapters[nextChapter].start, captions[nextCap].start ); } else if (nextDesc < descriptions.length && nextCap < captions.length) { - // descriptions & captions have content var firstStart = Math.min( descriptions[nextDesc].start, captions[nextCap].start @@ -13670,60 +10275,51 @@ if (typeof module !== "undefined" && module.exports) { } } } - // organize transcript into blocks using [] and () as starting points var $components = $main.children(); var spanCount = 0; - var openBlock = true; $components.each(function () { if ($(this).hasClass("able-transcript-caption")) { if ( $(this).text().indexOf("[") !== -1 || $(this).text().indexOf("(") !== -1 ) { - // this caption includes a bracket or parenth. Start a new block - // close the previous block first if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } $(this).addClass("able-block-temp"); spanCount++; } else { - // this is not a caption. Close the caption block if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } }); + $main = wrapTranscriptBlocks( $main ); + return $main; }; + + var wrapTranscriptBlocks = function( $main ) { + $main.find(".able-block-temp") + .removeClass("able-block-temp") + .wrapAll('<div class="able-transcript-block"></div>'); + + return $main; + } })(jQuery); (function ($) { AblePlayer.prototype.showSearchResults = function () { - // search VTT file for all instances of searchTerms - // Currently just supports search terms separated with one or more spaces - // TODO: Add support for more robust search syntax: - // Search terms wrapped in quotation marks ("") must occur exactly as they appear in the quotes - // Search terms with an attached minus sign (e.g., -term) are to be excluded from results - // Boolean AND/OR operators - // ALSO: Add localization support var thisObj = this; if (this.searchDiv && this.searchString) { - // sanitize search string var cleanSearchString = DOMPurify.sanitize(this.searchString); if ($("#" + this.SearchDiv)) { - var searchStringHtml = "<p>" + this.tt.resultsSummary1 + " "; + var searchStringHtml = "<p>" + this.translate( 'resultsSummary1', 'You searched for:') + ' '; searchStringHtml += '<span id="able-search-term-echo">' + cleanSearchString + "</span>"; searchStringHtml += "</p>"; @@ -13735,19 +10331,16 @@ if (typeof module !== "undefined" && module.exports) { var $resultsSummary = $("<p>", { class: "able-search-results-summary", }); - var resultsSummaryText = this.tt.resultsSummary2; - resultsSummaryText += - " <strong>" + resultsArray.length + "</strong> "; - resultsSummaryText += this.tt.resultsSummary3 + " "; - resultsSummaryText += this.tt.resultsSummary4; - $resultsSummary.html(resultsSummaryText); + var resultsSummaryText = this.translate( 'resultsSummary2', 'Found %1 matching items.', [ '<strong>' + resultsArray.length + '</strong>' ] ); + resultsSummaryText += ' ' + this.translate( 'resultsSummary3', 'Click the time associated with any item to play the video from that point.' ); + $resultsSummary.html( resultsSummaryText ); var $resultsList = $("<ul>"); for (var i = 0; i < resultsArray.length; i++) { var resultId = "aria-search-result-" + i; var $resultsItem = $("<li>", {}); var itemStartTime = this.secondsToTime(resultsArray[i]["start"]); var itemLabel = - this.tt.searchButtonLabel + " " + itemStartTime["title"]; + this.translate( 'searchButtonLabel', 'Play at %1', [ itemStartTime["title"] ] ); var itemStartSpan = $("<button>", { class: "able-search-results-time", "data-start": resultsArray[i]["start"], @@ -13756,11 +10349,9 @@ if (typeof module !== "undefined" && module.exports) { "aria-describedby": resultId, }); itemStartSpan.text(itemStartTime["value"]); - // add a listener for clisk on itemStart itemStartSpan.on("click", function (e) { thisObj.seekTrigger = "search"; var spanStart = parseFloat($(this).attr("data-start")); - // Add a tiny amount so that we're inside the span. spanStart += 0.01; thisObj.seeking = true; thisObj.seekTo(spanStart); @@ -13770,16 +10361,16 @@ if (typeof module !== "undefined" && module.exports) { class: "able-search-result-text", id: resultId, }); - itemText.html("..." + resultsArray[i]["caption"] + "..."); + itemText.html('...' + resultsArray[i]["caption"] + '...'); $resultsItem.append(itemStartSpan, itemText); $resultsList.append($resultsItem); } - $("#" + this.searchDiv) + $('#' + this.searchDiv) .html(searchStringHtml) .append($resultsSummary, $resultsList); } else { - var noResults = $("<p>").text(this.tt.noResultsFound); - $("#" + this.searchDiv) + var noResults = $('<p>').text( this.translate( 'noResultsFound', 'No results found.' ) ); + $('#' + this.searchDiv) .html(searchStringHtml) .append(noResults); } @@ -13788,13 +10379,10 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.searchFor = function (searchString, ignoreCaps) { - // return chronological array of caption cues that match searchTerms var captionLang, captions, results, caption, c, i, j; results = []; - // split searchTerms into an array var searchTerms = searchString.split(" "); if (this.captions.length > 0) { - // Get caption track that matches this.searchLang for (i = 0; i < this.captions.length; i++) { if (this.captions[i].language === this.searchLang) { captionLang = this.searchLang; @@ -13845,8 +10433,6 @@ if (typeof module !== "undefined" && module.exports) { searchTerms, resultString ) { - // highlight ALL found searchTerms in the current resultString - // Need to step through the remaining terms to see if they're present as well searchTerms.forEach(function (searchTerm) { var reg = new RegExp(searchTerm, "gi"); resultString = resultString.replace( @@ -13858,11 +10444,7 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.secondsToTime = function (totalSeconds) { - // return an array of totalSeconds converted into two formats - // time['value'] = HH:MM:SS with hours dropped if there are none - // time['title'] = a speakable rendering, so speech rec users can easily speak the link - // first, round down to nearest second var totalSeconds = Math.floor(totalSeconds); var hours = parseInt(totalSeconds / 3600, 10) % 24; @@ -13873,36 +10455,36 @@ if (typeof module !== "undefined" && module.exports) { if (hours > 0) { value += hours + ":"; if (hours == 1) { - title += "1 " + this.tt.hour + " "; + title += "1 " + this.translate( 'hour', 'hour' ) + " "; } else { - title += hours + " " + this.tt.hours + " "; + title += hours + " " + this.translate( 'hours', 'hours' ) + " "; } } if (minutes < 10) { value += "0" + minutes + ":"; if (minutes > 0) { if (minutes == 1) { - title += "1 " + this.tt.minute + " "; + title += "1 " + this.translate( 'minute', 'minute' ) + " "; } else { - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } } } else { value += minutes + ":"; - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } if (seconds < 10) { value += "0" + seconds; if (seconds > 0) { if (seconds == 1) { - title += "1 " + this.tt.second + " "; + title += "1 " + this.translate( 'second', 'second' ) + " "; } else { - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } } } else { value += seconds; - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } var time = []; time["value"] = value; @@ -13912,28 +10494,22 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); (function ($) { - // Media events AblePlayer.prototype.onMediaUpdateTime = function (duration, elapsed) { - - // duration and elapsed are passed from callback functions of Vimeo API events - // duration is expressed as sss.xxx - // elapsed is expressed as sss.xxx var thisObj = this; this.getMediaTimes(duration,elapsed).then(function(mediaTimes) { thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - if (thisObj.duration > 0) { - // do all the usual time-sync stuff during playback + if (thisObj.duration > 0) { if (thisObj.prefHighlight === 1) { thisObj.highlightTranscript(thisObj.elapsed); - } + } thisObj.updateCaption(thisObj.elapsed); thisObj.showDescription(thisObj.elapsed); thisObj.updateChapter(thisObj.elapsed); thisObj.updateMeta(thisObj.elapsed); - thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); - } + thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); + } }); }; @@ -13952,221 +10528,154 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.onMediaComplete = function () { - // if there's a playlist, advance to next item and start playing if (this.hasPlaylist && !this.cueingPlaylistItem) { if (this.playlistIndex === (this.$playlist.length - 1)) { - // this is the last track in the playlist if (this.loop) { this.playlistIndex = 0; - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings + this.cueingPlaylistItem = true; this.cuePlaylistItem(0); - } - else { + } else { this.playing = false; this.paused = true; } - } - else { - // this is not the last track. Play the next one. + } else { this.playlistIndex++; - this.cueingPlaylistItem = true; // stopgap to prevent multiple firings + this.cueingPlaylistItem = true; this.cuePlaylistItem(this.playlistIndex) } } - this.refreshControls('init'); + this.refreshControls(); }; AblePlayer.prototype.onMediaNewSourceLoad = function () { - var loadIsComplete = false; + var loadIsComplete = false; if (this.cueingPlaylistItem) { - // this variable was set in order to address bugs caused by multiple firings of media 'end' event - // safe to reset now this.cueingPlaylistItem = false; } - if (this.recreatingPlayer) { - // same as above; different bugs - this.recreatingPlayer = false; + if (this.recreatingPlayer) { + this.recreatingPlayer = false; } if (this.playbackRate) { - // user has set playbackRate on a previous src or track - // use that setting on the new src or track too this.setPlaybackRate(this.playbackRate); } if (this.userClickedPlaylist) { if (!this.startedPlaying || this.okToPlay) { - // start playing; no further user action is required this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.seekTrigger == 'restart' || + } else if (this.seekTrigger == 'restart' || this.seekTrigger == 'chapter' || this.seekTrigger == 'transcript' || this.seekTrigger == 'search' ) { - // by clicking on any of these elements, user is likely intending to play - // Not included: elements where user might click multiple times in succession - // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play this.playMedia(); - loadIsComplete = true; - } - else if (this.swappingSrc) { - // new source file has just been loaded + loadIsComplete = true; + } else if (this.swappingSrc) { if (this.hasPlaylist) { - // a new source file from the playlist has just been loaded if ((this.playlistIndex !== this.$playlist.length) || this.loop) { - // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.swapTime > 0) { - if (this.seekStatus === 'complete') { + } else if (this.swapTime > 0) { + if (this.seekStatus === 'complete') { if (this.okToPlay) { - // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else if (this.seekStatus === 'seeking') { - } - else { - if (this.swapTime === this.elapsed) { - // seek is finished! - this.seekStatus = 'complete'; + loadIsComplete = true; + } else if (this.seekStatus === 'seeking') { + } else { + if (this.swapTime === this.elapsed) { + this.seekStatus = 'complete'; if (this.okToPlay) { - // should be able to resume playback - this.playMedia(); - } - loadIsComplete = true; - } - else { - // seeking hasn't started yet - // first, determine whether it's possible - if (this.hasDescTracks) { - // do nothing. Unable to seek ahead if there are descTracks - loadIsComplete = true; + this.playMedia(); } - else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { - // durations of two sources are close enough to making seek ahead in new source ok - this.seekStatus = 'seeking'; + loadIsComplete = true; + } else { + if (this.hasDescTracks) { + loadIsComplete = true; + } else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { + this.seekStatus = 'seeking'; this.seekTo(this.swapTime); - } - else { - // durations of two sources are too dissimilar to support seeking ahead to swapTime. - loadIsComplete = true; + } else { + loadIsComplete = true; } } } - } - else { - // swapTime is 0. No seeking required. - if (this.playing) { - this.playMedia(); - // swap is complete. Reset vars. - loadIsComplete = true; + } else { + if (this.playing) { + this.playMedia(); + loadIsComplete = true; } } - } - else if (!this.startedPlaying) { + } else if (!this.startedPlaying) { if (this.startTime > 0) { if (this.seeking) { - // a seek has already been initiated - // since canplaythrough has been triggered, the seek is complete this.seeking = false; if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; - } - else { - // haven't started seeking yet + loadIsComplete = true; + } else { this.seekTo(this.startTime); } - } - else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { + } else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { this.seekToChapter(this.defaultChapter); - } - else { - // there is no startTime, therefore no seeking required + } else { if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.hasPlaylist) { - // new source media is part of a playlist, but user didn't click on it - // (and somehow, swappingSrc is false) - // this may happen when the previous track ends and next track loads - // this same code is called above when swappingSrc is true + } else if (this.hasPlaylist) { if ((this.playlistIndex !== this.$playlist.length) || this.loop) { - // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } + } else { + loadIsComplete = true; } - else { - // None of the above. - // User is likely seeking to a new time, but not loading a new media source - // need to reset vars - loadIsComplete = true; - } - if (loadIsComplete) { - // reset vars - this.swappingSrc = false; - this.seekStatus = null; - this.swapTime = 0; + if (loadIsComplete) { + this.swappingSrc = false; + this.seekStatus = null; + this.swapTime = 0; this.seekTrigger = null; - this.seekingFromTranscript = false; + this.seekingFromTranscript = false; this.userClickedPlaylist = false; - this.okToPlay = false; + this.okToPlay = false; } - this.refreshControls('init'); - if (this.$focusedElement) { - this.restoreFocus(); - this.$focusedElement = null; + this.refreshControls(); + if (this.$focusedElement) { + this.restoreFocus(); + this.$focusedElement = null; + this.activeMedia = null; } }; - AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { + AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { - // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src - // The durations may not be exact, but they might be "close enough" - // returns true if "close enough", otherwise false - var tolerance, diff; - - tolerance = 1; // number of seconds between rounded durations that is considered "close enough" - - diff = Math.abs(Math.round(d1) - Math.round(d2)); - - if (diff <= tolerance) { - return true; - } - else { - return false; - } + var tolerance, diff; + + tolerance = 1; + diff = Math.abs(Math.round(d1) - Math.round(d2)); + + return (diff <= tolerance) ? true : false; }; - AblePlayer.prototype.restoreFocus = function() { + AblePlayer.prototype.restoreFocus = function() { - // function called after player has been rebuilt (during media swap) - // the original focusedElement no longer exists, - // but this function finds a match in the new player - // and places focus there - var classList; + var classList, $mediaParent; - if (this.$focusedElement) { - - if ((this.$focusedElement).attr('role') === 'button') { + if ( this.$focusedElement && null !== this.activeMedia ) { + $mediaParent = $( '#' + this.activeMedia ).closest( '.able' ); + if ( (this.$focusedElement).attr('role') === 'button' ) { classList = this.$focusedElement.attr("class").split(/\s+/); $.each(classList, function(index, item) { if (item.substring(0,20) === 'able-button-handler-') { - $('div.able-controller div.' + item).focus(); + $mediaParent.find('div.able-controller div.' + item).trigger('focus'); } }); } @@ -14178,23 +10687,20 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; - // Handle seek bar events. this.seekBar.bodyDiv.on('startTracking', function (e) { thisObj.pausedBeforeTracking = thisObj.paused; thisObj.pauseMedia(); }).on('tracking', function (e, position) { - // Scrub transcript, captions, and metadata. thisObj.highlightTranscript(position); thisObj.updateCaption(position); thisObj.showDescription(position); thisObj.updateChapter(thisObj.convertChapterTimeToVideoTime(position)); thisObj.updateMeta(position); - thisObj.refreshControls('init'); + thisObj.refreshControls(); }).on('stopTracking', function (e, position) { if (thisObj.useChapterTimes) { thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); - } - else { + } else { thisObj.seekTo(position); } if (!thisObj.pausedBeforeTracking) { @@ -14206,160 +10712,128 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.onClickPlayerButton = function (el) { - var whichButton, prefsPopup; - - whichButton = this.getButtonNameFromClass($(el).attr('class')); - - if (whichButton === 'play') { - this.clickedPlay = true; - this.handlePlay(); - } - else if (whichButton === 'restart') { - this.seekTrigger = 'restart'; - this.handleRestart(); - } - else if (whichButton === 'previous') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'previous'; - this.buttonWithFocus = 'previous'; - this.handlePrevTrack(); - } - else if (whichButton === 'next') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'next'; - this.buttonWithFocus = 'next'; - this.handleNextTrack(); - } - else if (whichButton === 'rewind') { - this.seekTrigger = 'rewind'; - this.handleRewind(); - } - else if (whichButton === 'forward') { - this.seekTrigger = 'forward'; - this.handleFastForward(); - } - else if (whichButton === 'mute') { - this.handleMute(); - } - else if (whichButton === 'volume') { - this.handleVolumeButtonClick(); - } - else if (whichButton === 'faster') { - this.handleRateIncrease(); - } - else if (whichButton === 'slower') { - this.handleRateDecrease(); - } - else if (whichButton === 'captions') { - this.handleCaptionToggle(); - } - else if (whichButton === 'chapters') { - this.handleChapters(); - } - else if (whichButton === 'descriptions') { - this.handleDescriptionToggle(); - } - else if (whichButton === 'sign') { - if (!this.closingSign) { - this.handleSignToggle(); - } - } - else if (whichButton === 'preferences') { - if ($(el).attr('data-prefs-popup') === 'menu') { - this.handlePrefsClick(); - } - else { - this.showingPrefsDialog = true; // stopgap - this.closePopups(); - prefsPopup = $(el).attr('data-prefs-popup'); - if (prefsPopup === 'keyboard') { - this.keyboardPrefsDialog.show(); - } - else if (prefsPopup === 'captions') { - this.captionPrefsDialog.show(); + whichButton = this.getButtonNameFromClass($(el).attr('class')); + switch ( whichButton ) { + case 'play': + this.clickedPlay = true; + this.handlePlay(); + break; + case 'restart': + this.seekTrigger = 'restart'; + this.handleRestart(); + break; + case 'previous': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'previous'; + this.buttonWithFocus = 'previous'; + this.handlePrevTrack(); + break; + case 'next': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'next'; + this.buttonWithFocus = 'next'; + this.handleNextTrack(); + break; + case 'rewind': + this.seekTrigger = 'rewind'; + this.handleRewind(); + break; + case 'forward': + this.seekTrigger = 'forward'; + this.handleFastForward(); + break; + case 'mute': + this.handleMute(); + break; + case 'volume': + this.handleVolumeButtonClick(); + break; + case 'faster': + this.handleRateIncrease(); + break; + case 'slower': + this.handleRateDecrease(); + break; + case 'captions': + this.handleCaptionToggle(); + break; + case 'chapters': + this.handleChapters(); + break; + case 'descriptions': + this.handleDescriptionToggle(); + break; + case 'sign': + if ( ! this.closingSign ) { + this.handleSignToggle(); } - else if (prefsPopup === 'descriptions') { - this.descPrefsDialog.show(); + break; + case 'preferences': + if ($(el).attr('data-prefs-popup') === 'menu') { + this.handlePrefsClick(); + } else { + this.showingPrefsDialog = true; + this.closePopups(); + prefsPopup = $(el).attr('data-prefs-popup'); + if (prefsPopup === 'keyboard') { + this.keyboardPrefsDialog.show(); + } else if (prefsPopup === 'captions') { + this.captionPrefsDialog.show(); + } else if (prefsPopup === 'descriptions') { + this.descPrefsDialog.show(); + } else if (prefsPopup === 'transcript') { + this.transcriptPrefsDialog.show(); + } + this.showingPrefsDialog = false; } - else if (prefsPopup === 'transcript') { - this.transcriptPrefsDialog.show(); + break; + case 'transcript': + if ( !this.closingTranscript ) { + this.handleTranscriptToggle(); } - this.showingPrefsDialog = false; - } - } - else if (whichButton === 'help') { - this.handleHelpClick(); - } - else if (whichButton === 'transcript') { - if (!this.closingTranscript) { - this.handleTranscriptToggle(); - } - } - else if (whichButton === 'fullscreen') { - this.clickedFullscreenButton = true; - this.handleFullscreenToggle(); + break; + case 'fullscreen': + this.clickedFullscreenButton = true; + this.handleFullscreenToggle(); + break; } }; - AblePlayer.prototype.getButtonNameFromClass = function (classString) { + AblePlayer.prototype.getButtonNameFromClass = function (classString) { + var classes, i; - // player control buttons all have class="able-button-handler-x" where x is the identifier - // buttons might also have other classes assigned though - - var classes, i; - - classes = classString.split(' '); - for (i = 0; i < classes.length; i++) { - if (classes[i].substring(0,20) === 'able-button-handler-') { - return classes[i].substring(20); + classes = classString.split(' '); + for (i = 0; i < classes.length; i++) { + if (classes[i].substring(0,20) === 'able-button-handler-') { + return classes[i].substring(20); } - } - return classString; + } + return classString; } AblePlayer.prototype.okToHandleKeyPress = function () { - - // returns true unless user's focus is on a UI element - // that is likely to need supported keystrokes, including space - + let defaultReturn = true; + if ( this.prefNoKeyShortcuts === 1 ) { + defaultReturn = false; + } var activeElement = AblePlayer.getActiveDOMElement(); - if ($(activeElement).prop('tagName') === 'INPUT') { - return false; - } - else { - return true; - } + return ($(activeElement).prop('tagName') === 'INPUT') ? false : defaultReturn; }; AblePlayer.prototype.onPlayerKeyPress = function (e) { - // handle keystrokes (using DHTML Style Guide recommended key combinations) - // https://web.archive.org/web/20130127004544/http://dev.aol.com/dhtml_style_guide/#mediaplayer - // Modifier keys Alt + Ctrl are on by default, but can be changed within Preferences - // NOTE #1: Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down - // The rest are reasonable best choices - // NOTE #2: If there are multiple players on a single page, keystroke handlers - // are only bound to the FIRST player - // NOTE #3: The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions - // including removal of the "media player" design pattern. There's an issue about that: - // https://github.com/w3c/aria-practices/issues/27 - var which, $thisElement; + var key, $thisElement; - // Convert to lower case. - which = e.which; - if (which >= 65 && which <= 90) { - which += 32; - } + key = e.key; $thisElement = $(document.activeElement); - if (which === 27) { // escape + if (key === 'Escape') { if (this.$transcriptArea && $.contains(this.$transcriptArea[0],$thisElement[0]) && !this.hidingPopup) { - // This element is part of transcript area. this.handleTranscriptToggle(); return false; } @@ -14368,8 +10842,6 @@ if (typeof module !== "undefined" && module.exports) { return false; } - // Only use keypress to control player if focus is NOT on a form field or contenteditable element - // (or a textarea element with player in stenoMode) if (!( $(':focus').is('[contenteditable]') || $(':focus').is('input') || @@ -14380,101 +10852,80 @@ if (typeof module !== "undefined" && module.exports) { (e.target.tagName === 'TEXTAREA' && !this.stenoMode) || e.target.tagName === 'SELECT' )){ - if (which === 27) { // escape + if (key === 'Escape') { this.closePopups(); this.$tooltipDiv.hide(); this.seekBar.hideSliderTooltips(); - } - else if (which === 32) { // spacebar = play/pause - // disable spacebar support for play/pause toggle as of 4.2.10 - // spacebar should not be handled everywhere on the page, since users use that to scroll the page - // when the player has focus, most controls are buttons so spacebar should be used to trigger the buttons + } else if (key === ' ') { if ($thisElement.attr('role') === 'button') { - // register a click on this element e.preventDefault(); - $thisElement.click(); + $thisElement.trigger( 'click' ); } - } - else if (which === 112) { // p = play/pause + } else if ( key === 'p' ) { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePlay(); } - } - else if (which === 115) { // s = stop (now restart) + } else if (key === 's') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRestart(); } - } - else if (which === 109) { // m = mute + } else if (key === 'm') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleMute(); } - } - else if (which === 118) { // v = volume + } else if (key === 'v') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleVolumeButtonClick(); } - } - else if (which >= 49 && which <= 57) { // set volume 1-9 + } else if (key >= 0 && key <= 9) { if (this.usingModifierKeys(e)) { e.preventDefault(); - this.handleVolumeKeystroke(which); + this.handleVolumeKeystroke(key); } - } - else if (which === 99) { // c = caption toggle + } else if (key === 'c') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleCaptionToggle(); } - } - else if (which === 100) { // d = description + } else if (key === 'd') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleDescriptionToggle(); } - } - else if (which === 102) { // f = forward + } else if (key === 'f') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleFastForward(); } - } - else if (which === 114) { // r = rewind + } else if (key === 'r') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRewind(); } - } - else if (which === 98) { // b = back (previous track) + } else if (key === 'b') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrevTrack(); } - } - else if (which === 110) { // n = next track + } else if (key === 'n') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleNextTrack(); } - } - else if (which === 101) { // e = preferences + } else if (key === 'e') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrefsClick(); } - } - else if (which === 13) { // Enter + } else if (key === 'Enter') { if ($thisElement.attr('role') === 'button' || $thisElement.prop('tagName') === 'SPAN') { - // register a click on this element - // if it's a transcript span the transcript span click handler will take over - $thisElement.click(); - } - else if ($thisElement.prop('tagName') === 'LI') { - $thisElement.click(); + $thisElement.trigger( 'click' ); + } else if ($thisElement.prop('tagName') === 'LI') { + $thisElement.trigger( 'click' ); } } } @@ -14484,43 +10935,24 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; - // NOTE: iOS and some browsers do not support autoplay - // and no events are triggered until media begins to play - // Able Player gets around this by automatically loading media in some circumstances - // (see initialize.js > initPlayer() for details) this.$media .on('emptied',function() { - // do something }) .on('loadedmetadata',function() { - // should be able to get duration now - thisObj.duration = thisObj.media.duration; - var x = 50.5; - var y = 51.9; - var diff = Math.abs(Math.round(x)-Math.round(y)); + thisObj.duration = thisObj.media.duration; }) .on('canplay',function() { - // previously handled seeking to startTime here - // but it's probably safer to wait for canplaythrough - // so we know player can seek ahead to anything }) .on('canplaythrough',function() { - // previously onMediaNewSourceLoad() was called on 'loadedmetadata' - // but that proved to be too soon for some of this functionality. - // TODO: Monitor this. If moving it here causes performance issues, - // consider moving some or all of this functionality to 'canplay' - thisObj.onMediaNewSourceLoad(); + thisObj.onMediaNewSourceLoad(); }) .on('play',function() { - // both 'play' and 'playing' seem to be fired in all browsers (including IE11) - // therefore, doing nothing here & doing everything when 'playing' is triggered - thisObj.refreshControls('playpause'); }) .on('playing',function() { thisObj.playing = true; thisObj.paused = false; - thisObj.swappingSrc = false; + thisObj.swappingSrc = false; thisObj.refreshControls('playpause'); }) .on('ended',function() { @@ -14532,39 +10964,28 @@ if (typeof module !== "undefined" && module.exports) { thisObj.refreshControls('timeline'); }) .on('waiting',function() { - // do something - // previously called refreshControls() here but this event probably doesn't warrant a refresh }) .on('durationchange',function() { - // Display new duration. thisObj.refreshControls('timeline'); }) .on('timeupdate',function() { - thisObj.onMediaUpdateTime(); // includes a call to refreshControls() + thisObj.onMediaUpdateTime(); }) - .on('pause',function() { - if (!thisObj.clickedPlay) { - // 'pause' was triggered automatically, not initiated by user - // this happens in some browsers when swapping source - // (e.g., between tracks in a playlist or swapping description) - if (thisObj.hasPlaylist || thisObj.swappingSrc) { - // do NOT set playing to false. - // doing so prevents continual playback after new track is loaded - } - else { + .on('pause',function() { + if (!thisObj.clickedPlay) { + if (thisObj.hasPlaylist || thisObj.swappingSrc) { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - thisObj.clickedPlay = false; // done with this variable - thisObj.onMediaPause(); // includes a call to refreshControls() + thisObj.clickedPlay = false; + thisObj.onMediaPause(); }) .on('ratechange',function() { - // do something }) .on('volumechange',function() { thisObj.volume = thisObj.getVolume(); @@ -14573,17 +10994,17 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.debug) { switch (thisObj.media.error.code) { case 1: - - break; + + break; case 2: - - break; + + break; case 3: - - break; + + break; case 4: - - break; + + break; } } }); @@ -14593,129 +11014,75 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; - // Vimeo doesn't seem to support chaining of on() functions - // so each event listener must be attached separately this.vimeoPlayer.on('loaded', function(vimeoId) { - // Triggered when a new video is loaded in the player thisObj.onMediaNewSourceLoad(); }); this.vimeoPlayer.on('play', function(data) { - // Triggered when the video plays thisObj.playing = true; thisObj.startedPlaying = true; thisObj.paused = false; thisObj.refreshControls('playpause'); }); this.vimeoPlayer.on('ended', function(data) { - // Triggered any time the video playback reaches the end. - // Note: when loop is turned on, the ended event will not fire. thisObj.playing = false; thisObj.paused = true; thisObj.onMediaComplete(); }); this.vimeoPlayer.on('bufferstart', function() { - // Triggered when buffering starts in the player. - // This is also triggered during preload and while seeking. - // There is no associated data with this event. }); this.vimeoPlayer.on('bufferend', function() { - // Triggered when buffering ends in the player. - // This is also triggered at the end of preload and seeking. - // There is no associated data with this event. }); this.vimeoPlayer.on('progress', function(data) { - // Triggered as the video is loaded. - // Reports back the amount of the video that has been buffered (NOT the amount played) - // Data has keys duration, percent, and seconds - }); + }); this.vimeoPlayer.on('seeking', function(data) { - // Triggered when the player starts seeking to a specific time. - // A timeupdate event will also be fired at the same time. - }); + }); this.vimeoPlayer.on('seeked', function(data) { - // Triggered when the player seeks to a specific time. - // A timeupdate event will also be fired at the same time. }); this.vimeoPlayer.on('timeupdate',function(data) { - // Triggered as the currentTime of the video updates. - // It generally fires every 250ms, but it may vary depending on the browser. thisObj.onMediaUpdateTime(data['duration'], data['seconds']); }); this.vimeoPlayer.on('pause',function(data) { - // Triggered when the video pauses if (!thisObj.clickedPlay) { - // 'pause' was triggered automatically, not initiated by user - // this happens in some browsers (not Chrome, as of 70.x) - // when swapping source (e.g., between tracks in a playlist, or swapping description) if (thisObj.hasPlaylist || thisObj.swappingSrc) { - // do NOT set playing to false. - // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - thisObj.clickedPlay = false; // done with this variable + thisObj.clickedPlay = false; thisObj.onMediaPause(); thisObj.refreshControls('playpause'); }); this.vimeoPlayer.on('playbackratechange',function(data) { - // Triggered when the playback rate of the video in the player changes. - // The ability to change rate can be disabled by the creator - // and the event will not fire for those videos. - // data contains one key: 'playbackRate' thisObj.vimeoPlaybackRate = data['playbackRate']; }); this.vimeoPlayer.on('texttrackchange', function(data) { - // Triggered when the active text track (captions/subtitles) changes. - // The values will be null if text tracks are turned off. - // data contains three keys: kind, label, language }); this.vimeoPlayer.on('volumechange',function(data) { - // Triggered when the volume in the player changes. - // Some devices do not support setting the volume of the video - // independently from the system volume, - // so this event will never fire on those devices. thisObj.volume = data['volume'] 10; }); this.vimeoPlayer.on('error',function(data) { - // do something with the available data - // data contains three keys: message, method, name - // message: A user-friendly error message - // method: The Vimeo API method call that triggered the error - // name: Name of the error (not necesssarily user-friendly) }); }; AblePlayer.prototype.addEventListeners = function () { - var thisObj, whichButton, thisElement; - - // Save the current object context in thisObj for use with inner functions. - thisObj = this; + var thisObj = this; - // Appropriately resize media player for full screen. $(window).on('resize',function () { thisObj.resizePlayer(); }); - // Refresh player if it changes from hidden to visible - // There is no event triggered by a change in visibility - // but MutationObserver works in most browsers (but NOT in IE 10 or earlier) - // http://caniuse.com/#feat=mutationobserver if (window.MutationObserver) { var target = this.$ableDiv[0]; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { - // the player's style attribute has changed. Check to see if it's visible if (thisObj.$ableDiv.is(':visible')) { - thisObj.refreshControls('init'); + thisObj.refreshControls(); } } }); @@ -14723,18 +11090,9 @@ if (typeof module !== "undefined" && module.exports) { var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); } - else { - // browser doesn't support MutationObserver - // TODO: Figure out an alternative solution for this rare use case in older browsers - // See example in buildplayer.js > useSvg() - } if (typeof this.seekBar !== 'undefined') { this.addSeekbarListeners(); - } - else { - // wait a bit and try again - // TODO: Should set this up to keep trying repeatedly. - // Seekbar listeners are critical. + } else { setTimeout(function() { if (typeof thisObj.seekBar !== 'undefined') { thisObj.addSeekbarListeners(); @@ -14742,46 +11100,36 @@ if (typeof module !== "undefined" && module.exports) { },2000); } - // handle clicks on player buttons this.$controllerDiv.find('div[role="button"]').on('click',function(e){ e.stopPropagation(); thisObj.onClickPlayerButton(this); }); - // handle clicks (left only) anywhere on the page. If any popups are open, close them. - $(document).on('click',function(e) { + $('body').on('click', function(e) { - if (e.button !== 0) { // not a left click + if (e.button !== 0) { return false; - } - if ($('.able-popup:visible').length || $('.able-volume-popup:visible')) { - // at least one popup is visible + } + if ($('.able-popup:visible').length || $('.able-volume-slider:visible').length ) { thisObj.closePopups(); } - if (e.target.tagName === 'VIDEO') { - // user clicked the video (not an element that sits on top of the video) - // handle this as a play/pause toggle click - thisObj.clickedPlay = true; - } + if (e.target.tagName === 'VIDEO') { + thisObj.clickedPlay = true; + } }); - // handle mouse movement over player; make controls visible again if hidden this.$ableDiv.on('mousemove',function() { if (thisObj.controlsHidden) { thisObj.fadeControls('in'); thisObj.controlsHidden = false; - // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); thisObj.hideControlsTimeoutStatus = 'clear'; } if (thisObj.hideControls) { - // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { - // if there's already an active timeout, clear it and start timer again + } else { if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); thisObj.hideControlsTimeoutStatus = 'clear'; @@ -14792,8 +11140,7 @@ if (typeof module !== "undefined" && module.exports) { } }); - // if user presses a key from anywhere on the page, show player controls - $(document).keydown(function(e) { + $(document).on( 'keydown', function(e) { if (thisObj.controlsHidden) { thisObj.fadeControls('in'); thisObj.controlsHidden = false; @@ -14802,13 +11149,9 @@ if (typeof module !== "undefined" && module.exports) { thisObj.hideControlsTimeoutStatus = 'clear'; } if (thisObj.hideControls) { - // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { - // controls are visible - // if there's already an active timeout, clear it and start timer again + } else { if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); thisObj.hideControlsTimeoutStatus = 'clear'; @@ -14820,23 +11163,18 @@ if (typeof module !== "undefined" && module.exports) { } }); - // handle local keydown events if this isn't the only player on the page; - // otherwise these are dispatched by global handler (see ableplayer-base,js) - this.$ableDiv.keydown(function (e) { + this.$ableDiv.on( 'keydown', function (e) { if (AblePlayer.nextIndex > 1) { thisObj.onPlayerKeyPress(e); } }); - // If stenoMode is enabled in an iframe, handle keydown events from the iframe if (this.stenoMode && (typeof this.stenoFrameContents !== 'undefined')) { this.stenoFrameContents.on('keydown',function(e) { thisObj.onPlayerKeyPress(e); }); }; - // transcript is not a child of this.$ableDiv - // therefore, must be added separately if (this.$transcriptArea) { this.$transcriptArea.on('keydown',function (e) { if (AblePlayer.nextIndex > 1) { @@ -14845,32 +11183,25 @@ if (typeof module !== "undefined" && module.exports) { }); } - // handle clicks on playlist items if (this.$playlist) { - this.$playlist.click(function(e) { + this.$playlist.on( 'click', function(e) { if (!thisObj.userClickedPlaylist) { - // stopgap in case multiple clicks are fired on the same playlist item - thisObj.userClickedPlaylist = true; // will be set to false after new src is loaded & canplaythrough is triggered + thisObj.userClickedPlaylist = true; thisObj.playlistIndex = $(this).index(); thisObj.cuePlaylistItem(thisObj.playlistIndex); } }); } - // Also play/pause when clicking on the media. - this.$media.click(function () { + this.$media.on( 'click', function () { thisObj.handlePlay(); }); - // add listeners for media events if (this.player === 'html5') { this.addHtml5MediaListeners(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.addVimeoListeners(); - } - else if (this.player === 'youtube') { - // Youtube doesn't give us time update events, so we just periodically generate them ourselves + } else if (this.player === 'youtube') { setInterval(function () { thisObj.onMediaUpdateTime(); }, 300); @@ -14879,21 +11210,12 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); (function ($) { - AblePlayer.prototype.initDragDrop = function ( which ) { - // supported values of which: 'sign', 'transcript' - // NOTE: "Drag and Drop" for Able Player is a metaphor only!!! - // HTML5 Drag & Drop API enables moving elements to new locations in the DOM - // Thats not our purpose; we're simply changing the visible position on-screen - // Therefore, the drag & drop interface was overhauled in v2.3.41 to simple - // use mouse (and keyboard) events to change CSS positioning properties - // There are nevertheless lessons to be learned from Drag & Drop about accessibility: - // http://dev.opera.com/articles/accessible-drag-and-drop/ - var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, + var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, i, x1, y1, x2, y2, $resizeLine, resizeZIndex; thisObj = this; @@ -14902,80 +11224,78 @@ if (typeof module !== "undefined" && module.exports) { $window = this.$transcriptArea; windowName = 'transcript-window'; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + $toolbar.attr( 'aria-label', this.translate( 'transcriptControls', 'Transcript Window Controls' ) ); + } else if (which === 'sign') { $window = this.$signWindow; windowName = 'sign-window'; $toolbar = this.$signToolbar; + $toolbar.attr( 'aria-label', this.translate( 'signControls', 'Sign Language Window Controls' ) ); } - // add class to trigger change in cursor on hover $toolbar.addClass('able-draggable'); + $toolbar.attr( 'role', 'application' ); + + $dragHandle = $('<div>',{ + 'class': 'able-drag-handle' + }); - // add resize handle selector to bottom right corner + $dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'); $resizeHandle = $('<div>',{ 'class': 'able-resizable' }); - // fill it with three parallel diagonal lines $resizeSvg = $('<svg>').attr({ 'width': '100%', 'height': '100%', 'viewBox': '0 0 100 100', 'preserveAspectRatio': 'none' }); - for (i=1; i<=3; i++) { - if (i === 1) { - x1 = '100'; - y1 = '0'; - x2 = '0'; - y2 = '100'; - } - else if (i === 2) { - x1 = '33'; - y1 = '100'; - x2 = '100'; - y2 = '33'; - } - else if (i === 3) { - x1 = '67'; - y1 = '100'; - x2 = '100'; - y2 = '67'; - } - $resizeLine = $('<line>').attr({ + for (i=1; i<=3; i++) { + if (i === 1) { + x1 = '100'; + y1 = '0'; + x2 = '0'; + y2 = '100'; + } else if (i === 2) { + x1 = '33'; + y1 = '100'; + x2 = '100'; + y2 = '33'; + } else if (i === 3) { + x1 = '67'; + y1 = '100'; + x2 = '100'; + y2 = '67'; + } + $resizeLine = $('<line>').attr({ 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2, - 'vector-effect': 'non-scaling-stroke' + 'vector-effect': 'non-scaling-stroke' }) - $resizeSvg.append($resizeLine); + $resizeSvg.append($resizeLine); } - $resizeHandle.html($resizeSvg); + $resizeHandle.html($resizeSvg); - // assign z-index that's slightly higher than parent window resizeZIndex = parseInt($window.css('z-index')) + 100; $resizeHandle.css('z-index',resizeZIndex); $window.append($resizeHandle); + $toolbar.append($dragHandle); - // Final step: Need to refresh the DOM in order for browser to process & display the SVG $resizeHandle.html($resizeHandle.html()); - // add event listener to toolbar to start and end drag - // other event listeners will be added when drag starts - $toolbar.on('mousedown mouseup touchstart touchend', function(e) { + $dragHandle.on('mousedown mouseup touchstart touchend', function(e) { e.stopPropagation(); - if (e.type === 'mousedown' || e.type === 'touchstart') { + if (e.type === 'mousedown' || e.type === 'touchstart' ) { if (!thisObj.windowMenuClickRegistered) { thisObj.windowMenuClickRegistered = true; thisObj.startMouseX = e.pageX; thisObj.startMouseY = e.pageY; - thisObj.dragDevice = 'mouse'; // ok to use this even if device is a touchpad + thisObj.dragDevice = 'mouse'; thisObj.startDrag(which, $window); } - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.dragging && thisObj.dragDevice === 'mouse') { thisObj.endDrag(which); } @@ -14983,7 +11303,6 @@ if (typeof module !== "undefined" && module.exports) { return false; }); - // add event listeners for resizing $resizeHandle.on('mousedown mouseup touchstart touchend', function(e) { e.stopPropagation(); if (e.type === 'mousedown' || e.type === 'touchstart') { @@ -14993,8 +11312,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.startMouseY = e.pageY; thisObj.startResize(which, $window); } - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.resizing) { thisObj.endResize(which); } @@ -15002,7 +11320,6 @@ if (typeof module !== "undefined" && module.exports) { return false; }); - // whenever a window is clicked, bring it to the foreground $window.on('click', function() { if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { @@ -15010,117 +11327,67 @@ if (typeof module !== "undefined" && module.exports) { } thisObj.finishingDrag = false; }); - this.addWindowMenu(which,$window,windowName); }; AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) { - var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg, - $buttonLabel, tooltipId, $tooltip, $popup, - label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip, - $optionList, menuBaseId, options, i, $optionItem, option, menuId; + var thisObj, $windowAlert, menuId, $newButton, tooltipId, $tooltip, $popup, menuId; thisObj = this; - // Add a Boolean that will be set to true temporarily if window button or a menu item is clicked - // This will prevent the click event from also triggering a mousedown event on the toolbar - // (which would unexpectedly send the window into drag mode) this.windowMenuClickRegistered = false; - // Add another Boolean that will be set to true temporarily when mouseup fires at the end of a drag - // this will prevent the click event from being triggered this.finishingDrag = false; - // create an alert div and add it to window - $windowAlert = $('<div role="alert"></div>'); - $windowAlert.addClass('able-alert'); - $windowAlert.hide(); - $windowAlert.appendTo(this.$activeWindow); - $windowAlert.css({ - top: $window.offset().top - }); - - // add button to draggable window which triggers a popup menu - // for now, re-use preferences icon for this purpose menuId = this.mediaId + '-' + windowName + '-menu'; $newButton = $('<button>',{ 'type': 'button', 'tabindex': '0', - 'aria-label': this.tt.windowButtonLabel, 'aria-haspopup': 'true', 'aria-controls': menuId, 'aria-expanded': 'false', 'class': 'able-button-handler-preferences' }); - if (this.iconType === 'font') { - $buttonIcon = $('<span>',{ - 'class': 'icon-preferences', - 'aria-hidden': 'true' - }); - $newButton.append($buttonIcon); - } - else { - // use image - buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png'; - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - - // add the visibly-hidden label for screen readers that don't support aria-label on the button - $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(this.tt.windowButtonLabel); - $newButton.append($buttonLabel); + this.getIcon( $newButton, 'preferences' ); + this.setText( $newButton, this.translate( 'windowButtonLabel', 'Window options' ) ); - // add a tooltip that displays aria-label on mouseenter or focus tooltipId = this.mediaId + '-' + windowName + '-tooltip'; $tooltip = $('<div>',{ 'class' : 'able-tooltip', 'id' : tooltipId }).hide(); + $newButton.on('mouseenter focus',function(e) { var label = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - var tooltipY = position.top - buttonHeight - 5; + var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label); + var tooltipHeight = tooltip.height(); + var tooltipY = ( tooltipHeight + 2 ) * -1; var tooltipX = 0; var tooltipStyle = { - left: '', - right: tooltipX + 'px', + right: '', + left: tooltipX + 'px', top: tooltipY + 'px' }; - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle); + tooltip.css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }); }); - // setup popup menu - $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window' - // define vars and assemble all the parts + $popup = this.setupPopups(windowName); if (which === 'transcript') { - this.$transcriptAlert = $windowAlert; this.$transcriptPopupButton = $newButton; this.$transcriptPopup = $popup; this.$transcriptToolbar.prepend($windowAlert,$newButton,$tooltip,$popup); - } - else if (which === 'sign') { - this.$signAlert = $windowAlert; + } else if (which === 'sign') { this.$signPopupButton = $newButton; this.$signPopup = $popup; this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup); } - // handle button click - $newButton.on('click mousedown keydown',function(e) { + $newButton.on('click keydown',function(e) { if (thisObj.focusNotClick) { return false; @@ -15131,7 +11398,7 @@ if (typeof module !== "undefined" && module.exports) { } e.stopPropagation(); if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { - // don't set windowMenuClickRegistered yet; that happens in handler function + thisObj.handleWindowButtonClick(which, e); } thisObj.finishingDrag = false; @@ -15142,107 +11409,87 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addResizeDialog = function (which, $window) { - var thisObj, $windowPopup, $windowButton, - widthId, heightId, startingWidth, startingHeight, aspectRatio, - $resizeForm, $resizeWrapper, - $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, - $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, - tempWidth, tempHeight, - $saveButton, $cancelButton, newWidth, newHeight, resizeDialog; + var thisObj, $windowPopup, $windowButton, widthId, heightId, + $resizeForm, $resizeWrapper, $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, + $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, $saveButton, $cancelButton, + newWidth, newHeight, resizeDialog; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } widthId = this.mediaId + '-resize-' + which + '-width'; heightId = this.mediaId + '-resize-' + which + '-height'; - startingWidth = $window.width(); - startingHeight = $window.height(); - aspectRatio = startingWidth / startingHeight; $resizeForm = $('<div></div>',{ 'class' : 'able-resize-form' }); - // inner container for all content, will be assigned to modal div's aria-describedby $resizeWrapper = $('<div></div>'); + $resizeControls = $( '<div class="able-prefs-buttons"></div>' ); - // width field $resizeWidthDiv = $('<div></div>'); $resizeWidthInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': widthId, - 'value': startingWidth + 'min': 0, + 'value': '', }); $resizeWidthLabel = $('<label>',{ 'for': widthId - }).text(this.tt.width); + }).text( this.translate( 'width', 'Width' ) ); - // height field $resizeHeightDiv = $('<div></div>'); $resizeHeightInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': heightId, - 'value': startingHeight + 'min': 0, + 'value': '', }); $resizeHeightLabel = $('<label>',{ 'for': heightId - }).text(this.tt.height); - - if (which === 'sign') { - // make height a read-only field - // and calculate its value based on width to preserve aspect ratio - $resizeHeightInput.prop('readonly',true); - $resizeWidthInput.on('input',function() { - tempWidth = $(this).val(); - tempHeight = Math.round(tempWidth/aspectRatio, 0); - $resizeHeightInput.val(tempHeight); - }) - } + }).text( this.translate( 'height', 'Height' ) ); - // Add save and cancel buttons. - $saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - $cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); $saveButton.on('click',function () { newWidth = $('#' + widthId).val(); newHeight = $('#' + heightId).val(); - if (newWidth !== startingWidth || newHeight !== startingHeight) { - thisObj.resizeObject(which,newWidth,newHeight); - thisObj.updateCookie(which); - } + thisObj.resizeObject(which,newWidth,newHeight); + thisObj.updatePreferences(which); + resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); $cancelButton.on('click',function () { resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); - // Now assemble all the parts $resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput); $resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput); $resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv); - $resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton); + $resizeControls.append($saveButton,$cancelButton); + $resizeForm.append($resizeWrapper,$resizeControls); - // must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers $('body').append($resizeForm); - resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'dialog', true, this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em'); + resizeDialog = new AccessibleDialog( + $resizeForm, + $windowButton, + this.translate( 'windowResizeHeading', 'Resize Window' ), + this.translate( 'closeButtonLabel', 'Close' ), + ); if (which === 'transcript') { this.transcriptResizeDialog = resizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.signResizeDialog = resizeDialog; } }; @@ -15252,11 +11499,7 @@ if (typeof module !== "undefined" && module.exports) { var thisObj, $windowPopup, $windowButton, $toolbar, popupTop; thisObj = this; - if (this.focusNotClick) { - // transcript or sign window has just opened, - // and focus moved to the window button - // ignore the keystroke that triggered the popup return false; } @@ -15264,73 +11507,54 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; $toolbar = this.$signToolbar; } - if (e.type === 'keydown') { - // user pressed a key - if (e.which === 32 || e.which === 13) { - // this was Enter or space + if (e.key === ' ' || e.key === 'Enter') { this.windowMenuClickRegistered = true; - } - else if (e.which === 27) { // escape + } else if (e.key === 'Escape') { if ($windowPopup.is(':visible')) { - // close the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - } - else { - // popup isn't open. Close the window + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.trigger('focus'); + } else { if (which === 'sign') { this.handleSignToggle(); - } - else if (which === 'transcript') { + } else if (which === 'transcript') { this.handleTranscriptToggle(); } } - } - else { + } else { return false; } - } - else { - // this was a mouse event + } else { this.windowMenuClickRegistered = true; } - if ($windowPopup.is(':visible')) { - $windowPopup.hide(200,'',function() { - thisObj.windowMenuClickRegistered = false; // reset - }); + if ( $windowPopup.is(':visible') ) { + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; $windowPopup.find('li').removeClass('able-focus'); - $windowButton.attr('aria-expanded','false').focus(); - } - else { - // first, be sure window is on top + $windowButton.attr('aria-expanded','false').trigger('focus'); + } else { this.updateZIndex(which); - popupTop = $windowButton.position().top + $windowButton.outerHeight(); + popupTop = $toolbar.outerHeight() - 1; $windowPopup.css('top', popupTop); - $windowPopup.show(200,'',function() { - $windowButton.attr('aria-expanded','true'); - $(this).find('li').first().focus().addClass('able-focus'); - thisObj.windowMenuClickRegistered = false; // reset - }); + $windowPopup.show(); + $windowButton.attr('aria-expanded','true'); + $(this).find('li').first().trigger('focus').addClass('able-focus'); + thisObj.windowMenuClickRegistered = false; } }; AblePlayer.prototype.handleMenuChoice = function (which, choice, e) { - var thisObj, $window, $windowPopup, $windowButton, resizeDialog, width, height, $thisRadio; + var thisObj, $window, $windowPopup, $windowButton, resizeDialog, startingWidth, startingHeight, + aspectRatio, tempWidth, tempHeight; thisObj = this; if (which === 'transcript') { @@ -15338,31 +11562,36 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; resizeDialog = this.transcriptResizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { $window = this.$signWindow; $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; resizeDialog = this.signResizeDialog; + + startingWidth = $window.outerWidth(); + startingHeight = $window.outerHeight(); + aspectRatio = startingWidth / startingHeight; + widthId = this.mediaId + '-resize-' + which + '-width'; + heightId = this.mediaId + '-resize-' + which + '-height'; + $( '#' + heightId ).prop('readonly',true); + $( '#' + widthId ).on('input',function() { + tempWidth = $(this).val(); + tempHeight = Math.round(tempWidth/aspectRatio); + $( '#' + heightId ).val(tempHeight); + }); } this.$activeWindow = $window; if (e.type === 'keydown') { - if (e.which === 27) { // escape - // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - // also return focus to window options button - $windowButton.focus(); - }); + if (e.key === 'Escape') { + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + $windowButton.trigger('focus'); + return false; - } - else { - // all other keys will be handled by upstream functions + } else { if (choice !== 'close') { this.$activeWindow = $window; } @@ -15370,59 +11599,41 @@ if (typeof module !== "undefined" && module.exports) { } } - // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - }); + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + if (choice !== 'close') { - $windowButton.focus(); + $windowButton.trigger('focus'); } if (choice === 'move') { - - // temporarily add role="application" to activeWindow - // otherwise, screen readers incercept arrow keys and moving window will not work this.$activeWindow.attr('role','application'); if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); + this.showAlert( this.translate( 'windowMoveAlert', 'Drag or use arrow keys to move the window; Enter to stop' ),which); if (which === 'transcript') { this.showedTranscriptAlert = true; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.showedSignAlert = true; } } - if (e.type === 'keydown') { - this.dragDevice = 'keyboard'; - } - else { - this.dragDevice = 'mouse'; - } + this.dragDevice = (e.type === 'keydown') ? 'keyboard' : 'mouse'; this.startDrag(which, $window); - $windowPopup.hide().parent().focus(); - } - else if (choice == 'resize') { - // resize through the menu uses a form, not drag + $windowPopup.hide().parent().attr( 'tabindex', '-1' ).trigger('focus'); + } else if (choice == 'resize') { var resizeFields = resizeDialog.getInputs(); if (resizeFields) { - // reset width and height values in form - resizeFields[0].value = $window.width(); - resizeFields[1].value = $window.height(); + resizeFields[0].value = Math.round( $window.outerWidth() ); + resizeFields[1].value = Math.round( $window.outerHeight() ); } resizeDialog.show(); - } - else if (choice == 'close') { - // close window, place focus on corresponding button on controller bar + } else if (choice == 'close') { if (which === 'transcript') { - this.closingTranscript = true; // stopgrap to prevent double-firing of keypress + this.closingTranscript = true; this.handleTranscriptToggle(); - } - else if (which === 'sign') { - this.closingSign = true; // stopgrap to prevent double-firing of keypress + } else if (which === 'sign') { + this.closingSign = true; this.handleSignToggle(); } } @@ -15430,7 +11641,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.startDrag = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newX, newY; + var thisObj, $windowPopup, startPos, newX, newY; thisObj = this; @@ -15441,30 +11652,16 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; } - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - - // if window's popup menu is open, close it if ($windowPopup.is(':visible')) { $windowPopup.hide(); } - // be sure this window is on top this.updateZIndex(which); - // get starting position of element startPos = this.$activeWindow.position(); this.dragStartX = startPos.left; this.dragStartY = startPos.top; @@ -15473,35 +11670,29 @@ if (typeof module !== "undefined" && module.exports) { this.dragDevice = 'keyboard'; this.dragKeyX = this.dragStartX; this.dragKeyY = this.dragStartY; - // add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd() this.startingDrag = true; - } - else { + } else { this.dragDevice = 'mouse'; - // get offset between mouse position and top left corner of draggable element this.dragOffsetX = this.startMouseX - this.dragStartX; this.dragOffsetY = this.startMouseY - this.dragStartY; } - // prepare element for dragging this.$activeWindow.addClass('able-drag').css({ 'position': 'absolute', 'top': this.dragStartY + 'px', 'left': this.dragStartX + 'px' - }).focus(); + }).trigger('focus'); - // add device-specific event listeners - if (this.dragDevice === 'mouse') { // might also be a touchpad + var dragDevice = this.dragDevice; + if (this.dragDevice === 'mouse') { $(document).on('mousemove touchmove',function(e) { if (thisObj.dragging) { - // calculate new top left based on current mouse position - offset newX = e.pageX - thisObj.dragOffsetX; newY = e.pageY - thisObj.dragOffsetY; thisObj.resetDraggedObject( newX, newY ); } }); - } - else if (this.dragDevice === 'keyboard') { + } else if (this.dragDevice === 'keyboard') { this.$activeWindow.on('keydown',function(e) { if (thisObj.dragging) { thisObj.dragKeys(which, e); @@ -15515,36 +11706,33 @@ if (typeof module !== "undefined" && module.exports) { var key, keySpeed; - var thisObj = this; - - // stopgap to prevent firing on initial Enter or space - // that selected "Move" from menu if (this.startingDrag) { this.startingDrag = false; return false; } - key = e.which; - keySpeed = 10; // pixels per keypress event + key = e.key; + keySpeed = 10; switch (key) { - case 37: // left - case 63234: + case 'ArrowLeft': this.dragKeyX -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveLeft', 'Window moved left' ) ); break; - case 38: // up - case 63232: + case 'ArrowUp': this.dragKeyY -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveUp', 'Window moved up' ) ); break; - case 39: // right - case 63235: + case 'ArrowRight': this.dragKeyX += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveRight', 'Window moved right' ) ); break; - case 40: // down - case 63233: + case 'ArrowDown': this.dragKeyY += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveDown', 'Window moved down' ) ); break; - case 13: // enter - case 27: // escape + case 'Enter': + case 'Escape': + this.$srAlertBox.text( this.translate( 'windowMoveStopped', 'Window move stopped' ) ); this.endDrag(which); return false; default: @@ -15558,6 +11746,9 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.resetDraggedObject = function ( x, y) { + setTimeout( () => { + this.$srAlertBox.text( '' ); + }, 2000 ); this.$activeWindow.css({ 'left': x + 'px', @@ -15569,16 +11760,12 @@ if (typeof module !== "undefined" && module.exports) { var innerHeight; - // which is either 'transcript' or 'sign' this.$activeWindow.css({ 'width': width + 'px', 'height': height + 'px' }); if (which === 'transcript') { - // $activeWindow is the outer $transcriptArea - // but the inner able-transcript also needs to be resized proporitionally - // (it's 50px less than its outer container) innerHeight = height - 50; this.$transcriptDiv.css('height', innerHeight + 'px'); } @@ -15586,248 +11773,292 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.endDrag = function(which) { - var thisObj, $window, $windowPopup, $windowButton; + var thisObj, $windowPopup, $windowButton; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } $(document).off('mousemove mouseup touchmove touchup'); this.$activeWindow.off('keydown').removeClass('able-drag'); - // restore activeWindow role from 'application' to 'dialog' this.$activeWindow.attr('role','dialog'); this.$activeWindow = null; if (this.dragDevice === 'keyboard') { - $windowButton.focus(); + $windowButton.trigger('focus'); } this.dragging = false; - // save final position of dragged element - this.updateCookie(which); + this.updatePreferences(which); - // reset starting mouse positions this.startMouseX = undefined; this.startMouseY = undefined; - // Boolean to stop stray events from firing this.windowMenuClickRegistered = false; - this.finishingDrag = true; // will be reset after window click event - // finishingDrag should e reset after window click event, - // which is triggered automatically after mouseup - // However, in case that's not reliable in some browsers - // need to ensure this gets cancelled + this.finishingDrag = true; setTimeout(function() { thisObj.finishingDrag = false; }, 100); }; - AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) { - - // return true if mouse is close to bottom right corner (resize target) - var tolerance, position, top, left, width, height, bottom, right; - - tolerance = 10; // number of pixels in both directions considered "close enough" - - // first, get position of element - position = $window.offset(); - top = position.top; - left = position.left; - width = $window.width(); - height = $window.height(); - bottom = top + height; - right = left + width; - if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) { - return true; - } - return false; - }; - AblePlayer.prototype.startResize = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight; + var thisObj, $windowPopup, newWidth, newHeight; thisObj = this; this.$activeWindow = $element; this.resizing = true; - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } + $windowPopup = (which === 'transcript') ? this.$transcriptPopup : this.$signPopup; - // if window's popup menu is open, close it & place focus on button (???) if ($windowPopup.is(':visible')) { - $windowPopup.hide().parent().focus(); + $windowPopup.hide().parent().trigger('focus'); } - // get starting width and height startPos = this.$activeWindow.position(); this.dragKeyX = this.dragStartX; this.dragKeyY = this.dragStartY; this.dragStartWidth = this.$activeWindow.width(); - this.dragStartHeight = this.$activeWindow.height(); + this.dragStartHeight = this.$activeWindow.outerHeight(); - // add event listeners $(document).on('mousemove touchmove',function(e) { if (thisObj.resizing) { - // calculate new width and height based on changes to mouse position newWidth = thisObj.dragStartWidth + (e.pageX - thisObj.startMouseX); newHeight = thisObj.dragStartHeight + (e.pageY - thisObj.startMouseY); thisObj.resizeObject( which, newWidth, newHeight ); } }); + return false; }; AblePlayer.prototype.endResize = function(which) { - var $window, $windowPopup, $windowButton; + var $windowPopup, $windowButton; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } $(document).off('mousemove mouseup touchmove touchup'); this.$activeWindow.off('keydown'); - $windowButton.show().focus(); + $windowButton.show().trigger('focus'); this.resizing = false; this.$activeWindow.removeClass('able-resize'); - // save final width and height of dragged element - this.updateCookie(which); + this.updatePreferences(which); - // Booleans for preventing stray events this.windowMenuClickRegistered = false; this.finishingDrag = true; - // finishingDrag should e reset after window click event, - // which is triggered automatically after mouseup - // However, in case that's not reliable in some browsers - // need to ensure this gets cancelled setTimeout(function() { this.finishingDrag = false; }, 100); }; - })(jQuery); (function ($) { AblePlayer.prototype.initSignLanguage = function() { - - // Sign language is only currently supported in HTML5 player, not YouTube or Vimeo - if (this.player === 'html5') { - // check to see if there's a sign language video accompanying this video - // check only the first source - // If sign language is provided, it must be provided for all sources - this.signFile = this.$sources.first().attr('data-sign-src'); - if (this.signFile) { + this.hasSignLanguage = false; + var hasLocalSrc = ( this.$sources.first().attr('data-sign-src') !== undefined && this.$sources.first().attr('data-sign-src') !== "" ); + var hasRemoteSrc = ( this.$media.data('youtube-sign-src') !== undefined && this.$media.data('youtube-sign-src') !== "" ); + var hasRemoteSource = ( this.$sources.first().attr('data-youtube-sign-src') !== undefined && this.$sources.first().attr('data-youtube-sign-src') !== '' ); + if ( ! this.isIOS() && ( hasLocalSrc || hasRemoteSrc || hasRemoteSource ) && ( this.player === 'html5' || this.player === 'youtube' ) ) { + let ytSignSrc = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') ); + let signSrc = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') ); + let signVideo = DOMPurify.sanitize( this.$media.data('youtube-sign-src') ); + this.signFile = (hasLocalSrc ) ? signSrc : false; + if ( hasRemoteSrc ) { + this.signYoutubeId = signVideo; + } else if ( hasRemoteSource ) { + this.signYoutubeId = ytSignSrc; + } + if ( this.signFile || this.signYoutubeId ) { if (this.isIOS()) { - // IOS does not allow multiple videos to play simultaneously - // Therefore, sign language as rendered by Able Player unfortunately won't work - this.hasSignLanguage = false; if (this.debug) { - - } - } - else { + + } + } else { if (this.debug) { - + + } + this.hasSignLanguage = true; + this.injectSignPlayerCode(); + } + } + } + }; + + AblePlayer.prototype.injectSignPlayerCode = function() { + + var thisObj, signVideoId, i, signSrc, srcType, $signSource; + + thisObj = this; + signVideoId = this.mediaId + '-sign'; + + if ( this.signFile || this.signYoutubeId ) { + if ( null !== this.$signDivLocation ) { + this.$signDivLocation.addClass( 'able-sign-window able-fixed' ); + this.$signWindow = this.$signDivLocation; + } else { + this.$signWindow = $('<div>',{ + 'class' : 'able-sign-window', + 'role': 'dialog', + 'aria-label': this.translate( 'sign', 'Sign language' ) + }); + this.$signToolbar = $('<div>',{ + 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' + }); + this.$signWindow.append(this.$signToolbar); + } + + this.$ableWrapper.append(this.$signWindow); + } + + if ( this.signFile ) { + this.$signVideo = $('<video>',{ + 'id' : signVideoId, + 'tabindex' : '-1', + 'muted' : true, + }); + this.signVideo = this.$signVideo[0]; + + if ( this.signFile ) { + $signSource = $('<source>',{ + 'src' : this.signFile, + 'type' : 'video/' + this.signFile.substr(-3) + }); + this.$signVideo.append($signSource); + } else { + for (i=0; i < this.$sources.length; i++) { + signSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-sign-src') ); + srcType = this.$sources[i].getAttribute('type'); + if (signSrc) { + $signSource = $('<source>',{ + 'src' : signSrc, + 'type' : srcType + }); + this.$signVideo.append($signSource); + } else { + this.hasSignLanguage = false; + return; } - this.hasSignLanguage = true; - this.injectSignPlayerCode(); } } - else { - this.hasSignLanguage = false; - } + this.$signWindow.append( this.$signVideo ); + } else if ( this.signYoutubeId ) { + this.signYoutube = this.initYouTubeSignPlayer(); } - else { - this.hasSignLanguage = false; + + if ( null === this.$signDivLocation ) { + this.initDragDrop('sign'); } - }; - AblePlayer.prototype.injectSignPlayerCode = function() { + if (this.prefSign === 1) { + if ( null === this.$signDivLocation ) { + this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); + } + } else { + this.$signWindow.hide(); + } + }; - // create and inject surrounding HTML structure - var thisObj, signVideoId, signVideoWidth, i, signSrc, srcType, $signSource; + AblePlayer.prototype.initYouTubeSignPlayer = function () { + var thisObj, deferred, promise; thisObj = this; + deferred = new this.defer(); + promise = deferred.promise(); - signVideoWidth = this.getDefaultWidth('sign'); + this.youTubeSignPlayerReady = false; - signVideoId = this.mediaId + '-sign'; - this.$signVideo = $('<video>',{ - 'id' : signVideoId, - 'tabindex' : '-1' - }); - this.signVideo = this.$signVideo[0]; - // for each original <source>, add a <source> to the sign <video> - for (i=0; i < this.$sources.length; i++) { - signSrc = this.$sources[i].getAttribute('data-sign-src'); - srcType = this.$sources[i].getAttribute('type'); - if (signSrc) { - $signSource = $('<source>',{ - 'src' : signSrc, - 'type' : srcType - }); - this.$signVideo.append($signSource); - } - else { - // source is missing a sign language version - // can't include sign language - this.hasSignLanguage = false; - break; + if (AblePlayer.youTubeIframeAPIReady) { + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + } else { + if ( ! AblePlayer.loadingYouTubeIframeAPI ) { + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + + }); } + + $('body').on('youTubeIframeAPIReady', function () { + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + }); } + return promise; + }; - this.$signWindow = $('<div>',{ - 'class' : 'able-sign-window', - 'role': 'dialog', - 'aria-label': this.tt.sign - }); - this.$signToolbar = $('<div>',{ - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' - }); + AblePlayer.prototype.finalizeYoutubeSignInit = function () { - this.$signWindow.append(this.$signToolbar, this.$signVideo); + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - this.$ableWrapper.append(this.$signWindow); + deferred = new this.defer(); + promise = deferred.promise(); + thisObj = this; + containerId = this.mediaId + '_youtube_sign'; - // make it draggable - this.initDragDrop('sign'); + this.$signWindow.append($('<div>').attr('id', containerId)); + autoplay = (this.okToPlay) ? 1 : 0; - if (this.prefSign === 1) { - // sign window is on. Go ahead and position it and show it - this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); - } - else { - this.$signWindow.hide(); - } + this.youTubeSignPlayer = new YT.Player(containerId, { + videoId: this.getYouTubeId(this.signYoutubeId), + host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', + playerVars: { + autoplay: autoplay, + cc_lang_pref: this.captionLang, + cc_load_policy: 0, + controls: 0, + disableKb: 1, + enablejsapi: 1, + hl: this.lang, + iv_load_policy: 3, + origin: window.location.origin, + playsinline: this.playsInline, + rel: 0, + start: this.startTime + }, + events: { + onReady: function (player) { + player.target.mute(); + player.target.unloadModule( 'captions' ); + thisObj.youTubeSignPlayerReady = true; + + deferred.resolve(); + }, + onError: function (x) { + deferred.reject(); + }, + onStateChange: function (x) { + thisObj.getPlayerState().then(function() { + }); + }, + onApiChange: function() { + }, + onPlaybackQualityChange: function () { + }, + } + }); + + return promise; }; })(jQuery); (function ($) { - // Look up ISO 639-1 language codes to be used as subtitle labels - // In some instances "name" has been trunctation for readability - // Sources: - // http://stackoverflow.com/questions/3217492/list-of-language-codes-in-yaml-or-json/4900304#4900304 - // https://www.venea.net/web/culture_code var isoLangs = { "ab":{ @@ -16802,86 +13033,89 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getLanguageName = function (key,whichName) { - // return language name associated with lang code "key" - // whichName is either "English" or "local" (i.e., native name) - var lang, code, subTag; + var lang, code, subTag; lang = isoLangs[key.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName; - } - else { - return lang.name; - } - } - else if (key.includes('-')) { + if (lang) { + return (whichName === 'local') ? lang.nativeName : lang.name; + } else if (key.includes('-')) { code = key.substring(0,2); - subTag = key.substring(3); - lang = isoLangs[code.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName + ' (' + subTag + ')'; - } - else { - return lang.name + ' (' + subTag + ')'; - } + subTag = key.substring(3); + lang = isoLangs[code.toLowerCase()]; + if (lang) { + return (whichName === 'local') ? lang.nativeName + ' (' + subTag + ')' : lang.name + ' (' + subTag + ')'; } } - // if all else has failed, use the key as the label return key; }; })(jQuery); (function ($) { AblePlayer.prototype.getSupportedLangs = function() { - // returns an array of languages for which AblePlayer has translation tables - var langs = ['ca','cs','da','de','en','es','fr','he','id','it','ja','nb','nl','pt','pt-br','sv','tr','zh-tw']; + var langs = { + 'ca' : 'Catalan', + 'cs' : 'Czech', + 'da' : 'Danish', + 'de' : 'German', + 'en' : 'English', + 'es' : 'Spanish', + 'fr' : 'French', + 'he' : 'Hebrew', + 'id' : 'Indonesian', + 'it' : 'Italian', + 'ja' : 'Japanese', + 'ms' : 'Malay', + 'nb' : 'Norwegian Bokmål', + 'nl' : 'Dutch', + 'pl' : 'Polish', + 'pt' : 'Portuguese', + 'pt-br' : 'Brazilian Portuguese', + 'sv' : 'Swedish', + 'tr' : 'Turkish', + 'zh-tw' : 'Chinese (Taiwan)' + }; + return langs; }; - AblePlayer.prototype.getTranslationText = function() { + AblePlayer.prototype.translate = function( key, fallback, args = Array() ) { + let translation = ''; + if ( this.tt[ key ] ) { + translation = this.tt[ key ]; + } else { + translation = fallback; + } + if ( args.length > 0 ) { + args.forEach( ( val, index ) => { + let ref = index + 1; + translation = translation.replace( '%' + ref, val ); + }); + } + + return translation; + } - // determine language, then get labels and prompts from corresponding translation var + AblePlayer.prototype.getTranslationText = function() { - var deferred, thisObj, supportedLangs, docLang, msg, translationFile, collapsedLang, i, - similarLangFound; - deferred = $.Deferred(); + var deferred, thisObj, supportedLangs, docLang, translationFile, i, similarLangFound; + deferred = new this.defer(); thisObj = this; - supportedLangs = this.getSupportedLangs(); // returns an array - - if (this.lang) { // a data-lang attribute is included on the media element - if ($.inArray(this.lang,supportedLangs) === -1) { - // the specified language is not supported - if (this.lang.indexOf('-') == 2) { - // this is a localized lang attribute (e.g., fr-CA) - // try the parent language, given the first two characters - if ($.inArray(this.lang.substring(0,2),supportedLangs) !== -1) { - // parent lang is supported. Use that. - this.lang = this.lang.substring(0,2); - } - else { - // the parent language is not supported either - // unable to use the specified language - this.lang = null; - } - } - else { - // this is not a localized language. - // but maybe there's a similar localized language supported - // that has the same parent? - similarLangFound = false; - i = 0; - while (i < supportedLangs.length) { - if (supportedLangs[i].substring(0,2) == this.lang) { - this.lang = supportedLangs[i]; - similarLangFound = true; + supportedLangs = this.getSupportedLangs(); + + if (this.lang) { + if ( Object.hasOwn( supportedLangs,this.lang ) ) { + if ( this.lang.indexOf('-') == 2 ) { + this.lang = ( Object.hasOwn(supportedLangs,this.lang.substring(0,2)) !== -1 ) ? this.lang.substring(0,2) : null; + } else { + similarLangFound = false; + for ( const [key,value] of Object.entries(supportedLangs) ) { + if ( key.substring(0,2) == this.lang ) { + this.lang = supportedLangs[i]; + similarLangFound = true; } - i++; } - if (!similarLangFound) { - // language requested via data-lang is not supported + if ( !similarLangFound ) { this.lang = null; } } @@ -16889,28 +13123,19 @@ if (typeof module !== "undefined" && module.exports) { } if (!this.lang) { - // try the language of the web page, if specified if ($('body').attr('lang')) { docLang = $('body').attr('lang').toLowerCase(); - } - else if ($('html').attr('lang')) { + } else if ($('html').attr('lang')) { docLang = $('html').attr('lang').toLowerCase(); - } - else { + } else { docLang = null; } if (docLang) { - if ($.inArray(docLang,supportedLangs) !== -1) { - // the document language is supported + if ( Object.hasOwn( supportedLangs,docLang ) ) { this.lang = docLang; - } - else { - // the document language is not supported + } else { if (docLang.indexOf('-') == 2) { - // this is a localized lang attribute (e.g., fr-CA) - // try the parent language, given the first two characters - if ($.inArray(docLang.substring(0,2),supportedLangs) !== -1) { - // the parent language is supported. use that. + if ( Object.hasOwn(supportedLangs,docLang.substring(0,2)) ) { this.lang = docLang.substring(0,2); } } @@ -16919,294 +13144,93 @@ if (typeof module !== "undefined" && module.exports) { } if (!this.lang) { - // No supported language has been specified by any means - // Fallback to English this.lang = 'en'; } if (!this.searchLang) { this.searchLang = this.lang; } - translationFile = this.rootPath + 'translations/' + this.lang + '.js'; - $.getJSON(translationFile, function(data) { - // success! - thisObj.tt = data; - deferred.resolve(); - }) - .fail(function() { - - thisObj.provideFallback(); - deferred.fail(); - }) + translationFile = this.rootPath + 'translations/' + this.lang + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + + translationFile = thisObj.rootPath + 'translations/' + thisObj.lang + '.js'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + + thisObj.tt = {}; + thisObj.translationFiles = false; + deferred.resolve(); + }); + }); return deferred.promise(); }; AblePlayer.prototype.getSampleDescriptionText = function() { + if ( ! this.translationFiles ) { + this.sampleText = []; + let translation = { 'lang':'en', 'text': this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) }; + this.sampleText.push(translation); + } else { + var thisObj, supportedLangs, thisLang, translationFile, thisText, translation; + + supportedLangs = this.getSupportedLangs(); + thisObj = this; - // Create an array of sample description text in all languages - // This needs to be readily available for testing different voices - // in the Description Preferences dialog - var thisObj, supportedLangs, i, thisLang, translationFile, thisText, translation; - - supportedLangs = this.getSupportedLangs(); - - thisObj = this; - - this.sampleText = []; - for (i=0; i < supportedLangs.length; i++) { - translationFile = this.rootPath + 'translations/' + supportedLangs[i] + '.js'; - $.getJSON(translationFile, thisLang, (function(thisLang) { - return function(data) { - thisText = data.sampleDescriptionText; - translation = {'lang':thisLang, 'text': thisText}; - thisObj.sampleText.push(translation); - }; - }(supportedLangs[i])) // pass lang to callback function - ); + this.sampleText = []; + for ( const [key,value] of Object.entries(supportedLangs) ) { + translationFile = this.rootPath + 'translations/' + key + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisText = data.sampleDescriptionText; + translation = {'lang':thisLang, 'text': thisText}; + thisObj.sampleText.push(translation); + }); + } } }; })(jQuery); -(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); - -/! Copyright (c) 2014 - Paul Tavares - purtuga - @paul_tavares - MIT License / -;(function($){ - - /** - * Delays the execution of a function until an expression returns true. - * The expression is checked every 100 milliseconds for as many tries - * as defined in in the attempts option - * - * @param {Object} options - * @param {Function} options.when - * Function to execute on every interval. - * Must return true (boolean) in order for - * options.do to be executed. - * @param {Function} [options.exec] - * Function to be executed once options.when() - * returns true. - * @param {Interger} [options.interval=100] - * How long to wait in-between tries. - * @param {Interger} [options.attempts=100] - * How many tries to use before its considered - * a failure. - * @param {Interger} [options.delayed=0] - * Number of miliseconds to wait before execution - is started. Default is imediately. - * - * @return {jQuery.Promise} - * - * @example - * - * $.doWhen({ - * when: function(){ - * return false; - * }, - * exec: function(){ - * alert("never called given false response on when param!"); - * } - * }) - * .fail(function(){ - * alert('ALERT: FAILED CONDITION'); - * }) - * .then(function(){ - * alert("resolved."); - * }); - * - / - $.doWhen = function(options) { - - return $.Deferred(function(dfd){ - - var opt = $.extend({}, { - when: null, - exec: function(){}, - interval: 100, - attempts: 100, - delayed: 0 - }, - options, - { - checkId: null - }), - startChecking = function(){ - - // Check condition now and if true, then resolve object - if (opt.when() === true) { - - opt.exec.call(dfd.promise()); - dfd.resolve(); - return; - - } - - // apply minimal UI and hide the overlay - opt.checkId = setInterval(function(){ - - if (opt.attempts === 0) { - - clearInterval(opt.checkId); - dfd.reject(); - - } else { - - --opt.attempts; - - if (opt.when() === true) { - - opt.attempts = 0; - clearInterval(opt.checkId); - opt.exec.call(dfd.promise()); - dfd.resolve(); - - } - - } - - }, opt.interval); - - }; - - if (opt.delayed > 0) { - - setTimeout(startChecking, Number(opt.delayed)); - - } else { - - startChecking(); - - } - - }).promise(); - - }; - -})(jQuery); -/ 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; + var thisObj, $heading, $instructions, $p1, $p2, $ul, $li1, $li2, $li3, + $fieldset, $legend, i, $radioDiv, radioId, $label, $radio, $saveButton, $savedTable; thisObj = this; - if ($('#able-vts').length) { - // Page includes a container for a VTS instance - - // Are they qualifying tracks? + if ( null !== document.getElementById( 'able-vts' ) ) { 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 + let heading = this.translate( 'vtsHeading', 'Video Transcript Sorter' ); + $heading = $('<h2>').text( heading ); $('#able-vts').append($heading); - // Inject an empty div for writing messages this.$vtsAlert = $('<div>',{ 'id': 'able-vts-alert', 'aria-live': 'polite', @@ -17214,29 +13238,26 @@ if (typeof module !== "undefined" && module.exports) { }) $('#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:'); + $p1 = $('<p>').text( this.translate( 'vtsInstructions1', 'Use the Video Transcript Sorter to modify text tracks:' ) ); $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.'); + $li1 = $('<li>').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 = $('<li>').text( this.translate( 'vtsInstructions3', 'Modify content or start/end times (all are directly editable within the table).' ) ); + $li3 = $('<li>').text( this.translate( 'vtsInstructions4', 'Add new content, such as chapters or descriptions.' ) ); + $p2 = $('<p>').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 = $('<fieldset>'); - $legend = $('<legend>').text('Select a language'); // TODO: Localize this - $fieldset.append($legend) + $legend = $('<legend>').text( this.translate( 'vtsSelectLanguage', 'Select a language' ) ); + $fieldset.append($legend); + $fieldWrapper = $( '<div class="vts-lang-selector"></div>' ); 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', @@ -17249,35 +13270,27 @@ if (typeof module !== "undefined" && module.exports) { 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: - // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; - // TODO: if using this be sure to add lang attr to <div> (see above) }).text(this.getLanguageName(this.langs[i])); $radioDiv.append($radio,$label); - $fieldset.append($radioDiv); + $fieldWrapper.append($radioDiv); } + $fieldset.append( $fieldWrapper ); $('#able-vts').append($fieldset); - - // Inject a 'Save Changes' button + let vtsSave = this.translate( 'vtsSave', 'Generate new .vtt content' ); $saveButton = $('<button>',{ 'type': 'button', 'id': 'able-vts-save', 'value': 'save' - }).text('Save Changes'); // TODO: Localize this + }).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, i, closestKind; + var kindOptions, beforeEditing, editedCell, editedContent, i; kindOptions = ['captions','chapters','descriptions','subtitles']; $('td[contenteditable="true"]').on('focus',function() { beforeEditing = $(this).text(); @@ -17286,61 +13299,43 @@ if (typeof module !== "undefined" && module.exports) { 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') { + } else if (editedContent.substring(0,1) === 'd') { $(this).text('descriptions'); - } - else if (editedContent.substring(0,2) === 'ch') { + } else if (editedContent.substring(0,2) === 'ch') { $(this).text('chapters'); - } - else { - // whatever else they types, assume 'captions' + } else { $(this).text('captions'); } } - } - else if (editedCell === 2 || editedCell === 3) { - // start or end time - // ensure proper formatting (with 3 decimal places) + } else if (editedCell === 2 || editedCell === 3) { $(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 + $(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('Save Changes'); // TODO: Localize this + } else { + $(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('Cancelling saving. Any edits you made have been restored in the VTS table.'); // TODO: Localize this + thisObj.showVtsAlert( thisObj.translate( 'vtsCancel', 'Cancelling saving. Any edits you made have been restored in the VTS table.' ) ); } }); } @@ -17349,10 +13344,6 @@ if (typeof module !== "undefined" && module.exports) { 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) - - // Called from tracks.js var srcFile, vtsCues; srcFile = this.getFilenameFromPath(src); @@ -17370,27 +13361,17 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getFilenameFromPath = function(path) { var lastSlash; - lastSlash = path.lastIndexOf('/'); - if (lastSlash === -1) { - // there are no slashes in path. - return path; - } - else { - return path.substring(lastSlash+1); - } + return (lastSlash === -1) ? path : path.substring(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; }; @@ -17403,10 +13384,8 @@ if (typeof module !== "undefined" && module.exports) { 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; @@ -17414,15 +13393,11 @@ if (typeof module !== "undefined" && module.exports) { 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 + } else { content += nextRow; } - } - else { + } else { blankRow = true; } j++; @@ -17432,10 +13407,9 @@ if (typeof module !== "undefined" && module.exports) { 'end': timeParts[2], 'content': content }); - i = j; //skip ahead + i = j; } - } - else { + } else { i++; } } @@ -17444,37 +13418,21 @@ if (typeof module !== "undefined" && module.exports) { 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; - } + 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 + } else if (lastPart.length < 3) { while (lastPart.length < 3) { lastPart += '0'; } @@ -17485,12 +13443,10 @@ if (typeof module !== "undefined" && module.exports) { 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; + 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(); } @@ -17498,10 +13454,16 @@ if (typeof module !== "undefined" && module.exports) { $table = $('<table>',{ 'lang': lang }); - $tr = $('<tr>',{ - 'lang': 'en' // TEMP, until header row is localized - }); - headers = ['Row #','Kind','Start','End','Content','Actions']; // TODO: Localize this + $thead = $( '<thead>' ); + $tr = $( '<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 = $('<th>', { 'scope': 'col' @@ -17511,9 +13473,9 @@ if (typeof module !== "undefined" && module.exports) { } $tr.append($th); } - $table.append($tr); + $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; @@ -17522,35 +13484,29 @@ if (typeof module !== "undefined" && module.exports) { '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 + }).text(rows[i].content); $tr.append($td); - // Actions $td = this.addVtsActionButtons(rowNum,rows.length); $tr.append($td); @@ -17558,16 +13514,12 @@ if (typeof module !== "undefined" && module.exports) { } $('#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>'); @@ -17603,12 +13555,10 @@ if (typeof module !== "undefined" && module.exports) { $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') { + } else if (button === 'down') { if (rowNum < numRows) { $button = $('<button>',{ 'id': 'able-vts-button-down-' + rowNum, @@ -17636,13 +13586,10 @@ if (typeof module !== "undefined" && module.exports) { $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 + } else if (button === 'insert') { $button = $('<button>',{ 'id': 'able-vts-button-insert-' + rowNum, 'title': 'Insert row below', @@ -17672,12 +13619,9 @@ if (typeof module !== "undefined" && module.exports) { $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 + } else if (button === 'delete') { $button = $('<button>',{ 'id': 'able-vts-button-delete-' + rowNum, 'title': 'Delete row ', @@ -17715,7 +13659,6 @@ if (typeof module !== "undefined" && module.exports) { $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); } @@ -17725,14 +13668,11 @@ if (typeof module !== "undefined" && module.exports) { 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); @@ -17742,24 +13682,20 @@ if (typeof module !== "undefined" && module.exports) { 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; + var credit + = 'Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a>' + + ' from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a>' + + ' are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a>' + ; + return '<div id="able-vts-icon-credit">' + credit + '</div>'; }; 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; } } @@ -17768,15 +13704,11 @@ if (typeof module !== "undefined" && module.exports) { 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, @@ -17789,7 +13721,6 @@ if (typeof module !== "undefined" && module.exports) { } } } - // Now sort cues by start time cues.sort(function(a,b) { return a.start > b.start ? 1 : -1; }); @@ -17799,54 +13730,41 @@ if (typeof module !== "undefined" && module.exports) { 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 + } else if (action == 'down') { this.moveRow(rowNum,'down'); - } - else if (action == 'insert') { - // insert a row below + } else if (action == 'insert') { this.insertRow(rowNum); - } - else if (action == 'delete') { - // delete the row + } else if (action == 'delete') { 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; + 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 + numRows = $rows.length - 1; 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, @@ -17856,9 +13774,7 @@ if (typeof module !== "undefined" && module.exports) { 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']; @@ -17871,48 +13787,40 @@ if (typeof module !== "undefined" && module.exports) { $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 + $rows.eq(i).attr('id','able-vts-row-' + nextRowNum); + $rows.eq(i).find('td').eq(0).text(nextRowNum); $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 + let newAlert = this.translate( 'vtsNewRow', 'A new row %1 has been inserted.', [ newRowNum ] ); + this.showVtsAlert( newAlert ); - // Place focus in new select field - $select.focus(); + $select.trigger('focus'); }; @@ -17922,27 +13830,25 @@ if (typeof module !== "undefined" && module.exports) { $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 + $rows = $table.find('tr'); + numRows = $rows.length - 1; - // 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 + $rows.eq(i).attr('id','able-vts-row-' + nextRowNum); + $rows.eq(i).find('td').eq(0).text(nextRowNum); $buttons = $rows.eq(i).find('button'); this.updateVtsActionButtons($buttons,nextRowNum); } - // Announce the deletion - this.showVtsAlert('Row ' + rowNum + ' has been deleted'); // TODO: Localize this + let newAlert = this.translate( 'vtsDeletedRow', 'Row %1 has been deleted.', [ rowNum ] ); + this.showVtsAlert( newAlert ); }; AblePlayer.prototype.moveRow = function(rowNum,direction) { - // swap two rows - var $rows, $thisRow, otherRowNum, $otherRow, newTimes, msg; + var $rows, $thisRow, otherRowNum, $otherRow, msg; $rows = $('#able-vts table').find('tr'); $thisRow = $('#able-vts table').find('tr').eq(rowNum); @@ -17950,13 +13856,11 @@ if (typeof module !== "undefined" && module.exports) { otherRowNum = parseInt(rowNum) - 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.before($thisRow); - } - else if (direction == 'down') { + } 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); @@ -17964,80 +13868,42 @@ if (typeof module !== "undefined" && module.exports) { $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; + 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); - 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'; - } + 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); - 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; - } + 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 + } else { prevRowNum = null; $prevRow = null; prevKind = null; @@ -18045,25 +13911,13 @@ if (typeof module !== "undefined" && module.exports) { 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; - } + 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 + } else { nextRowNum = null; $nextRow = null; nextKind = null; @@ -18073,91 +13927,48 @@ if (typeof module !== "undefined" && module.exports) { 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) + end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (parseFloat(start) + minDuration[kind]).toFixed(3); + } else if (prevKind === 'chapters') { 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 + end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (parseFloat(start) + minDurartion[kind]).toFixed(3); + } else if (prevKind === 'descriptions') { 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)) + } else { if (prevStart) { - // this is not the first row. if (prevStart < start) { if (start < nextStart) { - // No change is necessary - } - else { - // nextStart needs to be incremented + } else { 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 + } else { start = (parseFloat(prevStart) + minDuration[prevKind]).toFixed(3); end = (parseFloat(start) + minDuration[kind]).toFixed(3); } - } - else { - // this is the first row + } else { if (start < nextStart) { - // No change is necessary - } - else { - // nextStart needs to be incremented + } else { 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) { @@ -18172,36 +13983,29 @@ if (typeof module !== "undefined" && module.exports) { 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 + } else { 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 - this.$vtsAlert.text(message).show().delay(3000).fadeOut('slow'); + 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'); @@ -18218,7 +14022,7 @@ if (typeof module !== "undefined" && module.exports) { 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(); + content = $rows.eq(i).find('td').eq(4)[0].innerText; if (start !== undefined && end !== undefined) { vtt[kind] += start + ' --> ' + end + "\n"; if (content !== 'undefined') { @@ -18236,7 +14040,6 @@ if (typeof module !== "undefined" && module.exports) { 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) } } @@ -18246,14 +14049,13 @@ if (typeof module !== "undefined" && module.exports) { var $heading, filename, $p, pText, $textarea; - $heading = $('<h3>').text(kind.charAt(0).toUpperCase() + kind.slice(1)); + $heading = $('<h3>').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 += '<em>' + kind + '</em> WebVTT file (<strong>' + filename + '</strong>).'; - } - else { + } else { pText += 'into a new ' + this.getLanguageName(lang) + ' <em>' + kind + '</em> WebVTT file.'; } $p = $('<p>',{ @@ -18265,74 +14067,48 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); - (function ($) { + AblePlayer.prototype.initVimeoPlayer = function () { - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; + var thisObj, deferred, promise, containerId, vimeoId, options; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); containerId = this.mediaId + '_vimeo'; - // add container to which Vimeo player iframe will be appended this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // if a described version is available && user prefers desription - // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } + vimeoId = (this.vimeoDescId && this.prefDesc) ? this.vimeoDescId : this.vimeoId; + this.activeVimeoId = vimeoId; - // Notes re. Vimeo Embed Options: - // If a video is owned by a user with a paid Plus, PRO, or Business account, - // setting the "controls" option to "false" will hide the default controls, without hiding captions. - // This is a new option from Vimeo; previously used "background:true" to hide the controller, - // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - if (this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } + autoplay = (this.okToPlay) ? 'true' : 'false'; - if (this.playerWidth) { - if (this.vimeoUrlHasParams) { - // use url param, not id + if (this.playerWidth) { + if (this.vimeoUrlHasParams) { options = { url: vimeoId, width: this.playerWidth, controls: false } - } - else { + } else { options = { id: vimeoId, width: this.playerWidth, controls: false } } - } - else { - // initialize without width & set width later - if (this.vimeoUrlHasParams) { + } else { + if (this.vimeoUrlHasParams) { options = { url: vimeoId, controls: false } - } - else { + } else { options = { id: vimeoId, controls: false @@ -18343,44 +14119,28 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer = new Vimeo.Player(containerId, options); this.vimeoPlayer.ready().then(function() { - // add tabindex -1 on iframe so vimeo frame cannot be focused on $('#'+containerId).children('iframe').attr({ 'tabindex': '-1', 'aria-hidden': true }); - // get video's intrinsic size and initiate player dimensions - thisObj.vimeoPlayer.getVideoWidth().then(function(width) { - if (width) { - // also get height - thisObj.vimeoPlayer.getVideoHeight().then(function(height) { - if (height) { - thisObj.resizePlayer(width,height); + thisObj.vimeoPlayer.getVideoWidth().then(function(width) { + if (width) { + thisObj.vimeoPlayer.getVideoHeight().then(function(height) { + if (height) { + thisObj.resizePlayer(width,height); } - }); + }); } }).catch(function(error) { - // an error occurred getting height or width - // TODO: Test this to see how gracefully it organically recovers }); if (!thisObj.hasPlaylist) { - // remove the media element, since Vimeo replaces that with its own element in an iframe - // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() thisObj.$media.remove(); - // define variables that will impact player setup - // vimeoSupportsPlaybackRateChange - // changing playbackRate is only supported if the video is hosted on a Pro or Business account - // unfortunately there is no direct way to query for that information. - // this.vimeoPlayer.getPlaybackRate() returns a value, regardless of account type - // This is a hack: - // Attempt to change the playbackRate. If it results in an error, assume changing playbackRate is not supported. - // Supported playbackRate values are 0.5 to 2. thisObj.vimeoPlaybackRate = 1; thisObj.vimeoPlayer.setPlaybackRate(thisObj.vimeoPlaybackRate).then(function(playbackRate) { - // playback rate was set thisObj.vimeoSupportsPlaybackRateChange = true; }).catch(function(error) { thisObj.vimeoSupportsPlaybackRateChange = false; @@ -18394,11 +14154,10 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPaused = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getPaused().then(function (paused) { - // paused is Boolean deferred.resolve(paused); }); @@ -18408,11 +14167,10 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoEnded = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getEnded().then(function (ended) { - // ended is Boolean deferred.resolve(ended); }); @@ -18421,11 +14179,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoState = function () { - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; + var deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - thisObj = this; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); promises = []; @@ -18449,41 +14205,29 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoCaptionTracks = function () { - // get data via Vimeo Player API, and push data to this.captions - // Note: Vimeo doesn't expose the caption cues themselves - // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - var thisObj, i, trackId, isDefaultTrack; + var thisObj, i, isDefaultTrack; thisObj = this; this.vimeoPlayer.getTextTracks().then(function(tracks) { - // each Vimeo track includes the following: - // label (local name of the language) - // language (2-character code) - // kind (captions or subtitles, as declared by video owner) - // mode ('disabled' or 'showing') if (tracks.length) { - // create a new button for each caption track for (i=0; i<tracks.length; i++) { thisObj.hasCaptions = true; if (thisObj.prefCaptions === 1) { thisObj.captionsOn = true; - } - else { + } else { thisObj.captionsOn = false; } - // assign the default track based on language of the player if (tracks[i]['language'] === thisObj.lang) { isDefaultTrack = true; - } - else { + } else { isDefaultTrack = false; } thisObj.tracks.push({ @@ -18491,18 +14235,16 @@ if (typeof module !== "undefined" && module.exports) { 'language': tracks[i]['language'], 'label': tracks[i]['label'], 'def': isDefaultTrack - }); + }); } - thisObj.captions = thisObj.tracks; + thisObj.captions = thisObj.tracks; thisObj.hasCaptions = true; - // setupPopups again with new captions array, replacing original thisObj.setupPopups('captions'); deferred.resolve(); - } - else { + } else { thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; + thisObj.usingVimeoCaptions = false; deferred.resolve(); } }); @@ -18512,69 +14254,48 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPosterUrl = function (vimeoId, width) { - // this is a placeholder, copied from getYouTubePosterUrl() - // Vimeo doesn't seem to have anything similar, - // nor does it seem to be possible to get the poster via the Vimeo API - // Vimeo playlist support (with thumbnail images) may require use of data-poster + var url = 'http://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId, imageUrl = ''; - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 + fetch( url ).then( response => { - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; - }; + return response.json(); + }) + .then( json => { + imageUrl = json.thumbnail_url; + }) + .catch( error => { + if (thisObj.debug) { + + } + }); + + return imageUrl; + }; AblePlayer.prototype.getVimeoId = function (url) { - - // return a Vimeo ID, extracted from a full Vimeo URL - // Supported URL patterns are anything containing 'vimeo.com' - // and ending with a '/' followed by the ID. - // (Vimeo IDs do not have predicatable lengths) - - // Update: If URL contains parameters, return the full url - // This will need to be passed to the Vimeo Player API - // as a url parameter, not as an id parameter - this.vimeoUrlHasParams = false; - - var idStartPos, id; - - if (typeof url === 'number') { - // this is likely already a vimeo ID - return url; - } - else if (url.indexOf('vimeo.com') !== -1) { - // this is a full Vimeo URL - if (url.indexOf('?') !== -1) { - // URL contains parameters - this.vimeoUrlHasParams = true; - return url; - } - else { - url = url.trim(); - idStartPos = url.lastIndexOf('/') + 1; - id = url.substring(idStartPos); - return id; - } - } - else { - return url; - } -}; + + + this.vimeoUrlHasParams = false; + + if (typeof url === 'number') { + return url; + } else { + urlObject = new URL(url); + } + if ( 'vimeo.com' === urlObject.hostname || 'player.vimeo.com' === urlObject.hostname ) { + if ( '' !== urlObject.search ) { + this.vimeoUrlHasParams = true; + return url; + } else { + if ( 'player.vimeo.com' === urlObject.hostname ) { + return urlObject.pathname.replace( '/video/', '' ); + } else { + return urlObject.pathname.replace( '/', '' ); + } + } + } else { + return url; + } + }; })(jQuery); diff --git a/src/build/ableplayer.js b/src/build/ableplayer.js index 7a61ad5..dbe8165 100644 --- a/src/build/ableplayer.js +++ b/src/build/ableplayer.js @@ -1,5 +1,5 @@ -/! ableplayer V4.5.1 with DOMPurify included / -/! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE / +/! ableplayer V4.8.0 with DOMPurify included / +/! @license DOMPurify 3.3.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.1/LICENSE / (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : @@ -34,12 +34,18 @@ }; } if (!apply) { - apply = function apply(fun, thisValue, args) { - return fun.apply(thisValue, args); + apply = function apply(func, thisArg) { + for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { + args[_key - 2] = arguments[_key]; + } + return func.apply(thisArg, args); }; } if (!construct) { - construct = function construct(Func, args) { + construct = function construct(Func) { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } return new Func(...args); }; } @@ -65,8 +71,11 @@ / function unapply(func) { return function (thisArg) { - for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; + if (thisArg instanceof RegExp) { + thisArg.lastIndex = 0; + } + for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) { + args[_key3 - 1] = arguments[_key3]; } return apply(func, thisArg, args); }; @@ -77,12 +86,12 @@ * @param func - The constructor function to be wrapped and called. * @returns A new function that constructs an instance of the given constructor function with the provided arguments. */ - function unconstruct(func) { + function unconstruct(Func) { return function () { - for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { - args[_key2] = arguments[_key2]; + for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { + args[_key4] = arguments[_key4]; } - return construct(func, args); + return construct(Func, args); }; } /** @@ -181,8 +190,8 @@ return fallbackValue; } - const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']); - const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']); + const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'search', 'section', 'select', 'shadow', 'slot', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']); + const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'enterkeyhint', 'exportparts', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'inputmode', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'part', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']); const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']); // List of SVG elements that are disallowed by default. // We still need to know them so that we can do namespace @@ -195,8 +204,8 @@ const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']); const text = freeze(['#text']); - const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']); - const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']); + const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'exportparts', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inert', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'part', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']); + const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'mask-type', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']); const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']); const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']); @@ -206,7 +215,7 @@ const TMPLIT_EXPR = seal(/\$\{[\w\W]/gm); // eslint-disable-line unicorn/better-regex const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]+$/); // eslint-disable-line no-useless-escape const ARIA_ATTR = seal(/^aria-[\-\w]+$/); // eslint-disable-line no-useless-escape - const IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i // eslint-disable-line no-useless-escape + const IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i // eslint-disable-line no-useless-escape ); const IS_SCRIPT_OR_DATA = seal(/^(?:\w+script|data):/i); const ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g // eslint-disable-line no-control-regex @@ -303,7 +312,7 @@ function createDOMPurify() { let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal(); const DOMPurify = root => createDOMPurify(root); - DOMPurify.version = '3.2.4'; + DOMPurify.version = '3.3.1'; DOMPurify.removed = []; if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) { // Not running in a browser, provide a factory function @@ -414,6 +423,21 @@ let FORBID_TAGS = null; / Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) / let FORBID_ATTR = null; + / Config object to store ADD_TAGS/ADD_ATTR functions (when used as functions) / + const EXTRA_ELEMENT_HANDLING = Object.seal(create(null, { + tagCheck: { + writable: true, + configurable: false, + enumerable: true, + value: null + }, + attributeCheck: { + writable: true, + configurable: false, + enumerable: true, + value: null + } + })); / Decide if ARIA attributes are okay / let ALLOW_ARIA_ATTR = true; / Decide if custom data attributes are okay / @@ -542,8 +566,8 @@ URI_SAFE_ATTRIBUTES = objectHasOwnProperty(cfg, 'ADD_URI_SAFE_ATTR') ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR, transformCaseFunc) : DEFAULT_URI_SAFE_ATTRIBUTES; DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS, transformCaseFunc) : DEFAULT_DATA_URI_TAGS; FORBID_CONTENTS = objectHasOwnProperty(cfg, 'FORBID_CONTENTS') ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS; - FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : {}; - FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : {}; + FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : clone({}); + FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : clone({}); USE_PROFILES = objectHasOwnProperty(cfg, 'USE_PROFILES') ? cfg.USE_PROFILES : false; ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true @@ -606,16 +630,24 @@ } / Merge configuration parameters / if (cfg.ADD_TAGS) { - if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) { - ALLOWED_TAGS = clone(ALLOWED_TAGS); + if (typeof cfg.ADD_TAGS === 'function') { + EXTRA_ELEMENT_HANDLING.tagCheck = cfg.ADD_TAGS; + } else { + if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) { + ALLOWED_TAGS = clone(ALLOWED_TAGS); + } + addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc); } - addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc); } if (cfg.ADD_ATTR) { - if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) { - ALLOWED_ATTR = clone(ALLOWED_ATTR); + if (typeof cfg.ADD_ATTR === 'function') { + EXTRA_ELEMENT_HANDLING.attributeCheck = cfg.ADD_ATTR; + } else { + if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) { + ALLOWED_ATTR = clone(ALLOWED_ATTR); + } + addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc); } - addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc); } if (cfg.ADD_URI_SAFE_ATTR) { addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc); @@ -626,6 +658,12 @@ } addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc); } + if (cfg.ADD_FORBID_CONTENTS) { + if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) { + FORBID_CONTENTS = clone(FORBID_CONTENTS); + } + addToSet(FORBID_CONTENTS, cfg.ADD_FORBID_CONTENTS, transformCaseFunc); + } / Add #text in case KEEP_CONTENT is set to true / if (KEEP_CONTENT) { ALLOWED_TAGS['#text'] = true; @@ -908,7 +946,7 @@ allowedTags: ALLOWED_TAGS }); / Detect mXSS attempts abusing namespace confusion / - if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w]/g, currentNode.innerHTML) && regExpTest(/<[/\w]/g, currentNode.textContent)) { + if (SAFE_FOR_XML && currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w!]/g, currentNode.innerHTML) && regExpTest(/<[/\w!]/g, currentNode.textContent)) { _forceRemove(currentNode); return true; } @@ -923,7 +961,7 @@ return true; } / Remove element if anything forbids its presence / - if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) { + if (!(EXTRA_ELEMENT_HANDLING.tagCheck instanceof Function && EXTRA_ELEMENT_HANDLING.tagCheck(tagName)) && (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName])) { / Check if we have a custom element to handle / if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) { if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) { @@ -995,12 +1033,12 @@ (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data--attributes) XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804) We don't need to check the value; it's always URI safe. / - if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) { + if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (EXTRA_ELEMENT_HANDLING.attributeCheck instanceof Function && EXTRA_ELEMENT_HANDLING.attributeCheck(lcName, lcTag)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) { if ( // First condition does a very basic check if a) it's basically a valid custom element tagname AND // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck - _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) || + _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName, lcTag)) || // Alternative, second condition checks if it's an `is`-attribute, AND // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else { @@ -1060,7 +1098,8 @@ value: attrValue } = attr; const lcName = transformCaseFunc(name); - let value = name === 'value' ? attrValue : stringTrim(attrValue); + const initValue = attrValue; + let value = name === 'value' ? initValue : stringTrim(initValue); / Execute a hook if present / hookEvent.attrName = lcName; hookEvent.attrValue = value; @@ -1078,7 +1117,12 @@ value = SANITIZE_NAMED_PROPS_PREFIX + value; } / Work around a security issue with comments inside attributes / - if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title)/i, value)) { + if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title|textarea)/i, value)) { + _removeAttribute(name, currentNode); + continue; + } + / Make sure we cannot easily use animated hrefs, even if animations are allowed / + if (lcName === 'attributename' && stringMatch(value, 'href')) { _removeAttribute(name, currentNode); continue; } @@ -1086,10 +1130,9 @@ if (hookEvent.forceKeepAttr) { continue; } - / Remove attribute / - _removeAttribute(name, currentNode); / Did the hooks approve of the attribute? / if (!hookEvent.keepAttr) { + _removeAttribute(name, currentNode); continue; } / Work around a security issue in jQuery 3.0 / @@ -1106,6 +1149,7 @@ / Is `value` valid for this attribute? / const lcTag = transformCaseFunc(currentNode.nodeName); if (!_isValidAttribute(lcTag, lcName, value)) { + _removeAttribute(name, currentNode); continue; } / Handle attributes that require Trusted Types / @@ -1126,19 +1170,23 @@ } } / Handle invalid data-* attribute set by try-catching it / - try { - if (namespaceURI) { - currentNode.setAttributeNS(namespaceURI, name, value); - } else { - / Fallback to setAttribute() for browser-unrecognized namespaces e.g. "x-schema". / - currentNode.setAttribute(name, value); - } - if (_isClobbered(currentNode)) { - _forceRemove(currentNode); - } else { - arrayPop(DOMPurify.removed); + if (value !== initValue) { + try { + if (namespaceURI) { + currentNode.setAttributeNS(namespaceURI, name, value); + } else { + / Fallback to setAttribute() for browser-unrecognized namespaces e.g. "x-schema". / + currentNode.setAttribute(name, value); + } + if (_isClobbered(currentNode)) { + _forceRemove(currentNode); + } else { + arrayPop(DOMPurify.removed); + } + } catch (_) { + _removeAttribute(name, currentNode); } - } catch (_) {} + } } / Execute a hook if present / _executeHooks(hooks.afterSanitizeAttributes, currentNode, null); @@ -1346,39 +1394,6 @@ })); -/ - // JavaScript for Able Player - - // HTML5 Media API: - // http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement - // http://dev.w3.org/html5/spec-author-view/video.html - - // W3C API Test Page: - // http://www.w3.org/2010/05/video/mediaevents.html - - // YouTube Player API for iframe Embeds - https://developers.google.com/youtube/iframe_api_reference - - // YouTube Player Parameters - https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 - - // YouTube Data API - https://developers.google.com/youtube/v3 - - // Vimeo Player API - https://github.com/vimeo/player.js - - // Google API Client Library for JavaScript - https://developers.google.com/api-client-library/javascript/dev/dev_jscript - - // Google API Explorer: YouTube services and methods - https://developers.google.com/apis-explorer/#s/youtube/v3/ - - // Web Speech API (Speech Synthesis) - // https://w3c.github.io/speech-api/#tts-section - // https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis -/ - /jslint node: true, browser: true, white: true, indent: 2, unparam: true, plusplus: true / /global $, jQuery */ "use strict"; @@ -1388,7 +1403,6 @@ var AblePlayerInstances = []; (function ($) { $(function () { - $('video, audio').each(function (index, element) { if ($(element).data('able-player') !== undefined) { AblePlayerInstances.push(new AblePlayer($(this),$(element))); @@ -1409,12 +1423,13 @@ var AblePlayerInstances = []; } }); - // Construct an AblePlayer object - // Parameters are: - // media - jQuery selector or element identifying the media. + /** + * Construct the AblePlayer object. + * + * @param object media jQuery selector or element identifying the media. + / window.AblePlayer = function(media) { - var thisObj = this; // Keep track of the last player created for use with global events. @@ -1426,80 +1441,49 @@ var AblePlayerInstances = []; return; } - /////////////////////////////// - // // Default variables assignment - // - /////////////////////////////// - // The following variables CAN be overridden with HTML attributes // autoplay (Boolean; if present always resolves to true, regardless of value) if ($(media).attr('autoplay') !== undefined) { - this.autoplay = true; // this value remains constant + this.autoplay = true; // this value remains constant this.okToPlay = true; // this value can change dynamically - } - else { + } else { this.autoplay = false; this.okToPlay = false; } - + // loop (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('loop') !== undefined) { - this.loop = true; - } - else { - this.loop = false; - } + this.loop = ($(media).attr('loop') !== undefined) ? true : false; // playsinline (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('playsinline') !== undefined) { - this.playsInline = '1'; // this value gets passed to YT.Player contructor in youtube.js - } - else { - this.playsInline = '0'; - } + this.playsInline = ($(media).attr('playsinline') !== undefined) ? '1' : '0'; // poster (Boolean, indicating whether media element has a poster attribute) - if ($(media).attr('poster')) { - this.hasPoster = true; - } - else { - this.hasPoster = false; - } + this.hasPoster = ( $(media).attr('poster') || $(media).data('poster') ) ? true : false; - // get height and width attributes, if present - // and add them to variables - // Not currently used, but might be useful for resizing player - if ($(media).attr('width')) { - this.width = $(media).attr('width'); - } - if ($(media).attr('height')) { - this.height = $(media).attr('height'); - } + this.audioPoster = $(media).data('poster'); + this.audioPosterAlt = $(media).data('poster-alt' ); + + // get height and width attributes, if present + // and add them to variables + // Not currently used, but might be useful for resizing player + this.width = $(media).attr('width') ?? 0; + this.height = $(media).attr('height') ?? 0; // start-time - if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) { - this.startTime = $(media).data('start-time'); - } - else { - this.startTime = 0; - } + var startTime = $(media).data('start-time'); + var isNumeric = ( typeof startTime === 'number' || ( typeof startTime === 'string' && value.trim() !== '' && ! isNaN(value) && isFinite( Number(value) ) ) ) ? true : false; + this.startTime = ( startTime !== undefined && isNumeric ) ? startTime : 0; // debug - if ($(media).data('debug') !== undefined && $(media).data('debug') !== false) { - this.debug = true; - } - else { - this.debug = false; - } + this.debug = ($(media).data('debug') !== undefined && $(media).data('debug') !== false) ? true : false; // Path to root directory of Able Player code if ($(media).data('root-path') !== undefined) { // add a trailing slash if there is none this.rootPath = $(media).data('root-path').replace(/\/?$/, '/'); - } - else { + } else { this.rootPath = this.getRootPath(); } @@ -1521,68 +1505,49 @@ var AblePlayerInstances = []; if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) { this.useChaptersButton = false; - } - else { + } else { this.useChaptersButton = true; } - - // Control whether text descriptions are read aloud + + // Control whether text descriptions are read aloud // set to "false" if the sole purpose of the WebVTT descriptions file // is to integrate text description into the transcript - // set to "true" to write description text to a div - // This variable does not* control the method by which description is read. - // For that, see below (this.descMethod) + // set to "true" to write description text to a div + // This variable does not control the method by which description is read. + // For that, see below (this.descMethod) if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) { this.readDescriptionsAloud = false; - } - else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { + } else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { // support both singular and plural spelling of attribute this.readDescriptionsAloud = false; - } - else { + } else { this.readDescriptionsAloud = true; } - // Method by which text descriptions are read - // valid values of data-desc-reader are: - // 'brower' (default) - text-based audio description is handled by the browser, if supported - // 'screenreader' - text-based audio description is always handled by screen readers - // The latter may be preferable by owners of websites in languages that are not well supported - // by the Web Speech API - if ($(media).data('desc-reader') == 'screenreader') { - this.descReader = 'screenreader'; - } - else { - this.descReader = 'browser'; - } - - // Default state of captions and descriptions - // This setting is overridden by user preferences, if they exist - // values for data-state-captions and data-state-descriptions are 'on' or 'off' - if ($(media).data('state-captions') == 'off') { - this.defaultStateCaptions = 0; // off - } - else { - this.defaultStateCaptions = 1; // on by default - } - if ($(media).data('state-descriptions') == 'on') { - this.defaultStateDescriptions = 1; // on - } - else { - this.defaultStateDescriptions = 0; // off by default - } + // setting initial this.descVoices to an empty array + // to be populated later by getBrowserVoices + this.descVoices = []; - // Default setting for prefDescPause - // Extended description (i.e., pausing during description) is on by default - // but this settings give website owners control over that - // since they know the nature of their videos, and whether pausing is necessary - // This setting is overridden by user preferences, if they exist - if ($(media).data('desc-pause-default') == 'off') { - this.defaultDescPause = 0; // off - } - else { - this.defaultDescPause = 1; // on by default - } + // Method by which text descriptions are read + // valid values of data-desc-reader are: + // 'brower' (default) - text-based audio description is handled by the browser, if supported + // 'screenreader' - text-based audio description is always handled by screen readers + // The latter may be preferable by owners of websites in languages that are not well supported + // by the Web Speech API + this.descReader = ($(media).data('desc-reader') == 'screenreader') ? 'screenreader' : 'browser'; + + // Default state of captions and descriptions + // This setting is overridden by user preferences, if they exist + // values for data-state-captions and data-state-descriptions are 'on' or 'off' + this.defaultStateCaptions = ($(media).data('state-captions') == 'off') ? 0 : 1; + this.defaultStateDescriptions = ($(media).data('state-descriptions') == 'on') ? 1 : 0; + + // Default setting for prefDescPause + // Extended description (i.e., pausing during description) is on by default + // but this settings give website owners control over that + // since they know the nature of their videos, and whether pausing is necessary + // This setting is overridden by user preferences, if they exist + this.defaultDescPause = ($(media).data('desc-pause-default') == 'off') ? 0 : 1; // Headings // By default, an off-screen heading is automatically added to the top of the media player @@ -1601,75 +1566,60 @@ var AblePlayerInstances = []; // There are three types of interactive transcripts. // In descending of order of precedence (in case there are conflicting tags), they are: // 1. "manual" - A manually coded external transcript (requires data-transcript-src) - // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div) + // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div & a valid target element) // 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button // If data-include-transcript="false", there is no "popup" transcript - - if ($(media).data('transcript-div') !== undefined && $(media).data('transcript-div') !== "") { - this.transcriptDivLocation = $(media).data('transcript-div'); - } - else { + var transcriptDivLocation = $(media).data('transcript-div'); + if ( transcriptDivLocation !== undefined && transcriptDivLocation !== "" && null !== document.getElementById( transcriptDivLocation ) ) { + this.transcriptDivLocation = transcriptDivLocation; + } else { this.transcriptDivLocation = null; } - if ($(media).data('include-transcript') !== undefined && $(media).data('include-transcript') === false) { - this.hideTranscriptButton = true; - } - else { - this.hideTranscriptButton = null; - } + var includeTranscript = $(media).data('include-transcript'); + this.hideTranscriptButton = ( includeTranscript !== undefined && includeTranscript === false) ? true : false; this.transcriptType = null; if ($(media).data('transcript-src') !== undefined) { this.transcriptSrc = $(media).data('transcript-src'); if (this.transcriptSrcHasRequiredParts()) { this.transcriptType = 'manual'; - } - else { + } else { console.log('ERROR: Able Player transcript is missing required parts'); } - } - else if ($(media).find('track[kind="captions"], track[kind="subtitles"]').length > 0) { + } else if ($(media).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length > 0) { // required tracks are present. COULD automatically generate a transcript - if (this.transcriptDivLocation) { - this.transcriptType = 'external'; - } - else { - this.transcriptType = 'popup'; - } + this.transcriptType = (this.transcriptDivLocation) ? 'external' : 'popup'; } // In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript - // If false (default), line breaks are are removed from transcripts in order to provide a more seamless reading experience + // If false (default), line breaks are are removed from transcripts for a more seamless reading experience // If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem - if ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) { - this.lyricsMode = true; - } - else { - this.lyricsMode = false; - } + this.lyricsMode = ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) ? true : false; - // Transcript Title + // Set Transcript Title if defined explicitly. See transcript.js. if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") { this.transcriptTitle = $(media).data('transcript-title'); } - else { - // do nothing. The default title will be defined later (see transcript.js) + + // Sign Language + // sign language can be a modal (default) or assigned to a div on the page. + var signDivLocation = $(media).data('sign-div'); + if ( signDivLocation !== undefined && signDivLocation !== "" && null !== document.getElementById( signDivLocation ) ) { + this.$signDivLocation = $( '#' + signDivLocation ); + } else { + this.$signDivLocation = null; } // Captions // data-captions-position can be used to set the default captions position // this is only the default, and can be overridden by user preferences // valid values of data-captions-position are 'below' and 'overlay' - if ($(media).data('captions-position') === 'overlay') { - this.defaultCaptionsPosition = 'overlay'; - } - else { // the default, even if not specified - this.defaultCaptionsPosition = 'below'; - } + this.defaultCaptionsPosition = ($(media).data('captions-position') === 'overlay') ? 'overlay' : 'below'; // Chapters - if ($(media).data('chapters-div') !== undefined && $(media).data('chapters-div') !== "") { - this.chaptersDivLocation = $(media).data('chapters-div'); + var chaptersDiv = $(media).data('chapters-div'); + if ( chaptersDiv !== undefined && chaptersDiv !== "") { + this.chaptersDivLocation = chaptersDiv; } if ($(media).data('chapters-title') !== undefined) { @@ -1677,83 +1627,76 @@ var AblePlayerInstances = []; this.chaptersTitle = $(media).data('chapters-title'); } - if ($(media).data('chapters-default') !== undefined && $(media).data('chapters-default') !== "") { - this.defaultChapter = $(media).data('chapters-default'); - } - else { - this.defaultChapter = null; - } + var defaultChapter = $(media).data('chapters-default'); + this.defaultChapter = ( defaultChapter !== undefined && defaultChapter !== "") ? defaultChapter : null; // Slower/Faster buttons // valid values of data-speed-icons are 'animals' (default) and 'arrows' // 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows - if ($(media).data('speed-icons') === 'arrows') { - this.speedIcons = 'arrows'; - } - else { - this.speedIcons = 'animals'; - } + this.speedIcons = ($(media).data('speed-icons') === 'arrows') ? 'arrows' : 'animals'; // Seekbar // valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters' - if ($(media).data('seekbar-scope') === 'chapter' || $(media).data('seekbar-scope') === 'chapters') { - this.seekbarScope = 'chapter'; - } - else { - this.seekbarScope = 'video'; - } + var seekbarScope = $(media).data('seekbar-scope'); + this.seekbarScope = ( seekbarScope === 'chapter' || seekbarScope === 'chapters') ? 'chapter' : 'video'; // YouTube - if ($(media).data('youtube-id') !== undefined && $(media).data('youtube-id') !== "") { - this.youTubeId = this.getYouTubeId($(media).data('youtube-id')); + var youTubeId = $(media).data('youtube-id'); + if ( youTubeId !== undefined && youTubeId !== "") { + this.youTubeId = this.getYouTubeId(youTubeId); + if ( ! this.hasPoster ) { + let poster = this.getYouTubePosterUrl(this.youTubeId,'640'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('youtube-desc-id') !== undefined && $(media).data('youtube-desc-id') !== "") { - this.youTubeDescId = this.getYouTubeId($(media).data('youtube-desc-id')); + var youTubeDescId = $(media).data('youtube-desc-id'); + if ( youTubeDescId !== undefined && youTubeDescId !== "") { + this.youTubeDescId = this.getYouTubeId(youTubeDescId); } - if ($(media).data('youtube-nocookie') !== undefined && $(media).data('youtube-nocookie')) { - this.youTubeNoCookie = true; - } - else { - this.youTubeNoCookie = false; + var youTubeSignId = $(media).data('youtube-sign-src'); + if ( youTubeSignId !== undefined && youTubeSignId !== "") { + this.youTubeSignId = this.getYouTubeId(youTubeSignId); } + var youTubeNoCookie = $(media).data('youtube-nocookie'); + this.youTubeNoCookie = (youTubeNoCookie !== undefined && youTubeNoCookie) ? true : false; + // Vimeo - if ($(media).data('vimeo-id') !== undefined && $(media).data('vimeo-id') !== "") { - this.vimeoId = this.getVimeoId($(media).data('vimeo-id')); + var vimeoId = $(media).data('vimeo-id'); + if ( vimeoId !== undefined && vimeoId !== "") { + this.vimeoId = this.getVimeoId(vimeoId); + if ( ! this.hasPoster ) { + let poster = thisObj.getVimeoPosterUrl(this.vimeoId,'1200'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('vimeo-desc-id') !== undefined && $(media).data('vimeo-desc-id') !== "") { - this.vimeoDescId = this.getVimeoId($(media).data('vimeo-desc-id')); + var vimeoDescId = $(media).data('vimeo-desc-id'); + if ( vimeoDescId !== undefined && vimeoDescId !== "") { + this.vimeoDescId = this.getVimeoId(vimeoDescId); } // Skin // valid values of data-skin are: - // 'legacy' (default), two rows of controls; seekbar positioned in available space within top row - // '2020', all buttons in one row beneath a full-width seekbar - if ($(media).data('skin') == '2020') { - this.skin = '2020'; - } - else { - this.skin = 'legacy'; - } + // '2020' (default as of 4.6), all buttons in one row beneath a full-width seekbar + // 'legacy', two rows of controls; seekbar positioned in available space within top row + this.skin = ($(media).data('skin') == 'legacy') ? 'legacy' : '2020'; - // Size - // width of Able Player is determined using the following order of precedence: - // 1. data-width attribute + // Size + // width of Able Player is determined using the following order of precedence: + // 1. data-width attribute // 2. width attribute (for video or audio, although it is not valid HTML for audio) // 3. Intrinsic size from video (video only, determined later) if ($(media).data('width') !== undefined) { this.playerWidth = parseInt($(media).data('width')); - } - else if ($(media)[0].getAttribute('width')) { - // NOTE: jQuery attr() returns null for all invalid HTML attributes + } else if ($(media)[0].getAttribute('width')) { + // NOTE: jQuery attr() returns null for all invalid HTML attributes // (e.g., width on <audio>) - // but it can be acessed via JavaScript getAttribute() + // but it can be acessed via JavaScript getAttribute() this.playerWidth = parseInt($(media)[0].getAttribute('width')); - } - else { - this.playerWidth = null; + } else { + this.playerWidth = null; } // Icon type @@ -1765,21 +1708,18 @@ var AblePlayerInstances = []; this.forceIconType = false; if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") { var iconType = $(media).data('icon-type'); - if (iconType === 'font' || iconType == 'image' || iconType == 'svg') { + if (iconType === 'font' || iconType === 'image' || iconType === 'svg') { this.iconType = iconType; this.forceIconType = true; } } - if ($(media).data('allow-fullscreen') !== undefined && $(media).data('allow-fullscreen') === false) { - this.allowFullscreen = false; - } - else { - this.allowFullscreen = true; - } - // Define other variables that are used in fullscreen program flow - this.clickedFullscreenButton = false; - this.restoringAfterFullscreen = false; + var allowFullScreen = $(media).data('allow-fullscreen'); + this.allowFullscreen = (allowFullScreen !== undefined && allowFullScreen === false) ? false : true; + + // Define other variables that are used in fullscreen program flow + this.clickedFullscreenButton = false; + this.restoringAfterFullscreen = false; // Seek interval // Number of seconds to seek forward or back with Rewind & Forward buttons @@ -1798,35 +1738,26 @@ var AblePlayerInstances = []; // Now Playing // Shows "Now Playing:" plus the title of the current track above player // Only used if there is a playlist - if ($(media).data('show-now-playing') !== undefined && $(media).data('show-now-playing') === false) { - this.showNowPlaying = false; - } - else { - this.showNowPlaying = true; - } + var showNowPlaying = $(media).data('show-now-playing'); + this.showNowPlaying = (showNowPlaying !== undefined && showNowPlaying === false) ? false : true; // TTML support (experimental); enabled for testing with data-use-ttml (Boolean) if ($(media).data('use-ttml') !== undefined) { this.useTtml = true; // The following may result in a console error. this.convert = require('xml-js'); - } - else { + } else { this.useTtml = false; } // Fallback // The data-test-fallback attribute can be used to test the fallback solution in any browser - if ($(media).data('test-fallback') !== undefined && $(media).data('test-fallback') !== false) { - if ($(media).data('test-fallback') == '2') { - this.testFallback = 2; // emulate browser that doesn't support HTML5 media - } - else { - this.testFallback = 1; // emulate failure to load Able Player - } - } - else { - this.testFallback = false; + var testFallback = $(media).data('test-fallback'); + if ( testFallback !== undefined && testFallback !== false) { + // 1: build error; 2: browser doesn't support media. + this.testFallback = ( testFallback == '2' ) ? 2 : 1; + } else { + this.testFallback = false; } // Language @@ -1835,54 +1766,39 @@ var AblePlayerInstances = []; // 2. Lang attribute on <html> or <body>, if a matching translation file is available // 3. English // Final calculation occurs in translation.js > getTranslationText() - if ($(media).data('lang') !== undefined && $(media).data('lang') !== "") { - this.lang = $(media).data('lang').toLowerCase(); - } - else { - this.lang = null; - } + var lang = $(media).data('lang'); + this.lang = ( lang !== undefined && lang !== "") ? lang.toLowerCase() : null; // Metadata Tracks - if ($(media).data('meta-type') !== undefined && $(media).data('meta-type') !== "") { - this.metaType = $(media).data('meta-type'); + var metaType = $(media).data('meta-type'); + if ( metaType !== undefined && metaType !== "") { + this.metaType = metaType; } - - if ($(media).data('meta-div') !== undefined && $(media).data('meta-div') !== "") { - this.metaDiv = $(media).data('meta-div'); + var metaDiv = $(media).data('meta-div'); + if ( metaDiv !== undefined && metaDiv !== "") { + this.metaDiv = metaDiv; } // Search // conducting a search requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { + var searchDiv = $(media).data('search-div'); + if ( searchDiv !== undefined && searchDiv !== "") { - this.searchDiv = $(media).data('search-div'); + this.searchDiv = searchDiv; // Search term (optional; could be assigned later in a JavaScript application) - if ($(media).data('search') !== undefined && $(media).data('search') !== "") { - this.searchString = $(media).data('search'); + var searchString = $(media).data('search'); + if ( searchString !== undefined && searchString !== "") { + this.searchString = searchString; } // Search Language - if ($(media).data('search-lang') !== undefined && $(media).data('search-lang') !== "") { - this.searchLang = $(media).data('search-lang'); - } - else { - this.searchLang = null; // will change to final value of this.lang in translation.js > getTranslationText() - } + var searchLang = $(media).data('search-lang'); + this.searchLang = ( searchLang !== undefined && searchLang !== "") ? searchLang : null; // Search option: Ignore capitalization in search terms - if ($(media).data('search-ignore-caps') !== undefined && $(media).data('search-ignore-caps') !== false) { - this.searchIgnoreCaps = true; - } - else { - this.searchIgnoreCaps = false; - } - - // conducting a search currently requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - this.searchString = $(media).data('search'); - this.searchDiv = $(media).data('search-div'); - } + var searchIgnoreCaps = $(media).data('search-ignore-caps'); + this.searchIgnoreCaps = ( searchIgnoreCaps !== undefined && searchIgnoreCaps !== false) ? true : false; } // Hide controls when video starts playing @@ -1891,8 +1807,7 @@ var AblePlayerInstances = []; if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) { this.hideControls = true; this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode - } - else { + } else { this.hideControls = false; this.hideControlsOriginal = false; } @@ -1911,13 +1826,11 @@ var AblePlayerInstances = []; this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoMode = false; this.stenoFrameId = null; this.$stenoFrame = null; @@ -1927,9 +1840,7 @@ var AblePlayerInstances = []; this.setDefaults(); //////////////////////////////////////// - // // End assignment of default variables - // //////////////////////////////////////// this.ableIndex = AblePlayer.nextIndex; @@ -1941,21 +1852,15 @@ var AblePlayerInstances = []; // use defer method to defer additional processing until text is retrieved this.tt = {}; var thisObj = this; - $.when(this.getTranslationText()).then( - function () { - if (thisObj.countProperties(thisObj.tt) > 50) { - // close enough to ensure that most text variables are populated - thisObj.setup(); - } - else { - // can't continue loading player with no text - thisObj.provideFallback(); - } + async function fetchTranslations(thisObj) { + try { + await thisObj.getTranslationText(); + thisObj.setup(); + } catch { + thisObj.provideFallback(); } - ). - fail(function() { - thisObj.provideFallback(); - }); + } + fetchTranslations(thisObj); }; // Index to increment every time new player is created. @@ -1970,17 +1875,15 @@ var AblePlayerInstances = []; if (!thisObj.player) { // No player for this media, show last-line fallback. thisObj.provideFallback(); - } - else { + } else { thisObj.setupInstance().then(function () { thisObj.setupInstancePlaylist(); if (thisObj.hasPlaylist) { // for playlists, recreatePlayer() is called from within cuePlaylistItem() - } - else { - thisObj.recreatePlayer().then(function() { + } else { + thisObj.recreatePlayer().then(function() { thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed + thisObj.playerCreated = true; // remains true until browser is refreshed }); } }); @@ -2000,13 +1903,10 @@ var AblePlayerInstances = []; }; AblePlayer.localGetElementById = function(element, id) { - if (element.getRootNode) - { + if (element.getRootNode) { // Use getRootNode() and querySelector() where supported (for shadow DOM support) return $(element.getRootNode().querySelector('#' + id)); - } - else - { + } else { // If getRootNode is not supported it should be safe to use document.getElementById (since there is no shadow DOM support) return $(document.getElementById(id)); } @@ -2075,8 +1975,7 @@ var AblePlayerInstances = []; $el = $('<div>', { 'class': 'able-controller' }).hide(); - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { $el = $('<div>', { 'class': 'able-window-toolbar' }).hide(); @@ -2091,16 +1990,11 @@ var AblePlayerInstances = []; blue = rgb[2]; luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue); // range is 1 - 255; therefore 125 is the tipping point - if (luminance < 125) { // background is dark - iconColor = 'white'; - } - else { // background is light - iconColor = 'black'; - } + iconColor = (luminance < 125) ? 'white' : 'black'; + if ($elements[i] === 'controller') { this.iconColor = iconColor; - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { this.toolbarIconColor = iconColor; } $el.remove(); @@ -2113,20 +2007,16 @@ var AblePlayerInstances = []; this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/'; this.playButtonImg = this.imgPath + 'play.png'; this.pauseButtonImg = this.imgPath + 'pause.png'; - this.restartButtonImg = this.imgPath + 'restart.png'; - this.rewindButtonImg = this.imgPath + 'rewind.png'; this.forwardButtonImg = this.imgPath + 'forward.png'; - this.previousButtonImg = this.imgPath + 'previous.png'; this.nextButtonImg = this.imgPath + 'next.png'; if (this.speedIcons === 'arrows') { this.fasterButtonImg = this.imgPath + 'slower.png'; this.slowerButtonImg = this.imgPath + 'faster.png'; - } - else if (this.speedIcons === 'animals') { + } else if (this.speedIcons === 'animals') { this.fasterButtonImg = this.imgPath + 'rabbit.png'; this.slowerButtonImg = this.imgPath + 'turtle.png'; } @@ -2136,19 +2026,19 @@ var AblePlayerInstances = []; this.signButtonImg = this.imgPath + 'sign.png'; this.transcriptButtonImg = this.imgPath + 'transcript.png'; this.descriptionsButtonImg = this.imgPath + 'descriptions.png'; - this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png'; this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png'; - this.prefsButtonImg = this.imgPath + 'preferences.png'; this.helpButtonImg = this.imgPath + 'help.png'; }; - AblePlayer.prototype.getSvgData = function(button) { + AblePlayer.prototype.getIconData = function(button) { // returns array of values for creating <svg> tag for specified button // 0 = <svg> viewBox attribute // 1 = <path> d (description) attribute + // 2 = icon class for font icons + // 3 = img URL for images. var svg = Array(); switch (button) { @@ -2156,142 +2046,184 @@ var AblePlayerInstances = []; case 'play': svg[0] = '0 0 16 20'; svg[1] = 'M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z'; + svg[2] = 'icon-play'; + svg[3] = this.playButtonImg; break; case 'pause': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'stop': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-pause'; + svg[3] = this.pauseButtonImg; break; case 'restart': svg[0] = '0 0 20 20'; svg[1] = 'M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z'; + svg[2] = 'icon-restart'; + svg[3] = this.restartButtonImg; break; case 'rewind': svg[0] = '0 0 20 20'; svg[1] = 'M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z'; + svg[2] = 'icon-rewind'; + svg[3] = this.rewindButtonImg; break; case 'forward': svg[0] = '0 0 20 20'; svg[1] = 'M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z'; + svg[2] = 'icon-forward'; + svg[3] = this.forwardButtonImg; break; case 'previous': svg[0] = '0 0 20 20'; svg[1] = 'M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z'; + svg[2] = 'icon-previous'; + svg[3] = this.previousButtonImg; break; case 'next': svg[0] = '0 0 20 20'; svg[1] = 'M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z'; + svg[2] = 'icon-next'; + svg[3] = this.nextButtonImg; break; case 'slower': - svg[0] = '0 0 20 20'; + svg[0] = '0 0 11 20'; svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z'; + svg[2] = 'icon-slower'; + svg[3] = this.slowerButtonImg; break; case 'faster': svg[0] = '0 0 11 20'; svg[1] = 'M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-faster'; + svg[3] = this.fasterButtonImg; break; case 'turtle': svg[0] = '0 0 20 20'; svg[1] = 'M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z'; + svg[2] = 'icon-turtle'; + svg[3] = this.slowerButtonImg; break; case 'rabbit': svg[0] = '0 0 20 20'; svg[1] = 'M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z'; + svg[2] = 'icon-rabbit'; + svg[3] = this.fasterButtonImg; break; case 'ellipsis': svg[0] = '0 0 20 20'; svg[1] = 'M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z'; + svg[2] = 'icon-ellipsis'; + svg[3] = false; break; case 'pipe': svg[0] = '0 0 20 20'; svg[1] = 'M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z'; + svg[2] = 'icon-pipe'; + svg[3] = false; break; case 'captions': svg[0] = '0 0 20 20'; svg[1] = 'M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z'; + svg[2] = 'icon-captions'; + svg[3] = this.captionsButtonImg; break; case 'descriptions': svg[0] = '0 0 20 20'; svg[1] = 'M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z'; + svg[2] = 'icon-descriptions'; + svg[3] = this.descriptionsButtonImg; break; case 'sign': svg[0] = '0 0 20 20'; svg[1] = 'M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z'; + svg[2] = 'icon-sign'; + svg[3] = this.signButtonImg; break; case 'mute': case 'volume-mute': svg[0] = '0 0 20 20'; svg[1] = 'M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z'; + svg[2] = 'icon-volume-mute'; + svg[3] = this.imgPath + 'volume-mute.png'; break; case 'volume-soft': svg[0] = '0 0 20 20'; svg[1] = 'M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-soft'; + svg[3] = this.imgPath + 'volume-soft.png'; break; case 'volume-medium': svg[0] = '0 0 20 20'; svg[1] = 'M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-medium'; + svg[3] = this.imgPath + 'volume-medium.png'; break; case 'volume-loud': svg[0] = '0 0 21 20'; svg[1] = 'M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-loud'; + svg[3] = this.imgPath + 'volume-loud.png'; break; case 'chapters': svg[0] = '0 0 20 20'; svg[1] = 'M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z'; + svg[2] = 'icon-chapters'; + svg[3] = this.chaptersButtonImg; break; case 'transcript': svg[0] = '0 0 20 20'; svg[1] = 'M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z'; + svg[2] = 'icon-transcript'; + svg[3] = this.transcriptButtonImg; break; case 'preferences': svg[0] = '0 0 20 20'; svg[1] = 'M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z'; + svg[2] = 'icon-preferences'; + svg[3] = this.prefsButtonImg; break; case 'close': svg[0] = '0 0 16 20'; svg[1] = 'M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z'; + svg[2] = 'icon-close'; + svg[3] = null; break; case 'fullscreen-expand': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z'; + svg[2] = 'icon-fullscreen-expand'; + svg[3] = this.fullscreenExpandButtonImg; break; case 'fullscreen-collapse': svg[0] = '0 0 20 20'; svg[1] = 'M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'help': - svg[0] = '0 0 11 20'; - svg[1] = 'M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z'; + svg[2] = 'icon-fullscreen-collapse'; + svg[3] = this.fullscreenCollapseButtonImg; break; } @@ -2299,26 +2231,20 @@ var AblePlayerInstances = []; }; // Initialize player based on data on page. - // This sets some variables, but does not modify anything. Safe to call multiple times. + // This sets some variables, but does not modify anything. Safe to call multiple times. // Can call again after updating this.media so long as new media element has the same ID. AblePlayer.prototype.reinitialize = function () { - var deferred, promise, thisObj, errorMsg, srcFile; + var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - // if F12 Developer Tools aren't open in IE (through 9, no longer a problen in IE10) - // console.log causes an error - can't use debug without a console to log messages to - if (! window.console) { - this.debug = false; - } - this.startedPlaying = false; - // TODO: Move this setting to cookie. + // TODO: Move this setting to preferences. this.autoScrollTranscript = true; - //this.autoScrollTranscript = this.getCookie(autoScrollTranscript); // (doesn't work) + //this.autoScrollTranscript = this.getPref(autoScrollTranscript); // (doesn't work) // Bootstrap from this.media possibly being an ID or other selector. this.$media = $(this.media).first(); @@ -2327,14 +2253,12 @@ var AblePlayerInstances = []; // Set media type to 'audio' or 'video'; this determines some of the behavior of player creation. if (this.$media.is('audio')) { this.mediaType = 'audio'; - } - else if (this.$media.is('video')) { + } else if (this.$media.is('video')) { this.mediaType = 'video'; - } - else { + } else { // Able Player was initialized with some element other than <video> or <audio> this.provideFallback(); - deferred.fail(); + deferred.reject(); return promise; } @@ -2353,107 +2277,36 @@ var AblePlayerInstances = []; AblePlayer.prototype.setPlayerSize = function(width, height) { - var mediaId = this.$media.attr('id'); - - // Called again after width and height are known - - if (this.mediaType === 'audio') { - if (this.playerWidth) { - this.$ableWrapper.css('width',this.playerWidth + 'px'); - } - } - else if (width > 0 && height > 0) { - this.playerWidth = width; - this.playerHeight = height; - this.aspectRatio = height / width; + // Called again after width and height are known + if (this.mediaType !== 'audio' && width > 0 && height > 0) { + this.playerWidth = width; + this.playerHeight = height; + this.aspectRatio = height / width; } }; AblePlayer.prototype.setIconType = function() { - // returns either "svg", "font" or "image" (in descending order of preference) - // Test for support of each type. If not supported, test the next type. - // last resort is image icons - - var $tempButton, $testButton, controllerFont; - + // Tests for SVG and font support removed in version 4.7.0. + // Browser support for these is no longer a risk; they are widely supported in all browsers. + // This now only returns 'svg' or 'false' if iconType is forced. if (this.forceIconType) { // use value specified in data-icon-type return false; } - // test for SVG support - // Test this method widely; failed as expected on IE8 and below - // https://stackoverflow.com/a/27568129/744281 - if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) { - // browser supports SVG - this.iconType = 'svg'; - } - else { - // browser does NOT support SVG - // test whether browser can support icon fonts, and whether user has overriding the default style sheet - // which could cause problems with proper display of the icon fonts - if (window.getComputedStyle) { - - // webkit doesn't return calculated styles unless element has been added to the DOM - // and is visible (note: visibly clipped is considered "visible") - // use playpauseButton for font-family test if it exists; otherwise must create a new temp button - if ($('span.icon-play').length) { - $testButton = $('span.icon-play'); - } - else { - $tempButton = $('<span>',{ - 'class': 'icon-play able-clipped' - }); - $('body').append($tempButton); - $testButton = $tempButton; - } - - // the following retrieves the computed value of font-family - // tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works! - // tested in Chrome 49.x with Font Changer plugin - works! - // tested in IE with user-defined style sheet enables - works! - // It does NOT account for users who have "ignore font styles on web pages" checked in IE - // There is no known way to check for that ??? - controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family'); - if (typeof controllerFont !== 'undefined') { - if (controllerFont.indexOf('able') !== -1) { - this.iconType = 'font'; - } - else { - this.iconType = 'image'; - } - } - else { - // couldn't get computed font-family; use images to be safe - this.iconType = 'image'; - } - } - else { - // window.getComputedStyle is not supported (IE 8 and earlier) - // No known way to detect computed font - // The following retrieves the value from the style sheet, not the computed font - // controllerFont = $tempButton.get(0).currentStyle.fontFamily; - // It will therefore return "able", even if the user is overriding that with a custom style sheet - // To be safe, use images - this.iconType = 'image'; - } - if (typeof $tempButton !== 'undefined') { - $tempButton.remove(); - } - } + this.iconType = 'svg'; }; // Perform one-time setup for this instance of player; called after player is first initialized. AblePlayer.prototype.setupInstance = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); if (this.$media.attr('id')) { this.mediaId = this.$media.attr('id'); - } - else { + } else { // Ensure the base media element always has an ID. this.mediaId = "ableMediaId_" + this.ableIndex; this.$media.attr('id', this.mediaId); @@ -2481,7 +2334,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from YouTube var $youTubeVideos = $(this).find('li[data-youtube-id]'); $youTubeVideos.each(function() { - var youTubeId = $(this).attr('data-youtube-id'); + var youTubeId = DOMPurify.sanitize( $(this).attr('data-youtube-id') ); var youTubePoster = thisObj.getYouTubePosterUrl(youTubeId,'120'); var $youTubeImg = $('<img>',{ 'src': youTubePoster, @@ -2494,7 +2347,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from Vimeo var $vimeoVideos = $(this).find('li[data-vimeo-id]'); $vimeoVideos.each(function() { - var vimeoId = $(this).attr('data-youtube-id'); + var vimeoId = $(this).attr('data-vimeo-id'); var vimeoPoster = thisObj.getVimeoPosterUrl(vimeoId,'120'); var $vimeoImg = $('<img>',{ 'src': vimeoPoster, @@ -2507,13 +2360,8 @@ var AblePlayerInstances = []; $(this).find('li span').attr('aria-hidden','true'); thisObj.playlistIndex = 0; var dataEmbedded = $(this).data('embedded'); - if (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) { - // embed playlist within player - thisObj.playlistEmbed = true; - } - else { - thisObj.playlistEmbed = false; - } + // is playlist embedded within player? + thisObj.playlistEmbed = (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) ? true : false; } }); @@ -2540,12 +2388,12 @@ var AblePlayerInstances = []; AblePlayer.prototype.recreatePlayer = function () { // Creates the appropriate player for the current source. - // This function is called each time a new media instance is loaded - // e.g., - // User clicks on an item in a playlist - // User swaps to/from described version of video - // Blocks of code that only need to be executed once are controlled - // by this.playerCreated + // This function is called each time a new media instance is loaded + // e.g., + // User clicks on an item in a playlist + // User swaps to/from described version of video + // Blocks of code that only need to be executed once are controlled + // by this.playerCreated // TODO: Ensure when recreating player that we carry over the mediaId if (!this.player) { @@ -2555,38 +2403,37 @@ var AblePlayerInstances = []; var deferred, promise, thisObj, prefsGroups, i; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - this.playerDeleted = false; // reset after deletePlayer() + this.playerDeleted = false; // reset after deletePlayer() // set temp stopgap to prevent this function from executing again before finished - this.recreatingPlayer = true; + this.recreatingPlayer = true; if (!this.playerCreated) { // only call these functions once this.loadCurrentPreferences(); this.injectPlayerCode(); - this.resizePlayer(this.media.videoWidth,this.media.videoHeight); + this.resizePlayer(this.media.videoWidth,this.media.videoHeight); } - this.getSampleDescriptionText(); + this.getSampleDescriptionText(); this.initSignLanguage(); this.initPlayer().then(function() { - thisObj.getTracks().then(function() { + thisObj.getTracks().then(function() { thisObj.initDescription().then(function() { thisObj.setupTracks().then(function() { - if (thisObj.hasClosedDesc) { - if (!thisObj.$descDiv || - (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { - // descDiv either doesn't exist, or exists in an orphaned state - // Either way, it needs to be rebuilt... + if (thisObj.hasClosedDesc) { + if (!thisObj.$descDiv || (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { + // descDiv either doesn't exist, or exists in an orphaned state + // Either way, it needs to be rebuilt... thisObj.injectTextDescriptionArea(); } } @@ -2603,7 +2450,6 @@ var AblePlayerInstances = []; thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - thisObj.setFullscreen(false); if (typeof thisObj.volume === 'undefined') { thisObj.volume = thisObj.defaultVolume; @@ -2636,37 +2482,35 @@ var AblePlayerInstances = []; thisObj.setupPopups(); thisObj.updateCaption(); thisObj.injectVTS(); - if (thisObj.chaptersDivLocation) { - thisObj.populateChaptersDiv(); - } + thisObj.populateChaptersDiv(); thisObj.showSearchResults(); // Go ahead and load media, without user requesting it // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth // However, the media needs to load for us to get the media's duration if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.$media[0].load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } } // refreshControls is called twice building/initializing the player // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete setTimeout(function() { - thisObj.refreshControls('init'); - deferred.resolve(); - },100); - }); - }); + thisObj.refreshControls(); + deferred.resolve(); + },100); + }); + }); }); }); - }); + }); }); }, function() { // initPlayer fail thisObj.provideFallback(); }); - return promise; + return promise; }; AblePlayer.prototype.initPlayer = function () { @@ -2676,33 +2520,28 @@ var AblePlayerInstances = []; // First run player specific initialization. if (this.player === 'html5') { playerPromise = this.initHtml5Player(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { playerPromise = this.initYouTubePlayer(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { playerPromise = this.initVimeoPlayer(); } // After player specific initialization is done, run remaining general initialization. - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - playerPromise.done( + playerPromise.then( function () { // done/resolved if (thisObj.useFixedSeekInterval) { + // if fixed seekInterval was not already assigned (using value of data-seek-interval) if (!thisObj.seekInterval) { thisObj.seekInterval = thisObj.defaultSeekInterval; } - else { - // fixed seekInterval was already assigned, using value of data-seek-interval attribute - } thisObj.seekIntervalCalculated = true; - } - else { + } else { thisObj.setSeekInterval(); } deferred.resolve(); } - ).fail(function () { // failed + ).finally(function () { // failed deferred.reject(); } ); @@ -2712,10 +2551,8 @@ var AblePlayerInstances = []; AblePlayer.prototype.initStenoFrame = function() { - var thisObj, deferred, promise, $iframe; - thisObj = this; - - deferred = new $.Deferred(); + var deferred, promise; + deferred = new this.defer(); promise = deferred.promise(); if (this.stenoMode && this.$stenoFrame) { @@ -2723,15 +2560,13 @@ var AblePlayerInstances = []; if (this.$stenoFrame[0].contentWindow,document.readyState == 'complete') { // iframe has already loaded deferred.resolve(); - } - else { + } else { // iframe has not loaded. Wait for it. this.$stenoFrame.on('load',function() { deferred.resolve(); }); } - } - else { + } else { // there is no stenoFrame to initialize deferred.resolve(); } @@ -2746,33 +2581,24 @@ var AblePlayerInstances = []; var thisObj, duration; thisObj = this; this.seekInterval = this.defaultSeekInterval; - if (this.useChapterTimes) { - duration = this.chapterDuration; - } - else { - duration = this.duration; - } + duration = (this.useChapterTimes) ? this.chapterDuration : this.duration; + if (typeof duration === 'undefined' || duration < 1) { // no duration; just use default for now but keep trying until duration is available this.seekIntervalCalculated = false; return; - } - else { + } else { if (duration <= 20) { this.seekInterval = 5; // 4 steps max - } - else if (duration <= 30) { + } else if (duration <= 30) { this.seekInterval = 6; // 5 steps max - } - else if (duration <= 40) { + } else if (duration <= 40) { this.seekInterval = 8; // 5 steps max - } - else if (duration <= 100) { + } else if (duration <= 100) { this.seekInterval = 10; // 10 steps max - } - else { + } else { // never more than 10 steps from start to end - this.seekInterval = (duration / 10); + this.seekInterval = Math.round(duration / 10, 0); } this.seekIntervalCalculated = true; } @@ -2821,38 +2647,38 @@ var AblePlayerInstances = []; // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); - break; - default: - // some other error occurred - console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); - break; - } - }); - } - else { - // disable Vimeo captions. - this.vimeoPlayer.disableTextTrack().then(function() { - // Vimeo captions disabled - }).catch(function(error) { - console.log('Error disabling Vimeo text track: ',error); - }); - } + } + ).catch(function(error) { + switch (error.name) { + case 'InvalidTrackLanguageError': + // no track was available with the specified language + console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); + break; + case 'InvalidTrackError': + // no track was available with the specified language and kind + console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); + break; + default: + // some other error occurred + console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); + break; + } + }); + } else { + // disable Vimeo captions. + this.vimeoPlayer.disableTextTrack().then(function() { + // Vimeo captions disabled + }).catch(function(error) { + console.log('Error disabling Vimeo text track: ',error); + }); } + } } }; AblePlayer.prototype.initHtml5Player = function () { // Nothing special to do! - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); deferred.resolve(); return promise; @@ -2866,6 +2692,7 @@ var AblePlayerInstances = []; // Keep native player from displaying captions/subtitles by setting textTrack.mode='disabled' // https://dev.w3.org/html5/spec-author-view/video.html#text-track-mode // This should work but historically hasn't been supported in all browsers + // As of July 2025, 96% supported per https://caniuse.com/?search=text-track-mode. // Workaround for non-supporting browsers is to remove default attribute // We're doing that too in track.js > setupCaptions() var textTracks = this.$media.get(0).textTracks; @@ -2882,146 +2709,125 @@ var AblePlayerInstances = []; // Determine which player to use, if any // return 'html5', 'youtube', 'vimeo', or null - - var i, sourceType, $newItem; - if (this.testFallback) { - return null; - } - else if (this.youTubeId) { - if (this.mediaType !== 'video') { - // attempting to play a YouTube video using an element other than <video> - return null; - } - else { - return 'youtube'; - } - } - else if (this.vimeoId) { - if (this.mediaType !== 'video') { - // attempting to play a Vimeo video using an element other than <video> - return null; - } - else { - return 'vimeo'; - } - - } - else if (this.media.canPlayType) { + if (this.testFallback) { + return null; + } else if (this.youTubeId) { + // null if attempting to play a YouTube video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'youtube'; + } else if (this.vimeoId) { + // null if attempting to play a Vimeo video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'vimeo'; + } else if (this.media.canPlayType) { return 'html5'; - } - else { + } else { // Browser does not support the available media file return null; } }; - })(jQuery); (function ($) { - AblePlayer.prototype.setCookie = function(cookieValue) { - - Cookies.set('Able-Player', JSON.stringify(cookieValue), { - expires: 90, - sameSite: 'strict' - }); + AblePlayer.prototype.setPrefs = function(preferences) { + if ( typeof Cookies !== 'undefined' ) { + Cookies.set('Able-Player', JSON.stringify(preferences), { + expires: 90, + sameSite: 'strict' + }); + } else { + localStorage.setItem( 'Able-Player', JSON.stringify( preferences ) ); + } }; - AblePlayer.prototype.getCookie = function() { + AblePlayer.prototype.getPref = function() { - var defaultCookie = { + var defaultPrefs = { preferences: {}, sign: {}, transcript: {}, voices: [] }; - var cookie; + var preferences; try { - cookie = JSON.parse(Cookies.get('Able-Player')); + if ( typeof Cookies !== 'undefined' ) { + preferences = JSON.parse( Cookies.get('Able-Player') ); + } else { + preferences = JSON.parse( localStorage.getItem('Able-Player') ); + } } catch (err) { - // Original cookie can't be parsed; update to default - this.setCookie(defaultCookie); - cookie = defaultCookie; - } - if (cookie) { - return cookie; - } - else { - return defaultCookie; + // Original preferences can't be parsed; update to default + this.setPrefs( defaultPrefs ); + preferences = defaultPrefs; } + return (preferences) ? preferences : defaultPrefs; }; - AblePlayer.prototype.updateCookie = function( setting ) { - - // called when a particular setting had been updated - // useful for settings updated indepedently of Preferences dialog + AblePlayer.prototype.updatePreferences = function( setting ) { + // useful for settings updated independently of Preferences dialog // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle() // setting is any supported preference name (e.g., "prefCaptions") // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows) - var cookie, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; - cookie = this.getCookie(); + var preferences, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; + preferences = this.getPref(); if (setting === 'transcript' || setting === 'sign') { if (setting === 'transcript') { $window = this.$transcriptArea; windowPos = $window.position(); - if (typeof cookie.transcript === 'undefined') { - cookie.transcript = {}; - } - cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.transcript['zindex'] = $window.css('z-index'); - cookie.transcript['top'] = windowPos.top; - cookie.transcript['left'] = windowPos.left; - cookie.transcript['width'] = $window.width(); - cookie.transcript['height'] = $window.height(); - } - else if (setting === 'sign') { + if (typeof preferences.transcript === 'undefined') { + preferences.transcript = {}; + } + preferences.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.transcript['zindex'] = $window.css('z-index'); + preferences.transcript['top'] = windowPos.top; + preferences.transcript['left'] = windowPos.left; + preferences.transcript['width'] = $window.width(); + preferences.transcript['height'] = $window.height(); + } else if (setting === 'sign') { $window = this.$signWindow; windowPos = $window.position(); - if (typeof cookie.sign === 'undefined') { - cookie.sign = {}; - } - cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.sign['zindex'] = $window.css('z-index'); - cookie.sign['top'] = windowPos.top; - cookie.sign['left'] = windowPos.left; - cookie.sign['width'] = $window.width(); - cookie.sign['height'] = $window.height(); - } - } - else if (setting === 'voice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; - } - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; - } - } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (typeof preferences.sign === 'undefined') { + preferences.sign = {}; + } + preferences.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.sign['zindex'] = $window.css('z-index'); + preferences.sign['top'] = windowPos.top; + preferences.sign['left'] = windowPos.left; + preferences.sign['width'] = $window.width(); + preferences.sign['height'] = $window.height(); + } + } else if (setting === 'voice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; + } + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; + } + } + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - } - else { + preferences.voices.push(newVoice); + } + } else { available = this.getAvailablePreferences(); - // Rebuild cookie with current cookie values, + // Rebuild preferences with current preferences values, // replacing the one value that's been changed for (i = 0; i < available.length; i++) { prefName = available[i]['name']; if (prefName == setting) { // this is the one that requires an update - cookie.preferences[prefName] = this[prefName]; + preferences.preferences[prefName] = this[prefName]; } } } - // Save updated cookie - this.setCookie(cookie); + // Save updated preferences + this.setPrefs(preferences); }; AblePlayer.prototype.getPreferencesGroups = function() { @@ -3030,17 +2836,15 @@ var AblePlayerInstances = []; // in the Preferences popup menu // Human-readable label for each group is defined in translation table if (this.usingYouTubeCaptions) { - // no transcript is possible - return ['captions','descriptions','keyboard']; - } - else if (this.usingVimeoCaptions) { + // no transcript is possible + return ['captions','descriptions','keyboard']; + } else if (this.usingVimeoCaptions) { // users cannot control caption appearance // and no transcript is possible - return ['descriptions','keyboard']; + return ['descriptions','keyboard']; + } else { + return ['captions','descriptions','keyboard','transcript']; } - else { - return ['captions','descriptions','keyboard','transcript']; - } } AblePlayer.prototype.getAvailablePreferences = function() { @@ -3052,19 +2856,25 @@ var AblePlayerInstances = []; // Modifier keys preferences prefs.push({ 'name': 'prefAltKey', // use alt key with shortcuts - 'label': this.tt.prefAltKey, + 'label': this.translate( 'prefAltKey', 'Alt' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefCtrlKey', // use ctrl key with shortcuts - 'label': this.tt.prefCtrlKey, + 'label': this.translate( 'prefCtrlKey', 'Control' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefShiftKey', - 'label': this.tt.prefShiftKey, + 'label': this.translate( 'prefShiftKey', 'Shift' ), + 'group': 'keyboard', + 'default': 0 + }); + prefs.push({ + 'name': 'prefNoKeyShortcuts', + 'label': this.translate( 'prefNoKeyShortcuts', 'Disable Keyboard Shortcuts' ), 'group': 'keyboard', 'default': 0 }); @@ -3078,7 +2888,7 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefHighlight', // highlight transcript as media plays - 'label': this.tt.prefHighlight, + 'label': this.translate( 'prefHighlight', 'Highlight transcript as media plays' ), 'group': 'transcript', 'default': 1 // on because many users can benefit }); @@ -3090,13 +2900,12 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefTabbable', // tab-enable transcript - 'label': this.tt.prefTabbable, + 'label': this.translate( 'prefTabbable', 'Keyboard-enable transcript' ), 'group': 'transcript', 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page }); // Caption preferences - prefs.push({ 'name': 'prefCaptions', // closed captions default state 'label': null, @@ -3109,23 +2918,23 @@ var AblePlayerInstances = []; /* // not supported yet prefs.push({ 'name': 'prefCaptionsStyle', - 'label': this.tt.prefCaptionsStyle, + 'label': this.translate( 'prefCaptionsStyle', 'Style' ), 'group': 'captions', - 'default': this.tt.captionsStylePopOn + 'default': this.translate( 'captionsStylePopOn', 'Pop-on' ) }); / - // captions are always positioned above the player for audio + // captions are always positioned above the player for audio if (this.mediaType === 'video') { prefs.push({ 'name': 'prefCaptionsPosition', - 'label': this.tt.prefCaptionsPosition, + 'label': this.translate( 'prefCaptionsPosition', 'Position' ), 'group': 'captions', 'default': this.defaultCaptionsPosition }); - } + } prefs.push({ 'name': 'prefCaptionsFont', - 'label': this.tt.prefCaptionsFont, + 'label': this.translate( 'prefCaptionsFont', 'Font' ), 'group': 'captions', 'default': 'sans-serif' }); @@ -3133,7 +2942,7 @@ var AblePlayerInstances = []; // This is the one option that is supported by YouTube IFrame API prefs.push({ 'name': 'prefCaptionsSize', - 'label': this.tt.prefCaptionsSize, + 'label': this.translate( 'prefCaptionsSize', 'Font size' ), 'group': 'captions', 'default': '100%' }); @@ -3142,25 +2951,25 @@ var AblePlayerInstances = []; prefs.push({ 'name': 'prefCaptionsColor', - 'label': this.tt.prefCaptionsColor, + 'label': this.translate( 'prefCaptionsColor', 'Text Color' ), 'group': 'captions', 'default': 'white' }); prefs.push({ 'name': 'prefCaptionsBGColor', - 'label': this.tt.prefCaptionsBGColor, + 'label': this.translate( 'prefCaptionsBGColor', 'Background' ), 'group': 'captions', 'default': 'black' }); prefs.push({ 'name': 'prefCaptionsOpacity', - 'label': this.tt.prefCaptionsOpacity, + 'label': this.translate( 'prefCaptionsOpacity', 'Opacity' ), 'group': 'captions', 'default': '100%' }); } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { // Description preferences prefs.push({ 'name': 'prefDesc', // audio description default state @@ -3176,37 +2985,40 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefDescVoice', - 'label': this.tt.prefDescVoice, + 'label': this.translate( 'prefDescVoice', 'Voice' ), 'group': 'descriptions', 'default': null // will be set later, in injectPrefsForm() }); prefs.push({ 'name': 'prefDescPitch', - 'label': this.tt.prefDescPitch, + 'label': this.translate( 'prefDescPitch', 'Pitch' ), 'group': 'descriptions', 'default': 1 // 0 to 2 }); prefs.push({ 'name': 'prefDescRate', - 'label': this.tt.prefDescRate, + 'label': this.translate( 'prefDescRate', 'Rate' ), 'group': 'descriptions', 'default': 1 // 0.1 to 10 (1 is normal speech; 2 is fast but decipherable; >2 is super fast) }); prefs.push({ 'name': 'prefDescVolume', - 'label': this.tt.volume, + 'label': this.translate( 'volume', 'Volume' ), 'group': 'descriptions', 'default': 1 // 0 to 1 }); - prefs.push({ - 'name': 'prefDescPause', // automatically pause when closed description starts - 'label': this.tt.prefDescPause, - 'group': 'descriptions', - 'default': this.defaultDescPause - }); + // Don't enable pause option if video described files in use. + if ( this.descMethod !== 'video' ) { + prefs.push({ + 'name': 'prefDescPause', // automatically pause when closed description starts + 'label': this.translate( 'prefDescPause', 'Automatically pause video when description starts' ), + 'group': 'descriptions', + 'default': this.defaultDescPause + }); + } prefs.push({ 'name': 'prefDescVisible', // visibly show closed description (if avilable and used) - 'label': this.tt.prefDescVisible, + 'label': this.translate( 'prefDescVisible', 'Make description visible' ), 'group': 'descriptions', 'default': 0 // off as of 4.3.16, to avoid overloading the player with visible features }); @@ -3224,29 +3036,28 @@ var AblePlayerInstances = []; AblePlayer.prototype.loadCurrentPreferences = function () { - // Load current/default preferences from cookie into the AblePlayer object. + // Load current/default preferences into the AblePlayer object. var available = this.getAvailablePreferences(); - var cookie = this.getCookie(); - // Copy current cookie values into this object, and fill in any default values. + var preferences = this.getPref(); + // Copy current preferences values into this object, and fill in any default values. for (var ii = 0; ii < available.length; ii++) { var prefName = available[ii]['name']; var defaultValue = available[ii]['default']; - if (cookie.preferences[prefName] !== undefined) { - this[prefName] = cookie.preferences[prefName]; - } - else { - cookie.preferences[prefName] = defaultValue; + if (preferences.preferences[prefName] !== undefined) { + this[prefName] = preferences.preferences[prefName]; + } else { + preferences.preferences[prefName] = defaultValue; this[prefName] = defaultValue; } } - // Also load array of preferred voices from cookie - if (typeof cookie.voices !== 'undefined') { - this.prefVoices = cookie.voices; - } + // Also load array of preferred voices from preferences + if (typeof preferences.voices !== 'undefined') { + this.prefVoices = preferences.voices; + } - this.setCookie(cookie); + this.setPrefs(preferences); }; AblePlayer.prototype.injectPrefsForm = function (form) { @@ -3254,19 +3065,12 @@ var AblePlayerInstances = []; // Creates a preferences form and injects it. // form is one of the supported forms (groups) defined in getPreferencesGroups() - var thisObj, available, descLangs, - $prefsDiv, formTitle, introText, - $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, - $fieldset, fieldsetClass, fieldsetId, - $descFieldset, $descLegend, $legend, legendId, - thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField, - $div1,id1,$radio1,$label1, - $div2,id2,$radio2,$label2, - options,$thisOption,optionValue,optionLang,optionText,sampleCapsDiv, - changedPref,changedSpan,changedText, - currentDescState, prefDescVoice, - $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem, - dialog,saveButton,cancelButton; + var thisObj, available, + $prefsDiv, formTitle, introText, $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, + $fieldset, fieldsetClass, fieldsetId, $legend, legendId, thisPref, $thisDiv, thisClass, + thisId, $thisLabel, $thisField, options,$thisOption,optionValue,optionLang,optionText, + changedPref,changedSpan,changedText, currentDescState, prefDescVoice, $kbHeading,$kbList, + kbLabels,keys,kbListText,$kbListItem, dialog,$saveButton,$cancelButton,$buttonContainer; thisObj = this; available = this.getAvailablePreferences(); @@ -3278,83 +3082,74 @@ var AblePlayerInstances = []; var customClass = 'able-prefs-form-' + form; $prefsDiv.addClass(customClass); - // add titles and intros - if (form == 'captions') { - formTitle = this.tt.prefTitleCaptions; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage - } - else if (form == 'descriptions') { - formTitle = this.tt.prefTitleDescriptions; + // add titles and intros + if (form == 'captions') { + formTitle = this.translate( 'prefTitleCaptions', 'Captions Preferences' ); + } else if (form == 'descriptions') { + formTitle = this.translate( 'prefTitleDescriptions', 'Audio Description Preferences' ); var $prefsIntro = $('<p>',{ - text: this.tt.prefIntroDescription1 + text: this.translate( 'prefIntroDescription1', 'This media player supports audio description in two ways: ' ) }); var $prefsIntroUL = $('<ul>'); var $prefsIntroLI1 = $('<li>',{ - text: this.tt.prefDescFormatOption1 + text: this.translate( 'prefDescFormatOption1', 'alternative described version of video' ) }); var $prefsIntroLI2 = $('<li>',{ - text: this.tt.prefDescFormatOption2 + text: this.translate( 'prefDescFormatOption2', 'text-based description, announced by screen reader' ) }); $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2); if (this.hasOpenDesc && this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2 + ' '; - currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>'; - currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else if (this.hasOpenDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.'; - } - else if (this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else { - currentDescState = this.tt.prefIntroDescriptionNone; + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ) + ' '; + currentDescState += '<strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>'; + currentDescState += ' <em>' + this.translate( 'and', 'and' ) + '</em> <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else if (this.hasOpenDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>.'; + } else if (this.hasClosedDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else { + currentDescState = this.translate( 'prefIntroDescriptionNone', 'The current video has no audio description in either format.' ); } $prefsIntroP2 = $('<p>',{ html: currentDescState }); - p3Text = this.tt.prefIntroDescription3; + p3Text = this.translate( 'prefIntroDescription3', 'Use the following form to set your preferences related to text-based audio description.' ); if (this.hasOpenDesc || this.hasClosedDesc) { - p3Text += ' ' + this.tt.prefIntroDescription4; + p3Text += ' ' + this.translate( 'prefIntroDescription4', 'After you save your settings, audio description can be toggled on/off using the Description button.' ); } $prefsIntroP3 = $('<p>',{ text: p3Text }); - $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3); - } - else if (form == 'keyboard') { - formTitle = this.tt.prefTitleKeyboard; - introText = this.tt.prefIntroKeyboard1; - introText += ' ' + this.tt.prefIntroKeyboard2; - introText += ' ' + this.tt.prefIntroKeyboard3; + $prefsDiv.append( $prefsIntro, $prefsIntroUL, $prefsIntroP2, $prefsIntroP3 ); + } else if (form == 'keyboard') { + formTitle = this.translate( 'prefTitleKeyboard', 'Keyboard Preferences' ); + introText = this.translate( 'prefIntroKeyboard1', 'The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list).' ); + introText += ' ' + this.translate( 'prefIntroKeyboard2', 'Modifier keys (Shift, Alt, and Control) can be assigned below.' ); + introText += ' ' + this.translate( 'prefIntroKeyboard3', 'NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you.' ); $prefsIntro = $('<p>',{ text: introText }); $prefsDiv.append($prefsIntro); - } - else if (form == 'transcript') { - formTitle = this.tt.prefTitleTranscript; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage + } else if (form == 'transcript') { + formTitle = this.translate( 'prefTitleTranscript', 'Transcript Preferences' ); } - $fieldset = $('<div>').attr('role','group'); + $fieldset = $('<div>').attr('role','group'); fieldsetClass = 'able-prefs-' + form; fieldsetId = this.mediaId + '-prefs-' + form; legendId = fieldsetId + '-legend'; $fieldset.addClass(fieldsetClass).attr('id',fieldsetId); if (form === 'keyboard') { - $legend = $('<h2>' + this.tt.prefHeadingKeyboard1 + '</h2>'); + $legend = $('<h2>' + this.translate( 'prefHeadingKeyboard1', 'Modifier keys used for shortcuts' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); - } - else if (form === 'descriptions') { - $legend = $('<h2>' + this.tt.prefHeadingTextDescription + '</h2>'); + } else if (form === 'descriptions') { + $legend = $('<h2>' + this.translate( 'prefHeadingTextDescription', 'Text-based audio description' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); @@ -3377,7 +3172,7 @@ var AblePlayerInstances = []; }); if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') { // add a change handler that updates the style of the sample caption text - $thisField.change(function() { + $thisField.on( 'change', function() { changedPref = $(this).attr('name'); thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref); }); @@ -3387,28 +3182,19 @@ var AblePlayerInstances = []; if (thisPref === 'prefCaptionsPosition') { optionValue = options[j]; if (optionValue === 'overlay') { - optionText = this.tt.captionsPositionOverlay; - } - else if (optionValue === 'below') { + optionText = this.translate( 'captionsPositionOverlay', 'Overlay' ); + } else if (optionValue === 'below') { optionValue = options[j]; - optionText = this.tt.captionsPositionBelow; + optionText = this.translate( 'captionsPositionBelow', 'Below video' ); } - } - else if (thisPref === 'prefCaptionsFont' || thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') { + } else if (thisPref === 'prefCaptionsFont' || thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') { optionValue = options[j][0]; optionText = options[j][1]; - } - else if (thisPref === 'prefCaptionsOpacity') { + } else if (thisPref === 'prefCaptionsOpacity') { optionValue = options[j]; optionText = options[j]; - if (optionValue === '0%') { - optionText += ' (' + this.tt.transparent + ')'; - } - else if (optionValue === '100%') { - optionText += ' (' + this.tt.solid + ')'; - } - } - else { + optionText += (optionValue === '0%') ? ' (' + this.translate( 'transparent', 'transparent' ) + ')' : ' (' + this.translate( 'solid', 'solid' ) + ')'; + } else { optionValue = options[j]; optionText = options[j]; } @@ -3422,8 +3208,7 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } $thisDiv.append($thisLabel,$thisField); - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); if (thisPref === 'prefDescPause' || thisPref === 'prefDescVisible') { // these preferences are checkboxes @@ -3439,19 +3224,18 @@ var AblePlayerInstances = []; $thisField.prop('checked',true); } $thisDiv.append($thisField,$thisLabel); - } - else if (this.synth) { + } else if (this.synth) { // Only show these options if browser supports speech synthesis $thisDiv.addClass('able-prefs-select'); $thisField = $('<select>',{ name: thisPref, id: thisId, }); - if (thisPref === 'prefDescVoice' && this.descVoices) { - prefDescVoice = this.getPrefDescVoice(); + if (thisPref === 'prefDescVoice' && this.descVoices.length) { + prefDescVoice = this.getPrefDescVoice(); for (j=0; j < this.descVoices.length; j++) { optionValue = this.descVoices[j].name; - optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); + optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); optionText = optionValue + ' (' + this.descVoices[j].lang + ')'; $thisOption = $('<option>',{ 'value': optionValue, @@ -3464,12 +3248,10 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } this.$voiceSelectField = $thisField; - } - else { + } else { if (thisPref == 'prefDescPitch') { // 0 to 2 options = [0,0.5,1,1.5,2]; - } - else if (thisPref == 'prefDescRate') { // 0.1 to 10 + } else if (thisPref == 'prefDescRate') { // 0.1 to 10 // Tests with a variety of voices on MacOS and Windows // yielded the following choices that seem reasonable for audio description: // 0.5 - too slow (exclude this) @@ -3487,8 +3269,7 @@ var AblePlayerInstances = []; // Note: if these values are modified, must also modfiy them // in makePrefsValueReadable() options = [0.7,0.8,0.9,1,1.1,1.2,1.5,2,2.5,3]; - } - else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 + } else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 options = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]; } if (typeof options !== 'undefined') { @@ -3513,8 +3294,7 @@ var AblePlayerInstances = []; }); $thisDiv.append($thisLabel,$thisField); } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); $thisField = $('<input>',{ type: 'checkbox', @@ -3533,26 +3313,35 @@ var AblePlayerInstances = []; if (changedPref === 'prefAltKey') { changedSpan = '.able-modkey-alt'; changedText = thisObj.tt.prefAltKey + ' + '; - } - else if (changedPref === 'prefCtrlKey') { + } else if (changedPref === 'prefCtrlKey') { changedSpan = '.able-modkey-ctrl'; changedText = thisObj.tt.prefCtrlKey + ' + '; - } - else if (changedPref === 'prefShiftKey') { + } else if (changedPref === 'prefShiftKey') { changedSpan = '.able-modkey-shift'; changedText = thisObj.tt.prefShiftKey + ' + '; } - if ($(this).is(':checked')) { - $(changedSpan).text(changedText); - } - else { - $(changedSpan).text(''); + if ( changedPref !== 'prefNoKeyShortcuts' ) { + if ($(this).is(':checked')) { + $(changedSpan).text(changedText); + } else { + $(changedSpan).text(''); + } + } else { + if ($(this).is(':checked')) { + $('.able-modkey-item').addClass('hidden'); + } else { + $('.able-modkey-item').removeClass('hidden'); + } } }); } $thisDiv.append($thisField,$thisLabel); } - $fieldset.append($thisDiv); + if (thisPref === 'prefDescVoice' && !this.descVoices.length) { + // No voices are available (e.g., in Safari 15.4 on Mac OS) + } else { + $fieldset.append($thisDiv); + } } } $prefsDiv.append($fieldset); @@ -3563,25 +3352,25 @@ var AblePlayerInstances = []; if (!this.usingYouTubeCaptions) { this.$sampleCapsDiv = $('<div>',{ 'class': 'able-captions-sample' - }).text(this.tt.sampleCaptionText); + }).text( this.translate( 'sampleCaptionText', 'Sample caption text' ) ); $prefsDiv.append(this.$sampleCapsDiv); this.stylizeCaptions(this.$sampleCapsDiv); } - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { if (this.synth) { // add a div with sample audio description text this.$sampleDescDiv = $('<div>',{ 'class': 'able-desc-sample' - }).text(this.tt.sampleDescriptionText); + }).text( this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) ); $prefsDiv.append(this.$sampleDescDiv); - this.currentSampleText = this.tt.sampleDescriptionText; + this.currentSampleText = this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ); } - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { + let shortcutClass = (this.prefNoKeyShortcuts === 1 ) ? 'able-modkey-item hidden' : 'able-modkey-item'; + // add a current list of keyboard shortcuts $kbHeading = $('<h2>',{ - text: this.tt.prefHeadingKeyboard2 + text: this.translate( 'prefHeadingKeyboard2', 'Current keyboard shortcuts' ) }); $kbList = $('<ul>'); // create arrays of kbLabels and keys @@ -3589,100 +3378,85 @@ var AblePlayerInstances = []; keys = []; for (i=0; i<this.controls.length; i++) { if (this.controls[i] === 'play') { - kbLabels.push(this.tt.play + '/' + this.tt.pause); - keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar); - } - else if (this.controls[i] === 'restart') { - kbLabels.push(this.tt.restart); + kbLabels.push( this.translate( 'play', 'Play' ) + '/' + this.translate( 'pause', 'Pause' ) ); + keys.push('p</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-help-modifiers"> ' + this.translate( 'spacebar', 'spacebar' )); + } else if (this.controls[i] === 'restart') { + kbLabels.push(this.translate( 'restart', 'Restart' )); keys.push('s'); - } - else if (this.controls[i] === 'previous') { - kbLabels.push(this.tt.prevTrack); + } else if (this.controls[i] === 'previous') { + kbLabels.push( this.translate( 'prevTrack', 'Previous track' ) ); keys.push('b'); // b = back - } - else if (this.controls[i] === 'next') { - kbLabels.push(this.tt.nextTrack); + } else if (this.controls[i] === 'next') { + kbLabels.push( this.translate( 'nextTrack', 'Next track' ) ); keys.push('n'); - } - else if (this.controls[i] === 'rewind') { - kbLabels.push(this.tt.rewind); + } else if (this.controls[i] === 'rewind') { + kbLabels.push(this.translate( 'rewind', 'Rewind' )); keys.push('r'); - } - else if (this.controls[i] === 'forward') { - kbLabels.push(this.tt.forward); + } else if (this.controls[i] === 'forward') { + kbLabels.push(this.translate( 'forward', 'Forward' )); keys.push('f'); - } - else if (this.controls[i] === 'volume') { - kbLabels.push(this.tt.volume); - keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9'); + } else if (this.controls[i] === 'volume') { + kbLabels.push(this.translate( 'volume', 'Volume' )); + keys.push('v</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-modkey">1-9'); // mute toggle - kbLabels.push(this.tt.mute + '/' + this.tt.unmute); + kbLabels.push(this.translate( 'mute', 'Mute' ) + '/' + this.translate( 'unmute', 'Unmute' )); keys.push('m'); - } - else if (this.controls[i] === 'captions') { + } else if (this.controls[i] === 'captions') { if (this.captions.length > 1) { // caption button launches a Captions popup menu - kbLabels.push(this.tt.captions); - } - else { + kbLabels.push(this.translate( 'captions', 'Captions' )); + } else { // there is only one caption track // therefore caption button is a toggle if (this.captionsOn) { - kbLabels.push(this.tt.hideCaptions); - } - else { - kbLabels.push(this.tt.showCaptions); + kbLabels.push(this.translate( 'hideCaptions', 'Hide captions' )); + } else { + kbLabels.push(this.translate( 'showCaptions', 'Show captions' )); } } keys.push('c'); - } - else if (this.controls[i] === 'descriptions') { + } else if (this.controls[i] === 'descriptions') { if (this.descOn) { - kbLabels.push(this.tt.turnOffDescriptions); - } - else { - kbLabels.push(this.tt.turnOnDescriptions); + kbLabels.push(this.translate( 'turnOffDescriptions', 'Turn off descriptions' )); + } else { + kbLabels.push(this.translate( 'turnOnDescriptions', 'Turn on descriptions' )); } keys.push('d'); - } - else if (this.controls[i] === 'prefs') { - kbLabels.push(this.tt.preferences); + } else if (this.controls[i] === 'prefs') { + kbLabels.push(this.translate( 'preferences', 'Preferences' )); keys.push('e'); } - else if (this.controls[i] === 'help') { - kbLabels.push(this.tt.help); - keys.push('h'); - } } for (i=0; i<keys.length; i++) { // alt kbListText = '<span class="able-modkey-alt">'; if (this.prefAltKey === 1) { - kbListText += this.tt.prefAltKey + ' + '; + kbListText += this.translate( 'prefAltKey', 'Alt' ) + ' + '; } kbListText += '</span>'; // ctrl kbListText += '<span class="able-modkey-ctrl">'; if (this.prefCtrlKey === 1) { - kbListText += this.tt.prefCtrlKey + ' + '; + kbListText += this.translate( 'prefCtrlKey', 'Control' ) + ' + '; } kbListText += '</span>'; // shift kbListText += '<span class="able-modkey-shift">'; if (this.prefShiftKey === 1) { - kbListText += this.tt.prefShiftKey + ' + '; + kbListText += this.translate( 'prefShiftKey', 'Shift' ) + ' + '; } kbListText += '</span>'; kbListText += '<span class="able-modkey">' + keys[i] + '</span>'; kbListText += ' = ' + kbLabels[i]; $kbListItem = $('<li>',{ - html: kbListText + 'class': shortcutClass, + html: kbListText, }); $kbList.append($kbListItem); } // add Escape key - kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>'; - kbListText += ' = ' + this.tt.escapeKeyFunction; + kbListText = '<span class="able-modkey">' + this.translate( 'escapeKey', 'Escape' ) + '</span>'; + kbListText += ' = ' + this.translate( 'escapeKeyFunction', 'Close current dialog or popup menu' ); $kbListItem = $('<li>',{ html: kbListText }); @@ -3692,56 +3466,53 @@ var AblePlayerInstances = []; } // $prefsDiv (dialog) must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers $('body').append($prefsDiv); - dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', true, formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em'); + dialog = new AccessibleDialog( + $prefsDiv, + this.$prefsButton, + formTitle, + thisObj.tt.closeButtonLabel + ); // Add save and cancel buttons. - $prefsDiv.append('<hr>'); - saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - saveButton.click(function () { + $buttonContainer = $( '<div class="able-prefs-buttons"></div>' ); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); + $saveButton.on( 'click', function () { dialog.hide(); thisObj.savePrefsFromForm(); }); - cancelButton.click(function () { + $cancelButton.on( 'click', function () { dialog.hide(); thisObj.resetPrefsForm(); }); - - $prefsDiv.append(saveButton); - $prefsDiv.append(cancelButton); - + $buttonContainer.append( $saveButton,$cancelButton ); + $prefsDiv.append($buttonContainer); // Associate the dialog's H1 as aria-labelledby for groups of fields - // (alternative to fieldset and legend) - if (form === 'captions' || form === 'transcript') { - $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); + // (alternative to fieldset and legend) + if (form === 'captions' || form === 'transcript') { + $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); } // add global reference for future control if (form === 'captions') { this.captionPrefsDialog = dialog; - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { this.descPrefsDialog = dialog; - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { this.keyboardPrefsDialog = dialog; - } - else if (form === 'transcript') { + } else if (form === 'transcript') { this.transcriptPrefsDialog = dialog; } // Add click handler for dialog close button // (button is added in dialog.js) - $('div.able-prefs-form button.modalCloseButton').click(function() { + $('div.able-prefs-form button.modalCloseButton').on( 'click', function() { thisObj.resetPrefsForm(); }) // Add handler for escape key - $('div.able-prefs-form').keydown(function(e) { - if (e.which === 27) { // escape + $('div.able-prefs-form').on( 'keydown', function(e) { + if (e.key === 'Escape') { thisObj.resetPrefsForm(); } }); @@ -3749,23 +3520,21 @@ var AblePlayerInstances = []; AblePlayer.prototype.getPrefDescVoice = function () { - // return user's preferred voice for the current language from cookie.voices - var lang, cookie, i; + // return user's preferred voice for the current language from preferences.voices + var lang, preferences, i; - if (this.selectedDescriptions) { - lang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - lang = this.captionLang; - } - else { - lang = this.lang; + if (this.selectedDescriptions) { + lang = this.selectedDescriptions.language; + } else if (this.captionLang) { + lang = this.captionLang; + } else { + lang = this.lang; } - cookie = this.getCookie(); - if (cookie.voices) { - for (i=0; i < cookie.voices.length; i++) { - if (cookie.voices[i].lang === lang) { - return cookie.voices[i].name; + preferences = this.getPref(); + if (preferences.voices) { + for (i=0; i < preferences.voices.length; i++) { + if (preferences.voices[i].lang === lang) { + return preferences.voices[i].name; } } } @@ -3774,9 +3543,9 @@ var AblePlayerInstances = []; AblePlayer.prototype.rebuildDescPrefsForm = function () { - // Called if this.descVoices changes, which may happen if: - // getBrowserVoices() succeeds after an earlier failure - // user changes language of captions/subtitles and descVoices changes to match the new language + // Called if this.descVoices changes, which may happen if: + // getBrowserVoices() succeeds after an earlier failure + // user changes language of captions/subtitles and descVoices changes to match the new language var i, optionValue, optionText, $thisOption; @@ -3797,161 +3566,141 @@ var AblePlayerInstances = []; } }; - AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { + AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { + + // The values for pitch, rate, and volume (web speech API) + // are strange and inconsistent between variables + // this function returns text that is more readable than the values themselves + + if (pref === 'prefDescPitch') { + if (value === 0) { + return this.translate( 'prefDescPitch1', 'Very low' ); + } else if (value === 0.5) { + return this.translate( 'prefDescPitch2', 'Low' ); + } else if (value === 1) { + return this.translate( 'prefDescPitch3', 'Default' ); + } else if (value === 1.5) { + return this.translate( 'prefDescPitch4', 'High' ); + } else if (value === 2) { + return this.translate( 'prefDescPitch5', 'Very high' ); + } + } else if (pref === 'prefDescRate') { + // default in the API is 0.1 to 10, where 1 is normal speaking voice + // our custom range offers several rates close to 1 + // plus a couple of crazy fast ones for sport + // Our more readable options (1-10) or mapped here to API values + if (value === 0.7) { + return 1; + } else if (value === 0.8) { + return 2; + } else if (value === 0.9) { + return 3; + } else if (value === 1) { + return 4; + } else if (value === 1.1) { + return 5; + } else if (value === 1.2) { + return 6; + } else if (value === 1.5) { + return 7; + } else if (value === 2) { + return 8; + } else if (value === 2.5) { + return 9; + } else if (value === 3) { + return 10; + } + } else if (pref === 'prefDescVolume') { + // values range from 0.1 to 1.0 + return value 10; + } + return value; + }; - // The values for pitch, rate, and volume (web speech API) - // are strange and inconsistent between variables - // this function returns text that is more readable than the values themselves + AblePlayer.prototype.resetPrefsForm = function () { - if (pref === 'prefDescPitch') { - if (value === 0) { - return this.tt.prefDescPitch1; - } - else if (value === 0.5) { - return this.tt.prefDescPitch2; - } - else if (value === 1) { - return this.tt.prefDescPitch3; - } - else if (value === 1.5) { - return this.tt.prefDescPitch4; - } - else if (value === 2) { - return this.tt.prefDescPitch5; - } - } - else if (pref === 'prefDescRate') { - // default in the API is 0.1 to 10, where 1 is normal speaking voice - // our custom range offers several rates close to 1 - // plus a couple of crazy fast ones for sport - // Our more readable options (1-10) or mapped here to API values - if (value === 0.7) { - return 1; - } - else if (value === 0.8) { - return 2; - } - else if (value === 0.9) { - return 3; - } - else if (value === 1) { - return 4; - } - else if (value === 1.1) { - return 5; - } - else if (value === 1.2) { - return 6; - } - else if (value === 1.5) { - return 7; - } - else if (value === 2) { - return 8; - } - else if (value === 2.5) { - return 9; - } - else if (value === 3) { - return 10; - } - } - else if (pref === 'prefDescVolume') { - // values range from 0.1 to 1.0 - return value * 10; - } - return value; - }; - - AblePlayer.prototype.resetPrefsForm = function () { - - // Reset preferences form with default values from cookie - // Called when: - // User clicks cancel or close button in Prefs Dialog - // User presses Escape to close Prefs dialog - // User clicks Save in Prefs dialog, & there's more than one player on page - - var thisObj, cookie, available, i, prefName, prefId, thisDiv, thisId; - - thisObj = this; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (i=0; i<available.length; i++) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is a caption-related select box - $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]); - } - else { // all others are checkboxes - if (this[prefName] === 1) { - $('input[name="' + prefName + '"]').prop('checked',true); - } - else { - $('input[name="' + prefName + '"]').prop('checked',false); - } + // Reset preferences form with default values from preferences + // Called when: + // User clicks cancel or close button in Prefs Dialog + // User presses Escape to close Prefs dialog + // User clicks Save in Prefs dialog, & there's more than one player on page + + var thisObj, preferences, available, i, prefName; + + thisObj = this; + preferences = this.getPref(); + available = this.getAvailablePreferences(); + for (i=0; i<available.length; i++) { + prefName = available[i]['name']; + if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + // this is a caption-related select box + $('select[name="' + prefName + '"]').val(preferences.preferences[prefName]); + } else { // all others are checkboxes + if (this[prefName] === 1) { + $('input[name="' + prefName + '"]').prop('checked',true); + } else { + $('input[name="' + prefName + '"]').prop('checked',false); } } - // also restore style of sample caption div - this.stylizeCaptions(this.$sampleCapsDiv); - }; + } + // also restore style of sample caption div + this.stylizeCaptions(this.$sampleCapsDiv); + }; AblePlayer.prototype.savePrefsFromForm = function () { // Return a prefs object constructed from the form. // called when user saves the Preferences form - // update cookie with new value - var cookie, available, prefName, prefId, - voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, + // update preferences with new value + var preferences, available, prefName, prefId, + voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, numCapChanges, capSizeChanged, capSizeValue, newValue; numChanges = 0; numCapChanges = 0; // changes to caption-style-related preferences capSizeChanged = false; - cookie = this.getCookie(); + preferences = this.getPref(); available = this.getAvailablePreferences(); for (var i=0; i < available.length; i++) { // only prefs with labels are used in the Prefs form if (available[i]['label']) { prefName = available[i]['name']; prefId = this.mediaId + '_' + prefName; - if (prefName === 'prefDescVoice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; + if (prefName === 'prefDescVoice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; } voiceSelectId = this.mediaId + '_prefDescVoice'; this.prefDescVoice = $('select#' + voiceSelectId).find(':selected').val(); this.prefDescVoiceLang = $('select#' + voiceSelectId).find(':selected').attr('data-lang'); - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; } } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - numChanges++; - } - else if (prefName == 'prefDescMethod') { + preferences.voices.push(newVoice); + } + numChanges++; + } else if (prefName == 'prefDescMethod') { // As of v4.0.10, prefDescMethod is no longer a choice // this.prefDescMethod = $('input[name="' + prefName + '"]:checked').val(); this.prefDescMethod = 'video'; - if (this.prefDescMethod !== cookie.preferences['prefDescMethod']) { // user's preference has changed - cookie.preferences['prefDescMethod'] = this.prefDescMethod; + if (this.prefDescMethod !== preferences.preferences['prefDescMethod']) { // user's preference has changed + preferences.preferences['prefDescMethod'] = this.prefDescMethod; numChanges++; } - } - else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + } else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { // this is one of the caption-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref (for caption fields, not done elsewhere) this[prefName] = newValue; numChanges++; @@ -3961,37 +3710,32 @@ var AblePlayerInstances = []; capSizeChanged = true; capSizeValue = newValue; } - } - else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { + } else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { // this is one of the description-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref this[prefName] = newValue; numChanges++; } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes if ($('input[id="' + prefId + '"]').is(':checked')) { - cookie.preferences[prefName] = 1; + preferences.preferences[prefName] = 1; if (this[prefName] === 1) { // nothing has changed - } - else { + } else { // user has just turned this pref on this[prefName] = 1; numChanges++; } - } - else { // thisPref is not checked - cookie.preferences[prefName] = 0; + } else { // thisPref is not checked + preferences.preferences[prefName] = 0; if (this[prefName] === 1) { // user has just turned this pref off this[prefName] = 0; numChanges++; - } - else { + } else { // nothing has chaged } } @@ -3999,11 +3743,10 @@ var AblePlayerInstances = []; } } if (numChanges > 0) { - this.setCookie(cookie); - this.showAlert(this.tt.prefSuccess); - } - else { - this.showAlert(this.tt.prefNoChange); + this.setPrefs(preferences); + this.showAlert( this.translate( 'prefSuccess', 'Your changes have been saved.' ) ); + } else { + this.showAlert( this.translate( 'prefNoChange', "You didn't make any changes" ) ); } if (this.player === 'youtube' && (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) && @@ -4015,8 +3758,8 @@ var AblePlayerInstances = []; // there are multiple players on this page. // update prefs for ALL of them for (var i=0; i<AblePlayerInstances.length; i++) { - AblePlayerInstances[i].updatePrefs(); - AblePlayerInstances[i].geteferences(); + AblePlayerInstances[i].updatePlayerPrefs(); + AblePlayerInstances[i].loadCurrentPreferences(); AblePlayerInstances[i].resetPrefsForm(); if (numCapChanges > 0) { AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$captionsDiv); @@ -4026,10 +3769,9 @@ var AblePlayerInstances = []; } } } - } - else { + } else { // there is only one player - this.updatePrefs(); + this.updatePlayerPrefs(); if (numCapChanges > 0) { this.stylizeCaptions(this.$captionsDiv); // also apply same changes to descriptions, if present @@ -4040,16 +3782,14 @@ var AblePlayerInstances = []; } } - AblePlayer.prototype.updatePrefs = function () { + AblePlayer.prototype.updatePlayerPrefs = function () { // Update player based on current prefs. Safe to call multiple times. - - if (this.$transcriptDiv) { + if (this.$transcriptDiv) { // tabbable transcript if (this.prefTabbable === 1) { this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - else { + } else { this.$transcriptDiv.find('span.able-transcript-seekpoint').removeAttr('tabindex'); } @@ -4084,11 +3824,10 @@ var AblePlayerInstances = []; (function ($) { // See section 4.1 of dev.w3.org/html5/webvtt for format details. - AblePlayer.prototype.parseWebVTT = function(srcFile,text) { - -// var deferred = new $.Deferred(); -// var promise = deferred.promise(); + AblePlayer.prototype.parseWebVTT = function(data) { + let srcFile = data.src; + let text = data.text; // Normalize line ends to \n. text = text.replace(/(\r\n|\n|\r)/g,'\n'); @@ -4112,8 +3851,7 @@ var AblePlayerInstances = []; errString += err; if (console.warn) { console.warn(errString); - } - else if (console.log) { + } else if (console.log) { console.log(errString); } } @@ -4142,8 +3880,7 @@ var AblePlayerInstances = []; if (cutText[ii] === '\n') { state.column = 1; state.line += 1; - } - else { + } else { state.column += 1; } } @@ -4163,8 +3900,7 @@ var AblePlayerInstances = []; returnText = state.text; updatePosition(state, returnText); state.text = ''; - } - else { + } else { returnText = state.text.substring(0, nextEOL); updatePosition(state, returnText + '\n'); state.text = state.text.substring(nextEOL + 1); @@ -4174,12 +3910,7 @@ var AblePlayerInstances = []; function peekLine(state) { var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - return state.text; - } - else { - return state.text.substring(0, nextEOL); - } + return (nextEOL === -1) ? state.text : state.text.substring(0, nextEOL); } function parseFileBody(state) { @@ -4193,8 +3924,7 @@ var AblePlayerInstances = []; parseMetadataHeaders, eatAtLeast1EmptyLines, parseCuesAndComments]); - } - else { + } else { state.error = "WEBVTT signature not followed by whitespace."; } } @@ -4205,11 +3935,9 @@ var AblePlayerInstances = []; var nextLine = peekLine(state); if (nextLine.indexOf('-->') !== -1) { return; - } - else if (nextLine.length === 0) { + } else if (nextLine.length === 0) { return; - } - else { + } else { var keyValue = act(state, getMetadataKeyValue); state.metadata[keyValue[0]] = keyValue[1]; act(state, eatUntilEOLInclusive); @@ -4242,8 +3970,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -4257,8 +3984,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -4271,14 +3997,11 @@ var AblePlayerInstances = []; // If NOTE is not on a line all its own, it must be followed by a space or tab. if (nextLine.indexOf('NOTE') === 0 && ((nextLine.length === 4) || (nextLine[4] === ' ') || (nextLine[4] === '\t'))) { actList(state, [eatComment, eatEmptyLines]); - } - else if ($.trim(nextLine).length === 0 && state.text.length > 0) { + } else if (nextLine.trim().length === 0 && state.text.length > 0) { act(state, eatEmptyLines); - } - else if ($.trim(nextLine).length > 0) { + } else if (nextLine.trim().length > 0) { act(state, parseCue); - } - else { + } else { // Everythings parsed! return; } @@ -4301,8 +4024,7 @@ var AblePlayerInstances = []; errString += 'Expected cue timing for cueId \''+cueId+'\' but found: ' + nextLine + '\n'; if (console.warn) { console.warn(errString); - } - else if (console.log) { + } else if (console.log) { console.log(errString); } return; // Return leaving line for parseCuesAndComments to handle @@ -4371,8 +4093,7 @@ var AblePlayerInstances = []; // We'll use the tokens themselves as objects where possible. if (token.type === 'string') { current.children.push(token); - } - else if (token.type === 'startTag') { + } else if (token.type === 'startTag') { token.type = token.tagName; // Define token.parent; added by Terrill to fix bug end 'endTag' loop token.parent = current; @@ -4382,31 +4103,27 @@ var AblePlayerInstances = []; } current.children.push(token); current = token; - } - else if (token.tagName === 'rt' && current.tagName === 'ruby') { + } else if (token.tagName === 'rt' && current.tagName === 'ruby') { if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'c') { + } else if (token.tagName === 'c') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'v') { + } else if (token.tagName === 'v') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'lang') { + } else if (token.tagName === 'lang') { languageStack.push(token.annotation); if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; @@ -4414,22 +4131,18 @@ var AblePlayerInstances = []; current.children.push(token); current = token; } - } - else if (token.type === 'endTag') { + } else if (token.type === 'endTag') { if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) { // NOTE from Terrill: This was resulting in an error because current.parent was undefined // Fixed (I think) by assigning current token to token.parent in 'startTag' loop current = current.parent; - } - else if (token.tagName === 'lang' && current.type === 'lang') { + } else if (token.tagName === 'lang' && current.type === 'lang') { current = current.parent; languageStack.pop(); - } - else if (token.tagName === 'ruby' && current.type === 'rt') { + } else if (token.tagName === 'ruby' && current.type === 'rt') { current = current.parent.parent; } - } - else if (token.type === 'timestampTag') { + } else if (token.type === 'timestampTag') { var tempState = { text: token.value, error: null, @@ -4464,11 +4177,9 @@ var AblePlayerInstances = []; // Double newlines indicate end of token. if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { c = '\u0004'; - } - else if (state.text.length > 0) { + } else if (state.text.length > 0) { c = state.text[0]; - } - else { + } else { // End of file. c = '\u0004'; } @@ -4476,213 +4187,168 @@ var AblePlayerInstances = []; if (c === '&') { buffer = '&'; tokenState = 'escape'; - } - else if (c === '<') { + } else if (c === '<') { if (result.length === 0) { tokenState = 'tag'; - } - else { + } else { token.type = 'string'; token.value = result.join(''); return token; } - } - else if (c === '\u0004') { + } else if (c === '\u0004') { return {type: 'string', value: result.join('')}; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'escape') { + } else if (tokenState === 'escape') { if (c === '&') { result.push(buffer); buffer = '&'; - } - else if (c.match(/[0-9a-z]/)) { + } else if (c.match(/[0-9a-z]/)) { buffer += c; - } - else if (c === ';') { + } else if (c === ';') { if (buffer === '&') { result.push('&'); - } - else if (buffer === '<') { + } else if (buffer === '<') { result.push('<'); - } - else if (buffer === '>') { + } else if (buffer === '>') { result.push('>'); - } - else if (buffer === '&lrm') { + } else if (buffer === '&lrm') { result.push('\u200e'); - } - else if (buffer === '&rlm') { + } else if (buffer === '&rlm') { result.push('\u200f'); - } - else if (buffer === ' ') { + } else if (buffer === ' ') { result.push('\u00a0'); - } - else { + } else { result.push(buffer); result.push(';'); } tokenState = 'data'; - } - else if (c === '<' || c === '\u0004') { + } else if (c === '<' || c === '\u0004') { result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { // Handle unescaped & chars as strings + } else if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { // Handle unescaped & chars as strings result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else { + } else { result.push(buffer); tokenState = 'data'; } - } - else if (tokenState === 'tag') { + } else if (tokenState === 'tag') { if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '/') { + } else if (c === '/') { tokenState = 'endTag'; - } - else if (c.match('[0-9]')) { + } else if (c.match('[0-9]')) { tokenState = 'timestampTag'; result.push(c); - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); break; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = ''; token.type = 'startTag'; return token; - } - else { + } else { result.push(c); tokenState = 'startTag'; } - } - else if (tokenState === 'startTag') { + } else if (tokenState === 'startTag') { if (c === '\t' || c === '\u000c' || c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'startTagClass') { + } else if (tokenState === 'startTagClass') { if (c === '\t' || c === '\u000c' || c === ' ') { token.classes.push(buffer); buffer = ''; tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { token.classes.push(buffer); buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { token.classes.push(buffer); buffer = ""; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else { + } else { buffer += 'c'; } - } - else if (tokenState === 'startTagAnnotation') { + } else if (tokenState === 'startTagAnnotation') { if (c === '>') { cut(state, 1); - buffer = $.trim(buffer).replace(/ +/, ' '); + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else if (c === '\u0004') { - buffer = $.trim(buffer).replace(/ +/, ' '); + } else if (c === '\u0004') { + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else { + } else { buffer += c; } - } - else if (tokenState === 'endTag') { + } else if (tokenState === 'endTag') { if (c === '>') { cut(state, 1); token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'timestampTag') { + } else if (tokenState === 'timestampTag') { if (c === '>') { cut(state, 1); token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else { + } else { throw 'Unknown tokenState ' + tokenState; } @@ -4699,15 +4365,13 @@ var AblePlayerInstances = []; } while (true) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { // End of comment. return; - } - else if (nextLine.indexOf('-->') !== -1) { + } else if (nextLine.indexOf('-->') !== -1) { state.error = 'Invalid syntax: --> in comment.'; return; - } - else { + } else { cutLine(state); } } @@ -4725,8 +4389,7 @@ var AblePlayerInstances = []; function eatSignature(state) { if (state.text.substring(0,6) === 'WEBVTT') { cut(state, 6); - } - else { + } else { state.error = 'Invalid signature.'; } } @@ -4734,8 +4397,7 @@ var AblePlayerInstances = []; function eatArrow(state) { if (state.text.length < 3 || state.text.substring(0,3) !== '-->') { state.error = 'Missing -->'; - } - else { + } else { cut(state, 3); } } @@ -4743,8 +4405,7 @@ var AblePlayerInstances = []; function eatSingleSpaceOrTab(state) { if (state.text[0] === '\t' || state.text[0] === ' ') { cut(state, 1); - } - else { + } else { state.error = 'Missing space.'; } } @@ -4770,8 +4431,7 @@ var AblePlayerInstances = []; var nextEOL = state.text.indexOf('\n'); if (nextEOL === -1) { state.error = 'Missing EOL.'; - } - else { + } else { cut(state, nextEOL + 1); } } @@ -4779,10 +4439,9 @@ var AblePlayerInstances = []; function eatEmptyLines(state) { while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); - } - else { + } else { break; } } @@ -4793,11 +4452,10 @@ var AblePlayerInstances = []; var linesEaten = 0; while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); linesEaten += 1; - } - else { + } else { break; } } @@ -4814,7 +4472,9 @@ var AblePlayerInstances = []; } var timestamp = cut(state, nextSpace); - var results = /((\d\d):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(timestamp); + // The spec requires exactly 2 characters for minutes and seconds, and 2+ for hours, + // but some VTT generation creates 1 digit hour times (e.g. "1:02:24.000 --> 1:04:48.000") and it seems harmless to allow that here + var results = /((\d+):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(timestamp); if (!results) { state.error = 'Unable to parse timestamp'; @@ -4841,8 +4501,7 @@ var AblePlayerInstances = []; time += parseInt(seconds, 10); time += parseInt(results[6], 10) / 1000; - } - else { + } else { time += parseInt(results[7], 10); time += parseInt(results[8], 10) / 1000; } @@ -4856,23 +4515,13 @@ var AblePlayerInstances = []; AblePlayer.prototype.injectPlayerCode = function() { // create and inject surrounding HTML structure - // If IOS: - // If video: - // IOS does not support any of the player's functionality - // - everything plays in its own player - // Therefore, AblePlayer is not loaded & all functionality is disabled - // (this all determined. If this is IOS && video, this function is never called) - // If audio: - // HTML cannot be injected as a parent of the <audio> element - // It is therefore injected after the <audio> element - // This is only a problem in IOS 6 and earlier, - // & is a known bug, fixed in IOS 7 - - var thisObj, captionsContainer, prefsGroups, i; - thisObj = this; + // If iOS & video: + // iOS does not support any of the player's functionality - everything plays in its own player + // Therefore, AblePlayer is not loaded & all functionality is disabled + // (this all determined. If this is iOS && video, this function is never called) - // create three wrappers and wrap them around the media element. - // From inner to outer: + var captionsContainer; + // Wrappers, from inner to outer: // $mediaContainer - contains the original media element // $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions) // $ableWrapper - contains additional widgets (e.g., transcript window, sign window) @@ -4880,10 +4529,6 @@ var AblePlayerInstances = []; this.$ableDiv = this.$mediaContainer.wrap('<div class="able"></div>').parent(); this.$ableWrapper = this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(); this.$ableWrapper.addClass('able-skin-' + this.skin); - - this.$ableWrapper.css({ - 'width': this.playerWidth + 'px' - }); if (this.mediaType === 'video') { // youtube adds its own big play button @@ -4896,26 +4541,37 @@ var AblePlayerInstances = []; // add container that captions or description will be appended to // Note: new Jquery object must be assigned _after_ wrap, hence the temp captionsContainer variable - captionsContainer = $('<div>'); - if (this.mediaType === 'video') { - captionsContainer.addClass('able-vidcap-container'); - } - else if (this.mediaType === 'audio') { - captionsContainer.addClass('able-audcap-container'); - // hide this by default. It will be shown if captions are available + captionsContainer = $('<div>'); + if (this.mediaType === 'video') { + captionsContainer.addClass('able-vidcap-container'); + } else if (this.mediaType === 'audio') { + captionsContainer.addClass('able-audcap-container'); + // hide this by default. It will be shown if captions are available captionsContainer.addClass('captions-off'); } - this.injectPlayerControlArea(); // this may need to be injected after captions??? + this.injectPlayerControlArea(); // this may need to be injected after captions??? this.$captionsContainer = this.$mediaContainer.wrap(captionsContainer).parent(); - this.injectAlert(); + this.injectAlert(this.$ableDiv); this.injectPlaylist(); - + this.injectAudioPoster(); // Do this last, as it should be prepended to the top of this.$ableDiv // after everything else has prepended this.injectOffscreenHeading(); }; + AblePlayer.prototype.injectAudioPoster = function() { + if ( this.mediaType === 'audio' && this.hasPoster ) { + audioPoster = DOMPurify.sanitize(this.audioPoster); + audioPosterAlt = DOMPurify.sanitize(this.audioPosterAlt); + let audioPosterImg = document.createElement( 'img' ); + audioPosterImg.setAttribute( 'src', audioPoster ); + audioPosterImg.setAttribute( 'alt', audioPosterAlt ); + this.$audioWrapper = this.$playerDiv.wrap( '<div class="able-audio-wrapper">' ).parent(); + this.$audioWrapper.prepend( audioPosterImg ); + } + } + AblePlayer.prototype.injectOffscreenHeading = function () { // Inject an offscreen heading to the media container. @@ -4925,8 +4581,7 @@ var AblePlayerInstances = []; var headingType; if (this.playerHeadingLevel == '0') { // do NOT inject a heading (at author's request) - } - else { + } else { if (typeof this.playerHeadingLevel === 'undefined') { this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); // returns in integer 1-6 } @@ -4934,51 +4589,28 @@ var AblePlayerInstances = []; this.$headingDiv = $('<' + headingType + '>'); this.$ableDiv.prepend(this.$headingDiv); this.$headingDiv.addClass('able-offscreen'); - this.$headingDiv.text(this.tt.playerHeading); + this.$headingDiv.text( this.translate( 'playerHeading', 'Media player' ) ); } }; AblePlayer.prototype.injectBigPlayButton = function () { - var thisObj, svgData, buttonIcon, svgPath; - - thisObj = this; + var thisObj = this; this.$bigPlayButton = $('<button>', { 'class': 'able-big-play-button', 'aria-hidden': false, - 'aria-label': this.tt.play, + 'aria-label': this.translate( 'play', 'Play' ), + 'type': 'button', 'tabindex': 0 }); - if (this.iconType == 'svg') { - svgData = this.getSvgData('play'); - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - this.$bigPlayButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - this.$bigPlayButton.html(this.$bigPlayButton.html()); - } - else { // use icon font - this.$bigPlayIcon = $('<span>', { - 'class': 'icon-play', - }); - this.$bigPlayButton.append(this.$bigPlayIcon); - } + this.getIcon( this.$bigPlayButton, 'play' ); - this.$bigPlayButton.click(function (event) { - event.preventDefault(); + this.$bigPlayButton.on( 'click', function () { thisObj.handlePlay(); }); - + this.$mediaContainer.append(this.$bigPlayButton); }; @@ -4987,10 +4619,10 @@ var AblePlayerInstances = []; this.$playerDiv = $('<div>', { 'class' : 'able-player', 'role' : 'region', - 'aria-label' : this.mediaType + ' player' + 'aria-label' : ( 'audio' === this.mediaType ) ? this.translate( 'audioPlayer', 'audio player' ) : this.translate( 'videoPlayer', 'video player' ) }); - this.$playerDiv.addClass('able-'+this.mediaType); - if (this.hasPlaylist && this.showNowPlaying) { + this.$playerDiv.addClass('able-' + this.mediaType); + if (this.hasPlaylist && this.showNowPlaying) { this.$nowPlayingDiv = $('<div>',{ 'class' : 'able-now-playing', 'aria-live' : 'assertive', @@ -5019,8 +4651,9 @@ var AblePlayerInstances = []; this.$speed = $('<span>',{ 'class' : 'able-speed', - 'aria-live' : 'assertive' - }).text(this.tt.speed + ': 1x'); + 'aria-live' : 'assertive', + 'aria-atomic' : 'true' + }).text(this.translate( 'speed', 'Speed' ) + ': 1x'); this.$status = $('<span>',{ 'class' : 'able-status', @@ -5031,16 +4664,15 @@ var AblePlayerInstances = []; this.$statusBarDiv.append(this.$timer, this.$speed, this.$status); if (this.showNowPlaying) { this.$playerDiv.append(this.$nowPlayingDiv, this.$controllerDiv, this.$statusBarDiv); - } - else { + } else { this.$playerDiv.append(this.$controllerDiv, this.$statusBarDiv); } - if (this.mediaType === 'video') { - // the player controls go after the media & captions + + if (this.mediaType === 'video') { + // the player controls go after the media & captions this.$ableDiv.append(this.$playerDiv); - } - else { - // the player controls go before the media & captions + } else { + // the player controls go before the media & captions this.$ableDiv.prepend(this.$playerDiv); } }; @@ -5052,9 +4684,9 @@ var AblePlayerInstances = []; 'class': 'able-descriptions' }); // Add ARIA so description will be announced by screen readers - // Later (in description.js > showDescription()), + // Later (in description.js > showDescription()), // if browser supports Web Speech API and this.descMethod === 'browser' - // these attributes will be removed + // these attributes will be removed this.$descDiv.attr({ 'aria-live': 'assertive', 'aria-atomic': 'true' @@ -5066,54 +4698,114 @@ var AblePlayerInstances = []; }; AblePlayer.prototype.getDefaultWidth = function(which) { - + let viewportMaxwidth = window.innerWidth; // return default width of resizable elements // these values are somewhat arbitrary, but seem to result in good usability // if users disagree, they can resize (and resposition) them if (which === 'transcript') { - return 450; - } - else if (which === 'sign') { - return 400; + return ( viewportMaxwidth <= 450 ) ? viewportMaxwidth : 450; + } else if (which === 'sign') { + return ( viewportMaxwidth <= 400 ) ? viewportMaxwidth : 400; } }; + /** + * Reposition draggable windows when switched into fullscreen. + * + * @param {string} which 'transcript' or 'sign'. + / + AblePlayer.prototype.rePositionDraggableWindow = function (which) { + + let preferences, $window; + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + console.log( $window ); + if ( which === 'transcript' && $window ) { + if (typeof preferences.transcript !== 'undefined') { + this.prevTranscriptPosition = preferences.transcript; + } + $window.css({ + 'top': 0, + 'left': 0 + }); + } else if ( 'sign' === which && $window ) { + if (typeof preferences.sign !== 'undefined') { + this.prevSignPosition = preferences.sign; + } + $window.css({ + 'top': 0, + 'right': 0, + 'left': 'auto' + }); + } + } + AblePlayer.prototype.positionDraggableWindow = function (which, width) { // which is either 'transcript' or 'sign' + var preferences, preferencePos, $window, windowPos, viewportWidth, windowWidth; - var cookie, cookiePos, $window, dragged, windowPos, currentWindowPos, firstTime, zIndex; - - cookie = this.getCookie(); + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + if ( ! $window ) { + return; + } if (which === 'transcript') { - $window = this.$transcriptArea; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.transcript; + if (typeof preferences.transcript !== 'undefined') { + preferencePos = preferences.transcript; } - } - else if (which === 'sign') { - $window = this.$signWindow; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.sign; + if ( this.prevTranscriptPosition ) { + preferencePos = this.prevTranscriptPosition; + this.prevTranscriptPosition = false; + } + } else if (which === 'sign') { + if (typeof preferences.sign !== 'undefined') { + preferencePos = preferences.sign; + } + if ( this.prevSignPosition ) { + preferencePos = this.prevSignPosition; + this.prevSignPosition = false; } } - if (typeof cookiePos !== 'undefined' && !($.isEmptyObject(cookiePos))) { - // position window using stored values from cookie + if (typeof preferencePos !== 'undefined' && !($.isEmptyObject(preferencePos))) { + // position window using stored values from preferences $window.css({ - 'position': cookiePos['position'], - 'width': cookiePos['width'], - 'z-index': cookiePos['zindex'] + 'position': preferencePos['position'], + 'width': preferencePos['width'], + 'z-index': preferencePos['zindex'] }); - if (cookiePos['position'] === 'absolute') { + if (preferencePos['position'] === 'absolute') { $window.css({ - 'top': cookiePos['top'], - 'left': cookiePos['left'] + 'top': preferencePos['top'], + 'left': preferencePos['left'] }); + // Check whether the window is above the top of the viewport. + topPosition = $window.offset().top; + leftPosition = $window.offset().left; + viewportWidth = window.innerWidth; + windowWidth = $window.width(); + if ( topPosition < 0 ) { + $window.css({ + 'top': preferencePos['top'] - topPosition + }); + } + // If draggable window is off screen to the left. + if ( leftPosition < 0 && ! this.restoringAfterFullscreen ) { + console.log( leftPosition ); + $window.css({ + 'left': preferencePos['left'] - leftPosition + }); + } + // If draggable window is off screen to the right. + if ( viewportWidth - leftPosition < 30 ) { + $window.css({ + 'left': viewportWidth - windowWidth + }); + } } - // since cookie is not page-specific, z-index needs may vary across different pages + // since preferences are not page-specific, z-index needs may vary across different pages this.updateZIndex(which); - } - else { + } else { // position window using default values windowPos = this.getOptimumPosition(which, width); if (typeof width === 'undefined') { @@ -5145,37 +4837,30 @@ var AblePlayerInstances = []; // else if there is room the left of the player, position element there // else position element beneath player - var gap, position, ableWidth, ableHeight, ableOffset, ableTop, ableLeft, - windowWidth, otherWindowWidth, zIndex; + var gap, position, ableWidth, ableOffset, ableLeft, windowWidth, otherWindowWidth; if (typeof targetWidth === 'undefined') { targetWidth = this.getDefaultWidth(targetWindow); } gap = 5; // number of pixels to preserve between Able Player objects - position = []; // position, top, left ableWidth = this.$ableDiv.width(); - ableHeight = this.$ableDiv.height(); ableOffset = this.$ableDiv.offset(); - ableTop = ableOffset.top; ableLeft = ableOffset.left; windowWidth = $(window).width(); otherWindowWidth = 0; // width of other visiable draggable windows will be added to this if (targetWindow === 'transcript') { - if (typeof this.$signWindow !== 'undefined') { - if (this.$signWindow.is(':visible')) { - otherWindowWidth = this.$signWindow.width() + gap; - } + // If placing the transcript window, check position of sign window first. + if (typeof this.$signWindow !== 'undefined' && (this.$signWindow.is(':visible'))) { + otherWindowWidth = this.$signWindow.width() + gap; } - } - else if (targetWindow === 'sign') { - if (typeof this.$transcriptArea !== 'undefined') { - if (this.$transcriptArea.is(':visible')) { - otherWindowWidth = this.$transcriptArea.width() + gap; - } + } else if (targetWindow === 'sign') { + // If placing the sign window, check position of transcript window first. + if (typeof this.$transcriptArea !== 'undefined' && (this.$transcriptArea.is(':visible'))) { + otherWindowWidth = this.$transcriptArea.width() + gap; } } if (targetWidth < (windowWidth - (ableLeft + ableWidth + gap + otherWindowWidth))) { @@ -5183,14 +4868,12 @@ var AblePlayerInstances = []; position[0] = 'absolute'; position[1] = 0; position[2] = ableWidth + otherWindowWidth + gap; - } - else if (targetWidth + gap < ableLeft) { + } else if (targetWidth + gap < ableLeft) { // there's room to the right of $ableDiv position[0] = 'absolute'; position[1] = 0; position[2] = ableLeft - targetWidth - gap; - } - else { + } else { // position element below $ableDiv position[0] = 'relative'; // no need to define top, left, or z-index @@ -5198,32 +4881,31 @@ var AblePlayerInstances = []; return position; }; - AblePlayer.prototype.injectAlert = function () { - + AblePlayer.prototype.injectAlert = function ($container) { // inject two alerts, one visible for all users and one for screen reader users only - - var top; - this.$alertBox = $('<div role="alert"></div>'); this.$alertBox.addClass('able-alert'); this.$alertBox.hide(); - this.$alertBox.appendTo(this.$ableDiv); - if (this.mediaType == 'audio') { - top = '-10'; - } - else { - // position just below top of video by default - // but this will change after video player is fully sized - // see control.js > resizePlayer() - top = '10'; - } - this.$alertBox.css({ - top: top + 'px' + + var $alertText = $( '<span></span>' ); + $alertText.appendTo(this.$alertBox); + + var $alertDismiss = $('<button type="button"></button>' ); + $alertDismiss.attr( 'aria-label', this.translate( 'dismissButton', 'Dismiss' ) ); + $alertDismiss.text( '×' ); + $alertDismiss.appendTo(this.$alertBox); + + $alertDismiss.on( 'click', function(e) { + $(this).parent('div').hide(); }); - this.$srAlertBox = $('<div role="alert"></div>'); - this.$srAlertBox.addClass('able-screenreader-alert'); - this.$srAlertBox.appendTo(this.$ableDiv); + this.$alertBox.appendTo($container); + + if ( ! this.$srAlertBox ) { + this.$srAlertBox = $('<div role="alert"></div>'); + this.$srAlertBox.addClass('able-screenreader-alert'); + this.$srAlertBox.appendTo($container); + } }; AblePlayer.prototype.injectPlaylist = function () { @@ -5243,9 +4925,8 @@ var AblePlayerInstances = []; // 'which' parameter is either 'captions', 'chapters', 'prefs', 'transcript-window' or 'sign-window' // 'tracks', if provided, is a list of tracks to be used as menu items - var thisObj, $menu, includeMenuItem, prefCats, i, $menuItem, prefCat, whichPref, - hasDefault, track, windowOptions, whichPref, whichMenu, - $thisItem, $prevItem, $nextItem; + var thisObj, $menu, includeMenuItem, i, $menuItem, prefCat, whichPref, hasDefault, track, + windowOptions, $thisItem, $prevItem, $nextItem, hasDescription, hasTranscript; thisObj = this; @@ -5263,22 +4944,26 @@ var AblePlayerInstances = []; if (which === 'prefs') { if (this.prefCats.length > 1) { for (i = 0; i < this.prefCats.length; i++) { + prefCat = this.prefCats[i]; + hasDescription = ( thisObj.hasDescTracks || thisObj.hasOpenDesc || thisObj.hasClosedDesc ) ? true : false; + hasTranscript = ( thisObj.transcriptType === null ) ? false : true; + + // If this player does not have descriptions or transcripts, do not output that option preferences. + if ( prefCat === 'descriptions' && ! hasDescription || prefCat === 'transcript' && ! hasTranscript ) { + continue; + } $menuItem = $('<li></li>',{ 'role': 'menuitem', 'tabindex': '-1' }); - prefCat = this.prefCats[i]; if (prefCat === 'captions') { - $menuItem.text(this.tt.prefMenuCaptions); - } - else if (prefCat === 'descriptions') { - $menuItem.text(this.tt.prefMenuDescriptions); - } - else if (prefCat === 'keyboard') { - $menuItem.text(this.tt.prefMenuKeyboard); - } - else if (prefCat === 'transcript') { - $menuItem.text(this.tt.prefMenuTranscript); + $menuItem.text( this.translate( 'prefMenuCaptions', 'Captions' ) ); + } else if (prefCat === 'descriptions') { + $menuItem.text( this.translate( 'prefMenuDescriptions', 'Descriptions' ) ); + } else if (prefCat === 'keyboard') { + $menuItem.text( this.translate( 'prefMenuKeyboard', 'Keyboard' ) ); + } else if (prefCat === 'transcript') { + $menuItem.text( this.translate( 'prefMenuTranscript', 'Transcript' ) ); } $menuItem.on('click',function() { whichPref = $(this).text(); @@ -5286,14 +4971,11 @@ var AblePlayerInstances = []; thisObj.setFullscreen(false); if (whichPref === thisObj.tt.prefMenuCaptions) { thisObj.captionPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuDescriptions) { + } else if (whichPref === thisObj.tt.prefMenuDescriptions) { thisObj.descPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuKeyboard) { + } else if (whichPref === thisObj.tt.prefMenuKeyboard) { thisObj.keyboardPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuTranscript) { + } else if (whichPref === thisObj.tt.prefMenuTranscript) { thisObj.transcriptPrefsDialog.show(); } thisObj.closePopups(); @@ -5302,22 +4984,19 @@ var AblePlayerInstances = []; $menu.append($menuItem); } this.$prefsButton.attr('data-prefs-popup','menu'); - } - else if (this.prefCats.length == 1) { + } else if (this.prefCats.length == 1) { // only 1 category, so don't create a popup menu. // Instead, open dialog directly when user clicks Prefs button this.$prefsButton.attr('data-prefs-popup',this.prefCats[0]); } - } - else if (which === 'captions' || which === 'chapters') { + } else if (which === 'captions' || which === 'chapters') { hasDefault = false; for (i = 0; i < tracks.length; i++) { track = tracks[i]; - if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { - includeMenuItem = false; - } - else { - includeMenuItem = true; + if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { + includeMenuItem = false; + } else { + includeMenuItem = true; } if (includeMenuItem) { $menuItem = $('<li></li>',{ @@ -5328,16 +5007,14 @@ var AblePlayerInstances = []; if (track.def && this.prefCaptions == 1) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); - } + } // Get a label using track data if (which == 'captions') { $menuItem.text(track.label); $menuItem.on('click',this.getCaptionClickFunction(track)); - } - else if (which == 'chapters') { + } else if (which == 'chapters') { $menuItem.text(this.flattenCueForCaption(track) + ' - ' + this.formatSecondsAsColonTime(track.start)); $menuItem.on('click',this.getChapterClickFunction(track.start)); } @@ -5349,31 +5026,29 @@ var AblePlayerInstances = []; $menuItem = $('<li></li>',{ 'role': 'menuitemradio', 'tabindex': '-1', - }).text(this.tt.captionsOff); + }).text( this.translate( 'captionsOff', 'Captions off' ) ); if (this.prefCaptions === 0) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); } $menuItem.on('click',this.getCaptionOffFunction()); $menu.append($menuItem); } - } - else if (which === 'transcript-window' || which === 'sign-window') { + } else if (which === 'transcript-window' || which === 'sign-window') { windowOptions = []; windowOptions.push({ 'name': 'move', - 'label': this.tt.windowMove + 'label': this.translate( 'windowMove', 'Move' ) }); windowOptions.push({ 'name': 'resize', - 'label': this.tt.windowResize + 'label': this.translate( 'windowResize', 'Resize' ) }); windowOptions.push({ 'name': 'close', - 'label': this.tt.windowClose + 'label': this.translate( 'windowClose', 'Close' ) }); for (i = 0; i < windowOptions.length; i++) { $menuItem = $('<li></li>',{ @@ -5382,7 +5057,7 @@ var AblePlayerInstances = []; 'data-choice': windowOptions[i].name }); $menuItem.text(windowOptions[i].label); - $menuItem.on('click mousedown',function(e) { + $menuItem.on('click',function(e) { e.stopPropagation(); if (typeof e.button !== 'undefined' && e.button !== 0) { // this was a mouse click (if click is triggered by keyboard, e.button is undefined) @@ -5405,61 +5080,50 @@ var AblePlayerInstances = []; if ($menu.find('li[lang=' + this.captionLang + ']')) { // a track exists for the default language. Check that item in the menu $menu.find('li[lang=' + this.captionLang + ']').attr('aria-checked','true'); - } - else { + } else { // check the last item (captions off) $menu.find('li').last().attr('aria-checked','true'); } - } - else if (which === 'chapters') { + } else if (which === 'chapters') { if ($menu.find('li:contains("' + this.defaultChapter + '")')) { $menu.find('li:contains("' + this.defaultChapter + '")').attr('aria-checked','true').addClass('able-focus'); - } - else { + } else { $menu.find('li').first().attr('aria-checked','true').addClass('able-focus'); } } // add keyboard handlers for navigating within popups $menu.on('keydown',function (e) { - - whichMenu = $(this).attr('id').split('-')[1]; + $thisItem = $(this).find('li:focus'); if ($thisItem.is(':first-child')) { // this is the first item in the menu $prevItem = $(this).find('li').last(); // wrap to bottom $nextItem = $thisItem.next(); - } - else if ($thisItem.is(':last-child')) { + } else if ($thisItem.is(':last-child')) { // this is the last Item $prevItem = $thisItem.prev(); $nextItem = $(this).find('li').first(); // wrap to top - } - else { + } else { $prevItem = $thisItem.prev(); $nextItem = $thisItem.next(); } - if (e.which === 9) { // Tab + if (e.key === 'Tab') { if (e.shiftKey) { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else { + $prevItem.trigger('focus').addClass('able-focus'); + } else { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); + $nextItem.trigger('focus').addClass('able-focus'); } - } - else if (e.which === 40 || e.which === 39) { // down or right arrow + } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - else if (e.which == 38 || e.which === 37) { // up or left arrow + $nextItem.trigger('focus').addClass('able-focus'); + } else if (e.key == 'ArrowUp' || e.key === 'ArrowLeft') { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else if (e.which === 32 || e.which === 13) { // space or enter - $thisItem.click(); - } - else if (e.which === 27) { // Escape + $prevItem.trigger('focus').addClass('able-focus'); + } else if (e.key === ' ' || e.key === 'Enter') { + $thisItem.trigger( 'click' ); + } else if (e.key === 'Escape') { $thisItem.removeClass('able-focus'); thisObj.closePopups(); e.stopPropagation; @@ -5476,7 +5140,7 @@ var AblePlayerInstances = []; if (this.chaptersPopup && this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); - this.$chaptersButton.attr('aria-expanded','false').focus(); + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); } if (this.captionsPopup && this.captionsPopup.is(':visible')) { this.captionsPopup.hide(); @@ -5498,15 +5162,15 @@ var AblePlayerInstances = []; },100); } if (this.$volumeSlider && this.$volumeSlider.is(':visible')) { - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeButton.attr('aria-expanded', 'false').focus(); + this.$volumeSlider.hide().attr('aria-hidden','true'); + this.$volumeButton.attr('aria-expanded', 'false').trigger('focus'); } if (this.$transcriptPopup && this.$transcriptPopup.is(':visible')) { - this.hidingPopup = true; + this.hidingPopup = true; this.$transcriptPopup.hide(); // restore menu items to their original state this.$transcriptPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$transcriptPopupButton.attr('aria-expanded','false').focus(); + this.$transcriptPopupButton.attr('aria-expanded','false').trigger('focus'); // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; @@ -5516,7 +5180,7 @@ var AblePlayerInstances = []; this.$signPopup.hide(); // restore menu items to their original state this.$signPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$signPopupButton.attr('aria-expanded','false').focus(); + this.$signPopupButton.attr('aria-expanded','false').trigger('focus'); } }; @@ -5526,10 +5190,7 @@ var AblePlayerInstances = []; // parameter 'which' is passed if refreshing content of an existing popup ('captions' or 'chapters') // If which is undefined, automatically setup 'captions', 'chapters', and 'prefs' popups // However, only setup 'transcript-window' and 'sign-window' popups if passed as value of which - var popups, thisObj, hasDefault, i, j, - tracks, track, $trackButton, $trackLabel, - radioName, radioId, $menu, $menuItem, - prefCats, prefCat, prefLabel; + var popups, thisObj, i, tracks; popups = []; if (typeof which === 'undefined') { @@ -5556,33 +5217,26 @@ var AblePlayerInstances = []; thisObj = this; for (var i=0; i<popups.length; i++) { var popup = popups[i]; - hasDefault = false; if (popup == 'prefs') { this.prefsPopup = this.createPopup('prefs'); - } - else if (popup == 'captions') { + } else if (popup == 'captions') { if (typeof this.captionsPopup === 'undefined' || !this.captionsPopup) { this.captionsPopup = this.createPopup('captions',this.captions); } - } - else if (popup == 'chapters') { + } else if (popup == 'chapters') { if (this.selectedChapters) { tracks = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { tracks = this.chapters[0].cues; - } - else { + } else { tracks = []; } if (typeof this.chaptersPopup === 'undefined' || !this.chaptersPopup) { this.chaptersPopup = this.createPopup('chapters',tracks); } - } - else if (popup == 'transcript-window') { + } else if (popup == 'transcript-window') { return this.createPopup('transcript-window'); - } - else if (popup == 'sign-window') { + } else if (popup == 'sign-window') { return this.createPopup('sign-window'); } } @@ -5591,101 +5245,99 @@ var AblePlayerInstances = []; AblePlayer.prototype.provideFallback = function() { - // provide fallback in case of a critical error building the player - // to test, set data-test-fallback to either of the following values: - // 1 = emulate failure to build Able Player - // 2 = emulate browser that doesn't support HTML5 media + // provide fallback in case of a critical error building the player + // to test, set data-test-fallback to either of the following values: + // 1 = emulate failure to build Able Player + // 2 = emulate browser that doesn't support HTML5 media var i, $fallback; - if (this.usingFallback) { - // fallback has already been implemented. + if (this.usingFallback) { + // fallback has already been implemented. // stopgap to prevent this function from executing twice on the same media element - return; - } - else { - this.usingFallback = true; + return; + } else { + this.usingFallback = true; } - if (!this.testFallback) { - // this is not a test. - // an actual error has resulted in this function being called. - // use scenario 1 - this.testFallback = 1; + if (!this.testFallback) { + // this is not a test. + // an actual error has resulted in this function being called. + // use scenario 1 + this.testFallback = 1; } - if (typeof this.$media === 'undefined') { - // this function has been called prior to initialize.js > reinitialize() + if (typeof this.$media === 'undefined') { + // this function has been called prior to initialize.js > reinitialize() // before doing anything, need to create the jQuery media object - this.$media = $(this.media); - } - - // get/assign an id for the media element - if (this.$media.attr('id')) { - this.mediaId = this.$media.attr('id'); + this.$media = $(this.media); } - else { + + // get/assign an id for the media element + if (this.$media.attr('id')) { + this.mediaId = this.$media.attr('id'); + } else { this.mediaId = 'media' + Math.floor(Math.random() 1000000000).toString(); - } - - // check whether element has nested fallback content - this.hasFallback = false; - if (this.$media.children().length) { - i = 0; - while (i < this.$media.children().length && !this.hasFallback) { - if (!(this.$media.children()[i].tagName === 'SOURCE' || - this.$media.children()[i].tagName === 'TRACK')) { - // this element is something other than <source> or <track> - this.hasFallback = true; + } + + // check whether element has nested fallback content + this.hasFallback = false; + if (this.$media.children().length) { + i = 0; + while (i < this.$media.children().length && !this.hasFallback) { + if (!(this.$media.children()[i].tagName === 'SOURCE' || + this.$media.children()[i].tagName === 'TRACK')) { + // this element is something other than <source> or <track> + this.hasFallback = true; } - i++; + i++; } } - if (!this.hasFallback) { - // the HTML code does not include any nested fallback content - // inject our own - // NOTE: this message is not translated, since fallback may be needed - // due to an error loading the translation file - // This will only be needed on very rare occasions, so English is ok. - $fallback = $('<p>').text('Media player unavailable.'); - this.$media.append($fallback); + if (!this.hasFallback) { + // the HTML code does not include any nested fallback content + // inject our own + // NOTE: this message is not translated, since fallback may be needed + // due to an error loading the translation file + // This will only be needed on very rare occasions, so English is ok. + $fallback = $('<p>').text('Media player unavailable.'); + this.$media.append($fallback); } - // get height and width attributes, if present + // get height and width attributes, if present // and add them to a style attribute - if (this.$media.attr('width')) { - this.$media.css('width',this.$media.attr('width') + 'px'); + if (this.$media.attr('width')) { + this.$media.css('width',this.$media.attr('width') + 'px'); } - if (this.$media.attr('height')) { - this.$media.css('height',this.$media.attr('height') + 'px'); + if (this.$media.attr('height')) { + this.$media.css('height',this.$media.attr('height') + 'px'); } - // Remove data-able-player attribute - this.$media.removeAttr('data-able-player'); + // Remove data-able-player attribute + this.$media.removeAttr('data-able-player'); // Add controls attribute (so browser will add its own controls) - this.$media.prop('controls',true); + this.$media.prop('controls',true); - if (this.testFallback == 2) { + if (this.testFallback == 2) { - // emulate browser failure to support HTML5 media by changing the media tag name - // browsers should display the supported content that's nested inside + // emulate browser failure to support HTML5 media by changing the media tag name + // browsers should display the supported content that's nested inside $(this.$media).replaceWith($('<foobar id="foobar-' + this.mediaId + '">')); - this.$newFallbackElement = $('#foobar-' + this.mediaId); - - // append all children from the original media - if (this.$media.children().length) { - i = this.$media.children().length - 1; - while (i >= 0) { - this.$newFallbackElement.prepend($(this.$media.children()[i])); - i--; + this.$newFallbackElement = $('#foobar-' + this.mediaId); + + // append all children from the original media + if (this.$media.children().length) { + i = this.$media.children().length - 1; + while (i >= 0) { + this.$newFallbackElement.prepend($(this.$media.children()[i])); + i--; } } - if (!this.hasFallback) { + if (!this.hasFallback) { // inject our own fallback content, defined above this.$newFallbackElement.append($fallback); } } - return; + return; }; AblePlayer.prototype.calculateControlLayout = function () { @@ -5699,7 +5351,7 @@ var AblePlayerInstances = []; // 3 = Bottom right (legacy skin only) // Each key contains an array of control names to put in that section. - var controlLayout, volumeSupported, playbackSupported, totalButtonWidth, numA11yButtons; + var controlLayout, playbackSupported, numA11yButtons; controlLayout = []; controlLayout[0] = []; @@ -5722,8 +5374,7 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[0].push('previous'); controlLayout[0].push('next'); - } - else if (this.skin == '2020') { + } else { controlLayout[0].push('previous'); controlLayout[0].push('next'); } @@ -5735,8 +5386,7 @@ var AblePlayerInstances = []; controlLayout[2].push('slower'); controlLayout[2].push('faster'); } - } - else { + } else { playbackSupported = false; } @@ -5745,8 +5395,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('captions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('captions'); } } @@ -5754,28 +5403,25 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('sign'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('sign'); } } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { if (this.hasOpenDesc || this.hasClosedDesc) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('descriptions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('descriptions'); } } } - if (this.transcriptType === 'popup' && !(this.hideTranscriptButton)) { + if (this.transcriptType !== null && !(this.hideTranscriptButton)) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('transcript'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('transcript'); } } @@ -5783,8 +5429,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('chapters'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('chapters'); } } @@ -5801,32 +5446,26 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[3].push('preferences'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('preferences'); } - if (this.mediaType === 'video' && this.allowFullscreen) { + if (this.mediaType === 'video' && this.allowFullscreen && this.nativeFullscreenSupported() ) { if (this.skin === 'legacy') { controlLayout[3].push('fullscreen'); - } - else { + } else { controlLayout[1].push('fullscreen'); } } if (this.browserSupportsVolume()) { - volumeSupported = true; // defined in case we decide to move volume button elsewhere this.volumeButton = 'volume-' + this.getVolumeName(this.volume); if (this.skin === 'legacy') { controlLayout[1].push('volume'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('volume'); } - } - else { - volumeSupported = false; + } else { this.volume = false; } return controlLayout; @@ -5842,12 +5481,10 @@ var AblePlayerInstances = []; // some controls are aligned on the left, and others on the right var thisObj, baseSliderWidth, controlLayout, numSections, - i, j, k, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, $pipeImg, - svgData, svgPath, control, - $buttonLabel, $buttonImg, buttonImgSrc, buttonTitle, $newButton, iconClass, buttonIcon, - buttonUse, buttonText, position, buttonHeight, buttonWidth, buttonSide, controllerWidth, - tooltipId, tooltipY, tooltipX, tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, - captionLabel, popupMenuId; + i, j, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, control, + buttonTitle, $newButton, buttonText, position, buttonHeight, + buttonWidth, buttonSide, controllerWidth, tooltipId, tooltipY, tooltipX, + tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, captionLabel, popupMenuId; thisObj = this; @@ -5865,33 +5502,36 @@ var AblePlayerInstances = []; }).hide(); this.$controllerDiv.append(this.$tooltipDiv); - if (this.skin == '2020') { + if (this.skin == '2020') { // add a full-width seek bar $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); this.$controllerDiv.append($sliderDiv); - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); } + // add a full-width seek bar + let $controlRow = $('<div class="able-control-row"></div>'); + this.$controllerDiv.append($controlRow); + for (i = 0; i < numSections; i++) { controls = controlLayout[i]; if ((i % 2) === 0) { // even keys on the left $controllerSpan = $('<div>',{ 'class': 'able-left-controls' }); - } - else { // odd keys on the right + } else { // odd keys on the right $controllerSpan = $('<div>',{ 'class': 'able-right-controls' }); } - this.$controllerDiv.append($controllerSpan); + $controlRow.append($controllerSpan); for (j=0; j<controls.length; j++) { control = controls[j]; if (control === 'seek') { $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); $controllerSpan.append($sliderDiv); if (typeof this.duration === 'undefined' || this.duration === 0) { // set arbitrary starting duration, and change it when duration is known @@ -5899,53 +5539,17 @@ var AblePlayerInstances = []; // also set elapsed to 0 this.elapsed = 0; } - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - else if (control === 'pipe') { + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + } else if (control === 'pipe') { $pipe = $('<span>', { 'tabindex': '-1', - 'aria-hidden': 'true' + 'aria-hidden': 'true', + 'class': 'able-pipe', }); - if (this.iconType === 'font') { - $pipe.addClass('icon-pipe'); - } - else { - $pipeImg = $('<img>', { - src: this.rootPath + 'button-icons/' + this.iconColor + '/pipe.png', - alt: '', - role: 'presentation' - }); - $pipe.append($pipeImg); - } + $pipe.append('|'); $controllerSpan.append($pipe); - } - else { + } else { // this control is a button - if (control === 'volume') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + this.volumeButton + '.png'; - } - else if (control === 'fullscreen') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/fullscreen-expand.png'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/turtle.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/slower.png'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/rabbit.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/faster.png'; - } - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + control + '.png'; - } buttonTitle = this.getButtonTitle(control); // icomoon documentation recommends the following markup for screen readers: @@ -5963,7 +5567,6 @@ var AblePlayerInstances = []; $newButton = $('<div>',{ 'role': 'button', 'tabindex': '0', - 'aria-label': buttonTitle, 'class': 'able-button-handler-' + control }); @@ -5977,16 +5580,14 @@ var AblePlayerInstances = []; 'aria-controls': popupMenuId, 'aria-haspopup': 'menu', 'aria-expanded': 'false' - }); - } - else if (this.prefCats.length === 1) { + }); + } else if (this.prefCats.length === 1) { // Prefs button will trigger a dialog $newButton.attr({ 'aria-haspopup': 'dialog' }); } - } - else if (control === 'volume') { + } else if (control === 'volume') { popupMenuId = this.mediaId + '-volume-slider'; // volume slider popup is not a menu or a dialog // therefore, using aria-expanded rather than aria-haspopup to communicate properties/state @@ -6002,130 +5603,23 @@ var AblePlayerInstances = []; } } } - if (this.iconType === 'font') { - if (control === 'volume') { - iconClass = 'icon-' + this.volumeButton; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-turtle'; - } - else { - iconClass = 'icon-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-rabbit'; - } - else { - iconClass = 'icon-faster'; - } - } - else { - iconClass = 'icon-' + control; - } - buttonIcon = $('<span>',{ - 'class': iconClass, - 'aria-hidden': 'true' - }); - $newButton.append(buttonIcon); + var getControl = control; + if ( control === 'faster' && this.speedIcons === 'animals' ) { + getControl = 'rabbit'; } - else if (this.iconType === 'svg') { - - /* - // Unused option for adding SVG: - // Use <use> element to link to button-icons/able-icons.svg - // Advantage: SVG file can be cached - // Disadvantage: Not supported by Safari 6, IE 6-11, or Edge 12 - // Instead, adding <svg> element within each <button> - if (control === 'volume') { - iconClass = 'svg-' + this.volumeButton; - } - else if (control === 'fullscreen') { - iconClass = 'svg-fullscreen-expand'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-turtle'; - } - else { - iconClass = 'svg-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-rabbit'; - } - else { - iconClass = 'svg-faster'; - } - } - else { - iconClass = 'svg-' + control; - } - buttonIcon = $('<svg>',{ - 'class': iconClass - }); - buttonUse = $('<use>',{ - 'xlink:href': this.rootPath + 'button-icons/able-icons.svg#' + iconClass - }); - buttonIcon.append(buttonUse); - / - var svgData; - if (control === 'volume') { - svgData = this.getSvgData(this.volumeButton); - } - else if (control === 'fullscreen') { - svgData = this.getSvgData('fullscreen-expand'); - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('turtle'); - } - else { - svgData = this.getSvgData('slower'); - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('rabbit'); - } - else { - svgData = this.getSvgData('faster'); - } - } - else { - svgData = this.getSvgData(control); - } - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - $newButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - $newButton.html($newButton.html()); + if ( control === 'slower' && this.speedIcons === 'animals' ) { + getControl = 'turtle'; } - else { - // use images - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); + if ( control === 'volume' ) { + this.getIcon( $newButton, this.volumeButton ); + } else { + if ( 'fullscreen' === getControl ) { + getControl = ( this.fullscreen ) ? 'fullscreen-collapse' : 'fullscreen-expand'; + } + this.getIcon( $newButton, getControl ); } - // add the visibly-hidden label for screen readers that don't support aria-label on the button - var $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(buttonTitle); - $newButton.append($buttonLabel); + + this.setText($newButton,buttonTitle); // add an event listener that displays a tooltip on mouseenter or focus $newButton.on('mouseenter focus',function(e) { @@ -6133,73 +5627,63 @@ var AblePlayerInstances = []; // since the same tooltip div is used, it's location just changes. clearTimeout(tooltipTimerId); - var buttonText = $(this).attr('aria-label'); + buttonText = $(this).attr('aria-label'); // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); + position = $(this).position(); + buttonHeight = $(this).height(); + buttonWidth = $(this).width(); // position() is expressed using top and left (of button); // add right (of button) too, for convenience - var controllerWidth = thisObj.$controllerDiv.width(); + controllerWidth = thisObj.$controllerDiv.width(); position.right = controllerWidth - position.left - buttonWidth; - // The following formula positions tooltip above the button - // var tooltipY = position.top - buttonHeight - 15; - - // The following formula positions tooltip below the button + // The following formula positions tooltip below the button // which allows the tooltip to be hoverable as per WCAG 2.x SC 1.4.13 - // without obstructing the seekbar - var tooltipY = position.top + buttonHeight + 5; + // without obstructing the seekbar + tooltipY = position.top + buttonHeight + 5; if ($(this).parent().hasClass('able-right-controls')) { // this control is on the right side - var buttonSide = 'right'; - } - else { + buttonSide = 'right'; + } else { // this control is on the left side - var buttonSide = 'left'; + buttonSide = 'left'; } // populate tooltip, then calculate its width before showing it - var tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); + tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); // center the tooltip horizontally over the button if (buttonSide == 'left') { - var tooltipX = position.left - tooltipWidth/2; + tooltipX = position.left - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: tooltipX + 'px', right: '', top: tooltipY + 'px' }; - } - else { - var tooltipX = position.right - tooltipWidth/2; + } else { + tooltipX = position.right - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: '', right: tooltipX + 'px', top: tooltipY + 'px' }; } - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); + tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { - // hide tooltip (original line of code) - // AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - - // The above line was replaced with the following block - // in order to meet WCAG 2.x SC 1.4.13 // (keep the tooltip visible if user hovers over it) - // This causes unwanted side effects if tooltips are positioned above the buttons - // as the persistent tooltip obstructs the seekbar, - // blocking users from being able to move a pointer from a button to the seekbar - // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons + // This causes unwanted side effects if tooltips are positioned above the buttons + // as the persistent tooltip obstructs the seekbar, + // blocking users from being able to move a pointer from a button to the seekbar + // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons // clear existing timeout before reassigning variable clearTimeout(tooltipTimerId); @@ -6216,29 +5700,27 @@ var AblePlayerInstances = []; thisObj.$tooltipDiv.on('mouseleave blur', function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }); - - }); + + }); }); if (control === 'captions') { if (!this.prefCaptions || this.prefCaptions !== 1) { // captions are available, but user has them turned off if (this.captions.length > 1) { - captionLabel = this.tt.captions; - } - else { - captionLabel = this.tt.showCaptions; + captionLabel = this.translate( 'captions', 'Captions' ); + } else { + captionLabel = this.translate( 'showCaptions', 'Show captions' ); } $newButton.addClass('buttonOff').attr('title',captionLabel); $newButton.attr('aria-pressed', 'false'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { if (!this.prefDesc || this.prefDesc !== 1) { // user prefer non-audio described version // Therefore, load media without description // Description can be toggled on later with this button - $newButton.addClass('buttonOff').attr('title',this.tt.turnOnDescriptions); + $newButton.addClass('buttonOff').attr( 'title', this.translate( 'turnOnDescriptions', 'Turn on descriptions' ) ); } } @@ -6247,59 +5729,48 @@ var AblePlayerInstances = []; // create variables of buttons that are referenced throughout the AblePlayer object if (control === 'play') { this.$playpauseButton = $newButton; - } - else if (control == 'previous') { + } else if (control == 'previous') { this.$prevButton = $newButton; // if player is being rebuilt because user clicked the Prev button // return focus to that (newly built) button if (this.buttonWithFocus == 'previous') { - this.$prevButton.focus(); + this.$prevButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control == 'next') { + } else if (control == 'next') { this.$nextButton = $newButton; // if player is being rebuilt because user clicked the Next button // return focus to that (newly built) button if (this.buttonWithFocus == 'next') { - this.$nextButton.focus(); + this.$nextButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control === 'captions') { + } else if (control === 'captions') { this.$ccButton = $newButton; - } - else if (control === 'sign') { + } else if (control === 'sign') { this.$signButton = $newButton; // gray out sign button if sign language window is not active if (!(this.$signWindow.is(':visible'))) { this.$signButton.addClass('buttonOff'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { this.$descButton = $newButton; // button will be enabled or disabled in description.js > initDescription() - } - else if (control === 'mute') { + } else if (control === 'mute') { this.$muteButton = $newButton; - } - else if (control === 'transcript') { + } else if (control === 'transcript') { this.$transcriptButton = $newButton; // gray out transcript button if transcript is not active if (!(this.$transcriptDiv.is(':visible'))) { - this.$transcriptButton.addClass('buttonOff').attr('title',this.tt.showTranscript); + this.$transcriptButton.addClass('buttonOff').attr( 'title', this.translate( 'showTranscript', 'Show transcript' ) ); } - } - else if (control === 'fullscreen') { + } else if (control === 'fullscreen') { this.$fullscreenButton = $newButton; - } - else if (control === 'chapters') { + } else if (control === 'chapters') { this.$chaptersButton = $newButton; - } - else if (control === 'preferences') { + } else if (control === 'preferences') { this.$prefsButton = $newButton; - } - else if (control === 'volume') { + } else if (control === 'volume') { this.$volumeButton = $newButton; } } @@ -6329,191 +5800,7 @@ var AblePlayerInstances = []; } // Update state-based display of controls. - this.refreshControls('init'); - }; - - AblePlayer.prototype.useSvg = function () { - - // Modified from IcoMoon.io svgxuse - // @copyright Copyright (c) 2016 IcoMoon.io - // @license Licensed under MIT license - // See https://github.com/Keyamoon/svgxuse - // @version 1.1.16 - - var cache = Object.create(null); // holds xhr objects to prevent multiple requests - var checkUseElems, - tid; // timeout id - var debouncedCheck = function () { - clearTimeout(tid); - tid = setTimeout(checkUseElems, 100); - }; - var unobserveChanges = function () { - return; - }; - var observeChanges = function () { - var observer; - window.addEventListener('resize', debouncedCheck, false); - window.addEventListener('orientationchange', debouncedCheck, false); - if (window.MutationObserver) { - observer = new MutationObserver(debouncedCheck); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - attributes: true - }); - unobserveChanges = function () { - try { - observer.disconnect(); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - } catch (ignore) {} - }; - } - else { - document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); - unobserveChanges = function () { - document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - }; - } - }; - var xlinkNS = 'http://www.w3.org/1999/xlink'; - checkUseElems = function () { - var base, - bcr, - fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. - hash, - i, - Request, - inProgressCount = 0, - isHidden, - url, - uses, - xhr; - if (window.XMLHttpRequest) { - Request = new XMLHttpRequest(); - if (Request.withCredentials !== undefined) { - Request = XMLHttpRequest; - } - else { - Request = XDomainRequest || undefined; - } - } - if (Request === undefined) { - return; - } - function observeIfDone() { - // If done with making changes, start watching for chagnes in DOM again - inProgressCount -= 1; - if (inProgressCount === 0) { // if all xhrs were resolved - observeChanges(); // watch for changes to DOM - } - } - function attrUpdateFunc(spec) { - return function () { - if (cache[spec.base] !== true) { - spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); - } - }; - } - function onloadFunc(xhr) { - return function () { - var body = document.body; - var x = document.createElement('x'); - var svg; - xhr.onload = null; - x.innerHTML = xhr.responseText; - svg = x.getElementsByTagName('svg')[0]; - if (svg) { - svg.setAttribute('aria-hidden', 'true'); - svg.style.position = 'absolute'; - svg.style.width = 0; - svg.style.height = 0; - svg.style.overflow = 'hidden'; - body.insertBefore(svg, body.firstChild); - } - observeIfDone(); - }; - } - function onErrorTimeout(xhr) { - return function () { - xhr.onerror = null; - xhr.ontimeout = null; - observeIfDone(); - }; - } - unobserveChanges(); // stop watching for changes to DOM - // find all use elements - uses = document.getElementsByTagName('use'); - for (i = 0; i < uses.length; i += 1) { - try { - bcr = uses[i].getBoundingClientRect(); - } catch (ignore) { - // failed to get bounding rectangle of the use element - bcr = false; - } - url = uses[i].getAttributeNS(xlinkNS, 'href').split('#'); - base = url[0]; - hash = url[1]; - isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; - if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { - // the use element is empty - // if there is a reference to an external SVG, try to fetch it - // use the optional fallback URL if there is no reference to an external SVG - if (fallback && !base.length && hash && !document.getElementById(hash)) { - base = fallback; - } - if (base.length) { - // schedule updating xlink:href - xhr = cache[base]; - if (xhr !== true) { - // true signifies that prepending the SVG was not required - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - if (xhr === undefined) { - xhr = new Request(); - cache[base] = xhr; - xhr.onload = onloadFunc(xhr); - xhr.onerror = onErrorTimeout(xhr); - xhr.ontimeout = onErrorTimeout(xhr); - xhr.open('GET', base); - xhr.send(); - inProgressCount += 1; - } - } - } - else { - if (!isHidden) { - if (cache[base] === undefined) { - // remember this URL if the use element was not empty and no request was sent - cache[base] = true; - } - else if (cache[base].onload) { - // if it turns out that prepending the SVG is not necessary, - // abort the in-progress xhr. - cache[base].abort(); - cache[base].onload = undefined; - cache[base] = true; - } - } - } - } - uses = ''; - inProgressCount += 1; - observeIfDone(); - }; -/ - // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. - window.addEventListener('load', function winLoad() { - window.removeEventListener('load', winLoad, false); // to prevent memory leaks - tid = setTimeout(checkUseElems, 0); - }, false); -/ + this.refreshControls(); }; AblePlayer.prototype.cuePlaylistItem = function(sourceIndex) { @@ -6522,19 +5809,7 @@ var AblePlayerInstances = []; // NOTE: Swapping source for audio description is handled elsewhere; // see description.js > swapDescription() - / - // Decided against preventing a reload of the current item in the playlist. - // If it's clickable, users should be able to click on it and expect something to happen. - // Leaving here though in case it's determined to be desirable. - if (sourceIndex === this.playlistItemIndex) { - // user has requested the item that's currently playing - // just ignore the request - return; - } - this.playlistItemIndex = sourceIndex; - / - - var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, sources, s, i, $newSource, nowPlayingSpan; + var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, nowPlayingSpan; var thisObj = this; @@ -6542,9 +5817,8 @@ var AblePlayerInstances = []; if (this.initializing) { // this is the first track - user hasn't pressed play yet // do nothing. - } - else { - if (this.playerCreated) { + } else { + if (this.playerCreated) { // remove the old this.deletePlayer('playlist'); } @@ -6553,19 +5827,18 @@ var AblePlayerInstances = []; // set swappingSrc; needs to be true within recreatePlayer(), called below this.swappingSrc = true; - // if a new playlist item is being requested, and playback has already started, - // it should be ok to play automatically, regardless of how it was requested - if (this.startedPlaying) { - this.okToPlay = true; - } - else { - this.okToPlay = false; + // if a new playlist item is being requested, and playback has already started, + // it should be ok to play automatically, regardless of how it was requested + if (this.startedPlaying) { + this.okToPlay = true; + } else { + this.okToPlay = false; } - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; // Determine appropriate player to play this media $newItem = this.$playlist.eq(sourceIndex); @@ -6575,16 +5848,14 @@ var AblePlayerInstances = []; this.youTubeDescId = this.getYouTubeId($newItem.attr('data-youtube-desc-id')); } newPlayer = 'youtube'; - } - else if (this.hasAttr($newItem,'data-vimeo-id')) { + } else if (this.hasAttr($newItem,'data-vimeo-id')) { this.vimeoId = this.getVimeoId($newItem.attr('data-vimeo-id')); if (this.hasAttr($newItem,'data-vimeo-desc-id')) { this.vimeoDescId = this.getVimeoId($newItem.attr('data-vimeo-desc-id')); } newPlayer = 'vimeo'; - } - else { - newPlayer = 'html5'; + } else { + newPlayer = 'html5'; } if (newPlayer === 'youtube') { if (prevPlayer === 'html5') { @@ -6594,9 +5865,8 @@ var AblePlayerInstances = []; } this.$media.hide(); } - } - else { - // the new player is not youtube + } else { + // the new player is not youtube this.youTubeId = false; if (prevPlayer === 'youtube') { // unhide the media element @@ -6623,21 +5893,42 @@ var AblePlayerInstances = []; var $sourceSpans = $newItem.children('span.able-source'); if ($sourceSpans.length) { $sourceSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src')) { - // this is the only required attribute - var $newSource = $('<source>',{ - 'src': $(this).attr('data-src') - }); - if (thisObj.hasAttr($(this),'data-type')) { - $newSource.attr('type',$(this).attr('data-type')); - } - if (thisObj.hasAttr($(this),'data-desc-src')) { - $newSource.attr('data-desc-src',$(this).attr('data-desc-src')); - } - if (thisObj.hasAttr($(this),'data-sign-src')) { - $newSource.attr('data-sign-src',$(this).attr('data-sign-src')); + const $this = $(this); + + // Check if the required data-src attribute exists + if (thisObj.hasAttr($this, "data-src")) { + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <source> element with the sanitized src + const $newSource = $("<source>", { src: sanitizedSrc }); + + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-type", + "data-desc-src", + "data-sign-src", + ]; + + // Process optional attributes + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + const attrValue = $this.attr(attr); // Get the attribute value + const sanitizedValue = DOMPurify.sanitize(attrValue); // Sanitize the value + + // If the attribute ends with "-src", validate the protocol + if (attr.endsWith("-src") && validate.isProtocolSafe(sanitizedValue)) { + $newSource.attr(attr, sanitizedValue); // Add the sanitized and validated attribute + } else if (!attr.endsWith("-src")) { + $newSource.attr(attr, sanitizedValue); // Add sanitized value for non-src attributes + } + } + }); + + // Append the new <source> element to the media object + thisObj.$media.append($newSource); } - thisObj.$media.append($newSource); } }); } @@ -6647,27 +5938,37 @@ var AblePlayerInstances = []; if ($trackSpans.length) { // for each element in $trackSpans, create a new <track> element $trackSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src') && - thisObj.hasAttr($(this),'data-kind') && - thisObj.hasAttr($(this),'data-srclang')) { + const $this = $(this); + if (thisObj.hasAttr($this, "data-src") && thisObj.hasAttr($this, "data-kind") && thisObj.hasAttr($this, "data-srclang")) { // all required attributes are present - var $newTrack = $('<track>',{ - 'src': $(this).attr('data-src'), - 'kind': $(this).attr('data-kind'), - 'srclang': $(this).attr('data-srclang') - }); - if (thisObj.hasAttr($(this),'data-label')) { - $newTrack.attr('label',$(this).attr('data-label')); - } - if (thisObj.hasAttr($(this),'data-desc')) { - $newTrack.attr('data-desc',$(this).attr('data-desc')); + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <track> element with the sanitized src + const $newTrack = $("<track>", { + src: sanitizedSrc, + kind: $this.attr("data-kind"), + srclang: $this.attr("data-srclang"), + }); + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-label", + "data-desc", + "data-default", + ]; + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + $newTrack.attr(attr, DOMPurify.sanitize($this.attr(attr))); + } + }); + // Append the new <track> element to the media object + thisObj.$media.append($newTrack); } - thisObj.$media.append($newTrack); } }); } - itemTitle = $newItem.text(); + itemTitle = DOMPurify.sanitize( $newItem.text() ); if (this.hasAttr($newItem,'lang')) { itemLang = $newItem.attr('lang'); } @@ -6675,18 +5976,18 @@ var AblePlayerInstances = []; this.$sources = this.$media.find('source'); // recreate player, informed by new attributes and track elements - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; + return; } - this.recreatePlayer().then(function() { + this.recreatePlayer().then(function() { // update playlist to indicate which item is playing thisObj.$playlist.removeClass('able-current') .children('button').removeAttr('aria-current'); thisObj.$playlist.eq(sourceIndex).addClass('able-current') - .children('button').attr('aria-current','true'); - + .children('button').attr('aria-current','true'); + // update Now Playing div if (thisObj.showNowPlaying === true) { if (typeof thisObj.$nowPlayingDiv !== 'undefined') { @@ -6702,56 +6003,48 @@ var AblePlayerInstances = []; // if thisObj.swappingSrc is true, media will autoplay when ready if (thisObj.initializing) { // this is the first track - user hasn't pressed play yet thisObj.swappingSrc = false; - } - else { + } else { if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } - } - else if (thisObj.player === 'youtube') { - thisObj.okToPlay = true; + } else if (thisObj.player === 'youtube') { + thisObj.okToPlay = true; } } thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed - }); + thisObj.playerCreated = true; // remains true until browser is refreshed + }); }; AblePlayer.prototype.deletePlayer = function(context) { - // remove player components that need to be rebuilt - // after swapping media sources that have different durations - // or explicitly declared data-desc attributes + // remove player components that need to be rebuilt + // after swapping media sources that have different durations + // or explicitly declared data-desc attributes - // Context is one of the following: - // playlist - called from cuePlaylistItem() + // Context is one of the following: + // playlist - called from cuePlaylistItem() // swap-desc-html - called from swapDescription with this.player == 'html' - // swap-desc-youtube - called from swapDescription with this.player == 'youtube' - // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' + // swap-desc-youtube - called from swapDescription with this.player == 'youtube' + // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' - if (this.player === 'youtube' && this.youTubePlayer) { - this.youTubePlayer.destroy(); + if (this.player === 'youtube' && this.youTubePlayer) { + this.youTubePlayer.destroy(); } - if (this.player === 'vimeo' && this.vimeoPlayer) { - this.vimeoPlayer.destroy(); + if (this.player === 'vimeo' && this.vimeoPlayer) { + this.vimeoPlayer.destroy(); } - -/ TODO - Investigate: when is this needed? - // remove previous video's attributes and child elements from media element - this.$media.removeAttr('poster width height'); - this.$media.empty(); -*/ // Empty elements that will be rebuilt this.$controllerDiv.empty(); // this.$statusBarDiv.empty(); // this.$timer.empty(); this.$elapsedTimeContainer.empty().text('0:00'); // span.able-elapsedTime this.$durationContainer.empty(); // span.able-duration - + // Remove popup windows and modal dialogs; these too will be rebuilt if (this.$signWindow) { this.$signWindow.remove(); @@ -6760,125 +6053,81 @@ var AblePlayerInstances = []; this.$transcriptArea.remove(); } $('.able-modal-dialog').remove(); - - // Remove caption and description wrappers + + // Remove caption and description wrappers if (this.$captionsWrapper) { this.$captionsWrapper.remove(); } - if (this.$descDiv) { - this.$descDiv.remove(); + if (this.$descDiv) { + this.$descDiv.remove(); } - + // reset key variables this.hasCaptions = false; this.hasChapters = false; - this.hasDescTracks = false; + this.hasDescTracks = false; this.hasOpenDesc = false; - this.hasClosedDesc = false; + this.hasClosedDesc = false; this.captionsPopup = null; this.chaptersPopup = null; this.transcriptType = null; - this.playerDeleted = true; // will reset to false in recreatePlayer() + this.playerDeleted = true; // will reset to false in recreatePlayer() }; AblePlayer.prototype.getButtonTitle = function(control) { if (control === 'playpause') { - return this.tt.play; - } - else if (control === 'play') { - return this.tt.play; - } - else if (control === 'pause') { - return this.tt.pause; - } - else if (control === 'restart') { - return this.tt.restart; - } - else if (control === 'previous') { - return this.tt.prevTrack; - } - else if (control === 'next') { - return this.tt.nextTrack; - } - else if (control === 'rewind') { - return this.tt.rewind; - } - else if (control === 'forward') { - return this.tt.forward; - } - else if (control === 'captions') { + return this.translate( 'play', 'Play' ); + } else if (control === 'play') { + return this.translate( 'play', 'Play' ); + } else if (control === 'pause') { + return this.translate( 'pause', 'Pause' ); + } else if (control === 'restart') { + return this.translate( 'restart', 'Restart' ); + } else if (control === 'previous') { + return this.translate( 'prevTrack', 'Previous track' ); + } else if (control === 'next') { + return this.translate( 'nextTrack', 'Next track' ); + } else if (control === 'rewind') { + return this.translate( 'rewind', 'Rewind' ); + } else if (control === 'forward') { + return this.translate( 'forward', 'Forward' ); + } else if (control === 'captions') { if (this.captions.length > 1) { - return this.tt.captions; - } - else { - if (this.captionsOn) { - return this.tt.hideCaptions; - } - else { - return this.tt.showCaptions; - } - } - } - else if (control === 'descriptions') { - if (this.descOn) { - return this.tt.turnOffDescriptions; - } - else { - return this.tt.turnOnDescriptions; - } - } - else if (control === 'transcript') { - if (this.$transcriptDiv.is(':visible')) { - return this.tt.hideTranscript; - } - else { - return this.tt.showTranscript; - } - } - else if (control === 'chapters') { - return this.tt.chapters; - } - else if (control === 'sign') { - return this.tt.sign; - } - else if (control === 'volume') { - return this.tt.volume; - } - else if (control === 'faster') { - return this.tt.faster; - } - else if (control === 'slower') { - return this.tt.slower; - } - else if (control === 'preferences') { - return this.tt.preferences; - } - else if (control === 'help') { - // return this.tt.help; - } - else if (control === 'fullscreen') { - if (!this.fullscreen) { - return this.tt.enterFullscreen; - } - else { - return this.tt.exitFullscreen; - } - } - else { + return this.translate( 'captions', 'Captions' ); + } else { + return (this.captionsOn) ? this.translate( 'hideCaptions', 'Hide captions' ) : this.translate( 'showCaptions', 'Show captions' ); + } + } else if (control === 'descriptions') { + return (this.descOn) ? this.translate( 'turnOffDescriptions', 'Turn off descriptions' ) : this.translate( 'turnOnDescriptions', 'Turn on descriptions' ); + } else if (control === 'transcript') { + return (this.$transcriptDiv.is(':visible')) ? this.translate( 'hideTranscript', 'Hide transcript' ) : this.translate( 'showTranscript', 'Show transcript' ); + } else if (control === 'chapters') { + return this.translate( 'chapters', 'Chapters' ); + } else if (control === 'sign') { + return this.translate( 'sign', 'Sign language' ); + } else if (control === 'volume') { + return this.translate( 'volume', 'Volume' ); + } else if (control === 'faster') { + return this.translate( 'faster', 'Faster' ); + } else if (control === 'slower') { + return this.translate( 'slower', 'Slower' ); + } else if (control === 'preferences') { + return this.translate( 'preferences', 'Preferences' ); + } else if (control === 'fullscreen') { + return ( !this.fullscreen ) ? this.translate( 'enterFullScreen', 'Enter full screen' ) : this.translate( 'exitFullScreen', 'Exit full screen' ); + } else { // there should be no other controls, but just in case: // return the name of the control with first letter in upper case // ultimately will need to get a translated label from this.tt if (this.debug) { console.log('Found an untranslated label: ' + control); } - return control.charAt(0).toUpperCase() + control.slice(1); + return this.capitalizeFirstLetter( control ); } }; - - })(jQuery); /** @@ -6898,11 +6147,16 @@ var preProcessing = { * @returns {string} - The VTT content with processed tags. / transformCSSClasses: function (vttContent) { + // This function should only be passed one cue at a time. + // Throw an error if the string checked is more than 1000 characters. + if ( vttContent.length > 1000 ) { + throw new Error( "Input too long" ); + } return vttContent.replace( /<(v|c|b|i|u|lang|ruby)\.([\w\.]+)([^>])>/g, function (_, tag, cssClasses, otherAttrs) { - var classAttr = cssClasses.split(".").join(" "); - return "<" + tag + ' class="' + classAttr + '"' + otherAttrs + ">"; + var classAttr = cssClasses.replace(/\./g, " "); + return `<${tag} class="${classAttr}"${otherAttrs}>`; } ); }, @@ -6923,10 +6177,14 @@ var preProcessing = { }, /** - * Transforms <v> tags by adding a title attribute with the concatenated text and retaining other attributes. + * Transforms <v> tags by extracting any non-attribute text as a `title` attribute, + * retains existing attributes (except class), and preserves the class attribute if present. + * Example: <v John class="foo" data-x="y"> becomes <v title="John" data-x="y" class="foo"> + * + * @function * @memberof preProcessing - * @param {string} content - The content with processed <lang> tags. - * @returns {string} - The content with <v> tags transformed. + * @param {string} content - The string content containing <v> tags to process. + * @returns {string} The content with <v> tags transformed to include a title attribute and preserved attributes. / transformVTags: function (content) { return content.replace(/<v\s+([^>]?)>/g, function (_, tagAttributes) { @@ -6985,24 +6243,33 @@ var postProcessing = { return vttContent.replace( /<c class="([\w\s]+)">/g, function (_, classNames) { - var classes = classNames.split(" ").join("."); + var classes = classNames.replace(/ /g, "."); return "<c." + classes + ">"; } ); }, /** - * Post-processes <v> tags by converting class attributes to dot-separated class names. + * * Post-processes <v> tags by converting class attributes, no matter where found in the attribute order, to dot-separated class names. + * For example, <v class="foo bar" title="John"> becomes <v.foo.bar title="John">. + * Removes the class attribute and appends other attributes after the class names. + * + * @function * @memberof postProcessing * @param {string} vttContent - The VTT content to be processed. * @returns {string} - The VTT content with processed <v> tags. / postprocessVTag: function (vttContent) { return vttContent.replace( - /<v class="([\w\s]+)"([^>])>/g, - function (_, classNames, otherAttrs) { - var classes = classNames.split(" ").join("."); - return "<v." + classes + otherAttrs + ">"; + /<v([^>])class="([\w\s]+)"([^>])>/g, + function (_, beforeClass, classNames, afterClass) { + var classes = classNames.trim().split(/\s+/).join("."); + // Rebuild the tag: <v.{classes}{other attributes}> + // Remove class="..." from attributes + var attrs = (beforeClass + afterClass) + .replace(/\s*class="[\w\s]+"/, "") + .trim(); + return "<v." + classes + (attrs ? " " + attrs : "") + ">"; } ); }, @@ -7024,7 +6291,7 @@ var postProcessing = { }; /** - * Preprocesses, sanitizes and post-processes VTT content. + * Preprocesses, sanitizes and post-processes VTT content as well as other utility functions. * @namespace validate / var validate = { @@ -7055,8 +6322,9 @@ var validate = { var processedLangTags = postProcessing.postprocessLangTag(processedVTags); var arrowReplaced = processedLangTags.replace(/-->/g, "-->"); + var timestampTagReplaced = arrowReplaced.replace(/<([\d:.]+)>/g, '<$1>'); - var finalContent = arrowReplaced.replace( + var finalContent = timestampTagReplaced.replace( /<\/v>/g, function (match, offset) { return originalVttContent.indexOf(match, offset) !== -1 ? match : ""; @@ -7091,6 +6359,17 @@ var validate = { return validate.postProcessVttContent(sanitizedVttContent, vttContent); }, + // Utility validation functions + isProtocolSafe: function (url) { + //creates a new URL object for analysis to check if the protocol is http or https + //returns true if there is a match false otherwise + try { + const parsedUrl = new URL(url, window.location.origin); // Resolve relative URLs + return ["http:", "https:"].includes(parsedUrl.protocol); // Allow only HTTP and HTTPS + } catch (e) { + return false; // Invalid URL + } + }, }; // Export the object for use in other files @@ -7103,22 +6382,13 @@ if (typeof module !== "undefined" && module.exports) { // Loads files referenced in track elements, and performs appropriate setup. // For example, captions and text descriptions. // This will be called whenever the player is recreated. - // Added in v2.2.23: Also handles YouTube caption tracks AblePlayer.prototype.setupTracks = function () { - var thisObj, - deferred, - promise, - loadingPromises, - loadingPromise, - i, - tracks, - track, - kind; + var thisObj, deferred, promise, loadingPromises, loadingPromise, i, tracks, track, kind; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); loadingPromises = []; @@ -7140,20 +6410,17 @@ if (typeof module !== "undefined" && module.exports) { } for (i = 0; i < tracks.length; i++) { track = tracks[i]; - kind = track.kind; + kind = ( track.kind ) ? track.kind : 'subtitles'; if (!track.src) { if (thisObj.usingYouTubeCaptions || thisObj.usingVimeoCaptions) { // skip all the hullabaloo and go straight to setupCaptions thisObj.setupCaptions(track); - } else { - // Nothing to load! - // Skip this track; move on to next i } continue; } - var trackSrc = track.src; - loadingPromise = this.loadTextObject(track.src); // resolves with src, trackText + var trackSrc = track.src; + loadingPromise = this.loadTextObject(trackSrc); loadingPromises.push( loadingPromise.catch(function (src) { console.warn("Failed to load captions track from " + src); @@ -7161,35 +6428,31 @@ if (typeof module !== "undefined" && module.exports) { ); loadingPromise.then( (function (track, kind) { - var trackSrc = track.src; + trackSrc = track.src; var trackLang = track.language; var trackLabel = track.label; var trackDesc = track.desc; - return function (trackSrc, trackText) { - // these are the two vars returned from loadTextObject - - var trackContents = trackText; - var cues = thisObj.parseWebVTT(trackSrc, trackContents).cues; + return function (data) { + var cues = thisObj.parseWebVTT(data).cues; if (thisObj.hasVts) { - // setupVtsTracks() is in vts.js thisObj.setupVtsTracks( kind, trackLang, trackDesc, trackLabel, trackSrc, - trackContents + data.text ); } - if (kind === "captions" || kind === "subtitles") { + if (kind === 'captions' || kind === 'subtitles') { thisObj.setupCaptions(track, cues); - } else if (kind === "descriptions") { + } else if (kind === 'descriptions') { thisObj.setupDescriptions(track, cues); - } else if (kind === "chapters") { + } else if (kind === 'chapters') { thisObj.setupChapters(track, cues); - } else if (kind === "metadata") { - thisObj.setupMetadata(track, cues); + } else if (kind === 'metadata') { + thisObj.setupMetadata(cues); } }; })(track, kind) @@ -7215,30 +6478,16 @@ if (typeof module !== "undefined" && module.exports) { // cues - array with startTime, endTime, and payload // desc - Boolean, true if track includes a data-desc attribute - var thisObj, - deferred, - promise, - captionTracks, - altCaptionTracks, - trackLang, - trackLabel, - isDefault, - forDesc, - hasDefault, - hasTrackInDefLang, - trackFound, - i, - j, - capLabel, - inserted; + var thisObj, deferred, promise, trackLang, trackLabel, isDefault, forDesc, + hasDefault, hasTrackInDefLang, trackFound, i; thisObj = this; hasDefault = false; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.$tracks = this.$media.find("track"); + this.$tracks = this.$media.find('track'); this.tracks = []; // only includes tracks that do NOT have data-desc this.altTracks = []; // only includes tracks that DO have data-desc @@ -7255,31 +6504,30 @@ if (typeof module !== "undefined" && module.exports) { this.usingYouTubeCaptions = false; // create object from HTML5 tracks this.$tracks.each(function (index, element) { - if ($(this).attr("kind") === "captions") { + if ($(this).attr('kind') === 'captions') { thisObj.hasCaptionsTrack = true; - } else if ($(this).attr("kind") === "descriptions") { + } else if ($(this).attr('kind') === 'descriptions') { thisObj.hasClosedDesc = true; } // srcLang should always be included with <track>, but HTML5 spec doesn't require it // if not provided, assume track is the same language as the default player language - if ($(this).attr("srclang")) { - trackLang = $(this).attr("srclang"); + if ($(this).attr('srclang')) { + trackLang = $(this).attr('srclang'); } else { trackLang = thisObj.lang; } - if ($(this).attr("label")) { - trackLabel = $(this).attr("label"); + if ($(this).attr('label')) { + trackLabel = $(this).attr('label'); } else { trackLabel = thisObj.getLanguageName(trackLang); } - if (typeof $(this).attr("default") !== "undefined" && !hasDefault) { + if (typeof $(this).attr('default') !== 'undefined' && !hasDefault) { isDefault = true; hasDefault = true; } else if (trackLang === thisObj.lang) { // this track is in the default lang of the player - // save this for later // if there is no other default track specified // this will be the default hasTrackInDefLang = true; @@ -7300,8 +6548,8 @@ if (typeof module !== "undefined" && module.exports) { } if (forDesc) { thisObj.altTracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -7309,8 +6557,8 @@ if (typeof module !== "undefined" && module.exports) { }); } else { thisObj.tracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -7326,16 +6574,16 @@ if (typeof module !== "undefined" && module.exports) { trackFound = false; i = 0; while (i < thisObj.tracks.length && !trackFound) { - if (thisObj.tracks[i]["language"] === thisObj.lang) { - thisObj.tracks[i]["def"] = true; + if (thisObj.tracks[i]['language'] === thisObj.lang) { + thisObj.tracks[i]['def'] = true; trackFound = true; } i++; } } else { // use the first track - thisObj.tracks[0]["def"] = true; - thisObj.captionLang = thisObj.tracks[0]["language"]; + thisObj.tracks[0]['def'] = true; + thisObj.captionLang = thisObj.tracks[0]['language']; } } // Remove 'default' attribute from all <track> elements @@ -7349,8 +6597,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.$tracks.length || !this.hasCaptionsTrack) { // this media has no track elements // if this is a youtube or vimeo player, check there for captions/subtitles - if (this.player === "youtube") { - this.getYouTubeCaptionTracks(this.youTubeId).then(function () { + if (this.player === 'youtube') { + this.getYouTubeCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingYouTubeCaptions = true; if (thisObj.$captionsWrapper) { @@ -7359,7 +6607,7 @@ if (typeof module !== "undefined" && module.exports) { } deferred.resolve(); }); - } else if (this.player === "vimeo") { + } else if (this.player === 'vimeo') { this.getVimeoCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingVimeoCaptions = true; @@ -7387,7 +6635,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setupCaptions = function (track, cues) { // Setup player for display of captions (one track at a time) - var thisObj, captions, inserted, i, capLabel; + var inserted, i, capLabel; // Insert track into captions array // in its proper alphabetical sequence by label @@ -7453,8 +6701,8 @@ if (typeof module !== "undefined" && module.exports) { this.captionsOn = false; } } - if (this.mediaType === "audio" && this.captionsOn) { - this.$captionsContainer.removeClass("captions-off"); + if (this.mediaType === 'audio' && this.captionsOn) { + this.$captionsContainer.removeClass('captions-off'); } if ( @@ -7464,17 +6712,17 @@ if (typeof module !== "undefined" && module.exports) { ) { // captionsWrapper either doesn't exist, or exists in an orphaned state // Either way, it needs to be rebuilt... - this.$captionsDiv = $("<div>", { + this.$captionsDiv = $('<div>', { class: "able-captions", }); - this.$captionsWrapper = $("<div>", { - class: "able-captions-wrapper", - "aria-hidden": "true", + this.$captionsWrapper = $('<div>', { + class: 'able-captions-wrapper', + 'aria-hidden': 'true', }).hide(); - if (this.prefCaptionsPosition === "below") { - this.$captionsWrapper.addClass("able-captions-below"); + if (this.prefCaptionsPosition === 'below') { + this.$captionsWrapper.addClass('able-captions-below'); } else { - this.$captionsWrapper.addClass("able-captions-overlay"); + this.$captionsWrapper.addClass('able-captions-overlay'); } this.$captionsWrapper.append(this.$captionsDiv); this.$captionsContainer.append(this.$captionsWrapper); @@ -7505,19 +6753,19 @@ if (typeof module !== "undefined" && module.exports) { }); }; - AblePlayer.prototype.setupMetadata = function (track, cues, trackDesc) { - if (this.metaType === "text") { + AblePlayer.prototype.setupMetadata = function (cues) { + if (this.metaType === 'text') { // Metadata is only supported if data-meta-div is provided // The player does not display metadata internally if (this.metaDiv) { - if ($("#" + this.metaDiv)) { + if ($('#' + this.metaDiv)) { // container exists - this.$metaDiv = $("#" + this.metaDiv); + this.$metaDiv = $('#' + this.metaDiv); this.hasMeta = true; this.meta = cues; } } - } else if (this.metaType === "selector") { + } else if (this.metaType === 'selector') { this.hasMeta = true; this.visibleSelectors = []; this.meta = cues; @@ -7534,76 +6782,76 @@ if (typeof module !== "undefined" && module.exports) { / var deferred, promise, thisObj, $tempDiv; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; // create a temp div for holding data - $tempDiv = $("<div>", { - style: "display:none", + $tempDiv = $('<div>', { + style: 'display:none', }); // Fetch the content manually so it can be sanitized - $.ajax({ - url: src, - dataType: "text", - success: function (data) { - // Sanitize the fetched content - var sanitizedTrackText = validate.sanitizeVttContent(data); - - // Load the sanitized content into the $tempDiv - $tempDiv.html(sanitizedTrackText); - - // Resolve the promise with the sanitized content - deferred.resolve(src, sanitizedTrackText); - - $tempDiv.remove(); - }, - error: function (req, status, error) { - if (thisObj.debug) { - console.log("error reading file " + src + ": " + status); - } - deferred.reject(src); - $tempDiv.remove(); - }, - }); + fetch(src) + .then( response => { + + return response.text(); + }) + .then( vtt => { + // Split the input on double line breaks to handle each cue individually. + var preParsed = vtt.split(/\r?\n\s\r?\n/); + var lines = '', line; + + preParsed.forEach((l) => { + // Sanitize each line. + line = validate.sanitizeVttContent(l); + lines += line + "\n\n"; + }); + // Load the sanitized content into the $tempDiv + $tempDiv.html(lines); + // Resolve the promise with the sanitized content + let data = { 'src': src, 'text': lines }; + deferred.resolve(data); + $tempDiv.remove(); + }) + .catch( error => { + if (thisObj.debug) { + console.log( "error reading file " + src + ": " + error ); + } + deferred.reject(src); + $tempDiv.remove(); + }); return promise; }; })(jQuery); - (function ($) { + AblePlayer.prototype.initYouTubePlayer = function () { - var thisObj, deferred, promise, youTubeId, googleApiPromise, json; + var thisObj, deferred, promise, youTubeId; thisObj = this; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.youTubePlayerReady = false; + this.youTubePlayerReady = false; // if a described version is available && user prefers desription // init player using the described version - if (this.youTubeDescId && this.prefDesc) { - youTubeId = this.youTubeDescId; - } - else { - youTubeId = this.youTubeId; - } + youTubeId = (this.youTubeDescId && this.prefDesc) ? this.youTubeDescId : this.youTubeId; + this.activeYouTubeId = youTubeId; if (AblePlayer.youTubeIframeAPIReady) { // Script already loaded and ready. thisObj.finalizeYoutubeInit().then(function() { deferred.resolve(); }); - } - else { + } else { // Has another player already started loading the script? If so, abort... if (!AblePlayer.loadingYouTubeIframeAPI) { - $.getScript('https://www.youtube.com/iframe_api').fail(function () { - deferred.fail(); + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + console.log( 'YouTube API loaded' ); }); } @@ -7620,71 +6868,54 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.finalizeYoutubeInit = function () { // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - var deferred, promise, thisObj, containerId, ccLoadPolicy, videoDimensions, autoplay; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - thisObj = this; - containerId = this.mediaId + '_youtube'; this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // NOTE: Tried the following in place of the above in January 2016 - // because in some cases two videos were being added to the DOM - // However, once v2.2.23 was fairly stable, unable to reproduce that problem - // so maybe it's not an issue. This is preserved here temporarily, just in case it's needed... - // thisObj.$mediaContainer.html($('<div>').attr('id', containerId)); // cc_load_policy: // 0 - show captions depending on user's preference on YouTube // 1 - show captions by default, even if the user has turned them off - // IMPORTANT: This must* be set to 1 or some browsers - // fail to load any texttracks (observed in Chrome, not in Firefox) + // IMPORTANT: This must be set to 1 or some browsers + // fail to load any text tracks (observed in Chrome, not in Firefox) ccLoadPolicy = 1; - - if (this.okToPlay) { - autoplay = 1; - } - else { - autoplay = 0; - } + autoplay = (this.okToPlay) ? 1 : 0; // Documentation https://developers.google.com/youtube/player_parameters - if (typeof this.captionLang == 'undefined') { + if (typeof this.captionLang == 'undefined') { // init using the default player lang - this.captionLang = this.lang; + this.captionLang = this.lang; } this.youTubePlayer = new YT.Player(containerId, { videoId: this.activeYouTubeId, host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', playerVars: { autoplay: autoplay, - enablejsapi: 1, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: ccLoadPolicy, + controls: 0, // no controls, using our own disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, playsinline: this.playsInline, - start: this.startTime, - controls: 0, // no controls, using our own - cc_load_policy: ccLoadPolicy, - cc_lang_pref: this.captionLang, // set the caption language - hl: this.lang, // set the UI language to match Able Player - modestbranding: 1, // no YouTube logo in controller rel: 0, // when video ends, show only related videos from same channel (1 shows any) - iv_load_policy: 3 // do not show video annotations + start: this.startTime }, events: { onReady: function () { - thisObj.youTubePlayerReady = true; - if (!thisObj.playerWidth || !thisObj.playerHeight) { + thisObj.youTubePlayerReady = true; + if (!thisObj.playerWidth || !thisObj.playerHeight) { thisObj.getYouTubeDimensions(); } - if (thisObj.playerWidth && thisObj.playerHeight) { + if (thisObj.playerWidth && thisObj.playerHeight) { thisObj.youTubePlayer.setSize(thisObj.playerWidth,thisObj.playerHeight); - thisObj.$ableWrapper.css({ - 'width': thisObj.playerWidth + 'px' - }); } if (thisObj.swappingSrc) { // swap is now complete @@ -7699,30 +6930,34 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.userClickedPlaylist) { thisObj.userClickedPlaylist = false; // reset } - if (thisObj.recreatingPlayer) { + if (thisObj.recreatingPlayer) { thisObj.recreatingPlayer = false; // reset } deferred.resolve(); }, onError: function (x) { - deferred.fail(); + deferred.reject(); }, - onStateChange: function (x) { + onStateChange: function (x) { thisObj.getPlayerState().then(function(playerState) { // values of playerState: 'playing','paused','buffering','ended' if (playerState === 'playing') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.play(true); + } thisObj.playing = true; thisObj.startedPlaying = true; thisObj.paused = false; - } - else if (playerState == 'ended') { + } else if (playerState == 'ended') { thisObj.onMediaComplete(); - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } if (thisObj.stoppingYouTube && playerState === 'paused') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.pause(true); + } if (typeof thisObj.$posterImg !== 'undefined') { thisObj.$posterImg.show(); } @@ -7733,13 +6968,17 @@ if (typeof module !== "undefined" && module.exports) { } }); // If caption tracks are hosted locally, but are also available on YouTube, - // we need to turn them off on YouTube or there will be redundant captions - // This is the most reliable event on which to unload the caption module - if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { - if (thisObj.youTubePlayer.getOptions('captions')) { + // we need to turn them off on YouTube or there will be redundant captions + // This is the most reliable event on which to unload the caption module + if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { + if (thisObj.youTubePlayer.getOptions('captions')) { thisObj.youTubePlayer.unloadModule('captions'); } - } + } + }, + onApiChange: function() { + // getDuration() can be fetched during API change event. + thisObj.duration = thisObj.youTubePlayer.getDuration(); }, onPlaybackQualityChange: function () { // do something @@ -7750,85 +6989,73 @@ if (typeof module !== "undefined" && module.exports) { // remove the media element, since YouTube replaces that with its own element in an iframe // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() this.$media.remove(); - } + } return promise; }; AblePlayer.prototype.getYouTubeDimensions = function (youTubeContainerId) { - // The YouTube iframe API does not have a getSize() of equivalent method - // so, need to get dimensions from YouTube's iframe + // The YouTube iframe API does not have a getSize() of equivalent method + // so, need to get dimensions from YouTube's iframe + var $iframe, width, height; - var $iframe, width, height; - - $iframe = this.$ableWrapper.find('iframe'); + $iframe = this.$ableWrapper.find('iframe'); if (typeof $iframe !== 'undefined') { - if ($iframe.prop('width')) { - width = $iframe.prop('width'); - if ($iframe.prop('height')) { + if ($iframe.prop('width')) { + width = $iframe.prop('width'); + if ($iframe.prop('height')) { height = $iframe.prop('height'); - this.resizePlayer(width,height); + this.resizePlayer(width,height); } } } }; - AblePlayer.prototype.getYouTubeCaptionTracks = function (youTubeId) { - - // get data via YouTube IFrame Player API, and push data to this.tracks & this.captions - // NOTE: Caption tracks are not available through the IFrame Player API - // until AFTER the video has started playing. - // Therefore, this function plays the video briefly in order to load the captions module - // then stops the video and collects the data needed to build the cc menu - // This is stupid, but seemingly unavoidable. - // Caption tracks could be obtained through the YouTube Data API - // but this required authors to have a Google API key, - // which would complicate Able Player installation + /** + * Get data from the YouTube iFrame API. Pushes data into `this.tracks` and `this.captions`. + * Initiates play to trigger loading the captions module, then stops and collects data. + * + * @returns {Promise} promise + / + AblePlayer.prototype.getYouTubeCaptionTracks = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - - var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack; + var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack, apiTriggered = false; thisObj = this; - - if (!this.youTubePlayer.getOption('captions','tracklist')) { - - // no tracks were found, probably because the captions module hasn't loaded - // play video briefly (required in order to load the captions module) - // and after the apiChange event is triggered, try again to retreive tracks - this.youTubePlayer.addEventListener('onApiChange',function(x) { - - // getDuration() also requires video to play briefly - // so, let's set that while we're here - thisObj.duration = thisObj.youTubePlayer.getDuration(); - - if (thisObj.loadingYouTubeCaptions) { - // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once - ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); - if (!thisObj.okToPlay) { - // Don't stopVideo() - that cancels loading - // Just pause - // No need to seekTo(0) - so little time has passed it isn't noticeable to the user - thisObj.youTubePlayer.pauseVideo(); + if (!this.youTubePlayer.getOption('captions','tracklist') ) { + // no tracks were found, probably because the captions module hasn't loaded + // play video briefly (required to load the captions module) + // and after the apiChange event is triggered, try again to retrieve tracks + this.youTubePlayer.addEventListener('onApiChange',function() { + apiTriggered = true; + // getDuration() also requires video to play briefly + // so, let's set that while we're here + thisObj.duration = thisObj.youTubePlayer.getDuration(); + + if (thisObj.loadingYouTubeCaptions) { + // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once + ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); + if ( ! thisObj.okToPlay ) { + // Don't stopVideo() - that cancels loading, just pause. + // No need to seekTo(0) - the time passed isn't noticeable to the user + thisObj.youTubePlayer.pauseVideo(); } - if (ytTracks && ytTracks.length) { + if (ytTracks && ytTracks.length) { // Step through ytTracks and add them to global tracks array - // Note: Unlike YouTube Data API, the IFrame Player API only returns - // tracks that are published, and does NOT include ASR captions - // So, no additional filtering is required + // Note: Unlike YouTube Data API, the IFrame Player API only returns + // tracks that are published, and does NOT include ASR captions + // So, no additional filtering is required for (i=0; i < ytTracks.length; i++) { - trackLang = ytTracks[i].languageCode; + trackLang = ytTracks[i].languageCode; trackLabel = ytTracks[i].languageName; // displayName and languageName seem to always have the same value - isDefaultTrack = false; - if (typeof thisObj.captionLang !== 'undefined') { - if (trackLang === thisObj.captionLang) { - isDefaultTrack = true; - } - } - else if (typeof thisObj.lang !== 'undefined') { + isDefaultTrack = false; + if (typeof thisObj.captionLang !== 'undefined' && (trackLang === thisObj.captionLang) ) { + isDefaultTrack = true; + } else if (typeof thisObj.lang !== 'undefined') { if (trackLang === thisObj.lang) { - isDefaultTrack = true; + isDefaultTrack = true; } } thisObj.tracks.push({ @@ -7842,103 +7069,97 @@ if (typeof module !== "undefined" && module.exports) { 'label': trackLabel, 'def': isDefaultTrack, 'cues': null - }); + }); } thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - } - else { - // there are no YouTube captions - thisObj.usingYouTubeCaptions = false; + thisObj.setupPopups('captions'); + } else { + // there are no YouTube captions + thisObj.usingYouTubeCaptions = false; thisObj.hasCaptions = false; } - thisObj.loadingYouTubeCaptions = false; - if (thisObj.okToPlay) { + thisObj.loadingYouTubeCaptions = false; + if (thisObj.okToPlay) { thisObj.youTubePlayer.playVideo(); } } - if (thisObj.captionLangPending) { - // user selected a new caption language prior to playback starting - // set it now + if (thisObj.captionLangPending) { + // user selected a new caption language prior to playback starting + // set it now thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLangPending}); - thisObj.captionLangPending = null; + thisObj.captionLangPending = null; } - if (typeof thisObj.prefCaptionsSize !== 'undefined') { - // set the default caption size - // this doesn't work until the captions module is loaded + if (typeof thisObj.prefCaptionsSize !== 'undefined') { + // set the default caption size + // this doesn't work until the captions module is loaded thisObj.youTubePlayer.setOption('captions','fontSize',thisObj.translatePrefs('size',thisObj.prefCaptionsSize,'youtube')); } deferred.resolve(); }); - // Trigger the above event listener by briefly playing the video - this.loadingYouTubeCaptions = true; - this.youTubePlayer.playVideo(); + // Trigger the above event listener by briefly playing the video + this.loadingYouTubeCaptions = true; + this.youTubePlayer.playVideo(); + // If onApiChange has not been triggered, the captions module is not loading. + setTimeout(() => { + if ( ! apiTriggered ) { + setTimeout(() => { + // If a second passes without loading captions, assume there are none. + thisObj.youTubePlayer.pauseVideo(); + deferred.resolve(); + }, 500); + } + },500); } return promise; }; - AblePlayer.prototype.getYouTubeTimedTextUrl = function (youTubeId, trackName, trackLang) { - - // return URL for retrieving WebVTT source via YouTube's timedtext API - // Note: This API seems to be undocumented, and could break anytime - // UPDATE: Google removed this API on November 10, 2021 - // This function is no longer called, but is preserved here for reference - var url = 'https://www.youtube.com/api/timedtext?fmt=vtt'; - url += '&v=' + youTubeId; - url += '&lang=' + trackLang; - // if track has a value in the name field, it's required* in the URL - if (trackName !== '') { - url += '&name=' + trackName; - } - return url; - }; - AblePlayer.prototype.getYouTubePosterUrl = function (youTubeId, width) { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 - - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; + // return a URL for retrieving a YouTube poster image + // supported values of width: 120, 320, 480, 640, 1280, 1920. + var url = 'https://img.youtube.com/vi/' + youTubeId; + if (width == '120') { + // default (small) thumbnail, 120 x 90 + return url + '/default.jpg'; + } else if (width == '320') { + // medium quality thumbnail, 320 x 180 + return url + '/mqdefault.jpg'; + } else if (width == '480') { + // high quality thumbnail, 480 x 360 + return url + '/hqdefault.jpg'; + } else if (width == '640') { + // standard definition poster image, 640 x 480 + return url + '/sddefault.jpg'; + } else if (width == '1280') { + // standard definition poster image, 640 x 480 + return url + '/hq720.jpg'; + } else if ( width == '1920' ) { + // standard definition poster image, 640 x 480 + return url + '/maxresdefault.jpg'; + } + return false; }; AblePlayer.prototype.getYouTubeId = function (url) { // return a YouTube ID, extracted from a full YouTube URL - // Supported URL patterns (with http or https): - // https://youtu.be/xxx - // https://www.youtube.com/watch?v=xxx - // https://www.youtube.com/embed/xxx - - // in all supported patterns, the id is the last 11 characters - var idStartPos, id; - - if (url.indexOf('youtu') !== -1) { - // this is a full Youtube URL - url = url.trim(); - idStartPos = url.length - 11; - id = url.substring(idStartPos); - return id; - } - else { - return url; + // Supported URL patterns: + // http|s://youtu.be/xxx + // http|s://www.youtube.com/watch?v=xxx + // http|s://www.youtube.com/embed/xxx + + // in all supported patterns, the id is the last 11 characters + var idStartPos, id; + + if (url.indexOf('youtu') !== -1) { + // this is a full Youtube URL + url = url.trim(); + idStartPos = url.length - 11; + id = url.substring(idStartPos); + return id; + } else { + return url; } }; @@ -7948,13 +7169,12 @@ if (typeof module !== "undefined" && module.exports) { // Events: - // startTracking(event, position) - // tracking(event, position) - // stopTracking(event, position) + // - startTracking(event, position) + // - tracking(event, position) + // - stopTracking(event, position) - window. AccessibleSlider = function(mediaType, div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { + window.AccessibleSlider = function(div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { - // mediaType is either 'audio' or 'video' // div is the host element around which the slider will be built // orientation is either 'horizontal' or 'vertical' // length is the width or height of the slider, depending on orientation @@ -7996,8 +7216,7 @@ if (typeof module !== "undefined" && module.exports) { if (initialState === 'visible') { this.seekHead.attr('tabindex', '0'); - } - else { + } else { this.seekHead.attr('tabindex', '-1'); } // Since head is focusable, it gets the aria roles/titles. @@ -8036,8 +7255,7 @@ if (typeof module !== "undefined" && module.exports) { if (orientation === 'horizontal') { this.wrapperDiv.width(length); this.loadedDiv.width(0); - } - else { + } else { this.wrapperDiv.height(length); this.loadedDiv.height(0); } @@ -8061,26 +7279,22 @@ if (typeof module !== "undefined" && module.exports) { if (e.type === 'mouseenter' || e.type === 'focus') { thisObj.overHead = true; - } - else if (e.type === 'mouseleave' || e.type === 'blur') { + } else if (e.type === 'mouseleave' || e.type === 'blur') { thisObj.overHead = false; if (!thisObj.overBody && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' || e.type === 'touchmove') { + } else if (e.type === 'mousemove' || e.type === 'touchmove') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' || e.type === 'touchstart') { + } else if (e.type === 'mousedown' || e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(thisObj.seekHead.offset() + (thisObj.seekHead.width() / 2))); if (!thisObj.bodyDiv.is(':focus')) { thisObj.bodyDiv.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } @@ -8094,7 +7308,12 @@ if (typeof module !== "undefined" && module.exports) { this.bodyDiv.on( 'mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend', function (e) { + // Don't trigger move on right click. + if ( e.button == 2 && e.type == 'mousedown' ) { + return; + } coords = thisObj.pointerEventToXY(e); + let keyPressed = e.key; if (e.type === 'mouseenter') { thisObj.overBody = true; @@ -8102,15 +7321,13 @@ if (typeof module !== "undefined" && module.exports) { x: coords.x, y: coords.y }; - } - else if (e.type === 'mouseleave') { + } else if (e.type === 'mouseleave') { thisObj.overBody = false; thisObj.overBodyMousePos = null; if (!thisObj.overHead && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' || e.type === 'touchmove') { + } else if (e.type === 'mousemove' || e.type === 'touchmove') { thisObj.overBodyMousePos = { x: coords.x, y: coords.y @@ -8118,52 +7335,36 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' || e.type === 'touchstart') { + } else if (e.type === 'mousedown' || e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(coords.x)); thisObj.trackHeadAtPageX(coords.x); if (!thisObj.seekHead.is(':focus')) { thisObj.seekHead.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'keydown') { - // Home - if (e.which === 36) { + } else if (e.type === 'keydown') { + if (e.key === 'Home') { thisObj.trackImmediatelyTo(0); - } - // End - else if (e.which === 35) { + } else if (e.key === 'End') { thisObj.trackImmediatelyTo(thisObj.duration); - } - // Left arrow or down arrow - else if (e.which === 37 || e.which === 40) { + } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { thisObj.arrowKeyDown(-1); - } - // Right arrow or up arrow - else if (e.which === 39 || e.which === 38) { + } else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { thisObj.arrowKeyDown(1); - } - // Page up - else if (e.which === 33 && bigInterval > 0) { + } else if (e.key === 'PageUp' && bigInterval > 0) { thisObj.arrowKeyDown(bigInterval); - } - // Page down - else if (e.which === 34 && bigInterval > 0) { + } else if (e.key === 'PageDown' && bigInterval > 0) { thisObj.arrowKeyDown(-bigInterval); - } - else { + } else { return; } e.preventDefault(); - } - else if (e.type === 'keyup') { - if (e.which >= 33 && e.which <= 40) { + } else if (e.type === 'keyup') { + if ( keyPressed === e.key ) { if (thisObj.tracking && thisObj.trackDevice === 'keyboard') { thisObj.stopTracking(thisObj.keyTrackPosition); } @@ -8185,8 +7386,7 @@ if (typeof module !== "undefined" && module.exports) { this.nextStep = 2; } this.trackHeadAtPosition(this.keyTrackPosition); - } - else { + } else { this.nextStep = 1; this.inertiaCount = 0; this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); @@ -8194,26 +7394,7 @@ if (typeof module !== "undefined" && module.exports) { this.trackHeadAtPosition(this.keyTrackPosition); } }; -/* - AccessibleSlider.prototype.pageUp = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/ + AccessibleSlider.prototype.pageXToPosition = function (pageX) { var offset = pageX - this.bodyDiv.offset().left; var position = this.duration (offset / this.bodyDiv.width()); @@ -8268,7 +7449,7 @@ if (typeof module !== "undefined" && module.exports) { this.updateAriaValues(position, updateLive); } - // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. + // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. AccessibleSlider.prototype.setBuffered = function (ratio) { if (!isNaN(ratio)) { this.buffered = ratio; @@ -8331,14 +7512,12 @@ if (typeof module !== "undefined" && module.exports) { ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else if (pMinutes > 0) { + } else if (pMinutes > 0) { descriptionText = pMinutes + ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else { + } else { descriptionText = pSeconds + ' ' + pSecondWord; } @@ -8370,18 +7549,15 @@ if (typeof module !== "undefined" && module.exports) { this.timeTooltip.show(); if (this.tracking) { this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)); - } - else { + } else { this.timeTooltip.text(this.positionToStr(this.position)); } this.setTooltipPosition(this.seekHead.position().left + (this.seekHead.width() / 2)); - } - else if (this.overBody && this.overBodyMousePos) { + } else if (this.overBody && this.overBodyMousePos) { this.timeTooltip.show(); this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))); this.setTooltipPosition(this.overBodyMousePos.x - this.bodyDiv.offset().left); - } - else { + } else { clearTimeout(this.timeTooltipTimeoutId); var _this = this; @@ -8401,7 +7577,7 @@ if (typeof module !== "undefined" && module.exports) { AccessibleSlider.prototype.setTooltipPosition = function (x) { this.timeTooltip.css({ left: x - (this.timeTooltip.width() / 2) - 10, - bottom: this.seekHead.height() + 10 + bottom: this.seekHead.height() }); }; @@ -8419,8 +7595,7 @@ if (typeof module !== "undefined" && module.exports) { dMinutes = '0' + dMinutes; } return dHours + ':' + dMinutes + ':' + dSeconds; - } - else { + } else { return dMinutes + ':' + dSeconds; } }; @@ -8435,8 +7610,7 @@ if (typeof module !== "undefined" && module.exports) { var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; out.x = touch.pageX; out.y = touch.pageY; - } - else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') { + } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') { out.x = e.pageX; out.y = e.pageY; } @@ -8449,19 +7623,18 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addVolumeSlider = function($div) { - // Prior to v4.4.64, we were using a custom-build vertical volunme slider - // Changed to input type="range" because it's standard and gaining more widespread support - // including screen reader support - // TODO: Improve presentation of vertical slider. That requires some CSS finesse. + // Prior to v4.4.64, we were using a custom-build vertical volunme slider + // Changed to input type="range" because it's standard and gaining more widespread support + // including screen reader support + // TODO: Improve presentation of vertical slider. That requires some CSS finesse. - var thisObj, volumeSliderId, volumeHelpId, volumePct, tickLabelsId, $tickLabels, i, $tickOption, tickLabel; + var thisObj, volumeSliderId, volumeHelpId, volumePct, volumeLabel, volumeHeight; thisObj = this; // define a few variables volumeSliderId = this.mediaId + '-volume-slider'; volumeHelpId = this.mediaId + '-volume-help'; - tickLabelsId = this.mediaId + '-volume-tick-labels'; this.$volumeSlider = $('<div>',{ 'id': volumeSliderId, @@ -8472,15 +7645,14 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-tooltip', 'role': 'tooltip' }).hide(); - this.$volumeRange = $('<input>',{ + this.$volumeRange = $('<input>',{ 'type': 'range', 'min': '0', 'max': '10', 'step': '1', - 'orient': 'vertical', // non-standard, but required for Firefox - 'aria-label': this.tt.volumeUpDown, + 'orient': 'vertical', // non-standard, but required for Firefox + 'aria-label': this.translate( 'volumeUpDown', 'Volume up down' ), 'value': this.volume - // 'list': tickLabelsId // Uncomment this to use tickLabels (see note below) }); volumePct = parseInt(thisObj.volume) / 10 * 100; this.$volumeHelp = $('<div>',{ @@ -8488,30 +7660,11 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-volume-help', 'aria-live': 'polite' }).text(volumePct + '%'); - this.$volumeButton.attr({ - 'aria-describedby': volumeHelpId - }); - $tickLabels = $('<datalist>',{ - 'id': tickLabelsId - }); - for (i = 0; i <= 10; i++) { - if (i === 0) { - tickLabel = this.tt.mute; - } - else { - tickLabel = (i * 10) + '%'; - } - $tickOption = $('<option>',{ - 'value': i, - 'label': tickLabel - }) - $tickLabels.append($tickOption); - } + volumeLabel = this.$volumeButton.attr( 'aria-label' ); + this.$volumeButton.attr( 'aria-label', volumeLabel + ' ' + volumePct + '%'); this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp); - // To add $tickLabels, use the following line of code to replace the one above - // and uncommnet the 'list' property in the definition of this.$volumeRange above - // As of Nov 2022, this feature is not supported by any screen reader - // this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp,$tickLabels); + volumeHeight = this.$volumeButton.parents( '.able-control-row' )[0]; + this.$volumeSlider.css( 'bottom', volumeHeight.offsetHeight ); $div.append(this.$volumeSlider); @@ -8523,23 +7676,20 @@ if (typeof module !== "undefined" && module.exports) { this.$volumeRange.on('input',function (e) { thisObj.handleVolumeChange($(this).val()); }); - + this.$volumeRange.on('keydown',function (e) { - // Escape key or Enter key or Tab key - if (e.which === 27 || e.which === 13 || e.which === 9) { + if (e.key === 'Escape' || e.key === 'Tab' || e.key === 'Enter') { // close popup if (thisObj.$volumeSlider.is(':visible')) { thisObj.closingVolume = true; // stopgap thisObj.hideVolumePopup(); - } - else { + } else { if (!thisObj.closingVolume) { thisObj.showVolumePopup(); } } - } - else { + } else { return; } }); @@ -8551,93 +7701,61 @@ if (typeof module !== "undefined" && module.exports) { var volumePct; volumePct = (volume/10) * 100; - // Update help text - if (this.$volumeHelp) { - this.$volumeHelp.text(volumePct + '%'); + // Update help text + if (this.$volumeHelp) { + this.$volumeHelp.text(volumePct + '%'); } - // Update the default value of the volume slider input field - // This doesn't seem to be necessary; browsers remember the previous setting during a session - // but this is a fallback in case they don't - this.$volumeRange.attr('value',volume); + // Update the default value of the volume slider input field + // This doesn't seem to be necessary; browsers remember the previous setting during a session + // but this is a fallback in case they don't + this.$volumeRange.attr('value',volume); }; AblePlayer.prototype.refreshVolumeButton = function(volume) { - var volumeName, volumePct, volumeLabel, volumeIconClass, volumeImg, newSvgData; + var volumeName, volumePct, volumeLabel; volumeName = this.getVolumeName(volume); volumePct = (volume/10) * 100; - volumeLabel = this.tt.volume + ' ' + volumePct + '%'; + volumeLabel = this.translate( 'volume', 'Volume' ) + ' ' + volumePct + '%'; - if (this.iconType === 'font') { - volumeIconClass = 'icon-volume-' + volumeName; - this.$volumeButton.find('span').first().removeClass().addClass(volumeIconClass); - this.$volumeButton.find('span.able-clipped').text(volumeLabel); - } - else if (this.iconType === 'image') { - volumeImg = this.imgPath + 'volume-' + volumeName + '.png'; - this.$volumeButton.find('img').attr('src',volumeImg); - } - else if (this.iconType === 'svg') { - if (volumeName !== 'mute') { - volumeName = 'volume-' + volumeName; - } - newSvgData = this.getSvgData(volumeName); - this.$volumeButton.find('svg').attr('viewBox',newSvgData[0]); - this.$volumeButton.find('path').attr('d',newSvgData[1]); - } + this.getIcon( this.$volumeButton, 'volume-' + volumeName ); + this.$volumeButton.attr( 'aria-label', volumeLabel ); }; AblePlayer.prototype.handleVolumeButtonClick = function() { if (this.$volumeSlider.is(':visible')) { - this.hideVolumePopup(); - } - else { + this.hideVolumePopup(); + } else { this.showVolumePopup(); } - }; - - AblePlayer.prototype.handleVolumeKeystroke = function(keycode) { - - // keycode is an ASCII key code 49-57 (numeric keys 1-9), - // keyboard shortcuts for changing volume - - var volume; - - if (keycode >= 49 && keycode <= 57) { - volume = keycode - 48; - } - else { - return false; - } + }; + AblePlayer.prototype.handleVolumeKeystroke = function(volume) { + // keyboard shortcuts for changing volume if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); } - }; + }; AblePlayer.prototype.handleVolumeChange = function(volume) { - // handle volume change using the volume input slider + // handle volume change using the volume input slider if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); @@ -8648,8 +7766,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.isMuted()) { this.setMute(false); - } - else { + } else { this.setMute(true); } }; @@ -8681,8 +7798,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { return this.media.muted; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { return this.youTubePlayer.isMuted(); } }; @@ -8694,8 +7810,7 @@ if (typeof module !== "undefined" && module.exports) { // save current volume so it can be restored after unmute this.lastVolume = this.volume; this.volume = 0; - } - else { // restore to previous volume + } else { // restore to previous volume if (typeof this.lastVolume !== 'undefined') { this.volume = this.lastVolume; } @@ -8703,16 +7818,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.media.muted = mute; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (mute) { this.youTubePlayer.mute(); - } - else { + } else { this.youTubePlayer.unMute(); } } - this.setVolume(this.volume); + this.setVolume(this.volume); this.refreshVolumeHelp(this.volume); this.refreshVolumeButton(this.volume); }; @@ -8722,29 +7835,22 @@ if (typeof module !== "undefined" && module.exports) { // volume is 1 to 10 // convert as needed depending on player - var newVolume; - + var newVolume; + this.syncSignVideo( {'volume' : 0 } ); if (this.player === 'html5') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.media.volume = newVolume; - - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.volume = 0; // always mute - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // volume is 0 to 100 - newVolume = volume * 10; + newVolume = volume * 10; this.youTubePlayer.setVolume(newVolume); this.volume = volume; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.vimeoPlayer.setVolume(newVolume).then(function() { // setVolume finished. - // could do something here // successful completion also fires a 'volumechange' event (see event.js) }); } @@ -8757,10 +7863,9 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { // uses 0 to 1 scale return this.media.volume * 10; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // uses 0 to 100 scale - if (this.youTubePlayerReady) { + if (this.youTubePlayerReady) { return this.youTubePlayer.getVolume() / 10; } } @@ -8777,14 +7882,11 @@ if (typeof module !== "undefined" && module.exports) { // returns 'mute','soft','medium', or 'loud' depending on volume level if (volume == 0) { return 'mute'; - } - else if (volume == 10) { + } else if (volume == 10) { return 'loud'; - } - else if (volume < 5) { + } else if (volume < 5) { return 'soft'; - } - else { + } else { return 'medium'; } }; @@ -8795,70 +7897,57 @@ if (typeof module !== "undefined" && module.exports) { var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"; // Based on the incredible accessible modal dialog. - window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, isModal, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) { + window.AccessibleDialog = function( modalDiv, $returnElement, title, closeButtonLabel) { this.title = title; this.closeButtonLabel = closeButtonLabel; this.focusedElementBeforeModal = $returnElement; - this.escapeHook = escapeHook; this.baseId = $(modalDiv).attr('id') || Math.floor(Math.random() * 1000000000).toString(); var thisObj = this; var modal = modalDiv; this.modal = modal; - modal.css({ - 'width': width || '50%' - }); + modal.addClass('able-modal-dialog'); - if (!fullscreen) { - var closeButton = $('<button>',{ - 'class': 'modalCloseButton', - 'title': thisObj.closeButtonLabel, - 'aria-label': thisObj.closeButtonLabel - }).text('X'); - closeButton.keydown(function (e) { - // Space key down - if (e.which === 32) { - thisObj.hide(); - } - }).click(function () { + var closeButton = $('<button>',{ + 'class': 'modalCloseButton', + 'title': thisObj.closeButtonLabel, + 'aria-label': thisObj.closeButtonLabel + }).text('×'); + closeButton.on( 'keydown', function (e) { + if (e.key === ' ') { thisObj.hide(); - }); + } + }).on( 'click', function () { + thisObj.hide(); + }); - var titleH1 = $('<h1></h1>'); - titleH1.attr('id', 'modalTitle-' + this.baseId); - titleH1.css('text-align', 'center'); - titleH1.text(title); - this.titleH1 = titleH1; + var titleH1 = $('<h1></h1>'); + titleH1.attr('id', 'modalTitle-' + this.baseId); + titleH1.text(title); + this.titleH1 = titleH1; - modal.attr({ - 'aria-labelledby': 'modalTitle-' + this.baseId, - }); - modal.prepend(titleH1); - modal.prepend(closeButton); - } + modal.attr({ + 'aria-labelledby': 'modalTitle-' + this.baseId, + }); + var modalHeader = $( '<div>', { + 'class': 'able-modal-header' + }); + modalHeader.prepend(titleH1); + modalHeader.prepend(closeButton); + modal.prepend(modalHeader); modal.attr({ 'aria-hidden': 'true', - 'role': dialogRole, + 'role': 'dialog', + 'aria-modal': 'true' }); - if (isModal) { - modal.attr('aria-modal','true'); - } - modal.keydown(function (e) { - // Escape - if (e.which === 27) { - if (thisObj.escapeHook) { - thisObj.escapeHook(e, this); - } - else { - thisObj.hide(); - e.preventDefault(); - } - } - // Tab - else if (e.which === 9) { + modal.on( 'keydown', function (e) { + if (e.key === 'Escape') { + thisObj.hide(); + e.preventDefault(); + } else if (e.key === 'Tab') { // Manually loop tab navigation inside the modal. var parts = modal.find(''); var focusable = parts.filter(focusableElementsSelector).filter(':visible'); @@ -8872,13 +7961,12 @@ if (typeof module !== "undefined" && module.exports) { if (e.shiftKey) { // If backwards from first element, go to last. if (currentIndex === 0) { - focusable.get(focusable.length - 1).focus(); + focusable.get(focusable.length - 1).trigger('focus'); e.preventDefault(); } - } - else { + } else { if (currentIndex === focusable.length - 1) { - focusable.get(0).focus(); + focusable.get(0).trigger('focus'); e.preventDefault(); } } @@ -8886,7 +7974,10 @@ if (typeof module !== "undefined" && module.exports) { e.stopPropagation(); }); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + if ( $( 'body' ).hasClass( 'able-modal-active' ) ) { + $( 'body > ') .not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); + } }; AccessibleDialog.prototype.show = function () { @@ -8902,10 +7993,12 @@ if (typeof module !== "undefined" && module.exports) { // Keep from moving focus out of dialog when clicking outside of it. overlay.on('mousedown.accessibleModal', function (e) { e.preventDefault(); + thisObj.hide(); }); } - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('inert', true); + $( 'body' ).addClass( 'able-modal-active' ); this.overlay.css('display', 'block'); this.modal.css('display', 'block'); @@ -8921,7 +8014,7 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; setTimeout(function () { // set focus on the first focusable element - thisObj.modal.find('button.modalCloseButton').first().focus(); + thisObj.modal.find('button.modalCloseButton').first().trigger('focus'); }, 300); }; @@ -8931,9 +8024,10 @@ if (typeof module !== "undefined" && module.exports) { } this.modal.css('display', 'none'); this.modal.attr('aria-hidden', 'true'); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + $('body > *').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); - this.focusedElementBeforeModal.focus(); + this.focusedElementBeforeModal.trigger('focus'); }; AccessibleDialog.prototype.getInputs = function () { @@ -9054,7 +8148,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getSecondsFromColonTime = function (timeStr) { // Converts string of form hh:mm:ss to seconds - var timeParts, hours, minutes, seconds, newTime; + var timeParts, hours, minutes, seconds; timeParts = timeStr.split(":"); if (timeParts.length === 3) { @@ -9082,6 +8176,35 @@ if (typeof module !== "undefined" && module.exports) { return Number(Math.floor(value + "e" + decimals) + "e-" + decimals); }; + AblePlayer.prototype.defer = function() { + const self = this; + const promise = new Promise((resolve, reject) => { + self.resolve = resolve; + self.reject = reject; + self.promise = () => promise; + }); + } + + AblePlayer.prototype.getScript = function( source, callback ) { + var script = document.createElement('script'); + var prior = document.getElementsByTagName('script')[0]; + script.async = 1; + + script.onload = script.onreadystatechange = function( _, isAbort ) { + if ( isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) { + script.onload = script.onreadystatechange = null; + script = undefined; + + if ( !isAbort && callback ) { + setTimeout(callback, 0); + } + } + }; + + script.src = source; + prior.parentNode.insertBefore(script, prior); + } + AblePlayer.prototype.hasAttr = function (object, attribute) { // surprisingly, there is no hasAttr() function in Jquery as of 3.2.1 // return true if object has attribute; otherwise false @@ -9099,17 +8222,6 @@ if (typeof module !== "undefined" && module.exports) { } }; - Number.isInteger = - Number.isInteger || - function (value) { - // polyfill for IE11, which doesn't otherwise support Number.isInteger - // https://stackoverflow.com/a/31720368/744281 - return ( - typeof value === "number" && - isFinite(value) && - Math.floor(value) === value - ); - }; })(jQuery); (function ($) { @@ -9122,12 +8234,12 @@ if (typeof module !== "undefined" && module.exports) { // toggles the Description button or changes a description-related preference // The following variables are applicable to delivery of description: - // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) + // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) // prefDesc == 1 if user wants description (i.e., Description button is on); else 0 // prefDescPause == 1 to pause video when description starts; else 0 // prefDescVisible == 1 to visibly show text-based description area; else 0 // prefDescMethod == either 'video' or 'text' (as of v4.0.10, prefDescMethod is always 'video') - // descMethod is the format actually used ('video' or 'text'), regardless of user preference + // descMethod is the format actually used ('video' or 'text'), regardless of user preference // hasOpenDesc == true if a described version of video is available via data-desc-src attribute // hasClosedDesc == true if a description text track is available // descOn == true if description of either type is on @@ -9136,12 +8248,12 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - if (this.mediaType === 'audio') { - deferred.resolve(); + if (this.mediaType === 'audio') { + deferred.resolve(); } // check to see if there's an open-described version of this video @@ -9150,106 +8262,78 @@ if (typeof module !== "undefined" && module.exports) { this.descFile = this.$sources.first().attr('data-desc-src'); if (typeof this.descFile !== 'undefined') { this.hasOpenDesc = true; - } - else { + } else { // there's no open-described version via data-desc-src, // but what about data-youtube-desc-src or data-vimeo-desc-src? - // if these exist, they would have been defined earlier - if (this.youTubeDescId || this.vimeoDescId) { - this.hasOpenDesc = true; - } - else { // there are no open-described versions from any source - this.hasOpenDesc = false; - } + // if these exist, they would have been defined earlier + this.hasOpenDesc = (this.youTubeDescId || this.vimeoDescId) ? true : false; } // Set this.descMethod based on media availability & user preferences + // no description is available for this video + this.descMethod = null; if (this.hasOpenDesc && this.hasClosedDesc) { - // both formats are available. User gets their preference. - if (this.prefDescMethod) { - this.descMethod = this.prefDescMethod; - } - else { - // user has no preference. Video is default. - this.descMethod = 'video'; - } - } - else if (this.hasOpenDesc) { + // both formats are available. User gets their preference. + this.descMethod = (this.prefDescMethod) ? this.prefDescMethod : 'video'; + } else if (this.hasOpenDesc) { this.descMethod = 'video'; - } - else if (this.hasClosedDesc) { + } else if (this.hasClosedDesc) { this.descMethod = 'text'; } - else { - // no description is available for this video - this.descMethod = null; - } // Set the default state of descriptions - if (this.descMethod) { - if (this.prefDesc === 1) { - this.descOn = true; - } - else if (this.prefDesc === 0) { - this.descOn = false; - } - else { - // user has no prefs. Use default state. - if (this.defaultStateDescriptions === 1) { - this.descOn = true; - } - else { - this.descOn = false; - } + this.descOn = false; + if (this.descMethod) { + if (this.prefDesc === 1) { + this.descOn = true; + } else if (this.prefDesc === 0) { + this.descOn = false; + } else { + // user has no prefs. Use default state. + this.descOn = (this.defaultStateDescriptions === 1) ? true : false; } } - else { - this.descOn = false; - } - if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc && this.descMethod === 'text') { + + // If a video has text audio descriptions, inject the description area. + if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc ) { this.injectTextDescriptionArea(); } if (this.descOn) { - if (this.descMethod === 'video') { - if (!this.usingDescribedVersion()) { - // switched from non-described to described version - this.swapDescription(); - } + if (this.descMethod === 'video' && !this.usingDescribedVersion() ) { + // switched from non-described to described version + this.swapDescription(); } if (this.hasClosedDesc) { if (this.prefDescVisible) { // make description text visible if (typeof this.$descDiv !== 'undefined') { this.$descDiv.show(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } - } - else { + } else { // keep it visible to screen readers, but hide it visibly if (typeof this.$descDiv !== 'undefined') { - this.$descDiv.addClass('able-clipped'); + this.$descDiv.addClass('able-offscreen'); } } } - } - else { // description is off. + } else { // description is off. if (this.descMethod === 'video') { // user has turned off described version of video if (this.usingDescribedVersion()) { // user was using the described verion. Swap for non-described version this.swapDescription(); } - } - else if (this.descMethod === 'text') { // user has turned off text description + } else if (this.descMethod === 'text') { // user has turned off text description // hide description div from everyone, including screen reader users if (typeof this.$descDiv !== 'undefined') { this.$descDiv.hide(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } } } deferred.resolve(); - return promise; + return promise; }; AblePlayer.prototype.usingDescribedVersion = function () { @@ -9258,116 +8342,79 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'youtube') { return (this.activeYouTubeId === this.youTubeDescId); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { return (this.activeVimeoId === this.vimeoDescId); - } - else { + } else { return (this.$sources.first().attr('data-desc-src') === this.$sources.first().attr('src')); } }; - AblePlayer.prototype.initSpeech = function (context) { - - // Some browsers &/or operating systems require a user-initiated click - // before this.synth.getVoices() will work. As of Nov 2022: - // Chrome requires a click before synth.getVoices() will work - // iOS requires a click before synth.speak() will work - // A hack to address this: Listen for ANY click, then play an inaudible utterance - // to intitiate speech synthesis - // https://stackoverflow.com/questions/32193704/js-speech-synthesis-issue-on-ios - // This function does that, and sets this.speechEnabled - // It's called with either of these contexts: - // 'init' - player is being initialized - // 'play' - user has clicked play - // 'prefs' - user has clicked prefs button - // 'desc' - it's time to announce a description! - - var thisObj = this; - - if (this.speechEnabled === null) { - - if (typeof this.synth !== 'undefined') { - // cancel any previous synth instance and reinitialize - this.synth.cancel(); - } +/** + * Initializes speech synthesis capabilities for the player. + * This method addresses browser and OS limitations that require user interaction + * before speech synthesis functions become available. It handles different contexts + * like initialization, playing media, accessing preferences, or announcing descriptions. + * @param {string} context - The context in which the function is called ('init', 'play', 'prefs', 'desc'). + / + AblePlayer.prototype.initSpeech = function (context) { + var thisObj = this; - if (window.speechSynthesis) { + // Function to attempt enabling speech synthesis + function attemptEnableSpeech() { + var greeting = new SpeechSynthesisUtterance("\x20"); + greeting.onend = function () { + thisObj.getBrowserVoices(); + if ( + (Array.isArray(thisObj.descVoices) && thisObj.descVoices.length) || + context !== "init" + ) { + thisObj.speechEnabled = true; + } + }; + thisObj.synth.speak(greeting); + } - // browser supports speech synthesis + // Function to handle the initial click and enable speech synthesis + function handleInitialClick() { + attemptEnableSpeech(); + // Once the utterance starts, remove this specific click event listener + // Ensures the event handler only runs once and cleans up after itself + $(document).off("click", handleInitialClick); + } + if (this.speechEnabled === null) { + if (window.speechSynthesis) { + // Browser supports speech synthesis this.synth = window.speechSynthesis; + this.synth.cancel(); // Cancel any ongoing speech synthesis - if (context === 'init') { - // handle a click on anything, in case the user - // clicks something before they click 'play' or 'prefs' buttons - // that would allow us to init speech before it's needed - $(document).on('click',function() { - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - } - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; - }); - - // go ahead and call get browser voices in case it might work, - // for browsers that don't require a click - this.getBrowserVoices(); - if (this.descVoices.length) { - this.speechEnabled = true; - } - } - else { // context is either 'play' or 'prefs' or 'desc' - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - }; - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; + if (context === "init") { + // Attempt to enable speech synthesis directly for browsers that don't require a click + attemptEnableSpeech(); + // For initial setup, require a user click to enable speech synthesis + // Scoping to a particular handler to avoid conflicts with other click events + $(document).on("click", handleInitialClick); + } else { + // For other contexts, attempt to enable speech synthesis directly + attemptEnableSpeech(); } - } - else { - // browser does not support speech synthesis - this.speechEnabled = false; + } else { + // Browser does not support speech synthesis + this.speechEnabled = false; } } - }; + }; AblePlayer.prototype.getBrowserVoices = function () { - - // define this.descVoices array - // includes only languages that match the language of the captions or player + + // define this.descVoices array + // includes only languages that match the language of the captions or player var voices, descLangs, voiceLang, preferredLang; - if (this.captionLang) { - preferredLang = this.captionLang.substring(0,2).toLowerCase(); - } - else { - preferredLang = this.lang.substring(0,2).toLowerCase(); - } - this.descVoices = []; + preferredLang = (this.captionLang) ? this.captionLang.substring(0,2).toLowerCase() : this.lang.substring(0,2).toLowerCase(); + + this.descVoices = []; voices = this.synth.getVoices(); descLangs = this.getDescriptionLangs(); if (voices.length > 0) { @@ -9377,9 +8424,9 @@ if (typeof module !== "undefined" && module.exports) { // match only the first 2 characters of the lang code voiceLang = voices[i].lang.substring(0,2).toLowerCase(); if (voiceLang === preferredLang && (descLangs.indexOf(voiceLang) !== -1)) { - // this voice matches preferredLang + // this voice matches preferredLang // AND there's a matching description track in this language - // Add this voice to final array + // Add this voice to final array this.descVoices.push(voices[i]); } } @@ -9410,51 +8457,44 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setDescriptionVoice = function () { - // set description voice on player init, or when user changes caption language - // Voice is determined in the following order of precedence: - // 1. User's preferred voice for this language, saved in a cookie + // set description voice on player init, or when user changes caption language + // Voice is determined in the following order of precedence: + // 1. User's preferred voice for this language, saved in preferences // 2. The first available voice in the array of available voices for this browser in this language - var cookie, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; - cookie = this.getCookie(); - if (typeof cookie.voices !== 'undefined') { - prefDescVoice = this.getPrefDescVoice(); - } - else { - prefDescVoice = null; - } - + var preferences, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; + preferences = this.getPref(); + prefDescVoice = (typeof preferences.voices !== 'undefined') ? this.getPrefDescVoice() : null; + this.getBrowserVoices(); this.rebuildDescPrefsForm(); - if (this.selectedDescriptions) { + if (this.selectedDescriptions) { descLang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - descLang = this.captionLang; - } - else { - descLang = this.lang; + } else if (this.captionLang) { + descLang = this.captionLang; + } else { + descLang = this.lang; } if (this.synth) { voices = this.synth.getVoices(); if (voices.length > 0) { - if (prefDescVoice) { - // select the language that matches prefDescVoice, if it's available - prefVoiceFound = false; + if (prefDescVoice) { + // select the language that matches prefDescVoice, if it's available + prefVoiceFound = false; for (var i=0; i<voices.length; i++) { // first, be sure voice is the correct language if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { - if (voices[i].name === prefDescVoice) { - descVoice = voices[i].name; - prefVoiceFound = true; + if (voices[i].name === prefDescVoice) { + descVoice = voices[i].name; + prefVoiceFound = true; break; } } } } - if (!prefVoiceFound) { + if (!prefVoiceFound) { // select the first language that matches the first 2 characters of the lang code for (var i=0; i<voices.length; i++) { if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { @@ -9468,10 +8508,9 @@ if (typeof module !== "undefined" && module.exports) { this.prefDescVoiceLang = descLang; // select this voice in the Description Prefs dialog if (this.$voiceSelectField) { - var selectedOption = this.$voiceSelectField.find('option[value="' + this.prefDescVoice + '"]'); this.$voiceSelectField.val(this.prefDescVoice); } - this.updateCookie('voice'); + this.updatePreferences('voice'); } } }; @@ -9485,70 +8524,66 @@ if (typeof module !== "undefined" && module.exports) { // 2. User is toggling description // (playerCreated == true) - var thisObj, i, origSrc, descSrc, srcType, newSource; + var thisObj, i, origSrc, descSrc; thisObj = this; - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; - // get element that has focus at the time swap is initiated - // after player is rebuilt, focus will return to that same element + // get element that has focus at the time swap is initiated + // after player is rebuilt, focus will return to that same element // (if it exists) - this.$focusedElement = $(':focus'); + this.$focusedElement = $(':focus'); + this.activeMedia = this.mediaId; // get current time of current source, and attempt to start new video at the same time - // whether this is possible will be determined after the new media source has loaded - // see onMediaNewSourceLoad() - if (this.elapsed > 0) { - this.swapTime = this.elapsed; + // whether this is possible will be determined after the new media source has loaded + // see onMediaNewSourceLoad() + if (this.elapsed > 0) { + this.swapTime = this.elapsed; + } else { + this.swapTime = 0; } - else { - this.swapTime = 0; - } - if (this.duration > 0) { - this.prevDuration = this.duration; + if (this.duration > 0) { + this.prevDuration = this.duration; } - // Capture current playback state, so media can resume after source is swapped - if (!this.okToPlay) { - this.okToPlay = this.playing; + // Capture current playback state, so media can resume after source is swapped + if (!this.okToPlay) { + this.okToPlay = this.playing; } if (this.descOn) { - // user has requested the described version - this.showAlert(this.tt.alertDescribedVersion); - } - else { - // user has requested the non-described version - this.showAlert(this.tt.alertNonDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); + } else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); } if (this.player === 'html5') { this.swappingSrc = true; - this.paused = true; + this.paused = true; if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-orig-src - origSrc = this.$sources[i].getAttribute('data-orig-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-orig-src') ); srcType = this.$sources[i].getAttribute('type'); if (origSrc) { this.$sources[i].setAttribute('src',origSrc); } - } - } - else { + } + } else { // the non-described version is currently playing. Swap to described. for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-desc-src (if one exists) // then store original source in a new data-orig-src attribute - origSrc = this.$sources[i].getAttribute('src'); - descSrc = this.$sources[i].getAttribute('data-desc-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('src') ); + descSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-desc-src') ); srcType = this.$sources[i].getAttribute('type'); if (descSrc) { this.$sources[i].setAttribute('src',descSrc); @@ -9557,88 +8592,77 @@ if (typeof module !== "undefined" && module.exports) { } } - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - if (this.playerCreated) { - // delete old player, then recreate it with new source & tracks - this.deletePlayer('swap-desc-html'); - this.recreatePlayer().then(function() { - if (!thisObj.loadingMedia) { + return; + } + if (this.playerCreated) { + // delete old player, then recreate it with new source & tracks + this.deletePlayer('swap-desc-html'); + this.recreatePlayer().then(function() { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } }); - } - else { + } else { // player is in the process of being created - // no need to recreate it - } - } - else if (this.player === 'youtube') { - - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeYouTubeId = this.youTubeId; - } - else { - // the non-described version is currently playing. Swap to described. - this.activeYouTubeId = this.youTubeDescId; + // no need to recreate it } + } else if (this.player === 'youtube') { + + // if the described version is currently playing, swap to non-described + this.activeYouTubeId = (this.usingDescribedVersion()) ? this.youTubeId : this.youTubeDescId; + if (typeof this.youTubePlayer !== 'undefined') { - thisObj.swappingSrc = true; + thisObj.swappingSrc = true; if (thisObj.playing) { // loadVideoById() loads and immediately plays the new video at swapTime thisObj.youTubePlayer.loadVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - else { + } else { // cueVideoById() loads the new video and seeks to swapTime, but does not play thisObj.youTubePlayer.cueVideoById(thisObj.activeYouTubeId,thisObj.swapTime); } } - if (this.playerCreated) { - this.deletePlayer('swap-desc-youtube'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-youtube'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { - // nothing to do here - // next steps occur when youtube onReady event fires - // see youtube.js > finalizeYoutubeInit() - }); - } - else if (this.player === 'vimeo') { + return; + } + this.recreatePlayer().then(function() { + // nothing to do here + // next steps occur when youtube onReady event fires + // see youtube.js > finalizeYoutubeInit() + }); + } else if (this.player === 'vimeo') { if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described this.activeVimeoId = this.vimeoId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); + } else { // the non-described version is currently playing. Swap to described. this.activeVimeoId = this.vimeoDescId; - this.showAlert(this.tt.alertDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); } - if (this.playerCreated) { - this.deletePlayer('swap-desc-vimeo'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-vimeo'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { + return; + } + this.recreatePlayer().then(function() { // load the new video source thisObj.vimeoPlayer.loadVideo(thisObj.activeVimeoId).then(function() { if (thisObj.playing) { // video was playing when user requested an alternative version // seek to swapTime and continue playback (playback happens automatically) thisObj.vimeoPlayer.setCurrentTime(thisObj.swapTime); - } - else { + } else { // Vimeo autostarts immediately after video loads // The "Described" button should not trigger playback, so stop this before the user notices. thisObj.vimeoPlayer.pause(); @@ -9649,36 +8673,30 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.showDescription = function(now) { - - if (!this.hasClosedDesc || this.swappingSrc || !this.descOn || this.descMethod === 'video') { + if (!this.playing || !this.hasClosedDesc || this.swappingSrc || !this.descOn || ( this.descMethod === 'video' && !this.prefDescVisible ) ) { return; } - var thisObj, i, cues, d, thisDescription, descText, msg; + var thisObj, cues, d, thisDescription, descText; thisObj = this; var flattenComponentForDescription = function (component) { var result = []; if (component.type === 'string') { result.push(component.value); - } - else { + } else { for (var i = 0; i < component.children.length; i++) { result.push(flattenComponentForDescription(component.children[i])); } } return result.join(''); }; - + cues = []; if (this.selectedDescriptions) { cues = this.selectedDescriptions.cues; - } - else if (this.descriptions.length >= 1) { + } else if (this.descriptions.length >= 1) { cues = this.descriptions[0].cues; } - else { - cues = []; - } for (d = 0; d < cues.length; d++) { if ((cues[d].start <= now) && (cues[d].end > now)) { thisDescription = d; @@ -9687,35 +8705,35 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisDescription !== 'undefined') { if (this.currentDescription !== thisDescription) { - // temporarily remove aria-live from $status in order to prevent description from being interrupted + // temporarily remove aria-live from $status to prevent description from being interrupted this.$status.removeAttr('aria-live'); descText = flattenComponentForDescription(cues[thisDescription].components); - if (this.descReader === 'screenreader') { + if (this.descReader === 'screenreader') { // load the new description into the container div for screen readers to read this.$descDiv.html(descText); - } - else if (this.speechEnabled) { - // use browser's built-in speech synthesis - this.announceDescriptionText('description',descText); + } else if (this.speechEnabled) { + if ( 'video' !== this.descMethod ) { + // use browser's built-in speech synthesis + this.announceDescriptionText('description',descText); + } if (this.prefDescVisible) { // write description to the screen for sighted users // but remove ARIA attributes since it isn't intended to be read by screen readers this.$descDiv.html(descText).removeAttr('aria-live aria-atomic'); } - } - else { + } else { // browser does not support speech synthesis // load the new description into the container div for screen readers to read this.$descDiv.html(descText); } + // Only pause video if not using a described video. if (this.prefDescPause && this.descMethod === 'text') { this.pauseMedia(); this.pausedForDescription = true; } this.currentDescription = thisDescription; } - } - else { + } else { this.$descDiv.html(''); this.currentDescription = -1; // restore aria-live to $status @@ -9723,42 +8741,33 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - - // called when user changed playback rate - // adjust rate of audio description to match + AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - var speechRate; + // called when user changed playback rate + // adjust rate of audio description to match + var speechRate; - if (rate === 0.5) { - speechRate = 0.7; // option 1 in prefs menu - } - else if (rate === 0.75) { - speechRate = 0.8; // option 2 in prefs menu - } - else if (rate === 1.0) { + if (rate === 0.5) { + speechRate = 0.7; // option 1 in prefs menu + } else if (rate === 0.75) { + speechRate = 0.8; // option 2 in prefs menu + } else if (rate === 1.0) { speechRate = 1; // option 4 in prefs menu (normal speech, default) - } - else if (rate === 1.25) { + } else if (rate === 1.25) { speechRate = 1.1; // option 5 in prefs menu - } - else if (rate === 1.5) { - speechRate = 1.2; // option 6 in prefs menu - } - else if (rate === 1.75) { - speechRate = 1.5; // option 7 in prefs menu - } - else if (rate === 2.0) { + } else if (rate === 1.5) { + speechRate = 1.2; // option 6 in prefs menu + } else if (rate === 1.75) { + speechRate = 1.5; // option 7 in prefs menu + } else if (rate === 2.0) { speechRate = 2; // option 8 in prefs menu (fast) - } - else if (rate === 2.25) { + } else if (rate === 2.25) { speechRate = 2.5; // option 9 in prefs menu (very fast) - } - else if (rate >= 2.5) { - speechRate = 3; // option 10 in prefs menu (super fast) + } else if (rate >= 2.5) { + speechRate = 3; // option 10 in prefs menu (super fast) } this.prefDescRate = speechRate; - }; + }; AblePlayer.prototype.announceDescriptionText = function(context, text) { @@ -9788,10 +8797,10 @@ if (typeof module !== "undefined" && module.exports) { // and typically requires a computer reboot to make right again. // This has been observed frequently in macOS Big Sur, but also in Windows 10 // To ignore user's voice preferences and always use the first voice, set the following var to true - // This is for testing only; not recommended for production - // unless the voice select field is also removed from the Prefs dialog + // This is for testing only; not recommended for production + // unless the voice select field is also removed from the Prefs dialog var useFirstVoice = false; - + if (!this.speechEnabled) { // voices array failed to load the first time. Try again this.initSpeech('desc'); @@ -9803,8 +8812,7 @@ if (typeof module !== "undefined" && module.exports) { pitch = $('#' + this.mediaId + '_prefDescPitch').val(); rate = $('#' + this.mediaId + '_prefDescRate').val(); volume = $('#' + this.mediaId + '_prefDescVolume').val(); - } - else { + } else { // get settings from global prefs voiceName = this.prefDescVoice; pitch = this.prefDescPitch; @@ -9817,8 +8825,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.descVoices.length > 0) { if (useFirstVoice) { voice = this.descVoices[0]; - } - else if (voiceName) { + } else if (voiceName) { // get the voice that matches user's preferred voiceName for (i = 0; i < this.descVoices.length; i++) { if (this.descVoices[i].name == voiceName) { @@ -9832,63 +8839,62 @@ if (typeof module !== "undefined" && module.exports) { // use the first voice in the array voice = this.descVoices[0]; } - utterance = new SpeechSynthesisUtterance(); - utterance.voice = voice; - utterance.voiceURI = 'native'; - utterance.volume = volume; - utterance.rate = rate; - utterance.pitch = pitch; - utterance.text = text; - // TODO: Consider the best language for the utterance: - // language of the web page? (this.lang) - // language of the WebVTT description track? - // language of the user's chosen voice? - // If there's a mismatch between any of these, the description will likely be unintelligible - utterance.lang = this.lang; - utterance.onstart = function(e) { - // utterance has started - }; - utterance.onpause = function(e) { - // utterance has paused - }; - utterance.onend = function(e) { - // utterance has ended - this.speakingDescription = false; - timeElapsed = e.elapsedTime; - // As of Firefox 95, e.elapsedTime is expressed in seconds - // Other browsers (tested in Chrome & Edge) express this in milliseconds - // Assume no utterance will require over 100 seconds to express... - if (timeElapsed > 100) { - // time is likely expressed in milliseconds - secondsElapsed = (e.elapsedTime/1000).toFixed(2); - } - else { - // time is likely already expressed in seconds; just need to round it - secondsElapsed = (e.elapsedTime).toFixed(2); - } - if (this.debug) { - console.log('Finished speaking. That took ' + secondsElapsed + ' seconds.'); - } - if (context === 'description') { - if (thisObj.prefDescPause) { - if (thisObj.pausedForDescription) { - thisObj.playMedia(); - this.pausedForDescription = false; - } - } + } + } else { + voice = null; + } + utterance = new SpeechSynthesisUtterance(); + if (voice) { + utterance.voice = voice; + } + utterance.voiceURI = 'native'; + utterance.volume = volume; + utterance.rate = rate; + utterance.pitch = pitch; + utterance.text = text; + // TODO: Consider the best language for the utterance: + // language of the web page? (this.lang) + // language of the WebVTT description track? + // language of the user's chosen voice? + // If there's a mismatch between any of these, the description will likely be unintelligible + utterance.lang = this.lang; + utterance.onstart = function(e) { + // utterance has started + }; + utterance.onpause = function(e) { + // utterance has paused + }; + utterance.onend = function(e) { + // utterance has ended + this.speakingDescription = false; + timeElapsed = e.elapsedTime; + // As of Firefox 95, e.elapsedTime is expressed in seconds + // Other browsers (tested in Chrome & Edge) express this in milliseconds + // Assume no utterance will require over 100 seconds to express... + // If a large value, time is likely expressed in milliseconds. + secondsElapsed = (timeElapsed > 100) ? (e.elapsedTime/1000).toFixed(2) : (e.elapsedTime).toFixed(2); + + if (this.debug) { + console.log('Finished speaking. That took ' + secondsElapsed + ' seconds.'); + } + if (context === 'description') { + if (thisObj.prefDescPause) { + if (thisObj.pausedForDescription) { + thisObj.playMedia(); + this.pausedForDescription = false; } - }; - utterance.onerror = function(e) { - // handle error - console.log('Web Speech API error',e); - }; - if (this.synth.paused) { - this.synth.resume(); } - this.synth.speak(utterance); - this.speakingDescription = true; } + }; + utterance.onerror = function(e) { + // handle error + console.log('Web Speech API error',e); + }; + if (this.synth.paused) { + this.synth.resume(); } + this.synth.speak(utterance); + this.speakingDescription = true; }; })(jQuery); @@ -9897,7 +8903,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isIOS = function(version) { - // return true if this is IOS + // return true if this is iOS // if version is provided check for a particular version var userAgent, iOS; @@ -9909,61 +8915,48 @@ if (typeof module !== "undefined" && module.exports) { if (userAgent.indexOf('os ' + version) !== -1) { // this is the target version of iOS return true; - } - else { + } else { return false; } - } - else { + } else { // no version was specified return true; } - } - else { - // this is not IOS + } else { + // this is not iOS return false; } }; AblePlayer.prototype.browserSupportsVolume = function() { - // To test whether the browser supports changing the volume, - // create a new audio element and try setting the volume to something other than 1. - // Then, retrieve the current setting to see if it preserved it. + // To test whether the browser supports changing the volume, + // create a new audio element and try setting the volume to something other than 1. + // Then, retrieve the current setting to see if it preserved it. + // This doesn't work in iOS by design: https://developer.apple.com/documentation/avfoundation/avplayer/volume - // Unfortunately, this doesn't work in iOS. In 2022, our tests yield the same results as reported here: - // https://stackoverflow.com/questions/72861253/how-do-i-detect-if-a-browser-does-not-support-changing-html-audio-volume + var audio, testVolume; - // So, unfortunately we have to resort to sniffing for iOS - // before testing for support in other browsers - var audio, testVolume; - - if (this.isIOS()) { - return false; - } + if (this.isIOS()) { + return false; + } - testVolume = 0.9; // any value between 0.1 and 0.9 - audio = new Audio(); - audio.volume = testVolume; - if (audio.volume === testVolume) { - return true; - } - else { - return false; - } + testVolume = 0.9; // any value between 0.1 and 0.9 + audio = new Audio(); + audio.volume = testVolume; + + return ( audio.volume === testVolume ); }; AblePlayer.prototype.nativeFullscreenSupported = function () { - return document.fullscreenEnabled || - document.webkitFullscreenEnabled || - document.mozFullscreenEnabled || - document.msFullscreenEnabled; + return document.fullscreenEnabled || document.webkitFullscreenEnabled; }; })(jQuery); (function ($) { + AblePlayer.prototype.seekTo = function (newTime) { var thisObj = this; @@ -9976,10 +8969,12 @@ if (typeof module !== "undefined" && module.exports) { this.seeking = true; this.liveUpdatePending = true; - if (this.speakingDescription) { - this.synth.cancel(); + if (this.speakingDescription) { + this.synth.cancel(); } + this.syncSignVideo( {'time' : this.startTime } ); + if (this.player === 'html5') { var seekable; @@ -9990,23 +8985,19 @@ if (typeof module !== "undefined" && module.exports) { // ok to seek to startTime // canplaythrough will be triggered when seeking is complete // this.seeking will be set to false at that point - this.media.currentTime = this.startTime; - this.seekStatus = 'complete'; - if (this.hasSignLanguage && this.signVideo) { - // keep sign languge video in sync - this.signVideo.currentTime = this.startTime; - } + this.media.currentTime = this.startTime; + this.seekStatus = 'complete'; + this.syncSignVideo( { 'time' : this.startTime } ); } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.seekTo(newTime,true); if (newTime > 0) { if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } } - } - else if (this.player === 'vimeo') { + this.syncSignVideo( {'time' : newTime } ); + } else if (this.player === 'vimeo') { this.vimeoPlayer.setCurrentTime(newTime).then(function() { // seek finished. // successful completion also fires a 'seeked' event (see event.js) @@ -10036,15 +9027,14 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj, mediaTimes; mediaTimes = {}; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (typeof duration !== 'undefined' && typeof elapsed !== 'undefined') { mediaTimes['duration'] = duration; mediaTimes['elapsed'] = elapsed; deferred.resolve(mediaTimes); - } - else { + } else { this.getDuration().then(function(duration) { mediaTimes['duration'] = thisObj.roundDown(duration,6); thisObj.getElapsed().then(function(elapsed) { @@ -10062,7 +9052,7 @@ if (typeof module !== "undefined" && module.exports) { // function is called by getMediaTimes, and return value is sanitized there var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -10071,39 +9061,32 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getDuration().then(function(duration) { if (duration === undefined || isNaN(duration) || duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var duration; if (this.player === 'html5') { - duration = this.media.duration; - } - else if (this.player === 'youtube') { + duration = this.media.duration; + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { - if (this.duration > 0) { + if (this.duration > 0) { // duration was already retrieved while checking for captions - duration = this.duration; - } - else { + duration = this.duration; + } else { duration = this.youTubePlayer.getDuration(); } - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet duration = 0; } } if (duration === undefined || isNaN(duration) || duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } } @@ -10117,7 +9100,7 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -10126,33 +9109,27 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getCurrentTime().then(function(elapsed) { if (elapsed === undefined || isNaN(elapsed) || elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var elapsed; if (this.player === 'html5') { elapsed = this.media.currentTime; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { elapsed = this.youTubePlayer.getCurrentTime(); - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet elapsed = 0; } } if (elapsed === undefined || isNaN(elapsed) || elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } } @@ -10162,71 +9139,51 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getPlayerState = function () { // Returns one of the following states: - // 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. - // 'ended' - Finished playing. - // 'paused' - Not playing, but not stopped or ended. - // 'buffering' - Momentarily paused to load, but will resume once data is loaded. - // 'playing' - Currently playing. - - // Commented out the following in 3.2.1 - not sure of its intended purpose - // It can be useful to know player state even when swapping src - // and the overhead is seemingly minimal - // TODO - Investigate this further. Delete if it's not needed - / - if (this.swappingSrc) { - return; - } - / - var deferred, promise, thisObj, duration, elapsed; - deferred = new $.Deferred(); + // - 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. + // - 'ended' - Finished playing. + // - 'paused' - Not playing, but not stopped or ended. + // - 'buffering' - Momentarily paused to load, but will resume once data is loaded. + // - 'playing' - Currently playing. + + var deferred, promise, thisObj; + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (this.player === 'html5') { if (this.media.ended) { deferred.resolve('ended'); - } - else if (this.media.paused) { + } else if (this.media.paused) { deferred.resolve('paused'); - } - else if (this.media.readyState !== 4) { + } else if (this.media.readyState !== 4) { deferred.resolve('buffering'); - } - else { + } else { deferred.resolve('playing'); } - } - else if (this.player === 'youtube' && this.youTubePlayerReady) { + } else if (this.player === 'youtube' && this.youTubePlayerReady) { var state = this.youTubePlayer.getPlayerState(); if (state === -1 || state === 5) { deferred.resolve('stopped'); - } - else if (state === 0) { + } else if (state === 0) { deferred.resolve('ended'); - } - else if (state === 1) { + } else if (state === 1) { deferred.resolve('playing'); - } - else if (state === 2) { + } else if (state === 2) { deferred.resolve('paused'); - } - else if (state === 3) { + } else if (state === 3) { deferred.resolve('buffering'); } - } - else if (this.player === 'vimeo' && this.vimeoPlayer) { + } else if (this.player === 'vimeo' && this.vimeoPlayer) { // curiously, Vimeo's API has no getPlaying(), getBuffering(), or getState() methods // so maybe if it's neither paused nor ended, it must be playing??? this.vimeoPlayer.getPaused().then(function(paused) { if (paused) { deferred.resolve('paused'); - } - else { + } else { thisObj.vimeoPlayer.getEnded().then(function(ended) { if (ended) { deferred.resolve('ended'); - } - else { + } else { deferred.resolve('playing'); } }); @@ -10239,89 +9196,63 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isPlaybackRateSupported = function () { if (this.player === 'html5') { - if (this.media.playbackRate) { - return true; - } - else { - return false; - } - } - else if (this.player === 'youtube') { - // Youtube supports varying playback rates per video. + return (this.media.playbackRate) ? true : false; + } else if (this.player === 'youtube') { + // Youtube supports varying playback rates per video. // Only expose controls if more than one playback rate is available. - if (this.youTubePlayerReady) { - if (this.youTubePlayer.getAvailablePlaybackRates().length > 1) { - return true; - } - else { - return false; - } - } - else { + if (this.youTubePlayerReady) { + return (this.youTubePlayer.getAvailablePlaybackRates().length > 1) ? true : false; + } else { return false; } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // since this takes longer to determine, it was set previously in initVimeoPlayer() return this.vimeoSupportsPlaybackRateChange; } }; AblePlayer.prototype.setPlaybackRate = function (rate) { - + rate = Math.max(0.5, rate); - if (this.hasClosedDesc && this.descMethod === 'text') { - // keep speech rate in sync with playback rate even if descOn is false - this.syncSpeechToPlaybackRate(rate); + if (this.hasClosedDesc && this.descMethod === 'text') { + // keep speech rate in sync with playback rate even if descOn is false + this.syncSpeechToPlaybackRate(rate); } + this.syncSignVideo( {'rate' : rate } ); + if (this.player === 'html5') { this.media.playbackRate = rate; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.setPlaybackRate(rate); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.setPlaybackRate(rate); } - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.playbackRate = rate; - } + this.syncSignVideo( { 'rate' : rate } ); this.playbackRate = rate; - this.$speed.text(this.tt.speed + ': ' + rate.toFixed(2).toString() + 'x'); - }; + this.$speed.text( this.translate( 'speed', 'Speed' ) + ': ' + rate.toFixed(2).toString() + 'x'); + }; AblePlayer.prototype.getPlaybackRate = function () { if (this.player === 'html5') { return this.media.playbackRate; - } - else if (this.player === 'youtube') { - if (this.youTubePlayerReady) { - return this.youTubePlayer.getPlaybackRate(); - } + } else if (this.player === 'youtube' && (this.youTubePlayerReady)) { + return this.youTubePlayer.getPlaybackRate(); } }; AblePlayer.prototype.isPaused = function () { - // Note there are three player states that count as paused in this sense, + // Note there are three player states that count as paused in this sense, // and one of them is named 'paused'. // A better name would be 'isCurrentlyNotPlayingOrBuffering' - var state; - if (this.player === 'vimeo') { // just rely on value of this.playing - if (this.playing) { - return false; - } - else { - return true; - } - } - else { + return (this.playing) ? false : true; + } else { this.getPlayerState().then(function(state) { // if any of the following is true, consider the media 'paused' return state === 'paused' || state === 'stopped' || state === 'ended'; @@ -10329,43 +9260,71 @@ if (typeof module !== "undefined" && module.exports) { } }; + AblePlayer.prototype.syncSignVideo = function(options) { + if (this.hasSignLanguage && ( this.signVideo || this.signYoutube ) ) { + if (options && typeof options.time !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.currentTime = options.time; + } else { + this.youTubeSignPlayer.seekTo(options.time,true); + } + } + if (options && typeof options.rate !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.playbackRate = options.rate; + } else { + this.youTubeSignPlayer.setPlaybackRate(options.rate); + } + } + if (options && typeof options.pause !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.pause(true); + } else { + this.youTubeSignPlayer.pauseVideo(); + } + } + if (options && typeof options.play !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.play(true); + } else { + this.youTubeSignPlayer.playVideo(); + } + } + if (options && typeof options.volume !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.volume = 0; + } + } + } + }; + AblePlayer.prototype.pauseMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'pause' : true } ); if (this.player === 'html5') { this.media.pause(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.pause(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.pauseVideo(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.pause(); } }; AblePlayer.prototype.playMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'play' : true } ); if (this.player === 'html5') { this.media.play(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.play(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.playVideo(); if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } this.stoppingYouTube = false; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.play(); } this.startedPlaying = true; @@ -10379,44 +9338,19 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.fadeControls = function(direction) { // Visibly fade controls without hiding them from screen reader users - // direction is either 'out' or 'in' - // TODO: This still needs work. // After the player fades, it's replaced by an empty space // Would be better if the video and captions expanded to fill the void - // Attempted to fade out to 0 opacity, then move the playerDiv offscreen - // and expand the mediaContainer to fill the vacated space - // However, my attempts to do this have been choppy and buggy - // Code is preserved below and commented out + // replace JS animation with CSS animation in 12/2025. - var thisObj, mediaHeight, playerHeight, newMediaHeight; var thisObj = this; if (direction == 'out') { // get the original height of two key components: - mediaHeight = this.$mediaContainer.height(); - playerHeight = this.$playerDiv.height(); - newMediaHeight = mediaHeight + playerHeight; - - // fade slowly to transparency - this.$playerDiv.fadeTo(2000,0,function() { - / - // when finished, position playerDiv offscreen - // thisObj.$playerDiv.addClass('able-offscreen'); - // Expand the height of mediaContainer to fill the void (needs work) - thisObj.$mediaContainer.animate({ - height: newMediaHeight - },500); - / - }); - } - else if (direction == 'in') { - // restore captionsContainer to its original height (needs work) - // this.$mediaContainer.removeAttr('style'); - // fade relatively quickly back to its original position with full opacity - // this.$playerDiv.removeClass('able-offscreen').fadeTo(100,1); - this.$playerDiv.fadeTo(100,1); + this.$playerDiv.addClass( 'fade-out' ).removeClass( 'fade-in' ); + } else if (direction == 'in') { + this.$playerDiv.addClass( 'fade-in' ).removeClass( 'fade-out' ); } }; @@ -10434,7 +9368,7 @@ if (typeof module !== "undefined" && module.exports) { this.hideControlsTimeoutStatus = 'active'; }; - AblePlayer.prototype.refreshControls = function(context, duration, elapsed) { + AblePlayer.prototype.refreshControls = function(context = 'init', duration, elapsed) { // context is one of the following: // 'init' - initial build (or subsequent change that requires full rebuild) @@ -10455,34 +9389,30 @@ if (typeof module !== "undefined" && module.exports) { // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx - var thisObj, duration, elapsed, lastChapterIndex, displayElapsed, - updateLive, textByState, timestamp, widthUsed, - leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount, - buffered, newTop, statusBarHeight, speedHeight, statusBarWidthBreakpoint, - newSvgData; + var thisObj, duration, textByState, timestamp, captionsCount, newTop, statusBarWidthBreakpoint; thisObj = this; - if (this.swappingSrc) { - if (this.playing) { - // wait until new source has loaded before refreshing controls - // can't wait if player is NOT playing because some critical events - // won't fire until playback of new media starts - return; - } + // wait until new source has loaded before refreshing controls + // some critical events won't fire until playback of new media starts + if ( this.swappingSrc && this.playing ) { + return; } - if (context === 'timeline' || context === 'init') { - // all timeline-related functionality requires both duration and elapsed + if ( context === 'timeline' || context === 'init' ) { + // Update timeline controls. + var lastChapterIndex, displayElapsed, updateLive, widthUsed, + leftControls, rightControls, seekbarWidth, buffered; + // all timeline-related functionality requires duration if (typeof this.duration === 'undefined') { - // wait until duration is known before proceeding with refresh - return; + // wait until duration is known before proceeding with refresh + return; } if (this.useChapterTimes) { this.chapterDuration = this.getChapterDuration(); this.chapterElapsed = this.getChapterElapsed(); } - if (this.useFixedSeekInterval === false && this.seekIntervalCalculated === false && this.duration > 0) { + if ( !this.useFixedSeekInterval && !this.seekIntervalCalculated && this.duration > 0) { // couldn't calculate seekInterval previously; try again. this.setSeekInterval(); } @@ -10496,32 +9426,26 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends // need to adjust seekbar duration to match video end this.seekBar.setDuration(this.duration - this.currentChapter.start); - } - else { + } else { this.seekBar.setDuration(this.chapterDuration); } - } - else { + } else { // this is not the last chapter this.seekBar.setDuration(this.chapterDuration); } - } - else { - if (!(this.duration === undefined || isNaN(this.duration) || this.duration === -1)) { - this.seekBar.setDuration(this.duration); - } + } else if ( !(this.duration === undefined || isNaN(this.duration) || this.duration === -1) ) { + this.seekBar.setDuration(this.duration); } if (!(this.seekBar.tracking)) { // Only update the aria live region if we have an update pending // (from a seek button control) or if the seekBar has focus. // We use document.activeElement instead of $(':focus') due to a strange bug: - // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. + // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. updateLive = this.liveUpdatePending || this.seekBar.seekHead.is($(document.activeElement)); this.liveUpdatePending = false; if (this.useChapterTimes) { this.seekBar.setPosition(this.chapterElapsed, updateLive); - } - else { + } else { this.seekBar.setPosition(this.elapsed, updateLive); } } @@ -10529,22 +9453,15 @@ if (typeof module !== "undefined" && module.exports) { // When seeking, display the seek bar time instead of the actual elapsed time. if (this.seekBar.tracking) { displayElapsed = this.seekBar.lastTrackPosition; - } - else { - if (this.useChapterTimes) { - displayElapsed = this.chapterElapsed; - } - else { - displayElapsed = this.elapsed; - } + } else { + displayElapsed = ( this.useChapterTimes ) ? this.chapterElapsed : this.elapsed; } } // update elapsed & duration if (typeof this.$durationContainer !== 'undefined') { if (this.useChapterTimes) { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.chapterDuration)); - } - else { + } else { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.duration)); } } @@ -10556,27 +9473,22 @@ if (typeof module !== "undefined" && module.exports) { // Update seekbar width. // To do this, we need to calculate the width of all buttons surrounding it. if (this.seekBar) { - widthUsed = 0; + let controlWrapper = this.seekBar.wrapperDiv.parent().parent(); leftControls = this.seekBar.wrapperDiv.parent().prev('div.able-left-controls'); rightControls = leftControls.next('div.able-right-controls'); - leftControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); // true = include margin - } - }); + widthUsed = leftControls.outerWidth(true); rightControls.children().each(function () { if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); + widthUsed += $(this).outerWidth(true) + 5; } }); if (this.fullscreen) { seekbarWidth = $(window).width() - widthUsed; - } - else { + } else { // seekbar is wide enough to fill the remaining space - // include a 5px buffer to account for minor browser differences - seekbarWidth = this.$ableWrapper.width() - widthUsed - 5; - } + // include a 10px buffer to account for minor browser differences or custom styles. + seekbarWidth = controlWrapper.width() - widthUsed - 10; + } // Sometimes some minor fluctuations based on browser weirdness, so set a threshold. if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) { this.seekBar.setWidth(seekbarWidth); @@ -10587,122 +9499,69 @@ if (typeof module !== "undefined" && module.exports) { // Update buffering progress. // TODO: Currently only using the first HTML5 buffered interval, // but this fails sometimes when buffering is split into two or more intervals. - if (this.player === 'html5') { - if (this.media.buffered.length > 0) { - buffered = this.media.buffered.end(0); - if (this.useChapterTimes) { - if (buffered > this.chapterDuration) { - buffered = this.chapterDuration; - } - if (this.seekBar) { - this.seekBar.setBuffered(buffered / this.chapterDuration); - } - } - else { - if (this.seekBar) { - if (!isNaN(buffered)) { - this.seekBar.setBuffered(buffered / duration); - } - } + if (this.player === 'html5' && this.media.buffered.length > 0) { + buffered = this.media.buffered.end(0); + if (this.useChapterTimes) { + if (buffered > this.chapterDuration) { + buffered = this.chapterDuration; } - } - } - else if (this.player === 'youtube') { - if (this.seekBar) { - if (this.youTubePlayerReady) { - this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + if (this.seekBar) { + this.seekBar.setBuffered(buffered / this.chapterDuration); } + } else if ( this.seekBar && !isNaN(buffered) ) { + this.seekBar.setBuffered(buffered / duration); } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'youtube' && this.seekBar && this.youTubePlayerReady ) { + this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + } else if (this.player === 'vimeo') { // TODO: Add support for Vimeo buffering update } - } // end if context == 'timeline' or 'init' - - if (context === 'descriptions' || context == 'init'){ + } + if (context === 'descriptions' || context == 'init') { if (this.$descButton) { - if (this.descOn) { - this.$descButton.removeClass('buttonOff').attr('aria-label',this.tt.turnOffDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOffDescriptions); - } - else { - this.$descButton.addClass('buttonOff').attr('aria-label',this.tt.turnOnDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOnDescriptions); - } + this.toggleButtonState( + this.$descButton, + this.descOn, + this.translate( 'turnOffDescriptions', 'Turn off descriptions' ), + this.translate( 'turnOnDescriptions', 'Turn on descriptions' ), + ); } } - if (context === 'captions' || context == 'init'){ + if (context === 'captions' || context == 'init') { if (this.$ccButton) { captionsCount = this.captions.length; - - // Button has a different title depending on the number of captions. - // If only one caption track, this is "Show captions" and "Hide captions" - // Otherwise, it is just always "Captions" - if (!this.captionsOn) { - this.$ccButton.addClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'false') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.showCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.showCaptions); - } - } - else { - this.$ccButton.removeClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'true') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.hideCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.hideCaptions); - } - } - if (captionsCount > 1) { this.$ccButton.attr({ - 'aria-label': this.tt.captions, 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-captions-menu' }); - this.$ccButton.find('span.able-clipped').text(this.tt.captions); } + var ariaLabelOn = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + var ariaPressed = ( captionsCount > 1 ) ? true : false; + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); } } if (context === 'fullscreen' || context == 'init'){ if (this.$fullscreenButton) { if (!this.fullscreen) { - this.$fullscreenButton.attr('aria-label', this.tt.enterFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-collapse').addClass('icon-fullscreen-expand'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-expand'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenExpandButtonImg); - } - } - else { - this.$fullscreenButton.attr('aria-label',this.tt.exitFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-expand').addClass('icon-fullscreen-collapse'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-collapse'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenCollapseButtonImg); - } + this.$fullscreenButton.attr( 'aria-label', this.translate( 'enterFullScreen', 'Enter full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-expand' ); + } else { + this.$fullscreenButton.attr('aria-label', this.translate( 'exitFullScreen', 'Exit full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-collapse' ); } } } @@ -10713,18 +9572,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.hideBigPlayButton) { this.$bigPlayButton.show(); this.$bigPlayButton.attr('aria-hidden', 'false'); - - } - if (this.fullscreen) { - this.$bigPlayButton.width($(window).width()); - this.$bigPlayButton.height($(window).height()); } - else { - this.$bigPlayButton.width(this.$mediaContainer.width()); - this.$bigPlayButton.height(this.$mediaContainer.height()); - } - } - else { + } else { this.$bigPlayButton.hide(); this.$bigPlayButton.attr('aria-hidden', 'true'); } @@ -10738,8 +9587,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.prefAutoScrollTranscript === 1) { this.autoScrollTranscript = true; this.$autoScrollTranscriptCheckbox.prop('checked',true); - } - else { + } else { this.autoScrollTranscript = false; this.$autoScrollTranscriptCheckbox.prop('checked',false); } @@ -10757,8 +9605,8 @@ if (typeof module !== "undefined" && module.exports) { // only scroll once after moving a highlight if (this.movingHighlight) { this.$transcriptDiv.scrollTop(newTop); - this.movingHighlight = false; - } + this.movingHighlight = false; + } } } } @@ -10768,7 +9616,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$chaptersButton) { this.$chaptersButton.attr({ - 'aria-label': this.tt.chapters, + 'aria-label': this.translate( 'chapters', 'Chapters' ), 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-chapters-menu' }); @@ -10779,231 +9627,139 @@ if (typeof module !== "undefined" && module.exports) { // update status textByState = { - 'stopped': this.tt.statusStopped, - 'paused': this.tt.statusPaused, - 'playing': this.tt.statusPlaying, - 'buffering': this.tt.statusBuffering, - 'ended': this.tt.statusEnd + 'stopped': this.translate( 'statusStopped', 'Stopped' ), + 'paused': this.translate( 'statusPaused', 'Paused' ), + 'playing': this.translate( 'statusPlaying', 'Playing' ), + 'buffering': this.translate( 'statusBuffering', 'Buffering' ), + 'ended': this.translate( 'statusEnd', 'End of track' ) }; if (this.stoppingYouTube) { - // stoppingYouTube is true temporarily while video is paused and seeking to 0 - // See notes in handleRestart() - // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) - if (this.$status.text() !== this.tt.statusStopped) { - this.$status.text(this.tt.statusStopped); - } - if (this.$playpauseButton.find('span').first().hasClass('icon-pause')) { - if (this.iconType === 'font') { - this.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('play'); - this.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - this.$playpauseButton.find('path').attr('d',newSvgData[1]); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else { - this.$playpauseButton.find('img').attr('src',this.playButtonImg); - } - } - } - else { - if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Update the text only if it's changed since it has role="alert"; - // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. - this.getPlayerState().then(function(currentState) { - if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { - // Debounce updates; only update after status has stayed steadily different for a while - // "A while" is defined differently depending on context - if (thisObj.swappingSrc) { - // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), - // so set a longer wait time before writing a status message - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) - } - } - else { - // for all other contexts (e.g., users clicks Play/Pause) - // user should receive more rapid feedback - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 250; // in ms - } - } - timestamp = (new Date()).getTime(); - if (!thisObj.statusDebounceStart) { - thisObj.statusDebounceStart = timestamp; - // Call refreshControls() again after allotted time has passed - thisObj.debouncingStatus = true; - thisObj.statusTimeout = setTimeout(function () { - thisObj.debouncingStatus = false; - thisObj.refreshControls(context); - }, thisObj.statusMessageThreshold); - } - else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { - thisObj.$status.text(textByState[currentState]); - thisObj.statusDebounceStart = null; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - } - else { - thisObj.statusDebounceStart = null; - thisObj.debouncingStatus = false; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; - } - // Don't change play/pause button display while using the seek bar (or if YouTube stopped) - if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { - if (currentState === 'paused' || currentState === 'stopped' || currentState === 'ended') { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('play'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.playButtonImg); - } - } - else { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-play').addClass('icon-pause'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('pause'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.pauseButtonImg); - } + // stoppingYouTube is true temporarily while video is paused and seeking to 0 + // See notes in handleRestart() + // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) + if (this.$status.text() !== this.translate( 'statusStopped', 'Stopped' ) ) { + this.$status.text( this.translate( 'statusStopped', 'Stopped' ) ); + } + this.getIcon( this.$playpauseButton, 'play' ); + } else if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { + // Update the text only if it's changed since it has role="alert"; + // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. + this.getPlayerState().then(function(currentState) { + if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { + // Debounce updates; only update after status has stayed steadily different for a while + // "A while" is defined differently depending on context + if (thisObj.swappingSrc) { + // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), + // so set a longer wait time before writing a status message + if (!thisObj.debouncingStatus) { + thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) } + } else if (!thisObj.debouncingStatus) { + // for all other contexts (e.g., users clicks Play/Pause) + // user should receive more rapid feedback + thisObj.statusMessageThreshold = 250; // in ms } - }); - } + timestamp = (new Date()).getTime(); + if (!thisObj.statusDebounceStart) { + thisObj.statusDebounceStart = timestamp; + // Call refreshControls() again after allotted time has passed + thisObj.debouncingStatus = true; + thisObj.statusTimeout = setTimeout(function () { + thisObj.debouncingStatus = false; + thisObj.refreshControls(context); + }, thisObj.statusMessageThreshold); + } else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { + thisObj.$status.text(textByState[currentState]); + thisObj.statusDebounceStart = null; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + } else { + thisObj.statusDebounceStart = null; + thisObj.debouncingStatus = false; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + // Don't change play/pause button display while using the seek bar (or if YouTube stopped) + if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { + if (currentState === 'paused' || currentState === 'stopped' || currentState === 'ended') { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); + thisObj.getIcon( thisObj.$playpauseButton, 'play' ); + } else { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); + thisObj.getIcon( thisObj.$playpauseButton, 'pause' ); + } + } + }); } } // Show/hide status bar content conditionally if (!this.fullscreen) { statusBarWidthBreakpoint = 300; - statusBarHeight = this.$statusBarDiv.height(); - speedHeight = this.$statusBarDiv.find('span.able-speed').height(); - if (speedHeight > (statusBarHeight + 5)) { - // speed bar is wrapping (happens often in German player) + if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { + // Player is too small for a speed span this.$statusBarDiv.find('span.able-speed').hide(); this.hidingSpeed = true; - } - else { + } else { if (this.hidingSpeed) { this.$statusBarDiv.find('span.able-speed').show(); this.hidingSpeed = false; } - if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { - // Player is too small for a speed span - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - } } } }; - AblePlayer.prototype.getHiddenWidth = function($el) { - - // jQuery returns for width() if element is hidden - // this function is a workaround - - // save a reference to a cloned element that can be measured - var $hiddenElement = $el.clone().appendTo('body'); - - // calculate the width of the clone - var width = $hiddenElement.outerWidth(); - - // remove the clone from the DOM - $hiddenElement.remove(); - - return width; - }; - AblePlayer.prototype.handlePlay = function(e) { - if (this.paused) { - // user clicked play - this.okToPlay = true; + // user clicked play + this.okToPlay = true; this.playMedia(); - if (this.synth.paused) { - // media was paused while description was speaking - // resume utterance - this.synth.resume(); + if (this.synth.paused) { + // media was paused while description was speaking + // resume utterance + this.synth.resume(); } - } - else { + } else { // user clicked pause - this.okToPlay = false; + this.okToPlay = false; this.pauseMedia(); - if (this.speakingDescription) { - // pause the current utterance - // it will resume when the user presses play - this.synth.pause(); + if (this.speakingDescription) { + // pause the current utterance + // it will resume when the user presses play + this.synth.pause(); } } - if (this.speechEnabled === null) { - this.initSpeech('play'); + if (this.speechEnabled === null) { + this.initSpeech('play'); } }; AblePlayer.prototype.handleRestart = function() { - if (this.speakingDescription) { - // cancel audio description - this.synth.cancel(); - } + if (this.speakingDescription) { + // cancel audio description + this.synth.cancel(); + } this.seekTo(0); }; AblePlayer.prototype.handlePrevTrack = function() { - if (this.playlistIndex === 0) { - // currently on the first track - // wrap to bottom and play the last track - this.playlistIndex = this.$playlist.length - 1; - } - else { - this.playlistIndex--; - } + // currently on the first track + // wrap to bottom and play the last track + this.playlistIndex = (this.playlistIndex === 0) ? this.$playlist.length - 1 : this.playlistIndex--; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; AblePlayer.prototype.handleNextTrack = function() { - if (this.playlistIndex === this.$playlist.length - 1) { - // currently on the last track - // wrap to top and play the forst track - this.playlistIndex = 0; - } - else { - this.playlistIndex++; - } + // currently on the last track + // wrap to top and play the forst track + this.playlistIndex = (this.playlistIndex === this.$playlist.length - 1) ? 0 : this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; @@ -11013,15 +9769,10 @@ if (typeof module !== "undefined" && module.exports) { var targetTime; targetTime = this.elapsed - this.seekInterval; - if (this.useChapterTimes) { - if (targetTime < this.currentChapter.start) { - targetTime = this.currentChapter.start; - } - } - else { - if (targetTime < 0) { - targetTime = 0; - } + if (this.useChapterTimes && (targetTime < this.currentChapter.start)) { + targetTime = this.currentChapter.start; + } else if (targetTime < 0) { + targetTime = 0; } this.seekTo(targetTime); }; @@ -11039,14 +9790,12 @@ if (typeof module !== "undefined" && module.exports) { // targetTime would exceed the end of the video (or chapter) // scrub to end of whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); - } - else if (this.duration % targetTime < this.seekInterval) { + } else if (this.duration % targetTime < this.seekInterval) { // nothing left but pocket change after seeking to targetTime // go ahead and seek to end of video (or chapter), whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); } - } - else { + } else { // this is not the last chapter if (targetTime > this.currentChapter.end) { // targetTime would exceed the end of the chapter @@ -11054,8 +9803,7 @@ if (typeof module !== "undefined" && module.exports) { targetTime = this.currentChapter.end; } } - } - else { + } else { // not using chapter times if (targetTime > this.duration) { targetTime = this.duration; @@ -11079,16 +9827,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.setPlaybackRate(this.getPlaybackRate() + (0.25 dir)); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { rates = this.youTubePlayer.getAvailablePlaybackRates(); currentRate = this.getPlaybackRate(); index = rates.indexOf(currentRate); if (index === -1) { console.log('ERROR: Youtube returning unknown playback rate ' + currentRate.toString()); - } - else { + } else { index += dir; // Can only increase or decrease rate if there's another rate available. if (index < rates.length && index >= 0) { @@ -11096,27 +9842,15 @@ if (typeof module !== "undefined" && module.exports) { } } } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // range is 0.5 to 2 // increase/decrease in inrements of 0.5 vimeoMin = 0.5; vimeoMax = 2; if (dir === 1) { - if (this.vimeoPlaybackRate + 0.5 <= vimeoMax) { - newRate = this.vimeoPlaybackRate + 0.5; - } - else { - newRate = vimeoMax; - } - } - else if (dir === -1) { - if (this.vimeoPlaybackRate - 0.5 >= vimeoMin) { - newRate = this.vimeoPlaybackRate - 0.5; - } - else { - newRate = vimeoMin; - } + newRate = (this.vimeoPlaybackRate + 0.5 <= vimeoMax) ? this.vimeoPlaybackRate + 0.5 : vimeoMax; + } else if (dir === -1) { + newRate = (this.vimeoPlaybackRate - 0.5 >= vimeoMin) ? this.vimeoPlaybackRate - 0.5 : vimeoMin; } this.setPlaybackRate(newRate); } @@ -11125,47 +9859,39 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handleCaptionToggle = function() { var thisObj = this; - var captions; + var captions, ariaPressed; if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup // immediately after closing it this.hidingPopup = false; return false; } - if (this.captions.length) { - captions = this.captions; - } - else { - captions = []; - } + + captions = (this.captions.length) ? this.captions : []; if (captions.length === 1) { // When there's only one set of captions, just do an on/off toggle. if (this.captionsOn === true) { // turn them off this.captionsOn = false; this.prefCaptions = 0; - this.$ccButton.attr('aria-pressed', 'false'); - this.updateCookie('prefCaptions'); + ariaPressed = false; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.unloadModule('captions'); - } - else if (this.usingVimeoCaptions) { - this.vimeoPlayer.disableTextTrack(); - } - else { + } else if (this.usingVimeoCaptions) { + this.vimeoPlayer.disableTextTrack(); + } else { this.$captionsWrapper.hide(); } - } - else { + } else { // captions are off. Turn them on. this.captionsOn = true; this.prefCaptions = 1; - this.$ccButton.attr('aria-pressed', 'true'); - this.updateCookie('prefCaptions'); + ariaPressed = true; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.loadModule('captions'); - } - else if (this.usingVimeoCaptions) { + } else if (this.usingVimeoCaptions) { this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' @@ -11185,9 +9911,8 @@ if (typeof module !== "undefined" && module.exports) { console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); break; } - }); - } - else { + }); + } else { this.$captionsWrapper.show(); } for (var i=0; i<captions.length; i++) { @@ -11200,9 +9925,7 @@ if (typeof module !== "undefined" && module.exports) { this.selectedDescriptions = this.descriptions[0]; } } - this.refreshControls('captions'); - } - else { + } else { // there is more than one caption track. // clicking on a track is handled via caption.js > getCaptionClickFunction() if (this.captionsPopup && this.captionsPopup.is(':visible')) { @@ -11210,8 +9933,7 @@ if (typeof module !== "undefined" && module.exports) { this.hidingPopup = false; this.$ccButton.attr('aria-expanded', 'false') this.waitThenFocus(this.$ccButton); - } - else { + } else { this.closePopups(); if (this.captionsPopup) { this.captionsPopup.show(); @@ -11223,17 +9945,27 @@ if (typeof module !== "undefined" && module.exports) { thisObj.captionsPopup.css('left', thisObj.$ccButton.position().left) // Place focus on the first button (even if another button is checked) thisObj.captionsPopup.find('li').removeClass('able-focus'); - thisObj.captionsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.captionsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } } } + var ariaLabelOn = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); }; /** * Gives enough time for DOM changes to take effect before adjusting focus. * Helpful for allowing screen reading of elements whose state is intermittently changed. - * + * * @param {} $el element to focus on @param {} timeout optional wait time in milliseconds before focus / @@ -11241,9 +9973,9 @@ if (typeof module !== "undefined" && module.exports) { // Default wait time of 50 ms var _timeout = (timeout === undefined || timeout === null) ? 50 : timeout; - + setTimeout(function() { - $el.focus(); + $el.trigger('focus'); }, _timeout); } @@ -11257,9 +9989,8 @@ if (typeof module !== "undefined" && module.exports) { if (this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); this.hidingPopup = false; - this.$chaptersButton.attr('aria-expanded','false').focus(); - } - else { + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); + } else { this.closePopups(); this.chaptersPopup.show(); this.$chaptersButton.attr('aria-expanded','true'); @@ -11270,10 +10001,9 @@ if (typeof module !== "undefined" && module.exports) { // Otherwise, place focus on the first chapter this.chaptersPopup.find('li').removeClass('able-focus'); if (this.chaptersPopup.find('li[aria-checked="true"]').length) { - this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass('able-focus'); - } - else { - this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').focus(); + this.chaptersPopup.find('li[aria-checked="true"]').trigger('focus').addClass('able-focus'); + } else { + this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').trigger('focus'); } } }; @@ -11282,12 +10012,12 @@ if (typeof module !== "undefined" && module.exports) { this.descOn = !this.descOn; this.prefDesc = + this.descOn; // convert boolean to integer - this.updateCookie('prefDesc'); + this.updatePreferences('prefDesc'); if (typeof this.$descDiv !== 'undefined') { if (!this.$descDiv.is(':hidden')) { this.$descDiv.hide(); } - // NOTE: now showing $descDiv here if previously hidden + // NOTE: now showing $descDiv here if previously hidden // that's handled elsewhere, dependent on whether there's text to show } this.initDescription(); @@ -11309,8 +10039,8 @@ if (typeof module !== "undefined" && module.exports) { thisObj = this; - if (this.speechEnabled === null) { - this.initSpeech('prefs'); + if (this.speechEnabled === null) { + this.initSpeech('prefs'); } if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup @@ -11324,18 +10054,17 @@ if (typeof module !== "undefined" && module.exports) { // restore each menu item to original hidden state this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); + this.$prefsButton.trigger('focus'); } // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; },100); - } - else { + } else { this.closePopups(); this.prefsPopup.show(); this.$prefsButton.attr('aria-expanded','true'); - this.$prefsButton.focus(); // focus first on prefs button to announce expanded state + this.$prefsButton.trigger('focus'); // focus first on prefs button to announce expanded state // give time for focus on button then adjust popup settings and focus setTimeout(function() { prefsButtonPosition = thisObj.$prefsButton.position(); @@ -11345,115 +10074,88 @@ if (typeof module !== "undefined" && module.exports) { thisObj.prefsPopup.css('left', prefsMenuLeft); // remove prior focus and set focus on first item; also change tabindex from -1 to 0 thisObj.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','0'); - thisObj.prefsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.prefsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } }; - AblePlayer.prototype.handleHelpClick = function() { - this.setFullscreen(false); - this.helpDialog.show(); - }; - AblePlayer.prototype.handleTranscriptToggle = function () { - var thisObj = this; - - if (this.$transcriptDiv.is(':visible')) { + var visible = this.$transcriptDiv.is(':visible'); + if ( visible ) { this.$transcriptArea.hide(); - this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); this.prefTranscript = 0; - this.$transcriptButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms - // Setting timeout to 100ms is a virtual guarantee of proper functionality - setTimeout(function() { - thisObj.closingTranscript = false; - }, 100); - } - else { - this.positionDraggableWindow('transcript'); - this.$transcriptArea.show(); - // showing transcriptArea has a cascading effect of showing all content within transcriptArea - // need to re-hide the popup menu - this.$transcriptPopup.hide(); - this.$transcriptButton.removeClass('buttonOff').attr('aria-label',this.tt.hideTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.hideTranscript); - this.prefTranscript = 1; - // move focus to first focusable element (window options button) - this.focusNotClick = true; - this.$transcriptArea.find('button').first().focus(); - // wait briefly before resetting stopgap var - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefTranscript'); + if ( this.transcriptType === 'popup' ) { + this.$transcriptButton.trigger('focus').addClass('able-focus'); + // wait briefly before resetting stopgap var + // otherwise the keypress used to select 'Close' will trigger the transcript button + // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms + // Setting timeout to 100ms is a virtual guarantee of proper functionality + setTimeout(function() { + thisObj.closingTranscript = false; + }, 100); + } + } else { + if ( this.transcriptType === 'popup' ) { + this.positionDraggableWindow('transcript'); + this.$transcriptArea.show(); + // showing transcriptArea has a cascading effect of showing all content within transcriptArea + // need to re-hide the popup menu + this.$transcriptPopup.hide(); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.prefTranscript = 1; + // move focus to first focusable element (window options button) + this.focusNotClick = true; + this.$transcriptArea.find('button').first().trigger('focus'); + // wait briefly before resetting stopgap var + setTimeout(function() { + thisObj.focusNotClick = false; + }, 100); + } else { + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.$transcriptArea.show(); + } + } + this.updatePreferences('prefTranscript'); }; AblePlayer.prototype.handleSignToggle = function () { var thisObj = this; - - if (this.$signWindow.is(':visible')) { + var visible = this.$signWindow.is(':visible'); + if ( visible ) { this.$signWindow.hide(); - this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign); - this.$signButton.find('span.able-clipped').text(this.tt.showSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 0; - this.$signButton.focus().addClass('able-focus'); + this.$signButton.trigger('focus').addClass('able-focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.closingSign = false; }, 100); - } - else { + } else { this.positionDraggableWindow('sign'); this.$signWindow.show(); // showing signWindow has a cascading effect of showing all content within signWindow // need to re-hide the popup menu this.$signPopup.hide(); - this.$signButton.removeClass('buttonOff').attr('aria-label',this.tt.hideSign); - this.$signButton.find('span.able-clipped').text(this.tt.hideSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 1; this.focusNotClick = true; - this.$signWindow.find('button').first().focus(); + this.$signWindow.find('button').first().trigger('focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.focusNotClick = false; }, 100); } - this.updateCookie('prefSign'); + this.updatePreferences('prefSign'); }; - AblePlayer.prototype.isFullscreen = function () { - - // NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen, - // which is defined in setFullscreen() - // This function returns true if any element is fullscreen - // but doesn't tell us whether a particular element is in fullscreen - // (e.g., if there are multiple players on the page) - // The Boolean this.fullscreen is defined separately for each player instance - - if (this.nativeFullscreenSupported()) { - return (document.fullscreenElement || - document.webkitFullscreenElement || - document.webkitCurrentFullscreenElement || - document.mozFullscreenElement || - document.msFullscreenElement) ? true : false; - } - else { - return this.modalFullscreenActive ? true : false; - } - } - AblePlayer.prototype.setFullscreen = function (fullscreen) { if (this.fullscreen == fullscreen) { - // replace isFullscreen() with a Boolean. see function for explanation return; } var thisObj = this; @@ -11463,114 +10165,71 @@ if (typeof module !== "undefined" && module.exports) { if (this.nativeFullscreenSupported()) { // Note: many varying names for options for browser compatibility. if (fullscreen) { + var scroll = { + x: window.pageXOffset || 0, + y: window.pageYOffset || 0 + } + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.rePositionDraggableWindow("transcript"); + } + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.rePositionDraggableWindow("sign"); + } + this.scrollPosition = scroll; // Initialize fullscreen - if (el.requestFullscreen) { el.requestFullscreen(); - } - else if (el.webkitRequestFullscreen) { + } else if (el.webkitRequestFullscreen) { el.webkitRequestFullscreen(); } - else if (el.mozRequestFullscreen) { - el.mozRequestFullscreen(); - } - else if (el.msRequestFullscreen) { - el.msRequestFullscreen(); - } this.fullscreen = true; - } - else { + } else { // Exit fullscreen - this.restoringAfterFullscreen = true; + this.restoringAfterFullscreen = true; if (document.exitFullscreen) { document.exitFullscreen(); - } - else if (document.webkitExitFullscreen) { + } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); - } - else if (document.webkitCancelFullscreen) { + } else if (document.webkitCancelFullscreen) { document.webkitCancelFullscreen(); } - else if (document.mozCancelFullscreen) { - document.mozCancelFullscreen(); + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.positionDraggableWindow("transcript"); } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.positionDraggableWindow("sign"); } this.fullscreen = false; } + } else { + // Removed non-native fullscreen mode in 4.8, which only supported iOS. + // Native fullscreen is on iOS 18+ devices behind a feature flag + // The polyfill hasn't worked for years. } - else { - // Non-native fullscreen support through modal dialog. - // Create dialog on first run through. - if (!this.fullscreenDialog) { - var $dialogDiv = $('<div>'); - // create a hidden alert, communicated to screen readers via aria-describedby - var $fsDialogAlert = $('<p>',{ - 'class': 'able-screenreader-alert' - }).text(this.tt.fullscreen); // In English: "Full screen"; TODO: Add alert text that is more descriptive - $dialogDiv.append($fsDialogAlert); - // now render this as a dialog - this.fullscreenDialog = new AccessibleDialog($dialogDiv, this.$fullscreenButton, 'dialog', true, 'Fullscreen video player', $fsDialogAlert, this.tt.exitFullscreen, '100%', true, function () { thisObj.handleFullscreenToggle() }); - $('body').append($dialogDiv); - } - - // Track whether paused/playing before moving element; moving the element can stop playback. - var wasPaused = this.paused; - - if (fullscreen) { - this.modalFullscreenActive = true; - this.fullscreenDialog.show(); - - // Move player element into fullscreen dialog, then show. - // Put a placeholder element where player was. - this.$modalFullscreenPlaceholder = $('<div class="placeholder">'); - this.$modalFullscreenPlaceholder.insertAfter($el); - $el.appendTo(this.fullscreenDialog.modal); - - // Column left css is 50% by default; set to 100% for full screen. - if ($el === this.$ableColumnLeft) { - $el.width('100%'); - } - var newHeight = $(window).height() - this.$playerDiv.height(); - if (typeof this.$descDiv !== 'undefined') { - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - } - } - else { - this.modalFullscreenActive = false; - if ($el === this.$ableColumnLeft) { - $el.width('50%'); - } - $el.insertAfter(this.$modalFullscreenPlaceholder); - this.$modalFullscreenPlaceholder.remove(); - this.fullscreenDialog.hide(); - } - - // Resume playback if moving stopped it. - if (!wasPaused && this.paused) { - this.playMedia(); - } - } - // add event handlers for changes in fullscreen mode. - // Browsers natively trigger this event with the Escape key, - // in addition to clicking the exit fullscreen button - $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(e) { + // add event handlers for changes in fullscreen mode. + // Browsers natively trigger this event with the Escape key, + // in addition to clicking the exit fullscreen button + $(document).on('fullscreenchange webkitfullscreenchange', function(e) { // NOTE: e.type = the specific event that fired (in case needing to control for browser-specific idiosyncrasies) if (!thisObj.fullscreen) { // user has just exited full screen thisObj.restoringAfterFullscreen = true; - } - else if (!thisObj.clickedFullscreenButton) { + } else if (!thisObj.clickedFullscreenButton) { // user triggered fullscreenchange without clicking fullscreen button thisObj.fullscreen = false; thisObj.restoringAfterFullscreen = true; } thisObj.resizePlayer(); thisObj.refreshControls('fullscreen'); - + // Reset scrollPosition after closing fullscreen. + if ( thisObj.scrollPosition ) { + scroll = thisObj.scrollPosition; + window.scrollTo( scroll.x, scroll.y ); + } // NOTE: The fullscreenchange (or browser-equivalent) event is triggered twice // when exiting fullscreen via the "Exit fullscreen" button (only once if using Escape) // Not sure why, but consequently we need to be sure thisObj.clickedFullscreenButton @@ -11580,9 +10239,9 @@ if (typeof module !== "undefined" && module.exports) { // resetting clickedFullscreenButton after a timeout seems to be better approach setTimeout(function() { thisObj.clickedFullscreenButton = false; - thisObj.restoringAfterFullscreen = false; - },1000); - }); + thisObj.restoringAfterFullscreen = false; + },100); + }); }; AblePlayer.prototype.handleFullscreenToggle = function () { @@ -11591,8 +10250,7 @@ if (typeof module !== "undefined" && module.exports) { this.setFullscreen(!this.fullscreen); if (stillPaused) { this.pauseMedia(); // when toggling fullscreen and media is just paused, keep media paused. - } - else if (!stillPaused) { + } else if (!stillPaused) { this.playMedia(); // when toggling fullscreen and media is playing, continue playing. } // automatically hide controller in fullscreen mode @@ -11604,8 +10262,7 @@ if (typeof module !== "undefined" && module.exports) { this.fadeControls('out'); this.controlsHidden = true; } - } - else { + } else { // exit fullscreen mode this.hideControls = this.hideControlsOriginal; if (!this.hideControls) { // do not hide controls @@ -11620,89 +10277,132 @@ if (typeof module !== "undefined" && module.exports) { } } } - // don't resizePlayer yet; that will be called in response to the window resize event - // this.resizePlayer(); + // don't resizePlayer yet; that will be called in response to the window resize event }; AblePlayer.prototype.handleTranscriptLockToggle = function (val) { this.autoScrollTranscript = val; // val is boolean this.prefAutoScrollTranscript = +val; // convert boolean to numeric 1 or 0 for cookie - this.updateCookie('prefAutoScrollTranscript'); + this.updatePreferences('prefAutoScrollTranscript'); this.refreshControls('transcript'); }; + AblePlayer.prototype.getIcon = function( $button, id, forceImg = false ) { + // Remove existing HTML before generating. + // iconData: [0 = svg viewbox, 1 = svg path, 2 = icon font class, 3 = image file] + var iconType = this.iconType; + var iconData = this.getIconData( id ); + iconType = ( null === iconData[3] ) ? 'svg' : iconType; + iconType = ( forceImg === true ) ? 'img' : iconType; + + var existingIcon = $button.find( iconType + '#ableplayer-' + id ); + // Avoid repainting icon if there's no change. + if ( existingIcon.length > 0 ) { + return; + } + $button.find('svg, img, span').remove(); - AblePlayer.prototype.showTooltip = function($tooltip) { + if (iconType === 'font') { + var $buttonIcon = $('<span>', { + 'class': iconData[2], + }); + $button.append( $buttonIcon ); + } else if (iconType === 'svg') { + // Function to create SVG nodes. + function getNode(n, v) { + n = document.createElementNS("http://www.w3.org/2000/svg", n); + for (var p in v) { + n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m) { + return "-" + m.toLowerCase(); + }), v[p]); + } + return n; + } + var icon = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ); + icon.setAttribute( 'focusable', 'false' ); + icon.setAttribute( 'aria-hidden', 'true'); + icon.setAttribute( 'viewBox', iconData[0] ); + icon.setAttribute( 'id', 'ableplayer-' + id ); + let path = getNode( 'path', { d: iconData[1] } ); + icon.appendChild( path ); + + $button.append( icon ); + // Refresh the DOM. + $button.html($button.html()); + } else { + var $buttonImg = $('<img>',{ + 'src': iconData[3], + 'alt': '', + 'role': 'presentation' + }); + $button.append($buttonImg); + $button.find('img').attr('src',iconData[3]); + } + }; + + AblePlayer.prototype.setText = function( $button, text ) { + $button.attr( 'aria-label', text ); + }; - if (($tooltip).is(':animated')) { - $tooltip.stop(true,true).show(); + AblePlayer.prototype.toggleButtonState = function($button, isOn, onLabel, offLabel, ariaPressed = false, ariaExpanded = false) { + // isOn means "the feature is being turned on". + let buttonOff = ( $button.hasClass( 'buttonOff' ) ) ? true : false; + if ( buttonOff && ! isOn || ! buttonOff && isOn ) { + // Only toggle state if button state does not match feature state. + return; } - else { - $tooltip.stop().show(); + if (! isOn) { + $button.addClass('buttonOff').attr('aria-label', offLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'false'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'false' ); + } + } else { + $button.removeClass('buttonOff').attr('aria-label', onLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'true'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'true' ); + } } }; - AblePlayer.prototype.showAlert = function( msg, location ) { + AblePlayer.prototype.showTooltip = function($tooltip) { + + $tooltip.show(); + }; + + AblePlayer.prototype.showAlert = function( msg, location = 'main' ) { // location is either of the following: // 'main' (default) // 'screenreader (visibly hidden) // 'sign' (sign language window) - // 'transcript' (trasncript window) - var thisObj, $alertBox, $parentWindow, alertLeft, alertTop; + // 'transcript' (transcript window) + var thisObj, $alertBox, $parentWindow; thisObj = this; - + $alertBox = thisObj.$alertBox; + $parentWindow = thisObj.$ableDiv; if (location === 'transcript') { - $alertBox = this.$transcriptAlert; - $parentWindow = this.$transcriptArea; - } - else if (location === 'sign') { - $alertBox = this.$signAlert; - $parentWindow = this.$signWindow; - } - else if (location === 'screenreader') { - $alertBox = this.$srAlertBox; - } - else { - $alertBox = this.$alertBox; - } - $alertBox.text(msg).show(); - if (location == 'transcript' || location === 'sign') { - if ($parentWindow.width() > $alertBox.width()) { - alertLeft = $parentWindow.width() / 2 - $alertBox.width() / 2; - } - else { - // alert box is wider than its container. Position it far left and let it wrap - alertLeft = 10; - } - if (location === 'sign') { - // position alert in the lower third of the sign window (to avoid covering the signer) - alertTop = ($parentWindow.height() / 3) * 2; - } - else if (location === 'transcript') { - // position alert just beneath the toolbar to avoid getting lost among transcript text - alertTop = this.$transcriptToolbar.height() + 30; - } - $alertBox.css({ - top: alertTop + 'px', - left: alertLeft + 'px' - }); - } - else if (location !== 'screenreader') { - // The original formula incorporated offset() into the calculation - // but at some point this began resulting in an alert that's off-centered - // Changed in v2.2.17, but here's the original for reference in case needed: - // left: this.$playerDiv.offset().left + (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - $alertBox.css({ - left: (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - }); + $parentWindow = thisObj.$transcriptArea; + } else if (location === 'sign') { + $parentWindow = thisObj.$signWindow; + } else if (location === 'screenreader') { + $alertBox = thisObj.$srAlertBox; } + $alertBox.find('span').text(msg); + $alertBox.appendTo($parentWindow) + $alertBox.css( {'display': 'flex'} ); + if (location !== 'screenreader') { - setTimeout(function () { - $alertBox.fadeOut(300); - }, 3000); + setTimeout( function () { + $alertBox.hide(); + }, 30000 ); } }; @@ -11711,22 +10411,10 @@ if (typeof module !== "undefined" && module.exports) { // returns true if the target alert has already been shown // useful for throttling alerts that only need to be shown once // e.g., move alerts with instructions for dragging a window - if (which === 'transcript') { - if (this.showedTranscriptAlert) { - return true; - } - else { - return false; - } - } - else if (which === 'sign') { - if (this.showedSignAlert) { - return true; - } - else { - return false; - } + return this.showedTranscriptAlert ?? false; + } else if (which === 'sign') { + return this.showedSignAlert ?? false; } return false; } @@ -11734,105 +10422,82 @@ if (typeof module !== "undefined" && module.exports) { // Resizes all relevant player attributes. AblePlayer.prototype.resizePlayer = function (width, height) { - var captionSizeOkMin, captionSizeOkMax, captionSize, newCaptionSize, newLineHeight; - - var newWidth, newHeight, $iframe, alertTop; + var captionSize, newWidth, newHeight, $iframe; - if (this.mediaType === 'audio') { - return; + if (this.mediaType === 'audio') { + return; } - - if (typeof width !== 'undefined' && typeof height !== 'undefined') { - // this is being called the first time a player is initialized + if (typeof width !== 'undefined' && typeof height !== 'undefined') { + // this is being called the first time a player is initialized // width and height were collected from the HTML, YouTube, or Vimeo media API - // so are reflective of the actual size of the media - // use these values to calculate aspectRatio - this.aspectRatio = height / width; - if (this.playerWidth) { - // default width is already defined via a width or data-width attribute. Use that. - newWidth = this.playerWidth; - if (this.playerHeight) { - newHeight = this.playerHeight; - } - else { - newHeight = Math.round(newWidth * this.aspectRatio); - this.playerHeight = newHeight; - } - } - else { - // playerWidth was not defined via HTML attributes - if (this.player === 'html5') { - newWidth = $(window).width(); - } - else { - newWidth = this.$ableWrapper.width(); - } - newHeight = Math.round(newWidth * this.aspectRatio); - } - } - else if (this.fullscreen) { - this.$ableWrapper.addClass('fullscreen'); - newWidth = $(window).width(); + // so are reflective of the actual size of the media + // use these values to calculate aspectRatio + this.aspectRatio = height / width; + if (this.playerWidth) { + // default width is already defined via a width or data-width attribute. Use that. + newWidth = this.playerWidth; + if (this.playerHeight) { + newHeight = this.playerHeight; + } else { + newHeight = Math.round(newWidth * this.aspectRatio); + this.playerHeight = newHeight; + } + } else { + // playerWidth was not defined via HTML attributes + newWidth = (this.player === 'html5') ? $(window).width() : this.$ableWrapper.width(); + newHeight = Math.round(newWidth * this.aspectRatio); + } + } else if (this.fullscreen) { + this.$ableWrapper.addClass('fullscreen'); + newWidth = $(window).width(); // the 5 pixel buffer is arbitrary, but results in a better fit for all browsers - newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; + newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; this.positionCaptions('overlay'); - } - else { // not fullscreen, and not first time initializing player + } else { // not fullscreen, and not first time initializing player this.$ableWrapper.removeClass('fullscreen'); - if (this.player === 'html5') { - if (this.playerWidth) { - newWidth = this.playerWidth; - } - else { - // use full size of window - // player will be downsized to fit container if CSS requires it - newWidth = $(window).width(); - } - } - else { - newWidth = this.$ableWrapper.width(); + if (this.player === 'html5') { + newWidth = (this.playerWidth) ? this.playerWidth : $(window).width(); + } else { + newWidth = this.$ableWrapper.width(); } - newHeight = Math.round(newWidth * this.aspectRatio); - this.positionCaptions(this.prefCaptionsPosition); + newHeight = Math.round(newWidth * this.aspectRatio); + this.positionCaptions(this.prefCaptionsPosition); } if (this.debug) { - console.log('resizePlayer to ' + newWidth + 'x' + newHeight); + console.log('resizePlayer to ' + newWidth + 'x' + newHeight); } // Now size the player with newWidth and newHeight - if (this.player === 'youtube' || this.player === 'vimeo') { - $iframe = this.$ableWrapper.find('iframe'); - if (this.player === 'youtube' && this.youTubePlayer) { - // alternatively, YouTube API offers a method for setting the video size - // this adds width and height attributes to the iframe - // but might have other effects, so best to do it this way - this.youTubePlayer.setSize(newWidth,newHeight); - } - else { - // Vimeo API does not have a method for changing size of player - // Therefore, need to change iframe attributes directly + if (this.player === 'youtube' || this.player === 'vimeo') { + $iframe = this.$ableWrapper.find('iframe'); + if (this.player === 'youtube' && this.youTubePlayer) { + // alternatively, YouTube API offers a method for setting the video size + // this adds width and height attributes to the iframe + // but might have other effects, so best to do it this way + this.youTubePlayer.setSize(newWidth,newHeight); + } else { + // Vimeo API does not have a method for changing size of player + // Therefore, need to change iframe attributes directly $iframe.attr({ 'width': newWidth, 'height': newHeight - }); + }); } - if (this.playerWidth && this.playerHeight) { - if (this.fullscreen) { - // remove constraints - $iframe.css({ + if (this.playerWidth && this.playerHeight) { + if (this.fullscreen) { + // remove constraints + $iframe.css({ 'max-width': '', 'max-height': '' - }); - } - else { + }); + } else { // use CSS on iframe to enforce explicitly defined size constraints - $iframe.css({ + $iframe.css({ 'max-width': this.playerWidth + 'px', 'max-height': this.playerHeight + 'px' }); } } - } - else if (this.player === 'html5') { + } else if (this.player === 'html5') { if (this.fullscreen) { this.$media.attr({ 'width': newWidth, @@ -11842,46 +10507,37 @@ if (typeof module !== "undefined" && module.exports) { 'width': newWidth, 'height': newHeight }); - } - else { - // No constraints. Let CSS handle the positioning. + } else { + // No constraints. Let CSS handle the positioning. this.$media.removeAttr('width height'); - this.$ableWrapper.css({ - 'width': newWidth + 'px', - 'height': 'auto' - }); - } + this.$ableWrapper.removeAttr( 'style' ); + } } // Resize captions if (typeof this.$captionsDiv !== 'undefined') { - // Font-size is too small in full screen view - // use viewport units (vw) instead - // % units work fine if not fullscreen - // prefCaptionSize is expressed as a percentage - captionSize = parseInt(this.prefCaptionsSize,10); - if (this.fullscreen) { - captionSize = (captionSize / 100) + 'vw'; + // Font-size is too small in full screen view + // use viewport units (vw) for large viewports + // % units work fine if not fullscreen + // prefCaptionSize is expressed as a percentage + var isSmallScreen = false; + var windowWidth = window.screen.width; + if ( windowWidth < 1200 ) { + isSmallScreen = true; } - else { - captionSize = captionSize + '%'; + captionSize = parseInt(this.prefCaptionsSize,10); + if (this.fullscreen && ! isSmallScreen ) { + captionSize = (captionSize / 100) + 'vw'; + } else if ( this.fullscreen && isSmallScreen ) { + captionSize = '1.2rem'; + } else { + captionSize = captionSize + '%'; } this.$captionsDiv.css({ 'font-size': captionSize }); } - - // Reposition alert message (video player only) - // just below the vertical center of the mediaContainer - // hopefully above captions, but not too far from the controller bar - if (this.mediaType === 'video') { - alertTop = Math.round(this.$mediaContainer.height() / 3) * 2; - this.$alertBox.css({ - top: alertTop + 'px' - }); - } - - this.refreshControls(); + this.refreshControls(); }; AblePlayer.prototype.retrieveOffscreenWindow = function( which, width, height ) { @@ -11894,8 +10550,7 @@ if (typeof module !== "undefined" && module.exports) { if (which == 'transcript') { window = this.$transcriptArea; - } - else if (which == 'sign') { + } else if (which == 'sign') { window = this.$signWindow; } windowWidth = window.width(); @@ -11924,41 +10579,18 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.getHighestZIndex = function() { - - // returns the highest z-index on page - // used to ensure dialogs (or potentially other windows) are on top - - var max, $elements, z; - max = 0; - - // exclude the Able Player dialogs and windows - $elements = $('body ').not('.able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area'); - - $elements.each(function(){ - z = $(this).css('z-index'); - if (Number.isInteger(+z)) { // work only with integer values, not 'auto' - if (parseInt(z) > max) { - max = parseInt(z); - } - } - }); - return max; - }; - AblePlayer.prototype.updateZIndex = function(which) { // update z-index of 'transcript' or 'sign', relative to each other // direction is always 'up' (i.e., move window to top) // windows come to the top when the user clicks on them - var defHighZ, defLowZ, highestZ, transcriptZ, signZ, newHighZ, newLowZ; + var defHighZ, defLowZ, transcriptZ, signZ, newHighZ, newLowZ; // set the default z-indexes, as defined in ableplayer.css defHighZ = 8000; // by default, assigned to the sign window defLowZ = 7000; // by default, assigned to the transcript area - highestZ = this.getHighestZIndex(); // highest z-index on the page, excluding Able Player windows & modals - // NOTE: Although highestZ is collected here, it currently isn't used. + // Previously collected the highest z-index. Removed in 4.6. // If something on the page has a higher z-index than the transcript or sign window, do we care? // Excluding it here assumes "No". Our immediate concern is with the relationship between our own components. // If we elevate our z-indexes so our content is on top, we run the risk of starting a z-index war. @@ -11972,8 +10604,7 @@ if (typeof module !== "undefined" && module.exports) { // restore to the default this.$transcriptArea.css('z-index',defLowZ); } - } - else if (typeof this.$signWindow !== 'undefined') { + } else if (typeof this.$signWindow !== 'undefined') { signZ = parseInt(this.$signWindow.css('z-index')); if (signZ > defHighZ) { // restore to the default @@ -11993,24 +10624,20 @@ if (typeof module !== "undefined" && module.exports) { // the two windows are equal; restore defaults (the target window will be on top) newHighZ = defHighZ; newLowZ = defLowZ; - } - else if (transcriptZ > signZ) { + } else if (transcriptZ > signZ) { if (which === 'transcript') { // transcript is already on top; nothing to do return false; - } - else { + } else { // swap z's newHighZ = transcriptZ; newLowZ = signZ; } - } - else { // signZ is greater + } else { // signZ is greater if (which === 'sign') { // sign is already on top; nothing to do return false; - } - else { + } else { newHighZ = signZ; newLowZ = transcriptZ; } @@ -12019,8 +10646,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { this.$transcriptArea.css('z-index',newHighZ); this.$signWindow.css('z-index',newLowZ); - } - else if (which === 'sign') { + } else if (which === 'sign') { this.$signWindow.css('z-index',newHighZ); this.$transcriptArea.css('z-index',newLowZ); } @@ -12037,7 +10663,7 @@ if (typeof module !== "undefined" && module.exports) { // This was a group decision based on the belief that users may want a transcript // that is in a different language than the captions - var i, captions, descriptions, chapters, meta, langHasChanged; + var i, captions, descriptions, chapters, meta; // Captions for (i = 0; i < this.captions.length; i++) { @@ -12079,21 +10705,20 @@ if (typeof module !== "undefined" && module.exports) { // chapters popup is setup automatically when setupPopups() is called later with no param // not sure why it was included here. // this.setupPopups('chapters'); - } - else if (source === 'transcript') { + } else if (source === 'transcript') { this.transcriptCaptions = captions; this.transcriptChapters = chapters; this.transcriptDescriptions = descriptions; } if (this.selectedDescriptions) { - // updating description voice to match new description language - this.setDescriptionVoice(); - if (this.$sampleDescDiv) { - if (this.sampleText) { - for (i = 0; i < this.sampleText.length; i++) { - if (this.sampleText[i].lang === this.selectedDescriptions.language) { - this.currentSampleText = this.sampleText[i]['text']; - this.$sampleDescDiv.html(this.currentSampleText); + // updating description voice to match new description language + this.setDescriptionVoice(); + if (this.$sampleDescDiv) { + if (this.sampleText) { + for (i = 0; i < this.sampleText.length; i++) { + if (this.sampleText[i].lang === this.selectedDescriptions.language) { + this.currentSampleText = this.sampleText[i]['text']; + this.$sampleDescDiv.html(this.currentSampleText); } } } @@ -12239,7 +10864,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 1; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); thisObj.refreshControls("captions"); }; }; @@ -12275,7 +10900,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 0; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); if (!this.swappingSrc) { thisObj.refreshControls("captions"); thisObj.updateCaption(); @@ -12302,10 +10927,7 @@ if (typeof module !== "undefined" && module.exports) { if (typeof thisCaption !== "undefined") { if (this.currentCaption !== thisCaption) { // it's time to load the new caption into the container div - captionText = this.flattenCueForCaption(cues[thisCaption]).replace( - /\n/g, - "<br>" - ); + captionText = this.flattenCueForCaption(cues[thisCaption]).replace( /\n/g, "<br>" ); this.$captionsDiv.html(captionText); this.currentCaption = thisCaption; @@ -12387,24 +11009,24 @@ if (typeof module !== "undefined" && module.exports) { switch (pref) { case "prefCaptionsFont": - options[0] = ["serif", this.tt.serif]; - options[1] = ["sans-serif", this.tt.sans]; - options[2] = ["cursive", this.tt.cursive]; - options[3] = ["fantasy", this.tt.fantasy]; - options[4] = ["monospace", this.tt.monospace]; + options[0] = ["serif", this.translate( 'serif', 'serif' )]; + options[1] = ["sans-serif", this.translate( 'sans', 'sans-serif' )]; + options[2] = ["cursive", this.translate( 'cursive', 'cursive' )]; + options[3] = ["fantasy", this.translate( 'fantasy', 'fantasy' )]; + options[4] = ["monospace", this.translate( 'monospace', 'monospace' )]; break; case "prefCaptionsColor": case "prefCaptionsBGColor": // HTML color values must be in English - options[0] = ["white", this.tt.white]; - options[1] = ["yellow", this.tt.yellow]; - options[2] = ["green", this.tt.green]; - options[3] = ["cyan", this.tt.cyan]; - options[4] = ["blue", this.tt.blue]; - options[5] = ["magenta", this.tt.magenta]; - options[6] = ["red", this.tt.red]; - options[7] = ["black", this.tt.black]; + options[0] = ["white", this.translate( 'white', 'white' )]; + options[1] = ["yellow", this.translate( 'yellow', 'yellow' )]; + options[2] = ["green", this.translate( 'green', 'green' )]; + options[3] = ["cyan", this.translate( 'cyan', 'cyan' )]; + options[4] = ["blue", this.translate( 'blue', 'blue' )]; + options[5] = ["magenta", this.translate( 'magenta', 'magenta' )]; + options[6] = ["red", this.translate( 'red', 'red' )]; + options[7] = ["black", this.translate( 'black', 'black' )]; break; case "prefCaptionsSize": @@ -12424,8 +11046,8 @@ if (typeof module !== "undefined" && module.exports) { break; case "prefCaptionsStyle": - options[0] = this.tt.captionsStylePopOn; - options[1] = this.tt.captionsStyleRollUp; + options[0] = this.translate( 'captionsStylePopOn', 'Pop-on' ); + options[1] = this.translate( 'captionsStyleRollUp', 'Roll-up' ); break; case "prefCaptionsPosition": @@ -12463,7 +11085,7 @@ if (typeof module !== "undefined" && module.exports) { // this function handles stylizing of the sample caption text in the Prefs dialog // plus the actual production captions // TODO: consider applying the same user prefs to visible text-based description - var property, newValue, opacity, lineHeight; + var property, newValue, opacity; if (typeof $element !== "undefined") { if (pref == "prefCaptionsPosition") { @@ -12559,16 +11181,17 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.populateChaptersDiv = function() { - var headingLevel, headingType, headingId, $chaptersHeading, - $chaptersList; - + var headingLevel, headingType, headingId, $chaptersHeading; + if ( ! this.chaptersDivLocation ) { + return; + } if ($('#' + this.chaptersDivLocation)) { this.$chaptersDiv = $('#' + this.chaptersDivLocation); this.$chaptersDiv.addClass('able-chapters-div'); // empty content from previous build before starting fresh - this.$chaptersDiv.empty(); + this.$chaptersDiv.empty(); // add optional header if (this.chaptersTitle) { @@ -12584,10 +11207,9 @@ if (typeof module !== "undefined" && module.exports) { this.$chaptersNav = $('<nav>'); if (this.chaptersTitle) { - this.$chaptersNav.attr('aria-labelledby',headingId); - } - else { - this.$chaptersNav.attr('aria-label',this.tt.chapters); + this.$chaptersNav.attr( 'aria-labelledby', headingId ); + } else { + this.$chaptersNav.attr( 'aria-label', this.translate( 'chapters', 'Chapters' ) ); } this.$chaptersDiv.append(this.$chaptersNav); @@ -12599,32 +11221,25 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.updateChaptersList = function() { var thisObj, cues, $chaptersList, c, thisChapter, - $chapterItem, $chapterButton, buttonId, hasDefault, - getClickFunction, $clickedItem, $chaptersList, thisChapterIndex; + $chapterItem, $chapterButton, hasDefault, + getClickFunction, $clickedItem, $chaptersList; thisObj = this; - // TODO: Update this so it can change the chapters popup menu + // TODO: Update this so it can change the chapters popup menu // currently it only works if chapters are in an external container if (!this.$chaptersNav) { return false; } if (typeof this.useChapterTimes === 'undefined') { - if (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) { - this.useChapterTimes = true; - } - else { - this.useChapterTimes = false; - } + this.useChapterTimes = (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) ? true : false; } if (this.useChapterTimes) { cues = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { cues = this.chapters[0].cues; - } - else { + } else { cues = []; } if (cues.length > 0) { @@ -12643,7 +11258,6 @@ if (typeof module !== "undefined" && module.exports) { thisObj.seekTrigger = 'chapter'; $clickedItem = $(this).closest('li'); $chaptersList = $(this).closest('ul').find('li'); - thisChapterIndex = $chaptersList.index($clickedItem); $chaptersList.removeClass('able-current-chapter') .children('button').removeAttr('aria-current'); $clickedItem.addClass('able-current-chapter') @@ -12712,7 +11326,7 @@ if (typeof module !== "undefined" && module.exports) { return; } - var chapters, i, thisChapterIndex, chapterLabel; + var chapters, i, thisChapterIndex; chapters = this.selectedChapters.cues; for (i = 0; i < chapters.length; i++) { @@ -12762,12 +11376,10 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends, adjust chapter end to match video end chapterEnd = this.duration; this.currentChapter.end = this.duration; - } - else { + } else { chapterEnd = this.currentChapter.end; } - } - else { // this is not the last chapter + } else { // this is not the last chapter chapterEnd = this.currentChapter.end; } return chapterEnd - this.currentChapter.start; @@ -12783,8 +11395,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.elapsed > this.currentChapter.start) { return this.elapsed - this.currentChapter.start; - } - else { + } else { return 0; } }; @@ -12797,12 +11408,10 @@ if (typeof module !== "undefined" && module.exports) { var newTime = this.currentChapter.start + chapterTime; if (newTime > this.currentChapter.end) { return this.currentChapter.end; - } - else { + } else { return newTime; } - } - else { + } else { return chapterTime; } }; @@ -12823,7 +11432,7 @@ if (typeof module !== "undefined" && module.exports) { setTimeout(function() { thisObj.hidingPopup = false; }, 100); - thisObj.$chaptersButton.focus(); + thisObj.$chaptersButton.trigger('focus'); } }; @@ -12877,7 +11486,7 @@ if (typeof module !== "undefined" && module.exports) { cueText = this.flattenCueForMeta(cues[thisMeta]); cueLines = cueText.split("\n"); for (i = 0; i < cueLines.length; i++) { - line = $.trim(cueLines[i]); + line = cueLines[i].trim(); if (line.toLowerCase().trim() === "pause") { // don't show big play button when pausing via metadata this.hideBigPlayButton = true; @@ -12885,7 +11494,7 @@ if (typeof module !== "undefined" && module.exports) { } else if (line.toLowerCase().substring(0, 6) == "focus:") { focusTarget = line.substring(6).trim(); if ($(focusTarget).length) { - $(focusTarget).focus(); + $(focusTarget).trigger('focus'); } } else { if ($(line).length) { @@ -12896,7 +11505,11 @@ if (typeof module !== "undefined" && module.exports) { typeof showDuration !== "undefined" && !isNaN(showDuration) ) { - $(line).show().delay(showDuration).fadeOut(); + $(line).show(); + const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + delay(showDuration).then(() => { + $(line).hide(); + }); } else { // no duration specified. Just show the element until end time specified in VTT file $(line).show(); @@ -12968,11 +11581,11 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.setupTranscript = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - if (this.usingYouTubeCaptions || this.usingVimeoCaptions) { - // a transcript is not possible + if (this.usingYouTubeCaptions || this.usingVimeoCaptions || this.hideTranscriptButton ) { + // a transcript is not possible or is disabled. this.transcriptType = null; deferred.resolve(); } else { @@ -12987,10 +11600,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (this.transcriptType) { - if ( - this.transcriptType === "popup" || - this.transcriptType === "external" - ) { + if ( this.transcriptType === "popup" || this.transcriptType === "external" ) { this.injectTranscriptArea(); deferred.resolve(); } else if (this.transcriptType === "manual") { @@ -13017,7 +11627,7 @@ if (typeof module !== "undefined" && module.exports) { this.$transcriptArea = $("<div>", { class: "able-transcript-area", role: "dialog", - "aria-label": this.tt.transcriptTitle, + "aria-label": this.translate( 'transcriptTitle', 'Transcript' ), }); this.$transcriptToolbar = $("<div>", { @@ -13037,11 +11647,15 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); - this.$transcriptToolbar.append( - $autoScrollLabel, - this.$autoScrollTranscriptCheckbox - ); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); + $autoScrollContainer = $( '<div>', { + 'class': 'autoscroll-transcript' + }); + $autoScrollContainer.append( + $autoScrollLabel, + this.$autoScrollTranscriptCheckbox + ); + this.$transcriptToolbar.append( $autoScrollContainer ); // Add field for selecting a transcript language // Only necessary if there is more than one language @@ -13051,7 +11665,7 @@ if (typeof module !== "undefined" && module.exports) { }); $languageSelectLabel = $("<label>", { for: "transcript-language-select-" + this.mediaId, - }).text(this.tt.language); + }).text( this.translate( 'language', 'Language' ) ); this.$transcriptLanguageSelect = $("<select>", { id: "transcript-language-select-" + this.mediaId, }); @@ -13078,6 +11692,8 @@ if (typeof module !== "undefined" && module.exports) { // If client has provided separate transcript location, put it there. // Otherwise append it to the body if (this.transcriptDivLocation) { + this.$transcriptArea.removeAttr( 'role' ); + this.$transcriptArea.removeAttr( 'aria-label' ); $("#" + this.transcriptDivLocation).append(this.$transcriptArea); } else { this.$ableWrapper.append(this.$transcriptArea); @@ -13104,7 +11720,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addTranscriptAreaEvents = function () { var thisObj = this; - this.$autoScrollTranscriptCheckbox.click(function () { + this.$autoScrollTranscriptCheckbox.on( 'click', function () { thisObj.handleTranscriptLockToggle( thisObj.$autoScrollTranscriptCheckbox.prop("checked") ); @@ -13124,7 +11740,7 @@ if (typeof module !== "undefined" && module.exports) { ); if (typeof this.$transcriptLanguageSelect !== "undefined") { - this.$transcriptLanguageSelect.on("click mousedown", function (e) { + this.$transcriptLanguageSelect.on('click', function (e) { // execute default behavior // prevent propagation of mouse event to toolbar or window e.stopPropagation(); @@ -13174,7 +11790,7 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); // Add an auto-scroll checkbox to the toolbar. this.$autoScrollTranscriptCheckbox = $autoScrollInput; @@ -13275,7 +11891,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$transcriptArea.length > 0) { this.$transcriptArea .find("span.able-transcript-seekpoint") - .click(function (e) { + .on( 'click', function (e) { thisObj.seekTrigger = "transcript"; var spanStart = parseFloat($(this).attr("data-start")); // Add a tiny amount so that we're inside the span. @@ -13354,9 +11970,9 @@ if (typeof module !== "undefined" && module.exports) { if (typeof this.transcriptTitle !== "undefined") { transcriptTitle = this.transcriptTitle; } else if (this.lyricsMode) { - transcriptTitle = this.tt.lyricsTitle; + transcriptTitle = this.translate( 'lyricsTitle', 'Lyrics' ); } else { - transcriptTitle = this.tt.transcriptTitle; + transcriptTitle = this.translate( 'transcriptTitle', 'Transcript' ); } if (!this.transcriptDivLocation) { @@ -13579,7 +12195,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (comp.type === "b" || comp.type == "i") { - result.push($tag, " "); + result.push($tag); } } else { for (var i = 0; i < comp.children.length; i++) { @@ -13592,13 +12208,22 @@ if (typeof module !== "undefined" && module.exports) { }; for (var i = 0; i < cap.components.children.length; i++) { + var next_child_tagname; + if ( i < cap.components.children.length - 1 ) { + next_child_tagname = cap.components.children[i + 1].tagName; + } var results = flattenComponentForCaption(cap.components.children[i]); for (var jj = 0; jj < results.length; jj++) { var result = results[jj]; if (typeof result === "string") { - if (thisObj.lyricsMode) { - // add <br> BETWEEN each caption and WITHIN each caption (if payload includes "\n") - result = result.replace(/\n/g, "<br>") + "<br>"; + if (thisObj.lyricsMode) { + // add <br> WITHIN each caption (if payload includes "\n") + result = result.replace(/\n/g,'<br>'); + + // add <br> BETWEEN each caption, but do not consider sibling style tags within this caption as the next caption! + if ( !next_child_tagname || ( next_child_tagname !== 'i' && next_child_tagname !== 'b' ) ) { + result += '<br>'; + } } else { // just add a space between captions result += " "; @@ -13687,7 +12312,6 @@ if (typeof module !== "undefined" && module.exports) { // organize transcript into blocks using [] and () as starting points var $components = $main.children(); var spanCount = 0; - var openBlock = true; $components.each(function () { if ($(this).hasClass("able-transcript-caption")) { if ( @@ -13697,10 +12321,7 @@ if (typeof module !== "undefined" && module.exports) { // this caption includes a bracket or parenth. Start a new block // close the previous block first if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } @@ -13709,16 +12330,24 @@ if (typeof module !== "undefined" && module.exports) { } else { // this is not a caption. Close the caption block if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } }); + // Close out remaining temp blocks. + $main = wrapTranscriptBlocks( $main ); + return $main; }; + + var wrapTranscriptBlocks = function( $main ) { + $main.find(".able-block-temp") + .removeClass("able-block-temp") + .wrapAll('<div class="able-transcript-block"></div>'); + + return $main; + } })(jQuery); (function ($) { @@ -13737,7 +12366,7 @@ if (typeof module !== "undefined" && module.exports) { // sanitize search string var cleanSearchString = DOMPurify.sanitize(this.searchString); if ($("#" + this.SearchDiv)) { - var searchStringHtml = "<p>" + this.tt.resultsSummary1 + " "; + var searchStringHtml = "<p>" + this.translate( 'resultsSummary1', 'You searched for:') + ' '; searchStringHtml += '<span id="able-search-term-echo">' + cleanSearchString + "</span>"; searchStringHtml += "</p>"; @@ -13749,19 +12378,16 @@ if (typeof module !== "undefined" && module.exports) { var $resultsSummary = $("<p>", { class: "able-search-results-summary", }); - var resultsSummaryText = this.tt.resultsSummary2; - resultsSummaryText += - " <strong>" + resultsArray.length + "</strong> "; - resultsSummaryText += this.tt.resultsSummary3 + " "; - resultsSummaryText += this.tt.resultsSummary4; - $resultsSummary.html(resultsSummaryText); + var resultsSummaryText = this.translate( 'resultsSummary2', 'Found %1 matching items.', [ '<strong>' + resultsArray.length + '</strong>' ] ); + resultsSummaryText += ' ' + this.translate( 'resultsSummary3', 'Click the time associated with any item to play the video from that point.' ); + $resultsSummary.html( resultsSummaryText ); var $resultsList = $("<ul>"); for (var i = 0; i < resultsArray.length; i++) { var resultId = "aria-search-result-" + i; var $resultsItem = $("<li>", {}); var itemStartTime = this.secondsToTime(resultsArray[i]["start"]); var itemLabel = - this.tt.searchButtonLabel + " " + itemStartTime["title"]; + this.translate( 'searchButtonLabel', 'Play at %1', [ itemStartTime["title"] ] ); var itemStartSpan = $("<button>", { class: "able-search-results-time", "data-start": resultsArray[i]["start"], @@ -13784,16 +12410,16 @@ if (typeof module !== "undefined" && module.exports) { class: "able-search-result-text", id: resultId, }); - itemText.html("..." + resultsArray[i]["caption"] + "..."); + itemText.html('...' + resultsArray[i]["caption"] + '...'); $resultsItem.append(itemStartSpan, itemText); $resultsList.append($resultsItem); } - $("#" + this.searchDiv) + $('#' + this.searchDiv) .html(searchStringHtml) .append($resultsSummary, $resultsList); } else { - var noResults = $("<p>").text(this.tt.noResultsFound); - $("#" + this.searchDiv) + var noResults = $('<p>').text( this.translate( 'noResultsFound', 'No results found.' ) ); + $('#' + this.searchDiv) .html(searchStringHtml) .append(noResults); } @@ -13887,36 +12513,36 @@ if (typeof module !== "undefined" && module.exports) { if (hours > 0) { value += hours + ":"; if (hours == 1) { - title += "1 " + this.tt.hour + " "; + title += "1 " + this.translate( 'hour', 'hour' ) + " "; } else { - title += hours + " " + this.tt.hours + " "; + title += hours + " " + this.translate( 'hours', 'hours' ) + " "; } } if (minutes < 10) { value += "0" + minutes + ":"; if (minutes > 0) { if (minutes == 1) { - title += "1 " + this.tt.minute + " "; + title += "1 " + this.translate( 'minute', 'minute' ) + " "; } else { - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } } } else { value += minutes + ":"; - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } if (seconds < 10) { value += "0" + seconds; if (seconds > 0) { if (seconds == 1) { - title += "1 " + this.tt.second + " "; + title += "1 " + this.translate( 'second', 'second' ) + " "; } else { - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } } } else { value += seconds; - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } var time = []; time["value"] = value; @@ -13929,7 +12555,6 @@ if (typeof module !== "undefined" && module.exports) { // Media events AblePlayer.prototype.onMediaUpdateTime = function (duration, elapsed) { - // duration and elapsed are passed from callback functions of Vimeo API events // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx @@ -13937,17 +12562,17 @@ if (typeof module !== "undefined" && module.exports) { this.getMediaTimes(duration,elapsed).then(function(mediaTimes) { thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - if (thisObj.duration > 0) { + if (thisObj.duration > 0) { // do all the usual time-sync stuff during playback if (thisObj.prefHighlight === 1) { thisObj.highlightTranscript(thisObj.elapsed); - } + } thisObj.updateCaption(thisObj.elapsed); thisObj.showDescription(thisObj.elapsed); thisObj.updateChapter(thisObj.elapsed); thisObj.updateMeta(thisObj.elapsed); - thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); - } + thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); + } }); }; @@ -13974,34 +12599,32 @@ if (typeof module !== "undefined" && module.exports) { this.playlistIndex = 0; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(0); - } - else { + } else { this.playing = false; this.paused = true; } - } - else { + } else { // this is not the last track. Play the next one. this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex) } } - this.refreshControls('init'); + this.refreshControls(); }; AblePlayer.prototype.onMediaNewSourceLoad = function () { - var loadIsComplete = false; + var loadIsComplete = false; if (this.cueingPlaylistItem) { - // this variable was set in order to address bugs caused by multiple firings of media 'end' event + // this variable was set to address bugs caused by multiple firings of media 'end' event // safe to reset now this.cueingPlaylistItem = false; } - if (this.recreatingPlayer) { - // same as above; different bugs - this.recreatingPlayer = false; + if (this.recreatingPlayer) { + // same as above; different bugs + this.recreatingPlayer = false; } if (this.playbackRate) { // user has set playbackRate on a previous src or track @@ -14012,10 +12635,9 @@ if (typeof module !== "undefined" && module.exports) { if (!this.startedPlaying || this.okToPlay) { // start playing; no further user action is required this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.seekTrigger == 'restart' || + } else if (this.seekTrigger == 'restart' || this.seekTrigger == 'chapter' || this.seekTrigger == 'transcript' || this.seekTrigger == 'search' @@ -14024,67 +12646,59 @@ if (typeof module !== "undefined" && module.exports) { // Not included: elements where user might click multiple times in succession // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play this.playMedia(); - loadIsComplete = true; - } - else if (this.swappingSrc) { + loadIsComplete = true; + } else if (this.swappingSrc) { // new source file has just been loaded if (this.hasPlaylist) { // a new source file from the playlist has just been loaded if ((this.playlistIndex !== this.$playlist.length) || this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.swapTime > 0) { - if (this.seekStatus === 'complete') { + } else if (this.swapTime > 0) { + if (this.seekStatus === 'complete') { if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else if (this.seekStatus === 'seeking') { - } - else { - if (this.swapTime === this.elapsed) { - // seek is finished! - this.seekStatus = 'complete'; + loadIsComplete = true; + } else if (this.seekStatus === 'seeking') { + // Do nothing. + } else { + if (this.swapTime === this.elapsed) { + // seek is finished! + this.seekStatus = 'complete'; if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else { - // seeking hasn't started yet - // first, determine whether it's possible - if (this.hasDescTracks) { + loadIsComplete = true; + } else { + // seeking hasn't started yet + // first, determine whether it's possible + if (this.hasDescTracks) { // do nothing. Unable to seek ahead if there are descTracks - loadIsComplete = true; - } - else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { + loadIsComplete = true; + } else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { // durations of two sources are close enough to making seek ahead in new source ok - this.seekStatus = 'seeking'; + this.seekStatus = 'seeking'; this.seekTo(this.swapTime); - } - else { - // durations of two sources are too dissimilar to support seeking ahead to swapTime. - loadIsComplete = true; + } else { + // durations of two sources are too dissimilar to support seeking ahead to swapTime. + loadIsComplete = true; } } } - } - else { - // swapTime is 0. No seeking required. - if (this.playing) { - this.playMedia(); - // swap is complete. Reset vars. - loadIsComplete = true; + } else { + // swapTime is 0. No seeking required. + if (this.playing) { + this.playMedia(); + // swap is complete. Reset vars. + loadIsComplete = true; } } - } - else if (!this.startedPlaying) { + } else if (!this.startedPlaying) { if (this.startTime > 0) { if (this.seeking) { // a seek has already been initiated @@ -14093,94 +12707,84 @@ if (typeof module !== "undefined" && module.exports) { if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; - } - else { + loadIsComplete = true; + } else { // haven't started seeking yet this.seekTo(this.startTime); } - } - else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { + } else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { this.seekToChapter(this.defaultChapter); - } - else { + } else { // there is no startTime, therefore no seeking required if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.hasPlaylist) { - // new source media is part of a playlist, but user didn't click on it + } else if (this.hasPlaylist) { + // new source media is part of a playlist, but user didn't click on it // (and somehow, swappingSrc is false) - // this may happen when the previous track ends and next track loads - // this same code is called above when swappingSrc is true + // this may happen when the previous track ends and next track loads + // this same code is called above when swappingSrc is true if ((this.playlistIndex !== this.$playlist.length) || this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else { - // None of the above. + } else { + // None of the above. // User is likely seeking to a new time, but not loading a new media source - // need to reset vars - loadIsComplete = true; - } - if (loadIsComplete) { - // reset vars - this.swappingSrc = false; - this.seekStatus = null; - this.swapTime = 0; + // need to reset vars + loadIsComplete = true; + } + if (loadIsComplete) { + // reset vars + this.swappingSrc = false; + this.seekStatus = null; + this.swapTime = 0; this.seekTrigger = null; - this.seekingFromTranscript = false; + this.seekingFromTranscript = false; this.userClickedPlaylist = false; - this.okToPlay = false; + this.okToPlay = false; } - this.refreshControls('init'); - if (this.$focusedElement) { - this.restoreFocus(); - this.$focusedElement = null; + this.refreshControls(); + if (this.$focusedElement) { + this.restoreFocus(); + this.$focusedElement = null; + this.activeMedia = null; } }; - AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { + AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { - // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src - // The durations may not be exact, but they might be "close enough" - // returns true if "close enough", otherwise false + // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src + // The durations may not be exact, but they might be "close enough" + // returns true if "close enough", otherwise false - var tolerance, diff; - - tolerance = 1; // number of seconds between rounded durations that is considered "close enough" - - diff = Math.abs(Math.round(d1) - Math.round(d2)); - - if (diff <= tolerance) { - return true; - } - else { - return false; - } + var tolerance, diff; + + tolerance = 1; // number of seconds between rounded durations that is considered "close enough" + diff = Math.abs(Math.round(d1) - Math.round(d2)); + + return (diff <= tolerance) ? true : false; }; - AblePlayer.prototype.restoreFocus = function() { + AblePlayer.prototype.restoreFocus = function() { // function called after player has been rebuilt (during media swap) - // the original focusedElement no longer exists, - // but this function finds a match in the new player - // and places focus there + // the original focusedElement no longer exists, + // but this function finds a match in the new player + // and places focus there - var classList; + var classList, $mediaParent; - if (this.$focusedElement) { - - if ((this.$focusedElement).attr('role') === 'button') { + if ( this.$focusedElement && null !== this.activeMedia ) { + $mediaParent = $( '#' + this.activeMedia ).closest( '.able' ); + if ( (this.$focusedElement).attr('role') === 'button' ) { classList = this.$focusedElement.attr("class").split(/\s+/); $.each(classList, function(index, item) { if (item.substring(0,20) === 'able-button-handler-') { - $('div.able-controller div.' + item).focus(); + $mediaParent.find('div.able-controller div.' + item).trigger('focus'); } }); } @@ -14203,12 +12807,11 @@ if (typeof module !== "undefined" && module.exports) { thisObj.showDescription(position); thisObj.updateChapter(thisObj.convertChapterTimeToVideoTime(position)); thisObj.updateMeta(position); - thisObj.refreshControls('init'); + thisObj.refreshControls(); }).on('stopTracking', function (e, position) { if (thisObj.useChapterTimes) { thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); - } - else { + } else { thisObj.seekTo(position); } if (!thisObj.pausedBeforeTracking) { @@ -14220,133 +12823,120 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.onClickPlayerButton = function (el) { - var whichButton, prefsPopup; - - whichButton = this.getButtonNameFromClass($(el).attr('class')); - - if (whichButton === 'play') { - this.clickedPlay = true; - this.handlePlay(); - } - else if (whichButton === 'restart') { - this.seekTrigger = 'restart'; - this.handleRestart(); - } - else if (whichButton === 'previous') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'previous'; - this.buttonWithFocus = 'previous'; - this.handlePrevTrack(); - } - else if (whichButton === 'next') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'next'; - this.buttonWithFocus = 'next'; - this.handleNextTrack(); - } - else if (whichButton === 'rewind') { - this.seekTrigger = 'rewind'; - this.handleRewind(); - } - else if (whichButton === 'forward') { - this.seekTrigger = 'forward'; - this.handleFastForward(); - } - else if (whichButton === 'mute') { - this.handleMute(); - } - else if (whichButton === 'volume') { - this.handleVolumeButtonClick(); - } - else if (whichButton === 'faster') { - this.handleRateIncrease(); - } - else if (whichButton === 'slower') { - this.handleRateDecrease(); - } - else if (whichButton === 'captions') { - this.handleCaptionToggle(); - } - else if (whichButton === 'chapters') { - this.handleChapters(); - } - else if (whichButton === 'descriptions') { - this.handleDescriptionToggle(); - } - else if (whichButton === 'sign') { - if (!this.closingSign) { - this.handleSignToggle(); - } - } - else if (whichButton === 'preferences') { - if ($(el).attr('data-prefs-popup') === 'menu') { - this.handlePrefsClick(); - } - else { - this.showingPrefsDialog = true; // stopgap - this.closePopups(); - prefsPopup = $(el).attr('data-prefs-popup'); - if (prefsPopup === 'keyboard') { - this.keyboardPrefsDialog.show(); - } - else if (prefsPopup === 'captions') { - this.captionPrefsDialog.show(); + whichButton = this.getButtonNameFromClass($(el).attr('class')); + switch ( whichButton ) { + case 'play': + this.clickedPlay = true; + this.handlePlay(); + break; + case 'restart': + this.seekTrigger = 'restart'; + this.handleRestart(); + break; + case 'previous': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'previous'; + this.buttonWithFocus = 'previous'; + this.handlePrevTrack(); + break; + case 'next': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'next'; + this.buttonWithFocus = 'next'; + this.handleNextTrack(); + break; + case 'rewind': + this.seekTrigger = 'rewind'; + this.handleRewind(); + break; + case 'forward': + this.seekTrigger = 'forward'; + this.handleFastForward(); + break; + case 'mute': + this.handleMute(); + break; + case 'volume': + this.handleVolumeButtonClick(); + break; + case 'faster': + this.handleRateIncrease(); + break; + case 'slower': + this.handleRateDecrease(); + break; + case 'captions': + this.handleCaptionToggle(); + break; + case 'chapters': + this.handleChapters(); + break; + case 'descriptions': + this.handleDescriptionToggle(); + break; + case 'sign': + if ( ! this.closingSign ) { + this.handleSignToggle(); } - else if (prefsPopup === 'descriptions') { - this.descPrefsDialog.show(); + break; + case 'preferences': + if ($(el).attr('data-prefs-popup') === 'menu') { + this.handlePrefsClick(); + } else { + this.showingPrefsDialog = true; // stopgap + this.closePopups(); + prefsPopup = $(el).attr('data-prefs-popup'); + if (prefsPopup === 'keyboard') { + this.keyboardPrefsDialog.show(); + } else if (prefsPopup === 'captions') { + this.captionPrefsDialog.show(); + } else if (prefsPopup === 'descriptions') { + this.descPrefsDialog.show(); + } else if (prefsPopup === 'transcript') { + this.transcriptPrefsDialog.show(); + } + this.showingPrefsDialog = false; } - else if (prefsPopup === 'transcript') { - this.transcriptPrefsDialog.show(); + break; + case 'transcript': + if ( !this.closingTranscript ) { + this.handleTranscriptToggle(); } - this.showingPrefsDialog = false; - } - } - else if (whichButton === 'help') { - this.handleHelpClick(); - } - else if (whichButton === 'transcript') { - if (!this.closingTranscript) { - this.handleTranscriptToggle(); - } - } - else if (whichButton === 'fullscreen') { - this.clickedFullscreenButton = true; - this.handleFullscreenToggle(); + break; + case 'fullscreen': + this.clickedFullscreenButton = true; + this.handleFullscreenToggle(); + break; } }; - AblePlayer.prototype.getButtonNameFromClass = function (classString) { - - // player control buttons all have class="able-button-handler-x" where x is the identifier + AblePlayer.prototype.getButtonNameFromClass = function (classString) { + // player control buttons all have class="able-button-handler-x" where x is the identifier // buttons might also have other classes assigned though + var classes, i; - var classes, i; - - classes = classString.split(' '); - for (i = 0; i < classes.length; i++) { - if (classes[i].substring(0,20) === 'able-button-handler-') { - return classes[i].substring(20); + classes = classString.split(' '); + for (i = 0; i < classes.length; i++) { + if (classes[i].substring(0,20) === 'able-button-handler-') { + return classes[i].substring(20); } - } - return classString; + } + return classString; } AblePlayer.prototype.okToHandleKeyPress = function () { - - // returns true unless user's focus is on a UI element + let defaultReturn = true; + if ( this.prefNoKeyShortcuts === 1 ) { + defaultReturn = false; + } + // returns true unless user's focus is on a UI element or user has disabled keyboard shortcuts. // that is likely to need supported keystrokes, including space - var activeElement = AblePlayer.getActiveDOMElement(); - if ($(activeElement).prop('tagName') === 'INPUT') { - return false; - } - else { - return true; - } + return ($(activeElement).prop('tagName') === 'INPUT') ? false : defaultReturn; }; AblePlayer.prototype.onPlayerKeyPress = function (e) { @@ -14354,24 +12944,21 @@ if (typeof module !== "undefined" && module.exports) { // handle keystrokes (using DHTML Style Guide recommended key combinations) // https://web.archive.org/web/20130127004544/http://dev.aol.com/dhtml_style_guide/#mediaplayer // Modifier keys Alt + Ctrl are on by default, but can be changed within Preferences - // NOTE #1: Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down + // - Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down // The rest are reasonable best choices - // NOTE #2: If there are multiple players on a single page, keystroke handlers + // - If there are multiple players on a single page, keystroke handlers // are only bound to the FIRST player - // NOTE #3: The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions + // - The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions // including removal of the "media player" design pattern. There's an issue about that: // https://github.com/w3c/aria-practices/issues/27 - var which, $thisElement; + var key, $thisElement; // Convert to lower case. - which = e.which; - if (which >= 65 && which <= 90) { - which += 32; - } + key = e.key; $thisElement = $(document.activeElement); - if (which === 27) { // escape + if (key === 'Escape') { if (this.$transcriptArea && $.contains(this.$transcriptArea[0],$thisElement[0]) && !this.hidingPopup) { // This element is part of transcript area. this.handleTranscriptToggle(); @@ -14394,101 +12981,86 @@ if (typeof module !== "undefined" && module.exports) { (e.target.tagName === 'TEXTAREA' && !this.stenoMode) || e.target.tagName === 'SELECT' )){ - if (which === 27) { // escape + if (key === 'Escape') { this.closePopups(); this.$tooltipDiv.hide(); this.seekBar.hideSliderTooltips(); - } - else if (which === 32) { // spacebar = play/pause + } else if (key === ' ') { // disable spacebar support for play/pause toggle as of 4.2.10 // spacebar should not be handled everywhere on the page, since users use that to scroll the page // when the player has focus, most controls are buttons so spacebar should be used to trigger the buttons if ($thisElement.attr('role') === 'button') { // register a click on this element e.preventDefault(); - $thisElement.click(); + $thisElement.trigger( 'click' ); } - } - else if (which === 112) { // p = play/pause + } else if ( key === 'p' ) { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePlay(); } - } - else if (which === 115) { // s = stop (now restart) + } else if (key === 's') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRestart(); } - } - else if (which === 109) { // m = mute + } else if (key === 'm') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleMute(); } - } - else if (which === 118) { // v = volume + } else if (key === 'v') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleVolumeButtonClick(); } - } - else if (which >= 49 && which <= 57) { // set volume 1-9 + } else if (key >= 0 && key <= 9) { if (this.usingModifierKeys(e)) { e.preventDefault(); - this.handleVolumeKeystroke(which); + this.handleVolumeKeystroke(key); } - } - else if (which === 99) { // c = caption toggle + } else if (key === 'c') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleCaptionToggle(); } - } - else if (which === 100) { // d = description + } else if (key === 'd') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleDescriptionToggle(); } - } - else if (which === 102) { // f = forward + } else if (key === 'f') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleFastForward(); } - } - else if (which === 114) { // r = rewind + } else if (key === 'r') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRewind(); } - } - else if (which === 98) { // b = back (previous track) + } else if (key === 'b') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrevTrack(); } - } - else if (which === 110) { // n = next track + } else if (key === 'n') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleNextTrack(); } - } - else if (which === 101) { // e = preferences + } else if (key === 'e') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrefsClick(); } - } - else if (which === 13) { // Enter + } else if (key === 'Enter') { if ($thisElement.attr('role') === 'button' || $thisElement.prop('tagName') === 'SPAN') { // register a click on this element // if it's a transcript span the transcript span click handler will take over - $thisElement.click(); - } - else if ($thisElement.prop('tagName') === 'LI') { - $thisElement.click(); + $thisElement.trigger( 'click' ); + } else if ($thisElement.prop('tagName') === 'LI') { + $thisElement.trigger( 'click' ); } } } @@ -14509,10 +13081,7 @@ if (typeof module !== "undefined" && module.exports) { }) .on('loadedmetadata',function() { // should be able to get duration now - thisObj.duration = thisObj.media.duration; - var x = 50.5; - var y = 51.9; - var diff = Math.abs(Math.round(x)-Math.round(y)); + thisObj.duration = thisObj.media.duration; }) .on('canplay',function() { // previously handled seeking to startTime here @@ -14520,21 +13089,21 @@ if (typeof module !== "undefined" && module.exports) { // so we know player can seek ahead to anything }) .on('canplaythrough',function() { - // previously onMediaNewSourceLoad() was called on 'loadedmetadata' - // but that proved to be too soon for some of this functionality. - // TODO: Monitor this. If moving it here causes performance issues, - // consider moving some or all of this functionality to 'canplay' - thisObj.onMediaNewSourceLoad(); + // previously onMediaNewSourceLoad() was called on 'loadedmetadata' + // but that proved to be too soon for some of this functionality. + // TODO: Monitor this. If moving it here causes performance issues, + // consider moving some or all of this functionality to 'canplay' + thisObj.onMediaNewSourceLoad(); }) .on('play',function() { - // both 'play' and 'playing' seem to be fired in all browsers (including IE11) - // therefore, doing nothing here & doing everything when 'playing' is triggered - thisObj.refreshControls('playpause'); + // 'play' indicates that the play method has been called. + // Don't do anything until playback has actually started. }) .on('playing',function() { + // 'playing' indicates that the video is playing. thisObj.playing = true; thisObj.paused = false; - thisObj.swappingSrc = false; + thisObj.swappingSrc = false; thisObj.refreshControls('playpause'); }) .on('ended',function() { @@ -14546,8 +13115,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.refreshControls('timeline'); }) .on('waiting',function() { - // do something - // previously called refreshControls() here but this event probably doesn't warrant a refresh + // could fire a notification about loss of data. }) .on('durationchange',function() { // Display new duration. @@ -14556,21 +13124,19 @@ if (typeof module !== "undefined" && module.exports) { .on('timeupdate',function() { thisObj.onMediaUpdateTime(); // includes a call to refreshControls() }) - .on('pause',function() { - if (!thisObj.clickedPlay) { + .on('pause',function() { + if (!thisObj.clickedPlay) { // 'pause' was triggered automatically, not initiated by user // this happens in some browsers when swapping source // (e.g., between tracks in a playlist or swapping description) - if (thisObj.hasPlaylist || thisObj.swappingSrc) { + if (thisObj.hasPlaylist || thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -14641,11 +13207,11 @@ if (typeof module !== "undefined" && module.exports) { // Triggered as the video is loaded. // Reports back the amount of the video that has been buffered (NOT the amount played) // Data has keys duration, percent, and seconds - }); + }); this.vimeoPlayer.on('seeking', function(data) { // Triggered when the player starts seeking to a specific time. // A timeupdate event will also be fired at the same time. - }); + }); this.vimeoPlayer.on('seeked', function(data) { // Triggered when the player seeks to a specific time. // A timeupdate event will also be fired at the same time. @@ -14664,13 +13230,11 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.hasPlaylist || thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -14708,10 +13272,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addEventListeners = function () { - var thisObj, whichButton, thisElement; - - // Save the current object context in thisObj for use with inner functions. - thisObj = this; + var thisObj = this; // Appropriately resize media player for full screen. $(window).on('resize',function () { @@ -14729,7 +13290,7 @@ if (typeof module !== "undefined" && module.exports) { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { // the player's style attribute has changed. Check to see if it's visible if (thisObj.$ableDiv.is(':visible')) { - thisObj.refreshControls('init'); + thisObj.refreshControls(); } } }); @@ -14737,15 +13298,9 @@ if (typeof module !== "undefined" && module.exports) { var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); } - else { - // browser doesn't support MutationObserver - // TODO: Figure out an alternative solution for this rare use case in older browsers - // See example in buildplayer.js > useSvg() - } if (typeof this.seekBar !== 'undefined') { this.addSeekbarListeners(); - } - else { + } else { // wait a bit and try again // TODO: Should set this up to keep trying repeatedly. // Seekbar listeners are critical. @@ -14763,20 +13318,20 @@ if (typeof module !== "undefined" && module.exports) { }); // handle clicks (left only) anywhere on the page. If any popups are open, close them. - $(document).on('click',function(e) { + $('body').on('click', function(e) { if (e.button !== 0) { // not a left click return false; - } - if ($('.able-popup:visible').length || $('.able-volume-popup:visible')) { + } + if ($('.able-popup:visible').length || $('.able-volume-slider:visible').length ) { // at least one popup is visible thisObj.closePopups(); } - if (e.target.tagName === 'VIDEO') { + if (e.target.tagName === 'VIDEO') { // user clicked the video (not an element that sits on top of the video) - // handle this as a play/pause toggle click - thisObj.clickedPlay = true; - } + // handle this as a play/pause toggle click + thisObj.clickedPlay = true; + } }); // handle mouse movement over player; make controls visible again if hidden @@ -14793,8 +13348,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); @@ -14807,7 +13361,7 @@ if (typeof module !== "undefined" && module.exports) { }); // if user presses a key from anywhere on the page, show player controls - $(document).keydown(function(e) { + $(document).on( 'keydown', function(e) { if (thisObj.controlsHidden) { thisObj.fadeControls('in'); thisObj.controlsHidden = false; @@ -14819,8 +13373,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // controls are visible // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { @@ -14835,8 +13388,8 @@ if (typeof module !== "undefined" && module.exports) { }); // handle local keydown events if this isn't the only player on the page; - // otherwise these are dispatched by global handler (see ableplayer-base,js) - this.$ableDiv.keydown(function (e) { + // otherwise these are dispatched by global handler (see ableplayer-base.js) + this.$ableDiv.on( 'keydown', function (e) { if (AblePlayer.nextIndex > 1) { thisObj.onPlayerKeyPress(e); } @@ -14861,7 +13414,7 @@ if (typeof module !== "undefined" && module.exports) { // handle clicks on playlist items if (this.$playlist) { - this.$playlist.click(function(e) { + this.$playlist.on( 'click', function(e) { if (!thisObj.userClickedPlaylist) { // stopgap in case multiple clicks are fired on the same playlist item thisObj.userClickedPlaylist = true; // will be set to false after new src is loaded & canplaythrough is triggered @@ -14872,18 +13425,16 @@ if (typeof module !== "undefined" && module.exports) { } // Also play/pause when clicking on the media. - this.$media.click(function () { + this.$media.on( 'click', function () { thisObj.handlePlay(); }); // add listeners for media events if (this.player === 'html5') { this.addHtml5MediaListeners(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.addVimeoListeners(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // Youtube doesn't give us time update events, so we just periodically generate them ourselves setInterval(function () { thisObj.onMediaUpdateTime(); @@ -14893,7 +13444,6 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); (function ($) { - AblePlayer.prototype.initDragDrop = function ( which ) { // supported values of which: 'sign', 'transcript' @@ -14901,13 +13451,13 @@ if (typeof module !== "undefined" && module.exports) { // NOTE: "Drag and Drop" for Able Player is a metaphor only!!! // HTML5 Drag & Drop API enables moving elements to new locations in the DOM // Thats not our purpose; we're simply changing the visible position on-screen - // Therefore, the drag & drop interface was overhauled in v2.3.41 to simple + // Therefore, the drag & drop interface was overhauled in v2.3.41 to simply // use mouse (and keyboard) events to change CSS positioning properties // There are nevertheless lessons to be learned from Drag & Drop about accessibility: // http://dev.opera.com/articles/accessible-drag-and-drop/ - var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, + var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, i, x1, y1, x2, y2, $resizeLine, resizeZIndex; thisObj = this; @@ -14916,71 +13466,77 @@ if (typeof module !== "undefined" && module.exports) { $window = this.$transcriptArea; windowName = 'transcript-window'; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + $toolbar.attr( 'aria-label', this.translate( 'transcriptControls', 'Transcript Window Controls' ) ); + } else if (which === 'sign') { $window = this.$signWindow; windowName = 'sign-window'; $toolbar = this.$signToolbar; + $toolbar.attr( 'aria-label', this.translate( 'signControls', 'Sign Language Window Controls' ) ); } // add class to trigger change in cursor on hover $toolbar.addClass('able-draggable'); + $toolbar.attr( 'role', 'application' ); + $dragHandle = $('<div>',{ + 'class': 'able-drag-handle' + }); + + $dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'); // add resize handle selector to bottom right corner $resizeHandle = $('<div>',{ 'class': 'able-resizable' }); - // fill it with three parallel diagonal lines + // fill it with three parallel diagonal lines $resizeSvg = $('<svg>').attr({ 'width': '100%', 'height': '100%', 'viewBox': '0 0 100 100', 'preserveAspectRatio': 'none' }); - for (i=1; i<=3; i++) { - if (i === 1) { - x1 = '100'; - y1 = '0'; - x2 = '0'; - y2 = '100'; - } - else if (i === 2) { - x1 = '33'; - y1 = '100'; - x2 = '100'; - y2 = '33'; - } - else if (i === 3) { - x1 = '67'; - y1 = '100'; - x2 = '100'; - y2 = '67'; - } - $resizeLine = $('<line>').attr({ + for (i=1; i<=3; i++) { + if (i === 1) { + x1 = '100'; + y1 = '0'; + x2 = '0'; + y2 = '100'; + } else if (i === 2) { + x1 = '33'; + y1 = '100'; + x2 = '100'; + y2 = '33'; + } else if (i === 3) { + x1 = '67'; + y1 = '100'; + x2 = '100'; + y2 = '67'; + } + $resizeLine = $('<line>').attr({ 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2, - 'vector-effect': 'non-scaling-stroke' + 'vector-effect': 'non-scaling-stroke' }) - $resizeSvg.append($resizeLine); + $resizeSvg.append($resizeLine); } - $resizeHandle.html($resizeSvg); + $resizeHandle.html($resizeSvg); // assign z-index that's slightly higher than parent window resizeZIndex = parseInt($window.css('z-index')) + 100; $resizeHandle.css('z-index',resizeZIndex); $window.append($resizeHandle); + $toolbar.append($dragHandle); // Final step: Need to refresh the DOM in order for browser to process & display the SVG $resizeHandle.html($resizeHandle.html()); // add event listener to toolbar to start and end drag // other event listeners will be added when drag starts - $toolbar.on('mousedown mouseup touchstart touchend', function(e) { + $dragHandle.on('mousedown mouseup touchstart touchend', function(e) { e.stopPropagation(); - if (e.type === 'mousedown' || e.type === 'touchstart') { + if (e.type === 'mousedown' || e.type === 'touchstart' ) { if (!thisObj.windowMenuClickRegistered) { thisObj.windowMenuClickRegistered = true; thisObj.startMouseX = e.pageX; @@ -14988,8 +13544,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.dragDevice = 'mouse'; // ok to use this even if device is a touchpad thisObj.startDrag(which, $window); } - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.dragging && thisObj.dragDevice === 'mouse') { thisObj.endDrag(which); } @@ -15007,8 +13562,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.startMouseY = e.pageY; thisObj.startResize(which, $window); } - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.resizing) { thisObj.endResize(which); } @@ -15024,16 +13578,12 @@ if (typeof module !== "undefined" && module.exports) { } thisObj.finishingDrag = false; }); - this.addWindowMenu(which,$window,windowName); }; AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) { - var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg, - $buttonLabel, tooltipId, $tooltip, $popup, - label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip, - $optionList, menuBaseId, options, i, $optionItem, option, menuId; + var thisObj, $windowAlert, menuId, $newButton, tooltipId, $tooltip, $popup, menuId; thisObj = this; @@ -15046,50 +13596,18 @@ if (typeof module !== "undefined" && module.exports) { // this will prevent the click event from being triggered this.finishingDrag = false; - // create an alert div and add it to window - $windowAlert = $('<div role="alert"></div>'); - $windowAlert.addClass('able-alert'); - $windowAlert.hide(); - $windowAlert.appendTo(this.$activeWindow); - $windowAlert.css({ - top: $window.offset().top - }); - // add button to draggable window which triggers a popup menu - // for now, re-use preferences icon for this purpose menuId = this.mediaId + '-' + windowName + '-menu'; $newButton = $('<button>',{ 'type': 'button', 'tabindex': '0', - 'aria-label': this.tt.windowButtonLabel, 'aria-haspopup': 'true', 'aria-controls': menuId, 'aria-expanded': 'false', 'class': 'able-button-handler-preferences' }); - if (this.iconType === 'font') { - $buttonIcon = $('<span>',{ - 'class': 'icon-preferences', - 'aria-hidden': 'true' - }); - $newButton.append($buttonIcon); - } - else { - // use image - buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png'; - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - - // add the visibly-hidden label for screen readers that don't support aria-label on the button - $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(this.tt.windowButtonLabel); - $newButton.append($buttonLabel); + this.getIcon( $newButton, 'preferences' ); + this.setText( $newButton, this.translate( 'windowButtonLabel', 'Window options' ) ); // add a tooltip that displays aria-label on mouseenter or focus tooltipId = this.mediaId + '-' + windowName + '-tooltip'; @@ -15097,20 +13615,20 @@ if (typeof module !== "undefined" && module.exports) { 'class' : 'able-tooltip', 'id' : tooltipId }).hide(); + $newButton.on('mouseenter focus',function(e) { var label = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - var tooltipY = position.top - buttonHeight - 5; + var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label); + // get height of the tooltip + var tooltipHeight = tooltip.height(); + var tooltipY = ( tooltipHeight + 2 ) -1; var tooltipX = 0; var tooltipStyle = { - left: '', - right: tooltipX + 'px', + right: '', + left: tooltipX + 'px', top: tooltipY + 'px' }; - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle); + tooltip.css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); @@ -15121,20 +13639,17 @@ if (typeof module !== "undefined" && module.exports) { $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window' // define vars and assemble all the parts if (which === 'transcript') { - this.$transcriptAlert = $windowAlert; this.$transcriptPopupButton = $newButton; this.$transcriptPopup = $popup; this.$transcriptToolbar.prepend($windowAlert,$newButton,$tooltip,$popup); - } - else if (which === 'sign') { - this.$signAlert = $windowAlert; + } else if (which === 'sign') { this.$signPopupButton = $newButton; this.$signPopup = $popup; this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup); } // handle button click - $newButton.on('click mousedown keydown',function(e) { + $newButton.on('click keydown',function(e) { if (thisObj.focusNotClick) { return false; @@ -15145,6 +13660,7 @@ if (typeof module !== "undefined" && module.exports) { } e.stopPropagation(); if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { + console.log( 'firing' ); // don't set windowMenuClickRegistered yet; that happens in handler function thisObj.handleWindowButtonClick(which, e); } @@ -15156,30 +13672,23 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addResizeDialog = function (which, $window) { - var thisObj, $windowPopup, $windowButton, - widthId, heightId, startingWidth, startingHeight, aspectRatio, - $resizeForm, $resizeWrapper, - $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, - $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, - tempWidth, tempHeight, - $saveButton, $cancelButton, newWidth, newHeight, resizeDialog; + var thisObj, $windowPopup, $windowButton, widthId, heightId, + $resizeForm, $resizeWrapper, $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, + $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, $saveButton, $cancelButton, + newWidth, newHeight, resizeDialog; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } widthId = this.mediaId + '-resize-' + which + '-width'; heightId = this.mediaId + '-resize-' + which + '-height'; - startingWidth = $window.width(); - startingHeight = $window.height(); - aspectRatio = startingWidth / startingHeight; $resizeForm = $('<div></div>',{ 'class' : 'able-resize-form' @@ -15187,76 +13696,72 @@ if (typeof module !== "undefined" && module.exports) { // inner container for all content, will be assigned to modal div's aria-describedby $resizeWrapper = $('<div></div>'); + $resizeControls = $( '<div class="able-prefs-buttons"></div>' ); // width field $resizeWidthDiv = $('<div></div>'); $resizeWidthInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': widthId, - 'value': startingWidth + 'min': 0, + 'value': '', }); $resizeWidthLabel = $('<label>',{ 'for': widthId - }).text(this.tt.width); + }).text( this.translate( 'width', 'Width' ) ); // height field $resizeHeightDiv = $('<div></div>'); $resizeHeightInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': heightId, - 'value': startingHeight + 'min': 0, + 'value': '', }); $resizeHeightLabel = $('<label>',{ 'for': heightId - }).text(this.tt.height); - - if (which === 'sign') { - // make height a read-only field - // and calculate its value based on width to preserve aspect ratio - $resizeHeightInput.prop('readonly',true); - $resizeWidthInput.on('input',function() { - tempWidth = $(this).val(); - tempHeight = Math.round(tempWidth/aspectRatio, 0); - $resizeHeightInput.val(tempHeight); - }) - } + }).text( this.translate( 'height', 'Height' ) ); // Add save and cancel buttons. - $saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - $cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); $saveButton.on('click',function () { newWidth = $('#' + widthId).val(); newHeight = $('#' + heightId).val(); - if (newWidth !== startingWidth || newHeight !== startingHeight) { - thisObj.resizeObject(which,newWidth,newHeight); - thisObj.updateCookie(which); - } + thisObj.resizeObject(which,newWidth,newHeight); + thisObj.updatePreferences(which); + resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); $cancelButton.on('click',function () { resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); // Now assemble all the parts $resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput); $resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput); $resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv); - $resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton); + $resizeControls.append($saveButton,$cancelButton); + $resizeForm.append($resizeWrapper,$resizeControls); // must be appended to the BODY! // otherwise when aria-hidden="true" is applied to all background content // that will include an ancestor of the dialog, // which will render the dialog unreadable by screen readers $('body').append($resizeForm); - resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'dialog', true, this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em'); + resizeDialog = new AccessibleDialog( + $resizeForm, + $windowButton, + this.translate( 'windowResizeHeading', 'Resize Window' ), + this.translate( 'closeButtonLabel', 'Close' ), + ); if (which === 'transcript') { this.transcriptResizeDialog = resizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.signResizeDialog = resizeDialog; } }; @@ -15266,7 +13771,6 @@ if (typeof module !== "undefined" && module.exports) { var thisObj, $windowPopup, $windowButton, $toolbar, popupTop; thisObj = this; - if (this.focusNotClick) { // transcript or sign window has just opened, // and focus moved to the window button @@ -15278,73 +13782,62 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; $toolbar = this.$signToolbar; } - if (e.type === 'keydown') { // user pressed a key - if (e.which === 32 || e.which === 13) { - // this was Enter or space + if (e.key === ' ' || e.key === 'Enter') { this.windowMenuClickRegistered = true; - } - else if (e.which === 27) { // escape + } else if (e.key === 'Escape') { if ($windowPopup.is(':visible')) { // close the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - } - else { + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + // also return focus to window options button + $windowButton.trigger('focus'); + } else { // popup isn't open. Close the window if (which === 'sign') { this.handleSignToggle(); - } - else if (which === 'transcript') { + } else if (which === 'transcript') { this.handleTranscriptToggle(); } } - } - else { + } else { return false; } - } - else { + } else { // this was a mouse event this.windowMenuClickRegistered = true; } - if ($windowPopup.is(':visible')) { - $windowPopup.hide(200,'',function() { - thisObj.windowMenuClickRegistered = false; // reset - }); + if ( $windowPopup.is(':visible') ) { + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; // reset $windowPopup.find('li').removeClass('able-focus'); - $windowButton.attr('aria-expanded','false').focus(); - } - else { + $windowButton.attr('aria-expanded','false').trigger('focus'); + } else { // first, be sure window is on top this.updateZIndex(which); - popupTop = $windowButton.position().top + $windowButton.outerHeight(); + popupTop = $toolbar.outerHeight() - 1; $windowPopup.css('top', popupTop); - $windowPopup.show(200,'',function() { - $windowButton.attr('aria-expanded','true'); - $(this).find('li').first().focus().addClass('able-focus'); - thisObj.windowMenuClickRegistered = false; // reset - }); + $windowPopup.show(); + $windowButton.attr('aria-expanded','true'); + $(this).find('li').first().trigger('focus').addClass('able-focus'); + thisObj.windowMenuClickRegistered = false; // reset } }; AblePlayer.prototype.handleMenuChoice = function (which, choice, e) { - var thisObj, $window, $windowPopup, $windowButton, resizeDialog, width, height, $thisRadio; + var thisObj, $window, $windowPopup, $windowButton, resizeDialog, startingWidth, startingHeight, + aspectRatio, tempWidth, tempHeight; thisObj = this; if (which === 'transcript') { @@ -15352,30 +13845,42 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; resizeDialog = this.transcriptResizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { $window = this.$signWindow; $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; resizeDialog = this.signResizeDialog; + + startingWidth = $window.outerWidth(); + startingHeight = $window.outerHeight(); + aspectRatio = startingWidth / startingHeight; + // make height a read-only field + // and calculate its value based on width to preserve aspect ratio + widthId = this.mediaId + '-resize-' + which + '-width'; + heightId = this.mediaId + '-resize-' + which + '-height'; + $( '#' + heightId ).prop('readonly',true); + $( '#' + widthId ).on('input',function() { + tempWidth = $(this).val(); + tempHeight = Math.round(tempWidth/aspectRatio); + $( '#' + heightId ).val(tempHeight); + }); } this.$activeWindow = $window; if (e.type === 'keydown') { - if (e.which === 27) { // escape + if (e.key === 'Escape') { // escape // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - // also return focus to window options button - $windowButton.focus(); - }); + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + // also return focus to window options button + $windowButton.trigger('focus'); + return false; - } - else { + } else { // all other keys will be handled by upstream functions if (choice !== 'close') { this.$activeWindow = $window; @@ -15385,58 +13890,48 @@ if (typeof module !== "undefined" && module.exports) { } // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - }); + $windowPopup.hide(); + // also reset the boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + if (choice !== 'close') { - $windowButton.focus(); + $windowButton.trigger('focus'); } if (choice === 'move') { - // temporarily add role="application" to activeWindow // otherwise, screen readers incercept arrow keys and moving window will not work this.$activeWindow.attr('role','application'); if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); + this.showAlert( this.translate( 'windowMoveAlert', 'Drag or use arrow keys to move the window; Enter to stop' ),which); if (which === 'transcript') { this.showedTranscriptAlert = true; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.showedSignAlert = true; } } - if (e.type === 'keydown') { - this.dragDevice = 'keyboard'; - } - else { - this.dragDevice = 'mouse'; - } + this.dragDevice = (e.type === 'keydown') ? 'keyboard' : 'mouse'; this.startDrag(which, $window); - $windowPopup.hide().parent().focus(); - } - else if (choice == 'resize') { + $windowPopup.hide().parent().attr( 'tabindex', '-1' ).trigger('focus'); + } else if (choice == 'resize') { // resize through the menu uses a form, not drag var resizeFields = resizeDialog.getInputs(); if (resizeFields) { // reset width and height values in form - resizeFields[0].value = $window.width(); - resizeFields[1].value = $window.height(); + resizeFields[0].value = Math.round( $window.outerWidth() ); + resizeFields[1].value = Math.round( $window.outerHeight() ); } resizeDialog.show(); - } - else if (choice == 'close') { + } else if (choice == 'close') { // close window, place focus on corresponding button on controller bar if (which === 'transcript') { - this.closingTranscript = true; // stopgrap to prevent double-firing of keypress + this.closingTranscript = true; // stopgap to prevent double-firing of keypress this.handleTranscriptToggle(); - } - else if (which === 'sign') { - this.closingSign = true; // stopgrap to prevent double-firing of keypress + } else if (which === 'sign') { + this.closingSign = true; // stopgap to prevent double-firing of keypress this.handleSignToggle(); } } @@ -15444,7 +13939,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.startDrag = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newX, newY; + var thisObj, $windowPopup, startPos, newX, newY; thisObj = this; @@ -15455,21 +13950,10 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; } - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - // if window's popup menu is open, close it if ($windowPopup.is(':visible')) { $windowPopup.hide(); @@ -15489,8 +13973,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyY = this.dragStartY; // add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd() this.startingDrag = true; - } - else { + } else { this.dragDevice = 'mouse'; // get offset between mouse position and top left corner of draggable element this.dragOffsetX = this.startMouseX - this.dragStartX; @@ -15502,8 +13985,9 @@ if (typeof module !== "undefined" && module.exports) { 'position': 'absolute', 'top': this.dragStartY + 'px', 'left': this.dragStartX + 'px' - }).focus(); + }).trigger('focus'); + var dragDevice = this.dragDevice; // add device-specific event listeners if (this.dragDevice === 'mouse') { // might also be a touchpad $(document).on('mousemove touchmove',function(e) { @@ -15514,8 +13998,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resetDraggedObject( newX, newY ); } }); - } - else if (this.dragDevice === 'keyboard') { + } else if (this.dragDevice === 'keyboard') { this.$activeWindow.on('keydown',function(e) { if (thisObj.dragging) { thisObj.dragKeys(which, e); @@ -15525,40 +14008,45 @@ if (typeof module !== "undefined" && module.exports) { return false; }; + /** + * Handle moving the transcript or sign window from the keyboard. + * + * @param {string} which 'transcript' or 'sign' window. + * @param {Event} e Triggered event. + */ AblePlayer.prototype.dragKeys = function(which, e) { var key, keySpeed; - var thisObj = this; - // stopgap to prevent firing on initial Enter or space // that selected "Move" from menu if (this.startingDrag) { this.startingDrag = false; return false; } - key = e.which; + key = e.key; keySpeed = 10; // pixels per keypress event switch (key) { - case 37: // left - case 63234: + case 'ArrowLeft': // left this.dragKeyX -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveLeft', 'Window moved left' ) ); break; - case 38: // up - case 63232: + case 'ArrowUp': // up this.dragKeyY -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveUp', 'Window moved up' ) ); break; - case 39: // right - case 63235: + case 'ArrowRight': // right this.dragKeyX += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveRight', 'Window moved right' ) ); break; - case 40: // down - case 63233: + case 'ArrowDown': // down this.dragKeyY += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveDown', 'Window moved down' ) ); break; - case 13: // enter - case 27: // escape + case 'Enter': // enter + case 'Escape': // escape + this.$srAlertBox.text( this.translate( 'windowMoveStopped', 'Window move stopped' ) ); this.endDrag(which); return false; default: @@ -15572,6 +14060,9 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.resetDraggedObject = function ( x, y) { + setTimeout( () => { + this.$srAlertBox.text( '' ); + }, 2000 ); this.$activeWindow.css({ 'left': x + 'px', @@ -15591,7 +14082,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { // $activeWindow is the outer $transcriptArea - // but the inner able-transcript also needs to be resized proporitionally + // but the inner able-transcript also needs to be resized proportionally // (it's 50px less than its outer container) innerHeight = height - 50; this.$transcriptDiv.css('height', innerHeight + 'px'); @@ -15600,14 +14091,13 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.endDrag = function(which) { - var thisObj, $window, $windowPopup, $windowButton; + var thisObj, $windowPopup, $windowButton; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } @@ -15619,12 +14109,12 @@ if (typeof module !== "undefined" && module.exports) { this.$activeWindow = null; if (this.dragDevice === 'keyboard') { - $windowButton.focus(); + $windowButton.trigger('focus'); } this.dragging = false; // save final position of dragged element - this.updateCookie(which); + this.updatePreferences(which); // reset starting mouse positions this.startMouseX = undefined; @@ -15633,7 +14123,7 @@ if (typeof module !== "undefined" && module.exports) { // Boolean to stop stray events from firing this.windowMenuClickRegistered = false; this.finishingDrag = true; // will be reset after window click event - // finishingDrag should e reset after window click event, + // finishingDrag should be reset after window click event, // which is triggered automatically after mouseup // However, in case that's not reliable in some browsers // need to ensure this gets cancelled @@ -15642,45 +14132,19 @@ if (typeof module !== "undefined" && module.exports) { }, 100); }; - AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) { - - // return true if mouse is close to bottom right corner (resize target) - var tolerance, position, top, left, width, height, bottom, right; - - tolerance = 10; // number of pixels in both directions considered "close enough" - - // first, get position of element - position = $window.offset(); - top = position.top; - left = position.left; - width = $window.width(); - height = $window.height(); - bottom = top + height; - right = left + width; - if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) { - return true; - } - return false; - }; - AblePlayer.prototype.startResize = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight; + var thisObj, $windowPopup, newWidth, newHeight; thisObj = this; this.$activeWindow = $element; this.resizing = true; - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } + $windowPopup = (which === 'transcript') ? this.$transcriptPopup : this.$signPopup; // if window's popup menu is open, close it & place focus on button (???) if ($windowPopup.is(':visible')) { - $windowPopup.hide().parent().focus(); + $windowPopup.hide().parent().trigger('focus'); } // get starting width and height @@ -15688,7 +14152,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyX = this.dragStartX; this.dragKeyY = this.dragStartY; this.dragStartWidth = this.$activeWindow.width(); - this.dragStartHeight = this.$activeWindow.height(); + this.dragStartHeight = this.$activeWindow.outerHeight(); // add event listeners $(document).on('mousemove touchmove',function(e) { @@ -15699,30 +14163,30 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resizeObject( which, newWidth, newHeight ); } }); + return false; }; AblePlayer.prototype.endResize = function(which) { - var $window, $windowPopup, $windowButton; + var $windowPopup, $windowButton; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } $(document).off('mousemove mouseup touchmove touchup'); this.$activeWindow.off('keydown'); - $windowButton.show().focus(); + $windowButton.show().trigger('focus'); this.resizing = false; this.$activeWindow.removeClass('able-resize'); // save final width and height of dragged element - this.updateCookie(which); + this.updatePreferences(which); // Booleans for preventing stray events this.windowMenuClickRegistered = false; @@ -15736,28 +14200,37 @@ if (typeof module !== "undefined" && module.exports) { this.finishingDrag = false; }, 100); }; - })(jQuery); (function ($) { AblePlayer.prototype.initSignLanguage = function() { - - // Sign language is only currently supported in HTML5 player, not YouTube or Vimeo - if (this.player === 'html5') { + this.hasSignLanguage = false; + // Sign language is only currently supported in HTML5 player and YouTube. + var hasLocalSrc = ( this.$sources.first().attr('data-sign-src') !== undefined && this.$sources.first().attr('data-sign-src') !== "" ); + // YouTube src can either be on a `source` element or on the `video` element. + var hasRemoteSrc = ( this.$media.data('youtube-sign-src') !== undefined && this.$media.data('youtube-sign-src') !== "" ); + var hasRemoteSource = ( this.$sources.first().attr('data-youtube-sign-src') !== undefined && this.$sources.first().attr('data-youtube-sign-src') !== '' ); + if ( ! this.isIOS() && ( hasLocalSrc || hasRemoteSrc || hasRemoteSource ) && ( this.player === 'html5' || this.player === 'youtube' ) ) { // check to see if there's a sign language video accompanying this video // check only the first source // If sign language is provided, it must be provided for all sources - this.signFile = this.$sources.first().attr('data-sign-src'); - if (this.signFile) { + let ytSignSrc = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') ); + let signSrc = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') ); + let signVideo = DOMPurify.sanitize( this.$media.data('youtube-sign-src') ); + this.signFile = (hasLocalSrc ) ? signSrc : false; + if ( hasRemoteSrc ) { + this.signYoutubeId = signVideo; + } else if ( hasRemoteSource ) { + this.signYoutubeId = ytSignSrc; + } + if ( this.signFile || this.signYoutubeId ) { if (this.isIOS()) { - // IOS does not allow multiple videos to play simultaneously + // iOS does not allow multiple videos to play simultaneously // Therefore, sign language as rendered by Able Player unfortunately won't work - this.hasSignLanguage = false; if (this.debug) { - console.log('Sign language has been disabled due to IOS restrictions'); + console.log('Sign language has been disabled due to iOS restrictions'); } - } - else { + } else { if (this.debug) { console.log('This video has an accompanying sign language video: ' + this.signFile); } @@ -15765,73 +14238,179 @@ if (typeof module !== "undefined" && module.exports) { this.injectSignPlayerCode(); } } - else { - this.hasSignLanguage = false; + } + }; + + AblePlayer.prototype.injectSignPlayerCode = function() { + + // create and inject surrounding HTML structure + var thisObj, signVideoId, i, signSrc, srcType, $signSource; + + thisObj = this; + signVideoId = this.mediaId + '-sign'; + + if ( this.signFile || this.signYoutubeId ) { + if ( null !== this.$signDivLocation ) { + this.$signDivLocation.addClass( 'able-sign-window able-fixed' ); + this.$signWindow = this.$signDivLocation; + } else { + this.$signWindow = $('<div>',{ + 'class' : 'able-sign-window', + 'role': 'dialog', + 'aria-label': this.translate( 'sign', 'Sign language' ) + }); + this.$signToolbar = $('<div>',{ + 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' + }); + this.$signWindow.append(this.$signToolbar); + } + + this.$ableWrapper.append(this.$signWindow); + } + + if ( this.signFile ) { + this.$signVideo = $('<video>',{ + 'id' : signVideoId, + 'tabindex' : '-1', + 'muted' : true, + }); + this.signVideo = this.$signVideo[0]; + + if ( this.signFile ) { + $signSource = $('<source>',{ + 'src' : this.signFile, + 'type' : 'video/' + this.signFile.substr(-3) + }); + this.$signVideo.append($signSource); + } else { + // for each original <source>, add a <source> to the sign <video> + for (i=0; i < this.$sources.length; i++) { + signSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-sign-src') ); + srcType = this.$sources[i].getAttribute('type'); + if (signSrc) { + $signSource = $('<source>',{ + 'src' : signSrc, + 'type' : srcType + }); + this.$signVideo.append($signSource); + } else { + // source is missing a sign language version + // can't include sign language + this.hasSignLanguage = false; + return; + } + } + } + this.$signWindow.append( this.$signVideo ); + } else if ( this.signYoutubeId ) { + this.signYoutube = this.initYouTubeSignPlayer(); + } + + // make it draggable + if ( null === this.$signDivLocation ) { + this.initDragDrop('sign'); + } + + if (this.prefSign === 1) { + // sign window is on. Go ahead and position it and show it + if ( null === this.$signDivLocation ) { + this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); } - } - else { - this.hasSignLanguage = false; + } else { + this.$signWindow.hide(); } }; - AblePlayer.prototype.injectSignPlayerCode = function() { - - // create and inject surrounding HTML structure - var thisObj, signVideoId, signVideoWidth, i, signSrc, srcType, $signSource; + AblePlayer.prototype.initYouTubeSignPlayer = function () { + var thisObj, deferred, promise; thisObj = this; + deferred = new this.defer(); + promise = deferred.promise(); - signVideoWidth = this.getDefaultWidth('sign'); + this.youTubeSignPlayerReady = false; - signVideoId = this.mediaId + '-sign'; - this.$signVideo = $('<video>',{ - 'id' : signVideoId, - 'tabindex' : '-1' - }); - this.signVideo = this.$signVideo[0]; - // for each original <source>, add a <source> to the sign <video> - for (i=0; i < this.$sources.length; i++) { - signSrc = this.$sources[i].getAttribute('data-sign-src'); - srcType = this.$sources[i].getAttribute('type'); - if (signSrc) { - $signSource = $('<source>',{ - 'src' : signSrc, - 'type' : srcType + if (AblePlayer.youTubeIframeAPIReady) { + // Script already loaded and ready. + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + } else { + // Has another player already started loading the script? If so, abort... + if ( ! AblePlayer.loadingYouTubeIframeAPI ) { + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + console.log( 'YouTube API loaded' ); }); - this.$signVideo.append($signSource); - } - else { - // source is missing a sign language version - // can't include sign language - this.hasSignLanguage = false; - break; } + + // Otherwise, keeping waiting for script load event... + $('body').on('youTubeIframeAPIReady', function () { + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + }); } + return promise; + }; - this.$signWindow = $('<div>',{ - 'class' : 'able-sign-window', - 'role': 'dialog', - 'aria-label': this.tt.sign - }); - this.$signToolbar = $('<div>',{ - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' - }); + AblePlayer.prototype.finalizeYoutubeSignInit = function () { - this.$signWindow.append(this.$signToolbar, this.$signVideo); + // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - this.$ableWrapper.append(this.$signWindow); + deferred = new this.defer(); + promise = deferred.promise(); + thisObj = this; + containerId = this.mediaId + '_youtube_sign'; - // make it draggable - this.initDragDrop('sign'); + this.$signWindow.append($('<div>').attr('id', containerId)); + autoplay = (this.okToPlay) ? 1 : 0; - if (this.prefSign === 1) { - // sign window is on. Go ahead and position it and show it - this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); - } - else { - this.$signWindow.hide(); - } + // Documentation https://developers.google.com/youtube/player_parameters + this.youTubeSignPlayer = new YT.Player(containerId, { + videoId: this.getYouTubeId(this.signYoutubeId), + host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', + playerVars: { + autoplay: autoplay, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: 0, + controls: 0, // no controls, using our own + disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, + playsinline: this.playsInline, + rel: 0, // when video ends, show only related videos from same channel (1 shows any) + start: this.startTime + }, + events: { + onReady: function (player) { + player.target.mute(); + player.target.unloadModule( 'captions' ); + thisObj.youTubeSignPlayerReady = true; + + deferred.resolve(); + }, + onError: function (x) { + deferred.reject(); + }, + onStateChange: function (x) { + thisObj.getPlayerState().then(function() { + // no actions + }); + }, + onApiChange: function() { + // No actions + }, + onPlaybackQualityChange: function () { + // no actions + }, + } + }); + + return promise; }; })(jQuery); @@ -16819,30 +15398,19 @@ if (typeof module !== "undefined" && module.exports) { // return language name associated with lang code "key" // whichName is either "English" or "local" (i.e., native name) - var lang, code, subTag; + var lang, code, subTag; lang = isoLangs[key.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName; - } - else { - return lang.name; - } - } - else if (key.includes('-')) { + if (lang) { + return (whichName === 'local') ? lang.nativeName : lang.name; + } else if (key.includes('-')) { code = key.substring(0,2); - subTag = key.substring(3); - lang = isoLangs[code.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName + ' (' + subTag + ')'; - } - else { - return lang.name + ' (' + subTag + ')'; - } + subTag = key.substring(3); + lang = isoLangs[code.toLowerCase()]; + if (lang) { + return (whichName === 'local') ? lang.nativeName + ' (' + subTag + ')' : lang.name + ' (' + subTag + ')'; } } - // if all else has failed, use the key as the label + // if all else has failed, use the key as the label return key; }; @@ -16850,51 +15418,86 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.getSupportedLangs = function() { // returns an array of languages for which AblePlayer has translation tables - var langs = ['ca','cs','da','de','en','es','fr','he','id','it','ja','nb','nl','pt','pt-br','sv','tr','zh-tw']; + var langs = { + 'ca' : 'Catalan', + 'cs' : 'Czech', + 'da' : 'Danish', + 'de' : 'German', + 'en' : 'English', + 'es' : 'Spanish', + 'fr' : 'French', + 'he' : 'Hebrew', + 'id' : 'Indonesian', + 'it' : 'Italian', + 'ja' : 'Japanese', + 'ms' : 'Malay', + 'nb' : 'Norwegian Bokmål', + 'nl' : 'Dutch', + 'pl' : 'Polish', + 'pt' : 'Portuguese', + 'pt-br' : 'Brazilian Portuguese', + 'sv' : 'Swedish', + 'tr' : 'Turkish', + 'zh-tw' : 'Chinese (Taiwan)' + }; + return langs; }; + /** + * Fetch a translated string if it exists. + * + * @param {string} key JSON key to locate translated string. + * @param {string} fallback Default language if no translation found. + * @param {Array} args Ordered array of arguments to replace in string. + * @returns + / + AblePlayer.prototype.translate = function( key, fallback, args = Array() ) { + let translation = ''; + if ( this.tt[ key ] ) { + translation = this.tt[ key ]; + } else { + translation = fallback; + } + if ( args.length > 0 ) { + args.forEach( ( val, index ) => { + let ref = index + 1; + translation = translation.replace( '%' + ref, val ); + }); + } + + return translation; + } + AblePlayer.prototype.getTranslationText = function() { // determine language, then get labels and prompts from corresponding translation var - - var deferred, thisObj, supportedLangs, docLang, msg, translationFile, collapsedLang, i, - similarLangFound; - deferred = $.Deferred(); + var deferred, thisObj, supportedLangs, docLang, translationFile, i, similarLangFound; + deferred = new this.defer(); thisObj = this; supportedLangs = this.getSupportedLangs(); // returns an array if (this.lang) { // a data-lang attribute is included on the media element - if ($.inArray(this.lang,supportedLangs) === -1) { + if ( Object.hasOwn( supportedLangs,this.lang ) ) { // the specified language is not supported - if (this.lang.indexOf('-') == 2) { + if ( this.lang.indexOf('-') == 2 ) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(this.lang.substring(0,2),supportedLangs) !== -1) { - // parent lang is supported. Use that. - this.lang = this.lang.substring(0,2); - } - else { - // the parent language is not supported either - // unable to use the specified language - this.lang = null; - } - } - else { + // if parent lang is supported. Use that, else null. + this.lang = ( Object.hasOwn(supportedLangs,this.lang.substring(0,2)) !== -1 ) ? this.lang.substring(0,2) : null; + } else { // this is not a localized language. - // but maybe there's a similar localized language supported - // that has the same parent? - similarLangFound = false; - i = 0; - while (i < supportedLangs.length) { - if (supportedLangs[i].substring(0,2) == this.lang) { - this.lang = supportedLangs[i]; - similarLangFound = true; + // but maybe there's a similar localized language supported + // that has the same parent? + similarLangFound = false; + for ( const [key,value] of Object.entries(supportedLangs) ) { + if ( key.substring(0,2) == this.lang ) { + this.lang = supportedLangs[i]; + similarLangFound = true; } - i++; } - if (!similarLangFound) { + if ( !similarLangFound ) { // language requested via data-lang is not supported this.lang = null; } @@ -16906,24 +15509,21 @@ if (typeof module !== "undefined" && module.exports) { // try the language of the web page, if specified if ($('body').attr('lang')) { docLang = $('body').attr('lang').toLowerCase(); - } - else if ($('html').attr('lang')) { + } else if ($('html').attr('lang')) { docLang = $('html').attr('lang').toLowerCase(); - } - else { + } else { docLang = null; } if (docLang) { - if ($.inArray(docLang,supportedLangs) !== -1) { + if ( Object.hasOwn( supportedLangs,docLang ) ) { // the document language is supported this.lang = docLang; - } - else { + } else { // the document language is not supported if (docLang.indexOf('-') == 2) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(docLang.substring(0,2),supportedLangs) !== -1) { + if ( Object.hasOwn(supportedLangs,docLang.substring(0,2)) ) { // the parent language is supported. use that. this.lang = docLang.substring(0,2); } @@ -16941,248 +15541,70 @@ if (typeof module !== "undefined" && module.exports) { if (!this.searchLang) { this.searchLang = this.lang; } - translationFile = this.rootPath + 'translations/' + this.lang + '.js'; - $.getJSON(translationFile, function(data) { - // success! - thisObj.tt = data; - deferred.resolve(); - }) - .fail(function() { - console.log( "Critical Error: Unable to load translation file:",translationFile); - thisObj.provideFallback(); - deferred.fail(); - }) + translationFile = this.rootPath + 'translations/' + this.lang + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + console.log( "Error: Translation files should be updated to JSON." + error,translationFile); + translationFile = thisObj.rootPath + 'translations/' + thisObj.lang + '.js'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + console.log( "Error: Unable to load translation file:", translationFile); + thisObj.tt = {}; + thisObj.translationFiles = false; + deferred.resolve(); + }); + }); return deferred.promise(); }; AblePlayer.prototype.getSampleDescriptionText = function() { + if ( ! this.translationFiles ) { + this.sampleText = []; + let translation = { 'lang':'en', 'text': this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) }; + this.sampleText.push(translation); + } else { + // Create an array of sample description text in all languages + // This needs to be readily available for testing different voices + // in the Description Preferences dialog + var thisObj, supportedLangs, thisLang, translationFile, thisText, translation; + + supportedLangs = this.getSupportedLangs(); + thisObj = this; - // Create an array of sample description text in all languages - // This needs to be readily available for testing different voices - // in the Description Preferences dialog - var thisObj, supportedLangs, i, thisLang, translationFile, thisText, translation; - - supportedLangs = this.getSupportedLangs(); - - thisObj = this; - - this.sampleText = []; - for (i=0; i < supportedLangs.length; i++) { - translationFile = this.rootPath + 'translations/' + supportedLangs[i] + '.js'; - $.getJSON(translationFile, thisLang, (function(thisLang) { - return function(data) { - thisText = data.sampleDescriptionText; - translation = {'lang':thisLang, 'text': thisText}; - thisObj.sampleText.push(translation); - }; - }(supportedLangs[i])) // pass lang to callback function - ); + this.sampleText = []; + for ( const [key,value] of Object.entries(supportedLangs) ) { + translationFile = this.rootPath + 'translations/' + key + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisText = data.sampleDescriptionText; + translation = {'lang':thisLang, 'text': thisText}; + thisObj.sampleText.push(translation); + }); + } } }; })(jQuery); -(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); - -/! Copyright (c) 2014 - Paul Tavares - purtuga - @paul_tavares - MIT License */ -;(function($){ - - /** - * Delays the execution of a function until an expression returns true. - * The expression is checked every 100 milliseconds for as many tries - * as defined in in the attempts option - * - * @param {Object} options - * @param {Function} options.when - * Function to execute on every interval. - * Must return true (boolean) in order for - * options.do to be executed. - * @param {Function} [options.exec] - * Function to be executed once options.when() - * returns true. - * @param {Interger} [options.interval=100] - * How long to wait in-between tries. - * @param {Interger} [options.attempts=100] - * How many tries to use before its considered - * a failure. - * @param {Interger} [options.delayed=0] - * Number of miliseconds to wait before execution - is started. Default is imediately. - * - * @return {jQuery.Promise} - * - * @example - * - * $.doWhen({ - * when: function(){ - * return false; - * }, - * exec: function(){ - * alert("never called given false response on when param!"); - * } - * }) - * .fail(function(){ - * alert('ALERT: FAILED CONDITION'); - * }) - * .then(function(){ - * alert("resolved."); - * }); - * - / - $.doWhen = function(options) { - - return $.Deferred(function(dfd){ - - var opt = $.extend({}, { - when: null, - exec: function(){}, - interval: 100, - attempts: 100, - delayed: 0 - }, - options, - { - checkId: null - }), - startChecking = function(){ - - // Check condition now and if true, then resolve object - if (opt.when() === true) { - - opt.exec.call(dfd.promise()); - dfd.resolve(); - return; - - } - - // apply minimal UI and hide the overlay - opt.checkId = setInterval(function(){ - - if (opt.attempts === 0) { - - clearInterval(opt.checkId); - dfd.reject(); - - } else { - - --opt.attempts; - - if (opt.when() === true) { - - opt.attempts = 0; - clearInterval(opt.checkId); - opt.exec.call(dfd.promise()); - dfd.resolve(); - - } - - } - - }, opt.interval); - - }; - - if (opt.delayed > 0) { - - setTimeout(startChecking, Number(opt.delayed)); - - } else { - - startChecking(); - - } - - }).promise(); - - }; - -})(jQuery); / 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 @@ -17191,24 +15613,14 @@ if (typeof module !== "undefined" && module.exports) { (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; + var thisObj, $heading, $instructions, $p1, $p2, $ul, $li1, $li2, $li3, + $fieldset, $legend, i, $radioDiv, radioId, $label, $radio, $saveButton, $savedTable; thisObj = this; - if ($('#able-vts').length) { - // Page includes a container for a VTS instance - + if ( null !== document.getElementById( 'able-vts' ) ) { // Are they qualifying tracks? if (this.vtsTracks.length) { - // Yes - there are! - // Build an array of unique languages this.langs = []; this.getAllLangs(this.vtsTracks); @@ -17217,7 +15629,8 @@ if (typeof module !== "undefined" && module.exports) { this.vtsLang = this.lang; // Inject a heading - $heading = $('<h2>').text('Video Transcript Sorter'); // TODO: Localize; intelligently assign proper heading level + let heading = this.translate( 'vtsHeading', 'Video Transcript Sorter' ); + $heading = $('<h2>').text( heading ); // TODO: intelligently assign proper heading level $('#able-vts').append($heading); // Inject an empty div for writing messages @@ -17232,20 +15645,21 @@ if (typeof module !== "undefined" && module.exports) { $instructions = $('<div>',{ 'id': 'able-vts-instructions' }); - $p1 = $('<p>').text('Use the Video Transcript Sorter to perform any of the following tasks:'); + $p1 = $('<p>').text( this.translate( 'vtsInstructions1', 'Use the Video Transcript Sorter to modify text tracks:' ) ); $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.'); + $li1 = $('<li>').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 = $('<li>').text( this.translate( 'vtsInstructions3', 'Modify content or start/end times (all are directly editable within the table).' ) ); + $li3 = $('<li>').text( this.translate( 'vtsInstructions4', 'Add new content, such as chapters or descriptions.' ) ); + $p2 = $('<p>').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 = $('<fieldset>'); - $legend = $('<legend>').text('Select a language'); // TODO: Localize this - $fieldset.append($legend) + $legend = $('<legend>').text( this.translate( 'vtsSelectLanguage', 'Select a language' ) ); + $fieldset.append($legend); + $fieldWrapper = $( '<div class="vts-lang-selector"></div>' ); for (i in this.langs) { radioId = 'vts-lang-radio-' + this.langs[i]; $radioDiv = $('<div>',{ @@ -17269,29 +15683,29 @@ if (typeof module !== "undefined" && module.exports) { $label = $('<label>', { 'for': radioId // Two options for label: - // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; + // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; // TODO: if using this be sure to add lang attr to <div> (see above) }).text(this.getLanguageName(this.langs[i])); $radioDiv.append($radio,$label); - $fieldset.append($radioDiv); + $fieldWrapper.append($radioDiv); } + $fieldset.append( $fieldWrapper ); $('#able-vts').append($fieldset); - - // Inject a 'Save Changes' button + let vtsSave = this.translate( 'vtsSave', 'Generate new .vtt content' ); + // Inject a button to generate new files. $saveButton = $('<button>',{ 'type': 'button', 'id': 'able-vts-save', 'value': 'save' - }).text('Save Changes'); // TODO: Localize this + }).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, i, closestKind; + var kindOptions, beforeEditing, editedCell, editedContent, i; kindOptions = ['captions','chapters','descriptions','subtitles']; $('td[contenteditable="true"]').on('focus',function() { beforeEditing = $(this).text(); @@ -17306,20 +15720,16 @@ if (typeof module !== "undefined" && module.exports) { // assume they correctly typed the first character if (editedContent.substring(0,1) === 's') { $(this).text('subtitles'); - } - else if (editedContent.substring(0,1) === 'd') { + } else if (editedContent.substring(0,1) === 'd') { $(this).text('descriptions'); - } - else if (editedContent.substring(0,2) === 'ch') { + } else if (editedContent.substring(0,2) === 'ch') { $(this).text('chapters'); - } - else { + } else { // whatever else they types, assume 'captions' $(this).text('captions'); } } - } - else if (editedCell === 2 || editedCell === 3) { + } else if (editedCell === 2 || editedCell === 3) { // start or end time // ensure proper formatting (with 3 decimal places) $(this).text(thisObj.formatTimestamp(editedContent)); @@ -17331,30 +15741,27 @@ if (typeof module !== "undefined" && module.exports) { 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 + $(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 { + } else { // cancel saving, and restore the table using edited content - $(this).attr('value','save').text('Save Changes'); // TODO: Localize this + $(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('Cancelling saving. Any edits you made have been restored in the VTS table.'); // TODO: Localize this + thisObj.showVtsAlert( thisObj.translate( 'vtsCancel', 'Cancelling saving. Any edits you made have been restored in the VTS table.' ) ); } }); } @@ -17363,10 +15770,8 @@ if (typeof module !== "undefined" && module.exports) { 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) - - // Called from tracks.js + // TODO: Add support for trackDesc + // (to destinguish between tracks for the decribed vs non-described versions) var srcFile, vtsCues; srcFile = this.getFilenameFromPath(src); @@ -17384,15 +15789,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getFilenameFromPath = function(path) { var lastSlash; - lastSlash = path.lastIndexOf('/'); - if (lastSlash === -1) { - // there are no slashes in path. - return path; - } - else { - return path.substring(lastSlash+1); - } + // fix slashes. + return (lastSlash === -1) ? path : path.substring(lastSlash+1); }; AblePlayer.prototype.getFilenameFromTracks = function(kind,lang) { @@ -17430,13 +15829,11 @@ if (typeof module !== "undefined" && module.exports) { if (content.length > 0) { // add back the EOL between rows of content content += "\n" + nextRow; - } - else { + } else { // this is the first row of content. No need for an EOL content += nextRow; } - } - else { + } else { blankRow = true; } j++; @@ -17448,8 +15845,7 @@ if (typeof module !== "undefined" && module.exports) { }); i = j; //skip ahead } - } - else { + } else { i++; } } @@ -17459,12 +15855,7 @@ if (typeof module !== "undefined" && module.exports) { 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; - } + return (/^[0-9:,.]$/.test(timestamp)) ? true : false; }; AblePlayer.prototype.formatTimestamp = function(timestamp) { @@ -17486,8 +15877,7 @@ if (typeof module !== "undefined" && module.exports) { if (lastPart.length > 3) { // chop off any extra digits lastPart = lastPart.substring(0,3); - } - else if (lastPart.length < 3) { + } else if (lastPart.length < 3) { // add trailing zeros while (lastPart.length < 3) { lastPart += '0'; @@ -17501,7 +15891,7 @@ if (typeof module !== "undefined" && module.exports) { // 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; + var $table, $thead, headers, i, $tr, $th, $td, rows, rowNum, rowId; if (action === 'update') { // remove existing table @@ -17512,10 +15902,16 @@ if (typeof module !== "undefined" && module.exports) { $table = $('<table>',{ 'lang': lang }); - $tr = $('<tr>',{ - 'lang': 'en' // TEMP, until header row is localized - }); - headers = ['Row #','Kind','Start','End','Content','Actions']; // TODO: Localize this + $thead = $( '<thead>' ); + $tr = $( '<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 = $('<th>', { 'scope': 'col' @@ -17525,7 +15921,8 @@ if (typeof module !== "undefined" && module.exports) { } $tr.append($th); } - $table.append($tr); + $thead.append($tr); + $table.append($thead); // Get all rows (sorted by start time), and inject them into table rows = this.getAllRows(lang); @@ -17621,8 +16018,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'down') { + } else if (button === 'down') { if (rowNum < numRows) { $button = $('<button>',{ 'id': 'able-vts-button-down-' + rowNum, @@ -17654,8 +16050,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'insert') { + } else if (button === 'insert') { // Add Insert button to all rows $button = $('<button>',{ 'id': 'able-vts-button-insert-' + rowNum, @@ -17689,8 +16084,7 @@ if (typeof module !== "undefined" && module.exports) { // 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') { + } else if (button === 'delete') { // Add Delete button to all rows $button = $('<button>',{ 'id': 'able-vts-button-delete-' + rowNum, @@ -17756,14 +16150,12 @@ if (typeof module !== "undefined" && module.exports) { 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; + var credit + = 'Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a>' + + ' from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a>' + + ' are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a>' + ; + return '<div id="able-vts-icon-credit">' + credit + '</div>'; }; AblePlayer.prototype.getAllLangs = function(tracks) { @@ -17821,16 +16213,13 @@ if (typeof module !== "undefined" && module.exports) { if (action == 'up') { // move the row up this.moveRow(rowNum,'up'); - } - else if (action == 'down') { + } else if (action == 'down') { // move the row down this.moveRow(rowNum,'down'); - } - else if (action == 'insert') { + } else if (action == 'insert') { // insert a row below this.insertRow(rowNum); - } - else if (action == 'delete') { + } else if (action == 'delete') { // delete the row this.deleteRow(rowNum); } @@ -17839,9 +16228,8 @@ if (typeof module !== "undefined" && module.exports) { 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; + 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'); @@ -17923,10 +16311,11 @@ if (typeof module !== "undefined" && module.exports) { this.adjustTimes(newRowNum); // Announce the insertion - this.showVtsAlert('A new row ' + newRowNum + ' has been inserted'); // TODO: Localize this + let newAlert = this.translate( 'vtsNewRow', 'A new row %1 has been inserted.', [ newRowNum ] ); + this.showVtsAlert( newAlert ); // Place focus in new select field - $select.focus(); + $select.trigger('focus'); }; @@ -17949,14 +16338,15 @@ if (typeof module !== "undefined" && module.exports) { } // Announce the deletion - this.showVtsAlert('Row ' + rowNum + ' has been deleted'); // TODO: Localize this + let newAlert = this.translate( 'vtsDeletedRow', 'Row %1 has been deleted.', [ rowNum ] ); + this.showVtsAlert( newAlert ); }; AblePlayer.prototype.moveRow = function(rowNum,direction) { // swap two rows - var $rows, $thisRow, otherRowNum, $otherRow, newTimes, msg; + var $rows, $thisRow, otherRowNum, $otherRow, msg; $rows = $('#able-vts table').find('tr'); $thisRow = $('#able-vts table').find('tr').eq(rowNum); @@ -17964,8 +16354,7 @@ if (typeof module !== "undefined" && module.exports) { otherRowNum = parseInt(rowNum) - 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.before($thisRow); - } - else if (direction == 'down') { + } else if (direction == 'down') { otherRowNum = parseInt(rowNum) + 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.after($thisRow); @@ -17981,9 +16370,8 @@ if (typeof module !== "undefined" && module.exports) { // 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; + // Announce the move + msg = this.translate( 'vtsMovedRow', 'Row %1 has been moved %2 and is now Row %3.', [ rowNum, direction, otherRowNum ] ); this.showVtsAlert(msg); }; @@ -18020,16 +16408,10 @@ if (typeof module !== "undefined" && module.exports) { // 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'; - } + // 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()); @@ -18038,19 +16420,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the first row prevRowNum = null; $prevRow = null; @@ -18064,19 +16439,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the last row nextRowNum = null; $nextRow = null; @@ -18097,62 +16465,43 @@ if (typeof module !== "undefined" && module.exports) { 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') { + // 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); - 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') { + // end the new row immediately before the next row starts + end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (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 { + } 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 { + } 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 { + } else { // start needs to be incremented start = (parseFloat(prevStart) + minDuration[prevKind]).toFixed(3); end = (parseFloat(start) + minDuration[kind]).toFixed(3); } - } - else { + } else { // this is the first row if (start < nextStart) { // No change is necessary - } - else { + } else { // nextStart needs to be incremented nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3); nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3); @@ -18195,9 +16544,8 @@ if (typeof module !== "undefined" && module.exports) { if (kindEnd == -1) { // no spaces found, "kind-" must be the only myclass return myclass.substring(kindStart); - } - else { - // kind-* is one of multiple classes + } 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); } @@ -18209,7 +16557,11 @@ if (typeof module !== "undefined" && module.exports) { // 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'); + 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) { @@ -18232,7 +16584,7 @@ if (typeof module !== "undefined" && module.exports) { 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(); + content = $rows.eq(i).find('td').eq(4)[0].innerText; if (start !== undefined && end !== undefined) { vtt[kind] += start + ' --> ' + end + "\n"; if (content !== 'undefined') { @@ -18260,14 +16612,13 @@ if (typeof module !== "undefined" && module.exports) { var $heading, filename, $p, pText, $textarea; - $heading = $('<h3>').text(kind.charAt(0).toUpperCase() + kind.slice(1)); + $heading = $('<h3>').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 += '<em>' + kind + '</em> WebVTT file (<strong>' + filename + '</strong>).'; - } - else { + } else { pText += 'into a new ' + this.getLanguageName(lang) + ' <em>' + kind + '</em> WebVTT file.'; } $p = $('<p>',{ @@ -18279,14 +16630,14 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); - (function ($) { + AblePlayer.prototype.initVimeoPlayer = function () { - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; + var thisObj, deferred, promise, containerId, vimeoId, options; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); containerId = this.mediaId + '_vimeo'; @@ -18294,14 +16645,10 @@ if (typeof module !== "undefined" && module.exports) { // add container to which Vimeo player iframe will be appended this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // if a described version is available && user prefers desription + // if a described version is available && user prefers description // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } + vimeoId = (this.vimeoDescId && this.prefDesc) ? this.vimeoDescId : this.vimeoId; + this.activeVimeoId = vimeoId; // Notes re. Vimeo Embed Options: @@ -18309,44 +16656,36 @@ if (typeof module !== "undefined" && module.exports) { // setting the "controls" option to "false" will hide the default controls, without hiding captions. // This is a new option from Vimeo; previously used "background:true" to hide the controller, // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) + // - In addition to hiding the controls, it also hides captions + // - It automatically autoplays (initializing the player with autoplay:false does not override this) + // - It automatically loops (but this can be overridden by initializing the player with loop:false) + // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - if (this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } + autoplay = (this.okToPlay) ? 'true' : 'false'; - if (this.playerWidth) { - if (this.vimeoUrlHasParams) { - // use url param, not id + if (this.playerWidth) { + if (this.vimeoUrlHasParams) { + // use url param, not id options = { url: vimeoId, width: this.playerWidth, controls: false } - } - else { + } else { options = { id: vimeoId, width: this.playerWidth, controls: false } } - } - else { - // initialize without width & set width later - if (this.vimeoUrlHasParams) { + } else { + // initialize without width & set width later + if (this.vimeoUrlHasParams) { options = { url: vimeoId, controls: false } - } - else { + } else { options = { id: vimeoId, controls: false @@ -18364,18 +16703,18 @@ if (typeof module !== "undefined" && module.exports) { }); // get video's intrinsic size and initiate player dimensions - thisObj.vimeoPlayer.getVideoWidth().then(function(width) { - if (width) { - // also get height - thisObj.vimeoPlayer.getVideoHeight().then(function(height) { - if (height) { - thisObj.resizePlayer(width,height); + thisObj.vimeoPlayer.getVideoWidth().then(function(width) { + if (width) { + // also get height + thisObj.vimeoPlayer.getVideoHeight().then(function(height) { + if (height) { + thisObj.resizePlayer(width,height); } - }); + }); } }).catch(function(error) { - // an error occurred getting height or width - // TODO: Test this to see how gracefully it organically recovers + // an error occurred getting height or width + // TODO: Test this to see how gracefully it organically recovers }); if (!thisObj.hasPlaylist) { @@ -18408,7 +16747,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPaused = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getPaused().then(function (paused) { @@ -18422,7 +16761,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoEnded = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getEnded().then(function (ended) { @@ -18435,11 +16774,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoState = function () { - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - - thisObj = this; + var deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); promises = []; @@ -18466,10 +16803,10 @@ if (typeof module !== "undefined" && module.exports) { // get data via Vimeo Player API, and push data to this.captions // Note: Vimeo doesn't expose the caption cues themselves // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - var thisObj, i, trackId, isDefaultTrack; + var thisObj, i, isDefaultTrack; thisObj = this; @@ -18489,15 +16826,13 @@ if (typeof module !== "undefined" && module.exports) { thisObj.hasCaptions = true; if (thisObj.prefCaptions === 1) { thisObj.captionsOn = true; - } - else { + } else { thisObj.captionsOn = false; } // assign the default track based on language of the player if (tracks[i]['language'] === thisObj.lang) { isDefaultTrack = true; - } - else { + } else { isDefaultTrack = false; } thisObj.tracks.push({ @@ -18505,18 +16840,17 @@ if (typeof module !== "undefined" && module.exports) { 'language': tracks[i]['language'], 'label': tracks[i]['label'], 'def': isDefaultTrack - }); + }); } - thisObj.captions = thisObj.tracks; + thisObj.captions = thisObj.tracks; thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original thisObj.setupPopups('captions'); deferred.resolve(); - } - else { + } else { thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; + thisObj.usingVimeoCaptions = false; deferred.resolve(); } }); @@ -18526,69 +16860,59 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPosterUrl = function (vimeoId, width) { - // this is a placeholder, copied from getYouTubePosterUrl() - // Vimeo doesn't seem to have anything similar, - // nor does it seem to be possible to get the poster via the Vimeo API - // Vimeo playlist support (with thumbnail images) may require use of data-poster + // Vimeo Oembed only returns a 640px width image. Hope at some point there's an alternative. + var url = 'http://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId, imageUrl = ''; + console.log( url ); + fetch( url ).then( response => { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 + return response.json(); + }) + .then( json => { + imageUrl = json.thumbnail_url; + }) + .catch( error => { + if (thisObj.debug) { + console.log( 'Vimeo API query: ' + error ); + } + }); - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; - }; + return imageUrl; + }; AblePlayer.prototype.getVimeoId = function (url) { - + // return a Vimeo ID, extracted from a full Vimeo URL // Supported URL patterns are anything containing 'vimeo.com' - // and ending with a '/' followed by the ID. + // and ending with a '/' followed by the ID. // (Vimeo IDs do not have predicatable lengths) - - // Update: If URL contains parameters, return the full url - // This will need to be passed to the Vimeo Player API - // as a url parameter, not as an id parameter - this.vimeoUrlHasParams = false; - - var idStartPos, id; - - if (typeof url === 'number') { - // this is likely already a vimeo ID - return url; - } - else if (url.indexOf('vimeo.com') !== -1) { - // this is a full Vimeo URL - if (url.indexOf('?') !== -1) { - // URL contains parameters - this.vimeoUrlHasParams = true; - return url; - } - else { - url = url.trim(); - idStartPos = url.lastIndexOf('/') + 1; - id = url.substring(idStartPos); - return id; - } - } - else { - return url; - } -}; + + // Update: If URL contains parameters, return the full url + // This will need to be passed to the Vimeo Player API + // as a url parameter, not as an id parameter + this.vimeoUrlHasParams = false; + + if (typeof url === 'number') { + // this is likely already a vimeo ID + return url; + } else { + urlObject = new URL(url); + } + if ( 'vimeo.com' === urlObject.hostname || 'player.vimeo.com' === urlObject.hostname ) { + // this is a full Vimeo URL + if ( '' !== urlObject.search ) { + // URL contains parameters + this.vimeoUrlHasParams = true; + return url; + } else { + if ( 'player.vimeo.com' === urlObject.hostname ) { + return urlObject.pathname.replace( '/video/', '' ); + } else { + return urlObject.pathname.replace( '/', '' ); + } + } + } else { + return url; + } + }; })(jQuery); diff --git a/src/build/ableplayer.min.4.4.1.css b/src/build/ableplayer.min.4.4.1.css deleted file mode 100644 index 1fc6ead..0000000 --- a/src/build/ableplayer.min.4.4.1.css +++ /dev/null @@ -1 +0,0 @@ -.able-wrapper{position:relative;margin:0;padding:0;width:100%;height:auto;box-sizing:content-box!important;text-align:left}.able{position:relative;margin:1em 0;width:100%;background-color:#000;box-shadow:0 0 16px #262626;z-index:5000}.able-column-left{float:left}.able-column-right{float:left}.able .able-vidcap-container{background-color:#000;left:0;margin:0;position:relative;top:0}.able-player{font-family:Arial,Helvetica,sans-serif;background-color:#262626}.able-offscreen{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.able-media-container audio{display:none!important}.able-video .able-now-playing{display:none}.able-controller{position:relative;border-bottom:1px solid #4c4c4c;background-color:#464646;min-height:38px;padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:hidden}.able-big-play-button{position:absolute;font-size:8em;opacity:.5;color:#fdfdfd;background-color:transparent;border:none;outline:0;left:0;top:0;padding:0;z-index:6500}.able-big-play-button:hover{opacity:100}.able-left-controls,.able-right-controls{overflow:visible}.able-left-controls div[role=button],.able-right-controls div[role=button]{vertical-align:middle}.able-left-controls{float:left}.able-right-controls{float:right}.able-black-controls,.able-black-controls div[role=button],.able-black-controls label{color:#000!important}.able-black-controls .able-seekbar{border:1px solid #000}.able-black-controls label,.able-white-controls,.able-white-controls div[role=button]{color:#fff!important}.able-white-controls .able-seekbar{border:1px solid #fff}.able-controller div[role=button]{background:0 0;position:relative;display:inline-block;border-style:none;margin:3px;padding:0;font-size:20px;min-width:24px;border:none;overflow:visible!important;z-index:6600}.able-controller div[role=button]>img,.able-controller div[role=button]>span{width:20px;margin:0 auto;padding:0;z-index:6700}.able-controller .buttonOff{opacity:.5;z-index:6800}.able-controller .able-seekbar{margin:0 5px;z-index:6900}.able-controller div[role=button]:focus,.able-controller div[role=button]:hover{outline-style:solid;outline-width:medium}.able-controller div[role=button]:hover{outline-color:#8ab839!important}.able-controller div[role=button]:focus{outline-color:#ffbb37!important}.able-controller button::-moz-focus-inner,.able-search-results button::-moz-focus-inner{border:0}.able-seekbar-wrapper{display:inline-block;vertical-align:middle}.able-seekbar{position:relative;height:.5em;border:1px solid;background-color:#000;margin:0 3px;border-style:solid;border-width:2px;border-color:#fff}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:.5em;background-color:#464646;z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:.5em;background-color:#dadada;z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;top:-.45em;background-color:#fdfdfd;width:.8em;height:.8em;border:1px solid;border-radius:.8em;z-index:5500}.able-volume-slider{width:34px;height:50px;background-color:#464646;padding:10px 0;position:absolute;right:0;top:-74px;display:block;z-index:9100}.able-volume-track{display:block;position:relative;height:100%;width:7px;margin:0 auto;background-color:#000}.able-volume-track.able-volume-track-on{background-color:#dadada;position:absolute;height:20px;top:30px}.able-volume-slider>.able-volume-track{border:1px solid #fff}.able-volume-head{display:inline-block;background-color:#fdfdfd;outline:1px solid #333;position:absolute;height:7px;width:15px;left:-5px;top:23px;z-index:9175}.able-volume-head:focus,.able-volume-head:hover{background-color:#ffbb37!important}.able-volume-help{display:none}.able-status-bar{height:1.5em;min-height:1.5em;color:#ccc;font-size:.9em;background-color:transparent;padding:.5em .5em .25em}.able-status-bar span.able-timer{text-align:left;float:left;width:32%}.able-status-bar span.able-speed{float:left;width:33%;text-align:center}.able-status{font-style:italic;float:right;width:32%;text-align:right}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;line-height:1.35em;display:block;z-index:6000}div.able-captions{display:none;padding:.15em .25em;background-color:#000;font-size:1.1em;color:#fff;opacity:.75}div.able-captions-overlay{position:absolute;margin:0;bottom:0}div.able-captions-below{position:relative;min-height:3.2em}div.able-descriptions{position:relative;color:#ff6;background-color:#262626;min-height:2.8em;border-top:1px solid #666;margin:0;padding:3%;width:94%;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1.1em;color:#fff;background-color:transparent;padding:.5em .5em 1em}div.able-now-playing span{font-size:.9em}div.able-now-playing span span{display:block}div.able-modal-dialog{position:absolute;height:auto;max-width:90%;margin-left:auto;margin-right:auto;top:5%;left:0;right:0;outline:0 none;display:none;color:#000;background-color:#fafafa;box-sizing:content-box!important;z-index:10000}@supports (transform:translate(-50%,-50%)){div.able-modal-dialog{top:50%;left:50%;transform:translate(-50%,-50%)!important}}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:#000;opacity:.5;margin:0;padding:0;top:0;left:0;display:none;z-index:9500}button.modalCloseButton{position:absolute;top:5px;right:5px}button.modal-button{margin-right:5px}div.able-modal-dialog button:focus,div.able-modal-dialog button:hover,div.able-modal-dialog input:focus,div.able-modal-dialog input:hover{outline-style:solid;outline-width:2px}div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:#8ab839}div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:#ffbb37}div.able-modal-dialog h1{font-weight:700;font-size:1.8em;line-height:1.2em;margin:.75em 0;color:#000;text-align:center}.able-help-div,.able-prefs-form,.able-resize-form{background-color:#f5f5f5;border:medium solid #ccc;padding:.5em 1em;margin:0 0 0 1em;width:25em;display:none}.able-prefs-form fieldset{margin-left:0;padding-left:0;border:none}.able-prefs-form legend{color:#000;font-weight:700;font-size:1.1em}.able-prefs-form fieldset div{display:table;margin-left:1em}.able-prefs-form fieldset div input{display:table-cell;width:1em;vertical-align:middle}.able-prefs-form fieldset div label{display:table-cell;padding-left:.5em}fieldset.able-prefs-keys div{float:left;margin-right:1em}div.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1em!important}div.able-prefDescFormat>div{margin-left:1.5em}.able-prefs-captions label,.able-prefs-captions select{display:block;float:left;margin-bottom:.25em}fieldset.able-prefs-captions label{width:6em;text-align:right;padding-right:1em}fieldset.able-prefs-captions select{width:10em;font-size:.9em;border-radius:none}fieldset.able-prefs-descriptions>div.able-prefs-select{margin:.5em 1em}fieldset.able-prefs-descriptions>div.able-prefs-select>label,fieldset.able-prefs-descriptions>div.able-prefs-slider>label{width:6em;text-align:right;padding-right:1em}fieldset.able-prefs-descriptions>div.able-prefs-select>select,fieldset.able-prefs-descriptions>div.able-prefs-slider>select{width:10em;font-size:.9em;border-radius:none}div.able-prefDescPause{margin-top:1em}.able-prefs-form div.able-captions-sample{padding:.5em;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5em;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5em;font-size:1.1em}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1em}.able-resize-form h1{font-size:1.15em}.able-resize-form div div{margin:1em}.able-resize-form label{padding-right:.5em;font-weight:700}.able-resize-form input[type=text]{font-size:1em}.able-resize-form input[readonly]{color:#aaa}.able-window-toolbar{background-color:#464646;min-height:15px;padding:10px;border-style:solid;border-width:0 0 1px 0}.able-draggable:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{position:absolute;top:0;right:0;font-size:1.5em;background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar .able-button-handler-preferences:hover{outline-style:solid;outline-width:medium}.able-window-toolbar .able-button-handler-preferences:hover{outline-color:#8ab839!important}.able-window-toolbar .able-button-handler-preferences:focus{outline-color:#ffbb37!important}.able-window-toolbar .able-popup{position:absolute;cursor:default;right:0;top:0;display:block}.able-drag{border:2px dashed #f90;cursor:move}.able-resizable{position:absolute;width:16px;height:16px;padding:5px 2px;bottom:0;right:0;cursor:nwse-resize;background:transparent url(../images/wingrip.png) no-repeat}.able-sign-window{position:relative;margin:1em;z-index:8000}.able-sign-window video{width:100%}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0}div.able-chapters-div .able-chapters-heading{margin:1em .75em;font-size:1.1em;font-weight:700}div.able-chapters-div ul{list-style-type:none;padding-left:0}div.able-chapters-div ul li{max-width:100%;padding:0;height:2em}div.able-chapters-div button{width:100%;height:100%;border:none;background-color:transparent;color:#000;font-size:1em;text-align:left;padding:.15em 1em}div.able-chapters-div li.able-current-chapter{background-color:#000!important}div.able-chapters-div li.able-current-chapter button{color:#fff!important}div.able-chapters-div li.able-focus{background-color:#4c4c4c}div.able-chapters-div button::-moz-focus-inner,div.able-chapters-div button:focus,div.able-chapters-div button:hover{border:0;outline:0;color:#fff!important}.able-alert,.able-tooltip{position:absolute;padding:5px 10px;border-color:#000;border-width:1px;color:#000!important;background-color:#ccc;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block}.able-alert{background-color:#ffc;box-shadow:0 0 16px #262626;z-index:9400;position:absolute;top:1em}.able-popup{z-index:9200}.able-tooltip{z-index:9000}.able-popup{position:absolute;margin:0;padding:0;border-color:#000;border-width:1px;background-color:#000;opacity:.85;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block;cursor:default}ul.able-popup{list-style-type:none}.able-popup li{padding:.25em 1em .25em .25em;margin:1px;color:#fff}.able-popup li.able-focus{background-color:#ccc;color:#000}.able-popup-captions li{padding-left:1em}.able-popup-captions li[aria-checked=true]{padding-left:0}.able-popup-captions li[aria-checked=true]::before{content:"\2713 "}.able-transcript-area{border-width:1px;border-style:solid;height:400px;z-index:7000;outline:0;padding-bottom:25px;background-color:#fff}.able-transcript{position:relative;overflow-y:scroll;padding-left:5%;padding-right:5%;background-color:#fff;height:350px}.able-transcript div{margin:1em 0}.able-transcript-heading{font-size:1.4em;font-weight:700}.able-transcript-chapter-heading{font-size:1.2em;font-weight:700}.able-transcript div.able-transcript-desc{background-color:#fee;border:thin solid #336;font-style:italic;padding:1em}.able-transcript .able-unspoken{font-weight:700}.able-transcript .able-hidden{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.able-highlight{background:#ff6}.able-previous{background:#000!important;font-style:italic}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:#cf6;cursor:pointer}.able-window-toolbar label{margin-right:10px;color:#fff}.able-controller div[role=button]:focus,.able-controller div[role=button]:hover,.able-controller input:focus,.able-controller input:hover,.able-seekbar-head:focus,.able-seekbar-head:hover,.able-window-toolbar input:focus,.able-window-toolbar input:hover,.able-window-toolbar select:focus,.able-window-toolbar select:hover{outline-style:solid;outline-width:2px}.able-controller div[role=button]:focus,.able-controller input:focus,.able-seekbar-head:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus{outline-color:#ffbb37}.able-controller div[role=button]:hover,.able-controller input:hover,.able-seekbar-head:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover{outline-color:#8ab839}.able-window-toolbar .transcript-language-select-wrapper{float:right;padding-right:30px}.able-playlist{list-style-type:none;margin:0;background-color:#fff;padding:5px 0}.able-playlist li{background-color:#ddd;margin:5px;padding:0;border:2px solid #aaa;border-radius:5px;-moz-border-radius:5px}.able-playlist li button{border:none;color:#000;background-color:transparent;font-size:1em;width:100%;padding:5px 10px;text-align:left}.able-playlist li button:active,.able-playlist li button:focus,.able-playlist li button:hover{background-color:#ffeeb3;color:#000;text-decoration:none;outline:0}.able-playlist li button::-moz-focus-inner{border:0}.able-playlist li button img{width:100px;float:left;margin-right:10px}.able-playlist li.able-current{background-color:#340449;border-color:#230330}.able-playlist li.able-current button{color:#fff;font-weight:700;text-decoration:none;outline:0}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:#000}#able-search-term-echo{font-weight:700;font-style:italic}.able-search-results ul li{font-size:1.1em;margin-bottom:1em}button.able-search-results-time{font-size:1em;font-weight:700;cursor:pointer}button.able-search-results-time:active,button.able-search-results-time:focus,button.able-search-results-time:hover{color:#fff;background-color:#000}.able-search-results-text{padding-left:1em}.able-search-term{background-color:#ffc;font-weight:700}#search-term{font-weight:700;font-style:italic}#able-vts-instructions{margin-bottom:1.5em;padding:1em;border:1px solid #999;width:720px;max-width:90%}#able-vts fieldset{margin:1em;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{float:left;padding-right:1em}#able-vts table{clear:left}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #000;border-collapse:collapse;padding:.5em .75em}#able-vts table th.actions{min-width:140px}#able-vts table td button{width:auto;padding:0;margin:2px}#able-vts table td button svg{width:16px;height:16px}#able-vts table button:hover svg{fill:#c00}tr.kind-chapters,tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{margin:1em}div#able-vts-alert{display:none;position:fixed;top:5px;left:5px;border:2px solid #666;background-color:#ffc;padding:1em;font-weight:700;z-index:9400}button#able-vts-save{font-size:1em;padding:.25em;border-radius:5px;margin-bottom:1em;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}.able-clipped,.able-screenreader-alert{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);width:1px!important;height:1px!important;overflow:hidden!important}.able-error{display:block;background:#ffc;border:2px solid #000;color:red;margin:.75em;padding:.5em}.able-fallback{display:block;text-align:center;border:2px solid #335;background-color:#eee;color:#000;font-weight:700;font-size:1.1em;padding:1em;margin-bottom:1em;max-width:500px;width:95%}.able-fallback div,.able-fallback p,.able-fallback ul{text-align:left}.able-fallback li{font-weight:400}.able-fallback img{width:90%;margin:1em auto;opacity:.3}.able-fallback img.able-poster{position:relative}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:inline-block;width:1em;height:1em;fill:currentColor}div.able-skin-2020 div.able-seekbar-wrapper{width:96%;margin:10px 2%}@font-face{font-family:able;src:url(../button-icons/fonts/able.eot?dqripi);src:url(../button-icons/fonts/able.eot?dqripi#iefix) format('embedded-opentype'),url(../button-icons/fonts/able.ttf?dqripi) format('truetype'),url(../button-icons/fonts/able.woff?dqripi) format('woff'),url(../button-icons/fonts/able.svg?dqripi#able) format('svg');font-weight:400;font-style:normal}.able-wrapper [class=" icon-"],.able-wrapper [class^=icon-]{font-family:able!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-play:before{content:"\f04b"}.icon-pause:before{content:"\f04c"}.icon-stop:before{content:"\f04d"}.icon-restart:before{content:"\e900"}.icon-rewind:before{content:"\e603"}.icon-forward:before{content:"\e604"}.icon-previous:before{content:"\e901"}.icon-next:before{content:"\e902"}.icon-slower:before{content:"\f0dd"}.icon-faster:before{content:"\f0de"}.icon-turtle:before{content:"\e904"}.icon-rabbit:before{content:"\e905"}.icon-ellipsis:before{content:"\e903"}.icon-pipe:before{content:"\e600"}.icon-captions:before{content:"\e601"}.icon-descriptions:before{content:"\e602"}.icon-sign:before{content:"\e60a"}.icon-volume-mute:before{content:"\e606"}.icon-volume-soft:before{content:"\e60c"}.icon-volume-medium:before{content:"\e605"}.icon-volume-loud:before{content:"\e60b"}.icon-volume-up:before{content:"\e607"}.icon-volume-down:before{content:"\e608"}.icon-chapters:before{content:"\e609"}.icon-transcript:before{content:"\f15c"}.icon-preferences:before{content:"\e60d"}.icon-close:before{content:"\f00d"}.icon-fullscreen-expand:before{content:"\f065"}.icon-fullscreen-collapse:before{content:"\f066"}.icon-help:before{content:"\f128"} \ No newline at end of file diff --git a/src/build/ableplayer.min.4.4.1.js b/src/build/ableplayer.min.4.4.1.js deleted file mode 100644 index 0745c6e..0000000 --- a/src/build/ableplayer.min.4.4.1.js +++ /dev/null @@ -1,2 +0,0 @@ -/! ableplayer V4.4.1 / -"use strict";var AblePlayerInstances=[];!function(r){r(document).ready(function(){r("video, audio").each(function(t,e){void 0!==r(e).data("able-player")&&AblePlayerInstances.push(new AblePlayer(r(this),r(e)))})}),window.onYouTubeIframeAPIReady=function(){AblePlayer.youTubeIframeAPIReady=!0,r("body").trigger("youTubeIframeAPIReady",[])},r(window).on("keydown",function(t){1===AblePlayer.nextIndex&&AblePlayer.lastCreated.onPlayerKeyPress(t)}),window.AblePlayer=function(t){if((AblePlayer.lastCreated=this).media=t,0!==r(t).length){if(void 0!==r(t).attr("autoplay")?(this.autoplay=!0,this.okToPlay=!0):(this.autoplay=!1,this.okToPlay=!1),void 0!==r(t).attr("loop")?this.loop=!0:this.loop=!1,void 0!==r(t).attr("playsinline")?this.playsInline="1":this.playsInline="0",r(t).attr("poster")?this.hasPoster=!0:this.hasPoster=!1,void 0!==r(t).data("start-time")&&r.isNumeric(r(t).data("start-time"))?this.startTime=r(t).data("start-time"):this.startTime=0,void 0!==r(t).data("debug")&&!1!==r(t).data("debug")?this.debug=!0:this.debug=!1,void 0!==r(t).data("root-path")?this.rootPath=r(t).data("root-path").replace(/\/?$/,"/"):this.rootPath=this.getRootPath(),this.defaultVolume=7,void 0!==r(t).data("volume")&&""!==r(t).data("volume")){var e=r(t).data("volume");0<=e&&e<=10&&(this.defaultVolume=e)}if(this.volume=this.defaultVolume,void 0!==r(t).data("use-chapters-button")&&!1===r(t).data("use-chapters-button")?this.useChaptersButton=!1:this.useChaptersButton=!0,void 0!==r(t).data("use-descriptions-button")&&!1===r(t).data("use-descriptions-button")?this.useDescriptionsButton=!1:this.useDescriptionsButton=!0,void 0!==r(t).data("descriptions-audible")&&!1===r(t).data("descriptions-audible")?this.exposeTextDescriptions=!1:void 0!==r(t).data("description-audible")&&!1===r(t).data("description-audible")?this.exposeTextDescriptions=!1:this.exposeTextDescriptions=!0,void 0!==r(t).data("heading-level")&&""!==r(t).data("heading-level")){var i=r(t).data("heading-level");/^[0-6]$/.test(i)&&(this.playerHeadingLevel=i)}if(void 0!==r(t).data("transcript-div")&&""!==r(t).data("transcript-div")?this.transcriptDivLocation=r(t).data("transcript-div"):this.transcriptDivLocation=null,void 0!==r(t).data("include-transcript")&&!1===r(t).data("include-transcript")?this.hideTranscriptButton=!0:this.hideTranscriptButton=null,this.transcriptType=null,void 0!==r(t).data("transcript-src")?(this.transcriptSrc=r(t).data("transcript-src"),this.transcriptSrcHasRequiredParts()&&(this.transcriptType="manual")):0<r(t).find('track[kind="captions"], track[kind="subtitles"]').length&&(this.transcriptDivLocation?this.transcriptType="external":this.transcriptType="popup"),void 0!==r(t).data("lyrics-mode")&&!1!==r(t).data("lyrics-mode")?this.lyricsMode=!0:this.lyricsMode=!1,void 0!==r(t).data("transcript-title")&&""!==r(t).data("transcript-title")&&(this.transcriptTitle=r(t).data("transcript-title")),"overlay"===r(t).data("captions-position")?this.defaultCaptionsPosition="overlay":this.defaultCaptionsPosition="below",void 0!==r(t).data("chapters-div")&&""!==r(t).data("chapters-div")&&(this.chaptersDivLocation=r(t).data("chapters-div")),void 0!==r(t).data("chapters-title")&&(this.chaptersTitle=r(t).data("chapters-title")),void 0!==r(t).data("chapters-default")&&""!==r(t).data("chapters-default")?this.defaultChapter=r(t).data("chapters-default"):this.defaultChapter=null,"arrows"===r(t).data("speed-icons")?this.speedIcons="arrows":this.speedIcons="animals","chapter"===r(t).data("seekbar-scope")||"chapters"===r(t).data("seekbar-scope")?this.seekbarScope="chapter":this.seekbarScope="video",void 0!==r(t).data("youtube-id")&&""!==r(t).data("youtube-id")&&(this.youTubeId=r(t).data("youtube-id")),void 0!==r(t).data("youtube-desc-id")&&""!==r(t).data("youtube-desc-id")&&(this.youTubeDescId=r(t).data("youtube-desc-id")),void 0!==r(t).data("youtube-nocookie")&&r(t).data("youtube-nocookie")?this.youTubeNoCookie=!0:this.youTubeNoCookie=!1,void 0!==r(t).data("vimeo-id")&&""!==r(t).data("vimeo-id")&&(this.vimeoId=r(t).data("vimeo-id")),void 0!==r(t).data("vimeo-desc-id")&&""!==r(t).data("vimeo-desc-id")&&(this.vimeoDescId=r(t).data("vimeo-desc-id")),"2020"==r(t).data("skin")?this.skin="2020":this.skin="legacy",this.iconType="font",this.forceIconType=!1,void 0!==r(t).data("icon-type")&&""!==r(t).data("icon-type")){var s=r(t).data("icon-type");"font"!==s&&"image"!=s&&"svg"!=s||(this.iconType=s,this.forceIconType=!0)}if(void 0!==r(t).data("allow-fullscreen")&&!1===r(t).data("allow-fullscreen")?this.allowFullScreen=!1:this.allowFullScreen=!0,this.defaultSeekInterval=10,this.useFixedSeekInterval=!1,void 0!==r(t).data("seek-interval")&&""!==r(t).data("seek-interval")){var a=r(t).data("seek-interval");/^[1-9][0-9]$/.test(a)&&(this.seekInterval=a,this.useFixedSeekInterval=!0)}void 0!==r(t).data("show-now-playing")&&!1===r(t).data("show-now-playing")?this.showNowPlaying=!1:this.showNowPlaying=!0,void 0!==r(t).data("use-ttml")?(this.useTtml=!0,this.convert=require("xml-js")):this.useTtml=!1,void 0!==r(t).data("test-fallback")&&!1!==r(t).data("test-fallback")&&(this.testFallback=!0),void 0!==r(t).data("lang")&&""!==r(t).data("lang")?this.lang=r(t).data("lang").toLowerCase():this.lang=null,void 0!==r(t).data("meta-type")&&""!==r(t).data("meta-type")&&(this.metaType=r(t).data("meta-type")),void 0!==r(t).data("meta-div")&&""!==r(t).data("meta-div")&&(this.metaDiv=r(t).data("meta-div")),void 0!==r(t).data("search-div")&&""!==r(t).data("search-div")&&(this.searchDiv=r(t).data("search-div"),void 0!==r(t).data("search")&&""!==r(t).data("search")&&(this.searchString=r(t).data("search")),void 0!==r(t).data("search-lang")&&""!==r(t).data("search-lang")?this.searchLang=r(t).data("search-lang"):this.searchLang=null,void 0!==r(t).data("search-ignore-caps")&&!1!==r(t).data("search-ignore-caps")?this.searchIgnoreCaps=!0:this.searchIgnoreCaps=!1,void 0!==r(t).data("search-div")&&""!==r(t).data("search-div")&&(this.searchString=r(t).data("search"),this.searchDiv=r(t).data("search-div"))),void 0!==r(t).data("hide-controls")&&!1!==r(t).data("hide-controls")?(this.hideControls=!0,this.hideControlsOriginal=!0):(this.hideControls=!1,this.hideControlsOriginal=!1),void 0!==r(t).data("steno-mode")&&!1!==r(t).data("steno-mode")?(this.stenoMode=!0,void 0!==r(t).data("steno-iframe-id")&&""!==r(t).data("steno-iframe-id")?(this.stenoFrameId=r(t).data("steno-iframe-id"),this.$stenoFrame=r("#"+this.stenoFrameId),this.$stenoFrame.length||(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoMode=!1,this.stenoFrameId=null,this.$stenoFrame=null),this.setDefaults(),this.ableIndex=AblePlayer.nextIndex,AblePlayer.nextIndex+=1,this.title=r(t).attr("title"),this.tt={};var n=this;r.when(this.getTranslationText()).then(function(){50<n.countProperties(n.tt)?n.setup():n.provideFallback()})}else this.provideFallback()},AblePlayer.nextIndex=0,AblePlayer.prototype.setup=function(){var t=this;this.initializing=!0,this.reinitialize().then(function(){t.player?t.setupInstance().then(function(){t.setupInstancePlaylist(),t.hasPlaylist||t.recreatePlayer(),t.initializing=!1,t.playerCreated=!0}):t.provideFallback()})},AblePlayer.getActiveDOMElement=function(){for(var t=document.activeElement;t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t},AblePlayer.localGetElementById=function(t,e){return t.getRootNode?r(t.getRootNode().querySelector("#"+e)):r(document.getElementById(e))},AblePlayer.youTubeIframeAPIReady=!1,AblePlayer.loadingYouTubeIframeAPI=!1}(jQuery),function(r){AblePlayer.prototype.setDefaults=function(){this.playerCreated=!1,this.playing=!1,this.paused=!0,this.clickedPlay=!1,this.fullscreen=!1,this.swappingSrc=!1,this.initializing=!1,this.cueingPlaylistItems=!1,this.okToPlay=!1,this.buttonWithFocus=null,this.getUserAgent(),this.setIconColor(),this.setButtonImages()},AblePlayer.prototype.getRootPath=function(){var t,e,i,s,a,n;for(t=document.getElementsByTagName("script"),e=0;e<t.length;e++)if(-1!==(i=t[e].src).substr(i.lastIndexOf("/")).indexOf("ableplayer")){s=i.split("?")[0];break}return n=(a=s.split("/").slice(0,-1).join("/")).lastIndexOf("/"),a.substring(0,n)+"/"},AblePlayer.prototype.setIconColor=function(){var t,e,i,s,a;for(t=["controller","toolbar"],e=0;e<t.length;e++)"controller"==t[e]?i=r("<div>",{class:"able-controller"}).hide():"toolbar"===t[e]&&(i=r("<div>",{class:"able-window-toolbar"}).hide()),r("body").append(i),a=.2126(s=i.css("background-color").replace(/[^\d,]/g,"").split(","))[0]+.7152s[1]+.0722s[2]<125?"white":"black","controller"===t[e]?this.iconColor=a:"toolbar"===t[e]&&(this.toolbarIconColor=a),i.remove()},AblePlayer.prototype.setButtonImages=function(){this.imgPath=this.rootPath+"button-icons/"+this.iconColor+"/",this.playButtonImg=this.imgPath+"play.png",this.pauseButtonImg=this.imgPath+"pause.png",this.restartButtonImg=this.imgPath+"restart.png",this.rewindButtonImg=this.imgPath+"rewind.png",this.forwardButtonImg=this.imgPath+"forward.png",this.previousButtonImg=this.imgPath+"previous.png",this.nextButtonImg=this.imgPath+"next.png","arrows"===this.speedIcons?(this.fasterButtonImg=this.imgPath+"slower.png",this.slowerButtonImg=this.imgPath+"faster.png"):"animals"===this.speedIcons&&(this.fasterButtonImg=this.imgPath+"rabbit.png",this.slowerButtonImg=this.imgPath+"turtle.png"),this.captionsButtonImg=this.imgPath+"captions.png",this.chaptersButtonImg=this.imgPath+"chapters.png",this.signButtonImg=this.imgPath+"sign.png",this.transcriptButtonImg=this.imgPath+"transcript.png",this.descriptionsButtonImg=this.imgPath+"descriptions.png",this.fullscreenExpandButtonImg=this.imgPath+"fullscreen-expand.png",this.fullscreenCollapseButtonImg=this.imgPath+"fullscreen-collapse.png",this.prefsButtonImg=this.imgPath+"preferences.png",this.helpButtonImg=this.imgPath+"help.png"},AblePlayer.prototype.getSvgData=function(t){var e=Array();switch(t){case"play":e[0]="0 0 16 20",e[1]="M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z";break;case"pause":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"stop":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"restart":e[0]="0 0 20 20",e[1]="M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z";break;case"rewind":e[0]="0 0 20 20",e[1]="M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z";break;case"forward":e[0]="0 0 20 20",e[1]="M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z";break;case"previous":e[0]="0 0 20 20",e[1]="M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z";break;case"next":e[0]="0 0 20 20",e[1]="M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z";break;case"slower":e[0]="0 0 20 20",e[1]="M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z";break;case"faster":e[0]="0 0 11 20",e[1]="M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"turtle":e[0]="0 0 20 20",e[1]="M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z";break;case"rabbit":e[0]="0 0 20 20",e[1]="M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z";break;case"ellipsis":e[0]="0 0 20 20",e[1]="M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z";break;case"pipe":e[0]="0 0 20 20",e[1]="M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z";break;case"captions":e[0]="0 0 20 20",e[1]="M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z";break;case"descriptions":e[0]="0 0 20 20",e[1]="M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z";break;case"sign":e[0]="0 0 20 20",e[1]="M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z";break;case"mute":case"volume-mute":e[0]="0 0 20 20",e[1]="M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z";break;case"volume-soft":e[0]="0 0 20 20",e[1]="M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-medium":e[0]="0 0 20 20",e[1]="M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-loud":e[0]="0 0 21 20",e[1]="M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"chapters":e[0]="0 0 20 20",e[1]="M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z";break;case"transcript":e[0]="0 0 20 20",e[1]="M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z";break;case"preferences":e[0]="0 0 20 20",e[1]="M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z";break;case"close":e[0]="0 0 16 20",e[1]="M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z";break;case"fullscreen-expand":e[0]="0 0 20 20",e[1]="M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z";break;case"fullscreen-collapse":e[0]="0 0 20 20",e[1]="M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"help":e[0]="0 0 11 20",e[1]="M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z"}return e},AblePlayer.prototype.reinitialize=function(){var t,e;if(e=(t=new r.Deferred).promise(),this,window.console||(this.debug=!1),this.startedPlaying=!1,this.autoScrollTranscript=!0,this.$media=r(this.media).first(),this.media=this.$media[0],this.$media.is("audio"))this.mediaType="audio";else{if(!this.$media.is("video"))return this.provideFallback(),t.fail(),e;this.mediaType="video"}return this.$sources=this.$media.find("source"),this.player=this.getPlayer(),this.player||this.provideFallback(),this.setIconType(),this.setDimensions(),t.resolve(),e},AblePlayer.prototype.setDimensions=function(){this.$media.attr("width")&&this.$media.attr("height")?(this.playerMaxWidth=parseInt(this.$media.attr("width"),10),this.playerMaxHeight=parseInt(this.$media.attr("height"),10)):this.$media.attr("width")?this.playerMaxWidth=parseInt(this.$media.attr("width"),10):(this.playerMaxWidth=this.$media.parent().width(),this.playerMaxHeight=this.getMatchingHeight(this.playerMaxWidth)),this.$media.css({width:"100%",height:"auto"})},AblePlayer.prototype.getMatchingHeight=function(e){var t,i,s,a,n;return t=[3840,2560,1920,1280,854,640,426],i=[2160,1440,1080,720,480,360,240],a=s=null,r.each(t,function(t){(null==s||Math.abs(this-e)<Math.abs(s-e))&&(s=this,a=t)}),n=i[a],this.aspectRatio=s/n,Math.round(e/this.aspectRatio)},AblePlayer.prototype.setIconType=function(){var t,e,i;if(this.forceIconType)return!1;document.createElementNS&&document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect?this.iconType="svg":(window.getComputedStyle?(e=r("span.icon-play").length?r("span.icon-play"):(t=r("<span>",{class:"icon-play able-clipped"}),r("body").append(t),t),void 0!==(i=window.getComputedStyle(e.get(0),null).getPropertyValue("font-family"))&&-1!==i.indexOf("able")?this.iconType="font":this.iconType="image"):this.iconType="image",this.debug,void 0!==t&&t.remove())},AblePlayer.prototype.setupInstance=function(){var t=new r.Deferred,e=t.promise();return this.$media.attr("id")?this.mediaId=this.$media.attr("id"):(this.mediaId="ableMediaId_"+this.ableIndex,this.$media.attr("id",this.mediaId)),t.resolve(),e},AblePlayer.prototype.setupInstancePlaylist=function(){var s=this;if(this.hasPlaylist=!1,r(".able-playlist").each(function(){if(r(this).data("player")===s.mediaId){s.hasPlaylist=!0,s.$playlist=r(this).find("li"),r(this).find("li[data-youtube-id]").each(function(){var t=r(this).attr("data-youtube-id"),e=s.getYouTubePosterUrl(t,"120"),i=r("<img>",{src:e,alt:""});r(this).find("button").prepend(i)}),r(this).find("li span").attr("aria-hidden","true"),s.playlistIndex=0;var t=r(this).data("embedded");s.playlistEmbed=void 0!==t&&!1!==t}}),this.hasPlaylist&&this.loop&&this.media.removeAttribute("loop"),this.hasPlaylist&&this.playlistEmbed){var t=this.$playlist.parent();this.$playlistDom=t.clone(),t.remove()}this.hasPlaylist&&0===this.$sources.length&&(this.cuePlaylistItem(0),this.$sources=this.$media.find("source"))},AblePlayer.prototype.recreatePlayer=function(){var e,i,s;(e=this).player?(this.playerCreated||(this.loadCurrentPreferences(),this.injectPlayerCode()),this.initSignLanguage(),this.initPlayer().then(function(){e.setupTracks().then(function(){e.getBrowserVoices(),e.setupTranscript().then(function(){e.initStenoFrame().then(function(){e.stenoMode&&e.$stenoFrame&&(e.stenoFrameContents=e.$stenoFrame.contents()),e.getMediaTimes().then(function(t){for(e.duration=t.duration,e.elapsed=t.elapsed,e.setFullscreen(!1),void 0===e.volume&&(e.volume=e.defaultVolume),e.volume&&e.setVolume(e.volume),e.transcriptType&&(e.addTranscriptAreaEvents(),e.updateTranscript()),"video"===e.mediaType&&e.initDescription(),e.captions.length&&e.initDefaultCaption(),e.setMediaAttributes(),e.addControls(),e.addEventListeners(),i=e.getPreferencesGroups(),s=0;s<i.length;s++)e.injectPrefsForm(i[s]);e.setupPopups(),e.updateCaption(),e.injectVTS(),e.chaptersDivLocation&&e.populateChaptersDiv(),e.showSearchResults(),"html5"===e.player&&e.$media[0].load(),setTimeout(function(){e.refreshControls("init")},100)})})})})},function(){e.provideFallback()})):console.log("Can't create player; no appropriate player type detected.")},AblePlayer.prototype.initPlayer=function(){var t,e=this;"html5"===this.player?t=this.initHtml5Player():"youtube"===this.player?t=this.initYouTubePlayer():"vimeo"===this.player&&(t=this.initVimeoPlayer());var i=new r.Deferred,s=i.promise();return t.done(function(){e.useFixedSeekInterval?(e.seekInterval||(e.seekInterval=e.defaultSeekInterval),e.seekIntervalCalculated=!0):e.setSeekInterval(),i.resolve()}).fail(function(){i.reject()}),s},AblePlayer.prototype.initStenoFrame=function(){var t,e;return this,e=(t=new r.Deferred).promise(),this.stenoMode&&this.$stenoFrame?(this.$stenoFrame[0].contentWindow,"complete"==document.readyState?t.resolve():this.$stenoFrame.on("load",function(){t.resolve()})):t.resolve(),e},AblePlayer.prototype.setSeekInterval=function(){var t;this.seekInterval=this.defaultSeekInterval,void 0===(t=this.useChapterTimes?this.chapterDuration:this.duration)||t<1?this.seekIntervalCalculated=!1:(this.seekInterval=t<=20?5:t<=30?6:t<=40?8:t<=100?10:t/10,this.seekIntervalCalculated=!0)},AblePlayer.prototype.initDefaultCaption=function(){var t,e;if(0<(t=this.captions).length){for(e=0;e<t.length;e++)!0===t[e].def&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);if(void 0===this.captionLang)for(e=0;e<t.length;e++)t[e].language===this.lang&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);void 0===this.captionLang&&(this.captionLang=t[0].language,this.selectedCaptions=t[0]),void 0!==this.captionLang&&(this.$transcriptLanguageSelect&&this.$transcriptLanguageSelect.find("option[lang="+this.captionLang+"]").prop("selected",!0),this.syncTrackLanguages("init",this.captionLang)),"vimeo"===this.player&&(this.usingVimeoCaptions&&1==this.prefCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(t){}).catch(function(t){t.name}):this.vimeoPlayer.disableTextTrack().then(function(){}).catch(function(t){}))}},AblePlayer.prototype.initHtml5Player=function(){var t=new r.Deferred,e=t.promise();return t.resolve(),e},AblePlayer.prototype.setMediaAttributes=function(){this.$media.attr("tabindex",-1);var t=this.$media.get(0).textTracks;if(t)for(var e=0;e<t.length;)t[e].mode="disabled",e+=1},AblePlayer.prototype.getPlayer=function(){return this.youTubeId?"video"!==this.mediaType?null:"youtube":this.vimeoId?"video"!==this.mediaType?null:"vimeo":this.testFallback||(this.isUserAgent("msie 7")||this.isUserAgent("msie 8")||this.isUserAgent("msie 9"))&&"video"===this.mediaType||this.isIOS()&&(this.isIOS(4)||this.isIOS(5)||this.isIOS(6))?null:this.media.canPlayType?"html5":null}}(jQuery),function(q){AblePlayer.prototype.setCookie=function(t){Cookies.set("Able-Player",JSON.stringify(t),{expires:90,sameSite:"strict"})},AblePlayer.prototype.getCookie=function(){var e,i={preferences:{},sign:{},transcript:{}};try{e=JSON.parse(Cookies.get("Able-Player"))}catch(t){this.setCookie(i),e=i}return e||i},AblePlayer.prototype.updateCookie=function(t){var e,i,s,a,n,r;if(e=this.getCookie(),"transcript"===t||"sign"===t)"transcript"===t?(s=(i=this.$transcriptArea).position(),void 0===e.transcript&&(e.transcript={}),e.transcript.position=i.css("position"),e.transcript.zindex=i.css("z-index"),e.transcript.top=s.top,e.transcript.left=s.left,e.transcript.width=i.width(),e.transcript.height=i.height()):"sign"===t&&(s=(i=this.$signWindow).position(),void 0===e.sign&&(e.sign={}),e.sign.position=i.css("position"),e.sign.zindex=i.css("z-index"),e.sign.top=s.top,e.sign.left=s.left,e.sign.width=i.width(),e.sign.height=i.height());else for(a=this.getAvailablePreferences(),n=0;n<a.length;n++)(r=a[n].name)==t&&(e.preferences[r]=this[r]);this.setCookie(e)},AblePlayer.prototype.getPreferencesGroups=function(){if("video"===this.mediaType)return this.usingYouTubeCaptions?["captions","descriptions","keyboard"]:this.usingVimeoCaptions?["descriptions","keyboard"]:["captions","descriptions","keyboard","transcript"];if("audio"===this.mediaType){var t=[];return t.push("keyboard"),this.lyricsMode&&t.push("transcript"),t}},AblePlayer.prototype.getAvailablePreferences=function(){var t=[];return t.push({name:"prefAltKey",label:this.tt.prefAltKey,group:"keyboard",default:1}),t.push({name:"prefCtrlKey",label:this.tt.prefCtrlKey,group:"keyboard",default:1}),t.push({name:"prefShiftKey",label:this.tt.prefShiftKey,group:"keyboard",default:0}),t.push({name:"prefTranscript",label:null,group:"transcript",default:0}),t.push({name:"prefHighlight",label:this.tt.prefHighlight,group:"transcript",default:1}),t.push({name:"prefAutoScrollTranscript",label:null,group:"transcript",default:1}),t.push({name:"prefTabbable",label:this.tt.prefTabbable,group:"transcript",default:0}),"video"===this.mediaType&&(t.push({name:"prefCaptions",label:null,group:"captions",default:1}),this.usingYouTubeCaptions||(t.push({name:"prefCaptionsPosition",label:this.tt.prefCaptionsPosition,group:"captions",default:this.defaultCaptionsPosition}),t.push({name:"prefCaptionsFont",label:this.tt.prefCaptionsFont,group:"captions",default:"sans-serif"})),t.push({name:"prefCaptionsSize",label:this.tt.prefCaptionsSize,group:"captions",default:"100%"}),this.usingYouTubeCaptions||(t.push({name:"prefCaptionsColor",label:this.tt.prefCaptionsColor,group:"captions",default:"white"}),t.push({name:"prefCaptionsBGColor",label:this.tt.prefCaptionsBGColor,group:"captions",default:"black"}),t.push({name:"prefCaptionsOpacity",label:this.tt.prefCaptionsOpacity,group:"captions",default:"100%"})),t.push({name:"prefDesc",label:null,group:"descriptions",default:0}),t.push({name:"prefDescFormat",label:null,group:"descriptions",default:"video"}),t.push({name:"prefDescVoice",label:this.tt.prefDescVoice,group:"descriptions",default:null}),t.push({name:"prefDescPitch",label:this.tt.prefDescPitch,group:"descriptions",default:1}),t.push({name:"prefDescRate",label:this.tt.prefDescRate,group:"descriptions",default:1}),t.push({name:"prefDescVolume",label:this.tt.volume,group:"descriptions",default:1}),t.push({name:"prefDescPause",label:this.tt.prefDescPause,group:"descriptions",default:1}),t.push({name:"prefDescVisible",label:this.tt.prefDescVisible,group:"descriptions",default:0}),t.push({name:"prefSign",label:null,group:null,default:0})),t},AblePlayer.prototype.loadCurrentPreferences=function(){for(var t=this.getAvailablePreferences(),e=this.getCookie(),i=0;i<t.length;i++){var s=t[i].name,a=t[i].default;void 0!==e.preferences[s]?this[s]=e.preferences[s]:(e.preferences[s]=a,this[s]=a)}this.setCookie(e)},AblePlayer.prototype.injectPrefsForm=function(t){var e,i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v,y,b,w,P,k,C,T,$,A,x,D,S,N,I,B,M,F,V,z,L;i=(e=this).getAvailablePreferences();var O="able-prefs-form-"+t;if((s=q("<div>",{class:"able-prefs-form "})).addClass(O),"captions"==t)a=this.tt.prefTitleCaptions,n=this.tt.prefIntroCaptions,W=q("<p>",{text:n}),s.append(W);else if("descriptions"==t){a=this.tt.prefTitleDescriptions;var W=q("<p>",{text:this.tt.prefIntroDescription1}),H=q("<ul>"),R=q("<li>",{text:this.tt.prefDescFormatOption1}),E=q("<li>",{text:this.tt.prefDescFormatOption2});H.append(R,E),this.hasOpenDesc&&this.hasClosedDesc?(D=this.tt.prefIntroDescription2+" ",D+="<strong>"+this.tt.prefDescFormatOption1b+"</strong>",D+=" <em>"+this.tt.and+"</em> <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):this.hasOpenDesc?(D=this.tt.prefIntroDescription2,D+=" <strong>"+this.tt.prefDescFormatOption1b+"</strong>."):this.hasClosedDesc?(D=this.tt.prefIntroDescription2,D+=" <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):D=this.tt.prefIntroDescriptionNone,r=q("<p>",{html:D}),o=this.tt.prefIntroDescription3,(this.hasOpenDesc||this.hasClosedDesc)&&(o+=" "+this.tt.prefIntroDescription4),l=q("<p>",{text:o}),s.append(W,H,r,l)}else"keyboard"==t?(a=this.tt.prefTitleKeyboard,n=this.tt.prefIntroKeyboard1,n+=" "+this.tt.prefIntroKeyboard2,n+=" "+this.tt.prefIntroKeyboard3,W=q("<p>",{text:n}),s.append(W)):"transcript"==t&&(a=this.tt.prefTitleTranscript,n=this.tt.prefIntroTranscript,W=q("<p>",{text:n}),s.append(W));for(c=q("<fieldset>"),u="able-prefs-"+t,d=this.mediaId+"-prefs-"+t,c.addClass(u).attr("id",d),"keyboard"===t?(g=q("<legend>"+this.tt.prefHeadingKeyboard1+"</legend>"),c.append(g)):"descriptions"===t&&(g=q("<legend>"+this.tt.prefHeadingTextDescription+"</legend>"),c.append(g)),h=0;h<i.length;h++)if(i[h].group==t&&i[h].label){if(v="able-"+(f=i[h].name),y=this.mediaId+"_"+f,m=q("<div>").addClass(v),"captions"===t){for(b=q('<label for="'+y+'"> '+i[h].label+"</label>"),w=q("<select>",{name:f,id:y}),"prefCaptions"!==f&&"prefCaptionsStyle"!==f&&w.change(function(){$=q(this).attr("name"),e.stylizeCaptions(e.$sampleCapsDiv,$)}),P=this.getCaptionsOptions(f),p=0;p<P.length;p++)"prefCaptionsPosition"===f?"overlay"===(C=P[p])?T=this.tt.captionsPositionOverlay:"below"===C&&(C=P[p],T=this.tt.captionsPositionBelow):"prefCaptionsFont"===f||"prefCaptionsColor"===f||"prefCaptionsBGColor"===f?(C=P[p][0],T=P[p][1]):"prefCaptionsOpacity"===f?(C=P[p],T=P[p],"0%"===C?T+=" ("+this.tt.transparent+")":"100%"===C&&(T+=" ("+this.tt.solid+")")):(C=P[p],T=P[p]),k=q("<option>",{value:C,text:T}),this[f]===C&&k.prop("selected",!0),w.append(k);m.append(b,w)}else if("descriptions"===t){if(b=q('<label for="'+y+'"> '+i[h].label+"</label>"),"prefDescPause"===f||"prefDescVisible"===f)m.addClass("able-prefs-checkbox"),w=q("<input>",{type:"checkbox",name:f,id:y,value:"true"}),1===this[f]&&w.prop("checked",!0),m.append(w,b);else if(this.synth){if(m.addClass("able-prefs-select"),w=q("<select>",{name:f,id:y}),"prefDescVoice"===f&&this.descVoices)for(p=0;p<this.descVoices.length;p++)T=(C=this.descVoices[p].name)+" ("+this.descVoices[p].lang+")",k=q("<option>",{value:C,text:T}),this[f]==C&&k.prop("selected",!0),w.append(k),this.$voiceSelectField=w;else if("prefDescPitch"==f?P=[0,.5,1,1.5,2]:"prefDescRate"==f?P=[.7,.8,.9,1,1.1,1.2,1.5,2,2.5,3]:"prefDescVolume"==f&&(P=[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]),void 0!==P)for(p=0;p<P.length;p++)C=P[p],T=this.makePrefsValueReadable(f,C),k=q("<option>",{value:C,text:T}),this[f]==C&&k.prop("selected",!0),w.append(k),m.append(b,w);w.on("change",function(){e.announceDescriptionText("sample",e.tt.sampleDescriptionText)}),m.append(b,w)}}else b=q('<label for="'+y+'"> '+i[h].label+"</label>"),w=q("<input>",{type:"checkbox",name:f,id:y,value:"true"}),1===this[f]&&w.prop("checked",!0),"keyboard"===t&&w.on("change",function(){"prefAltKey"===($=q(this).attr("name"))?(A=".able-modkey-alt",x=e.tt.prefAltKey+" + "):"prefCtrlKey"===$?(A=".able-modkey-ctrl",x=e.tt.prefCtrlKey+" + "):"prefShiftKey"===$&&(A=".able-modkey-shift",x=e.tt.prefShiftKey+" + "),q(this).is(":checked")?q(A).text(x):q(A).text("")}),m.append(w,b);c.append(m)}if(s.append(c),"captions"===t)"video"!==this.mediaType||this.usingYouTubeCaptions||(this.$sampleCapsDiv=q("<div>",{class:"able-captions-sample"}).text(this.tt.sampleCaptionText),s.append(this.$sampleCapsDiv),this.stylizeCaptions(this.$sampleCapsDiv));else if("descriptions"===t)this.synth&&(this.$sampleDescDiv=q("<div>",{class:"able-desc-sample"}).text(this.tt.sampleDescriptionText),s.append(this.$sampleDescDiv));else if("keyboard"===t){for(S=q("<h2>",{text:this.tt.prefHeadingKeyboard2}),N=q("<ul>"),I=[],B=[],h=0;h<this.controls.length;h++)"play"===this.controls[h]?(I.push(this.tt.play+"/"+this.tt.pause),B.push("p</span> <em>"+this.tt.or+'</em> <span class="able-help-modifiers"> '+this.tt.spacebar)):"restart"===this.controls[h]?(I.push(this.tt.restart),B.push("s")):"previous"===this.controls[h]?(I.push(this.tt.prevTrack),B.push("b")):"next"===this.controls[h]?(I.push(this.tt.nextTrack),B.push("n")):"rewind"===this.controls[h]?(I.push(this.tt.rewind),B.push("r")):"forward"===this.controls[h]?(I.push(this.tt.forward),B.push("f")):"volume"===this.controls[h]?(I.push(this.tt.volume),B.push("v</span> <em>"+this.tt.or+'</em> <span class="able-modkey">1-9'),I.push(this.tt.mute+"/"+this.tt.unmute),B.push("m")):"captions"===this.controls[h]?(1<this.captions.length?I.push(this.tt.captions):this.captionsOn?I.push(this.tt.hideCaptions):I.push(this.tt.showCaptions),B.push("c")):"descriptions"===this.controls[h]?(this.descOn?I.push(this.tt.turnOffDescriptions):I.push(this.tt.turnOnDescriptions),B.push("d")):"prefs"===this.controls[h]?(I.push(this.tt.preferences),B.push("e")):"help"===this.controls[h]&&(I.push(this.tt.help),B.push("h"));for(h=0;h<B.length;h++)M='<span class="able-modkey-alt">',1===this.prefAltKey&&(M+=this.tt.prefAltKey+" + "),M+="</span>",M+='<span class="able-modkey-ctrl">',1===this.prefCtrlKey&&(M+=this.tt.prefCtrlKey+" + "),M+="</span>",M+='<span class="able-modkey-shift">',1===this.prefShiftKey&&(M+=this.tt.prefShiftKey+" + "),M+="</span>",M+='<span class="able-modkey">'+B[h]+"</span>",M+=" = "+I[h],F=q("<li>",{html:M}),N.append(F);M='<span class="able-modkey">'+this.tt.escapeKey+"</span>",M+=" = "+this.tt.escapeKeyFunction,F=q("<li>",{html:M}),N.append(F),s.append(S,N)}q("body").append(s),V=new AccessibleDialog(s,this.$prefsButton,"dialog",a,W,e.tt.closeButtonLabel,"32em"),s.append("<hr>"),z=q('<button class="modal-button">'+this.tt.save+"</button>"),L=q('<button class="modal-button">'+this.tt.cancel+"</button>"),z.click(function(){V.hide(),e.savePrefsFromForm()}),L.click(function(){V.hide(),e.resetPrefsForm()}),s.append(z),s.append(L),"captions"===t?this.captionPrefsDialog=V:"descriptions"===t?this.descPrefsDialog=V:"keyboard"===t?this.keyboardPrefsDialog=V:"transcript"===t&&(this.transcriptPrefsDialog=V),q("div.able-prefs-form button.modalCloseButton").click(function(){e.resetPrefsForm()}),q("div.able-prefs-form").keydown(function(t){27===t.which&&e.resetPrefsForm()})},AblePlayer.prototype.rebuildDescPrefsForm=function(){var t,e,i,s;for(this.$voiceSelectField=q("#"+this.mediaId+"_prefDescVoice"),t=0;t<this.descVoices.length;t++)i=(e=this.descVoices[t].name)+" ("+this.descVoices[t].lang+")",s=q("<option>",{value:e,text:i}),this.prefDescVoice==e&&s.prop("selected",!0),this.$voiceSelectField.append(s)},AblePlayer.prototype.makePrefsValueReadable=function(t,e){if("prefDescPitch"===t){if(0===e)return this.tt.prefDescPitch1;if(.5===e)return this.tt.prefDescPitch2;if(1===e)return this.tt.prefDescPitch3;if(1.5===e)return this.tt.prefDescPitch4;if(2===e)return this.tt.prefDescPitch5}else if("prefDescRate"===t){if(.7===e)return 1;if(.8===e)return 2;if(.9===e)return 3;if(1===e)return 4;if(1.1===e)return 5;if(1.2===e)return 6;if(1.5===e)return 7;if(2===e)return 8;if(2.5===e)return 9;if(3===e)return 10}else if("prefDescVolume"===t)return 10e;return e},AblePlayer.prototype.resetPrefsForm=function(){var t,e,i,s;for(t=this.getCookie(),e=this.getAvailablePreferences(),i=0;i<e.length;i++)s=e[i].name,this.mediaId+"_"+s,-1!==s.indexOf("Captions")&&"prefCaptions"!==s?q('select[name="'+s+'"]').val(t.preferences[s]):1===this[s]?q('input[name="'+s+'"]').prop("checked",!0):q('input[name="'+s+'"]').prop("checked",!1);this.stylizeCaptions(this.$sampleCapsDiv)},AblePlayer.prototype.savePrefsFromForm=function(){var t,e,i,s,a,n,r,o,l;n=a=0,r=!1,t=this.getCookie(),e=this.getAvailablePreferences();for(var h=0;h<e.length;h++)e[h].label&&(i=e[h].name,s=this.mediaId+"_"+i,"prefDescFormat"==i?(this.prefDescFormat="video",this.prefDescFormat!==t.preferences.prefDescFormat&&(t.preferences.prefDescFormat=this.prefDescFormat,a++)):-1!==i.indexOf("Captions")&&"prefCaptions"!==i?(l=q('select[id="'+s+'"]').val(),t.preferences[i]!==l&&(t.preferences[i]=l,this[i]=l,a++,n++),"prefCaptionsSize"===i&&(r=!0,o=l)):-1!==i.indexOf("Desc")&&"prefDescPause"!==i&&"prefDescVisible"!==i?(l=q('select[id="'+s+'"]').val(),t.preferences[i]!==l&&(t.preferences[i]=l,this[i]=l,a++)):q('input[id="'+s+'"]').is(":checked")?(t.preferences[i]=1)===this[i]||(this[i]=1,a++):(t.preferences[i]=0,1===this[i]&&(this[i]=0,a++)));if(0<a?(this.setCookie(t),this.showAlert(this.tt.prefSuccess)):this.showAlert(this.tt.prefNoChange),"youtube"===this.player&&void 0!==this.usingYouTubeCaptions&&this.usingYouTubeCaptions&&r&&this.youTubePlayer.setOption("captions","fontSize",this.translatePrefs("size",o,"youtube")),1<AblePlayerInstances.length)for(h=0;h<AblePlayerInstances.length;h++)AblePlayerInstances[h].updatePrefs(),AblePlayerInstances[h].geteferences(),AblePlayerInstances[h].resetPrefsForm(),0<n&&(AblePlayerInstances[h].stylizeCaptions(AblePlayerInstances[h].$captionsDiv),void 0!==AblePlayerInstances[h].$descDiv&&AblePlayerInstances[h].stylizeCaptions(AblePlayerInstances[h].$descDiv));else this.updatePrefs(),0<n&&(this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv))},AblePlayer.prototype.updatePrefs=function(){this.$transcriptDiv&&(1===this.prefTabbable?this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"):this.$transcriptDiv.find("span.able-transcript-seekpoint").removeAttr("tabindex"),0===this.prefHighlight&&this.$transcriptDiv.find("span").removeClass("able-highlight")),this.updateCaption(),this.refreshingDesc=!0,this.initDescription()},AblePlayer.prototype.usingModifierKeys=function(t){return!(1===this.prefAltKey&&!t.altKey)&&(!(1===this.prefCtrlKey&&!t.ctrlKey)&&!(1===this.prefShiftKey&&!t.shiftKey))}}(jQuery),function(l){function h(t,e){for(var i=[],s=0;s<e.length;s++)i.push(p(t,e[s]));return i}function p(t,e){var i=e(t);if(null!==t.error)throw t.error;return i}function a(t,e){for(var i=0;i<e.length;i++)"\n"===e[i]?(t.column=1,t.line+=1):t.column+=1}function c(t,e){var i=t.text.substring(0,e);return a(t,i),t.text=t.text.substring(e),i}function u(t,e){var i,s=t.text.indexOf("\n");return-1===s?(a(t,i=t.text),t.text=""):(i=t.text.substring(0,s),a(t,i+"\n"),t.text=t.text.substring(s+1)),i}function d(t){var e=t.text.indexOf("\n");return-1===e?t.text:t.text.substring(0,e)}function s(t){h(t,[w,P]);var e=t.text[0];" "===e||"\t"===e||"\n"===e?h(t,[$,i,x,o]):t.error="WEBVTT signature not followed by whitespace."}function i(t){for(;;){var e=d(t);if(-1!==e.indexOf("--\x3e"))return;if(0===e.length)return;var i=p(t,n);t.metadata[i[0]]=i[1],p(t,$)}}function g(t){var e=[],i=t.indexOf(" ");0<=i&&e.push(i);var s=t.indexOf("\t");0<=s&&e.push(s);var a=t.indexOf("\n");return 0<=a&&e.push(a),Math.min.apply(null,e)}function n(t){var e=t.text.indexOf("\n"),i=c(t,e),s=i.indexOf(":");return-1===s?void(t.error="Missing colon."):[i.substring(0,s),i.substring(s+1)]}function r(t){var e=c(t,g(t.text)),i=e.indexOf(":");return-1===i?void(t.error="Missing colon."):[e.substring(0,i),e.substring(i+1)]}function o(t){for(;;){var e=d(t);if(0!==e.indexOf("NOTE")||4!==e.length&&" "!==e[4]&&"\t"!==e[4])if(0===l.trim(e).length&&0<t.text.length)p(t,A);else{if(!(0<l.trim(e).length))return;p(t,f)}else h(t,[b,A])}}function f(t){var e,i=d(t);if(-1===i.indexOf("--\x3e")&&(e=u(t),-1===(i=d(t)).indexOf("--\x3e")))return"Invalid WebVTT file: "+t.src+"\n","Line: "+t.line+", ","Column: "+t.column+"\n","Expected cue timing for cueId '"+e+"' but found: "+i+"\n",void(console.warn||console.log);var s=h(t,[D,T,k,T,D]),a=s[0],n=s[4];if(n<=a)t.error="Start time is not sooner than end time.";else{p(t,C);var r=p(t,m);c(t,1);var o=p(t,v);void 0===e&&(e=t.cues.length+1),t.cues.push({id:e,start:a,end:n,settings:r,components:o})}}function m(t){for(var e={};0<t.text.length&&"\n"!==t.text[0];){var i=p(t,r);e[i[0]]=i[1],p(t,C)}return e}function v(t){for(var e={type:"internal",tagName:"",value:"",classes:[],annotation:"",parent:null,children:[],language:""},i=e,s=[];0<t.text.length;){var a=d(t);if(-1!==a.indexOf("--\x3e")||/^\s$/.test(a))break;if(2<=t.text.length&&"\n"===t.text[0]&&"\n"===t.text[1]){c(t,2);break}var n=y(t);if("string"===n.type)i.children.push(n);else if("startTag"===n.type)n.type=n.tagName,n.parent=i,-1!==l.inArray(n.tagName,["i","b","u","ruby"])?(0<s.length&&(i.language=s[s.length-1]),i.children.push(n),i=n):"rt"===n.tagName&&"ruby"===i.tagName?(0<s.length&&(i.language=s[s.length-1]),i.children.push(n),i=n):"c"===n.tagName?(n.value=n.annotation,0<s.length&&(i.language=s[s.length-1]),i.children.push(n),i=n):"v"===n.tagName?(n.value=n.annotation,0<s.length&&(i.language=s[s.length-1]),i.children.push(n),i=n):"lang"===n.tagName&&(s.push(n.annotation),0<s.length&&(i.language=s[s.length-1]),i.children.push(n),i=n);else if("endTag"===n.type)n.tagName===i.type&&-1!==l.inArray(n.tagName,["c","i","b","u","ruby","rt","v"])?i=i.parent:"lang"===n.tagName&&"lang"===i.type?(i=i.parent,s.pop()):"ruby"===n.tagName&&"rt"===i.type&&(i=i.parent.parent);else if("timestampTag"===n.type){var r={text:n.value,error:null,metadata:{},cues:[],line:1,column:1};try{var o=p(r,D);0===r.text.length&&(n.value=o,i.push(n))}catch(t){}}}return e}function y(t){for(var e="data",i=[],s="",a={type:"",tagName:"",value:"",classes:[],annotation:"",children:[]};;){var n;if(n=2<=t.text.length&&"\n"===t.text[0]&&"\n"===t.text[1]?"":0<t.text.length?t.text[0]:"","data"===e)if("&"===n)s="&",e="escape";else if("<"===n){if(0!==i.length)return a.type="string",a.value=i.join(""),a;e="tag"}else{if(""===n)return{type:"string",value:i.join("")};i.push(n)}else if("escape"===e)if("&"===n)i.push(s),s="&";else if(n.match(/[0-9a-z]/))s+=n;else if(";"===n)"&"===s?i.push("&"):"<"===s?i.push("<"):">"===s?i.push(">"):"&lrm"===s?i.push("‎"):"&rlm"===s?i.push("‏"):" "===s?i.push(" "):(i.push(s),i.push(";")),e="data";else{if("<"===n||""===n)return i.push(s),a.type="string",a.value=i.join(""),a;if("\t"===n||"\n"===n||"\f"===n||" "===n)return i.push(s),a.type="string",a.value=i.join(""),a;i.push(s),e="data"}else if("tag"===e)if("\t"===n||"\n"===n||"\f"===n||" "===n)e="startTagAnnotation";else if("."===n)e="startTagClass";else if("/"===n)e="endTag";else if(n.match("[0-9]"))e="timestampTag",i.push(n);else{if(">"===n){c(t,1);break}if(""===n)return a.tagName="",a.type="startTag",a;i.push(n),e="startTag"}else if("startTag"===e)if("\t"===n||"\f"===n||" "===n)e="startTagAnnotation";else if("\n"===n)s=n,e="startTagAnnotation";else if("."===n)e="startTagClass";else{if(">"===n)return c(t,1),a.tagName=i.join(""),a.type="startTag",a;if(""===n)return a.tagName=i.join(""),a.type="startTag",a;i.push(n)}else if("startTagClass"===e)if("\t"===n||"\f"===n||" "===n)a.classes.push(s),s="",e="startTagAnnotation";else if("\n"===n)a.classes.push(s),s=n,e="startTagAnnotation";else if("."===n)a.classes.push(s),s="";else{if(">"===n)return c(t,1),a.classes.push(s),a.type="startTag",a.tagName=i.join(""),a;if(""===n)return a.classes.push(s),a.type="startTag",a.tagName=i.join(""),a;s+="c"}else if("startTagAnnotation"===e){if(">"===n)return c(t,1),s=l.trim(s).replace(/ +/," "),a.type="startTag",a.tagName=i.join(""),a.annotation=s,a;if(""===n)return s=l.trim(s).replace(/ +/," "),a.type="startTag",a.tagName=i.join(""),a.annotation=s,a;s+=n}else if("endTag"===e){if(">"===n)return c(t,1),a.type="endTag",a.tagName=i.join(""),a;if(""===n)return a.type="endTag",a.tagName=i.join(""),a;i.push(n)}else{if("timestampTag"!==e)throw"Unknown tokenState "+e;if(">"===n)return c(t,1),a.type="timestampTag",a.name=i.join(""),a;if(""===n)return a.type="timestampTag",a.name=i.join(""),a;i.push(n)}c(t,1)}}function b(t){if(-1===u(t).indexOf("--\x3e"))for(;;){var e=d(t);if(0===l.trim(e).length)return;if(-1!==e.indexOf("--\x3e"))return void(t.error="Invalid syntax: --\x3e in comment.");u(t)}else t.error="Invalid syntax: --\x3e in NOTE line."}function w(t){"\ufeff"===t.text[0]&&c(t,1)}function P(t){"WEBVTT"===t.text.substring(0,6)?c(t,6):t.error="Invalid signature."}function k(t){t.text.length<3||"--\x3e"!==t.text.substring(0,3)?t.error="Missing --\x3e":c(t,3)}function C(t){for(;"\t"===t.text[0]||" "===t.text[0];)c(t,1)}function T(t){for(var e=0;"\t"===t.text[0]||" "===t.text[0];)c(t,1),e+=1;0===e&&(t.error="Missing space.")}function $(t){var e=t.text.indexOf("\n");-1===e?t.error="Missing EOL.":c(t,e+1)}function A(t){for(;0<t.text.length;){var e=d(t);if(0!==l.trim(e).length)break;u(t)}}function x(t){for(var e=0;0<t.text.length;){var i=d(t);if(0!==l.trim(i).length)break;u(t),e+=1}0===e&&(t.error="Missing empty line.")}function D(t){var e=g(t.text);if(-1!==e){var i=c(t,e),s=/((\d\d):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(i);if(s){var a=0,n=s[2],r=s[4];if(r){if(59<parseInt(r,10))return void(t.error="Invalid minute range");n&&(a+=3600parseInt(n,10)),a+=60parseInt(r,10);var o=s[5];if(59<parseInt(o,10))return void(t.error="Invalid second range");a+=parseInt(o,10),a+=parseInt(s[6],10)/1e3}else a+=parseInt(s[7],10),a+=parseInt(s[8],10)/1e3;return a}t.error="Unable to parse timestamp"}else t.error("Missing timing.")}AblePlayer.prototype.parseWebVTT=function(t,e){var i={src:t,text:e=e.replace(/(\r\n|\n|\r)/g,"\n"),error:null,metadata:{},cues:[],line:1,column:1};try{p(i,s)}catch(t){"Line: "+i.line+", ","Column: "+i.column+"\n",t,console.warn||console.log}return i}}(jQuery),function($){AblePlayer.prototype.injectPlayerCode=function(){var t;this.$mediaContainer=this.$media.wrap('<div class="able-media-container"></div>').parent(),this.$ableDiv=this.$mediaContainer.wrap('<div class="able"></div>').parent(),this.$ableWrapper=this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(),this.$ableWrapper.addClass("able-skin-"+this.skin),this.$ableWrapper.css({"max-width":this.playerMaxWidth+"px"}),this.injectOffscreenHeading(),"video"===this.mediaType&&("image"==this.iconType||"youtube"===this.player&&!this.hasPoster||this.injectBigPlayButton(),t=$("<div>",{class:"able-vidcap-container"}),this.$vidcapContainer=this.$mediaContainer.wrap(t).parent()),this.injectPlayerControlArea(),this.injectTextDescriptionArea(),this.injectAlert(),this.injectPlaylist()},AblePlayer.prototype.injectOffscreenHeading=function(){var t;"0"==this.playerHeadingLevel||(void 0===this.playerHeadingLevel&&(this.playerHeadingLevel=this.getNextHeadingLevel(this.$ableDiv)),t="h"+this.playerHeadingLevel.toString(),this.$headingDiv=$("<"+t+">"),this.$ableDiv.prepend(this.$headingDiv),this.$headingDiv.addClass("able-offscreen"),this.$headingDiv.text(this.tt.playerHeading))},AblePlayer.prototype.injectBigPlayButton=function(){this.$bigPlayButton=$("<button>",{class:"able-big-play-button icon-play","aria-hidden":!0,tabindex:-1});var t=this;this.$bigPlayButton.click(function(){t.handlePlay()}),this.$mediaContainer.append(this.$bigPlayButton)},AblePlayer.prototype.injectPlayerControlArea=function(){this.$playerDiv=$("<div>",{class:"able-player",role:"region","aria-label":this.mediaType+" player"}),this.$playerDiv.addClass("able-"+this.mediaType),this.$nowPlayingDiv=$("<div>",{class:"able-now-playing","aria-live":"assertive","aria-atomic":"true"}),this.$controllerDiv=$("<div>",{class:"able-controller"}),this.$controllerDiv.addClass("able-"+this.iconColor+"-controls"),this.$statusBarDiv=$("<div>",{class:"able-status-bar"}),this.$timer=$("<span>",{class:"able-timer"}),this.$elapsedTimeContainer=$("<span>",{class:"able-elapsedTime",text:"0:00"}),this.$durationContainer=$("<span>",{class:"able-duration"}),this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer),this.$speed=$("<span>",{class:"able-speed","aria-live":"assertive"}).text(this.tt.speed+": 1x"),this.$status=$("<span>",{class:"able-status","aria-live":"polite"}),this.$statusBarDiv.append(this.$timer,this.$speed,this.$status),this.$playerDiv.append(this.$nowPlayingDiv,this.$controllerDiv,this.$statusBarDiv),this.$ableDiv.append(this.$playerDiv)},AblePlayer.prototype.injectTextDescriptionArea=function(){this.$descDiv=$("<div>",{class:"able-descriptions"}),this.exposeTextDescriptions&&this.$descDiv.attr({"aria-live":"assertive","aria-atomic":"true"}),this.$descDiv.hide(),this.$ableDiv.append(this.$descDiv)},AblePlayer.prototype.getDefaultWidth=function(t){return"transcript"===t?450:"sign"===t?400:void 0},AblePlayer.prototype.positionDraggableWindow=function(t,e){var i,s,a,n;i=this.getCookie(),"transcript"===t?(a=this.$transcriptArea,void 0!==i.transcript&&(s=i.transcript)):"sign"===t&&(a=this.$signWindow,void 0!==i.transcript&&(s=i.sign)),void 0===s||$.isEmptyObject(s)?(n=this.getOptimumPosition(t,e),void 0===e&&(e=this.getDefaultWidth(t)),a.css({position:n[0],width:e,"z-index":n[3]}),"absolute"===n[0]&&a.css({top:n[1]+"px",left:n[2]+"px"})):(a.css({position:s.position,width:s.width,"z-index":s.zindex}),"absolute"===s.position&&a.css({top:s.top,left:s.left}),this.updateZIndex(t))},AblePlayer.prototype.getOptimumPosition=function(t,e){var i,s,a,n,r,o;return void 0===e&&(e=this.getDefaultWidth(t)),5,i=[],s=this.$ableDiv.width(),this.$ableDiv.height(),(a=this.$ableDiv.offset()).top,n=a.left,r=$(window).width(),o=0,"transcript"===t?void 0!==this.$signWindow&&this.$signWindow.is(":visible")&&(o=this.$signWindow.width()+5):"sign"===t&&void 0!==this.$transcriptArea&&this.$transcriptArea.is(":visible")&&(o=this.$transcriptArea.width()+5),e<r-(n+s+5+o)?(i[0]="absolute",i[1]=0,i[2]=s+o+5):e+5<n?(i[0]="absolute",i[1]=0,i[2]=n-e-5):i[0]="relative",i},AblePlayer.prototype.injectPoster=function(t,e){var i,s,a;"youtube"===e?void 0!==this.ytWidth?(s=this.ytWidth,a=this.ytHeight):void 0!==this.playerMaxWidth?(s=this.playerMaxWidth,a=this.playerMaxHeight):void 0!==this.playerWidth&&(s=this.playerWidth,a=this.playerHeight):"fallback"===e&&(s="100%",a="auto"),this.hasPoster&&(i=this.$media.attr("poster"),this.$posterImg=$("<img>",{class:"able-poster",src:i,alt:"",role:"presentation",width:s,height:a}),t.append(this.$posterImg))},AblePlayer.prototype.injectAlert=function(){var t;this.$alertBox=$('<div role="alert"></div>'),this.$alertBox.addClass("able-alert"),this.$alertBox.hide(),this.$alertBox.appendTo(this.$ableDiv),t="audio"==this.mediaType?"-10":2Math.round(this.$mediaContainer.height()/3),this.$alertBox.css({top:t+"px"}),this.$srAlertBox=$('<div role="alert"></div>'),this.$srAlertBox.addClass("able-screenreader-alert"),this.$srAlertBox.appendTo(this.$ableDiv)},AblePlayer.prototype.injectPlaylist=function(){if(!0===this.playlistEmbed){var t=this.$playlistDom.clone();t.insertBefore(this.$statusBarDiv),this.$playlist=t.find("li")}},AblePlayer.prototype.createPopup=function(e,t){var i,s,a,n,r,o,l,h,p,c,u,d;if(s=$("<ul>",{id:(i=this).mediaId+"-"+e+"-menu",class:"able-popup",role:"menu"}).hide(),"captions"===e&&s.addClass("able-popup-captions"),"prefs"===e)if(1<this.prefCats.length){for(a=0;a<this.prefCats.length;a++)n=$("<li></li>",{role:"menuitem",tabindex:"-1"}),"captions"===(r=this.prefCats[a])?n.text(this.tt.prefMenuCaptions):"descriptions"===r?n.text(this.tt.prefMenuDescriptions):"keyboard"===r?n.text(this.tt.prefMenuKeyboard):"transcript"===r&&n.text(this.tt.prefMenuTranscript),n.on("click",function(){p=$(this).text(),i.showingPrefsDialog=!0,i.setFullscreen(!1),p===i.tt.prefMenuCaptions?i.captionPrefsDialog.show():p===i.tt.prefMenuDescriptions?i.descPrefsDialog.show():p===i.tt.prefMenuKeyboard?i.keyboardPrefsDialog.show():p===i.tt.prefMenuTranscript&&i.transcriptPrefsDialog.show(),i.closePopups(),i.showingPrefsDialog=!1}),s.append(n);this.$prefsButton.attr("data-prefs-popup","menu")}else 1==this.prefCats.length&&this.$prefsButton.attr("data-prefs-popup",this.prefCats[0]);else if("captions"===e||"chapters"===e){for(o=!1,a=0;a<t.length;a++)l=t[a],n=$("<li></li>",{role:"menuitemradio",tabindex:"-1",lang:l.language}),l.def&&1==this.prefCaptions?(n.attr("aria-checked","true"),o=!0):n.attr("aria-checked","false"),"captions"==e?(n.text(l.label),n.on("click",this.getCaptionClickFunction(l))):"chapters"==e&&(n.text(this.flattenCueForCaption(l)+" - "+this.formatSecondsAsColonTime(l.start)),n.on("click",this.getChapterClickFunction(l.start))),s.append(n);"captions"===e&&(n=$("<li></li>",{role:"menuitemradio",tabindex:"-1"}).text(this.tt.captionsOff),0===this.prefCaptions?(n.attr("aria-checked","true"),o=!0):n.attr("aria-checked","false"),n.on("click",this.getCaptionOffFunction()),s.append(n))}else if("transcript-window"===e||"sign-window"===e)for((h=[]).push({name:"move",label:this.tt.windowMove}),h.push({name:"resize",label:this.tt.windowResize}),h.push({name:"close",label:this.tt.windowClose}),a=0;a<h.length;a++)(n=$("<li></li>",{role:"menuitem",tabindex:"-1","data-choice":h[a].name})).text(h[a].label),n.on("click mousedown",function(t){if(t.stopPropagation(),void 0!==t.button&&0!==t.button)return!1;i.windowMenuClickRegistered||i.finishingDrag||(i.windowMenuClickRegistered=!0,i.handleMenuChoice(e.substr(0,e.indexOf("-")),$(this).attr("data-choice"),t))}),s.append(n);return"captions"!==e||o?"chapters"===e&&(s.find('li:contains("'+this.defaultChapter+'")')?s.find('li:contains("'+this.defaultChapter+'")').attr("aria-checked","true").addClass("able-focus"):s.find("li").first().attr("aria-checked","true").addClass("able-focus")):s.find("li[lang="+this.captionLang+"]")?s.find("li[lang="+this.captionLang+"]").attr("aria-checked","true"):s.find("li").last().attr("aria-checked","true"),s.on("keydown",function(t){$(this).attr("id").split("-")[1],c=$(this).find("li:focus"),d=c.is(":first-child")?(u=$(this).find("li").last(),c.next()):c.is(":last-child")?(u=c.prev(),$(this).find("li").first()):(u=c.prev(),c.next()),9===t.which?t.shiftKey?(c.removeClass("able-focus"),u.focus().addClass("able-focus")):(c.removeClass("able-focus"),d.focus().addClass("able-focus")):40===t.which||39===t.which?(c.removeClass("able-focus"),d.focus().addClass("able-focus")):38==t.which||37===t.which?(c.removeClass("able-focus"),u.focus().addClass("able-focus")):32===t.which||13===t.which?c.click():27===t.which&&(c.removeClass("able-focus"),i.closePopups()),t.preventDefault()}),this.$controllerDiv.append(s),s},AblePlayer.prototype.closePopups=function(){var t=this;this.chaptersPopup&&this.chaptersPopup.is(":visible")&&(this.chaptersPopup.hide(),this.$chaptersButton.removeAttr("aria-expanded").focus()),this.captionsPopup&&this.captionsPopup.is(":visible")&&(this.captionsPopup.hide(),this.$ccButton.removeAttr("aria-expanded").focus()),this.prefsPopup&&this.prefsPopup.is(":visible")&&!this.hidingPopup&&(this.hidingPopup=!0,this.prefsPopup.hide(),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$prefsButton.removeAttr("aria-expanded"),this.showingPrefsDialog||this.$prefsButton.focus(),setTimeout(function(){t.hidingPopup=!1},100)),this.$volumeSlider&&this.$volumeSlider.is(":visible")&&(this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeAlert.text(this.tt.volumeSliderClosed),this.$volumeButton.removeAttr("aria-expanded").focus()),this.$transcriptPopup&&this.$transcriptPopup.is(":visible")&&(this.$transcriptPopup.hide(),this.$transcriptPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$transcriptPopupButton.removeAttr("aria-expanded").focus()),this.$signPopup&&this.$signPopup.is(":visible")&&(this.$signPopup.hide(),this.$signPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$signPopupButton.removeAttr("aria-expanded").focus())},AblePlayer.prototype.setupPopups=function(t){var e,i;if(e=[],void 0===t&&e.push("prefs"),"captions"!==t&&void 0!==t||0<this.captions.length&&e.push("captions"),"chapters"!==t&&void 0!==t||0<this.chapters.length&&this.useChaptersButton&&e.push("chapters"),"transcript-window"===t&&"popup"===this.transcriptType&&e.push("transcript-window"),"sign-window"===t&&this.hasSignLanguage&&e.push("sign-window"),0<e.length){this;for(var s=0;s<e.length;s++){var a=e[s];if(!1,"prefs"==a)this.prefsPopup=this.createPopup("prefs");else if("captions"==a)void 0!==this.captionsPopup&&this.captionsPopup||(this.captionsPopup=this.createPopup("captions",this.captions));else if("chapters"==a)i=this.selectedChapters?this.selectedChapters.cues:1<=this.chapters.length?this.chapters[0].cues:[],void 0!==this.chaptersPopup&&this.chaptersPopup||(this.chaptersPopup=this.createPopup("chapters",i));else{if("transcript-window"==a)return this.createPopup("transcript-window");if("sign-window"==a)return this.createPopup("sign-window")}}}},AblePlayer.prototype.provideFallback=function(){var t,e,i,s,a,n,r,o,l,h;if(n=!1,t=$("<div>",{class:"able-fallback",role:"alert"}),e=void 0!==this.playerMaxWidth?this.playerMaxWidth+"px":this.$media.attr("width")?parseInt(this.$media.attr("width"),10)+"px":"100%",t.css("max-width",e),i=this.$media.clone(),$("source, track",i).remove(),(s=i.html().trim()).length?t.html(s):(a=this.tt.fallbackError1+" "+this.tt[this.mediaType]+". ",a+=this.tt.fallbackError2+":",s=$("<p>").text(a),t.html(s),n=!0),n){for(h=$("<ul>"),r=this.getSupportingBrowsers(),o=0;o<r.length;o++)(l=$("<li>")).text(r[o].name+" "+r[o].minVersion+" "+this.tt.orHigher),h.append(l);t.append(h)}this.injectPoster(t,"fallback"),void 0!==this.$ableWrapper?(this.$ableWrapper.before(t),this.$ableWrapper.remove()):void 0!==this.$media?(this.$media.before(t),this.$media.remove()):$("body").prepend(t)},AblePlayer.prototype.getSupportingBrowsers=function(){var t=[];return t[0]={name:"Chrome",minVersion:"31"},t[1]={name:"Firefox",minVersion:"34"},t[2]={name:"Internet Explorer",minVersion:"10"},t[3]={name:"Opera",minVersion:"26"},t[4]={name:"Safari for Mac OS X",minVersion:"7.1"},t[5]={name:"Safari for iOS",minVersion:"7.1"},t[6]={name:"Android Browser",minVersion:"4.1"},t[7]={name:"Chrome for Android",minVersion:"40"},t},AblePlayer.prototype.calculateControlLayout=function(){var t,e,i;return(t=[])[0]=[],t[1]=[],"legacy"===this.skin&&(t[2]=[],t[3]=[]),t[0].push("play"),t[0].push("restart"),t[0].push("rewind"),t[0].push("forward"),"legacy"===this.skin&&t[1].push("seek"),this.hasPlaylist&&("legacy"===this.skin?(t[0].push("previous"),t[0].push("next")):"2020"==this.skin&&(t[0].push("previous"),t[0].push("next"))),this.isPlaybackRateSupported()?(e=!0,"legacy"===this.skin&&(t[2].push("slower"),t[2].push("faster"))):e=!1,"video"===this.mediaType&&(i=0,this.hasCaptions&&(i++,"legacy"===this.skin?t[2].push("captions"):"2020"==this.skin&&t[1].push("captions")),this.hasSignLanguage&&(i++,"legacy"===this.skin?t[2].push("sign"):"2020"==this.skin&&t[1].push("sign")),(this.hasOpenDesc||this.hasClosedDesc)&&this.useDescriptionsButton&&(i++,"legacy"===this.skin?t[2].push("descriptions"):"2020"==this.skin&&t[1].push("descriptions"))),"popup"!==this.transcriptType||this.hideTranscriptButton||(i++,"legacy"===this.skin?t[2].push("transcript"):"2020"==this.skin&&t[1].push("transcript")),"video"===this.mediaType&&this.hasChapters&&this.useChaptersButton&&(i++,"legacy"===this.skin?t[2].push("chapters"):"2020"==this.skin&&t[1].push("chapters")),"2020"==this.skin&&0<i&&t[1].push("pipe"),e&&"2020"===this.skin&&(t[1].push("faster"),t[1].push("slower"),t[1].push("pipe")),"legacy"===this.skin?t[3].push("preferences"):"2020"==this.skin&&t[1].push("preferences"),"video"===this.mediaType&&this.allowFullScreen&&("legacy"===this.skin?t[3].push("fullscreen"):t[1].push("fullscreen")),this.browserSupportsVolume()?(!0,this.volumeButton="volume-"+this.getVolumeName(this.volume),"legacy"===this.skin?t[1].push("volume"):"2020"==this.skin&&t[1].push("volume")):(!1,this.volume=!1),t},AblePlayer.prototype.addControls=function(){var u,t,e,i,s,a,n,r,o,l,h,p,c,d,g,f,m,v,y,b,w,P;for(100,e=(t=(u=this).calculateControlLayout()).length,b=this.mediaId+"-tooltip",this.$tooltipDiv=$("<div>",{id:b,class:"able-tooltip"}).hide(),this.$controllerDiv.append(this.$tooltipDiv),"2020"==this.skin&&(r=$('<div class="able-seekbar"></div>'),o=this.mediaType+" "+this.tt.seekbarLabel,this.$controllerDiv.append(r),this.seekBar=new AccessibleSlider(this.mediaType,r,"horizontal",100,0,this.duration,this.seekInterval,o,"seekbar",!0,"visible")),i=0;i<e;i++){for(a=t[i],n=$("<div>",i%2==0?{class:"able-left-controls"}:{class:"able-right-controls"}),this.$controllerDiv.append(n),s=0;s<a.length;s++){if("seek"===(c=a[s]))r=$('<div class="able-seekbar"></div>'),o=this.mediaType+" "+this.tt.seekbarLabel,n.append(r),void 0!==this.duration&&0!==this.duration||(this.duration=60,this.elapsed=0),this.seekBar=new AccessibleSlider(this.mediaType,r,"horizontal",100,0,this.duration,this.seekInterval,o,"seekbar",!0,"visible");else if("pipe"===c)l=$("<span>",{tabindex:"-1","aria-hidden":"true"}),"font"===this.iconType?l.addClass("icon-pipe"):(h=$("<img>",{src:this.rootPath+"button-icons/"+this.iconColor+"/pipe.png",alt:"",role:"presentation"}),l.append(h)),n.append(l);else{if(g="volume"===c?this.rootPath+"button-icons/"+this.iconColor+"/"+this.volumeButton+".png":"fullscreen"===c?this.rootPath+"button-icons/"+this.iconColor+"/fullscreen-expand.png":"slower"===c?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/turtle.png":this.rootPath+"button-icons/"+this.iconColor+"/slower.png":"faster"===c?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/rabbit.png":this.rootPath+"button-icons/"+this.iconColor+"/faster.png":this.rootPath+"button-icons/"+this.iconColor+"/"+c+".png",f=this.getButtonTitle(c),m=$("<div>",{role:"button",tabindex:"0","aria-label":f,class:"able-button-handler-"+c}),"volume"!==c&&"preferences"!==c||("preferences"==c?(this.prefCats=this.getPreferencesGroups(),1<this.prefCats.length?(P=this.mediaId+"-prefs-menu",m.attr({"aria-controls":P,"aria-haspopup":"menu"})):1===this.prefCats.length&&m.attr({"aria-haspopup":"dialog"})):"volume"===c&&(P=this.mediaId+"-volume-slider",m.attr({"aria-controls":P,"aria-expanded":"false"}))),"font"===this.iconType)v="volume"===c?"icon-"+this.volumeButton:"slower"===c?"animals"===this.speedIcons?"icon-turtle":"icon-slower":"faster"===c?"animals"===this.speedIcons?"icon-rabbit":"icon-faster":"icon-"+c,y=$("<span>",{class:v,"aria-hidden":"true"}),m.append(y);else if("svg"===this.iconType){var k;k="volume"===c?this.getSvgData(this.volumeButton):"fullscreen"===c?this.getSvgData("fullscreen-expand"):"slower"===c?"animals"===this.speedIcons?this.getSvgData("turtle"):this.getSvgData("slower"):"faster"===c?"animals"===this.speedIcons?this.getSvgData("rabbit"):this.getSvgData("faster"):this.getSvgData(c),y=$("<svg>",{focusable:"false","aria-hidden":"true",viewBox:k[0]}),p=$("<path>",{d:k[1]}),y.append(p),m.html(y),m.html(m.html())}else d=$("<img>",{src:g,alt:"",role:"presentation"}),m.append(d);var C=$("<span>",{class:"able-clipped"}).text(f);m.append(C),m.on("mouseenter focus",function(t){var e=$(this).attr("aria-label"),i=$(this).position(),s=$(this).height(),a=$(this).width(),n=u.$controllerDiv.width();i.right=n-i.left-a;var r=i.top-s-15;if($(this).parent().hasClass("able-right-controls"))var o="right";else o="left";var l=AblePlayer.localGetElementById(m[0],b).text(e).width();if("left"==o){(p=i.left-l/2)<0&&(p=2);var h={left:p+"px",right:"",top:r+"px"}}else{var p;(p=i.right-l/2)<0&&(p=2);h={left:"",right:p+"px",top:r+"px"}}var c=AblePlayer.localGetElementById(m[0],b).text(e).css(h);u.showTooltip(c),$(this).on("mouseleave blur",function(){AblePlayer.localGetElementById(m[0],b).text("").hide()})}),"captions"===c?this.prefCaptions&&1===this.prefCaptions||(w=1<this.captions.length?this.tt.captions:this.tt.showCaptions,m.addClass("buttonOff").attr("title",w)):"descriptions"===c&&(this.prefDesc&&1===this.prefDesc||m.addClass("buttonOff").attr("title",this.tt.turnOnDescriptions)),n.append(m),"play"===c?this.$playpauseButton=m:"previous"==c?(this.$prevButton=m,"previous"==this.buttonWithFocus&&(this.$prevButton.focus(),this.buttonWithFocus=null)):"next"==c?(this.$nextButton=m,"next"==this.buttonWithFocus&&(this.$nextButton.focus(),this.buttonWithFocus=null)):"captions"===c?this.$ccButton=m:"sign"===c?(this.$signButton=m,this.$signWindow.is(":visible")||this.$signButton.addClass("buttonOff")):"descriptions"===c?this.$descButton=m:"mute"===c?this.$muteButton=m:"transcript"===c?(this.$transcriptButton=m,this.$transcriptDiv.is(":visible")||this.$transcriptButton.addClass("buttonOff").attr("title",this.tt.showTranscript)):"fullscreen"===c?this.$fullscreenButton=m:"chapters"===c?this.$chaptersButton=m:"preferences"===c?this.$prefsButton=m:"volume"===c&&(this.$volumeButton=m)}"volume"===c&&this.addVolumeSlider(n)}i%2==1&&this.$controllerDiv.append('<div style="clear:both;"></div>')}for(var T in"video"===this.mediaType&&(void 0!==this.$captionsDiv&&this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv)),this.controls=[],t)t.hasOwnProperty(T)&&(this.controls=this.controls.concat(t[T]));this.refreshControls("init")},AblePlayer.prototype.useSvg=function(){var t,e,g=Object.create(null),f=function(){clearTimeout(e),e=setTimeout(t,100)},m=function(){},v="http://www.w3.org/1999/xlink";t=function(){var t,e,i,s,a,n,r,o,l,h=0;if(window.XMLHttpRequest&&(a=void 0!==(a=new XMLHttpRequest).withCredentials?XMLHttpRequest:XDomainRequest||void 0),void 0!==a){for(m(),o=document.getElementsByTagName("use"),s=0;s<o.length;s+=1){try{e=o[s].getBoundingClientRect()}catch(t){e=!1}t=(r=o[s].getAttributeNS(v,"href").split("#"))[0],i=r[1],n=e&&0===e.left&&0===e.right&&0===e.top&&0===e.bottom,e&&0===e.width&&0===e.height&&!n?t.length&&(!0!==(l=g[t])&&setTimeout(c({useEl:o[s],base:t,hash:i}),0),void 0===l&&(l=new a,(g[t]=l).onload=u(l),l.onerror=d(l),l.ontimeout=d(l),l.open("GET",t),l.send(),h+=1)):n||(void 0===g[t]?g[t]=!0:g[t].onload&&(g[t].abort(),g[t].onload=void 0,g[t]=!0))}o="",h+=1,p()}function p(){0===(h-=1)&&function(){var t;window.addEventListener("resize",f,!1),window.addEventListener("orientationchange",f,!1),m=window.MutationObserver?((t=new MutationObserver(f)).observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}),function(){try{t.disconnect(),window.removeEventListener("resize",f,!1),window.removeEventListener("orientationchange",f,!1)}catch(t){}}):(document.documentElement.addEventListener("DOMSubtreeModified",f,!1),function(){document.documentElement.removeEventListener("DOMSubtreeModified",f,!1),window.removeEventListener("resize",f,!1),window.removeEventListener("orientationchange",f,!1)})}()}function c(t){return function(){!0!==g[t.base]&&t.useEl.setAttributeNS(v,"xlink:href","#"+t.hash)}}function u(s){return function(){var t,e=document.body,i=document.createElement("x");s.onload=null,i.innerHTML=s.responseText,(t=i.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",e.insertBefore(t,e.firstChild)),p()}}function d(t){return function(){t.onerror=null,t.ontimeout=null,p()}}}},AblePlayer.prototype.cuePlaylistItem=function(t){var e,i,s,a,n,r,o=this;i=this.player,this.initializing||this.playerCreated&&this.deletePlayer(),e=this.$playlist.eq(t),"youtube"===(s=this.hasAttr(e,"data-youtube-id")?(this.youTubeId=e.attr("data-youtube-id"),"youtube"):"html5")?"html5"===i&&(this.playing&&this.pauseMedia(),this.$media.hide()):(this.youTubeId=!1,"youtube"===i&&this.$media.show()),this.player=s,this.swappingSrc=!0,this.hasAttr(e,"data-poster")&&this.$media.attr("poster",e.attr("data-poster")),this.hasAttr(e,"data-width")&&this.$media.attr("width",e.attr("data-width")),this.hasAttr(e,"data-height")&&this.$media.attr("height",e.attr("data-height")),this.hasAttr(e,"data-youtube-desc-id")&&this.$media.attr("data-youtube-desc-id",e.attr("data-youtube-desc-id")),this.youTubeId&&this.$media.attr("data-youtube-id",e.attr("data-youtube-id"));var l=e.children("span.able-source");l.length&&l.each(function(){if(o.hasAttr($(this),"data-src")){var t=$("<source>",{src:$(this).attr("data-src")});o.hasAttr($(this),"data-type")&&t.attr("type",$(this).attr("data-type")),o.hasAttr($(this),"data-desc-src")&&t.attr("data-desc-src",$(this).attr("data-desc-src")),o.hasAttr($(this),"data-sign-src")&&t.attr("data-sign-src",$(this).attr("data-sign-src")),o.$media.append(t)}});var h=e.children("span.able-track");h.length&&h.each(function(){if(o.hasAttr($(this),"data-src")&&o.hasAttr($(this),"data-kind")&&o.hasAttr($(this),"data-srclang")){var t=$("<track>",{src:$(this).attr("data-src"),kind:$(this).attr("data-kind"),srclang:$(this).attr("data-srclang")});o.hasAttr($(this),"data-label")&&t.attr("label",$(this).attr("data-label")),o.$media.append(t)}}),a=e.text(),this.hasAttr(e,"lang")&&(n=e.attr("lang")),this.$sources=this.$media.find("source"),this.recreatePlayer(),this.$playlist.removeClass("able-current"),this.$playlist.eq(t).addClass("able-current"),!0===this.showNowPlaying&&void 0!==this.$nowPlayingDiv&&(r=$("<span>"),void 0!==n&&r.attr("lang",n),r.html("<span>"+this.tt.selectedTrack+":</span>"+a),this.$nowPlayingDiv.html(r)),this.initializing?this.swappingSrc=!1:(this.swappingSrc=!0,"html5"===this.player?this.media.load():"youtube"===this.player&&(this.okToPlay=!0))},AblePlayer.prototype.deletePlayer=function(){"youtube"==this.player&&this.$mediaContainer.find("iframe").remove();this.$media.removeAttr("poster width height"),this.$media.empty(),this.$controllerDiv.empty(),this.$elapsedTimeContainer.empty().text("0:00"),this.$durationContainer.empty(),this.$signWindow&&this.$signWindow.remove(),this.$transcriptArea&&this.$transcriptArea.remove(),$(".able-modal-dialog").remove(),this.hasCaptions=!1,this.hasChapters=!1,this.captionsPopup=null,this.chaptersPopup=null},AblePlayer.prototype.getButtonTitle=function(t){return"playpause"===t?this.tt.play:"play"===t?this.tt.play:"pause"===t?this.tt.pause:"restart"===t?this.tt.restart:"previous"===t?this.tt.prevTrack:"next"===t?this.tt.nextTrack:"rewind"===t?this.tt.rewind:"forward"===t?this.tt.forward:"captions"===t?1<this.captions.length?this.tt.captions:this.captionsOn?this.tt.hideCaptions:this.tt.showCaptions:"descriptions"===t?this.descOn?this.tt.turnOffDescriptions:this.tt.turnOnDescriptions:"transcript"===t?this.$transcriptDiv.is(":visible")?this.tt.hideTranscript:this.tt.showTranscript:"chapters"===t?this.tt.chapters:"sign"===t?this.tt.sign:"volume"===t?this.tt.volume:"faster"===t?this.tt.faster:"slower"===t?this.tt.slower:"preferences"===t?this.tt.preferences:"help"!==t?"fullscreen"===t?this.fullscreen?this.tt.exitFullScreen:this.tt.enterFullScreen:(this.debug,t.charAt(0).toUpperCase()+t.slice(1)):void 0}}(jQuery),function(c){AblePlayer.prototype.setupTracks=function(){var l,a,t,n,r,o,h,p;return l=this,t=(a=new c.Deferred).promise(),n=[],this.captions=[],this.descriptions=[],this.chapters=[],this.meta=[],c("#able-vts").length?(this.vtsTracks=[],this.hasVts=!0):this.hasVts=!1,this.getTracks().then(function(){for(h=l.tracks,o=0;o<h.length;o++){var t=(p=h[o]).kind,e=p.language,i=p.label;if(p.src){var s=p.src;r=l.loadTextObject(s),n.push(r.catch(function(t){})),r.then(function(a,n){a.src;var r=a.language,o=a.label;return function(t,e){var i=e,s=l.parseWebVTT(t,i).cues;l.hasVts&&l.setupVtsTracks(n,r,o,t,i),"captions"===n||"subtitles"===n?l.setupCaptions(a,r,o,s):"descriptions"===n?l.setupDescriptions(a,s,r):"chapters"===n?l.setupChapters(a,s,r):"metadata"===n&&l.setupMetadata(a,s)}}(p,t))}else(l.usingYouTubeCaptions||l.usingVimeoCaptions)&&l.setupCaptions(p,e,i)}c.when.apply(c,n).then(function(){a.resolve()})}),t},AblePlayer.prototype.getTracks=function(){var t,e,i,s,a,n,r,o,l,h;if(t=this,i=(e=new c.Deferred).promise(),this.$tracks=this.$media.find("track"),this.tracks=[],s=[],this.captions=[],this.$tracks.length&&this.$tracks.each(function(){a=c(this).attr("srclang")?c(this).attr("srclang"):t.lang,n=c(this).attr("label")?c(this).attr("label"):t.getLanguageName(a),(r=!!c(this).attr("default")||a===t.lang)&&(t.captionLang=a),t.tracks.push({kind:c(this).attr("kind"),src:c(this).attr("src"),language:a,label:n,def:r}),"captions"!==c(this).attr("kind")&&"subtitles"!=c(this).attr("kind")||s.push({kind:c(this).attr("kind"),src:c(this).attr("src"),language:a,label:n,def:r})}),s.length){for(this.usingYouTubeCaptions=!1,this.usingVimeoCaptions=!1,o=0;o<s.length;o++)if(0===this.captions.length)this.captions.push({language:s[o].language,label:s[o].label,def:s[o].def});else{for(h=!1,l=0;l<this.captions.length;l++)if(s[o].label.toLowerCase()<this.captions[l].label.toLowerCase()){this.captions.splice(l,0,{language:s[o].language,label:s[o].label,def:s[o].def}),h=!0;break}h||this.captions.push({language:s[o].language,label:s[o].label,def:s[o].def})}e.resolve()}else"youtube"===this.player?this.getYouTubeCaptionTracks(this.youTubeId).then(function(){t.usingYouTubeCaptions=!0,e.resolve()}):"vimeo"===this.player?this.getVimeoCaptionTracks().then(function(){t.usingVimeoCaptions=!0,e.resolve()}):(this.hasCaptions=!1,e.resolve());return i},AblePlayer.prototype.setupCaptions=function(t,e,i,s){var a;if(void 0===s&&(s=null),this.captions.length?(this.hasCaptions=!0,this.currentCaption=-1,1===this.prefCaptions?this.captionsOn=!0:this.captionsOn=!1):this.hasCaptions=!1,this.$media.find("track").removeAttr("default"),"video"===this.mediaType){for(this.usingYouTubeCaptions||this.usingVimeoCaptions||this.$captionsDiv||(this.$captionsDiv=c("<div>",{class:"able-captions"}),this.$captionsWrapper=c("<div>",{class:"able-captions-wrapper","aria-hidden":"true"}).hide(),"below"===this.prefCaptionsPosition?this.$captionsWrapper.addClass("able-captions-below"):this.$captionsWrapper.addClass("able-captions-overlay"),this.$captionsWrapper.append(this.$captionsDiv),this.$vidcapContainer.append(this.$captionsWrapper)),a=0;a<this.captions.length;a++)this.captions[a].language===e&&(this.captions[a].cues=s);for(a=0;a<this.tracks.length;a++)this.tracks[a].language===e&&(this.tracks[a].cues=s)}},AblePlayer.prototype.setupDescriptions=function(t,e,i){this.hasClosedDesc=!0,this.currentDescription=-1,this.descriptions.push({cues:e,language:i})},AblePlayer.prototype.setupChapters=function(t,e,i){this.hasChapters=!0,this.chapters.push({cues:e,language:i})},AblePlayer.prototype.setupMetadata=function(t,e){"text"===this.metaType?this.metaDiv&&c("#"+this.metaDiv)&&(this.$metaDiv=c("#"+this.metaDiv),this.hasMeta=!0,this.meta=e):"selector"===this.metaType&&(this.hasMeta=!0,this.visibleSelectors=[],this.meta=e)},AblePlayer.prototype.loadTextObject=function(s){var a,t,n,r;return t=(a=new c.Deferred).promise(),n=this,(r=c("<div>",{style:"display:none"})).load(s,function(t,e,i){"error"===e?(n.debug,a.reject(s)):a.resolve(s,t),r.remove()}),t}}(jQuery),function(h){AblePlayer.prototype.initYouTubePlayer=function(){var t,e,i,s;return t=this,i=(e=new h.Deferred).promise(),s=this.youTubeDescId&&this.prefDesc?this.youTubeDescId:this.youTubeId,this.activeYouTubeId=s,AblePlayer.youTubeIframeAPIReady?this.finalizeYoutubeInit().then(function(){e.resolve()}):(AblePlayer.loadingYouTubeIframeAPI||h.getScript("https://www.youtube.com/iframe_api").fail(function(){e.fail()}),h("body").on("youTubeIframeAPIReady",function(){t.finalizeYoutubeInit().then(function(){e.resolve()})})),i},AblePlayer.prototype.finalizeYoutubeInit=function(){var e,t,i,s,a,n;return t=(e=new h.Deferred).promise(),s=(i=this).mediaId+"_youtube",this.$mediaContainer.prepend(h("<div>").attr("id",s)),1,(a=this.getYouTubeDimensions(this.activeYouTubeId,s))?(this.ytWidth=a[0],this.ytHeight=a[1],this.aspectRatio=i.ytWidth/i.ytHeight):(this.ytWidth=null,this.ytHeight=null),n=this.okToPlay?1:0,void 0===this.captionLang&&(this.captionLang=this.lang),this.youTubePlayer=new YT.Player(s,{videoId:this.activeYouTubeId,host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",width:this.ytWidth,height:this.ytHeight,playerVars:{autoplay:n,enablejsapi:1,disableKb:1,playsinline:this.playsInline,start:this.startTime,controls:0,cc_load_policy:1,cc_lang_pref:this.captionLang,hl:this.lang,modestbranding:1,rel:0,iv_load_policy:3},events:{onReady:function(){i.swappingSrc&&(i.swappingSrc=!1,i.cueingPlaylistItem=!1,i.playing&&i.playMedia()),i.userClickedPlaylist&&(i.userClickedPlaylist=!1),void 0===i.aspectRatio&&i.resizeYouTubePlayer(i.activeYouTubeId,s),e.resolve()},onError:function(t){e.fail()},onStateChange:function(t){i.getPlayerState().then(function(t){"playing"===t?(i.playing=!0,i.startedPlaying=!0,i.paused=!1):"ended"==t?i.onMediaComplete():(i.playing=!1,i.paused=!0),i.stoppingYouTube&&"paused"===t&&(void 0!==i.$posterImg&&i.$posterImg.show(),i.stoppingYouTube=!1,i.seeking=!1,i.playing=!1,i.paused=!0)}),"youtube"!==i.player||i.usingYouTubeCaptions||i.youTubePlayer.getOptions("captions")&&i.youTubePlayer.unloadModule("captions")},onPlaybackQualityChange:function(){}}}),this.injectPoster(this.$mediaContainer,"youtube"),this.hasPlaylist||this.$media.remove(),t},AblePlayer.prototype.getYouTubeDimensions=function(t){var e,i,s,a;return e=[],void 0!==this.playerMaxWidth?(e[0]=this.playerMaxWidth,void 0!==this.playerMaxHeight&&(e[1]=this.playerMaxHeight),e):void 0!==h("#"+t)&&(s=(i=h("#"+t)).width(),a=i.height(),0<s&&0<a)&&(e[0]=s,e[1]=a,e)},AblePlayer.prototype.resizeYouTubePlayer=function(t,e){var i,s,a;void 0!==this.aspectRatio?this.restoringAfterFullScreen?(this.youTubePlayer&&this.youTubePlayer.setSize(this.ytWidth,this.ytHeight),this.restoringAfterFullScreen=!1):(s=this.$ableWrapper.parent().width(),a=Math.round(s/this.aspectRatio),this.$ableWrapper.css({"max-width":s+"px",width:""}),this.youTubePlayer.setSize(s,a),this.fullscreen?this.youTubePlayer.setSize(s,a):this.youTubePlayer.setSize(this.ytWidth,this.ytHeight)):(i=this.getYouTubeDimensions(e))&&(s=i[0],a=i[1],0<s&&0<a&&(this.aspectRatio=s/a,this.ytWidth=s,this.ytHeight=a,s!==this.$ableWrapper.width()&&(s=this.$ableWrapper.width(),a=Math.round(s/this.aspectRatio),this.youTubePlayer&&this.youTubePlayer.setSize(s,a))))},AblePlayer.prototype.getYouTubeCaptionTracks=function(t){var e,i,s,a,n,r,o=new h.Deferred,l=o.promise();return(e=this).youTubePlayer.getOption("captions","tracklist")||(this.youTubePlayer.addEventListener("onApiChange",function(t){if(e.loadingYouTubeCaptions){for(i=e.youTubePlayer.getOption("captions","tracklist"),e.youTubePlayer.stopVideo(),s=0;s<i.length;s++)a=i[s].languageCode,n=i[s].languageName,r=!1,void 0!==e.captionLang?a===e.captionLang&&(r=!0):void 0!==e.lang&&a===e.lang&&(r=!0),e.tracks.push({kind:"captions",language:a,label:n,def:r});e.captions=e.tracks,e.hasCaptions=!0,e.setupPopups("captions"),e.loadingYouTubeCaptions=!1}e.captionLangPending&&(e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLangPending}),e.captionLangPending=null),void 0!==e.prefCaptionsSize&&e.youTubePlayer.setOption("captions","fontSize",e.translatePrefs("size",e.prefCaptionsSize,"youtube")),o.resolve()}),this.loadingYouTubeCaptions=!0,this.youTubePlayer.playVideo()),l},AblePlayer.prototype.getYouTubeTimedTextUrl=function(t,e,i){var s="https://www.youtube.com/api/timedtext?fmt=vtt";return s+="&v="+t,s+="&lang="+i,""!==e&&(s+="&name="+e),s},AblePlayer.prototype.getYouTubeCaptionCues=function(t){var e,i=(e=new h.Deferred).promise();return this.tracks=[],this.tracks.push({kind:"captions",src:"some_file.vtt",language:"en",label:"Fake English captions"}),e.resolve(),i},AblePlayer.prototype.getYouTubePosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+t;return"120"==e?i+"/default.jpg":"320"==e?i+"/hqdefault.jpg":"480"==e?i+"/hqdefault.jpg":"640"==e&&i+"/sddefault.jpg"}}(jQuery),function(d){window.AccessibleSlider=function(t,e,i,s,a,n,r,o,l,h,p){var c,u;(c=this).position=0,this.tracking=!1,this.trackDevice=null,this.keyTrackPosition=0,this.lastTrackPosition=0,this.nextStep=1,this.inertiaCount=0,this.bodyDiv=d(e),h&&(this.loadedDiv=d("<div></div>"),this.playedDiv=d("<div></div>")),this.seekHead=d("<div>",{"aria-orientation":i,class:"able-"+l+"-head"}),"visible"===p?this.seekHead.attr("tabindex","0"):this.seekHead.attr("tabindex","-1"),this.seekHead.attr({role:"slider","aria-label":o,"aria-valuemin":a,"aria-valuemax":n}),this.timeTooltip=d("<div>"),this.bodyDiv.append(this.timeTooltip),this.timeTooltip.attr("role","tooltip"),this.timeTooltip.addClass("able-tooltip"),this.timeTooltip.hide(),this.bodyDiv.append(this.loadedDiv),this.bodyDiv.append(this.playedDiv),this.bodyDiv.append(this.seekHead),this.bodyDiv.wrap("<div></div>"),this.wrapperDiv=this.bodyDiv.parent(),"legacy"===this.skin&&("horizontal"===i?(this.wrapperDiv.width(s),this.loadedDiv.width(0)):(this.wrapperDiv.height(s),this.loadedDiv.height(0))),this.wrapperDiv.addClass("able-"+l+"-wrapper"),h&&(this.loadedDiv.addClass("able-"+l+"-loaded"),this.playedDiv.width(0),this.playedDiv.addClass("able-"+l+"-played"),this.setDuration(n)),this.seekHead.on("mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend",function(t){u=c.pointerEventToXY(t),"mouseenter"===t.type||"focus"===t.type?c.overHead=!0:"mouseleave"===t.type||"blur"===t.type?(c.overHead=!1,!c.overBody&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x))):"mousemove"===t.type||"touchmove"===t.type?c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x):"mousedown"===t.type||"touchstart"===t.type?(c.startTracking("mouse",c.pageXToPosition(c.seekHead.offset()+c.seekHead.width()/2)),c.bodyDiv.is(":focus")||c.bodyDiv.focus(),t.preventDefault()):"mouseup"!==t.type&&"touchend"!==t.type||c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x)),"mousemove"!==t.type&&"mousedown"!==t.type&&"mouseup"!==t.type&&"touchstart"!==t.type&&"touchend"!==t.type&&c.refreshTooltip()}),this.bodyDiv.on("mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend",function(t){if(u=c.pointerEventToXY(t),"mouseenter"===t.type)c.overBody=!0;else if("mouseleave"===t.type)c.overBody=!1,c.overBodyMousePos=null,!c.overHead&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("mousemove"===t.type||"touchmove"===t.type)c.overBodyMousePos={x:u.x,y:u.y},c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x);else if("mousedown"===t.type||"touchstart"===t.type)c.startTracking("mouse",c.pageXToPosition(u.x)),c.trackHeadAtPageX(u.x),c.seekHead.is(":focus")||c.seekHead.focus(),t.preventDefault();else if("mouseup"===t.type||"touchend"===t.type)c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("keydown"===t.type){if(36===t.which)c.trackImmediatelyTo(0);else if(35===t.which)c.trackImmediatelyTo(c.duration);else if(37===t.which||40===t.which)c.arrowKeyDown(-1);else if(39===t.which||38===t.which)c.arrowKeyDown(1);else if(33===t.which&&0<r)c.arrowKeyDown(r);else{if(!(34===t.which&&0<r))return;c.arrowKeyDown(-r)}t.preventDefault()}else"keyup"===t.type&&33<=t.which&&t.which<=40&&(c.tracking&&"keyboard"===c.trackDevice&&c.stopTracking(c.keyTrackPosition),t.preventDefault());"mouseup"!==t.type&&"keydown"!==t.type&&"keydown"!==t.type&&c.refreshTooltip()})},AccessibleSlider.prototype.arrowKeyDown=function(t){this.tracking&&"keyboard"===this.trackDevice?(this.keyTrackPosition=this.boundPos(this.keyTrackPosition+this.nextStept),this.inertiaCount+=1,20===this.inertiaCount&&(this.inertiaCount=0,this.nextStep=2)):(this.nextStep=1,this.inertiaCount=0,this.keyTrackPosition=this.boundPos(this.position+this.nextStept),this.startTracking("keyboard",this.keyTrackPosition)),this.trackHeadAtPosition(this.keyTrackPosition)},AccessibleSlider.prototype.pageXToPosition=function(t){var e=t-this.bodyDiv.offset().left,i=this.duration(e/this.bodyDiv.width());return this.boundPos(i)},AccessibleSlider.prototype.boundPos=function(t){return Math.max(0,Math.min(t,this.duration))},AccessibleSlider.prototype.setDuration=function(t){t!==this.duration&&(this.duration=t,this.resetHeadLocation(),this.seekHead.attr("aria-valuemax",t))},AccessibleSlider.prototype.setWidth=function(t){this.wrapperDiv.width(t),this.resizeDivs(),this.resetHeadLocation()},AccessibleSlider.prototype.getWidth=function(){return this.wrapperDiv.width()},AccessibleSlider.prototype.resizeDivs=function(){this.playedDiv.width(this.bodyDiv.width()(this.position/this.duration)),this.loadedDiv.width(this.bodyDiv.width()this.buffered)},AccessibleSlider.prototype.resetHeadLocation=function(){var t=this.position/this.duration,e=this.bodyDiv.width()t;this.seekHead.css("left",e-this.seekHead.width()/2),this.tracking&&this.stopTracking(this.position)},AccessibleSlider.prototype.setPosition=function(t,e){this.position=t,this.resetHeadLocation(),this.refreshTooltip(),this.resizeDivs(),this.updateAriaValues(t,e)},AccessibleSlider.prototype.setBuffered=function(t){isNaN(t)||(this.buffered=t,this.redrawDivs)},AccessibleSlider.prototype.startTracking=function(t,e){this.tracking||(this.trackDevice=t,this.tracking=!0,this.bodyDiv.trigger("startTracking",[e]))},AccessibleSlider.prototype.stopTracking=function(t){this.trackDevice=null,this.tracking=!1,this.bodyDiv.trigger("stopTracking",[t]),this.setPosition(t,!0)},AccessibleSlider.prototype.trackHeadAtPageX=function(t){var e=this.pageXToPosition(t),i=t-this.bodyDiv.offset().left-this.seekHead.width()/2;i=Math.max(0,Math.min(i,this.bodyDiv.width()-this.seekHead.width())),this.lastTrackPosition=e,this.seekHead.css("left",i),this.reportTrackAtPosition(e)},AccessibleSlider.prototype.trackHeadAtPosition=function(t){var e=t/this.duration,i=this.bodyDiv.width()e;this.lastTrackPosition=t,this.seekHead.css("left",i-this.seekHead.width()/2),this.reportTrackAtPosition(t)},AccessibleSlider.prototype.reportTrackAtPosition=function(t){this.bodyDiv.trigger("tracking",[t]),this.updateAriaValues(t,!0)},AccessibleSlider.prototype.updateAriaValues=function(t,e){var i,s=Math.floor(t/3600),a=Math.floor(t%3600/60),n=Math.floor(t%60),r=1===a?"minute":"minutes",o=1===n?"second":"seconds";i=0<s?s+" "+(1===s?"hour":"hours")+", "+a+" "+r+", "+n+" "+o:0<a?a+" "+r+", "+n+" "+o:n+" "+o,this.liveAriaRegion||(this.liveAriaRegion=d("<span>",{class:"able-offscreen","aria-live":"polite"}),this.wrapperDiv.append(this.liveAriaRegion)),e&&this.liveAriaRegion.text()!==i&&this.liveAriaRegion.text(i),this.seekHead.attr("aria-valuetext",i),this.seekHead.attr("aria-valuenow",Math.floor(t).toString())},AccessibleSlider.prototype.trackImmediatelyTo=function(t){this.startTracking("keyboard",t),this.trackHeadAtPosition(t),this.keyTrackPosition=t},AccessibleSlider.prototype.refreshTooltip=function(){this.overHead?(this.timeTooltip.show(),this.tracking?this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)):this.timeTooltip.text(this.positionToStr(this.position)),this.setTooltipPosition(this.seekHead.position().left+this.seekHead.width()/2)):this.overBody&&this.overBodyMousePos?(this.timeTooltip.show(),this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))),this.setTooltipPosition(this.overBodyMousePos.x-this.bodyDiv.offset().left)):this.timeTooltip.hide()},AccessibleSlider.prototype.setTooltipPosition=function(t){this.timeTooltip.css({left:t-this.timeTooltip.width()/2-10,bottom:this.seekHead.height()+10})},AccessibleSlider.prototype.positionToStr=function(t){var e=Math.floor(t/3600),i=Math.floor(t/60)%60,s=Math.floor(t%60);return s<10&&(s="0"+s),0<e?(i<10&&(i="0"+i),e+":"+i+":"+s):i+":"+s},AccessibleSlider.prototype.pointerEventToXY=function(t){var e={x:0,y:0};if("touchstart"==t.type||"touchmove"==t.type||"touchend"==t.type||"touchcancel"==t.type){var i=t.originalEvent.touches[0]||t.originalEvent.changedTouches[0];e.x=i.pageX,e.y=i.pageY}else"mousedown"!=t.type&&"mouseup"!=t.type&&"mousemove"!=t.type&&"mouseover"!=t.type&&"mouseout"!=t.type&&"mouseenter"!=t.type&&"mouseleave"!=t.type||(e.x=t.pageX,e.y=t.pageY);return e}}(jQuery),function(r){AblePlayer.prototype.addVolumeSlider=function(t){var e,i,s,a,n;i=(e=this).mediaId+"-volume-slider",s=this.mediaId+"-volume-help",this.volumeTrackHeight=50,this.volumeHeadHeight=7,this.volumeTickHeight=this.volumeTrackHeight/10,this.$volumeSlider=r("<div>",{id:i,class:"able-volume-slider","aria-hidden":"true"}).hide(),this.$volumeSliderTooltip=r("<div>",{class:"able-tooltip",role:"tooltip"}).hide(),this.$volumeSliderTrack=r("<div>",{class:"able-volume-track"}),this.$volumeSliderTrackOn=r("<div>",{class:"able-volume-track able-volume-track-on"}),this.$volumeSliderHead=r("<div>",{class:"able-volume-head",role:"slider","aria-orientation":"vertical","aria-label":this.tt.volumeUpDown,"aria-valuemin":0,"aria-valuemax":10,"aria-valuenow":this.volume,tabindex:-1}),this.$volumeSliderTrack.append(this.$volumeSliderTrackOn,this.$volumeSliderHead),this.$volumeAlert=r("<div>",{class:"able-offscreen","aria-live":"assertive","aria-atomic":"true"}),n=parseInt(e.volume)/10100,this.$volumeHelp=r("<div>",{id:s,class:"able-volume-help"}).text(n+"%, "+this.tt.volumeHelp),this.$volumeButton.attr({"aria-describedby":s}),this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeSliderTrack,this.$volumeAlert,this.$volumeHelp),t.append(this.$volumeSlider),this.refreshVolumeSlider(this.volume),this.$volumeSliderHead.on("mousedown",function(t){t.preventDefault(),e.draggingVolume=!0,e.volumeHeadPositionTop=r(this).offset().top}),this.$mediaContainer.on("mouseover",function(t){"youtube"==e.player&&(e.draggingVolume=!1)}),r(document).on("mouseup",function(t){e.draggingVolume=!1}),r(document).on("mousemove",function(t){e.draggingVolume&&(t.pageX,a=t.pageY,e.moveVolumeHead(a))}),this.$volumeSliderHead.on("keydown",function(t){if(37===t.which||40===t.which)e.handleVolume("down");else if(39===t.which||38===t.which)e.handleVolume("up");else{if(27!==t.which&&13!==t.which&&9!==t.which)return;e.$volumeSlider.is(":visible")?(e.closingVolume=!0,e.hideVolumePopup()):e.closingVolume||e.showVolumePopup()}t.preventDefault()})},AblePlayer.prototype.refreshVolumeSlider=function(t){var e,i,s,a,n;i=(e=t/10100)+"%",s=tthis.volumeTickHeight,n=(a=this.volumeTrackHeight-s)-this.volumeHeadHeight,this.$volumeSliderTrackOn&&this.$volumeSliderTrackOn.css({height:s+"px",top:a+"px"}),this.$volumeSliderHead&&(this.$volumeSliderHead.attr({"aria-valuenow":t,"aria-valuetext":i}),this.$volumeSliderHead.css({top:n+"px"})),this.$volumeAlert&&this.$volumeAlert.text(e+"%")},AblePlayer.prototype.refreshVolumeButton=function(t){var e,i,s,a,n,r;e=this.getVolumeName(t),i=t/10100,s=this.tt.volume+" "+i+"%","font"===this.iconType?(a="icon-volume-"+e,this.$volumeButton.find("span").first().removeClass().addClass(a),this.$volumeButton.find("span.able-clipped").text(s)):"image"===this.iconType?(n=this.imgPath+"volume-"+e+".png",this.$volumeButton.find("img").attr("src",n)):"svg"===this.iconType&&("mute"!==e&&(e="volume-"+e),r=this.getSvgData(e),this.$volumeButton.find("svg").attr("viewBox",r[0]),this.$volumeButton.find("path").attr("d",r[1]))},AblePlayer.prototype.moveVolumeHead=function(t){var e,i,s,a=this.volumeHeadPositionTop-t;if(Math.abs(a)>this.volumeTickHeight){if("up"==(e=0<a?"up":"down")&&10==this.volume)return;if("down"==e&&0==this.volume)return;i=Math.round(Math.abs(a)/this.volumeTickHeight),"up"==e?10<(s=this.volume+i)&&(s=10):(s=this.volume-i)<0&&(s=0),this.setVolume(s),this.refreshVolumeSlider(s),this.refreshVolumeButton(s),this.volumeHeadPositionTop=t}},AblePlayer.prototype.handleVolume=function(t){var e;void 0!==t?(49<=t&&t<=57?e=t-48:(e=this.getVolume(),"up"===t&&e<10?e+=1:"down"===t&&0<e&&(e-=1)),this.isMuted()&&0<e?this.setMute(!1):0===e?this.setMute(!0):(this.setVolume(e),this.refreshVolumeSlider(e),this.refreshVolumeButton(e))):this.$volumeSlider.is(":visible")?this.hideVolumePopup():this.closingVolume||this.showVolumePopup()},AblePlayer.prototype.handleMute=function(){this.isMuted()?this.setMute(!1):this.setMute(!0)},AblePlayer.prototype.showVolumePopup=function(){this.closePopups(),this.$tooltipDiv.hide(),this.$volumeSlider.show().attr("aria-hidden","false"),this.$volumeButton.attr("aria-expanded","true"),this.$volumeSliderHead.attr("tabindex","0").focus()},AblePlayer.prototype.hideVolumePopup=function(){var t=this;this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeSliderHead.attr("tabindex","-1"),this.$volumeButton.attr("aria-expanded","false").focus(),setTimeout(function(){t.closingVolume=!1},1e3)},AblePlayer.prototype.isMuted=function(){return"html5"===this.player?this.media.muted:"jw"===this.player&&this.jwPlayer?this.jwPlayer.getMute():"youtube"===this.player?this.youTubePlayer.isMuted():void 0},AblePlayer.prototype.setMute=function(t){t?(this.lastVolume=this.volume,this.volume=0):void 0!==this.lastVolume&&(this.volume=this.lastVolume),"html5"===this.player?this.media.muted=t:"jw"===this.player&&this.jwPlayer?this.jwPlayer.setMute(t):"youtube"===this.player&&(t?this.youTubePlayer.mute():this.youTubePlayer.unMute()),this.refreshVolumeSlider(this.volume),this.refreshVolumeButton(this.volume)},AblePlayer.prototype.setVolume=function(t){"html5"===this.player?(this.media.volume=t/10,this.hasSignLanguage&&this.signVideo&&(this.signVideo.volume=0)):"youtube"===this.player?(this.youTubePlayer.setVolume(10t),this.volume=t):"vimeo"===this.player?this.vimeoPlayer.setVolume(t/10).then(function(){}):"jw"===this.player&&this.jwPlayer&&this.jwPlayer.setVolume(10t),this.lastVolume=t},AblePlayer.prototype.getVolume=function(t){return"html5"===this.player?10this.media.volume:"youtube"===this.player?this.youTubePlayer.getVolume()/10:"vimeo"===this.player?this.volume:"jw"===this.player&&this.jwPlayer?this.jwPlayer.getVolume()/10:void 0},AblePlayer.prototype.getVolumeName=function(t){return 0==t?"mute":10==t?"loud":t<5?"soft":"medium"}}(jQuery),function(d){var g="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]";window.AccessibleDialog=function(t,e,i,s,a,n,r,o,l){this.title=s,this.closeButtonLabel=n,this.focusedElementBeforeModal=e,this.escapeHook=l,this.baseId=d(t).attr("id")||Math.floor(1e9Math.random()).toString();var h=this,p=t;if((this.modal=p).css({width:r||"50%"}),p.addClass("able-modal-dialog"),!o){var c=d("<button>",{class:"modalCloseButton",title:h.closeButtonLabel,"aria-label":h.closeButtonLabel}).text("X");c.keydown(function(t){32===t.which&&h.hide()}).click(function(){h.hide()});var u=d("<h1></h1>");u.attr("id","modalTitle-"+this.baseId),u.css("text-align","center"),u.text(s),a.attr("id","modalDesc-"+this.baseId),p.attr({"aria-labelledby":"modalTitle-"+this.baseId,"aria-describedby":"modalDesc-"+this.baseId}),p.prepend(u),p.prepend(c)}p.attr({"aria-hidden":"true",role:i}),p.keydown(function(t){if(27===t.which)h.escapeHook?h.escapeHook(t,this):(h.hide(),t.preventDefault());else if(9===t.which){var e=p.find("").filter(g).filter(":visible");if(0===e.length)return;var i=d(":focus"),s=e.index(i);t.shiftKey?0===s&&(e.get(e.length-1).focus(),t.preventDefault()):s===e.length-1&&(e.get(0).focus(),t.preventDefault())}t.stopPropagation()}),d("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden")},AccessibleDialog.prototype.show=function(){if(!this.overlay){var t=d("<div></div>").attr({class:"able-modal-overlay",tabindex:"-1"});this.overlay=t,d("body").append(t),t.on("mousedown.accessibleModal",function(t){t.preventDefault()})}d("body > ").not(".able-modal-overlay").not(".able-modal-dialog").attr("aria-hidden","true"),this.overlay.css("display","block"),this.modal.css("display","block"),this.modal.attr({"aria-hidden":"false",tabindex:"-1"}),0===this.modal.find("").filter(g).filter(":visible").length&&this.focusedElementBeforeModal.blur();var e=this;setTimeout(function(){e.modal.find("button.modalCloseButton").first().focus()},300)},AccessibleDialog.prototype.hide=function(){this.overlay&&this.overlay.css("display","none"),this.modal.css("display","none"),this.modal.attr("aria-hidden","true"),d("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden"),this.focusedElementBeforeModal.focus()},AccessibleDialog.prototype.getInputs=function(){return!!this.modal&&this.modal.find("input")}}(jQuery),function(n){AblePlayer.prototype.getNextHeadingLevel=function(t){var e,i,s,a;return t.parents().each(function(){if(e=n(this).children(":header"),i=e.length)return s=e.eq(i-1).prop("tagName"),!1}),void 0===s?a=1:(a=parseInt(s[1]),6<(a+=1)&&(a=6)),a},AblePlayer.prototype.countProperties=function(t){var e,i;for(i in e=0,t)t.hasOwnProperty(i)&&++e;return e},AblePlayer.prototype.formatSecondsAsColonTime=function(t,e){var i,s,a,n,r,o,l;if(e)if(2===(n=t.toString().split(".")).length){if((r=n[1]).length<3)for(o=3-r.length,l=1;l<=o;l++)r+="0"}else r="000";return i=Math.floor(t/3600),s=Math.floor(t/60)%60,(a=Math.floor(t%60))<10&&(a="0"+a),0<i?(s<10&&(s="0"+s),e?i+":"+s+":"+a+"."+r:i+":"+s+":"+a):e?(i<1?i="00":i<10&&(i="0"+i),s<1?s="00":s<10&&(s="0"+s),i+":"+s+":"+a+"."+r):s+":"+a},AblePlayer.prototype.getSecondsFromColonTime=function(t){var e;return 3===(e=t.split(":")).length?3600parseInt(e[0])+60parseInt(e[1])+parseFloat(e[2]):2===e.length?60parseInt(e[0])+parseFloat(e[1]):1===e.length?parseFloat(e[0]):void 0},AblePlayer.prototype.capitalizeFirstLetter=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},AblePlayer.prototype.roundDown=function(t,e){return Number(Math.floor(t+"e"+e)+"e-"+e)},AblePlayer.prototype.hasAttr=function(t,e){var i=t.attr(e);return void 0!==i&&!1!==i},Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t}}(jQuery),function(p){AblePlayer.prototype.initDescription=function(){this.refreshingDesc?this.prevDescFormat=this.useDescFormat:(this.descFile=this.$sources.first().attr("data-desc-src"),void 0!==this.descFile?this.hasOpenDesc=!0:this.youTubeDescId||this.vimeoDescId?this.hasOpenDesc=!0:this.hasOpenDesc=!1),this.prefDesc?this.hasOpenDesc&&this.hasClosedDesc?(this.useDescFormat=this.prefDescFormat,this.descOn=!0):this.hasOpenDesc?(this.useDescFormat="video",this.descOn=!0):this.hasClosedDesc&&(this.useDescFormat="text",this.descOn=!0):(this.useDescFormat=null,this.descOn=!1),"video"===this.useDescFormat&&(this.exposeTextDescriptions=!1),this.descOn?("video"===this.useDescFormat&&(this.usingDescribedVersion()||this.swapDescription()),this.hasClosedDesc&&(this.prefDescVisible?(this.$descDiv.show(),this.$descDiv.removeClass("able-clipped")):this.$descDiv.addClass("able-clipped"),this.swappingSrc||this.showDescription(this.elapsed))):"video"===this.prevDescFormat?this.usingDescribedVersion()&&this.swapDescription():"text"===this.prevDescFormat&&(this.$descDiv.hide(),this.$descDiv.removeClass("able-clipped")),this.refreshingDesc=!1},AblePlayer.prototype.usingDescribedVersion=function(){return"youtube"===this.player?this.activeYouTubeId===this.youTubeDescId:"vimeo"===this.player?this.activeVimeoId===this.vimeoDescId:this.$sources.first().attr("data-desc-src")===this.$sources.first().attr("src")},AblePlayer.prototype.getBrowserVoices=function(){var t,e,i;if(window.speechSynthesis&&(this.synth=window.speechSynthesis,t=this.synth.getVoices(),e=this.getDescriptionLangs(),0<t.length)){this.descVoices=[];for(var s=0;s<t.length;s++)(i=t[s].lang.substr(0,2).toLowerCase())!==this.lang.substr(0,2).toLowerCase()&&-1===e.indexOf(i)||this.descVoices.push(t[s]);this.descVoices.length||(this.descVoices=t)}return!1},AblePlayer.prototype.getDescriptionLangs=function(){var t=[];if(this.tracks)for(var e=0;e<this.tracks.length;e++)"descriptions"===this.tracks[e].kind&&t.push(this.tracks[e].language.substr(0,2).toLowerCase());return t},AblePlayer.prototype.updateDescriptionVoice=function(){var t,e;if(this.descVoices?this.$voiceSelectField||this.rebuildDescPrefsForm():(this.getBrowserVoices(),this.descVoices&&this.rebuildDescPrefsForm()),e=this.selectedDescriptions.language,this.synth&&0<(t=this.synth.getVoices()).length)for(var i=0;i<t.length;i++)if(t[i].lang.substr(0,2).toLowerCase()===e.substr(0,2).toLowerCase()){this.prefDescVoice=t[i].name,this.$voiceSelectField&&this.$voiceSelectField.val(this.prefDescVoice);break}},AblePlayer.prototype.swapDescription=function(){var t,e,i,s;if((t=this).swapTime=this.elapsed,this.descOn?this.showAlert(this.tt.alertDescribedVersion):this.showAlert(this.tt.alertNonDescribedVersion),"html5"===this.player){if(this.usingDescribedVersion()){for(e=0;e<this.$sources.length;e++)i=this.$sources[e].getAttribute("data-orig-src"),this.$sources[e].getAttribute("type"),i&&this.$sources[e].setAttribute("src",i);this.swappingSrc=!0}else{for(e=0;e<this.$sources.length;e++)i=this.$sources[e].getAttribute("src"),s=this.$sources[e].getAttribute("data-desc-src"),this.$sources[e].getAttribute("type"),s&&(this.$sources[e].setAttribute("src",s),this.$sources[e].setAttribute("data-orig-src",i));this.swappingSrc=!0}"html5"===this.player&&this.media.load()}else"youtube"===this.player?(this.usingDescribedVersion()?(this.activeYouTubeId=this.youTubeId,this.showAlert(this.tt.alertNonDescribedVersion)):(this.activeYouTubeId=this.youTubeDescId,this.showAlert(this.tt.alertDescribedVersion)),void 0!==this.youTubePlayer&&(t.playing?t.youTubePlayer.loadVideoById(t.activeYouTubeId,t.swapTime):t.youTubePlayer.cueVideoById(t.activeYouTubeId,t.swapTime))):"vimeo"===this.player&&(this.usingDescribedVersion()?(this.activeVimeoId=this.vimeoId,this.showAlert(this.tt.alertNonDescribedVersion)):(this.activeVimeoId=this.vimeoDescId,this.showAlert(this.tt.alertDescribedVersion)),this.vimeoPlayer.loadVideo(this.activeVimeoId).then(function(){t.playing?t.vimeoPlayer.setCurrentTime(t.swapTime):t.vimeoPlayer.pause()}))},AblePlayer.prototype.showDescription=function(t){if(this.exposeTextDescriptions&&!this.swappingSrc&&this.descOn){var e,i,s,a,n=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e.push(n(t.children[i]));return e.join("")};for(e=this.selectedDescriptions?this.selectedDescriptions.cues:1<=this.descriptions.length?this.descriptions[0].cues:[],i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s?this.currentDescription!==s&&(this.$status.removeAttr("aria-live"),a=n(e[s].components),window.speechSynthesis?(this.announceDescriptionText("description",a),this.prefDescVisible&&this.$descDiv.html(a).removeAttr("aria-live aria-atomic")):this.$descDiv.html(a),this.prefDescPause&&this.exposeTextDescriptions&&(this.pauseMedia(),this.pausedForDescription=!0),this.currentDescription=s):(this.$descDiv.html(""),this.currentDescription=-1,this.$status.attr("aria-live","polite"))}},AblePlayer.prototype.announceDescriptionText=function(e,t){var i,s,a,n,r,o,l,h;if((i=this).descVoices||this.getBrowserVoices(),l="sample"===e?(s=p("#"+this.mediaId+"_prefDescVoice").val(),r=p("#"+this.mediaId+"_prefDescPitch").val(),o=p("#"+this.mediaId+"_prefDescRate").val(),p("#"+this.mediaId+"_prefDescVolume").val()):(s=this.prefDescVoice,r=this.prefDescPitch,o=this.prefDescRate,this.prefDescVolume),this.descVoices&&0<this.descVoices.length){if(s)for(a=0;a<this.descVoices.length;a++)if(this.descVoices[a].name==s){n=this.descVoices[a];break}void 0===n&&(n=this.descVoices[0]),(h=new SpeechSynthesisUtterance).voice=n,h.voiceURI="native",h.volume=l,h.rate=o,h.pitch=r,h.text=t,h.lang=this.lang,h.onend=function(t){"description"===e&&i.prefDescPause&&i.pausedForDescription&&i.exposeTextDescriptions&&(i.playMedia(),this.pausedForDescription=!1)},h.onerror=function(t){},this.synth.speak(h)}}}(jQuery),jQuery,AblePlayer.prototype.getUserAgent=function(){this.userAgent={},this.userAgent.browser={},/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)?(this.userAgent.browser.name="Firefox",this.userAgent.browser.version=RegExp.$1):/MSIE (\d+\.\d+);/.test(navigator.userAgent)?(this.userAgent.browser.name="Internet Explorer",this.userAgent.browser.version=RegExp.$1):/Trident.rv[ :](\d+\.\d+)/.test(navigator.userAgent)?(this.userAgent.browser.name="Internet Explorer",this.userAgent.browser.version=RegExp.$1):/Edge[\/\s](\d+\.\d+)/.test(navigator.userAgent)?(this.userAgent.browser.name="Edge",this.userAgent.browser.version=RegExp.$1):/OPR\/(\d+\.\d+)/i.test(navigator.userAgent)?(this.userAgent.browser.name="Opera",this.userAgent.browser.version=RegExp.$1):/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor)?(this.userAgent.browser.name="Chrome",/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)&&(this.userAgent.browser.version=RegExp.$1)):/Safari/.test(navigator.userAgent)&&/Apple Computer/.test(navigator.vendor)?(this.userAgent.browser.name="Safari",/Version[\/\s](\d+\.\d+)/.test(navigator.userAgent)&&(this.userAgent.browser.version=RegExp.$1)):(this.userAgent.browser.name="Unknown",this.userAgent.browser.version="Unknown"),-1!=window.navigator.userAgent.indexOf("Windows NT 6.2")?this.userAgent.os="Windows 8":-1!=window.navigator.userAgent.indexOf("Windows NT 6.1")?this.userAgent.os="Windows 7":-1!=window.navigator.userAgent.indexOf("Windows NT 6.0")?this.userAgent.os="Windows Vista":-1!=window.navigator.userAgent.indexOf("Windows NT 5.1")?this.userAgent.os="Windows XP":-1!=window.navigator.userAgent.indexOf("Windows NT 5.0")?this.userAgent.os="Windows 2000":-1!=window.navigator.userAgent.indexOf("Mac")?this.userAgent.os="Mac/iOS":-1!=window.navigator.userAgent.indexOf("X11")?this.userAgent.os="UNIX":-1!=window.navigator.userAgent.indexOf("Linux")&&(this.userAgent.os="Linux"),this.debug},AblePlayer.prototype.isUserAgent=function(t){var e=navigator.userAgent.toLowerCase();return this.debug,-1!==e.indexOf(t.toLowerCase())},AblePlayer.prototype.isIOS=function(t){var e;return e=navigator.userAgent.toLowerCase(),!!/ipad|iphone|ipod/.exec(e)&&(void 0===t||-1!==e.indexOf("os "+t))},AblePlayer.prototype.browserSupportsVolume=function(){var t,e;return t=navigator.userAgent.toLowerCase(),!(e=/ipad|iphone|ipod|android|blackberry|windows ce|windows phone|webos|playbook/.exec(t))||!("android"!==e[0]||!/firefox/.test(t))},AblePlayer.prototype.nativeFullscreenSupported=function(){return document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled},function(v){AblePlayer.prototype.seekTo=function(t){var e,i=this;(this.seekFromTime=this.media.currentTime,this.seekToTime=t,this.seeking=!0,this.liveUpdatePending=!0,"html5"===this.player)?(this.startTime=t,0<(e=this.media.seekable).length&&this.startTime>=e.start(0)&&this.startTime<=e.end(0)&&(this.media.currentTime=this.startTime,this.hasSignLanguage&&this.signVideo&&(this.signVideo.currentTime=this.startTime))):"youtube"===this.player?(this.youTubePlayer.seekTo(t,!0),0<t&&void 0!==this.$posterImg&&this.$posterImg.hide()):"vimeo"===this.player&&this.vimeoPlayer.setCurrentTime(t).then(function(){i.elapsed=t,i.refreshControls("timeline")});this.refreshControls("timeline")},AblePlayer.prototype.getMediaTimes=function(t,e){var i,s,a,n;return n={},s=(i=new v.Deferred).promise(),a=this,void 0!==t&&void 0!==e?(n.duration=t,n.elapsed=e,i.resolve(n)):this.getDuration().then(function(t){n.duration=a.roundDown(t,6),a.getElapsed().then(function(t){n.elapsed=a.roundDown(t,6),i.resolve(n)})}),s},AblePlayer.prototype.getDuration=function(){var e,t,i;(t=(e=new v.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getDuration().then(function(t){void 0===t||isNaN(t)||-1===t?e.resolve(0):e.resolve(t)}):e.resolve(0):("html5"===this.player?i=this.media.duration:"youtube"===this.player&&(i=this.youTubePlayer?this.youTubePlayer.getDuration():0),void 0===i||isNaN(i)||-1===i?e.resolve(0):e.resolve(i));return t},AblePlayer.prototype.getElapsed=function(){var e,t,i;(t=(e=new v.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getCurrentTime().then(function(t){void 0===t||isNaN(t)||-1===t?e.resolve(0):e.resolve(t)}):e.resolve(0):("html5"===this.player?i=this.media.currentTime:"youtube"===this.player&&(i=this.youTubePlayer?this.youTubePlayer.getCurrentTime():0),void 0===i||isNaN(i)||-1===i?e.resolve(0):e.resolve(i));return t},AblePlayer.prototype.getPlayerState=function(){var e,t,i;if(t=(e=new v.Deferred).promise(),"html5"===(i=this).player)this.media.ended?e.resolve("ended"):this.media.paused?e.resolve("paused"):4!==this.media.readyState?e.resolve("buffering"):e.resolve("playing");else if("youtube"===this.player&&this.youTubePlayer){var s=this.youTubePlayer.getPlayerState();-1===s||5===s?e.resolve("stopped"):0===s?e.resolve("ended"):1===s?e.resolve("playing"):2===s?e.resolve("paused"):3===s&&e.resolve("buffering")}else"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.getPaused().then(function(t){t?e.resolve("paused"):i.vimeoPlayer.getEnded().then(function(t){t?e.resolve("ended"):e.resolve("playing")})});return t},AblePlayer.prototype.isPlaybackRateSupported=function(){return"html5"===this.player?!!this.media.playbackRate:"youtube"===this.player?1<this.youTubePlayer.getAvailablePlaybackRates().length:"vimeo"===this.player?this.vimeoSupportsPlaybackRateChange:void 0},AblePlayer.prototype.setPlaybackRate=function(t){t=Math.max(.5,t),"html5"===this.player?this.media.playbackRate=t:"youtube"===this.player?this.youTubePlayer.setPlaybackRate(t):"vimeo"===this.player&&this.vimeoPlayer.setPlaybackRate(t),this.hasSignLanguage&&this.signVideo&&(this.signVideo.playbackRate=t),this.playbackRate=t,this.$speed.text(this.tt.speed+": "+t.toFixed(2).toString()+"x")},AblePlayer.prototype.getPlaybackRate=function(){return"html5"===this.player?this.media.playbackRate:"youtube"===this.player?this.youTubePlayer.getPlaybackRate():void 0},AblePlayer.prototype.isPaused=function(){if("vimeo"===this.player)return!this.playing;this.getPlayerState().then(function(t){return"paused"===t||"stopped"===t||"ended"===t})},AblePlayer.prototype.pauseMedia=function(){"html5"===this.player?(this.media.pause(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.pause(!0)):"youtube"===this.player?this.youTubePlayer.pauseVideo():"vimeo"===this.player&&this.vimeoPlayer.pause()},AblePlayer.prototype.playMedia=function(){"html5"===this.player?(this.media.play(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.play(!0)):"youtube"===this.player?(this.youTubePlayer.playVideo(),void 0!==this.$posterImg&&this.$posterImg.hide(),this.stoppingYouTube=!1):"vimeo"===this.player&&this.vimeoPlayer.play(),this.startedPlaying=!0,this.hideControls&&(this.hidingControls=!0,this.invokeHideControlsTimeout())},AblePlayer.prototype.fadeControls=function(t){"out"==t?(this.$mediaContainer.height(),this.$playerDiv.height(),this.$playerDiv.fadeTo(2e3,0,function(){})):"in"==t&&this.$playerDiv.fadeTo(100,1)},AblePlayer.prototype.invokeHideControlsTimeout=function(){var t=this;this.hideControlsTimeout=window.setTimeout(function(){void 0!==t.playing&&!0===t.playing&&t.hideControls&&(t.fadeControls("out"),t.controlsHidden=!0)},5e3),this.hideControlsTimeoutStatus="active"},AblePlayer.prototype.refreshControls=function(e,t,i){var s,a,n,r,o,l,h,p,c,u,d,g,f,m;e="init",(s=this).swappingSrc&&this.playing||void 0!==this.duration&&(this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.chapterElapsed=this.getChapterElapsed()),!1===this.useFixedSeekInterval&&!1===this.seekIntervalCalculated&&0<this.duration&&this.setSeekInterval(),this.seekBar&&(this.useChapterTimes?(a=this.selectedChapters.cues.length-1,this.selectedChapters.cues[a]==this.currentChapter&&this.currentChapter.end!==this.duration?this.seekBar.setDuration(this.duration-this.currentChapter.start):this.seekBar.setDuration(this.chapterDuration)):void 0===this.duration||isNaN(this.duration)||-1===this.duration||this.seekBar.setDuration(this.duration),this.seekBar.tracking||(r=this.liveUpdatePending||this.seekBar.seekHead.is(v(document.activeElement)),this.liveUpdatePending=!1,this.useChapterTimes?this.seekBar.setPosition(this.chapterElapsed,r):this.seekBar.setPosition(this.elapsed,r)),n=this.seekBar.tracking?this.seekBar.lastTrackPosition:this.useChapterTimes?this.chapterElapsed:this.elapsed),void 0!==this.$durationContainer&&(this.useChapterTimes?this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.chapterDuration)):this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.duration))),void 0!==this.$elapsedTimeContainer&&this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(n)),"legacy"===this.skin&&this.seekBar&&(h=0,c=(p=this.seekBar.wrapperDiv.parent().prev("div.able-left-controls")).next("div.able-right-controls"),p.children().each(function(){"button"==v(this).attr("role")&&(h+=v(this).outerWidth(!0))}),c.children().each(function(){"button"==v(this).attr("role")&&(h+=v(this).outerWidth(!0))}),u=this.fullscreen?v(window).width()-h:this.$ableWrapper.width()-h,5<Math.abs(u-this.seekBar.getWidth())&&this.seekBar.setWidth(u)),"html5"===this.player?0<this.media.buffered.length&&(g=this.media.buffered.end(0),this.useChapterTimes?(g>this.chapterDuration&&(g=this.chapterDuration),this.seekBar&&this.seekBar.setBuffered(g/this.chapterDuration)):this.seekBar&&(isNaN(g)||this.seekBar.setBuffered(g/t))):"youtube"===this.player?this.seekBar&&this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()):this.player,this.$descButton&&(this.descOn?(this.$descButton.removeClass("buttonOff").attr("aria-label",this.tt.turnOffDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOffDescriptions)):(this.$descButton.addClass("buttonOff").attr("aria-label",this.tt.turnOnDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOnDescriptions))),this.$ccButton&&(d=this.captions.length,this.captionsOn?(this.$ccButton.removeClass("buttonOff"),1===d&&(this.$ccButton.attr("aria-label",this.tt.hideCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.hideCaptions))):(this.$ccButton.addClass("buttonOff"),1===d&&(this.$ccButton.attr("aria-label",this.tt.showCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.showCaptions))),1<d&&(this.$ccButton.attr({"aria-label":this.tt.captions,"aria-haspopup":"true","aria-controls":this.mediaId+"-captions-menu"}),this.$ccButton.find("span.able-clipped").text(this.tt.captions))),this.$fullscreenButton&&(this.fullscreen?(this.$fullscreenButton.attr("aria-label",this.tt.exitFullScreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-expand").addClass("icon-fullscreen-collapse"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullScreen)):"svg"===this.iconType?(m=this.getSvgData("fullscreen-collapse"),this.$fullscreenButton.find("svg").attr("viewBox",m[0]),this.$fullscreenButton.find("path").attr("d",m[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullScreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenCollapseButtonImg)):(this.$fullscreenButton.attr("aria-label",this.tt.enterFullScreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-collapse").addClass("icon-fullscreen-expand"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullScreen)):"svg"===this.iconType?(m=this.getSvgData("fullscreen-expand"),this.$fullscreenButton.find("svg").attr("viewBox",m[0]),this.$fullscreenButton.find("path").attr("d",m[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullScreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenExpandButtonImg))),void 0!==this.$bigPlayButton&&void 0!==this.seekBar&&(this.paused&&!this.seekBar.tracking?(this.hideBigPlayButton||this.$bigPlayButton.show(),this.fullscreen?(this.$bigPlayButton.width(v(window).width()),this.$bigPlayButton.height(v(window).height())):(this.$bigPlayButton.width(this.$mediaContainer.width()),this.$bigPlayButton.height(this.$mediaContainer.height()))):this.$bigPlayButton.hide()),this.transcriptType&&(1===this.prefAutoScrollTranscript?(this.autoScrollTranscript=!0,this.$autoScrollTranscriptCheckbox.prop("checked",!0)):(this.autoScrollTranscript=!1,this.$autoScrollTranscriptCheckbox.prop("checked",!1)),this.autoScrollTranscript&&this.currentHighlight&&(f=Math.floor(this.$transcriptDiv.scrollTop()+v(this.currentHighlight).position().top-this.$transcriptDiv.height()/2+v(this.currentHighlight).height()/2))!==Math.floor(this.$transcriptDiv.scrollTop())&&(this.scrollingTranscript=!0,this.movingHighlight&&(this.$transcriptDiv.scrollTop(f),this.movingHighlight=!1))),this.$chaptersButton&&this.$chaptersButton.attr({"aria-label":this.tt.chapters,"aria-haspopup":"true","aria-controls":this.mediaId+"-chapters-menu"}),o={stopped:this.tt.statusStopped,paused:this.tt.statusPaused,playing:this.tt.statusPlaying,buffering:this.tt.statusBuffering,ended:this.tt.statusEnd},this.stoppingYouTube?(this.$status.text()!==this.tt.statusStopped&&this.$status.text(this.tt.statusStopped),this.$playpauseButton.find("span").first().hasClass("icon-pause")&&("font"===this.iconType?(this.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):"svg"===this.iconType?(m=this.getSvgData("play"),this.$playpauseButton.find("svg").attr("viewBox",m[0]),this.$playpauseButton.find("path").attr("d",m[1]),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):this.$playpauseButton.find("img").attr("src",this.playButtonImg))):void 0!==this.$status&&void 0!==this.seekBar&&this.getPlayerState().then(function(t){s.$status.text()===o[t]||s.seekBar.tracking?(s.statusDebounceStart=null,s.debouncingStatus=!1,clearTimeout(s.statusTimeout),s.statusTimeout=null):(s.swappingSrc?s.debouncingStatus||(s.statusMessageThreshold=2e3):s.debouncingStatus||(s.statusMessageThreshold=250),l=(new Date).getTime(),s.statusDebounceStart?l-s.statusDebounceStart>s.statusMessageThreshold&&(s.$status.text(o[t]),s.statusDebounceStart=null,clearTimeout(s.statusTimeout),s.statusTimeout=null):(s.statusDebounceStart=l,s.debouncingStatus=!0,s.statusTimeout=setTimeout(function(){s.debouncingStatus=!1,s.refreshControls(e)},s.statusMessageThreshold))),s.seekBar.tracking||s.stoppingYouTube||("paused"===t||"stopped"===t||"ended"===t?(s.$playpauseButton.attr("aria-label",s.tt.play),"font"===s.iconType?(s.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),s.$playpauseButton.find("span.able-clipped").text(s.tt.play)):"svg"===s.iconType?(m=s.getSvgData("play"),s.$playpauseButton.find("svg").attr("viewBox",m[0]),s.$playpauseButton.find("path").attr("d",m[1]),s.$playpauseButton.find("span.able-clipped").text(s.tt.play)):s.$playpauseButton.find("img").attr("src",s.playButtonImg)):(s.$playpauseButton.attr("aria-label",s.tt.pause),"font"===s.iconType?(s.$playpauseButton.find("span").first().removeClass("icon-play").addClass("icon-pause"),s.$playpauseButton.find("span.able-clipped").text(s.tt.pause)):"svg"===s.iconType?(m=s.getSvgData("pause"),s.$playpauseButton.find("svg").attr("viewBox",m[0]),s.$playpauseButton.find("path").attr("d",m[1]),s.$playpauseButton.find("span.able-clipped").text(s.tt.pause)):s.$playpauseButton.find("img").attr("src",s.pauseButtonImg)))}),this.fullscreen||(this.$statusBarDiv.height()+5<this.$statusBarDiv.find("span.able-speed").height()?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):(this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1),this.$statusBarDiv.width()<300?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1))))},AblePlayer.prototype.getHiddenWidth=function(t){var e=t.clone().appendTo("body"),i=e.outerWidth();return e.remove(),i},AblePlayer.prototype.handlePlay=function(t){this.paused?this.playMedia():this.pauseMedia()},AblePlayer.prototype.handleRestart=function(){this.seekTo(0)},AblePlayer.prototype.handlePrevTrack=function(){0===this.playlistIndex?this.playlistIndex=this.$playlist.length-1:this.playlistIndex--,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleNextTrack=function(){this.playlistIndex===this.$playlist.length-1?this.playlistIndex=0:this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleRewind=function(){var t;t=this.elapsed-this.seekInterval,this.useChapterTimes?t<this.currentChapter.start&&(t=this.currentChapter.start):t<0&&(t=0),this.seekTo(t)},AblePlayer.prototype.handleFastForward=function(){var t,e;e=this.chapters.length-1,t=this.elapsed+this.seekInterval,this.useChapterTimes?this.chapters[e]==this.currentChapter?t>this.duration||t>this.currentChapter.end?t=Math.min(this.duration,this.currentChapter.end):this.duration%t<this.seekInterval&&(t=Math.min(this.duration,this.currentChapter.end)):t>this.currentChapter.end&&(t=this.currentChapter.end):t>this.duration&&(t=this.duration),this.seekTo(t)},AblePlayer.prototype.handleRateIncrease=function(){this.changeRate(1)},AblePlayer.prototype.handleRateDecrease=function(){this.changeRate(-1)},AblePlayer.prototype.changeRate=function(t){var e,i,s,a;"html5"===this.player?this.setPlaybackRate(this.getPlaybackRate()+.25t):"youtube"===this.player?(e=this.youTubePlayer.getAvailablePlaybackRates(),i=this.getPlaybackRate(),-1===(s=e.indexOf(i))||(s+=t)<e.length&&0<=s&&this.setPlaybackRate(e[s])):"vimeo"===this.player&&(1===t?a=this.vimeoPlaybackRate+.5<=2?this.vimeoPlaybackRate+.5:2:-1===t&&(a=.5<=this.vimeoPlaybackRate-.5?this.vimeoPlaybackRate-.5:.5),this.setPlaybackRate(a))},AblePlayer.prototype.handleCaptionToggle=function(){var t;if(this.hidingPopup)return this.hidingPopup=!1;if(1===(t=this.captions.length?this.captions:[]).length){if(!0===this.captionsOn)this.captionsOn=!1,this.prefCaptions=0,this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.unloadModule("captions"):this.$captionsWrapper.hide();else{this.captionsOn=!0,this.prefCaptions=1,this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.loadModule("captions"):this.$captionsWrapper.show();for(var e=0;e<t.length;e++)!0===t[e].def&&(this.selectedCaptions=t[e]);this.selectedCaptions=this.captions[0],0<=this.descriptions.length&&(this.selectedDescriptions=this.descriptions[0])}this.refreshControls("captions")}else this.captionsPopup&&this.captionsPopup.is(":visible")?(this.captionsPopup.hide(),this.hidingPopup=!1,this.$ccButton.removeAttr("aria-expanded").focus()):(this.closePopups(),this.captionsPopup&&(this.captionsPopup.show(),this.$ccButton.attr("aria-expanded","true"),this.captionsPopup.css("top",this.$ccButton.position().top-this.captionsPopup.outerHeight()),this.captionsPopup.css("left",this.$ccButton.position().left),this.captionsPopup.find("li").removeClass("able-focus"),this.captionsPopup.find("li").first().focus().addClass("able-focus")))},AblePlayer.prototype.handleChapters=function(){if(this.hidingPopup)return this.hidingPopup=!1;this.chaptersPopup.is(":visible")?(this.chaptersPopup.hide(),this.hidingPopup=!1,this.$chaptersButton.removeAttr("aria-expanded").focus()):(this.closePopups(),this.chaptersPopup.show(),this.$chaptersButton.attr("aria-expanded","true"),this.chaptersPopup.css("top",this.$chaptersButton.position().top-this.chaptersPopup.outerHeight()),this.chaptersPopup.css("left",this.$chaptersButton.position().left),this.chaptersPopup.find("li").removeClass("able-focus"),this.chaptersPopup.find('li[aria-checked="true"]').length?this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass("able-focus"):this.chaptersPopup.find("li").first().addClass("able-focus").attr("aria-checked","true").focus())},AblePlayer.prototype.handleDescriptionToggle=function(){this.descOn=!this.descOn,this.prefDesc=+this.descOn,this.updateCookie("prefDesc"),this.$descDiv.is(":hidden")||this.$descDiv.hide(),this.refreshingDesc=!0,this.initDescription(),this.refreshControls("descriptions")},AblePlayer.prototype.handlePrefsClick=function(t){var e,i,s;if(this.descVoices||(this.getBrowserVoices(),this.descVoices&&this.rebuildDescPrefsForm()),(e=this).hidingPopup)return this.hidingPopup=!1;this.prefsPopup.is(":visible")?(this.prefsPopup.hide(),this.$prefsButton.removeAttr("aria-expanded"),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.showingPrefsDialog||this.$prefsButton.focus(),setTimeout(function(){e.hidingPopup=!1},100)):(this.closePopups(),this.prefsPopup.show(),this.$prefsButton.attr("aria-expanded","true"),i=this.$prefsButton.position(),s=this.$ableDiv.width()-5-this.prefsPopup.width(),this.prefsPopup.css("top",i.top-this.prefsPopup.outerHeight()),this.prefsPopup.css("left",s),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","0"),this.prefsPopup.find("li").first().focus().addClass("able-focus"))},AblePlayer.prototype.handleHelpClick=function(){this.setFullscreen(!1),this.helpDialog.show()},AblePlayer.prototype.handleTranscriptToggle=function(){var t=this;this.$transcriptDiv.is(":visible")?(this.$transcriptArea.hide(),this.$transcriptButton.addClass("buttonOff").attr("aria-label",this.tt.showTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.showTranscript),this.prefTranscript=0,this.$transcriptButton.focus().addClass("able-focus"),setTimeout(function(){t.closingTranscript=!1},100)):(this.positionDraggableWindow("transcript"),this.$transcriptArea.show(),this.$transcriptPopup.hide(),this.$transcriptButton.removeClass("buttonOff").attr("aria-label",this.tt.hideTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.hideTranscript),this.prefTranscript=1,this.focusNotClick=!0,this.$transcriptArea.find("button").first().focus(),setTimeout(function(){t.focusNotClick=!1},100)),this.updateCookie("prefTranscript")},AblePlayer.prototype.handleSignToggle=function(){var t=this;this.$signWindow.is(":visible")?(this.$signWindow.hide(),this.$signButton.addClass("buttonOff").attr("aria-label",this.tt.showSign),this.$signButton.find("span.able-clipped").text(this.tt.showSign),this.prefSign=0,this.$signButton.focus().addClass("able-focus"),setTimeout(function(){t.closingSign=!1},100)):(this.positionDraggableWindow("sign"),this.$signWindow.show(),this.$signPopup.hide(),this.$signButton.removeClass("buttonOff").attr("aria-label",this.tt.hideSign),this.$signButton.find("span.able-clipped").text(this.tt.hideSign),this.prefSign=1,this.focusNotClick=!0,this.$signWindow.find("button").first().focus(),setTimeout(function(){t.focusNotClick=!1},100)),this.updateCookie("prefSign")},AblePlayer.prototype.isFullscreen=function(){return this.nativeFullscreenSupported()?!!(document.fullscreenElement||document.webkitFullscreenElement||document.webkitCurrentFullScreenElement||document.mozFullScreenElement||document.msFullscreenElement):!!this.modalFullscreenActive},AblePlayer.prototype.setFullscreen=function(t){if(this.fullscreen!=t){var e=this,i=this.$ableWrapper,s=i[0];if(this.nativeFullscreenSupported())t?(this.preFullScreenWidth=this.$ableWrapper.width(),this.preFullScreenHeight=this.$ableWrapper.height(),s.requestFullscreen?s.requestFullscreen():s.webkitRequestFullscreen?s.webkitRequestFullscreen():s.mozRequestFullScreen?s.mozRequestFullScreen():s.msRequestFullscreen&&s.msRequestFullscreen(),this.fullscreen=!0):(document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullScreen?document.webkitCancelFullScreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.msExitFullscreen&&document.msExitFullscreen(),this.fullscreen=!1),v(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange",function(t){e.fullscreen?e.clickedFullscreenButton||(e.fullscreen=!1,e.restoringAfterFullScreen=!0,e.resizePlayer(e.preFullScreenWidth,e.preFullScreenHeight)):(e.restoringAfterFullScreen=!0,e.resizePlayer(e.preFullScreenWidth,e.preFullScreenHeight)),setTimeout(function(){e.clickedFullscreenButton=!1},1e3)});else{if(!this.fullscreenDialog){var a=v("<div>"),n=v("<p>",{class:"able-screenreader-alert"}).text(this.tt.fullscreen);a.append(n),this.fullscreenDialog=new AccessibleDialog(a,this.$fullscreenButton,"dialog","Fullscreen video player",n,this.tt.exitFullScreen,"100%",!0,function(){e.handleFullscreenToggle()}),v("body").append(a)}var r=this.paused;if(t){this.modalFullscreenActive=!0,this.fullscreenDialog.show(),this.$modalFullscreenPlaceholder=v('<div class="placeholder">'),this.$modalFullscreenPlaceholder.insertAfter(i),i.appendTo(this.fullscreenDialog.modal),i===this.$ableColumnLeft&&i.width("100%");var o=v(window).height()-this.$playerDiv.height();this.$descDiv.is(":hidden")||(o-=this.$descDiv.height()),this.resizePlayer(v(window).width(),o)}else this.modalFullscreenActive=!1,i===this.$ableColumnLeft&&i.width("50%"),i.insertAfter(this.$modalFullscreenPlaceholder),this.$modalFullscreenPlaceholder.remove(),this.fullscreenDialog.hide(),this.resizePlayer(this.$ableWrapper.width(),this.$ableWrapper.height());!r&&this.paused&&this.playMedia()}this.refreshControls("fullscreen")}},AblePlayer.prototype.handleFullscreenToggle=function(){var t=this.paused;this.setFullscreen(!this.fullscreen),t?this.pauseMedia():t||this.playMedia(),this.fullscreen?(this.hideControls=!0,this.playing&&(this.fadeControls("out"),this.controlsHidden=!0)):(this.hideControls=this.hideControlsOriginal,this.hideControls||(this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear")))},AblePlayer.prototype.handleTranscriptLockToggle=function(t){this.autoScrollTranscript=t,this.prefAutoScrollTranscript=+t,this.updateCookie("prefAutoScrollTranscript"),this.refreshControls("transcript")},AblePlayer.prototype.showTooltip=function(t){t.is(":animated")?t.stop(!0,!0).show().delay(4e3).fadeOut(1e3):t.stop().show().delay(4e3).fadeOut(1e3)},AblePlayer.prototype.showAlert=function(t,e){var i,s,a,n;"transcript"===e?(i=this.$transcriptAlert,s=this.$transcriptArea):"sign"===e?(i=this.$signAlert,s=this.$signWindow):i="screenreader"===e?this.$srAlertBox:this.$alertBox,i.text(t).show(),"transcript"==e||"sign"===e?(a=s.width()>i.width()?s.width()/2-i.width()/2:10,"sign"===e?n=s.height()/32:"transcript"===e&&(n=this.$transcriptToolbar.height()+30),i.css({top:n+"px",left:a+"px"})):"screenreader"!==e&&i.css({left:this.$playerDiv.width()/2-i.width()/2}),"screenreader"!==e&&setTimeout(function(){i.fadeOut(300)},3e3)},AblePlayer.prototype.showedAlert=function(t){return"transcript"===t?!!this.showedTranscriptAlert:"sign"===t&&!!this.showedSignAlert},AblePlayer.prototype.resizePlayer=function(t,e){var i,s,a;this.fullscreen?(void 0!==this.$vidcapContainer&&(this.$ableWrapper.css({width:t+"px","max-width":""}),this.$vidcapContainer.css({height:e+"px",width:t}),this.$media.css({height:e+"px",width:t})),void 0!==this.$transcriptArea&&this.retrieveOffscreenWindow("transcript",t,e),void 0!==this.$signWindow&&this.retrieveOffscreenWindow("sign",t,e)):this.restoringAfterFullScreen&&(t=this.preFullScreenWidth,e=this.preFullScreenHeight,this.restoringAfterFullScreen=!1,this.$ableWrapper.css({"max-width":t+"px",width:""}),void 0!==this.$vidcapContainer&&this.$vidcapContainer.css({height:"",width:""}),this.$media.css({width:"100%",height:"auto"})),"youtube"===this.player&&this.youTubePlayer&&this.youTubePlayer.setSize(t,e),void 0!==this.$captionsDiv&&(i=parseInt(this.prefCaptionsSize,10),a=(s=1e3<t?1.5i:t<400?i/1.5:i)+25,this.$captionsDiv.css("font-size",s+"%"),this.$captionsWrapper.css("line-height",a+"%")),this.refreshControls("captions")},AblePlayer.prototype.retrieveOffscreenWindow=function(t,e,i){var s,a,n,r,o,l,h,p;"transcript"==t?s=this.$transcriptArea:"sign"==t&&(s=this.$signWindow),l=s.width(),p=s.height(),n=(a=s.position()).top,o=(r=a.left)+l,h=n+p,n<0&&(n=10,s.css("top",n)),r<0&&(r=10,s.css("left",r)),e<o&&(r=e-20-l,s.css("left",r)),i<h&&(n=i-10-p,s.css("top",n))},AblePlayer.prototype.getHighestZIndex=function(){var t,e;return t=0,v("body ").not(".able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area").each(function(){e=v(this).css("z-index"),Number.isInteger(+e)&&parseInt(e)>t&&(t=parseInt(e))}),t},AblePlayer.prototype.updateZIndex=function(t){var e,i,s,a;if(8e3,7e3,this.getHighestZIndex(),void 0===this.$transcriptArea||void 0===this.$signWindow)return void 0!==this.$transcriptArea?7e3<(e=parseInt(this.$transcriptArea.css("z-index")))&&this.$transcriptArea.css("z-index",7e3):void 0!==this.$signWindow&&8e3<(i=parseInt(this.$signWindow.css("z-index")))&&this.$signWindow.css("z-index",8e3),!1;if((e=parseInt(this.$transcriptArea.css("z-index")))===(i=parseInt(this.$signWindow.css("z-index"))))s=8e3,a=7e3;else if(i<e){if("transcript"===t)return!1;s=e,a=i}else{if("sign"===t)return!1;s=i,a=e}"transcript"===t?(this.$transcriptArea.css("z-index",s),this.$signWindow.css("z-index",a)):"sign"===t&&(this.$signWindow.css("z-index",s),this.$transcriptArea.css("z-index",a))},AblePlayer.prototype.syncTrackLanguages=function(t,e){var i,s,a,n,r;for(i=0;i<this.captions.length;i++)this.captions[i].language===e&&(s=this.captions[i]);for(i=0;i<this.chapters.length;i++)this.chapters[i].language===e&&(n=this.chapters[i]);for(i=0;i<this.descriptions.length;i++)this.descriptions[i].language===e&&(a=this.descriptions[i]);for(i=0;i<this.meta.length;i++)this.meta[i].language===e&&(r=this.meta[i]);this.transcriptLang=e,"init"===t||"captions"===t?(this.captionLang=e,this.selectedCaptions=s,this.selectedChapters=n,this.selectedDescriptions=a,this.selectedMeta=r,this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a,this.updateChaptersList()):"transcript"===t&&(this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a),this.selectedDescriptions&&this.selectedDescriptions.language!==this.lang&&this.updateDescriptionVoice(),this.updateTranscript()}}(jQuery),function(n){AblePlayer.prototype.updateCaption=function(t){this.usingYouTubeCaptions||void 0===this.$captionsWrapper||(this.captionsOn?(this.$captionsWrapper.show(),void 0!==t&&this.showCaptions(t)):this.$captionsWrapper&&(this.$captionsWrapper.hide(),this.prefCaptions=0))},AblePlayer.prototype.updateCaptionsMenu=function(t){this.captionsPopup.find("li").attr("aria-checked","false"),void 0===t?this.captionsPopup.find("li").last().attr("aria-checked","true"):this.captionsPopup.find("li[lang="+t+"]").attr("aria-checked","true")},AblePlayer.prototype.getCaptionClickFunction=function(t){var e=this;return function(){e.selectedCaptions=t,e.captionLang=t.language,e.currentCaption=-1,e.usingYouTubeCaptions?e.captionsOn?e.youTubePlayer.getOptions("captions")&&e.startedPlaying?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):e.captionLangPending=e.captionLang:e.youTubePlayer.getOptions("captions")?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):(e.youTubePlayer.loadModule("captions"),e.captionLangPending=e.captionLang):e.usingVimeoCaptions?e.vimeoPlayer.enableTextTrack(e.captionLang).then(function(t){}).catch(function(t){t.name}):(e.syncTrackLanguages("captions",e.captionLang),e.swappingSrc||(e.updateCaption(e.elapsed),e.showDescription(e.elapsed))),e.captionsOn=!0,e.hidingPopup=!0,e.captionsPopup.hide(),setTimeout(function(){e.hidingPopup=!1},100),e.updateCaptionsMenu(e.captionLang),e.$ccButton.focus(),e.prefCaptions=1,e.updateCookie("prefCaptions"),e.refreshControls("captions")}},AblePlayer.prototype.getCaptionOffFunction=function(){var t=this;return function(){"youtube"==t.player?t.youTubePlayer.unloadModule("captions"):t.usingVimeoCaptions&&t.vimeoPlayer.disableTextTrack(),t.captionsOn=!1,t.currentCaption=-1,t.hidingPopup=!0,t.captionsPopup.hide(),setTimeout(function(){t.hidingPopup=!1},100),t.updateCaptionsMenu(),t.$ccButton.focus(),t.prefCaptions=0,t.updateCookie("prefCaptions"),this.swappingSrc||(t.refreshControls("captions"),t.updateCaption())}},AblePlayer.prototype.showCaptions=function(t){var e,i,s,a;for(a=this.selectedCaptions?this.selectedCaptions.cues:1<=this.captions.length?this.captions[0].cues:[],e=0;e<a.length;e++)if(a[e].start<=t&&a[e].end>t){i=e;break}void 0!==i?this.currentCaption!==i&&(s=this.flattenCueForCaption(a[i]).replace("\n","<br>"),this.$captionsDiv.html(s),this.currentCaption=i,0===s.length?this.$captionsDiv.css("display","none"):this.$captionsDiv.css("display","inline-block")):(this.$captionsDiv.html(""),this.currentCaption=-1)},AblePlayer.prototype.flattenCueForCaption=function(t){var e=[],s=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("("+t.value+")"),e=0;e<t.children.length;e++)i.push(s(t.children[e]));else if("i"===t.type){for(i.push("<em>"),e=0;e<t.children.length;e++)i.push(s(t.children[e]));i.push("</em>")}else if("b"===t.type){for(i.push("<strong>"),e=0;e<t.children.length;e++)i.push(s(t.children[e]));i.push("</strong>")}else for(e=0;e<t.children.length;e++)i.push(s(t.children[e]));return i.join("")};if(void 0!==t.components)for(var i=0;i<t.components.children.length;i++)e.push(s(t.components.children[i]));return e.join("")},AblePlayer.prototype.getCaptionsOptions=function(t){var e=[];switch(t){case"prefCaptionsFont":e[0]=["serif",this.tt.serif],e[1]=["sans-serif",this.tt.sans],e[2]=["cursive",this.tt.cursive],e[3]=["fantasy",this.tt.fantasy],e[4]=["monospace",this.tt.monospace];break;case"prefCaptionsColor":case"prefCaptionsBGColor":e[0]=["white",this.tt.white],e[1]=["yellow",this.tt.yellow],e[2]=["green",this.tt.green],e[3]=["cyan",this.tt.cyan],e[4]=["blue",this.tt.blue],e[5]=["magenta",this.tt.magenta],e[6]=["red",this.tt.red],e[7]=["black",this.tt.black];break;case"prefCaptionsSize":e[0]="75%",e[1]="100%",e[2]="125%",e[3]="150%",e[4]="200%";break;case"prefCaptionsOpacity":e[0]="0%",e[1]="25%",e[2]="50%",e[3]="75%",e[4]="100%";break;case"prefCaptionsStyle":e[0]=this.tt.captionsStylePopOn,e[1]=this.tt.captionsStyleRollUp;break;case"prefCaptionsPosition":e[0]="overlay",e[1]="below"}return e},AblePlayer.prototype.translatePrefs=function(t,e,i){if("youtube"==i&&"size"===t)switch(e){case"75%":return-1;case"100%":return 0;case"125%":return 1;case"150%":return 2;case"200%":return 3}return!1},AblePlayer.prototype.stylizeCaptions=function(t,e){var i,s,a;void 0!==t&&("prefCaptionsPosition"==e?this.positionCaptions():void 0!==e?("prefCaptionsFont"===e?i="font-family":"prefCaptionsSize"===e?i="font-size":"prefCaptionsColor"===e?i="color":"prefCaptionsBGColor"===e?i="background-color":"prefCaptionsOpacity"===e&&(i="opacity"),s="prefCaptionsOpacity"===e?parseFloat(n("#"+this.mediaId+"_"+e).val())/100:n("#"+this.mediaId+"_"+e).val(),t.css(i,s)):(a=parseFloat(this.prefCaptionsOpacity)/100,t.css({"font-family":this.prefCaptionsFont,color:this.prefCaptionsColor,"background-color":this.prefCaptionsBGColor,opacity:a}),t===this.$captionsDiv&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"font-size":this.prefCaptionsSize}),"below"===this.prefCaptionsPosition?void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"}):"overlay"===this.prefCaptionsPosition&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":"transparent",opacity:""}),this.positionCaptions()))},AblePlayer.prototype.positionCaptions=function(t){void 0===t&&(t=this.prefCaptionsPosition),void 0!==this.$captionsWrapper&&("below"==t?(this.$captionsWrapper.removeClass("able-captions-overlay").addClass("able-captions-below"),this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"})):(this.$captionsWrapper.removeClass("able-captions-below").addClass("able-captions-overlay"),this.$captionsWrapper.css({"background-color":"transparent",opacity:""})))}}(jQuery),function(p){AblePlayer.prototype.populateChaptersDiv=function(){var t,e,i;p("#"+this.chaptersDivLocation)&&(this.$chaptersDiv=p("#"+this.chaptersDivLocation),this.$chaptersDiv.addClass("able-chapters-div"),this.chaptersTitle&&(t="h"+this.getNextHeadingLevel(this.$chaptersDiv).toString(),e=this.mediaId+"-chapters-heading",i=p("<"+t+">",{class:"able-chapters-heading",id:e}).text(this.chaptersTitle),this.$chaptersDiv.append(i)),this.$chaptersNav=p("<nav>"),this.chaptersTitle?this.$chaptersNav.attr("aria-labelledby",e):this.$chaptersNav.attr("aria-label",this.tt.chapters),this.$chaptersDiv.append(this.$chaptersNav),this.updateChaptersList())},AblePlayer.prototype.updateChaptersList=function(){var e,t,i,s,a,n,r,o,l,h;if(!(e=this).$chaptersNav)return!1;if(void 0===this.useChapterTimes&&("chapter"===this.seekbarScope&&this.selectedChapters.cues.length?this.useChapterTimes=!0:this.useChapterTimes=!1),0<(t=this.useChapterTimes?this.selectedChapters.cues:1<=this.chapters.length?this.chapters[0].cues:[]).length){for(h=p("<ul>"),i=0;i<t.length;i++)s=i,a=p("<li></li>"),o=function(t){return function(){e.seekTrigger="chapter",l=p(this).closest("li"),h=p(this).closest("ul").find("li"),h.index(l),h.removeClass("able-current-chapter").attr("aria-selected",""),l.addClass("able-current-chapter").attr("aria-selected","true"),e.updateChapter(t),e.seekTo(t)}},(n=p("<button>",{type:"button",val:s}).text(this.flattenCueForCaption(t[s]))).on("click",o(t[s].start)),n.on("focus",function(){p(this).closest("ul").find("li").removeClass("able-focus"),p(this).closest("li").addClass("able-focus")}),a.on("hover",function(){p(this).closest("ul").find("li").removeClass("able-focus"),p(this).addClass("able-focus")}),a.on("mouseleave",function(){p(this).removeClass("able-focus")}),n.on("blur",function(){p(this).closest("li").removeClass("able-focus")}),a.append(n),h.append(a),this.defaultChapter===t[s].id&&(n.attr("aria-selected","true").parent("li").addClass("able-current-chapter"),this.currentChapter=t[s],r=!0);r||(this.currentChapter=t[0],h.find("button").first().attr("aria-selected","true").parent("li").addClass("able-current-chapter")),this.$chaptersNav.html(h)}return!1},AblePlayer.prototype.seekToChapter=function(t){for(var e=0;e<this.selectedChapters.cues.length;){if(this.selectedChapters.cues[e].id==t){this.seekTo(this.selectedChapters.cues[e].start),this.updateChapter(this.selectedChapters.cues[e].start);break}e++}},AblePlayer.prototype.updateChapter=function(t){if(void 0!==this.selectedChapters){var e,i,s;for(e=this.selectedChapters.cues,i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s&&this.currentChapter!==e[s]&&(this.currentChapter=e[s],this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.seekIntervalCalculated=!1),void 0!==this.$chaptersDiv&&(this.$chaptersDiv.find("ul").find("li").removeClass("able-current-chapter").attr("aria-selected",""),this.$chaptersDiv.find("ul").find("li").eq(s).addClass("able-current-chapter").attr("aria-selected","true")))}},AblePlayer.prototype.getChapterDuration=function(){var t,e;return void 0===this.currentChapter?0:void 0===this.duration?0:(t=this.selectedChapters.cues.length-1,this.selectedChapters.cues[t]==this.currentChapter&&this.currentChapter.end!==this.duration?(e=this.duration,this.currentChapter.end=this.duration):e=this.currentChapter.end,e-this.currentChapter.start)},AblePlayer.prototype.getChapterElapsed=function(){return void 0===this.currentChapter?0:this.elapsed>this.currentChapter.start?this.elapsed-this.currentChapter.start:0},AblePlayer.prototype.convertChapterTimeToVideoTime=function(t){if(void 0===this.currentChapter)return t;var e=this.currentChapter.start+t;return e>this.currentChapter.end?this.currentChapter.end:e},AblePlayer.prototype.getChapterClickFunction=function(t){var e=this;return function(){e.seekTrigger="chapter",e.seekTo(t),e.hidingPopup=!0,e.chaptersPopup.hide(),setTimeout(function(){e.hidingPopup=!1},100),e.$chaptersButton.focus()}}}(jQuery),function(p){AblePlayer.prototype.updateMeta=function(t){this.hasMeta&&("text"===this.metaType&&this.$metaDiv.show(),this.showMeta(t||this.elapsed))},AblePlayer.prototype.showMeta=function(t){var e,i,s,a,n,r,o,l,h;for(e=[],a=1<=this.meta.length?this.meta:[],i=0;i<a.length;i++)if(a[i].start<=t&&a[i].end>t){s=i;break}if(void 0!==s){if(this.currentMeta!==s)if("text"===this.metaType)this.$metaDiv.html(this.flattenCueForMeta(a[s]).replace("\n","<br>"));else if("selector"===this.metaType){for(n=this.flattenCueForMeta(a[s]).split("\n"),r=0;r<n.length;r++)"pause"===(o=p.trim(n[r])).toLowerCase().trim()?(this.hideBigPlayButton=!0,this.pauseMedia()):"focus:"==o.toLowerCase().substring(0,6)?(h=o.substring(6).trim(),p(h).length&&p(h).focus()):p(o).length&&(this.currentMeta=s,void 0===(l=parseInt(p(o).attr("data-duration")))||isNaN(l)?p(o).show():p(o).show().delay(l).fadeOut(),this.visibleSelectors.push(o),e.push(o));if(this.visibleSelectors&&this.visibleSelectors.length&&this.visibleSelectors.length!==e.length)for(r=this.visibleSelectors.length-1;0<=r;r--)-1==p.inArray(this.visibleSelectors[r],e)&&(p(this.visibleSelectors[r]).hide(),this.visibleSelectors.splice(r,1))}}else{if(void 0!==this.$metaDiv&&this.$metaDiv.html(""),this.visibleSelectors&&this.visibleSelectors.length){for(r=0;r<this.visibleSelectors.length;r++)p(this.visibleSelectors[r]).hide();this.visibleSelectors=[]}this.currentMeta=-1}},AblePlayer.prototype.flattenCueForMeta=function(t){for(var e=[],s=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("["+t.value+"]"),e=0;e<t.children.length;e++)i.push(s(t.children[e]));else for(e=0;e<t.children.length;e++)i.push(s(t.children[e]));return i.join("")},i=0;i<t.components.children.length;i++)e.push(s(t.components.children[i]));return e.join("")}}(jQuery),function(b){AblePlayer.prototype.setupTranscript=function(){var t=new b.Deferred,e=t.promise();return this.transcriptType||!this.captions.length||this.usingYouTubeCaptions||this.usingVimeoCaptions||(this.transcriptType="popup"),this.transcriptType?"popup"===this.transcriptType||"external"===this.transcriptType?(this.injectTranscriptArea(),t.resolve()):"manual"===this.transcriptType&&(this.setupManualTranscript(),t.resolve()):t.resolve(),e},AblePlayer.prototype.injectTranscriptArea=function(){var t,e,i,s,a;if(this.$transcriptArea=b("<div>",{class:"able-transcript-area",role:"dialog","aria-label":this.tt.transcriptTitle}),this.$transcriptToolbar=b("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$transcriptDiv=b("<div>",{class:"able-transcript"}),this.$autoScrollTranscriptCheckbox=b("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),t=b("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$transcriptToolbar.append(t,this.$autoScrollTranscriptCheckbox),1<this.captions.length)for(e=b("<div>",{class:"transcript-language-select-wrapper"}),i=b("<label>",{for:"transcript-language-select-"+this.mediaId}).text(this.tt.language),this.$transcriptLanguageSelect=b("<select>",{id:"transcript-language-select-"+this.mediaId}),s=0;s<this.captions.length;s++)a=b("<option></option>",{value:this.captions[s].language,lang:this.captions[s].language}).text(this.captions[s].label),this.captions[s].def&&a.prop("selected",!0),this.$transcriptLanguageSelect.append(a);e&&(e.append(i,this.$transcriptLanguageSelect),this.$transcriptToolbar.append(e)),this.$transcriptArea.append(this.$transcriptToolbar,this.$transcriptDiv),this.transcriptDivLocation?b("#"+this.transcriptDivLocation).append(this.$transcriptArea):this.$ableWrapper.append(this.$transcriptArea),this.transcriptDivLocation||(this.initDragDrop("transcript"),1===this.prefTranscript&&this.positionDraggableWindow("transcript",this.getDefaultWidth("transcript"))),this.prefTranscript||this.transcriptDivLocation||this.$transcriptArea.hide()},AblePlayer.prototype.addTranscriptAreaEvents=function(){var e=this;this.$autoScrollTranscriptCheckbox.click(function(){e.handleTranscriptLockToggle(e.$autoScrollTranscriptCheckbox.prop("checked"))}),this.$transcriptDiv.on("mousewheel DOMMouseScroll click scroll",function(t){e.scrollingTranscript||(e.autoScrollTranscript=!1,e.refreshControls("transcript")),e.scrollingTranscript=!1}),void 0!==this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.on("click mousedown",function(t){t.stopPropagation()}),this.$transcriptLanguageSelect.on("change",function(){var t=e.$transcriptLanguageSelect.val();e.syncTrackLanguages("transcript",t)}))},AblePlayer.prototype.transcriptSrcHasRequiredParts=function(){return!!(b("#"+this.transcriptSrc).length&&(this.$transcriptArea=b("#"+this.transcriptSrc),this.$transcriptArea.find(".able-window-toolbar").length&&(this.$transcriptToolbar=this.$transcriptArea.find(".able-window-toolbar").eq(0),this.$transcriptArea.find(".able-transcript").length&&(this.$transcriptDiv=this.$transcriptArea.find(".able-transcript").eq(0),this.$transcriptArea.find(".able-transcript-seekpoint").length))))&&(this.$transcriptSeekpoints=this.$transcriptArea.find(".able-transcript-seekpoint"),!0)},AblePlayer.prototype.setupManualTranscript=function(){var t,e;t=b("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),e=b("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$autoScrollTranscriptCheckbox=t,this.$transcriptToolbar.append(e,this.$autoScrollTranscriptCheckbox)},AblePlayer.prototype.updateTranscript=function(){if(this.transcriptType){if("external"===this.transcriptType||"popup"===this.transcriptType){var t,e,i;if(this.transcriptLang?e=this.transcriptCaptions.cues:this.transcriptCaptions?(this.transcriptLang=this.transcriptCaptions.language,e=this.transcriptCaptions.cues):this.selectedCaptions&&(this.transcriptLang=this.captionLang,e=this.selectedCaptions.cues),this.transcriptChapters)t=this.transcriptChapters.cues;else if(0<this.chapters.length){if(this.transcriptLang)for(var s=0;s<this.chapters.length;s++)this.chapters[s].language===this.transcriptLang&&(t=this.chapters[s].cues);void 0===t&&(t=this.chapters[0].cues||[])}if(this.transcriptDescriptions)i=this.transcriptDescriptions.cues;else if(0<this.descriptions.length){if(this.transcriptLang)for(s=0;s<this.descriptions.length;s++)this.descriptions[s].language===this.transcriptLang&&(i=this.descriptions[s].cues);i||(i=this.descriptions[0].cues||[])}var a=this.generateTranscript(t||[],e||[],i||[]);this.$transcriptDiv.html(a),this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.find("option:selected").prop("selected",!1),this.$transcriptLanguageSelect.find("option[lang="+this.transcriptLang+"]").prop("selected",!0))}var n=this;1===this.prefTabbable&&this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"),0<this.$transcriptArea.length&&this.$transcriptArea.find("span.able-transcript-seekpoint").click(function(t){n.seekTrigger="transcript";var e=parseFloat(b(this).attr("data-start"));e+=.01,n.seekingFromTranscript?n.seekingFromTranscript=!1:(n.seekingFromTranscript=!0,n.seekTo(e))})}},AblePlayer.prototype.highlightTranscript=function(t){if(this.transcriptType){var e,i,s,a=this;t=parseFloat(t),this.$transcriptArea.find("span.able-transcript-seekpoint").each(function(){if(e=parseFloat(b(this).attr("data-start")),i=parseFloat(b(this).attr("data-end")),s=!!b(this).parent().hasClass("able-transcript-chapter-heading"),e<=t&&t<=i&&!s)return b(this).hasClass("able-highlight")||(a.$transcriptArea.find(".able-highlight").removeClass("able-highlight"),b(this).addClass("able-highlight"),a.movingHighlight=!0),!1}),a.currentHighlight=a.$transcriptArea.find(".able-highlight"),0===a.currentHighlight.length&&(a.currentHighlight=null)}},AblePlayer.prototype.generateTranscript=function(t,e,i){var s,h=this,a=b('<div class="able-transcript-container"></div>');if(a.attr("lang",this.transcriptLang),s=void 0!==this.transcriptTitle?this.transcriptTitle:this.lyricsMode?this.tt.lyricsTitle:this.tt.transcriptTitle,void 0===this.transcriptDivLocation){var n=this.playerHeadingLevel,p=(n+=1)+1;if(n<=6)var r="h"+n.toString();else r="div";var o=b("<"+r+">");o.addClass("able-transcript-heading"),6<n&&o.attr({role:"heading","aria-level":n}),o.text(s),o.attr("lang",this.lang),a.append(o)}for(var l=0,c=0,u=0,d=function(t,e){if(p<=6)var i="h"+p.toString();else i="div";var s=b("<"+i+">",{class:"able-transcript-chapter-heading"});6<p&&s.attr({role:"heading","aria-level":p});for(var a=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(a(t.children[i]));return e},n=b("<span>",{class:"able-transcript-seekpoint"}),r=0;r<e.components.children.length;r++)for(var o=a(e.components.children[r]),l=0;l<o.length;l++)n.append(o[l]);n.attr("data-start",e.start.toString()),n.attr("data-end",e.end.toString()),s.append(n),t.append(s)},g=function(t,e){var i=b("<div>",{class:"able-transcript-desc"}),s=b("<span>",{class:"able-hidden"});s.attr("lang",h.lang),s.text(h.tt.prefHeadingDescription+": "),i.append(s);for(var a=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(a(t.children[i]));return e},n=b("<span>",{class:"able-transcript-seekpoint"}),r=0;r<e.components.children.length;r++)for(var o=a(e.components.children[r]),l=0;l<o.length;l++)n.append(o[l]);n.attr("data-start",e.start.toString()),n.attr("data-end",e.end.toString()),i.append(n),t.append(i)},f=function(t,e){for(var i=b("<span>",{class:"able-transcript-seekpoint able-transcript-caption"}),o=function(t){var e=[],u=0,d=function(t){var e;u++;var i=[];if(""===t)return i;var s=t.indexOf("["),a=t.indexOf("]"),n=t.indexOf("("),r=t.indexOf(")"),o=-1!==s&&-1!==a,l=-1!==n&&-1!==r;if(l||o){if(1<u)var h="<br/>";else h="";var p=h+'<span class="able-unspoken">',c="</span>";l&&o&&(s<n?l=!1:o=!1)}return l?(e=t.substring(0,n),e+=p,e+=t.substring(n,r+1),e+=c,e+=d(t.substring(r+1)),i.push(e)):o?(e=t.substring(0,s),e+=p,e+=t.substring(s,a+1),e+=c,e+=d(t.substring(a+1)),i.push(e)):i.push(t),i};if("string"===t.type)e=e.concat(d(t.value));else if("v"===t.type){var i=b("<span>",{class:"able-unspoken"});i.text("("+t.value+")"),e.push(i);for(var s=0;s<t.children.length;s++)for(var a=o(t.children[s]),n=0;n<a.length;n++)e.push(a[n])}else if("b"===t.type||"i"===t.type){if("b"===t.type)var r=b("<strong>");else if("i"===t.type)r=b("<em>");for(s=0;s<t.children.length;s++)for(a=o(t.children[s]),n=0;n<a.length;n++)r.append(a[n]);"b"!==t.type&&"i"!=t.type||e.push(r," ")}else for(s=0;s<t.children.length;s++)e=e.concat(o(t.children[s]));return e},s=0;s<e.components.children.length;s++)for(var a=o(e.components.children[s]),n=0;n<a.length;n++){var r=a[n];"string"==typeof r&&(h.lyricsMode?r=r.replace("\n","<br>")+"<br>":r+=" "),i.append(r)}i.attr("data-start",e.start.toString()),i.attr("data-end",e.end.toString()),t.append(i),t.append(" \n")};l<t.length||u<i.length||c<e.length;){if(l<t.length&&u<i.length&&c<e.length)var m=Math.min(t[l].start,i[u].start,e[c].start);else if(l<t.length&&u<i.length)m=Math.min(t[l].start,i[u].start);else if(l<t.length&&c<e.length)m=Math.min(t[l].start,e[c].start);else if(u<i.length&&c<e.length)m=Math.min(i[u].start,e[c].start);else m=null;null!==m?void 0!==t[l]&&t[l].start===m?(d(a,t[l]),l+=1):void 0!==i[u]&&i[u].start===m?(g(a,i[u]),u+=1):(f(a,e[c]),c+=1):l<t.length?(d(a,t[l]),l+=1):u<i.length?(g(a,i[u]),u+=1):c<e.length&&(f(a,e[c]),c+=1)}var v=a.children(),y=0;return v.each(function(){b(this).hasClass("able-transcript-caption")?(-1===b(this).text().indexOf("[")&&-1===b(this).text().indexOf("(")||0<y&&(a.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),y=0),b(this).addClass("able-block-temp"),y++):0<y&&(a.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),y=0)}),a}}(jQuery),function(g){AblePlayer.prototype.showSearchResults=function(){var i=this;if(this.searchDiv&&this.searchString&&g("#"+this.SearchDiv)){var t="<p>"+this.tt.resultsSummary1+" ";t+='<span id="able-search-term-echo">'+this.searchString+"</span>",t+="</p>";var e=this.searchFor(this.searchString,this.searchIgnoreCaps);if(0<e.length){var s=g("<p>",{class:"able-search-results-summary"}),a=this.tt.resultsSummary2;a+=" <strong>"+e.length+"</strong> ",a+=this.tt.resultsSummary3+" ",a+=this.tt.resultsSummary4,s.html(a);for(var n=g("<ul>"),r=0;r<e.length;r++){var o="aria-search-result-"+r,l=g("<li>",{}),h=this.secondsToTime(e[r].start),p=this.tt.searchButtonLabel+" "+h.title,c=g("<button>",{class:"able-search-results-time","data-start":e[r].start,title:p,"aria-label":p,"aria-describedby":o});c.text(h.value),c.on("click",function(t){i.seekTrigger="search";var e=parseFloat(g(this).attr("data-start"));e+=.01,i.seeking=!0,i.seekTo(e)});var u=g("<span>",{class:"able-search-result-text",id:o});u.html("..."+e[r].caption+"..."),l.append(c,u),n.append(l)}g("#"+this.searchDiv).html(t).append(s,n)}else{var d=g("<p>").text(this.tt.noResultsFound);g("#"+this.searchDiv).html(t).append(d)}}},AblePlayer.prototype.searchFor=function(t,e){var i,s,a,n,r,o,l;a=[];var h=t.split(" ");if(0<this.captions.length){for(o=0;o<this.captions.length;o++)this.captions[o].language===this.searchLang&&(i=this.searchLang,s=this.captions[o].cues);if(0<s.length)for(o=r=0;o<s.length;o++)if(-1!==g.inArray(s[o].components.children[0].type,["string","i","b","u","v","c"])){n=this.flattenCueForCaption(s[o]);var p=e?n.toLowerCase():n;for(l=0;l<h.length;l++){var c=e?h[l].toLowerCase():h[l];if(-1!==p.indexOf(c)){a[r]=[],a[r].start=s[o].start,a[r].lang=i,a[r].caption=this.highlightSearchTerm(h,n),r++;break}}}}return a},AblePlayer.prototype.highlightSearchTerm=function(t,i){return t.forEach(function(t){var e=new RegExp(t,"gi");i=i.replace(e,'<span class="able-search-term">$&</span>')}),i},AblePlayer.prototype.secondsToTime=function(t){t=Math.floor(t);var e=parseInt(t/3600,10)%24,i=parseInt(t/60,10)%60,s=t%60,a="",n="";0<e&&(a+=e+":",n+=1==e?"1 "+this.tt.hour+" ":e+" "+this.tt.hours+" "),i<10?(a+="0"+i+":",0<i&&(n+=1==i?"1 "+this.tt.minute+" ":i+" "+this.tt.minutes+" ")):(a+=i+":",n+=i+" "+this.tt.minutes+" "),s<10?(a+="0"+s,0<s&&(n+=1==s?"1 "+this.tt.second+" ":s+" "+this.tt.seconds+" ")):(a+=s,n+=s+" "+this.tt.seconds+" ");var r=[];return r.value=a,r.title=n,r}}(jQuery),function(s){AblePlayer.prototype.onMediaUpdateTime=function(t,e){var i=this;this.getMediaTimes(t,e).then(function(t){i.duration=t.duration,i.elapsed=t.elapsed,i.swappingSrc&&void 0!==i.swapTime?i.swapTime===i.elapsed&&i.playing&&(i.playMedia(),i.swappingSrc=!1,i.swapTime=null):(1===i.prefHighlight&&i.highlightTranscript(i.elapsed),i.updateCaption(i.elapsed),i.showDescription(i.elapsed),i.updateChapter(i.elapsed),i.updateMeta(i.elapsed),i.refreshControls("timeline",i.duration,i.elapsed))})},AblePlayer.prototype.onMediaPause=function(){this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear"),this.refreshControls("playpause")},AblePlayer.prototype.onMediaComplete=function(){this.hasPlaylist&&!this.cueingPlaylistItem&&(this.playlistIndex===this.$playlist.length-1?this.loop?(this.playlistIndex=0,this.cueingPlaylistItem=!0,this.cuePlaylistItem(0)):(this.playing=!1,this.paused=!0):(this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex))),this.refreshControls("init")},AblePlayer.prototype.onMediaNewSourceLoad=function(){this.cueingPlaylistItem&&(this.cueingPlaylistItem=!1),!0===this.swappingSrc&&(0<this.swapTime?this.seekTo(this.swapTime):(this.playing&&this.playMedia(),this.swappingSrc=!1)),this.refreshControls("init")},AblePlayer.prototype.onWindowResize=function(){var t,e;this.fullscreen?(t=s(window).width(),e=this.isUserAgent("Firefox")||this.isUserAgent("Trident")||this.isUserAgent("Edge")?window.innerHeight-this.$playerDiv.outerHeight()-20:window.outerHeight>=window.innerHeight?window.innerHeight-this.$playerDiv.outerHeight():window.outerHeight,this.$descDiv.is(":hidden")||(e-=this.$descDiv.height()),this.positionCaptions("overlay")):this.restoringAfterFullScreen?(t=this.preFullScreenWidth,e=this.preFullScreenHeight):(t=this.$ableWrapper.width(),e=void 0!==this.aspectRatio?Math.round(t/this.aspectRatio):this.$ableWrapper.height(),this.positionCaptions());this.resizePlayer(t,e)},AblePlayer.prototype.addSeekbarListeners=function(){var i=this;this.seekBar.bodyDiv.on("startTracking",function(t){i.pausedBeforeTracking=i.paused,i.pauseMedia()}).on("tracking",function(t,e){i.highlightTranscript(e),i.updateCaption(e),i.showDescription(e),i.updateChapter(i.convertChapterTimeToVideoTime(e)),i.updateMeta(e),i.refreshControls("init")}).on("stopTracking",function(t,e){i.useChapterTimes?i.seekTo(i.convertChapterTimeToVideoTime(e)):i.seekTo(e),i.pausedBeforeTracking||setTimeout(function(){i.playMedia()},200)})},AblePlayer.prototype.onClickPlayerButton=function(t){var e,i;"play"===(e=s(t).attr("class").split(" ")[0].substr(20))?(this.clickedPlay=!0,this.handlePlay()):"restart"===e?(this.seekTrigger="restart",this.handleRestart()):"previous"===e?(this.userClickedPlaylist=!0,this.seekTrigger="previous",this.buttonWithFocus="previous",this.handlePrevTrack()):"next"===e?(this.userClickedPlaylist=!0,this.seekTrigger="next",this.buttonWithFocus="next",this.handleNextTrack()):"rewind"===e?(this.seekTrigger="rewind",this.handleRewind()):"forward"===e?(this.seekTrigger="forward",this.handleFastForward()):"mute"===e?this.handleMute():"volume"===e?this.handleVolume():"faster"===e?this.handleRateIncrease():"slower"===e?this.handleRateDecrease():"captions"===e?this.handleCaptionToggle():"chapters"===e?this.handleChapters():"descriptions"===e?this.handleDescriptionToggle():"sign"===e?this.closingSign||this.handleSignToggle():"preferences"===e?"menu"===s(t).attr("data-prefs-popup")?this.handlePrefsClick():(this.showingPrefsDialog=!0,this.closePopups(),"keyboard"===(i=s(t).attr("data-prefs-popup"))?this.keyboardPrefsDialog.show():"captions"===i?this.captionPrefsDialog.show():"descriptions"===i?this.descPrefsDialog.show():"transcript"===i&&this.transcriptPrefsDialog.show(),this.showingPrefsDialog=!1):"help"===e?this.handleHelpClick():"transcript"===e?this.closingTranscript||this.handleTranscriptToggle():"fullscreen"===e&&(this.clickedFullscreenButton=!0,this.handleFullscreenToggle())},AblePlayer.prototype.okToHandleKeyPress=function(){var t=AblePlayer.getActiveDOMElement();return"INPUT"!==s(t).prop("tagName")},AblePlayer.prototype.onPlayerKeyPress=function(t){var e,i;return 65<=(e=t.which)&&e<=90&&(e+=32),i=s(document.activeElement),27===e&&s.contains(this.$transcriptArea[0],i[0])?(this.handleTranscriptToggle(),!1):!!this.okToHandleKeyPress()&&void(s(":focus").is("[contenteditable]")||s(":focus").is("input")||s(":focus").is("textarea")&&!this.stenoMode||s(":focus").is("select")||t.target.hasAttribute("contenteditable")||"INPUT"===t.target.tagName||"TEXTAREA"===t.target.tagName&&!this.stenoMode||"SELECT"===t.target.tagName||(27===e?this.closePopups():32===e?"button"===i.attr("role")&&(t.preventDefault(),i.click()):112===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handlePlay()):115===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleRestart()):109===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleMute()):118===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleVolume()):49<=e&&e<=57?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleVolume(e)):99===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleCaptionToggle()):100===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleDescriptionToggle()):102===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleFastForward()):114===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleRewind()):98===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handlePrevTrack()):110===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handleNextTrack()):101===e?this.usingModifierKeys(t)&&(t.preventDefault(),this.handlePrefsClick()):13===e&&("button"===i.attr("role")||"SPAN"===i.prop("tagName")?i.click():"LI"===i.prop("tagName")&&i.click())))},AblePlayer.prototype.addHtml5MediaListeners=function(){var e=this;this.$media.on("emptied",function(){}).on("loadedmetadata",function(){e.duration=e.media.duration,e.onMediaNewSourceLoad()}).on("canplay",function(){}).on("canplaythrough",function(){e.playbackRate&&e.setPlaybackRate(e.playbackRate),e.userClickedPlaylist&&(e.startedPlaying||e.playMedia(),e.userClickedPlaylist=!1),"restart"==e.seekTrigger||"chapter"==e.seekTrigger||"transcript"==e.seekTrigger||"search"==e.seekTrigger?e.playMedia():e.startedPlaying?e.hasPlaylist?(e.playlistIndex!==e.$playlist.length||e.loop)&&e.playMedia():e.getPlayerState().then(function(t){!e.swappingSrc||"stopped"!==t&&"paused"!==t||(e.startedPlaying=!1,0<e.swapTime?e.seekTo(e.swapTime):e.playMedia())}):0<e.startTime?e.seeking?(e.seeking=!1,(e.autoplay||e.okToPlay)&&e.playMedia()):e.seekTo(e.startTime):e.defaultChapter&&void 0!==e.selectedChapters?e.seekToChapter(e.defaultChapter):(e.autoplay||e.okToPlay)&&e.playMedia()}).on("play",function(){e.refreshControls("playpause")}).on("playing",function(){e.playing=!0,e.paused=!1,e.refreshControls("playpause")}).on("ended",function(){e.playing=!1,e.paused=!0,e.onMediaComplete()}).on("progress",function(){e.refreshControls("timeline")}).on("waiting",function(){}).on("durationchange",function(){e.refreshControls("timeline")}).on("timeupdate",function(){e.onMediaUpdateTime()}).on("pause",function(){e.clickedPlay?(e.playing=!1,e.paused=!0):e.hasPlaylist||e.swappingSrc||(e.playing=!1,e.paused=!0),e.clickedPlay=!1,e.onMediaPause()}).on("ratechange",function(){}).on("volumechange",function(){e.volume=e.getVolume(),e.debug}).on("error",function(){e.debug&&e.media.error.code})},AblePlayer.prototype.addVimeoListeners=function(){var e=this;this.vimeoPlayer.on("loaded",function(t){e.onMediaNewSourceLoad()}),this.vimeoPlayer.on("play",function(t){e.playing=!0,e.startedPlaying=!0,e.paused=!1,e.refreshControls("playpause")}),this.vimeoPlayer.on("ended",function(t){e.playing=!1,e.paused=!0,e.onMediaComplete()}),this.vimeoPlayer.on("bufferstart",function(){}),this.vimeoPlayer.on("bufferend",function(){}),this.vimeoPlayer.on("progress",function(t){}),this.vimeoPlayer.on("seeking",function(t){}),this.vimeoPlayer.on("seeked",function(t){}),this.vimeoPlayer.on("timeupdate",function(t){e.onMediaUpdateTime(t.duration,t.seconds)}),this.vimeoPlayer.on("pause",function(t){e.clickedPlay?(e.playing=!1,e.paused=!0):e.hasPlaylist||e.swappingSrc||(e.playing=!1,e.paused=!0),e.clickedPlay=!1,e.onMediaPause(),e.refreshControls("playpause")}),this.vimeoPlayer.on("playbackratechange",function(t){e.vimeoPlaybackRate=t.playbackRate}),this.vimeoPlayer.on("texttrackchange",function(t){}),this.vimeoPlayer.on("volumechange",function(t){e.volume=10t.volume}),this.vimeoPlayer.on("error",function(t){})},AblePlayer.prototype.addEventListeners=function(){var e;if(e=this,s(window).resize(function(){e.onWindowResize()}),window.MutationObserver){var t=this.$ableDiv[0];new MutationObserver(function(t){t.forEach(function(t){"attributes"===t.type&&"style"===t.attributeName&&e.$ableDiv.is(":visible")&&e.refreshControls("init")})}).observe(t,{attributes:!0,childList:!0,characterData:!0})}void 0!==this.seekBar?this.addSeekbarListeners():setTimeout(function(){void 0!==e.seekBar&&e.addSeekbarListeners()},2e3),this.$controllerDiv.find('div[role="button"]').on("click",function(t){t.stopPropagation(),e.onClickPlayerButton(this)}),s(document).on("click",function(t){if(0!==t.button)return!1;(s(".able-popup:visible").length||s(".able-volume-popup:visible"))&&e.closePopups()}),this.$ableDiv.on("mousemove",function(){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),s(document).keydown(function(t){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),this.$ableDiv.keydown(function(t){1<AblePlayer.nextIndex&&e.onPlayerKeyPress(t)}),this.stenoMode&&void 0!==this.stenoFrameContents&&this.stenoFrameContents.on("keydown",function(t){e.onPlayerKeyPress(t)}),this.$transcriptArea&&this.$transcriptArea.on("keydown",function(t){1<AblePlayer.nextIndex&&e.onPlayerKeyPress(t)}),this.$playlist&&this.$playlist.click(function(t){e.userClickedPlaylist||(e.userClickedPlaylist=!0,e.playlistIndex=s(this).index(),e.cuePlaylistItem(e.playlistIndex))}),this.$media.click(function(){e.handlePlay()}),"html5"===this.player?this.addHtml5MediaListeners():"vimeo"===this.player?this.addVimeoListeners():"youtube"===this.player&&setInterval(function(){e.onMediaUpdateTime()},300)}}(jQuery),function($){AblePlayer.prototype.initDragDrop=function(e){var i,s,t,a,n,r;i=this,"transcript"===e?(s=this.$transcriptArea,a="transcript-window",t=this.$transcriptToolbar):"sign"===e&&(s=this.$signWindow,a="sign-window",t=this.$signToolbar),t.addClass("able-draggable"),n=$("<div>",{class:"able-resizable"}),r=parseInt(s.css("z-index"))+100,n.css("z-index",r),s.append(n),t.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type||"touchstart"===t.type?i.windowMenuClickRegistered||(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.dragDevice="mouse",i.startDrag(e,s)):"mouseup"!==t.type&&"touchend"!==t.type||i.dragging&&"mouse"===i.dragDevice&&i.endDrag(e),!1}),n.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type||"touchstart"===t.type?i.windowMenuClickRegistered||(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.startResize(e,s)):"mouseup"!==t.type&&"touchend"!==t.type||i.resizing&&i.endResize(e),!1}),s.on("click",function(){i.windowMenuClickRegistered||i.finishingDrag||i.updateZIndex(e),i.finishingDrag=!1}),this.addWindowMenu(e,s,a)},AblePlayer.prototype.addWindowMenu=function(e,t,i){var r,s,o,a,n,l,h,p,c,u,d;(r=this).windowMenuClickRegistered=!1,this.finishingDrag=!1,(s=$('<div role="alert"></div>')).addClass("able-alert"),s.hide(),s.appendTo(this.$activeWindow),s.css({top:t.offset().top}),d=this.mediaId+"-"+i+"-menu",o=$("<button>",{type:"button",tabindex:"0","aria-label":this.tt.windowButtonLabel,"aria-haspopup":"true","aria-controls":d,class:"able-button-handler-preferences"}),"font"===this.iconType?(a=$("<span>",{class:"icon-preferences","aria-hidden":"true"}),o.append(a)):(n=this.rootPath+"button-icons/"+this.toolbarIconColor+"/preferences.png",l=$("<img>",{src:n,alt:"",role:"presentation"}),o.append(l)),h=$("<span>",{class:"able-clipped"}).text(this.tt.windowButtonLabel),o.append(h),p=this.mediaId+"-"+i+"-tooltip",c=$("<div>",{class:"able-tooltip",id:p}).hide(),o.on("mouseenter focus",function(t){var e=$(this).attr("aria-label"),i=$(this).position(),s=$(this).height(),a=($(this).width(),{left:"",right:"0px",top:i.top-s-5+"px"}),n=AblePlayer.localGetElementById(o[0],p).text(e).css(a);r.showTooltip(n),$(this).on("mouseleave blur",function(){AblePlayer.localGetElementById(o[0],p).text("").hide()})}),u=this.setupPopups(i),"transcript"===e?(this.$transcriptAlert=s,this.$transcriptPopupButton=o,this.$transcriptPopup=u,this.$transcriptToolbar.prepend(s,o,c,u)):"sign"===e&&(this.$signAlert=s,this.$signPopupButton=o,this.$signPopup=u,this.$signToolbar.append(s,o,c,u)),o.on("click mousedown keydown",function(t){return!r.focusNotClick&&(r.dragging?(r.dragKeys(e,t),!1):(t.stopPropagation(),r.windowMenuClickRegistered||r.finishingDrag||r.handleWindowButtonClick(e,t),void(r.finishingDrag=!1)))}),this.addResizeDialog(e,t)},AblePlayer.prototype.addResizeDialog=function(t,e){var i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v,y,b,w,P,k,C,T;i=this,"transcript"===t?(s=this.$transcriptPopup,a=this.$transcriptPopupButton):"sign"===t&&(s=this.$signPopup,a=this.$signPopupButton),n=this.mediaId+"-resize-"+t+"-width",r=this.mediaId+"-resize-"+t+"-height",o=e.width(),l=e.height(),h=o/l,p=$("<div></div>",{class:"able-resize-form"}),c=$("<div></div>"),u=$("<div></div>"),d=$("<input>",{type:"text",id:n,value:o}),g=$("<label>",{for:n}).text(this.tt.width),f=$("<div></div>"),m=$("<input>",{type:"text",id:r,value:l}),v=$("<label>",{for:r}).text(this.tt.height),"sign"===t&&(m.prop("readonly",!0),d.on("input",function(){y=$(this).val(),b=Math.round(y/h,0),m.val(b)})),w=$('<button class="modal-button">'+this.tt.save+"</button>"),P=$('<button class="modal-button">'+this.tt.cancel+"</button>"),w.on("click",function(){k=$("#"+n).val(),C=$("#"+r).val(),k===o&&C===l||(i.resizeObject(t,k,C),i.updateCookie(t)),T.hide(),s.hide(),a.focus()}),P.on("click",function(){T.hide(),s.hide(),a.focus()}),u.append(g,d),f.append(v,m),c.append(u,f),p.append(c,"<hr>",w,P),$("body").append(p),T=new AccessibleDialog(p,a,"alert",this.tt.windowResizeHeading,c,this.tt.closeButtonLabel,"20em"),"transcript"===t?this.transcriptResizeDialog=T:"sign"===t&&(this.signResizeDialog=T)},AblePlayer.prototype.handleWindowButtonClick=function(t,e){var i,s,a,n;if((i=this).focusNotClick)return!1;if("transcript"===t?(s=this.$transcriptPopup,a=this.$transcriptPopupButton,this.$transcriptToolbar):"sign"===t&&(s=this.$signPopup,a=this.$signPopupButton,this.$signToolbar),"keydown"===e.type)if(32===e.which||13===e.which)this.windowMenuClickRegistered=!0;else{if(27!==e.which)return!1;s.is(":visible")?s.hide("fast",function(){i.windowMenuClickRegistered=!1,s.find("li").removeClass("able-focus").attr("tabindex","-1"),a.focus()}):"sign"===t?this.handleSignToggle():"transcript"===t&&this.handleTranscriptToggle()}else this.windowMenuClickRegistered=!0;s.is(":visible")?(s.hide(200,"",function(){i.windowMenuClickRegistered=!1}),s.find("li").removeClass("able-focus"),a.attr("aria-expanded","false").focus()):(this.updateZIndex(t),n=a.position().top+a.outerHeight(),s.css("top",n),s.show(200,"",function(){a.attr("aria-expanded","true"),$(this).find("li").first().focus().addClass("able-focus"),i.windowMenuClickRegistered=!1}))},AblePlayer.prototype.handleMenuChoice=function(t,e,i){var s,a,n,r,o;if(s=this,"transcript"===t?(a=this.$transcriptArea,n=this.$transcriptPopup,r=this.$transcriptPopupButton,o=this.transcriptResizeDialog):"sign"===t&&(a=this.$signWindow,n=this.$signPopup,r=this.$signPopupButton,o=this.signResizeDialog),this.$activeWindow=a,"keydown"===i.type)return 27===i.which?n.hide("fast",function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.focus()}):"close"!==e&&(this.$activeWindow=a),!1;if(n.hide("fast",function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1")}),"close"!==e&&r.focus(),"move"===e)this.$activeWindow.attr("role","application"),this.showedAlert(t)||(this.showAlert(this.tt.windowMoveAlert,t),"transcript"===t?this.showedTranscriptAlert=!0:"sign"===t&&(this.showedSignAlert=!0)),"keydown"===i.type?this.dragDevice="keyboard":this.dragDevice="mouse",this.startDrag(t,a),n.hide().parent().focus();else if("resize"==e){var l=o.getInputs();l&&(l[0].value=a.width(),l[1].value=a.height()),o.show()}else"close"==e&&("transcript"===t?(this.closingTranscript=!0,this.handleTranscriptToggle()):"sign"===t&&(this.closingSign=!0,this.handleSignToggle()))},AblePlayer.prototype.startDrag=function(e,t){var i,s,a,n,r;return(i=this).$activeWindow||(this.$activeWindow=t),this.dragging=!0,"transcript"===e?s=this.$transcriptPopup:"sign"===e&&(s=this.$signPopup),this.showedAlert(e)||(this.showAlert(this.tt.windowMoveAlert,e),"transcript"===e?this.showedTranscriptAlert=!0:"sign"===e&&(this.showedSignAlert=!0)),s.is(":visible")&&s.hide(),this.updateZIndex(e),a=this.$activeWindow.position(),this.dragStartX=a.left,this.dragStartY=a.top,void 0===this.startMouseX?(this.dragDevice="keyboard",this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.startingDrag=!0):(this.dragDevice="mouse",this.dragOffsetX=this.startMouseX-this.dragStartX,this.dragOffsetY=this.startMouseY-this.dragStartY),this.$activeWindow.addClass("able-drag").css({position:"absolute",top:this.dragStartY+"px",left:this.dragStartX+"px"}).focus(),"mouse"===this.dragDevice?$(document).on("mousemove touchmove",function(t){i.dragging&&(n=t.pageX-i.dragOffsetX,r=t.pageY-i.dragOffsetY,i.resetDraggedObject(n,r))}):"keyboard"===this.dragDevice&&this.$activeWindow.on("keydown",function(t){i.dragging&&i.dragKeys(e,t)}),!1},AblePlayer.prototype.dragKeys=function(t,e){if(this.startingDrag)return this.startingDrag=!1;switch(10,e.which){case 37:case 63234:this.dragKeyX-=10;break;case 38:case 63232:this.dragKeyY-=10;break;case 39:case 63235:this.dragKeyX+=10;break;case 40:case 63233:this.dragKeyY+=10;break;case 13:case 27:return this.endDrag(t),!1;default:return!1}return this.resetDraggedObject(this.dragKeyX,this.dragKeyY),e.preventDefault&&e.preventDefault(),!1},AblePlayer.prototype.resetDraggedObject=function(t,e){this.$activeWindow.css({left:t+"px",top:e+"px"})},AblePlayer.prototype.resizeObject=function(t,e,i){var s;this.$activeWindow.css({width:e+"px",height:i+"px"}),"transcript"===t&&(s=i-50,this.$transcriptDiv.css("height",s+"px"))},AblePlayer.prototype.endDrag=function(t){var e,i;e=this,"transcript"===t?(this.$transcriptPopup,i=this.$transcriptPopupButton):"sign"===t&&(this.$signPopup,i=this.$signPopupButton),$(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown").removeClass("able-drag"),this.$activeWindow.attr("role","dialog"),this.$activeWindow=null,"keyboard"===this.dragDevice&&i.focus(),this.dragging=!1,this.updateCookie(t),this.startMouseX=void 0,this.startMouseY=void 0,this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){e.finishingDrag=!1},100)},AblePlayer.prototype.isCloseToCorner=function(t,e,i){var s,a,n,r,o,l;return 10,a=(s=t.offset()).top,n=s.left,r=t.width(),o=a+t.height(),l=n+r,Math.abs(o-i)<=10&&Math.abs(l-e)<=10},AblePlayer.prototype.startResize=function(e,t){var i,s,a,n;return(i=this).$activeWindow=t,this.resizing=!0,"transcript"===e?s=this.$transcriptPopup:"sign"===e&&(s=this.$signPopup),s.is(":visible")&&s.hide().parent().focus(),this.$activeWindow.position(),this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.dragStartWidth=this.$activeWindow.width(),this.dragStartHeight=this.$activeWindow.height(),$(document).on("mousemove touchmove",function(t){i.resizing&&(a=i.dragStartWidth+(t.pageX-i.startMouseX),n=i.dragStartHeight+(t.pageY-i.startMouseY),i.resizeObject(e,a,n))}),!1},AblePlayer.prototype.endResize=function(t){var e;"transcript"===t?(this.$transcriptPopup,e=this.$transcriptPopupButton):"sign"===t&&(this.$signPopup,e=this.$signPopupButton),$(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown"),e.show().focus(),this.resizing=!1,this.$activeWindow.removeClass("able-resize"),this.updateCookie(t),this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){this.finishingDrag=!1},100)}}(jQuery),function(n){AblePlayer.prototype.initSignLanguage=function(){"html5"===this.player?(this.signFile=this.$sources.first().attr("data-sign-src"),this.signFile?this.isIOS()?(this.hasSignLanguage=!1,this.debug):(this.debug,this.hasSignLanguage=!0,this.injectSignPlayerCode()):this.hasSignLanguage=!1):this.hasSignLanguage=!1},AblePlayer.prototype.injectSignPlayerCode=function(){var t,e,i,s,a;for(this.getDefaultWidth("sign"),t=this.mediaId+"-sign",this.$signVideo=n("<video>",{id:t,tabindex:"-1"}),this.signVideo=this.$signVideo[0],e=0;e<this.$sources.length;e++){if(i=this.$sources[e].getAttribute("data-sign-src"),s=this.$sources[e].getAttribute("type"),!i){this.hasSignLanguage=!1;break}a=n("<source>",{src:i,type:s}),this.$signVideo.append(a)}this.$signWindow=n("<div>",{class:"able-sign-window",role:"dialog","aria-label":this.tt.sign}),this.$signToolbar=n("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$signWindow.append(this.$signToolbar,this.$signVideo),this.$ableWrapper.append(this.$signWindow),this.initDragDrop("sign"),1===this.prefSign?this.positionDraggableWindow("sign",this.getDefaultWidth("sign")):this.$signWindow.hide()}}(jQuery),function(t){var n={ab:{name:"Abkhaz",nativeName:"аҧсуа"},aa:{name:"Afar",nativeName:"Afaraf"},af:{name:"Afrikaans",nativeName:"Afrikaans"},ak:{name:"Akan",nativeName:"Akan"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"አማርኛ"},ar:{name:"Arabic",nativeName:"العربية"},an:{name:"Aragonese",nativeName:"Aragonés"},hy:{name:"Armenian",nativeName:"Հայերեն"},as:{name:"Assamese",nativeName:"অসমীয়া"},av:{name:"Avaric",nativeName:"авар мацӀ, магӀарул мацӀ"},ae:{name:"Avestan",nativeName:"avesta"},ay:{name:"Aymara",nativeName:"aymar aru"},az:{name:"Azerbaijani",nativeName:"azərbaycan dili"},bm:{name:"Bambara",nativeName:"bamanankan"},ba:{name:"Bashkir",nativeName:"башҡорт теле"},eu:{name:"Basque",nativeName:"euskara, euskera"},be:{name:"Belarusian",nativeName:"Беларуская"},bn:{name:"Bengali",nativeName:"বাংলা"},bh:{name:"Bihari",nativeName:"भोजपुरी"},bi:{name:"Bislama",nativeName:"Bislama"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},br:{name:"Breton",nativeName:"brezhoneg"},bg:{name:"Bulgarian",nativeName:"български език"},my:{name:"Burmese",nativeName:"ဗမာစာ"},ca:{name:"Catalan",nativeName:"Català"},ch:{name:"Chamorro",nativeName:"Chamoru"},ce:{name:"Chechen",nativeName:"нохчийн мотт"},ny:{name:"Chichewa",nativeName:"chiCheŵa, chinyanja"},zh:{name:"Chinese",nativeName:"中文 (Zhōngwén), 汉语, 漢語"},cv:{name:"Chuvash",nativeName:"чӑваш чӗлхи"},kw:{name:"Cornish",nativeName:"Kernewek"},co:{name:"Corsican",nativeName:"corsu, lingua corsa"},cr:{name:"Cree",nativeName:"ᓀᐦᐃᔭᐍᐏᐣ"},hr:{name:"Croatian",nativeName:"hrvatski"},cs:{name:"Czech",nativeName:"česky, čeština"},da:{name:"Danish",nativeName:"dansk"},dv:{name:"Divehi",nativeName:"ދިވެހި"},nl:{name:"Dutch",nativeName:"Nederlands, Vlaams"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti, eesti keel"},ee:{name:"Ewe",nativeName:"Eʋegbe"},fo:{name:"Faroese",nativeName:"føroyskt"},fj:{name:"Fijian",nativeName:"vosa Vakaviti"},fi:{name:"Finnish",nativeName:"suomi, suomen kieli"},fr:{name:"French",nativeName:"français, langue française"},ff:{name:"Fula",nativeName:"Fulfulde, Pulaar, Pular"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"ქართული"},de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"Ελληνικά"},gn:{name:"Guaraní",nativeName:"Avañeẽ"},gu:{name:"Gujarati",nativeName:"ગુજરાતી"},ht:{name:"Haitian",nativeName:"Kreyòl ayisyen"},ha:{name:"Hausa",nativeName:"Hausa, هَوُسَ"},he:{name:"Hebrew",nativeName:"עברית"},hz:{name:"Herero",nativeName:"Otjiherero"},hi:{name:"Hindi",nativeName:"हिन्दी, हिंदी"},ho:{name:"Hiri Motu",nativeName:"Hiri Motu"},hu:{name:"Hungarian",nativeName:"Magyar"},ia:{name:"Interlingua",nativeName:"Interlingua"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ie:{name:"Interlingue",nativeName:"Originally called Occidental; then Interlingue after WWII"},ga:{name:"Irish",nativeName:"Gaeilge"},ig:{name:"Igbo",nativeName:"Asụsụ Igbo"},ik:{name:"Inupiaq",nativeName:"Iñupiaq, Iñupiatun"},io:{name:"Ido",nativeName:"Ido"},is:{name:"Icelandic",nativeName:"Íslenska"},it:{name:"Italian",nativeName:"Italiano"},iu:{name:"Inuktitut",nativeName:"ᐃᓄᒃᑎᑐᑦ"},ja:{name:"Japanese",nativeName:"日本語 (にほんご／にっぽんご)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kl:{name:"Kalaallisut",nativeName:"kalaallisut, kalaallit oqaasii"},kn:{name:"Kannada",nativeName:"ಕನ್ನಡ"},kr:{name:"Kanuri",nativeName:"Kanuri"},ks:{name:"Kashmiri",nativeName:"कश्मीरी, كشميري‎"},kk:{name:"Kazakh",nativeName:"Қазақ тілі"},km:{name:"Khmer",nativeName:"ភាសាខ្មែរ"},ki:{name:"Kikuyu",nativeName:"Gĩkũyũ"},rw:{name:"Kinyarwanda",nativeName:"Ikinyarwanda"},ky:{name:"Kyrgyz",nativeName:"кыргыз тили"},kv:{name:"Komi",nativeName:"коми кыв"},kg:{name:"Kongo",nativeName:"KiKongo"},ko:{name:"Korean",nativeName:"한국어 (韓國語), 조선말 (朝鮮語)"},ku:{name:"Kurdish",nativeName:"Kurdî, كوردی‎"},kj:{name:"Kuanyama",nativeName:"Kuanyama"},la:{name:"Latin",nativeName:"latine, lingua latina"},lb:{name:"Luxembourgish",nativeName:"Lëtzebuergesch"},lg:{name:"Luganda",nativeName:"Luganda"},li:{name:"Limburgish",nativeName:"Limburgs"},ln:{name:"Lingala",nativeName:"Lingála"},lo:{name:"Lao",nativeName:"ພາສາລາວ"},lt:{name:"Lithuanian",nativeName:"lietuvių kalba"},lu:{name:"Luba-Katanga",nativeName:""},lv:{name:"Latvian",nativeName:"latviešu valoda"},gv:{name:"Manx",nativeName:"Gaelg, Gailck"},mk:{name:"Macedonian",nativeName:"македонски јазик"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu, بهاس ملايو‎"},ml:{name:"Malayalam",nativeName:"മലയാളം"},mt:{name:"Maltese",nativeName:"Malti"},mi:{name:"Māori",nativeName:"te reo Māori"},mr:{name:"Marathi",nativeName:"मराठी"},mh:{name:"Marshallese",nativeName:"Kajin M̧ajeļ"},mn:{name:"Mongolian",nativeName:"монгол"},na:{name:"Nauru",nativeName:"Ekakairũ Naoero"},nv:{name:"Navajo",nativeName:"Diné bizaad, Dinékʼehǰí"},nb:{name:"Norwegian Bokmål",nativeName:"Norsk bokmål"},nd:{name:"North Ndebele",nativeName:"isiNdebele"},ne:{name:"Nepali",nativeName:"नेपाली"},ng:{name:"Ndonga",nativeName:"Owambo"},nn:{name:"Norwegian Nynorsk",nativeName:"Norsk nynorsk"},no:{name:"Norwegian",nativeName:"Norsk"},ii:{name:"Nuosu",nativeName:"ꆈꌠ꒿ Nuosuhxop"},nr:{name:"South Ndebele",nativeName:"isiNdebele"},oc:{name:"Occitan",nativeName:"Occitan"},oj:{name:"Ojibwe",nativeName:"ᐊᓂᔑᓈᐯᒧᐎᓐ"},cu:{name:"Church Slavonic",nativeName:"ѩзыкъ словѣньскъ"},om:{name:"Oromo",nativeName:"Afaan Oromoo"},or:{name:"Oriya",nativeName:"ଓଡ଼ିଆ"},os:{name:"Ossetian",nativeName:"ирон æвзаг"},pa:{name:"Punjabi",nativeName:"ਪੰਜਾਬੀ, پنجابی‎"},pi:{name:"Pāli",nativeName:"पाऴि"},fa:{name:"Persian",nativeName:"فارسی"},pl:{name:"Polish",nativeName:"polski"},ps:{name:"Pashto",nativeName:"پښتو"},pt:{name:"Portuguese",nativeName:"Português"},qu:{name:"Quechua",nativeName:"Runa Simi, Kichwa"},rm:{name:"Romansh",nativeName:"rumantsch grischun"},rn:{name:"Kirundi",nativeName:"kiRundi"},ro:{name:"Romanian",nativeName:"română"},ru:{name:"Russian",nativeName:"русский язык"},sa:{name:"Sanskrit",nativeName:"संस्कृतम्"},sc:{name:"Sardinian",nativeName:"sardu"},sd:{name:"Sindhi",nativeName:"सिन्धी, سنڌي، سندھی‎"},se:{name:"Northern Sami",nativeName:"Davvisámegiella"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},sg:{name:"Sango",nativeName:"yângâ tî sängö"},sr:{name:"Serbian",nativeName:"српски језик"},gd:{name:"Gaelic",nativeName:"Gàidhlig"},sn:{name:"Shona",nativeName:"chiShona"},si:{name:"Sinhalese",nativeName:"සිංහල"},sk:{name:"Slovak",nativeName:"slovenčina"},sl:{name:"Slovene",nativeName:"slovenščina"},so:{name:"Somali",nativeName:"Soomaaliga, af Soomaali"},st:{name:"Southern Sotho",nativeName:"Sesotho"},es:{name:"Spanish",nativeName:"español, castellano"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},ss:{name:"Swati",nativeName:"SiSwati"},sv:{name:"Swedish",nativeName:"svenska"},ta:{name:"Tamil",nativeName:"தமிழ்"},te:{name:"Telugu",nativeName:"తెలుగు"},tg:{name:"Tajik",nativeName:"тоҷикӣ, toğikī, تاجیکی‎"},th:{name:"Thai",nativeName:"ไทย"},ti:{name:"Tigrinya",nativeName:"ትግርኛ"},bo:{name:"Tibetan",nativeName:"བོད་ཡིག"},tk:{name:"Turkmen",nativeName:"Türkmen, Түркмен"},tl:{name:"Tagalog",nativeName:"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔"},tn:{name:"Tswana",nativeName:"Setswana"},to:{name:"Tonga",nativeName:"faka Tonga"},tr:{name:"Turkish",nativeName:"Türkçe"},ts:{name:"Tsonga",nativeName:"Xitsonga"},tt:{name:"Tatar",nativeName:"татарча, tatarça, تاتارچا‎"},tw:{name:"Twi",nativeName:"Twi"},ty:{name:"Tahitian",nativeName:"Reo Tahiti"},ug:{name:"Uyghur",nativeName:"Uyƣurqə, ئۇيغۇرچە‎"},uk:{name:"Ukrainian",nativeName:"українська"},ur:{name:"Urdu",nativeName:"اردو"},uz:{name:"Uzbek",nativeName:"zbek, Ўзбек, أۇزبېك‎"},ve:{name:"Venda",nativeName:"Tshivenḓa"},vi:{name:"Vietnamese",nativeName:"Tiếng Việt"},vo:{name:"Volapük",nativeName:"Volapük"},wa:{name:"Walloon",nativeName:"Walon"},cy:{name:"Welsh",nativeName:"Cymraeg"},wo:{name:"Wolof",nativeName:"Wollof"},fy:{name:"Western Frisian",nativeName:"Frysk"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"ייִדיש"},yo:{name:"Yoruba",nativeName:"Yorùbá"},za:{name:"Zhuang",nativeName:"Saɯ cueŋƅ, Saw cuengh"},"ar-dz":{name:"Arabic (Algeria)",nativeName:"العربية (الجزائر)"},"ar-bh":{name:"Arabic (Bahrain)",nativeName:"العربية (البحرين)"},"ar-eg":{name:"Arabic (Egypt)",nativeName:"العربية (مصر)"},"ar-iq":{name:"Arabic (Iraq)",nativeName:"العربية (العراق)"},"ar-jo":{name:"Arabic (Jordan)",nativeName:"العربية (الأردن)"},"ar-kw":{name:"Arabic (Kuwait)",nativeName:"العربية (الكويت)"},"ar-lb":{name:"Arabic (Lebanon)",nativeName:"العربية (لبنان)"},"ar-ly":{name:"Arabic (Libya)",nativeName:"العربية (ليبيا)"},"ar-ma":{name:"Arabic (Morocco)",nativeName:"العربية (المملكة المغربية)"},"ar-om":{name:"Arabic (Oman)",nativeName:"العربية (عمان)"},"ar-qa":{name:"Arabic (Qatar)",nativeName:"العربية (قطر)"},"ar-sa":{name:"Arabic (Saudi Arabia)",nativeName:"العربية (المملكة العربية السعودية)"},"ar-sy":{name:"Arabic (Syria)",nativeName:"العربية (سوريا)"},"ar-tn":{name:"Arabic (Tunisia)",nativeName:"العربية (تونس)"},"ar-ae":{name:"Arabic (U.A.E.)",nativeName:"العربية (الإمارات العربية المتحدة)"},"ar-ye":{name:"Arabic (Yemen)",nativeName:"العربية (اليمن)"},"de-at":{name:"German (Austria)",nativeName:"Deutsch (Österreich)"},"de-li":{name:"German (Liechtenstein)",nativeName:"Deutsch (Liechtenstein)"},"de-lu":{name:"German (Luxembourg)",nativeName:"Deutsch (Luxemburg)"},"de-ch":{name:"German (Switzerland)",nativeName:"Deutsch (Schweiz)"},"en-au":{name:"English (Australia)",nativeName:"English (Australia)"},"en-bz":{name:"English (Belize)",nativeName:"English (Belize)"},"en-ca":{name:"English (Canada)",nativeName:"English (Canada)"},"en-ie":{name:"English (Ireland)",nativeName:"English (Ireland)"},"en-jm":{name:"English (Jamaica)",nativeName:"English (Jamaica)"},"en-nz":{name:"English (New Zealand)",nativeName:""},"en-za":{name:"English (South Africa)",nativeName:"English (South Africa)"},"en-tt":{name:"English (Trinidad)",nativeName:"English (Trinidad y Tobago)"},"en-gb":{name:"English (United Kingdom)",nativeName:"English (United Kingdom)"},"en-us":{name:"English (United States)",nativeName:"English (United States)"},"es-ar":{name:"Spanish (Argentina)",nativeName:"Español (Argentina)"},"es-bo":{name:"Spanish (Bolivia)",nativeName:"Español (Bolivia)"},"es-cl":{name:"Spanish (Chile)",nativeName:"Español (Chile)"},"es-co":{name:"Spanish (Colombia)",nativeName:"Español (Colombia)"},"es-cr":{name:"Spanish (Costa Rica)",nativeName:"Español (Costa Rica)"},"es-do":{name:"Spanish (Dominican Republic)",nativeName:"Español (República Dominicana)"},"es-ec":{name:"Spanish (Ecuador)",nativeName:"Español (Ecuador)"},"es-sv":{name:"Spanish (El Salvador)",nativeName:"Español (El Salvador)"},"es-gt":{name:"Spanish (Guatemala)",nativeName:"Español (Guatemala)"},"es-hn":{name:"Spanish (Honduras)",nativeName:"Español (Honduras)"},"es-mx":{name:"Spanish (Mexico)",nativeName:"Español (México)"},"es-ni":{name:"Spanish (Nicaragua)",nativeName:"Español (Nicaragua)"},"es-pa":{name:"Spanish (Panama)",nativeName:"Español (Panamá)"},"es-py":{name:"Spanish (Paraguay)",nativeName:"Español (Paraguay)"},"es-pe":{name:"Spanish (Peru)",nativeName:"Español (Perú)"},"es-pr":{name:"Spanish (Puerto Rico)",nativeName:"Español (Puerto Rico)"},"es-uy":{name:"Spanish (Uruguay)",nativeName:"Español (Uruguay)"},"es-ve":{name:"Spanish (Venezuela)",nativeName:"Español (Venezuela)"},"fr-be":{name:"French (Belgium)",nativeName:"français (Belgique)"},"fr-ca":{name:"French (Canada)",nativeName:"français (Canada)"},"fr-lu":{name:"French (Luxembourg)",nativeName:"français (Luxembourg)"},"fr-ch":{name:"French (Switzerland)",nativeName:"français (Suisse)"},"it-ch":{name:"Italian (Switzerland)",nativeName:"italiano (Svizzera)"},"nl-be":{name:"Dutch (Belgium)",nativeName:"Nederlands (België)"},"pt-br":{name:"Portuguese (Brazil)",nativeName:"Português (Brasil)"},"sv-fi":{name:"Swedish (Finland)",nativeName:"svenska (Finland)"},"zh-hk":{name:"Chinese (Hong Kong)",nativeName:"中文(香港特别行政區)"},"zh-cn":{name:"Chinese (PRC)",nativeName:"中文(中华人民共和国)"},"zh-sg":{name:"Chinese (Singapore)",nativeName:"中文(新加坡)"},"zh-tw":{name:"Chinese Traditional (Taiwan)",nativeName:"中文（台灣）"}};AblePlayer.prototype.getLanguageName=function(t,e){var i,s,a;return(i=n[t.toLowerCase()])?"local"===e?i.nativeName:i.name:t.includes("-")&&(s=t.substr(0,2),a=t.substr(3),i=n[s.toLowerCase()])?"local"===e?i.nativeName+" ("+a+")":i.name+" ("+a+")":t}}(jQuery),function(n){AblePlayer.prototype.getSupportedLangs=function(){return["ca","cs","de","en","es","fr","he","id","it","ja","nb","nl","pt-br","sv","tr","zh-tw"]},AblePlayer.prototype.getTranslationText=function(){var e,i,t,s,a;return e=n.Deferred(),t=(i=this).getSupportedLangs(),this.lang&&-1===n.inArray(this.lang,t)&&(2==this.lang.indexOf("-")&&-1!==n.inArray(this.lang.substring(0,2),t)?this.lang=this.lang.substring(0,2):this.lang=null),this.lang||(s=n("body").attr("lang")?n("body").attr("lang").toLowerCase():n("html").attr("lang")?n("html").attr("lang").toLowerCase():null)&&(-1!==n.inArray(s,t)?this.lang=s:2==s.indexOf("-")&&-1!==n.inArray(s.substring(0,2),t)&&(this.lang=s.substring(0,2))),this.lang||(this.lang="en"),this.searchLang||(this.searchLang=this.lang),a=this.rootPath+"translations/"+this.lang+".js",console.log('translation file',a),n.getJSON(a,function(t){console.log('retrieved tt file',t);i.tt=t,e.resolve()}),e.promise()}}(jQuery),jQuery,AblePlayer.prototype.computeEndTime=function(t,e){var i=t.split(":").reverse().map(function(t){return parseFloat(t)}),a=e.split(":").reverse().map(function(t){return parseFloat(t)});return i.reduce(function(t,e,i){var s=e+a[i];return 0===i&&(60<s&&(a[i+1]+=1,s-=60),s=s.toFixed(3)),1===i&&60<s&&(a[i+1]+=1,s-=60),s<10&&(s="0"+s),t.push(s),t},[]).reverse().join(":")},AblePlayer.prototype.ttml2webvtt=function(t){var r=this,e=r.convert.xml2json(t,{ignoreComment:!0,alwaysChildren:!0,compact:!0,spaces:2});return JSON.parse(e).tt.body.div.p.reduce(function(t,e,i){var s=e._text,a=Array.isArray(s),n=e._attributes;return r.computeEndTime(n.begin,n.dur),t+(r.computeEndTime(n.begin,"00:00:0")+" --\x3e ")+r.computeEndTime(n.begin,n.dur)+"\n"+(a?s.join("\n"):s)+"\n\n"},"WEBVTT\n\n\n")},function(a){a.doWhen=function(s){return a.Deferred(function(t){var e=a.extend({},{when:null,exec:function(){},interval:100,attempts:100,delayed:0},s,{checkId:null}),i=function(){if(!0===e.when())return e.exec.call(t.promise()),void t.resolve();e.checkId=setInterval(function(){0===e.attempts?(clearInterval(e.checkId),t.reject()):(--e.attempts,!0===e.when()&&(e.attempts=0,clearInterval(e.checkId),e.exec.call(t.promise()),t.resolve()))},e.interval)};0<e.delayed?setTimeout(i,Number(e.delayed)):i()}).promise()}}(jQuery),function(k){AblePlayer.prototype.injectVTS=function(){var e,t,i,s,a,n,r,o,l,h,p,c,u,d,g,f,m;if(e=this,k("#able-vts").length&&this.vtsTracks.length){for(P in this.langs=[],this.getAllLangs(this.vtsTracks),this.vtsLang=this.lang,t=k("<h2>").text("Video Transcript Sorter"),k("#able-vts").append(t),this.$vtsAlert=k("<div>",{id:"able-vts-alert","aria-live":"polite","aria-atomic":"true"}),k("#able-vts").append(this.$vtsAlert),i=k("<div>",{id:"able-vts-instructions"}),s=k("<p>").text("Use the Video Transcript Sorter to perform any of the following tasks:"),n=k("<ul>"),r=k("<li>").text("Reorder chapters, descriptions, captions, and/or subtitles so they appear in the proper sequence in Able Player's auto-generated transcript."),o=k("<li>").text("Modify content or start/end times (all are directly editable within the table)."),l=k("<li>").text("Insert new content, such as chapters or descriptions."),a=k("<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.'),n.append(r,o,l),i.append(s,n,a),k("#able-vts").append(i),h=k("<fieldset>"),p=k("<legend>").text("Select a language"),h.append(p),this.langs)u="vts-lang-radio-"+this.langs[P],c=k("<div>",{}),g=k("<input>",{type:"radio",name:"vts-lang",id:u,value:this.langs[P]}).on("click",function(){e.vtsLang=k(this).val(),e.showVtsAlert("Loading "+e.getLanguageName(e.vtsLang)+" tracks"),e.injectVtsTable("update",e.vtsLang)}),this.langs[P]==this.lang&&g.prop("checked",!0),d=k("<label>",{for:u}).text(this.getLanguageName(this.langs[P])),c.append(g,d),h.append(c);var v,y,b,w,P;k("#able-vts").append(h),f=k("<button>",{type:"button",id:"able-vts-save",value:"save"}).text("Save Changes"),k("#able-vts").append(f),this.injectVtsTable("add",this.vtsLang),v=["captions","chapters","descriptions","subtitles"],k('td[contenteditable="true"]').on("focus",function(){y=k(this).text()}).on("blur",function(){y!=k(this).text()&&(b=k(this).index(),w=k(this).text(),1===b?-1===k.inArray(w,v)&&("s"===w.substr(0,1)?k(this).text("subtitles"):"d"===w.substr(0,1)?k(this).text("descriptions"):"ch"===w.substr(0,2)?k(this).text("chapters"):k(this).text("captions")):2!==b&&3!==b||k(this).text(e.formatTimestamp(w)))}).on("keydown",function(t){t.stopPropagation()}),k("#able-vts-save").on("click",function(t){t.stopPropagation(),"save"==k(this).attr("value")?(k(this).attr("value","cancel").text("Return to Editor"),m=k("#able-vts table"),k("#able-vts-instructions").hide(),k("#able-vts > fieldset").hide(),k("#able-vts table").remove(),k("#able-vts-icon-credit").remove(),e.parseVtsOutput(m)):(k(this).attr("value","save").text("Save Changes"),k("#able-vts-output").remove(),k("#able-vts-instructions").show(),k("#able-vts > fieldset").show(),k("#able-vts").append(m),k("#able-vts").append(e.getIconCredit()),e.showVtsAlert("Cancelling saving. Any edits you made have been restored in the VTS table."))})}},AblePlayer.prototype.setupVtsTracks=function(t,e,i,s,a){var n,r;n=this.getFilenameFromPath(s),r=this.parseVtsTracks(a),this.vtsTracks.push({kind:t,language:e,label:i,srcFile:n,cues:r})},AblePlayer.prototype.getFilenameFromPath=function(t){var e;return-1===(e=t.lastIndexOf("/"))?t:t.substr(e+1)},AblePlayer.prototype.getFilenameFromTracks=function(t,e){for(var i=0;i<this.vtsTracks.length;i++)if(this.vtsTracks[i].kind===t&&this.vtsTracks[i].language===e)return this.vtsTracks[i].srcFile;return!1},AblePlayer.prototype.parseVtsTracks=function(t){var e,i,s,a,n,r,o,l,h;for(e=t.split("\n"),s=[],a=0;a<e.length;)if(-1!==(r=e[a]).indexOf(" --\x3e ")){if(i=r.trim().split(" "),this.isValidTimestamp(i[0])&&this.isValidTimestamp(i[2])){for(l="",n=a+1,h=!1;n<e.length&&!h;)0<(o=e[n].trim()).length?0<l.length?l+="\n"+o:l+=o:h=!0,n++;s.push({start:i[0],end:i[2],content:l}),a=n}}else a++;return s},AblePlayer.prototype.isValidTimestamp=function(t){return!!/^[0-9:,.]$/.test(t)},AblePlayer.prototype.formatTimestamp=function(t){var e,i=t.substr(0,t.lastIndexOf(".")+1);if(3<(e=t.substr(t.lastIndexOf(".")+1)).length)e=e.substr(0,3);else if(e.length<3)for(;e.length<3;)e+="0";return i+e},AblePlayer.prototype.injectVtsTable=function(t,e){var i,s,a,n,r,o,l,h;for("update"===t&&(k("#able-vts table").remove(),k("#able-vts-icon-credit").remove()),i=k("<table>",{lang:e}),n=k("<tr>",{lang:"en"}),s=["Row #","Kind","Start","End","Content","Actions"],a=0;a<s.length;a++)r=k("<th>",{scope:"col"}).text(s[a]),"Actions"===s[a]&&r.addClass("actions"),n.append(r);for(i.append(n),l=this.getAllRows(e),a=0;a<l.length;a++)n=k("<tr>",{id:"able-vts-row-"+(h=a+1),class:"kind-"+l[a].kind}),o=k("<td>").text(h),n.append(o),o=k("<td>",{contenteditable:"true"}).text(l[a].kind),n.append(o),o=k("<td>",{contenteditable:"true"}).text(l[a].start),n.append(o),o=k("<td>",{contenteditable:"true"}).text(l[a].end),n.append(o),o=k("<td>",{contenteditable:"true"}).text(l[a].content),n.append(o),o=this.addVtsActionButtons(h,l.length),n.append(o),i.append(n);k("#able-vts").append(i),k("#able-vts").append(this.getIconCredit())},AblePlayer.prototype.addVtsActionButtons=function(t,e){var i,s,a,n,r,o,l,h,p,c;for(i=this,s=k("<td>"),a=["up","down","insert","delete"],n=0;n<a.length;n++)"up"===(r=a[n])?1<t&&(o=k("<button>",{id:"able-vts-button-up-"+t,title:"Move up","aria-label":"Move Row "+t+" up"}).on("click",function(t){i.onClickVtsActionButton(t.currentTarget)}),l=k("<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"}),p=k("<path>",{d:"M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101c-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.594l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z"}),h=k("<g>").append(p),l.append(h),o.append(l),o.html(o.html()),s.append(o)):"down"===r?t<e&&(o=k("<button>",{id:"able-vts-button-down-"+t,title:"Move down","aria-label":"Move Row "+t+" down"}).on("click",function(t){i.onClickVtsActionButton(t.currentTarget)}),l=k("<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"}),p=k("<path>",{d:"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.424C1.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.428s9.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"}),h=k("<g>").append(p),l.append(h),o.append(l),o.html(o.html()),s.append(o)):"insert"===r?(o=k("<button>",{id:"able-vts-button-insert-"+t,title:"Insert row below","aria-label":"Insert row before Row "+t}).on("click",function(t){i.onClickVtsActionButton(t.currentTarget)}),l=k("<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"}),p=k("<path>",{d:"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.414C242.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.775H27.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.411c5.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.987h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77c7.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"}),h=k("<g>").append(p),l.append(h),o.append(l),o.html(o.html()),s.append(o)):"delete"===r&&(o=k("<button>",{id:"able-vts-button-delete-"+t,title:"Delete row ","aria-label":"Delete Row "+t}).on("click",function(t){i.onClickVtsActionButton(t.currentTarget)}),l=k("<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"}),p=k("<path>",{d:"M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607C429.063,46.021,414.825,31.782,397.281,31.782z"}),c=k("<path>",{d:"M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042c17.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.891c8.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.804zM238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26c0,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.804c0-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.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z"}),h=k("<g>").append(p,c),l.append(h),o.append(l),o.html(o.html()),s.append(o));return s},AblePlayer.prototype.updateVtsActionButtons=function(t,e){var i,s,a,n,r,o;for(i=0;i<t.length;i++)a=(s=t.eq(i)).attr("id"),n=s.attr("aria-label"),r=a.replace(/[0-9]+/g,e),o=n.replace(/[0-9]+/g,e),s.attr("id",r),s.attr("aria-label",o)},AblePlayer.prototype.getIconCredit=function(){return'<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>'},AblePlayer.prototype.getAllLangs=function(t){var e;for(e in t)t[e].hasOwnProperty("language")&&-1===k.inArray(t[e].language,this.langs)&&(this.langs[this.langs.length]=t[e].language)},AblePlayer.prototype.getAllRows=function(t){var e,i,s,a;for(a=[],e=0;e<this.vtsTracks.length;e++)if((i=this.vtsTracks[e]).language==t)for(s in i.cues)a.push({kind:i.kind,lang:t,id:i.cues[s].id,start:i.cues[s].start,end:i.cues[s].end,content:i.cues[s].content});return a.sort(function(t,e){return t.start>e.start?1:-1}),a},AblePlayer.prototype.onClickVtsActionButton=function(t){var e,i,s;i=(e=k(t).attr("id").split("-"))[3],s=e[4],"up"==i?this.moveRow(s,"up"):"down"==i?this.moveRow(s,"down"):"insert"==i?this.insertRow(s):"delete"==i&&this.deleteRow(s)},AblePlayer.prototype.insertRow=function(t){var e,i,s,a,n,r,o,l,h,p,c,u,d,g,f;for(s=(i=(e=k("#able-vts table")).find("tr")).length-1,a=parseInt(t)+1,n=k("<tr>",{id:"able-vts-row-"+a}),r=k("<td>").text(a),n.append(r),p=null,o=k("<select>",{id:"able-vts-kind-"+a,"aria-label":"What kind of track is this?",placeholder:"Select a kind"}).on("change",function(){p=k(this).val(),c="kind-"+p,u=k(this).closest("tr"),k(this).parent().text(p),u.addClass(c)}),l=["","captions","chapters","descriptions","subtitles"],d=0;d<l.length;d++)h=k("<option>",{value:l[d]}).text(l[d]),o.append(h);for(r=k("<td>").append(o),n.append(r),r=k("<td>",{contenteditable:"true"}),n.append(r),r=k("<td>",{contenteditable:"true"}),n.append(r),r=k("<td>",{contenteditable:"true"}),n.append(r),r=this.addVtsActionButtons(a,s),n.append(r),e.find("tr").eq(t).after(n),d=a;d<=s;d++)g=d+1,i.eq(d).attr("id","able-vts-row-"+g),i.eq(d).find("td").eq(0).text(g),f=i.eq(d).find("button"),this.updateVtsActionButtons(f,g);this.adjustTimes(a),this.showVtsAlert("A new row "+a+" has been inserted"),o.focus()},AblePlayer.prototype.deleteRow=function(t){var e,i,s,a,n,r;for((e=k("#able-vts table"))[0].deleteRow(t),s=(i=e.find("tr")).length-1,a=t;a<=s;a++)n=a,i.eq(a).attr("id","able-vts-row-"+n),i.eq(a).find("td").eq(0).text(n),r=i.eq(a).find("button"),this.updateVtsActionButtons(r,n);this.showVtsAlert("Row "+t+" has been deleted")},AblePlayer.prototype.moveRow=function(t,e){var i,s,a,n;k("#able-vts table").find("tr"),i=k("#able-vts table").find("tr").eq(t),"up"==e?(s=parseInt(t)-1,(a=k("#able-vts table").find("tr").eq(s)).before(i)):"down"==e&&(s=parseInt(t)+1,(a=k("#able-vts table").find("tr").eq(s)).after(i)),i.attr("id","able-vts-row-"+s),i.find("td").eq(0).text(s),this.updateVtsActionButtons(i.find("button"),s),a.attr("id","able-vts-row-"+t),a.find("td").eq(0).text(t),this.updateVtsActionButtons(a.find("button"),t),this.adjustTimes(s),n="Row "+t+" has been moved "+e,n+=" and is now Row "+s,this.showVtsAlert(n)},AblePlayer.prototype.adjustTimes=function(t){var e,i,s,a,n,r,o,l,h,p,c,u,d,g,f,m;(e=[]).captions=.001,e.descriptions=.001,e.chapters=.001,l=(n=(i=k("#able-vts table").find("tr")).eq(t)).is('[class^="kind-"]')?this.getKindFromClass(n.attr("class")):"captions",c=this.getSecondsFromColonTime(n.find("td").eq(2).text()),g=this.getSecondsFromColonTime(n.find("td").eq(3).text()),f=1<t?(s=t-1,h=(r=i.eq(s)).is('[class^="kind-"]')?this.getKindFromClass(r.attr("class")):null,u=this.getSecondsFromColonTime(r.find("td").eq(2).text()),this.getSecondsFromColonTime(r.find("td").eq(3).text())):u=h=r=s=null,m=t<i.length-1?(a=t+1,p=(o=i.eq(a)).is('[class^="kind-"]')?this.getKindFromClass(o.attr("class")):null,d=this.getSecondsFromColonTime(o.find("td").eq(2).text()),this.getSecondsFromColonTime(o.find("td").eq(3).text())):d=p=o=a=null,isNaN(c)?(null==h&&(h="captions",r.attr("class","kind-captions"),r.find("td").eq(1).html("captions")),"captions"===h?(c=(parseFloat(f)+.001).toFixed(3),g=d?(parseFloat(d)-.001).toFixed(3):(parseFloat(c)+e[l]).toFixed(3)):"chapters"===h?(c=(parseFloat(u)+.001).toFixed(3),g=d?(parseFloat(d)-.001).toFixed(3):(parseFloat(c)+minDurartion[l]).toFixed(3)):"descriptions"===h&&(c=(parseFloat(u)+e.descriptions).toFixed(3),g=(parseFloat(c)+e.descriptions).toFixed(3))):u?u<c?c<d||(d=(parseFloat(c)+e[l]).toFixed(3),m=(parseFloat(d)+e[p]).toFixed(3)):(c=(parseFloat(u)+e[h]).toFixed(3),g=(parseFloat(c)+e[l]).toFixed(3)):c<d||(d=(parseFloat(c)+e[l]).toFixed(3),m=(parseFloat(d)+e[p]).toFixed(3)),g-c<e[l]&&(g=(parseFloat(c)+e[l]).toFixed(3),d&&(d=(parseFloat(g)+.001).toFixed(3))),n.find("td").eq(2).text(this.formatSecondsAsColonTime(c,!0)),n.find("td").eq(3).text(this.formatSecondsAsColonTime(g,!0)),r&&(r.find("td").eq(2).text(this.formatSecondsAsColonTime(u,!0)),r.find("td").eq(3).text(this.formatSecondsAsColonTime(f,!0))),o&&(o.find("td").eq(2).text(this.formatSecondsAsColonTime(d,!0)),o.find("td").eq(3).text(this.formatSecondsAsColonTime(m,!0)))},AblePlayer.prototype.getKindFromClass=function(t){var e,i,s;return e=t.indexOf("kind-")+5,s=-1==(i=t.indexOf(" ",e))?t.length-e:i-e,t.substr(e,s)},AblePlayer.prototype.showVtsAlert=function(t){this.$vtsAlert.text(t).show().delay(3e3).fadeOut("slow")},AblePlayer.prototype.parseVtsOutput=function(t){var e,i,s,a,n,r,o,l,h,p;for(e=t.attr("lang"),s=["captions","chapters","descriptions","subtitles"],n={},i=0;i<s.length;i++)n[a=s[i]]="WEBVTT\n\n";if(0<(r=t.find("tr")).length)for(i=0;i<r.length;i++)a=r.eq(i).find("td").eq(1).text(),-1!==k.inArray(a,s)&&(o=r.eq(i).find("td").eq(2).text(),l=r.eq(i).find("td").eq(3).text(),h=r.eq(i).find("td").eq(4).text(),void 0!==o&&void 0!==l&&(n[a]+=o+" --\x3e "+l+"\n","undefined"!==h&&(n[a]+=h),n[a]+="\n\n"));for(p=k("<div>",{id:"able-vts-output"}),k("#able-vts").append(p),i=0;i<s.length;i++)8<n[a=s[i]].length&&this.showWebVttOutput(a,n[a],e)},AblePlayer.prototype.showWebVttOutput=function(t,e,i){var s,a,n,r,o;s=k("<h3>").text(t.charAt(0).toUpperCase()+t.slice(1)),r="If you made changes, copy/paste the following content ",(a=this.getFilenameFromTracks(t,i))?(r+="to replace the original content of your "+this.getLanguageName(i)+" ",r+="<em>"+t+"</em> WebVTT file (<strong>"+a+"</strong>)."):r+="into a new "+this.getLanguageName(i)+" <em>"+t+"</em> WebVTT file.",n=k("<p>",{class:"able-vts-output-instructions"}).html(r),o=k("<textarea>").text(e),k("#able-vts-output").append(s,n,o)}}(jQuery),function(o){AblePlayer.prototype.initVimeoPlayer=function(){var e,t,i,s,a,n,r;return e=this,i=(t=new o.Deferred).promise(),s=this.mediaId+"_vimeo",this.$mediaContainer.prepend(o("<div>").attr("id",s)),a=this.vimeoDescId&&this.prefDesc?this.vimeoDescId:this.vimeoId,this.activeVimeoId=a,this.autoplay&&this.okToPlay?"true":"false",(n=this.getVimeoDimensions(this.activeVimeoId,s))?(this.vimeoWidth=n[0],this.vimeoHeight=n[1],this.aspectRatio=e.ytWidth/e.ytHeight):(this.vimeoWidth=null,this.vimeoHeight=null),r={id:a,width:this.vimeoWidth,controls:!1},this.vimeoPlayer=new Vimeo.Player(s,r),this.vimeoPlayer.ready().then(function(){e.hasPlaylist||(e.$media.remove(),e.vimeoPlaybackRate=1,e.vimeoPlayer.setPlaybackRate(e.vimeoPlaybackRate).then(function(t){e.vimeoSupportsPlaybackRateChange=!0}).catch(function(t){e.vimeoSupportsPlaybackRateChange=!1}),t.resolve())}),i},AblePlayer.prototype.getVimeoPaused=function(){var e,t;return t=(e=new o.Deferred).promise(),this.vimeoPlayer.getPaused().then(function(t){e.resolve(t)}),t},AblePlayer.prototype.getVimeoEnded=function(){var e,t;return t=(e=new o.Deferred).promise(),this.vimeoPlayer.getEnded().then(function(t){e.resolve(t)}),t},AblePlayer.prototype.getVimeoState=function(){var e,t,i,s,a;return this,t=(e=new o.Deferred).promise(),i=[],s=this.vimeoPlayer.getPaused(),a=this.vimeoPlayer.getEnded(),i.push(s),i.push(a),s.then(function(t){e.resolve(t)}),a.then(function(t){e.resolve(t)}),o.when.apply(o,i).then(function(){e.resolve()}),t},AblePlayer.prototype.getVimeoDimensions=function(t){var e,i,s,a;return e=[],void 0!==this.playerMaxWidth?(e[0]=this.playerMaxWidth,void 0!==this.playerMaxHeight&&(e[1]=this.playerMaxHeight),e):void 0!==o("#"+t)&&(s=(i=o("#"+t)).width(),a=i.height(),0<s&&0<a)&&(e[0]=s,e[1]=a,e)},AblePlayer.prototype.getVimeoCaptionTracks=function(){var e,i,s,a=new o.Deferred,t=a.promise();return(e=this).vimeoPlayer.getTextTracks().then(function(t){if(t.length){for(i=0;i<t.length;i++)e.hasCaptions=!0,1===e.prefCaptions?e.captionsOn=!0:e.captionsOn=!1,s=t[i].language===e.lang,e.tracks.push({kind:t[i].kind,language:t[i].language,label:t[i].label,def:s});e.captions=e.tracks,e.hasCaptions=!0,e.setupPopups("captions"),a.resolve()}else e.hasCaptions=!1,e.usingVimeoCaptions=!1,a.resolve()}),t}}(jQuery); \ No newline at end of file diff --git a/src/build/ableplayer.min.css b/src/build/ableplayer.min.css index 642dc12..67b6387 100644 --- a/src/build/ableplayer.min.css +++ b/src/build/ableplayer.min.css @@ -1 +1 @@ -.able-wrapper{position:relative;margin:1em 0;padding:0;max-width:100%;height:auto;box-sizing:content-box!important;text-align:left}.able{position:relative;margin:0;padding:0;width:100%;background-color:#000;box-shadow:0 0 16px #262626;z-index:5000}.able-column-left{float:left}.able-column-right{float:left}.able .able-vidcap-container{background-color:#000;left:0;margin:0;position:relative;top:0}.able .able-audcap-container{background-color:#000;position:relative;margin:0;padding:1.5em .25em}.able-player{font-family:Arial,Helvetica,sans-serif;background-color:#262626}.able-audio{padding-top:1em}.able-offscreen{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.able-media-container audio{display:none!important}.able-controller{position:relative;border-bottom:1px solid #4c4c4c;background-color:#464646;min-height:38px;padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:visible}.able .able-vidcap-container video{max-width:100%}.able-media-container iframe{max-width:100%}.able-big-play-button{position:absolute;font-size:8em;color:#fdfdfd;background-color:transparent;border:none;outline:0;left:0;top:0;padding:0;z-index:6500;opacity:.75}.able-big-play-button:focus,.able-big-play-button:hover{opacity:100}.able-big-play-button .icon-play,.able-big-play-button svg{background-color:#000;padding:1rem 2rem}.able-big-play-button:hover .icon-play,.able-big-play-button:hover svg{outline-style:solid;outline-width:medium;outline-color:#8ab839!important}.able-big-play-button:focus .icon-play,.able-big-play-button:focus svg{outline-style:solid;outline-width:medium;outline-color:#ffbb37!important}.able-left-controls,.able-right-controls{overflow:visible}.able-left-controls div[role=button],.able-right-controls div[role=button]{vertical-align:middle}.able-left-controls{float:left}.able-right-controls{float:right}.able-black-controls,.able-black-controls div[role=button],.able-black-controls label{color:#000!important}.able-black-controls .able-seekbar{border:1px solid #000}.able-black-controls label,.able-white-controls,.able-white-controls div[role=button]{color:#fff!important}.able-white-controls .able-seekbar{border:1px solid #fff}.able-controller div[role=button]{background:0 0;position:relative;display:inline-block;border-style:none;margin:3px;padding:0;font-size:20px;min-width:24px;border:none;overflow:visible!important;z-index:6600}.able-controller div[role=button]>img,.able-controller div[role=button]>span{width:20px;margin:0 auto;padding:0;z-index:6700}.able-controller .buttonOff{opacity:.5;z-index:6800}.able-controller .able-seekbar{margin:0 5px;z-index:6900}.able-controller div[role=button]:focus,.able-controller div[role=button]:hover{outline-style:solid;outline-width:medium}.able-controller div[role=button]:hover{outline-color:#8ab839!important}.able-controller div[role=button]:focus{outline-color:#ffbb37!important}.able-controller button::-moz-focus-inner,.able-search-results button::-moz-focus-inner{border:0}.able-seekbar-wrapper{display:inline-block;vertical-align:middle}.able-seekbar{position:relative;height:.5em;border:1px solid;background-color:#000;margin:0 3px;border-style:solid;border-width:2px;border-color:#fff}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:.5em;background-color:#464646;z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:.5em;background-color:#dadada;z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;top:-.4em;background-color:#fdfdfd;width:.8em;height:.8em;border:1px solid;border-radius:.8em;z-index:5500}.able-volume-slider{width:34px;height:80px;background-color:#464646;margin:0;padding:5px 0;position:absolute;right:0;bottom:60px;display:block;z-index:9100}.able-volume-help{display:none}.able-volume-slider input[type=range]{appearance:slider-vertical;writing-mode:bt-rl;width:28px;height:100%;background:0 0}.able-volume-slider input[type=range]::-moz-range-track{border:1px solid #fff;width:7px;cursor:pointer;background:#000}input[type=range]::-moz-range-thumb{background-color:#fdfdfd;outline:1px solid #333;height:16px;width:24px;z-index:9175}.able-status-bar{height:1.5em;min-height:1.5em;color:#ccc;font-size:.9em;background-color:transparent;padding:.5em .5em .25em}.able-status-bar span.able-timer{text-align:left;float:left;width:32%}.able-status-bar span.able-speed{float:left;width:33%;text-align:center}.able-status{font-style:italic;float:right;width:32%;text-align:right}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;display:block;z-index:6000}div.able-captions{display:none;padding:.15em .25em;line-height:1.35em;background-color:#000;font-size:1em;color:#fff;opacity:.75}div.able-vidcap-container div.able-captions-overlay{position:absolute;margin:0;bottom:.5em}div.able-vidcap-container div.able-captions-below{position:relative;min-height:3.2em}div.able-audcap-container.captions-off{display:none}div.able-descriptions{position:relative;color:#ff6;background-color:#262626;min-height:2.8em;border-top:1px solid #666;margin:0;padding:3%;width:94%;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1.1em;color:#fff;background-color:transparent;padding:.5em .5em 1em}div.able-now-playing span{font-size:.9em}div.able-now-playing span span{display:block}div.able-video div.able-now-playing{display:none}div.able-modal-dialog{position:absolute;height:auto;max-width:90%;margin-left:auto;margin-right:auto;top:5%;left:0;right:0;outline:0 none;display:none;color:#000;background-color:#fafafa;box-sizing:content-box!important;z-index:10000;max-height:90%;overflow:scroll}@supports (transform:translate(-50%,-50%)){div.able-modal-dialog{top:50%;left:50%;transform:translate(-50%,-50%)!important}}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:#000;opacity:.5;margin:0;padding:0;top:0;left:0;display:none;z-index:9500}button.modalCloseButton{position:absolute;top:5px;right:5px}button.modal-button{margin-right:5px}div.able-modal-dialog button:focus,div.able-modal-dialog button:hover,div.able-modal-dialog input:focus,div.able-modal-dialog input:hover{outline-style:solid;outline-width:2px}div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:#8ab839}div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:#ffbb37}div.able-modal-dialog h1{font-weight:700;font-size:1.8em;line-height:1.2em;margin:.75em 0;color:#000;text-align:center}.able-help-div,.able-prefs-form,.able-resize-form{background-color:#f5f5f5;border:medium solid #ccc;padding:.5em 1em;margin:0 0 0 1em;width:25em;display:none}.able-prefs-form div[role=group]{margin:1em 0;padding:0;border:none}.able-prefs-form h2{color:#000;font-weight:700;font-size:1.1em}.able-prefs-form div[role=group]>div{display:table;margin-left:1em}.able-prefs-form div[role=group]>div>input{display:table-cell;width:1em;vertical-align:middle}.able-prefs-form div[role=group]>div>label{display:table-cell;padding-left:.5em}.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1em!important}.able-prefDescFormat>div{margin-left:1.5em}.able-prefs-captions label,.able-prefs-captions select{display:block;float:left;margin-bottom:.25em}.able-prefs-captions label{width:6em;text-align:right;padding-right:1em}.able-prefs-captions select{width:10em;font-size:.9em;border-radius:none}.able-prefs-descriptions>div.able-prefs-select{margin:.5em 1em}.able-prefs-descriptions>div.able-prefs-select>label,.able-prefs-descriptions>div.able-prefs-slider>label{width:6em;text-align:right;padding-right:1em}.able-prefs-descriptions>div.able-prefs-select>select,.able-prefs-descriptions>div.able-prefs-slider>select{width:10em;font-size:.9em;border-radius:none}div.able-prefDescPause{margin-top:1em}.able-prefs-form div.able-captions-sample{padding:.5em;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5em;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5em;font-size:1.1em}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1em}.able-resize-form h1{font-size:1.15em}.able-resize-form div div{margin:1em}.able-resize-form label{padding-right:.5em;font-weight:700}.able-resize-form input[type=text]{font-size:1em}.able-resize-form input[readonly]{color:#aaa}.able-window-toolbar{background-color:#464646;min-height:15px;padding:10px;border-style:solid;border-width:0 0 1px 0}.able-draggable:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{position:absolute;top:0;right:0;font-size:1.5em;background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar .able-button-handler-preferences:hover{outline-style:solid;outline-width:medium}.able-window-toolbar .able-button-handler-preferences:hover{outline-color:#8ab839!important}.able-window-toolbar .able-button-handler-preferences:focus{outline-color:#ffbb37!important}.able-window-toolbar .able-popup{position:absolute;cursor:default;right:0;top:0;display:block}.able-drag{border:2px dashed #f90;cursor:move}.able-resizable{position:absolute;width:20px;height:20px;padding:5px 2px;bottom:0;right:0;cursor:nwse-resize}.able-resizable svg line{stroke:#595959;stroke-width:2px}.able-sign-window{position:relative;margin:1em;z-index:8000}.able-sign-window video{width:100%}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0}div.able-chapters-div .able-chapters-heading{margin:1em .75em;font-size:1.1em;font-weight:700}div.able-chapters-div ul{list-style-type:none;padding-left:0}div.able-chapters-div ul li{max-width:100%;padding:0;height:2em}div.able-chapters-div button{width:100%;height:100%;border:none;background-color:transparent;color:#000;font-size:1em;text-align:left;padding:.15em 1em}div.able-chapters-div li.able-current-chapter{background-color:#000!important}div.able-chapters-div li.able-current-chapter button{color:#fff!important}div.able-chapters-div li.able-focus{background-color:#4c4c4c}div.able-chapters-div button::-moz-focus-inner,div.able-chapters-div button:focus,div.able-chapters-div button:hover{border:0;outline:0;color:#fff!important}div.able-wrapper.fullscreen{margin:0!important;position:fixed!important;top:0!important;background:0 0!important}.able-alert,.able-tooltip{position:absolute;padding:5px 10px;border-color:#000;border-width:1px;color:#000!important;background-color:#ccc;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block}.able-alert{background-color:#ffc;box-shadow:0 0 16px #262626;z-index:9400;position:absolute;top:1em}.able-popup{z-index:9200}.able-tooltip{z-index:9000}.able-popup{position:absolute;margin:0;padding:0;border-color:#000;border-width:1px;background-color:#000;opacity:.85;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block;cursor:default}ul.able-popup{list-style-type:none}.able-popup li{padding:.25em 1em .25em .25em;margin:1px;width:auto;color:#fff}.able-popup li.able-focus{background-color:#ccc;color:#000}.able-popup-captions li{padding-left:1em}.able-popup-captions li[aria-checked=true]{padding-left:0}.able-popup-captions li[aria-checked=true]::before{content:"\2713 "}.able-transcript-area{border-width:1px;border-style:solid;height:400px;z-index:7000;outline:0;padding-bottom:25px;background-color:#fff}.able-transcript{position:relative;overflow-y:scroll;padding-left:5%;padding-right:5%;background-color:#fff;height:350px}.able-transcript div{margin:1em 0}.able-transcript-heading{font-size:1.4em;font-weight:700;margin:1em 0;padding:0}.able-transcript-chapter-heading{font-size:1.2em;font-weight:700;margin:0;padding:0}.able-transcript div.able-transcript-desc{background-color:#fee;border:thin solid #336;font-style:italic;padding:1em}.able-transcript .able-unspoken{font-weight:700}.able-transcript .able-hidden{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover{background-color:#000!important;color:#fff!important;padding:.25em .1em;border:none;outline:0}.able-previous{background:#000!important;font-style:italic}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:#ffc;color:#000;border:none;outline:0;border-bottom:1px solid #000;cursor:pointer}.able-window-toolbar label{display:inline;margin-right:10px;color:#fff}.able-controller div[role=button]:focus,.able-controller div[role=button]:hover,.able-controller input:focus,.able-controller input:hover,.able-seekbar-head:focus,.able-seekbar-head:hover,.able-window-toolbar input:focus,.able-window-toolbar input:hover,.able-window-toolbar select:focus,.able-window-toolbar select:hover{outline-style:solid;outline-width:2px}.able-controller div[role=button]:focus,.able-controller input:focus,.able-seekbar-head:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus{outline-color:#ffbb37}.able-controller div[role=button]:hover,.able-controller input:hover,.able-seekbar-head:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover{outline-color:#8ab839}.able-window-toolbar .transcript-language-select-wrapper{float:right;padding-right:30px}.able-playlist{list-style-type:none;margin:0;background-color:#fff;padding:5px 0}.able-playlist li{background-color:#ddd;margin:5px;padding:0;border:2px solid #aaa;border-radius:5px;width:auto;max-width:100%}.able-playlist li button{border:none;color:#000;background-color:transparent;font-size:1em;width:100%;padding:5px 10px;text-align:left}.able-playlist li button:active,.able-playlist li button:focus,.able-playlist li button:hover{background-color:#ffeeb3;color:#000;text-decoration:none;outline:0}.able-playlist li button::-moz-focus-inner{border:0}.able-playlist li button img{width:100px;float:left;margin-right:10px}.able-playlist li.able-current{background-color:#340449;border-color:#230330}.able-playlist li.able-current button{color:#fff;font-weight:700;text-decoration:none;outline:0}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:#000}#able-search-term-echo{font-weight:700;font-style:italic}.able-search-results ul li{font-size:1.1em;margin-bottom:1em}button.able-search-results-time{font-size:1em;font-weight:700;cursor:pointer}button.able-search-results-time:active,button.able-search-results-time:focus,button.able-search-results-time:hover{color:#fff;background-color:#000}.able-search-results-text{padding-left:1em}.able-search-term{background-color:#ffc;font-weight:700}#search-term{font-weight:700;font-style:italic}#able-vts-instructions{margin-bottom:1.5em;padding:1em;border:1px solid #999;width:720px;max-width:90%}#able-vts fieldset{margin:1em;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{float:left;padding-right:1em}#able-vts table{clear:left}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #000;border-collapse:collapse;padding:.5em .75em}#able-vts table th.actions{min-width:140px}#able-vts table td button{width:auto;padding:0;margin:2px}#able-vts table td button svg{width:16px;height:16px}#able-vts table button:hover svg{fill:#c00}tr.kind-chapters,tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{margin:1em}div#able-vts-alert{display:none;position:fixed;top:5px;left:5px;border:2px solid #666;background-color:#ffc;padding:1em;font-weight:700;z-index:9400}button#able-vts-save{font-size:1em;padding:.25em;border-radius:5px;margin-bottom:1em;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}.able-clipped,.able-screenreader-alert{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);width:1px!important;height:1px!important;overflow:hidden!important}.able-error{display:block;background:#ffc;border:2px solid #000;color:red;margin:.75em;padding:.5em}.able-fallback{display:block;text-align:center;border:2px solid #335;background-color:#eee;color:#000;font-weight:700;font-size:1.1em;padding:1em;margin-bottom:1em;max-width:500px;width:95%}.able-fallback div,.able-fallback p,.able-fallback ul{text-align:left}.able-fallback li{font-weight:400}.able-fallback img{width:90%;margin:1em auto;opacity:.3}.able-fallback img.able-poster{position:relative}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:inline-block;width:1em;height:1em;fill:currentColor}div.able-skin-2020 div.able-seekbar-wrapper{width:99%;margin:10px 3px}@font-face{font-family:able;src:url(../button-icons/fonts/able.eot?dqripi);src:url(../button-icons/fonts/able.eot?dqripi#iefix) format('embedded-opentype'),url(../button-icons/fonts/able.ttf?dqripi) format('truetype'),url(../button-icons/fonts/able.woff?dqripi) format('woff'),url(../button-icons/fonts/able.svg?dqripi#able) format('svg');font-weight:400;font-style:normal}.able-wrapper [class=" icon-"],.able-wrapper [class^=icon-]{font-family:able!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-play:before{content:"\f04b"}.icon-pause:before{content:"\f04c"}.icon-stop:before{content:"\f04d"}.icon-restart:before{content:"\e900"}.icon-rewind:before{content:"\e603"}.icon-forward:before{content:"\e604"}.icon-previous:before{content:"\e901"}.icon-next:before{content:"\e902"}.icon-slower:before{content:"\f0dd"}.icon-faster:before{content:"\f0de"}.icon-turtle:before{content:"\e904"}.icon-rabbit:before{content:"\e905"}.icon-ellipsis:before{content:"\e903"}.icon-pipe:before{content:"\e600"}.icon-captions:before{content:"\e601"}.icon-descriptions:before{content:"\e602"}.icon-sign:before{content:"\e60a"}.icon-volume-mute:before{content:"\e606"}.icon-volume-soft:before{content:"\e60c"}.icon-volume-medium:before{content:"\e605"}.icon-volume-loud:before{content:"\e60b"}.icon-volume-up:before{content:"\e607"}.icon-volume-down:before{content:"\e608"}.icon-chapters:before{content:"\e609"}.icon-transcript:before{content:"\f15c"}.icon-preferences:before{content:"\e60d"}.icon-close:before{content:"\f00d"}.icon-fullscreen-expand:before{content:"\f065"}.icon-fullscreen-collapse:before{content:"\f066"}.icon-help:before{content:"\f128"} \ No newline at end of file +:root{--able-white:#fff;--able-black:#000;--able-transparent-gray:#00000077;--able-medium-light-gray:#a8a8a8;--able-light-gray:#dadada;--able-very-light-gray:#eee;--able-off-white:#fdfdfd;--able-dark-gray:#262626;--able-medium-dark-gray:#333;--able-medium-dark-gray2:#464646;--able-medium-gray:#666;--able-bright-yellow:#ff6;--able-light-yellow:#ffc;--able-bright-orange:#f90;--able-light-orange:#ffbb37;--able-bright-green:#8ab839;--able-light-pink:#fee}.able-chapters-div,.able-modal-dialog,.able-modal-overlay,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{--able-base-control-size:24px;--able-color:var(--able-white);--able-control-background:var(--able-black);--able-control-color:var(--able-white);--able-big-play-background:var(--able-transparent-gray);--able-alert-button-color:var(--able-black);--able-seekbar-border:var(--able-medium-light-gray);--able-seekbar-background:var(--able-black);--able-seekbar-loaded:var(--able-medium-gray);--able-seekbar-played:var(--able-light-gray);--able-seekbar-head:var(--able-off-white);--able-control-label-color:var(--able-white);--able-controller-background:var(--able-medium-dark-gray2);--able-separator-color:var(--able-medium-light-gray);--able-volume-background:var(--able-black);--able-volume-outline:var(--able-medium-gray);--able-statusbar-color:var(--able-light-gray);--able-statusbar-background:var(--able-black);--able-default-caption-color:var(--able-white);--able-default-caption-background:var(--able-black);--able-default-description-color:var(--able-bright-yellow);--able-default-description-background:var(--able-dark-gray);--able-description-border:var(--able-medium-gray);--able-now-playing-color:var(--able-white);--able-now-playing-background:var(--able-black);--able-modal-color:var(--able-black);--able-modal-background:var(--able-off-white);--able-modal-overlay:var(--able-transparent-gray);--able-modal-border:3px solid var(--able-light-gray);--able-drag-outline:var(--able-bright-orange);--able-sign-background:var(--able-white);--able-sign-border:var(--able-black);--able-resizable-color:var(--able-medium-gray);--able-chapter-background:transparent;--able-chapter-color:var(--able-black);--able-current-chapter-background:var(--able-black);--able-current-chapter-color:var(--able-white);--able-focus-outline:var(--able-light-orange);--able-hover-outline:var(--able-bright-green);--able-tooltip-border:var(--able-dark-gray);--able-tooltip-color:var(--able-medium-dark-gray);--able-tooltip-background:var(--able-very-light-gray);--able-alert-background:var(--able-light-yellow);--able-menu-border:var(--able-dark-gray);--able-menu-background:var(--able-black);--able-menu-outline:var(--able-medium-gray);--able-menu-color:var(--able-white);--able-menu-focus-background:var(--able-very-light-gray);--able-menu-focus-color:var(--able-black);--able-transcript-background:var(--able-white);--able-cue-audio-description-background:var(--able-light-pink);--able-cue-audio-description-color:var(--able-dark-gray);--able-cue-highlighted-background:var(--able-black);--able-cue-highlighted-color:var(--able-white);--able-cue-interacting-background:var(--able-light-yellow);--able-cue-interacting-color:var(--able-black);--able-playlist-item-background:var(--able-off-white);--able-playlist-item-color:var(--able-black);--able-playlist-item-button-color:var(--able-black);--able-search-results-button-background:var(--able-white);--able-search-results-button-color:var(--able-black);--able-playlist-current-background:var(--able-white);--able-playlist-current-border:var(--able-dark-gray);--able-playlist-current-outline:var(--able-medium-dark-gray);--able-playlist-current-active-color:var(--able-black);--able-playlist-current-active-background:var(--able-white);--able-search-term-background:var(--able-light-yellow);--able-search-term-color:var(--able-black)}.able-black-controls{--able-control-background:#fff!important;--able-control-color:#000!important}.able-chapters-div,.able-modal-dialog,.able-playlist,.able-search-results,.able-transcript-area,.able-wrapper{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.able-chapters-div,.able-chapters-div ,.able-playlist,.able-playlist ,.able-wrapper,.able-wrapper {box-sizing:border-box}.able-wrapper{position:relative;margin:0 auto;padding:0;max-width:100%;height:auto;text-align:start}.able{position:relative;margin:0;padding:0;width:100%;z-index:5000;display:grid}.able-player-transcript .able-window-toolbar input,.able-wrapper .able input{margin:0;padding:2px 4px}.able-control-row{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;padding:8px 9px 8px;gap:4px}.able-pipe{position:relative;top:-2px;color:var(--able-separator-color);margin:0 6px}.able .able-vidcap-container{left:0;margin:0;position:relative;top:0}.able .able-audcap-container{position:relative;margin:0;padding:.5rem;min-height:3.2rem}.able-offscreen,.able-screenreader-alert,.able-transcript .able-hidden{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.able-media-container audio{display:none!important}.able-controller{position:relative;background-color:var(--able-controller-background);padding:0 4px}.able-audio .able-controller{padding-top:8px}.able-skin-legacy .able-controller{padding:0}.able-poster{position:absolute;top:0;left:0;width:100%!important;height:auto!important}.able .able-vidcap-container{overflow:visible}.able .able-vidcap-container video{max-width:100%;display:block}.able-media-container iframe,.able-sign-window iframe{max-width:100%!important;display:block!important}.able-wrapper .able button.able-big-play-button{position:absolute;color:var(--able-control-color);background-color:var(--able-big-play-background);background:var(--able-big-play-background);border:none;outline:0;left:0;top:0;padding:0;z-index:6500;opacity:.75;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.able-audio-wrapper{display:flex;gap:4px;align-items:center;padding:4px;background:var(--able-control-background)}.able-audio-wrapper img{max-width:120px}.able-audio-wrapper .able-audio{flex:1}.able-wrapper .able button.able-big-play-button:focus,.able-wrapper .able button.able-big-play-button:hover{opacity:100}.able-big-play-button svg{background-color:var(--able-control-background);padding:1rem;width:8rem;height:8rem;max-width:140px;max-height:140px;border-radius:8px}.able-big-play-button:focus svg,.able-big-play-button:hover svg{outline:3px solid}.able-left-controls,.able-right-controls{overflow:visible;display:flex;gap:3px;align-items:center;flex-wrap:wrap}.able-skin-legacy .able-left-controls,.able-skin-legacy .able-right-controls{width:fit-content}.able-controller,.able-controller button,.able-controller div[role=button]{color:var(--able-control-color)}.able-controller .able-alert button{color:var(--able-alert-button-color)!important}.able-controller .able-seekbar{border:1px solid var(--able-seekbar-border)}.able-controller div[role=button]{background:0 0;position:relative;padding:2px;min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:1rem;height:1rem;border:none;overflow:visible!important;display:flex;justify-content:center;align-items:center;z-index:6600;border-radius:3px}.able-controller div.able-button-handler-play[role=button]{padding:4px}.able-controller .buttonOff{opacity:.5}.able-seekbar-wrapper{display:block;width:100%;padding:6px 12px}.able-skin-legacy .able-seekbar-wrapper{padding:0}.able-seekbar{display:flex;align-items:center;position:relative;height:.5rem;border:1px solid;background-color:var(--able-seekbar-background);z-index:6500}.able-seekbar-loaded{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-loaded);z-index:5100}.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:100%;background-color:var(--able-seekbar-played);z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;background-color:var(--able-seekbar-head);min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);width:.875rem;height:.875rem;border-radius:100%;z-index:5500}.able-volume-slider{height:120px;background-color:var(--able-volume-background);outline:1px solid var(--able-volume-outline);margin:0;padding:8px;position:absolute;right:0;display:block;z-index:9100}.able-volume-help{display:none}.able-volume-slider input[type=range]{appearance:slider-vertical;writing-mode:bt-rl;width:28px;height:100%;background:0 0}.able-volume-slider input[type=range]::-moz-range-track{border:1px solid #fff;width:7px;cursor:pointer;background:#000}input[type=range]::-moz-range-thumb{background-color:var(--able-control-color);outline:1px solid var(--able-volume-outline);outline-offset:-2px;height:var(--able-base-control-size);width:var(--able-base-control-size);border-radius:100%}.able-status-bar{color:var(--able-statusbar-color);font-size:.875rem;padding:8px 12px;gap:12px;display:flex;align-items:center;justify-content:space-between;background:var(--able-statusbar-background)}.able-status-bar span.able-timer{text-align:start}.able-status-bar span.able-speed{text-align:center}.able-status{font-style:italic;text-align:end}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;display:block;z-index:6000}div.able-captions-wrapper:not(.able-captions-overlay){padding:0}div.able-captions{display:none;padding:4px 6px;line-height:1.4;background-color:var(--able-default-caption-background);font-size:1rem;color:var(--able-default-caption-color);opacity:.75}div.able-vidcap-container div.able-captions-overlay{position:absolute;margin:0;bottom:12px}div.able-vidcap-container div.able-captions-below{position:relative;min-height:4rem;display:flex;justify-content:center;align-items:center}div.able-audcap-container.captions-off{display:none}div.able-descriptions{position:relative;color:var(--able-default-description-color);background-color:var(--able-default-description-background);min-height:4rem;border-top:1px solid var(--able-description-border);margin:0;padding:12px;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1rem;padding:.5rem .5rem 1rem;color:var(--able-now-playing-color);background:var(--able-now-playing-background)}div.able-now-playing span{font-size:.875rem}div.able-video div.able-now-playing{display:none}div.able-modal-dialog{position:fixed;display:none;z-index:10000;max-height:90%;overflow:auto;transform:translate(-50%,-50%)!important;top:50%;left:50%;outline:0 none;color:var(--able-modal-color);background-color:var(--able-modal-background);border:var(--able-modal-border);width:fit-content;max-width:95%;padding:1rem;box-sizing:border-box}@media screen and (width < 800px){div.able-modal-dialog{min-width:95%}}body.able-modal-active{overflow:hidden}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:var(--able-modal-overlay);margin:0;padding:0;top:0;left:0;display:none;z-index:9500}.able-alert button,.able-modal-dialog button{all:unset;padding:4px 12px;font-size:1.125rem;border:2px solid}.able-prefs-buttons{display:flex;gap:8px;margin-top:1rem}.able-modkey-item.hidden{display:none}.able-modal-header{display:flex;justify-content:space-between;gap:8px}.able-modal-dialog .modalCloseButton{margin:0;align-self:flex-start}div.able-modal-dialog h1{font-size:1.5rem;line-height:1.6;margin:0 0 .5rem;order:-1}.able-prefs-form div[role=group]{padding:1rem 0;border:none}.able-prefs-form h2{font-weight:700;font-size:1.1rem}.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1rem!important}.able-prefDescFormat>div{margin-left:1.5rem}.able-prefs-captions>div,.able-prefs-descriptions>div{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.25rem}.able-prefs-captions label,.able-prefs-descriptions label{text-align:end;width:10rem}.able-prefs-checkbox label{width:auto}.able-prefs-captions select,.able-prefs-descriptions select{width:10rem}div.able-prefDescPause{margin-top:1rem}.able-prefs-form div.able-captions-sample{padding:.5rem;text-align:center}.able-prefs-form div.able-desc-sample{padding:.5rem;text-align:center;color:#fff;background-color:#000}.able-prefs-form h2{margin-top:0;margin-bottom:.5rem;font-size:1.1rem}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1rem}.able-resize-form h1{font-size:1.15rem}.able-resize-form div div{margin:1rem 0}.able-resize-form label{display:block}.able-resize-form input{font-size:1.25rem;padding:4px}.able-resize-form input[readonly]{color:var(--able-separator-color)}.able-window-toolbar{background-color:var(--able-controller-background);color:var(--able-control-color);padding:8px;border:none;display:flex;align-items:center;justify-content:space-between;gap:12px}.able-window-toolbar button{order:1}.able-window-toolbar .autoscroll-transcript{order:3;width:fit-content;text-wrap:nowrap}.able-window-toolbar .transcript-language-select-wrapper{order:4}.able-window-toolbar .able-drag-handle{order:2;width:100%;height:100%}.able-window-toolbar .able-drag-handle svg{height:12px;width:auto;margin:0 auto}.able-window-toolbar .able-drag-handle path{fill:var(--able-medium-light-gray)}.able-draggable:hover .able-drag-handle path{fill:var(--able-very-light-gray)}.able-window-toolbar>div{display:flex}.able-window-toolbar button{color:var(--able-control-color)}.able-window-toolbar .able-button-handler-preferences svg{min-width:var(--able-base-control-size);min-height:var(--able-base-control-size);height:1rem;width:1rem}.able-draggable .able-drag-handle:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{background-color:transparent;border:none;outline:0;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences img{display:block}.able-window-toolbar .able-popup{position:absolute;cursor:default;left:0;top:0;display:block;border-radius:0 0 5px 5px;background:var(--able-controller-background)}.able-drag{outline:3px dashed var(--able-drag-outline);outline-offset:2px;cursor:move}.able-resizable{position:absolute;width:24px;height:24px;bottom:0;right:0;padding:1px;cursor:nwse-resize}.able-resizable svg line{stroke:var(--able-resizable-color);stroke-width:2px}.able-sign-window{position:relative;z-index:8000;background:var(--able-sign-background);border:1px solid var(--able-sign-border)}.fade-out{visibility:hidden;opacity:0;transition:visibility 0s 2s,opacity 2s linear}.fade-in{visibility:visible;opacity:1;transition:opacity 1s linear}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.able-sign-window video{width:100%;display:block}.able-sign-window .able-resizable{background:#00000033;background:linear-gradient(to bottom right,transparent 0,transparent 51%,#fff3 51%,#fff3 100%);border-top-left-radius:20px}.able-sign-window:hover .able-resizable{background:var(--able-very-light-gray);background:linear-gradient(to bottom right,transparent 0,transparent 51%,#fffe 51%,#fffe 100%)}.able-sign-window.able-fixed video{margin:0;display:block}.able-sign-window:focus{outline:0}div.able-chapters-div{padding:0;max-width:100%}div.able-chapters-div .able-chapters-heading{margin:8px;font-size:1.125rem;font-weight:700}div.able-chapters-div ul,div.able-chapters-div ul li{list-style-type:none;padding:0;margin:0}div.able-chapters-div button{all:unset;width:100%;height:100%;border:none;background-color:var(--able-chapter-background);color:var(--able-chapter-color);font-size:1rem;text-align:start;padding:8px;box-sizing:border-box}div.able-chapters-div li.able-current-chapter button{background-color:var(--able-current-chapter-background);color:var(--able-current-chapter-color)}div.able-chapters-div button:focus{border:0;outline:2px solid var(--able-focus-outline);outline-offset:2px}div.able-chapters-div button:hover{outline:2px solid var(--able-hover-outline);outline-offset:2px}div.able-wrapper.fullscreen{margin:0!important;position:fixed!important;top:0!important;background:0 0!important}.able-tooltip{position:absolute;padding:4px 8px;border:1px solid var(--able-tooltip-border);color:var(--able-tooltip-color)!important;background-color:var(--able-tooltip-background);border-radius:3px;display:block;font-size:.875rem}.able .able-alert{border:none}.able-alert{background-color:var(--able-alert-background);z-index:9400;padding:4px 8px;position:absolute;height:fit-content;width:100%;border:1px solid;border-radius:0;border-left-width:0;border-right-width:0;justify-content:space-between;align-items:center;gap:12px;bottom:0;left:0}.able-popup{z-index:9200}.able-tooltip{z-index:9500}.able ul.able-popup,ul.able-popup{position:absolute;margin:0;padding:0;padding-inline-start:0;list-style-type:none;border-width:1px;border-color:var(--able-menu-border);background-color:var(--able-menu-background);outline:1px solid var(--able-menu-outline);color:var(--able-menu-color);opacity:.95;border-radius:4px;display:grid;cursor:default;width:auto}.able ul.able-popup li,ul.able-popup li{padding:4px 16px;margin:0;width:auto}.able ul.able-popup li:first-of-type,ul.able-popup li:first-of-type{border-radius:4px 4px 0 0}.able ul.able-popup li:last-of-type,ul.able-popup li:last-of-type{border-radius:0 0 4px 4px}.able ul.able-popup li.able-focus,ul.able-popup li.able-focus{background-color:var(--able-menu-focus-background);color:var(--able-menu-focus-color)}.able-popup-captions li[aria-checked=true]::before{content:"\2713"/'';margin-right:4px}.able-transcript-area{border-width:1px;border-style:solid;z-index:7000;padding-bottom:25px;background-color:var(--able-transcript-background)}.able-transcript{position:relative;overflow-y:scroll;padding-left:1rem;padding-right:1rem;background-color:#fff;height:350px}.able-transcript div{margin:1rem 0}.able-transcript-heading{font-size:1.375rem;font-weight:700;margin:.5rem 0;padding:0}.able-transcript-chapter-heading{font-size:1.125rem;font-weight:700;margin:0;padding:0}.able-transcript div.able-transcript-desc{background-color:var(--able-cue-audio-description-background);color:var(--able-cue-audio-description-color);border:1px solid;font-style:italic;padding:.5rem}.able-transcript .able-unspoken{font-weight:700}.able-highlight,.able-highlight span:active,.able-highlight span:focus,.able-highlight span:hover{background-color:var(--able-cue-highlighted-background)!important;color:var(--able-cue-highlighted-color)!important;padding:.25rem .1rem;border:none;outline:0}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:var(--able-cue-interacting-background);color:var(--able-cue-interacting-color);border:none;outline:0;border-bottom:1px solid;cursor:pointer}.able-window-toolbar label{display:inline;font-size:.875rem;margin-right:.333rem;color:var(--able-control-label-color)}.able-window-toolbar .autoscroll-transcript label{margin-right:0}.able-alert button,.able-controller div[role=button],.able-controller input,.able-modal-dialog button,.able-playlist li button,.able-popup li,.able-search-results li button,.able-seekbar-head,.able-window-toolbar .able-button-handler-preferences,.able-window-toolbar input,.able-window-toolbar select,div.able-modal-dialog button,div.able-modal-dialog input{outline-style:solid;outline-width:3px;outline-color:transparent}.able-alert button:focus,.able-controller div[role=button]:focus,.able-controller input:focus,.able-modal-dialog button:focus,.able-playlist button:focus,.able-search-results li button:focus,.able-seekbar-head:focus,.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar input:focus,.able-window-toolbar select:focus,.able-wrapper .able button.able-big-play-button:focus .icon-play,.able-wrapper .able button.able-big-play-button:focus svg,div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:var(--able-focus-outline)}.able-alert button:hover,.able-controller div[role=button]:hover,.able-controller input:hover,.able-modal-dialog button:hover,.able-playlist li button:hover,.able-popup li:hover,.able-search-results li button:hover,.able-seekbar-head:hover,.able-window-toolbar .able-button-handler-preferences:hover,.able-window-toolbar input:hover,.able-window-toolbar select:hover,.able-wrapper .able button.able-big-play-button:hover .icon-play,.able-wrapper .able button.able-big-play-button:hover svg,div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:var(--able-hover-outline)}.able-playlist,.able-search-results ul{list-style-type:none;margin:0;padding:0;display:grid}.able-playlist li,.able-search-results li{background-color:var(--able-playlist-item-background);color:var(--able-playlist-item-color);padding:0;margin:0;border:1px solid;width:auto;border-bottom:none;max-width:100%}.able-search-results li{display:flex}.able-playlist li:first-of-type:not(.able-player.able-playlistli),.able-search-results li:first-of-type{border-radius:5px 5px 0 0}.able-playlist li:last-of-type:not(.able-player.able-playlistli),.able-search-results li:last-of-type{border-bottom:2px solid;border-radius:0 0 5px 5px}.able-playlist li button,.able-search-results li button{border:none;color:var(--able-playlist-item-button-color);background-color:transparent;font-size:.875rem;width:100%;padding:8px;text-align:start;display:flex;align-items:center;gap:12px;outline-offset:-6px}.able-search-results li button{outline-offset:-3px;border-radius:4px}.able-search-results li>span{font-size:.875rem;padding:8px}.able-search-results li button{width:fit-content;background:var(--able-search-results-button-background);color:var(--able-search-results-buttonc-color);border-radius:3px;margin:2px}.able-playlist li button img{max-width:100px;max-height:100px;display:block}.able-playlist li.able-current{background-color:var(--able-playlist-current-background);border-color:var(--able-playlist-current-border);outline:2px solid var(--able-playlist-current-outline);outline-offset:-2px}.able-playlist li.able-current button:active,.able-playlist li.able-current button:focus,.able-playlist li.able-current button:hover{color:var(--able-playlist-current-active-color);background:var(--able-playlist-current-active-background)}#able-search-term-echo{font-style:italic}button.able-search-results-time{font-weight:700;cursor:pointer}#able-search-term-echo,.able-search-term{background-color:var(--able-search-term-background);color:var(--able-search-term-color);font-weight:700}.able-modal-dialog button svg,.able-modal-dialog div[role=button] svg,.able-wrapper button svg,.able-wrapper div[role=button] svg{display:block;fill:currentColor}#able-vts-instructions{padding:1rem;border:1px solid #999;width:100%;margin:0 auto 1.5rem;box-sizing:border-box}#able-vts fieldset{margin:0 auto 1.5rem;border:none}#able-vts fieldset legend{color:#000;font-weight:700}#able-vts fieldset div{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}#able-vts thead tr{background:#f0f0f0}#able-vts table{border-collapse:collapse}#able-vts table,#able-vts table td,#able-vts table th{border:1px solid #323232;padding:8px;color:#323232}#able-vts table td[contenteditable=true]{white-space:pre-wrap}#able-vts table td[contenteditable=true]:hover{background:#fff;color:#333}#able-vts table td[contenteditable=true]:focus-within{background:#fff;color:#000}#able-vts table td button{width:auto;padding:2px;margin:1px;display:flex;align-items:center;float:left;color:#323232;background:#f6f6f6;border-radius:2px}#able-vts table td button svg{width:22px;height:22px}#able-vts table button:hover svg{fill:#c00}tr.kind-subtitles{background-color:#fff}tr.kind-descriptions{background-color:#fee}tr.kind-chapters{background-color:#e6ffe6}.able-vts-dragging{background-color:#ffc}div#able-vts-icon-credit{font-size:.875rem}div#able-vts-alert{display:none;position:fixed;top:16px;left:16px;border:2px solid #666;background-color:var(--able-alert-background);color:var(--able-black);padding:1rem;z-index:9400}button#able-vts-save{font-size:1rem;padding:6px 12px;border-radius:4px;margin-bottom:1rem;font-weight:700}button#able-vts-save:focus,button#able-vts-save:hover{color:#fff;background-color:#060}.able-vts-output-instructions{width:720px;max-width:90%}#able-vts textarea{height:200px;width:720px;max-width:90%}@media (width < 480px){.able-control-row{gap:8px}.able-control-row div[role=button]{min-width:32px;height:32px}.able-sign-window,.able-transcript-area{position:static!important;width:100%!important}div.able-captions-wrapper:not(.able-captions-overlay){min-height:5rem}} \ No newline at end of file diff --git a/src/build/ableplayer.min.js b/src/build/ableplayer.min.js index 689a873..0b7736d 100644 --- a/src/build/ableplayer.min.js +++ b/src/build/ableplayer.min.js @@ -1,3 +1,3 @@ -/! ableplayer V4.5.1 with DOMPurify included / -/! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE / -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).DOMPurify=e()}(this,(function(){"use strict";const{entries:t,setPrototypeOf:e,isFrozen:i,getPrototypeOf:s,getOwnPropertyDescriptor:a}=Object;let{freeze:n,seal:r,create:o}=Object,{apply:l,construct:h}="undefined"!=typeof Reflect&&Reflect;n||(n=function freeze(t){return t}),r||(r=function seal(t){return t}),l||(l=function apply(t,e,i){return t.apply(e,i)}),h||(h=function construct(t,e){return new t(...e)});const p=unapply(Array.prototype.forEach),c=unapply(Array.prototype.lastIndexOf),u=unapply(Array.prototype.pop),d=unapply(Array.prototype.push),f=unapply(Array.prototype.splice),m=unapply(String.prototype.toLowerCase),g=unapply(String.prototype.toString),v=unapply(String.prototype.match),y=unapply(String.prototype.replace),b=unapply(String.prototype.indexOf),T=unapply(String.prototype.trim),P=unapply(Object.prototype.hasOwnProperty),k=unapply(RegExp.prototype.test),C=function unconstruct(t){return function(){for(var e=arguments.length,i=new Array(e),s=0;s<e;s++)i[s]=arguments[s];return h(t,i)}}(TypeError);function unapply(t){return function(e){for(var i=arguments.length,s=new Array(i>1?i-1:0),a=1;a<i;a++)s[a-1]=arguments[a];return l(t,e,s)}}function addToSet(t,s){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:m;e&&e(t,null);let n=s.length;for(;n--;){let e=s[n];if("string"==typeof e){const t=a(e);t!==e&&(i(s)||(s[n]=t),e=t)}t[e]=!0}return t}function cleanArray(t){for(let e=0;e<t.length;e++){P(t,e)||(t[e]=null)}return t}function clone(e){const i=o(null);for(const[s,a]of t(e)){P(e,s)&&(Array.isArray(a)?i[s]=cleanArray(a):a&&"object"==typeof a&&a.constructor===Object?i[s]=clone(a):i[s]=a)}return i}function lookupGetter(t,e){for(;null!==t;){const i=a(t,e);if(i){if(i.get)return unapply(i.get);if("function"==typeof i.value)return unapply(i.value)}t=s(t)}return function fallbackValue(){return null}}const w=n(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","section","select","shadow","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),D=n(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","filter","font","g","glyph","glyphref","hkern","image","line","lineargradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),A=n(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),x=n(["animate","color-profile","cursor","discard","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),$=n(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]),S=n(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),N=n(["#text"]),I=n(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","face","for","headers","height","hidden","high","href","hreflang","id","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns","slot"]),M=n(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),B=n(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),L=n(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),E=r(/\{\{[\w\W]|[\w\W]\}\}/gm),F=r(/<%[\w\W]|[\w\W]%>/gm),O=r(/\$\{[\w\W]/gm),R=r(/^data-[\-\w.\u00B7-\uFFFF]+$/),V=r(/^aria-[\-\w]+$/),z=r(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),H=r(/^(?:\w+script|data):/i),W=r(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),_=r(/^html$/i),q=r(/^[a-z][.\w](-[.\w]+)+$/i);var j=Object.freeze({proto:null,ARIA_ATTR:V,ATTR_WHITESPACE:W,CUSTOM_ELEMENT:q,DATA_ATTR:R,DOCTYPE_NAME:_,ERB_EXPR:F,IS_ALLOWED_URI:z,IS_SCRIPT_OR_DATA:H,MUSTACHE_EXPR:E,TMPLIT_EXPR:O});const K=1,U=3,Y=7,G=8,X=9,Q=function getGlobal(){return"undefined"==typeof window?null:window};var Z=function createDOMPurify(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Q();const DOMPurify=t=>createDOMPurify(t);if(DOMPurify.version="3.2.4",DOMPurify.removed=[],!e||!e.document||e.document.nodeType!==X||!e.Element)return DOMPurify.isSupported=!1,DOMPurify;let{document:i}=e;const s=i,a=s.currentScript,{DocumentFragment:r,HTMLTemplateElement:l,Node:h,Element:E,NodeFilter:F,NamedNodeMap:O=e.NamedNodeMap||e.MozNamedAttrMap,HTMLFormElement:R,DOMParser:V,trustedTypes:H}=e,W=E.prototype,q=lookupGetter(W,"cloneNode"),Z=lookupGetter(W,"remove"),J=lookupGetter(W,"nextSibling"),tt=lookupGetter(W,"childNodes"),et=lookupGetter(W,"parentNode");if("function"==typeof l){const t=i.createElement("template");t.content&&t.content.ownerDocument&&(i=t.content.ownerDocument)}let it,st="";const{implementation:at,createNodeIterator:nt,createDocumentFragment:rt,getElementsByTagName:ot}=i,{importNode:lt}=s;let ht={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]};DOMPurify.isSupported="function"==typeof t&&"function"==typeof et&&at&&void 0!==at.createHTMLDocument;const{MUSTACHE_EXPR:pt,ERB_EXPR:ct,TMPLIT_EXPR:ut,DATA_ATTR:dt,ARIA_ATTR:ft,IS_SCRIPT_OR_DATA:mt,ATTR_WHITESPACE:gt,CUSTOM_ELEMENT:vt}=j;let{IS_ALLOWED_URI:yt}=j,bt=null;const Tt=addToSet({},[...w,...D,...A,...$,...N]);let Pt=null;const kt=addToSet({},[...I,...M,...B,...L]);let Ct=Object.seal(o(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),wt=null,Dt=null,At=!0,xt=!0,$t=!1,St=!0,Nt=!1,It=!0,Mt=!1,Bt=!1,Lt=!1,Et=!1,Ft=!1,Ot=!1,Rt=!0,Vt=!1,zt=!0,Ht=!1,Wt={},_t=null;const qt=addToSet({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]);let jt=null;const Kt=addToSet({},["audio","video","img","source","image","track"]);let Ut=null;const Yt=addToSet({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),Gt="http://www.w3.org/1998/Math/MathML",Xt="http://www.w3.org/2000/svg",Qt="http://www.w3.org/1999/xhtml";let Zt=Qt,Jt=!1,te=null;const ee=addToSet({},[Gt,Xt,Qt],g);let ie=addToSet({},["mi","mo","mn","ms","mtext"]),se=addToSet({},["annotation-xml"]);const ae=addToSet({},["title","style","font","a","script"]);let ne=null;const re=["application/xhtml+xml","text/html"];let oe=null,le=null;const he=i.createElement("form"),pe=function isRegexOrFunction(t){return t instanceof RegExp||t instanceof Function},ce=function _parseConfig(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!le||le!==t){if(t&&"object"==typeof t||(t={}),t=clone(t),ne=-1===re.indexOf(t.PARSER_MEDIA_TYPE)?"text/html":t.PARSER_MEDIA_TYPE,oe="application/xhtml+xml"===ne?g:m,bt=P(t,"ALLOWED_TAGS")?addToSet({},t.ALLOWED_TAGS,oe):Tt,Pt=P(t,"ALLOWED_ATTR")?addToSet({},t.ALLOWED_ATTR,oe):kt,te=P(t,"ALLOWED_NAMESPACES")?addToSet({},t.ALLOWED_NAMESPACES,g):ee,Ut=P(t,"ADD_URI_SAFE_ATTR")?addToSet(clone(Yt),t.ADD_URI_SAFE_ATTR,oe):Yt,jt=P(t,"ADD_DATA_URI_TAGS")?addToSet(clone(Kt),t.ADD_DATA_URI_TAGS,oe):Kt,_t=P(t,"FORBID_CONTENTS")?addToSet({},t.FORBID_CONTENTS,oe):qt,wt=P(t,"FORBID_TAGS")?addToSet({},t.FORBID_TAGS,oe):{},Dt=P(t,"FORBID_ATTR")?addToSet({},t.FORBID_ATTR,oe):{},Wt=!!P(t,"USE_PROFILES")&&t.USE_PROFILES,At=!1!==t.ALLOW_ARIA_ATTR,xt=!1!==t.ALLOW_DATA_ATTR,$t=t.ALLOW_UNKNOWN_PROTOCOLS||!1,St=!1!==t.ALLOW_SELF_CLOSE_IN_ATTR,Nt=t.SAFE_FOR_TEMPLATES||!1,It=!1!==t.SAFE_FOR_XML,Mt=t.WHOLE_DOCUMENT||!1,Et=t.RETURN_DOM||!1,Ft=t.RETURN_DOM_FRAGMENT||!1,Ot=t.RETURN_TRUSTED_TYPE||!1,Lt=t.FORCE_BODY||!1,Rt=!1!==t.SANITIZE_DOM,Vt=t.SANITIZE_NAMED_PROPS||!1,zt=!1!==t.KEEP_CONTENT,Ht=t.IN_PLACE||!1,yt=t.ALLOWED_URI_REGEXP||z,Zt=t.NAMESPACE||Qt,ie=t.MATHML_TEXT_INTEGRATION_POINTS||ie,se=t.HTML_INTEGRATION_POINTS||se,Ct=t.CUSTOM_ELEMENT_HANDLING||{},t.CUSTOM_ELEMENT_HANDLING&&pe(t.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(Ct.tagNameCheck=t.CUSTOM_ELEMENT_HANDLING.tagNameCheck),t.CUSTOM_ELEMENT_HANDLING&&pe(t.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(Ct.attributeNameCheck=t.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),t.CUSTOM_ELEMENT_HANDLING&&"boolean"==typeof t.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements&&(Ct.allowCustomizedBuiltInElements=t.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),Nt&&(xt=!1),Ft&&(Et=!0),Wt&&(bt=addToSet({},N),Pt=[],!0===Wt.html&&(addToSet(bt,w),addToSet(Pt,I)),!0===Wt.svg&&(addToSet(bt,D),addToSet(Pt,M),addToSet(Pt,L)),!0===Wt.svgFilters&&(addToSet(bt,A),addToSet(Pt,M),addToSet(Pt,L)),!0===Wt.mathMl&&(addToSet(bt,$),addToSet(Pt,B),addToSet(Pt,L))),t.ADD_TAGS&&(bt===Tt&&(bt=clone(bt)),addToSet(bt,t.ADD_TAGS,oe)),t.ADD_ATTR&&(Pt===kt&&(Pt=clone(Pt)),addToSet(Pt,t.ADD_ATTR,oe)),t.ADD_URI_SAFE_ATTR&&addToSet(Ut,t.ADD_URI_SAFE_ATTR,oe),t.FORBID_CONTENTS&&(_t===qt&&(_t=clone(_t)),addToSet(_t,t.FORBID_CONTENTS,oe)),zt&&(bt["#text"]=!0),Mt&&addToSet(bt,["html","head","body"]),bt.table&&(addToSet(bt,["tbody"]),delete wt.tbody),t.TRUSTED_TYPES_POLICY){if("function"!=typeof t.TRUSTED_TYPES_POLICY.createHTML)throw C('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');if("function"!=typeof t.TRUSTED_TYPES_POLICY.createScriptURL)throw C('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');it=t.TRUSTED_TYPES_POLICY,st=it.createHTML("")}else void 0===it&&(it=function _createTrustedTypesPolicy(t,e){if("object"!=typeof t||"function"!=typeof t.createPolicy)return null;let i=null;const s="data-tt-policy-suffix";e&&e.hasAttribute(s)&&(i=e.getAttribute(s));const a="dompurify"+(i?"#"+i:"");try{return t.createPolicy(a,{createHTML:t=>t,createScriptURL:t=>t})}catch(t){return null}}(H,a)),null!==it&&"string"==typeof st&&(st=it.createHTML(""));n&&n(t),le=t}},ue=addToSet({},[...D,...A,...x]),de=addToSet({},[...$,...S]),fe=function _forceRemove(t){d(DOMPurify.removed,{element:t});try{et(t).removeChild(t)}catch(e){Z(t)}},me=function _removeAttribute(t,e){try{d(DOMPurify.removed,{attribute:e.getAttributeNode(t),from:e})}catch(t){d(DOMPurify.removed,{attribute:null,from:e})}if(e.removeAttribute(t),"is"===t)if(Et||Ft)try{fe(e)}catch(t){}else try{e.setAttribute(t,"")}catch(t){}},ge=function _initDocument(t){let e=null,s=null;if(Lt)t="<remove></remove>"+t;else{const e=v(t,/^[\r\n\t ]+/);s=e&&e[0]}"application/xhtml+xml"===ne&&Zt===Qt&&(t='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+t+"</body></html>");const a=it?it.createHTML(t):t;if(Zt===Qt)try{e=(new V).parseFromString(a,ne)}catch(t){}if(!e||!e.documentElement){e=at.createDocument(Zt,"template",null);try{e.documentElement.innerHTML=Jt?st:a}catch(t){}}const n=e.body||e.documentElement;return t&&s&&n.insertBefore(i.createTextNode(s),n.childNodes[0]||null),Zt===Qt?ot.call(e,Mt?"html":"body")[0]:Mt?e.documentElement:n},ve=function _createNodeIterator(t){return nt.call(t.ownerDocument||t,t,F.SHOW_ELEMENT|F.SHOW_COMMENT|F.SHOW_TEXT|F.SHOW_PROCESSING_INSTRUCTION|F.SHOW_CDATA_SECTION,null)},ye=function _isClobbered(t){return t instanceof R&&("string"!=typeof t.nodeName||"string"!=typeof t.textContent||"function"!=typeof t.removeChild||!(t.attributes instanceof O)||"function"!=typeof t.removeAttribute||"function"!=typeof t.setAttribute||"string"!=typeof t.namespaceURI||"function"!=typeof t.insertBefore||"function"!=typeof t.hasChildNodes)},be=function _isNode(t){return"function"==typeof h&&t instanceof h};function _executeHooks(t,e,i){p(t,(t=>{t.call(DOMPurify,e,i,le)}))}const Te=function _sanitizeElements(t){let e=null;if(_executeHooks(ht.beforeSanitizeElements,t,null),ye(t))return fe(t),!0;const i=oe(t.nodeName);if(_executeHooks(ht.uponSanitizeElement,t,{tagName:i,allowedTags:bt}),t.hasChildNodes()&&!be(t.firstElementChild)&&k(/<[/\w]/g,t.innerHTML)&&k(/<[/\w]/g,t.textContent))return fe(t),!0;if(t.nodeType===Y)return fe(t),!0;if(It&&t.nodeType===G&&k(/<[/\w]/g,t.data))return fe(t),!0;if(!bt[i]||wt[i]){if(!wt[i]&&ke(i)){if(Ct.tagNameCheck instanceof RegExp&&k(Ct.tagNameCheck,i))return!1;if(Ct.tagNameCheck instanceof Function&&Ct.tagNameCheck(i))return!1}if(zt&&!_t[i]){const e=et(t)||t.parentNode,i=tt(t)||t.childNodes;if(i&&e){for(let s=i.length-1;s>=0;--s){const a=q(i[s],!0);a.removalCount=(t.removalCount||0)+1,e.insertBefore(a,J(t))}}}return fe(t),!0}return t instanceof E&&!function _checkValidNamespace(t){let e=et(t);e&&e.tagName||(e={namespaceURI:Zt,tagName:"template"});const i=m(t.tagName),s=m(e.tagName);return!!te[t.namespaceURI]&&(t.namespaceURI===Xt?e.namespaceURI===Qt?"svg"===i:e.namespaceURI===Gt?"svg"===i&&("annotation-xml"===s||ie[s]):Boolean(ue[i]):t.namespaceURI===Gt?e.namespaceURI===Qt?"math"===i:e.namespaceURI===Xt?"math"===i&&se[s]:Boolean(de[i]):t.namespaceURI===Qt?!(e.namespaceURI===Xt&&!se[s])&&!(e.namespaceURI===Gt&&!ie[s])&&!de[i]&&(ae[i]||!ue[i]):!("application/xhtml+xml"!==ne||!te[t.namespaceURI]))}(t)?(fe(t),!0):"noscript"!==i&&"noembed"!==i&&"noframes"!==i||!k(/<\/no(script|embed|frames)/i,t.innerHTML)?(Nt&&t.nodeType===U&&(e=t.textContent,p([pt,ct,ut],(t=>{e=y(e,t," ")})),t.textContent!==e&&(d(DOMPurify.removed,{element:t.cloneNode()}),t.textContent=e)),_executeHooks(ht.afterSanitizeElements,t,null),!1):(fe(t),!0)},Pe=function _isValidAttribute(t,e,s){if(Rt&&("id"===e||"name"===e)&&(s in i||s in he))return!1;if(xt&&!Dt[e]&&k(dt,e));else if(At&&k(ft,e));else if(!Pt[e]||Dt[e]){if(!(ke(t)&&(Ct.tagNameCheck instanceof RegExp&&k(Ct.tagNameCheck,t)||Ct.tagNameCheck instanceof Function&&Ct.tagNameCheck(t))&&(Ct.attributeNameCheck instanceof RegExp&&k(Ct.attributeNameCheck,e)||Ct.attributeNameCheck instanceof Function&&Ct.attributeNameCheck(e))||"is"===e&&Ct.allowCustomizedBuiltInElements&&(Ct.tagNameCheck instanceof RegExp&&k(Ct.tagNameCheck,s)||Ct.tagNameCheck instanceof Function&&Ct.tagNameCheck(s))))return!1}else if(Ut[e]);else if(k(yt,y(s,gt,"")));else if("src"!==e&&"xlink:href"!==e&&"href"!==e||"script"===t||0!==b(s,"data:")||!jt[t]){if($t&&!k(mt,y(s,gt,"")));else if(s)return!1}else;return!0},ke=function _isBasicCustomElement(t){return"annotation-xml"!==t&&v(t,vt)},Ce=function _sanitizeAttributes(t){_executeHooks(ht.beforeSanitizeAttributes,t,null);const{attributes:e}=t;if(!e||ye(t))return;const i={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:Pt,forceKeepAttr:void 0};let s=e.length;for(;s--;){const a=e[s],{name:n,namespaceURI:r,value:o}=a,l=oe(n);let h="value"===n?o:T(o);if(i.attrName=l,i.attrValue=h,i.keepAttr=!0,i.forceKeepAttr=void 0,_executeHooks(ht.uponSanitizeAttribute,t,i),h=i.attrValue,!Vt||"id"!==l&&"name"!==l||(me(n,t),h="user-content-"+h),It&&k(/((--!?|])>)|<\/(style|title)/i,h)){me(n,t);continue}if(i.forceKeepAttr)continue;if(me(n,t),!i.keepAttr)continue;if(!St&&k(/\/>/i,h)){me(n,t);continue}Nt&&p([pt,ct,ut],(t=>{h=y(h,t," ")}));const c=oe(t.nodeName);if(Pe(c,l,h)){if(it&&"object"==typeof H&&"function"==typeof H.getAttributeType)if(r);else switch(H.getAttributeType(c,l)){case"TrustedHTML":h=it.createHTML(h);break;case"TrustedScriptURL":h=it.createScriptURL(h)}try{r?t.setAttributeNS(r,n,h):t.setAttribute(n,h),ye(t)?fe(t):u(DOMPurify.removed)}catch(t){}}}_executeHooks(ht.afterSanitizeAttributes,t,null)},we=function _sanitizeShadowDOM(t){let e=null;const i=ve(t);for(_executeHooks(ht.beforeSanitizeShadowDOM,t,null);e=i.nextNode();)_executeHooks(ht.uponSanitizeShadowNode,e,null),Te(e),Ce(e),e.content instanceof r&&_sanitizeShadowDOM(e.content);_executeHooks(ht.afterSanitizeShadowDOM,t,null)};return DOMPurify.sanitize=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=null,a=null,n=null,o=null;if(Jt=!t,Jt&&(t="\x3c!--\x3e"),"string"!=typeof t&&!be(t)){if("function"!=typeof t.toString)throw C("toString is not a function");if("string"!=typeof(t=t.toString()))throw C("dirty is not a string, aborting")}if(!DOMPurify.isSupported)return t;if(Bt||ce(e),DOMPurify.removed=[],"string"==typeof t&&(Ht=!1),Ht){if(t.nodeName){const e=oe(t.nodeName);if(!bt[e]||wt[e])throw C("root node is forbidden and cannot be sanitized in-place")}}else if(t instanceof h)i=ge("\x3c!----\x3e"),a=i.ownerDocument.importNode(t,!0),a.nodeType===K&&"BODY"===a.nodeName||"HTML"===a.nodeName?i=a:i.appendChild(a);else{if(!Et&&!Nt&&!Mt&&-1===t.indexOf("<"))return it&&Ot?it.createHTML(t):t;if(i=ge(t),!i)return Et?null:Ot?st:""}i&&Lt&&fe(i.firstChild);const l=ve(Ht?t:i);for(;n=l.nextNode();)Te(n),Ce(n),n.content instanceof r&&we(n.content);if(Ht)return t;if(Et){if(Ft)for(o=rt.call(i.ownerDocument);i.firstChild;)o.appendChild(i.firstChild);else o=i;return(Pt.shadowroot||Pt.shadowrootmode)&&(o=lt.call(s,o,!0)),o}let c=Mt?i.outerHTML:i.innerHTML;return Mt&&bt["!doctype"]&&i.ownerDocument&&i.ownerDocument.doctype&&i.ownerDocument.doctype.name&&k(_,i.ownerDocument.doctype.name)&&(c="<!DOCTYPE "+i.ownerDocument.doctype.name+">\n"+c),Nt&&p([pt,ct,ut],(t=>{c=y(c,t," ")})),it&&Ot?it.createHTML(c):c},DOMPurify.setConfig=function(){ce(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),Bt=!0},DOMPurify.clearConfig=function(){le=null,Bt=!1},DOMPurify.isValidAttribute=function(t,e,i){le||ce({});const s=oe(t),a=oe(e);return Pe(s,a,i)},DOMPurify.addHook=function(t,e){"function"==typeof e&&d(ht[t],e)},DOMPurify.removeHook=function(t,e){if(void 0!==e){const i=c(ht[t],e);return-1===i?void 0:f(ht[t],i,1)[0]}return u(ht[t])},DOMPurify.removeHooks=function(t){ht[t]=[]},DOMPurify.removeAllHooks=function(){ht={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}},DOMPurify}();return Z}));var AblePlayerInstances=[];!function(t){t((function(){t("video, audio").each((function(e,i){void 0!==t(i).data("able-player")&&AblePlayerInstances.push(new AblePlayer(t(this),t(i)))}))})),window.onYouTubeIframeAPIReady=function(){AblePlayer.youTubeIframeAPIReady=!0,t("body").trigger("youTubeIframeAPIReady",[])},t(window).on("keydown",(function(t){1===AblePlayer.nextIndex&&AblePlayer.lastCreated.onPlayerKeyPress(t)})),window.AblePlayer=function(e){if(AblePlayer.lastCreated=this,this.media=e,0!==t(e).length){if(void 0!==t(e).attr("autoplay")?(this.autoplay=!0,this.okToPlay=!0):(this.autoplay=!1,this.okToPlay=!1),void 0!==t(e).attr("loop")?this.loop=!0:this.loop=!1,void 0!==t(e).attr("playsinline")?this.playsInline="1":this.playsInline="0",t(e).attr("poster")?this.hasPoster=!0:this.hasPoster=!1,t(e).attr("width")&&(this.width=t(e).attr("width")),t(e).attr("height")&&(this.height=t(e).attr("height")),void 0!==t(e).data("start-time")&&t.isNumeric(t(e).data("start-time"))?this.startTime=t(e).data("start-time"):this.startTime=0,void 0!==t(e).data("debug")&&!1!==t(e).data("debug")?this.debug=!0:this.debug=!1,void 0!==t(e).data("root-path")?this.rootPath=t(e).data("root-path").replace(/\/?$/,"/"):this.rootPath=this.getRootPath(),this.defaultVolume=7,void 0!==t(e).data("volume")&&""!==t(e).data("volume")){var i=t(e).data("volume");i>=0&&i<=10&&(this.defaultVolume=i)}if(this.volume=this.defaultVolume,void 0!==t(e).data("use-chapters-button")&&!1===t(e).data("use-chapters-button")?this.useChaptersButton=!1:this.useChaptersButton=!0,void 0!==t(e).data("descriptions-audible")&&!1===t(e).data("descriptions-audible")||void 0!==t(e).data("description-audible")&&!1===t(e).data("description-audible")?this.readDescriptionsAloud=!1:this.readDescriptionsAloud=!0,"screenreader"==t(e).data("desc-reader")?this.descReader="screenreader":this.descReader="browser","off"==t(e).data("state-captions")?this.defaultStateCaptions=0:this.defaultStateCaptions=1,"on"==t(e).data("state-descriptions")?this.defaultStateDescriptions=1:this.defaultStateDescriptions=0,"off"==t(e).data("desc-pause-default")?this.defaultDescPause=0:this.defaultDescPause=1,void 0!==t(e).data("heading-level")&&""!==t(e).data("heading-level")){var s=t(e).data("heading-level");/^[0-6]$/.test(s)&&(this.playerHeadingLevel=s)}if(void 0!==t(e).data("transcript-div")&&""!==t(e).data("transcript-div")?this.transcriptDivLocation=t(e).data("transcript-div"):this.transcriptDivLocation=null,void 0!==t(e).data("include-transcript")&&!1===t(e).data("include-transcript")?this.hideTranscriptButton=!0:this.hideTranscriptButton=null,this.transcriptType=null,void 0!==t(e).data("transcript-src")?(this.transcriptSrc=t(e).data("transcript-src"),this.transcriptSrcHasRequiredParts()&&(this.transcriptType="manual")):t(e).find('track[kind="captions"], track[kind="subtitles"]').length>0&&(this.transcriptDivLocation?this.transcriptType="external":this.transcriptType="popup"),void 0!==t(e).data("lyrics-mode")&&!1!==t(e).data("lyrics-mode")?this.lyricsMode=!0:this.lyricsMode=!1,void 0!==t(e).data("transcript-title")&&""!==t(e).data("transcript-title")&&(this.transcriptTitle=t(e).data("transcript-title")),"overlay"===t(e).data("captions-position")?this.defaultCaptionsPosition="overlay":this.defaultCaptionsPosition="below",void 0!==t(e).data("chapters-div")&&""!==t(e).data("chapters-div")&&(this.chaptersDivLocation=t(e).data("chapters-div")),void 0!==t(e).data("chapters-title")&&(this.chaptersTitle=t(e).data("chapters-title")),void 0!==t(e).data("chapters-default")&&""!==t(e).data("chapters-default")?this.defaultChapter=t(e).data("chapters-default"):this.defaultChapter=null,"arrows"===t(e).data("speed-icons")?this.speedIcons="arrows":this.speedIcons="animals","chapter"===t(e).data("seekbar-scope")||"chapters"===t(e).data("seekbar-scope")?this.seekbarScope="chapter":this.seekbarScope="video",void 0!==t(e).data("youtube-id")&&""!==t(e).data("youtube-id")&&(this.youTubeId=this.getYouTubeId(t(e).data("youtube-id"))),void 0!==t(e).data("youtube-desc-id")&&""!==t(e).data("youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(t(e).data("youtube-desc-id"))),void 0!==t(e).data("youtube-nocookie")&&t(e).data("youtube-nocookie")?this.youTubeNoCookie=!0:this.youTubeNoCookie=!1,void 0!==t(e).data("vimeo-id")&&""!==t(e).data("vimeo-id")&&(this.vimeoId=this.getVimeoId(t(e).data("vimeo-id"))),void 0!==t(e).data("vimeo-desc-id")&&""!==t(e).data("vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(t(e).data("vimeo-desc-id"))),"2020"==t(e).data("skin")?this.skin="2020":this.skin="legacy",void 0!==t(e).data("width")?this.playerWidth=parseInt(t(e).data("width")):t(e)[0].getAttribute("width")?this.playerWidth=parseInt(t(e)[0].getAttribute("width")):this.playerWidth=null,this.iconType="font",this.forceIconType=!1,void 0!==t(e).data("icon-type")&&""!==t(e).data("icon-type")){var a=t(e).data("icon-type");"font"!==a&&"image"!=a&&"svg"!=a||(this.iconType=a,this.forceIconType=!0)}if(void 0!==t(e).data("allow-fullscreen")&&!1===t(e).data("allow-fullscreen")?this.allowFullscreen=!1:this.allowFullscreen=!0,this.clickedFullscreenButton=!1,this.restoringAfterFullscreen=!1,this.defaultSeekInterval=10,this.useFixedSeekInterval=!1,void 0!==t(e).data("seek-interval")&&""!==t(e).data("seek-interval")){var n=t(e).data("seek-interval");/^[1-9][0-9]$/.test(n)&&(this.seekInterval=n,this.useFixedSeekInterval=!0)}void 0!==t(e).data("show-now-playing")&&!1===t(e).data("show-now-playing")?this.showNowPlaying=!1:this.showNowPlaying=!0,void 0!==t(e).data("use-ttml")?(this.useTtml=!0,this.convert=require("xml-js")):this.useTtml=!1,void 0!==t(e).data("test-fallback")&&!1!==t(e).data("test-fallback")?"2"==t(e).data("test-fallback")?this.testFallback=2:this.testFallback=1:this.testFallback=!1,void 0!==t(e).data("lang")&&""!==t(e).data("lang")?this.lang=t(e).data("lang").toLowerCase():this.lang=null,void 0!==t(e).data("meta-type")&&""!==t(e).data("meta-type")&&(this.metaType=t(e).data("meta-type")),void 0!==t(e).data("meta-div")&&""!==t(e).data("meta-div")&&(this.metaDiv=t(e).data("meta-div")),void 0!==t(e).data("search-div")&&""!==t(e).data("search-div")&&(this.searchDiv=t(e).data("search-div"),void 0!==t(e).data("search")&&""!==t(e).data("search")&&(this.searchString=t(e).data("search")),void 0!==t(e).data("search-lang")&&""!==t(e).data("search-lang")?this.searchLang=t(e).data("search-lang"):this.searchLang=null,void 0!==t(e).data("search-ignore-caps")&&!1!==t(e).data("search-ignore-caps")?this.searchIgnoreCaps=!0:this.searchIgnoreCaps=!1,void 0!==t(e).data("search-div")&&""!==t(e).data("search-div")&&(this.searchString=t(e).data("search"),this.searchDiv=t(e).data("search-div"))),void 0!==t(e).data("hide-controls")&&!1!==t(e).data("hide-controls")?(this.hideControls=!0,this.hideControlsOriginal=!0):(this.hideControls=!1,this.hideControlsOriginal=!1),void 0!==t(e).data("steno-mode")&&!1!==t(e).data("steno-mode")?(this.stenoMode=!0,void 0!==t(e).data("steno-iframe-id")&&""!==t(e).data("steno-iframe-id")?(this.stenoFrameId=t(e).data("steno-iframe-id"),this.$stenoFrame=t("#"+this.stenoFrameId),this.$stenoFrame.length||(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoMode=!1,this.stenoFrameId=null,this.$stenoFrame=null),this.setDefaults(),this.ableIndex=AblePlayer.nextIndex,AblePlayer.nextIndex+=1,this.title=t(e).attr("title"),this.tt={};var r=this;t.when(this.getTranslationText()).then((function(){r.countProperties(r.tt)>50?r.setup():r.provideFallback()})).fail((function(){r.provideFallback()}))}else this.provideFallback()},AblePlayer.nextIndex=0,AblePlayer.prototype.setup=function(){var t=this;this.initializing=!0,this.reinitialize().then((function(){t.player?t.setupInstance().then((function(){t.setupInstancePlaylist(),t.hasPlaylist||t.recreatePlayer().then((function(){t.initializing=!1,t.playerCreated=!0}))})):t.provideFallback()}))},AblePlayer.getActiveDOMElement=function(){for(var t=document.activeElement;t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t},AblePlayer.localGetElementById=function(e,i){return e.getRootNode?t(e.getRootNode().querySelector("#"+i)):t(document.getElementById(i))},AblePlayer.youTubeIframeAPIReady=!1,AblePlayer.loadingYouTubeIframeAPI=!1}(jQuery),function(t){AblePlayer.prototype.setDefaults=function(){this.playerCreated=!1,this.playing=!1,this.paused=!0,this.clickedPlay=!1,this.fullscreen=!1,this.swappingSrc=!1,this.initializing=!1,this.cueingPlaylistItems=!1,this.buttonWithFocus=null,this.speechEnabled=null,this.setIconColor(),this.setButtonImages()},AblePlayer.prototype.getRootPath=function(){var t,e,i,s,a,n;for(t=document.getElementsByTagName("script"),e=0;e<t.length;e++)if(-1!==(i=t[e].src).substring(i.lastIndexOf("/")).indexOf("ableplayer")){s=i.split("?")[0];break}return n=(a=s.split("/").slice(0,-1).join("/")).lastIndexOf("/"),a.substring(0,n)+"/"},AblePlayer.prototype.setIconColor=function(){var e,i,s,a,n;for(e=["controller","toolbar"],i=0;i<e.length;i++)"controller"==e[i]?s=t("<div>",{class:"able-controller"}).hide():"toolbar"===e[i]&&(s=t("<div>",{class:"able-window-toolbar"}).hide()),t("body").append(s),n=.2126(a=s.css("background-color").replace(/[^\d,]/g,"").split(","))[0]+.7152a[1]+.0722a[2]<125?"white":"black","controller"===e[i]?this.iconColor=n:"toolbar"===e[i]&&(this.toolbarIconColor=n),s.remove()},AblePlayer.prototype.setButtonImages=function(){this.imgPath=this.rootPath+"button-icons/"+this.iconColor+"/",this.playButtonImg=this.imgPath+"play.png",this.pauseButtonImg=this.imgPath+"pause.png",this.restartButtonImg=this.imgPath+"restart.png",this.rewindButtonImg=this.imgPath+"rewind.png",this.forwardButtonImg=this.imgPath+"forward.png",this.previousButtonImg=this.imgPath+"previous.png",this.nextButtonImg=this.imgPath+"next.png","arrows"===this.speedIcons?(this.fasterButtonImg=this.imgPath+"slower.png",this.slowerButtonImg=this.imgPath+"faster.png"):"animals"===this.speedIcons&&(this.fasterButtonImg=this.imgPath+"rabbit.png",this.slowerButtonImg=this.imgPath+"turtle.png"),this.captionsButtonImg=this.imgPath+"captions.png",this.chaptersButtonImg=this.imgPath+"chapters.png",this.signButtonImg=this.imgPath+"sign.png",this.transcriptButtonImg=this.imgPath+"transcript.png",this.descriptionsButtonImg=this.imgPath+"descriptions.png",this.fullscreenExpandButtonImg=this.imgPath+"fullscreen-expand.png",this.fullscreenCollapseButtonImg=this.imgPath+"fullscreen-collapse.png",this.prefsButtonImg=this.imgPath+"preferences.png",this.helpButtonImg=this.imgPath+"help.png"},AblePlayer.prototype.getSvgData=function(t){var e=Array();switch(t){case"play":e[0]="0 0 16 20",e[1]="M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z";break;case"pause":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"stop":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"restart":e[0]="0 0 20 20",e[1]="M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z";break;case"rewind":e[0]="0 0 20 20",e[1]="M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z";break;case"forward":e[0]="0 0 20 20",e[1]="M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z";break;case"previous":e[0]="0 0 20 20",e[1]="M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z";break;case"next":e[0]="0 0 20 20",e[1]="M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z";break;case"slower":e[0]="0 0 20 20",e[1]="M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z";break;case"faster":e[0]="0 0 11 20",e[1]="M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"turtle":e[0]="0 0 20 20",e[1]="M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z";break;case"rabbit":e[0]="0 0 20 20",e[1]="M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z";break;case"ellipsis":e[0]="0 0 20 20",e[1]="M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z";break;case"pipe":e[0]="0 0 20 20",e[1]="M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z";break;case"captions":e[0]="0 0 20 20",e[1]="M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z";break;case"descriptions":e[0]="0 0 20 20",e[1]="M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z";break;case"sign":e[0]="0 0 20 20",e[1]="M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z";break;case"mute":case"volume-mute":e[0]="0 0 20 20",e[1]="M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z";break;case"volume-soft":e[0]="0 0 20 20",e[1]="M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-medium":e[0]="0 0 20 20",e[1]="M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-loud":e[0]="0 0 21 20",e[1]="M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"chapters":e[0]="0 0 20 20",e[1]="M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z";break;case"transcript":e[0]="0 0 20 20",e[1]="M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z";break;case"preferences":e[0]="0 0 20 20",e[1]="M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z";break;case"close":e[0]="0 0 16 20",e[1]="M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z";break;case"fullscreen-expand":e[0]="0 0 20 20",e[1]="M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z";break;case"fullscreen-collapse":e[0]="0 0 20 20",e[1]="M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"help":e[0]="0 0 11 20",e[1]="M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z"}return e},AblePlayer.prototype.reinitialize=function(){var e,i;if(i=(e=new t.Deferred).promise(),window.console||(this.debug=!1),this.startedPlaying=!1,this.autoScrollTranscript=!0,this.$media=t(this.media).first(),this.media=this.$media[0],this.$media.is("audio"))this.mediaType="audio";else{if(!this.$media.is("video"))return this.provideFallback(),e.fail(),i;this.mediaType="video"}return this.$sources=this.$media.find("source"),this.player=this.getPlayer(),this.player||this.provideFallback(),this.setIconType(),e.resolve(),i},AblePlayer.prototype.setPlayerSize=function(t,e){this.$media.attr("id");"audio"===this.mediaType?this.playerWidth&&this.$ableWrapper.css("width",this.playerWidth+"px"):t>0&&e>0&&(this.playerWidth=t,this.playerHeight=e,this.aspectRatio=e/t)},AblePlayer.prototype.setIconType=function(){var e,i,s;if(this.forceIconType)return!1;document.createElementNS&&document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect?this.iconType="svg":(window.getComputedStyle?(t("span.icon-play").length?i=t("span.icon-play"):(e=t("<span>",{class:"icon-play able-clipped"}),t("body").append(e),i=e),void 0!==(s=window.getComputedStyle(i.get(0),null).getPropertyValue("font-family"))&&-1!==s.indexOf("able")?this.iconType="font":this.iconType="image"):this.iconType="image",void 0!==e&&e.remove())},AblePlayer.prototype.setupInstance=function(){var e=new t.Deferred,i=e.promise();return this.$media.attr("id")?this.mediaId=this.$media.attr("id"):(this.mediaId="ableMediaId_"+this.ableIndex,this.$media.attr("id",this.mediaId)),e.resolve(),i},AblePlayer.prototype.setupInstancePlaylist=function(){var e=this;if(this.hasPlaylist=!1,t(".able-playlist").each((function(){if(t(this).data("player")===e.mediaId){e.hasPlaylist=!0,e.$playlist=t(this).find("li"),t(this).find("li[data-youtube-id]").each((function(){var i=t(this).attr("data-youtube-id"),s=e.getYouTubePosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)})),t(this).find("li[data-vimeo-id]").each((function(){var i=t(this).attr("data-youtube-id"),s=e.getVimeoPosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)})),t(this).find("li span").attr("aria-hidden","true"),e.playlistIndex=0;var i=t(this).data("embedded");e.playlistEmbed=void 0!==i&&!1!==i}})),this.hasPlaylist&&this.loop&&this.media.removeAttribute("loop"),this.hasPlaylist&&this.playlistEmbed){var i=this.$playlist.parent();this.$playlistDom=i.clone(),i.remove()}this.hasPlaylist&&0===this.$sources.length&&(this.cuePlaylistItem(0),this.$sources=this.$media.find("source"))},AblePlayer.prototype.recreatePlayer=function(){var e,i,s,a,n;if(this.player)return i=(e=new t.Deferred).promise(),s=this,this.playerDeleted=!1,this.recreatingPlayer=!0,this.playerCreated||(this.loadCurrentPreferences(),this.injectPlayerCode(),this.resizePlayer(this.media.videoWidth,this.media.videoHeight)),this.getSampleDescriptionText(),this.initSignLanguage(),this.initPlayer().then((function(){s.getTracks().then((function(){s.initDescription().then((function(){s.setupTracks().then((function(){s.hasClosedDesc&&(!s.$descDiv||s.$descDiv&&!t.contains(s.$ableDiv[0],s.$descDiv[0]))&&s.injectTextDescriptionArea(),s.initSpeech("init"),s.setupTranscript().then((function(){s.initStenoFrame().then((function(){s.stenoMode&&s.$stenoFrame&&(s.stenoFrameContents=s.$stenoFrame.contents()),s.getMediaTimes().then((function(t){for(s.duration=t.duration,s.elapsed=t.elapsed,s.setFullscreen(!1),void 0===s.volume&&(s.volume=s.defaultVolume),s.volume&&s.setVolume(s.volume),s.transcriptType&&(s.addTranscriptAreaEvents(),s.updateTranscript()),s.captions.length&&s.initDefaultCaption(),s.setMediaAttributes(),s.addControls(),s.addEventListeners(),a=s.getPreferencesGroups(),n=0;n<a.length;n++)s.injectPrefsForm(a[n]);s.setupPopups(),s.updateCaption(),s.injectVTS(),s.chaptersDivLocation&&s.populateChaptersDiv(),s.showSearchResults(),"html5"===s.player&&(s.loadingMedia||(s.$media[0].load(),s.loadingMedia=!0)),setTimeout((function(){s.refreshControls("init"),e.resolve()}),100)}))}))}))}))}))}))}),(function(){s.provideFallback()})),i;console.log("Can't create player; no appropriate player type detected.")},AblePlayer.prototype.initPlayer=function(){var e,i=this;"html5"===this.player?e=this.initHtml5Player():"youtube"===this.player?e=this.initYouTubePlayer():"vimeo"===this.player&&(e=this.initVimeoPlayer());var s=new t.Deferred,a=s.promise();return e.done((function(){i.useFixedSeekInterval?(i.seekInterval||(i.seekInterval=i.defaultSeekInterval),i.seekIntervalCalculated=!0):i.setSeekInterval(),s.resolve()})).fail((function(){s.reject()})),a},AblePlayer.prototype.initStenoFrame=function(){var e,i;return i=(e=new t.Deferred).promise(),this.stenoMode&&this.$stenoFrame?(this.$stenoFrame[0].contentWindow,"complete"==document.readyState?e.resolve():this.$stenoFrame.on("load",(function(){e.resolve()}))):e.resolve(),i},AblePlayer.prototype.setSeekInterval=function(){var t;this.seekInterval=this.defaultSeekInterval,void 0===(t=this.useChapterTimes?this.chapterDuration:this.duration)||t<1?this.seekIntervalCalculated=!1:(this.seekInterval=t<=20?5:t<=30?6:t<=40?8:t<=100?10:t/10,this.seekIntervalCalculated=!0)},AblePlayer.prototype.initDefaultCaption=function(){var t,e;if((t=this.captions).length>0){for(e=0;e<t.length;e++)!0===t[e].def&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);if(void 0===this.captionLang)for(e=0;e<t.length;e++)t[e].language===this.lang&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);void 0===this.captionLang&&(this.captionLang=t[0].language,this.selectedCaptions=t[0]),void 0!==this.captionLang&&(this.$transcriptLanguageSelect&&this.$transcriptLanguageSelect.find("option[lang="+this.captionLang+"]").prop("selected",!0),this.syncTrackLanguages("init",this.captionLang)),"vimeo"===this.player&&(this.usingVimeoCaptions&&1==this.prefCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then((function(t){})).catch((function(t){t.name})):this.vimeoPlayer.disableTextTrack().then((function(){})).catch((function(t){})))}},AblePlayer.prototype.initHtml5Player=function(){var e=new t.Deferred,i=e.promise();return e.resolve(),i},AblePlayer.prototype.setMediaAttributes=function(){this.$media.attr("tabindex",-1);var t=this.$media.get(0).textTracks;if(t)for(var e=0;e<t.length;)t[e].mode="disabled",e+=1},AblePlayer.prototype.getPlayer=function(){return this.testFallback?null:this.youTubeId?"video"!==this.mediaType?null:"youtube":this.vimeoId?"video"!==this.mediaType?null:"vimeo":this.media.canPlayType?"html5":null}}(jQuery),function(t){AblePlayer.prototype.setCookie=function(t){Cookies.set("Able-Player",JSON.stringify(t),{expires:90,sameSite:"strict"})},AblePlayer.prototype.getCookie=function(){var t,e={preferences:{},sign:{},transcript:{},voices:[]};try{t=JSON.parse(Cookies.get("Able-Player"))}catch(i){this.setCookie(e),t=e}return t||e},AblePlayer.prototype.updateCookie=function(t){var e,i,s,a,n,r,o,l;if(e=this.getCookie(),"transcript"===t||"sign"===t)"transcript"===t?(s=(i=this.$transcriptArea).position(),void 0===e.transcript&&(e.transcript={}),e.transcript.position=i.css("position"),e.transcript.zindex=i.css("z-index"),e.transcript.top=s.top,e.transcript.left=s.left,e.transcript.width=i.width(),e.transcript.height=i.height()):"sign"===t&&(s=(i=this.$signWindow).position(),void 0===e.sign&&(e.sign={}),e.sign.position=i.css("position"),e.sign.zindex=i.css("z-index"),e.sign.top=s.top,e.sign.left=s.left,e.sign.width=i.width(),e.sign.height=i.height());else if("voice"===t){void 0===e.voices&&(e.voices=[]),o=!1;for(var h=0;h<e.voices.length;h++)e.voices[h].lang===this.prefDescVoiceLang&&(o=!0,e.voices[h].name=this.prefDescVoice);o||(l={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(l))}else for(a=this.getAvailablePreferences(),n=0;n<a.length;n++)(r=a[n].name)==t&&(e.preferences[r]=this[r]);this.setCookie(e)},AblePlayer.prototype.getPreferencesGroups=function(){return this.usingYouTubeCaptions?["captions","descriptions","keyboard"]:this.usingVimeoCaptions?["descriptions","keyboard"]:["captions","descriptions","keyboard","transcript"]},AblePlayer.prototype.getAvailablePreferences=function(){var t=[];return t.push({name:"prefAltKey",label:this.tt.prefAltKey,group:"keyboard",default:1}),t.push({name:"prefCtrlKey",label:this.tt.prefCtrlKey,group:"keyboard",default:1}),t.push({name:"prefShiftKey",label:this.tt.prefShiftKey,group:"keyboard",default:0}),t.push({name:"prefTranscript",label:null,group:"transcript",default:0}),t.push({name:"prefHighlight",label:this.tt.prefHighlight,group:"transcript",default:1}),t.push({name:"prefAutoScrollTranscript",label:null,group:"transcript",default:1}),t.push({name:"prefTabbable",label:this.tt.prefTabbable,group:"transcript",default:0}),t.push({name:"prefCaptions",label:null,group:"captions",default:this.defaultStateCaptions}),this.usingYouTubeCaptions||("video"===this.mediaType&&t.push({name:"prefCaptionsPosition",label:this.tt.prefCaptionsPosition,group:"captions",default:this.defaultCaptionsPosition}),t.push({name:"prefCaptionsFont",label:this.tt.prefCaptionsFont,group:"captions",default:"sans-serif"})),t.push({name:"prefCaptionsSize",label:this.tt.prefCaptionsSize,group:"captions",default:"100%"}),this.usingYouTubeCaptions||(t.push({name:"prefCaptionsColor",label:this.tt.prefCaptionsColor,group:"captions",default:"white"}),t.push({name:"prefCaptionsBGColor",label:this.tt.prefCaptionsBGColor,group:"captions",default:"black"}),t.push({name:"prefCaptionsOpacity",label:this.tt.prefCaptionsOpacity,group:"captions",default:"100%"})),"video"===this.mediaType&&(t.push({name:"prefDesc",label:null,group:"descriptions",default:this.defaultStateDescriptions}),t.push({name:"prefDescMethod",label:null,group:"descriptions",default:"video"}),t.push({name:"prefDescVoice",label:this.tt.prefDescVoice,group:"descriptions",default:null}),t.push({name:"prefDescPitch",label:this.tt.prefDescPitch,group:"descriptions",default:1}),t.push({name:"prefDescRate",label:this.tt.prefDescRate,group:"descriptions",default:1}),t.push({name:"prefDescVolume",label:this.tt.volume,group:"descriptions",default:1}),t.push({name:"prefDescPause",label:this.tt.prefDescPause,group:"descriptions",default:this.defaultDescPause}),t.push({name:"prefDescVisible",label:this.tt.prefDescVisible,group:"descriptions",default:0})),t.push({name:"prefSign",label:null,group:null,default:0}),t},AblePlayer.prototype.loadCurrentPreferences=function(){for(var t=this.getAvailablePreferences(),e=this.getCookie(),i=0;i<t.length;i++){var s=t[i].name,a=t[i].default;void 0!==e.preferences[s]?this[s]=e.preferences[s]:(e.preferences[s]=a,this[s]=a)}void 0!==e.voices&&(this.prefVoices=e.voices),this.setCookie(e)},AblePlayer.prototype.injectPrefsForm=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,m,g,v,y,b,T,P,k,C,w,D,A,x,$,S,N,I,M,B,L,E,F,O,R,V,z,H;i=this,s=this.getAvailablePreferences();var W="able-prefs-form-"+e;if((a=t("<div>",{class:"able-prefs-form "})).addClass(W),"captions"==e)n=this.tt.prefTitleCaptions;else if("descriptions"==e){n=this.tt.prefTitleDescriptions;var _=t("<p>",{text:this.tt.prefIntroDescription1}),q=t("<ul>"),j=t("<li>",{text:this.tt.prefDescFormatOption1}),K=t("<li>",{text:this.tt.prefDescFormatOption2});q.append(j,K),this.hasOpenDesc&&this.hasClosedDesc?(I=this.tt.prefIntroDescription2+" ",I+="<strong>"+this.tt.prefDescFormatOption1b+"</strong>",I+=" <em>"+this.tt.and+"</em> <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):this.hasOpenDesc?(I=this.tt.prefIntroDescription2,I+=" <strong>"+this.tt.prefDescFormatOption1b+"</strong>."):this.hasClosedDesc?(I=this.tt.prefIntroDescription2,I+=" <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):I=this.tt.prefIntroDescriptionNone,o=t("<p>",{html:I}),l=this.tt.prefIntroDescription3,(this.hasOpenDesc||this.hasClosedDesc)&&(l+=" "+this.tt.prefIntroDescription4),h=t("<p>",{text:l}),a.append(_,q,o,h)}else"keyboard"==e?(n=this.tt.prefTitleKeyboard,r=this.tt.prefIntroKeyboard1,r+=" "+this.tt.prefIntroKeyboard2,r+=" "+this.tt.prefIntroKeyboard3,_=t("<p>",{text:r}),a.append(_)):"transcript"==e&&(n=this.tt.prefTitleTranscript);for(u=t("<div>").attr("role","group"),d="able-prefs-"+e,g=(f=this.mediaId+"-prefs-"+e)+"-legend",u.addClass(d).attr("id",f),"keyboard"===e?((m=t("<h2>"+this.tt.prefHeadingKeyboard1+"</h2>")).attr("id",g),u.attr("aria-labelledby",g),u.append(m)):"descriptions"===e&&((m=t("<h2>"+this.tt.prefHeadingTextDescription+"</h2>")).attr("id",g),u.attr("aria-labelledby",g),u.append(m)),p=0;p<s.length;p++)if(s[p].group==e&&s[p].label){if(b="able-"+(v=s[p].name),T=this.mediaId+"_"+v,y=t("<div>").addClass(b),"captions"===e){for(P=t('<label for="'+T+'"> '+s[p].label+"</label>"),k=t("<select>",{name:v,id:T}),"prefCaptions"!==v&&"prefCaptionsStyle"!==v&&k.change((function(){$=t(this).attr("name"),i.stylizeCaptions(i.$sampleCapsDiv,$)})),C=this.getCaptionsOptions(v),c=0;c<C.length;c++)"prefCaptionsPosition"===v?"overlay"===(D=C[c])?x=this.tt.captionsPositionOverlay:"below"===D&&(D=C[c],x=this.tt.captionsPositionBelow):"prefCaptionsFont"===v||"prefCaptionsColor"===v||"prefCaptionsBGColor"===v?(D=C[c][0],x=C[c][1]):"prefCaptionsOpacity"===v?(D=C[c],x=C[c],"0%"===D?x+=" ("+this.tt.transparent+")":"100%"===D&&(x+=" ("+this.tt.solid+")")):(D=C[c],x=C[c]),w=t("<option>",{value:D,text:x}),this[v]===D&&w.prop("selected",!0),k.append(w);y.append(P,k)}else if("descriptions"===e){if(P=t('<label for="'+T+'"> '+s[p].label+"</label>"),"prefDescPause"===v||"prefDescVisible"===v)y.addClass("able-prefs-checkbox"),k=t("<input>",{type:"checkbox",name:v,id:T,value:"true"}),1===this[v]&&k.prop("checked",!0),y.append(k,P);else if(this.synth){if(y.addClass("able-prefs-select"),k=t("<select>",{name:v,id:T}),"prefDescVoice"===v&&this.descVoices){for(M=this.getPrefDescVoice(),c=0;c<this.descVoices.length;c++)D=this.descVoices[c].name,A=this.descVoices[c].lang.substring(0,2).toLowerCase(),x=D+" ("+this.descVoices[c].lang+")",w=t("<option>",{value:D,"data-lang":A,text:x}),M===D&&w.prop("selected",!0),k.append(w);this.$voiceSelectField=k}else if("prefDescPitch"==v?C=[0,.5,1,1.5,2]:"prefDescRate"==v?C=[.7,.8,.9,1,1.1,1.2,1.5,2,2.5,3]:"prefDescVolume"==v&&(C=[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]),void 0!==C)for(c=0;c<C.length;c++)D=C[c],x=this.makePrefsValueReadable(v,D),w=t("<option>",{value:D,text:x}),this[v]==D&&w.prop("selected",!0),k.append(w),y.append(P,k);k.on("change",(function(){i.announceDescriptionText("sample",i.currentSampleText)})),y.append(P,k)}}else P=t('<label for="'+T+'"> '+s[p].label+"</label>"),k=t("<input>",{type:"checkbox",name:v,id:T,value:"true"}),1===this[v]&&k.prop("checked",!0),"keyboard"===e&&k.on("change",(function(){"prefAltKey"===($=t(this).attr("name"))?(S=".able-modkey-alt",N=i.tt.prefAltKey+" + "):"prefCtrlKey"===$?(S=".able-modkey-ctrl",N=i.tt.prefCtrlKey+" + "):"prefShiftKey"===$&&(S=".able-modkey-shift",N=i.tt.prefShiftKey+" + "),t(this).is(":checked")?t(S).text(N):t(S).text("")})),y.append(k,P);u.append(y)}if(a.append(u),"captions"===e)this.usingYouTubeCaptions||(this.$sampleCapsDiv=t("<div>",{class:"able-captions-sample"}).text(this.tt.sampleCaptionText),a.append(this.$sampleCapsDiv),this.stylizeCaptions(this.$sampleCapsDiv));else if("descriptions"===e)this.synth&&(this.$sampleDescDiv=t("<div>",{class:"able-desc-sample"}).text(this.tt.sampleDescriptionText),a.append(this.$sampleDescDiv),this.currentSampleText=this.tt.sampleDescriptionText);else if("keyboard"===e){for(B=t("<h2>",{text:this.tt.prefHeadingKeyboard2}),L=t("<ul>"),E=[],F=[],p=0;p<this.controls.length;p++)"play"===this.controls[p]?(E.push(this.tt.play+"/"+this.tt.pause),F.push("p</span> <em>"+this.tt.or+'</em> <span class="able-help-modifiers"> '+this.tt.spacebar)):"restart"===this.controls[p]?(E.push(this.tt.restart),F.push("s")):"previous"===this.controls[p]?(E.push(this.tt.prevTrack),F.push("b")):"next"===this.controls[p]?(E.push(this.tt.nextTrack),F.push("n")):"rewind"===this.controls[p]?(E.push(this.tt.rewind),F.push("r")):"forward"===this.controls[p]?(E.push(this.tt.forward),F.push("f")):"volume"===this.controls[p]?(E.push(this.tt.volume),F.push("v</span> <em>"+this.tt.or+'</em> <span class="able-modkey">1-9'),E.push(this.tt.mute+"/"+this.tt.unmute),F.push("m")):"captions"===this.controls[p]?(this.captions.length>1?E.push(this.tt.captions):this.captionsOn?E.push(this.tt.hideCaptions):E.push(this.tt.showCaptions),F.push("c")):"descriptions"===this.controls[p]?(this.descOn?E.push(this.tt.turnOffDescriptions):E.push(this.tt.turnOnDescriptions),F.push("d")):"prefs"===this.controls[p]?(E.push(this.tt.preferences),F.push("e")):"help"===this.controls[p]&&(E.push(this.tt.help),F.push("h"));for(p=0;p<F.length;p++)O='<span class="able-modkey-alt">',1===this.prefAltKey&&(O+=this.tt.prefAltKey+" + "),O+="</span>",O+='<span class="able-modkey-ctrl">',1===this.prefCtrlKey&&(O+=this.tt.prefCtrlKey+" + "),O+="</span>",O+='<span class="able-modkey-shift">',1===this.prefShiftKey&&(O+=this.tt.prefShiftKey+" + "),O+="</span>",O+='<span class="able-modkey">'+F[p]+"</span>",O+=" = "+E[p],R=t("<li>",{html:O}),L.append(R);O='<span class="able-modkey">'+this.tt.escapeKey+"</span>",O+=" = "+this.tt.escapeKeyFunction,R=t("<li>",{html:O}),L.append(R),a.append(B,L)}t("body").append(a),V=new AccessibleDialog(a,this.$prefsButton,"dialog",!0,n,_,i.tt.closeButtonLabel,"32em"),a.append("<hr>"),z=t('<button class="modal-button">'+this.tt.save+"</button>"),H=t('<button class="modal-button">'+this.tt.cancel+"</button>"),z.click((function(){V.hide(),i.savePrefsFromForm()})),H.click((function(){V.hide(),i.resetPrefsForm()})),a.append(z),a.append(H),"captions"!==e&&"transcript"!==e||u.attr("aria-labelledby",V.titleH1.attr("id")),"captions"===e?this.captionPrefsDialog=V:"descriptions"===e?this.descPrefsDialog=V:"keyboard"===e?this.keyboardPrefsDialog=V:"transcript"===e&&(this.transcriptPrefsDialog=V),t("div.able-prefs-form button.modalCloseButton").click((function(){i.resetPrefsForm()})),t("div.able-prefs-form").keydown((function(t){27===t.which&&i.resetPrefsForm()}))},AblePlayer.prototype.getPrefDescVoice=function(){var t,e,i;if(t=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,(e=this.getCookie()).voices)for(i=0;i<e.voices.length;i++)if(e.voices[i].lang===t)return e.voices[i].name;return null},AblePlayer.prototype.rebuildDescPrefsForm=function(){var e,i,s,a;for(this.$voiceSelectField=t("#"+this.mediaId+"_prefDescVoice"),this.$voiceSelectField.empty(),e=0;e<this.descVoices.length;e++)s=(i=this.descVoices[e].name)+" ("+this.descVoices[e].lang+")",a=t("<option>",{value:i,"data-lang":this.descVoices[e].lang.substring(0,2).toLowerCase(),text:s}),this.prefDescVoice==i&&a.prop("selected",!0),this.$voiceSelectField.append(a)},AblePlayer.prototype.makePrefsValueReadable=function(t,e){if("prefDescPitch"===t){if(0===e)return this.tt.prefDescPitch1;if(.5===e)return this.tt.prefDescPitch2;if(1===e)return this.tt.prefDescPitch3;if(1.5===e)return this.tt.prefDescPitch4;if(2===e)return this.tt.prefDescPitch5}else if("prefDescRate"===t){if(.7===e)return 1;if(.8===e)return 2;if(.9===e)return 3;if(1===e)return 4;if(1.1===e)return 5;if(1.2===e)return 6;if(1.5===e)return 7;if(2===e)return 8;if(2.5===e)return 9;if(3===e)return 10}else if("prefDescVolume"===t)return 10e;return e},AblePlayer.prototype.resetPrefsForm=function(){var e,i,s,a;for(e=this.getCookie(),i=this.getAvailablePreferences(),s=0;s<i.length;s++)a=i[s].name,this.mediaId+"_"+a,-1!==a.indexOf("Captions")&&"prefCaptions"!==a?t('select[name="'+a+'"]').val(e.preferences[a]):1===this[a]?t('input[name="'+a+'"]').prop("checked",!0):t('input[name="'+a+'"]').prop("checked",!1);this.stylizeCaptions(this.$sampleCapsDiv)},AblePlayer.prototype.savePrefsFromForm=function(){var e,i,s,a,n,r,o,l,h,p,c,u;o=0,h=0,p=!1,e=this.getCookie(),i=this.getAvailablePreferences();for(var d=0;d<i.length;d++)if(i[d].label)if(s=i[d].name,a=this.mediaId+"_"+s,"prefDescVoice"===s){void 0===e.voices&&(e.voices=[]),n=this.mediaId+"_prefDescVoice",this.prefDescVoice=t("select#"+n).find(":selected").val(),this.prefDescVoiceLang=t("select#"+n).find(":selected").attr("data-lang"),l=!1;for(var f=0;f<e.voices.length;f++)e.voices[f].lang===this.prefDescVoiceLang&&(l=!0,e.voices[f].name=this.prefDescVoice);l||(r={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(r)),o++}else"prefDescMethod"==s?(this.prefDescMethod="video",this.prefDescMethod!==e.preferences.prefDescMethod&&(e.preferences.prefDescMethod=this.prefDescMethod,o++)):-1!==s.indexOf("Captions")&&"prefCaptions"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++,h++),"prefCaptionsSize"===s&&(p=!0,c=u)):-1!==s.indexOf("Desc")&&"prefDescPause"!==s&&"prefDescVisible"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++)):t('input[id="'+a+'"]').is(":checked")?(e.preferences[s]=1,1===this[s]||(this[s]=1,o++)):(e.preferences[s]=0,1===this[s]&&(this[s]=0,o++));if(o>0?(this.setCookie(e),this.showAlert(this.tt.prefSuccess)):this.showAlert(this.tt.prefNoChange),"youtube"===this.player&&void 0!==this.usingYouTubeCaptions&&this.usingYouTubeCaptions&&p&&this.youTubePlayer.setOption("captions","fontSize",this.translatePrefs("size",c,"youtube")),AblePlayerInstances.length>1)for(d=0;d<AblePlayerInstances.length;d++)AblePlayerInstances[d].updatePrefs(),AblePlayerInstances[d].geteferences(),AblePlayerInstances[d].resetPrefsForm(),h>0&&(AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$captionsDiv),void 0!==AblePlayerInstances[d].$descDiv&&AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$descDiv));else this.updatePrefs(),h>0&&(this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv))},AblePlayer.prototype.updatePrefs=function(){this.$transcriptDiv&&(1===this.prefTabbable?this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"):this.$transcriptDiv.find("span.able-transcript-seekpoint").removeAttr("tabindex"),0===this.prefHighlight&&this.$transcriptDiv.find("span").removeClass("able-highlight")),this.updateCaption(),this.initDescription()},AblePlayer.prototype.usingModifierKeys=function(t){return!(1===this.prefAltKey&&!t.altKey)&&(!(1===this.prefCtrlKey&&!t.ctrlKey)&&!(1===this.prefShiftKey&&!t.shiftKey))}}(jQuery),function(t){function actList(t,e){for(var i=[],s=0;s<e.length;s++)i.push(act(t,e[s]));return i}function act(t,e){var i=e(t);if(null!==t.error)throw t.error;return i}function updatePosition(t,e){for(var i=0;i<e.length;i++)"\n"===e[i]?(t.column=1,t.line+=1):t.column+=1}function cut(t,e){var i=t.text.substring(0,e);return updatePosition(t,i),t.text=t.text.substring(e),i}function cutLine(t,e){var i,s=t.text.indexOf("\n");return-1===s?(updatePosition(t,i=t.text),t.text=""):(i=t.text.substring(0,s),updatePosition(t,i+"\n"),t.text=t.text.substring(s+1)),i}function peekLine(t){var e=t.text.indexOf("\n");return-1===e?t.text:t.text.substring(0,e)}function parseFileBody(t){actList(t,[eatOptionalBOM,eatSignature]);var e=t.text[0];" "===e||"\t"===e||"\n"===e?actList(t,[eatUntilEOLInclusive,parseMetadataHeaders,eatAtLeast1EmptyLines,parseCuesAndComments]):t.error="WEBVTT signature not followed by whitespace."}function parseMetadataHeaders(t){for(;;){var e=peekLine(t);if(-1!==e.indexOf("--\x3e"))return;if(0===e.length)return;var i=act(t,getMetadataKeyValue);t.metadata[i[0]]=i[1],act(t,eatUntilEOLInclusive)}}function nextSpaceOrNewline(t){var e=[],i=t.indexOf(" ");i>=0&&e.push(i);var s=t.indexOf("\t");s>=0&&e.push(s);var a=t.indexOf("\n");return a>=0&&e.push(a),Math.min.apply(null,e)}function getMetadataKeyValue(t){var e=t.text.indexOf("\n"),i=cut(t,e),s=i.indexOf(":");return-1===s?void(t.error="Missing colon."):[i.substring(0,s),i.substring(s+1)]}function getSettingsKeyValue(t){var e=cut(t,nextSpaceOrNewline(t.text)),i=e.indexOf(":");return-1===i?void(t.error="Missing colon."):[e.substring(0,i),e.substring(i+1)]}function parseCuesAndComments(e){for(;;){var i=peekLine(e);if(0!==i.indexOf("NOTE")||4!==i.length&&" "!==i[4]&&"\t"!==i[4])if(0===t.trim(i).length&&e.text.length>0)act(e,eatEmptyLines);else{if(!(t.trim(i).length>0))return;act(e,parseCue)}else actList(e,[eatComment,eatEmptyLines])}}function parseCue(t){var e,i=peekLine(t);if(-1===i.indexOf("--\x3e")&&(e=cutLine(t),-1===(i=peekLine(t)).indexOf("--\x3e")))return"Invalid WebVTT file: "+t.src+"\n","Line: "+t.line+", ","Column: "+t.column+"\n",void(console.warn||console.log);var s=actList(t,[getTiming,eatAtLeast1SpacesOrTabs,eatArrow,eatAtLeast1SpacesOrTabs,getTiming]),a=s[0],n=s[4];if(a>=n)t.error="Start time is not sooner than end time.";else{act(t,eatSpacesOrTabs);var r=act(t,getCueSettings);cut(t,1);var o=act(t,getCuePayload);void 0===e&&(e=t.cues.length+1),t.cues.push({id:e,start:a,end:n,settings:r,components:o})}}function getCueSettings(t){for(var e={};t.text.length>0&&"\n"!==t.text[0];){var i=act(t,getSettingsKeyValue);e[i[0]]=i[1],act(t,eatSpacesOrTabs)}return e}function getCuePayload(e){for(var i={type:"internal",tagName:"",value:"",classes:[],annotation:"",parent:null,children:[],language:""},s=i,a=[];e.text.length>0;){var n=peekLine(e);if(-1!==n.indexOf("--\x3e")||/^\s+$/.test(n))break;if(e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]){cut(e,2);break}var r=getCueToken(e);if("string"===r.type)s.children.push(r);else if("startTag"===r.type)r.type=r.tagName,r.parent=s,-1!==t.inArray(r.tagName,["i","b","u","ruby"])||"rt"===r.tagName&&"ruby"===s.tagName?(a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"c"===r.tagName||"v"===r.tagName?(r.value=r.annotation,a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"lang"===r.tagName&&(a.push(r.annotation),a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r);else if("endTag"===r.type)r.tagName===s.type&&-1!==t.inArray(r.tagName,["c","i","b","u","ruby","rt","v"])?s=s.parent:"lang"===r.tagName&&"lang"===s.type?(s=s.parent,a.pop()):"ruby"===r.tagName&&"rt"===s.type&&(s=s.parent.parent);else if("timestampTag"===r.type){var o={text:r.value,error:null,metadata:{},cues:[],line:1,column:1};try{var l=act(o,getTiming);0===o.text.length&&(r.value=l,s.push(r))}catch(t){}}}return i}function getCueToken(e){for(var i="data",s=[],a="",n={type:"",tagName:"",value:"",classes:[],annotation:"",children:[]};;){var r;if(r=e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]?"":e.text.length>0?e.text[0]:"","data"===i)if("&"===r)a="&",i="escape";else if("<"===r){if(0!==s.length)return n.type="string",n.value=s.join(""),n;i="tag"}else{if(""===r)return{type:"string",value:s.join("")};s.push(r)}else if("escape"===i)if("&"===r)s.push(a),a="&";else if(r.match(/[0-9a-z]/))a+=r;else if(";"===r)"&"===a?s.push("&"):"<"===a?s.push("<"):">"===a?s.push(">"):"&lrm"===a?s.push("‎"):"&rlm"===a?s.push("‏"):" "===a?s.push(" "):(s.push(a),s.push(";")),i="data";else{if("<"===r||""===r)return s.push(a),n.type="string",n.value=s.join(""),n;if("\t"===r||"\n"===r||"\f"===r||" "===r)return s.push(a),n.type="string",n.value=s.join(""),n;s.push(a),i="data"}else if("tag"===i)if("\t"===r||"\n"===r||"\f"===r||" "===r)i="startTagAnnotation";else if("."===r)i="startTagClass";else if("/"===r)i="endTag";else if(r.match("[0-9]"))i="timestampTag",s.push(r);else{if(">"===r){cut(e,1);break}if(""===r)return n.tagName="",n.type="startTag",n;s.push(r),i="startTag"}else if("startTag"===i)if("\t"===r||"\f"===r||" "===r)i="startTagAnnotation";else if("\n"===r)a=r,i="startTagAnnotation";else if("."===r)i="startTagClass";else{if(">"===r)return cut(e,1),n.tagName=s.join(""),n.type="startTag",n;if(""===r)return n.tagName=s.join(""),n.type="startTag",n;s.push(r)}else if("startTagClass"===i)if("\t"===r||"\f"===r||" "===r)n.classes.push(a),a="",i="startTagAnnotation";else if("\n"===r)n.classes.push(a),a=r,i="startTagAnnotation";else if("."===r)n.classes.push(a),a="";else{if(">"===r)return cut(e,1),n.classes.push(a),n.type="startTag",n.tagName=s.join(""),n;if(""===r)return n.classes.push(a),n.type="startTag",n.tagName=s.join(""),n;a+="c"}else if("startTagAnnotation"===i){if(">"===r)return cut(e,1),a=t.trim(a).replace(/ +/," "),n.type="startTag",n.tagName=s.join(""),n.annotation=a,n;if(""===r)return a=t.trim(a).replace(/ +/," "),n.type="startTag",n.tagName=s.join(""),n.annotation=a,n;a+=r}else if("endTag"===i){if(">"===r)return cut(e,1),n.type="endTag",n.tagName=s.join(""),n;if(""===r)return n.type="endTag",n.tagName=s.join(""),n;s.push(r)}else{if("timestampTag"!==i)throw"Unknown tokenState "+i;if(">"===r)return cut(e,1),n.type="timestampTag",n.name=s.join(""),n;if(""===r)return n.type="timestampTag",n.name=s.join(""),n;s.push(r)}cut(e,1)}}function eatComment(e){if(-1===cutLine(e).indexOf("--\x3e"))for(;;){var i=peekLine(e);if(0===t.trim(i).length)return;if(-1!==i.indexOf("--\x3e"))return void(e.error="Invalid syntax: --\x3e in comment.");cutLine(e)}else e.error="Invalid syntax: --\x3e in NOTE line."}function eatOptionalBOM(t){"\ufeff"===t.text[0]&&cut(t,1)}function eatSignature(t){"WEBVTT"===t.text.substring(0,6)?cut(t,6):t.error="Invalid signature."}function eatArrow(t){t.text.length<3||"--\x3e"!==t.text.substring(0,3)?t.error="Missing --\x3e":cut(t,3)}function eatSpacesOrTabs(t){for(;"\t"===t.text[0]||" "===t.text[0];)cut(t,1)}function eatAtLeast1SpacesOrTabs(t){for(var e=0;"\t"===t.text[0]||" "===t.text[0];)cut(t,1),e+=1;0===e&&(t.error="Missing space.")}function eatUntilEOLInclusive(t){var e=t.text.indexOf("\n");-1===e?t.error="Missing EOL.":cut(t,e+1)}function eatEmptyLines(e){for(;e.text.length>0;){var i=peekLine(e);if(0!==t.trim(i).length)break;cutLine(e)}}function eatAtLeast1EmptyLines(e){for(var i=0;e.text.length>0;){var s=peekLine(e);if(0!==t.trim(s).length)break;cutLine(e),i+=1}0===i&&(e.error="Missing empty line.")}function getTiming(t){var e=nextSpaceOrNewline(t.text);if(-1!==e){var i=cut(t,e),s=/((\d\d):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(i);if(s){var a=0,n=s[2],r=s[4];if(r){if(parseInt(r,10)>59)return void(t.error="Invalid minute range");n&&(a+=3600parseInt(n,10)),a+=60parseInt(r,10);var o=s[5];if(parseInt(o,10)>59)return void(t.error="Invalid second range");a+=parseInt(o,10),a+=parseInt(s[6],10)/1e3}else a+=parseInt(s[7],10),a+=parseInt(s[8],10)/1e3;return a}t.error="Unable to parse timestamp"}else t.error("Missing timing.")}AblePlayer.prototype.parseWebVTT=function(t,e){var i={src:t,text:e=e.replace(/(\r\n|\n|\r)/g,"\n"),error:null,metadata:{},cues:[],line:1,column:1};try{act(i,parseFileBody)}catch(t){console.warn||console.log}return i}}(jQuery),function(t){AblePlayer.prototype.injectPlayerCode=function(){var e;this.$mediaContainer=this.$media.wrap('<div class="able-media-container"></div>').parent(),this.$ableDiv=this.$mediaContainer.wrap('<div class="able"></div>').parent(),this.$ableWrapper=this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(),this.$ableWrapper.addClass("able-skin-"+this.skin),this.$ableWrapper.css({width:this.playerWidth+"px"}),"video"===this.mediaType&&("image"==this.iconType||"youtube"===this.player&&!this.hasPoster||this.injectBigPlayButton()),e=t("<div>"),"video"===this.mediaType?e.addClass("able-vidcap-container"):"audio"===this.mediaType&&(e.addClass("able-audcap-container"),e.addClass("captions-off")),this.injectPlayerControlArea(),this.$captionsContainer=this.$mediaContainer.wrap(e).parent(),this.injectAlert(),this.injectPlaylist(),this.injectOffscreenHeading()},AblePlayer.prototype.injectOffscreenHeading=function(){var e;"0"==this.playerHeadingLevel||(void 0===this.playerHeadingLevel&&(this.playerHeadingLevel=this.getNextHeadingLevel(this.$ableDiv)),e="h"+this.playerHeadingLevel.toString(),this.$headingDiv=t("<"+e+">"),this.$ableDiv.prepend(this.$headingDiv),this.$headingDiv.addClass("able-offscreen"),this.$headingDiv.text(this.tt.playerHeading))},AblePlayer.prototype.injectBigPlayButton=function(){var e,i,s,a;e=this,this.$bigPlayButton=t("<button>",{class:"able-big-play-button","aria-hidden":!1,"aria-label":this.tt.play,tabindex:0}),"svg"==this.iconType?(i=this.getSvgData("play"),s=t("<svg>",{focusable:"false","aria-hidden":"true",viewBox:i[0]}),a=t("<path>",{d:i[1]}),s.append(a),this.$bigPlayButton.html(s),this.$bigPlayButton.html(this.$bigPlayButton.html())):(this.$bigPlayIcon=t("<span>",{class:"icon-play"}),this.$bigPlayButton.append(this.$bigPlayIcon)),this.$bigPlayButton.click((function(t){t.preventDefault(),e.handlePlay()})),this.$mediaContainer.append(this.$bigPlayButton)},AblePlayer.prototype.injectPlayerControlArea=function(){this.$playerDiv=t("<div>",{class:"able-player",role:"region","aria-label":this.mediaType+" player"}),this.$playerDiv.addClass("able-"+this.mediaType),this.hasPlaylist&&this.showNowPlaying&&(this.$nowPlayingDiv=t("<div>",{class:"able-now-playing","aria-live":"assertive","aria-atomic":"true"})),this.$controllerDiv=t("<div>",{class:"able-controller"}),this.$controllerDiv.addClass("able-"+this.iconColor+"-controls"),this.$statusBarDiv=t("<div>",{class:"able-status-bar"}),this.$timer=t("<span>",{class:"able-timer"}),this.$elapsedTimeContainer=t("<span>",{class:"able-elapsedTime",text:"0:00"}),this.$durationContainer=t("<span>",{class:"able-duration"}),this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer),this.$speed=t("<span>",{class:"able-speed","aria-live":"assertive"}).text(this.tt.speed+": 1x"),this.$status=t("<span>",{class:"able-status","aria-live":"polite"}),this.$statusBarDiv.append(this.$timer,this.$speed,this.$status),this.showNowPlaying?this.$playerDiv.append(this.$nowPlayingDiv,this.$controllerDiv,this.$statusBarDiv):this.$playerDiv.append(this.$controllerDiv,this.$statusBarDiv),"video"===this.mediaType?this.$ableDiv.append(this.$playerDiv):this.$ableDiv.prepend(this.$playerDiv)},AblePlayer.prototype.injectTextDescriptionArea=function(){this.$descDiv=t("<div>",{class:"able-descriptions"}),this.$descDiv.attr({"aria-live":"assertive","aria-atomic":"true"}),this.$descDiv.hide(),this.$ableDiv.append(this.$descDiv)},AblePlayer.prototype.getDefaultWidth=function(t){return"transcript"===t?450:"sign"===t?400:void 0},AblePlayer.prototype.positionDraggableWindow=function(e,i){var s,a,n,r;s=this.getCookie(),"transcript"===e?(n=this.$transcriptArea,void 0!==s.transcript&&(a=s.transcript)):"sign"===e&&(n=this.$signWindow,void 0!==s.transcript&&(a=s.sign)),void 0===a||t.isEmptyObject(a)?(r=this.getOptimumPosition(e,i),void 0===i&&(i=this.getDefaultWidth(e)),n.css({position:r[0],width:i,"z-index":r[3]}),"absolute"===r[0]&&n.css({top:r[1]+"px",left:r[2]+"px"})):(n.css({position:a.position,width:a.width,"z-index":a.zindex}),"absolute"===a.position&&n.css({top:a.top,left:a.left}),this.updateZIndex(e))},AblePlayer.prototype.getOptimumPosition=function(e,i){var s,a,n,r,o,l;return void 0===i&&(i=this.getDefaultWidth(e)),s=[],a=this.$ableDiv.width(),this.$ableDiv.height(),(n=this.$ableDiv.offset()).top,r=n.left,o=t(window).width(),l=0,"transcript"===e?void 0!==this.$signWindow&&this.$signWindow.is(":visible")&&(l=this.$signWindow.width()+5):"sign"===e&&void 0!==this.$transcriptArea&&this.$transcriptArea.is(":visible")&&(l=this.$transcriptArea.width()+5),i<o-(r+a+5+l)?(s[0]="absolute",s[1]=0,s[2]=a+l+5):i+5<r?(s[0]="absolute",s[1]=0,s[2]=r-i-5):s[0]="relative",s},AblePlayer.prototype.injectAlert=function(){var e;this.$alertBox=t('<div role="alert"></div>'),this.$alertBox.addClass("able-alert"),this.$alertBox.hide(),this.$alertBox.appendTo(this.$ableDiv),e="audio"==this.mediaType?"-10":"10",this.$alertBox.css({top:e+"px"}),this.$srAlertBox=t('<div role="alert"></div>'),this.$srAlertBox.addClass("able-screenreader-alert"),this.$srAlertBox.appendTo(this.$ableDiv)},AblePlayer.prototype.injectPlaylist=function(){if(!0===this.playlistEmbed){var t=this.$playlistDom.clone();t.insertBefore(this.$statusBarDiv),this.$playlist=t.find("li")}},AblePlayer.prototype.createPopup=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,f;if(s=this,a=t("<ul>",{id:this.mediaId+"-"+e+"-menu",class:"able-popup",role:"menu"}).hide(),"captions"===e&&a.addClass("able-popup-captions"),"prefs"===e)if(this.prefCats.length>1){for(n=0;n<this.prefCats.length;n++)r=t("<li></li>",{role:"menuitem",tabindex:"-1"}),"captions"===(o=this.prefCats[n])?r.text(this.tt.prefMenuCaptions):"descriptions"===o?r.text(this.tt.prefMenuDescriptions):"keyboard"===o?r.text(this.tt.prefMenuKeyboard):"transcript"===o&&r.text(this.tt.prefMenuTranscript),r.on("click",(function(){c=t(this).text(),s.showingPrefsDialog=!0,s.setFullscreen(!1),c===s.tt.prefMenuCaptions?s.captionPrefsDialog.show():c===s.tt.prefMenuDescriptions?s.descPrefsDialog.show():c===s.tt.prefMenuKeyboard?s.keyboardPrefsDialog.show():c===s.tt.prefMenuTranscript&&s.transcriptPrefsDialog.show(),s.closePopups(),s.showingPrefsDialog=!1})),a.append(r);this.$prefsButton.attr("data-prefs-popup","menu")}else 1==this.prefCats.length&&this.$prefsButton.attr("data-prefs-popup",this.prefCats[0]);else if("captions"===e||"chapters"===e){for(l=!1,n=0;n<i.length;n++)h=i[n],("captions"!==e||"html5"!==this.player||void 0!==h.cues)&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1",lang:h.language}),h.def&&1==this.prefCaptions?(r.attr("aria-checked","true"),l=!0):r.attr("aria-checked","false"),"captions"==e?(r.text(h.label),r.on("click",this.getCaptionClickFunction(h))):"chapters"==e&&(r.text(this.flattenCueForCaption(h)+" - "+this.formatSecondsAsColonTime(h.start)),r.on("click",this.getChapterClickFunction(h.start))),a.append(r));"captions"===e&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1"}).text(this.tt.captionsOff),0===this.prefCaptions?(r.attr("aria-checked","true"),l=!0):r.attr("aria-checked","false"),r.on("click",this.getCaptionOffFunction()),a.append(r))}else if("transcript-window"===e||"sign-window"===e)for((p=[]).push({name:"move",label:this.tt.windowMove}),p.push({name:"resize",label:this.tt.windowResize}),p.push({name:"close",label:this.tt.windowClose}),n=0;n<p.length;n++)(r=t("<li></li>",{role:"menuitem",tabindex:"-1","data-choice":p[n].name})).text(p[n].label),r.on("click mousedown",(function(i){if(i.stopPropagation(),void 0!==i.button&&0!==i.button)return!1;s.windowMenuClickRegistered||s.finishingDrag||(s.windowMenuClickRegistered=!0,s.handleMenuChoice(e.substring(0,e.indexOf("-")),t(this).attr("data-choice"),i))})),a.append(r);return"captions"!==e||l?"chapters"===e&&(a.find('li:contains("'+this.defaultChapter+'")')?a.find('li:contains("'+this.defaultChapter+'")').attr("aria-checked","true").addClass("able-focus"):a.find("li").first().attr("aria-checked","true").addClass("able-focus")):a.find("li[lang="+this.captionLang+"]")?a.find("li[lang="+this.captionLang+"]").attr("aria-checked","true"):a.find("li").last().attr("aria-checked","true"),a.on("keydown",(function(e){t(this).attr("id").split("-")[1],(u=t(this).find("li:focus")).is(":first-child")?(d=t(this).find("li").last(),f=u.next()):u.is(":last-child")?(d=u.prev(),f=t(this).find("li").first()):(d=u.prev(),f=u.next()),9===e.which?e.shiftKey?(u.removeClass("able-focus"),d.focus().addClass("able-focus")):(u.removeClass("able-focus"),f.focus().addClass("able-focus")):40===e.which||39===e.which?(u.removeClass("able-focus"),f.focus().addClass("able-focus")):38==e.which||37===e.which?(u.removeClass("able-focus"),d.focus().addClass("able-focus")):32===e.which||13===e.which?u.click():27===e.which&&(u.removeClass("able-focus"),s.closePopups(),e.stopPropagation),e.preventDefault()})),this.$controllerDiv.append(a),a},AblePlayer.prototype.closePopups=function(){var t=this;this.chaptersPopup&&this.chaptersPopup.is(":visible")&&(this.chaptersPopup.hide(),this.$chaptersButton.attr("aria-expanded","false").focus()),this.captionsPopup&&this.captionsPopup.is(":visible")&&(this.captionsPopup.hide(),this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)),this.prefsPopup&&this.prefsPopup.is(":visible")&&!this.hidingPopup&&(this.hidingPopup=!0,this.prefsPopup.hide(),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$prefsButton.attr("aria-expanded","false"),this.showingPrefsDialog||this.waitThenFocus(t.$prefsButton),setTimeout((function(){t.hidingPopup=!1}),100)),this.$volumeSlider&&this.$volumeSlider.is(":visible")&&(this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus()),this.$transcriptPopup&&this.$transcriptPopup.is(":visible")&&(this.hidingPopup=!0,this.$transcriptPopup.hide(),this.$transcriptPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$transcriptPopupButton.attr("aria-expanded","false").focus(),setTimeout((function(){t.hidingPopup=!1}),100)),this.$signPopup&&this.$signPopup.is(":visible")&&(this.$signPopup.hide(),this.$signPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$signPopupButton.attr("aria-expanded","false").focus())},AblePlayer.prototype.setupPopups=function(t){var e,i;if(e=[],void 0===t&&e.push("prefs"),"captions"!==t&&void 0!==t||this.captions.length>0&&e.push("captions"),"chapters"!==t&&void 0!==t||this.chapters.length>0&&this.useChaptersButton&&e.push("chapters"),"transcript-window"===t&&"popup"===this.transcriptType&&e.push("transcript-window"),"sign-window"===t&&this.hasSignLanguage&&e.push("sign-window"),e.length>0){0;for(var s=0;s<e.length;s++){var a=e[s];if("prefs"==a)this.prefsPopup=this.createPopup("prefs");else if("captions"==a)void 0!==this.captionsPopup&&this.captionsPopup||(this.captionsPopup=this.createPopup("captions",this.captions));else if("chapters"==a)i=this.selectedChapters?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[],void 0!==this.chaptersPopup&&this.chaptersPopup||(this.chaptersPopup=this.createPopup("chapters",i));else{if("transcript-window"==a)return this.createPopup("transcript-window");if("sign-window"==a)return this.createPopup("sign-window")}}}},AblePlayer.prototype.provideFallback=function(){var e,i;if(!this.usingFallback){if(this.usingFallback=!0,this.testFallback||(this.testFallback=1),void 0===this.$media&&(this.$media=t(this.media)),this.$media.attr("id")?this.mediaId=this.$media.attr("id"):this.mediaId="media"+Math.floor(1e9Math.random()).toString(),this.hasFallback=!1,this.$media.children().length)for(e=0;e<this.$media.children().length&&!this.hasFallback;)"SOURCE"!==this.$media.children()[e].tagName&&"TRACK"!==this.$media.children()[e].tagName&&(this.hasFallback=!0),e++;if(this.hasFallback||(i=t("<p>").text("Media player unavailable."),this.$media.append(i)),this.$media.attr("width")&&this.$media.css("width",this.$media.attr("width")+"px"),this.$media.attr("height")&&this.$media.css("height",this.$media.attr("height")+"px"),this.$media.removeAttr("data-able-player"),this.$media.prop("controls",!0),2==this.testFallback){if(t(this.$media).replaceWith(t('<foobar id="foobar-'+this.mediaId+'">')),this.$newFallbackElement=t("#foobar-"+this.mediaId),this.$media.children().length)for(e=this.$media.children().length-1;e>=0;)this.$newFallbackElement.prepend(t(this.$media.children()[e])),e--;this.hasFallback||this.$newFallbackElement.append(i)}}},AblePlayer.prototype.calculateControlLayout=function(){var t,e,i;return(t=[])[0]=[],t[1]=[],"legacy"===this.skin&&(t[2]=[],t[3]=[]),t[0].push("play"),t[0].push("restart"),t[0].push("rewind"),t[0].push("forward"),"legacy"===this.skin&&t[1].push("seek"),this.hasPlaylist&&("legacy"===this.skin||"2020"==this.skin)&&(t[0].push("previous"),t[0].push("next")),this.isPlaybackRateSupported()?(e=!0,"legacy"===this.skin&&(t[2].push("slower"),t[2].push("faster"))):e=!1,i=0,this.hasCaptions&&(i++,"legacy"===this.skin?t[2].push("captions"):"2020"==this.skin&&t[1].push("captions")),this.hasSignLanguage&&(i++,"legacy"===this.skin?t[2].push("sign"):"2020"==this.skin&&t[1].push("sign")),"video"===this.mediaType&&(this.hasOpenDesc||this.hasClosedDesc)&&(i++,"legacy"===this.skin?t[2].push("descriptions"):"2020"==this.skin&&t[1].push("descriptions")),"popup"!==this.transcriptType||this.hideTranscriptButton||(i++,"legacy"===this.skin?t[2].push("transcript"):"2020"==this.skin&&t[1].push("transcript")),this.hasChapters&&this.useChaptersButton&&(i++,"legacy"===this.skin?t[2].push("chapters"):"2020"==this.skin&&t[1].push("chapters")),"2020"==this.skin&&i>0&&t[1].push("pipe"),e&&"2020"===this.skin&&(t[1].push("faster"),t[1].push("slower"),t[1].push("pipe")),"legacy"===this.skin?t[3].push("preferences"):"2020"==this.skin&&t[1].push("preferences"),"video"===this.mediaType&&this.allowFullscreen&&("legacy"===this.skin?t[3].push("fullscreen"):t[1].push("fullscreen")),this.browserSupportsVolume()?(this.volumeButton="volume-"+this.getVolumeName(this.volume),("legacy"===this.skin||"2020"==this.skin)&&t[1].push("volume")):this.volume=!1,t},AblePlayer.prototype.addControls=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,f,m,g,v,y,b,T,P,k,C;for(e=this,s=(i=this.calculateControlLayout()).length,T=this.mediaId+"-tooltip",this.$tooltipDiv=t("<div>",{id:T,class:"able-tooltip"}).hide(),this.$controllerDiv.append(this.$tooltipDiv),"2020"==this.skin&&(l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.tt.seekbarLabel,this.$controllerDiv.append(l),this.seekBar=new AccessibleSlider(this.mediaType,l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible")),a=0;a<s;a++){for(r=i[a],o=t("<div>",a%2==0?{class:"able-left-controls"}:{class:"able-right-controls"}),this.$controllerDiv.append(o),n=0;n<r.length;n++){if("seek"===(d=r[n]))l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.tt.seekbarLabel,o.append(l),void 0!==this.duration&&0!==this.duration||(this.duration=60,this.elapsed=0),this.seekBar=new AccessibleSlider(this.mediaType,l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible");else if("pipe"===d)p=t("<span>",{tabindex:"-1","aria-hidden":"true"}),"font"===this.iconType?p.addClass("icon-pipe"):(c=t("<img>",{src:this.rootPath+"button-icons/"+this.iconColor+"/pipe.png",alt:"",role:"presentation"}),p.append(c)),o.append(p);else{if(m="volume"===d?this.rootPath+"button-icons/"+this.iconColor+"/"+this.volumeButton+".png":"fullscreen"===d?this.rootPath+"button-icons/"+this.iconColor+"/fullscreen-expand.png":"slower"===d?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/turtle.png":this.rootPath+"button-icons/"+this.iconColor+"/slower.png":"faster"===d?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/rabbit.png":this.rootPath+"button-icons/"+this.iconColor+"/faster.png":this.rootPath+"button-icons/"+this.iconColor+"/"+d+".png",g=this.getButtonTitle(d),v=t("<div>",{role:"button",tabindex:"0","aria-label":g,class:"able-button-handler-"+d}),"volume"!==d&&"preferences"!==d&&"captions"!==d||("preferences"==d?(this.prefCats=this.getPreferencesGroups(),this.prefCats.length>1?(C=this.mediaId+"-prefs-menu",v.attr({"aria-controls":C,"aria-haspopup":"menu","aria-expanded":"false"})):1===this.prefCats.length&&v.attr({"aria-haspopup":"dialog"})):"volume"===d?(C=this.mediaId+"-volume-slider",v.attr({"aria-controls":C,"aria-expanded":"false"})):"captions"===d&&this.captions&&(this.captions.length>1?v.attr("aria-expanded","false"):v.attr("aria-pressed","false"))),"font"===this.iconType)y="volume"===d?"icon-"+this.volumeButton:"slower"===d?"animals"===this.speedIcons?"icon-turtle":"icon-slower":"faster"===d?"animals"===this.speedIcons?"icon-rabbit":"icon-faster":"icon-"+d,b=t("<span>",{class:y,"aria-hidden":"true"}),v.append(b);else if("svg"===this.iconType){var w;w="volume"===d?this.getSvgData(this.volumeButton):"fullscreen"===d?this.getSvgData("fullscreen-expand"):"slower"===d?"animals"===this.speedIcons?this.getSvgData("turtle"):this.getSvgData("slower"):"faster"===d?"animals"===this.speedIcons?this.getSvgData("rabbit"):this.getSvgData("faster"):this.getSvgData(d),b=t("<svg>",{focusable:"false","aria-hidden":"true",viewBox:w[0]}),u=t("<path>",{d:w[1]}),b.append(u),v.html(b),v.html(v.html())}else f=t("<img>",{src:m,alt:"",role:"presentation"}),v.append(f);var D=t("<span>",{class:"able-clipped"}).text(g);v.append(D),v.on("mouseenter focus",(function(i){clearTimeout(P);var s=t(this).attr("aria-label"),a=t(this).position(),n=t(this).height(),r=t(this).width(),o=e.$controllerDiv.width();a.right=o-a.left-r;var l=a.top+n+5;if(t(this).parent().hasClass("able-right-controls"))var h="right";else h="left";var p=AblePlayer.localGetElementById(v[0],T).text(s).width();if("left"==h){(u=a.left-p/2)<0&&(u=2);var c={left:u+"px",right:"",top:l+"px"}}else{var u;(u=a.right-p/2)<0&&(u=2);c={left:"",right:u+"px",top:l+"px"}}var d=AblePlayer.localGetElementById(v[0],T).text(s).css(c);e.showTooltip(d),t(this).on("mouseleave blur",(function(){clearTimeout(P),P=setTimeout((function(){AblePlayer.localGetElementById(v[0],T).text("").hide()}),500),e.$tooltipDiv.on("mouseenter focus",(function(){clearTimeout(P)})),e.$tooltipDiv.on("mouseleave blur",(function(){AblePlayer.localGetElementById(v[0],T).text("").hide()}))}))})),"captions"===d?this.prefCaptions&&1===this.prefCaptions||(k=this.captions.length>1?this.tt.captions:this.tt.showCaptions,v.addClass("buttonOff").attr("title",k),v.attr("aria-pressed","false")):"descriptions"===d&&(this.prefDesc&&1===this.prefDesc||v.addClass("buttonOff").attr("title",this.tt.turnOnDescriptions)),o.append(v),"play"===d?this.$playpauseButton=v:"previous"==d?(this.$prevButton=v,"previous"==this.buttonWithFocus&&(this.$prevButton.focus(),this.buttonWithFocus=null)):"next"==d?(this.$nextButton=v,"next"==this.buttonWithFocus&&(this.$nextButton.focus(),this.buttonWithFocus=null)):"captions"===d?this.$ccButton=v:"sign"===d?(this.$signButton=v,this.$signWindow.is(":visible")||this.$signButton.addClass("buttonOff")):"descriptions"===d?this.$descButton=v:"mute"===d?this.$muteButton=v:"transcript"===d?(this.$transcriptButton=v,this.$transcriptDiv.is(":visible")||this.$transcriptButton.addClass("buttonOff").attr("title",this.tt.showTranscript)):"fullscreen"===d?this.$fullscreenButton=v:"chapters"===d?this.$chaptersButton=v:"preferences"===d?this.$prefsButton=v:"volume"===d&&(this.$volumeButton=v)}"volume"===d&&this.addVolumeSlider(o)}a%2==1&&this.$controllerDiv.append('<div style="clear:both;"></div>')}for(var A in void 0!==this.$captionsDiv&&this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv),this.controls=[],i)i.hasOwnProperty(A)&&(this.controls=this.controls.concat(i[A]));this.refreshControls("init")},AblePlayer.prototype.useSvg=function(){var t,e,i=Object.create(null),debouncedCheck=function(){clearTimeout(e),e=setTimeout(t,100)},unobserveChanges=function(){},s="http://www.w3.org/1999/xlink";t=function(){var t,e,a,n,r,o,l,h,p,c=0;if(window.XMLHttpRequest&&(r=void 0!==(r=new XMLHttpRequest).withCredentials?XMLHttpRequest:XDomainRequest||void 0),void 0!==r){for(unobserveChanges(),h=document.getElementsByTagName("use"),n=0;n<h.length;n+=1){try{e=h[n].getBoundingClientRect()}catch(t){e=!1}t=(l=h[n].getAttributeNS(s,"href").split("#"))[0],a=l[1],o=e&&0===e.left&&0===e.right&&0===e.top&&0===e.bottom,e&&0===e.width&&0===e.height&&!o?t.length&&(!0!==(p=i[t])&&setTimeout(attrUpdateFunc({useEl:h[n],base:t,hash:a}),0),void 0===p&&(p=new r,i[t]=p,p.onload=onloadFunc(p),p.onerror=onErrorTimeout(p),p.ontimeout=onErrorTimeout(p),p.open("GET",t),p.send(),c+=1)):o||(void 0===i[t]?i[t]=!0:i[t].onload&&(i[t].abort(),i[t].onload=void 0,i[t]=!0))}h="",c+=1,observeIfDone()}function observeIfDone(){var t;0===(c-=1)&&(window.addEventListener("resize",debouncedCheck,!1),window.addEventListener("orientationchange",debouncedCheck,!1),window.MutationObserver?((t=new MutationObserver(debouncedCheck)).observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}),unobserveChanges=function(){try{t.disconnect(),window.removeEventListener("resize",debouncedCheck,!1),window.removeEventListener("orientationchange",debouncedCheck,!1)}catch(t){}}):(document.documentElement.addEventListener("DOMSubtreeModified",debouncedCheck,!1),unobserveChanges=function(){document.documentElement.removeEventListener("DOMSubtreeModified",debouncedCheck,!1),window.removeEventListener("resize",debouncedCheck,!1),window.removeEventListener("orientationchange",debouncedCheck,!1)}))}function attrUpdateFunc(t){return function(){!0!==i[t.base]&&t.useEl.setAttributeNS(s,"xlink:href","#"+t.hash)}}function onloadFunc(t){return function(){var e,i=document.body,s=document.createElement("x");t.onload=null,s.innerHTML=t.responseText,(e=s.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",i.insertBefore(e,i.firstChild)),observeIfDone()}}function onErrorTimeout(t){return function(){t.onerror=null,t.ontimeout=null,observeIfDone()}}}},AblePlayer.prototype.cuePlaylistItem=function(e){var i,s,a,n,r,o,l=this;s=this.player,this.initializing||this.playerCreated&&this.deletePlayer("playlist"),this.swappingSrc=!0,this.startedPlaying?this.okToPlay=!0:this.okToPlay=!1,this.loadingMedia=!1,i=this.$playlist.eq(e),this.hasAttr(i,"data-youtube-id")?(this.youTubeId=this.getYouTubeId(i.attr("data-youtube-id")),this.hasAttr(i,"data-youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(i.attr("data-youtube-desc-id"))),a="youtube"):this.hasAttr(i,"data-vimeo-id")?(this.vimeoId=this.getVimeoId(i.attr("data-vimeo-id")),this.hasAttr(i,"data-vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(i.attr("data-vimeo-desc-id"))),a="vimeo"):a="html5","youtube"===a?"html5"===s&&(this.playing&&this.pauseMedia(),this.$media.hide()):(this.youTubeId=!1,"youtube"===s&&this.$media.show()),this.player=a,this.$media.empty(),this.hasAttr(i,"data-poster")&&this.$media.attr("poster",i.attr("data-poster")),this.hasAttr(i,"data-youtube-desc-id")&&this.$media.attr("data-youtube-desc-id",i.attr("data-youtube-desc-id")),this.youTubeId&&this.$media.attr("data-youtube-id",i.attr("data-youtube-id"));var h=i.children("span.able-source");h.length&&h.each((function(){if(l.hasAttr(t(this),"data-src")){var e=t("<source>",{src:t(this).attr("data-src")});l.hasAttr(t(this),"data-type")&&e.attr("type",t(this).attr("data-type")),l.hasAttr(t(this),"data-desc-src")&&e.attr("data-desc-src",t(this).attr("data-desc-src")),l.hasAttr(t(this),"data-sign-src")&&e.attr("data-sign-src",t(this).attr("data-sign-src")),l.$media.append(e)}}));var p=i.children("span.able-track");p.length&&p.each((function(){if(l.hasAttr(t(this),"data-src")&&l.hasAttr(t(this),"data-kind")&&l.hasAttr(t(this),"data-srclang")){var e=t("<track>",{src:t(this).attr("data-src"),kind:t(this).attr("data-kind"),srclang:t(this).attr("data-srclang")});l.hasAttr(t(this),"data-label")&&e.attr("label",t(this).attr("data-label")),l.hasAttr(t(this),"data-desc")&&e.attr("data-desc",t(this).attr("data-desc")),l.$media.append(e)}})),n=i.text(),this.hasAttr(i,"lang")&&(r=i.attr("lang")),this.$sources=this.$media.find("source"),this.recreatingPlayer||this.recreatePlayer().then((function(){l.$playlist.removeClass("able-current").children("button").removeAttr("aria-current"),l.$playlist.eq(e).addClass("able-current").children("button").attr("aria-current","true"),!0===l.showNowPlaying&&void 0!==l.$nowPlayingDiv&&(o=t("<span>"),void 0!==r&&o.attr("lang",r),o.html("<span>"+l.tt.selectedTrack+":</span>"+n),l.$nowPlayingDiv.html(o)),l.initializing?l.swappingSrc=!1:"html5"===l.player?l.loadingMedia||(l.media.load(),l.loadingMedia=!0):"youtube"===l.player&&(l.okToPlay=!0),l.initializing=!1,l.playerCreated=!0}))},AblePlayer.prototype.deletePlayer=function(e){"youtube"===this.player&&this.youTubePlayer&&this.youTubePlayer.destroy(),"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.destroy(),this.$controllerDiv.empty(),this.$elapsedTimeContainer.empty().text("0:00"),this.$durationContainer.empty(),this.$signWindow&&this.$signWindow.remove(),this.$transcriptArea&&this.$transcriptArea.remove(),t(".able-modal-dialog").remove(),this.$captionsWrapper&&this.$captionsWrapper.remove(),this.$descDiv&&this.$descDiv.remove(),this.hasCaptions=!1,this.hasChapters=!1,this.hasDescTracks=!1,this.hasOpenDesc=!1,this.hasClosedDesc=!1,this.captionsPopup=null,this.chaptersPopup=null,this.transcriptType=null,this.playerDeleted=!0},AblePlayer.prototype.getButtonTitle=function(t){return"playpause"===t||"play"===t?this.tt.play:"pause"===t?this.tt.pause:"restart"===t?this.tt.restart:"previous"===t?this.tt.prevTrack:"next"===t?this.tt.nextTrack:"rewind"===t?this.tt.rewind:"forward"===t?this.tt.forward:"captions"===t?this.captions.length>1?this.tt.captions:this.captionsOn?this.tt.hideCaptions:this.tt.showCaptions:"descriptions"===t?this.descOn?this.tt.turnOffDescriptions:this.tt.turnOnDescriptions:"transcript"===t?this.$transcriptDiv.is(":visible")?this.tt.hideTranscript:this.tt.showTranscript:"chapters"===t?this.tt.chapters:"sign"===t?this.tt.sign:"volume"===t?this.tt.volume:"faster"===t?this.tt.faster:"slower"===t?this.tt.slower:"preferences"===t?this.tt.preferences:"help"!==t?"fullscreen"===t?this.fullscreen?this.tt.exitFullscreen:this.tt.enterFullscreen:(this.debug,t.charAt(0).toUpperCase()+t.slice(1)):void 0}}(jQuery);var preProcessing={transformCSSClasses:function(t){return t.replace(/<(v|c|b|i|u|lang|ruby)\.([\w\.]+)([^>])>/g,(function(t,e,i,s){return"<"+e+' class="'+i.split(".").join(" ")+'"'+s+">"}))},transformLangTags:function(t){return t.replace(/<lang\s+([\w-]+)([^>])>/g,(function(t,e,i){return'<lang lang="'+e+'"'+i+">"}))},transformVTags:function(t){return t.replace(/<v\s+([^>]?)>/g,(function(t,e){var i=e.match(/class="([^"])"/),s=i?i[0]:"",a=e.replace(/class="[^"]"/,"").trim().split(/\s+/),n=[],r=[];a.forEach((function(t){-1!==t.indexOf("=")?n.push(t):r.push(t)}));var o=r.join(" "),l="<v";return o&&(l+=' title="'+o+'"'),n.length>0&&(l+=" "+n.join(" ")),s&&(l+=" "+s),l+=">"}))}},postProcessing={postprocessCTag:function(t){return t.replace(/<c class="([\w\s]+)">/g,(function(t,e){return"<c."+e.split(" ").join(".")+">"}))},postprocessVTag:function(t){return t.replace(/<v class="([\w\s]+)"([^>])>/g,(function(t,e,i){return"<v."+e.split(" ").join(".")+i+">"}))},postprocessLangTag:function(t){return t.replace(/<lang lang="([\w-]+)"([^>])>/g,(function(t,e,i){return"<lang "+e+i+">"}))}},validate={preProcessVttContent:function(t){var e=preProcessing.transformCSSClasses(t),i=preProcessing.transformLangTags(e);return preProcessing.transformVTags(i)},postProcessVttContent:function(t,e){var i=postProcessing.postprocessCTag(t),s=postProcessing.postprocessVTag(i);return postProcessing.postprocessLangTag(s).replace(/-->/g,"--\x3e").replace(/<\/v>/g,(function(t,i){return-1!==e.indexOf(t,i)?t:""}))},sanitizeVttContent:function(t){if(null==t)return"";var e=validate.preProcessVttContent(t),i=DOMPurify.sanitize(e,{ALLOWED_TAGS:["b","i","u","v","c","lang","ruby","rt","rp"],ALLOWED_ATTR:["title","class","lang"],KEEP_CONTENT:!0});return validate.postProcessVttContent(i,t)}};"undefined"!=typeof module&&module.exports&&(module.exports=validate),function(t){AblePlayer.prototype.setupTracks=function(){var e,i,s,a,n,r,o,l,h;for(e=this,s=(i=new t.Deferred).promise(),a=[],t("#able-vts").length?(this.vtsTracks=[],this.hasVts=!0):this.hasVts=!1,o=this.hasDescTracks&&this.descOn?this.altTracks:this.tracks,r=0;r<o.length;r++)if(h=(l=o[r]).kind,l.src){l.src;n=this.loadTextObject(l.src),a.push(n.catch((function(t){}))),n.then(function(t,i){t.src;var s=t.language,a=t.label,n=t.desc;return function(r,o){var l=o,h=e.parseWebVTT(r,l).cues;e.hasVts&&e.setupVtsTracks(i,s,n,a,r,l),"captions"===i||"subtitles"===i?e.setupCaptions(t,h):"descriptions"===i?e.setupDescriptions(t,h):"chapters"===i?e.setupChapters(t,h):"metadata"===i&&e.setupMetadata(t,h)}}(l,h))}else(e.usingYouTubeCaptions||e.usingVimeoCaptions)&&e.setupCaptions(l);return e.usingYouTubeCaptions||e.usingVimeoCaptions?i.resolve():t.when.apply(t,a).then((function(){i.resolve()})),s},AblePlayer.prototype.getTracks=function(){var e,i,s,a,n,r,o,l,h,p,c;return e=this,l=!1,s=(i=new t.Deferred).promise(),this.$tracks=this.$media.find("track"),this.tracks=[],this.altTracks=[],this.captions=[],this.descriptions=[],this.chapters=[],this.meta=[],this.hasCaptionsTrack=!1,this.hasDescTracks=!1,this.$tracks.length&&(this.usingYouTubeCaptions=!1,this.$tracks.each((function(i,s){if("captions"===t(this).attr("kind")?e.hasCaptionsTrack=!0:"descriptions"===t(this).attr("kind")&&(e.hasClosedDesc=!0),a=t(this).attr("srclang")?t(this).attr("srclang"):e.lang,n=t(this).attr("label")?t(this).attr("label"):e.getLanguageName(a),void 0===t(this).attr("default")||l?a===e.lang?(h=!0,r=!1):r=!1:(r=!0,l=!0),r&&(e.captionLang=a),void 0!==t(this).data("desc")?(o=!0,e.hasDescTracks=!0):o=!1,o?e.altTracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}):e.tracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}),i==e.$tracks.length-1){if(!l)if(h)for(e.captionLang=e.lang,p=!1,c=0;c<e.tracks.length&&!p;)e.tracks[c].language===e.lang&&(e.tracks[c].def=!0,p=!0),c++;else e.tracks[0].def=!0,e.captionLang=e.tracks[0].language;e.$media.find("track").removeAttr("default")}}))),this.$tracks.length&&this.hasCaptionsTrack?i.resolve():"youtube"===this.player?this.getYouTubeCaptionTracks(this.youTubeId).then((function(){e.hasCaptions&&(e.usingYouTubeCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()})):"vimeo"===this.player?this.getVimeoCaptionTracks().then((function(){e.hasCaptions&&(e.usingVimeoCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()})):(this.hasCaptions=!1,e.$captionsWrapper&&e.$captionsWrapper.remove(),i.resolve()),s},AblePlayer.prototype.setupCaptions=function(e,i){var s,a;if(void 0===i&&(i=null),this.usingYouTubeCaptions||this.usingVimeoCaptions);else if(0===this.captions.length)this.captions.push({language:e.language,label:e.label,def:e.def,cues:i});else{for(s=!1,a=0;a<this.captions.length;a++)if(e.label.toLowerCase()<this.captions[a].label.toLowerCase()){this.captions.splice(a,0,{language:e.language,label:e.label,def:e.def,cues:i}),s=!0;break}s||this.captions.push({language:e.language,label:e.label,def:e.def,cues:i})}this.hasCaptions=!0,this.currentCaption=-1,1===this.prefCaptions?this.captionsOn=!0:0===this.prefCaptions?this.captionsOn=!1:1===this.defaultStateCaptions?this.captionsOn=!0:this.captionsOn=!1,"audio"===this.mediaType&&this.captionsOn&&this.$captionsContainer.removeClass("captions-off"),(!this.$captionsWrapper||this.$captionsWrapper&&!t.contains(this.$ableDiv[0],this.$captionsWrapper[0]))&&(this.$captionsDiv=t("<div>",{class:"able-captions"}),this.$captionsWrapper=t("<div>",{class:"able-captions-wrapper","aria-hidden":"true"}).hide(),"below"===this.prefCaptionsPosition?this.$captionsWrapper.addClass("able-captions-below"):this.$captionsWrapper.addClass("able-captions-overlay"),this.$captionsWrapper.append(this.$captionsDiv),this.$captionsContainer.append(this.$captionsWrapper))},AblePlayer.prototype.setupDescriptions=function(t,e){this.hasClosedDesc=!0,this.currentDescription=-1,this.descriptions.push({cues:e,language:t.language})},AblePlayer.prototype.setupChapters=function(t,e){this.hasChapters=!0,this.chapters.push({cues:e,language:t.language})},AblePlayer.prototype.setupMetadata=function(e,i,s){"text"===this.metaType?this.metaDiv&&t("#"+this.metaDiv)&&(this.$metaDiv=t("#"+this.metaDiv),this.hasMeta=!0,this.meta=i):"selector"===this.metaType&&(this.hasMeta=!0,this.visibleSelectors=[],this.meta=i)},AblePlayer.prototype.loadTextObject=function(e){var i,s,a,n;return s=(i=new t.Deferred).promise(),a=this,n=t("<div>",{style:"display:none"}),t.ajax({url:e,dataType:"text",success:function(t){var s=validate.sanitizeVttContent(t);n.html(s),i.resolve(e,s),n.remove()},error:function(t,s,r){a.debug,i.reject(e),n.remove()}}),s}}(jQuery),function(t){AblePlayer.prototype.initYouTubePlayer=function(){var e,i,s,a;return e=this,s=(i=new t.Deferred).promise(),this.youTubePlayerReady=!1,a=this.youTubeDescId&&this.prefDesc?this.youTubeDescId:this.youTubeId,this.activeYouTubeId=a,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeInit().then((function(){i.resolve()})):(AblePlayer.loadingYouTubeIframeAPI||t.getScript("https://www.youtube.com/iframe_api").fail((function(){i.fail()})),t("body").on("youTubeIframeAPIReady",(function(){e.finalizeYoutubeInit().then((function(){i.resolve()}))}))),s},AblePlayer.prototype.finalizeYoutubeInit=function(){var e,i,s,a,n;return i=(e=new t.Deferred).promise(),s=this,a=this.mediaId+"_youtube",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.okToPlay?1:0,void 0===this.captionLang&&(this.captionLang=this.lang),this.youTubePlayer=new YT.Player(a,{videoId:this.activeYouTubeId,host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,enablejsapi:1,disableKb:1,playsinline:this.playsInline,start:this.startTime,controls:0,cc_load_policy:1,cc_lang_pref:this.captionLang,hl:this.lang,modestbranding:1,rel:0,iv_load_policy:3},events:{onReady:function(){s.youTubePlayerReady=!0,s.playerWidth&&s.playerHeight||s.getYouTubeDimensions(),s.playerWidth&&s.playerHeight&&(s.youTubePlayer.setSize(s.playerWidth,s.playerHeight),s.$ableWrapper.css({width:s.playerWidth+"px"})),s.swappingSrc&&(s.swappingSrc=!1,s.restoreFocus(),s.cueingPlaylistItem=!1,(s.playing||s.okToPlay)&&s.playMedia()),s.userClickedPlaylist&&(s.userClickedPlaylist=!1),s.recreatingPlayer&&(s.recreatingPlayer=!1),e.resolve()},onError:function(t){e.fail()},onStateChange:function(t){s.getPlayerState().then((function(t){"playing"===t?(s.playing=!0,s.startedPlaying=!0,s.paused=!1):"ended"==t?s.onMediaComplete():(s.playing=!1,s.paused=!0),s.stoppingYouTube&&"paused"===t&&(void 0!==s.$posterImg&&s.$posterImg.show(),s.stoppingYouTube=!1,s.seeking=!1,s.playing=!1,s.paused=!0)})),"youtube"!==s.player||s.usingYouTubeCaptions||s.youTubePlayer.getOptions("captions")&&s.youTubePlayer.unloadModule("captions")},onPlaybackQualityChange:function(){}}}),this.hasPlaylist||this.$media.remove(),i},AblePlayer.prototype.getYouTubeDimensions=function(t){var e,i,s;void 0!==(e=this.$ableWrapper.find("iframe"))&&e.prop("width")&&(i=e.prop("width"),e.prop("height")&&(s=e.prop("height"),this.resizePlayer(i,s)))},AblePlayer.prototype.getYouTubeCaptionTracks=function(e){var i,s,a,n,r,o,l=new t.Deferred,h=l.promise();return i=this,this.youTubePlayer.getOption("captions","tracklist")||(this.youTubePlayer.addEventListener("onApiChange",(function(t){if(i.duration=i.youTubePlayer.getDuration(),i.loadingYouTubeCaptions){if(s=i.youTubePlayer.getOption("captions","tracklist"),i.okToPlay||i.youTubePlayer.pauseVideo(),s&&s.length){for(a=0;a<s.length;a++)n=s[a].languageCode,r=s[a].languageName,o=!1,void 0!==i.captionLang?n===i.captionLang&&(o=!0):void 0!==i.lang&&n===i.lang&&(o=!0),i.tracks.push({kind:"captions",language:n,label:r,def:o}),i.captions.push({language:n,label:r,def:o,cues:null});i.hasCaptions=!0,i.setupPopups("captions")}else i.usingYouTubeCaptions=!1,i.hasCaptions=!1;i.loadingYouTubeCaptions=!1,i.okToPlay&&i.youTubePlayer.playVideo()}i.captionLangPending&&(i.youTubePlayer.setOption("captions","track",{languageCode:i.captionLangPending}),i.captionLangPending=null),void 0!==i.prefCaptionsSize&&i.youTubePlayer.setOption("captions","fontSize",i.translatePrefs("size",i.prefCaptionsSize,"youtube")),l.resolve()})),this.loadingYouTubeCaptions=!0,this.youTubePlayer.playVideo()),h},AblePlayer.prototype.getYouTubeTimedTextUrl=function(t,e,i){var s="https://www.youtube.com/api/timedtext?fmt=vtt";return s+="&v="+t,s+="&lang="+i,""!==e&&(s+="&name="+e),s},AblePlayer.prototype.getYouTubePosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+t;return"120"==e?i+"/default.jpg":"320"==e||"480"==e?i+"/hqdefault.jpg":"640"==e&&i+"/sddefault.jpg"},AblePlayer.prototype.getYouTubeId=function(t){var e;return-1!==t.indexOf("youtu")?(e=(t=t.trim()).length-11,t.substring(e)):t}}(jQuery),function(t){window.AccessibleSlider=function(e,i,s,a,n,r,o,l,h,p,c){var u,d;u=this,this.position=0,this.tracking=!1,this.trackDevice=null,this.keyTrackPosition=0,this.lastTrackPosition=0,this.nextStep=1,this.inertiaCount=0,this.bodyDiv=t(i),p&&(this.loadedDiv=t("<div></div>"),this.playedDiv=t("<div></div>")),this.seekHead=t("<div>",{"aria-orientation":s,class:"able-"+h+"-head"}),"visible"===c?this.seekHead.attr("tabindex","0"):this.seekHead.attr("tabindex","-1"),this.seekHead.attr({role:"slider","aria-label":l,"aria-valuemin":n,"aria-valuemax":r}),this.timeTooltipTimeoutId=null,this.overTooltip=!1,this.timeTooltip=t("<div>"),this.bodyDiv.append(this.timeTooltip),this.timeTooltip.attr("role","tooltip"),this.timeTooltip.addClass("able-tooltip"),this.timeTooltip.on("mouseenter focus",(function(){u.overTooltip=!0,clearInterval(u.timeTooltipTimeoutId)})),this.timeTooltip.on("mouseleave blur",(function(){u.overTooltip=!1,t(this).hide()})),this.timeTooltip.hide(),this.bodyDiv.append(this.loadedDiv),this.bodyDiv.append(this.playedDiv),this.bodyDiv.append(this.seekHead),this.bodyDiv.wrap("<div></div>"),this.wrapperDiv=this.bodyDiv.parent(),"legacy"===this.skin&&("horizontal"===s?(this.wrapperDiv.width(a),this.loadedDiv.width(0)):(this.wrapperDiv.height(a),this.loadedDiv.height(0))),this.wrapperDiv.addClass("able-"+h+"-wrapper"),p&&(this.loadedDiv.addClass("able-"+h+"-loaded"),this.playedDiv.width(0),this.playedDiv.addClass("able-"+h+"-played"),this.setDuration(r)),this.seekHead.on("mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend",(function(t){d=u.pointerEventToXY(t),"mouseenter"===t.type||"focus"===t.type?u.overHead=!0:"mouseleave"===t.type||"blur"===t.type?(u.overHead=!1,!u.overBody&&u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x))):"mousemove"===t.type||"touchmove"===t.type?u.tracking&&"mouse"===u.trackDevice&&u.trackHeadAtPageX(d.x):"mousedown"===t.type||"touchstart"===t.type?(u.startTracking("mouse",u.pageXToPosition(u.seekHead.offset()+u.seekHead.width()/2)),u.bodyDiv.is(":focus")||u.bodyDiv.focus(),t.preventDefault()):"mouseup"!==t.type&&"touchend"!==t.type||u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x)),"mousemove"!==t.type&&"mousedown"!==t.type&&"mouseup"!==t.type&&"touchstart"!==t.type&&"touchend"!==t.type&&u.refreshTooltip()})),this.bodyDiv.on("mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend",(function(t){if(d=u.pointerEventToXY(t),"mouseenter"===t.type)u.overBody=!0,u.overBodyMousePos={x:d.x,y:d.y};else if("mouseleave"===t.type)u.overBody=!1,u.overBodyMousePos=null,!u.overHead&&u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x));else if("mousemove"===t.type||"touchmove"===t.type)u.overBodyMousePos={x:d.x,y:d.y},u.tracking&&"mouse"===u.trackDevice&&u.trackHeadAtPageX(d.x);else if("mousedown"===t.type||"touchstart"===t.type)u.startTracking("mouse",u.pageXToPosition(d.x)),u.trackHeadAtPageX(d.x),u.seekHead.is(":focus")||u.seekHead.focus(),t.preventDefault();else if("mouseup"===t.type||"touchend"===t.type)u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x));else if("keydown"===t.type){if(36===t.which)u.trackImmediatelyTo(0);else if(35===t.which)u.trackImmediatelyTo(u.duration);else if(37===t.which||40===t.which)u.arrowKeyDown(-1);else if(39===t.which||38===t.which)u.arrowKeyDown(1);else if(33===t.which&&o>0)u.arrowKeyDown(o);else{if(!(34===t.which&&o>0))return;u.arrowKeyDown(-o)}t.preventDefault()}else"keyup"===t.type&&t.which>=33&&t.which<=40&&(u.tracking&&"keyboard"===u.trackDevice&&u.stopTracking(u.keyTrackPosition),t.preventDefault());u.overTooltip||"mouseup"===t.type||"keydown"===t.type||"keydown"===t.type||u.refreshTooltip()}))},AccessibleSlider.prototype.arrowKeyDown=function(t){this.tracking&&"keyboard"===this.trackDevice?(this.keyTrackPosition=this.boundPos(this.keyTrackPosition+this.nextStept),this.inertiaCount+=1,20===this.inertiaCount&&(this.inertiaCount=0,this.nextStep=2),this.trackHeadAtPosition(this.keyTrackPosition)):(this.nextStep=1,this.inertiaCount=0,this.keyTrackPosition=this.boundPos(this.position+this.nextStept),this.startTracking("keyboard",this.keyTrackPosition),this.trackHeadAtPosition(this.keyTrackPosition))},AccessibleSlider.prototype.pageXToPosition=function(t){var e=t-this.bodyDiv.offset().left,i=this.duration(e/this.bodyDiv.width());return this.boundPos(i)},AccessibleSlider.prototype.boundPos=function(t){return Math.max(0,Math.min(t,this.duration))},AccessibleSlider.prototype.setDuration=function(t){t!==this.duration&&(this.duration=t,this.resetHeadLocation(),this.seekHead.attr("aria-valuemax",t))},AccessibleSlider.prototype.setWidth=function(t){this.wrapperDiv.width(t),this.resizeDivs(),this.resetHeadLocation()},AccessibleSlider.prototype.getWidth=function(){return this.wrapperDiv.width()},AccessibleSlider.prototype.resizeDivs=function(){this.playedDiv.width(this.bodyDiv.width()(this.position/this.duration)),this.loadedDiv.width(this.bodyDiv.width()this.buffered)},AccessibleSlider.prototype.resetHeadLocation=function(){var t=this.position/this.duration,e=this.bodyDiv.width()t;this.seekHead.css("left",e-this.seekHead.width()/2),this.tracking&&this.stopTracking(this.position)},AccessibleSlider.prototype.setPosition=function(t,e){this.position=t,this.resetHeadLocation(),this.overHead&&this.refreshTooltip(),this.resizeDivs(),this.updateAriaValues(t,e)},AccessibleSlider.prototype.setBuffered=function(t){isNaN(t)||(this.buffered=t,this.redrawDivs)},AccessibleSlider.prototype.startTracking=function(t,e){this.tracking||(this.trackDevice=t,this.tracking=!0,this.bodyDiv.trigger("startTracking",[e]))},AccessibleSlider.prototype.stopTracking=function(t){this.trackDevice=null,this.tracking=!1,this.bodyDiv.trigger("stopTracking",[t]),this.setPosition(t,!0)},AccessibleSlider.prototype.trackHeadAtPageX=function(t){var e=this.pageXToPosition(t),i=t-this.bodyDiv.offset().left-this.seekHead.width()/2;i=Math.max(0,Math.min(i,this.bodyDiv.width()-this.seekHead.width())),this.lastTrackPosition=e,this.seekHead.css("left",i),this.reportTrackAtPosition(e)},AccessibleSlider.prototype.trackHeadAtPosition=function(t){var e=t/this.duration,i=this.bodyDiv.width()e;this.lastTrackPosition=t,this.seekHead.css("left",i-this.seekHead.width()/2),this.reportTrackAtPosition(t)},AccessibleSlider.prototype.reportTrackAtPosition=function(t){this.bodyDiv.trigger("tracking",[t]),this.updateAriaValues(t,!0)},AccessibleSlider.prototype.updateAriaValues=function(e,i){var s,a=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),o=1===n?"minute":"minutes",l=1===r?"second":"seconds";s=a>0?a+" "+(1===a?"hour":"hours")+", "+n+" "+o+", "+r+" "+l:n>0?n+" "+o+", "+r+" "+l:r+" "+l,this.liveAriaRegion||(this.liveAriaRegion=t("<span>",{class:"able-offscreen","aria-live":"polite"}),this.wrapperDiv.append(this.liveAriaRegion)),i&&this.liveAriaRegion.text()!==s&&this.liveAriaRegion.text(s),this.seekHead.attr("aria-valuetext",s),this.seekHead.attr("aria-valuenow",Math.floor(e).toString())},AccessibleSlider.prototype.trackImmediatelyTo=function(t){this.startTracking("keyboard",t),this.trackHeadAtPosition(t),this.keyTrackPosition=t},AccessibleSlider.prototype.refreshTooltip=function(){if(this.overHead)this.timeTooltip.show(),this.tracking?this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)):this.timeTooltip.text(this.positionToStr(this.position)),this.setTooltipPosition(this.seekHead.position().left+this.seekHead.width()/2);else if(this.overBody&&this.overBodyMousePos)this.timeTooltip.show(),this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))),this.setTooltipPosition(this.overBodyMousePos.x-this.bodyDiv.offset().left);else{clearTimeout(this.timeTooltipTimeoutId);var t=this;this.timeTooltipTimeoutId=setTimeout((function(){t.timeTooltip.hide()}),500)}},AccessibleSlider.prototype.hideSliderTooltips=function(){this.overHead=!1,this.overBody=!1,this.timeTooltip.hide()},AccessibleSlider.prototype.setTooltipPosition=function(t){this.timeTooltip.css({left:t-this.timeTooltip.width()/2-10,bottom:this.seekHead.height()+10})},AccessibleSlider.prototype.positionToStr=function(t){var e=Math.floor(t/3600),i=Math.floor(t/60)%60,s=Math.floor(t%60);return s<10&&(s="0"+s),e>0?(i<10&&(i="0"+i),e+":"+i+":"+s):i+":"+s},AccessibleSlider.prototype.pointerEventToXY=function(t){var e={x:0,y:0};if("touchstart"==t.type||"touchmove"==t.type||"touchend"==t.type||"touchcancel"==t.type){var i=t.originalEvent.touches[0]||t.originalEvent.changedTouches[0];e.x=i.pageX,e.y=i.pageY}else"mousedown"!=t.type&&"mouseup"!=t.type&&"mousemove"!=t.type&&"mouseover"!=t.type&&"mouseout"!=t.type&&"mouseenter"!=t.type&&"mouseleave"!=t.type||(e.x=t.pageX,e.y=t.pageY);return e}}(jQuery),function(t){AblePlayer.prototype.addVolumeSlider=function(e){var i,s,a,n,r,o,l,h,p;for(i=this,s=this.mediaId+"-volume-slider",a=this.mediaId+"-volume-help",r=this.mediaId+"-volume-tick-labels",this.$volumeSlider=t("<div>",{id:s,class:"able-volume-slider","aria-hidden":"true"}).hide(),this.$volumeSliderTooltip=t("<div>",{class:"able-tooltip",role:"tooltip"}).hide(),this.$volumeRange=t("<input>",{type:"range",min:"0",max:"10",step:"1",orient:"vertical","aria-label":this.tt.volumeUpDown,value:this.volume}),n=parseInt(i.volume)/10100,this.$volumeHelp=t("<div>",{id:a,class:"able-volume-help","aria-live":"polite"}).text(n+"%"),this.$volumeButton.attr({"aria-describedby":a}),o=t("<datalist>",{id:r}),l=0;l<=10;l++)p=0===l?this.tt.mute:10l+"%",h=t("<option>",{value:l,label:p}),o.append(h);this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp),e.append(this.$volumeSlider),this.$volumeRange.on("change",(function(e){i.handleVolumeChange(t(this).val())})),this.$volumeRange.on("input",(function(e){i.handleVolumeChange(t(this).val())})),this.$volumeRange.on("keydown",(function(t){27!==t.which&&13!==t.which&&9!==t.which||(i.$volumeSlider.is(":visible")?(i.closingVolume=!0,i.hideVolumePopup()):i.closingVolume||i.showVolumePopup())}))},AblePlayer.prototype.refreshVolumeHelp=function(t){var e;e=t/10100,this.$volumeHelp&&this.$volumeHelp.text(e+"%"),this.$volumeRange.attr("value",t)},AblePlayer.prototype.refreshVolumeButton=function(t){var e,i,s,a,n,r;e=this.getVolumeName(t),i=t/10100,s=this.tt.volume+" "+i+"%","font"===this.iconType?(a="icon-volume-"+e,this.$volumeButton.find("span").first().removeClass().addClass(a),this.$volumeButton.find("span.able-clipped").text(s)):"image"===this.iconType?(n=this.imgPath+"volume-"+e+".png",this.$volumeButton.find("img").attr("src",n)):"svg"===this.iconType&&("mute"!==e&&(e="volume-"+e),r=this.getSvgData(e),this.$volumeButton.find("svg").attr("viewBox",r[0]),this.$volumeButton.find("path").attr("d",r[1]))},AblePlayer.prototype.handleVolumeButtonClick=function(){this.$volumeSlider.is(":visible")?this.hideVolumePopup():this.showVolumePopup()},AblePlayer.prototype.handleVolumeKeystroke=function(t){var e;if(!(t>=49&&t<=57))return!1;e=t-48,this.isMuted()&&e>0?this.setMute(!1):0===e?this.setMute(!0):(this.setVolume(e),this.refreshVolumeHelp(e),this.refreshVolumeButton(e))},AblePlayer.prototype.handleVolumeChange=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleMute=function(){this.isMuted()?this.setMute(!1):this.setMute(!0)},AblePlayer.prototype.showVolumePopup=function(){this.closePopups(),this.$tooltipDiv.hide(),this.$volumeSlider.show().attr("aria-hidden","false"),this.$volumeButton.attr("aria-expanded","true"),this.$volumeButton.focus(),this.waitThenFocus(this.$volumeRange)},AblePlayer.prototype.hideVolumePopup=function(){var t=this;this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus(),setTimeout((function(){t.closingVolume=!1}),1e3)},AblePlayer.prototype.isMuted=function(){return"html5"===this.player?this.media.muted:"youtube"===this.player?this.youTubePlayer.isMuted():void 0},AblePlayer.prototype.setMute=function(t){t?(this.lastVolume=this.volume,this.volume=0):void 0!==this.lastVolume&&(this.volume=this.lastVolume),"html5"===this.player?this.media.muted=t:"youtube"===this.player&&(t?this.youTubePlayer.mute():this.youTubePlayer.unMute()),this.setVolume(this.volume),this.refreshVolumeHelp(this.volume),this.refreshVolumeButton(this.volume)},AblePlayer.prototype.setVolume=function(t){var e;"html5"===this.player?(e=t/10,this.media.volume=e,this.hasSignLanguage&&this.signVideo&&(this.signVideo.volume=0)):"youtube"===this.player?(e=10t,this.youTubePlayer.setVolume(e),this.volume=t):"vimeo"===this.player&&(e=t/10,this.vimeoPlayer.setVolume(e).then((function(){}))),this.lastVolume=t},AblePlayer.prototype.getVolume=function(t){return"html5"===this.player?10this.media.volume:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getVolume()/10:"vimeo"===this.player?this.volume:void 0},AblePlayer.prototype.getVolumeName=function(t){return 0==t?"mute":10==t?"loud":t<5?"soft":"medium"}}(jQuery),function(t){var e="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]";window.AccessibleDialog=function(i,s,a,n,r,o,l,h,p,c){this.title=r,this.closeButtonLabel=l,this.focusedElementBeforeModal=s,this.escapeHook=c,this.baseId=t(i).attr("id")||Math.floor(1e9Math.random()).toString();var u=this,d=i;if(this.modal=d,d.css({width:h||"50%"}),d.addClass("able-modal-dialog"),!p){var f=t("<button>",{class:"modalCloseButton",title:u.closeButtonLabel,"aria-label":u.closeButtonLabel}).text("X");f.keydown((function(t){32===t.which&&u.hide()})).click((function(){u.hide()}));var m=t("<h1></h1>");m.attr("id","modalTitle-"+this.baseId),m.css("text-align","center"),m.text(r),this.titleH1=m,d.attr({"aria-labelledby":"modalTitle-"+this.baseId}),d.prepend(m),d.prepend(f)}d.attr({"aria-hidden":"true",role:a}),n&&d.attr("aria-modal","true"),d.keydown((function(i){if(27===i.which)u.escapeHook?u.escapeHook(i,this):(u.hide(),i.preventDefault());else if(9===i.which){var s=d.find("").filter(e).filter(":visible");if(0===s.length)return;var a=t(":focus"),n=s.index(a);i.shiftKey?0===n&&(s.get(s.length-1).focus(),i.preventDefault()):n===s.length-1&&(s.get(0).focus(),i.preventDefault())}i.stopPropagation()})),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden")},AccessibleDialog.prototype.show=function(){if(!this.overlay){var i=t("<div></div>").attr({class:"able-modal-overlay",tabindex:"-1"});this.overlay=i,t("body").append(i),i.on("mousedown.accessibleModal",(function(t){t.preventDefault()}))}t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").attr("aria-hidden","true"),this.overlay.css("display","block"),this.modal.css("display","block"),this.modal.attr({"aria-hidden":"false",tabindex:"-1"}),0===this.modal.find("").filter(e).filter(":visible").length&&this.focusedElementBeforeModal.blur();var s=this;setTimeout((function(){s.modal.find("button.modalCloseButton").first().focus()}),300)},AccessibleDialog.prototype.hide=function(){this.overlay&&this.overlay.css("display","none"),this.modal.css("display","none"),this.modal.attr("aria-hidden","true"),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden"),this.focusedElementBeforeModal.focus()},AccessibleDialog.prototype.getInputs=function(){return!!this.modal&&this.modal.find("input")}}(jQuery),function(t){AblePlayer.prototype.getNextHeadingLevel=function(e){var i,s,a,n;return e.parents().each((function(){if(i=t(this).children(":header"),s=i.length)return a=i.eq(s-1).prop("tagName"),!1})),void 0===a?n=1:(n=parseInt(a[1]),(n+=1)>6&&(n=6)),n},AblePlayer.prototype.countProperties=function(t){var e,i;for(i in e=0,t)t.hasOwnProperty(i)&&++e;return e},AblePlayer.prototype.formatSecondsAsColonTime=function(t,e){var i,s,a,n,r,o,l;if(e)if(2===(n=t.toString().split(".")).length){if((r=n[1]).length<3)for(o=3-r.length,l=1;l<=o;l++)r+="0"}else r="000";return i=Math.floor(t/3600),s=Math.floor(t/60)%60,(a=Math.floor(t%60))<10&&(a="0"+a),i>0?(s<10&&(s="0"+s),e?i+":"+s+":"+a+"."+r:i+":"+s+":"+a):e?(i<1?i="00":i<10&&(i="0"+i),s<1?s="00":s<10&&(s="0"+s),i+":"+s+":"+a+"."+r):s+":"+a},AblePlayer.prototype.getSecondsFromColonTime=function(t){var e;return 3===(e=t.split(":")).length?3600parseInt(e[0])+60parseInt(e[1])+parseFloat(e[2]):2===e.length?60parseInt(e[0])+parseFloat(e[1]):1===e.length?parseFloat(e[0]):void 0},AblePlayer.prototype.capitalizeFirstLetter=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},AblePlayer.prototype.roundDown=function(t,e){return Number(Math.floor(t+"e"+e)+"e-"+e)},AblePlayer.prototype.hasAttr=function(t,e){var i=t.attr(e);return void 0!==i&&!1!==i},Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t}}(jQuery),function(t){AblePlayer.prototype.initDescription=function(){var e,i;return i=(e=new t.Deferred).promise(),"audio"===this.mediaType&&e.resolve(),this.descFile=this.$sources.first().attr("data-desc-src"),void 0!==this.descFile||this.youTubeDescId||this.vimeoDescId?this.hasOpenDesc=!0:this.hasOpenDesc=!1,this.hasOpenDesc&&this.hasClosedDesc?this.prefDescMethod?this.descMethod=this.prefDescMethod:this.descMethod="video":this.hasOpenDesc?this.descMethod="video":this.hasClosedDesc?this.descMethod="text":this.descMethod=null,this.descMethod?1===this.prefDesc?this.descOn=!0:0===this.prefDesc?this.descOn=!1:1===this.defaultStateDescriptions?this.descOn=!0:this.descOn=!1:this.descOn=!1,void 0===this.$descDiv&&this.hasClosedDesc&&"text"===this.descMethod&&this.injectTextDescriptionArea(),this.descOn?("video"===this.descMethod&&(this.usingDescribedVersion()||this.swapDescription()),this.hasClosedDesc&&(this.prefDescVisible?void 0!==this.$descDiv&&(this.$descDiv.show(),this.$descDiv.removeClass("able-clipped")):void 0!==this.$descDiv&&this.$descDiv.addClass("able-clipped"))):"video"===this.descMethod?this.usingDescribedVersion()&&this.swapDescription():"text"===this.descMethod&&void 0!==this.$descDiv&&(this.$descDiv.hide(),this.$descDiv.removeClass("able-clipped")),e.resolve(),i},AblePlayer.prototype.usingDescribedVersion=function(){return"youtube"===this.player?this.activeYouTubeId===this.youTubeDescId:"vimeo"===this.player?this.activeVimeoId===this.vimeoDescId:this.$sources.first().attr("data-desc-src")===this.$sources.first().attr("src")},AblePlayer.prototype.initSpeech=function(e){var i=this;if(null===this.speechEnabled)if(void 0!==this.synth&&this.synth.cancel(),window.speechSynthesis)if(this.synth=window.speechSynthesis,"init"===e)t(document).on("click",(function(){var e=new SpeechSynthesisUtterance("Hi!");e.volume=0,e.rate=10,i.synth.speak(e),e.onstart=function(e){t(document).off("click")},e.onend=function(t){i.getBrowserVoices(),i.descVoices.length&&(i.speechEnabled=!0)}})),this.getBrowserVoices(),this.descVoices.length&&(this.speechEnabled=!0);else{var s=new SpeechSynthesisUtterance("Hi!");s.volume=0,s.rate=10,i.synth.speak(s),s.onstart=function(e){t(document).off("click")},s.onend=function(t){i.getBrowserVoices(),i.descVoices.length&&(i.speechEnabled=!0)}}else this.speechEnabled=!1},AblePlayer.prototype.getBrowserVoices=function(){var t,e,i,s;if(s=this.captionLang?this.captionLang.substring(0,2).toLowerCase():this.lang.substring(0,2).toLowerCase(),this.descVoices=[],t=this.synth.getVoices(),e=this.getDescriptionLangs(),t.length>0){this.descVoices=[];for(var a=0;a<t.length;a++)(i=t[a].lang.substring(0,2).toLowerCase())===s&&-1!==e.indexOf(i)&&this.descVoices.push(t[a]);this.descVoices.length||(this.descVoices=t)}return!1},AblePlayer.prototype.getDescriptionLangs=function(){var t=[];if(this.tracks)for(var e=0;e<this.tracks.length;e++)"descriptions"===this.tracks[e].kind&&t.push(this.tracks[e].language.substring(0,2).toLowerCase());return t},AblePlayer.prototype.setDescriptionVoice=function(){var t,e,i,s,a;if(e=void 0!==this.getCookie().voices?this.getPrefDescVoice():null,this.getBrowserVoices(),this.rebuildDescPrefsForm(),s=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,this.synth&&(t=this.synth.getVoices()).length>0){if(e){a=!1;for(var n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()&&t[n].name===e){i=t[n].name,a=!0;break}}if(!a)for(n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()){i=t[n].name;break}if(this.prefDescVoice=i,this.prefDescVoiceLang=s,this.$voiceSelectField){this.$voiceSelectField.find('option[value="'+this.prefDescVoice+'"]');this.$voiceSelectField.val(this.prefDescVoice)}this.updateCookie("voice")}},AblePlayer.prototype.swapDescription=function(){var e,i,s,a;if(e=this,this.loadingMedia=!1,this.$focusedElement=t(":focus"),this.elapsed>0?this.swapTime=this.elapsed:this.swapTime=0,this.duration>0&&(this.prevDuration=this.duration),this.okToPlay||(this.okToPlay=this.playing),this.descOn?this.showAlert(this.tt.alertDescribedVersion):this.showAlert(this.tt.alertNonDescribedVersion),"html5"===this.player){if(this.swappingSrc=!0,this.paused=!0,this.usingDescribedVersion())for(i=0;i<this.$sources.length;i++)s=this.$sources[i].getAttribute("data-orig-src"),this.$sources[i].getAttribute("type"),s&&this.$sources[i].setAttribute("src",s);else for(i=0;i<this.$sources.length;i++)s=this.$sources[i].getAttribute("src"),a=this.$sources[i].getAttribute("data-desc-src"),this.$sources[i].getAttribute("type"),a&&(this.$sources[i].setAttribute("src",a),this.$sources[i].setAttribute("data-orig-src",s));if(this.recreatingPlayer)return;this.playerCreated&&(this.deletePlayer("swap-desc-html"),this.recreatePlayer().then((function(){e.loadingMedia||(e.media.load(),e.loadingMedia=!0)})))}else if("youtube"===this.player){if(this.usingDescribedVersion()?this.activeYouTubeId=this.youTubeId:this.activeYouTubeId=this.youTubeDescId,void 0!==this.youTubePlayer&&(e.swappingSrc=!0,e.playing?e.youTubePlayer.loadVideoById(e.activeYouTubeId,e.swapTime):e.youTubePlayer.cueVideoById(e.activeYouTubeId,e.swapTime)),this.playerCreated&&this.deletePlayer("swap-desc-youtube"),this.recreatingPlayer)return;this.recreatePlayer().then((function(){}))}else if("vimeo"===this.player){if(this.usingDescribedVersion()?(this.activeVimeoId=this.vimeoId,this.showAlert(this.tt.alertNonDescribedVersion)):(this.activeVimeoId=this.vimeoDescId,this.showAlert(this.tt.alertDescribedVersion)),this.playerCreated&&this.deletePlayer("swap-desc-vimeo"),this.recreatingPlayer)return;this.recreatePlayer().then((function(){e.vimeoPlayer.loadVideo(e.activeVimeoId).then((function(){e.playing?e.vimeoPlayer.setCurrentTime(e.swapTime):e.vimeoPlayer.pause()}))}))}},AblePlayer.prototype.showDescription=function(t){if(this.hasClosedDesc&&!this.swappingSrc&&this.descOn&&"video"!==this.descMethod){var e,i,s,a;0;var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e.push(flattenComponentForDescription(t.children[i]));return e.join("")};for(e=this.selectedDescriptions?this.selectedDescriptions.cues:this.descriptions.length>=1?this.descriptions[0].cues:[],i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s?this.currentDescription!==s&&(this.$status.removeAttr("aria-live"),a=flattenComponentForDescription(e[s].components),"screenreader"===this.descReader?this.$descDiv.html(a):this.speechEnabled?(this.announceDescriptionText("description",a),this.prefDescVisible&&this.$descDiv.html(a).removeAttr("aria-live aria-atomic")):this.$descDiv.html(a),this.prefDescPause&&"text"===this.descMethod&&(this.pauseMedia(),this.pausedForDescription=!0),this.currentDescription=s):(this.$descDiv.html(""),this.currentDescription=-1,this.$status.attr("aria-live","polite"))}},AblePlayer.prototype.syncSpeechToPlaybackRate=function(t){var e;.5===t?e=.7:.75===t?e=.8:1===t?e=1:1.25===t?e=1.1:1.5===t?e=1.2:1.75===t?e=1.5:2===t?e=2:2.25===t?e=2.5:t>=2.5&&(e=3),this.prefDescRate=e},AblePlayer.prototype.announceDescriptionText=function(e,i){var s,a,n,r,o,l,h,p,c;s=this;if(this.speechEnabled||this.initSpeech("desc"),"sample"===e?(a=t("#"+this.mediaId+"_prefDescVoice").val(),o=t("#"+this.mediaId+"_prefDescPitch").val(),l=t("#"+this.mediaId+"_prefDescRate").val(),h=t("#"+this.mediaId+"_prefDescVolume").val()):(a=this.prefDescVoice,o=this.prefDescPitch,l=this.prefDescRate,h=this.prefDescVolume),this.descVoices&&this.descVoices.length>0){if(a)for(n=0;n<this.descVoices.length;n++)if(this.descVoices[n].name==a){r=this.descVoices[n];break}void 0===r&&(r=this.descVoices[0]),(p=new SpeechSynthesisUtterance).voice=r,p.voiceURI="native",p.volume=h,p.rate=l,p.pitch=o,p.text=i,p.lang=this.lang,p.onstart=function(t){},p.onpause=function(t){},p.onend=function(t){this.speakingDescription=!1,c=t.elapsedTime,c>100?(t.elapsedTime/1e3).toFixed(2):t.elapsedTime.toFixed(2),this.debug,"description"===e&&s.prefDescPause&&s.pausedForDescription&&(s.playMedia(),this.pausedForDescription=!1)},p.onerror=function(t){},this.synth.paused&&this.synth.resume(),this.synth.speak(p),this.speakingDescription=!0}}}(jQuery),jQuery,AblePlayer.prototype.isIOS=function(t){var e;return e=navigator.userAgent.toLowerCase(),!!/ipad|iphone|ipod/.exec(e)&&(void 0===t||-1!==e.indexOf("os "+t))},AblePlayer.prototype.browserSupportsVolume=function(){var t;return!this.isIOS()&&((t=new Audio).volume=.9,.9===t.volume)},AblePlayer.prototype.nativeFullscreenSupported=function(){return document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullscreenEnabled||document.msFullscreenEnabled},function(t){AblePlayer.prototype.seekTo=function(t){var e,i=this;(this.seekFromTime=this.media.currentTime,this.seekToTime=t,this.seeking=!0,this.liveUpdatePending=!0,this.speakingDescription&&this.synth.cancel(),"html5"===this.player)?(this.startTime=t,(e=this.media.seekable).length>0&&this.startTime>=e.start(0)&&this.startTime<=e.end(0)&&(this.media.currentTime=this.startTime,this.seekStatus="complete",this.hasSignLanguage&&this.signVideo&&(this.signVideo.currentTime=this.startTime))):"youtube"===this.player?(this.youTubePlayer.seekTo(t,!0),t>0&&void 0!==this.$posterImg&&this.$posterImg.hide()):"vimeo"===this.player&&this.vimeoPlayer.setCurrentTime(t).then((function(){i.elapsed=t,i.refreshControls("timeline")}));this.refreshControls("timeline")},AblePlayer.prototype.getMediaTimes=function(e,i){var s,a,n,r;return r={},a=(s=new t.Deferred).promise(),n=this,void 0!==e&&void 0!==i?(r.duration=e,r.elapsed=i,s.resolve(r)):this.getDuration().then((function(t){r.duration=n.roundDown(t,6),n.getElapsed().then((function(t){r.elapsed=n.roundDown(t,6),s.resolve(r)}))})),a},AblePlayer.prototype.getDuration=function(){var e,i,s;(i=(e=new t.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getDuration().then((function(t){void 0===t||isNaN(t)||-1===t?e.resolve(0):e.resolve(t)})):e.resolve(0):("html5"===this.player?s=this.media.duration:"youtube"===this.player&&(s=this.youTubePlayerReady?this.duration>0?this.duration:this.youTubePlayer.getDuration():0),void 0===s||isNaN(s)||-1===s?e.resolve(0):e.resolve(s));return i},AblePlayer.prototype.getElapsed=function(){var e,i,s;(i=(e=new t.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getCurrentTime().then((function(t){void 0===t||isNaN(t)||-1===t?e.resolve(0):e.resolve(t)})):e.resolve(0):("html5"===this.player?s=this.media.currentTime:"youtube"===this.player&&(s=this.youTubePlayerReady?this.youTubePlayer.getCurrentTime():0),void 0===s||isNaN(s)||-1===s?e.resolve(0):e.resolve(s));return i},AblePlayer.prototype.getPlayerState=function(){var e,i,s;if(i=(e=new t.Deferred).promise(),s=this,"html5"===this.player)this.media.ended?e.resolve("ended"):this.media.paused?e.resolve("paused"):4!==this.media.readyState?e.resolve("buffering"):e.resolve("playing");else if("youtube"===this.player&&this.youTubePlayerReady){var a=this.youTubePlayer.getPlayerState();-1===a||5===a?e.resolve("stopped"):0===a?e.resolve("ended"):1===a?e.resolve("playing"):2===a?e.resolve("paused"):3===a&&e.resolve("buffering")}else"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.getPaused().then((function(t){t?e.resolve("paused"):s.vimeoPlayer.getEnded().then((function(t){t?e.resolve("ended"):e.resolve("playing")}))}));return i},AblePlayer.prototype.isPlaybackRateSupported=function(){return"html5"===this.player?!!this.media.playbackRate:"youtube"===this.player?!!this.youTubePlayerReady&&this.youTubePlayer.getAvailablePlaybackRates().length>1:"vimeo"===this.player?this.vimeoSupportsPlaybackRateChange:void 0},AblePlayer.prototype.setPlaybackRate=function(t){t=Math.max(.5,t),this.hasClosedDesc&&"text"===this.descMethod&&this.syncSpeechToPlaybackRate(t),"html5"===this.player?this.media.playbackRate=t:"youtube"===this.player?this.youTubePlayer.setPlaybackRate(t):"vimeo"===this.player&&this.vimeoPlayer.setPlaybackRate(t),this.hasSignLanguage&&this.signVideo&&(this.signVideo.playbackRate=t),this.playbackRate=t,this.$speed.text(this.tt.speed+": "+t.toFixed(2).toString()+"x")},AblePlayer.prototype.getPlaybackRate=function(){return"html5"===this.player?this.media.playbackRate:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getPlaybackRate():void 0},AblePlayer.prototype.isPaused=function(){if("vimeo"===this.player)return!this.playing;this.getPlayerState().then((function(t){return"paused"===t||"stopped"===t||"ended"===t}))},AblePlayer.prototype.pauseMedia=function(){"html5"===this.player?(this.media.pause(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.pause(!0)):"youtube"===this.player?this.youTubePlayer.pauseVideo():"vimeo"===this.player&&this.vimeoPlayer.pause()},AblePlayer.prototype.playMedia=function(){"html5"===this.player?(this.media.play(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.play(!0)):"youtube"===this.player?(this.youTubePlayer.playVideo(),void 0!==this.$posterImg&&this.$posterImg.hide(),this.stoppingYouTube=!1):"vimeo"===this.player&&this.vimeoPlayer.play(),this.startedPlaying=!0,this.hideControls&&(this.hidingControls=!0,this.invokeHideControlsTimeout())},AblePlayer.prototype.fadeControls=function(t){"out"==t?(this.$mediaContainer.height()+this.$playerDiv.height(),this.$playerDiv.fadeTo(2e3,0,(function(){}))):"in"==t&&this.$playerDiv.fadeTo(100,1)},AblePlayer.prototype.invokeHideControlsTimeout=function(){var t=this;this.hideControlsTimeout=window.setTimeout((function(){void 0!==t.playing&&!0===t.playing&&t.hideControls&&(t.fadeControls("out"),t.controlsHidden=!0)}),5e3),this.hideControlsTimeoutStatus="active"},AblePlayer.prototype.refreshControls=function(e,i,s){var a,n,r,o,l,h,p,c,u,d,f,m,g,v,y;e="init",a=this,this.swappingSrc&&this.playing||void 0!==this.duration&&(this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.chapterElapsed=this.getChapterElapsed()),!1===this.useFixedSeekInterval&&!1===this.seekIntervalCalculated&&this.duration>0&&this.setSeekInterval(),this.seekBar&&(this.useChapterTimes?(n=this.selectedChapters.cues.length-1,this.selectedChapters.cues[n]==this.currentChapter&&this.currentChapter.end!==this.duration?this.seekBar.setDuration(this.duration-this.currentChapter.start):this.seekBar.setDuration(this.chapterDuration)):void 0===this.duration||isNaN(this.duration)||-1===this.duration||this.seekBar.setDuration(this.duration),this.seekBar.tracking||(o=this.liveUpdatePending||this.seekBar.seekHead.is(t(document.activeElement)),this.liveUpdatePending=!1,this.useChapterTimes?this.seekBar.setPosition(this.chapterElapsed,o):this.seekBar.setPosition(this.elapsed,o)),r=this.seekBar.tracking?this.seekBar.lastTrackPosition:this.useChapterTimes?this.chapterElapsed:this.elapsed),void 0!==this.$durationContainer&&(this.useChapterTimes?this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.chapterDuration)):this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.duration))),void 0!==this.$elapsedTimeContainer&&this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(r)),"legacy"===this.skin&&this.seekBar&&(p=0,u=(c=this.seekBar.wrapperDiv.parent().prev("div.able-left-controls")).next("div.able-right-controls"),c.children().each((function(){"button"==t(this).attr("role")&&(p+=t(this).outerWidth(!0))})),u.children().each((function(){"button"==t(this).attr("role")&&(p+=t(this).outerWidth(!0))})),d=this.fullscreen?t(window).width()-p:this.$ableWrapper.width()-p-5,Math.abs(d-this.seekBar.getWidth())>5&&this.seekBar.setWidth(d)),"html5"===this.player?this.media.buffered.length>0&&(m=this.media.buffered.end(0),this.useChapterTimes?(m>this.chapterDuration&&(m=this.chapterDuration),this.seekBar&&this.seekBar.setBuffered(m/this.chapterDuration)):this.seekBar&&(isNaN(m)||this.seekBar.setBuffered(m/i))):"youtube"===this.player?this.seekBar&&this.youTubePlayerReady&&this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()):this.player,this.$descButton&&(this.descOn?(this.$descButton.removeClass("buttonOff").attr("aria-label",this.tt.turnOffDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOffDescriptions)):(this.$descButton.addClass("buttonOff").attr("aria-label",this.tt.turnOnDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOnDescriptions))),this.$ccButton&&(f=this.captions.length,this.captionsOn?(this.$ccButton.removeClass("buttonOff"),this.$ccButton.attr("aria-pressed","true"),1===f&&(this.$ccButton.attr("aria-label",this.tt.hideCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.hideCaptions))):(this.$ccButton.addClass("buttonOff"),this.$ccButton.attr("aria-pressed","false"),1===f&&(this.$ccButton.attr("aria-label",this.tt.showCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.showCaptions))),f>1&&(this.$ccButton.attr({"aria-label":this.tt.captions,"aria-haspopup":"true","aria-controls":this.mediaId+"-captions-menu"}),this.$ccButton.find("span.able-clipped").text(this.tt.captions))),this.$fullscreenButton&&(this.fullscreen?(this.$fullscreenButton.attr("aria-label",this.tt.exitFullscreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-expand").addClass("icon-fullscreen-collapse"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullscreen)):"svg"===this.iconType?(y=this.getSvgData("fullscreen-collapse"),this.$fullscreenButton.find("svg").attr("viewBox",y[0]),this.$fullscreenButton.find("path").attr("d",y[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullscreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenCollapseButtonImg)):(this.$fullscreenButton.attr("aria-label",this.tt.enterFullscreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-collapse").addClass("icon-fullscreen-expand"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullscreen)):"svg"===this.iconType?(y=this.getSvgData("fullscreen-expand"),this.$fullscreenButton.find("svg").attr("viewBox",y[0]),this.$fullscreenButton.find("path").attr("d",y[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullscreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenExpandButtonImg))),void 0!==this.$bigPlayButton&&void 0!==this.seekBar&&(this.paused&&!this.seekBar.tracking?(this.hideBigPlayButton||(this.$bigPlayButton.show(),this.$bigPlayButton.attr("aria-hidden","false")),this.fullscreen?(this.$bigPlayButton.width(t(window).width()),this.$bigPlayButton.height(t(window).height())):(this.$bigPlayButton.width(this.$mediaContainer.width()),this.$bigPlayButton.height(this.$mediaContainer.height()))):(this.$bigPlayButton.hide(),this.$bigPlayButton.attr("aria-hidden","true"))),this.transcriptType&&(1===this.prefAutoScrollTranscript?(this.autoScrollTranscript=!0,this.$autoScrollTranscriptCheckbox.prop("checked",!0)):(this.autoScrollTranscript=!1,this.$autoScrollTranscriptCheckbox.prop("checked",!1)),this.autoScrollTranscript&&this.currentHighlight&&(g=Math.floor(this.$transcriptDiv.scrollTop()+t(this.currentHighlight).position().top-this.$transcriptDiv.height()/2+t(this.currentHighlight).height()/2))!==Math.floor(this.$transcriptDiv.scrollTop())&&(this.scrollingTranscript=!0,this.movingHighlight&&(this.$transcriptDiv.scrollTop(g),this.movingHighlight=!1))),this.$chaptersButton&&this.$chaptersButton.attr({"aria-label":this.tt.chapters,"aria-haspopup":"true","aria-controls":this.mediaId+"-chapters-menu"}),l={stopped:this.tt.statusStopped,paused:this.tt.statusPaused,playing:this.tt.statusPlaying,buffering:this.tt.statusBuffering,ended:this.tt.statusEnd},this.stoppingYouTube?(this.$status.text()!==this.tt.statusStopped&&this.$status.text(this.tt.statusStopped),this.$playpauseButton.find("span").first().hasClass("icon-pause")&&("font"===this.iconType?(this.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):"svg"===this.iconType?(y=this.getSvgData("play"),this.$playpauseButton.find("svg").attr("viewBox",y[0]),this.$playpauseButton.find("path").attr("d",y[1]),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):this.$playpauseButton.find("img").attr("src",this.playButtonImg))):void 0!==this.$status&&void 0!==this.seekBar&&this.getPlayerState().then((function(t){a.$status.text()===l[t]||a.seekBar.tracking?(a.statusDebounceStart=null,a.debouncingStatus=!1,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.swappingSrc?a.debouncingStatus||(a.statusMessageThreshold=2e3):a.debouncingStatus||(a.statusMessageThreshold=250),h=(new Date).getTime(),a.statusDebounceStart?h-a.statusDebounceStart>a.statusMessageThreshold&&(a.$status.text(l[t]),a.statusDebounceStart=null,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.statusDebounceStart=h,a.debouncingStatus=!0,a.statusTimeout=setTimeout((function(){a.debouncingStatus=!1,a.refreshControls(e)}),a.statusMessageThreshold))),a.seekBar.tracking||a.stoppingYouTube||("paused"===t||"stopped"===t||"ended"===t?(a.$playpauseButton.attr("aria-label",a.tt.play),"font"===a.iconType?(a.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),a.$playpauseButton.find("span.able-clipped").text(a.tt.play)):"svg"===a.iconType?(y=a.getSvgData("play"),a.$playpauseButton.find("svg").attr("viewBox",y[0]),a.$playpauseButton.find("path").attr("d",y[1]),a.$playpauseButton.find("span.able-clipped").text(a.tt.play)):a.$playpauseButton.find("img").attr("src",a.playButtonImg)):(a.$playpauseButton.attr("aria-label",a.tt.pause),"font"===a.iconType?(a.$playpauseButton.find("span").first().removeClass("icon-play").addClass("icon-pause"),a.$playpauseButton.find("span.able-clipped").text(a.tt.pause)):"svg"===a.iconType?(y=a.getSvgData("pause"),a.$playpauseButton.find("svg").attr("viewBox",y[0]),a.$playpauseButton.find("path").attr("d",y[1]),a.$playpauseButton.find("span.able-clipped").text(a.tt.pause)):a.$playpauseButton.find("img").attr("src",a.pauseButtonImg)))})),this.fullscreen||(v=this.$statusBarDiv.height(),this.$statusBarDiv.find("span.able-speed").height()>v+5?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):(this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1),this.$statusBarDiv.width()<300?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1))))},AblePlayer.prototype.getHiddenWidth=function(t){var e=t.clone().appendTo("body"),i=e.outerWidth();return e.remove(),i},AblePlayer.prototype.handlePlay=function(t){this.paused?(this.okToPlay=!0,this.playMedia(),this.synth.paused&&this.synth.resume()):(this.okToPlay=!1,this.pauseMedia(),this.speakingDescription&&this.synth.pause()),null===this.speechEnabled&&this.initSpeech("play")},AblePlayer.prototype.handleRestart=function(){this.speakingDescription&&this.synth.cancel(),this.seekTo(0)},AblePlayer.prototype.handlePrevTrack=function(){0===this.playlistIndex?this.playlistIndex=this.$playlist.length-1:this.playlistIndex--,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleNextTrack=function(){this.playlistIndex===this.$playlist.length-1?this.playlistIndex=0:this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleRewind=function(){var t;t=this.elapsed-this.seekInterval,this.useChapterTimes?t<this.currentChapter.start&&(t=this.currentChapter.start):t<0&&(t=0),this.seekTo(t)},AblePlayer.prototype.handleFastForward=function(){var t,e;e=this.chapters.length-1,t=this.elapsed+this.seekInterval,this.useChapterTimes?this.chapters[e]==this.currentChapter?(t>this.duration||t>this.currentChapter.end||this.duration%t<this.seekInterval)&&(t=Math.min(this.duration,this.currentChapter.end)):t>this.currentChapter.end&&(t=this.currentChapter.end):t>this.duration&&(t=this.duration),this.seekTo(t)},AblePlayer.prototype.handleRateIncrease=function(){this.changeRate(1)},AblePlayer.prototype.handleRateDecrease=function(){this.changeRate(-1)},AblePlayer.prototype.changeRate=function(t){var e,i,s,a;"html5"===this.player?this.setPlaybackRate(this.getPlaybackRate()+.25t):"youtube"===this.player?this.youTubePlayerReady&&(e=this.youTubePlayer.getAvailablePlaybackRates(),i=this.getPlaybackRate(),-1===(s=e.indexOf(i))||(s+=t)<e.length&&s>=0&&this.setPlaybackRate(e[s])):"vimeo"===this.player&&(1===t?a=this.vimeoPlaybackRate+.5<=2?this.vimeoPlaybackRate+.5:2:-1===t&&(a=this.vimeoPlaybackRate-.5>=.5?this.vimeoPlaybackRate-.5:.5),this.setPlaybackRate(a))},AblePlayer.prototype.handleCaptionToggle=function(){var t,e=this;if(this.hidingPopup)return this.hidingPopup=!1,!1;if(1===(t=this.captions.length?this.captions:[]).length){if(!0===this.captionsOn)this.captionsOn=!1,this.prefCaptions=0,this.$ccButton.attr("aria-pressed","false"),this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.unloadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.disableTextTrack():this.$captionsWrapper.hide();else{this.captionsOn=!0,this.prefCaptions=1,this.$ccButton.attr("aria-pressed","true"),this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.loadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then((function(t){})).catch((function(t){t.name})):this.$captionsWrapper.show();for(var i=0;i<t.length;i++)!0===t[i].def&&(this.selectedCaptions=t[i]);this.selectedCaptions=this.captions[0],this.descriptions.length>=0&&(this.selectedDescriptions=this.descriptions[0])}this.refreshControls("captions")}else this.captionsPopup&&this.captionsPopup.is(":visible")?(this.captionsPopup.hide(),this.hidingPopup=!1,this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)):(this.closePopups(),this.captionsPopup&&(this.captionsPopup.show(),this.$ccButton.attr("aria-expanded","true"),setTimeout((function(){e.captionsPopup.css("top",e.$ccButton.position().top-e.captionsPopup.outerHeight()),e.captionsPopup.css("left",e.$ccButton.position().left),e.captionsPopup.find("li").removeClass("able-focus"),e.captionsPopup.find("li").first().focus().addClass("able-focus")}),50)))},AblePlayer.prototype.waitThenFocus=function(t,e){setTimeout((function(){t.focus()}),null==e?50:e)},AblePlayer.prototype.handleChapters=function(){if(this.hidingPopup)return this.hidingPopup=!1,!1;this.chaptersPopup.is(":visible")?(this.chaptersPopup.hide(),this.hidingPopup=!1,this.$chaptersButton.attr("aria-expanded","false").focus()):(this.closePopups(),this.chaptersPopup.show(),this.$chaptersButton.attr("aria-expanded","true"),this.chaptersPopup.css("top",this.$chaptersButton.position().top-this.chaptersPopup.outerHeight()),this.chaptersPopup.css("left",this.$chaptersButton.position().left),this.chaptersPopup.find("li").removeClass("able-focus"),this.chaptersPopup.find('li[aria-checked="true"]').length?this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass("able-focus"):this.chaptersPopup.find("li").first().addClass("able-focus").attr("aria-checked","true").focus())},AblePlayer.prototype.handleDescriptionToggle=function(){this.descOn=!this.descOn,this.prefDesc=+this.descOn,this.updateCookie("prefDesc"),void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")||this.$descDiv.hide()),this.initDescription(),this.refreshControls("descriptions")},AblePlayer.prototype.handlePrefsClick=function(t){var e,i,s,a;if(e=this,null===this.speechEnabled&&this.initSpeech("prefs"),this.hidingPopup)return this.hidingPopup=!1,!1;this.prefsPopup.is(":visible")?(this.prefsPopup.hide(),this.$prefsButton.attr("aria-expanded","false"),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.showingPrefsDialog||this.$prefsButton.focus(),setTimeout((function(){e.hidingPopup=!1}),100)):(this.closePopups(),this.prefsPopup.show(),this.$prefsButton.attr("aria-expanded","true"),this.$prefsButton.focus(),setTimeout((function(){i=e.$prefsButton.position(),s=e.$ableDiv.width()-5,a=s-e.prefsPopup.width(),e.prefsPopup.css("top",i.top-e.prefsPopup.outerHeight()),e.prefsPopup.css("left",a),e.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","0"),e.prefsPopup.find("li").first().focus().addClass("able-focus")}),50))},AblePlayer.prototype.handleHelpClick=function(){this.setFullscreen(!1),this.helpDialog.show()},AblePlayer.prototype.handleTranscriptToggle=function(){var t=this;this.$transcriptDiv.is(":visible")?(this.$transcriptArea.hide(),this.$transcriptButton.addClass("buttonOff").attr("aria-label",this.tt.showTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.showTranscript),this.prefTranscript=0,this.$transcriptButton.focus().addClass("able-focus"),setTimeout((function(){t.closingTranscript=!1}),100)):(this.positionDraggableWindow("transcript"),this.$transcriptArea.show(),this.$transcriptPopup.hide(),this.$transcriptButton.removeClass("buttonOff").attr("aria-label",this.tt.hideTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.hideTranscript),this.prefTranscript=1,this.focusNotClick=!0,this.$transcriptArea.find("button").first().focus(),setTimeout((function(){t.focusNotClick=!1}),100)),this.updateCookie("prefTranscript")},AblePlayer.prototype.handleSignToggle=function(){var t=this;this.$signWindow.is(":visible")?(this.$signWindow.hide(),this.$signButton.addClass("buttonOff").attr("aria-label",this.tt.showSign),this.$signButton.find("span.able-clipped").text(this.tt.showSign),this.prefSign=0,this.$signButton.focus().addClass("able-focus"),setTimeout((function(){t.closingSign=!1}),100)):(this.positionDraggableWindow("sign"),this.$signWindow.show(),this.$signPopup.hide(),this.$signButton.removeClass("buttonOff").attr("aria-label",this.tt.hideSign),this.$signButton.find("span.able-clipped").text(this.tt.hideSign),this.prefSign=1,this.focusNotClick=!0,this.$signWindow.find("button").first().focus(),setTimeout((function(){t.focusNotClick=!1}),100)),this.updateCookie("prefSign")},AblePlayer.prototype.isFullscreen=function(){return this.nativeFullscreenSupported()?!!(document.fullscreenElement||document.webkitFullscreenElement||document.webkitCurrentFullscreenElement||document.mozFullscreenElement||document.msFullscreenElement):!!this.modalFullscreenActive},AblePlayer.prototype.setFullscreen=function(e){if(this.fullscreen!=e){var i=this,s=this.$ableWrapper,a=s[0];if(this.nativeFullscreenSupported())e?(a.requestFullscreen?a.requestFullscreen():a.webkitRequestFullscreen?a.webkitRequestFullscreen():a.mozRequestFullscreen?a.mozRequestFullscreen():a.msRequestFullscreen&&a.msRequestFullscreen(),this.fullscreen=!0):(this.restoringAfterFullscreen=!0,document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullscreen?document.webkitCancelFullscreen():document.mozCancelFullscreen?document.mozCancelFullscreen():document.msExitFullscreen&&document.msExitFullscreen(),this.fullscreen=!1);else{if(!this.fullscreenDialog){var n=t("<div>"),r=t("<p>",{class:"able-screenreader-alert"}).text(this.tt.fullscreen);n.append(r),this.fullscreenDialog=new AccessibleDialog(n,this.$fullscreenButton,"dialog",!0,"Fullscreen video player",r,this.tt.exitFullscreen,"100%",!0,(function(){i.handleFullscreenToggle()})),t("body").append(n)}var o=this.paused;if(e){this.modalFullscreenActive=!0,this.fullscreenDialog.show(),this.$modalFullscreenPlaceholder=t('<div class="placeholder">'),this.$modalFullscreenPlaceholder.insertAfter(s),s.appendTo(this.fullscreenDialog.modal),s===this.$ableColumnLeft&&s.width("100%");t(window).height(),this.$playerDiv.height();void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")||this.$descDiv.height())}else this.modalFullscreenActive=!1,s===this.$ableColumnLeft&&s.width("50%"),s.insertAfter(this.$modalFullscreenPlaceholder),this.$modalFullscreenPlaceholder.remove(),this.fullscreenDialog.hide();!o&&this.paused&&this.playMedia()}t(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange",(function(t){i.fullscreen?i.clickedFullscreenButton||(i.fullscreen=!1,i.restoringAfterFullscreen=!0):i.restoringAfterFullscreen=!0,i.resizePlayer(),i.refreshControls("fullscreen"),setTimeout((function(){i.clickedFullscreenButton=!1,i.restoringAfterFullscreen=!1}),1e3)}))}},AblePlayer.prototype.handleFullscreenToggle=function(){var t=this.paused;this.setFullscreen(!this.fullscreen),t?this.pauseMedia():t||this.playMedia(),this.fullscreen?(this.hideControls=!0,this.playing&&(this.fadeControls("out"),this.controlsHidden=!0)):(this.hideControls=this.hideControlsOriginal,this.hideControls||(this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear")))},AblePlayer.prototype.handleTranscriptLockToggle=function(t){this.autoScrollTranscript=t,this.prefAutoScrollTranscript=+t,this.updateCookie("prefAutoScrollTranscript"),this.refreshControls("transcript")},AblePlayer.prototype.showTooltip=function(t){t.is(":animated")?t.stop(!0,!0).show():t.stop().show()},AblePlayer.prototype.showAlert=function(t,e){var i,s,a,n;"transcript"===e?(i=this.$transcriptAlert,s=this.$transcriptArea):"sign"===e?(i=this.$signAlert,s=this.$signWindow):i="screenreader"===e?this.$srAlertBox:this.$alertBox,i.text(t).show(),"transcript"==e||"sign"===e?(a=s.width()>i.width()?s.width()/2-i.width()/2:10,"sign"===e?n=s.height()/32:"transcript"===e&&(n=this.$transcriptToolbar.height()+30),i.css({top:n+"px",left:a+"px"})):"screenreader"!==e&&i.css({left:this.$playerDiv.width()/2-i.width()/2}),"screenreader"!==e&&setTimeout((function(){i.fadeOut(300)}),3e3)},AblePlayer.prototype.showedAlert=function(t){return"transcript"===t?!!this.showedTranscriptAlert:"sign"===t&&!!this.showedSignAlert},AblePlayer.prototype.resizePlayer=function(e,i){var s,a,n,r,o;"audio"!==this.mediaType&&(void 0!==e&&void 0!==i?(this.aspectRatio=i/e,this.playerWidth?(a=this.playerWidth,this.playerHeight?n=this.playerHeight:(n=Math.round(athis.aspectRatio),this.playerHeight=n)):(a="html5"===this.player?t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio))):this.fullscreen?(this.$ableWrapper.addClass("fullscreen"),a=t(window).width(),n=t(window).height()-this.$playerDiv.outerHeight()-5,this.positionCaptions("overlay")):(this.$ableWrapper.removeClass("fullscreen"),a="html5"===this.player?this.playerWidth?this.playerWidth:t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio),this.positionCaptions(this.prefCaptionsPosition)),this.debug,"youtube"===this.player||"vimeo"===this.player?(r=this.$ableWrapper.find("iframe"),"youtube"===this.player&&this.youTubePlayer?this.youTubePlayer.setSize(a,n):r.attr({width:a,height:n}),this.playerWidth&&this.playerHeight&&(this.fullscreen?r.css({"max-width":"","max-height":""}):r.css({"max-width":this.playerWidth+"px","max-height":this.playerHeight+"px"}))):"html5"===this.player&&(this.fullscreen?(this.$media.attr({width:a,height:n}),this.$ableWrapper.css({width:a,height:n})):(this.$media.removeAttr("width height"),this.$ableWrapper.css({width:a+"px",height:"auto"}))),void 0!==this.$captionsDiv&&(s=parseInt(this.prefCaptionsSize,10),this.fullscreen?s=s/100+"vw":s+="%",this.$captionsDiv.css({"font-size":s})),"video"===this.mediaType&&(o=2Math.round(this.$mediaContainer.height()/3),this.$alertBox.css({top:o+"px"})),this.refreshControls())},AblePlayer.prototype.retrieveOffscreenWindow=function(t,e,i){var s,a,n,r,o,l,h,p;"transcript"==t?s=this.$transcriptArea:"sign"==t&&(s=this.$signWindow),l=s.width(),p=s.height(),n=(a=s.position()).top,o=(r=a.left)+l,h=n+p,n<0&&(n=10,s.css("top",n)),r<0&&(r=10,s.css("left",r)),o>e&&(r=e-20-l,s.css("left",r)),h>i&&(n=i-10-p,s.css("top",n))},AblePlayer.prototype.getHighestZIndex=function(){var e,i;return e=0,t("body ").not(".able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area").each((function(){i=t(this).css("z-index"),Number.isInteger(+i)&&parseInt(i)>e&&(e=parseInt(i))})),e},AblePlayer.prototype.updateZIndex=function(t){var e,i,s,a,n,r;if(e=8e3,i=7e3,this.getHighestZIndex(),void 0===this.$transcriptArea||void 0===this.$signWindow)return void 0!==this.$transcriptArea?(s=parseInt(this.$transcriptArea.css("z-index")))>i&&this.$transcriptArea.css("z-index",i):void 0!==this.$signWindow&&(a=parseInt(this.$signWindow.css("z-index")))>e&&this.$signWindow.css("z-index",e),!1;if((s=parseInt(this.$transcriptArea.css("z-index")))===(a=parseInt(this.$signWindow.css("z-index"))))n=e,r=i;else if(s>a){if("transcript"===t)return!1;n=s,r=a}else{if("sign"===t)return!1;n=a,r=s}"transcript"===t?(this.$transcriptArea.css("z-index",n),this.$signWindow.css("z-index",r)):"sign"===t&&(this.$signWindow.css("z-index",n),this.$transcriptArea.css("z-index",r))},AblePlayer.prototype.syncTrackLanguages=function(t,e){var i,s,a,n,r;for(i=0;i<this.captions.length;i++)this.captions[i].language===e&&(s=this.captions[i]);for(i=0;i<this.chapters.length;i++)this.chapters[i].language===e&&(n=this.chapters[i]);for(i=0;i<this.descriptions.length;i++)this.descriptions[i].language===e&&(a=this.descriptions[i]);for(i=0;i<this.meta.length;i++)this.meta[i].language===e&&(r=this.meta[i]);if(this.transcriptLang=e,"init"===t||"captions"===t?(this.captionLang=e,this.selectedCaptions=s,this.selectedChapters=n,this.selectedDescriptions=a,this.selectedMeta=r,this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a,this.updateChaptersList()):"transcript"===t&&(this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a),this.selectedDescriptions&&(this.setDescriptionVoice(),this.$sampleDescDiv&&this.sampleText))for(i=0;i<this.sampleText.length;i++)this.sampleText[i].lang===this.selectedDescriptions.language&&(this.currentSampleText=this.sampleText[i].text,this.$sampleDescDiv.html(this.currentSampleText));this.updateTranscript()}}(jQuery),function(t){AblePlayer.prototype.updateCaption=function(t){this.usingYouTubeCaptions||this.usingVimeoCaptions||void 0===this.$captionsWrapper||(this.captionsOn?(this.$captionsWrapper.show(),void 0!==t&&this.showCaptions(t)):this.$captionsWrapper&&(this.$captionsWrapper.hide(),this.prefCaptions=0))},AblePlayer.prototype.updateCaptionsMenu=function(t){this.captionsPopup.find("li").attr("aria-checked","false"),void 0===t?this.captionsPopup.find("li").last().attr("aria-checked","true"):this.captionsPopup.find("li[lang="+t+"]").attr("aria-checked","true")},AblePlayer.prototype.getCaptionClickFunction=function(t){var e=this;return function(){e.selectedCaptions=t,e.captionLang=t.language,e.currentCaption=-1,e.usingYouTubeCaptions?e.captionsOn?e.youTubePlayer.getOptions("captions")&&e.startedPlaying?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):e.captionLangPending=e.captionLang:e.youTubePlayer.getOptions("captions")?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):(e.youTubePlayer.loadModule("captions"),e.captionLangPending=e.captionLang):e.usingVimeoCaptions?e.vimeoPlayer.enableTextTrack(e.captionLang).then((function(t){})).catch((function(t){t.name})):(e.syncTrackLanguages("captions",e.captionLang),e.swappingSrc||(e.updateCaption(e.elapsed),e.showDescription(e.elapsed))),e.captionsOn=!0,e.hidingPopup=!0,e.captionsPopup.hide(),e.$ccButton.attr("aria-expanded","false"),"audio"===e.mediaType&&e.$captionsContainer.removeClass("captions-off"),setTimeout((function(){e.hidingPopup=!1}),100),e.updateCaptionsMenu(e.captionLang),e.waitThenFocus(e.$ccButton),e.prefCaptions=1,e.updateCookie("prefCaptions"),e.refreshControls("captions")}},AblePlayer.prototype.getCaptionOffFunction=function(){var t=this;return function(){"youtube"==t.player?t.youTubePlayer.unloadModule("captions"):t.usingVimeoCaptions&&t.vimeoPlayer.disableTextTrack(),t.captionsOn=!1,t.currentCaption=-1,"audio"===t.mediaType&&t.$captionsContainer.addClass("captions-off"),t.hidingPopup=!0,t.captionsPopup.hide(),t.$ccButton.attr("aria-expanded","false"),setTimeout((function(){t.hidingPopup=!1}),100),t.updateCaptionsMenu(),t.waitThenFocus(t.$ccButton),t.prefCaptions=0,t.updateCookie("prefCaptions"),this.swappingSrc||(t.refreshControls("captions"),t.updateCaption())}},AblePlayer.prototype.showCaptions=function(t){var e,i,s,a;for(a=this.selectedCaptions.cues.length?this.selectedCaptions.cues:this.captions.length>=1?this.captions[0].cues:[],e=0;e<a.length;e++)if(a[e].start<=t&&a[e].end>t){i=e;break}void 0!==i?this.currentCaption!==i&&(s=this.flattenCueForCaption(a[i]).replace(/\n/g,"<br>"),this.$captionsDiv.html(s),this.currentCaption=i,0===s.length?this.$captionsDiv.css("display","none"):this.$captionsDiv.css("display","inline-block")):(this.$captionsDiv.html("").css("display","none"),this.currentCaption=-1)},AblePlayer.prototype.flattenCueForCaption=function(t){var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("("+t.value+")"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else if("i"===t.type){for(i.push("<em>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</em>")}else if("b"===t.type){for(i.push("<strong>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</strong>")}else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")};if(void 0!==t.components)for(var i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")},AblePlayer.prototype.getCaptionsOptions=function(t){var e=[];switch(t){case"prefCaptionsFont":e[0]=["serif",this.tt.serif],e[1]=["sans-serif",this.tt.sans],e[2]=["cursive",this.tt.cursive],e[3]=["fantasy",this.tt.fantasy],e[4]=["monospace",this.tt.monospace];break;case"prefCaptionsColor":case"prefCaptionsBGColor":e[0]=["white",this.tt.white],e[1]=["yellow",this.tt.yellow],e[2]=["green",this.tt.green],e[3]=["cyan",this.tt.cyan],e[4]=["blue",this.tt.blue],e[5]=["magenta",this.tt.magenta],e[6]=["red",this.tt.red],e[7]=["black",this.tt.black];break;case"prefCaptionsSize":e[0]="75%",e[1]="100%",e[2]="125%",e[3]="150%",e[4]="200%";break;case"prefCaptionsOpacity":e[0]="0%",e[1]="25%",e[2]="50%",e[3]="75%",e[4]="100%";break;case"prefCaptionsStyle":e[0]=this.tt.captionsStylePopOn,e[1]=this.tt.captionsStyleRollUp;break;case"prefCaptionsPosition":e[0]="overlay",e[1]="below"}return e},AblePlayer.prototype.translatePrefs=function(t,e,i){if("youtube"==i&&"size"===t)switch(e){case"75%":return-1;case"100%":return 0;case"125%":return 1;case"150%":return 2;case"200%":return 3}return!1},AblePlayer.prototype.stylizeCaptions=function(e,i){var s,a,n;void 0!==e&&("prefCaptionsPosition"==i?this.positionCaptions():void 0!==i?("prefCaptionsFont"===i?s="font-family":"prefCaptionsSize"===i?s="font-size":"prefCaptionsColor"===i?s="color":"prefCaptionsBGColor"===i?s="background-color":"prefCaptionsOpacity"===i&&(s="opacity"),a="prefCaptionsOpacity"===i?parseFloat(t("#"+this.mediaId+"_"+i).val())/100:t("#"+this.mediaId+"_"+i).val(),e.css(s,a)):(n=parseFloat(this.prefCaptionsOpacity)/100,e.css({"font-family":this.prefCaptionsFont,color:this.prefCaptionsColor,"background-color":this.prefCaptionsBGColor,opacity:n}),e===this.$captionsDiv&&void 0!==this.$captionsDiv&&this.$captionsDiv.css({"font-size":this.prefCaptionsSize}),"below"===this.prefCaptionsPosition?void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"}):"overlay"===this.prefCaptionsPosition&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":"transparent",opacity:""}),this.positionCaptions()))},AblePlayer.prototype.positionCaptions=function(t){void 0===t&&(t=this.prefCaptionsPosition),void 0!==this.$captionsWrapper&&("below"==t?(this.$captionsWrapper.removeClass("able-captions-overlay").addClass("able-captions-below"),this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"})):(this.$captionsWrapper.removeClass("able-captions-below").addClass("able-captions-overlay"),this.$captionsWrapper.css({"background-color":"transparent",opacity:""})))}}(jQuery),function(t){AblePlayer.prototype.populateChaptersDiv=function(){var e,i,s;t("#"+this.chaptersDivLocation)&&(this.$chaptersDiv=t("#"+this.chaptersDivLocation),this.$chaptersDiv.addClass("able-chapters-div"),this.$chaptersDiv.empty(),this.chaptersTitle&&(e="h"+this.getNextHeadingLevel(this.$chaptersDiv).toString(),i=this.mediaId+"-chapters-heading",s=t("<"+e+">",{class:"able-chapters-heading",id:i}).text(this.chaptersTitle),this.$chaptersDiv.append(s)),this.$chaptersNav=t("<nav>"),this.chaptersTitle?this.$chaptersNav.attr("aria-labelledby",i):this.$chaptersNav.attr("aria-label",this.tt.chapters),this.$chaptersDiv.append(this.$chaptersNav),this.updateChaptersList())},AblePlayer.prototype.updateChaptersList=function(){var e,i,s,a,n,r,o,l,h,p;if(e=this,!this.$chaptersNav)return!1;if(void 0===this.useChapterTimes&&("chapter"===this.seekbarScope&&this.selectedChapters.cues.length?this.useChapterTimes=!0:this.useChapterTimes=!1),(i=this.useChapterTimes?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[]).length>0){for(p=t("<ul>"),s=0;s<i.length;s++)a=s,n=t("<li></li>"),l=function(i){return function(){e.seekTrigger="chapter",h=t(this).closest("li"),p=t(this).closest("ul").find("li"),p.index(h),p.removeClass("able-current-chapter").children("button").removeAttr("aria-current"),h.addClass("able-current-chapter").children("button").attr("aria-current","true"),e.updateChapter(i),e.seekTo(i)}},(r=t("<button>",{type:"button",val:a}).text(this.flattenCueForCaption(i[a]))).on("click",l(i[a].start)),r.on("focus",(function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).closest("li").addClass("able-focus")})),n.on("hover",(function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).addClass("able-focus")})),n.on("mouseleave",(function(){t(this).removeClass("able-focus")})),r.on("blur",(function(){t(this).closest("li").removeClass("able-focus")})),n.append(r),p.append(n),this.defaultChapter===i[a].id&&(r.attr("aria-current","true").parent("li").addClass("able-current-chapter"),this.currentChapter=i[a],o=!0);o||(this.currentChapter=i[0],p.find("button").first().attr("aria-current","true").parent("li").addClass("able-current-chapter")),this.$chaptersNav.html(p)}return!1},AblePlayer.prototype.seekToChapter=function(t){for(var e=0;e<this.selectedChapters.cues.length;){if(this.selectedChapters.cues[e].id==t){this.seekTo(this.selectedChapters.cues[e].start),this.updateChapter(this.selectedChapters.cues[e].start);break}e++}},AblePlayer.prototype.updateChapter=function(t){if(void 0!==this.selectedChapters){var e,i,s;for(e=this.selectedChapters.cues,i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s&&this.currentChapter!==e[s]&&(this.currentChapter=e[s],this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.seekIntervalCalculated=!1),void 0!==this.$chaptersDiv&&(this.$chaptersDiv.find("ul").find("li").removeClass("able-current-chapter").children("button").removeAttr("aria-current"),this.$chaptersDiv.find("ul").find("li").eq(s).addClass("able-current-chapter").children("button").attr("aria-current","true")))}},AblePlayer.prototype.getChapterDuration=function(){var t,e;return void 0===this.currentChapter||void 0===this.duration?0:(t=this.selectedChapters.cues.length-1,this.selectedChapters.cues[t]==this.currentChapter&&this.currentChapter.end!==this.duration?(e=this.duration,this.currentChapter.end=this.duration):e=this.currentChapter.end,e-this.currentChapter.start)},AblePlayer.prototype.getChapterElapsed=function(){return void 0===this.currentChapter?0:this.elapsed>this.currentChapter.start?this.elapsed-this.currentChapter.start:0},AblePlayer.prototype.convertChapterTimeToVideoTime=function(t){if(void 0!==this.currentChapter){var e=this.currentChapter.start+t;return e>this.currentChapter.end?this.currentChapter.end:e}return t},AblePlayer.prototype.getChapterClickFunction=function(t){var e=this;return function(){e.seekTrigger="chapter",e.seekTo(t),e.hidingPopup=!0,e.chaptersPopup.hide(),setTimeout((function(){e.hidingPopup=!1}),100),e.$chaptersButton.focus()}}}(jQuery),function(t){AblePlayer.prototype.updateMeta=function(t){this.hasMeta&&("text"===this.metaType?(this.$metaDiv.show(),this.showMeta(t||this.elapsed)):this.showMeta(t||this.elapsed))},AblePlayer.prototype.showMeta=function(e){var i,s,a,n,r,o,l,h,p;for(i=[],n=this.meta.length>=1?this.meta:[],s=0;s<n.length;s++)if(n[s].start<=e&&n[s].end>e){a=s;break}if(void 0!==a){if(this.currentMeta!==a)if("text"===this.metaType)this.$metaDiv.html(this.flattenCueForMeta(n[a]).replace(/\n/g,"<br>"));else if("selector"===this.metaType){for(r=this.flattenCueForMeta(n[a]).split("\n"),o=0;o<r.length;o++)"pause"===(l=t.trim(r[o])).toLowerCase().trim()?(this.hideBigPlayButton=!0,this.pauseMedia()):"focus:"==l.toLowerCase().substring(0,6)?(p=l.substring(6).trim(),t(p).length&&t(p).focus()):t(l).length&&(this.currentMeta=a,void 0===(h=parseInt(t(l).attr("data-duration")))||isNaN(h)?t(l).show():t(l).show().delay(h).fadeOut(),this.visibleSelectors.push(l),i.push(l));if(this.visibleSelectors&&this.visibleSelectors.length&&this.visibleSelectors.length!==i.length)for(o=this.visibleSelectors.length-1;o>=0;o--)-1==t.inArray(this.visibleSelectors[o],i)&&(t(this.visibleSelectors[o]).hide(),this.visibleSelectors.splice(o,1))}}else{if(void 0!==this.$metaDiv&&this.$metaDiv.html(""),this.visibleSelectors&&this.visibleSelectors.length){for(o=0;o<this.visibleSelectors.length;o++)t(this.visibleSelectors[o]).hide();this.visibleSelectors=[]}this.currentMeta=-1}},AblePlayer.prototype.flattenCueForMeta=function(t){for(var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("["+t.value+"]"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")},i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")}}(jQuery),function(t){AblePlayer.prototype.setupTranscript=function(){var e=new t.Deferred,i=e.promise();return this.usingYouTubeCaptions||this.usingVimeoCaptions?(this.transcriptType=null,e.resolve()):(this.transcriptType||this.captions.length&&(this.transcriptType="popup"),this.transcriptType?"popup"===this.transcriptType||"external"===this.transcriptType?(this.injectTranscriptArea(),e.resolve()):"manual"===this.transcriptType&&(this.setupManualTranscript(),e.resolve()):e.resolve()),i},AblePlayer.prototype.injectTranscriptArea=function(){var e,i,s,a,n;if(this.$transcriptArea=t("<div>",{class:"able-transcript-area",role:"dialog","aria-label":this.tt.transcriptTitle}),this.$transcriptToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$transcriptDiv=t("<div>",{class:"able-transcript"}),this.$autoScrollTranscriptCheckbox=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),e=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$transcriptToolbar.append(e,this.$autoScrollTranscriptCheckbox),this.captions.length>1)for(i=t("<div>",{class:"transcript-language-select-wrapper"}),s=t("<label>",{for:"transcript-language-select-"+this.mediaId}).text(this.tt.language),this.$transcriptLanguageSelect=t("<select>",{id:"transcript-language-select-"+this.mediaId}),a=0;a<this.captions.length;a++)n=t("<option></option>",{value:this.captions[a].language,lang:this.captions[a].language}).text(this.captions[a].label),this.captions[a].def&&n.prop("selected",!0),this.$transcriptLanguageSelect.append(n);i&&(i.append(s,this.$transcriptLanguageSelect),this.$transcriptToolbar.append(i)),this.$transcriptArea.append(this.$transcriptToolbar,this.$transcriptDiv),this.transcriptDivLocation?t("#"+this.transcriptDivLocation).append(this.$transcriptArea):this.$ableWrapper.append(this.$transcriptArea),this.transcriptDivLocation||(this.initDragDrop("transcript"),1===this.prefTranscript&&this.positionDraggableWindow("transcript",this.getDefaultWidth("transcript"))),this.prefTranscript||this.transcriptDivLocation||this.$transcriptArea.hide()},AblePlayer.prototype.addTranscriptAreaEvents=function(){var t=this;this.$autoScrollTranscriptCheckbox.click((function(){t.handleTranscriptLockToggle(t.$autoScrollTranscriptCheckbox.prop("checked"))})),this.$transcriptDiv.on("mousewheel DOMMouseScroll click scroll",(function(e){t.scrollingTranscript||(t.autoScrollTranscript=!1,t.refreshControls("transcript")),t.scrollingTranscript=!1})),void 0!==this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.on("click mousedown",(function(t){t.stopPropagation()})),this.$transcriptLanguageSelect.on("change",(function(){var e=t.$transcriptLanguageSelect.val();t.syncTrackLanguages("transcript",e)})))},AblePlayer.prototype.transcriptSrcHasRequiredParts=function(){return!!(t("#"+this.transcriptSrc).length&&(this.$transcriptArea=t("#"+this.transcriptSrc),this.$transcriptArea.find(".able-window-toolbar").length&&(this.$transcriptToolbar=this.$transcriptArea.find(".able-window-toolbar").eq(0),this.$transcriptArea.find(".able-transcript").length&&(this.$transcriptDiv=this.$transcriptArea.find(".able-transcript").eq(0),this.$transcriptArea.find(".able-transcript-seekpoint").length))))&&(this.$transcriptSeekpoints=this.$transcriptArea.find(".able-transcript-seekpoint"),!0)},AblePlayer.prototype.setupManualTranscript=function(){var e,i;e=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),i=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$autoScrollTranscriptCheckbox=e,this.$transcriptToolbar.append(i,this.$autoScrollTranscriptCheckbox)},AblePlayer.prototype.updateTranscript=function(){if(this.transcriptType&&(!this.playerCreated||this.$transcriptArea)){if("external"===this.transcriptType||"popup"===this.transcriptType){var e,i,s;if(this.transcriptLang?i=this.transcriptCaptions.cues:this.transcriptCaptions?(this.transcriptLang=this.transcriptCaptions.language,i=this.transcriptCaptions.cues):this.selectedCaptions&&(this.transcriptLang=this.captionLang,i=this.selectedCaptions.cues),this.transcriptChapters)e=this.transcriptChapters.cues;else if(this.chapters.length>0){if(this.transcriptLang)for(var a=0;a<this.chapters.length;a++)this.chapters[a].language===this.transcriptLang&&(e=this.chapters[a].cues);void 0===e&&(e=this.chapters[0].cues||[])}if(this.transcriptDescriptions)s=this.transcriptDescriptions.cues;else if(this.descriptions.length>0){if(this.transcriptLang)for(a=0;a<this.descriptions.length;a++)this.descriptions[a].language===this.transcriptLang&&(s=this.descriptions[a].cues);s||(s=this.descriptions[0].cues||[])}var n=this.generateTranscript(e||[],i||[],s||[]);this.$transcriptDiv.html(n),this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.find("option:selected").prop("selected",!1),this.$transcriptLanguageSelect.find("option[lang="+this.transcriptLang+"]").prop("selected",!0))}var r=this;1===this.prefTabbable&&this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"),this.$transcriptArea.length>0&&this.$transcriptArea.find("span.able-transcript-seekpoint").click((function(e){r.seekTrigger="transcript";var i=parseFloat(t(this).attr("data-start"));i+=.01,r.seekingFromTranscript?r.seekingFromTranscript=!1:(r.seekingFromTranscript=!0,r.seekTo(i))}))}},AblePlayer.prototype.highlightTranscript=function(e){if(this.transcriptType){var i,s,a,n=this;e=parseFloat(e),this.$transcriptArea.find("span.able-transcript-seekpoint").each((function(){if(i=parseFloat(t(this).attr("data-start")),s=parseFloat(t(this).attr("data-end")),a=!!t(this).parent().hasClass("able-transcript-chapter-heading"),e>=i&&e<=s&&!a)return t(this).hasClass("able-highlight")||(n.$transcriptArea.find(".able-highlight").removeClass("able-highlight"),t(this).addClass("able-highlight"),n.movingHighlight=!0),!1})),n.currentHighlight=n.$transcriptArea.find(".able-highlight"),0===n.currentHighlight.length&&(n.currentHighlight=null)}},AblePlayer.prototype.generateTranscript=function(e,i,s){var a,n=this,r=t('<div class="able-transcript-container"></div>');if(r.attr("lang",this.transcriptLang),a=void 0!==this.transcriptTitle?this.transcriptTitle:this.lyricsMode?this.tt.lyricsTitle:this.tt.transcriptTitle,!this.transcriptDivLocation){var o=this.playerHeadingLevel,l=(o+=1)+1;if(o<=6)var h="h"+o.toString();else h="div";var p=t("<"+h+">");p.addClass("able-transcript-heading"),o>6&&p.attr({role:"heading","aria-level":o}),p.text(a),p.attr("lang",this.lang),r.append(p)}for(var c=0,u=0,d=0,addChapter=function(e,i){if(l<=6)var s="h"+l.toString();else s="div";var a=t("<"+s+">",{class:"able-transcript-chapter-heading"});l>6&&a.attr({role:"heading","aria-level":l});for(var flattenComponentForChapter=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForChapter(t.children[i]));return e},n=t("<span>",{class:"able-transcript-seekpoint"}),r=0;r<i.components.children.length;r++)for(var o=flattenComponentForChapter(i.components.children[r]),h=0;h<o.length;h++)n.append(o[h]);n.attr("data-start",i.start.toString()),n.attr("data-end",i.end.toString()),a.append(n),e.append(a)},addDescription=function(e,i){var s=t("<div>",{class:"able-transcript-desc"}),a=t("<span>",{class:"able-hidden"});a.attr("lang",n.lang),a.text(n.tt.prefHeadingDescription+": "),s.append(a);for(var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForDescription(t.children[i]));return e},r=t("<span>",{class:"able-transcript-seekpoint"}),o=0;o<i.components.children.length;o++)for(var l=flattenComponentForDescription(i.components.children[o]),h=0;h<l.length;h++)r.append(l[h]);r.attr("data-start",i.start.toString()),r.attr("data-end",i.end.toString()),s.append(r),e.append(s)},addCaption=function(e,i){for(var s=t("<span>",{class:"able-transcript-seekpoint able-transcript-caption"}),flattenComponentForCaption=function(e){var i=[],s=0,flattenString=function(t){var e;s++;var i=[];if(""===t)return i;var a=t.indexOf("["),n=t.indexOf("]"),r=t.indexOf("("),o=t.indexOf(")"),l=-1!==a&&-1!==n,h=-1!==r&&-1!==o;if(h||l){if(s>1)var p="<br/>";else p="";var c=p+'<span class="able-unspoken">',u="</span>";h&&l&&(a<r?h=!1:l=!1)}return h?(e=t.substring(0,r),e+=c,e+=t.substring(r,o+1),e+=u,e+=flattenString(t.substring(o+1)),i.push(e)):l?(e=t.substring(0,a),e+=c,e+=t.substring(a,n+1),e+=u,e+=flattenString(t.substring(n+1)),i.push(e)):i.push(t),i};if("string"===e.type)i=i.concat(flattenString(e.value));else if("v"===e.type){var a=t("<span>",{class:"able-unspoken"});e.value=e.value.replace(/^title="|\"$/g,""),a.text("("+e.value+")"),i.push(a);for(var n=0;n<e.children.length;n++)for(var r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)i.push(r[o])}else if("b"===e.type||"i"===e.type){if("b"===e.type)var l=t("<strong>");else if("i"===e.type)l=t("<em>");for(n=0;n<e.children.length;n++)for(r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)l.append(r[o]);"b"!==e.type&&"i"!=e.type||i.push(l," ")}else for(n=0;n<e.children.length;n++)i=i.concat(flattenComponentForCaption(e.children[n]));return i},a=0;a<i.components.children.length;a++)for(var r=flattenComponentForCaption(i.components.children[a]),o=0;o<r.length;o++){var l=r[o];"string"==typeof l&&(n.lyricsMode?l=l.replace(/\n/g,"<br>")+"<br>":l+=" "),s.append(l)}s.attr("data-start",i.start.toString()),s.attr("data-end",i.end.toString()),e.append(s),e.append(" \n")};c<e.length||d<s.length||u<i.length;){if(c<e.length&&d<s.length&&u<i.length)var f=Math.min(e[c].start,s[d].start,i[u].start);else if(c<e.length&&d<s.length)f=Math.min(e[c].start,s[d].start);else if(c<e.length&&u<i.length)f=Math.min(e[c].start,i[u].start);else if(d<s.length&&u<i.length)f=Math.min(s[d].start,i[u].start);else f=null;null!==f?void 0!==e[c]&&e[c].start===f?(addChapter(r,e[c]),c+=1):void 0!==s[d]&&s[d].start===f?(addDescription(r,s[d]),d+=1):(addCaption(r,i[u]),u+=1):c<e.length?(addChapter(r,e[c]),c+=1):d<s.length?(addDescription(r,s[d]),d+=1):u<i.length&&(addCaption(r,i[u]),u+=1)}var m=r.children(),g=0;return m.each((function(){t(this).hasClass("able-transcript-caption")?(-1===t(this).text().indexOf("[")&&-1===t(this).text().indexOf("(")||g>0&&(r.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),g=0),t(this).addClass("able-block-temp"),g++):g>0&&(r.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),g=0)})),r}}(jQuery),function(t){AblePlayer.prototype.showSearchResults=function(){var e=this;if(this.searchDiv&&this.searchString){var i=DOMPurify.sanitize(this.searchString);if(t("#"+this.SearchDiv)){var s="<p>"+this.tt.resultsSummary1+" ";s+='<span id="able-search-term-echo">'+i+"</span>",s+="</p>";var a=this.searchFor(i,this.searchIgnoreCaps);if(a.length>0){var n=t("<p>",{class:"able-search-results-summary"}),r=this.tt.resultsSummary2;r+=" <strong>"+a.length+"</strong> ",r+=this.tt.resultsSummary3+" ",r+=this.tt.resultsSummary4,n.html(r);for(var o=t("<ul>"),l=0;l<a.length;l++){var h="aria-search-result-"+l,p=t("<li>",{}),c=this.secondsToTime(a[l].start),u=this.tt.searchButtonLabel+" "+c.title,d=t("<button>",{class:"able-search-results-time","data-start":a[l].start,title:u,"aria-label":u,"aria-describedby":h});d.text(c.value),d.on("click",(function(i){e.seekTrigger="search";var s=parseFloat(t(this).attr("data-start"));s+=.01,e.seeking=!0,e.seekTo(s)}));var f=t("<span>",{class:"able-search-result-text",id:h});f.html("..."+a[l].caption+"..."),p.append(d,f),o.append(p)}t("#"+this.searchDiv).html(s).append(n,o)}else{var m=t("<p>").text(this.tt.noResultsFound);t("#"+this.searchDiv).html(s).append(m)}}}},AblePlayer.prototype.searchFor=function(e,i){var s,a,n,r,o,l,h;n=[];var p=e.split(" ");if(this.captions.length>0){for(l=0;l<this.captions.length;l++)this.captions[l].language===this.searchLang&&(s=this.searchLang,a=this.captions[l].cues);if(a.length>0)for(o=0,l=0;l<a.length;l++)if(-1!==t.inArray(a[l].components.children[0].type,["string","i","b","u","v","c"])){r=this.flattenCueForCaption(a[l]);var c=i?r.toLowerCase():r;for(h=0;h<p.length;h++){var u=i?p[h].toLowerCase():p[h];if(-1!==c.indexOf(u)){n[o]=[],n[o].start=a[l].start,n[o].lang=s,n[o].caption=this.highlightSearchTerm(p,r),o++;break}}}}return n},AblePlayer.prototype.highlightSearchTerm=function(t,e){return t.forEach((function(t){var i=new RegExp(t,"gi");e=e.replace(i,'<span class="able-search-term">$&</span>')})),e},AblePlayer.prototype.secondsToTime=function(t){t=Math.floor(t);var e=parseInt(t/3600,10)%24,i=parseInt(t/60,10)%60,s=t%60,a="",n="";e>0&&(a+=e+":",n+=1==e?"1 "+this.tt.hour+" ":e+" "+this.tt.hours+" "),i<10?(a+="0"+i+":",i>0&&(n+=1==i?"1 "+this.tt.minute+" ":i+" "+this.tt.minutes+" ")):(a+=i+":",n+=i+" "+this.tt.minutes+" "),s<10?(a+="0"+s,s>0&&(n+=1==s?"1 "+this.tt.second+" ":s+" "+this.tt.seconds+" ")):(a+=s,n+=s+" "+this.tt.seconds+" ");var r=[];return r.value=a,r.title=n,r}}(jQuery),function(t){AblePlayer.prototype.onMediaUpdateTime=function(t,e){var i=this;this.getMediaTimes(t,e).then((function(t){i.duration=t.duration,i.elapsed=t.elapsed,i.duration>0&&(1===i.prefHighlight&&i.highlightTranscript(i.elapsed),i.updateCaption(i.elapsed),i.showDescription(i.elapsed),i.updateChapter(i.elapsed),i.updateMeta(i.elapsed),i.refreshControls("timeline",i.duration,i.elapsed))}))},AblePlayer.prototype.onMediaPause=function(){this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear"),this.refreshControls("playpause")},AblePlayer.prototype.onMediaComplete=function(){this.hasPlaylist&&!this.cueingPlaylistItem&&(this.playlistIndex===this.$playlist.length-1?this.loop?(this.playlistIndex=0,this.cueingPlaylistItem=!0,this.cuePlaylistItem(0)):(this.playing=!1,this.paused=!0):(this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex))),this.refreshControls("init")},AblePlayer.prototype.onMediaNewSourceLoad=function(){var t=!1;this.cueingPlaylistItem&&(this.cueingPlaylistItem=!1),this.recreatingPlayer&&(this.recreatingPlayer=!1),this.playbackRate&&this.setPlaybackRate(this.playbackRate),this.userClickedPlaylist?this.startedPlaying&&!this.okToPlay||(this.playMedia(),t=!0):"restart"==this.seekTrigger||"chapter"==this.seekTrigger||"transcript"==this.seekTrigger||"search"==this.seekTrigger?(this.playMedia(),t=!0):this.swappingSrc?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length||this.loop)&&(this.playMedia(),t=!0):this.swapTime>0?"complete"===this.seekStatus?(this.okToPlay&&this.playMedia(),t=!0):"seeking"===this.seekStatus||(this.swapTime===this.elapsed?(this.seekStatus="complete",this.okToPlay&&this.playMedia(),t=!0):this.hasDescTracks?t=!0:this.durationsAreCloseEnough(this.duration,this.prevDuration)?(this.seekStatus="seeking",this.seekTo(this.swapTime)):t=!0):this.playing&&(this.playMedia(),t=!0):this.startedPlaying?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length||this.loop)&&(this.playMedia(),t=!0):t=!0:this.startTime>0?this.seeking?(this.seeking=!1,this.okToPlay&&this.playMedia(),t=!0):this.seekTo(this.startTime):this.defaultChapter&&void 0!==this.selectedChapters?this.seekToChapter(this.defaultChapter):(this.okToPlay&&this.playMedia(),t=!0),t&&(this.swappingSrc=!1,this.seekStatus=null,this.swapTime=0,this.seekTrigger=null,this.seekingFromTranscript=!1,this.userClickedPlaylist=!1,this.okToPlay=!1),this.refreshControls("init"),this.$focusedElement&&(this.restoreFocus(),this.$focusedElement=null)},AblePlayer.prototype.durationsAreCloseEnough=function(t,e){return Math.abs(Math.round(t)-Math.round(e))<=1},AblePlayer.prototype.restoreFocus=function(){var e;this.$focusedElement&&"button"===this.$focusedElement.attr("role")&&(e=this.$focusedElement.attr("class").split(/\s+/),t.each(e,(function(e,i){"able-button-handler-"===i.substring(0,20)&&t("div.able-controller div."+i).focus()})))},AblePlayer.prototype.addSeekbarListeners=function(){var t=this;this.seekBar.bodyDiv.on("startTracking",(function(e){t.pausedBeforeTracking=t.paused,t.pauseMedia()})).on("tracking",(function(e,i){t.highlightTranscript(i),t.updateCaption(i),t.showDescription(i),t.updateChapter(t.convertChapterTimeToVideoTime(i)),t.updateMeta(i),t.refreshControls("init")})).on("stopTracking",(function(e,i){t.useChapterTimes?t.seekTo(t.convertChapterTimeToVideoTime(i)):t.seekTo(i),t.pausedBeforeTracking||setTimeout((function(){t.playMedia()}),200)}))},AblePlayer.prototype.onClickPlayerButton=function(e){var i,s;"play"===(i=this.getButtonNameFromClass(t(e).attr("class")))?(this.clickedPlay=!0,this.handlePlay()):"restart"===i?(this.seekTrigger="restart",this.handleRestart()):"previous"===i?(this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="previous",this.buttonWithFocus="previous",this.handlePrevTrack()):"next"===i?(this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="next",this.buttonWithFocus="next",this.handleNextTrack()):"rewind"===i?(this.seekTrigger="rewind",this.handleRewind()):"forward"===i?(this.seekTrigger="forward",this.handleFastForward()):"mute"===i?this.handleMute():"volume"===i?this.handleVolumeButtonClick():"faster"===i?this.handleRateIncrease():"slower"===i?this.handleRateDecrease():"captions"===i?this.handleCaptionToggle():"chapters"===i?this.handleChapters():"descriptions"===i?this.handleDescriptionToggle():"sign"===i?this.closingSign||this.handleSignToggle():"preferences"===i?"menu"===t(e).attr("data-prefs-popup")?this.handlePrefsClick():(this.showingPrefsDialog=!0,this.closePopups(),"keyboard"===(s=t(e).attr("data-prefs-popup"))?this.keyboardPrefsDialog.show():"captions"===s?this.captionPrefsDialog.show():"descriptions"===s?this.descPrefsDialog.show():"transcript"===s&&this.transcriptPrefsDialog.show(),this.showingPrefsDialog=!1):"help"===i?this.handleHelpClick():"transcript"===i?this.closingTranscript||this.handleTranscriptToggle():"fullscreen"===i&&(this.clickedFullscreenButton=!0,this.handleFullscreenToggle())},AblePlayer.prototype.getButtonNameFromClass=function(t){var e,i;for(e=t.split(" "),i=0;i<e.length;i++)if("able-button-handler-"===e[i].substring(0,20))return e[i].substring(20);return t},AblePlayer.prototype.okToHandleKeyPress=function(){var e=AblePlayer.getActiveDOMElement();return"INPUT"!==t(e).prop("tagName")},AblePlayer.prototype.onPlayerKeyPress=function(e){var i,s;return(i=e.which)>=65&&i<=90&&(i+=32),s=t(document.activeElement),27===i&&this.$transcriptArea&&t.contains(this.$transcriptArea[0],s[0])&&!this.hidingPopup?(this.handleTranscriptToggle(),!1):!!this.okToHandleKeyPress()&&void(t(":focus").is("[contenteditable]")||t(":focus").is("input")||t(":focus").is("textarea")&&!this.stenoMode||t(":focus").is("select")||e.target.hasAttribute("contenteditable")||"INPUT"===e.target.tagName||"TEXTAREA"===e.target.tagName&&!this.stenoMode||"SELECT"===e.target.tagName||(27===i?(this.closePopups(),this.$tooltipDiv.hide(),this.seekBar.hideSliderTooltips()):32===i?"button"===s.attr("role")&&(e.preventDefault(),s.click()):112===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePlay()):115===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRestart()):109===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleMute()):118===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeButtonClick()):i>=49&&i<=57?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeKeystroke(i)):99===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleCaptionToggle()):100===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleDescriptionToggle()):102===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleFastForward()):114===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRewind()):98===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrevTrack()):110===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleNextTrack()):101===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrefsClick()):13===i&&("button"===s.attr("role")||"SPAN"===s.prop("tagName")||"LI"===s.prop("tagName"))&&s.click()))},AblePlayer.prototype.addHtml5MediaListeners=function(){var t=this;this.$media.on("emptied",(function(){})).on("loadedmetadata",(function(){t.duration=t.media.duration;Math.abs(Math.round(50.5)-Math.round(51.9))})).on("canplay",(function(){})).on("canplaythrough",(function(){t.onMediaNewSourceLoad()})).on("play",(function(){t.refreshControls("playpause")})).on("playing",(function(){t.playing=!0,t.paused=!1,t.swappingSrc=!1,t.refreshControls("playpause")})).on("ended",(function(){t.playing=!1,t.paused=!0,t.onMediaComplete()})).on("progress",(function(){t.refreshControls("timeline")})).on("waiting",(function(){})).on("durationchange",(function(){t.refreshControls("timeline")})).on("timeupdate",(function(){t.onMediaUpdateTime()})).on("pause",(function(){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist||t.swappingSrc||(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause()})).on("ratechange",(function(){})).on("volumechange",(function(){t.volume=t.getVolume()})).on("error",(function(){t.debug&&t.media.error.code}))},AblePlayer.prototype.addVimeoListeners=function(){var t=this;this.vimeoPlayer.on("loaded",(function(e){t.onMediaNewSourceLoad()})),this.vimeoPlayer.on("play",(function(e){t.playing=!0,t.startedPlaying=!0,t.paused=!1,t.refreshControls("playpause")})),this.vimeoPlayer.on("ended",(function(e){t.playing=!1,t.paused=!0,t.onMediaComplete()})),this.vimeoPlayer.on("bufferstart",(function(){})),this.vimeoPlayer.on("bufferend",(function(){})),this.vimeoPlayer.on("progress",(function(t){})),this.vimeoPlayer.on("seeking",(function(t){})),this.vimeoPlayer.on("seeked",(function(t){})),this.vimeoPlayer.on("timeupdate",(function(e){t.onMediaUpdateTime(e.duration,e.seconds)})),this.vimeoPlayer.on("pause",(function(e){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist||t.swappingSrc||(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause(),t.refreshControls("playpause")})),this.vimeoPlayer.on("playbackratechange",(function(e){t.vimeoPlaybackRate=e.playbackRate})),this.vimeoPlayer.on("texttrackchange",(function(t){})),this.vimeoPlayer.on("volumechange",(function(e){t.volume=10e.volume})),this.vimeoPlayer.on("error",(function(t){}))},AblePlayer.prototype.addEventListeners=function(){var e;if(e=this,t(window).on("resize",(function(){e.resizePlayer()})),window.MutationObserver){var i=this.$ableDiv[0];new MutationObserver((function(t){t.forEach((function(t){"attributes"===t.type&&"style"===t.attributeName&&e.$ableDiv.is(":visible")&&e.refreshControls("init")}))})).observe(i,{attributes:!0,childList:!0,characterData:!0})}void 0!==this.seekBar?this.addSeekbarListeners():setTimeout((function(){void 0!==e.seekBar&&e.addSeekbarListeners()}),2e3),this.$controllerDiv.find('div[role="button"]').on("click",(function(t){t.stopPropagation(),e.onClickPlayerButton(this)})),t(document).on("click",(function(i){if(0!==i.button)return!1;(t(".able-popup:visible").length||t(".able-volume-popup:visible"))&&e.closePopups(),"VIDEO"===i.target.tagName&&(e.clickedPlay=!0)})),this.$ableDiv.on("mousemove",(function(){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())})),t(document).keydown((function(t){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())})),this.$ableDiv.keydown((function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)})),this.stenoMode&&void 0!==this.stenoFrameContents&&this.stenoFrameContents.on("keydown",(function(t){e.onPlayerKeyPress(t)})),this.$transcriptArea&&this.$transcriptArea.on("keydown",(function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)})),this.$playlist&&this.$playlist.click((function(i){e.userClickedPlaylist||(e.userClickedPlaylist=!0,e.playlistIndex=t(this).index(),e.cuePlaylistItem(e.playlistIndex))})),this.$media.click((function(){e.handlePlay()})),"html5"===this.player?this.addHtml5MediaListeners():"vimeo"===this.player?this.addVimeoListeners():"youtube"===this.player&&setInterval((function(){e.onMediaUpdateTime()}),300)}}(jQuery),function(t){AblePlayer.prototype.initDragDrop=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f;for(i=this,"transcript"===e?(s=this.$transcriptArea,n="transcript-window",a=this.$transcriptToolbar):"sign"===e&&(s=this.$signWindow,n="sign-window",a=this.$signToolbar),a.addClass("able-draggable"),r=t("<div>",{class:"able-resizable"}),o=t("<svg>").attr({width:"100%",height:"100%",viewBox:"0 0 100 100",preserveAspectRatio:"none"}),l=1;l<=3;l++)1===l?(h="100",p="0",c="0",u="100"):2===l?(h="33",p="100",c="100",u="33"):3===l&&(h="67",p="100",c="100",u="67"),d=t("<line>").attr({x1:h,y1:p,x2:c,y2:u,"vector-effect":"non-scaling-stroke"}),o.append(d);r.html(o),f=parseInt(s.css("z-index"))+100,r.css("z-index",f),s.append(r),r.html(r.html()),a.on("mousedown mouseup touchstart touchend",(function(t){return t.stopPropagation(),"mousedown"===t.type||"touchstart"===t.type?i.windowMenuClickRegistered||(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.dragDevice="mouse",i.startDrag(e,s)):"mouseup"!==t.type&&"touchend"!==t.type||i.dragging&&"mouse"===i.dragDevice&&i.endDrag(e),!1})),r.on("mousedown mouseup touchstart touchend",(function(t){return t.stopPropagation(),"mousedown"===t.type||"touchstart"===t.type?i.windowMenuClickRegistered||(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.startResize(e,s)):"mouseup"!==t.type&&"touchend"!==t.type||i.resizing&&i.endResize(e),!1})),s.on("click",(function(){i.windowMenuClickRegistered||i.finishingDrag||i.updateZIndex(e),i.finishingDrag=!1})),this.addWindowMenu(e,s,n)},AblePlayer.prototype.addWindowMenu=function(e,i,s){var a,n,r,o,l,h,p,c,u,d,f;a=this,this.windowMenuClickRegistered=!1,this.finishingDrag=!1,(n=t('<div role="alert"></div>')).addClass("able-alert"),n.hide(),n.appendTo(this.$activeWindow),n.css({top:i.offset().top}),f=this.mediaId+"-"+s+"-menu",r=t("<button>",{type:"button",tabindex:"0","aria-label":this.tt.windowButtonLabel,"aria-haspopup":"true","aria-controls":f,"aria-expanded":"false",class:"able-button-handler-preferences"}),"font"===this.iconType?(o=t("<span>",{class:"icon-preferences","aria-hidden":"true"}),r.append(o)):(l=this.rootPath+"button-icons/"+this.toolbarIconColor+"/preferences.png",h=t("<img>",{src:l,alt:"",role:"presentation"}),r.append(h)),p=t("<span>",{class:"able-clipped"}).text(this.tt.windowButtonLabel),r.append(p),c=this.mediaId+"-"+s+"-tooltip",u=t("<div>",{class:"able-tooltip",id:c}).hide(),r.on("mouseenter focus",(function(e){var i=t(this).attr("aria-label"),s=t(this).position(),n=t(this).height(),o=(t(this).width(),{left:"",right:"0px",top:s.top-n-5+"px"}),l=AblePlayer.localGetElementById(r[0],c).text(i).css(o);a.showTooltip(l),t(this).on("mouseleave blur",(function(){AblePlayer.localGetElementById(r[0],c).text("").hide()}))})),d=this.setupPopups(s),"transcript"===e?(this.$transcriptAlert=n,this.$transcriptPopupButton=r,this.$transcriptPopup=d,this.$transcriptToolbar.prepend(n,r,u,d)):"sign"===e&&(this.$signAlert=n,this.$signPopupButton=r,this.$signPopup=d,this.$signToolbar.append(n,r,u,d)),r.on("click mousedown keydown",(function(t){return!a.focusNotClick&&(a.dragging?(a.dragKeys(e,t),!1):(t.stopPropagation(),a.windowMenuClickRegistered||a.finishingDrag||a.handleWindowButtonClick(e,t),void(a.finishingDrag=!1)))})),this.addResizeDialog(e,i)},AblePlayer.prototype.addResizeDialog=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,f,m,g,v,y,b,T,P,k,C,w,D;s=this,"transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton),r=this.mediaId+"-resize-"+e+"-width",o=this.mediaId+"-resize-"+e+"-height",l=i.width(),h=i.height(),p=l/h,c=t("<div></div>",{class:"able-resize-form"}),u=t("<div></div>"),d=t("<div></div>"),f=t("<input>",{type:"text",id:r,value:l}),m=t("<label>",{for:r}).text(this.tt.width),g=t("<div></div>"),v=t("<input>",{type:"text",id:o,value:h}),y=t("<label>",{for:o}).text(this.tt.height),"sign"===e&&(v.prop("readonly",!0),f.on("input",(function(){b=t(this).val(),T=Math.round(b/p,0),v.val(T)}))),P=t('<button class="modal-button">'+this.tt.save+"</button>"),k=t('<button class="modal-button">'+this.tt.cancel+"</button>"),P.on("click",(function(){C=t("#"+r).val(),w=t("#"+o).val(),C===l&&w===h||(s.resizeObject(e,C,w),s.updateCookie(e)),D.hide(),a.hide(),n.focus()})),k.on("click",(function(){D.hide(),a.hide(),n.focus()})),d.append(m,f),g.append(y,v),u.append(d,g),c.append(u,"<hr>",P,k),t("body").append(c),D=new AccessibleDialog(c,n,"dialog",!0,this.tt.windowResizeHeading,u,this.tt.closeButtonLabel,"20em"),"transcript"===e?this.transcriptResizeDialog=D:"sign"===e&&(this.signResizeDialog=D)},AblePlayer.prototype.handleWindowButtonClick=function(e,i){var s,a,n,r;if(s=this,this.focusNotClick)return!1;if("transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton,this.$transcriptToolbar):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton,this.$signToolbar),"keydown"===i.type)if(32===i.which||13===i.which)this.windowMenuClickRegistered=!0;else{if(27!==i.which)return!1;a.is(":visible")?a.hide("fast",(function(){s.windowMenuClickRegistered=!1,a.find("li").removeClass("able-focus").attr("tabindex","-1"),n.focus()})):"sign"===e?this.handleSignToggle():"transcript"===e&&this.handleTranscriptToggle()}else this.windowMenuClickRegistered=!0;a.is(":visible")?(a.hide(200,"",(function(){s.windowMenuClickRegistered=!1})),a.find("li").removeClass("able-focus"),n.attr("aria-expanded","false").focus()):(this.updateZIndex(e),r=n.position().top+n.outerHeight(),a.css("top",r),a.show(200,"",(function(){n.attr("aria-expanded","true"),t(this).find("li").first().focus().addClass("able-focus"),s.windowMenuClickRegistered=!1})))},AblePlayer.prototype.handleMenuChoice=function(t,e,i){var s,a,n,r,o;if(s=this,"transcript"===t?(a=this.$transcriptArea,n=this.$transcriptPopup,r=this.$transcriptPopupButton,o=this.transcriptResizeDialog):"sign"===t&&(a=this.$signWindow,n=this.$signPopup,r=this.$signPopupButton,o=this.signResizeDialog),this.$activeWindow=a,"keydown"===i.type)return 27===i.which?(n.hide("fast",(function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),r.focus()})),!1):("close"!==e&&(this.$activeWindow=a),!1);if(n.hide("fast",(function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false")})),"close"!==e&&r.focus(),"move"===e)this.$activeWindow.attr("role","application"),this.showedAlert(t)||(this.showAlert(this.tt.windowMoveAlert,t),"transcript"===t?this.showedTranscriptAlert=!0:"sign"===t&&(this.showedSignAlert=!0)),"keydown"===i.type?this.dragDevice="keyboard":this.dragDevice="mouse",this.startDrag(t,a),n.hide().parent().focus();else if("resize"==e){var l=o.getInputs();l&&(l[0].value=a.width(),l[1].value=a.height()),o.show()}else"close"==e&&("transcript"===t?(this.closingTranscript=!0,this.handleTranscriptToggle()):"sign"===t&&(this.closingSign=!0,this.handleSignToggle()))},AblePlayer.prototype.startDrag=function(e,i){var s,a,n,r,o;return s=this,this.$activeWindow||(this.$activeWindow=i),this.dragging=!0,"transcript"===e?a=this.$transcriptPopup:"sign"===e&&(a=this.$signPopup),this.showedAlert(e)||(this.showAlert(this.tt.windowMoveAlert,e),"transcript"===e?this.showedTranscriptAlert=!0:"sign"===e&&(this.showedSignAlert=!0)),a.is(":visible")&&a.hide(),this.updateZIndex(e),n=this.$activeWindow.position(),this.dragStartX=n.left,this.dragStartY=n.top,void 0===this.startMouseX?(this.dragDevice="keyboard",this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.startingDrag=!0):(this.dragDevice="mouse",this.dragOffsetX=this.startMouseX-this.dragStartX,this.dragOffsetY=this.startMouseY-this.dragStartY),this.$activeWindow.addClass("able-drag").css({position:"absolute",top:this.dragStartY+"px",left:this.dragStartX+"px"}).focus(),"mouse"===this.dragDevice?t(document).on("mousemove touchmove",(function(t){s.dragging&&(r=t.pageX-s.dragOffsetX,o=t.pageY-s.dragOffsetY,s.resetDraggedObject(r,o))})):"keyboard"===this.dragDevice&&this.$activeWindow.on("keydown",(function(t){s.dragging&&s.dragKeys(e,t)})),!1},AblePlayer.prototype.dragKeys=function(t,e){if(this.startingDrag)return this.startingDrag=!1,!1;switch(e.which){case 37:case 63234:this.dragKeyX-=10;break;case 38:case 63232:this.dragKeyY-=10;break;case 39:case 63235:this.dragKeyX+=10;break;case 40:case 63233:this.dragKeyY+=10;break;case 13:case 27:return this.endDrag(t),!1;default:return!1}return this.resetDraggedObject(this.dragKeyX,this.dragKeyY),e.preventDefault&&e.preventDefault(),!1},AblePlayer.prototype.resetDraggedObject=function(t,e){this.$activeWindow.css({left:t+"px",top:e+"px"})},AblePlayer.prototype.resizeObject=function(t,e,i){var s;this.$activeWindow.css({width:e+"px",height:i+"px"}),"transcript"===t&&(s=i-50,this.$transcriptDiv.css("height",s+"px"))},AblePlayer.prototype.endDrag=function(e){var i,s;i=this,"transcript"===e?(this.$transcriptPopup,s=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,s=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown").removeClass("able-drag"),this.$activeWindow.attr("role","dialog"),this.$activeWindow=null,"keyboard"===this.dragDevice&&s.focus(),this.dragging=!1,this.updateCookie(e),this.startMouseX=void 0,this.startMouseY=void 0,this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout((function(){i.finishingDrag=!1}),100)},AblePlayer.prototype.isCloseToCorner=function(t,e,i){var s,a,n,r,o,l;return a=(s=t.offset()).top,n=s.left,r=t.width(),o=a+t.height(),l=n+r,Math.abs(o-i)<=10&&Math.abs(l-e)<=10},AblePlayer.prototype.startResize=function(e,i){var s,a,n,r;return s=this,this.$activeWindow=i,this.resizing=!0,"transcript"===e?a=this.$transcriptPopup:"sign"===e&&(a=this.$signPopup),a.is(":visible")&&a.hide().parent().focus(),this.$activeWindow.position(),this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.dragStartWidth=this.$activeWindow.width(),this.dragStartHeight=this.$activeWindow.height(),t(document).on("mousemove touchmove",(function(t){s.resizing&&(n=s.dragStartWidth+(t.pageX-s.startMouseX),r=s.dragStartHeight+(t.pageY-s.startMouseY),s.resizeObject(e,n,r))})),!1},AblePlayer.prototype.endResize=function(e){var i;"transcript"===e?(this.$transcriptPopup,i=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,i=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown"),i.show().focus(),this.resizing=!1,this.$activeWindow.removeClass("able-resize"),this.updateCookie(e),this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout((function(){this.finishingDrag=!1}),100)}}(jQuery),function(t){AblePlayer.prototype.initSignLanguage=function(){"html5"===this.player?(this.signFile=this.$sources.first().attr("data-sign-src"),this.signFile?this.isIOS()?(this.hasSignLanguage=!1,this.debug):(this.debug,this.hasSignLanguage=!0,this.injectSignPlayerCode()):this.hasSignLanguage=!1):this.hasSignLanguage=!1},AblePlayer.prototype.injectSignPlayerCode=function(){var e,i,s,a,n;for(this.getDefaultWidth("sign"),e=this.mediaId+"-sign",this.$signVideo=t("<video>",{id:e,tabindex:"-1"}),this.signVideo=this.$signVideo[0],i=0;i<this.$sources.length;i++){if(s=this.$sources[i].getAttribute("data-sign-src"),a=this.$sources[i].getAttribute("type"),!s){this.hasSignLanguage=!1;break}n=t("<source>",{src:s,type:a}),this.$signVideo.append(n)}this.$signWindow=t("<div>",{class:"able-sign-window",role:"dialog","aria-label":this.tt.sign}),this.$signToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$signWindow.append(this.$signToolbar,this.$signVideo),this.$ableWrapper.append(this.$signWindow),this.initDragDrop("sign"),1===this.prefSign?this.positionDraggableWindow("sign",this.getDefaultWidth("sign")):this.$signWindow.hide()}}(jQuery),function(){var t={ab:{name:"Abkhaz",nativeName:"аҧсуа"},aa:{name:"Afar",nativeName:"Afaraf"},af:{name:"Afrikaans",nativeName:"Afrikaans"},ak:{name:"Akan",nativeName:"Akan"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"አማርኛ"},ar:{name:"Arabic",nativeName:"العربية"},an:{name:"Aragonese",nativeName:"Aragonés"},hy:{name:"Armenian",nativeName:"Հայերեն"},as:{name:"Assamese",nativeName:"অসমীয়া"},av:{name:"Avaric",nativeName:"авар мацӀ, магӀарул мацӀ"},ae:{name:"Avestan",nativeName:"avesta"},ay:{name:"Aymara",nativeName:"aymar aru"},az:{name:"Azerbaijani",nativeName:"azərbaycan dili"},bm:{name:"Bambara",nativeName:"bamanankan"},ba:{name:"Bashkir",nativeName:"башҡорт теле"},eu:{name:"Basque",nativeName:"euskara, euskera"},be:{name:"Belarusian",nativeName:"Беларуская"},bn:{name:"Bengali",nativeName:"বাংলা"},bh:{name:"Bihari",nativeName:"भोजपुरी"},bi:{name:"Bislama",nativeName:"Bislama"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},br:{name:"Breton",nativeName:"brezhoneg"},bg:{name:"Bulgarian",nativeName:"български език"},my:{name:"Burmese",nativeName:"ဗမာစာ"},ca:{name:"Catalan",nativeName:"Català"},ch:{name:"Chamorro",nativeName:"Chamoru"},ce:{name:"Chechen",nativeName:"нохчийн мотт"},ny:{name:"Chichewa",nativeName:"chiCheŵa, chinyanja"},zh:{name:"Chinese",nativeName:"中文 (Zhōngwén), 汉语, 漢語"},cv:{name:"Chuvash",nativeName:"чӑваш чӗлхи"},kw:{name:"Cornish",nativeName:"Kernewek"},co:{name:"Corsican",nativeName:"corsu, lingua corsa"},cr:{name:"Cree",nativeName:"ᓀᐦᐃᔭᐍᐏᐣ"},hr:{name:"Croatian",nativeName:"hrvatski"},cs:{name:"Czech",nativeName:"česky, čeština"},da:{name:"Danish",nativeName:"dansk"},dv:{name:"Divehi",nativeName:"ދިވެހި"},nl:{name:"Dutch",nativeName:"Nederlands, Vlaams"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti, eesti keel"},ee:{name:"Ewe",nativeName:"Eʋegbe"},fo:{name:"Faroese",nativeName:"føroyskt"},fj:{name:"Fijian",nativeName:"vosa Vakaviti"},fi:{name:"Finnish",nativeName:"suomi, suomen kieli"},fr:{name:"French",nativeName:"français, langue française"},ff:{name:"Fula",nativeName:"Fulfulde, Pulaar, Pular"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"ქართული"},de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"Ελληνικά"},gn:{name:"Guaraní",nativeName:"Avañeẽ"},gu:{name:"Gujarati",nativeName:"ગુજરાતી"},ht:{name:"Haitian",nativeName:"Kreyòl ayisyen"},ha:{name:"Hausa",nativeName:"Hausa, هَوُسَ"},he:{name:"Hebrew",nativeName:"עברית"},hz:{name:"Herero",nativeName:"Otjiherero"},hi:{name:"Hindi",nativeName:"हिन्दी, हिंदी"},ho:{name:"Hiri Motu",nativeName:"Hiri Motu"},hu:{name:"Hungarian",nativeName:"Magyar"},ia:{name:"Interlingua",nativeName:"Interlingua"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ie:{name:"Interlingue",nativeName:"Originally called Occidental; then Interlingue after WWII"},ga:{name:"Irish",nativeName:"Gaeilge"},ig:{name:"Igbo",nativeName:"Asụsụ Igbo"},ik:{name:"Inupiaq",nativeName:"Iñupiaq, Iñupiatun"},io:{name:"Ido",nativeName:"Ido"},is:{name:"Icelandic",nativeName:"Íslenska"},it:{name:"Italian",nativeName:"Italiano"},iu:{name:"Inuktitut",nativeName:"ᐃᓄᒃᑎᑐᑦ"},ja:{name:"Japanese",nativeName:"日本語 (にほんご／にっぽんご)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kl:{name:"Kalaallisut",nativeName:"kalaallisut, kalaallit oqaasii"},kn:{name:"Kannada",nativeName:"ಕನ್ನಡ"},kr:{name:"Kanuri",nativeName:"Kanuri"},ks:{name:"Kashmiri",nativeName:"कश्मीरी, كشميري‎"},kk:{name:"Kazakh",nativeName:"Қазақ тілі"},km:{name:"Khmer",nativeName:"ភាសាខ្មែរ"},ki:{name:"Kikuyu",nativeName:"Gĩkũyũ"},rw:{name:"Kinyarwanda",nativeName:"Ikinyarwanda"},ky:{name:"Kyrgyz",nativeName:"кыргыз тили"},kv:{name:"Komi",nativeName:"коми кыв"},kg:{name:"Kongo",nativeName:"KiKongo"},ko:{name:"Korean",nativeName:"한국어 (韓國語), 조선말 (朝鮮語)"},ku:{name:"Kurdish",nativeName:"Kurdî, كوردی‎"},kj:{name:"Kuanyama",nativeName:"Kuanyama"},la:{name:"Latin",nativeName:"latine, lingua latina"},lb:{name:"Luxembourgish",nativeName:"Lëtzebuergesch"},lg:{name:"Luganda",nativeName:"Luganda"},li:{name:"Limburgish",nativeName:"Limburgs"},ln:{name:"Lingala",nativeName:"Lingála"},lo:{name:"Lao",nativeName:"ພາສາລາວ"},lt:{name:"Lithuanian",nativeName:"lietuvių kalba"},lu:{name:"Luba-Katanga",nativeName:""},lv:{name:"Latvian",nativeName:"latviešu valoda"},gv:{name:"Manx",nativeName:"Gaelg, Gailck"},mk:{name:"Macedonian",nativeName:"македонски јазик"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu, بهاس ملايو‎"},ml:{name:"Malayalam",nativeName:"മലയാളം"},mt:{name:"Maltese",nativeName:"Malti"},mi:{name:"Māori",nativeName:"te reo Māori"},mr:{name:"Marathi",nativeName:"मराठी"},mh:{name:"Marshallese",nativeName:"Kajin M̧ajeļ"},mn:{name:"Mongolian",nativeName:"монгол"},na:{name:"Nauru",nativeName:"Ekakairũ Naoero"},nv:{name:"Navajo",nativeName:"Diné bizaad, Dinékʼehǰí"},nb:{name:"Norwegian Bokmål",nativeName:"Norsk bokmål"},nd:{name:"North Ndebele",nativeName:"isiNdebele"},ne:{name:"Nepali",nativeName:"नेपाली"},ng:{name:"Ndonga",nativeName:"Owambo"},nn:{name:"Norwegian Nynorsk",nativeName:"Norsk nynorsk"},no:{name:"Norwegian",nativeName:"Norsk"},ii:{name:"Nuosu",nativeName:"ꆈꌠ꒿ Nuosuhxop"},nr:{name:"South Ndebele",nativeName:"isiNdebele"},oc:{name:"Occitan",nativeName:"Occitan"},oj:{name:"Ojibwe",nativeName:"ᐊᓂᔑᓈᐯᒧᐎᓐ"},cu:{name:"Church Slavonic",nativeName:"ѩзыкъ словѣньскъ"},om:{name:"Oromo",nativeName:"Afaan Oromoo"},or:{name:"Oriya",nativeName:"ଓଡ଼ିଆ"},os:{name:"Ossetian",nativeName:"ирон æвзаг"},pa:{name:"Punjabi",nativeName:"ਪੰਜਾਬੀ, پنجابی‎"},pi:{name:"Pāli",nativeName:"पाऴि"},fa:{name:"Persian",nativeName:"فارسی"},pl:{name:"Polish",nativeName:"polski"},ps:{name:"Pashto",nativeName:"پښتو"},pt:{name:"Portuguese",nativeName:"Português"},qu:{name:"Quechua",nativeName:"Runa Simi, Kichwa"},rm:{name:"Romansh",nativeName:"rumantsch grischun"},rn:{name:"Kirundi",nativeName:"kiRundi"},ro:{name:"Romanian",nativeName:"română"},ru:{name:"Russian",nativeName:"русский язык"},sa:{name:"Sanskrit",nativeName:"संस्कृतम्"},sc:{name:"Sardinian",nativeName:"sardu"},sd:{name:"Sindhi",nativeName:"सिन्धी, سنڌي، سندھی‎"},se:{name:"Northern Sami",nativeName:"Davvisámegiella"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},sg:{name:"Sango",nativeName:"yângâ tî sängö"},sr:{name:"Serbian",nativeName:"српски језик"},gd:{name:"Gaelic",nativeName:"Gàidhlig"},sn:{name:"Shona",nativeName:"chiShona"},si:{name:"Sinhalese",nativeName:"සිංහල"},sk:{name:"Slovak",nativeName:"slovenčina"},sl:{name:"Slovene",nativeName:"slovenščina"},so:{name:"Somali",nativeName:"Soomaaliga, af Soomaali"},st:{name:"Southern Sotho",nativeName:"Sesotho"},es:{name:"Spanish",nativeName:"español, castellano"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},ss:{name:"Swati",nativeName:"SiSwati"},sv:{name:"Swedish",nativeName:"svenska"},ta:{name:"Tamil",nativeName:"தமிழ்"},te:{name:"Telugu",nativeName:"తెలుగు"},tg:{name:"Tajik",nativeName:"тоҷикӣ, toğikī, تاجیکی‎"},th:{name:"Thai",nativeName:"ไทย"},ti:{name:"Tigrinya",nativeName:"ትግርኛ"},bo:{name:"Tibetan",nativeName:"བོད་ཡིག"},tk:{name:"Turkmen",nativeName:"Türkmen, Түркмен"},tl:{name:"Tagalog",nativeName:"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔"},tn:{name:"Tswana",nativeName:"Setswana"},to:{name:"Tonga",nativeName:"faka Tonga"},tr:{name:"Turkish",nativeName:"Türkçe"},ts:{name:"Tsonga",nativeName:"Xitsonga"},tt:{name:"Tatar",nativeName:"татарча, tatarça, تاتارچا‎"},tw:{name:"Twi",nativeName:"Twi"},ty:{name:"Tahitian",nativeName:"Reo Tahiti"},ug:{name:"Uyghur",nativeName:"Uyƣurqə, ئۇيغۇرچە‎"},uk:{name:"Ukrainian",nativeName:"українська"},ur:{name:"Urdu",nativeName:"اردو"},uz:{name:"Uzbek",nativeName:"zbek, Ўзбек, أۇزبېك‎"},ve:{name:"Venda",nativeName:"Tshivenḓa"},vi:{name:"Vietnamese",nativeName:"Tiếng Việt"},vo:{name:"Volapük",nativeName:"Volapük"},wa:{name:"Walloon",nativeName:"Walon"},cy:{name:"Welsh",nativeName:"Cymraeg"},wo:{name:"Wolof",nativeName:"Wollof"},fy:{name:"Western Frisian",nativeName:"Frysk"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"ייִדיש"},yo:{name:"Yoruba",nativeName:"Yorùbá"},za:{name:"Zhuang",nativeName:"Saɯ cueŋƅ, Saw cuengh"},"ar-dz":{name:"Arabic (Algeria)",nativeName:"العربية (الجزائر)"},"ar-bh":{name:"Arabic (Bahrain)",nativeName:"العربية (البحرين)"},"ar-eg":{name:"Arabic (Egypt)",nativeName:"العربية (مصر)"},"ar-iq":{name:"Arabic (Iraq)",nativeName:"العربية (العراق)"},"ar-jo":{name:"Arabic (Jordan)",nativeName:"العربية (الأردن)"},"ar-kw":{name:"Arabic (Kuwait)",nativeName:"العربية (الكويت)"},"ar-lb":{name:"Arabic (Lebanon)",nativeName:"العربية (لبنان)"},"ar-ly":{name:"Arabic (Libya)",nativeName:"العربية (ليبيا)"},"ar-ma":{name:"Arabic (Morocco)",nativeName:"العربية (المملكة المغربية)"},"ar-om":{name:"Arabic (Oman)",nativeName:"العربية (عمان)"},"ar-qa":{name:"Arabic (Qatar)",nativeName:"العربية (قطر)"},"ar-sa":{name:"Arabic (Saudi Arabia)",nativeName:"العربية (المملكة العربية السعودية)"},"ar-sy":{name:"Arabic (Syria)",nativeName:"العربية (سوريا)"},"ar-tn":{name:"Arabic (Tunisia)",nativeName:"العربية (تونس)"},"ar-ae":{name:"Arabic (U.A.E.)",nativeName:"العربية (الإمارات العربية المتحدة)"},"ar-ye":{name:"Arabic (Yemen)",nativeName:"العربية (اليمن)"},"de-at":{name:"German (Austria)",nativeName:"Deutsch (Österreich)"},"de-li":{name:"German (Liechtenstein)",nativeName:"Deutsch (Liechtenstein)"},"de-lu":{name:"German (Luxembourg)",nativeName:"Deutsch (Luxemburg)"},"de-ch":{name:"German (Switzerland)",nativeName:"Deutsch (Schweiz)"},"en-au":{name:"English (Australia)",nativeName:"English (Australia)"},"en-bz":{name:"English (Belize)",nativeName:"English (Belize)"},"en-ca":{name:"English (Canada)",nativeName:"English (Canada)"},"en-ie":{name:"English (Ireland)",nativeName:"English (Ireland)"},"en-jm":{name:"English (Jamaica)",nativeName:"English (Jamaica)"},"en-nz":{name:"English (New Zealand)",nativeName:""},"en-za":{name:"English (South Africa)",nativeName:"English (South Africa)"},"en-tt":{name:"English (Trinidad)",nativeName:"English (Trinidad y Tobago)"},"en-gb":{name:"English (United Kingdom)",nativeName:"English (United Kingdom)"},"en-us":{name:"English (United States)",nativeName:"English (United States)"},"es-ar":{name:"Spanish (Argentina)",nativeName:"Español (Argentina)"},"es-bo":{name:"Spanish (Bolivia)",nativeName:"Español (Bolivia)"},"es-cl":{name:"Spanish (Chile)",nativeName:"Español (Chile)"},"es-co":{name:"Spanish (Colombia)",nativeName:"Español (Colombia)"},"es-cr":{name:"Spanish (Costa Rica)",nativeName:"Español (Costa Rica)"},"es-do":{name:"Spanish (Dominican Republic)",nativeName:"Español (República Dominicana)"},"es-ec":{name:"Spanish (Ecuador)",nativeName:"Español (Ecuador)"},"es-sv":{name:"Spanish (El Salvador)",nativeName:"Español (El Salvador)"},"es-gt":{name:"Spanish (Guatemala)",nativeName:"Español (Guatemala)"},"es-hn":{name:"Spanish (Honduras)",nativeName:"Español (Honduras)"},"es-mx":{name:"Spanish (Mexico)",nativeName:"Español (México)"},"es-ni":{name:"Spanish (Nicaragua)",nativeName:"Español (Nicaragua)"},"es-pa":{name:"Spanish (Panama)",nativeName:"Español (Panamá)"},"es-py":{name:"Spanish (Paraguay)",nativeName:"Español (Paraguay)"},"es-pe":{name:"Spanish (Peru)",nativeName:"Español (Perú)"},"es-pr":{name:"Spanish (Puerto Rico)",nativeName:"Español (Puerto Rico)"},"es-uy":{name:"Spanish (Uruguay)",nativeName:"Español (Uruguay)"},"es-ve":{name:"Spanish (Venezuela)",nativeName:"Español (Venezuela)"},"fr-be":{name:"French (Belgium)",nativeName:"français (Belgique)"},"fr-ca":{name:"French (Canada)",nativeName:"français (Canada)"},"fr-lu":{name:"French (Luxembourg)",nativeName:"français (Luxembourg)"},"fr-ch":{name:"French (Switzerland)",nativeName:"français (Suisse)"},"it-ch":{name:"Italian (Switzerland)",nativeName:"italiano (Svizzera)"},"nl-be":{name:"Dutch (Belgium)",nativeName:"Nederlands (België)"},"pt-br":{name:"Portuguese (Brazil)",nativeName:"Português (Brasil)"},"sv-fi":{name:"Swedish (Finland)",nativeName:"svenska (Finland)"},"zh-hk":{name:"Chinese (Hong Kong)",nativeName:"中文(香港特别行政區)"},"zh-cn":{name:"Chinese (PRC)",nativeName:"中文(中华人民共和国)"},"zh-sg":{name:"Chinese (Singapore)",nativeName:"中文(新加坡)"},"zh-tw":{name:"Chinese Traditional (Taiwan)",nativeName:"中文（台灣）"}};AblePlayer.prototype.getLanguageName=function(e,i){var s,a,n;return(s=t[e.toLowerCase()])?"local"===i?s.nativeName:s.name:e.includes("-")&&(a=e.substring(0,2),n=e.substring(3),s=t[a.toLowerCase()])?"local"===i?s.nativeName+" ("+n+")":s.name+" ("+n+")":e}}(jQuery),function(t){AblePlayer.prototype.getSupportedLangs=function(){return["ca","cs","da","de","en","es","fr","he","id","it","ja","nb","nl","pt","pt-br","sv","tr","zh-tw"]},AblePlayer.prototype.getTranslationText=function(){var e,i,s,a,n,r,o;if(e=t.Deferred(),i=this,s=this.getSupportedLangs(),this.lang&&-1===t.inArray(this.lang,s))if(2==this.lang.indexOf("-"))-1!==t.inArray(this.lang.substring(0,2),s)?this.lang=this.lang.substring(0,2):this.lang=null;else{for(o=!1,r=0;r<s.length;)s[r].substring(0,2)==this.lang&&(this.lang=s[r],o=!0),r++;o||(this.lang=null)}return this.lang||(a=t("body").attr("lang")?t("body").attr("lang").toLowerCase():t("html").attr("lang")?t("html").attr("lang").toLowerCase():null)&&(-1!==t.inArray(a,s)?this.lang=a:2==a.indexOf("-")&&-1!==t.inArray(a.substring(0,2),s)&&(this.lang=a.substring(0,2))),this.lang||(this.lang="en"),this.searchLang||(this.searchLang=this.lang),n=this.rootPath+"translations/"+this.lang+".js",t.getJSON(n,(function(t){i.tt=t,e.resolve()})).fail((function(){i.provideFallback(),e.fail()})),e.promise()},AblePlayer.prototype.getSampleDescriptionText=function(){var e,i,s,a,n,r;for(i=this.getSupportedLangs(),e=this,this.sampleText=[],s=0;s<i.length;s++)a=this.rootPath+"translations/"+i[s]+".js",t.getJSON(a,undefined,function(t){return function(i){n=i.sampleDescriptionText,r={lang:t,text:n},e.sampleText.push(r)}}(i[s]))}}(jQuery),jQuery,AblePlayer.prototype.computeEndTime=function(t,e){var i=t.split(":").reverse().map((function(t){return parseFloat(t)})),s=e.split(":").reverse().map((function(t){return parseFloat(t)}));return i.reduce((function(t,e,i){var a=e+s[i];return 0===i&&(a>60&&(s[i+1]+=1,a-=60),a=a.toFixed(3)),1===i&&a>60&&(s[i+1]+=1,a-=60),a<10&&(a="0"+a),t.push(a),t}),[]).reverse().join(":")},AblePlayer.prototype.ttml2webvtt=function(t){var e=this,i=e.convert.xml2json(t,{ignoreComment:!0,alwaysChildren:!0,compact:!0,spaces:2});return JSON.parse(i).tt.body.div.p.reduce((function(t,i,s){var a=i._text,n=Array.isArray(a),r=i._attributes;return e.computeEndTime(r.begin,r.dur),t+(e.computeEndTime(r.begin,"00:00:0")+" --\x3e ")+e.computeEndTime(r.begin,r.dur)+"\n"+(n?a.join("\n"):a)+"\n\n"}),"WEBVTT\n\n\n")},function(t){t.doWhen=function(e){return t.Deferred((function(i){var s=t.extend({},{when:null,exec:function(){},interval:100,attempts:100,delayed:0},e,{checkId:null}),startChecking=function(){if(!0===s.when())return s.exec.call(i.promise()),void i.resolve();s.checkId=setInterval((function(){0===s.attempts?(clearInterval(s.checkId),i.reject()):(--s.attempts,!0===s.when()&&(s.attempts=0,clearInterval(s.checkId),s.exec.call(i.promise()),i.resolve()))}),s.interval)};s.delayed>0?setTimeout(startChecking,Number(s.delayed)):startChecking()})).promise()}}(jQuery),function(t){AblePlayer.prototype.injectVTS=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,f,m,g,v;if(e=this,t("#able-vts").length&&this.vtsTracks.length){for(k in this.langs=[],this.getAllLangs(this.vtsTracks),this.vtsLang=this.lang,i=t("<h2>").text("Video Transcript Sorter"),t("#able-vts").append(i),this.$vtsAlert=t("<div>",{id:"able-vts-alert","aria-live":"polite","aria-atomic":"true"}),t("#able-vts").append(this.$vtsAlert),s=t("<div>",{id:"able-vts-instructions"}),a=t("<p>").text("Use the Video Transcript Sorter to perform any of the following tasks:"),r=t("<ul>"),o=t("<li>").text("Reorder chapters, descriptions, captions, and/or subtitles so they appear in the proper sequence in Able Player's auto-generated transcript."),l=t("<li>").text("Modify content or start/end times (all are directly editable within the table)."),h=t("<li>").text("Insert new content, such as chapters or descriptions."),n=t("<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.'),r.append(o,l,h),s.append(a,r,n),t("#able-vts").append(s),p=t("<fieldset>"),c=t("<legend>").text("Select a language"),p.append(c),this.langs)d="vts-lang-radio-"+this.langs[k],u=t("<div>",{}),m=t("<input>",{type:"radio",name:"vts-lang",id:d,value:this.langs[k]}).on("click",(function(){e.vtsLang=t(this).val(),e.showVtsAlert("Loading "+e.getLanguageName(e.vtsLang)+" tracks"),e.injectVtsTable("update",e.vtsLang)})),this.langs[k]==this.lang&&m.prop("checked",!0),f=t("<label>",{for:d}).text(this.getLanguageName(this.langs[k])),u.append(m,f),p.append(u);var y,b,T,P,k;t("#able-vts").append(p),g=t("<button>",{type:"button",id:"able-vts-save",value:"save"}).text("Save Changes"),t("#able-vts").append(g),this.injectVtsTable("add",this.vtsLang),y=["captions","chapters","descriptions","subtitles"],t('td[contenteditable="true"]').on("focus",(function(){b=t(this).text()})).on("blur",(function(){b!=t(this).text()&&(T=t(this).index(),P=t(this).text(),1===T?-1===t.inArray(P,y)&&("s"===P.substring(0,1)?t(this).text("subtitles"):"d"===P.substring(0,1)?t(this).text("descriptions"):"ch"===P.substring(0,2)?t(this).text("chapters"):t(this).text("captions")):2!==T&&3!==T||t(this).text(e.formatTimestamp(P)))})).on("keydown",(function(t){t.stopPropagation()})),t("#able-vts-save").on("click",(function(i){i.stopPropagation(),"save"==t(this).attr("value")?(t(this).attr("value","cancel").text("Return to Editor"),v=t("#able-vts table"),t("#able-vts-instructions").hide(),t("#able-vts > fieldset").hide(),t("#able-vts table").remove(),t("#able-vts-icon-credit").remove(),e.parseVtsOutput(v)):(t(this).attr("value","save").text("Save Changes"),t("#able-vts-output").remove(),t("#able-vts-instructions").show(),t("#able-vts > fieldset").show(),t("#able-vts").append(v),t("#able-vts").append(e.getIconCredit()),e.showVtsAlert("Cancelling saving. Any edits you made have been restored in the VTS table."))}))}},AblePlayer.prototype.setupVtsTracks=function(t,e,i,s,a,n){var r,o;r=this.getFilenameFromPath(a),o=this.parseVtsTracks(n),this.vtsTracks.push({kind:t,language:e,label:s,srcFile:r,cues:o})},AblePlayer.prototype.getFilenameFromPath=function(t){var e;return-1===(e=t.lastIndexOf("/"))?t:t.substring(e+1)},AblePlayer.prototype.getFilenameFromTracks=function(t,e){for(var i=0;i<this.vtsTracks.length;i++)if(this.vtsTracks[i].kind===t&&this.vtsTracks[i].language===e)return this.vtsTracks[i].srcFile;return!1},AblePlayer.prototype.parseVtsTracks=function(t){var e,i,s,a,n,r,o,l,h;for(e=t.split("\n"),s=[],a=0;a<e.length;)if(-1!==(r=e[a]).indexOf(" --\x3e ")){if(i=r.trim().split(" "),this.isValidTimestamp(i[0])&&this.isValidTimestamp(i[2])){for(l="",n=a+1,h=!1;n<e.length&&!h;)(o=e[n].trim()).length>0?l.length>0?l+="\n"+o:l+=o:h=!0,n++;s.push({start:i[0],end:i[2],content:l}),a=n}}else a++;return s},AblePlayer.prototype.isValidTimestamp=function(t){return!!/^[0-9:,.]$/.test(t)},AblePlayer.prototype.formatTimestamp=function(t){var e,i;if(e=t.substring(0,t.lastIndexOf(".")+1),(i=t.substring(t.lastIndexOf(".")+1)).length>3)i=i.substring(0,3);else if(i.length<3)for(;i.length<3;)i+="0";return e+i},AblePlayer.prototype.injectVtsTable=function(e,i){var s,a,n,r,o,l,h,p;for("update"===e&&(t("#able-vts table").remove(),t("#able-vts-icon-credit").remove()),s=t("<table>",{lang:i}),r=t("<tr>",{lang:"en"}),a=["Row #","Kind","Start","End","Content","Actions"],n=0;n<a.length;n++)o=t("<th>",{scope:"col"}).text(a[n]),"Actions"===a[n]&&o.addClass("actions"),r.append(o);for(s.append(r),h=this.getAllRows(i),n=0;n<h.length;n++)r=t("<tr>",{id:"able-vts-row-"+(p=n+1),class:"kind-"+h[n].kind}),l=t("<td>").text(p),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].kind),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].start),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].end),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].content),r.append(l),l=this.addVtsActionButtons(p,h.length),r.append(l),s.append(r);t("#able-vts").append(s),t("#able-vts").append(this.getIconCredit())},AblePlayer.prototype.addVtsActionButtons=function(e,i){var s,a,n,r,o,l,h,p,c,u;for(s=this,a=t("<td>"),n=["up","down","insert","delete"],r=0;r<n.length;r++)"up"===(o=n[r])?e>1&&(l=t("<button>",{id:"able-vts-button-up-"+e,title:"Move up","aria-label":"Move Row "+e+" up"}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101c-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.594l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"down"===o?e<i&&(l=t("<button>",{id:"able-vts-button-down-"+e,title:"Move down","aria-label":"Move Row "+e+" down"}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"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.424C1.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.428s9.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"insert"===o?(l=t("<button>",{id:"able-vts-button-insert-"+e,title:"Insert row below","aria-label":"Insert row before Row "+e}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"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.414C242.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.775H27.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.411c5.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.987h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77c7.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"delete"===o&&(l=t("<button>",{id:"able-vts-button-delete-"+e,title:"Delete row ","aria-label":"Delete Row "+e}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607C429.063,46.021,414.825,31.782,397.281,31.782z"}),u=t("<path>",{d:"M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042c17.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.891c8.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.804zM238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26c0,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.804c0-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.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z"}),p=t("<g>").append(c,u),h.append(p),l.append(h),l.html(l.html()),a.append(l));return a},AblePlayer.prototype.updateVtsActionButtons=function(t,e){var i,s,a,n,r,o;for(i=0;i<t.length;i++)a=(s=t.eq(i)).attr("id"),n=s.attr("aria-label"),r=a.replace(/[0-9]+/g,e),o=n.replace(/[0-9]+/g,e),s.attr("id",r),s.attr("aria-label",o)},AblePlayer.prototype.getIconCredit=function(){return'<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>'},AblePlayer.prototype.getAllLangs=function(e){var i;for(i in e)e[i].hasOwnProperty("language")&&-1===t.inArray(e[i].language,this.langs)&&(this.langs[this.langs.length]=e[i].language)},AblePlayer.prototype.getAllRows=function(t){var e,i,s,a;for(a=[],e=0;e<this.vtsTracks.length;e++)if((i=this.vtsTracks[e]).language==t)for(s in i.cues)a.push({kind:i.kind,lang:t,id:i.cues[s].id,start:i.cues[s].start,end:i.cues[s].end,content:i.cues[s].content});return a.sort((function(t,e){return t.start>e.start?1:-1})),a},AblePlayer.prototype.onClickVtsActionButton=function(e){var i,s,a;s=(i=t(e).attr("id").split("-"))[3],a=i[4],"up"==s?this.moveRow(a,"up"):"down"==s?this.moveRow(a,"down"):"insert"==s?this.insertRow(a):"delete"==s&&this.deleteRow(a)},AblePlayer.prototype.insertRow=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,m,g;for(a=(s=(i=t("#able-vts table")).find("tr")).length-1,n=parseInt(e)+1,r=t("<tr>",{id:"able-vts-row-"+n}),o=t("<td>").text(n),r.append(o),c=null,l=t("<select>",{id:"able-vts-kind-"+n,"aria-label":"What kind of track is this?",placeholder:"Select a kind"}).on("change",(function(){c=t(this).val(),u="kind-"+c,d=t(this).closest("tr"),t(this).parent().text(c),d.addClass(u)})),h=["","captions","chapters","descriptions","subtitles"],f=0;f<h.length;f++)p=t("<option>",{value:h[f]}).text(h[f]),l.append(p);for(o=t("<td>").append(l),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=this.addVtsActionButtons(n,a),r.append(o),i.find("tr").eq(e).after(r),f=n;f<=a;f++)m=f+1,s.eq(f).attr("id","able-vts-row-"+m),s.eq(f).find("td").eq(0).text(m),g=s.eq(f).find("button"),this.updateVtsActionButtons(g,m);this.adjustTimes(n),this.showVtsAlert("A new row "+n+" has been inserted"),l.focus()},AblePlayer.prototype.deleteRow=function(e){var i,s,a,n,r,o;for((i=t("#able-vts table"))[0].deleteRow(e),a=(s=i.find("tr")).length-1,n=e;n<=a;n++)r=n,s.eq(n).attr("id","able-vts-row-"+r),s.eq(n).find("td").eq(0).text(r),o=s.eq(n).find("button"),this.updateVtsActionButtons(o,r);this.showVtsAlert("Row "+e+" has been deleted")},AblePlayer.prototype.moveRow=function(e,i){var s,a,n,r;t("#able-vts table").find("tr"),s=t("#able-vts table").find("tr").eq(e),"up"==i?(a=parseInt(e)-1,(n=t("#able-vts table").find("tr").eq(a)).before(s)):"down"==i&&(a=parseInt(e)+1,(n=t("#able-vts table").find("tr").eq(a)).after(s)),s.attr("id","able-vts-row-"+a),s.find("td").eq(0).text(a),this.updateVtsActionButtons(s.find("button"),a),n.attr("id","able-vts-row-"+e),n.find("td").eq(0).text(e),this.updateVtsActionButtons(n.find("button"),e),this.adjustTimes(a),r="Row "+e+" has been moved "+i,r+=" and is now Row "+a,this.showVtsAlert(r)},AblePlayer.prototype.adjustTimes=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,m,g,v;(i=[]).captions=.001,i.descriptions=.001,i.chapters=.001,h=(r=(s=t("#able-vts table").find("tr")).eq(e)).is('[class^="kind-"]')?this.getKindFromClass(r.attr("class")):"captions",u=this.getSecondsFromColonTime(r.find("td").eq(2).text()),m=this.getSecondsFromColonTime(r.find("td").eq(3).text()),e>1?(a=e-1,p=(o=s.eq(a)).is('[class^="kind-"]')?this.getKindFromClass(o.attr("class")):null,d=this.getSecondsFromColonTime(o.find("td").eq(2).text()),g=this.getSecondsFromColonTime(o.find("td").eq(3).text())):(a=null,o=null,p=null,d=null,g=null),e<s.length-1?(n=e+1,c=(l=s.eq(n)).is('[class^="kind-"]')?this.getKindFromClass(l.attr("class")):null,f=this.getSecondsFromColonTime(l.find("td").eq(2).text()),v=this.getSecondsFromColonTime(l.find("td").eq(3).text())):(n=null,l=null,c=null,f=null,v=null),isNaN(u)?(null==p&&(p="captions",o.attr("class","kind-captions"),o.find("td").eq(1).html("captions")),"captions"===p?(u=(parseFloat(g)+.001).toFixed(3),m=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+i[h]).toFixed(3)):"chapters"===p?(u=(parseFloat(d)+.001).toFixed(3),m=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+minDurartion[h]).toFixed(3)):"descriptions"===p&&(u=(parseFloat(d)+i.descriptions).toFixed(3),m=(parseFloat(u)+i.descriptions).toFixed(3))):d?d<u?u<f||(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)):(u=(parseFloat(d)+i[p]).toFixed(3),m=(parseFloat(u)+i[h]).toFixed(3)):u<f||(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)),m-u<i[h]&&(m=(parseFloat(u)+i[h]).toFixed(3),f&&(f=(parseFloat(m)+.001).toFixed(3))),r.find("td").eq(2).text(this.formatSecondsAsColonTime(u,!0)),r.find("td").eq(3).text(this.formatSecondsAsColonTime(m,!0)),o&&(o.find("td").eq(2).text(this.formatSecondsAsColonTime(d,!0)),o.find("td").eq(3).text(this.formatSecondsAsColonTime(g,!0))),l&&(l.find("td").eq(2).text(this.formatSecondsAsColonTime(f,!0)),l.find("td").eq(3).text(this.formatSecondsAsColonTime(v,!0)))},AblePlayer.prototype.getKindFromClass=function(t){var e,i;return e=t.indexOf("kind-")+5,-1==(i=t.indexOf(" ",e))?t.substring(e):t.substring(e,i)},AblePlayer.prototype.showVtsAlert=function(t){this.$vtsAlert.text(t).show().delay(3e3).fadeOut("slow")},AblePlayer.prototype.parseVtsOutput=function(e){var i,s,a,n,r,o,l,h,p,c;for(i=e.attr("lang"),a=["captions","chapters","descriptions","subtitles"],r={},s=0;s<a.length;s++)r[n=a[s]]="WEBVTT\n\n";if((o=e.find("tr")).length>0)for(s=0;s<o.length;s++)n=o.eq(s).find("td").eq(1).text(),-1!==t.inArray(n,a)&&(l=o.eq(s).find("td").eq(2).text(),h=o.eq(s).find("td").eq(3).text(),p=o.eq(s).find("td").eq(4).text(),void 0!==l&&void 0!==h&&(r[n]+=l+" --\x3e "+h+"\n","undefined"!==p&&(r[n]+=p),r[n]+="\n\n"));for(c=t("<div>",{id:"able-vts-output"}),t("#able-vts").append(c),s=0;s<a.length;s++)r[n=a[s]].length>8&&this.showWebVttOutput(n,r[n],i)},AblePlayer.prototype.showWebVttOutput=function(e,i,s){var a,n,r,o,l;a=t("<h3>").text(e.charAt(0).toUpperCase()+e.slice(1)),o="If you made changes, copy/paste the following content ",(n=this.getFilenameFromTracks(e,s))?(o+="to replace the original content of your "+this.getLanguageName(s)+" ",o+="<em>"+e+"</em> WebVTT file (<strong>"+n+"</strong>)."):o+="into a new "+this.getLanguageName(s)+" <em>"+e+"</em> WebVTT file.",r=t("<p>",{class:"able-vts-output-instructions"}).html(o),l=t("<textarea>").text(i),t("#able-vts-output").append(a,r,l)}}(jQuery),function(t){AblePlayer.prototype.initVimeoPlayer=function(){var e,i,s,a,n,r;return e=this,s=(i=new t.Deferred).promise(),a=this.mediaId+"_vimeo",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.vimeoDescId&&this.prefDesc?this.vimeoDescId:this.vimeoId,this.activeVimeoId=n,this.okToPlay?"true":"false",r=this.playerWidth?this.vimeoUrlHasParams?{url:n,width:this.playerWidth,controls:!1}:{id:n,width:this.playerWidth,controls:!1}:this.vimeoUrlHasParams?{url:n,controls:!1}:{id:n,controls:!1},this.vimeoPlayer=new Vimeo.Player(a,r),this.vimeoPlayer.ready().then((function(){t("#"+a).children("iframe").attr({tabindex:"-1","aria-hidden":!0}),e.vimeoPlayer.getVideoWidth().then((function(t){t&&e.vimeoPlayer.getVideoHeight().then((function(i){i&&e.resizePlayer(t,i)}))})).catch((function(t){})),e.hasPlaylist||(e.$media.remove(),e.vimeoPlaybackRate=1,e.vimeoPlayer.setPlaybackRate(e.vimeoPlaybackRate).then((function(t){e.vimeoSupportsPlaybackRateChange=!0})).catch((function(t){e.vimeoSupportsPlaybackRateChange=!1})),i.resolve())})),s},AblePlayer.prototype.getVimeoPaused=function(){var e,i;return i=(e=new t.Deferred).promise(),this.vimeoPlayer.getPaused().then((function(t){e.resolve(t)})),i},AblePlayer.prototype.getVimeoEnded=function(){var e,i;return i=(e=new t.Deferred).promise(),this.vimeoPlayer.getEnded().then((function(t){e.resolve(t)})),i},AblePlayer.prototype.getVimeoState=function(){var e,i,s,a,n;return i=(e=new t.Deferred).promise(),s=[],a=this.vimeoPlayer.getPaused(),n=this.vimeoPlayer.getEnded(),s.push(a),s.push(n),a.then((function(t){e.resolve(t)})),n.then((function(t){e.resolve(t)})),t.when.apply(t,s).then((function(){e.resolve()})),i},AblePlayer.prototype.getVimeoCaptionTracks=function(){var e,i,s,a=new t.Deferred,n=a.promise();return e=this,this.vimeoPlayer.getTextTracks().then((function(t){if(t.length){for(i=0;i<t.length;i++)e.hasCaptions=!0,1===e.prefCaptions?e.captionsOn=!0:e.captionsOn=!1,s=t[i].language===e.lang,e.tracks.push({kind:t[i].kind,language:t[i].language,label:t[i].label,def:s});e.captions=e.tracks,e.hasCaptions=!0,e.setupPopups("captions"),a.resolve()}else e.hasCaptions=!1,e.usingVimeoCaptions=!1,a.resolve()})),n},AblePlayer.prototype.getVimeoPosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+youTubeId;return"120"==e?i+"/default.jpg":"320"==e||"480"==e?i+"/hqdefault.jpg":"640"==e&&i+"/sddefault.jpg"},AblePlayer.prototype.getVimeoId=function(t){var e;return this.vimeoUrlHasParams=!1,"number"==typeof t?t:-1!==t.indexOf("vimeo.com")?-1!==t.indexOf("?")?(this.vimeoUrlHasParams=!0,t):(e=(t=t.trim()).lastIndexOf("/")+1,t.substring(e)):t}}(jQuery); \ No newline at end of file +/! ableplayer V4.8.0 with DOMPurify included / +/! @license DOMPurify 3.3.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.1/LICENSE / +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).DOMPurify=e()}(this,function(){"use strict";const{entries:t,setPrototypeOf:e,isFrozen:i,getPrototypeOf:a,getOwnPropertyDescriptor:s}=Object;let{freeze:n,seal:r,create:o}=Object,{apply:l,construct:h}="undefined"!=typeof Reflect&&Reflect;n||(n=function freeze(t){return t}),r||(r=function seal(t){return t}),l||(l=function apply(t,e){for(var i=arguments.length,a=new Array(i>2?i-2:0),s=2;s<i;s++)a[s-2]=arguments[s];return t.apply(e,a)}),h||(h=function construct(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),a=1;a<e;a++)i[a-1]=arguments[a];return new t(...i)});const p=unapply(Array.prototype.forEach),c=unapply(Array.prototype.lastIndexOf),u=unapply(Array.prototype.pop),d=unapply(Array.prototype.push),f=unapply(Array.prototype.splice),g=unapply(String.prototype.toLowerCase),m=unapply(String.prototype.toString),v=unapply(String.prototype.match),y=unapply(String.prototype.replace),b=unapply(String.prototype.indexOf),P=unapply(String.prototype.trim),T=unapply(Object.prototype.hasOwnProperty),k=unapply(RegExp.prototype.test),w=function unconstruct(t){return function(){for(var e=arguments.length,i=new Array(e),a=0;a<e;a++)i[a]=arguments[a];return h(t,i)}}(TypeError);function unapply(t){return function(e){e instanceof RegExp&&(e.lastIndex=0);for(var i=arguments.length,a=new Array(i>1?i-1:0),s=1;s<i;s++)a[s-1]=arguments[s];return l(t,e,a)}}function addToSet(t,a){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:g;e&&e(t,null);let n=a.length;for(;n--;){let e=a[n];if("string"==typeof e){const t=s(e);t!==e&&(i(a)||(a[n]=t),e=t)}t[e]=!0}return t}function cleanArray(t){for(let e=0;e<t.length;e++){T(t,e)||(t[e]=null)}return t}function clone(e){const i=o(null);for(const[a,s]of t(e)){T(e,a)&&(Array.isArray(s)?i[a]=cleanArray(s):s&&"object"==typeof s&&s.constructor===Object?i[a]=clone(s):i[a]=s)}return i}function lookupGetter(t,e){for(;null!==t;){const i=s(t,e);if(i){if(i.get)return unapply(i.get);if("function"==typeof i.value)return unapply(i.value)}t=a(t)}return function fallbackValue(){return null}}const C=n(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","search","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),A=n(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","enterkeyhint","exportparts","filter","font","g","glyph","glyphref","hkern","image","inputmode","line","lineargradient","marker","mask","metadata","mpath","part","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),D=n(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),S=n(["animate","color-profile","cursor","discard","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),x=n(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]),$=n(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),N=n(["#text"]),I=n(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","exportparts","face","for","headers","height","hidden","high","href","hreflang","id","inert","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","part","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","slot","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns","slot"]),M=n(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","mask-type","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),B=n(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),L=n(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),E=r(/\{\{[\w\W]|[\w\W]\}\}/gm),O=r(/<%[\w\W]|[\w\W]%>/gm),R=r(/\$\{[\w\W]/gm),F=r(/^data-[\-\w.\u00B7-\uFFFF]+$/),V=r(/^aria-[\-\w]+$/),z=r(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),H=r(/^(?:\w+script|data):/i),W=r(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),_=r(/^html$/i),j=r(/^[a-z][.\w](-[.\w]+)+$/i);var q=Object.freeze({proto:null,ARIA_ATTR:V,ATTR_WHITESPACE:W,CUSTOM_ELEMENT:j,DATA_ATTR:F,DOCTYPE_NAME:_,ERB_EXPR:O,IS_ALLOWED_URI:z,IS_SCRIPT_OR_DATA:H,MUSTACHE_EXPR:E,TMPLIT_EXPR:R});const K=1,Y=3,U=7,G=8,X=9,Q=function getGlobal(){return"undefined"==typeof window?null:window};var J=function createDOMPurify(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Q();const DOMPurify=t=>createDOMPurify(t);if(DOMPurify.version="3.3.1",DOMPurify.removed=[],!e||!e.document||e.document.nodeType!==X||!e.Element)return DOMPurify.isSupported=!1,DOMPurify;let{document:i}=e;const a=i,s=a.currentScript,{DocumentFragment:r,HTMLTemplateElement:l,Node:h,Element:E,NodeFilter:O,NamedNodeMap:R=e.NamedNodeMap||e.MozNamedAttrMap,HTMLFormElement:F,DOMParser:V,trustedTypes:H}=e,W=E.prototype,j=lookupGetter(W,"cloneNode"),J=lookupGetter(W,"remove"),Z=lookupGetter(W,"nextSibling"),tt=lookupGetter(W,"childNodes"),et=lookupGetter(W,"parentNode");if("function"==typeof l){const t=i.createElement("template");t.content&&t.content.ownerDocument&&(i=t.content.ownerDocument)}let it,at="";const{implementation:st,createNodeIterator:nt,createDocumentFragment:rt,getElementsByTagName:ot}=i,{importNode:lt}=a;let ht={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]};DOMPurify.isSupported="function"==typeof t&&"function"==typeof et&&st&&void 0!==st.createHTMLDocument;const{MUSTACHE_EXPR:pt,ERB_EXPR:ct,TMPLIT_EXPR:ut,DATA_ATTR:dt,ARIA_ATTR:ft,IS_SCRIPT_OR_DATA:gt,ATTR_WHITESPACE:mt,CUSTOM_ELEMENT:vt}=q;let{IS_ALLOWED_URI:yt}=q,bt=null;const Pt=addToSet({},[...C,...A,...D,...x,...N]);let Tt=null;const kt=addToSet({},[...I,...M,...B,...L]);let wt=Object.seal(o(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),Ct=null,At=null;const Dt=Object.seal(o(null,{tagCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeCheck:{writable:!0,configurable:!1,enumerable:!0,value:null}}));let St=!0,xt=!0,$t=!1,Nt=!0,It=!1,Mt=!0,Bt=!1,Lt=!1,Et=!1,Ot=!1,Rt=!1,Ft=!1,Vt=!0,zt=!1,Ht=!0,Wt=!1,_t={},jt=null;const qt=addToSet({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]);let Kt=null;const Yt=addToSet({},["audio","video","img","source","image","track"]);let Ut=null;const Gt=addToSet({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),Xt="http://www.w3.org/1998/Math/MathML",Qt="http://www.w3.org/2000/svg",Jt="http://www.w3.org/1999/xhtml";let Zt=Jt,te=!1,ee=null;const ie=addToSet({},[Xt,Qt,Jt],m);let ae=addToSet({},["mi","mo","mn","ms","mtext"]),se=addToSet({},["annotation-xml"]);const ne=addToSet({},["title","style","font","a","script"]);let re=null;const oe=["application/xhtml+xml","text/html"];let le=null,he=null;const pe=i.createElement("form"),ce=function isRegexOrFunction(t){return t instanceof RegExp||t instanceof Function},ue=function _parseConfig(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!he||he!==t){if(t&&"object"==typeof t||(t={}),t=clone(t),re=-1===oe.indexOf(t.PARSER_MEDIA_TYPE)?"text/html":t.PARSER_MEDIA_TYPE,le="application/xhtml+xml"===re?m:g,bt=T(t,"ALLOWED_TAGS")?addToSet({},t.ALLOWED_TAGS,le):Pt,Tt=T(t,"ALLOWED_ATTR")?addToSet({},t.ALLOWED_ATTR,le):kt,ee=T(t,"ALLOWED_NAMESPACES")?addToSet({},t.ALLOWED_NAMESPACES,m):ie,Ut=T(t,"ADD_URI_SAFE_ATTR")?addToSet(clone(Gt),t.ADD_URI_SAFE_ATTR,le):Gt,Kt=T(t,"ADD_DATA_URI_TAGS")?addToSet(clone(Yt),t.ADD_DATA_URI_TAGS,le):Yt,jt=T(t,"FORBID_CONTENTS")?addToSet({},t.FORBID_CONTENTS,le):qt,Ct=T(t,"FORBID_TAGS")?addToSet({},t.FORBID_TAGS,le):clone({}),At=T(t,"FORBID_ATTR")?addToSet({},t.FORBID_ATTR,le):clone({}),_t=!!T(t,"USE_PROFILES")&&t.USE_PROFILES,St=!1!==t.ALLOW_ARIA_ATTR,xt=!1!==t.ALLOW_DATA_ATTR,$t=t.ALLOW_UNKNOWN_PROTOCOLS||!1,Nt=!1!==t.ALLOW_SELF_CLOSE_IN_ATTR,It=t.SAFE_FOR_TEMPLATES||!1,Mt=!1!==t.SAFE_FOR_XML,Bt=t.WHOLE_DOCUMENT||!1,Ot=t.RETURN_DOM||!1,Rt=t.RETURN_DOM_FRAGMENT||!1,Ft=t.RETURN_TRUSTED_TYPE||!1,Et=t.FORCE_BODY||!1,Vt=!1!==t.SANITIZE_DOM,zt=t.SANITIZE_NAMED_PROPS||!1,Ht=!1!==t.KEEP_CONTENT,Wt=t.IN_PLACE||!1,yt=t.ALLOWED_URI_REGEXP||z,Zt=t.NAMESPACE||Jt,ae=t.MATHML_TEXT_INTEGRATION_POINTS||ae,se=t.HTML_INTEGRATION_POINTS||se,wt=t.CUSTOM_ELEMENT_HANDLING||{},t.CUSTOM_ELEMENT_HANDLING&&ce(t.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(wt.tagNameCheck=t.CUSTOM_ELEMENT_HANDLING.tagNameCheck),t.CUSTOM_ELEMENT_HANDLING&&ce(t.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(wt.attributeNameCheck=t.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),t.CUSTOM_ELEMENT_HANDLING&&"boolean"==typeof t.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements&&(wt.allowCustomizedBuiltInElements=t.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),It&&(xt=!1),Rt&&(Ot=!0),_t&&(bt=addToSet({},N),Tt=[],!0===_t.html&&(addToSet(bt,C),addToSet(Tt,I)),!0===_t.svg&&(addToSet(bt,A),addToSet(Tt,M),addToSet(Tt,L)),!0===_t.svgFilters&&(addToSet(bt,D),addToSet(Tt,M),addToSet(Tt,L)),!0===_t.mathMl&&(addToSet(bt,x),addToSet(Tt,B),addToSet(Tt,L))),t.ADD_TAGS&&("function"==typeof t.ADD_TAGS?Dt.tagCheck=t.ADD_TAGS:(bt===Pt&&(bt=clone(bt)),addToSet(bt,t.ADD_TAGS,le))),t.ADD_ATTR&&("function"==typeof t.ADD_ATTR?Dt.attributeCheck=t.ADD_ATTR:(Tt===kt&&(Tt=clone(Tt)),addToSet(Tt,t.ADD_ATTR,le))),t.ADD_URI_SAFE_ATTR&&addToSet(Ut,t.ADD_URI_SAFE_ATTR,le),t.FORBID_CONTENTS&&(jt===qt&&(jt=clone(jt)),addToSet(jt,t.FORBID_CONTENTS,le)),t.ADD_FORBID_CONTENTS&&(jt===qt&&(jt=clone(jt)),addToSet(jt,t.ADD_FORBID_CONTENTS,le)),Ht&&(bt["#text"]=!0),Bt&&addToSet(bt,["html","head","body"]),bt.table&&(addToSet(bt,["tbody"]),delete Ct.tbody),t.TRUSTED_TYPES_POLICY){if("function"!=typeof t.TRUSTED_TYPES_POLICY.createHTML)throw w('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');if("function"!=typeof t.TRUSTED_TYPES_POLICY.createScriptURL)throw w('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');it=t.TRUSTED_TYPES_POLICY,at=it.createHTML("")}else void 0===it&&(it=function _createTrustedTypesPolicy(t,e){if("object"!=typeof t||"function"!=typeof t.createPolicy)return null;let i=null;const a="data-tt-policy-suffix";e&&e.hasAttribute(a)&&(i=e.getAttribute(a));const s="dompurify"+(i?"#"+i:"");try{return t.createPolicy(s,{createHTML:t=>t,createScriptURL:t=>t})}catch(t){return null}}(H,s)),null!==it&&"string"==typeof at&&(at=it.createHTML(""));n&&n(t),he=t}},de=addToSet({},[...A,...D,...S]),fe=addToSet({},[...x,...$]),ge=function _forceRemove(t){d(DOMPurify.removed,{element:t});try{et(t).removeChild(t)}catch(e){J(t)}},me=function _removeAttribute(t,e){try{d(DOMPurify.removed,{attribute:e.getAttributeNode(t),from:e})}catch(t){d(DOMPurify.removed,{attribute:null,from:e})}if(e.removeAttribute(t),"is"===t)if(Ot||Rt)try{ge(e)}catch(t){}else try{e.setAttribute(t,"")}catch(t){}},ve=function _initDocument(t){let e=null,a=null;if(Et)t="<remove></remove>"+t;else{const e=v(t,/^[\r\n\t ]+/);a=e&&e[0]}"application/xhtml+xml"===re&&Zt===Jt&&(t='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+t+"</body></html>");const s=it?it.createHTML(t):t;if(Zt===Jt)try{e=(new V).parseFromString(s,re)}catch(t){}if(!e||!e.documentElement){e=st.createDocument(Zt,"template",null);try{e.documentElement.innerHTML=te?at:s}catch(t){}}const n=e.body||e.documentElement;return t&&a&&n.insertBefore(i.createTextNode(a),n.childNodes[0]||null),Zt===Jt?ot.call(e,Bt?"html":"body")[0]:Bt?e.documentElement:n},ye=function _createNodeIterator(t){return nt.call(t.ownerDocument||t,t,O.SHOW_ELEMENT|O.SHOW_COMMENT|O.SHOW_TEXT|O.SHOW_PROCESSING_INSTRUCTION|O.SHOW_CDATA_SECTION,null)},be=function _isClobbered(t){return t instanceof F&&("string"!=typeof t.nodeName||"string"!=typeof t.textContent||"function"!=typeof t.removeChild||!(t.attributes instanceof R)||"function"!=typeof t.removeAttribute||"function"!=typeof t.setAttribute||"string"!=typeof t.namespaceURI||"function"!=typeof t.insertBefore||"function"!=typeof t.hasChildNodes)},Pe=function _isNode(t){return"function"==typeof h&&t instanceof h};function _executeHooks(t,e,i){p(t,t=>{t.call(DOMPurify,e,i,he)})}const Te=function _sanitizeElements(t){let e=null;if(_executeHooks(ht.beforeSanitizeElements,t,null),be(t))return ge(t),!0;const i=le(t.nodeName);if(_executeHooks(ht.uponSanitizeElement,t,{tagName:i,allowedTags:bt}),Mt&&t.hasChildNodes()&&!Pe(t.firstElementChild)&&k(/<[/\w!]/g,t.innerHTML)&&k(/<[/\w!]/g,t.textContent))return ge(t),!0;if(t.nodeType===U)return ge(t),!0;if(Mt&&t.nodeType===G&&k(/<[/\w]/g,t.data))return ge(t),!0;if(!(Dt.tagCheck instanceof Function&&Dt.tagCheck(i))&&(!bt[i]||Ct[i])){if(!Ct[i]&&we(i)){if(wt.tagNameCheck instanceof RegExp&&k(wt.tagNameCheck,i))return!1;if(wt.tagNameCheck instanceof Function&&wt.tagNameCheck(i))return!1}if(Ht&&!jt[i]){const e=et(t)||t.parentNode,i=tt(t)||t.childNodes;if(i&&e){for(let a=i.length-1;a>=0;--a){const s=j(i[a],!0);s.removalCount=(t.removalCount||0)+1,e.insertBefore(s,Z(t))}}}return ge(t),!0}return t instanceof E&&!function _checkValidNamespace(t){let e=et(t);e&&e.tagName||(e={namespaceURI:Zt,tagName:"template"});const i=g(t.tagName),a=g(e.tagName);return!!ee[t.namespaceURI]&&(t.namespaceURI===Qt?e.namespaceURI===Jt?"svg"===i:e.namespaceURI===Xt?"svg"===i&&("annotation-xml"===a||ae[a]):Boolean(de[i]):t.namespaceURI===Xt?e.namespaceURI===Jt?"math"===i:e.namespaceURI===Qt?"math"===i&&se[a]:Boolean(fe[i]):t.namespaceURI===Jt?!(e.namespaceURI===Qt&&!se[a])&&!(e.namespaceURI===Xt&&!ae[a])&&!fe[i]&&(ne[i]||!de[i]):!("application/xhtml+xml"!==re||!ee[t.namespaceURI]))}(t)?(ge(t),!0):"noscript"!==i&&"noembed"!==i&&"noframes"!==i||!k(/<\/no(script|embed|frames)/i,t.innerHTML)?(It&&t.nodeType===Y&&(e=t.textContent,p([pt,ct,ut],t=>{e=y(e,t," ")}),t.textContent!==e&&(d(DOMPurify.removed,{element:t.cloneNode()}),t.textContent=e)),_executeHooks(ht.afterSanitizeElements,t,null),!1):(ge(t),!0)},ke=function _isValidAttribute(t,e,a){if(Vt&&("id"===e||"name"===e)&&(a in i||a in pe))return!1;if(xt&&!At[e]&&k(dt,e));else if(St&&k(ft,e));else if(Dt.attributeCheck instanceof Function&&Dt.attributeCheck(e,t));else if(!Tt[e]||At[e]){if(!(we(t)&&(wt.tagNameCheck instanceof RegExp&&k(wt.tagNameCheck,t)||wt.tagNameCheck instanceof Function&&wt.tagNameCheck(t))&&(wt.attributeNameCheck instanceof RegExp&&k(wt.attributeNameCheck,e)||wt.attributeNameCheck instanceof Function&&wt.attributeNameCheck(e,t))||"is"===e&&wt.allowCustomizedBuiltInElements&&(wt.tagNameCheck instanceof RegExp&&k(wt.tagNameCheck,a)||wt.tagNameCheck instanceof Function&&wt.tagNameCheck(a))))return!1}else if(Ut[e]);else if(k(yt,y(a,mt,"")));else if("src"!==e&&"xlink:href"!==e&&"href"!==e||"script"===t||0!==b(a,"data:")||!Kt[t]){if($t&&!k(gt,y(a,mt,"")));else if(a)return!1}else;return!0},we=function _isBasicCustomElement(t){return"annotation-xml"!==t&&v(t,vt)},Ce=function _sanitizeAttributes(t){_executeHooks(ht.beforeSanitizeAttributes,t,null);const{attributes:e}=t;if(!e||be(t))return;const i={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:Tt,forceKeepAttr:void 0};let a=e.length;for(;a--;){const s=e[a],{name:n,namespaceURI:r,value:o}=s,l=le(n),h=o;let c="value"===n?h:P(h);if(i.attrName=l,i.attrValue=c,i.keepAttr=!0,i.forceKeepAttr=void 0,_executeHooks(ht.uponSanitizeAttribute,t,i),c=i.attrValue,!zt||"id"!==l&&"name"!==l||(me(n,t),c="user-content-"+c),Mt&&k(/((--!?|])>)|<\/(style|title|textarea)/i,c)){me(n,t);continue}if("attributename"===l&&v(c,"href")){me(n,t);continue}if(i.forceKeepAttr)continue;if(!i.keepAttr){me(n,t);continue}if(!Nt&&k(/\/>/i,c)){me(n,t);continue}It&&p([pt,ct,ut],t=>{c=y(c,t," ")});const d=le(t.nodeName);if(ke(d,l,c)){if(it&&"object"==typeof H&&"function"==typeof H.getAttributeType)if(r);else switch(H.getAttributeType(d,l)){case"TrustedHTML":c=it.createHTML(c);break;case"TrustedScriptURL":c=it.createScriptURL(c)}if(c!==h)try{r?t.setAttributeNS(r,n,c):t.setAttribute(n,c),be(t)?ge(t):u(DOMPurify.removed)}catch(e){me(n,t)}}else me(n,t)}_executeHooks(ht.afterSanitizeAttributes,t,null)},Ae=function _sanitizeShadowDOM(t){let e=null;const i=ye(t);for(_executeHooks(ht.beforeSanitizeShadowDOM,t,null);e=i.nextNode();)_executeHooks(ht.uponSanitizeShadowNode,e,null),Te(e),Ce(e),e.content instanceof r&&_sanitizeShadowDOM(e.content);_executeHooks(ht.afterSanitizeShadowDOM,t,null)};return DOMPurify.sanitize=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=null,s=null,n=null,o=null;if(te=!t,te&&(t="\x3c!--\x3e"),"string"!=typeof t&&!Pe(t)){if("function"!=typeof t.toString)throw w("toString is not a function");if("string"!=typeof(t=t.toString()))throw w("dirty is not a string, aborting")}if(!DOMPurify.isSupported)return t;if(Lt||ue(e),DOMPurify.removed=[],"string"==typeof t&&(Wt=!1),Wt){if(t.nodeName){const e=le(t.nodeName);if(!bt[e]||Ct[e])throw w("root node is forbidden and cannot be sanitized in-place")}}else if(t instanceof h)i=ve("\x3c!----\x3e"),s=i.ownerDocument.importNode(t,!0),s.nodeType===K&&"BODY"===s.nodeName||"HTML"===s.nodeName?i=s:i.appendChild(s);else{if(!Ot&&!It&&!Bt&&-1===t.indexOf("<"))return it&&Ft?it.createHTML(t):t;if(i=ve(t),!i)return Ot?null:Ft?at:""}i&&Et&&ge(i.firstChild);const l=ye(Wt?t:i);for(;n=l.nextNode();)Te(n),Ce(n),n.content instanceof r&&Ae(n.content);if(Wt)return t;if(Ot){if(Rt)for(o=rt.call(i.ownerDocument);i.firstChild;)o.appendChild(i.firstChild);else o=i;return(Tt.shadowroot||Tt.shadowrootmode)&&(o=lt.call(a,o,!0)),o}let c=Bt?i.outerHTML:i.innerHTML;return Bt&&bt["!doctype"]&&i.ownerDocument&&i.ownerDocument.doctype&&i.ownerDocument.doctype.name&&k(_,i.ownerDocument.doctype.name)&&(c="<!DOCTYPE "+i.ownerDocument.doctype.name+">\n"+c),It&&p([pt,ct,ut],t=>{c=y(c,t," ")}),it&&Ft?it.createHTML(c):c},DOMPurify.setConfig=function(){ue(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),Lt=!0},DOMPurify.clearConfig=function(){he=null,Lt=!1},DOMPurify.isValidAttribute=function(t,e,i){he||ue({});const a=le(t),s=le(e);return ke(a,s,i)},DOMPurify.addHook=function(t,e){"function"==typeof e&&d(ht[t],e)},DOMPurify.removeHook=function(t,e){if(void 0!==e){const i=c(ht[t],e);return-1===i?void 0:f(ht[t],i,1)[0]}return u(ht[t])},DOMPurify.removeHooks=function(t){ht[t]=[]},DOMPurify.removeAllHooks=function(){ht={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}},DOMPurify}();return J});var AblePlayerInstances=[];!function(t){t(function(){t("video, audio").each(function(e,i){void 0!==t(i).data("able-player")&&AblePlayerInstances.push(new AblePlayer(t(this),t(i)))})}),window.onYouTubeIframeAPIReady=function(){AblePlayer.youTubeIframeAPIReady=!0,t("body").trigger("youTubeIframeAPIReady",[])},t(window).on("keydown",function(t){1===AblePlayer.nextIndex&&AblePlayer.lastCreated.onPlayerKeyPress(t)}),window.AblePlayer=function(e){var i=this;if(AblePlayer.lastCreated=this,this.media=e,0!==t(e).length){void 0!==t(e).attr("autoplay")?(this.autoplay=!0,this.okToPlay=!0):(this.autoplay=!1,this.okToPlay=!1),this.loop=void 0!==t(e).attr("loop"),this.playsInline=void 0!==t(e).attr("playsinline")?"1":"0",this.hasPoster=!(!t(e).attr("poster")&&!t(e).data("poster")),this.audioPoster=t(e).data("poster"),this.audioPosterAlt=t(e).data("poster-alt"),this.width=t(e).attr("width")??0,this.height=t(e).attr("height")??0;var a=t(e).data("start-time"),s=!("number"!=typeof a&&("string"!=typeof a||""===value.trim()||isNaN(value)||!isFinite(Number(value))));if(this.startTime=void 0!==a&&s?a:0,this.debug=void 0!==t(e).data("debug")&&!1!==t(e).data("debug"),void 0!==t(e).data("root-path")?this.rootPath=t(e).data("root-path").replace(/\/?$/,"/"):this.rootPath=this.getRootPath(),this.defaultVolume=7,void 0!==t(e).data("volume")&&""!==t(e).data("volume")){var n=t(e).data("volume");n>=0&&n<=10&&(this.defaultVolume=n)}if(this.volume=this.defaultVolume,void 0!==t(e).data("use-chapters-button")&&!1===t(e).data("use-chapters-button")?this.useChaptersButton=!1:this.useChaptersButton=!0,void 0!==t(e).data("descriptions-audible")&&!1===t(e).data("descriptions-audible")||void 0!==t(e).data("description-audible")&&!1===t(e).data("description-audible")?this.readDescriptionsAloud=!1:this.readDescriptionsAloud=!0,this.descVoices=[],this.descReader="screenreader"==t(e).data("desc-reader")?"screenreader":"browser",this.defaultStateCaptions="off"==t(e).data("state-captions")?0:1,this.defaultStateDescriptions="on"==t(e).data("state-descriptions")?1:0,this.defaultDescPause="off"==t(e).data("desc-pause-default")?0:1,void 0!==t(e).data("heading-level")&&""!==t(e).data("heading-level")){var r=t(e).data("heading-level");/^[0-6]$/.test(r)&&(this.playerHeadingLevel=r)}var o=t(e).data("transcript-div");void 0!==o&&""!==o&&null!==document.getElementById(o)?this.transcriptDivLocation=o:this.transcriptDivLocation=null;var l=t(e).data("include-transcript");this.hideTranscriptButton=void 0!==l&&!1===l,this.transcriptType=null,void 0!==t(e).data("transcript-src")?(this.transcriptSrc=t(e).data("transcript-src"),this.transcriptSrcHasRequiredParts()&&(this.transcriptType="manual")):t(e).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length>0&&(this.transcriptType=this.transcriptDivLocation?"external":"popup"),this.lyricsMode=void 0!==t(e).data("lyrics-mode")&&!1!==t(e).data("lyrics-mode"),void 0!==t(e).data("transcript-title")&&""!==t(e).data("transcript-title")&&(this.transcriptTitle=t(e).data("transcript-title"));var h=t(e).data("sign-div");void 0!==h&&""!==h&&null!==document.getElementById(h)?this.$signDivLocation=t("#"+h):this.$signDivLocation=null,this.defaultCaptionsPosition="overlay"===t(e).data("captions-position")?"overlay":"below";var p=t(e).data("chapters-div");void 0!==p&&""!==p&&(this.chaptersDivLocation=p),void 0!==t(e).data("chapters-title")&&(this.chaptersTitle=t(e).data("chapters-title"));var c=t(e).data("chapters-default");this.defaultChapter=void 0!==c&&""!==c?c:null,this.speedIcons="arrows"===t(e).data("speed-icons")?"arrows":"animals";var u=t(e).data("seekbar-scope");this.seekbarScope="chapter"===u||"chapters"===u?"chapter":"video";var d=t(e).data("youtube-id");if(void 0!==d&&""!==d&&(this.youTubeId=this.getYouTubeId(d),!this.hasPoster)){let i=this.getYouTubePosterUrl(this.youTubeId,"640");t(e).attr("poster",i)}var f=t(e).data("youtube-desc-id");void 0!==f&&""!==f&&(this.youTubeDescId=this.getYouTubeId(f));var g=t(e).data("youtube-sign-src");void 0!==g&&""!==g&&(this.youTubeSignId=this.getYouTubeId(g));var m=t(e).data("youtube-nocookie");this.youTubeNoCookie=!(void 0===m||!m);var v=t(e).data("vimeo-id");if(void 0!==v&&""!==v&&(this.vimeoId=this.getVimeoId(v),!this.hasPoster)){let a=i.getVimeoPosterUrl(this.vimeoId,"1200");t(e).attr("poster",a)}var y=t(e).data("vimeo-desc-id");if(void 0!==y&&""!==y&&(this.vimeoDescId=this.getVimeoId(y)),this.skin="legacy"==t(e).data("skin")?"legacy":"2020",void 0!==t(e).data("width")?this.playerWidth=parseInt(t(e).data("width")):t(e)[0].getAttribute("width")?this.playerWidth=parseInt(t(e)[0].getAttribute("width")):this.playerWidth=null,this.iconType="font",this.forceIconType=!1,void 0!==t(e).data("icon-type")&&""!==t(e).data("icon-type")){var b=t(e).data("icon-type");"font"!==b&&"image"!==b&&"svg"!==b||(this.iconType=b,this.forceIconType=!0)}var P=t(e).data("allow-fullscreen");if(this.allowFullscreen=void 0===P||!1!==P,this.clickedFullscreenButton=!1,this.restoringAfterFullscreen=!1,this.defaultSeekInterval=10,this.useFixedSeekInterval=!1,void 0!==t(e).data("seek-interval")&&""!==t(e).data("seek-interval")){var T=t(e).data("seek-interval");/^[1-9][0-9]$/.test(T)&&(this.seekInterval=T,this.useFixedSeekInterval=!0)}var k=t(e).data("show-now-playing");this.showNowPlaying=void 0===k||!1!==k,void 0!==t(e).data("use-ttml")?(this.useTtml=!0,this.convert=require("xml-js")):this.useTtml=!1;var w=t(e).data("test-fallback");this.testFallback=void 0!==w&&!1!==w&&("2"==w?2:1);var C=t(e).data("lang");this.lang=void 0!==C&&""!==C?C.toLowerCase():null;var A=t(e).data("meta-type");void 0!==A&&""!==A&&(this.metaType=A);var D=t(e).data("meta-div");void 0!==D&&""!==D&&(this.metaDiv=D);var S=t(e).data("search-div");if(void 0!==S&&""!==S){this.searchDiv=S;var x=t(e).data("search");void 0!==x&&""!==x&&(this.searchString=x);var $=t(e).data("search-lang");this.searchLang=void 0!==$&&""!==$?$:null;var N=t(e).data("search-ignore-caps");this.searchIgnoreCaps=void 0!==N&&!1!==N}void 0!==t(e).data("hide-controls")&&!1!==t(e).data("hide-controls")?(this.hideControls=!0,this.hideControlsOriginal=!0):(this.hideControls=!1,this.hideControlsOriginal=!1),void 0!==t(e).data("steno-mode")&&!1!==t(e).data("steno-mode")?(this.stenoMode=!0,void 0!==t(e).data("steno-iframe-id")&&""!==t(e).data("steno-iframe-id")?(this.stenoFrameId=t(e).data("steno-iframe-id"),this.$stenoFrame=t("#"+this.stenoFrameId),this.$stenoFrame.length||(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoMode=!1,this.stenoFrameId=null,this.$stenoFrame=null),this.setDefaults(),this.ableIndex=AblePlayer.nextIndex,AblePlayer.nextIndex+=1,this.title=t(e).attr("title"),this.tt={},async function fetchTranslations(t){try{await t.getTranslationText(),t.setup()}catch{t.provideFallback()}}(i=this)}else this.provideFallback()},AblePlayer.nextIndex=0,AblePlayer.prototype.setup=function(){var t=this;this.initializing=!0,this.reinitialize().then(function(){t.player?t.setupInstance().then(function(){t.setupInstancePlaylist(),t.hasPlaylist||t.recreatePlayer().then(function(){t.initializing=!1,t.playerCreated=!0})}):t.provideFallback()})},AblePlayer.getActiveDOMElement=function(){for(var t=document.activeElement;t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t},AblePlayer.localGetElementById=function(e,i){return e.getRootNode?t(e.getRootNode().querySelector("#"+i)):t(document.getElementById(i))},AblePlayer.youTubeIframeAPIReady=!1,AblePlayer.loadingYouTubeIframeAPI=!1}(jQuery),function(t){AblePlayer.prototype.setDefaults=function(){this.playerCreated=!1,this.playing=!1,this.paused=!0,this.clickedPlay=!1,this.fullscreen=!1,this.swappingSrc=!1,this.initializing=!1,this.cueingPlaylistItems=!1,this.buttonWithFocus=null,this.speechEnabled=null,this.setIconColor(),this.setButtonImages()},AblePlayer.prototype.getRootPath=function(){var t,e,i,a,s,n;for(t=document.getElementsByTagName("script"),e=0;e<t.length;e++)if(-1!==(i=t[e].src).substring(i.lastIndexOf("/")).indexOf("ableplayer")){a=i.split("?")[0];break}return n=(s=a.split("/").slice(0,-1).join("/")).lastIndexOf("/"),s.substring(0,n)+"/"},AblePlayer.prototype.setIconColor=function(){var e,i,a,s,n;for(e=["controller","toolbar"],i=0;i<e.length;i++)"controller"==e[i]?a=t("<div>",{class:"able-controller"}).hide():"toolbar"===e[i]&&(a=t("<div>",{class:"able-window-toolbar"}).hide()),t("body").append(a),n=.2126(s=a.css("background-color").replace(/[^\d,]/g,"").split(","))[0]+.7152s[1]+.0722s[2]<125?"white":"black","controller"===e[i]?this.iconColor=n:"toolbar"===e[i]&&(this.toolbarIconColor=n),a.remove()},AblePlayer.prototype.setButtonImages=function(){this.imgPath=this.rootPath+"button-icons/"+this.iconColor+"/",this.playButtonImg=this.imgPath+"play.png",this.pauseButtonImg=this.imgPath+"pause.png",this.restartButtonImg=this.imgPath+"restart.png",this.rewindButtonImg=this.imgPath+"rewind.png",this.forwardButtonImg=this.imgPath+"forward.png",this.previousButtonImg=this.imgPath+"previous.png",this.nextButtonImg=this.imgPath+"next.png","arrows"===this.speedIcons?(this.fasterButtonImg=this.imgPath+"slower.png",this.slowerButtonImg=this.imgPath+"faster.png"):"animals"===this.speedIcons&&(this.fasterButtonImg=this.imgPath+"rabbit.png",this.slowerButtonImg=this.imgPath+"turtle.png"),this.captionsButtonImg=this.imgPath+"captions.png",this.chaptersButtonImg=this.imgPath+"chapters.png",this.signButtonImg=this.imgPath+"sign.png",this.transcriptButtonImg=this.imgPath+"transcript.png",this.descriptionsButtonImg=this.imgPath+"descriptions.png",this.fullscreenExpandButtonImg=this.imgPath+"fullscreen-expand.png",this.fullscreenCollapseButtonImg=this.imgPath+"fullscreen-collapse.png",this.prefsButtonImg=this.imgPath+"preferences.png",this.helpButtonImg=this.imgPath+"help.png"},AblePlayer.prototype.getIconData=function(t){var e=Array();switch(t){case"play":e[0]="0 0 16 20",e[1]="M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z",e[2]="icon-play",e[3]=this.playButtonImg;break;case"pause":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-pause",e[3]=this.pauseButtonImg;break;case"restart":e[0]="0 0 20 20",e[1]="M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z",e[2]="icon-restart",e[3]=this.restartButtonImg;break;case"rewind":e[0]="0 0 20 20",e[1]="M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z",e[2]="icon-rewind",e[3]=this.rewindButtonImg;break;case"forward":e[0]="0 0 20 20",e[1]="M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z",e[2]="icon-forward",e[3]=this.forwardButtonImg;break;case"previous":e[0]="0 0 20 20",e[1]="M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z",e[2]="icon-previous",e[3]=this.previousButtonImg;break;case"next":e[0]="0 0 20 20",e[1]="M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z",e[2]="icon-next",e[3]=this.nextButtonImg;break;case"slower":e[0]="0 0 11 20",e[1]="M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z",e[2]="icon-slower",e[3]=this.slowerButtonImg;break;case"faster":e[0]="0 0 11 20",e[1]="M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-faster",e[3]=this.fasterButtonImg;break;case"turtle":e[0]="0 0 20 20",e[1]="M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z",e[2]="icon-turtle",e[3]=this.slowerButtonImg;break;case"rabbit":e[0]="0 0 20 20",e[1]="M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z",e[2]="icon-rabbit",e[3]=this.fasterButtonImg;break;case"ellipsis":e[0]="0 0 20 20",e[1]="M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z",e[2]="icon-ellipsis",e[3]=!1;break;case"pipe":e[0]="0 0 20 20",e[1]="M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z",e[2]="icon-pipe",e[3]=!1;break;case"captions":e[0]="0 0 20 20",e[1]="M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z",e[2]="icon-captions",e[3]=this.captionsButtonImg;break;case"descriptions":e[0]="0 0 20 20",e[1]="M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z",e[2]="icon-descriptions",e[3]=this.descriptionsButtonImg;break;case"sign":e[0]="0 0 20 20",e[1]="M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z",e[2]="icon-sign",e[3]=this.signButtonImg;break;case"mute":case"volume-mute":e[0]="0 0 20 20",e[1]="M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z",e[2]="icon-volume-mute",e[3]=this.imgPath+"volume-mute.png";break;case"volume-soft":e[0]="0 0 20 20",e[1]="M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-soft",e[3]=this.imgPath+"volume-soft.png";break;case"volume-medium":e[0]="0 0 20 20",e[1]="M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-medium",e[3]=this.imgPath+"volume-medium.png";break;case"volume-loud":e[0]="0 0 21 20",e[1]="M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-loud",e[3]=this.imgPath+"volume-loud.png";break;case"chapters":e[0]="0 0 20 20",e[1]="M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z",e[2]="icon-chapters",e[3]=this.chaptersButtonImg;break;case"transcript":e[0]="0 0 20 20",e[1]="M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z",e[2]="icon-transcript",e[3]=this.transcriptButtonImg;break;case"preferences":e[0]="0 0 20 20",e[1]="M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z",e[2]="icon-preferences",e[3]=this.prefsButtonImg;break;case"close":e[0]="0 0 16 20",e[1]="M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z",e[2]="icon-close",e[3]=null;break;case"fullscreen-expand":e[0]="0 0 20 20",e[1]="M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z",e[2]="icon-fullscreen-expand",e[3]=this.fullscreenExpandButtonImg;break;case"fullscreen-collapse":e[0]="0 0 20 20",e[1]="M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-fullscreen-collapse",e[3]=this.fullscreenCollapseButtonImg}return e},AblePlayer.prototype.reinitialize=function(){var e,i;if(i=(e=new this.defer).promise(),this.startedPlaying=!1,this.autoScrollTranscript=!0,this.$media=t(this.media).first(),this.media=this.$media[0],this.$media.is("audio"))this.mediaType="audio";else{if(!this.$media.is("video"))return this.provideFallback(),e.reject(),i;this.mediaType="video"}return this.$sources=this.$media.find("source"),this.player=this.getPlayer(),this.player||this.provideFallback(),this.setIconType(),e.resolve(),i},AblePlayer.prototype.setPlayerSize=function(t,e){"audio"!==this.mediaType&&t>0&&e>0&&(this.playerWidth=t,this.playerHeight=e,this.aspectRatio=e/t)},AblePlayer.prototype.setIconType=function(){if(this.forceIconType)return!1;this.iconType="svg"},AblePlayer.prototype.setupInstance=function(){var t=new this.defer,e=t.promise();return this.$media.attr("id")?this.mediaId=this.$media.attr("id"):(this.mediaId="ableMediaId_"+this.ableIndex,this.$media.attr("id",this.mediaId)),t.resolve(),e},AblePlayer.prototype.setupInstancePlaylist=function(){var e=this;if(this.hasPlaylist=!1,t(".able-playlist").each(function(){if(t(this).data("player")===e.mediaId){e.hasPlaylist=!0,e.$playlist=t(this).find("li"),t(this).find("li[data-youtube-id]").each(function(){var i=DOMPurify.sanitize(t(this).attr("data-youtube-id")),a=e.getYouTubePosterUrl(i,"120"),s=t("<img>",{src:a,alt:""});t(this).find("button").prepend(s)}),t(this).find("li[data-vimeo-id]").each(function(){var i=t(this).attr("data-vimeo-id"),a=e.getVimeoPosterUrl(i,"120"),s=t("<img>",{src:a,alt:""});t(this).find("button").prepend(s)}),t(this).find("li span").attr("aria-hidden","true"),e.playlistIndex=0;var i=t(this).data("embedded");e.playlistEmbed=void 0!==i&&!1!==i}}),this.hasPlaylist&&this.loop&&this.media.removeAttribute("loop"),this.hasPlaylist&&this.playlistEmbed){var i=this.$playlist.parent();this.$playlistDom=i.clone(),i.remove()}this.hasPlaylist&&0===this.$sources.length&&(this.cuePlaylistItem(0),this.$sources=this.$media.find("source"))},AblePlayer.prototype.recreatePlayer=function(){var e,i,a,s,n;if(this.player)return i=(e=new this.defer).promise(),a=this,this.playerDeleted=!1,this.recreatingPlayer=!0,this.playerCreated||(this.loadCurrentPreferences(),this.injectPlayerCode(),this.resizePlayer(this.media.videoWidth,this.media.videoHeight)),this.getSampleDescriptionText(),this.initSignLanguage(),this.initPlayer().then(function(){a.getTracks().then(function(){a.initDescription().then(function(){a.setupTracks().then(function(){a.hasClosedDesc&&(!a.$descDiv||a.$descDiv&&!t.contains(a.$ableDiv[0],a.$descDiv[0]))&&a.injectTextDescriptionArea(),a.initSpeech("init"),a.setupTranscript().then(function(){a.initStenoFrame().then(function(){a.stenoMode&&a.$stenoFrame&&(a.stenoFrameContents=a.$stenoFrame.contents()),a.getMediaTimes().then(function(t){for(a.duration=t.duration,a.elapsed=t.elapsed,void 0===a.volume&&(a.volume=a.defaultVolume),a.volume&&a.setVolume(a.volume),a.transcriptType&&(a.addTranscriptAreaEvents(),a.updateTranscript()),a.captions.length&&a.initDefaultCaption(),a.setMediaAttributes(),a.addControls(),a.addEventListeners(),s=a.getPreferencesGroups(),n=0;n<s.length;n++)a.injectPrefsForm(s[n]);a.setupPopups(),a.updateCaption(),a.injectVTS(),a.populateChaptersDiv(),a.showSearchResults(),"html5"===a.player&&(a.loadingMedia||(a.$media[0].load(),a.loadingMedia=!0)),setTimeout(function(){a.refreshControls(),e.resolve()},100)})})})})})})},function(){a.provideFallback()}),i;console.log("Can't create player; no appropriate player type detected.")},AblePlayer.prototype.initPlayer=function(){var t,e=this;"html5"===this.player?t=this.initHtml5Player():"youtube"===this.player?t=this.initYouTubePlayer():"vimeo"===this.player&&(t=this.initVimeoPlayer());var i=new this.defer,a=i.promise();return t.then(function(){e.useFixedSeekInterval?(e.seekInterval||(e.seekInterval=e.defaultSeekInterval),e.seekIntervalCalculated=!0):e.setSeekInterval(),i.resolve()}).finally(function(){i.reject()}),a},AblePlayer.prototype.initStenoFrame=function(){var t,e;return e=(t=new this.defer).promise(),this.stenoMode&&this.$stenoFrame?(this.$stenoFrame[0].contentWindow,"complete"==document.readyState?t.resolve():this.$stenoFrame.on("load",function(){t.resolve()})):t.resolve(),e},AblePlayer.prototype.setSeekInterval=function(){var t;this.seekInterval=this.defaultSeekInterval,void 0===(t=this.useChapterTimes?this.chapterDuration:this.duration)||t<1?this.seekIntervalCalculated=!1:(this.seekInterval=t<=20?5:t<=30?6:t<=40?8:t<=100?10:Math.round(t/10,0),this.seekIntervalCalculated=!0)},AblePlayer.prototype.initDefaultCaption=function(){var t,e;if((t=this.captions).length>0){for(e=0;e<t.length;e++)!0===t[e].def&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);if(void 0===this.captionLang)for(e=0;e<t.length;e++)t[e].language===this.lang&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);void 0===this.captionLang&&(this.captionLang=t[0].language,this.selectedCaptions=t[0]),void 0!==this.captionLang&&(this.$transcriptLanguageSelect&&this.$transcriptLanguageSelect.find("option[lang="+this.captionLang+"]").prop("selected",!0),this.syncTrackLanguages("init",this.captionLang)),"vimeo"===this.player&&(this.usingVimeoCaptions&&1==this.prefCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(t){}).catch(function(t){t.name}):this.vimeoPlayer.disableTextTrack().then(function(){}).catch(function(t){}))}},AblePlayer.prototype.initHtml5Player=function(){var t=new this.defer,e=t.promise();return t.resolve(),e},AblePlayer.prototype.setMediaAttributes=function(){this.$media.attr("tabindex",-1);var t=this.$media.get(0).textTracks;if(t)for(var e=0;e<t.length;)t[e].mode="disabled",e+=1},AblePlayer.prototype.getPlayer=function(){return this.testFallback?null:this.youTubeId?"video"!==this.mediaType?null:"youtube":this.vimeoId?"video"!==this.mediaType?null:"vimeo":this.media.canPlayType?"html5":null}}(jQuery),function(t){AblePlayer.prototype.setPrefs=function(t){"undefined"!=typeof Cookies?Cookies.set("Able-Player",JSON.stringify(t),{expires:90,sameSite:"strict"}):localStorage.setItem("Able-Player",JSON.stringify(t))},AblePlayer.prototype.getPref=function(){var t,e={preferences:{},sign:{},transcript:{},voices:[]};try{t="undefined"!=typeof Cookies?JSON.parse(Cookies.get("Able-Player")):JSON.parse(localStorage.getItem("Able-Player"))}catch(i){this.setPrefs(e),t=e}return t||e},AblePlayer.prototype.updatePreferences=function(t){var e,i,a,s,n,r,o,l;if(e=this.getPref(),"transcript"===t||"sign"===t)"transcript"===t?(a=(i=this.$transcriptArea).position(),void 0===e.transcript&&(e.transcript={}),e.transcript.position=i.css("position"),e.transcript.zindex=i.css("z-index"),e.transcript.top=a.top,e.transcript.left=a.left,e.transcript.width=i.width(),e.transcript.height=i.height()):"sign"===t&&(a=(i=this.$signWindow).position(),void 0===e.sign&&(e.sign={}),e.sign.position=i.css("position"),e.sign.zindex=i.css("z-index"),e.sign.top=a.top,e.sign.left=a.left,e.sign.width=i.width(),e.sign.height=i.height());else if("voice"===t){void 0===e.voices&&(e.voices=[]),o=!1;for(var h=0;h<e.voices.length;h++)e.voices[h].lang===this.prefDescVoiceLang&&(o=!0,e.voices[h].name=this.prefDescVoice);o||(l={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(l))}else for(s=this.getAvailablePreferences(),n=0;n<s.length;n++)(r=s[n].name)==t&&(e.preferences[r]=this[r]);this.setPrefs(e)},AblePlayer.prototype.getPreferencesGroups=function(){return this.usingYouTubeCaptions?["captions","descriptions","keyboard"]:this.usingVimeoCaptions?["descriptions","keyboard"]:["captions","descriptions","keyboard","transcript"]},AblePlayer.prototype.getAvailablePreferences=function(){var t=[];return t.push({name:"prefAltKey",label:this.translate("prefAltKey","Alt"),group:"keyboard",default:1}),t.push({name:"prefCtrlKey",label:this.translate("prefCtrlKey","Control"),group:"keyboard",default:1}),t.push({name:"prefShiftKey",label:this.translate("prefShiftKey","Shift"),group:"keyboard",default:0}),t.push({name:"prefNoKeyShortcuts",label:this.translate("prefNoKeyShortcuts","Disable Keyboard Shortcuts"),group:"keyboard",default:0}),t.push({name:"prefTranscript",label:null,group:"transcript",default:0}),t.push({name:"prefHighlight",label:this.translate("prefHighlight","Highlight transcript as media plays"),group:"transcript",default:1}),t.push({name:"prefAutoScrollTranscript",label:null,group:"transcript",default:1}),t.push({name:"prefTabbable",label:this.translate("prefTabbable","Keyboard-enable transcript"),group:"transcript",default:0}),t.push({name:"prefCaptions",label:null,group:"captions",default:this.defaultStateCaptions}),this.usingYouTubeCaptions||("video"===this.mediaType&&t.push({name:"prefCaptionsPosition",label:this.translate("prefCaptionsPosition","Position"),group:"captions",default:this.defaultCaptionsPosition}),t.push({name:"prefCaptionsFont",label:this.translate("prefCaptionsFont","Font"),group:"captions",default:"sans-serif"})),t.push({name:"prefCaptionsSize",label:this.translate("prefCaptionsSize","Font size"),group:"captions",default:"100%"}),this.usingYouTubeCaptions||(t.push({name:"prefCaptionsColor",label:this.translate("prefCaptionsColor","Text Color"),group:"captions",default:"white"}),t.push({name:"prefCaptionsBGColor",label:this.translate("prefCaptionsBGColor","Background"),group:"captions",default:"black"}),t.push({name:"prefCaptionsOpacity",label:this.translate("prefCaptionsOpacity","Opacity"),group:"captions",default:"100%"})),"video"===this.mediaType&&(t.push({name:"prefDesc",label:null,group:"descriptions",default:this.defaultStateDescriptions}),t.push({name:"prefDescMethod",label:null,group:"descriptions",default:"video"}),t.push({name:"prefDescVoice",label:this.translate("prefDescVoice","Voice"),group:"descriptions",default:null}),t.push({name:"prefDescPitch",label:this.translate("prefDescPitch","Pitch"),group:"descriptions",default:1}),t.push({name:"prefDescRate",label:this.translate("prefDescRate","Rate"),group:"descriptions",default:1}),t.push({name:"prefDescVolume",label:this.translate("volume","Volume"),group:"descriptions",default:1}),"video"!==this.descMethod&&t.push({name:"prefDescPause",label:this.translate("prefDescPause","Automatically pause video when description starts"),group:"descriptions",default:this.defaultDescPause}),t.push({name:"prefDescVisible",label:this.translate("prefDescVisible","Make description visible"),group:"descriptions",default:0})),t.push({name:"prefSign",label:null,group:null,default:0}),t},AblePlayer.prototype.loadCurrentPreferences=function(){for(var t=this.getAvailablePreferences(),e=this.getPref(),i=0;i<t.length;i++){var a=t[i].name,s=t[i].default;void 0!==e.preferences[a]?this[a]=e.preferences[a]:(e.preferences[a]=s,this[a]=s)}void 0!==e.voices&&(this.prefVoices=e.voices),this.setPrefs(e)},AblePlayer.prototype.injectPrefsForm=function(e){var i,a,s,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P,T,k,w,C,A,D,S,x,$,N,I,M,B,L,E,O,R,F,V,z,H,W;i=this,a=this.getAvailablePreferences();var _="able-prefs-form-"+e;if((s=t("<div>",{class:"able-prefs-form "})).addClass(_),"captions"==e)n=this.translate("prefTitleCaptions","Captions Preferences");else if("descriptions"==e){n=this.translate("prefTitleDescriptions","Audio Description Preferences");var j=t("<p>",{text:this.translate("prefIntroDescription1","This media player supports audio description in two ways: ")}),q=t("<ul>"),K=t("<li>",{text:this.translate("prefDescFormatOption1","alternative described version of video")}),Y=t("<li>",{text:this.translate("prefDescFormatOption2","text-based description, announced by screen reader")});q.append(K,Y),this.hasOpenDesc&&this.hasClosedDesc?(I=this.translate("prefIntroDescription2","The current video has ")+" ",I+="<strong>"+this.translate("prefDescFormatOption1b","an alternative described version")+"</strong>",I+=" <em>"+this.translate("and","and")+"</em> <strong>"+this.translate("prefDescFormatOption2b","text-based description, announced by screen reader")+"</strong>."):this.hasOpenDesc?(I=this.translate("prefIntroDescription2","The current video has "),I+=" <strong>"+this.translate("prefDescFormatOption1b","an alternative described version")+"</strong>."):this.hasClosedDesc?(I=this.translate("prefIntroDescription2","The current video has "),I+=" <strong>"+this.translate("prefDescFormatOption2b","text-based description, announced by screen reader")+"</strong>."):I=this.translate("prefIntroDescriptionNone","The current video has no audio description in either format."),o=t("<p>",{html:I}),l=this.translate("prefIntroDescription3","Use the following form to set your preferences related to text-based audio description."),(this.hasOpenDesc||this.hasClosedDesc)&&(l+=" "+this.translate("prefIntroDescription4","After you save your settings, audio description can be toggled on/off using the Description button.")),h=t("<p>",{text:l}),s.append(j,q,o,h)}else"keyboard"==e?(n=this.translate("prefTitleKeyboard","Keyboard Preferences"),r=this.translate("prefIntroKeyboard1","The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list)."),r+=" "+this.translate("prefIntroKeyboard2","Modifier keys (Shift, Alt, and Control) can be assigned below."),r+=" "+this.translate("prefIntroKeyboard3","NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you."),j=t("<p>",{text:r}),s.append(j)):"transcript"==e&&(n=this.translate("prefTitleTranscript","Transcript Preferences"));for(u=t("<div>").attr("role","group"),d="able-prefs-"+e,m=(f=this.mediaId+"-prefs-"+e)+"-legend",u.addClass(d).attr("id",f),"keyboard"===e?((g=t("<h2>"+this.translate("prefHeadingKeyboard1","Modifier keys used for shortcuts")+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(g)):"descriptions"===e&&((g=t("<h2>"+this.translate("prefHeadingTextDescription","Text-based audio description")+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(g)),p=0;p<a.length;p++)if(a[p].group==e&&a[p].label){if(b="able-"+(v=a[p].name),P=this.mediaId+"_"+v,y=t("<div>").addClass(b),"captions"===e){for(T=t('<label for="'+P+'"> '+a[p].label+"</label>"),k=t("<select>",{name:v,id:P}),"prefCaptions"!==v&&"prefCaptionsStyle"!==v&&k.on("change",function(){x=t(this).attr("name"),i.stylizeCaptions(i.$sampleCapsDiv,x)}),w=this.getCaptionsOptions(v),c=0;c<w.length;c++)"prefCaptionsPosition"===v?"overlay"===(A=w[c])?S=this.translate("captionsPositionOverlay","Overlay"):"below"===A&&(A=w[c],S=this.translate("captionsPositionBelow","Below video")):"prefCaptionsFont"===v||"prefCaptionsColor"===v||"prefCaptionsBGColor"===v?(A=w[c][0],S=w[c][1]):"prefCaptionsOpacity"===v?(A=w[c],S=w[c],S+="0%"===A?" ("+this.translate("transparent","transparent")+")":" ("+this.translate("solid","solid")+")"):(A=w[c],S=w[c]),C=t("<option>",{value:A,text:S}),this[v]===A&&C.prop("selected",!0),k.append(C);y.append(T,k)}else if("descriptions"===e){if(T=t('<label for="'+P+'"> '+a[p].label+"</label>"),"prefDescPause"===v||"prefDescVisible"===v)y.addClass("able-prefs-checkbox"),k=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&k.prop("checked",!0),y.append(k,T);else if(this.synth){if(y.addClass("able-prefs-select"),k=t("<select>",{name:v,id:P}),"prefDescVoice"===v&&this.descVoices.length){for(M=this.getPrefDescVoice(),c=0;c<this.descVoices.length;c++)A=this.descVoices[c].name,D=this.descVoices[c].lang.substring(0,2).toLowerCase(),S=A+" ("+this.descVoices[c].lang+")",C=t("<option>",{value:A,"data-lang":D,text:S}),M===A&&C.prop("selected",!0),k.append(C);this.$voiceSelectField=k}else if("prefDescPitch"==v?w=[0,.5,1,1.5,2]:"prefDescRate"==v?w=[.7,.8,.9,1,1.1,1.2,1.5,2,2.5,3]:"prefDescVolume"==v&&(w=[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]),void 0!==w)for(c=0;c<w.length;c++)A=w[c],S=this.makePrefsValueReadable(v,A),C=t("<option>",{value:A,text:S}),this[v]==A&&C.prop("selected",!0),k.append(C),y.append(T,k);k.on("change",function(){i.announceDescriptionText("sample",i.currentSampleText)}),y.append(T,k)}}else T=t('<label for="'+P+'"> '+a[p].label+"</label>"),k=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&k.prop("checked",!0),"keyboard"===e&&k.on("change",function(){"prefAltKey"===(x=t(this).attr("name"))?($=".able-modkey-alt",N=i.tt.prefAltKey+" + "):"prefCtrlKey"===x?($=".able-modkey-ctrl",N=i.tt.prefCtrlKey+" + "):"prefShiftKey"===x&&($=".able-modkey-shift",N=i.tt.prefShiftKey+" + "),"prefNoKeyShortcuts"!==x?t(this).is(":checked")?t($).text(N):t($).text(""):t(this).is(":checked")?t(".able-modkey-item").addClass("hidden"):t(".able-modkey-item").removeClass("hidden")}),y.append(k,T);("prefDescVoice"!==v||this.descVoices.length)&&u.append(y)}if(s.append(u),"captions"===e)this.usingYouTubeCaptions||(this.$sampleCapsDiv=t("<div>",{class:"able-captions-sample"}).text(this.translate("sampleCaptionText","Sample caption text")),s.append(this.$sampleCapsDiv),this.stylizeCaptions(this.$sampleCapsDiv));else if("descriptions"===e)this.synth&&(this.$sampleDescDiv=t("<div>",{class:"able-desc-sample"}).text(this.translate("sampleDescriptionText","Adjust settings to hear this sample text.")),s.append(this.$sampleDescDiv),this.currentSampleText=this.translate("sampleDescriptionText","Adjust settings to hear this sample text."));else if("keyboard"===e){let e=1===this.prefNoKeyShortcuts?"able-modkey-item hidden":"able-modkey-item";for(B=t("<h2>",{text:this.translate("prefHeadingKeyboard2","Current keyboard shortcuts")}),L=t("<ul>"),E=[],O=[],p=0;p<this.controls.length;p++)"play"===this.controls[p]?(E.push(this.translate("play","Play")+"/"+this.translate("pause","Pause")),O.push("p</span> <em>"+this.translate("or","or")+'</em> <span class="able-help-modifiers"> '+this.translate("spacebar","spacebar"))):"restart"===this.controls[p]?(E.push(this.translate("restart","Restart")),O.push("s")):"previous"===this.controls[p]?(E.push(this.translate("prevTrack","Previous track")),O.push("b")):"next"===this.controls[p]?(E.push(this.translate("nextTrack","Next track")),O.push("n")):"rewind"===this.controls[p]?(E.push(this.translate("rewind","Rewind")),O.push("r")):"forward"===this.controls[p]?(E.push(this.translate("forward","Forward")),O.push("f")):"volume"===this.controls[p]?(E.push(this.translate("volume","Volume")),O.push("v</span> <em>"+this.translate("or","or")+'</em> <span class="able-modkey">1-9'),E.push(this.translate("mute","Mute")+"/"+this.translate("unmute","Unmute")),O.push("m")):"captions"===this.controls[p]?(this.captions.length>1?E.push(this.translate("captions","Captions")):this.captionsOn?E.push(this.translate("hideCaptions","Hide captions")):E.push(this.translate("showCaptions","Show captions")),O.push("c")):"descriptions"===this.controls[p]?(this.descOn?E.push(this.translate("turnOffDescriptions","Turn off descriptions")):E.push(this.translate("turnOnDescriptions","Turn on descriptions")),O.push("d")):"prefs"===this.controls[p]&&(E.push(this.translate("preferences","Preferences")),O.push("e"));for(p=0;p<O.length;p++)R='<span class="able-modkey-alt">',1===this.prefAltKey&&(R+=this.translate("prefAltKey","Alt")+" + "),R+="</span>",R+='<span class="able-modkey-ctrl">',1===this.prefCtrlKey&&(R+=this.translate("prefCtrlKey","Control")+" + "),R+="</span>",R+='<span class="able-modkey-shift">',1===this.prefShiftKey&&(R+=this.translate("prefShiftKey","Shift")+" + "),R+="</span>",R+='<span class="able-modkey">'+O[p]+"</span>",R+=" = "+E[p],F=t("<li>",{class:e,html:R}),L.append(F);R='<span class="able-modkey">'+this.translate("escapeKey","Escape")+"</span>",R+=" = "+this.translate("escapeKeyFunction","Close current dialog or popup menu"),F=t("<li>",{html:R}),L.append(F),s.append(B,L)}t("body").append(s),V=new AccessibleDialog(s,this.$prefsButton,n,i.tt.closeButtonLabel),W=t('<div class="able-prefs-buttons"></div>'),z=t('<button class="modal-button">'+this.translate("save","Save")+"</button>"),H=t('<button class="modal-button">'+this.translate("cancel","Cancel")+"</button>"),z.on("click",function(){V.hide(),i.savePrefsFromForm()}),H.on("click",function(){V.hide(),i.resetPrefsForm()}),W.append(z,H),s.append(W),"captions"!==e&&"transcript"!==e||u.attr("aria-labelledby",V.titleH1.attr("id")),"captions"===e?this.captionPrefsDialog=V:"descriptions"===e?this.descPrefsDialog=V:"keyboard"===e?this.keyboardPrefsDialog=V:"transcript"===e&&(this.transcriptPrefsDialog=V),t("div.able-prefs-form button.modalCloseButton").on("click",function(){i.resetPrefsForm()}),t("div.able-prefs-form").on("keydown",function(t){"Escape"===t.key&&i.resetPrefsForm()})},AblePlayer.prototype.getPrefDescVoice=function(){var t,e,i;if(t=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,(e=this.getPref()).voices)for(i=0;i<e.voices.length;i++)if(e.voices[i].lang===t)return e.voices[i].name;return null},AblePlayer.prototype.rebuildDescPrefsForm=function(){var e,i,a,s;for(this.$voiceSelectField=t("#"+this.mediaId+"_prefDescVoice"),this.$voiceSelectField.empty(),e=0;e<this.descVoices.length;e++)a=(i=this.descVoices[e].name)+" ("+this.descVoices[e].lang+")",s=t("<option>",{value:i,"data-lang":this.descVoices[e].lang.substring(0,2).toLowerCase(),text:a}),this.prefDescVoice==i&&s.prop("selected",!0),this.$voiceSelectField.append(s)},AblePlayer.prototype.makePrefsValueReadable=function(t,e){if("prefDescPitch"===t){if(0===e)return this.translate("prefDescPitch1","Very low");if(.5===e)return this.translate("prefDescPitch2","Low");if(1===e)return this.translate("prefDescPitch3","Default");if(1.5===e)return this.translate("prefDescPitch4","High");if(2===e)return this.translate("prefDescPitch5","Very high")}else if("prefDescRate"===t){if(.7===e)return 1;if(.8===e)return 2;if(.9===e)return 3;if(1===e)return 4;if(1.1===e)return 5;if(1.2===e)return 6;if(1.5===e)return 7;if(2===e)return 8;if(2.5===e)return 9;if(3===e)return 10}else if("prefDescVolume"===t)return 10e;return e},AblePlayer.prototype.resetPrefsForm=function(){var e,i,a,s;for(e=this.getPref(),i=this.getAvailablePreferences(),a=0;a<i.length;a++)-1!==(s=i[a].name).indexOf("Captions")&&"prefCaptions"!==s?t('select[name="'+s+'"]').val(e.preferences[s]):1===this[s]?t('input[name="'+s+'"]').prop("checked",!0):t('input[name="'+s+'"]').prop("checked",!1);this.stylizeCaptions(this.$sampleCapsDiv)},AblePlayer.prototype.savePrefsFromForm=function(){var e,i,a,s,n,r,o,l,h,p,c,u;o=0,h=0,p=!1,e=this.getPref(),i=this.getAvailablePreferences();for(var d=0;d<i.length;d++)if(i[d].label)if(a=i[d].name,s=this.mediaId+"_"+a,"prefDescVoice"===a){void 0===e.voices&&(e.voices=[]),n=this.mediaId+"_prefDescVoice",this.prefDescVoice=t("select#"+n).find(":selected").val(),this.prefDescVoiceLang=t("select#"+n).find(":selected").attr("data-lang"),l=!1;for(var f=0;f<e.voices.length;f++)e.voices[f].lang===this.prefDescVoiceLang&&(l=!0,e.voices[f].name=this.prefDescVoice);l||(r={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(r)),o++}else"prefDescMethod"==a?(this.prefDescMethod="video",this.prefDescMethod!==e.preferences.prefDescMethod&&(e.preferences.prefDescMethod=this.prefDescMethod,o++)):-1!==a.indexOf("Captions")&&"prefCaptions"!==a?(u=t('select[id="'+s+'"]').val(),e.preferences[a]!==u&&(e.preferences[a]=u,this[a]=u,o++,h++),"prefCaptionsSize"===a&&(p=!0,c=u)):-1!==a.indexOf("Desc")&&"prefDescPause"!==a&&"prefDescVisible"!==a?(u=t('select[id="'+s+'"]').val(),e.preferences[a]!==u&&(e.preferences[a]=u,this[a]=u,o++)):t('input[id="'+s+'"]').is(":checked")?(e.preferences[a]=1,1===this[a]||(this[a]=1,o++)):(e.preferences[a]=0,1===this[a]&&(this[a]=0,o++));if(o>0?(this.setPrefs(e),this.showAlert(this.translate("prefSuccess","Your changes have been saved."))):this.showAlert(this.translate("prefNoChange","You didn't make any changes")),"youtube"===this.player&&void 0!==this.usingYouTubeCaptions&&this.usingYouTubeCaptions&&p&&this.youTubePlayer.setOption("captions","fontSize",this.translatePrefs("size",c,"youtube")),AblePlayerInstances.length>1)for(d=0;d<AblePlayerInstances.length;d++)AblePlayerInstances[d].updatePlayerPrefs(),AblePlayerInstances[d].loadCurrentPreferences(),AblePlayerInstances[d].resetPrefsForm(),h>0&&(AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$captionsDiv),void 0!==AblePlayerInstances[d].$descDiv&&AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$descDiv));else this.updatePlayerPrefs(),h>0&&(this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv))},AblePlayer.prototype.updatePlayerPrefs=function(){this.$transcriptDiv&&(1===this.prefTabbable?this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"):this.$transcriptDiv.find("span.able-transcript-seekpoint").removeAttr("tabindex"),0===this.prefHighlight&&this.$transcriptDiv.find("span").removeClass("able-highlight")),this.updateCaption(),this.initDescription()},AblePlayer.prototype.usingModifierKeys=function(t){return!(1===this.prefAltKey&&!t.altKey)&&(!(1===this.prefCtrlKey&&!t.ctrlKey)&&!(1===this.prefShiftKey&&!t.shiftKey))}}(jQuery),function(t){function actList(t,e){for(var i=[],a=0;a<e.length;a++)i.push(act(t,e[a]));return i}function act(t,e){var i=e(t);if(null!==t.error)throw t.error;return i}function updatePosition(t,e){for(var i=0;i<e.length;i++)"\n"===e[i]?(t.column=1,t.line+=1):t.column+=1}function cut(t,e){var i=t.text.substring(0,e);return updatePosition(t,i),t.text=t.text.substring(e),i}function cutLine(t,e){var i,a=t.text.indexOf("\n");return-1===a?(updatePosition(t,i=t.text),t.text=""):(i=t.text.substring(0,a),updatePosition(t,i+"\n"),t.text=t.text.substring(a+1)),i}function peekLine(t){var e=t.text.indexOf("\n");return-1===e?t.text:t.text.substring(0,e)}function parseFileBody(t){actList(t,[eatOptionalBOM,eatSignature]);var e=t.text[0];" "===e||"\t"===e||"\n"===e?actList(t,[eatUntilEOLInclusive,parseMetadataHeaders,eatAtLeast1EmptyLines,parseCuesAndComments]):t.error="WEBVTT signature not followed by whitespace."}function parseMetadataHeaders(t){for(;;){var e=peekLine(t);if(-1!==e.indexOf("--\x3e"))return;if(0===e.length)return;var i=act(t,getMetadataKeyValue);t.metadata[i[0]]=i[1],act(t,eatUntilEOLInclusive)}}function nextSpaceOrNewline(t){var e=[],i=t.indexOf(" ");i>=0&&e.push(i);var a=t.indexOf("\t");a>=0&&e.push(a);var s=t.indexOf("\n");return s>=0&&e.push(s),Math.min.apply(null,e)}function getMetadataKeyValue(t){var e=t.text.indexOf("\n"),i=cut(t,e),a=i.indexOf(":");return-1===a?void(t.error="Missing colon."):[i.substring(0,a),i.substring(a+1)]}function getSettingsKeyValue(t){var e=cut(t,nextSpaceOrNewline(t.text)),i=e.indexOf(":");return-1===i?void(t.error="Missing colon."):[e.substring(0,i),e.substring(i+1)]}function parseCuesAndComments(t){for(;;){var e=peekLine(t);if(0!==e.indexOf("NOTE")||4!==e.length&&" "!==e[4]&&"\t"!==e[4])if(0===e.trim().length&&t.text.length>0)act(t,eatEmptyLines);else{if(!(e.trim().length>0))return;act(t,parseCue)}else actList(t,[eatComment,eatEmptyLines])}}function parseCue(t){var e,i=peekLine(t);if(-1===i.indexOf("--\x3e")&&(e=cutLine(t),-1===(i=peekLine(t)).indexOf("--\x3e")))return"Invalid WebVTT file: "+t.src+"\n","Line: "+t.line+", ","Column: "+t.column+"\n",void(console.warn||console.log);var a=actList(t,[getTiming,eatAtLeast1SpacesOrTabs,eatArrow,eatAtLeast1SpacesOrTabs,getTiming]),s=a[0],n=a[4];if(s>=n)t.error="Start time is not sooner than end time.";else{act(t,eatSpacesOrTabs);var r=act(t,getCueSettings);cut(t,1);var o=act(t,getCuePayload);void 0===e&&(e=t.cues.length+1),t.cues.push({id:e,start:s,end:n,settings:r,components:o})}}function getCueSettings(t){for(var e={};t.text.length>0&&"\n"!==t.text[0];){var i=act(t,getSettingsKeyValue);e[i[0]]=i[1],act(t,eatSpacesOrTabs)}return e}function getCuePayload(e){for(var i={type:"internal",tagName:"",value:"",classes:[],annotation:"",parent:null,children:[],language:""},a=i,s=[];e.text.length>0;){var n=peekLine(e);if(-1!==n.indexOf("--\x3e")||/^\s+$/.test(n))break;if(e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]){cut(e,2);break}var r=getCueToken(e);if("string"===r.type)a.children.push(r);else if("startTag"===r.type)r.type=r.tagName,r.parent=a,-1!==t.inArray(r.tagName,["i","b","u","ruby"])||"rt"===r.tagName&&"ruby"===a.tagName?(s.length>0&&(a.language=s[s.length-1]),a.children.push(r),a=r):"c"===r.tagName||"v"===r.tagName?(r.value=r.annotation,s.length>0&&(a.language=s[s.length-1]),a.children.push(r),a=r):"lang"===r.tagName&&(s.push(r.annotation),s.length>0&&(a.language=s[s.length-1]),a.children.push(r),a=r);else if("endTag"===r.type)r.tagName===a.type&&-1!==t.inArray(r.tagName,["c","i","b","u","ruby","rt","v"])?a=a.parent:"lang"===r.tagName&&"lang"===a.type?(a=a.parent,s.pop()):"ruby"===r.tagName&&"rt"===a.type&&(a=a.parent.parent);else if("timestampTag"===r.type){var o={text:r.value,error:null,metadata:{},cues:[],line:1,column:1};try{var l=act(o,getTiming);0===o.text.length&&(r.value=l,a.push(r))}catch(t){}}}return i}function getCueToken(t){for(var e="data",i=[],a="",s={type:"",tagName:"",value:"",classes:[],annotation:"",children:[]};;){var n;if(n=t.text.length>=2&&"\n"===t.text[0]&&"\n"===t.text[1]?"":t.text.length>0?t.text[0]:"","data"===e)if("&"===n)a="&",e="escape";else if("<"===n){if(0!==i.length)return s.type="string",s.value=i.join(""),s;e="tag"}else{if(""===n)return{type:"string",value:i.join("")};i.push(n)}else if("escape"===e)if("&"===n)i.push(a),a="&";else if(n.match(/[0-9a-z]/))a+=n;else if(";"===n)"&"===a?i.push("&"):"<"===a?i.push("<"):">"===a?i.push(">"):"&lrm"===a?i.push("‎"):"&rlm"===a?i.push("‏"):" "===a?i.push(" "):(i.push(a),i.push(";")),e="data";else{if("<"===n||""===n)return i.push(a),s.type="string",s.value=i.join(""),s;if("\t"===n||"\n"===n||"\f"===n||" "===n)return i.push(a),s.type="string",s.value=i.join(""),s;i.push(a),e="data"}else if("tag"===e)if("\t"===n||"\n"===n||"\f"===n||" "===n)e="startTagAnnotation";else if("."===n)e="startTagClass";else if("/"===n)e="endTag";else if(n.match("[0-9]"))e="timestampTag",i.push(n);else{if(">"===n){cut(t,1);break}if(""===n)return s.tagName="",s.type="startTag",s;i.push(n),e="startTag"}else if("startTag"===e)if("\t"===n||"\f"===n||" "===n)e="startTagAnnotation";else if("\n"===n)a=n,e="startTagAnnotation";else if("."===n)e="startTagClass";else{if(">"===n)return cut(t,1),s.tagName=i.join(""),s.type="startTag",s;if(""===n)return s.tagName=i.join(""),s.type="startTag",s;i.push(n)}else if("startTagClass"===e)if("\t"===n||"\f"===n||" "===n)s.classes.push(a),a="",e="startTagAnnotation";else if("\n"===n)s.classes.push(a),a=n,e="startTagAnnotation";else if("."===n)s.classes.push(a),a="";else{if(">"===n)return cut(t,1),s.classes.push(a),s.type="startTag",s.tagName=i.join(""),s;if(""===n)return s.classes.push(a),s.type="startTag",s.tagName=i.join(""),s;a+="c"}else if("startTagAnnotation"===e){if(">"===n)return cut(t,1),a=a.trim().replace(/ +/," "),s.type="startTag",s.tagName=i.join(""),s.annotation=a,s;if(""===n)return a=a.trim().replace(/ +/," "),s.type="startTag",s.tagName=i.join(""),s.annotation=a,s;a+=n}else if("endTag"===e){if(">"===n)return cut(t,1),s.type="endTag",s.tagName=i.join(""),s;if(""===n)return s.type="endTag",s.tagName=i.join(""),s;i.push(n)}else{if("timestampTag"!==e)throw"Unknown tokenState "+e;if(">"===n)return cut(t,1),s.type="timestampTag",s.name=i.join(""),s;if(""===n)return s.type="timestampTag",s.name=i.join(""),s;i.push(n)}cut(t,1)}}function eatComment(t){if(-1===cutLine(t).indexOf("--\x3e"))for(;;){var e=peekLine(t);if(0===e.trim().length)return;if(-1!==e.indexOf("--\x3e"))return void(t.error="Invalid syntax: --\x3e in comment.");cutLine(t)}else t.error="Invalid syntax: --\x3e in NOTE line."}function eatOptionalBOM(t){"\ufeff"===t.text[0]&&cut(t,1)}function eatSignature(t){"WEBVTT"===t.text.substring(0,6)?cut(t,6):t.error="Invalid signature."}function eatArrow(t){t.text.length<3||"--\x3e"!==t.text.substring(0,3)?t.error="Missing --\x3e":cut(t,3)}function eatSpacesOrTabs(t){for(;"\t"===t.text[0]||" "===t.text[0];)cut(t,1)}function eatAtLeast1SpacesOrTabs(t){for(var e=0;"\t"===t.text[0]||" "===t.text[0];)cut(t,1),e+=1;0===e&&(t.error="Missing space.")}function eatUntilEOLInclusive(t){var e=t.text.indexOf("\n");-1===e?t.error="Missing EOL.":cut(t,e+1)}function eatEmptyLines(t){for(;t.text.length>0;){if(0!==peekLine(t).trim().length)break;cutLine(t)}}function eatAtLeast1EmptyLines(t){for(var e=0;t.text.length>0;){if(0!==peekLine(t).trim().length)break;cutLine(t),e+=1}0===e&&(t.error="Missing empty line.")}function getTiming(t){var e=nextSpaceOrNewline(t.text);if(-1!==e){var i=cut(t,e),a=/((\d+):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(i);if(a){var s=0,n=a[2],r=a[4];if(r){if(parseInt(r,10)>59)return void(t.error="Invalid minute range");n&&(s+=3600parseInt(n,10)),s+=60parseInt(r,10);var o=a[5];if(parseInt(o,10)>59)return void(t.error="Invalid second range");s+=parseInt(o,10),s+=parseInt(a[6],10)/1e3}else s+=parseInt(a[7],10),s+=parseInt(a[8],10)/1e3;return s}t.error="Unable to parse timestamp"}else t.error("Missing timing.")}AblePlayer.prototype.parseWebVTT=function(t){let e=t.src,i=t.text;i=i.replace(/(\r\n|\n|\r)/g,"\n");var a={src:e,text:i,error:null,metadata:{},cues:[],line:1,column:1};try{act(a,parseFileBody)}catch(t){console.warn||console.log}return a}}(jQuery),function(t){AblePlayer.prototype.injectPlayerCode=function(){var e;this.$mediaContainer=this.$media.wrap('<div class="able-media-container"></div>').parent(),this.$ableDiv=this.$mediaContainer.wrap('<div class="able"></div>').parent(),this.$ableWrapper=this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(),this.$ableWrapper.addClass("able-skin-"+this.skin),"video"===this.mediaType&&("image"==this.iconType||"youtube"===this.player&&!this.hasPoster||this.injectBigPlayButton()),e=t("<div>"),"video"===this.mediaType?e.addClass("able-vidcap-container"):"audio"===this.mediaType&&(e.addClass("able-audcap-container"),e.addClass("captions-off")),this.injectPlayerControlArea(),this.$captionsContainer=this.$mediaContainer.wrap(e).parent(),this.injectAlert(this.$ableDiv),this.injectPlaylist(),this.injectAudioPoster(),this.injectOffscreenHeading()},AblePlayer.prototype.injectAudioPoster=function(){if("audio"===this.mediaType&&this.hasPoster){audioPoster=DOMPurify.sanitize(this.audioPoster),audioPosterAlt=DOMPurify.sanitize(this.audioPosterAlt);let t=document.createElement("img");t.setAttribute("src",audioPoster),t.setAttribute("alt",audioPosterAlt),this.$audioWrapper=this.$playerDiv.wrap('<div class="able-audio-wrapper">').parent(),this.$audioWrapper.prepend(t)}},AblePlayer.prototype.injectOffscreenHeading=function(){var e;"0"==this.playerHeadingLevel||(void 0===this.playerHeadingLevel&&(this.playerHeadingLevel=this.getNextHeadingLevel(this.$ableDiv)),e="h"+this.playerHeadingLevel.toString(),this.$headingDiv=t("<"+e+">"),this.$ableDiv.prepend(this.$headingDiv),this.$headingDiv.addClass("able-offscreen"),this.$headingDiv.text(this.translate("playerHeading","Media player")))},AblePlayer.prototype.injectBigPlayButton=function(){var e=this;this.$bigPlayButton=t("<button>",{class:"able-big-play-button","aria-hidden":!1,"aria-label":this.translate("play","Play"),type:"button",tabindex:0}),this.getIcon(this.$bigPlayButton,"play"),this.$bigPlayButton.on("click",function(){e.handlePlay()}),this.$mediaContainer.append(this.$bigPlayButton)},AblePlayer.prototype.injectPlayerControlArea=function(){this.$playerDiv=t("<div>",{class:"able-player",role:"region","aria-label":"audio"===this.mediaType?this.translate("audioPlayer","audio player"):this.translate("videoPlayer","video player")}),this.$playerDiv.addClass("able-"+this.mediaType),this.hasPlaylist&&this.showNowPlaying&&(this.$nowPlayingDiv=t("<div>",{class:"able-now-playing","aria-live":"assertive","aria-atomic":"true"})),this.$controllerDiv=t("<div>",{class:"able-controller"}),this.$controllerDiv.addClass("able-"+this.iconColor+"-controls"),this.$statusBarDiv=t("<div>",{class:"able-status-bar"}),this.$timer=t("<span>",{class:"able-timer"}),this.$elapsedTimeContainer=t("<span>",{class:"able-elapsedTime",text:"0:00"}),this.$durationContainer=t("<span>",{class:"able-duration"}),this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer),this.$speed=t("<span>",{class:"able-speed","aria-live":"assertive","aria-atomic":"true"}).text(this.translate("speed","Speed")+": 1x"),this.$status=t("<span>",{class:"able-status","aria-live":"polite"}),this.$statusBarDiv.append(this.$timer,this.$speed,this.$status),this.showNowPlaying?this.$playerDiv.append(this.$nowPlayingDiv,this.$controllerDiv,this.$statusBarDiv):this.$playerDiv.append(this.$controllerDiv,this.$statusBarDiv),"video"===this.mediaType?this.$ableDiv.append(this.$playerDiv):this.$ableDiv.prepend(this.$playerDiv)},AblePlayer.prototype.injectTextDescriptionArea=function(){this.$descDiv=t("<div>",{class:"able-descriptions"}),this.$descDiv.attr({"aria-live":"assertive","aria-atomic":"true"}),this.$descDiv.hide(),this.$ableDiv.append(this.$descDiv)},AblePlayer.prototype.getDefaultWidth=function(t){let e=window.innerWidth;return"transcript"===t?e<=450?e:450:"sign"===t?e<=400?e:400:void 0},AblePlayer.prototype.rePositionDraggableWindow=function(t){let e,i;e=this.getPref(),i="transcript"===t?this.$transcriptArea:this.$signWindow,"transcript"===t&&i?(void 0!==e.transcript&&(this.prevTranscriptPosition=e.transcript),i.css({top:0,left:0})):"sign"===t&&i&&(void 0!==e.sign&&(this.prevSignPosition=e.sign),i.css({top:0,right:0,left:"auto"}))},AblePlayer.prototype.positionDraggableWindow=function(e,i){var a,s,n,r,o,l;a=this.getPref(),(n="transcript"===e?this.$transcriptArea:this.$signWindow)&&("transcript"===e?(void 0!==a.transcript&&(s=a.transcript),this.prevTranscriptPosition&&(s=this.prevTranscriptPosition,this.prevTranscriptPosition=!1)):"sign"===e&&(void 0!==a.sign&&(s=a.sign),this.prevSignPosition&&(s=this.prevSignPosition,this.prevSignPosition=!1)),void 0===s||t.isEmptyObject(s)?(r=this.getOptimumPosition(e,i),void 0===i&&(i=this.getDefaultWidth(e)),n.css({position:r[0],width:i,"z-index":r[3]}),"absolute"===r[0]&&n.css({top:r[1]+"px",left:r[2]+"px"})):(n.css({position:s.position,width:s.width,"z-index":s.zindex}),"absolute"===s.position&&(n.css({top:s.top,left:s.left}),topPosition=n.offset().top,leftPosition=n.offset().left,o=window.innerWidth,l=n.width(),topPosition<0&&n.css({top:s.top-topPosition}),leftPosition<0&&!this.restoringAfterFullscreen&&n.css({left:s.left-leftPosition}),o-leftPosition<30&&n.css({left:o-l})),this.updateZIndex(e)))},AblePlayer.prototype.getOptimumPosition=function(e,i){var a,s,n,r,o;return void 0===i&&(i=this.getDefaultWidth(e)),a=[],s=this.$ableDiv.width(),n=this.$ableDiv.offset().left,r=t(window).width(),o=0,"transcript"===e?void 0!==this.$signWindow&&this.$signWindow.is(":visible")&&(o=this.$signWindow.width()+5):"sign"===e&&void 0!==this.$transcriptArea&&this.$transcriptArea.is(":visible")&&(o=this.$transcriptArea.width()+5),i<r-(n+s+5+o)?(a[0]="absolute",a[1]=0,a[2]=s+o+5):i+5<n?(a[0]="absolute",a[1]=0,a[2]=n-i-5):a[0]="relative",a},AblePlayer.prototype.injectAlert=function(e){this.$alertBox=t('<div role="alert"></div>'),this.$alertBox.addClass("able-alert"),this.$alertBox.hide(),t("<span></span>").appendTo(this.$alertBox);var i=t('<button type="button"></button>');i.attr("aria-label",this.translate("dismissButton","Dismiss")),i.text("×"),i.appendTo(this.$alertBox),i.on("click",function(e){t(this).parent("div").hide()}),this.$alertBox.appendTo(e),this.$srAlertBox||(this.$srAlertBox=t('<div role="alert"></div>'),this.$srAlertBox.addClass("able-screenreader-alert"),this.$srAlertBox.appendTo(e))},AblePlayer.prototype.injectPlaylist=function(){if(!0===this.playlistEmbed){var t=this.$playlistDom.clone();t.insertBefore(this.$statusBarDiv),this.$playlist=t.find("li")}},AblePlayer.prototype.createPopup=function(e,i){var a,s,n,r,o,l,h,p,c,u,d,f,g,m;if(a=this,s=t("<ul>",{id:this.mediaId+"-"+e+"-menu",class:"able-popup",role:"menu"}).hide(),"captions"===e&&s.addClass("able-popup-captions"),"prefs"===e)if(this.prefCats.length>1){for(n=0;n<this.prefCats.length;n++)o=this.prefCats[n],g=!!(a.hasDescTracks||a.hasOpenDesc||a.hasClosedDesc),m=null!==a.transcriptType,"descriptions"===o&&!g||"transcript"===o&&!m||(r=t("<li></li>",{role:"menuitem",tabindex:"-1"}),"captions"===o?r.text(this.translate("prefMenuCaptions","Captions")):"descriptions"===o?r.text(this.translate("prefMenuDescriptions","Descriptions")):"keyboard"===o?r.text(this.translate("prefMenuKeyboard","Keyboard")):"transcript"===o&&r.text(this.translate("prefMenuTranscript","Transcript")),r.on("click",function(){l=t(this).text(),a.showingPrefsDialog=!0,a.setFullscreen(!1),l===a.tt.prefMenuCaptions?a.captionPrefsDialog.show():l===a.tt.prefMenuDescriptions?a.descPrefsDialog.show():l===a.tt.prefMenuKeyboard?a.keyboardPrefsDialog.show():l===a.tt.prefMenuTranscript&&a.transcriptPrefsDialog.show(),a.closePopups(),a.showingPrefsDialog=!1}),s.append(r));this.$prefsButton.attr("data-prefs-popup","menu")}else 1==this.prefCats.length&&this.$prefsButton.attr("data-prefs-popup",this.prefCats[0]);else if("captions"===e||"chapters"===e){for(h=!1,n=0;n<i.length;n++)p=i[n],("captions"!==e||"html5"!==this.player||void 0!==p.cues)&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1",lang:p.language}),p.def&&1==this.prefCaptions?(r.attr("aria-checked","true"),h=!0):r.attr("aria-checked","false"),"captions"==e?(r.text(p.label),r.on("click",this.getCaptionClickFunction(p))):"chapters"==e&&(r.text(this.flattenCueForCaption(p)+" - "+this.formatSecondsAsColonTime(p.start)),r.on("click",this.getChapterClickFunction(p.start))),s.append(r));"captions"===e&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1"}).text(this.translate("captionsOff","Captions off")),0===this.prefCaptions?(r.attr("aria-checked","true"),h=!0):r.attr("aria-checked","false"),r.on("click",this.getCaptionOffFunction()),s.append(r))}else if("transcript-window"===e||"sign-window"===e)for((c=[]).push({name:"move",label:this.translate("windowMove","Move")}),c.push({name:"resize",label:this.translate("windowResize","Resize")}),c.push({name:"close",label:this.translate("windowClose","Close")}),n=0;n<c.length;n++)(r=t("<li></li>",{role:"menuitem",tabindex:"-1","data-choice":c[n].name})).text(c[n].label),r.on("click",function(i){if(i.stopPropagation(),void 0!==i.button&&0!==i.button)return!1;a.windowMenuClickRegistered||a.finishingDrag||(a.windowMenuClickRegistered=!0,a.handleMenuChoice(e.substring(0,e.indexOf("-")),t(this).attr("data-choice"),i))}),s.append(r);return"captions"!==e||h?"chapters"===e&&(s.find('li:contains("'+this.defaultChapter+'")')?s.find('li:contains("'+this.defaultChapter+'")').attr("aria-checked","true").addClass("able-focus"):s.find("li").first().attr("aria-checked","true").addClass("able-focus")):s.find("li[lang="+this.captionLang+"]")?s.find("li[lang="+this.captionLang+"]").attr("aria-checked","true"):s.find("li").last().attr("aria-checked","true"),s.on("keydown",function(e){(u=t(this).find("li:focus")).is(":first-child")?(d=t(this).find("li").last(),f=u.next()):u.is(":last-child")?(d=u.prev(),f=t(this).find("li").first()):(d=u.prev(),f=u.next()),"Tab"===e.key?e.shiftKey?(u.removeClass("able-focus"),d.trigger("focus").addClass("able-focus")):(u.removeClass("able-focus"),f.trigger("focus").addClass("able-focus")):"ArrowDown"===e.key||"ArrowRight"===e.key?(u.removeClass("able-focus"),f.trigger("focus").addClass("able-focus")):"ArrowUp"==e.key||"ArrowLeft"===e.key?(u.removeClass("able-focus"),d.trigger("focus").addClass("able-focus")):" "===e.key||"Enter"===e.key?u.trigger("click"):"Escape"===e.key&&(u.removeClass("able-focus"),a.closePopups(),e.stopPropagation),e.preventDefault()}),this.$controllerDiv.append(s),s},AblePlayer.prototype.closePopups=function(){var t=this;this.chaptersPopup&&this.chaptersPopup.is(":visible")&&(this.chaptersPopup.hide(),this.$chaptersButton.attr("aria-expanded","false").trigger("focus")),this.captionsPopup&&this.captionsPopup.is(":visible")&&(this.captionsPopup.hide(),this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)),this.prefsPopup&&this.prefsPopup.is(":visible")&&!this.hidingPopup&&(this.hidingPopup=!0,this.prefsPopup.hide(),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$prefsButton.attr("aria-expanded","false"),this.showingPrefsDialog||this.waitThenFocus(t.$prefsButton),setTimeout(function(){t.hidingPopup=!1},100)),this.$volumeSlider&&this.$volumeSlider.is(":visible")&&(this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").trigger("focus")),this.$transcriptPopup&&this.$transcriptPopup.is(":visible")&&(this.hidingPopup=!0,this.$transcriptPopup.hide(),this.$transcriptPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$transcriptPopupButton.attr("aria-expanded","false").trigger("focus"),setTimeout(function(){t.hidingPopup=!1},100)),this.$signPopup&&this.$signPopup.is(":visible")&&(this.$signPopup.hide(),this.$signPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$signPopupButton.attr("aria-expanded","false").trigger("focus"))},AblePlayer.prototype.setupPopups=function(t){var e,i;if(e=[],void 0===t&&e.push("prefs"),"captions"!==t&&void 0!==t||this.captions.length>0&&e.push("captions"),"chapters"!==t&&void 0!==t||this.chapters.length>0&&this.useChaptersButton&&e.push("chapters"),"transcript-window"===t&&"popup"===this.transcriptType&&e.push("transcript-window"),"sign-window"===t&&this.hasSignLanguage&&e.push("sign-window"),e.length>0){0;for(var a=0;a<e.length;a++){var s=e[a];if("prefs"==s)this.prefsPopup=this.createPopup("prefs");else if("captions"==s)void 0!==this.captionsPopup&&this.captionsPopup||(this.captionsPopup=this.createPopup("captions",this.captions));else if("chapters"==s)i=this.selectedChapters?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[],void 0!==this.chaptersPopup&&this.chaptersPopup||(this.chaptersPopup=this.createPopup("chapters",i));else{if("transcript-window"==s)return this.createPopup("transcript-window");if("sign-window"==s)return this.createPopup("sign-window")}}}},AblePlayer.prototype.provideFallback=function(){var e,i;if(!this.usingFallback){if(this.usingFallback=!0,this.testFallback||(this.testFallback=1),void 0===this.$media&&(this.$media=t(this.media)),this.$media.attr("id")?this.mediaId=this.$media.attr("id"):this.mediaId="media"+Math.floor(1e9Math.random()).toString(),this.hasFallback=!1,this.$media.children().length)for(e=0;e<this.$media.children().length&&!this.hasFallback;)"SOURCE"!==this.$media.children()[e].tagName&&"TRACK"!==this.$media.children()[e].tagName&&(this.hasFallback=!0),e++;if(this.hasFallback||(i=t("<p>").text("Media player unavailable."),this.$media.append(i)),this.$media.attr("width")&&this.$media.css("width",this.$media.attr("width")+"px"),this.$media.attr("height")&&this.$media.css("height",this.$media.attr("height")+"px"),this.$media.removeAttr("data-able-player"),this.$media.prop("controls",!0),2==this.testFallback){if(t(this.$media).replaceWith(t('<foobar id="foobar-'+this.mediaId+'">')),this.$newFallbackElement=t("#foobar-"+this.mediaId),this.$media.children().length)for(e=this.$media.children().length-1;e>=0;)this.$newFallbackElement.prepend(t(this.$media.children()[e])),e--;this.hasFallback||this.$newFallbackElement.append(i)}}},AblePlayer.prototype.calculateControlLayout=function(){var t,e,i;return(t=[])[0]=[],t[1]=[],"legacy"===this.skin&&(t[2]=[],t[3]=[]),t[0].push("play"),t[0].push("restart"),t[0].push("rewind"),t[0].push("forward"),"legacy"===this.skin&&t[1].push("seek"),this.hasPlaylist&&(this.skin,t[0].push("previous"),t[0].push("next")),this.isPlaybackRateSupported()?(e=!0,"legacy"===this.skin&&(t[2].push("slower"),t[2].push("faster"))):e=!1,i=0,this.hasCaptions&&(i++,"legacy"===this.skin?t[2].push("captions"):t[1].push("captions")),this.hasSignLanguage&&(i++,"legacy"===this.skin?t[2].push("sign"):t[1].push("sign")),"video"===this.mediaType&&(this.hasOpenDesc||this.hasClosedDesc)&&(i++,"legacy"===this.skin?t[2].push("descriptions"):t[1].push("descriptions")),null===this.transcriptType||this.hideTranscriptButton||(i++,"legacy"===this.skin?t[2].push("transcript"):t[1].push("transcript")),this.hasChapters&&this.useChaptersButton&&(i++,"legacy"===this.skin?t[2].push("chapters"):t[1].push("chapters")),"2020"==this.skin&&i>0&&t[1].push("pipe"),e&&"2020"===this.skin&&(t[1].push("faster"),t[1].push("slower"),t[1].push("pipe")),"legacy"===this.skin?t[3].push("preferences"):t[1].push("preferences"),"video"===this.mediaType&&this.allowFullscreen&&this.nativeFullscreenSupported()&&("legacy"===this.skin?t[3].push("fullscreen"):t[1].push("fullscreen")),this.browserSupportsVolume()?(this.volumeButton="volume-"+this.getVolumeName(this.volume),this.skin,t[1].push("volume")):this.volume=!1,t},AblePlayer.prototype.addControls=function(){var e,i,a,s,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P,T,k,w,C,A,D,S,x;e=this,a=(i=this.calculateControlLayout()).length,P=this.mediaId+"-tooltip",this.$tooltipDiv=t("<div>",{id:P,class:"able-tooltip"}).hide(),this.$controllerDiv.append(this.$tooltipDiv),"2020"==this.skin&&(l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.translate("seekbarLabel","timeline"),this.$controllerDiv.append(l),this.seekBar=new AccessibleSlider(l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible"));let $=t('<div class="able-control-row"></div>');for(this.$controllerDiv.append($),s=0;s<a;s++){for(r=i[s],o=t("<div>",s%2==0?{class:"able-left-controls"}:{class:"able-right-controls"}),$.append(o),n=0;n<r.length;n++){if("seek"===(c=r[n]))l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.translate("seekbarLabel","timeline"),o.append(l),void 0!==this.duration&&0!==this.duration||(this.duration=60,this.elapsed=0),this.seekBar=new AccessibleSlider(l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible");else if("pipe"===c)(p=t("<span>",{tabindex:"-1","aria-hidden":"true",class:"able-pipe"})).append("|"),o.append(p);else{u=this.getButtonTitle(c),d=t("<div>",{role:"button",tabindex:"0",class:"able-button-handler-"+c}),"volume"!==c&&"preferences"!==c&&"captions"!==c||("preferences"==c?(this.prefCats=this.getPreferencesGroups(),this.prefCats.length>1?(x=this.mediaId+"-prefs-menu",d.attr({"aria-controls":x,"aria-haspopup":"menu","aria-expanded":"false"})):1===this.prefCats.length&&d.attr({"aria-haspopup":"dialog"})):"volume"===c?(x=this.mediaId+"-volume-slider",d.attr({"aria-controls":x,"aria-expanded":"false"})):"captions"===c&&this.captions&&(this.captions.length>1?d.attr("aria-expanded","false"):d.attr("aria-pressed","false")));var N=c;"faster"===c&&"animals"===this.speedIcons&&(N="rabbit"),"slower"===c&&"animals"===this.speedIcons&&(N="turtle"),"volume"===c?this.getIcon(d,this.volumeButton):("fullscreen"===N&&(N=this.fullscreen?"fullscreen-collapse":"fullscreen-expand"),this.getIcon(d,N)),this.setText(d,u),d.on("mouseenter focus",function(i){clearTimeout(D),f=t(this).attr("aria-label"),g=t(this).position(),m=t(this).height(),v=t(this).width(),b=e.$controllerDiv.width(),g.right=b-g.left-v,T=g.top+m+5,y=t(this).parent().hasClass("able-right-controls")?"right":"left",w=AblePlayer.localGetElementById(d[0],P).text(f).width(),"left"==y?((k=g.left-w/2)<0&&(k=2),C={left:k+"px",right:"",top:T+"px"}):((k=g.right-w/2)<0&&(k=2),C={left:"",right:k+"px",top:T+"px"}),A=AblePlayer.localGetElementById(d[0],P).text(f).css(C),e.showTooltip(A),t(this).on("mouseleave blur",function(){clearTimeout(D),D=setTimeout(function(){AblePlayer.localGetElementById(d[0],P).text("").hide()},500),e.$tooltipDiv.on("mouseenter focus",function(){clearTimeout(D)}),e.$tooltipDiv.on("mouseleave blur",function(){AblePlayer.localGetElementById(d[0],P).text("").hide()})})}),"captions"===c?this.prefCaptions&&1===this.prefCaptions||(S=this.captions.length>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),d.addClass("buttonOff").attr("title",S),d.attr("aria-pressed","false")):"descriptions"===c&&(this.prefDesc&&1===this.prefDesc||d.addClass("buttonOff").attr("title",this.translate("turnOnDescriptions","Turn on descriptions"))),o.append(d),"play"===c?this.$playpauseButton=d:"previous"==c?(this.$prevButton=d,"previous"==this.buttonWithFocus&&(this.$prevButton.trigger("focus"),this.buttonWithFocus=null)):"next"==c?(this.$nextButton=d,"next"==this.buttonWithFocus&&(this.$nextButton.trigger("focus"),this.buttonWithFocus=null)):"captions"===c?this.$ccButton=d:"sign"===c?(this.$signButton=d,this.$signWindow.is(":visible")||this.$signButton.addClass("buttonOff")):"descriptions"===c?this.$descButton=d:"mute"===c?this.$muteButton=d:"transcript"===c?(this.$transcriptButton=d,this.$transcriptDiv.is(":visible")||this.$transcriptButton.addClass("buttonOff").attr("title",this.translate("showTranscript","Show transcript"))):"fullscreen"===c?this.$fullscreenButton=d:"chapters"===c?this.$chaptersButton=d:"preferences"===c?this.$prefsButton=d:"volume"===c&&(this.$volumeButton=d)}"volume"===c&&this.addVolumeSlider(o)}s%2==1&&this.$controllerDiv.append('<div style="clear:both;"></div>')}for(var I in void 0!==this.$captionsDiv&&this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv),this.controls=[],i)i.hasOwnProperty(I)&&(this.controls=this.controls.concat(i[I]));this.refreshControls()},AblePlayer.prototype.cuePlaylistItem=function(e){var i,a,s,n,r,o,l=this;a=this.player,this.initializing||this.playerCreated&&this.deletePlayer("playlist"),this.swappingSrc=!0,this.startedPlaying?this.okToPlay=!0:this.okToPlay=!1,this.loadingMedia=!1,i=this.$playlist.eq(e),this.hasAttr(i,"data-youtube-id")?(this.youTubeId=this.getYouTubeId(i.attr("data-youtube-id")),this.hasAttr(i,"data-youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(i.attr("data-youtube-desc-id"))),s="youtube"):this.hasAttr(i,"data-vimeo-id")?(this.vimeoId=this.getVimeoId(i.attr("data-vimeo-id")),this.hasAttr(i,"data-vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(i.attr("data-vimeo-desc-id"))),s="vimeo"):s="html5","youtube"===s?"html5"===a&&(this.playing&&this.pauseMedia(),this.$media.hide()):(this.youTubeId=!1,"youtube"===a&&this.$media.show()),this.player=s,this.$media.empty(),this.hasAttr(i,"data-poster")&&this.$media.attr("poster",i.attr("data-poster")),this.hasAttr(i,"data-youtube-desc-id")&&this.$media.attr("data-youtube-desc-id",i.attr("data-youtube-desc-id")),this.youTubeId&&this.$media.attr("data-youtube-id",i.attr("data-youtube-id"));var h=i.children("span.able-source");h.length&&h.each(function(){const e=t(this);if(l.hasAttr(e,"data-src")){const i=DOMPurify.sanitize(e.attr("data-src"));if(validate.isProtocolSafe(i)){const a=t("<source>",{src:i});["data-type","data-desc-src","data-sign-src"].forEach(t=>{if(l.hasAttr(e,t)){const i=e.attr(t),s=DOMPurify.sanitize(i);t.endsWith("-src")&&validate.isProtocolSafe(s)?a.attr(t,s):t.endsWith("-src")||a.attr(t,s)}}),l.$media.append(a)}}});var p=i.children("span.able-track");p.length&&p.each(function(){const e=t(this);if(l.hasAttr(e,"data-src")&&l.hasAttr(e,"data-kind")&&l.hasAttr(e,"data-srclang")){const i=DOMPurify.sanitize(e.attr("data-src"));if(validate.isProtocolSafe(i)){const a=t("<track>",{src:i,kind:e.attr("data-kind"),srclang:e.attr("data-srclang")});["data-label","data-desc","data-default"].forEach(t=>{l.hasAttr(e,t)&&a.attr(t,DOMPurify.sanitize(e.attr(t)))}),l.$media.append(a)}}}),n=DOMPurify.sanitize(i.text()),this.hasAttr(i,"lang")&&(r=i.attr("lang")),this.$sources=this.$media.find("source"),this.recreatingPlayer||this.recreatePlayer().then(function(){l.$playlist.removeClass("able-current").children("button").removeAttr("aria-current"),l.$playlist.eq(e).addClass("able-current").children("button").attr("aria-current","true"),!0===l.showNowPlaying&&void 0!==l.$nowPlayingDiv&&(o=t("<span>"),void 0!==r&&o.attr("lang",r),o.html("<span>"+l.tt.selectedTrack+":</span>"+n),l.$nowPlayingDiv.html(o)),l.initializing?l.swappingSrc=!1:"html5"===l.player?l.loadingMedia||(l.media.load(),l.loadingMedia=!0):"youtube"===l.player&&(l.okToPlay=!0),l.initializing=!1,l.playerCreated=!0})},AblePlayer.prototype.deletePlayer=function(e){"youtube"===this.player&&this.youTubePlayer&&this.youTubePlayer.destroy(),"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.destroy(),this.$controllerDiv.empty(),this.$elapsedTimeContainer.empty().text("0:00"),this.$durationContainer.empty(),this.$signWindow&&this.$signWindow.remove(),this.$transcriptArea&&this.$transcriptArea.remove(),t(".able-modal-dialog").remove(),this.$captionsWrapper&&this.$captionsWrapper.remove(),this.$descDiv&&this.$descDiv.remove(),this.hasCaptions=!1,this.hasChapters=!1,this.hasDescTracks=!1,this.hasOpenDesc=!1,this.hasClosedDesc=!1,this.captionsPopup=null,this.chaptersPopup=null,this.transcriptType=null,this.playerDeleted=!0},AblePlayer.prototype.getButtonTitle=function(t){return"playpause"===t||"play"===t?this.translate("play","Play"):"pause"===t?this.translate("pause","Pause"):"restart"===t?this.translate("restart","Restart"):"previous"===t?this.translate("prevTrack","Previous track"):"next"===t?this.translate("nextTrack","Next track"):"rewind"===t?this.translate("rewind","Rewind"):"forward"===t?this.translate("forward","Forward"):"captions"===t?this.captions.length>1?this.translate("captions","Captions"):this.captionsOn?this.translate("hideCaptions","Hide captions"):this.translate("showCaptions","Show captions"):"descriptions"===t?this.descOn?this.translate("turnOffDescriptions","Turn off descriptions"):this.translate("turnOnDescriptions","Turn on descriptions"):"transcript"===t?this.$transcriptDiv.is(":visible")?this.translate("hideTranscript","Hide transcript"):this.translate("showTranscript","Show transcript"):"chapters"===t?this.translate("chapters","Chapters"):"sign"===t?this.translate("sign","Sign language"):"volume"===t?this.translate("volume","Volume"):"faster"===t?this.translate("faster","Faster"):"slower"===t?this.translate("slower","Slower"):"preferences"===t?this.translate("preferences","Preferences"):"fullscreen"===t?this.fullscreen?this.translate("exitFullScreen","Exit full screen"):this.translate("enterFullScreen","Enter full screen"):(this.debug,this.capitalizeFirstLetter(t))}}(jQuery);var preProcessing={transformCSSClasses:function(t){if(t.length>1e3)throw new Error("Input too long");return t.replace(/<(v|c|b|i|u|lang|ruby)\.([\w\.]+)([^>])>/g,function(t,e,i,a){return`<${e} class="${i.replace(/\./g," ")}"${a}>`})},transformLangTags:function(t){return t.replace(/<lang\s+([\w-]+)([^>])>/g,function(t,e,i){return'<lang lang="'+e+'"'+i+">"})},transformVTags:function(t){return t.replace(/<v\s+([^>]?)>/g,function(t,e){var i=e.match(/class="([^"])"/),a=i?i[0]:"",s=e.replace(/class="[^"]"/,"").trim().split(/\s+/),n=[],r=[];s.forEach(function(t){-1!==t.indexOf("=")?n.push(t):r.push(t)});var o=r.join(" "),l="<v";return o&&(l+=' title="'+o+'"'),n.length>0&&(l+=" "+n.join(" ")),a&&(l+=" "+a),l+=">"})}},postProcessing={postprocessCTag:function(t){return t.replace(/<c class="([\w\s]+)">/g,function(t,e){return"<c."+e.replace(/ /g,".")+">"})},postprocessVTag:function(t){return t.replace(/<v([^>])class="([\w\s]+)"([^>])>/g,function(t,e,i,a){var s=i.trim().split(/\s+/).join("."),n=(e+a).replace(/\sclass="[\w\s]+"/,"").trim();return"<v."+s+(n?" "+n:"")+">"})},postprocessLangTag:function(t){return t.replace(/<lang lang="([\w-]+)"([^>])>/g,function(t,e,i){return"<lang "+e+i+">"})}},validate={preProcessVttContent:function(t){var e=preProcessing.transformCSSClasses(t),i=preProcessing.transformLangTags(e);return preProcessing.transformVTags(i)},postProcessVttContent:function(t,e){var i=postProcessing.postprocessCTag(t),a=postProcessing.postprocessVTag(i);return postProcessing.postprocessLangTag(a).replace(/-->/g,"--\x3e").replace(/<([\d:.]+)>/g,"<$1>").replace(/<\/v>/g,function(t,i){return-1!==e.indexOf(t,i)?t:""})},sanitizeVttContent:function(t){if(null==t)return"";var e=validate.preProcessVttContent(t),i=DOMPurify.sanitize(e,{ALLOWED_TAGS:["b","i","u","v","c","lang","ruby","rt","rp"],ALLOWED_ATTR:["title","class","lang"],KEEP_CONTENT:!0});return validate.postProcessVttContent(i,t)},isProtocolSafe:function(t){try{const e=new URL(t,window.location.origin);return["http:","https:"].includes(e.protocol)}catch(t){return!1}}};"undefined"!=typeof module&&module.exports&&(module.exports=validate),function(t){AblePlayer.prototype.setupTracks=function(){var e,i,a,s,n,r,o,l,h;for(e=this,a=(i=new this.defer).promise(),s=[],t("#able-vts").length?(this.vtsTracks=[],this.hasVts=!0):this.hasVts=!1,o=this.hasDescTracks&&this.descOn?this.altTracks:this.tracks,r=0;r<o.length;r++)if(h=(l=o[r]).kind?l.kind:"subtitles",l.src){var p=l.src;n=this.loadTextObject(p),s.push(n.catch(function(t){})),n.then(function(t,i){p=t.src;var a=t.language,s=t.label,n=t.desc;return function(r){var o=e.parseWebVTT(r).cues;e.hasVts&&e.setupVtsTracks(i,a,n,s,p,r.text),"captions"===i||"subtitles"===i?e.setupCaptions(t,o):"descriptions"===i?e.setupDescriptions(t,o):"chapters"===i?e.setupChapters(t,o):"metadata"===i&&e.setupMetadata(o)}}(l,h))}else(e.usingYouTubeCaptions||e.usingVimeoCaptions)&&e.setupCaptions(l);return e.usingYouTubeCaptions||e.usingVimeoCaptions?i.resolve():t.when.apply(t,s).then(function(){i.resolve()}),a},AblePlayer.prototype.getTracks=function(){var e,i,a,s,n,r,o,l,h,p,c;return e=this,l=!1,a=(i=new this.defer).promise(),this.$tracks=this.$media.find("track"),this.tracks=[],this.altTracks=[],this.captions=[],this.descriptions=[],this.chapters=[],this.meta=[],this.hasCaptionsTrack=!1,this.hasDescTracks=!1,this.$tracks.length&&(this.usingYouTubeCaptions=!1,this.$tracks.each(function(i,a){if("captions"===t(this).attr("kind")?e.hasCaptionsTrack=!0:"descriptions"===t(this).attr("kind")&&(e.hasClosedDesc=!0),s=t(this).attr("srclang")?t(this).attr("srclang"):e.lang,n=t(this).attr("label")?t(this).attr("label"):e.getLanguageName(s),void 0===t(this).attr("default")||l?s===e.lang?(h=!0,r=!1):r=!1:(r=!0,l=!0),r&&(e.captionLang=s),void 0!==t(this).data("desc")?(o=!0,e.hasDescTracks=!0):o=!1,o?e.altTracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:s,label:n,def:r,desc:o}):e.tracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:s,label:n,def:r,desc:o}),i==e.$tracks.length-1){if(!l)if(h)for(e.captionLang=e.lang,p=!1,c=0;c<e.tracks.length&&!p;)e.tracks[c].language===e.lang&&(e.tracks[c].def=!0,p=!0),c++;else e.tracks[0].def=!0,e.captionLang=e.tracks[0].language;e.$media.find("track").removeAttr("default")}})),this.$tracks.length&&this.hasCaptionsTrack?i.resolve():"youtube"===this.player?this.getYouTubeCaptionTracks().then(function(){e.hasCaptions&&(e.usingYouTubeCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()}):"vimeo"===this.player?this.getVimeoCaptionTracks().then(function(){e.hasCaptions&&(e.usingVimeoCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()}):(this.hasCaptions=!1,e.$captionsWrapper&&e.$captionsWrapper.remove(),i.resolve()),a},AblePlayer.prototype.setupCaptions=function(e,i){var a,s;if(void 0===i&&(i=null),this.usingYouTubeCaptions||this.usingVimeoCaptions);else if(0===this.captions.length)this.captions.push({language:e.language,label:e.label,def:e.def,cues:i});else{for(a=!1,s=0;s<this.captions.length;s++)if(e.label.toLowerCase()<this.captions[s].label.toLowerCase()){this.captions.splice(s,0,{language:e.language,label:e.label,def:e.def,cues:i}),a=!0;break}a||this.captions.push({language:e.language,label:e.label,def:e.def,cues:i})}this.hasCaptions=!0,this.currentCaption=-1,1===this.prefCaptions?this.captionsOn=!0:0===this.prefCaptions?this.captionsOn=!1:1===this.defaultStateCaptions?this.captionsOn=!0:this.captionsOn=!1,"audio"===this.mediaType&&this.captionsOn&&this.$captionsContainer.removeClass("captions-off"),(!this.$captionsWrapper||this.$captionsWrapper&&!t.contains(this.$ableDiv[0],this.$captionsWrapper[0]))&&(this.$captionsDiv=t("<div>",{class:"able-captions"}),this.$captionsWrapper=t("<div>",{class:"able-captions-wrapper","aria-hidden":"true"}).hide(),"below"===this.prefCaptionsPosition?this.$captionsWrapper.addClass("able-captions-below"):this.$captionsWrapper.addClass("able-captions-overlay"),this.$captionsWrapper.append(this.$captionsDiv),this.$captionsContainer.append(this.$captionsWrapper))},AblePlayer.prototype.setupDescriptions=function(t,e){this.hasClosedDesc=!0,this.currentDescription=-1,this.descriptions.push({cues:e,language:t.language})},AblePlayer.prototype.setupChapters=function(t,e){this.hasChapters=!0,this.chapters.push({cues:e,language:t.language})},AblePlayer.prototype.setupMetadata=function(e){"text"===this.metaType?this.metaDiv&&t("#"+this.metaDiv)&&(this.$metaDiv=t("#"+this.metaDiv),this.hasMeta=!0,this.meta=e):"selector"===this.metaType&&(this.hasMeta=!0,this.visibleSelectors=[],this.meta=e)},AblePlayer.prototype.loadTextObject=function(e){var i,a,s,n;return a=(i=new this.defer).promise(),s=this,n=t("<div>",{style:"display:none"}),fetch(e).then(t=>t.text()).then(t=>{var a,s=t.split(/\r?\n\s\r?\n/),r="";s.forEach(t=>{a=validate.sanitizeVttContent(t),r+=a+"\n\n"}),n.html(r);let o={src:e,text:r};i.resolve(o),n.remove()}).catch(t=>{s.debug,i.reject(e),n.remove()}),a}}(jQuery),function(t){AblePlayer.prototype.initYouTubePlayer=function(){var e,i,a,s;return e=this,a=(i=new this.defer).promise(),this.youTubePlayerReady=!1,s=this.youTubeDescId&&this.prefDesc?this.youTubeDescId:this.youTubeId,this.activeYouTubeId=s,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeInit().then(function(){i.resolve()}):(AblePlayer.loadingYouTubeIframeAPI||e.getScript("https://www.youtube.com/iframe_api",function(){}),t("body").on("youTubeIframeAPIReady",function(){e.finalizeYoutubeInit().then(function(){i.resolve()})})),a},AblePlayer.prototype.finalizeYoutubeInit=function(){var e,i,a,s,n;return i=(e=new this.defer).promise(),a=this,s=this.mediaId+"_youtube",this.$mediaContainer.prepend(t("<div>").attr("id",s)),n=this.okToPlay?1:0,void 0===this.captionLang&&(this.captionLang=this.lang),this.youTubePlayer=new YT.Player(s,{videoId:this.activeYouTubeId,host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,cc_lang_pref:this.captionLang,cc_load_policy:1,controls:0,disableKb:1,enablejsapi:1,hl:this.lang,iv_load_policy:3,origin:window.location.origin,playsinline:this.playsInline,rel:0,start:this.startTime},events:{onReady:function(){a.youTubePlayerReady=!0,a.playerWidth&&a.playerHeight||a.getYouTubeDimensions(),a.playerWidth&&a.playerHeight&&a.youTubePlayer.setSize(a.playerWidth,a.playerHeight),a.swappingSrc&&(a.swappingSrc=!1,a.restoreFocus(),a.cueingPlaylistItem=!1,(a.playing||a.okToPlay)&&a.playMedia()),a.userClickedPlaylist&&(a.userClickedPlaylist=!1),a.recreatingPlayer&&(a.recreatingPlayer=!1),e.resolve()},onError:function(t){e.reject()},onStateChange:function(t){a.getPlayerState().then(function(t){"playing"===t?(a.hasSignLanguage&&a.signVideo&&a.signVideo.play(!0),a.playing=!0,a.startedPlaying=!0,a.paused=!1):"ended"==t?a.onMediaComplete():(a.playing=!1,a.paused=!0),a.stoppingYouTube&&"paused"===t&&(a.hasSignLanguage&&a.signVideo&&a.signVideo.pause(!0),void 0!==a.$posterImg&&a.$posterImg.show(),a.stoppingYouTube=!1,a.seeking=!1,a.playing=!1,a.paused=!0)}),"youtube"!==a.player||a.usingYouTubeCaptions||a.youTubePlayer.getOptions("captions")&&a.youTubePlayer.unloadModule("captions")},onApiChange:function(){a.duration=a.youTubePlayer.getDuration()},onPlaybackQualityChange:function(){}}}),this.hasPlaylist||this.$media.remove(),i},AblePlayer.prototype.getYouTubeDimensions=function(t){var e,i,a;void 0!==(e=this.$ableWrapper.find("iframe"))&&e.prop("width")&&(i=e.prop("width"),e.prop("height")&&(a=e.prop("height"),this.resizePlayer(i,a)))},AblePlayer.prototype.getYouTubeCaptionTracks=function(){var t,e,i,a,s,n,r=new this.defer,o=r.promise(),l=!1;return t=this,this.youTubePlayer.getOption("captions","tracklist")||(this.youTubePlayer.addEventListener("onApiChange",function(){if(l=!0,t.duration=t.youTubePlayer.getDuration(),t.loadingYouTubeCaptions){if(e=t.youTubePlayer.getOption("captions","tracklist"),t.okToPlay||t.youTubePlayer.pauseVideo(),e&&e.length){for(i=0;i<e.length;i++)a=e[i].languageCode,s=e[i].languageName,n=!1,(void 0!==t.captionLang&&a===t.captionLang||void 0!==t.lang&&a===t.lang)&&(n=!0),t.tracks.push({kind:"captions",language:a,label:s,def:n}),t.captions.push({language:a,label:s,def:n,cues:null});t.hasCaptions=!0,t.setupPopups("captions")}else t.usingYouTubeCaptions=!1,t.hasCaptions=!1;t.loadingYouTubeCaptions=!1,t.okToPlay&&t.youTubePlayer.playVideo()}t.captionLangPending&&(t.youTubePlayer.setOption("captions","track",{languageCode:t.captionLangPending}),t.captionLangPending=null),void 0!==t.prefCaptionsSize&&t.youTubePlayer.setOption("captions","fontSize",t.translatePrefs("size",t.prefCaptionsSize,"youtube")),r.resolve()}),this.loadingYouTubeCaptions=!0,this.youTubePlayer.playVideo(),setTimeout(()=>{l||setTimeout(()=>{t.youTubePlayer.pauseVideo(),r.resolve()},500)},500)),o},AblePlayer.prototype.getYouTubePosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+t;return"120"==e?i+"/default.jpg":"320"==e?i+"/mqdefault.jpg":"480"==e?i+"/hqdefault.jpg":"640"==e?i+"/sddefault.jpg":"1280"==e?i+"/hq720.jpg":"1920"==e&&i+"/maxresdefault.jpg"},AblePlayer.prototype.getYouTubeId=function(t){var e;return-1!==t.indexOf("youtu")?(e=(t=t.trim()).length-11,t.substring(e)):t}}(jQuery),function(t){window.AccessibleSlider=function(e,i,a,s,n,r,o,l,h,p){var c,u;c=this,this.position=0,this.tracking=!1,this.trackDevice=null,this.keyTrackPosition=0,this.lastTrackPosition=0,this.nextStep=1,this.inertiaCount=0,this.bodyDiv=t(e),h&&(this.loadedDiv=t("<div></div>"),this.playedDiv=t("<div></div>")),this.seekHead=t("<div>",{"aria-orientation":i,class:"able-"+l+"-head"}),"visible"===p?this.seekHead.attr("tabindex","0"):this.seekHead.attr("tabindex","-1"),this.seekHead.attr({role:"slider","aria-label":o,"aria-valuemin":s,"aria-valuemax":n}),this.timeTooltipTimeoutId=null,this.overTooltip=!1,this.timeTooltip=t("<div>"),this.bodyDiv.append(this.timeTooltip),this.timeTooltip.attr("role","tooltip"),this.timeTooltip.addClass("able-tooltip"),this.timeTooltip.on("mouseenter focus",function(){c.overTooltip=!0,clearInterval(c.timeTooltipTimeoutId)}),this.timeTooltip.on("mouseleave blur",function(){c.overTooltip=!1,t(this).hide()}),this.timeTooltip.hide(),this.bodyDiv.append(this.loadedDiv),this.bodyDiv.append(this.playedDiv),this.bodyDiv.append(this.seekHead),this.bodyDiv.wrap("<div></div>"),this.wrapperDiv=this.bodyDiv.parent(),"legacy"===this.skin&&("horizontal"===i?(this.wrapperDiv.width(a),this.loadedDiv.width(0)):(this.wrapperDiv.height(a),this.loadedDiv.height(0))),this.wrapperDiv.addClass("able-"+l+"-wrapper"),h&&(this.loadedDiv.addClass("able-"+l+"-loaded"),this.playedDiv.width(0),this.playedDiv.addClass("able-"+l+"-played"),this.setDuration(n)),this.seekHead.on("mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend",function(t){u=c.pointerEventToXY(t),"mouseenter"===t.type||"focus"===t.type?c.overHead=!0:"mouseleave"===t.type||"blur"===t.type?(c.overHead=!1,!c.overBody&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x))):"mousemove"===t.type||"touchmove"===t.type?c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x):"mousedown"===t.type||"touchstart"===t.type?(c.startTracking("mouse",c.pageXToPosition(c.seekHead.offset()+c.seekHead.width()/2)),c.bodyDiv.is(":focus")||c.bodyDiv.focus(),t.preventDefault()):"mouseup"!==t.type&&"touchend"!==t.type||c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x)),"mousemove"!==t.type&&"mousedown"!==t.type&&"mouseup"!==t.type&&"touchstart"!==t.type&&"touchend"!==t.type&&c.refreshTooltip()}),this.bodyDiv.on("mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend",function(t){if(2==t.button&&"mousedown"==t.type)return;u=c.pointerEventToXY(t);let e=t.key;if("mouseenter"===t.type)c.overBody=!0,c.overBodyMousePos={x:u.x,y:u.y};else if("mouseleave"===t.type)c.overBody=!1,c.overBodyMousePos=null,!c.overHead&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("mousemove"===t.type||"touchmove"===t.type)c.overBodyMousePos={x:u.x,y:u.y},c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x);else if("mousedown"===t.type||"touchstart"===t.type)c.startTracking("mouse",c.pageXToPosition(u.x)),c.trackHeadAtPageX(u.x),c.seekHead.is(":focus")||c.seekHead.focus(),t.preventDefault();else if("mouseup"===t.type||"touchend"===t.type)c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("keydown"===t.type){if("Home"===t.key)c.trackImmediatelyTo(0);else if("End"===t.key)c.trackImmediatelyTo(c.duration);else if("ArrowLeft"===t.key||"ArrowDown"===t.key)c.arrowKeyDown(-1);else if("ArrowRight"===t.key||"ArrowUp"===t.key)c.arrowKeyDown(1);else if("PageUp"===t.key&&r>0)c.arrowKeyDown(r);else{if(!("PageDown"===t.key&&r>0))return;c.arrowKeyDown(-r)}t.preventDefault()}else"keyup"===t.type&&e===t.key&&(c.tracking&&"keyboard"===c.trackDevice&&c.stopTracking(c.keyTrackPosition),t.preventDefault());c.overTooltip||"mouseup"===t.type||"keydown"===t.type||"keydown"===t.type||c.refreshTooltip()})},AccessibleSlider.prototype.arrowKeyDown=function(t){this.tracking&&"keyboard"===this.trackDevice?(this.keyTrackPosition=this.boundPos(this.keyTrackPosition+this.nextStept),this.inertiaCount+=1,20===this.inertiaCount&&(this.inertiaCount=0,this.nextStep=2),this.trackHeadAtPosition(this.keyTrackPosition)):(this.nextStep=1,this.inertiaCount=0,this.keyTrackPosition=this.boundPos(this.position+this.nextStept),this.startTracking("keyboard",this.keyTrackPosition),this.trackHeadAtPosition(this.keyTrackPosition))},AccessibleSlider.prototype.pageXToPosition=function(t){var e=t-this.bodyDiv.offset().left,i=this.duration(e/this.bodyDiv.width());return this.boundPos(i)},AccessibleSlider.prototype.boundPos=function(t){return Math.max(0,Math.min(t,this.duration))},AccessibleSlider.prototype.setDuration=function(t){t!==this.duration&&(this.duration=t,this.resetHeadLocation(),this.seekHead.attr("aria-valuemax",t))},AccessibleSlider.prototype.setWidth=function(t){this.wrapperDiv.width(t),this.resizeDivs(),this.resetHeadLocation()},AccessibleSlider.prototype.getWidth=function(){return this.wrapperDiv.width()},AccessibleSlider.prototype.resizeDivs=function(){this.playedDiv.width(this.bodyDiv.width()(this.position/this.duration)),this.loadedDiv.width(this.bodyDiv.width()this.buffered)},AccessibleSlider.prototype.resetHeadLocation=function(){var t=this.position/this.duration,e=this.bodyDiv.width()t;this.seekHead.css("left",e-this.seekHead.width()/2),this.tracking&&this.stopTracking(this.position)},AccessibleSlider.prototype.setPosition=function(t,e){this.position=t,this.resetHeadLocation(),this.overHead&&this.refreshTooltip(),this.resizeDivs(),this.updateAriaValues(t,e)},AccessibleSlider.prototype.setBuffered=function(t){isNaN(t)||(this.buffered=t,this.redrawDivs)},AccessibleSlider.prototype.startTracking=function(t,e){this.tracking||(this.trackDevice=t,this.tracking=!0,this.bodyDiv.trigger("startTracking",[e]))},AccessibleSlider.prototype.stopTracking=function(t){this.trackDevice=null,this.tracking=!1,this.bodyDiv.trigger("stopTracking",[t]),this.setPosition(t,!0)},AccessibleSlider.prototype.trackHeadAtPageX=function(t){var e=this.pageXToPosition(t),i=t-this.bodyDiv.offset().left-this.seekHead.width()/2;i=Math.max(0,Math.min(i,this.bodyDiv.width()-this.seekHead.width())),this.lastTrackPosition=e,this.seekHead.css("left",i),this.reportTrackAtPosition(e)},AccessibleSlider.prototype.trackHeadAtPosition=function(t){var e=t/this.duration,i=this.bodyDiv.width()e;this.lastTrackPosition=t,this.seekHead.css("left",i-this.seekHead.width()/2),this.reportTrackAtPosition(t)},AccessibleSlider.prototype.reportTrackAtPosition=function(t){this.bodyDiv.trigger("tracking",[t]),this.updateAriaValues(t,!0)},AccessibleSlider.prototype.updateAriaValues=function(e,i){var a,s=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),o=1===n?"minute":"minutes",l=1===r?"second":"seconds";a=s>0?s+" "+(1===s?"hour":"hours")+", "+n+" "+o+", "+r+" "+l:n>0?n+" "+o+", "+r+" "+l:r+" "+l,this.liveAriaRegion||(this.liveAriaRegion=t("<span>",{class:"able-offscreen","aria-live":"polite"}),this.wrapperDiv.append(this.liveAriaRegion)),i&&this.liveAriaRegion.text()!==a&&this.liveAriaRegion.text(a),this.seekHead.attr("aria-valuetext",a),this.seekHead.attr("aria-valuenow",Math.floor(e).toString())},AccessibleSlider.prototype.trackImmediatelyTo=function(t){this.startTracking("keyboard",t),this.trackHeadAtPosition(t),this.keyTrackPosition=t},AccessibleSlider.prototype.refreshTooltip=function(){if(this.overHead)this.timeTooltip.show(),this.tracking?this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)):this.timeTooltip.text(this.positionToStr(this.position)),this.setTooltipPosition(this.seekHead.position().left+this.seekHead.width()/2);else if(this.overBody&&this.overBodyMousePos)this.timeTooltip.show(),this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))),this.setTooltipPosition(this.overBodyMousePos.x-this.bodyDiv.offset().left);else{clearTimeout(this.timeTooltipTimeoutId);var t=this;this.timeTooltipTimeoutId=setTimeout(function(){t.timeTooltip.hide()},500)}},AccessibleSlider.prototype.hideSliderTooltips=function(){this.overHead=!1,this.overBody=!1,this.timeTooltip.hide()},AccessibleSlider.prototype.setTooltipPosition=function(t){this.timeTooltip.css({left:t-this.timeTooltip.width()/2-10,bottom:this.seekHead.height()})},AccessibleSlider.prototype.positionToStr=function(t){var e=Math.floor(t/3600),i=Math.floor(t/60)%60,a=Math.floor(t%60);return a<10&&(a="0"+a),e>0?(i<10&&(i="0"+i),e+":"+i+":"+a):i+":"+a},AccessibleSlider.prototype.pointerEventToXY=function(t){var e={x:0,y:0};if("touchstart"==t.type||"touchmove"==t.type||"touchend"==t.type||"touchcancel"==t.type){var i=t.originalEvent.touches[0]||t.originalEvent.changedTouches[0];e.x=i.pageX,e.y=i.pageY}else"mousedown"!=t.type&&"mouseup"!=t.type&&"mousemove"!=t.type&&"mouseover"!=t.type&&"mouseout"!=t.type&&"mouseenter"!=t.type&&"mouseleave"!=t.type||(e.x=t.pageX,e.y=t.pageY);return e}}(jQuery),function(t){AblePlayer.prototype.addVolumeSlider=function(e){var i,a,s,n,r,o;i=this,a=this.mediaId+"-volume-slider",s=this.mediaId+"-volume-help",this.$volumeSlider=t("<div>",{id:a,class:"able-volume-slider","aria-hidden":"true"}).hide(),this.$volumeSliderTooltip=t("<div>",{class:"able-tooltip",role:"tooltip"}).hide(),this.$volumeRange=t("<input>",{type:"range",min:"0",max:"10",step:"1",orient:"vertical","aria-label":this.translate("volumeUpDown","Volume up down"),value:this.volume}),n=parseInt(i.volume)/10100,this.$volumeHelp=t("<div>",{id:s,class:"able-volume-help","aria-live":"polite"}).text(n+"%"),r=this.$volumeButton.attr("aria-label"),this.$volumeButton.attr("aria-label",r+" "+n+"%"),this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp),o=this.$volumeButton.parents(".able-control-row")[0],this.$volumeSlider.css("bottom",o.offsetHeight),e.append(this.$volumeSlider),this.$volumeRange.on("change",function(e){i.handleVolumeChange(t(this).val())}),this.$volumeRange.on("input",function(e){i.handleVolumeChange(t(this).val())}),this.$volumeRange.on("keydown",function(t){"Escape"!==t.key&&"Tab"!==t.key&&"Enter"!==t.key||(i.$volumeSlider.is(":visible")?(i.closingVolume=!0,i.hideVolumePopup()):i.closingVolume||i.showVolumePopup())})},AblePlayer.prototype.refreshVolumeHelp=function(t){var e;e=t/10100,this.$volumeHelp&&this.$volumeHelp.text(e+"%"),this.$volumeRange.attr("value",t)},AblePlayer.prototype.refreshVolumeButton=function(t){var e,i,a;e=this.getVolumeName(t),i=t/10100,a=this.translate("volume","Volume")+" "+i+"%",this.getIcon(this.$volumeButton,"volume-"+e),this.$volumeButton.attr("aria-label",a)},AblePlayer.prototype.handleVolumeButtonClick=function(){this.$volumeSlider.is(":visible")?this.hideVolumePopup():this.showVolumePopup()},AblePlayer.prototype.handleVolumeKeystroke=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleVolumeChange=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleMute=function(){this.isMuted()?this.setMute(!1):this.setMute(!0)},AblePlayer.prototype.showVolumePopup=function(){this.closePopups(),this.$tooltipDiv.hide(),this.$volumeSlider.show().attr("aria-hidden","false"),this.$volumeButton.attr("aria-expanded","true"),this.$volumeButton.focus(),this.waitThenFocus(this.$volumeRange)},AblePlayer.prototype.hideVolumePopup=function(){var t=this;this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus(),setTimeout(function(){t.closingVolume=!1},1e3)},AblePlayer.prototype.isMuted=function(){return"html5"===this.player?this.media.muted:"youtube"===this.player?this.youTubePlayer.isMuted():void 0},AblePlayer.prototype.setMute=function(t){t?(this.lastVolume=this.volume,this.volume=0):void 0!==this.lastVolume&&(this.volume=this.lastVolume),"html5"===this.player?this.media.muted=t:"youtube"===this.player&&(t?this.youTubePlayer.mute():this.youTubePlayer.unMute()),this.setVolume(this.volume),this.refreshVolumeHelp(this.volume),this.refreshVolumeButton(this.volume)},AblePlayer.prototype.setVolume=function(t){var e;this.syncSignVideo({volume:0}),"html5"===this.player?(e=t/10,this.media.volume=e):"youtube"===this.player?(e=10t,this.youTubePlayer.setVolume(e),this.volume=t):"vimeo"===this.player&&(e=t/10,this.vimeoPlayer.setVolume(e).then(function(){})),this.lastVolume=t},AblePlayer.prototype.getVolume=function(t){return"html5"===this.player?10this.media.volume:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getVolume()/10:"vimeo"===this.player?this.volume:void 0},AblePlayer.prototype.getVolumeName=function(t){return 0==t?"mute":10==t?"loud":t<5?"soft":"medium"}}(jQuery),function(t){var e="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]";window.AccessibleDialog=function(i,a,s,n){this.title=s,this.closeButtonLabel=n,this.focusedElementBeforeModal=a,this.baseId=t(i).attr("id")||Math.floor(1e9Math.random()).toString();var r=this,o=i;this.modal=o,o.addClass("able-modal-dialog");var l=t("<button>",{class:"modalCloseButton",title:r.closeButtonLabel,"aria-label":r.closeButtonLabel}).text("×");l.on("keydown",function(t){" "===t.key&&r.hide()}).on("click",function(){r.hide()});var h=t("<h1></h1>");h.attr("id","modalTitle-"+this.baseId),h.text(s),this.titleH1=h,o.attr({"aria-labelledby":"modalTitle-"+this.baseId});var p=t("<div>",{class:"able-modal-header"});p.prepend(h),p.prepend(l),o.prepend(p),o.attr({"aria-hidden":"true",role:"dialog","aria-modal":"true"}),o.on("keydown",function(i){if("Escape"===i.key)r.hide(),i.preventDefault();else if("Tab"===i.key){var a=o.find("").filter(e).filter(":visible");if(0===a.length)return;var s=t(":focus"),n=a.index(s);i.shiftKey?0===n&&(a.get(a.length-1).trigger("focus"),i.preventDefault()):n===a.length-1&&(a.get(0).trigger("focus"),i.preventDefault())}i.stopPropagation()}),t("body").hasClass("able-modal-active")&&(t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("inert"),t("body").removeClass("able-modal-active"))},AccessibleDialog.prototype.show=function(){if(!this.overlay){var i=t("<div></div>").attr({class:"able-modal-overlay",tabindex:"-1"});this.overlay=i,t("body").append(i),i.on("mousedown.accessibleModal",function(t){t.preventDefault(),a.hide()})}t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").attr("inert",!0),t("body").addClass("able-modal-active"),this.overlay.css("display","block"),this.modal.css("display","block"),this.modal.attr({"aria-hidden":"false",tabindex:"-1"}),0===this.modal.find("").filter(e).filter(":visible").length&&this.focusedElementBeforeModal.blur();var a=this;setTimeout(function(){a.modal.find("button.modalCloseButton").first().trigger("focus")},300)},AccessibleDialog.prototype.hide=function(){this.overlay&&this.overlay.css("display","none"),this.modal.css("display","none"),this.modal.attr("aria-hidden","true"),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("inert"),t("body").removeClass("able-modal-active"),this.focusedElementBeforeModal.trigger("focus")},AccessibleDialog.prototype.getInputs=function(){return!!this.modal&&this.modal.find("input")}}(jQuery),function(t){AblePlayer.prototype.getNextHeadingLevel=function(e){var i,a,s,n;return e.parents().each(function(){if(i=t(this).children(":header"),a=i.length)return s=i.eq(a-1).prop("tagName"),!1}),void 0===s?n=1:(n=parseInt(s[1]),(n+=1)>6&&(n=6)),n},AblePlayer.prototype.countProperties=function(t){var e,i;for(i in e=0,t)t.hasOwnProperty(i)&&++e;return e},AblePlayer.prototype.formatSecondsAsColonTime=function(t,e){var i,a,s,n,r,o,l;if(e)if(2===(n=t.toString().split(".")).length){if((r=n[1]).length<3)for(o=3-r.length,l=1;l<=o;l++)r+="0"}else r="000";return i=Math.floor(t/3600),a=Math.floor(t/60)%60,(s=Math.floor(t%60))<10&&(s="0"+s),i>0?(a<10&&(a="0"+a),e?i+":"+a+":"+s+"."+r:i+":"+a+":"+s):e?(i<1?i="00":i<10&&(i="0"+i),a<1?a="00":a<10&&(a="0"+a),i+":"+a+":"+s+"."+r):a+":"+s},AblePlayer.prototype.getSecondsFromColonTime=function(t){var e;return 3===(e=t.split(":")).length?3600parseInt(e[0])+60parseInt(e[1])+parseFloat(e[2]):2===e.length?60parseInt(e[0])+parseFloat(e[1]):1===e.length?parseFloat(e[0]):void 0},AblePlayer.prototype.capitalizeFirstLetter=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},AblePlayer.prototype.roundDown=function(t,e){return Number(Math.floor(t+"e"+e)+"e-"+e)},AblePlayer.prototype.defer=function(){const t=this,e=new Promise((i,a)=>{t.resolve=i,t.reject=a,t.promise=()=>e})},AblePlayer.prototype.getScript=function(t,e){var i=document.createElement("script"),a=document.getElementsByTagName("script")[0];i.async=1,i.onload=i.onreadystatechange=function(t,a){(a||!i.readyState||/loaded|complete/.test(i.readyState))&&(i.onload=i.onreadystatechange=null,i=void 0,!a&&e&&setTimeout(e,0))},i.src=t,a.parentNode.insertBefore(i,a)},AblePlayer.prototype.hasAttr=function(t,e){var i=t.attr(e);return void 0!==i&&!1!==i}}(jQuery),function(t){AblePlayer.prototype.initDescription=function(){var t,e;return e=(t=new this.defer).promise(),"audio"===this.mediaType&&t.resolve(),this.descFile=this.$sources.first().attr("data-desc-src"),void 0!==this.descFile?this.hasOpenDesc=!0:this.hasOpenDesc=!(!this.youTubeDescId&&!this.vimeoDescId),this.descMethod=null,this.hasOpenDesc&&this.hasClosedDesc?this.descMethod=this.prefDescMethod?this.prefDescMethod:"video":this.hasOpenDesc?this.descMethod="video":this.hasClosedDesc&&(this.descMethod="text"),this.descOn=!1,this.descMethod&&(1===this.prefDesc?this.descOn=!0:0===this.prefDesc?this.descOn=!1:this.descOn=1===this.defaultStateDescriptions),void 0===this.$descDiv&&this.hasClosedDesc&&this.injectTextDescriptionArea(),this.descOn?("video"!==this.descMethod||this.usingDescribedVersion()||this.swapDescription(),this.hasClosedDesc&&(this.prefDescVisible?void 0!==this.$descDiv&&(this.$descDiv.show(),this.$descDiv.removeClass("able-offscreen")):void 0!==this.$descDiv&&this.$descDiv.addClass("able-offscreen"))):"video"===this.descMethod?this.usingDescribedVersion()&&this.swapDescription():"text"===this.descMethod&&void 0!==this.$descDiv&&(this.$descDiv.hide(),this.$descDiv.removeClass("able-offscreen")),t.resolve(),e},AblePlayer.prototype.usingDescribedVersion=function(){return"youtube"===this.player?this.activeYouTubeId===this.youTubeDescId:"vimeo"===this.player?this.activeVimeoId===this.vimeoDescId:this.$sources.first().attr("data-desc-src")===this.$sources.first().attr("src")},AblePlayer.prototype.initSpeech=function(e){var i=this;function attemptEnableSpeech(){var t=new SpeechSynthesisUtterance(" ");t.onend=function(){i.getBrowserVoices(),(Array.isArray(i.descVoices)&&i.descVoices.length||"init"!==e)&&(i.speechEnabled=!0)},i.synth.speak(t)}null===this.speechEnabled&&(window.speechSynthesis?(this.synth=window.speechSynthesis,this.synth.cancel(),"init"===e?(attemptEnableSpeech(),t(document).on("click",function handleInitialClick(){attemptEnableSpeech(),t(document).off("click",handleInitialClick)})):attemptEnableSpeech()):this.speechEnabled=!1)},AblePlayer.prototype.getBrowserVoices=function(){var t,e,i,a;if(a=this.captionLang?this.captionLang.substring(0,2).toLowerCase():this.lang.substring(0,2).toLowerCase(),this.descVoices=[],t=this.synth.getVoices(),e=this.getDescriptionLangs(),t.length>0){this.descVoices=[];for(var s=0;s<t.length;s++)(i=t[s].lang.substring(0,2).toLowerCase())===a&&-1!==e.indexOf(i)&&this.descVoices.push(t[s]);this.descVoices.length||(this.descVoices=t)}return!1},AblePlayer.prototype.getDescriptionLangs=function(){var t=[];if(this.tracks)for(var e=0;e<this.tracks.length;e++)"descriptions"===this.tracks[e].kind&&t.push(this.tracks[e].language.substring(0,2).toLowerCase());return t},AblePlayer.prototype.setDescriptionVoice=function(){var t,e,i,a,s;if(e=void 0!==this.getPref().voices?this.getPrefDescVoice():null,this.getBrowserVoices(),this.rebuildDescPrefsForm(),a=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,this.synth&&(t=this.synth.getVoices()).length>0){if(e){s=!1;for(var n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===a.substring(0,2).toLowerCase()&&t[n].name===e){i=t[n].name,s=!0;break}}if(!s)for(n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===a.substring(0,2).toLowerCase()){i=t[n].name;break}this.prefDescVoice=i,this.prefDescVoiceLang=a,this.$voiceSelectField&&this.$voiceSelectField.val(this.prefDescVoice),this.updatePreferences("voice")}},AblePlayer.prototype.swapDescription=function(){var e,i,a,s;if(e=this,this.loadingMedia=!1,this.$focusedElement=t(":focus"),this.activeMedia=this.mediaId,this.elapsed>0?this.swapTime=this.elapsed:this.swapTime=0,this.duration>0&&(this.prevDuration=this.duration),this.okToPlay||(this.okToPlay=this.playing),this.descOn?this.showAlert(this.translate("alertDescribedVersion","Using the audio described version of this video")):this.showAlert(this.translate("alertNonDescribedVersion","Using the non-described version of this video")),"html5"===this.player){if(this.swappingSrc=!0,this.paused=!0,this.usingDescribedVersion())for(i=0;i<this.$sources.length;i++)a=DOMPurify.sanitize(this.$sources[i].getAttribute("data-orig-src")),srcType=this.$sources[i].getAttribute("type"),a&&this.$sources[i].setAttribute("src",a);else for(i=0;i<this.$sources.length;i++)a=DOMPurify.sanitize(this.$sources[i].getAttribute("src")),s=DOMPurify.sanitize(this.$sources[i].getAttribute("data-desc-src")),srcType=this.$sources[i].getAttribute("type"),s&&(this.$sources[i].setAttribute("src",s),this.$sources[i].setAttribute("data-orig-src",a));if(this.recreatingPlayer)return;this.playerCreated&&(this.deletePlayer("swap-desc-html"),this.recreatePlayer().then(function(){e.loadingMedia||(e.media.load(),e.loadingMedia=!0)}))}else if("youtube"===this.player){if(this.activeYouTubeId=this.usingDescribedVersion()?this.youTubeId:this.youTubeDescId,void 0!==this.youTubePlayer&&(e.swappingSrc=!0,e.playing?e.youTubePlayer.loadVideoById(e.activeYouTubeId,e.swapTime):e.youTubePlayer.cueVideoById(e.activeYouTubeId,e.swapTime)),this.playerCreated&&this.deletePlayer("swap-desc-youtube"),this.recreatingPlayer)return;this.recreatePlayer().then(function(){})}else if("vimeo"===this.player){if(this.usingDescribedVersion()?(this.activeVimeoId=this.vimeoId,this.showAlert(this.translate("alertNonDescribedVersion","Using the non-described version of this video"))):(this.activeVimeoId=this.vimeoDescId,this.showAlert(this.translate("alertDescribedVersion","Using the audio described version of this video"))),this.playerCreated&&this.deletePlayer("swap-desc-vimeo"),this.recreatingPlayer)return;this.recreatePlayer().then(function(){e.vimeoPlayer.loadVideo(e.activeVimeoId).then(function(){e.playing?e.vimeoPlayer.setCurrentTime(e.swapTime):e.vimeoPlayer.pause()})})}},AblePlayer.prototype.showDescription=function(t){if(this.playing&&this.hasClosedDesc&&!this.swappingSrc&&this.descOn&&("video"!==this.descMethod||this.prefDescVisible)){var e,i,a,s;0;var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e.push(flattenComponentForDescription(t.children[i]));return e.join("")};for(e=[],this.selectedDescriptions?e=this.selectedDescriptions.cues:this.descriptions.length>=1&&(e=this.descriptions[0].cues),i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){a=i;break}void 0!==a?this.currentDescription!==a&&(this.$status.removeAttr("aria-live"),s=flattenComponentForDescription(e[a].components),"screenreader"===this.descReader?this.$descDiv.html(s):this.speechEnabled?("video"!==this.descMethod&&this.announceDescriptionText("description",s),this.prefDescVisible&&this.$descDiv.html(s).removeAttr("aria-live aria-atomic")):this.$descDiv.html(s),this.prefDescPause&&"text"===this.descMethod&&(this.pauseMedia(),this.pausedForDescription=!0),this.currentDescription=a):(this.$descDiv.html(""),this.currentDescription=-1,this.$status.attr("aria-live","polite"))}},AblePlayer.prototype.syncSpeechToPlaybackRate=function(t){var e;.5===t?e=.7:.75===t?e=.8:1===t?e=1:1.25===t?e=1.1:1.5===t?e=1.2:1.75===t?e=1.5:2===t?e=2:2.25===t?e=2.5:t>=2.5&&(e=3),this.prefDescRate=e},AblePlayer.prototype.announceDescriptionText=function(e,i){var a,s,n,r,o,l,h,p,c;a=this;if(this.speechEnabled||this.initSpeech("desc"),"sample"===e?(s=t("#"+this.mediaId+"_prefDescVoice").val(),o=t("#"+this.mediaId+"_prefDescPitch").val(),l=t("#"+this.mediaId+"_prefDescRate").val(),h=t("#"+this.mediaId+"_prefDescVolume").val()):(s=this.prefDescVoice,o=this.prefDescPitch,l=this.prefDescRate,h=this.prefDescVolume),this.descVoices){if(this.descVoices.length>0){if(s)for(n=0;n<this.descVoices.length;n++)if(this.descVoices[n].name==s){r=this.descVoices[n];break}void 0===r&&(r=this.descVoices[0])}}else r=null;p=new SpeechSynthesisUtterance,r&&(p.voice=r),p.voiceURI="native",p.volume=h,p.rate=l,p.pitch=o,p.text=i,p.lang=this.lang,p.onstart=function(t){},p.onpause=function(t){},p.onend=function(t){this.speakingDescription=!1,c=t.elapsedTime,c>100?(t.elapsedTime/1e3).toFixed(2):t.elapsedTime.toFixed(2),this.debug,"description"===e&&a.prefDescPause&&a.pausedForDescription&&(a.playMedia(),this.pausedForDescription=!1)},p.onerror=function(t){},this.synth.paused&&this.synth.resume(),this.synth.speak(p),this.speakingDescription=!0}}(jQuery),jQuery,AblePlayer.prototype.isIOS=function(t){var e;return e=navigator.userAgent.toLowerCase(),!!/ipad|iphone|ipod/.exec(e)&&(void 0===t||-1!==e.indexOf("os "+t))},AblePlayer.prototype.browserSupportsVolume=function(){var t;return!this.isIOS()&&((t=new Audio).volume=.9,.9===t.volume)},AblePlayer.prototype.nativeFullscreenSupported=function(){return document.fullscreenEnabled||document.webkitFullscreenEnabled},function(t){AblePlayer.prototype.seekTo=function(t){var e,i=this;(this.seekFromTime=this.media.currentTime,this.seekToTime=t,this.seeking=!0,this.liveUpdatePending=!0,this.speakingDescription&&this.synth.cancel(),this.syncSignVideo({time:this.startTime}),"html5"===this.player)?(this.startTime=t,(e=this.media.seekable).length>0&&this.startTime>=e.start(0)&&this.startTime<=e.end(0)&&(this.media.currentTime=this.startTime,this.seekStatus="complete",this.syncSignVideo({time:this.startTime}))):"youtube"===this.player?(this.youTubePlayer.seekTo(t,!0),t>0&&void 0!==this.$posterImg&&this.$posterImg.hide(),this.syncSignVideo({time:t})):"vimeo"===this.player&&this.vimeoPlayer.setCurrentTime(t).then(function(){i.elapsed=t,i.refreshControls("timeline")});this.refreshControls("timeline")},AblePlayer.prototype.getMediaTimes=function(t,e){var i,a,s,n;return n={},a=(i=new this.defer).promise(),s=this,void 0!==t&&void 0!==e?(n.duration=t,n.elapsed=e,i.resolve(n)):this.getDuration().then(function(t){n.duration=s.roundDown(t,6),s.getElapsed().then(function(t){n.elapsed=s.roundDown(t,6),i.resolve(n)})}),a},AblePlayer.prototype.getDuration=function(){var t,e,i;(e=(t=new this.defer).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getDuration().then(function(e){void 0===e||isNaN(e)||-1===e?t.resolve(0):t.resolve(e)}):t.resolve(0):("html5"===this.player?i=this.media.duration:"youtube"===this.player&&(i=this.youTubePlayerReady?this.duration>0?this.duration:this.youTubePlayer.getDuration():0),void 0===i||isNaN(i)||-1===i?t.resolve(0):t.resolve(i));return e},AblePlayer.prototype.getElapsed=function(){var t,e,i;(e=(t=new this.defer).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getCurrentTime().then(function(e){void 0===e||isNaN(e)||-1===e?t.resolve(0):t.resolve(e)}):t.resolve(0):("html5"===this.player?i=this.media.currentTime:"youtube"===this.player&&(i=this.youTubePlayerReady?this.youTubePlayer.getCurrentTime():0),void 0===i||isNaN(i)||-1===i?t.resolve(0):t.resolve(i));return e},AblePlayer.prototype.getPlayerState=function(){var t,e,i;if(e=(t=new this.defer).promise(),i=this,"html5"===this.player)this.media.ended?t.resolve("ended"):this.media.paused?t.resolve("paused"):4!==this.media.readyState?t.resolve("buffering"):t.resolve("playing");else if("youtube"===this.player&&this.youTubePlayerReady){var a=this.youTubePlayer.getPlayerState();-1===a||5===a?t.resolve("stopped"):0===a?t.resolve("ended"):1===a?t.resolve("playing"):2===a?t.resolve("paused"):3===a&&t.resolve("buffering")}else"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.getPaused().then(function(e){e?t.resolve("paused"):i.vimeoPlayer.getEnded().then(function(e){e?t.resolve("ended"):t.resolve("playing")})});return e},AblePlayer.prototype.isPlaybackRateSupported=function(){return"html5"===this.player?!!this.media.playbackRate:"youtube"===this.player?!!this.youTubePlayerReady&&this.youTubePlayer.getAvailablePlaybackRates().length>1:"vimeo"===this.player?this.vimeoSupportsPlaybackRateChange:void 0},AblePlayer.prototype.setPlaybackRate=function(t){t=Math.max(.5,t),this.hasClosedDesc&&"text"===this.descMethod&&this.syncSpeechToPlaybackRate(t),this.syncSignVideo({rate:t}),"html5"===this.player?this.media.playbackRate=t:"youtube"===this.player?this.youTubePlayer.setPlaybackRate(t):"vimeo"===this.player&&this.vimeoPlayer.setPlaybackRate(t),this.syncSignVideo({rate:t}),this.playbackRate=t,this.$speed.text(this.translate("speed","Speed")+": "+t.toFixed(2).toString()+"x")},AblePlayer.prototype.getPlaybackRate=function(){return"html5"===this.player?this.media.playbackRate:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getPlaybackRate():void 0},AblePlayer.prototype.isPaused=function(){if("vimeo"===this.player)return!this.playing;this.getPlayerState().then(function(t){return"paused"===t||"stopped"===t||"ended"===t})},AblePlayer.prototype.syncSignVideo=function(t){this.hasSignLanguage&&(this.signVideo||this.signYoutube)&&(t&&void 0!==t.time&&(this.signVideo?this.signVideo.currentTime=t.time:this.youTubeSignPlayer.seekTo(t.time,!0)),t&&void 0!==t.rate&&(this.signVideo?this.signVideo.playbackRate=t.rate:this.youTubeSignPlayer.setPlaybackRate(t.rate)),t&&void 0!==t.pause&&(this.signVideo?this.signVideo.pause(!0):this.youTubeSignPlayer.pauseVideo()),t&&void 0!==t.play&&(this.signVideo?this.signVideo.play(!0):this.youTubeSignPlayer.playVideo()),t&&void 0!==t.volume&&this.signVideo&&(this.signVideo.volume=0))},AblePlayer.prototype.pauseMedia=function(){this.syncSignVideo({pause:!0}),"html5"===this.player?this.media.pause(!0):"youtube"===this.player?this.youTubePlayer.pauseVideo():"vimeo"===this.player&&this.vimeoPlayer.pause()},AblePlayer.prototype.playMedia=function(){this.syncSignVideo({play:!0}),"html5"===this.player?this.media.play(!0):"youtube"===this.player?(this.youTubePlayer.playVideo(),void 0!==this.$posterImg&&this.$posterImg.hide(),this.stoppingYouTube=!1):"vimeo"===this.player&&this.vimeoPlayer.play(),this.startedPlaying=!0,this.hideControls&&(this.hidingControls=!0,this.invokeHideControlsTimeout())},AblePlayer.prototype.fadeControls=function(t){"out"==t?this.$playerDiv.addClass("fade-out").removeClass("fade-in"):"in"==t&&this.$playerDiv.addClass("fade-in").removeClass("fade-out")},AblePlayer.prototype.invokeHideControlsTimeout=function(){var t=this;this.hideControlsTimeout=window.setTimeout(function(){void 0!==t.playing&&!0===t.playing&&t.hideControls&&(t.fadeControls("out"),t.controlsHidden=!0)},5e3),this.hideControlsTimeoutStatus="active"},AblePlayer.prototype.refreshControls=function(e="init",i,a){var s,n,r,o,l,h,p,c,u,d,f,g,m;if((e="init",s=this,!this.swappingSrc||!this.playing)&&void 0!==this.duration){if(this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.chapterElapsed=this.getChapterElapsed()),!this.useFixedSeekInterval&&!this.seekIntervalCalculated&&this.duration>0&&this.setSeekInterval(),this.seekBar&&(this.useChapterTimes?(h=this.selectedChapters.cues.length-1,this.selectedChapters.cues[h]==this.currentChapter&&this.currentChapter.end!==this.duration?this.seekBar.setDuration(this.duration-this.currentChapter.start):this.seekBar.setDuration(this.chapterDuration)):void 0===this.duration||isNaN(this.duration)||-1===this.duration||this.seekBar.setDuration(this.duration),this.seekBar.tracking||(c=this.liveUpdatePending||this.seekBar.seekHead.is(t(document.activeElement)),this.liveUpdatePending=!1,this.useChapterTimes?this.seekBar.setPosition(this.chapterElapsed,c):this.seekBar.setPosition(this.elapsed,c)),p=this.seekBar.tracking?this.seekBar.lastTrackPosition:this.useChapterTimes?this.chapterElapsed:this.elapsed),void 0!==this.$durationContainer&&(this.useChapterTimes?this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.chapterDuration)):this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.duration))),void 0!==this.$elapsedTimeContainer&&this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(p)),"legacy"===this.skin&&this.seekBar){let e=this.seekBar.wrapperDiv.parent().parent();f=(d=this.seekBar.wrapperDiv.parent().prev("div.able-left-controls")).next("div.able-right-controls"),u=d.outerWidth(!0),f.children().each(function(){"button"==t(this).attr("role")&&(u+=t(this).outerWidth(!0)+5)}),g=this.fullscreen?t(window).width()-u:e.width()-u-10,Math.abs(g-this.seekBar.getWidth())>5&&this.seekBar.setWidth(g)}if("html5"===this.player&&this.media.buffered.length>0?(m=this.media.buffered.end(0),this.useChapterTimes?(m>this.chapterDuration&&(m=this.chapterDuration),this.seekBar&&this.seekBar.setBuffered(m/this.chapterDuration)):this.seekBar&&!isNaN(m)&&this.seekBar.setBuffered(m/i)):"youtube"===this.player&&this.seekBar&&this.youTubePlayerReady?this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()):this.player,this.$descButton&&this.toggleButtonState(this.$descButton,this.descOn,this.translate("turnOffDescriptions","Turn off descriptions"),this.translate("turnOnDescriptions","Turn on descriptions")),this.$ccButton){(o=this.captions.length)>1&&this.$ccButton.attr({"aria-haspopup":"true","aria-controls":this.mediaId+"-captions-menu"});var v=o>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),y=o>1?this.translate("captions","Captions"):this.translate("hideCaptions","Hide captions"),b=o>1;this.toggleButtonState(this.$ccButton,this.captionsOn,y,v,b)}this.$fullscreenButton&&(this.fullscreen?(this.$fullscreenButton.attr("aria-label",this.translate("exitFullScreen","Exit full screen")),this.getIcon(this.$fullscreenButton,"fullscreen-collapse")):(this.$fullscreenButton.attr("aria-label",this.translate("enterFullScreen","Enter full screen")),this.getIcon(this.$fullscreenButton,"fullscreen-expand"))),void 0!==this.$bigPlayButton&&void 0!==this.seekBar&&(this.paused&&!this.seekBar.tracking?this.hideBigPlayButton||(this.$bigPlayButton.show(),this.$bigPlayButton.attr("aria-hidden","false")):(this.$bigPlayButton.hide(),this.$bigPlayButton.attr("aria-hidden","true"))),this.transcriptType&&(1===this.prefAutoScrollTranscript?(this.autoScrollTranscript=!0,this.$autoScrollTranscriptCheckbox.prop("checked",!0)):(this.autoScrollTranscript=!1,this.$autoScrollTranscriptCheckbox.prop("checked",!1)),this.autoScrollTranscript&&this.currentHighlight&&(l=Math.floor(this.$transcriptDiv.scrollTop()+t(this.currentHighlight).position().top-this.$transcriptDiv.height()/2+t(this.currentHighlight).height()/2))!==Math.floor(this.$transcriptDiv.scrollTop())&&(this.scrollingTranscript=!0,this.movingHighlight&&(this.$transcriptDiv.scrollTop(l),this.movingHighlight=!1))),this.$chaptersButton&&this.$chaptersButton.attr({"aria-label":this.translate("chapters","Chapters"),"aria-haspopup":"true","aria-controls":this.mediaId+"-chapters-menu"}),n={stopped:this.translate("statusStopped","Stopped"),paused:this.translate("statusPaused","Paused"),playing:this.translate("statusPlaying","Playing"),buffering:this.translate("statusBuffering","Buffering"),ended:this.translate("statusEnd","End of track")},this.stoppingYouTube?(this.$status.text()!==this.translate("statusStopped","Stopped")&&this.$status.text(this.translate("statusStopped","Stopped")),this.getIcon(this.$playpauseButton,"play")):void 0!==this.$status&&void 0!==this.seekBar&&this.getPlayerState().then(function(t){s.$status.text()===n[t]||s.seekBar.tracking?(s.statusDebounceStart=null,s.debouncingStatus=!1,clearTimeout(s.statusTimeout),s.statusTimeout=null):(s.swappingSrc?s.debouncingStatus||(s.statusMessageThreshold=2e3):s.debouncingStatus||(s.statusMessageThreshold=250),r=(new Date).getTime(),s.statusDebounceStart?r-s.statusDebounceStart>s.statusMessageThreshold&&(s.$status.text(n[t]),s.statusDebounceStart=null,clearTimeout(s.statusTimeout),s.statusTimeout=null):(s.statusDebounceStart=r,s.debouncingStatus=!0,s.statusTimeout=setTimeout(function(){s.debouncingStatus=!1,s.refreshControls(e)},s.statusMessageThreshold))),s.seekBar.tracking||s.stoppingYouTube||("paused"===t||"stopped"===t||"ended"===t?(s.$playpauseButton.attr("aria-label",s.tt.play),s.getIcon(s.$playpauseButton,"play")):(s.$playpauseButton.attr("aria-label",s.tt.pause),s.getIcon(s.$playpauseButton,"pause")))}),this.fullscreen||(this.$statusBarDiv.width()<300?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1))}},AblePlayer.prototype.handlePlay=function(t){this.paused?(this.okToPlay=!0,this.playMedia(),this.synth.paused&&this.synth.resume()):(this.okToPlay=!1,this.pauseMedia(),this.speakingDescription&&this.synth.pause()),null===this.speechEnabled&&this.initSpeech("play")},AblePlayer.prototype.handleRestart=function(){this.speakingDescription&&this.synth.cancel(),this.seekTo(0)},AblePlayer.prototype.handlePrevTrack=function(){this.playlistIndex=0===this.playlistIndex?this.$playlist.length-1:this.playlistIndex--,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleNextTrack=function(){this.playlistIndex=this.playlistIndex===this.$playlist.length-1?0:this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleRewind=function(){var t;t=this.elapsed-this.seekInterval,this.useChapterTimes&&t<this.currentChapter.start?t=this.currentChapter.start:t<0&&(t=0),this.seekTo(t)},AblePlayer.prototype.handleFastForward=function(){var t,e;e=this.chapters.length-1,t=this.elapsed+this.seekInterval,this.useChapterTimes?this.chapters[e]==this.currentChapter?(t>this.duration||t>this.currentChapter.end||this.duration%t<this.seekInterval)&&(t=Math.min(this.duration,this.currentChapter.end)):t>this.currentChapter.end&&(t=this.currentChapter.end):t>this.duration&&(t=this.duration),this.seekTo(t)},AblePlayer.prototype.handleRateIncrease=function(){this.changeRate(1)},AblePlayer.prototype.handleRateDecrease=function(){this.changeRate(-1)},AblePlayer.prototype.changeRate=function(t){var e,i,a,s;"html5"===this.player?this.setPlaybackRate(this.getPlaybackRate()+.25t):"youtube"===this.player?this.youTubePlayerReady&&(e=this.youTubePlayer.getAvailablePlaybackRates(),i=this.getPlaybackRate(),-1===(a=e.indexOf(i))||(a+=t)<e.length&&a>=0&&this.setPlaybackRate(e[a])):"vimeo"===this.player&&(1===t?s=this.vimeoPlaybackRate+.5<=2?this.vimeoPlaybackRate+.5:2:-1===t&&(s=this.vimeoPlaybackRate-.5>=.5?this.vimeoPlaybackRate-.5:.5),this.setPlaybackRate(s))},AblePlayer.prototype.handleCaptionToggle=function(){var t,e,i=this;if(this.hidingPopup)return this.hidingPopup=!1,!1;if(1===(t=this.captions.length?this.captions:[]).length)if(!0===this.captionsOn)this.captionsOn=!1,this.prefCaptions=0,e=!1,this.updatePreferences("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.unloadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.disableTextTrack():this.$captionsWrapper.hide();else{this.captionsOn=!0,this.prefCaptions=1,e=!0,this.updatePreferences("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.loadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(t){}).catch(function(t){t.name}):this.$captionsWrapper.show();for(var a=0;a<t.length;a++)!0===t[a].def&&(this.selectedCaptions=t[a]);this.selectedCaptions=this.captions[0],this.descriptions.length>=0&&(this.selectedDescriptions=this.descriptions[0])}else this.captionsPopup&&this.captionsPopup.is(":visible")?(this.captionsPopup.hide(),this.hidingPopup=!1,this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)):(this.closePopups(),this.captionsPopup&&(this.captionsPopup.show(),this.$ccButton.attr("aria-expanded","true"),setTimeout(function(){i.captionsPopup.css("top",i.$ccButton.position().top-i.captionsPopup.outerHeight()),i.captionsPopup.css("left",i.$ccButton.position().left),i.captionsPopup.find("li").removeClass("able-focus"),i.captionsPopup.find("li").first().trigger("focus").addClass("able-focus")},50)));var s=t.length>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),n=t.length>1?this.translate("captions","Captions"):this.translate("hideCaptions","Hide captions");this.toggleButtonState(this.$ccButton,this.captionsOn,n,s,e)},AblePlayer.prototype.waitThenFocus=function(t,e){setTimeout(function(){t.trigger("focus")},null==e?50:e)},AblePlayer.prototype.handleChapters=function(){if(this.hidingPopup)return this.hidingPopup=!1,!1;this.chaptersPopup.is(":visible")?(this.chaptersPopup.hide(),this.hidingPopup=!1,this.$chaptersButton.attr("aria-expanded","false").trigger("focus")):(this.closePopups(),this.chaptersPopup.show(),this.$chaptersButton.attr("aria-expanded","true"),this.chaptersPopup.css("top",this.$chaptersButton.position().top-this.chaptersPopup.outerHeight()),this.chaptersPopup.css("left",this.$chaptersButton.position().left),this.chaptersPopup.find("li").removeClass("able-focus"),this.chaptersPopup.find('li[aria-checked="true"]').length?this.chaptersPopup.find('li[aria-checked="true"]').trigger("focus").addClass("able-focus"):this.chaptersPopup.find("li").first().addClass("able-focus").attr("aria-checked","true").trigger("focus"))},AblePlayer.prototype.handleDescriptionToggle=function(){this.descOn=!this.descOn,this.prefDesc=+this.descOn,this.updatePreferences("prefDesc"),void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")||this.$descDiv.hide()),this.initDescription(),this.refreshControls("descriptions")},AblePlayer.prototype.handlePrefsClick=function(t){var e,i,a,s;if(e=this,null===this.speechEnabled&&this.initSpeech("prefs"),this.hidingPopup)return this.hidingPopup=!1,!1;this.prefsPopup.is(":visible")?(this.prefsPopup.hide(),this.$prefsButton.attr("aria-expanded","false"),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.showingPrefsDialog||this.$prefsButton.trigger("focus"),setTimeout(function(){e.hidingPopup=!1},100)):(this.closePopups(),this.prefsPopup.show(),this.$prefsButton.attr("aria-expanded","true"),this.$prefsButton.trigger("focus"),setTimeout(function(){i=e.$prefsButton.position(),a=e.$ableDiv.width()-5,s=a-e.prefsPopup.width(),e.prefsPopup.css("top",i.top-e.prefsPopup.outerHeight()),e.prefsPopup.css("left",s),e.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","0"),e.prefsPopup.find("li").first().trigger("focus").addClass("able-focus")},50))},AblePlayer.prototype.handleTranscriptToggle=function(){var t=this,e=this.$transcriptDiv.is(":visible");e?(this.$transcriptArea.hide(),this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.prefTranscript=0,"popup"===this.transcriptType&&(this.$transcriptButton.trigger("focus").addClass("able-focus"),setTimeout(function(){t.closingTranscript=!1},100))):"popup"===this.transcriptType?(this.positionDraggableWindow("transcript"),this.$transcriptArea.show(),this.$transcriptPopup.hide(),this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.prefTranscript=1,this.focusNotClick=!0,this.$transcriptArea.find("button").first().trigger("focus"),setTimeout(function(){t.focusNotClick=!1},100)):(this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.$transcriptArea.show()),this.updatePreferences("prefTranscript")},AblePlayer.prototype.handleSignToggle=function(){var t=this,e=this.$signWindow.is(":visible");e?(this.$signWindow.hide(),this.toggleButtonState(this.$signButton,!e,this.translate("hideSign","Hide sign language"),this.translate("showSign","Show sign language")),this.prefSign=0,this.$signButton.trigger("focus").addClass("able-focus"),setTimeout(function(){t.closingSign=!1},100)):(this.positionDraggableWindow("sign"),this.$signWindow.show(),this.$signPopup.hide(),this.toggleButtonState(this.$signButton,!e,this.translate("hideSign","Hide sign language"),this.translate("showSign","Show sign language")),this.prefSign=1,this.focusNotClick=!0,this.$signWindow.find("button").first().trigger("focus"),setTimeout(function(){t.focusNotClick=!1},100)),this.updatePreferences("prefSign")},AblePlayer.prototype.setFullscreen=function(e){if(this.fullscreen!=e){var i=this,a=this.$ableWrapper[0];if(this.nativeFullscreenSupported())if(e){var s={x:window.pageXOffset||0,y:window.pageYOffset||0};1===this.prefTranscript&&this.rePositionDraggableWindow("transcript"),1===this.prefSign&&this.rePositionDraggableWindow("sign"),this.scrollPosition=s,a.requestFullscreen?a.requestFullscreen():a.webkitRequestFullscreen&&a.webkitRequestFullscreen(),this.fullscreen=!0}else this.restoringAfterFullscreen=!0,document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullscreen&&document.webkitCancelFullscreen(),1===this.prefTranscript&&this.positionDraggableWindow("transcript"),1===this.prefSign&&this.positionDraggableWindow("sign"),this.fullscreen=!1;t(document).on("fullscreenchange webkitfullscreenchange",function(t){i.fullscreen?i.clickedFullscreenButton||(i.fullscreen=!1,i.restoringAfterFullscreen=!0):i.restoringAfterFullscreen=!0,i.resizePlayer(),i.refreshControls("fullscreen"),i.scrollPosition&&(s=i.scrollPosition,window.scrollTo(s.x,s.y)),setTimeout(function(){i.clickedFullscreenButton=!1,i.restoringAfterFullscreen=!1},100)})}},AblePlayer.prototype.handleFullscreenToggle=function(){var t=this.paused;this.setFullscreen(!this.fullscreen),t?this.pauseMedia():t||this.playMedia(),this.fullscreen?(this.hideControls=!0,this.playing&&(this.fadeControls("out"),this.controlsHidden=!0)):(this.hideControls=this.hideControlsOriginal,this.hideControls||(this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear")))},AblePlayer.prototype.handleTranscriptLockToggle=function(t){this.autoScrollTranscript=t,this.prefAutoScrollTranscript=+t,this.updatePreferences("prefAutoScrollTranscript"),this.refreshControls("transcript")},AblePlayer.prototype.getIcon=function(e,i,a=!1){var s=this.iconType,n=this.getIconData(i);if(s=null===n[3]?"svg":s,s=!0===a?"img":s,!(e.find(s+"#ableplayer-"+i).length>0))if(e.find("svg, img, span").remove(),"font"===s){var r=t("<span>",{class:n[2]});e.append(r)}else if("svg"===s){var o=document.createElementNS("http://www.w3.org/2000/svg","svg");o.setAttribute("focusable","false"),o.setAttribute("aria-hidden","true"),o.setAttribute("viewBox",n[0]),o.setAttribute("id","ableplayer-"+i);let t=function getNode(t,e){for(var i in t=document.createElementNS("http://www.w3.org/2000/svg",t),e)t.setAttributeNS(null,i.replace(/[A-Z]/g,function(t){return"-"+t.toLowerCase()}),e[i]);return t}("path",{d:n[1]});o.appendChild(t),e.append(o),e.html(e.html())}else{var l=t("<img>",{src:n[3],alt:"",role:"presentation"});e.append(l),e.find("img").attr("src",n[3])}},AblePlayer.prototype.setText=function(t,e){t.attr("aria-label",e)},AblePlayer.prototype.toggleButtonState=function(t,e,i,a,s=!1,n=!1){let r=!!t.hasClass("buttonOff");r&&!e||!r&&e||(e?(t.removeClass("buttonOff").attr("aria-label",i),s&&t.attr("aria-pressed","true"),n&&t.attr("aria-expanded","true")):(t.addClass("buttonOff").attr("aria-label",a),s&&t.attr("aria-pressed","false"),n&&t.attr("aria-expanded","false")))},AblePlayer.prototype.showTooltip=function(t){t.show()},AblePlayer.prototype.showAlert=function(t,e="main"){var i,a,s;a=(i=this).$alertBox,s=i.$ableDiv,"transcript"===e?s=i.$transcriptArea:"sign"===e?s=i.$signWindow:"screenreader"===e&&(a=i.$srAlertBox),a.find("span").text(t),a.appendTo(s),a.css({display:"flex"}),"screenreader"!==e&&setTimeout(function(){a.hide()},3e4)},AblePlayer.prototype.showedAlert=function(t){return"transcript"===t?this.showedTranscriptAlert??!1:"sign"===t&&(this.showedSignAlert??!1)},AblePlayer.prototype.resizePlayer=function(e,i){var a,s,n,r;if("audio"!==this.mediaType){if(void 0!==e&&void 0!==i?(this.aspectRatio=i/e,this.playerWidth?(s=this.playerWidth,this.playerHeight?n=this.playerHeight:(n=Math.round(sthis.aspectRatio),this.playerHeight=n)):(s="html5"===this.player?t(window).width():this.$ableWrapper.width(),n=Math.round(sthis.aspectRatio))):this.fullscreen?(this.$ableWrapper.addClass("fullscreen"),s=t(window).width(),n=t(window).height()-this.$playerDiv.outerHeight()-5,this.positionCaptions("overlay")):(this.$ableWrapper.removeClass("fullscreen"),s="html5"===this.player?this.playerWidth?this.playerWidth:t(window).width():this.$ableWrapper.width(),n=Math.round(sthis.aspectRatio),this.positionCaptions(this.prefCaptionsPosition)),this.debug,"youtube"===this.player||"vimeo"===this.player?(r=this.$ableWrapper.find("iframe"),"youtube"===this.player&&this.youTubePlayer?this.youTubePlayer.setSize(s,n):r.attr({width:s,height:n}),this.playerWidth&&this.playerHeight&&(this.fullscreen?r.css({"max-width":"","max-height":""}):r.css({"max-width":this.playerWidth+"px","max-height":this.playerHeight+"px"}))):"html5"===this.player&&(this.fullscreen?(this.$media.attr({width:s,height:n}),this.$ableWrapper.css({width:s,height:n})):(this.$media.removeAttr("width height"),this.$ableWrapper.removeAttr("style"))),void 0!==this.$captionsDiv){var o=!1;window.screen.width<1200&&(o=!0),a=parseInt(this.prefCaptionsSize,10),this.fullscreen&&!o?a=a/100+"vw":this.fullscreen&&o?a="1.2rem":a+="%",this.$captionsDiv.css({"font-size":a})}this.refreshControls()}},AblePlayer.prototype.retrieveOffscreenWindow=function(t,e,i){var a,s,n,r,o,l,h,p;"transcript"==t?a=this.$transcriptArea:"sign"==t&&(a=this.$signWindow),l=a.width(),p=a.height(),n=(s=a.position()).top,o=(r=s.left)+l,h=n+p,n<0&&(n=10,a.css("top",n)),r<0&&(r=10,a.css("left",r)),o>e&&(r=e-20-l,a.css("left",r)),h>i&&(n=i-10-p,a.css("top",n))},AblePlayer.prototype.updateZIndex=function(t){var e,i,a,s,n,r;if(e=8e3,i=7e3,void 0===this.$transcriptArea||void 0===this.$signWindow)return void 0!==this.$transcriptArea?(a=parseInt(this.$transcriptArea.css("z-index")))>i&&this.$transcriptArea.css("z-index",i):void 0!==this.$signWindow&&(s=parseInt(this.$signWindow.css("z-index")))>e&&this.$signWindow.css("z-index",e),!1;if((a=parseInt(this.$transcriptArea.css("z-index")))===(s=parseInt(this.$signWindow.css("z-index"))))n=e,r=i;else if(a>s){if("transcript"===t)return!1;n=a,r=s}else{if("sign"===t)return!1;n=s,r=a}"transcript"===t?(this.$transcriptArea.css("z-index",n),this.$signWindow.css("z-index",r)):"sign"===t&&(this.$signWindow.css("z-index",n),this.$transcriptArea.css("z-index",r))},AblePlayer.prototype.syncTrackLanguages=function(t,e){var i,a,s,n,r;for(i=0;i<this.captions.length;i++)this.captions[i].language===e&&(a=this.captions[i]);for(i=0;i<this.chapters.length;i++)this.chapters[i].language===e&&(n=this.chapters[i]);for(i=0;i<this.descriptions.length;i++)this.descriptions[i].language===e&&(s=this.descriptions[i]);for(i=0;i<this.meta.length;i++)this.meta[i].language===e&&(r=this.meta[i]);if(this.transcriptLang=e,"init"===t||"captions"===t?(this.captionLang=e,this.selectedCaptions=a,this.selectedChapters=n,this.selectedDescriptions=s,this.selectedMeta=r,this.transcriptCaptions=a,this.transcriptChapters=n,this.transcriptDescriptions=s,this.updateChaptersList()):"transcript"===t&&(this.transcriptCaptions=a,this.transcriptChapters=n,this.transcriptDescriptions=s),this.selectedDescriptions&&(this.setDescriptionVoice(),this.$sampleDescDiv&&this.sampleText))for(i=0;i<this.sampleText.length;i++)this.sampleText[i].lang===this.selectedDescriptions.language&&(this.currentSampleText=this.sampleText[i].text,this.$sampleDescDiv.html(this.currentSampleText));this.updateTranscript()}}(jQuery),function(t){AblePlayer.prototype.updateCaption=function(t){this.usingYouTubeCaptions||this.usingVimeoCaptions||void 0===this.$captionsWrapper||(this.captionsOn?(this.$captionsWrapper.show(),void 0!==t&&this.showCaptions(t)):this.$captionsWrapper&&(this.$captionsWrapper.hide(),this.prefCaptions=0))},AblePlayer.prototype.updateCaptionsMenu=function(t){this.captionsPopup.find("li").attr("aria-checked","false"),void 0===t?this.captionsPopup.find("li").last().attr("aria-checked","true"):this.captionsPopup.find("li[lang="+t+"]").attr("aria-checked","true")},AblePlayer.prototype.getCaptionClickFunction=function(t){var e=this;return function(){e.selectedCaptions=t,e.captionLang=t.language,e.currentCaption=-1,e.usingYouTubeCaptions?e.captionsOn?e.youTubePlayer.getOptions("captions")&&e.startedPlaying?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):e.captionLangPending=e.captionLang:e.youTubePlayer.getOptions("captions")?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):(e.youTubePlayer.loadModule("captions"),e.captionLangPending=e.captionLang):e.usingVimeoCaptions?e.vimeoPlayer.enableTextTrack(e.captionLang).then(function(t){}).catch(function(t){t.name}):(e.syncTrackLanguages("captions",e.captionLang),e.swappingSrc||(e.updateCaption(e.elapsed),e.showDescription(e.elapsed))),e.captionsOn=!0,e.hidingPopup=!0,e.captionsPopup.hide(),e.$ccButton.attr("aria-expanded","false"),"audio"===e.mediaType&&e.$captionsContainer.removeClass("captions-off"),setTimeout(function(){e.hidingPopup=!1},100),e.updateCaptionsMenu(e.captionLang),e.waitThenFocus(e.$ccButton),e.prefCaptions=1,e.updatePreferences("prefCaptions"),e.refreshControls("captions")}},AblePlayer.prototype.getCaptionOffFunction=function(){var t=this;return function(){"youtube"==t.player?t.youTubePlayer.unloadModule("captions"):t.usingVimeoCaptions&&t.vimeoPlayer.disableTextTrack(),t.captionsOn=!1,t.currentCaption=-1,"audio"===t.mediaType&&t.$captionsContainer.addClass("captions-off"),t.hidingPopup=!0,t.captionsPopup.hide(),t.$ccButton.attr("aria-expanded","false"),setTimeout(function(){t.hidingPopup=!1},100),t.updateCaptionsMenu(),t.waitThenFocus(t.$ccButton),t.prefCaptions=0,t.updatePreferences("prefCaptions"),this.swappingSrc||(t.refreshControls("captions"),t.updateCaption())}},AblePlayer.prototype.showCaptions=function(t){var e,i,a,s;for(s=this.selectedCaptions.cues.length?this.selectedCaptions.cues:this.captions.length>=1?this.captions[0].cues:[],e=0;e<s.length;e++)if(s[e].start<=t&&s[e].end>t){i=e;break}void 0!==i?this.currentCaption!==i&&(a=this.flattenCueForCaption(s[i]).replace(/\n/g,"<br>"),this.$captionsDiv.html(a),this.currentCaption=i,0===a.length?this.$captionsDiv.css("display","none"):this.$captionsDiv.css("display","inline-block")):(this.$captionsDiv.html("").css("display","none"),this.currentCaption=-1)},AblePlayer.prototype.flattenCueForCaption=function(t){var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("("+t.value+")"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else if("i"===t.type){for(i.push("<em>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</em>")}else if("b"===t.type){for(i.push("<strong>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</strong>")}else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")};if(void 0!==t.components)for(var i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")},AblePlayer.prototype.getCaptionsOptions=function(t){var e=[];switch(t){case"prefCaptionsFont":e[0]=["serif",this.translate("serif","serif")],e[1]=["sans-serif",this.translate("sans","sans-serif")],e[2]=["cursive",this.translate("cursive","cursive")],e[3]=["fantasy",this.translate("fantasy","fantasy")],e[4]=["monospace",this.translate("monospace","monospace")];break;case"prefCaptionsColor":case"prefCaptionsBGColor":e[0]=["white",this.translate("white","white")],e[1]=["yellow",this.translate("yellow","yellow")],e[2]=["green",this.translate("green","green")],e[3]=["cyan",this.translate("cyan","cyan")],e[4]=["blue",this.translate("blue","blue")],e[5]=["magenta",this.translate("magenta","magenta")],e[6]=["red",this.translate("red","red")],e[7]=["black",this.translate("black","black")];break;case"prefCaptionsSize":e[0]="75%",e[1]="100%",e[2]="125%",e[3]="150%",e[4]="200%";break;case"prefCaptionsOpacity":e[0]="0%",e[1]="25%",e[2]="50%",e[3]="75%",e[4]="100%";break;case"prefCaptionsStyle":e[0]=this.translate("captionsStylePopOn","Pop-on"),e[1]=this.translate("captionsStyleRollUp","Roll-up");break;case"prefCaptionsPosition":e[0]="overlay",e[1]="below"}return e},AblePlayer.prototype.translatePrefs=function(t,e,i){if("youtube"==i&&"size"===t)switch(e){case"75%":return-1;case"100%":return 0;case"125%":return 1;case"150%":return 2;case"200%":return 3}return!1},AblePlayer.prototype.stylizeCaptions=function(e,i){var a,s,n;void 0!==e&&("prefCaptionsPosition"==i?this.positionCaptions():void 0!==i?("prefCaptionsFont"===i?a="font-family":"prefCaptionsSize"===i?a="font-size":"prefCaptionsColor"===i?a="color":"prefCaptionsBGColor"===i?a="background-color":"prefCaptionsOpacity"===i&&(a="opacity"),s="prefCaptionsOpacity"===i?parseFloat(t("#"+this.mediaId+"_"+i).val())/100:t("#"+this.mediaId+"_"+i).val(),e.css(a,s)):(n=parseFloat(this.prefCaptionsOpacity)/100,e.css({"font-family":this.prefCaptionsFont,color:this.prefCaptionsColor,"background-color":this.prefCaptionsBGColor,opacity:n}),e===this.$captionsDiv&&void 0!==this.$captionsDiv&&this.$captionsDiv.css({"font-size":this.prefCaptionsSize}),"below"===this.prefCaptionsPosition?void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"}):"overlay"===this.prefCaptionsPosition&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":"transparent",opacity:""}),this.positionCaptions()))},AblePlayer.prototype.positionCaptions=function(t){void 0===t&&(t=this.prefCaptionsPosition),void 0!==this.$captionsWrapper&&("below"==t?(this.$captionsWrapper.removeClass("able-captions-overlay").addClass("able-captions-below"),this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"})):(this.$captionsWrapper.removeClass("able-captions-below").addClass("able-captions-overlay"),this.$captionsWrapper.css({"background-color":"transparent",opacity:""})))}}(jQuery),function(t){AblePlayer.prototype.populateChaptersDiv=function(){var e,i,a;this.chaptersDivLocation&&t("#"+this.chaptersDivLocation)&&(this.$chaptersDiv=t("#"+this.chaptersDivLocation),this.$chaptersDiv.addClass("able-chapters-div"),this.$chaptersDiv.empty(),this.chaptersTitle&&(e="h"+this.getNextHeadingLevel(this.$chaptersDiv).toString(),i=this.mediaId+"-chapters-heading",a=t("<"+e+">",{class:"able-chapters-heading",id:i}).text(this.chaptersTitle),this.$chaptersDiv.append(a)),this.$chaptersNav=t("<nav>"),this.chaptersTitle?this.$chaptersNav.attr("aria-labelledby",i):this.$chaptersNav.attr("aria-label",this.translate("chapters","Chapters")),this.$chaptersDiv.append(this.$chaptersNav),this.updateChaptersList())},AblePlayer.prototype.updateChaptersList=function(){var e,i,a,s,n,r,o,l,h,p;if(e=this,!this.$chaptersNav)return!1;if(void 0===this.useChapterTimes&&(this.useChapterTimes=!("chapter"!==this.seekbarScope||!this.selectedChapters.cues.length)),(i=this.useChapterTimes?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[]).length>0){for(p=t("<ul>"),a=0;a<i.length;a++)s=a,n=t("<li></li>"),l=function(i){return function(){e.seekTrigger="chapter",h=t(this).closest("li"),(p=t(this).closest("ul").find("li")).removeClass("able-current-chapter").children("button").removeAttr("aria-current"),h.addClass("able-current-chapter").children("button").attr("aria-current","true"),e.updateChapter(i),e.seekTo(i)}},(r=t("<button>",{type:"button",val:s}).text(this.flattenCueForCaption(i[s]))).on("click",l(i[s].start)),r.on("focus",function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).closest("li").addClass("able-focus")}),n.on("hover",function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).addClass("able-focus")}),n.on("mouseleave",function(){t(this).removeClass("able-focus")}),r.on("blur",function(){t(this).closest("li").removeClass("able-focus")}),n.append(r),p.append(n),this.defaultChapter===i[s].id&&(r.attr("aria-current","true").parent("li").addClass("able-current-chapter"),this.currentChapter=i[s],o=!0);o||(this.currentChapter=i[0],p.find("button").first().attr("aria-current","true").parent("li").addClass("able-current-chapter")),this.$chaptersNav.html(p)}return!1},AblePlayer.prototype.seekToChapter=function(t){for(var e=0;e<this.selectedChapters.cues.length;){if(this.selectedChapters.cues[e].id==t){this.seekTo(this.selectedChapters.cues[e].start),this.updateChapter(this.selectedChapters.cues[e].start);break}e++}},AblePlayer.prototype.updateChapter=function(t){if(void 0!==this.selectedChapters){var e,i,a;for(e=this.selectedChapters.cues,i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){a=i;break}void 0!==a&&this.currentChapter!==e[a]&&(this.currentChapter=e[a],this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.seekIntervalCalculated=!1),void 0!==this.$chaptersDiv&&(this.$chaptersDiv.find("ul").find("li").removeClass("able-current-chapter").children("button").removeAttr("aria-current"),this.$chaptersDiv.find("ul").find("li").eq(a).addClass("able-current-chapter").children("button").attr("aria-current","true")))}},AblePlayer.prototype.getChapterDuration=function(){var t,e;return void 0===this.currentChapter||void 0===this.duration?0:(t=this.selectedChapters.cues.length-1,this.selectedChapters.cues[t]==this.currentChapter&&this.currentChapter.end!==this.duration?(e=this.duration,this.currentChapter.end=this.duration):e=this.currentChapter.end,e-this.currentChapter.start)},AblePlayer.prototype.getChapterElapsed=function(){return void 0===this.currentChapter?0:this.elapsed>this.currentChapter.start?this.elapsed-this.currentChapter.start:0},AblePlayer.prototype.convertChapterTimeToVideoTime=function(t){if(void 0!==this.currentChapter){var e=this.currentChapter.start+t;return e>this.currentChapter.end?this.currentChapter.end:e}return t},AblePlayer.prototype.getChapterClickFunction=function(t){var e=this;return function(){e.seekTrigger="chapter",e.seekTo(t),e.hidingPopup=!0,e.chaptersPopup.hide(),setTimeout(function(){e.hidingPopup=!1},100),e.$chaptersButton.trigger("focus")}}}(jQuery),function(t){AblePlayer.prototype.updateMeta=function(t){this.hasMeta&&("text"===this.metaType?(this.$metaDiv.show(),this.showMeta(t||this.elapsed)):this.showMeta(t||this.elapsed))},AblePlayer.prototype.showMeta=function(e){var i,a,s,n,r,o,l,h,p;for(i=[],n=this.meta.length>=1?this.meta:[],a=0;a<n.length;a++)if(n[a].start<=e&&n[a].end>e){s=a;break}if(void 0!==s){if(this.currentMeta!==s)if("text"===this.metaType)this.$metaDiv.html(this.flattenCueForMeta(n[s]).replace(/\n/g,"<br>"));else if("selector"===this.metaType){for(r=this.flattenCueForMeta(n[s]).split("\n"),o=0;o<r.length;o++)if("pause"===(l=r[o].trim()).toLowerCase().trim())this.hideBigPlayButton=!0,this.pauseMedia();else if("focus:"==l.toLowerCase().substring(0,6))p=l.substring(6).trim(),t(p).length&&t(p).trigger("focus");else if(t(l).length){if(this.currentMeta=s,void 0===(h=parseInt(t(l).attr("data-duration")))||isNaN(h))t(l).show();else{t(l).show();(t=>new Promise(e=>setTimeout(e,t)))(h).then(()=>{t(l).hide()})}this.visibleSelectors.push(l),i.push(l)}if(this.visibleSelectors&&this.visibleSelectors.length&&this.visibleSelectors.length!==i.length)for(o=this.visibleSelectors.length-1;o>=0;o--)-1==t.inArray(this.visibleSelectors[o],i)&&(t(this.visibleSelectors[o]).hide(),this.visibleSelectors.splice(o,1))}}else{if(void 0!==this.$metaDiv&&this.$metaDiv.html(""),this.visibleSelectors&&this.visibleSelectors.length){for(o=0;o<this.visibleSelectors.length;o++)t(this.visibleSelectors[o]).hide();this.visibleSelectors=[]}this.currentMeta=-1}},AblePlayer.prototype.flattenCueForMeta=function(t){for(var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("["+t.value+"]"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")},i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")}}(jQuery),function(t){AblePlayer.prototype.setupTranscript=function(){var t=new this.defer,e=t.promise();return this.usingYouTubeCaptions||this.usingVimeoCaptions||this.hideTranscriptButton?(this.transcriptType=null,t.resolve()):(this.transcriptType||this.captions.length&&(this.transcriptType="popup"),this.transcriptType?"popup"===this.transcriptType||"external"===this.transcriptType?(this.injectTranscriptArea(),t.resolve()):"manual"===this.transcriptType&&(this.setupManualTranscript(),t.resolve()):t.resolve()),e},AblePlayer.prototype.injectTranscriptArea=function(){var e,i,a,s,n;if(this.$transcriptArea=t("<div>",{class:"able-transcript-area",role:"dialog","aria-label":this.translate("transcriptTitle","Transcript")}),this.$transcriptToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$transcriptDiv=t("<div>",{class:"able-transcript"}),this.$autoScrollTranscriptCheckbox=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),e=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.translate("autoScroll","Auto scroll")),$autoScrollContainer=t("<div>",{class:"autoscroll-transcript"}),$autoScrollContainer.append(e,this.$autoScrollTranscriptCheckbox),this.$transcriptToolbar.append($autoScrollContainer),this.captions.length>1)for(i=t("<div>",{class:"transcript-language-select-wrapper"}),a=t("<label>",{for:"transcript-language-select-"+this.mediaId}).text(this.translate("language","Language")),this.$transcriptLanguageSelect=t("<select>",{id:"transcript-language-select-"+this.mediaId}),s=0;s<this.captions.length;s++)n=t("<option></option>",{value:this.captions[s].language,lang:this.captions[s].language}).text(this.captions[s].label),this.captions[s].def&&n.prop("selected",!0),this.$transcriptLanguageSelect.append(n);i&&(i.append(a,this.$transcriptLanguageSelect),this.$transcriptToolbar.append(i)),this.$transcriptArea.append(this.$transcriptToolbar,this.$transcriptDiv),this.transcriptDivLocation?(this.$transcriptArea.removeAttr("role"),this.$transcriptArea.removeAttr("aria-label"),t("#"+this.transcriptDivLocation).append(this.$transcriptArea)):this.$ableWrapper.append(this.$transcriptArea),this.transcriptDivLocation||(this.initDragDrop("transcript"),1===this.prefTranscript&&this.positionDraggableWindow("transcript",this.getDefaultWidth("transcript"))),this.prefTranscript||this.transcriptDivLocation||this.$transcriptArea.hide()},AblePlayer.prototype.addTranscriptAreaEvents=function(){var t=this;this.$autoScrollTranscriptCheckbox.on("click",function(){t.handleTranscriptLockToggle(t.$autoScrollTranscriptCheckbox.prop("checked"))}),this.$transcriptDiv.on("mousewheel DOMMouseScroll click scroll",function(e){t.scrollingTranscript||(t.autoScrollTranscript=!1,t.refreshControls("transcript")),t.scrollingTranscript=!1}),void 0!==this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.on("click",function(t){t.stopPropagation()}),this.$transcriptLanguageSelect.on("change",function(){var e=t.$transcriptLanguageSelect.val();t.syncTrackLanguages("transcript",e)}))},AblePlayer.prototype.transcriptSrcHasRequiredParts=function(){return!!(t("#"+this.transcriptSrc).length&&(this.$transcriptArea=t("#"+this.transcriptSrc),this.$transcriptArea.find(".able-window-toolbar").length&&(this.$transcriptToolbar=this.$transcriptArea.find(".able-window-toolbar").eq(0),this.$transcriptArea.find(".able-transcript").length&&(this.$transcriptDiv=this.$transcriptArea.find(".able-transcript").eq(0),this.$transcriptArea.find(".able-transcript-seekpoint").length))))&&(this.$transcriptSeekpoints=this.$transcriptArea.find(".able-transcript-seekpoint"),!0)},AblePlayer.prototype.setupManualTranscript=function(){var e,i;e=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),i=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.translate("autoScroll","Auto scroll")),this.$autoScrollTranscriptCheckbox=e,this.$transcriptToolbar.append(i,this.$autoScrollTranscriptCheckbox)},AblePlayer.prototype.updateTranscript=function(){if(this.transcriptType&&(!this.playerCreated||this.$transcriptArea)){if("external"===this.transcriptType||"popup"===this.transcriptType){var e,i,a;if(this.transcriptLang?i=this.transcriptCaptions.cues:this.transcriptCaptions?(this.transcriptLang=this.transcriptCaptions.language,i=this.transcriptCaptions.cues):this.selectedCaptions&&(this.transcriptLang=this.captionLang,i=this.selectedCaptions.cues),this.transcriptChapters)e=this.transcriptChapters.cues;else if(this.chapters.length>0){if(this.transcriptLang)for(var s=0;s<this.chapters.length;s++)this.chapters[s].language===this.transcriptLang&&(e=this.chapters[s].cues);void 0===e&&(e=this.chapters[0].cues||[])}if(this.transcriptDescriptions)a=this.transcriptDescriptions.cues;else if(this.descriptions.length>0){if(this.transcriptLang)for(s=0;s<this.descriptions.length;s++)this.descriptions[s].language===this.transcriptLang&&(a=this.descriptions[s].cues);a||(a=this.descriptions[0].cues||[])}var n=this.generateTranscript(e||[],i||[],a||[]);this.$transcriptDiv.html(n),this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.find("option:selected").prop("selected",!1),this.$transcriptLanguageSelect.find("option[lang="+this.transcriptLang+"]").prop("selected",!0))}var r=this;1===this.prefTabbable&&this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"),this.$transcriptArea.length>0&&this.$transcriptArea.find("span.able-transcript-seekpoint").on("click",function(e){r.seekTrigger="transcript";var i=parseFloat(t(this).attr("data-start"));i+=.01,r.seekingFromTranscript?r.seekingFromTranscript=!1:(r.seekingFromTranscript=!0,r.seekTo(i))})}},AblePlayer.prototype.highlightTranscript=function(e){if(this.transcriptType){var i,a,s,n=this;e=parseFloat(e),this.$transcriptArea.find("span.able-transcript-seekpoint").each(function(){if(i=parseFloat(t(this).attr("data-start")),a=parseFloat(t(this).attr("data-end")),s=!!t(this).parent().hasClass("able-transcript-chapter-heading"),e>=i&&e<=a&&!s)return t(this).hasClass("able-highlight")||(n.$transcriptArea.find(".able-highlight").removeClass("able-highlight"),t(this).addClass("able-highlight"),n.movingHighlight=!0),!1}),n.currentHighlight=n.$transcriptArea.find(".able-highlight"),0===n.currentHighlight.length&&(n.currentHighlight=null)}},AblePlayer.prototype.generateTranscript=function(e,i,a){var s,n=this,r=t('<div class="able-transcript-container"></div>');if(r.attr("lang",this.transcriptLang),s=void 0!==this.transcriptTitle?this.transcriptTitle:this.lyricsMode?this.translate("lyricsTitle","Lyrics"):this.translate("transcriptTitle","Transcript"),!this.transcriptDivLocation){var o=this.playerHeadingLevel,l=(o+=1)+1;if(o<=6)var h="h"+o.toString();else h="div";var p=t("<"+h+">");p.addClass("able-transcript-heading"),o>6&&p.attr({role:"heading","aria-level":o}),p.text(s),p.attr("lang",this.lang),r.append(p)}for(var c=0,u=0,d=0,addChapter=function(e,i){if(l<=6)var a="h"+l.toString();else a="div";var s=t("<"+a+">",{class:"able-transcript-chapter-heading"});l>6&&s.attr({role:"heading","aria-level":l});for(var flattenComponentForChapter=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForChapter(t.children[i]));return e},n=t("<span>",{class:"able-transcript-seekpoint"}),r=0;r<i.components.children.length;r++)for(var o=flattenComponentForChapter(i.components.children[r]),h=0;h<o.length;h++)n.append(o[h]);n.attr("data-start",i.start.toString()),n.attr("data-end",i.end.toString()),s.append(n),e.append(s)},addDescription=function(e,i){var a=t("<div>",{class:"able-transcript-desc"}),s=t("<span>",{class:"able-hidden"});s.attr("lang",n.lang),s.text(n.tt.prefHeadingDescription+": "),a.append(s);for(var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForDescription(t.children[i]));return e},r=t("<span>",{class:"able-transcript-seekpoint"}),o=0;o<i.components.children.length;o++)for(var l=flattenComponentForDescription(i.components.children[o]),h=0;h<l.length;h++)r.append(l[h]);r.attr("data-start",i.start.toString()),r.attr("data-end",i.end.toString()),a.append(r),e.append(a)},addCaption=function(e,i){for(var a=t("<span>",{class:"able-transcript-seekpoint able-transcript-caption"}),flattenComponentForCaption=function(e){var i=[],a=0,flattenString=function(t){var e;a++;var i=[];if(""===t)return i;var s=t.indexOf("["),n=t.indexOf("]"),r=t.indexOf("("),o=t.indexOf(")"),l=-1!==s&&-1!==n,h=-1!==r&&-1!==o;if(h||l){if(a>1)var p="<br/>";else p="";var c=p+'<span class="able-unspoken">',u="</span>";h&&l&&(s<r?h=!1:l=!1)}return h?(e=t.substring(0,r),e+=c,e+=t.substring(r,o+1),e+=u,e+=flattenString(t.substring(o+1)),i.push(e)):l?(e=t.substring(0,s),e+=c,e+=t.substring(s,n+1),e+=u,e+=flattenString(t.substring(n+1)),i.push(e)):i.push(t),i};if("string"===e.type)i=i.concat(flattenString(e.value));else if("v"===e.type){var s=t("<span>",{class:"able-unspoken"});e.value=e.value.replace(/^title="|\"$/g,""),s.text("("+e.value+")"),i.push(s);for(var n=0;n<e.children.length;n++)for(var r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)i.push(r[o])}else if("b"===e.type||"i"===e.type){if("b"===e.type)var l=t("<strong>");else if("i"===e.type)l=t("<em>");for(n=0;n<e.children.length;n++)for(r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)l.append(r[o]);"b"!==e.type&&"i"!=e.type||i.push(l)}else for(n=0;n<e.children.length;n++)i=i.concat(flattenComponentForCaption(e.children[n]));return i},s=0;s<i.components.children.length;s++){var r;s<i.components.children.length-1&&(r=i.components.children[s+1].tagName);for(var o=flattenComponentForCaption(i.components.children[s]),l=0;l<o.length;l++){var h=o[l];"string"==typeof h&&(n.lyricsMode?(h=h.replace(/\n/g,"<br>"),(!r||"i"!==r&&"b"!==r)&&(h+="<br>")):h+=" "),a.append(h)}}a.attr("data-start",i.start.toString()),a.attr("data-end",i.end.toString()),e.append(a),e.append(" \n")};c<e.length||d<a.length||u<i.length;){if(c<e.length&&d<a.length&&u<i.length)var f=Math.min(e[c].start,a[d].start,i[u].start);else if(c<e.length&&d<a.length)f=Math.min(e[c].start,a[d].start);else if(c<e.length&&u<i.length)f=Math.min(e[c].start,i[u].start);else if(d<a.length&&u<i.length)f=Math.min(a[d].start,i[u].start);else f=null;null!==f?void 0!==e[c]&&e[c].start===f?(addChapter(r,e[c]),c+=1):void 0!==a[d]&&a[d].start===f?(addDescription(r,a[d]),d+=1):(addCaption(r,i[u]),u+=1):c<e.length?(addChapter(r,e[c]),c+=1):d<a.length?(addDescription(r,a[d]),d+=1):u<i.length&&(addCaption(r,i[u]),u+=1)}var g=r.children(),m=0;return g.each(function(){t(this).hasClass("able-transcript-caption")?(-1===t(this).text().indexOf("[")&&-1===t(this).text().indexOf("(")||m>0&&(r=wrapTranscriptBlocks(r),m=0),t(this).addClass("able-block-temp"),m++):m>0&&(r=wrapTranscriptBlocks(r),m=0)}),r=wrapTranscriptBlocks(r)};var wrapTranscriptBlocks=function(t){return t.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),t}}(jQuery),function(t){AblePlayer.prototype.showSearchResults=function(){var e=this;if(this.searchDiv&&this.searchString){var i=DOMPurify.sanitize(this.searchString);if(t("#"+this.SearchDiv)){var a="<p>"+this.translate("resultsSummary1","You searched for:")+" ";a+='<span id="able-search-term-echo">'+i+"</span>",a+="</p>";var s=this.searchFor(i,this.searchIgnoreCaps);if(s.length>0){var n=t("<p>",{class:"able-search-results-summary"}),r=this.translate("resultsSummary2","Found %1 matching items.",["<strong>"+s.length+"</strong>"]);r+=" "+this.translate("resultsSummary3","Click the time associated with any item to play the video from that point."),n.html(r);for(var o=t("<ul>"),l=0;l<s.length;l++){var h="aria-search-result-"+l,p=t("<li>",{}),c=this.secondsToTime(s[l].start),u=this.translate("searchButtonLabel","Play at %1",[c.title]),d=t("<button>",{class:"able-search-results-time","data-start":s[l].start,title:u,"aria-label":u,"aria-describedby":h});d.text(c.value),d.on("click",function(i){e.seekTrigger="search";var a=parseFloat(t(this).attr("data-start"));a+=.01,e.seeking=!0,e.seekTo(a)});var f=t("<span>",{class:"able-search-result-text",id:h});f.html("..."+s[l].caption+"..."),p.append(d,f),o.append(p)}t("#"+this.searchDiv).html(a).append(n,o)}else{var g=t("<p>").text(this.translate("noResultsFound","No results found."));t("#"+this.searchDiv).html(a).append(g)}}}},AblePlayer.prototype.searchFor=function(e,i){var a,s,n,r,o,l,h;n=[];var p=e.split(" ");if(this.captions.length>0){for(l=0;l<this.captions.length;l++)this.captions[l].language===this.searchLang&&(a=this.searchLang,s=this.captions[l].cues);if(s.length>0)for(o=0,l=0;l<s.length;l++)if(-1!==t.inArray(s[l].components.children[0].type,["string","i","b","u","v","c"])){r=this.flattenCueForCaption(s[l]);var c=i?r.toLowerCase():r;for(h=0;h<p.length;h++){var u=i?p[h].toLowerCase():p[h];if(-1!==c.indexOf(u)){n[o]=[],n[o].start=s[l].start,n[o].lang=a,n[o].caption=this.highlightSearchTerm(p,r),o++;break}}}}return n},AblePlayer.prototype.highlightSearchTerm=function(t,e){return t.forEach(function(t){var i=new RegExp(t,"gi");e=e.replace(i,'<span class="able-search-term">$&</span>')}),e},AblePlayer.prototype.secondsToTime=function(t){t=Math.floor(t);var e=parseInt(t/3600,10)%24,i=parseInt(t/60,10)%60,a=t%60,s="",n="";e>0&&(s+=e+":",n+=1==e?"1 "+this.translate("hour","hour")+" ":e+" "+this.translate("hours","hours")+" "),i<10?(s+="0"+i+":",i>0&&(n+=1==i?"1 "+this.translate("minute","minute")+" ":i+" "+this.translate("minutes","minutes")+" ")):(s+=i+":",n+=i+" "+this.translate("minutes","minutes")+" "),a<10?(s+="0"+a,a>0&&(n+=1==a?"1 "+this.translate("second","second")+" ":a+" "+this.translate("seconds","seconds")+" ")):(s+=a,n+=a+" "+this.translate("seconds","seconds")+" ");var r=[];return r.value=s,r.title=n,r}}(jQuery),function(t){AblePlayer.prototype.onMediaUpdateTime=function(t,e){var i=this;this.getMediaTimes(t,e).then(function(t){i.duration=t.duration,i.elapsed=t.elapsed,i.duration>0&&(1===i.prefHighlight&&i.highlightTranscript(i.elapsed),i.updateCaption(i.elapsed),i.showDescription(i.elapsed),i.updateChapter(i.elapsed),i.updateMeta(i.elapsed),i.refreshControls("timeline",i.duration,i.elapsed))})},AblePlayer.prototype.onMediaPause=function(){this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear"),this.refreshControls("playpause")},AblePlayer.prototype.onMediaComplete=function(){this.hasPlaylist&&!this.cueingPlaylistItem&&(this.playlistIndex===this.$playlist.length-1?this.loop?(this.playlistIndex=0,this.cueingPlaylistItem=!0,this.cuePlaylistItem(0)):(this.playing=!1,this.paused=!0):(this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex))),this.refreshControls()},AblePlayer.prototype.onMediaNewSourceLoad=function(){var t=!1;this.cueingPlaylistItem&&(this.cueingPlaylistItem=!1),this.recreatingPlayer&&(this.recreatingPlayer=!1),this.playbackRate&&this.setPlaybackRate(this.playbackRate),this.userClickedPlaylist?this.startedPlaying&&!this.okToPlay||(this.playMedia(),t=!0):"restart"==this.seekTrigger||"chapter"==this.seekTrigger||"transcript"==this.seekTrigger||"search"==this.seekTrigger?(this.playMedia(),t=!0):this.swappingSrc?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length||this.loop)&&(this.playMedia(),t=!0):this.swapTime>0?"complete"===this.seekStatus?(this.okToPlay&&this.playMedia(),t=!0):"seeking"===this.seekStatus||(this.swapTime===this.elapsed?(this.seekStatus="complete",this.okToPlay&&this.playMedia(),t=!0):this.hasDescTracks?t=!0:this.durationsAreCloseEnough(this.duration,this.prevDuration)?(this.seekStatus="seeking",this.seekTo(this.swapTime)):t=!0):this.playing&&(this.playMedia(),t=!0):this.startedPlaying?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length||this.loop)&&(this.playMedia(),t=!0):t=!0:this.startTime>0?this.seeking?(this.seeking=!1,this.okToPlay&&this.playMedia(),t=!0):this.seekTo(this.startTime):this.defaultChapter&&void 0!==this.selectedChapters?this.seekToChapter(this.defaultChapter):(this.okToPlay&&this.playMedia(),t=!0),t&&(this.swappingSrc=!1,this.seekStatus=null,this.swapTime=0,this.seekTrigger=null,this.seekingFromTranscript=!1,this.userClickedPlaylist=!1,this.okToPlay=!1),this.refreshControls(),this.$focusedElement&&(this.restoreFocus(),this.$focusedElement=null,this.activeMedia=null)},AblePlayer.prototype.durationsAreCloseEnough=function(t,e){return Math.abs(Math.round(t)-Math.round(e))<=1},AblePlayer.prototype.restoreFocus=function(){var e,i;this.$focusedElement&&null!==this.activeMedia&&(i=t("#"+this.activeMedia).closest(".able"),"button"===this.$focusedElement.attr("role")&&(e=this.$focusedElement.attr("class").split(/\s+/),t.each(e,function(t,e){"able-button-handler-"===e.substring(0,20)&&i.find("div.able-controller div."+e).trigger("focus")})))},AblePlayer.prototype.addSeekbarListeners=function(){var t=this;this.seekBar.bodyDiv.on("startTracking",function(e){t.pausedBeforeTracking=t.paused,t.pauseMedia()}).on("tracking",function(e,i){t.highlightTranscript(i),t.updateCaption(i),t.showDescription(i),t.updateChapter(t.convertChapterTimeToVideoTime(i)),t.updateMeta(i),t.refreshControls()}).on("stopTracking",function(e,i){t.useChapterTimes?t.seekTo(t.convertChapterTimeToVideoTime(i)):t.seekTo(i),t.pausedBeforeTracking||setTimeout(function(){t.playMedia()},200)})},AblePlayer.prototype.onClickPlayerButton=function(e){var i;switch(this.getButtonNameFromClass(t(e).attr("class"))){case"play":this.clickedPlay=!0,this.handlePlay();break;case"restart":this.seekTrigger="restart",this.handleRestart();break;case"previous":this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="previous",this.buttonWithFocus="previous",this.handlePrevTrack();break;case"next":this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="next",this.buttonWithFocus="next",this.handleNextTrack();break;case"rewind":this.seekTrigger="rewind",this.handleRewind();break;case"forward":this.seekTrigger="forward",this.handleFastForward();break;case"mute":this.handleMute();break;case"volume":this.handleVolumeButtonClick();break;case"faster":this.handleRateIncrease();break;case"slower":this.handleRateDecrease();break;case"captions":this.handleCaptionToggle();break;case"chapters":this.handleChapters();break;case"descriptions":this.handleDescriptionToggle();break;case"sign":this.closingSign||this.handleSignToggle();break;case"preferences":"menu"===t(e).attr("data-prefs-popup")?this.handlePrefsClick():(this.showingPrefsDialog=!0,this.closePopups(),"keyboard"===(i=t(e).attr("data-prefs-popup"))?this.keyboardPrefsDialog.show():"captions"===i?this.captionPrefsDialog.show():"descriptions"===i?this.descPrefsDialog.show():"transcript"===i&&this.transcriptPrefsDialog.show(),this.showingPrefsDialog=!1);break;case"transcript":this.closingTranscript||this.handleTranscriptToggle();break;case"fullscreen":this.clickedFullscreenButton=!0,this.handleFullscreenToggle()}},AblePlayer.prototype.getButtonNameFromClass=function(t){var e,i;for(e=t.split(" "),i=0;i<e.length;i++)if("able-button-handler-"===e[i].substring(0,20))return e[i].substring(20);return t},AblePlayer.prototype.okToHandleKeyPress=function(){let e=!0;1===this.prefNoKeyShortcuts&&(e=!1);var i=AblePlayer.getActiveDOMElement();return"INPUT"!==t(i).prop("tagName")&&e},AblePlayer.prototype.onPlayerKeyPress=function(e){var i,a;return i=e.key,a=t(document.activeElement),"Escape"===i&&this.$transcriptArea&&t.contains(this.$transcriptArea[0],a[0])&&!this.hidingPopup?(this.handleTranscriptToggle(),!1):!!this.okToHandleKeyPress()&&void(t(":focus").is("[contenteditable]")||t(":focus").is("input")||t(":focus").is("textarea")&&!this.stenoMode||t(":focus").is("select")||e.target.hasAttribute("contenteditable")||"INPUT"===e.target.tagName||"TEXTAREA"===e.target.tagName&&!this.stenoMode||"SELECT"===e.target.tagName||("Escape"===i?(this.closePopups(),this.$tooltipDiv.hide(),this.seekBar.hideSliderTooltips()):" "===i?"button"===a.attr("role")&&(e.preventDefault(),a.trigger("click")):"p"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePlay()):"s"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRestart()):"m"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleMute()):"v"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeButtonClick()):i>=0&&i<=9?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeKeystroke(i)):"c"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleCaptionToggle()):"d"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleDescriptionToggle()):"f"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleFastForward()):"r"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRewind()):"b"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrevTrack()):"n"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleNextTrack()):"e"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrefsClick()):"Enter"===i&&("button"===a.attr("role")||"SPAN"===a.prop("tagName")||"LI"===a.prop("tagName"))&&a.trigger("click")))},AblePlayer.prototype.addHtml5MediaListeners=function(){var t=this;this.$media.on("emptied",function(){}).on("loadedmetadata",function(){t.duration=t.media.duration}).on("canplay",function(){}).on("canplaythrough",function(){t.onMediaNewSourceLoad()}).on("play",function(){}).on("playing",function(){t.playing=!0,t.paused=!1,t.swappingSrc=!1,t.refreshControls("playpause")}).on("ended",function(){t.playing=!1,t.paused=!0,t.onMediaComplete()}).on("progress",function(){t.refreshControls("timeline")}).on("waiting",function(){}).on("durationchange",function(){t.refreshControls("timeline")}).on("timeupdate",function(){t.onMediaUpdateTime()}).on("pause",function(){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist||t.swappingSrc||(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause()}).on("ratechange",function(){}).on("volumechange",function(){t.volume=t.getVolume()}).on("error",function(){t.debug&&t.media.error.code})},AblePlayer.prototype.addVimeoListeners=function(){var t=this;this.vimeoPlayer.on("loaded",function(e){t.onMediaNewSourceLoad()}),this.vimeoPlayer.on("play",function(e){t.playing=!0,t.startedPlaying=!0,t.paused=!1,t.refreshControls("playpause")}),this.vimeoPlayer.on("ended",function(e){t.playing=!1,t.paused=!0,t.onMediaComplete()}),this.vimeoPlayer.on("bufferstart",function(){}),this.vimeoPlayer.on("bufferend",function(){}),this.vimeoPlayer.on("progress",function(t){}),this.vimeoPlayer.on("seeking",function(t){}),this.vimeoPlayer.on("seeked",function(t){}),this.vimeoPlayer.on("timeupdate",function(e){t.onMediaUpdateTime(e.duration,e.seconds)}),this.vimeoPlayer.on("pause",function(e){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist||t.swappingSrc||(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause(),t.refreshControls("playpause")}),this.vimeoPlayer.on("playbackratechange",function(e){t.vimeoPlaybackRate=e.playbackRate}),this.vimeoPlayer.on("texttrackchange",function(t){}),this.vimeoPlayer.on("volumechange",function(e){t.volume=10e.volume}),this.vimeoPlayer.on("error",function(t){})},AblePlayer.prototype.addEventListeners=function(){var e=this;if(t(window).on("resize",function(){e.resizePlayer()}),window.MutationObserver){var i=this.$ableDiv[0];new MutationObserver(function(t){t.forEach(function(t){"attributes"===t.type&&"style"===t.attributeName&&e.$ableDiv.is(":visible")&&e.refreshControls()})}).observe(i,{attributes:!0,childList:!0,characterData:!0})}void 0!==this.seekBar?this.addSeekbarListeners():setTimeout(function(){void 0!==e.seekBar&&e.addSeekbarListeners()},2e3),this.$controllerDiv.find('div[role="button"]').on("click",function(t){t.stopPropagation(),e.onClickPlayerButton(this)}),t("body").on("click",function(i){if(0!==i.button)return!1;(t(".able-popup:visible").length||t(".able-volume-slider:visible").length)&&e.closePopups(),"VIDEO"===i.target.tagName&&(e.clickedPlay=!0)}),this.$ableDiv.on("mousemove",function(){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),t(document).on("keydown",function(t){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),this.$ableDiv.on("keydown",function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)}),this.stenoMode&&void 0!==this.stenoFrameContents&&this.stenoFrameContents.on("keydown",function(t){e.onPlayerKeyPress(t)}),this.$transcriptArea&&this.$transcriptArea.on("keydown",function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)}),this.$playlist&&this.$playlist.on("click",function(i){e.userClickedPlaylist||(e.userClickedPlaylist=!0,e.playlistIndex=t(this).index(),e.cuePlaylistItem(e.playlistIndex))}),this.$media.on("click",function(){e.handlePlay()}),"html5"===this.player?this.addHtml5MediaListeners():"vimeo"===this.player?this.addVimeoListeners():"youtube"===this.player&&setInterval(function(){e.onMediaUpdateTime()},300)}}(jQuery),function(t){AblePlayer.prototype.initDragDrop=function(e){var i,a,s,n,r,o,l,h,p,c,u,d,f;for(i=this,"transcript"===e?(a=this.$transcriptArea,n="transcript-window",(s=this.$transcriptToolbar).attr("aria-label",this.translate("transcriptControls","Transcript Window Controls"))):"sign"===e&&(a=this.$signWindow,n="sign-window",(s=this.$signToolbar).attr("aria-label",this.translate("signControls","Sign Language Window Controls"))),s.addClass("able-draggable"),s.attr("role","application"),$dragHandle=t("<div>",{class:"able-drag-handle"}),$dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'),r=t("<div>",{class:"able-resizable"}),o=t("<svg>").attr({width:"100%",height:"100%",viewBox:"0 0 100 100",preserveAspectRatio:"none"}),l=1;l<=3;l++)1===l?(h="100",p="0",c="0",u="100"):2===l?(h="33",p="100",c="100",u="33"):3===l&&(h="67",p="100",c="100",u="67"),d=t("<line>").attr({x1:h,y1:p,x2:c,y2:u,"vector-effect":"non-scaling-stroke"}),o.append(d);r.html(o),f=parseInt(a.css("z-index"))+100,r.css("z-index",f),a.append(r),s.append($dragHandle),r.html(r.html()),$dragHandle.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type||"touchstart"===t.type?i.windowMenuClickRegistered||(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.dragDevice="mouse",i.startDrag(e,a)):"mouseup"!==t.type&&"touchend"!==t.type||i.dragging&&"mouse"===i.dragDevice&&i.endDrag(e),!1}),r.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type||"touchstart"===t.type?i.windowMenuClickRegistered||(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.startResize(e,a)):"mouseup"!==t.type&&"touchend"!==t.type||i.resizing&&i.endResize(e),!1}),a.on("click",function(){i.windowMenuClickRegistered||i.finishingDrag||i.updateZIndex(e),i.finishingDrag=!1}),this.addWindowMenu(e,a,n)},AblePlayer.prototype.addWindowMenu=function(e,i,a){var s,n,r,o,l,h,p;s=this,this.windowMenuClickRegistered=!1,this.finishingDrag=!1,p=this.mediaId+"-"+a+"-menu",r=t("<button>",{type:"button",tabindex:"0","aria-haspopup":"true","aria-controls":p,"aria-expanded":"false",class:"able-button-handler-preferences"}),this.getIcon(r,"preferences"),this.setText(r,this.translate("windowButtonLabel","Window options")),o=this.mediaId+"-"+a+"-tooltip",l=t("<div>",{class:"able-tooltip",id:o}).hide(),r.on("mouseenter focus",function(e){var i=t(this).attr("aria-label"),a=AblePlayer.localGetElementById(r[0],o).text(i),n={right:"",left:"0px",top:-1(a.height()+2)+"px"};a.css(n),s.showTooltip(a),t(this).on("mouseleave blur",function(){AblePlayer.localGetElementById(r[0],o).text("").hide()})}),h=this.setupPopups(a),"transcript"===e?(this.$transcriptPopupButton=r,this.$transcriptPopup=h,this.$transcriptToolbar.prepend(n,r,l,h)):"sign"===e&&(this.$signPopupButton=r,this.$signPopup=h,this.$signToolbar.append(n,r,l,h)),r.on("click keydown",function(t){return!s.focusNotClick&&(s.dragging?(s.dragKeys(e,t),!1):(t.stopPropagation(),s.windowMenuClickRegistered||s.finishingDrag||s.handleWindowButtonClick(e,t),void(s.finishingDrag=!1)))}),this.addResizeDialog(e,i)},AblePlayer.prototype.addResizeDialog=function(e,i){var a,s,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P;a=this,"transcript"===e?(s=this.$transcriptPopup,n=this.$transcriptPopupButton):"sign"===e&&(s=this.$signPopup,n=this.$signPopupButton),r=this.mediaId+"-resize-"+e+"-width",o=this.mediaId+"-resize-"+e+"-height",l=t("<div></div>",{class:"able-resize-form"}),h=t("<div></div>"),$resizeControls=t('<div class="able-prefs-buttons"></div>'),p=t("<div></div>"),c=t("<input>",{type:"number",id:r,min:0,value:""}),u=t("<label>",{for:r}).text(this.translate("width","Width")),d=t("<div></div>"),f=t("<input>",{type:"number",id:o,min:0,value:""}),g=t("<label>",{for:o}).text(this.translate("height","Height")),m=t('<button class="modal-button">'+this.translate("save","Save")+"</button>"),v=t('<button class="modal-button">'+this.translate("cancel","Cancel")+"</button>"),m.on("click",function(){y=t("#"+r).val(),b=t("#"+o).val(),a.resizeObject(e,y,b),a.updatePreferences(e),P.hide(),s.hide(),n.trigger("focus")}),v.on("click",function(){P.hide(),s.hide(),n.trigger("focus")}),p.append(u,c),d.append(g,f),h.append(p,d),$resizeControls.append(m,v),l.append(h,$resizeControls),t("body").append(l),P=new AccessibleDialog(l,n,this.translate("windowResizeHeading","Resize Window"),this.translate("closeButtonLabel","Close")),"transcript"===e?this.transcriptResizeDialog=P:"sign"===e&&(this.signResizeDialog=P)},AblePlayer.prototype.handleWindowButtonClick=function(e,i){var a,s,n,r,o;if(a=this,this.focusNotClick)return!1;if("transcript"===e?(s=this.$transcriptPopup,n=this.$transcriptPopupButton,r=this.$transcriptToolbar):"sign"===e&&(s=this.$signPopup,n=this.$signPopupButton,r=this.$signToolbar),"keydown"===i.type)if(" "===i.key||"Enter"===i.key)this.windowMenuClickRegistered=!0;else{if("Escape"!==i.key)return!1;s.is(":visible")?(s.hide(),a.windowMenuClickRegistered=!1,s.find("li").removeClass("able-focus").attr("tabindex","-1"),n.trigger("focus")):"sign"===e?this.handleSignToggle():"transcript"===e&&this.handleTranscriptToggle()}else this.windowMenuClickRegistered=!0;s.is(":visible")?(s.hide(),a.windowMenuClickRegistered=!1,s.find("li").removeClass("able-focus"),n.attr("aria-expanded","false").trigger("focus")):(this.updateZIndex(e),o=r.outerHeight()-1,s.css("top",o),s.show(),n.attr("aria-expanded","true"),t(this).find("li").first().trigger("focus").addClass("able-focus"),a.windowMenuClickRegistered=!1)},AblePlayer.prototype.handleMenuChoice=function(e,i,a){var s,n,r,o,l,h,p,c,u;if("transcript"===e?(s=this.$transcriptArea,n=this.$transcriptPopup,r=this.$transcriptPopupButton,o=this.transcriptResizeDialog):"sign"===e&&(s=this.$signWindow,n=this.$signPopup,r=this.$signPopupButton,o=this.signResizeDialog,l=s.outerWidth(),h=s.outerHeight(),p=l/h,widthId=this.mediaId+"-resize-"+e+"-width",heightId=this.mediaId+"-resize-"+e+"-height",t("#"+heightId).prop("readonly",!0),t("#"+widthId).on("input",function(){c=t(this).val(),u=Math.round(c/p),t("#"+heightId).val(u)})),this.$activeWindow=s,"keydown"===a.type)return"Escape"===a.key?(n.hide(),this.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),r.trigger("focus"),!1):("close"!==i&&(this.$activeWindow=s),!1);if(n.hide(),this.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),"close"!==i&&r.trigger("focus"),"move"===i)this.$activeWindow.attr("role","application"),this.showedAlert(e)||(this.showAlert(this.translate("windowMoveAlert","Drag or use arrow keys to move the window; Enter to stop"),e),"transcript"===e?this.showedTranscriptAlert=!0:"sign"===e&&(this.showedSignAlert=!0)),this.dragDevice="keydown"===a.type?"keyboard":"mouse",this.startDrag(e,s),n.hide().parent().attr("tabindex","-1").trigger("focus");else if("resize"==i){var d=o.getInputs();d&&(d[0].value=Math.round(s.outerWidth()),d[1].value=Math.round(s.outerHeight())),o.show()}else"close"==i&&("transcript"===e?(this.closingTranscript=!0,this.handleTranscriptToggle()):"sign"===e&&(this.closingSign=!0,this.handleSignToggle()))},AblePlayer.prototype.startDrag=function(e,i){var a,s,n,r,o;a=this,this.$activeWindow||(this.$activeWindow=i),this.dragging=!0,"transcript"===e?s=this.$transcriptPopup:"sign"===e&&(s=this.$signPopup),s.is(":visible")&&s.hide(),this.updateZIndex(e),n=this.$activeWindow.position(),this.dragStartX=n.left,this.dragStartY=n.top,void 0===this.startMouseX?(this.dragDevice="keyboard",this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.startingDrag=!0):(this.dragDevice="mouse",this.dragOffsetX=this.startMouseX-this.dragStartX,this.dragOffsetY=this.startMouseY-this.dragStartY),this.$activeWindow.addClass("able-drag").css({position:"absolute",top:this.dragStartY+"px",left:this.dragStartX+"px"}).trigger("focus");this.dragDevice;return"mouse"===this.dragDevice?t(document).on("mousemove touchmove",function(t){a.dragging&&(r=t.pageX-a.dragOffsetX,o=t.pageY-a.dragOffsetY,a.resetDraggedObject(r,o))}):"keyboard"===this.dragDevice&&this.$activeWindow.on("keydown",function(t){a.dragging&&a.dragKeys(e,t)}),!1},AblePlayer.prototype.dragKeys=function(t,e){if(this.startingDrag)return this.startingDrag=!1,!1;switch(e.key){case"ArrowLeft":this.dragKeyX-=10,this.$srAlertBox.text(this.translate("windowMoveLeft","Window moved left"));break;case"ArrowUp":this.dragKeyY-=10,this.$srAlertBox.text(this.translate("windowMoveUp","Window moved up"));break;case"ArrowRight":this.dragKeyX+=10,this.$srAlertBox.text(this.translate("windowMoveRight","Window moved right"));break;case"ArrowDown":this.dragKeyY+=10,this.$srAlertBox.text(this.translate("windowMoveDown","Window moved down"));break;case"Enter":case"Escape":return this.$srAlertBox.text(this.translate("windowMoveStopped","Window move stopped")),this.endDrag(t),!1;default:return!1}return this.resetDraggedObject(this.dragKeyX,this.dragKeyY),e.preventDefault&&e.preventDefault(),!1},AblePlayer.prototype.resetDraggedObject=function(t,e){setTimeout(()=>{this.$srAlertBox.text("")},2e3),this.$activeWindow.css({left:t+"px",top:e+"px"})},AblePlayer.prototype.resizeObject=function(t,e,i){var a;this.$activeWindow.css({width:e+"px",height:i+"px"}),"transcript"===t&&(a=i-50,this.$transcriptDiv.css("height",a+"px"))},AblePlayer.prototype.endDrag=function(e){var i,a;i=this,"transcript"===e?(this.$transcriptPopup,a=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,a=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown").removeClass("able-drag"),this.$activeWindow.attr("role","dialog"),this.$activeWindow=null,"keyboard"===this.dragDevice&&a.trigger("focus"),this.dragging=!1,this.updatePreferences(e),this.startMouseX=void 0,this.startMouseY=void 0,this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){i.finishingDrag=!1},100)},AblePlayer.prototype.startResize=function(e,i){var a,s,n,r;return a=this,this.$activeWindow=i,this.resizing=!0,(s="transcript"===e?this.$transcriptPopup:this.$signPopup).is(":visible")&&s.hide().parent().trigger("focus"),startPos=this.$activeWindow.position(),this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.dragStartWidth=this.$activeWindow.width(),this.dragStartHeight=this.$activeWindow.outerHeight(),t(document).on("mousemove touchmove",function(t){a.resizing&&(n=a.dragStartWidth+(t.pageX-a.startMouseX),r=a.dragStartHeight+(t.pageY-a.startMouseY),a.resizeObject(e,n,r))}),!1},AblePlayer.prototype.endResize=function(e){var i;"transcript"===e?(this.$transcriptPopup,i=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,i=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown"),i.show().trigger("focus"),this.resizing=!1,this.$activeWindow.removeClass("able-resize"),this.updatePreferences(e),this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){this.finishingDrag=!1},100)}}(jQuery),function(t){AblePlayer.prototype.initSignLanguage=function(){this.hasSignLanguage=!1;var t=void 0!==this.$sources.first().attr("data-sign-src")&&""!==this.$sources.first().attr("data-sign-src"),e=void 0!==this.$media.data("youtube-sign-src")&&""!==this.$media.data("youtube-sign-src"),i=void 0!==this.$sources.first().attr("data-youtube-sign-src")&&""!==this.$sources.first().attr("data-youtube-sign-src");if(!this.isIOS()&&(t||e||i)&&("html5"===this.player||"youtube"===this.player)){let a=this.youTubeSignId??DOMPurify.sanitize(this.$sources.first().attr("data-youtube-sign-src")),s=DOMPurify.sanitize(this.$sources.first().attr("data-sign-src")),n=DOMPurify.sanitize(this.$media.data("youtube-sign-src"));this.signFile=!!t&&s,e?this.signYoutubeId=n:i&&(this.signYoutubeId=a),(this.signFile||this.signYoutubeId)&&(this.isIOS()?this.debug:(this.debug,this.hasSignLanguage=!0,this.injectSignPlayerCode()))}},AblePlayer.prototype.injectSignPlayerCode=function(){var e,i,a,s,n;if(e=this.mediaId+"-sign",(this.signFile||this.signYoutubeId)&&(null!==this.$signDivLocation?(this.$signDivLocation.addClass("able-sign-window able-fixed"),this.$signWindow=this.$signDivLocation):(this.$signWindow=t("<div>",{class:"able-sign-window",role:"dialog","aria-label":this.translate("sign","Sign language")}),this.$signToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$signWindow.append(this.$signToolbar)),this.$ableWrapper.append(this.$signWindow)),this.signFile){if(this.$signVideo=t("<video>",{id:e,tabindex:"-1",muted:!0}),this.signVideo=this.$signVideo[0],this.signFile)n=t("<source>",{src:this.signFile,type:"video/"+this.signFile.substr(-3)}),this.$signVideo.append(n);else for(i=0;i<this.$sources.length;i++){if(a=DOMPurify.sanitize(this.$sources[i].getAttribute("data-sign-src")),s=this.$sources[i].getAttribute("type"),!a)return void(this.hasSignLanguage=!1);n=t("<source>",{src:a,type:s}),this.$signVideo.append(n)}this.$signWindow.append(this.$signVideo)}else this.signYoutubeId&&(this.signYoutube=this.initYouTubeSignPlayer());null===this.$signDivLocation&&this.initDragDrop("sign"),1===this.prefSign?null===this.$signDivLocation&&this.positionDraggableWindow("sign",this.getDefaultWidth("sign")):this.$signWindow.hide()},AblePlayer.prototype.initYouTubeSignPlayer=function(){var e,i,a;return e=this,a=(i=new this.defer).promise(),this.youTubeSignPlayerReady=!1,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeSignInit().then(function(){i.resolve()}):(AblePlayer.loadingYouTubeIframeAPI||e.getScript("https://www.youtube.com/iframe_api",function(){}),t("body").on("youTubeIframeAPIReady",function(){e.finalizeYoutubeSignInit().then(function(){i.resolve()})})),a},AblePlayer.prototype.finalizeYoutubeSignInit=function(){var e,i,a,s,n;return i=(e=new this.defer).promise(),a=this,s=this.mediaId+"_youtube_sign",this.$signWindow.append(t("<div>").attr("id",s)),n=this.okToPlay?1:0,this.youTubeSignPlayer=new YT.Player(s,{videoId:this.getYouTubeId(this.signYoutubeId),host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,cc_lang_pref:this.captionLang,cc_load_policy:0,controls:0,disableKb:1,enablejsapi:1,hl:this.lang,iv_load_policy:3,origin:window.location.origin,playsinline:this.playsInline,rel:0,start:this.startTime},events:{onReady:function(t){t.target.mute(),t.target.unloadModule("captions"),a.youTubeSignPlayerReady=!0,e.resolve()},onError:function(t){e.reject()},onStateChange:function(t){a.getPlayerState().then(function(){})},onApiChange:function(){},onPlaybackQualityChange:function(){}}}),i}}(jQuery),function(){var t={ab:{name:"Abkhaz",nativeName:"аҧсуа"},aa:{name:"Afar",nativeName:"Afaraf"},af:{name:"Afrikaans",nativeName:"Afrikaans"},ak:{name:"Akan",nativeName:"Akan"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"አማርኛ"},ar:{name:"Arabic",nativeName:"العربية"},an:{name:"Aragonese",nativeName:"Aragonés"},hy:{name:"Armenian",nativeName:"Հայերեն"},as:{name:"Assamese",nativeName:"অসমীয়া"},av:{name:"Avaric",nativeName:"авар мацӀ, магӀарул мацӀ"},ae:{name:"Avestan",nativeName:"avesta"},ay:{name:"Aymara",nativeName:"aymar aru"},az:{name:"Azerbaijani",nativeName:"azərbaycan dili"},bm:{name:"Bambara",nativeName:"bamanankan"},ba:{name:"Bashkir",nativeName:"башҡорт теле"},eu:{name:"Basque",nativeName:"euskara, euskera"},be:{name:"Belarusian",nativeName:"Беларуская"},bn:{name:"Bengali",nativeName:"বাংলা"},bh:{name:"Bihari",nativeName:"भोजपुरी"},bi:{name:"Bislama",nativeName:"Bislama"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},br:{name:"Breton",nativeName:"brezhoneg"},bg:{name:"Bulgarian",nativeName:"български език"},my:{name:"Burmese",nativeName:"ဗမာစာ"},ca:{name:"Catalan",nativeName:"Català"},ch:{name:"Chamorro",nativeName:"Chamoru"},ce:{name:"Chechen",nativeName:"нохчийн мотт"},ny:{name:"Chichewa",nativeName:"chiCheŵa, chinyanja"},zh:{name:"Chinese",nativeName:"中文 (Zhōngwén), 汉语, 漢語"},cv:{name:"Chuvash",nativeName:"чӑваш чӗлхи"},kw:{name:"Cornish",nativeName:"Kernewek"},co:{name:"Corsican",nativeName:"corsu, lingua corsa"},cr:{name:"Cree",nativeName:"ᓀᐦᐃᔭᐍᐏᐣ"},hr:{name:"Croatian",nativeName:"hrvatski"},cs:{name:"Czech",nativeName:"česky, čeština"},da:{name:"Danish",nativeName:"dansk"},dv:{name:"Divehi",nativeName:"ދިވެހި"},nl:{name:"Dutch",nativeName:"Nederlands, Vlaams"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti, eesti keel"},ee:{name:"Ewe",nativeName:"Eʋegbe"},fo:{name:"Faroese",nativeName:"føroyskt"},fj:{name:"Fijian",nativeName:"vosa Vakaviti"},fi:{name:"Finnish",nativeName:"suomi, suomen kieli"},fr:{name:"French",nativeName:"français, langue française"},ff:{name:"Fula",nativeName:"Fulfulde, Pulaar, Pular"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"ქართული"},de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"Ελληνικά"},gn:{name:"Guaraní",nativeName:"Avañeẽ"},gu:{name:"Gujarati",nativeName:"ગુજરાતી"},ht:{name:"Haitian",nativeName:"Kreyòl ayisyen"},ha:{name:"Hausa",nativeName:"Hausa, هَوُسَ"},he:{name:"Hebrew",nativeName:"עברית"},hz:{name:"Herero",nativeName:"Otjiherero"},hi:{name:"Hindi",nativeName:"हिन्दी, हिंदी"},ho:{name:"Hiri Motu",nativeName:"Hiri Motu"},hu:{name:"Hungarian",nativeName:"Magyar"},ia:{name:"Interlingua",nativeName:"Interlingua"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ie:{name:"Interlingue",nativeName:"Originally called Occidental; then Interlingue after WWII"},ga:{name:"Irish",nativeName:"Gaeilge"},ig:{name:"Igbo",nativeName:"Asụsụ Igbo"},ik:{name:"Inupiaq",nativeName:"Iñupiaq, Iñupiatun"},io:{name:"Ido",nativeName:"Ido"},is:{name:"Icelandic",nativeName:"Íslenska"},it:{name:"Italian",nativeName:"Italiano"},iu:{name:"Inuktitut",nativeName:"ᐃᓄᒃᑎᑐᑦ"},ja:{name:"Japanese",nativeName:"日本語 (にほんご／にっぽんご)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kl:{name:"Kalaallisut",nativeName:"kalaallisut, kalaallit oqaasii"},kn:{name:"Kannada",nativeName:"ಕನ್ನಡ"},kr:{name:"Kanuri",nativeName:"Kanuri"},ks:{name:"Kashmiri",nativeName:"कश्मीरी, كشميري‎"},kk:{name:"Kazakh",nativeName:"Қазақ тілі"},km:{name:"Khmer",nativeName:"ភាសាខ្មែរ"},ki:{name:"Kikuyu",nativeName:"Gĩkũyũ"},rw:{name:"Kinyarwanda",nativeName:"Ikinyarwanda"},ky:{name:"Kyrgyz",nativeName:"кыргыз тили"},kv:{name:"Komi",nativeName:"коми кыв"},kg:{name:"Kongo",nativeName:"KiKongo"},ko:{name:"Korean",nativeName:"한국어 (韓國語), 조선말 (朝鮮語)"},ku:{name:"Kurdish",nativeName:"Kurdî, كوردی‎"},kj:{name:"Kuanyama",nativeName:"Kuanyama"},la:{name:"Latin",nativeName:"latine, lingua latina"},lb:{name:"Luxembourgish",nativeName:"Lëtzebuergesch"},lg:{name:"Luganda",nativeName:"Luganda"},li:{name:"Limburgish",nativeName:"Limburgs"},ln:{name:"Lingala",nativeName:"Lingála"},lo:{name:"Lao",nativeName:"ພາສາລາວ"},lt:{name:"Lithuanian",nativeName:"lietuvių kalba"},lu:{name:"Luba-Katanga",nativeName:""},lv:{name:"Latvian",nativeName:"latviešu valoda"},gv:{name:"Manx",nativeName:"Gaelg, Gailck"},mk:{name:"Macedonian",nativeName:"македонски јазик"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu, بهاس ملايو‎"},ml:{name:"Malayalam",nativeName:"മലയാളം"},mt:{name:"Maltese",nativeName:"Malti"},mi:{name:"Māori",nativeName:"te reo Māori"},mr:{name:"Marathi",nativeName:"मराठी"},mh:{name:"Marshallese",nativeName:"Kajin M̧ajeļ"},mn:{name:"Mongolian",nativeName:"монгол"},na:{name:"Nauru",nativeName:"Ekakairũ Naoero"},nv:{name:"Navajo",nativeName:"Diné bizaad, Dinékʼehǰí"},nb:{name:"Norwegian Bokmål",nativeName:"Norsk bokmål"},nd:{name:"North Ndebele",nativeName:"isiNdebele"},ne:{name:"Nepali",nativeName:"नेपाली"},ng:{name:"Ndonga",nativeName:"Owambo"},nn:{name:"Norwegian Nynorsk",nativeName:"Norsk nynorsk"},no:{name:"Norwegian",nativeName:"Norsk"},ii:{name:"Nuosu",nativeName:"ꆈꌠ꒿ Nuosuhxop"},nr:{name:"South Ndebele",nativeName:"isiNdebele"},oc:{name:"Occitan",nativeName:"Occitan"},oj:{name:"Ojibwe",nativeName:"ᐊᓂᔑᓈᐯᒧᐎᓐ"},cu:{name:"Church Slavonic",nativeName:"ѩзыкъ словѣньскъ"},om:{name:"Oromo",nativeName:"Afaan Oromoo"},or:{name:"Oriya",nativeName:"ଓଡ଼ିଆ"},os:{name:"Ossetian",nativeName:"ирон æвзаг"},pa:{name:"Punjabi",nativeName:"ਪੰਜਾਬੀ, پنجابی‎"},pi:{name:"Pāli",nativeName:"पाऴि"},fa:{name:"Persian",nativeName:"فارسی"},pl:{name:"Polish",nativeName:"polski"},ps:{name:"Pashto",nativeName:"پښتو"},pt:{name:"Portuguese",nativeName:"Português"},qu:{name:"Quechua",nativeName:"Runa Simi, Kichwa"},rm:{name:"Romansh",nativeName:"rumantsch grischun"},rn:{name:"Kirundi",nativeName:"kiRundi"},ro:{name:"Romanian",nativeName:"română"},ru:{name:"Russian",nativeName:"русский язык"},sa:{name:"Sanskrit",nativeName:"संस्कृतम्"},sc:{name:"Sardinian",nativeName:"sardu"},sd:{name:"Sindhi",nativeName:"सिन्धी, سنڌي، سندھی‎"},se:{name:"Northern Sami",nativeName:"Davvisámegiella"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},sg:{name:"Sango",nativeName:"yângâ tî sängö"},sr:{name:"Serbian",nativeName:"српски језик"},gd:{name:"Gaelic",nativeName:"Gàidhlig"},sn:{name:"Shona",nativeName:"chiShona"},si:{name:"Sinhalese",nativeName:"සිංහල"},sk:{name:"Slovak",nativeName:"slovenčina"},sl:{name:"Slovene",nativeName:"slovenščina"},so:{name:"Somali",nativeName:"Soomaaliga, af Soomaali"},st:{name:"Southern Sotho",nativeName:"Sesotho"},es:{name:"Spanish",nativeName:"español, castellano"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},ss:{name:"Swati",nativeName:"SiSwati"},sv:{name:"Swedish",nativeName:"svenska"},ta:{name:"Tamil",nativeName:"தமிழ்"},te:{name:"Telugu",nativeName:"తెలుగు"},tg:{name:"Tajik",nativeName:"тоҷикӣ, toğikī, تاجیکی‎"},th:{name:"Thai",nativeName:"ไทย"},ti:{name:"Tigrinya",nativeName:"ትግርኛ"},bo:{name:"Tibetan",nativeName:"བོད་ཡིག"},tk:{name:"Turkmen",nativeName:"Türkmen, Түркмен"},tl:{name:"Tagalog",nativeName:"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔"},tn:{name:"Tswana",nativeName:"Setswana"},to:{name:"Tonga",nativeName:"faka Tonga"},tr:{name:"Turkish",nativeName:"Türkçe"},ts:{name:"Tsonga",nativeName:"Xitsonga"},tt:{name:"Tatar",nativeName:"татарча, tatarça, تاتارچا‎"},tw:{name:"Twi",nativeName:"Twi"},ty:{name:"Tahitian",nativeName:"Reo Tahiti"},ug:{name:"Uyghur",nativeName:"Uyƣurqə, ئۇيغۇرچە‎"},uk:{name:"Ukrainian",nativeName:"українська"},ur:{name:"Urdu",nativeName:"اردو"},uz:{name:"Uzbek",nativeName:"zbek, Ўзбек, أۇزبېك‎"},ve:{name:"Venda",nativeName:"Tshivenḓa"},vi:{name:"Vietnamese",nativeName:"Tiếng Việt"},vo:{name:"Volapük",nativeName:"Volapük"},wa:{name:"Walloon",nativeName:"Walon"},cy:{name:"Welsh",nativeName:"Cymraeg"},wo:{name:"Wolof",nativeName:"Wollof"},fy:{name:"Western Frisian",nativeName:"Frysk"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"ייִדיש"},yo:{name:"Yoruba",nativeName:"Yorùbá"},za:{name:"Zhuang",nativeName:"Saɯ cueŋƅ, Saw cuengh"},"ar-dz":{name:"Arabic (Algeria)",nativeName:"العربية (الجزائر)"},"ar-bh":{name:"Arabic (Bahrain)",nativeName:"العربية (البحرين)"},"ar-eg":{name:"Arabic (Egypt)",nativeName:"العربية (مصر)"},"ar-iq":{name:"Arabic (Iraq)",nativeName:"العربية (العراق)"},"ar-jo":{name:"Arabic (Jordan)",nativeName:"العربية (الأردن)"},"ar-kw":{name:"Arabic (Kuwait)",nativeName:"العربية (الكويت)"},"ar-lb":{name:"Arabic (Lebanon)",nativeName:"العربية (لبنان)"},"ar-ly":{name:"Arabic (Libya)",nativeName:"العربية (ليبيا)"},"ar-ma":{name:"Arabic (Morocco)",nativeName:"العربية (المملكة المغربية)"},"ar-om":{name:"Arabic (Oman)",nativeName:"العربية (عمان)"},"ar-qa":{name:"Arabic (Qatar)",nativeName:"العربية (قطر)"},"ar-sa":{name:"Arabic (Saudi Arabia)",nativeName:"العربية (المملكة العربية السعودية)"},"ar-sy":{name:"Arabic (Syria)",nativeName:"العربية (سوريا)"},"ar-tn":{name:"Arabic (Tunisia)",nativeName:"العربية (تونس)"},"ar-ae":{name:"Arabic (U.A.E.)",nativeName:"العربية (الإمارات العربية المتحدة)"},"ar-ye":{name:"Arabic (Yemen)",nativeName:"العربية (اليمن)"},"de-at":{name:"German (Austria)",nativeName:"Deutsch (Österreich)"},"de-li":{name:"German (Liechtenstein)",nativeName:"Deutsch (Liechtenstein)"},"de-lu":{name:"German (Luxembourg)",nativeName:"Deutsch (Luxemburg)"},"de-ch":{name:"German (Switzerland)",nativeName:"Deutsch (Schweiz)"},"en-au":{name:"English (Australia)",nativeName:"English (Australia)"},"en-bz":{name:"English (Belize)",nativeName:"English (Belize)"},"en-ca":{name:"English (Canada)",nativeName:"English (Canada)"},"en-ie":{name:"English (Ireland)",nativeName:"English (Ireland)"},"en-jm":{name:"English (Jamaica)",nativeName:"English (Jamaica)"},"en-nz":{name:"English (New Zealand)",nativeName:""},"en-za":{name:"English (South Africa)",nativeName:"English (South Africa)"},"en-tt":{name:"English (Trinidad)",nativeName:"English (Trinidad y Tobago)"},"en-gb":{name:"English (United Kingdom)",nativeName:"English (United Kingdom)"},"en-us":{name:"English (United States)",nativeName:"English (United States)"},"es-ar":{name:"Spanish (Argentina)",nativeName:"Español (Argentina)"},"es-bo":{name:"Spanish (Bolivia)",nativeName:"Español (Bolivia)"},"es-cl":{name:"Spanish (Chile)",nativeName:"Español (Chile)"},"es-co":{name:"Spanish (Colombia)",nativeName:"Español (Colombia)"},"es-cr":{name:"Spanish (Costa Rica)",nativeName:"Español (Costa Rica)"},"es-do":{name:"Spanish (Dominican Republic)",nativeName:"Español (República Dominicana)"},"es-ec":{name:"Spanish (Ecuador)",nativeName:"Español (Ecuador)"},"es-sv":{name:"Spanish (El Salvador)",nativeName:"Español (El Salvador)"},"es-gt":{name:"Spanish (Guatemala)",nativeName:"Español (Guatemala)"},"es-hn":{name:"Spanish (Honduras)",nativeName:"Español (Honduras)"},"es-mx":{name:"Spanish (Mexico)",nativeName:"Español (México)"},"es-ni":{name:"Spanish (Nicaragua)",nativeName:"Español (Nicaragua)"},"es-pa":{name:"Spanish (Panama)",nativeName:"Español (Panamá)"},"es-py":{name:"Spanish (Paraguay)",nativeName:"Español (Paraguay)"},"es-pe":{name:"Spanish (Peru)",nativeName:"Español (Perú)"},"es-pr":{name:"Spanish (Puerto Rico)",nativeName:"Español (Puerto Rico)"},"es-uy":{name:"Spanish (Uruguay)",nativeName:"Español (Uruguay)"},"es-ve":{name:"Spanish (Venezuela)",nativeName:"Español (Venezuela)"},"fr-be":{name:"French (Belgium)",nativeName:"français (Belgique)"},"fr-ca":{name:"French (Canada)",nativeName:"français (Canada)"},"fr-lu":{name:"French (Luxembourg)",nativeName:"français (Luxembourg)"},"fr-ch":{name:"French (Switzerland)",nativeName:"français (Suisse)"},"it-ch":{name:"Italian (Switzerland)",nativeName:"italiano (Svizzera)"},"nl-be":{name:"Dutch (Belgium)",nativeName:"Nederlands (België)"},"pt-br":{name:"Portuguese (Brazil)",nativeName:"Português (Brasil)"},"sv-fi":{name:"Swedish (Finland)",nativeName:"svenska (Finland)"},"zh-hk":{name:"Chinese (Hong Kong)",nativeName:"中文(香港特别行政區)"},"zh-cn":{name:"Chinese (PRC)",nativeName:"中文(中华人民共和国)"},"zh-sg":{name:"Chinese (Singapore)",nativeName:"中文(新加坡)"},"zh-tw":{name:"Chinese Traditional (Taiwan)",nativeName:"中文（台灣）"}};AblePlayer.prototype.getLanguageName=function(e,i){var a,s,n;return(a=t[e.toLowerCase()])?"local"===i?a.nativeName:a.name:e.includes("-")&&(s=e.substring(0,2),n=e.substring(3),a=t[s.toLowerCase()])?"local"===i?a.nativeName+" ("+n+")":a.name+" ("+n+")":e}}(jQuery),function(t){AblePlayer.prototype.getSupportedLangs=function(){return{ca:"Catalan",cs:"Czech",da:"Danish",de:"German",en:"English",es:"Spanish",fr:"French",he:"Hebrew",id:"Indonesian",it:"Italian",ja:"Japanese",ms:"Malay",nb:"Norwegian Bokmål",nl:"Dutch",pl:"Polish",pt:"Portuguese","pt-br":"Brazilian Portuguese",sv:"Swedish",tr:"Turkish","zh-tw":"Chinese (Taiwan)"}},AblePlayer.prototype.translate=function(t,e,i=Array()){let a="";return a=this.tt[t]?this.tt[t]:e,i.length>0&&i.forEach((t,e)=>{let i=e+1;a=a.replace("%"+i,t)}),a},AblePlayer.prototype.getTranslationText=function(){var e,i,a,s,n,r;if(e=new this.defer,i=this,a=this.getSupportedLangs(),this.lang&&Object.hasOwn(a,this.lang))if(2==this.lang.indexOf("-"))this.lang=-1!==Object.hasOwn(a,this.lang.substring(0,2))?this.lang.substring(0,2):null;else{r=!1;for(const[t,e]of Object.entries(a))t.substring(0,2)==this.lang&&(this.lang=a[undefined],r=!0);r||(this.lang=null)}return this.lang||(s=t("body").attr("lang")?t("body").attr("lang").toLowerCase():t("html").attr("lang")?t("html").attr("lang").toLowerCase():null)&&(Object.hasOwn(a,s)?this.lang=s:2==s.indexOf("-")&&Object.hasOwn(a,s.substring(0,2))&&(this.lang=s.substring(0,2))),this.lang||(this.lang="en"),this.searchLang||(this.searchLang=this.lang),n=this.rootPath+"translations/"+this.lang+".json",fetch(n).then(t=>t.json()).then(t=>{i.tt=t,i.translationFiles=!0,e.resolve()}).catch(t=>{n=i.rootPath+"translations/"+i.lang+".js",fetch(n).then(t=>t.json()).then(t=>{i.tt=t,i.translationFiles=!0,e.resolve()}).catch(t=>{i.tt={},i.translationFiles=!1,e.resolve()})}),e.promise()},AblePlayer.prototype.getSampleDescriptionText=function(){if(this.translationFiles){var t,e,i,a,s;e=this.getSupportedLangs(),t=this,this.sampleText=[];for(const[n,r]of Object.entries(e))i=this.rootPath+"translations/"+n+".json",fetch(i).then(t=>t.json()).then(e=>{a=e.sampleDescriptionText,s={lang:undefined,text:a},t.sampleText.push(s)})}else{this.sampleText=[];let t={lang:"en",text:this.translate("sampleDescriptionText","Adjust settings to hear this sample text.")};this.sampleText.push(t)}}}(jQuery),function(t){AblePlayer.prototype.injectVTS=function(){var e,i,a,s,n,r,o,l,h,p,c,u,d,f,g,m,v;if(e=this,null!==document.getElementById("able-vts")&&this.vtsTracks.length){this.langs=[],this.getAllLangs(this.vtsTracks),this.vtsLang=this.lang;let w=this.translate("vtsHeading","Video Transcript Sorter");for(k in i=t("<h2>").text(w),t("#able-vts").append(i),this.$vtsAlert=t("<div>",{id:"able-vts-alert","aria-live":"polite","aria-atomic":"true"}),t("#able-vts").append(this.$vtsAlert),a=t("<div>",{id:"able-vts-instructions"}),s=t("<p>").text(this.translate("vtsInstructions1","Use the Video Transcript Sorter to modify text tracks:")),r=t("<ul>"),o=t("<li>").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.")),l=t("<li>").text(this.translate("vtsInstructions3","Modify content or start/end times (all are directly editable within the table).")),h=t("<li>").text(this.translate("vtsInstructions4","Add new content, such as chapters or descriptions.")),n=t("<p>").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.')),r.append(o,l,h),a.append(s,r,n),t("#able-vts").append(a),p=t("<fieldset>"),c=t("<legend>").text(this.translate("vtsSelectLanguage","Select a language")),p.append(c),$fieldWrapper=t('<div class="vts-lang-selector"></div>'),this.langs)d="vts-lang-radio-"+this.langs[k],u=t("<div>",{}),g=t("<input>",{type:"radio",name:"vts-lang",id:d,value:this.langs[k]}).on("click",function(){e.vtsLang=t(this).val(),e.showVtsAlert("Loading "+e.getLanguageName(e.vtsLang)+" tracks"),e.injectVtsTable("update",e.vtsLang)}),this.langs[k]==this.lang&&g.prop("checked",!0),f=t("<label>",{for:d}).text(this.getLanguageName(this.langs[k])),u.append(g,f),$fieldWrapper.append(u);p.append($fieldWrapper),t("#able-vts").append(p);let C=this.translate("vtsSave","Generate new .vtt content");var y,b,P,T,k;m=t("<button>",{type:"button",id:"able-vts-save",value:"save"}).text(C),t("#able-vts").append(m),this.injectVtsTable("add",this.vtsLang),y=["captions","chapters","descriptions","subtitles"],t('td[contenteditable="true"]').on("focus",function(){b=t(this).text()}).on("blur",function(){b!=t(this).text()&&(P=t(this).index(),T=t(this).text(),1===P?-1===t.inArray(T,y)&&("s"===T.substring(0,1)?t(this).text("subtitles"):"d"===T.substring(0,1)?t(this).text("descriptions"):"ch"===T.substring(0,2)?t(this).text("chapters"):t(this).text("captions")):2!==P&&3!==P||t(this).text(e.formatTimestamp(T)))}).on("keydown",function(t){t.stopPropagation()}),t("#able-vts-save").on("click",function(i){i.stopPropagation(),"save"==t(this).attr("value")?(t(this).attr("value","cancel").text(e.translate("vtsReturn","Return to Editor")),v=t("#able-vts table"),t("#able-vts-instructions").hide(),t("#able-vts > fieldset").hide(),t("#able-vts table").remove(),t("#able-vts-icon-credit").remove(),e.parseVtsOutput(v)):(t(this).attr("value","save").text(C),t("#able-vts-output").remove(),t("#able-vts-instructions").show(),t("#able-vts > fieldset").show(),t("#able-vts").append(v),t("#able-vts").append(e.getIconCredit()),e.showVtsAlert(e.translate("vtsCancel","Cancelling saving. Any edits you made have been restored in the VTS table.")))})}},AblePlayer.prototype.setupVtsTracks=function(t,e,i,a,s,n){var r,o;r=this.getFilenameFromPath(s),o=this.parseVtsTracks(n),this.vtsTracks.push({kind:t,language:e,label:a,srcFile:r,cues:o})},AblePlayer.prototype.getFilenameFromPath=function(t){var e;return-1===(e=t.lastIndexOf("/"))?t:t.substring(e+1)},AblePlayer.prototype.getFilenameFromTracks=function(t,e){for(var i=0;i<this.vtsTracks.length;i++)if(this.vtsTracks[i].kind===t&&this.vtsTracks[i].language===e)return this.vtsTracks[i].srcFile;return!1},AblePlayer.prototype.parseVtsTracks=function(t){var e,i,a,s,n,r,o,l,h;for(e=t.split("\n"),a=[],s=0;s<e.length;)if(-1!==(r=e[s]).indexOf(" --\x3e ")){if(i=r.trim().split(" "),this.isValidTimestamp(i[0])&&this.isValidTimestamp(i[2])){for(l="",n=s+1,h=!1;n<e.length&&!h;)(o=e[n].trim()).length>0?l.length>0?l+="\n"+o:l+=o:h=!0,n++;a.push({start:i[0],end:i[2],content:l}),s=n}}else s++;return a},AblePlayer.prototype.isValidTimestamp=function(t){return!!/^[0-9:,.]$/.test(t)},AblePlayer.prototype.formatTimestamp=function(t){var e,i;if(e=t.substring(0,t.lastIndexOf(".")+1),(i=t.substring(t.lastIndexOf(".")+1)).length>3)i=i.substring(0,3);else if(i.length<3)for(;i.length<3;)i+="0";return e+i},AblePlayer.prototype.injectVtsTable=function(e,i){var a,s,n,r,o,l,h,p,c;for("update"===e&&(t("#able-vts table").remove(),t("#able-vts-icon-credit").remove()),a=t("<table>",{lang:i}),s=t("<thead>"),o=t("<tr>"),n=[this.translate("vtsRow","Row"),this.translate("vtsKind","Kind"),this.translate("vtsStart","Start"),this.translate("vtsEnd","End"),this.translate("vtsContent","Content"),this.translate("vtsActions","Actions")],r=0;r<n.length;r++)l=t("<th>",{scope:"col"}).text(n[r]),"Actions"===n[r]&&l.addClass("actions"),o.append(l);for(s.append(o),a.append(s),p=this.getAllRows(i),r=0;r<p.length;r++)o=t("<tr>",{id:"able-vts-row-"+(c=r+1),class:"kind-"+p[r].kind}),h=t("<td>").text(c),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].kind),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].start),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].end),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].content),o.append(h),h=this.addVtsActionButtons(c,p.length),o.append(h),a.append(o);t("#able-vts").append(a),t("#able-vts").append(this.getIconCredit())},AblePlayer.prototype.addVtsActionButtons=function(e,i){var a,s,n,r,o,l,h,p,c,u;for(a=this,s=t("<td>"),n=["up","down","insert","delete"],r=0;r<n.length;r++)"up"===(o=n[r])?e>1&&(l=t("<button>",{id:"able-vts-button-up-"+e,title:"Move up","aria-label":"Move Row "+e+" up"}).on("click",function(t){a.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101c-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.594l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),s.append(l)):"down"===o?e<i&&(l=t("<button>",{id:"able-vts-button-down-"+e,title:"Move down","aria-label":"Move Row "+e+" down"}).on("click",function(t){a.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"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.424C1.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.428s9.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),s.append(l)):"insert"===o?(l=t("<button>",{id:"able-vts-button-insert-"+e,title:"Insert row below","aria-label":"Insert row before Row "+e}).on("click",function(t){a.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"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.414C242.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.775H27.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.411c5.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.987h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77c7.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),s.append(l)):"delete"===o&&(l=t("<button>",{id:"able-vts-button-delete-"+e,title:"Delete row ","aria-label":"Delete Row "+e}).on("click",function(t){a.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607C429.063,46.021,414.825,31.782,397.281,31.782z"}),u=t("<path>",{d:"M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042c17.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.891c8.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.804zM238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26c0,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.804c0-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.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z"}),p=t("<g>").append(c,u),h.append(p),l.append(h),l.html(l.html()),s.append(l));return s},AblePlayer.prototype.updateVtsActionButtons=function(t,e){var i,a,s,n,r,o;for(i=0;i<t.length;i++)s=(a=t.eq(i)).attr("id"),n=a.attr("aria-label"),r=s.replace(/[0-9]+/g,e),o=n.replace(/[0-9]+/g,e),a.attr("id",r),a.attr("aria-label",o)},AblePlayer.prototype.getIconCredit=function(){return'<div id="able-vts-icon-credit">Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a> from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a> are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a></div>'},AblePlayer.prototype.getAllLangs=function(e){var i;for(i in e)e[i].hasOwnProperty("language")&&-1===t.inArray(e[i].language,this.langs)&&(this.langs[this.langs.length]=e[i].language)},AblePlayer.prototype.getAllRows=function(t){var e,i,a,s;for(s=[],e=0;e<this.vtsTracks.length;e++)if((i=this.vtsTracks[e]).language==t)for(a in i.cues)s.push({kind:i.kind,lang:t,id:i.cues[a].id,start:i.cues[a].start,end:i.cues[a].end,content:i.cues[a].content});return s.sort(function(t,e){return t.start>e.start?1:-1}),s},AblePlayer.prototype.onClickVtsActionButton=function(e){var i,a,s;a=(i=t(e).attr("id").split("-"))[3],s=i[4],"up"==a?this.moveRow(s,"up"):"down"==a?this.moveRow(s,"down"):"insert"==a?this.insertRow(s):"delete"==a&&this.deleteRow(s)},AblePlayer.prototype.insertRow=function(e){var i,a,s,n,r,o,l,h,p,c,u,d,f,g,m;for(s=(a=(i=t("#able-vts table")).find("tr")).length-1,n=parseInt(e)+1,r=t("<tr>",{id:"able-vts-row-"+n}),o=t("<td>").text(n),r.append(o),u=null,l=t("<select>",{id:"able-vts-kind-"+n,"aria-label":"What kind of track is this?",placeholder:"Select a kind"}).on("change",function(){u=t(this).val(),d="kind-"+u,f=t(this).closest("tr"),t(this).parent().text(u),f.addClass(d)}),h=["","captions","chapters","descriptions","subtitles"],p=0;p<h.length;p++)c=t("<option>",{value:h[p]}).text(h[p]),l.append(c);for(o=t("<td>").append(l),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=this.addVtsActionButtons(n,s),r.append(o),i.find("tr").eq(e).after(r),p=n;p<=s;p++)g=p+1,a.eq(p).attr("id","able-vts-row-"+g),a.eq(p).find("td").eq(0).text(g),m=a.eq(p).find("button"),this.updateVtsActionButtons(m,g);this.adjustTimes(n);let v=this.translate("vtsNewRow","A new row %1 has been inserted.",[n]);this.showVtsAlert(v),l.trigger("focus")},AblePlayer.prototype.deleteRow=function(e){var i,a,s,n,r,o;for((i=t("#able-vts table"))[0].deleteRow(e),s=(a=i.find("tr")).length-1,n=e;n<=s;n++)r=n,a.eq(n).attr("id","able-vts-row-"+r),a.eq(n).find("td").eq(0).text(r),o=a.eq(n).find("button"),this.updateVtsActionButtons(o,r);let l=this.translate("vtsDeletedRow","Row %1 has been deleted.",[e]);this.showVtsAlert(l)},AblePlayer.prototype.moveRow=function(e,i){var a,s,n,r;t("#able-vts table").find("tr"),a=t("#able-vts table").find("tr").eq(e),"up"==i?(s=parseInt(e)-1,(n=t("#able-vts table").find("tr").eq(s)).before(a)):"down"==i&&(s=parseInt(e)+1,(n=t("#able-vts table").find("tr").eq(s)).after(a)),a.attr("id","able-vts-row-"+s),a.find("td").eq(0).text(s),this.updateVtsActionButtons(a.find("button"),s),n.attr("id","able-vts-row-"+e),n.find("td").eq(0).text(e),this.updateVtsActionButtons(n.find("button"),e),this.adjustTimes(s),r=this.translate("vtsMovedRow","Row %1 has been moved %2 and is now Row %3.",[e,i,s]),this.showVtsAlert(r)},AblePlayer.prototype.adjustTimes=function(e){var i,a,s,n,r,o,l,h,p,c,u,d,f,g,m,v;(i=[]).captions=.001,i.descriptions=.001,i.chapters=.001,h=(r=(a=t("#able-vts table").find("tr")).eq(e)).is('[class^="kind-"]')?this.getKindFromClass(r.attr("class")):"captions",u=this.getSecondsFromColonTime(r.find("td").eq(2).text()),g=this.getSecondsFromColonTime(r.find("td").eq(3).text()),e>1?(s=e-1,p=(o=a.eq(s)).is('[class^="kind-"]')?this.getKindFromClass(o.attr("class")):null,d=this.getSecondsFromColonTime(o.find("td").eq(2).text()),m=this.getSecondsFromColonTime(o.find("td").eq(3).text())):(s=null,o=null,p=null,d=null,m=null),e<a.length-1?(n=e+1,c=(l=a.eq(n)).is('[class^="kind-"]')?this.getKindFromClass(l.attr("class")):null,f=this.getSecondsFromColonTime(l.find("td").eq(2).text()),v=this.getSecondsFromColonTime(l.find("td").eq(3).text())):(n=null,l=null,c=null,f=null,v=null),isNaN(u)?(null==p&&(p="captions",o.attr("class","kind-captions"),o.find("td").eq(1).html("captions")),"captions"===p?(u=(parseFloat(m)+.001).toFixed(3),g=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+i[h]).toFixed(3)):"chapters"===p?(u=(parseFloat(d)+.001).toFixed(3),g=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+minDurartion[h]).toFixed(3)):"descriptions"===p&&(u=(parseFloat(d)+i.descriptions).toFixed(3),g=(parseFloat(u)+i.descriptions).toFixed(3))):d?d<u?u<f||(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)):(u=(parseFloat(d)+i[p]).toFixed(3),g=(parseFloat(u)+i[h]).toFixed(3)):u<f||(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)),g-u<i[h]&&(g=(parseFloat(u)+i[h]).toFixed(3),f&&(f=(parseFloat(g)+.001).toFixed(3))),r.find("td").eq(2).text(this.formatSecondsAsColonTime(u,!0)),r.find("td").eq(3).text(this.formatSecondsAsColonTime(g,!0)),o&&(o.find("td").eq(2).text(this.formatSecondsAsColonTime(d,!0)),o.find("td").eq(3).text(this.formatSecondsAsColonTime(m,!0))),l&&(l.find("td").eq(2).text(this.formatSecondsAsColonTime(f,!0)),l.find("td").eq(3).text(this.formatSecondsAsColonTime(v,!0)))},AblePlayer.prototype.getKindFromClass=function(t){var e,i;return e=t.indexOf("kind-")+5,-1==(i=t.indexOf(" ",e))?t.substring(e):t.substring(e,i)},AblePlayer.prototype.showVtsAlert=function(t){var e;this.$vtsAlert.text(t).show(),(e=1e4,new Promise(t=>setTimeout(t,e))).then(()=>{this.$vtsAlert.text(t).hide()})},AblePlayer.prototype.parseVtsOutput=function(e){var i,a,s,n,r,o,l,h,p,c;for(i=e.attr("lang"),s=["captions","chapters","descriptions","subtitles"],r={},a=0;a<s.length;a++)r[n=s[a]]="WEBVTT\n\n";if((o=e.find("tr")).length>0)for(a=0;a<o.length;a++)n=o.eq(a).find("td").eq(1).text(),-1!==t.inArray(n,s)&&(l=o.eq(a).find("td").eq(2).text(),h=o.eq(a).find("td").eq(3).text(),p=o.eq(a).find("td").eq(4)[0].innerText,void 0!==l&&void 0!==h&&(r[n]+=l+" --\x3e "+h+"\n","undefined"!==p&&(r[n]+=p),r[n]+="\n\n"));for(c=t("<div>",{id:"able-vts-output"}),t("#able-vts").append(c),a=0;a<s.length;a++)r[n=s[a]].length>8&&this.showWebVttOutput(n,r[n],i)},AblePlayer.prototype.showWebVttOutput=function(e,i,a){var s,n,r,o,l;s=t("<h3>").text(this.capitalizeFirstLetter(e)),o="If you made changes, copy/paste the following content ",(n=this.getFilenameFromTracks(e,a))?(o+="to replace the original content of your "+this.getLanguageName(a)+" ",o+="<em>"+e+"</em> WebVTT file (<strong>"+n+"</strong>)."):o+="into a new "+this.getLanguageName(a)+" <em>"+e+"</em> WebVTT file.",r=t("<p>",{class:"able-vts-output-instructions"}).html(o),l=t("<textarea>").text(i),t("#able-vts-output").append(s,r,l)}}(jQuery),function(t){AblePlayer.prototype.initVimeoPlayer=function(){var e,i,a,s,n,r;return e=this,a=(i=new this.defer).promise(),s=this.mediaId+"_vimeo",this.$mediaContainer.prepend(t("<div>").attr("id",s)),n=this.vimeoDescId&&this.prefDesc?this.vimeoDescId:this.vimeoId,this.activeVimeoId=n,autoplay=this.okToPlay?"true":"false",r=this.playerWidth?this.vimeoUrlHasParams?{url:n,width:this.playerWidth,controls:!1}:{id:n,width:this.playerWidth,controls:!1}:this.vimeoUrlHasParams?{url:n,controls:!1}:{id:n,controls:!1},this.vimeoPlayer=new Vimeo.Player(s,r),this.vimeoPlayer.ready().then(function(){t("#"+s).children("iframe").attr({tabindex:"-1","aria-hidden":!0}),e.vimeoPlayer.getVideoWidth().then(function(t){t&&e.vimeoPlayer.getVideoHeight().then(function(i){i&&e.resizePlayer(t,i)})}).catch(function(t){}),e.hasPlaylist||(e.$media.remove(),e.vimeoPlaybackRate=1,e.vimeoPlayer.setPlaybackRate(e.vimeoPlaybackRate).then(function(t){e.vimeoSupportsPlaybackRateChange=!0}).catch(function(t){e.vimeoSupportsPlaybackRateChange=!1}),i.resolve())}),a},AblePlayer.prototype.getVimeoPaused=function(){var t,e;return e=(t=new this.defer).promise(),this.vimeoPlayer.getPaused().then(function(e){t.resolve(e)}),e},AblePlayer.prototype.getVimeoEnded=function(){var t,e;return e=(t=new this.defer).promise(),this.vimeoPlayer.getEnded().then(function(e){t.resolve(e)}),e},AblePlayer.prototype.getVimeoState=function(){var e,i,a,s,n;return i=(e=new this.defer).promise(),a=[],s=this.vimeoPlayer.getPaused(),n=this.vimeoPlayer.getEnded(),a.push(s),a.push(n),s.then(function(t){e.resolve(t)}),n.then(function(t){e.resolve(t)}),t.when.apply(t,a).then(function(){e.resolve()}),i},AblePlayer.prototype.getVimeoCaptionTracks=function(){var t,e,i,a=new this.defer,s=a.promise();return t=this,this.vimeoPlayer.getTextTracks().then(function(s){if(s.length){for(e=0;e<s.length;e++)t.hasCaptions=!0,1===t.prefCaptions?t.captionsOn=!0:t.captionsOn=!1,i=s[e].language===t.lang,t.tracks.push({kind:s[e].kind,language:s[e].language,label:s[e].label,def:i});t.captions=t.tracks,t.hasCaptions=!0,t.setupPopups("captions"),a.resolve()}else t.hasCaptions=!1,t.usingVimeoCaptions=!1,a.resolve()}),s},AblePlayer.prototype.getVimeoPosterUrl=function(t,e){var i="";return fetch("http://vimeo.com/api/oembed.json?url=https://vimeo.com/"+t).then(t=>t.json()).then(t=>{i=t.thumbnail_url}).catch(t=>{thisObj.debug}),i},AblePlayer.prototype.getVimeoId=function(t){return this.vimeoUrlHasParams=!1,"number"==typeof t?t:(urlObject=new URL(t),"vimeo.com"===urlObject.hostname||"player.vimeo.com"===urlObject.hostname?""!==urlObject.search?(this.vimeoUrlHasParams=!0,t):"player.vimeo.com"===urlObject.hostname?urlObject.pathname.replace("/video/",""):urlObject.pathname.replace("/",""):t)}}(jQuery); \ No newline at end of file diff --git a/src/build/separate-dompurify/ableplayer.dist.js b/src/build/separate-dompurify/ableplayer.dist.js index ba2f846..69886b5 100644 --- a/src/build/separate-dompurify/ableplayer.dist.js +++ b/src/build/separate-dompurify/ableplayer.dist.js @@ -1,37 +1,4 @@ -/! ableplayer V4.5.1 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / -/* - // JavaScript for Able Player - - // HTML5 Media API: - // http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement - // http://dev.w3.org/html5/spec-author-view/video.html - - // W3C API Test Page: - // http://www.w3.org/2010/05/video/mediaevents.html - - // YouTube Player API for iframe Embeds - https://developers.google.com/youtube/iframe_api_reference - - // YouTube Player Parameters - https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 - - // YouTube Data API - https://developers.google.com/youtube/v3 - - // Vimeo Player API - https://github.com/vimeo/player.js - - // Google API Client Library for JavaScript - https://developers.google.com/api-client-library/javascript/dev/dev_jscript - - // Google API Explorer: YouTube services and methods - https://developers.google.com/apis-explorer/#s/youtube/v3/ - - // Web Speech API (Speech Synthesis) - // https://w3c.github.io/speech-api/#tts-section - // https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis -/ - +/! ableplayer V4.8.0 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / /jslint node: true, browser: true, white: true, indent: 2, unparam: true, plusplus: true / /global $, jQuery */ "use strict"; @@ -41,7 +8,6 @@ var AblePlayerInstances = []; (function ($) { $(function () { - $('video, audio').each(function (index, element) { if ($(element).data('able-player') !== undefined) { AblePlayerInstances.push(new AblePlayer($(this),$(element))); @@ -62,12 +28,13 @@ var AblePlayerInstances = []; } }); - // Construct an AblePlayer object - // Parameters are: - // media - jQuery selector or element identifying the media. + /** + * Construct the AblePlayer object. + * + * @param object media jQuery selector or element identifying the media. + / window.AblePlayer = function(media) { - var thisObj = this; // Keep track of the last player created for use with global events. @@ -79,80 +46,49 @@ var AblePlayerInstances = []; return; } - /////////////////////////////// - // // Default variables assignment - // - /////////////////////////////// - // The following variables CAN be overridden with HTML attributes // autoplay (Boolean; if present always resolves to true, regardless of value) if ($(media).attr('autoplay') !== undefined) { - this.autoplay = true; // this value remains constant + this.autoplay = true; // this value remains constant this.okToPlay = true; // this value can change dynamically - } - else { + } else { this.autoplay = false; this.okToPlay = false; } - + // loop (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('loop') !== undefined) { - this.loop = true; - } - else { - this.loop = false; - } + this.loop = ($(media).attr('loop') !== undefined) ? true : false; // playsinline (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('playsinline') !== undefined) { - this.playsInline = '1'; // this value gets passed to YT.Player contructor in youtube.js - } - else { - this.playsInline = '0'; - } + this.playsInline = ($(media).attr('playsinline') !== undefined) ? '1' : '0'; // poster (Boolean, indicating whether media element has a poster attribute) - if ($(media).attr('poster')) { - this.hasPoster = true; - } - else { - this.hasPoster = false; - } + this.hasPoster = ( $(media).attr('poster') || $(media).data('poster') ) ? true : false; - // get height and width attributes, if present - // and add them to variables - // Not currently used, but might be useful for resizing player - if ($(media).attr('width')) { - this.width = $(media).attr('width'); - } - if ($(media).attr('height')) { - this.height = $(media).attr('height'); - } + this.audioPoster = $(media).data('poster'); + this.audioPosterAlt = $(media).data('poster-alt' ); + + // get height and width attributes, if present + // and add them to variables + // Not currently used, but might be useful for resizing player + this.width = $(media).attr('width') ?? 0; + this.height = $(media).attr('height') ?? 0; // start-time - if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) { - this.startTime = $(media).data('start-time'); - } - else { - this.startTime = 0; - } + var startTime = $(media).data('start-time'); + var isNumeric = ( typeof startTime === 'number' || ( typeof startTime === 'string' && value.trim() !== '' && ! isNaN(value) && isFinite( Number(value) ) ) ) ? true : false; + this.startTime = ( startTime !== undefined && isNumeric ) ? startTime : 0; // debug - if ($(media).data('debug') !== undefined && $(media).data('debug') !== false) { - this.debug = true; - } - else { - this.debug = false; - } + this.debug = ($(media).data('debug') !== undefined && $(media).data('debug') !== false) ? true : false; // Path to root directory of Able Player code if ($(media).data('root-path') !== undefined) { // add a trailing slash if there is none this.rootPath = $(media).data('root-path').replace(/\/?$/, '/'); - } - else { + } else { this.rootPath = this.getRootPath(); } @@ -174,68 +110,49 @@ var AblePlayerInstances = []; if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) { this.useChaptersButton = false; - } - else { + } else { this.useChaptersButton = true; } - - // Control whether text descriptions are read aloud + + // Control whether text descriptions are read aloud // set to "false" if the sole purpose of the WebVTT descriptions file // is to integrate text description into the transcript - // set to "true" to write description text to a div - // This variable does not* control the method by which description is read. - // For that, see below (this.descMethod) + // set to "true" to write description text to a div + // This variable does not control the method by which description is read. + // For that, see below (this.descMethod) if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) { this.readDescriptionsAloud = false; - } - else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { + } else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { // support both singular and plural spelling of attribute this.readDescriptionsAloud = false; - } - else { + } else { this.readDescriptionsAloud = true; } - // Method by which text descriptions are read - // valid values of data-desc-reader are: - // 'brower' (default) - text-based audio description is handled by the browser, if supported - // 'screenreader' - text-based audio description is always handled by screen readers - // The latter may be preferable by owners of websites in languages that are not well supported - // by the Web Speech API - if ($(media).data('desc-reader') == 'screenreader') { - this.descReader = 'screenreader'; - } - else { - this.descReader = 'browser'; - } - - // Default state of captions and descriptions - // This setting is overridden by user preferences, if they exist - // values for data-state-captions and data-state-descriptions are 'on' or 'off' - if ($(media).data('state-captions') == 'off') { - this.defaultStateCaptions = 0; // off - } - else { - this.defaultStateCaptions = 1; // on by default - } - if ($(media).data('state-descriptions') == 'on') { - this.defaultStateDescriptions = 1; // on - } - else { - this.defaultStateDescriptions = 0; // off by default - } + // setting initial this.descVoices to an empty array + // to be populated later by getBrowserVoices + this.descVoices = []; - // Default setting for prefDescPause - // Extended description (i.e., pausing during description) is on by default - // but this settings give website owners control over that - // since they know the nature of their videos, and whether pausing is necessary - // This setting is overridden by user preferences, if they exist - if ($(media).data('desc-pause-default') == 'off') { - this.defaultDescPause = 0; // off - } - else { - this.defaultDescPause = 1; // on by default - } + // Method by which text descriptions are read + // valid values of data-desc-reader are: + // 'brower' (default) - text-based audio description is handled by the browser, if supported + // 'screenreader' - text-based audio description is always handled by screen readers + // The latter may be preferable by owners of websites in languages that are not well supported + // by the Web Speech API + this.descReader = ($(media).data('desc-reader') == 'screenreader') ? 'screenreader' : 'browser'; + + // Default state of captions and descriptions + // This setting is overridden by user preferences, if they exist + // values for data-state-captions and data-state-descriptions are 'on' or 'off' + this.defaultStateCaptions = ($(media).data('state-captions') == 'off') ? 0 : 1; + this.defaultStateDescriptions = ($(media).data('state-descriptions') == 'on') ? 1 : 0; + + // Default setting for prefDescPause + // Extended description (i.e., pausing during description) is on by default + // but this settings give website owners control over that + // since they know the nature of their videos, and whether pausing is necessary + // This setting is overridden by user preferences, if they exist + this.defaultDescPause = ($(media).data('desc-pause-default') == 'off') ? 0 : 1; // Headings // By default, an off-screen heading is automatically added to the top of the media player @@ -254,75 +171,60 @@ var AblePlayerInstances = []; // There are three types of interactive transcripts. // In descending of order of precedence (in case there are conflicting tags), they are: // 1. "manual" - A manually coded external transcript (requires data-transcript-src) - // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div) + // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div & a valid target element) // 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button // If data-include-transcript="false", there is no "popup" transcript - - if ($(media).data('transcript-div') !== undefined && $(media).data('transcript-div') !== "") { - this.transcriptDivLocation = $(media).data('transcript-div'); - } - else { + var transcriptDivLocation = $(media).data('transcript-div'); + if ( transcriptDivLocation !== undefined && transcriptDivLocation !== "" && null !== document.getElementById( transcriptDivLocation ) ) { + this.transcriptDivLocation = transcriptDivLocation; + } else { this.transcriptDivLocation = null; } - if ($(media).data('include-transcript') !== undefined && $(media).data('include-transcript') === false) { - this.hideTranscriptButton = true; - } - else { - this.hideTranscriptButton = null; - } + var includeTranscript = $(media).data('include-transcript'); + this.hideTranscriptButton = ( includeTranscript !== undefined && includeTranscript === false) ? true : false; this.transcriptType = null; if ($(media).data('transcript-src') !== undefined) { this.transcriptSrc = $(media).data('transcript-src'); if (this.transcriptSrcHasRequiredParts()) { this.transcriptType = 'manual'; - } - else { + } else { } - } - else if ($(media).find('track[kind="captions"], track[kind="subtitles"]').length > 0) { + } else if ($(media).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length > 0) { // required tracks are present. COULD automatically generate a transcript - if (this.transcriptDivLocation) { - this.transcriptType = 'external'; - } - else { - this.transcriptType = 'popup'; - } + this.transcriptType = (this.transcriptDivLocation) ? 'external' : 'popup'; } // In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript - // If false (default), line breaks are are removed from transcripts in order to provide a more seamless reading experience + // If false (default), line breaks are are removed from transcripts for a more seamless reading experience // If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem - if ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) { - this.lyricsMode = true; - } - else { - this.lyricsMode = false; - } + this.lyricsMode = ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) ? true : false; - // Transcript Title + // Set Transcript Title if defined explicitly. See transcript.js. if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") { this.transcriptTitle = $(media).data('transcript-title'); } - else { - // do nothing. The default title will be defined later (see transcript.js) + + // Sign Language + // sign language can be a modal (default) or assigned to a div on the page. + var signDivLocation = $(media).data('sign-div'); + if ( signDivLocation !== undefined && signDivLocation !== "" && null !== document.getElementById( signDivLocation ) ) { + this.$signDivLocation = $( '#' + signDivLocation ); + } else { + this.$signDivLocation = null; } // Captions // data-captions-position can be used to set the default captions position // this is only the default, and can be overridden by user preferences // valid values of data-captions-position are 'below' and 'overlay' - if ($(media).data('captions-position') === 'overlay') { - this.defaultCaptionsPosition = 'overlay'; - } - else { // the default, even if not specified - this.defaultCaptionsPosition = 'below'; - } + this.defaultCaptionsPosition = ($(media).data('captions-position') === 'overlay') ? 'overlay' : 'below'; // Chapters - if ($(media).data('chapters-div') !== undefined && $(media).data('chapters-div') !== "") { - this.chaptersDivLocation = $(media).data('chapters-div'); + var chaptersDiv = $(media).data('chapters-div'); + if ( chaptersDiv !== undefined && chaptersDiv !== "") { + this.chaptersDivLocation = chaptersDiv; } if ($(media).data('chapters-title') !== undefined) { @@ -330,83 +232,76 @@ var AblePlayerInstances = []; this.chaptersTitle = $(media).data('chapters-title'); } - if ($(media).data('chapters-default') !== undefined && $(media).data('chapters-default') !== "") { - this.defaultChapter = $(media).data('chapters-default'); - } - else { - this.defaultChapter = null; - } + var defaultChapter = $(media).data('chapters-default'); + this.defaultChapter = ( defaultChapter !== undefined && defaultChapter !== "") ? defaultChapter : null; // Slower/Faster buttons // valid values of data-speed-icons are 'animals' (default) and 'arrows' // 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows - if ($(media).data('speed-icons') === 'arrows') { - this.speedIcons = 'arrows'; - } - else { - this.speedIcons = 'animals'; - } + this.speedIcons = ($(media).data('speed-icons') === 'arrows') ? 'arrows' : 'animals'; // Seekbar // valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters' - if ($(media).data('seekbar-scope') === 'chapter' || $(media).data('seekbar-scope') === 'chapters') { - this.seekbarScope = 'chapter'; - } - else { - this.seekbarScope = 'video'; - } + var seekbarScope = $(media).data('seekbar-scope'); + this.seekbarScope = ( seekbarScope === 'chapter' || seekbarScope === 'chapters') ? 'chapter' : 'video'; // YouTube - if ($(media).data('youtube-id') !== undefined && $(media).data('youtube-id') !== "") { - this.youTubeId = this.getYouTubeId($(media).data('youtube-id')); + var youTubeId = $(media).data('youtube-id'); + if ( youTubeId !== undefined && youTubeId !== "") { + this.youTubeId = this.getYouTubeId(youTubeId); + if ( ! this.hasPoster ) { + let poster = this.getYouTubePosterUrl(this.youTubeId,'640'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('youtube-desc-id') !== undefined && $(media).data('youtube-desc-id') !== "") { - this.youTubeDescId = this.getYouTubeId($(media).data('youtube-desc-id')); + var youTubeDescId = $(media).data('youtube-desc-id'); + if ( youTubeDescId !== undefined && youTubeDescId !== "") { + this.youTubeDescId = this.getYouTubeId(youTubeDescId); } - if ($(media).data('youtube-nocookie') !== undefined && $(media).data('youtube-nocookie')) { - this.youTubeNoCookie = true; - } - else { - this.youTubeNoCookie = false; + var youTubeSignId = $(media).data('youtube-sign-src'); + if ( youTubeSignId !== undefined && youTubeSignId !== "") { + this.youTubeSignId = this.getYouTubeId(youTubeSignId); } + var youTubeNoCookie = $(media).data('youtube-nocookie'); + this.youTubeNoCookie = (youTubeNoCookie !== undefined && youTubeNoCookie) ? true : false; + // Vimeo - if ($(media).data('vimeo-id') !== undefined && $(media).data('vimeo-id') !== "") { - this.vimeoId = this.getVimeoId($(media).data('vimeo-id')); + var vimeoId = $(media).data('vimeo-id'); + if ( vimeoId !== undefined && vimeoId !== "") { + this.vimeoId = this.getVimeoId(vimeoId); + if ( ! this.hasPoster ) { + let poster = thisObj.getVimeoPosterUrl(this.vimeoId,'1200'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('vimeo-desc-id') !== undefined && $(media).data('vimeo-desc-id') !== "") { - this.vimeoDescId = this.getVimeoId($(media).data('vimeo-desc-id')); + var vimeoDescId = $(media).data('vimeo-desc-id'); + if ( vimeoDescId !== undefined && vimeoDescId !== "") { + this.vimeoDescId = this.getVimeoId(vimeoDescId); } // Skin // valid values of data-skin are: - // 'legacy' (default), two rows of controls; seekbar positioned in available space within top row - // '2020', all buttons in one row beneath a full-width seekbar - if ($(media).data('skin') == '2020') { - this.skin = '2020'; - } - else { - this.skin = 'legacy'; - } + // '2020' (default as of 4.6), all buttons in one row beneath a full-width seekbar + // 'legacy', two rows of controls; seekbar positioned in available space within top row + this.skin = ($(media).data('skin') == 'legacy') ? 'legacy' : '2020'; - // Size - // width of Able Player is determined using the following order of precedence: - // 1. data-width attribute + // Size + // width of Able Player is determined using the following order of precedence: + // 1. data-width attribute // 2. width attribute (for video or audio, although it is not valid HTML for audio) // 3. Intrinsic size from video (video only, determined later) if ($(media).data('width') !== undefined) { this.playerWidth = parseInt($(media).data('width')); - } - else if ($(media)[0].getAttribute('width')) { - // NOTE: jQuery attr() returns null for all invalid HTML attributes + } else if ($(media)[0].getAttribute('width')) { + // NOTE: jQuery attr() returns null for all invalid HTML attributes // (e.g., width on <audio>) - // but it can be acessed via JavaScript getAttribute() + // but it can be acessed via JavaScript getAttribute() this.playerWidth = parseInt($(media)[0].getAttribute('width')); - } - else { - this.playerWidth = null; + } else { + this.playerWidth = null; } // Icon type @@ -418,21 +313,18 @@ var AblePlayerInstances = []; this.forceIconType = false; if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") { var iconType = $(media).data('icon-type'); - if (iconType === 'font' || iconType == 'image' || iconType == 'svg') { + if (iconType === 'font' || iconType === 'image' || iconType === 'svg') { this.iconType = iconType; this.forceIconType = true; } } - if ($(media).data('allow-fullscreen') !== undefined && $(media).data('allow-fullscreen') === false) { - this.allowFullscreen = false; - } - else { - this.allowFullscreen = true; - } - // Define other variables that are used in fullscreen program flow - this.clickedFullscreenButton = false; - this.restoringAfterFullscreen = false; + var allowFullScreen = $(media).data('allow-fullscreen'); + this.allowFullscreen = (allowFullScreen !== undefined && allowFullScreen === false) ? false : true; + + // Define other variables that are used in fullscreen program flow + this.clickedFullscreenButton = false; + this.restoringAfterFullscreen = false; // Seek interval // Number of seconds to seek forward or back with Rewind & Forward buttons @@ -451,35 +343,26 @@ var AblePlayerInstances = []; // Now Playing // Shows "Now Playing:" plus the title of the current track above player // Only used if there is a playlist - if ($(media).data('show-now-playing') !== undefined && $(media).data('show-now-playing') === false) { - this.showNowPlaying = false; - } - else { - this.showNowPlaying = true; - } + var showNowPlaying = $(media).data('show-now-playing'); + this.showNowPlaying = (showNowPlaying !== undefined && showNowPlaying === false) ? false : true; // TTML support (experimental); enabled for testing with data-use-ttml (Boolean) if ($(media).data('use-ttml') !== undefined) { this.useTtml = true; // The following may result in a console error. this.convert = require('xml-js'); - } - else { + } else { this.useTtml = false; } // Fallback // The data-test-fallback attribute can be used to test the fallback solution in any browser - if ($(media).data('test-fallback') !== undefined && $(media).data('test-fallback') !== false) { - if ($(media).data('test-fallback') == '2') { - this.testFallback = 2; // emulate browser that doesn't support HTML5 media - } - else { - this.testFallback = 1; // emulate failure to load Able Player - } - } - else { - this.testFallback = false; + var testFallback = $(media).data('test-fallback'); + if ( testFallback !== undefined && testFallback !== false) { + // 1: build error; 2: browser doesn't support media. + this.testFallback = ( testFallback == '2' ) ? 2 : 1; + } else { + this.testFallback = false; } // Language @@ -488,54 +371,39 @@ var AblePlayerInstances = []; // 2. Lang attribute on <html> or <body>, if a matching translation file is available // 3. English // Final calculation occurs in translation.js > getTranslationText() - if ($(media).data('lang') !== undefined && $(media).data('lang') !== "") { - this.lang = $(media).data('lang').toLowerCase(); - } - else { - this.lang = null; - } + var lang = $(media).data('lang'); + this.lang = ( lang !== undefined && lang !== "") ? lang.toLowerCase() : null; // Metadata Tracks - if ($(media).data('meta-type') !== undefined && $(media).data('meta-type') !== "") { - this.metaType = $(media).data('meta-type'); + var metaType = $(media).data('meta-type'); + if ( metaType !== undefined && metaType !== "") { + this.metaType = metaType; } - - if ($(media).data('meta-div') !== undefined && $(media).data('meta-div') !== "") { - this.metaDiv = $(media).data('meta-div'); + var metaDiv = $(media).data('meta-div'); + if ( metaDiv !== undefined && metaDiv !== "") { + this.metaDiv = metaDiv; } // Search // conducting a search requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { + var searchDiv = $(media).data('search-div'); + if ( searchDiv !== undefined && searchDiv !== "") { - this.searchDiv = $(media).data('search-div'); + this.searchDiv = searchDiv; // Search term (optional; could be assigned later in a JavaScript application) - if ($(media).data('search') !== undefined && $(media).data('search') !== "") { - this.searchString = $(media).data('search'); + var searchString = $(media).data('search'); + if ( searchString !== undefined && searchString !== "") { + this.searchString = searchString; } // Search Language - if ($(media).data('search-lang') !== undefined && $(media).data('search-lang') !== "") { - this.searchLang = $(media).data('search-lang'); - } - else { - this.searchLang = null; // will change to final value of this.lang in translation.js > getTranslationText() - } + var searchLang = $(media).data('search-lang'); + this.searchLang = ( searchLang !== undefined && searchLang !== "") ? searchLang : null; // Search option: Ignore capitalization in search terms - if ($(media).data('search-ignore-caps') !== undefined && $(media).data('search-ignore-caps') !== false) { - this.searchIgnoreCaps = true; - } - else { - this.searchIgnoreCaps = false; - } - - // conducting a search currently requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - this.searchString = $(media).data('search'); - this.searchDiv = $(media).data('search-div'); - } + var searchIgnoreCaps = $(media).data('search-ignore-caps'); + this.searchIgnoreCaps = ( searchIgnoreCaps !== undefined && searchIgnoreCaps !== false) ? true : false; } // Hide controls when video starts playing @@ -544,8 +412,7 @@ var AblePlayerInstances = []; if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) { this.hideControls = true; this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode - } - else { + } else { this.hideControls = false; this.hideControlsOriginal = false; } @@ -564,13 +431,11 @@ var AblePlayerInstances = []; this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoMode = false; this.stenoFrameId = null; this.$stenoFrame = null; @@ -580,9 +445,7 @@ var AblePlayerInstances = []; this.setDefaults(); //////////////////////////////////////// - // // End assignment of default variables - // //////////////////////////////////////// this.ableIndex = AblePlayer.nextIndex; @@ -594,21 +457,15 @@ var AblePlayerInstances = []; // use defer method to defer additional processing until text is retrieved this.tt = {}; var thisObj = this; - $.when(this.getTranslationText()).then( - function () { - if (thisObj.countProperties(thisObj.tt) > 50) { - // close enough to ensure that most text variables are populated - thisObj.setup(); - } - else { - // can't continue loading player with no text - thisObj.provideFallback(); - } + async function fetchTranslations(thisObj) { + try { + await thisObj.getTranslationText(); + thisObj.setup(); + } catch { + thisObj.provideFallback(); } - ). - fail(function() { - thisObj.provideFallback(); - }); + } + fetchTranslations(thisObj); }; // Index to increment every time new player is created. @@ -623,17 +480,15 @@ var AblePlayerInstances = []; if (!thisObj.player) { // No player for this media, show last-line fallback. thisObj.provideFallback(); - } - else { + } else { thisObj.setupInstance().then(function () { thisObj.setupInstancePlaylist(); if (thisObj.hasPlaylist) { // for playlists, recreatePlayer() is called from within cuePlaylistItem() - } - else { - thisObj.recreatePlayer().then(function() { + } else { + thisObj.recreatePlayer().then(function() { thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed + thisObj.playerCreated = true; // remains true until browser is refreshed }); } }); @@ -653,13 +508,10 @@ var AblePlayerInstances = []; }; AblePlayer.localGetElementById = function(element, id) { - if (element.getRootNode) - { + if (element.getRootNode) { // Use getRootNode() and querySelector() where supported (for shadow DOM support) return $(element.getRootNode().querySelector('#' + id)); - } - else - { + } else { // If getRootNode is not supported it should be safe to use document.getElementById (since there is no shadow DOM support) return $(document.getElementById(id)); } @@ -728,8 +580,7 @@ var AblePlayerInstances = []; $el = $('<div>', { 'class': 'able-controller' }).hide(); - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { $el = $('<div>', { 'class': 'able-window-toolbar' }).hide(); @@ -744,16 +595,11 @@ var AblePlayerInstances = []; blue = rgb[2]; luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue); // range is 1 - 255; therefore 125 is the tipping point - if (luminance < 125) { // background is dark - iconColor = 'white'; - } - else { // background is light - iconColor = 'black'; - } + iconColor = (luminance < 125) ? 'white' : 'black'; + if ($elements[i] === 'controller') { this.iconColor = iconColor; - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { this.toolbarIconColor = iconColor; } $el.remove(); @@ -766,20 +612,16 @@ var AblePlayerInstances = []; this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/'; this.playButtonImg = this.imgPath + 'play.png'; this.pauseButtonImg = this.imgPath + 'pause.png'; - this.restartButtonImg = this.imgPath + 'restart.png'; - this.rewindButtonImg = this.imgPath + 'rewind.png'; this.forwardButtonImg = this.imgPath + 'forward.png'; - this.previousButtonImg = this.imgPath + 'previous.png'; this.nextButtonImg = this.imgPath + 'next.png'; if (this.speedIcons === 'arrows') { this.fasterButtonImg = this.imgPath + 'slower.png'; this.slowerButtonImg = this.imgPath + 'faster.png'; - } - else if (this.speedIcons === 'animals') { + } else if (this.speedIcons === 'animals') { this.fasterButtonImg = this.imgPath + 'rabbit.png'; this.slowerButtonImg = this.imgPath + 'turtle.png'; } @@ -789,19 +631,19 @@ var AblePlayerInstances = []; this.signButtonImg = this.imgPath + 'sign.png'; this.transcriptButtonImg = this.imgPath + 'transcript.png'; this.descriptionsButtonImg = this.imgPath + 'descriptions.png'; - this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png'; this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png'; - this.prefsButtonImg = this.imgPath + 'preferences.png'; this.helpButtonImg = this.imgPath + 'help.png'; }; - AblePlayer.prototype.getSvgData = function(button) { + AblePlayer.prototype.getIconData = function(button) { // returns array of values for creating <svg> tag for specified button // 0 = <svg> viewBox attribute // 1 = <path> d (description) attribute + // 2 = icon class for font icons + // 3 = img URL for images. var svg = Array(); switch (button) { @@ -809,142 +651,184 @@ var AblePlayerInstances = []; case 'play': svg[0] = '0 0 16 20'; svg[1] = 'M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z'; + svg[2] = 'icon-play'; + svg[3] = this.playButtonImg; break; case 'pause': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'stop': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-pause'; + svg[3] = this.pauseButtonImg; break; case 'restart': svg[0] = '0 0 20 20'; svg[1] = 'M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z'; + svg[2] = 'icon-restart'; + svg[3] = this.restartButtonImg; break; case 'rewind': svg[0] = '0 0 20 20'; svg[1] = 'M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z'; + svg[2] = 'icon-rewind'; + svg[3] = this.rewindButtonImg; break; case 'forward': svg[0] = '0 0 20 20'; svg[1] = 'M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z'; + svg[2] = 'icon-forward'; + svg[3] = this.forwardButtonImg; break; case 'previous': svg[0] = '0 0 20 20'; svg[1] = 'M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z'; + svg[2] = 'icon-previous'; + svg[3] = this.previousButtonImg; break; case 'next': svg[0] = '0 0 20 20'; svg[1] = 'M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z'; + svg[2] = 'icon-next'; + svg[3] = this.nextButtonImg; break; case 'slower': - svg[0] = '0 0 20 20'; + svg[0] = '0 0 11 20'; svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z'; + svg[2] = 'icon-slower'; + svg[3] = this.slowerButtonImg; break; case 'faster': svg[0] = '0 0 11 20'; svg[1] = 'M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-faster'; + svg[3] = this.fasterButtonImg; break; case 'turtle': svg[0] = '0 0 20 20'; svg[1] = 'M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z'; + svg[2] = 'icon-turtle'; + svg[3] = this.slowerButtonImg; break; case 'rabbit': svg[0] = '0 0 20 20'; svg[1] = 'M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z'; + svg[2] = 'icon-rabbit'; + svg[3] = this.fasterButtonImg; break; case 'ellipsis': svg[0] = '0 0 20 20'; svg[1] = 'M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z'; + svg[2] = 'icon-ellipsis'; + svg[3] = false; break; case 'pipe': svg[0] = '0 0 20 20'; svg[1] = 'M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z'; + svg[2] = 'icon-pipe'; + svg[3] = false; break; case 'captions': svg[0] = '0 0 20 20'; svg[1] = 'M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z'; + svg[2] = 'icon-captions'; + svg[3] = this.captionsButtonImg; break; case 'descriptions': svg[0] = '0 0 20 20'; svg[1] = 'M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z'; + svg[2] = 'icon-descriptions'; + svg[3] = this.descriptionsButtonImg; break; case 'sign': svg[0] = '0 0 20 20'; svg[1] = 'M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z'; + svg[2] = 'icon-sign'; + svg[3] = this.signButtonImg; break; case 'mute': case 'volume-mute': svg[0] = '0 0 20 20'; svg[1] = 'M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z'; + svg[2] = 'icon-volume-mute'; + svg[3] = this.imgPath + 'volume-mute.png'; break; case 'volume-soft': svg[0] = '0 0 20 20'; svg[1] = 'M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-soft'; + svg[3] = this.imgPath + 'volume-soft.png'; break; case 'volume-medium': svg[0] = '0 0 20 20'; svg[1] = 'M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-medium'; + svg[3] = this.imgPath + 'volume-medium.png'; break; case 'volume-loud': svg[0] = '0 0 21 20'; svg[1] = 'M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-loud'; + svg[3] = this.imgPath + 'volume-loud.png'; break; case 'chapters': svg[0] = '0 0 20 20'; svg[1] = 'M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z'; + svg[2] = 'icon-chapters'; + svg[3] = this.chaptersButtonImg; break; case 'transcript': svg[0] = '0 0 20 20'; svg[1] = 'M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z'; + svg[2] = 'icon-transcript'; + svg[3] = this.transcriptButtonImg; break; case 'preferences': svg[0] = '0 0 20 20'; svg[1] = 'M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z'; + svg[2] = 'icon-preferences'; + svg[3] = this.prefsButtonImg; break; case 'close': svg[0] = '0 0 16 20'; svg[1] = 'M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z'; + svg[2] = 'icon-close'; + svg[3] = null; break; case 'fullscreen-expand': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z'; + svg[2] = 'icon-fullscreen-expand'; + svg[3] = this.fullscreenExpandButtonImg; break; case 'fullscreen-collapse': svg[0] = '0 0 20 20'; svg[1] = 'M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'help': - svg[0] = '0 0 11 20'; - svg[1] = 'M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z'; + svg[2] = 'icon-fullscreen-collapse'; + svg[3] = this.fullscreenCollapseButtonImg; break; } @@ -952,26 +836,20 @@ var AblePlayerInstances = []; }; // Initialize player based on data on page. - // This sets some variables, but does not modify anything. Safe to call multiple times. + // This sets some variables, but does not modify anything. Safe to call multiple times. // Can call again after updating this.media so long as new media element has the same ID. AblePlayer.prototype.reinitialize = function () { - var deferred, promise, thisObj, errorMsg, srcFile; + var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - // if F12 Developer Tools aren't open in IE (through 9, no longer a problen in IE10) - // console.log causes an error - can't use debug without a console to log messages to - if (! window.console) { - this.debug = false; - } - this.startedPlaying = false; - // TODO: Move this setting to cookie. + // TODO: Move this setting to preferences. this.autoScrollTranscript = true; - //this.autoScrollTranscript = this.getCookie(autoScrollTranscript); // (doesn't work) + //this.autoScrollTranscript = this.getPref(autoScrollTranscript); // (doesn't work) // Bootstrap from this.media possibly being an ID or other selector. this.$media = $(this.media).first(); @@ -980,14 +858,12 @@ var AblePlayerInstances = []; // Set media type to 'audio' or 'video'; this determines some of the behavior of player creation. if (this.$media.is('audio')) { this.mediaType = 'audio'; - } - else if (this.$media.is('video')) { + } else if (this.$media.is('video')) { this.mediaType = 'video'; - } - else { + } else { // Able Player was initialized with some element other than <video> or <audio> this.provideFallback(); - deferred.fail(); + deferred.reject(); return promise; } @@ -1006,107 +882,36 @@ var AblePlayerInstances = []; AblePlayer.prototype.setPlayerSize = function(width, height) { - var mediaId = this.$media.attr('id'); - - // Called again after width and height are known - - if (this.mediaType === 'audio') { - if (this.playerWidth) { - this.$ableWrapper.css('width',this.playerWidth + 'px'); - } - } - else if (width > 0 && height > 0) { - this.playerWidth = width; - this.playerHeight = height; - this.aspectRatio = height / width; + // Called again after width and height are known + if (this.mediaType !== 'audio' && width > 0 && height > 0) { + this.playerWidth = width; + this.playerHeight = height; + this.aspectRatio = height / width; } }; AblePlayer.prototype.setIconType = function() { - // returns either "svg", "font" or "image" (in descending order of preference) - // Test for support of each type. If not supported, test the next type. - // last resort is image icons - - var $tempButton, $testButton, controllerFont; - + // Tests for SVG and font support removed in version 4.7.0. + // Browser support for these is no longer a risk; they are widely supported in all browsers. + // This now only returns 'svg' or 'false' if iconType is forced. if (this.forceIconType) { // use value specified in data-icon-type return false; } - // test for SVG support - // Test this method widely; failed as expected on IE8 and below - // https://stackoverflow.com/a/27568129/744281 - if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) { - // browser supports SVG - this.iconType = 'svg'; - } - else { - // browser does NOT support SVG - // test whether browser can support icon fonts, and whether user has overriding the default style sheet - // which could cause problems with proper display of the icon fonts - if (window.getComputedStyle) { - - // webkit doesn't return calculated styles unless element has been added to the DOM - // and is visible (note: visibly clipped is considered "visible") - // use playpauseButton for font-family test if it exists; otherwise must create a new temp button - if ($('span.icon-play').length) { - $testButton = $('span.icon-play'); - } - else { - $tempButton = $('<span>',{ - 'class': 'icon-play able-clipped' - }); - $('body').append($tempButton); - $testButton = $tempButton; - } - - // the following retrieves the computed value of font-family - // tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works! - // tested in Chrome 49.x with Font Changer plugin - works! - // tested in IE with user-defined style sheet enables - works! - // It does NOT account for users who have "ignore font styles on web pages" checked in IE - // There is no known way to check for that ??? - controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family'); - if (typeof controllerFont !== 'undefined') { - if (controllerFont.indexOf('able') !== -1) { - this.iconType = 'font'; - } - else { - this.iconType = 'image'; - } - } - else { - // couldn't get computed font-family; use images to be safe - this.iconType = 'image'; - } - } - else { - // window.getComputedStyle is not supported (IE 8 and earlier) - // No known way to detect computed font - // The following retrieves the value from the style sheet, not the computed font - // controllerFont = $tempButton.get(0).currentStyle.fontFamily; - // It will therefore return "able", even if the user is overriding that with a custom style sheet - // To be safe, use images - this.iconType = 'image'; - } - if (typeof $tempButton !== 'undefined') { - $tempButton.remove(); - } - } + this.iconType = 'svg'; }; // Perform one-time setup for this instance of player; called after player is first initialized. AblePlayer.prototype.setupInstance = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); if (this.$media.attr('id')) { this.mediaId = this.$media.attr('id'); - } - else { + } else { // Ensure the base media element always has an ID. this.mediaId = "ableMediaId_" + this.ableIndex; this.$media.attr('id', this.mediaId); @@ -1134,7 +939,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from YouTube var $youTubeVideos = $(this).find('li[data-youtube-id]'); $youTubeVideos.each(function() { - var youTubeId = $(this).attr('data-youtube-id'); + var youTubeId = DOMPurify.sanitize( $(this).attr('data-youtube-id') ); var youTubePoster = thisObj.getYouTubePosterUrl(youTubeId,'120'); var $youTubeImg = $('<img>',{ 'src': youTubePoster, @@ -1147,7 +952,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from Vimeo var $vimeoVideos = $(this).find('li[data-vimeo-id]'); $vimeoVideos.each(function() { - var vimeoId = $(this).attr('data-youtube-id'); + var vimeoId = $(this).attr('data-vimeo-id'); var vimeoPoster = thisObj.getVimeoPosterUrl(vimeoId,'120'); var $vimeoImg = $('<img>',{ 'src': vimeoPoster, @@ -1160,13 +965,8 @@ var AblePlayerInstances = []; $(this).find('li span').attr('aria-hidden','true'); thisObj.playlistIndex = 0; var dataEmbedded = $(this).data('embedded'); - if (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) { - // embed playlist within player - thisObj.playlistEmbed = true; - } - else { - thisObj.playlistEmbed = false; - } + // is playlist embedded within player? + thisObj.playlistEmbed = (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) ? true : false; } }); @@ -1193,12 +993,12 @@ var AblePlayerInstances = []; AblePlayer.prototype.recreatePlayer = function () { // Creates the appropriate player for the current source. - // This function is called each time a new media instance is loaded - // e.g., - // User clicks on an item in a playlist - // User swaps to/from described version of video - // Blocks of code that only need to be executed once are controlled - // by this.playerCreated + // This function is called each time a new media instance is loaded + // e.g., + // User clicks on an item in a playlist + // User swaps to/from described version of video + // Blocks of code that only need to be executed once are controlled + // by this.playerCreated // TODO: Ensure when recreating player that we carry over the mediaId if (!this.player) { @@ -1208,38 +1008,37 @@ var AblePlayerInstances = []; var deferred, promise, thisObj, prefsGroups, i; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - this.playerDeleted = false; // reset after deletePlayer() + this.playerDeleted = false; // reset after deletePlayer() // set temp stopgap to prevent this function from executing again before finished - this.recreatingPlayer = true; + this.recreatingPlayer = true; if (!this.playerCreated) { // only call these functions once this.loadCurrentPreferences(); this.injectPlayerCode(); - this.resizePlayer(this.media.videoWidth,this.media.videoHeight); + this.resizePlayer(this.media.videoWidth,this.media.videoHeight); } - this.getSampleDescriptionText(); + this.getSampleDescriptionText(); this.initSignLanguage(); this.initPlayer().then(function() { - thisObj.getTracks().then(function() { + thisObj.getTracks().then(function() { thisObj.initDescription().then(function() { thisObj.setupTracks().then(function() { - if (thisObj.hasClosedDesc) { - if (!thisObj.$descDiv || - (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { - // descDiv either doesn't exist, or exists in an orphaned state - // Either way, it needs to be rebuilt... + if (thisObj.hasClosedDesc) { + if (!thisObj.$descDiv || (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { + // descDiv either doesn't exist, or exists in an orphaned state + // Either way, it needs to be rebuilt... thisObj.injectTextDescriptionArea(); } } @@ -1256,7 +1055,6 @@ var AblePlayerInstances = []; thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - thisObj.setFullscreen(false); if (typeof thisObj.volume === 'undefined') { thisObj.volume = thisObj.defaultVolume; @@ -1289,37 +1087,35 @@ var AblePlayerInstances = []; thisObj.setupPopups(); thisObj.updateCaption(); thisObj.injectVTS(); - if (thisObj.chaptersDivLocation) { - thisObj.populateChaptersDiv(); - } + thisObj.populateChaptersDiv(); thisObj.showSearchResults(); // Go ahead and load media, without user requesting it // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth // However, the media needs to load for us to get the media's duration if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.$media[0].load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } } // refreshControls is called twice building/initializing the player // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete setTimeout(function() { - thisObj.refreshControls('init'); - deferred.resolve(); - },100); - }); - }); + thisObj.refreshControls(); + deferred.resolve(); + },100); + }); + }); }); }); - }); + }); }); }, function() { // initPlayer fail thisObj.provideFallback(); }); - return promise; + return promise; }; AblePlayer.prototype.initPlayer = function () { @@ -1329,33 +1125,28 @@ var AblePlayerInstances = []; // First run player specific initialization. if (this.player === 'html5') { playerPromise = this.initHtml5Player(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { playerPromise = this.initYouTubePlayer(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { playerPromise = this.initVimeoPlayer(); } // After player specific initialization is done, run remaining general initialization. - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - playerPromise.done( + playerPromise.then( function () { // done/resolved if (thisObj.useFixedSeekInterval) { + // if fixed seekInterval was not already assigned (using value of data-seek-interval) if (!thisObj.seekInterval) { thisObj.seekInterval = thisObj.defaultSeekInterval; } - else { - // fixed seekInterval was already assigned, using value of data-seek-interval attribute - } thisObj.seekIntervalCalculated = true; - } - else { + } else { thisObj.setSeekInterval(); } deferred.resolve(); } - ).fail(function () { // failed + ).finally(function () { // failed deferred.reject(); } ); @@ -1365,10 +1156,8 @@ var AblePlayerInstances = []; AblePlayer.prototype.initStenoFrame = function() { - var thisObj, deferred, promise, $iframe; - thisObj = this; - - deferred = new $.Deferred(); + var deferred, promise; + deferred = new this.defer(); promise = deferred.promise(); if (this.stenoMode && this.$stenoFrame) { @@ -1376,15 +1165,13 @@ var AblePlayerInstances = []; if (this.$stenoFrame[0].contentWindow,document.readyState == 'complete') { // iframe has already loaded deferred.resolve(); - } - else { + } else { // iframe has not loaded. Wait for it. this.$stenoFrame.on('load',function() { deferred.resolve(); }); } - } - else { + } else { // there is no stenoFrame to initialize deferred.resolve(); } @@ -1399,33 +1186,24 @@ var AblePlayerInstances = []; var thisObj, duration; thisObj = this; this.seekInterval = this.defaultSeekInterval; - if (this.useChapterTimes) { - duration = this.chapterDuration; - } - else { - duration = this.duration; - } + duration = (this.useChapterTimes) ? this.chapterDuration : this.duration; + if (typeof duration === 'undefined' || duration < 1) { // no duration; just use default for now but keep trying until duration is available this.seekIntervalCalculated = false; return; - } - else { + } else { if (duration <= 20) { this.seekInterval = 5; // 4 steps max - } - else if (duration <= 30) { + } else if (duration <= 30) { this.seekInterval = 6; // 5 steps max - } - else if (duration <= 40) { + } else if (duration <= 40) { this.seekInterval = 8; // 5 steps max - } - else if (duration <= 100) { + } else if (duration <= 100) { this.seekInterval = 10; // 10 steps max - } - else { + } else { // never more than 10 steps from start to end - this.seekInterval = (duration / 10); + this.seekInterval = Math.round(duration / 10, 0); } this.seekIntervalCalculated = true; } @@ -1474,38 +1252,38 @@ var AblePlayerInstances = []; // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - - break; - default: - // some other error occurred - - break; - } - }); - } - else { - // disable Vimeo captions. - this.vimeoPlayer.disableTextTrack().then(function() { - // Vimeo captions disabled - }).catch(function(error) { - - }); - } + } + ).catch(function(error) { + switch (error.name) { + case 'InvalidTrackLanguageError': + // no track was available with the specified language + + break; + case 'InvalidTrackError': + // no track was available with the specified language and kind + + break; + default: + // some other error occurred + + break; + } + }); + } else { + // disable Vimeo captions. + this.vimeoPlayer.disableTextTrack().then(function() { + // Vimeo captions disabled + }).catch(function(error) { + + }); } + } } }; AblePlayer.prototype.initHtml5Player = function () { // Nothing special to do! - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); deferred.resolve(); return promise; @@ -1519,6 +1297,7 @@ var AblePlayerInstances = []; // Keep native player from displaying captions/subtitles by setting textTrack.mode='disabled' // https://dev.w3.org/html5/spec-author-view/video.html#text-track-mode // This should work but historically hasn't been supported in all browsers + // As of July 2025, 96% supported per https://caniuse.com/?search=text-track-mode. // Workaround for non-supporting browsers is to remove default attribute // We're doing that too in track.js > setupCaptions() var textTracks = this.$media.get(0).textTracks; @@ -1535,146 +1314,125 @@ var AblePlayerInstances = []; // Determine which player to use, if any // return 'html5', 'youtube', 'vimeo', or null - - var i, sourceType, $newItem; - if (this.testFallback) { - return null; - } - else if (this.youTubeId) { - if (this.mediaType !== 'video') { - // attempting to play a YouTube video using an element other than <video> - return null; - } - else { - return 'youtube'; - } - } - else if (this.vimeoId) { - if (this.mediaType !== 'video') { - // attempting to play a Vimeo video using an element other than <video> - return null; - } - else { - return 'vimeo'; - } - - } - else if (this.media.canPlayType) { + if (this.testFallback) { + return null; + } else if (this.youTubeId) { + // null if attempting to play a YouTube video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'youtube'; + } else if (this.vimeoId) { + // null if attempting to play a Vimeo video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'vimeo'; + } else if (this.media.canPlayType) { return 'html5'; - } - else { + } else { // Browser does not support the available media file return null; } }; - })(jQuery); (function ($) { - AblePlayer.prototype.setCookie = function(cookieValue) { - - Cookies.set('Able-Player', JSON.stringify(cookieValue), { - expires: 90, - sameSite: 'strict' - }); + AblePlayer.prototype.setPrefs = function(preferences) { + if ( typeof Cookies !== 'undefined' ) { + Cookies.set('Able-Player', JSON.stringify(preferences), { + expires: 90, + sameSite: 'strict' + }); + } else { + localStorage.setItem( 'Able-Player', JSON.stringify( preferences ) ); + } }; - AblePlayer.prototype.getCookie = function() { + AblePlayer.prototype.getPref = function() { - var defaultCookie = { + var defaultPrefs = { preferences: {}, sign: {}, transcript: {}, voices: [] }; - var cookie; + var preferences; try { - cookie = JSON.parse(Cookies.get('Able-Player')); + if ( typeof Cookies !== 'undefined' ) { + preferences = JSON.parse( Cookies.get('Able-Player') ); + } else { + preferences = JSON.parse( localStorage.getItem('Able-Player') ); + } } catch (err) { - // Original cookie can't be parsed; update to default - this.setCookie(defaultCookie); - cookie = defaultCookie; - } - if (cookie) { - return cookie; - } - else { - return defaultCookie; + // Original preferences can't be parsed; update to default + this.setPrefs( defaultPrefs ); + preferences = defaultPrefs; } + return (preferences) ? preferences : defaultPrefs; }; - AblePlayer.prototype.updateCookie = function( setting ) { - - // called when a particular setting had been updated - // useful for settings updated indepedently of Preferences dialog + AblePlayer.prototype.updatePreferences = function( setting ) { + // useful for settings updated independently of Preferences dialog // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle() // setting is any supported preference name (e.g., "prefCaptions") // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows) - var cookie, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; - cookie = this.getCookie(); + var preferences, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; + preferences = this.getPref(); if (setting === 'transcript' || setting === 'sign') { if (setting === 'transcript') { $window = this.$transcriptArea; windowPos = $window.position(); - if (typeof cookie.transcript === 'undefined') { - cookie.transcript = {}; - } - cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.transcript['zindex'] = $window.css('z-index'); - cookie.transcript['top'] = windowPos.top; - cookie.transcript['left'] = windowPos.left; - cookie.transcript['width'] = $window.width(); - cookie.transcript['height'] = $window.height(); - } - else if (setting === 'sign') { + if (typeof preferences.transcript === 'undefined') { + preferences.transcript = {}; + } + preferences.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.transcript['zindex'] = $window.css('z-index'); + preferences.transcript['top'] = windowPos.top; + preferences.transcript['left'] = windowPos.left; + preferences.transcript['width'] = $window.width(); + preferences.transcript['height'] = $window.height(); + } else if (setting === 'sign') { $window = this.$signWindow; windowPos = $window.position(); - if (typeof cookie.sign === 'undefined') { - cookie.sign = {}; - } - cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.sign['zindex'] = $window.css('z-index'); - cookie.sign['top'] = windowPos.top; - cookie.sign['left'] = windowPos.left; - cookie.sign['width'] = $window.width(); - cookie.sign['height'] = $window.height(); - } - } - else if (setting === 'voice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; - } - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; - } - } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (typeof preferences.sign === 'undefined') { + preferences.sign = {}; + } + preferences.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.sign['zindex'] = $window.css('z-index'); + preferences.sign['top'] = windowPos.top; + preferences.sign['left'] = windowPos.left; + preferences.sign['width'] = $window.width(); + preferences.sign['height'] = $window.height(); + } + } else if (setting === 'voice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; + } + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; + } + } + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - } - else { + preferences.voices.push(newVoice); + } + } else { available = this.getAvailablePreferences(); - // Rebuild cookie with current cookie values, + // Rebuild preferences with current preferences values, // replacing the one value that's been changed for (i = 0; i < available.length; i++) { prefName = available[i]['name']; if (prefName == setting) { // this is the one that requires an update - cookie.preferences[prefName] = this[prefName]; + preferences.preferences[prefName] = this[prefName]; } } } - // Save updated cookie - this.setCookie(cookie); + // Save updated preferences + this.setPrefs(preferences); }; AblePlayer.prototype.getPreferencesGroups = function() { @@ -1683,17 +1441,15 @@ var AblePlayerInstances = []; // in the Preferences popup menu // Human-readable label for each group is defined in translation table if (this.usingYouTubeCaptions) { - // no transcript is possible - return ['captions','descriptions','keyboard']; - } - else if (this.usingVimeoCaptions) { + // no transcript is possible + return ['captions','descriptions','keyboard']; + } else if (this.usingVimeoCaptions) { // users cannot control caption appearance // and no transcript is possible - return ['descriptions','keyboard']; + return ['descriptions','keyboard']; + } else { + return ['captions','descriptions','keyboard','transcript']; } - else { - return ['captions','descriptions','keyboard','transcript']; - } } AblePlayer.prototype.getAvailablePreferences = function() { @@ -1705,19 +1461,25 @@ var AblePlayerInstances = []; // Modifier keys preferences prefs.push({ 'name': 'prefAltKey', // use alt key with shortcuts - 'label': this.tt.prefAltKey, + 'label': this.translate( 'prefAltKey', 'Alt' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefCtrlKey', // use ctrl key with shortcuts - 'label': this.tt.prefCtrlKey, + 'label': this.translate( 'prefCtrlKey', 'Control' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefShiftKey', - 'label': this.tt.prefShiftKey, + 'label': this.translate( 'prefShiftKey', 'Shift' ), + 'group': 'keyboard', + 'default': 0 + }); + prefs.push({ + 'name': 'prefNoKeyShortcuts', + 'label': this.translate( 'prefNoKeyShortcuts', 'Disable Keyboard Shortcuts' ), 'group': 'keyboard', 'default': 0 }); @@ -1731,7 +1493,7 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefHighlight', // highlight transcript as media plays - 'label': this.tt.prefHighlight, + 'label': this.translate( 'prefHighlight', 'Highlight transcript as media plays' ), 'group': 'transcript', 'default': 1 // on because many users can benefit }); @@ -1743,13 +1505,12 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefTabbable', // tab-enable transcript - 'label': this.tt.prefTabbable, + 'label': this.translate( 'prefTabbable', 'Keyboard-enable transcript' ), 'group': 'transcript', 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page }); // Caption preferences - prefs.push({ 'name': 'prefCaptions', // closed captions default state 'label': null, @@ -1762,23 +1523,23 @@ var AblePlayerInstances = []; /* // not supported yet prefs.push({ 'name': 'prefCaptionsStyle', - 'label': this.tt.prefCaptionsStyle, + 'label': this.translate( 'prefCaptionsStyle', 'Style' ), 'group': 'captions', - 'default': this.tt.captionsStylePopOn + 'default': this.translate( 'captionsStylePopOn', 'Pop-on' ) }); / - // captions are always positioned above the player for audio + // captions are always positioned above the player for audio if (this.mediaType === 'video') { prefs.push({ 'name': 'prefCaptionsPosition', - 'label': this.tt.prefCaptionsPosition, + 'label': this.translate( 'prefCaptionsPosition', 'Position' ), 'group': 'captions', 'default': this.defaultCaptionsPosition }); - } + } prefs.push({ 'name': 'prefCaptionsFont', - 'label': this.tt.prefCaptionsFont, + 'label': this.translate( 'prefCaptionsFont', 'Font' ), 'group': 'captions', 'default': 'sans-serif' }); @@ -1786,7 +1547,7 @@ var AblePlayerInstances = []; // This is the one option that is supported by YouTube IFrame API prefs.push({ 'name': 'prefCaptionsSize', - 'label': this.tt.prefCaptionsSize, + 'label': this.translate( 'prefCaptionsSize', 'Font size' ), 'group': 'captions', 'default': '100%' }); @@ -1795,25 +1556,25 @@ var AblePlayerInstances = []; prefs.push({ 'name': 'prefCaptionsColor', - 'label': this.tt.prefCaptionsColor, + 'label': this.translate( 'prefCaptionsColor', 'Text Color' ), 'group': 'captions', 'default': 'white' }); prefs.push({ 'name': 'prefCaptionsBGColor', - 'label': this.tt.prefCaptionsBGColor, + 'label': this.translate( 'prefCaptionsBGColor', 'Background' ), 'group': 'captions', 'default': 'black' }); prefs.push({ 'name': 'prefCaptionsOpacity', - 'label': this.tt.prefCaptionsOpacity, + 'label': this.translate( 'prefCaptionsOpacity', 'Opacity' ), 'group': 'captions', 'default': '100%' }); } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { // Description preferences prefs.push({ 'name': 'prefDesc', // audio description default state @@ -1829,37 +1590,40 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefDescVoice', - 'label': this.tt.prefDescVoice, + 'label': this.translate( 'prefDescVoice', 'Voice' ), 'group': 'descriptions', 'default': null // will be set later, in injectPrefsForm() }); prefs.push({ 'name': 'prefDescPitch', - 'label': this.tt.prefDescPitch, + 'label': this.translate( 'prefDescPitch', 'Pitch' ), 'group': 'descriptions', 'default': 1 // 0 to 2 }); prefs.push({ 'name': 'prefDescRate', - 'label': this.tt.prefDescRate, + 'label': this.translate( 'prefDescRate', 'Rate' ), 'group': 'descriptions', 'default': 1 // 0.1 to 10 (1 is normal speech; 2 is fast but decipherable; >2 is super fast) }); prefs.push({ 'name': 'prefDescVolume', - 'label': this.tt.volume, + 'label': this.translate( 'volume', 'Volume' ), 'group': 'descriptions', 'default': 1 // 0 to 1 }); - prefs.push({ - 'name': 'prefDescPause', // automatically pause when closed description starts - 'label': this.tt.prefDescPause, - 'group': 'descriptions', - 'default': this.defaultDescPause - }); + // Don't enable pause option if video described files in use. + if ( this.descMethod !== 'video' ) { + prefs.push({ + 'name': 'prefDescPause', // automatically pause when closed description starts + 'label': this.translate( 'prefDescPause', 'Automatically pause video when description starts' ), + 'group': 'descriptions', + 'default': this.defaultDescPause + }); + } prefs.push({ 'name': 'prefDescVisible', // visibly show closed description (if avilable and used) - 'label': this.tt.prefDescVisible, + 'label': this.translate( 'prefDescVisible', 'Make description visible' ), 'group': 'descriptions', 'default': 0 // off as of 4.3.16, to avoid overloading the player with visible features }); @@ -1877,29 +1641,28 @@ var AblePlayerInstances = []; AblePlayer.prototype.loadCurrentPreferences = function () { - // Load current/default preferences from cookie into the AblePlayer object. + // Load current/default preferences into the AblePlayer object. var available = this.getAvailablePreferences(); - var cookie = this.getCookie(); - // Copy current cookie values into this object, and fill in any default values. + var preferences = this.getPref(); + // Copy current preferences values into this object, and fill in any default values. for (var ii = 0; ii < available.length; ii++) { var prefName = available[ii]['name']; var defaultValue = available[ii]['default']; - if (cookie.preferences[prefName] !== undefined) { - this[prefName] = cookie.preferences[prefName]; - } - else { - cookie.preferences[prefName] = defaultValue; + if (preferences.preferences[prefName] !== undefined) { + this[prefName] = preferences.preferences[prefName]; + } else { + preferences.preferences[prefName] = defaultValue; this[prefName] = defaultValue; } } - // Also load array of preferred voices from cookie - if (typeof cookie.voices !== 'undefined') { - this.prefVoices = cookie.voices; - } + // Also load array of preferred voices from preferences + if (typeof preferences.voices !== 'undefined') { + this.prefVoices = preferences.voices; + } - this.setCookie(cookie); + this.setPrefs(preferences); }; AblePlayer.prototype.injectPrefsForm = function (form) { @@ -1907,19 +1670,12 @@ var AblePlayerInstances = []; // Creates a preferences form and injects it. // form is one of the supported forms (groups) defined in getPreferencesGroups() - var thisObj, available, descLangs, - $prefsDiv, formTitle, introText, - $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, - $fieldset, fieldsetClass, fieldsetId, - $descFieldset, $descLegend, $legend, legendId, - thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField, - $div1,id1,$radio1,$label1, - $div2,id2,$radio2,$label2, - options,$thisOption,optionValue,optionLang,optionText,sampleCapsDiv, - changedPref,changedSpan,changedText, - currentDescState, prefDescVoice, - $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem, - dialog,saveButton,cancelButton; + var thisObj, available, + $prefsDiv, formTitle, introText, $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, + $fieldset, fieldsetClass, fieldsetId, $legend, legendId, thisPref, $thisDiv, thisClass, + thisId, $thisLabel, $thisField, options,$thisOption,optionValue,optionLang,optionText, + changedPref,changedSpan,changedText, currentDescState, prefDescVoice, $kbHeading,$kbList, + kbLabels,keys,kbListText,$kbListItem, dialog,$saveButton,$cancelButton,$buttonContainer; thisObj = this; available = this.getAvailablePreferences(); @@ -1931,83 +1687,74 @@ var AblePlayerInstances = []; var customClass = 'able-prefs-form-' + form; $prefsDiv.addClass(customClass); - // add titles and intros - if (form == 'captions') { - formTitle = this.tt.prefTitleCaptions; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage - } - else if (form == 'descriptions') { - formTitle = this.tt.prefTitleDescriptions; + // add titles and intros + if (form == 'captions') { + formTitle = this.translate( 'prefTitleCaptions', 'Captions Preferences' ); + } else if (form == 'descriptions') { + formTitle = this.translate( 'prefTitleDescriptions', 'Audio Description Preferences' ); var $prefsIntro = $('<p>',{ - text: this.tt.prefIntroDescription1 + text: this.translate( 'prefIntroDescription1', 'This media player supports audio description in two ways: ' ) }); var $prefsIntroUL = $('<ul>'); var $prefsIntroLI1 = $('<li>',{ - text: this.tt.prefDescFormatOption1 + text: this.translate( 'prefDescFormatOption1', 'alternative described version of video' ) }); var $prefsIntroLI2 = $('<li>',{ - text: this.tt.prefDescFormatOption2 + text: this.translate( 'prefDescFormatOption2', 'text-based description, announced by screen reader' ) }); $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2); if (this.hasOpenDesc && this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2 + ' '; - currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>'; - currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else if (this.hasOpenDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.'; - } - else if (this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else { - currentDescState = this.tt.prefIntroDescriptionNone; + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ) + ' '; + currentDescState += '<strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>'; + currentDescState += ' <em>' + this.translate( 'and', 'and' ) + '</em> <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else if (this.hasOpenDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>.'; + } else if (this.hasClosedDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else { + currentDescState = this.translate( 'prefIntroDescriptionNone', 'The current video has no audio description in either format.' ); } $prefsIntroP2 = $('<p>',{ html: currentDescState }); - p3Text = this.tt.prefIntroDescription3; + p3Text = this.translate( 'prefIntroDescription3', 'Use the following form to set your preferences related to text-based audio description.' ); if (this.hasOpenDesc || this.hasClosedDesc) { - p3Text += ' ' + this.tt.prefIntroDescription4; + p3Text += ' ' + this.translate( 'prefIntroDescription4', 'After you save your settings, audio description can be toggled on/off using the Description button.' ); } $prefsIntroP3 = $('<p>',{ text: p3Text }); - $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3); - } - else if (form == 'keyboard') { - formTitle = this.tt.prefTitleKeyboard; - introText = this.tt.prefIntroKeyboard1; - introText += ' ' + this.tt.prefIntroKeyboard2; - introText += ' ' + this.tt.prefIntroKeyboard3; + $prefsDiv.append( $prefsIntro, $prefsIntroUL, $prefsIntroP2, $prefsIntroP3 ); + } else if (form == 'keyboard') { + formTitle = this.translate( 'prefTitleKeyboard', 'Keyboard Preferences' ); + introText = this.translate( 'prefIntroKeyboard1', 'The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list).' ); + introText += ' ' + this.translate( 'prefIntroKeyboard2', 'Modifier keys (Shift, Alt, and Control) can be assigned below.' ); + introText += ' ' + this.translate( 'prefIntroKeyboard3', 'NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you.' ); $prefsIntro = $('<p>',{ text: introText }); $prefsDiv.append($prefsIntro); - } - else if (form == 'transcript') { - formTitle = this.tt.prefTitleTranscript; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage + } else if (form == 'transcript') { + formTitle = this.translate( 'prefTitleTranscript', 'Transcript Preferences' ); } - $fieldset = $('<div>').attr('role','group'); + $fieldset = $('<div>').attr('role','group'); fieldsetClass = 'able-prefs-' + form; fieldsetId = this.mediaId + '-prefs-' + form; legendId = fieldsetId + '-legend'; $fieldset.addClass(fieldsetClass).attr('id',fieldsetId); if (form === 'keyboard') { - $legend = $('<h2>' + this.tt.prefHeadingKeyboard1 + '</h2>'); + $legend = $('<h2>' + this.translate( 'prefHeadingKeyboard1', 'Modifier keys used for shortcuts' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); - } - else if (form === 'descriptions') { - $legend = $('<h2>' + this.tt.prefHeadingTextDescription + '</h2>'); + } else if (form === 'descriptions') { + $legend = $('<h2>' + this.translate( 'prefHeadingTextDescription', 'Text-based audio description' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); @@ -2030,7 +1777,7 @@ var AblePlayerInstances = []; }); if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') { // add a change handler that updates the style of the sample caption text - $thisField.change(function() { + $thisField.on( 'change', function() { changedPref = $(this).attr('name'); thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref); }); @@ -2040,28 +1787,19 @@ var AblePlayerInstances = []; if (thisPref === 'prefCaptionsPosition') { optionValue = options[j]; if (optionValue === 'overlay') { - optionText = this.tt.captionsPositionOverlay; - } - else if (optionValue === 'below') { + optionText = this.translate( 'captionsPositionOverlay', 'Overlay' ); + } else if (optionValue === 'below') { optionValue = options[j]; - optionText = this.tt.captionsPositionBelow; + optionText = this.translate( 'captionsPositionBelow', 'Below video' ); } - } - else if (thisPref === 'prefCaptionsFont' || thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') { + } else if (thisPref === 'prefCaptionsFont' || thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') { optionValue = options[j][0]; optionText = options[j][1]; - } - else if (thisPref === 'prefCaptionsOpacity') { + } else if (thisPref === 'prefCaptionsOpacity') { optionValue = options[j]; optionText = options[j]; - if (optionValue === '0%') { - optionText += ' (' + this.tt.transparent + ')'; - } - else if (optionValue === '100%') { - optionText += ' (' + this.tt.solid + ')'; - } - } - else { + optionText += (optionValue === '0%') ? ' (' + this.translate( 'transparent', 'transparent' ) + ')' : ' (' + this.translate( 'solid', 'solid' ) + ')'; + } else { optionValue = options[j]; optionText = options[j]; } @@ -2075,8 +1813,7 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } $thisDiv.append($thisLabel,$thisField); - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); if (thisPref === 'prefDescPause' || thisPref === 'prefDescVisible') { // these preferences are checkboxes @@ -2092,19 +1829,18 @@ var AblePlayerInstances = []; $thisField.prop('checked',true); } $thisDiv.append($thisField,$thisLabel); - } - else if (this.synth) { + } else if (this.synth) { // Only show these options if browser supports speech synthesis $thisDiv.addClass('able-prefs-select'); $thisField = $('<select>',{ name: thisPref, id: thisId, }); - if (thisPref === 'prefDescVoice' && this.descVoices) { - prefDescVoice = this.getPrefDescVoice(); + if (thisPref === 'prefDescVoice' && this.descVoices.length) { + prefDescVoice = this.getPrefDescVoice(); for (j=0; j < this.descVoices.length; j++) { optionValue = this.descVoices[j].name; - optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); + optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); optionText = optionValue + ' (' + this.descVoices[j].lang + ')'; $thisOption = $('<option>',{ 'value': optionValue, @@ -2117,12 +1853,10 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } this.$voiceSelectField = $thisField; - } - else { + } else { if (thisPref == 'prefDescPitch') { // 0 to 2 options = [0,0.5,1,1.5,2]; - } - else if (thisPref == 'prefDescRate') { // 0.1 to 10 + } else if (thisPref == 'prefDescRate') { // 0.1 to 10 // Tests with a variety of voices on MacOS and Windows // yielded the following choices that seem reasonable for audio description: // 0.5 - too slow (exclude this) @@ -2140,8 +1874,7 @@ var AblePlayerInstances = []; // Note: if these values are modified, must also modfiy them // in makePrefsValueReadable() options = [0.7,0.8,0.9,1,1.1,1.2,1.5,2,2.5,3]; - } - else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 + } else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 options = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]; } if (typeof options !== 'undefined') { @@ -2166,8 +1899,7 @@ var AblePlayerInstances = []; }); $thisDiv.append($thisLabel,$thisField); } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); $thisField = $('<input>',{ type: 'checkbox', @@ -2186,26 +1918,35 @@ var AblePlayerInstances = []; if (changedPref === 'prefAltKey') { changedSpan = '.able-modkey-alt'; changedText = thisObj.tt.prefAltKey + ' + '; - } - else if (changedPref === 'prefCtrlKey') { + } else if (changedPref === 'prefCtrlKey') { changedSpan = '.able-modkey-ctrl'; changedText = thisObj.tt.prefCtrlKey + ' + '; - } - else if (changedPref === 'prefShiftKey') { + } else if (changedPref === 'prefShiftKey') { changedSpan = '.able-modkey-shift'; changedText = thisObj.tt.prefShiftKey + ' + '; } - if ($(this).is(':checked')) { - $(changedSpan).text(changedText); - } - else { - $(changedSpan).text(''); + if ( changedPref !== 'prefNoKeyShortcuts' ) { + if ($(this).is(':checked')) { + $(changedSpan).text(changedText); + } else { + $(changedSpan).text(''); + } + } else { + if ($(this).is(':checked')) { + $('.able-modkey-item').addClass('hidden'); + } else { + $('.able-modkey-item').removeClass('hidden'); + } } }); } $thisDiv.append($thisField,$thisLabel); } - $fieldset.append($thisDiv); + if (thisPref === 'prefDescVoice' && !this.descVoices.length) { + // No voices are available (e.g., in Safari 15.4 on Mac OS) + } else { + $fieldset.append($thisDiv); + } } } $prefsDiv.append($fieldset); @@ -2216,25 +1957,25 @@ var AblePlayerInstances = []; if (!this.usingYouTubeCaptions) { this.$sampleCapsDiv = $('<div>',{ 'class': 'able-captions-sample' - }).text(this.tt.sampleCaptionText); + }).text( this.translate( 'sampleCaptionText', 'Sample caption text' ) ); $prefsDiv.append(this.$sampleCapsDiv); this.stylizeCaptions(this.$sampleCapsDiv); } - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { if (this.synth) { // add a div with sample audio description text this.$sampleDescDiv = $('<div>',{ 'class': 'able-desc-sample' - }).text(this.tt.sampleDescriptionText); + }).text( this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) ); $prefsDiv.append(this.$sampleDescDiv); - this.currentSampleText = this.tt.sampleDescriptionText; + this.currentSampleText = this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ); } - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { + let shortcutClass = (this.prefNoKeyShortcuts === 1 ) ? 'able-modkey-item hidden' : 'able-modkey-item'; + // add a current list of keyboard shortcuts $kbHeading = $('<h2>',{ - text: this.tt.prefHeadingKeyboard2 + text: this.translate( 'prefHeadingKeyboard2', 'Current keyboard shortcuts' ) }); $kbList = $('<ul>'); // create arrays of kbLabels and keys @@ -2242,100 +1983,85 @@ var AblePlayerInstances = []; keys = []; for (i=0; i<this.controls.length; i++) { if (this.controls[i] === 'play') { - kbLabels.push(this.tt.play + '/' + this.tt.pause); - keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar); - } - else if (this.controls[i] === 'restart') { - kbLabels.push(this.tt.restart); + kbLabels.push( this.translate( 'play', 'Play' ) + '/' + this.translate( 'pause', 'Pause' ) ); + keys.push('p</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-help-modifiers"> ' + this.translate( 'spacebar', 'spacebar' )); + } else if (this.controls[i] === 'restart') { + kbLabels.push(this.translate( 'restart', 'Restart' )); keys.push('s'); - } - else if (this.controls[i] === 'previous') { - kbLabels.push(this.tt.prevTrack); + } else if (this.controls[i] === 'previous') { + kbLabels.push( this.translate( 'prevTrack', 'Previous track' ) ); keys.push('b'); // b = back - } - else if (this.controls[i] === 'next') { - kbLabels.push(this.tt.nextTrack); + } else if (this.controls[i] === 'next') { + kbLabels.push( this.translate( 'nextTrack', 'Next track' ) ); keys.push('n'); - } - else if (this.controls[i] === 'rewind') { - kbLabels.push(this.tt.rewind); + } else if (this.controls[i] === 'rewind') { + kbLabels.push(this.translate( 'rewind', 'Rewind' )); keys.push('r'); - } - else if (this.controls[i] === 'forward') { - kbLabels.push(this.tt.forward); + } else if (this.controls[i] === 'forward') { + kbLabels.push(this.translate( 'forward', 'Forward' )); keys.push('f'); - } - else if (this.controls[i] === 'volume') { - kbLabels.push(this.tt.volume); - keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9'); + } else if (this.controls[i] === 'volume') { + kbLabels.push(this.translate( 'volume', 'Volume' )); + keys.push('v</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-modkey">1-9'); // mute toggle - kbLabels.push(this.tt.mute + '/' + this.tt.unmute); + kbLabels.push(this.translate( 'mute', 'Mute' ) + '/' + this.translate( 'unmute', 'Unmute' )); keys.push('m'); - } - else if (this.controls[i] === 'captions') { + } else if (this.controls[i] === 'captions') { if (this.captions.length > 1) { // caption button launches a Captions popup menu - kbLabels.push(this.tt.captions); - } - else { + kbLabels.push(this.translate( 'captions', 'Captions' )); + } else { // there is only one caption track // therefore caption button is a toggle if (this.captionsOn) { - kbLabels.push(this.tt.hideCaptions); - } - else { - kbLabels.push(this.tt.showCaptions); + kbLabels.push(this.translate( 'hideCaptions', 'Hide captions' )); + } else { + kbLabels.push(this.translate( 'showCaptions', 'Show captions' )); } } keys.push('c'); - } - else if (this.controls[i] === 'descriptions') { + } else if (this.controls[i] === 'descriptions') { if (this.descOn) { - kbLabels.push(this.tt.turnOffDescriptions); - } - else { - kbLabels.push(this.tt.turnOnDescriptions); + kbLabels.push(this.translate( 'turnOffDescriptions', 'Turn off descriptions' )); + } else { + kbLabels.push(this.translate( 'turnOnDescriptions', 'Turn on descriptions' )); } keys.push('d'); - } - else if (this.controls[i] === 'prefs') { - kbLabels.push(this.tt.preferences); + } else if (this.controls[i] === 'prefs') { + kbLabels.push(this.translate( 'preferences', 'Preferences' )); keys.push('e'); } - else if (this.controls[i] === 'help') { - kbLabels.push(this.tt.help); - keys.push('h'); - } } for (i=0; i<keys.length; i++) { // alt kbListText = '<span class="able-modkey-alt">'; if (this.prefAltKey === 1) { - kbListText += this.tt.prefAltKey + ' + '; + kbListText += this.translate( 'prefAltKey', 'Alt' ) + ' + '; } kbListText += '</span>'; // ctrl kbListText += '<span class="able-modkey-ctrl">'; if (this.prefCtrlKey === 1) { - kbListText += this.tt.prefCtrlKey + ' + '; + kbListText += this.translate( 'prefCtrlKey', 'Control' ) + ' + '; } kbListText += '</span>'; // shift kbListText += '<span class="able-modkey-shift">'; if (this.prefShiftKey === 1) { - kbListText += this.tt.prefShiftKey + ' + '; + kbListText += this.translate( 'prefShiftKey', 'Shift' ) + ' + '; } kbListText += '</span>'; kbListText += '<span class="able-modkey">' + keys[i] + '</span>'; kbListText += ' = ' + kbLabels[i]; $kbListItem = $('<li>',{ - html: kbListText + 'class': shortcutClass, + html: kbListText, }); $kbList.append($kbListItem); } // add Escape key - kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>'; - kbListText += ' = ' + this.tt.escapeKeyFunction; + kbListText = '<span class="able-modkey">' + this.translate( 'escapeKey', 'Escape' ) + '</span>'; + kbListText += ' = ' + this.translate( 'escapeKeyFunction', 'Close current dialog or popup menu' ); $kbListItem = $('<li>',{ html: kbListText }); @@ -2345,56 +2071,53 @@ var AblePlayerInstances = []; } // $prefsDiv (dialog) must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers $('body').append($prefsDiv); - dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', true, formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em'); + dialog = new AccessibleDialog( + $prefsDiv, + this.$prefsButton, + formTitle, + thisObj.tt.closeButtonLabel + ); // Add save and cancel buttons. - $prefsDiv.append('<hr>'); - saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - saveButton.click(function () { + $buttonContainer = $( '<div class="able-prefs-buttons"></div>' ); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); + $saveButton.on( 'click', function () { dialog.hide(); thisObj.savePrefsFromForm(); }); - cancelButton.click(function () { + $cancelButton.on( 'click', function () { dialog.hide(); thisObj.resetPrefsForm(); }); - - $prefsDiv.append(saveButton); - $prefsDiv.append(cancelButton); - + $buttonContainer.append( $saveButton,$cancelButton ); + $prefsDiv.append($buttonContainer); // Associate the dialog's H1 as aria-labelledby for groups of fields - // (alternative to fieldset and legend) - if (form === 'captions' || form === 'transcript') { - $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); + // (alternative to fieldset and legend) + if (form === 'captions' || form === 'transcript') { + $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); } // add global reference for future control if (form === 'captions') { this.captionPrefsDialog = dialog; - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { this.descPrefsDialog = dialog; - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { this.keyboardPrefsDialog = dialog; - } - else if (form === 'transcript') { + } else if (form === 'transcript') { this.transcriptPrefsDialog = dialog; } // Add click handler for dialog close button // (button is added in dialog.js) - $('div.able-prefs-form button.modalCloseButton').click(function() { + $('div.able-prefs-form button.modalCloseButton').on( 'click', function() { thisObj.resetPrefsForm(); }) // Add handler for escape key - $('div.able-prefs-form').keydown(function(e) { - if (e.which === 27) { // escape + $('div.able-prefs-form').on( 'keydown', function(e) { + if (e.key === 'Escape') { thisObj.resetPrefsForm(); } }); @@ -2402,23 +2125,21 @@ var AblePlayerInstances = []; AblePlayer.prototype.getPrefDescVoice = function () { - // return user's preferred voice for the current language from cookie.voices - var lang, cookie, i; + // return user's preferred voice for the current language from preferences.voices + var lang, preferences, i; - if (this.selectedDescriptions) { - lang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - lang = this.captionLang; - } - else { - lang = this.lang; + if (this.selectedDescriptions) { + lang = this.selectedDescriptions.language; + } else if (this.captionLang) { + lang = this.captionLang; + } else { + lang = this.lang; } - cookie = this.getCookie(); - if (cookie.voices) { - for (i=0; i < cookie.voices.length; i++) { - if (cookie.voices[i].lang === lang) { - return cookie.voices[i].name; + preferences = this.getPref(); + if (preferences.voices) { + for (i=0; i < preferences.voices.length; i++) { + if (preferences.voices[i].lang === lang) { + return preferences.voices[i].name; } } } @@ -2427,9 +2148,9 @@ var AblePlayerInstances = []; AblePlayer.prototype.rebuildDescPrefsForm = function () { - // Called if this.descVoices changes, which may happen if: - // getBrowserVoices() succeeds after an earlier failure - // user changes language of captions/subtitles and descVoices changes to match the new language + // Called if this.descVoices changes, which may happen if: + // getBrowserVoices() succeeds after an earlier failure + // user changes language of captions/subtitles and descVoices changes to match the new language var i, optionValue, optionText, $thisOption; @@ -2450,161 +2171,141 @@ var AblePlayerInstances = []; } }; - AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { - - // The values for pitch, rate, and volume (web speech API) - // are strange and inconsistent between variables - // this function returns text that is more readable than the values themselves + AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { + + // The values for pitch, rate, and volume (web speech API) + // are strange and inconsistent between variables + // this function returns text that is more readable than the values themselves + + if (pref === 'prefDescPitch') { + if (value === 0) { + return this.translate( 'prefDescPitch1', 'Very low' ); + } else if (value === 0.5) { + return this.translate( 'prefDescPitch2', 'Low' ); + } else if (value === 1) { + return this.translate( 'prefDescPitch3', 'Default' ); + } else if (value === 1.5) { + return this.translate( 'prefDescPitch4', 'High' ); + } else if (value === 2) { + return this.translate( 'prefDescPitch5', 'Very high' ); + } + } else if (pref === 'prefDescRate') { + // default in the API is 0.1 to 10, where 1 is normal speaking voice + // our custom range offers several rates close to 1 + // plus a couple of crazy fast ones for sport + // Our more readable options (1-10) or mapped here to API values + if (value === 0.7) { + return 1; + } else if (value === 0.8) { + return 2; + } else if (value === 0.9) { + return 3; + } else if (value === 1) { + return 4; + } else if (value === 1.1) { + return 5; + } else if (value === 1.2) { + return 6; + } else if (value === 1.5) { + return 7; + } else if (value === 2) { + return 8; + } else if (value === 2.5) { + return 9; + } else if (value === 3) { + return 10; + } + } else if (pref === 'prefDescVolume') { + // values range from 0.1 to 1.0 + return value 10; + } + return value; + }; + + AblePlayer.prototype.resetPrefsForm = function () { + + // Reset preferences form with default values from preferences + // Called when: + // User clicks cancel or close button in Prefs Dialog + // User presses Escape to close Prefs dialog + // User clicks Save in Prefs dialog, & there's more than one player on page + + var thisObj, preferences, available, i, prefName; - if (pref === 'prefDescPitch') { - if (value === 0) { - return this.tt.prefDescPitch1; - } - else if (value === 0.5) { - return this.tt.prefDescPitch2; - } - else if (value === 1) { - return this.tt.prefDescPitch3; - } - else if (value === 1.5) { - return this.tt.prefDescPitch4; - } - else if (value === 2) { - return this.tt.prefDescPitch5; - } - } - else if (pref === 'prefDescRate') { - // default in the API is 0.1 to 10, where 1 is normal speaking voice - // our custom range offers several rates close to 1 - // plus a couple of crazy fast ones for sport - // Our more readable options (1-10) or mapped here to API values - if (value === 0.7) { - return 1; - } - else if (value === 0.8) { - return 2; - } - else if (value === 0.9) { - return 3; - } - else if (value === 1) { - return 4; - } - else if (value === 1.1) { - return 5; - } - else if (value === 1.2) { - return 6; - } - else if (value === 1.5) { - return 7; - } - else if (value === 2) { - return 8; - } - else if (value === 2.5) { - return 9; - } - else if (value === 3) { - return 10; - } - } - else if (pref === 'prefDescVolume') { - // values range from 0.1 to 1.0 - return value * 10; - } - return value; - }; - - AblePlayer.prototype.resetPrefsForm = function () { - - // Reset preferences form with default values from cookie - // Called when: - // User clicks cancel or close button in Prefs Dialog - // User presses Escape to close Prefs dialog - // User clicks Save in Prefs dialog, & there's more than one player on page - - var thisObj, cookie, available, i, prefName, prefId, thisDiv, thisId; - - thisObj = this; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (i=0; i<available.length; i++) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is a caption-related select box - $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]); - } - else { // all others are checkboxes - if (this[prefName] === 1) { - $('input[name="' + prefName + '"]').prop('checked',true); - } - else { - $('input[name="' + prefName + '"]').prop('checked',false); - } + thisObj = this; + preferences = this.getPref(); + available = this.getAvailablePreferences(); + for (i=0; i<available.length; i++) { + prefName = available[i]['name']; + if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + // this is a caption-related select box + $('select[name="' + prefName + '"]').val(preferences.preferences[prefName]); + } else { // all others are checkboxes + if (this[prefName] === 1) { + $('input[name="' + prefName + '"]').prop('checked',true); + } else { + $('input[name="' + prefName + '"]').prop('checked',false); } } - // also restore style of sample caption div - this.stylizeCaptions(this.$sampleCapsDiv); - }; + } + // also restore style of sample caption div + this.stylizeCaptions(this.$sampleCapsDiv); + }; AblePlayer.prototype.savePrefsFromForm = function () { // Return a prefs object constructed from the form. // called when user saves the Preferences form - // update cookie with new value - var cookie, available, prefName, prefId, - voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, + // update preferences with new value + var preferences, available, prefName, prefId, + voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, numCapChanges, capSizeChanged, capSizeValue, newValue; numChanges = 0; numCapChanges = 0; // changes to caption-style-related preferences capSizeChanged = false; - cookie = this.getCookie(); + preferences = this.getPref(); available = this.getAvailablePreferences(); for (var i=0; i < available.length; i++) { // only prefs with labels are used in the Prefs form if (available[i]['label']) { prefName = available[i]['name']; prefId = this.mediaId + '_' + prefName; - if (prefName === 'prefDescVoice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; + if (prefName === 'prefDescVoice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; } voiceSelectId = this.mediaId + '_prefDescVoice'; this.prefDescVoice = $('select#' + voiceSelectId).find(':selected').val(); this.prefDescVoiceLang = $('select#' + voiceSelectId).find(':selected').attr('data-lang'); - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; } } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - numChanges++; - } - else if (prefName == 'prefDescMethod') { + preferences.voices.push(newVoice); + } + numChanges++; + } else if (prefName == 'prefDescMethod') { // As of v4.0.10, prefDescMethod is no longer a choice // this.prefDescMethod = $('input[name="' + prefName + '"]:checked').val(); this.prefDescMethod = 'video'; - if (this.prefDescMethod !== cookie.preferences['prefDescMethod']) { // user's preference has changed - cookie.preferences['prefDescMethod'] = this.prefDescMethod; + if (this.prefDescMethod !== preferences.preferences['prefDescMethod']) { // user's preference has changed + preferences.preferences['prefDescMethod'] = this.prefDescMethod; numChanges++; } - } - else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + } else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { // this is one of the caption-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref (for caption fields, not done elsewhere) this[prefName] = newValue; numChanges++; @@ -2614,37 +2315,32 @@ var AblePlayerInstances = []; capSizeChanged = true; capSizeValue = newValue; } - } - else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { + } else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { // this is one of the description-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref this[prefName] = newValue; numChanges++; } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes if ($('input[id="' + prefId + '"]').is(':checked')) { - cookie.preferences[prefName] = 1; + preferences.preferences[prefName] = 1; if (this[prefName] === 1) { // nothing has changed - } - else { + } else { // user has just turned this pref on this[prefName] = 1; numChanges++; } - } - else { // thisPref is not checked - cookie.preferences[prefName] = 0; + } else { // thisPref is not checked + preferences.preferences[prefName] = 0; if (this[prefName] === 1) { // user has just turned this pref off this[prefName] = 0; numChanges++; - } - else { + } else { // nothing has chaged } } @@ -2652,11 +2348,10 @@ var AblePlayerInstances = []; } } if (numChanges > 0) { - this.setCookie(cookie); - this.showAlert(this.tt.prefSuccess); - } - else { - this.showAlert(this.tt.prefNoChange); + this.setPrefs(preferences); + this.showAlert( this.translate( 'prefSuccess', 'Your changes have been saved.' ) ); + } else { + this.showAlert( this.translate( 'prefNoChange', "You didn't make any changes" ) ); } if (this.player === 'youtube' && (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) && @@ -2668,8 +2363,8 @@ var AblePlayerInstances = []; // there are multiple players on this page. // update prefs for ALL of them for (var i=0; i<AblePlayerInstances.length; i++) { - AblePlayerInstances[i].updatePrefs(); - AblePlayerInstances[i].geteferences(); + AblePlayerInstances[i].updatePlayerPrefs(); + AblePlayerInstances[i].loadCurrentPreferences(); AblePlayerInstances[i].resetPrefsForm(); if (numCapChanges > 0) { AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$captionsDiv); @@ -2679,10 +2374,9 @@ var AblePlayerInstances = []; } } } - } - else { + } else { // there is only one player - this.updatePrefs(); + this.updatePlayerPrefs(); if (numCapChanges > 0) { this.stylizeCaptions(this.$captionsDiv); // also apply same changes to descriptions, if present @@ -2693,16 +2387,14 @@ var AblePlayerInstances = []; } } - AblePlayer.prototype.updatePrefs = function () { + AblePlayer.prototype.updatePlayerPrefs = function () { // Update player based on current prefs. Safe to call multiple times. - - if (this.$transcriptDiv) { + if (this.$transcriptDiv) { // tabbable transcript if (this.prefTabbable === 1) { this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - else { + } else { this.$transcriptDiv.find('span.able-transcript-seekpoint').removeAttr('tabindex'); } @@ -2737,11 +2429,10 @@ var AblePlayerInstances = []; (function ($) { // See section 4.1 of dev.w3.org/html5/webvtt for format details. - AblePlayer.prototype.parseWebVTT = function(srcFile,text) { - -// var deferred = new $.Deferred(); -// var promise = deferred.promise(); + AblePlayer.prototype.parseWebVTT = function(data) { + let srcFile = data.src; + let text = data.text; // Normalize line ends to \n. text = text.replace(/(\r\n|\n|\r)/g,'\n'); @@ -2765,8 +2456,7 @@ var AblePlayerInstances = []; errString += err; if (console.warn) { - } - else if (console.log) { + } else if (console.log) { } } @@ -2795,8 +2485,7 @@ var AblePlayerInstances = []; if (cutText[ii] === '\n') { state.column = 1; state.line += 1; - } - else { + } else { state.column += 1; } } @@ -2816,8 +2505,7 @@ var AblePlayerInstances = []; returnText = state.text; updatePosition(state, returnText); state.text = ''; - } - else { + } else { returnText = state.text.substring(0, nextEOL); updatePosition(state, returnText + '\n'); state.text = state.text.substring(nextEOL + 1); @@ -2827,12 +2515,7 @@ var AblePlayerInstances = []; function peekLine(state) { var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - return state.text; - } - else { - return state.text.substring(0, nextEOL); - } + return (nextEOL === -1) ? state.text : state.text.substring(0, nextEOL); } function parseFileBody(state) { @@ -2846,8 +2529,7 @@ var AblePlayerInstances = []; parseMetadataHeaders, eatAtLeast1EmptyLines, parseCuesAndComments]); - } - else { + } else { state.error = "WEBVTT signature not followed by whitespace."; } } @@ -2858,11 +2540,9 @@ var AblePlayerInstances = []; var nextLine = peekLine(state); if (nextLine.indexOf('-->') !== -1) { return; - } - else if (nextLine.length === 0) { + } else if (nextLine.length === 0) { return; - } - else { + } else { var keyValue = act(state, getMetadataKeyValue); state.metadata[keyValue[0]] = keyValue[1]; act(state, eatUntilEOLInclusive); @@ -2895,8 +2575,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -2910,8 +2589,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -2924,14 +2602,11 @@ var AblePlayerInstances = []; // If NOTE is not on a line all its own, it must be followed by a space or tab. if (nextLine.indexOf('NOTE') === 0 && ((nextLine.length === 4) || (nextLine[4] === ' ') || (nextLine[4] === '\t'))) { actList(state, [eatComment, eatEmptyLines]); - } - else if ($.trim(nextLine).length === 0 && state.text.length > 0) { + } else if (nextLine.trim().length === 0 && state.text.length > 0) { act(state, eatEmptyLines); - } - else if ($.trim(nextLine).length > 0) { + } else if (nextLine.trim().length > 0) { act(state, parseCue); - } - else { + } else { // Everythings parsed! return; } @@ -2954,8 +2629,7 @@ var AblePlayerInstances = []; errString += 'Expected cue timing for cueId \''+cueId+'\' but found: ' + nextLine + '\n'; if (console.warn) { - } - else if (console.log) { + } else if (console.log) { } return; // Return leaving line for parseCuesAndComments to handle @@ -3024,8 +2698,7 @@ var AblePlayerInstances = []; // We'll use the tokens themselves as objects where possible. if (token.type === 'string') { current.children.push(token); - } - else if (token.type === 'startTag') { + } else if (token.type === 'startTag') { token.type = token.tagName; // Define token.parent; added by Terrill to fix bug end 'endTag' loop token.parent = current; @@ -3035,31 +2708,27 @@ var AblePlayerInstances = []; } current.children.push(token); current = token; - } - else if (token.tagName === 'rt' && current.tagName === 'ruby') { + } else if (token.tagName === 'rt' && current.tagName === 'ruby') { if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'c') { + } else if (token.tagName === 'c') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'v') { + } else if (token.tagName === 'v') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'lang') { + } else if (token.tagName === 'lang') { languageStack.push(token.annotation); if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; @@ -3067,22 +2736,18 @@ var AblePlayerInstances = []; current.children.push(token); current = token; } - } - else if (token.type === 'endTag') { + } else if (token.type === 'endTag') { if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) { // NOTE from Terrill: This was resulting in an error because current.parent was undefined // Fixed (I think) by assigning current token to token.parent in 'startTag' loop current = current.parent; - } - else if (token.tagName === 'lang' && current.type === 'lang') { + } else if (token.tagName === 'lang' && current.type === 'lang') { current = current.parent; languageStack.pop(); - } - else if (token.tagName === 'ruby' && current.type === 'rt') { + } else if (token.tagName === 'ruby' && current.type === 'rt') { current = current.parent.parent; } - } - else if (token.type === 'timestampTag') { + } else if (token.type === 'timestampTag') { var tempState = { text: token.value, error: null, @@ -3117,11 +2782,9 @@ var AblePlayerInstances = []; // Double newlines indicate end of token. if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { c = '\u0004'; - } - else if (state.text.length > 0) { + } else if (state.text.length > 0) { c = state.text[0]; - } - else { + } else { // End of file. c = '\u0004'; } @@ -3129,213 +2792,168 @@ var AblePlayerInstances = []; if (c === '&') { buffer = '&'; tokenState = 'escape'; - } - else if (c === '<') { + } else if (c === '<') { if (result.length === 0) { tokenState = 'tag'; - } - else { + } else { token.type = 'string'; token.value = result.join(''); return token; } - } - else if (c === '\u0004') { + } else if (c === '\u0004') { return {type: 'string', value: result.join('')}; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'escape') { + } else if (tokenState === 'escape') { if (c === '&') { result.push(buffer); buffer = '&'; - } - else if (c.match(/[0-9a-z]/)) { + } else if (c.match(/[0-9a-z]/)) { buffer += c; - } - else if (c === ';') { + } else if (c === ';') { if (buffer === '&') { result.push('&'); - } - else if (buffer === '<') { + } else if (buffer === '<') { result.push('<'); - } - else if (buffer === '>') { + } else if (buffer === '>') { result.push('>'); - } - else if (buffer === '&lrm') { + } else if (buffer === '&lrm') { result.push('\u200e'); - } - else if (buffer === '&rlm') { + } else if (buffer === '&rlm') { result.push('\u200f'); - } - else if (buffer === ' ') { + } else if (buffer === ' ') { result.push('\u00a0'); - } - else { + } else { result.push(buffer); result.push(';'); } tokenState = 'data'; - } - else if (c === '<' || c === '\u0004') { + } else if (c === '<' || c === '\u0004') { result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { // Handle unescaped & chars as strings + } else if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { // Handle unescaped & chars as strings result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else { + } else { result.push(buffer); tokenState = 'data'; } - } - else if (tokenState === 'tag') { + } else if (tokenState === 'tag') { if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '/') { + } else if (c === '/') { tokenState = 'endTag'; - } - else if (c.match('[0-9]')) { + } else if (c.match('[0-9]')) { tokenState = 'timestampTag'; result.push(c); - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); break; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = ''; token.type = 'startTag'; return token; - } - else { + } else { result.push(c); tokenState = 'startTag'; } - } - else if (tokenState === 'startTag') { + } else if (tokenState === 'startTag') { if (c === '\t' || c === '\u000c' || c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'startTagClass') { + } else if (tokenState === 'startTagClass') { if (c === '\t' || c === '\u000c' || c === ' ') { token.classes.push(buffer); buffer = ''; tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { token.classes.push(buffer); buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { token.classes.push(buffer); buffer = ""; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else { + } else { buffer += 'c'; } - } - else if (tokenState === 'startTagAnnotation') { + } else if (tokenState === 'startTagAnnotation') { if (c === '>') { cut(state, 1); - buffer = $.trim(buffer).replace(/ +/, ' '); + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else if (c === '\u0004') { - buffer = $.trim(buffer).replace(/ +/, ' '); + } else if (c === '\u0004') { + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else { + } else { buffer += c; } - } - else if (tokenState === 'endTag') { + } else if (tokenState === 'endTag') { if (c === '>') { cut(state, 1); token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'timestampTag') { + } else if (tokenState === 'timestampTag') { if (c === '>') { cut(state, 1); token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else { + } else { throw 'Unknown tokenState ' + tokenState; } @@ -3352,15 +2970,13 @@ var AblePlayerInstances = []; } while (true) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { // End of comment. return; - } - else if (nextLine.indexOf('-->') !== -1) { + } else if (nextLine.indexOf('-->') !== -1) { state.error = 'Invalid syntax: --> in comment.'; return; - } - else { + } else { cutLine(state); } } @@ -3378,8 +2994,7 @@ var AblePlayerInstances = []; function eatSignature(state) { if (state.text.substring(0,6) === 'WEBVTT') { cut(state, 6); - } - else { + } else { state.error = 'Invalid signature.'; } } @@ -3387,8 +3002,7 @@ var AblePlayerInstances = []; function eatArrow(state) { if (state.text.length < 3 || state.text.substring(0,3) !== '-->') { state.error = 'Missing -->'; - } - else { + } else { cut(state, 3); } } @@ -3396,8 +3010,7 @@ var AblePlayerInstances = []; function eatSingleSpaceOrTab(state) { if (state.text[0] === '\t' || state.text[0] === ' ') { cut(state, 1); - } - else { + } else { state.error = 'Missing space.'; } } @@ -3423,8 +3036,7 @@ var AblePlayerInstances = []; var nextEOL = state.text.indexOf('\n'); if (nextEOL === -1) { state.error = 'Missing EOL.'; - } - else { + } else { cut(state, nextEOL + 1); } } @@ -3432,10 +3044,9 @@ var AblePlayerInstances = []; function eatEmptyLines(state) { while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); - } - else { + } else { break; } } @@ -3446,11 +3057,10 @@ var AblePlayerInstances = []; var linesEaten = 0; while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); linesEaten += 1; - } - else { + } else { break; } } @@ -3467,7 +3077,9 @@ var AblePlayerInstances = []; } var timestamp = cut(state, nextSpace); - var results = /((\d\d):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(timestamp); + // The spec requires exactly 2 characters for minutes and seconds, and 2+ for hours, + // but some VTT generation creates 1 digit hour times (e.g. "1:02:24.000 --> 1:04:48.000") and it seems harmless to allow that here + var results = /((\d+):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(timestamp); if (!results) { state.error = 'Unable to parse timestamp'; @@ -3494,8 +3106,7 @@ var AblePlayerInstances = []; time += parseInt(seconds, 10); time += parseInt(results[6], 10) / 1000; - } - else { + } else { time += parseInt(results[7], 10); time += parseInt(results[8], 10) / 1000; } @@ -3509,23 +3120,13 @@ var AblePlayerInstances = []; AblePlayer.prototype.injectPlayerCode = function() { // create and inject surrounding HTML structure - // If IOS: - // If video: - // IOS does not support any of the player's functionality - // - everything plays in its own player - // Therefore, AblePlayer is not loaded & all functionality is disabled - // (this all determined. If this is IOS && video, this function is never called) - // If audio: - // HTML cannot be injected as a parent of the <audio> element - // It is therefore injected after the <audio> element - // This is only a problem in IOS 6 and earlier, - // & is a known bug, fixed in IOS 7 - - var thisObj, captionsContainer, prefsGroups, i; - thisObj = this; + // If iOS & video: + // iOS does not support any of the player's functionality - everything plays in its own player + // Therefore, AblePlayer is not loaded & all functionality is disabled + // (this all determined. If this is iOS && video, this function is never called) - // create three wrappers and wrap them around the media element. - // From inner to outer: + var captionsContainer; + // Wrappers, from inner to outer: // $mediaContainer - contains the original media element // $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions) // $ableWrapper - contains additional widgets (e.g., transcript window, sign window) @@ -3533,10 +3134,6 @@ var AblePlayerInstances = []; this.$ableDiv = this.$mediaContainer.wrap('<div class="able"></div>').parent(); this.$ableWrapper = this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(); this.$ableWrapper.addClass('able-skin-' + this.skin); - - this.$ableWrapper.css({ - 'width': this.playerWidth + 'px' - }); if (this.mediaType === 'video') { // youtube adds its own big play button @@ -3549,26 +3146,37 @@ var AblePlayerInstances = []; // add container that captions or description will be appended to // Note: new Jquery object must be assigned _after_ wrap, hence the temp captionsContainer variable - captionsContainer = $('<div>'); - if (this.mediaType === 'video') { - captionsContainer.addClass('able-vidcap-container'); - } - else if (this.mediaType === 'audio') { - captionsContainer.addClass('able-audcap-container'); - // hide this by default. It will be shown if captions are available + captionsContainer = $('<div>'); + if (this.mediaType === 'video') { + captionsContainer.addClass('able-vidcap-container'); + } else if (this.mediaType === 'audio') { + captionsContainer.addClass('able-audcap-container'); + // hide this by default. It will be shown if captions are available captionsContainer.addClass('captions-off'); } - this.injectPlayerControlArea(); // this may need to be injected after captions??? + this.injectPlayerControlArea(); // this may need to be injected after captions??? this.$captionsContainer = this.$mediaContainer.wrap(captionsContainer).parent(); - this.injectAlert(); + this.injectAlert(this.$ableDiv); this.injectPlaylist(); - + this.injectAudioPoster(); // Do this last, as it should be prepended to the top of this.$ableDiv // after everything else has prepended this.injectOffscreenHeading(); }; + AblePlayer.prototype.injectAudioPoster = function() { + if ( this.mediaType === 'audio' && this.hasPoster ) { + audioPoster = DOMPurify.sanitize(this.audioPoster); + audioPosterAlt = DOMPurify.sanitize(this.audioPosterAlt); + let audioPosterImg = document.createElement( 'img' ); + audioPosterImg.setAttribute( 'src', audioPoster ); + audioPosterImg.setAttribute( 'alt', audioPosterAlt ); + this.$audioWrapper = this.$playerDiv.wrap( '<div class="able-audio-wrapper">' ).parent(); + this.$audioWrapper.prepend( audioPosterImg ); + } + } + AblePlayer.prototype.injectOffscreenHeading = function () { // Inject an offscreen heading to the media container. @@ -3578,8 +3186,7 @@ var AblePlayerInstances = []; var headingType; if (this.playerHeadingLevel == '0') { // do NOT inject a heading (at author's request) - } - else { + } else { if (typeof this.playerHeadingLevel === 'undefined') { this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); // returns in integer 1-6 } @@ -3587,51 +3194,28 @@ var AblePlayerInstances = []; this.$headingDiv = $('<' + headingType + '>'); this.$ableDiv.prepend(this.$headingDiv); this.$headingDiv.addClass('able-offscreen'); - this.$headingDiv.text(this.tt.playerHeading); + this.$headingDiv.text( this.translate( 'playerHeading', 'Media player' ) ); } }; AblePlayer.prototype.injectBigPlayButton = function () { - var thisObj, svgData, buttonIcon, svgPath; - - thisObj = this; + var thisObj = this; this.$bigPlayButton = $('<button>', { 'class': 'able-big-play-button', 'aria-hidden': false, - 'aria-label': this.tt.play, + 'aria-label': this.translate( 'play', 'Play' ), + 'type': 'button', 'tabindex': 0 }); - if (this.iconType == 'svg') { - svgData = this.getSvgData('play'); - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - this.$bigPlayButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - this.$bigPlayButton.html(this.$bigPlayButton.html()); - } - else { // use icon font - this.$bigPlayIcon = $('<span>', { - 'class': 'icon-play', - }); - this.$bigPlayButton.append(this.$bigPlayIcon); - } + this.getIcon( this.$bigPlayButton, 'play' ); - this.$bigPlayButton.click(function (event) { - event.preventDefault(); + this.$bigPlayButton.on( 'click', function () { thisObj.handlePlay(); }); - + this.$mediaContainer.append(this.$bigPlayButton); }; @@ -3640,10 +3224,10 @@ var AblePlayerInstances = []; this.$playerDiv = $('<div>', { 'class' : 'able-player', 'role' : 'region', - 'aria-label' : this.mediaType + ' player' + 'aria-label' : ( 'audio' === this.mediaType ) ? this.translate( 'audioPlayer', 'audio player' ) : this.translate( 'videoPlayer', 'video player' ) }); - this.$playerDiv.addClass('able-'+this.mediaType); - if (this.hasPlaylist && this.showNowPlaying) { + this.$playerDiv.addClass('able-' + this.mediaType); + if (this.hasPlaylist && this.showNowPlaying) { this.$nowPlayingDiv = $('<div>',{ 'class' : 'able-now-playing', 'aria-live' : 'assertive', @@ -3672,8 +3256,9 @@ var AblePlayerInstances = []; this.$speed = $('<span>',{ 'class' : 'able-speed', - 'aria-live' : 'assertive' - }).text(this.tt.speed + ': 1x'); + 'aria-live' : 'assertive', + 'aria-atomic' : 'true' + }).text(this.translate( 'speed', 'Speed' ) + ': 1x'); this.$status = $('<span>',{ 'class' : 'able-status', @@ -3684,16 +3269,15 @@ var AblePlayerInstances = []; this.$statusBarDiv.append(this.$timer, this.$speed, this.$status); if (this.showNowPlaying) { this.$playerDiv.append(this.$nowPlayingDiv, this.$controllerDiv, this.$statusBarDiv); - } - else { + } else { this.$playerDiv.append(this.$controllerDiv, this.$statusBarDiv); } - if (this.mediaType === 'video') { - // the player controls go after the media & captions + + if (this.mediaType === 'video') { + // the player controls go after the media & captions this.$ableDiv.append(this.$playerDiv); - } - else { - // the player controls go before the media & captions + } else { + // the player controls go before the media & captions this.$ableDiv.prepend(this.$playerDiv); } }; @@ -3705,9 +3289,9 @@ var AblePlayerInstances = []; 'class': 'able-descriptions' }); // Add ARIA so description will be announced by screen readers - // Later (in description.js > showDescription()), + // Later (in description.js > showDescription()), // if browser supports Web Speech API and this.descMethod === 'browser' - // these attributes will be removed + // these attributes will be removed this.$descDiv.attr({ 'aria-live': 'assertive', 'aria-atomic': 'true' @@ -3719,54 +3303,114 @@ var AblePlayerInstances = []; }; AblePlayer.prototype.getDefaultWidth = function(which) { - + let viewportMaxwidth = window.innerWidth; // return default width of resizable elements // these values are somewhat arbitrary, but seem to result in good usability // if users disagree, they can resize (and resposition) them if (which === 'transcript') { - return 450; - } - else if (which === 'sign') { - return 400; + return ( viewportMaxwidth <= 450 ) ? viewportMaxwidth : 450; + } else if (which === 'sign') { + return ( viewportMaxwidth <= 400 ) ? viewportMaxwidth : 400; } }; + /** + * Reposition draggable windows when switched into fullscreen. + * + * @param {string} which 'transcript' or 'sign'. + / + AblePlayer.prototype.rePositionDraggableWindow = function (which) { + + let preferences, $window; + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + + if ( which === 'transcript' && $window ) { + if (typeof preferences.transcript !== 'undefined') { + this.prevTranscriptPosition = preferences.transcript; + } + $window.css({ + 'top': 0, + 'left': 0 + }); + } else if ( 'sign' === which && $window ) { + if (typeof preferences.sign !== 'undefined') { + this.prevSignPosition = preferences.sign; + } + $window.css({ + 'top': 0, + 'right': 0, + 'left': 'auto' + }); + } + } + AblePlayer.prototype.positionDraggableWindow = function (which, width) { // which is either 'transcript' or 'sign' + var preferences, preferencePos, $window, windowPos, viewportWidth, windowWidth; - var cookie, cookiePos, $window, dragged, windowPos, currentWindowPos, firstTime, zIndex; - - cookie = this.getCookie(); + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + if ( ! $window ) { + return; + } if (which === 'transcript') { - $window = this.$transcriptArea; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.transcript; + if (typeof preferences.transcript !== 'undefined') { + preferencePos = preferences.transcript; } - } - else if (which === 'sign') { - $window = this.$signWindow; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.sign; + if ( this.prevTranscriptPosition ) { + preferencePos = this.prevTranscriptPosition; + this.prevTranscriptPosition = false; + } + } else if (which === 'sign') { + if (typeof preferences.sign !== 'undefined') { + preferencePos = preferences.sign; + } + if ( this.prevSignPosition ) { + preferencePos = this.prevSignPosition; + this.prevSignPosition = false; } } - if (typeof cookiePos !== 'undefined' && !($.isEmptyObject(cookiePos))) { - // position window using stored values from cookie + if (typeof preferencePos !== 'undefined' && !($.isEmptyObject(preferencePos))) { + // position window using stored values from preferences $window.css({ - 'position': cookiePos['position'], - 'width': cookiePos['width'], - 'z-index': cookiePos['zindex'] + 'position': preferencePos['position'], + 'width': preferencePos['width'], + 'z-index': preferencePos['zindex'] }); - if (cookiePos['position'] === 'absolute') { + if (preferencePos['position'] === 'absolute') { $window.css({ - 'top': cookiePos['top'], - 'left': cookiePos['left'] + 'top': preferencePos['top'], + 'left': preferencePos['left'] }); + // Check whether the window is above the top of the viewport. + topPosition = $window.offset().top; + leftPosition = $window.offset().left; + viewportWidth = window.innerWidth; + windowWidth = $window.width(); + if ( topPosition < 0 ) { + $window.css({ + 'top': preferencePos['top'] - topPosition + }); + } + // If draggable window is off screen to the left. + if ( leftPosition < 0 && ! this.restoringAfterFullscreen ) { + + $window.css({ + 'left': preferencePos['left'] - leftPosition + }); + } + // If draggable window is off screen to the right. + if ( viewportWidth - leftPosition < 30 ) { + $window.css({ + 'left': viewportWidth - windowWidth + }); + } } - // since cookie is not page-specific, z-index needs may vary across different pages + // since preferences are not page-specific, z-index needs may vary across different pages this.updateZIndex(which); - } - else { + } else { // position window using default values windowPos = this.getOptimumPosition(which, width); if (typeof width === 'undefined') { @@ -3798,37 +3442,30 @@ var AblePlayerInstances = []; // else if there is room the left of the player, position element there // else position element beneath player - var gap, position, ableWidth, ableHeight, ableOffset, ableTop, ableLeft, - windowWidth, otherWindowWidth, zIndex; + var gap, position, ableWidth, ableOffset, ableLeft, windowWidth, otherWindowWidth; if (typeof targetWidth === 'undefined') { targetWidth = this.getDefaultWidth(targetWindow); } gap = 5; // number of pixels to preserve between Able Player objects - position = []; // position, top, left ableWidth = this.$ableDiv.width(); - ableHeight = this.$ableDiv.height(); ableOffset = this.$ableDiv.offset(); - ableTop = ableOffset.top; ableLeft = ableOffset.left; windowWidth = $(window).width(); otherWindowWidth = 0; // width of other visiable draggable windows will be added to this if (targetWindow === 'transcript') { - if (typeof this.$signWindow !== 'undefined') { - if (this.$signWindow.is(':visible')) { - otherWindowWidth = this.$signWindow.width() + gap; - } + // If placing the transcript window, check position of sign window first. + if (typeof this.$signWindow !== 'undefined' && (this.$signWindow.is(':visible'))) { + otherWindowWidth = this.$signWindow.width() + gap; } - } - else if (targetWindow === 'sign') { - if (typeof this.$transcriptArea !== 'undefined') { - if (this.$transcriptArea.is(':visible')) { - otherWindowWidth = this.$transcriptArea.width() + gap; - } + } else if (targetWindow === 'sign') { + // If placing the sign window, check position of transcript window first. + if (typeof this.$transcriptArea !== 'undefined' && (this.$transcriptArea.is(':visible'))) { + otherWindowWidth = this.$transcriptArea.width() + gap; } } if (targetWidth < (windowWidth - (ableLeft + ableWidth + gap + otherWindowWidth))) { @@ -3836,14 +3473,12 @@ var AblePlayerInstances = []; position[0] = 'absolute'; position[1] = 0; position[2] = ableWidth + otherWindowWidth + gap; - } - else if (targetWidth + gap < ableLeft) { + } else if (targetWidth + gap < ableLeft) { // there's room to the right of $ableDiv position[0] = 'absolute'; position[1] = 0; position[2] = ableLeft - targetWidth - gap; - } - else { + } else { // position element below $ableDiv position[0] = 'relative'; // no need to define top, left, or z-index @@ -3851,32 +3486,31 @@ var AblePlayerInstances = []; return position; }; - AblePlayer.prototype.injectAlert = function () { - + AblePlayer.prototype.injectAlert = function ($container) { // inject two alerts, one visible for all users and one for screen reader users only - - var top; - this.$alertBox = $('<div role="alert"></div>'); this.$alertBox.addClass('able-alert'); this.$alertBox.hide(); - this.$alertBox.appendTo(this.$ableDiv); - if (this.mediaType == 'audio') { - top = '-10'; - } - else { - // position just below top of video by default - // but this will change after video player is fully sized - // see control.js > resizePlayer() - top = '10'; - } - this.$alertBox.css({ - top: top + 'px' + + var $alertText = $( '<span></span>' ); + $alertText.appendTo(this.$alertBox); + + var $alertDismiss = $('<button type="button"></button>' ); + $alertDismiss.attr( 'aria-label', this.translate( 'dismissButton', 'Dismiss' ) ); + $alertDismiss.text( '×' ); + $alertDismiss.appendTo(this.$alertBox); + + $alertDismiss.on( 'click', function(e) { + $(this).parent('div').hide(); }); - this.$srAlertBox = $('<div role="alert"></div>'); - this.$srAlertBox.addClass('able-screenreader-alert'); - this.$srAlertBox.appendTo(this.$ableDiv); + this.$alertBox.appendTo($container); + + if ( ! this.$srAlertBox ) { + this.$srAlertBox = $('<div role="alert"></div>'); + this.$srAlertBox.addClass('able-screenreader-alert'); + this.$srAlertBox.appendTo($container); + } }; AblePlayer.prototype.injectPlaylist = function () { @@ -3896,9 +3530,8 @@ var AblePlayerInstances = []; // 'which' parameter is either 'captions', 'chapters', 'prefs', 'transcript-window' or 'sign-window' // 'tracks', if provided, is a list of tracks to be used as menu items - var thisObj, $menu, includeMenuItem, prefCats, i, $menuItem, prefCat, whichPref, - hasDefault, track, windowOptions, whichPref, whichMenu, - $thisItem, $prevItem, $nextItem; + var thisObj, $menu, includeMenuItem, i, $menuItem, prefCat, whichPref, hasDefault, track, + windowOptions, $thisItem, $prevItem, $nextItem, hasDescription, hasTranscript; thisObj = this; @@ -3916,22 +3549,26 @@ var AblePlayerInstances = []; if (which === 'prefs') { if (this.prefCats.length > 1) { for (i = 0; i < this.prefCats.length; i++) { + prefCat = this.prefCats[i]; + hasDescription = ( thisObj.hasDescTracks || thisObj.hasOpenDesc || thisObj.hasClosedDesc ) ? true : false; + hasTranscript = ( thisObj.transcriptType === null ) ? false : true; + + // If this player does not have descriptions or transcripts, do not output that option preferences. + if ( prefCat === 'descriptions' && ! hasDescription || prefCat === 'transcript' && ! hasTranscript ) { + continue; + } $menuItem = $('<li></li>',{ 'role': 'menuitem', 'tabindex': '-1' }); - prefCat = this.prefCats[i]; if (prefCat === 'captions') { - $menuItem.text(this.tt.prefMenuCaptions); - } - else if (prefCat === 'descriptions') { - $menuItem.text(this.tt.prefMenuDescriptions); - } - else if (prefCat === 'keyboard') { - $menuItem.text(this.tt.prefMenuKeyboard); - } - else if (prefCat === 'transcript') { - $menuItem.text(this.tt.prefMenuTranscript); + $menuItem.text( this.translate( 'prefMenuCaptions', 'Captions' ) ); + } else if (prefCat === 'descriptions') { + $menuItem.text( this.translate( 'prefMenuDescriptions', 'Descriptions' ) ); + } else if (prefCat === 'keyboard') { + $menuItem.text( this.translate( 'prefMenuKeyboard', 'Keyboard' ) ); + } else if (prefCat === 'transcript') { + $menuItem.text( this.translate( 'prefMenuTranscript', 'Transcript' ) ); } $menuItem.on('click',function() { whichPref = $(this).text(); @@ -3939,14 +3576,11 @@ var AblePlayerInstances = []; thisObj.setFullscreen(false); if (whichPref === thisObj.tt.prefMenuCaptions) { thisObj.captionPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuDescriptions) { + } else if (whichPref === thisObj.tt.prefMenuDescriptions) { thisObj.descPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuKeyboard) { + } else if (whichPref === thisObj.tt.prefMenuKeyboard) { thisObj.keyboardPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuTranscript) { + } else if (whichPref === thisObj.tt.prefMenuTranscript) { thisObj.transcriptPrefsDialog.show(); } thisObj.closePopups(); @@ -3955,22 +3589,19 @@ var AblePlayerInstances = []; $menu.append($menuItem); } this.$prefsButton.attr('data-prefs-popup','menu'); - } - else if (this.prefCats.length == 1) { + } else if (this.prefCats.length == 1) { // only 1 category, so don't create a popup menu. // Instead, open dialog directly when user clicks Prefs button this.$prefsButton.attr('data-prefs-popup',this.prefCats[0]); } - } - else if (which === 'captions' || which === 'chapters') { + } else if (which === 'captions' || which === 'chapters') { hasDefault = false; for (i = 0; i < tracks.length; i++) { track = tracks[i]; - if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { - includeMenuItem = false; - } - else { - includeMenuItem = true; + if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { + includeMenuItem = false; + } else { + includeMenuItem = true; } if (includeMenuItem) { $menuItem = $('<li></li>',{ @@ -3981,16 +3612,14 @@ var AblePlayerInstances = []; if (track.def && this.prefCaptions == 1) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); - } + } // Get a label using track data if (which == 'captions') { $menuItem.text(track.label); $menuItem.on('click',this.getCaptionClickFunction(track)); - } - else if (which == 'chapters') { + } else if (which == 'chapters') { $menuItem.text(this.flattenCueForCaption(track) + ' - ' + this.formatSecondsAsColonTime(track.start)); $menuItem.on('click',this.getChapterClickFunction(track.start)); } @@ -4002,31 +3631,29 @@ var AblePlayerInstances = []; $menuItem = $('<li></li>',{ 'role': 'menuitemradio', 'tabindex': '-1', - }).text(this.tt.captionsOff); + }).text( this.translate( 'captionsOff', 'Captions off' ) ); if (this.prefCaptions === 0) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); } $menuItem.on('click',this.getCaptionOffFunction()); $menu.append($menuItem); } - } - else if (which === 'transcript-window' || which === 'sign-window') { + } else if (which === 'transcript-window' || which === 'sign-window') { windowOptions = []; windowOptions.push({ 'name': 'move', - 'label': this.tt.windowMove + 'label': this.translate( 'windowMove', 'Move' ) }); windowOptions.push({ 'name': 'resize', - 'label': this.tt.windowResize + 'label': this.translate( 'windowResize', 'Resize' ) }); windowOptions.push({ 'name': 'close', - 'label': this.tt.windowClose + 'label': this.translate( 'windowClose', 'Close' ) }); for (i = 0; i < windowOptions.length; i++) { $menuItem = $('<li></li>',{ @@ -4035,7 +3662,7 @@ var AblePlayerInstances = []; 'data-choice': windowOptions[i].name }); $menuItem.text(windowOptions[i].label); - $menuItem.on('click mousedown',function(e) { + $menuItem.on('click',function(e) { e.stopPropagation(); if (typeof e.button !== 'undefined' && e.button !== 0) { // this was a mouse click (if click is triggered by keyboard, e.button is undefined) @@ -4058,61 +3685,50 @@ var AblePlayerInstances = []; if ($menu.find('li[lang=' + this.captionLang + ']')) { // a track exists for the default language. Check that item in the menu $menu.find('li[lang=' + this.captionLang + ']').attr('aria-checked','true'); - } - else { + } else { // check the last item (captions off) $menu.find('li').last().attr('aria-checked','true'); } - } - else if (which === 'chapters') { + } else if (which === 'chapters') { if ($menu.find('li:contains("' + this.defaultChapter + '")')) { $menu.find('li:contains("' + this.defaultChapter + '")').attr('aria-checked','true').addClass('able-focus'); - } - else { + } else { $menu.find('li').first().attr('aria-checked','true').addClass('able-focus'); } } // add keyboard handlers for navigating within popups $menu.on('keydown',function (e) { - - whichMenu = $(this).attr('id').split('-')[1]; + $thisItem = $(this).find('li:focus'); if ($thisItem.is(':first-child')) { // this is the first item in the menu $prevItem = $(this).find('li').last(); // wrap to bottom $nextItem = $thisItem.next(); - } - else if ($thisItem.is(':last-child')) { + } else if ($thisItem.is(':last-child')) { // this is the last Item $prevItem = $thisItem.prev(); $nextItem = $(this).find('li').first(); // wrap to top - } - else { + } else { $prevItem = $thisItem.prev(); $nextItem = $thisItem.next(); } - if (e.which === 9) { // Tab + if (e.key === 'Tab') { if (e.shiftKey) { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else { + $prevItem.trigger('focus').addClass('able-focus'); + } else { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); + $nextItem.trigger('focus').addClass('able-focus'); } - } - else if (e.which === 40 || e.which === 39) { // down or right arrow + } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - else if (e.which == 38 || e.which === 37) { // up or left arrow + $nextItem.trigger('focus').addClass('able-focus'); + } else if (e.key == 'ArrowUp' || e.key === 'ArrowLeft') { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else if (e.which === 32 || e.which === 13) { // space or enter - $thisItem.click(); - } - else if (e.which === 27) { // Escape + $prevItem.trigger('focus').addClass('able-focus'); + } else if (e.key === ' ' || e.key === 'Enter') { + $thisItem.trigger( 'click' ); + } else if (e.key === 'Escape') { $thisItem.removeClass('able-focus'); thisObj.closePopups(); e.stopPropagation; @@ -4129,7 +3745,7 @@ var AblePlayerInstances = []; if (this.chaptersPopup && this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); - this.$chaptersButton.attr('aria-expanded','false').focus(); + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); } if (this.captionsPopup && this.captionsPopup.is(':visible')) { this.captionsPopup.hide(); @@ -4151,15 +3767,15 @@ var AblePlayerInstances = []; },100); } if (this.$volumeSlider && this.$volumeSlider.is(':visible')) { - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeButton.attr('aria-expanded', 'false').focus(); + this.$volumeSlider.hide().attr('aria-hidden','true'); + this.$volumeButton.attr('aria-expanded', 'false').trigger('focus'); } if (this.$transcriptPopup && this.$transcriptPopup.is(':visible')) { - this.hidingPopup = true; + this.hidingPopup = true; this.$transcriptPopup.hide(); // restore menu items to their original state this.$transcriptPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$transcriptPopupButton.attr('aria-expanded','false').focus(); + this.$transcriptPopupButton.attr('aria-expanded','false').trigger('focus'); // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; @@ -4169,7 +3785,7 @@ var AblePlayerInstances = []; this.$signPopup.hide(); // restore menu items to their original state this.$signPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$signPopupButton.attr('aria-expanded','false').focus(); + this.$signPopupButton.attr('aria-expanded','false').trigger('focus'); } }; @@ -4179,10 +3795,7 @@ var AblePlayerInstances = []; // parameter 'which' is passed if refreshing content of an existing popup ('captions' or 'chapters') // If which is undefined, automatically setup 'captions', 'chapters', and 'prefs' popups // However, only setup 'transcript-window' and 'sign-window' popups if passed as value of which - var popups, thisObj, hasDefault, i, j, - tracks, track, $trackButton, $trackLabel, - radioName, radioId, $menu, $menuItem, - prefCats, prefCat, prefLabel; + var popups, thisObj, i, tracks; popups = []; if (typeof which === 'undefined') { @@ -4209,33 +3822,26 @@ var AblePlayerInstances = []; thisObj = this; for (var i=0; i<popups.length; i++) { var popup = popups[i]; - hasDefault = false; if (popup == 'prefs') { this.prefsPopup = this.createPopup('prefs'); - } - else if (popup == 'captions') { + } else if (popup == 'captions') { if (typeof this.captionsPopup === 'undefined' || !this.captionsPopup) { this.captionsPopup = this.createPopup('captions',this.captions); } - } - else if (popup == 'chapters') { + } else if (popup == 'chapters') { if (this.selectedChapters) { tracks = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { tracks = this.chapters[0].cues; - } - else { + } else { tracks = []; } if (typeof this.chaptersPopup === 'undefined' || !this.chaptersPopup) { this.chaptersPopup = this.createPopup('chapters',tracks); } - } - else if (popup == 'transcript-window') { + } else if (popup == 'transcript-window') { return this.createPopup('transcript-window'); - } - else if (popup == 'sign-window') { + } else if (popup == 'sign-window') { return this.createPopup('sign-window'); } } @@ -4244,101 +3850,99 @@ var AblePlayerInstances = []; AblePlayer.prototype.provideFallback = function() { - // provide fallback in case of a critical error building the player - // to test, set data-test-fallback to either of the following values: - // 1 = emulate failure to build Able Player - // 2 = emulate browser that doesn't support HTML5 media + // provide fallback in case of a critical error building the player + // to test, set data-test-fallback to either of the following values: + // 1 = emulate failure to build Able Player + // 2 = emulate browser that doesn't support HTML5 media var i, $fallback; - if (this.usingFallback) { - // fallback has already been implemented. + if (this.usingFallback) { + // fallback has already been implemented. // stopgap to prevent this function from executing twice on the same media element - return; - } - else { - this.usingFallback = true; + return; + } else { + this.usingFallback = true; } - if (!this.testFallback) { - // this is not a test. - // an actual error has resulted in this function being called. - // use scenario 1 - this.testFallback = 1; + if (!this.testFallback) { + // this is not a test. + // an actual error has resulted in this function being called. + // use scenario 1 + this.testFallback = 1; } - if (typeof this.$media === 'undefined') { - // this function has been called prior to initialize.js > reinitialize() + if (typeof this.$media === 'undefined') { + // this function has been called prior to initialize.js > reinitialize() // before doing anything, need to create the jQuery media object - this.$media = $(this.media); - } - - // get/assign an id for the media element - if (this.$media.attr('id')) { - this.mediaId = this.$media.attr('id'); + this.$media = $(this.media); } - else { + + // get/assign an id for the media element + if (this.$media.attr('id')) { + this.mediaId = this.$media.attr('id'); + } else { this.mediaId = 'media' + Math.floor(Math.random() 1000000000).toString(); - } - - // check whether element has nested fallback content - this.hasFallback = false; - if (this.$media.children().length) { - i = 0; - while (i < this.$media.children().length && !this.hasFallback) { - if (!(this.$media.children()[i].tagName === 'SOURCE' || - this.$media.children()[i].tagName === 'TRACK')) { - // this element is something other than <source> or <track> - this.hasFallback = true; + } + + // check whether element has nested fallback content + this.hasFallback = false; + if (this.$media.children().length) { + i = 0; + while (i < this.$media.children().length && !this.hasFallback) { + if (!(this.$media.children()[i].tagName === 'SOURCE' || + this.$media.children()[i].tagName === 'TRACK')) { + // this element is something other than <source> or <track> + this.hasFallback = true; } - i++; + i++; } } - if (!this.hasFallback) { - // the HTML code does not include any nested fallback content - // inject our own - // NOTE: this message is not translated, since fallback may be needed - // due to an error loading the translation file - // This will only be needed on very rare occasions, so English is ok. - $fallback = $('<p>').text('Media player unavailable.'); - this.$media.append($fallback); + if (!this.hasFallback) { + // the HTML code does not include any nested fallback content + // inject our own + // NOTE: this message is not translated, since fallback may be needed + // due to an error loading the translation file + // This will only be needed on very rare occasions, so English is ok. + $fallback = $('<p>').text('Media player unavailable.'); + this.$media.append($fallback); } - // get height and width attributes, if present + // get height and width attributes, if present // and add them to a style attribute - if (this.$media.attr('width')) { - this.$media.css('width',this.$media.attr('width') + 'px'); + if (this.$media.attr('width')) { + this.$media.css('width',this.$media.attr('width') + 'px'); } - if (this.$media.attr('height')) { - this.$media.css('height',this.$media.attr('height') + 'px'); + if (this.$media.attr('height')) { + this.$media.css('height',this.$media.attr('height') + 'px'); } - // Remove data-able-player attribute - this.$media.removeAttr('data-able-player'); + // Remove data-able-player attribute + this.$media.removeAttr('data-able-player'); // Add controls attribute (so browser will add its own controls) - this.$media.prop('controls',true); + this.$media.prop('controls',true); - if (this.testFallback == 2) { + if (this.testFallback == 2) { - // emulate browser failure to support HTML5 media by changing the media tag name - // browsers should display the supported content that's nested inside + // emulate browser failure to support HTML5 media by changing the media tag name + // browsers should display the supported content that's nested inside $(this.$media).replaceWith($('<foobar id="foobar-' + this.mediaId + '">')); - this.$newFallbackElement = $('#foobar-' + this.mediaId); - - // append all children from the original media - if (this.$media.children().length) { - i = this.$media.children().length - 1; - while (i >= 0) { - this.$newFallbackElement.prepend($(this.$media.children()[i])); - i--; + this.$newFallbackElement = $('#foobar-' + this.mediaId); + + // append all children from the original media + if (this.$media.children().length) { + i = this.$media.children().length - 1; + while (i >= 0) { + this.$newFallbackElement.prepend($(this.$media.children()[i])); + i--; } } - if (!this.hasFallback) { + if (!this.hasFallback) { // inject our own fallback content, defined above this.$newFallbackElement.append($fallback); } } - return; + return; }; AblePlayer.prototype.calculateControlLayout = function () { @@ -4352,7 +3956,7 @@ var AblePlayerInstances = []; // 3 = Bottom right (legacy skin only) // Each key contains an array of control names to put in that section. - var controlLayout, volumeSupported, playbackSupported, totalButtonWidth, numA11yButtons; + var controlLayout, playbackSupported, numA11yButtons; controlLayout = []; controlLayout[0] = []; @@ -4375,8 +3979,7 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[0].push('previous'); controlLayout[0].push('next'); - } - else if (this.skin == '2020') { + } else { controlLayout[0].push('previous'); controlLayout[0].push('next'); } @@ -4388,8 +3991,7 @@ var AblePlayerInstances = []; controlLayout[2].push('slower'); controlLayout[2].push('faster'); } - } - else { + } else { playbackSupported = false; } @@ -4398,8 +4000,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('captions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('captions'); } } @@ -4407,28 +4008,25 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('sign'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('sign'); } } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { if (this.hasOpenDesc || this.hasClosedDesc) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('descriptions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('descriptions'); } } } - if (this.transcriptType === 'popup' && !(this.hideTranscriptButton)) { + if (this.transcriptType !== null && !(this.hideTranscriptButton)) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('transcript'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('transcript'); } } @@ -4436,8 +4034,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('chapters'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('chapters'); } } @@ -4454,32 +4051,26 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[3].push('preferences'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('preferences'); } - if (this.mediaType === 'video' && this.allowFullscreen) { + if (this.mediaType === 'video' && this.allowFullscreen && this.nativeFullscreenSupported() ) { if (this.skin === 'legacy') { controlLayout[3].push('fullscreen'); - } - else { + } else { controlLayout[1].push('fullscreen'); } } if (this.browserSupportsVolume()) { - volumeSupported = true; // defined in case we decide to move volume button elsewhere this.volumeButton = 'volume-' + this.getVolumeName(this.volume); if (this.skin === 'legacy') { controlLayout[1].push('volume'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('volume'); } - } - else { - volumeSupported = false; + } else { this.volume = false; } return controlLayout; @@ -4495,12 +4086,10 @@ var AblePlayerInstances = []; // some controls are aligned on the left, and others on the right var thisObj, baseSliderWidth, controlLayout, numSections, - i, j, k, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, $pipeImg, - svgData, svgPath, control, - $buttonLabel, $buttonImg, buttonImgSrc, buttonTitle, $newButton, iconClass, buttonIcon, - buttonUse, buttonText, position, buttonHeight, buttonWidth, buttonSide, controllerWidth, - tooltipId, tooltipY, tooltipX, tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, - captionLabel, popupMenuId; + i, j, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, control, + buttonTitle, $newButton, buttonText, position, buttonHeight, + buttonWidth, buttonSide, controllerWidth, tooltipId, tooltipY, tooltipX, + tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, captionLabel, popupMenuId; thisObj = this; @@ -4518,33 +4107,36 @@ var AblePlayerInstances = []; }).hide(); this.$controllerDiv.append(this.$tooltipDiv); - if (this.skin == '2020') { + if (this.skin == '2020') { // add a full-width seek bar $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); this.$controllerDiv.append($sliderDiv); - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); } + // add a full-width seek bar + let $controlRow = $('<div class="able-control-row"></div>'); + this.$controllerDiv.append($controlRow); + for (i = 0; i < numSections; i++) { controls = controlLayout[i]; if ((i % 2) === 0) { // even keys on the left $controllerSpan = $('<div>',{ 'class': 'able-left-controls' }); - } - else { // odd keys on the right + } else { // odd keys on the right $controllerSpan = $('<div>',{ 'class': 'able-right-controls' }); } - this.$controllerDiv.append($controllerSpan); + $controlRow.append($controllerSpan); for (j=0; j<controls.length; j++) { control = controls[j]; if (control === 'seek') { $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); $controllerSpan.append($sliderDiv); if (typeof this.duration === 'undefined' || this.duration === 0) { // set arbitrary starting duration, and change it when duration is known @@ -4552,53 +4144,17 @@ var AblePlayerInstances = []; // also set elapsed to 0 this.elapsed = 0; } - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - else if (control === 'pipe') { + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + } else if (control === 'pipe') { $pipe = $('<span>', { 'tabindex': '-1', - 'aria-hidden': 'true' + 'aria-hidden': 'true', + 'class': 'able-pipe', }); - if (this.iconType === 'font') { - $pipe.addClass('icon-pipe'); - } - else { - $pipeImg = $('<img>', { - src: this.rootPath + 'button-icons/' + this.iconColor + '/pipe.png', - alt: '', - role: 'presentation' - }); - $pipe.append($pipeImg); - } + $pipe.append('|'); $controllerSpan.append($pipe); - } - else { + } else { // this control is a button - if (control === 'volume') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + this.volumeButton + '.png'; - } - else if (control === 'fullscreen') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/fullscreen-expand.png'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/turtle.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/slower.png'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/rabbit.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/faster.png'; - } - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + control + '.png'; - } buttonTitle = this.getButtonTitle(control); // icomoon documentation recommends the following markup for screen readers: @@ -4616,7 +4172,6 @@ var AblePlayerInstances = []; $newButton = $('<div>',{ 'role': 'button', 'tabindex': '0', - 'aria-label': buttonTitle, 'class': 'able-button-handler-' + control }); @@ -4630,16 +4185,14 @@ var AblePlayerInstances = []; 'aria-controls': popupMenuId, 'aria-haspopup': 'menu', 'aria-expanded': 'false' - }); - } - else if (this.prefCats.length === 1) { + }); + } else if (this.prefCats.length === 1) { // Prefs button will trigger a dialog $newButton.attr({ 'aria-haspopup': 'dialog' }); } - } - else if (control === 'volume') { + } else if (control === 'volume') { popupMenuId = this.mediaId + '-volume-slider'; // volume slider popup is not a menu or a dialog // therefore, using aria-expanded rather than aria-haspopup to communicate properties/state @@ -4655,130 +4208,23 @@ var AblePlayerInstances = []; } } } - if (this.iconType === 'font') { - if (control === 'volume') { - iconClass = 'icon-' + this.volumeButton; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-turtle'; - } - else { - iconClass = 'icon-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-rabbit'; - } - else { - iconClass = 'icon-faster'; - } - } - else { - iconClass = 'icon-' + control; - } - buttonIcon = $('<span>',{ - 'class': iconClass, - 'aria-hidden': 'true' - }); - $newButton.append(buttonIcon); + var getControl = control; + if ( control === 'faster' && this.speedIcons === 'animals' ) { + getControl = 'rabbit'; } - else if (this.iconType === 'svg') { - - /* - // Unused option for adding SVG: - // Use <use> element to link to button-icons/able-icons.svg - // Advantage: SVG file can be cached - // Disadvantage: Not supported by Safari 6, IE 6-11, or Edge 12 - // Instead, adding <svg> element within each <button> - if (control === 'volume') { - iconClass = 'svg-' + this.volumeButton; - } - else if (control === 'fullscreen') { - iconClass = 'svg-fullscreen-expand'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-turtle'; - } - else { - iconClass = 'svg-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-rabbit'; - } - else { - iconClass = 'svg-faster'; - } - } - else { - iconClass = 'svg-' + control; - } - buttonIcon = $('<svg>',{ - 'class': iconClass - }); - buttonUse = $('<use>',{ - 'xlink:href': this.rootPath + 'button-icons/able-icons.svg#' + iconClass - }); - buttonIcon.append(buttonUse); - / - var svgData; - if (control === 'volume') { - svgData = this.getSvgData(this.volumeButton); - } - else if (control === 'fullscreen') { - svgData = this.getSvgData('fullscreen-expand'); - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('turtle'); - } - else { - svgData = this.getSvgData('slower'); - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('rabbit'); - } - else { - svgData = this.getSvgData('faster'); - } - } - else { - svgData = this.getSvgData(control); - } - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - $newButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - $newButton.html($newButton.html()); + if ( control === 'slower' && this.speedIcons === 'animals' ) { + getControl = 'turtle'; } - else { - // use images - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); + if ( control === 'volume' ) { + this.getIcon( $newButton, this.volumeButton ); + } else { + if ( 'fullscreen' === getControl ) { + getControl = ( this.fullscreen ) ? 'fullscreen-collapse' : 'fullscreen-expand'; + } + this.getIcon( $newButton, getControl ); } - // add the visibly-hidden label for screen readers that don't support aria-label on the button - var $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(buttonTitle); - $newButton.append($buttonLabel); + + this.setText($newButton,buttonTitle); // add an event listener that displays a tooltip on mouseenter or focus $newButton.on('mouseenter focus',function(e) { @@ -4786,73 +4232,63 @@ var AblePlayerInstances = []; // since the same tooltip div is used, it's location just changes. clearTimeout(tooltipTimerId); - var buttonText = $(this).attr('aria-label'); + buttonText = $(this).attr('aria-label'); // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); + position = $(this).position(); + buttonHeight = $(this).height(); + buttonWidth = $(this).width(); // position() is expressed using top and left (of button); // add right (of button) too, for convenience - var controllerWidth = thisObj.$controllerDiv.width(); + controllerWidth = thisObj.$controllerDiv.width(); position.right = controllerWidth - position.left - buttonWidth; - // The following formula positions tooltip above the button - // var tooltipY = position.top - buttonHeight - 15; - - // The following formula positions tooltip below the button + // The following formula positions tooltip below the button // which allows the tooltip to be hoverable as per WCAG 2.x SC 1.4.13 - // without obstructing the seekbar - var tooltipY = position.top + buttonHeight + 5; + // without obstructing the seekbar + tooltipY = position.top + buttonHeight + 5; if ($(this).parent().hasClass('able-right-controls')) { // this control is on the right side - var buttonSide = 'right'; - } - else { + buttonSide = 'right'; + } else { // this control is on the left side - var buttonSide = 'left'; + buttonSide = 'left'; } // populate tooltip, then calculate its width before showing it - var tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); + tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); // center the tooltip horizontally over the button if (buttonSide == 'left') { - var tooltipX = position.left - tooltipWidth/2; + tooltipX = position.left - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: tooltipX + 'px', right: '', top: tooltipY + 'px' }; - } - else { - var tooltipX = position.right - tooltipWidth/2; + } else { + tooltipX = position.right - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: '', right: tooltipX + 'px', top: tooltipY + 'px' }; } - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); + tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { - // hide tooltip (original line of code) - // AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - - // The above line was replaced with the following block - // in order to meet WCAG 2.x SC 1.4.13 // (keep the tooltip visible if user hovers over it) - // This causes unwanted side effects if tooltips are positioned above the buttons - // as the persistent tooltip obstructs the seekbar, - // blocking users from being able to move a pointer from a button to the seekbar - // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons + // This causes unwanted side effects if tooltips are positioned above the buttons + // as the persistent tooltip obstructs the seekbar, + // blocking users from being able to move a pointer from a button to the seekbar + // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons // clear existing timeout before reassigning variable clearTimeout(tooltipTimerId); @@ -4869,29 +4305,27 @@ var AblePlayerInstances = []; thisObj.$tooltipDiv.on('mouseleave blur', function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }); - - }); + + }); }); if (control === 'captions') { if (!this.prefCaptions || this.prefCaptions !== 1) { // captions are available, but user has them turned off if (this.captions.length > 1) { - captionLabel = this.tt.captions; - } - else { - captionLabel = this.tt.showCaptions; + captionLabel = this.translate( 'captions', 'Captions' ); + } else { + captionLabel = this.translate( 'showCaptions', 'Show captions' ); } $newButton.addClass('buttonOff').attr('title',captionLabel); $newButton.attr('aria-pressed', 'false'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { if (!this.prefDesc || this.prefDesc !== 1) { // user prefer non-audio described version // Therefore, load media without description // Description can be toggled on later with this button - $newButton.addClass('buttonOff').attr('title',this.tt.turnOnDescriptions); + $newButton.addClass('buttonOff').attr( 'title', this.translate( 'turnOnDescriptions', 'Turn on descriptions' ) ); } } @@ -4900,59 +4334,48 @@ var AblePlayerInstances = []; // create variables of buttons that are referenced throughout the AblePlayer object if (control === 'play') { this.$playpauseButton = $newButton; - } - else if (control == 'previous') { + } else if (control == 'previous') { this.$prevButton = $newButton; // if player is being rebuilt because user clicked the Prev button // return focus to that (newly built) button if (this.buttonWithFocus == 'previous') { - this.$prevButton.focus(); + this.$prevButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control == 'next') { + } else if (control == 'next') { this.$nextButton = $newButton; // if player is being rebuilt because user clicked the Next button // return focus to that (newly built) button if (this.buttonWithFocus == 'next') { - this.$nextButton.focus(); + this.$nextButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control === 'captions') { + } else if (control === 'captions') { this.$ccButton = $newButton; - } - else if (control === 'sign') { + } else if (control === 'sign') { this.$signButton = $newButton; // gray out sign button if sign language window is not active if (!(this.$signWindow.is(':visible'))) { this.$signButton.addClass('buttonOff'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { this.$descButton = $newButton; // button will be enabled or disabled in description.js > initDescription() - } - else if (control === 'mute') { + } else if (control === 'mute') { this.$muteButton = $newButton; - } - else if (control === 'transcript') { + } else if (control === 'transcript') { this.$transcriptButton = $newButton; // gray out transcript button if transcript is not active if (!(this.$transcriptDiv.is(':visible'))) { - this.$transcriptButton.addClass('buttonOff').attr('title',this.tt.showTranscript); + this.$transcriptButton.addClass('buttonOff').attr( 'title', this.translate( 'showTranscript', 'Show transcript' ) ); } - } - else if (control === 'fullscreen') { + } else if (control === 'fullscreen') { this.$fullscreenButton = $newButton; - } - else if (control === 'chapters') { + } else if (control === 'chapters') { this.$chaptersButton = $newButton; - } - else if (control === 'preferences') { + } else if (control === 'preferences') { this.$prefsButton = $newButton; - } - else if (control === 'volume') { + } else if (control === 'volume') { this.$volumeButton = $newButton; } } @@ -4982,191 +4405,7 @@ var AblePlayerInstances = []; } // Update state-based display of controls. - this.refreshControls('init'); - }; - - AblePlayer.prototype.useSvg = function () { - - // Modified from IcoMoon.io svgxuse - // @copyright Copyright (c) 2016 IcoMoon.io - // @license Licensed under MIT license - // See https://github.com/Keyamoon/svgxuse - // @version 1.1.16 - - var cache = Object.create(null); // holds xhr objects to prevent multiple requests - var checkUseElems, - tid; // timeout id - var debouncedCheck = function () { - clearTimeout(tid); - tid = setTimeout(checkUseElems, 100); - }; - var unobserveChanges = function () { - return; - }; - var observeChanges = function () { - var observer; - window.addEventListener('resize', debouncedCheck, false); - window.addEventListener('orientationchange', debouncedCheck, false); - if (window.MutationObserver) { - observer = new MutationObserver(debouncedCheck); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - attributes: true - }); - unobserveChanges = function () { - try { - observer.disconnect(); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - } catch (ignore) {} - }; - } - else { - document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); - unobserveChanges = function () { - document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - }; - } - }; - var xlinkNS = 'http://www.w3.org/1999/xlink'; - checkUseElems = function () { - var base, - bcr, - fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. - hash, - i, - Request, - inProgressCount = 0, - isHidden, - url, - uses, - xhr; - if (window.XMLHttpRequest) { - Request = new XMLHttpRequest(); - if (Request.withCredentials !== undefined) { - Request = XMLHttpRequest; - } - else { - Request = XDomainRequest || undefined; - } - } - if (Request === undefined) { - return; - } - function observeIfDone() { - // If done with making changes, start watching for chagnes in DOM again - inProgressCount -= 1; - if (inProgressCount === 0) { // if all xhrs were resolved - observeChanges(); // watch for changes to DOM - } - } - function attrUpdateFunc(spec) { - return function () { - if (cache[spec.base] !== true) { - spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); - } - }; - } - function onloadFunc(xhr) { - return function () { - var body = document.body; - var x = document.createElement('x'); - var svg; - xhr.onload = null; - x.innerHTML = xhr.responseText; - svg = x.getElementsByTagName('svg')[0]; - if (svg) { - svg.setAttribute('aria-hidden', 'true'); - svg.style.position = 'absolute'; - svg.style.width = 0; - svg.style.height = 0; - svg.style.overflow = 'hidden'; - body.insertBefore(svg, body.firstChild); - } - observeIfDone(); - }; - } - function onErrorTimeout(xhr) { - return function () { - xhr.onerror = null; - xhr.ontimeout = null; - observeIfDone(); - }; - } - unobserveChanges(); // stop watching for changes to DOM - // find all use elements - uses = document.getElementsByTagName('use'); - for (i = 0; i < uses.length; i += 1) { - try { - bcr = uses[i].getBoundingClientRect(); - } catch (ignore) { - // failed to get bounding rectangle of the use element - bcr = false; - } - url = uses[i].getAttributeNS(xlinkNS, 'href').split('#'); - base = url[0]; - hash = url[1]; - isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; - if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { - // the use element is empty - // if there is a reference to an external SVG, try to fetch it - // use the optional fallback URL if there is no reference to an external SVG - if (fallback && !base.length && hash && !document.getElementById(hash)) { - base = fallback; - } - if (base.length) { - // schedule updating xlink:href - xhr = cache[base]; - if (xhr !== true) { - // true signifies that prepending the SVG was not required - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - if (xhr === undefined) { - xhr = new Request(); - cache[base] = xhr; - xhr.onload = onloadFunc(xhr); - xhr.onerror = onErrorTimeout(xhr); - xhr.ontimeout = onErrorTimeout(xhr); - xhr.open('GET', base); - xhr.send(); - inProgressCount += 1; - } - } - } - else { - if (!isHidden) { - if (cache[base] === undefined) { - // remember this URL if the use element was not empty and no request was sent - cache[base] = true; - } - else if (cache[base].onload) { - // if it turns out that prepending the SVG is not necessary, - // abort the in-progress xhr. - cache[base].abort(); - cache[base].onload = undefined; - cache[base] = true; - } - } - } - } - uses = ''; - inProgressCount += 1; - observeIfDone(); - }; -/ - // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. - window.addEventListener('load', function winLoad() { - window.removeEventListener('load', winLoad, false); // to prevent memory leaks - tid = setTimeout(checkUseElems, 0); - }, false); -/ + this.refreshControls(); }; AblePlayer.prototype.cuePlaylistItem = function(sourceIndex) { @@ -5175,19 +4414,7 @@ var AblePlayerInstances = []; // NOTE: Swapping source for audio description is handled elsewhere; // see description.js > swapDescription() - / - // Decided against preventing a reload of the current item in the playlist. - // If it's clickable, users should be able to click on it and expect something to happen. - // Leaving here though in case it's determined to be desirable. - if (sourceIndex === this.playlistItemIndex) { - // user has requested the item that's currently playing - // just ignore the request - return; - } - this.playlistItemIndex = sourceIndex; - / - - var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, sources, s, i, $newSource, nowPlayingSpan; + var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, nowPlayingSpan; var thisObj = this; @@ -5195,9 +4422,8 @@ var AblePlayerInstances = []; if (this.initializing) { // this is the first track - user hasn't pressed play yet // do nothing. - } - else { - if (this.playerCreated) { + } else { + if (this.playerCreated) { // remove the old this.deletePlayer('playlist'); } @@ -5206,19 +4432,18 @@ var AblePlayerInstances = []; // set swappingSrc; needs to be true within recreatePlayer(), called below this.swappingSrc = true; - // if a new playlist item is being requested, and playback has already started, - // it should be ok to play automatically, regardless of how it was requested - if (this.startedPlaying) { - this.okToPlay = true; - } - else { - this.okToPlay = false; + // if a new playlist item is being requested, and playback has already started, + // it should be ok to play automatically, regardless of how it was requested + if (this.startedPlaying) { + this.okToPlay = true; + } else { + this.okToPlay = false; } - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; // Determine appropriate player to play this media $newItem = this.$playlist.eq(sourceIndex); @@ -5228,16 +4453,14 @@ var AblePlayerInstances = []; this.youTubeDescId = this.getYouTubeId($newItem.attr('data-youtube-desc-id')); } newPlayer = 'youtube'; - } - else if (this.hasAttr($newItem,'data-vimeo-id')) { + } else if (this.hasAttr($newItem,'data-vimeo-id')) { this.vimeoId = this.getVimeoId($newItem.attr('data-vimeo-id')); if (this.hasAttr($newItem,'data-vimeo-desc-id')) { this.vimeoDescId = this.getVimeoId($newItem.attr('data-vimeo-desc-id')); } newPlayer = 'vimeo'; - } - else { - newPlayer = 'html5'; + } else { + newPlayer = 'html5'; } if (newPlayer === 'youtube') { if (prevPlayer === 'html5') { @@ -5247,9 +4470,8 @@ var AblePlayerInstances = []; } this.$media.hide(); } - } - else { - // the new player is not youtube + } else { + // the new player is not youtube this.youTubeId = false; if (prevPlayer === 'youtube') { // unhide the media element @@ -5276,21 +4498,42 @@ var AblePlayerInstances = []; var $sourceSpans = $newItem.children('span.able-source'); if ($sourceSpans.length) { $sourceSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src')) { - // this is the only required attribute - var $newSource = $('<source>',{ - 'src': $(this).attr('data-src') - }); - if (thisObj.hasAttr($(this),'data-type')) { - $newSource.attr('type',$(this).attr('data-type')); - } - if (thisObj.hasAttr($(this),'data-desc-src')) { - $newSource.attr('data-desc-src',$(this).attr('data-desc-src')); - } - if (thisObj.hasAttr($(this),'data-sign-src')) { - $newSource.attr('data-sign-src',$(this).attr('data-sign-src')); + const $this = $(this); + + // Check if the required data-src attribute exists + if (thisObj.hasAttr($this, "data-src")) { + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <source> element with the sanitized src + const $newSource = $("<source>", { src: sanitizedSrc }); + + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-type", + "data-desc-src", + "data-sign-src", + ]; + + // Process optional attributes + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + const attrValue = $this.attr(attr); // Get the attribute value + const sanitizedValue = DOMPurify.sanitize(attrValue); // Sanitize the value + + // If the attribute ends with "-src", validate the protocol + if (attr.endsWith("-src") && validate.isProtocolSafe(sanitizedValue)) { + $newSource.attr(attr, sanitizedValue); // Add the sanitized and validated attribute + } else if (!attr.endsWith("-src")) { + $newSource.attr(attr, sanitizedValue); // Add sanitized value for non-src attributes + } + } + }); + + // Append the new <source> element to the media object + thisObj.$media.append($newSource); } - thisObj.$media.append($newSource); } }); } @@ -5300,27 +4543,37 @@ var AblePlayerInstances = []; if ($trackSpans.length) { // for each element in $trackSpans, create a new <track> element $trackSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src') && - thisObj.hasAttr($(this),'data-kind') && - thisObj.hasAttr($(this),'data-srclang')) { + const $this = $(this); + if (thisObj.hasAttr($this, "data-src") && thisObj.hasAttr($this, "data-kind") && thisObj.hasAttr($this, "data-srclang")) { // all required attributes are present - var $newTrack = $('<track>',{ - 'src': $(this).attr('data-src'), - 'kind': $(this).attr('data-kind'), - 'srclang': $(this).attr('data-srclang') - }); - if (thisObj.hasAttr($(this),'data-label')) { - $newTrack.attr('label',$(this).attr('data-label')); - } - if (thisObj.hasAttr($(this),'data-desc')) { - $newTrack.attr('data-desc',$(this).attr('data-desc')); + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <track> element with the sanitized src + const $newTrack = $("<track>", { + src: sanitizedSrc, + kind: $this.attr("data-kind"), + srclang: $this.attr("data-srclang"), + }); + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-label", + "data-desc", + "data-default", + ]; + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + $newTrack.attr(attr, DOMPurify.sanitize($this.attr(attr))); + } + }); + // Append the new <track> element to the media object + thisObj.$media.append($newTrack); } - thisObj.$media.append($newTrack); } }); } - itemTitle = $newItem.text(); + itemTitle = DOMPurify.sanitize( $newItem.text() ); if (this.hasAttr($newItem,'lang')) { itemLang = $newItem.attr('lang'); } @@ -5328,18 +4581,18 @@ var AblePlayerInstances = []; this.$sources = this.$media.find('source'); // recreate player, informed by new attributes and track elements - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; + return; } - this.recreatePlayer().then(function() { + this.recreatePlayer().then(function() { // update playlist to indicate which item is playing thisObj.$playlist.removeClass('able-current') .children('button').removeAttr('aria-current'); thisObj.$playlist.eq(sourceIndex).addClass('able-current') - .children('button').attr('aria-current','true'); - + .children('button').attr('aria-current','true'); + // update Now Playing div if (thisObj.showNowPlaying === true) { if (typeof thisObj.$nowPlayingDiv !== 'undefined') { @@ -5355,56 +4608,48 @@ var AblePlayerInstances = []; // if thisObj.swappingSrc is true, media will autoplay when ready if (thisObj.initializing) { // this is the first track - user hasn't pressed play yet thisObj.swappingSrc = false; - } - else { + } else { if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } - } - else if (thisObj.player === 'youtube') { - thisObj.okToPlay = true; + } else if (thisObj.player === 'youtube') { + thisObj.okToPlay = true; } } thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed - }); + thisObj.playerCreated = true; // remains true until browser is refreshed + }); }; AblePlayer.prototype.deletePlayer = function(context) { - // remove player components that need to be rebuilt - // after swapping media sources that have different durations - // or explicitly declared data-desc attributes + // remove player components that need to be rebuilt + // after swapping media sources that have different durations + // or explicitly declared data-desc attributes - // Context is one of the following: - // playlist - called from cuePlaylistItem() + // Context is one of the following: + // playlist - called from cuePlaylistItem() // swap-desc-html - called from swapDescription with this.player == 'html' - // swap-desc-youtube - called from swapDescription with this.player == 'youtube' - // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' + // swap-desc-youtube - called from swapDescription with this.player == 'youtube' + // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' - if (this.player === 'youtube' && this.youTubePlayer) { - this.youTubePlayer.destroy(); + if (this.player === 'youtube' && this.youTubePlayer) { + this.youTubePlayer.destroy(); } - if (this.player === 'vimeo' && this.vimeoPlayer) { - this.vimeoPlayer.destroy(); + if (this.player === 'vimeo' && this.vimeoPlayer) { + this.vimeoPlayer.destroy(); } - -/ TODO - Investigate: when is this needed? - // remove previous video's attributes and child elements from media element - this.$media.removeAttr('poster width height'); - this.$media.empty(); -*/ // Empty elements that will be rebuilt this.$controllerDiv.empty(); // this.$statusBarDiv.empty(); // this.$timer.empty(); this.$elapsedTimeContainer.empty().text('0:00'); // span.able-elapsedTime this.$durationContainer.empty(); // span.able-duration - + // Remove popup windows and modal dialogs; these too will be rebuilt if (this.$signWindow) { this.$signWindow.remove(); @@ -5413,125 +4658,81 @@ var AblePlayerInstances = []; this.$transcriptArea.remove(); } $('.able-modal-dialog').remove(); - - // Remove caption and description wrappers + + // Remove caption and description wrappers if (this.$captionsWrapper) { this.$captionsWrapper.remove(); } - if (this.$descDiv) { - this.$descDiv.remove(); + if (this.$descDiv) { + this.$descDiv.remove(); } - + // reset key variables this.hasCaptions = false; this.hasChapters = false; - this.hasDescTracks = false; + this.hasDescTracks = false; this.hasOpenDesc = false; - this.hasClosedDesc = false; + this.hasClosedDesc = false; this.captionsPopup = null; this.chaptersPopup = null; this.transcriptType = null; - this.playerDeleted = true; // will reset to false in recreatePlayer() + this.playerDeleted = true; // will reset to false in recreatePlayer() }; AblePlayer.prototype.getButtonTitle = function(control) { if (control === 'playpause') { - return this.tt.play; - } - else if (control === 'play') { - return this.tt.play; - } - else if (control === 'pause') { - return this.tt.pause; - } - else if (control === 'restart') { - return this.tt.restart; - } - else if (control === 'previous') { - return this.tt.prevTrack; - } - else if (control === 'next') { - return this.tt.nextTrack; - } - else if (control === 'rewind') { - return this.tt.rewind; - } - else if (control === 'forward') { - return this.tt.forward; - } - else if (control === 'captions') { + return this.translate( 'play', 'Play' ); + } else if (control === 'play') { + return this.translate( 'play', 'Play' ); + } else if (control === 'pause') { + return this.translate( 'pause', 'Pause' ); + } else if (control === 'restart') { + return this.translate( 'restart', 'Restart' ); + } else if (control === 'previous') { + return this.translate( 'prevTrack', 'Previous track' ); + } else if (control === 'next') { + return this.translate( 'nextTrack', 'Next track' ); + } else if (control === 'rewind') { + return this.translate( 'rewind', 'Rewind' ); + } else if (control === 'forward') { + return this.translate( 'forward', 'Forward' ); + } else if (control === 'captions') { if (this.captions.length > 1) { - return this.tt.captions; - } - else { - if (this.captionsOn) { - return this.tt.hideCaptions; - } - else { - return this.tt.showCaptions; - } - } - } - else if (control === 'descriptions') { - if (this.descOn) { - return this.tt.turnOffDescriptions; - } - else { - return this.tt.turnOnDescriptions; - } - } - else if (control === 'transcript') { - if (this.$transcriptDiv.is(':visible')) { - return this.tt.hideTranscript; - } - else { - return this.tt.showTranscript; - } - } - else if (control === 'chapters') { - return this.tt.chapters; - } - else if (control === 'sign') { - return this.tt.sign; - } - else if (control === 'volume') { - return this.tt.volume; - } - else if (control === 'faster') { - return this.tt.faster; - } - else if (control === 'slower') { - return this.tt.slower; - } - else if (control === 'preferences') { - return this.tt.preferences; - } - else if (control === 'help') { - // return this.tt.help; - } - else if (control === 'fullscreen') { - if (!this.fullscreen) { - return this.tt.enterFullscreen; - } - else { - return this.tt.exitFullscreen; - } - } - else { + return this.translate( 'captions', 'Captions' ); + } else { + return (this.captionsOn) ? this.translate( 'hideCaptions', 'Hide captions' ) : this.translate( 'showCaptions', 'Show captions' ); + } + } else if (control === 'descriptions') { + return (this.descOn) ? this.translate( 'turnOffDescriptions', 'Turn off descriptions' ) : this.translate( 'turnOnDescriptions', 'Turn on descriptions' ); + } else if (control === 'transcript') { + return (this.$transcriptDiv.is(':visible')) ? this.translate( 'hideTranscript', 'Hide transcript' ) : this.translate( 'showTranscript', 'Show transcript' ); + } else if (control === 'chapters') { + return this.translate( 'chapters', 'Chapters' ); + } else if (control === 'sign') { + return this.translate( 'sign', 'Sign language' ); + } else if (control === 'volume') { + return this.translate( 'volume', 'Volume' ); + } else if (control === 'faster') { + return this.translate( 'faster', 'Faster' ); + } else if (control === 'slower') { + return this.translate( 'slower', 'Slower' ); + } else if (control === 'preferences') { + return this.translate( 'preferences', 'Preferences' ); + } else if (control === 'fullscreen') { + return ( !this.fullscreen ) ? this.translate( 'enterFullScreen', 'Enter full screen' ) : this.translate( 'exitFullScreen', 'Exit full screen' ); + } else { // there should be no other controls, but just in case: // return the name of the control with first letter in upper case // ultimately will need to get a translated label from this.tt if (this.debug) { } - return control.charAt(0).toUpperCase() + control.slice(1); + return this.capitalizeFirstLetter( control ); } }; - - })(jQuery); /** @@ -5551,11 +4752,16 @@ var preProcessing = { * @returns {string} - The VTT content with processed tags. / transformCSSClasses: function (vttContent) { + // This function should only be passed one cue at a time. + // Throw an error if the string checked is more than 1000 characters. + if ( vttContent.length > 1000 ) { + throw new Error( "Input too long" ); + } return vttContent.replace( /<(v|c|b|i|u|lang|ruby)\.([\w\.]+)([^>])>/g, function (_, tag, cssClasses, otherAttrs) { - var classAttr = cssClasses.split(".").join(" "); - return "<" + tag + ' class="' + classAttr + '"' + otherAttrs + ">"; + var classAttr = cssClasses.replace(/\./g, " "); + return `<${tag} class="${classAttr}"${otherAttrs}>`; } ); }, @@ -5576,10 +4782,14 @@ var preProcessing = { }, /** - * Transforms <v> tags by adding a title attribute with the concatenated text and retaining other attributes. + * Transforms <v> tags by extracting any non-attribute text as a `title` attribute, + * retains existing attributes (except class), and preserves the class attribute if present. + * Example: <v John class="foo" data-x="y"> becomes <v title="John" data-x="y" class="foo"> + * + * @function * @memberof preProcessing - * @param {string} content - The content with processed <lang> tags. - * @returns {string} - The content with <v> tags transformed. + * @param {string} content - The string content containing <v> tags to process. + * @returns {string} The content with <v> tags transformed to include a title attribute and preserved attributes. / transformVTags: function (content) { return content.replace(/<v\s+([^>]?)>/g, function (_, tagAttributes) { @@ -5638,24 +4848,33 @@ var postProcessing = { return vttContent.replace( /<c class="([\w\s]+)">/g, function (_, classNames) { - var classes = classNames.split(" ").join("."); + var classes = classNames.replace(/ /g, "."); return "<c." + classes + ">"; } ); }, /** - * Post-processes <v> tags by converting class attributes to dot-separated class names. + * * Post-processes <v> tags by converting class attributes, no matter where found in the attribute order, to dot-separated class names. + * For example, <v class="foo bar" title="John"> becomes <v.foo.bar title="John">. + * Removes the class attribute and appends other attributes after the class names. + * + * @function * @memberof postProcessing * @param {string} vttContent - The VTT content to be processed. * @returns {string} - The VTT content with processed <v> tags. / postprocessVTag: function (vttContent) { return vttContent.replace( - /<v class="([\w\s]+)"([^>])>/g, - function (_, classNames, otherAttrs) { - var classes = classNames.split(" ").join("."); - return "<v." + classes + otherAttrs + ">"; + /<v([^>])class="([\w\s]+)"([^>])>/g, + function (_, beforeClass, classNames, afterClass) { + var classes = classNames.trim().split(/\s+/).join("."); + // Rebuild the tag: <v.{classes}{other attributes}> + // Remove class="..." from attributes + var attrs = (beforeClass + afterClass) + .replace(/\s*class="[\w\s]+"/, "") + .trim(); + return "<v." + classes + (attrs ? " " + attrs : "") + ">"; } ); }, @@ -5677,7 +4896,7 @@ var postProcessing = { }; /** - * Preprocesses, sanitizes and post-processes VTT content. + * Preprocesses, sanitizes and post-processes VTT content as well as other utility functions. * @namespace validate / var validate = { @@ -5708,8 +4927,9 @@ var validate = { var processedLangTags = postProcessing.postprocessLangTag(processedVTags); var arrowReplaced = processedLangTags.replace(/-->/g, "-->"); + var timestampTagReplaced = arrowReplaced.replace(/<([\d:.]+)>/g, '<$1>'); - var finalContent = arrowReplaced.replace( + var finalContent = timestampTagReplaced.replace( /<\/v>/g, function (match, offset) { return originalVttContent.indexOf(match, offset) !== -1 ? match : ""; @@ -5744,6 +4964,17 @@ var validate = { return validate.postProcessVttContent(sanitizedVttContent, vttContent); }, + // Utility validation functions + isProtocolSafe: function (url) { + //creates a new URL object for analysis to check if the protocol is http or https + //returns true if there is a match false otherwise + try { + const parsedUrl = new URL(url, window.location.origin); // Resolve relative URLs + return ["http:", "https:"].includes(parsedUrl.protocol); // Allow only HTTP and HTTPS + } catch (e) { + return false; // Invalid URL + } + }, }; // Export the object for use in other files @@ -5756,22 +4987,13 @@ if (typeof module !== "undefined" && module.exports) { // Loads files referenced in track elements, and performs appropriate setup. // For example, captions and text descriptions. // This will be called whenever the player is recreated. - // Added in v2.2.23: Also handles YouTube caption tracks AblePlayer.prototype.setupTracks = function () { - var thisObj, - deferred, - promise, - loadingPromises, - loadingPromise, - i, - tracks, - track, - kind; + var thisObj, deferred, promise, loadingPromises, loadingPromise, i, tracks, track, kind; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); loadingPromises = []; @@ -5793,20 +5015,17 @@ if (typeof module !== "undefined" && module.exports) { } for (i = 0; i < tracks.length; i++) { track = tracks[i]; - kind = track.kind; + kind = ( track.kind ) ? track.kind : 'subtitles'; if (!track.src) { if (thisObj.usingYouTubeCaptions || thisObj.usingVimeoCaptions) { // skip all the hullabaloo and go straight to setupCaptions thisObj.setupCaptions(track); - } else { - // Nothing to load! - // Skip this track; move on to next i } continue; } - var trackSrc = track.src; - loadingPromise = this.loadTextObject(track.src); // resolves with src, trackText + var trackSrc = track.src; + loadingPromise = this.loadTextObject(trackSrc); loadingPromises.push( loadingPromise.catch(function (src) { @@ -5814,35 +5033,31 @@ if (typeof module !== "undefined" && module.exports) { ); loadingPromise.then( (function (track, kind) { - var trackSrc = track.src; + trackSrc = track.src; var trackLang = track.language; var trackLabel = track.label; var trackDesc = track.desc; - return function (trackSrc, trackText) { - // these are the two vars returned from loadTextObject - - var trackContents = trackText; - var cues = thisObj.parseWebVTT(trackSrc, trackContents).cues; + return function (data) { + var cues = thisObj.parseWebVTT(data).cues; if (thisObj.hasVts) { - // setupVtsTracks() is in vts.js thisObj.setupVtsTracks( kind, trackLang, trackDesc, trackLabel, trackSrc, - trackContents + data.text ); } - if (kind === "captions" || kind === "subtitles") { + if (kind === 'captions' || kind === 'subtitles') { thisObj.setupCaptions(track, cues); - } else if (kind === "descriptions") { + } else if (kind === 'descriptions') { thisObj.setupDescriptions(track, cues); - } else if (kind === "chapters") { + } else if (kind === 'chapters') { thisObj.setupChapters(track, cues); - } else if (kind === "metadata") { - thisObj.setupMetadata(track, cues); + } else if (kind === 'metadata') { + thisObj.setupMetadata(cues); } }; })(track, kind) @@ -5868,30 +5083,16 @@ if (typeof module !== "undefined" && module.exports) { // cues - array with startTime, endTime, and payload // desc - Boolean, true if track includes a data-desc attribute - var thisObj, - deferred, - promise, - captionTracks, - altCaptionTracks, - trackLang, - trackLabel, - isDefault, - forDesc, - hasDefault, - hasTrackInDefLang, - trackFound, - i, - j, - capLabel, - inserted; + var thisObj, deferred, promise, trackLang, trackLabel, isDefault, forDesc, + hasDefault, hasTrackInDefLang, trackFound, i; thisObj = this; hasDefault = false; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.$tracks = this.$media.find("track"); + this.$tracks = this.$media.find('track'); this.tracks = []; // only includes tracks that do NOT have data-desc this.altTracks = []; // only includes tracks that DO have data-desc @@ -5908,31 +5109,30 @@ if (typeof module !== "undefined" && module.exports) { this.usingYouTubeCaptions = false; // create object from HTML5 tracks this.$tracks.each(function (index, element) { - if ($(this).attr("kind") === "captions") { + if ($(this).attr('kind') === 'captions') { thisObj.hasCaptionsTrack = true; - } else if ($(this).attr("kind") === "descriptions") { + } else if ($(this).attr('kind') === 'descriptions') { thisObj.hasClosedDesc = true; } // srcLang should always be included with <track>, but HTML5 spec doesn't require it // if not provided, assume track is the same language as the default player language - if ($(this).attr("srclang")) { - trackLang = $(this).attr("srclang"); + if ($(this).attr('srclang')) { + trackLang = $(this).attr('srclang'); } else { trackLang = thisObj.lang; } - if ($(this).attr("label")) { - trackLabel = $(this).attr("label"); + if ($(this).attr('label')) { + trackLabel = $(this).attr('label'); } else { trackLabel = thisObj.getLanguageName(trackLang); } - if (typeof $(this).attr("default") !== "undefined" && !hasDefault) { + if (typeof $(this).attr('default') !== 'undefined' && !hasDefault) { isDefault = true; hasDefault = true; } else if (trackLang === thisObj.lang) { // this track is in the default lang of the player - // save this for later // if there is no other default track specified // this will be the default hasTrackInDefLang = true; @@ -5953,8 +5153,8 @@ if (typeof module !== "undefined" && module.exports) { } if (forDesc) { thisObj.altTracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -5962,8 +5162,8 @@ if (typeof module !== "undefined" && module.exports) { }); } else { thisObj.tracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -5979,16 +5179,16 @@ if (typeof module !== "undefined" && module.exports) { trackFound = false; i = 0; while (i < thisObj.tracks.length && !trackFound) { - if (thisObj.tracks[i]["language"] === thisObj.lang) { - thisObj.tracks[i]["def"] = true; + if (thisObj.tracks[i]['language'] === thisObj.lang) { + thisObj.tracks[i]['def'] = true; trackFound = true; } i++; } } else { // use the first track - thisObj.tracks[0]["def"] = true; - thisObj.captionLang = thisObj.tracks[0]["language"]; + thisObj.tracks[0]['def'] = true; + thisObj.captionLang = thisObj.tracks[0]['language']; } } // Remove 'default' attribute from all <track> elements @@ -6002,8 +5202,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.$tracks.length || !this.hasCaptionsTrack) { // this media has no track elements // if this is a youtube or vimeo player, check there for captions/subtitles - if (this.player === "youtube") { - this.getYouTubeCaptionTracks(this.youTubeId).then(function () { + if (this.player === 'youtube') { + this.getYouTubeCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingYouTubeCaptions = true; if (thisObj.$captionsWrapper) { @@ -6012,7 +5212,7 @@ if (typeof module !== "undefined" && module.exports) { } deferred.resolve(); }); - } else if (this.player === "vimeo") { + } else if (this.player === 'vimeo') { this.getVimeoCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingVimeoCaptions = true; @@ -6040,7 +5240,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setupCaptions = function (track, cues) { // Setup player for display of captions (one track at a time) - var thisObj, captions, inserted, i, capLabel; + var inserted, i, capLabel; // Insert track into captions array // in its proper alphabetical sequence by label @@ -6106,8 +5306,8 @@ if (typeof module !== "undefined" && module.exports) { this.captionsOn = false; } } - if (this.mediaType === "audio" && this.captionsOn) { - this.$captionsContainer.removeClass("captions-off"); + if (this.mediaType === 'audio' && this.captionsOn) { + this.$captionsContainer.removeClass('captions-off'); } if ( @@ -6117,17 +5317,17 @@ if (typeof module !== "undefined" && module.exports) { ) { // captionsWrapper either doesn't exist, or exists in an orphaned state // Either way, it needs to be rebuilt... - this.$captionsDiv = $("<div>", { + this.$captionsDiv = $('<div>', { class: "able-captions", }); - this.$captionsWrapper = $("<div>", { - class: "able-captions-wrapper", - "aria-hidden": "true", + this.$captionsWrapper = $('<div>', { + class: 'able-captions-wrapper', + 'aria-hidden': 'true', }).hide(); - if (this.prefCaptionsPosition === "below") { - this.$captionsWrapper.addClass("able-captions-below"); + if (this.prefCaptionsPosition === 'below') { + this.$captionsWrapper.addClass('able-captions-below'); } else { - this.$captionsWrapper.addClass("able-captions-overlay"); + this.$captionsWrapper.addClass('able-captions-overlay'); } this.$captionsWrapper.append(this.$captionsDiv); this.$captionsContainer.append(this.$captionsWrapper); @@ -6158,19 +5358,19 @@ if (typeof module !== "undefined" && module.exports) { }); }; - AblePlayer.prototype.setupMetadata = function (track, cues, trackDesc) { - if (this.metaType === "text") { + AblePlayer.prototype.setupMetadata = function (cues) { + if (this.metaType === 'text') { // Metadata is only supported if data-meta-div is provided // The player does not display metadata internally if (this.metaDiv) { - if ($("#" + this.metaDiv)) { + if ($('#' + this.metaDiv)) { // container exists - this.$metaDiv = $("#" + this.metaDiv); + this.$metaDiv = $('#' + this.metaDiv); this.hasMeta = true; this.meta = cues; } } - } else if (this.metaType === "selector") { + } else if (this.metaType === 'selector') { this.hasMeta = true; this.visibleSelectors = []; this.meta = cues; @@ -6187,76 +5387,76 @@ if (typeof module !== "undefined" && module.exports) { / var deferred, promise, thisObj, $tempDiv; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; // create a temp div for holding data - $tempDiv = $("<div>", { - style: "display:none", + $tempDiv = $('<div>', { + style: 'display:none', }); // Fetch the content manually so it can be sanitized - $.ajax({ - url: src, - dataType: "text", - success: function (data) { - // Sanitize the fetched content - var sanitizedTrackText = validate.sanitizeVttContent(data); - - // Load the sanitized content into the $tempDiv - $tempDiv.html(sanitizedTrackText); - - // Resolve the promise with the sanitized content - deferred.resolve(src, sanitizedTrackText); - - $tempDiv.remove(); - }, - error: function (req, status, error) { - if (thisObj.debug) { - - } - deferred.reject(src); - $tempDiv.remove(); - }, - }); + fetch(src) + .then( response => { + + return response.text(); + }) + .then( vtt => { + // Split the input on double line breaks to handle each cue individually. + var preParsed = vtt.split(/\r?\n\s\r?\n/); + var lines = '', line; + + preParsed.forEach((l) => { + // Sanitize each line. + line = validate.sanitizeVttContent(l); + lines += line + "\n\n"; + }); + // Load the sanitized content into the $tempDiv + $tempDiv.html(lines); + // Resolve the promise with the sanitized content + let data = { 'src': src, 'text': lines }; + deferred.resolve(data); + $tempDiv.remove(); + }) + .catch( error => { + if (thisObj.debug) { + + } + deferred.reject(src); + $tempDiv.remove(); + }); return promise; }; })(jQuery); - (function ($) { + AblePlayer.prototype.initYouTubePlayer = function () { - var thisObj, deferred, promise, youTubeId, googleApiPromise, json; + var thisObj, deferred, promise, youTubeId; thisObj = this; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.youTubePlayerReady = false; + this.youTubePlayerReady = false; // if a described version is available && user prefers desription // init player using the described version - if (this.youTubeDescId && this.prefDesc) { - youTubeId = this.youTubeDescId; - } - else { - youTubeId = this.youTubeId; - } + youTubeId = (this.youTubeDescId && this.prefDesc) ? this.youTubeDescId : this.youTubeId; + this.activeYouTubeId = youTubeId; if (AblePlayer.youTubeIframeAPIReady) { // Script already loaded and ready. thisObj.finalizeYoutubeInit().then(function() { deferred.resolve(); }); - } - else { + } else { // Has another player already started loading the script? If so, abort... if (!AblePlayer.loadingYouTubeIframeAPI) { - $.getScript('https://www.youtube.com/iframe_api').fail(function () { - deferred.fail(); + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + }); } @@ -6273,71 +5473,54 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.finalizeYoutubeInit = function () { // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - var deferred, promise, thisObj, containerId, ccLoadPolicy, videoDimensions, autoplay; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - thisObj = this; - containerId = this.mediaId + '_youtube'; this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // NOTE: Tried the following in place of the above in January 2016 - // because in some cases two videos were being added to the DOM - // However, once v2.2.23 was fairly stable, unable to reproduce that problem - // so maybe it's not an issue. This is preserved here temporarily, just in case it's needed... - // thisObj.$mediaContainer.html($('<div>').attr('id', containerId)); // cc_load_policy: // 0 - show captions depending on user's preference on YouTube // 1 - show captions by default, even if the user has turned them off - // IMPORTANT: This must* be set to 1 or some browsers - // fail to load any texttracks (observed in Chrome, not in Firefox) + // IMPORTANT: This must be set to 1 or some browsers + // fail to load any text tracks (observed in Chrome, not in Firefox) ccLoadPolicy = 1; - - if (this.okToPlay) { - autoplay = 1; - } - else { - autoplay = 0; - } + autoplay = (this.okToPlay) ? 1 : 0; // Documentation https://developers.google.com/youtube/player_parameters - if (typeof this.captionLang == 'undefined') { + if (typeof this.captionLang == 'undefined') { // init using the default player lang - this.captionLang = this.lang; + this.captionLang = this.lang; } this.youTubePlayer = new YT.Player(containerId, { videoId: this.activeYouTubeId, host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', playerVars: { autoplay: autoplay, - enablejsapi: 1, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: ccLoadPolicy, + controls: 0, // no controls, using our own disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, playsinline: this.playsInline, - start: this.startTime, - controls: 0, // no controls, using our own - cc_load_policy: ccLoadPolicy, - cc_lang_pref: this.captionLang, // set the caption language - hl: this.lang, // set the UI language to match Able Player - modestbranding: 1, // no YouTube logo in controller rel: 0, // when video ends, show only related videos from same channel (1 shows any) - iv_load_policy: 3 // do not show video annotations + start: this.startTime }, events: { onReady: function () { - thisObj.youTubePlayerReady = true; - if (!thisObj.playerWidth || !thisObj.playerHeight) { + thisObj.youTubePlayerReady = true; + if (!thisObj.playerWidth || !thisObj.playerHeight) { thisObj.getYouTubeDimensions(); } - if (thisObj.playerWidth && thisObj.playerHeight) { + if (thisObj.playerWidth && thisObj.playerHeight) { thisObj.youTubePlayer.setSize(thisObj.playerWidth,thisObj.playerHeight); - thisObj.$ableWrapper.css({ - 'width': thisObj.playerWidth + 'px' - }); } if (thisObj.swappingSrc) { // swap is now complete @@ -6352,30 +5535,34 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.userClickedPlaylist) { thisObj.userClickedPlaylist = false; // reset } - if (thisObj.recreatingPlayer) { + if (thisObj.recreatingPlayer) { thisObj.recreatingPlayer = false; // reset } deferred.resolve(); }, onError: function (x) { - deferred.fail(); + deferred.reject(); }, - onStateChange: function (x) { + onStateChange: function (x) { thisObj.getPlayerState().then(function(playerState) { // values of playerState: 'playing','paused','buffering','ended' if (playerState === 'playing') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.play(true); + } thisObj.playing = true; thisObj.startedPlaying = true; thisObj.paused = false; - } - else if (playerState == 'ended') { + } else if (playerState == 'ended') { thisObj.onMediaComplete(); - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } if (thisObj.stoppingYouTube && playerState === 'paused') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.pause(true); + } if (typeof thisObj.$posterImg !== 'undefined') { thisObj.$posterImg.show(); } @@ -6386,13 +5573,17 @@ if (typeof module !== "undefined" && module.exports) { } }); // If caption tracks are hosted locally, but are also available on YouTube, - // we need to turn them off on YouTube or there will be redundant captions - // This is the most reliable event on which to unload the caption module - if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { - if (thisObj.youTubePlayer.getOptions('captions')) { + // we need to turn them off on YouTube or there will be redundant captions + // This is the most reliable event on which to unload the caption module + if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { + if (thisObj.youTubePlayer.getOptions('captions')) { thisObj.youTubePlayer.unloadModule('captions'); } - } + } + }, + onApiChange: function() { + // getDuration() can be fetched during API change event. + thisObj.duration = thisObj.youTubePlayer.getDuration(); }, onPlaybackQualityChange: function () { // do something @@ -6403,85 +5594,73 @@ if (typeof module !== "undefined" && module.exports) { // remove the media element, since YouTube replaces that with its own element in an iframe // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() this.$media.remove(); - } + } return promise; }; AblePlayer.prototype.getYouTubeDimensions = function (youTubeContainerId) { - // The YouTube iframe API does not have a getSize() of equivalent method - // so, need to get dimensions from YouTube's iframe + // The YouTube iframe API does not have a getSize() of equivalent method + // so, need to get dimensions from YouTube's iframe + var $iframe, width, height; - var $iframe, width, height; - - $iframe = this.$ableWrapper.find('iframe'); + $iframe = this.$ableWrapper.find('iframe'); if (typeof $iframe !== 'undefined') { - if ($iframe.prop('width')) { - width = $iframe.prop('width'); - if ($iframe.prop('height')) { + if ($iframe.prop('width')) { + width = $iframe.prop('width'); + if ($iframe.prop('height')) { height = $iframe.prop('height'); - this.resizePlayer(width,height); + this.resizePlayer(width,height); } } } }; - AblePlayer.prototype.getYouTubeCaptionTracks = function (youTubeId) { - - // get data via YouTube IFrame Player API, and push data to this.tracks & this.captions - // NOTE: Caption tracks are not available through the IFrame Player API - // until AFTER the video has started playing. - // Therefore, this function plays the video briefly in order to load the captions module - // then stops the video and collects the data needed to build the cc menu - // This is stupid, but seemingly unavoidable. - // Caption tracks could be obtained through the YouTube Data API - // but this required authors to have a Google API key, - // which would complicate Able Player installation + /** + * Get data from the YouTube iFrame API. Pushes data into `this.tracks` and `this.captions`. + * Initiates play to trigger loading the captions module, then stops and collects data. + * + * @returns {Promise} promise + / + AblePlayer.prototype.getYouTubeCaptionTracks = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - - var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack; + var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack, apiTriggered = false; thisObj = this; - - if (!this.youTubePlayer.getOption('captions','tracklist')) { - - // no tracks were found, probably because the captions module hasn't loaded - // play video briefly (required in order to load the captions module) - // and after the apiChange event is triggered, try again to retreive tracks - this.youTubePlayer.addEventListener('onApiChange',function(x) { - - // getDuration() also requires video to play briefly - // so, let's set that while we're here - thisObj.duration = thisObj.youTubePlayer.getDuration(); - - if (thisObj.loadingYouTubeCaptions) { - // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once - ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); - if (!thisObj.okToPlay) { - // Don't stopVideo() - that cancels loading - // Just pause - // No need to seekTo(0) - so little time has passed it isn't noticeable to the user - thisObj.youTubePlayer.pauseVideo(); - } - if (ytTracks && ytTracks.length) { + if (!this.youTubePlayer.getOption('captions','tracklist') ) { + // no tracks were found, probably because the captions module hasn't loaded + // play video briefly (required to load the captions module) + // and after the apiChange event is triggered, try again to retrieve tracks + this.youTubePlayer.addEventListener('onApiChange',function() { + apiTriggered = true; + // getDuration() also requires video to play briefly + // so, let's set that while we're here + thisObj.duration = thisObj.youTubePlayer.getDuration(); + + if (thisObj.loadingYouTubeCaptions) { + // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once + ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); + if ( ! thisObj.okToPlay ) { + // Don't stopVideo() - that cancels loading, just pause. + // No need to seekTo(0) - the time passed isn't noticeable to the user + thisObj.youTubePlayer.pauseVideo(); + } + if (ytTracks && ytTracks.length) { // Step through ytTracks and add them to global tracks array - // Note: Unlike YouTube Data API, the IFrame Player API only returns - // tracks that are published, and does NOT include ASR captions - // So, no additional filtering is required + // Note: Unlike YouTube Data API, the IFrame Player API only returns + // tracks that are published, and does NOT include ASR captions + // So, no additional filtering is required for (i=0; i < ytTracks.length; i++) { - trackLang = ytTracks[i].languageCode; + trackLang = ytTracks[i].languageCode; trackLabel = ytTracks[i].languageName; // displayName and languageName seem to always have the same value - isDefaultTrack = false; - if (typeof thisObj.captionLang !== 'undefined') { - if (trackLang === thisObj.captionLang) { - isDefaultTrack = true; - } - } - else if (typeof thisObj.lang !== 'undefined') { + isDefaultTrack = false; + if (typeof thisObj.captionLang !== 'undefined' && (trackLang === thisObj.captionLang) ) { + isDefaultTrack = true; + } else if (typeof thisObj.lang !== 'undefined') { if (trackLang === thisObj.lang) { - isDefaultTrack = true; + isDefaultTrack = true; } } thisObj.tracks.push({ @@ -6495,103 +5674,97 @@ if (typeof module !== "undefined" && module.exports) { 'label': trackLabel, 'def': isDefaultTrack, 'cues': null - }); + }); } thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - } - else { - // there are no YouTube captions - thisObj.usingYouTubeCaptions = false; + thisObj.setupPopups('captions'); + } else { + // there are no YouTube captions + thisObj.usingYouTubeCaptions = false; thisObj.hasCaptions = false; } - thisObj.loadingYouTubeCaptions = false; - if (thisObj.okToPlay) { + thisObj.loadingYouTubeCaptions = false; + if (thisObj.okToPlay) { thisObj.youTubePlayer.playVideo(); } } - if (thisObj.captionLangPending) { - // user selected a new caption language prior to playback starting - // set it now + if (thisObj.captionLangPending) { + // user selected a new caption language prior to playback starting + // set it now thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLangPending}); - thisObj.captionLangPending = null; + thisObj.captionLangPending = null; } - if (typeof thisObj.prefCaptionsSize !== 'undefined') { - // set the default caption size - // this doesn't work until the captions module is loaded + if (typeof thisObj.prefCaptionsSize !== 'undefined') { + // set the default caption size + // this doesn't work until the captions module is loaded thisObj.youTubePlayer.setOption('captions','fontSize',thisObj.translatePrefs('size',thisObj.prefCaptionsSize,'youtube')); } deferred.resolve(); }); - // Trigger the above event listener by briefly playing the video - this.loadingYouTubeCaptions = true; - this.youTubePlayer.playVideo(); + // Trigger the above event listener by briefly playing the video + this.loadingYouTubeCaptions = true; + this.youTubePlayer.playVideo(); + // If onApiChange has not been triggered, the captions module is not loading. + setTimeout(() => { + if ( ! apiTriggered ) { + setTimeout(() => { + // If a second passes without loading captions, assume there are none. + thisObj.youTubePlayer.pauseVideo(); + deferred.resolve(); + }, 500); + } + },500); } return promise; }; - AblePlayer.prototype.getYouTubeTimedTextUrl = function (youTubeId, trackName, trackLang) { - - // return URL for retrieving WebVTT source via YouTube's timedtext API - // Note: This API seems to be undocumented, and could break anytime - // UPDATE: Google removed this API on November 10, 2021 - // This function is no longer called, but is preserved here for reference - var url = 'https://www.youtube.com/api/timedtext?fmt=vtt'; - url += '&v=' + youTubeId; - url += '&lang=' + trackLang; - // if track has a value in the name field, it's required* in the URL - if (trackName !== '') { - url += '&name=' + trackName; - } - return url; - }; - AblePlayer.prototype.getYouTubePosterUrl = function (youTubeId, width) { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 - - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; + // return a URL for retrieving a YouTube poster image + // supported values of width: 120, 320, 480, 640, 1280, 1920. + var url = 'https://img.youtube.com/vi/' + youTubeId; + if (width == '120') { + // default (small) thumbnail, 120 x 90 + return url + '/default.jpg'; + } else if (width == '320') { + // medium quality thumbnail, 320 x 180 + return url + '/mqdefault.jpg'; + } else if (width == '480') { + // high quality thumbnail, 480 x 360 + return url + '/hqdefault.jpg'; + } else if (width == '640') { + // standard definition poster image, 640 x 480 + return url + '/sddefault.jpg'; + } else if (width == '1280') { + // standard definition poster image, 640 x 480 + return url + '/hq720.jpg'; + } else if ( width == '1920' ) { + // standard definition poster image, 640 x 480 + return url + '/maxresdefault.jpg'; + } + return false; }; AblePlayer.prototype.getYouTubeId = function (url) { // return a YouTube ID, extracted from a full YouTube URL - // Supported URL patterns (with http or https): - // https://youtu.be/xxx - // https://www.youtube.com/watch?v=xxx - // https://www.youtube.com/embed/xxx - - // in all supported patterns, the id is the last 11 characters - var idStartPos, id; - - if (url.indexOf('youtu') !== -1) { - // this is a full Youtube URL - url = url.trim(); - idStartPos = url.length - 11; - id = url.substring(idStartPos); - return id; - } - else { - return url; + // Supported URL patterns: + // http|s://youtu.be/xxx + // http|s://www.youtube.com/watch?v=xxx + // http|s://www.youtube.com/embed/xxx + + // in all supported patterns, the id is the last 11 characters + var idStartPos, id; + + if (url.indexOf('youtu') !== -1) { + // this is a full Youtube URL + url = url.trim(); + idStartPos = url.length - 11; + id = url.substring(idStartPos); + return id; + } else { + return url; } }; @@ -6601,13 +5774,12 @@ if (typeof module !== "undefined" && module.exports) { // Events: - // startTracking(event, position) - // tracking(event, position) - // stopTracking(event, position) + // - startTracking(event, position) + // - tracking(event, position) + // - stopTracking(event, position) - window. AccessibleSlider = function(mediaType, div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { + window.AccessibleSlider = function(div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { - // mediaType is either 'audio' or 'video' // div is the host element around which the slider will be built // orientation is either 'horizontal' or 'vertical' // length is the width or height of the slider, depending on orientation @@ -6649,8 +5821,7 @@ if (typeof module !== "undefined" && module.exports) { if (initialState === 'visible') { this.seekHead.attr('tabindex', '0'); - } - else { + } else { this.seekHead.attr('tabindex', '-1'); } // Since head is focusable, it gets the aria roles/titles. @@ -6689,8 +5860,7 @@ if (typeof module !== "undefined" && module.exports) { if (orientation === 'horizontal') { this.wrapperDiv.width(length); this.loadedDiv.width(0); - } - else { + } else { this.wrapperDiv.height(length); this.loadedDiv.height(0); } @@ -6714,26 +5884,22 @@ if (typeof module !== "undefined" && module.exports) { if (e.type === 'mouseenter' || e.type === 'focus') { thisObj.overHead = true; - } - else if (e.type === 'mouseleave' || e.type === 'blur') { + } else if (e.type === 'mouseleave' || e.type === 'blur') { thisObj.overHead = false; if (!thisObj.overBody && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' || e.type === 'touchmove') { + } else if (e.type === 'mousemove' || e.type === 'touchmove') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' || e.type === 'touchstart') { + } else if (e.type === 'mousedown' || e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(thisObj.seekHead.offset() + (thisObj.seekHead.width() / 2))); if (!thisObj.bodyDiv.is(':focus')) { thisObj.bodyDiv.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } @@ -6747,7 +5913,12 @@ if (typeof module !== "undefined" && module.exports) { this.bodyDiv.on( 'mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend', function (e) { + // Don't trigger move on right click. + if ( e.button == 2 && e.type == 'mousedown' ) { + return; + } coords = thisObj.pointerEventToXY(e); + let keyPressed = e.key; if (e.type === 'mouseenter') { thisObj.overBody = true; @@ -6755,15 +5926,13 @@ if (typeof module !== "undefined" && module.exports) { x: coords.x, y: coords.y }; - } - else if (e.type === 'mouseleave') { + } else if (e.type === 'mouseleave') { thisObj.overBody = false; thisObj.overBodyMousePos = null; if (!thisObj.overHead && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' || e.type === 'touchmove') { + } else if (e.type === 'mousemove' || e.type === 'touchmove') { thisObj.overBodyMousePos = { x: coords.x, y: coords.y @@ -6771,52 +5940,36 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' || e.type === 'touchstart') { + } else if (e.type === 'mousedown' || e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(coords.x)); thisObj.trackHeadAtPageX(coords.x); if (!thisObj.seekHead.is(':focus')) { thisObj.seekHead.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'keydown') { - // Home - if (e.which === 36) { + } else if (e.type === 'keydown') { + if (e.key === 'Home') { thisObj.trackImmediatelyTo(0); - } - // End - else if (e.which === 35) { + } else if (e.key === 'End') { thisObj.trackImmediatelyTo(thisObj.duration); - } - // Left arrow or down arrow - else if (e.which === 37 || e.which === 40) { + } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { thisObj.arrowKeyDown(-1); - } - // Right arrow or up arrow - else if (e.which === 39 || e.which === 38) { + } else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { thisObj.arrowKeyDown(1); - } - // Page up - else if (e.which === 33 && bigInterval > 0) { + } else if (e.key === 'PageUp' && bigInterval > 0) { thisObj.arrowKeyDown(bigInterval); - } - // Page down - else if (e.which === 34 && bigInterval > 0) { + } else if (e.key === 'PageDown' && bigInterval > 0) { thisObj.arrowKeyDown(-bigInterval); - } - else { + } else { return; } e.preventDefault(); - } - else if (e.type === 'keyup') { - if (e.which >= 33 && e.which <= 40) { + } else if (e.type === 'keyup') { + if ( keyPressed === e.key ) { if (thisObj.tracking && thisObj.trackDevice === 'keyboard') { thisObj.stopTracking(thisObj.keyTrackPosition); } @@ -6838,27 +5991,7 @@ if (typeof module !== "undefined" && module.exports) { this.nextStep = 2; } this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/* - AccessibleSlider.prototype.pageUp = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { + } else { this.nextStep = 1; this.inertiaCount = 0; this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); @@ -6866,7 +5999,7 @@ if (typeof module !== "undefined" && module.exports) { this.trackHeadAtPosition(this.keyTrackPosition); } }; -/ + AccessibleSlider.prototype.pageXToPosition = function (pageX) { var offset = pageX - this.bodyDiv.offset().left; var position = this.duration (offset / this.bodyDiv.width()); @@ -6921,7 +6054,7 @@ if (typeof module !== "undefined" && module.exports) { this.updateAriaValues(position, updateLive); } - // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. + // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. AccessibleSlider.prototype.setBuffered = function (ratio) { if (!isNaN(ratio)) { this.buffered = ratio; @@ -6984,14 +6117,12 @@ if (typeof module !== "undefined" && module.exports) { ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else if (pMinutes > 0) { + } else if (pMinutes > 0) { descriptionText = pMinutes + ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else { + } else { descriptionText = pSeconds + ' ' + pSecondWord; } @@ -7023,18 +6154,15 @@ if (typeof module !== "undefined" && module.exports) { this.timeTooltip.show(); if (this.tracking) { this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)); - } - else { + } else { this.timeTooltip.text(this.positionToStr(this.position)); } this.setTooltipPosition(this.seekHead.position().left + (this.seekHead.width() / 2)); - } - else if (this.overBody && this.overBodyMousePos) { + } else if (this.overBody && this.overBodyMousePos) { this.timeTooltip.show(); this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))); this.setTooltipPosition(this.overBodyMousePos.x - this.bodyDiv.offset().left); - } - else { + } else { clearTimeout(this.timeTooltipTimeoutId); var _this = this; @@ -7054,7 +6182,7 @@ if (typeof module !== "undefined" && module.exports) { AccessibleSlider.prototype.setTooltipPosition = function (x) { this.timeTooltip.css({ left: x - (this.timeTooltip.width() / 2) - 10, - bottom: this.seekHead.height() + 10 + bottom: this.seekHead.height() }); }; @@ -7072,8 +6200,7 @@ if (typeof module !== "undefined" && module.exports) { dMinutes = '0' + dMinutes; } return dHours + ':' + dMinutes + ':' + dSeconds; - } - else { + } else { return dMinutes + ':' + dSeconds; } }; @@ -7088,8 +6215,7 @@ if (typeof module !== "undefined" && module.exports) { var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; out.x = touch.pageX; out.y = touch.pageY; - } - else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') { + } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') { out.x = e.pageX; out.y = e.pageY; } @@ -7102,19 +6228,18 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addVolumeSlider = function($div) { - // Prior to v4.4.64, we were using a custom-build vertical volunme slider - // Changed to input type="range" because it's standard and gaining more widespread support - // including screen reader support - // TODO: Improve presentation of vertical slider. That requires some CSS finesse. + // Prior to v4.4.64, we were using a custom-build vertical volunme slider + // Changed to input type="range" because it's standard and gaining more widespread support + // including screen reader support + // TODO: Improve presentation of vertical slider. That requires some CSS finesse. - var thisObj, volumeSliderId, volumeHelpId, volumePct, tickLabelsId, $tickLabels, i, $tickOption, tickLabel; + var thisObj, volumeSliderId, volumeHelpId, volumePct, volumeLabel, volumeHeight; thisObj = this; // define a few variables volumeSliderId = this.mediaId + '-volume-slider'; volumeHelpId = this.mediaId + '-volume-help'; - tickLabelsId = this.mediaId + '-volume-tick-labels'; this.$volumeSlider = $('<div>',{ 'id': volumeSliderId, @@ -7125,15 +6250,14 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-tooltip', 'role': 'tooltip' }).hide(); - this.$volumeRange = $('<input>',{ + this.$volumeRange = $('<input>',{ 'type': 'range', 'min': '0', 'max': '10', 'step': '1', - 'orient': 'vertical', // non-standard, but required for Firefox - 'aria-label': this.tt.volumeUpDown, + 'orient': 'vertical', // non-standard, but required for Firefox + 'aria-label': this.translate( 'volumeUpDown', 'Volume up down' ), 'value': this.volume - // 'list': tickLabelsId // Uncomment this to use tickLabels (see note below) }); volumePct = parseInt(thisObj.volume) / 10 * 100; this.$volumeHelp = $('<div>',{ @@ -7141,30 +6265,11 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-volume-help', 'aria-live': 'polite' }).text(volumePct + '%'); - this.$volumeButton.attr({ - 'aria-describedby': volumeHelpId - }); - $tickLabels = $('<datalist>',{ - 'id': tickLabelsId - }); - for (i = 0; i <= 10; i++) { - if (i === 0) { - tickLabel = this.tt.mute; - } - else { - tickLabel = (i * 10) + '%'; - } - $tickOption = $('<option>',{ - 'value': i, - 'label': tickLabel - }) - $tickLabels.append($tickOption); - } + volumeLabel = this.$volumeButton.attr( 'aria-label' ); + this.$volumeButton.attr( 'aria-label', volumeLabel + ' ' + volumePct + '%'); this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp); - // To add $tickLabels, use the following line of code to replace the one above - // and uncommnet the 'list' property in the definition of this.$volumeRange above - // As of Nov 2022, this feature is not supported by any screen reader - // this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp,$tickLabels); + volumeHeight = this.$volumeButton.parents( '.able-control-row' )[0]; + this.$volumeSlider.css( 'bottom', volumeHeight.offsetHeight ); $div.append(this.$volumeSlider); @@ -7176,23 +6281,20 @@ if (typeof module !== "undefined" && module.exports) { this.$volumeRange.on('input',function (e) { thisObj.handleVolumeChange($(this).val()); }); - + this.$volumeRange.on('keydown',function (e) { - // Escape key or Enter key or Tab key - if (e.which === 27 || e.which === 13 || e.which === 9) { + if (e.key === 'Escape' || e.key === 'Tab' || e.key === 'Enter') { // close popup if (thisObj.$volumeSlider.is(':visible')) { thisObj.closingVolume = true; // stopgap thisObj.hideVolumePopup(); - } - else { + } else { if (!thisObj.closingVolume) { thisObj.showVolumePopup(); } } - } - else { + } else { return; } }); @@ -7204,93 +6306,61 @@ if (typeof module !== "undefined" && module.exports) { var volumePct; volumePct = (volume/10) * 100; - // Update help text - if (this.$volumeHelp) { - this.$volumeHelp.text(volumePct + '%'); + // Update help text + if (this.$volumeHelp) { + this.$volumeHelp.text(volumePct + '%'); } - // Update the default value of the volume slider input field - // This doesn't seem to be necessary; browsers remember the previous setting during a session - // but this is a fallback in case they don't - this.$volumeRange.attr('value',volume); + // Update the default value of the volume slider input field + // This doesn't seem to be necessary; browsers remember the previous setting during a session + // but this is a fallback in case they don't + this.$volumeRange.attr('value',volume); }; AblePlayer.prototype.refreshVolumeButton = function(volume) { - var volumeName, volumePct, volumeLabel, volumeIconClass, volumeImg, newSvgData; + var volumeName, volumePct, volumeLabel; volumeName = this.getVolumeName(volume); volumePct = (volume/10) * 100; - volumeLabel = this.tt.volume + ' ' + volumePct + '%'; + volumeLabel = this.translate( 'volume', 'Volume' ) + ' ' + volumePct + '%'; - if (this.iconType === 'font') { - volumeIconClass = 'icon-volume-' + volumeName; - this.$volumeButton.find('span').first().removeClass().addClass(volumeIconClass); - this.$volumeButton.find('span.able-clipped').text(volumeLabel); - } - else if (this.iconType === 'image') { - volumeImg = this.imgPath + 'volume-' + volumeName + '.png'; - this.$volumeButton.find('img').attr('src',volumeImg); - } - else if (this.iconType === 'svg') { - if (volumeName !== 'mute') { - volumeName = 'volume-' + volumeName; - } - newSvgData = this.getSvgData(volumeName); - this.$volumeButton.find('svg').attr('viewBox',newSvgData[0]); - this.$volumeButton.find('path').attr('d',newSvgData[1]); - } + this.getIcon( this.$volumeButton, 'volume-' + volumeName ); + this.$volumeButton.attr( 'aria-label', volumeLabel ); }; AblePlayer.prototype.handleVolumeButtonClick = function() { if (this.$volumeSlider.is(':visible')) { - this.hideVolumePopup(); - } - else { + this.hideVolumePopup(); + } else { this.showVolumePopup(); } - }; - - AblePlayer.prototype.handleVolumeKeystroke = function(keycode) { - - // keycode is an ASCII key code 49-57 (numeric keys 1-9), - // keyboard shortcuts for changing volume - - var volume; - - if (keycode >= 49 && keycode <= 57) { - volume = keycode - 48; - } - else { - return false; - } + }; + AblePlayer.prototype.handleVolumeKeystroke = function(volume) { + // keyboard shortcuts for changing volume if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); } - }; + }; AblePlayer.prototype.handleVolumeChange = function(volume) { - // handle volume change using the volume input slider + // handle volume change using the volume input slider if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); @@ -7301,8 +6371,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.isMuted()) { this.setMute(false); - } - else { + } else { this.setMute(true); } }; @@ -7334,8 +6403,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { return this.media.muted; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { return this.youTubePlayer.isMuted(); } }; @@ -7347,8 +6415,7 @@ if (typeof module !== "undefined" && module.exports) { // save current volume so it can be restored after unmute this.lastVolume = this.volume; this.volume = 0; - } - else { // restore to previous volume + } else { // restore to previous volume if (typeof this.lastVolume !== 'undefined') { this.volume = this.lastVolume; } @@ -7356,16 +6423,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.media.muted = mute; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (mute) { this.youTubePlayer.mute(); - } - else { + } else { this.youTubePlayer.unMute(); } } - this.setVolume(this.volume); + this.setVolume(this.volume); this.refreshVolumeHelp(this.volume); this.refreshVolumeButton(this.volume); }; @@ -7375,29 +6440,22 @@ if (typeof module !== "undefined" && module.exports) { // volume is 1 to 10 // convert as needed depending on player - var newVolume; - + var newVolume; + this.syncSignVideo( {'volume' : 0 } ); if (this.player === 'html5') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.media.volume = newVolume; - - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.volume = 0; // always mute - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // volume is 0 to 100 - newVolume = volume * 10; + newVolume = volume * 10; this.youTubePlayer.setVolume(newVolume); this.volume = volume; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.vimeoPlayer.setVolume(newVolume).then(function() { // setVolume finished. - // could do something here // successful completion also fires a 'volumechange' event (see event.js) }); } @@ -7410,10 +6468,9 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { // uses 0 to 1 scale return this.media.volume * 10; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // uses 0 to 100 scale - if (this.youTubePlayerReady) { + if (this.youTubePlayerReady) { return this.youTubePlayer.getVolume() / 10; } } @@ -7430,14 +6487,11 @@ if (typeof module !== "undefined" && module.exports) { // returns 'mute','soft','medium', or 'loud' depending on volume level if (volume == 0) { return 'mute'; - } - else if (volume == 10) { + } else if (volume == 10) { return 'loud'; - } - else if (volume < 5) { + } else if (volume < 5) { return 'soft'; - } - else { + } else { return 'medium'; } }; @@ -7448,70 +6502,57 @@ if (typeof module !== "undefined" && module.exports) { var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"; // Based on the incredible accessible modal dialog. - window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, isModal, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) { + window.AccessibleDialog = function( modalDiv, $returnElement, title, closeButtonLabel) { this.title = title; this.closeButtonLabel = closeButtonLabel; this.focusedElementBeforeModal = $returnElement; - this.escapeHook = escapeHook; this.baseId = $(modalDiv).attr('id') || Math.floor(Math.random() * 1000000000).toString(); var thisObj = this; var modal = modalDiv; this.modal = modal; - modal.css({ - 'width': width || '50%' - }); + modal.addClass('able-modal-dialog'); - if (!fullscreen) { - var closeButton = $('<button>',{ - 'class': 'modalCloseButton', - 'title': thisObj.closeButtonLabel, - 'aria-label': thisObj.closeButtonLabel - }).text('X'); - closeButton.keydown(function (e) { - // Space key down - if (e.which === 32) { - thisObj.hide(); - } - }).click(function () { + var closeButton = $('<button>',{ + 'class': 'modalCloseButton', + 'title': thisObj.closeButtonLabel, + 'aria-label': thisObj.closeButtonLabel + }).text('×'); + closeButton.on( 'keydown', function (e) { + if (e.key === ' ') { thisObj.hide(); - }); + } + }).on( 'click', function () { + thisObj.hide(); + }); - var titleH1 = $('<h1></h1>'); - titleH1.attr('id', 'modalTitle-' + this.baseId); - titleH1.css('text-align', 'center'); - titleH1.text(title); - this.titleH1 = titleH1; + var titleH1 = $('<h1></h1>'); + titleH1.attr('id', 'modalTitle-' + this.baseId); + titleH1.text(title); + this.titleH1 = titleH1; - modal.attr({ - 'aria-labelledby': 'modalTitle-' + this.baseId, - }); - modal.prepend(titleH1); - modal.prepend(closeButton); - } + modal.attr({ + 'aria-labelledby': 'modalTitle-' + this.baseId, + }); + var modalHeader = $( '<div>', { + 'class': 'able-modal-header' + }); + modalHeader.prepend(titleH1); + modalHeader.prepend(closeButton); + modal.prepend(modalHeader); modal.attr({ 'aria-hidden': 'true', - 'role': dialogRole, + 'role': 'dialog', + 'aria-modal': 'true' }); - if (isModal) { - modal.attr('aria-modal','true'); - } - modal.keydown(function (e) { - // Escape - if (e.which === 27) { - if (thisObj.escapeHook) { - thisObj.escapeHook(e, this); - } - else { - thisObj.hide(); - e.preventDefault(); - } - } - // Tab - else if (e.which === 9) { + modal.on( 'keydown', function (e) { + if (e.key === 'Escape') { + thisObj.hide(); + e.preventDefault(); + } else if (e.key === 'Tab') { // Manually loop tab navigation inside the modal. var parts = modal.find(''); var focusable = parts.filter(focusableElementsSelector).filter(':visible'); @@ -7525,13 +6566,12 @@ if (typeof module !== "undefined" && module.exports) { if (e.shiftKey) { // If backwards from first element, go to last. if (currentIndex === 0) { - focusable.get(focusable.length - 1).focus(); + focusable.get(focusable.length - 1).trigger('focus'); e.preventDefault(); } - } - else { + } else { if (currentIndex === focusable.length - 1) { - focusable.get(0).focus(); + focusable.get(0).trigger('focus'); e.preventDefault(); } } @@ -7539,7 +6579,10 @@ if (typeof module !== "undefined" && module.exports) { e.stopPropagation(); }); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + if ( $( 'body' ).hasClass( 'able-modal-active' ) ) { + $( 'body > ') .not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); + } }; AccessibleDialog.prototype.show = function () { @@ -7555,10 +6598,12 @@ if (typeof module !== "undefined" && module.exports) { // Keep from moving focus out of dialog when clicking outside of it. overlay.on('mousedown.accessibleModal', function (e) { e.preventDefault(); + thisObj.hide(); }); } - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('inert', true); + $( 'body' ).addClass( 'able-modal-active' ); this.overlay.css('display', 'block'); this.modal.css('display', 'block'); @@ -7574,7 +6619,7 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; setTimeout(function () { // set focus on the first focusable element - thisObj.modal.find('button.modalCloseButton').first().focus(); + thisObj.modal.find('button.modalCloseButton').first().trigger('focus'); }, 300); }; @@ -7584,9 +6629,10 @@ if (typeof module !== "undefined" && module.exports) { } this.modal.css('display', 'none'); this.modal.attr('aria-hidden', 'true'); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + $('body > *').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); - this.focusedElementBeforeModal.focus(); + this.focusedElementBeforeModal.trigger('focus'); }; AccessibleDialog.prototype.getInputs = function () { @@ -7707,7 +6753,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getSecondsFromColonTime = function (timeStr) { // Converts string of form hh:mm:ss to seconds - var timeParts, hours, minutes, seconds, newTime; + var timeParts, hours, minutes, seconds; timeParts = timeStr.split(":"); if (timeParts.length === 3) { @@ -7735,6 +6781,35 @@ if (typeof module !== "undefined" && module.exports) { return Number(Math.floor(value + "e" + decimals) + "e-" + decimals); }; + AblePlayer.prototype.defer = function() { + const self = this; + const promise = new Promise((resolve, reject) => { + self.resolve = resolve; + self.reject = reject; + self.promise = () => promise; + }); + } + + AblePlayer.prototype.getScript = function( source, callback ) { + var script = document.createElement('script'); + var prior = document.getElementsByTagName('script')[0]; + script.async = 1; + + script.onload = script.onreadystatechange = function( _, isAbort ) { + if ( isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) { + script.onload = script.onreadystatechange = null; + script = undefined; + + if ( !isAbort && callback ) { + setTimeout(callback, 0); + } + } + }; + + script.src = source; + prior.parentNode.insertBefore(script, prior); + } + AblePlayer.prototype.hasAttr = function (object, attribute) { // surprisingly, there is no hasAttr() function in Jquery as of 3.2.1 // return true if object has attribute; otherwise false @@ -7752,17 +6827,6 @@ if (typeof module !== "undefined" && module.exports) { } }; - Number.isInteger = - Number.isInteger || - function (value) { - // polyfill for IE11, which doesn't otherwise support Number.isInteger - // https://stackoverflow.com/a/31720368/744281 - return ( - typeof value === "number" && - isFinite(value) && - Math.floor(value) === value - ); - }; })(jQuery); (function ($) { @@ -7775,12 +6839,12 @@ if (typeof module !== "undefined" && module.exports) { // toggles the Description button or changes a description-related preference // The following variables are applicable to delivery of description: - // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) + // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) // prefDesc == 1 if user wants description (i.e., Description button is on); else 0 // prefDescPause == 1 to pause video when description starts; else 0 // prefDescVisible == 1 to visibly show text-based description area; else 0 // prefDescMethod == either 'video' or 'text' (as of v4.0.10, prefDescMethod is always 'video') - // descMethod is the format actually used ('video' or 'text'), regardless of user preference + // descMethod is the format actually used ('video' or 'text'), regardless of user preference // hasOpenDesc == true if a described version of video is available via data-desc-src attribute // hasClosedDesc == true if a description text track is available // descOn == true if description of either type is on @@ -7789,12 +6853,12 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - if (this.mediaType === 'audio') { - deferred.resolve(); + if (this.mediaType === 'audio') { + deferred.resolve(); } // check to see if there's an open-described version of this video @@ -7803,106 +6867,78 @@ if (typeof module !== "undefined" && module.exports) { this.descFile = this.$sources.first().attr('data-desc-src'); if (typeof this.descFile !== 'undefined') { this.hasOpenDesc = true; - } - else { + } else { // there's no open-described version via data-desc-src, // but what about data-youtube-desc-src or data-vimeo-desc-src? - // if these exist, they would have been defined earlier - if (this.youTubeDescId || this.vimeoDescId) { - this.hasOpenDesc = true; - } - else { // there are no open-described versions from any source - this.hasOpenDesc = false; - } + // if these exist, they would have been defined earlier + this.hasOpenDesc = (this.youTubeDescId || this.vimeoDescId) ? true : false; } // Set this.descMethod based on media availability & user preferences + // no description is available for this video + this.descMethod = null; if (this.hasOpenDesc && this.hasClosedDesc) { - // both formats are available. User gets their preference. - if (this.prefDescMethod) { - this.descMethod = this.prefDescMethod; - } - else { - // user has no preference. Video is default. - this.descMethod = 'video'; - } - } - else if (this.hasOpenDesc) { + // both formats are available. User gets their preference. + this.descMethod = (this.prefDescMethod) ? this.prefDescMethod : 'video'; + } else if (this.hasOpenDesc) { this.descMethod = 'video'; - } - else if (this.hasClosedDesc) { + } else if (this.hasClosedDesc) { this.descMethod = 'text'; } - else { - // no description is available for this video - this.descMethod = null; - } // Set the default state of descriptions - if (this.descMethod) { - if (this.prefDesc === 1) { - this.descOn = true; - } - else if (this.prefDesc === 0) { - this.descOn = false; - } - else { - // user has no prefs. Use default state. - if (this.defaultStateDescriptions === 1) { - this.descOn = true; - } - else { - this.descOn = false; - } + this.descOn = false; + if (this.descMethod) { + if (this.prefDesc === 1) { + this.descOn = true; + } else if (this.prefDesc === 0) { + this.descOn = false; + } else { + // user has no prefs. Use default state. + this.descOn = (this.defaultStateDescriptions === 1) ? true : false; } } - else { - this.descOn = false; - } - if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc && this.descMethod === 'text') { + + // If a video has text audio descriptions, inject the description area. + if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc ) { this.injectTextDescriptionArea(); } if (this.descOn) { - if (this.descMethod === 'video') { - if (!this.usingDescribedVersion()) { - // switched from non-described to described version - this.swapDescription(); - } + if (this.descMethod === 'video' && !this.usingDescribedVersion() ) { + // switched from non-described to described version + this.swapDescription(); } if (this.hasClosedDesc) { if (this.prefDescVisible) { // make description text visible if (typeof this.$descDiv !== 'undefined') { this.$descDiv.show(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } - } - else { + } else { // keep it visible to screen readers, but hide it visibly if (typeof this.$descDiv !== 'undefined') { - this.$descDiv.addClass('able-clipped'); + this.$descDiv.addClass('able-offscreen'); } } } - } - else { // description is off. + } else { // description is off. if (this.descMethod === 'video') { // user has turned off described version of video if (this.usingDescribedVersion()) { // user was using the described verion. Swap for non-described version this.swapDescription(); } - } - else if (this.descMethod === 'text') { // user has turned off text description + } else if (this.descMethod === 'text') { // user has turned off text description // hide description div from everyone, including screen reader users if (typeof this.$descDiv !== 'undefined') { this.$descDiv.hide(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } } } deferred.resolve(); - return promise; + return promise; }; AblePlayer.prototype.usingDescribedVersion = function () { @@ -7911,116 +6947,79 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'youtube') { return (this.activeYouTubeId === this.youTubeDescId); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { return (this.activeVimeoId === this.vimeoDescId); - } - else { + } else { return (this.$sources.first().attr('data-desc-src') === this.$sources.first().attr('src')); } }; - AblePlayer.prototype.initSpeech = function (context) { - - // Some browsers &/or operating systems require a user-initiated click - // before this.synth.getVoices() will work. As of Nov 2022: - // Chrome requires a click before synth.getVoices() will work - // iOS requires a click before synth.speak() will work - // A hack to address this: Listen for ANY click, then play an inaudible utterance - // to intitiate speech synthesis - // https://stackoverflow.com/questions/32193704/js-speech-synthesis-issue-on-ios - // This function does that, and sets this.speechEnabled - // It's called with either of these contexts: - // 'init' - player is being initialized - // 'play' - user has clicked play - // 'prefs' - user has clicked prefs button - // 'desc' - it's time to announce a description! - - var thisObj = this; - - if (this.speechEnabled === null) { - - if (typeof this.synth !== 'undefined') { - // cancel any previous synth instance and reinitialize - this.synth.cancel(); - } +/** + * Initializes speech synthesis capabilities for the player. + * This method addresses browser and OS limitations that require user interaction + * before speech synthesis functions become available. It handles different contexts + * like initialization, playing media, accessing preferences, or announcing descriptions. + * @param {string} context - The context in which the function is called ('init', 'play', 'prefs', 'desc'). + / + AblePlayer.prototype.initSpeech = function (context) { + var thisObj = this; - if (window.speechSynthesis) { + // Function to attempt enabling speech synthesis + function attemptEnableSpeech() { + var greeting = new SpeechSynthesisUtterance("\x20"); + greeting.onend = function () { + thisObj.getBrowserVoices(); + if ( + (Array.isArray(thisObj.descVoices) && thisObj.descVoices.length) || + context !== "init" + ) { + thisObj.speechEnabled = true; + } + }; + thisObj.synth.speak(greeting); + } - // browser supports speech synthesis + // Function to handle the initial click and enable speech synthesis + function handleInitialClick() { + attemptEnableSpeech(); + // Once the utterance starts, remove this specific click event listener + // Ensures the event handler only runs once and cleans up after itself + $(document).off("click", handleInitialClick); + } + if (this.speechEnabled === null) { + if (window.speechSynthesis) { + // Browser supports speech synthesis this.synth = window.speechSynthesis; + this.synth.cancel(); // Cancel any ongoing speech synthesis - if (context === 'init') { - // handle a click on anything, in case the user - // clicks something before they click 'play' or 'prefs' buttons - // that would allow us to init speech before it's needed - $(document).on('click',function() { - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - } - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; - }); - - // go ahead and call get browser voices in case it might work, - // for browsers that don't require a click - this.getBrowserVoices(); - if (this.descVoices.length) { - this.speechEnabled = true; - } - } - else { // context is either 'play' or 'prefs' or 'desc' - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - }; - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; + if (context === "init") { + // Attempt to enable speech synthesis directly for browsers that don't require a click + attemptEnableSpeech(); + // For initial setup, require a user click to enable speech synthesis + // Scoping to a particular handler to avoid conflicts with other click events + $(document).on("click", handleInitialClick); + } else { + // For other contexts, attempt to enable speech synthesis directly + attemptEnableSpeech(); } - } - else { - // browser does not support speech synthesis - this.speechEnabled = false; + } else { + // Browser does not support speech synthesis + this.speechEnabled = false; } } - }; + }; AblePlayer.prototype.getBrowserVoices = function () { - - // define this.descVoices array - // includes only languages that match the language of the captions or player + + // define this.descVoices array + // includes only languages that match the language of the captions or player var voices, descLangs, voiceLang, preferredLang; - if (this.captionLang) { - preferredLang = this.captionLang.substring(0,2).toLowerCase(); - } - else { - preferredLang = this.lang.substring(0,2).toLowerCase(); - } - this.descVoices = []; + preferredLang = (this.captionLang) ? this.captionLang.substring(0,2).toLowerCase() : this.lang.substring(0,2).toLowerCase(); + + this.descVoices = []; voices = this.synth.getVoices(); descLangs = this.getDescriptionLangs(); if (voices.length > 0) { @@ -8030,9 +7029,9 @@ if (typeof module !== "undefined" && module.exports) { // match only the first 2 characters of the lang code voiceLang = voices[i].lang.substring(0,2).toLowerCase(); if (voiceLang === preferredLang && (descLangs.indexOf(voiceLang) !== -1)) { - // this voice matches preferredLang + // this voice matches preferredLang // AND there's a matching description track in this language - // Add this voice to final array + // Add this voice to final array this.descVoices.push(voices[i]); } } @@ -8063,51 +7062,44 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setDescriptionVoice = function () { - // set description voice on player init, or when user changes caption language - // Voice is determined in the following order of precedence: - // 1. User's preferred voice for this language, saved in a cookie + // set description voice on player init, or when user changes caption language + // Voice is determined in the following order of precedence: + // 1. User's preferred voice for this language, saved in preferences // 2. The first available voice in the array of available voices for this browser in this language - var cookie, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; - cookie = this.getCookie(); - if (typeof cookie.voices !== 'undefined') { - prefDescVoice = this.getPrefDescVoice(); - } - else { - prefDescVoice = null; - } - + var preferences, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; + preferences = this.getPref(); + prefDescVoice = (typeof preferences.voices !== 'undefined') ? this.getPrefDescVoice() : null; + this.getBrowserVoices(); this.rebuildDescPrefsForm(); - if (this.selectedDescriptions) { + if (this.selectedDescriptions) { descLang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - descLang = this.captionLang; - } - else { - descLang = this.lang; + } else if (this.captionLang) { + descLang = this.captionLang; + } else { + descLang = this.lang; } if (this.synth) { voices = this.synth.getVoices(); if (voices.length > 0) { - if (prefDescVoice) { - // select the language that matches prefDescVoice, if it's available - prefVoiceFound = false; + if (prefDescVoice) { + // select the language that matches prefDescVoice, if it's available + prefVoiceFound = false; for (var i=0; i<voices.length; i++) { // first, be sure voice is the correct language if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { - if (voices[i].name === prefDescVoice) { - descVoice = voices[i].name; - prefVoiceFound = true; + if (voices[i].name === prefDescVoice) { + descVoice = voices[i].name; + prefVoiceFound = true; break; } } } } - if (!prefVoiceFound) { + if (!prefVoiceFound) { // select the first language that matches the first 2 characters of the lang code for (var i=0; i<voices.length; i++) { if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { @@ -8121,10 +7113,9 @@ if (typeof module !== "undefined" && module.exports) { this.prefDescVoiceLang = descLang; // select this voice in the Description Prefs dialog if (this.$voiceSelectField) { - var selectedOption = this.$voiceSelectField.find('option[value="' + this.prefDescVoice + '"]'); this.$voiceSelectField.val(this.prefDescVoice); } - this.updateCookie('voice'); + this.updatePreferences('voice'); } } }; @@ -8138,70 +7129,66 @@ if (typeof module !== "undefined" && module.exports) { // 2. User is toggling description // (playerCreated == true) - var thisObj, i, origSrc, descSrc, srcType, newSource; + var thisObj, i, origSrc, descSrc; thisObj = this; - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; - // get element that has focus at the time swap is initiated - // after player is rebuilt, focus will return to that same element + // get element that has focus at the time swap is initiated + // after player is rebuilt, focus will return to that same element // (if it exists) - this.$focusedElement = $(':focus'); + this.$focusedElement = $(':focus'); + this.activeMedia = this.mediaId; // get current time of current source, and attempt to start new video at the same time - // whether this is possible will be determined after the new media source has loaded - // see onMediaNewSourceLoad() - if (this.elapsed > 0) { - this.swapTime = this.elapsed; - } - else { - this.swapTime = 0; + // whether this is possible will be determined after the new media source has loaded + // see onMediaNewSourceLoad() + if (this.elapsed > 0) { + this.swapTime = this.elapsed; + } else { + this.swapTime = 0; } - if (this.duration > 0) { - this.prevDuration = this.duration; + if (this.duration > 0) { + this.prevDuration = this.duration; } - // Capture current playback state, so media can resume after source is swapped - if (!this.okToPlay) { - this.okToPlay = this.playing; + // Capture current playback state, so media can resume after source is swapped + if (!this.okToPlay) { + this.okToPlay = this.playing; } if (this.descOn) { - // user has requested the described version - this.showAlert(this.tt.alertDescribedVersion); - } - else { - // user has requested the non-described version - this.showAlert(this.tt.alertNonDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); + } else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); } if (this.player === 'html5') { this.swappingSrc = true; - this.paused = true; + this.paused = true; if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-orig-src - origSrc = this.$sources[i].getAttribute('data-orig-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-orig-src') ); srcType = this.$sources[i].getAttribute('type'); if (origSrc) { this.$sources[i].setAttribute('src',origSrc); } - } - } - else { + } + } else { // the non-described version is currently playing. Swap to described. for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-desc-src (if one exists) // then store original source in a new data-orig-src attribute - origSrc = this.$sources[i].getAttribute('src'); - descSrc = this.$sources[i].getAttribute('data-desc-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('src') ); + descSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-desc-src') ); srcType = this.$sources[i].getAttribute('type'); if (descSrc) { this.$sources[i].setAttribute('src',descSrc); @@ -8210,88 +7197,77 @@ if (typeof module !== "undefined" && module.exports) { } } - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - if (this.playerCreated) { - // delete old player, then recreate it with new source & tracks - this.deletePlayer('swap-desc-html'); - this.recreatePlayer().then(function() { - if (!thisObj.loadingMedia) { + return; + } + if (this.playerCreated) { + // delete old player, then recreate it with new source & tracks + this.deletePlayer('swap-desc-html'); + this.recreatePlayer().then(function() { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } }); - } - else { + } else { // player is in the process of being created - // no need to recreate it - } - } - else if (this.player === 'youtube') { - - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeYouTubeId = this.youTubeId; - } - else { - // the non-described version is currently playing. Swap to described. - this.activeYouTubeId = this.youTubeDescId; + // no need to recreate it } + } else if (this.player === 'youtube') { + + // if the described version is currently playing, swap to non-described + this.activeYouTubeId = (this.usingDescribedVersion()) ? this.youTubeId : this.youTubeDescId; + if (typeof this.youTubePlayer !== 'undefined') { - thisObj.swappingSrc = true; + thisObj.swappingSrc = true; if (thisObj.playing) { // loadVideoById() loads and immediately plays the new video at swapTime thisObj.youTubePlayer.loadVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - else { + } else { // cueVideoById() loads the new video and seeks to swapTime, but does not play thisObj.youTubePlayer.cueVideoById(thisObj.activeYouTubeId,thisObj.swapTime); } } - if (this.playerCreated) { - this.deletePlayer('swap-desc-youtube'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-youtube'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { - // nothing to do here - // next steps occur when youtube onReady event fires - // see youtube.js > finalizeYoutubeInit() - }); - } - else if (this.player === 'vimeo') { + return; + } + this.recreatePlayer().then(function() { + // nothing to do here + // next steps occur when youtube onReady event fires + // see youtube.js > finalizeYoutubeInit() + }); + } else if (this.player === 'vimeo') { if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described this.activeVimeoId = this.vimeoId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); + } else { // the non-described version is currently playing. Swap to described. this.activeVimeoId = this.vimeoDescId; - this.showAlert(this.tt.alertDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); } - if (this.playerCreated) { - this.deletePlayer('swap-desc-vimeo'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-vimeo'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { + return; + } + this.recreatePlayer().then(function() { // load the new video source thisObj.vimeoPlayer.loadVideo(thisObj.activeVimeoId).then(function() { if (thisObj.playing) { // video was playing when user requested an alternative version // seek to swapTime and continue playback (playback happens automatically) thisObj.vimeoPlayer.setCurrentTime(thisObj.swapTime); - } - else { + } else { // Vimeo autostarts immediately after video loads // The "Described" button should not trigger playback, so stop this before the user notices. thisObj.vimeoPlayer.pause(); @@ -8302,36 +7278,30 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.showDescription = function(now) { - - if (!this.hasClosedDesc || this.swappingSrc || !this.descOn || this.descMethod === 'video') { + if (!this.playing || !this.hasClosedDesc || this.swappingSrc || !this.descOn || ( this.descMethod === 'video' && !this.prefDescVisible ) ) { return; } - var thisObj, i, cues, d, thisDescription, descText, msg; + var thisObj, cues, d, thisDescription, descText; thisObj = this; var flattenComponentForDescription = function (component) { var result = []; if (component.type === 'string') { result.push(component.value); - } - else { + } else { for (var i = 0; i < component.children.length; i++) { result.push(flattenComponentForDescription(component.children[i])); } } return result.join(''); }; - + cues = []; if (this.selectedDescriptions) { cues = this.selectedDescriptions.cues; - } - else if (this.descriptions.length >= 1) { + } else if (this.descriptions.length >= 1) { cues = this.descriptions[0].cues; } - else { - cues = []; - } for (d = 0; d < cues.length; d++) { if ((cues[d].start <= now) && (cues[d].end > now)) { thisDescription = d; @@ -8340,35 +7310,35 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisDescription !== 'undefined') { if (this.currentDescription !== thisDescription) { - // temporarily remove aria-live from $status in order to prevent description from being interrupted + // temporarily remove aria-live from $status to prevent description from being interrupted this.$status.removeAttr('aria-live'); descText = flattenComponentForDescription(cues[thisDescription].components); - if (this.descReader === 'screenreader') { + if (this.descReader === 'screenreader') { // load the new description into the container div for screen readers to read this.$descDiv.html(descText); - } - else if (this.speechEnabled) { - // use browser's built-in speech synthesis - this.announceDescriptionText('description',descText); + } else if (this.speechEnabled) { + if ( 'video' !== this.descMethod ) { + // use browser's built-in speech synthesis + this.announceDescriptionText('description',descText); + } if (this.prefDescVisible) { // write description to the screen for sighted users // but remove ARIA attributes since it isn't intended to be read by screen readers this.$descDiv.html(descText).removeAttr('aria-live aria-atomic'); } - } - else { + } else { // browser does not support speech synthesis // load the new description into the container div for screen readers to read this.$descDiv.html(descText); } + // Only pause video if not using a described video. if (this.prefDescPause && this.descMethod === 'text') { this.pauseMedia(); this.pausedForDescription = true; } this.currentDescription = thisDescription; } - } - else { + } else { this.$descDiv.html(''); this.currentDescription = -1; // restore aria-live to $status @@ -8376,42 +7346,33 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - - // called when user changed playback rate - // adjust rate of audio description to match + AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - var speechRate; + // called when user changed playback rate + // adjust rate of audio description to match + var speechRate; - if (rate === 0.5) { - speechRate = 0.7; // option 1 in prefs menu - } - else if (rate === 0.75) { - speechRate = 0.8; // option 2 in prefs menu - } - else if (rate === 1.0) { + if (rate === 0.5) { + speechRate = 0.7; // option 1 in prefs menu + } else if (rate === 0.75) { + speechRate = 0.8; // option 2 in prefs menu + } else if (rate === 1.0) { speechRate = 1; // option 4 in prefs menu (normal speech, default) - } - else if (rate === 1.25) { + } else if (rate === 1.25) { speechRate = 1.1; // option 5 in prefs menu - } - else if (rate === 1.5) { - speechRate = 1.2; // option 6 in prefs menu - } - else if (rate === 1.75) { - speechRate = 1.5; // option 7 in prefs menu - } - else if (rate === 2.0) { + } else if (rate === 1.5) { + speechRate = 1.2; // option 6 in prefs menu + } else if (rate === 1.75) { + speechRate = 1.5; // option 7 in prefs menu + } else if (rate === 2.0) { speechRate = 2; // option 8 in prefs menu (fast) - } - else if (rate === 2.25) { + } else if (rate === 2.25) { speechRate = 2.5; // option 9 in prefs menu (very fast) - } - else if (rate >= 2.5) { - speechRate = 3; // option 10 in prefs menu (super fast) + } else if (rate >= 2.5) { + speechRate = 3; // option 10 in prefs menu (super fast) } this.prefDescRate = speechRate; - }; + }; AblePlayer.prototype.announceDescriptionText = function(context, text) { @@ -8441,10 +7402,10 @@ if (typeof module !== "undefined" && module.exports) { // and typically requires a computer reboot to make right again. // This has been observed frequently in macOS Big Sur, but also in Windows 10 // To ignore user's voice preferences and always use the first voice, set the following var to true - // This is for testing only; not recommended for production - // unless the voice select field is also removed from the Prefs dialog + // This is for testing only; not recommended for production + // unless the voice select field is also removed from the Prefs dialog var useFirstVoice = false; - + if (!this.speechEnabled) { // voices array failed to load the first time. Try again this.initSpeech('desc'); @@ -8456,8 +7417,7 @@ if (typeof module !== "undefined" && module.exports) { pitch = $('#' + this.mediaId + '_prefDescPitch').val(); rate = $('#' + this.mediaId + '_prefDescRate').val(); volume = $('#' + this.mediaId + '_prefDescVolume').val(); - } - else { + } else { // get settings from global prefs voiceName = this.prefDescVoice; pitch = this.prefDescPitch; @@ -8470,8 +7430,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.descVoices.length > 0) { if (useFirstVoice) { voice = this.descVoices[0]; - } - else if (voiceName) { + } else if (voiceName) { // get the voice that matches user's preferred voiceName for (i = 0; i < this.descVoices.length; i++) { if (this.descVoices[i].name == voiceName) { @@ -8485,63 +7444,62 @@ if (typeof module !== "undefined" && module.exports) { // use the first voice in the array voice = this.descVoices[0]; } - utterance = new SpeechSynthesisUtterance(); - utterance.voice = voice; - utterance.voiceURI = 'native'; - utterance.volume = volume; - utterance.rate = rate; - utterance.pitch = pitch; - utterance.text = text; - // TODO: Consider the best language for the utterance: - // language of the web page? (this.lang) - // language of the WebVTT description track? - // language of the user's chosen voice? - // If there's a mismatch between any of these, the description will likely be unintelligible - utterance.lang = this.lang; - utterance.onstart = function(e) { - // utterance has started - }; - utterance.onpause = function(e) { - // utterance has paused - }; - utterance.onend = function(e) { - // utterance has ended - this.speakingDescription = false; - timeElapsed = e.elapsedTime; - // As of Firefox 95, e.elapsedTime is expressed in seconds - // Other browsers (tested in Chrome & Edge) express this in milliseconds - // Assume no utterance will require over 100 seconds to express... - if (timeElapsed > 100) { - // time is likely expressed in milliseconds - secondsElapsed = (e.elapsedTime/1000).toFixed(2); - } - else { - // time is likely already expressed in seconds; just need to round it - secondsElapsed = (e.elapsedTime).toFixed(2); - } - if (this.debug) { - - } - if (context === 'description') { - if (thisObj.prefDescPause) { - if (thisObj.pausedForDescription) { - thisObj.playMedia(); - this.pausedForDescription = false; - } - } + } + } else { + voice = null; + } + utterance = new SpeechSynthesisUtterance(); + if (voice) { + utterance.voice = voice; + } + utterance.voiceURI = 'native'; + utterance.volume = volume; + utterance.rate = rate; + utterance.pitch = pitch; + utterance.text = text; + // TODO: Consider the best language for the utterance: + // language of the web page? (this.lang) + // language of the WebVTT description track? + // language of the user's chosen voice? + // If there's a mismatch between any of these, the description will likely be unintelligible + utterance.lang = this.lang; + utterance.onstart = function(e) { + // utterance has started + }; + utterance.onpause = function(e) { + // utterance has paused + }; + utterance.onend = function(e) { + // utterance has ended + this.speakingDescription = false; + timeElapsed = e.elapsedTime; + // As of Firefox 95, e.elapsedTime is expressed in seconds + // Other browsers (tested in Chrome & Edge) express this in milliseconds + // Assume no utterance will require over 100 seconds to express... + // If a large value, time is likely expressed in milliseconds. + secondsElapsed = (timeElapsed > 100) ? (e.elapsedTime/1000).toFixed(2) : (e.elapsedTime).toFixed(2); + + if (this.debug) { + + } + if (context === 'description') { + if (thisObj.prefDescPause) { + if (thisObj.pausedForDescription) { + thisObj.playMedia(); + this.pausedForDescription = false; } - }; - utterance.onerror = function(e) { - // handle error - - }; - if (this.synth.paused) { - this.synth.resume(); } - this.synth.speak(utterance); - this.speakingDescription = true; } + }; + utterance.onerror = function(e) { + // handle error + + }; + if (this.synth.paused) { + this.synth.resume(); } + this.synth.speak(utterance); + this.speakingDescription = true; }; })(jQuery); @@ -8550,7 +7508,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isIOS = function(version) { - // return true if this is IOS + // return true if this is iOS // if version is provided check for a particular version var userAgent, iOS; @@ -8562,61 +7520,48 @@ if (typeof module !== "undefined" && module.exports) { if (userAgent.indexOf('os ' + version) !== -1) { // this is the target version of iOS return true; - } - else { + } else { return false; } - } - else { + } else { // no version was specified return true; } - } - else { - // this is not IOS + } else { + // this is not iOS return false; } }; AblePlayer.prototype.browserSupportsVolume = function() { - // To test whether the browser supports changing the volume, - // create a new audio element and try setting the volume to something other than 1. - // Then, retrieve the current setting to see if it preserved it. + // To test whether the browser supports changing the volume, + // create a new audio element and try setting the volume to something other than 1. + // Then, retrieve the current setting to see if it preserved it. + // This doesn't work in iOS by design: https://developer.apple.com/documentation/avfoundation/avplayer/volume - // Unfortunately, this doesn't work in iOS. In 2022, our tests yield the same results as reported here: - // https://stackoverflow.com/questions/72861253/how-do-i-detect-if-a-browser-does-not-support-changing-html-audio-volume + var audio, testVolume; - // So, unfortunately we have to resort to sniffing for iOS - // before testing for support in other browsers - var audio, testVolume; - - if (this.isIOS()) { - return false; - } + if (this.isIOS()) { + return false; + } - testVolume = 0.9; // any value between 0.1 and 0.9 - audio = new Audio(); - audio.volume = testVolume; - if (audio.volume === testVolume) { - return true; - } - else { - return false; - } + testVolume = 0.9; // any value between 0.1 and 0.9 + audio = new Audio(); + audio.volume = testVolume; + + return ( audio.volume === testVolume ); }; AblePlayer.prototype.nativeFullscreenSupported = function () { - return document.fullscreenEnabled || - document.webkitFullscreenEnabled || - document.mozFullscreenEnabled || - document.msFullscreenEnabled; + return document.fullscreenEnabled || document.webkitFullscreenEnabled; }; })(jQuery); (function ($) { + AblePlayer.prototype.seekTo = function (newTime) { var thisObj = this; @@ -8629,10 +7574,12 @@ if (typeof module !== "undefined" && module.exports) { this.seeking = true; this.liveUpdatePending = true; - if (this.speakingDescription) { - this.synth.cancel(); + if (this.speakingDescription) { + this.synth.cancel(); } + this.syncSignVideo( {'time' : this.startTime } ); + if (this.player === 'html5') { var seekable; @@ -8643,23 +7590,19 @@ if (typeof module !== "undefined" && module.exports) { // ok to seek to startTime // canplaythrough will be triggered when seeking is complete // this.seeking will be set to false at that point - this.media.currentTime = this.startTime; - this.seekStatus = 'complete'; - if (this.hasSignLanguage && this.signVideo) { - // keep sign languge video in sync - this.signVideo.currentTime = this.startTime; - } + this.media.currentTime = this.startTime; + this.seekStatus = 'complete'; + this.syncSignVideo( { 'time' : this.startTime } ); } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.seekTo(newTime,true); if (newTime > 0) { if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } } - } - else if (this.player === 'vimeo') { + this.syncSignVideo( {'time' : newTime } ); + } else if (this.player === 'vimeo') { this.vimeoPlayer.setCurrentTime(newTime).then(function() { // seek finished. // successful completion also fires a 'seeked' event (see event.js) @@ -8689,15 +7632,14 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj, mediaTimes; mediaTimes = {}; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (typeof duration !== 'undefined' && typeof elapsed !== 'undefined') { mediaTimes['duration'] = duration; mediaTimes['elapsed'] = elapsed; deferred.resolve(mediaTimes); - } - else { + } else { this.getDuration().then(function(duration) { mediaTimes['duration'] = thisObj.roundDown(duration,6); thisObj.getElapsed().then(function(elapsed) { @@ -8715,7 +7657,7 @@ if (typeof module !== "undefined" && module.exports) { // function is called by getMediaTimes, and return value is sanitized there var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -8724,39 +7666,32 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getDuration().then(function(duration) { if (duration === undefined || isNaN(duration) || duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var duration; if (this.player === 'html5') { - duration = this.media.duration; - } - else if (this.player === 'youtube') { + duration = this.media.duration; + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { - if (this.duration > 0) { + if (this.duration > 0) { // duration was already retrieved while checking for captions - duration = this.duration; - } - else { + duration = this.duration; + } else { duration = this.youTubePlayer.getDuration(); } - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet duration = 0; } } if (duration === undefined || isNaN(duration) || duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } } @@ -8770,7 +7705,7 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -8779,33 +7714,27 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getCurrentTime().then(function(elapsed) { if (elapsed === undefined || isNaN(elapsed) || elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var elapsed; if (this.player === 'html5') { elapsed = this.media.currentTime; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { elapsed = this.youTubePlayer.getCurrentTime(); - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet elapsed = 0; } } if (elapsed === undefined || isNaN(elapsed) || elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } } @@ -8815,71 +7744,51 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getPlayerState = function () { // Returns one of the following states: - // 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. - // 'ended' - Finished playing. - // 'paused' - Not playing, but not stopped or ended. - // 'buffering' - Momentarily paused to load, but will resume once data is loaded. - // 'playing' - Currently playing. - - // Commented out the following in 3.2.1 - not sure of its intended purpose - // It can be useful to know player state even when swapping src - // and the overhead is seemingly minimal - // TODO - Investigate this further. Delete if it's not needed - / - if (this.swappingSrc) { - return; - } - / - var deferred, promise, thisObj, duration, elapsed; - deferred = new $.Deferred(); + // - 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. + // - 'ended' - Finished playing. + // - 'paused' - Not playing, but not stopped or ended. + // - 'buffering' - Momentarily paused to load, but will resume once data is loaded. + // - 'playing' - Currently playing. + + var deferred, promise, thisObj; + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (this.player === 'html5') { if (this.media.ended) { deferred.resolve('ended'); - } - else if (this.media.paused) { + } else if (this.media.paused) { deferred.resolve('paused'); - } - else if (this.media.readyState !== 4) { + } else if (this.media.readyState !== 4) { deferred.resolve('buffering'); - } - else { + } else { deferred.resolve('playing'); } - } - else if (this.player === 'youtube' && this.youTubePlayerReady) { + } else if (this.player === 'youtube' && this.youTubePlayerReady) { var state = this.youTubePlayer.getPlayerState(); if (state === -1 || state === 5) { deferred.resolve('stopped'); - } - else if (state === 0) { + } else if (state === 0) { deferred.resolve('ended'); - } - else if (state === 1) { + } else if (state === 1) { deferred.resolve('playing'); - } - else if (state === 2) { + } else if (state === 2) { deferred.resolve('paused'); - } - else if (state === 3) { + } else if (state === 3) { deferred.resolve('buffering'); } - } - else if (this.player === 'vimeo' && this.vimeoPlayer) { + } else if (this.player === 'vimeo' && this.vimeoPlayer) { // curiously, Vimeo's API has no getPlaying(), getBuffering(), or getState() methods // so maybe if it's neither paused nor ended, it must be playing??? this.vimeoPlayer.getPaused().then(function(paused) { if (paused) { deferred.resolve('paused'); - } - else { + } else { thisObj.vimeoPlayer.getEnded().then(function(ended) { if (ended) { deferred.resolve('ended'); - } - else { + } else { deferred.resolve('playing'); } }); @@ -8892,89 +7801,63 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isPlaybackRateSupported = function () { if (this.player === 'html5') { - if (this.media.playbackRate) { - return true; - } - else { - return false; - } - } - else if (this.player === 'youtube') { - // Youtube supports varying playback rates per video. + return (this.media.playbackRate) ? true : false; + } else if (this.player === 'youtube') { + // Youtube supports varying playback rates per video. // Only expose controls if more than one playback rate is available. - if (this.youTubePlayerReady) { - if (this.youTubePlayer.getAvailablePlaybackRates().length > 1) { - return true; - } - else { - return false; - } - } - else { + if (this.youTubePlayerReady) { + return (this.youTubePlayer.getAvailablePlaybackRates().length > 1) ? true : false; + } else { return false; } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // since this takes longer to determine, it was set previously in initVimeoPlayer() return this.vimeoSupportsPlaybackRateChange; } }; AblePlayer.prototype.setPlaybackRate = function (rate) { - + rate = Math.max(0.5, rate); - if (this.hasClosedDesc && this.descMethod === 'text') { - // keep speech rate in sync with playback rate even if descOn is false - this.syncSpeechToPlaybackRate(rate); + if (this.hasClosedDesc && this.descMethod === 'text') { + // keep speech rate in sync with playback rate even if descOn is false + this.syncSpeechToPlaybackRate(rate); } + this.syncSignVideo( {'rate' : rate } ); + if (this.player === 'html5') { this.media.playbackRate = rate; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.setPlaybackRate(rate); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.setPlaybackRate(rate); } - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.playbackRate = rate; - } + this.syncSignVideo( { 'rate' : rate } ); this.playbackRate = rate; - this.$speed.text(this.tt.speed + ': ' + rate.toFixed(2).toString() + 'x'); - }; + this.$speed.text( this.translate( 'speed', 'Speed' ) + ': ' + rate.toFixed(2).toString() + 'x'); + }; AblePlayer.prototype.getPlaybackRate = function () { if (this.player === 'html5') { return this.media.playbackRate; - } - else if (this.player === 'youtube') { - if (this.youTubePlayerReady) { - return this.youTubePlayer.getPlaybackRate(); - } + } else if (this.player === 'youtube' && (this.youTubePlayerReady)) { + return this.youTubePlayer.getPlaybackRate(); } }; AblePlayer.prototype.isPaused = function () { - // Note there are three player states that count as paused in this sense, + // Note there are three player states that count as paused in this sense, // and one of them is named 'paused'. // A better name would be 'isCurrentlyNotPlayingOrBuffering' - var state; - if (this.player === 'vimeo') { // just rely on value of this.playing - if (this.playing) { - return false; - } - else { - return true; - } - } - else { + return (this.playing) ? false : true; + } else { this.getPlayerState().then(function(state) { // if any of the following is true, consider the media 'paused' return state === 'paused' || state === 'stopped' || state === 'ended'; @@ -8982,43 +7865,71 @@ if (typeof module !== "undefined" && module.exports) { } }; + AblePlayer.prototype.syncSignVideo = function(options) { + if (this.hasSignLanguage && ( this.signVideo || this.signYoutube ) ) { + if (options && typeof options.time !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.currentTime = options.time; + } else { + this.youTubeSignPlayer.seekTo(options.time,true); + } + } + if (options && typeof options.rate !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.playbackRate = options.rate; + } else { + this.youTubeSignPlayer.setPlaybackRate(options.rate); + } + } + if (options && typeof options.pause !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.pause(true); + } else { + this.youTubeSignPlayer.pauseVideo(); + } + } + if (options && typeof options.play !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.play(true); + } else { + this.youTubeSignPlayer.playVideo(); + } + } + if (options && typeof options.volume !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.volume = 0; + } + } + } + }; + AblePlayer.prototype.pauseMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'pause' : true } ); if (this.player === 'html5') { this.media.pause(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.pause(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.pauseVideo(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.pause(); } }; AblePlayer.prototype.playMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'play' : true } ); if (this.player === 'html5') { this.media.play(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.play(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.playVideo(); if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } this.stoppingYouTube = false; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.play(); } this.startedPlaying = true; @@ -9032,44 +7943,19 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.fadeControls = function(direction) { // Visibly fade controls without hiding them from screen reader users - // direction is either 'out' or 'in' - // TODO: This still needs work. // After the player fades, it's replaced by an empty space // Would be better if the video and captions expanded to fill the void - // Attempted to fade out to 0 opacity, then move the playerDiv offscreen - // and expand the mediaContainer to fill the vacated space - // However, my attempts to do this have been choppy and buggy - // Code is preserved below and commented out + // replace JS animation with CSS animation in 12/2025. - var thisObj, mediaHeight, playerHeight, newMediaHeight; var thisObj = this; if (direction == 'out') { // get the original height of two key components: - mediaHeight = this.$mediaContainer.height(); - playerHeight = this.$playerDiv.height(); - newMediaHeight = mediaHeight + playerHeight; - - // fade slowly to transparency - this.$playerDiv.fadeTo(2000,0,function() { - / - // when finished, position playerDiv offscreen - // thisObj.$playerDiv.addClass('able-offscreen'); - // Expand the height of mediaContainer to fill the void (needs work) - thisObj.$mediaContainer.animate({ - height: newMediaHeight - },500); - / - }); - } - else if (direction == 'in') { - // restore captionsContainer to its original height (needs work) - // this.$mediaContainer.removeAttr('style'); - // fade relatively quickly back to its original position with full opacity - // this.$playerDiv.removeClass('able-offscreen').fadeTo(100,1); - this.$playerDiv.fadeTo(100,1); + this.$playerDiv.addClass( 'fade-out' ).removeClass( 'fade-in' ); + } else if (direction == 'in') { + this.$playerDiv.addClass( 'fade-in' ).removeClass( 'fade-out' ); } }; @@ -9087,7 +7973,7 @@ if (typeof module !== "undefined" && module.exports) { this.hideControlsTimeoutStatus = 'active'; }; - AblePlayer.prototype.refreshControls = function(context, duration, elapsed) { + AblePlayer.prototype.refreshControls = function(context = 'init', duration, elapsed) { // context is one of the following: // 'init' - initial build (or subsequent change that requires full rebuild) @@ -9108,34 +7994,30 @@ if (typeof module !== "undefined" && module.exports) { // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx - var thisObj, duration, elapsed, lastChapterIndex, displayElapsed, - updateLive, textByState, timestamp, widthUsed, - leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount, - buffered, newTop, statusBarHeight, speedHeight, statusBarWidthBreakpoint, - newSvgData; + var thisObj, duration, textByState, timestamp, captionsCount, newTop, statusBarWidthBreakpoint; thisObj = this; - if (this.swappingSrc) { - if (this.playing) { - // wait until new source has loaded before refreshing controls - // can't wait if player is NOT playing because some critical events - // won't fire until playback of new media starts - return; - } + // wait until new source has loaded before refreshing controls + // some critical events won't fire until playback of new media starts + if ( this.swappingSrc && this.playing ) { + return; } - if (context === 'timeline' || context === 'init') { - // all timeline-related functionality requires both duration and elapsed + if ( context === 'timeline' || context === 'init' ) { + // Update timeline controls. + var lastChapterIndex, displayElapsed, updateLive, widthUsed, + leftControls, rightControls, seekbarWidth, buffered; + // all timeline-related functionality requires duration if (typeof this.duration === 'undefined') { - // wait until duration is known before proceeding with refresh - return; + // wait until duration is known before proceeding with refresh + return; } if (this.useChapterTimes) { this.chapterDuration = this.getChapterDuration(); this.chapterElapsed = this.getChapterElapsed(); } - if (this.useFixedSeekInterval === false && this.seekIntervalCalculated === false && this.duration > 0) { + if ( !this.useFixedSeekInterval && !this.seekIntervalCalculated && this.duration > 0) { // couldn't calculate seekInterval previously; try again. this.setSeekInterval(); } @@ -9149,32 +8031,26 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends // need to adjust seekbar duration to match video end this.seekBar.setDuration(this.duration - this.currentChapter.start); - } - else { + } else { this.seekBar.setDuration(this.chapterDuration); } - } - else { + } else { // this is not the last chapter this.seekBar.setDuration(this.chapterDuration); } - } - else { - if (!(this.duration === undefined || isNaN(this.duration) || this.duration === -1)) { - this.seekBar.setDuration(this.duration); - } + } else if ( !(this.duration === undefined || isNaN(this.duration) || this.duration === -1) ) { + this.seekBar.setDuration(this.duration); } if (!(this.seekBar.tracking)) { // Only update the aria live region if we have an update pending // (from a seek button control) or if the seekBar has focus. // We use document.activeElement instead of $(':focus') due to a strange bug: - // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. + // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. updateLive = this.liveUpdatePending || this.seekBar.seekHead.is($(document.activeElement)); this.liveUpdatePending = false; if (this.useChapterTimes) { this.seekBar.setPosition(this.chapterElapsed, updateLive); - } - else { + } else { this.seekBar.setPosition(this.elapsed, updateLive); } } @@ -9182,22 +8058,15 @@ if (typeof module !== "undefined" && module.exports) { // When seeking, display the seek bar time instead of the actual elapsed time. if (this.seekBar.tracking) { displayElapsed = this.seekBar.lastTrackPosition; - } - else { - if (this.useChapterTimes) { - displayElapsed = this.chapterElapsed; - } - else { - displayElapsed = this.elapsed; - } + } else { + displayElapsed = ( this.useChapterTimes ) ? this.chapterElapsed : this.elapsed; } } // update elapsed & duration if (typeof this.$durationContainer !== 'undefined') { if (this.useChapterTimes) { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.chapterDuration)); - } - else { + } else { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.duration)); } } @@ -9209,27 +8078,22 @@ if (typeof module !== "undefined" && module.exports) { // Update seekbar width. // To do this, we need to calculate the width of all buttons surrounding it. if (this.seekBar) { - widthUsed = 0; + let controlWrapper = this.seekBar.wrapperDiv.parent().parent(); leftControls = this.seekBar.wrapperDiv.parent().prev('div.able-left-controls'); rightControls = leftControls.next('div.able-right-controls'); - leftControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); // true = include margin - } - }); + widthUsed = leftControls.outerWidth(true); rightControls.children().each(function () { if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); + widthUsed += $(this).outerWidth(true) + 5; } }); if (this.fullscreen) { seekbarWidth = $(window).width() - widthUsed; - } - else { + } else { // seekbar is wide enough to fill the remaining space - // include a 5px buffer to account for minor browser differences - seekbarWidth = this.$ableWrapper.width() - widthUsed - 5; - } + // include a 10px buffer to account for minor browser differences or custom styles. + seekbarWidth = controlWrapper.width() - widthUsed - 10; + } // Sometimes some minor fluctuations based on browser weirdness, so set a threshold. if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) { this.seekBar.setWidth(seekbarWidth); @@ -9240,122 +8104,69 @@ if (typeof module !== "undefined" && module.exports) { // Update buffering progress. // TODO: Currently only using the first HTML5 buffered interval, // but this fails sometimes when buffering is split into two or more intervals. - if (this.player === 'html5') { - if (this.media.buffered.length > 0) { - buffered = this.media.buffered.end(0); - if (this.useChapterTimes) { - if (buffered > this.chapterDuration) { - buffered = this.chapterDuration; - } - if (this.seekBar) { - this.seekBar.setBuffered(buffered / this.chapterDuration); - } + if (this.player === 'html5' && this.media.buffered.length > 0) { + buffered = this.media.buffered.end(0); + if (this.useChapterTimes) { + if (buffered > this.chapterDuration) { + buffered = this.chapterDuration; } - else { - if (this.seekBar) { - if (!isNaN(buffered)) { - this.seekBar.setBuffered(buffered / duration); - } - } + if (this.seekBar) { + this.seekBar.setBuffered(buffered / this.chapterDuration); } + } else if ( this.seekBar && !isNaN(buffered) ) { + this.seekBar.setBuffered(buffered / duration); } - } - else if (this.player === 'youtube') { - if (this.seekBar) { - if (this.youTubePlayerReady) { - this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); - } - } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'youtube' && this.seekBar && this.youTubePlayerReady ) { + this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + } else if (this.player === 'vimeo') { // TODO: Add support for Vimeo buffering update } - } // end if context == 'timeline' or 'init' - - if (context === 'descriptions' || context == 'init'){ + } + if (context === 'descriptions' || context == 'init') { if (this.$descButton) { - if (this.descOn) { - this.$descButton.removeClass('buttonOff').attr('aria-label',this.tt.turnOffDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOffDescriptions); - } - else { - this.$descButton.addClass('buttonOff').attr('aria-label',this.tt.turnOnDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOnDescriptions); - } + this.toggleButtonState( + this.$descButton, + this.descOn, + this.translate( 'turnOffDescriptions', 'Turn off descriptions' ), + this.translate( 'turnOnDescriptions', 'Turn on descriptions' ), + ); } } - if (context === 'captions' || context == 'init'){ + if (context === 'captions' || context == 'init') { if (this.$ccButton) { captionsCount = this.captions.length; - - // Button has a different title depending on the number of captions. - // If only one caption track, this is "Show captions" and "Hide captions" - // Otherwise, it is just always "Captions" - if (!this.captionsOn) { - this.$ccButton.addClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'false') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.showCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.showCaptions); - } - } - else { - this.$ccButton.removeClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'true') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.hideCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.hideCaptions); - } - } - if (captionsCount > 1) { this.$ccButton.attr({ - 'aria-label': this.tt.captions, 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-captions-menu' }); - this.$ccButton.find('span.able-clipped').text(this.tt.captions); } + var ariaLabelOn = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + var ariaPressed = ( captionsCount > 1 ) ? true : false; + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); } } if (context === 'fullscreen' || context == 'init'){ if (this.$fullscreenButton) { if (!this.fullscreen) { - this.$fullscreenButton.attr('aria-label', this.tt.enterFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-collapse').addClass('icon-fullscreen-expand'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-expand'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenExpandButtonImg); - } - } - else { - this.$fullscreenButton.attr('aria-label',this.tt.exitFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-expand').addClass('icon-fullscreen-collapse'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-collapse'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenCollapseButtonImg); - } + this.$fullscreenButton.attr( 'aria-label', this.translate( 'enterFullScreen', 'Enter full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-expand' ); + } else { + this.$fullscreenButton.attr('aria-label', this.translate( 'exitFullScreen', 'Exit full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-collapse' ); } } } @@ -9366,18 +8177,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.hideBigPlayButton) { this.$bigPlayButton.show(); this.$bigPlayButton.attr('aria-hidden', 'false'); - - } - if (this.fullscreen) { - this.$bigPlayButton.width($(window).width()); - this.$bigPlayButton.height($(window).height()); } - else { - this.$bigPlayButton.width(this.$mediaContainer.width()); - this.$bigPlayButton.height(this.$mediaContainer.height()); - } - } - else { + } else { this.$bigPlayButton.hide(); this.$bigPlayButton.attr('aria-hidden', 'true'); } @@ -9391,8 +8192,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.prefAutoScrollTranscript === 1) { this.autoScrollTranscript = true; this.$autoScrollTranscriptCheckbox.prop('checked',true); - } - else { + } else { this.autoScrollTranscript = false; this.$autoScrollTranscriptCheckbox.prop('checked',false); } @@ -9410,8 +8210,8 @@ if (typeof module !== "undefined" && module.exports) { // only scroll once after moving a highlight if (this.movingHighlight) { this.$transcriptDiv.scrollTop(newTop); - this.movingHighlight = false; - } + this.movingHighlight = false; + } } } } @@ -9421,7 +8221,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$chaptersButton) { this.$chaptersButton.attr({ - 'aria-label': this.tt.chapters, + 'aria-label': this.translate( 'chapters', 'Chapters' ), 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-chapters-menu' }); @@ -9432,231 +8232,139 @@ if (typeof module !== "undefined" && module.exports) { // update status textByState = { - 'stopped': this.tt.statusStopped, - 'paused': this.tt.statusPaused, - 'playing': this.tt.statusPlaying, - 'buffering': this.tt.statusBuffering, - 'ended': this.tt.statusEnd + 'stopped': this.translate( 'statusStopped', 'Stopped' ), + 'paused': this.translate( 'statusPaused', 'Paused' ), + 'playing': this.translate( 'statusPlaying', 'Playing' ), + 'buffering': this.translate( 'statusBuffering', 'Buffering' ), + 'ended': this.translate( 'statusEnd', 'End of track' ) }; if (this.stoppingYouTube) { // stoppingYouTube is true temporarily while video is paused and seeking to 0 // See notes in handleRestart() // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) - if (this.$status.text() !== this.tt.statusStopped) { - this.$status.text(this.tt.statusStopped); - } - if (this.$playpauseButton.find('span').first().hasClass('icon-pause')) { - if (this.iconType === 'font') { - this.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('play'); - this.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - this.$playpauseButton.find('path').attr('d',newSvgData[1]); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else { - this.$playpauseButton.find('img').attr('src',this.playButtonImg); - } - } - } - else { - if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Update the text only if it's changed since it has role="alert"; - // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. - this.getPlayerState().then(function(currentState) { - if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { - // Debounce updates; only update after status has stayed steadily different for a while - // "A while" is defined differently depending on context - if (thisObj.swappingSrc) { - // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), - // so set a longer wait time before writing a status message - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) - } - } - else { - // for all other contexts (e.g., users clicks Play/Pause) - // user should receive more rapid feedback - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 250; // in ms - } - } - timestamp = (new Date()).getTime(); - if (!thisObj.statusDebounceStart) { - thisObj.statusDebounceStart = timestamp; - // Call refreshControls() again after allotted time has passed - thisObj.debouncingStatus = true; - thisObj.statusTimeout = setTimeout(function () { - thisObj.debouncingStatus = false; - thisObj.refreshControls(context); - }, thisObj.statusMessageThreshold); - } - else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { - thisObj.$status.text(textByState[currentState]); - thisObj.statusDebounceStart = null; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; + if (this.$status.text() !== this.translate( 'statusStopped', 'Stopped' ) ) { + this.$status.text( this.translate( 'statusStopped', 'Stopped' ) ); + } + this.getIcon( this.$playpauseButton, 'play' ); + } else if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { + // Update the text only if it's changed since it has role="alert"; + // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. + this.getPlayerState().then(function(currentState) { + if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { + // Debounce updates; only update after status has stayed steadily different for a while + // "A while" is defined differently depending on context + if (thisObj.swappingSrc) { + // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), + // so set a longer wait time before writing a status message + if (!thisObj.debouncingStatus) { + thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) } + } else if (!thisObj.debouncingStatus) { + // for all other contexts (e.g., users clicks Play/Pause) + // user should receive more rapid feedback + thisObj.statusMessageThreshold = 250; // in ms } - else { + timestamp = (new Date()).getTime(); + if (!thisObj.statusDebounceStart) { + thisObj.statusDebounceStart = timestamp; + // Call refreshControls() again after allotted time has passed + thisObj.debouncingStatus = true; + thisObj.statusTimeout = setTimeout(function () { + thisObj.debouncingStatus = false; + thisObj.refreshControls(context); + }, thisObj.statusMessageThreshold); + } else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { + thisObj.$status.text(textByState[currentState]); thisObj.statusDebounceStart = null; - thisObj.debouncingStatus = false; clearTimeout(thisObj.statusTimeout); thisObj.statusTimeout = null; } - // Don't change play/pause button display while using the seek bar (or if YouTube stopped) - if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { - if (currentState === 'paused' || currentState === 'stopped' || currentState === 'ended') { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('play'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.playButtonImg); - } - } - else { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-play').addClass('icon-pause'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('pause'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.pauseButtonImg); - } - } + } else { + thisObj.statusDebounceStart = null; + thisObj.debouncingStatus = false; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + // Don't change play/pause button display while using the seek bar (or if YouTube stopped) + if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { + if (currentState === 'paused' || currentState === 'stopped' || currentState === 'ended') { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); + thisObj.getIcon( thisObj.$playpauseButton, 'play' ); + } else { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); + thisObj.getIcon( thisObj.$playpauseButton, 'pause' ); } - }); - } + } + }); } } // Show/hide status bar content conditionally if (!this.fullscreen) { statusBarWidthBreakpoint = 300; - statusBarHeight = this.$statusBarDiv.height(); - speedHeight = this.$statusBarDiv.find('span.able-speed').height(); - if (speedHeight > (statusBarHeight + 5)) { - // speed bar is wrapping (happens often in German player) + if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { + // Player is too small for a speed span this.$statusBarDiv.find('span.able-speed').hide(); this.hidingSpeed = true; - } - else { + } else { if (this.hidingSpeed) { this.$statusBarDiv.find('span.able-speed').show(); this.hidingSpeed = false; } - if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { - // Player is too small for a speed span - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - } } } }; - AblePlayer.prototype.getHiddenWidth = function($el) { - - // jQuery returns for width() if element is hidden - // this function is a workaround - - // save a reference to a cloned element that can be measured - var $hiddenElement = $el.clone().appendTo('body'); - - // calculate the width of the clone - var width = $hiddenElement.outerWidth(); - - // remove the clone from the DOM - $hiddenElement.remove(); - - return width; - }; - AblePlayer.prototype.handlePlay = function(e) { - if (this.paused) { - // user clicked play - this.okToPlay = true; + // user clicked play + this.okToPlay = true; this.playMedia(); - if (this.synth.paused) { - // media was paused while description was speaking - // resume utterance - this.synth.resume(); + if (this.synth.paused) { + // media was paused while description was speaking + // resume utterance + this.synth.resume(); } - } - else { + } else { // user clicked pause - this.okToPlay = false; + this.okToPlay = false; this.pauseMedia(); - if (this.speakingDescription) { - // pause the current utterance - // it will resume when the user presses play - this.synth.pause(); + if (this.speakingDescription) { + // pause the current utterance + // it will resume when the user presses play + this.synth.pause(); } } - if (this.speechEnabled === null) { - this.initSpeech('play'); + if (this.speechEnabled === null) { + this.initSpeech('play'); } }; AblePlayer.prototype.handleRestart = function() { - if (this.speakingDescription) { - // cancel audio description - this.synth.cancel(); - } + if (this.speakingDescription) { + // cancel audio description + this.synth.cancel(); + } this.seekTo(0); }; AblePlayer.prototype.handlePrevTrack = function() { - if (this.playlistIndex === 0) { - // currently on the first track - // wrap to bottom and play the last track - this.playlistIndex = this.$playlist.length - 1; - } - else { - this.playlistIndex--; - } + // currently on the first track + // wrap to bottom and play the last track + this.playlistIndex = (this.playlistIndex === 0) ? this.$playlist.length - 1 : this.playlistIndex--; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; AblePlayer.prototype.handleNextTrack = function() { - if (this.playlistIndex === this.$playlist.length - 1) { - // currently on the last track - // wrap to top and play the forst track - this.playlistIndex = 0; - } - else { - this.playlistIndex++; - } + // currently on the last track + // wrap to top and play the forst track + this.playlistIndex = (this.playlistIndex === this.$playlist.length - 1) ? 0 : this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; @@ -9666,15 +8374,10 @@ if (typeof module !== "undefined" && module.exports) { var targetTime; targetTime = this.elapsed - this.seekInterval; - if (this.useChapterTimes) { - if (targetTime < this.currentChapter.start) { - targetTime = this.currentChapter.start; - } - } - else { - if (targetTime < 0) { - targetTime = 0; - } + if (this.useChapterTimes && (targetTime < this.currentChapter.start)) { + targetTime = this.currentChapter.start; + } else if (targetTime < 0) { + targetTime = 0; } this.seekTo(targetTime); }; @@ -9692,14 +8395,12 @@ if (typeof module !== "undefined" && module.exports) { // targetTime would exceed the end of the video (or chapter) // scrub to end of whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); - } - else if (this.duration % targetTime < this.seekInterval) { + } else if (this.duration % targetTime < this.seekInterval) { // nothing left but pocket change after seeking to targetTime // go ahead and seek to end of video (or chapter), whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); } - } - else { + } else { // this is not the last chapter if (targetTime > this.currentChapter.end) { // targetTime would exceed the end of the chapter @@ -9707,8 +8408,7 @@ if (typeof module !== "undefined" && module.exports) { targetTime = this.currentChapter.end; } } - } - else { + } else { // not using chapter times if (targetTime > this.duration) { targetTime = this.duration; @@ -9732,16 +8432,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.setPlaybackRate(this.getPlaybackRate() + (0.25 dir)); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { rates = this.youTubePlayer.getAvailablePlaybackRates(); currentRate = this.getPlaybackRate(); index = rates.indexOf(currentRate); if (index === -1) { - } - else { + } else { index += dir; // Can only increase or decrease rate if there's another rate available. if (index < rates.length && index >= 0) { @@ -9749,27 +8447,15 @@ if (typeof module !== "undefined" && module.exports) { } } } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // range is 0.5 to 2 // increase/decrease in inrements of 0.5 vimeoMin = 0.5; vimeoMax = 2; if (dir === 1) { - if (this.vimeoPlaybackRate + 0.5 <= vimeoMax) { - newRate = this.vimeoPlaybackRate + 0.5; - } - else { - newRate = vimeoMax; - } - } - else if (dir === -1) { - if (this.vimeoPlaybackRate - 0.5 >= vimeoMin) { - newRate = this.vimeoPlaybackRate - 0.5; - } - else { - newRate = vimeoMin; - } + newRate = (this.vimeoPlaybackRate + 0.5 <= vimeoMax) ? this.vimeoPlaybackRate + 0.5 : vimeoMax; + } else if (dir === -1) { + newRate = (this.vimeoPlaybackRate - 0.5 >= vimeoMin) ? this.vimeoPlaybackRate - 0.5 : vimeoMin; } this.setPlaybackRate(newRate); } @@ -9778,47 +8464,39 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handleCaptionToggle = function() { var thisObj = this; - var captions; + var captions, ariaPressed; if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup // immediately after closing it this.hidingPopup = false; return false; } - if (this.captions.length) { - captions = this.captions; - } - else { - captions = []; - } + + captions = (this.captions.length) ? this.captions : []; if (captions.length === 1) { // When there's only one set of captions, just do an on/off toggle. if (this.captionsOn === true) { // turn them off this.captionsOn = false; this.prefCaptions = 0; - this.$ccButton.attr('aria-pressed', 'false'); - this.updateCookie('prefCaptions'); + ariaPressed = false; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.unloadModule('captions'); - } - else if (this.usingVimeoCaptions) { - this.vimeoPlayer.disableTextTrack(); - } - else { + } else if (this.usingVimeoCaptions) { + this.vimeoPlayer.disableTextTrack(); + } else { this.$captionsWrapper.hide(); } - } - else { + } else { // captions are off. Turn them on. this.captionsOn = true; this.prefCaptions = 1; - this.$ccButton.attr('aria-pressed', 'true'); - this.updateCookie('prefCaptions'); + ariaPressed = true; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.loadModule('captions'); - } - else if (this.usingVimeoCaptions) { + } else if (this.usingVimeoCaptions) { this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' @@ -9838,9 +8516,8 @@ if (typeof module !== "undefined" && module.exports) { break; } - }); - } - else { + }); + } else { this.$captionsWrapper.show(); } for (var i=0; i<captions.length; i++) { @@ -9853,9 +8530,7 @@ if (typeof module !== "undefined" && module.exports) { this.selectedDescriptions = this.descriptions[0]; } } - this.refreshControls('captions'); - } - else { + } else { // there is more than one caption track. // clicking on a track is handled via caption.js > getCaptionClickFunction() if (this.captionsPopup && this.captionsPopup.is(':visible')) { @@ -9863,8 +8538,7 @@ if (typeof module !== "undefined" && module.exports) { this.hidingPopup = false; this.$ccButton.attr('aria-expanded', 'false') this.waitThenFocus(this.$ccButton); - } - else { + } else { this.closePopups(); if (this.captionsPopup) { this.captionsPopup.show(); @@ -9876,17 +8550,27 @@ if (typeof module !== "undefined" && module.exports) { thisObj.captionsPopup.css('left', thisObj.$ccButton.position().left) // Place focus on the first button (even if another button is checked) thisObj.captionsPopup.find('li').removeClass('able-focus'); - thisObj.captionsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.captionsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } } } + var ariaLabelOn = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); }; /** * Gives enough time for DOM changes to take effect before adjusting focus. * Helpful for allowing screen reading of elements whose state is intermittently changed. - * + * * @param {} $el element to focus on @param {} timeout optional wait time in milliseconds before focus / @@ -9894,9 +8578,9 @@ if (typeof module !== "undefined" && module.exports) { // Default wait time of 50 ms var _timeout = (timeout === undefined || timeout === null) ? 50 : timeout; - + setTimeout(function() { - $el.focus(); + $el.trigger('focus'); }, _timeout); } @@ -9910,9 +8594,8 @@ if (typeof module !== "undefined" && module.exports) { if (this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); this.hidingPopup = false; - this.$chaptersButton.attr('aria-expanded','false').focus(); - } - else { + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); + } else { this.closePopups(); this.chaptersPopup.show(); this.$chaptersButton.attr('aria-expanded','true'); @@ -9923,10 +8606,9 @@ if (typeof module !== "undefined" && module.exports) { // Otherwise, place focus on the first chapter this.chaptersPopup.find('li').removeClass('able-focus'); if (this.chaptersPopup.find('li[aria-checked="true"]').length) { - this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass('able-focus'); - } - else { - this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').focus(); + this.chaptersPopup.find('li[aria-checked="true"]').trigger('focus').addClass('able-focus'); + } else { + this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').trigger('focus'); } } }; @@ -9935,12 +8617,12 @@ if (typeof module !== "undefined" && module.exports) { this.descOn = !this.descOn; this.prefDesc = + this.descOn; // convert boolean to integer - this.updateCookie('prefDesc'); + this.updatePreferences('prefDesc'); if (typeof this.$descDiv !== 'undefined') { if (!this.$descDiv.is(':hidden')) { this.$descDiv.hide(); } - // NOTE: now showing $descDiv here if previously hidden + // NOTE: now showing $descDiv here if previously hidden // that's handled elsewhere, dependent on whether there's text to show } this.initDescription(); @@ -9962,8 +8644,8 @@ if (typeof module !== "undefined" && module.exports) { thisObj = this; - if (this.speechEnabled === null) { - this.initSpeech('prefs'); + if (this.speechEnabled === null) { + this.initSpeech('prefs'); } if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup @@ -9977,18 +8659,17 @@ if (typeof module !== "undefined" && module.exports) { // restore each menu item to original hidden state this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); + this.$prefsButton.trigger('focus'); } // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; },100); - } - else { + } else { this.closePopups(); this.prefsPopup.show(); this.$prefsButton.attr('aria-expanded','true'); - this.$prefsButton.focus(); // focus first on prefs button to announce expanded state + this.$prefsButton.trigger('focus'); // focus first on prefs button to announce expanded state // give time for focus on button then adjust popup settings and focus setTimeout(function() { prefsButtonPosition = thisObj.$prefsButton.position(); @@ -9998,115 +8679,88 @@ if (typeof module !== "undefined" && module.exports) { thisObj.prefsPopup.css('left', prefsMenuLeft); // remove prior focus and set focus on first item; also change tabindex from -1 to 0 thisObj.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','0'); - thisObj.prefsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.prefsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } }; - AblePlayer.prototype.handleHelpClick = function() { - this.setFullscreen(false); - this.helpDialog.show(); - }; - AblePlayer.prototype.handleTranscriptToggle = function () { - var thisObj = this; - - if (this.$transcriptDiv.is(':visible')) { + var visible = this.$transcriptDiv.is(':visible'); + if ( visible ) { this.$transcriptArea.hide(); - this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); this.prefTranscript = 0; - this.$transcriptButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms - // Setting timeout to 100ms is a virtual guarantee of proper functionality - setTimeout(function() { - thisObj.closingTranscript = false; - }, 100); - } - else { - this.positionDraggableWindow('transcript'); - this.$transcriptArea.show(); - // showing transcriptArea has a cascading effect of showing all content within transcriptArea - // need to re-hide the popup menu - this.$transcriptPopup.hide(); - this.$transcriptButton.removeClass('buttonOff').attr('aria-label',this.tt.hideTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.hideTranscript); - this.prefTranscript = 1; - // move focus to first focusable element (window options button) - this.focusNotClick = true; - this.$transcriptArea.find('button').first().focus(); - // wait briefly before resetting stopgap var - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefTranscript'); + if ( this.transcriptType === 'popup' ) { + this.$transcriptButton.trigger('focus').addClass('able-focus'); + // wait briefly before resetting stopgap var + // otherwise the keypress used to select 'Close' will trigger the transcript button + // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms + // Setting timeout to 100ms is a virtual guarantee of proper functionality + setTimeout(function() { + thisObj.closingTranscript = false; + }, 100); + } + } else { + if ( this.transcriptType === 'popup' ) { + this.positionDraggableWindow('transcript'); + this.$transcriptArea.show(); + // showing transcriptArea has a cascading effect of showing all content within transcriptArea + // need to re-hide the popup menu + this.$transcriptPopup.hide(); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.prefTranscript = 1; + // move focus to first focusable element (window options button) + this.focusNotClick = true; + this.$transcriptArea.find('button').first().trigger('focus'); + // wait briefly before resetting stopgap var + setTimeout(function() { + thisObj.focusNotClick = false; + }, 100); + } else { + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.$transcriptArea.show(); + } + } + this.updatePreferences('prefTranscript'); }; AblePlayer.prototype.handleSignToggle = function () { var thisObj = this; - - if (this.$signWindow.is(':visible')) { + var visible = this.$signWindow.is(':visible'); + if ( visible ) { this.$signWindow.hide(); - this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign); - this.$signButton.find('span.able-clipped').text(this.tt.showSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 0; - this.$signButton.focus().addClass('able-focus'); + this.$signButton.trigger('focus').addClass('able-focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.closingSign = false; }, 100); - } - else { + } else { this.positionDraggableWindow('sign'); this.$signWindow.show(); // showing signWindow has a cascading effect of showing all content within signWindow // need to re-hide the popup menu this.$signPopup.hide(); - this.$signButton.removeClass('buttonOff').attr('aria-label',this.tt.hideSign); - this.$signButton.find('span.able-clipped').text(this.tt.hideSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 1; this.focusNotClick = true; - this.$signWindow.find('button').first().focus(); + this.$signWindow.find('button').first().trigger('focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.focusNotClick = false; }, 100); } - this.updateCookie('prefSign'); + this.updatePreferences('prefSign'); }; - AblePlayer.prototype.isFullscreen = function () { - - // NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen, - // which is defined in setFullscreen() - // This function returns true if any element is fullscreen - // but doesn't tell us whether a particular element is in fullscreen - // (e.g., if there are multiple players on the page) - // The Boolean this.fullscreen is defined separately for each player instance - - if (this.nativeFullscreenSupported()) { - return (document.fullscreenElement || - document.webkitFullscreenElement || - document.webkitCurrentFullscreenElement || - document.mozFullscreenElement || - document.msFullscreenElement) ? true : false; - } - else { - return this.modalFullscreenActive ? true : false; - } - } - AblePlayer.prototype.setFullscreen = function (fullscreen) { if (this.fullscreen == fullscreen) { - // replace isFullscreen() with a Boolean. see function for explanation return; } var thisObj = this; @@ -10116,114 +8770,71 @@ if (typeof module !== "undefined" && module.exports) { if (this.nativeFullscreenSupported()) { // Note: many varying names for options for browser compatibility. if (fullscreen) { + var scroll = { + x: window.pageXOffset || 0, + y: window.pageYOffset || 0 + } + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.rePositionDraggableWindow("transcript"); + } + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.rePositionDraggableWindow("sign"); + } + this.scrollPosition = scroll; // Initialize fullscreen - if (el.requestFullscreen) { el.requestFullscreen(); - } - else if (el.webkitRequestFullscreen) { + } else if (el.webkitRequestFullscreen) { el.webkitRequestFullscreen(); } - else if (el.mozRequestFullscreen) { - el.mozRequestFullscreen(); - } - else if (el.msRequestFullscreen) { - el.msRequestFullscreen(); - } this.fullscreen = true; - } - else { + } else { // Exit fullscreen - this.restoringAfterFullscreen = true; + this.restoringAfterFullscreen = true; if (document.exitFullscreen) { document.exitFullscreen(); - } - else if (document.webkitExitFullscreen) { + } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); - } - else if (document.webkitCancelFullscreen) { + } else if (document.webkitCancelFullscreen) { document.webkitCancelFullscreen(); } - else if (document.mozCancelFullscreen) { - document.mozCancelFullscreen(); + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.positionDraggableWindow("transcript"); } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.positionDraggableWindow("sign"); } this.fullscreen = false; } + } else { + // Removed non-native fullscreen mode in 4.8, which only supported iOS. + // Native fullscreen is on iOS 18+ devices behind a feature flag + // The polyfill hasn't worked for years. } - else { - // Non-native fullscreen support through modal dialog. - // Create dialog on first run through. - if (!this.fullscreenDialog) { - var $dialogDiv = $('<div>'); - // create a hidden alert, communicated to screen readers via aria-describedby - var $fsDialogAlert = $('<p>',{ - 'class': 'able-screenreader-alert' - }).text(this.tt.fullscreen); // In English: "Full screen"; TODO: Add alert text that is more descriptive - $dialogDiv.append($fsDialogAlert); - // now render this as a dialog - this.fullscreenDialog = new AccessibleDialog($dialogDiv, this.$fullscreenButton, 'dialog', true, 'Fullscreen video player', $fsDialogAlert, this.tt.exitFullscreen, '100%', true, function () { thisObj.handleFullscreenToggle() }); - $('body').append($dialogDiv); - } - - // Track whether paused/playing before moving element; moving the element can stop playback. - var wasPaused = this.paused; - - if (fullscreen) { - this.modalFullscreenActive = true; - this.fullscreenDialog.show(); - - // Move player element into fullscreen dialog, then show. - // Put a placeholder element where player was. - this.$modalFullscreenPlaceholder = $('<div class="placeholder">'); - this.$modalFullscreenPlaceholder.insertAfter($el); - $el.appendTo(this.fullscreenDialog.modal); - - // Column left css is 50% by default; set to 100% for full screen. - if ($el === this.$ableColumnLeft) { - $el.width('100%'); - } - var newHeight = $(window).height() - this.$playerDiv.height(); - if (typeof this.$descDiv !== 'undefined') { - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - } - } - else { - this.modalFullscreenActive = false; - if ($el === this.$ableColumnLeft) { - $el.width('50%'); - } - $el.insertAfter(this.$modalFullscreenPlaceholder); - this.$modalFullscreenPlaceholder.remove(); - this.fullscreenDialog.hide(); - } - - // Resume playback if moving stopped it. - if (!wasPaused && this.paused) { - this.playMedia(); - } - } - // add event handlers for changes in fullscreen mode. - // Browsers natively trigger this event with the Escape key, - // in addition to clicking the exit fullscreen button - $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(e) { + // add event handlers for changes in fullscreen mode. + // Browsers natively trigger this event with the Escape key, + // in addition to clicking the exit fullscreen button + $(document).on('fullscreenchange webkitfullscreenchange', function(e) { // NOTE: e.type = the specific event that fired (in case needing to control for browser-specific idiosyncrasies) if (!thisObj.fullscreen) { // user has just exited full screen thisObj.restoringAfterFullscreen = true; - } - else if (!thisObj.clickedFullscreenButton) { + } else if (!thisObj.clickedFullscreenButton) { // user triggered fullscreenchange without clicking fullscreen button thisObj.fullscreen = false; thisObj.restoringAfterFullscreen = true; } thisObj.resizePlayer(); thisObj.refreshControls('fullscreen'); - + // Reset scrollPosition after closing fullscreen. + if ( thisObj.scrollPosition ) { + scroll = thisObj.scrollPosition; + window.scrollTo( scroll.x, scroll.y ); + } // NOTE: The fullscreenchange (or browser-equivalent) event is triggered twice // when exiting fullscreen via the "Exit fullscreen" button (only once if using Escape) // Not sure why, but consequently we need to be sure thisObj.clickedFullscreenButton @@ -10233,9 +8844,9 @@ if (typeof module !== "undefined" && module.exports) { // resetting clickedFullscreenButton after a timeout seems to be better approach setTimeout(function() { thisObj.clickedFullscreenButton = false; - thisObj.restoringAfterFullscreen = false; - },1000); - }); + thisObj.restoringAfterFullscreen = false; + },100); + }); }; AblePlayer.prototype.handleFullscreenToggle = function () { @@ -10244,8 +8855,7 @@ if (typeof module !== "undefined" && module.exports) { this.setFullscreen(!this.fullscreen); if (stillPaused) { this.pauseMedia(); // when toggling fullscreen and media is just paused, keep media paused. - } - else if (!stillPaused) { + } else if (!stillPaused) { this.playMedia(); // when toggling fullscreen and media is playing, continue playing. } // automatically hide controller in fullscreen mode @@ -10257,8 +8867,7 @@ if (typeof module !== "undefined" && module.exports) { this.fadeControls('out'); this.controlsHidden = true; } - } - else { + } else { // exit fullscreen mode this.hideControls = this.hideControlsOriginal; if (!this.hideControls) { // do not hide controls @@ -10273,89 +8882,132 @@ if (typeof module !== "undefined" && module.exports) { } } } - // don't resizePlayer yet; that will be called in response to the window resize event - // this.resizePlayer(); + // don't resizePlayer yet; that will be called in response to the window resize event }; AblePlayer.prototype.handleTranscriptLockToggle = function (val) { this.autoScrollTranscript = val; // val is boolean this.prefAutoScrollTranscript = +val; // convert boolean to numeric 1 or 0 for cookie - this.updateCookie('prefAutoScrollTranscript'); + this.updatePreferences('prefAutoScrollTranscript'); this.refreshControls('transcript'); }; + AblePlayer.prototype.getIcon = function( $button, id, forceImg = false ) { + // Remove existing HTML before generating. + // iconData: [0 = svg viewbox, 1 = svg path, 2 = icon font class, 3 = image file] + var iconType = this.iconType; + var iconData = this.getIconData( id ); + iconType = ( null === iconData[3] ) ? 'svg' : iconType; + iconType = ( forceImg === true ) ? 'img' : iconType; - AblePlayer.prototype.showTooltip = function($tooltip) { + var existingIcon = $button.find( iconType + '#ableplayer-' + id ); + // Avoid repainting icon if there's no change. + if ( existingIcon.length > 0 ) { + return; + } + $button.find('svg, img, span').remove(); + + if (iconType === 'font') { + var $buttonIcon = $('<span>', { + 'class': iconData[2], + }); + $button.append( $buttonIcon ); + } else if (iconType === 'svg') { + // Function to create SVG nodes. + function getNode(n, v) { + n = document.createElementNS("http://www.w3.org/2000/svg", n); + for (var p in v) { + n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m) { + return "-" + m.toLowerCase(); + }), v[p]); + } + return n; + } + var icon = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ); + icon.setAttribute( 'focusable', 'false' ); + icon.setAttribute( 'aria-hidden', 'true'); + icon.setAttribute( 'viewBox', iconData[0] ); + icon.setAttribute( 'id', 'ableplayer-' + id ); + let path = getNode( 'path', { d: iconData[1] } ); + icon.appendChild( path ); + + $button.append( icon ); + // Refresh the DOM. + $button.html($button.html()); + } else { + var $buttonImg = $('<img>',{ + 'src': iconData[3], + 'alt': '', + 'role': 'presentation' + }); + $button.append($buttonImg); + $button.find('img').attr('src',iconData[3]); + } + }; + + AblePlayer.prototype.setText = function( $button, text ) { + $button.attr( 'aria-label', text ); + }; - if (($tooltip).is(':animated')) { - $tooltip.stop(true,true).show(); + AblePlayer.prototype.toggleButtonState = function($button, isOn, onLabel, offLabel, ariaPressed = false, ariaExpanded = false) { + // isOn means "the feature is being turned on". + let buttonOff = ( $button.hasClass( 'buttonOff' ) ) ? true : false; + if ( buttonOff && ! isOn || ! buttonOff && isOn ) { + // Only toggle state if button state does not match feature state. + return; } - else { - $tooltip.stop().show(); + if (! isOn) { + $button.addClass('buttonOff').attr('aria-label', offLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'false'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'false' ); + } + } else { + $button.removeClass('buttonOff').attr('aria-label', onLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'true'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'true' ); + } } }; - AblePlayer.prototype.showAlert = function( msg, location ) { + AblePlayer.prototype.showTooltip = function($tooltip) { + + $tooltip.show(); + }; + + AblePlayer.prototype.showAlert = function( msg, location = 'main' ) { // location is either of the following: // 'main' (default) // 'screenreader (visibly hidden) // 'sign' (sign language window) - // 'transcript' (trasncript window) - var thisObj, $alertBox, $parentWindow, alertLeft, alertTop; + // 'transcript' (transcript window) + var thisObj, $alertBox, $parentWindow; thisObj = this; - + $alertBox = thisObj.$alertBox; + $parentWindow = thisObj.$ableDiv; if (location === 'transcript') { - $alertBox = this.$transcriptAlert; - $parentWindow = this.$transcriptArea; - } - else if (location === 'sign') { - $alertBox = this.$signAlert; - $parentWindow = this.$signWindow; - } - else if (location === 'screenreader') { - $alertBox = this.$srAlertBox; - } - else { - $alertBox = this.$alertBox; - } - $alertBox.text(msg).show(); - if (location == 'transcript' || location === 'sign') { - if ($parentWindow.width() > $alertBox.width()) { - alertLeft = $parentWindow.width() / 2 - $alertBox.width() / 2; - } - else { - // alert box is wider than its container. Position it far left and let it wrap - alertLeft = 10; - } - if (location === 'sign') { - // position alert in the lower third of the sign window (to avoid covering the signer) - alertTop = ($parentWindow.height() / 3) * 2; - } - else if (location === 'transcript') { - // position alert just beneath the toolbar to avoid getting lost among transcript text - alertTop = this.$transcriptToolbar.height() + 30; - } - $alertBox.css({ - top: alertTop + 'px', - left: alertLeft + 'px' - }); - } - else if (location !== 'screenreader') { - // The original formula incorporated offset() into the calculation - // but at some point this began resulting in an alert that's off-centered - // Changed in v2.2.17, but here's the original for reference in case needed: - // left: this.$playerDiv.offset().left + (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - $alertBox.css({ - left: (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - }); + $parentWindow = thisObj.$transcriptArea; + } else if (location === 'sign') { + $parentWindow = thisObj.$signWindow; + } else if (location === 'screenreader') { + $alertBox = thisObj.$srAlertBox; } + $alertBox.find('span').text(msg); + $alertBox.appendTo($parentWindow) + $alertBox.css( {'display': 'flex'} ); + if (location !== 'screenreader') { - setTimeout(function () { - $alertBox.fadeOut(300); - }, 3000); + setTimeout( function () { + $alertBox.hide(); + }, 30000 ); } }; @@ -10364,22 +9016,10 @@ if (typeof module !== "undefined" && module.exports) { // returns true if the target alert has already been shown // useful for throttling alerts that only need to be shown once // e.g., move alerts with instructions for dragging a window - if (which === 'transcript') { - if (this.showedTranscriptAlert) { - return true; - } - else { - return false; - } - } - else if (which === 'sign') { - if (this.showedSignAlert) { - return true; - } - else { - return false; - } + return this.showedTranscriptAlert ?? false; + } else if (which === 'sign') { + return this.showedSignAlert ?? false; } return false; } @@ -10387,105 +9027,82 @@ if (typeof module !== "undefined" && module.exports) { // Resizes all relevant player attributes. AblePlayer.prototype.resizePlayer = function (width, height) { - var captionSizeOkMin, captionSizeOkMax, captionSize, newCaptionSize, newLineHeight; - - var newWidth, newHeight, $iframe, alertTop; + var captionSize, newWidth, newHeight, $iframe; - if (this.mediaType === 'audio') { - return; + if (this.mediaType === 'audio') { + return; } - - if (typeof width !== 'undefined' && typeof height !== 'undefined') { - // this is being called the first time a player is initialized + if (typeof width !== 'undefined' && typeof height !== 'undefined') { + // this is being called the first time a player is initialized // width and height were collected from the HTML, YouTube, or Vimeo media API - // so are reflective of the actual size of the media - // use these values to calculate aspectRatio - this.aspectRatio = height / width; - if (this.playerWidth) { - // default width is already defined via a width or data-width attribute. Use that. - newWidth = this.playerWidth; - if (this.playerHeight) { - newHeight = this.playerHeight; - } - else { - newHeight = Math.round(newWidth * this.aspectRatio); - this.playerHeight = newHeight; - } - } - else { - // playerWidth was not defined via HTML attributes - if (this.player === 'html5') { - newWidth = $(window).width(); - } - else { - newWidth = this.$ableWrapper.width(); - } - newHeight = Math.round(newWidth * this.aspectRatio); - } - } - else if (this.fullscreen) { - this.$ableWrapper.addClass('fullscreen'); - newWidth = $(window).width(); + // so are reflective of the actual size of the media + // use these values to calculate aspectRatio + this.aspectRatio = height / width; + if (this.playerWidth) { + // default width is already defined via a width or data-width attribute. Use that. + newWidth = this.playerWidth; + if (this.playerHeight) { + newHeight = this.playerHeight; + } else { + newHeight = Math.round(newWidth * this.aspectRatio); + this.playerHeight = newHeight; + } + } else { + // playerWidth was not defined via HTML attributes + newWidth = (this.player === 'html5') ? $(window).width() : this.$ableWrapper.width(); + newHeight = Math.round(newWidth * this.aspectRatio); + } + } else if (this.fullscreen) { + this.$ableWrapper.addClass('fullscreen'); + newWidth = $(window).width(); // the 5 pixel buffer is arbitrary, but results in a better fit for all browsers - newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; + newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; this.positionCaptions('overlay'); - } - else { // not fullscreen, and not first time initializing player + } else { // not fullscreen, and not first time initializing player this.$ableWrapper.removeClass('fullscreen'); - if (this.player === 'html5') { - if (this.playerWidth) { - newWidth = this.playerWidth; - } - else { - // use full size of window - // player will be downsized to fit container if CSS requires it - newWidth = $(window).width(); - } - } - else { - newWidth = this.$ableWrapper.width(); + if (this.player === 'html5') { + newWidth = (this.playerWidth) ? this.playerWidth : $(window).width(); + } else { + newWidth = this.$ableWrapper.width(); } - newHeight = Math.round(newWidth * this.aspectRatio); - this.positionCaptions(this.prefCaptionsPosition); + newHeight = Math.round(newWidth * this.aspectRatio); + this.positionCaptions(this.prefCaptionsPosition); } if (this.debug) { - + } // Now size the player with newWidth and newHeight - if (this.player === 'youtube' || this.player === 'vimeo') { - $iframe = this.$ableWrapper.find('iframe'); - if (this.player === 'youtube' && this.youTubePlayer) { - // alternatively, YouTube API offers a method for setting the video size - // this adds width and height attributes to the iframe - // but might have other effects, so best to do it this way - this.youTubePlayer.setSize(newWidth,newHeight); - } - else { - // Vimeo API does not have a method for changing size of player - // Therefore, need to change iframe attributes directly + if (this.player === 'youtube' || this.player === 'vimeo') { + $iframe = this.$ableWrapper.find('iframe'); + if (this.player === 'youtube' && this.youTubePlayer) { + // alternatively, YouTube API offers a method for setting the video size + // this adds width and height attributes to the iframe + // but might have other effects, so best to do it this way + this.youTubePlayer.setSize(newWidth,newHeight); + } else { + // Vimeo API does not have a method for changing size of player + // Therefore, need to change iframe attributes directly $iframe.attr({ 'width': newWidth, 'height': newHeight - }); + }); } - if (this.playerWidth && this.playerHeight) { - if (this.fullscreen) { - // remove constraints - $iframe.css({ + if (this.playerWidth && this.playerHeight) { + if (this.fullscreen) { + // remove constraints + $iframe.css({ 'max-width': '', 'max-height': '' - }); - } - else { + }); + } else { // use CSS on iframe to enforce explicitly defined size constraints - $iframe.css({ + $iframe.css({ 'max-width': this.playerWidth + 'px', 'max-height': this.playerHeight + 'px' }); } } - } - else if (this.player === 'html5') { + } else if (this.player === 'html5') { if (this.fullscreen) { this.$media.attr({ 'width': newWidth, @@ -10495,46 +9112,37 @@ if (typeof module !== "undefined" && module.exports) { 'width': newWidth, 'height': newHeight }); - } - else { - // No constraints. Let CSS handle the positioning. + } else { + // No constraints. Let CSS handle the positioning. this.$media.removeAttr('width height'); - this.$ableWrapper.css({ - 'width': newWidth + 'px', - 'height': 'auto' - }); - } + this.$ableWrapper.removeAttr( 'style' ); + } } // Resize captions if (typeof this.$captionsDiv !== 'undefined') { - // Font-size is too small in full screen view - // use viewport units (vw) instead - // % units work fine if not fullscreen - // prefCaptionSize is expressed as a percentage - captionSize = parseInt(this.prefCaptionsSize,10); - if (this.fullscreen) { - captionSize = (captionSize / 100) + 'vw'; + // Font-size is too small in full screen view + // use viewport units (vw) for large viewports + // % units work fine if not fullscreen + // prefCaptionSize is expressed as a percentage + var isSmallScreen = false; + var windowWidth = window.screen.width; + if ( windowWidth < 1200 ) { + isSmallScreen = true; } - else { - captionSize = captionSize + '%'; + captionSize = parseInt(this.prefCaptionsSize,10); + if (this.fullscreen && ! isSmallScreen ) { + captionSize = (captionSize / 100) + 'vw'; + } else if ( this.fullscreen && isSmallScreen ) { + captionSize = '1.2rem'; + } else { + captionSize = captionSize + '%'; } this.$captionsDiv.css({ 'font-size': captionSize }); } - - // Reposition alert message (video player only) - // just below the vertical center of the mediaContainer - // hopefully above captions, but not too far from the controller bar - if (this.mediaType === 'video') { - alertTop = Math.round(this.$mediaContainer.height() / 3) * 2; - this.$alertBox.css({ - top: alertTop + 'px' - }); - } - - this.refreshControls(); + this.refreshControls(); }; AblePlayer.prototype.retrieveOffscreenWindow = function( which, width, height ) { @@ -10547,8 +9155,7 @@ if (typeof module !== "undefined" && module.exports) { if (which == 'transcript') { window = this.$transcriptArea; - } - else if (which == 'sign') { + } else if (which == 'sign') { window = this.$signWindow; } windowWidth = window.width(); @@ -10577,41 +9184,18 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.getHighestZIndex = function() { - - // returns the highest z-index on page - // used to ensure dialogs (or potentially other windows) are on top - - var max, $elements, z; - max = 0; - - // exclude the Able Player dialogs and windows - $elements = $('body ').not('.able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area'); - - $elements.each(function(){ - z = $(this).css('z-index'); - if (Number.isInteger(+z)) { // work only with integer values, not 'auto' - if (parseInt(z) > max) { - max = parseInt(z); - } - } - }); - return max; - }; - AblePlayer.prototype.updateZIndex = function(which) { // update z-index of 'transcript' or 'sign', relative to each other // direction is always 'up' (i.e., move window to top) // windows come to the top when the user clicks on them - var defHighZ, defLowZ, highestZ, transcriptZ, signZ, newHighZ, newLowZ; + var defHighZ, defLowZ, transcriptZ, signZ, newHighZ, newLowZ; // set the default z-indexes, as defined in ableplayer.css defHighZ = 8000; // by default, assigned to the sign window defLowZ = 7000; // by default, assigned to the transcript area - highestZ = this.getHighestZIndex(); // highest z-index on the page, excluding Able Player windows & modals - // NOTE: Although highestZ is collected here, it currently isn't used. + // Previously collected the highest z-index. Removed in 4.6. // If something on the page has a higher z-index than the transcript or sign window, do we care? // Excluding it here assumes "No". Our immediate concern is with the relationship between our own components. // If we elevate our z-indexes so our content is on top, we run the risk of starting a z-index war. @@ -10625,8 +9209,7 @@ if (typeof module !== "undefined" && module.exports) { // restore to the default this.$transcriptArea.css('z-index',defLowZ); } - } - else if (typeof this.$signWindow !== 'undefined') { + } else if (typeof this.$signWindow !== 'undefined') { signZ = parseInt(this.$signWindow.css('z-index')); if (signZ > defHighZ) { // restore to the default @@ -10646,24 +9229,20 @@ if (typeof module !== "undefined" && module.exports) { // the two windows are equal; restore defaults (the target window will be on top) newHighZ = defHighZ; newLowZ = defLowZ; - } - else if (transcriptZ > signZ) { + } else if (transcriptZ > signZ) { if (which === 'transcript') { // transcript is already on top; nothing to do return false; - } - else { + } else { // swap z's newHighZ = transcriptZ; newLowZ = signZ; } - } - else { // signZ is greater + } else { // signZ is greater if (which === 'sign') { // sign is already on top; nothing to do return false; - } - else { + } else { newHighZ = signZ; newLowZ = transcriptZ; } @@ -10672,8 +9251,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { this.$transcriptArea.css('z-index',newHighZ); this.$signWindow.css('z-index',newLowZ); - } - else if (which === 'sign') { + } else if (which === 'sign') { this.$signWindow.css('z-index',newHighZ); this.$transcriptArea.css('z-index',newLowZ); } @@ -10690,7 +9268,7 @@ if (typeof module !== "undefined" && module.exports) { // This was a group decision based on the belief that users may want a transcript // that is in a different language than the captions - var i, captions, descriptions, chapters, meta, langHasChanged; + var i, captions, descriptions, chapters, meta; // Captions for (i = 0; i < this.captions.length; i++) { @@ -10732,21 +9310,20 @@ if (typeof module !== "undefined" && module.exports) { // chapters popup is setup automatically when setupPopups() is called later with no param // not sure why it was included here. // this.setupPopups('chapters'); - } - else if (source === 'transcript') { + } else if (source === 'transcript') { this.transcriptCaptions = captions; this.transcriptChapters = chapters; this.transcriptDescriptions = descriptions; } if (this.selectedDescriptions) { - // updating description voice to match new description language - this.setDescriptionVoice(); - if (this.$sampleDescDiv) { - if (this.sampleText) { - for (i = 0; i < this.sampleText.length; i++) { - if (this.sampleText[i].lang === this.selectedDescriptions.language) { - this.currentSampleText = this.sampleText[i]['text']; - this.$sampleDescDiv.html(this.currentSampleText); + // updating description voice to match new description language + this.setDescriptionVoice(); + if (this.$sampleDescDiv) { + if (this.sampleText) { + for (i = 0; i < this.sampleText.length; i++) { + if (this.sampleText[i].lang === this.selectedDescriptions.language) { + this.currentSampleText = this.sampleText[i]['text']; + this.$sampleDescDiv.html(this.currentSampleText); } } } @@ -10878,7 +9455,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 1; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); thisObj.refreshControls("captions"); }; }; @@ -10914,7 +9491,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 0; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); if (!this.swappingSrc) { thisObj.refreshControls("captions"); thisObj.updateCaption(); @@ -10941,10 +9518,7 @@ if (typeof module !== "undefined" && module.exports) { if (typeof thisCaption !== "undefined") { if (this.currentCaption !== thisCaption) { // it's time to load the new caption into the container div - captionText = this.flattenCueForCaption(cues[thisCaption]).replace( - /\n/g, - "<br>" - ); + captionText = this.flattenCueForCaption(cues[thisCaption]).replace( /\n/g, "<br>" ); this.$captionsDiv.html(captionText); this.currentCaption = thisCaption; @@ -11026,24 +9600,24 @@ if (typeof module !== "undefined" && module.exports) { switch (pref) { case "prefCaptionsFont": - options[0] = ["serif", this.tt.serif]; - options[1] = ["sans-serif", this.tt.sans]; - options[2] = ["cursive", this.tt.cursive]; - options[3] = ["fantasy", this.tt.fantasy]; - options[4] = ["monospace", this.tt.monospace]; + options[0] = ["serif", this.translate( 'serif', 'serif' )]; + options[1] = ["sans-serif", this.translate( 'sans', 'sans-serif' )]; + options[2] = ["cursive", this.translate( 'cursive', 'cursive' )]; + options[3] = ["fantasy", this.translate( 'fantasy', 'fantasy' )]; + options[4] = ["monospace", this.translate( 'monospace', 'monospace' )]; break; case "prefCaptionsColor": case "prefCaptionsBGColor": // HTML color values must be in English - options[0] = ["white", this.tt.white]; - options[1] = ["yellow", this.tt.yellow]; - options[2] = ["green", this.tt.green]; - options[3] = ["cyan", this.tt.cyan]; - options[4] = ["blue", this.tt.blue]; - options[5] = ["magenta", this.tt.magenta]; - options[6] = ["red", this.tt.red]; - options[7] = ["black", this.tt.black]; + options[0] = ["white", this.translate( 'white', 'white' )]; + options[1] = ["yellow", this.translate( 'yellow', 'yellow' )]; + options[2] = ["green", this.translate( 'green', 'green' )]; + options[3] = ["cyan", this.translate( 'cyan', 'cyan' )]; + options[4] = ["blue", this.translate( 'blue', 'blue' )]; + options[5] = ["magenta", this.translate( 'magenta', 'magenta' )]; + options[6] = ["red", this.translate( 'red', 'red' )]; + options[7] = ["black", this.translate( 'black', 'black' )]; break; case "prefCaptionsSize": @@ -11063,8 +9637,8 @@ if (typeof module !== "undefined" && module.exports) { break; case "prefCaptionsStyle": - options[0] = this.tt.captionsStylePopOn; - options[1] = this.tt.captionsStyleRollUp; + options[0] = this.translate( 'captionsStylePopOn', 'Pop-on' ); + options[1] = this.translate( 'captionsStyleRollUp', 'Roll-up' ); break; case "prefCaptionsPosition": @@ -11102,7 +9676,7 @@ if (typeof module !== "undefined" && module.exports) { // this function handles stylizing of the sample caption text in the Prefs dialog // plus the actual production captions // TODO: consider applying the same user prefs to visible text-based description - var property, newValue, opacity, lineHeight; + var property, newValue, opacity; if (typeof $element !== "undefined") { if (pref == "prefCaptionsPosition") { @@ -11198,16 +9772,17 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.populateChaptersDiv = function() { - var headingLevel, headingType, headingId, $chaptersHeading, - $chaptersList; - + var headingLevel, headingType, headingId, $chaptersHeading; + if ( ! this.chaptersDivLocation ) { + return; + } if ($('#' + this.chaptersDivLocation)) { this.$chaptersDiv = $('#' + this.chaptersDivLocation); this.$chaptersDiv.addClass('able-chapters-div'); // empty content from previous build before starting fresh - this.$chaptersDiv.empty(); + this.$chaptersDiv.empty(); // add optional header if (this.chaptersTitle) { @@ -11223,10 +9798,9 @@ if (typeof module !== "undefined" && module.exports) { this.$chaptersNav = $('<nav>'); if (this.chaptersTitle) { - this.$chaptersNav.attr('aria-labelledby',headingId); - } - else { - this.$chaptersNav.attr('aria-label',this.tt.chapters); + this.$chaptersNav.attr( 'aria-labelledby', headingId ); + } else { + this.$chaptersNav.attr( 'aria-label', this.translate( 'chapters', 'Chapters' ) ); } this.$chaptersDiv.append(this.$chaptersNav); @@ -11238,32 +9812,25 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.updateChaptersList = function() { var thisObj, cues, $chaptersList, c, thisChapter, - $chapterItem, $chapterButton, buttonId, hasDefault, - getClickFunction, $clickedItem, $chaptersList, thisChapterIndex; + $chapterItem, $chapterButton, hasDefault, + getClickFunction, $clickedItem, $chaptersList; thisObj = this; - // TODO: Update this so it can change the chapters popup menu + // TODO: Update this so it can change the chapters popup menu // currently it only works if chapters are in an external container if (!this.$chaptersNav) { return false; } if (typeof this.useChapterTimes === 'undefined') { - if (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) { - this.useChapterTimes = true; - } - else { - this.useChapterTimes = false; - } + this.useChapterTimes = (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) ? true : false; } if (this.useChapterTimes) { cues = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { cues = this.chapters[0].cues; - } - else { + } else { cues = []; } if (cues.length > 0) { @@ -11282,7 +9849,6 @@ if (typeof module !== "undefined" && module.exports) { thisObj.seekTrigger = 'chapter'; $clickedItem = $(this).closest('li'); $chaptersList = $(this).closest('ul').find('li'); - thisChapterIndex = $chaptersList.index($clickedItem); $chaptersList.removeClass('able-current-chapter') .children('button').removeAttr('aria-current'); $clickedItem.addClass('able-current-chapter') @@ -11351,7 +9917,7 @@ if (typeof module !== "undefined" && module.exports) { return; } - var chapters, i, thisChapterIndex, chapterLabel; + var chapters, i, thisChapterIndex; chapters = this.selectedChapters.cues; for (i = 0; i < chapters.length; i++) { @@ -11401,12 +9967,10 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends, adjust chapter end to match video end chapterEnd = this.duration; this.currentChapter.end = this.duration; - } - else { + } else { chapterEnd = this.currentChapter.end; } - } - else { // this is not the last chapter + } else { // this is not the last chapter chapterEnd = this.currentChapter.end; } return chapterEnd - this.currentChapter.start; @@ -11422,8 +9986,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.elapsed > this.currentChapter.start) { return this.elapsed - this.currentChapter.start; - } - else { + } else { return 0; } }; @@ -11436,12 +9999,10 @@ if (typeof module !== "undefined" && module.exports) { var newTime = this.currentChapter.start + chapterTime; if (newTime > this.currentChapter.end) { return this.currentChapter.end; - } - else { + } else { return newTime; } - } - else { + } else { return chapterTime; } }; @@ -11462,7 +10023,7 @@ if (typeof module !== "undefined" && module.exports) { setTimeout(function() { thisObj.hidingPopup = false; }, 100); - thisObj.$chaptersButton.focus(); + thisObj.$chaptersButton.trigger('focus'); } }; @@ -11516,7 +10077,7 @@ if (typeof module !== "undefined" && module.exports) { cueText = this.flattenCueForMeta(cues[thisMeta]); cueLines = cueText.split("\n"); for (i = 0; i < cueLines.length; i++) { - line = $.trim(cueLines[i]); + line = cueLines[i].trim(); if (line.toLowerCase().trim() === "pause") { // don't show big play button when pausing via metadata this.hideBigPlayButton = true; @@ -11524,7 +10085,7 @@ if (typeof module !== "undefined" && module.exports) { } else if (line.toLowerCase().substring(0, 6) == "focus:") { focusTarget = line.substring(6).trim(); if ($(focusTarget).length) { - $(focusTarget).focus(); + $(focusTarget).trigger('focus'); } } else { if ($(line).length) { @@ -11535,7 +10096,11 @@ if (typeof module !== "undefined" && module.exports) { typeof showDuration !== "undefined" && !isNaN(showDuration) ) { - $(line).show().delay(showDuration).fadeOut(); + $(line).show(); + const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + delay(showDuration).then(() => { + $(line).hide(); + }); } else { // no duration specified. Just show the element until end time specified in VTT file $(line).show(); @@ -11607,11 +10172,11 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.setupTranscript = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - if (this.usingYouTubeCaptions || this.usingVimeoCaptions) { - // a transcript is not possible + if (this.usingYouTubeCaptions || this.usingVimeoCaptions || this.hideTranscriptButton ) { + // a transcript is not possible or is disabled. this.transcriptType = null; deferred.resolve(); } else { @@ -11626,10 +10191,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (this.transcriptType) { - if ( - this.transcriptType === "popup" || - this.transcriptType === "external" - ) { + if ( this.transcriptType === "popup" || this.transcriptType === "external" ) { this.injectTranscriptArea(); deferred.resolve(); } else if (this.transcriptType === "manual") { @@ -11656,7 +10218,7 @@ if (typeof module !== "undefined" && module.exports) { this.$transcriptArea = $("<div>", { class: "able-transcript-area", role: "dialog", - "aria-label": this.tt.transcriptTitle, + "aria-label": this.translate( 'transcriptTitle', 'Transcript' ), }); this.$transcriptToolbar = $("<div>", { @@ -11676,11 +10238,15 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); - this.$transcriptToolbar.append( - $autoScrollLabel, - this.$autoScrollTranscriptCheckbox - ); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); + $autoScrollContainer = $( '<div>', { + 'class': 'autoscroll-transcript' + }); + $autoScrollContainer.append( + $autoScrollLabel, + this.$autoScrollTranscriptCheckbox + ); + this.$transcriptToolbar.append( $autoScrollContainer ); // Add field for selecting a transcript language // Only necessary if there is more than one language @@ -11690,7 +10256,7 @@ if (typeof module !== "undefined" && module.exports) { }); $languageSelectLabel = $("<label>", { for: "transcript-language-select-" + this.mediaId, - }).text(this.tt.language); + }).text( this.translate( 'language', 'Language' ) ); this.$transcriptLanguageSelect = $("<select>", { id: "transcript-language-select-" + this.mediaId, }); @@ -11717,6 +10283,8 @@ if (typeof module !== "undefined" && module.exports) { // If client has provided separate transcript location, put it there. // Otherwise append it to the body if (this.transcriptDivLocation) { + this.$transcriptArea.removeAttr( 'role' ); + this.$transcriptArea.removeAttr( 'aria-label' ); $("#" + this.transcriptDivLocation).append(this.$transcriptArea); } else { this.$ableWrapper.append(this.$transcriptArea); @@ -11743,7 +10311,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addTranscriptAreaEvents = function () { var thisObj = this; - this.$autoScrollTranscriptCheckbox.click(function () { + this.$autoScrollTranscriptCheckbox.on( 'click', function () { thisObj.handleTranscriptLockToggle( thisObj.$autoScrollTranscriptCheckbox.prop("checked") ); @@ -11763,7 +10331,7 @@ if (typeof module !== "undefined" && module.exports) { ); if (typeof this.$transcriptLanguageSelect !== "undefined") { - this.$transcriptLanguageSelect.on("click mousedown", function (e) { + this.$transcriptLanguageSelect.on('click', function (e) { // execute default behavior // prevent propagation of mouse event to toolbar or window e.stopPropagation(); @@ -11813,7 +10381,7 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); // Add an auto-scroll checkbox to the toolbar. this.$autoScrollTranscriptCheckbox = $autoScrollInput; @@ -11914,7 +10482,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$transcriptArea.length > 0) { this.$transcriptArea .find("span.able-transcript-seekpoint") - .click(function (e) { + .on( 'click', function (e) { thisObj.seekTrigger = "transcript"; var spanStart = parseFloat($(this).attr("data-start")); // Add a tiny amount so that we're inside the span. @@ -11993,9 +10561,9 @@ if (typeof module !== "undefined" && module.exports) { if (typeof this.transcriptTitle !== "undefined") { transcriptTitle = this.transcriptTitle; } else if (this.lyricsMode) { - transcriptTitle = this.tt.lyricsTitle; + transcriptTitle = this.translate( 'lyricsTitle', 'Lyrics' ); } else { - transcriptTitle = this.tt.transcriptTitle; + transcriptTitle = this.translate( 'transcriptTitle', 'Transcript' ); } if (!this.transcriptDivLocation) { @@ -12218,7 +10786,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (comp.type === "b" || comp.type == "i") { - result.push($tag, " "); + result.push($tag); } } else { for (var i = 0; i < comp.children.length; i++) { @@ -12231,13 +10799,22 @@ if (typeof module !== "undefined" && module.exports) { }; for (var i = 0; i < cap.components.children.length; i++) { + var next_child_tagname; + if ( i < cap.components.children.length - 1 ) { + next_child_tagname = cap.components.children[i + 1].tagName; + } var results = flattenComponentForCaption(cap.components.children[i]); for (var jj = 0; jj < results.length; jj++) { var result = results[jj]; if (typeof result === "string") { - if (thisObj.lyricsMode) { - // add <br> BETWEEN each caption and WITHIN each caption (if payload includes "\n") - result = result.replace(/\n/g, "<br>") + "<br>"; + if (thisObj.lyricsMode) { + // add <br> WITHIN each caption (if payload includes "\n") + result = result.replace(/\n/g,'<br>'); + + // add <br> BETWEEN each caption, but do not consider sibling style tags within this caption as the next caption! + if ( !next_child_tagname || ( next_child_tagname !== 'i' && next_child_tagname !== 'b' ) ) { + result += '<br>'; + } } else { // just add a space between captions result += " "; @@ -12326,7 +10903,6 @@ if (typeof module !== "undefined" && module.exports) { // organize transcript into blocks using [] and () as starting points var $components = $main.children(); var spanCount = 0; - var openBlock = true; $components.each(function () { if ($(this).hasClass("able-transcript-caption")) { if ( @@ -12336,10 +10912,7 @@ if (typeof module !== "undefined" && module.exports) { // this caption includes a bracket or parenth. Start a new block // close the previous block first if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } @@ -12348,16 +10921,24 @@ if (typeof module !== "undefined" && module.exports) { } else { // this is not a caption. Close the caption block if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } }); + // Close out remaining temp blocks. + $main = wrapTranscriptBlocks( $main ); + return $main; }; + + var wrapTranscriptBlocks = function( $main ) { + $main.find(".able-block-temp") + .removeClass("able-block-temp") + .wrapAll('<div class="able-transcript-block"></div>'); + + return $main; + } })(jQuery); (function ($) { @@ -12376,7 +10957,7 @@ if (typeof module !== "undefined" && module.exports) { // sanitize search string var cleanSearchString = DOMPurify.sanitize(this.searchString); if ($("#" + this.SearchDiv)) { - var searchStringHtml = "<p>" + this.tt.resultsSummary1 + " "; + var searchStringHtml = "<p>" + this.translate( 'resultsSummary1', 'You searched for:') + ' '; searchStringHtml += '<span id="able-search-term-echo">' + cleanSearchString + "</span>"; searchStringHtml += "</p>"; @@ -12388,19 +10969,16 @@ if (typeof module !== "undefined" && module.exports) { var $resultsSummary = $("<p>", { class: "able-search-results-summary", }); - var resultsSummaryText = this.tt.resultsSummary2; - resultsSummaryText += - " <strong>" + resultsArray.length + "</strong> "; - resultsSummaryText += this.tt.resultsSummary3 + " "; - resultsSummaryText += this.tt.resultsSummary4; - $resultsSummary.html(resultsSummaryText); + var resultsSummaryText = this.translate( 'resultsSummary2', 'Found %1 matching items.', [ '<strong>' + resultsArray.length + '</strong>' ] ); + resultsSummaryText += ' ' + this.translate( 'resultsSummary3', 'Click the time associated with any item to play the video from that point.' ); + $resultsSummary.html( resultsSummaryText ); var $resultsList = $("<ul>"); for (var i = 0; i < resultsArray.length; i++) { var resultId = "aria-search-result-" + i; var $resultsItem = $("<li>", {}); var itemStartTime = this.secondsToTime(resultsArray[i]["start"]); var itemLabel = - this.tt.searchButtonLabel + " " + itemStartTime["title"]; + this.translate( 'searchButtonLabel', 'Play at %1', [ itemStartTime["title"] ] ); var itemStartSpan = $("<button>", { class: "able-search-results-time", "data-start": resultsArray[i]["start"], @@ -12423,16 +11001,16 @@ if (typeof module !== "undefined" && module.exports) { class: "able-search-result-text", id: resultId, }); - itemText.html("..." + resultsArray[i]["caption"] + "..."); + itemText.html('...' + resultsArray[i]["caption"] + '...'); $resultsItem.append(itemStartSpan, itemText); $resultsList.append($resultsItem); } - $("#" + this.searchDiv) + $('#' + this.searchDiv) .html(searchStringHtml) .append($resultsSummary, $resultsList); } else { - var noResults = $("<p>").text(this.tt.noResultsFound); - $("#" + this.searchDiv) + var noResults = $('<p>').text( this.translate( 'noResultsFound', 'No results found.' ) ); + $('#' + this.searchDiv) .html(searchStringHtml) .append(noResults); } @@ -12526,36 +11104,36 @@ if (typeof module !== "undefined" && module.exports) { if (hours > 0) { value += hours + ":"; if (hours == 1) { - title += "1 " + this.tt.hour + " "; + title += "1 " + this.translate( 'hour', 'hour' ) + " "; } else { - title += hours + " " + this.tt.hours + " "; + title += hours + " " + this.translate( 'hours', 'hours' ) + " "; } } if (minutes < 10) { value += "0" + minutes + ":"; if (minutes > 0) { if (minutes == 1) { - title += "1 " + this.tt.minute + " "; + title += "1 " + this.translate( 'minute', 'minute' ) + " "; } else { - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } } } else { value += minutes + ":"; - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } if (seconds < 10) { value += "0" + seconds; if (seconds > 0) { if (seconds == 1) { - title += "1 " + this.tt.second + " "; + title += "1 " + this.translate( 'second', 'second' ) + " "; } else { - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } } } else { value += seconds; - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } var time = []; time["value"] = value; @@ -12568,7 +11146,6 @@ if (typeof module !== "undefined" && module.exports) { // Media events AblePlayer.prototype.onMediaUpdateTime = function (duration, elapsed) { - // duration and elapsed are passed from callback functions of Vimeo API events // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx @@ -12576,17 +11153,17 @@ if (typeof module !== "undefined" && module.exports) { this.getMediaTimes(duration,elapsed).then(function(mediaTimes) { thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - if (thisObj.duration > 0) { + if (thisObj.duration > 0) { // do all the usual time-sync stuff during playback if (thisObj.prefHighlight === 1) { thisObj.highlightTranscript(thisObj.elapsed); - } + } thisObj.updateCaption(thisObj.elapsed); thisObj.showDescription(thisObj.elapsed); thisObj.updateChapter(thisObj.elapsed); thisObj.updateMeta(thisObj.elapsed); - thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); - } + thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); + } }); }; @@ -12613,34 +11190,32 @@ if (typeof module !== "undefined" && module.exports) { this.playlistIndex = 0; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(0); - } - else { + } else { this.playing = false; this.paused = true; } - } - else { + } else { // this is not the last track. Play the next one. this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex) } } - this.refreshControls('init'); + this.refreshControls(); }; AblePlayer.prototype.onMediaNewSourceLoad = function () { - var loadIsComplete = false; + var loadIsComplete = false; if (this.cueingPlaylistItem) { - // this variable was set in order to address bugs caused by multiple firings of media 'end' event + // this variable was set to address bugs caused by multiple firings of media 'end' event // safe to reset now this.cueingPlaylistItem = false; } - if (this.recreatingPlayer) { - // same as above; different bugs - this.recreatingPlayer = false; + if (this.recreatingPlayer) { + // same as above; different bugs + this.recreatingPlayer = false; } if (this.playbackRate) { // user has set playbackRate on a previous src or track @@ -12651,10 +11226,9 @@ if (typeof module !== "undefined" && module.exports) { if (!this.startedPlaying || this.okToPlay) { // start playing; no further user action is required this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.seekTrigger == 'restart' || + } else if (this.seekTrigger == 'restart' || this.seekTrigger == 'chapter' || this.seekTrigger == 'transcript' || this.seekTrigger == 'search' @@ -12663,67 +11237,59 @@ if (typeof module !== "undefined" && module.exports) { // Not included: elements where user might click multiple times in succession // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play this.playMedia(); - loadIsComplete = true; - } - else if (this.swappingSrc) { + loadIsComplete = true; + } else if (this.swappingSrc) { // new source file has just been loaded if (this.hasPlaylist) { // a new source file from the playlist has just been loaded if ((this.playlistIndex !== this.$playlist.length) || this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.swapTime > 0) { - if (this.seekStatus === 'complete') { + } else if (this.swapTime > 0) { + if (this.seekStatus === 'complete') { if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else if (this.seekStatus === 'seeking') { - } - else { - if (this.swapTime === this.elapsed) { - // seek is finished! - this.seekStatus = 'complete'; + loadIsComplete = true; + } else if (this.seekStatus === 'seeking') { + // Do nothing. + } else { + if (this.swapTime === this.elapsed) { + // seek is finished! + this.seekStatus = 'complete'; if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else { - // seeking hasn't started yet - // first, determine whether it's possible - if (this.hasDescTracks) { + loadIsComplete = true; + } else { + // seeking hasn't started yet + // first, determine whether it's possible + if (this.hasDescTracks) { // do nothing. Unable to seek ahead if there are descTracks - loadIsComplete = true; - } - else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { + loadIsComplete = true; + } else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { // durations of two sources are close enough to making seek ahead in new source ok - this.seekStatus = 'seeking'; + this.seekStatus = 'seeking'; this.seekTo(this.swapTime); - } - else { - // durations of two sources are too dissimilar to support seeking ahead to swapTime. - loadIsComplete = true; + } else { + // durations of two sources are too dissimilar to support seeking ahead to swapTime. + loadIsComplete = true; } } } - } - else { - // swapTime is 0. No seeking required. - if (this.playing) { - this.playMedia(); - // swap is complete. Reset vars. - loadIsComplete = true; + } else { + // swapTime is 0. No seeking required. + if (this.playing) { + this.playMedia(); + // swap is complete. Reset vars. + loadIsComplete = true; } } - } - else if (!this.startedPlaying) { + } else if (!this.startedPlaying) { if (this.startTime > 0) { if (this.seeking) { // a seek has already been initiated @@ -12732,94 +11298,84 @@ if (typeof module !== "undefined" && module.exports) { if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; - } - else { + loadIsComplete = true; + } else { // haven't started seeking yet this.seekTo(this.startTime); } - } - else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { + } else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { this.seekToChapter(this.defaultChapter); - } - else { + } else { // there is no startTime, therefore no seeking required if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.hasPlaylist) { - // new source media is part of a playlist, but user didn't click on it + } else if (this.hasPlaylist) { + // new source media is part of a playlist, but user didn't click on it // (and somehow, swappingSrc is false) - // this may happen when the previous track ends and next track loads - // this same code is called above when swappingSrc is true + // this may happen when the previous track ends and next track loads + // this same code is called above when swappingSrc is true if ((this.playlistIndex !== this.$playlist.length) || this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else { - // None of the above. + } else { + // None of the above. // User is likely seeking to a new time, but not loading a new media source - // need to reset vars - loadIsComplete = true; - } - if (loadIsComplete) { - // reset vars - this.swappingSrc = false; - this.seekStatus = null; - this.swapTime = 0; + // need to reset vars + loadIsComplete = true; + } + if (loadIsComplete) { + // reset vars + this.swappingSrc = false; + this.seekStatus = null; + this.swapTime = 0; this.seekTrigger = null; - this.seekingFromTranscript = false; + this.seekingFromTranscript = false; this.userClickedPlaylist = false; - this.okToPlay = false; + this.okToPlay = false; } - this.refreshControls('init'); - if (this.$focusedElement) { - this.restoreFocus(); - this.$focusedElement = null; + this.refreshControls(); + if (this.$focusedElement) { + this.restoreFocus(); + this.$focusedElement = null; + this.activeMedia = null; } }; - AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { + AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { - // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src - // The durations may not be exact, but they might be "close enough" - // returns true if "close enough", otherwise false + // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src + // The durations may not be exact, but they might be "close enough" + // returns true if "close enough", otherwise false - var tolerance, diff; - - tolerance = 1; // number of seconds between rounded durations that is considered "close enough" - - diff = Math.abs(Math.round(d1) - Math.round(d2)); - - if (diff <= tolerance) { - return true; - } - else { - return false; - } + var tolerance, diff; + + tolerance = 1; // number of seconds between rounded durations that is considered "close enough" + diff = Math.abs(Math.round(d1) - Math.round(d2)); + + return (diff <= tolerance) ? true : false; }; - AblePlayer.prototype.restoreFocus = function() { + AblePlayer.prototype.restoreFocus = function() { // function called after player has been rebuilt (during media swap) - // the original focusedElement no longer exists, - // but this function finds a match in the new player - // and places focus there + // the original focusedElement no longer exists, + // but this function finds a match in the new player + // and places focus there - var classList; + var classList, $mediaParent; - if (this.$focusedElement) { - - if ((this.$focusedElement).attr('role') === 'button') { + if ( this.$focusedElement && null !== this.activeMedia ) { + $mediaParent = $( '#' + this.activeMedia ).closest( '.able' ); + if ( (this.$focusedElement).attr('role') === 'button' ) { classList = this.$focusedElement.attr("class").split(/\s+/); $.each(classList, function(index, item) { if (item.substring(0,20) === 'able-button-handler-') { - $('div.able-controller div.' + item).focus(); + $mediaParent.find('div.able-controller div.' + item).trigger('focus'); } }); } @@ -12842,150 +11398,136 @@ if (typeof module !== "undefined" && module.exports) { thisObj.showDescription(position); thisObj.updateChapter(thisObj.convertChapterTimeToVideoTime(position)); thisObj.updateMeta(position); - thisObj.refreshControls('init'); - }).on('stopTracking', function (e, position) { - if (thisObj.useChapterTimes) { - thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); - } - else { - thisObj.seekTo(position); - } - if (!thisObj.pausedBeforeTracking) { - setTimeout(function () { - thisObj.playMedia(); - }, 200); - } - }); - }; - - AblePlayer.prototype.onClickPlayerButton = function (el) { - - var whichButton, prefsPopup; - - whichButton = this.getButtonNameFromClass($(el).attr('class')); - - if (whichButton === 'play') { - this.clickedPlay = true; - this.handlePlay(); - } - else if (whichButton === 'restart') { - this.seekTrigger = 'restart'; - this.handleRestart(); - } - else if (whichButton === 'previous') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'previous'; - this.buttonWithFocus = 'previous'; - this.handlePrevTrack(); - } - else if (whichButton === 'next') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'next'; - this.buttonWithFocus = 'next'; - this.handleNextTrack(); - } - else if (whichButton === 'rewind') { - this.seekTrigger = 'rewind'; - this.handleRewind(); - } - else if (whichButton === 'forward') { - this.seekTrigger = 'forward'; - this.handleFastForward(); - } - else if (whichButton === 'mute') { - this.handleMute(); - } - else if (whichButton === 'volume') { - this.handleVolumeButtonClick(); - } - else if (whichButton === 'faster') { - this.handleRateIncrease(); - } - else if (whichButton === 'slower') { - this.handleRateDecrease(); - } - else if (whichButton === 'captions') { - this.handleCaptionToggle(); - } - else if (whichButton === 'chapters') { - this.handleChapters(); - } - else if (whichButton === 'descriptions') { - this.handleDescriptionToggle(); - } - else if (whichButton === 'sign') { - if (!this.closingSign) { - this.handleSignToggle(); + thisObj.refreshControls(); + }).on('stopTracking', function (e, position) { + if (thisObj.useChapterTimes) { + thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); + } else { + thisObj.seekTo(position); } - } - else if (whichButton === 'preferences') { - if ($(el).attr('data-prefs-popup') === 'menu') { - this.handlePrefsClick(); + if (!thisObj.pausedBeforeTracking) { + setTimeout(function () { + thisObj.playMedia(); + }, 200); } - else { - this.showingPrefsDialog = true; // stopgap - this.closePopups(); - prefsPopup = $(el).attr('data-prefs-popup'); - if (prefsPopup === 'keyboard') { - this.keyboardPrefsDialog.show(); - } - else if (prefsPopup === 'captions') { - this.captionPrefsDialog.show(); + }); + }; + + AblePlayer.prototype.onClickPlayerButton = function (el) { + var whichButton, prefsPopup; + whichButton = this.getButtonNameFromClass($(el).attr('class')); + switch ( whichButton ) { + case 'play': + this.clickedPlay = true; + this.handlePlay(); + break; + case 'restart': + this.seekTrigger = 'restart'; + this.handleRestart(); + break; + case 'previous': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'previous'; + this.buttonWithFocus = 'previous'; + this.handlePrevTrack(); + break; + case 'next': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'next'; + this.buttonWithFocus = 'next'; + this.handleNextTrack(); + break; + case 'rewind': + this.seekTrigger = 'rewind'; + this.handleRewind(); + break; + case 'forward': + this.seekTrigger = 'forward'; + this.handleFastForward(); + break; + case 'mute': + this.handleMute(); + break; + case 'volume': + this.handleVolumeButtonClick(); + break; + case 'faster': + this.handleRateIncrease(); + break; + case 'slower': + this.handleRateDecrease(); + break; + case 'captions': + this.handleCaptionToggle(); + break; + case 'chapters': + this.handleChapters(); + break; + case 'descriptions': + this.handleDescriptionToggle(); + break; + case 'sign': + if ( ! this.closingSign ) { + this.handleSignToggle(); } - else if (prefsPopup === 'descriptions') { - this.descPrefsDialog.show(); + break; + case 'preferences': + if ($(el).attr('data-prefs-popup') === 'menu') { + this.handlePrefsClick(); + } else { + this.showingPrefsDialog = true; // stopgap + this.closePopups(); + prefsPopup = $(el).attr('data-prefs-popup'); + if (prefsPopup === 'keyboard') { + this.keyboardPrefsDialog.show(); + } else if (prefsPopup === 'captions') { + this.captionPrefsDialog.show(); + } else if (prefsPopup === 'descriptions') { + this.descPrefsDialog.show(); + } else if (prefsPopup === 'transcript') { + this.transcriptPrefsDialog.show(); + } + this.showingPrefsDialog = false; } - else if (prefsPopup === 'transcript') { - this.transcriptPrefsDialog.show(); + break; + case 'transcript': + if ( !this.closingTranscript ) { + this.handleTranscriptToggle(); } - this.showingPrefsDialog = false; - } - } - else if (whichButton === 'help') { - this.handleHelpClick(); - } - else if (whichButton === 'transcript') { - if (!this.closingTranscript) { - this.handleTranscriptToggle(); - } - } - else if (whichButton === 'fullscreen') { - this.clickedFullscreenButton = true; - this.handleFullscreenToggle(); + break; + case 'fullscreen': + this.clickedFullscreenButton = true; + this.handleFullscreenToggle(); + break; } }; - AblePlayer.prototype.getButtonNameFromClass = function (classString) { - - // player control buttons all have class="able-button-handler-x" where x is the identifier + AblePlayer.prototype.getButtonNameFromClass = function (classString) { + // player control buttons all have class="able-button-handler-x" where x is the identifier // buttons might also have other classes assigned though + var classes, i; - var classes, i; - - classes = classString.split(' '); - for (i = 0; i < classes.length; i++) { - if (classes[i].substring(0,20) === 'able-button-handler-') { - return classes[i].substring(20); + classes = classString.split(' '); + for (i = 0; i < classes.length; i++) { + if (classes[i].substring(0,20) === 'able-button-handler-') { + return classes[i].substring(20); } - } - return classString; + } + return classString; } AblePlayer.prototype.okToHandleKeyPress = function () { - - // returns true unless user's focus is on a UI element + let defaultReturn = true; + if ( this.prefNoKeyShortcuts === 1 ) { + defaultReturn = false; + } + // returns true unless user's focus is on a UI element or user has disabled keyboard shortcuts. // that is likely to need supported keystrokes, including space - var activeElement = AblePlayer.getActiveDOMElement(); - if ($(activeElement).prop('tagName') === 'INPUT') { - return false; - } - else { - return true; - } + return ($(activeElement).prop('tagName') === 'INPUT') ? false : defaultReturn; }; AblePlayer.prototype.onPlayerKeyPress = function (e) { @@ -12993,24 +11535,21 @@ if (typeof module !== "undefined" && module.exports) { // handle keystrokes (using DHTML Style Guide recommended key combinations) // https://web.archive.org/web/20130127004544/http://dev.aol.com/dhtml_style_guide/#mediaplayer // Modifier keys Alt + Ctrl are on by default, but can be changed within Preferences - // NOTE #1: Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down + // - Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down // The rest are reasonable best choices - // NOTE #2: If there are multiple players on a single page, keystroke handlers + // - If there are multiple players on a single page, keystroke handlers // are only bound to the FIRST player - // NOTE #3: The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions + // - The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions // including removal of the "media player" design pattern. There's an issue about that: // https://github.com/w3c/aria-practices/issues/27 - var which, $thisElement; + var key, $thisElement; // Convert to lower case. - which = e.which; - if (which >= 65 && which <= 90) { - which += 32; - } + key = e.key; $thisElement = $(document.activeElement); - if (which === 27) { // escape + if (key === 'Escape') { if (this.$transcriptArea && $.contains(this.$transcriptArea[0],$thisElement[0]) && !this.hidingPopup) { // This element is part of transcript area. this.handleTranscriptToggle(); @@ -13033,101 +11572,86 @@ if (typeof module !== "undefined" && module.exports) { (e.target.tagName === 'TEXTAREA' && !this.stenoMode) || e.target.tagName === 'SELECT' )){ - if (which === 27) { // escape + if (key === 'Escape') { this.closePopups(); this.$tooltipDiv.hide(); this.seekBar.hideSliderTooltips(); - } - else if (which === 32) { // spacebar = play/pause + } else if (key === ' ') { // disable spacebar support for play/pause toggle as of 4.2.10 // spacebar should not be handled everywhere on the page, since users use that to scroll the page // when the player has focus, most controls are buttons so spacebar should be used to trigger the buttons if ($thisElement.attr('role') === 'button') { // register a click on this element e.preventDefault(); - $thisElement.click(); + $thisElement.trigger( 'click' ); } - } - else if (which === 112) { // p = play/pause + } else if ( key === 'p' ) { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePlay(); } - } - else if (which === 115) { // s = stop (now restart) + } else if (key === 's') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRestart(); } - } - else if (which === 109) { // m = mute + } else if (key === 'm') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleMute(); } - } - else if (which === 118) { // v = volume + } else if (key === 'v') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleVolumeButtonClick(); } - } - else if (which >= 49 && which <= 57) { // set volume 1-9 + } else if (key >= 0 && key <= 9) { if (this.usingModifierKeys(e)) { e.preventDefault(); - this.handleVolumeKeystroke(which); + this.handleVolumeKeystroke(key); } - } - else if (which === 99) { // c = caption toggle + } else if (key === 'c') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleCaptionToggle(); } - } - else if (which === 100) { // d = description + } else if (key === 'd') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleDescriptionToggle(); } - } - else if (which === 102) { // f = forward + } else if (key === 'f') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleFastForward(); } - } - else if (which === 114) { // r = rewind + } else if (key === 'r') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRewind(); } - } - else if (which === 98) { // b = back (previous track) + } else if (key === 'b') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrevTrack(); } - } - else if (which === 110) { // n = next track + } else if (key === 'n') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleNextTrack(); } - } - else if (which === 101) { // e = preferences + } else if (key === 'e') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrefsClick(); } - } - else if (which === 13) { // Enter + } else if (key === 'Enter') { if ($thisElement.attr('role') === 'button' || $thisElement.prop('tagName') === 'SPAN') { // register a click on this element // if it's a transcript span the transcript span click handler will take over - $thisElement.click(); - } - else if ($thisElement.prop('tagName') === 'LI') { - $thisElement.click(); + $thisElement.trigger( 'click' ); + } else if ($thisElement.prop('tagName') === 'LI') { + $thisElement.trigger( 'click' ); } } } @@ -13148,10 +11672,7 @@ if (typeof module !== "undefined" && module.exports) { }) .on('loadedmetadata',function() { // should be able to get duration now - thisObj.duration = thisObj.media.duration; - var x = 50.5; - var y = 51.9; - var diff = Math.abs(Math.round(x)-Math.round(y)); + thisObj.duration = thisObj.media.duration; }) .on('canplay',function() { // previously handled seeking to startTime here @@ -13159,21 +11680,21 @@ if (typeof module !== "undefined" && module.exports) { // so we know player can seek ahead to anything }) .on('canplaythrough',function() { - // previously onMediaNewSourceLoad() was called on 'loadedmetadata' - // but that proved to be too soon for some of this functionality. - // TODO: Monitor this. If moving it here causes performance issues, - // consider moving some or all of this functionality to 'canplay' - thisObj.onMediaNewSourceLoad(); + // previously onMediaNewSourceLoad() was called on 'loadedmetadata' + // but that proved to be too soon for some of this functionality. + // TODO: Monitor this. If moving it here causes performance issues, + // consider moving some or all of this functionality to 'canplay' + thisObj.onMediaNewSourceLoad(); }) .on('play',function() { - // both 'play' and 'playing' seem to be fired in all browsers (including IE11) - // therefore, doing nothing here & doing everything when 'playing' is triggered - thisObj.refreshControls('playpause'); + // 'play' indicates that the play method has been called. + // Don't do anything until playback has actually started. }) .on('playing',function() { + // 'playing' indicates that the video is playing. thisObj.playing = true; thisObj.paused = false; - thisObj.swappingSrc = false; + thisObj.swappingSrc = false; thisObj.refreshControls('playpause'); }) .on('ended',function() { @@ -13185,8 +11706,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.refreshControls('timeline'); }) .on('waiting',function() { - // do something - // previously called refreshControls() here but this event probably doesn't warrant a refresh + // could fire a notification about loss of data. }) .on('durationchange',function() { // Display new duration. @@ -13195,21 +11715,19 @@ if (typeof module !== "undefined" && module.exports) { .on('timeupdate',function() { thisObj.onMediaUpdateTime(); // includes a call to refreshControls() }) - .on('pause',function() { - if (!thisObj.clickedPlay) { + .on('pause',function() { + if (!thisObj.clickedPlay) { // 'pause' was triggered automatically, not initiated by user // this happens in some browsers when swapping source // (e.g., between tracks in a playlist or swapping description) - if (thisObj.hasPlaylist || thisObj.swappingSrc) { + if (thisObj.hasPlaylist || thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -13280,11 +11798,11 @@ if (typeof module !== "undefined" && module.exports) { // Triggered as the video is loaded. // Reports back the amount of the video that has been buffered (NOT the amount played) // Data has keys duration, percent, and seconds - }); + }); this.vimeoPlayer.on('seeking', function(data) { // Triggered when the player starts seeking to a specific time. // A timeupdate event will also be fired at the same time. - }); + }); this.vimeoPlayer.on('seeked', function(data) { // Triggered when the player seeks to a specific time. // A timeupdate event will also be fired at the same time. @@ -13303,13 +11821,11 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.hasPlaylist || thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -13347,10 +11863,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addEventListeners = function () { - var thisObj, whichButton, thisElement; - - // Save the current object context in thisObj for use with inner functions. - thisObj = this; + var thisObj = this; // Appropriately resize media player for full screen. $(window).on('resize',function () { @@ -13368,7 +11881,7 @@ if (typeof module !== "undefined" && module.exports) { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { // the player's style attribute has changed. Check to see if it's visible if (thisObj.$ableDiv.is(':visible')) { - thisObj.refreshControls('init'); + thisObj.refreshControls(); } } }); @@ -13376,15 +11889,9 @@ if (typeof module !== "undefined" && module.exports) { var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); } - else { - // browser doesn't support MutationObserver - // TODO: Figure out an alternative solution for this rare use case in older browsers - // See example in buildplayer.js > useSvg() - } if (typeof this.seekBar !== 'undefined') { this.addSeekbarListeners(); - } - else { + } else { // wait a bit and try again // TODO: Should set this up to keep trying repeatedly. // Seekbar listeners are critical. @@ -13402,20 +11909,20 @@ if (typeof module !== "undefined" && module.exports) { }); // handle clicks (left only) anywhere on the page. If any popups are open, close them. - $(document).on('click',function(e) { + $('body').on('click', function(e) { if (e.button !== 0) { // not a left click return false; - } - if ($('.able-popup:visible').length || $('.able-volume-popup:visible')) { + } + if ($('.able-popup:visible').length || $('.able-volume-slider:visible').length ) { // at least one popup is visible thisObj.closePopups(); } - if (e.target.tagName === 'VIDEO') { + if (e.target.tagName === 'VIDEO') { // user clicked the video (not an element that sits on top of the video) - // handle this as a play/pause toggle click - thisObj.clickedPlay = true; - } + // handle this as a play/pause toggle click + thisObj.clickedPlay = true; + } }); // handle mouse movement over player; make controls visible again if hidden @@ -13432,8 +11939,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); @@ -13446,7 +11952,7 @@ if (typeof module !== "undefined" && module.exports) { }); // if user presses a key from anywhere on the page, show player controls - $(document).keydown(function(e) { + $(document).on( 'keydown', function(e) { if (thisObj.controlsHidden) { thisObj.fadeControls('in'); thisObj.controlsHidden = false; @@ -13458,8 +11964,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // controls are visible // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { @@ -13474,8 +11979,8 @@ if (typeof module !== "undefined" && module.exports) { }); // handle local keydown events if this isn't the only player on the page; - // otherwise these are dispatched by global handler (see ableplayer-base,js) - this.$ableDiv.keydown(function (e) { + // otherwise these are dispatched by global handler (see ableplayer-base.js) + this.$ableDiv.on( 'keydown', function (e) { if (AblePlayer.nextIndex > 1) { thisObj.onPlayerKeyPress(e); } @@ -13500,7 +12005,7 @@ if (typeof module !== "undefined" && module.exports) { // handle clicks on playlist items if (this.$playlist) { - this.$playlist.click(function(e) { + this.$playlist.on( 'click', function(e) { if (!thisObj.userClickedPlaylist) { // stopgap in case multiple clicks are fired on the same playlist item thisObj.userClickedPlaylist = true; // will be set to false after new src is loaded & canplaythrough is triggered @@ -13511,18 +12016,16 @@ if (typeof module !== "undefined" && module.exports) { } // Also play/pause when clicking on the media. - this.$media.click(function () { + this.$media.on( 'click', function () { thisObj.handlePlay(); }); // add listeners for media events if (this.player === 'html5') { this.addHtml5MediaListeners(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.addVimeoListeners(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // Youtube doesn't give us time update events, so we just periodically generate them ourselves setInterval(function () { thisObj.onMediaUpdateTime(); @@ -13532,7 +12035,6 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); (function ($) { - AblePlayer.prototype.initDragDrop = function ( which ) { // supported values of which: 'sign', 'transcript' @@ -13540,13 +12042,13 @@ if (typeof module !== "undefined" && module.exports) { // NOTE: "Drag and Drop" for Able Player is a metaphor only!!! // HTML5 Drag & Drop API enables moving elements to new locations in the DOM // Thats not our purpose; we're simply changing the visible position on-screen - // Therefore, the drag & drop interface was overhauled in v2.3.41 to simple + // Therefore, the drag & drop interface was overhauled in v2.3.41 to simply // use mouse (and keyboard) events to change CSS positioning properties // There are nevertheless lessons to be learned from Drag & Drop about accessibility: // http://dev.opera.com/articles/accessible-drag-and-drop/ - var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, + var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, i, x1, y1, x2, y2, $resizeLine, resizeZIndex; thisObj = this; @@ -13555,71 +12057,77 @@ if (typeof module !== "undefined" && module.exports) { $window = this.$transcriptArea; windowName = 'transcript-window'; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + $toolbar.attr( 'aria-label', this.translate( 'transcriptControls', 'Transcript Window Controls' ) ); + } else if (which === 'sign') { $window = this.$signWindow; windowName = 'sign-window'; $toolbar = this.$signToolbar; + $toolbar.attr( 'aria-label', this.translate( 'signControls', 'Sign Language Window Controls' ) ); } // add class to trigger change in cursor on hover $toolbar.addClass('able-draggable'); + $toolbar.attr( 'role', 'application' ); + $dragHandle = $('<div>',{ + 'class': 'able-drag-handle' + }); + + $dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'); // add resize handle selector to bottom right corner $resizeHandle = $('<div>',{ 'class': 'able-resizable' }); - // fill it with three parallel diagonal lines + // fill it with three parallel diagonal lines $resizeSvg = $('<svg>').attr({ 'width': '100%', 'height': '100%', 'viewBox': '0 0 100 100', 'preserveAspectRatio': 'none' }); - for (i=1; i<=3; i++) { - if (i === 1) { - x1 = '100'; - y1 = '0'; - x2 = '0'; - y2 = '100'; - } - else if (i === 2) { - x1 = '33'; - y1 = '100'; - x2 = '100'; - y2 = '33'; - } - else if (i === 3) { - x1 = '67'; - y1 = '100'; - x2 = '100'; - y2 = '67'; - } - $resizeLine = $('<line>').attr({ + for (i=1; i<=3; i++) { + if (i === 1) { + x1 = '100'; + y1 = '0'; + x2 = '0'; + y2 = '100'; + } else if (i === 2) { + x1 = '33'; + y1 = '100'; + x2 = '100'; + y2 = '33'; + } else if (i === 3) { + x1 = '67'; + y1 = '100'; + x2 = '100'; + y2 = '67'; + } + $resizeLine = $('<line>').attr({ 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2, - 'vector-effect': 'non-scaling-stroke' + 'vector-effect': 'non-scaling-stroke' }) - $resizeSvg.append($resizeLine); + $resizeSvg.append($resizeLine); } - $resizeHandle.html($resizeSvg); + $resizeHandle.html($resizeSvg); // assign z-index that's slightly higher than parent window resizeZIndex = parseInt($window.css('z-index')) + 100; $resizeHandle.css('z-index',resizeZIndex); $window.append($resizeHandle); + $toolbar.append($dragHandle); // Final step: Need to refresh the DOM in order for browser to process & display the SVG $resizeHandle.html($resizeHandle.html()); // add event listener to toolbar to start and end drag // other event listeners will be added when drag starts - $toolbar.on('mousedown mouseup touchstart touchend', function(e) { + $dragHandle.on('mousedown mouseup touchstart touchend', function(e) { e.stopPropagation(); - if (e.type === 'mousedown' || e.type === 'touchstart') { + if (e.type === 'mousedown' || e.type === 'touchstart' ) { if (!thisObj.windowMenuClickRegistered) { thisObj.windowMenuClickRegistered = true; thisObj.startMouseX = e.pageX; @@ -13627,8 +12135,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.dragDevice = 'mouse'; // ok to use this even if device is a touchpad thisObj.startDrag(which, $window); } - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.dragging && thisObj.dragDevice === 'mouse') { thisObj.endDrag(which); } @@ -13646,8 +12153,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.startMouseY = e.pageY; thisObj.startResize(which, $window); } - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.resizing) { thisObj.endResize(which); } @@ -13663,16 +12169,12 @@ if (typeof module !== "undefined" && module.exports) { } thisObj.finishingDrag = false; }); - this.addWindowMenu(which,$window,windowName); }; AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) { - var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg, - $buttonLabel, tooltipId, $tooltip, $popup, - label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip, - $optionList, menuBaseId, options, i, $optionItem, option, menuId; + var thisObj, $windowAlert, menuId, $newButton, tooltipId, $tooltip, $popup, menuId; thisObj = this; @@ -13685,50 +12187,18 @@ if (typeof module !== "undefined" && module.exports) { // this will prevent the click event from being triggered this.finishingDrag = false; - // create an alert div and add it to window - $windowAlert = $('<div role="alert"></div>'); - $windowAlert.addClass('able-alert'); - $windowAlert.hide(); - $windowAlert.appendTo(this.$activeWindow); - $windowAlert.css({ - top: $window.offset().top - }); - // add button to draggable window which triggers a popup menu - // for now, re-use preferences icon for this purpose menuId = this.mediaId + '-' + windowName + '-menu'; $newButton = $('<button>',{ 'type': 'button', 'tabindex': '0', - 'aria-label': this.tt.windowButtonLabel, 'aria-haspopup': 'true', 'aria-controls': menuId, 'aria-expanded': 'false', 'class': 'able-button-handler-preferences' }); - if (this.iconType === 'font') { - $buttonIcon = $('<span>',{ - 'class': 'icon-preferences', - 'aria-hidden': 'true' - }); - $newButton.append($buttonIcon); - } - else { - // use image - buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png'; - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - - // add the visibly-hidden label for screen readers that don't support aria-label on the button - $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(this.tt.windowButtonLabel); - $newButton.append($buttonLabel); + this.getIcon( $newButton, 'preferences' ); + this.setText( $newButton, this.translate( 'windowButtonLabel', 'Window options' ) ); // add a tooltip that displays aria-label on mouseenter or focus tooltipId = this.mediaId + '-' + windowName + '-tooltip'; @@ -13736,20 +12206,20 @@ if (typeof module !== "undefined" && module.exports) { 'class' : 'able-tooltip', 'id' : tooltipId }).hide(); + $newButton.on('mouseenter focus',function(e) { var label = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - var tooltipY = position.top - buttonHeight - 5; + var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label); + // get height of the tooltip + var tooltipHeight = tooltip.height(); + var tooltipY = ( tooltipHeight + 2 ) -1; var tooltipX = 0; var tooltipStyle = { - left: '', - right: tooltipX + 'px', + right: '', + left: tooltipX + 'px', top: tooltipY + 'px' }; - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle); + tooltip.css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); @@ -13760,20 +12230,17 @@ if (typeof module !== "undefined" && module.exports) { $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window' // define vars and assemble all the parts if (which === 'transcript') { - this.$transcriptAlert = $windowAlert; this.$transcriptPopupButton = $newButton; this.$transcriptPopup = $popup; this.$transcriptToolbar.prepend($windowAlert,$newButton,$tooltip,$popup); - } - else if (which === 'sign') { - this.$signAlert = $windowAlert; + } else if (which === 'sign') { this.$signPopupButton = $newButton; this.$signPopup = $popup; this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup); } // handle button click - $newButton.on('click mousedown keydown',function(e) { + $newButton.on('click keydown',function(e) { if (thisObj.focusNotClick) { return false; @@ -13784,6 +12251,7 @@ if (typeof module !== "undefined" && module.exports) { } e.stopPropagation(); if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { + // don't set windowMenuClickRegistered yet; that happens in handler function thisObj.handleWindowButtonClick(which, e); } @@ -13795,30 +12263,23 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addResizeDialog = function (which, $window) { - var thisObj, $windowPopup, $windowButton, - widthId, heightId, startingWidth, startingHeight, aspectRatio, - $resizeForm, $resizeWrapper, - $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, - $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, - tempWidth, tempHeight, - $saveButton, $cancelButton, newWidth, newHeight, resizeDialog; + var thisObj, $windowPopup, $windowButton, widthId, heightId, + $resizeForm, $resizeWrapper, $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, + $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, $saveButton, $cancelButton, + newWidth, newHeight, resizeDialog; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } widthId = this.mediaId + '-resize-' + which + '-width'; heightId = this.mediaId + '-resize-' + which + '-height'; - startingWidth = $window.width(); - startingHeight = $window.height(); - aspectRatio = startingWidth / startingHeight; $resizeForm = $('<div></div>',{ 'class' : 'able-resize-form' @@ -13826,76 +12287,72 @@ if (typeof module !== "undefined" && module.exports) { // inner container for all content, will be assigned to modal div's aria-describedby $resizeWrapper = $('<div></div>'); + $resizeControls = $( '<div class="able-prefs-buttons"></div>' ); // width field $resizeWidthDiv = $('<div></div>'); $resizeWidthInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': widthId, - 'value': startingWidth + 'min': 0, + 'value': '', }); $resizeWidthLabel = $('<label>',{ 'for': widthId - }).text(this.tt.width); + }).text( this.translate( 'width', 'Width' ) ); // height field $resizeHeightDiv = $('<div></div>'); $resizeHeightInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': heightId, - 'value': startingHeight + 'min': 0, + 'value': '', }); $resizeHeightLabel = $('<label>',{ 'for': heightId - }).text(this.tt.height); - - if (which === 'sign') { - // make height a read-only field - // and calculate its value based on width to preserve aspect ratio - $resizeHeightInput.prop('readonly',true); - $resizeWidthInput.on('input',function() { - tempWidth = $(this).val(); - tempHeight = Math.round(tempWidth/aspectRatio, 0); - $resizeHeightInput.val(tempHeight); - }) - } + }).text( this.translate( 'height', 'Height' ) ); // Add save and cancel buttons. - $saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - $cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); $saveButton.on('click',function () { newWidth = $('#' + widthId).val(); newHeight = $('#' + heightId).val(); - if (newWidth !== startingWidth || newHeight !== startingHeight) { - thisObj.resizeObject(which,newWidth,newHeight); - thisObj.updateCookie(which); - } + thisObj.resizeObject(which,newWidth,newHeight); + thisObj.updatePreferences(which); + resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); $cancelButton.on('click',function () { resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); // Now assemble all the parts $resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput); $resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput); $resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv); - $resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton); + $resizeControls.append($saveButton,$cancelButton); + $resizeForm.append($resizeWrapper,$resizeControls); // must be appended to the BODY! // otherwise when aria-hidden="true" is applied to all background content // that will include an ancestor of the dialog, // which will render the dialog unreadable by screen readers $('body').append($resizeForm); - resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'dialog', true, this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em'); + resizeDialog = new AccessibleDialog( + $resizeForm, + $windowButton, + this.translate( 'windowResizeHeading', 'Resize Window' ), + this.translate( 'closeButtonLabel', 'Close' ), + ); if (which === 'transcript') { this.transcriptResizeDialog = resizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.signResizeDialog = resizeDialog; } }; @@ -13905,7 +12362,6 @@ if (typeof module !== "undefined" && module.exports) { var thisObj, $windowPopup, $windowButton, $toolbar, popupTop; thisObj = this; - if (this.focusNotClick) { // transcript or sign window has just opened, // and focus moved to the window button @@ -13917,73 +12373,62 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; $toolbar = this.$signToolbar; } - if (e.type === 'keydown') { // user pressed a key - if (e.which === 32 || e.which === 13) { - // this was Enter or space + if (e.key === ' ' || e.key === 'Enter') { this.windowMenuClickRegistered = true; - } - else if (e.which === 27) { // escape + } else if (e.key === 'Escape') { if ($windowPopup.is(':visible')) { // close the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - } - else { + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + // also return focus to window options button + $windowButton.trigger('focus'); + } else { // popup isn't open. Close the window if (which === 'sign') { this.handleSignToggle(); - } - else if (which === 'transcript') { + } else if (which === 'transcript') { this.handleTranscriptToggle(); } } - } - else { + } else { return false; } - } - else { + } else { // this was a mouse event this.windowMenuClickRegistered = true; } - if ($windowPopup.is(':visible')) { - $windowPopup.hide(200,'',function() { - thisObj.windowMenuClickRegistered = false; // reset - }); + if ( $windowPopup.is(':visible') ) { + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; // reset $windowPopup.find('li').removeClass('able-focus'); - $windowButton.attr('aria-expanded','false').focus(); - } - else { + $windowButton.attr('aria-expanded','false').trigger('focus'); + } else { // first, be sure window is on top this.updateZIndex(which); - popupTop = $windowButton.position().top + $windowButton.outerHeight(); + popupTop = $toolbar.outerHeight() - 1; $windowPopup.css('top', popupTop); - $windowPopup.show(200,'',function() { - $windowButton.attr('aria-expanded','true'); - $(this).find('li').first().focus().addClass('able-focus'); - thisObj.windowMenuClickRegistered = false; // reset - }); + $windowPopup.show(); + $windowButton.attr('aria-expanded','true'); + $(this).find('li').first().trigger('focus').addClass('able-focus'); + thisObj.windowMenuClickRegistered = false; // reset } }; AblePlayer.prototype.handleMenuChoice = function (which, choice, e) { - var thisObj, $window, $windowPopup, $windowButton, resizeDialog, width, height, $thisRadio; + var thisObj, $window, $windowPopup, $windowButton, resizeDialog, startingWidth, startingHeight, + aspectRatio, tempWidth, tempHeight; thisObj = this; if (which === 'transcript') { @@ -13991,30 +12436,42 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; resizeDialog = this.transcriptResizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { $window = this.$signWindow; $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; resizeDialog = this.signResizeDialog; + + startingWidth = $window.outerWidth(); + startingHeight = $window.outerHeight(); + aspectRatio = startingWidth / startingHeight; + // make height a read-only field + // and calculate its value based on width to preserve aspect ratio + widthId = this.mediaId + '-resize-' + which + '-width'; + heightId = this.mediaId + '-resize-' + which + '-height'; + $( '#' + heightId ).prop('readonly',true); + $( '#' + widthId ).on('input',function() { + tempWidth = $(this).val(); + tempHeight = Math.round(tempWidth/aspectRatio); + $( '#' + heightId ).val(tempHeight); + }); } this.$activeWindow = $window; if (e.type === 'keydown') { - if (e.which === 27) { // escape + if (e.key === 'Escape') { // escape // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - // also return focus to window options button - $windowButton.focus(); - }); + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + // also return focus to window options button + $windowButton.trigger('focus'); + return false; - } - else { + } else { // all other keys will be handled by upstream functions if (choice !== 'close') { this.$activeWindow = $window; @@ -14024,58 +12481,48 @@ if (typeof module !== "undefined" && module.exports) { } // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - }); + $windowPopup.hide(); + // also reset the boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + if (choice !== 'close') { - $windowButton.focus(); + $windowButton.trigger('focus'); } if (choice === 'move') { - // temporarily add role="application" to activeWindow // otherwise, screen readers incercept arrow keys and moving window will not work this.$activeWindow.attr('role','application'); if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); + this.showAlert( this.translate( 'windowMoveAlert', 'Drag or use arrow keys to move the window; Enter to stop' ),which); if (which === 'transcript') { this.showedTranscriptAlert = true; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.showedSignAlert = true; } } - if (e.type === 'keydown') { - this.dragDevice = 'keyboard'; - } - else { - this.dragDevice = 'mouse'; - } + this.dragDevice = (e.type === 'keydown') ? 'keyboard' : 'mouse'; this.startDrag(which, $window); - $windowPopup.hide().parent().focus(); - } - else if (choice == 'resize') { + $windowPopup.hide().parent().attr( 'tabindex', '-1' ).trigger('focus'); + } else if (choice == 'resize') { // resize through the menu uses a form, not drag var resizeFields = resizeDialog.getInputs(); if (resizeFields) { // reset width and height values in form - resizeFields[0].value = $window.width(); - resizeFields[1].value = $window.height(); + resizeFields[0].value = Math.round( $window.outerWidth() ); + resizeFields[1].value = Math.round( $window.outerHeight() ); } resizeDialog.show(); - } - else if (choice == 'close') { + } else if (choice == 'close') { // close window, place focus on corresponding button on controller bar if (which === 'transcript') { - this.closingTranscript = true; // stopgrap to prevent double-firing of keypress + this.closingTranscript = true; // stopgap to prevent double-firing of keypress this.handleTranscriptToggle(); - } - else if (which === 'sign') { - this.closingSign = true; // stopgrap to prevent double-firing of keypress + } else if (which === 'sign') { + this.closingSign = true; // stopgap to prevent double-firing of keypress this.handleSignToggle(); } } @@ -14083,7 +12530,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.startDrag = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newX, newY; + var thisObj, $windowPopup, startPos, newX, newY; thisObj = this; @@ -14094,21 +12541,10 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; } - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - // if window's popup menu is open, close it if ($windowPopup.is(':visible')) { $windowPopup.hide(); @@ -14128,8 +12564,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyY = this.dragStartY; // add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd() this.startingDrag = true; - } - else { + } else { this.dragDevice = 'mouse'; // get offset between mouse position and top left corner of draggable element this.dragOffsetX = this.startMouseX - this.dragStartX; @@ -14141,8 +12576,9 @@ if (typeof module !== "undefined" && module.exports) { 'position': 'absolute', 'top': this.dragStartY + 'px', 'left': this.dragStartX + 'px' - }).focus(); + }).trigger('focus'); + var dragDevice = this.dragDevice; // add device-specific event listeners if (this.dragDevice === 'mouse') { // might also be a touchpad $(document).on('mousemove touchmove',function(e) { @@ -14153,8 +12589,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resetDraggedObject( newX, newY ); } }); - } - else if (this.dragDevice === 'keyboard') { + } else if (this.dragDevice === 'keyboard') { this.$activeWindow.on('keydown',function(e) { if (thisObj.dragging) { thisObj.dragKeys(which, e); @@ -14164,40 +12599,45 @@ if (typeof module !== "undefined" && module.exports) { return false; }; + /** + * Handle moving the transcript or sign window from the keyboard. + * + * @param {string} which 'transcript' or 'sign' window. + * @param {Event} e Triggered event. + */ AblePlayer.prototype.dragKeys = function(which, e) { var key, keySpeed; - var thisObj = this; - // stopgap to prevent firing on initial Enter or space // that selected "Move" from menu if (this.startingDrag) { this.startingDrag = false; return false; } - key = e.which; + key = e.key; keySpeed = 10; // pixels per keypress event switch (key) { - case 37: // left - case 63234: + case 'ArrowLeft': // left this.dragKeyX -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveLeft', 'Window moved left' ) ); break; - case 38: // up - case 63232: + case 'ArrowUp': // up this.dragKeyY -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveUp', 'Window moved up' ) ); break; - case 39: // right - case 63235: + case 'ArrowRight': // right this.dragKeyX += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveRight', 'Window moved right' ) ); break; - case 40: // down - case 63233: + case 'ArrowDown': // down this.dragKeyY += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveDown', 'Window moved down' ) ); break; - case 13: // enter - case 27: // escape + case 'Enter': // enter + case 'Escape': // escape + this.$srAlertBox.text( this.translate( 'windowMoveStopped', 'Window move stopped' ) ); this.endDrag(which); return false; default: @@ -14211,6 +12651,9 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.resetDraggedObject = function ( x, y) { + setTimeout( () => { + this.$srAlertBox.text( '' ); + }, 2000 ); this.$activeWindow.css({ 'left': x + 'px', @@ -14230,7 +12673,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { // $activeWindow is the outer $transcriptArea - // but the inner able-transcript also needs to be resized proporitionally + // but the inner able-transcript also needs to be resized proportionally // (it's 50px less than its outer container) innerHeight = height - 50; this.$transcriptDiv.css('height', innerHeight + 'px'); @@ -14239,14 +12682,13 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.endDrag = function(which) { - var thisObj, $window, $windowPopup, $windowButton; + var thisObj, $windowPopup, $windowButton; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } @@ -14258,12 +12700,12 @@ if (typeof module !== "undefined" && module.exports) { this.$activeWindow = null; if (this.dragDevice === 'keyboard') { - $windowButton.focus(); + $windowButton.trigger('focus'); } this.dragging = false; // save final position of dragged element - this.updateCookie(which); + this.updatePreferences(which); // reset starting mouse positions this.startMouseX = undefined; @@ -14272,7 +12714,7 @@ if (typeof module !== "undefined" && module.exports) { // Boolean to stop stray events from firing this.windowMenuClickRegistered = false; this.finishingDrag = true; // will be reset after window click event - // finishingDrag should e reset after window click event, + // finishingDrag should be reset after window click event, // which is triggered automatically after mouseup // However, in case that's not reliable in some browsers // need to ensure this gets cancelled @@ -14281,45 +12723,19 @@ if (typeof module !== "undefined" && module.exports) { }, 100); }; - AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) { - - // return true if mouse is close to bottom right corner (resize target) - var tolerance, position, top, left, width, height, bottom, right; - - tolerance = 10; // number of pixels in both directions considered "close enough" - - // first, get position of element - position = $window.offset(); - top = position.top; - left = position.left; - width = $window.width(); - height = $window.height(); - bottom = top + height; - right = left + width; - if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) { - return true; - } - return false; - }; - AblePlayer.prototype.startResize = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight; + var thisObj, $windowPopup, newWidth, newHeight; thisObj = this; this.$activeWindow = $element; this.resizing = true; - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } + $windowPopup = (which === 'transcript') ? this.$transcriptPopup : this.$signPopup; // if window's popup menu is open, close it & place focus on button (???) if ($windowPopup.is(':visible')) { - $windowPopup.hide().parent().focus(); + $windowPopup.hide().parent().trigger('focus'); } // get starting width and height @@ -14327,7 +12743,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyX = this.dragStartX; this.dragKeyY = this.dragStartY; this.dragStartWidth = this.$activeWindow.width(); - this.dragStartHeight = this.$activeWindow.height(); + this.dragStartHeight = this.$activeWindow.outerHeight(); // add event listeners $(document).on('mousemove touchmove',function(e) { @@ -14338,30 +12754,30 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resizeObject( which, newWidth, newHeight ); } }); + return false; }; AblePlayer.prototype.endResize = function(which) { - var $window, $windowPopup, $windowButton; + var $windowPopup, $windowButton; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } $(document).off('mousemove mouseup touchmove touchup'); this.$activeWindow.off('keydown'); - $windowButton.show().focus(); + $windowButton.show().trigger('focus'); this.resizing = false; this.$activeWindow.removeClass('able-resize'); // save final width and height of dragged element - this.updateCookie(which); + this.updatePreferences(which); // Booleans for preventing stray events this.windowMenuClickRegistered = false; @@ -14375,28 +12791,37 @@ if (typeof module !== "undefined" && module.exports) { this.finishingDrag = false; }, 100); }; - })(jQuery); (function ($) { AblePlayer.prototype.initSignLanguage = function() { - - // Sign language is only currently supported in HTML5 player, not YouTube or Vimeo - if (this.player === 'html5') { + this.hasSignLanguage = false; + // Sign language is only currently supported in HTML5 player and YouTube. + var hasLocalSrc = ( this.$sources.first().attr('data-sign-src') !== undefined && this.$sources.first().attr('data-sign-src') !== "" ); + // YouTube src can either be on a `source` element or on the `video` element. + var hasRemoteSrc = ( this.$media.data('youtube-sign-src') !== undefined && this.$media.data('youtube-sign-src') !== "" ); + var hasRemoteSource = ( this.$sources.first().attr('data-youtube-sign-src') !== undefined && this.$sources.first().attr('data-youtube-sign-src') !== '' ); + if ( ! this.isIOS() && ( hasLocalSrc || hasRemoteSrc || hasRemoteSource ) && ( this.player === 'html5' || this.player === 'youtube' ) ) { // check to see if there's a sign language video accompanying this video // check only the first source // If sign language is provided, it must be provided for all sources - this.signFile = this.$sources.first().attr('data-sign-src'); - if (this.signFile) { + let ytSignSrc = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') ); + let signSrc = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') ); + let signVideo = DOMPurify.sanitize( this.$media.data('youtube-sign-src') ); + this.signFile = (hasLocalSrc ) ? signSrc : false; + if ( hasRemoteSrc ) { + this.signYoutubeId = signVideo; + } else if ( hasRemoteSource ) { + this.signYoutubeId = ytSignSrc; + } + if ( this.signFile || this.signYoutubeId ) { if (this.isIOS()) { - // IOS does not allow multiple videos to play simultaneously + // iOS does not allow multiple videos to play simultaneously // Therefore, sign language as rendered by Able Player unfortunately won't work - this.hasSignLanguage = false; if (this.debug) { } - } - else { + } else { if (this.debug) { } @@ -14404,73 +12829,179 @@ if (typeof module !== "undefined" && module.exports) { this.injectSignPlayerCode(); } } - else { - this.hasSignLanguage = false; + } + }; + + AblePlayer.prototype.injectSignPlayerCode = function() { + + // create and inject surrounding HTML structure + var thisObj, signVideoId, i, signSrc, srcType, $signSource; + + thisObj = this; + signVideoId = this.mediaId + '-sign'; + + if ( this.signFile || this.signYoutubeId ) { + if ( null !== this.$signDivLocation ) { + this.$signDivLocation.addClass( 'able-sign-window able-fixed' ); + this.$signWindow = this.$signDivLocation; + } else { + this.$signWindow = $('<div>',{ + 'class' : 'able-sign-window', + 'role': 'dialog', + 'aria-label': this.translate( 'sign', 'Sign language' ) + }); + this.$signToolbar = $('<div>',{ + 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' + }); + this.$signWindow.append(this.$signToolbar); + } + + this.$ableWrapper.append(this.$signWindow); + } + + if ( this.signFile ) { + this.$signVideo = $('<video>',{ + 'id' : signVideoId, + 'tabindex' : '-1', + 'muted' : true, + }); + this.signVideo = this.$signVideo[0]; + + if ( this.signFile ) { + $signSource = $('<source>',{ + 'src' : this.signFile, + 'type' : 'video/' + this.signFile.substr(-3) + }); + this.$signVideo.append($signSource); + } else { + // for each original <source>, add a <source> to the sign <video> + for (i=0; i < this.$sources.length; i++) { + signSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-sign-src') ); + srcType = this.$sources[i].getAttribute('type'); + if (signSrc) { + $signSource = $('<source>',{ + 'src' : signSrc, + 'type' : srcType + }); + this.$signVideo.append($signSource); + } else { + // source is missing a sign language version + // can't include sign language + this.hasSignLanguage = false; + return; + } + } + } + this.$signWindow.append( this.$signVideo ); + } else if ( this.signYoutubeId ) { + this.signYoutube = this.initYouTubeSignPlayer(); + } + + // make it draggable + if ( null === this.$signDivLocation ) { + this.initDragDrop('sign'); + } + + if (this.prefSign === 1) { + // sign window is on. Go ahead and position it and show it + if ( null === this.$signDivLocation ) { + this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); } + } else { + this.$signWindow.hide(); } - else { - this.hasSignLanguage = false; + }; + + + AblePlayer.prototype.initYouTubeSignPlayer = function () { + + var thisObj, deferred, promise; + thisObj = this; + deferred = new this.defer(); + promise = deferred.promise(); + + this.youTubeSignPlayerReady = false; + + if (AblePlayer.youTubeIframeAPIReady) { + // Script already loaded and ready. + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + } else { + // Has another player already started loading the script? If so, abort... + if ( ! AblePlayer.loadingYouTubeIframeAPI ) { + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + + }); + } + + // Otherwise, keeping waiting for script load event... + $('body').on('youTubeIframeAPIReady', function () { + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + }); } + return promise; }; - AblePlayer.prototype.injectSignPlayerCode = function() { - - // create and inject surrounding HTML structure + AblePlayer.prototype.finalizeYoutubeSignInit = function () { - var thisObj, signVideoId, signVideoWidth, i, signSrc, srcType, $signSource; + // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; + deferred = new this.defer(); + promise = deferred.promise(); thisObj = this; + containerId = this.mediaId + '_youtube_sign'; - signVideoWidth = this.getDefaultWidth('sign'); + this.$signWindow.append($('<div>').attr('id', containerId)); + autoplay = (this.okToPlay) ? 1 : 0; - signVideoId = this.mediaId + '-sign'; - this.$signVideo = $('<video>',{ - 'id' : signVideoId, - 'tabindex' : '-1' - }); - this.signVideo = this.$signVideo[0]; - // for each original <source>, add a <source> to the sign <video> - for (i=0; i < this.$sources.length; i++) { - signSrc = this.$sources[i].getAttribute('data-sign-src'); - srcType = this.$sources[i].getAttribute('type'); - if (signSrc) { - $signSource = $('<source>',{ - 'src' : signSrc, - 'type' : srcType - }); - this.$signVideo.append($signSource); - } - else { - // source is missing a sign language version - // can't include sign language - this.hasSignLanguage = false; - break; - } - } + // Documentation https://developers.google.com/youtube/player_parameters + this.youTubeSignPlayer = new YT.Player(containerId, { + videoId: this.getYouTubeId(this.signYoutubeId), + host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', + playerVars: { + autoplay: autoplay, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: 0, + controls: 0, // no controls, using our own + disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, + playsinline: this.playsInline, + rel: 0, // when video ends, show only related videos from same channel (1 shows any) + start: this.startTime + }, + events: { + onReady: function (player) { + player.target.mute(); + player.target.unloadModule( 'captions' ); + thisObj.youTubeSignPlayerReady = true; - this.$signWindow = $('<div>',{ - 'class' : 'able-sign-window', - 'role': 'dialog', - 'aria-label': this.tt.sign - }); - this.$signToolbar = $('<div>',{ - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' + deferred.resolve(); + }, + onError: function (x) { + deferred.reject(); + }, + onStateChange: function (x) { + thisObj.getPlayerState().then(function() { + // no actions + }); + }, + onApiChange: function() { + // No actions + }, + onPlaybackQualityChange: function () { + // no actions + }, + } }); - this.$signWindow.append(this.$signToolbar, this.$signVideo); - - this.$ableWrapper.append(this.$signWindow); - - // make it draggable - this.initDragDrop('sign'); - - if (this.prefSign === 1) { - // sign window is on. Go ahead and position it and show it - this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); - } - else { - this.$signWindow.hide(); - } + return promise; }; })(jQuery); @@ -15458,30 +13989,19 @@ if (typeof module !== "undefined" && module.exports) { // return language name associated with lang code "key" // whichName is either "English" or "local" (i.e., native name) - var lang, code, subTag; + var lang, code, subTag; lang = isoLangs[key.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName; - } - else { - return lang.name; - } - } - else if (key.includes('-')) { + if (lang) { + return (whichName === 'local') ? lang.nativeName : lang.name; + } else if (key.includes('-')) { code = key.substring(0,2); - subTag = key.substring(3); - lang = isoLangs[code.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName + ' (' + subTag + ')'; - } - else { - return lang.name + ' (' + subTag + ')'; - } + subTag = key.substring(3); + lang = isoLangs[code.toLowerCase()]; + if (lang) { + return (whichName === 'local') ? lang.nativeName + ' (' + subTag + ')' : lang.name + ' (' + subTag + ')'; } } - // if all else has failed, use the key as the label + // if all else has failed, use the key as the label return key; }; @@ -15489,51 +14009,86 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.getSupportedLangs = function() { // returns an array of languages for which AblePlayer has translation tables - var langs = ['ca','cs','da','de','en','es','fr','he','id','it','ja','nb','nl','pt','pt-br','sv','tr','zh-tw']; + var langs = { + 'ca' : 'Catalan', + 'cs' : 'Czech', + 'da' : 'Danish', + 'de' : 'German', + 'en' : 'English', + 'es' : 'Spanish', + 'fr' : 'French', + 'he' : 'Hebrew', + 'id' : 'Indonesian', + 'it' : 'Italian', + 'ja' : 'Japanese', + 'ms' : 'Malay', + 'nb' : 'Norwegian Bokmål', + 'nl' : 'Dutch', + 'pl' : 'Polish', + 'pt' : 'Portuguese', + 'pt-br' : 'Brazilian Portuguese', + 'sv' : 'Swedish', + 'tr' : 'Turkish', + 'zh-tw' : 'Chinese (Taiwan)' + }; + return langs; }; + /** + * Fetch a translated string if it exists. + * + * @param {string} key JSON key to locate translated string. + * @param {string} fallback Default language if no translation found. + * @param {Array} args Ordered array of arguments to replace in string. + * @returns + / + AblePlayer.prototype.translate = function( key, fallback, args = Array() ) { + let translation = ''; + if ( this.tt[ key ] ) { + translation = this.tt[ key ]; + } else { + translation = fallback; + } + if ( args.length > 0 ) { + args.forEach( ( val, index ) => { + let ref = index + 1; + translation = translation.replace( '%' + ref, val ); + }); + } + + return translation; + } + AblePlayer.prototype.getTranslationText = function() { // determine language, then get labels and prompts from corresponding translation var - - var deferred, thisObj, supportedLangs, docLang, msg, translationFile, collapsedLang, i, - similarLangFound; - deferred = $.Deferred(); + var deferred, thisObj, supportedLangs, docLang, translationFile, i, similarLangFound; + deferred = new this.defer(); thisObj = this; supportedLangs = this.getSupportedLangs(); // returns an array if (this.lang) { // a data-lang attribute is included on the media element - if ($.inArray(this.lang,supportedLangs) === -1) { + if ( Object.hasOwn( supportedLangs,this.lang ) ) { // the specified language is not supported - if (this.lang.indexOf('-') == 2) { + if ( this.lang.indexOf('-') == 2 ) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(this.lang.substring(0,2),supportedLangs) !== -1) { - // parent lang is supported. Use that. - this.lang = this.lang.substring(0,2); - } - else { - // the parent language is not supported either - // unable to use the specified language - this.lang = null; - } - } - else { + // if parent lang is supported. Use that, else null. + this.lang = ( Object.hasOwn(supportedLangs,this.lang.substring(0,2)) !== -1 ) ? this.lang.substring(0,2) : null; + } else { // this is not a localized language. - // but maybe there's a similar localized language supported - // that has the same parent? - similarLangFound = false; - i = 0; - while (i < supportedLangs.length) { - if (supportedLangs[i].substring(0,2) == this.lang) { - this.lang = supportedLangs[i]; - similarLangFound = true; + // but maybe there's a similar localized language supported + // that has the same parent? + similarLangFound = false; + for ( const [key,value] of Object.entries(supportedLangs) ) { + if ( key.substring(0,2) == this.lang ) { + this.lang = supportedLangs[i]; + similarLangFound = true; } - i++; } - if (!similarLangFound) { + if ( !similarLangFound ) { // language requested via data-lang is not supported this.lang = null; } @@ -15545,24 +14100,21 @@ if (typeof module !== "undefined" && module.exports) { // try the language of the web page, if specified if ($('body').attr('lang')) { docLang = $('body').attr('lang').toLowerCase(); - } - else if ($('html').attr('lang')) { + } else if ($('html').attr('lang')) { docLang = $('html').attr('lang').toLowerCase(); - } - else { + } else { docLang = null; } if (docLang) { - if ($.inArray(docLang,supportedLangs) !== -1) { + if ( Object.hasOwn( supportedLangs,docLang ) ) { // the document language is supported this.lang = docLang; - } - else { + } else { // the document language is not supported if (docLang.indexOf('-') == 2) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(docLang.substring(0,2),supportedLangs) !== -1) { + if ( Object.hasOwn(supportedLangs,docLang.substring(0,2)) ) { // the parent language is supported. use that. this.lang = docLang.substring(0,2); } @@ -15580,248 +14132,70 @@ if (typeof module !== "undefined" && module.exports) { if (!this.searchLang) { this.searchLang = this.lang; } - translationFile = this.rootPath + 'translations/' + this.lang + '.js'; - $.getJSON(translationFile, function(data) { - // success! - thisObj.tt = data; - deferred.resolve(); - }) - .fail(function() { + translationFile = this.rootPath + 'translations/' + this.lang + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + + translationFile = thisObj.rootPath + 'translations/' + thisObj.lang + '.js'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { - thisObj.provideFallback(); - deferred.fail(); - }) + thisObj.tt = {}; + thisObj.translationFiles = false; + deferred.resolve(); + }); + }); return deferred.promise(); }; AblePlayer.prototype.getSampleDescriptionText = function() { + if ( ! this.translationFiles ) { + this.sampleText = []; + let translation = { 'lang':'en', 'text': this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) }; + this.sampleText.push(translation); + } else { + // Create an array of sample description text in all languages + // This needs to be readily available for testing different voices + // in the Description Preferences dialog + var thisObj, supportedLangs, thisLang, translationFile, thisText, translation; + + supportedLangs = this.getSupportedLangs(); + thisObj = this; - // Create an array of sample description text in all languages - // This needs to be readily available for testing different voices - // in the Description Preferences dialog - var thisObj, supportedLangs, i, thisLang, translationFile, thisText, translation; - - supportedLangs = this.getSupportedLangs(); - - thisObj = this; - - this.sampleText = []; - for (i=0; i < supportedLangs.length; i++) { - translationFile = this.rootPath + 'translations/' + supportedLangs[i] + '.js'; - $.getJSON(translationFile, thisLang, (function(thisLang) { - return function(data) { - thisText = data.sampleDescriptionText; - translation = {'lang':thisLang, 'text': thisText}; - thisObj.sampleText.push(translation); - }; - }(supportedLangs[i])) // pass lang to callback function - ); + this.sampleText = []; + for ( const [key,value] of Object.entries(supportedLangs) ) { + translationFile = this.rootPath + 'translations/' + key + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisText = data.sampleDescriptionText; + translation = {'lang':thisLang, 'text': thisText}; + thisObj.sampleText.push(translation); + }); + } } }; })(jQuery); -(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); - -/! Copyright (c) 2014 - Paul Tavares - purtuga - @paul_tavares - MIT License */ -;(function($){ - - /** - * Delays the execution of a function until an expression returns true. - * The expression is checked every 100 milliseconds for as many tries - * as defined in in the attempts option - * - * @param {Object} options - * @param {Function} options.when - * Function to execute on every interval. - * Must return true (boolean) in order for - * options.do to be executed. - * @param {Function} [options.exec] - * Function to be executed once options.when() - * returns true. - * @param {Interger} [options.interval=100] - * How long to wait in-between tries. - * @param {Interger} [options.attempts=100] - * How many tries to use before its considered - * a failure. - * @param {Interger} [options.delayed=0] - * Number of miliseconds to wait before execution - is started. Default is imediately. - * - * @return {jQuery.Promise} - * - * @example - * - * $.doWhen({ - * when: function(){ - * return false; - * }, - * exec: function(){ - * alert("never called given false response on when param!"); - * } - * }) - * .fail(function(){ - * alert('ALERT: FAILED CONDITION'); - * }) - * .then(function(){ - * alert("resolved."); - * }); - * - / - $.doWhen = function(options) { - - return $.Deferred(function(dfd){ - - var opt = $.extend({}, { - when: null, - exec: function(){}, - interval: 100, - attempts: 100, - delayed: 0 - }, - options, - { - checkId: null - }), - startChecking = function(){ - - // Check condition now and if true, then resolve object - if (opt.when() === true) { - - opt.exec.call(dfd.promise()); - dfd.resolve(); - return; - - } - - // apply minimal UI and hide the overlay - opt.checkId = setInterval(function(){ - - if (opt.attempts === 0) { - - clearInterval(opt.checkId); - dfd.reject(); - - } else { - - --opt.attempts; - - if (opt.when() === true) { - - opt.attempts = 0; - clearInterval(opt.checkId); - opt.exec.call(dfd.promise()); - dfd.resolve(); - - } - - } - - }, opt.interval); - - }; - - if (opt.delayed > 0) { - - setTimeout(startChecking, Number(opt.delayed)); - - } else { - - startChecking(); - - } - - }).promise(); - - }; - -})(jQuery); / 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 @@ -15830,24 +14204,14 @@ if (typeof module !== "undefined" && module.exports) { (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; + var thisObj, $heading, $instructions, $p1, $p2, $ul, $li1, $li2, $li3, + $fieldset, $legend, i, $radioDiv, radioId, $label, $radio, $saveButton, $savedTable; thisObj = this; - if ($('#able-vts').length) { - // Page includes a container for a VTS instance - + if ( null !== document.getElementById( 'able-vts' ) ) { // Are they qualifying tracks? if (this.vtsTracks.length) { - // Yes - there are! - // Build an array of unique languages this.langs = []; this.getAllLangs(this.vtsTracks); @@ -15856,7 +14220,8 @@ if (typeof module !== "undefined" && module.exports) { this.vtsLang = this.lang; // Inject a heading - $heading = $('<h2>').text('Video Transcript Sorter'); // TODO: Localize; intelligently assign proper heading level + let heading = this.translate( 'vtsHeading', 'Video Transcript Sorter' ); + $heading = $('<h2>').text( heading ); // TODO: intelligently assign proper heading level $('#able-vts').append($heading); // Inject an empty div for writing messages @@ -15871,20 +14236,21 @@ if (typeof module !== "undefined" && module.exports) { $instructions = $('<div>',{ 'id': 'able-vts-instructions' }); - $p1 = $('<p>').text('Use the Video Transcript Sorter to perform any of the following tasks:'); + $p1 = $('<p>').text( this.translate( 'vtsInstructions1', 'Use the Video Transcript Sorter to modify text tracks:' ) ); $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.'); + $li1 = $('<li>').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 = $('<li>').text( this.translate( 'vtsInstructions3', 'Modify content or start/end times (all are directly editable within the table).' ) ); + $li3 = $('<li>').text( this.translate( 'vtsInstructions4', 'Add new content, such as chapters or descriptions.' ) ); + $p2 = $('<p>').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 = $('<fieldset>'); - $legend = $('<legend>').text('Select a language'); // TODO: Localize this - $fieldset.append($legend) + $legend = $('<legend>').text( this.translate( 'vtsSelectLanguage', 'Select a language' ) ); + $fieldset.append($legend); + $fieldWrapper = $( '<div class="vts-lang-selector"></div>' ); for (i in this.langs) { radioId = 'vts-lang-radio-' + this.langs[i]; $radioDiv = $('<div>',{ @@ -15908,29 +14274,29 @@ if (typeof module !== "undefined" && module.exports) { $label = $('<label>', { 'for': radioId // Two options for label: - // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; + // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; // TODO: if using this be sure to add lang attr to <div> (see above) }).text(this.getLanguageName(this.langs[i])); $radioDiv.append($radio,$label); - $fieldset.append($radioDiv); + $fieldWrapper.append($radioDiv); } + $fieldset.append( $fieldWrapper ); $('#able-vts').append($fieldset); - - // Inject a 'Save Changes' button + let vtsSave = this.translate( 'vtsSave', 'Generate new .vtt content' ); + // Inject a button to generate new files. $saveButton = $('<button>',{ 'type': 'button', 'id': 'able-vts-save', 'value': 'save' - }).text('Save Changes'); // TODO: Localize this + }).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, i, closestKind; + var kindOptions, beforeEditing, editedCell, editedContent, i; kindOptions = ['captions','chapters','descriptions','subtitles']; $('td[contenteditable="true"]').on('focus',function() { beforeEditing = $(this).text(); @@ -15945,20 +14311,16 @@ if (typeof module !== "undefined" && module.exports) { // assume they correctly typed the first character if (editedContent.substring(0,1) === 's') { $(this).text('subtitles'); - } - else if (editedContent.substring(0,1) === 'd') { + } else if (editedContent.substring(0,1) === 'd') { $(this).text('descriptions'); - } - else if (editedContent.substring(0,2) === 'ch') { + } else if (editedContent.substring(0,2) === 'ch') { $(this).text('chapters'); - } - else { + } else { // whatever else they types, assume 'captions' $(this).text('captions'); } } - } - else if (editedCell === 2 || editedCell === 3) { + } else if (editedCell === 2 || editedCell === 3) { // start or end time // ensure proper formatting (with 3 decimal places) $(this).text(thisObj.formatTimestamp(editedContent)); @@ -15970,30 +14332,27 @@ if (typeof module !== "undefined" && module.exports) { 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 + $(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 { + } else { // cancel saving, and restore the table using edited content - $(this).attr('value','save').text('Save Changes'); // TODO: Localize this + $(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('Cancelling saving. Any edits you made have been restored in the VTS table.'); // TODO: Localize this + thisObj.showVtsAlert( thisObj.translate( 'vtsCancel', 'Cancelling saving. Any edits you made have been restored in the VTS table.' ) ); } }); } @@ -16002,10 +14361,8 @@ if (typeof module !== "undefined" && module.exports) { 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) - - // Called from tracks.js + // TODO: Add support for trackDesc + // (to destinguish between tracks for the decribed vs non-described versions) var srcFile, vtsCues; srcFile = this.getFilenameFromPath(src); @@ -16023,15 +14380,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getFilenameFromPath = function(path) { var lastSlash; - lastSlash = path.lastIndexOf('/'); - if (lastSlash === -1) { - // there are no slashes in path. - return path; - } - else { - return path.substring(lastSlash+1); - } + // fix slashes. + return (lastSlash === -1) ? path : path.substring(lastSlash+1); }; AblePlayer.prototype.getFilenameFromTracks = function(kind,lang) { @@ -16069,13 +14420,11 @@ if (typeof module !== "undefined" && module.exports) { if (content.length > 0) { // add back the EOL between rows of content content += "\n" + nextRow; - } - else { + } else { // this is the first row of content. No need for an EOL content += nextRow; } - } - else { + } else { blankRow = true; } j++; @@ -16087,8 +14436,7 @@ if (typeof module !== "undefined" && module.exports) { }); i = j; //skip ahead } - } - else { + } else { i++; } } @@ -16098,12 +14446,7 @@ if (typeof module !== "undefined" && module.exports) { 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; - } + return (/^[0-9:,.]$/.test(timestamp)) ? true : false; }; AblePlayer.prototype.formatTimestamp = function(timestamp) { @@ -16125,8 +14468,7 @@ if (typeof module !== "undefined" && module.exports) { if (lastPart.length > 3) { // chop off any extra digits lastPart = lastPart.substring(0,3); - } - else if (lastPart.length < 3) { + } else if (lastPart.length < 3) { // add trailing zeros while (lastPart.length < 3) { lastPart += '0'; @@ -16140,7 +14482,7 @@ if (typeof module !== "undefined" && module.exports) { // 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; + var $table, $thead, headers, i, $tr, $th, $td, rows, rowNum, rowId; if (action === 'update') { // remove existing table @@ -16151,10 +14493,16 @@ if (typeof module !== "undefined" && module.exports) { $table = $('<table>',{ 'lang': lang }); - $tr = $('<tr>',{ - 'lang': 'en' // TEMP, until header row is localized - }); - headers = ['Row #','Kind','Start','End','Content','Actions']; // TODO: Localize this + $thead = $( '<thead>' ); + $tr = $( '<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 = $('<th>', { 'scope': 'col' @@ -16164,7 +14512,8 @@ if (typeof module !== "undefined" && module.exports) { } $tr.append($th); } - $table.append($tr); + $thead.append($tr); + $table.append($thead); // Get all rows (sorted by start time), and inject them into table rows = this.getAllRows(lang); @@ -16260,8 +14609,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'down') { + } else if (button === 'down') { if (rowNum < numRows) { $button = $('<button>',{ 'id': 'able-vts-button-down-' + rowNum, @@ -16293,8 +14641,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'insert') { + } else if (button === 'insert') { // Add Insert button to all rows $button = $('<button>',{ 'id': 'able-vts-button-insert-' + rowNum, @@ -16328,8 +14675,7 @@ if (typeof module !== "undefined" && module.exports) { // 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') { + } else if (button === 'delete') { // Add Delete button to all rows $button = $('<button>',{ 'id': 'able-vts-button-delete-' + rowNum, @@ -16395,14 +14741,12 @@ if (typeof module !== "undefined" && module.exports) { 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; + var credit + = 'Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a>' + + ' from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a>' + + ' are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a>' + ; + return '<div id="able-vts-icon-credit">' + credit + '</div>'; }; AblePlayer.prototype.getAllLangs = function(tracks) { @@ -16460,16 +14804,13 @@ if (typeof module !== "undefined" && module.exports) { if (action == 'up') { // move the row up this.moveRow(rowNum,'up'); - } - else if (action == 'down') { + } else if (action == 'down') { // move the row down this.moveRow(rowNum,'down'); - } - else if (action == 'insert') { + } else if (action == 'insert') { // insert a row below this.insertRow(rowNum); - } - else if (action == 'delete') { + } else if (action == 'delete') { // delete the row this.deleteRow(rowNum); } @@ -16478,9 +14819,8 @@ if (typeof module !== "undefined" && module.exports) { 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; + 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'); @@ -16562,10 +14902,11 @@ if (typeof module !== "undefined" && module.exports) { this.adjustTimes(newRowNum); // Announce the insertion - this.showVtsAlert('A new row ' + newRowNum + ' has been inserted'); // TODO: Localize this + let newAlert = this.translate( 'vtsNewRow', 'A new row %1 has been inserted.', [ newRowNum ] ); + this.showVtsAlert( newAlert ); // Place focus in new select field - $select.focus(); + $select.trigger('focus'); }; @@ -16588,14 +14929,15 @@ if (typeof module !== "undefined" && module.exports) { } // Announce the deletion - this.showVtsAlert('Row ' + rowNum + ' has been deleted'); // TODO: Localize this + let newAlert = this.translate( 'vtsDeletedRow', 'Row %1 has been deleted.', [ rowNum ] ); + this.showVtsAlert( newAlert ); }; AblePlayer.prototype.moveRow = function(rowNum,direction) { // swap two rows - var $rows, $thisRow, otherRowNum, $otherRow, newTimes, msg; + var $rows, $thisRow, otherRowNum, $otherRow, msg; $rows = $('#able-vts table').find('tr'); $thisRow = $('#able-vts table').find('tr').eq(rowNum); @@ -16603,8 +14945,7 @@ if (typeof module !== "undefined" && module.exports) { otherRowNum = parseInt(rowNum) - 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.before($thisRow); - } - else if (direction == 'down') { + } else if (direction == 'down') { otherRowNum = parseInt(rowNum) + 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.after($thisRow); @@ -16620,9 +14961,8 @@ if (typeof module !== "undefined" && module.exports) { // 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; + // Announce the move + msg = this.translate( 'vtsMovedRow', 'Row %1 has been moved %2 and is now Row %3.', [ rowNum, direction, otherRowNum ] ); this.showVtsAlert(msg); }; @@ -16659,16 +14999,10 @@ if (typeof module !== "undefined" && module.exports) { // 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'; - } + // 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()); @@ -16677,19 +15011,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the first row prevRowNum = null; $prevRow = null; @@ -16703,19 +15030,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the last row nextRowNum = null; $nextRow = null; @@ -16736,62 +15056,43 @@ if (typeof module !== "undefined" && module.exports) { 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') { + // 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); - 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') { + // end the new row immediately before the next row starts + end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (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 { + } 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 { + } 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 { + } else { // start needs to be incremented start = (parseFloat(prevStart) + minDuration[prevKind]).toFixed(3); end = (parseFloat(start) + minDuration[kind]).toFixed(3); } - } - else { + } else { // this is the first row if (start < nextStart) { // No change is necessary - } - else { + } else { // nextStart needs to be incremented nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3); nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3); @@ -16834,9 +15135,8 @@ if (typeof module !== "undefined" && module.exports) { if (kindEnd == -1) { // no spaces found, "kind-" must be the only myclass return myclass.substring(kindStart); - } - else { - // kind-* is one of multiple classes + } 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); } @@ -16848,7 +15148,11 @@ if (typeof module !== "undefined" && module.exports) { // 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'); + 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) { @@ -16871,7 +15175,7 @@ if (typeof module !== "undefined" && module.exports) { 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(); + content = $rows.eq(i).find('td').eq(4)[0].innerText; if (start !== undefined && end !== undefined) { vtt[kind] += start + ' --> ' + end + "\n"; if (content !== 'undefined') { @@ -16899,14 +15203,13 @@ if (typeof module !== "undefined" && module.exports) { var $heading, filename, $p, pText, $textarea; - $heading = $('<h3>').text(kind.charAt(0).toUpperCase() + kind.slice(1)); + $heading = $('<h3>').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 += '<em>' + kind + '</em> WebVTT file (<strong>' + filename + '</strong>).'; - } - else { + } else { pText += 'into a new ' + this.getLanguageName(lang) + ' <em>' + kind + '</em> WebVTT file.'; } $p = $('<p>',{ @@ -16918,14 +15221,14 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); - (function ($) { + AblePlayer.prototype.initVimeoPlayer = function () { - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; + var thisObj, deferred, promise, containerId, vimeoId, options; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); containerId = this.mediaId + '_vimeo'; @@ -16933,14 +15236,10 @@ if (typeof module !== "undefined" && module.exports) { // add container to which Vimeo player iframe will be appended this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // if a described version is available && user prefers desription + // if a described version is available && user prefers description // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } + vimeoId = (this.vimeoDescId && this.prefDesc) ? this.vimeoDescId : this.vimeoId; + this.activeVimeoId = vimeoId; // Notes re. Vimeo Embed Options: @@ -16948,44 +15247,36 @@ if (typeof module !== "undefined" && module.exports) { // setting the "controls" option to "false" will hide the default controls, without hiding captions. // This is a new option from Vimeo; previously used "background:true" to hide the controller, // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) + // - In addition to hiding the controls, it also hides captions + // - It automatically autoplays (initializing the player with autoplay:false does not override this) + // - It automatically loops (but this can be overridden by initializing the player with loop:false) + // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - if (this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } + autoplay = (this.okToPlay) ? 'true' : 'false'; - if (this.playerWidth) { - if (this.vimeoUrlHasParams) { - // use url param, not id + if (this.playerWidth) { + if (this.vimeoUrlHasParams) { + // use url param, not id options = { url: vimeoId, width: this.playerWidth, controls: false } - } - else { + } else { options = { id: vimeoId, width: this.playerWidth, controls: false } } - } - else { - // initialize without width & set width later - if (this.vimeoUrlHasParams) { + } else { + // initialize without width & set width later + if (this.vimeoUrlHasParams) { options = { url: vimeoId, controls: false } - } - else { + } else { options = { id: vimeoId, controls: false @@ -17003,18 +15294,18 @@ if (typeof module !== "undefined" && module.exports) { }); // get video's intrinsic size and initiate player dimensions - thisObj.vimeoPlayer.getVideoWidth().then(function(width) { - if (width) { - // also get height - thisObj.vimeoPlayer.getVideoHeight().then(function(height) { - if (height) { - thisObj.resizePlayer(width,height); + thisObj.vimeoPlayer.getVideoWidth().then(function(width) { + if (width) { + // also get height + thisObj.vimeoPlayer.getVideoHeight().then(function(height) { + if (height) { + thisObj.resizePlayer(width,height); } - }); + }); } }).catch(function(error) { - // an error occurred getting height or width - // TODO: Test this to see how gracefully it organically recovers + // an error occurred getting height or width + // TODO: Test this to see how gracefully it organically recovers }); if (!thisObj.hasPlaylist) { @@ -17047,7 +15338,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPaused = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getPaused().then(function (paused) { @@ -17061,7 +15352,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoEnded = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getEnded().then(function (ended) { @@ -17074,11 +15365,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoState = function () { - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - - thisObj = this; + var deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); promises = []; @@ -17105,10 +15394,10 @@ if (typeof module !== "undefined" && module.exports) { // get data via Vimeo Player API, and push data to this.captions // Note: Vimeo doesn't expose the caption cues themselves // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - var thisObj, i, trackId, isDefaultTrack; + var thisObj, i, isDefaultTrack; thisObj = this; @@ -17128,15 +15417,13 @@ if (typeof module !== "undefined" && module.exports) { thisObj.hasCaptions = true; if (thisObj.prefCaptions === 1) { thisObj.captionsOn = true; - } - else { + } else { thisObj.captionsOn = false; } // assign the default track based on language of the player if (tracks[i]['language'] === thisObj.lang) { isDefaultTrack = true; - } - else { + } else { isDefaultTrack = false; } thisObj.tracks.push({ @@ -17144,18 +15431,17 @@ if (typeof module !== "undefined" && module.exports) { 'language': tracks[i]['language'], 'label': tracks[i]['label'], 'def': isDefaultTrack - }); + }); } - thisObj.captions = thisObj.tracks; + thisObj.captions = thisObj.tracks; thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original thisObj.setupPopups('captions'); deferred.resolve(); - } - else { + } else { thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; + thisObj.usingVimeoCaptions = false; deferred.resolve(); } }); @@ -17165,69 +15451,59 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPosterUrl = function (vimeoId, width) { - // this is a placeholder, copied from getYouTubePosterUrl() - // Vimeo doesn't seem to have anything similar, - // nor does it seem to be possible to get the poster via the Vimeo API - // Vimeo playlist support (with thumbnail images) may require use of data-poster + // Vimeo Oembed only returns a 640px width image. Hope at some point there's an alternative. + var url = 'http://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId, imageUrl = ''; + + fetch( url ).then( response => { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 + return response.json(); + }) + .then( json => { + imageUrl = json.thumbnail_url; + }) + .catch( error => { + if (thisObj.debug) { + + } + }); - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; - }; + return imageUrl; + }; AblePlayer.prototype.getVimeoId = function (url) { - + // return a Vimeo ID, extracted from a full Vimeo URL // Supported URL patterns are anything containing 'vimeo.com' - // and ending with a '/' followed by the ID. + // and ending with a '/' followed by the ID. // (Vimeo IDs do not have predicatable lengths) - - // Update: If URL contains parameters, return the full url - // This will need to be passed to the Vimeo Player API - // as a url parameter, not as an id parameter - this.vimeoUrlHasParams = false; - - var idStartPos, id; - - if (typeof url === 'number') { - // this is likely already a vimeo ID - return url; - } - else if (url.indexOf('vimeo.com') !== -1) { - // this is a full Vimeo URL - if (url.indexOf('?') !== -1) { - // URL contains parameters - this.vimeoUrlHasParams = true; - return url; - } - else { - url = url.trim(); - idStartPos = url.lastIndexOf('/') + 1; - id = url.substring(idStartPos); - return id; - } - } - else { - return url; - } -}; + + // Update: If URL contains parameters, return the full url + // This will need to be passed to the Vimeo Player API + // as a url parameter, not as an id parameter + this.vimeoUrlHasParams = false; + + if (typeof url === 'number') { + // this is likely already a vimeo ID + return url; + } else { + urlObject = new URL(url); + } + if ( 'vimeo.com' === urlObject.hostname || 'player.vimeo.com' === urlObject.hostname ) { + // this is a full Vimeo URL + if ( '' !== urlObject.search ) { + // URL contains parameters + this.vimeoUrlHasParams = true; + return url; + } else { + if ( 'player.vimeo.com' === urlObject.hostname ) { + return urlObject.pathname.replace( '/video/', '' ); + } else { + return urlObject.pathname.replace( '/', '' ); + } + } + } else { + return url; + } + }; })(jQuery); diff --git a/src/build/separate-dompurify/ableplayer.js b/src/build/separate-dompurify/ableplayer.js index baeb735..7d45bd8 100644 --- a/src/build/separate-dompurify/ableplayer.js +++ b/src/build/separate-dompurify/ableplayer.js @@ -1,37 +1,4 @@ -/! ableplayer V4.5.1 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / -/ - // JavaScript for Able Player - - // HTML5 Media API: - // http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement - // http://dev.w3.org/html5/spec-author-view/video.html - - // W3C API Test Page: - // http://www.w3.org/2010/05/video/mediaevents.html - - // YouTube Player API for iframe Embeds - https://developers.google.com/youtube/iframe_api_reference - - // YouTube Player Parameters - https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 - - // YouTube Data API - https://developers.google.com/youtube/v3 - - // Vimeo Player API - https://github.com/vimeo/player.js - - // Google API Client Library for JavaScript - https://developers.google.com/api-client-library/javascript/dev/dev_jscript - - // Google API Explorer: YouTube services and methods - https://developers.google.com/apis-explorer/#s/youtube/v3/ - - // Web Speech API (Speech Synthesis) - // https://w3c.github.io/speech-api/#tts-section - // https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis -/ - +/! ableplayer V4.8.0 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / /jslint node: true, browser: true, white: true, indent: 2, unparam: true, plusplus: true / /global $, jQuery */ "use strict"; @@ -41,7 +8,6 @@ var AblePlayerInstances = []; (function ($) { $(function () { - $('video, audio').each(function (index, element) { if ($(element).data('able-player') !== undefined) { AblePlayerInstances.push(new AblePlayer($(this),$(element))); @@ -62,12 +28,13 @@ var AblePlayerInstances = []; } }); - // Construct an AblePlayer object - // Parameters are: - // media - jQuery selector or element identifying the media. + /** + * Construct the AblePlayer object. + * + * @param object media jQuery selector or element identifying the media. + / window.AblePlayer = function(media) { - var thisObj = this; // Keep track of the last player created for use with global events. @@ -79,80 +46,49 @@ var AblePlayerInstances = []; return; } - /////////////////////////////// - // // Default variables assignment - // - /////////////////////////////// - // The following variables CAN be overridden with HTML attributes // autoplay (Boolean; if present always resolves to true, regardless of value) if ($(media).attr('autoplay') !== undefined) { - this.autoplay = true; // this value remains constant + this.autoplay = true; // this value remains constant this.okToPlay = true; // this value can change dynamically - } - else { + } else { this.autoplay = false; this.okToPlay = false; } - + // loop (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('loop') !== undefined) { - this.loop = true; - } - else { - this.loop = false; - } + this.loop = ($(media).attr('loop') !== undefined) ? true : false; // playsinline (Boolean; if present always resolves to true, regardless of value) - if ($(media).attr('playsinline') !== undefined) { - this.playsInline = '1'; // this value gets passed to YT.Player contructor in youtube.js - } - else { - this.playsInline = '0'; - } + this.playsInline = ($(media).attr('playsinline') !== undefined) ? '1' : '0'; // poster (Boolean, indicating whether media element has a poster attribute) - if ($(media).attr('poster')) { - this.hasPoster = true; - } - else { - this.hasPoster = false; - } + this.hasPoster = ( $(media).attr('poster') || $(media).data('poster') ) ? true : false; - // get height and width attributes, if present - // and add them to variables - // Not currently used, but might be useful for resizing player - if ($(media).attr('width')) { - this.width = $(media).attr('width'); - } - if ($(media).attr('height')) { - this.height = $(media).attr('height'); - } + this.audioPoster = $(media).data('poster'); + this.audioPosterAlt = $(media).data('poster-alt' ); + + // get height and width attributes, if present + // and add them to variables + // Not currently used, but might be useful for resizing player + this.width = $(media).attr('width') ?? 0; + this.height = $(media).attr('height') ?? 0; // start-time - if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) { - this.startTime = $(media).data('start-time'); - } - else { - this.startTime = 0; - } + var startTime = $(media).data('start-time'); + var isNumeric = ( typeof startTime === 'number' || ( typeof startTime === 'string' && value.trim() !== '' && ! isNaN(value) && isFinite( Number(value) ) ) ) ? true : false; + this.startTime = ( startTime !== undefined && isNumeric ) ? startTime : 0; // debug - if ($(media).data('debug') !== undefined && $(media).data('debug') !== false) { - this.debug = true; - } - else { - this.debug = false; - } + this.debug = ($(media).data('debug') !== undefined && $(media).data('debug') !== false) ? true : false; // Path to root directory of Able Player code if ($(media).data('root-path') !== undefined) { // add a trailing slash if there is none this.rootPath = $(media).data('root-path').replace(/\/?$/, '/'); - } - else { + } else { this.rootPath = this.getRootPath(); } @@ -174,68 +110,49 @@ var AblePlayerInstances = []; if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) { this.useChaptersButton = false; - } - else { + } else { this.useChaptersButton = true; } - - // Control whether text descriptions are read aloud + + // Control whether text descriptions are read aloud // set to "false" if the sole purpose of the WebVTT descriptions file // is to integrate text description into the transcript - // set to "true" to write description text to a div - // This variable does not* control the method by which description is read. - // For that, see below (this.descMethod) + // set to "true" to write description text to a div + // This variable does not control the method by which description is read. + // For that, see below (this.descMethod) if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) { this.readDescriptionsAloud = false; - } - else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { + } else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) { // support both singular and plural spelling of attribute this.readDescriptionsAloud = false; - } - else { + } else { this.readDescriptionsAloud = true; } - // Method by which text descriptions are read - // valid values of data-desc-reader are: - // 'brower' (default) - text-based audio description is handled by the browser, if supported - // 'screenreader' - text-based audio description is always handled by screen readers - // The latter may be preferable by owners of websites in languages that are not well supported - // by the Web Speech API - if ($(media).data('desc-reader') == 'screenreader') { - this.descReader = 'screenreader'; - } - else { - this.descReader = 'browser'; - } - - // Default state of captions and descriptions - // This setting is overridden by user preferences, if they exist - // values for data-state-captions and data-state-descriptions are 'on' or 'off' - if ($(media).data('state-captions') == 'off') { - this.defaultStateCaptions = 0; // off - } - else { - this.defaultStateCaptions = 1; // on by default - } - if ($(media).data('state-descriptions') == 'on') { - this.defaultStateDescriptions = 1; // on - } - else { - this.defaultStateDescriptions = 0; // off by default - } + // setting initial this.descVoices to an empty array + // to be populated later by getBrowserVoices + this.descVoices = []; - // Default setting for prefDescPause - // Extended description (i.e., pausing during description) is on by default - // but this settings give website owners control over that - // since they know the nature of their videos, and whether pausing is necessary - // This setting is overridden by user preferences, if they exist - if ($(media).data('desc-pause-default') == 'off') { - this.defaultDescPause = 0; // off - } - else { - this.defaultDescPause = 1; // on by default - } + // Method by which text descriptions are read + // valid values of data-desc-reader are: + // 'brower' (default) - text-based audio description is handled by the browser, if supported + // 'screenreader' - text-based audio description is always handled by screen readers + // The latter may be preferable by owners of websites in languages that are not well supported + // by the Web Speech API + this.descReader = ($(media).data('desc-reader') == 'screenreader') ? 'screenreader' : 'browser'; + + // Default state of captions and descriptions + // This setting is overridden by user preferences, if they exist + // values for data-state-captions and data-state-descriptions are 'on' or 'off' + this.defaultStateCaptions = ($(media).data('state-captions') == 'off') ? 0 : 1; + this.defaultStateDescriptions = ($(media).data('state-descriptions') == 'on') ? 1 : 0; + + // Default setting for prefDescPause + // Extended description (i.e., pausing during description) is on by default + // but this settings give website owners control over that + // since they know the nature of their videos, and whether pausing is necessary + // This setting is overridden by user preferences, if they exist + this.defaultDescPause = ($(media).data('desc-pause-default') == 'off') ? 0 : 1; // Headings // By default, an off-screen heading is automatically added to the top of the media player @@ -254,75 +171,60 @@ var AblePlayerInstances = []; // There are three types of interactive transcripts. // In descending of order of precedence (in case there are conflicting tags), they are: // 1. "manual" - A manually coded external transcript (requires data-transcript-src) - // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div) + // 2. "external" - Automatically generated, written to an external div (requires data-transcript-div & a valid target element) // 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button // If data-include-transcript="false", there is no "popup" transcript - - if ($(media).data('transcript-div') !== undefined && $(media).data('transcript-div') !== "") { - this.transcriptDivLocation = $(media).data('transcript-div'); - } - else { + var transcriptDivLocation = $(media).data('transcript-div'); + if ( transcriptDivLocation !== undefined && transcriptDivLocation !== "" && null !== document.getElementById( transcriptDivLocation ) ) { + this.transcriptDivLocation = transcriptDivLocation; + } else { this.transcriptDivLocation = null; } - if ($(media).data('include-transcript') !== undefined && $(media).data('include-transcript') === false) { - this.hideTranscriptButton = true; - } - else { - this.hideTranscriptButton = null; - } + var includeTranscript = $(media).data('include-transcript'); + this.hideTranscriptButton = ( includeTranscript !== undefined && includeTranscript === false) ? true : false; this.transcriptType = null; if ($(media).data('transcript-src') !== undefined) { this.transcriptSrc = $(media).data('transcript-src'); if (this.transcriptSrcHasRequiredParts()) { this.transcriptType = 'manual'; - } - else { + } else { console.log('ERROR: Able Player transcript is missing required parts'); } - } - else if ($(media).find('track[kind="captions"], track[kind="subtitles"]').length > 0) { + } else if ($(media).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length > 0) { // required tracks are present. COULD automatically generate a transcript - if (this.transcriptDivLocation) { - this.transcriptType = 'external'; - } - else { - this.transcriptType = 'popup'; - } + this.transcriptType = (this.transcriptDivLocation) ? 'external' : 'popup'; } // In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript - // If false (default), line breaks are are removed from transcripts in order to provide a more seamless reading experience + // If false (default), line breaks are are removed from transcripts for a more seamless reading experience // If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem - if ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) { - this.lyricsMode = true; - } - else { - this.lyricsMode = false; - } + this.lyricsMode = ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) ? true : false; - // Transcript Title + // Set Transcript Title if defined explicitly. See transcript.js. if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") { this.transcriptTitle = $(media).data('transcript-title'); } - else { - // do nothing. The default title will be defined later (see transcript.js) + + // Sign Language + // sign language can be a modal (default) or assigned to a div on the page. + var signDivLocation = $(media).data('sign-div'); + if ( signDivLocation !== undefined && signDivLocation !== "" && null !== document.getElementById( signDivLocation ) ) { + this.$signDivLocation = $( '#' + signDivLocation ); + } else { + this.$signDivLocation = null; } // Captions // data-captions-position can be used to set the default captions position // this is only the default, and can be overridden by user preferences // valid values of data-captions-position are 'below' and 'overlay' - if ($(media).data('captions-position') === 'overlay') { - this.defaultCaptionsPosition = 'overlay'; - } - else { // the default, even if not specified - this.defaultCaptionsPosition = 'below'; - } + this.defaultCaptionsPosition = ($(media).data('captions-position') === 'overlay') ? 'overlay' : 'below'; // Chapters - if ($(media).data('chapters-div') !== undefined && $(media).data('chapters-div') !== "") { - this.chaptersDivLocation = $(media).data('chapters-div'); + var chaptersDiv = $(media).data('chapters-div'); + if ( chaptersDiv !== undefined && chaptersDiv !== "") { + this.chaptersDivLocation = chaptersDiv; } if ($(media).data('chapters-title') !== undefined) { @@ -330,83 +232,76 @@ var AblePlayerInstances = []; this.chaptersTitle = $(media).data('chapters-title'); } - if ($(media).data('chapters-default') !== undefined && $(media).data('chapters-default') !== "") { - this.defaultChapter = $(media).data('chapters-default'); - } - else { - this.defaultChapter = null; - } + var defaultChapter = $(media).data('chapters-default'); + this.defaultChapter = ( defaultChapter !== undefined && defaultChapter !== "") ? defaultChapter : null; // Slower/Faster buttons // valid values of data-speed-icons are 'animals' (default) and 'arrows' // 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows - if ($(media).data('speed-icons') === 'arrows') { - this.speedIcons = 'arrows'; - } - else { - this.speedIcons = 'animals'; - } + this.speedIcons = ($(media).data('speed-icons') === 'arrows') ? 'arrows' : 'animals'; // Seekbar // valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters' - if ($(media).data('seekbar-scope') === 'chapter' || $(media).data('seekbar-scope') === 'chapters') { - this.seekbarScope = 'chapter'; - } - else { - this.seekbarScope = 'video'; - } + var seekbarScope = $(media).data('seekbar-scope'); + this.seekbarScope = ( seekbarScope === 'chapter' || seekbarScope === 'chapters') ? 'chapter' : 'video'; // YouTube - if ($(media).data('youtube-id') !== undefined && $(media).data('youtube-id') !== "") { - this.youTubeId = this.getYouTubeId($(media).data('youtube-id')); + var youTubeId = $(media).data('youtube-id'); + if ( youTubeId !== undefined && youTubeId !== "") { + this.youTubeId = this.getYouTubeId(youTubeId); + if ( ! this.hasPoster ) { + let poster = this.getYouTubePosterUrl(this.youTubeId,'640'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('youtube-desc-id') !== undefined && $(media).data('youtube-desc-id') !== "") { - this.youTubeDescId = this.getYouTubeId($(media).data('youtube-desc-id')); + var youTubeDescId = $(media).data('youtube-desc-id'); + if ( youTubeDescId !== undefined && youTubeDescId !== "") { + this.youTubeDescId = this.getYouTubeId(youTubeDescId); } - if ($(media).data('youtube-nocookie') !== undefined && $(media).data('youtube-nocookie')) { - this.youTubeNoCookie = true; - } - else { - this.youTubeNoCookie = false; + var youTubeSignId = $(media).data('youtube-sign-src'); + if ( youTubeSignId !== undefined && youTubeSignId !== "") { + this.youTubeSignId = this.getYouTubeId(youTubeSignId); } + var youTubeNoCookie = $(media).data('youtube-nocookie'); + this.youTubeNoCookie = (youTubeNoCookie !== undefined && youTubeNoCookie) ? true : false; + // Vimeo - if ($(media).data('vimeo-id') !== undefined && $(media).data('vimeo-id') !== "") { - this.vimeoId = this.getVimeoId($(media).data('vimeo-id')); + var vimeoId = $(media).data('vimeo-id'); + if ( vimeoId !== undefined && vimeoId !== "") { + this.vimeoId = this.getVimeoId(vimeoId); + if ( ! this.hasPoster ) { + let poster = thisObj.getVimeoPosterUrl(this.vimeoId,'1200'); + $(media).attr( 'poster', poster ); + } } - if ($(media).data('vimeo-desc-id') !== undefined && $(media).data('vimeo-desc-id') !== "") { - this.vimeoDescId = this.getVimeoId($(media).data('vimeo-desc-id')); + var vimeoDescId = $(media).data('vimeo-desc-id'); + if ( vimeoDescId !== undefined && vimeoDescId !== "") { + this.vimeoDescId = this.getVimeoId(vimeoDescId); } // Skin // valid values of data-skin are: - // 'legacy' (default), two rows of controls; seekbar positioned in available space within top row - // '2020', all buttons in one row beneath a full-width seekbar - if ($(media).data('skin') == '2020') { - this.skin = '2020'; - } - else { - this.skin = 'legacy'; - } + // '2020' (default as of 4.6), all buttons in one row beneath a full-width seekbar + // 'legacy', two rows of controls; seekbar positioned in available space within top row + this.skin = ($(media).data('skin') == 'legacy') ? 'legacy' : '2020'; - // Size - // width of Able Player is determined using the following order of precedence: - // 1. data-width attribute + // Size + // width of Able Player is determined using the following order of precedence: + // 1. data-width attribute // 2. width attribute (for video or audio, although it is not valid HTML for audio) // 3. Intrinsic size from video (video only, determined later) if ($(media).data('width') !== undefined) { this.playerWidth = parseInt($(media).data('width')); - } - else if ($(media)[0].getAttribute('width')) { - // NOTE: jQuery attr() returns null for all invalid HTML attributes + } else if ($(media)[0].getAttribute('width')) { + // NOTE: jQuery attr() returns null for all invalid HTML attributes // (e.g., width on <audio>) - // but it can be acessed via JavaScript getAttribute() + // but it can be acessed via JavaScript getAttribute() this.playerWidth = parseInt($(media)[0].getAttribute('width')); - } - else { - this.playerWidth = null; + } else { + this.playerWidth = null; } // Icon type @@ -418,21 +313,18 @@ var AblePlayerInstances = []; this.forceIconType = false; if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") { var iconType = $(media).data('icon-type'); - if (iconType === 'font' || iconType == 'image' || iconType == 'svg') { + if (iconType === 'font' || iconType === 'image' || iconType === 'svg') { this.iconType = iconType; this.forceIconType = true; } } - if ($(media).data('allow-fullscreen') !== undefined && $(media).data('allow-fullscreen') === false) { - this.allowFullscreen = false; - } - else { - this.allowFullscreen = true; - } - // Define other variables that are used in fullscreen program flow - this.clickedFullscreenButton = false; - this.restoringAfterFullscreen = false; + var allowFullScreen = $(media).data('allow-fullscreen'); + this.allowFullscreen = (allowFullScreen !== undefined && allowFullScreen === false) ? false : true; + + // Define other variables that are used in fullscreen program flow + this.clickedFullscreenButton = false; + this.restoringAfterFullscreen = false; // Seek interval // Number of seconds to seek forward or back with Rewind & Forward buttons @@ -451,35 +343,26 @@ var AblePlayerInstances = []; // Now Playing // Shows "Now Playing:" plus the title of the current track above player // Only used if there is a playlist - if ($(media).data('show-now-playing') !== undefined && $(media).data('show-now-playing') === false) { - this.showNowPlaying = false; - } - else { - this.showNowPlaying = true; - } + var showNowPlaying = $(media).data('show-now-playing'); + this.showNowPlaying = (showNowPlaying !== undefined && showNowPlaying === false) ? false : true; // TTML support (experimental); enabled for testing with data-use-ttml (Boolean) if ($(media).data('use-ttml') !== undefined) { this.useTtml = true; // The following may result in a console error. this.convert = require('xml-js'); - } - else { + } else { this.useTtml = false; } // Fallback // The data-test-fallback attribute can be used to test the fallback solution in any browser - if ($(media).data('test-fallback') !== undefined && $(media).data('test-fallback') !== false) { - if ($(media).data('test-fallback') == '2') { - this.testFallback = 2; // emulate browser that doesn't support HTML5 media - } - else { - this.testFallback = 1; // emulate failure to load Able Player - } - } - else { - this.testFallback = false; + var testFallback = $(media).data('test-fallback'); + if ( testFallback !== undefined && testFallback !== false) { + // 1: build error; 2: browser doesn't support media. + this.testFallback = ( testFallback == '2' ) ? 2 : 1; + } else { + this.testFallback = false; } // Language @@ -488,54 +371,39 @@ var AblePlayerInstances = []; // 2. Lang attribute on <html> or <body>, if a matching translation file is available // 3. English // Final calculation occurs in translation.js > getTranslationText() - if ($(media).data('lang') !== undefined && $(media).data('lang') !== "") { - this.lang = $(media).data('lang').toLowerCase(); - } - else { - this.lang = null; - } + var lang = $(media).data('lang'); + this.lang = ( lang !== undefined && lang !== "") ? lang.toLowerCase() : null; // Metadata Tracks - if ($(media).data('meta-type') !== undefined && $(media).data('meta-type') !== "") { - this.metaType = $(media).data('meta-type'); + var metaType = $(media).data('meta-type'); + if ( metaType !== undefined && metaType !== "") { + this.metaType = metaType; } - - if ($(media).data('meta-div') !== undefined && $(media).data('meta-div') !== "") { - this.metaDiv = $(media).data('meta-div'); + var metaDiv = $(media).data('meta-div'); + if ( metaDiv !== undefined && metaDiv !== "") { + this.metaDiv = metaDiv; } // Search // conducting a search requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { + var searchDiv = $(media).data('search-div'); + if ( searchDiv !== undefined && searchDiv !== "") { - this.searchDiv = $(media).data('search-div'); + this.searchDiv = searchDiv; // Search term (optional; could be assigned later in a JavaScript application) - if ($(media).data('search') !== undefined && $(media).data('search') !== "") { - this.searchString = $(media).data('search'); + var searchString = $(media).data('search'); + if ( searchString !== undefined && searchString !== "") { + this.searchString = searchString; } // Search Language - if ($(media).data('search-lang') !== undefined && $(media).data('search-lang') !== "") { - this.searchLang = $(media).data('search-lang'); - } - else { - this.searchLang = null; // will change to final value of this.lang in translation.js > getTranslationText() - } + var searchLang = $(media).data('search-lang'); + this.searchLang = ( searchLang !== undefined && searchLang !== "") ? searchLang : null; // Search option: Ignore capitalization in search terms - if ($(media).data('search-ignore-caps') !== undefined && $(media).data('search-ignore-caps') !== false) { - this.searchIgnoreCaps = true; - } - else { - this.searchIgnoreCaps = false; - } - - // conducting a search currently requires an external div in which to write the results - if ($(media).data('search-div') !== undefined && $(media).data('search-div') !== "") { - this.searchString = $(media).data('search'); - this.searchDiv = $(media).data('search-div'); - } + var searchIgnoreCaps = $(media).data('search-ignore-caps'); + this.searchIgnoreCaps = ( searchIgnoreCaps !== undefined && searchIgnoreCaps !== false) ? true : false; } // Hide controls when video starts playing @@ -544,8 +412,7 @@ var AblePlayerInstances = []; if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) { this.hideControls = true; this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode - } - else { + } else { this.hideControls = false; this.hideControlsOriginal = false; } @@ -564,13 +431,11 @@ var AblePlayerInstances = []; this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoFrameId = null; this.$stenoFrame = null; } - } - else { + } else { this.stenoMode = false; this.stenoFrameId = null; this.$stenoFrame = null; @@ -580,9 +445,7 @@ var AblePlayerInstances = []; this.setDefaults(); //////////////////////////////////////// - // // End assignment of default variables - // //////////////////////////////////////// this.ableIndex = AblePlayer.nextIndex; @@ -594,21 +457,15 @@ var AblePlayerInstances = []; // use defer method to defer additional processing until text is retrieved this.tt = {}; var thisObj = this; - $.when(this.getTranslationText()).then( - function () { - if (thisObj.countProperties(thisObj.tt) > 50) { - // close enough to ensure that most text variables are populated - thisObj.setup(); - } - else { - // can't continue loading player with no text - thisObj.provideFallback(); - } + async function fetchTranslations(thisObj) { + try { + await thisObj.getTranslationText(); + thisObj.setup(); + } catch { + thisObj.provideFallback(); } - ). - fail(function() { - thisObj.provideFallback(); - }); + } + fetchTranslations(thisObj); }; // Index to increment every time new player is created. @@ -623,17 +480,15 @@ var AblePlayerInstances = []; if (!thisObj.player) { // No player for this media, show last-line fallback. thisObj.provideFallback(); - } - else { + } else { thisObj.setupInstance().then(function () { thisObj.setupInstancePlaylist(); if (thisObj.hasPlaylist) { // for playlists, recreatePlayer() is called from within cuePlaylistItem() - } - else { - thisObj.recreatePlayer().then(function() { + } else { + thisObj.recreatePlayer().then(function() { thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed + thisObj.playerCreated = true; // remains true until browser is refreshed }); } }); @@ -653,13 +508,10 @@ var AblePlayerInstances = []; }; AblePlayer.localGetElementById = function(element, id) { - if (element.getRootNode) - { + if (element.getRootNode) { // Use getRootNode() and querySelector() where supported (for shadow DOM support) return $(element.getRootNode().querySelector('#' + id)); - } - else - { + } else { // If getRootNode is not supported it should be safe to use document.getElementById (since there is no shadow DOM support) return $(document.getElementById(id)); } @@ -728,8 +580,7 @@ var AblePlayerInstances = []; $el = $('<div>', { 'class': 'able-controller' }).hide(); - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { $el = $('<div>', { 'class': 'able-window-toolbar' }).hide(); @@ -744,16 +595,11 @@ var AblePlayerInstances = []; blue = rgb[2]; luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue); // range is 1 - 255; therefore 125 is the tipping point - if (luminance < 125) { // background is dark - iconColor = 'white'; - } - else { // background is light - iconColor = 'black'; - } + iconColor = (luminance < 125) ? 'white' : 'black'; + if ($elements[i] === 'controller') { this.iconColor = iconColor; - } - else if ($elements[i] === 'toolbar') { + } else if ($elements[i] === 'toolbar') { this.toolbarIconColor = iconColor; } $el.remove(); @@ -766,20 +612,16 @@ var AblePlayerInstances = []; this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/'; this.playButtonImg = this.imgPath + 'play.png'; this.pauseButtonImg = this.imgPath + 'pause.png'; - this.restartButtonImg = this.imgPath + 'restart.png'; - this.rewindButtonImg = this.imgPath + 'rewind.png'; this.forwardButtonImg = this.imgPath + 'forward.png'; - this.previousButtonImg = this.imgPath + 'previous.png'; this.nextButtonImg = this.imgPath + 'next.png'; if (this.speedIcons === 'arrows') { this.fasterButtonImg = this.imgPath + 'slower.png'; this.slowerButtonImg = this.imgPath + 'faster.png'; - } - else if (this.speedIcons === 'animals') { + } else if (this.speedIcons === 'animals') { this.fasterButtonImg = this.imgPath + 'rabbit.png'; this.slowerButtonImg = this.imgPath + 'turtle.png'; } @@ -789,19 +631,19 @@ var AblePlayerInstances = []; this.signButtonImg = this.imgPath + 'sign.png'; this.transcriptButtonImg = this.imgPath + 'transcript.png'; this.descriptionsButtonImg = this.imgPath + 'descriptions.png'; - this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png'; this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png'; - this.prefsButtonImg = this.imgPath + 'preferences.png'; this.helpButtonImg = this.imgPath + 'help.png'; }; - AblePlayer.prototype.getSvgData = function(button) { + AblePlayer.prototype.getIconData = function(button) { // returns array of values for creating <svg> tag for specified button // 0 = <svg> viewBox attribute // 1 = <path> d (description) attribute + // 2 = icon class for font icons + // 3 = img URL for images. var svg = Array(); switch (button) { @@ -809,142 +651,184 @@ var AblePlayerInstances = []; case 'play': svg[0] = '0 0 16 20'; svg[1] = 'M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z'; + svg[2] = 'icon-play'; + svg[3] = this.playButtonImg; break; case 'pause': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'stop': - svg[0] = '0 0 20 20'; - svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-pause'; + svg[3] = this.pauseButtonImg; break; case 'restart': svg[0] = '0 0 20 20'; svg[1] = 'M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z'; + svg[2] = 'icon-restart'; + svg[3] = this.restartButtonImg; break; case 'rewind': svg[0] = '0 0 20 20'; svg[1] = 'M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z'; + svg[2] = 'icon-rewind'; + svg[3] = this.rewindButtonImg; break; case 'forward': svg[0] = '0 0 20 20'; svg[1] = 'M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z'; + svg[2] = 'icon-forward'; + svg[3] = this.forwardButtonImg; break; case 'previous': svg[0] = '0 0 20 20'; svg[1] = 'M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z'; + svg[2] = 'icon-previous'; + svg[3] = this.previousButtonImg; break; case 'next': svg[0] = '0 0 20 20'; svg[1] = 'M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z'; + svg[2] = 'icon-next'; + svg[3] = this.nextButtonImg; break; case 'slower': - svg[0] = '0 0 20 20'; + svg[0] = '0 0 11 20'; svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z'; + svg[2] = 'icon-slower'; + svg[3] = this.slowerButtonImg; break; case 'faster': svg[0] = '0 0 11 20'; svg[1] = 'M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z'; + svg[2] = 'icon-faster'; + svg[3] = this.fasterButtonImg; break; case 'turtle': svg[0] = '0 0 20 20'; svg[1] = 'M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z'; + svg[2] = 'icon-turtle'; + svg[3] = this.slowerButtonImg; break; case 'rabbit': svg[0] = '0 0 20 20'; svg[1] = 'M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z'; + svg[2] = 'icon-rabbit'; + svg[3] = this.fasterButtonImg; break; case 'ellipsis': svg[0] = '0 0 20 20'; svg[1] = 'M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z'; + svg[2] = 'icon-ellipsis'; + svg[3] = false; break; case 'pipe': svg[0] = '0 0 20 20'; svg[1] = 'M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z'; + svg[2] = 'icon-pipe'; + svg[3] = false; break; case 'captions': svg[0] = '0 0 20 20'; svg[1] = 'M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z'; + svg[2] = 'icon-captions'; + svg[3] = this.captionsButtonImg; break; case 'descriptions': svg[0] = '0 0 20 20'; svg[1] = 'M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z'; + svg[2] = 'icon-descriptions'; + svg[3] = this.descriptionsButtonImg; break; case 'sign': svg[0] = '0 0 20 20'; svg[1] = 'M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z'; + svg[2] = 'icon-sign'; + svg[3] = this.signButtonImg; break; case 'mute': case 'volume-mute': svg[0] = '0 0 20 20'; svg[1] = 'M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z'; + svg[2] = 'icon-volume-mute'; + svg[3] = this.imgPath + 'volume-mute.png'; break; case 'volume-soft': svg[0] = '0 0 20 20'; svg[1] = 'M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-soft'; + svg[3] = this.imgPath + 'volume-soft.png'; break; case 'volume-medium': svg[0] = '0 0 20 20'; svg[1] = 'M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-medium'; + svg[3] = this.imgPath + 'volume-medium.png'; break; case 'volume-loud': svg[0] = '0 0 21 20'; svg[1] = 'M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z'; + svg[2] = 'icon-volume-loud'; + svg[3] = this.imgPath + 'volume-loud.png'; break; case 'chapters': svg[0] = '0 0 20 20'; svg[1] = 'M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z'; + svg[2] = 'icon-chapters'; + svg[3] = this.chaptersButtonImg; break; case 'transcript': svg[0] = '0 0 20 20'; svg[1] = 'M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z'; + svg[2] = 'icon-transcript'; + svg[3] = this.transcriptButtonImg; break; case 'preferences': svg[0] = '0 0 20 20'; svg[1] = 'M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z'; + svg[2] = 'icon-preferences'; + svg[3] = this.prefsButtonImg; break; case 'close': svg[0] = '0 0 16 20'; svg[1] = 'M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z'; + svg[2] = 'icon-close'; + svg[3] = null; break; case 'fullscreen-expand': svg[0] = '0 0 20 20'; svg[1] = 'M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z'; + svg[2] = 'icon-fullscreen-expand'; + svg[3] = this.fullscreenExpandButtonImg; break; case 'fullscreen-collapse': svg[0] = '0 0 20 20'; svg[1] = 'M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z'; - break; - - case 'help': - svg[0] = '0 0 11 20'; - svg[1] = 'M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z'; + svg[2] = 'icon-fullscreen-collapse'; + svg[3] = this.fullscreenCollapseButtonImg; break; } @@ -952,26 +836,20 @@ var AblePlayerInstances = []; }; // Initialize player based on data on page. - // This sets some variables, but does not modify anything. Safe to call multiple times. + // This sets some variables, but does not modify anything. Safe to call multiple times. // Can call again after updating this.media so long as new media element has the same ID. AblePlayer.prototype.reinitialize = function () { - var deferred, promise, thisObj, errorMsg, srcFile; + var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - // if F12 Developer Tools aren't open in IE (through 9, no longer a problen in IE10) - // console.log causes an error - can't use debug without a console to log messages to - if (! window.console) { - this.debug = false; - } - this.startedPlaying = false; - // TODO: Move this setting to cookie. + // TODO: Move this setting to preferences. this.autoScrollTranscript = true; - //this.autoScrollTranscript = this.getCookie(autoScrollTranscript); // (doesn't work) + //this.autoScrollTranscript = this.getPref(autoScrollTranscript); // (doesn't work) // Bootstrap from this.media possibly being an ID or other selector. this.$media = $(this.media).first(); @@ -980,14 +858,12 @@ var AblePlayerInstances = []; // Set media type to 'audio' or 'video'; this determines some of the behavior of player creation. if (this.$media.is('audio')) { this.mediaType = 'audio'; - } - else if (this.$media.is('video')) { + } else if (this.$media.is('video')) { this.mediaType = 'video'; - } - else { + } else { // Able Player was initialized with some element other than <video> or <audio> this.provideFallback(); - deferred.fail(); + deferred.reject(); return promise; } @@ -1006,107 +882,36 @@ var AblePlayerInstances = []; AblePlayer.prototype.setPlayerSize = function(width, height) { - var mediaId = this.$media.attr('id'); - - // Called again after width and height are known - - if (this.mediaType === 'audio') { - if (this.playerWidth) { - this.$ableWrapper.css('width',this.playerWidth + 'px'); - } - } - else if (width > 0 && height > 0) { - this.playerWidth = width; - this.playerHeight = height; - this.aspectRatio = height / width; + // Called again after width and height are known + if (this.mediaType !== 'audio' && width > 0 && height > 0) { + this.playerWidth = width; + this.playerHeight = height; + this.aspectRatio = height / width; } }; AblePlayer.prototype.setIconType = function() { - // returns either "svg", "font" or "image" (in descending order of preference) - // Test for support of each type. If not supported, test the next type. - // last resort is image icons - - var $tempButton, $testButton, controllerFont; - + // Tests for SVG and font support removed in version 4.7.0. + // Browser support for these is no longer a risk; they are widely supported in all browsers. + // This now only returns 'svg' or 'false' if iconType is forced. if (this.forceIconType) { // use value specified in data-icon-type return false; } - // test for SVG support - // Test this method widely; failed as expected on IE8 and below - // https://stackoverflow.com/a/27568129/744281 - if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) { - // browser supports SVG - this.iconType = 'svg'; - } - else { - // browser does NOT support SVG - // test whether browser can support icon fonts, and whether user has overriding the default style sheet - // which could cause problems with proper display of the icon fonts - if (window.getComputedStyle) { - - // webkit doesn't return calculated styles unless element has been added to the DOM - // and is visible (note: visibly clipped is considered "visible") - // use playpauseButton for font-family test if it exists; otherwise must create a new temp button - if ($('span.icon-play').length) { - $testButton = $('span.icon-play'); - } - else { - $tempButton = $('<span>',{ - 'class': 'icon-play able-clipped' - }); - $('body').append($tempButton); - $testButton = $tempButton; - } - - // the following retrieves the computed value of font-family - // tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works! - // tested in Chrome 49.x with Font Changer plugin - works! - // tested in IE with user-defined style sheet enables - works! - // It does NOT account for users who have "ignore font styles on web pages" checked in IE - // There is no known way to check for that ??? - controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family'); - if (typeof controllerFont !== 'undefined') { - if (controllerFont.indexOf('able') !== -1) { - this.iconType = 'font'; - } - else { - this.iconType = 'image'; - } - } - else { - // couldn't get computed font-family; use images to be safe - this.iconType = 'image'; - } - } - else { - // window.getComputedStyle is not supported (IE 8 and earlier) - // No known way to detect computed font - // The following retrieves the value from the style sheet, not the computed font - // controllerFont = $tempButton.get(0).currentStyle.fontFamily; - // It will therefore return "able", even if the user is overriding that with a custom style sheet - // To be safe, use images - this.iconType = 'image'; - } - if (typeof $tempButton !== 'undefined') { - $tempButton.remove(); - } - } + this.iconType = 'svg'; }; // Perform one-time setup for this instance of player; called after player is first initialized. AblePlayer.prototype.setupInstance = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); if (this.$media.attr('id')) { this.mediaId = this.$media.attr('id'); - } - else { + } else { // Ensure the base media element always has an ID. this.mediaId = "ableMediaId_" + this.ableIndex; this.$media.attr('id', this.mediaId); @@ -1134,7 +939,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from YouTube var $youTubeVideos = $(this).find('li[data-youtube-id]'); $youTubeVideos.each(function() { - var youTubeId = $(this).attr('data-youtube-id'); + var youTubeId = DOMPurify.sanitize( $(this).attr('data-youtube-id') ); var youTubePoster = thisObj.getYouTubePosterUrl(youTubeId,'120'); var $youTubeImg = $('<img>',{ 'src': youTubePoster, @@ -1147,7 +952,7 @@ var AblePlayerInstances = []; // if it does, inject a thumbnail from Vimeo var $vimeoVideos = $(this).find('li[data-vimeo-id]'); $vimeoVideos.each(function() { - var vimeoId = $(this).attr('data-youtube-id'); + var vimeoId = $(this).attr('data-vimeo-id'); var vimeoPoster = thisObj.getVimeoPosterUrl(vimeoId,'120'); var $vimeoImg = $('<img>',{ 'src': vimeoPoster, @@ -1160,13 +965,8 @@ var AblePlayerInstances = []; $(this).find('li span').attr('aria-hidden','true'); thisObj.playlistIndex = 0; var dataEmbedded = $(this).data('embedded'); - if (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) { - // embed playlist within player - thisObj.playlistEmbed = true; - } - else { - thisObj.playlistEmbed = false; - } + // is playlist embedded within player? + thisObj.playlistEmbed = (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) ? true : false; } }); @@ -1193,12 +993,12 @@ var AblePlayerInstances = []; AblePlayer.prototype.recreatePlayer = function () { // Creates the appropriate player for the current source. - // This function is called each time a new media instance is loaded - // e.g., - // User clicks on an item in a playlist - // User swaps to/from described version of video - // Blocks of code that only need to be executed once are controlled - // by this.playerCreated + // This function is called each time a new media instance is loaded + // e.g., + // User clicks on an item in a playlist + // User swaps to/from described version of video + // Blocks of code that only need to be executed once are controlled + // by this.playerCreated // TODO: Ensure when recreating player that we carry over the mediaId if (!this.player) { @@ -1208,38 +1008,37 @@ var AblePlayerInstances = []; var deferred, promise, thisObj, prefsGroups, i; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - this.playerDeleted = false; // reset after deletePlayer() + this.playerDeleted = false; // reset after deletePlayer() // set temp stopgap to prevent this function from executing again before finished - this.recreatingPlayer = true; + this.recreatingPlayer = true; if (!this.playerCreated) { // only call these functions once this.loadCurrentPreferences(); this.injectPlayerCode(); - this.resizePlayer(this.media.videoWidth,this.media.videoHeight); + this.resizePlayer(this.media.videoWidth,this.media.videoHeight); } - this.getSampleDescriptionText(); + this.getSampleDescriptionText(); this.initSignLanguage(); this.initPlayer().then(function() { - thisObj.getTracks().then(function() { + thisObj.getTracks().then(function() { thisObj.initDescription().then(function() { thisObj.setupTracks().then(function() { - if (thisObj.hasClosedDesc) { - if (!thisObj.$descDiv || - (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { - // descDiv either doesn't exist, or exists in an orphaned state - // Either way, it needs to be rebuilt... + if (thisObj.hasClosedDesc) { + if (!thisObj.$descDiv || (thisObj.$descDiv && !($.contains(thisObj.$ableDiv[0], thisObj.$descDiv[0])))) { + // descDiv either doesn't exist, or exists in an orphaned state + // Either way, it needs to be rebuilt... thisObj.injectTextDescriptionArea(); } } @@ -1256,7 +1055,6 @@ var AblePlayerInstances = []; thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - thisObj.setFullscreen(false); if (typeof thisObj.volume === 'undefined') { thisObj.volume = thisObj.defaultVolume; @@ -1289,37 +1087,35 @@ var AblePlayerInstances = []; thisObj.setupPopups(); thisObj.updateCaption(); thisObj.injectVTS(); - if (thisObj.chaptersDivLocation) { - thisObj.populateChaptersDiv(); - } + thisObj.populateChaptersDiv(); thisObj.showSearchResults(); // Go ahead and load media, without user requesting it // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth // However, the media needs to load for us to get the media's duration if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.$media[0].load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } } // refreshControls is called twice building/initializing the player // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete setTimeout(function() { - thisObj.refreshControls('init'); - deferred.resolve(); - },100); - }); - }); + thisObj.refreshControls(); + deferred.resolve(); + },100); + }); + }); }); }); - }); + }); }); }, function() { // initPlayer fail thisObj.provideFallback(); }); - return promise; + return promise; }; AblePlayer.prototype.initPlayer = function () { @@ -1329,33 +1125,28 @@ var AblePlayerInstances = []; // First run player specific initialization. if (this.player === 'html5') { playerPromise = this.initHtml5Player(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { playerPromise = this.initYouTubePlayer(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { playerPromise = this.initVimeoPlayer(); } // After player specific initialization is done, run remaining general initialization. - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - playerPromise.done( + playerPromise.then( function () { // done/resolved if (thisObj.useFixedSeekInterval) { + // if fixed seekInterval was not already assigned (using value of data-seek-interval) if (!thisObj.seekInterval) { thisObj.seekInterval = thisObj.defaultSeekInterval; } - else { - // fixed seekInterval was already assigned, using value of data-seek-interval attribute - } thisObj.seekIntervalCalculated = true; - } - else { + } else { thisObj.setSeekInterval(); } deferred.resolve(); } - ).fail(function () { // failed + ).finally(function () { // failed deferred.reject(); } ); @@ -1365,10 +1156,8 @@ var AblePlayerInstances = []; AblePlayer.prototype.initStenoFrame = function() { - var thisObj, deferred, promise, $iframe; - thisObj = this; - - deferred = new $.Deferred(); + var deferred, promise; + deferred = new this.defer(); promise = deferred.promise(); if (this.stenoMode && this.$stenoFrame) { @@ -1376,15 +1165,13 @@ var AblePlayerInstances = []; if (this.$stenoFrame[0].contentWindow,document.readyState == 'complete') { // iframe has already loaded deferred.resolve(); - } - else { + } else { // iframe has not loaded. Wait for it. this.$stenoFrame.on('load',function() { deferred.resolve(); }); } - } - else { + } else { // there is no stenoFrame to initialize deferred.resolve(); } @@ -1399,33 +1186,24 @@ var AblePlayerInstances = []; var thisObj, duration; thisObj = this; this.seekInterval = this.defaultSeekInterval; - if (this.useChapterTimes) { - duration = this.chapterDuration; - } - else { - duration = this.duration; - } + duration = (this.useChapterTimes) ? this.chapterDuration : this.duration; + if (typeof duration === 'undefined' || duration < 1) { // no duration; just use default for now but keep trying until duration is available this.seekIntervalCalculated = false; return; - } - else { + } else { if (duration <= 20) { this.seekInterval = 5; // 4 steps max - } - else if (duration <= 30) { + } else if (duration <= 30) { this.seekInterval = 6; // 5 steps max - } - else if (duration <= 40) { + } else if (duration <= 40) { this.seekInterval = 8; // 5 steps max - } - else if (duration <= 100) { + } else if (duration <= 100) { this.seekInterval = 10; // 10 steps max - } - else { + } else { // never more than 10 steps from start to end - this.seekInterval = (duration / 10); + this.seekInterval = Math.round(duration / 10, 0); } this.seekIntervalCalculated = true; } @@ -1474,38 +1252,38 @@ var AblePlayerInstances = []; // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' // track.label = the human-readable label - }).catch(function(error) { - switch (error.name) { - case 'InvalidTrackLanguageError': - // no track was available with the specified language - console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); - break; - case 'InvalidTrackError': - // no track was available with the specified language and kind - console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); - break; - default: - // some other error occurred - console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); - break; - } - }); - } - else { - // disable Vimeo captions. - this.vimeoPlayer.disableTextTrack().then(function() { - // Vimeo captions disabled - }).catch(function(error) { - console.log('Error disabling Vimeo text track: ',error); - }); - } + } + ).catch(function(error) { + switch (error.name) { + case 'InvalidTrackLanguageError': + // no track was available with the specified language + console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); + break; + case 'InvalidTrackError': + // no track was available with the specified language and kind + console.log('No ' + track.kind + ' track is available in the specified language (' + track.label + ')'); + break; + default: + // some other error occurred + console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); + break; + } + }); + } else { + // disable Vimeo captions. + this.vimeoPlayer.disableTextTrack().then(function() { + // Vimeo captions disabled + }).catch(function(error) { + console.log('Error disabling Vimeo text track: ',error); + }); } + } } }; AblePlayer.prototype.initHtml5Player = function () { // Nothing special to do! - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); deferred.resolve(); return promise; @@ -1519,6 +1297,7 @@ var AblePlayerInstances = []; // Keep native player from displaying captions/subtitles by setting textTrack.mode='disabled' // https://dev.w3.org/html5/spec-author-view/video.html#text-track-mode // This should work but historically hasn't been supported in all browsers + // As of July 2025, 96% supported per https://caniuse.com/?search=text-track-mode. // Workaround for non-supporting browsers is to remove default attribute // We're doing that too in track.js > setupCaptions() var textTracks = this.$media.get(0).textTracks; @@ -1535,146 +1314,125 @@ var AblePlayerInstances = []; // Determine which player to use, if any // return 'html5', 'youtube', 'vimeo', or null - - var i, sourceType, $newItem; - if (this.testFallback) { - return null; - } - else if (this.youTubeId) { - if (this.mediaType !== 'video') { - // attempting to play a YouTube video using an element other than <video> - return null; - } - else { - return 'youtube'; - } - } - else if (this.vimeoId) { - if (this.mediaType !== 'video') { - // attempting to play a Vimeo video using an element other than <video> - return null; - } - else { - return 'vimeo'; - } - - } - else if (this.media.canPlayType) { + if (this.testFallback) { + return null; + } else if (this.youTubeId) { + // null if attempting to play a YouTube video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'youtube'; + } else if (this.vimeoId) { + // null if attempting to play a Vimeo video using an element other than <video> + return (this.mediaType !== 'video') ? null : 'vimeo'; + } else if (this.media.canPlayType) { return 'html5'; - } - else { + } else { // Browser does not support the available media file return null; } }; - })(jQuery); (function ($) { - AblePlayer.prototype.setCookie = function(cookieValue) { - - Cookies.set('Able-Player', JSON.stringify(cookieValue), { - expires: 90, - sameSite: 'strict' - }); + AblePlayer.prototype.setPrefs = function(preferences) { + if ( typeof Cookies !== 'undefined' ) { + Cookies.set('Able-Player', JSON.stringify(preferences), { + expires: 90, + sameSite: 'strict' + }); + } else { + localStorage.setItem( 'Able-Player', JSON.stringify( preferences ) ); + } }; - AblePlayer.prototype.getCookie = function() { + AblePlayer.prototype.getPref = function() { - var defaultCookie = { + var defaultPrefs = { preferences: {}, sign: {}, transcript: {}, voices: [] }; - var cookie; + var preferences; try { - cookie = JSON.parse(Cookies.get('Able-Player')); + if ( typeof Cookies !== 'undefined' ) { + preferences = JSON.parse( Cookies.get('Able-Player') ); + } else { + preferences = JSON.parse( localStorage.getItem('Able-Player') ); + } } catch (err) { - // Original cookie can't be parsed; update to default - this.setCookie(defaultCookie); - cookie = defaultCookie; - } - if (cookie) { - return cookie; - } - else { - return defaultCookie; + // Original preferences can't be parsed; update to default + this.setPrefs( defaultPrefs ); + preferences = defaultPrefs; } + return (preferences) ? preferences : defaultPrefs; }; - AblePlayer.prototype.updateCookie = function( setting ) { - - // called when a particular setting had been updated - // useful for settings updated indepedently of Preferences dialog + AblePlayer.prototype.updatePreferences = function( setting ) { + // useful for settings updated independently of Preferences dialog // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle() // setting is any supported preference name (e.g., "prefCaptions") // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows) - var cookie, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; - cookie = this.getCookie(); + var preferences, $window, windowPos, available, i, prefName, voiceLangFound, newVoice; + preferences = this.getPref(); if (setting === 'transcript' || setting === 'sign') { if (setting === 'transcript') { $window = this.$transcriptArea; windowPos = $window.position(); - if (typeof cookie.transcript === 'undefined') { - cookie.transcript = {}; - } - cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.transcript['zindex'] = $window.css('z-index'); - cookie.transcript['top'] = windowPos.top; - cookie.transcript['left'] = windowPos.left; - cookie.transcript['width'] = $window.width(); - cookie.transcript['height'] = $window.height(); - } - else if (setting === 'sign') { + if (typeof preferences.transcript === 'undefined') { + preferences.transcript = {}; + } + preferences.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.transcript['zindex'] = $window.css('z-index'); + preferences.transcript['top'] = windowPos.top; + preferences.transcript['left'] = windowPos.left; + preferences.transcript['width'] = $window.width(); + preferences.transcript['height'] = $window.height(); + } else if (setting === 'sign') { $window = this.$signWindow; windowPos = $window.position(); - if (typeof cookie.sign === 'undefined') { - cookie.sign = {}; - } - cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' - cookie.sign['zindex'] = $window.css('z-index'); - cookie.sign['top'] = windowPos.top; - cookie.sign['left'] = windowPos.left; - cookie.sign['width'] = $window.width(); - cookie.sign['height'] = $window.height(); - } - } - else if (setting === 'voice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; - } - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; - } - } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (typeof preferences.sign === 'undefined') { + preferences.sign = {}; + } + preferences.sign['position'] = $window.css('position'); // either 'relative' or 'absolute' + preferences.sign['zindex'] = $window.css('z-index'); + preferences.sign['top'] = windowPos.top; + preferences.sign['left'] = windowPos.left; + preferences.sign['width'] = $window.width(); + preferences.sign['height'] = $window.height(); + } + } else if (setting === 'voice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; + } + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; + } + } + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - } - else { + preferences.voices.push(newVoice); + } + } else { available = this.getAvailablePreferences(); - // Rebuild cookie with current cookie values, + // Rebuild preferences with current preferences values, // replacing the one value that's been changed for (i = 0; i < available.length; i++) { prefName = available[i]['name']; if (prefName == setting) { // this is the one that requires an update - cookie.preferences[prefName] = this[prefName]; + preferences.preferences[prefName] = this[prefName]; } } } - // Save updated cookie - this.setCookie(cookie); + // Save updated preferences + this.setPrefs(preferences); }; AblePlayer.prototype.getPreferencesGroups = function() { @@ -1683,17 +1441,15 @@ var AblePlayerInstances = []; // in the Preferences popup menu // Human-readable label for each group is defined in translation table if (this.usingYouTubeCaptions) { - // no transcript is possible - return ['captions','descriptions','keyboard']; - } - else if (this.usingVimeoCaptions) { + // no transcript is possible + return ['captions','descriptions','keyboard']; + } else if (this.usingVimeoCaptions) { // users cannot control caption appearance // and no transcript is possible - return ['descriptions','keyboard']; + return ['descriptions','keyboard']; + } else { + return ['captions','descriptions','keyboard','transcript']; } - else { - return ['captions','descriptions','keyboard','transcript']; - } } AblePlayer.prototype.getAvailablePreferences = function() { @@ -1705,19 +1461,25 @@ var AblePlayerInstances = []; // Modifier keys preferences prefs.push({ 'name': 'prefAltKey', // use alt key with shortcuts - 'label': this.tt.prefAltKey, + 'label': this.translate( 'prefAltKey', 'Alt' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefCtrlKey', // use ctrl key with shortcuts - 'label': this.tt.prefCtrlKey, + 'label': this.translate( 'prefCtrlKey', 'Control' ), 'group': 'keyboard', 'default': 1 }); prefs.push({ 'name': 'prefShiftKey', - 'label': this.tt.prefShiftKey, + 'label': this.translate( 'prefShiftKey', 'Shift' ), + 'group': 'keyboard', + 'default': 0 + }); + prefs.push({ + 'name': 'prefNoKeyShortcuts', + 'label': this.translate( 'prefNoKeyShortcuts', 'Disable Keyboard Shortcuts' ), 'group': 'keyboard', 'default': 0 }); @@ -1731,7 +1493,7 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefHighlight', // highlight transcript as media plays - 'label': this.tt.prefHighlight, + 'label': this.translate( 'prefHighlight', 'Highlight transcript as media plays' ), 'group': 'transcript', 'default': 1 // on because many users can benefit }); @@ -1743,13 +1505,12 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefTabbable', // tab-enable transcript - 'label': this.tt.prefTabbable, + 'label': this.translate( 'prefTabbable', 'Keyboard-enable transcript' ), 'group': 'transcript', 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page }); // Caption preferences - prefs.push({ 'name': 'prefCaptions', // closed captions default state 'label': null, @@ -1762,23 +1523,23 @@ var AblePlayerInstances = []; /* // not supported yet prefs.push({ 'name': 'prefCaptionsStyle', - 'label': this.tt.prefCaptionsStyle, + 'label': this.translate( 'prefCaptionsStyle', 'Style' ), 'group': 'captions', - 'default': this.tt.captionsStylePopOn + 'default': this.translate( 'captionsStylePopOn', 'Pop-on' ) }); / - // captions are always positioned above the player for audio + // captions are always positioned above the player for audio if (this.mediaType === 'video') { prefs.push({ 'name': 'prefCaptionsPosition', - 'label': this.tt.prefCaptionsPosition, + 'label': this.translate( 'prefCaptionsPosition', 'Position' ), 'group': 'captions', 'default': this.defaultCaptionsPosition }); - } + } prefs.push({ 'name': 'prefCaptionsFont', - 'label': this.tt.prefCaptionsFont, + 'label': this.translate( 'prefCaptionsFont', 'Font' ), 'group': 'captions', 'default': 'sans-serif' }); @@ -1786,7 +1547,7 @@ var AblePlayerInstances = []; // This is the one option that is supported by YouTube IFrame API prefs.push({ 'name': 'prefCaptionsSize', - 'label': this.tt.prefCaptionsSize, + 'label': this.translate( 'prefCaptionsSize', 'Font size' ), 'group': 'captions', 'default': '100%' }); @@ -1795,25 +1556,25 @@ var AblePlayerInstances = []; prefs.push({ 'name': 'prefCaptionsColor', - 'label': this.tt.prefCaptionsColor, + 'label': this.translate( 'prefCaptionsColor', 'Text Color' ), 'group': 'captions', 'default': 'white' }); prefs.push({ 'name': 'prefCaptionsBGColor', - 'label': this.tt.prefCaptionsBGColor, + 'label': this.translate( 'prefCaptionsBGColor', 'Background' ), 'group': 'captions', 'default': 'black' }); prefs.push({ 'name': 'prefCaptionsOpacity', - 'label': this.tt.prefCaptionsOpacity, + 'label': this.translate( 'prefCaptionsOpacity', 'Opacity' ), 'group': 'captions', 'default': '100%' }); } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { // Description preferences prefs.push({ 'name': 'prefDesc', // audio description default state @@ -1829,37 +1590,40 @@ var AblePlayerInstances = []; }); prefs.push({ 'name': 'prefDescVoice', - 'label': this.tt.prefDescVoice, + 'label': this.translate( 'prefDescVoice', 'Voice' ), 'group': 'descriptions', 'default': null // will be set later, in injectPrefsForm() }); prefs.push({ 'name': 'prefDescPitch', - 'label': this.tt.prefDescPitch, + 'label': this.translate( 'prefDescPitch', 'Pitch' ), 'group': 'descriptions', 'default': 1 // 0 to 2 }); prefs.push({ 'name': 'prefDescRate', - 'label': this.tt.prefDescRate, + 'label': this.translate( 'prefDescRate', 'Rate' ), 'group': 'descriptions', 'default': 1 // 0.1 to 10 (1 is normal speech; 2 is fast but decipherable; >2 is super fast) }); prefs.push({ 'name': 'prefDescVolume', - 'label': this.tt.volume, + 'label': this.translate( 'volume', 'Volume' ), 'group': 'descriptions', 'default': 1 // 0 to 1 }); - prefs.push({ - 'name': 'prefDescPause', // automatically pause when closed description starts - 'label': this.tt.prefDescPause, - 'group': 'descriptions', - 'default': this.defaultDescPause - }); + // Don't enable pause option if video described files in use. + if ( this.descMethod !== 'video' ) { + prefs.push({ + 'name': 'prefDescPause', // automatically pause when closed description starts + 'label': this.translate( 'prefDescPause', 'Automatically pause video when description starts' ), + 'group': 'descriptions', + 'default': this.defaultDescPause + }); + } prefs.push({ 'name': 'prefDescVisible', // visibly show closed description (if avilable and used) - 'label': this.tt.prefDescVisible, + 'label': this.translate( 'prefDescVisible', 'Make description visible' ), 'group': 'descriptions', 'default': 0 // off as of 4.3.16, to avoid overloading the player with visible features }); @@ -1877,29 +1641,28 @@ var AblePlayerInstances = []; AblePlayer.prototype.loadCurrentPreferences = function () { - // Load current/default preferences from cookie into the AblePlayer object. + // Load current/default preferences into the AblePlayer object. var available = this.getAvailablePreferences(); - var cookie = this.getCookie(); - // Copy current cookie values into this object, and fill in any default values. + var preferences = this.getPref(); + // Copy current preferences values into this object, and fill in any default values. for (var ii = 0; ii < available.length; ii++) { var prefName = available[ii]['name']; var defaultValue = available[ii]['default']; - if (cookie.preferences[prefName] !== undefined) { - this[prefName] = cookie.preferences[prefName]; - } - else { - cookie.preferences[prefName] = defaultValue; + if (preferences.preferences[prefName] !== undefined) { + this[prefName] = preferences.preferences[prefName]; + } else { + preferences.preferences[prefName] = defaultValue; this[prefName] = defaultValue; } } - // Also load array of preferred voices from cookie - if (typeof cookie.voices !== 'undefined') { - this.prefVoices = cookie.voices; - } + // Also load array of preferred voices from preferences + if (typeof preferences.voices !== 'undefined') { + this.prefVoices = preferences.voices; + } - this.setCookie(cookie); + this.setPrefs(preferences); }; AblePlayer.prototype.injectPrefsForm = function (form) { @@ -1907,19 +1670,12 @@ var AblePlayerInstances = []; // Creates a preferences form and injects it. // form is one of the supported forms (groups) defined in getPreferencesGroups() - var thisObj, available, descLangs, - $prefsDiv, formTitle, introText, - $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, - $fieldset, fieldsetClass, fieldsetId, - $descFieldset, $descLegend, $legend, legendId, - thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField, - $div1,id1,$radio1,$label1, - $div2,id2,$radio2,$label2, - options,$thisOption,optionValue,optionLang,optionText,sampleCapsDiv, - changedPref,changedSpan,changedText, - currentDescState, prefDescVoice, - $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem, - dialog,saveButton,cancelButton; + var thisObj, available, + $prefsDiv, formTitle, introText, $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j, + $fieldset, fieldsetClass, fieldsetId, $legend, legendId, thisPref, $thisDiv, thisClass, + thisId, $thisLabel, $thisField, options,$thisOption,optionValue,optionLang,optionText, + changedPref,changedSpan,changedText, currentDescState, prefDescVoice, $kbHeading,$kbList, + kbLabels,keys,kbListText,$kbListItem, dialog,$saveButton,$cancelButton,$buttonContainer; thisObj = this; available = this.getAvailablePreferences(); @@ -1931,83 +1687,74 @@ var AblePlayerInstances = []; var customClass = 'able-prefs-form-' + form; $prefsDiv.addClass(customClass); - // add titles and intros - if (form == 'captions') { - formTitle = this.tt.prefTitleCaptions; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage - } - else if (form == 'descriptions') { - formTitle = this.tt.prefTitleDescriptions; + // add titles and intros + if (form == 'captions') { + formTitle = this.translate( 'prefTitleCaptions', 'Captions Preferences' ); + } else if (form == 'descriptions') { + formTitle = this.translate( 'prefTitleDescriptions', 'Audio Description Preferences' ); var $prefsIntro = $('<p>',{ - text: this.tt.prefIntroDescription1 + text: this.translate( 'prefIntroDescription1', 'This media player supports audio description in two ways: ' ) }); var $prefsIntroUL = $('<ul>'); var $prefsIntroLI1 = $('<li>',{ - text: this.tt.prefDescFormatOption1 + text: this.translate( 'prefDescFormatOption1', 'alternative described version of video' ) }); var $prefsIntroLI2 = $('<li>',{ - text: this.tt.prefDescFormatOption2 + text: this.translate( 'prefDescFormatOption2', 'text-based description, announced by screen reader' ) }); $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2); if (this.hasOpenDesc && this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2 + ' '; - currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>'; - currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else if (this.hasOpenDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.'; - } - else if (this.hasClosedDesc) { - currentDescState = this.tt.prefIntroDescription2; - currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.'; - } - else { - currentDescState = this.tt.prefIntroDescriptionNone; + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ) + ' '; + currentDescState += '<strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>'; + currentDescState += ' <em>' + this.translate( 'and', 'and' ) + '</em> <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else if (this.hasOpenDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption1b', 'an alternative described version' ) + '</strong>.'; + } else if (this.hasClosedDesc) { + currentDescState = this.translate( 'prefIntroDescription2', 'The current video has ' ); + currentDescState += ' <strong>' + this.translate( 'prefDescFormatOption2b', 'text-based description, announced by screen reader' ) + '</strong>.'; + } else { + currentDescState = this.translate( 'prefIntroDescriptionNone', 'The current video has no audio description in either format.' ); } $prefsIntroP2 = $('<p>',{ html: currentDescState }); - p3Text = this.tt.prefIntroDescription3; + p3Text = this.translate( 'prefIntroDescription3', 'Use the following form to set your preferences related to text-based audio description.' ); if (this.hasOpenDesc || this.hasClosedDesc) { - p3Text += ' ' + this.tt.prefIntroDescription4; + p3Text += ' ' + this.translate( 'prefIntroDescription4', 'After you save your settings, audio description can be toggled on/off using the Description button.' ); } $prefsIntroP3 = $('<p>',{ text: p3Text }); - $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3); - } - else if (form == 'keyboard') { - formTitle = this.tt.prefTitleKeyboard; - introText = this.tt.prefIntroKeyboard1; - introText += ' ' + this.tt.prefIntroKeyboard2; - introText += ' ' + this.tt.prefIntroKeyboard3; + $prefsDiv.append( $prefsIntro, $prefsIntroUL, $prefsIntroP2, $prefsIntroP3 ); + } else if (form == 'keyboard') { + formTitle = this.translate( 'prefTitleKeyboard', 'Keyboard Preferences' ); + introText = this.translate( 'prefIntroKeyboard1', 'The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list).' ); + introText += ' ' + this.translate( 'prefIntroKeyboard2', 'Modifier keys (Shift, Alt, and Control) can be assigned below.' ); + introText += ' ' + this.translate( 'prefIntroKeyboard3', 'NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you.' ); $prefsIntro = $('<p>',{ text: introText }); $prefsDiv.append($prefsIntro); - } - else if (form == 'transcript') { - formTitle = this.tt.prefTitleTranscript; - // Intro text removed in 4.4.32 to cut down on unnecessary verbiage + } else if (form == 'transcript') { + formTitle = this.translate( 'prefTitleTranscript', 'Transcript Preferences' ); } - $fieldset = $('<div>').attr('role','group'); + $fieldset = $('<div>').attr('role','group'); fieldsetClass = 'able-prefs-' + form; fieldsetId = this.mediaId + '-prefs-' + form; legendId = fieldsetId + '-legend'; $fieldset.addClass(fieldsetClass).attr('id',fieldsetId); if (form === 'keyboard') { - $legend = $('<h2>' + this.tt.prefHeadingKeyboard1 + '</h2>'); + $legend = $('<h2>' + this.translate( 'prefHeadingKeyboard1', 'Modifier keys used for shortcuts' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); - } - else if (form === 'descriptions') { - $legend = $('<h2>' + this.tt.prefHeadingTextDescription + '</h2>'); + } else if (form === 'descriptions') { + $legend = $('<h2>' + this.translate( 'prefHeadingTextDescription', 'Text-based audio description' ) + '</h2>'); $legend.attr('id',legendId); $fieldset.attr('aria-labelledby',legendId); $fieldset.append($legend); @@ -2030,7 +1777,7 @@ var AblePlayerInstances = []; }); if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') { // add a change handler that updates the style of the sample caption text - $thisField.change(function() { + $thisField.on( 'change', function() { changedPref = $(this).attr('name'); thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref); }); @@ -2040,28 +1787,19 @@ var AblePlayerInstances = []; if (thisPref === 'prefCaptionsPosition') { optionValue = options[j]; if (optionValue === 'overlay') { - optionText = this.tt.captionsPositionOverlay; - } - else if (optionValue === 'below') { + optionText = this.translate( 'captionsPositionOverlay', 'Overlay' ); + } else if (optionValue === 'below') { optionValue = options[j]; - optionText = this.tt.captionsPositionBelow; + optionText = this.translate( 'captionsPositionBelow', 'Below video' ); } - } - else if (thisPref === 'prefCaptionsFont' || thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') { + } else if (thisPref === 'prefCaptionsFont' || thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') { optionValue = options[j][0]; optionText = options[j][1]; - } - else if (thisPref === 'prefCaptionsOpacity') { + } else if (thisPref === 'prefCaptionsOpacity') { optionValue = options[j]; optionText = options[j]; - if (optionValue === '0%') { - optionText += ' (' + this.tt.transparent + ')'; - } - else if (optionValue === '100%') { - optionText += ' (' + this.tt.solid + ')'; - } - } - else { + optionText += (optionValue === '0%') ? ' (' + this.translate( 'transparent', 'transparent' ) + ')' : ' (' + this.translate( 'solid', 'solid' ) + ')'; + } else { optionValue = options[j]; optionText = options[j]; } @@ -2075,8 +1813,7 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } $thisDiv.append($thisLabel,$thisField); - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); if (thisPref === 'prefDescPause' || thisPref === 'prefDescVisible') { // these preferences are checkboxes @@ -2092,19 +1829,18 @@ var AblePlayerInstances = []; $thisField.prop('checked',true); } $thisDiv.append($thisField,$thisLabel); - } - else if (this.synth) { + } else if (this.synth) { // Only show these options if browser supports speech synthesis $thisDiv.addClass('able-prefs-select'); $thisField = $('<select>',{ name: thisPref, id: thisId, }); - if (thisPref === 'prefDescVoice' && this.descVoices) { - prefDescVoice = this.getPrefDescVoice(); + if (thisPref === 'prefDescVoice' && this.descVoices.length) { + prefDescVoice = this.getPrefDescVoice(); for (j=0; j < this.descVoices.length; j++) { optionValue = this.descVoices[j].name; - optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); + optionLang = this.descVoices[j].lang.substring(0,2).toLowerCase(); optionText = optionValue + ' (' + this.descVoices[j].lang + ')'; $thisOption = $('<option>',{ 'value': optionValue, @@ -2117,12 +1853,10 @@ var AblePlayerInstances = []; $thisField.append($thisOption); } this.$voiceSelectField = $thisField; - } - else { + } else { if (thisPref == 'prefDescPitch') { // 0 to 2 options = [0,0.5,1,1.5,2]; - } - else if (thisPref == 'prefDescRate') { // 0.1 to 10 + } else if (thisPref == 'prefDescRate') { // 0.1 to 10 // Tests with a variety of voices on MacOS and Windows // yielded the following choices that seem reasonable for audio description: // 0.5 - too slow (exclude this) @@ -2140,8 +1874,7 @@ var AblePlayerInstances = []; // Note: if these values are modified, must also modfiy them // in makePrefsValueReadable() options = [0.7,0.8,0.9,1,1.1,1.2,1.5,2,2.5,3]; - } - else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 + } else if (thisPref == 'prefDescVolume') { // 0 (mute) to 1 options = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]; } if (typeof options !== 'undefined') { @@ -2166,8 +1899,7 @@ var AblePlayerInstances = []; }); $thisDiv.append($thisLabel,$thisField); } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>'); $thisField = $('<input>',{ type: 'checkbox', @@ -2186,26 +1918,35 @@ var AblePlayerInstances = []; if (changedPref === 'prefAltKey') { changedSpan = '.able-modkey-alt'; changedText = thisObj.tt.prefAltKey + ' + '; - } - else if (changedPref === 'prefCtrlKey') { + } else if (changedPref === 'prefCtrlKey') { changedSpan = '.able-modkey-ctrl'; changedText = thisObj.tt.prefCtrlKey + ' + '; - } - else if (changedPref === 'prefShiftKey') { + } else if (changedPref === 'prefShiftKey') { changedSpan = '.able-modkey-shift'; changedText = thisObj.tt.prefShiftKey + ' + '; } - if ($(this).is(':checked')) { - $(changedSpan).text(changedText); - } - else { - $(changedSpan).text(''); + if ( changedPref !== 'prefNoKeyShortcuts' ) { + if ($(this).is(':checked')) { + $(changedSpan).text(changedText); + } else { + $(changedSpan).text(''); + } + } else { + if ($(this).is(':checked')) { + $('.able-modkey-item').addClass('hidden'); + } else { + $('.able-modkey-item').removeClass('hidden'); + } } }); } $thisDiv.append($thisField,$thisLabel); } - $fieldset.append($thisDiv); + if (thisPref === 'prefDescVoice' && !this.descVoices.length) { + // No voices are available (e.g., in Safari 15.4 on Mac OS) + } else { + $fieldset.append($thisDiv); + } } } $prefsDiv.append($fieldset); @@ -2216,25 +1957,25 @@ var AblePlayerInstances = []; if (!this.usingYouTubeCaptions) { this.$sampleCapsDiv = $('<div>',{ 'class': 'able-captions-sample' - }).text(this.tt.sampleCaptionText); + }).text( this.translate( 'sampleCaptionText', 'Sample caption text' ) ); $prefsDiv.append(this.$sampleCapsDiv); this.stylizeCaptions(this.$sampleCapsDiv); } - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { if (this.synth) { // add a div with sample audio description text this.$sampleDescDiv = $('<div>',{ 'class': 'able-desc-sample' - }).text(this.tt.sampleDescriptionText); + }).text( this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) ); $prefsDiv.append(this.$sampleDescDiv); - this.currentSampleText = this.tt.sampleDescriptionText; + this.currentSampleText = this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ); } - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { + let shortcutClass = (this.prefNoKeyShortcuts === 1 ) ? 'able-modkey-item hidden' : 'able-modkey-item'; + // add a current list of keyboard shortcuts $kbHeading = $('<h2>',{ - text: this.tt.prefHeadingKeyboard2 + text: this.translate( 'prefHeadingKeyboard2', 'Current keyboard shortcuts' ) }); $kbList = $('<ul>'); // create arrays of kbLabels and keys @@ -2242,100 +1983,85 @@ var AblePlayerInstances = []; keys = []; for (i=0; i<this.controls.length; i++) { if (this.controls[i] === 'play') { - kbLabels.push(this.tt.play + '/' + this.tt.pause); - keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar); - } - else if (this.controls[i] === 'restart') { - kbLabels.push(this.tt.restart); + kbLabels.push( this.translate( 'play', 'Play' ) + '/' + this.translate( 'pause', 'Pause' ) ); + keys.push('p</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-help-modifiers"> ' + this.translate( 'spacebar', 'spacebar' )); + } else if (this.controls[i] === 'restart') { + kbLabels.push(this.translate( 'restart', 'Restart' )); keys.push('s'); - } - else if (this.controls[i] === 'previous') { - kbLabels.push(this.tt.prevTrack); + } else if (this.controls[i] === 'previous') { + kbLabels.push( this.translate( 'prevTrack', 'Previous track' ) ); keys.push('b'); // b = back - } - else if (this.controls[i] === 'next') { - kbLabels.push(this.tt.nextTrack); + } else if (this.controls[i] === 'next') { + kbLabels.push( this.translate( 'nextTrack', 'Next track' ) ); keys.push('n'); - } - else if (this.controls[i] === 'rewind') { - kbLabels.push(this.tt.rewind); + } else if (this.controls[i] === 'rewind') { + kbLabels.push(this.translate( 'rewind', 'Rewind' )); keys.push('r'); - } - else if (this.controls[i] === 'forward') { - kbLabels.push(this.tt.forward); + } else if (this.controls[i] === 'forward') { + kbLabels.push(this.translate( 'forward', 'Forward' )); keys.push('f'); - } - else if (this.controls[i] === 'volume') { - kbLabels.push(this.tt.volume); - keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9'); + } else if (this.controls[i] === 'volume') { + kbLabels.push(this.translate( 'volume', 'Volume' )); + keys.push('v</span> <em>' + this.translate( 'or', 'or' ) + '</em> <span class="able-modkey">1-9'); // mute toggle - kbLabels.push(this.tt.mute + '/' + this.tt.unmute); + kbLabels.push(this.translate( 'mute', 'Mute' ) + '/' + this.translate( 'unmute', 'Unmute' )); keys.push('m'); - } - else if (this.controls[i] === 'captions') { + } else if (this.controls[i] === 'captions') { if (this.captions.length > 1) { // caption button launches a Captions popup menu - kbLabels.push(this.tt.captions); - } - else { + kbLabels.push(this.translate( 'captions', 'Captions' )); + } else { // there is only one caption track // therefore caption button is a toggle if (this.captionsOn) { - kbLabels.push(this.tt.hideCaptions); - } - else { - kbLabels.push(this.tt.showCaptions); + kbLabels.push(this.translate( 'hideCaptions', 'Hide captions' )); + } else { + kbLabels.push(this.translate( 'showCaptions', 'Show captions' )); } } keys.push('c'); - } - else if (this.controls[i] === 'descriptions') { + } else if (this.controls[i] === 'descriptions') { if (this.descOn) { - kbLabels.push(this.tt.turnOffDescriptions); - } - else { - kbLabels.push(this.tt.turnOnDescriptions); + kbLabels.push(this.translate( 'turnOffDescriptions', 'Turn off descriptions' )); + } else { + kbLabels.push(this.translate( 'turnOnDescriptions', 'Turn on descriptions' )); } keys.push('d'); - } - else if (this.controls[i] === 'prefs') { - kbLabels.push(this.tt.preferences); + } else if (this.controls[i] === 'prefs') { + kbLabels.push(this.translate( 'preferences', 'Preferences' )); keys.push('e'); } - else if (this.controls[i] === 'help') { - kbLabels.push(this.tt.help); - keys.push('h'); - } } for (i=0; i<keys.length; i++) { // alt kbListText = '<span class="able-modkey-alt">'; if (this.prefAltKey === 1) { - kbListText += this.tt.prefAltKey + ' + '; + kbListText += this.translate( 'prefAltKey', 'Alt' ) + ' + '; } kbListText += '</span>'; // ctrl kbListText += '<span class="able-modkey-ctrl">'; if (this.prefCtrlKey === 1) { - kbListText += this.tt.prefCtrlKey + ' + '; + kbListText += this.translate( 'prefCtrlKey', 'Control' ) + ' + '; } kbListText += '</span>'; // shift kbListText += '<span class="able-modkey-shift">'; if (this.prefShiftKey === 1) { - kbListText += this.tt.prefShiftKey + ' + '; + kbListText += this.translate( 'prefShiftKey', 'Shift' ) + ' + '; } kbListText += '</span>'; kbListText += '<span class="able-modkey">' + keys[i] + '</span>'; kbListText += ' = ' + kbLabels[i]; $kbListItem = $('<li>',{ - html: kbListText + 'class': shortcutClass, + html: kbListText, }); $kbList.append($kbListItem); } // add Escape key - kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>'; - kbListText += ' = ' + this.tt.escapeKeyFunction; + kbListText = '<span class="able-modkey">' + this.translate( 'escapeKey', 'Escape' ) + '</span>'; + kbListText += ' = ' + this.translate( 'escapeKeyFunction', 'Close current dialog or popup menu' ); $kbListItem = $('<li>',{ html: kbListText }); @@ -2345,56 +2071,53 @@ var AblePlayerInstances = []; } // $prefsDiv (dialog) must be appended to the BODY! - // otherwise when aria-hidden="true" is applied to all background content - // that will include an ancestor of the dialog, - // which will render the dialog unreadable by screen readers $('body').append($prefsDiv); - dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', true, formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em'); + dialog = new AccessibleDialog( + $prefsDiv, + this.$prefsButton, + formTitle, + thisObj.tt.closeButtonLabel + ); // Add save and cancel buttons. - $prefsDiv.append('<hr>'); - saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); - saveButton.click(function () { + $buttonContainer = $( '<div class="able-prefs-buttons"></div>' ); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); + $saveButton.on( 'click', function () { dialog.hide(); thisObj.savePrefsFromForm(); }); - cancelButton.click(function () { + $cancelButton.on( 'click', function () { dialog.hide(); thisObj.resetPrefsForm(); }); - - $prefsDiv.append(saveButton); - $prefsDiv.append(cancelButton); - + $buttonContainer.append( $saveButton,$cancelButton ); + $prefsDiv.append($buttonContainer); // Associate the dialog's H1 as aria-labelledby for groups of fields - // (alternative to fieldset and legend) - if (form === 'captions' || form === 'transcript') { - $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); + // (alternative to fieldset and legend) + if (form === 'captions' || form === 'transcript') { + $fieldset.attr('aria-labelledby',dialog.titleH1.attr('id')); } // add global reference for future control if (form === 'captions') { this.captionPrefsDialog = dialog; - } - else if (form === 'descriptions') { + } else if (form === 'descriptions') { this.descPrefsDialog = dialog; - } - else if (form === 'keyboard') { + } else if (form === 'keyboard') { this.keyboardPrefsDialog = dialog; - } - else if (form === 'transcript') { + } else if (form === 'transcript') { this.transcriptPrefsDialog = dialog; } // Add click handler for dialog close button // (button is added in dialog.js) - $('div.able-prefs-form button.modalCloseButton').click(function() { + $('div.able-prefs-form button.modalCloseButton').on( 'click', function() { thisObj.resetPrefsForm(); }) // Add handler for escape key - $('div.able-prefs-form').keydown(function(e) { - if (e.which === 27) { // escape + $('div.able-prefs-form').on( 'keydown', function(e) { + if (e.key === 'Escape') { thisObj.resetPrefsForm(); } }); @@ -2402,23 +2125,21 @@ var AblePlayerInstances = []; AblePlayer.prototype.getPrefDescVoice = function () { - // return user's preferred voice for the current language from cookie.voices - var lang, cookie, i; + // return user's preferred voice for the current language from preferences.voices + var lang, preferences, i; - if (this.selectedDescriptions) { - lang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - lang = this.captionLang; - } - else { - lang = this.lang; + if (this.selectedDescriptions) { + lang = this.selectedDescriptions.language; + } else if (this.captionLang) { + lang = this.captionLang; + } else { + lang = this.lang; } - cookie = this.getCookie(); - if (cookie.voices) { - for (i=0; i < cookie.voices.length; i++) { - if (cookie.voices[i].lang === lang) { - return cookie.voices[i].name; + preferences = this.getPref(); + if (preferences.voices) { + for (i=0; i < preferences.voices.length; i++) { + if (preferences.voices[i].lang === lang) { + return preferences.voices[i].name; } } } @@ -2427,9 +2148,9 @@ var AblePlayerInstances = []; AblePlayer.prototype.rebuildDescPrefsForm = function () { - // Called if this.descVoices changes, which may happen if: - // getBrowserVoices() succeeds after an earlier failure - // user changes language of captions/subtitles and descVoices changes to match the new language + // Called if this.descVoices changes, which may happen if: + // getBrowserVoices() succeeds after an earlier failure + // user changes language of captions/subtitles and descVoices changes to match the new language var i, optionValue, optionText, $thisOption; @@ -2450,161 +2171,141 @@ var AblePlayerInstances = []; } }; - AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { - - // The values for pitch, rate, and volume (web speech API) - // are strange and inconsistent between variables - // this function returns text that is more readable than the values themselves + AblePlayer.prototype.makePrefsValueReadable = function(pref,value) { + + // The values for pitch, rate, and volume (web speech API) + // are strange and inconsistent between variables + // this function returns text that is more readable than the values themselves + + if (pref === 'prefDescPitch') { + if (value === 0) { + return this.translate( 'prefDescPitch1', 'Very low' ); + } else if (value === 0.5) { + return this.translate( 'prefDescPitch2', 'Low' ); + } else if (value === 1) { + return this.translate( 'prefDescPitch3', 'Default' ); + } else if (value === 1.5) { + return this.translate( 'prefDescPitch4', 'High' ); + } else if (value === 2) { + return this.translate( 'prefDescPitch5', 'Very high' ); + } + } else if (pref === 'prefDescRate') { + // default in the API is 0.1 to 10, where 1 is normal speaking voice + // our custom range offers several rates close to 1 + // plus a couple of crazy fast ones for sport + // Our more readable options (1-10) or mapped here to API values + if (value === 0.7) { + return 1; + } else if (value === 0.8) { + return 2; + } else if (value === 0.9) { + return 3; + } else if (value === 1) { + return 4; + } else if (value === 1.1) { + return 5; + } else if (value === 1.2) { + return 6; + } else if (value === 1.5) { + return 7; + } else if (value === 2) { + return 8; + } else if (value === 2.5) { + return 9; + } else if (value === 3) { + return 10; + } + } else if (pref === 'prefDescVolume') { + // values range from 0.1 to 1.0 + return value 10; + } + return value; + }; + + AblePlayer.prototype.resetPrefsForm = function () { + + // Reset preferences form with default values from preferences + // Called when: + // User clicks cancel or close button in Prefs Dialog + // User presses Escape to close Prefs dialog + // User clicks Save in Prefs dialog, & there's more than one player on page + + var thisObj, preferences, available, i, prefName; - if (pref === 'prefDescPitch') { - if (value === 0) { - return this.tt.prefDescPitch1; - } - else if (value === 0.5) { - return this.tt.prefDescPitch2; - } - else if (value === 1) { - return this.tt.prefDescPitch3; - } - else if (value === 1.5) { - return this.tt.prefDescPitch4; - } - else if (value === 2) { - return this.tt.prefDescPitch5; - } - } - else if (pref === 'prefDescRate') { - // default in the API is 0.1 to 10, where 1 is normal speaking voice - // our custom range offers several rates close to 1 - // plus a couple of crazy fast ones for sport - // Our more readable options (1-10) or mapped here to API values - if (value === 0.7) { - return 1; - } - else if (value === 0.8) { - return 2; - } - else if (value === 0.9) { - return 3; - } - else if (value === 1) { - return 4; - } - else if (value === 1.1) { - return 5; - } - else if (value === 1.2) { - return 6; - } - else if (value === 1.5) { - return 7; - } - else if (value === 2) { - return 8; - } - else if (value === 2.5) { - return 9; - } - else if (value === 3) { - return 10; - } - } - else if (pref === 'prefDescVolume') { - // values range from 0.1 to 1.0 - return value * 10; - } - return value; - }; - - AblePlayer.prototype.resetPrefsForm = function () { - - // Reset preferences form with default values from cookie - // Called when: - // User clicks cancel or close button in Prefs Dialog - // User presses Escape to close Prefs dialog - // User clicks Save in Prefs dialog, & there's more than one player on page - - var thisObj, cookie, available, i, prefName, prefId, thisDiv, thisId; - - thisObj = this; - cookie = this.getCookie(); - available = this.getAvailablePreferences(); - for (i=0; i<available.length; i++) { - prefName = available[i]['name']; - prefId = this.mediaId + '_' + prefName; - if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { - // this is a caption-related select box - $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]); - } - else { // all others are checkboxes - if (this[prefName] === 1) { - $('input[name="' + prefName + '"]').prop('checked',true); - } - else { - $('input[name="' + prefName + '"]').prop('checked',false); - } + thisObj = this; + preferences = this.getPref(); + available = this.getAvailablePreferences(); + for (i=0; i<available.length; i++) { + prefName = available[i]['name']; + if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + // this is a caption-related select box + $('select[name="' + prefName + '"]').val(preferences.preferences[prefName]); + } else { // all others are checkboxes + if (this[prefName] === 1) { + $('input[name="' + prefName + '"]').prop('checked',true); + } else { + $('input[name="' + prefName + '"]').prop('checked',false); } } - // also restore style of sample caption div - this.stylizeCaptions(this.$sampleCapsDiv); - }; + } + // also restore style of sample caption div + this.stylizeCaptions(this.$sampleCapsDiv); + }; AblePlayer.prototype.savePrefsFromForm = function () { // Return a prefs object constructed from the form. // called when user saves the Preferences form - // update cookie with new value - var cookie, available, prefName, prefId, - voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, + // update preferences with new value + var preferences, available, prefName, prefId, + voiceSelectId, newVoice, newVoiceLang, numChanges, voiceLangFound, numCapChanges, capSizeChanged, capSizeValue, newValue; numChanges = 0; numCapChanges = 0; // changes to caption-style-related preferences capSizeChanged = false; - cookie = this.getCookie(); + preferences = this.getPref(); available = this.getAvailablePreferences(); for (var i=0; i < available.length; i++) { // only prefs with labels are used in the Prefs form if (available[i]['label']) { prefName = available[i]['name']; prefId = this.mediaId + '_' + prefName; - if (prefName === 'prefDescVoice') { - if (typeof cookie.voices === 'undefined') { - cookie.voices = []; + if (prefName === 'prefDescVoice') { + if (typeof preferences.voices === 'undefined') { + preferences.voices = []; } voiceSelectId = this.mediaId + '_prefDescVoice'; this.prefDescVoice = $('select#' + voiceSelectId).find(':selected').val(); this.prefDescVoiceLang = $('select#' + voiceSelectId).find(':selected').attr('data-lang'); - // replace preferred voice for this lang in cookie.voices array, if one exists - // otherwise, add it to the array - voiceLangFound = false; - for (var v=0; v < cookie.voices.length; v++) { - if (cookie.voices[v].lang === this.prefDescVoiceLang) { - voiceLangFound = true; - cookie.voices[v].name = this.prefDescVoice; + // replace preferred voice for this lang in preferences.voices array, if one exists + // otherwise, add it to the array + voiceLangFound = false; + for (var v=0; v < preferences.voices.length; v++) { + if (preferences.voices[v].lang === this.prefDescVoiceLang) { + voiceLangFound = true; + preferences.voices[v].name = this.prefDescVoice; } } - if (!voiceLangFound) { - // no voice has been saved yet for this language. Add it to array. + if (!voiceLangFound) { + // no voice has been saved yet for this language. Add it to array. newVoice = {'name':this.prefDescVoice, 'lang':this.prefDescVoiceLang}; - cookie.voices.push(newVoice); - } - numChanges++; - } - else if (prefName == 'prefDescMethod') { + preferences.voices.push(newVoice); + } + numChanges++; + } else if (prefName == 'prefDescMethod') { // As of v4.0.10, prefDescMethod is no longer a choice // this.prefDescMethod = $('input[name="' + prefName + '"]:checked').val(); this.prefDescMethod = 'video'; - if (this.prefDescMethod !== cookie.preferences['prefDescMethod']) { // user's preference has changed - cookie.preferences['prefDescMethod'] = this.prefDescMethod; + if (this.prefDescMethod !== preferences.preferences['prefDescMethod']) { // user's preference has changed + preferences.preferences['prefDescMethod'] = this.prefDescMethod; numChanges++; } - } - else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { + } else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) { // this is one of the caption-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref (for caption fields, not done elsewhere) this[prefName] = newValue; numChanges++; @@ -2614,37 +2315,32 @@ var AblePlayerInstances = []; capSizeChanged = true; capSizeValue = newValue; } - } - else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { + } else if ((prefName.indexOf('Desc') !== -1) && (prefName !== 'prefDescPause') && prefName !== 'prefDescVisible') { // this is one of the description-related select fields newValue = $('select[id="' + prefId + '"]').val(); - if (cookie.preferences[prefName] !== newValue) { // user changed setting - cookie.preferences[prefName] = newValue; + if (preferences.preferences[prefName] !== newValue) { // user changed setting + preferences.preferences[prefName] = newValue; // also update global var for this pref this[prefName] = newValue; numChanges++; } - } - else { // all other fields are checkboxes + } else { // all other fields are checkboxes if ($('input[id="' + prefId + '"]').is(':checked')) { - cookie.preferences[prefName] = 1; + preferences.preferences[prefName] = 1; if (this[prefName] === 1) { // nothing has changed - } - else { + } else { // user has just turned this pref on this[prefName] = 1; numChanges++; } - } - else { // thisPref is not checked - cookie.preferences[prefName] = 0; + } else { // thisPref is not checked + preferences.preferences[prefName] = 0; if (this[prefName] === 1) { // user has just turned this pref off this[prefName] = 0; numChanges++; - } - else { + } else { // nothing has chaged } } @@ -2652,11 +2348,10 @@ var AblePlayerInstances = []; } } if (numChanges > 0) { - this.setCookie(cookie); - this.showAlert(this.tt.prefSuccess); - } - else { - this.showAlert(this.tt.prefNoChange); + this.setPrefs(preferences); + this.showAlert( this.translate( 'prefSuccess', 'Your changes have been saved.' ) ); + } else { + this.showAlert( this.translate( 'prefNoChange', "You didn't make any changes" ) ); } if (this.player === 'youtube' && (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) && @@ -2668,8 +2363,8 @@ var AblePlayerInstances = []; // there are multiple players on this page. // update prefs for ALL of them for (var i=0; i<AblePlayerInstances.length; i++) { - AblePlayerInstances[i].updatePrefs(); - AblePlayerInstances[i].geteferences(); + AblePlayerInstances[i].updatePlayerPrefs(); + AblePlayerInstances[i].loadCurrentPreferences(); AblePlayerInstances[i].resetPrefsForm(); if (numCapChanges > 0) { AblePlayerInstances[i].stylizeCaptions(AblePlayerInstances[i].$captionsDiv); @@ -2679,10 +2374,9 @@ var AblePlayerInstances = []; } } } - } - else { + } else { // there is only one player - this.updatePrefs(); + this.updatePlayerPrefs(); if (numCapChanges > 0) { this.stylizeCaptions(this.$captionsDiv); // also apply same changes to descriptions, if present @@ -2693,16 +2387,14 @@ var AblePlayerInstances = []; } } - AblePlayer.prototype.updatePrefs = function () { + AblePlayer.prototype.updatePlayerPrefs = function () { // Update player based on current prefs. Safe to call multiple times. - - if (this.$transcriptDiv) { + if (this.$transcriptDiv) { // tabbable transcript if (this.prefTabbable === 1) { this.$transcriptDiv.find('span.able-transcript-seekpoint').attr('tabindex','0'); - } - else { + } else { this.$transcriptDiv.find('span.able-transcript-seekpoint').removeAttr('tabindex'); } @@ -2737,11 +2429,10 @@ var AblePlayerInstances = []; (function ($) { // See section 4.1 of dev.w3.org/html5/webvtt for format details. - AblePlayer.prototype.parseWebVTT = function(srcFile,text) { - -// var deferred = new $.Deferred(); -// var promise = deferred.promise(); + AblePlayer.prototype.parseWebVTT = function(data) { + let srcFile = data.src; + let text = data.text; // Normalize line ends to \n. text = text.replace(/(\r\n|\n|\r)/g,'\n'); @@ -2765,8 +2456,7 @@ var AblePlayerInstances = []; errString += err; if (console.warn) { console.warn(errString); - } - else if (console.log) { + } else if (console.log) { console.log(errString); } } @@ -2795,8 +2485,7 @@ var AblePlayerInstances = []; if (cutText[ii] === '\n') { state.column = 1; state.line += 1; - } - else { + } else { state.column += 1; } } @@ -2816,8 +2505,7 @@ var AblePlayerInstances = []; returnText = state.text; updatePosition(state, returnText); state.text = ''; - } - else { + } else { returnText = state.text.substring(0, nextEOL); updatePosition(state, returnText + '\n'); state.text = state.text.substring(nextEOL + 1); @@ -2827,12 +2515,7 @@ var AblePlayerInstances = []; function peekLine(state) { var nextEOL = state.text.indexOf('\n'); - if (nextEOL === -1) { - return state.text; - } - else { - return state.text.substring(0, nextEOL); - } + return (nextEOL === -1) ? state.text : state.text.substring(0, nextEOL); } function parseFileBody(state) { @@ -2846,8 +2529,7 @@ var AblePlayerInstances = []; parseMetadataHeaders, eatAtLeast1EmptyLines, parseCuesAndComments]); - } - else { + } else { state.error = "WEBVTT signature not followed by whitespace."; } } @@ -2858,11 +2540,9 @@ var AblePlayerInstances = []; var nextLine = peekLine(state); if (nextLine.indexOf('-->') !== -1) { return; - } - else if (nextLine.length === 0) { + } else if (nextLine.length === 0) { return; - } - else { + } else { var keyValue = act(state, getMetadataKeyValue); state.metadata[keyValue[0]] = keyValue[1]; act(state, eatUntilEOLInclusive); @@ -2895,8 +2575,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -2910,8 +2589,7 @@ var AblePlayerInstances = []; if (colon === -1) { state.error = 'Missing colon.'; return; - } - else { + } else { var pairName = pair.substring(0, colon); var pairValue = pair.substring(colon + 1); return [pairName, pairValue]; @@ -2924,14 +2602,11 @@ var AblePlayerInstances = []; // If NOTE is not on a line all its own, it must be followed by a space or tab. if (nextLine.indexOf('NOTE') === 0 && ((nextLine.length === 4) || (nextLine[4] === ' ') || (nextLine[4] === '\t'))) { actList(state, [eatComment, eatEmptyLines]); - } - else if ($.trim(nextLine).length === 0 && state.text.length > 0) { + } else if (nextLine.trim().length === 0 && state.text.length > 0) { act(state, eatEmptyLines); - } - else if ($.trim(nextLine).length > 0) { + } else if (nextLine.trim().length > 0) { act(state, parseCue); - } - else { + } else { // Everythings parsed! return; } @@ -2954,8 +2629,7 @@ var AblePlayerInstances = []; errString += 'Expected cue timing for cueId \''+cueId+'\' but found: ' + nextLine + '\n'; if (console.warn) { console.warn(errString); - } - else if (console.log) { + } else if (console.log) { console.log(errString); } return; // Return leaving line for parseCuesAndComments to handle @@ -3024,8 +2698,7 @@ var AblePlayerInstances = []; // We'll use the tokens themselves as objects where possible. if (token.type === 'string') { current.children.push(token); - } - else if (token.type === 'startTag') { + } else if (token.type === 'startTag') { token.type = token.tagName; // Define token.parent; added by Terrill to fix bug end 'endTag' loop token.parent = current; @@ -3035,31 +2708,27 @@ var AblePlayerInstances = []; } current.children.push(token); current = token; - } - else if (token.tagName === 'rt' && current.tagName === 'ruby') { + } else if (token.tagName === 'rt' && current.tagName === 'ruby') { if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'c') { + } else if (token.tagName === 'c') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'v') { + } else if (token.tagName === 'v') { token.value = token.annotation; if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; } current.children.push(token); current = token; - } - else if (token.tagName === 'lang') { + } else if (token.tagName === 'lang') { languageStack.push(token.annotation); if (languageStack.length > 0) { current.language = languageStack[languageStack.length - 1]; @@ -3067,22 +2736,18 @@ var AblePlayerInstances = []; current.children.push(token); current = token; } - } - else if (token.type === 'endTag') { + } else if (token.type === 'endTag') { if (token.tagName === current.type && $.inArray(token.tagName, ['c', 'i', 'b', 'u', 'ruby', 'rt', 'v']) !== -1) { // NOTE from Terrill: This was resulting in an error because current.parent was undefined // Fixed (I think) by assigning current token to token.parent in 'startTag' loop current = current.parent; - } - else if (token.tagName === 'lang' && current.type === 'lang') { + } else if (token.tagName === 'lang' && current.type === 'lang') { current = current.parent; languageStack.pop(); - } - else if (token.tagName === 'ruby' && current.type === 'rt') { + } else if (token.tagName === 'ruby' && current.type === 'rt') { current = current.parent.parent; } - } - else if (token.type === 'timestampTag') { + } else if (token.type === 'timestampTag') { var tempState = { text: token.value, error: null, @@ -3117,11 +2782,9 @@ var AblePlayerInstances = []; // Double newlines indicate end of token. if (state.text.length >= 2 && state.text[0] === '\n' && state.text[1] === '\n') { c = '\u0004'; - } - else if (state.text.length > 0) { + } else if (state.text.length > 0) { c = state.text[0]; - } - else { + } else { // End of file. c = '\u0004'; } @@ -3129,213 +2792,168 @@ var AblePlayerInstances = []; if (c === '&') { buffer = '&'; tokenState = 'escape'; - } - else if (c === '<') { + } else if (c === '<') { if (result.length === 0) { tokenState = 'tag'; - } - else { + } else { token.type = 'string'; token.value = result.join(''); return token; } - } - else if (c === '\u0004') { + } else if (c === '\u0004') { return {type: 'string', value: result.join('')}; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'escape') { + } else if (tokenState === 'escape') { if (c === '&') { result.push(buffer); buffer = '&'; - } - else if (c.match(/[0-9a-z]/)) { + } else if (c.match(/[0-9a-z]/)) { buffer += c; - } - else if (c === ';') { + } else if (c === ';') { if (buffer === '&') { result.push('&'); - } - else if (buffer === '<') { + } else if (buffer === '<') { result.push('<'); - } - else if (buffer === '>') { + } else if (buffer === '>') { result.push('>'); - } - else if (buffer === '&lrm') { + } else if (buffer === '&lrm') { result.push('\u200e'); - } - else if (buffer === '&rlm') { + } else if (buffer === '&rlm') { result.push('\u200f'); - } - else if (buffer === ' ') { + } else if (buffer === ' ') { result.push('\u00a0'); - } - else { + } else { result.push(buffer); result.push(';'); } tokenState = 'data'; - } - else if (c === '<' || c === '\u0004') { + } else if (c === '<' || c === '\u0004') { result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { // Handle unescaped & chars as strings + } else if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { // Handle unescaped & chars as strings result.push(buffer); token.type = 'string'; token.value = result.join(''); return token; - } - else { + } else { result.push(buffer); tokenState = 'data'; } - } - else if (tokenState === 'tag') { + } else if (tokenState === 'tag') { if (c === '\t' || c === '\n' || c === '\u000c' || c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '/') { + } else if (c === '/') { tokenState = 'endTag'; - } - else if (c.match('[0-9]')) { + } else if (c.match('[0-9]')) { tokenState = 'timestampTag'; result.push(c); - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); break; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = ''; token.type = 'startTag'; return token; - } - else { + } else { result.push(c); tokenState = 'startTag'; } - } - else if (tokenState === 'startTag') { + } else if (tokenState === 'startTag') { if (c === '\t' || c === '\u000c' || c === ' ') { tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { tokenState = 'startTagClass'; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.tagName = result.join(''); token.type = 'startTag'; return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'startTagClass') { + } else if (tokenState === 'startTagClass') { if (c === '\t' || c === '\u000c' || c === ' ') { token.classes.push(buffer); buffer = ''; tokenState = 'startTagAnnotation'; - } - else if (c === '\n') { + } else if (c === '\n') { token.classes.push(buffer); buffer = c; tokenState = 'startTagAnnotation'; - } - else if (c === '.') { + } else if (c === '.') { token.classes.push(buffer); buffer = ""; - } - else if (c === '>') { + } else if (c === '>') { cut(state, 1); token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.classes.push(buffer); token.type = 'startTag'; token.tagName = result.join(''); return token; - } - else { + } else { buffer += 'c'; } - } - else if (tokenState === 'startTagAnnotation') { + } else if (tokenState === 'startTagAnnotation') { if (c === '>') { cut(state, 1); - buffer = $.trim(buffer).replace(/ +/, ' '); + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else if (c === '\u0004') { - buffer = $.trim(buffer).replace(/ +/, ' '); + } else if (c === '\u0004') { + buffer = buffer.trim().replace(/ +/, ' '); token.type = 'startTag'; token.tagName = result.join(''); token.annotation = buffer; return token; - } - else { + } else { buffer += c; } - } - else if (tokenState === 'endTag') { + } else if (tokenState === 'endTag') { if (c === '>') { cut(state, 1); token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'endTag'; token.tagName = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else if (tokenState === 'timestampTag') { + } else if (tokenState === 'timestampTag') { if (c === '>') { cut(state, 1); token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else if (c === '\u0004') { + } else if (c === '\u0004') { token.type = 'timestampTag'; token.name = result.join(''); return token; - } - else { + } else { result.push(c); } - } - else { + } else { throw 'Unknown tokenState ' + tokenState; } @@ -3352,15 +2970,13 @@ var AblePlayerInstances = []; } while (true) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { // End of comment. return; - } - else if (nextLine.indexOf('-->') !== -1) { + } else if (nextLine.indexOf('-->') !== -1) { state.error = 'Invalid syntax: --> in comment.'; return; - } - else { + } else { cutLine(state); } } @@ -3378,8 +2994,7 @@ var AblePlayerInstances = []; function eatSignature(state) { if (state.text.substring(0,6) === 'WEBVTT') { cut(state, 6); - } - else { + } else { state.error = 'Invalid signature.'; } } @@ -3387,8 +3002,7 @@ var AblePlayerInstances = []; function eatArrow(state) { if (state.text.length < 3 || state.text.substring(0,3) !== '-->') { state.error = 'Missing -->'; - } - else { + } else { cut(state, 3); } } @@ -3396,8 +3010,7 @@ var AblePlayerInstances = []; function eatSingleSpaceOrTab(state) { if (state.text[0] === '\t' || state.text[0] === ' ') { cut(state, 1); - } - else { + } else { state.error = 'Missing space.'; } } @@ -3423,8 +3036,7 @@ var AblePlayerInstances = []; var nextEOL = state.text.indexOf('\n'); if (nextEOL === -1) { state.error = 'Missing EOL.'; - } - else { + } else { cut(state, nextEOL + 1); } } @@ -3432,10 +3044,9 @@ var AblePlayerInstances = []; function eatEmptyLines(state) { while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); - } - else { + } else { break; } } @@ -3446,11 +3057,10 @@ var AblePlayerInstances = []; var linesEaten = 0; while (state.text.length > 0) { var nextLine = peekLine(state); - if ($.trim(nextLine).length === 0) { + if ( nextLine.trim().length === 0) { cutLine(state); linesEaten += 1; - } - else { + } else { break; } } @@ -3467,7 +3077,9 @@ var AblePlayerInstances = []; } var timestamp = cut(state, nextSpace); - var results = /((\d\d):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(timestamp); + // The spec requires exactly 2 characters for minutes and seconds, and 2+ for hours, + // but some VTT generation creates 1 digit hour times (e.g. "1:02:24.000 --> 1:04:48.000") and it seems harmless to allow that here + var results = /((\d+):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(timestamp); if (!results) { state.error = 'Unable to parse timestamp'; @@ -3494,8 +3106,7 @@ var AblePlayerInstances = []; time += parseInt(seconds, 10); time += parseInt(results[6], 10) / 1000; - } - else { + } else { time += parseInt(results[7], 10); time += parseInt(results[8], 10) / 1000; } @@ -3509,23 +3120,13 @@ var AblePlayerInstances = []; AblePlayer.prototype.injectPlayerCode = function() { // create and inject surrounding HTML structure - // If IOS: - // If video: - // IOS does not support any of the player's functionality - // - everything plays in its own player - // Therefore, AblePlayer is not loaded & all functionality is disabled - // (this all determined. If this is IOS && video, this function is never called) - // If audio: - // HTML cannot be injected as a parent of the <audio> element - // It is therefore injected after the <audio> element - // This is only a problem in IOS 6 and earlier, - // & is a known bug, fixed in IOS 7 - - var thisObj, captionsContainer, prefsGroups, i; - thisObj = this; + // If iOS & video: + // iOS does not support any of the player's functionality - everything plays in its own player + // Therefore, AblePlayer is not loaded & all functionality is disabled + // (this all determined. If this is iOS && video, this function is never called) - // create three wrappers and wrap them around the media element. - // From inner to outer: + var captionsContainer; + // Wrappers, from inner to outer: // $mediaContainer - contains the original media element // $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions) // $ableWrapper - contains additional widgets (e.g., transcript window, sign window) @@ -3533,10 +3134,6 @@ var AblePlayerInstances = []; this.$ableDiv = this.$mediaContainer.wrap('<div class="able"></div>').parent(); this.$ableWrapper = this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(); this.$ableWrapper.addClass('able-skin-' + this.skin); - - this.$ableWrapper.css({ - 'width': this.playerWidth + 'px' - }); if (this.mediaType === 'video') { // youtube adds its own big play button @@ -3549,26 +3146,37 @@ var AblePlayerInstances = []; // add container that captions or description will be appended to // Note: new Jquery object must be assigned _after_ wrap, hence the temp captionsContainer variable - captionsContainer = $('<div>'); - if (this.mediaType === 'video') { - captionsContainer.addClass('able-vidcap-container'); - } - else if (this.mediaType === 'audio') { - captionsContainer.addClass('able-audcap-container'); - // hide this by default. It will be shown if captions are available + captionsContainer = $('<div>'); + if (this.mediaType === 'video') { + captionsContainer.addClass('able-vidcap-container'); + } else if (this.mediaType === 'audio') { + captionsContainer.addClass('able-audcap-container'); + // hide this by default. It will be shown if captions are available captionsContainer.addClass('captions-off'); } - this.injectPlayerControlArea(); // this may need to be injected after captions??? + this.injectPlayerControlArea(); // this may need to be injected after captions??? this.$captionsContainer = this.$mediaContainer.wrap(captionsContainer).parent(); - this.injectAlert(); + this.injectAlert(this.$ableDiv); this.injectPlaylist(); - + this.injectAudioPoster(); // Do this last, as it should be prepended to the top of this.$ableDiv // after everything else has prepended this.injectOffscreenHeading(); }; + AblePlayer.prototype.injectAudioPoster = function() { + if ( this.mediaType === 'audio' && this.hasPoster ) { + audioPoster = DOMPurify.sanitize(this.audioPoster); + audioPosterAlt = DOMPurify.sanitize(this.audioPosterAlt); + let audioPosterImg = document.createElement( 'img' ); + audioPosterImg.setAttribute( 'src', audioPoster ); + audioPosterImg.setAttribute( 'alt', audioPosterAlt ); + this.$audioWrapper = this.$playerDiv.wrap( '<div class="able-audio-wrapper">' ).parent(); + this.$audioWrapper.prepend( audioPosterImg ); + } + } + AblePlayer.prototype.injectOffscreenHeading = function () { // Inject an offscreen heading to the media container. @@ -3578,8 +3186,7 @@ var AblePlayerInstances = []; var headingType; if (this.playerHeadingLevel == '0') { // do NOT inject a heading (at author's request) - } - else { + } else { if (typeof this.playerHeadingLevel === 'undefined') { this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); // returns in integer 1-6 } @@ -3587,51 +3194,28 @@ var AblePlayerInstances = []; this.$headingDiv = $('<' + headingType + '>'); this.$ableDiv.prepend(this.$headingDiv); this.$headingDiv.addClass('able-offscreen'); - this.$headingDiv.text(this.tt.playerHeading); + this.$headingDiv.text( this.translate( 'playerHeading', 'Media player' ) ); } }; AblePlayer.prototype.injectBigPlayButton = function () { - var thisObj, svgData, buttonIcon, svgPath; - - thisObj = this; + var thisObj = this; this.$bigPlayButton = $('<button>', { 'class': 'able-big-play-button', 'aria-hidden': false, - 'aria-label': this.tt.play, + 'aria-label': this.translate( 'play', 'Play' ), + 'type': 'button', 'tabindex': 0 }); - if (this.iconType == 'svg') { - svgData = this.getSvgData('play'); - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - this.$bigPlayButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - this.$bigPlayButton.html(this.$bigPlayButton.html()); - } - else { // use icon font - this.$bigPlayIcon = $('<span>', { - 'class': 'icon-play', - }); - this.$bigPlayButton.append(this.$bigPlayIcon); - } + this.getIcon( this.$bigPlayButton, 'play' ); - this.$bigPlayButton.click(function (event) { - event.preventDefault(); + this.$bigPlayButton.on( 'click', function () { thisObj.handlePlay(); }); - + this.$mediaContainer.append(this.$bigPlayButton); }; @@ -3640,10 +3224,10 @@ var AblePlayerInstances = []; this.$playerDiv = $('<div>', { 'class' : 'able-player', 'role' : 'region', - 'aria-label' : this.mediaType + ' player' + 'aria-label' : ( 'audio' === this.mediaType ) ? this.translate( 'audioPlayer', 'audio player' ) : this.translate( 'videoPlayer', 'video player' ) }); - this.$playerDiv.addClass('able-'+this.mediaType); - if (this.hasPlaylist && this.showNowPlaying) { + this.$playerDiv.addClass('able-' + this.mediaType); + if (this.hasPlaylist && this.showNowPlaying) { this.$nowPlayingDiv = $('<div>',{ 'class' : 'able-now-playing', 'aria-live' : 'assertive', @@ -3672,8 +3256,9 @@ var AblePlayerInstances = []; this.$speed = $('<span>',{ 'class' : 'able-speed', - 'aria-live' : 'assertive' - }).text(this.tt.speed + ': 1x'); + 'aria-live' : 'assertive', + 'aria-atomic' : 'true' + }).text(this.translate( 'speed', 'Speed' ) + ': 1x'); this.$status = $('<span>',{ 'class' : 'able-status', @@ -3684,16 +3269,15 @@ var AblePlayerInstances = []; this.$statusBarDiv.append(this.$timer, this.$speed, this.$status); if (this.showNowPlaying) { this.$playerDiv.append(this.$nowPlayingDiv, this.$controllerDiv, this.$statusBarDiv); - } - else { + } else { this.$playerDiv.append(this.$controllerDiv, this.$statusBarDiv); } - if (this.mediaType === 'video') { - // the player controls go after the media & captions + + if (this.mediaType === 'video') { + // the player controls go after the media & captions this.$ableDiv.append(this.$playerDiv); - } - else { - // the player controls go before the media & captions + } else { + // the player controls go before the media & captions this.$ableDiv.prepend(this.$playerDiv); } }; @@ -3705,9 +3289,9 @@ var AblePlayerInstances = []; 'class': 'able-descriptions' }); // Add ARIA so description will be announced by screen readers - // Later (in description.js > showDescription()), + // Later (in description.js > showDescription()), // if browser supports Web Speech API and this.descMethod === 'browser' - // these attributes will be removed + // these attributes will be removed this.$descDiv.attr({ 'aria-live': 'assertive', 'aria-atomic': 'true' @@ -3719,54 +3303,114 @@ var AblePlayerInstances = []; }; AblePlayer.prototype.getDefaultWidth = function(which) { - + let viewportMaxwidth = window.innerWidth; // return default width of resizable elements // these values are somewhat arbitrary, but seem to result in good usability // if users disagree, they can resize (and resposition) them if (which === 'transcript') { - return 450; - } - else if (which === 'sign') { - return 400; + return ( viewportMaxwidth <= 450 ) ? viewportMaxwidth : 450; + } else if (which === 'sign') { + return ( viewportMaxwidth <= 400 ) ? viewportMaxwidth : 400; } }; + /** + * Reposition draggable windows when switched into fullscreen. + * + * @param {string} which 'transcript' or 'sign'. + / + AblePlayer.prototype.rePositionDraggableWindow = function (which) { + + let preferences, $window; + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + console.log( $window ); + if ( which === 'transcript' && $window ) { + if (typeof preferences.transcript !== 'undefined') { + this.prevTranscriptPosition = preferences.transcript; + } + $window.css({ + 'top': 0, + 'left': 0 + }); + } else if ( 'sign' === which && $window ) { + if (typeof preferences.sign !== 'undefined') { + this.prevSignPosition = preferences.sign; + } + $window.css({ + 'top': 0, + 'right': 0, + 'left': 'auto' + }); + } + } + AblePlayer.prototype.positionDraggableWindow = function (which, width) { // which is either 'transcript' or 'sign' + var preferences, preferencePos, $window, windowPos, viewportWidth, windowWidth; - var cookie, cookiePos, $window, dragged, windowPos, currentWindowPos, firstTime, zIndex; - - cookie = this.getCookie(); + preferences = this.getPref(); + $window = ( which === 'transcript' ) ? this.$transcriptArea : this.$signWindow; + if ( ! $window ) { + return; + } if (which === 'transcript') { - $window = this.$transcriptArea; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.transcript; + if (typeof preferences.transcript !== 'undefined') { + preferencePos = preferences.transcript; } - } - else if (which === 'sign') { - $window = this.$signWindow; - if (typeof cookie.transcript !== 'undefined') { - cookiePos = cookie.sign; + if ( this.prevTranscriptPosition ) { + preferencePos = this.prevTranscriptPosition; + this.prevTranscriptPosition = false; + } + } else if (which === 'sign') { + if (typeof preferences.sign !== 'undefined') { + preferencePos = preferences.sign; + } + if ( this.prevSignPosition ) { + preferencePos = this.prevSignPosition; + this.prevSignPosition = false; } } - if (typeof cookiePos !== 'undefined' && !($.isEmptyObject(cookiePos))) { - // position window using stored values from cookie + if (typeof preferencePos !== 'undefined' && !($.isEmptyObject(preferencePos))) { + // position window using stored values from preferences $window.css({ - 'position': cookiePos['position'], - 'width': cookiePos['width'], - 'z-index': cookiePos['zindex'] + 'position': preferencePos['position'], + 'width': preferencePos['width'], + 'z-index': preferencePos['zindex'] }); - if (cookiePos['position'] === 'absolute') { + if (preferencePos['position'] === 'absolute') { $window.css({ - 'top': cookiePos['top'], - 'left': cookiePos['left'] + 'top': preferencePos['top'], + 'left': preferencePos['left'] }); + // Check whether the window is above the top of the viewport. + topPosition = $window.offset().top; + leftPosition = $window.offset().left; + viewportWidth = window.innerWidth; + windowWidth = $window.width(); + if ( topPosition < 0 ) { + $window.css({ + 'top': preferencePos['top'] - topPosition + }); + } + // If draggable window is off screen to the left. + if ( leftPosition < 0 && ! this.restoringAfterFullscreen ) { + console.log( leftPosition ); + $window.css({ + 'left': preferencePos['left'] - leftPosition + }); + } + // If draggable window is off screen to the right. + if ( viewportWidth - leftPosition < 30 ) { + $window.css({ + 'left': viewportWidth - windowWidth + }); + } } - // since cookie is not page-specific, z-index needs may vary across different pages + // since preferences are not page-specific, z-index needs may vary across different pages this.updateZIndex(which); - } - else { + } else { // position window using default values windowPos = this.getOptimumPosition(which, width); if (typeof width === 'undefined') { @@ -3798,37 +3442,30 @@ var AblePlayerInstances = []; // else if there is room the left of the player, position element there // else position element beneath player - var gap, position, ableWidth, ableHeight, ableOffset, ableTop, ableLeft, - windowWidth, otherWindowWidth, zIndex; + var gap, position, ableWidth, ableOffset, ableLeft, windowWidth, otherWindowWidth; if (typeof targetWidth === 'undefined') { targetWidth = this.getDefaultWidth(targetWindow); } gap = 5; // number of pixels to preserve between Able Player objects - position = []; // position, top, left ableWidth = this.$ableDiv.width(); - ableHeight = this.$ableDiv.height(); ableOffset = this.$ableDiv.offset(); - ableTop = ableOffset.top; ableLeft = ableOffset.left; windowWidth = $(window).width(); otherWindowWidth = 0; // width of other visiable draggable windows will be added to this if (targetWindow === 'transcript') { - if (typeof this.$signWindow !== 'undefined') { - if (this.$signWindow.is(':visible')) { - otherWindowWidth = this.$signWindow.width() + gap; - } + // If placing the transcript window, check position of sign window first. + if (typeof this.$signWindow !== 'undefined' && (this.$signWindow.is(':visible'))) { + otherWindowWidth = this.$signWindow.width() + gap; } - } - else if (targetWindow === 'sign') { - if (typeof this.$transcriptArea !== 'undefined') { - if (this.$transcriptArea.is(':visible')) { - otherWindowWidth = this.$transcriptArea.width() + gap; - } + } else if (targetWindow === 'sign') { + // If placing the sign window, check position of transcript window first. + if (typeof this.$transcriptArea !== 'undefined' && (this.$transcriptArea.is(':visible'))) { + otherWindowWidth = this.$transcriptArea.width() + gap; } } if (targetWidth < (windowWidth - (ableLeft + ableWidth + gap + otherWindowWidth))) { @@ -3836,14 +3473,12 @@ var AblePlayerInstances = []; position[0] = 'absolute'; position[1] = 0; position[2] = ableWidth + otherWindowWidth + gap; - } - else if (targetWidth + gap < ableLeft) { + } else if (targetWidth + gap < ableLeft) { // there's room to the right of $ableDiv position[0] = 'absolute'; position[1] = 0; position[2] = ableLeft - targetWidth - gap; - } - else { + } else { // position element below $ableDiv position[0] = 'relative'; // no need to define top, left, or z-index @@ -3851,32 +3486,31 @@ var AblePlayerInstances = []; return position; }; - AblePlayer.prototype.injectAlert = function () { - + AblePlayer.prototype.injectAlert = function ($container) { // inject two alerts, one visible for all users and one for screen reader users only - - var top; - this.$alertBox = $('<div role="alert"></div>'); this.$alertBox.addClass('able-alert'); this.$alertBox.hide(); - this.$alertBox.appendTo(this.$ableDiv); - if (this.mediaType == 'audio') { - top = '-10'; - } - else { - // position just below top of video by default - // but this will change after video player is fully sized - // see control.js > resizePlayer() - top = '10'; - } - this.$alertBox.css({ - top: top + 'px' + + var $alertText = $( '<span></span>' ); + $alertText.appendTo(this.$alertBox); + + var $alertDismiss = $('<button type="button"></button>' ); + $alertDismiss.attr( 'aria-label', this.translate( 'dismissButton', 'Dismiss' ) ); + $alertDismiss.text( '×' ); + $alertDismiss.appendTo(this.$alertBox); + + $alertDismiss.on( 'click', function(e) { + $(this).parent('div').hide(); }); - this.$srAlertBox = $('<div role="alert"></div>'); - this.$srAlertBox.addClass('able-screenreader-alert'); - this.$srAlertBox.appendTo(this.$ableDiv); + this.$alertBox.appendTo($container); + + if ( ! this.$srAlertBox ) { + this.$srAlertBox = $('<div role="alert"></div>'); + this.$srAlertBox.addClass('able-screenreader-alert'); + this.$srAlertBox.appendTo($container); + } }; AblePlayer.prototype.injectPlaylist = function () { @@ -3896,9 +3530,8 @@ var AblePlayerInstances = []; // 'which' parameter is either 'captions', 'chapters', 'prefs', 'transcript-window' or 'sign-window' // 'tracks', if provided, is a list of tracks to be used as menu items - var thisObj, $menu, includeMenuItem, prefCats, i, $menuItem, prefCat, whichPref, - hasDefault, track, windowOptions, whichPref, whichMenu, - $thisItem, $prevItem, $nextItem; + var thisObj, $menu, includeMenuItem, i, $menuItem, prefCat, whichPref, hasDefault, track, + windowOptions, $thisItem, $prevItem, $nextItem, hasDescription, hasTranscript; thisObj = this; @@ -3916,22 +3549,26 @@ var AblePlayerInstances = []; if (which === 'prefs') { if (this.prefCats.length > 1) { for (i = 0; i < this.prefCats.length; i++) { + prefCat = this.prefCats[i]; + hasDescription = ( thisObj.hasDescTracks || thisObj.hasOpenDesc || thisObj.hasClosedDesc ) ? true : false; + hasTranscript = ( thisObj.transcriptType === null ) ? false : true; + + // If this player does not have descriptions or transcripts, do not output that option preferences. + if ( prefCat === 'descriptions' && ! hasDescription || prefCat === 'transcript' && ! hasTranscript ) { + continue; + } $menuItem = $('<li></li>',{ 'role': 'menuitem', 'tabindex': '-1' }); - prefCat = this.prefCats[i]; if (prefCat === 'captions') { - $menuItem.text(this.tt.prefMenuCaptions); - } - else if (prefCat === 'descriptions') { - $menuItem.text(this.tt.prefMenuDescriptions); - } - else if (prefCat === 'keyboard') { - $menuItem.text(this.tt.prefMenuKeyboard); - } - else if (prefCat === 'transcript') { - $menuItem.text(this.tt.prefMenuTranscript); + $menuItem.text( this.translate( 'prefMenuCaptions', 'Captions' ) ); + } else if (prefCat === 'descriptions') { + $menuItem.text( this.translate( 'prefMenuDescriptions', 'Descriptions' ) ); + } else if (prefCat === 'keyboard') { + $menuItem.text( this.translate( 'prefMenuKeyboard', 'Keyboard' ) ); + } else if (prefCat === 'transcript') { + $menuItem.text( this.translate( 'prefMenuTranscript', 'Transcript' ) ); } $menuItem.on('click',function() { whichPref = $(this).text(); @@ -3939,14 +3576,11 @@ var AblePlayerInstances = []; thisObj.setFullscreen(false); if (whichPref === thisObj.tt.prefMenuCaptions) { thisObj.captionPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuDescriptions) { + } else if (whichPref === thisObj.tt.prefMenuDescriptions) { thisObj.descPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuKeyboard) { + } else if (whichPref === thisObj.tt.prefMenuKeyboard) { thisObj.keyboardPrefsDialog.show(); - } - else if (whichPref === thisObj.tt.prefMenuTranscript) { + } else if (whichPref === thisObj.tt.prefMenuTranscript) { thisObj.transcriptPrefsDialog.show(); } thisObj.closePopups(); @@ -3955,22 +3589,19 @@ var AblePlayerInstances = []; $menu.append($menuItem); } this.$prefsButton.attr('data-prefs-popup','menu'); - } - else if (this.prefCats.length == 1) { + } else if (this.prefCats.length == 1) { // only 1 category, so don't create a popup menu. // Instead, open dialog directly when user clicks Prefs button this.$prefsButton.attr('data-prefs-popup',this.prefCats[0]); } - } - else if (which === 'captions' || which === 'chapters') { + } else if (which === 'captions' || which === 'chapters') { hasDefault = false; for (i = 0; i < tracks.length; i++) { track = tracks[i]; - if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { - includeMenuItem = false; - } - else { - includeMenuItem = true; + if (which === 'captions' && this.player === 'html5' && typeof track.cues === 'undefined') { + includeMenuItem = false; + } else { + includeMenuItem = true; } if (includeMenuItem) { $menuItem = $('<li></li>',{ @@ -3981,16 +3612,14 @@ var AblePlayerInstances = []; if (track.def && this.prefCaptions == 1) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); - } + } // Get a label using track data if (which == 'captions') { $menuItem.text(track.label); $menuItem.on('click',this.getCaptionClickFunction(track)); - } - else if (which == 'chapters') { + } else if (which == 'chapters') { $menuItem.text(this.flattenCueForCaption(track) + ' - ' + this.formatSecondsAsColonTime(track.start)); $menuItem.on('click',this.getChapterClickFunction(track.start)); } @@ -4002,31 +3631,29 @@ var AblePlayerInstances = []; $menuItem = $('<li></li>',{ 'role': 'menuitemradio', 'tabindex': '-1', - }).text(this.tt.captionsOff); + }).text( this.translate( 'captionsOff', 'Captions off' ) ); if (this.prefCaptions === 0) { $menuItem.attr('aria-checked','true'); hasDefault = true; - } - else { + } else { $menuItem.attr('aria-checked','false'); } $menuItem.on('click',this.getCaptionOffFunction()); $menu.append($menuItem); } - } - else if (which === 'transcript-window' || which === 'sign-window') { + } else if (which === 'transcript-window' || which === 'sign-window') { windowOptions = []; windowOptions.push({ 'name': 'move', - 'label': this.tt.windowMove + 'label': this.translate( 'windowMove', 'Move' ) }); windowOptions.push({ 'name': 'resize', - 'label': this.tt.windowResize + 'label': this.translate( 'windowResize', 'Resize' ) }); windowOptions.push({ 'name': 'close', - 'label': this.tt.windowClose + 'label': this.translate( 'windowClose', 'Close' ) }); for (i = 0; i < windowOptions.length; i++) { $menuItem = $('<li></li>',{ @@ -4035,7 +3662,7 @@ var AblePlayerInstances = []; 'data-choice': windowOptions[i].name }); $menuItem.text(windowOptions[i].label); - $menuItem.on('click mousedown',function(e) { + $menuItem.on('click',function(e) { e.stopPropagation(); if (typeof e.button !== 'undefined' && e.button !== 0) { // this was a mouse click (if click is triggered by keyboard, e.button is undefined) @@ -4058,61 +3685,50 @@ var AblePlayerInstances = []; if ($menu.find('li[lang=' + this.captionLang + ']')) { // a track exists for the default language. Check that item in the menu $menu.find('li[lang=' + this.captionLang + ']').attr('aria-checked','true'); - } - else { + } else { // check the last item (captions off) $menu.find('li').last().attr('aria-checked','true'); } - } - else if (which === 'chapters') { + } else if (which === 'chapters') { if ($menu.find('li:contains("' + this.defaultChapter + '")')) { $menu.find('li:contains("' + this.defaultChapter + '")').attr('aria-checked','true').addClass('able-focus'); - } - else { + } else { $menu.find('li').first().attr('aria-checked','true').addClass('able-focus'); } } // add keyboard handlers for navigating within popups $menu.on('keydown',function (e) { - - whichMenu = $(this).attr('id').split('-')[1]; + $thisItem = $(this).find('li:focus'); if ($thisItem.is(':first-child')) { // this is the first item in the menu $prevItem = $(this).find('li').last(); // wrap to bottom $nextItem = $thisItem.next(); - } - else if ($thisItem.is(':last-child')) { + } else if ($thisItem.is(':last-child')) { // this is the last Item $prevItem = $thisItem.prev(); $nextItem = $(this).find('li').first(); // wrap to top - } - else { + } else { $prevItem = $thisItem.prev(); $nextItem = $thisItem.next(); } - if (e.which === 9) { // Tab + if (e.key === 'Tab') { if (e.shiftKey) { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else { + $prevItem.trigger('focus').addClass('able-focus'); + } else { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); + $nextItem.trigger('focus').addClass('able-focus'); } - } - else if (e.which === 40 || e.which === 39) { // down or right arrow + } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { $thisItem.removeClass('able-focus'); - $nextItem.focus().addClass('able-focus'); - } - else if (e.which == 38 || e.which === 37) { // up or left arrow + $nextItem.trigger('focus').addClass('able-focus'); + } else if (e.key == 'ArrowUp' || e.key === 'ArrowLeft') { $thisItem.removeClass('able-focus'); - $prevItem.focus().addClass('able-focus'); - } - else if (e.which === 32 || e.which === 13) { // space or enter - $thisItem.click(); - } - else if (e.which === 27) { // Escape + $prevItem.trigger('focus').addClass('able-focus'); + } else if (e.key === ' ' || e.key === 'Enter') { + $thisItem.trigger( 'click' ); + } else if (e.key === 'Escape') { $thisItem.removeClass('able-focus'); thisObj.closePopups(); e.stopPropagation; @@ -4129,7 +3745,7 @@ var AblePlayerInstances = []; if (this.chaptersPopup && this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); - this.$chaptersButton.attr('aria-expanded','false').focus(); + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); } if (this.captionsPopup && this.captionsPopup.is(':visible')) { this.captionsPopup.hide(); @@ -4151,15 +3767,15 @@ var AblePlayerInstances = []; },100); } if (this.$volumeSlider && this.$volumeSlider.is(':visible')) { - this.$volumeSlider.hide().attr('aria-hidden','true'); - this.$volumeButton.attr('aria-expanded', 'false').focus(); + this.$volumeSlider.hide().attr('aria-hidden','true'); + this.$volumeButton.attr('aria-expanded', 'false').trigger('focus'); } if (this.$transcriptPopup && this.$transcriptPopup.is(':visible')) { - this.hidingPopup = true; + this.hidingPopup = true; this.$transcriptPopup.hide(); // restore menu items to their original state this.$transcriptPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$transcriptPopupButton.attr('aria-expanded','false').focus(); + this.$transcriptPopupButton.attr('aria-expanded','false').trigger('focus'); // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; @@ -4169,7 +3785,7 @@ var AblePlayerInstances = []; this.$signPopup.hide(); // restore menu items to their original state this.$signPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - this.$signPopupButton.attr('aria-expanded','false').focus(); + this.$signPopupButton.attr('aria-expanded','false').trigger('focus'); } }; @@ -4179,10 +3795,7 @@ var AblePlayerInstances = []; // parameter 'which' is passed if refreshing content of an existing popup ('captions' or 'chapters') // If which is undefined, automatically setup 'captions', 'chapters', and 'prefs' popups // However, only setup 'transcript-window' and 'sign-window' popups if passed as value of which - var popups, thisObj, hasDefault, i, j, - tracks, track, $trackButton, $trackLabel, - radioName, radioId, $menu, $menuItem, - prefCats, prefCat, prefLabel; + var popups, thisObj, i, tracks; popups = []; if (typeof which === 'undefined') { @@ -4209,33 +3822,26 @@ var AblePlayerInstances = []; thisObj = this; for (var i=0; i<popups.length; i++) { var popup = popups[i]; - hasDefault = false; if (popup == 'prefs') { this.prefsPopup = this.createPopup('prefs'); - } - else if (popup == 'captions') { + } else if (popup == 'captions') { if (typeof this.captionsPopup === 'undefined' || !this.captionsPopup) { this.captionsPopup = this.createPopup('captions',this.captions); } - } - else if (popup == 'chapters') { + } else if (popup == 'chapters') { if (this.selectedChapters) { tracks = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { tracks = this.chapters[0].cues; - } - else { + } else { tracks = []; } if (typeof this.chaptersPopup === 'undefined' || !this.chaptersPopup) { this.chaptersPopup = this.createPopup('chapters',tracks); } - } - else if (popup == 'transcript-window') { + } else if (popup == 'transcript-window') { return this.createPopup('transcript-window'); - } - else if (popup == 'sign-window') { + } else if (popup == 'sign-window') { return this.createPopup('sign-window'); } } @@ -4244,101 +3850,99 @@ var AblePlayerInstances = []; AblePlayer.prototype.provideFallback = function() { - // provide fallback in case of a critical error building the player - // to test, set data-test-fallback to either of the following values: - // 1 = emulate failure to build Able Player - // 2 = emulate browser that doesn't support HTML5 media + // provide fallback in case of a critical error building the player + // to test, set data-test-fallback to either of the following values: + // 1 = emulate failure to build Able Player + // 2 = emulate browser that doesn't support HTML5 media var i, $fallback; - if (this.usingFallback) { - // fallback has already been implemented. + if (this.usingFallback) { + // fallback has already been implemented. // stopgap to prevent this function from executing twice on the same media element - return; - } - else { - this.usingFallback = true; + return; + } else { + this.usingFallback = true; } - if (!this.testFallback) { - // this is not a test. - // an actual error has resulted in this function being called. - // use scenario 1 - this.testFallback = 1; + if (!this.testFallback) { + // this is not a test. + // an actual error has resulted in this function being called. + // use scenario 1 + this.testFallback = 1; } - if (typeof this.$media === 'undefined') { - // this function has been called prior to initialize.js > reinitialize() + if (typeof this.$media === 'undefined') { + // this function has been called prior to initialize.js > reinitialize() // before doing anything, need to create the jQuery media object - this.$media = $(this.media); - } - - // get/assign an id for the media element - if (this.$media.attr('id')) { - this.mediaId = this.$media.attr('id'); + this.$media = $(this.media); } - else { + + // get/assign an id for the media element + if (this.$media.attr('id')) { + this.mediaId = this.$media.attr('id'); + } else { this.mediaId = 'media' + Math.floor(Math.random() 1000000000).toString(); - } - - // check whether element has nested fallback content - this.hasFallback = false; - if (this.$media.children().length) { - i = 0; - while (i < this.$media.children().length && !this.hasFallback) { - if (!(this.$media.children()[i].tagName === 'SOURCE' || - this.$media.children()[i].tagName === 'TRACK')) { - // this element is something other than <source> or <track> - this.hasFallback = true; + } + + // check whether element has nested fallback content + this.hasFallback = false; + if (this.$media.children().length) { + i = 0; + while (i < this.$media.children().length && !this.hasFallback) { + if (!(this.$media.children()[i].tagName === 'SOURCE' || + this.$media.children()[i].tagName === 'TRACK')) { + // this element is something other than <source> or <track> + this.hasFallback = true; } - i++; + i++; } } - if (!this.hasFallback) { - // the HTML code does not include any nested fallback content - // inject our own - // NOTE: this message is not translated, since fallback may be needed - // due to an error loading the translation file - // This will only be needed on very rare occasions, so English is ok. - $fallback = $('<p>').text('Media player unavailable.'); - this.$media.append($fallback); + if (!this.hasFallback) { + // the HTML code does not include any nested fallback content + // inject our own + // NOTE: this message is not translated, since fallback may be needed + // due to an error loading the translation file + // This will only be needed on very rare occasions, so English is ok. + $fallback = $('<p>').text('Media player unavailable.'); + this.$media.append($fallback); } - // get height and width attributes, if present + // get height and width attributes, if present // and add them to a style attribute - if (this.$media.attr('width')) { - this.$media.css('width',this.$media.attr('width') + 'px'); + if (this.$media.attr('width')) { + this.$media.css('width',this.$media.attr('width') + 'px'); } - if (this.$media.attr('height')) { - this.$media.css('height',this.$media.attr('height') + 'px'); + if (this.$media.attr('height')) { + this.$media.css('height',this.$media.attr('height') + 'px'); } - // Remove data-able-player attribute - this.$media.removeAttr('data-able-player'); + // Remove data-able-player attribute + this.$media.removeAttr('data-able-player'); // Add controls attribute (so browser will add its own controls) - this.$media.prop('controls',true); + this.$media.prop('controls',true); - if (this.testFallback == 2) { + if (this.testFallback == 2) { - // emulate browser failure to support HTML5 media by changing the media tag name - // browsers should display the supported content that's nested inside + // emulate browser failure to support HTML5 media by changing the media tag name + // browsers should display the supported content that's nested inside $(this.$media).replaceWith($('<foobar id="foobar-' + this.mediaId + '">')); - this.$newFallbackElement = $('#foobar-' + this.mediaId); - - // append all children from the original media - if (this.$media.children().length) { - i = this.$media.children().length - 1; - while (i >= 0) { - this.$newFallbackElement.prepend($(this.$media.children()[i])); - i--; + this.$newFallbackElement = $('#foobar-' + this.mediaId); + + // append all children from the original media + if (this.$media.children().length) { + i = this.$media.children().length - 1; + while (i >= 0) { + this.$newFallbackElement.prepend($(this.$media.children()[i])); + i--; } } - if (!this.hasFallback) { + if (!this.hasFallback) { // inject our own fallback content, defined above this.$newFallbackElement.append($fallback); } } - return; + return; }; AblePlayer.prototype.calculateControlLayout = function () { @@ -4352,7 +3956,7 @@ var AblePlayerInstances = []; // 3 = Bottom right (legacy skin only) // Each key contains an array of control names to put in that section. - var controlLayout, volumeSupported, playbackSupported, totalButtonWidth, numA11yButtons; + var controlLayout, playbackSupported, numA11yButtons; controlLayout = []; controlLayout[0] = []; @@ -4375,8 +3979,7 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[0].push('previous'); controlLayout[0].push('next'); - } - else if (this.skin == '2020') { + } else { controlLayout[0].push('previous'); controlLayout[0].push('next'); } @@ -4388,8 +3991,7 @@ var AblePlayerInstances = []; controlLayout[2].push('slower'); controlLayout[2].push('faster'); } - } - else { + } else { playbackSupported = false; } @@ -4398,8 +4000,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('captions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('captions'); } } @@ -4407,28 +4008,25 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('sign'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('sign'); } } - if (this.mediaType === 'video') { + if (this.mediaType === 'video') { if (this.hasOpenDesc || this.hasClosedDesc) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('descriptions'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('descriptions'); } } } - if (this.transcriptType === 'popup' && !(this.hideTranscriptButton)) { + if (this.transcriptType !== null && !(this.hideTranscriptButton)) { numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('transcript'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('transcript'); } } @@ -4436,8 +4034,7 @@ var AblePlayerInstances = []; numA11yButtons++; if (this.skin === 'legacy') { controlLayout[2].push('chapters'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('chapters'); } } @@ -4454,32 +4051,26 @@ var AblePlayerInstances = []; if (this.skin === 'legacy') { controlLayout[3].push('preferences'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('preferences'); } - if (this.mediaType === 'video' && this.allowFullscreen) { + if (this.mediaType === 'video' && this.allowFullscreen && this.nativeFullscreenSupported() ) { if (this.skin === 'legacy') { controlLayout[3].push('fullscreen'); - } - else { + } else { controlLayout[1].push('fullscreen'); } } if (this.browserSupportsVolume()) { - volumeSupported = true; // defined in case we decide to move volume button elsewhere this.volumeButton = 'volume-' + this.getVolumeName(this.volume); if (this.skin === 'legacy') { controlLayout[1].push('volume'); - } - else if (this.skin == '2020') { + } else { controlLayout[1].push('volume'); } - } - else { - volumeSupported = false; + } else { this.volume = false; } return controlLayout; @@ -4495,12 +4086,10 @@ var AblePlayerInstances = []; // some controls are aligned on the left, and others on the right var thisObj, baseSliderWidth, controlLayout, numSections, - i, j, k, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, $pipeImg, - svgData, svgPath, control, - $buttonLabel, $buttonImg, buttonImgSrc, buttonTitle, $newButton, iconClass, buttonIcon, - buttonUse, buttonText, position, buttonHeight, buttonWidth, buttonSide, controllerWidth, - tooltipId, tooltipY, tooltipX, tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, - captionLabel, popupMenuId; + i, j, controls, $controllerSpan, $sliderDiv, sliderLabel, $pipe, control, + buttonTitle, $newButton, buttonText, position, buttonHeight, + buttonWidth, buttonSide, controllerWidth, tooltipId, tooltipY, tooltipX, + tooltipWidth, tooltipStyle, tooltip, tooltipTimerId, captionLabel, popupMenuId; thisObj = this; @@ -4518,33 +4107,36 @@ var AblePlayerInstances = []; }).hide(); this.$controllerDiv.append(this.$tooltipDiv); - if (this.skin == '2020') { + if (this.skin == '2020') { // add a full-width seek bar $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); this.$controllerDiv.append($sliderDiv); - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); } + // add a full-width seek bar + let $controlRow = $('<div class="able-control-row"></div>'); + this.$controllerDiv.append($controlRow); + for (i = 0; i < numSections; i++) { controls = controlLayout[i]; if ((i % 2) === 0) { // even keys on the left $controllerSpan = $('<div>',{ 'class': 'able-left-controls' }); - } - else { // odd keys on the right + } else { // odd keys on the right $controllerSpan = $('<div>',{ 'class': 'able-right-controls' }); } - this.$controllerDiv.append($controllerSpan); + $controlRow.append($controllerSpan); for (j=0; j<controls.length; j++) { control = controls[j]; if (control === 'seek') { $sliderDiv = $('<div class="able-seekbar"></div>'); - sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel; + sliderLabel = this.mediaType + ' ' + this.translate( 'seekbarLabel', 'timeline' ); $controllerSpan.append($sliderDiv); if (typeof this.duration === 'undefined' || this.duration === 0) { // set arbitrary starting duration, and change it when duration is known @@ -4552,53 +4144,17 @@ var AblePlayerInstances = []; // also set elapsed to 0 this.elapsed = 0; } - this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); - } - else if (control === 'pipe') { + this.seekBar = new AccessibleSlider($sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible'); + } else if (control === 'pipe') { $pipe = $('<span>', { 'tabindex': '-1', - 'aria-hidden': 'true' + 'aria-hidden': 'true', + 'class': 'able-pipe', }); - if (this.iconType === 'font') { - $pipe.addClass('icon-pipe'); - } - else { - $pipeImg = $('<img>', { - src: this.rootPath + 'button-icons/' + this.iconColor + '/pipe.png', - alt: '', - role: 'presentation' - }); - $pipe.append($pipeImg); - } + $pipe.append('|'); $controllerSpan.append($pipe); - } - else { + } else { // this control is a button - if (control === 'volume') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + this.volumeButton + '.png'; - } - else if (control === 'fullscreen') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/fullscreen-expand.png'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/turtle.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/slower.png'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/rabbit.png'; - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/faster.png'; - } - } - else { - buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + control + '.png'; - } buttonTitle = this.getButtonTitle(control); // icomoon documentation recommends the following markup for screen readers: @@ -4616,7 +4172,6 @@ var AblePlayerInstances = []; $newButton = $('<div>',{ 'role': 'button', 'tabindex': '0', - 'aria-label': buttonTitle, 'class': 'able-button-handler-' + control }); @@ -4630,16 +4185,14 @@ var AblePlayerInstances = []; 'aria-controls': popupMenuId, 'aria-haspopup': 'menu', 'aria-expanded': 'false' - }); - } - else if (this.prefCats.length === 1) { + }); + } else if (this.prefCats.length === 1) { // Prefs button will trigger a dialog $newButton.attr({ 'aria-haspopup': 'dialog' }); } - } - else if (control === 'volume') { + } else if (control === 'volume') { popupMenuId = this.mediaId + '-volume-slider'; // volume slider popup is not a menu or a dialog // therefore, using aria-expanded rather than aria-haspopup to communicate properties/state @@ -4655,130 +4208,23 @@ var AblePlayerInstances = []; } } } - if (this.iconType === 'font') { - if (control === 'volume') { - iconClass = 'icon-' + this.volumeButton; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-turtle'; - } - else { - iconClass = 'icon-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'icon-rabbit'; - } - else { - iconClass = 'icon-faster'; - } - } - else { - iconClass = 'icon-' + control; - } - buttonIcon = $('<span>',{ - 'class': iconClass, - 'aria-hidden': 'true' - }); - $newButton.append(buttonIcon); + var getControl = control; + if ( control === 'faster' && this.speedIcons === 'animals' ) { + getControl = 'rabbit'; } - else if (this.iconType === 'svg') { - - /* - // Unused option for adding SVG: - // Use <use> element to link to button-icons/able-icons.svg - // Advantage: SVG file can be cached - // Disadvantage: Not supported by Safari 6, IE 6-11, or Edge 12 - // Instead, adding <svg> element within each <button> - if (control === 'volume') { - iconClass = 'svg-' + this.volumeButton; - } - else if (control === 'fullscreen') { - iconClass = 'svg-fullscreen-expand'; - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-turtle'; - } - else { - iconClass = 'svg-slower'; - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - iconClass = 'svg-rabbit'; - } - else { - iconClass = 'svg-faster'; - } - } - else { - iconClass = 'svg-' + control; - } - buttonIcon = $('<svg>',{ - 'class': iconClass - }); - buttonUse = $('<use>',{ - 'xlink:href': this.rootPath + 'button-icons/able-icons.svg#' + iconClass - }); - buttonIcon.append(buttonUse); - / - var svgData; - if (control === 'volume') { - svgData = this.getSvgData(this.volumeButton); - } - else if (control === 'fullscreen') { - svgData = this.getSvgData('fullscreen-expand'); - } - else if (control === 'slower') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('turtle'); - } - else { - svgData = this.getSvgData('slower'); - } - } - else if (control === 'faster') { - if (this.speedIcons === 'animals') { - svgData = this.getSvgData('rabbit'); - } - else { - svgData = this.getSvgData('faster'); - } - } - else { - svgData = this.getSvgData(control); - } - buttonIcon = $('<svg>',{ - 'focusable': 'false', - 'aria-hidden': 'true', - 'viewBox': svgData[0] - }); - svgPath = $('<path>',{ - 'd': svgData[1] - }); - buttonIcon.append(svgPath); - $newButton.html(buttonIcon); - - // Final step: Need to refresh the DOM in order for browser to process & display the SVG - $newButton.html($newButton.html()); + if ( control === 'slower' && this.speedIcons === 'animals' ) { + getControl = 'turtle'; } - else { - // use images - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); + if ( control === 'volume' ) { + this.getIcon( $newButton, this.volumeButton ); + } else { + if ( 'fullscreen' === getControl ) { + getControl = ( this.fullscreen ) ? 'fullscreen-collapse' : 'fullscreen-expand'; + } + this.getIcon( $newButton, getControl ); } - // add the visibly-hidden label for screen readers that don't support aria-label on the button - var $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(buttonTitle); - $newButton.append($buttonLabel); + + this.setText($newButton,buttonTitle); // add an event listener that displays a tooltip on mouseenter or focus $newButton.on('mouseenter focus',function(e) { @@ -4786,73 +4232,63 @@ var AblePlayerInstances = []; // since the same tooltip div is used, it's location just changes. clearTimeout(tooltipTimerId); - var buttonText = $(this).attr('aria-label'); + buttonText = $(this).attr('aria-label'); // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); + position = $(this).position(); + buttonHeight = $(this).height(); + buttonWidth = $(this).width(); // position() is expressed using top and left (of button); // add right (of button) too, for convenience - var controllerWidth = thisObj.$controllerDiv.width(); + controllerWidth = thisObj.$controllerDiv.width(); position.right = controllerWidth - position.left - buttonWidth; - // The following formula positions tooltip above the button - // var tooltipY = position.top - buttonHeight - 15; - - // The following formula positions tooltip below the button + // The following formula positions tooltip below the button // which allows the tooltip to be hoverable as per WCAG 2.x SC 1.4.13 - // without obstructing the seekbar - var tooltipY = position.top + buttonHeight + 5; + // without obstructing the seekbar + tooltipY = position.top + buttonHeight + 5; if ($(this).parent().hasClass('able-right-controls')) { // this control is on the right side - var buttonSide = 'right'; - } - else { + buttonSide = 'right'; + } else { // this control is on the left side - var buttonSide = 'left'; + buttonSide = 'left'; } // populate tooltip, then calculate its width before showing it - var tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); + tooltipWidth = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).width(); // center the tooltip horizontally over the button if (buttonSide == 'left') { - var tooltipX = position.left - tooltipWidth/2; + tooltipX = position.left - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: tooltipX + 'px', right: '', top: tooltipY + 'px' }; - } - else { - var tooltipX = position.right - tooltipWidth/2; + } else { + tooltipX = position.right - tooltipWidth/2; if (tooltipX < 0) { // tooltip would exceed the bounds of the player. Adjust. tooltipX = 2; } - var tooltipStyle = { + tooltipStyle = { left: '', right: tooltipX + 'px', top: tooltipY + 'px' }; } - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); + tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(buttonText).css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { - // hide tooltip (original line of code) - // AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); - - // The above line was replaced with the following block - // in order to meet WCAG 2.x SC 1.4.13 // (keep the tooltip visible if user hovers over it) - // This causes unwanted side effects if tooltips are positioned above the buttons - // as the persistent tooltip obstructs the seekbar, - // blocking users from being able to move a pointer from a button to the seekbar - // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons + // This causes unwanted side effects if tooltips are positioned above the buttons + // as the persistent tooltip obstructs the seekbar, + // blocking users from being able to move a pointer from a button to the seekbar + // This limitation was addressed in 4.4.49 by moving the tooltip below the buttons // clear existing timeout before reassigning variable clearTimeout(tooltipTimerId); @@ -4869,29 +4305,27 @@ var AblePlayerInstances = []; thisObj.$tooltipDiv.on('mouseleave blur', function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); }); - - }); + + }); }); if (control === 'captions') { if (!this.prefCaptions || this.prefCaptions !== 1) { // captions are available, but user has them turned off if (this.captions.length > 1) { - captionLabel = this.tt.captions; - } - else { - captionLabel = this.tt.showCaptions; + captionLabel = this.translate( 'captions', 'Captions' ); + } else { + captionLabel = this.translate( 'showCaptions', 'Show captions' ); } $newButton.addClass('buttonOff').attr('title',captionLabel); $newButton.attr('aria-pressed', 'false'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { if (!this.prefDesc || this.prefDesc !== 1) { // user prefer non-audio described version // Therefore, load media without description // Description can be toggled on later with this button - $newButton.addClass('buttonOff').attr('title',this.tt.turnOnDescriptions); + $newButton.addClass('buttonOff').attr( 'title', this.translate( 'turnOnDescriptions', 'Turn on descriptions' ) ); } } @@ -4900,59 +4334,48 @@ var AblePlayerInstances = []; // create variables of buttons that are referenced throughout the AblePlayer object if (control === 'play') { this.$playpauseButton = $newButton; - } - else if (control == 'previous') { + } else if (control == 'previous') { this.$prevButton = $newButton; // if player is being rebuilt because user clicked the Prev button // return focus to that (newly built) button if (this.buttonWithFocus == 'previous') { - this.$prevButton.focus(); + this.$prevButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control == 'next') { + } else if (control == 'next') { this.$nextButton = $newButton; // if player is being rebuilt because user clicked the Next button // return focus to that (newly built) button if (this.buttonWithFocus == 'next') { - this.$nextButton.focus(); + this.$nextButton.trigger('focus'); this.buttonWithFocus = null; } - } - else if (control === 'captions') { + } else if (control === 'captions') { this.$ccButton = $newButton; - } - else if (control === 'sign') { + } else if (control === 'sign') { this.$signButton = $newButton; // gray out sign button if sign language window is not active if (!(this.$signWindow.is(':visible'))) { this.$signButton.addClass('buttonOff'); } - } - else if (control === 'descriptions') { + } else if (control === 'descriptions') { this.$descButton = $newButton; // button will be enabled or disabled in description.js > initDescription() - } - else if (control === 'mute') { + } else if (control === 'mute') { this.$muteButton = $newButton; - } - else if (control === 'transcript') { + } else if (control === 'transcript') { this.$transcriptButton = $newButton; // gray out transcript button if transcript is not active if (!(this.$transcriptDiv.is(':visible'))) { - this.$transcriptButton.addClass('buttonOff').attr('title',this.tt.showTranscript); + this.$transcriptButton.addClass('buttonOff').attr( 'title', this.translate( 'showTranscript', 'Show transcript' ) ); } - } - else if (control === 'fullscreen') { + } else if (control === 'fullscreen') { this.$fullscreenButton = $newButton; - } - else if (control === 'chapters') { + } else if (control === 'chapters') { this.$chaptersButton = $newButton; - } - else if (control === 'preferences') { + } else if (control === 'preferences') { this.$prefsButton = $newButton; - } - else if (control === 'volume') { + } else if (control === 'volume') { this.$volumeButton = $newButton; } } @@ -4982,191 +4405,7 @@ var AblePlayerInstances = []; } // Update state-based display of controls. - this.refreshControls('init'); - }; - - AblePlayer.prototype.useSvg = function () { - - // Modified from IcoMoon.io svgxuse - // @copyright Copyright (c) 2016 IcoMoon.io - // @license Licensed under MIT license - // See https://github.com/Keyamoon/svgxuse - // @version 1.1.16 - - var cache = Object.create(null); // holds xhr objects to prevent multiple requests - var checkUseElems, - tid; // timeout id - var debouncedCheck = function () { - clearTimeout(tid); - tid = setTimeout(checkUseElems, 100); - }; - var unobserveChanges = function () { - return; - }; - var observeChanges = function () { - var observer; - window.addEventListener('resize', debouncedCheck, false); - window.addEventListener('orientationchange', debouncedCheck, false); - if (window.MutationObserver) { - observer = new MutationObserver(debouncedCheck); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - attributes: true - }); - unobserveChanges = function () { - try { - observer.disconnect(); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - } catch (ignore) {} - }; - } - else { - document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); - unobserveChanges = function () { - document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - }; - } - }; - var xlinkNS = 'http://www.w3.org/1999/xlink'; - checkUseElems = function () { - var base, - bcr, - fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. - hash, - i, - Request, - inProgressCount = 0, - isHidden, - url, - uses, - xhr; - if (window.XMLHttpRequest) { - Request = new XMLHttpRequest(); - if (Request.withCredentials !== undefined) { - Request = XMLHttpRequest; - } - else { - Request = XDomainRequest || undefined; - } - } - if (Request === undefined) { - return; - } - function observeIfDone() { - // If done with making changes, start watching for chagnes in DOM again - inProgressCount -= 1; - if (inProgressCount === 0) { // if all xhrs were resolved - observeChanges(); // watch for changes to DOM - } - } - function attrUpdateFunc(spec) { - return function () { - if (cache[spec.base] !== true) { - spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); - } - }; - } - function onloadFunc(xhr) { - return function () { - var body = document.body; - var x = document.createElement('x'); - var svg; - xhr.onload = null; - x.innerHTML = xhr.responseText; - svg = x.getElementsByTagName('svg')[0]; - if (svg) { - svg.setAttribute('aria-hidden', 'true'); - svg.style.position = 'absolute'; - svg.style.width = 0; - svg.style.height = 0; - svg.style.overflow = 'hidden'; - body.insertBefore(svg, body.firstChild); - } - observeIfDone(); - }; - } - function onErrorTimeout(xhr) { - return function () { - xhr.onerror = null; - xhr.ontimeout = null; - observeIfDone(); - }; - } - unobserveChanges(); // stop watching for changes to DOM - // find all use elements - uses = document.getElementsByTagName('use'); - for (i = 0; i < uses.length; i += 1) { - try { - bcr = uses[i].getBoundingClientRect(); - } catch (ignore) { - // failed to get bounding rectangle of the use element - bcr = false; - } - url = uses[i].getAttributeNS(xlinkNS, 'href').split('#'); - base = url[0]; - hash = url[1]; - isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; - if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { - // the use element is empty - // if there is a reference to an external SVG, try to fetch it - // use the optional fallback URL if there is no reference to an external SVG - if (fallback && !base.length && hash && !document.getElementById(hash)) { - base = fallback; - } - if (base.length) { - // schedule updating xlink:href - xhr = cache[base]; - if (xhr !== true) { - // true signifies that prepending the SVG was not required - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - if (xhr === undefined) { - xhr = new Request(); - cache[base] = xhr; - xhr.onload = onloadFunc(xhr); - xhr.onerror = onErrorTimeout(xhr); - xhr.ontimeout = onErrorTimeout(xhr); - xhr.open('GET', base); - xhr.send(); - inProgressCount += 1; - } - } - } - else { - if (!isHidden) { - if (cache[base] === undefined) { - // remember this URL if the use element was not empty and no request was sent - cache[base] = true; - } - else if (cache[base].onload) { - // if it turns out that prepending the SVG is not necessary, - // abort the in-progress xhr. - cache[base].abort(); - cache[base].onload = undefined; - cache[base] = true; - } - } - } - } - uses = ''; - inProgressCount += 1; - observeIfDone(); - }; -/ - // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. - window.addEventListener('load', function winLoad() { - window.removeEventListener('load', winLoad, false); // to prevent memory leaks - tid = setTimeout(checkUseElems, 0); - }, false); -/ + this.refreshControls(); }; AblePlayer.prototype.cuePlaylistItem = function(sourceIndex) { @@ -5175,19 +4414,7 @@ var AblePlayerInstances = []; // NOTE: Swapping source for audio description is handled elsewhere; // see description.js > swapDescription() - / - // Decided against preventing a reload of the current item in the playlist. - // If it's clickable, users should be able to click on it and expect something to happen. - // Leaving here though in case it's determined to be desirable. - if (sourceIndex === this.playlistItemIndex) { - // user has requested the item that's currently playing - // just ignore the request - return; - } - this.playlistItemIndex = sourceIndex; - / - - var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, sources, s, i, $newSource, nowPlayingSpan; + var $newItem, prevPlayer, newPlayer, itemTitle, itemLang, nowPlayingSpan; var thisObj = this; @@ -5195,9 +4422,8 @@ var AblePlayerInstances = []; if (this.initializing) { // this is the first track - user hasn't pressed play yet // do nothing. - } - else { - if (this.playerCreated) { + } else { + if (this.playerCreated) { // remove the old this.deletePlayer('playlist'); } @@ -5206,19 +4432,18 @@ var AblePlayerInstances = []; // set swappingSrc; needs to be true within recreatePlayer(), called below this.swappingSrc = true; - // if a new playlist item is being requested, and playback has already started, - // it should be ok to play automatically, regardless of how it was requested - if (this.startedPlaying) { - this.okToPlay = true; - } - else { - this.okToPlay = false; + // if a new playlist item is being requested, and playback has already started, + // it should be ok to play automatically, regardless of how it was requested + if (this.startedPlaying) { + this.okToPlay = true; + } else { + this.okToPlay = false; } - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; // Determine appropriate player to play this media $newItem = this.$playlist.eq(sourceIndex); @@ -5228,16 +4453,14 @@ var AblePlayerInstances = []; this.youTubeDescId = this.getYouTubeId($newItem.attr('data-youtube-desc-id')); } newPlayer = 'youtube'; - } - else if (this.hasAttr($newItem,'data-vimeo-id')) { + } else if (this.hasAttr($newItem,'data-vimeo-id')) { this.vimeoId = this.getVimeoId($newItem.attr('data-vimeo-id')); if (this.hasAttr($newItem,'data-vimeo-desc-id')) { this.vimeoDescId = this.getVimeoId($newItem.attr('data-vimeo-desc-id')); } newPlayer = 'vimeo'; - } - else { - newPlayer = 'html5'; + } else { + newPlayer = 'html5'; } if (newPlayer === 'youtube') { if (prevPlayer === 'html5') { @@ -5247,9 +4470,8 @@ var AblePlayerInstances = []; } this.$media.hide(); } - } - else { - // the new player is not youtube + } else { + // the new player is not youtube this.youTubeId = false; if (prevPlayer === 'youtube') { // unhide the media element @@ -5276,21 +4498,42 @@ var AblePlayerInstances = []; var $sourceSpans = $newItem.children('span.able-source'); if ($sourceSpans.length) { $sourceSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src')) { - // this is the only required attribute - var $newSource = $('<source>',{ - 'src': $(this).attr('data-src') - }); - if (thisObj.hasAttr($(this),'data-type')) { - $newSource.attr('type',$(this).attr('data-type')); - } - if (thisObj.hasAttr($(this),'data-desc-src')) { - $newSource.attr('data-desc-src',$(this).attr('data-desc-src')); - } - if (thisObj.hasAttr($(this),'data-sign-src')) { - $newSource.attr('data-sign-src',$(this).attr('data-sign-src')); + const $this = $(this); + + // Check if the required data-src attribute exists + if (thisObj.hasAttr($this, "data-src")) { + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <source> element with the sanitized src + const $newSource = $("<source>", { src: sanitizedSrc }); + + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-type", + "data-desc-src", + "data-sign-src", + ]; + + // Process optional attributes + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + const attrValue = $this.attr(attr); // Get the attribute value + const sanitizedValue = DOMPurify.sanitize(attrValue); // Sanitize the value + + // If the attribute ends with "-src", validate the protocol + if (attr.endsWith("-src") && validate.isProtocolSafe(sanitizedValue)) { + $newSource.attr(attr, sanitizedValue); // Add the sanitized and validated attribute + } else if (!attr.endsWith("-src")) { + $newSource.attr(attr, sanitizedValue); // Add sanitized value for non-src attributes + } + } + }); + + // Append the new <source> element to the media object + thisObj.$media.append($newSource); } - thisObj.$media.append($newSource); } }); } @@ -5300,27 +4543,37 @@ var AblePlayerInstances = []; if ($trackSpans.length) { // for each element in $trackSpans, create a new <track> element $trackSpans.each(function() { - if (thisObj.hasAttr($(this),'data-src') && - thisObj.hasAttr($(this),'data-kind') && - thisObj.hasAttr($(this),'data-srclang')) { + const $this = $(this); + if (thisObj.hasAttr($this, "data-src") && thisObj.hasAttr($this, "data-kind") && thisObj.hasAttr($this, "data-srclang")) { // all required attributes are present - var $newTrack = $('<track>',{ - 'src': $(this).attr('data-src'), - 'kind': $(this).attr('data-kind'), - 'srclang': $(this).attr('data-srclang') - }); - if (thisObj.hasAttr($(this),'data-label')) { - $newTrack.attr('label',$(this).attr('data-label')); - } - if (thisObj.hasAttr($(this),'data-desc')) { - $newTrack.attr('data-desc',$(this).attr('data-desc')); + const sanitizedSrc = DOMPurify.sanitize($this.attr("data-src")); + // Validate the protocol of the sanitized URL + if (validate.isProtocolSafe(sanitizedSrc)) { + // Create a new <track> element with the sanitized src + const $newTrack = $("<track>", { + src: sanitizedSrc, + kind: $this.attr("data-kind"), + srclang: $this.attr("data-srclang"), + }); + // List of optional attributes to sanitize and add + const optionalAttributes = [ + "data-label", + "data-desc", + "data-default", + ]; + optionalAttributes.forEach((attr) => { + if (thisObj.hasAttr($this, attr)) { + $newTrack.attr(attr, DOMPurify.sanitize($this.attr(attr))); + } + }); + // Append the new <track> element to the media object + thisObj.$media.append($newTrack); } - thisObj.$media.append($newTrack); } }); } - itemTitle = $newItem.text(); + itemTitle = DOMPurify.sanitize( $newItem.text() ); if (this.hasAttr($newItem,'lang')) { itemLang = $newItem.attr('lang'); } @@ -5328,18 +4581,18 @@ var AblePlayerInstances = []; this.$sources = this.$media.find('source'); // recreate player, informed by new attributes and track elements - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; + return; } - this.recreatePlayer().then(function() { + this.recreatePlayer().then(function() { // update playlist to indicate which item is playing thisObj.$playlist.removeClass('able-current') .children('button').removeAttr('aria-current'); thisObj.$playlist.eq(sourceIndex).addClass('able-current') - .children('button').attr('aria-current','true'); - + .children('button').attr('aria-current','true'); + // update Now Playing div if (thisObj.showNowPlaying === true) { if (typeof thisObj.$nowPlayingDiv !== 'undefined') { @@ -5355,56 +4608,48 @@ var AblePlayerInstances = []; // if thisObj.swappingSrc is true, media will autoplay when ready if (thisObj.initializing) { // this is the first track - user hasn't pressed play yet thisObj.swappingSrc = false; - } - else { + } else { if (thisObj.player === 'html5') { - if (!thisObj.loadingMedia) { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } - } - else if (thisObj.player === 'youtube') { - thisObj.okToPlay = true; + } else if (thisObj.player === 'youtube') { + thisObj.okToPlay = true; } } thisObj.initializing = false; - thisObj.playerCreated = true; // remains true until browser is refreshed - }); + thisObj.playerCreated = true; // remains true until browser is refreshed + }); }; AblePlayer.prototype.deletePlayer = function(context) { - // remove player components that need to be rebuilt - // after swapping media sources that have different durations - // or explicitly declared data-desc attributes + // remove player components that need to be rebuilt + // after swapping media sources that have different durations + // or explicitly declared data-desc attributes - // Context is one of the following: - // playlist - called from cuePlaylistItem() + // Context is one of the following: + // playlist - called from cuePlaylistItem() // swap-desc-html - called from swapDescription with this.player == 'html' - // swap-desc-youtube - called from swapDescription with this.player == 'youtube' - // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' + // swap-desc-youtube - called from swapDescription with this.player == 'youtube' + // swap-desc-vimeo - called from swapDescription with this.player == 'vimeo' - if (this.player === 'youtube' && this.youTubePlayer) { - this.youTubePlayer.destroy(); + if (this.player === 'youtube' && this.youTubePlayer) { + this.youTubePlayer.destroy(); } - if (this.player === 'vimeo' && this.vimeoPlayer) { - this.vimeoPlayer.destroy(); + if (this.player === 'vimeo' && this.vimeoPlayer) { + this.vimeoPlayer.destroy(); } - -/ TODO - Investigate: when is this needed? - // remove previous video's attributes and child elements from media element - this.$media.removeAttr('poster width height'); - this.$media.empty(); -*/ // Empty elements that will be rebuilt this.$controllerDiv.empty(); // this.$statusBarDiv.empty(); // this.$timer.empty(); this.$elapsedTimeContainer.empty().text('0:00'); // span.able-elapsedTime this.$durationContainer.empty(); // span.able-duration - + // Remove popup windows and modal dialogs; these too will be rebuilt if (this.$signWindow) { this.$signWindow.remove(); @@ -5413,125 +4658,81 @@ var AblePlayerInstances = []; this.$transcriptArea.remove(); } $('.able-modal-dialog').remove(); - - // Remove caption and description wrappers + + // Remove caption and description wrappers if (this.$captionsWrapper) { this.$captionsWrapper.remove(); } - if (this.$descDiv) { - this.$descDiv.remove(); + if (this.$descDiv) { + this.$descDiv.remove(); } - + // reset key variables this.hasCaptions = false; this.hasChapters = false; - this.hasDescTracks = false; + this.hasDescTracks = false; this.hasOpenDesc = false; - this.hasClosedDesc = false; + this.hasClosedDesc = false; this.captionsPopup = null; this.chaptersPopup = null; this.transcriptType = null; - this.playerDeleted = true; // will reset to false in recreatePlayer() + this.playerDeleted = true; // will reset to false in recreatePlayer() }; AblePlayer.prototype.getButtonTitle = function(control) { if (control === 'playpause') { - return this.tt.play; - } - else if (control === 'play') { - return this.tt.play; - } - else if (control === 'pause') { - return this.tt.pause; - } - else if (control === 'restart') { - return this.tt.restart; - } - else if (control === 'previous') { - return this.tt.prevTrack; - } - else if (control === 'next') { - return this.tt.nextTrack; - } - else if (control === 'rewind') { - return this.tt.rewind; - } - else if (control === 'forward') { - return this.tt.forward; - } - else if (control === 'captions') { + return this.translate( 'play', 'Play' ); + } else if (control === 'play') { + return this.translate( 'play', 'Play' ); + } else if (control === 'pause') { + return this.translate( 'pause', 'Pause' ); + } else if (control === 'restart') { + return this.translate( 'restart', 'Restart' ); + } else if (control === 'previous') { + return this.translate( 'prevTrack', 'Previous track' ); + } else if (control === 'next') { + return this.translate( 'nextTrack', 'Next track' ); + } else if (control === 'rewind') { + return this.translate( 'rewind', 'Rewind' ); + } else if (control === 'forward') { + return this.translate( 'forward', 'Forward' ); + } else if (control === 'captions') { if (this.captions.length > 1) { - return this.tt.captions; - } - else { - if (this.captionsOn) { - return this.tt.hideCaptions; - } - else { - return this.tt.showCaptions; - } - } - } - else if (control === 'descriptions') { - if (this.descOn) { - return this.tt.turnOffDescriptions; - } - else { - return this.tt.turnOnDescriptions; - } - } - else if (control === 'transcript') { - if (this.$transcriptDiv.is(':visible')) { - return this.tt.hideTranscript; - } - else { - return this.tt.showTranscript; - } - } - else if (control === 'chapters') { - return this.tt.chapters; - } - else if (control === 'sign') { - return this.tt.sign; - } - else if (control === 'volume') { - return this.tt.volume; - } - else if (control === 'faster') { - return this.tt.faster; - } - else if (control === 'slower') { - return this.tt.slower; - } - else if (control === 'preferences') { - return this.tt.preferences; - } - else if (control === 'help') { - // return this.tt.help; - } - else if (control === 'fullscreen') { - if (!this.fullscreen) { - return this.tt.enterFullscreen; - } - else { - return this.tt.exitFullscreen; - } - } - else { + return this.translate( 'captions', 'Captions' ); + } else { + return (this.captionsOn) ? this.translate( 'hideCaptions', 'Hide captions' ) : this.translate( 'showCaptions', 'Show captions' ); + } + } else if (control === 'descriptions') { + return (this.descOn) ? this.translate( 'turnOffDescriptions', 'Turn off descriptions' ) : this.translate( 'turnOnDescriptions', 'Turn on descriptions' ); + } else if (control === 'transcript') { + return (this.$transcriptDiv.is(':visible')) ? this.translate( 'hideTranscript', 'Hide transcript' ) : this.translate( 'showTranscript', 'Show transcript' ); + } else if (control === 'chapters') { + return this.translate( 'chapters', 'Chapters' ); + } else if (control === 'sign') { + return this.translate( 'sign', 'Sign language' ); + } else if (control === 'volume') { + return this.translate( 'volume', 'Volume' ); + } else if (control === 'faster') { + return this.translate( 'faster', 'Faster' ); + } else if (control === 'slower') { + return this.translate( 'slower', 'Slower' ); + } else if (control === 'preferences') { + return this.translate( 'preferences', 'Preferences' ); + } else if (control === 'fullscreen') { + return ( !this.fullscreen ) ? this.translate( 'enterFullScreen', 'Enter full screen' ) : this.translate( 'exitFullScreen', 'Exit full screen' ); + } else { // there should be no other controls, but just in case: // return the name of the control with first letter in upper case // ultimately will need to get a translated label from this.tt if (this.debug) { console.log('Found an untranslated label: ' + control); } - return control.charAt(0).toUpperCase() + control.slice(1); + return this.capitalizeFirstLetter( control ); } }; - - })(jQuery); /** @@ -5551,11 +4752,16 @@ var preProcessing = { * @returns {string} - The VTT content with processed tags. / transformCSSClasses: function (vttContent) { + // This function should only be passed one cue at a time. + // Throw an error if the string checked is more than 1000 characters. + if ( vttContent.length > 1000 ) { + throw new Error( "Input too long" ); + } return vttContent.replace( /<(v|c|b|i|u|lang|ruby)\.([\w\.]+)([^>])>/g, function (_, tag, cssClasses, otherAttrs) { - var classAttr = cssClasses.split(".").join(" "); - return "<" + tag + ' class="' + classAttr + '"' + otherAttrs + ">"; + var classAttr = cssClasses.replace(/\./g, " "); + return `<${tag} class="${classAttr}"${otherAttrs}>`; } ); }, @@ -5576,10 +4782,14 @@ var preProcessing = { }, /** - * Transforms <v> tags by adding a title attribute with the concatenated text and retaining other attributes. + * Transforms <v> tags by extracting any non-attribute text as a `title` attribute, + * retains existing attributes (except class), and preserves the class attribute if present. + * Example: <v John class="foo" data-x="y"> becomes <v title="John" data-x="y" class="foo"> + * + * @function * @memberof preProcessing - * @param {string} content - The content with processed <lang> tags. - * @returns {string} - The content with <v> tags transformed. + * @param {string} content - The string content containing <v> tags to process. + * @returns {string} The content with <v> tags transformed to include a title attribute and preserved attributes. / transformVTags: function (content) { return content.replace(/<v\s+([^>]?)>/g, function (_, tagAttributes) { @@ -5638,24 +4848,33 @@ var postProcessing = { return vttContent.replace( /<c class="([\w\s]+)">/g, function (_, classNames) { - var classes = classNames.split(" ").join("."); + var classes = classNames.replace(/ /g, "."); return "<c." + classes + ">"; } ); }, /** - * Post-processes <v> tags by converting class attributes to dot-separated class names. + * * Post-processes <v> tags by converting class attributes, no matter where found in the attribute order, to dot-separated class names. + * For example, <v class="foo bar" title="John"> becomes <v.foo.bar title="John">. + * Removes the class attribute and appends other attributes after the class names. + * + * @function * @memberof postProcessing * @param {string} vttContent - The VTT content to be processed. * @returns {string} - The VTT content with processed <v> tags. / postprocessVTag: function (vttContent) { return vttContent.replace( - /<v class="([\w\s]+)"([^>])>/g, - function (_, classNames, otherAttrs) { - var classes = classNames.split(" ").join("."); - return "<v." + classes + otherAttrs + ">"; + /<v([^>])class="([\w\s]+)"([^>])>/g, + function (_, beforeClass, classNames, afterClass) { + var classes = classNames.trim().split(/\s+/).join("."); + // Rebuild the tag: <v.{classes}{other attributes}> + // Remove class="..." from attributes + var attrs = (beforeClass + afterClass) + .replace(/\s*class="[\w\s]+"/, "") + .trim(); + return "<v." + classes + (attrs ? " " + attrs : "") + ">"; } ); }, @@ -5677,7 +4896,7 @@ var postProcessing = { }; /** - * Preprocesses, sanitizes and post-processes VTT content. + * Preprocesses, sanitizes and post-processes VTT content as well as other utility functions. * @namespace validate / var validate = { @@ -5708,8 +4927,9 @@ var validate = { var processedLangTags = postProcessing.postprocessLangTag(processedVTags); var arrowReplaced = processedLangTags.replace(/-->/g, "-->"); + var timestampTagReplaced = arrowReplaced.replace(/<([\d:.]+)>/g, '<$1>'); - var finalContent = arrowReplaced.replace( + var finalContent = timestampTagReplaced.replace( /<\/v>/g, function (match, offset) { return originalVttContent.indexOf(match, offset) !== -1 ? match : ""; @@ -5744,6 +4964,17 @@ var validate = { return validate.postProcessVttContent(sanitizedVttContent, vttContent); }, + // Utility validation functions + isProtocolSafe: function (url) { + //creates a new URL object for analysis to check if the protocol is http or https + //returns true if there is a match false otherwise + try { + const parsedUrl = new URL(url, window.location.origin); // Resolve relative URLs + return ["http:", "https:"].includes(parsedUrl.protocol); // Allow only HTTP and HTTPS + } catch (e) { + return false; // Invalid URL + } + }, }; // Export the object for use in other files @@ -5756,22 +4987,13 @@ if (typeof module !== "undefined" && module.exports) { // Loads files referenced in track elements, and performs appropriate setup. // For example, captions and text descriptions. // This will be called whenever the player is recreated. - // Added in v2.2.23: Also handles YouTube caption tracks AblePlayer.prototype.setupTracks = function () { - var thisObj, - deferred, - promise, - loadingPromises, - loadingPromise, - i, - tracks, - track, - kind; + var thisObj, deferred, promise, loadingPromises, loadingPromise, i, tracks, track, kind; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); loadingPromises = []; @@ -5793,20 +5015,17 @@ if (typeof module !== "undefined" && module.exports) { } for (i = 0; i < tracks.length; i++) { track = tracks[i]; - kind = track.kind; + kind = ( track.kind ) ? track.kind : 'subtitles'; if (!track.src) { if (thisObj.usingYouTubeCaptions || thisObj.usingVimeoCaptions) { // skip all the hullabaloo and go straight to setupCaptions thisObj.setupCaptions(track); - } else { - // Nothing to load! - // Skip this track; move on to next i } continue; } - var trackSrc = track.src; - loadingPromise = this.loadTextObject(track.src); // resolves with src, trackText + var trackSrc = track.src; + loadingPromise = this.loadTextObject(trackSrc); loadingPromises.push( loadingPromise.catch(function (src) { console.warn("Failed to load captions track from " + src); @@ -5814,35 +5033,31 @@ if (typeof module !== "undefined" && module.exports) { ); loadingPromise.then( (function (track, kind) { - var trackSrc = track.src; + trackSrc = track.src; var trackLang = track.language; var trackLabel = track.label; var trackDesc = track.desc; - return function (trackSrc, trackText) { - // these are the two vars returned from loadTextObject - - var trackContents = trackText; - var cues = thisObj.parseWebVTT(trackSrc, trackContents).cues; + return function (data) { + var cues = thisObj.parseWebVTT(data).cues; if (thisObj.hasVts) { - // setupVtsTracks() is in vts.js thisObj.setupVtsTracks( kind, trackLang, trackDesc, trackLabel, trackSrc, - trackContents + data.text ); } - if (kind === "captions" || kind === "subtitles") { + if (kind === 'captions' || kind === 'subtitles') { thisObj.setupCaptions(track, cues); - } else if (kind === "descriptions") { + } else if (kind === 'descriptions') { thisObj.setupDescriptions(track, cues); - } else if (kind === "chapters") { + } else if (kind === 'chapters') { thisObj.setupChapters(track, cues); - } else if (kind === "metadata") { - thisObj.setupMetadata(track, cues); + } else if (kind === 'metadata') { + thisObj.setupMetadata(cues); } }; })(track, kind) @@ -5868,30 +5083,16 @@ if (typeof module !== "undefined" && module.exports) { // cues - array with startTime, endTime, and payload // desc - Boolean, true if track includes a data-desc attribute - var thisObj, - deferred, - promise, - captionTracks, - altCaptionTracks, - trackLang, - trackLabel, - isDefault, - forDesc, - hasDefault, - hasTrackInDefLang, - trackFound, - i, - j, - capLabel, - inserted; + var thisObj, deferred, promise, trackLang, trackLabel, isDefault, forDesc, + hasDefault, hasTrackInDefLang, trackFound, i; thisObj = this; hasDefault = false; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.$tracks = this.$media.find("track"); + this.$tracks = this.$media.find('track'); this.tracks = []; // only includes tracks that do NOT have data-desc this.altTracks = []; // only includes tracks that DO have data-desc @@ -5908,31 +5109,30 @@ if (typeof module !== "undefined" && module.exports) { this.usingYouTubeCaptions = false; // create object from HTML5 tracks this.$tracks.each(function (index, element) { - if ($(this).attr("kind") === "captions") { + if ($(this).attr('kind') === 'captions') { thisObj.hasCaptionsTrack = true; - } else if ($(this).attr("kind") === "descriptions") { + } else if ($(this).attr('kind') === 'descriptions') { thisObj.hasClosedDesc = true; } // srcLang should always be included with <track>, but HTML5 spec doesn't require it // if not provided, assume track is the same language as the default player language - if ($(this).attr("srclang")) { - trackLang = $(this).attr("srclang"); + if ($(this).attr('srclang')) { + trackLang = $(this).attr('srclang'); } else { trackLang = thisObj.lang; } - if ($(this).attr("label")) { - trackLabel = $(this).attr("label"); + if ($(this).attr('label')) { + trackLabel = $(this).attr('label'); } else { trackLabel = thisObj.getLanguageName(trackLang); } - if (typeof $(this).attr("default") !== "undefined" && !hasDefault) { + if (typeof $(this).attr('default') !== 'undefined' && !hasDefault) { isDefault = true; hasDefault = true; } else if (trackLang === thisObj.lang) { // this track is in the default lang of the player - // save this for later // if there is no other default track specified // this will be the default hasTrackInDefLang = true; @@ -5953,8 +5153,8 @@ if (typeof module !== "undefined" && module.exports) { } if (forDesc) { thisObj.altTracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -5962,8 +5162,8 @@ if (typeof module !== "undefined" && module.exports) { }); } else { thisObj.tracks.push({ - kind: $(this).attr("kind"), - src: $(this).attr("src"), + kind: $(this).attr('kind'), + src: $(this).attr('src'), language: trackLang, label: trackLabel, def: isDefault, @@ -5979,16 +5179,16 @@ if (typeof module !== "undefined" && module.exports) { trackFound = false; i = 0; while (i < thisObj.tracks.length && !trackFound) { - if (thisObj.tracks[i]["language"] === thisObj.lang) { - thisObj.tracks[i]["def"] = true; + if (thisObj.tracks[i]['language'] === thisObj.lang) { + thisObj.tracks[i]['def'] = true; trackFound = true; } i++; } } else { // use the first track - thisObj.tracks[0]["def"] = true; - thisObj.captionLang = thisObj.tracks[0]["language"]; + thisObj.tracks[0]['def'] = true; + thisObj.captionLang = thisObj.tracks[0]['language']; } } // Remove 'default' attribute from all <track> elements @@ -6002,8 +5202,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.$tracks.length || !this.hasCaptionsTrack) { // this media has no track elements // if this is a youtube or vimeo player, check there for captions/subtitles - if (this.player === "youtube") { - this.getYouTubeCaptionTracks(this.youTubeId).then(function () { + if (this.player === 'youtube') { + this.getYouTubeCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingYouTubeCaptions = true; if (thisObj.$captionsWrapper) { @@ -6012,7 +5212,7 @@ if (typeof module !== "undefined" && module.exports) { } deferred.resolve(); }); - } else if (this.player === "vimeo") { + } else if (this.player === 'vimeo') { this.getVimeoCaptionTracks().then(function () { if (thisObj.hasCaptions) { thisObj.usingVimeoCaptions = true; @@ -6040,7 +5240,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setupCaptions = function (track, cues) { // Setup player for display of captions (one track at a time) - var thisObj, captions, inserted, i, capLabel; + var inserted, i, capLabel; // Insert track into captions array // in its proper alphabetical sequence by label @@ -6106,8 +5306,8 @@ if (typeof module !== "undefined" && module.exports) { this.captionsOn = false; } } - if (this.mediaType === "audio" && this.captionsOn) { - this.$captionsContainer.removeClass("captions-off"); + if (this.mediaType === 'audio' && this.captionsOn) { + this.$captionsContainer.removeClass('captions-off'); } if ( @@ -6117,17 +5317,17 @@ if (typeof module !== "undefined" && module.exports) { ) { // captionsWrapper either doesn't exist, or exists in an orphaned state // Either way, it needs to be rebuilt... - this.$captionsDiv = $("<div>", { + this.$captionsDiv = $('<div>', { class: "able-captions", }); - this.$captionsWrapper = $("<div>", { - class: "able-captions-wrapper", - "aria-hidden": "true", + this.$captionsWrapper = $('<div>', { + class: 'able-captions-wrapper', + 'aria-hidden': 'true', }).hide(); - if (this.prefCaptionsPosition === "below") { - this.$captionsWrapper.addClass("able-captions-below"); + if (this.prefCaptionsPosition === 'below') { + this.$captionsWrapper.addClass('able-captions-below'); } else { - this.$captionsWrapper.addClass("able-captions-overlay"); + this.$captionsWrapper.addClass('able-captions-overlay'); } this.$captionsWrapper.append(this.$captionsDiv); this.$captionsContainer.append(this.$captionsWrapper); @@ -6158,19 +5358,19 @@ if (typeof module !== "undefined" && module.exports) { }); }; - AblePlayer.prototype.setupMetadata = function (track, cues, trackDesc) { - if (this.metaType === "text") { + AblePlayer.prototype.setupMetadata = function (cues) { + if (this.metaType === 'text') { // Metadata is only supported if data-meta-div is provided // The player does not display metadata internally if (this.metaDiv) { - if ($("#" + this.metaDiv)) { + if ($('#' + this.metaDiv)) { // container exists - this.$metaDiv = $("#" + this.metaDiv); + this.$metaDiv = $('#' + this.metaDiv); this.hasMeta = true; this.meta = cues; } } - } else if (this.metaType === "selector") { + } else if (this.metaType === 'selector') { this.hasMeta = true; this.visibleSelectors = []; this.meta = cues; @@ -6187,76 +5387,76 @@ if (typeof module !== "undefined" && module.exports) { / var deferred, promise, thisObj, $tempDiv; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; // create a temp div for holding data - $tempDiv = $("<div>", { - style: "display:none", + $tempDiv = $('<div>', { + style: 'display:none', }); // Fetch the content manually so it can be sanitized - $.ajax({ - url: src, - dataType: "text", - success: function (data) { - // Sanitize the fetched content - var sanitizedTrackText = validate.sanitizeVttContent(data); - - // Load the sanitized content into the $tempDiv - $tempDiv.html(sanitizedTrackText); - - // Resolve the promise with the sanitized content - deferred.resolve(src, sanitizedTrackText); - - $tempDiv.remove(); - }, - error: function (req, status, error) { - if (thisObj.debug) { - console.log("error reading file " + src + ": " + status); - } - deferred.reject(src); - $tempDiv.remove(); - }, - }); + fetch(src) + .then( response => { + + return response.text(); + }) + .then( vtt => { + // Split the input on double line breaks to handle each cue individually. + var preParsed = vtt.split(/\r?\n\s\r?\n/); + var lines = '', line; + + preParsed.forEach((l) => { + // Sanitize each line. + line = validate.sanitizeVttContent(l); + lines += line + "\n\n"; + }); + // Load the sanitized content into the $tempDiv + $tempDiv.html(lines); + // Resolve the promise with the sanitized content + let data = { 'src': src, 'text': lines }; + deferred.resolve(data); + $tempDiv.remove(); + }) + .catch( error => { + if (thisObj.debug) { + console.log( "error reading file " + src + ": " + error ); + } + deferred.reject(src); + $tempDiv.remove(); + }); return promise; }; })(jQuery); - (function ($) { + AblePlayer.prototype.initYouTubePlayer = function () { - var thisObj, deferred, promise, youTubeId, googleApiPromise, json; + var thisObj, deferred, promise, youTubeId; thisObj = this; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - this.youTubePlayerReady = false; + this.youTubePlayerReady = false; // if a described version is available && user prefers desription // init player using the described version - if (this.youTubeDescId && this.prefDesc) { - youTubeId = this.youTubeDescId; - } - else { - youTubeId = this.youTubeId; - } + youTubeId = (this.youTubeDescId && this.prefDesc) ? this.youTubeDescId : this.youTubeId; + this.activeYouTubeId = youTubeId; if (AblePlayer.youTubeIframeAPIReady) { // Script already loaded and ready. thisObj.finalizeYoutubeInit().then(function() { deferred.resolve(); }); - } - else { + } else { // Has another player already started loading the script? If so, abort... if (!AblePlayer.loadingYouTubeIframeAPI) { - $.getScript('https://www.youtube.com/iframe_api').fail(function () { - deferred.fail(); + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + console.log( 'YouTube API loaded' ); }); } @@ -6273,71 +5473,54 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.finalizeYoutubeInit = function () { // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - var deferred, promise, thisObj, containerId, ccLoadPolicy, videoDimensions, autoplay; - - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); - thisObj = this; - containerId = this.mediaId + '_youtube'; this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // NOTE: Tried the following in place of the above in January 2016 - // because in some cases two videos were being added to the DOM - // However, once v2.2.23 was fairly stable, unable to reproduce that problem - // so maybe it's not an issue. This is preserved here temporarily, just in case it's needed... - // thisObj.$mediaContainer.html($('<div>').attr('id', containerId)); // cc_load_policy: // 0 - show captions depending on user's preference on YouTube // 1 - show captions by default, even if the user has turned them off - // IMPORTANT: This must* be set to 1 or some browsers - // fail to load any texttracks (observed in Chrome, not in Firefox) + // IMPORTANT: This must be set to 1 or some browsers + // fail to load any text tracks (observed in Chrome, not in Firefox) ccLoadPolicy = 1; - - if (this.okToPlay) { - autoplay = 1; - } - else { - autoplay = 0; - } + autoplay = (this.okToPlay) ? 1 : 0; // Documentation https://developers.google.com/youtube/player_parameters - if (typeof this.captionLang == 'undefined') { + if (typeof this.captionLang == 'undefined') { // init using the default player lang - this.captionLang = this.lang; + this.captionLang = this.lang; } this.youTubePlayer = new YT.Player(containerId, { videoId: this.activeYouTubeId, host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', playerVars: { autoplay: autoplay, - enablejsapi: 1, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: ccLoadPolicy, + controls: 0, // no controls, using our own disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, playsinline: this.playsInline, - start: this.startTime, - controls: 0, // no controls, using our own - cc_load_policy: ccLoadPolicy, - cc_lang_pref: this.captionLang, // set the caption language - hl: this.lang, // set the UI language to match Able Player - modestbranding: 1, // no YouTube logo in controller rel: 0, // when video ends, show only related videos from same channel (1 shows any) - iv_load_policy: 3 // do not show video annotations + start: this.startTime }, events: { onReady: function () { - thisObj.youTubePlayerReady = true; - if (!thisObj.playerWidth || !thisObj.playerHeight) { + thisObj.youTubePlayerReady = true; + if (!thisObj.playerWidth || !thisObj.playerHeight) { thisObj.getYouTubeDimensions(); } - if (thisObj.playerWidth && thisObj.playerHeight) { + if (thisObj.playerWidth && thisObj.playerHeight) { thisObj.youTubePlayer.setSize(thisObj.playerWidth,thisObj.playerHeight); - thisObj.$ableWrapper.css({ - 'width': thisObj.playerWidth + 'px' - }); } if (thisObj.swappingSrc) { // swap is now complete @@ -6352,30 +5535,34 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.userClickedPlaylist) { thisObj.userClickedPlaylist = false; // reset } - if (thisObj.recreatingPlayer) { + if (thisObj.recreatingPlayer) { thisObj.recreatingPlayer = false; // reset } deferred.resolve(); }, onError: function (x) { - deferred.fail(); + deferred.reject(); }, - onStateChange: function (x) { + onStateChange: function (x) { thisObj.getPlayerState().then(function(playerState) { // values of playerState: 'playing','paused','buffering','ended' if (playerState === 'playing') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.play(true); + } thisObj.playing = true; thisObj.startedPlaying = true; thisObj.paused = false; - } - else if (playerState == 'ended') { + } else if (playerState == 'ended') { thisObj.onMediaComplete(); - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } if (thisObj.stoppingYouTube && playerState === 'paused') { + if (thisObj.hasSignLanguage && thisObj.signVideo) { + thisObj.signVideo.pause(true); + } if (typeof thisObj.$posterImg !== 'undefined') { thisObj.$posterImg.show(); } @@ -6386,13 +5573,17 @@ if (typeof module !== "undefined" && module.exports) { } }); // If caption tracks are hosted locally, but are also available on YouTube, - // we need to turn them off on YouTube or there will be redundant captions - // This is the most reliable event on which to unload the caption module - if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { - if (thisObj.youTubePlayer.getOptions('captions')) { + // we need to turn them off on YouTube or there will be redundant captions + // This is the most reliable event on which to unload the caption module + if (thisObj.player === 'youtube' && !thisObj.usingYouTubeCaptions) { + if (thisObj.youTubePlayer.getOptions('captions')) { thisObj.youTubePlayer.unloadModule('captions'); } - } + } + }, + onApiChange: function() { + // getDuration() can be fetched during API change event. + thisObj.duration = thisObj.youTubePlayer.getDuration(); }, onPlaybackQualityChange: function () { // do something @@ -6403,85 +5594,73 @@ if (typeof module !== "undefined" && module.exports) { // remove the media element, since YouTube replaces that with its own element in an iframe // this is handled differently for playlists. See buildplayer.js > cuePlaylistItem() this.$media.remove(); - } + } return promise; }; AblePlayer.prototype.getYouTubeDimensions = function (youTubeContainerId) { - // The YouTube iframe API does not have a getSize() of equivalent method - // so, need to get dimensions from YouTube's iframe - - var $iframe, width, height; + // The YouTube iframe API does not have a getSize() of equivalent method + // so, need to get dimensions from YouTube's iframe + var $iframe, width, height; - $iframe = this.$ableWrapper.find('iframe'); + $iframe = this.$ableWrapper.find('iframe'); if (typeof $iframe !== 'undefined') { - if ($iframe.prop('width')) { - width = $iframe.prop('width'); - if ($iframe.prop('height')) { + if ($iframe.prop('width')) { + width = $iframe.prop('width'); + if ($iframe.prop('height')) { height = $iframe.prop('height'); - this.resizePlayer(width,height); + this.resizePlayer(width,height); } } } }; - AblePlayer.prototype.getYouTubeCaptionTracks = function (youTubeId) { - - // get data via YouTube IFrame Player API, and push data to this.tracks & this.captions - // NOTE: Caption tracks are not available through the IFrame Player API - // until AFTER the video has started playing. - // Therefore, this function plays the video briefly in order to load the captions module - // then stops the video and collects the data needed to build the cc menu - // This is stupid, but seemingly unavoidable. - // Caption tracks could be obtained through the YouTube Data API - // but this required authors to have a Google API key, - // which would complicate Able Player installation + /** + * Get data from the YouTube iFrame API. Pushes data into `this.tracks` and `this.captions`. + * Initiates play to trigger loading the captions module, then stops and collects data. + * + * @returns {Promise} promise + / + AblePlayer.prototype.getYouTubeCaptionTracks = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - - var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack; + var thisObj, ytTracks, i, trackLang, trackLabel, isDefaultTrack, apiTriggered = false; thisObj = this; - - if (!this.youTubePlayer.getOption('captions','tracklist')) { - - // no tracks were found, probably because the captions module hasn't loaded - // play video briefly (required in order to load the captions module) - // and after the apiChange event is triggered, try again to retreive tracks - this.youTubePlayer.addEventListener('onApiChange',function(x) { - - // getDuration() also requires video to play briefly - // so, let's set that while we're here - thisObj.duration = thisObj.youTubePlayer.getDuration(); - - if (thisObj.loadingYouTubeCaptions) { - // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once - ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); - if (!thisObj.okToPlay) { - // Don't stopVideo() - that cancels loading - // Just pause - // No need to seekTo(0) - so little time has passed it isn't noticeable to the user - thisObj.youTubePlayer.pauseVideo(); - } - if (ytTracks && ytTracks.length) { + if (!this.youTubePlayer.getOption('captions','tracklist') ) { + // no tracks were found, probably because the captions module hasn't loaded + // play video briefly (required to load the captions module) + // and after the apiChange event is triggered, try again to retrieve tracks + this.youTubePlayer.addEventListener('onApiChange',function() { + apiTriggered = true; + // getDuration() also requires video to play briefly + // so, let's set that while we're here + thisObj.duration = thisObj.youTubePlayer.getDuration(); + + if (thisObj.loadingYouTubeCaptions) { + // loadingYouTubeCaptions is a stopgap in case onApiChange is called more than once + ytTracks = thisObj.youTubePlayer.getOption('captions','tracklist'); + if ( ! thisObj.okToPlay ) { + // Don't stopVideo() - that cancels loading, just pause. + // No need to seekTo(0) - the time passed isn't noticeable to the user + thisObj.youTubePlayer.pauseVideo(); + } + if (ytTracks && ytTracks.length) { // Step through ytTracks and add them to global tracks array - // Note: Unlike YouTube Data API, the IFrame Player API only returns - // tracks that are published, and does NOT include ASR captions - // So, no additional filtering is required + // Note: Unlike YouTube Data API, the IFrame Player API only returns + // tracks that are published, and does NOT include ASR captions + // So, no additional filtering is required for (i=0; i < ytTracks.length; i++) { - trackLang = ytTracks[i].languageCode; + trackLang = ytTracks[i].languageCode; trackLabel = ytTracks[i].languageName; // displayName and languageName seem to always have the same value - isDefaultTrack = false; - if (typeof thisObj.captionLang !== 'undefined') { - if (trackLang === thisObj.captionLang) { - isDefaultTrack = true; - } - } - else if (typeof thisObj.lang !== 'undefined') { + isDefaultTrack = false; + if (typeof thisObj.captionLang !== 'undefined' && (trackLang === thisObj.captionLang) ) { + isDefaultTrack = true; + } else if (typeof thisObj.lang !== 'undefined') { if (trackLang === thisObj.lang) { - isDefaultTrack = true; + isDefaultTrack = true; } } thisObj.tracks.push({ @@ -6495,103 +5674,97 @@ if (typeof module !== "undefined" && module.exports) { 'label': trackLabel, 'def': isDefaultTrack, 'cues': null - }); + }); } thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original - thisObj.setupPopups('captions'); - } - else { - // there are no YouTube captions - thisObj.usingYouTubeCaptions = false; + thisObj.setupPopups('captions'); + } else { + // there are no YouTube captions + thisObj.usingYouTubeCaptions = false; thisObj.hasCaptions = false; } - thisObj.loadingYouTubeCaptions = false; - if (thisObj.okToPlay) { + thisObj.loadingYouTubeCaptions = false; + if (thisObj.okToPlay) { thisObj.youTubePlayer.playVideo(); } } - if (thisObj.captionLangPending) { - // user selected a new caption language prior to playback starting - // set it now + if (thisObj.captionLangPending) { + // user selected a new caption language prior to playback starting + // set it now thisObj.youTubePlayer.setOption('captions', 'track', {'languageCode': thisObj.captionLangPending}); - thisObj.captionLangPending = null; + thisObj.captionLangPending = null; } - if (typeof thisObj.prefCaptionsSize !== 'undefined') { - // set the default caption size - // this doesn't work until the captions module is loaded + if (typeof thisObj.prefCaptionsSize !== 'undefined') { + // set the default caption size + // this doesn't work until the captions module is loaded thisObj.youTubePlayer.setOption('captions','fontSize',thisObj.translatePrefs('size',thisObj.prefCaptionsSize,'youtube')); } deferred.resolve(); }); - // Trigger the above event listener by briefly playing the video - this.loadingYouTubeCaptions = true; - this.youTubePlayer.playVideo(); + // Trigger the above event listener by briefly playing the video + this.loadingYouTubeCaptions = true; + this.youTubePlayer.playVideo(); + // If onApiChange has not been triggered, the captions module is not loading. + setTimeout(() => { + if ( ! apiTriggered ) { + setTimeout(() => { + // If a second passes without loading captions, assume there are none. + thisObj.youTubePlayer.pauseVideo(); + deferred.resolve(); + }, 500); + } + },500); } return promise; }; - AblePlayer.prototype.getYouTubeTimedTextUrl = function (youTubeId, trackName, trackLang) { - - // return URL for retrieving WebVTT source via YouTube's timedtext API - // Note: This API seems to be undocumented, and could break anytime - // UPDATE: Google removed this API on November 10, 2021 - // This function is no longer called, but is preserved here for reference - var url = 'https://www.youtube.com/api/timedtext?fmt=vtt'; - url += '&v=' + youTubeId; - url += '&lang=' + trackLang; - // if track has a value in the name field, it's required* in the URL - if (trackName !== '') { - url += '&name=' + trackName; - } - return url; - }; - AblePlayer.prototype.getYouTubePosterUrl = function (youTubeId, width) { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 - - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; + // return a URL for retrieving a YouTube poster image + // supported values of width: 120, 320, 480, 640, 1280, 1920. + var url = 'https://img.youtube.com/vi/' + youTubeId; + if (width == '120') { + // default (small) thumbnail, 120 x 90 + return url + '/default.jpg'; + } else if (width == '320') { + // medium quality thumbnail, 320 x 180 + return url + '/mqdefault.jpg'; + } else if (width == '480') { + // high quality thumbnail, 480 x 360 + return url + '/hqdefault.jpg'; + } else if (width == '640') { + // standard definition poster image, 640 x 480 + return url + '/sddefault.jpg'; + } else if (width == '1280') { + // standard definition poster image, 640 x 480 + return url + '/hq720.jpg'; + } else if ( width == '1920' ) { + // standard definition poster image, 640 x 480 + return url + '/maxresdefault.jpg'; + } + return false; }; AblePlayer.prototype.getYouTubeId = function (url) { // return a YouTube ID, extracted from a full YouTube URL - // Supported URL patterns (with http or https): - // https://youtu.be/xxx - // https://www.youtube.com/watch?v=xxx - // https://www.youtube.com/embed/xxx - - // in all supported patterns, the id is the last 11 characters - var idStartPos, id; - - if (url.indexOf('youtu') !== -1) { - // this is a full Youtube URL - url = url.trim(); - idStartPos = url.length - 11; - id = url.substring(idStartPos); - return id; - } - else { - return url; + // Supported URL patterns: + // http|s://youtu.be/xxx + // http|s://www.youtube.com/watch?v=xxx + // http|s://www.youtube.com/embed/xxx + + // in all supported patterns, the id is the last 11 characters + var idStartPos, id; + + if (url.indexOf('youtu') !== -1) { + // this is a full Youtube URL + url = url.trim(); + idStartPos = url.length - 11; + id = url.substring(idStartPos); + return id; + } else { + return url; } }; @@ -6601,13 +5774,12 @@ if (typeof module !== "undefined" && module.exports) { // Events: - // startTracking(event, position) - // tracking(event, position) - // stopTracking(event, position) + // - startTracking(event, position) + // - tracking(event, position) + // - stopTracking(event, position) - window. AccessibleSlider = function(mediaType, div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { + window.AccessibleSlider = function(div, orientation, length, min, max, bigInterval, label, className, trackingMedia, initialState) { - // mediaType is either 'audio' or 'video' // div is the host element around which the slider will be built // orientation is either 'horizontal' or 'vertical' // length is the width or height of the slider, depending on orientation @@ -6649,8 +5821,7 @@ if (typeof module !== "undefined" && module.exports) { if (initialState === 'visible') { this.seekHead.attr('tabindex', '0'); - } - else { + } else { this.seekHead.attr('tabindex', '-1'); } // Since head is focusable, it gets the aria roles/titles. @@ -6689,8 +5860,7 @@ if (typeof module !== "undefined" && module.exports) { if (orientation === 'horizontal') { this.wrapperDiv.width(length); this.loadedDiv.width(0); - } - else { + } else { this.wrapperDiv.height(length); this.loadedDiv.height(0); } @@ -6714,26 +5884,22 @@ if (typeof module !== "undefined" && module.exports) { if (e.type === 'mouseenter' || e.type === 'focus') { thisObj.overHead = true; - } - else if (e.type === 'mouseleave' || e.type === 'blur') { + } else if (e.type === 'mouseleave' || e.type === 'blur') { thisObj.overHead = false; if (!thisObj.overBody && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' || e.type === 'touchmove') { + } else if (e.type === 'mousemove' || e.type === 'touchmove') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' || e.type === 'touchstart') { + } else if (e.type === 'mousedown' || e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(thisObj.seekHead.offset() + (thisObj.seekHead.width() / 2))); if (!thisObj.bodyDiv.is(':focus')) { thisObj.bodyDiv.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } @@ -6747,7 +5913,12 @@ if (typeof module !== "undefined" && module.exports) { this.bodyDiv.on( 'mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend', function (e) { + // Don't trigger move on right click. + if ( e.button == 2 && e.type == 'mousedown' ) { + return; + } coords = thisObj.pointerEventToXY(e); + let keyPressed = e.key; if (e.type === 'mouseenter') { thisObj.overBody = true; @@ -6755,15 +5926,13 @@ if (typeof module !== "undefined" && module.exports) { x: coords.x, y: coords.y }; - } - else if (e.type === 'mouseleave') { + } else if (e.type === 'mouseleave') { thisObj.overBody = false; thisObj.overBodyMousePos = null; if (!thisObj.overHead && thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'mousemove' || e.type === 'touchmove') { + } else if (e.type === 'mousemove' || e.type === 'touchmove') { thisObj.overBodyMousePos = { x: coords.x, y: coords.y @@ -6771,52 +5940,36 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.trackHeadAtPageX(coords.x); } - } - else if (e.type === 'mousedown' || e.type === 'touchstart') { + } else if (e.type === 'mousedown' || e.type === 'touchstart') { thisObj.startTracking('mouse', thisObj.pageXToPosition(coords.x)); thisObj.trackHeadAtPageX(coords.x); if (!thisObj.seekHead.is(':focus')) { thisObj.seekHead.focus(); } e.preventDefault(); - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.tracking && thisObj.trackDevice === 'mouse') { thisObj.stopTracking(thisObj.pageXToPosition(coords.x)); } - } - else if (e.type === 'keydown') { - // Home - if (e.which === 36) { + } else if (e.type === 'keydown') { + if (e.key === 'Home') { thisObj.trackImmediatelyTo(0); - } - // End - else if (e.which === 35) { + } else if (e.key === 'End') { thisObj.trackImmediatelyTo(thisObj.duration); - } - // Left arrow or down arrow - else if (e.which === 37 || e.which === 40) { + } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { thisObj.arrowKeyDown(-1); - } - // Right arrow or up arrow - else if (e.which === 39 || e.which === 38) { + } else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { thisObj.arrowKeyDown(1); - } - // Page up - else if (e.which === 33 && bigInterval > 0) { + } else if (e.key === 'PageUp' && bigInterval > 0) { thisObj.arrowKeyDown(bigInterval); - } - // Page down - else if (e.which === 34 && bigInterval > 0) { + } else if (e.key === 'PageDown' && bigInterval > 0) { thisObj.arrowKeyDown(-bigInterval); - } - else { + } else { return; } e.preventDefault(); - } - else if (e.type === 'keyup') { - if (e.which >= 33 && e.which <= 40) { + } else if (e.type === 'keyup') { + if ( keyPressed === e.key ) { if (thisObj.tracking && thisObj.trackDevice === 'keyboard') { thisObj.stopTracking(thisObj.keyTrackPosition); } @@ -6838,27 +5991,7 @@ if (typeof module !== "undefined" && module.exports) { this.nextStep = 2; } this.trackHeadAtPosition(this.keyTrackPosition); - } - else { - this.nextStep = 1; - this.inertiaCount = 0; - this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); - this.startTracking('keyboard', this.keyTrackPosition); - this.trackHeadAtPosition(this.keyTrackPosition); - } - }; -/* - AccessibleSlider.prototype.pageUp = function (multiplier) { - if (this.tracking && this.trackDevice === 'keyboard') { - this.keyTrackPosition = this.boundPos(this.keyTrackPosition + (this.nextStep * multiplier)); - this.inertiaCount += 1; - if (this.inertiaCount === 20) { - this.inertiaCount = 0; - this.nextStep = 2; - } - this.trackHeadAtPosition(this.keyTrackPosition); - } - else { + } else { this.nextStep = 1; this.inertiaCount = 0; this.keyTrackPosition = this.boundPos(this.position + (this.nextStep multiplier)); @@ -6866,7 +5999,7 @@ if (typeof module !== "undefined" && module.exports) { this.trackHeadAtPosition(this.keyTrackPosition); } }; -/ + AccessibleSlider.prototype.pageXToPosition = function (pageX) { var offset = pageX - this.bodyDiv.offset().left; var position = this.duration (offset / this.bodyDiv.width()); @@ -6921,7 +6054,7 @@ if (typeof module !== "undefined" && module.exports) { this.updateAriaValues(position, updateLive); } - // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. + // TODO: Native HTML5 can have several buffered segments, and this actually happens quite often. Change this to display them all. AccessibleSlider.prototype.setBuffered = function (ratio) { if (!isNaN(ratio)) { this.buffered = ratio; @@ -6984,14 +6117,12 @@ if (typeof module !== "undefined" && module.exports) { ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else if (pMinutes > 0) { + } else if (pMinutes > 0) { descriptionText = pMinutes + ' ' + pMinuteWord + ', ' + pSeconds + ' ' + pSecondWord; - } - else { + } else { descriptionText = pSeconds + ' ' + pSecondWord; } @@ -7023,18 +6154,15 @@ if (typeof module !== "undefined" && module.exports) { this.timeTooltip.show(); if (this.tracking) { this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)); - } - else { + } else { this.timeTooltip.text(this.positionToStr(this.position)); } this.setTooltipPosition(this.seekHead.position().left + (this.seekHead.width() / 2)); - } - else if (this.overBody && this.overBodyMousePos) { + } else if (this.overBody && this.overBodyMousePos) { this.timeTooltip.show(); this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))); this.setTooltipPosition(this.overBodyMousePos.x - this.bodyDiv.offset().left); - } - else { + } else { clearTimeout(this.timeTooltipTimeoutId); var _this = this; @@ -7054,7 +6182,7 @@ if (typeof module !== "undefined" && module.exports) { AccessibleSlider.prototype.setTooltipPosition = function (x) { this.timeTooltip.css({ left: x - (this.timeTooltip.width() / 2) - 10, - bottom: this.seekHead.height() + 10 + bottom: this.seekHead.height() }); }; @@ -7072,8 +6200,7 @@ if (typeof module !== "undefined" && module.exports) { dMinutes = '0' + dMinutes; } return dHours + ':' + dMinutes + ':' + dSeconds; - } - else { + } else { return dMinutes + ':' + dSeconds; } }; @@ -7088,8 +6215,7 @@ if (typeof module !== "undefined" && module.exports) { var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; out.x = touch.pageX; out.y = touch.pageY; - } - else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') { + } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') { out.x = e.pageX; out.y = e.pageY; } @@ -7102,19 +6228,18 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addVolumeSlider = function($div) { - // Prior to v4.4.64, we were using a custom-build vertical volunme slider - // Changed to input type="range" because it's standard and gaining more widespread support - // including screen reader support - // TODO: Improve presentation of vertical slider. That requires some CSS finesse. + // Prior to v4.4.64, we were using a custom-build vertical volunme slider + // Changed to input type="range" because it's standard and gaining more widespread support + // including screen reader support + // TODO: Improve presentation of vertical slider. That requires some CSS finesse. - var thisObj, volumeSliderId, volumeHelpId, volumePct, tickLabelsId, $tickLabels, i, $tickOption, tickLabel; + var thisObj, volumeSliderId, volumeHelpId, volumePct, volumeLabel, volumeHeight; thisObj = this; // define a few variables volumeSliderId = this.mediaId + '-volume-slider'; volumeHelpId = this.mediaId + '-volume-help'; - tickLabelsId = this.mediaId + '-volume-tick-labels'; this.$volumeSlider = $('<div>',{ 'id': volumeSliderId, @@ -7125,15 +6250,14 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-tooltip', 'role': 'tooltip' }).hide(); - this.$volumeRange = $('<input>',{ + this.$volumeRange = $('<input>',{ 'type': 'range', 'min': '0', 'max': '10', 'step': '1', - 'orient': 'vertical', // non-standard, but required for Firefox - 'aria-label': this.tt.volumeUpDown, + 'orient': 'vertical', // non-standard, but required for Firefox + 'aria-label': this.translate( 'volumeUpDown', 'Volume up down' ), 'value': this.volume - // 'list': tickLabelsId // Uncomment this to use tickLabels (see note below) }); volumePct = parseInt(thisObj.volume) / 10 * 100; this.$volumeHelp = $('<div>',{ @@ -7141,30 +6265,11 @@ if (typeof module !== "undefined" && module.exports) { 'class': 'able-volume-help', 'aria-live': 'polite' }).text(volumePct + '%'); - this.$volumeButton.attr({ - 'aria-describedby': volumeHelpId - }); - $tickLabels = $('<datalist>',{ - 'id': tickLabelsId - }); - for (i = 0; i <= 10; i++) { - if (i === 0) { - tickLabel = this.tt.mute; - } - else { - tickLabel = (i * 10) + '%'; - } - $tickOption = $('<option>',{ - 'value': i, - 'label': tickLabel - }) - $tickLabels.append($tickOption); - } + volumeLabel = this.$volumeButton.attr( 'aria-label' ); + this.$volumeButton.attr( 'aria-label', volumeLabel + ' ' + volumePct + '%'); this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp); - // To add $tickLabels, use the following line of code to replace the one above - // and uncommnet the 'list' property in the definition of this.$volumeRange above - // As of Nov 2022, this feature is not supported by any screen reader - // this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp,$tickLabels); + volumeHeight = this.$volumeButton.parents( '.able-control-row' )[0]; + this.$volumeSlider.css( 'bottom', volumeHeight.offsetHeight ); $div.append(this.$volumeSlider); @@ -7176,23 +6281,20 @@ if (typeof module !== "undefined" && module.exports) { this.$volumeRange.on('input',function (e) { thisObj.handleVolumeChange($(this).val()); }); - + this.$volumeRange.on('keydown',function (e) { - // Escape key or Enter key or Tab key - if (e.which === 27 || e.which === 13 || e.which === 9) { + if (e.key === 'Escape' || e.key === 'Tab' || e.key === 'Enter') { // close popup if (thisObj.$volumeSlider.is(':visible')) { thisObj.closingVolume = true; // stopgap thisObj.hideVolumePopup(); - } - else { + } else { if (!thisObj.closingVolume) { thisObj.showVolumePopup(); } } - } - else { + } else { return; } }); @@ -7204,93 +6306,61 @@ if (typeof module !== "undefined" && module.exports) { var volumePct; volumePct = (volume/10) * 100; - // Update help text - if (this.$volumeHelp) { - this.$volumeHelp.text(volumePct + '%'); + // Update help text + if (this.$volumeHelp) { + this.$volumeHelp.text(volumePct + '%'); } - // Update the default value of the volume slider input field - // This doesn't seem to be necessary; browsers remember the previous setting during a session - // but this is a fallback in case they don't - this.$volumeRange.attr('value',volume); + // Update the default value of the volume slider input field + // This doesn't seem to be necessary; browsers remember the previous setting during a session + // but this is a fallback in case they don't + this.$volumeRange.attr('value',volume); }; AblePlayer.prototype.refreshVolumeButton = function(volume) { - var volumeName, volumePct, volumeLabel, volumeIconClass, volumeImg, newSvgData; + var volumeName, volumePct, volumeLabel; volumeName = this.getVolumeName(volume); volumePct = (volume/10) * 100; - volumeLabel = this.tt.volume + ' ' + volumePct + '%'; + volumeLabel = this.translate( 'volume', 'Volume' ) + ' ' + volumePct + '%'; - if (this.iconType === 'font') { - volumeIconClass = 'icon-volume-' + volumeName; - this.$volumeButton.find('span').first().removeClass().addClass(volumeIconClass); - this.$volumeButton.find('span.able-clipped').text(volumeLabel); - } - else if (this.iconType === 'image') { - volumeImg = this.imgPath + 'volume-' + volumeName + '.png'; - this.$volumeButton.find('img').attr('src',volumeImg); - } - else if (this.iconType === 'svg') { - if (volumeName !== 'mute') { - volumeName = 'volume-' + volumeName; - } - newSvgData = this.getSvgData(volumeName); - this.$volumeButton.find('svg').attr('viewBox',newSvgData[0]); - this.$volumeButton.find('path').attr('d',newSvgData[1]); - } + this.getIcon( this.$volumeButton, 'volume-' + volumeName ); + this.$volumeButton.attr( 'aria-label', volumeLabel ); }; AblePlayer.prototype.handleVolumeButtonClick = function() { if (this.$volumeSlider.is(':visible')) { - this.hideVolumePopup(); - } - else { + this.hideVolumePopup(); + } else { this.showVolumePopup(); } - }; - - AblePlayer.prototype.handleVolumeKeystroke = function(keycode) { - - // keycode is an ASCII key code 49-57 (numeric keys 1-9), - // keyboard shortcuts for changing volume - - var volume; - - if (keycode >= 49 && keycode <= 57) { - volume = keycode - 48; - } - else { - return false; - } + }; + AblePlayer.prototype.handleVolumeKeystroke = function(volume) { + // keyboard shortcuts for changing volume if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); } - }; + }; AblePlayer.prototype.handleVolumeChange = function(volume) { - // handle volume change using the volume input slider + // handle volume change using the volume input slider if (this.isMuted() && volume > 0) { this.setMute(false); - } - else if (volume === 0) { + } else if (volume === 0) { this.setMute(true); - } - else { + } else { this.setVolume(volume); // this.volume will be updated after volumechange event fires (event.js) this.refreshVolumeHelp(volume); this.refreshVolumeButton(volume); @@ -7301,8 +6371,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.isMuted()) { this.setMute(false); - } - else { + } else { this.setMute(true); } }; @@ -7334,8 +6403,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { return this.media.muted; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { return this.youTubePlayer.isMuted(); } }; @@ -7347,8 +6415,7 @@ if (typeof module !== "undefined" && module.exports) { // save current volume so it can be restored after unmute this.lastVolume = this.volume; this.volume = 0; - } - else { // restore to previous volume + } else { // restore to previous volume if (typeof this.lastVolume !== 'undefined') { this.volume = this.lastVolume; } @@ -7356,16 +6423,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.media.muted = mute; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (mute) { this.youTubePlayer.mute(); - } - else { + } else { this.youTubePlayer.unMute(); } } - this.setVolume(this.volume); + this.setVolume(this.volume); this.refreshVolumeHelp(this.volume); this.refreshVolumeButton(this.volume); }; @@ -7375,29 +6440,22 @@ if (typeof module !== "undefined" && module.exports) { // volume is 1 to 10 // convert as needed depending on player - var newVolume; - + var newVolume; + this.syncSignVideo( {'volume' : 0 } ); if (this.player === 'html5') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.media.volume = newVolume; - - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.volume = 0; // always mute - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // volume is 0 to 100 - newVolume = volume * 10; + newVolume = volume * 10; this.youTubePlayer.setVolume(newVolume); this.volume = volume; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // volume is 0 to 1 - newVolume = volume / 10; + newVolume = volume / 10; this.vimeoPlayer.setVolume(newVolume).then(function() { // setVolume finished. - // could do something here // successful completion also fires a 'volumechange' event (see event.js) }); } @@ -7410,10 +6468,9 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { // uses 0 to 1 scale return this.media.volume * 10; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // uses 0 to 100 scale - if (this.youTubePlayerReady) { + if (this.youTubePlayerReady) { return this.youTubePlayer.getVolume() / 10; } } @@ -7430,14 +6487,11 @@ if (typeof module !== "undefined" && module.exports) { // returns 'mute','soft','medium', or 'loud' depending on volume level if (volume == 0) { return 'mute'; - } - else if (volume == 10) { + } else if (volume == 10) { return 'loud'; - } - else if (volume < 5) { + } else if (volume < 5) { return 'soft'; - } - else { + } else { return 'medium'; } }; @@ -7448,70 +6502,57 @@ if (typeof module !== "undefined" && module.exports) { var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"; // Based on the incredible accessible modal dialog. - window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, isModal, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) { + window.AccessibleDialog = function( modalDiv, $returnElement, title, closeButtonLabel) { this.title = title; this.closeButtonLabel = closeButtonLabel; this.focusedElementBeforeModal = $returnElement; - this.escapeHook = escapeHook; this.baseId = $(modalDiv).attr('id') || Math.floor(Math.random() * 1000000000).toString(); var thisObj = this; var modal = modalDiv; this.modal = modal; - modal.css({ - 'width': width || '50%' - }); + modal.addClass('able-modal-dialog'); - if (!fullscreen) { - var closeButton = $('<button>',{ - 'class': 'modalCloseButton', - 'title': thisObj.closeButtonLabel, - 'aria-label': thisObj.closeButtonLabel - }).text('X'); - closeButton.keydown(function (e) { - // Space key down - if (e.which === 32) { - thisObj.hide(); - } - }).click(function () { + var closeButton = $('<button>',{ + 'class': 'modalCloseButton', + 'title': thisObj.closeButtonLabel, + 'aria-label': thisObj.closeButtonLabel + }).text('×'); + closeButton.on( 'keydown', function (e) { + if (e.key === ' ') { thisObj.hide(); - }); + } + }).on( 'click', function () { + thisObj.hide(); + }); - var titleH1 = $('<h1></h1>'); - titleH1.attr('id', 'modalTitle-' + this.baseId); - titleH1.css('text-align', 'center'); - titleH1.text(title); - this.titleH1 = titleH1; + var titleH1 = $('<h1></h1>'); + titleH1.attr('id', 'modalTitle-' + this.baseId); + titleH1.text(title); + this.titleH1 = titleH1; - modal.attr({ - 'aria-labelledby': 'modalTitle-' + this.baseId, - }); - modal.prepend(titleH1); - modal.prepend(closeButton); - } + modal.attr({ + 'aria-labelledby': 'modalTitle-' + this.baseId, + }); + var modalHeader = $( '<div>', { + 'class': 'able-modal-header' + }); + modalHeader.prepend(titleH1); + modalHeader.prepend(closeButton); + modal.prepend(modalHeader); modal.attr({ 'aria-hidden': 'true', - 'role': dialogRole, + 'role': 'dialog', + 'aria-modal': 'true' }); - if (isModal) { - modal.attr('aria-modal','true'); - } - modal.keydown(function (e) { - // Escape - if (e.which === 27) { - if (thisObj.escapeHook) { - thisObj.escapeHook(e, this); - } - else { - thisObj.hide(); - e.preventDefault(); - } - } - // Tab - else if (e.which === 9) { + modal.on( 'keydown', function (e) { + if (e.key === 'Escape') { + thisObj.hide(); + e.preventDefault(); + } else if (e.key === 'Tab') { // Manually loop tab navigation inside the modal. var parts = modal.find(''); var focusable = parts.filter(focusableElementsSelector).filter(':visible'); @@ -7525,13 +6566,12 @@ if (typeof module !== "undefined" && module.exports) { if (e.shiftKey) { // If backwards from first element, go to last. if (currentIndex === 0) { - focusable.get(focusable.length - 1).focus(); + focusable.get(focusable.length - 1).trigger('focus'); e.preventDefault(); } - } - else { + } else { if (currentIndex === focusable.length - 1) { - focusable.get(0).focus(); + focusable.get(0).trigger('focus'); e.preventDefault(); } } @@ -7539,7 +6579,10 @@ if (typeof module !== "undefined" && module.exports) { e.stopPropagation(); }); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + if ( $( 'body' ).hasClass( 'able-modal-active' ) ) { + $( 'body > ') .not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); + } }; AccessibleDialog.prototype.show = function () { @@ -7555,10 +6598,12 @@ if (typeof module !== "undefined" && module.exports) { // Keep from moving focus out of dialog when clicking outside of it. overlay.on('mousedown.accessibleModal', function (e) { e.preventDefault(); + thisObj.hide(); }); } - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'true'); + $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').attr('inert', true); + $( 'body' ).addClass( 'able-modal-active' ); this.overlay.css('display', 'block'); this.modal.css('display', 'block'); @@ -7574,7 +6619,7 @@ if (typeof module !== "undefined" && module.exports) { var thisObj = this; setTimeout(function () { // set focus on the first focusable element - thisObj.modal.find('button.modalCloseButton').first().focus(); + thisObj.modal.find('button.modalCloseButton').first().trigger('focus'); }, 300); }; @@ -7584,9 +6629,10 @@ if (typeof module !== "undefined" && module.exports) { } this.modal.css('display', 'none'); this.modal.attr('aria-hidden', 'true'); - $('body > ').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden'); + $('body > *').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('inert'); + $( 'body' ).removeClass( 'able-modal-active' ); - this.focusedElementBeforeModal.focus(); + this.focusedElementBeforeModal.trigger('focus'); }; AccessibleDialog.prototype.getInputs = function () { @@ -7707,7 +6753,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getSecondsFromColonTime = function (timeStr) { // Converts string of form hh:mm:ss to seconds - var timeParts, hours, minutes, seconds, newTime; + var timeParts, hours, minutes, seconds; timeParts = timeStr.split(":"); if (timeParts.length === 3) { @@ -7735,6 +6781,35 @@ if (typeof module !== "undefined" && module.exports) { return Number(Math.floor(value + "e" + decimals) + "e-" + decimals); }; + AblePlayer.prototype.defer = function() { + const self = this; + const promise = new Promise((resolve, reject) => { + self.resolve = resolve; + self.reject = reject; + self.promise = () => promise; + }); + } + + AblePlayer.prototype.getScript = function( source, callback ) { + var script = document.createElement('script'); + var prior = document.getElementsByTagName('script')[0]; + script.async = 1; + + script.onload = script.onreadystatechange = function( _, isAbort ) { + if ( isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) { + script.onload = script.onreadystatechange = null; + script = undefined; + + if ( !isAbort && callback ) { + setTimeout(callback, 0); + } + } + }; + + script.src = source; + prior.parentNode.insertBefore(script, prior); + } + AblePlayer.prototype.hasAttr = function (object, attribute) { // surprisingly, there is no hasAttr() function in Jquery as of 3.2.1 // return true if object has attribute; otherwise false @@ -7752,17 +6827,6 @@ if (typeof module !== "undefined" && module.exports) { } }; - Number.isInteger = - Number.isInteger || - function (value) { - // polyfill for IE11, which doesn't otherwise support Number.isInteger - // https://stackoverflow.com/a/31720368/744281 - return ( - typeof value === "number" && - isFinite(value) && - Math.floor(value) === value - ); - }; })(jQuery); (function ($) { @@ -7775,12 +6839,12 @@ if (typeof module !== "undefined" && module.exports) { // toggles the Description button or changes a description-related preference // The following variables are applicable to delivery of description: - // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) + // defaultStateDescriptions == 'on' or 'off', defined by website owner (overridden by prefDesc) // prefDesc == 1 if user wants description (i.e., Description button is on); else 0 // prefDescPause == 1 to pause video when description starts; else 0 // prefDescVisible == 1 to visibly show text-based description area; else 0 // prefDescMethod == either 'video' or 'text' (as of v4.0.10, prefDescMethod is always 'video') - // descMethod is the format actually used ('video' or 'text'), regardless of user preference + // descMethod is the format actually used ('video' or 'text'), regardless of user preference // hasOpenDesc == true if a described version of video is available via data-desc-src attribute // hasClosedDesc == true if a description text track is available // descOn == true if description of either type is on @@ -7789,12 +6853,12 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; - if (this.mediaType === 'audio') { - deferred.resolve(); + if (this.mediaType === 'audio') { + deferred.resolve(); } // check to see if there's an open-described version of this video @@ -7803,106 +6867,78 @@ if (typeof module !== "undefined" && module.exports) { this.descFile = this.$sources.first().attr('data-desc-src'); if (typeof this.descFile !== 'undefined') { this.hasOpenDesc = true; - } - else { + } else { // there's no open-described version via data-desc-src, // but what about data-youtube-desc-src or data-vimeo-desc-src? - // if these exist, they would have been defined earlier - if (this.youTubeDescId || this.vimeoDescId) { - this.hasOpenDesc = true; - } - else { // there are no open-described versions from any source - this.hasOpenDesc = false; - } + // if these exist, they would have been defined earlier + this.hasOpenDesc = (this.youTubeDescId || this.vimeoDescId) ? true : false; } // Set this.descMethod based on media availability & user preferences + // no description is available for this video + this.descMethod = null; if (this.hasOpenDesc && this.hasClosedDesc) { - // both formats are available. User gets their preference. - if (this.prefDescMethod) { - this.descMethod = this.prefDescMethod; - } - else { - // user has no preference. Video is default. - this.descMethod = 'video'; - } - } - else if (this.hasOpenDesc) { + // both formats are available. User gets their preference. + this.descMethod = (this.prefDescMethod) ? this.prefDescMethod : 'video'; + } else if (this.hasOpenDesc) { this.descMethod = 'video'; - } - else if (this.hasClosedDesc) { + } else if (this.hasClosedDesc) { this.descMethod = 'text'; } - else { - // no description is available for this video - this.descMethod = null; - } // Set the default state of descriptions - if (this.descMethod) { - if (this.prefDesc === 1) { - this.descOn = true; - } - else if (this.prefDesc === 0) { - this.descOn = false; - } - else { - // user has no prefs. Use default state. - if (this.defaultStateDescriptions === 1) { - this.descOn = true; - } - else { - this.descOn = false; - } + this.descOn = false; + if (this.descMethod) { + if (this.prefDesc === 1) { + this.descOn = true; + } else if (this.prefDesc === 0) { + this.descOn = false; + } else { + // user has no prefs. Use default state. + this.descOn = (this.defaultStateDescriptions === 1) ? true : false; } } - else { - this.descOn = false; - } - if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc && this.descMethod === 'text') { + + // If a video has text audio descriptions, inject the description area. + if (typeof this.$descDiv === 'undefined' && this.hasClosedDesc ) { this.injectTextDescriptionArea(); } if (this.descOn) { - if (this.descMethod === 'video') { - if (!this.usingDescribedVersion()) { - // switched from non-described to described version - this.swapDescription(); - } + if (this.descMethod === 'video' && !this.usingDescribedVersion() ) { + // switched from non-described to described version + this.swapDescription(); } if (this.hasClosedDesc) { if (this.prefDescVisible) { // make description text visible if (typeof this.$descDiv !== 'undefined') { this.$descDiv.show(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } - } - else { + } else { // keep it visible to screen readers, but hide it visibly if (typeof this.$descDiv !== 'undefined') { - this.$descDiv.addClass('able-clipped'); + this.$descDiv.addClass('able-offscreen'); } } } - } - else { // description is off. + } else { // description is off. if (this.descMethod === 'video') { // user has turned off described version of video if (this.usingDescribedVersion()) { // user was using the described verion. Swap for non-described version this.swapDescription(); } - } - else if (this.descMethod === 'text') { // user has turned off text description + } else if (this.descMethod === 'text') { // user has turned off text description // hide description div from everyone, including screen reader users if (typeof this.$descDiv !== 'undefined') { this.$descDiv.hide(); - this.$descDiv.removeClass('able-clipped'); + this.$descDiv.removeClass('able-offscreen'); } } } deferred.resolve(); - return promise; + return promise; }; AblePlayer.prototype.usingDescribedVersion = function () { @@ -7911,116 +6947,79 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'youtube') { return (this.activeYouTubeId === this.youTubeDescId); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { return (this.activeVimeoId === this.vimeoDescId); - } - else { + } else { return (this.$sources.first().attr('data-desc-src') === this.$sources.first().attr('src')); } }; - AblePlayer.prototype.initSpeech = function (context) { - - // Some browsers &/or operating systems require a user-initiated click - // before this.synth.getVoices() will work. As of Nov 2022: - // Chrome requires a click before synth.getVoices() will work - // iOS requires a click before synth.speak() will work - // A hack to address this: Listen for ANY click, then play an inaudible utterance - // to intitiate speech synthesis - // https://stackoverflow.com/questions/32193704/js-speech-synthesis-issue-on-ios - // This function does that, and sets this.speechEnabled - // It's called with either of these contexts: - // 'init' - player is being initialized - // 'play' - user has clicked play - // 'prefs' - user has clicked prefs button - // 'desc' - it's time to announce a description! - - var thisObj = this; - - if (this.speechEnabled === null) { - - if (typeof this.synth !== 'undefined') { - // cancel any previous synth instance and reinitialize - this.synth.cancel(); - } +/** + * Initializes speech synthesis capabilities for the player. + * This method addresses browser and OS limitations that require user interaction + * before speech synthesis functions become available. It handles different contexts + * like initialization, playing media, accessing preferences, or announcing descriptions. + * @param {string} context - The context in which the function is called ('init', 'play', 'prefs', 'desc'). + / + AblePlayer.prototype.initSpeech = function (context) { + var thisObj = this; - if (window.speechSynthesis) { + // Function to attempt enabling speech synthesis + function attemptEnableSpeech() { + var greeting = new SpeechSynthesisUtterance("\x20"); + greeting.onend = function () { + thisObj.getBrowserVoices(); + if ( + (Array.isArray(thisObj.descVoices) && thisObj.descVoices.length) || + context !== "init" + ) { + thisObj.speechEnabled = true; + } + }; + thisObj.synth.speak(greeting); + } - // browser supports speech synthesis + // Function to handle the initial click and enable speech synthesis + function handleInitialClick() { + attemptEnableSpeech(); + // Once the utterance starts, remove this specific click event listener + // Ensures the event handler only runs once and cleans up after itself + $(document).off("click", handleInitialClick); + } + if (this.speechEnabled === null) { + if (window.speechSynthesis) { + // Browser supports speech synthesis this.synth = window.speechSynthesis; + this.synth.cancel(); // Cancel any ongoing speech synthesis - if (context === 'init') { - // handle a click on anything, in case the user - // clicks something before they click 'play' or 'prefs' buttons - // that would allow us to init speech before it's needed - $(document).on('click',function() { - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - } - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; - }); - - // go ahead and call get browser voices in case it might work, - // for browsers that don't require a click - this.getBrowserVoices(); - if (this.descVoices.length) { - this.speechEnabled = true; - } - } - else { // context is either 'play' or 'prefs' or 'desc' - var greeting = new SpeechSynthesisUtterance('Hi!'); - greeting.volume = 0; // silent - greeting.rate = 10; // fastest speed supported by the API - thisObj.synth.speak(greeting); - greeting.onstart = function(e) { - // utterance has started - $(document).off('click'); // unbind the click event listener - }; - greeting.onend = function(e) { - // should now be able to get browser voices - // in browsers that require a click - thisObj.getBrowserVoices(); - if (thisObj.descVoices.length) { - thisObj.speechEnabled = true; - } - }; + if (context === "init") { + // Attempt to enable speech synthesis directly for browsers that don't require a click + attemptEnableSpeech(); + // For initial setup, require a user click to enable speech synthesis + // Scoping to a particular handler to avoid conflicts with other click events + $(document).on("click", handleInitialClick); + } else { + // For other contexts, attempt to enable speech synthesis directly + attemptEnableSpeech(); } - } - else { - // browser does not support speech synthesis - this.speechEnabled = false; + } else { + // Browser does not support speech synthesis + this.speechEnabled = false; } } - }; + }; AblePlayer.prototype.getBrowserVoices = function () { - - // define this.descVoices array - // includes only languages that match the language of the captions or player + + // define this.descVoices array + // includes only languages that match the language of the captions or player var voices, descLangs, voiceLang, preferredLang; - if (this.captionLang) { - preferredLang = this.captionLang.substring(0,2).toLowerCase(); - } - else { - preferredLang = this.lang.substring(0,2).toLowerCase(); - } - this.descVoices = []; + preferredLang = (this.captionLang) ? this.captionLang.substring(0,2).toLowerCase() : this.lang.substring(0,2).toLowerCase(); + + this.descVoices = []; voices = this.synth.getVoices(); descLangs = this.getDescriptionLangs(); if (voices.length > 0) { @@ -8030,9 +7029,9 @@ if (typeof module !== "undefined" && module.exports) { // match only the first 2 characters of the lang code voiceLang = voices[i].lang.substring(0,2).toLowerCase(); if (voiceLang === preferredLang && (descLangs.indexOf(voiceLang) !== -1)) { - // this voice matches preferredLang + // this voice matches preferredLang // AND there's a matching description track in this language - // Add this voice to final array + // Add this voice to final array this.descVoices.push(voices[i]); } } @@ -8063,51 +7062,44 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.setDescriptionVoice = function () { - // set description voice on player init, or when user changes caption language - // Voice is determined in the following order of precedence: - // 1. User's preferred voice for this language, saved in a cookie + // set description voice on player init, or when user changes caption language + // Voice is determined in the following order of precedence: + // 1. User's preferred voice for this language, saved in preferences // 2. The first available voice in the array of available voices for this browser in this language - var cookie, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; - cookie = this.getCookie(); - if (typeof cookie.voices !== 'undefined') { - prefDescVoice = this.getPrefDescVoice(); - } - else { - prefDescVoice = null; - } - + var preferences, voices, prefDescVoice, descVoice, descLang, prefVoiceFound; + preferences = this.getPref(); + prefDescVoice = (typeof preferences.voices !== 'undefined') ? this.getPrefDescVoice() : null; + this.getBrowserVoices(); this.rebuildDescPrefsForm(); - if (this.selectedDescriptions) { + if (this.selectedDescriptions) { descLang = this.selectedDescriptions.language; - } - else if (this.captionLang) { - descLang = this.captionLang; - } - else { - descLang = this.lang; + } else if (this.captionLang) { + descLang = this.captionLang; + } else { + descLang = this.lang; } if (this.synth) { voices = this.synth.getVoices(); if (voices.length > 0) { - if (prefDescVoice) { - // select the language that matches prefDescVoice, if it's available - prefVoiceFound = false; + if (prefDescVoice) { + // select the language that matches prefDescVoice, if it's available + prefVoiceFound = false; for (var i=0; i<voices.length; i++) { // first, be sure voice is the correct language if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { - if (voices[i].name === prefDescVoice) { - descVoice = voices[i].name; - prefVoiceFound = true; + if (voices[i].name === prefDescVoice) { + descVoice = voices[i].name; + prefVoiceFound = true; break; } } } } - if (!prefVoiceFound) { + if (!prefVoiceFound) { // select the first language that matches the first 2 characters of the lang code for (var i=0; i<voices.length; i++) { if (voices[i].lang.substring(0,2).toLowerCase() === descLang.substring(0,2).toLowerCase()) { @@ -8121,10 +7113,9 @@ if (typeof module !== "undefined" && module.exports) { this.prefDescVoiceLang = descLang; // select this voice in the Description Prefs dialog if (this.$voiceSelectField) { - var selectedOption = this.$voiceSelectField.find('option[value="' + this.prefDescVoice + '"]'); this.$voiceSelectField.val(this.prefDescVoice); } - this.updateCookie('voice'); + this.updatePreferences('voice'); } } }; @@ -8138,70 +7129,66 @@ if (typeof module !== "undefined" && module.exports) { // 2. User is toggling description // (playerCreated == true) - var thisObj, i, origSrc, descSrc, srcType, newSource; + var thisObj, i, origSrc, descSrc; thisObj = this; - // We are no longer loading the previous media source - // Only now, as a new source is requested, is it safe to reset this var - // It will be reset to true when media.load() is called - this.loadingMedia = false; + // We are no longer loading the previous media source + // Only now, as a new source is requested, is it safe to reset this var + // It will be reset to true when media.load() is called + this.loadingMedia = false; - // get element that has focus at the time swap is initiated - // after player is rebuilt, focus will return to that same element + // get element that has focus at the time swap is initiated + // after player is rebuilt, focus will return to that same element // (if it exists) - this.$focusedElement = $(':focus'); + this.$focusedElement = $(':focus'); + this.activeMedia = this.mediaId; // get current time of current source, and attempt to start new video at the same time - // whether this is possible will be determined after the new media source has loaded - // see onMediaNewSourceLoad() - if (this.elapsed > 0) { - this.swapTime = this.elapsed; + // whether this is possible will be determined after the new media source has loaded + // see onMediaNewSourceLoad() + if (this.elapsed > 0) { + this.swapTime = this.elapsed; + } else { + this.swapTime = 0; } - else { - this.swapTime = 0; - } - if (this.duration > 0) { - this.prevDuration = this.duration; + if (this.duration > 0) { + this.prevDuration = this.duration; } - // Capture current playback state, so media can resume after source is swapped - if (!this.okToPlay) { - this.okToPlay = this.playing; + // Capture current playback state, so media can resume after source is swapped + if (!this.okToPlay) { + this.okToPlay = this.playing; } if (this.descOn) { - // user has requested the described version - this.showAlert(this.tt.alertDescribedVersion); - } - else { - // user has requested the non-described version - this.showAlert(this.tt.alertNonDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); + } else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); } if (this.player === 'html5') { this.swappingSrc = true; - this.paused = true; + this.paused = true; if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-orig-src - origSrc = this.$sources[i].getAttribute('data-orig-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-orig-src') ); srcType = this.$sources[i].getAttribute('type'); if (origSrc) { this.$sources[i].setAttribute('src',origSrc); } - } - } - else { + } + } else { // the non-described version is currently playing. Swap to described. for (i=0; i < this.$sources.length; i++) { // for all <source> elements, replace src with data-desc-src (if one exists) // then store original source in a new data-orig-src attribute - origSrc = this.$sources[i].getAttribute('src'); - descSrc = this.$sources[i].getAttribute('data-desc-src'); + origSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('src') ); + descSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-desc-src') ); srcType = this.$sources[i].getAttribute('type'); if (descSrc) { this.$sources[i].setAttribute('src',descSrc); @@ -8210,88 +7197,77 @@ if (typeof module !== "undefined" && module.exports) { } } - if (this.recreatingPlayer) { + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - if (this.playerCreated) { - // delete old player, then recreate it with new source & tracks - this.deletePlayer('swap-desc-html'); - this.recreatePlayer().then(function() { - if (!thisObj.loadingMedia) { + return; + } + if (this.playerCreated) { + // delete old player, then recreate it with new source & tracks + this.deletePlayer('swap-desc-html'); + this.recreatePlayer().then(function() { + if (!thisObj.loadingMedia) { thisObj.media.load(); - thisObj.loadingMedia = true; + thisObj.loadingMedia = true; } }); - } - else { + } else { // player is in the process of being created - // no need to recreate it - } - } - else if (this.player === 'youtube') { - - if (this.usingDescribedVersion()) { - // the described version is currently playing. Swap to non-described - this.activeYouTubeId = this.youTubeId; - } - else { - // the non-described version is currently playing. Swap to described. - this.activeYouTubeId = this.youTubeDescId; + // no need to recreate it } + } else if (this.player === 'youtube') { + + // if the described version is currently playing, swap to non-described + this.activeYouTubeId = (this.usingDescribedVersion()) ? this.youTubeId : this.youTubeDescId; + if (typeof this.youTubePlayer !== 'undefined') { - thisObj.swappingSrc = true; + thisObj.swappingSrc = true; if (thisObj.playing) { // loadVideoById() loads and immediately plays the new video at swapTime thisObj.youTubePlayer.loadVideoById(thisObj.activeYouTubeId,thisObj.swapTime); - } - else { + } else { // cueVideoById() loads the new video and seeks to swapTime, but does not play thisObj.youTubePlayer.cueVideoById(thisObj.activeYouTubeId,thisObj.swapTime); } } - if (this.playerCreated) { - this.deletePlayer('swap-desc-youtube'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-youtube'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { - // nothing to do here - // next steps occur when youtube onReady event fires - // see youtube.js > finalizeYoutubeInit() - }); - } - else if (this.player === 'vimeo') { + return; + } + this.recreatePlayer().then(function() { + // nothing to do here + // next steps occur when youtube onReady event fires + // see youtube.js > finalizeYoutubeInit() + }); + } else if (this.player === 'vimeo') { if (this.usingDescribedVersion()) { // the described version is currently playing. Swap to non-described this.activeVimeoId = this.vimeoId; - this.showAlert(this.tt.alertNonDescribedVersion); - } - else { + this.showAlert( this.translate( 'alertNonDescribedVersion', 'Using the non-described version of this video' ) ); + } else { // the non-described version is currently playing. Swap to described. this.activeVimeoId = this.vimeoDescId; - this.showAlert(this.tt.alertDescribedVersion); + this.showAlert( this.translate( 'alertDescribedVersion', 'Using the audio described version of this video' ) ); } - if (this.playerCreated) { - this.deletePlayer('swap-desc-vimeo'); + if (this.playerCreated) { + this.deletePlayer('swap-desc-vimeo'); } - // player needs to be recreated with new source - if (this.recreatingPlayer) { + // player needs to be recreated with new source + if (this.recreatingPlayer) { // stopgap to prevent multiple firings of recreatePlayer() - return; - } - this.recreatePlayer().then(function() { + return; + } + this.recreatePlayer().then(function() { // load the new video source thisObj.vimeoPlayer.loadVideo(thisObj.activeVimeoId).then(function() { if (thisObj.playing) { // video was playing when user requested an alternative version // seek to swapTime and continue playback (playback happens automatically) thisObj.vimeoPlayer.setCurrentTime(thisObj.swapTime); - } - else { + } else { // Vimeo autostarts immediately after video loads // The "Described" button should not trigger playback, so stop this before the user notices. thisObj.vimeoPlayer.pause(); @@ -8302,36 +7278,30 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.showDescription = function(now) { - - if (!this.hasClosedDesc || this.swappingSrc || !this.descOn || this.descMethod === 'video') { + if (!this.playing || !this.hasClosedDesc || this.swappingSrc || !this.descOn || ( this.descMethod === 'video' && !this.prefDescVisible ) ) { return; } - var thisObj, i, cues, d, thisDescription, descText, msg; + var thisObj, cues, d, thisDescription, descText; thisObj = this; var flattenComponentForDescription = function (component) { var result = []; if (component.type === 'string') { result.push(component.value); - } - else { + } else { for (var i = 0; i < component.children.length; i++) { result.push(flattenComponentForDescription(component.children[i])); } } return result.join(''); }; - + cues = []; if (this.selectedDescriptions) { cues = this.selectedDescriptions.cues; - } - else if (this.descriptions.length >= 1) { + } else if (this.descriptions.length >= 1) { cues = this.descriptions[0].cues; } - else { - cues = []; - } for (d = 0; d < cues.length; d++) { if ((cues[d].start <= now) && (cues[d].end > now)) { thisDescription = d; @@ -8340,35 +7310,35 @@ if (typeof module !== "undefined" && module.exports) { } if (typeof thisDescription !== 'undefined') { if (this.currentDescription !== thisDescription) { - // temporarily remove aria-live from $status in order to prevent description from being interrupted + // temporarily remove aria-live from $status to prevent description from being interrupted this.$status.removeAttr('aria-live'); descText = flattenComponentForDescription(cues[thisDescription].components); - if (this.descReader === 'screenreader') { + if (this.descReader === 'screenreader') { // load the new description into the container div for screen readers to read this.$descDiv.html(descText); - } - else if (this.speechEnabled) { - // use browser's built-in speech synthesis - this.announceDescriptionText('description',descText); + } else if (this.speechEnabled) { + if ( 'video' !== this.descMethod ) { + // use browser's built-in speech synthesis + this.announceDescriptionText('description',descText); + } if (this.prefDescVisible) { // write description to the screen for sighted users // but remove ARIA attributes since it isn't intended to be read by screen readers this.$descDiv.html(descText).removeAttr('aria-live aria-atomic'); } - } - else { + } else { // browser does not support speech synthesis // load the new description into the container div for screen readers to read this.$descDiv.html(descText); } + // Only pause video if not using a described video. if (this.prefDescPause && this.descMethod === 'text') { this.pauseMedia(); this.pausedForDescription = true; } this.currentDescription = thisDescription; } - } - else { + } else { this.$descDiv.html(''); this.currentDescription = -1; // restore aria-live to $status @@ -8376,42 +7346,33 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { + AblePlayer.prototype.syncSpeechToPlaybackRate = function(rate) { - // called when user changed playback rate - // adjust rate of audio description to match + // called when user changed playback rate + // adjust rate of audio description to match + var speechRate; - var speechRate; - - if (rate === 0.5) { - speechRate = 0.7; // option 1 in prefs menu - } - else if (rate === 0.75) { - speechRate = 0.8; // option 2 in prefs menu - } - else if (rate === 1.0) { + if (rate === 0.5) { + speechRate = 0.7; // option 1 in prefs menu + } else if (rate === 0.75) { + speechRate = 0.8; // option 2 in prefs menu + } else if (rate === 1.0) { speechRate = 1; // option 4 in prefs menu (normal speech, default) - } - else if (rate === 1.25) { + } else if (rate === 1.25) { speechRate = 1.1; // option 5 in prefs menu - } - else if (rate === 1.5) { - speechRate = 1.2; // option 6 in prefs menu - } - else if (rate === 1.75) { - speechRate = 1.5; // option 7 in prefs menu - } - else if (rate === 2.0) { + } else if (rate === 1.5) { + speechRate = 1.2; // option 6 in prefs menu + } else if (rate === 1.75) { + speechRate = 1.5; // option 7 in prefs menu + } else if (rate === 2.0) { speechRate = 2; // option 8 in prefs menu (fast) - } - else if (rate === 2.25) { + } else if (rate === 2.25) { speechRate = 2.5; // option 9 in prefs menu (very fast) - } - else if (rate >= 2.5) { - speechRate = 3; // option 10 in prefs menu (super fast) + } else if (rate >= 2.5) { + speechRate = 3; // option 10 in prefs menu (super fast) } this.prefDescRate = speechRate; - }; + }; AblePlayer.prototype.announceDescriptionText = function(context, text) { @@ -8441,10 +7402,10 @@ if (typeof module !== "undefined" && module.exports) { // and typically requires a computer reboot to make right again. // This has been observed frequently in macOS Big Sur, but also in Windows 10 // To ignore user's voice preferences and always use the first voice, set the following var to true - // This is for testing only; not recommended for production - // unless the voice select field is also removed from the Prefs dialog + // This is for testing only; not recommended for production + // unless the voice select field is also removed from the Prefs dialog var useFirstVoice = false; - + if (!this.speechEnabled) { // voices array failed to load the first time. Try again this.initSpeech('desc'); @@ -8456,8 +7417,7 @@ if (typeof module !== "undefined" && module.exports) { pitch = $('#' + this.mediaId + '_prefDescPitch').val(); rate = $('#' + this.mediaId + '_prefDescRate').val(); volume = $('#' + this.mediaId + '_prefDescVolume').val(); - } - else { + } else { // get settings from global prefs voiceName = this.prefDescVoice; pitch = this.prefDescPitch; @@ -8470,8 +7430,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.descVoices.length > 0) { if (useFirstVoice) { voice = this.descVoices[0]; - } - else if (voiceName) { + } else if (voiceName) { // get the voice that matches user's preferred voiceName for (i = 0; i < this.descVoices.length; i++) { if (this.descVoices[i].name == voiceName) { @@ -8485,63 +7444,62 @@ if (typeof module !== "undefined" && module.exports) { // use the first voice in the array voice = this.descVoices[0]; } - utterance = new SpeechSynthesisUtterance(); - utterance.voice = voice; - utterance.voiceURI = 'native'; - utterance.volume = volume; - utterance.rate = rate; - utterance.pitch = pitch; - utterance.text = text; - // TODO: Consider the best language for the utterance: - // language of the web page? (this.lang) - // language of the WebVTT description track? - // language of the user's chosen voice? - // If there's a mismatch between any of these, the description will likely be unintelligible - utterance.lang = this.lang; - utterance.onstart = function(e) { - // utterance has started - }; - utterance.onpause = function(e) { - // utterance has paused - }; - utterance.onend = function(e) { - // utterance has ended - this.speakingDescription = false; - timeElapsed = e.elapsedTime; - // As of Firefox 95, e.elapsedTime is expressed in seconds - // Other browsers (tested in Chrome & Edge) express this in milliseconds - // Assume no utterance will require over 100 seconds to express... - if (timeElapsed > 100) { - // time is likely expressed in milliseconds - secondsElapsed = (e.elapsedTime/1000).toFixed(2); - } - else { - // time is likely already expressed in seconds; just need to round it - secondsElapsed = (e.elapsedTime).toFixed(2); - } - if (this.debug) { - console.log('Finished speaking. That took ' + secondsElapsed + ' seconds.'); - } - if (context === 'description') { - if (thisObj.prefDescPause) { - if (thisObj.pausedForDescription) { - thisObj.playMedia(); - this.pausedForDescription = false; - } - } - } - }; - utterance.onerror = function(e) { - // handle error - console.log('Web Speech API error',e); - }; - if (this.synth.paused) { - this.synth.resume(); - } - this.synth.speak(utterance); - this.speakingDescription = true; } + } else { + voice = null; + } + utterance = new SpeechSynthesisUtterance(); + if (voice) { + utterance.voice = voice; + } + utterance.voiceURI = 'native'; + utterance.volume = volume; + utterance.rate = rate; + utterance.pitch = pitch; + utterance.text = text; + // TODO: Consider the best language for the utterance: + // language of the web page? (this.lang) + // language of the WebVTT description track? + // language of the user's chosen voice? + // If there's a mismatch between any of these, the description will likely be unintelligible + utterance.lang = this.lang; + utterance.onstart = function(e) { + // utterance has started + }; + utterance.onpause = function(e) { + // utterance has paused + }; + utterance.onend = function(e) { + // utterance has ended + this.speakingDescription = false; + timeElapsed = e.elapsedTime; + // As of Firefox 95, e.elapsedTime is expressed in seconds + // Other browsers (tested in Chrome & Edge) express this in milliseconds + // Assume no utterance will require over 100 seconds to express... + // If a large value, time is likely expressed in milliseconds. + secondsElapsed = (timeElapsed > 100) ? (e.elapsedTime/1000).toFixed(2) : (e.elapsedTime).toFixed(2); + + if (this.debug) { + console.log('Finished speaking. That took ' + secondsElapsed + ' seconds.'); + } + if (context === 'description') { + if (thisObj.prefDescPause) { + if (thisObj.pausedForDescription) { + thisObj.playMedia(); + this.pausedForDescription = false; + } + } + } + }; + utterance.onerror = function(e) { + // handle error + console.log('Web Speech API error',e); + }; + if (this.synth.paused) { + this.synth.resume(); } + this.synth.speak(utterance); + this.speakingDescription = true; }; })(jQuery); @@ -8550,7 +7508,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isIOS = function(version) { - // return true if this is IOS + // return true if this is iOS // if version is provided check for a particular version var userAgent, iOS; @@ -8562,61 +7520,48 @@ if (typeof module !== "undefined" && module.exports) { if (userAgent.indexOf('os ' + version) !== -1) { // this is the target version of iOS return true; - } - else { + } else { return false; } - } - else { + } else { // no version was specified return true; } - } - else { - // this is not IOS + } else { + // this is not iOS return false; } }; AblePlayer.prototype.browserSupportsVolume = function() { - // To test whether the browser supports changing the volume, - // create a new audio element and try setting the volume to something other than 1. - // Then, retrieve the current setting to see if it preserved it. + // To test whether the browser supports changing the volume, + // create a new audio element and try setting the volume to something other than 1. + // Then, retrieve the current setting to see if it preserved it. + // This doesn't work in iOS by design: https://developer.apple.com/documentation/avfoundation/avplayer/volume - // Unfortunately, this doesn't work in iOS. In 2022, our tests yield the same results as reported here: - // https://stackoverflow.com/questions/72861253/how-do-i-detect-if-a-browser-does-not-support-changing-html-audio-volume + var audio, testVolume; - // So, unfortunately we have to resort to sniffing for iOS - // before testing for support in other browsers - var audio, testVolume; - - if (this.isIOS()) { - return false; - } + if (this.isIOS()) { + return false; + } - testVolume = 0.9; // any value between 0.1 and 0.9 - audio = new Audio(); - audio.volume = testVolume; - if (audio.volume === testVolume) { - return true; - } - else { - return false; - } + testVolume = 0.9; // any value between 0.1 and 0.9 + audio = new Audio(); + audio.volume = testVolume; + + return ( audio.volume === testVolume ); }; AblePlayer.prototype.nativeFullscreenSupported = function () { - return document.fullscreenEnabled || - document.webkitFullscreenEnabled || - document.mozFullscreenEnabled || - document.msFullscreenEnabled; + return document.fullscreenEnabled || document.webkitFullscreenEnabled; }; })(jQuery); (function ($) { + AblePlayer.prototype.seekTo = function (newTime) { var thisObj = this; @@ -8629,10 +7574,12 @@ if (typeof module !== "undefined" && module.exports) { this.seeking = true; this.liveUpdatePending = true; - if (this.speakingDescription) { - this.synth.cancel(); + if (this.speakingDescription) { + this.synth.cancel(); } + this.syncSignVideo( {'time' : this.startTime } ); + if (this.player === 'html5') { var seekable; @@ -8643,23 +7590,19 @@ if (typeof module !== "undefined" && module.exports) { // ok to seek to startTime // canplaythrough will be triggered when seeking is complete // this.seeking will be set to false at that point - this.media.currentTime = this.startTime; - this.seekStatus = 'complete'; - if (this.hasSignLanguage && this.signVideo) { - // keep sign languge video in sync - this.signVideo.currentTime = this.startTime; - } + this.media.currentTime = this.startTime; + this.seekStatus = 'complete'; + this.syncSignVideo( { 'time' : this.startTime } ); } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.seekTo(newTime,true); if (newTime > 0) { if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } } - } - else if (this.player === 'vimeo') { + this.syncSignVideo( {'time' : newTime } ); + } else if (this.player === 'vimeo') { this.vimeoPlayer.setCurrentTime(newTime).then(function() { // seek finished. // successful completion also fires a 'seeked' event (see event.js) @@ -8689,15 +7632,14 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj, mediaTimes; mediaTimes = {}; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (typeof duration !== 'undefined' && typeof elapsed !== 'undefined') { mediaTimes['duration'] = duration; mediaTimes['elapsed'] = elapsed; deferred.resolve(mediaTimes); - } - else { + } else { this.getDuration().then(function(duration) { mediaTimes['duration'] = thisObj.roundDown(duration,6); thisObj.getElapsed().then(function(elapsed) { @@ -8715,7 +7657,7 @@ if (typeof module !== "undefined" && module.exports) { // function is called by getMediaTimes, and return value is sanitized there var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -8724,39 +7666,32 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getDuration().then(function(duration) { if (duration === undefined || isNaN(duration) || duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var duration; if (this.player === 'html5') { - duration = this.media.duration; - } - else if (this.player === 'youtube') { + duration = this.media.duration; + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { - if (this.duration > 0) { + if (this.duration > 0) { // duration was already retrieved while checking for captions - duration = this.duration; - } - else { + duration = this.duration; + } else { duration = this.youTubePlayer.getDuration(); } - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet duration = 0; } } if (duration === undefined || isNaN(duration) || duration === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(duration); } } @@ -8770,7 +7705,7 @@ if (typeof module !== "undefined" && module.exports) { var deferred, promise, thisObj; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; @@ -8779,33 +7714,27 @@ if (typeof module !== "undefined" && module.exports) { this.vimeoPlayer.getCurrentTime().then(function(elapsed) { if (elapsed === undefined || isNaN(elapsed) || elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } }); - } - else { // vimeoPlayer hasn't been initialized yet. + } else { // vimeoPlayer hasn't been initialized yet. deferred.resolve(0); } - } - else { + } else { var elapsed; if (this.player === 'html5') { elapsed = this.media.currentTime; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { elapsed = this.youTubePlayer.getCurrentTime(); - } - else { // the YouTube player hasn't initialized yet + } else { // the YouTube player hasn't initialized yet elapsed = 0; } } if (elapsed === undefined || isNaN(elapsed) || elapsed === -1) { deferred.resolve(0); - } - else { + } else { deferred.resolve(elapsed); } } @@ -8815,71 +7744,51 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getPlayerState = function () { // Returns one of the following states: - // 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. - // 'ended' - Finished playing. - // 'paused' - Not playing, but not stopped or ended. - // 'buffering' - Momentarily paused to load, but will resume once data is loaded. - // 'playing' - Currently playing. - - // Commented out the following in 3.2.1 - not sure of its intended purpose - // It can be useful to know player state even when swapping src - // and the overhead is seemingly minimal - // TODO - Investigate this further. Delete if it's not needed - / - if (this.swappingSrc) { - return; - } - / - var deferred, promise, thisObj, duration, elapsed; - deferred = new $.Deferred(); + // - 'stopped' - Not yet played for the first time, or otherwise reset to unplayed. + // - 'ended' - Finished playing. + // - 'paused' - Not playing, but not stopped or ended. + // - 'buffering' - Momentarily paused to load, but will resume once data is loaded. + // - 'playing' - Currently playing. + + var deferred, promise, thisObj; + deferred = new this.defer(); promise = deferred.promise(); thisObj = this; if (this.player === 'html5') { if (this.media.ended) { deferred.resolve('ended'); - } - else if (this.media.paused) { + } else if (this.media.paused) { deferred.resolve('paused'); - } - else if (this.media.readyState !== 4) { + } else if (this.media.readyState !== 4) { deferred.resolve('buffering'); - } - else { + } else { deferred.resolve('playing'); } - } - else if (this.player === 'youtube' && this.youTubePlayerReady) { + } else if (this.player === 'youtube' && this.youTubePlayerReady) { var state = this.youTubePlayer.getPlayerState(); if (state === -1 || state === 5) { deferred.resolve('stopped'); - } - else if (state === 0) { + } else if (state === 0) { deferred.resolve('ended'); - } - else if (state === 1) { + } else if (state === 1) { deferred.resolve('playing'); - } - else if (state === 2) { + } else if (state === 2) { deferred.resolve('paused'); - } - else if (state === 3) { + } else if (state === 3) { deferred.resolve('buffering'); } - } - else if (this.player === 'vimeo' && this.vimeoPlayer) { + } else if (this.player === 'vimeo' && this.vimeoPlayer) { // curiously, Vimeo's API has no getPlaying(), getBuffering(), or getState() methods // so maybe if it's neither paused nor ended, it must be playing??? this.vimeoPlayer.getPaused().then(function(paused) { if (paused) { deferred.resolve('paused'); - } - else { + } else { thisObj.vimeoPlayer.getEnded().then(function(ended) { if (ended) { deferred.resolve('ended'); - } - else { + } else { deferred.resolve('playing'); } }); @@ -8892,89 +7801,63 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.isPlaybackRateSupported = function () { if (this.player === 'html5') { - if (this.media.playbackRate) { - return true; - } - else { - return false; - } - } - else if (this.player === 'youtube') { - // Youtube supports varying playback rates per video. + return (this.media.playbackRate) ? true : false; + } else if (this.player === 'youtube') { + // Youtube supports varying playback rates per video. // Only expose controls if more than one playback rate is available. - if (this.youTubePlayerReady) { - if (this.youTubePlayer.getAvailablePlaybackRates().length > 1) { - return true; - } - else { - return false; - } - } - else { + if (this.youTubePlayerReady) { + return (this.youTubePlayer.getAvailablePlaybackRates().length > 1) ? true : false; + } else { return false; } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // since this takes longer to determine, it was set previously in initVimeoPlayer() return this.vimeoSupportsPlaybackRateChange; } }; AblePlayer.prototype.setPlaybackRate = function (rate) { - + rate = Math.max(0.5, rate); - if (this.hasClosedDesc && this.descMethod === 'text') { - // keep speech rate in sync with playback rate even if descOn is false - this.syncSpeechToPlaybackRate(rate); + if (this.hasClosedDesc && this.descMethod === 'text') { + // keep speech rate in sync with playback rate even if descOn is false + this.syncSpeechToPlaybackRate(rate); } + this.syncSignVideo( {'rate' : rate } ); + if (this.player === 'html5') { this.media.playbackRate = rate; - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.setPlaybackRate(rate); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.setPlaybackRate(rate); } - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.playbackRate = rate; - } + this.syncSignVideo( { 'rate' : rate } ); this.playbackRate = rate; - this.$speed.text(this.tt.speed + ': ' + rate.toFixed(2).toString() + 'x'); - }; + this.$speed.text( this.translate( 'speed', 'Speed' ) + ': ' + rate.toFixed(2).toString() + 'x'); + }; AblePlayer.prototype.getPlaybackRate = function () { if (this.player === 'html5') { return this.media.playbackRate; - } - else if (this.player === 'youtube') { - if (this.youTubePlayerReady) { - return this.youTubePlayer.getPlaybackRate(); - } + } else if (this.player === 'youtube' && (this.youTubePlayerReady)) { + return this.youTubePlayer.getPlaybackRate(); } }; AblePlayer.prototype.isPaused = function () { - // Note there are three player states that count as paused in this sense, + // Note there are three player states that count as paused in this sense, // and one of them is named 'paused'. // A better name would be 'isCurrentlyNotPlayingOrBuffering' - var state; - if (this.player === 'vimeo') { // just rely on value of this.playing - if (this.playing) { - return false; - } - else { - return true; - } - } - else { + return (this.playing) ? false : true; + } else { this.getPlayerState().then(function(state) { // if any of the following is true, consider the media 'paused' return state === 'paused' || state === 'stopped' || state === 'ended'; @@ -8982,43 +7865,71 @@ if (typeof module !== "undefined" && module.exports) { } }; + AblePlayer.prototype.syncSignVideo = function(options) { + if (this.hasSignLanguage && ( this.signVideo || this.signYoutube ) ) { + if (options && typeof options.time !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.currentTime = options.time; + } else { + this.youTubeSignPlayer.seekTo(options.time,true); + } + } + if (options && typeof options.rate !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.playbackRate = options.rate; + } else { + this.youTubeSignPlayer.setPlaybackRate(options.rate); + } + } + if (options && typeof options.pause !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.pause(true); + } else { + this.youTubeSignPlayer.pauseVideo(); + } + } + if (options && typeof options.play !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.play(true); + } else { + this.youTubeSignPlayer.playVideo(); + } + } + if (options && typeof options.volume !== 'undefined') { + if ( this.signVideo ) { + this.signVideo.volume = 0; + } + } + } + }; + AblePlayer.prototype.pauseMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'pause' : true } ); if (this.player === 'html5') { this.media.pause(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.pause(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.pauseVideo(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.pause(); } }; AblePlayer.prototype.playMedia = function () { - var thisObj = this; + this.syncSignVideo( { 'play' : true } ); if (this.player === 'html5') { this.media.play(true); - if (this.hasSignLanguage && this.signVideo) { - this.signVideo.play(true); - } - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { this.youTubePlayer.playVideo(); if (typeof this.$posterImg !== 'undefined') { this.$posterImg.hide(); } this.stoppingYouTube = false; - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.vimeoPlayer.play(); } this.startedPlaying = true; @@ -9032,44 +7943,19 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.fadeControls = function(direction) { // Visibly fade controls without hiding them from screen reader users - // direction is either 'out' or 'in' - // TODO: This still needs work. // After the player fades, it's replaced by an empty space // Would be better if the video and captions expanded to fill the void - // Attempted to fade out to 0 opacity, then move the playerDiv offscreen - // and expand the mediaContainer to fill the vacated space - // However, my attempts to do this have been choppy and buggy - // Code is preserved below and commented out + // replace JS animation with CSS animation in 12/2025. - var thisObj, mediaHeight, playerHeight, newMediaHeight; var thisObj = this; if (direction == 'out') { // get the original height of two key components: - mediaHeight = this.$mediaContainer.height(); - playerHeight = this.$playerDiv.height(); - newMediaHeight = mediaHeight + playerHeight; - - // fade slowly to transparency - this.$playerDiv.fadeTo(2000,0,function() { - / - // when finished, position playerDiv offscreen - // thisObj.$playerDiv.addClass('able-offscreen'); - // Expand the height of mediaContainer to fill the void (needs work) - thisObj.$mediaContainer.animate({ - height: newMediaHeight - },500); - / - }); - } - else if (direction == 'in') { - // restore captionsContainer to its original height (needs work) - // this.$mediaContainer.removeAttr('style'); - // fade relatively quickly back to its original position with full opacity - // this.$playerDiv.removeClass('able-offscreen').fadeTo(100,1); - this.$playerDiv.fadeTo(100,1); + this.$playerDiv.addClass( 'fade-out' ).removeClass( 'fade-in' ); + } else if (direction == 'in') { + this.$playerDiv.addClass( 'fade-in' ).removeClass( 'fade-out' ); } }; @@ -9087,7 +7973,7 @@ if (typeof module !== "undefined" && module.exports) { this.hideControlsTimeoutStatus = 'active'; }; - AblePlayer.prototype.refreshControls = function(context, duration, elapsed) { + AblePlayer.prototype.refreshControls = function(context = 'init', duration, elapsed) { // context is one of the following: // 'init' - initial build (or subsequent change that requires full rebuild) @@ -9108,34 +7994,30 @@ if (typeof module !== "undefined" && module.exports) { // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx - var thisObj, duration, elapsed, lastChapterIndex, displayElapsed, - updateLive, textByState, timestamp, widthUsed, - leftControls, rightControls, seekbarWidth, seekbarSpacer, captionsCount, - buffered, newTop, statusBarHeight, speedHeight, statusBarWidthBreakpoint, - newSvgData; + var thisObj, duration, textByState, timestamp, captionsCount, newTop, statusBarWidthBreakpoint; thisObj = this; - if (this.swappingSrc) { - if (this.playing) { - // wait until new source has loaded before refreshing controls - // can't wait if player is NOT playing because some critical events - // won't fire until playback of new media starts - return; - } + // wait until new source has loaded before refreshing controls + // some critical events won't fire until playback of new media starts + if ( this.swappingSrc && this.playing ) { + return; } - if (context === 'timeline' || context === 'init') { - // all timeline-related functionality requires both duration and elapsed + if ( context === 'timeline' || context === 'init' ) { + // Update timeline controls. + var lastChapterIndex, displayElapsed, updateLive, widthUsed, + leftControls, rightControls, seekbarWidth, buffered; + // all timeline-related functionality requires duration if (typeof this.duration === 'undefined') { - // wait until duration is known before proceeding with refresh - return; + // wait until duration is known before proceeding with refresh + return; } if (this.useChapterTimes) { this.chapterDuration = this.getChapterDuration(); this.chapterElapsed = this.getChapterElapsed(); } - if (this.useFixedSeekInterval === false && this.seekIntervalCalculated === false && this.duration > 0) { + if ( !this.useFixedSeekInterval && !this.seekIntervalCalculated && this.duration > 0) { // couldn't calculate seekInterval previously; try again. this.setSeekInterval(); } @@ -9149,32 +8031,26 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends // need to adjust seekbar duration to match video end this.seekBar.setDuration(this.duration - this.currentChapter.start); - } - else { + } else { this.seekBar.setDuration(this.chapterDuration); } - } - else { + } else { // this is not the last chapter this.seekBar.setDuration(this.chapterDuration); } - } - else { - if (!(this.duration === undefined || isNaN(this.duration) || this.duration === -1)) { - this.seekBar.setDuration(this.duration); - } + } else if ( !(this.duration === undefined || isNaN(this.duration) || this.duration === -1) ) { + this.seekBar.setDuration(this.duration); } if (!(this.seekBar.tracking)) { // Only update the aria live region if we have an update pending // (from a seek button control) or if the seekBar has focus. // We use document.activeElement instead of $(':focus') due to a strange bug: - // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. + // When the seekHead element is focused, .is(':focus') is failing and $(':focus') is returning an undefined element. updateLive = this.liveUpdatePending || this.seekBar.seekHead.is($(document.activeElement)); this.liveUpdatePending = false; if (this.useChapterTimes) { this.seekBar.setPosition(this.chapterElapsed, updateLive); - } - else { + } else { this.seekBar.setPosition(this.elapsed, updateLive); } } @@ -9182,22 +8058,15 @@ if (typeof module !== "undefined" && module.exports) { // When seeking, display the seek bar time instead of the actual elapsed time. if (this.seekBar.tracking) { displayElapsed = this.seekBar.lastTrackPosition; - } - else { - if (this.useChapterTimes) { - displayElapsed = this.chapterElapsed; - } - else { - displayElapsed = this.elapsed; - } + } else { + displayElapsed = ( this.useChapterTimes ) ? this.chapterElapsed : this.elapsed; } } // update elapsed & duration if (typeof this.$durationContainer !== 'undefined') { if (this.useChapterTimes) { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.chapterDuration)); - } - else { + } else { this.$durationContainer.text(' / ' + this.formatSecondsAsColonTime(this.duration)); } } @@ -9209,27 +8078,22 @@ if (typeof module !== "undefined" && module.exports) { // Update seekbar width. // To do this, we need to calculate the width of all buttons surrounding it. if (this.seekBar) { - widthUsed = 0; + let controlWrapper = this.seekBar.wrapperDiv.parent().parent(); leftControls = this.seekBar.wrapperDiv.parent().prev('div.able-left-controls'); rightControls = leftControls.next('div.able-right-controls'); - leftControls.children().each(function () { - if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); // true = include margin - } - }); + widthUsed = leftControls.outerWidth(true); rightControls.children().each(function () { if ($(this).attr('role')=='button') { - widthUsed += $(this).outerWidth(true); + widthUsed += $(this).outerWidth(true) + 5; } }); if (this.fullscreen) { seekbarWidth = $(window).width() - widthUsed; - } - else { + } else { // seekbar is wide enough to fill the remaining space - // include a 5px buffer to account for minor browser differences - seekbarWidth = this.$ableWrapper.width() - widthUsed - 5; - } + // include a 10px buffer to account for minor browser differences or custom styles. + seekbarWidth = controlWrapper.width() - widthUsed - 10; + } // Sometimes some minor fluctuations based on browser weirdness, so set a threshold. if (Math.abs(seekbarWidth - this.seekBar.getWidth()) > 5) { this.seekBar.setWidth(seekbarWidth); @@ -9240,122 +8104,69 @@ if (typeof module !== "undefined" && module.exports) { // Update buffering progress. // TODO: Currently only using the first HTML5 buffered interval, // but this fails sometimes when buffering is split into two or more intervals. - if (this.player === 'html5') { - if (this.media.buffered.length > 0) { - buffered = this.media.buffered.end(0); - if (this.useChapterTimes) { - if (buffered > this.chapterDuration) { - buffered = this.chapterDuration; - } - if (this.seekBar) { - this.seekBar.setBuffered(buffered / this.chapterDuration); - } - } - else { - if (this.seekBar) { - if (!isNaN(buffered)) { - this.seekBar.setBuffered(buffered / duration); - } - } + if (this.player === 'html5' && this.media.buffered.length > 0) { + buffered = this.media.buffered.end(0); + if (this.useChapterTimes) { + if (buffered > this.chapterDuration) { + buffered = this.chapterDuration; } - } - } - else if (this.player === 'youtube') { - if (this.seekBar) { - if (this.youTubePlayerReady) { - this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + if (this.seekBar) { + this.seekBar.setBuffered(buffered / this.chapterDuration); } + } else if ( this.seekBar && !isNaN(buffered) ) { + this.seekBar.setBuffered(buffered / duration); } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'youtube' && this.seekBar && this.youTubePlayerReady ) { + this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()); + } else if (this.player === 'vimeo') { // TODO: Add support for Vimeo buffering update } - } // end if context == 'timeline' or 'init' - - if (context === 'descriptions' || context == 'init'){ + } + if (context === 'descriptions' || context == 'init') { if (this.$descButton) { - if (this.descOn) { - this.$descButton.removeClass('buttonOff').attr('aria-label',this.tt.turnOffDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOffDescriptions); - } - else { - this.$descButton.addClass('buttonOff').attr('aria-label',this.tt.turnOnDescriptions); - this.$descButton.find('span.able-clipped').text(this.tt.turnOnDescriptions); - } + this.toggleButtonState( + this.$descButton, + this.descOn, + this.translate( 'turnOffDescriptions', 'Turn off descriptions' ), + this.translate( 'turnOnDescriptions', 'Turn on descriptions' ), + ); } } - if (context === 'captions' || context == 'init'){ + if (context === 'captions' || context == 'init') { if (this.$ccButton) { captionsCount = this.captions.length; - - // Button has a different title depending on the number of captions. - // If only one caption track, this is "Show captions" and "Hide captions" - // Otherwise, it is just always "Captions" - if (!this.captionsOn) { - this.$ccButton.addClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'false') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.showCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.showCaptions); - } - } - else { - this.$ccButton.removeClass('buttonOff'); - this.$ccButton.attr('aria-pressed', 'true') - if (captionsCount === 1) { - this.$ccButton.attr('aria-label',this.tt.hideCaptions); - this.$ccButton.find('span.able-clipped').text(this.tt.hideCaptions); - } - } - if (captionsCount > 1) { this.$ccButton.attr({ - 'aria-label': this.tt.captions, 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-captions-menu' }); - this.$ccButton.find('span.able-clipped').text(this.tt.captions); } + var ariaLabelOn = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captionsCount > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + var ariaPressed = ( captionsCount > 1 ) ? true : false; + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); } } if (context === 'fullscreen' || context == 'init'){ if (this.$fullscreenButton) { if (!this.fullscreen) { - this.$fullscreenButton.attr('aria-label', this.tt.enterFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-collapse').addClass('icon-fullscreen-expand'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-expand'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.enterFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenExpandButtonImg); - } - } - else { - this.$fullscreenButton.attr('aria-label',this.tt.exitFullscreen); - if (this.iconType === 'font') { - this.$fullscreenButton.find('span').first().removeClass('icon-fullscreen-expand').addClass('icon-fullscreen-collapse'); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('fullscreen-collapse'); - this.$fullscreenButton.find('svg').attr('viewBox',newSvgData[0]); - this.$fullscreenButton.find('path').attr('d',newSvgData[1]); - this.$fullscreenButton.find('span.able-clipped').text(this.tt.exitFullscreen); - } - else { - this.$fullscreenButton.find('img').attr('src',this.fullscreenCollapseButtonImg); - } + this.$fullscreenButton.attr( 'aria-label', this.translate( 'enterFullScreen', 'Enter full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-expand' ); + } else { + this.$fullscreenButton.attr('aria-label', this.translate( 'exitFullScreen', 'Exit full screen' ) ); + this.getIcon( this.$fullscreenButton, 'fullscreen-collapse' ); } } } @@ -9366,18 +8177,8 @@ if (typeof module !== "undefined" && module.exports) { if (!this.hideBigPlayButton) { this.$bigPlayButton.show(); this.$bigPlayButton.attr('aria-hidden', 'false'); - - } - if (this.fullscreen) { - this.$bigPlayButton.width($(window).width()); - this.$bigPlayButton.height($(window).height()); } - else { - this.$bigPlayButton.width(this.$mediaContainer.width()); - this.$bigPlayButton.height(this.$mediaContainer.height()); - } - } - else { + } else { this.$bigPlayButton.hide(); this.$bigPlayButton.attr('aria-hidden', 'true'); } @@ -9391,8 +8192,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.prefAutoScrollTranscript === 1) { this.autoScrollTranscript = true; this.$autoScrollTranscriptCheckbox.prop('checked',true); - } - else { + } else { this.autoScrollTranscript = false; this.$autoScrollTranscriptCheckbox.prop('checked',false); } @@ -9410,8 +8210,8 @@ if (typeof module !== "undefined" && module.exports) { // only scroll once after moving a highlight if (this.movingHighlight) { this.$transcriptDiv.scrollTop(newTop); - this.movingHighlight = false; - } + this.movingHighlight = false; + } } } } @@ -9421,7 +8221,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$chaptersButton) { this.$chaptersButton.attr({ - 'aria-label': this.tt.chapters, + 'aria-label': this.translate( 'chapters', 'Chapters' ), 'aria-haspopup': 'true', 'aria-controls': this.mediaId + '-chapters-menu' }); @@ -9432,231 +8232,139 @@ if (typeof module !== "undefined" && module.exports) { // update status textByState = { - 'stopped': this.tt.statusStopped, - 'paused': this.tt.statusPaused, - 'playing': this.tt.statusPlaying, - 'buffering': this.tt.statusBuffering, - 'ended': this.tt.statusEnd + 'stopped': this.translate( 'statusStopped', 'Stopped' ), + 'paused': this.translate( 'statusPaused', 'Paused' ), + 'playing': this.translate( 'statusPlaying', 'Playing' ), + 'buffering': this.translate( 'statusBuffering', 'Buffering' ), + 'ended': this.translate( 'statusEnd', 'End of track' ) }; if (this.stoppingYouTube) { // stoppingYouTube is true temporarily while video is paused and seeking to 0 // See notes in handleRestart() // this.stoppingYouTube will be reset when seek to 0 is finished (in event.js > onMediaUpdateTime()) - if (this.$status.text() !== this.tt.statusStopped) { - this.$status.text(this.tt.statusStopped); - } - if (this.$playpauseButton.find('span').first().hasClass('icon-pause')) { - if (this.iconType === 'font') { - this.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else if (this.iconType === 'svg') { - newSvgData = this.getSvgData('play'); - this.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - this.$playpauseButton.find('path').attr('d',newSvgData[1]); - this.$playpauseButton.find('span.able-clipped').text(this.tt.play); - } - else { - this.$playpauseButton.find('img').attr('src',this.playButtonImg); - } - } - } - else { - if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { - // Update the text only if it's changed since it has role="alert"; - // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. - this.getPlayerState().then(function(currentState) { - if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { - // Debounce updates; only update after status has stayed steadily different for a while - // "A while" is defined differently depending on context - if (thisObj.swappingSrc) { - // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), - // so set a longer wait time before writing a status message - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) - } - } - else { - // for all other contexts (e.g., users clicks Play/Pause) - // user should receive more rapid feedback - if (!thisObj.debouncingStatus) { - thisObj.statusMessageThreshold = 250; // in ms - } - } - timestamp = (new Date()).getTime(); - if (!thisObj.statusDebounceStart) { - thisObj.statusDebounceStart = timestamp; - // Call refreshControls() again after allotted time has passed - thisObj.debouncingStatus = true; - thisObj.statusTimeout = setTimeout(function () { - thisObj.debouncingStatus = false; - thisObj.refreshControls(context); - }, thisObj.statusMessageThreshold); - } - else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { - thisObj.$status.text(textByState[currentState]); - thisObj.statusDebounceStart = null; - clearTimeout(thisObj.statusTimeout); - thisObj.statusTimeout = null; + if (this.$status.text() !== this.translate( 'statusStopped', 'Stopped' ) ) { + this.$status.text( this.translate( 'statusStopped', 'Stopped' ) ); + } + this.getIcon( this.$playpauseButton, 'play' ); + } else if (typeof this.$status !== 'undefined' && typeof this.seekBar !== 'undefined') { + // Update the text only if it's changed since it has role="alert"; + // also don't update while tracking, since this may Pause/Play the player but we don't want to send a Pause/Play update. + this.getPlayerState().then(function(currentState) { + if (thisObj.$status.text() !== textByState[currentState] && !thisObj.seekBar.tracking) { + // Debounce updates; only update after status has stayed steadily different for a while + // "A while" is defined differently depending on context + if (thisObj.swappingSrc) { + // this is where most of the chatter occurs (e.g., playing, paused, buffering, playing), + // so set a longer wait time before writing a status message + if (!thisObj.debouncingStatus) { + thisObj.statusMessageThreshold = 2000; // in ms (2 seconds) } + } else if (!thisObj.debouncingStatus) { + // for all other contexts (e.g., users clicks Play/Pause) + // user should receive more rapid feedback + thisObj.statusMessageThreshold = 250; // in ms } - else { + timestamp = (new Date()).getTime(); + if (!thisObj.statusDebounceStart) { + thisObj.statusDebounceStart = timestamp; + // Call refreshControls() again after allotted time has passed + thisObj.debouncingStatus = true; + thisObj.statusTimeout = setTimeout(function () { + thisObj.debouncingStatus = false; + thisObj.refreshControls(context); + }, thisObj.statusMessageThreshold); + } else if ((timestamp - thisObj.statusDebounceStart) > thisObj.statusMessageThreshold) { + thisObj.$status.text(textByState[currentState]); thisObj.statusDebounceStart = null; - thisObj.debouncingStatus = false; clearTimeout(thisObj.statusTimeout); thisObj.statusTimeout = null; } - // Don't change play/pause button display while using the seek bar (or if YouTube stopped) - if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { - if (currentState === 'paused' || currentState === 'stopped' || currentState === 'ended') { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-pause').addClass('icon-play'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('play'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.play); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.playButtonImg); - } - } - else { - thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); - - if (thisObj.iconType === 'font') { - thisObj.$playpauseButton.find('span').first().removeClass('icon-play').addClass('icon-pause'); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else if (thisObj.iconType === 'svg') { - newSvgData = thisObj.getSvgData('pause'); - thisObj.$playpauseButton.find('svg').attr('viewBox',newSvgData[0]); - thisObj.$playpauseButton.find('path').attr('d',newSvgData[1]); - thisObj.$playpauseButton.find('span.able-clipped').text(thisObj.tt.pause); - } - else { - thisObj.$playpauseButton.find('img').attr('src',thisObj.pauseButtonImg); - } - } + } else { + thisObj.statusDebounceStart = null; + thisObj.debouncingStatus = false; + clearTimeout(thisObj.statusTimeout); + thisObj.statusTimeout = null; + } + // Don't change play/pause button display while using the seek bar (or if YouTube stopped) + if (!thisObj.seekBar.tracking && !thisObj.stoppingYouTube) { + if (currentState === 'paused' || currentState === 'stopped' || currentState === 'ended') { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.play); + thisObj.getIcon( thisObj.$playpauseButton, 'play' ); + } else { + thisObj.$playpauseButton.attr('aria-label',thisObj.tt.pause); + thisObj.getIcon( thisObj.$playpauseButton, 'pause' ); } - }); - } + } + }); } } // Show/hide status bar content conditionally if (!this.fullscreen) { statusBarWidthBreakpoint = 300; - statusBarHeight = this.$statusBarDiv.height(); - speedHeight = this.$statusBarDiv.find('span.able-speed').height(); - if (speedHeight > (statusBarHeight + 5)) { - // speed bar is wrapping (happens often in German player) + if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { + // Player is too small for a speed span this.$statusBarDiv.find('span.able-speed').hide(); this.hidingSpeed = true; - } - else { + } else { if (this.hidingSpeed) { this.$statusBarDiv.find('span.able-speed').show(); this.hidingSpeed = false; } - if (this.$statusBarDiv.width() < statusBarWidthBreakpoint) { - // Player is too small for a speed span - this.$statusBarDiv.find('span.able-speed').hide(); - this.hidingSpeed = true; - } - else { - if (this.hidingSpeed) { - this.$statusBarDiv.find('span.able-speed').show(); - this.hidingSpeed = false; - } - } } } }; - AblePlayer.prototype.getHiddenWidth = function($el) { - - // jQuery returns for width() if element is hidden - // this function is a workaround - - // save a reference to a cloned element that can be measured - var $hiddenElement = $el.clone().appendTo('body'); - - // calculate the width of the clone - var width = $hiddenElement.outerWidth(); - - // remove the clone from the DOM - $hiddenElement.remove(); - - return width; - }; - AblePlayer.prototype.handlePlay = function(e) { - if (this.paused) { - // user clicked play - this.okToPlay = true; + // user clicked play + this.okToPlay = true; this.playMedia(); - if (this.synth.paused) { - // media was paused while description was speaking - // resume utterance - this.synth.resume(); + if (this.synth.paused) { + // media was paused while description was speaking + // resume utterance + this.synth.resume(); } - } - else { + } else { // user clicked pause - this.okToPlay = false; + this.okToPlay = false; this.pauseMedia(); - if (this.speakingDescription) { - // pause the current utterance - // it will resume when the user presses play - this.synth.pause(); + if (this.speakingDescription) { + // pause the current utterance + // it will resume when the user presses play + this.synth.pause(); } } - if (this.speechEnabled === null) { - this.initSpeech('play'); + if (this.speechEnabled === null) { + this.initSpeech('play'); } }; AblePlayer.prototype.handleRestart = function() { - if (this.speakingDescription) { - // cancel audio description - this.synth.cancel(); - } + if (this.speakingDescription) { + // cancel audio description + this.synth.cancel(); + } this.seekTo(0); }; AblePlayer.prototype.handlePrevTrack = function() { - if (this.playlistIndex === 0) { - // currently on the first track - // wrap to bottom and play the last track - this.playlistIndex = this.$playlist.length - 1; - } - else { - this.playlistIndex--; - } + // currently on the first track + // wrap to bottom and play the last track + this.playlistIndex = (this.playlistIndex === 0) ? this.$playlist.length - 1 : this.playlistIndex--; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; AblePlayer.prototype.handleNextTrack = function() { - if (this.playlistIndex === this.$playlist.length - 1) { - // currently on the last track - // wrap to top and play the forst track - this.playlistIndex = 0; - } - else { - this.playlistIndex++; - } + // currently on the last track + // wrap to top and play the forst track + this.playlistIndex = (this.playlistIndex === this.$playlist.length - 1) ? 0 : this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex); }; @@ -9666,15 +8374,10 @@ if (typeof module !== "undefined" && module.exports) { var targetTime; targetTime = this.elapsed - this.seekInterval; - if (this.useChapterTimes) { - if (targetTime < this.currentChapter.start) { - targetTime = this.currentChapter.start; - } - } - else { - if (targetTime < 0) { - targetTime = 0; - } + if (this.useChapterTimes && (targetTime < this.currentChapter.start)) { + targetTime = this.currentChapter.start; + } else if (targetTime < 0) { + targetTime = 0; } this.seekTo(targetTime); }; @@ -9692,14 +8395,12 @@ if (typeof module !== "undefined" && module.exports) { // targetTime would exceed the end of the video (or chapter) // scrub to end of whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); - } - else if (this.duration % targetTime < this.seekInterval) { + } else if (this.duration % targetTime < this.seekInterval) { // nothing left but pocket change after seeking to targetTime // go ahead and seek to end of video (or chapter), whichever is earliest targetTime = Math.min(this.duration, this.currentChapter.end); } - } - else { + } else { // this is not the last chapter if (targetTime > this.currentChapter.end) { // targetTime would exceed the end of the chapter @@ -9707,8 +8408,7 @@ if (typeof module !== "undefined" && module.exports) { targetTime = this.currentChapter.end; } } - } - else { + } else { // not using chapter times if (targetTime > this.duration) { targetTime = this.duration; @@ -9732,16 +8432,14 @@ if (typeof module !== "undefined" && module.exports) { if (this.player === 'html5') { this.setPlaybackRate(this.getPlaybackRate() + (0.25 dir)); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { if (this.youTubePlayerReady) { rates = this.youTubePlayer.getAvailablePlaybackRates(); currentRate = this.getPlaybackRate(); index = rates.indexOf(currentRate); if (index === -1) { console.log('ERROR: Youtube returning unknown playback rate ' + currentRate.toString()); - } - else { + } else { index += dir; // Can only increase or decrease rate if there's another rate available. if (index < rates.length && index >= 0) { @@ -9749,27 +8447,15 @@ if (typeof module !== "undefined" && module.exports) { } } } - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { // range is 0.5 to 2 // increase/decrease in inrements of 0.5 vimeoMin = 0.5; vimeoMax = 2; if (dir === 1) { - if (this.vimeoPlaybackRate + 0.5 <= vimeoMax) { - newRate = this.vimeoPlaybackRate + 0.5; - } - else { - newRate = vimeoMax; - } - } - else if (dir === -1) { - if (this.vimeoPlaybackRate - 0.5 >= vimeoMin) { - newRate = this.vimeoPlaybackRate - 0.5; - } - else { - newRate = vimeoMin; - } + newRate = (this.vimeoPlaybackRate + 0.5 <= vimeoMax) ? this.vimeoPlaybackRate + 0.5 : vimeoMax; + } else if (dir === -1) { + newRate = (this.vimeoPlaybackRate - 0.5 >= vimeoMin) ? this.vimeoPlaybackRate - 0.5 : vimeoMin; } this.setPlaybackRate(newRate); } @@ -9778,47 +8464,39 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.handleCaptionToggle = function() { var thisObj = this; - var captions; + var captions, ariaPressed; if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup // immediately after closing it this.hidingPopup = false; return false; } - if (this.captions.length) { - captions = this.captions; - } - else { - captions = []; - } + + captions = (this.captions.length) ? this.captions : []; if (captions.length === 1) { // When there's only one set of captions, just do an on/off toggle. if (this.captionsOn === true) { // turn them off this.captionsOn = false; this.prefCaptions = 0; - this.$ccButton.attr('aria-pressed', 'false'); - this.updateCookie('prefCaptions'); + ariaPressed = false; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.unloadModule('captions'); - } - else if (this.usingVimeoCaptions) { - this.vimeoPlayer.disableTextTrack(); - } - else { + } else if (this.usingVimeoCaptions) { + this.vimeoPlayer.disableTextTrack(); + } else { this.$captionsWrapper.hide(); } - } - else { + } else { // captions are off. Turn them on. this.captionsOn = true; this.prefCaptions = 1; - this.$ccButton.attr('aria-pressed', 'true'); - this.updateCookie('prefCaptions'); + ariaPressed = true; + this.updatePreferences('prefCaptions'); if (this.usingYouTubeCaptions) { this.youTubePlayer.loadModule('captions'); - } - else if (this.usingVimeoCaptions) { + } else if (this.usingVimeoCaptions) { this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(track) { // track.language = the iso code for the language // track.kind = 'captions' or 'subtitles' @@ -9838,9 +8516,8 @@ if (typeof module !== "undefined" && module.exports) { console.log('Error loading ' + track.label + ' ' + track.kind + ' track'); break; } - }); - } - else { + }); + } else { this.$captionsWrapper.show(); } for (var i=0; i<captions.length; i++) { @@ -9853,9 +8530,7 @@ if (typeof module !== "undefined" && module.exports) { this.selectedDescriptions = this.descriptions[0]; } } - this.refreshControls('captions'); - } - else { + } else { // there is more than one caption track. // clicking on a track is handled via caption.js > getCaptionClickFunction() if (this.captionsPopup && this.captionsPopup.is(':visible')) { @@ -9863,8 +8538,7 @@ if (typeof module !== "undefined" && module.exports) { this.hidingPopup = false; this.$ccButton.attr('aria-expanded', 'false') this.waitThenFocus(this.$ccButton); - } - else { + } else { this.closePopups(); if (this.captionsPopup) { this.captionsPopup.show(); @@ -9876,17 +8550,27 @@ if (typeof module !== "undefined" && module.exports) { thisObj.captionsPopup.css('left', thisObj.$ccButton.position().left) // Place focus on the first button (even if another button is checked) thisObj.captionsPopup.find('li').removeClass('able-focus'); - thisObj.captionsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.captionsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } } } + var ariaLabelOn = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'showCaptions', 'Show captions' ); + var ariaLabelOff = ( captions.length > 1 ) ? this.translate( 'captions', 'Captions' ) : this.translate( 'hideCaptions', 'Hide captions' ); + + this.toggleButtonState( + this.$ccButton, + this.captionsOn, + ariaLabelOff, + ariaLabelOn, + ariaPressed + ); }; /** * Gives enough time for DOM changes to take effect before adjusting focus. * Helpful for allowing screen reading of elements whose state is intermittently changed. - * + * * @param {} $el element to focus on @param {} timeout optional wait time in milliseconds before focus / @@ -9894,9 +8578,9 @@ if (typeof module !== "undefined" && module.exports) { // Default wait time of 50 ms var _timeout = (timeout === undefined || timeout === null) ? 50 : timeout; - + setTimeout(function() { - $el.focus(); + $el.trigger('focus'); }, _timeout); } @@ -9910,9 +8594,8 @@ if (typeof module !== "undefined" && module.exports) { if (this.chaptersPopup.is(':visible')) { this.chaptersPopup.hide(); this.hidingPopup = false; - this.$chaptersButton.attr('aria-expanded','false').focus(); - } - else { + this.$chaptersButton.attr('aria-expanded','false').trigger('focus'); + } else { this.closePopups(); this.chaptersPopup.show(); this.$chaptersButton.attr('aria-expanded','true'); @@ -9923,10 +8606,9 @@ if (typeof module !== "undefined" && module.exports) { // Otherwise, place focus on the first chapter this.chaptersPopup.find('li').removeClass('able-focus'); if (this.chaptersPopup.find('li[aria-checked="true"]').length) { - this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass('able-focus'); - } - else { - this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').focus(); + this.chaptersPopup.find('li[aria-checked="true"]').trigger('focus').addClass('able-focus'); + } else { + this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').trigger('focus'); } } }; @@ -9935,12 +8617,12 @@ if (typeof module !== "undefined" && module.exports) { this.descOn = !this.descOn; this.prefDesc = + this.descOn; // convert boolean to integer - this.updateCookie('prefDesc'); + this.updatePreferences('prefDesc'); if (typeof this.$descDiv !== 'undefined') { if (!this.$descDiv.is(':hidden')) { this.$descDiv.hide(); } - // NOTE: now showing $descDiv here if previously hidden + // NOTE: now showing $descDiv here if previously hidden // that's handled elsewhere, dependent on whether there's text to show } this.initDescription(); @@ -9962,8 +8644,8 @@ if (typeof module !== "undefined" && module.exports) { thisObj = this; - if (this.speechEnabled === null) { - this.initSpeech('prefs'); + if (this.speechEnabled === null) { + this.initSpeech('prefs'); } if (this.hidingPopup) { // stopgap to prevent spacebar in Firefox from reopening popup @@ -9977,18 +8659,17 @@ if (typeof module !== "undefined" && module.exports) { // restore each menu item to original hidden state this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); if (!this.showingPrefsDialog) { - this.$prefsButton.focus(); + this.$prefsButton.trigger('focus'); } // wait briefly, then reset hidingPopup setTimeout(function() { thisObj.hidingPopup = false; },100); - } - else { + } else { this.closePopups(); this.prefsPopup.show(); this.$prefsButton.attr('aria-expanded','true'); - this.$prefsButton.focus(); // focus first on prefs button to announce expanded state + this.$prefsButton.trigger('focus'); // focus first on prefs button to announce expanded state // give time for focus on button then adjust popup settings and focus setTimeout(function() { prefsButtonPosition = thisObj.$prefsButton.position(); @@ -9998,115 +8679,88 @@ if (typeof module !== "undefined" && module.exports) { thisObj.prefsPopup.css('left', prefsMenuLeft); // remove prior focus and set focus on first item; also change tabindex from -1 to 0 thisObj.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','0'); - thisObj.prefsPopup.find('li').first().focus().addClass('able-focus'); + thisObj.prefsPopup.find('li').first().trigger('focus').addClass('able-focus'); }, 50); } }; - AblePlayer.prototype.handleHelpClick = function() { - this.setFullscreen(false); - this.helpDialog.show(); - }; - AblePlayer.prototype.handleTranscriptToggle = function () { - var thisObj = this; - - if (this.$transcriptDiv.is(':visible')) { + var visible = this.$transcriptDiv.is(':visible'); + if ( visible ) { this.$transcriptArea.hide(); - this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); this.prefTranscript = 0; - this.$transcriptButton.focus().addClass('able-focus'); - // wait briefly before resetting stopgap var - // otherwise the keypress used to select 'Close' will trigger the transcript button - // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms - // Setting timeout to 100ms is a virtual guarantee of proper functionality - setTimeout(function() { - thisObj.closingTranscript = false; - }, 100); - } - else { - this.positionDraggableWindow('transcript'); - this.$transcriptArea.show(); - // showing transcriptArea has a cascading effect of showing all content within transcriptArea - // need to re-hide the popup menu - this.$transcriptPopup.hide(); - this.$transcriptButton.removeClass('buttonOff').attr('aria-label',this.tt.hideTranscript); - this.$transcriptButton.find('span.able-clipped').text(this.tt.hideTranscript); - this.prefTranscript = 1; - // move focus to first focusable element (window options button) - this.focusNotClick = true; - this.$transcriptArea.find('button').first().focus(); - // wait briefly before resetting stopgap var - setTimeout(function() { - thisObj.focusNotClick = false; - }, 100); - } - this.updateCookie('prefTranscript'); + if ( this.transcriptType === 'popup' ) { + this.$transcriptButton.trigger('focus').addClass('able-focus'); + // wait briefly before resetting stopgap var + // otherwise the keypress used to select 'Close' will trigger the transcript button + // Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms + // Setting timeout to 100ms is a virtual guarantee of proper functionality + setTimeout(function() { + thisObj.closingTranscript = false; + }, 100); + } + } else { + if ( this.transcriptType === 'popup' ) { + this.positionDraggableWindow('transcript'); + this.$transcriptArea.show(); + // showing transcriptArea has a cascading effect of showing all content within transcriptArea + // need to re-hide the popup menu + this.$transcriptPopup.hide(); + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.prefTranscript = 1; + // move focus to first focusable element (window options button) + this.focusNotClick = true; + this.$transcriptArea.find('button').first().trigger('focus'); + // wait briefly before resetting stopgap var + setTimeout(function() { + thisObj.focusNotClick = false; + }, 100); + } else { + this.toggleButtonState( this.$transcriptButton, ! visible, this.translate( 'hideTranscript', 'Hide transcript' ), this.translate( 'showTranscript', 'Show transcript' ) ); + this.$transcriptArea.show(); + } + } + this.updatePreferences('prefTranscript'); }; AblePlayer.prototype.handleSignToggle = function () { var thisObj = this; - - if (this.$signWindow.is(':visible')) { + var visible = this.$signWindow.is(':visible'); + if ( visible ) { this.$signWindow.hide(); - this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign); - this.$signButton.find('span.able-clipped').text(this.tt.showSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 0; - this.$signButton.focus().addClass('able-focus'); + this.$signButton.trigger('focus').addClass('able-focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.closingSign = false; }, 100); - } - else { + } else { this.positionDraggableWindow('sign'); this.$signWindow.show(); // showing signWindow has a cascading effect of showing all content within signWindow // need to re-hide the popup menu this.$signPopup.hide(); - this.$signButton.removeClass('buttonOff').attr('aria-label',this.tt.hideSign); - this.$signButton.find('span.able-clipped').text(this.tt.hideSign); + this.toggleButtonState( this.$signButton, ! visible, this.translate( 'hideSign', 'Hide sign language' ), this.translate( 'showSign', 'Show sign language' ) ); this.prefSign = 1; this.focusNotClick = true; - this.$signWindow.find('button').first().focus(); + this.$signWindow.find('button').first().trigger('focus'); // wait briefly before resetting stopgap var // otherwise the keypress used to select 'Close' will trigger the transcript button setTimeout(function() { thisObj.focusNotClick = false; }, 100); } - this.updateCookie('prefSign'); + this.updatePreferences('prefSign'); }; - AblePlayer.prototype.isFullscreen = function () { - - // NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen, - // which is defined in setFullscreen() - // This function returns true if any element is fullscreen - // but doesn't tell us whether a particular element is in fullscreen - // (e.g., if there are multiple players on the page) - // The Boolean this.fullscreen is defined separately for each player instance - - if (this.nativeFullscreenSupported()) { - return (document.fullscreenElement || - document.webkitFullscreenElement || - document.webkitCurrentFullscreenElement || - document.mozFullscreenElement || - document.msFullscreenElement) ? true : false; - } - else { - return this.modalFullscreenActive ? true : false; - } - } - AblePlayer.prototype.setFullscreen = function (fullscreen) { if (this.fullscreen == fullscreen) { - // replace isFullscreen() with a Boolean. see function for explanation return; } var thisObj = this; @@ -10116,114 +8770,71 @@ if (typeof module !== "undefined" && module.exports) { if (this.nativeFullscreenSupported()) { // Note: many varying names for options for browser compatibility. if (fullscreen) { + var scroll = { + x: window.pageXOffset || 0, + y: window.pageYOffset || 0 + } + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.rePositionDraggableWindow("transcript"); + } + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.rePositionDraggableWindow("sign"); + } + this.scrollPosition = scroll; // Initialize fullscreen - if (el.requestFullscreen) { el.requestFullscreen(); - } - else if (el.webkitRequestFullscreen) { + } else if (el.webkitRequestFullscreen) { el.webkitRequestFullscreen(); } - else if (el.mozRequestFullscreen) { - el.mozRequestFullscreen(); - } - else if (el.msRequestFullscreen) { - el.msRequestFullscreen(); - } this.fullscreen = true; - } - else { + } else { // Exit fullscreen - this.restoringAfterFullscreen = true; + this.restoringAfterFullscreen = true; if (document.exitFullscreen) { document.exitFullscreen(); - } - else if (document.webkitExitFullscreen) { + } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); - } - else if (document.webkitCancelFullscreen) { + } else if (document.webkitCancelFullscreen) { document.webkitCancelFullscreen(); } - else if (document.mozCancelFullscreen) { - document.mozCancelFullscreen(); + if (this.prefTranscript === 1) { + // transcript is on. Go ahead and reposition it + this.positionDraggableWindow("transcript"); } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); + if (this.prefSign === 1) { + // sign is on. Go ahead and reposition it + this.positionDraggableWindow("sign"); } this.fullscreen = false; } + } else { + // Removed non-native fullscreen mode in 4.8, which only supported iOS. + // Native fullscreen is on iOS 18+ devices behind a feature flag + // The polyfill hasn't worked for years. } - else { - // Non-native fullscreen support through modal dialog. - // Create dialog on first run through. - if (!this.fullscreenDialog) { - var $dialogDiv = $('<div>'); - // create a hidden alert, communicated to screen readers via aria-describedby - var $fsDialogAlert = $('<p>',{ - 'class': 'able-screenreader-alert' - }).text(this.tt.fullscreen); // In English: "Full screen"; TODO: Add alert text that is more descriptive - $dialogDiv.append($fsDialogAlert); - // now render this as a dialog - this.fullscreenDialog = new AccessibleDialog($dialogDiv, this.$fullscreenButton, 'dialog', true, 'Fullscreen video player', $fsDialogAlert, this.tt.exitFullscreen, '100%', true, function () { thisObj.handleFullscreenToggle() }); - $('body').append($dialogDiv); - } - - // Track whether paused/playing before moving element; moving the element can stop playback. - var wasPaused = this.paused; - - if (fullscreen) { - this.modalFullscreenActive = true; - this.fullscreenDialog.show(); - - // Move player element into fullscreen dialog, then show. - // Put a placeholder element where player was. - this.$modalFullscreenPlaceholder = $('<div class="placeholder">'); - this.$modalFullscreenPlaceholder.insertAfter($el); - $el.appendTo(this.fullscreenDialog.modal); - - // Column left css is 50% by default; set to 100% for full screen. - if ($el === this.$ableColumnLeft) { - $el.width('100%'); - } - var newHeight = $(window).height() - this.$playerDiv.height(); - if (typeof this.$descDiv !== 'undefined') { - if (!this.$descDiv.is(':hidden')) { - newHeight -= this.$descDiv.height(); - } - } - } - else { - this.modalFullscreenActive = false; - if ($el === this.$ableColumnLeft) { - $el.width('50%'); - } - $el.insertAfter(this.$modalFullscreenPlaceholder); - this.$modalFullscreenPlaceholder.remove(); - this.fullscreenDialog.hide(); - } - - // Resume playback if moving stopped it. - if (!wasPaused && this.paused) { - this.playMedia(); - } - } - // add event handlers for changes in fullscreen mode. - // Browsers natively trigger this event with the Escape key, - // in addition to clicking the exit fullscreen button - $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(e) { + // add event handlers for changes in fullscreen mode. + // Browsers natively trigger this event with the Escape key, + // in addition to clicking the exit fullscreen button + $(document).on('fullscreenchange webkitfullscreenchange', function(e) { // NOTE: e.type = the specific event that fired (in case needing to control for browser-specific idiosyncrasies) if (!thisObj.fullscreen) { // user has just exited full screen thisObj.restoringAfterFullscreen = true; - } - else if (!thisObj.clickedFullscreenButton) { + } else if (!thisObj.clickedFullscreenButton) { // user triggered fullscreenchange without clicking fullscreen button thisObj.fullscreen = false; thisObj.restoringAfterFullscreen = true; } thisObj.resizePlayer(); thisObj.refreshControls('fullscreen'); - + // Reset scrollPosition after closing fullscreen. + if ( thisObj.scrollPosition ) { + scroll = thisObj.scrollPosition; + window.scrollTo( scroll.x, scroll.y ); + } // NOTE: The fullscreenchange (or browser-equivalent) event is triggered twice // when exiting fullscreen via the "Exit fullscreen" button (only once if using Escape) // Not sure why, but consequently we need to be sure thisObj.clickedFullscreenButton @@ -10233,9 +8844,9 @@ if (typeof module !== "undefined" && module.exports) { // resetting clickedFullscreenButton after a timeout seems to be better approach setTimeout(function() { thisObj.clickedFullscreenButton = false; - thisObj.restoringAfterFullscreen = false; - },1000); - }); + thisObj.restoringAfterFullscreen = false; + },100); + }); }; AblePlayer.prototype.handleFullscreenToggle = function () { @@ -10244,8 +8855,7 @@ if (typeof module !== "undefined" && module.exports) { this.setFullscreen(!this.fullscreen); if (stillPaused) { this.pauseMedia(); // when toggling fullscreen and media is just paused, keep media paused. - } - else if (!stillPaused) { + } else if (!stillPaused) { this.playMedia(); // when toggling fullscreen and media is playing, continue playing. } // automatically hide controller in fullscreen mode @@ -10257,8 +8867,7 @@ if (typeof module !== "undefined" && module.exports) { this.fadeControls('out'); this.controlsHidden = true; } - } - else { + } else { // exit fullscreen mode this.hideControls = this.hideControlsOriginal; if (!this.hideControls) { // do not hide controls @@ -10273,89 +8882,132 @@ if (typeof module !== "undefined" && module.exports) { } } } - // don't resizePlayer yet; that will be called in response to the window resize event - // this.resizePlayer(); + // don't resizePlayer yet; that will be called in response to the window resize event }; AblePlayer.prototype.handleTranscriptLockToggle = function (val) { this.autoScrollTranscript = val; // val is boolean this.prefAutoScrollTranscript = +val; // convert boolean to numeric 1 or 0 for cookie - this.updateCookie('prefAutoScrollTranscript'); + this.updatePreferences('prefAutoScrollTranscript'); this.refreshControls('transcript'); }; + AblePlayer.prototype.getIcon = function( $button, id, forceImg = false ) { + // Remove existing HTML before generating. + // iconData: [0 = svg viewbox, 1 = svg path, 2 = icon font class, 3 = image file] + var iconType = this.iconType; + var iconData = this.getIconData( id ); + iconType = ( null === iconData[3] ) ? 'svg' : iconType; + iconType = ( forceImg === true ) ? 'img' : iconType; - AblePlayer.prototype.showTooltip = function($tooltip) { + var existingIcon = $button.find( iconType + '#ableplayer-' + id ); + // Avoid repainting icon if there's no change. + if ( existingIcon.length > 0 ) { + return; + } + $button.find('svg, img, span').remove(); - if (($tooltip).is(':animated')) { - $tooltip.stop(true,true).show(); + if (iconType === 'font') { + var $buttonIcon = $('<span>', { + 'class': iconData[2], + }); + $button.append( $buttonIcon ); + } else if (iconType === 'svg') { + // Function to create SVG nodes. + function getNode(n, v) { + n = document.createElementNS("http://www.w3.org/2000/svg", n); + for (var p in v) { + n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m) { + return "-" + m.toLowerCase(); + }), v[p]); + } + return n; + } + var icon = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ); + icon.setAttribute( 'focusable', 'false' ); + icon.setAttribute( 'aria-hidden', 'true'); + icon.setAttribute( 'viewBox', iconData[0] ); + icon.setAttribute( 'id', 'ableplayer-' + id ); + let path = getNode( 'path', { d: iconData[1] } ); + icon.appendChild( path ); + + $button.append( icon ); + // Refresh the DOM. + $button.html($button.html()); + } else { + var $buttonImg = $('<img>',{ + 'src': iconData[3], + 'alt': '', + 'role': 'presentation' + }); + $button.append($buttonImg); + $button.find('img').attr('src',iconData[3]); } - else { - $tooltip.stop().show(); + }; + + AblePlayer.prototype.setText = function( $button, text ) { + $button.attr( 'aria-label', text ); + }; + + AblePlayer.prototype.toggleButtonState = function($button, isOn, onLabel, offLabel, ariaPressed = false, ariaExpanded = false) { + // isOn means "the feature is being turned on". + let buttonOff = ( $button.hasClass( 'buttonOff' ) ) ? true : false; + if ( buttonOff && ! isOn || ! buttonOff && isOn ) { + // Only toggle state if button state does not match feature state. + return; } + if (! isOn) { + $button.addClass('buttonOff').attr('aria-label', offLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'false'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'false' ); + } + } else { + $button.removeClass('buttonOff').attr('aria-label', onLabel); + if ( ariaPressed ) { + $button.attr('aria-pressed', 'true'); + } + if ( ariaExpanded ) { + $button.attr( 'aria-expanded', 'true' ); + } + } + }; + + AblePlayer.prototype.showTooltip = function($tooltip) { + + $tooltip.show(); }; - AblePlayer.prototype.showAlert = function( msg, location ) { + AblePlayer.prototype.showAlert = function( msg, location = 'main' ) { // location is either of the following: // 'main' (default) // 'screenreader (visibly hidden) // 'sign' (sign language window) - // 'transcript' (trasncript window) - var thisObj, $alertBox, $parentWindow, alertLeft, alertTop; + // 'transcript' (transcript window) + var thisObj, $alertBox, $parentWindow; thisObj = this; - + $alertBox = thisObj.$alertBox; + $parentWindow = thisObj.$ableDiv; if (location === 'transcript') { - $alertBox = this.$transcriptAlert; - $parentWindow = this.$transcriptArea; - } - else if (location === 'sign') { - $alertBox = this.$signAlert; - $parentWindow = this.$signWindow; - } - else if (location === 'screenreader') { - $alertBox = this.$srAlertBox; - } - else { - $alertBox = this.$alertBox; - } - $alertBox.text(msg).show(); - if (location == 'transcript' || location === 'sign') { - if ($parentWindow.width() > $alertBox.width()) { - alertLeft = $parentWindow.width() / 2 - $alertBox.width() / 2; - } - else { - // alert box is wider than its container. Position it far left and let it wrap - alertLeft = 10; - } - if (location === 'sign') { - // position alert in the lower third of the sign window (to avoid covering the signer) - alertTop = ($parentWindow.height() / 3) * 2; - } - else if (location === 'transcript') { - // position alert just beneath the toolbar to avoid getting lost among transcript text - alertTop = this.$transcriptToolbar.height() + 30; - } - $alertBox.css({ - top: alertTop + 'px', - left: alertLeft + 'px' - }); - } - else if (location !== 'screenreader') { - // The original formula incorporated offset() into the calculation - // but at some point this began resulting in an alert that's off-centered - // Changed in v2.2.17, but here's the original for reference in case needed: - // left: this.$playerDiv.offset().left + (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - $alertBox.css({ - left: (this.$playerDiv.width() / 2) - ($alertBox.width() / 2) - }); + $parentWindow = thisObj.$transcriptArea; + } else if (location === 'sign') { + $parentWindow = thisObj.$signWindow; + } else if (location === 'screenreader') { + $alertBox = thisObj.$srAlertBox; } + $alertBox.find('span').text(msg); + $alertBox.appendTo($parentWindow) + $alertBox.css( {'display': 'flex'} ); + if (location !== 'screenreader') { - setTimeout(function () { - $alertBox.fadeOut(300); - }, 3000); + setTimeout( function () { + $alertBox.hide(); + }, 30000 ); } }; @@ -10364,22 +9016,10 @@ if (typeof module !== "undefined" && module.exports) { // returns true if the target alert has already been shown // useful for throttling alerts that only need to be shown once // e.g., move alerts with instructions for dragging a window - if (which === 'transcript') { - if (this.showedTranscriptAlert) { - return true; - } - else { - return false; - } - } - else if (which === 'sign') { - if (this.showedSignAlert) { - return true; - } - else { - return false; - } + return this.showedTranscriptAlert ?? false; + } else if (which === 'sign') { + return this.showedSignAlert ?? false; } return false; } @@ -10387,105 +9027,82 @@ if (typeof module !== "undefined" && module.exports) { // Resizes all relevant player attributes. AblePlayer.prototype.resizePlayer = function (width, height) { - var captionSizeOkMin, captionSizeOkMax, captionSize, newCaptionSize, newLineHeight; - - var newWidth, newHeight, $iframe, alertTop; + var captionSize, newWidth, newHeight, $iframe; - if (this.mediaType === 'audio') { - return; + if (this.mediaType === 'audio') { + return; } - - if (typeof width !== 'undefined' && typeof height !== 'undefined') { - // this is being called the first time a player is initialized + if (typeof width !== 'undefined' && typeof height !== 'undefined') { + // this is being called the first time a player is initialized // width and height were collected from the HTML, YouTube, or Vimeo media API - // so are reflective of the actual size of the media - // use these values to calculate aspectRatio - this.aspectRatio = height / width; - if (this.playerWidth) { - // default width is already defined via a width or data-width attribute. Use that. - newWidth = this.playerWidth; - if (this.playerHeight) { - newHeight = this.playerHeight; - } - else { - newHeight = Math.round(newWidth * this.aspectRatio); - this.playerHeight = newHeight; - } - } - else { - // playerWidth was not defined via HTML attributes - if (this.player === 'html5') { - newWidth = $(window).width(); - } - else { - newWidth = this.$ableWrapper.width(); - } - newHeight = Math.round(newWidth * this.aspectRatio); - } - } - else if (this.fullscreen) { - this.$ableWrapper.addClass('fullscreen'); - newWidth = $(window).width(); + // so are reflective of the actual size of the media + // use these values to calculate aspectRatio + this.aspectRatio = height / width; + if (this.playerWidth) { + // default width is already defined via a width or data-width attribute. Use that. + newWidth = this.playerWidth; + if (this.playerHeight) { + newHeight = this.playerHeight; + } else { + newHeight = Math.round(newWidth * this.aspectRatio); + this.playerHeight = newHeight; + } + } else { + // playerWidth was not defined via HTML attributes + newWidth = (this.player === 'html5') ? $(window).width() : this.$ableWrapper.width(); + newHeight = Math.round(newWidth * this.aspectRatio); + } + } else if (this.fullscreen) { + this.$ableWrapper.addClass('fullscreen'); + newWidth = $(window).width(); // the 5 pixel buffer is arbitrary, but results in a better fit for all browsers - newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; + newHeight = $(window).height() - this.$playerDiv.outerHeight() - 5; this.positionCaptions('overlay'); - } - else { // not fullscreen, and not first time initializing player + } else { // not fullscreen, and not first time initializing player this.$ableWrapper.removeClass('fullscreen'); - if (this.player === 'html5') { - if (this.playerWidth) { - newWidth = this.playerWidth; - } - else { - // use full size of window - // player will be downsized to fit container if CSS requires it - newWidth = $(window).width(); - } - } - else { - newWidth = this.$ableWrapper.width(); + if (this.player === 'html5') { + newWidth = (this.playerWidth) ? this.playerWidth : $(window).width(); + } else { + newWidth = this.$ableWrapper.width(); } - newHeight = Math.round(newWidth * this.aspectRatio); - this.positionCaptions(this.prefCaptionsPosition); + newHeight = Math.round(newWidth * this.aspectRatio); + this.positionCaptions(this.prefCaptionsPosition); } if (this.debug) { - console.log('resizePlayer to ' + newWidth + 'x' + newHeight); + console.log('resizePlayer to ' + newWidth + 'x' + newHeight); } // Now size the player with newWidth and newHeight - if (this.player === 'youtube' || this.player === 'vimeo') { - $iframe = this.$ableWrapper.find('iframe'); - if (this.player === 'youtube' && this.youTubePlayer) { - // alternatively, YouTube API offers a method for setting the video size - // this adds width and height attributes to the iframe - // but might have other effects, so best to do it this way - this.youTubePlayer.setSize(newWidth,newHeight); - } - else { - // Vimeo API does not have a method for changing size of player - // Therefore, need to change iframe attributes directly + if (this.player === 'youtube' || this.player === 'vimeo') { + $iframe = this.$ableWrapper.find('iframe'); + if (this.player === 'youtube' && this.youTubePlayer) { + // alternatively, YouTube API offers a method for setting the video size + // this adds width and height attributes to the iframe + // but might have other effects, so best to do it this way + this.youTubePlayer.setSize(newWidth,newHeight); + } else { + // Vimeo API does not have a method for changing size of player + // Therefore, need to change iframe attributes directly $iframe.attr({ 'width': newWidth, 'height': newHeight - }); + }); } - if (this.playerWidth && this.playerHeight) { - if (this.fullscreen) { - // remove constraints - $iframe.css({ + if (this.playerWidth && this.playerHeight) { + if (this.fullscreen) { + // remove constraints + $iframe.css({ 'max-width': '', 'max-height': '' - }); - } - else { + }); + } else { // use CSS on iframe to enforce explicitly defined size constraints - $iframe.css({ + $iframe.css({ 'max-width': this.playerWidth + 'px', 'max-height': this.playerHeight + 'px' }); } } - } - else if (this.player === 'html5') { + } else if (this.player === 'html5') { if (this.fullscreen) { this.$media.attr({ 'width': newWidth, @@ -10495,46 +9112,37 @@ if (typeof module !== "undefined" && module.exports) { 'width': newWidth, 'height': newHeight }); - } - else { - // No constraints. Let CSS handle the positioning. + } else { + // No constraints. Let CSS handle the positioning. this.$media.removeAttr('width height'); - this.$ableWrapper.css({ - 'width': newWidth + 'px', - 'height': 'auto' - }); - } + this.$ableWrapper.removeAttr( 'style' ); + } } // Resize captions if (typeof this.$captionsDiv !== 'undefined') { - // Font-size is too small in full screen view - // use viewport units (vw) instead - // % units work fine if not fullscreen - // prefCaptionSize is expressed as a percentage - captionSize = parseInt(this.prefCaptionsSize,10); - if (this.fullscreen) { - captionSize = (captionSize / 100) + 'vw'; + // Font-size is too small in full screen view + // use viewport units (vw) for large viewports + // % units work fine if not fullscreen + // prefCaptionSize is expressed as a percentage + var isSmallScreen = false; + var windowWidth = window.screen.width; + if ( windowWidth < 1200 ) { + isSmallScreen = true; } - else { - captionSize = captionSize + '%'; + captionSize = parseInt(this.prefCaptionsSize,10); + if (this.fullscreen && ! isSmallScreen ) { + captionSize = (captionSize / 100) + 'vw'; + } else if ( this.fullscreen && isSmallScreen ) { + captionSize = '1.2rem'; + } else { + captionSize = captionSize + '%'; } this.$captionsDiv.css({ 'font-size': captionSize }); } - - // Reposition alert message (video player only) - // just below the vertical center of the mediaContainer - // hopefully above captions, but not too far from the controller bar - if (this.mediaType === 'video') { - alertTop = Math.round(this.$mediaContainer.height() / 3) * 2; - this.$alertBox.css({ - top: alertTop + 'px' - }); - } - - this.refreshControls(); + this.refreshControls(); }; AblePlayer.prototype.retrieveOffscreenWindow = function( which, width, height ) { @@ -10547,8 +9155,7 @@ if (typeof module !== "undefined" && module.exports) { if (which == 'transcript') { window = this.$transcriptArea; - } - else if (which == 'sign') { + } else if (which == 'sign') { window = this.$signWindow; } windowWidth = window.width(); @@ -10577,41 +9184,18 @@ if (typeof module !== "undefined" && module.exports) { } }; - AblePlayer.prototype.getHighestZIndex = function() { - - // returns the highest z-index on page - // used to ensure dialogs (or potentially other windows) are on top - - var max, $elements, z; - max = 0; - - // exclude the Able Player dialogs and windows - $elements = $('body ').not('.able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area'); - - $elements.each(function(){ - z = $(this).css('z-index'); - if (Number.isInteger(+z)) { // work only with integer values, not 'auto' - if (parseInt(z) > max) { - max = parseInt(z); - } - } - }); - return max; - }; - AblePlayer.prototype.updateZIndex = function(which) { // update z-index of 'transcript' or 'sign', relative to each other // direction is always 'up' (i.e., move window to top) // windows come to the top when the user clicks on them - var defHighZ, defLowZ, highestZ, transcriptZ, signZ, newHighZ, newLowZ; + var defHighZ, defLowZ, transcriptZ, signZ, newHighZ, newLowZ; // set the default z-indexes, as defined in ableplayer.css defHighZ = 8000; // by default, assigned to the sign window defLowZ = 7000; // by default, assigned to the transcript area - highestZ = this.getHighestZIndex(); // highest z-index on the page, excluding Able Player windows & modals - // NOTE: Although highestZ is collected here, it currently isn't used. + // Previously collected the highest z-index. Removed in 4.6. // If something on the page has a higher z-index than the transcript or sign window, do we care? // Excluding it here assumes "No". Our immediate concern is with the relationship between our own components. // If we elevate our z-indexes so our content is on top, we run the risk of starting a z-index war. @@ -10625,8 +9209,7 @@ if (typeof module !== "undefined" && module.exports) { // restore to the default this.$transcriptArea.css('z-index',defLowZ); } - } - else if (typeof this.$signWindow !== 'undefined') { + } else if (typeof this.$signWindow !== 'undefined') { signZ = parseInt(this.$signWindow.css('z-index')); if (signZ > defHighZ) { // restore to the default @@ -10646,24 +9229,20 @@ if (typeof module !== "undefined" && module.exports) { // the two windows are equal; restore defaults (the target window will be on top) newHighZ = defHighZ; newLowZ = defLowZ; - } - else if (transcriptZ > signZ) { + } else if (transcriptZ > signZ) { if (which === 'transcript') { // transcript is already on top; nothing to do return false; - } - else { + } else { // swap z's newHighZ = transcriptZ; newLowZ = signZ; } - } - else { // signZ is greater + } else { // signZ is greater if (which === 'sign') { // sign is already on top; nothing to do return false; - } - else { + } else { newHighZ = signZ; newLowZ = transcriptZ; } @@ -10672,8 +9251,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { this.$transcriptArea.css('z-index',newHighZ); this.$signWindow.css('z-index',newLowZ); - } - else if (which === 'sign') { + } else if (which === 'sign') { this.$signWindow.css('z-index',newHighZ); this.$transcriptArea.css('z-index',newLowZ); } @@ -10690,7 +9268,7 @@ if (typeof module !== "undefined" && module.exports) { // This was a group decision based on the belief that users may want a transcript // that is in a different language than the captions - var i, captions, descriptions, chapters, meta, langHasChanged; + var i, captions, descriptions, chapters, meta; // Captions for (i = 0; i < this.captions.length; i++) { @@ -10732,21 +9310,20 @@ if (typeof module !== "undefined" && module.exports) { // chapters popup is setup automatically when setupPopups() is called later with no param // not sure why it was included here. // this.setupPopups('chapters'); - } - else if (source === 'transcript') { + } else if (source === 'transcript') { this.transcriptCaptions = captions; this.transcriptChapters = chapters; this.transcriptDescriptions = descriptions; } if (this.selectedDescriptions) { - // updating description voice to match new description language - this.setDescriptionVoice(); - if (this.$sampleDescDiv) { - if (this.sampleText) { - for (i = 0; i < this.sampleText.length; i++) { - if (this.sampleText[i].lang === this.selectedDescriptions.language) { - this.currentSampleText = this.sampleText[i]['text']; - this.$sampleDescDiv.html(this.currentSampleText); + // updating description voice to match new description language + this.setDescriptionVoice(); + if (this.$sampleDescDiv) { + if (this.sampleText) { + for (i = 0; i < this.sampleText.length; i++) { + if (this.sampleText[i].lang === this.selectedDescriptions.language) { + this.currentSampleText = this.sampleText[i]['text']; + this.$sampleDescDiv.html(this.currentSampleText); } } } @@ -10892,7 +9469,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 1; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); thisObj.refreshControls("captions"); }; }; @@ -10928,7 +9505,7 @@ if (typeof module !== "undefined" && module.exports) { // save preference to cookie thisObj.prefCaptions = 0; - thisObj.updateCookie("prefCaptions"); + thisObj.updatePreferences("prefCaptions"); if (!this.swappingSrc) { thisObj.refreshControls("captions"); thisObj.updateCaption(); @@ -10955,10 +9532,7 @@ if (typeof module !== "undefined" && module.exports) { if (typeof thisCaption !== "undefined") { if (this.currentCaption !== thisCaption) { // it's time to load the new caption into the container div - captionText = this.flattenCueForCaption(cues[thisCaption]).replace( - /\n/g, - "<br>" - ); + captionText = this.flattenCueForCaption(cues[thisCaption]).replace( /\n/g, "<br>" ); this.$captionsDiv.html(captionText); this.currentCaption = thisCaption; @@ -11040,24 +9614,24 @@ if (typeof module !== "undefined" && module.exports) { switch (pref) { case "prefCaptionsFont": - options[0] = ["serif", this.tt.serif]; - options[1] = ["sans-serif", this.tt.sans]; - options[2] = ["cursive", this.tt.cursive]; - options[3] = ["fantasy", this.tt.fantasy]; - options[4] = ["monospace", this.tt.monospace]; + options[0] = ["serif", this.translate( 'serif', 'serif' )]; + options[1] = ["sans-serif", this.translate( 'sans', 'sans-serif' )]; + options[2] = ["cursive", this.translate( 'cursive', 'cursive' )]; + options[3] = ["fantasy", this.translate( 'fantasy', 'fantasy' )]; + options[4] = ["monospace", this.translate( 'monospace', 'monospace' )]; break; case "prefCaptionsColor": case "prefCaptionsBGColor": // HTML color values must be in English - options[0] = ["white", this.tt.white]; - options[1] = ["yellow", this.tt.yellow]; - options[2] = ["green", this.tt.green]; - options[3] = ["cyan", this.tt.cyan]; - options[4] = ["blue", this.tt.blue]; - options[5] = ["magenta", this.tt.magenta]; - options[6] = ["red", this.tt.red]; - options[7] = ["black", this.tt.black]; + options[0] = ["white", this.translate( 'white', 'white' )]; + options[1] = ["yellow", this.translate( 'yellow', 'yellow' )]; + options[2] = ["green", this.translate( 'green', 'green' )]; + options[3] = ["cyan", this.translate( 'cyan', 'cyan' )]; + options[4] = ["blue", this.translate( 'blue', 'blue' )]; + options[5] = ["magenta", this.translate( 'magenta', 'magenta' )]; + options[6] = ["red", this.translate( 'red', 'red' )]; + options[7] = ["black", this.translate( 'black', 'black' )]; break; case "prefCaptionsSize": @@ -11077,8 +9651,8 @@ if (typeof module !== "undefined" && module.exports) { break; case "prefCaptionsStyle": - options[0] = this.tt.captionsStylePopOn; - options[1] = this.tt.captionsStyleRollUp; + options[0] = this.translate( 'captionsStylePopOn', 'Pop-on' ); + options[1] = this.translate( 'captionsStyleRollUp', 'Roll-up' ); break; case "prefCaptionsPosition": @@ -11116,7 +9690,7 @@ if (typeof module !== "undefined" && module.exports) { // this function handles stylizing of the sample caption text in the Prefs dialog // plus the actual production captions // TODO: consider applying the same user prefs to visible text-based description - var property, newValue, opacity, lineHeight; + var property, newValue, opacity; if (typeof $element !== "undefined") { if (pref == "prefCaptionsPosition") { @@ -11212,16 +9786,17 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.populateChaptersDiv = function() { - var headingLevel, headingType, headingId, $chaptersHeading, - $chaptersList; - + var headingLevel, headingType, headingId, $chaptersHeading; + if ( ! this.chaptersDivLocation ) { + return; + } if ($('#' + this.chaptersDivLocation)) { this.$chaptersDiv = $('#' + this.chaptersDivLocation); this.$chaptersDiv.addClass('able-chapters-div'); // empty content from previous build before starting fresh - this.$chaptersDiv.empty(); + this.$chaptersDiv.empty(); // add optional header if (this.chaptersTitle) { @@ -11237,10 +9812,9 @@ if (typeof module !== "undefined" && module.exports) { this.$chaptersNav = $('<nav>'); if (this.chaptersTitle) { - this.$chaptersNav.attr('aria-labelledby',headingId); - } - else { - this.$chaptersNav.attr('aria-label',this.tt.chapters); + this.$chaptersNav.attr( 'aria-labelledby', headingId ); + } else { + this.$chaptersNav.attr( 'aria-label', this.translate( 'chapters', 'Chapters' ) ); } this.$chaptersDiv.append(this.$chaptersNav); @@ -11252,32 +9826,25 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.updateChaptersList = function() { var thisObj, cues, $chaptersList, c, thisChapter, - $chapterItem, $chapterButton, buttonId, hasDefault, - getClickFunction, $clickedItem, $chaptersList, thisChapterIndex; + $chapterItem, $chapterButton, hasDefault, + getClickFunction, $clickedItem, $chaptersList; thisObj = this; - // TODO: Update this so it can change the chapters popup menu + // TODO: Update this so it can change the chapters popup menu // currently it only works if chapters are in an external container if (!this.$chaptersNav) { return false; } if (typeof this.useChapterTimes === 'undefined') { - if (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) { - this.useChapterTimes = true; - } - else { - this.useChapterTimes = false; - } + this.useChapterTimes = (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) ? true : false; } if (this.useChapterTimes) { cues = this.selectedChapters.cues; - } - else if (this.chapters.length >= 1) { + } else if (this.chapters.length >= 1) { cues = this.chapters[0].cues; - } - else { + } else { cues = []; } if (cues.length > 0) { @@ -11296,7 +9863,6 @@ if (typeof module !== "undefined" && module.exports) { thisObj.seekTrigger = 'chapter'; $clickedItem = $(this).closest('li'); $chaptersList = $(this).closest('ul').find('li'); - thisChapterIndex = $chaptersList.index($clickedItem); $chaptersList.removeClass('able-current-chapter') .children('button').removeAttr('aria-current'); $clickedItem.addClass('able-current-chapter') @@ -11365,7 +9931,7 @@ if (typeof module !== "undefined" && module.exports) { return; } - var chapters, i, thisChapterIndex, chapterLabel; + var chapters, i, thisChapterIndex; chapters = this.selectedChapters.cues; for (i = 0; i < chapters.length; i++) { @@ -11415,12 +9981,10 @@ if (typeof module !== "undefined" && module.exports) { // chapter ends before or after video ends, adjust chapter end to match video end chapterEnd = this.duration; this.currentChapter.end = this.duration; - } - else { + } else { chapterEnd = this.currentChapter.end; } - } - else { // this is not the last chapter + } else { // this is not the last chapter chapterEnd = this.currentChapter.end; } return chapterEnd - this.currentChapter.start; @@ -11436,8 +10000,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.elapsed > this.currentChapter.start) { return this.elapsed - this.currentChapter.start; - } - else { + } else { return 0; } }; @@ -11450,12 +10013,10 @@ if (typeof module !== "undefined" && module.exports) { var newTime = this.currentChapter.start + chapterTime; if (newTime > this.currentChapter.end) { return this.currentChapter.end; - } - else { + } else { return newTime; } - } - else { + } else { return chapterTime; } }; @@ -11476,7 +10037,7 @@ if (typeof module !== "undefined" && module.exports) { setTimeout(function() { thisObj.hidingPopup = false; }, 100); - thisObj.$chaptersButton.focus(); + thisObj.$chaptersButton.trigger('focus'); } }; @@ -11530,7 +10091,7 @@ if (typeof module !== "undefined" && module.exports) { cueText = this.flattenCueForMeta(cues[thisMeta]); cueLines = cueText.split("\n"); for (i = 0; i < cueLines.length; i++) { - line = $.trim(cueLines[i]); + line = cueLines[i].trim(); if (line.toLowerCase().trim() === "pause") { // don't show big play button when pausing via metadata this.hideBigPlayButton = true; @@ -11538,7 +10099,7 @@ if (typeof module !== "undefined" && module.exports) { } else if (line.toLowerCase().substring(0, 6) == "focus:") { focusTarget = line.substring(6).trim(); if ($(focusTarget).length) { - $(focusTarget).focus(); + $(focusTarget).trigger('focus'); } } else { if ($(line).length) { @@ -11549,7 +10110,11 @@ if (typeof module !== "undefined" && module.exports) { typeof showDuration !== "undefined" && !isNaN(showDuration) ) { - $(line).show().delay(showDuration).fadeOut(); + $(line).show(); + const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + delay(showDuration).then(() => { + $(line).hide(); + }); } else { // no duration specified. Just show the element until end time specified in VTT file $(line).show(); @@ -11621,11 +10186,11 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.setupTranscript = function () { - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - if (this.usingYouTubeCaptions || this.usingVimeoCaptions) { - // a transcript is not possible + if (this.usingYouTubeCaptions || this.usingVimeoCaptions || this.hideTranscriptButton ) { + // a transcript is not possible or is disabled. this.transcriptType = null; deferred.resolve(); } else { @@ -11640,10 +10205,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (this.transcriptType) { - if ( - this.transcriptType === "popup" || - this.transcriptType === "external" - ) { + if ( this.transcriptType === "popup" || this.transcriptType === "external" ) { this.injectTranscriptArea(); deferred.resolve(); } else if (this.transcriptType === "manual") { @@ -11670,7 +10232,7 @@ if (typeof module !== "undefined" && module.exports) { this.$transcriptArea = $("<div>", { class: "able-transcript-area", role: "dialog", - "aria-label": this.tt.transcriptTitle, + "aria-label": this.translate( 'transcriptTitle', 'Transcript' ), }); this.$transcriptToolbar = $("<div>", { @@ -11690,11 +10252,15 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); - this.$transcriptToolbar.append( - $autoScrollLabel, - this.$autoScrollTranscriptCheckbox - ); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); + $autoScrollContainer = $( '<div>', { + 'class': 'autoscroll-transcript' + }); + $autoScrollContainer.append( + $autoScrollLabel, + this.$autoScrollTranscriptCheckbox + ); + this.$transcriptToolbar.append( $autoScrollContainer ); // Add field for selecting a transcript language // Only necessary if there is more than one language @@ -11704,7 +10270,7 @@ if (typeof module !== "undefined" && module.exports) { }); $languageSelectLabel = $("<label>", { for: "transcript-language-select-" + this.mediaId, - }).text(this.tt.language); + }).text( this.translate( 'language', 'Language' ) ); this.$transcriptLanguageSelect = $("<select>", { id: "transcript-language-select-" + this.mediaId, }); @@ -11731,6 +10297,8 @@ if (typeof module !== "undefined" && module.exports) { // If client has provided separate transcript location, put it there. // Otherwise append it to the body if (this.transcriptDivLocation) { + this.$transcriptArea.removeAttr( 'role' ); + this.$transcriptArea.removeAttr( 'aria-label' ); $("#" + this.transcriptDivLocation).append(this.$transcriptArea); } else { this.$ableWrapper.append(this.$transcriptArea); @@ -11757,7 +10325,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addTranscriptAreaEvents = function () { var thisObj = this; - this.$autoScrollTranscriptCheckbox.click(function () { + this.$autoScrollTranscriptCheckbox.on( 'click', function () { thisObj.handleTranscriptLockToggle( thisObj.$autoScrollTranscriptCheckbox.prop("checked") ); @@ -11777,7 +10345,7 @@ if (typeof module !== "undefined" && module.exports) { ); if (typeof this.$transcriptLanguageSelect !== "undefined") { - this.$transcriptLanguageSelect.on("click mousedown", function (e) { + this.$transcriptLanguageSelect.on('click', function (e) { // execute default behavior // prevent propagation of mouse event to toolbar or window e.stopPropagation(); @@ -11827,7 +10395,7 @@ if (typeof module !== "undefined" && module.exports) { }); $autoScrollLabel = $("<label>", { for: "autoscroll-transcript-checkbox-" + this.mediaId, - }).text(this.tt.autoScroll); + }).text( this.translate( 'autoScroll', 'Auto scroll' ) ); // Add an auto-scroll checkbox to the toolbar. this.$autoScrollTranscriptCheckbox = $autoScrollInput; @@ -11928,7 +10496,7 @@ if (typeof module !== "undefined" && module.exports) { if (this.$transcriptArea.length > 0) { this.$transcriptArea .find("span.able-transcript-seekpoint") - .click(function (e) { + .on( 'click', function (e) { thisObj.seekTrigger = "transcript"; var spanStart = parseFloat($(this).attr("data-start")); // Add a tiny amount so that we're inside the span. @@ -12007,9 +10575,9 @@ if (typeof module !== "undefined" && module.exports) { if (typeof this.transcriptTitle !== "undefined") { transcriptTitle = this.transcriptTitle; } else if (this.lyricsMode) { - transcriptTitle = this.tt.lyricsTitle; + transcriptTitle = this.translate( 'lyricsTitle', 'Lyrics' ); } else { - transcriptTitle = this.tt.transcriptTitle; + transcriptTitle = this.translate( 'transcriptTitle', 'Transcript' ); } if (!this.transcriptDivLocation) { @@ -12232,7 +10800,7 @@ if (typeof module !== "undefined" && module.exports) { } } if (comp.type === "b" || comp.type == "i") { - result.push($tag, " "); + result.push($tag); } } else { for (var i = 0; i < comp.children.length; i++) { @@ -12245,13 +10813,22 @@ if (typeof module !== "undefined" && module.exports) { }; for (var i = 0; i < cap.components.children.length; i++) { + var next_child_tagname; + if ( i < cap.components.children.length - 1 ) { + next_child_tagname = cap.components.children[i + 1].tagName; + } var results = flattenComponentForCaption(cap.components.children[i]); for (var jj = 0; jj < results.length; jj++) { var result = results[jj]; if (typeof result === "string") { - if (thisObj.lyricsMode) { - // add <br> BETWEEN each caption and WITHIN each caption (if payload includes "\n") - result = result.replace(/\n/g, "<br>") + "<br>"; + if (thisObj.lyricsMode) { + // add <br> WITHIN each caption (if payload includes "\n") + result = result.replace(/\n/g,'<br>'); + + // add <br> BETWEEN each caption, but do not consider sibling style tags within this caption as the next caption! + if ( !next_child_tagname || ( next_child_tagname !== 'i' && next_child_tagname !== 'b' ) ) { + result += '<br>'; + } } else { // just add a space between captions result += " "; @@ -12340,7 +10917,6 @@ if (typeof module !== "undefined" && module.exports) { // organize transcript into blocks using [] and () as starting points var $components = $main.children(); var spanCount = 0; - var openBlock = true; $components.each(function () { if ($(this).hasClass("able-transcript-caption")) { if ( @@ -12350,10 +10926,7 @@ if (typeof module !== "undefined" && module.exports) { // this caption includes a bracket or parenth. Start a new block // close the previous block first if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } @@ -12362,16 +10935,24 @@ if (typeof module !== "undefined" && module.exports) { } else { // this is not a caption. Close the caption block if (spanCount > 0) { - $main - .find(".able-block-temp") - .removeClass("able-block-temp") - .wrapAll('<div class="able-transcript-block"></div>'); + $main = wrapTranscriptBlocks( $main ); spanCount = 0; } } }); + // Close out remaining temp blocks. + $main = wrapTranscriptBlocks( $main ); + return $main; }; + + var wrapTranscriptBlocks = function( $main ) { + $main.find(".able-block-temp") + .removeClass("able-block-temp") + .wrapAll('<div class="able-transcript-block"></div>'); + + return $main; + } })(jQuery); (function ($) { @@ -12390,7 +10971,7 @@ if (typeof module !== "undefined" && module.exports) { // sanitize search string var cleanSearchString = DOMPurify.sanitize(this.searchString); if ($("#" + this.SearchDiv)) { - var searchStringHtml = "<p>" + this.tt.resultsSummary1 + " "; + var searchStringHtml = "<p>" + this.translate( 'resultsSummary1', 'You searched for:') + ' '; searchStringHtml += '<span id="able-search-term-echo">' + cleanSearchString + "</span>"; searchStringHtml += "</p>"; @@ -12402,19 +10983,16 @@ if (typeof module !== "undefined" && module.exports) { var $resultsSummary = $("<p>", { class: "able-search-results-summary", }); - var resultsSummaryText = this.tt.resultsSummary2; - resultsSummaryText += - " <strong>" + resultsArray.length + "</strong> "; - resultsSummaryText += this.tt.resultsSummary3 + " "; - resultsSummaryText += this.tt.resultsSummary4; - $resultsSummary.html(resultsSummaryText); + var resultsSummaryText = this.translate( 'resultsSummary2', 'Found %1 matching items.', [ '<strong>' + resultsArray.length + '</strong>' ] ); + resultsSummaryText += ' ' + this.translate( 'resultsSummary3', 'Click the time associated with any item to play the video from that point.' ); + $resultsSummary.html( resultsSummaryText ); var $resultsList = $("<ul>"); for (var i = 0; i < resultsArray.length; i++) { var resultId = "aria-search-result-" + i; var $resultsItem = $("<li>", {}); var itemStartTime = this.secondsToTime(resultsArray[i]["start"]); var itemLabel = - this.tt.searchButtonLabel + " " + itemStartTime["title"]; + this.translate( 'searchButtonLabel', 'Play at %1', [ itemStartTime["title"] ] ); var itemStartSpan = $("<button>", { class: "able-search-results-time", "data-start": resultsArray[i]["start"], @@ -12437,16 +11015,16 @@ if (typeof module !== "undefined" && module.exports) { class: "able-search-result-text", id: resultId, }); - itemText.html("..." + resultsArray[i]["caption"] + "..."); + itemText.html('...' + resultsArray[i]["caption"] + '...'); $resultsItem.append(itemStartSpan, itemText); $resultsList.append($resultsItem); } - $("#" + this.searchDiv) + $('#' + this.searchDiv) .html(searchStringHtml) .append($resultsSummary, $resultsList); } else { - var noResults = $("<p>").text(this.tt.noResultsFound); - $("#" + this.searchDiv) + var noResults = $('<p>').text( this.translate( 'noResultsFound', 'No results found.' ) ); + $('#' + this.searchDiv) .html(searchStringHtml) .append(noResults); } @@ -12540,36 +11118,36 @@ if (typeof module !== "undefined" && module.exports) { if (hours > 0) { value += hours + ":"; if (hours == 1) { - title += "1 " + this.tt.hour + " "; + title += "1 " + this.translate( 'hour', 'hour' ) + " "; } else { - title += hours + " " + this.tt.hours + " "; + title += hours + " " + this.translate( 'hours', 'hours' ) + " "; } } if (minutes < 10) { value += "0" + minutes + ":"; if (minutes > 0) { if (minutes == 1) { - title += "1 " + this.tt.minute + " "; + title += "1 " + this.translate( 'minute', 'minute' ) + " "; } else { - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } } } else { value += minutes + ":"; - title += minutes + " " + this.tt.minutes + " "; + title += minutes + " " + this.translate( 'minutes', 'minutes' ) + " "; } if (seconds < 10) { value += "0" + seconds; if (seconds > 0) { if (seconds == 1) { - title += "1 " + this.tt.second + " "; + title += "1 " + this.translate( 'second', 'second' ) + " "; } else { - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } } } else { value += seconds; - title += seconds + " " + this.tt.seconds + " "; + title += seconds + " " + this.translate( 'seconds', 'seconds' ) + " "; } var time = []; time["value"] = value; @@ -12582,7 +11160,6 @@ if (typeof module !== "undefined" && module.exports) { // Media events AblePlayer.prototype.onMediaUpdateTime = function (duration, elapsed) { - // duration and elapsed are passed from callback functions of Vimeo API events // duration is expressed as sss.xxx // elapsed is expressed as sss.xxx @@ -12590,17 +11167,17 @@ if (typeof module !== "undefined" && module.exports) { this.getMediaTimes(duration,elapsed).then(function(mediaTimes) { thisObj.duration = mediaTimes['duration']; thisObj.elapsed = mediaTimes['elapsed']; - if (thisObj.duration > 0) { + if (thisObj.duration > 0) { // do all the usual time-sync stuff during playback if (thisObj.prefHighlight === 1) { thisObj.highlightTranscript(thisObj.elapsed); - } + } thisObj.updateCaption(thisObj.elapsed); thisObj.showDescription(thisObj.elapsed); thisObj.updateChapter(thisObj.elapsed); thisObj.updateMeta(thisObj.elapsed); - thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); - } + thisObj.refreshControls('timeline', thisObj.duration, thisObj.elapsed); + } }); }; @@ -12627,34 +11204,32 @@ if (typeof module !== "undefined" && module.exports) { this.playlistIndex = 0; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(0); - } - else { + } else { this.playing = false; this.paused = true; } - } - else { + } else { // this is not the last track. Play the next one. this.playlistIndex++; this.cueingPlaylistItem = true; // stopgap to prevent multiple firings this.cuePlaylistItem(this.playlistIndex) } } - this.refreshControls('init'); + this.refreshControls(); }; AblePlayer.prototype.onMediaNewSourceLoad = function () { - var loadIsComplete = false; + var loadIsComplete = false; if (this.cueingPlaylistItem) { - // this variable was set in order to address bugs caused by multiple firings of media 'end' event + // this variable was set to address bugs caused by multiple firings of media 'end' event // safe to reset now this.cueingPlaylistItem = false; } - if (this.recreatingPlayer) { - // same as above; different bugs - this.recreatingPlayer = false; + if (this.recreatingPlayer) { + // same as above; different bugs + this.recreatingPlayer = false; } if (this.playbackRate) { // user has set playbackRate on a previous src or track @@ -12665,10 +11240,9 @@ if (typeof module !== "undefined" && module.exports) { if (!this.startedPlaying || this.okToPlay) { // start playing; no further user action is required this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.seekTrigger == 'restart' || + } else if (this.seekTrigger == 'restart' || this.seekTrigger == 'chapter' || this.seekTrigger == 'transcript' || this.seekTrigger == 'search' @@ -12677,67 +11251,59 @@ if (typeof module !== "undefined" && module.exports) { // Not included: elements where user might click multiple times in succession // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play this.playMedia(); - loadIsComplete = true; - } - else if (this.swappingSrc) { + loadIsComplete = true; + } else if (this.swappingSrc) { // new source file has just been loaded if (this.hasPlaylist) { // a new source file from the playlist has just been loaded if ((this.playlistIndex !== this.$playlist.length) || this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.swapTime > 0) { - if (this.seekStatus === 'complete') { + } else if (this.swapTime > 0) { + if (this.seekStatus === 'complete') { if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else if (this.seekStatus === 'seeking') { - } - else { - if (this.swapTime === this.elapsed) { - // seek is finished! - this.seekStatus = 'complete'; + loadIsComplete = true; + } else if (this.seekStatus === 'seeking') { + // Do nothing. + } else { + if (this.swapTime === this.elapsed) { + // seek is finished! + this.seekStatus = 'complete'; if (this.okToPlay) { // should be able to resume playback - this.playMedia(); + this.playMedia(); } - loadIsComplete = true; - } - else { - // seeking hasn't started yet - // first, determine whether it's possible - if (this.hasDescTracks) { + loadIsComplete = true; + } else { + // seeking hasn't started yet + // first, determine whether it's possible + if (this.hasDescTracks) { // do nothing. Unable to seek ahead if there are descTracks - loadIsComplete = true; - } - else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { + loadIsComplete = true; + } else if (this.durationsAreCloseEnough(this.duration,this.prevDuration)) { // durations of two sources are close enough to making seek ahead in new source ok - this.seekStatus = 'seeking'; + this.seekStatus = 'seeking'; this.seekTo(this.swapTime); - } - else { - // durations of two sources are too dissimilar to support seeking ahead to swapTime. - loadIsComplete = true; + } else { + // durations of two sources are too dissimilar to support seeking ahead to swapTime. + loadIsComplete = true; } } } - } - else { - // swapTime is 0. No seeking required. - if (this.playing) { - this.playMedia(); - // swap is complete. Reset vars. - loadIsComplete = true; + } else { + // swapTime is 0. No seeking required. + if (this.playing) { + this.playMedia(); + // swap is complete. Reset vars. + loadIsComplete = true; } } - } - else if (!this.startedPlaying) { + } else if (!this.startedPlaying) { if (this.startTime > 0) { if (this.seeking) { // a seek has already been initiated @@ -12746,94 +11312,84 @@ if (typeof module !== "undefined" && module.exports) { if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; - } - else { + loadIsComplete = true; + } else { // haven't started seeking yet this.seekTo(this.startTime); } - } - else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { + } else if (this.defaultChapter && typeof this.selectedChapters !== 'undefined') { this.seekToChapter(this.defaultChapter); - } - else { + } else { // there is no startTime, therefore no seeking required if (this.okToPlay) { this.playMedia(); } - loadIsComplete = true; + loadIsComplete = true; } - } - else if (this.hasPlaylist) { - // new source media is part of a playlist, but user didn't click on it + } else if (this.hasPlaylist) { + // new source media is part of a playlist, but user didn't click on it // (and somehow, swappingSrc is false) - // this may happen when the previous track ends and next track loads - // this same code is called above when swappingSrc is true + // this may happen when the previous track ends and next track loads + // this same code is called above when swappingSrc is true if ((this.playlistIndex !== this.$playlist.length) || this.loop) { // this is not the last track in the playlist (OR playlist is looping so it doesn't matter) this.playMedia(); - loadIsComplete = true; + loadIsComplete = true; } - } - else { - // None of the above. + } else { + // None of the above. // User is likely seeking to a new time, but not loading a new media source - // need to reset vars - loadIsComplete = true; - } - if (loadIsComplete) { - // reset vars - this.swappingSrc = false; - this.seekStatus = null; - this.swapTime = 0; + // need to reset vars + loadIsComplete = true; + } + if (loadIsComplete) { + // reset vars + this.swappingSrc = false; + this.seekStatus = null; + this.swapTime = 0; this.seekTrigger = null; - this.seekingFromTranscript = false; + this.seekingFromTranscript = false; this.userClickedPlaylist = false; - this.okToPlay = false; + this.okToPlay = false; } - this.refreshControls('init'); - if (this.$focusedElement) { - this.restoreFocus(); - this.$focusedElement = null; + this.refreshControls(); + if (this.$focusedElement) { + this.restoreFocus(); + this.$focusedElement = null; + this.activeMedia = null; } }; - AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { + AblePlayer.prototype.durationsAreCloseEnough = function(d1,d2) { - // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src - // The durations may not be exact, but they might be "close enough" - // returns true if "close enough", otherwise false + // Compare the durations of two media sources to determine whether it's ok to seek ahead after swapping src + // The durations may not be exact, but they might be "close enough" + // returns true if "close enough", otherwise false - var tolerance, diff; - - tolerance = 1; // number of seconds between rounded durations that is considered "close enough" - - diff = Math.abs(Math.round(d1) - Math.round(d2)); - - if (diff <= tolerance) { - return true; - } - else { - return false; - } + var tolerance, diff; + + tolerance = 1; // number of seconds between rounded durations that is considered "close enough" + diff = Math.abs(Math.round(d1) - Math.round(d2)); + + return (diff <= tolerance) ? true : false; }; - AblePlayer.prototype.restoreFocus = function() { + AblePlayer.prototype.restoreFocus = function() { // function called after player has been rebuilt (during media swap) - // the original focusedElement no longer exists, - // but this function finds a match in the new player - // and places focus there + // the original focusedElement no longer exists, + // but this function finds a match in the new player + // and places focus there - var classList; + var classList, $mediaParent; - if (this.$focusedElement) { - - if ((this.$focusedElement).attr('role') === 'button') { + if ( this.$focusedElement && null !== this.activeMedia ) { + $mediaParent = $( '#' + this.activeMedia ).closest( '.able' ); + if ( (this.$focusedElement).attr('role') === 'button' ) { classList = this.$focusedElement.attr("class").split(/\s+/); $.each(classList, function(index, item) { if (item.substring(0,20) === 'able-button-handler-') { - $('div.able-controller div.' + item).focus(); + $mediaParent.find('div.able-controller div.' + item).trigger('focus'); } }); } @@ -12856,12 +11412,11 @@ if (typeof module !== "undefined" && module.exports) { thisObj.showDescription(position); thisObj.updateChapter(thisObj.convertChapterTimeToVideoTime(position)); thisObj.updateMeta(position); - thisObj.refreshControls('init'); + thisObj.refreshControls(); }).on('stopTracking', function (e, position) { if (thisObj.useChapterTimes) { thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position)); - } - else { + } else { thisObj.seekTo(position); } if (!thisObj.pausedBeforeTracking) { @@ -12873,133 +11428,120 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.onClickPlayerButton = function (el) { - var whichButton, prefsPopup; - - whichButton = this.getButtonNameFromClass($(el).attr('class')); - - if (whichButton === 'play') { - this.clickedPlay = true; - this.handlePlay(); - } - else if (whichButton === 'restart') { - this.seekTrigger = 'restart'; - this.handleRestart(); - } - else if (whichButton === 'previous') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'previous'; - this.buttonWithFocus = 'previous'; - this.handlePrevTrack(); - } - else if (whichButton === 'next') { - this.userClickedPlaylist = true; - this.okToPlay = true; - this.seekTrigger = 'next'; - this.buttonWithFocus = 'next'; - this.handleNextTrack(); - } - else if (whichButton === 'rewind') { - this.seekTrigger = 'rewind'; - this.handleRewind(); - } - else if (whichButton === 'forward') { - this.seekTrigger = 'forward'; - this.handleFastForward(); - } - else if (whichButton === 'mute') { - this.handleMute(); - } - else if (whichButton === 'volume') { - this.handleVolumeButtonClick(); - } - else if (whichButton === 'faster') { - this.handleRateIncrease(); - } - else if (whichButton === 'slower') { - this.handleRateDecrease(); - } - else if (whichButton === 'captions') { - this.handleCaptionToggle(); - } - else if (whichButton === 'chapters') { - this.handleChapters(); - } - else if (whichButton === 'descriptions') { - this.handleDescriptionToggle(); - } - else if (whichButton === 'sign') { - if (!this.closingSign) { - this.handleSignToggle(); - } - } - else if (whichButton === 'preferences') { - if ($(el).attr('data-prefs-popup') === 'menu') { - this.handlePrefsClick(); - } - else { - this.showingPrefsDialog = true; // stopgap - this.closePopups(); - prefsPopup = $(el).attr('data-prefs-popup'); - if (prefsPopup === 'keyboard') { - this.keyboardPrefsDialog.show(); - } - else if (prefsPopup === 'captions') { - this.captionPrefsDialog.show(); + whichButton = this.getButtonNameFromClass($(el).attr('class')); + switch ( whichButton ) { + case 'play': + this.clickedPlay = true; + this.handlePlay(); + break; + case 'restart': + this.seekTrigger = 'restart'; + this.handleRestart(); + break; + case 'previous': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'previous'; + this.buttonWithFocus = 'previous'; + this.handlePrevTrack(); + break; + case 'next': + this.userClickedPlaylist = true; + this.okToPlay = true; + this.seekTrigger = 'next'; + this.buttonWithFocus = 'next'; + this.handleNextTrack(); + break; + case 'rewind': + this.seekTrigger = 'rewind'; + this.handleRewind(); + break; + case 'forward': + this.seekTrigger = 'forward'; + this.handleFastForward(); + break; + case 'mute': + this.handleMute(); + break; + case 'volume': + this.handleVolumeButtonClick(); + break; + case 'faster': + this.handleRateIncrease(); + break; + case 'slower': + this.handleRateDecrease(); + break; + case 'captions': + this.handleCaptionToggle(); + break; + case 'chapters': + this.handleChapters(); + break; + case 'descriptions': + this.handleDescriptionToggle(); + break; + case 'sign': + if ( ! this.closingSign ) { + this.handleSignToggle(); } - else if (prefsPopup === 'descriptions') { - this.descPrefsDialog.show(); + break; + case 'preferences': + if ($(el).attr('data-prefs-popup') === 'menu') { + this.handlePrefsClick(); + } else { + this.showingPrefsDialog = true; // stopgap + this.closePopups(); + prefsPopup = $(el).attr('data-prefs-popup'); + if (prefsPopup === 'keyboard') { + this.keyboardPrefsDialog.show(); + } else if (prefsPopup === 'captions') { + this.captionPrefsDialog.show(); + } else if (prefsPopup === 'descriptions') { + this.descPrefsDialog.show(); + } else if (prefsPopup === 'transcript') { + this.transcriptPrefsDialog.show(); + } + this.showingPrefsDialog = false; } - else if (prefsPopup === 'transcript') { - this.transcriptPrefsDialog.show(); + break; + case 'transcript': + if ( !this.closingTranscript ) { + this.handleTranscriptToggle(); } - this.showingPrefsDialog = false; - } - } - else if (whichButton === 'help') { - this.handleHelpClick(); - } - else if (whichButton === 'transcript') { - if (!this.closingTranscript) { - this.handleTranscriptToggle(); - } - } - else if (whichButton === 'fullscreen') { - this.clickedFullscreenButton = true; - this.handleFullscreenToggle(); + break; + case 'fullscreen': + this.clickedFullscreenButton = true; + this.handleFullscreenToggle(); + break; } }; - AblePlayer.prototype.getButtonNameFromClass = function (classString) { - - // player control buttons all have class="able-button-handler-x" where x is the identifier + AblePlayer.prototype.getButtonNameFromClass = function (classString) { + // player control buttons all have class="able-button-handler-x" where x is the identifier // buttons might also have other classes assigned though + var classes, i; - var classes, i; - - classes = classString.split(' '); - for (i = 0; i < classes.length; i++) { - if (classes[i].substring(0,20) === 'able-button-handler-') { - return classes[i].substring(20); + classes = classString.split(' '); + for (i = 0; i < classes.length; i++) { + if (classes[i].substring(0,20) === 'able-button-handler-') { + return classes[i].substring(20); } - } - return classString; + } + return classString; } AblePlayer.prototype.okToHandleKeyPress = function () { - - // returns true unless user's focus is on a UI element + let defaultReturn = true; + if ( this.prefNoKeyShortcuts === 1 ) { + defaultReturn = false; + } + // returns true unless user's focus is on a UI element or user has disabled keyboard shortcuts. // that is likely to need supported keystrokes, including space - var activeElement = AblePlayer.getActiveDOMElement(); - if ($(activeElement).prop('tagName') === 'INPUT') { - return false; - } - else { - return true; - } + return ($(activeElement).prop('tagName') === 'INPUT') ? false : defaultReturn; }; AblePlayer.prototype.onPlayerKeyPress = function (e) { @@ -13007,24 +11549,21 @@ if (typeof module !== "undefined" && module.exports) { // handle keystrokes (using DHTML Style Guide recommended key combinations) // https://web.archive.org/web/20130127004544/http://dev.aol.com/dhtml_style_guide/#mediaplayer // Modifier keys Alt + Ctrl are on by default, but can be changed within Preferences - // NOTE #1: Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down + // - Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down // The rest are reasonable best choices - // NOTE #2: If there are multiple players on a single page, keystroke handlers + // - If there are multiple players on a single page, keystroke handlers // are only bound to the FIRST player - // NOTE #3: The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions + // - The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions // including removal of the "media player" design pattern. There's an issue about that: // https://github.com/w3c/aria-practices/issues/27 - var which, $thisElement; + var key, $thisElement; // Convert to lower case. - which = e.which; - if (which >= 65 && which <= 90) { - which += 32; - } + key = e.key; $thisElement = $(document.activeElement); - if (which === 27) { // escape + if (key === 'Escape') { if (this.$transcriptArea && $.contains(this.$transcriptArea[0],$thisElement[0]) && !this.hidingPopup) { // This element is part of transcript area. this.handleTranscriptToggle(); @@ -13047,101 +11586,86 @@ if (typeof module !== "undefined" && module.exports) { (e.target.tagName === 'TEXTAREA' && !this.stenoMode) || e.target.tagName === 'SELECT' )){ - if (which === 27) { // escape + if (key === 'Escape') { this.closePopups(); this.$tooltipDiv.hide(); this.seekBar.hideSliderTooltips(); - } - else if (which === 32) { // spacebar = play/pause + } else if (key === ' ') { // disable spacebar support for play/pause toggle as of 4.2.10 // spacebar should not be handled everywhere on the page, since users use that to scroll the page // when the player has focus, most controls are buttons so spacebar should be used to trigger the buttons if ($thisElement.attr('role') === 'button') { // register a click on this element e.preventDefault(); - $thisElement.click(); + $thisElement.trigger( 'click' ); } - } - else if (which === 112) { // p = play/pause + } else if ( key === 'p' ) { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePlay(); } - } - else if (which === 115) { // s = stop (now restart) + } else if (key === 's') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRestart(); } - } - else if (which === 109) { // m = mute + } else if (key === 'm') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleMute(); } - } - else if (which === 118) { // v = volume + } else if (key === 'v') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleVolumeButtonClick(); } - } - else if (which >= 49 && which <= 57) { // set volume 1-9 + } else if (key >= 0 && key <= 9) { if (this.usingModifierKeys(e)) { e.preventDefault(); - this.handleVolumeKeystroke(which); + this.handleVolumeKeystroke(key); } - } - else if (which === 99) { // c = caption toggle + } else if (key === 'c') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleCaptionToggle(); } - } - else if (which === 100) { // d = description + } else if (key === 'd') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleDescriptionToggle(); } - } - else if (which === 102) { // f = forward + } else if (key === 'f') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleFastForward(); } - } - else if (which === 114) { // r = rewind + } else if (key === 'r') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleRewind(); } - } - else if (which === 98) { // b = back (previous track) + } else if (key === 'b') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrevTrack(); } - } - else if (which === 110) { // n = next track + } else if (key === 'n') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handleNextTrack(); } - } - else if (which === 101) { // e = preferences + } else if (key === 'e') { if (this.usingModifierKeys(e)) { e.preventDefault(); this.handlePrefsClick(); } - } - else if (which === 13) { // Enter + } else if (key === 'Enter') { if ($thisElement.attr('role') === 'button' || $thisElement.prop('tagName') === 'SPAN') { // register a click on this element // if it's a transcript span the transcript span click handler will take over - $thisElement.click(); - } - else if ($thisElement.prop('tagName') === 'LI') { - $thisElement.click(); + $thisElement.trigger( 'click' ); + } else if ($thisElement.prop('tagName') === 'LI') { + $thisElement.trigger( 'click' ); } } } @@ -13162,10 +11686,7 @@ if (typeof module !== "undefined" && module.exports) { }) .on('loadedmetadata',function() { // should be able to get duration now - thisObj.duration = thisObj.media.duration; - var x = 50.5; - var y = 51.9; - var diff = Math.abs(Math.round(x)-Math.round(y)); + thisObj.duration = thisObj.media.duration; }) .on('canplay',function() { // previously handled seeking to startTime here @@ -13173,21 +11694,21 @@ if (typeof module !== "undefined" && module.exports) { // so we know player can seek ahead to anything }) .on('canplaythrough',function() { - // previously onMediaNewSourceLoad() was called on 'loadedmetadata' - // but that proved to be too soon for some of this functionality. - // TODO: Monitor this. If moving it here causes performance issues, - // consider moving some or all of this functionality to 'canplay' - thisObj.onMediaNewSourceLoad(); + // previously onMediaNewSourceLoad() was called on 'loadedmetadata' + // but that proved to be too soon for some of this functionality. + // TODO: Monitor this. If moving it here causes performance issues, + // consider moving some or all of this functionality to 'canplay' + thisObj.onMediaNewSourceLoad(); }) .on('play',function() { - // both 'play' and 'playing' seem to be fired in all browsers (including IE11) - // therefore, doing nothing here & doing everything when 'playing' is triggered - thisObj.refreshControls('playpause'); + // 'play' indicates that the play method has been called. + // Don't do anything until playback has actually started. }) .on('playing',function() { + // 'playing' indicates that the video is playing. thisObj.playing = true; thisObj.paused = false; - thisObj.swappingSrc = false; + thisObj.swappingSrc = false; thisObj.refreshControls('playpause'); }) .on('ended',function() { @@ -13199,8 +11720,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.refreshControls('timeline'); }) .on('waiting',function() { - // do something - // previously called refreshControls() here but this event probably doesn't warrant a refresh + // could fire a notification about loss of data. }) .on('durationchange',function() { // Display new duration. @@ -13209,21 +11729,19 @@ if (typeof module !== "undefined" && module.exports) { .on('timeupdate',function() { thisObj.onMediaUpdateTime(); // includes a call to refreshControls() }) - .on('pause',function() { - if (!thisObj.clickedPlay) { + .on('pause',function() { + if (!thisObj.clickedPlay) { // 'pause' was triggered automatically, not initiated by user // this happens in some browsers when swapping source // (e.g., between tracks in a playlist or swapping description) - if (thisObj.hasPlaylist || thisObj.swappingSrc) { + if (thisObj.hasPlaylist || thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -13294,11 +11812,11 @@ if (typeof module !== "undefined" && module.exports) { // Triggered as the video is loaded. // Reports back the amount of the video that has been buffered (NOT the amount played) // Data has keys duration, percent, and seconds - }); + }); this.vimeoPlayer.on('seeking', function(data) { // Triggered when the player starts seeking to a specific time. // A timeupdate event will also be fired at the same time. - }); + }); this.vimeoPlayer.on('seeked', function(data) { // Triggered when the player seeks to a specific time. // A timeupdate event will also be fired at the same time. @@ -13317,13 +11835,11 @@ if (typeof module !== "undefined" && module.exports) { if (thisObj.hasPlaylist || thisObj.swappingSrc) { // do NOT set playing to false. // doing so prevents continual playback after new track is loaded - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } - } - else { + } else { thisObj.playing = false; thisObj.paused = true; } @@ -13361,10 +11877,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addEventListeners = function () { - var thisObj, whichButton, thisElement; - - // Save the current object context in thisObj for use with inner functions. - thisObj = this; + var thisObj = this; // Appropriately resize media player for full screen. $(window).on('resize',function () { @@ -13382,7 +11895,7 @@ if (typeof module !== "undefined" && module.exports) { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { // the player's style attribute has changed. Check to see if it's visible if (thisObj.$ableDiv.is(':visible')) { - thisObj.refreshControls('init'); + thisObj.refreshControls(); } } }); @@ -13390,15 +11903,9 @@ if (typeof module !== "undefined" && module.exports) { var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); } - else { - // browser doesn't support MutationObserver - // TODO: Figure out an alternative solution for this rare use case in older browsers - // See example in buildplayer.js > useSvg() - } if (typeof this.seekBar !== 'undefined') { this.addSeekbarListeners(); - } - else { + } else { // wait a bit and try again // TODO: Should set this up to keep trying repeatedly. // Seekbar listeners are critical. @@ -13416,20 +11923,20 @@ if (typeof module !== "undefined" && module.exports) { }); // handle clicks (left only) anywhere on the page. If any popups are open, close them. - $(document).on('click',function(e) { + $('body').on('click', function(e) { if (e.button !== 0) { // not a left click return false; - } - if ($('.able-popup:visible').length || $('.able-volume-popup:visible')) { + } + if ($('.able-popup:visible').length || $('.able-volume-slider:visible').length ) { // at least one popup is visible thisObj.closePopups(); } - if (e.target.tagName === 'VIDEO') { + if (e.target.tagName === 'VIDEO') { // user clicked the video (not an element that sits on top of the video) - // handle this as a play/pause toggle click - thisObj.clickedPlay = true; - } + // handle this as a play/pause toggle click + thisObj.clickedPlay = true; + } }); // handle mouse movement over player; make controls visible again if hidden @@ -13446,8 +11953,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { window.clearTimeout(thisObj.hideControlsTimeout); @@ -13460,7 +11966,7 @@ if (typeof module !== "undefined" && module.exports) { }); // if user presses a key from anywhere on the page, show player controls - $(document).keydown(function(e) { + $(document).on( 'keydown', function(e) { if (thisObj.controlsHidden) { thisObj.fadeControls('in'); thisObj.controlsHidden = false; @@ -13472,8 +11978,7 @@ if (typeof module !== "undefined" && module.exports) { // after showing controls, hide them again after a brief timeout thisObj.invokeHideControlsTimeout(); } - } - else { + } else { // controls are visible // if there's already an active timeout, clear it and start timer again if (thisObj.hideControlsTimeoutStatus === 'active') { @@ -13488,8 +11993,8 @@ if (typeof module !== "undefined" && module.exports) { }); // handle local keydown events if this isn't the only player on the page; - // otherwise these are dispatched by global handler (see ableplayer-base,js) - this.$ableDiv.keydown(function (e) { + // otherwise these are dispatched by global handler (see ableplayer-base.js) + this.$ableDiv.on( 'keydown', function (e) { if (AblePlayer.nextIndex > 1) { thisObj.onPlayerKeyPress(e); } @@ -13514,7 +12019,7 @@ if (typeof module !== "undefined" && module.exports) { // handle clicks on playlist items if (this.$playlist) { - this.$playlist.click(function(e) { + this.$playlist.on( 'click', function(e) { if (!thisObj.userClickedPlaylist) { // stopgap in case multiple clicks are fired on the same playlist item thisObj.userClickedPlaylist = true; // will be set to false after new src is loaded & canplaythrough is triggered @@ -13525,18 +12030,16 @@ if (typeof module !== "undefined" && module.exports) { } // Also play/pause when clicking on the media. - this.$media.click(function () { + this.$media.on( 'click', function () { thisObj.handlePlay(); }); // add listeners for media events if (this.player === 'html5') { this.addHtml5MediaListeners(); - } - else if (this.player === 'vimeo') { + } else if (this.player === 'vimeo') { this.addVimeoListeners(); - } - else if (this.player === 'youtube') { + } else if (this.player === 'youtube') { // Youtube doesn't give us time update events, so we just periodically generate them ourselves setInterval(function () { thisObj.onMediaUpdateTime(); @@ -13546,7 +12049,6 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); (function ($) { - AblePlayer.prototype.initDragDrop = function ( which ) { // supported values of which: 'sign', 'transcript' @@ -13554,13 +12056,13 @@ if (typeof module !== "undefined" && module.exports) { // NOTE: "Drag and Drop" for Able Player is a metaphor only!!! // HTML5 Drag & Drop API enables moving elements to new locations in the DOM // Thats not our purpose; we're simply changing the visible position on-screen - // Therefore, the drag & drop interface was overhauled in v2.3.41 to simple + // Therefore, the drag & drop interface was overhauled in v2.3.41 to simply // use mouse (and keyboard) events to change CSS positioning properties // There are nevertheless lessons to be learned from Drag & Drop about accessibility: // http://dev.opera.com/articles/accessible-drag-and-drop/ - var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, + var thisObj, $window, $toolbar, windowName, $resizeHandle, $resizeSvg, i, x1, y1, x2, y2, $resizeLine, resizeZIndex; thisObj = this; @@ -13569,71 +12071,77 @@ if (typeof module !== "undefined" && module.exports) { $window = this.$transcriptArea; windowName = 'transcript-window'; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + $toolbar.attr( 'aria-label', this.translate( 'transcriptControls', 'Transcript Window Controls' ) ); + } else if (which === 'sign') { $window = this.$signWindow; windowName = 'sign-window'; $toolbar = this.$signToolbar; + $toolbar.attr( 'aria-label', this.translate( 'signControls', 'Sign Language Window Controls' ) ); } // add class to trigger change in cursor on hover $toolbar.addClass('able-draggable'); + $toolbar.attr( 'role', 'application' ); + + $dragHandle = $('<div>',{ + 'class': 'able-drag-handle' + }); + $dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'); // add resize handle selector to bottom right corner $resizeHandle = $('<div>',{ 'class': 'able-resizable' }); - // fill it with three parallel diagonal lines + // fill it with three parallel diagonal lines $resizeSvg = $('<svg>').attr({ 'width': '100%', 'height': '100%', 'viewBox': '0 0 100 100', 'preserveAspectRatio': 'none' }); - for (i=1; i<=3; i++) { - if (i === 1) { - x1 = '100'; - y1 = '0'; - x2 = '0'; - y2 = '100'; - } - else if (i === 2) { - x1 = '33'; - y1 = '100'; - x2 = '100'; - y2 = '33'; - } - else if (i === 3) { - x1 = '67'; - y1 = '100'; - x2 = '100'; - y2 = '67'; - } - $resizeLine = $('<line>').attr({ + for (i=1; i<=3; i++) { + if (i === 1) { + x1 = '100'; + y1 = '0'; + x2 = '0'; + y2 = '100'; + } else if (i === 2) { + x1 = '33'; + y1 = '100'; + x2 = '100'; + y2 = '33'; + } else if (i === 3) { + x1 = '67'; + y1 = '100'; + x2 = '100'; + y2 = '67'; + } + $resizeLine = $('<line>').attr({ 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2, - 'vector-effect': 'non-scaling-stroke' + 'vector-effect': 'non-scaling-stroke' }) - $resizeSvg.append($resizeLine); + $resizeSvg.append($resizeLine); } - $resizeHandle.html($resizeSvg); + $resizeHandle.html($resizeSvg); // assign z-index that's slightly higher than parent window resizeZIndex = parseInt($window.css('z-index')) + 100; $resizeHandle.css('z-index',resizeZIndex); $window.append($resizeHandle); + $toolbar.append($dragHandle); // Final step: Need to refresh the DOM in order for browser to process & display the SVG $resizeHandle.html($resizeHandle.html()); // add event listener to toolbar to start and end drag // other event listeners will be added when drag starts - $toolbar.on('mousedown mouseup touchstart touchend', function(e) { + $dragHandle.on('mousedown mouseup touchstart touchend', function(e) { e.stopPropagation(); - if (e.type === 'mousedown' || e.type === 'touchstart') { + if (e.type === 'mousedown' || e.type === 'touchstart' ) { if (!thisObj.windowMenuClickRegistered) { thisObj.windowMenuClickRegistered = true; thisObj.startMouseX = e.pageX; @@ -13641,8 +12149,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.dragDevice = 'mouse'; // ok to use this even if device is a touchpad thisObj.startDrag(which, $window); } - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.dragging && thisObj.dragDevice === 'mouse') { thisObj.endDrag(which); } @@ -13660,8 +12167,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.startMouseY = e.pageY; thisObj.startResize(which, $window); } - } - else if (e.type === 'mouseup' || e.type === 'touchend') { + } else if (e.type === 'mouseup' || e.type === 'touchend') { if (thisObj.resizing) { thisObj.endResize(which); } @@ -13677,16 +12183,12 @@ if (typeof module !== "undefined" && module.exports) { } thisObj.finishingDrag = false; }); - this.addWindowMenu(which,$window,windowName); }; AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) { - var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg, - $buttonLabel, tooltipId, $tooltip, $popup, - label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip, - $optionList, menuBaseId, options, i, $optionItem, option, menuId; + var thisObj, $windowAlert, menuId, $newButton, tooltipId, $tooltip, $popup, menuId; thisObj = this; @@ -13699,50 +12201,18 @@ if (typeof module !== "undefined" && module.exports) { // this will prevent the click event from being triggered this.finishingDrag = false; - // create an alert div and add it to window - $windowAlert = $('<div role="alert"></div>'); - $windowAlert.addClass('able-alert'); - $windowAlert.hide(); - $windowAlert.appendTo(this.$activeWindow); - $windowAlert.css({ - top: $window.offset().top - }); - // add button to draggable window which triggers a popup menu - // for now, re-use preferences icon for this purpose menuId = this.mediaId + '-' + windowName + '-menu'; $newButton = $('<button>',{ 'type': 'button', 'tabindex': '0', - 'aria-label': this.tt.windowButtonLabel, 'aria-haspopup': 'true', 'aria-controls': menuId, 'aria-expanded': 'false', 'class': 'able-button-handler-preferences' }); - if (this.iconType === 'font') { - $buttonIcon = $('<span>',{ - 'class': 'icon-preferences', - 'aria-hidden': 'true' - }); - $newButton.append($buttonIcon); - } - else { - // use image - buttonImgSrc = this.rootPath + 'button-icons/' + this.toolbarIconColor + '/preferences.png'; - $buttonImg = $('<img>',{ - 'src': buttonImgSrc, - 'alt': '', - 'role': 'presentation' - }); - $newButton.append($buttonImg); - } - - // add the visibly-hidden label for screen readers that don't support aria-label on the button - $buttonLabel = $('<span>',{ - 'class': 'able-clipped' - }).text(this.tt.windowButtonLabel); - $newButton.append($buttonLabel); + this.getIcon( $newButton, 'preferences' ); + this.setText( $newButton, this.translate( 'windowButtonLabel', 'Window options' ) ); // add a tooltip that displays aria-label on mouseenter or focus tooltipId = this.mediaId + '-' + windowName + '-tooltip'; @@ -13750,20 +12220,20 @@ if (typeof module !== "undefined" && module.exports) { 'class' : 'able-tooltip', 'id' : tooltipId }).hide(); + $newButton.on('mouseenter focus',function(e) { var label = $(this).attr('aria-label'); - // get position of this button - var position = $(this).position(); - var buttonHeight = $(this).height(); - var buttonWidth = $(this).width(); - var tooltipY = position.top - buttonHeight - 5; + var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label); + // get height of the tooltip + var tooltipHeight = tooltip.height(); + var tooltipY = ( tooltipHeight + 2 ) -1; var tooltipX = 0; var tooltipStyle = { - left: '', - right: tooltipX + 'px', + right: '', + left: tooltipX + 'px', top: tooltipY + 'px' }; - var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle); + tooltip.css(tooltipStyle); thisObj.showTooltip(tooltip); $(this).on('mouseleave blur',function() { AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide(); @@ -13774,20 +12244,17 @@ if (typeof module !== "undefined" && module.exports) { $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window' // define vars and assemble all the parts if (which === 'transcript') { - this.$transcriptAlert = $windowAlert; this.$transcriptPopupButton = $newButton; this.$transcriptPopup = $popup; this.$transcriptToolbar.prepend($windowAlert,$newButton,$tooltip,$popup); - } - else if (which === 'sign') { - this.$signAlert = $windowAlert; + } else if (which === 'sign') { this.$signPopupButton = $newButton; this.$signPopup = $popup; this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup); } // handle button click - $newButton.on('click mousedown keydown',function(e) { + $newButton.on('click keydown',function(e) { if (thisObj.focusNotClick) { return false; @@ -13798,6 +12265,7 @@ if (typeof module !== "undefined" && module.exports) { } e.stopPropagation(); if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) { + console.log( 'firing' ); // don't set windowMenuClickRegistered yet; that happens in handler function thisObj.handleWindowButtonClick(which, e); } @@ -13809,30 +12277,23 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.addResizeDialog = function (which, $window) { - var thisObj, $windowPopup, $windowButton, - widthId, heightId, startingWidth, startingHeight, aspectRatio, - $resizeForm, $resizeWrapper, - $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, - $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, - tempWidth, tempHeight, - $saveButton, $cancelButton, newWidth, newHeight, resizeDialog; + var thisObj, $windowPopup, $windowButton, widthId, heightId, + $resizeForm, $resizeWrapper, $resizeWidthDiv, $resizeWidthInput, $resizeWidthLabel, + $resizeHeightDiv, $resizeHeightInput, $resizeHeightLabel, $saveButton, $cancelButton, + newWidth, newHeight, resizeDialog; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } widthId = this.mediaId + '-resize-' + which + '-width'; heightId = this.mediaId + '-resize-' + which + '-height'; - startingWidth = $window.width(); - startingHeight = $window.height(); - aspectRatio = startingWidth / startingHeight; $resizeForm = $('<div></div>',{ 'class' : 'able-resize-form' @@ -13840,76 +12301,72 @@ if (typeof module !== "undefined" && module.exports) { // inner container for all content, will be assigned to modal div's aria-describedby $resizeWrapper = $('<div></div>'); + $resizeControls = $( '<div class="able-prefs-buttons"></div>' ); // width field $resizeWidthDiv = $('<div></div>'); $resizeWidthInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': widthId, - 'value': startingWidth + 'min': 0, + 'value': '', }); $resizeWidthLabel = $('<label>',{ 'for': widthId - }).text(this.tt.width); + }).text( this.translate( 'width', 'Width' ) ); // height field $resizeHeightDiv = $('<div></div>'); $resizeHeightInput = $('<input>',{ - 'type': 'text', + 'type': 'number', 'id': heightId, - 'value': startingHeight + 'min': 0, + 'value': '', }); $resizeHeightLabel = $('<label>',{ 'for': heightId - }).text(this.tt.height); - - if (which === 'sign') { - // make height a read-only field - // and calculate its value based on width to preserve aspect ratio - $resizeHeightInput.prop('readonly',true); - $resizeWidthInput.on('input',function() { - tempWidth = $(this).val(); - tempHeight = Math.round(tempWidth/aspectRatio, 0); - $resizeHeightInput.val(tempHeight); - }) - } + }).text( this.translate( 'height', 'Height' ) ); // Add save and cancel buttons. - $saveButton = $('<button class="modal-button">' + this.tt.save + '</button>'); - $cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>'); + $saveButton = $('<button class="modal-button">' + this.translate( 'save', 'Save' ) + '</button>'); + $cancelButton = $('<button class="modal-button">' + this.translate( 'cancel', 'Cancel' ) + '</button>'); $saveButton.on('click',function () { newWidth = $('#' + widthId).val(); newHeight = $('#' + heightId).val(); - if (newWidth !== startingWidth || newHeight !== startingHeight) { - thisObj.resizeObject(which,newWidth,newHeight); - thisObj.updateCookie(which); - } + thisObj.resizeObject(which,newWidth,newHeight); + thisObj.updatePreferences(which); + resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); $cancelButton.on('click',function () { resizeDialog.hide(); $windowPopup.hide(); - $windowButton.focus(); + $windowButton.trigger('focus'); }); // Now assemble all the parts $resizeWidthDiv.append($resizeWidthLabel,$resizeWidthInput); $resizeHeightDiv.append($resizeHeightLabel,$resizeHeightInput); $resizeWrapper.append($resizeWidthDiv,$resizeHeightDiv); - $resizeForm.append($resizeWrapper,'<hr>',$saveButton,$cancelButton); + $resizeControls.append($saveButton,$cancelButton); + $resizeForm.append($resizeWrapper,$resizeControls); // must be appended to the BODY! // otherwise when aria-hidden="true" is applied to all background content // that will include an ancestor of the dialog, // which will render the dialog unreadable by screen readers $('body').append($resizeForm); - resizeDialog = new AccessibleDialog($resizeForm, $windowButton, 'dialog', true, this.tt.windowResizeHeading, $resizeWrapper, this.tt.closeButtonLabel, '20em'); + resizeDialog = new AccessibleDialog( + $resizeForm, + $windowButton, + this.translate( 'windowResizeHeading', 'Resize Window' ), + this.translate( 'closeButtonLabel', 'Close' ), + ); if (which === 'transcript') { this.transcriptResizeDialog = resizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.signResizeDialog = resizeDialog; } }; @@ -13919,7 +12376,6 @@ if (typeof module !== "undefined" && module.exports) { var thisObj, $windowPopup, $windowButton, $toolbar, popupTop; thisObj = this; - if (this.focusNotClick) { // transcript or sign window has just opened, // and focus moved to the window button @@ -13931,73 +12387,62 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; $toolbar = this.$transcriptToolbar; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; $toolbar = this.$signToolbar; } - if (e.type === 'keydown') { // user pressed a key - if (e.which === 32 || e.which === 13) { - // this was Enter or space + if (e.key === ' ' || e.key === 'Enter') { this.windowMenuClickRegistered = true; - } - else if (e.which === 27) { // escape + } else if (e.key === 'Escape') { if ($windowPopup.is(':visible')) { // close the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - // also return focus to window options button - $windowButton.focus(); - }); - } - else { + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + // also return focus to window options button + $windowButton.trigger('focus'); + } else { // popup isn't open. Close the window if (which === 'sign') { this.handleSignToggle(); - } - else if (which === 'transcript') { + } else if (which === 'transcript') { this.handleTranscriptToggle(); } } - } - else { + } else { return false; } - } - else { + } else { // this was a mouse event this.windowMenuClickRegistered = true; } - if ($windowPopup.is(':visible')) { - $windowPopup.hide(200,'',function() { - thisObj.windowMenuClickRegistered = false; // reset - }); + if ( $windowPopup.is(':visible') ) { + $windowPopup.hide(); + thisObj.windowMenuClickRegistered = false; // reset $windowPopup.find('li').removeClass('able-focus'); - $windowButton.attr('aria-expanded','false').focus(); - } - else { + $windowButton.attr('aria-expanded','false').trigger('focus'); + } else { // first, be sure window is on top this.updateZIndex(which); - popupTop = $windowButton.position().top + $windowButton.outerHeight(); + popupTop = $toolbar.outerHeight() - 1; $windowPopup.css('top', popupTop); - $windowPopup.show(200,'',function() { - $windowButton.attr('aria-expanded','true'); - $(this).find('li').first().focus().addClass('able-focus'); - thisObj.windowMenuClickRegistered = false; // reset - }); + $windowPopup.show(); + $windowButton.attr('aria-expanded','true'); + $(this).find('li').first().trigger('focus').addClass('able-focus'); + thisObj.windowMenuClickRegistered = false; // reset } }; AblePlayer.prototype.handleMenuChoice = function (which, choice, e) { - var thisObj, $window, $windowPopup, $windowButton, resizeDialog, width, height, $thisRadio; + var thisObj, $window, $windowPopup, $windowButton, resizeDialog, startingWidth, startingHeight, + aspectRatio, tempWidth, tempHeight; thisObj = this; if (which === 'transcript') { @@ -14005,30 +12450,42 @@ if (typeof module !== "undefined" && module.exports) { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; resizeDialog = this.transcriptResizeDialog; - } - else if (which === 'sign') { + } else if (which === 'sign') { $window = this.$signWindow; $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; resizeDialog = this.signResizeDialog; + + startingWidth = $window.outerWidth(); + startingHeight = $window.outerHeight(); + aspectRatio = startingWidth / startingHeight; + // make height a read-only field + // and calculate its value based on width to preserve aspect ratio + widthId = this.mediaId + '-resize-' + which + '-width'; + heightId = this.mediaId + '-resize-' + which + '-height'; + $( '#' + heightId ).prop('readonly',true); + $( '#' + widthId ).on('input',function() { + tempWidth = $(this).val(); + tempHeight = Math.round(tempWidth/aspectRatio); + $( '#' + heightId ).val(tempHeight); + }); } this.$activeWindow = $window; if (e.type === 'keydown') { - if (e.which === 27) { // escape + if (e.key === 'Escape') { // escape // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the Boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - // also return focus to window options button - $windowButton.focus(); - }); + $windowPopup.hide(); + // also reset the Boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + // also return focus to window options button + $windowButton.trigger('focus'); + return false; - } - else { + } else { // all other keys will be handled by upstream functions if (choice !== 'close') { this.$activeWindow = $window; @@ -14038,58 +12495,48 @@ if (typeof module !== "undefined" && module.exports) { } // hide the popup menu - $windowPopup.hide('fast', function() { - // also reset the boolean - thisObj.windowMenuClickRegistered = false; - // also restore menu items to their original state - $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); - $windowButton.attr('aria-expanded','false'); - }); + $windowPopup.hide(); + // also reset the boolean + thisObj.windowMenuClickRegistered = false; + // also restore menu items to their original state + $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1'); + $windowButton.attr('aria-expanded','false'); + if (choice !== 'close') { - $windowButton.focus(); + $windowButton.trigger('focus'); } if (choice === 'move') { - // temporarily add role="application" to activeWindow // otherwise, screen readers incercept arrow keys and moving window will not work this.$activeWindow.attr('role','application'); if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); + this.showAlert( this.translate( 'windowMoveAlert', 'Drag or use arrow keys to move the window; Enter to stop' ),which); if (which === 'transcript') { this.showedTranscriptAlert = true; - } - else if (which === 'sign') { + } else if (which === 'sign') { this.showedSignAlert = true; } } - if (e.type === 'keydown') { - this.dragDevice = 'keyboard'; - } - else { - this.dragDevice = 'mouse'; - } + this.dragDevice = (e.type === 'keydown') ? 'keyboard' : 'mouse'; this.startDrag(which, $window); - $windowPopup.hide().parent().focus(); - } - else if (choice == 'resize') { + $windowPopup.hide().parent().attr( 'tabindex', '-1' ).trigger('focus'); + } else if (choice == 'resize') { // resize through the menu uses a form, not drag var resizeFields = resizeDialog.getInputs(); if (resizeFields) { // reset width and height values in form - resizeFields[0].value = $window.width(); - resizeFields[1].value = $window.height(); + resizeFields[0].value = Math.round( $window.outerWidth() ); + resizeFields[1].value = Math.round( $window.outerHeight() ); } resizeDialog.show(); - } - else if (choice == 'close') { + } else if (choice == 'close') { // close window, place focus on corresponding button on controller bar if (which === 'transcript') { - this.closingTranscript = true; // stopgrap to prevent double-firing of keypress + this.closingTranscript = true; // stopgap to prevent double-firing of keypress this.handleTranscriptToggle(); - } - else if (which === 'sign') { - this.closingSign = true; // stopgrap to prevent double-firing of keypress + } else if (which === 'sign') { + this.closingSign = true; // stopgap to prevent double-firing of keypress this.handleSignToggle(); } } @@ -14097,7 +12544,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.startDrag = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newX, newY; + var thisObj, $windowPopup, startPos, newX, newY; thisObj = this; @@ -14108,21 +12555,10 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; } - if (!this.showedAlert(which)) { - this.showAlert(this.tt.windowMoveAlert,which); - if (which === 'transcript') { - this.showedTranscriptAlert = true; - } - else if (which === 'sign') { - this.showedSignAlert = true; - } - } - // if window's popup menu is open, close it if ($windowPopup.is(':visible')) { $windowPopup.hide(); @@ -14142,8 +12578,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyY = this.dragStartY; // add stopgap to prevent the Enter that triggered startDrag() from also triggering dragEnd() this.startingDrag = true; - } - else { + } else { this.dragDevice = 'mouse'; // get offset between mouse position and top left corner of draggable element this.dragOffsetX = this.startMouseX - this.dragStartX; @@ -14155,8 +12590,9 @@ if (typeof module !== "undefined" && module.exports) { 'position': 'absolute', 'top': this.dragStartY + 'px', 'left': this.dragStartX + 'px' - }).focus(); + }).trigger('focus'); + var dragDevice = this.dragDevice; // add device-specific event listeners if (this.dragDevice === 'mouse') { // might also be a touchpad $(document).on('mousemove touchmove',function(e) { @@ -14167,8 +12603,7 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resetDraggedObject( newX, newY ); } }); - } - else if (this.dragDevice === 'keyboard') { + } else if (this.dragDevice === 'keyboard') { this.$activeWindow.on('keydown',function(e) { if (thisObj.dragging) { thisObj.dragKeys(which, e); @@ -14178,40 +12613,45 @@ if (typeof module !== "undefined" && module.exports) { return false; }; + /** + * Handle moving the transcript or sign window from the keyboard. + * + * @param {string} which 'transcript' or 'sign' window. + * @param {Event} e Triggered event. + */ AblePlayer.prototype.dragKeys = function(which, e) { var key, keySpeed; - var thisObj = this; - // stopgap to prevent firing on initial Enter or space // that selected "Move" from menu if (this.startingDrag) { this.startingDrag = false; return false; } - key = e.which; + key = e.key; keySpeed = 10; // pixels per keypress event switch (key) { - case 37: // left - case 63234: + case 'ArrowLeft': // left this.dragKeyX -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveLeft', 'Window moved left' ) ); break; - case 38: // up - case 63232: + case 'ArrowUp': // up this.dragKeyY -= keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveUp', 'Window moved up' ) ); break; - case 39: // right - case 63235: + case 'ArrowRight': // right this.dragKeyX += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveRight', 'Window moved right' ) ); break; - case 40: // down - case 63233: + case 'ArrowDown': // down this.dragKeyY += keySpeed; + this.$srAlertBox.text( this.translate( 'windowMoveDown', 'Window moved down' ) ); break; - case 13: // enter - case 27: // escape + case 'Enter': // enter + case 'Escape': // escape + this.$srAlertBox.text( this.translate( 'windowMoveStopped', 'Window move stopped' ) ); this.endDrag(which); return false; default: @@ -14225,6 +12665,9 @@ if (typeof module !== "undefined" && module.exports) { }; AblePlayer.prototype.resetDraggedObject = function ( x, y) { + setTimeout( () => { + this.$srAlertBox.text( '' ); + }, 2000 ); this.$activeWindow.css({ 'left': x + 'px', @@ -14244,7 +12687,7 @@ if (typeof module !== "undefined" && module.exports) { if (which === 'transcript') { // $activeWindow is the outer $transcriptArea - // but the inner able-transcript also needs to be resized proporitionally + // but the inner able-transcript also needs to be resized proportionally // (it's 50px less than its outer container) innerHeight = height - 50; this.$transcriptDiv.css('height', innerHeight + 'px'); @@ -14253,14 +12696,13 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.endDrag = function(which) { - var thisObj, $window, $windowPopup, $windowButton; + var thisObj, $windowPopup, $windowButton; thisObj = this; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } @@ -14272,12 +12714,12 @@ if (typeof module !== "undefined" && module.exports) { this.$activeWindow = null; if (this.dragDevice === 'keyboard') { - $windowButton.focus(); + $windowButton.trigger('focus'); } this.dragging = false; // save final position of dragged element - this.updateCookie(which); + this.updatePreferences(which); // reset starting mouse positions this.startMouseX = undefined; @@ -14286,7 +12728,7 @@ if (typeof module !== "undefined" && module.exports) { // Boolean to stop stray events from firing this.windowMenuClickRegistered = false; this.finishingDrag = true; // will be reset after window click event - // finishingDrag should e reset after window click event, + // finishingDrag should be reset after window click event, // which is triggered automatically after mouseup // However, in case that's not reliable in some browsers // need to ensure this gets cancelled @@ -14295,45 +12737,19 @@ if (typeof module !== "undefined" && module.exports) { }, 100); }; - AblePlayer.prototype.isCloseToCorner = function($window, mouseX, mouseY) { - - // return true if mouse is close to bottom right corner (resize target) - var tolerance, position, top, left, width, height, bottom, right; - - tolerance = 10; // number of pixels in both directions considered "close enough" - - // first, get position of element - position = $window.offset(); - top = position.top; - left = position.left; - width = $window.width(); - height = $window.height(); - bottom = top + height; - right = left + width; - if ((Math.abs(bottom-mouseY) <= tolerance) && (Math.abs(right-mouseX) <= tolerance)) { - return true; - } - return false; - }; - AblePlayer.prototype.startResize = function(which, $element) { - var thisObj, $windowPopup, zIndex, startPos, newWidth, newHeight; + var thisObj, $windowPopup, newWidth, newHeight; thisObj = this; this.$activeWindow = $element; this.resizing = true; - if (which === 'transcript') { - $windowPopup = this.$transcriptPopup; - } - else if (which === 'sign') { - $windowPopup = this.$signPopup; - } + $windowPopup = (which === 'transcript') ? this.$transcriptPopup : this.$signPopup; // if window's popup menu is open, close it & place focus on button (???) if ($windowPopup.is(':visible')) { - $windowPopup.hide().parent().focus(); + $windowPopup.hide().parent().trigger('focus'); } // get starting width and height @@ -14341,7 +12757,7 @@ if (typeof module !== "undefined" && module.exports) { this.dragKeyX = this.dragStartX; this.dragKeyY = this.dragStartY; this.dragStartWidth = this.$activeWindow.width(); - this.dragStartHeight = this.$activeWindow.height(); + this.dragStartHeight = this.$activeWindow.outerHeight(); // add event listeners $(document).on('mousemove touchmove',function(e) { @@ -14352,30 +12768,30 @@ if (typeof module !== "undefined" && module.exports) { thisObj.resizeObject( which, newWidth, newHeight ); } }); + return false; }; AblePlayer.prototype.endResize = function(which) { - var $window, $windowPopup, $windowButton; + var $windowPopup, $windowButton; if (which === 'transcript') { $windowPopup = this.$transcriptPopup; $windowButton = this.$transcriptPopupButton; - } - else if (which === 'sign') { + } else if (which === 'sign') { $windowPopup = this.$signPopup; $windowButton = this.$signPopupButton; } $(document).off('mousemove mouseup touchmove touchup'); this.$activeWindow.off('keydown'); - $windowButton.show().focus(); + $windowButton.show().trigger('focus'); this.resizing = false; this.$activeWindow.removeClass('able-resize'); // save final width and height of dragged element - this.updateCookie(which); + this.updatePreferences(which); // Booleans for preventing stray events this.windowMenuClickRegistered = false; @@ -14389,28 +12805,37 @@ if (typeof module !== "undefined" && module.exports) { this.finishingDrag = false; }, 100); }; - })(jQuery); (function ($) { AblePlayer.prototype.initSignLanguage = function() { - - // Sign language is only currently supported in HTML5 player, not YouTube or Vimeo - if (this.player === 'html5') { + this.hasSignLanguage = false; + // Sign language is only currently supported in HTML5 player and YouTube. + var hasLocalSrc = ( this.$sources.first().attr('data-sign-src') !== undefined && this.$sources.first().attr('data-sign-src') !== "" ); + // YouTube src can either be on a `source` element or on the `video` element. + var hasRemoteSrc = ( this.$media.data('youtube-sign-src') !== undefined && this.$media.data('youtube-sign-src') !== "" ); + var hasRemoteSource = ( this.$sources.first().attr('data-youtube-sign-src') !== undefined && this.$sources.first().attr('data-youtube-sign-src') !== '' ); + if ( ! this.isIOS() && ( hasLocalSrc || hasRemoteSrc || hasRemoteSource ) && ( this.player === 'html5' || this.player === 'youtube' ) ) { // check to see if there's a sign language video accompanying this video // check only the first source // If sign language is provided, it must be provided for all sources - this.signFile = this.$sources.first().attr('data-sign-src'); - if (this.signFile) { + let ytSignSrc = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') ); + let signSrc = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') ); + let signVideo = DOMPurify.sanitize( this.$media.data('youtube-sign-src') ); + this.signFile = (hasLocalSrc ) ? signSrc : false; + if ( hasRemoteSrc ) { + this.signYoutubeId = signVideo; + } else if ( hasRemoteSource ) { + this.signYoutubeId = ytSignSrc; + } + if ( this.signFile || this.signYoutubeId ) { if (this.isIOS()) { - // IOS does not allow multiple videos to play simultaneously + // iOS does not allow multiple videos to play simultaneously // Therefore, sign language as rendered by Able Player unfortunately won't work - this.hasSignLanguage = false; if (this.debug) { - console.log('Sign language has been disabled due to IOS restrictions'); + console.log('Sign language has been disabled due to iOS restrictions'); } - } - else { + } else { if (this.debug) { console.log('This video has an accompanying sign language video: ' + this.signFile); } @@ -14418,73 +12843,179 @@ if (typeof module !== "undefined" && module.exports) { this.injectSignPlayerCode(); } } - else { - this.hasSignLanguage = false; - } - } - else { - this.hasSignLanguage = false; } }; AblePlayer.prototype.injectSignPlayerCode = function() { - // create and inject surrounding HTML structure + // create and inject surrounding HTML structure + var thisObj, signVideoId, i, signSrc, srcType, $signSource; + + thisObj = this; + signVideoId = this.mediaId + '-sign'; + + if ( this.signFile || this.signYoutubeId ) { + if ( null !== this.$signDivLocation ) { + this.$signDivLocation.addClass( 'able-sign-window able-fixed' ); + this.$signWindow = this.$signDivLocation; + } else { + this.$signWindow = $('<div>',{ + 'class' : 'able-sign-window', + 'role': 'dialog', + 'aria-label': this.translate( 'sign', 'Sign language' ) + }); + this.$signToolbar = $('<div>',{ + 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' + }); + this.$signWindow.append(this.$signToolbar); + } + + this.$ableWrapper.append(this.$signWindow); + } + + if ( this.signFile ) { + this.$signVideo = $('<video>',{ + 'id' : signVideoId, + 'tabindex' : '-1', + 'muted' : true, + }); + this.signVideo = this.$signVideo[0]; + + if ( this.signFile ) { + $signSource = $('<source>',{ + 'src' : this.signFile, + 'type' : 'video/' + this.signFile.substr(-3) + }); + this.$signVideo.append($signSource); + } else { + // for each original <source>, add a <source> to the sign <video> + for (i=0; i < this.$sources.length; i++) { + signSrc = DOMPurify.sanitize( this.$sources[i].getAttribute('data-sign-src') ); + srcType = this.$sources[i].getAttribute('type'); + if (signSrc) { + $signSource = $('<source>',{ + 'src' : signSrc, + 'type' : srcType + }); + this.$signVideo.append($signSource); + } else { + // source is missing a sign language version + // can't include sign language + this.hasSignLanguage = false; + return; + } + } + } + this.$signWindow.append( this.$signVideo ); + } else if ( this.signYoutubeId ) { + this.signYoutube = this.initYouTubeSignPlayer(); + } + + // make it draggable + if ( null === this.$signDivLocation ) { + this.initDragDrop('sign'); + } + + if (this.prefSign === 1) { + // sign window is on. Go ahead and position it and show it + if ( null === this.$signDivLocation ) { + this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); + } + } else { + this.$signWindow.hide(); + } + }; + - var thisObj, signVideoId, signVideoWidth, i, signSrc, srcType, $signSource; + AblePlayer.prototype.initYouTubeSignPlayer = function () { + var thisObj, deferred, promise; thisObj = this; + deferred = new this.defer(); + promise = deferred.promise(); - signVideoWidth = this.getDefaultWidth('sign'); + this.youTubeSignPlayerReady = false; - signVideoId = this.mediaId + '-sign'; - this.$signVideo = $('<video>',{ - 'id' : signVideoId, - 'tabindex' : '-1' - }); - this.signVideo = this.$signVideo[0]; - // for each original <source>, add a <source> to the sign <video> - for (i=0; i < this.$sources.length; i++) { - signSrc = this.$sources[i].getAttribute('data-sign-src'); - srcType = this.$sources[i].getAttribute('type'); - if (signSrc) { - $signSource = $('<source>',{ - 'src' : signSrc, - 'type' : srcType + if (AblePlayer.youTubeIframeAPIReady) { + // Script already loaded and ready. + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + } else { + // Has another player already started loading the script? If so, abort... + if ( ! AblePlayer.loadingYouTubeIframeAPI ) { + thisObj.getScript('https://www.youtube.com/iframe_api', function () { + console.log( 'YouTube API loaded' ); }); - this.$signVideo.append($signSource); - } - else { - // source is missing a sign language version - // can't include sign language - this.hasSignLanguage = false; - break; } + + // Otherwise, keeping waiting for script load event... + $('body').on('youTubeIframeAPIReady', function () { + thisObj.finalizeYoutubeSignInit().then(function() { + deferred.resolve(); + }); + }); } + return promise; + }; - this.$signWindow = $('<div>',{ - 'class' : 'able-sign-window', - 'role': 'dialog', - 'aria-label': this.tt.sign - }); - this.$signToolbar = $('<div>',{ - 'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls' - }); + AblePlayer.prototype.finalizeYoutubeSignInit = function () { - this.$signWindow.append(this.$signToolbar, this.$signVideo); + // This is called once we're sure the Youtube iFrame API is loaded -- see above + var deferred, promise, thisObj, containerId, ccLoadPolicy, autoplay; - this.$ableWrapper.append(this.$signWindow); + deferred = new this.defer(); + promise = deferred.promise(); + thisObj = this; + containerId = this.mediaId + '_youtube_sign'; - // make it draggable - this.initDragDrop('sign'); + this.$signWindow.append($('<div>').attr('id', containerId)); + autoplay = (this.okToPlay) ? 1 : 0; - if (this.prefSign === 1) { - // sign window is on. Go ahead and position it and show it - this.positionDraggableWindow('sign',this.getDefaultWidth('sign')); - } - else { - this.$signWindow.hide(); - } + // Documentation https://developers.google.com/youtube/player_parameters + this.youTubeSignPlayer = new YT.Player(containerId, { + videoId: this.getYouTubeId(this.signYoutubeId), + host: this.youTubeNoCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com', + playerVars: { + autoplay: autoplay, + cc_lang_pref: this.captionLang, // set the caption language + cc_load_policy: 0, + controls: 0, // no controls, using our own + disableKb: 1, // disable keyboard shortcuts, using our own + enablejsapi: 1, + hl: this.lang, // set the UI language to match Able Player + iv_load_policy: 3, // do not show video annotations + origin: window.location.origin, + playsinline: this.playsInline, + rel: 0, // when video ends, show only related videos from same channel (1 shows any) + start: this.startTime + }, + events: { + onReady: function (player) { + player.target.mute(); + player.target.unloadModule( 'captions' ); + thisObj.youTubeSignPlayerReady = true; + + deferred.resolve(); + }, + onError: function (x) { + deferred.reject(); + }, + onStateChange: function (x) { + thisObj.getPlayerState().then(function() { + // no actions + }); + }, + onApiChange: function() { + // No actions + }, + onPlaybackQualityChange: function () { + // no actions + }, + } + }); + + return promise; }; })(jQuery); @@ -15472,30 +14003,19 @@ if (typeof module !== "undefined" && module.exports) { // return language name associated with lang code "key" // whichName is either "English" or "local" (i.e., native name) - var lang, code, subTag; + var lang, code, subTag; lang = isoLangs[key.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName; - } - else { - return lang.name; - } - } - else if (key.includes('-')) { + if (lang) { + return (whichName === 'local') ? lang.nativeName : lang.name; + } else if (key.includes('-')) { code = key.substring(0,2); - subTag = key.substring(3); - lang = isoLangs[code.toLowerCase()]; - if (lang) { - if (whichName === 'local') { - return lang.nativeName + ' (' + subTag + ')'; - } - else { - return lang.name + ' (' + subTag + ')'; - } + subTag = key.substring(3); + lang = isoLangs[code.toLowerCase()]; + if (lang) { + return (whichName === 'local') ? lang.nativeName + ' (' + subTag + ')' : lang.name + ' (' + subTag + ')'; } } - // if all else has failed, use the key as the label + // if all else has failed, use the key as the label return key; }; @@ -15503,51 +14023,86 @@ if (typeof module !== "undefined" && module.exports) { (function ($) { AblePlayer.prototype.getSupportedLangs = function() { // returns an array of languages for which AblePlayer has translation tables - var langs = ['ca','cs','da','de','en','es','fr','he','id','it','ja','nb','nl','pt','pt-br','sv','tr','zh-tw']; + var langs = { + 'ca' : 'Catalan', + 'cs' : 'Czech', + 'da' : 'Danish', + 'de' : 'German', + 'en' : 'English', + 'es' : 'Spanish', + 'fr' : 'French', + 'he' : 'Hebrew', + 'id' : 'Indonesian', + 'it' : 'Italian', + 'ja' : 'Japanese', + 'ms' : 'Malay', + 'nb' : 'Norwegian Bokmål', + 'nl' : 'Dutch', + 'pl' : 'Polish', + 'pt' : 'Portuguese', + 'pt-br' : 'Brazilian Portuguese', + 'sv' : 'Swedish', + 'tr' : 'Turkish', + 'zh-tw' : 'Chinese (Taiwan)' + }; + return langs; }; + /** + * Fetch a translated string if it exists. + * + * @param {string} key JSON key to locate translated string. + * @param {string} fallback Default language if no translation found. + * @param {Array} args Ordered array of arguments to replace in string. + * @returns + / + AblePlayer.prototype.translate = function( key, fallback, args = Array() ) { + let translation = ''; + if ( this.tt[ key ] ) { + translation = this.tt[ key ]; + } else { + translation = fallback; + } + if ( args.length > 0 ) { + args.forEach( ( val, index ) => { + let ref = index + 1; + translation = translation.replace( '%' + ref, val ); + }); + } + + return translation; + } + AblePlayer.prototype.getTranslationText = function() { // determine language, then get labels and prompts from corresponding translation var - - var deferred, thisObj, supportedLangs, docLang, msg, translationFile, collapsedLang, i, - similarLangFound; - deferred = $.Deferred(); + var deferred, thisObj, supportedLangs, docLang, translationFile, i, similarLangFound; + deferred = new this.defer(); thisObj = this; supportedLangs = this.getSupportedLangs(); // returns an array if (this.lang) { // a data-lang attribute is included on the media element - if ($.inArray(this.lang,supportedLangs) === -1) { + if ( Object.hasOwn( supportedLangs,this.lang ) ) { // the specified language is not supported - if (this.lang.indexOf('-') == 2) { + if ( this.lang.indexOf('-') == 2 ) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(this.lang.substring(0,2),supportedLangs) !== -1) { - // parent lang is supported. Use that. - this.lang = this.lang.substring(0,2); - } - else { - // the parent language is not supported either - // unable to use the specified language - this.lang = null; - } - } - else { + // if parent lang is supported. Use that, else null. + this.lang = ( Object.hasOwn(supportedLangs,this.lang.substring(0,2)) !== -1 ) ? this.lang.substring(0,2) : null; + } else { // this is not a localized language. - // but maybe there's a similar localized language supported - // that has the same parent? - similarLangFound = false; - i = 0; - while (i < supportedLangs.length) { - if (supportedLangs[i].substring(0,2) == this.lang) { - this.lang = supportedLangs[i]; - similarLangFound = true; + // but maybe there's a similar localized language supported + // that has the same parent? + similarLangFound = false; + for ( const [key,value] of Object.entries(supportedLangs) ) { + if ( key.substring(0,2) == this.lang ) { + this.lang = supportedLangs[i]; + similarLangFound = true; } - i++; } - if (!similarLangFound) { + if ( !similarLangFound ) { // language requested via data-lang is not supported this.lang = null; } @@ -15559,24 +14114,21 @@ if (typeof module !== "undefined" && module.exports) { // try the language of the web page, if specified if ($('body').attr('lang')) { docLang = $('body').attr('lang').toLowerCase(); - } - else if ($('html').attr('lang')) { + } else if ($('html').attr('lang')) { docLang = $('html').attr('lang').toLowerCase(); - } - else { + } else { docLang = null; } if (docLang) { - if ($.inArray(docLang,supportedLangs) !== -1) { + if ( Object.hasOwn( supportedLangs,docLang ) ) { // the document language is supported this.lang = docLang; - } - else { + } else { // the document language is not supported if (docLang.indexOf('-') == 2) { // this is a localized lang attribute (e.g., fr-CA) // try the parent language, given the first two characters - if ($.inArray(docLang.substring(0,2),supportedLangs) !== -1) { + if ( Object.hasOwn(supportedLangs,docLang.substring(0,2)) ) { // the parent language is supported. use that. this.lang = docLang.substring(0,2); } @@ -15594,248 +14146,70 @@ if (typeof module !== "undefined" && module.exports) { if (!this.searchLang) { this.searchLang = this.lang; } - translationFile = this.rootPath + 'translations/' + this.lang + '.js'; - $.getJSON(translationFile, function(data) { - // success! - thisObj.tt = data; - deferred.resolve(); - }) - .fail(function() { - console.log( "Critical Error: Unable to load translation file:",translationFile); - thisObj.provideFallback(); - deferred.fail(); - }) + translationFile = this.rootPath + 'translations/' + this.lang + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + console.log( "Error: Translation files should be updated to JSON." + error,translationFile); + translationFile = thisObj.rootPath + 'translations/' + thisObj.lang + '.js'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisObj.tt = data; + thisObj.translationFiles = true; + deferred.resolve(); + }) + .catch( error => { + console.log( "Error: Unable to load translation file:", translationFile); + thisObj.tt = {}; + thisObj.translationFiles = false; + deferred.resolve(); + }); + }); return deferred.promise(); }; AblePlayer.prototype.getSampleDescriptionText = function() { + if ( ! this.translationFiles ) { + this.sampleText = []; + let translation = { 'lang':'en', 'text': this.translate( 'sampleDescriptionText', 'Adjust settings to hear this sample text.' ) }; + this.sampleText.push(translation); + } else { + // Create an array of sample description text in all languages + // This needs to be readily available for testing different voices + // in the Description Preferences dialog + var thisObj, supportedLangs, thisLang, translationFile, thisText, translation; + + supportedLangs = this.getSupportedLangs(); + thisObj = this; - // Create an array of sample description text in all languages - // This needs to be readily available for testing different voices - // in the Description Preferences dialog - var thisObj, supportedLangs, i, thisLang, translationFile, thisText, translation; - - supportedLangs = this.getSupportedLangs(); - - thisObj = this; - - this.sampleText = []; - for (i=0; i < supportedLangs.length; i++) { - translationFile = this.rootPath + 'translations/' + supportedLangs[i] + '.js'; - $.getJSON(translationFile, thisLang, (function(thisLang) { - return function(data) { - thisText = data.sampleDescriptionText; - translation = {'lang':thisLang, 'text': thisText}; - thisObj.sampleText.push(translation); - }; - }(supportedLangs[i])) // pass lang to callback function - ); + this.sampleText = []; + for ( const [key,value] of Object.entries(supportedLangs) ) { + translationFile = this.rootPath + 'translations/' + key + '.json'; + fetch(translationFile) + .then( response => { + return response.json(); + }) + .then( data => { + thisText = data.sampleDescriptionText; + translation = {'lang':thisLang, 'text': thisText}; + thisObj.sampleText.push(translation); + }); + } } }; })(jQuery); -(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); - -/! Copyright (c) 2014 - Paul Tavares - purtuga - @paul_tavares - MIT License */ -;(function($){ - - /** - * Delays the execution of a function until an expression returns true. - * The expression is checked every 100 milliseconds for as many tries - * as defined in in the attempts option - * - * @param {Object} options - * @param {Function} options.when - * Function to execute on every interval. - * Must return true (boolean) in order for - * options.do to be executed. - * @param {Function} [options.exec] - * Function to be executed once options.when() - * returns true. - * @param {Interger} [options.interval=100] - * How long to wait in-between tries. - * @param {Interger} [options.attempts=100] - * How many tries to use before its considered - * a failure. - * @param {Interger} [options.delayed=0] - * Number of miliseconds to wait before execution - is started. Default is imediately. - * - * @return {jQuery.Promise} - * - * @example - * - * $.doWhen({ - * when: function(){ - * return false; - * }, - * exec: function(){ - * alert("never called given false response on when param!"); - * } - * }) - * .fail(function(){ - * alert('ALERT: FAILED CONDITION'); - * }) - * .then(function(){ - * alert("resolved."); - * }); - * - / - $.doWhen = function(options) { - - return $.Deferred(function(dfd){ - - var opt = $.extend({}, { - when: null, - exec: function(){}, - interval: 100, - attempts: 100, - delayed: 0 - }, - options, - { - checkId: null - }), - startChecking = function(){ - - // Check condition now and if true, then resolve object - if (opt.when() === true) { - - opt.exec.call(dfd.promise()); - dfd.resolve(); - return; - - } - - // apply minimal UI and hide the overlay - opt.checkId = setInterval(function(){ - - if (opt.attempts === 0) { - - clearInterval(opt.checkId); - dfd.reject(); - - } else { - - --opt.attempts; - - if (opt.when() === true) { - - opt.attempts = 0; - clearInterval(opt.checkId); - opt.exec.call(dfd.promise()); - dfd.resolve(); - - } - - } - - }, opt.interval); - - }; - - if (opt.delayed > 0) { - - setTimeout(startChecking, Number(opt.delayed)); - - } else { - - startChecking(); - - } - - }).promise(); - - }; - -})(jQuery); / 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 @@ -15844,24 +14218,14 @@ if (typeof module !== "undefined" && module.exports) { (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; + var thisObj, $heading, $instructions, $p1, $p2, $ul, $li1, $li2, $li3, + $fieldset, $legend, i, $radioDiv, radioId, $label, $radio, $saveButton, $savedTable; thisObj = this; - if ($('#able-vts').length) { - // Page includes a container for a VTS instance - + if ( null !== document.getElementById( 'able-vts' ) ) { // Are they qualifying tracks? if (this.vtsTracks.length) { - // Yes - there are! - // Build an array of unique languages this.langs = []; this.getAllLangs(this.vtsTracks); @@ -15870,7 +14234,8 @@ if (typeof module !== "undefined" && module.exports) { this.vtsLang = this.lang; // Inject a heading - $heading = $('<h2>').text('Video Transcript Sorter'); // TODO: Localize; intelligently assign proper heading level + let heading = this.translate( 'vtsHeading', 'Video Transcript Sorter' ); + $heading = $('<h2>').text( heading ); // TODO: intelligently assign proper heading level $('#able-vts').append($heading); // Inject an empty div for writing messages @@ -15885,20 +14250,21 @@ if (typeof module !== "undefined" && module.exports) { $instructions = $('<div>',{ 'id': 'able-vts-instructions' }); - $p1 = $('<p>').text('Use the Video Transcript Sorter to perform any of the following tasks:'); + $p1 = $('<p>').text( this.translate( 'vtsInstructions1', 'Use the Video Transcript Sorter to modify text tracks:' ) ); $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.'); + $li1 = $('<li>').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 = $('<li>').text( this.translate( 'vtsInstructions3', 'Modify content or start/end times (all are directly editable within the table).' ) ); + $li3 = $('<li>').text( this.translate( 'vtsInstructions4', 'Add new content, such as chapters or descriptions.' ) ); + $p2 = $('<p>').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 = $('<fieldset>'); - $legend = $('<legend>').text('Select a language'); // TODO: Localize this - $fieldset.append($legend) + $legend = $('<legend>').text( this.translate( 'vtsSelectLanguage', 'Select a language' ) ); + $fieldset.append($legend); + $fieldWrapper = $( '<div class="vts-lang-selector"></div>' ); for (i in this.langs) { radioId = 'vts-lang-radio-' + this.langs[i]; $radioDiv = $('<div>',{ @@ -15922,29 +14288,29 @@ if (typeof module !== "undefined" && module.exports) { $label = $('<label>', { 'for': radioId // Two options for label: - // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; + // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; // TODO: if using this be sure to add lang attr to <div> (see above) }).text(this.getLanguageName(this.langs[i])); $radioDiv.append($radio,$label); - $fieldset.append($radioDiv); + $fieldWrapper.append($radioDiv); } + $fieldset.append( $fieldWrapper ); $('#able-vts').append($fieldset); - - // Inject a 'Save Changes' button + let vtsSave = this.translate( 'vtsSave', 'Generate new .vtt content' ); + // Inject a button to generate new files. $saveButton = $('<button>',{ 'type': 'button', 'id': 'able-vts-save', 'value': 'save' - }).text('Save Changes'); // TODO: Localize this + }).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, i, closestKind; + var kindOptions, beforeEditing, editedCell, editedContent, i; kindOptions = ['captions','chapters','descriptions','subtitles']; $('td[contenteditable="true"]').on('focus',function() { beforeEditing = $(this).text(); @@ -15959,20 +14325,16 @@ if (typeof module !== "undefined" && module.exports) { // assume they correctly typed the first character if (editedContent.substring(0,1) === 's') { $(this).text('subtitles'); - } - else if (editedContent.substring(0,1) === 'd') { + } else if (editedContent.substring(0,1) === 'd') { $(this).text('descriptions'); - } - else if (editedContent.substring(0,2) === 'ch') { + } else if (editedContent.substring(0,2) === 'ch') { $(this).text('chapters'); - } - else { + } else { // whatever else they types, assume 'captions' $(this).text('captions'); } } - } - else if (editedCell === 2 || editedCell === 3) { + } else if (editedCell === 2 || editedCell === 3) { // start or end time // ensure proper formatting (with 3 decimal places) $(this).text(thisObj.formatTimestamp(editedContent)); @@ -15984,30 +14346,27 @@ if (typeof module !== "undefined" && module.exports) { 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 + $(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 { + } else { // cancel saving, and restore the table using edited content - $(this).attr('value','save').text('Save Changes'); // TODO: Localize this + $(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('Cancelling saving. Any edits you made have been restored in the VTS table.'); // TODO: Localize this + thisObj.showVtsAlert( thisObj.translate( 'vtsCancel', 'Cancelling saving. Any edits you made have been restored in the VTS table.' ) ); } }); } @@ -16016,10 +14375,8 @@ if (typeof module !== "undefined" && module.exports) { 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) - - // Called from tracks.js + // TODO: Add support for trackDesc + // (to destinguish between tracks for the decribed vs non-described versions) var srcFile, vtsCues; srcFile = this.getFilenameFromPath(src); @@ -16037,15 +14394,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getFilenameFromPath = function(path) { var lastSlash; - lastSlash = path.lastIndexOf('/'); - if (lastSlash === -1) { - // there are no slashes in path. - return path; - } - else { - return path.substring(lastSlash+1); - } + // fix slashes. + return (lastSlash === -1) ? path : path.substring(lastSlash+1); }; AblePlayer.prototype.getFilenameFromTracks = function(kind,lang) { @@ -16083,13 +14434,11 @@ if (typeof module !== "undefined" && module.exports) { if (content.length > 0) { // add back the EOL between rows of content content += "\n" + nextRow; - } - else { + } else { // this is the first row of content. No need for an EOL content += nextRow; } - } - else { + } else { blankRow = true; } j++; @@ -16101,8 +14450,7 @@ if (typeof module !== "undefined" && module.exports) { }); i = j; //skip ahead } - } - else { + } else { i++; } } @@ -16112,12 +14460,7 @@ if (typeof module !== "undefined" && module.exports) { 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; - } + return (/^[0-9:,.]$/.test(timestamp)) ? true : false; }; AblePlayer.prototype.formatTimestamp = function(timestamp) { @@ -16139,8 +14482,7 @@ if (typeof module !== "undefined" && module.exports) { if (lastPart.length > 3) { // chop off any extra digits lastPart = lastPart.substring(0,3); - } - else if (lastPart.length < 3) { + } else if (lastPart.length < 3) { // add trailing zeros while (lastPart.length < 3) { lastPart += '0'; @@ -16154,7 +14496,7 @@ if (typeof module !== "undefined" && module.exports) { // 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; + var $table, $thead, headers, i, $tr, $th, $td, rows, rowNum, rowId; if (action === 'update') { // remove existing table @@ -16165,10 +14507,16 @@ if (typeof module !== "undefined" && module.exports) { $table = $('<table>',{ 'lang': lang }); - $tr = $('<tr>',{ - 'lang': 'en' // TEMP, until header row is localized - }); - headers = ['Row #','Kind','Start','End','Content','Actions']; // TODO: Localize this + $thead = $( '<thead>' ); + $tr = $( '<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 = $('<th>', { 'scope': 'col' @@ -16178,7 +14526,8 @@ if (typeof module !== "undefined" && module.exports) { } $tr.append($th); } - $table.append($tr); + $thead.append($tr); + $table.append($thead); // Get all rows (sorted by start time), and inject them into table rows = this.getAllRows(lang); @@ -16274,8 +14623,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'down') { + } else if (button === 'down') { if (rowNum < numRows) { $button = $('<button>',{ 'id': 'able-vts-button-down-' + rowNum, @@ -16307,8 +14655,7 @@ if (typeof module !== "undefined" && module.exports) { $button.html($button.html()); $td.append($button); } - } - else if (button === 'insert') { + } else if (button === 'insert') { // Add Insert button to all rows $button = $('<button>',{ 'id': 'able-vts-button-insert-' + rowNum, @@ -16342,8 +14689,7 @@ if (typeof module !== "undefined" && module.exports) { // 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') { + } else if (button === 'delete') { // Add Delete button to all rows $button = $('<button>',{ 'id': 'able-vts-button-delete-' + rowNum, @@ -16409,14 +14755,12 @@ if (typeof module !== "undefined" && module.exports) { 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; + var credit + = 'Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a>' + + ' from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a>' + + ' are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a>' + ; + return '<div id="able-vts-icon-credit">' + credit + '</div>'; }; AblePlayer.prototype.getAllLangs = function(tracks) { @@ -16474,16 +14818,13 @@ if (typeof module !== "undefined" && module.exports) { if (action == 'up') { // move the row up this.moveRow(rowNum,'up'); - } - else if (action == 'down') { + } else if (action == 'down') { // move the row down this.moveRow(rowNum,'down'); - } - else if (action == 'insert') { + } else if (action == 'insert') { // insert a row below this.insertRow(rowNum); - } - else if (action == 'delete') { + } else if (action == 'delete') { // delete the row this.deleteRow(rowNum); } @@ -16492,9 +14833,8 @@ if (typeof module !== "undefined" && module.exports) { 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; + 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'); @@ -16576,10 +14916,11 @@ if (typeof module !== "undefined" && module.exports) { this.adjustTimes(newRowNum); // Announce the insertion - this.showVtsAlert('A new row ' + newRowNum + ' has been inserted'); // TODO: Localize this + let newAlert = this.translate( 'vtsNewRow', 'A new row %1 has been inserted.', [ newRowNum ] ); + this.showVtsAlert( newAlert ); // Place focus in new select field - $select.focus(); + $select.trigger('focus'); }; @@ -16602,14 +14943,15 @@ if (typeof module !== "undefined" && module.exports) { } // Announce the deletion - this.showVtsAlert('Row ' + rowNum + ' has been deleted'); // TODO: Localize this + let newAlert = this.translate( 'vtsDeletedRow', 'Row %1 has been deleted.', [ rowNum ] ); + this.showVtsAlert( newAlert ); }; AblePlayer.prototype.moveRow = function(rowNum,direction) { // swap two rows - var $rows, $thisRow, otherRowNum, $otherRow, newTimes, msg; + var $rows, $thisRow, otherRowNum, $otherRow, msg; $rows = $('#able-vts table').find('tr'); $thisRow = $('#able-vts table').find('tr').eq(rowNum); @@ -16617,8 +14959,7 @@ if (typeof module !== "undefined" && module.exports) { otherRowNum = parseInt(rowNum) - 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.before($thisRow); - } - else if (direction == 'down') { + } else if (direction == 'down') { otherRowNum = parseInt(rowNum) + 1; $otherRow = $('#able-vts table').find('tr').eq(otherRowNum); $otherRow.after($thisRow); @@ -16634,9 +14975,8 @@ if (typeof module !== "undefined" && module.exports) { // 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; + // Announce the move + msg = this.translate( 'vtsMovedRow', 'Row %1 has been moved %2 and is now Row %3.', [ rowNum, direction, otherRowNum ] ); this.showVtsAlert(msg); }; @@ -16673,16 +15013,10 @@ if (typeof module !== "undefined" && module.exports) { // 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'; - } + // 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()); @@ -16691,19 +15025,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the first row prevRowNum = null; $prevRow = null; @@ -16717,19 +15044,12 @@ if (typeof module !== "undefined" && module.exports) { // 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; - } + // 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 { + } else { // this is the last row nextRowNum = null; $nextRow = null; @@ -16750,62 +15070,43 @@ if (typeof module !== "undefined" && module.exports) { 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') { + // 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); - 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') { + // end the new row immediately before the next row starts + end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (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 { + } 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 { + } 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 { + } else { // start needs to be incremented start = (parseFloat(prevStart) + minDuration[prevKind]).toFixed(3); end = (parseFloat(start) + minDuration[kind]).toFixed(3); } - } - else { + } else { // this is the first row if (start < nextStart) { // No change is necessary - } - else { + } else { // nextStart needs to be incremented nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3); nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3); @@ -16848,9 +15149,8 @@ if (typeof module !== "undefined" && module.exports) { if (kindEnd == -1) { // no spaces found, "kind-" must be the only myclass return myclass.substring(kindStart); - } - else { - // kind-* is one of multiple classes + } 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); } @@ -16862,7 +15162,11 @@ if (typeof module !== "undefined" && module.exports) { // 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'); + 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) { @@ -16885,7 +15189,7 @@ if (typeof module !== "undefined" && module.exports) { 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(); + content = $rows.eq(i).find('td').eq(4)[0].innerText; if (start !== undefined && end !== undefined) { vtt[kind] += start + ' --> ' + end + "\n"; if (content !== 'undefined') { @@ -16913,14 +15217,13 @@ if (typeof module !== "undefined" && module.exports) { var $heading, filename, $p, pText, $textarea; - $heading = $('<h3>').text(kind.charAt(0).toUpperCase() + kind.slice(1)); + $heading = $('<h3>').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 += '<em>' + kind + '</em> WebVTT file (<strong>' + filename + '</strong>).'; - } - else { + } else { pText += 'into a new ' + this.getLanguageName(lang) + ' <em>' + kind + '</em> WebVTT file.'; } $p = $('<p>',{ @@ -16932,14 +15235,14 @@ if (typeof module !== "undefined" && module.exports) { })(jQuery); - (function ($) { + AblePlayer.prototype.initVimeoPlayer = function () { - var thisObj, deferred, promise, containerId, vimeoId, autoplay, videoDimensions, options; + var thisObj, deferred, promise, containerId, vimeoId, options; thisObj = this; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); containerId = this.mediaId + '_vimeo'; @@ -16947,14 +15250,10 @@ if (typeof module !== "undefined" && module.exports) { // add container to which Vimeo player iframe will be appended this.$mediaContainer.prepend($('<div>').attr('id', containerId)); - // if a described version is available && user prefers desription + // if a described version is available && user prefers description // init player using the described version - if (this.vimeoDescId && this.prefDesc) { - vimeoId = this.vimeoDescId; - } - else { - vimeoId = this.vimeoId; - } + vimeoId = (this.vimeoDescId && this.prefDesc) ? this.vimeoDescId : this.vimeoId; + this.activeVimeoId = vimeoId; // Notes re. Vimeo Embed Options: @@ -16962,44 +15261,36 @@ if (typeof module !== "undefined" && module.exports) { // setting the "controls" option to "false" will hide the default controls, without hiding captions. // This is a new option from Vimeo; previously used "background:true" to hide the controller, // but that had unwanted side effects: - // - In addition to hiding the controls, it also hides captions - // - It automatically autoplays (initializing the player with autoplay:false does not override this) - // - It automatically loops (but this can be overridden by initializing the player with loop:false) - // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) + // - In addition to hiding the controls, it also hides captions + // - It automatically autoplays (initializing the player with autoplay:false does not override this) + // - It automatically loops (but this can be overridden by initializing the player with loop:false) + // - It automatically sets volume to 0 (not sure if this can be overridden, since no longer using the background option) - if (this.okToPlay) { - autoplay = 'true'; - } - else { - autoplay = 'false'; - } + autoplay = (this.okToPlay) ? 'true' : 'false'; - if (this.playerWidth) { - if (this.vimeoUrlHasParams) { - // use url param, not id + if (this.playerWidth) { + if (this.vimeoUrlHasParams) { + // use url param, not id options = { url: vimeoId, width: this.playerWidth, controls: false } - } - else { + } else { options = { id: vimeoId, width: this.playerWidth, controls: false } } - } - else { - // initialize without width & set width later - if (this.vimeoUrlHasParams) { + } else { + // initialize without width & set width later + if (this.vimeoUrlHasParams) { options = { url: vimeoId, controls: false } - } - else { + } else { options = { id: vimeoId, controls: false @@ -17017,18 +15308,18 @@ if (typeof module !== "undefined" && module.exports) { }); // get video's intrinsic size and initiate player dimensions - thisObj.vimeoPlayer.getVideoWidth().then(function(width) { - if (width) { - // also get height - thisObj.vimeoPlayer.getVideoHeight().then(function(height) { - if (height) { - thisObj.resizePlayer(width,height); + thisObj.vimeoPlayer.getVideoWidth().then(function(width) { + if (width) { + // also get height + thisObj.vimeoPlayer.getVideoHeight().then(function(height) { + if (height) { + thisObj.resizePlayer(width,height); } - }); + }); } }).catch(function(error) { - // an error occurred getting height or width - // TODO: Test this to see how gracefully it organically recovers + // an error occurred getting height or width + // TODO: Test this to see how gracefully it organically recovers }); if (!thisObj.hasPlaylist) { @@ -17061,7 +15352,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPaused = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getPaused().then(function (paused) { @@ -17075,7 +15366,7 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoEnded = function () { var deferred, promise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); this.vimeoPlayer.getEnded().then(function (ended) { @@ -17088,11 +15379,9 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoState = function () { - var thisObj, deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - - thisObj = this; + var deferred, promise, promises, gettingPausedPromise, gettingEndedPromise; - deferred = new $.Deferred(); + deferred = new this.defer(); promise = deferred.promise(); promises = []; @@ -17119,10 +15408,10 @@ if (typeof module !== "undefined" && module.exports) { // get data via Vimeo Player API, and push data to this.captions // Note: Vimeo doesn't expose the caption cues themselves // so this.captions will only include metadata about caption tracks; not cues - var deferred = new $.Deferred(); + var deferred = new this.defer(); var promise = deferred.promise(); - var thisObj, i, trackId, isDefaultTrack; + var thisObj, i, isDefaultTrack; thisObj = this; @@ -17142,15 +15431,13 @@ if (typeof module !== "undefined" && module.exports) { thisObj.hasCaptions = true; if (thisObj.prefCaptions === 1) { thisObj.captionsOn = true; - } - else { + } else { thisObj.captionsOn = false; } // assign the default track based on language of the player if (tracks[i]['language'] === thisObj.lang) { isDefaultTrack = true; - } - else { + } else { isDefaultTrack = false; } thisObj.tracks.push({ @@ -17158,18 +15445,17 @@ if (typeof module !== "undefined" && module.exports) { 'language': tracks[i]['language'], 'label': tracks[i]['label'], 'def': isDefaultTrack - }); + }); } - thisObj.captions = thisObj.tracks; + thisObj.captions = thisObj.tracks; thisObj.hasCaptions = true; // setupPopups again with new captions array, replacing original thisObj.setupPopups('captions'); deferred.resolve(); - } - else { + } else { thisObj.hasCaptions = false; - thisObj.usingVimeoCaptions = false; + thisObj.usingVimeoCaptions = false; deferred.resolve(); } }); @@ -17179,69 +15465,59 @@ if (typeof module !== "undefined" && module.exports) { AblePlayer.prototype.getVimeoPosterUrl = function (vimeoId, width) { - // this is a placeholder, copied from getYouTubePosterUrl() - // Vimeo doesn't seem to have anything similar, - // nor does it seem to be possible to get the poster via the Vimeo API - // Vimeo playlist support (with thumbnail images) may require use of data-poster + // Vimeo Oembed only returns a 640px width image. Hope at some point there's an alternative. + var url = 'http://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId, imageUrl = ''; + console.log( url ); + fetch( url ).then( response => { - // return a URL for retrieving a YouTube poster image - // supported values of width: 120, 320, 480, 640 + return response.json(); + }) + .then( json => { + imageUrl = json.thumbnail_url; + }) + .catch( error => { + if (thisObj.debug) { + console.log( 'Vimeo API query: ' + error ); + } + }); - var url = 'https://img.youtube.com/vi/' + youTubeId; - if (width == '120') { - // default (small) thumbnail, 120 x 90 - return url + '/default.jpg'; - } - else if (width == '320') { - // medium quality thumbnail, 320 x 180 - return url + '/hqdefault.jpg'; - } - else if (width == '480') { - // high quality thumbnail, 480 x 360 - return url + '/hqdefault.jpg'; - } - else if (width == '640') { - // standard definition poster image, 640 x 480 - return url + '/sddefault.jpg'; - } - return false; - }; + return imageUrl; + }; AblePlayer.prototype.getVimeoId = function (url) { - + // return a Vimeo ID, extracted from a full Vimeo URL // Supported URL patterns are anything containing 'vimeo.com' - // and ending with a '/' followed by the ID. + // and ending with a '/' followed by the ID. // (Vimeo IDs do not have predicatable lengths) - - // Update: If URL contains parameters, return the full url - // This will need to be passed to the Vimeo Player API - // as a url parameter, not as an id parameter - this.vimeoUrlHasParams = false; - - var idStartPos, id; - - if (typeof url === 'number') { - // this is likely already a vimeo ID - return url; - } - else if (url.indexOf('vimeo.com') !== -1) { - // this is a full Vimeo URL - if (url.indexOf('?') !== -1) { - // URL contains parameters - this.vimeoUrlHasParams = true; - return url; - } - else { - url = url.trim(); - idStartPos = url.lastIndexOf('/') + 1; - id = url.substring(idStartPos); - return id; - } - } - else { - return url; - } -}; + + // Update: If URL contains parameters, return the full url + // This will need to be passed to the Vimeo Player API + // as a url parameter, not as an id parameter + this.vimeoUrlHasParams = false; + + if (typeof url === 'number') { + // this is likely already a vimeo ID + return url; + } else { + urlObject = new URL(url); + } + if ( 'vimeo.com' === urlObject.hostname || 'player.vimeo.com' === urlObject.hostname ) { + // this is a full Vimeo URL + if ( '' !== urlObject.search ) { + // URL contains parameters + this.vimeoUrlHasParams = true; + return url; + } else { + if ( 'player.vimeo.com' === urlObject.hostname ) { + return urlObject.pathname.replace( '/video/', '' ); + } else { + return urlObject.pathname.replace( '/', '' ); + } + } + } else { + return url; + } + }; })(jQuery); diff --git a/src/build/separate-dompurify/ableplayer.min.js b/src/build/separate-dompurify/ableplayer.min.js index 93a513a..b8a71b7 100644 --- a/src/build/separate-dompurify/ableplayer.min.js +++ b/src/build/separate-dompurify/ableplayer.min.js @@ -1,2 +1,2 @@ -/! ableplayer V4.5.1 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / -"use strict";var AblePlayerInstances=[];!function(t){t((function(){t("video, audio").each((function(e,i){void 0!==t(i).data("able-player")&&AblePlayerInstances.push(new AblePlayer(t(this),t(i)))}))})),window.onYouTubeIframeAPIReady=function(){AblePlayer.youTubeIframeAPIReady=!0,t("body").trigger("youTubeIframeAPIReady",[])},t(window).on("keydown",(function(t){1===AblePlayer.nextIndex&&AblePlayer.lastCreated.onPlayerKeyPress(t)})),window.AblePlayer=function(e){if(AblePlayer.lastCreated=this,this.media=e,0!==t(e).length){if(void 0!==t(e).attr("autoplay")?(this.autoplay=!0,this.okToPlay=!0):(this.autoplay=!1,this.okToPlay=!1),void 0!==t(e).attr("loop")?this.loop=!0:this.loop=!1,void 0!==t(e).attr("playsinline")?this.playsInline="1":this.playsInline="0",t(e).attr("poster")?this.hasPoster=!0:this.hasPoster=!1,t(e).attr("width")&&(this.width=t(e).attr("width")),t(e).attr("height")&&(this.height=t(e).attr("height")),void 0!==t(e).data("start-time")&&t.isNumeric(t(e).data("start-time"))?this.startTime=t(e).data("start-time"):this.startTime=0,void 0!==t(e).data("debug")&&!1!==t(e).data("debug")?this.debug=!0:this.debug=!1,void 0!==t(e).data("root-path")?this.rootPath=t(e).data("root-path").replace(/\/?$/,"/"):this.rootPath=this.getRootPath(),this.defaultVolume=7,void 0!==t(e).data("volume")&&""!==t(e).data("volume")){var i=t(e).data("volume");i>=0&&i<=10&&(this.defaultVolume=i)}if(this.volume=this.defaultVolume,void 0!==t(e).data("use-chapters-button")&&!1===t(e).data("use-chapters-button")?this.useChaptersButton=!1:this.useChaptersButton=!0,void 0!==t(e).data("descriptions-audible")&&!1===t(e).data("descriptions-audible")||void 0!==t(e).data("description-audible")&&!1===t(e).data("description-audible")?this.readDescriptionsAloud=!1:this.readDescriptionsAloud=!0,"screenreader"==t(e).data("desc-reader")?this.descReader="screenreader":this.descReader="browser","off"==t(e).data("state-captions")?this.defaultStateCaptions=0:this.defaultStateCaptions=1,"on"==t(e).data("state-descriptions")?this.defaultStateDescriptions=1:this.defaultStateDescriptions=0,"off"==t(e).data("desc-pause-default")?this.defaultDescPause=0:this.defaultDescPause=1,void 0!==t(e).data("heading-level")&&""!==t(e).data("heading-level")){var s=t(e).data("heading-level");/^[0-6]$/.test(s)&&(this.playerHeadingLevel=s)}if(void 0!==t(e).data("transcript-div")&&""!==t(e).data("transcript-div")?this.transcriptDivLocation=t(e).data("transcript-div"):this.transcriptDivLocation=null,void 0!==t(e).data("include-transcript")&&!1===t(e).data("include-transcript")?this.hideTranscriptButton=!0:this.hideTranscriptButton=null,this.transcriptType=null,void 0!==t(e).data("transcript-src")?(this.transcriptSrc=t(e).data("transcript-src"),this.transcriptSrcHasRequiredParts()&&(this.transcriptType="manual")):t(e).find('track[kind="captions"], track[kind="subtitles"]').length>0&&(this.transcriptDivLocation?this.transcriptType="external":this.transcriptType="popup"),void 0!==t(e).data("lyrics-mode")&&!1!==t(e).data("lyrics-mode")?this.lyricsMode=!0:this.lyricsMode=!1,void 0!==t(e).data("transcript-title")&&""!==t(e).data("transcript-title")&&(this.transcriptTitle=t(e).data("transcript-title")),"overlay"===t(e).data("captions-position")?this.defaultCaptionsPosition="overlay":this.defaultCaptionsPosition="below",void 0!==t(e).data("chapters-div")&&""!==t(e).data("chapters-div")&&(this.chaptersDivLocation=t(e).data("chapters-div")),void 0!==t(e).data("chapters-title")&&(this.chaptersTitle=t(e).data("chapters-title")),void 0!==t(e).data("chapters-default")&&""!==t(e).data("chapters-default")?this.defaultChapter=t(e).data("chapters-default"):this.defaultChapter=null,"arrows"===t(e).data("speed-icons")?this.speedIcons="arrows":this.speedIcons="animals","chapter"===t(e).data("seekbar-scope")||"chapters"===t(e).data("seekbar-scope")?this.seekbarScope="chapter":this.seekbarScope="video",void 0!==t(e).data("youtube-id")&&""!==t(e).data("youtube-id")&&(this.youTubeId=this.getYouTubeId(t(e).data("youtube-id"))),void 0!==t(e).data("youtube-desc-id")&&""!==t(e).data("youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(t(e).data("youtube-desc-id"))),void 0!==t(e).data("youtube-nocookie")&&t(e).data("youtube-nocookie")?this.youTubeNoCookie=!0:this.youTubeNoCookie=!1,void 0!==t(e).data("vimeo-id")&&""!==t(e).data("vimeo-id")&&(this.vimeoId=this.getVimeoId(t(e).data("vimeo-id"))),void 0!==t(e).data("vimeo-desc-id")&&""!==t(e).data("vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(t(e).data("vimeo-desc-id"))),"2020"==t(e).data("skin")?this.skin="2020":this.skin="legacy",void 0!==t(e).data("width")?this.playerWidth=parseInt(t(e).data("width")):t(e)[0].getAttribute("width")?this.playerWidth=parseInt(t(e)[0].getAttribute("width")):this.playerWidth=null,this.iconType="font",this.forceIconType=!1,void 0!==t(e).data("icon-type")&&""!==t(e).data("icon-type")){var a=t(e).data("icon-type");"font"!==a&&"image"!=a&&"svg"!=a||(this.iconType=a,this.forceIconType=!0)}if(void 0!==t(e).data("allow-fullscreen")&&!1===t(e).data("allow-fullscreen")?this.allowFullscreen=!1:this.allowFullscreen=!0,this.clickedFullscreenButton=!1,this.restoringAfterFullscreen=!1,this.defaultSeekInterval=10,this.useFixedSeekInterval=!1,void 0!==t(e).data("seek-interval")&&""!==t(e).data("seek-interval")){var n=t(e).data("seek-interval");/^[1-9][0-9]$/.test(n)&&(this.seekInterval=n,this.useFixedSeekInterval=!0)}void 0!==t(e).data("show-now-playing")&&!1===t(e).data("show-now-playing")?this.showNowPlaying=!1:this.showNowPlaying=!0,void 0!==t(e).data("use-ttml")?(this.useTtml=!0,this.convert=require("xml-js")):this.useTtml=!1,void 0!==t(e).data("test-fallback")&&!1!==t(e).data("test-fallback")?"2"==t(e).data("test-fallback")?this.testFallback=2:this.testFallback=1:this.testFallback=!1,void 0!==t(e).data("lang")&&""!==t(e).data("lang")?this.lang=t(e).data("lang").toLowerCase():this.lang=null,void 0!==t(e).data("meta-type")&&""!==t(e).data("meta-type")&&(this.metaType=t(e).data("meta-type")),void 0!==t(e).data("meta-div")&&""!==t(e).data("meta-div")&&(this.metaDiv=t(e).data("meta-div")),void 0!==t(e).data("search-div")&&""!==t(e).data("search-div")&&(this.searchDiv=t(e).data("search-div"),void 0!==t(e).data("search")&&""!==t(e).data("search")&&(this.searchString=t(e).data("search")),void 0!==t(e).data("search-lang")&&""!==t(e).data("search-lang")?this.searchLang=t(e).data("search-lang"):this.searchLang=null,void 0!==t(e).data("search-ignore-caps")&&!1!==t(e).data("search-ignore-caps")?this.searchIgnoreCaps=!0:this.searchIgnoreCaps=!1,void 0!==t(e).data("search-div")&&""!==t(e).data("search-div")&&(this.searchString=t(e).data("search"),this.searchDiv=t(e).data("search-div"))),void 0!==t(e).data("hide-controls")&&!1!==t(e).data("hide-controls")?(this.hideControls=!0,this.hideControlsOriginal=!0):(this.hideControls=!1,this.hideControlsOriginal=!1),void 0!==t(e).data("steno-mode")&&!1!==t(e).data("steno-mode")?(this.stenoMode=!0,void 0!==t(e).data("steno-iframe-id")&&""!==t(e).data("steno-iframe-id")?(this.stenoFrameId=t(e).data("steno-iframe-id"),this.$stenoFrame=t("#"+this.stenoFrameId),this.$stenoFrame.length||(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoMode=!1,this.stenoFrameId=null,this.$stenoFrame=null),this.setDefaults(),this.ableIndex=AblePlayer.nextIndex,AblePlayer.nextIndex+=1,this.title=t(e).attr("title"),this.tt={};var r=this;t.when(this.getTranslationText()).then((function(){r.countProperties(r.tt)>50?r.setup():r.provideFallback()})).fail((function(){r.provideFallback()}))}else this.provideFallback()},AblePlayer.nextIndex=0,AblePlayer.prototype.setup=function(){var t=this;this.initializing=!0,this.reinitialize().then((function(){t.player?t.setupInstance().then((function(){t.setupInstancePlaylist(),t.hasPlaylist||t.recreatePlayer().then((function(){t.initializing=!1,t.playerCreated=!0}))})):t.provideFallback()}))},AblePlayer.getActiveDOMElement=function(){for(var t=document.activeElement;t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t},AblePlayer.localGetElementById=function(e,i){return e.getRootNode?t(e.getRootNode().querySelector("#"+i)):t(document.getElementById(i))},AblePlayer.youTubeIframeAPIReady=!1,AblePlayer.loadingYouTubeIframeAPI=!1}(jQuery),function(t){AblePlayer.prototype.setDefaults=function(){this.playerCreated=!1,this.playing=!1,this.paused=!0,this.clickedPlay=!1,this.fullscreen=!1,this.swappingSrc=!1,this.initializing=!1,this.cueingPlaylistItems=!1,this.buttonWithFocus=null,this.speechEnabled=null,this.setIconColor(),this.setButtonImages()},AblePlayer.prototype.getRootPath=function(){var t,e,i,s,a,n;for(t=document.getElementsByTagName("script"),e=0;e<t.length;e++)if(-1!==(i=t[e].src).substring(i.lastIndexOf("/")).indexOf("ableplayer")){s=i.split("?")[0];break}return n=(a=s.split("/").slice(0,-1).join("/")).lastIndexOf("/"),a.substring(0,n)+"/"},AblePlayer.prototype.setIconColor=function(){var e,i,s,a,n;for(e=["controller","toolbar"],i=0;i<e.length;i++)"controller"==e[i]?s=t("<div>",{class:"able-controller"}).hide():"toolbar"===e[i]&&(s=t("<div>",{class:"able-window-toolbar"}).hide()),t("body").append(s),n=.2126(a=s.css("background-color").replace(/[^\d,]/g,"").split(","))[0]+.7152a[1]+.0722a[2]<125?"white":"black","controller"===e[i]?this.iconColor=n:"toolbar"===e[i]&&(this.toolbarIconColor=n),s.remove()},AblePlayer.prototype.setButtonImages=function(){this.imgPath=this.rootPath+"button-icons/"+this.iconColor+"/",this.playButtonImg=this.imgPath+"play.png",this.pauseButtonImg=this.imgPath+"pause.png",this.restartButtonImg=this.imgPath+"restart.png",this.rewindButtonImg=this.imgPath+"rewind.png",this.forwardButtonImg=this.imgPath+"forward.png",this.previousButtonImg=this.imgPath+"previous.png",this.nextButtonImg=this.imgPath+"next.png","arrows"===this.speedIcons?(this.fasterButtonImg=this.imgPath+"slower.png",this.slowerButtonImg=this.imgPath+"faster.png"):"animals"===this.speedIcons&&(this.fasterButtonImg=this.imgPath+"rabbit.png",this.slowerButtonImg=this.imgPath+"turtle.png"),this.captionsButtonImg=this.imgPath+"captions.png",this.chaptersButtonImg=this.imgPath+"chapters.png",this.signButtonImg=this.imgPath+"sign.png",this.transcriptButtonImg=this.imgPath+"transcript.png",this.descriptionsButtonImg=this.imgPath+"descriptions.png",this.fullscreenExpandButtonImg=this.imgPath+"fullscreen-expand.png",this.fullscreenCollapseButtonImg=this.imgPath+"fullscreen-collapse.png",this.prefsButtonImg=this.imgPath+"preferences.png",this.helpButtonImg=this.imgPath+"help.png"},AblePlayer.prototype.getSvgData=function(t){var e=Array();switch(t){case"play":e[0]="0 0 16 20",e[1]="M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z";break;case"pause":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"stop":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h15.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-15.714q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"restart":e[0]="0 0 20 20",e[1]="M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z";break;case"rewind":e[0]="0 0 20 20",e[1]="M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z";break;case"forward":e[0]="0 0 20 20",e[1]="M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z";break;case"previous":e[0]="0 0 20 20",e[1]="M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z";break;case"next":e[0]="0 0 20 20",e[1]="M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z";break;case"slower":e[0]="0 0 20 20",e[1]="M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z";break;case"faster":e[0]="0 0 11 20",e[1]="M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"turtle":e[0]="0 0 20 20",e[1]="M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z";break;case"rabbit":e[0]="0 0 20 20",e[1]="M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z";break;case"ellipsis":e[0]="0 0 20 20",e[1]="M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z";break;case"pipe":e[0]="0 0 20 20",e[1]="M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z";break;case"captions":e[0]="0 0 20 20",e[1]="M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z";break;case"descriptions":e[0]="0 0 20 20",e[1]="M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z";break;case"sign":e[0]="0 0 20 20",e[1]="M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z";break;case"mute":case"volume-mute":e[0]="0 0 20 20",e[1]="M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z";break;case"volume-soft":e[0]="0 0 20 20",e[1]="M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-medium":e[0]="0 0 20 20",e[1]="M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"volume-loud":e[0]="0 0 21 20",e[1]="M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z";break;case"chapters":e[0]="0 0 20 20",e[1]="M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z";break;case"transcript":e[0]="0 0 20 20",e[1]="M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z";break;case"preferences":e[0]="0 0 20 20",e[1]="M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z";break;case"close":e[0]="0 0 16 20",e[1]="M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z";break;case"fullscreen-expand":e[0]="0 0 20 20",e[1]="M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z";break;case"fullscreen-collapse":e[0]="0 0 20 20",e[1]="M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z";break;case"help":e[0]="0 0 11 20",e[1]="M0.577 6.317q-0.028-0.167 0.061-0.313 1.786-2.969 5.179-2.969 0.893 0 1.797 0.346t1.629 0.926 1.183 1.423 0.458 1.769q0 0.603-0.173 1.127t-0.391 0.854-0.614 0.664-0.642 0.485-0.681 0.396q-0.458 0.257-0.765 0.725t-0.307 0.748q0 0.19-0.134 0.363t-0.313 0.173h-2.679q-0.167 0-0.285-0.206t-0.117-0.419v-0.502q0-0.926 0.725-1.747t1.596-1.211q0.658-0.301 0.938-0.625t0.279-0.848q0-0.469-0.519-0.826t-1.2-0.357q-0.725 0-1.205 0.324-0.391 0.279-1.194 1.283-0.145 0.179-0.346 0.179-0.134 0-0.279-0.089l-1.83-1.395q-0.145-0.112-0.173-0.279zM3.786 16.875v-2.679q0-0.179 0.134-0.313t0.313-0.134h2.679q0.179 0 0.313 0.134t0.134 0.313v2.679q0 0.179-0.134 0.313t-0.313 0.134h-2.679q-0.179 0-0.313-0.134t-0.134-0.313z"}return e},AblePlayer.prototype.reinitialize=function(){var e,i;if(i=(e=new t.Deferred).promise(),window.console||(this.debug=!1),this.startedPlaying=!1,this.autoScrollTranscript=!0,this.$media=t(this.media).first(),this.media=this.$media[0],this.$media.is("audio"))this.mediaType="audio";else{if(!this.$media.is("video"))return this.provideFallback(),e.fail(),i;this.mediaType="video"}return this.$sources=this.$media.find("source"),this.player=this.getPlayer(),this.player||this.provideFallback(),this.setIconType(),e.resolve(),i},AblePlayer.prototype.setPlayerSize=function(t,e){this.$media.attr("id");"audio"===this.mediaType?this.playerWidth&&this.$ableWrapper.css("width",this.playerWidth+"px"):t>0&&e>0&&(this.playerWidth=t,this.playerHeight=e,this.aspectRatio=e/t)},AblePlayer.prototype.setIconType=function(){var e,i,s;if(this.forceIconType)return!1;document.createElementNS&&document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect?this.iconType="svg":(window.getComputedStyle?(t("span.icon-play").length?i=t("span.icon-play"):(e=t("<span>",{class:"icon-play able-clipped"}),t("body").append(e),i=e),void 0!==(s=window.getComputedStyle(i.get(0),null).getPropertyValue("font-family"))&&-1!==s.indexOf("able")?this.iconType="font":this.iconType="image"):this.iconType="image",void 0!==e&&e.remove())},AblePlayer.prototype.setupInstance=function(){var e=new t.Deferred,i=e.promise();return this.$media.attr("id")?this.mediaId=this.$media.attr("id"):(this.mediaId="ableMediaId_"+this.ableIndex,this.$media.attr("id",this.mediaId)),e.resolve(),i},AblePlayer.prototype.setupInstancePlaylist=function(){var e=this;if(this.hasPlaylist=!1,t(".able-playlist").each((function(){if(t(this).data("player")===e.mediaId){e.hasPlaylist=!0,e.$playlist=t(this).find("li"),t(this).find("li[data-youtube-id]").each((function(){var i=t(this).attr("data-youtube-id"),s=e.getYouTubePosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)})),t(this).find("li[data-vimeo-id]").each((function(){var i=t(this).attr("data-youtube-id"),s=e.getVimeoPosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)})),t(this).find("li span").attr("aria-hidden","true"),e.playlistIndex=0;var i=t(this).data("embedded");e.playlistEmbed=void 0!==i&&!1!==i}})),this.hasPlaylist&&this.loop&&this.media.removeAttribute("loop"),this.hasPlaylist&&this.playlistEmbed){var i=this.$playlist.parent();this.$playlistDom=i.clone(),i.remove()}this.hasPlaylist&&0===this.$sources.length&&(this.cuePlaylistItem(0),this.$sources=this.$media.find("source"))},AblePlayer.prototype.recreatePlayer=function(){var e,i,s,a,n;if(this.player)return i=(e=new t.Deferred).promise(),s=this,this.playerDeleted=!1,this.recreatingPlayer=!0,this.playerCreated||(this.loadCurrentPreferences(),this.injectPlayerCode(),this.resizePlayer(this.media.videoWidth,this.media.videoHeight)),this.getSampleDescriptionText(),this.initSignLanguage(),this.initPlayer().then((function(){s.getTracks().then((function(){s.initDescription().then((function(){s.setupTracks().then((function(){s.hasClosedDesc&&(!s.$descDiv||s.$descDiv&&!t.contains(s.$ableDiv[0],s.$descDiv[0]))&&s.injectTextDescriptionArea(),s.initSpeech("init"),s.setupTranscript().then((function(){s.initStenoFrame().then((function(){s.stenoMode&&s.$stenoFrame&&(s.stenoFrameContents=s.$stenoFrame.contents()),s.getMediaTimes().then((function(t){for(s.duration=t.duration,s.elapsed=t.elapsed,s.setFullscreen(!1),void 0===s.volume&&(s.volume=s.defaultVolume),s.volume&&s.setVolume(s.volume),s.transcriptType&&(s.addTranscriptAreaEvents(),s.updateTranscript()),s.captions.length&&s.initDefaultCaption(),s.setMediaAttributes(),s.addControls(),s.addEventListeners(),a=s.getPreferencesGroups(),n=0;n<a.length;n++)s.injectPrefsForm(a[n]);s.setupPopups(),s.updateCaption(),s.injectVTS(),s.chaptersDivLocation&&s.populateChaptersDiv(),s.showSearchResults(),"html5"===s.player&&(s.loadingMedia||(s.$media[0].load(),s.loadingMedia=!0)),setTimeout((function(){s.refreshControls("init"),e.resolve()}),100)}))}))}))}))}))}))}),(function(){s.provideFallback()})),i;console.log("Can't create player; no appropriate player type detected.")},AblePlayer.prototype.initPlayer=function(){var e,i=this;"html5"===this.player?e=this.initHtml5Player():"youtube"===this.player?e=this.initYouTubePlayer():"vimeo"===this.player&&(e=this.initVimeoPlayer());var s=new t.Deferred,a=s.promise();return e.done((function(){i.useFixedSeekInterval?(i.seekInterval||(i.seekInterval=i.defaultSeekInterval),i.seekIntervalCalculated=!0):i.setSeekInterval(),s.resolve()})).fail((function(){s.reject()})),a},AblePlayer.prototype.initStenoFrame=function(){var e,i;return i=(e=new t.Deferred).promise(),this.stenoMode&&this.$stenoFrame?(this.$stenoFrame[0].contentWindow,"complete"==document.readyState?e.resolve():this.$stenoFrame.on("load",(function(){e.resolve()}))):e.resolve(),i},AblePlayer.prototype.setSeekInterval=function(){var t;this.seekInterval=this.defaultSeekInterval,void 0===(t=this.useChapterTimes?this.chapterDuration:this.duration)||t<1?this.seekIntervalCalculated=!1:(this.seekInterval=t<=20?5:t<=30?6:t<=40?8:t<=100?10:t/10,this.seekIntervalCalculated=!0)},AblePlayer.prototype.initDefaultCaption=function(){var t,e;if((t=this.captions).length>0){for(e=0;e<t.length;e++)!0===t[e].def&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);if(void 0===this.captionLang)for(e=0;e<t.length;e++)t[e].language===this.lang&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);void 0===this.captionLang&&(this.captionLang=t[0].language,this.selectedCaptions=t[0]),void 0!==this.captionLang&&(this.$transcriptLanguageSelect&&this.$transcriptLanguageSelect.find("option[lang="+this.captionLang+"]").prop("selected",!0),this.syncTrackLanguages("init",this.captionLang)),"vimeo"===this.player&&(this.usingVimeoCaptions&&1==this.prefCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then((function(t){})).catch((function(t){t.name})):this.vimeoPlayer.disableTextTrack().then((function(){})).catch((function(t){})))}},AblePlayer.prototype.initHtml5Player=function(){var e=new t.Deferred,i=e.promise();return e.resolve(),i},AblePlayer.prototype.setMediaAttributes=function(){this.$media.attr("tabindex",-1);var t=this.$media.get(0).textTracks;if(t)for(var e=0;e<t.length;)t[e].mode="disabled",e+=1},AblePlayer.prototype.getPlayer=function(){return this.testFallback?null:this.youTubeId?"video"!==this.mediaType?null:"youtube":this.vimeoId?"video"!==this.mediaType?null:"vimeo":this.media.canPlayType?"html5":null}}(jQuery),function(t){AblePlayer.prototype.setCookie=function(t){Cookies.set("Able-Player",JSON.stringify(t),{expires:90,sameSite:"strict"})},AblePlayer.prototype.getCookie=function(){var t,e={preferences:{},sign:{},transcript:{},voices:[]};try{t=JSON.parse(Cookies.get("Able-Player"))}catch(i){this.setCookie(e),t=e}return t||e},AblePlayer.prototype.updateCookie=function(t){var e,i,s,a,n,r,o,l;if(e=this.getCookie(),"transcript"===t||"sign"===t)"transcript"===t?(s=(i=this.$transcriptArea).position(),void 0===e.transcript&&(e.transcript={}),e.transcript.position=i.css("position"),e.transcript.zindex=i.css("z-index"),e.transcript.top=s.top,e.transcript.left=s.left,e.transcript.width=i.width(),e.transcript.height=i.height()):"sign"===t&&(s=(i=this.$signWindow).position(),void 0===e.sign&&(e.sign={}),e.sign.position=i.css("position"),e.sign.zindex=i.css("z-index"),e.sign.top=s.top,e.sign.left=s.left,e.sign.width=i.width(),e.sign.height=i.height());else if("voice"===t){void 0===e.voices&&(e.voices=[]),o=!1;for(var h=0;h<e.voices.length;h++)e.voices[h].lang===this.prefDescVoiceLang&&(o=!0,e.voices[h].name=this.prefDescVoice);o||(l={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(l))}else for(a=this.getAvailablePreferences(),n=0;n<a.length;n++)(r=a[n].name)==t&&(e.preferences[r]=this[r]);this.setCookie(e)},AblePlayer.prototype.getPreferencesGroups=function(){return this.usingYouTubeCaptions?["captions","descriptions","keyboard"]:this.usingVimeoCaptions?["descriptions","keyboard"]:["captions","descriptions","keyboard","transcript"]},AblePlayer.prototype.getAvailablePreferences=function(){var t=[];return t.push({name:"prefAltKey",label:this.tt.prefAltKey,group:"keyboard",default:1}),t.push({name:"prefCtrlKey",label:this.tt.prefCtrlKey,group:"keyboard",default:1}),t.push({name:"prefShiftKey",label:this.tt.prefShiftKey,group:"keyboard",default:0}),t.push({name:"prefTranscript",label:null,group:"transcript",default:0}),t.push({name:"prefHighlight",label:this.tt.prefHighlight,group:"transcript",default:1}),t.push({name:"prefAutoScrollTranscript",label:null,group:"transcript",default:1}),t.push({name:"prefTabbable",label:this.tt.prefTabbable,group:"transcript",default:0}),t.push({name:"prefCaptions",label:null,group:"captions",default:this.defaultStateCaptions}),this.usingYouTubeCaptions||("video"===this.mediaType&&t.push({name:"prefCaptionsPosition",label:this.tt.prefCaptionsPosition,group:"captions",default:this.defaultCaptionsPosition}),t.push({name:"prefCaptionsFont",label:this.tt.prefCaptionsFont,group:"captions",default:"sans-serif"})),t.push({name:"prefCaptionsSize",label:this.tt.prefCaptionsSize,group:"captions",default:"100%"}),this.usingYouTubeCaptions||(t.push({name:"prefCaptionsColor",label:this.tt.prefCaptionsColor,group:"captions",default:"white"}),t.push({name:"prefCaptionsBGColor",label:this.tt.prefCaptionsBGColor,group:"captions",default:"black"}),t.push({name:"prefCaptionsOpacity",label:this.tt.prefCaptionsOpacity,group:"captions",default:"100%"})),"video"===this.mediaType&&(t.push({name:"prefDesc",label:null,group:"descriptions",default:this.defaultStateDescriptions}),t.push({name:"prefDescMethod",label:null,group:"descriptions",default:"video"}),t.push({name:"prefDescVoice",label:this.tt.prefDescVoice,group:"descriptions",default:null}),t.push({name:"prefDescPitch",label:this.tt.prefDescPitch,group:"descriptions",default:1}),t.push({name:"prefDescRate",label:this.tt.prefDescRate,group:"descriptions",default:1}),t.push({name:"prefDescVolume",label:this.tt.volume,group:"descriptions",default:1}),t.push({name:"prefDescPause",label:this.tt.prefDescPause,group:"descriptions",default:this.defaultDescPause}),t.push({name:"prefDescVisible",label:this.tt.prefDescVisible,group:"descriptions",default:0})),t.push({name:"prefSign",label:null,group:null,default:0}),t},AblePlayer.prototype.loadCurrentPreferences=function(){for(var t=this.getAvailablePreferences(),e=this.getCookie(),i=0;i<t.length;i++){var s=t[i].name,a=t[i].default;void 0!==e.preferences[s]?this[s]=e.preferences[s]:(e.preferences[s]=a,this[s]=a)}void 0!==e.voices&&(this.prefVoices=e.voices),this.setCookie(e)},AblePlayer.prototype.injectPrefsForm=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P,k,T,C,w,$,D,x,A,S,I,N,B,M,F,V,L,O,z,E,R,W;i=this,s=this.getAvailablePreferences();var q="able-prefs-form-"+e;if((a=t("<div>",{class:"able-prefs-form "})).addClass(q),"captions"==e)n=this.tt.prefTitleCaptions;else if("descriptions"==e){n=this.tt.prefTitleDescriptions;var H=t("<p>",{text:this.tt.prefIntroDescription1}),j=t("<ul>"),K=t("<li>",{text:this.tt.prefDescFormatOption1}),Y=t("<li>",{text:this.tt.prefDescFormatOption2});j.append(K,Y),this.hasOpenDesc&&this.hasClosedDesc?(N=this.tt.prefIntroDescription2+" ",N+="<strong>"+this.tt.prefDescFormatOption1b+"</strong>",N+=" <em>"+this.tt.and+"</em> <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):this.hasOpenDesc?(N=this.tt.prefIntroDescription2,N+=" <strong>"+this.tt.prefDescFormatOption1b+"</strong>."):this.hasClosedDesc?(N=this.tt.prefIntroDescription2,N+=" <strong>"+this.tt.prefDescFormatOption2b+"</strong>."):N=this.tt.prefIntroDescriptionNone,o=t("<p>",{html:N}),l=this.tt.prefIntroDescription3,(this.hasOpenDesc||this.hasClosedDesc)&&(l+=" "+this.tt.prefIntroDescription4),h=t("<p>",{text:l}),a.append(H,j,o,h)}else"keyboard"==e?(n=this.tt.prefTitleKeyboard,r=this.tt.prefIntroKeyboard1,r+=" "+this.tt.prefIntroKeyboard2,r+=" "+this.tt.prefIntroKeyboard3,H=t("<p>",{text:r}),a.append(H)):"transcript"==e&&(n=this.tt.prefTitleTranscript);for(u=t("<div>").attr("role","group"),d="able-prefs-"+e,m=(f=this.mediaId+"-prefs-"+e)+"-legend",u.addClass(d).attr("id",f),"keyboard"===e?((g=t("<h2>"+this.tt.prefHeadingKeyboard1+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(g)):"descriptions"===e&&((g=t("<h2>"+this.tt.prefHeadingTextDescription+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(g)),p=0;p<s.length;p++)if(s[p].group==e&&s[p].label){if(b="able-"+(v=s[p].name),P=this.mediaId+"_"+v,y=t("<div>").addClass(b),"captions"===e){for(k=t('<label for="'+P+'"> '+s[p].label+"</label>"),T=t("<select>",{name:v,id:P}),"prefCaptions"!==v&&"prefCaptionsStyle"!==v&&T.change((function(){A=t(this).attr("name"),i.stylizeCaptions(i.$sampleCapsDiv,A)})),C=this.getCaptionsOptions(v),c=0;c<C.length;c++)"prefCaptionsPosition"===v?"overlay"===($=C[c])?x=this.tt.captionsPositionOverlay:"below"===$&&($=C[c],x=this.tt.captionsPositionBelow):"prefCaptionsFont"===v||"prefCaptionsColor"===v||"prefCaptionsBGColor"===v?($=C[c][0],x=C[c][1]):"prefCaptionsOpacity"===v?($=C[c],x=C[c],"0%"===$?x+=" ("+this.tt.transparent+")":"100%"===$&&(x+=" ("+this.tt.solid+")")):($=C[c],x=C[c]),w=t("<option>",{value:$,text:x}),this[v]===$&&w.prop("selected",!0),T.append(w);y.append(k,T)}else if("descriptions"===e){if(k=t('<label for="'+P+'"> '+s[p].label+"</label>"),"prefDescPause"===v||"prefDescVisible"===v)y.addClass("able-prefs-checkbox"),T=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&T.prop("checked",!0),y.append(T,k);else if(this.synth){if(y.addClass("able-prefs-select"),T=t("<select>",{name:v,id:P}),"prefDescVoice"===v&&this.descVoices){for(B=this.getPrefDescVoice(),c=0;c<this.descVoices.length;c++)$=this.descVoices[c].name,D=this.descVoices[c].lang.substring(0,2).toLowerCase(),x=$+" ("+this.descVoices[c].lang+")",w=t("<option>",{value:$,"data-lang":D,text:x}),B===$&&w.prop("selected",!0),T.append(w);this.$voiceSelectField=T}else if("prefDescPitch"==v?C=[0,.5,1,1.5,2]:"prefDescRate"==v?C=[.7,.8,.9,1,1.1,1.2,1.5,2,2.5,3]:"prefDescVolume"==v&&(C=[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]),void 0!==C)for(c=0;c<C.length;c++)$=C[c],x=this.makePrefsValueReadable(v,$),w=t("<option>",{value:$,text:x}),this[v]==$&&w.prop("selected",!0),T.append(w),y.append(k,T);T.on("change",(function(){i.announceDescriptionText("sample",i.currentSampleText)})),y.append(k,T)}}else k=t('<label for="'+P+'"> '+s[p].label+"</label>"),T=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&T.prop("checked",!0),"keyboard"===e&&T.on("change",(function(){"prefAltKey"===(A=t(this).attr("name"))?(S=".able-modkey-alt",I=i.tt.prefAltKey+" + "):"prefCtrlKey"===A?(S=".able-modkey-ctrl",I=i.tt.prefCtrlKey+" + "):"prefShiftKey"===A&&(S=".able-modkey-shift",I=i.tt.prefShiftKey+" + "),t(this).is(":checked")?t(S).text(I):t(S).text("")})),y.append(T,k);u.append(y)}if(a.append(u),"captions"===e)this.usingYouTubeCaptions||(this.$sampleCapsDiv=t("<div>",{class:"able-captions-sample"}).text(this.tt.sampleCaptionText),a.append(this.$sampleCapsDiv),this.stylizeCaptions(this.$sampleCapsDiv));else if("descriptions"===e)this.synth&&(this.$sampleDescDiv=t("<div>",{class:"able-desc-sample"}).text(this.tt.sampleDescriptionText),a.append(this.$sampleDescDiv),this.currentSampleText=this.tt.sampleDescriptionText);else if("keyboard"===e){for(M=t("<h2>",{text:this.tt.prefHeadingKeyboard2}),F=t("<ul>"),V=[],L=[],p=0;p<this.controls.length;p++)"play"===this.controls[p]?(V.push(this.tt.play+"/"+this.tt.pause),L.push("p</span> <em>"+this.tt.or+'</em> <span class="able-help-modifiers"> '+this.tt.spacebar)):"restart"===this.controls[p]?(V.push(this.tt.restart),L.push("s")):"previous"===this.controls[p]?(V.push(this.tt.prevTrack),L.push("b")):"next"===this.controls[p]?(V.push(this.tt.nextTrack),L.push("n")):"rewind"===this.controls[p]?(V.push(this.tt.rewind),L.push("r")):"forward"===this.controls[p]?(V.push(this.tt.forward),L.push("f")):"volume"===this.controls[p]?(V.push(this.tt.volume),L.push("v</span> <em>"+this.tt.or+'</em> <span class="able-modkey">1-9'),V.push(this.tt.mute+"/"+this.tt.unmute),L.push("m")):"captions"===this.controls[p]?(this.captions.length>1?V.push(this.tt.captions):this.captionsOn?V.push(this.tt.hideCaptions):V.push(this.tt.showCaptions),L.push("c")):"descriptions"===this.controls[p]?(this.descOn?V.push(this.tt.turnOffDescriptions):V.push(this.tt.turnOnDescriptions),L.push("d")):"prefs"===this.controls[p]?(V.push(this.tt.preferences),L.push("e")):"help"===this.controls[p]&&(V.push(this.tt.help),L.push("h"));for(p=0;p<L.length;p++)O='<span class="able-modkey-alt">',1===this.prefAltKey&&(O+=this.tt.prefAltKey+" + "),O+="</span>",O+='<span class="able-modkey-ctrl">',1===this.prefCtrlKey&&(O+=this.tt.prefCtrlKey+" + "),O+="</span>",O+='<span class="able-modkey-shift">',1===this.prefShiftKey&&(O+=this.tt.prefShiftKey+" + "),O+="</span>",O+='<span class="able-modkey">'+L[p]+"</span>",O+=" = "+V[p],z=t("<li>",{html:O}),F.append(z);O='<span class="able-modkey">'+this.tt.escapeKey+"</span>",O+=" = "+this.tt.escapeKeyFunction,z=t("<li>",{html:O}),F.append(z),a.append(M,F)}t("body").append(a),E=new AccessibleDialog(a,this.$prefsButton,"dialog",!0,n,H,i.tt.closeButtonLabel,"32em"),a.append("<hr>"),R=t('<button class="modal-button">'+this.tt.save+"</button>"),W=t('<button class="modal-button">'+this.tt.cancel+"</button>"),R.click((function(){E.hide(),i.savePrefsFromForm()})),W.click((function(){E.hide(),i.resetPrefsForm()})),a.append(R),a.append(W),"captions"!==e&&"transcript"!==e||u.attr("aria-labelledby",E.titleH1.attr("id")),"captions"===e?this.captionPrefsDialog=E:"descriptions"===e?this.descPrefsDialog=E:"keyboard"===e?this.keyboardPrefsDialog=E:"transcript"===e&&(this.transcriptPrefsDialog=E),t("div.able-prefs-form button.modalCloseButton").click((function(){i.resetPrefsForm()})),t("div.able-prefs-form").keydown((function(t){27===t.which&&i.resetPrefsForm()}))},AblePlayer.prototype.getPrefDescVoice=function(){var t,e,i;if(t=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,(e=this.getCookie()).voices)for(i=0;i<e.voices.length;i++)if(e.voices[i].lang===t)return e.voices[i].name;return null},AblePlayer.prototype.rebuildDescPrefsForm=function(){var e,i,s,a;for(this.$voiceSelectField=t("#"+this.mediaId+"_prefDescVoice"),this.$voiceSelectField.empty(),e=0;e<this.descVoices.length;e++)s=(i=this.descVoices[e].name)+" ("+this.descVoices[e].lang+")",a=t("<option>",{value:i,"data-lang":this.descVoices[e].lang.substring(0,2).toLowerCase(),text:s}),this.prefDescVoice==i&&a.prop("selected",!0),this.$voiceSelectField.append(a)},AblePlayer.prototype.makePrefsValueReadable=function(t,e){if("prefDescPitch"===t){if(0===e)return this.tt.prefDescPitch1;if(.5===e)return this.tt.prefDescPitch2;if(1===e)return this.tt.prefDescPitch3;if(1.5===e)return this.tt.prefDescPitch4;if(2===e)return this.tt.prefDescPitch5}else if("prefDescRate"===t){if(.7===e)return 1;if(.8===e)return 2;if(.9===e)return 3;if(1===e)return 4;if(1.1===e)return 5;if(1.2===e)return 6;if(1.5===e)return 7;if(2===e)return 8;if(2.5===e)return 9;if(3===e)return 10}else if("prefDescVolume"===t)return 10e;return e},AblePlayer.prototype.resetPrefsForm=function(){var e,i,s,a;for(e=this.getCookie(),i=this.getAvailablePreferences(),s=0;s<i.length;s++)a=i[s].name,this.mediaId+"_"+a,-1!==a.indexOf("Captions")&&"prefCaptions"!==a?t('select[name="'+a+'"]').val(e.preferences[a]):1===this[a]?t('input[name="'+a+'"]').prop("checked",!0):t('input[name="'+a+'"]').prop("checked",!1);this.stylizeCaptions(this.$sampleCapsDiv)},AblePlayer.prototype.savePrefsFromForm=function(){var e,i,s,a,n,r,o,l,h,p,c,u;o=0,h=0,p=!1,e=this.getCookie(),i=this.getAvailablePreferences();for(var d=0;d<i.length;d++)if(i[d].label)if(s=i[d].name,a=this.mediaId+"_"+s,"prefDescVoice"===s){void 0===e.voices&&(e.voices=[]),n=this.mediaId+"_prefDescVoice",this.prefDescVoice=t("select#"+n).find(":selected").val(),this.prefDescVoiceLang=t("select#"+n).find(":selected").attr("data-lang"),l=!1;for(var f=0;f<e.voices.length;f++)e.voices[f].lang===this.prefDescVoiceLang&&(l=!0,e.voices[f].name=this.prefDescVoice);l||(r={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(r)),o++}else"prefDescMethod"==s?(this.prefDescMethod="video",this.prefDescMethod!==e.preferences.prefDescMethod&&(e.preferences.prefDescMethod=this.prefDescMethod,o++)):-1!==s.indexOf("Captions")&&"prefCaptions"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++,h++),"prefCaptionsSize"===s&&(p=!0,c=u)):-1!==s.indexOf("Desc")&&"prefDescPause"!==s&&"prefDescVisible"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++)):t('input[id="'+a+'"]').is(":checked")?(e.preferences[s]=1,1===this[s]||(this[s]=1,o++)):(e.preferences[s]=0,1===this[s]&&(this[s]=0,o++));if(o>0?(this.setCookie(e),this.showAlert(this.tt.prefSuccess)):this.showAlert(this.tt.prefNoChange),"youtube"===this.player&&void 0!==this.usingYouTubeCaptions&&this.usingYouTubeCaptions&&p&&this.youTubePlayer.setOption("captions","fontSize",this.translatePrefs("size",c,"youtube")),AblePlayerInstances.length>1)for(d=0;d<AblePlayerInstances.length;d++)AblePlayerInstances[d].updatePrefs(),AblePlayerInstances[d].geteferences(),AblePlayerInstances[d].resetPrefsForm(),h>0&&(AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$captionsDiv),void 0!==AblePlayerInstances[d].$descDiv&&AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$descDiv));else this.updatePrefs(),h>0&&(this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv))},AblePlayer.prototype.updatePrefs=function(){this.$transcriptDiv&&(1===this.prefTabbable?this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"):this.$transcriptDiv.find("span.able-transcript-seekpoint").removeAttr("tabindex"),0===this.prefHighlight&&this.$transcriptDiv.find("span").removeClass("able-highlight")),this.updateCaption(),this.initDescription()},AblePlayer.prototype.usingModifierKeys=function(t){return!(1===this.prefAltKey&&!t.altKey)&&(!(1===this.prefCtrlKey&&!t.ctrlKey)&&!(1===this.prefShiftKey&&!t.shiftKey))}}(jQuery),function(t){function actList(t,e){for(var i=[],s=0;s<e.length;s++)i.push(act(t,e[s]));return i}function act(t,e){var i=e(t);if(null!==t.error)throw t.error;return i}function updatePosition(t,e){for(var i=0;i<e.length;i++)"\n"===e[i]?(t.column=1,t.line+=1):t.column+=1}function cut(t,e){var i=t.text.substring(0,e);return updatePosition(t,i),t.text=t.text.substring(e),i}function cutLine(t,e){var i,s=t.text.indexOf("\n");return-1===s?(updatePosition(t,i=t.text),t.text=""):(i=t.text.substring(0,s),updatePosition(t,i+"\n"),t.text=t.text.substring(s+1)),i}function peekLine(t){var e=t.text.indexOf("\n");return-1===e?t.text:t.text.substring(0,e)}function parseFileBody(t){actList(t,[eatOptionalBOM,eatSignature]);var e=t.text[0];" "===e||"\t"===e||"\n"===e?actList(t,[eatUntilEOLInclusive,parseMetadataHeaders,eatAtLeast1EmptyLines,parseCuesAndComments]):t.error="WEBVTT signature not followed by whitespace."}function parseMetadataHeaders(t){for(;;){var e=peekLine(t);if(-1!==e.indexOf("--\x3e"))return;if(0===e.length)return;var i=act(t,getMetadataKeyValue);t.metadata[i[0]]=i[1],act(t,eatUntilEOLInclusive)}}function nextSpaceOrNewline(t){var e=[],i=t.indexOf(" ");i>=0&&e.push(i);var s=t.indexOf("\t");s>=0&&e.push(s);var a=t.indexOf("\n");return a>=0&&e.push(a),Math.min.apply(null,e)}function getMetadataKeyValue(t){var e=t.text.indexOf("\n"),i=cut(t,e),s=i.indexOf(":");return-1===s?void(t.error="Missing colon."):[i.substring(0,s),i.substring(s+1)]}function getSettingsKeyValue(t){var e=cut(t,nextSpaceOrNewline(t.text)),i=e.indexOf(":");return-1===i?void(t.error="Missing colon."):[e.substring(0,i),e.substring(i+1)]}function parseCuesAndComments(e){for(;;){var i=peekLine(e);if(0!==i.indexOf("NOTE")||4!==i.length&&" "!==i[4]&&"\t"!==i[4])if(0===t.trim(i).length&&e.text.length>0)act(e,eatEmptyLines);else{if(!(t.trim(i).length>0))return;act(e,parseCue)}else actList(e,[eatComment,eatEmptyLines])}}function parseCue(t){var e,i=peekLine(t);if(-1===i.indexOf("--\x3e")&&(e=cutLine(t),-1===(i=peekLine(t)).indexOf("--\x3e")))return"Invalid WebVTT file: "+t.src+"\n","Line: "+t.line+", ","Column: "+t.column+"\n",void(console.warn||console.log);var s=actList(t,[getTiming,eatAtLeast1SpacesOrTabs,eatArrow,eatAtLeast1SpacesOrTabs,getTiming]),a=s[0],n=s[4];if(a>=n)t.error="Start time is not sooner than end time.";else{act(t,eatSpacesOrTabs);var r=act(t,getCueSettings);cut(t,1);var o=act(t,getCuePayload);void 0===e&&(e=t.cues.length+1),t.cues.push({id:e,start:a,end:n,settings:r,components:o})}}function getCueSettings(t){for(var e={};t.text.length>0&&"\n"!==t.text[0];){var i=act(t,getSettingsKeyValue);e[i[0]]=i[1],act(t,eatSpacesOrTabs)}return e}function getCuePayload(e){for(var i={type:"internal",tagName:"",value:"",classes:[],annotation:"",parent:null,children:[],language:""},s=i,a=[];e.text.length>0;){var n=peekLine(e);if(-1!==n.indexOf("--\x3e")||/^\s+$/.test(n))break;if(e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]){cut(e,2);break}var r=getCueToken(e);if("string"===r.type)s.children.push(r);else if("startTag"===r.type)r.type=r.tagName,r.parent=s,-1!==t.inArray(r.tagName,["i","b","u","ruby"])||"rt"===r.tagName&&"ruby"===s.tagName?(a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"c"===r.tagName||"v"===r.tagName?(r.value=r.annotation,a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"lang"===r.tagName&&(a.push(r.annotation),a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r);else if("endTag"===r.type)r.tagName===s.type&&-1!==t.inArray(r.tagName,["c","i","b","u","ruby","rt","v"])?s=s.parent:"lang"===r.tagName&&"lang"===s.type?(s=s.parent,a.pop()):"ruby"===r.tagName&&"rt"===s.type&&(s=s.parent.parent);else if("timestampTag"===r.type){var o={text:r.value,error:null,metadata:{},cues:[],line:1,column:1};try{var l=act(o,getTiming);0===o.text.length&&(r.value=l,s.push(r))}catch(t){}}}return i}function getCueToken(e){for(var i="data",s=[],a="",n={type:"",tagName:"",value:"",classes:[],annotation:"",children:[]};;){var r;if(r=e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]?"":e.text.length>0?e.text[0]:"","data"===i)if("&"===r)a="&",i="escape";else if("<"===r){if(0!==s.length)return n.type="string",n.value=s.join(""),n;i="tag"}else{if(""===r)return{type:"string",value:s.join("")};s.push(r)}else if("escape"===i)if("&"===r)s.push(a),a="&";else if(r.match(/[0-9a-z]/))a+=r;else if(";"===r)"&"===a?s.push("&"):"<"===a?s.push("<"):">"===a?s.push(">"):"&lrm"===a?s.push("‎"):"&rlm"===a?s.push("‏"):" "===a?s.push(" "):(s.push(a),s.push(";")),i="data";else{if("<"===r||""===r)return s.push(a),n.type="string",n.value=s.join(""),n;if("\t"===r||"\n"===r||"\f"===r||" "===r)return s.push(a),n.type="string",n.value=s.join(""),n;s.push(a),i="data"}else if("tag"===i)if("\t"===r||"\n"===r||"\f"===r||" "===r)i="startTagAnnotation";else if("."===r)i="startTagClass";else if("/"===r)i="endTag";else if(r.match("[0-9]"))i="timestampTag",s.push(r);else{if(">"===r){cut(e,1);break}if(""===r)return n.tagName="",n.type="startTag",n;s.push(r),i="startTag"}else if("startTag"===i)if("\t"===r||"\f"===r||" "===r)i="startTagAnnotation";else if("\n"===r)a=r,i="startTagAnnotation";else if("."===r)i="startTagClass";else{if(">"===r)return cut(e,1),n.tagName=s.join(""),n.type="startTag",n;if(""===r)return n.tagName=s.join(""),n.type="startTag",n;s.push(r)}else if("startTagClass"===i)if("\t"===r||"\f"===r||" "===r)n.classes.push(a),a="",i="startTagAnnotation";else if("\n"===r)n.classes.push(a),a=r,i="startTagAnnotation";else if("."===r)n.classes.push(a),a="";else{if(">"===r)return cut(e,1),n.classes.push(a),n.type="startTag",n.tagName=s.join(""),n;if(""===r)return n.classes.push(a),n.type="startTag",n.tagName=s.join(""),n;a+="c"}else if("startTagAnnotation"===i){if(">"===r)return cut(e,1),a=t.trim(a).replace(/ +/," "),n.type="startTag",n.tagName=s.join(""),n.annotation=a,n;if(""===r)return a=t.trim(a).replace(/ +/," "),n.type="startTag",n.tagName=s.join(""),n.annotation=a,n;a+=r}else if("endTag"===i){if(">"===r)return cut(e,1),n.type="endTag",n.tagName=s.join(""),n;if(""===r)return n.type="endTag",n.tagName=s.join(""),n;s.push(r)}else{if("timestampTag"!==i)throw"Unknown tokenState "+i;if(">"===r)return cut(e,1),n.type="timestampTag",n.name=s.join(""),n;if(""===r)return n.type="timestampTag",n.name=s.join(""),n;s.push(r)}cut(e,1)}}function eatComment(e){if(-1===cutLine(e).indexOf("--\x3e"))for(;;){var i=peekLine(e);if(0===t.trim(i).length)return;if(-1!==i.indexOf("--\x3e"))return void(e.error="Invalid syntax: --\x3e in comment.");cutLine(e)}else e.error="Invalid syntax: --\x3e in NOTE line."}function eatOptionalBOM(t){"\ufeff"===t.text[0]&&cut(t,1)}function eatSignature(t){"WEBVTT"===t.text.substring(0,6)?cut(t,6):t.error="Invalid signature."}function eatArrow(t){t.text.length<3||"--\x3e"!==t.text.substring(0,3)?t.error="Missing --\x3e":cut(t,3)}function eatSpacesOrTabs(t){for(;"\t"===t.text[0]||" "===t.text[0];)cut(t,1)}function eatAtLeast1SpacesOrTabs(t){for(var e=0;"\t"===t.text[0]||" "===t.text[0];)cut(t,1),e+=1;0===e&&(t.error="Missing space.")}function eatUntilEOLInclusive(t){var e=t.text.indexOf("\n");-1===e?t.error="Missing EOL.":cut(t,e+1)}function eatEmptyLines(e){for(;e.text.length>0;){var i=peekLine(e);if(0!==t.trim(i).length)break;cutLine(e)}}function eatAtLeast1EmptyLines(e){for(var i=0;e.text.length>0;){var s=peekLine(e);if(0!==t.trim(s).length)break;cutLine(e),i+=1}0===i&&(e.error="Missing empty line.")}function getTiming(t){var e=nextSpaceOrNewline(t.text);if(-1!==e){var i=cut(t,e),s=/((\d\d):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(i);if(s){var a=0,n=s[2],r=s[4];if(r){if(parseInt(r,10)>59)return void(t.error="Invalid minute range");n&&(a+=3600parseInt(n,10)),a+=60parseInt(r,10);var o=s[5];if(parseInt(o,10)>59)return void(t.error="Invalid second range");a+=parseInt(o,10),a+=parseInt(s[6],10)/1e3}else a+=parseInt(s[7],10),a+=parseInt(s[8],10)/1e3;return a}t.error="Unable to parse timestamp"}else t.error("Missing timing.")}AblePlayer.prototype.parseWebVTT=function(t,e){var i={src:t,text:e=e.replace(/(\r\n|\n|\r)/g,"\n"),error:null,metadata:{},cues:[],line:1,column:1};try{act(i,parseFileBody)}catch(t){console.warn||console.log}return i}}(jQuery),function(t){AblePlayer.prototype.injectPlayerCode=function(){var e;this.$mediaContainer=this.$media.wrap('<div class="able-media-container"></div>').parent(),this.$ableDiv=this.$mediaContainer.wrap('<div class="able"></div>').parent(),this.$ableWrapper=this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(),this.$ableWrapper.addClass("able-skin-"+this.skin),this.$ableWrapper.css({width:this.playerWidth+"px"}),"video"===this.mediaType&&("image"==this.iconType||"youtube"===this.player&&!this.hasPoster||this.injectBigPlayButton()),e=t("<div>"),"video"===this.mediaType?e.addClass("able-vidcap-container"):"audio"===this.mediaType&&(e.addClass("able-audcap-container"),e.addClass("captions-off")),this.injectPlayerControlArea(),this.$captionsContainer=this.$mediaContainer.wrap(e).parent(),this.injectAlert(),this.injectPlaylist(),this.injectOffscreenHeading()},AblePlayer.prototype.injectOffscreenHeading=function(){var e;"0"==this.playerHeadingLevel||(void 0===this.playerHeadingLevel&&(this.playerHeadingLevel=this.getNextHeadingLevel(this.$ableDiv)),e="h"+this.playerHeadingLevel.toString(),this.$headingDiv=t("<"+e+">"),this.$ableDiv.prepend(this.$headingDiv),this.$headingDiv.addClass("able-offscreen"),this.$headingDiv.text(this.tt.playerHeading))},AblePlayer.prototype.injectBigPlayButton=function(){var e,i,s,a;e=this,this.$bigPlayButton=t("<button>",{class:"able-big-play-button","aria-hidden":!1,"aria-label":this.tt.play,tabindex:0}),"svg"==this.iconType?(i=this.getSvgData("play"),s=t("<svg>",{focusable:"false","aria-hidden":"true",viewBox:i[0]}),a=t("<path>",{d:i[1]}),s.append(a),this.$bigPlayButton.html(s),this.$bigPlayButton.html(this.$bigPlayButton.html())):(this.$bigPlayIcon=t("<span>",{class:"icon-play"}),this.$bigPlayButton.append(this.$bigPlayIcon)),this.$bigPlayButton.click((function(t){t.preventDefault(),e.handlePlay()})),this.$mediaContainer.append(this.$bigPlayButton)},AblePlayer.prototype.injectPlayerControlArea=function(){this.$playerDiv=t("<div>",{class:"able-player",role:"region","aria-label":this.mediaType+" player"}),this.$playerDiv.addClass("able-"+this.mediaType),this.hasPlaylist&&this.showNowPlaying&&(this.$nowPlayingDiv=t("<div>",{class:"able-now-playing","aria-live":"assertive","aria-atomic":"true"})),this.$controllerDiv=t("<div>",{class:"able-controller"}),this.$controllerDiv.addClass("able-"+this.iconColor+"-controls"),this.$statusBarDiv=t("<div>",{class:"able-status-bar"}),this.$timer=t("<span>",{class:"able-timer"}),this.$elapsedTimeContainer=t("<span>",{class:"able-elapsedTime",text:"0:00"}),this.$durationContainer=t("<span>",{class:"able-duration"}),this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer),this.$speed=t("<span>",{class:"able-speed","aria-live":"assertive"}).text(this.tt.speed+": 1x"),this.$status=t("<span>",{class:"able-status","aria-live":"polite"}),this.$statusBarDiv.append(this.$timer,this.$speed,this.$status),this.showNowPlaying?this.$playerDiv.append(this.$nowPlayingDiv,this.$controllerDiv,this.$statusBarDiv):this.$playerDiv.append(this.$controllerDiv,this.$statusBarDiv),"video"===this.mediaType?this.$ableDiv.append(this.$playerDiv):this.$ableDiv.prepend(this.$playerDiv)},AblePlayer.prototype.injectTextDescriptionArea=function(){this.$descDiv=t("<div>",{class:"able-descriptions"}),this.$descDiv.attr({"aria-live":"assertive","aria-atomic":"true"}),this.$descDiv.hide(),this.$ableDiv.append(this.$descDiv)},AblePlayer.prototype.getDefaultWidth=function(t){return"transcript"===t?450:"sign"===t?400:void 0},AblePlayer.prototype.positionDraggableWindow=function(e,i){var s,a,n,r;s=this.getCookie(),"transcript"===e?(n=this.$transcriptArea,void 0!==s.transcript&&(a=s.transcript)):"sign"===e&&(n=this.$signWindow,void 0!==s.transcript&&(a=s.sign)),void 0===a||t.isEmptyObject(a)?(r=this.getOptimumPosition(e,i),void 0===i&&(i=this.getDefaultWidth(e)),n.css({position:r[0],width:i,"z-index":r[3]}),"absolute"===r[0]&&n.css({top:r[1]+"px",left:r[2]+"px"})):(n.css({position:a.position,width:a.width,"z-index":a.zindex}),"absolute"===a.position&&n.css({top:a.top,left:a.left}),this.updateZIndex(e))},AblePlayer.prototype.getOptimumPosition=function(e,i){var s,a,n,r,o,l;return void 0===i&&(i=this.getDefaultWidth(e)),s=[],a=this.$ableDiv.width(),this.$ableDiv.height(),(n=this.$ableDiv.offset()).top,r=n.left,o=t(window).width(),l=0,"transcript"===e?void 0!==this.$signWindow&&this.$signWindow.is(":visible")&&(l=this.$signWindow.width()+5):"sign"===e&&void 0!==this.$transcriptArea&&this.$transcriptArea.is(":visible")&&(l=this.$transcriptArea.width()+5),i<o-(r+a+5+l)?(s[0]="absolute",s[1]=0,s[2]=a+l+5):i+5<r?(s[0]="absolute",s[1]=0,s[2]=r-i-5):s[0]="relative",s},AblePlayer.prototype.injectAlert=function(){var e;this.$alertBox=t('<div role="alert"></div>'),this.$alertBox.addClass("able-alert"),this.$alertBox.hide(),this.$alertBox.appendTo(this.$ableDiv),e="audio"==this.mediaType?"-10":"10",this.$alertBox.css({top:e+"px"}),this.$srAlertBox=t('<div role="alert"></div>'),this.$srAlertBox.addClass("able-screenreader-alert"),this.$srAlertBox.appendTo(this.$ableDiv)},AblePlayer.prototype.injectPlaylist=function(){if(!0===this.playlistEmbed){var t=this.$playlistDom.clone();t.insertBefore(this.$statusBarDiv),this.$playlist=t.find("li")}},AblePlayer.prototype.createPopup=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,f;if(s=this,a=t("<ul>",{id:this.mediaId+"-"+e+"-menu",class:"able-popup",role:"menu"}).hide(),"captions"===e&&a.addClass("able-popup-captions"),"prefs"===e)if(this.prefCats.length>1){for(n=0;n<this.prefCats.length;n++)r=t("<li></li>",{role:"menuitem",tabindex:"-1"}),"captions"===(o=this.prefCats[n])?r.text(this.tt.prefMenuCaptions):"descriptions"===o?r.text(this.tt.prefMenuDescriptions):"keyboard"===o?r.text(this.tt.prefMenuKeyboard):"transcript"===o&&r.text(this.tt.prefMenuTranscript),r.on("click",(function(){c=t(this).text(),s.showingPrefsDialog=!0,s.setFullscreen(!1),c===s.tt.prefMenuCaptions?s.captionPrefsDialog.show():c===s.tt.prefMenuDescriptions?s.descPrefsDialog.show():c===s.tt.prefMenuKeyboard?s.keyboardPrefsDialog.show():c===s.tt.prefMenuTranscript&&s.transcriptPrefsDialog.show(),s.closePopups(),s.showingPrefsDialog=!1})),a.append(r);this.$prefsButton.attr("data-prefs-popup","menu")}else 1==this.prefCats.length&&this.$prefsButton.attr("data-prefs-popup",this.prefCats[0]);else if("captions"===e||"chapters"===e){for(l=!1,n=0;n<i.length;n++)h=i[n],("captions"!==e||"html5"!==this.player||void 0!==h.cues)&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1",lang:h.language}),h.def&&1==this.prefCaptions?(r.attr("aria-checked","true"),l=!0):r.attr("aria-checked","false"),"captions"==e?(r.text(h.label),r.on("click",this.getCaptionClickFunction(h))):"chapters"==e&&(r.text(this.flattenCueForCaption(h)+" - "+this.formatSecondsAsColonTime(h.start)),r.on("click",this.getChapterClickFunction(h.start))),a.append(r));"captions"===e&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1"}).text(this.tt.captionsOff),0===this.prefCaptions?(r.attr("aria-checked","true"),l=!0):r.attr("aria-checked","false"),r.on("click",this.getCaptionOffFunction()),a.append(r))}else if("transcript-window"===e||"sign-window"===e)for((p=[]).push({name:"move",label:this.tt.windowMove}),p.push({name:"resize",label:this.tt.windowResize}),p.push({name:"close",label:this.tt.windowClose}),n=0;n<p.length;n++)(r=t("<li></li>",{role:"menuitem",tabindex:"-1","data-choice":p[n].name})).text(p[n].label),r.on("click mousedown",(function(i){if(i.stopPropagation(),void 0!==i.button&&0!==i.button)return!1;s.windowMenuClickRegistered||s.finishingDrag||(s.windowMenuClickRegistered=!0,s.handleMenuChoice(e.substring(0,e.indexOf("-")),t(this).attr("data-choice"),i))})),a.append(r);return"captions"!==e||l?"chapters"===e&&(a.find('li:contains("'+this.defaultChapter+'")')?a.find('li:contains("'+this.defaultChapter+'")').attr("aria-checked","true").addClass("able-focus"):a.find("li").first().attr("aria-checked","true").addClass("able-focus")):a.find("li[lang="+this.captionLang+"]")?a.find("li[lang="+this.captionLang+"]").attr("aria-checked","true"):a.find("li").last().attr("aria-checked","true"),a.on("keydown",(function(e){t(this).attr("id").split("-")[1],(u=t(this).find("li:focus")).is(":first-child")?(d=t(this).find("li").last(),f=u.next()):u.is(":last-child")?(d=u.prev(),f=t(this).find("li").first()):(d=u.prev(),f=u.next()),9===e.which?e.shiftKey?(u.removeClass("able-focus"),d.focus().addClass("able-focus")):(u.removeClass("able-focus"),f.focus().addClass("able-focus")):40===e.which||39===e.which?(u.removeClass("able-focus"),f.focus().addClass("able-focus")):38==e.which||37===e.which?(u.removeClass("able-focus"),d.focus().addClass("able-focus")):32===e.which||13===e.which?u.click():27===e.which&&(u.removeClass("able-focus"),s.closePopups(),e.stopPropagation),e.preventDefault()})),this.$controllerDiv.append(a),a},AblePlayer.prototype.closePopups=function(){var t=this;this.chaptersPopup&&this.chaptersPopup.is(":visible")&&(this.chaptersPopup.hide(),this.$chaptersButton.attr("aria-expanded","false").focus()),this.captionsPopup&&this.captionsPopup.is(":visible")&&(this.captionsPopup.hide(),this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)),this.prefsPopup&&this.prefsPopup.is(":visible")&&!this.hidingPopup&&(this.hidingPopup=!0,this.prefsPopup.hide(),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$prefsButton.attr("aria-expanded","false"),this.showingPrefsDialog||this.waitThenFocus(t.$prefsButton),setTimeout((function(){t.hidingPopup=!1}),100)),this.$volumeSlider&&this.$volumeSlider.is(":visible")&&(this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus()),this.$transcriptPopup&&this.$transcriptPopup.is(":visible")&&(this.hidingPopup=!0,this.$transcriptPopup.hide(),this.$transcriptPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$transcriptPopupButton.attr("aria-expanded","false").focus(),setTimeout((function(){t.hidingPopup=!1}),100)),this.$signPopup&&this.$signPopup.is(":visible")&&(this.$signPopup.hide(),this.$signPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$signPopupButton.attr("aria-expanded","false").focus())},AblePlayer.prototype.setupPopups=function(t){var e,i;if(e=[],void 0===t&&e.push("prefs"),"captions"!==t&&void 0!==t||this.captions.length>0&&e.push("captions"),"chapters"!==t&&void 0!==t||this.chapters.length>0&&this.useChaptersButton&&e.push("chapters"),"transcript-window"===t&&"popup"===this.transcriptType&&e.push("transcript-window"),"sign-window"===t&&this.hasSignLanguage&&e.push("sign-window"),e.length>0){0;for(var s=0;s<e.length;s++){var a=e[s];if("prefs"==a)this.prefsPopup=this.createPopup("prefs");else if("captions"==a)void 0!==this.captionsPopup&&this.captionsPopup||(this.captionsPopup=this.createPopup("captions",this.captions));else if("chapters"==a)i=this.selectedChapters?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[],void 0!==this.chaptersPopup&&this.chaptersPopup||(this.chaptersPopup=this.createPopup("chapters",i));else{if("transcript-window"==a)return this.createPopup("transcript-window");if("sign-window"==a)return this.createPopup("sign-window")}}}},AblePlayer.prototype.provideFallback=function(){var e,i;if(!this.usingFallback){if(this.usingFallback=!0,this.testFallback||(this.testFallback=1),void 0===this.$media&&(this.$media=t(this.media)),this.$media.attr("id")?this.mediaId=this.$media.attr("id"):this.mediaId="media"+Math.floor(1e9Math.random()).toString(),this.hasFallback=!1,this.$media.children().length)for(e=0;e<this.$media.children().length&&!this.hasFallback;)"SOURCE"!==this.$media.children()[e].tagName&&"TRACK"!==this.$media.children()[e].tagName&&(this.hasFallback=!0),e++;if(this.hasFallback||(i=t("<p>").text("Media player unavailable."),this.$media.append(i)),this.$media.attr("width")&&this.$media.css("width",this.$media.attr("width")+"px"),this.$media.attr("height")&&this.$media.css("height",this.$media.attr("height")+"px"),this.$media.removeAttr("data-able-player"),this.$media.prop("controls",!0),2==this.testFallback){if(t(this.$media).replaceWith(t('<foobar id="foobar-'+this.mediaId+'">')),this.$newFallbackElement=t("#foobar-"+this.mediaId),this.$media.children().length)for(e=this.$media.children().length-1;e>=0;)this.$newFallbackElement.prepend(t(this.$media.children()[e])),e--;this.hasFallback||this.$newFallbackElement.append(i)}}},AblePlayer.prototype.calculateControlLayout=function(){var t,e,i;return(t=[])[0]=[],t[1]=[],"legacy"===this.skin&&(t[2]=[],t[3]=[]),t[0].push("play"),t[0].push("restart"),t[0].push("rewind"),t[0].push("forward"),"legacy"===this.skin&&t[1].push("seek"),this.hasPlaylist&&("legacy"===this.skin||"2020"==this.skin)&&(t[0].push("previous"),t[0].push("next")),this.isPlaybackRateSupported()?(e=!0,"legacy"===this.skin&&(t[2].push("slower"),t[2].push("faster"))):e=!1,i=0,this.hasCaptions&&(i++,"legacy"===this.skin?t[2].push("captions"):"2020"==this.skin&&t[1].push("captions")),this.hasSignLanguage&&(i++,"legacy"===this.skin?t[2].push("sign"):"2020"==this.skin&&t[1].push("sign")),"video"===this.mediaType&&(this.hasOpenDesc||this.hasClosedDesc)&&(i++,"legacy"===this.skin?t[2].push("descriptions"):"2020"==this.skin&&t[1].push("descriptions")),"popup"!==this.transcriptType||this.hideTranscriptButton||(i++,"legacy"===this.skin?t[2].push("transcript"):"2020"==this.skin&&t[1].push("transcript")),this.hasChapters&&this.useChaptersButton&&(i++,"legacy"===this.skin?t[2].push("chapters"):"2020"==this.skin&&t[1].push("chapters")),"2020"==this.skin&&i>0&&t[1].push("pipe"),e&&"2020"===this.skin&&(t[1].push("faster"),t[1].push("slower"),t[1].push("pipe")),"legacy"===this.skin?t[3].push("preferences"):"2020"==this.skin&&t[1].push("preferences"),"video"===this.mediaType&&this.allowFullscreen&&("legacy"===this.skin?t[3].push("fullscreen"):t[1].push("fullscreen")),this.browserSupportsVolume()?(this.volumeButton="volume-"+this.getVolumeName(this.volume),("legacy"===this.skin||"2020"==this.skin)&&t[1].push("volume")):this.volume=!1,t},AblePlayer.prototype.addControls=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P,k,T,C;for(e=this,s=(i=this.calculateControlLayout()).length,P=this.mediaId+"-tooltip",this.$tooltipDiv=t("<div>",{id:P,class:"able-tooltip"}).hide(),this.$controllerDiv.append(this.$tooltipDiv),"2020"==this.skin&&(l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.tt.seekbarLabel,this.$controllerDiv.append(l),this.seekBar=new AccessibleSlider(this.mediaType,l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible")),a=0;a<s;a++){for(r=i[a],o=t("<div>",a%2==0?{class:"able-left-controls"}:{class:"able-right-controls"}),this.$controllerDiv.append(o),n=0;n<r.length;n++){if("seek"===(d=r[n]))l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.tt.seekbarLabel,o.append(l),void 0!==this.duration&&0!==this.duration||(this.duration=60,this.elapsed=0),this.seekBar=new AccessibleSlider(this.mediaType,l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible");else if("pipe"===d)p=t("<span>",{tabindex:"-1","aria-hidden":"true"}),"font"===this.iconType?p.addClass("icon-pipe"):(c=t("<img>",{src:this.rootPath+"button-icons/"+this.iconColor+"/pipe.png",alt:"",role:"presentation"}),p.append(c)),o.append(p);else{if(g="volume"===d?this.rootPath+"button-icons/"+this.iconColor+"/"+this.volumeButton+".png":"fullscreen"===d?this.rootPath+"button-icons/"+this.iconColor+"/fullscreen-expand.png":"slower"===d?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/turtle.png":this.rootPath+"button-icons/"+this.iconColor+"/slower.png":"faster"===d?"animals"===this.speedIcons?this.rootPath+"button-icons/"+this.iconColor+"/rabbit.png":this.rootPath+"button-icons/"+this.iconColor+"/faster.png":this.rootPath+"button-icons/"+this.iconColor+"/"+d+".png",m=this.getButtonTitle(d),v=t("<div>",{role:"button",tabindex:"0","aria-label":m,class:"able-button-handler-"+d}),"volume"!==d&&"preferences"!==d&&"captions"!==d||("preferences"==d?(this.prefCats=this.getPreferencesGroups(),this.prefCats.length>1?(C=this.mediaId+"-prefs-menu",v.attr({"aria-controls":C,"aria-haspopup":"menu","aria-expanded":"false"})):1===this.prefCats.length&&v.attr({"aria-haspopup":"dialog"})):"volume"===d?(C=this.mediaId+"-volume-slider",v.attr({"aria-controls":C,"aria-expanded":"false"})):"captions"===d&&this.captions&&(this.captions.length>1?v.attr("aria-expanded","false"):v.attr("aria-pressed","false"))),"font"===this.iconType)y="volume"===d?"icon-"+this.volumeButton:"slower"===d?"animals"===this.speedIcons?"icon-turtle":"icon-slower":"faster"===d?"animals"===this.speedIcons?"icon-rabbit":"icon-faster":"icon-"+d,b=t("<span>",{class:y,"aria-hidden":"true"}),v.append(b);else if("svg"===this.iconType){var w;w="volume"===d?this.getSvgData(this.volumeButton):"fullscreen"===d?this.getSvgData("fullscreen-expand"):"slower"===d?"animals"===this.speedIcons?this.getSvgData("turtle"):this.getSvgData("slower"):"faster"===d?"animals"===this.speedIcons?this.getSvgData("rabbit"):this.getSvgData("faster"):this.getSvgData(d),b=t("<svg>",{focusable:"false","aria-hidden":"true",viewBox:w[0]}),u=t("<path>",{d:w[1]}),b.append(u),v.html(b),v.html(v.html())}else f=t("<img>",{src:g,alt:"",role:"presentation"}),v.append(f);var $=t("<span>",{class:"able-clipped"}).text(m);v.append($),v.on("mouseenter focus",(function(i){clearTimeout(k);var s=t(this).attr("aria-label"),a=t(this).position(),n=t(this).height(),r=t(this).width(),o=e.$controllerDiv.width();a.right=o-a.left-r;var l=a.top+n+5;if(t(this).parent().hasClass("able-right-controls"))var h="right";else h="left";var p=AblePlayer.localGetElementById(v[0],P).text(s).width();if("left"==h){(u=a.left-p/2)<0&&(u=2);var c={left:u+"px",right:"",top:l+"px"}}else{var u;(u=a.right-p/2)<0&&(u=2);c={left:"",right:u+"px",top:l+"px"}}var d=AblePlayer.localGetElementById(v[0],P).text(s).css(c);e.showTooltip(d),t(this).on("mouseleave blur",(function(){clearTimeout(k),k=setTimeout((function(){AblePlayer.localGetElementById(v[0],P).text("").hide()}),500),e.$tooltipDiv.on("mouseenter focus",(function(){clearTimeout(k)})),e.$tooltipDiv.on("mouseleave blur",(function(){AblePlayer.localGetElementById(v[0],P).text("").hide()}))}))})),"captions"===d?this.prefCaptions&&1===this.prefCaptions||(T=this.captions.length>1?this.tt.captions:this.tt.showCaptions,v.addClass("buttonOff").attr("title",T),v.attr("aria-pressed","false")):"descriptions"===d&&(this.prefDesc&&1===this.prefDesc||v.addClass("buttonOff").attr("title",this.tt.turnOnDescriptions)),o.append(v),"play"===d?this.$playpauseButton=v:"previous"==d?(this.$prevButton=v,"previous"==this.buttonWithFocus&&(this.$prevButton.focus(),this.buttonWithFocus=null)):"next"==d?(this.$nextButton=v,"next"==this.buttonWithFocus&&(this.$nextButton.focus(),this.buttonWithFocus=null)):"captions"===d?this.$ccButton=v:"sign"===d?(this.$signButton=v,this.$signWindow.is(":visible")||this.$signButton.addClass("buttonOff")):"descriptions"===d?this.$descButton=v:"mute"===d?this.$muteButton=v:"transcript"===d?(this.$transcriptButton=v,this.$transcriptDiv.is(":visible")||this.$transcriptButton.addClass("buttonOff").attr("title",this.tt.showTranscript)):"fullscreen"===d?this.$fullscreenButton=v:"chapters"===d?this.$chaptersButton=v:"preferences"===d?this.$prefsButton=v:"volume"===d&&(this.$volumeButton=v)}"volume"===d&&this.addVolumeSlider(o)}a%2==1&&this.$controllerDiv.append('<div style="clear:both;"></div>')}for(var D in void 0!==this.$captionsDiv&&this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv),this.controls=[],i)i.hasOwnProperty(D)&&(this.controls=this.controls.concat(i[D]));this.refreshControls("init")},AblePlayer.prototype.useSvg=function(){var t,e,i=Object.create(null),debouncedCheck=function(){clearTimeout(e),e=setTimeout(t,100)},unobserveChanges=function(){},s="http://www.w3.org/1999/xlink";t=function(){var t,e,a,n,r,o,l,h,p,c=0;if(window.XMLHttpRequest&&(r=void 0!==(r=new XMLHttpRequest).withCredentials?XMLHttpRequest:XDomainRequest||void 0),void 0!==r){for(unobserveChanges(),h=document.getElementsByTagName("use"),n=0;n<h.length;n+=1){try{e=h[n].getBoundingClientRect()}catch(t){e=!1}t=(l=h[n].getAttributeNS(s,"href").split("#"))[0],a=l[1],o=e&&0===e.left&&0===e.right&&0===e.top&&0===e.bottom,e&&0===e.width&&0===e.height&&!o?t.length&&(!0!==(p=i[t])&&setTimeout(attrUpdateFunc({useEl:h[n],base:t,hash:a}),0),void 0===p&&(p=new r,i[t]=p,p.onload=onloadFunc(p),p.onerror=onErrorTimeout(p),p.ontimeout=onErrorTimeout(p),p.open("GET",t),p.send(),c+=1)):o||(void 0===i[t]?i[t]=!0:i[t].onload&&(i[t].abort(),i[t].onload=void 0,i[t]=!0))}h="",c+=1,observeIfDone()}function observeIfDone(){var t;0===(c-=1)&&(window.addEventListener("resize",debouncedCheck,!1),window.addEventListener("orientationchange",debouncedCheck,!1),window.MutationObserver?((t=new MutationObserver(debouncedCheck)).observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}),unobserveChanges=function(){try{t.disconnect(),window.removeEventListener("resize",debouncedCheck,!1),window.removeEventListener("orientationchange",debouncedCheck,!1)}catch(t){}}):(document.documentElement.addEventListener("DOMSubtreeModified",debouncedCheck,!1),unobserveChanges=function(){document.documentElement.removeEventListener("DOMSubtreeModified",debouncedCheck,!1),window.removeEventListener("resize",debouncedCheck,!1),window.removeEventListener("orientationchange",debouncedCheck,!1)}))}function attrUpdateFunc(t){return function(){!0!==i[t.base]&&t.useEl.setAttributeNS(s,"xlink:href","#"+t.hash)}}function onloadFunc(t){return function(){var e,i=document.body,s=document.createElement("x");t.onload=null,s.innerHTML=t.responseText,(e=s.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",i.insertBefore(e,i.firstChild)),observeIfDone()}}function onErrorTimeout(t){return function(){t.onerror=null,t.ontimeout=null,observeIfDone()}}}},AblePlayer.prototype.cuePlaylistItem=function(e){var i,s,a,n,r,o,l=this;s=this.player,this.initializing||this.playerCreated&&this.deletePlayer("playlist"),this.swappingSrc=!0,this.startedPlaying?this.okToPlay=!0:this.okToPlay=!1,this.loadingMedia=!1,i=this.$playlist.eq(e),this.hasAttr(i,"data-youtube-id")?(this.youTubeId=this.getYouTubeId(i.attr("data-youtube-id")),this.hasAttr(i,"data-youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(i.attr("data-youtube-desc-id"))),a="youtube"):this.hasAttr(i,"data-vimeo-id")?(this.vimeoId=this.getVimeoId(i.attr("data-vimeo-id")),this.hasAttr(i,"data-vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(i.attr("data-vimeo-desc-id"))),a="vimeo"):a="html5","youtube"===a?"html5"===s&&(this.playing&&this.pauseMedia(),this.$media.hide()):(this.youTubeId=!1,"youtube"===s&&this.$media.show()),this.player=a,this.$media.empty(),this.hasAttr(i,"data-poster")&&this.$media.attr("poster",i.attr("data-poster")),this.hasAttr(i,"data-youtube-desc-id")&&this.$media.attr("data-youtube-desc-id",i.attr("data-youtube-desc-id")),this.youTubeId&&this.$media.attr("data-youtube-id",i.attr("data-youtube-id"));var h=i.children("span.able-source");h.length&&h.each((function(){if(l.hasAttr(t(this),"data-src")){var e=t("<source>",{src:t(this).attr("data-src")});l.hasAttr(t(this),"data-type")&&e.attr("type",t(this).attr("data-type")),l.hasAttr(t(this),"data-desc-src")&&e.attr("data-desc-src",t(this).attr("data-desc-src")),l.hasAttr(t(this),"data-sign-src")&&e.attr("data-sign-src",t(this).attr("data-sign-src")),l.$media.append(e)}}));var p=i.children("span.able-track");p.length&&p.each((function(){if(l.hasAttr(t(this),"data-src")&&l.hasAttr(t(this),"data-kind")&&l.hasAttr(t(this),"data-srclang")){var e=t("<track>",{src:t(this).attr("data-src"),kind:t(this).attr("data-kind"),srclang:t(this).attr("data-srclang")});l.hasAttr(t(this),"data-label")&&e.attr("label",t(this).attr("data-label")),l.hasAttr(t(this),"data-desc")&&e.attr("data-desc",t(this).attr("data-desc")),l.$media.append(e)}})),n=i.text(),this.hasAttr(i,"lang")&&(r=i.attr("lang")),this.$sources=this.$media.find("source"),this.recreatingPlayer||this.recreatePlayer().then((function(){l.$playlist.removeClass("able-current").children("button").removeAttr("aria-current"),l.$playlist.eq(e).addClass("able-current").children("button").attr("aria-current","true"),!0===l.showNowPlaying&&void 0!==l.$nowPlayingDiv&&(o=t("<span>"),void 0!==r&&o.attr("lang",r),o.html("<span>"+l.tt.selectedTrack+":</span>"+n),l.$nowPlayingDiv.html(o)),l.initializing?l.swappingSrc=!1:"html5"===l.player?l.loadingMedia||(l.media.load(),l.loadingMedia=!0):"youtube"===l.player&&(l.okToPlay=!0),l.initializing=!1,l.playerCreated=!0}))},AblePlayer.prototype.deletePlayer=function(e){"youtube"===this.player&&this.youTubePlayer&&this.youTubePlayer.destroy(),"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.destroy(),this.$controllerDiv.empty(),this.$elapsedTimeContainer.empty().text("0:00"),this.$durationContainer.empty(),this.$signWindow&&this.$signWindow.remove(),this.$transcriptArea&&this.$transcriptArea.remove(),t(".able-modal-dialog").remove(),this.$captionsWrapper&&this.$captionsWrapper.remove(),this.$descDiv&&this.$descDiv.remove(),this.hasCaptions=!1,this.hasChapters=!1,this.hasDescTracks=!1,this.hasOpenDesc=!1,this.hasClosedDesc=!1,this.captionsPopup=null,this.chaptersPopup=null,this.transcriptType=null,this.playerDeleted=!0},AblePlayer.prototype.getButtonTitle=function(t){return"playpause"===t||"play"===t?this.tt.play:"pause"===t?this.tt.pause:"restart"===t?this.tt.restart:"previous"===t?this.tt.prevTrack:"next"===t?this.tt.nextTrack:"rewind"===t?this.tt.rewind:"forward"===t?this.tt.forward:"captions"===t?this.captions.length>1?this.tt.captions:this.captionsOn?this.tt.hideCaptions:this.tt.showCaptions:"descriptions"===t?this.descOn?this.tt.turnOffDescriptions:this.tt.turnOnDescriptions:"transcript"===t?this.$transcriptDiv.is(":visible")?this.tt.hideTranscript:this.tt.showTranscript:"chapters"===t?this.tt.chapters:"sign"===t?this.tt.sign:"volume"===t?this.tt.volume:"faster"===t?this.tt.faster:"slower"===t?this.tt.slower:"preferences"===t?this.tt.preferences:"help"!==t?"fullscreen"===t?this.fullscreen?this.tt.exitFullscreen:this.tt.enterFullscreen:(this.debug,t.charAt(0).toUpperCase()+t.slice(1)):void 0}}(jQuery);var preProcessing={transformCSSClasses:function(t){return t.replace(/<(v|c|b|i|u|lang|ruby)\.([\w\.]+)([^>])>/g,(function(t,e,i,s){return"<"+e+' class="'+i.split(".").join(" ")+'"'+s+">"}))},transformLangTags:function(t){return t.replace(/<lang\s+([\w-]+)([^>])>/g,(function(t,e,i){return'<lang lang="'+e+'"'+i+">"}))},transformVTags:function(t){return t.replace(/<v\s+([^>]?)>/g,(function(t,e){var i=e.match(/class="([^"])"/),s=i?i[0]:"",a=e.replace(/class="[^"]"/,"").trim().split(/\s+/),n=[],r=[];a.forEach((function(t){-1!==t.indexOf("=")?n.push(t):r.push(t)}));var o=r.join(" "),l="<v";return o&&(l+=' title="'+o+'"'),n.length>0&&(l+=" "+n.join(" ")),s&&(l+=" "+s),l+=">"}))}},postProcessing={postprocessCTag:function(t){return t.replace(/<c class="([\w\s]+)">/g,(function(t,e){return"<c."+e.split(" ").join(".")+">"}))},postprocessVTag:function(t){return t.replace(/<v class="([\w\s]+)"([^>])>/g,(function(t,e,i){return"<v."+e.split(" ").join(".")+i+">"}))},postprocessLangTag:function(t){return t.replace(/<lang lang="([\w-]+)"([^>])>/g,(function(t,e,i){return"<lang "+e+i+">"}))}},validate={preProcessVttContent:function(t){var e=preProcessing.transformCSSClasses(t),i=preProcessing.transformLangTags(e);return preProcessing.transformVTags(i)},postProcessVttContent:function(t,e){var i=postProcessing.postprocessCTag(t),s=postProcessing.postprocessVTag(i);return postProcessing.postprocessLangTag(s).replace(/-->/g,"--\x3e").replace(/<\/v>/g,(function(t,i){return-1!==e.indexOf(t,i)?t:""}))},sanitizeVttContent:function(t){if(null==t)return"";var e=validate.preProcessVttContent(t),i=DOMPurify.sanitize(e,{ALLOWED_TAGS:["b","i","u","v","c","lang","ruby","rt","rp"],ALLOWED_ATTR:["title","class","lang"],KEEP_CONTENT:!0});return validate.postProcessVttContent(i,t)}};"undefined"!=typeof module&&module.exports&&(module.exports=validate),function(t){AblePlayer.prototype.setupTracks=function(){var e,i,s,a,n,r,o,l,h;for(e=this,s=(i=new t.Deferred).promise(),a=[],t("#able-vts").length?(this.vtsTracks=[],this.hasVts=!0):this.hasVts=!1,o=this.hasDescTracks&&this.descOn?this.altTracks:this.tracks,r=0;r<o.length;r++)if(h=(l=o[r]).kind,l.src){l.src;n=this.loadTextObject(l.src),a.push(n.catch((function(t){}))),n.then(function(t,i){t.src;var s=t.language,a=t.label,n=t.desc;return function(r,o){var l=o,h=e.parseWebVTT(r,l).cues;e.hasVts&&e.setupVtsTracks(i,s,n,a,r,l),"captions"===i||"subtitles"===i?e.setupCaptions(t,h):"descriptions"===i?e.setupDescriptions(t,h):"chapters"===i?e.setupChapters(t,h):"metadata"===i&&e.setupMetadata(t,h)}}(l,h))}else(e.usingYouTubeCaptions||e.usingVimeoCaptions)&&e.setupCaptions(l);return e.usingYouTubeCaptions||e.usingVimeoCaptions?i.resolve():t.when.apply(t,a).then((function(){i.resolve()})),s},AblePlayer.prototype.getTracks=function(){var e,i,s,a,n,r,o,l,h,p,c;return e=this,l=!1,s=(i=new t.Deferred).promise(),this.$tracks=this.$media.find("track"),this.tracks=[],this.altTracks=[],this.captions=[],this.descriptions=[],this.chapters=[],this.meta=[],this.hasCaptionsTrack=!1,this.hasDescTracks=!1,this.$tracks.length&&(this.usingYouTubeCaptions=!1,this.$tracks.each((function(i,s){if("captions"===t(this).attr("kind")?e.hasCaptionsTrack=!0:"descriptions"===t(this).attr("kind")&&(e.hasClosedDesc=!0),a=t(this).attr("srclang")?t(this).attr("srclang"):e.lang,n=t(this).attr("label")?t(this).attr("label"):e.getLanguageName(a),void 0===t(this).attr("default")||l?a===e.lang?(h=!0,r=!1):r=!1:(r=!0,l=!0),r&&(e.captionLang=a),void 0!==t(this).data("desc")?(o=!0,e.hasDescTracks=!0):o=!1,o?e.altTracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}):e.tracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}),i==e.$tracks.length-1){if(!l)if(h)for(e.captionLang=e.lang,p=!1,c=0;c<e.tracks.length&&!p;)e.tracks[c].language===e.lang&&(e.tracks[c].def=!0,p=!0),c++;else e.tracks[0].def=!0,e.captionLang=e.tracks[0].language;e.$media.find("track").removeAttr("default")}}))),this.$tracks.length&&this.hasCaptionsTrack?i.resolve():"youtube"===this.player?this.getYouTubeCaptionTracks(this.youTubeId).then((function(){e.hasCaptions&&(e.usingYouTubeCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()})):"vimeo"===this.player?this.getVimeoCaptionTracks().then((function(){e.hasCaptions&&(e.usingVimeoCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()})):(this.hasCaptions=!1,e.$captionsWrapper&&e.$captionsWrapper.remove(),i.resolve()),s},AblePlayer.prototype.setupCaptions=function(e,i){var s,a;if(void 0===i&&(i=null),this.usingYouTubeCaptions||this.usingVimeoCaptions);else if(0===this.captions.length)this.captions.push({language:e.language,label:e.label,def:e.def,cues:i});else{for(s=!1,a=0;a<this.captions.length;a++)if(e.label.toLowerCase()<this.captions[a].label.toLowerCase()){this.captions.splice(a,0,{language:e.language,label:e.label,def:e.def,cues:i}),s=!0;break}s||this.captions.push({language:e.language,label:e.label,def:e.def,cues:i})}this.hasCaptions=!0,this.currentCaption=-1,1===this.prefCaptions?this.captionsOn=!0:0===this.prefCaptions?this.captionsOn=!1:1===this.defaultStateCaptions?this.captionsOn=!0:this.captionsOn=!1,"audio"===this.mediaType&&this.captionsOn&&this.$captionsContainer.removeClass("captions-off"),(!this.$captionsWrapper||this.$captionsWrapper&&!t.contains(this.$ableDiv[0],this.$captionsWrapper[0]))&&(this.$captionsDiv=t("<div>",{class:"able-captions"}),this.$captionsWrapper=t("<div>",{class:"able-captions-wrapper","aria-hidden":"true"}).hide(),"below"===this.prefCaptionsPosition?this.$captionsWrapper.addClass("able-captions-below"):this.$captionsWrapper.addClass("able-captions-overlay"),this.$captionsWrapper.append(this.$captionsDiv),this.$captionsContainer.append(this.$captionsWrapper))},AblePlayer.prototype.setupDescriptions=function(t,e){this.hasClosedDesc=!0,this.currentDescription=-1,this.descriptions.push({cues:e,language:t.language})},AblePlayer.prototype.setupChapters=function(t,e){this.hasChapters=!0,this.chapters.push({cues:e,language:t.language})},AblePlayer.prototype.setupMetadata=function(e,i,s){"text"===this.metaType?this.metaDiv&&t("#"+this.metaDiv)&&(this.$metaDiv=t("#"+this.metaDiv),this.hasMeta=!0,this.meta=i):"selector"===this.metaType&&(this.hasMeta=!0,this.visibleSelectors=[],this.meta=i)},AblePlayer.prototype.loadTextObject=function(e){var i,s,a,n;return s=(i=new t.Deferred).promise(),a=this,n=t("<div>",{style:"display:none"}),t.ajax({url:e,dataType:"text",success:function(t){var s=validate.sanitizeVttContent(t);n.html(s),i.resolve(e,s),n.remove()},error:function(t,s,r){a.debug,i.reject(e),n.remove()}}),s}}(jQuery),function(t){AblePlayer.prototype.initYouTubePlayer=function(){var e,i,s,a;return e=this,s=(i=new t.Deferred).promise(),this.youTubePlayerReady=!1,a=this.youTubeDescId&&this.prefDesc?this.youTubeDescId:this.youTubeId,this.activeYouTubeId=a,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeInit().then((function(){i.resolve()})):(AblePlayer.loadingYouTubeIframeAPI||t.getScript("https://www.youtube.com/iframe_api").fail((function(){i.fail()})),t("body").on("youTubeIframeAPIReady",(function(){e.finalizeYoutubeInit().then((function(){i.resolve()}))}))),s},AblePlayer.prototype.finalizeYoutubeInit=function(){var e,i,s,a,n;return i=(e=new t.Deferred).promise(),s=this,a=this.mediaId+"_youtube",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.okToPlay?1:0,void 0===this.captionLang&&(this.captionLang=this.lang),this.youTubePlayer=new YT.Player(a,{videoId:this.activeYouTubeId,host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,enablejsapi:1,disableKb:1,playsinline:this.playsInline,start:this.startTime,controls:0,cc_load_policy:1,cc_lang_pref:this.captionLang,hl:this.lang,modestbranding:1,rel:0,iv_load_policy:3},events:{onReady:function(){s.youTubePlayerReady=!0,s.playerWidth&&s.playerHeight||s.getYouTubeDimensions(),s.playerWidth&&s.playerHeight&&(s.youTubePlayer.setSize(s.playerWidth,s.playerHeight),s.$ableWrapper.css({width:s.playerWidth+"px"})),s.swappingSrc&&(s.swappingSrc=!1,s.restoreFocus(),s.cueingPlaylistItem=!1,(s.playing||s.okToPlay)&&s.playMedia()),s.userClickedPlaylist&&(s.userClickedPlaylist=!1),s.recreatingPlayer&&(s.recreatingPlayer=!1),e.resolve()},onError:function(t){e.fail()},onStateChange:function(t){s.getPlayerState().then((function(t){"playing"===t?(s.playing=!0,s.startedPlaying=!0,s.paused=!1):"ended"==t?s.onMediaComplete():(s.playing=!1,s.paused=!0),s.stoppingYouTube&&"paused"===t&&(void 0!==s.$posterImg&&s.$posterImg.show(),s.stoppingYouTube=!1,s.seeking=!1,s.playing=!1,s.paused=!0)})),"youtube"!==s.player||s.usingYouTubeCaptions||s.youTubePlayer.getOptions("captions")&&s.youTubePlayer.unloadModule("captions")},onPlaybackQualityChange:function(){}}}),this.hasPlaylist||this.$media.remove(),i},AblePlayer.prototype.getYouTubeDimensions=function(t){var e,i,s;void 0!==(e=this.$ableWrapper.find("iframe"))&&e.prop("width")&&(i=e.prop("width"),e.prop("height")&&(s=e.prop("height"),this.resizePlayer(i,s)))},AblePlayer.prototype.getYouTubeCaptionTracks=function(e){var i,s,a,n,r,o,l=new t.Deferred,h=l.promise();return i=this,this.youTubePlayer.getOption("captions","tracklist")||(this.youTubePlayer.addEventListener("onApiChange",(function(t){if(i.duration=i.youTubePlayer.getDuration(),i.loadingYouTubeCaptions){if(s=i.youTubePlayer.getOption("captions","tracklist"),i.okToPlay||i.youTubePlayer.pauseVideo(),s&&s.length){for(a=0;a<s.length;a++)n=s[a].languageCode,r=s[a].languageName,o=!1,void 0!==i.captionLang?n===i.captionLang&&(o=!0):void 0!==i.lang&&n===i.lang&&(o=!0),i.tracks.push({kind:"captions",language:n,label:r,def:o}),i.captions.push({language:n,label:r,def:o,cues:null});i.hasCaptions=!0,i.setupPopups("captions")}else i.usingYouTubeCaptions=!1,i.hasCaptions=!1;i.loadingYouTubeCaptions=!1,i.okToPlay&&i.youTubePlayer.playVideo()}i.captionLangPending&&(i.youTubePlayer.setOption("captions","track",{languageCode:i.captionLangPending}),i.captionLangPending=null),void 0!==i.prefCaptionsSize&&i.youTubePlayer.setOption("captions","fontSize",i.translatePrefs("size",i.prefCaptionsSize,"youtube")),l.resolve()})),this.loadingYouTubeCaptions=!0,this.youTubePlayer.playVideo()),h},AblePlayer.prototype.getYouTubeTimedTextUrl=function(t,e,i){var s="https://www.youtube.com/api/timedtext?fmt=vtt";return s+="&v="+t,s+="&lang="+i,""!==e&&(s+="&name="+e),s},AblePlayer.prototype.getYouTubePosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+t;return"120"==e?i+"/default.jpg":"320"==e||"480"==e?i+"/hqdefault.jpg":"640"==e&&i+"/sddefault.jpg"},AblePlayer.prototype.getYouTubeId=function(t){var e;return-1!==t.indexOf("youtu")?(e=(t=t.trim()).length-11,t.substring(e)):t}}(jQuery),function(t){window.AccessibleSlider=function(e,i,s,a,n,r,o,l,h,p,c){var u,d;u=this,this.position=0,this.tracking=!1,this.trackDevice=null,this.keyTrackPosition=0,this.lastTrackPosition=0,this.nextStep=1,this.inertiaCount=0,this.bodyDiv=t(i),p&&(this.loadedDiv=t("<div></div>"),this.playedDiv=t("<div></div>")),this.seekHead=t("<div>",{"aria-orientation":s,class:"able-"+h+"-head"}),"visible"===c?this.seekHead.attr("tabindex","0"):this.seekHead.attr("tabindex","-1"),this.seekHead.attr({role:"slider","aria-label":l,"aria-valuemin":n,"aria-valuemax":r}),this.timeTooltipTimeoutId=null,this.overTooltip=!1,this.timeTooltip=t("<div>"),this.bodyDiv.append(this.timeTooltip),this.timeTooltip.attr("role","tooltip"),this.timeTooltip.addClass("able-tooltip"),this.timeTooltip.on("mouseenter focus",(function(){u.overTooltip=!0,clearInterval(u.timeTooltipTimeoutId)})),this.timeTooltip.on("mouseleave blur",(function(){u.overTooltip=!1,t(this).hide()})),this.timeTooltip.hide(),this.bodyDiv.append(this.loadedDiv),this.bodyDiv.append(this.playedDiv),this.bodyDiv.append(this.seekHead),this.bodyDiv.wrap("<div></div>"),this.wrapperDiv=this.bodyDiv.parent(),"legacy"===this.skin&&("horizontal"===s?(this.wrapperDiv.width(a),this.loadedDiv.width(0)):(this.wrapperDiv.height(a),this.loadedDiv.height(0))),this.wrapperDiv.addClass("able-"+h+"-wrapper"),p&&(this.loadedDiv.addClass("able-"+h+"-loaded"),this.playedDiv.width(0),this.playedDiv.addClass("able-"+h+"-played"),this.setDuration(r)),this.seekHead.on("mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend",(function(t){d=u.pointerEventToXY(t),"mouseenter"===t.type||"focus"===t.type?u.overHead=!0:"mouseleave"===t.type||"blur"===t.type?(u.overHead=!1,!u.overBody&&u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x))):"mousemove"===t.type||"touchmove"===t.type?u.tracking&&"mouse"===u.trackDevice&&u.trackHeadAtPageX(d.x):"mousedown"===t.type||"touchstart"===t.type?(u.startTracking("mouse",u.pageXToPosition(u.seekHead.offset()+u.seekHead.width()/2)),u.bodyDiv.is(":focus")||u.bodyDiv.focus(),t.preventDefault()):"mouseup"!==t.type&&"touchend"!==t.type||u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x)),"mousemove"!==t.type&&"mousedown"!==t.type&&"mouseup"!==t.type&&"touchstart"!==t.type&&"touchend"!==t.type&&u.refreshTooltip()})),this.bodyDiv.on("mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend",(function(t){if(d=u.pointerEventToXY(t),"mouseenter"===t.type)u.overBody=!0,u.overBodyMousePos={x:d.x,y:d.y};else if("mouseleave"===t.type)u.overBody=!1,u.overBodyMousePos=null,!u.overHead&&u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x));else if("mousemove"===t.type||"touchmove"===t.type)u.overBodyMousePos={x:d.x,y:d.y},u.tracking&&"mouse"===u.trackDevice&&u.trackHeadAtPageX(d.x);else if("mousedown"===t.type||"touchstart"===t.type)u.startTracking("mouse",u.pageXToPosition(d.x)),u.trackHeadAtPageX(d.x),u.seekHead.is(":focus")||u.seekHead.focus(),t.preventDefault();else if("mouseup"===t.type||"touchend"===t.type)u.tracking&&"mouse"===u.trackDevice&&u.stopTracking(u.pageXToPosition(d.x));else if("keydown"===t.type){if(36===t.which)u.trackImmediatelyTo(0);else if(35===t.which)u.trackImmediatelyTo(u.duration);else if(37===t.which||40===t.which)u.arrowKeyDown(-1);else if(39===t.which||38===t.which)u.arrowKeyDown(1);else if(33===t.which&&o>0)u.arrowKeyDown(o);else{if(!(34===t.which&&o>0))return;u.arrowKeyDown(-o)}t.preventDefault()}else"keyup"===t.type&&t.which>=33&&t.which<=40&&(u.tracking&&"keyboard"===u.trackDevice&&u.stopTracking(u.keyTrackPosition),t.preventDefault());u.overTooltip||"mouseup"===t.type||"keydown"===t.type||"keydown"===t.type||u.refreshTooltip()}))},AccessibleSlider.prototype.arrowKeyDown=function(t){this.tracking&&"keyboard"===this.trackDevice?(this.keyTrackPosition=this.boundPos(this.keyTrackPosition+this.nextStept),this.inertiaCount+=1,20===this.inertiaCount&&(this.inertiaCount=0,this.nextStep=2),this.trackHeadAtPosition(this.keyTrackPosition)):(this.nextStep=1,this.inertiaCount=0,this.keyTrackPosition=this.boundPos(this.position+this.nextStept),this.startTracking("keyboard",this.keyTrackPosition),this.trackHeadAtPosition(this.keyTrackPosition))},AccessibleSlider.prototype.pageXToPosition=function(t){var e=t-this.bodyDiv.offset().left,i=this.duration(e/this.bodyDiv.width());return this.boundPos(i)},AccessibleSlider.prototype.boundPos=function(t){return Math.max(0,Math.min(t,this.duration))},AccessibleSlider.prototype.setDuration=function(t){t!==this.duration&&(this.duration=t,this.resetHeadLocation(),this.seekHead.attr("aria-valuemax",t))},AccessibleSlider.prototype.setWidth=function(t){this.wrapperDiv.width(t),this.resizeDivs(),this.resetHeadLocation()},AccessibleSlider.prototype.getWidth=function(){return this.wrapperDiv.width()},AccessibleSlider.prototype.resizeDivs=function(){this.playedDiv.width(this.bodyDiv.width()(this.position/this.duration)),this.loadedDiv.width(this.bodyDiv.width()this.buffered)},AccessibleSlider.prototype.resetHeadLocation=function(){var t=this.position/this.duration,e=this.bodyDiv.width()t;this.seekHead.css("left",e-this.seekHead.width()/2),this.tracking&&this.stopTracking(this.position)},AccessibleSlider.prototype.setPosition=function(t,e){this.position=t,this.resetHeadLocation(),this.overHead&&this.refreshTooltip(),this.resizeDivs(),this.updateAriaValues(t,e)},AccessibleSlider.prototype.setBuffered=function(t){isNaN(t)||(this.buffered=t,this.redrawDivs)},AccessibleSlider.prototype.startTracking=function(t,e){this.tracking||(this.trackDevice=t,this.tracking=!0,this.bodyDiv.trigger("startTracking",[e]))},AccessibleSlider.prototype.stopTracking=function(t){this.trackDevice=null,this.tracking=!1,this.bodyDiv.trigger("stopTracking",[t]),this.setPosition(t,!0)},AccessibleSlider.prototype.trackHeadAtPageX=function(t){var e=this.pageXToPosition(t),i=t-this.bodyDiv.offset().left-this.seekHead.width()/2;i=Math.max(0,Math.min(i,this.bodyDiv.width()-this.seekHead.width())),this.lastTrackPosition=e,this.seekHead.css("left",i),this.reportTrackAtPosition(e)},AccessibleSlider.prototype.trackHeadAtPosition=function(t){var e=t/this.duration,i=this.bodyDiv.width()e;this.lastTrackPosition=t,this.seekHead.css("left",i-this.seekHead.width()/2),this.reportTrackAtPosition(t)},AccessibleSlider.prototype.reportTrackAtPosition=function(t){this.bodyDiv.trigger("tracking",[t]),this.updateAriaValues(t,!0)},AccessibleSlider.prototype.updateAriaValues=function(e,i){var s,a=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),o=1===n?"minute":"minutes",l=1===r?"second":"seconds";s=a>0?a+" "+(1===a?"hour":"hours")+", "+n+" "+o+", "+r+" "+l:n>0?n+" "+o+", "+r+" "+l:r+" "+l,this.liveAriaRegion||(this.liveAriaRegion=t("<span>",{class:"able-offscreen","aria-live":"polite"}),this.wrapperDiv.append(this.liveAriaRegion)),i&&this.liveAriaRegion.text()!==s&&this.liveAriaRegion.text(s),this.seekHead.attr("aria-valuetext",s),this.seekHead.attr("aria-valuenow",Math.floor(e).toString())},AccessibleSlider.prototype.trackImmediatelyTo=function(t){this.startTracking("keyboard",t),this.trackHeadAtPosition(t),this.keyTrackPosition=t},AccessibleSlider.prototype.refreshTooltip=function(){if(this.overHead)this.timeTooltip.show(),this.tracking?this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)):this.timeTooltip.text(this.positionToStr(this.position)),this.setTooltipPosition(this.seekHead.position().left+this.seekHead.width()/2);else if(this.overBody&&this.overBodyMousePos)this.timeTooltip.show(),this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))),this.setTooltipPosition(this.overBodyMousePos.x-this.bodyDiv.offset().left);else{clearTimeout(this.timeTooltipTimeoutId);var t=this;this.timeTooltipTimeoutId=setTimeout((function(){t.timeTooltip.hide()}),500)}},AccessibleSlider.prototype.hideSliderTooltips=function(){this.overHead=!1,this.overBody=!1,this.timeTooltip.hide()},AccessibleSlider.prototype.setTooltipPosition=function(t){this.timeTooltip.css({left:t-this.timeTooltip.width()/2-10,bottom:this.seekHead.height()+10})},AccessibleSlider.prototype.positionToStr=function(t){var e=Math.floor(t/3600),i=Math.floor(t/60)%60,s=Math.floor(t%60);return s<10&&(s="0"+s),e>0?(i<10&&(i="0"+i),e+":"+i+":"+s):i+":"+s},AccessibleSlider.prototype.pointerEventToXY=function(t){var e={x:0,y:0};if("touchstart"==t.type||"touchmove"==t.type||"touchend"==t.type||"touchcancel"==t.type){var i=t.originalEvent.touches[0]||t.originalEvent.changedTouches[0];e.x=i.pageX,e.y=i.pageY}else"mousedown"!=t.type&&"mouseup"!=t.type&&"mousemove"!=t.type&&"mouseover"!=t.type&&"mouseout"!=t.type&&"mouseenter"!=t.type&&"mouseleave"!=t.type||(e.x=t.pageX,e.y=t.pageY);return e}}(jQuery),function(t){AblePlayer.prototype.addVolumeSlider=function(e){var i,s,a,n,r,o,l,h,p;for(i=this,s=this.mediaId+"-volume-slider",a=this.mediaId+"-volume-help",r=this.mediaId+"-volume-tick-labels",this.$volumeSlider=t("<div>",{id:s,class:"able-volume-slider","aria-hidden":"true"}).hide(),this.$volumeSliderTooltip=t("<div>",{class:"able-tooltip",role:"tooltip"}).hide(),this.$volumeRange=t("<input>",{type:"range",min:"0",max:"10",step:"1",orient:"vertical","aria-label":this.tt.volumeUpDown,value:this.volume}),n=parseInt(i.volume)/10100,this.$volumeHelp=t("<div>",{id:a,class:"able-volume-help","aria-live":"polite"}).text(n+"%"),this.$volumeButton.attr({"aria-describedby":a}),o=t("<datalist>",{id:r}),l=0;l<=10;l++)p=0===l?this.tt.mute:10l+"%",h=t("<option>",{value:l,label:p}),o.append(h);this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp),e.append(this.$volumeSlider),this.$volumeRange.on("change",(function(e){i.handleVolumeChange(t(this).val())})),this.$volumeRange.on("input",(function(e){i.handleVolumeChange(t(this).val())})),this.$volumeRange.on("keydown",(function(t){27!==t.which&&13!==t.which&&9!==t.which||(i.$volumeSlider.is(":visible")?(i.closingVolume=!0,i.hideVolumePopup()):i.closingVolume||i.showVolumePopup())}))},AblePlayer.prototype.refreshVolumeHelp=function(t){var e;e=t/10100,this.$volumeHelp&&this.$volumeHelp.text(e+"%"),this.$volumeRange.attr("value",t)},AblePlayer.prototype.refreshVolumeButton=function(t){var e,i,s,a,n,r;e=this.getVolumeName(t),i=t/10100,s=this.tt.volume+" "+i+"%","font"===this.iconType?(a="icon-volume-"+e,this.$volumeButton.find("span").first().removeClass().addClass(a),this.$volumeButton.find("span.able-clipped").text(s)):"image"===this.iconType?(n=this.imgPath+"volume-"+e+".png",this.$volumeButton.find("img").attr("src",n)):"svg"===this.iconType&&("mute"!==e&&(e="volume-"+e),r=this.getSvgData(e),this.$volumeButton.find("svg").attr("viewBox",r[0]),this.$volumeButton.find("path").attr("d",r[1]))},AblePlayer.prototype.handleVolumeButtonClick=function(){this.$volumeSlider.is(":visible")?this.hideVolumePopup():this.showVolumePopup()},AblePlayer.prototype.handleVolumeKeystroke=function(t){var e;if(!(t>=49&&t<=57))return!1;e=t-48,this.isMuted()&&e>0?this.setMute(!1):0===e?this.setMute(!0):(this.setVolume(e),this.refreshVolumeHelp(e),this.refreshVolumeButton(e))},AblePlayer.prototype.handleVolumeChange=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleMute=function(){this.isMuted()?this.setMute(!1):this.setMute(!0)},AblePlayer.prototype.showVolumePopup=function(){this.closePopups(),this.$tooltipDiv.hide(),this.$volumeSlider.show().attr("aria-hidden","false"),this.$volumeButton.attr("aria-expanded","true"),this.$volumeButton.focus(),this.waitThenFocus(this.$volumeRange)},AblePlayer.prototype.hideVolumePopup=function(){var t=this;this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus(),setTimeout((function(){t.closingVolume=!1}),1e3)},AblePlayer.prototype.isMuted=function(){return"html5"===this.player?this.media.muted:"youtube"===this.player?this.youTubePlayer.isMuted():void 0},AblePlayer.prototype.setMute=function(t){t?(this.lastVolume=this.volume,this.volume=0):void 0!==this.lastVolume&&(this.volume=this.lastVolume),"html5"===this.player?this.media.muted=t:"youtube"===this.player&&(t?this.youTubePlayer.mute():this.youTubePlayer.unMute()),this.setVolume(this.volume),this.refreshVolumeHelp(this.volume),this.refreshVolumeButton(this.volume)},AblePlayer.prototype.setVolume=function(t){var e;"html5"===this.player?(e=t/10,this.media.volume=e,this.hasSignLanguage&&this.signVideo&&(this.signVideo.volume=0)):"youtube"===this.player?(e=10t,this.youTubePlayer.setVolume(e),this.volume=t):"vimeo"===this.player&&(e=t/10,this.vimeoPlayer.setVolume(e).then((function(){}))),this.lastVolume=t},AblePlayer.prototype.getVolume=function(t){return"html5"===this.player?10this.media.volume:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getVolume()/10:"vimeo"===this.player?this.volume:void 0},AblePlayer.prototype.getVolumeName=function(t){return 0==t?"mute":10==t?"loud":t<5?"soft":"medium"}}(jQuery),function(t){var e="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]";window.AccessibleDialog=function(i,s,a,n,r,o,l,h,p,c){this.title=r,this.closeButtonLabel=l,this.focusedElementBeforeModal=s,this.escapeHook=c,this.baseId=t(i).attr("id")||Math.floor(1e9Math.random()).toString();var u=this,d=i;if(this.modal=d,d.css({width:h||"50%"}),d.addClass("able-modal-dialog"),!p){var f=t("<button>",{class:"modalCloseButton",title:u.closeButtonLabel,"aria-label":u.closeButtonLabel}).text("X");f.keydown((function(t){32===t.which&&u.hide()})).click((function(){u.hide()}));var g=t("<h1></h1>");g.attr("id","modalTitle-"+this.baseId),g.css("text-align","center"),g.text(r),this.titleH1=g,d.attr({"aria-labelledby":"modalTitle-"+this.baseId}),d.prepend(g),d.prepend(f)}d.attr({"aria-hidden":"true",role:a}),n&&d.attr("aria-modal","true"),d.keydown((function(i){if(27===i.which)u.escapeHook?u.escapeHook(i,this):(u.hide(),i.preventDefault());else if(9===i.which){var s=d.find("").filter(e).filter(":visible");if(0===s.length)return;var a=t(":focus"),n=s.index(a);i.shiftKey?0===n&&(s.get(s.length-1).focus(),i.preventDefault()):n===s.length-1&&(s.get(0).focus(),i.preventDefault())}i.stopPropagation()})),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden")},AccessibleDialog.prototype.show=function(){if(!this.overlay){var i=t("<div></div>").attr({class:"able-modal-overlay",tabindex:"-1"});this.overlay=i,t("body").append(i),i.on("mousedown.accessibleModal",(function(t){t.preventDefault()}))}t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").attr("aria-hidden","true"),this.overlay.css("display","block"),this.modal.css("display","block"),this.modal.attr({"aria-hidden":"false",tabindex:"-1"}),0===this.modal.find("").filter(e).filter(":visible").length&&this.focusedElementBeforeModal.blur();var s=this;setTimeout((function(){s.modal.find("button.modalCloseButton").first().focus()}),300)},AccessibleDialog.prototype.hide=function(){this.overlay&&this.overlay.css("display","none"),this.modal.css("display","none"),this.modal.attr("aria-hidden","true"),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("aria-hidden"),this.focusedElementBeforeModal.focus()},AccessibleDialog.prototype.getInputs=function(){return!!this.modal&&this.modal.find("input")}}(jQuery),function(t){AblePlayer.prototype.getNextHeadingLevel=function(e){var i,s,a,n;return e.parents().each((function(){if(i=t(this).children(":header"),s=i.length)return a=i.eq(s-1).prop("tagName"),!1})),void 0===a?n=1:(n=parseInt(a[1]),(n+=1)>6&&(n=6)),n},AblePlayer.prototype.countProperties=function(t){var e,i;for(i in e=0,t)t.hasOwnProperty(i)&&++e;return e},AblePlayer.prototype.formatSecondsAsColonTime=function(t,e){var i,s,a,n,r,o,l;if(e)if(2===(n=t.toString().split(".")).length){if((r=n[1]).length<3)for(o=3-r.length,l=1;l<=o;l++)r+="0"}else r="000";return i=Math.floor(t/3600),s=Math.floor(t/60)%60,(a=Math.floor(t%60))<10&&(a="0"+a),i>0?(s<10&&(s="0"+s),e?i+":"+s+":"+a+"."+r:i+":"+s+":"+a):e?(i<1?i="00":i<10&&(i="0"+i),s<1?s="00":s<10&&(s="0"+s),i+":"+s+":"+a+"."+r):s+":"+a},AblePlayer.prototype.getSecondsFromColonTime=function(t){var e;return 3===(e=t.split(":")).length?3600parseInt(e[0])+60parseInt(e[1])+parseFloat(e[2]):2===e.length?60parseInt(e[0])+parseFloat(e[1]):1===e.length?parseFloat(e[0]):void 0},AblePlayer.prototype.capitalizeFirstLetter=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},AblePlayer.prototype.roundDown=function(t,e){return Number(Math.floor(t+"e"+e)+"e-"+e)},AblePlayer.prototype.hasAttr=function(t,e){var i=t.attr(e);return void 0!==i&&!1!==i},Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t}}(jQuery),function(t){AblePlayer.prototype.initDescription=function(){var e,i;return i=(e=new t.Deferred).promise(),"audio"===this.mediaType&&e.resolve(),this.descFile=this.$sources.first().attr("data-desc-src"),void 0!==this.descFile||this.youTubeDescId||this.vimeoDescId?this.hasOpenDesc=!0:this.hasOpenDesc=!1,this.hasOpenDesc&&this.hasClosedDesc?this.prefDescMethod?this.descMethod=this.prefDescMethod:this.descMethod="video":this.hasOpenDesc?this.descMethod="video":this.hasClosedDesc?this.descMethod="text":this.descMethod=null,this.descMethod?1===this.prefDesc?this.descOn=!0:0===this.prefDesc?this.descOn=!1:1===this.defaultStateDescriptions?this.descOn=!0:this.descOn=!1:this.descOn=!1,void 0===this.$descDiv&&this.hasClosedDesc&&"text"===this.descMethod&&this.injectTextDescriptionArea(),this.descOn?("video"===this.descMethod&&(this.usingDescribedVersion()||this.swapDescription()),this.hasClosedDesc&&(this.prefDescVisible?void 0!==this.$descDiv&&(this.$descDiv.show(),this.$descDiv.removeClass("able-clipped")):void 0!==this.$descDiv&&this.$descDiv.addClass("able-clipped"))):"video"===this.descMethod?this.usingDescribedVersion()&&this.swapDescription():"text"===this.descMethod&&void 0!==this.$descDiv&&(this.$descDiv.hide(),this.$descDiv.removeClass("able-clipped")),e.resolve(),i},AblePlayer.prototype.usingDescribedVersion=function(){return"youtube"===this.player?this.activeYouTubeId===this.youTubeDescId:"vimeo"===this.player?this.activeVimeoId===this.vimeoDescId:this.$sources.first().attr("data-desc-src")===this.$sources.first().attr("src")},AblePlayer.prototype.initSpeech=function(e){var i=this;if(null===this.speechEnabled)if(void 0!==this.synth&&this.synth.cancel(),window.speechSynthesis)if(this.synth=window.speechSynthesis,"init"===e)t(document).on("click",(function(){var e=new SpeechSynthesisUtterance("Hi!");e.volume=0,e.rate=10,i.synth.speak(e),e.onstart=function(e){t(document).off("click")},e.onend=function(t){i.getBrowserVoices(),i.descVoices.length&&(i.speechEnabled=!0)}})),this.getBrowserVoices(),this.descVoices.length&&(this.speechEnabled=!0);else{var s=new SpeechSynthesisUtterance("Hi!");s.volume=0,s.rate=10,i.synth.speak(s),s.onstart=function(e){t(document).off("click")},s.onend=function(t){i.getBrowserVoices(),i.descVoices.length&&(i.speechEnabled=!0)}}else this.speechEnabled=!1},AblePlayer.prototype.getBrowserVoices=function(){var t,e,i,s;if(s=this.captionLang?this.captionLang.substring(0,2).toLowerCase():this.lang.substring(0,2).toLowerCase(),this.descVoices=[],t=this.synth.getVoices(),e=this.getDescriptionLangs(),t.length>0){this.descVoices=[];for(var a=0;a<t.length;a++)(i=t[a].lang.substring(0,2).toLowerCase())===s&&-1!==e.indexOf(i)&&this.descVoices.push(t[a]);this.descVoices.length||(this.descVoices=t)}return!1},AblePlayer.prototype.getDescriptionLangs=function(){var t=[];if(this.tracks)for(var e=0;e<this.tracks.length;e++)"descriptions"===this.tracks[e].kind&&t.push(this.tracks[e].language.substring(0,2).toLowerCase());return t},AblePlayer.prototype.setDescriptionVoice=function(){var t,e,i,s,a;if(e=void 0!==this.getCookie().voices?this.getPrefDescVoice():null,this.getBrowserVoices(),this.rebuildDescPrefsForm(),s=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,this.synth&&(t=this.synth.getVoices()).length>0){if(e){a=!1;for(var n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()&&t[n].name===e){i=t[n].name,a=!0;break}}if(!a)for(n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()){i=t[n].name;break}if(this.prefDescVoice=i,this.prefDescVoiceLang=s,this.$voiceSelectField){this.$voiceSelectField.find('option[value="'+this.prefDescVoice+'"]');this.$voiceSelectField.val(this.prefDescVoice)}this.updateCookie("voice")}},AblePlayer.prototype.swapDescription=function(){var e,i,s,a;if(e=this,this.loadingMedia=!1,this.$focusedElement=t(":focus"),this.elapsed>0?this.swapTime=this.elapsed:this.swapTime=0,this.duration>0&&(this.prevDuration=this.duration),this.okToPlay||(this.okToPlay=this.playing),this.descOn?this.showAlert(this.tt.alertDescribedVersion):this.showAlert(this.tt.alertNonDescribedVersion),"html5"===this.player){if(this.swappingSrc=!0,this.paused=!0,this.usingDescribedVersion())for(i=0;i<this.$sources.length;i++)s=this.$sources[i].getAttribute("data-orig-src"),this.$sources[i].getAttribute("type"),s&&this.$sources[i].setAttribute("src",s);else for(i=0;i<this.$sources.length;i++)s=this.$sources[i].getAttribute("src"),a=this.$sources[i].getAttribute("data-desc-src"),this.$sources[i].getAttribute("type"),a&&(this.$sources[i].setAttribute("src",a),this.$sources[i].setAttribute("data-orig-src",s));if(this.recreatingPlayer)return;this.playerCreated&&(this.deletePlayer("swap-desc-html"),this.recreatePlayer().then((function(){e.loadingMedia||(e.media.load(),e.loadingMedia=!0)})))}else if("youtube"===this.player){if(this.usingDescribedVersion()?this.activeYouTubeId=this.youTubeId:this.activeYouTubeId=this.youTubeDescId,void 0!==this.youTubePlayer&&(e.swappingSrc=!0,e.playing?e.youTubePlayer.loadVideoById(e.activeYouTubeId,e.swapTime):e.youTubePlayer.cueVideoById(e.activeYouTubeId,e.swapTime)),this.playerCreated&&this.deletePlayer("swap-desc-youtube"),this.recreatingPlayer)return;this.recreatePlayer().then((function(){}))}else if("vimeo"===this.player){if(this.usingDescribedVersion()?(this.activeVimeoId=this.vimeoId,this.showAlert(this.tt.alertNonDescribedVersion)):(this.activeVimeoId=this.vimeoDescId,this.showAlert(this.tt.alertDescribedVersion)),this.playerCreated&&this.deletePlayer("swap-desc-vimeo"),this.recreatingPlayer)return;this.recreatePlayer().then((function(){e.vimeoPlayer.loadVideo(e.activeVimeoId).then((function(){e.playing?e.vimeoPlayer.setCurrentTime(e.swapTime):e.vimeoPlayer.pause()}))}))}},AblePlayer.prototype.showDescription=function(t){if(this.hasClosedDesc&&!this.swappingSrc&&this.descOn&&"video"!==this.descMethod){var e,i,s,a;0;var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e.push(flattenComponentForDescription(t.children[i]));return e.join("")};for(e=this.selectedDescriptions?this.selectedDescriptions.cues:this.descriptions.length>=1?this.descriptions[0].cues:[],i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s?this.currentDescription!==s&&(this.$status.removeAttr("aria-live"),a=flattenComponentForDescription(e[s].components),"screenreader"===this.descReader?this.$descDiv.html(a):this.speechEnabled?(this.announceDescriptionText("description",a),this.prefDescVisible&&this.$descDiv.html(a).removeAttr("aria-live aria-atomic")):this.$descDiv.html(a),this.prefDescPause&&"text"===this.descMethod&&(this.pauseMedia(),this.pausedForDescription=!0),this.currentDescription=s):(this.$descDiv.html(""),this.currentDescription=-1,this.$status.attr("aria-live","polite"))}},AblePlayer.prototype.syncSpeechToPlaybackRate=function(t){var e;.5===t?e=.7:.75===t?e=.8:1===t?e=1:1.25===t?e=1.1:1.5===t?e=1.2:1.75===t?e=1.5:2===t?e=2:2.25===t?e=2.5:t>=2.5&&(e=3),this.prefDescRate=e},AblePlayer.prototype.announceDescriptionText=function(e,i){var s,a,n,r,o,l,h,p,c;s=this;if(this.speechEnabled||this.initSpeech("desc"),"sample"===e?(a=t("#"+this.mediaId+"_prefDescVoice").val(),o=t("#"+this.mediaId+"_prefDescPitch").val(),l=t("#"+this.mediaId+"_prefDescRate").val(),h=t("#"+this.mediaId+"_prefDescVolume").val()):(a=this.prefDescVoice,o=this.prefDescPitch,l=this.prefDescRate,h=this.prefDescVolume),this.descVoices&&this.descVoices.length>0){if(a)for(n=0;n<this.descVoices.length;n++)if(this.descVoices[n].name==a){r=this.descVoices[n];break}void 0===r&&(r=this.descVoices[0]),(p=new SpeechSynthesisUtterance).voice=r,p.voiceURI="native",p.volume=h,p.rate=l,p.pitch=o,p.text=i,p.lang=this.lang,p.onstart=function(t){},p.onpause=function(t){},p.onend=function(t){this.speakingDescription=!1,c=t.elapsedTime,c>100?(t.elapsedTime/1e3).toFixed(2):t.elapsedTime.toFixed(2),this.debug,"description"===e&&s.prefDescPause&&s.pausedForDescription&&(s.playMedia(),this.pausedForDescription=!1)},p.onerror=function(t){},this.synth.paused&&this.synth.resume(),this.synth.speak(p),this.speakingDescription=!0}}}(jQuery),jQuery,AblePlayer.prototype.isIOS=function(t){var e;return e=navigator.userAgent.toLowerCase(),!!/ipad|iphone|ipod/.exec(e)&&(void 0===t||-1!==e.indexOf("os "+t))},AblePlayer.prototype.browserSupportsVolume=function(){var t;return!this.isIOS()&&((t=new Audio).volume=.9,.9===t.volume)},AblePlayer.prototype.nativeFullscreenSupported=function(){return document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullscreenEnabled||document.msFullscreenEnabled},function(t){AblePlayer.prototype.seekTo=function(t){var e,i=this;(this.seekFromTime=this.media.currentTime,this.seekToTime=t,this.seeking=!0,this.liveUpdatePending=!0,this.speakingDescription&&this.synth.cancel(),"html5"===this.player)?(this.startTime=t,(e=this.media.seekable).length>0&&this.startTime>=e.start(0)&&this.startTime<=e.end(0)&&(this.media.currentTime=this.startTime,this.seekStatus="complete",this.hasSignLanguage&&this.signVideo&&(this.signVideo.currentTime=this.startTime))):"youtube"===this.player?(this.youTubePlayer.seekTo(t,!0),t>0&&void 0!==this.$posterImg&&this.$posterImg.hide()):"vimeo"===this.player&&this.vimeoPlayer.setCurrentTime(t).then((function(){i.elapsed=t,i.refreshControls("timeline")}));this.refreshControls("timeline")},AblePlayer.prototype.getMediaTimes=function(e,i){var s,a,n,r;return r={},a=(s=new t.Deferred).promise(),n=this,void 0!==e&&void 0!==i?(r.duration=e,r.elapsed=i,s.resolve(r)):this.getDuration().then((function(t){r.duration=n.roundDown(t,6),n.getElapsed().then((function(t){r.elapsed=n.roundDown(t,6),s.resolve(r)}))})),a},AblePlayer.prototype.getDuration=function(){var e,i,s;(i=(e=new t.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getDuration().then((function(t){void 0===t||isNaN(t)||-1===t?e.resolve(0):e.resolve(t)})):e.resolve(0):("html5"===this.player?s=this.media.duration:"youtube"===this.player&&(s=this.youTubePlayerReady?this.duration>0?this.duration:this.youTubePlayer.getDuration():0),void 0===s||isNaN(s)||-1===s?e.resolve(0):e.resolve(s));return i},AblePlayer.prototype.getElapsed=function(){var e,i,s;(i=(e=new t.Deferred).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getCurrentTime().then((function(t){void 0===t||isNaN(t)||-1===t?e.resolve(0):e.resolve(t)})):e.resolve(0):("html5"===this.player?s=this.media.currentTime:"youtube"===this.player&&(s=this.youTubePlayerReady?this.youTubePlayer.getCurrentTime():0),void 0===s||isNaN(s)||-1===s?e.resolve(0):e.resolve(s));return i},AblePlayer.prototype.getPlayerState=function(){var e,i,s;if(i=(e=new t.Deferred).promise(),s=this,"html5"===this.player)this.media.ended?e.resolve("ended"):this.media.paused?e.resolve("paused"):4!==this.media.readyState?e.resolve("buffering"):e.resolve("playing");else if("youtube"===this.player&&this.youTubePlayerReady){var a=this.youTubePlayer.getPlayerState();-1===a||5===a?e.resolve("stopped"):0===a?e.resolve("ended"):1===a?e.resolve("playing"):2===a?e.resolve("paused"):3===a&&e.resolve("buffering")}else"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.getPaused().then((function(t){t?e.resolve("paused"):s.vimeoPlayer.getEnded().then((function(t){t?e.resolve("ended"):e.resolve("playing")}))}));return i},AblePlayer.prototype.isPlaybackRateSupported=function(){return"html5"===this.player?!!this.media.playbackRate:"youtube"===this.player?!!this.youTubePlayerReady&&this.youTubePlayer.getAvailablePlaybackRates().length>1:"vimeo"===this.player?this.vimeoSupportsPlaybackRateChange:void 0},AblePlayer.prototype.setPlaybackRate=function(t){t=Math.max(.5,t),this.hasClosedDesc&&"text"===this.descMethod&&this.syncSpeechToPlaybackRate(t),"html5"===this.player?this.media.playbackRate=t:"youtube"===this.player?this.youTubePlayer.setPlaybackRate(t):"vimeo"===this.player&&this.vimeoPlayer.setPlaybackRate(t),this.hasSignLanguage&&this.signVideo&&(this.signVideo.playbackRate=t),this.playbackRate=t,this.$speed.text(this.tt.speed+": "+t.toFixed(2).toString()+"x")},AblePlayer.prototype.getPlaybackRate=function(){return"html5"===this.player?this.media.playbackRate:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getPlaybackRate():void 0},AblePlayer.prototype.isPaused=function(){if("vimeo"===this.player)return!this.playing;this.getPlayerState().then((function(t){return"paused"===t||"stopped"===t||"ended"===t}))},AblePlayer.prototype.pauseMedia=function(){"html5"===this.player?(this.media.pause(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.pause(!0)):"youtube"===this.player?this.youTubePlayer.pauseVideo():"vimeo"===this.player&&this.vimeoPlayer.pause()},AblePlayer.prototype.playMedia=function(){"html5"===this.player?(this.media.play(!0),this.hasSignLanguage&&this.signVideo&&this.signVideo.play(!0)):"youtube"===this.player?(this.youTubePlayer.playVideo(),void 0!==this.$posterImg&&this.$posterImg.hide(),this.stoppingYouTube=!1):"vimeo"===this.player&&this.vimeoPlayer.play(),this.startedPlaying=!0,this.hideControls&&(this.hidingControls=!0,this.invokeHideControlsTimeout())},AblePlayer.prototype.fadeControls=function(t){"out"==t?(this.$mediaContainer.height()+this.$playerDiv.height(),this.$playerDiv.fadeTo(2e3,0,(function(){}))):"in"==t&&this.$playerDiv.fadeTo(100,1)},AblePlayer.prototype.invokeHideControlsTimeout=function(){var t=this;this.hideControlsTimeout=window.setTimeout((function(){void 0!==t.playing&&!0===t.playing&&t.hideControls&&(t.fadeControls("out"),t.controlsHidden=!0)}),5e3),this.hideControlsTimeoutStatus="active"},AblePlayer.prototype.refreshControls=function(e,i,s){var a,n,r,o,l,h,p,c,u,d,f,g,m,v,y;e="init",a=this,this.swappingSrc&&this.playing||void 0!==this.duration&&(this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.chapterElapsed=this.getChapterElapsed()),!1===this.useFixedSeekInterval&&!1===this.seekIntervalCalculated&&this.duration>0&&this.setSeekInterval(),this.seekBar&&(this.useChapterTimes?(n=this.selectedChapters.cues.length-1,this.selectedChapters.cues[n]==this.currentChapter&&this.currentChapter.end!==this.duration?this.seekBar.setDuration(this.duration-this.currentChapter.start):this.seekBar.setDuration(this.chapterDuration)):void 0===this.duration||isNaN(this.duration)||-1===this.duration||this.seekBar.setDuration(this.duration),this.seekBar.tracking||(o=this.liveUpdatePending||this.seekBar.seekHead.is(t(document.activeElement)),this.liveUpdatePending=!1,this.useChapterTimes?this.seekBar.setPosition(this.chapterElapsed,o):this.seekBar.setPosition(this.elapsed,o)),r=this.seekBar.tracking?this.seekBar.lastTrackPosition:this.useChapterTimes?this.chapterElapsed:this.elapsed),void 0!==this.$durationContainer&&(this.useChapterTimes?this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.chapterDuration)):this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.duration))),void 0!==this.$elapsedTimeContainer&&this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(r)),"legacy"===this.skin&&this.seekBar&&(p=0,u=(c=this.seekBar.wrapperDiv.parent().prev("div.able-left-controls")).next("div.able-right-controls"),c.children().each((function(){"button"==t(this).attr("role")&&(p+=t(this).outerWidth(!0))})),u.children().each((function(){"button"==t(this).attr("role")&&(p+=t(this).outerWidth(!0))})),d=this.fullscreen?t(window).width()-p:this.$ableWrapper.width()-p-5,Math.abs(d-this.seekBar.getWidth())>5&&this.seekBar.setWidth(d)),"html5"===this.player?this.media.buffered.length>0&&(g=this.media.buffered.end(0),this.useChapterTimes?(g>this.chapterDuration&&(g=this.chapterDuration),this.seekBar&&this.seekBar.setBuffered(g/this.chapterDuration)):this.seekBar&&(isNaN(g)||this.seekBar.setBuffered(g/i))):"youtube"===this.player?this.seekBar&&this.youTubePlayerReady&&this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()):this.player,this.$descButton&&(this.descOn?(this.$descButton.removeClass("buttonOff").attr("aria-label",this.tt.turnOffDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOffDescriptions)):(this.$descButton.addClass("buttonOff").attr("aria-label",this.tt.turnOnDescriptions),this.$descButton.find("span.able-clipped").text(this.tt.turnOnDescriptions))),this.$ccButton&&(f=this.captions.length,this.captionsOn?(this.$ccButton.removeClass("buttonOff"),this.$ccButton.attr("aria-pressed","true"),1===f&&(this.$ccButton.attr("aria-label",this.tt.hideCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.hideCaptions))):(this.$ccButton.addClass("buttonOff"),this.$ccButton.attr("aria-pressed","false"),1===f&&(this.$ccButton.attr("aria-label",this.tt.showCaptions),this.$ccButton.find("span.able-clipped").text(this.tt.showCaptions))),f>1&&(this.$ccButton.attr({"aria-label":this.tt.captions,"aria-haspopup":"true","aria-controls":this.mediaId+"-captions-menu"}),this.$ccButton.find("span.able-clipped").text(this.tt.captions))),this.$fullscreenButton&&(this.fullscreen?(this.$fullscreenButton.attr("aria-label",this.tt.exitFullscreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-expand").addClass("icon-fullscreen-collapse"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullscreen)):"svg"===this.iconType?(y=this.getSvgData("fullscreen-collapse"),this.$fullscreenButton.find("svg").attr("viewBox",y[0]),this.$fullscreenButton.find("path").attr("d",y[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.exitFullscreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenCollapseButtonImg)):(this.$fullscreenButton.attr("aria-label",this.tt.enterFullscreen),"font"===this.iconType?(this.$fullscreenButton.find("span").first().removeClass("icon-fullscreen-collapse").addClass("icon-fullscreen-expand"),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullscreen)):"svg"===this.iconType?(y=this.getSvgData("fullscreen-expand"),this.$fullscreenButton.find("svg").attr("viewBox",y[0]),this.$fullscreenButton.find("path").attr("d",y[1]),this.$fullscreenButton.find("span.able-clipped").text(this.tt.enterFullscreen)):this.$fullscreenButton.find("img").attr("src",this.fullscreenExpandButtonImg))),void 0!==this.$bigPlayButton&&void 0!==this.seekBar&&(this.paused&&!this.seekBar.tracking?(this.hideBigPlayButton||(this.$bigPlayButton.show(),this.$bigPlayButton.attr("aria-hidden","false")),this.fullscreen?(this.$bigPlayButton.width(t(window).width()),this.$bigPlayButton.height(t(window).height())):(this.$bigPlayButton.width(this.$mediaContainer.width()),this.$bigPlayButton.height(this.$mediaContainer.height()))):(this.$bigPlayButton.hide(),this.$bigPlayButton.attr("aria-hidden","true"))),this.transcriptType&&(1===this.prefAutoScrollTranscript?(this.autoScrollTranscript=!0,this.$autoScrollTranscriptCheckbox.prop("checked",!0)):(this.autoScrollTranscript=!1,this.$autoScrollTranscriptCheckbox.prop("checked",!1)),this.autoScrollTranscript&&this.currentHighlight&&(m=Math.floor(this.$transcriptDiv.scrollTop()+t(this.currentHighlight).position().top-this.$transcriptDiv.height()/2+t(this.currentHighlight).height()/2))!==Math.floor(this.$transcriptDiv.scrollTop())&&(this.scrollingTranscript=!0,this.movingHighlight&&(this.$transcriptDiv.scrollTop(m),this.movingHighlight=!1))),this.$chaptersButton&&this.$chaptersButton.attr({"aria-label":this.tt.chapters,"aria-haspopup":"true","aria-controls":this.mediaId+"-chapters-menu"}),l={stopped:this.tt.statusStopped,paused:this.tt.statusPaused,playing:this.tt.statusPlaying,buffering:this.tt.statusBuffering,ended:this.tt.statusEnd},this.stoppingYouTube?(this.$status.text()!==this.tt.statusStopped&&this.$status.text(this.tt.statusStopped),this.$playpauseButton.find("span").first().hasClass("icon-pause")&&("font"===this.iconType?(this.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):"svg"===this.iconType?(y=this.getSvgData("play"),this.$playpauseButton.find("svg").attr("viewBox",y[0]),this.$playpauseButton.find("path").attr("d",y[1]),this.$playpauseButton.find("span.able-clipped").text(this.tt.play)):this.$playpauseButton.find("img").attr("src",this.playButtonImg))):void 0!==this.$status&&void 0!==this.seekBar&&this.getPlayerState().then((function(t){a.$status.text()===l[t]||a.seekBar.tracking?(a.statusDebounceStart=null,a.debouncingStatus=!1,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.swappingSrc?a.debouncingStatus||(a.statusMessageThreshold=2e3):a.debouncingStatus||(a.statusMessageThreshold=250),h=(new Date).getTime(),a.statusDebounceStart?h-a.statusDebounceStart>a.statusMessageThreshold&&(a.$status.text(l[t]),a.statusDebounceStart=null,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.statusDebounceStart=h,a.debouncingStatus=!0,a.statusTimeout=setTimeout((function(){a.debouncingStatus=!1,a.refreshControls(e)}),a.statusMessageThreshold))),a.seekBar.tracking||a.stoppingYouTube||("paused"===t||"stopped"===t||"ended"===t?(a.$playpauseButton.attr("aria-label",a.tt.play),"font"===a.iconType?(a.$playpauseButton.find("span").first().removeClass("icon-pause").addClass("icon-play"),a.$playpauseButton.find("span.able-clipped").text(a.tt.play)):"svg"===a.iconType?(y=a.getSvgData("play"),a.$playpauseButton.find("svg").attr("viewBox",y[0]),a.$playpauseButton.find("path").attr("d",y[1]),a.$playpauseButton.find("span.able-clipped").text(a.tt.play)):a.$playpauseButton.find("img").attr("src",a.playButtonImg)):(a.$playpauseButton.attr("aria-label",a.tt.pause),"font"===a.iconType?(a.$playpauseButton.find("span").first().removeClass("icon-play").addClass("icon-pause"),a.$playpauseButton.find("span.able-clipped").text(a.tt.pause)):"svg"===a.iconType?(y=a.getSvgData("pause"),a.$playpauseButton.find("svg").attr("viewBox",y[0]),a.$playpauseButton.find("path").attr("d",y[1]),a.$playpauseButton.find("span.able-clipped").text(a.tt.pause)):a.$playpauseButton.find("img").attr("src",a.pauseButtonImg)))})),this.fullscreen||(v=this.$statusBarDiv.height(),this.$statusBarDiv.find("span.able-speed").height()>v+5?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):(this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1),this.$statusBarDiv.width()<300?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1))))},AblePlayer.prototype.getHiddenWidth=function(t){var e=t.clone().appendTo("body"),i=e.outerWidth();return e.remove(),i},AblePlayer.prototype.handlePlay=function(t){this.paused?(this.okToPlay=!0,this.playMedia(),this.synth.paused&&this.synth.resume()):(this.okToPlay=!1,this.pauseMedia(),this.speakingDescription&&this.synth.pause()),null===this.speechEnabled&&this.initSpeech("play")},AblePlayer.prototype.handleRestart=function(){this.speakingDescription&&this.synth.cancel(),this.seekTo(0)},AblePlayer.prototype.handlePrevTrack=function(){0===this.playlistIndex?this.playlistIndex=this.$playlist.length-1:this.playlistIndex--,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleNextTrack=function(){this.playlistIndex===this.$playlist.length-1?this.playlistIndex=0:this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleRewind=function(){var t;t=this.elapsed-this.seekInterval,this.useChapterTimes?t<this.currentChapter.start&&(t=this.currentChapter.start):t<0&&(t=0),this.seekTo(t)},AblePlayer.prototype.handleFastForward=function(){var t,e;e=this.chapters.length-1,t=this.elapsed+this.seekInterval,this.useChapterTimes?this.chapters[e]==this.currentChapter?(t>this.duration||t>this.currentChapter.end||this.duration%t<this.seekInterval)&&(t=Math.min(this.duration,this.currentChapter.end)):t>this.currentChapter.end&&(t=this.currentChapter.end):t>this.duration&&(t=this.duration),this.seekTo(t)},AblePlayer.prototype.handleRateIncrease=function(){this.changeRate(1)},AblePlayer.prototype.handleRateDecrease=function(){this.changeRate(-1)},AblePlayer.prototype.changeRate=function(t){var e,i,s,a;"html5"===this.player?this.setPlaybackRate(this.getPlaybackRate()+.25t):"youtube"===this.player?this.youTubePlayerReady&&(e=this.youTubePlayer.getAvailablePlaybackRates(),i=this.getPlaybackRate(),-1===(s=e.indexOf(i))||(s+=t)<e.length&&s>=0&&this.setPlaybackRate(e[s])):"vimeo"===this.player&&(1===t?a=this.vimeoPlaybackRate+.5<=2?this.vimeoPlaybackRate+.5:2:-1===t&&(a=this.vimeoPlaybackRate-.5>=.5?this.vimeoPlaybackRate-.5:.5),this.setPlaybackRate(a))},AblePlayer.prototype.handleCaptionToggle=function(){var t,e=this;if(this.hidingPopup)return this.hidingPopup=!1,!1;if(1===(t=this.captions.length?this.captions:[]).length){if(!0===this.captionsOn)this.captionsOn=!1,this.prefCaptions=0,this.$ccButton.attr("aria-pressed","false"),this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.unloadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.disableTextTrack():this.$captionsWrapper.hide();else{this.captionsOn=!0,this.prefCaptions=1,this.$ccButton.attr("aria-pressed","true"),this.updateCookie("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.loadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then((function(t){})).catch((function(t){t.name})):this.$captionsWrapper.show();for(var i=0;i<t.length;i++)!0===t[i].def&&(this.selectedCaptions=t[i]);this.selectedCaptions=this.captions[0],this.descriptions.length>=0&&(this.selectedDescriptions=this.descriptions[0])}this.refreshControls("captions")}else this.captionsPopup&&this.captionsPopup.is(":visible")?(this.captionsPopup.hide(),this.hidingPopup=!1,this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)):(this.closePopups(),this.captionsPopup&&(this.captionsPopup.show(),this.$ccButton.attr("aria-expanded","true"),setTimeout((function(){e.captionsPopup.css("top",e.$ccButton.position().top-e.captionsPopup.outerHeight()),e.captionsPopup.css("left",e.$ccButton.position().left),e.captionsPopup.find("li").removeClass("able-focus"),e.captionsPopup.find("li").first().focus().addClass("able-focus")}),50)))},AblePlayer.prototype.waitThenFocus=function(t,e){setTimeout((function(){t.focus()}),null==e?50:e)},AblePlayer.prototype.handleChapters=function(){if(this.hidingPopup)return this.hidingPopup=!1,!1;this.chaptersPopup.is(":visible")?(this.chaptersPopup.hide(),this.hidingPopup=!1,this.$chaptersButton.attr("aria-expanded","false").focus()):(this.closePopups(),this.chaptersPopup.show(),this.$chaptersButton.attr("aria-expanded","true"),this.chaptersPopup.css("top",this.$chaptersButton.position().top-this.chaptersPopup.outerHeight()),this.chaptersPopup.css("left",this.$chaptersButton.position().left),this.chaptersPopup.find("li").removeClass("able-focus"),this.chaptersPopup.find('li[aria-checked="true"]').length?this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass("able-focus"):this.chaptersPopup.find("li").first().addClass("able-focus").attr("aria-checked","true").focus())},AblePlayer.prototype.handleDescriptionToggle=function(){this.descOn=!this.descOn,this.prefDesc=+this.descOn,this.updateCookie("prefDesc"),void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")||this.$descDiv.hide()),this.initDescription(),this.refreshControls("descriptions")},AblePlayer.prototype.handlePrefsClick=function(t){var e,i,s,a;if(e=this,null===this.speechEnabled&&this.initSpeech("prefs"),this.hidingPopup)return this.hidingPopup=!1,!1;this.prefsPopup.is(":visible")?(this.prefsPopup.hide(),this.$prefsButton.attr("aria-expanded","false"),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.showingPrefsDialog||this.$prefsButton.focus(),setTimeout((function(){e.hidingPopup=!1}),100)):(this.closePopups(),this.prefsPopup.show(),this.$prefsButton.attr("aria-expanded","true"),this.$prefsButton.focus(),setTimeout((function(){i=e.$prefsButton.position(),s=e.$ableDiv.width()-5,a=s-e.prefsPopup.width(),e.prefsPopup.css("top",i.top-e.prefsPopup.outerHeight()),e.prefsPopup.css("left",a),e.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","0"),e.prefsPopup.find("li").first().focus().addClass("able-focus")}),50))},AblePlayer.prototype.handleHelpClick=function(){this.setFullscreen(!1),this.helpDialog.show()},AblePlayer.prototype.handleTranscriptToggle=function(){var t=this;this.$transcriptDiv.is(":visible")?(this.$transcriptArea.hide(),this.$transcriptButton.addClass("buttonOff").attr("aria-label",this.tt.showTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.showTranscript),this.prefTranscript=0,this.$transcriptButton.focus().addClass("able-focus"),setTimeout((function(){t.closingTranscript=!1}),100)):(this.positionDraggableWindow("transcript"),this.$transcriptArea.show(),this.$transcriptPopup.hide(),this.$transcriptButton.removeClass("buttonOff").attr("aria-label",this.tt.hideTranscript),this.$transcriptButton.find("span.able-clipped").text(this.tt.hideTranscript),this.prefTranscript=1,this.focusNotClick=!0,this.$transcriptArea.find("button").first().focus(),setTimeout((function(){t.focusNotClick=!1}),100)),this.updateCookie("prefTranscript")},AblePlayer.prototype.handleSignToggle=function(){var t=this;this.$signWindow.is(":visible")?(this.$signWindow.hide(),this.$signButton.addClass("buttonOff").attr("aria-label",this.tt.showSign),this.$signButton.find("span.able-clipped").text(this.tt.showSign),this.prefSign=0,this.$signButton.focus().addClass("able-focus"),setTimeout((function(){t.closingSign=!1}),100)):(this.positionDraggableWindow("sign"),this.$signWindow.show(),this.$signPopup.hide(),this.$signButton.removeClass("buttonOff").attr("aria-label",this.tt.hideSign),this.$signButton.find("span.able-clipped").text(this.tt.hideSign),this.prefSign=1,this.focusNotClick=!0,this.$signWindow.find("button").first().focus(),setTimeout((function(){t.focusNotClick=!1}),100)),this.updateCookie("prefSign")},AblePlayer.prototype.isFullscreen=function(){return this.nativeFullscreenSupported()?!!(document.fullscreenElement||document.webkitFullscreenElement||document.webkitCurrentFullscreenElement||document.mozFullscreenElement||document.msFullscreenElement):!!this.modalFullscreenActive},AblePlayer.prototype.setFullscreen=function(e){if(this.fullscreen!=e){var i=this,s=this.$ableWrapper,a=s[0];if(this.nativeFullscreenSupported())e?(a.requestFullscreen?a.requestFullscreen():a.webkitRequestFullscreen?a.webkitRequestFullscreen():a.mozRequestFullscreen?a.mozRequestFullscreen():a.msRequestFullscreen&&a.msRequestFullscreen(),this.fullscreen=!0):(this.restoringAfterFullscreen=!0,document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullscreen?document.webkitCancelFullscreen():document.mozCancelFullscreen?document.mozCancelFullscreen():document.msExitFullscreen&&document.msExitFullscreen(),this.fullscreen=!1);else{if(!this.fullscreenDialog){var n=t("<div>"),r=t("<p>",{class:"able-screenreader-alert"}).text(this.tt.fullscreen);n.append(r),this.fullscreenDialog=new AccessibleDialog(n,this.$fullscreenButton,"dialog",!0,"Fullscreen video player",r,this.tt.exitFullscreen,"100%",!0,(function(){i.handleFullscreenToggle()})),t("body").append(n)}var o=this.paused;if(e){this.modalFullscreenActive=!0,this.fullscreenDialog.show(),this.$modalFullscreenPlaceholder=t('<div class="placeholder">'),this.$modalFullscreenPlaceholder.insertAfter(s),s.appendTo(this.fullscreenDialog.modal),s===this.$ableColumnLeft&&s.width("100%");t(window).height(),this.$playerDiv.height();void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")||this.$descDiv.height())}else this.modalFullscreenActive=!1,s===this.$ableColumnLeft&&s.width("50%"),s.insertAfter(this.$modalFullscreenPlaceholder),this.$modalFullscreenPlaceholder.remove(),this.fullscreenDialog.hide();!o&&this.paused&&this.playMedia()}t(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange",(function(t){i.fullscreen?i.clickedFullscreenButton||(i.fullscreen=!1,i.restoringAfterFullscreen=!0):i.restoringAfterFullscreen=!0,i.resizePlayer(),i.refreshControls("fullscreen"),setTimeout((function(){i.clickedFullscreenButton=!1,i.restoringAfterFullscreen=!1}),1e3)}))}},AblePlayer.prototype.handleFullscreenToggle=function(){var t=this.paused;this.setFullscreen(!this.fullscreen),t?this.pauseMedia():t||this.playMedia(),this.fullscreen?(this.hideControls=!0,this.playing&&(this.fadeControls("out"),this.controlsHidden=!0)):(this.hideControls=this.hideControlsOriginal,this.hideControls||(this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear")))},AblePlayer.prototype.handleTranscriptLockToggle=function(t){this.autoScrollTranscript=t,this.prefAutoScrollTranscript=+t,this.updateCookie("prefAutoScrollTranscript"),this.refreshControls("transcript")},AblePlayer.prototype.showTooltip=function(t){t.is(":animated")?t.stop(!0,!0).show():t.stop().show()},AblePlayer.prototype.showAlert=function(t,e){var i,s,a,n;"transcript"===e?(i=this.$transcriptAlert,s=this.$transcriptArea):"sign"===e?(i=this.$signAlert,s=this.$signWindow):i="screenreader"===e?this.$srAlertBox:this.$alertBox,i.text(t).show(),"transcript"==e||"sign"===e?(a=s.width()>i.width()?s.width()/2-i.width()/2:10,"sign"===e?n=s.height()/32:"transcript"===e&&(n=this.$transcriptToolbar.height()+30),i.css({top:n+"px",left:a+"px"})):"screenreader"!==e&&i.css({left:this.$playerDiv.width()/2-i.width()/2}),"screenreader"!==e&&setTimeout((function(){i.fadeOut(300)}),3e3)},AblePlayer.prototype.showedAlert=function(t){return"transcript"===t?!!this.showedTranscriptAlert:"sign"===t&&!!this.showedSignAlert},AblePlayer.prototype.resizePlayer=function(e,i){var s,a,n,r,o;"audio"!==this.mediaType&&(void 0!==e&&void 0!==i?(this.aspectRatio=i/e,this.playerWidth?(a=this.playerWidth,this.playerHeight?n=this.playerHeight:(n=Math.round(athis.aspectRatio),this.playerHeight=n)):(a="html5"===this.player?t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio))):this.fullscreen?(this.$ableWrapper.addClass("fullscreen"),a=t(window).width(),n=t(window).height()-this.$playerDiv.outerHeight()-5,this.positionCaptions("overlay")):(this.$ableWrapper.removeClass("fullscreen"),a="html5"===this.player?this.playerWidth?this.playerWidth:t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio),this.positionCaptions(this.prefCaptionsPosition)),this.debug,"youtube"===this.player||"vimeo"===this.player?(r=this.$ableWrapper.find("iframe"),"youtube"===this.player&&this.youTubePlayer?this.youTubePlayer.setSize(a,n):r.attr({width:a,height:n}),this.playerWidth&&this.playerHeight&&(this.fullscreen?r.css({"max-width":"","max-height":""}):r.css({"max-width":this.playerWidth+"px","max-height":this.playerHeight+"px"}))):"html5"===this.player&&(this.fullscreen?(this.$media.attr({width:a,height:n}),this.$ableWrapper.css({width:a,height:n})):(this.$media.removeAttr("width height"),this.$ableWrapper.css({width:a+"px",height:"auto"}))),void 0!==this.$captionsDiv&&(s=parseInt(this.prefCaptionsSize,10),this.fullscreen?s=s/100+"vw":s+="%",this.$captionsDiv.css({"font-size":s})),"video"===this.mediaType&&(o=2Math.round(this.$mediaContainer.height()/3),this.$alertBox.css({top:o+"px"})),this.refreshControls())},AblePlayer.prototype.retrieveOffscreenWindow=function(t,e,i){var s,a,n,r,o,l,h,p;"transcript"==t?s=this.$transcriptArea:"sign"==t&&(s=this.$signWindow),l=s.width(),p=s.height(),n=(a=s.position()).top,o=(r=a.left)+l,h=n+p,n<0&&(n=10,s.css("top",n)),r<0&&(r=10,s.css("left",r)),o>e&&(r=e-20-l,s.css("left",r)),h>i&&(n=i-10-p,s.css("top",n))},AblePlayer.prototype.getHighestZIndex=function(){var e,i;return e=0,t("body ").not(".able-modal-dialog,.able-modal-dialog ,.able-modal-overlay,.able-modal-overlay ,.able-sign-window,.able-transcript-area").each((function(){i=t(this).css("z-index"),Number.isInteger(+i)&&parseInt(i)>e&&(e=parseInt(i))})),e},AblePlayer.prototype.updateZIndex=function(t){var e,i,s,a,n,r;if(e=8e3,i=7e3,this.getHighestZIndex(),void 0===this.$transcriptArea||void 0===this.$signWindow)return void 0!==this.$transcriptArea?(s=parseInt(this.$transcriptArea.css("z-index")))>i&&this.$transcriptArea.css("z-index",i):void 0!==this.$signWindow&&(a=parseInt(this.$signWindow.css("z-index")))>e&&this.$signWindow.css("z-index",e),!1;if((s=parseInt(this.$transcriptArea.css("z-index")))===(a=parseInt(this.$signWindow.css("z-index"))))n=e,r=i;else if(s>a){if("transcript"===t)return!1;n=s,r=a}else{if("sign"===t)return!1;n=a,r=s}"transcript"===t?(this.$transcriptArea.css("z-index",n),this.$signWindow.css("z-index",r)):"sign"===t&&(this.$signWindow.css("z-index",n),this.$transcriptArea.css("z-index",r))},AblePlayer.prototype.syncTrackLanguages=function(t,e){var i,s,a,n,r;for(i=0;i<this.captions.length;i++)this.captions[i].language===e&&(s=this.captions[i]);for(i=0;i<this.chapters.length;i++)this.chapters[i].language===e&&(n=this.chapters[i]);for(i=0;i<this.descriptions.length;i++)this.descriptions[i].language===e&&(a=this.descriptions[i]);for(i=0;i<this.meta.length;i++)this.meta[i].language===e&&(r=this.meta[i]);if(this.transcriptLang=e,"init"===t||"captions"===t?(this.captionLang=e,this.selectedCaptions=s,this.selectedChapters=n,this.selectedDescriptions=a,this.selectedMeta=r,this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a,this.updateChaptersList()):"transcript"===t&&(this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a),this.selectedDescriptions&&(this.setDescriptionVoice(),this.$sampleDescDiv&&this.sampleText))for(i=0;i<this.sampleText.length;i++)this.sampleText[i].lang===this.selectedDescriptions.language&&(this.currentSampleText=this.sampleText[i].text,this.$sampleDescDiv.html(this.currentSampleText));this.updateTranscript()}}(jQuery),function(t){AblePlayer.prototype.updateCaption=function(t){this.usingYouTubeCaptions||this.usingVimeoCaptions||void 0===this.$captionsWrapper||(this.captionsOn?(this.$captionsWrapper.show(),void 0!==t&&this.showCaptions(t)):this.$captionsWrapper&&(this.$captionsWrapper.hide(),this.prefCaptions=0))},AblePlayer.prototype.updateCaptionsMenu=function(t){this.captionsPopup.find("li").attr("aria-checked","false"),void 0===t?this.captionsPopup.find("li").last().attr("aria-checked","true"):this.captionsPopup.find("li[lang="+t+"]").attr("aria-checked","true")},AblePlayer.prototype.getCaptionClickFunction=function(t){var e=this;return function(){e.selectedCaptions=t,e.captionLang=t.language,e.currentCaption=-1,e.usingYouTubeCaptions?e.captionsOn?e.youTubePlayer.getOptions("captions")&&e.startedPlaying?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):e.captionLangPending=e.captionLang:e.youTubePlayer.getOptions("captions")?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):(e.youTubePlayer.loadModule("captions"),e.captionLangPending=e.captionLang):e.usingVimeoCaptions?e.vimeoPlayer.enableTextTrack(e.captionLang).then((function(t){})).catch((function(t){t.name})):(e.syncTrackLanguages("captions",e.captionLang),e.swappingSrc||(e.updateCaption(e.elapsed),e.showDescription(e.elapsed))),e.captionsOn=!0,e.hidingPopup=!0,e.captionsPopup.hide(),e.$ccButton.attr("aria-expanded","false"),"audio"===e.mediaType&&e.$captionsContainer.removeClass("captions-off"),setTimeout((function(){e.hidingPopup=!1}),100),e.updateCaptionsMenu(e.captionLang),e.waitThenFocus(e.$ccButton),e.prefCaptions=1,e.updateCookie("prefCaptions"),e.refreshControls("captions")}},AblePlayer.prototype.getCaptionOffFunction=function(){var t=this;return function(){"youtube"==t.player?t.youTubePlayer.unloadModule("captions"):t.usingVimeoCaptions&&t.vimeoPlayer.disableTextTrack(),t.captionsOn=!1,t.currentCaption=-1,"audio"===t.mediaType&&t.$captionsContainer.addClass("captions-off"),t.hidingPopup=!0,t.captionsPopup.hide(),t.$ccButton.attr("aria-expanded","false"),setTimeout((function(){t.hidingPopup=!1}),100),t.updateCaptionsMenu(),t.waitThenFocus(t.$ccButton),t.prefCaptions=0,t.updateCookie("prefCaptions"),this.swappingSrc||(t.refreshControls("captions"),t.updateCaption())}},AblePlayer.prototype.showCaptions=function(t){var e,i,s,a;for(a=this.selectedCaptions.cues.length?this.selectedCaptions.cues:this.captions.length>=1?this.captions[0].cues:[],e=0;e<a.length;e++)if(a[e].start<=t&&a[e].end>t){i=e;break}void 0!==i?this.currentCaption!==i&&(s=this.flattenCueForCaption(a[i]).replace(/\n/g,"<br>"),this.$captionsDiv.html(s),this.currentCaption=i,0===s.length?this.$captionsDiv.css("display","none"):this.$captionsDiv.css("display","inline-block")):(this.$captionsDiv.html("").css("display","none"),this.currentCaption=-1)},AblePlayer.prototype.flattenCueForCaption=function(t){var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("("+t.value+")"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else if("i"===t.type){for(i.push("<em>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</em>")}else if("b"===t.type){for(i.push("<strong>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</strong>")}else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")};if(void 0!==t.components)for(var i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")},AblePlayer.prototype.getCaptionsOptions=function(t){var e=[];switch(t){case"prefCaptionsFont":e[0]=["serif",this.tt.serif],e[1]=["sans-serif",this.tt.sans],e[2]=["cursive",this.tt.cursive],e[3]=["fantasy",this.tt.fantasy],e[4]=["monospace",this.tt.monospace];break;case"prefCaptionsColor":case"prefCaptionsBGColor":e[0]=["white",this.tt.white],e[1]=["yellow",this.tt.yellow],e[2]=["green",this.tt.green],e[3]=["cyan",this.tt.cyan],e[4]=["blue",this.tt.blue],e[5]=["magenta",this.tt.magenta],e[6]=["red",this.tt.red],e[7]=["black",this.tt.black];break;case"prefCaptionsSize":e[0]="75%",e[1]="100%",e[2]="125%",e[3]="150%",e[4]="200%";break;case"prefCaptionsOpacity":e[0]="0%",e[1]="25%",e[2]="50%",e[3]="75%",e[4]="100%";break;case"prefCaptionsStyle":e[0]=this.tt.captionsStylePopOn,e[1]=this.tt.captionsStyleRollUp;break;case"prefCaptionsPosition":e[0]="overlay",e[1]="below"}return e},AblePlayer.prototype.translatePrefs=function(t,e,i){if("youtube"==i&&"size"===t)switch(e){case"75%":return-1;case"100%":return 0;case"125%":return 1;case"150%":return 2;case"200%":return 3}return!1},AblePlayer.prototype.stylizeCaptions=function(e,i){var s,a,n;void 0!==e&&("prefCaptionsPosition"==i?this.positionCaptions():void 0!==i?("prefCaptionsFont"===i?s="font-family":"prefCaptionsSize"===i?s="font-size":"prefCaptionsColor"===i?s="color":"prefCaptionsBGColor"===i?s="background-color":"prefCaptionsOpacity"===i&&(s="opacity"),a="prefCaptionsOpacity"===i?parseFloat(t("#"+this.mediaId+"_"+i).val())/100:t("#"+this.mediaId+"_"+i).val(),e.css(s,a)):(n=parseFloat(this.prefCaptionsOpacity)/100,e.css({"font-family":this.prefCaptionsFont,color:this.prefCaptionsColor,"background-color":this.prefCaptionsBGColor,opacity:n}),e===this.$captionsDiv&&void 0!==this.$captionsDiv&&this.$captionsDiv.css({"font-size":this.prefCaptionsSize}),"below"===this.prefCaptionsPosition?void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"}):"overlay"===this.prefCaptionsPosition&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":"transparent",opacity:""}),this.positionCaptions()))},AblePlayer.prototype.positionCaptions=function(t){void 0===t&&(t=this.prefCaptionsPosition),void 0!==this.$captionsWrapper&&("below"==t?(this.$captionsWrapper.removeClass("able-captions-overlay").addClass("able-captions-below"),this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"})):(this.$captionsWrapper.removeClass("able-captions-below").addClass("able-captions-overlay"),this.$captionsWrapper.css({"background-color":"transparent",opacity:""})))}}(jQuery),function(t){AblePlayer.prototype.populateChaptersDiv=function(){var e,i,s;t("#"+this.chaptersDivLocation)&&(this.$chaptersDiv=t("#"+this.chaptersDivLocation),this.$chaptersDiv.addClass("able-chapters-div"),this.$chaptersDiv.empty(),this.chaptersTitle&&(e="h"+this.getNextHeadingLevel(this.$chaptersDiv).toString(),i=this.mediaId+"-chapters-heading",s=t("<"+e+">",{class:"able-chapters-heading",id:i}).text(this.chaptersTitle),this.$chaptersDiv.append(s)),this.$chaptersNav=t("<nav>"),this.chaptersTitle?this.$chaptersNav.attr("aria-labelledby",i):this.$chaptersNav.attr("aria-label",this.tt.chapters),this.$chaptersDiv.append(this.$chaptersNav),this.updateChaptersList())},AblePlayer.prototype.updateChaptersList=function(){var e,i,s,a,n,r,o,l,h,p;if(e=this,!this.$chaptersNav)return!1;if(void 0===this.useChapterTimes&&("chapter"===this.seekbarScope&&this.selectedChapters.cues.length?this.useChapterTimes=!0:this.useChapterTimes=!1),(i=this.useChapterTimes?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[]).length>0){for(p=t("<ul>"),s=0;s<i.length;s++)a=s,n=t("<li></li>"),l=function(i){return function(){e.seekTrigger="chapter",h=t(this).closest("li"),p=t(this).closest("ul").find("li"),p.index(h),p.removeClass("able-current-chapter").children("button").removeAttr("aria-current"),h.addClass("able-current-chapter").children("button").attr("aria-current","true"),e.updateChapter(i),e.seekTo(i)}},(r=t("<button>",{type:"button",val:a}).text(this.flattenCueForCaption(i[a]))).on("click",l(i[a].start)),r.on("focus",(function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).closest("li").addClass("able-focus")})),n.on("hover",(function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).addClass("able-focus")})),n.on("mouseleave",(function(){t(this).removeClass("able-focus")})),r.on("blur",(function(){t(this).closest("li").removeClass("able-focus")})),n.append(r),p.append(n),this.defaultChapter===i[a].id&&(r.attr("aria-current","true").parent("li").addClass("able-current-chapter"),this.currentChapter=i[a],o=!0);o||(this.currentChapter=i[0],p.find("button").first().attr("aria-current","true").parent("li").addClass("able-current-chapter")),this.$chaptersNav.html(p)}return!1},AblePlayer.prototype.seekToChapter=function(t){for(var e=0;e<this.selectedChapters.cues.length;){if(this.selectedChapters.cues[e].id==t){this.seekTo(this.selectedChapters.cues[e].start),this.updateChapter(this.selectedChapters.cues[e].start);break}e++}},AblePlayer.prototype.updateChapter=function(t){if(void 0!==this.selectedChapters){var e,i,s;for(e=this.selectedChapters.cues,i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s&&this.currentChapter!==e[s]&&(this.currentChapter=e[s],this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.seekIntervalCalculated=!1),void 0!==this.$chaptersDiv&&(this.$chaptersDiv.find("ul").find("li").removeClass("able-current-chapter").children("button").removeAttr("aria-current"),this.$chaptersDiv.find("ul").find("li").eq(s).addClass("able-current-chapter").children("button").attr("aria-current","true")))}},AblePlayer.prototype.getChapterDuration=function(){var t,e;return void 0===this.currentChapter||void 0===this.duration?0:(t=this.selectedChapters.cues.length-1,this.selectedChapters.cues[t]==this.currentChapter&&this.currentChapter.end!==this.duration?(e=this.duration,this.currentChapter.end=this.duration):e=this.currentChapter.end,e-this.currentChapter.start)},AblePlayer.prototype.getChapterElapsed=function(){return void 0===this.currentChapter?0:this.elapsed>this.currentChapter.start?this.elapsed-this.currentChapter.start:0},AblePlayer.prototype.convertChapterTimeToVideoTime=function(t){if(void 0!==this.currentChapter){var e=this.currentChapter.start+t;return e>this.currentChapter.end?this.currentChapter.end:e}return t},AblePlayer.prototype.getChapterClickFunction=function(t){var e=this;return function(){e.seekTrigger="chapter",e.seekTo(t),e.hidingPopup=!0,e.chaptersPopup.hide(),setTimeout((function(){e.hidingPopup=!1}),100),e.$chaptersButton.focus()}}}(jQuery),function(t){AblePlayer.prototype.updateMeta=function(t){this.hasMeta&&("text"===this.metaType?(this.$metaDiv.show(),this.showMeta(t||this.elapsed)):this.showMeta(t||this.elapsed))},AblePlayer.prototype.showMeta=function(e){var i,s,a,n,r,o,l,h,p;for(i=[],n=this.meta.length>=1?this.meta:[],s=0;s<n.length;s++)if(n[s].start<=e&&n[s].end>e){a=s;break}if(void 0!==a){if(this.currentMeta!==a)if("text"===this.metaType)this.$metaDiv.html(this.flattenCueForMeta(n[a]).replace(/\n/g,"<br>"));else if("selector"===this.metaType){for(r=this.flattenCueForMeta(n[a]).split("\n"),o=0;o<r.length;o++)"pause"===(l=t.trim(r[o])).toLowerCase().trim()?(this.hideBigPlayButton=!0,this.pauseMedia()):"focus:"==l.toLowerCase().substring(0,6)?(p=l.substring(6).trim(),t(p).length&&t(p).focus()):t(l).length&&(this.currentMeta=a,void 0===(h=parseInt(t(l).attr("data-duration")))||isNaN(h)?t(l).show():t(l).show().delay(h).fadeOut(),this.visibleSelectors.push(l),i.push(l));if(this.visibleSelectors&&this.visibleSelectors.length&&this.visibleSelectors.length!==i.length)for(o=this.visibleSelectors.length-1;o>=0;o--)-1==t.inArray(this.visibleSelectors[o],i)&&(t(this.visibleSelectors[o]).hide(),this.visibleSelectors.splice(o,1))}}else{if(void 0!==this.$metaDiv&&this.$metaDiv.html(""),this.visibleSelectors&&this.visibleSelectors.length){for(o=0;o<this.visibleSelectors.length;o++)t(this.visibleSelectors[o]).hide();this.visibleSelectors=[]}this.currentMeta=-1}},AblePlayer.prototype.flattenCueForMeta=function(t){for(var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("["+t.value+"]"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")},i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")}}(jQuery),function(t){AblePlayer.prototype.setupTranscript=function(){var e=new t.Deferred,i=e.promise();return this.usingYouTubeCaptions||this.usingVimeoCaptions?(this.transcriptType=null,e.resolve()):(this.transcriptType||this.captions.length&&(this.transcriptType="popup"),this.transcriptType?"popup"===this.transcriptType||"external"===this.transcriptType?(this.injectTranscriptArea(),e.resolve()):"manual"===this.transcriptType&&(this.setupManualTranscript(),e.resolve()):e.resolve()),i},AblePlayer.prototype.injectTranscriptArea=function(){var e,i,s,a,n;if(this.$transcriptArea=t("<div>",{class:"able-transcript-area",role:"dialog","aria-label":this.tt.transcriptTitle}),this.$transcriptToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$transcriptDiv=t("<div>",{class:"able-transcript"}),this.$autoScrollTranscriptCheckbox=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),e=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$transcriptToolbar.append(e,this.$autoScrollTranscriptCheckbox),this.captions.length>1)for(i=t("<div>",{class:"transcript-language-select-wrapper"}),s=t("<label>",{for:"transcript-language-select-"+this.mediaId}).text(this.tt.language),this.$transcriptLanguageSelect=t("<select>",{id:"transcript-language-select-"+this.mediaId}),a=0;a<this.captions.length;a++)n=t("<option></option>",{value:this.captions[a].language,lang:this.captions[a].language}).text(this.captions[a].label),this.captions[a].def&&n.prop("selected",!0),this.$transcriptLanguageSelect.append(n);i&&(i.append(s,this.$transcriptLanguageSelect),this.$transcriptToolbar.append(i)),this.$transcriptArea.append(this.$transcriptToolbar,this.$transcriptDiv),this.transcriptDivLocation?t("#"+this.transcriptDivLocation).append(this.$transcriptArea):this.$ableWrapper.append(this.$transcriptArea),this.transcriptDivLocation||(this.initDragDrop("transcript"),1===this.prefTranscript&&this.positionDraggableWindow("transcript",this.getDefaultWidth("transcript"))),this.prefTranscript||this.transcriptDivLocation||this.$transcriptArea.hide()},AblePlayer.prototype.addTranscriptAreaEvents=function(){var t=this;this.$autoScrollTranscriptCheckbox.click((function(){t.handleTranscriptLockToggle(t.$autoScrollTranscriptCheckbox.prop("checked"))})),this.$transcriptDiv.on("mousewheel DOMMouseScroll click scroll",(function(e){t.scrollingTranscript||(t.autoScrollTranscript=!1,t.refreshControls("transcript")),t.scrollingTranscript=!1})),void 0!==this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.on("click mousedown",(function(t){t.stopPropagation()})),this.$transcriptLanguageSelect.on("change",(function(){var e=t.$transcriptLanguageSelect.val();t.syncTrackLanguages("transcript",e)})))},AblePlayer.prototype.transcriptSrcHasRequiredParts=function(){return!!(t("#"+this.transcriptSrc).length&&(this.$transcriptArea=t("#"+this.transcriptSrc),this.$transcriptArea.find(".able-window-toolbar").length&&(this.$transcriptToolbar=this.$transcriptArea.find(".able-window-toolbar").eq(0),this.$transcriptArea.find(".able-transcript").length&&(this.$transcriptDiv=this.$transcriptArea.find(".able-transcript").eq(0),this.$transcriptArea.find(".able-transcript-seekpoint").length))))&&(this.$transcriptSeekpoints=this.$transcriptArea.find(".able-transcript-seekpoint"),!0)},AblePlayer.prototype.setupManualTranscript=function(){var e,i;e=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),i=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.tt.autoScroll),this.$autoScrollTranscriptCheckbox=e,this.$transcriptToolbar.append(i,this.$autoScrollTranscriptCheckbox)},AblePlayer.prototype.updateTranscript=function(){if(this.transcriptType&&(!this.playerCreated||this.$transcriptArea)){if("external"===this.transcriptType||"popup"===this.transcriptType){var e,i,s;if(this.transcriptLang?i=this.transcriptCaptions.cues:this.transcriptCaptions?(this.transcriptLang=this.transcriptCaptions.language,i=this.transcriptCaptions.cues):this.selectedCaptions&&(this.transcriptLang=this.captionLang,i=this.selectedCaptions.cues),this.transcriptChapters)e=this.transcriptChapters.cues;else if(this.chapters.length>0){if(this.transcriptLang)for(var a=0;a<this.chapters.length;a++)this.chapters[a].language===this.transcriptLang&&(e=this.chapters[a].cues);void 0===e&&(e=this.chapters[0].cues||[])}if(this.transcriptDescriptions)s=this.transcriptDescriptions.cues;else if(this.descriptions.length>0){if(this.transcriptLang)for(a=0;a<this.descriptions.length;a++)this.descriptions[a].language===this.transcriptLang&&(s=this.descriptions[a].cues);s||(s=this.descriptions[0].cues||[])}var n=this.generateTranscript(e||[],i||[],s||[]);this.$transcriptDiv.html(n),this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.find("option:selected").prop("selected",!1),this.$transcriptLanguageSelect.find("option[lang="+this.transcriptLang+"]").prop("selected",!0))}var r=this;1===this.prefTabbable&&this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"),this.$transcriptArea.length>0&&this.$transcriptArea.find("span.able-transcript-seekpoint").click((function(e){r.seekTrigger="transcript";var i=parseFloat(t(this).attr("data-start"));i+=.01,r.seekingFromTranscript?r.seekingFromTranscript=!1:(r.seekingFromTranscript=!0,r.seekTo(i))}))}},AblePlayer.prototype.highlightTranscript=function(e){if(this.transcriptType){var i,s,a,n=this;e=parseFloat(e),this.$transcriptArea.find("span.able-transcript-seekpoint").each((function(){if(i=parseFloat(t(this).attr("data-start")),s=parseFloat(t(this).attr("data-end")),a=!!t(this).parent().hasClass("able-transcript-chapter-heading"),e>=i&&e<=s&&!a)return t(this).hasClass("able-highlight")||(n.$transcriptArea.find(".able-highlight").removeClass("able-highlight"),t(this).addClass("able-highlight"),n.movingHighlight=!0),!1})),n.currentHighlight=n.$transcriptArea.find(".able-highlight"),0===n.currentHighlight.length&&(n.currentHighlight=null)}},AblePlayer.prototype.generateTranscript=function(e,i,s){var a,n=this,r=t('<div class="able-transcript-container"></div>');if(r.attr("lang",this.transcriptLang),a=void 0!==this.transcriptTitle?this.transcriptTitle:this.lyricsMode?this.tt.lyricsTitle:this.tt.transcriptTitle,!this.transcriptDivLocation){var o=this.playerHeadingLevel,l=(o+=1)+1;if(o<=6)var h="h"+o.toString();else h="div";var p=t("<"+h+">");p.addClass("able-transcript-heading"),o>6&&p.attr({role:"heading","aria-level":o}),p.text(a),p.attr("lang",this.lang),r.append(p)}for(var c=0,u=0,d=0,addChapter=function(e,i){if(l<=6)var s="h"+l.toString();else s="div";var a=t("<"+s+">",{class:"able-transcript-chapter-heading"});l>6&&a.attr({role:"heading","aria-level":l});for(var flattenComponentForChapter=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForChapter(t.children[i]));return e},n=t("<span>",{class:"able-transcript-seekpoint"}),r=0;r<i.components.children.length;r++)for(var o=flattenComponentForChapter(i.components.children[r]),h=0;h<o.length;h++)n.append(o[h]);n.attr("data-start",i.start.toString()),n.attr("data-end",i.end.toString()),a.append(n),e.append(a)},addDescription=function(e,i){var s=t("<div>",{class:"able-transcript-desc"}),a=t("<span>",{class:"able-hidden"});a.attr("lang",n.lang),a.text(n.tt.prefHeadingDescription+": "),s.append(a);for(var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForDescription(t.children[i]));return e},r=t("<span>",{class:"able-transcript-seekpoint"}),o=0;o<i.components.children.length;o++)for(var l=flattenComponentForDescription(i.components.children[o]),h=0;h<l.length;h++)r.append(l[h]);r.attr("data-start",i.start.toString()),r.attr("data-end",i.end.toString()),s.append(r),e.append(s)},addCaption=function(e,i){for(var s=t("<span>",{class:"able-transcript-seekpoint able-transcript-caption"}),flattenComponentForCaption=function(e){var i=[],s=0,flattenString=function(t){var e;s++;var i=[];if(""===t)return i;var a=t.indexOf("["),n=t.indexOf("]"),r=t.indexOf("("),o=t.indexOf(")"),l=-1!==a&&-1!==n,h=-1!==r&&-1!==o;if(h||l){if(s>1)var p="<br/>";else p="";var c=p+'<span class="able-unspoken">',u="</span>";h&&l&&(a<r?h=!1:l=!1)}return h?(e=t.substring(0,r),e+=c,e+=t.substring(r,o+1),e+=u,e+=flattenString(t.substring(o+1)),i.push(e)):l?(e=t.substring(0,a),e+=c,e+=t.substring(a,n+1),e+=u,e+=flattenString(t.substring(n+1)),i.push(e)):i.push(t),i};if("string"===e.type)i=i.concat(flattenString(e.value));else if("v"===e.type){var a=t("<span>",{class:"able-unspoken"});e.value=e.value.replace(/^title="|\"$/g,""),a.text("("+e.value+")"),i.push(a);for(var n=0;n<e.children.length;n++)for(var r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)i.push(r[o])}else if("b"===e.type||"i"===e.type){if("b"===e.type)var l=t("<strong>");else if("i"===e.type)l=t("<em>");for(n=0;n<e.children.length;n++)for(r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)l.append(r[o]);"b"!==e.type&&"i"!=e.type||i.push(l," ")}else for(n=0;n<e.children.length;n++)i=i.concat(flattenComponentForCaption(e.children[n]));return i},a=0;a<i.components.children.length;a++)for(var r=flattenComponentForCaption(i.components.children[a]),o=0;o<r.length;o++){var l=r[o];"string"==typeof l&&(n.lyricsMode?l=l.replace(/\n/g,"<br>")+"<br>":l+=" "),s.append(l)}s.attr("data-start",i.start.toString()),s.attr("data-end",i.end.toString()),e.append(s),e.append(" \n")};c<e.length||d<s.length||u<i.length;){if(c<e.length&&d<s.length&&u<i.length)var f=Math.min(e[c].start,s[d].start,i[u].start);else if(c<e.length&&d<s.length)f=Math.min(e[c].start,s[d].start);else if(c<e.length&&u<i.length)f=Math.min(e[c].start,i[u].start);else if(d<s.length&&u<i.length)f=Math.min(s[d].start,i[u].start);else f=null;null!==f?void 0!==e[c]&&e[c].start===f?(addChapter(r,e[c]),c+=1):void 0!==s[d]&&s[d].start===f?(addDescription(r,s[d]),d+=1):(addCaption(r,i[u]),u+=1):c<e.length?(addChapter(r,e[c]),c+=1):d<s.length?(addDescription(r,s[d]),d+=1):u<i.length&&(addCaption(r,i[u]),u+=1)}var g=r.children(),m=0;return g.each((function(){t(this).hasClass("able-transcript-caption")?(-1===t(this).text().indexOf("[")&&-1===t(this).text().indexOf("(")||m>0&&(r.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),m=0),t(this).addClass("able-block-temp"),m++):m>0&&(r.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),m=0)})),r}}(jQuery),function(t){AblePlayer.prototype.showSearchResults=function(){var e=this;if(this.searchDiv&&this.searchString){var i=DOMPurify.sanitize(this.searchString);if(t("#"+this.SearchDiv)){var s="<p>"+this.tt.resultsSummary1+" ";s+='<span id="able-search-term-echo">'+i+"</span>",s+="</p>";var a=this.searchFor(i,this.searchIgnoreCaps);if(a.length>0){var n=t("<p>",{class:"able-search-results-summary"}),r=this.tt.resultsSummary2;r+=" <strong>"+a.length+"</strong> ",r+=this.tt.resultsSummary3+" ",r+=this.tt.resultsSummary4,n.html(r);for(var o=t("<ul>"),l=0;l<a.length;l++){var h="aria-search-result-"+l,p=t("<li>",{}),c=this.secondsToTime(a[l].start),u=this.tt.searchButtonLabel+" "+c.title,d=t("<button>",{class:"able-search-results-time","data-start":a[l].start,title:u,"aria-label":u,"aria-describedby":h});d.text(c.value),d.on("click",(function(i){e.seekTrigger="search";var s=parseFloat(t(this).attr("data-start"));s+=.01,e.seeking=!0,e.seekTo(s)}));var f=t("<span>",{class:"able-search-result-text",id:h});f.html("..."+a[l].caption+"..."),p.append(d,f),o.append(p)}t("#"+this.searchDiv).html(s).append(n,o)}else{var g=t("<p>").text(this.tt.noResultsFound);t("#"+this.searchDiv).html(s).append(g)}}}},AblePlayer.prototype.searchFor=function(e,i){var s,a,n,r,o,l,h;n=[];var p=e.split(" ");if(this.captions.length>0){for(l=0;l<this.captions.length;l++)this.captions[l].language===this.searchLang&&(s=this.searchLang,a=this.captions[l].cues);if(a.length>0)for(o=0,l=0;l<a.length;l++)if(-1!==t.inArray(a[l].components.children[0].type,["string","i","b","u","v","c"])){r=this.flattenCueForCaption(a[l]);var c=i?r.toLowerCase():r;for(h=0;h<p.length;h++){var u=i?p[h].toLowerCase():p[h];if(-1!==c.indexOf(u)){n[o]=[],n[o].start=a[l].start,n[o].lang=s,n[o].caption=this.highlightSearchTerm(p,r),o++;break}}}}return n},AblePlayer.prototype.highlightSearchTerm=function(t,e){return t.forEach((function(t){var i=new RegExp(t,"gi");e=e.replace(i,'<span class="able-search-term">$&</span>')})),e},AblePlayer.prototype.secondsToTime=function(t){t=Math.floor(t);var e=parseInt(t/3600,10)%24,i=parseInt(t/60,10)%60,s=t%60,a="",n="";e>0&&(a+=e+":",n+=1==e?"1 "+this.tt.hour+" ":e+" "+this.tt.hours+" "),i<10?(a+="0"+i+":",i>0&&(n+=1==i?"1 "+this.tt.minute+" ":i+" "+this.tt.minutes+" ")):(a+=i+":",n+=i+" "+this.tt.minutes+" "),s<10?(a+="0"+s,s>0&&(n+=1==s?"1 "+this.tt.second+" ":s+" "+this.tt.seconds+" ")):(a+=s,n+=s+" "+this.tt.seconds+" ");var r=[];return r.value=a,r.title=n,r}}(jQuery),function(t){AblePlayer.prototype.onMediaUpdateTime=function(t,e){var i=this;this.getMediaTimes(t,e).then((function(t){i.duration=t.duration,i.elapsed=t.elapsed,i.duration>0&&(1===i.prefHighlight&&i.highlightTranscript(i.elapsed),i.updateCaption(i.elapsed),i.showDescription(i.elapsed),i.updateChapter(i.elapsed),i.updateMeta(i.elapsed),i.refreshControls("timeline",i.duration,i.elapsed))}))},AblePlayer.prototype.onMediaPause=function(){this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear"),this.refreshControls("playpause")},AblePlayer.prototype.onMediaComplete=function(){this.hasPlaylist&&!this.cueingPlaylistItem&&(this.playlistIndex===this.$playlist.length-1?this.loop?(this.playlistIndex=0,this.cueingPlaylistItem=!0,this.cuePlaylistItem(0)):(this.playing=!1,this.paused=!0):(this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex))),this.refreshControls("init")},AblePlayer.prototype.onMediaNewSourceLoad=function(){var t=!1;this.cueingPlaylistItem&&(this.cueingPlaylistItem=!1),this.recreatingPlayer&&(this.recreatingPlayer=!1),this.playbackRate&&this.setPlaybackRate(this.playbackRate),this.userClickedPlaylist?this.startedPlaying&&!this.okToPlay||(this.playMedia(),t=!0):"restart"==this.seekTrigger||"chapter"==this.seekTrigger||"transcript"==this.seekTrigger||"search"==this.seekTrigger?(this.playMedia(),t=!0):this.swappingSrc?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length||this.loop)&&(this.playMedia(),t=!0):this.swapTime>0?"complete"===this.seekStatus?(this.okToPlay&&this.playMedia(),t=!0):"seeking"===this.seekStatus||(this.swapTime===this.elapsed?(this.seekStatus="complete",this.okToPlay&&this.playMedia(),t=!0):this.hasDescTracks?t=!0:this.durationsAreCloseEnough(this.duration,this.prevDuration)?(this.seekStatus="seeking",this.seekTo(this.swapTime)):t=!0):this.playing&&(this.playMedia(),t=!0):this.startedPlaying?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length||this.loop)&&(this.playMedia(),t=!0):t=!0:this.startTime>0?this.seeking?(this.seeking=!1,this.okToPlay&&this.playMedia(),t=!0):this.seekTo(this.startTime):this.defaultChapter&&void 0!==this.selectedChapters?this.seekToChapter(this.defaultChapter):(this.okToPlay&&this.playMedia(),t=!0),t&&(this.swappingSrc=!1,this.seekStatus=null,this.swapTime=0,this.seekTrigger=null,this.seekingFromTranscript=!1,this.userClickedPlaylist=!1,this.okToPlay=!1),this.refreshControls("init"),this.$focusedElement&&(this.restoreFocus(),this.$focusedElement=null)},AblePlayer.prototype.durationsAreCloseEnough=function(t,e){return Math.abs(Math.round(t)-Math.round(e))<=1},AblePlayer.prototype.restoreFocus=function(){var e;this.$focusedElement&&"button"===this.$focusedElement.attr("role")&&(e=this.$focusedElement.attr("class").split(/\s+/),t.each(e,(function(e,i){"able-button-handler-"===i.substring(0,20)&&t("div.able-controller div."+i).focus()})))},AblePlayer.prototype.addSeekbarListeners=function(){var t=this;this.seekBar.bodyDiv.on("startTracking",(function(e){t.pausedBeforeTracking=t.paused,t.pauseMedia()})).on("tracking",(function(e,i){t.highlightTranscript(i),t.updateCaption(i),t.showDescription(i),t.updateChapter(t.convertChapterTimeToVideoTime(i)),t.updateMeta(i),t.refreshControls("init")})).on("stopTracking",(function(e,i){t.useChapterTimes?t.seekTo(t.convertChapterTimeToVideoTime(i)):t.seekTo(i),t.pausedBeforeTracking||setTimeout((function(){t.playMedia()}),200)}))},AblePlayer.prototype.onClickPlayerButton=function(e){var i,s;"play"===(i=this.getButtonNameFromClass(t(e).attr("class")))?(this.clickedPlay=!0,this.handlePlay()):"restart"===i?(this.seekTrigger="restart",this.handleRestart()):"previous"===i?(this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="previous",this.buttonWithFocus="previous",this.handlePrevTrack()):"next"===i?(this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="next",this.buttonWithFocus="next",this.handleNextTrack()):"rewind"===i?(this.seekTrigger="rewind",this.handleRewind()):"forward"===i?(this.seekTrigger="forward",this.handleFastForward()):"mute"===i?this.handleMute():"volume"===i?this.handleVolumeButtonClick():"faster"===i?this.handleRateIncrease():"slower"===i?this.handleRateDecrease():"captions"===i?this.handleCaptionToggle():"chapters"===i?this.handleChapters():"descriptions"===i?this.handleDescriptionToggle():"sign"===i?this.closingSign||this.handleSignToggle():"preferences"===i?"menu"===t(e).attr("data-prefs-popup")?this.handlePrefsClick():(this.showingPrefsDialog=!0,this.closePopups(),"keyboard"===(s=t(e).attr("data-prefs-popup"))?this.keyboardPrefsDialog.show():"captions"===s?this.captionPrefsDialog.show():"descriptions"===s?this.descPrefsDialog.show():"transcript"===s&&this.transcriptPrefsDialog.show(),this.showingPrefsDialog=!1):"help"===i?this.handleHelpClick():"transcript"===i?this.closingTranscript||this.handleTranscriptToggle():"fullscreen"===i&&(this.clickedFullscreenButton=!0,this.handleFullscreenToggle())},AblePlayer.prototype.getButtonNameFromClass=function(t){var e,i;for(e=t.split(" "),i=0;i<e.length;i++)if("able-button-handler-"===e[i].substring(0,20))return e[i].substring(20);return t},AblePlayer.prototype.okToHandleKeyPress=function(){var e=AblePlayer.getActiveDOMElement();return"INPUT"!==t(e).prop("tagName")},AblePlayer.prototype.onPlayerKeyPress=function(e){var i,s;return(i=e.which)>=65&&i<=90&&(i+=32),s=t(document.activeElement),27===i&&this.$transcriptArea&&t.contains(this.$transcriptArea[0],s[0])&&!this.hidingPopup?(this.handleTranscriptToggle(),!1):!!this.okToHandleKeyPress()&&void(t(":focus").is("[contenteditable]")||t(":focus").is("input")||t(":focus").is("textarea")&&!this.stenoMode||t(":focus").is("select")||e.target.hasAttribute("contenteditable")||"INPUT"===e.target.tagName||"TEXTAREA"===e.target.tagName&&!this.stenoMode||"SELECT"===e.target.tagName||(27===i?(this.closePopups(),this.$tooltipDiv.hide(),this.seekBar.hideSliderTooltips()):32===i?"button"===s.attr("role")&&(e.preventDefault(),s.click()):112===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePlay()):115===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRestart()):109===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleMute()):118===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeButtonClick()):i>=49&&i<=57?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeKeystroke(i)):99===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleCaptionToggle()):100===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleDescriptionToggle()):102===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleFastForward()):114===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRewind()):98===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrevTrack()):110===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleNextTrack()):101===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrefsClick()):13===i&&("button"===s.attr("role")||"SPAN"===s.prop("tagName")||"LI"===s.prop("tagName"))&&s.click()))},AblePlayer.prototype.addHtml5MediaListeners=function(){var t=this;this.$media.on("emptied",(function(){})).on("loadedmetadata",(function(){t.duration=t.media.duration;Math.abs(Math.round(50.5)-Math.round(51.9))})).on("canplay",(function(){})).on("canplaythrough",(function(){t.onMediaNewSourceLoad()})).on("play",(function(){t.refreshControls("playpause")})).on("playing",(function(){t.playing=!0,t.paused=!1,t.swappingSrc=!1,t.refreshControls("playpause")})).on("ended",(function(){t.playing=!1,t.paused=!0,t.onMediaComplete()})).on("progress",(function(){t.refreshControls("timeline")})).on("waiting",(function(){})).on("durationchange",(function(){t.refreshControls("timeline")})).on("timeupdate",(function(){t.onMediaUpdateTime()})).on("pause",(function(){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist||t.swappingSrc||(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause()})).on("ratechange",(function(){})).on("volumechange",(function(){t.volume=t.getVolume()})).on("error",(function(){t.debug&&t.media.error.code}))},AblePlayer.prototype.addVimeoListeners=function(){var t=this;this.vimeoPlayer.on("loaded",(function(e){t.onMediaNewSourceLoad()})),this.vimeoPlayer.on("play",(function(e){t.playing=!0,t.startedPlaying=!0,t.paused=!1,t.refreshControls("playpause")})),this.vimeoPlayer.on("ended",(function(e){t.playing=!1,t.paused=!0,t.onMediaComplete()})),this.vimeoPlayer.on("bufferstart",(function(){})),this.vimeoPlayer.on("bufferend",(function(){})),this.vimeoPlayer.on("progress",(function(t){})),this.vimeoPlayer.on("seeking",(function(t){})),this.vimeoPlayer.on("seeked",(function(t){})),this.vimeoPlayer.on("timeupdate",(function(e){t.onMediaUpdateTime(e.duration,e.seconds)})),this.vimeoPlayer.on("pause",(function(e){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist||t.swappingSrc||(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause(),t.refreshControls("playpause")})),this.vimeoPlayer.on("playbackratechange",(function(e){t.vimeoPlaybackRate=e.playbackRate})),this.vimeoPlayer.on("texttrackchange",(function(t){})),this.vimeoPlayer.on("volumechange",(function(e){t.volume=10e.volume})),this.vimeoPlayer.on("error",(function(t){}))},AblePlayer.prototype.addEventListeners=function(){var e;if(e=this,t(window).on("resize",(function(){e.resizePlayer()})),window.MutationObserver){var i=this.$ableDiv[0];new MutationObserver((function(t){t.forEach((function(t){"attributes"===t.type&&"style"===t.attributeName&&e.$ableDiv.is(":visible")&&e.refreshControls("init")}))})).observe(i,{attributes:!0,childList:!0,characterData:!0})}void 0!==this.seekBar?this.addSeekbarListeners():setTimeout((function(){void 0!==e.seekBar&&e.addSeekbarListeners()}),2e3),this.$controllerDiv.find('div[role="button"]').on("click",(function(t){t.stopPropagation(),e.onClickPlayerButton(this)})),t(document).on("click",(function(i){if(0!==i.button)return!1;(t(".able-popup:visible").length||t(".able-volume-popup:visible"))&&e.closePopups(),"VIDEO"===i.target.tagName&&(e.clickedPlay=!0)})),this.$ableDiv.on("mousemove",(function(){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())})),t(document).keydown((function(t){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())})),this.$ableDiv.keydown((function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)})),this.stenoMode&&void 0!==this.stenoFrameContents&&this.stenoFrameContents.on("keydown",(function(t){e.onPlayerKeyPress(t)})),this.$transcriptArea&&this.$transcriptArea.on("keydown",(function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)})),this.$playlist&&this.$playlist.click((function(i){e.userClickedPlaylist||(e.userClickedPlaylist=!0,e.playlistIndex=t(this).index(),e.cuePlaylistItem(e.playlistIndex))})),this.$media.click((function(){e.handlePlay()})),"html5"===this.player?this.addHtml5MediaListeners():"vimeo"===this.player?this.addVimeoListeners():"youtube"===this.player&&setInterval((function(){e.onMediaUpdateTime()}),300)}}(jQuery),function(t){AblePlayer.prototype.initDragDrop=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f;for(i=this,"transcript"===e?(s=this.$transcriptArea,n="transcript-window",a=this.$transcriptToolbar):"sign"===e&&(s=this.$signWindow,n="sign-window",a=this.$signToolbar),a.addClass("able-draggable"),r=t("<div>",{class:"able-resizable"}),o=t("<svg>").attr({width:"100%",height:"100%",viewBox:"0 0 100 100",preserveAspectRatio:"none"}),l=1;l<=3;l++)1===l?(h="100",p="0",c="0",u="100"):2===l?(h="33",p="100",c="100",u="33"):3===l&&(h="67",p="100",c="100",u="67"),d=t("<line>").attr({x1:h,y1:p,x2:c,y2:u,"vector-effect":"non-scaling-stroke"}),o.append(d);r.html(o),f=parseInt(s.css("z-index"))+100,r.css("z-index",f),s.append(r),r.html(r.html()),a.on("mousedown mouseup touchstart touchend",(function(t){return t.stopPropagation(),"mousedown"===t.type||"touchstart"===t.type?i.windowMenuClickRegistered||(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.dragDevice="mouse",i.startDrag(e,s)):"mouseup"!==t.type&&"touchend"!==t.type||i.dragging&&"mouse"===i.dragDevice&&i.endDrag(e),!1})),r.on("mousedown mouseup touchstart touchend",(function(t){return t.stopPropagation(),"mousedown"===t.type||"touchstart"===t.type?i.windowMenuClickRegistered||(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.startResize(e,s)):"mouseup"!==t.type&&"touchend"!==t.type||i.resizing&&i.endResize(e),!1})),s.on("click",(function(){i.windowMenuClickRegistered||i.finishingDrag||i.updateZIndex(e),i.finishingDrag=!1})),this.addWindowMenu(e,s,n)},AblePlayer.prototype.addWindowMenu=function(e,i,s){var a,n,r,o,l,h,p,c,u,d,f;a=this,this.windowMenuClickRegistered=!1,this.finishingDrag=!1,(n=t('<div role="alert"></div>')).addClass("able-alert"),n.hide(),n.appendTo(this.$activeWindow),n.css({top:i.offset().top}),f=this.mediaId+"-"+s+"-menu",r=t("<button>",{type:"button",tabindex:"0","aria-label":this.tt.windowButtonLabel,"aria-haspopup":"true","aria-controls":f,"aria-expanded":"false",class:"able-button-handler-preferences"}),"font"===this.iconType?(o=t("<span>",{class:"icon-preferences","aria-hidden":"true"}),r.append(o)):(l=this.rootPath+"button-icons/"+this.toolbarIconColor+"/preferences.png",h=t("<img>",{src:l,alt:"",role:"presentation"}),r.append(h)),p=t("<span>",{class:"able-clipped"}).text(this.tt.windowButtonLabel),r.append(p),c=this.mediaId+"-"+s+"-tooltip",u=t("<div>",{class:"able-tooltip",id:c}).hide(),r.on("mouseenter focus",(function(e){var i=t(this).attr("aria-label"),s=t(this).position(),n=t(this).height(),o=(t(this).width(),{left:"",right:"0px",top:s.top-n-5+"px"}),l=AblePlayer.localGetElementById(r[0],c).text(i).css(o);a.showTooltip(l),t(this).on("mouseleave blur",(function(){AblePlayer.localGetElementById(r[0],c).text("").hide()}))})),d=this.setupPopups(s),"transcript"===e?(this.$transcriptAlert=n,this.$transcriptPopupButton=r,this.$transcriptPopup=d,this.$transcriptToolbar.prepend(n,r,u,d)):"sign"===e&&(this.$signAlert=n,this.$signPopupButton=r,this.$signPopup=d,this.$signToolbar.append(n,r,u,d)),r.on("click mousedown keydown",(function(t){return!a.focusNotClick&&(a.dragging?(a.dragKeys(e,t),!1):(t.stopPropagation(),a.windowMenuClickRegistered||a.finishingDrag||a.handleWindowButtonClick(e,t),void(a.finishingDrag=!1)))})),this.addResizeDialog(e,i)},AblePlayer.prototype.addResizeDialog=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,f,g,m,v,y,b,P,k,T,C,w,$;s=this,"transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton),r=this.mediaId+"-resize-"+e+"-width",o=this.mediaId+"-resize-"+e+"-height",l=i.width(),h=i.height(),p=l/h,c=t("<div></div>",{class:"able-resize-form"}),u=t("<div></div>"),d=t("<div></div>"),f=t("<input>",{type:"text",id:r,value:l}),g=t("<label>",{for:r}).text(this.tt.width),m=t("<div></div>"),v=t("<input>",{type:"text",id:o,value:h}),y=t("<label>",{for:o}).text(this.tt.height),"sign"===e&&(v.prop("readonly",!0),f.on("input",(function(){b=t(this).val(),P=Math.round(b/p,0),v.val(P)}))),k=t('<button class="modal-button">'+this.tt.save+"</button>"),T=t('<button class="modal-button">'+this.tt.cancel+"</button>"),k.on("click",(function(){C=t("#"+r).val(),w=t("#"+o).val(),C===l&&w===h||(s.resizeObject(e,C,w),s.updateCookie(e)),$.hide(),a.hide(),n.focus()})),T.on("click",(function(){$.hide(),a.hide(),n.focus()})),d.append(g,f),m.append(y,v),u.append(d,m),c.append(u,"<hr>",k,T),t("body").append(c),$=new AccessibleDialog(c,n,"dialog",!0,this.tt.windowResizeHeading,u,this.tt.closeButtonLabel,"20em"),"transcript"===e?this.transcriptResizeDialog=$:"sign"===e&&(this.signResizeDialog=$)},AblePlayer.prototype.handleWindowButtonClick=function(e,i){var s,a,n,r;if(s=this,this.focusNotClick)return!1;if("transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton,this.$transcriptToolbar):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton,this.$signToolbar),"keydown"===i.type)if(32===i.which||13===i.which)this.windowMenuClickRegistered=!0;else{if(27!==i.which)return!1;a.is(":visible")?a.hide("fast",(function(){s.windowMenuClickRegistered=!1,a.find("li").removeClass("able-focus").attr("tabindex","-1"),n.focus()})):"sign"===e?this.handleSignToggle():"transcript"===e&&this.handleTranscriptToggle()}else this.windowMenuClickRegistered=!0;a.is(":visible")?(a.hide(200,"",(function(){s.windowMenuClickRegistered=!1})),a.find("li").removeClass("able-focus"),n.attr("aria-expanded","false").focus()):(this.updateZIndex(e),r=n.position().top+n.outerHeight(),a.css("top",r),a.show(200,"",(function(){n.attr("aria-expanded","true"),t(this).find("li").first().focus().addClass("able-focus"),s.windowMenuClickRegistered=!1})))},AblePlayer.prototype.handleMenuChoice=function(t,e,i){var s,a,n,r,o;if(s=this,"transcript"===t?(a=this.$transcriptArea,n=this.$transcriptPopup,r=this.$transcriptPopupButton,o=this.transcriptResizeDialog):"sign"===t&&(a=this.$signWindow,n=this.$signPopup,r=this.$signPopupButton,o=this.signResizeDialog),this.$activeWindow=a,"keydown"===i.type)return 27===i.which?(n.hide("fast",(function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),r.focus()})),!1):("close"!==e&&(this.$activeWindow=a),!1);if(n.hide("fast",(function(){s.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false")})),"close"!==e&&r.focus(),"move"===e)this.$activeWindow.attr("role","application"),this.showedAlert(t)||(this.showAlert(this.tt.windowMoveAlert,t),"transcript"===t?this.showedTranscriptAlert=!0:"sign"===t&&(this.showedSignAlert=!0)),"keydown"===i.type?this.dragDevice="keyboard":this.dragDevice="mouse",this.startDrag(t,a),n.hide().parent().focus();else if("resize"==e){var l=o.getInputs();l&&(l[0].value=a.width(),l[1].value=a.height()),o.show()}else"close"==e&&("transcript"===t?(this.closingTranscript=!0,this.handleTranscriptToggle()):"sign"===t&&(this.closingSign=!0,this.handleSignToggle()))},AblePlayer.prototype.startDrag=function(e,i){var s,a,n,r,o;return s=this,this.$activeWindow||(this.$activeWindow=i),this.dragging=!0,"transcript"===e?a=this.$transcriptPopup:"sign"===e&&(a=this.$signPopup),this.showedAlert(e)||(this.showAlert(this.tt.windowMoveAlert,e),"transcript"===e?this.showedTranscriptAlert=!0:"sign"===e&&(this.showedSignAlert=!0)),a.is(":visible")&&a.hide(),this.updateZIndex(e),n=this.$activeWindow.position(),this.dragStartX=n.left,this.dragStartY=n.top,void 0===this.startMouseX?(this.dragDevice="keyboard",this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.startingDrag=!0):(this.dragDevice="mouse",this.dragOffsetX=this.startMouseX-this.dragStartX,this.dragOffsetY=this.startMouseY-this.dragStartY),this.$activeWindow.addClass("able-drag").css({position:"absolute",top:this.dragStartY+"px",left:this.dragStartX+"px"}).focus(),"mouse"===this.dragDevice?t(document).on("mousemove touchmove",(function(t){s.dragging&&(r=t.pageX-s.dragOffsetX,o=t.pageY-s.dragOffsetY,s.resetDraggedObject(r,o))})):"keyboard"===this.dragDevice&&this.$activeWindow.on("keydown",(function(t){s.dragging&&s.dragKeys(e,t)})),!1},AblePlayer.prototype.dragKeys=function(t,e){if(this.startingDrag)return this.startingDrag=!1,!1;switch(e.which){case 37:case 63234:this.dragKeyX-=10;break;case 38:case 63232:this.dragKeyY-=10;break;case 39:case 63235:this.dragKeyX+=10;break;case 40:case 63233:this.dragKeyY+=10;break;case 13:case 27:return this.endDrag(t),!1;default:return!1}return this.resetDraggedObject(this.dragKeyX,this.dragKeyY),e.preventDefault&&e.preventDefault(),!1},AblePlayer.prototype.resetDraggedObject=function(t,e){this.$activeWindow.css({left:t+"px",top:e+"px"})},AblePlayer.prototype.resizeObject=function(t,e,i){var s;this.$activeWindow.css({width:e+"px",height:i+"px"}),"transcript"===t&&(s=i-50,this.$transcriptDiv.css("height",s+"px"))},AblePlayer.prototype.endDrag=function(e){var i,s;i=this,"transcript"===e?(this.$transcriptPopup,s=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,s=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown").removeClass("able-drag"),this.$activeWindow.attr("role","dialog"),this.$activeWindow=null,"keyboard"===this.dragDevice&&s.focus(),this.dragging=!1,this.updateCookie(e),this.startMouseX=void 0,this.startMouseY=void 0,this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout((function(){i.finishingDrag=!1}),100)},AblePlayer.prototype.isCloseToCorner=function(t,e,i){var s,a,n,r,o,l;return a=(s=t.offset()).top,n=s.left,r=t.width(),o=a+t.height(),l=n+r,Math.abs(o-i)<=10&&Math.abs(l-e)<=10},AblePlayer.prototype.startResize=function(e,i){var s,a,n,r;return s=this,this.$activeWindow=i,this.resizing=!0,"transcript"===e?a=this.$transcriptPopup:"sign"===e&&(a=this.$signPopup),a.is(":visible")&&a.hide().parent().focus(),this.$activeWindow.position(),this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.dragStartWidth=this.$activeWindow.width(),this.dragStartHeight=this.$activeWindow.height(),t(document).on("mousemove touchmove",(function(t){s.resizing&&(n=s.dragStartWidth+(t.pageX-s.startMouseX),r=s.dragStartHeight+(t.pageY-s.startMouseY),s.resizeObject(e,n,r))})),!1},AblePlayer.prototype.endResize=function(e){var i;"transcript"===e?(this.$transcriptPopup,i=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,i=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown"),i.show().focus(),this.resizing=!1,this.$activeWindow.removeClass("able-resize"),this.updateCookie(e),this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout((function(){this.finishingDrag=!1}),100)}}(jQuery),function(t){AblePlayer.prototype.initSignLanguage=function(){"html5"===this.player?(this.signFile=this.$sources.first().attr("data-sign-src"),this.signFile?this.isIOS()?(this.hasSignLanguage=!1,this.debug):(this.debug,this.hasSignLanguage=!0,this.injectSignPlayerCode()):this.hasSignLanguage=!1):this.hasSignLanguage=!1},AblePlayer.prototype.injectSignPlayerCode=function(){var e,i,s,a,n;for(this.getDefaultWidth("sign"),e=this.mediaId+"-sign",this.$signVideo=t("<video>",{id:e,tabindex:"-1"}),this.signVideo=this.$signVideo[0],i=0;i<this.$sources.length;i++){if(s=this.$sources[i].getAttribute("data-sign-src"),a=this.$sources[i].getAttribute("type"),!s){this.hasSignLanguage=!1;break}n=t("<source>",{src:s,type:a}),this.$signVideo.append(n)}this.$signWindow=t("<div>",{class:"able-sign-window",role:"dialog","aria-label":this.tt.sign}),this.$signToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$signWindow.append(this.$signToolbar,this.$signVideo),this.$ableWrapper.append(this.$signWindow),this.initDragDrop("sign"),1===this.prefSign?this.positionDraggableWindow("sign",this.getDefaultWidth("sign")):this.$signWindow.hide()}}(jQuery),function(){var t={ab:{name:"Abkhaz",nativeName:"аҧсуа"},aa:{name:"Afar",nativeName:"Afaraf"},af:{name:"Afrikaans",nativeName:"Afrikaans"},ak:{name:"Akan",nativeName:"Akan"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"አማርኛ"},ar:{name:"Arabic",nativeName:"العربية"},an:{name:"Aragonese",nativeName:"Aragonés"},hy:{name:"Armenian",nativeName:"Հայերեն"},as:{name:"Assamese",nativeName:"অসমীয়া"},av:{name:"Avaric",nativeName:"авар мацӀ, магӀарул мацӀ"},ae:{name:"Avestan",nativeName:"avesta"},ay:{name:"Aymara",nativeName:"aymar aru"},az:{name:"Azerbaijani",nativeName:"azərbaycan dili"},bm:{name:"Bambara",nativeName:"bamanankan"},ba:{name:"Bashkir",nativeName:"башҡорт теле"},eu:{name:"Basque",nativeName:"euskara, euskera"},be:{name:"Belarusian",nativeName:"Беларуская"},bn:{name:"Bengali",nativeName:"বাংলা"},bh:{name:"Bihari",nativeName:"भोजपुरी"},bi:{name:"Bislama",nativeName:"Bislama"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},br:{name:"Breton",nativeName:"brezhoneg"},bg:{name:"Bulgarian",nativeName:"български език"},my:{name:"Burmese",nativeName:"ဗမာစာ"},ca:{name:"Catalan",nativeName:"Català"},ch:{name:"Chamorro",nativeName:"Chamoru"},ce:{name:"Chechen",nativeName:"нохчийн мотт"},ny:{name:"Chichewa",nativeName:"chiCheŵa, chinyanja"},zh:{name:"Chinese",nativeName:"中文 (Zhōngwén), 汉语, 漢語"},cv:{name:"Chuvash",nativeName:"чӑваш чӗлхи"},kw:{name:"Cornish",nativeName:"Kernewek"},co:{name:"Corsican",nativeName:"corsu, lingua corsa"},cr:{name:"Cree",nativeName:"ᓀᐦᐃᔭᐍᐏᐣ"},hr:{name:"Croatian",nativeName:"hrvatski"},cs:{name:"Czech",nativeName:"česky, čeština"},da:{name:"Danish",nativeName:"dansk"},dv:{name:"Divehi",nativeName:"ދިވެހި"},nl:{name:"Dutch",nativeName:"Nederlands, Vlaams"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti, eesti keel"},ee:{name:"Ewe",nativeName:"Eʋegbe"},fo:{name:"Faroese",nativeName:"føroyskt"},fj:{name:"Fijian",nativeName:"vosa Vakaviti"},fi:{name:"Finnish",nativeName:"suomi, suomen kieli"},fr:{name:"French",nativeName:"français, langue française"},ff:{name:"Fula",nativeName:"Fulfulde, Pulaar, Pular"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"ქართული"},de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"Ελληνικά"},gn:{name:"Guaraní",nativeName:"Avañeẽ"},gu:{name:"Gujarati",nativeName:"ગુજરાતી"},ht:{name:"Haitian",nativeName:"Kreyòl ayisyen"},ha:{name:"Hausa",nativeName:"Hausa, هَوُسَ"},he:{name:"Hebrew",nativeName:"עברית"},hz:{name:"Herero",nativeName:"Otjiherero"},hi:{name:"Hindi",nativeName:"हिन्दी, हिंदी"},ho:{name:"Hiri Motu",nativeName:"Hiri Motu"},hu:{name:"Hungarian",nativeName:"Magyar"},ia:{name:"Interlingua",nativeName:"Interlingua"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ie:{name:"Interlingue",nativeName:"Originally called Occidental; then Interlingue after WWII"},ga:{name:"Irish",nativeName:"Gaeilge"},ig:{name:"Igbo",nativeName:"Asụsụ Igbo"},ik:{name:"Inupiaq",nativeName:"Iñupiaq, Iñupiatun"},io:{name:"Ido",nativeName:"Ido"},is:{name:"Icelandic",nativeName:"Íslenska"},it:{name:"Italian",nativeName:"Italiano"},iu:{name:"Inuktitut",nativeName:"ᐃᓄᒃᑎᑐᑦ"},ja:{name:"Japanese",nativeName:"日本語 (にほんご／にっぽんご)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kl:{name:"Kalaallisut",nativeName:"kalaallisut, kalaallit oqaasii"},kn:{name:"Kannada",nativeName:"ಕನ್ನಡ"},kr:{name:"Kanuri",nativeName:"Kanuri"},ks:{name:"Kashmiri",nativeName:"कश्मीरी, كشميري‎"},kk:{name:"Kazakh",nativeName:"Қазақ тілі"},km:{name:"Khmer",nativeName:"ភាសាខ្មែរ"},ki:{name:"Kikuyu",nativeName:"Gĩkũyũ"},rw:{name:"Kinyarwanda",nativeName:"Ikinyarwanda"},ky:{name:"Kyrgyz",nativeName:"кыргыз тили"},kv:{name:"Komi",nativeName:"коми кыв"},kg:{name:"Kongo",nativeName:"KiKongo"},ko:{name:"Korean",nativeName:"한국어 (韓國語), 조선말 (朝鮮語)"},ku:{name:"Kurdish",nativeName:"Kurdî, كوردی‎"},kj:{name:"Kuanyama",nativeName:"Kuanyama"},la:{name:"Latin",nativeName:"latine, lingua latina"},lb:{name:"Luxembourgish",nativeName:"Lëtzebuergesch"},lg:{name:"Luganda",nativeName:"Luganda"},li:{name:"Limburgish",nativeName:"Limburgs"},ln:{name:"Lingala",nativeName:"Lingála"},lo:{name:"Lao",nativeName:"ພາສາລາວ"},lt:{name:"Lithuanian",nativeName:"lietuvių kalba"},lu:{name:"Luba-Katanga",nativeName:""},lv:{name:"Latvian",nativeName:"latviešu valoda"},gv:{name:"Manx",nativeName:"Gaelg, Gailck"},mk:{name:"Macedonian",nativeName:"македонски јазик"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu, بهاس ملايو‎"},ml:{name:"Malayalam",nativeName:"മലയാളം"},mt:{name:"Maltese",nativeName:"Malti"},mi:{name:"Māori",nativeName:"te reo Māori"},mr:{name:"Marathi",nativeName:"मराठी"},mh:{name:"Marshallese",nativeName:"Kajin M̧ajeļ"},mn:{name:"Mongolian",nativeName:"монгол"},na:{name:"Nauru",nativeName:"Ekakairũ Naoero"},nv:{name:"Navajo",nativeName:"Diné bizaad, Dinékʼehǰí"},nb:{name:"Norwegian Bokmål",nativeName:"Norsk bokmål"},nd:{name:"North Ndebele",nativeName:"isiNdebele"},ne:{name:"Nepali",nativeName:"नेपाली"},ng:{name:"Ndonga",nativeName:"Owambo"},nn:{name:"Norwegian Nynorsk",nativeName:"Norsk nynorsk"},no:{name:"Norwegian",nativeName:"Norsk"},ii:{name:"Nuosu",nativeName:"ꆈꌠ꒿ Nuosuhxop"},nr:{name:"South Ndebele",nativeName:"isiNdebele"},oc:{name:"Occitan",nativeName:"Occitan"},oj:{name:"Ojibwe",nativeName:"ᐊᓂᔑᓈᐯᒧᐎᓐ"},cu:{name:"Church Slavonic",nativeName:"ѩзыкъ словѣньскъ"},om:{name:"Oromo",nativeName:"Afaan Oromoo"},or:{name:"Oriya",nativeName:"ଓଡ଼ିଆ"},os:{name:"Ossetian",nativeName:"ирон æвзаг"},pa:{name:"Punjabi",nativeName:"ਪੰਜਾਬੀ, پنجابی‎"},pi:{name:"Pāli",nativeName:"पाऴि"},fa:{name:"Persian",nativeName:"فارسی"},pl:{name:"Polish",nativeName:"polski"},ps:{name:"Pashto",nativeName:"پښتو"},pt:{name:"Portuguese",nativeName:"Português"},qu:{name:"Quechua",nativeName:"Runa Simi, Kichwa"},rm:{name:"Romansh",nativeName:"rumantsch grischun"},rn:{name:"Kirundi",nativeName:"kiRundi"},ro:{name:"Romanian",nativeName:"română"},ru:{name:"Russian",nativeName:"русский язык"},sa:{name:"Sanskrit",nativeName:"संस्कृतम्"},sc:{name:"Sardinian",nativeName:"sardu"},sd:{name:"Sindhi",nativeName:"सिन्धी, سنڌي، سندھی‎"},se:{name:"Northern Sami",nativeName:"Davvisámegiella"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},sg:{name:"Sango",nativeName:"yângâ tî sängö"},sr:{name:"Serbian",nativeName:"српски језик"},gd:{name:"Gaelic",nativeName:"Gàidhlig"},sn:{name:"Shona",nativeName:"chiShona"},si:{name:"Sinhalese",nativeName:"සිංහල"},sk:{name:"Slovak",nativeName:"slovenčina"},sl:{name:"Slovene",nativeName:"slovenščina"},so:{name:"Somali",nativeName:"Soomaaliga, af Soomaali"},st:{name:"Southern Sotho",nativeName:"Sesotho"},es:{name:"Spanish",nativeName:"español, castellano"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},ss:{name:"Swati",nativeName:"SiSwati"},sv:{name:"Swedish",nativeName:"svenska"},ta:{name:"Tamil",nativeName:"தமிழ்"},te:{name:"Telugu",nativeName:"తెలుగు"},tg:{name:"Tajik",nativeName:"тоҷикӣ, toğikī, تاجیکی‎"},th:{name:"Thai",nativeName:"ไทย"},ti:{name:"Tigrinya",nativeName:"ትግርኛ"},bo:{name:"Tibetan",nativeName:"བོད་ཡིག"},tk:{name:"Turkmen",nativeName:"Türkmen, Түркмен"},tl:{name:"Tagalog",nativeName:"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔"},tn:{name:"Tswana",nativeName:"Setswana"},to:{name:"Tonga",nativeName:"faka Tonga"},tr:{name:"Turkish",nativeName:"Türkçe"},ts:{name:"Tsonga",nativeName:"Xitsonga"},tt:{name:"Tatar",nativeName:"татарча, tatarça, تاتارچا‎"},tw:{name:"Twi",nativeName:"Twi"},ty:{name:"Tahitian",nativeName:"Reo Tahiti"},ug:{name:"Uyghur",nativeName:"Uyƣurqə, ئۇيغۇرچە‎"},uk:{name:"Ukrainian",nativeName:"українська"},ur:{name:"Urdu",nativeName:"اردو"},uz:{name:"Uzbek",nativeName:"zbek, Ўзбек, أۇزبېك‎"},ve:{name:"Venda",nativeName:"Tshivenḓa"},vi:{name:"Vietnamese",nativeName:"Tiếng Việt"},vo:{name:"Volapük",nativeName:"Volapük"},wa:{name:"Walloon",nativeName:"Walon"},cy:{name:"Welsh",nativeName:"Cymraeg"},wo:{name:"Wolof",nativeName:"Wollof"},fy:{name:"Western Frisian",nativeName:"Frysk"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"ייִדיש"},yo:{name:"Yoruba",nativeName:"Yorùbá"},za:{name:"Zhuang",nativeName:"Saɯ cueŋƅ, Saw cuengh"},"ar-dz":{name:"Arabic (Algeria)",nativeName:"العربية (الجزائر)"},"ar-bh":{name:"Arabic (Bahrain)",nativeName:"العربية (البحرين)"},"ar-eg":{name:"Arabic (Egypt)",nativeName:"العربية (مصر)"},"ar-iq":{name:"Arabic (Iraq)",nativeName:"العربية (العراق)"},"ar-jo":{name:"Arabic (Jordan)",nativeName:"العربية (الأردن)"},"ar-kw":{name:"Arabic (Kuwait)",nativeName:"العربية (الكويت)"},"ar-lb":{name:"Arabic (Lebanon)",nativeName:"العربية (لبنان)"},"ar-ly":{name:"Arabic (Libya)",nativeName:"العربية (ليبيا)"},"ar-ma":{name:"Arabic (Morocco)",nativeName:"العربية (المملكة المغربية)"},"ar-om":{name:"Arabic (Oman)",nativeName:"العربية (عمان)"},"ar-qa":{name:"Arabic (Qatar)",nativeName:"العربية (قطر)"},"ar-sa":{name:"Arabic (Saudi Arabia)",nativeName:"العربية (المملكة العربية السعودية)"},"ar-sy":{name:"Arabic (Syria)",nativeName:"العربية (سوريا)"},"ar-tn":{name:"Arabic (Tunisia)",nativeName:"العربية (تونس)"},"ar-ae":{name:"Arabic (U.A.E.)",nativeName:"العربية (الإمارات العربية المتحدة)"},"ar-ye":{name:"Arabic (Yemen)",nativeName:"العربية (اليمن)"},"de-at":{name:"German (Austria)",nativeName:"Deutsch (Österreich)"},"de-li":{name:"German (Liechtenstein)",nativeName:"Deutsch (Liechtenstein)"},"de-lu":{name:"German (Luxembourg)",nativeName:"Deutsch (Luxemburg)"},"de-ch":{name:"German (Switzerland)",nativeName:"Deutsch (Schweiz)"},"en-au":{name:"English (Australia)",nativeName:"English (Australia)"},"en-bz":{name:"English (Belize)",nativeName:"English (Belize)"},"en-ca":{name:"English (Canada)",nativeName:"English (Canada)"},"en-ie":{name:"English (Ireland)",nativeName:"English (Ireland)"},"en-jm":{name:"English (Jamaica)",nativeName:"English (Jamaica)"},"en-nz":{name:"English (New Zealand)",nativeName:""},"en-za":{name:"English (South Africa)",nativeName:"English (South Africa)"},"en-tt":{name:"English (Trinidad)",nativeName:"English (Trinidad y Tobago)"},"en-gb":{name:"English (United Kingdom)",nativeName:"English (United Kingdom)"},"en-us":{name:"English (United States)",nativeName:"English (United States)"},"es-ar":{name:"Spanish (Argentina)",nativeName:"Español (Argentina)"},"es-bo":{name:"Spanish (Bolivia)",nativeName:"Español (Bolivia)"},"es-cl":{name:"Spanish (Chile)",nativeName:"Español (Chile)"},"es-co":{name:"Spanish (Colombia)",nativeName:"Español (Colombia)"},"es-cr":{name:"Spanish (Costa Rica)",nativeName:"Español (Costa Rica)"},"es-do":{name:"Spanish (Dominican Republic)",nativeName:"Español (República Dominicana)"},"es-ec":{name:"Spanish (Ecuador)",nativeName:"Español (Ecuador)"},"es-sv":{name:"Spanish (El Salvador)",nativeName:"Español (El Salvador)"},"es-gt":{name:"Spanish (Guatemala)",nativeName:"Español (Guatemala)"},"es-hn":{name:"Spanish (Honduras)",nativeName:"Español (Honduras)"},"es-mx":{name:"Spanish (Mexico)",nativeName:"Español (México)"},"es-ni":{name:"Spanish (Nicaragua)",nativeName:"Español (Nicaragua)"},"es-pa":{name:"Spanish (Panama)",nativeName:"Español (Panamá)"},"es-py":{name:"Spanish (Paraguay)",nativeName:"Español (Paraguay)"},"es-pe":{name:"Spanish (Peru)",nativeName:"Español (Perú)"},"es-pr":{name:"Spanish (Puerto Rico)",nativeName:"Español (Puerto Rico)"},"es-uy":{name:"Spanish (Uruguay)",nativeName:"Español (Uruguay)"},"es-ve":{name:"Spanish (Venezuela)",nativeName:"Español (Venezuela)"},"fr-be":{name:"French (Belgium)",nativeName:"français (Belgique)"},"fr-ca":{name:"French (Canada)",nativeName:"français (Canada)"},"fr-lu":{name:"French (Luxembourg)",nativeName:"français (Luxembourg)"},"fr-ch":{name:"French (Switzerland)",nativeName:"français (Suisse)"},"it-ch":{name:"Italian (Switzerland)",nativeName:"italiano (Svizzera)"},"nl-be":{name:"Dutch (Belgium)",nativeName:"Nederlands (België)"},"pt-br":{name:"Portuguese (Brazil)",nativeName:"Português (Brasil)"},"sv-fi":{name:"Swedish (Finland)",nativeName:"svenska (Finland)"},"zh-hk":{name:"Chinese (Hong Kong)",nativeName:"中文(香港特别行政區)"},"zh-cn":{name:"Chinese (PRC)",nativeName:"中文(中华人民共和国)"},"zh-sg":{name:"Chinese (Singapore)",nativeName:"中文(新加坡)"},"zh-tw":{name:"Chinese Traditional (Taiwan)",nativeName:"中文（台灣）"}};AblePlayer.prototype.getLanguageName=function(e,i){var s,a,n;return(s=t[e.toLowerCase()])?"local"===i?s.nativeName:s.name:e.includes("-")&&(a=e.substring(0,2),n=e.substring(3),s=t[a.toLowerCase()])?"local"===i?s.nativeName+" ("+n+")":s.name+" ("+n+")":e}}(jQuery),function(t){AblePlayer.prototype.getSupportedLangs=function(){return["ca","cs","da","de","en","es","fr","he","id","it","ja","nb","nl","pt","pt-br","sv","tr","zh-tw"]},AblePlayer.prototype.getTranslationText=function(){var e,i,s,a,n,r,o;if(e=t.Deferred(),i=this,s=this.getSupportedLangs(),this.lang&&-1===t.inArray(this.lang,s))if(2==this.lang.indexOf("-"))-1!==t.inArray(this.lang.substring(0,2),s)?this.lang=this.lang.substring(0,2):this.lang=null;else{for(o=!1,r=0;r<s.length;)s[r].substring(0,2)==this.lang&&(this.lang=s[r],o=!0),r++;o||(this.lang=null)}return this.lang||(a=t("body").attr("lang")?t("body").attr("lang").toLowerCase():t("html").attr("lang")?t("html").attr("lang").toLowerCase():null)&&(-1!==t.inArray(a,s)?this.lang=a:2==a.indexOf("-")&&-1!==t.inArray(a.substring(0,2),s)&&(this.lang=a.substring(0,2))),this.lang||(this.lang="en"),this.searchLang||(this.searchLang=this.lang),n=this.rootPath+"translations/"+this.lang+".js",t.getJSON(n,(function(t){i.tt=t,e.resolve()})).fail((function(){i.provideFallback(),e.fail()})),e.promise()},AblePlayer.prototype.getSampleDescriptionText=function(){var e,i,s,a,n,r;for(i=this.getSupportedLangs(),e=this,this.sampleText=[],s=0;s<i.length;s++)a=this.rootPath+"translations/"+i[s]+".js",t.getJSON(a,undefined,function(t){return function(i){n=i.sampleDescriptionText,r={lang:t,text:n},e.sampleText.push(r)}}(i[s]))}}(jQuery),jQuery,AblePlayer.prototype.computeEndTime=function(t,e){var i=t.split(":").reverse().map((function(t){return parseFloat(t)})),s=e.split(":").reverse().map((function(t){return parseFloat(t)}));return i.reduce((function(t,e,i){var a=e+s[i];return 0===i&&(a>60&&(s[i+1]+=1,a-=60),a=a.toFixed(3)),1===i&&a>60&&(s[i+1]+=1,a-=60),a<10&&(a="0"+a),t.push(a),t}),[]).reverse().join(":")},AblePlayer.prototype.ttml2webvtt=function(t){var e=this,i=e.convert.xml2json(t,{ignoreComment:!0,alwaysChildren:!0,compact:!0,spaces:2});return JSON.parse(i).tt.body.div.p.reduce((function(t,i,s){var a=i._text,n=Array.isArray(a),r=i._attributes;return e.computeEndTime(r.begin,r.dur),t+(e.computeEndTime(r.begin,"00:00:0")+" --\x3e ")+e.computeEndTime(r.begin,r.dur)+"\n"+(n?a.join("\n"):a)+"\n\n"}),"WEBVTT\n\n\n")},function(t){t.doWhen=function(e){return t.Deferred((function(i){var s=t.extend({},{when:null,exec:function(){},interval:100,attempts:100,delayed:0},e,{checkId:null}),startChecking=function(){if(!0===s.when())return s.exec.call(i.promise()),void i.resolve();s.checkId=setInterval((function(){0===s.attempts?(clearInterval(s.checkId),i.reject()):(--s.attempts,!0===s.when()&&(s.attempts=0,clearInterval(s.checkId),s.exec.call(i.promise()),i.resolve()))}),s.interval)};s.delayed>0?setTimeout(startChecking,Number(s.delayed)):startChecking()})).promise()}}(jQuery),function(t){AblePlayer.prototype.injectVTS=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,f,g,m,v;if(e=this,t("#able-vts").length&&this.vtsTracks.length){for(T in this.langs=[],this.getAllLangs(this.vtsTracks),this.vtsLang=this.lang,i=t("<h2>").text("Video Transcript Sorter"),t("#able-vts").append(i),this.$vtsAlert=t("<div>",{id:"able-vts-alert","aria-live":"polite","aria-atomic":"true"}),t("#able-vts").append(this.$vtsAlert),s=t("<div>",{id:"able-vts-instructions"}),a=t("<p>").text("Use the Video Transcript Sorter to perform any of the following tasks:"),r=t("<ul>"),o=t("<li>").text("Reorder chapters, descriptions, captions, and/or subtitles so they appear in the proper sequence in Able Player's auto-generated transcript."),l=t("<li>").text("Modify content or start/end times (all are directly editable within the table)."),h=t("<li>").text("Insert new content, such as chapters or descriptions."),n=t("<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.'),r.append(o,l,h),s.append(a,r,n),t("#able-vts").append(s),p=t("<fieldset>"),c=t("<legend>").text("Select a language"),p.append(c),this.langs)d="vts-lang-radio-"+this.langs[T],u=t("<div>",{}),g=t("<input>",{type:"radio",name:"vts-lang",id:d,value:this.langs[T]}).on("click",(function(){e.vtsLang=t(this).val(),e.showVtsAlert("Loading "+e.getLanguageName(e.vtsLang)+" tracks"),e.injectVtsTable("update",e.vtsLang)})),this.langs[T]==this.lang&&g.prop("checked",!0),f=t("<label>",{for:d}).text(this.getLanguageName(this.langs[T])),u.append(g,f),p.append(u);var y,b,P,k,T;t("#able-vts").append(p),m=t("<button>",{type:"button",id:"able-vts-save",value:"save"}).text("Save Changes"),t("#able-vts").append(m),this.injectVtsTable("add",this.vtsLang),y=["captions","chapters","descriptions","subtitles"],t('td[contenteditable="true"]').on("focus",(function(){b=t(this).text()})).on("blur",(function(){b!=t(this).text()&&(P=t(this).index(),k=t(this).text(),1===P?-1===t.inArray(k,y)&&("s"===k.substring(0,1)?t(this).text("subtitles"):"d"===k.substring(0,1)?t(this).text("descriptions"):"ch"===k.substring(0,2)?t(this).text("chapters"):t(this).text("captions")):2!==P&&3!==P||t(this).text(e.formatTimestamp(k)))})).on("keydown",(function(t){t.stopPropagation()})),t("#able-vts-save").on("click",(function(i){i.stopPropagation(),"save"==t(this).attr("value")?(t(this).attr("value","cancel").text("Return to Editor"),v=t("#able-vts table"),t("#able-vts-instructions").hide(),t("#able-vts > fieldset").hide(),t("#able-vts table").remove(),t("#able-vts-icon-credit").remove(),e.parseVtsOutput(v)):(t(this).attr("value","save").text("Save Changes"),t("#able-vts-output").remove(),t("#able-vts-instructions").show(),t("#able-vts > fieldset").show(),t("#able-vts").append(v),t("#able-vts").append(e.getIconCredit()),e.showVtsAlert("Cancelling saving. Any edits you made have been restored in the VTS table."))}))}},AblePlayer.prototype.setupVtsTracks=function(t,e,i,s,a,n){var r,o;r=this.getFilenameFromPath(a),o=this.parseVtsTracks(n),this.vtsTracks.push({kind:t,language:e,label:s,srcFile:r,cues:o})},AblePlayer.prototype.getFilenameFromPath=function(t){var e;return-1===(e=t.lastIndexOf("/"))?t:t.substring(e+1)},AblePlayer.prototype.getFilenameFromTracks=function(t,e){for(var i=0;i<this.vtsTracks.length;i++)if(this.vtsTracks[i].kind===t&&this.vtsTracks[i].language===e)return this.vtsTracks[i].srcFile;return!1},AblePlayer.prototype.parseVtsTracks=function(t){var e,i,s,a,n,r,o,l,h;for(e=t.split("\n"),s=[],a=0;a<e.length;)if(-1!==(r=e[a]).indexOf(" --\x3e ")){if(i=r.trim().split(" "),this.isValidTimestamp(i[0])&&this.isValidTimestamp(i[2])){for(l="",n=a+1,h=!1;n<e.length&&!h;)(o=e[n].trim()).length>0?l.length>0?l+="\n"+o:l+=o:h=!0,n++;s.push({start:i[0],end:i[2],content:l}),a=n}}else a++;return s},AblePlayer.prototype.isValidTimestamp=function(t){return!!/^[0-9:,.]$/.test(t)},AblePlayer.prototype.formatTimestamp=function(t){var e,i;if(e=t.substring(0,t.lastIndexOf(".")+1),(i=t.substring(t.lastIndexOf(".")+1)).length>3)i=i.substring(0,3);else if(i.length<3)for(;i.length<3;)i+="0";return e+i},AblePlayer.prototype.injectVtsTable=function(e,i){var s,a,n,r,o,l,h,p;for("update"===e&&(t("#able-vts table").remove(),t("#able-vts-icon-credit").remove()),s=t("<table>",{lang:i}),r=t("<tr>",{lang:"en"}),a=["Row #","Kind","Start","End","Content","Actions"],n=0;n<a.length;n++)o=t("<th>",{scope:"col"}).text(a[n]),"Actions"===a[n]&&o.addClass("actions"),r.append(o);for(s.append(r),h=this.getAllRows(i),n=0;n<h.length;n++)r=t("<tr>",{id:"able-vts-row-"+(p=n+1),class:"kind-"+h[n].kind}),l=t("<td>").text(p),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].kind),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].start),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].end),r.append(l),l=t("<td>",{contenteditable:"true"}).text(h[n].content),r.append(l),l=this.addVtsActionButtons(p,h.length),r.append(l),s.append(r);t("#able-vts").append(s),t("#able-vts").append(this.getIconCredit())},AblePlayer.prototype.addVtsActionButtons=function(e,i){var s,a,n,r,o,l,h,p,c,u;for(s=this,a=t("<td>"),n=["up","down","insert","delete"],r=0;r<n.length;r++)"up"===(o=n[r])?e>1&&(l=t("<button>",{id:"able-vts-button-up-"+e,title:"Move up","aria-label":"Move Row "+e+" up"}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101c-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.594l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"down"===o?e<i&&(l=t("<button>",{id:"able-vts-button-down-"+e,title:"Move down","aria-label":"Move Row "+e+" down"}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"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.424C1.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.428s9.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"insert"===o?(l=t("<button>",{id:"able-vts-button-insert-"+e,title:"Insert row below","aria-label":"Insert row before Row "+e}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"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.414C242.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.775H27.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.411c5.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.987h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77c7.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"delete"===o&&(l=t("<button>",{id:"able-vts-button-delete-"+e,title:"Delete row ","aria-label":"Delete Row "+e}).on("click",(function(t){s.onClickVtsActionButton(t.currentTarget)})),h=t("<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"}),c=t("<path>",{d:"M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607C429.063,46.021,414.825,31.782,397.281,31.782z"}),u=t("<path>",{d:"M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042c17.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.891c8.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.804zM238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26c0,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.804c0-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.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z"}),p=t("<g>").append(c,u),h.append(p),l.append(h),l.html(l.html()),a.append(l));return a},AblePlayer.prototype.updateVtsActionButtons=function(t,e){var i,s,a,n,r,o;for(i=0;i<t.length;i++)a=(s=t.eq(i)).attr("id"),n=s.attr("aria-label"),r=a.replace(/[0-9]+/g,e),o=n.replace(/[0-9]+/g,e),s.attr("id",r),s.attr("aria-label",o)},AblePlayer.prototype.getIconCredit=function(){return'<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>'},AblePlayer.prototype.getAllLangs=function(e){var i;for(i in e)e[i].hasOwnProperty("language")&&-1===t.inArray(e[i].language,this.langs)&&(this.langs[this.langs.length]=e[i].language)},AblePlayer.prototype.getAllRows=function(t){var e,i,s,a;for(a=[],e=0;e<this.vtsTracks.length;e++)if((i=this.vtsTracks[e]).language==t)for(s in i.cues)a.push({kind:i.kind,lang:t,id:i.cues[s].id,start:i.cues[s].start,end:i.cues[s].end,content:i.cues[s].content});return a.sort((function(t,e){return t.start>e.start?1:-1})),a},AblePlayer.prototype.onClickVtsActionButton=function(e){var i,s,a;s=(i=t(e).attr("id").split("-"))[3],a=i[4],"up"==s?this.moveRow(a,"up"):"down"==s?this.moveRow(a,"down"):"insert"==s?this.insertRow(a):"delete"==s&&this.deleteRow(a)},AblePlayer.prototype.insertRow=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,g,m;for(a=(s=(i=t("#able-vts table")).find("tr")).length-1,n=parseInt(e)+1,r=t("<tr>",{id:"able-vts-row-"+n}),o=t("<td>").text(n),r.append(o),c=null,l=t("<select>",{id:"able-vts-kind-"+n,"aria-label":"What kind of track is this?",placeholder:"Select a kind"}).on("change",(function(){c=t(this).val(),u="kind-"+c,d=t(this).closest("tr"),t(this).parent().text(c),d.addClass(u)})),h=["","captions","chapters","descriptions","subtitles"],f=0;f<h.length;f++)p=t("<option>",{value:h[f]}).text(h[f]),l.append(p);for(o=t("<td>").append(l),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=this.addVtsActionButtons(n,a),r.append(o),i.find("tr").eq(e).after(r),f=n;f<=a;f++)g=f+1,s.eq(f).attr("id","able-vts-row-"+g),s.eq(f).find("td").eq(0).text(g),m=s.eq(f).find("button"),this.updateVtsActionButtons(m,g);this.adjustTimes(n),this.showVtsAlert("A new row "+n+" has been inserted"),l.focus()},AblePlayer.prototype.deleteRow=function(e){var i,s,a,n,r,o;for((i=t("#able-vts table"))[0].deleteRow(e),a=(s=i.find("tr")).length-1,n=e;n<=a;n++)r=n,s.eq(n).attr("id","able-vts-row-"+r),s.eq(n).find("td").eq(0).text(r),o=s.eq(n).find("button"),this.updateVtsActionButtons(o,r);this.showVtsAlert("Row "+e+" has been deleted")},AblePlayer.prototype.moveRow=function(e,i){var s,a,n,r;t("#able-vts table").find("tr"),s=t("#able-vts table").find("tr").eq(e),"up"==i?(a=parseInt(e)-1,(n=t("#able-vts table").find("tr").eq(a)).before(s)):"down"==i&&(a=parseInt(e)+1,(n=t("#able-vts table").find("tr").eq(a)).after(s)),s.attr("id","able-vts-row-"+a),s.find("td").eq(0).text(a),this.updateVtsActionButtons(s.find("button"),a),n.attr("id","able-vts-row-"+e),n.find("td").eq(0).text(e),this.updateVtsActionButtons(n.find("button"),e),this.adjustTimes(a),r="Row "+e+" has been moved "+i,r+=" and is now Row "+a,this.showVtsAlert(r)},AblePlayer.prototype.adjustTimes=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,f,g,m,v;(i=[]).captions=.001,i.descriptions=.001,i.chapters=.001,h=(r=(s=t("#able-vts table").find("tr")).eq(e)).is('[class^="kind-"]')?this.getKindFromClass(r.attr("class")):"captions",u=this.getSecondsFromColonTime(r.find("td").eq(2).text()),g=this.getSecondsFromColonTime(r.find("td").eq(3).text()),e>1?(a=e-1,p=(o=s.eq(a)).is('[class^="kind-"]')?this.getKindFromClass(o.attr("class")):null,d=this.getSecondsFromColonTime(o.find("td").eq(2).text()),m=this.getSecondsFromColonTime(o.find("td").eq(3).text())):(a=null,o=null,p=null,d=null,m=null),e<s.length-1?(n=e+1,c=(l=s.eq(n)).is('[class^="kind-"]')?this.getKindFromClass(l.attr("class")):null,f=this.getSecondsFromColonTime(l.find("td").eq(2).text()),v=this.getSecondsFromColonTime(l.find("td").eq(3).text())):(n=null,l=null,c=null,f=null,v=null),isNaN(u)?(null==p&&(p="captions",o.attr("class","kind-captions"),o.find("td").eq(1).html("captions")),"captions"===p?(u=(parseFloat(m)+.001).toFixed(3),g=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+i[h]).toFixed(3)):"chapters"===p?(u=(parseFloat(d)+.001).toFixed(3),g=f?(parseFloat(f)-.001).toFixed(3):(parseFloat(u)+minDurartion[h]).toFixed(3)):"descriptions"===p&&(u=(parseFloat(d)+i.descriptions).toFixed(3),g=(parseFloat(u)+i.descriptions).toFixed(3))):d?d<u?u<f||(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)):(u=(parseFloat(d)+i[p]).toFixed(3),g=(parseFloat(u)+i[h]).toFixed(3)):u<f||(f=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(f)+i[c]).toFixed(3)),g-u<i[h]&&(g=(parseFloat(u)+i[h]).toFixed(3),f&&(f=(parseFloat(g)+.001).toFixed(3))),r.find("td").eq(2).text(this.formatSecondsAsColonTime(u,!0)),r.find("td").eq(3).text(this.formatSecondsAsColonTime(g,!0)),o&&(o.find("td").eq(2).text(this.formatSecondsAsColonTime(d,!0)),o.find("td").eq(3).text(this.formatSecondsAsColonTime(m,!0))),l&&(l.find("td").eq(2).text(this.formatSecondsAsColonTime(f,!0)),l.find("td").eq(3).text(this.formatSecondsAsColonTime(v,!0)))},AblePlayer.prototype.getKindFromClass=function(t){var e,i;return e=t.indexOf("kind-")+5,-1==(i=t.indexOf(" ",e))?t.substring(e):t.substring(e,i)},AblePlayer.prototype.showVtsAlert=function(t){this.$vtsAlert.text(t).show().delay(3e3).fadeOut("slow")},AblePlayer.prototype.parseVtsOutput=function(e){var i,s,a,n,r,o,l,h,p,c;for(i=e.attr("lang"),a=["captions","chapters","descriptions","subtitles"],r={},s=0;s<a.length;s++)r[n=a[s]]="WEBVTT\n\n";if((o=e.find("tr")).length>0)for(s=0;s<o.length;s++)n=o.eq(s).find("td").eq(1).text(),-1!==t.inArray(n,a)&&(l=o.eq(s).find("td").eq(2).text(),h=o.eq(s).find("td").eq(3).text(),p=o.eq(s).find("td").eq(4).text(),void 0!==l&&void 0!==h&&(r[n]+=l+" --\x3e "+h+"\n","undefined"!==p&&(r[n]+=p),r[n]+="\n\n"));for(c=t("<div>",{id:"able-vts-output"}),t("#able-vts").append(c),s=0;s<a.length;s++)r[n=a[s]].length>8&&this.showWebVttOutput(n,r[n],i)},AblePlayer.prototype.showWebVttOutput=function(e,i,s){var a,n,r,o,l;a=t("<h3>").text(e.charAt(0).toUpperCase()+e.slice(1)),o="If you made changes, copy/paste the following content ",(n=this.getFilenameFromTracks(e,s))?(o+="to replace the original content of your "+this.getLanguageName(s)+" ",o+="<em>"+e+"</em> WebVTT file (<strong>"+n+"</strong>)."):o+="into a new "+this.getLanguageName(s)+" <em>"+e+"</em> WebVTT file.",r=t("<p>",{class:"able-vts-output-instructions"}).html(o),l=t("<textarea>").text(i),t("#able-vts-output").append(a,r,l)}}(jQuery),function(t){AblePlayer.prototype.initVimeoPlayer=function(){var e,i,s,a,n,r;return e=this,s=(i=new t.Deferred).promise(),a=this.mediaId+"_vimeo",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.vimeoDescId&&this.prefDesc?this.vimeoDescId:this.vimeoId,this.activeVimeoId=n,this.okToPlay?"true":"false",r=this.playerWidth?this.vimeoUrlHasParams?{url:n,width:this.playerWidth,controls:!1}:{id:n,width:this.playerWidth,controls:!1}:this.vimeoUrlHasParams?{url:n,controls:!1}:{id:n,controls:!1},this.vimeoPlayer=new Vimeo.Player(a,r),this.vimeoPlayer.ready().then((function(){t("#"+a).children("iframe").attr({tabindex:"-1","aria-hidden":!0}),e.vimeoPlayer.getVideoWidth().then((function(t){t&&e.vimeoPlayer.getVideoHeight().then((function(i){i&&e.resizePlayer(t,i)}))})).catch((function(t){})),e.hasPlaylist||(e.$media.remove(),e.vimeoPlaybackRate=1,e.vimeoPlayer.setPlaybackRate(e.vimeoPlaybackRate).then((function(t){e.vimeoSupportsPlaybackRateChange=!0})).catch((function(t){e.vimeoSupportsPlaybackRateChange=!1})),i.resolve())})),s},AblePlayer.prototype.getVimeoPaused=function(){var e,i;return i=(e=new t.Deferred).promise(),this.vimeoPlayer.getPaused().then((function(t){e.resolve(t)})),i},AblePlayer.prototype.getVimeoEnded=function(){var e,i;return i=(e=new t.Deferred).promise(),this.vimeoPlayer.getEnded().then((function(t){e.resolve(t)})),i},AblePlayer.prototype.getVimeoState=function(){var e,i,s,a,n;return i=(e=new t.Deferred).promise(),s=[],a=this.vimeoPlayer.getPaused(),n=this.vimeoPlayer.getEnded(),s.push(a),s.push(n),a.then((function(t){e.resolve(t)})),n.then((function(t){e.resolve(t)})),t.when.apply(t,s).then((function(){e.resolve()})),i},AblePlayer.prototype.getVimeoCaptionTracks=function(){var e,i,s,a=new t.Deferred,n=a.promise();return e=this,this.vimeoPlayer.getTextTracks().then((function(t){if(t.length){for(i=0;i<t.length;i++)e.hasCaptions=!0,1===e.prefCaptions?e.captionsOn=!0:e.captionsOn=!1,s=t[i].language===e.lang,e.tracks.push({kind:t[i].kind,language:t[i].language,label:t[i].label,def:s});e.captions=e.tracks,e.hasCaptions=!0,e.setupPopups("captions"),a.resolve()}else e.hasCaptions=!1,e.usingVimeoCaptions=!1,a.resolve()})),n},AblePlayer.prototype.getVimeoPosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+youTubeId;return"120"==e?i+"/default.jpg":"320"==e||"480"==e?i+"/hqdefault.jpg":"640"==e&&i+"/sddefault.jpg"},AblePlayer.prototype.getVimeoId=function(t){var e;return this.vimeoUrlHasParams=!1,"number"==typeof t?t:-1!==t.indexOf("vimeo.com")?-1!==t.indexOf("?")?(this.vimeoUrlHasParams=!0,t):(e=(t=t.trim()).lastIndexOf("/")+1,t.substring(e)):t}}(jQuery); \ No newline at end of file +/! ableplayer V4.8.0 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN / +"use strict";var AblePlayerInstances=[];!function(t){t(function(){t("video, audio").each(function(e,i){void 0!==t(i).data("able-player")&&AblePlayerInstances.push(new AblePlayer(t(this),t(i)))})}),window.onYouTubeIframeAPIReady=function(){AblePlayer.youTubeIframeAPIReady=!0,t("body").trigger("youTubeIframeAPIReady",[])},t(window).on("keydown",function(t){1===AblePlayer.nextIndex&&AblePlayer.lastCreated.onPlayerKeyPress(t)}),window.AblePlayer=function(e){var i=this;if(AblePlayer.lastCreated=this,this.media=e,0!==t(e).length){void 0!==t(e).attr("autoplay")?(this.autoplay=!0,this.okToPlay=!0):(this.autoplay=!1,this.okToPlay=!1),this.loop=void 0!==t(e).attr("loop"),this.playsInline=void 0!==t(e).attr("playsinline")?"1":"0",this.hasPoster=!(!t(e).attr("poster")&&!t(e).data("poster")),this.audioPoster=t(e).data("poster"),this.audioPosterAlt=t(e).data("poster-alt"),this.width=t(e).attr("width")??0,this.height=t(e).attr("height")??0;var s=t(e).data("start-time"),a=!("number"!=typeof s&&("string"!=typeof s||""===value.trim()||isNaN(value)||!isFinite(Number(value))));if(this.startTime=void 0!==s&&a?s:0,this.debug=void 0!==t(e).data("debug")&&!1!==t(e).data("debug"),void 0!==t(e).data("root-path")?this.rootPath=t(e).data("root-path").replace(/\/?$/,"/"):this.rootPath=this.getRootPath(),this.defaultVolume=7,void 0!==t(e).data("volume")&&""!==t(e).data("volume")){var n=t(e).data("volume");n>=0&&n<=10&&(this.defaultVolume=n)}if(this.volume=this.defaultVolume,void 0!==t(e).data("use-chapters-button")&&!1===t(e).data("use-chapters-button")?this.useChaptersButton=!1:this.useChaptersButton=!0,void 0!==t(e).data("descriptions-audible")&&!1===t(e).data("descriptions-audible")||void 0!==t(e).data("description-audible")&&!1===t(e).data("description-audible")?this.readDescriptionsAloud=!1:this.readDescriptionsAloud=!0,this.descVoices=[],this.descReader="screenreader"==t(e).data("desc-reader")?"screenreader":"browser",this.defaultStateCaptions="off"==t(e).data("state-captions")?0:1,this.defaultStateDescriptions="on"==t(e).data("state-descriptions")?1:0,this.defaultDescPause="off"==t(e).data("desc-pause-default")?0:1,void 0!==t(e).data("heading-level")&&""!==t(e).data("heading-level")){var r=t(e).data("heading-level");/^[0-6]$/.test(r)&&(this.playerHeadingLevel=r)}var o=t(e).data("transcript-div");void 0!==o&&""!==o&&null!==document.getElementById(o)?this.transcriptDivLocation=o:this.transcriptDivLocation=null;var l=t(e).data("include-transcript");this.hideTranscriptButton=void 0!==l&&!1===l,this.transcriptType=null,void 0!==t(e).data("transcript-src")?(this.transcriptSrc=t(e).data("transcript-src"),this.transcriptSrcHasRequiredParts()&&(this.transcriptType="manual")):t(e).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length>0&&(this.transcriptType=this.transcriptDivLocation?"external":"popup"),this.lyricsMode=void 0!==t(e).data("lyrics-mode")&&!1!==t(e).data("lyrics-mode"),void 0!==t(e).data("transcript-title")&&""!==t(e).data("transcript-title")&&(this.transcriptTitle=t(e).data("transcript-title"));var h=t(e).data("sign-div");void 0!==h&&""!==h&&null!==document.getElementById(h)?this.$signDivLocation=t("#"+h):this.$signDivLocation=null,this.defaultCaptionsPosition="overlay"===t(e).data("captions-position")?"overlay":"below";var p=t(e).data("chapters-div");void 0!==p&&""!==p&&(this.chaptersDivLocation=p),void 0!==t(e).data("chapters-title")&&(this.chaptersTitle=t(e).data("chapters-title"));var c=t(e).data("chapters-default");this.defaultChapter=void 0!==c&&""!==c?c:null,this.speedIcons="arrows"===t(e).data("speed-icons")?"arrows":"animals";var u=t(e).data("seekbar-scope");this.seekbarScope="chapter"===u||"chapters"===u?"chapter":"video";var d=t(e).data("youtube-id");if(void 0!==d&&""!==d&&(this.youTubeId=this.getYouTubeId(d),!this.hasPoster)){let i=this.getYouTubePosterUrl(this.youTubeId,"640");t(e).attr("poster",i)}var g=t(e).data("youtube-desc-id");void 0!==g&&""!==g&&(this.youTubeDescId=this.getYouTubeId(g));var f=t(e).data("youtube-sign-src");void 0!==f&&""!==f&&(this.youTubeSignId=this.getYouTubeId(f));var m=t(e).data("youtube-nocookie");this.youTubeNoCookie=!(void 0===m||!m);var v=t(e).data("vimeo-id");if(void 0!==v&&""!==v&&(this.vimeoId=this.getVimeoId(v),!this.hasPoster)){let s=i.getVimeoPosterUrl(this.vimeoId,"1200");t(e).attr("poster",s)}var y=t(e).data("vimeo-desc-id");if(void 0!==y&&""!==y&&(this.vimeoDescId=this.getVimeoId(y)),this.skin="legacy"==t(e).data("skin")?"legacy":"2020",void 0!==t(e).data("width")?this.playerWidth=parseInt(t(e).data("width")):t(e)[0].getAttribute("width")?this.playerWidth=parseInt(t(e)[0].getAttribute("width")):this.playerWidth=null,this.iconType="font",this.forceIconType=!1,void 0!==t(e).data("icon-type")&&""!==t(e).data("icon-type")){var b=t(e).data("icon-type");"font"!==b&&"image"!==b&&"svg"!==b||(this.iconType=b,this.forceIconType=!0)}var P=t(e).data("allow-fullscreen");if(this.allowFullscreen=void 0===P||!1!==P,this.clickedFullscreenButton=!1,this.restoringAfterFullscreen=!1,this.defaultSeekInterval=10,this.useFixedSeekInterval=!1,void 0!==t(e).data("seek-interval")&&""!==t(e).data("seek-interval")){var k=t(e).data("seek-interval");/^[1-9][0-9]$/.test(k)&&(this.seekInterval=k,this.useFixedSeekInterval=!0)}var T=t(e).data("show-now-playing");this.showNowPlaying=void 0===T||!1!==T,void 0!==t(e).data("use-ttml")?(this.useTtml=!0,this.convert=require("xml-js")):this.useTtml=!1;var w=t(e).data("test-fallback");this.testFallback=void 0!==w&&!1!==w&&("2"==w?2:1);var C=t(e).data("lang");this.lang=void 0!==C&&""!==C?C.toLowerCase():null;var $=t(e).data("meta-type");void 0!==$&&""!==$&&(this.metaType=$);var D=t(e).data("meta-div");void 0!==D&&""!==D&&(this.metaDiv=D);var A=t(e).data("search-div");if(void 0!==A&&""!==A){this.searchDiv=A;var x=t(e).data("search");void 0!==x&&""!==x&&(this.searchString=x);var S=t(e).data("search-lang");this.searchLang=void 0!==S&&""!==S?S:null;var I=t(e).data("search-ignore-caps");this.searchIgnoreCaps=void 0!==I&&!1!==I}void 0!==t(e).data("hide-controls")&&!1!==t(e).data("hide-controls")?(this.hideControls=!0,this.hideControlsOriginal=!0):(this.hideControls=!1,this.hideControlsOriginal=!1),void 0!==t(e).data("steno-mode")&&!1!==t(e).data("steno-mode")?(this.stenoMode=!0,void 0!==t(e).data("steno-iframe-id")&&""!==t(e).data("steno-iframe-id")?(this.stenoFrameId=t(e).data("steno-iframe-id"),this.$stenoFrame=t("#"+this.stenoFrameId),this.$stenoFrame.length||(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoFrameId=null,this.$stenoFrame=null)):(this.stenoMode=!1,this.stenoFrameId=null,this.$stenoFrame=null),this.setDefaults(),this.ableIndex=AblePlayer.nextIndex,AblePlayer.nextIndex+=1,this.title=t(e).attr("title"),this.tt={},async function fetchTranslations(t){try{await t.getTranslationText(),t.setup()}catch{t.provideFallback()}}(i=this)}else this.provideFallback()},AblePlayer.nextIndex=0,AblePlayer.prototype.setup=function(){var t=this;this.initializing=!0,this.reinitialize().then(function(){t.player?t.setupInstance().then(function(){t.setupInstancePlaylist(),t.hasPlaylist||t.recreatePlayer().then(function(){t.initializing=!1,t.playerCreated=!0})}):t.provideFallback()})},AblePlayer.getActiveDOMElement=function(){for(var t=document.activeElement;t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t},AblePlayer.localGetElementById=function(e,i){return e.getRootNode?t(e.getRootNode().querySelector("#"+i)):t(document.getElementById(i))},AblePlayer.youTubeIframeAPIReady=!1,AblePlayer.loadingYouTubeIframeAPI=!1}(jQuery),function(t){AblePlayer.prototype.setDefaults=function(){this.playerCreated=!1,this.playing=!1,this.paused=!0,this.clickedPlay=!1,this.fullscreen=!1,this.swappingSrc=!1,this.initializing=!1,this.cueingPlaylistItems=!1,this.buttonWithFocus=null,this.speechEnabled=null,this.setIconColor(),this.setButtonImages()},AblePlayer.prototype.getRootPath=function(){var t,e,i,s,a,n;for(t=document.getElementsByTagName("script"),e=0;e<t.length;e++)if(-1!==(i=t[e].src).substring(i.lastIndexOf("/")).indexOf("ableplayer")){s=i.split("?")[0];break}return n=(a=s.split("/").slice(0,-1).join("/")).lastIndexOf("/"),a.substring(0,n)+"/"},AblePlayer.prototype.setIconColor=function(){var e,i,s,a,n;for(e=["controller","toolbar"],i=0;i<e.length;i++)"controller"==e[i]?s=t("<div>",{class:"able-controller"}).hide():"toolbar"===e[i]&&(s=t("<div>",{class:"able-window-toolbar"}).hide()),t("body").append(s),n=.2126(a=s.css("background-color").replace(/[^\d,]/g,"").split(","))[0]+.7152a[1]+.0722a[2]<125?"white":"black","controller"===e[i]?this.iconColor=n:"toolbar"===e[i]&&(this.toolbarIconColor=n),s.remove()},AblePlayer.prototype.setButtonImages=function(){this.imgPath=this.rootPath+"button-icons/"+this.iconColor+"/",this.playButtonImg=this.imgPath+"play.png",this.pauseButtonImg=this.imgPath+"pause.png",this.restartButtonImg=this.imgPath+"restart.png",this.rewindButtonImg=this.imgPath+"rewind.png",this.forwardButtonImg=this.imgPath+"forward.png",this.previousButtonImg=this.imgPath+"previous.png",this.nextButtonImg=this.imgPath+"next.png","arrows"===this.speedIcons?(this.fasterButtonImg=this.imgPath+"slower.png",this.slowerButtonImg=this.imgPath+"faster.png"):"animals"===this.speedIcons&&(this.fasterButtonImg=this.imgPath+"rabbit.png",this.slowerButtonImg=this.imgPath+"turtle.png"),this.captionsButtonImg=this.imgPath+"captions.png",this.chaptersButtonImg=this.imgPath+"chapters.png",this.signButtonImg=this.imgPath+"sign.png",this.transcriptButtonImg=this.imgPath+"transcript.png",this.descriptionsButtonImg=this.imgPath+"descriptions.png",this.fullscreenExpandButtonImg=this.imgPath+"fullscreen-expand.png",this.fullscreenCollapseButtonImg=this.imgPath+"fullscreen-collapse.png",this.prefsButtonImg=this.imgPath+"preferences.png",this.helpButtonImg=this.imgPath+"help.png"},AblePlayer.prototype.getIconData=function(t){var e=Array();switch(t){case"play":e[0]="0 0 16 20",e[1]="M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z",e[2]="icon-play",e[3]=this.playButtonImg;break;case"pause":e[0]="0 0 20 20",e[1]="M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-pause",e[3]=this.pauseButtonImg;break;case"restart":e[0]="0 0 20 20",e[1]="M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z",e[2]="icon-restart",e[3]=this.restartButtonImg;break;case"rewind":e[0]="0 0 20 20",e[1]="M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z",e[2]="icon-rewind",e[3]=this.rewindButtonImg;break;case"forward":e[0]="0 0 20 20",e[1]="M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z",e[2]="icon-forward",e[3]=this.forwardButtonImg;break;case"previous":e[0]="0 0 20 20",e[1]="M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z",e[2]="icon-previous",e[3]=this.previousButtonImg;break;case"next":e[0]="0 0 20 20",e[1]="M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z",e[2]="icon-next",e[3]=this.nextButtonImg;break;case"slower":e[0]="0 0 11 20",e[1]="M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z",e[2]="icon-slower",e[3]=this.slowerButtonImg;break;case"faster":e[0]="0 0 11 20",e[1]="M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-faster",e[3]=this.fasterButtonImg;break;case"turtle":e[0]="0 0 20 20",e[1]="M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z",e[2]="icon-turtle",e[3]=this.slowerButtonImg;break;case"rabbit":e[0]="0 0 20 20",e[1]="M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z",e[2]="icon-rabbit",e[3]=this.fasterButtonImg;break;case"ellipsis":e[0]="0 0 20 20",e[1]="M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z",e[2]="icon-ellipsis",e[3]=!1;break;case"pipe":e[0]="0 0 20 20",e[1]="M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z",e[2]="icon-pipe",e[3]=!1;break;case"captions":e[0]="0 0 20 20",e[1]="M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z",e[2]="icon-captions",e[3]=this.captionsButtonImg;break;case"descriptions":e[0]="0 0 20 20",e[1]="M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z",e[2]="icon-descriptions",e[3]=this.descriptionsButtonImg;break;case"sign":e[0]="0 0 20 20",e[1]="M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z",e[2]="icon-sign",e[3]=this.signButtonImg;break;case"mute":case"volume-mute":e[0]="0 0 20 20",e[1]="M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z",e[2]="icon-volume-mute",e[3]=this.imgPath+"volume-mute.png";break;case"volume-soft":e[0]="0 0 20 20",e[1]="M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-soft",e[3]=this.imgPath+"volume-soft.png";break;case"volume-medium":e[0]="0 0 20 20",e[1]="M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-medium",e[3]=this.imgPath+"volume-medium.png";break;case"volume-loud":e[0]="0 0 21 20",e[1]="M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z",e[2]="icon-volume-loud",e[3]=this.imgPath+"volume-loud.png";break;case"chapters":e[0]="0 0 20 20",e[1]="M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z",e[2]="icon-chapters",e[3]=this.chaptersButtonImg;break;case"transcript":e[0]="0 0 20 20",e[1]="M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z",e[2]="icon-transcript",e[3]=this.transcriptButtonImg;break;case"preferences":e[0]="0 0 20 20",e[1]="M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z",e[2]="icon-preferences",e[3]=this.prefsButtonImg;break;case"close":e[0]="0 0 16 20",e[1]="M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z",e[2]="icon-close",e[3]=null;break;case"fullscreen-expand":e[0]="0 0 20 20",e[1]="M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z",e[2]="icon-fullscreen-expand",e[3]=this.fullscreenExpandButtonImg;break;case"fullscreen-collapse":e[0]="0 0 20 20",e[1]="M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z",e[2]="icon-fullscreen-collapse",e[3]=this.fullscreenCollapseButtonImg}return e},AblePlayer.prototype.reinitialize=function(){var e,i;if(i=(e=new this.defer).promise(),this.startedPlaying=!1,this.autoScrollTranscript=!0,this.$media=t(this.media).first(),this.media=this.$media[0],this.$media.is("audio"))this.mediaType="audio";else{if(!this.$media.is("video"))return this.provideFallback(),e.reject(),i;this.mediaType="video"}return this.$sources=this.$media.find("source"),this.player=this.getPlayer(),this.player||this.provideFallback(),this.setIconType(),e.resolve(),i},AblePlayer.prototype.setPlayerSize=function(t,e){"audio"!==this.mediaType&&t>0&&e>0&&(this.playerWidth=t,this.playerHeight=e,this.aspectRatio=e/t)},AblePlayer.prototype.setIconType=function(){if(this.forceIconType)return!1;this.iconType="svg"},AblePlayer.prototype.setupInstance=function(){var t=new this.defer,e=t.promise();return this.$media.attr("id")?this.mediaId=this.$media.attr("id"):(this.mediaId="ableMediaId_"+this.ableIndex,this.$media.attr("id",this.mediaId)),t.resolve(),e},AblePlayer.prototype.setupInstancePlaylist=function(){var e=this;if(this.hasPlaylist=!1,t(".able-playlist").each(function(){if(t(this).data("player")===e.mediaId){e.hasPlaylist=!0,e.$playlist=t(this).find("li"),t(this).find("li[data-youtube-id]").each(function(){var i=DOMPurify.sanitize(t(this).attr("data-youtube-id")),s=e.getYouTubePosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)}),t(this).find("li[data-vimeo-id]").each(function(){var i=t(this).attr("data-vimeo-id"),s=e.getVimeoPosterUrl(i,"120"),a=t("<img>",{src:s,alt:""});t(this).find("button").prepend(a)}),t(this).find("li span").attr("aria-hidden","true"),e.playlistIndex=0;var i=t(this).data("embedded");e.playlistEmbed=void 0!==i&&!1!==i}}),this.hasPlaylist&&this.loop&&this.media.removeAttribute("loop"),this.hasPlaylist&&this.playlistEmbed){var i=this.$playlist.parent();this.$playlistDom=i.clone(),i.remove()}this.hasPlaylist&&0===this.$sources.length&&(this.cuePlaylistItem(0),this.$sources=this.$media.find("source"))},AblePlayer.prototype.recreatePlayer=function(){var e,i,s,a,n;if(this.player)return i=(e=new this.defer).promise(),s=this,this.playerDeleted=!1,this.recreatingPlayer=!0,this.playerCreated||(this.loadCurrentPreferences(),this.injectPlayerCode(),this.resizePlayer(this.media.videoWidth,this.media.videoHeight)),this.getSampleDescriptionText(),this.initSignLanguage(),this.initPlayer().then(function(){s.getTracks().then(function(){s.initDescription().then(function(){s.setupTracks().then(function(){s.hasClosedDesc&&(!s.$descDiv||s.$descDiv&&!t.contains(s.$ableDiv[0],s.$descDiv[0]))&&s.injectTextDescriptionArea(),s.initSpeech("init"),s.setupTranscript().then(function(){s.initStenoFrame().then(function(){s.stenoMode&&s.$stenoFrame&&(s.stenoFrameContents=s.$stenoFrame.contents()),s.getMediaTimes().then(function(t){for(s.duration=t.duration,s.elapsed=t.elapsed,void 0===s.volume&&(s.volume=s.defaultVolume),s.volume&&s.setVolume(s.volume),s.transcriptType&&(s.addTranscriptAreaEvents(),s.updateTranscript()),s.captions.length&&s.initDefaultCaption(),s.setMediaAttributes(),s.addControls(),s.addEventListeners(),a=s.getPreferencesGroups(),n=0;n<a.length;n++)s.injectPrefsForm(a[n]);s.setupPopups(),s.updateCaption(),s.injectVTS(),s.populateChaptersDiv(),s.showSearchResults(),"html5"===s.player&&(s.loadingMedia||(s.$media[0].load(),s.loadingMedia=!0)),setTimeout(function(){s.refreshControls(),e.resolve()},100)})})})})})})},function(){s.provideFallback()}),i;console.log("Can't create player; no appropriate player type detected.")},AblePlayer.prototype.initPlayer=function(){var t,e=this;"html5"===this.player?t=this.initHtml5Player():"youtube"===this.player?t=this.initYouTubePlayer():"vimeo"===this.player&&(t=this.initVimeoPlayer());var i=new this.defer,s=i.promise();return t.then(function(){e.useFixedSeekInterval?(e.seekInterval||(e.seekInterval=e.defaultSeekInterval),e.seekIntervalCalculated=!0):e.setSeekInterval(),i.resolve()}).finally(function(){i.reject()}),s},AblePlayer.prototype.initStenoFrame=function(){var t,e;return e=(t=new this.defer).promise(),this.stenoMode&&this.$stenoFrame?(this.$stenoFrame[0].contentWindow,"complete"==document.readyState?t.resolve():this.$stenoFrame.on("load",function(){t.resolve()})):t.resolve(),e},AblePlayer.prototype.setSeekInterval=function(){var t;this.seekInterval=this.defaultSeekInterval,void 0===(t=this.useChapterTimes?this.chapterDuration:this.duration)||t<1?this.seekIntervalCalculated=!1:(this.seekInterval=t<=20?5:t<=30?6:t<=40?8:t<=100?10:Math.round(t/10,0),this.seekIntervalCalculated=!0)},AblePlayer.prototype.initDefaultCaption=function(){var t,e;if((t=this.captions).length>0){for(e=0;e<t.length;e++)!0===t[e].def&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);if(void 0===this.captionLang)for(e=0;e<t.length;e++)t[e].language===this.lang&&(this.captionLang=t[e].language,this.selectedCaptions=t[e]);void 0===this.captionLang&&(this.captionLang=t[0].language,this.selectedCaptions=t[0]),void 0!==this.captionLang&&(this.$transcriptLanguageSelect&&this.$transcriptLanguageSelect.find("option[lang="+this.captionLang+"]").prop("selected",!0),this.syncTrackLanguages("init",this.captionLang)),"vimeo"===this.player&&(this.usingVimeoCaptions&&1==this.prefCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(t){}).catch(function(t){t.name}):this.vimeoPlayer.disableTextTrack().then(function(){}).catch(function(t){}))}},AblePlayer.prototype.initHtml5Player=function(){var t=new this.defer,e=t.promise();return t.resolve(),e},AblePlayer.prototype.setMediaAttributes=function(){this.$media.attr("tabindex",-1);var t=this.$media.get(0).textTracks;if(t)for(var e=0;e<t.length;)t[e].mode="disabled",e+=1},AblePlayer.prototype.getPlayer=function(){return this.testFallback?null:this.youTubeId?"video"!==this.mediaType?null:"youtube":this.vimeoId?"video"!==this.mediaType?null:"vimeo":this.media.canPlayType?"html5":null}}(jQuery),function(t){AblePlayer.prototype.setPrefs=function(t){"undefined"!=typeof Cookies?Cookies.set("Able-Player",JSON.stringify(t),{expires:90,sameSite:"strict"}):localStorage.setItem("Able-Player",JSON.stringify(t))},AblePlayer.prototype.getPref=function(){var t,e={preferences:{},sign:{},transcript:{},voices:[]};try{t="undefined"!=typeof Cookies?JSON.parse(Cookies.get("Able-Player")):JSON.parse(localStorage.getItem("Able-Player"))}catch(i){this.setPrefs(e),t=e}return t||e},AblePlayer.prototype.updatePreferences=function(t){var e,i,s,a,n,r,o,l;if(e=this.getPref(),"transcript"===t||"sign"===t)"transcript"===t?(s=(i=this.$transcriptArea).position(),void 0===e.transcript&&(e.transcript={}),e.transcript.position=i.css("position"),e.transcript.zindex=i.css("z-index"),e.transcript.top=s.top,e.transcript.left=s.left,e.transcript.width=i.width(),e.transcript.height=i.height()):"sign"===t&&(s=(i=this.$signWindow).position(),void 0===e.sign&&(e.sign={}),e.sign.position=i.css("position"),e.sign.zindex=i.css("z-index"),e.sign.top=s.top,e.sign.left=s.left,e.sign.width=i.width(),e.sign.height=i.height());else if("voice"===t){void 0===e.voices&&(e.voices=[]),o=!1;for(var h=0;h<e.voices.length;h++)e.voices[h].lang===this.prefDescVoiceLang&&(o=!0,e.voices[h].name=this.prefDescVoice);o||(l={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(l))}else for(a=this.getAvailablePreferences(),n=0;n<a.length;n++)(r=a[n].name)==t&&(e.preferences[r]=this[r]);this.setPrefs(e)},AblePlayer.prototype.getPreferencesGroups=function(){return this.usingYouTubeCaptions?["captions","descriptions","keyboard"]:this.usingVimeoCaptions?["descriptions","keyboard"]:["captions","descriptions","keyboard","transcript"]},AblePlayer.prototype.getAvailablePreferences=function(){var t=[];return t.push({name:"prefAltKey",label:this.translate("prefAltKey","Alt"),group:"keyboard",default:1}),t.push({name:"prefCtrlKey",label:this.translate("prefCtrlKey","Control"),group:"keyboard",default:1}),t.push({name:"prefShiftKey",label:this.translate("prefShiftKey","Shift"),group:"keyboard",default:0}),t.push({name:"prefNoKeyShortcuts",label:this.translate("prefNoKeyShortcuts","Disable Keyboard Shortcuts"),group:"keyboard",default:0}),t.push({name:"prefTranscript",label:null,group:"transcript",default:0}),t.push({name:"prefHighlight",label:this.translate("prefHighlight","Highlight transcript as media plays"),group:"transcript",default:1}),t.push({name:"prefAutoScrollTranscript",label:null,group:"transcript",default:1}),t.push({name:"prefTabbable",label:this.translate("prefTabbable","Keyboard-enable transcript"),group:"transcript",default:0}),t.push({name:"prefCaptions",label:null,group:"captions",default:this.defaultStateCaptions}),this.usingYouTubeCaptions||("video"===this.mediaType&&t.push({name:"prefCaptionsPosition",label:this.translate("prefCaptionsPosition","Position"),group:"captions",default:this.defaultCaptionsPosition}),t.push({name:"prefCaptionsFont",label:this.translate("prefCaptionsFont","Font"),group:"captions",default:"sans-serif"})),t.push({name:"prefCaptionsSize",label:this.translate("prefCaptionsSize","Font size"),group:"captions",default:"100%"}),this.usingYouTubeCaptions||(t.push({name:"prefCaptionsColor",label:this.translate("prefCaptionsColor","Text Color"),group:"captions",default:"white"}),t.push({name:"prefCaptionsBGColor",label:this.translate("prefCaptionsBGColor","Background"),group:"captions",default:"black"}),t.push({name:"prefCaptionsOpacity",label:this.translate("prefCaptionsOpacity","Opacity"),group:"captions",default:"100%"})),"video"===this.mediaType&&(t.push({name:"prefDesc",label:null,group:"descriptions",default:this.defaultStateDescriptions}),t.push({name:"prefDescMethod",label:null,group:"descriptions",default:"video"}),t.push({name:"prefDescVoice",label:this.translate("prefDescVoice","Voice"),group:"descriptions",default:null}),t.push({name:"prefDescPitch",label:this.translate("prefDescPitch","Pitch"),group:"descriptions",default:1}),t.push({name:"prefDescRate",label:this.translate("prefDescRate","Rate"),group:"descriptions",default:1}),t.push({name:"prefDescVolume",label:this.translate("volume","Volume"),group:"descriptions",default:1}),"video"!==this.descMethod&&t.push({name:"prefDescPause",label:this.translate("prefDescPause","Automatically pause video when description starts"),group:"descriptions",default:this.defaultDescPause}),t.push({name:"prefDescVisible",label:this.translate("prefDescVisible","Make description visible"),group:"descriptions",default:0})),t.push({name:"prefSign",label:null,group:null,default:0}),t},AblePlayer.prototype.loadCurrentPreferences=function(){for(var t=this.getAvailablePreferences(),e=this.getPref(),i=0;i<t.length;i++){var s=t[i].name,a=t[i].default;void 0!==e.preferences[s]?this[s]=e.preferences[s]:(e.preferences[s]=a,this[s]=a)}void 0!==e.voices&&(this.prefVoices=e.voices),this.setPrefs(e)},AblePlayer.prototype.injectPrefsForm=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v,y,b,P,k,T,w,C,$,D,A,x,S,I,N,M,B,V,L,F,O,z,R,E,W,H;i=this,s=this.getAvailablePreferences();var j="able-prefs-form-"+e;if((a=t("<div>",{class:"able-prefs-form "})).addClass(j),"captions"==e)n=this.translate("prefTitleCaptions","Captions Preferences");else if("descriptions"==e){n=this.translate("prefTitleDescriptions","Audio Description Preferences");var q=t("<p>",{text:this.translate("prefIntroDescription1","This media player supports audio description in two ways: ")}),K=t("<ul>"),Y=t("<li>",{text:this.translate("prefDescFormatOption1","alternative described version of video")}),U=t("<li>",{text:this.translate("prefDescFormatOption2","text-based description, announced by screen reader")});K.append(Y,U),this.hasOpenDesc&&this.hasClosedDesc?(N=this.translate("prefIntroDescription2","The current video has ")+" ",N+="<strong>"+this.translate("prefDescFormatOption1b","an alternative described version")+"</strong>",N+=" <em>"+this.translate("and","and")+"</em> <strong>"+this.translate("prefDescFormatOption2b","text-based description, announced by screen reader")+"</strong>."):this.hasOpenDesc?(N=this.translate("prefIntroDescription2","The current video has "),N+=" <strong>"+this.translate("prefDescFormatOption1b","an alternative described version")+"</strong>."):this.hasClosedDesc?(N=this.translate("prefIntroDescription2","The current video has "),N+=" <strong>"+this.translate("prefDescFormatOption2b","text-based description, announced by screen reader")+"</strong>."):N=this.translate("prefIntroDescriptionNone","The current video has no audio description in either format."),o=t("<p>",{html:N}),l=this.translate("prefIntroDescription3","Use the following form to set your preferences related to text-based audio description."),(this.hasOpenDesc||this.hasClosedDesc)&&(l+=" "+this.translate("prefIntroDescription4","After you save your settings, audio description can be toggled on/off using the Description button.")),h=t("<p>",{text:l}),a.append(q,K,o,h)}else"keyboard"==e?(n=this.translate("prefTitleKeyboard","Keyboard Preferences"),r=this.translate("prefIntroKeyboard1","The media player on this web page can be operated from anywhere on the page using keyboard shortcuts (see below for a list)."),r+=" "+this.translate("prefIntroKeyboard2","Modifier keys (Shift, Alt, and Control) can be assigned below."),r+=" "+this.translate("prefIntroKeyboard3","NOTE: Some key combinations might conflict with keys used by your browser and/or other software applications. Try various combinations of modifier keys to find one that works for you."),q=t("<p>",{text:r}),a.append(q)):"transcript"==e&&(n=this.translate("prefTitleTranscript","Transcript Preferences"));for(u=t("<div>").attr("role","group"),d="able-prefs-"+e,m=(g=this.mediaId+"-prefs-"+e)+"-legend",u.addClass(d).attr("id",g),"keyboard"===e?((f=t("<h2>"+this.translate("prefHeadingKeyboard1","Modifier keys used for shortcuts")+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(f)):"descriptions"===e&&((f=t("<h2>"+this.translate("prefHeadingTextDescription","Text-based audio description")+"</h2>")).attr("id",m),u.attr("aria-labelledby",m),u.append(f)),p=0;p<s.length;p++)if(s[p].group==e&&s[p].label){if(b="able-"+(v=s[p].name),P=this.mediaId+"_"+v,y=t("<div>").addClass(b),"captions"===e){for(k=t('<label for="'+P+'"> '+s[p].label+"</label>"),T=t("<select>",{name:v,id:P}),"prefCaptions"!==v&&"prefCaptionsStyle"!==v&&T.on("change",function(){x=t(this).attr("name"),i.stylizeCaptions(i.$sampleCapsDiv,x)}),w=this.getCaptionsOptions(v),c=0;c<w.length;c++)"prefCaptionsPosition"===v?"overlay"===($=w[c])?A=this.translate("captionsPositionOverlay","Overlay"):"below"===$&&($=w[c],A=this.translate("captionsPositionBelow","Below video")):"prefCaptionsFont"===v||"prefCaptionsColor"===v||"prefCaptionsBGColor"===v?($=w[c][0],A=w[c][1]):"prefCaptionsOpacity"===v?($=w[c],A=w[c],A+="0%"===$?" ("+this.translate("transparent","transparent")+")":" ("+this.translate("solid","solid")+")"):($=w[c],A=w[c]),C=t("<option>",{value:$,text:A}),this[v]===$&&C.prop("selected",!0),T.append(C);y.append(k,T)}else if("descriptions"===e){if(k=t('<label for="'+P+'"> '+s[p].label+"</label>"),"prefDescPause"===v||"prefDescVisible"===v)y.addClass("able-prefs-checkbox"),T=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&T.prop("checked",!0),y.append(T,k);else if(this.synth){if(y.addClass("able-prefs-select"),T=t("<select>",{name:v,id:P}),"prefDescVoice"===v&&this.descVoices.length){for(M=this.getPrefDescVoice(),c=0;c<this.descVoices.length;c++)$=this.descVoices[c].name,D=this.descVoices[c].lang.substring(0,2).toLowerCase(),A=$+" ("+this.descVoices[c].lang+")",C=t("<option>",{value:$,"data-lang":D,text:A}),M===$&&C.prop("selected",!0),T.append(C);this.$voiceSelectField=T}else if("prefDescPitch"==v?w=[0,.5,1,1.5,2]:"prefDescRate"==v?w=[.7,.8,.9,1,1.1,1.2,1.5,2,2.5,3]:"prefDescVolume"==v&&(w=[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]),void 0!==w)for(c=0;c<w.length;c++)$=w[c],A=this.makePrefsValueReadable(v,$),C=t("<option>",{value:$,text:A}),this[v]==$&&C.prop("selected",!0),T.append(C),y.append(k,T);T.on("change",function(){i.announceDescriptionText("sample",i.currentSampleText)}),y.append(k,T)}}else k=t('<label for="'+P+'"> '+s[p].label+"</label>"),T=t("<input>",{type:"checkbox",name:v,id:P,value:"true"}),1===this[v]&&T.prop("checked",!0),"keyboard"===e&&T.on("change",function(){"prefAltKey"===(x=t(this).attr("name"))?(S=".able-modkey-alt",I=i.tt.prefAltKey+" + "):"prefCtrlKey"===x?(S=".able-modkey-ctrl",I=i.tt.prefCtrlKey+" + "):"prefShiftKey"===x&&(S=".able-modkey-shift",I=i.tt.prefShiftKey+" + "),"prefNoKeyShortcuts"!==x?t(this).is(":checked")?t(S).text(I):t(S).text(""):t(this).is(":checked")?t(".able-modkey-item").addClass("hidden"):t(".able-modkey-item").removeClass("hidden")}),y.append(T,k);("prefDescVoice"!==v||this.descVoices.length)&&u.append(y)}if(a.append(u),"captions"===e)this.usingYouTubeCaptions||(this.$sampleCapsDiv=t("<div>",{class:"able-captions-sample"}).text(this.translate("sampleCaptionText","Sample caption text")),a.append(this.$sampleCapsDiv),this.stylizeCaptions(this.$sampleCapsDiv));else if("descriptions"===e)this.synth&&(this.$sampleDescDiv=t("<div>",{class:"able-desc-sample"}).text(this.translate("sampleDescriptionText","Adjust settings to hear this sample text.")),a.append(this.$sampleDescDiv),this.currentSampleText=this.translate("sampleDescriptionText","Adjust settings to hear this sample text."));else if("keyboard"===e){let e=1===this.prefNoKeyShortcuts?"able-modkey-item hidden":"able-modkey-item";for(B=t("<h2>",{text:this.translate("prefHeadingKeyboard2","Current keyboard shortcuts")}),V=t("<ul>"),L=[],F=[],p=0;p<this.controls.length;p++)"play"===this.controls[p]?(L.push(this.translate("play","Play")+"/"+this.translate("pause","Pause")),F.push("p</span> <em>"+this.translate("or","or")+'</em> <span class="able-help-modifiers"> '+this.translate("spacebar","spacebar"))):"restart"===this.controls[p]?(L.push(this.translate("restart","Restart")),F.push("s")):"previous"===this.controls[p]?(L.push(this.translate("prevTrack","Previous track")),F.push("b")):"next"===this.controls[p]?(L.push(this.translate("nextTrack","Next track")),F.push("n")):"rewind"===this.controls[p]?(L.push(this.translate("rewind","Rewind")),F.push("r")):"forward"===this.controls[p]?(L.push(this.translate("forward","Forward")),F.push("f")):"volume"===this.controls[p]?(L.push(this.translate("volume","Volume")),F.push("v</span> <em>"+this.translate("or","or")+'</em> <span class="able-modkey">1-9'),L.push(this.translate("mute","Mute")+"/"+this.translate("unmute","Unmute")),F.push("m")):"captions"===this.controls[p]?(this.captions.length>1?L.push(this.translate("captions","Captions")):this.captionsOn?L.push(this.translate("hideCaptions","Hide captions")):L.push(this.translate("showCaptions","Show captions")),F.push("c")):"descriptions"===this.controls[p]?(this.descOn?L.push(this.translate("turnOffDescriptions","Turn off descriptions")):L.push(this.translate("turnOnDescriptions","Turn on descriptions")),F.push("d")):"prefs"===this.controls[p]&&(L.push(this.translate("preferences","Preferences")),F.push("e"));for(p=0;p<F.length;p++)O='<span class="able-modkey-alt">',1===this.prefAltKey&&(O+=this.translate("prefAltKey","Alt")+" + "),O+="</span>",O+='<span class="able-modkey-ctrl">',1===this.prefCtrlKey&&(O+=this.translate("prefCtrlKey","Control")+" + "),O+="</span>",O+='<span class="able-modkey-shift">',1===this.prefShiftKey&&(O+=this.translate("prefShiftKey","Shift")+" + "),O+="</span>",O+='<span class="able-modkey">'+F[p]+"</span>",O+=" = "+L[p],z=t("<li>",{class:e,html:O}),V.append(z);O='<span class="able-modkey">'+this.translate("escapeKey","Escape")+"</span>",O+=" = "+this.translate("escapeKeyFunction","Close current dialog or popup menu"),z=t("<li>",{html:O}),V.append(z),a.append(B,V)}t("body").append(a),R=new AccessibleDialog(a,this.$prefsButton,n,i.tt.closeButtonLabel),H=t('<div class="able-prefs-buttons"></div>'),E=t('<button class="modal-button">'+this.translate("save","Save")+"</button>"),W=t('<button class="modal-button">'+this.translate("cancel","Cancel")+"</button>"),E.on("click",function(){R.hide(),i.savePrefsFromForm()}),W.on("click",function(){R.hide(),i.resetPrefsForm()}),H.append(E,W),a.append(H),"captions"!==e&&"transcript"!==e||u.attr("aria-labelledby",R.titleH1.attr("id")),"captions"===e?this.captionPrefsDialog=R:"descriptions"===e?this.descPrefsDialog=R:"keyboard"===e?this.keyboardPrefsDialog=R:"transcript"===e&&(this.transcriptPrefsDialog=R),t("div.able-prefs-form button.modalCloseButton").on("click",function(){i.resetPrefsForm()}),t("div.able-prefs-form").on("keydown",function(t){"Escape"===t.key&&i.resetPrefsForm()})},AblePlayer.prototype.getPrefDescVoice=function(){var t,e,i;if(t=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,(e=this.getPref()).voices)for(i=0;i<e.voices.length;i++)if(e.voices[i].lang===t)return e.voices[i].name;return null},AblePlayer.prototype.rebuildDescPrefsForm=function(){var e,i,s,a;for(this.$voiceSelectField=t("#"+this.mediaId+"_prefDescVoice"),this.$voiceSelectField.empty(),e=0;e<this.descVoices.length;e++)s=(i=this.descVoices[e].name)+" ("+this.descVoices[e].lang+")",a=t("<option>",{value:i,"data-lang":this.descVoices[e].lang.substring(0,2).toLowerCase(),text:s}),this.prefDescVoice==i&&a.prop("selected",!0),this.$voiceSelectField.append(a)},AblePlayer.prototype.makePrefsValueReadable=function(t,e){if("prefDescPitch"===t){if(0===e)return this.translate("prefDescPitch1","Very low");if(.5===e)return this.translate("prefDescPitch2","Low");if(1===e)return this.translate("prefDescPitch3","Default");if(1.5===e)return this.translate("prefDescPitch4","High");if(2===e)return this.translate("prefDescPitch5","Very high")}else if("prefDescRate"===t){if(.7===e)return 1;if(.8===e)return 2;if(.9===e)return 3;if(1===e)return 4;if(1.1===e)return 5;if(1.2===e)return 6;if(1.5===e)return 7;if(2===e)return 8;if(2.5===e)return 9;if(3===e)return 10}else if("prefDescVolume"===t)return 10e;return e},AblePlayer.prototype.resetPrefsForm=function(){var e,i,s,a;for(e=this.getPref(),i=this.getAvailablePreferences(),s=0;s<i.length;s++)-1!==(a=i[s].name).indexOf("Captions")&&"prefCaptions"!==a?t('select[name="'+a+'"]').val(e.preferences[a]):1===this[a]?t('input[name="'+a+'"]').prop("checked",!0):t('input[name="'+a+'"]').prop("checked",!1);this.stylizeCaptions(this.$sampleCapsDiv)},AblePlayer.prototype.savePrefsFromForm=function(){var e,i,s,a,n,r,o,l,h,p,c,u;o=0,h=0,p=!1,e=this.getPref(),i=this.getAvailablePreferences();for(var d=0;d<i.length;d++)if(i[d].label)if(s=i[d].name,a=this.mediaId+"_"+s,"prefDescVoice"===s){void 0===e.voices&&(e.voices=[]),n=this.mediaId+"_prefDescVoice",this.prefDescVoice=t("select#"+n).find(":selected").val(),this.prefDescVoiceLang=t("select#"+n).find(":selected").attr("data-lang"),l=!1;for(var g=0;g<e.voices.length;g++)e.voices[g].lang===this.prefDescVoiceLang&&(l=!0,e.voices[g].name=this.prefDescVoice);l||(r={name:this.prefDescVoice,lang:this.prefDescVoiceLang},e.voices.push(r)),o++}else"prefDescMethod"==s?(this.prefDescMethod="video",this.prefDescMethod!==e.preferences.prefDescMethod&&(e.preferences.prefDescMethod=this.prefDescMethod,o++)):-1!==s.indexOf("Captions")&&"prefCaptions"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++,h++),"prefCaptionsSize"===s&&(p=!0,c=u)):-1!==s.indexOf("Desc")&&"prefDescPause"!==s&&"prefDescVisible"!==s?(u=t('select[id="'+a+'"]').val(),e.preferences[s]!==u&&(e.preferences[s]=u,this[s]=u,o++)):t('input[id="'+a+'"]').is(":checked")?(e.preferences[s]=1,1===this[s]||(this[s]=1,o++)):(e.preferences[s]=0,1===this[s]&&(this[s]=0,o++));if(o>0?(this.setPrefs(e),this.showAlert(this.translate("prefSuccess","Your changes have been saved."))):this.showAlert(this.translate("prefNoChange","You didn't make any changes")),"youtube"===this.player&&void 0!==this.usingYouTubeCaptions&&this.usingYouTubeCaptions&&p&&this.youTubePlayer.setOption("captions","fontSize",this.translatePrefs("size",c,"youtube")),AblePlayerInstances.length>1)for(d=0;d<AblePlayerInstances.length;d++)AblePlayerInstances[d].updatePlayerPrefs(),AblePlayerInstances[d].loadCurrentPreferences(),AblePlayerInstances[d].resetPrefsForm(),h>0&&(AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$captionsDiv),void 0!==AblePlayerInstances[d].$descDiv&&AblePlayerInstances[d].stylizeCaptions(AblePlayerInstances[d].$descDiv));else this.updatePlayerPrefs(),h>0&&(this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv))},AblePlayer.prototype.updatePlayerPrefs=function(){this.$transcriptDiv&&(1===this.prefTabbable?this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"):this.$transcriptDiv.find("span.able-transcript-seekpoint").removeAttr("tabindex"),0===this.prefHighlight&&this.$transcriptDiv.find("span").removeClass("able-highlight")),this.updateCaption(),this.initDescription()},AblePlayer.prototype.usingModifierKeys=function(t){return!(1===this.prefAltKey&&!t.altKey)&&(!(1===this.prefCtrlKey&&!t.ctrlKey)&&!(1===this.prefShiftKey&&!t.shiftKey))}}(jQuery),function(t){function actList(t,e){for(var i=[],s=0;s<e.length;s++)i.push(act(t,e[s]));return i}function act(t,e){var i=e(t);if(null!==t.error)throw t.error;return i}function updatePosition(t,e){for(var i=0;i<e.length;i++)"\n"===e[i]?(t.column=1,t.line+=1):t.column+=1}function cut(t,e){var i=t.text.substring(0,e);return updatePosition(t,i),t.text=t.text.substring(e),i}function cutLine(t,e){var i,s=t.text.indexOf("\n");return-1===s?(updatePosition(t,i=t.text),t.text=""):(i=t.text.substring(0,s),updatePosition(t,i+"\n"),t.text=t.text.substring(s+1)),i}function peekLine(t){var e=t.text.indexOf("\n");return-1===e?t.text:t.text.substring(0,e)}function parseFileBody(t){actList(t,[eatOptionalBOM,eatSignature]);var e=t.text[0];" "===e||"\t"===e||"\n"===e?actList(t,[eatUntilEOLInclusive,parseMetadataHeaders,eatAtLeast1EmptyLines,parseCuesAndComments]):t.error="WEBVTT signature not followed by whitespace."}function parseMetadataHeaders(t){for(;;){var e=peekLine(t);if(-1!==e.indexOf("--\x3e"))return;if(0===e.length)return;var i=act(t,getMetadataKeyValue);t.metadata[i[0]]=i[1],act(t,eatUntilEOLInclusive)}}function nextSpaceOrNewline(t){var e=[],i=t.indexOf(" ");i>=0&&e.push(i);var s=t.indexOf("\t");s>=0&&e.push(s);var a=t.indexOf("\n");return a>=0&&e.push(a),Math.min.apply(null,e)}function getMetadataKeyValue(t){var e=t.text.indexOf("\n"),i=cut(t,e),s=i.indexOf(":");return-1===s?void(t.error="Missing colon."):[i.substring(0,s),i.substring(s+1)]}function getSettingsKeyValue(t){var e=cut(t,nextSpaceOrNewline(t.text)),i=e.indexOf(":");return-1===i?void(t.error="Missing colon."):[e.substring(0,i),e.substring(i+1)]}function parseCuesAndComments(t){for(;;){var e=peekLine(t);if(0!==e.indexOf("NOTE")||4!==e.length&&" "!==e[4]&&"\t"!==e[4])if(0===e.trim().length&&t.text.length>0)act(t,eatEmptyLines);else{if(!(e.trim().length>0))return;act(t,parseCue)}else actList(t,[eatComment,eatEmptyLines])}}function parseCue(t){var e,i=peekLine(t);if(-1===i.indexOf("--\x3e")&&(e=cutLine(t),-1===(i=peekLine(t)).indexOf("--\x3e")))return"Invalid WebVTT file: "+t.src+"\n","Line: "+t.line+", ","Column: "+t.column+"\n",void(console.warn||console.log);var s=actList(t,[getTiming,eatAtLeast1SpacesOrTabs,eatArrow,eatAtLeast1SpacesOrTabs,getTiming]),a=s[0],n=s[4];if(a>=n)t.error="Start time is not sooner than end time.";else{act(t,eatSpacesOrTabs);var r=act(t,getCueSettings);cut(t,1);var o=act(t,getCuePayload);void 0===e&&(e=t.cues.length+1),t.cues.push({id:e,start:a,end:n,settings:r,components:o})}}function getCueSettings(t){for(var e={};t.text.length>0&&"\n"!==t.text[0];){var i=act(t,getSettingsKeyValue);e[i[0]]=i[1],act(t,eatSpacesOrTabs)}return e}function getCuePayload(e){for(var i={type:"internal",tagName:"",value:"",classes:[],annotation:"",parent:null,children:[],language:""},s=i,a=[];e.text.length>0;){var n=peekLine(e);if(-1!==n.indexOf("--\x3e")||/^\s+$/.test(n))break;if(e.text.length>=2&&"\n"===e.text[0]&&"\n"===e.text[1]){cut(e,2);break}var r=getCueToken(e);if("string"===r.type)s.children.push(r);else if("startTag"===r.type)r.type=r.tagName,r.parent=s,-1!==t.inArray(r.tagName,["i","b","u","ruby"])||"rt"===r.tagName&&"ruby"===s.tagName?(a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"c"===r.tagName||"v"===r.tagName?(r.value=r.annotation,a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r):"lang"===r.tagName&&(a.push(r.annotation),a.length>0&&(s.language=a[a.length-1]),s.children.push(r),s=r);else if("endTag"===r.type)r.tagName===s.type&&-1!==t.inArray(r.tagName,["c","i","b","u","ruby","rt","v"])?s=s.parent:"lang"===r.tagName&&"lang"===s.type?(s=s.parent,a.pop()):"ruby"===r.tagName&&"rt"===s.type&&(s=s.parent.parent);else if("timestampTag"===r.type){var o={text:r.value,error:null,metadata:{},cues:[],line:1,column:1};try{var l=act(o,getTiming);0===o.text.length&&(r.value=l,s.push(r))}catch(t){}}}return i}function getCueToken(t){for(var e="data",i=[],s="",a={type:"",tagName:"",value:"",classes:[],annotation:"",children:[]};;){var n;if(n=t.text.length>=2&&"\n"===t.text[0]&&"\n"===t.text[1]?"":t.text.length>0?t.text[0]:"","data"===e)if("&"===n)s="&",e="escape";else if("<"===n){if(0!==i.length)return a.type="string",a.value=i.join(""),a;e="tag"}else{if(""===n)return{type:"string",value:i.join("")};i.push(n)}else if("escape"===e)if("&"===n)i.push(s),s="&";else if(n.match(/[0-9a-z]/))s+=n;else if(";"===n)"&"===s?i.push("&"):"<"===s?i.push("<"):">"===s?i.push(">"):"&lrm"===s?i.push("‎"):"&rlm"===s?i.push("‏"):" "===s?i.push(" "):(i.push(s),i.push(";")),e="data";else{if("<"===n||""===n)return i.push(s),a.type="string",a.value=i.join(""),a;if("\t"===n||"\n"===n||"\f"===n||" "===n)return i.push(s),a.type="string",a.value=i.join(""),a;i.push(s),e="data"}else if("tag"===e)if("\t"===n||"\n"===n||"\f"===n||" "===n)e="startTagAnnotation";else if("."===n)e="startTagClass";else if("/"===n)e="endTag";else if(n.match("[0-9]"))e="timestampTag",i.push(n);else{if(">"===n){cut(t,1);break}if(""===n)return a.tagName="",a.type="startTag",a;i.push(n),e="startTag"}else if("startTag"===e)if("\t"===n||"\f"===n||" "===n)e="startTagAnnotation";else if("\n"===n)s=n,e="startTagAnnotation";else if("."===n)e="startTagClass";else{if(">"===n)return cut(t,1),a.tagName=i.join(""),a.type="startTag",a;if(""===n)return a.tagName=i.join(""),a.type="startTag",a;i.push(n)}else if("startTagClass"===e)if("\t"===n||"\f"===n||" "===n)a.classes.push(s),s="",e="startTagAnnotation";else if("\n"===n)a.classes.push(s),s=n,e="startTagAnnotation";else if("."===n)a.classes.push(s),s="";else{if(">"===n)return cut(t,1),a.classes.push(s),a.type="startTag",a.tagName=i.join(""),a;if(""===n)return a.classes.push(s),a.type="startTag",a.tagName=i.join(""),a;s+="c"}else if("startTagAnnotation"===e){if(">"===n)return cut(t,1),s=s.trim().replace(/ +/," "),a.type="startTag",a.tagName=i.join(""),a.annotation=s,a;if(""===n)return s=s.trim().replace(/ +/," "),a.type="startTag",a.tagName=i.join(""),a.annotation=s,a;s+=n}else if("endTag"===e){if(">"===n)return cut(t,1),a.type="endTag",a.tagName=i.join(""),a;if(""===n)return a.type="endTag",a.tagName=i.join(""),a;i.push(n)}else{if("timestampTag"!==e)throw"Unknown tokenState "+e;if(">"===n)return cut(t,1),a.type="timestampTag",a.name=i.join(""),a;if(""===n)return a.type="timestampTag",a.name=i.join(""),a;i.push(n)}cut(t,1)}}function eatComment(t){if(-1===cutLine(t).indexOf("--\x3e"))for(;;){var e=peekLine(t);if(0===e.trim().length)return;if(-1!==e.indexOf("--\x3e"))return void(t.error="Invalid syntax: --\x3e in comment.");cutLine(t)}else t.error="Invalid syntax: --\x3e in NOTE line."}function eatOptionalBOM(t){"\ufeff"===t.text[0]&&cut(t,1)}function eatSignature(t){"WEBVTT"===t.text.substring(0,6)?cut(t,6):t.error="Invalid signature."}function eatArrow(t){t.text.length<3||"--\x3e"!==t.text.substring(0,3)?t.error="Missing --\x3e":cut(t,3)}function eatSpacesOrTabs(t){for(;"\t"===t.text[0]||" "===t.text[0];)cut(t,1)}function eatAtLeast1SpacesOrTabs(t){for(var e=0;"\t"===t.text[0]||" "===t.text[0];)cut(t,1),e+=1;0===e&&(t.error="Missing space.")}function eatUntilEOLInclusive(t){var e=t.text.indexOf("\n");-1===e?t.error="Missing EOL.":cut(t,e+1)}function eatEmptyLines(t){for(;t.text.length>0;){if(0!==peekLine(t).trim().length)break;cutLine(t)}}function eatAtLeast1EmptyLines(t){for(var e=0;t.text.length>0;){if(0!==peekLine(t).trim().length)break;cutLine(t),e+=1}0===e&&(t.error="Missing empty line.")}function getTiming(t){var e=nextSpaceOrNewline(t.text);if(-1!==e){var i=cut(t,e),s=/((\d+):)?((\d\d):)(\d\d).(\d\d\d)|(\d+).(\d\d\d)/.exec(i);if(s){var a=0,n=s[2],r=s[4];if(r){if(parseInt(r,10)>59)return void(t.error="Invalid minute range");n&&(a+=3600parseInt(n,10)),a+=60parseInt(r,10);var o=s[5];if(parseInt(o,10)>59)return void(t.error="Invalid second range");a+=parseInt(o,10),a+=parseInt(s[6],10)/1e3}else a+=parseInt(s[7],10),a+=parseInt(s[8],10)/1e3;return a}t.error="Unable to parse timestamp"}else t.error("Missing timing.")}AblePlayer.prototype.parseWebVTT=function(t){let e=t.src,i=t.text;i=i.replace(/(\r\n|\n|\r)/g,"\n");var s={src:e,text:i,error:null,metadata:{},cues:[],line:1,column:1};try{act(s,parseFileBody)}catch(t){console.warn||console.log}return s}}(jQuery),function(t){AblePlayer.prototype.injectPlayerCode=function(){var e;this.$mediaContainer=this.$media.wrap('<div class="able-media-container"></div>').parent(),this.$ableDiv=this.$mediaContainer.wrap('<div class="able"></div>').parent(),this.$ableWrapper=this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent(),this.$ableWrapper.addClass("able-skin-"+this.skin),"video"===this.mediaType&&("image"==this.iconType||"youtube"===this.player&&!this.hasPoster||this.injectBigPlayButton()),e=t("<div>"),"video"===this.mediaType?e.addClass("able-vidcap-container"):"audio"===this.mediaType&&(e.addClass("able-audcap-container"),e.addClass("captions-off")),this.injectPlayerControlArea(),this.$captionsContainer=this.$mediaContainer.wrap(e).parent(),this.injectAlert(this.$ableDiv),this.injectPlaylist(),this.injectAudioPoster(),this.injectOffscreenHeading()},AblePlayer.prototype.injectAudioPoster=function(){if("audio"===this.mediaType&&this.hasPoster){audioPoster=DOMPurify.sanitize(this.audioPoster),audioPosterAlt=DOMPurify.sanitize(this.audioPosterAlt);let t=document.createElement("img");t.setAttribute("src",audioPoster),t.setAttribute("alt",audioPosterAlt),this.$audioWrapper=this.$playerDiv.wrap('<div class="able-audio-wrapper">').parent(),this.$audioWrapper.prepend(t)}},AblePlayer.prototype.injectOffscreenHeading=function(){var e;"0"==this.playerHeadingLevel||(void 0===this.playerHeadingLevel&&(this.playerHeadingLevel=this.getNextHeadingLevel(this.$ableDiv)),e="h"+this.playerHeadingLevel.toString(),this.$headingDiv=t("<"+e+">"),this.$ableDiv.prepend(this.$headingDiv),this.$headingDiv.addClass("able-offscreen"),this.$headingDiv.text(this.translate("playerHeading","Media player")))},AblePlayer.prototype.injectBigPlayButton=function(){var e=this;this.$bigPlayButton=t("<button>",{class:"able-big-play-button","aria-hidden":!1,"aria-label":this.translate("play","Play"),type:"button",tabindex:0}),this.getIcon(this.$bigPlayButton,"play"),this.$bigPlayButton.on("click",function(){e.handlePlay()}),this.$mediaContainer.append(this.$bigPlayButton)},AblePlayer.prototype.injectPlayerControlArea=function(){this.$playerDiv=t("<div>",{class:"able-player",role:"region","aria-label":"audio"===this.mediaType?this.translate("audioPlayer","audio player"):this.translate("videoPlayer","video player")}),this.$playerDiv.addClass("able-"+this.mediaType),this.hasPlaylist&&this.showNowPlaying&&(this.$nowPlayingDiv=t("<div>",{class:"able-now-playing","aria-live":"assertive","aria-atomic":"true"})),this.$controllerDiv=t("<div>",{class:"able-controller"}),this.$controllerDiv.addClass("able-"+this.iconColor+"-controls"),this.$statusBarDiv=t("<div>",{class:"able-status-bar"}),this.$timer=t("<span>",{class:"able-timer"}),this.$elapsedTimeContainer=t("<span>",{class:"able-elapsedTime",text:"0:00"}),this.$durationContainer=t("<span>",{class:"able-duration"}),this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer),this.$speed=t("<span>",{class:"able-speed","aria-live":"assertive","aria-atomic":"true"}).text(this.translate("speed","Speed")+": 1x"),this.$status=t("<span>",{class:"able-status","aria-live":"polite"}),this.$statusBarDiv.append(this.$timer,this.$speed,this.$status),this.showNowPlaying?this.$playerDiv.append(this.$nowPlayingDiv,this.$controllerDiv,this.$statusBarDiv):this.$playerDiv.append(this.$controllerDiv,this.$statusBarDiv),"video"===this.mediaType?this.$ableDiv.append(this.$playerDiv):this.$ableDiv.prepend(this.$playerDiv)},AblePlayer.prototype.injectTextDescriptionArea=function(){this.$descDiv=t("<div>",{class:"able-descriptions"}),this.$descDiv.attr({"aria-live":"assertive","aria-atomic":"true"}),this.$descDiv.hide(),this.$ableDiv.append(this.$descDiv)},AblePlayer.prototype.getDefaultWidth=function(t){let e=window.innerWidth;return"transcript"===t?e<=450?e:450:"sign"===t?e<=400?e:400:void 0},AblePlayer.prototype.rePositionDraggableWindow=function(t){let e,i;e=this.getPref(),i="transcript"===t?this.$transcriptArea:this.$signWindow,"transcript"===t&&i?(void 0!==e.transcript&&(this.prevTranscriptPosition=e.transcript),i.css({top:0,left:0})):"sign"===t&&i&&(void 0!==e.sign&&(this.prevSignPosition=e.sign),i.css({top:0,right:0,left:"auto"}))},AblePlayer.prototype.positionDraggableWindow=function(e,i){var s,a,n,r,o,l;s=this.getPref(),(n="transcript"===e?this.$transcriptArea:this.$signWindow)&&("transcript"===e?(void 0!==s.transcript&&(a=s.transcript),this.prevTranscriptPosition&&(a=this.prevTranscriptPosition,this.prevTranscriptPosition=!1)):"sign"===e&&(void 0!==s.sign&&(a=s.sign),this.prevSignPosition&&(a=this.prevSignPosition,this.prevSignPosition=!1)),void 0===a||t.isEmptyObject(a)?(r=this.getOptimumPosition(e,i),void 0===i&&(i=this.getDefaultWidth(e)),n.css({position:r[0],width:i,"z-index":r[3]}),"absolute"===r[0]&&n.css({top:r[1]+"px",left:r[2]+"px"})):(n.css({position:a.position,width:a.width,"z-index":a.zindex}),"absolute"===a.position&&(n.css({top:a.top,left:a.left}),topPosition=n.offset().top,leftPosition=n.offset().left,o=window.innerWidth,l=n.width(),topPosition<0&&n.css({top:a.top-topPosition}),leftPosition<0&&!this.restoringAfterFullscreen&&n.css({left:a.left-leftPosition}),o-leftPosition<30&&n.css({left:o-l})),this.updateZIndex(e)))},AblePlayer.prototype.getOptimumPosition=function(e,i){var s,a,n,r,o;return void 0===i&&(i=this.getDefaultWidth(e)),s=[],a=this.$ableDiv.width(),n=this.$ableDiv.offset().left,r=t(window).width(),o=0,"transcript"===e?void 0!==this.$signWindow&&this.$signWindow.is(":visible")&&(o=this.$signWindow.width()+5):"sign"===e&&void 0!==this.$transcriptArea&&this.$transcriptArea.is(":visible")&&(o=this.$transcriptArea.width()+5),i<r-(n+a+5+o)?(s[0]="absolute",s[1]=0,s[2]=a+o+5):i+5<n?(s[0]="absolute",s[1]=0,s[2]=n-i-5):s[0]="relative",s},AblePlayer.prototype.injectAlert=function(e){this.$alertBox=t('<div role="alert"></div>'),this.$alertBox.addClass("able-alert"),this.$alertBox.hide(),t("<span></span>").appendTo(this.$alertBox);var i=t('<button type="button"></button>');i.attr("aria-label",this.translate("dismissButton","Dismiss")),i.text("×"),i.appendTo(this.$alertBox),i.on("click",function(e){t(this).parent("div").hide()}),this.$alertBox.appendTo(e),this.$srAlertBox||(this.$srAlertBox=t('<div role="alert"></div>'),this.$srAlertBox.addClass("able-screenreader-alert"),this.$srAlertBox.appendTo(e))},AblePlayer.prototype.injectPlaylist=function(){if(!0===this.playlistEmbed){var t=this.$playlistDom.clone();t.insertBefore(this.$statusBarDiv),this.$playlist=t.find("li")}},AblePlayer.prototype.createPopup=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,g,f,m;if(s=this,a=t("<ul>",{id:this.mediaId+"-"+e+"-menu",class:"able-popup",role:"menu"}).hide(),"captions"===e&&a.addClass("able-popup-captions"),"prefs"===e)if(this.prefCats.length>1){for(n=0;n<this.prefCats.length;n++)o=this.prefCats[n],f=!!(s.hasDescTracks||s.hasOpenDesc||s.hasClosedDesc),m=null!==s.transcriptType,"descriptions"===o&&!f||"transcript"===o&&!m||(r=t("<li></li>",{role:"menuitem",tabindex:"-1"}),"captions"===o?r.text(this.translate("prefMenuCaptions","Captions")):"descriptions"===o?r.text(this.translate("prefMenuDescriptions","Descriptions")):"keyboard"===o?r.text(this.translate("prefMenuKeyboard","Keyboard")):"transcript"===o&&r.text(this.translate("prefMenuTranscript","Transcript")),r.on("click",function(){l=t(this).text(),s.showingPrefsDialog=!0,s.setFullscreen(!1),l===s.tt.prefMenuCaptions?s.captionPrefsDialog.show():l===s.tt.prefMenuDescriptions?s.descPrefsDialog.show():l===s.tt.prefMenuKeyboard?s.keyboardPrefsDialog.show():l===s.tt.prefMenuTranscript&&s.transcriptPrefsDialog.show(),s.closePopups(),s.showingPrefsDialog=!1}),a.append(r));this.$prefsButton.attr("data-prefs-popup","menu")}else 1==this.prefCats.length&&this.$prefsButton.attr("data-prefs-popup",this.prefCats[0]);else if("captions"===e||"chapters"===e){for(h=!1,n=0;n<i.length;n++)p=i[n],("captions"!==e||"html5"!==this.player||void 0!==p.cues)&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1",lang:p.language}),p.def&&1==this.prefCaptions?(r.attr("aria-checked","true"),h=!0):r.attr("aria-checked","false"),"captions"==e?(r.text(p.label),r.on("click",this.getCaptionClickFunction(p))):"chapters"==e&&(r.text(this.flattenCueForCaption(p)+" - "+this.formatSecondsAsColonTime(p.start)),r.on("click",this.getChapterClickFunction(p.start))),a.append(r));"captions"===e&&(r=t("<li></li>",{role:"menuitemradio",tabindex:"-1"}).text(this.translate("captionsOff","Captions off")),0===this.prefCaptions?(r.attr("aria-checked","true"),h=!0):r.attr("aria-checked","false"),r.on("click",this.getCaptionOffFunction()),a.append(r))}else if("transcript-window"===e||"sign-window"===e)for((c=[]).push({name:"move",label:this.translate("windowMove","Move")}),c.push({name:"resize",label:this.translate("windowResize","Resize")}),c.push({name:"close",label:this.translate("windowClose","Close")}),n=0;n<c.length;n++)(r=t("<li></li>",{role:"menuitem",tabindex:"-1","data-choice":c[n].name})).text(c[n].label),r.on("click",function(i){if(i.stopPropagation(),void 0!==i.button&&0!==i.button)return!1;s.windowMenuClickRegistered||s.finishingDrag||(s.windowMenuClickRegistered=!0,s.handleMenuChoice(e.substring(0,e.indexOf("-")),t(this).attr("data-choice"),i))}),a.append(r);return"captions"!==e||h?"chapters"===e&&(a.find('li:contains("'+this.defaultChapter+'")')?a.find('li:contains("'+this.defaultChapter+'")').attr("aria-checked","true").addClass("able-focus"):a.find("li").first().attr("aria-checked","true").addClass("able-focus")):a.find("li[lang="+this.captionLang+"]")?a.find("li[lang="+this.captionLang+"]").attr("aria-checked","true"):a.find("li").last().attr("aria-checked","true"),a.on("keydown",function(e){(u=t(this).find("li:focus")).is(":first-child")?(d=t(this).find("li").last(),g=u.next()):u.is(":last-child")?(d=u.prev(),g=t(this).find("li").first()):(d=u.prev(),g=u.next()),"Tab"===e.key?e.shiftKey?(u.removeClass("able-focus"),d.trigger("focus").addClass("able-focus")):(u.removeClass("able-focus"),g.trigger("focus").addClass("able-focus")):"ArrowDown"===e.key||"ArrowRight"===e.key?(u.removeClass("able-focus"),g.trigger("focus").addClass("able-focus")):"ArrowUp"==e.key||"ArrowLeft"===e.key?(u.removeClass("able-focus"),d.trigger("focus").addClass("able-focus")):" "===e.key||"Enter"===e.key?u.trigger("click"):"Escape"===e.key&&(u.removeClass("able-focus"),s.closePopups(),e.stopPropagation),e.preventDefault()}),this.$controllerDiv.append(a),a},AblePlayer.prototype.closePopups=function(){var t=this;this.chaptersPopup&&this.chaptersPopup.is(":visible")&&(this.chaptersPopup.hide(),this.$chaptersButton.attr("aria-expanded","false").trigger("focus")),this.captionsPopup&&this.captionsPopup.is(":visible")&&(this.captionsPopup.hide(),this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)),this.prefsPopup&&this.prefsPopup.is(":visible")&&!this.hidingPopup&&(this.hidingPopup=!0,this.prefsPopup.hide(),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$prefsButton.attr("aria-expanded","false"),this.showingPrefsDialog||this.waitThenFocus(t.$prefsButton),setTimeout(function(){t.hidingPopup=!1},100)),this.$volumeSlider&&this.$volumeSlider.is(":visible")&&(this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").trigger("focus")),this.$transcriptPopup&&this.$transcriptPopup.is(":visible")&&(this.hidingPopup=!0,this.$transcriptPopup.hide(),this.$transcriptPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$transcriptPopupButton.attr("aria-expanded","false").trigger("focus"),setTimeout(function(){t.hidingPopup=!1},100)),this.$signPopup&&this.$signPopup.is(":visible")&&(this.$signPopup.hide(),this.$signPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.$signPopupButton.attr("aria-expanded","false").trigger("focus"))},AblePlayer.prototype.setupPopups=function(t){var e,i;if(e=[],void 0===t&&e.push("prefs"),"captions"!==t&&void 0!==t||this.captions.length>0&&e.push("captions"),"chapters"!==t&&void 0!==t||this.chapters.length>0&&this.useChaptersButton&&e.push("chapters"),"transcript-window"===t&&"popup"===this.transcriptType&&e.push("transcript-window"),"sign-window"===t&&this.hasSignLanguage&&e.push("sign-window"),e.length>0){0;for(var s=0;s<e.length;s++){var a=e[s];if("prefs"==a)this.prefsPopup=this.createPopup("prefs");else if("captions"==a)void 0!==this.captionsPopup&&this.captionsPopup||(this.captionsPopup=this.createPopup("captions",this.captions));else if("chapters"==a)i=this.selectedChapters?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[],void 0!==this.chaptersPopup&&this.chaptersPopup||(this.chaptersPopup=this.createPopup("chapters",i));else{if("transcript-window"==a)return this.createPopup("transcript-window");if("sign-window"==a)return this.createPopup("sign-window")}}}},AblePlayer.prototype.provideFallback=function(){var e,i;if(!this.usingFallback){if(this.usingFallback=!0,this.testFallback||(this.testFallback=1),void 0===this.$media&&(this.$media=t(this.media)),this.$media.attr("id")?this.mediaId=this.$media.attr("id"):this.mediaId="media"+Math.floor(1e9Math.random()).toString(),this.hasFallback=!1,this.$media.children().length)for(e=0;e<this.$media.children().length&&!this.hasFallback;)"SOURCE"!==this.$media.children()[e].tagName&&"TRACK"!==this.$media.children()[e].tagName&&(this.hasFallback=!0),e++;if(this.hasFallback||(i=t("<p>").text("Media player unavailable."),this.$media.append(i)),this.$media.attr("width")&&this.$media.css("width",this.$media.attr("width")+"px"),this.$media.attr("height")&&this.$media.css("height",this.$media.attr("height")+"px"),this.$media.removeAttr("data-able-player"),this.$media.prop("controls",!0),2==this.testFallback){if(t(this.$media).replaceWith(t('<foobar id="foobar-'+this.mediaId+'">')),this.$newFallbackElement=t("#foobar-"+this.mediaId),this.$media.children().length)for(e=this.$media.children().length-1;e>=0;)this.$newFallbackElement.prepend(t(this.$media.children()[e])),e--;this.hasFallback||this.$newFallbackElement.append(i)}}},AblePlayer.prototype.calculateControlLayout=function(){var t,e,i;return(t=[])[0]=[],t[1]=[],"legacy"===this.skin&&(t[2]=[],t[3]=[]),t[0].push("play"),t[0].push("restart"),t[0].push("rewind"),t[0].push("forward"),"legacy"===this.skin&&t[1].push("seek"),this.hasPlaylist&&(this.skin,t[0].push("previous"),t[0].push("next")),this.isPlaybackRateSupported()?(e=!0,"legacy"===this.skin&&(t[2].push("slower"),t[2].push("faster"))):e=!1,i=0,this.hasCaptions&&(i++,"legacy"===this.skin?t[2].push("captions"):t[1].push("captions")),this.hasSignLanguage&&(i++,"legacy"===this.skin?t[2].push("sign"):t[1].push("sign")),"video"===this.mediaType&&(this.hasOpenDesc||this.hasClosedDesc)&&(i++,"legacy"===this.skin?t[2].push("descriptions"):t[1].push("descriptions")),null===this.transcriptType||this.hideTranscriptButton||(i++,"legacy"===this.skin?t[2].push("transcript"):t[1].push("transcript")),this.hasChapters&&this.useChaptersButton&&(i++,"legacy"===this.skin?t[2].push("chapters"):t[1].push("chapters")),"2020"==this.skin&&i>0&&t[1].push("pipe"),e&&"2020"===this.skin&&(t[1].push("faster"),t[1].push("slower"),t[1].push("pipe")),"legacy"===this.skin?t[3].push("preferences"):t[1].push("preferences"),"video"===this.mediaType&&this.allowFullscreen&&this.nativeFullscreenSupported()&&("legacy"===this.skin?t[3].push("fullscreen"):t[1].push("fullscreen")),this.browserSupportsVolume()?(this.volumeButton="volume-"+this.getVolumeName(this.volume),this.skin,t[1].push("volume")):this.volume=!1,t},AblePlayer.prototype.addControls=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v,y,b,P,k,T,w,C,$,D,A,x;e=this,s=(i=this.calculateControlLayout()).length,P=this.mediaId+"-tooltip",this.$tooltipDiv=t("<div>",{id:P,class:"able-tooltip"}).hide(),this.$controllerDiv.append(this.$tooltipDiv),"2020"==this.skin&&(l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.translate("seekbarLabel","timeline"),this.$controllerDiv.append(l),this.seekBar=new AccessibleSlider(l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible"));let S=t('<div class="able-control-row"></div>');for(this.$controllerDiv.append(S),a=0;a<s;a++){for(r=i[a],o=t("<div>",a%2==0?{class:"able-left-controls"}:{class:"able-right-controls"}),S.append(o),n=0;n<r.length;n++){if("seek"===(c=r[n]))l=t('<div class="able-seekbar"></div>'),h=this.mediaType+" "+this.translate("seekbarLabel","timeline"),o.append(l),void 0!==this.duration&&0!==this.duration||(this.duration=60,this.elapsed=0),this.seekBar=new AccessibleSlider(l,"horizontal",100,0,this.duration,this.seekInterval,h,"seekbar",!0,"visible");else if("pipe"===c)(p=t("<span>",{tabindex:"-1","aria-hidden":"true",class:"able-pipe"})).append("|"),o.append(p);else{u=this.getButtonTitle(c),d=t("<div>",{role:"button",tabindex:"0",class:"able-button-handler-"+c}),"volume"!==c&&"preferences"!==c&&"captions"!==c||("preferences"==c?(this.prefCats=this.getPreferencesGroups(),this.prefCats.length>1?(x=this.mediaId+"-prefs-menu",d.attr({"aria-controls":x,"aria-haspopup":"menu","aria-expanded":"false"})):1===this.prefCats.length&&d.attr({"aria-haspopup":"dialog"})):"volume"===c?(x=this.mediaId+"-volume-slider",d.attr({"aria-controls":x,"aria-expanded":"false"})):"captions"===c&&this.captions&&(this.captions.length>1?d.attr("aria-expanded","false"):d.attr("aria-pressed","false")));var I=c;"faster"===c&&"animals"===this.speedIcons&&(I="rabbit"),"slower"===c&&"animals"===this.speedIcons&&(I="turtle"),"volume"===c?this.getIcon(d,this.volumeButton):("fullscreen"===I&&(I=this.fullscreen?"fullscreen-collapse":"fullscreen-expand"),this.getIcon(d,I)),this.setText(d,u),d.on("mouseenter focus",function(i){clearTimeout(D),g=t(this).attr("aria-label"),f=t(this).position(),m=t(this).height(),v=t(this).width(),b=e.$controllerDiv.width(),f.right=b-f.left-v,k=f.top+m+5,y=t(this).parent().hasClass("able-right-controls")?"right":"left",w=AblePlayer.localGetElementById(d[0],P).text(g).width(),"left"==y?((T=f.left-w/2)<0&&(T=2),C={left:T+"px",right:"",top:k+"px"}):((T=f.right-w/2)<0&&(T=2),C={left:"",right:T+"px",top:k+"px"}),$=AblePlayer.localGetElementById(d[0],P).text(g).css(C),e.showTooltip($),t(this).on("mouseleave blur",function(){clearTimeout(D),D=setTimeout(function(){AblePlayer.localGetElementById(d[0],P).text("").hide()},500),e.$tooltipDiv.on("mouseenter focus",function(){clearTimeout(D)}),e.$tooltipDiv.on("mouseleave blur",function(){AblePlayer.localGetElementById(d[0],P).text("").hide()})})}),"captions"===c?this.prefCaptions&&1===this.prefCaptions||(A=this.captions.length>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),d.addClass("buttonOff").attr("title",A),d.attr("aria-pressed","false")):"descriptions"===c&&(this.prefDesc&&1===this.prefDesc||d.addClass("buttonOff").attr("title",this.translate("turnOnDescriptions","Turn on descriptions"))),o.append(d),"play"===c?this.$playpauseButton=d:"previous"==c?(this.$prevButton=d,"previous"==this.buttonWithFocus&&(this.$prevButton.trigger("focus"),this.buttonWithFocus=null)):"next"==c?(this.$nextButton=d,"next"==this.buttonWithFocus&&(this.$nextButton.trigger("focus"),this.buttonWithFocus=null)):"captions"===c?this.$ccButton=d:"sign"===c?(this.$signButton=d,this.$signWindow.is(":visible")||this.$signButton.addClass("buttonOff")):"descriptions"===c?this.$descButton=d:"mute"===c?this.$muteButton=d:"transcript"===c?(this.$transcriptButton=d,this.$transcriptDiv.is(":visible")||this.$transcriptButton.addClass("buttonOff").attr("title",this.translate("showTranscript","Show transcript"))):"fullscreen"===c?this.$fullscreenButton=d:"chapters"===c?this.$chaptersButton=d:"preferences"===c?this.$prefsButton=d:"volume"===c&&(this.$volumeButton=d)}"volume"===c&&this.addVolumeSlider(o)}a%2==1&&this.$controllerDiv.append('<div style="clear:both;"></div>')}for(var N in void 0!==this.$captionsDiv&&this.stylizeCaptions(this.$captionsDiv),void 0!==this.$descDiv&&this.stylizeCaptions(this.$descDiv),this.controls=[],i)i.hasOwnProperty(N)&&(this.controls=this.controls.concat(i[N]));this.refreshControls()},AblePlayer.prototype.cuePlaylistItem=function(e){var i,s,a,n,r,o,l=this;s=this.player,this.initializing||this.playerCreated&&this.deletePlayer("playlist"),this.swappingSrc=!0,this.startedPlaying?this.okToPlay=!0:this.okToPlay=!1,this.loadingMedia=!1,i=this.$playlist.eq(e),this.hasAttr(i,"data-youtube-id")?(this.youTubeId=this.getYouTubeId(i.attr("data-youtube-id")),this.hasAttr(i,"data-youtube-desc-id")&&(this.youTubeDescId=this.getYouTubeId(i.attr("data-youtube-desc-id"))),a="youtube"):this.hasAttr(i,"data-vimeo-id")?(this.vimeoId=this.getVimeoId(i.attr("data-vimeo-id")),this.hasAttr(i,"data-vimeo-desc-id")&&(this.vimeoDescId=this.getVimeoId(i.attr("data-vimeo-desc-id"))),a="vimeo"):a="html5","youtube"===a?"html5"===s&&(this.playing&&this.pauseMedia(),this.$media.hide()):(this.youTubeId=!1,"youtube"===s&&this.$media.show()),this.player=a,this.$media.empty(),this.hasAttr(i,"data-poster")&&this.$media.attr("poster",i.attr("data-poster")),this.hasAttr(i,"data-youtube-desc-id")&&this.$media.attr("data-youtube-desc-id",i.attr("data-youtube-desc-id")),this.youTubeId&&this.$media.attr("data-youtube-id",i.attr("data-youtube-id"));var h=i.children("span.able-source");h.length&&h.each(function(){const e=t(this);if(l.hasAttr(e,"data-src")){const i=DOMPurify.sanitize(e.attr("data-src"));if(validate.isProtocolSafe(i)){const s=t("<source>",{src:i});["data-type","data-desc-src","data-sign-src"].forEach(t=>{if(l.hasAttr(e,t)){const i=e.attr(t),a=DOMPurify.sanitize(i);t.endsWith("-src")&&validate.isProtocolSafe(a)?s.attr(t,a):t.endsWith("-src")||s.attr(t,a)}}),l.$media.append(s)}}});var p=i.children("span.able-track");p.length&&p.each(function(){const e=t(this);if(l.hasAttr(e,"data-src")&&l.hasAttr(e,"data-kind")&&l.hasAttr(e,"data-srclang")){const i=DOMPurify.sanitize(e.attr("data-src"));if(validate.isProtocolSafe(i)){const s=t("<track>",{src:i,kind:e.attr("data-kind"),srclang:e.attr("data-srclang")});["data-label","data-desc","data-default"].forEach(t=>{l.hasAttr(e,t)&&s.attr(t,DOMPurify.sanitize(e.attr(t)))}),l.$media.append(s)}}}),n=DOMPurify.sanitize(i.text()),this.hasAttr(i,"lang")&&(r=i.attr("lang")),this.$sources=this.$media.find("source"),this.recreatingPlayer||this.recreatePlayer().then(function(){l.$playlist.removeClass("able-current").children("button").removeAttr("aria-current"),l.$playlist.eq(e).addClass("able-current").children("button").attr("aria-current","true"),!0===l.showNowPlaying&&void 0!==l.$nowPlayingDiv&&(o=t("<span>"),void 0!==r&&o.attr("lang",r),o.html("<span>"+l.tt.selectedTrack+":</span>"+n),l.$nowPlayingDiv.html(o)),l.initializing?l.swappingSrc=!1:"html5"===l.player?l.loadingMedia||(l.media.load(),l.loadingMedia=!0):"youtube"===l.player&&(l.okToPlay=!0),l.initializing=!1,l.playerCreated=!0})},AblePlayer.prototype.deletePlayer=function(e){"youtube"===this.player&&this.youTubePlayer&&this.youTubePlayer.destroy(),"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.destroy(),this.$controllerDiv.empty(),this.$elapsedTimeContainer.empty().text("0:00"),this.$durationContainer.empty(),this.$signWindow&&this.$signWindow.remove(),this.$transcriptArea&&this.$transcriptArea.remove(),t(".able-modal-dialog").remove(),this.$captionsWrapper&&this.$captionsWrapper.remove(),this.$descDiv&&this.$descDiv.remove(),this.hasCaptions=!1,this.hasChapters=!1,this.hasDescTracks=!1,this.hasOpenDesc=!1,this.hasClosedDesc=!1,this.captionsPopup=null,this.chaptersPopup=null,this.transcriptType=null,this.playerDeleted=!0},AblePlayer.prototype.getButtonTitle=function(t){return"playpause"===t||"play"===t?this.translate("play","Play"):"pause"===t?this.translate("pause","Pause"):"restart"===t?this.translate("restart","Restart"):"previous"===t?this.translate("prevTrack","Previous track"):"next"===t?this.translate("nextTrack","Next track"):"rewind"===t?this.translate("rewind","Rewind"):"forward"===t?this.translate("forward","Forward"):"captions"===t?this.captions.length>1?this.translate("captions","Captions"):this.captionsOn?this.translate("hideCaptions","Hide captions"):this.translate("showCaptions","Show captions"):"descriptions"===t?this.descOn?this.translate("turnOffDescriptions","Turn off descriptions"):this.translate("turnOnDescriptions","Turn on descriptions"):"transcript"===t?this.$transcriptDiv.is(":visible")?this.translate("hideTranscript","Hide transcript"):this.translate("showTranscript","Show transcript"):"chapters"===t?this.translate("chapters","Chapters"):"sign"===t?this.translate("sign","Sign language"):"volume"===t?this.translate("volume","Volume"):"faster"===t?this.translate("faster","Faster"):"slower"===t?this.translate("slower","Slower"):"preferences"===t?this.translate("preferences","Preferences"):"fullscreen"===t?this.fullscreen?this.translate("exitFullScreen","Exit full screen"):this.translate("enterFullScreen","Enter full screen"):(this.debug,this.capitalizeFirstLetter(t))}}(jQuery);var preProcessing={transformCSSClasses:function(t){if(t.length>1e3)throw new Error("Input too long");return t.replace(/<(v|c|b|i|u|lang|ruby)\.([\w\.]+)([^>])>/g,function(t,e,i,s){return`<${e} class="${i.replace(/\./g," ")}"${s}>`})},transformLangTags:function(t){return t.replace(/<lang\s+([\w-]+)([^>])>/g,function(t,e,i){return'<lang lang="'+e+'"'+i+">"})},transformVTags:function(t){return t.replace(/<v\s+([^>]?)>/g,function(t,e){var i=e.match(/class="([^"])"/),s=i?i[0]:"",a=e.replace(/class="[^"]"/,"").trim().split(/\s+/),n=[],r=[];a.forEach(function(t){-1!==t.indexOf("=")?n.push(t):r.push(t)});var o=r.join(" "),l="<v";return o&&(l+=' title="'+o+'"'),n.length>0&&(l+=" "+n.join(" ")),s&&(l+=" "+s),l+=">"})}},postProcessing={postprocessCTag:function(t){return t.replace(/<c class="([\w\s]+)">/g,function(t,e){return"<c."+e.replace(/ /g,".")+">"})},postprocessVTag:function(t){return t.replace(/<v([^>])class="([\w\s]+)"([^>])>/g,function(t,e,i,s){var a=i.trim().split(/\s+/).join("."),n=(e+s).replace(/\sclass="[\w\s]+"/,"").trim();return"<v."+a+(n?" "+n:"")+">"})},postprocessLangTag:function(t){return t.replace(/<lang lang="([\w-]+)"([^>])>/g,function(t,e,i){return"<lang "+e+i+">"})}},validate={preProcessVttContent:function(t){var e=preProcessing.transformCSSClasses(t),i=preProcessing.transformLangTags(e);return preProcessing.transformVTags(i)},postProcessVttContent:function(t,e){var i=postProcessing.postprocessCTag(t),s=postProcessing.postprocessVTag(i);return postProcessing.postprocessLangTag(s).replace(/-->/g,"--\x3e").replace(/<([\d:.]+)>/g,"<$1>").replace(/<\/v>/g,function(t,i){return-1!==e.indexOf(t,i)?t:""})},sanitizeVttContent:function(t){if(null==t)return"";var e=validate.preProcessVttContent(t),i=DOMPurify.sanitize(e,{ALLOWED_TAGS:["b","i","u","v","c","lang","ruby","rt","rp"],ALLOWED_ATTR:["title","class","lang"],KEEP_CONTENT:!0});return validate.postProcessVttContent(i,t)},isProtocolSafe:function(t){try{const e=new URL(t,window.location.origin);return["http:","https:"].includes(e.protocol)}catch(t){return!1}}};"undefined"!=typeof module&&module.exports&&(module.exports=validate),function(t){AblePlayer.prototype.setupTracks=function(){var e,i,s,a,n,r,o,l,h;for(e=this,s=(i=new this.defer).promise(),a=[],t("#able-vts").length?(this.vtsTracks=[],this.hasVts=!0):this.hasVts=!1,o=this.hasDescTracks&&this.descOn?this.altTracks:this.tracks,r=0;r<o.length;r++)if(h=(l=o[r]).kind?l.kind:"subtitles",l.src){var p=l.src;n=this.loadTextObject(p),a.push(n.catch(function(t){})),n.then(function(t,i){p=t.src;var s=t.language,a=t.label,n=t.desc;return function(r){var o=e.parseWebVTT(r).cues;e.hasVts&&e.setupVtsTracks(i,s,n,a,p,r.text),"captions"===i||"subtitles"===i?e.setupCaptions(t,o):"descriptions"===i?e.setupDescriptions(t,o):"chapters"===i?e.setupChapters(t,o):"metadata"===i&&e.setupMetadata(o)}}(l,h))}else(e.usingYouTubeCaptions||e.usingVimeoCaptions)&&e.setupCaptions(l);return e.usingYouTubeCaptions||e.usingVimeoCaptions?i.resolve():t.when.apply(t,a).then(function(){i.resolve()}),s},AblePlayer.prototype.getTracks=function(){var e,i,s,a,n,r,o,l,h,p,c;return e=this,l=!1,s=(i=new this.defer).promise(),this.$tracks=this.$media.find("track"),this.tracks=[],this.altTracks=[],this.captions=[],this.descriptions=[],this.chapters=[],this.meta=[],this.hasCaptionsTrack=!1,this.hasDescTracks=!1,this.$tracks.length&&(this.usingYouTubeCaptions=!1,this.$tracks.each(function(i,s){if("captions"===t(this).attr("kind")?e.hasCaptionsTrack=!0:"descriptions"===t(this).attr("kind")&&(e.hasClosedDesc=!0),a=t(this).attr("srclang")?t(this).attr("srclang"):e.lang,n=t(this).attr("label")?t(this).attr("label"):e.getLanguageName(a),void 0===t(this).attr("default")||l?a===e.lang?(h=!0,r=!1):r=!1:(r=!0,l=!0),r&&(e.captionLang=a),void 0!==t(this).data("desc")?(o=!0,e.hasDescTracks=!0):o=!1,o?e.altTracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}):e.tracks.push({kind:t(this).attr("kind"),src:t(this).attr("src"),language:a,label:n,def:r,desc:o}),i==e.$tracks.length-1){if(!l)if(h)for(e.captionLang=e.lang,p=!1,c=0;c<e.tracks.length&&!p;)e.tracks[c].language===e.lang&&(e.tracks[c].def=!0,p=!0),c++;else e.tracks[0].def=!0,e.captionLang=e.tracks[0].language;e.$media.find("track").removeAttr("default")}})),this.$tracks.length&&this.hasCaptionsTrack?i.resolve():"youtube"===this.player?this.getYouTubeCaptionTracks().then(function(){e.hasCaptions&&(e.usingYouTubeCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()}):"vimeo"===this.player?this.getVimeoCaptionTracks().then(function(){e.hasCaptions&&(e.usingVimeoCaptions=!0,e.$captionsWrapper&&e.$captionsWrapper.remove()),i.resolve()}):(this.hasCaptions=!1,e.$captionsWrapper&&e.$captionsWrapper.remove(),i.resolve()),s},AblePlayer.prototype.setupCaptions=function(e,i){var s,a;if(void 0===i&&(i=null),this.usingYouTubeCaptions||this.usingVimeoCaptions);else if(0===this.captions.length)this.captions.push({language:e.language,label:e.label,def:e.def,cues:i});else{for(s=!1,a=0;a<this.captions.length;a++)if(e.label.toLowerCase()<this.captions[a].label.toLowerCase()){this.captions.splice(a,0,{language:e.language,label:e.label,def:e.def,cues:i}),s=!0;break}s||this.captions.push({language:e.language,label:e.label,def:e.def,cues:i})}this.hasCaptions=!0,this.currentCaption=-1,1===this.prefCaptions?this.captionsOn=!0:0===this.prefCaptions?this.captionsOn=!1:1===this.defaultStateCaptions?this.captionsOn=!0:this.captionsOn=!1,"audio"===this.mediaType&&this.captionsOn&&this.$captionsContainer.removeClass("captions-off"),(!this.$captionsWrapper||this.$captionsWrapper&&!t.contains(this.$ableDiv[0],this.$captionsWrapper[0]))&&(this.$captionsDiv=t("<div>",{class:"able-captions"}),this.$captionsWrapper=t("<div>",{class:"able-captions-wrapper","aria-hidden":"true"}).hide(),"below"===this.prefCaptionsPosition?this.$captionsWrapper.addClass("able-captions-below"):this.$captionsWrapper.addClass("able-captions-overlay"),this.$captionsWrapper.append(this.$captionsDiv),this.$captionsContainer.append(this.$captionsWrapper))},AblePlayer.prototype.setupDescriptions=function(t,e){this.hasClosedDesc=!0,this.currentDescription=-1,this.descriptions.push({cues:e,language:t.language})},AblePlayer.prototype.setupChapters=function(t,e){this.hasChapters=!0,this.chapters.push({cues:e,language:t.language})},AblePlayer.prototype.setupMetadata=function(e){"text"===this.metaType?this.metaDiv&&t("#"+this.metaDiv)&&(this.$metaDiv=t("#"+this.metaDiv),this.hasMeta=!0,this.meta=e):"selector"===this.metaType&&(this.hasMeta=!0,this.visibleSelectors=[],this.meta=e)},AblePlayer.prototype.loadTextObject=function(e){var i,s,a,n;return s=(i=new this.defer).promise(),a=this,n=t("<div>",{style:"display:none"}),fetch(e).then(t=>t.text()).then(t=>{var s,a=t.split(/\r?\n\s\r?\n/),r="";a.forEach(t=>{s=validate.sanitizeVttContent(t),r+=s+"\n\n"}),n.html(r);let o={src:e,text:r};i.resolve(o),n.remove()}).catch(t=>{a.debug,i.reject(e),n.remove()}),s}}(jQuery),function(t){AblePlayer.prototype.initYouTubePlayer=function(){var e,i,s,a;return e=this,s=(i=new this.defer).promise(),this.youTubePlayerReady=!1,a=this.youTubeDescId&&this.prefDesc?this.youTubeDescId:this.youTubeId,this.activeYouTubeId=a,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeInit().then(function(){i.resolve()}):(AblePlayer.loadingYouTubeIframeAPI||e.getScript("https://www.youtube.com/iframe_api",function(){}),t("body").on("youTubeIframeAPIReady",function(){e.finalizeYoutubeInit().then(function(){i.resolve()})})),s},AblePlayer.prototype.finalizeYoutubeInit=function(){var e,i,s,a,n;return i=(e=new this.defer).promise(),s=this,a=this.mediaId+"_youtube",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.okToPlay?1:0,void 0===this.captionLang&&(this.captionLang=this.lang),this.youTubePlayer=new YT.Player(a,{videoId:this.activeYouTubeId,host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,cc_lang_pref:this.captionLang,cc_load_policy:1,controls:0,disableKb:1,enablejsapi:1,hl:this.lang,iv_load_policy:3,origin:window.location.origin,playsinline:this.playsInline,rel:0,start:this.startTime},events:{onReady:function(){s.youTubePlayerReady=!0,s.playerWidth&&s.playerHeight||s.getYouTubeDimensions(),s.playerWidth&&s.playerHeight&&s.youTubePlayer.setSize(s.playerWidth,s.playerHeight),s.swappingSrc&&(s.swappingSrc=!1,s.restoreFocus(),s.cueingPlaylistItem=!1,(s.playing||s.okToPlay)&&s.playMedia()),s.userClickedPlaylist&&(s.userClickedPlaylist=!1),s.recreatingPlayer&&(s.recreatingPlayer=!1),e.resolve()},onError:function(t){e.reject()},onStateChange:function(t){s.getPlayerState().then(function(t){"playing"===t?(s.hasSignLanguage&&s.signVideo&&s.signVideo.play(!0),s.playing=!0,s.startedPlaying=!0,s.paused=!1):"ended"==t?s.onMediaComplete():(s.playing=!1,s.paused=!0),s.stoppingYouTube&&"paused"===t&&(s.hasSignLanguage&&s.signVideo&&s.signVideo.pause(!0),void 0!==s.$posterImg&&s.$posterImg.show(),s.stoppingYouTube=!1,s.seeking=!1,s.playing=!1,s.paused=!0)}),"youtube"!==s.player||s.usingYouTubeCaptions||s.youTubePlayer.getOptions("captions")&&s.youTubePlayer.unloadModule("captions")},onApiChange:function(){s.duration=s.youTubePlayer.getDuration()},onPlaybackQualityChange:function(){}}}),this.hasPlaylist||this.$media.remove(),i},AblePlayer.prototype.getYouTubeDimensions=function(t){var e,i,s;void 0!==(e=this.$ableWrapper.find("iframe"))&&e.prop("width")&&(i=e.prop("width"),e.prop("height")&&(s=e.prop("height"),this.resizePlayer(i,s)))},AblePlayer.prototype.getYouTubeCaptionTracks=function(){var t,e,i,s,a,n,r=new this.defer,o=r.promise(),l=!1;return t=this,this.youTubePlayer.getOption("captions","tracklist")||(this.youTubePlayer.addEventListener("onApiChange",function(){if(l=!0,t.duration=t.youTubePlayer.getDuration(),t.loadingYouTubeCaptions){if(e=t.youTubePlayer.getOption("captions","tracklist"),t.okToPlay||t.youTubePlayer.pauseVideo(),e&&e.length){for(i=0;i<e.length;i++)s=e[i].languageCode,a=e[i].languageName,n=!1,(void 0!==t.captionLang&&s===t.captionLang||void 0!==t.lang&&s===t.lang)&&(n=!0),t.tracks.push({kind:"captions",language:s,label:a,def:n}),t.captions.push({language:s,label:a,def:n,cues:null});t.hasCaptions=!0,t.setupPopups("captions")}else t.usingYouTubeCaptions=!1,t.hasCaptions=!1;t.loadingYouTubeCaptions=!1,t.okToPlay&&t.youTubePlayer.playVideo()}t.captionLangPending&&(t.youTubePlayer.setOption("captions","track",{languageCode:t.captionLangPending}),t.captionLangPending=null),void 0!==t.prefCaptionsSize&&t.youTubePlayer.setOption("captions","fontSize",t.translatePrefs("size",t.prefCaptionsSize,"youtube")),r.resolve()}),this.loadingYouTubeCaptions=!0,this.youTubePlayer.playVideo(),setTimeout(()=>{l||setTimeout(()=>{t.youTubePlayer.pauseVideo(),r.resolve()},500)},500)),o},AblePlayer.prototype.getYouTubePosterUrl=function(t,e){var i="https://img.youtube.com/vi/"+t;return"120"==e?i+"/default.jpg":"320"==e?i+"/mqdefault.jpg":"480"==e?i+"/hqdefault.jpg":"640"==e?i+"/sddefault.jpg":"1280"==e?i+"/hq720.jpg":"1920"==e&&i+"/maxresdefault.jpg"},AblePlayer.prototype.getYouTubeId=function(t){var e;return-1!==t.indexOf("youtu")?(e=(t=t.trim()).length-11,t.substring(e)):t}}(jQuery),function(t){window.AccessibleSlider=function(e,i,s,a,n,r,o,l,h,p){var c,u;c=this,this.position=0,this.tracking=!1,this.trackDevice=null,this.keyTrackPosition=0,this.lastTrackPosition=0,this.nextStep=1,this.inertiaCount=0,this.bodyDiv=t(e),h&&(this.loadedDiv=t("<div></div>"),this.playedDiv=t("<div></div>")),this.seekHead=t("<div>",{"aria-orientation":i,class:"able-"+l+"-head"}),"visible"===p?this.seekHead.attr("tabindex","0"):this.seekHead.attr("tabindex","-1"),this.seekHead.attr({role:"slider","aria-label":o,"aria-valuemin":a,"aria-valuemax":n}),this.timeTooltipTimeoutId=null,this.overTooltip=!1,this.timeTooltip=t("<div>"),this.bodyDiv.append(this.timeTooltip),this.timeTooltip.attr("role","tooltip"),this.timeTooltip.addClass("able-tooltip"),this.timeTooltip.on("mouseenter focus",function(){c.overTooltip=!0,clearInterval(c.timeTooltipTimeoutId)}),this.timeTooltip.on("mouseleave blur",function(){c.overTooltip=!1,t(this).hide()}),this.timeTooltip.hide(),this.bodyDiv.append(this.loadedDiv),this.bodyDiv.append(this.playedDiv),this.bodyDiv.append(this.seekHead),this.bodyDiv.wrap("<div></div>"),this.wrapperDiv=this.bodyDiv.parent(),"legacy"===this.skin&&("horizontal"===i?(this.wrapperDiv.width(s),this.loadedDiv.width(0)):(this.wrapperDiv.height(s),this.loadedDiv.height(0))),this.wrapperDiv.addClass("able-"+l+"-wrapper"),h&&(this.loadedDiv.addClass("able-"+l+"-loaded"),this.playedDiv.width(0),this.playedDiv.addClass("able-"+l+"-played"),this.setDuration(n)),this.seekHead.on("mouseenter mouseleave mousemove mousedown mouseup focus blur touchstart touchmove touchend",function(t){u=c.pointerEventToXY(t),"mouseenter"===t.type||"focus"===t.type?c.overHead=!0:"mouseleave"===t.type||"blur"===t.type?(c.overHead=!1,!c.overBody&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x))):"mousemove"===t.type||"touchmove"===t.type?c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x):"mousedown"===t.type||"touchstart"===t.type?(c.startTracking("mouse",c.pageXToPosition(c.seekHead.offset()+c.seekHead.width()/2)),c.bodyDiv.is(":focus")||c.bodyDiv.focus(),t.preventDefault()):"mouseup"!==t.type&&"touchend"!==t.type||c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x)),"mousemove"!==t.type&&"mousedown"!==t.type&&"mouseup"!==t.type&&"touchstart"!==t.type&&"touchend"!==t.type&&c.refreshTooltip()}),this.bodyDiv.on("mouseenter mouseleave mousemove mousedown mouseup keydown keyup touchstart touchmove touchend",function(t){if(2==t.button&&"mousedown"==t.type)return;u=c.pointerEventToXY(t);let e=t.key;if("mouseenter"===t.type)c.overBody=!0,c.overBodyMousePos={x:u.x,y:u.y};else if("mouseleave"===t.type)c.overBody=!1,c.overBodyMousePos=null,!c.overHead&&c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("mousemove"===t.type||"touchmove"===t.type)c.overBodyMousePos={x:u.x,y:u.y},c.tracking&&"mouse"===c.trackDevice&&c.trackHeadAtPageX(u.x);else if("mousedown"===t.type||"touchstart"===t.type)c.startTracking("mouse",c.pageXToPosition(u.x)),c.trackHeadAtPageX(u.x),c.seekHead.is(":focus")||c.seekHead.focus(),t.preventDefault();else if("mouseup"===t.type||"touchend"===t.type)c.tracking&&"mouse"===c.trackDevice&&c.stopTracking(c.pageXToPosition(u.x));else if("keydown"===t.type){if("Home"===t.key)c.trackImmediatelyTo(0);else if("End"===t.key)c.trackImmediatelyTo(c.duration);else if("ArrowLeft"===t.key||"ArrowDown"===t.key)c.arrowKeyDown(-1);else if("ArrowRight"===t.key||"ArrowUp"===t.key)c.arrowKeyDown(1);else if("PageUp"===t.key&&r>0)c.arrowKeyDown(r);else{if(!("PageDown"===t.key&&r>0))return;c.arrowKeyDown(-r)}t.preventDefault()}else"keyup"===t.type&&e===t.key&&(c.tracking&&"keyboard"===c.trackDevice&&c.stopTracking(c.keyTrackPosition),t.preventDefault());c.overTooltip||"mouseup"===t.type||"keydown"===t.type||"keydown"===t.type||c.refreshTooltip()})},AccessibleSlider.prototype.arrowKeyDown=function(t){this.tracking&&"keyboard"===this.trackDevice?(this.keyTrackPosition=this.boundPos(this.keyTrackPosition+this.nextStept),this.inertiaCount+=1,20===this.inertiaCount&&(this.inertiaCount=0,this.nextStep=2),this.trackHeadAtPosition(this.keyTrackPosition)):(this.nextStep=1,this.inertiaCount=0,this.keyTrackPosition=this.boundPos(this.position+this.nextStept),this.startTracking("keyboard",this.keyTrackPosition),this.trackHeadAtPosition(this.keyTrackPosition))},AccessibleSlider.prototype.pageXToPosition=function(t){var e=t-this.bodyDiv.offset().left,i=this.duration(e/this.bodyDiv.width());return this.boundPos(i)},AccessibleSlider.prototype.boundPos=function(t){return Math.max(0,Math.min(t,this.duration))},AccessibleSlider.prototype.setDuration=function(t){t!==this.duration&&(this.duration=t,this.resetHeadLocation(),this.seekHead.attr("aria-valuemax",t))},AccessibleSlider.prototype.setWidth=function(t){this.wrapperDiv.width(t),this.resizeDivs(),this.resetHeadLocation()},AccessibleSlider.prototype.getWidth=function(){return this.wrapperDiv.width()},AccessibleSlider.prototype.resizeDivs=function(){this.playedDiv.width(this.bodyDiv.width()(this.position/this.duration)),this.loadedDiv.width(this.bodyDiv.width()this.buffered)},AccessibleSlider.prototype.resetHeadLocation=function(){var t=this.position/this.duration,e=this.bodyDiv.width()t;this.seekHead.css("left",e-this.seekHead.width()/2),this.tracking&&this.stopTracking(this.position)},AccessibleSlider.prototype.setPosition=function(t,e){this.position=t,this.resetHeadLocation(),this.overHead&&this.refreshTooltip(),this.resizeDivs(),this.updateAriaValues(t,e)},AccessibleSlider.prototype.setBuffered=function(t){isNaN(t)||(this.buffered=t,this.redrawDivs)},AccessibleSlider.prototype.startTracking=function(t,e){this.tracking||(this.trackDevice=t,this.tracking=!0,this.bodyDiv.trigger("startTracking",[e]))},AccessibleSlider.prototype.stopTracking=function(t){this.trackDevice=null,this.tracking=!1,this.bodyDiv.trigger("stopTracking",[t]),this.setPosition(t,!0)},AccessibleSlider.prototype.trackHeadAtPageX=function(t){var e=this.pageXToPosition(t),i=t-this.bodyDiv.offset().left-this.seekHead.width()/2;i=Math.max(0,Math.min(i,this.bodyDiv.width()-this.seekHead.width())),this.lastTrackPosition=e,this.seekHead.css("left",i),this.reportTrackAtPosition(e)},AccessibleSlider.prototype.trackHeadAtPosition=function(t){var e=t/this.duration,i=this.bodyDiv.width()e;this.lastTrackPosition=t,this.seekHead.css("left",i-this.seekHead.width()/2),this.reportTrackAtPosition(t)},AccessibleSlider.prototype.reportTrackAtPosition=function(t){this.bodyDiv.trigger("tracking",[t]),this.updateAriaValues(t,!0)},AccessibleSlider.prototype.updateAriaValues=function(e,i){var s,a=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),o=1===n?"minute":"minutes",l=1===r?"second":"seconds";s=a>0?a+" "+(1===a?"hour":"hours")+", "+n+" "+o+", "+r+" "+l:n>0?n+" "+o+", "+r+" "+l:r+" "+l,this.liveAriaRegion||(this.liveAriaRegion=t("<span>",{class:"able-offscreen","aria-live":"polite"}),this.wrapperDiv.append(this.liveAriaRegion)),i&&this.liveAriaRegion.text()!==s&&this.liveAriaRegion.text(s),this.seekHead.attr("aria-valuetext",s),this.seekHead.attr("aria-valuenow",Math.floor(e).toString())},AccessibleSlider.prototype.trackImmediatelyTo=function(t){this.startTracking("keyboard",t),this.trackHeadAtPosition(t),this.keyTrackPosition=t},AccessibleSlider.prototype.refreshTooltip=function(){if(this.overHead)this.timeTooltip.show(),this.tracking?this.timeTooltip.text(this.positionToStr(this.lastTrackPosition)):this.timeTooltip.text(this.positionToStr(this.position)),this.setTooltipPosition(this.seekHead.position().left+this.seekHead.width()/2);else if(this.overBody&&this.overBodyMousePos)this.timeTooltip.show(),this.timeTooltip.text(this.positionToStr(this.pageXToPosition(this.overBodyMousePos.x))),this.setTooltipPosition(this.overBodyMousePos.x-this.bodyDiv.offset().left);else{clearTimeout(this.timeTooltipTimeoutId);var t=this;this.timeTooltipTimeoutId=setTimeout(function(){t.timeTooltip.hide()},500)}},AccessibleSlider.prototype.hideSliderTooltips=function(){this.overHead=!1,this.overBody=!1,this.timeTooltip.hide()},AccessibleSlider.prototype.setTooltipPosition=function(t){this.timeTooltip.css({left:t-this.timeTooltip.width()/2-10,bottom:this.seekHead.height()})},AccessibleSlider.prototype.positionToStr=function(t){var e=Math.floor(t/3600),i=Math.floor(t/60)%60,s=Math.floor(t%60);return s<10&&(s="0"+s),e>0?(i<10&&(i="0"+i),e+":"+i+":"+s):i+":"+s},AccessibleSlider.prototype.pointerEventToXY=function(t){var e={x:0,y:0};if("touchstart"==t.type||"touchmove"==t.type||"touchend"==t.type||"touchcancel"==t.type){var i=t.originalEvent.touches[0]||t.originalEvent.changedTouches[0];e.x=i.pageX,e.y=i.pageY}else"mousedown"!=t.type&&"mouseup"!=t.type&&"mousemove"!=t.type&&"mouseover"!=t.type&&"mouseout"!=t.type&&"mouseenter"!=t.type&&"mouseleave"!=t.type||(e.x=t.pageX,e.y=t.pageY);return e}}(jQuery),function(t){AblePlayer.prototype.addVolumeSlider=function(e){var i,s,a,n,r,o;i=this,s=this.mediaId+"-volume-slider",a=this.mediaId+"-volume-help",this.$volumeSlider=t("<div>",{id:s,class:"able-volume-slider","aria-hidden":"true"}).hide(),this.$volumeSliderTooltip=t("<div>",{class:"able-tooltip",role:"tooltip"}).hide(),this.$volumeRange=t("<input>",{type:"range",min:"0",max:"10",step:"1",orient:"vertical","aria-label":this.translate("volumeUpDown","Volume up down"),value:this.volume}),n=parseInt(i.volume)/10100,this.$volumeHelp=t("<div>",{id:a,class:"able-volume-help","aria-live":"polite"}).text(n+"%"),r=this.$volumeButton.attr("aria-label"),this.$volumeButton.attr("aria-label",r+" "+n+"%"),this.$volumeSlider.append(this.$volumeSliderTooltip,this.$volumeRange,this.$volumeHelp),o=this.$volumeButton.parents(".able-control-row")[0],this.$volumeSlider.css("bottom",o.offsetHeight),e.append(this.$volumeSlider),this.$volumeRange.on("change",function(e){i.handleVolumeChange(t(this).val())}),this.$volumeRange.on("input",function(e){i.handleVolumeChange(t(this).val())}),this.$volumeRange.on("keydown",function(t){"Escape"!==t.key&&"Tab"!==t.key&&"Enter"!==t.key||(i.$volumeSlider.is(":visible")?(i.closingVolume=!0,i.hideVolumePopup()):i.closingVolume||i.showVolumePopup())})},AblePlayer.prototype.refreshVolumeHelp=function(t){var e;e=t/10100,this.$volumeHelp&&this.$volumeHelp.text(e+"%"),this.$volumeRange.attr("value",t)},AblePlayer.prototype.refreshVolumeButton=function(t){var e,i,s;e=this.getVolumeName(t),i=t/10100,s=this.translate("volume","Volume")+" "+i+"%",this.getIcon(this.$volumeButton,"volume-"+e),this.$volumeButton.attr("aria-label",s)},AblePlayer.prototype.handleVolumeButtonClick=function(){this.$volumeSlider.is(":visible")?this.hideVolumePopup():this.showVolumePopup()},AblePlayer.prototype.handleVolumeKeystroke=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleVolumeChange=function(t){this.isMuted()&&t>0?this.setMute(!1):0===t?this.setMute(!0):(this.setVolume(t),this.refreshVolumeHelp(t),this.refreshVolumeButton(t))},AblePlayer.prototype.handleMute=function(){this.isMuted()?this.setMute(!1):this.setMute(!0)},AblePlayer.prototype.showVolumePopup=function(){this.closePopups(),this.$tooltipDiv.hide(),this.$volumeSlider.show().attr("aria-hidden","false"),this.$volumeButton.attr("aria-expanded","true"),this.$volumeButton.focus(),this.waitThenFocus(this.$volumeRange)},AblePlayer.prototype.hideVolumePopup=function(){var t=this;this.$volumeSlider.hide().attr("aria-hidden","true"),this.$volumeButton.attr("aria-expanded","false").focus(),setTimeout(function(){t.closingVolume=!1},1e3)},AblePlayer.prototype.isMuted=function(){return"html5"===this.player?this.media.muted:"youtube"===this.player?this.youTubePlayer.isMuted():void 0},AblePlayer.prototype.setMute=function(t){t?(this.lastVolume=this.volume,this.volume=0):void 0!==this.lastVolume&&(this.volume=this.lastVolume),"html5"===this.player?this.media.muted=t:"youtube"===this.player&&(t?this.youTubePlayer.mute():this.youTubePlayer.unMute()),this.setVolume(this.volume),this.refreshVolumeHelp(this.volume),this.refreshVolumeButton(this.volume)},AblePlayer.prototype.setVolume=function(t){var e;this.syncSignVideo({volume:0}),"html5"===this.player?(e=t/10,this.media.volume=e):"youtube"===this.player?(e=10t,this.youTubePlayer.setVolume(e),this.volume=t):"vimeo"===this.player&&(e=t/10,this.vimeoPlayer.setVolume(e).then(function(){})),this.lastVolume=t},AblePlayer.prototype.getVolume=function(t){return"html5"===this.player?10this.media.volume:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getVolume()/10:"vimeo"===this.player?this.volume:void 0},AblePlayer.prototype.getVolumeName=function(t){return 0==t?"mute":10==t?"loud":t<5?"soft":"medium"}}(jQuery),function(t){var e="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]";window.AccessibleDialog=function(i,s,a,n){this.title=a,this.closeButtonLabel=n,this.focusedElementBeforeModal=s,this.baseId=t(i).attr("id")||Math.floor(1e9Math.random()).toString();var r=this,o=i;this.modal=o,o.addClass("able-modal-dialog");var l=t("<button>",{class:"modalCloseButton",title:r.closeButtonLabel,"aria-label":r.closeButtonLabel}).text("×");l.on("keydown",function(t){" "===t.key&&r.hide()}).on("click",function(){r.hide()});var h=t("<h1></h1>");h.attr("id","modalTitle-"+this.baseId),h.text(a),this.titleH1=h,o.attr({"aria-labelledby":"modalTitle-"+this.baseId});var p=t("<div>",{class:"able-modal-header"});p.prepend(h),p.prepend(l),o.prepend(p),o.attr({"aria-hidden":"true",role:"dialog","aria-modal":"true"}),o.on("keydown",function(i){if("Escape"===i.key)r.hide(),i.preventDefault();else if("Tab"===i.key){var s=o.find("").filter(e).filter(":visible");if(0===s.length)return;var a=t(":focus"),n=s.index(a);i.shiftKey?0===n&&(s.get(s.length-1).trigger("focus"),i.preventDefault()):n===s.length-1&&(s.get(0).trigger("focus"),i.preventDefault())}i.stopPropagation()}),t("body").hasClass("able-modal-active")&&(t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("inert"),t("body").removeClass("able-modal-active"))},AccessibleDialog.prototype.show=function(){if(!this.overlay){var i=t("<div></div>").attr({class:"able-modal-overlay",tabindex:"-1"});this.overlay=i,t("body").append(i),i.on("mousedown.accessibleModal",function(t){t.preventDefault(),s.hide()})}t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").attr("inert",!0),t("body").addClass("able-modal-active"),this.overlay.css("display","block"),this.modal.css("display","block"),this.modal.attr({"aria-hidden":"false",tabindex:"-1"}),0===this.modal.find("").filter(e).filter(":visible").length&&this.focusedElementBeforeModal.blur();var s=this;setTimeout(function(){s.modal.find("button.modalCloseButton").first().trigger("focus")},300)},AccessibleDialog.prototype.hide=function(){this.overlay&&this.overlay.css("display","none"),this.modal.css("display","none"),this.modal.attr("aria-hidden","true"),t("body > ").not(".able-modal-overlay").not(".able-modal-dialog").removeAttr("inert"),t("body").removeClass("able-modal-active"),this.focusedElementBeforeModal.trigger("focus")},AccessibleDialog.prototype.getInputs=function(){return!!this.modal&&this.modal.find("input")}}(jQuery),function(t){AblePlayer.prototype.getNextHeadingLevel=function(e){var i,s,a,n;return e.parents().each(function(){if(i=t(this).children(":header"),s=i.length)return a=i.eq(s-1).prop("tagName"),!1}),void 0===a?n=1:(n=parseInt(a[1]),(n+=1)>6&&(n=6)),n},AblePlayer.prototype.countProperties=function(t){var e,i;for(i in e=0,t)t.hasOwnProperty(i)&&++e;return e},AblePlayer.prototype.formatSecondsAsColonTime=function(t,e){var i,s,a,n,r,o,l;if(e)if(2===(n=t.toString().split(".")).length){if((r=n[1]).length<3)for(o=3-r.length,l=1;l<=o;l++)r+="0"}else r="000";return i=Math.floor(t/3600),s=Math.floor(t/60)%60,(a=Math.floor(t%60))<10&&(a="0"+a),i>0?(s<10&&(s="0"+s),e?i+":"+s+":"+a+"."+r:i+":"+s+":"+a):e?(i<1?i="00":i<10&&(i="0"+i),s<1?s="00":s<10&&(s="0"+s),i+":"+s+":"+a+"."+r):s+":"+a},AblePlayer.prototype.getSecondsFromColonTime=function(t){var e;return 3===(e=t.split(":")).length?3600parseInt(e[0])+60parseInt(e[1])+parseFloat(e[2]):2===e.length?60parseInt(e[0])+parseFloat(e[1]):1===e.length?parseFloat(e[0]):void 0},AblePlayer.prototype.capitalizeFirstLetter=function(t){return t.charAt(0).toUpperCase()+t.slice(1)},AblePlayer.prototype.roundDown=function(t,e){return Number(Math.floor(t+"e"+e)+"e-"+e)},AblePlayer.prototype.defer=function(){const t=this,e=new Promise((i,s)=>{t.resolve=i,t.reject=s,t.promise=()=>e})},AblePlayer.prototype.getScript=function(t,e){var i=document.createElement("script"),s=document.getElementsByTagName("script")[0];i.async=1,i.onload=i.onreadystatechange=function(t,s){(s||!i.readyState||/loaded|complete/.test(i.readyState))&&(i.onload=i.onreadystatechange=null,i=void 0,!s&&e&&setTimeout(e,0))},i.src=t,s.parentNode.insertBefore(i,s)},AblePlayer.prototype.hasAttr=function(t,e){var i=t.attr(e);return void 0!==i&&!1!==i}}(jQuery),function(t){AblePlayer.prototype.initDescription=function(){var t,e;return e=(t=new this.defer).promise(),"audio"===this.mediaType&&t.resolve(),this.descFile=this.$sources.first().attr("data-desc-src"),void 0!==this.descFile?this.hasOpenDesc=!0:this.hasOpenDesc=!(!this.youTubeDescId&&!this.vimeoDescId),this.descMethod=null,this.hasOpenDesc&&this.hasClosedDesc?this.descMethod=this.prefDescMethod?this.prefDescMethod:"video":this.hasOpenDesc?this.descMethod="video":this.hasClosedDesc&&(this.descMethod="text"),this.descOn=!1,this.descMethod&&(1===this.prefDesc?this.descOn=!0:0===this.prefDesc?this.descOn=!1:this.descOn=1===this.defaultStateDescriptions),void 0===this.$descDiv&&this.hasClosedDesc&&this.injectTextDescriptionArea(),this.descOn?("video"!==this.descMethod||this.usingDescribedVersion()||this.swapDescription(),this.hasClosedDesc&&(this.prefDescVisible?void 0!==this.$descDiv&&(this.$descDiv.show(),this.$descDiv.removeClass("able-offscreen")):void 0!==this.$descDiv&&this.$descDiv.addClass("able-offscreen"))):"video"===this.descMethod?this.usingDescribedVersion()&&this.swapDescription():"text"===this.descMethod&&void 0!==this.$descDiv&&(this.$descDiv.hide(),this.$descDiv.removeClass("able-offscreen")),t.resolve(),e},AblePlayer.prototype.usingDescribedVersion=function(){return"youtube"===this.player?this.activeYouTubeId===this.youTubeDescId:"vimeo"===this.player?this.activeVimeoId===this.vimeoDescId:this.$sources.first().attr("data-desc-src")===this.$sources.first().attr("src")},AblePlayer.prototype.initSpeech=function(e){var i=this;function attemptEnableSpeech(){var t=new SpeechSynthesisUtterance(" ");t.onend=function(){i.getBrowserVoices(),(Array.isArray(i.descVoices)&&i.descVoices.length||"init"!==e)&&(i.speechEnabled=!0)},i.synth.speak(t)}null===this.speechEnabled&&(window.speechSynthesis?(this.synth=window.speechSynthesis,this.synth.cancel(),"init"===e?(attemptEnableSpeech(),t(document).on("click",function handleInitialClick(){attemptEnableSpeech(),t(document).off("click",handleInitialClick)})):attemptEnableSpeech()):this.speechEnabled=!1)},AblePlayer.prototype.getBrowserVoices=function(){var t,e,i,s;if(s=this.captionLang?this.captionLang.substring(0,2).toLowerCase():this.lang.substring(0,2).toLowerCase(),this.descVoices=[],t=this.synth.getVoices(),e=this.getDescriptionLangs(),t.length>0){this.descVoices=[];for(var a=0;a<t.length;a++)(i=t[a].lang.substring(0,2).toLowerCase())===s&&-1!==e.indexOf(i)&&this.descVoices.push(t[a]);this.descVoices.length||(this.descVoices=t)}return!1},AblePlayer.prototype.getDescriptionLangs=function(){var t=[];if(this.tracks)for(var e=0;e<this.tracks.length;e++)"descriptions"===this.tracks[e].kind&&t.push(this.tracks[e].language.substring(0,2).toLowerCase());return t},AblePlayer.prototype.setDescriptionVoice=function(){var t,e,i,s,a;if(e=void 0!==this.getPref().voices?this.getPrefDescVoice():null,this.getBrowserVoices(),this.rebuildDescPrefsForm(),s=this.selectedDescriptions?this.selectedDescriptions.language:this.captionLang?this.captionLang:this.lang,this.synth&&(t=this.synth.getVoices()).length>0){if(e){a=!1;for(var n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()&&t[n].name===e){i=t[n].name,a=!0;break}}if(!a)for(n=0;n<t.length;n++)if(t[n].lang.substring(0,2).toLowerCase()===s.substring(0,2).toLowerCase()){i=t[n].name;break}this.prefDescVoice=i,this.prefDescVoiceLang=s,this.$voiceSelectField&&this.$voiceSelectField.val(this.prefDescVoice),this.updatePreferences("voice")}},AblePlayer.prototype.swapDescription=function(){var e,i,s,a;if(e=this,this.loadingMedia=!1,this.$focusedElement=t(":focus"),this.activeMedia=this.mediaId,this.elapsed>0?this.swapTime=this.elapsed:this.swapTime=0,this.duration>0&&(this.prevDuration=this.duration),this.okToPlay||(this.okToPlay=this.playing),this.descOn?this.showAlert(this.translate("alertDescribedVersion","Using the audio described version of this video")):this.showAlert(this.translate("alertNonDescribedVersion","Using the non-described version of this video")),"html5"===this.player){if(this.swappingSrc=!0,this.paused=!0,this.usingDescribedVersion())for(i=0;i<this.$sources.length;i++)s=DOMPurify.sanitize(this.$sources[i].getAttribute("data-orig-src")),srcType=this.$sources[i].getAttribute("type"),s&&this.$sources[i].setAttribute("src",s);else for(i=0;i<this.$sources.length;i++)s=DOMPurify.sanitize(this.$sources[i].getAttribute("src")),a=DOMPurify.sanitize(this.$sources[i].getAttribute("data-desc-src")),srcType=this.$sources[i].getAttribute("type"),a&&(this.$sources[i].setAttribute("src",a),this.$sources[i].setAttribute("data-orig-src",s));if(this.recreatingPlayer)return;this.playerCreated&&(this.deletePlayer("swap-desc-html"),this.recreatePlayer().then(function(){e.loadingMedia||(e.media.load(),e.loadingMedia=!0)}))}else if("youtube"===this.player){if(this.activeYouTubeId=this.usingDescribedVersion()?this.youTubeId:this.youTubeDescId,void 0!==this.youTubePlayer&&(e.swappingSrc=!0,e.playing?e.youTubePlayer.loadVideoById(e.activeYouTubeId,e.swapTime):e.youTubePlayer.cueVideoById(e.activeYouTubeId,e.swapTime)),this.playerCreated&&this.deletePlayer("swap-desc-youtube"),this.recreatingPlayer)return;this.recreatePlayer().then(function(){})}else if("vimeo"===this.player){if(this.usingDescribedVersion()?(this.activeVimeoId=this.vimeoId,this.showAlert(this.translate("alertNonDescribedVersion","Using the non-described version of this video"))):(this.activeVimeoId=this.vimeoDescId,this.showAlert(this.translate("alertDescribedVersion","Using the audio described version of this video"))),this.playerCreated&&this.deletePlayer("swap-desc-vimeo"),this.recreatingPlayer)return;this.recreatePlayer().then(function(){e.vimeoPlayer.loadVideo(e.activeVimeoId).then(function(){e.playing?e.vimeoPlayer.setCurrentTime(e.swapTime):e.vimeoPlayer.pause()})})}},AblePlayer.prototype.showDescription=function(t){if(this.playing&&this.hasClosedDesc&&!this.swappingSrc&&this.descOn&&("video"!==this.descMethod||this.prefDescVisible)){var e,i,s,a;0;var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e.push(flattenComponentForDescription(t.children[i]));return e.join("")};for(e=[],this.selectedDescriptions?e=this.selectedDescriptions.cues:this.descriptions.length>=1&&(e=this.descriptions[0].cues),i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s?this.currentDescription!==s&&(this.$status.removeAttr("aria-live"),a=flattenComponentForDescription(e[s].components),"screenreader"===this.descReader?this.$descDiv.html(a):this.speechEnabled?("video"!==this.descMethod&&this.announceDescriptionText("description",a),this.prefDescVisible&&this.$descDiv.html(a).removeAttr("aria-live aria-atomic")):this.$descDiv.html(a),this.prefDescPause&&"text"===this.descMethod&&(this.pauseMedia(),this.pausedForDescription=!0),this.currentDescription=s):(this.$descDiv.html(""),this.currentDescription=-1,this.$status.attr("aria-live","polite"))}},AblePlayer.prototype.syncSpeechToPlaybackRate=function(t){var e;.5===t?e=.7:.75===t?e=.8:1===t?e=1:1.25===t?e=1.1:1.5===t?e=1.2:1.75===t?e=1.5:2===t?e=2:2.25===t?e=2.5:t>=2.5&&(e=3),this.prefDescRate=e},AblePlayer.prototype.announceDescriptionText=function(e,i){var s,a,n,r,o,l,h,p,c;s=this;if(this.speechEnabled||this.initSpeech("desc"),"sample"===e?(a=t("#"+this.mediaId+"_prefDescVoice").val(),o=t("#"+this.mediaId+"_prefDescPitch").val(),l=t("#"+this.mediaId+"_prefDescRate").val(),h=t("#"+this.mediaId+"_prefDescVolume").val()):(a=this.prefDescVoice,o=this.prefDescPitch,l=this.prefDescRate,h=this.prefDescVolume),this.descVoices){if(this.descVoices.length>0){if(a)for(n=0;n<this.descVoices.length;n++)if(this.descVoices[n].name==a){r=this.descVoices[n];break}void 0===r&&(r=this.descVoices[0])}}else r=null;p=new SpeechSynthesisUtterance,r&&(p.voice=r),p.voiceURI="native",p.volume=h,p.rate=l,p.pitch=o,p.text=i,p.lang=this.lang,p.onstart=function(t){},p.onpause=function(t){},p.onend=function(t){this.speakingDescription=!1,c=t.elapsedTime,c>100?(t.elapsedTime/1e3).toFixed(2):t.elapsedTime.toFixed(2),this.debug,"description"===e&&s.prefDescPause&&s.pausedForDescription&&(s.playMedia(),this.pausedForDescription=!1)},p.onerror=function(t){},this.synth.paused&&this.synth.resume(),this.synth.speak(p),this.speakingDescription=!0}}(jQuery),jQuery,AblePlayer.prototype.isIOS=function(t){var e;return e=navigator.userAgent.toLowerCase(),!!/ipad|iphone|ipod/.exec(e)&&(void 0===t||-1!==e.indexOf("os "+t))},AblePlayer.prototype.browserSupportsVolume=function(){var t;return!this.isIOS()&&((t=new Audio).volume=.9,.9===t.volume)},AblePlayer.prototype.nativeFullscreenSupported=function(){return document.fullscreenEnabled||document.webkitFullscreenEnabled},function(t){AblePlayer.prototype.seekTo=function(t){var e,i=this;(this.seekFromTime=this.media.currentTime,this.seekToTime=t,this.seeking=!0,this.liveUpdatePending=!0,this.speakingDescription&&this.synth.cancel(),this.syncSignVideo({time:this.startTime}),"html5"===this.player)?(this.startTime=t,(e=this.media.seekable).length>0&&this.startTime>=e.start(0)&&this.startTime<=e.end(0)&&(this.media.currentTime=this.startTime,this.seekStatus="complete",this.syncSignVideo({time:this.startTime}))):"youtube"===this.player?(this.youTubePlayer.seekTo(t,!0),t>0&&void 0!==this.$posterImg&&this.$posterImg.hide(),this.syncSignVideo({time:t})):"vimeo"===this.player&&this.vimeoPlayer.setCurrentTime(t).then(function(){i.elapsed=t,i.refreshControls("timeline")});this.refreshControls("timeline")},AblePlayer.prototype.getMediaTimes=function(t,e){var i,s,a,n;return n={},s=(i=new this.defer).promise(),a=this,void 0!==t&&void 0!==e?(n.duration=t,n.elapsed=e,i.resolve(n)):this.getDuration().then(function(t){n.duration=a.roundDown(t,6),a.getElapsed().then(function(t){n.elapsed=a.roundDown(t,6),i.resolve(n)})}),s},AblePlayer.prototype.getDuration=function(){var t,e,i;(e=(t=new this.defer).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getDuration().then(function(e){void 0===e||isNaN(e)||-1===e?t.resolve(0):t.resolve(e)}):t.resolve(0):("html5"===this.player?i=this.media.duration:"youtube"===this.player&&(i=this.youTubePlayerReady?this.duration>0?this.duration:this.youTubePlayer.getDuration():0),void 0===i||isNaN(i)||-1===i?t.resolve(0):t.resolve(i));return e},AblePlayer.prototype.getElapsed=function(){var t,e,i;(e=(t=new this.defer).promise(),"vimeo"===this.player)?this.vimeoPlayer?this.vimeoPlayer.getCurrentTime().then(function(e){void 0===e||isNaN(e)||-1===e?t.resolve(0):t.resolve(e)}):t.resolve(0):("html5"===this.player?i=this.media.currentTime:"youtube"===this.player&&(i=this.youTubePlayerReady?this.youTubePlayer.getCurrentTime():0),void 0===i||isNaN(i)||-1===i?t.resolve(0):t.resolve(i));return e},AblePlayer.prototype.getPlayerState=function(){var t,e,i;if(e=(t=new this.defer).promise(),i=this,"html5"===this.player)this.media.ended?t.resolve("ended"):this.media.paused?t.resolve("paused"):4!==this.media.readyState?t.resolve("buffering"):t.resolve("playing");else if("youtube"===this.player&&this.youTubePlayerReady){var s=this.youTubePlayer.getPlayerState();-1===s||5===s?t.resolve("stopped"):0===s?t.resolve("ended"):1===s?t.resolve("playing"):2===s?t.resolve("paused"):3===s&&t.resolve("buffering")}else"vimeo"===this.player&&this.vimeoPlayer&&this.vimeoPlayer.getPaused().then(function(e){e?t.resolve("paused"):i.vimeoPlayer.getEnded().then(function(e){e?t.resolve("ended"):t.resolve("playing")})});return e},AblePlayer.prototype.isPlaybackRateSupported=function(){return"html5"===this.player?!!this.media.playbackRate:"youtube"===this.player?!!this.youTubePlayerReady&&this.youTubePlayer.getAvailablePlaybackRates().length>1:"vimeo"===this.player?this.vimeoSupportsPlaybackRateChange:void 0},AblePlayer.prototype.setPlaybackRate=function(t){t=Math.max(.5,t),this.hasClosedDesc&&"text"===this.descMethod&&this.syncSpeechToPlaybackRate(t),this.syncSignVideo({rate:t}),"html5"===this.player?this.media.playbackRate=t:"youtube"===this.player?this.youTubePlayer.setPlaybackRate(t):"vimeo"===this.player&&this.vimeoPlayer.setPlaybackRate(t),this.syncSignVideo({rate:t}),this.playbackRate=t,this.$speed.text(this.translate("speed","Speed")+": "+t.toFixed(2).toString()+"x")},AblePlayer.prototype.getPlaybackRate=function(){return"html5"===this.player?this.media.playbackRate:"youtube"===this.player&&this.youTubePlayerReady?this.youTubePlayer.getPlaybackRate():void 0},AblePlayer.prototype.isPaused=function(){if("vimeo"===this.player)return!this.playing;this.getPlayerState().then(function(t){return"paused"===t||"stopped"===t||"ended"===t})},AblePlayer.prototype.syncSignVideo=function(t){this.hasSignLanguage&&(this.signVideo||this.signYoutube)&&(t&&void 0!==t.time&&(this.signVideo?this.signVideo.currentTime=t.time:this.youTubeSignPlayer.seekTo(t.time,!0)),t&&void 0!==t.rate&&(this.signVideo?this.signVideo.playbackRate=t.rate:this.youTubeSignPlayer.setPlaybackRate(t.rate)),t&&void 0!==t.pause&&(this.signVideo?this.signVideo.pause(!0):this.youTubeSignPlayer.pauseVideo()),t&&void 0!==t.play&&(this.signVideo?this.signVideo.play(!0):this.youTubeSignPlayer.playVideo()),t&&void 0!==t.volume&&this.signVideo&&(this.signVideo.volume=0))},AblePlayer.prototype.pauseMedia=function(){this.syncSignVideo({pause:!0}),"html5"===this.player?this.media.pause(!0):"youtube"===this.player?this.youTubePlayer.pauseVideo():"vimeo"===this.player&&this.vimeoPlayer.pause()},AblePlayer.prototype.playMedia=function(){this.syncSignVideo({play:!0}),"html5"===this.player?this.media.play(!0):"youtube"===this.player?(this.youTubePlayer.playVideo(),void 0!==this.$posterImg&&this.$posterImg.hide(),this.stoppingYouTube=!1):"vimeo"===this.player&&this.vimeoPlayer.play(),this.startedPlaying=!0,this.hideControls&&(this.hidingControls=!0,this.invokeHideControlsTimeout())},AblePlayer.prototype.fadeControls=function(t){"out"==t?this.$playerDiv.addClass("fade-out").removeClass("fade-in"):"in"==t&&this.$playerDiv.addClass("fade-in").removeClass("fade-out")},AblePlayer.prototype.invokeHideControlsTimeout=function(){var t=this;this.hideControlsTimeout=window.setTimeout(function(){void 0!==t.playing&&!0===t.playing&&t.hideControls&&(t.fadeControls("out"),t.controlsHidden=!0)},5e3),this.hideControlsTimeoutStatus="active"},AblePlayer.prototype.refreshControls=function(e="init",i,s){var a,n,r,o,l,h,p,c,u,d,g,f,m;if((e="init",a=this,!this.swappingSrc||!this.playing)&&void 0!==this.duration){if(this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.chapterElapsed=this.getChapterElapsed()),!this.useFixedSeekInterval&&!this.seekIntervalCalculated&&this.duration>0&&this.setSeekInterval(),this.seekBar&&(this.useChapterTimes?(h=this.selectedChapters.cues.length-1,this.selectedChapters.cues[h]==this.currentChapter&&this.currentChapter.end!==this.duration?this.seekBar.setDuration(this.duration-this.currentChapter.start):this.seekBar.setDuration(this.chapterDuration)):void 0===this.duration||isNaN(this.duration)||-1===this.duration||this.seekBar.setDuration(this.duration),this.seekBar.tracking||(c=this.liveUpdatePending||this.seekBar.seekHead.is(t(document.activeElement)),this.liveUpdatePending=!1,this.useChapterTimes?this.seekBar.setPosition(this.chapterElapsed,c):this.seekBar.setPosition(this.elapsed,c)),p=this.seekBar.tracking?this.seekBar.lastTrackPosition:this.useChapterTimes?this.chapterElapsed:this.elapsed),void 0!==this.$durationContainer&&(this.useChapterTimes?this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.chapterDuration)):this.$durationContainer.text(" / "+this.formatSecondsAsColonTime(this.duration))),void 0!==this.$elapsedTimeContainer&&this.$elapsedTimeContainer.text(this.formatSecondsAsColonTime(p)),"legacy"===this.skin&&this.seekBar){let e=this.seekBar.wrapperDiv.parent().parent();g=(d=this.seekBar.wrapperDiv.parent().prev("div.able-left-controls")).next("div.able-right-controls"),u=d.outerWidth(!0),g.children().each(function(){"button"==t(this).attr("role")&&(u+=t(this).outerWidth(!0)+5)}),f=this.fullscreen?t(window).width()-u:e.width()-u-10,Math.abs(f-this.seekBar.getWidth())>5&&this.seekBar.setWidth(f)}if("html5"===this.player&&this.media.buffered.length>0?(m=this.media.buffered.end(0),this.useChapterTimes?(m>this.chapterDuration&&(m=this.chapterDuration),this.seekBar&&this.seekBar.setBuffered(m/this.chapterDuration)):this.seekBar&&!isNaN(m)&&this.seekBar.setBuffered(m/i)):"youtube"===this.player&&this.seekBar&&this.youTubePlayerReady?this.seekBar.setBuffered(this.youTubePlayer.getVideoLoadedFraction()):this.player,this.$descButton&&this.toggleButtonState(this.$descButton,this.descOn,this.translate("turnOffDescriptions","Turn off descriptions"),this.translate("turnOnDescriptions","Turn on descriptions")),this.$ccButton){(o=this.captions.length)>1&&this.$ccButton.attr({"aria-haspopup":"true","aria-controls":this.mediaId+"-captions-menu"});var v=o>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),y=o>1?this.translate("captions","Captions"):this.translate("hideCaptions","Hide captions"),b=o>1;this.toggleButtonState(this.$ccButton,this.captionsOn,y,v,b)}this.$fullscreenButton&&(this.fullscreen?(this.$fullscreenButton.attr("aria-label",this.translate("exitFullScreen","Exit full screen")),this.getIcon(this.$fullscreenButton,"fullscreen-collapse")):(this.$fullscreenButton.attr("aria-label",this.translate("enterFullScreen","Enter full screen")),this.getIcon(this.$fullscreenButton,"fullscreen-expand"))),void 0!==this.$bigPlayButton&&void 0!==this.seekBar&&(this.paused&&!this.seekBar.tracking?this.hideBigPlayButton||(this.$bigPlayButton.show(),this.$bigPlayButton.attr("aria-hidden","false")):(this.$bigPlayButton.hide(),this.$bigPlayButton.attr("aria-hidden","true"))),this.transcriptType&&(1===this.prefAutoScrollTranscript?(this.autoScrollTranscript=!0,this.$autoScrollTranscriptCheckbox.prop("checked",!0)):(this.autoScrollTranscript=!1,this.$autoScrollTranscriptCheckbox.prop("checked",!1)),this.autoScrollTranscript&&this.currentHighlight&&(l=Math.floor(this.$transcriptDiv.scrollTop()+t(this.currentHighlight).position().top-this.$transcriptDiv.height()/2+t(this.currentHighlight).height()/2))!==Math.floor(this.$transcriptDiv.scrollTop())&&(this.scrollingTranscript=!0,this.movingHighlight&&(this.$transcriptDiv.scrollTop(l),this.movingHighlight=!1))),this.$chaptersButton&&this.$chaptersButton.attr({"aria-label":this.translate("chapters","Chapters"),"aria-haspopup":"true","aria-controls":this.mediaId+"-chapters-menu"}),n={stopped:this.translate("statusStopped","Stopped"),paused:this.translate("statusPaused","Paused"),playing:this.translate("statusPlaying","Playing"),buffering:this.translate("statusBuffering","Buffering"),ended:this.translate("statusEnd","End of track")},this.stoppingYouTube?(this.$status.text()!==this.translate("statusStopped","Stopped")&&this.$status.text(this.translate("statusStopped","Stopped")),this.getIcon(this.$playpauseButton,"play")):void 0!==this.$status&&void 0!==this.seekBar&&this.getPlayerState().then(function(t){a.$status.text()===n[t]||a.seekBar.tracking?(a.statusDebounceStart=null,a.debouncingStatus=!1,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.swappingSrc?a.debouncingStatus||(a.statusMessageThreshold=2e3):a.debouncingStatus||(a.statusMessageThreshold=250),r=(new Date).getTime(),a.statusDebounceStart?r-a.statusDebounceStart>a.statusMessageThreshold&&(a.$status.text(n[t]),a.statusDebounceStart=null,clearTimeout(a.statusTimeout),a.statusTimeout=null):(a.statusDebounceStart=r,a.debouncingStatus=!0,a.statusTimeout=setTimeout(function(){a.debouncingStatus=!1,a.refreshControls(e)},a.statusMessageThreshold))),a.seekBar.tracking||a.stoppingYouTube||("paused"===t||"stopped"===t||"ended"===t?(a.$playpauseButton.attr("aria-label",a.tt.play),a.getIcon(a.$playpauseButton,"play")):(a.$playpauseButton.attr("aria-label",a.tt.pause),a.getIcon(a.$playpauseButton,"pause")))}),this.fullscreen||(this.$statusBarDiv.width()<300?(this.$statusBarDiv.find("span.able-speed").hide(),this.hidingSpeed=!0):this.hidingSpeed&&(this.$statusBarDiv.find("span.able-speed").show(),this.hidingSpeed=!1))}},AblePlayer.prototype.handlePlay=function(t){this.paused?(this.okToPlay=!0,this.playMedia(),this.synth.paused&&this.synth.resume()):(this.okToPlay=!1,this.pauseMedia(),this.speakingDescription&&this.synth.pause()),null===this.speechEnabled&&this.initSpeech("play")},AblePlayer.prototype.handleRestart=function(){this.speakingDescription&&this.synth.cancel(),this.seekTo(0)},AblePlayer.prototype.handlePrevTrack=function(){this.playlistIndex=0===this.playlistIndex?this.$playlist.length-1:this.playlistIndex--,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleNextTrack=function(){this.playlistIndex=this.playlistIndex===this.$playlist.length-1?0:this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex)},AblePlayer.prototype.handleRewind=function(){var t;t=this.elapsed-this.seekInterval,this.useChapterTimes&&t<this.currentChapter.start?t=this.currentChapter.start:t<0&&(t=0),this.seekTo(t)},AblePlayer.prototype.handleFastForward=function(){var t,e;e=this.chapters.length-1,t=this.elapsed+this.seekInterval,this.useChapterTimes?this.chapters[e]==this.currentChapter?(t>this.duration||t>this.currentChapter.end||this.duration%t<this.seekInterval)&&(t=Math.min(this.duration,this.currentChapter.end)):t>this.currentChapter.end&&(t=this.currentChapter.end):t>this.duration&&(t=this.duration),this.seekTo(t)},AblePlayer.prototype.handleRateIncrease=function(){this.changeRate(1)},AblePlayer.prototype.handleRateDecrease=function(){this.changeRate(-1)},AblePlayer.prototype.changeRate=function(t){var e,i,s,a;"html5"===this.player?this.setPlaybackRate(this.getPlaybackRate()+.25t):"youtube"===this.player?this.youTubePlayerReady&&(e=this.youTubePlayer.getAvailablePlaybackRates(),i=this.getPlaybackRate(),-1===(s=e.indexOf(i))||(s+=t)<e.length&&s>=0&&this.setPlaybackRate(e[s])):"vimeo"===this.player&&(1===t?a=this.vimeoPlaybackRate+.5<=2?this.vimeoPlaybackRate+.5:2:-1===t&&(a=this.vimeoPlaybackRate-.5>=.5?this.vimeoPlaybackRate-.5:.5),this.setPlaybackRate(a))},AblePlayer.prototype.handleCaptionToggle=function(){var t,e,i=this;if(this.hidingPopup)return this.hidingPopup=!1,!1;if(1===(t=this.captions.length?this.captions:[]).length)if(!0===this.captionsOn)this.captionsOn=!1,this.prefCaptions=0,e=!1,this.updatePreferences("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.unloadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.disableTextTrack():this.$captionsWrapper.hide();else{this.captionsOn=!0,this.prefCaptions=1,e=!0,this.updatePreferences("prefCaptions"),this.usingYouTubeCaptions?this.youTubePlayer.loadModule("captions"):this.usingVimeoCaptions?this.vimeoPlayer.enableTextTrack(this.captionLang).then(function(t){}).catch(function(t){t.name}):this.$captionsWrapper.show();for(var s=0;s<t.length;s++)!0===t[s].def&&(this.selectedCaptions=t[s]);this.selectedCaptions=this.captions[0],this.descriptions.length>=0&&(this.selectedDescriptions=this.descriptions[0])}else this.captionsPopup&&this.captionsPopup.is(":visible")?(this.captionsPopup.hide(),this.hidingPopup=!1,this.$ccButton.attr("aria-expanded","false"),this.waitThenFocus(this.$ccButton)):(this.closePopups(),this.captionsPopup&&(this.captionsPopup.show(),this.$ccButton.attr("aria-expanded","true"),setTimeout(function(){i.captionsPopup.css("top",i.$ccButton.position().top-i.captionsPopup.outerHeight()),i.captionsPopup.css("left",i.$ccButton.position().left),i.captionsPopup.find("li").removeClass("able-focus"),i.captionsPopup.find("li").first().trigger("focus").addClass("able-focus")},50)));var a=t.length>1?this.translate("captions","Captions"):this.translate("showCaptions","Show captions"),n=t.length>1?this.translate("captions","Captions"):this.translate("hideCaptions","Hide captions");this.toggleButtonState(this.$ccButton,this.captionsOn,n,a,e)},AblePlayer.prototype.waitThenFocus=function(t,e){setTimeout(function(){t.trigger("focus")},null==e?50:e)},AblePlayer.prototype.handleChapters=function(){if(this.hidingPopup)return this.hidingPopup=!1,!1;this.chaptersPopup.is(":visible")?(this.chaptersPopup.hide(),this.hidingPopup=!1,this.$chaptersButton.attr("aria-expanded","false").trigger("focus")):(this.closePopups(),this.chaptersPopup.show(),this.$chaptersButton.attr("aria-expanded","true"),this.chaptersPopup.css("top",this.$chaptersButton.position().top-this.chaptersPopup.outerHeight()),this.chaptersPopup.css("left",this.$chaptersButton.position().left),this.chaptersPopup.find("li").removeClass("able-focus"),this.chaptersPopup.find('li[aria-checked="true"]').length?this.chaptersPopup.find('li[aria-checked="true"]').trigger("focus").addClass("able-focus"):this.chaptersPopup.find("li").first().addClass("able-focus").attr("aria-checked","true").trigger("focus"))},AblePlayer.prototype.handleDescriptionToggle=function(){this.descOn=!this.descOn,this.prefDesc=+this.descOn,this.updatePreferences("prefDesc"),void 0!==this.$descDiv&&(this.$descDiv.is(":hidden")||this.$descDiv.hide()),this.initDescription(),this.refreshControls("descriptions")},AblePlayer.prototype.handlePrefsClick=function(t){var e,i,s,a;if(e=this,null===this.speechEnabled&&this.initSpeech("prefs"),this.hidingPopup)return this.hidingPopup=!1,!1;this.prefsPopup.is(":visible")?(this.prefsPopup.hide(),this.$prefsButton.attr("aria-expanded","false"),this.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","-1"),this.showingPrefsDialog||this.$prefsButton.trigger("focus"),setTimeout(function(){e.hidingPopup=!1},100)):(this.closePopups(),this.prefsPopup.show(),this.$prefsButton.attr("aria-expanded","true"),this.$prefsButton.trigger("focus"),setTimeout(function(){i=e.$prefsButton.position(),s=e.$ableDiv.width()-5,a=s-e.prefsPopup.width(),e.prefsPopup.css("top",i.top-e.prefsPopup.outerHeight()),e.prefsPopup.css("left",a),e.prefsPopup.find("li").removeClass("able-focus").attr("tabindex","0"),e.prefsPopup.find("li").first().trigger("focus").addClass("able-focus")},50))},AblePlayer.prototype.handleTranscriptToggle=function(){var t=this,e=this.$transcriptDiv.is(":visible");e?(this.$transcriptArea.hide(),this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.prefTranscript=0,"popup"===this.transcriptType&&(this.$transcriptButton.trigger("focus").addClass("able-focus"),setTimeout(function(){t.closingTranscript=!1},100))):"popup"===this.transcriptType?(this.positionDraggableWindow("transcript"),this.$transcriptArea.show(),this.$transcriptPopup.hide(),this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.prefTranscript=1,this.focusNotClick=!0,this.$transcriptArea.find("button").first().trigger("focus"),setTimeout(function(){t.focusNotClick=!1},100)):(this.toggleButtonState(this.$transcriptButton,!e,this.translate("hideTranscript","Hide transcript"),this.translate("showTranscript","Show transcript")),this.$transcriptArea.show()),this.updatePreferences("prefTranscript")},AblePlayer.prototype.handleSignToggle=function(){var t=this,e=this.$signWindow.is(":visible");e?(this.$signWindow.hide(),this.toggleButtonState(this.$signButton,!e,this.translate("hideSign","Hide sign language"),this.translate("showSign","Show sign language")),this.prefSign=0,this.$signButton.trigger("focus").addClass("able-focus"),setTimeout(function(){t.closingSign=!1},100)):(this.positionDraggableWindow("sign"),this.$signWindow.show(),this.$signPopup.hide(),this.toggleButtonState(this.$signButton,!e,this.translate("hideSign","Hide sign language"),this.translate("showSign","Show sign language")),this.prefSign=1,this.focusNotClick=!0,this.$signWindow.find("button").first().trigger("focus"),setTimeout(function(){t.focusNotClick=!1},100)),this.updatePreferences("prefSign")},AblePlayer.prototype.setFullscreen=function(e){if(this.fullscreen!=e){var i=this,s=this.$ableWrapper[0];if(this.nativeFullscreenSupported())if(e){var a={x:window.pageXOffset||0,y:window.pageYOffset||0};1===this.prefTranscript&&this.rePositionDraggableWindow("transcript"),1===this.prefSign&&this.rePositionDraggableWindow("sign"),this.scrollPosition=a,s.requestFullscreen?s.requestFullscreen():s.webkitRequestFullscreen&&s.webkitRequestFullscreen(),this.fullscreen=!0}else this.restoringAfterFullscreen=!0,document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullscreen&&document.webkitCancelFullscreen(),1===this.prefTranscript&&this.positionDraggableWindow("transcript"),1===this.prefSign&&this.positionDraggableWindow("sign"),this.fullscreen=!1;t(document).on("fullscreenchange webkitfullscreenchange",function(t){i.fullscreen?i.clickedFullscreenButton||(i.fullscreen=!1,i.restoringAfterFullscreen=!0):i.restoringAfterFullscreen=!0,i.resizePlayer(),i.refreshControls("fullscreen"),i.scrollPosition&&(a=i.scrollPosition,window.scrollTo(a.x,a.y)),setTimeout(function(){i.clickedFullscreenButton=!1,i.restoringAfterFullscreen=!1},100)})}},AblePlayer.prototype.handleFullscreenToggle=function(){var t=this.paused;this.setFullscreen(!this.fullscreen),t?this.pauseMedia():t||this.playMedia(),this.fullscreen?(this.hideControls=!0,this.playing&&(this.fadeControls("out"),this.controlsHidden=!0)):(this.hideControls=this.hideControlsOriginal,this.hideControls||(this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear")))},AblePlayer.prototype.handleTranscriptLockToggle=function(t){this.autoScrollTranscript=t,this.prefAutoScrollTranscript=+t,this.updatePreferences("prefAutoScrollTranscript"),this.refreshControls("transcript")},AblePlayer.prototype.getIcon=function(e,i,s=!1){var a=this.iconType,n=this.getIconData(i);if(a=null===n[3]?"svg":a,a=!0===s?"img":a,!(e.find(a+"#ableplayer-"+i).length>0))if(e.find("svg, img, span").remove(),"font"===a){var r=t("<span>",{class:n[2]});e.append(r)}else if("svg"===a){function getNode(t,e){for(var i in t=document.createElementNS("http://www.w3.org/2000/svg",t),e)t.setAttributeNS(null,i.replace(/[A-Z]/g,function(t){return"-"+t.toLowerCase()}),e[i]);return t}var o=document.createElementNS("http://www.w3.org/2000/svg","svg");o.setAttribute("focusable","false"),o.setAttribute("aria-hidden","true"),o.setAttribute("viewBox",n[0]),o.setAttribute("id","ableplayer-"+i);let h=getNode("path",{d:n[1]});o.appendChild(h),e.append(o),e.html(e.html())}else{var l=t("<img>",{src:n[3],alt:"",role:"presentation"});e.append(l),e.find("img").attr("src",n[3])}},AblePlayer.prototype.setText=function(t,e){t.attr("aria-label",e)},AblePlayer.prototype.toggleButtonState=function(t,e,i,s,a=!1,n=!1){let r=!!t.hasClass("buttonOff");r&&!e||!r&&e||(e?(t.removeClass("buttonOff").attr("aria-label",i),a&&t.attr("aria-pressed","true"),n&&t.attr("aria-expanded","true")):(t.addClass("buttonOff").attr("aria-label",s),a&&t.attr("aria-pressed","false"),n&&t.attr("aria-expanded","false")))},AblePlayer.prototype.showTooltip=function(t){t.show()},AblePlayer.prototype.showAlert=function(t,e="main"){var i,s,a;s=(i=this).$alertBox,a=i.$ableDiv,"transcript"===e?a=i.$transcriptArea:"sign"===e?a=i.$signWindow:"screenreader"===e&&(s=i.$srAlertBox),s.find("span").text(t),s.appendTo(a),s.css({display:"flex"}),"screenreader"!==e&&setTimeout(function(){s.hide()},3e4)},AblePlayer.prototype.showedAlert=function(t){return"transcript"===t?this.showedTranscriptAlert??!1:"sign"===t&&(this.showedSignAlert??!1)},AblePlayer.prototype.resizePlayer=function(e,i){var s,a,n,r;if("audio"!==this.mediaType){if(void 0!==e&&void 0!==i?(this.aspectRatio=i/e,this.playerWidth?(a=this.playerWidth,this.playerHeight?n=this.playerHeight:(n=Math.round(athis.aspectRatio),this.playerHeight=n)):(a="html5"===this.player?t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio))):this.fullscreen?(this.$ableWrapper.addClass("fullscreen"),a=t(window).width(),n=t(window).height()-this.$playerDiv.outerHeight()-5,this.positionCaptions("overlay")):(this.$ableWrapper.removeClass("fullscreen"),a="html5"===this.player?this.playerWidth?this.playerWidth:t(window).width():this.$ableWrapper.width(),n=Math.round(athis.aspectRatio),this.positionCaptions(this.prefCaptionsPosition)),this.debug,"youtube"===this.player||"vimeo"===this.player?(r=this.$ableWrapper.find("iframe"),"youtube"===this.player&&this.youTubePlayer?this.youTubePlayer.setSize(a,n):r.attr({width:a,height:n}),this.playerWidth&&this.playerHeight&&(this.fullscreen?r.css({"max-width":"","max-height":""}):r.css({"max-width":this.playerWidth+"px","max-height":this.playerHeight+"px"}))):"html5"===this.player&&(this.fullscreen?(this.$media.attr({width:a,height:n}),this.$ableWrapper.css({width:a,height:n})):(this.$media.removeAttr("width height"),this.$ableWrapper.removeAttr("style"))),void 0!==this.$captionsDiv){var o=!1;window.screen.width<1200&&(o=!0),s=parseInt(this.prefCaptionsSize,10),this.fullscreen&&!o?s=s/100+"vw":this.fullscreen&&o?s="1.2rem":s+="%",this.$captionsDiv.css({"font-size":s})}this.refreshControls()}},AblePlayer.prototype.retrieveOffscreenWindow=function(t,e,i){var s,a,n,r,o,l,h,p;"transcript"==t?s=this.$transcriptArea:"sign"==t&&(s=this.$signWindow),l=s.width(),p=s.height(),n=(a=s.position()).top,o=(r=a.left)+l,h=n+p,n<0&&(n=10,s.css("top",n)),r<0&&(r=10,s.css("left",r)),o>e&&(r=e-20-l,s.css("left",r)),h>i&&(n=i-10-p,s.css("top",n))},AblePlayer.prototype.updateZIndex=function(t){var e,i,s,a,n,r;if(e=8e3,i=7e3,void 0===this.$transcriptArea||void 0===this.$signWindow)return void 0!==this.$transcriptArea?(s=parseInt(this.$transcriptArea.css("z-index")))>i&&this.$transcriptArea.css("z-index",i):void 0!==this.$signWindow&&(a=parseInt(this.$signWindow.css("z-index")))>e&&this.$signWindow.css("z-index",e),!1;if((s=parseInt(this.$transcriptArea.css("z-index")))===(a=parseInt(this.$signWindow.css("z-index"))))n=e,r=i;else if(s>a){if("transcript"===t)return!1;n=s,r=a}else{if("sign"===t)return!1;n=a,r=s}"transcript"===t?(this.$transcriptArea.css("z-index",n),this.$signWindow.css("z-index",r)):"sign"===t&&(this.$signWindow.css("z-index",n),this.$transcriptArea.css("z-index",r))},AblePlayer.prototype.syncTrackLanguages=function(t,e){var i,s,a,n,r;for(i=0;i<this.captions.length;i++)this.captions[i].language===e&&(s=this.captions[i]);for(i=0;i<this.chapters.length;i++)this.chapters[i].language===e&&(n=this.chapters[i]);for(i=0;i<this.descriptions.length;i++)this.descriptions[i].language===e&&(a=this.descriptions[i]);for(i=0;i<this.meta.length;i++)this.meta[i].language===e&&(r=this.meta[i]);if(this.transcriptLang=e,"init"===t||"captions"===t?(this.captionLang=e,this.selectedCaptions=s,this.selectedChapters=n,this.selectedDescriptions=a,this.selectedMeta=r,this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a,this.updateChaptersList()):"transcript"===t&&(this.transcriptCaptions=s,this.transcriptChapters=n,this.transcriptDescriptions=a),this.selectedDescriptions&&(this.setDescriptionVoice(),this.$sampleDescDiv&&this.sampleText))for(i=0;i<this.sampleText.length;i++)this.sampleText[i].lang===this.selectedDescriptions.language&&(this.currentSampleText=this.sampleText[i].text,this.$sampleDescDiv.html(this.currentSampleText));this.updateTranscript()}}(jQuery),function(t){AblePlayer.prototype.updateCaption=function(t){this.usingYouTubeCaptions||this.usingVimeoCaptions||void 0===this.$captionsWrapper||(this.captionsOn?(this.$captionsWrapper.show(),void 0!==t&&this.showCaptions(t)):this.$captionsWrapper&&(this.$captionsWrapper.hide(),this.prefCaptions=0))},AblePlayer.prototype.updateCaptionsMenu=function(t){this.captionsPopup.find("li").attr("aria-checked","false"),void 0===t?this.captionsPopup.find("li").last().attr("aria-checked","true"):this.captionsPopup.find("li[lang="+t+"]").attr("aria-checked","true")},AblePlayer.prototype.getCaptionClickFunction=function(t){var e=this;return function(){e.selectedCaptions=t,e.captionLang=t.language,e.currentCaption=-1,e.usingYouTubeCaptions?e.captionsOn?e.youTubePlayer.getOptions("captions")&&e.startedPlaying?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):e.captionLangPending=e.captionLang:e.youTubePlayer.getOptions("captions")?e.youTubePlayer.setOption("captions","track",{languageCode:e.captionLang}):(e.youTubePlayer.loadModule("captions"),e.captionLangPending=e.captionLang):e.usingVimeoCaptions?e.vimeoPlayer.enableTextTrack(e.captionLang).then(function(t){}).catch(function(t){t.name}):(e.syncTrackLanguages("captions",e.captionLang),e.swappingSrc||(e.updateCaption(e.elapsed),e.showDescription(e.elapsed))),e.captionsOn=!0,e.hidingPopup=!0,e.captionsPopup.hide(),e.$ccButton.attr("aria-expanded","false"),"audio"===e.mediaType&&e.$captionsContainer.removeClass("captions-off"),setTimeout(function(){e.hidingPopup=!1},100),e.updateCaptionsMenu(e.captionLang),e.waitThenFocus(e.$ccButton),e.prefCaptions=1,e.updatePreferences("prefCaptions"),e.refreshControls("captions")}},AblePlayer.prototype.getCaptionOffFunction=function(){var t=this;return function(){"youtube"==t.player?t.youTubePlayer.unloadModule("captions"):t.usingVimeoCaptions&&t.vimeoPlayer.disableTextTrack(),t.captionsOn=!1,t.currentCaption=-1,"audio"===t.mediaType&&t.$captionsContainer.addClass("captions-off"),t.hidingPopup=!0,t.captionsPopup.hide(),t.$ccButton.attr("aria-expanded","false"),setTimeout(function(){t.hidingPopup=!1},100),t.updateCaptionsMenu(),t.waitThenFocus(t.$ccButton),t.prefCaptions=0,t.updatePreferences("prefCaptions"),this.swappingSrc||(t.refreshControls("captions"),t.updateCaption())}},AblePlayer.prototype.showCaptions=function(t){var e,i,s,a;for(a=this.selectedCaptions.cues.length?this.selectedCaptions.cues:this.captions.length>=1?this.captions[0].cues:[],e=0;e<a.length;e++)if(a[e].start<=t&&a[e].end>t){i=e;break}void 0!==i?this.currentCaption!==i&&(s=this.flattenCueForCaption(a[i]).replace(/\n/g,"<br>"),this.$captionsDiv.html(s),this.currentCaption=i,0===s.length?this.$captionsDiv.css("display","none"):this.$captionsDiv.css("display","inline-block")):(this.$captionsDiv.html("").css("display","none"),this.currentCaption=-1)},AblePlayer.prototype.flattenCueForCaption=function(t){var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("("+t.value+")"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else if("i"===t.type){for(i.push("<em>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</em>")}else if("b"===t.type){for(i.push("<strong>"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));i.push("</strong>")}else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")};if(void 0!==t.components)for(var i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")},AblePlayer.prototype.getCaptionsOptions=function(t){var e=[];switch(t){case"prefCaptionsFont":e[0]=["serif",this.translate("serif","serif")],e[1]=["sans-serif",this.translate("sans","sans-serif")],e[2]=["cursive",this.translate("cursive","cursive")],e[3]=["fantasy",this.translate("fantasy","fantasy")],e[4]=["monospace",this.translate("monospace","monospace")];break;case"prefCaptionsColor":case"prefCaptionsBGColor":e[0]=["white",this.translate("white","white")],e[1]=["yellow",this.translate("yellow","yellow")],e[2]=["green",this.translate("green","green")],e[3]=["cyan",this.translate("cyan","cyan")],e[4]=["blue",this.translate("blue","blue")],e[5]=["magenta",this.translate("magenta","magenta")],e[6]=["red",this.translate("red","red")],e[7]=["black",this.translate("black","black")];break;case"prefCaptionsSize":e[0]="75%",e[1]="100%",e[2]="125%",e[3]="150%",e[4]="200%";break;case"prefCaptionsOpacity":e[0]="0%",e[1]="25%",e[2]="50%",e[3]="75%",e[4]="100%";break;case"prefCaptionsStyle":e[0]=this.translate("captionsStylePopOn","Pop-on"),e[1]=this.translate("captionsStyleRollUp","Roll-up");break;case"prefCaptionsPosition":e[0]="overlay",e[1]="below"}return e},AblePlayer.prototype.translatePrefs=function(t,e,i){if("youtube"==i&&"size"===t)switch(e){case"75%":return-1;case"100%":return 0;case"125%":return 1;case"150%":return 2;case"200%":return 3}return!1},AblePlayer.prototype.stylizeCaptions=function(e,i){var s,a,n;void 0!==e&&("prefCaptionsPosition"==i?this.positionCaptions():void 0!==i?("prefCaptionsFont"===i?s="font-family":"prefCaptionsSize"===i?s="font-size":"prefCaptionsColor"===i?s="color":"prefCaptionsBGColor"===i?s="background-color":"prefCaptionsOpacity"===i&&(s="opacity"),a="prefCaptionsOpacity"===i?parseFloat(t("#"+this.mediaId+"_"+i).val())/100:t("#"+this.mediaId+"_"+i).val(),e.css(s,a)):(n=parseFloat(this.prefCaptionsOpacity)/100,e.css({"font-family":this.prefCaptionsFont,color:this.prefCaptionsColor,"background-color":this.prefCaptionsBGColor,opacity:n}),e===this.$captionsDiv&&void 0!==this.$captionsDiv&&this.$captionsDiv.css({"font-size":this.prefCaptionsSize}),"below"===this.prefCaptionsPosition?void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"}):"overlay"===this.prefCaptionsPosition&&void 0!==this.$captionsWrapper&&this.$captionsWrapper.css({"background-color":"transparent",opacity:""}),this.positionCaptions()))},AblePlayer.prototype.positionCaptions=function(t){void 0===t&&(t=this.prefCaptionsPosition),void 0!==this.$captionsWrapper&&("below"==t?(this.$captionsWrapper.removeClass("able-captions-overlay").addClass("able-captions-below"),this.$captionsWrapper.css({"background-color":this.prefCaptionsBGColor,opacity:"1"})):(this.$captionsWrapper.removeClass("able-captions-below").addClass("able-captions-overlay"),this.$captionsWrapper.css({"background-color":"transparent",opacity:""})))}}(jQuery),function(t){AblePlayer.prototype.populateChaptersDiv=function(){var e,i,s;this.chaptersDivLocation&&t("#"+this.chaptersDivLocation)&&(this.$chaptersDiv=t("#"+this.chaptersDivLocation),this.$chaptersDiv.addClass("able-chapters-div"),this.$chaptersDiv.empty(),this.chaptersTitle&&(e="h"+this.getNextHeadingLevel(this.$chaptersDiv).toString(),i=this.mediaId+"-chapters-heading",s=t("<"+e+">",{class:"able-chapters-heading",id:i}).text(this.chaptersTitle),this.$chaptersDiv.append(s)),this.$chaptersNav=t("<nav>"),this.chaptersTitle?this.$chaptersNav.attr("aria-labelledby",i):this.$chaptersNav.attr("aria-label",this.translate("chapters","Chapters")),this.$chaptersDiv.append(this.$chaptersNav),this.updateChaptersList())},AblePlayer.prototype.updateChaptersList=function(){var e,i,s,a,n,r,o,l,h,p;if(e=this,!this.$chaptersNav)return!1;if(void 0===this.useChapterTimes&&(this.useChapterTimes=!("chapter"!==this.seekbarScope||!this.selectedChapters.cues.length)),(i=this.useChapterTimes?this.selectedChapters.cues:this.chapters.length>=1?this.chapters[0].cues:[]).length>0){for(p=t("<ul>"),s=0;s<i.length;s++)a=s,n=t("<li></li>"),l=function(i){return function(){e.seekTrigger="chapter",h=t(this).closest("li"),(p=t(this).closest("ul").find("li")).removeClass("able-current-chapter").children("button").removeAttr("aria-current"),h.addClass("able-current-chapter").children("button").attr("aria-current","true"),e.updateChapter(i),e.seekTo(i)}},(r=t("<button>",{type:"button",val:a}).text(this.flattenCueForCaption(i[a]))).on("click",l(i[a].start)),r.on("focus",function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).closest("li").addClass("able-focus")}),n.on("hover",function(){t(this).closest("ul").find("li").removeClass("able-focus"),t(this).addClass("able-focus")}),n.on("mouseleave",function(){t(this).removeClass("able-focus")}),r.on("blur",function(){t(this).closest("li").removeClass("able-focus")}),n.append(r),p.append(n),this.defaultChapter===i[a].id&&(r.attr("aria-current","true").parent("li").addClass("able-current-chapter"),this.currentChapter=i[a],o=!0);o||(this.currentChapter=i[0],p.find("button").first().attr("aria-current","true").parent("li").addClass("able-current-chapter")),this.$chaptersNav.html(p)}return!1},AblePlayer.prototype.seekToChapter=function(t){for(var e=0;e<this.selectedChapters.cues.length;){if(this.selectedChapters.cues[e].id==t){this.seekTo(this.selectedChapters.cues[e].start),this.updateChapter(this.selectedChapters.cues[e].start);break}e++}},AblePlayer.prototype.updateChapter=function(t){if(void 0!==this.selectedChapters){var e,i,s;for(e=this.selectedChapters.cues,i=0;i<e.length;i++)if(e[i].start<=t&&e[i].end>t){s=i;break}void 0!==s&&this.currentChapter!==e[s]&&(this.currentChapter=e[s],this.useChapterTimes&&(this.chapterDuration=this.getChapterDuration(),this.seekIntervalCalculated=!1),void 0!==this.$chaptersDiv&&(this.$chaptersDiv.find("ul").find("li").removeClass("able-current-chapter").children("button").removeAttr("aria-current"),this.$chaptersDiv.find("ul").find("li").eq(s).addClass("able-current-chapter").children("button").attr("aria-current","true")))}},AblePlayer.prototype.getChapterDuration=function(){var t,e;return void 0===this.currentChapter||void 0===this.duration?0:(t=this.selectedChapters.cues.length-1,this.selectedChapters.cues[t]==this.currentChapter&&this.currentChapter.end!==this.duration?(e=this.duration,this.currentChapter.end=this.duration):e=this.currentChapter.end,e-this.currentChapter.start)},AblePlayer.prototype.getChapterElapsed=function(){return void 0===this.currentChapter?0:this.elapsed>this.currentChapter.start?this.elapsed-this.currentChapter.start:0},AblePlayer.prototype.convertChapterTimeToVideoTime=function(t){if(void 0!==this.currentChapter){var e=this.currentChapter.start+t;return e>this.currentChapter.end?this.currentChapter.end:e}return t},AblePlayer.prototype.getChapterClickFunction=function(t){var e=this;return function(){e.seekTrigger="chapter",e.seekTo(t),e.hidingPopup=!0,e.chaptersPopup.hide(),setTimeout(function(){e.hidingPopup=!1},100),e.$chaptersButton.trigger("focus")}}}(jQuery),function(t){AblePlayer.prototype.updateMeta=function(t){this.hasMeta&&("text"===this.metaType?(this.$metaDiv.show(),this.showMeta(t||this.elapsed)):this.showMeta(t||this.elapsed))},AblePlayer.prototype.showMeta=function(e){var i,s,a,n,r,o,l,h,p;for(i=[],n=this.meta.length>=1?this.meta:[],s=0;s<n.length;s++)if(n[s].start<=e&&n[s].end>e){a=s;break}if(void 0!==a){if(this.currentMeta!==a)if("text"===this.metaType)this.$metaDiv.html(this.flattenCueForMeta(n[a]).replace(/\n/g,"<br>"));else if("selector"===this.metaType){for(r=this.flattenCueForMeta(n[a]).split("\n"),o=0;o<r.length;o++)if("pause"===(l=r[o].trim()).toLowerCase().trim())this.hideBigPlayButton=!0,this.pauseMedia();else if("focus:"==l.toLowerCase().substring(0,6))p=l.substring(6).trim(),t(p).length&&t(p).trigger("focus");else if(t(l).length){if(this.currentMeta=a,void 0===(h=parseInt(t(l).attr("data-duration")))||isNaN(h))t(l).show();else{t(l).show();(t=>new Promise(e=>setTimeout(e,t)))(h).then(()=>{t(l).hide()})}this.visibleSelectors.push(l),i.push(l)}if(this.visibleSelectors&&this.visibleSelectors.length&&this.visibleSelectors.length!==i.length)for(o=this.visibleSelectors.length-1;o>=0;o--)-1==t.inArray(this.visibleSelectors[o],i)&&(t(this.visibleSelectors[o]).hide(),this.visibleSelectors.splice(o,1))}}else{if(void 0!==this.$metaDiv&&this.$metaDiv.html(""),this.visibleSelectors&&this.visibleSelectors.length){for(o=0;o<this.visibleSelectors.length;o++)t(this.visibleSelectors[o]).hide();this.visibleSelectors=[]}this.currentMeta=-1}},AblePlayer.prototype.flattenCueForMeta=function(t){for(var e=[],flattenComponent=function(t){var e,i=[];if("string"===t.type)i.push(t.value);else if("v"===t.type)for(i.push("["+t.value+"]"),e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));else for(e=0;e<t.children.length;e++)i.push(flattenComponent(t.children[e]));return i.join("")},i=0;i<t.components.children.length;i++)e.push(flattenComponent(t.components.children[i]));return e.join("")}}(jQuery),function(t){AblePlayer.prototype.setupTranscript=function(){var t=new this.defer,e=t.promise();return this.usingYouTubeCaptions||this.usingVimeoCaptions||this.hideTranscriptButton?(this.transcriptType=null,t.resolve()):(this.transcriptType||this.captions.length&&(this.transcriptType="popup"),this.transcriptType?"popup"===this.transcriptType||"external"===this.transcriptType?(this.injectTranscriptArea(),t.resolve()):"manual"===this.transcriptType&&(this.setupManualTranscript(),t.resolve()):t.resolve()),e},AblePlayer.prototype.injectTranscriptArea=function(){var e,i,s,a,n;if(this.$transcriptArea=t("<div>",{class:"able-transcript-area",role:"dialog","aria-label":this.translate("transcriptTitle","Transcript")}),this.$transcriptToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$transcriptDiv=t("<div>",{class:"able-transcript"}),this.$autoScrollTranscriptCheckbox=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),e=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.translate("autoScroll","Auto scroll")),$autoScrollContainer=t("<div>",{class:"autoscroll-transcript"}),$autoScrollContainer.append(e,this.$autoScrollTranscriptCheckbox),this.$transcriptToolbar.append($autoScrollContainer),this.captions.length>1)for(i=t("<div>",{class:"transcript-language-select-wrapper"}),s=t("<label>",{for:"transcript-language-select-"+this.mediaId}).text(this.translate("language","Language")),this.$transcriptLanguageSelect=t("<select>",{id:"transcript-language-select-"+this.mediaId}),a=0;a<this.captions.length;a++)n=t("<option></option>",{value:this.captions[a].language,lang:this.captions[a].language}).text(this.captions[a].label),this.captions[a].def&&n.prop("selected",!0),this.$transcriptLanguageSelect.append(n);i&&(i.append(s,this.$transcriptLanguageSelect),this.$transcriptToolbar.append(i)),this.$transcriptArea.append(this.$transcriptToolbar,this.$transcriptDiv),this.transcriptDivLocation?(this.$transcriptArea.removeAttr("role"),this.$transcriptArea.removeAttr("aria-label"),t("#"+this.transcriptDivLocation).append(this.$transcriptArea)):this.$ableWrapper.append(this.$transcriptArea),this.transcriptDivLocation||(this.initDragDrop("transcript"),1===this.prefTranscript&&this.positionDraggableWindow("transcript",this.getDefaultWidth("transcript"))),this.prefTranscript||this.transcriptDivLocation||this.$transcriptArea.hide()},AblePlayer.prototype.addTranscriptAreaEvents=function(){var t=this;this.$autoScrollTranscriptCheckbox.on("click",function(){t.handleTranscriptLockToggle(t.$autoScrollTranscriptCheckbox.prop("checked"))}),this.$transcriptDiv.on("mousewheel DOMMouseScroll click scroll",function(e){t.scrollingTranscript||(t.autoScrollTranscript=!1,t.refreshControls("transcript")),t.scrollingTranscript=!1}),void 0!==this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.on("click",function(t){t.stopPropagation()}),this.$transcriptLanguageSelect.on("change",function(){var e=t.$transcriptLanguageSelect.val();t.syncTrackLanguages("transcript",e)}))},AblePlayer.prototype.transcriptSrcHasRequiredParts=function(){return!!(t("#"+this.transcriptSrc).length&&(this.$transcriptArea=t("#"+this.transcriptSrc),this.$transcriptArea.find(".able-window-toolbar").length&&(this.$transcriptToolbar=this.$transcriptArea.find(".able-window-toolbar").eq(0),this.$transcriptArea.find(".able-transcript").length&&(this.$transcriptDiv=this.$transcriptArea.find(".able-transcript").eq(0),this.$transcriptArea.find(".able-transcript-seekpoint").length))))&&(this.$transcriptSeekpoints=this.$transcriptArea.find(".able-transcript-seekpoint"),!0)},AblePlayer.prototype.setupManualTranscript=function(){var e,i;e=t("<input>",{id:"autoscroll-transcript-checkbox-"+this.mediaId,type:"checkbox"}),i=t("<label>",{for:"autoscroll-transcript-checkbox-"+this.mediaId}).text(this.translate("autoScroll","Auto scroll")),this.$autoScrollTranscriptCheckbox=e,this.$transcriptToolbar.append(i,this.$autoScrollTranscriptCheckbox)},AblePlayer.prototype.updateTranscript=function(){if(this.transcriptType&&(!this.playerCreated||this.$transcriptArea)){if("external"===this.transcriptType||"popup"===this.transcriptType){var e,i,s;if(this.transcriptLang?i=this.transcriptCaptions.cues:this.transcriptCaptions?(this.transcriptLang=this.transcriptCaptions.language,i=this.transcriptCaptions.cues):this.selectedCaptions&&(this.transcriptLang=this.captionLang,i=this.selectedCaptions.cues),this.transcriptChapters)e=this.transcriptChapters.cues;else if(this.chapters.length>0){if(this.transcriptLang)for(var a=0;a<this.chapters.length;a++)this.chapters[a].language===this.transcriptLang&&(e=this.chapters[a].cues);void 0===e&&(e=this.chapters[0].cues||[])}if(this.transcriptDescriptions)s=this.transcriptDescriptions.cues;else if(this.descriptions.length>0){if(this.transcriptLang)for(a=0;a<this.descriptions.length;a++)this.descriptions[a].language===this.transcriptLang&&(s=this.descriptions[a].cues);s||(s=this.descriptions[0].cues||[])}var n=this.generateTranscript(e||[],i||[],s||[]);this.$transcriptDiv.html(n),this.$transcriptLanguageSelect&&(this.$transcriptLanguageSelect.find("option:selected").prop("selected",!1),this.$transcriptLanguageSelect.find("option[lang="+this.transcriptLang+"]").prop("selected",!0))}var r=this;1===this.prefTabbable&&this.$transcriptDiv.find("span.able-transcript-seekpoint").attr("tabindex","0"),this.$transcriptArea.length>0&&this.$transcriptArea.find("span.able-transcript-seekpoint").on("click",function(e){r.seekTrigger="transcript";var i=parseFloat(t(this).attr("data-start"));i+=.01,r.seekingFromTranscript?r.seekingFromTranscript=!1:(r.seekingFromTranscript=!0,r.seekTo(i))})}},AblePlayer.prototype.highlightTranscript=function(e){if(this.transcriptType){var i,s,a,n=this;e=parseFloat(e),this.$transcriptArea.find("span.able-transcript-seekpoint").each(function(){if(i=parseFloat(t(this).attr("data-start")),s=parseFloat(t(this).attr("data-end")),a=!!t(this).parent().hasClass("able-transcript-chapter-heading"),e>=i&&e<=s&&!a)return t(this).hasClass("able-highlight")||(n.$transcriptArea.find(".able-highlight").removeClass("able-highlight"),t(this).addClass("able-highlight"),n.movingHighlight=!0),!1}),n.currentHighlight=n.$transcriptArea.find(".able-highlight"),0===n.currentHighlight.length&&(n.currentHighlight=null)}},AblePlayer.prototype.generateTranscript=function(e,i,s){var a,n=this,r=t('<div class="able-transcript-container"></div>');if(r.attr("lang",this.transcriptLang),a=void 0!==this.transcriptTitle?this.transcriptTitle:this.lyricsMode?this.translate("lyricsTitle","Lyrics"):this.translate("transcriptTitle","Transcript"),!this.transcriptDivLocation){var o=this.playerHeadingLevel,l=(o+=1)+1;if(o<=6)var h="h"+o.toString();else h="div";var p=t("<"+h+">");p.addClass("able-transcript-heading"),o>6&&p.attr({role:"heading","aria-level":o}),p.text(a),p.attr("lang",this.lang),r.append(p)}for(var c=0,u=0,d=0,addChapter=function(e,i){if(l<=6)var s="h"+l.toString();else s="div";var a=t("<"+s+">",{class:"able-transcript-chapter-heading"});l>6&&a.attr({role:"heading","aria-level":l});for(var flattenComponentForChapter=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForChapter(t.children[i]));return e},n=t("<span>",{class:"able-transcript-seekpoint"}),r=0;r<i.components.children.length;r++)for(var o=flattenComponentForChapter(i.components.children[r]),h=0;h<o.length;h++)n.append(o[h]);n.attr("data-start",i.start.toString()),n.attr("data-end",i.end.toString()),a.append(n),e.append(a)},addDescription=function(e,i){var s=t("<div>",{class:"able-transcript-desc"}),a=t("<span>",{class:"able-hidden"});a.attr("lang",n.lang),a.text(n.tt.prefHeadingDescription+": "),s.append(a);for(var flattenComponentForDescription=function(t){var e=[];if("string"===t.type)e.push(t.value);else for(var i=0;i<t.children.length;i++)e=e.concat(flattenComponentForDescription(t.children[i]));return e},r=t("<span>",{class:"able-transcript-seekpoint"}),o=0;o<i.components.children.length;o++)for(var l=flattenComponentForDescription(i.components.children[o]),h=0;h<l.length;h++)r.append(l[h]);r.attr("data-start",i.start.toString()),r.attr("data-end",i.end.toString()),s.append(r),e.append(s)},addCaption=function(e,i){for(var s=t("<span>",{class:"able-transcript-seekpoint able-transcript-caption"}),flattenComponentForCaption=function(e){var i=[],s=0,flattenString=function(t){var e;s++;var i=[];if(""===t)return i;var a=t.indexOf("["),n=t.indexOf("]"),r=t.indexOf("("),o=t.indexOf(")"),l=-1!==a&&-1!==n,h=-1!==r&&-1!==o;if(h||l){if(s>1)var p="<br/>";else p="";var c=p+'<span class="able-unspoken">',u="</span>";h&&l&&(a<r?h=!1:l=!1)}return h?(e=t.substring(0,r),e+=c,e+=t.substring(r,o+1),e+=u,e+=flattenString(t.substring(o+1)),i.push(e)):l?(e=t.substring(0,a),e+=c,e+=t.substring(a,n+1),e+=u,e+=flattenString(t.substring(n+1)),i.push(e)):i.push(t),i};if("string"===e.type)i=i.concat(flattenString(e.value));else if("v"===e.type){var a=t("<span>",{class:"able-unspoken"});e.value=e.value.replace(/^title="|\"$/g,""),a.text("("+e.value+")"),i.push(a);for(var n=0;n<e.children.length;n++)for(var r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)i.push(r[o])}else if("b"===e.type||"i"===e.type){if("b"===e.type)var l=t("<strong>");else if("i"===e.type)l=t("<em>");for(n=0;n<e.children.length;n++)for(r=flattenComponentForCaption(e.children[n]),o=0;o<r.length;o++)l.append(r[o]);"b"!==e.type&&"i"!=e.type||i.push(l)}else for(n=0;n<e.children.length;n++)i=i.concat(flattenComponentForCaption(e.children[n]));return i},a=0;a<i.components.children.length;a++){var r;a<i.components.children.length-1&&(r=i.components.children[a+1].tagName);for(var o=flattenComponentForCaption(i.components.children[a]),l=0;l<o.length;l++){var h=o[l];"string"==typeof h&&(n.lyricsMode?(h=h.replace(/\n/g,"<br>"),(!r||"i"!==r&&"b"!==r)&&(h+="<br>")):h+=" "),s.append(h)}}s.attr("data-start",i.start.toString()),s.attr("data-end",i.end.toString()),e.append(s),e.append(" \n")};c<e.length||d<s.length||u<i.length;){if(c<e.length&&d<s.length&&u<i.length)var g=Math.min(e[c].start,s[d].start,i[u].start);else if(c<e.length&&d<s.length)g=Math.min(e[c].start,s[d].start);else if(c<e.length&&u<i.length)g=Math.min(e[c].start,i[u].start);else if(d<s.length&&u<i.length)g=Math.min(s[d].start,i[u].start);else g=null;null!==g?void 0!==e[c]&&e[c].start===g?(addChapter(r,e[c]),c+=1):void 0!==s[d]&&s[d].start===g?(addDescription(r,s[d]),d+=1):(addCaption(r,i[u]),u+=1):c<e.length?(addChapter(r,e[c]),c+=1):d<s.length?(addDescription(r,s[d]),d+=1):u<i.length&&(addCaption(r,i[u]),u+=1)}var f=r.children(),m=0;return f.each(function(){t(this).hasClass("able-transcript-caption")?(-1===t(this).text().indexOf("[")&&-1===t(this).text().indexOf("(")||m>0&&(r=wrapTranscriptBlocks(r),m=0),t(this).addClass("able-block-temp"),m++):m>0&&(r=wrapTranscriptBlocks(r),m=0)}),r=wrapTranscriptBlocks(r)};var wrapTranscriptBlocks=function(t){return t.find(".able-block-temp").removeClass("able-block-temp").wrapAll('<div class="able-transcript-block"></div>'),t}}(jQuery),function(t){AblePlayer.prototype.showSearchResults=function(){var e=this;if(this.searchDiv&&this.searchString){var i=DOMPurify.sanitize(this.searchString);if(t("#"+this.SearchDiv)){var s="<p>"+this.translate("resultsSummary1","You searched for:")+" ";s+='<span id="able-search-term-echo">'+i+"</span>",s+="</p>";var a=this.searchFor(i,this.searchIgnoreCaps);if(a.length>0){var n=t("<p>",{class:"able-search-results-summary"}),r=this.translate("resultsSummary2","Found %1 matching items.",["<strong>"+a.length+"</strong>"]);r+=" "+this.translate("resultsSummary3","Click the time associated with any item to play the video from that point."),n.html(r);for(var o=t("<ul>"),l=0;l<a.length;l++){var h="aria-search-result-"+l,p=t("<li>",{}),c=this.secondsToTime(a[l].start),u=this.translate("searchButtonLabel","Play at %1",[c.title]),d=t("<button>",{class:"able-search-results-time","data-start":a[l].start,title:u,"aria-label":u,"aria-describedby":h});d.text(c.value),d.on("click",function(i){e.seekTrigger="search";var s=parseFloat(t(this).attr("data-start"));s+=.01,e.seeking=!0,e.seekTo(s)});var g=t("<span>",{class:"able-search-result-text",id:h});g.html("..."+a[l].caption+"..."),p.append(d,g),o.append(p)}t("#"+this.searchDiv).html(s).append(n,o)}else{var f=t("<p>").text(this.translate("noResultsFound","No results found."));t("#"+this.searchDiv).html(s).append(f)}}}},AblePlayer.prototype.searchFor=function(e,i){var s,a,n,r,o,l,h;n=[];var p=e.split(" ");if(this.captions.length>0){for(l=0;l<this.captions.length;l++)this.captions[l].language===this.searchLang&&(s=this.searchLang,a=this.captions[l].cues);if(a.length>0)for(o=0,l=0;l<a.length;l++)if(-1!==t.inArray(a[l].components.children[0].type,["string","i","b","u","v","c"])){r=this.flattenCueForCaption(a[l]);var c=i?r.toLowerCase():r;for(h=0;h<p.length;h++){var u=i?p[h].toLowerCase():p[h];if(-1!==c.indexOf(u)){n[o]=[],n[o].start=a[l].start,n[o].lang=s,n[o].caption=this.highlightSearchTerm(p,r),o++;break}}}}return n},AblePlayer.prototype.highlightSearchTerm=function(t,e){return t.forEach(function(t){var i=new RegExp(t,"gi");e=e.replace(i,'<span class="able-search-term">$&</span>')}),e},AblePlayer.prototype.secondsToTime=function(t){t=Math.floor(t);var e=parseInt(t/3600,10)%24,i=parseInt(t/60,10)%60,s=t%60,a="",n="";e>0&&(a+=e+":",n+=1==e?"1 "+this.translate("hour","hour")+" ":e+" "+this.translate("hours","hours")+" "),i<10?(a+="0"+i+":",i>0&&(n+=1==i?"1 "+this.translate("minute","minute")+" ":i+" "+this.translate("minutes","minutes")+" ")):(a+=i+":",n+=i+" "+this.translate("minutes","minutes")+" "),s<10?(a+="0"+s,s>0&&(n+=1==s?"1 "+this.translate("second","second")+" ":s+" "+this.translate("seconds","seconds")+" ")):(a+=s,n+=s+" "+this.translate("seconds","seconds")+" ");var r=[];return r.value=a,r.title=n,r}}(jQuery),function(t){AblePlayer.prototype.onMediaUpdateTime=function(t,e){var i=this;this.getMediaTimes(t,e).then(function(t){i.duration=t.duration,i.elapsed=t.elapsed,i.duration>0&&(1===i.prefHighlight&&i.highlightTranscript(i.elapsed),i.updateCaption(i.elapsed),i.showDescription(i.elapsed),i.updateChapter(i.elapsed),i.updateMeta(i.elapsed),i.refreshControls("timeline",i.duration,i.elapsed))})},AblePlayer.prototype.onMediaPause=function(){this.controlsHidden&&(this.fadeControls("in"),this.controlsHidden=!1),"active"===this.hideControlsTimeoutStatus&&(window.clearTimeout(this.hideControlsTimeout),this.hideControlsTimeoutStatus="clear"),this.refreshControls("playpause")},AblePlayer.prototype.onMediaComplete=function(){this.hasPlaylist&&!this.cueingPlaylistItem&&(this.playlistIndex===this.$playlist.length-1?this.loop?(this.playlistIndex=0,this.cueingPlaylistItem=!0,this.cuePlaylistItem(0)):(this.playing=!1,this.paused=!0):(this.playlistIndex++,this.cueingPlaylistItem=!0,this.cuePlaylistItem(this.playlistIndex))),this.refreshControls()},AblePlayer.prototype.onMediaNewSourceLoad=function(){var t=!1;this.cueingPlaylistItem&&(this.cueingPlaylistItem=!1),this.recreatingPlayer&&(this.recreatingPlayer=!1),this.playbackRate&&this.setPlaybackRate(this.playbackRate),this.userClickedPlaylist?this.startedPlaying&&!this.okToPlay||(this.playMedia(),t=!0):"restart"==this.seekTrigger||"chapter"==this.seekTrigger||"transcript"==this.seekTrigger||"search"==this.seekTrigger?(this.playMedia(),t=!0):this.swappingSrc?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length||this.loop)&&(this.playMedia(),t=!0):this.swapTime>0?"complete"===this.seekStatus?(this.okToPlay&&this.playMedia(),t=!0):"seeking"===this.seekStatus||(this.swapTime===this.elapsed?(this.seekStatus="complete",this.okToPlay&&this.playMedia(),t=!0):this.hasDescTracks?t=!0:this.durationsAreCloseEnough(this.duration,this.prevDuration)?(this.seekStatus="seeking",this.seekTo(this.swapTime)):t=!0):this.playing&&(this.playMedia(),t=!0):this.startedPlaying?this.hasPlaylist?(this.playlistIndex!==this.$playlist.length||this.loop)&&(this.playMedia(),t=!0):t=!0:this.startTime>0?this.seeking?(this.seeking=!1,this.okToPlay&&this.playMedia(),t=!0):this.seekTo(this.startTime):this.defaultChapter&&void 0!==this.selectedChapters?this.seekToChapter(this.defaultChapter):(this.okToPlay&&this.playMedia(),t=!0),t&&(this.swappingSrc=!1,this.seekStatus=null,this.swapTime=0,this.seekTrigger=null,this.seekingFromTranscript=!1,this.userClickedPlaylist=!1,this.okToPlay=!1),this.refreshControls(),this.$focusedElement&&(this.restoreFocus(),this.$focusedElement=null,this.activeMedia=null)},AblePlayer.prototype.durationsAreCloseEnough=function(t,e){return Math.abs(Math.round(t)-Math.round(e))<=1},AblePlayer.prototype.restoreFocus=function(){var e,i;this.$focusedElement&&null!==this.activeMedia&&(i=t("#"+this.activeMedia).closest(".able"),"button"===this.$focusedElement.attr("role")&&(e=this.$focusedElement.attr("class").split(/\s+/),t.each(e,function(t,e){"able-button-handler-"===e.substring(0,20)&&i.find("div.able-controller div."+e).trigger("focus")})))},AblePlayer.prototype.addSeekbarListeners=function(){var t=this;this.seekBar.bodyDiv.on("startTracking",function(e){t.pausedBeforeTracking=t.paused,t.pauseMedia()}).on("tracking",function(e,i){t.highlightTranscript(i),t.updateCaption(i),t.showDescription(i),t.updateChapter(t.convertChapterTimeToVideoTime(i)),t.updateMeta(i),t.refreshControls()}).on("stopTracking",function(e,i){t.useChapterTimes?t.seekTo(t.convertChapterTimeToVideoTime(i)):t.seekTo(i),t.pausedBeforeTracking||setTimeout(function(){t.playMedia()},200)})},AblePlayer.prototype.onClickPlayerButton=function(e){var i;switch(this.getButtonNameFromClass(t(e).attr("class"))){case"play":this.clickedPlay=!0,this.handlePlay();break;case"restart":this.seekTrigger="restart",this.handleRestart();break;case"previous":this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="previous",this.buttonWithFocus="previous",this.handlePrevTrack();break;case"next":this.userClickedPlaylist=!0,this.okToPlay=!0,this.seekTrigger="next",this.buttonWithFocus="next",this.handleNextTrack();break;case"rewind":this.seekTrigger="rewind",this.handleRewind();break;case"forward":this.seekTrigger="forward",this.handleFastForward();break;case"mute":this.handleMute();break;case"volume":this.handleVolumeButtonClick();break;case"faster":this.handleRateIncrease();break;case"slower":this.handleRateDecrease();break;case"captions":this.handleCaptionToggle();break;case"chapters":this.handleChapters();break;case"descriptions":this.handleDescriptionToggle();break;case"sign":this.closingSign||this.handleSignToggle();break;case"preferences":"menu"===t(e).attr("data-prefs-popup")?this.handlePrefsClick():(this.showingPrefsDialog=!0,this.closePopups(),"keyboard"===(i=t(e).attr("data-prefs-popup"))?this.keyboardPrefsDialog.show():"captions"===i?this.captionPrefsDialog.show():"descriptions"===i?this.descPrefsDialog.show():"transcript"===i&&this.transcriptPrefsDialog.show(),this.showingPrefsDialog=!1);break;case"transcript":this.closingTranscript||this.handleTranscriptToggle();break;case"fullscreen":this.clickedFullscreenButton=!0,this.handleFullscreenToggle()}},AblePlayer.prototype.getButtonNameFromClass=function(t){var e,i;for(e=t.split(" "),i=0;i<e.length;i++)if("able-button-handler-"===e[i].substring(0,20))return e[i].substring(20);return t},AblePlayer.prototype.okToHandleKeyPress=function(){let e=!0;1===this.prefNoKeyShortcuts&&(e=!1);var i=AblePlayer.getActiveDOMElement();return"INPUT"!==t(i).prop("tagName")&&e},AblePlayer.prototype.onPlayerKeyPress=function(e){var i,s;return i=e.key,s=t(document.activeElement),"Escape"===i&&this.$transcriptArea&&t.contains(this.$transcriptArea[0],s[0])&&!this.hidingPopup?(this.handleTranscriptToggle(),!1):!!this.okToHandleKeyPress()&&void(t(":focus").is("[contenteditable]")||t(":focus").is("input")||t(":focus").is("textarea")&&!this.stenoMode||t(":focus").is("select")||e.target.hasAttribute("contenteditable")||"INPUT"===e.target.tagName||"TEXTAREA"===e.target.tagName&&!this.stenoMode||"SELECT"===e.target.tagName||("Escape"===i?(this.closePopups(),this.$tooltipDiv.hide(),this.seekBar.hideSliderTooltips()):" "===i?"button"===s.attr("role")&&(e.preventDefault(),s.trigger("click")):"p"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePlay()):"s"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRestart()):"m"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleMute()):"v"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeButtonClick()):i>=0&&i<=9?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleVolumeKeystroke(i)):"c"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleCaptionToggle()):"d"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleDescriptionToggle()):"f"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleFastForward()):"r"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleRewind()):"b"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrevTrack()):"n"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handleNextTrack()):"e"===i?this.usingModifierKeys(e)&&(e.preventDefault(),this.handlePrefsClick()):"Enter"===i&&("button"===s.attr("role")||"SPAN"===s.prop("tagName")||"LI"===s.prop("tagName"))&&s.trigger("click")))},AblePlayer.prototype.addHtml5MediaListeners=function(){var t=this;this.$media.on("emptied",function(){}).on("loadedmetadata",function(){t.duration=t.media.duration}).on("canplay",function(){}).on("canplaythrough",function(){t.onMediaNewSourceLoad()}).on("play",function(){}).on("playing",function(){t.playing=!0,t.paused=!1,t.swappingSrc=!1,t.refreshControls("playpause")}).on("ended",function(){t.playing=!1,t.paused=!0,t.onMediaComplete()}).on("progress",function(){t.refreshControls("timeline")}).on("waiting",function(){}).on("durationchange",function(){t.refreshControls("timeline")}).on("timeupdate",function(){t.onMediaUpdateTime()}).on("pause",function(){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist||t.swappingSrc||(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause()}).on("ratechange",function(){}).on("volumechange",function(){t.volume=t.getVolume()}).on("error",function(){t.debug&&t.media.error.code})},AblePlayer.prototype.addVimeoListeners=function(){var t=this;this.vimeoPlayer.on("loaded",function(e){t.onMediaNewSourceLoad()}),this.vimeoPlayer.on("play",function(e){t.playing=!0,t.startedPlaying=!0,t.paused=!1,t.refreshControls("playpause")}),this.vimeoPlayer.on("ended",function(e){t.playing=!1,t.paused=!0,t.onMediaComplete()}),this.vimeoPlayer.on("bufferstart",function(){}),this.vimeoPlayer.on("bufferend",function(){}),this.vimeoPlayer.on("progress",function(t){}),this.vimeoPlayer.on("seeking",function(t){}),this.vimeoPlayer.on("seeked",function(t){}),this.vimeoPlayer.on("timeupdate",function(e){t.onMediaUpdateTime(e.duration,e.seconds)}),this.vimeoPlayer.on("pause",function(e){t.clickedPlay?(t.playing=!1,t.paused=!0):t.hasPlaylist||t.swappingSrc||(t.playing=!1,t.paused=!0),t.clickedPlay=!1,t.onMediaPause(),t.refreshControls("playpause")}),this.vimeoPlayer.on("playbackratechange",function(e){t.vimeoPlaybackRate=e.playbackRate}),this.vimeoPlayer.on("texttrackchange",function(t){}),this.vimeoPlayer.on("volumechange",function(e){t.volume=10e.volume}),this.vimeoPlayer.on("error",function(t){})},AblePlayer.prototype.addEventListeners=function(){var e=this;if(t(window).on("resize",function(){e.resizePlayer()}),window.MutationObserver){var i=this.$ableDiv[0];new MutationObserver(function(t){t.forEach(function(t){"attributes"===t.type&&"style"===t.attributeName&&e.$ableDiv.is(":visible")&&e.refreshControls()})}).observe(i,{attributes:!0,childList:!0,characterData:!0})}void 0!==this.seekBar?this.addSeekbarListeners():setTimeout(function(){void 0!==e.seekBar&&e.addSeekbarListeners()},2e3),this.$controllerDiv.find('div[role="button"]').on("click",function(t){t.stopPropagation(),e.onClickPlayerButton(this)}),t("body").on("click",function(i){if(0!==i.button)return!1;(t(".able-popup:visible").length||t(".able-volume-slider:visible").length)&&e.closePopups(),"VIDEO"===i.target.tagName&&(e.clickedPlay=!0)}),this.$ableDiv.on("mousemove",function(){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),t(document).on("keydown",function(t){e.controlsHidden?(e.fadeControls("in"),e.controlsHidden=!1,"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear"),e.hideControls&&e.invokeHideControlsTimeout()):"active"===e.hideControlsTimeoutStatus&&(window.clearTimeout(e.hideControlsTimeout),e.hideControlsTimeoutStatus="clear",e.hideControls&&e.invokeHideControlsTimeout())}),this.$ableDiv.on("keydown",function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)}),this.stenoMode&&void 0!==this.stenoFrameContents&&this.stenoFrameContents.on("keydown",function(t){e.onPlayerKeyPress(t)}),this.$transcriptArea&&this.$transcriptArea.on("keydown",function(t){AblePlayer.nextIndex>1&&e.onPlayerKeyPress(t)}),this.$playlist&&this.$playlist.on("click",function(i){e.userClickedPlaylist||(e.userClickedPlaylist=!0,e.playlistIndex=t(this).index(),e.cuePlaylistItem(e.playlistIndex))}),this.$media.on("click",function(){e.handlePlay()}),"html5"===this.player?this.addHtml5MediaListeners():"vimeo"===this.player?this.addVimeoListeners():"youtube"===this.player&&setInterval(function(){e.onMediaUpdateTime()},300)}}(jQuery),function(t){AblePlayer.prototype.initDragDrop=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,g;for(i=this,"transcript"===e?(s=this.$transcriptArea,n="transcript-window",(a=this.$transcriptToolbar).attr("aria-label",this.translate("transcriptControls","Transcript Window Controls"))):"sign"===e&&(s=this.$signWindow,n="sign-window",(a=this.$signToolbar).attr("aria-label",this.translate("signControls","Sign Language Window Controls"))),a.addClass("able-draggable"),a.attr("role","application"),$dragHandle=t("<div>",{class:"able-drag-handle"}),$dragHandle.html('<svg version="1.1" viewBox="262.48 487.5 675.03 225" xmlns="http://www.w3.org/2000/svg"><path d="m900 562.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path> <path d="m900 712.5h-600c-13.398 0-25.777-7.1484-32.477-18.75-6.6992-11.602-6.6992-25.898 0-37.5 6.6992-11.602 19.078-18.75 32.477-18.75h600c13.398 0 25.777 7.1484 32.477 18.75 6.6992 11.602 6.6992 25.898 0 37.5-6.6992 11.602-19.078 18.75-32.477 18.75z" fill="#fff"></path></svg>'),r=t("<div>",{class:"able-resizable"}),o=t("<svg>").attr({width:"100%",height:"100%",viewBox:"0 0 100 100",preserveAspectRatio:"none"}),l=1;l<=3;l++)1===l?(h="100",p="0",c="0",u="100"):2===l?(h="33",p="100",c="100",u="33"):3===l&&(h="67",p="100",c="100",u="67"),d=t("<line>").attr({x1:h,y1:p,x2:c,y2:u,"vector-effect":"non-scaling-stroke"}),o.append(d);r.html(o),g=parseInt(s.css("z-index"))+100,r.css("z-index",g),s.append(r),a.append($dragHandle),r.html(r.html()),$dragHandle.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type||"touchstart"===t.type?i.windowMenuClickRegistered||(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.dragDevice="mouse",i.startDrag(e,s)):"mouseup"!==t.type&&"touchend"!==t.type||i.dragging&&"mouse"===i.dragDevice&&i.endDrag(e),!1}),r.on("mousedown mouseup touchstart touchend",function(t){return t.stopPropagation(),"mousedown"===t.type||"touchstart"===t.type?i.windowMenuClickRegistered||(i.windowMenuClickRegistered=!0,i.startMouseX=t.pageX,i.startMouseY=t.pageY,i.startResize(e,s)):"mouseup"!==t.type&&"touchend"!==t.type||i.resizing&&i.endResize(e),!1}),s.on("click",function(){i.windowMenuClickRegistered||i.finishingDrag||i.updateZIndex(e),i.finishingDrag=!1}),this.addWindowMenu(e,s,n)},AblePlayer.prototype.addWindowMenu=function(e,i,s){var a,n,r,o,l,h,p;a=this,this.windowMenuClickRegistered=!1,this.finishingDrag=!1,p=this.mediaId+"-"+s+"-menu",r=t("<button>",{type:"button",tabindex:"0","aria-haspopup":"true","aria-controls":p,"aria-expanded":"false",class:"able-button-handler-preferences"}),this.getIcon(r,"preferences"),this.setText(r,this.translate("windowButtonLabel","Window options")),o=this.mediaId+"-"+s+"-tooltip",l=t("<div>",{class:"able-tooltip",id:o}).hide(),r.on("mouseenter focus",function(e){var i=t(this).attr("aria-label"),s=AblePlayer.localGetElementById(r[0],o).text(i),n={right:"",left:"0px",top:-1(s.height()+2)+"px"};s.css(n),a.showTooltip(s),t(this).on("mouseleave blur",function(){AblePlayer.localGetElementById(r[0],o).text("").hide()})}),h=this.setupPopups(s),"transcript"===e?(this.$transcriptPopupButton=r,this.$transcriptPopup=h,this.$transcriptToolbar.prepend(n,r,l,h)):"sign"===e&&(this.$signPopupButton=r,this.$signPopup=h,this.$signToolbar.append(n,r,l,h)),r.on("click keydown",function(t){return!a.focusNotClick&&(a.dragging?(a.dragKeys(e,t),!1):(t.stopPropagation(),a.windowMenuClickRegistered||a.finishingDrag||a.handleWindowButtonClick(e,t),void(a.finishingDrag=!1)))}),this.addResizeDialog(e,i)},AblePlayer.prototype.addResizeDialog=function(e,i){var s,a,n,r,o,l,h,p,c,u,d,g,f,m,v,y,b,P;s=this,"transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton),r=this.mediaId+"-resize-"+e+"-width",o=this.mediaId+"-resize-"+e+"-height",l=t("<div></div>",{class:"able-resize-form"}),h=t("<div></div>"),$resizeControls=t('<div class="able-prefs-buttons"></div>'),p=t("<div></div>"),c=t("<input>",{type:"number",id:r,min:0,value:""}),u=t("<label>",{for:r}).text(this.translate("width","Width")),d=t("<div></div>"),g=t("<input>",{type:"number",id:o,min:0,value:""}),f=t("<label>",{for:o}).text(this.translate("height","Height")),m=t('<button class="modal-button">'+this.translate("save","Save")+"</button>"),v=t('<button class="modal-button">'+this.translate("cancel","Cancel")+"</button>"),m.on("click",function(){y=t("#"+r).val(),b=t("#"+o).val(),s.resizeObject(e,y,b),s.updatePreferences(e),P.hide(),a.hide(),n.trigger("focus")}),v.on("click",function(){P.hide(),a.hide(),n.trigger("focus")}),p.append(u,c),d.append(f,g),h.append(p,d),$resizeControls.append(m,v),l.append(h,$resizeControls),t("body").append(l),P=new AccessibleDialog(l,n,this.translate("windowResizeHeading","Resize Window"),this.translate("closeButtonLabel","Close")),"transcript"===e?this.transcriptResizeDialog=P:"sign"===e&&(this.signResizeDialog=P)},AblePlayer.prototype.handleWindowButtonClick=function(e,i){var s,a,n,r,o;if(s=this,this.focusNotClick)return!1;if("transcript"===e?(a=this.$transcriptPopup,n=this.$transcriptPopupButton,r=this.$transcriptToolbar):"sign"===e&&(a=this.$signPopup,n=this.$signPopupButton,r=this.$signToolbar),"keydown"===i.type)if(" "===i.key||"Enter"===i.key)this.windowMenuClickRegistered=!0;else{if("Escape"!==i.key)return!1;a.is(":visible")?(a.hide(),s.windowMenuClickRegistered=!1,a.find("li").removeClass("able-focus").attr("tabindex","-1"),n.trigger("focus")):"sign"===e?this.handleSignToggle():"transcript"===e&&this.handleTranscriptToggle()}else this.windowMenuClickRegistered=!0;a.is(":visible")?(a.hide(),s.windowMenuClickRegistered=!1,a.find("li").removeClass("able-focus"),n.attr("aria-expanded","false").trigger("focus")):(this.updateZIndex(e),o=r.outerHeight()-1,a.css("top",o),a.show(),n.attr("aria-expanded","true"),t(this).find("li").first().trigger("focus").addClass("able-focus"),s.windowMenuClickRegistered=!1)},AblePlayer.prototype.handleMenuChoice=function(e,i,s){var a,n,r,o,l,h,p,c,u;if("transcript"===e?(a=this.$transcriptArea,n=this.$transcriptPopup,r=this.$transcriptPopupButton,o=this.transcriptResizeDialog):"sign"===e&&(a=this.$signWindow,n=this.$signPopup,r=this.$signPopupButton,o=this.signResizeDialog,l=a.outerWidth(),h=a.outerHeight(),p=l/h,widthId=this.mediaId+"-resize-"+e+"-width",heightId=this.mediaId+"-resize-"+e+"-height",t("#"+heightId).prop("readonly",!0),t("#"+widthId).on("input",function(){c=t(this).val(),u=Math.round(c/p),t("#"+heightId).val(u)})),this.$activeWindow=a,"keydown"===s.type)return"Escape"===s.key?(n.hide(),this.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),r.trigger("focus"),!1):("close"!==i&&(this.$activeWindow=a),!1);if(n.hide(),this.windowMenuClickRegistered=!1,n.find("li").removeClass("able-focus").attr("tabindex","-1"),r.attr("aria-expanded","false"),"close"!==i&&r.trigger("focus"),"move"===i)this.$activeWindow.attr("role","application"),this.showedAlert(e)||(this.showAlert(this.translate("windowMoveAlert","Drag or use arrow keys to move the window; Enter to stop"),e),"transcript"===e?this.showedTranscriptAlert=!0:"sign"===e&&(this.showedSignAlert=!0)),this.dragDevice="keydown"===s.type?"keyboard":"mouse",this.startDrag(e,a),n.hide().parent().attr("tabindex","-1").trigger("focus");else if("resize"==i){var d=o.getInputs();d&&(d[0].value=Math.round(a.outerWidth()),d[1].value=Math.round(a.outerHeight())),o.show()}else"close"==i&&("transcript"===e?(this.closingTranscript=!0,this.handleTranscriptToggle()):"sign"===e&&(this.closingSign=!0,this.handleSignToggle()))},AblePlayer.prototype.startDrag=function(e,i){var s,a,n,r,o;s=this,this.$activeWindow||(this.$activeWindow=i),this.dragging=!0,"transcript"===e?a=this.$transcriptPopup:"sign"===e&&(a=this.$signPopup),a.is(":visible")&&a.hide(),this.updateZIndex(e),n=this.$activeWindow.position(),this.dragStartX=n.left,this.dragStartY=n.top,void 0===this.startMouseX?(this.dragDevice="keyboard",this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.startingDrag=!0):(this.dragDevice="mouse",this.dragOffsetX=this.startMouseX-this.dragStartX,this.dragOffsetY=this.startMouseY-this.dragStartY),this.$activeWindow.addClass("able-drag").css({position:"absolute",top:this.dragStartY+"px",left:this.dragStartX+"px"}).trigger("focus");this.dragDevice;return"mouse"===this.dragDevice?t(document).on("mousemove touchmove",function(t){s.dragging&&(r=t.pageX-s.dragOffsetX,o=t.pageY-s.dragOffsetY,s.resetDraggedObject(r,o))}):"keyboard"===this.dragDevice&&this.$activeWindow.on("keydown",function(t){s.dragging&&s.dragKeys(e,t)}),!1},AblePlayer.prototype.dragKeys=function(t,e){if(this.startingDrag)return this.startingDrag=!1,!1;switch(e.key){case"ArrowLeft":this.dragKeyX-=10,this.$srAlertBox.text(this.translate("windowMoveLeft","Window moved left"));break;case"ArrowUp":this.dragKeyY-=10,this.$srAlertBox.text(this.translate("windowMoveUp","Window moved up"));break;case"ArrowRight":this.dragKeyX+=10,this.$srAlertBox.text(this.translate("windowMoveRight","Window moved right"));break;case"ArrowDown":this.dragKeyY+=10,this.$srAlertBox.text(this.translate("windowMoveDown","Window moved down"));break;case"Enter":case"Escape":return this.$srAlertBox.text(this.translate("windowMoveStopped","Window move stopped")),this.endDrag(t),!1;default:return!1}return this.resetDraggedObject(this.dragKeyX,this.dragKeyY),e.preventDefault&&e.preventDefault(),!1},AblePlayer.prototype.resetDraggedObject=function(t,e){setTimeout(()=>{this.$srAlertBox.text("")},2e3),this.$activeWindow.css({left:t+"px",top:e+"px"})},AblePlayer.prototype.resizeObject=function(t,e,i){var s;this.$activeWindow.css({width:e+"px",height:i+"px"}),"transcript"===t&&(s=i-50,this.$transcriptDiv.css("height",s+"px"))},AblePlayer.prototype.endDrag=function(e){var i,s;i=this,"transcript"===e?(this.$transcriptPopup,s=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,s=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown").removeClass("able-drag"),this.$activeWindow.attr("role","dialog"),this.$activeWindow=null,"keyboard"===this.dragDevice&&s.trigger("focus"),this.dragging=!1,this.updatePreferences(e),this.startMouseX=void 0,this.startMouseY=void 0,this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){i.finishingDrag=!1},100)},AblePlayer.prototype.startResize=function(e,i){var s,a,n,r;return s=this,this.$activeWindow=i,this.resizing=!0,(a="transcript"===e?this.$transcriptPopup:this.$signPopup).is(":visible")&&a.hide().parent().trigger("focus"),startPos=this.$activeWindow.position(),this.dragKeyX=this.dragStartX,this.dragKeyY=this.dragStartY,this.dragStartWidth=this.$activeWindow.width(),this.dragStartHeight=this.$activeWindow.outerHeight(),t(document).on("mousemove touchmove",function(t){s.resizing&&(n=s.dragStartWidth+(t.pageX-s.startMouseX),r=s.dragStartHeight+(t.pageY-s.startMouseY),s.resizeObject(e,n,r))}),!1},AblePlayer.prototype.endResize=function(e){var i;"transcript"===e?(this.$transcriptPopup,i=this.$transcriptPopupButton):"sign"===e&&(this.$signPopup,i=this.$signPopupButton),t(document).off("mousemove mouseup touchmove touchup"),this.$activeWindow.off("keydown"),i.show().trigger("focus"),this.resizing=!1,this.$activeWindow.removeClass("able-resize"),this.updatePreferences(e),this.windowMenuClickRegistered=!1,this.finishingDrag=!0,setTimeout(function(){this.finishingDrag=!1},100)}}(jQuery),function(t){AblePlayer.prototype.initSignLanguage=function(){this.hasSignLanguage=!1;var t=void 0!==this.$sources.first().attr("data-sign-src")&&""!==this.$sources.first().attr("data-sign-src"),e=void 0!==this.$media.data("youtube-sign-src")&&""!==this.$media.data("youtube-sign-src"),i=void 0!==this.$sources.first().attr("data-youtube-sign-src")&&""!==this.$sources.first().attr("data-youtube-sign-src");if(!this.isIOS()&&(t||e||i)&&("html5"===this.player||"youtube"===this.player)){let s=this.youTubeSignId??DOMPurify.sanitize(this.$sources.first().attr("data-youtube-sign-src")),a=DOMPurify.sanitize(this.$sources.first().attr("data-sign-src")),n=DOMPurify.sanitize(this.$media.data("youtube-sign-src"));this.signFile=!!t&&a,e?this.signYoutubeId=n:i&&(this.signYoutubeId=s),(this.signFile||this.signYoutubeId)&&(this.isIOS()?this.debug:(this.debug,this.hasSignLanguage=!0,this.injectSignPlayerCode()))}},AblePlayer.prototype.injectSignPlayerCode=function(){var e,i,s,a,n;if(e=this.mediaId+"-sign",(this.signFile||this.signYoutubeId)&&(null!==this.$signDivLocation?(this.$signDivLocation.addClass("able-sign-window able-fixed"),this.$signWindow=this.$signDivLocation):(this.$signWindow=t("<div>",{class:"able-sign-window",role:"dialog","aria-label":this.translate("sign","Sign language")}),this.$signToolbar=t("<div>",{class:"able-window-toolbar able-"+this.toolbarIconColor+"-controls"}),this.$signWindow.append(this.$signToolbar)),this.$ableWrapper.append(this.$signWindow)),this.signFile){if(this.$signVideo=t("<video>",{id:e,tabindex:"-1",muted:!0}),this.signVideo=this.$signVideo[0],this.signFile)n=t("<source>",{src:this.signFile,type:"video/"+this.signFile.substr(-3)}),this.$signVideo.append(n);else for(i=0;i<this.$sources.length;i++){if(s=DOMPurify.sanitize(this.$sources[i].getAttribute("data-sign-src")),a=this.$sources[i].getAttribute("type"),!s)return void(this.hasSignLanguage=!1);n=t("<source>",{src:s,type:a}),this.$signVideo.append(n)}this.$signWindow.append(this.$signVideo)}else this.signYoutubeId&&(this.signYoutube=this.initYouTubeSignPlayer());null===this.$signDivLocation&&this.initDragDrop("sign"),1===this.prefSign?null===this.$signDivLocation&&this.positionDraggableWindow("sign",this.getDefaultWidth("sign")):this.$signWindow.hide()},AblePlayer.prototype.initYouTubeSignPlayer=function(){var e,i,s;return e=this,s=(i=new this.defer).promise(),this.youTubeSignPlayerReady=!1,AblePlayer.youTubeIframeAPIReady?e.finalizeYoutubeSignInit().then(function(){i.resolve()}):(AblePlayer.loadingYouTubeIframeAPI||e.getScript("https://www.youtube.com/iframe_api",function(){}),t("body").on("youTubeIframeAPIReady",function(){e.finalizeYoutubeSignInit().then(function(){i.resolve()})})),s},AblePlayer.prototype.finalizeYoutubeSignInit=function(){var e,i,s,a,n;return i=(e=new this.defer).promise(),s=this,a=this.mediaId+"_youtube_sign",this.$signWindow.append(t("<div>").attr("id",a)),n=this.okToPlay?1:0,this.youTubeSignPlayer=new YT.Player(a,{videoId:this.getYouTubeId(this.signYoutubeId),host:this.youTubeNoCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",playerVars:{autoplay:n,cc_lang_pref:this.captionLang,cc_load_policy:0,controls:0,disableKb:1,enablejsapi:1,hl:this.lang,iv_load_policy:3,origin:window.location.origin,playsinline:this.playsInline,rel:0,start:this.startTime},events:{onReady:function(t){t.target.mute(),t.target.unloadModule("captions"),s.youTubeSignPlayerReady=!0,e.resolve()},onError:function(t){e.reject()},onStateChange:function(t){s.getPlayerState().then(function(){})},onApiChange:function(){},onPlaybackQualityChange:function(){}}}),i}}(jQuery),function(){var t={ab:{name:"Abkhaz",nativeName:"аҧсуа"},aa:{name:"Afar",nativeName:"Afaraf"},af:{name:"Afrikaans",nativeName:"Afrikaans"},ak:{name:"Akan",nativeName:"Akan"},sq:{name:"Albanian",nativeName:"Shqip"},am:{name:"Amharic",nativeName:"አማርኛ"},ar:{name:"Arabic",nativeName:"العربية"},an:{name:"Aragonese",nativeName:"Aragonés"},hy:{name:"Armenian",nativeName:"Հայերեն"},as:{name:"Assamese",nativeName:"অসমীয়া"},av:{name:"Avaric",nativeName:"авар мацӀ, магӀарул мацӀ"},ae:{name:"Avestan",nativeName:"avesta"},ay:{name:"Aymara",nativeName:"aymar aru"},az:{name:"Azerbaijani",nativeName:"azərbaycan dili"},bm:{name:"Bambara",nativeName:"bamanankan"},ba:{name:"Bashkir",nativeName:"башҡорт теле"},eu:{name:"Basque",nativeName:"euskara, euskera"},be:{name:"Belarusian",nativeName:"Беларуская"},bn:{name:"Bengali",nativeName:"বাংলা"},bh:{name:"Bihari",nativeName:"भोजपुरी"},bi:{name:"Bislama",nativeName:"Bislama"},bs:{name:"Bosnian",nativeName:"bosanski jezik"},br:{name:"Breton",nativeName:"brezhoneg"},bg:{name:"Bulgarian",nativeName:"български език"},my:{name:"Burmese",nativeName:"ဗမာစာ"},ca:{name:"Catalan",nativeName:"Català"},ch:{name:"Chamorro",nativeName:"Chamoru"},ce:{name:"Chechen",nativeName:"нохчийн мотт"},ny:{name:"Chichewa",nativeName:"chiCheŵa, chinyanja"},zh:{name:"Chinese",nativeName:"中文 (Zhōngwén), 汉语, 漢語"},cv:{name:"Chuvash",nativeName:"чӑваш чӗлхи"},kw:{name:"Cornish",nativeName:"Kernewek"},co:{name:"Corsican",nativeName:"corsu, lingua corsa"},cr:{name:"Cree",nativeName:"ᓀᐦᐃᔭᐍᐏᐣ"},hr:{name:"Croatian",nativeName:"hrvatski"},cs:{name:"Czech",nativeName:"česky, čeština"},da:{name:"Danish",nativeName:"dansk"},dv:{name:"Divehi",nativeName:"ދިވެހި"},nl:{name:"Dutch",nativeName:"Nederlands, Vlaams"},en:{name:"English",nativeName:"English"},eo:{name:"Esperanto",nativeName:"Esperanto"},et:{name:"Estonian",nativeName:"eesti, eesti keel"},ee:{name:"Ewe",nativeName:"Eʋegbe"},fo:{name:"Faroese",nativeName:"føroyskt"},fj:{name:"Fijian",nativeName:"vosa Vakaviti"},fi:{name:"Finnish",nativeName:"suomi, suomen kieli"},fr:{name:"French",nativeName:"français, langue française"},ff:{name:"Fula",nativeName:"Fulfulde, Pulaar, Pular"},gl:{name:"Galician",nativeName:"Galego"},ka:{name:"Georgian",nativeName:"ქართული"},de:{name:"German",nativeName:"Deutsch"},el:{name:"Greek",nativeName:"Ελληνικά"},gn:{name:"Guaraní",nativeName:"Avañeẽ"},gu:{name:"Gujarati",nativeName:"ગુજરાતી"},ht:{name:"Haitian",nativeName:"Kreyòl ayisyen"},ha:{name:"Hausa",nativeName:"Hausa, هَوُسَ"},he:{name:"Hebrew",nativeName:"עברית"},hz:{name:"Herero",nativeName:"Otjiherero"},hi:{name:"Hindi",nativeName:"हिन्दी, हिंदी"},ho:{name:"Hiri Motu",nativeName:"Hiri Motu"},hu:{name:"Hungarian",nativeName:"Magyar"},ia:{name:"Interlingua",nativeName:"Interlingua"},id:{name:"Indonesian",nativeName:"Bahasa Indonesia"},ie:{name:"Interlingue",nativeName:"Originally called Occidental; then Interlingue after WWII"},ga:{name:"Irish",nativeName:"Gaeilge"},ig:{name:"Igbo",nativeName:"Asụsụ Igbo"},ik:{name:"Inupiaq",nativeName:"Iñupiaq, Iñupiatun"},io:{name:"Ido",nativeName:"Ido"},is:{name:"Icelandic",nativeName:"Íslenska"},it:{name:"Italian",nativeName:"Italiano"},iu:{name:"Inuktitut",nativeName:"ᐃᓄᒃᑎᑐᑦ"},ja:{name:"Japanese",nativeName:"日本語 (にほんご／にっぽんご)"},jv:{name:"Javanese",nativeName:"basa Jawa"},kl:{name:"Kalaallisut",nativeName:"kalaallisut, kalaallit oqaasii"},kn:{name:"Kannada",nativeName:"ಕನ್ನಡ"},kr:{name:"Kanuri",nativeName:"Kanuri"},ks:{name:"Kashmiri",nativeName:"कश्मीरी, كشميري‎"},kk:{name:"Kazakh",nativeName:"Қазақ тілі"},km:{name:"Khmer",nativeName:"ភាសាខ្មែរ"},ki:{name:"Kikuyu",nativeName:"Gĩkũyũ"},rw:{name:"Kinyarwanda",nativeName:"Ikinyarwanda"},ky:{name:"Kyrgyz",nativeName:"кыргыз тили"},kv:{name:"Komi",nativeName:"коми кыв"},kg:{name:"Kongo",nativeName:"KiKongo"},ko:{name:"Korean",nativeName:"한국어 (韓國語), 조선말 (朝鮮語)"},ku:{name:"Kurdish",nativeName:"Kurdî, كوردی‎"},kj:{name:"Kuanyama",nativeName:"Kuanyama"},la:{name:"Latin",nativeName:"latine, lingua latina"},lb:{name:"Luxembourgish",nativeName:"Lëtzebuergesch"},lg:{name:"Luganda",nativeName:"Luganda"},li:{name:"Limburgish",nativeName:"Limburgs"},ln:{name:"Lingala",nativeName:"Lingála"},lo:{name:"Lao",nativeName:"ພາສາລາວ"},lt:{name:"Lithuanian",nativeName:"lietuvių kalba"},lu:{name:"Luba-Katanga",nativeName:""},lv:{name:"Latvian",nativeName:"latviešu valoda"},gv:{name:"Manx",nativeName:"Gaelg, Gailck"},mk:{name:"Macedonian",nativeName:"македонски јазик"},mg:{name:"Malagasy",nativeName:"Malagasy fiteny"},ms:{name:"Malay",nativeName:"bahasa Melayu, بهاس ملايو‎"},ml:{name:"Malayalam",nativeName:"മലയാളം"},mt:{name:"Maltese",nativeName:"Malti"},mi:{name:"Māori",nativeName:"te reo Māori"},mr:{name:"Marathi",nativeName:"मराठी"},mh:{name:"Marshallese",nativeName:"Kajin M̧ajeļ"},mn:{name:"Mongolian",nativeName:"монгол"},na:{name:"Nauru",nativeName:"Ekakairũ Naoero"},nv:{name:"Navajo",nativeName:"Diné bizaad, Dinékʼehǰí"},nb:{name:"Norwegian Bokmål",nativeName:"Norsk bokmål"},nd:{name:"North Ndebele",nativeName:"isiNdebele"},ne:{name:"Nepali",nativeName:"नेपाली"},ng:{name:"Ndonga",nativeName:"Owambo"},nn:{name:"Norwegian Nynorsk",nativeName:"Norsk nynorsk"},no:{name:"Norwegian",nativeName:"Norsk"},ii:{name:"Nuosu",nativeName:"ꆈꌠ꒿ Nuosuhxop"},nr:{name:"South Ndebele",nativeName:"isiNdebele"},oc:{name:"Occitan",nativeName:"Occitan"},oj:{name:"Ojibwe",nativeName:"ᐊᓂᔑᓈᐯᒧᐎᓐ"},cu:{name:"Church Slavonic",nativeName:"ѩзыкъ словѣньскъ"},om:{name:"Oromo",nativeName:"Afaan Oromoo"},or:{name:"Oriya",nativeName:"ଓଡ଼ିଆ"},os:{name:"Ossetian",nativeName:"ирон æвзаг"},pa:{name:"Punjabi",nativeName:"ਪੰਜਾਬੀ, پنجابی‎"},pi:{name:"Pāli",nativeName:"पाऴि"},fa:{name:"Persian",nativeName:"فارسی"},pl:{name:"Polish",nativeName:"polski"},ps:{name:"Pashto",nativeName:"پښتو"},pt:{name:"Portuguese",nativeName:"Português"},qu:{name:"Quechua",nativeName:"Runa Simi, Kichwa"},rm:{name:"Romansh",nativeName:"rumantsch grischun"},rn:{name:"Kirundi",nativeName:"kiRundi"},ro:{name:"Romanian",nativeName:"română"},ru:{name:"Russian",nativeName:"русский язык"},sa:{name:"Sanskrit",nativeName:"संस्कृतम्"},sc:{name:"Sardinian",nativeName:"sardu"},sd:{name:"Sindhi",nativeName:"सिन्धी, سنڌي، سندھی‎"},se:{name:"Northern Sami",nativeName:"Davvisámegiella"},sm:{name:"Samoan",nativeName:"gagana faa Samoa"},sg:{name:"Sango",nativeName:"yângâ tî sängö"},sr:{name:"Serbian",nativeName:"српски језик"},gd:{name:"Gaelic",nativeName:"Gàidhlig"},sn:{name:"Shona",nativeName:"chiShona"},si:{name:"Sinhalese",nativeName:"සිංහල"},sk:{name:"Slovak",nativeName:"slovenčina"},sl:{name:"Slovene",nativeName:"slovenščina"},so:{name:"Somali",nativeName:"Soomaaliga, af Soomaali"},st:{name:"Southern Sotho",nativeName:"Sesotho"},es:{name:"Spanish",nativeName:"español, castellano"},su:{name:"Sundanese",nativeName:"Basa Sunda"},sw:{name:"Swahili",nativeName:"Kiswahili"},ss:{name:"Swati",nativeName:"SiSwati"},sv:{name:"Swedish",nativeName:"svenska"},ta:{name:"Tamil",nativeName:"தமிழ்"},te:{name:"Telugu",nativeName:"తెలుగు"},tg:{name:"Tajik",nativeName:"тоҷикӣ, toğikī, تاجیکی‎"},th:{name:"Thai",nativeName:"ไทย"},ti:{name:"Tigrinya",nativeName:"ትግርኛ"},bo:{name:"Tibetan",nativeName:"བོད་ཡིག"},tk:{name:"Turkmen",nativeName:"Türkmen, Түркмен"},tl:{name:"Tagalog",nativeName:"Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔"},tn:{name:"Tswana",nativeName:"Setswana"},to:{name:"Tonga",nativeName:"faka Tonga"},tr:{name:"Turkish",nativeName:"Türkçe"},ts:{name:"Tsonga",nativeName:"Xitsonga"},tt:{name:"Tatar",nativeName:"татарча, tatarça, تاتارچا‎"},tw:{name:"Twi",nativeName:"Twi"},ty:{name:"Tahitian",nativeName:"Reo Tahiti"},ug:{name:"Uyghur",nativeName:"Uyƣurqə, ئۇيغۇرچە‎"},uk:{name:"Ukrainian",nativeName:"українська"},ur:{name:"Urdu",nativeName:"اردو"},uz:{name:"Uzbek",nativeName:"zbek, Ўзбек, أۇزبېك‎"},ve:{name:"Venda",nativeName:"Tshivenḓa"},vi:{name:"Vietnamese",nativeName:"Tiếng Việt"},vo:{name:"Volapük",nativeName:"Volapük"},wa:{name:"Walloon",nativeName:"Walon"},cy:{name:"Welsh",nativeName:"Cymraeg"},wo:{name:"Wolof",nativeName:"Wollof"},fy:{name:"Western Frisian",nativeName:"Frysk"},xh:{name:"Xhosa",nativeName:"isiXhosa"},yi:{name:"Yiddish",nativeName:"ייִדיש"},yo:{name:"Yoruba",nativeName:"Yorùbá"},za:{name:"Zhuang",nativeName:"Saɯ cueŋƅ, Saw cuengh"},"ar-dz":{name:"Arabic (Algeria)",nativeName:"العربية (الجزائر)"},"ar-bh":{name:"Arabic (Bahrain)",nativeName:"العربية (البحرين)"},"ar-eg":{name:"Arabic (Egypt)",nativeName:"العربية (مصر)"},"ar-iq":{name:"Arabic (Iraq)",nativeName:"العربية (العراق)"},"ar-jo":{name:"Arabic (Jordan)",nativeName:"العربية (الأردن)"},"ar-kw":{name:"Arabic (Kuwait)",nativeName:"العربية (الكويت)"},"ar-lb":{name:"Arabic (Lebanon)",nativeName:"العربية (لبنان)"},"ar-ly":{name:"Arabic (Libya)",nativeName:"العربية (ليبيا)"},"ar-ma":{name:"Arabic (Morocco)",nativeName:"العربية (المملكة المغربية)"},"ar-om":{name:"Arabic (Oman)",nativeName:"العربية (عمان)"},"ar-qa":{name:"Arabic (Qatar)",nativeName:"العربية (قطر)"},"ar-sa":{name:"Arabic (Saudi Arabia)",nativeName:"العربية (المملكة العربية السعودية)"},"ar-sy":{name:"Arabic (Syria)",nativeName:"العربية (سوريا)"},"ar-tn":{name:"Arabic (Tunisia)",nativeName:"العربية (تونس)"},"ar-ae":{name:"Arabic (U.A.E.)",nativeName:"العربية (الإمارات العربية المتحدة)"},"ar-ye":{name:"Arabic (Yemen)",nativeName:"العربية (اليمن)"},"de-at":{name:"German (Austria)",nativeName:"Deutsch (Österreich)"},"de-li":{name:"German (Liechtenstein)",nativeName:"Deutsch (Liechtenstein)"},"de-lu":{name:"German (Luxembourg)",nativeName:"Deutsch (Luxemburg)"},"de-ch":{name:"German (Switzerland)",nativeName:"Deutsch (Schweiz)"},"en-au":{name:"English (Australia)",nativeName:"English (Australia)"},"en-bz":{name:"English (Belize)",nativeName:"English (Belize)"},"en-ca":{name:"English (Canada)",nativeName:"English (Canada)"},"en-ie":{name:"English (Ireland)",nativeName:"English (Ireland)"},"en-jm":{name:"English (Jamaica)",nativeName:"English (Jamaica)"},"en-nz":{name:"English (New Zealand)",nativeName:""},"en-za":{name:"English (South Africa)",nativeName:"English (South Africa)"},"en-tt":{name:"English (Trinidad)",nativeName:"English (Trinidad y Tobago)"},"en-gb":{name:"English (United Kingdom)",nativeName:"English (United Kingdom)"},"en-us":{name:"English (United States)",nativeName:"English (United States)"},"es-ar":{name:"Spanish (Argentina)",nativeName:"Español (Argentina)"},"es-bo":{name:"Spanish (Bolivia)",nativeName:"Español (Bolivia)"},"es-cl":{name:"Spanish (Chile)",nativeName:"Español (Chile)"},"es-co":{name:"Spanish (Colombia)",nativeName:"Español (Colombia)"},"es-cr":{name:"Spanish (Costa Rica)",nativeName:"Español (Costa Rica)"},"es-do":{name:"Spanish (Dominican Republic)",nativeName:"Español (República Dominicana)"},"es-ec":{name:"Spanish (Ecuador)",nativeName:"Español (Ecuador)"},"es-sv":{name:"Spanish (El Salvador)",nativeName:"Español (El Salvador)"},"es-gt":{name:"Spanish (Guatemala)",nativeName:"Español (Guatemala)"},"es-hn":{name:"Spanish (Honduras)",nativeName:"Español (Honduras)"},"es-mx":{name:"Spanish (Mexico)",nativeName:"Español (México)"},"es-ni":{name:"Spanish (Nicaragua)",nativeName:"Español (Nicaragua)"},"es-pa":{name:"Spanish (Panama)",nativeName:"Español (Panamá)"},"es-py":{name:"Spanish (Paraguay)",nativeName:"Español (Paraguay)"},"es-pe":{name:"Spanish (Peru)",nativeName:"Español (Perú)"},"es-pr":{name:"Spanish (Puerto Rico)",nativeName:"Español (Puerto Rico)"},"es-uy":{name:"Spanish (Uruguay)",nativeName:"Español (Uruguay)"},"es-ve":{name:"Spanish (Venezuela)",nativeName:"Español (Venezuela)"},"fr-be":{name:"French (Belgium)",nativeName:"français (Belgique)"},"fr-ca":{name:"French (Canada)",nativeName:"français (Canada)"},"fr-lu":{name:"French (Luxembourg)",nativeName:"français (Luxembourg)"},"fr-ch":{name:"French (Switzerland)",nativeName:"français (Suisse)"},"it-ch":{name:"Italian (Switzerland)",nativeName:"italiano (Svizzera)"},"nl-be":{name:"Dutch (Belgium)",nativeName:"Nederlands (België)"},"pt-br":{name:"Portuguese (Brazil)",nativeName:"Português (Brasil)"},"sv-fi":{name:"Swedish (Finland)",nativeName:"svenska (Finland)"},"zh-hk":{name:"Chinese (Hong Kong)",nativeName:"中文(香港特别行政區)"},"zh-cn":{name:"Chinese (PRC)",nativeName:"中文(中华人民共和国)"},"zh-sg":{name:"Chinese (Singapore)",nativeName:"中文(新加坡)"},"zh-tw":{name:"Chinese Traditional (Taiwan)",nativeName:"中文（台灣）"}};AblePlayer.prototype.getLanguageName=function(e,i){var s,a,n;return(s=t[e.toLowerCase()])?"local"===i?s.nativeName:s.name:e.includes("-")&&(a=e.substring(0,2),n=e.substring(3),s=t[a.toLowerCase()])?"local"===i?s.nativeName+" ("+n+")":s.name+" ("+n+")":e}}(jQuery),function(t){AblePlayer.prototype.getSupportedLangs=function(){return{ca:"Catalan",cs:"Czech",da:"Danish",de:"German",en:"English",es:"Spanish",fr:"French",he:"Hebrew",id:"Indonesian",it:"Italian",ja:"Japanese",ms:"Malay",nb:"Norwegian Bokmål",nl:"Dutch",pl:"Polish",pt:"Portuguese","pt-br":"Brazilian Portuguese",sv:"Swedish",tr:"Turkish","zh-tw":"Chinese (Taiwan)"}},AblePlayer.prototype.translate=function(t,e,i=Array()){let s="";return s=this.tt[t]?this.tt[t]:e,i.length>0&&i.forEach((t,e)=>{let i=e+1;s=s.replace("%"+i,t)}),s},AblePlayer.prototype.getTranslationText=function(){var e,i,s,a,n,r;if(e=new this.defer,i=this,s=this.getSupportedLangs(),this.lang&&Object.hasOwn(s,this.lang))if(2==this.lang.indexOf("-"))this.lang=-1!==Object.hasOwn(s,this.lang.substring(0,2))?this.lang.substring(0,2):null;else{r=!1;for(const[t,e]of Object.entries(s))t.substring(0,2)==this.lang&&(this.lang=s[undefined],r=!0);r||(this.lang=null)}return this.lang||(a=t("body").attr("lang")?t("body").attr("lang").toLowerCase():t("html").attr("lang")?t("html").attr("lang").toLowerCase():null)&&(Object.hasOwn(s,a)?this.lang=a:2==a.indexOf("-")&&Object.hasOwn(s,a.substring(0,2))&&(this.lang=a.substring(0,2))),this.lang||(this.lang="en"),this.searchLang||(this.searchLang=this.lang),n=this.rootPath+"translations/"+this.lang+".json",fetch(n).then(t=>t.json()).then(t=>{i.tt=t,i.translationFiles=!0,e.resolve()}).catch(t=>{n=i.rootPath+"translations/"+i.lang+".js",fetch(n).then(t=>t.json()).then(t=>{i.tt=t,i.translationFiles=!0,e.resolve()}).catch(t=>{i.tt={},i.translationFiles=!1,e.resolve()})}),e.promise()},AblePlayer.prototype.getSampleDescriptionText=function(){if(this.translationFiles){var t,e,i,s,a;e=this.getSupportedLangs(),t=this,this.sampleText=[];for(const[n,r]of Object.entries(e))i=this.rootPath+"translations/"+n+".json",fetch(i).then(t=>t.json()).then(e=>{s=e.sampleDescriptionText,a={lang:undefined,text:s},t.sampleText.push(a)})}else{this.sampleText=[];let t={lang:"en",text:this.translate("sampleDescriptionText","Adjust settings to hear this sample text.")};this.sampleText.push(t)}}}(jQuery),function(t){AblePlayer.prototype.injectVTS=function(){var e,i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v;if(e=this,null!==document.getElementById("able-vts")&&this.vtsTracks.length){this.langs=[],this.getAllLangs(this.vtsTracks),this.vtsLang=this.lang;let w=this.translate("vtsHeading","Video Transcript Sorter");for(T in i=t("<h2>").text(w),t("#able-vts").append(i),this.$vtsAlert=t("<div>",{id:"able-vts-alert","aria-live":"polite","aria-atomic":"true"}),t("#able-vts").append(this.$vtsAlert),s=t("<div>",{id:"able-vts-instructions"}),a=t("<p>").text(this.translate("vtsInstructions1","Use the Video Transcript Sorter to modify text tracks:")),r=t("<ul>"),o=t("<li>").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.")),l=t("<li>").text(this.translate("vtsInstructions3","Modify content or start/end times (all are directly editable within the table).")),h=t("<li>").text(this.translate("vtsInstructions4","Add new content, such as chapters or descriptions.")),n=t("<p>").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.')),r.append(o,l,h),s.append(a,r,n),t("#able-vts").append(s),p=t("<fieldset>"),c=t("<legend>").text(this.translate("vtsSelectLanguage","Select a language")),p.append(c),$fieldWrapper=t('<div class="vts-lang-selector"></div>'),this.langs)d="vts-lang-radio-"+this.langs[T],u=t("<div>",{}),f=t("<input>",{type:"radio",name:"vts-lang",id:d,value:this.langs[T]}).on("click",function(){e.vtsLang=t(this).val(),e.showVtsAlert("Loading "+e.getLanguageName(e.vtsLang)+" tracks"),e.injectVtsTable("update",e.vtsLang)}),this.langs[T]==this.lang&&f.prop("checked",!0),g=t("<label>",{for:d}).text(this.getLanguageName(this.langs[T])),u.append(f,g),$fieldWrapper.append(u);p.append($fieldWrapper),t("#able-vts").append(p);let C=this.translate("vtsSave","Generate new .vtt content");var y,b,P,k,T;m=t("<button>",{type:"button",id:"able-vts-save",value:"save"}).text(C),t("#able-vts").append(m),this.injectVtsTable("add",this.vtsLang),y=["captions","chapters","descriptions","subtitles"],t('td[contenteditable="true"]').on("focus",function(){b=t(this).text()}).on("blur",function(){b!=t(this).text()&&(P=t(this).index(),k=t(this).text(),1===P?-1===t.inArray(k,y)&&("s"===k.substring(0,1)?t(this).text("subtitles"):"d"===k.substring(0,1)?t(this).text("descriptions"):"ch"===k.substring(0,2)?t(this).text("chapters"):t(this).text("captions")):2!==P&&3!==P||t(this).text(e.formatTimestamp(k)))}).on("keydown",function(t){t.stopPropagation()}),t("#able-vts-save").on("click",function(i){i.stopPropagation(),"save"==t(this).attr("value")?(t(this).attr("value","cancel").text(e.translate("vtsReturn","Return to Editor")),v=t("#able-vts table"),t("#able-vts-instructions").hide(),t("#able-vts > fieldset").hide(),t("#able-vts table").remove(),t("#able-vts-icon-credit").remove(),e.parseVtsOutput(v)):(t(this).attr("value","save").text(C),t("#able-vts-output").remove(),t("#able-vts-instructions").show(),t("#able-vts > fieldset").show(),t("#able-vts").append(v),t("#able-vts").append(e.getIconCredit()),e.showVtsAlert(e.translate("vtsCancel","Cancelling saving. Any edits you made have been restored in the VTS table.")))})}},AblePlayer.prototype.setupVtsTracks=function(t,e,i,s,a,n){var r,o;r=this.getFilenameFromPath(a),o=this.parseVtsTracks(n),this.vtsTracks.push({kind:t,language:e,label:s,srcFile:r,cues:o})},AblePlayer.prototype.getFilenameFromPath=function(t){var e;return-1===(e=t.lastIndexOf("/"))?t:t.substring(e+1)},AblePlayer.prototype.getFilenameFromTracks=function(t,e){for(var i=0;i<this.vtsTracks.length;i++)if(this.vtsTracks[i].kind===t&&this.vtsTracks[i].language===e)return this.vtsTracks[i].srcFile;return!1},AblePlayer.prototype.parseVtsTracks=function(t){var e,i,s,a,n,r,o,l,h;for(e=t.split("\n"),s=[],a=0;a<e.length;)if(-1!==(r=e[a]).indexOf(" --\x3e ")){if(i=r.trim().split(" "),this.isValidTimestamp(i[0])&&this.isValidTimestamp(i[2])){for(l="",n=a+1,h=!1;n<e.length&&!h;)(o=e[n].trim()).length>0?l.length>0?l+="\n"+o:l+=o:h=!0,n++;s.push({start:i[0],end:i[2],content:l}),a=n}}else a++;return s},AblePlayer.prototype.isValidTimestamp=function(t){return!!/^[0-9:,.]$/.test(t)},AblePlayer.prototype.formatTimestamp=function(t){var e,i;if(e=t.substring(0,t.lastIndexOf(".")+1),(i=t.substring(t.lastIndexOf(".")+1)).length>3)i=i.substring(0,3);else if(i.length<3)for(;i.length<3;)i+="0";return e+i},AblePlayer.prototype.injectVtsTable=function(e,i){var s,a,n,r,o,l,h,p,c;for("update"===e&&(t("#able-vts table").remove(),t("#able-vts-icon-credit").remove()),s=t("<table>",{lang:i}),a=t("<thead>"),o=t("<tr>"),n=[this.translate("vtsRow","Row"),this.translate("vtsKind","Kind"),this.translate("vtsStart","Start"),this.translate("vtsEnd","End"),this.translate("vtsContent","Content"),this.translate("vtsActions","Actions")],r=0;r<n.length;r++)l=t("<th>",{scope:"col"}).text(n[r]),"Actions"===n[r]&&l.addClass("actions"),o.append(l);for(a.append(o),s.append(a),p=this.getAllRows(i),r=0;r<p.length;r++)o=t("<tr>",{id:"able-vts-row-"+(c=r+1),class:"kind-"+p[r].kind}),h=t("<td>").text(c),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].kind),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].start),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].end),o.append(h),h=t("<td>",{contenteditable:"true"}).text(p[r].content),o.append(h),h=this.addVtsActionButtons(c,p.length),o.append(h),s.append(o);t("#able-vts").append(s),t("#able-vts").append(this.getIconCredit())},AblePlayer.prototype.addVtsActionButtons=function(e,i){var s,a,n,r,o,l,h,p,c,u;for(s=this,a=t("<td>"),n=["up","down","insert","delete"],r=0;r<n.length;r++)"up"===(o=n[r])?e>1&&(l=t("<button>",{id:"able-vts-button-up-"+e,title:"Move up","aria-label":"Move Row "+e+" up"}).on("click",function(t){s.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101c-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.594l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"down"===o?e<i&&(l=t("<button>",{id:"able-vts-button-down-"+e,title:"Move down","aria-label":"Move Row "+e+" down"}).on("click",function(t){s.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"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.424C1.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.428s9.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"insert"===o?(l=t("<button>",{id:"able-vts-button-insert-"+e,title:"Insert row below","aria-label":"Insert row before Row "+e}).on("click",function(t){s.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"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.414C242.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.775H27.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.411c5.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.987h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77c7.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"}),p=t("<g>").append(c),h.append(p),l.append(h),l.html(l.html()),a.append(l)):"delete"===o&&(l=t("<button>",{id:"able-vts-button-delete-"+e,title:"Delete row ","aria-label":"Delete Row "+e}).on("click",function(t){s.onClickVtsActionButton(t.currentTarget)}),h=t("<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"}),c=t("<path>",{d:"M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607C429.063,46.021,414.825,31.782,397.281,31.782z"}),u=t("<path>",{d:"M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042c17.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.891c8.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.804zM238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26c0,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.804c0-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.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z"}),p=t("<g>").append(c,u),h.append(p),l.append(h),l.html(l.html()),a.append(l));return a},AblePlayer.prototype.updateVtsActionButtons=function(t,e){var i,s,a,n,r,o;for(i=0;i<t.length;i++)a=(s=t.eq(i)).attr("id"),n=s.attr("aria-label"),r=a.replace(/[0-9]+/g,e),o=n.replace(/[0-9]+/g,e),s.attr("id",r),s.attr("aria-label",o)},AblePlayer.prototype.getIconCredit=function(){return'<div id="able-vts-icon-credit">Action buttons made by <a target="_blank" rel="noreferrer" href="https://www.elegantthemes.com">Elegant Themes</a> from <a target="_blank" rel="noreferrer" href="https://www.flaticon.com">flaticon</a> are licensed by <a target="_blank" rel="noreferrer" href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a></div>'},AblePlayer.prototype.getAllLangs=function(e){var i;for(i in e)e[i].hasOwnProperty("language")&&-1===t.inArray(e[i].language,this.langs)&&(this.langs[this.langs.length]=e[i].language)},AblePlayer.prototype.getAllRows=function(t){var e,i,s,a;for(a=[],e=0;e<this.vtsTracks.length;e++)if((i=this.vtsTracks[e]).language==t)for(s in i.cues)a.push({kind:i.kind,lang:t,id:i.cues[s].id,start:i.cues[s].start,end:i.cues[s].end,content:i.cues[s].content});return a.sort(function(t,e){return t.start>e.start?1:-1}),a},AblePlayer.prototype.onClickVtsActionButton=function(e){var i,s,a;s=(i=t(e).attr("id").split("-"))[3],a=i[4],"up"==s?this.moveRow(a,"up"):"down"==s?this.moveRow(a,"down"):"insert"==s?this.insertRow(a):"delete"==s&&this.deleteRow(a)},AblePlayer.prototype.insertRow=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,g,f,m;for(a=(s=(i=t("#able-vts table")).find("tr")).length-1,n=parseInt(e)+1,r=t("<tr>",{id:"able-vts-row-"+n}),o=t("<td>").text(n),r.append(o),u=null,l=t("<select>",{id:"able-vts-kind-"+n,"aria-label":"What kind of track is this?",placeholder:"Select a kind"}).on("change",function(){u=t(this).val(),d="kind-"+u,g=t(this).closest("tr"),t(this).parent().text(u),g.addClass(d)}),h=["","captions","chapters","descriptions","subtitles"],p=0;p<h.length;p++)c=t("<option>",{value:h[p]}).text(h[p]),l.append(c);for(o=t("<td>").append(l),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=t("<td>",{contenteditable:"true"}),r.append(o),o=this.addVtsActionButtons(n,a),r.append(o),i.find("tr").eq(e).after(r),p=n;p<=a;p++)f=p+1,s.eq(p).attr("id","able-vts-row-"+f),s.eq(p).find("td").eq(0).text(f),m=s.eq(p).find("button"),this.updateVtsActionButtons(m,f);this.adjustTimes(n);let v=this.translate("vtsNewRow","A new row %1 has been inserted.",[n]);this.showVtsAlert(v),l.trigger("focus")},AblePlayer.prototype.deleteRow=function(e){var i,s,a,n,r,o;for((i=t("#able-vts table"))[0].deleteRow(e),a=(s=i.find("tr")).length-1,n=e;n<=a;n++)r=n,s.eq(n).attr("id","able-vts-row-"+r),s.eq(n).find("td").eq(0).text(r),o=s.eq(n).find("button"),this.updateVtsActionButtons(o,r);let l=this.translate("vtsDeletedRow","Row %1 has been deleted.",[e]);this.showVtsAlert(l)},AblePlayer.prototype.moveRow=function(e,i){var s,a,n,r;t("#able-vts table").find("tr"),s=t("#able-vts table").find("tr").eq(e),"up"==i?(a=parseInt(e)-1,(n=t("#able-vts table").find("tr").eq(a)).before(s)):"down"==i&&(a=parseInt(e)+1,(n=t("#able-vts table").find("tr").eq(a)).after(s)),s.attr("id","able-vts-row-"+a),s.find("td").eq(0).text(a),this.updateVtsActionButtons(s.find("button"),a),n.attr("id","able-vts-row-"+e),n.find("td").eq(0).text(e),this.updateVtsActionButtons(n.find("button"),e),this.adjustTimes(a),r=this.translate("vtsMovedRow","Row %1 has been moved %2 and is now Row %3.",[e,i,a]),this.showVtsAlert(r)},AblePlayer.prototype.adjustTimes=function(e){var i,s,a,n,r,o,l,h,p,c,u,d,g,f,m,v;(i=[]).captions=.001,i.descriptions=.001,i.chapters=.001,h=(r=(s=t("#able-vts table").find("tr")).eq(e)).is('[class^="kind-"]')?this.getKindFromClass(r.attr("class")):"captions",u=this.getSecondsFromColonTime(r.find("td").eq(2).text()),f=this.getSecondsFromColonTime(r.find("td").eq(3).text()),e>1?(a=e-1,p=(o=s.eq(a)).is('[class^="kind-"]')?this.getKindFromClass(o.attr("class")):null,d=this.getSecondsFromColonTime(o.find("td").eq(2).text()),m=this.getSecondsFromColonTime(o.find("td").eq(3).text())):(a=null,o=null,p=null,d=null,m=null),e<s.length-1?(n=e+1,c=(l=s.eq(n)).is('[class^="kind-"]')?this.getKindFromClass(l.attr("class")):null,g=this.getSecondsFromColonTime(l.find("td").eq(2).text()),v=this.getSecondsFromColonTime(l.find("td").eq(3).text())):(n=null,l=null,c=null,g=null,v=null),isNaN(u)?(null==p&&(p="captions",o.attr("class","kind-captions"),o.find("td").eq(1).html("captions")),"captions"===p?(u=(parseFloat(m)+.001).toFixed(3),f=g?(parseFloat(g)-.001).toFixed(3):(parseFloat(u)+i[h]).toFixed(3)):"chapters"===p?(u=(parseFloat(d)+.001).toFixed(3),f=g?(parseFloat(g)-.001).toFixed(3):(parseFloat(u)+minDurartion[h]).toFixed(3)):"descriptions"===p&&(u=(parseFloat(d)+i.descriptions).toFixed(3),f=(parseFloat(u)+i.descriptions).toFixed(3))):d?d<u?u<g||(g=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(g)+i[c]).toFixed(3)):(u=(parseFloat(d)+i[p]).toFixed(3),f=(parseFloat(u)+i[h]).toFixed(3)):u<g||(g=(parseFloat(u)+i[h]).toFixed(3),v=(parseFloat(g)+i[c]).toFixed(3)),f-u<i[h]&&(f=(parseFloat(u)+i[h]).toFixed(3),g&&(g=(parseFloat(f)+.001).toFixed(3))),r.find("td").eq(2).text(this.formatSecondsAsColonTime(u,!0)),r.find("td").eq(3).text(this.formatSecondsAsColonTime(f,!0)),o&&(o.find("td").eq(2).text(this.formatSecondsAsColonTime(d,!0)),o.find("td").eq(3).text(this.formatSecondsAsColonTime(m,!0))),l&&(l.find("td").eq(2).text(this.formatSecondsAsColonTime(g,!0)),l.find("td").eq(3).text(this.formatSecondsAsColonTime(v,!0)))},AblePlayer.prototype.getKindFromClass=function(t){var e,i;return e=t.indexOf("kind-")+5,-1==(i=t.indexOf(" ",e))?t.substring(e):t.substring(e,i)},AblePlayer.prototype.showVtsAlert=function(t){var e;this.$vtsAlert.text(t).show(),(e=1e4,new Promise(t=>setTimeout(t,e))).then(()=>{this.$vtsAlert.text(t).hide()})},AblePlayer.prototype.parseVtsOutput=function(e){var i,s,a,n,r,o,l,h,p,c;for(i=e.attr("lang"),a=["captions","chapters","descriptions","subtitles"],r={},s=0;s<a.length;s++)r[n=a[s]]="WEBVTT\n\n";if((o=e.find("tr")).length>0)for(s=0;s<o.length;s++)n=o.eq(s).find("td").eq(1).text(),-1!==t.inArray(n,a)&&(l=o.eq(s).find("td").eq(2).text(),h=o.eq(s).find("td").eq(3).text(),p=o.eq(s).find("td").eq(4)[0].innerText,void 0!==l&&void 0!==h&&(r[n]+=l+" --\x3e "+h+"\n","undefined"!==p&&(r[n]+=p),r[n]+="\n\n"));for(c=t("<div>",{id:"able-vts-output"}),t("#able-vts").append(c),s=0;s<a.length;s++)r[n=a[s]].length>8&&this.showWebVttOutput(n,r[n],i)},AblePlayer.prototype.showWebVttOutput=function(e,i,s){var a,n,r,o,l;a=t("<h3>").text(this.capitalizeFirstLetter(e)),o="If you made changes, copy/paste the following content ",(n=this.getFilenameFromTracks(e,s))?(o+="to replace the original content of your "+this.getLanguageName(s)+" ",o+="<em>"+e+"</em> WebVTT file (<strong>"+n+"</strong>)."):o+="into a new "+this.getLanguageName(s)+" <em>"+e+"</em> WebVTT file.",r=t("<p>",{class:"able-vts-output-instructions"}).html(o),l=t("<textarea>").text(i),t("#able-vts-output").append(a,r,l)}}(jQuery),function(t){AblePlayer.prototype.initVimeoPlayer=function(){var e,i,s,a,n,r;return e=this,s=(i=new this.defer).promise(),a=this.mediaId+"_vimeo",this.$mediaContainer.prepend(t("<div>").attr("id",a)),n=this.vimeoDescId&&this.prefDesc?this.vimeoDescId:this.vimeoId,this.activeVimeoId=n,autoplay=this.okToPlay?"true":"false",r=this.playerWidth?this.vimeoUrlHasParams?{url:n,width:this.playerWidth,controls:!1}:{id:n,width:this.playerWidth,controls:!1}:this.vimeoUrlHasParams?{url:n,controls:!1}:{id:n,controls:!1},this.vimeoPlayer=new Vimeo.Player(a,r),this.vimeoPlayer.ready().then(function(){t("#"+a).children("iframe").attr({tabindex:"-1","aria-hidden":!0}),e.vimeoPlayer.getVideoWidth().then(function(t){t&&e.vimeoPlayer.getVideoHeight().then(function(i){i&&e.resizePlayer(t,i)})}).catch(function(t){}),e.hasPlaylist||(e.$media.remove(),e.vimeoPlaybackRate=1,e.vimeoPlayer.setPlaybackRate(e.vimeoPlaybackRate).then(function(t){e.vimeoSupportsPlaybackRateChange=!0}).catch(function(t){e.vimeoSupportsPlaybackRateChange=!1}),i.resolve())}),s},AblePlayer.prototype.getVimeoPaused=function(){var t,e;return e=(t=new this.defer).promise(),this.vimeoPlayer.getPaused().then(function(e){t.resolve(e)}),e},AblePlayer.prototype.getVimeoEnded=function(){var t,e;return e=(t=new this.defer).promise(),this.vimeoPlayer.getEnded().then(function(e){t.resolve(e)}),e},AblePlayer.prototype.getVimeoState=function(){var e,i,s,a,n;return i=(e=new this.defer).promise(),s=[],a=this.vimeoPlayer.getPaused(),n=this.vimeoPlayer.getEnded(),s.push(a),s.push(n),a.then(function(t){e.resolve(t)}),n.then(function(t){e.resolve(t)}),t.when.apply(t,s).then(function(){e.resolve()}),i},AblePlayer.prototype.getVimeoCaptionTracks=function(){var t,e,i,s=new this.defer,a=s.promise();return t=this,this.vimeoPlayer.getTextTracks().then(function(a){if(a.length){for(e=0;e<a.length;e++)t.hasCaptions=!0,1===t.prefCaptions?t.captionsOn=!0:t.captionsOn=!1,i=a[e].language===t.lang,t.tracks.push({kind:a[e].kind,language:a[e].language,label:a[e].label,def:i});t.captions=t.tracks,t.hasCaptions=!0,t.setupPopups("captions"),s.resolve()}else t.hasCaptions=!1,t.usingVimeoCaptions=!1,s.resolve()}),a},AblePlayer.prototype.getVimeoPosterUrl=function(t,e){var i="";return fetch("http://vimeo.com/api/oembed.json?url=https://vimeo.com/"+t).then(t=>t.json()).then(t=>{i=t.thumbnail_url}).catch(t=>{thisObj.debug}),i},AblePlayer.prototype.getVimeoId=function(t){return this.vimeoUrlHasParams=!1,"number"==typeof t?t:(urlObject=new URL(t),"vimeo.com"===urlObject.hostname||"player.vimeo.com"===urlObject.hostname?""!==urlObject.search?(this.vimeoUrlHasParams=!0,t):"player.vimeo.com"===urlObject.hostname?urlObject.pathname.replace("/video/",""):urlObject.pathname.replace("/",""):t)}}(jQuery); \ No newline at end of file diff --git a/src/build/separate-dompurify/purify.min.js b/src/build/separate-dompurify/purify.min.js index 950b98f..7f9a438 100644 --- a/src/build/separate-dompurify/purify.min.js +++ b/src/build/separate-dompurify/purify.min.js @@ -1,2 +1,2 @@ -/! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE / -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).DOMPurify=t()}(this,(function(){"use strict";const{entries:e,setPrototypeOf:t,isFrozen:n,getPrototypeOf:o,getOwnPropertyDescriptor:a}=Object;let{freeze:r,seal:i,create:l}=Object,{apply:c,construct:s}="undefined"!=typeof Reflect&&Reflect;r||(r=function freeze(e){return e}),i||(i=function seal(e){return e}),c||(c=function apply(e,t,n){return e.apply(t,n)}),s||(s=function construct(e,t){return new e(...t)});const u=unapply(Array.prototype.forEach),d=unapply(Array.prototype.lastIndexOf),p=unapply(Array.prototype.pop),m=unapply(Array.prototype.push),f=unapply(Array.prototype.splice),h=unapply(String.prototype.toLowerCase),T=unapply(String.prototype.toString),g=unapply(String.prototype.match),y=unapply(String.prototype.replace),S=unapply(String.prototype.indexOf),_=unapply(String.prototype.trim),E=unapply(Object.prototype.hasOwnProperty),A=unapply(RegExp.prototype.test),b=function unconstruct(e){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return s(e,n)}}(TypeError);function unapply(e){return function(t){for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a<n;a++)o[a-1]=arguments[a];return c(e,t,o)}}function addToSet(e,o){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:h;t&&t(e,null);let r=o.length;for(;r--;){let t=o[r];if("string"==typeof t){const e=a(t);e!==t&&(n(o)||(o[r]=e),t=e)}e[t]=!0}return e}function cleanArray(e){for(let t=0;t<e.length;t++){E(e,t)||(e[t]=null)}return e}function clone(t){const n=l(null);for(const[o,a]of e(t)){E(t,o)&&(Array.isArray(a)?n[o]=cleanArray(a):a&&"object"==typeof a&&a.constructor===Object?n[o]=clone(a):n[o]=a)}return n}function lookupGetter(e,t){for(;null!==e;){const n=a(e,t);if(n){if(n.get)return unapply(n.get);if("function"==typeof n.value)return unapply(n.value)}e=o(e)}return function fallbackValue(){return null}}const N=r(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","section","select","shadow","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),R=r(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","filter","font","g","glyph","glyphref","hkern","image","line","lineargradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),w=r(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),O=r(["animate","color-profile","cursor","discard","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),k=r(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]),D=r(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),x=r(["#text"]),v=r(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","face","for","headers","height","hidden","high","href","hreflang","id","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns","slot"]),C=r(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),L=r(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),M=r(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),I=i(/\{\{[\w\W]|[\w\W]\}\}/gm),z=i(/<%[\w\W]|[\w\W]%>/gm),P=i(/\$\{[\w\W]/gm),U=i(/^data-[\-\w.\u00B7-\uFFFF]+$/),H=i(/^aria-[\-\w]+$/),F=i(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),G=i(/^(?:\w+script|data):/i),B=i(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),W=i(/^html$/i),Y=i(/^[a-z][.\w](-[.\w]+)+$/i);var j=Object.freeze({proto:null,ARIA_ATTR:H,ATTR_WHITESPACE:B,CUSTOM_ELEMENT:Y,DATA_ATTR:U,DOCTYPE_NAME:W,ERB_EXPR:z,IS_ALLOWED_URI:F,IS_SCRIPT_OR_DATA:G,MUSTACHE_EXPR:I,TMPLIT_EXPR:P});const X=1,q=3,V=7,$=8,K=9,Z=function getGlobal(){return"undefined"==typeof window?null:window};var J=function createDOMPurify(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Z();const DOMPurify=e=>createDOMPurify(e);if(DOMPurify.version="3.2.4",DOMPurify.removed=[],!t||!t.document||t.document.nodeType!==K||!t.Element)return DOMPurify.isSupported=!1,DOMPurify;let{document:n}=t;const o=n,a=o.currentScript,{DocumentFragment:i,HTMLTemplateElement:c,Node:s,Element:I,NodeFilter:z,NamedNodeMap:P=t.NamedNodeMap||t.MozNamedAttrMap,HTMLFormElement:U,DOMParser:H,trustedTypes:G}=t,B=I.prototype,Y=lookupGetter(B,"cloneNode"),J=lookupGetter(B,"remove"),Q=lookupGetter(B,"nextSibling"),ee=lookupGetter(B,"childNodes"),te=lookupGetter(B,"parentNode");if("function"==typeof c){const e=n.createElement("template");e.content&&e.content.ownerDocument&&(n=e.content.ownerDocument)}let ne,oe="";const{implementation:ae,createNodeIterator:re,createDocumentFragment:ie,getElementsByTagName:le}=n,{importNode:ce}=o;let se={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]};DOMPurify.isSupported="function"==typeof e&&"function"==typeof te&&ae&&void 0!==ae.createHTMLDocument;const{MUSTACHE_EXPR:ue,ERB_EXPR:de,TMPLIT_EXPR:pe,DATA_ATTR:me,ARIA_ATTR:fe,IS_SCRIPT_OR_DATA:he,ATTR_WHITESPACE:Te,CUSTOM_ELEMENT:ge}=j;let{IS_ALLOWED_URI:ye}=j,Se=null;const _e=addToSet({},[...N,...R,...w,...k,...x]);let Ee=null;const Ae=addToSet({},[...v,...C,...L,...M]);let be=Object.seal(l(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),Ne=null,Re=null,we=!0,Oe=!0,ke=!1,De=!0,xe=!1,ve=!0,Ce=!1,Le=!1,Me=!1,Ie=!1,ze=!1,Pe=!1,Ue=!0,He=!1,Fe=!0,Ge=!1,Be={},We=null;const Ye=addToSet({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]);let je=null;const Xe=addToSet({},["audio","video","img","source","image","track"]);let qe=null;const Ve=addToSet({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),$e="http://www.w3.org/1998/Math/MathML",Ke="http://www.w3.org/2000/svg",Ze="http://www.w3.org/1999/xhtml";let Je=Ze,Qe=!1,et=null;const tt=addToSet({},[$e,Ke,Ze],T);let nt=addToSet({},["mi","mo","mn","ms","mtext"]),ot=addToSet({},["annotation-xml"]);const at=addToSet({},["title","style","font","a","script"]);let rt=null;const it=["application/xhtml+xml","text/html"];let lt=null,ct=null;const st=n.createElement("form"),ut=function isRegexOrFunction(e){return e instanceof RegExp||e instanceof Function},dt=function _parseConfig(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!ct||ct!==e){if(e&&"object"==typeof e||(e={}),e=clone(e),rt=-1===it.indexOf(e.PARSER_MEDIA_TYPE)?"text/html":e.PARSER_MEDIA_TYPE,lt="application/xhtml+xml"===rt?T:h,Se=E(e,"ALLOWED_TAGS")?addToSet({},e.ALLOWED_TAGS,lt):_e,Ee=E(e,"ALLOWED_ATTR")?addToSet({},e.ALLOWED_ATTR,lt):Ae,et=E(e,"ALLOWED_NAMESPACES")?addToSet({},e.ALLOWED_NAMESPACES,T):tt,qe=E(e,"ADD_URI_SAFE_ATTR")?addToSet(clone(Ve),e.ADD_URI_SAFE_ATTR,lt):Ve,je=E(e,"ADD_DATA_URI_TAGS")?addToSet(clone(Xe),e.ADD_DATA_URI_TAGS,lt):Xe,We=E(e,"FORBID_CONTENTS")?addToSet({},e.FORBID_CONTENTS,lt):Ye,Ne=E(e,"FORBID_TAGS")?addToSet({},e.FORBID_TAGS,lt):{},Re=E(e,"FORBID_ATTR")?addToSet({},e.FORBID_ATTR,lt):{},Be=!!E(e,"USE_PROFILES")&&e.USE_PROFILES,we=!1!==e.ALLOW_ARIA_ATTR,Oe=!1!==e.ALLOW_DATA_ATTR,ke=e.ALLOW_UNKNOWN_PROTOCOLS||!1,De=!1!==e.ALLOW_SELF_CLOSE_IN_ATTR,xe=e.SAFE_FOR_TEMPLATES||!1,ve=!1!==e.SAFE_FOR_XML,Ce=e.WHOLE_DOCUMENT||!1,Ie=e.RETURN_DOM||!1,ze=e.RETURN_DOM_FRAGMENT||!1,Pe=e.RETURN_TRUSTED_TYPE||!1,Me=e.FORCE_BODY||!1,Ue=!1!==e.SANITIZE_DOM,He=e.SANITIZE_NAMED_PROPS||!1,Fe=!1!==e.KEEP_CONTENT,Ge=e.IN_PLACE||!1,ye=e.ALLOWED_URI_REGEXP||F,Je=e.NAMESPACE||Ze,nt=e.MATHML_TEXT_INTEGRATION_POINTS||nt,ot=e.HTML_INTEGRATION_POINTS||ot,be=e.CUSTOM_ELEMENT_HANDLING||{},e.CUSTOM_ELEMENT_HANDLING&&ut(e.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(be.tagNameCheck=e.CUSTOM_ELEMENT_HANDLING.tagNameCheck),e.CUSTOM_ELEMENT_HANDLING&&ut(e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(be.attributeNameCheck=e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),e.CUSTOM_ELEMENT_HANDLING&&"boolean"==typeof e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements&&(be.allowCustomizedBuiltInElements=e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),xe&&(Oe=!1),ze&&(Ie=!0),Be&&(Se=addToSet({},x),Ee=[],!0===Be.html&&(addToSet(Se,N),addToSet(Ee,v)),!0===Be.svg&&(addToSet(Se,R),addToSet(Ee,C),addToSet(Ee,M)),!0===Be.svgFilters&&(addToSet(Se,w),addToSet(Ee,C),addToSet(Ee,M)),!0===Be.mathMl&&(addToSet(Se,k),addToSet(Ee,L),addToSet(Ee,M))),e.ADD_TAGS&&(Se===_e&&(Se=clone(Se)),addToSet(Se,e.ADD_TAGS,lt)),e.ADD_ATTR&&(Ee===Ae&&(Ee=clone(Ee)),addToSet(Ee,e.ADD_ATTR,lt)),e.ADD_URI_SAFE_ATTR&&addToSet(qe,e.ADD_URI_SAFE_ATTR,lt),e.FORBID_CONTENTS&&(We===Ye&&(We=clone(We)),addToSet(We,e.FORBID_CONTENTS,lt)),Fe&&(Se["#text"]=!0),Ce&&addToSet(Se,["html","head","body"]),Se.table&&(addToSet(Se,["tbody"]),delete Ne.tbody),e.TRUSTED_TYPES_POLICY){if("function"!=typeof e.TRUSTED_TYPES_POLICY.createHTML)throw b('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');if("function"!=typeof e.TRUSTED_TYPES_POLICY.createScriptURL)throw b('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');ne=e.TRUSTED_TYPES_POLICY,oe=ne.createHTML("")}else void 0===ne&&(ne=function _createTrustedTypesPolicy(e,t){if("object"!=typeof e||"function"!=typeof e.createPolicy)return null;let n=null;const o="data-tt-policy-suffix";t&&t.hasAttribute(o)&&(n=t.getAttribute(o));const a="dompurify"+(n?"#"+n:"");try{return e.createPolicy(a,{createHTML:e=>e,createScriptURL:e=>e})}catch(e){return console.warn("TrustedTypes policy "+a+" could not be created."),null}}(G,a)),null!==ne&&"string"==typeof oe&&(oe=ne.createHTML(""));r&&r(e),ct=e}},pt=addToSet({},[...R,...w,...O]),mt=addToSet({},[...k,...D]),ft=function _forceRemove(e){m(DOMPurify.removed,{element:e});try{te(e).removeChild(e)}catch(t){J(e)}},ht=function _removeAttribute(e,t){try{m(DOMPurify.removed,{attribute:t.getAttributeNode(e),from:t})}catch(e){m(DOMPurify.removed,{attribute:null,from:t})}if(t.removeAttribute(e),"is"===e)if(Ie||ze)try{ft(t)}catch(e){}else try{t.setAttribute(e,"")}catch(e){}},Tt=function _initDocument(e){let t=null,o=null;if(Me)e="<remove></remove>"+e;else{const t=g(e,/^[\r\n\t ]+/);o=t&&t[0]}"application/xhtml+xml"===rt&&Je===Ze&&(e='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+e+"</body></html>");const a=ne?ne.createHTML(e):e;if(Je===Ze)try{t=(new H).parseFromString(a,rt)}catch(e){}if(!t||!t.documentElement){t=ae.createDocument(Je,"template",null);try{t.documentElement.innerHTML=Qe?oe:a}catch(e){}}const r=t.body||t.documentElement;return e&&o&&r.insertBefore(n.createTextNode(o),r.childNodes[0]||null),Je===Ze?le.call(t,Ce?"html":"body")[0]:Ce?t.documentElement:r},gt=function _createNodeIterator(e){return re.call(e.ownerDocument||e,e,z.SHOW_ELEMENT|z.SHOW_COMMENT|z.SHOW_TEXT|z.SHOW_PROCESSING_INSTRUCTION|z.SHOW_CDATA_SECTION,null)},yt=function _isClobbered(e){return e instanceof U&&("string"!=typeof e.nodeName||"string"!=typeof e.textContent||"function"!=typeof e.removeChild||!(e.attributes instanceof P)||"function"!=typeof e.removeAttribute||"function"!=typeof e.setAttribute||"string"!=typeof e.namespaceURI||"function"!=typeof e.insertBefore||"function"!=typeof e.hasChildNodes)},St=function _isNode(e){return"function"==typeof s&&e instanceof s};function _executeHooks(e,t,n){u(e,(e=>{e.call(DOMPurify,t,n,ct)}))}const _t=function _sanitizeElements(e){let t=null;if(_executeHooks(se.beforeSanitizeElements,e,null),yt(e))return ft(e),!0;const n=lt(e.nodeName);if(_executeHooks(se.uponSanitizeElement,e,{tagName:n,allowedTags:Se}),e.hasChildNodes()&&!St(e.firstElementChild)&&A(/<[/\w]/g,e.innerHTML)&&A(/<[/\w]/g,e.textContent))return ft(e),!0;if(e.nodeType===V)return ft(e),!0;if(ve&&e.nodeType===$&&A(/<[/\w]/g,e.data))return ft(e),!0;if(!Se[n]||Ne[n]){if(!Ne[n]&&At(n)){if(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,n))return!1;if(be.tagNameCheck instanceof Function&&be.tagNameCheck(n))return!1}if(Fe&&!We[n]){const t=te(e)||e.parentNode,n=ee(e)||e.childNodes;if(n&&t){for(let o=n.length-1;o>=0;--o){const a=Y(n[o],!0);a.removalCount=(e.removalCount||0)+1,t.insertBefore(a,Q(e))}}}return ft(e),!0}return e instanceof I&&!function _checkValidNamespace(e){let t=te(e);t&&t.tagName||(t={namespaceURI:Je,tagName:"template"});const n=h(e.tagName),o=h(t.tagName);return!!et[e.namespaceURI]&&(e.namespaceURI===Ke?t.namespaceURI===Ze?"svg"===n:t.namespaceURI===$e?"svg"===n&&("annotation-xml"===o||nt[o]):Boolean(pt[n]):e.namespaceURI===$e?t.namespaceURI===Ze?"math"===n:t.namespaceURI===Ke?"math"===n&&ot[o]:Boolean(mt[n]):e.namespaceURI===Ze?!(t.namespaceURI===Ke&&!ot[o])&&!(t.namespaceURI===$e&&!nt[o])&&!mt[n]&&(at[n]||!pt[n]):!("application/xhtml+xml"!==rt||!et[e.namespaceURI]))}(e)?(ft(e),!0):"noscript"!==n&&"noembed"!==n&&"noframes"!==n||!A(/<\/no(script|embed|frames)/i,e.innerHTML)?(xe&&e.nodeType===q&&(t=e.textContent,u([ue,de,pe],(e=>{t=y(t,e," ")})),e.textContent!==t&&(m(DOMPurify.removed,{element:e.cloneNode()}),e.textContent=t)),_executeHooks(se.afterSanitizeElements,e,null),!1):(ft(e),!0)},Et=function _isValidAttribute(e,t,o){if(Ue&&("id"===t||"name"===t)&&(o in n||o in st))return!1;if(Oe&&!Re[t]&&A(me,t));else if(we&&A(fe,t));else if(!Ee[t]||Re[t]){if(!(At(e)&&(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,e)||be.tagNameCheck instanceof Function&&be.tagNameCheck(e))&&(be.attributeNameCheck instanceof RegExp&&A(be.attributeNameCheck,t)||be.attributeNameCheck instanceof Function&&be.attributeNameCheck(t))||"is"===t&&be.allowCustomizedBuiltInElements&&(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,o)||be.tagNameCheck instanceof Function&&be.tagNameCheck(o))))return!1}else if(qe[t]);else if(A(ye,y(o,Te,"")));else if("src"!==t&&"xlink:href"!==t&&"href"!==t||"script"===e||0!==S(o,"data:")||!je[e]){if(ke&&!A(he,y(o,Te,"")));else if(o)return!1}else;return!0},At=function _isBasicCustomElement(e){return"annotation-xml"!==e&&g(e,ge)},bt=function _sanitizeAttributes(e){_executeHooks(se.beforeSanitizeAttributes,e,null);const{attributes:t}=e;if(!t||yt(e))return;const n={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:Ee,forceKeepAttr:void 0};let o=t.length;for(;o--;){const a=t[o],{name:r,namespaceURI:i,value:l}=a,c=lt(r);let s="value"===r?l:_(l);if(n.attrName=c,n.attrValue=s,n.keepAttr=!0,n.forceKeepAttr=void 0,_executeHooks(se.uponSanitizeAttribute,e,n),s=n.attrValue,!He||"id"!==c&&"name"!==c||(ht(r,e),s="user-content-"+s),ve&&A(/((--!?|])>)|<\/(style|title)/i,s)){ht(r,e);continue}if(n.forceKeepAttr)continue;if(ht(r,e),!n.keepAttr)continue;if(!De&&A(/\/>/i,s)){ht(r,e);continue}xe&&u([ue,de,pe],(e=>{s=y(s,e," ")}));const d=lt(e.nodeName);if(Et(d,c,s)){if(ne&&"object"==typeof G&&"function"==typeof G.getAttributeType)if(i);else switch(G.getAttributeType(d,c)){case"TrustedHTML":s=ne.createHTML(s);break;case"TrustedScriptURL":s=ne.createScriptURL(s)}try{i?e.setAttributeNS(i,r,s):e.setAttribute(r,s),yt(e)?ft(e):p(DOMPurify.removed)}catch(e){}}}_executeHooks(se.afterSanitizeAttributes,e,null)},Nt=function _sanitizeShadowDOM(e){let t=null;const n=gt(e);for(_executeHooks(se.beforeSanitizeShadowDOM,e,null);t=n.nextNode();)_executeHooks(se.uponSanitizeShadowNode,t,null),_t(t),bt(t),t.content instanceof i&&_sanitizeShadowDOM(t.content);_executeHooks(se.afterSanitizeShadowDOM,e,null)};return DOMPurify.sanitize=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=null,a=null,r=null,l=null;if(Qe=!e,Qe&&(e="\x3c!--\x3e"),"string"!=typeof e&&!St(e)){if("function"!=typeof e.toString)throw b("toString is not a function");if("string"!=typeof(e=e.toString()))throw b("dirty is not a string, aborting")}if(!DOMPurify.isSupported)return e;if(Le||dt(t),DOMPurify.removed=[],"string"==typeof e&&(Ge=!1),Ge){if(e.nodeName){const t=lt(e.nodeName);if(!Se[t]||Ne[t])throw b("root node is forbidden and cannot be sanitized in-place")}}else if(e instanceof s)n=Tt("\x3c!----\x3e"),a=n.ownerDocument.importNode(e,!0),a.nodeType===X&&"BODY"===a.nodeName||"HTML"===a.nodeName?n=a:n.appendChild(a);else{if(!Ie&&!xe&&!Ce&&-1===e.indexOf("<"))return ne&&Pe?ne.createHTML(e):e;if(n=Tt(e),!n)return Ie?null:Pe?oe:""}n&&Me&&ft(n.firstChild);const c=gt(Ge?e:n);for(;r=c.nextNode();)_t(r),bt(r),r.content instanceof i&&Nt(r.content);if(Ge)return e;if(Ie){if(ze)for(l=ie.call(n.ownerDocument);n.firstChild;)l.appendChild(n.firstChild);else l=n;return(Ee.shadowroot||Ee.shadowrootmode)&&(l=ce.call(o,l,!0)),l}let d=Ce?n.outerHTML:n.innerHTML;return Ce&&Se["!doctype"]&&n.ownerDocument&&n.ownerDocument.doctype&&n.ownerDocument.doctype.name&&A(W,n.ownerDocument.doctype.name)&&(d="<!DOCTYPE "+n.ownerDocument.doctype.name+">\n"+d),xe&&u([ue,de,pe],(e=>{d=y(d,e," ")})),ne&&Pe?ne.createHTML(d):d},DOMPurify.setConfig=function(){dt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),Le=!0},DOMPurify.clearConfig=function(){ct=null,Le=!1},DOMPurify.isValidAttribute=function(e,t,n){ct||dt({});const o=lt(e),a=lt(t);return Et(o,a,n)},DOMPurify.addHook=function(e,t){"function"==typeof t&&m(se[e],t)},DOMPurify.removeHook=function(e,t){if(void 0!==t){const n=d(se[e],t);return-1===n?void 0:f(se[e],n,1)[0]}return p(se[e])},DOMPurify.removeHooks=function(e){se[e]=[]},DOMPurify.removeAllHooks=function(){se={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}},DOMPurify}();return J})); \ No newline at end of file +/! @license DOMPurify 3.3.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.1/LICENSE / +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).DOMPurify=t()}(this,function(){"use strict";const{entries:e,setPrototypeOf:t,isFrozen:n,getPrototypeOf:o,getOwnPropertyDescriptor:a}=Object;let{freeze:r,seal:i,create:l}=Object,{apply:c,construct:s}="undefined"!=typeof Reflect&&Reflect;r||(r=function freeze(e){return e}),i||(i=function seal(e){return e}),c||(c=function apply(e,t){for(var n=arguments.length,o=new Array(n>2?n-2:0),a=2;a<n;a++)o[a-2]=arguments[a];return e.apply(t,o)}),s||(s=function construct(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];return new e(...n)});const u=unapply(Array.prototype.forEach),p=unapply(Array.prototype.lastIndexOf),d=unapply(Array.prototype.pop),m=unapply(Array.prototype.push),f=unapply(Array.prototype.splice),h=unapply(String.prototype.toLowerCase),T=unapply(String.prototype.toString),g=unapply(String.prototype.match),y=unapply(String.prototype.replace),S=unapply(String.prototype.indexOf),_=unapply(String.prototype.trim),E=unapply(Object.prototype.hasOwnProperty),A=unapply(RegExp.prototype.test),b=function unconstruct(e){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return s(e,n)}}(TypeError);function unapply(e){return function(t){t instanceof RegExp&&(t.lastIndex=0);for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a<n;a++)o[a-1]=arguments[a];return c(e,t,o)}}function addToSet(e,o){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:h;t&&t(e,null);let r=o.length;for(;r--;){let t=o[r];if("string"==typeof t){const e=a(t);e!==t&&(n(o)||(o[r]=e),t=e)}e[t]=!0}return e}function cleanArray(e){for(let t=0;t<e.length;t++){E(e,t)||(e[t]=null)}return e}function clone(t){const n=l(null);for(const[o,a]of e(t)){E(t,o)&&(Array.isArray(a)?n[o]=cleanArray(a):a&&"object"==typeof a&&a.constructor===Object?n[o]=clone(a):n[o]=a)}return n}function lookupGetter(e,t){for(;null!==e;){const n=a(e,t);if(n){if(n.get)return unapply(n.get);if("function"==typeof n.value)return unapply(n.value)}e=o(e)}return function fallbackValue(){return null}}const N=r(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","search","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),D=r(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","enterkeyhint","exportparts","filter","font","g","glyph","glyphref","hkern","image","inputmode","line","lineargradient","marker","mask","metadata","mpath","part","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),k=r(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),R=r(["animate","color-profile","cursor","discard","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),w=r(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]),O=r(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),x=r(["#text"]),C=r(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","exportparts","face","for","headers","height","hidden","high","href","hreflang","id","inert","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","part","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","slot","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns","slot"]),v=r(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","mask-type","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),L=r(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),M=r(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),I=i(/\{\{[\w\W]|[\w\W]\}\}/gm),z=i(/<%[\w\W]|[\w\W]%>/gm),P=i(/\$\{[\w\W]/gm),U=i(/^data-[\-\w.\u00B7-\uFFFF]+$/),H=i(/^aria-[\-\w]+$/),F=i(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),G=i(/^(?:\w+script|data):/i),B=i(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),W=i(/^html$/i),Y=i(/^[a-z][.\w]*(-[.\w]+)+$/i);var j=Object.freeze({proto:null,ARIA_ATTR:H,ATTR_WHITESPACE:B,CUSTOM_ELEMENT:Y,DATA_ATTR:U,DOCTYPE_NAME:W,ERB_EXPR:z,IS_ALLOWED_URI:F,IS_SCRIPT_OR_DATA:G,MUSTACHE_EXPR:I,TMPLIT_EXPR:P});const X=1,q=3,V=7,$=8,K=9,Z=function getGlobal(){return"undefined"==typeof window?null:window};var J=function createDOMPurify(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Z();const DOMPurify=e=>createDOMPurify(e);if(DOMPurify.version="3.3.1",DOMPurify.removed=[],!t||!t.document||t.document.nodeType!==K||!t.Element)return DOMPurify.isSupported=!1,DOMPurify;let{document:n}=t;const o=n,a=o.currentScript,{DocumentFragment:i,HTMLTemplateElement:c,Node:s,Element:I,NodeFilter:z,NamedNodeMap:P=t.NamedNodeMap||t.MozNamedAttrMap,HTMLFormElement:U,DOMParser:H,trustedTypes:G}=t,B=I.prototype,Y=lookupGetter(B,"cloneNode"),J=lookupGetter(B,"remove"),Q=lookupGetter(B,"nextSibling"),ee=lookupGetter(B,"childNodes"),te=lookupGetter(B,"parentNode");if("function"==typeof c){const e=n.createElement("template");e.content&&e.content.ownerDocument&&(n=e.content.ownerDocument)}let ne,oe="";const{implementation:ae,createNodeIterator:re,createDocumentFragment:ie,getElementsByTagName:le}=n,{importNode:ce}=o;let se={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]};DOMPurify.isSupported="function"==typeof e&&"function"==typeof te&&ae&&void 0!==ae.createHTMLDocument;const{MUSTACHE_EXPR:ue,ERB_EXPR:pe,TMPLIT_EXPR:de,DATA_ATTR:me,ARIA_ATTR:fe,IS_SCRIPT_OR_DATA:he,ATTR_WHITESPACE:Te,CUSTOM_ELEMENT:ge}=j;let{IS_ALLOWED_URI:ye}=j,Se=null;const _e=addToSet({},[...N,...D,...k,...w,...x]);let Ee=null;const Ae=addToSet({},[...C,...v,...L,...M]);let be=Object.seal(l(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),Ne=null,De=null;const ke=Object.seal(l(null,{tagCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeCheck:{writable:!0,configurable:!1,enumerable:!0,value:null}}));let Re=!0,we=!0,Oe=!1,xe=!0,Ce=!1,ve=!0,Le=!1,Me=!1,Ie=!1,ze=!1,Pe=!1,Ue=!1,He=!0,Fe=!1,Ge=!0,Be=!1,We={},Ye=null;const je=addToSet({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]);let Xe=null;const qe=addToSet({},["audio","video","img","source","image","track"]);let Ve=null;const $e=addToSet({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),Ke="http://www.w3.org/1998/Math/MathML",Ze="http://www.w3.org/2000/svg",Je="http://www.w3.org/1999/xhtml";let Qe=Je,et=!1,tt=null;const nt=addToSet({},[Ke,Ze,Je],T);let ot=addToSet({},["mi","mo","mn","ms","mtext"]),at=addToSet({},["annotation-xml"]);const rt=addToSet({},["title","style","font","a","script"]);let it=null;const lt=["application/xhtml+xml","text/html"];let ct=null,st=null;const ut=n.createElement("form"),pt=function isRegexOrFunction(e){return e instanceof RegExp||e instanceof Function},dt=function _parseConfig(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!st||st!==e){if(e&&"object"==typeof e||(e={}),e=clone(e),it=-1===lt.indexOf(e.PARSER_MEDIA_TYPE)?"text/html":e.PARSER_MEDIA_TYPE,ct="application/xhtml+xml"===it?T:h,Se=E(e,"ALLOWED_TAGS")?addToSet({},e.ALLOWED_TAGS,ct):_e,Ee=E(e,"ALLOWED_ATTR")?addToSet({},e.ALLOWED_ATTR,ct):Ae,tt=E(e,"ALLOWED_NAMESPACES")?addToSet({},e.ALLOWED_NAMESPACES,T):nt,Ve=E(e,"ADD_URI_SAFE_ATTR")?addToSet(clone($e),e.ADD_URI_SAFE_ATTR,ct):$e,Xe=E(e,"ADD_DATA_URI_TAGS")?addToSet(clone(qe),e.ADD_DATA_URI_TAGS,ct):qe,Ye=E(e,"FORBID_CONTENTS")?addToSet({},e.FORBID_CONTENTS,ct):je,Ne=E(e,"FORBID_TAGS")?addToSet({},e.FORBID_TAGS,ct):clone({}),De=E(e,"FORBID_ATTR")?addToSet({},e.FORBID_ATTR,ct):clone({}),We=!!E(e,"USE_PROFILES")&&e.USE_PROFILES,Re=!1!==e.ALLOW_ARIA_ATTR,we=!1!==e.ALLOW_DATA_ATTR,Oe=e.ALLOW_UNKNOWN_PROTOCOLS||!1,xe=!1!==e.ALLOW_SELF_CLOSE_IN_ATTR,Ce=e.SAFE_FOR_TEMPLATES||!1,ve=!1!==e.SAFE_FOR_XML,Le=e.WHOLE_DOCUMENT||!1,ze=e.RETURN_DOM||!1,Pe=e.RETURN_DOM_FRAGMENT||!1,Ue=e.RETURN_TRUSTED_TYPE||!1,Ie=e.FORCE_BODY||!1,He=!1!==e.SANITIZE_DOM,Fe=e.SANITIZE_NAMED_PROPS||!1,Ge=!1!==e.KEEP_CONTENT,Be=e.IN_PLACE||!1,ye=e.ALLOWED_URI_REGEXP||F,Qe=e.NAMESPACE||Je,ot=e.MATHML_TEXT_INTEGRATION_POINTS||ot,at=e.HTML_INTEGRATION_POINTS||at,be=e.CUSTOM_ELEMENT_HANDLING||{},e.CUSTOM_ELEMENT_HANDLING&&pt(e.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(be.tagNameCheck=e.CUSTOM_ELEMENT_HANDLING.tagNameCheck),e.CUSTOM_ELEMENT_HANDLING&&pt(e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(be.attributeNameCheck=e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),e.CUSTOM_ELEMENT_HANDLING&&"boolean"==typeof e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements&&(be.allowCustomizedBuiltInElements=e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),Ce&&(we=!1),Pe&&(ze=!0),We&&(Se=addToSet({},x),Ee=[],!0===We.html&&(addToSet(Se,N),addToSet(Ee,C)),!0===We.svg&&(addToSet(Se,D),addToSet(Ee,v),addToSet(Ee,M)),!0===We.svgFilters&&(addToSet(Se,k),addToSet(Ee,v),addToSet(Ee,M)),!0===We.mathMl&&(addToSet(Se,w),addToSet(Ee,L),addToSet(Ee,M))),e.ADD_TAGS&&("function"==typeof e.ADD_TAGS?ke.tagCheck=e.ADD_TAGS:(Se===_e&&(Se=clone(Se)),addToSet(Se,e.ADD_TAGS,ct))),e.ADD_ATTR&&("function"==typeof e.ADD_ATTR?ke.attributeCheck=e.ADD_ATTR:(Ee===Ae&&(Ee=clone(Ee)),addToSet(Ee,e.ADD_ATTR,ct))),e.ADD_URI_SAFE_ATTR&&addToSet(Ve,e.ADD_URI_SAFE_ATTR,ct),e.FORBID_CONTENTS&&(Ye===je&&(Ye=clone(Ye)),addToSet(Ye,e.FORBID_CONTENTS,ct)),e.ADD_FORBID_CONTENTS&&(Ye===je&&(Ye=clone(Ye)),addToSet(Ye,e.ADD_FORBID_CONTENTS,ct)),Ge&&(Se["#text"]=!0),Le&&addToSet(Se,["html","head","body"]),Se.table&&(addToSet(Se,["tbody"]),delete Ne.tbody),e.TRUSTED_TYPES_POLICY){if("function"!=typeof e.TRUSTED_TYPES_POLICY.createHTML)throw b('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');if("function"!=typeof e.TRUSTED_TYPES_POLICY.createScriptURL)throw b('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');ne=e.TRUSTED_TYPES_POLICY,oe=ne.createHTML("")}else void 0===ne&&(ne=function _createTrustedTypesPolicy(e,t){if("object"!=typeof e||"function"!=typeof e.createPolicy)return null;let n=null;const o="data-tt-policy-suffix";t&&t.hasAttribute(o)&&(n=t.getAttribute(o));const a="dompurify"+(n?"#"+n:"");try{return e.createPolicy(a,{createHTML:e=>e,createScriptURL:e=>e})}catch(e){return console.warn("TrustedTypes policy "+a+" could not be created."),null}}(G,a)),null!==ne&&"string"==typeof oe&&(oe=ne.createHTML(""));r&&r(e),st=e}},mt=addToSet({},[...D,...k,...R]),ft=addToSet({},[...w,...O]),ht=function _forceRemove(e){m(DOMPurify.removed,{element:e});try{te(e).removeChild(e)}catch(t){J(e)}},Tt=function _removeAttribute(e,t){try{m(DOMPurify.removed,{attribute:t.getAttributeNode(e),from:t})}catch(e){m(DOMPurify.removed,{attribute:null,from:t})}if(t.removeAttribute(e),"is"===e)if(ze||Pe)try{ht(t)}catch(e){}else try{t.setAttribute(e,"")}catch(e){}},gt=function _initDocument(e){let t=null,o=null;if(Ie)e="<remove></remove>"+e;else{const t=g(e,/^[\r\n\t ]+/);o=t&&t[0]}"application/xhtml+xml"===it&&Qe===Je&&(e='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+e+"</body></html>");const a=ne?ne.createHTML(e):e;if(Qe===Je)try{t=(new H).parseFromString(a,it)}catch(e){}if(!t||!t.documentElement){t=ae.createDocument(Qe,"template",null);try{t.documentElement.innerHTML=et?oe:a}catch(e){}}const r=t.body||t.documentElement;return e&&o&&r.insertBefore(n.createTextNode(o),r.childNodes[0]||null),Qe===Je?le.call(t,Le?"html":"body")[0]:Le?t.documentElement:r},yt=function _createNodeIterator(e){return re.call(e.ownerDocument||e,e,z.SHOW_ELEMENT|z.SHOW_COMMENT|z.SHOW_TEXT|z.SHOW_PROCESSING_INSTRUCTION|z.SHOW_CDATA_SECTION,null)},St=function _isClobbered(e){return e instanceof U&&("string"!=typeof e.nodeName||"string"!=typeof e.textContent||"function"!=typeof e.removeChild||!(e.attributes instanceof P)||"function"!=typeof e.removeAttribute||"function"!=typeof e.setAttribute||"string"!=typeof e.namespaceURI||"function"!=typeof e.insertBefore||"function"!=typeof e.hasChildNodes)},_t=function _isNode(e){return"function"==typeof s&&e instanceof s};function _executeHooks(e,t,n){u(e,e=>{e.call(DOMPurify,t,n,st)})}const Et=function _sanitizeElements(e){let t=null;if(_executeHooks(se.beforeSanitizeElements,e,null),St(e))return ht(e),!0;const n=ct(e.nodeName);if(_executeHooks(se.uponSanitizeElement,e,{tagName:n,allowedTags:Se}),ve&&e.hasChildNodes()&&!_t(e.firstElementChild)&&A(/<[/\w!]/g,e.innerHTML)&&A(/<[/\w!]/g,e.textContent))return ht(e),!0;if(e.nodeType===V)return ht(e),!0;if(ve&&e.nodeType===$&&A(/<[/\w]/g,e.data))return ht(e),!0;if(!(ke.tagCheck instanceof Function&&ke.tagCheck(n))&&(!Se[n]||Ne[n])){if(!Ne[n]&&bt(n)){if(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,n))return!1;if(be.tagNameCheck instanceof Function&&be.tagNameCheck(n))return!1}if(Ge&&!Ye[n]){const t=te(e)||e.parentNode,n=ee(e)||e.childNodes;if(n&&t){for(let o=n.length-1;o>=0;--o){const a=Y(n[o],!0);a.removalCount=(e.removalCount||0)+1,t.insertBefore(a,Q(e))}}}return ht(e),!0}return e instanceof I&&!function _checkValidNamespace(e){let t=te(e);t&&t.tagName||(t={namespaceURI:Qe,tagName:"template"});const n=h(e.tagName),o=h(t.tagName);return!!tt[e.namespaceURI]&&(e.namespaceURI===Ze?t.namespaceURI===Je?"svg"===n:t.namespaceURI===Ke?"svg"===n&&("annotation-xml"===o||ot[o]):Boolean(mt[n]):e.namespaceURI===Ke?t.namespaceURI===Je?"math"===n:t.namespaceURI===Ze?"math"===n&&at[o]:Boolean(ft[n]):e.namespaceURI===Je?!(t.namespaceURI===Ze&&!at[o])&&!(t.namespaceURI===Ke&&!ot[o])&&!ft[n]&&(rt[n]||!mt[n]):!("application/xhtml+xml"!==it||!tt[e.namespaceURI]))}(e)?(ht(e),!0):"noscript"!==n&&"noembed"!==n&&"noframes"!==n||!A(/<\/no(script|embed|frames)/i,e.innerHTML)?(Ce&&e.nodeType===q&&(t=e.textContent,u([ue,pe,de],e=>{t=y(t,e," ")}),e.textContent!==t&&(m(DOMPurify.removed,{element:e.cloneNode()}),e.textContent=t)),_executeHooks(se.afterSanitizeElements,e,null),!1):(ht(e),!0)},At=function _isValidAttribute(e,t,o){if(He&&("id"===t||"name"===t)&&(o in n||o in ut))return!1;if(we&&!De[t]&&A(me,t));else if(Re&&A(fe,t));else if(ke.attributeCheck instanceof Function&&ke.attributeCheck(t,e));else if(!Ee[t]||De[t]){if(!(bt(e)&&(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,e)||be.tagNameCheck instanceof Function&&be.tagNameCheck(e))&&(be.attributeNameCheck instanceof RegExp&&A(be.attributeNameCheck,t)||be.attributeNameCheck instanceof Function&&be.attributeNameCheck(t,e))||"is"===t&&be.allowCustomizedBuiltInElements&&(be.tagNameCheck instanceof RegExp&&A(be.tagNameCheck,o)||be.tagNameCheck instanceof Function&&be.tagNameCheck(o))))return!1}else if(Ve[t]);else if(A(ye,y(o,Te,"")));else if("src"!==t&&"xlink:href"!==t&&"href"!==t||"script"===e||0!==S(o,"data:")||!Xe[e]){if(Oe&&!A(he,y(o,Te,"")));else if(o)return!1}else;return!0},bt=function _isBasicCustomElement(e){return"annotation-xml"!==e&&g(e,ge)},Nt=function _sanitizeAttributes(e){_executeHooks(se.beforeSanitizeAttributes,e,null);const{attributes:t}=e;if(!t||St(e))return;const n={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:Ee,forceKeepAttr:void 0};let o=t.length;for(;o--;){const a=t[o],{name:r,namespaceURI:i,value:l}=a,c=ct(r),s=l;let p="value"===r?s:_(s);if(n.attrName=c,n.attrValue=p,n.keepAttr=!0,n.forceKeepAttr=void 0,_executeHooks(se.uponSanitizeAttribute,e,n),p=n.attrValue,!Fe||"id"!==c&&"name"!==c||(Tt(r,e),p="user-content-"+p),ve&&A(/((--!?|])>)|<\/(style|title|textarea)/i,p)){Tt(r,e);continue}if("attributename"===c&&g(p,"href")){Tt(r,e);continue}if(n.forceKeepAttr)continue;if(!n.keepAttr){Tt(r,e);continue}if(!xe&&A(/\/>/i,p)){Tt(r,e);continue}Ce&&u([ue,pe,de],e=>{p=y(p,e," ")});const m=ct(e.nodeName);if(At(m,c,p)){if(ne&&"object"==typeof G&&"function"==typeof G.getAttributeType)if(i);else switch(G.getAttributeType(m,c)){case"TrustedHTML":p=ne.createHTML(p);break;case"TrustedScriptURL":p=ne.createScriptURL(p)}if(p!==s)try{i?e.setAttributeNS(i,r,p):e.setAttribute(r,p),St(e)?ht(e):d(DOMPurify.removed)}catch(t){Tt(r,e)}}else Tt(r,e)}_executeHooks(se.afterSanitizeAttributes,e,null)},Dt=function _sanitizeShadowDOM(e){let t=null;const n=yt(e);for(_executeHooks(se.beforeSanitizeShadowDOM,e,null);t=n.nextNode();)_executeHooks(se.uponSanitizeShadowNode,t,null),Et(t),Nt(t),t.content instanceof i&&_sanitizeShadowDOM(t.content);_executeHooks(se.afterSanitizeShadowDOM,e,null)};return DOMPurify.sanitize=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=null,a=null,r=null,l=null;if(et=!e,et&&(e="\x3c!--\x3e"),"string"!=typeof e&&!_t(e)){if("function"!=typeof e.toString)throw b("toString is not a function");if("string"!=typeof(e=e.toString()))throw b("dirty is not a string, aborting")}if(!DOMPurify.isSupported)return e;if(Me||dt(t),DOMPurify.removed=[],"string"==typeof e&&(Be=!1),Be){if(e.nodeName){const t=ct(e.nodeName);if(!Se[t]||Ne[t])throw b("root node is forbidden and cannot be sanitized in-place")}}else if(e instanceof s)n=gt("\x3c!----\x3e"),a=n.ownerDocument.importNode(e,!0),a.nodeType===X&&"BODY"===a.nodeName||"HTML"===a.nodeName?n=a:n.appendChild(a);else{if(!ze&&!Ce&&!Le&&-1===e.indexOf("<"))return ne&&Ue?ne.createHTML(e):e;if(n=gt(e),!n)return ze?null:Ue?oe:""}n&&Ie&&ht(n.firstChild);const c=yt(Be?e:n);for(;r=c.nextNode();)Et(r),Nt(r),r.content instanceof i&&Dt(r.content);if(Be)return e;if(ze){if(Pe)for(l=ie.call(n.ownerDocument);n.firstChild;)l.appendChild(n.firstChild);else l=n;return(Ee.shadowroot||Ee.shadowrootmode)&&(l=ce.call(o,l,!0)),l}let p=Le?n.outerHTML:n.innerHTML;return Le&&Se["!doctype"]&&n.ownerDocument&&n.ownerDocument.doctype&&n.ownerDocument.doctype.name&&A(W,n.ownerDocument.doctype.name)&&(p="<!DOCTYPE "+n.ownerDocument.doctype.name+">\n"+p),Ce&&u([ue,pe,de],e=>{p=y(p,e," ")}),ne&&Ue?ne.createHTML(p):p},DOMPurify.setConfig=function(){dt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),Me=!0},DOMPurify.clearConfig=function(){st=null,Me=!1},DOMPurify.isValidAttribute=function(e,t,n){st||dt({});const o=ct(e),a=ct(t);return At(o,a,n)},DOMPurify.addHook=function(e,t){"function"==typeof t&&m(se[e],t)},DOMPurify.removeHook=function(e,t){if(void 0!==t){const n=p(se[e],t);return-1===n?void 0:f(se[e],n,1)[0]}return d(se[e])},DOMPurify.removeHooks=function(e){se[e]=[]},DOMPurify.removeAllHooks=function(){se={afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}},DOMPurify}();return J}); \ No newline at end of file diff --git a/src/images/wingrip.png b/src/images/wingrip.png deleted file mode 100644 index 0b9cb1b..0000000 Binary files a/src/images/wingrip.png and /dev/null differ diff --git a/src/inc/generator.php b/src/inc/generator.php new file mode 100644 index 0000000..3d2651d --- /dev/null +++ b/src/inc/generator.php @@ -0,0 +1,555 @@ +<?php +/** + * Construct shortcodes. + * + * @category Core + * @package AblePlayer + * @author Joe Dolson + * @license GPLv3 + * @link https://www.joedolson.com/ableplayer/ + */ + +if ( ! defined( 'ABSPATH' ) ) { + exit; +} + +/** + * Create a shortcode for Able Player. + * + * @param string $format Output type. Default is 'shortcode', can output values in array. + */ +function ableplayer_generate( $format = 'shortcode' ) { + if ( isset( $_POST['generator'] ) ) { + $nonce = sanitize_text_field( $_POST['_wpnonce'] ); + if ( ! wp_verify_nonce( $nonce, 'ableplayer-nonce' ) ) { + wp_die( 'Invalid nonce' ); + } + $string = ''; + $array = array(); + $shortcode = 'ableplayer'; + $keys = array( 'youtube-id', 'vimeo-id', 'media-id', 'youtube-desc-id', 'youtube-sign-src', 'vimeo-desc-id', 'media-desc-id', 'media-asl-id', 'poster', 'captions', 'subtitles', 'descriptions', 'chapters', 'autoplay', 'loop', 'playsinline', 'hidecontrols', 'heading', 'speed', 'start', 'volume', 'seekinterval' ); + $post = map_deep( $_POST, 'sanitize_text_field' ); + + if ( empty( $post['youtube-id'] ) && empty( $post['vimeo-id'] ) && empty( $post['media-id'] ) ) { + return array( + 'message' => __( 'You must specify at least one media source', 'ableplayer' ), + 'type' => 'error', + ); + } + foreach ( $post as $key => $v ) { + if ( in_array( $key, $keys, true ) ) { + if ( 'speed' === $key && ableplayer_get_settings( 'default_speed' ) === $v ) { + continue; + } + if ( 'heading' === $key && ableplayer_get_settings( 'default_heading' ) === $v ) { + continue; + } + if ( '' !== $v ) { + if ( in_array( $key, array( 'captions', 'subtitles', 'descriptions', 'chapters' ), true ) ) { + $v .= ableplayer_shortcode_track( $key, $post ); + } + $array[ $key ] = $v; + $string .= " $key="$v""; + } + } + } + $output = esc_html( $shortcode . $string ); + ableplayer_update_setting( 'last_shortcode', $output ); + + if ( 'shortcode' === $format && ! is_array( $output ) ) { + $return = "<div class='notice notice-info'><p><textarea readonly='readonly' class='large-text readonly'>[$output]

' . __( 'Thanks for trying out Able Player!', 'ableplayer' ) . '