einundzwanzig/einundzwanzig.space
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig.space.git synced 2025-12-13 16:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add participants list to player

Browse Source
This commit is contained in:
Dennis Reimann
2023-09-18 19:10:17 +02:00
parent 992a07fb82
commit 32738a3387
4 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/css/sections/podcast.css
View File

@@ -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;
}

4
src/episode.pug
View File

@@ -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

11
src/includes/mixins.pug
View File

@@ -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")

16
tasks/generate_pages.js
View File

@@ -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 }))