first working version

components/controls.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useState, Fragment } from "react";
+
+export const ENDED = 0;
+export const PLAYING = 1;
+export const PAUSED = 2;
+
+const Controls = ({ playerState, onPause, onPlay, onRestart }) => {
+  return (
+    <Fragment>
+      <div className="player-controls">
+        {playerState === PLAYING && (
+          <a onClick={onPause} title="Pause">
+            ⏸
+          </a>
+        )}
+        {playerState === PAUSED && (
+          <a onClick={onPlay} title="Play">
+            ▶
+          </a>
+        )}
+        {[PLAYING, PAUSED].includes(playerState) && (
+          <a onClick={onRestart} title="Von Vorne">
+            ⏮
+          </a>
+        )}
+        {playerState === ENDED && (
+          <a onClick={onPlay} title="Play">
+            ▶
+          </a>
+        )}
+      </div>
+    </Fragment>
+  );
+};
+
+export default Controls;