X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Fepisodes%2FPlayer.js;fp=resources%2Fjs%2Fcomponents%2Fepisodes%2FPlayer.js;h=27f5dd4e181e35625adda5ced29cc44f64015b0c;hb=847969157063510460a48eba4bedfcce1caa7902;hp=0000000000000000000000000000000000000000;hpb=dec43db11e9433f5bfcfaa091518082559cb3169;p=alttp.git

diff --git a/resources/js/components/episodes/Player.js b/resources/js/components/episodes/Player.js
new file mode 100644
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;