advcal/components/controls.jsx

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;