Add participants list to player

src/css/sections/podcast.css

@@ -75,15 +75,18 @@
     align-items: center;
   }
 
-  & .avatar {
+  & .partcipants li span {
-    display: block;
+    margin-left: var(--space-m);
-    height: 2rem;
-    width: 2rem;
-    border-radius: 50%;
-    margin-right: 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;
+  width: var(--player-button-size);
-  height: 70px;
+  height: var(--player-button-size);
-  margin-right: var(--space-l);
+  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")

tasks/generate_pages.js

@@ -30,8 +30,8 @@ const meetupsSorted = site.meetups.sort((a, b) => {
   return sortId(a) > sortId(b) ? 1 : -1
 })
 
-renderPage('index', 'index', { navCurrent: 'index', currentEpisode: episodes[0] })
+renderPage('index', 'index', { navCurrent: 'index', currentEpisode: episodes[0], team })
-renderPage('podcast', 'podcast', { navCurrent: 'podcast', episodes: [...episodes] })
+renderPage('podcast', 'podcast', { navCurrent: 'podcast', episodes: [...episodes], team })
 renderPage('meetups', 'meetups', { navCurrent: 'meetups', meetups: meetupsSorted })
 renderPage('kurse', 'kurse', { navCurrent: 'kurse', kurse })
 renderPage('spenden', 'spenden', { navCurrent: 'spenden', spendenregister, spendenuebersicht })
@@ -49,10 +49,10 @@ renderPage('kontakt', 'kontakt', { navCurrent: 'kontakt' })
 renderPage('datenschutz', 'datenschutz', { navCurrent: 'datenschutz' })
 renderPage('adventskalender', 'adventskalender', { adventskalender })
 renderPage('gesundes-geld', 'gesundes-geld', { meetups: meetupsSorted })
-renderPage('category', 'podcast/news', { navCurrent: 'podcast', category: 'news', categoryName: 'News', episodes: episodes.filter(e => e.category === 'news') })
+renderPage('category', 'podcast/news', { navCurrent: 'podcast', category: 'news', categoryName: 'News', episodes: episodes.filter(e => e.category === 'news'), team })
-renderPage('category', 'podcast/interviews', { navCurrent: 'podcast', category: 'interview', categoryName: 'Interviews', episodes: episodes.filter(e => e.category === 'interview') })
+renderPage('category', 'podcast/interviews', { navCurrent: 'podcast', category: 'interview', categoryName: 'Interviews', episodes: episodes.filter(e => e.category === 'interview'), team })
-renderPage('category', 'podcast/lesestunde', { navCurrent: 'podcast', category: 'lesestunde', categoryName: 'Lesestunde', episodes: episodes.filter(e => e.category === 'lesestunde') })
+renderPage('category', 'podcast/lesestunde', { navCurrent: 'podcast', category: 'lesestunde', categoryName: 'Lesestunde', episodes: episodes.filter(e => e.category === 'lesestunde'), team })
-renderPage('category', 'podcast/der-weg', { navCurrent: 'podcast', category: 'der-weg', categoryName: 'Der Weg', episodes: episodes.filter(e => e.category === 'der-weg') })
+renderPage('category', 'podcast/der-weg', { navCurrent: 'podcast', category: 'der-weg', categoryName: 'Der Weg', episodes: episodes.filter(e => e.category === 'der-weg'), team })
-renderPage('category', 'podcast/on-tour', { navCurrent: 'podcast', category: 'on-tour', categoryName: 'On Tour', episodes: episodes.filter(e => e.category === 'on-tour') })
+renderPage('category', 'podcast/on-tour', { navCurrent: 'podcast', category: 'on-tour', categoryName: 'On Tour', episodes: episodes.filter(e => e.category === 'on-tour'), team })
-renderPage('category', 'podcast/verschiedenes', { navCurrent: 'podcast', category: 'verschiedenes', categoryName: 'Verschiedenes', episodes: episodes.filter(e => e.category === 'verschiedenes') })
+renderPage('category', 'podcast/verschiedenes', { navCurrent: 'podcast', category: 'verschiedenes', categoryName: 'Verschiedenes', episodes: episodes.filter(e => e.category === 'verschiedenes'), team })
 episodes.forEach(episode => renderPage('episode', `podcast/${episode.slug}`, { navCurrent: 'podcast', episode, team }))