From 32738a33876c2b7bb37a047653811ab1eec86120 Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Mon, 18 Sep 2023 19:10:17 +0200 Subject: [PATCH] Add participants list to player --- src/css/sections/podcast.css | 34 ++++++++++++++++++++++++---------- src/episode.pug | 4 ++-- src/includes/mixins.pug | 11 +++++++++++ tasks/generate_pages.js | 16 ++++++++-------- 4 files changed, 45 insertions(+), 20 deletions(-) diff --git a/src/css/sections/podcast.css b/src/css/sections/podcast.css index b05f01c7eaf..4ce5dd63a35 100644 --- a/src/css/sections/podcast.css +++ b/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; } diff --git a/src/episode.pug b/src/episode.pug index 4c7b4ca0fa2..ff1d200b91d 100644 --- a/src/episode.pug +++ b/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 diff --git a/src/includes/mixins.pug b/src/includes/mixins.pug index 3b10d0358e1..71c8f09da15 100644 --- a/src/includes/mixins.pug +++ b/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") diff --git a/tasks/generate_pages.js b/tasks/generate_pages.js index afc7d8217b0..2af4c9ebdd6 100644 --- a/tasks/generate_pages.js +++ b/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('podcast', 'podcast', { navCurrent: 'podcast', episodes: [...episodes] }) +renderPage('index', 'index', { navCurrent: 'index', currentEpisode: episodes[0], team }) +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/interviews', { navCurrent: 'podcast', category: 'interview', categoryName: 'Interviews', episodes: episodes.filter(e => e.category === 'interview') }) -renderPage('category', 'podcast/lesestunde', { navCurrent: 'podcast', category: 'lesestunde', categoryName: 'Lesestunde', episodes: episodes.filter(e => e.category === 'lesestunde') }) -renderPage('category', 'podcast/der-weg', { navCurrent: 'podcast', category: 'der-weg', categoryName: 'Der Weg', episodes: episodes.filter(e => e.category === 'der-weg') }) -renderPage('category', 'podcast/on-tour', { navCurrent: 'podcast', category: 'on-tour', categoryName: 'On Tour', episodes: episodes.filter(e => e.category === 'on-tour') }) -renderPage('category', 'podcast/verschiedenes', { navCurrent: 'podcast', category: 'verschiedenes', categoryName: 'Verschiedenes', episodes: episodes.filter(e => e.category === 'verschiedenes') }) +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'), team }) +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'), team }) +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'), team }) episodes.forEach(episode => renderPage('episode', `podcast/${episode.slug}`, { navCurrent: 'podcast', episode, team }))