Skip to content

GitLab

Commit 9fa663a6 authored by i❤computers's avatar i❤computers
Browse files

Allow for second cues track referencing named cue position

parent 12138d0a
Hide whitespace changes
Inline Side-by-side
Showing with 56 additions and 39 deletions
index.html
View file @ 9fa663a6
......@@ -213,13 +213,13 @@
<svg id="flag" width="100%" height="100%" viewBox="0 0 720 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M0,0l720,0l0,480l-720,0l0,-480Z" style="fill:#fff;fill-rule:nonzero;"></path>
<rect x="0" y="80" width="720" height="80" style="fill:#b3ddf2;"></rect>
<rect id="topWipe" class="wipes" x="0" y="75" width="720" height="90" style="fill:#FFF;"></rect>
<rect data-cue-position="topWipe" class="wipes" x="0" y="75" width="720" height="90" style="fill:#FFF;"></rect>
<rect x="0" y="320" width="720" height="80" style="fill:#b3ddf2;"></rect>
<rect id="bottomWipe" class="wipes" x="0" y="315" width="720" height="90" style="fill:#FFF;"></rect>
<path id="firstStar" class="star" d="M150,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<path id="secondStar" class="star" d="M290,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<path id="thirdStar" class="star" d="M430,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<path id="fourthStar" class="star" d="M570,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<rect data-cue-position="bottomWipe" class="wipes" x="0" y="315" width="720" height="90" style="fill:#FFF;"></rect>
<path data-cue-position="firstStar" class="star" d="M150,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<path data-cue-position="secondStar" class="star" d="M290,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<path data-cue-position="thirdStar" class="star" d="M430,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<path data-cue-position="fourthStar" class="star" d="M570,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
</svg>
<figcaption>Figure 1. Flag of Chicago, Illinois. <a
href="https://commons.wikimedia.org/wiki/File:Flag_of_Chicago,_Illinois.svg">Source: Wikipedia</a>
......
script.js
View file @ 9fa663a6
......@@ -3,16 +3,40 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
var audio = document.getElementById('excerpt');
var cues = [0.33, 0.57, 0.71, 1.38, 2.17, 2.36, 2.64, 3.88, 4.02, 4.32, 4.65, 5.1, 5.27, 5.52, 5.92, 6.28, 6.55, 7.37, 8.62, 9.48, 10.09, 10.36, 11.01, 11.82, 12.32, 13.15, 13.72, 14.01, 14.19, 14.65, 15.03, 15.37, 15.72, 16.14, 16.44, 16.74, 17.53, 17.91, 18.23, 18.9, 19.16, 19.52, 20.02, 21.29, 21.65, 21.94, 22.46, 23.28, 23.63, 23.88, 24.46, 24.75, 25.09, 25.59, 26.0, 26.48, 26.96, 27.26, 27.77, 28.21, 28.74, 29.58, 30.8, 31.58, 32.4, 32.77, 33.09, 33.82, 34.44, 34.68, 35.39, 35.89, 36.28, 37.03, 37.47, 37.97, 38.23, 38.63, 39.92, 40.18, 41.08, 42.11, 43.16, 43.64, 44.27, 45.1, 45.45, 46.09, 46.6, 46.87, 47.23, 48.06, 48.37, 48.91, 49.32, 49.76, 50.16, 50.52, 50.76, 51.04, 51.7, 52.44, 53.38, 54.3, 54.58, 55.04, 55.71, 56.16, 56.49, 57.02, 57.88, 58.46, 59.02, 59.45, 60.02];
var transcriptCuesTrack = [0.33, 0.57, 0.71, 1.38, 2.17, 2.36, 2.64, 3.88, 4.02, 4.32, 4.65, 5.1, 5.27, 5.52, 5.92, 6.28, 6.55, 7.37, 8.62, 9.48, 10.09, 10.36, 11.01, 11.82, 12.32, 13.15, 13.72, 14.01, 14.19, 14.65, 15.03, 15.37, 15.72, 16.14, 16.44, 16.74, 17.53, 17.91, 18.23, 18.9, 19.16, 19.52, 20.02, 21.29, 21.65, 21.94, 22.46, 23.28, 23.63, 23.88, 24.46, 24.75, 25.09, 25.59, 26.0, 26.48, 26.96, 27.26, 27.77, 28.21, 28.74, 29.58, 30.8, 31.58, 32.4, 32.77, 33.09, 33.82, 34.44, 34.68, 35.39, 35.89, 36.28, 37.03, 37.47, 37.97, 38.23, 38.63, 39.92, 40.18, 41.08, 42.11, 43.16, 43.64, 44.27, 45.1, 45.45, 46.09, 46.6, 46.87, 47.23, 48.06, 48.37, 48.91, 49.32, 49.76, 50.16, 50.52, 50.76, 51.04, 51.7, 52.44, 53.38, 54.3, 54.58, 55.04, 55.71, 56.16, 56.49, 57.02, 57.88, 58.46, 59.02, 59.45, 60.02];
var visualCuesTrack = [
{
cueTime: 44.37,
cuePositionName: "topWipe"
},
{
cueTime: 45.14,
cuePositionName: "bottomWipe"
},
{
cueTime: 49,
cuePositionName: "firstStar"
},
{
cueTime: 49.25,
cuePositionName: "secondStar"
},
{
cueTime: 49.50,
cuePositionName: "thirdStar"
},
{
cueTime: 49.75,
cuePositionName: "fourthStar"
}
];
var MAX_TRANSITION_TIME = 0.4; //make sure transition time matches in index.html's styling
var cue_position_selector = function (index) {
return "[data-cue-position='" + index + "']"
};
cues.forEach(function setTransitionTimes(cue, index) {
if (index + 1 === cues.length) {
transcriptCuesTrack.forEach(function setTransitionTimes(cue, index) {
if (index + 1 === transcriptCuesTrack.length) {
return;
}
var cueDuration = cues[index + 1] - cue;
var cueDuration = transcriptCuesTrack[index + 1] - cue;
if (cueDuration < MAX_TRANSITION_TIME) {
$(cue_position_selector(index)).forEach(function (cueElement) {
cueElement.style.transitionDuration = cueDuration + "s";
......@@ -32,7 +56,8 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
});
audio.on('ended', resetPlayer);
var currentIndex = 0;
var currentTranscriptIndex = 0;
var currentVisualIndex = 0;
var HIGHLIGHTED_CLASS = "highlighted";
function updateHighlight() {
......@@ -40,39 +65,31 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
return;
}
if (audio.currentTime >= cues[currentIndex]) {
$(cue_position_selector(currentIndex)).forEach(function (cueElement) {
cueElement.classList.add(HIGHLIGHTED_CLASS);
});
currentIndex++;
}
if (audio.currentTime >= 44.37) {
document.getElementById("topWipe").classList.add(HIGHLIGHTED_CLASS);
}
if (audio.currentTime >= 45.14) {
document.getElementById("bottomWipe").classList.add(HIGHLIGHTED_CLASS);
}
if (audio.currentTime >= 49.00) {
document.getElementById("firstStar").classList.add(HIGHLIGHTED_CLASS);
if (audio.currentTime >= transcriptCuesTrack[currentTranscriptIndex]) {
$(cue_position_selector(currentTranscriptIndex)).forEach(addHighlightClass);
currentTranscriptIndex++;
}
if (audio.currentTime >= 49.25) {
document.getElementById("secondStar").classList.add(HIGHLIGHTED_CLASS);
}
if (audio.currentTime >= 49.50) {
document.getElementById("thirdStar").classList.add(HIGHLIGHTED_CLASS);
}
if (audio.currentTime >= 49.75) {
document.getElementById("fourthStar").classList.add(HIGHLIGHTED_CLASS);
if (visualCuesTrack[currentVisualIndex] && audio.currentTime >= visualCuesTrack[currentVisualIndex].cueTime) {
$(cue_position_selector(visualCuesTrack[currentVisualIndex].cuePositionName)).forEach(addHighlightClass);
currentVisualIndex++;
}
requestAnimationFrame(updateHighlight);
}
function cue_position_selector(id) {
return "[data-cue-position='" + id + "']"
}
function addHighlightClass($cueElement) {
$cueElement.classList.add(HIGHLIGHTED_CLASS);
}
function resetPlayer() {
audio.currentTime = 0;
currentIndex = 0;
$("." + HIGHLIGHTED_CLASS).forEach(function removeHighlights(highlightedElement) {
currentTranscriptIndex = 0;
currentVisualIndex = 0;
$("." + HIGHLIGHTED_CLASS).forEach(function removeHighlightClass(highlightedElement) {
highlightedElement.classList.remove(HIGHLIGHTED_CLASS);
});
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment