Add participants list to player

src/css/sections/podcast.css

@@ -75,15 +75,18 @@
     align-items: center;
   }
 
-  & .avatar {
-    display: block;
-    height: 2rem;
-    width: 2rem;
-    border-radius: 50%;
-    margin-right: var(--space-m);
+  & .partcipants li span {
+    margin-left: var(--space-m);
   }
 }
 
+.avatar {
+  display: block;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+}
+
 .episodes {
   display: grid;
   grid-gap: var(--space-xl);
@@ -158,6 +161,9 @@
 }
 
 .player {
+  --player-button-size: 3rem;
+  --player-button-margin: var(--space-l);
+
   display: flex;
   border-radius: var(--space-m);
   overflow: hidden;
@@ -225,16 +231,24 @@
   content: '2.0x';
 }
 
-.player__controls {
+.player__participants {
+  flex-wrap: wrap;
+  gap: var(--space-m);
+  margin: 0 0 0 calc(var(--player-button-size) + var(--player-button-margin));
+  list-style: none;
+}
+
+.player__controls,
+.player__participants {
   display: flex;
   align-items: center;
   padding: var(--space-m) var(--space-l);
 }
 
 .player__button {
-  width: 70px;
-  height: 70px;
-  margin-right: var(--space-l);
+  width: var(--player-button-size);
+  height: var(--player-button-size);
+  margin-right: var(--player-button-margin);
   cursor: pointer;
 }
 

src/episode.pug

@@ -36,7 +36,7 @@ block main
                 if member
                   a(href=memberUrl(member))
                     img.avatar(src=assetPath(member.image || "/img/avatar.svg") alt=member.name)
-                    = member.name
+                    span= member.name
                 else
                   img.avatar(src=assetPath("/img/avatar.svg") alt=participant)
-                  = participant
+                  span= participant

src/includes/mixins.pug

@@ -153,6 +153,17 @@ mixin episodePlayer(e)
             .player__album(data-amplitude-song-info="album" data-amplitude-main-song-info="true")
             .player__name(data-amplitude-song-info="name" data-amplitude-main-song-info="true")
 
+      if e.participants.length
+        ul.player__participants
+          for participant in e.participants
+            - const member = team[participant.toLowerCase()]
+            li
+              if member
+                a(href=memberUrl(member))
+                  img.avatar(src=assetPath(member.image || "/img/avatar.svg") alt=member.name)
+              else
+                img.avatar(src=assetPath("/img/avatar.svg") alt=participant)
+
       .player__links
         a.player__download(href=e.enclosure.url)
           +sprite("download")