diff --git a/cues.js b/cues.js index 8d5a0594978d815922d9fcb40ebec32653da1307..e0761f2c39daad306e363a3e65ffb80c9db07d61 100644 --- a/cues.js +++ b/cues.js @@ -1,4 +1,4 @@ -var transcriptCuesTrack = [{ +var cuesTrack = [{ cueTime: 0.33, cuePositionName: "0" }, { diff --git a/script.js b/script.js index ba4f02b77002764a41becd1f7861b17827f71a2f..28842f1a34b4e1ac769a521ed3978b0a540556d0 100644 --- a/script.js +++ b/script.js @@ -1,16 +1,16 @@ +'use strict'; document.addEventListener('DOMContentLoaded', function initializePage() { - 'use strict'; var audio = document.getElementById('excerpt'); var MAX_TRANSITION_TIME = 0.4; //make sure transition time matches in index.html's styling - transcriptCuesTrack.forEach(function setTransitionTimes(cue, index) { - if (index + 1 === transcriptCuesTrack.length) { + cuesTrack.forEach(function setShortTransitionTimes(cue, index) { + if (index + 1 === cuesTrack.length) { return; } - var cueDuration = transcriptCuesTrack[index + 1].cueTime - cue.cueTime; + var cueDuration = cuesTrack[index + 1].cueTime - cue.cueTime; if (cueDuration < MAX_TRANSITION_TIME) { - $(cue_position_selector(cue.cuePositionName)).forEach(function (cueElement) { + $(cuePositionSelector(cue.cuePositionName)).forEach(function (cueElement) { cueElement.style.transitionDuration = cueDuration + "s"; }); } @@ -20,7 +20,7 @@ document.addEventListener('DOMContentLoaded', function initializePage() { var target = event.target; var cuePositionName = target.dataset.cuePosition; if (cuePositionName) { - playAudio(transcriptCuesTrack.filter(function (cueTrack) { + playAudio(cuesTrack.filter(function (cueTrack) { return cueTrack.cuePositionName.localeCompare(cuePositionName) === 0; })[0].cueTime); } @@ -41,7 +41,7 @@ document.addEventListener('DOMContentLoaded', function initializePage() { } } - var currentTranscriptIndex = 0; + var cuePosition = 0; var HIGHLIGHTED_CLASS = "highlighted"; function updateHighlight() { @@ -49,15 +49,19 @@ document.addEventListener('DOMContentLoaded', function initializePage() { return; } - while (transcriptCuesTrack[currentTranscriptIndex] && audio.currentTime >= transcriptCuesTrack[currentTranscriptIndex].cueTime) { - $(cue_position_selector(transcriptCuesTrack[currentTranscriptIndex].cuePositionName)).forEach(addHighlightClass); - currentTranscriptIndex++; + while (cuesLeftToHighlight()) { + $(cuePositionSelector(cuesTrack[cuePosition].cuePositionName)).forEach(addHighlightClass); + cuePosition++; } requestAnimationFrame(updateHighlight); + + function cuesLeftToHighlight() { + return cuesTrack[cuePosition] && audio.currentTime >= cuesTrack[cuePosition].cueTime; + } } - function cue_position_selector(id) { + function cuePositionSelector(id) { return "[data-cue-position='" + id + "']" } @@ -67,7 +71,7 @@ document.addEventListener('DOMContentLoaded', function initializePage() { function resetPlayer() { audio.currentTime = 0; - currentTranscriptIndex = 0; + cuePosition = 0; $("." + HIGHLIGHTED_CLASS).forEach(function removeHighlightClass(highlightedElement) { highlightedElement.classList.remove(HIGHLIGHTED_CLASS); });