Optimize status display a little.

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', () => {

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