diff --git a/src/index.js b/src/index.js index a0c03cb..0048a2c 100644 --- a/src/index.js +++ b/src/index.js @@ -15,10 +15,13 @@ window.addEventListener('load', () => { statusContainer.appendChild(statusContent); document.body.appendChild(statusContainer); - function showStatus(text) { + function showStatus() { if (!(style['status--visible'] in statusContainer.classList)) { statusContainer.classList.add(style['status--visible']); } + } + + function setStatus(text) { statusContent.innerText = text; } @@ -52,19 +55,25 @@ window.addEventListener('load', () => { player.initialize(playerContainer, url, autoplay); player.on('error', (e) => { - showStatus(`Error: ${e}`); + showStatus(); + setStatus(`Error: ${e}`); }); player.on('bufferEmpty', () => { - showStatus('We ran out of wood!'); + setStatus('We ran out of wood!'); }); player.on('bufferStalled', () => { - showStatus('We are waiting for more wood…'); + setStatus('We are waiting for more wood…'); }); player.on('bufferLoaded', () => { - showStatus('Almost there…'); + setStatus('Almost there…'); + }); + + player.on('playbackWaiting', () => { + showStatus(); + setStatus('Waiting for the workers to arrive…'); }); player.on('playbackPlaying', () => { diff --git a/src/player.styl b/src/player.styl index d1241c7..350f224 100644 --- a/src/player.styl +++ b/src/player.styl @@ -7,6 +7,7 @@ fullscreen() html background: #000 + color: #fff body background: transparent @@ -30,6 +31,9 @@ body opacity: 0 z-index: 10 + &.status__inner + background: rgba(0, 0, 0, .5) + &.status--visible opacity: 1