better episode player UI

[alttp.git] / resources / js / components / episodes / Player.js

diff --git a/resources/js/components/episodes/Player.js b/resources/js/components/episodes/Player.js
new file mode 100644 (file)
index 0000000..27f5dd4
--- /dev/null
+++ b/resources/js/components/episodes/Player.js
@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+
+import { getAvatarUrl } from '../../helpers/User';
+
+const getName = player => {
+       if (player.name_override) {
+               return player.name_override;
+       }
+       if (player.user) {
+               return player.user.nickname || player.user.username;
+       }
+       return '';
+};
+
+const getStreamLink = player => {
+       if (player.stream_override) {
+               return `https://twitch.tv/${player.stream_override}`;
+       }
+       if (player.user && player.user.stream_link) {
+               return player.user.stream_link;
+       }
+       return '';
+};
+
+const Player = ({ player }) => {
+       return <div className="episode-player my-3">
+               <Button
+                       className="player-link"
+                       href={getStreamLink(player)}
+                       rel="noreferrer"
+                       target="_blank"
+                       variant="outline-twitch"
+               >
+                       <img alt="" src={getAvatarUrl(player.user)} />
+                       <span className="text-light fs-4">{getName(player)}</span>
+               </Button>
+       </div>;
+};
+
+Player.propTypes = {
+       player: PropTypes.shape({
+               id: PropTypes.number,
+               name_override: PropTypes.string,
+               stream_override: PropTypes.string,
+               user: PropTypes.shape({
+               }),
+       }),
+};
+
+export default Player;