better episode player UI

diff --git a/app/Http/Controllers/EpisodeController.php b/app/Http/Controllers/EpisodeController.php
index d4ca78d44b27bf3b6e5b02cc9485edc2ca7853c0..6672cdc128b21a036a6c54c9ad2d45ed10fd5987 100644 (file)
--- 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 (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;

diff --git a/resources/js/components/episodes/Players.js b/resources/js/components/episodes/Players.js
index b6f6c7abce06b6a64c4d6e3a4068c9fb31f30fc2..3a3cf5957aff1c77c774cf5b555921bd86e0244d 100644 (file)
--- 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 6ee7ff38cd141ea8b0aba1518446f292496a868e..242699adc30042c65a7ba66296429e2fd367477c 100644 (file)
--- 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;
+               }
+       }
 }