Commit 5dd4771b authored by i❤computers's avatar i❤computers

Add a play button with explanation

parent e1a47764
......@@ -23,6 +23,11 @@
margin: 0 auto;
}
aside {
text-align: center;
height: 2.5em;
}
article {
font-family: 'Open Sans', sans-serif;
background-color: rgb(255, 233, 125);
......@@ -314,9 +319,12 @@
<rect x="225.44" y="193.34" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="257.54" y="193.34" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="289.64" y="193.34" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="0.75" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="32.85" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="64.95" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="0.75" y="225.44" width="32.1" height="32.1"
style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="32.85" y="225.44" width="32.1" height="32.1"
style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="64.95" y="225.44" width="32.1" height="32.1"
style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="97.04" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="129.14" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="161.24" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
......@@ -367,6 +375,9 @@
transform="translate(0.25 0.25)" style="fill:#fff"/>
</svg>
</header>
<aside>
<button>Play ▶️ the article from the beginning</button> or click anywhere in the text to start playing from that point.
</aside>
<h1>
<span data-cue-position="7">The </span>
<span data-cue-position="8">five </span>
......
......@@ -27,13 +27,17 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
$('article').on('click', function playFromCue(event) {
var target = event.target;
if (target.tagName.toLowerCase() === "button") {
playAudio(0);
}
var cuePositionName = target.dataset.cuePosition;
if (!cuePositionName) {
return;
}
const matchingCue = cuesTrack.find(cueTrack =>
cueTrack.cuePositionName.localeCompare(cuePositionName) === 0
cueTrack.cuePositionName === cuePositionName
&& cueTrack.isTextHighlight);
if (!matchingCue) {
return;
......@@ -60,6 +64,18 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
audio.pause();
requestAnimationFrame(resetPlayer);
}
changePlayButton();
}
function changePlayButton() {
const $button = $('button')[0];
if (audio.paused || audio.ended) {
$button.textContent = 'Play ▶️ the article from the beginning';
$button.nextSibling.textContent = " or click anywhere in the text to start playing from that point.";
} else {
$button.textContent = 'Stop ⏹ the article';
$button.nextSibling.textContent = " or click anywhere in the text to stop playing";
}
}
var cueHighlightPosition = 0;
......
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