Implement a nice little status display.

src/index.js

@@ -8,6 +8,26 @@ import style from './player.styl';
 const __webpack_nonce__ = 'uGo4I9ydb2hP393boc/24Vu7diUk/Mf84w9khcZkynk=';
 
 window.addEventListener('load', () => {
+  const statusContainer = document.createElement('div');
+  statusContainer.classList.add(style.status);
+  const statusContent = document.createElement('span');
+  statusContent.classList.add(style.statusInner);
+  statusContainer.appendChild(statusContent);
+  document.body.appendChild(statusContainer);
+
+  function showStatus(text) {
+    if (!(style['status--visible'] in statusContainer.classList)) {
+      statusContainer.classList.add(style['status--visible']);
+    }
+    statusContent.innerText = text;
+  }
+
+  function hideStatus() {
+    statusContainer.classList.remove(style['status--visible']);
+  }
+
+  showStatus('Constructing your clock...');
+
   const playerContainer = document.createElement('video');
   playerContainer.classList.add(style.video);
   playerContainer.loop = true;
@@ -30,5 +50,24 @@ window.addEventListener('load', () => {
   const autoplay = true;
   player.initialize(playerContainer, url, autoplay);
 
-  document.body.appendChild(playerContainer);
+  player.on('error', (e) => {
+    showStatus(`Error: ${e}`);
+  });
+
+  player.on('bufferEmpty', () => {
+    showStatus('We ran out of wood!');
+  });
+
+  player.on('bufferStalled', () => {
+    showStatus('We are waiting for more wood…');
+  });
+
+  player.on('bufferLoaded', () => {
+    showStatus('Almost there…');
+  });
+
+  player.on('playbackPlaying', () => {
+    hideStatus();
+    document.body.appendChild(playerContainer);
+  });
 });

src/player.styl

@@ -10,6 +10,7 @@ html
 
 body
 	background: transparent
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
 
 html, body
 	padding: 0
@@ -20,5 +21,24 @@ html, body
 body
 	text-align: center
 
+.status
+	fullscreen()
+	display: flex
+	align-items: center
+	justify-content: center
+	transition: opacity .25s linear
+	opacity: 0
+	z-index: 10
+
+	&.status--visible
+		opacity: 1
+
 .video
 	fullscreen()
+	animation: fadein .25s linear
+
+@keyframes fadein
+	0%
+		opacity: 0
+	100%
+		opacity: 1