From 847969157063510460a48eba4bedfcce1caa7902 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Sun, 19 Feb 2023 22:14:45 +0100
Subject: [PATCH] better episode player UI

---
 app/Http/Controllers/EpisodeController.php  |  1 +
 resources/js/components/episodes/Player.js  | 52 +++++++++++++++++++++
 resources/js/components/episodes/Players.js | 11 ++---
 resources/sass/episodes.scss                | 13 ++++++
 4 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/components/episodes/Player.js

diff --git a/app/Http/Controllers/EpisodeController.php b/app/Http/Controllers/EpisodeController.php
index d4ca78d..6672cdc 100644
--- a/app/Http/Controllers/EpisodeController.php
+++ b/app/Http/Controllers/EpisodeController.php
@@ -23,6 +23,7 @@ class EpisodeController extends Controller
 			->where('episodes.start', '>=', $after)
 			->where('episodes.start', '<=', $before)
 			->where('events.visible', '=', true)
+			->orderBy('episodes.start')
 			->limit(1000);
 		return $episodes->get()->toJson();
 	}
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;
diff --git a/resources/js/components/episodes/Players.js b/resources/js/components/episodes/Players.js
index b6f6c7a..3a3cf59 100644
--- a/resources/js/components/episodes/Players.js
+++ b/resources/js/components/episodes/Players.js
@@ -1,15 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Players = ({ players }) => {
-	return <div className="episode-players">
+import Player from './Player';
+
+const Players = ({ players }) =>
+	<div className="episode-players">
 		{players.map(player =>
-			<div className="episode-player fs-4 my-3" key={player.id}>
-				{player.name_override}
-			</div>
+			<Player key={player.id} player={player} />
 		)}
 	</div>;
-};
 
 Players.propTypes = {
 	players: PropTypes.arrayOf(PropTypes.shape({
diff --git a/resources/sass/episodes.scss b/resources/sass/episodes.scss
index 6ee7ff3..242699a 100644
--- a/resources/sass/episodes.scss
+++ b/resources/sass/episodes.scss
@@ -6,4 +6,17 @@
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 	}
+	.player-link {
+		border: none;
+
+		img {
+			max-height: 3rem;
+			width: auto;
+			border-radius: 50%;
+			margin: 0 0.5rem 0 0;
+		}
+		span {
+			vertical-align: middle;
+		}
+	}
 }
-- 
2.39.2