feat: Initial release v0.1.0

WP FediStream - Stream music over ActivityPub

Features:
- Custom post types: Artist, Album, Track, Playlist
- Custom taxonomies: Genre, Mood, License
- User roles: Artist, Label
- Admin dashboard with statistics
- Frontend templates and shortcodes
- Audio player with queue management
- ActivityPub integration with actor support
- WooCommerce product types for albums/tracks
- User library with favorites and history
- Notification system (in-app and email)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-28 23:23:05 +01:00
commit 4a5d7b9f4d
91 changed files with 22750 additions and 0 deletions

View File

@@ -0,0 +1,27 @@
{# Album archive template #}
<div class="fedistream-archive fedistream-archive--albums">
<header class="fedistream-archive__header">
<h1 class="fedistream-archive__title">{{ __('Albums', 'wp-fedistream') }}</h1>
{% if archive_description %}
<div class="fedistream-archive__description">{{ archive_description }}</div>
{% endif %}
</header>
{% if posts is not empty %}
<div class="fedistream-grid fedistream-grid--albums">
{% for post in posts %}
{% include 'partials/card-album.twig' with { post: post } %}
{% endfor %}
</div>
{% if pagination %}
<nav class="fedistream-pagination">
{{ pagination|raw }}
</nav>
{% endif %}
{% else %}
<div class="fedistream-empty">
<p>{{ __('No albums found.', 'wp-fedistream') }}</p>
</div>
{% endif %}
</div>

View File

@@ -0,0 +1,27 @@
{# Artist archive template #}
<div class="fedistream-archive fedistream-archive--artists">
<header class="fedistream-archive__header">
<h1 class="fedistream-archive__title">{{ __('Artists', 'wp-fedistream') }}</h1>
{% if archive_description %}
<div class="fedistream-archive__description">{{ archive_description }}</div>
{% endif %}
</header>
{% if posts is not empty %}
<div class="fedistream-grid fedistream-grid--artists">
{% for post in posts %}
{% include 'partials/card-artist.twig' with { post: post } %}
{% endfor %}
</div>
{% if pagination %}
<nav class="fedistream-pagination">
{{ pagination|raw }}
</nav>
{% endif %}
{% else %}
<div class="fedistream-empty">
<p>{{ __('No artists found.', 'wp-fedistream') }}</p>
</div>
{% endif %}
</div>

View File

@@ -0,0 +1,27 @@
{# Playlist archive template #}
<div class="fedistream-archive fedistream-archive--playlists">
<header class="fedistream-archive__header">
<h1 class="fedistream-archive__title">{{ __('Playlists', 'wp-fedistream') }}</h1>
{% if archive_description %}
<div class="fedistream-archive__description">{{ archive_description }}</div>
{% endif %}
</header>
{% if posts is not empty %}
<div class="fedistream-grid fedistream-grid--playlists">
{% for post in posts %}
{% include 'partials/card-playlist.twig' with { post: post } %}
{% endfor %}
</div>
{% if pagination %}
<nav class="fedistream-pagination">
{{ pagination|raw }}
</nav>
{% endif %}
{% else %}
<div class="fedistream-empty">
<p>{{ __('No playlists found.', 'wp-fedistream') }}</p>
</div>
{% endif %}
</div>

View File

@@ -0,0 +1,37 @@
{# Taxonomy archive template (Genre, Mood) #}
<div class="fedistream-archive fedistream-archive--taxonomy">
<header class="fedistream-archive__header">
<h1 class="fedistream-archive__title">
{% if taxonomy_name %}{{ taxonomy_name }}: {% endif %}{{ term.name }}
</h1>
{% if term.description %}
<div class="fedistream-archive__description">{{ term.description }}</div>
{% endif %}
</header>
{% if posts is not empty %}
<div class="fedistream-grid fedistream-grid--mixed">
{% for post in posts %}
{% if post.post_type == 'fedistream_artist' %}
{% include 'partials/card-artist.twig' with { post: post } %}
{% elseif post.post_type == 'fedistream_album' %}
{% include 'partials/card-album.twig' with { post: post } %}
{% elseif post.post_type == 'fedistream_track' %}
{% include 'partials/card-track.twig' with { post: post } %}
{% elseif post.post_type == 'fedistream_playlist' %}
{% include 'partials/card-playlist.twig' with { post: post } %}
{% endif %}
{% endfor %}
</div>
{% if pagination %}
<nav class="fedistream-pagination">
{{ pagination|raw }}
</nav>
{% endif %}
{% else %}
<div class="fedistream-empty">
<p>{{ __('No content found in this category.', 'wp-fedistream') }}</p>
</div>
{% endif %}
</div>

View File

@@ -0,0 +1,27 @@
{# Track archive template #}
<div class="fedistream-archive fedistream-archive--tracks">
<header class="fedistream-archive__header">
<h1 class="fedistream-archive__title">{{ __('Tracks', 'wp-fedistream') }}</h1>
{% if archive_description %}
<div class="fedistream-archive__description">{{ archive_description }}</div>
{% endif %}
</header>
{% if posts is not empty %}
<div class="fedistream-grid fedistream-grid--tracks">
{% for post in posts %}
{% include 'partials/card-track.twig' with { post: post } %}
{% endfor %}
</div>
{% if pagination %}
<nav class="fedistream-pagination">
{{ pagination|raw }}
</nav>
{% endif %}
{% else %}
<div class="fedistream-empty">
<p>{{ __('No tracks found.', 'wp-fedistream') }}</p>
</div>
{% endif %}
</div>

1
templates/index.php Normal file
View File

@@ -0,0 +1 @@
<?php // Silence is golden.

View File

@@ -0,0 +1,31 @@
{# Album card partial #}
<article class="fedistream-card fedistream-card--album">
<a href="{{ post.permalink }}" class="fedistream-card__link">
<div class="fedistream-card__image fedistream-card__image--square">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" loading="lazy">
{% else %}
<div class="fedistream-card__placeholder fedistream-card__placeholder--album">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"/></svg>
</div>
{% endif %}
</div>
<div class="fedistream-card__content">
<h3 class="fedistream-card__title">{{ post.title }}</h3>
{% if post.artist_name %}
<p class="fedistream-card__artist">{{ post.artist_name }}</p>
{% endif %}
<p class="fedistream-card__meta">
<span class="fedistream-card__type">{{ post.album_type_label }}</span>
{% if post.release_year %}
<span class="fedistream-card__year">{{ post.release_year }}</span>
{% endif %}
</p>
{% if post.total_tracks > 0 %}
<p class="fedistream-card__stats">
{{ post.total_tracks }} {{ post.total_tracks == 1 ? 'track' : 'tracks' }}
</p>
{% endif %}
</div>
</a>
</article>

View File

@@ -0,0 +1,28 @@
{# Artist card partial #}
<article class="fedistream-card fedistream-card--artist">
<a href="{{ post.permalink }}" class="fedistream-card__link">
<div class="fedistream-card__image">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" loading="lazy">
{% else %}
<div class="fedistream-card__placeholder fedistream-card__placeholder--artist">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
</div>
{% endif %}
</div>
<div class="fedistream-card__content">
<h3 class="fedistream-card__title">{{ post.title }}</h3>
<p class="fedistream-card__meta">
<span class="fedistream-card__type">{{ post.artist_type_label }}</span>
{% if post.location %}
<span class="fedistream-card__location">{{ post.location }}</span>
{% endif %}
</p>
{% if post.album_count is defined and post.album_count > 0 %}
<p class="fedistream-card__stats">
{{ post.album_count }} {{ post.album_count == 1 ? 'album' : 'albums' }}
</p>
{% endif %}
</div>
</a>
</article>

View File

@@ -0,0 +1,29 @@
{# Playlist card partial #}
<article class="fedistream-card fedistream-card--playlist">
<a href="{{ post.permalink }}" class="fedistream-card__link">
<div class="fedistream-card__image fedistream-card__image--square">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" loading="lazy">
{% else %}
<div class="fedistream-card__placeholder fedistream-card__placeholder--playlist">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/></svg>
</div>
{% endif %}
{% if post.visibility == 'private' %}
<span class="fedistream-card__badge fedistream-card__badge--private">
<svg viewBox="0 0 24 24" fill="currentColor" width="12" height="12"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg>
</span>
{% endif %}
</div>
<div class="fedistream-card__content">
<h3 class="fedistream-card__title">{{ post.title }}</h3>
<p class="fedistream-card__author">{{ post.author }}</p>
<p class="fedistream-card__meta">
<span class="fedistream-card__count">{{ post.track_count }} {{ post.track_count == 1 ? 'track' : 'tracks' }}</span>
{% if post.duration_formatted %}
<span class="fedistream-card__duration">{{ post.duration_formatted }}</span>
{% endif %}
</p>
</div>
</a>
</article>

View File

@@ -0,0 +1,37 @@
{# Track card partial #}
<article class="fedistream-card fedistream-card--track">
<a href="{{ post.permalink }}" class="fedistream-card__link">
<div class="fedistream-card__image fedistream-card__image--square">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" loading="lazy">
{% elseif post.album_artwork %}
<img src="{{ post.album_artwork }}" alt="{{ post.title|e('html_attr') }}" loading="lazy">
{% else %}
<div class="fedistream-card__placeholder fedistream-card__placeholder--track">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
</div>
{% endif %}
{% if post.explicit %}
<span class="fedistream-card__badge fedistream-card__badge--explicit">E</span>
{% endif %}
</div>
<div class="fedistream-card__content">
<h3 class="fedistream-card__title">{{ post.title }}</h3>
{% if post.artists %}
<p class="fedistream-card__artist">
{% for artist in post.artists %}
{{ artist.name }}{% if not loop.last %}, {% endif %}
{% endfor %}
</p>
{% endif %}
<p class="fedistream-card__meta">
{% if post.album_title %}
<span class="fedistream-card__album">{{ post.album_title }}</span>
{% endif %}
{% if post.duration_formatted %}
<span class="fedistream-card__duration">{{ post.duration_formatted }}</span>
{% endif %}
</p>
</div>
</a>
</article>

View File

@@ -0,0 +1,64 @@
{# Album shortcode template #}
<div class="fedistream-shortcode fedistream-shortcode--album fedistream-shortcode--{{ layout }}">
<div class="fedistream-album">
<div class="fedistream-album__header">
<div class="fedistream-album__artwork">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-album__image">
{% else %}
<div class="fedistream-album__placeholder">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"/></svg>
</div>
{% endif %}
</div>
<div class="fedistream-album__info">
{% if post.album_type %}
<span class="fedistream-album__type-badge">{{ post.album_type }}</span>
{% endif %}
<h3 class="fedistream-album__title">
<a href="{{ post.permalink }}">{{ post.title }}</a>
</h3>
{% if post.artist %}
<p class="fedistream-album__artist">
<a href="{{ post.artist_link }}">{{ post.artist }}</a>
</p>
{% endif %}
<div class="fedistream-album__meta">
{% if post.release_date %}
<span class="fedistream-album__date">{{ post.release_date }}</span>
{% endif %}
{% if post.track_count %}
<span class="fedistream-album__tracks">{{ post.track_count }} {{ post.track_count == 1 ? 'track' : 'tracks' }}</span>
{% endif %}
</div>
<div class="fedistream-album__actions">
<button type="button" class="fedistream-btn fedistream-btn--primary fedistream-btn--play-all" data-album-id="{{ post.id }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
{{ __('Play', 'wp-fedistream') }}
</button>
</div>
</div>
</div>
{% if show_tracks and post.tracks is not empty %}
<div class="fedistream-album__tracklist">
<div class="fedistream-tracklist">
{% for track in post.tracks %}
<div class="fedistream-tracklist__item" data-track-id="{{ track.id }}">
<span class="fedistream-tracklist__number">{{ track.track_number|default(loop.index) }}</span>
<div class="fedistream-tracklist__info">
<a href="{{ track.permalink }}" class="fedistream-tracklist__title">{{ track.title }}</a>
</div>
{% if track.duration_formatted %}
<span class="fedistream-tracklist__duration">{{ track.duration_formatted }}</span>
{% endif %}
<button type="button" class="fedistream-tracklist__play" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>

View File

@@ -0,0 +1,65 @@
{# Artist shortcode template #}
<div class="fedistream-shortcode fedistream-shortcode--artist fedistream-shortcode--{{ layout }}">
<div class="fedistream-artist">
<div class="fedistream-artist__header">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-artist__image">
{% else %}
<div class="fedistream-artist__placeholder">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
</div>
{% endif %}
<div class="fedistream-artist__info">
<h3 class="fedistream-artist__name">
<a href="{{ post.permalink }}">{{ post.title }}</a>
</h3>
{% if post.artist_type %}
<span class="fedistream-artist__type">{{ post.artist_type }}</span>
{% endif %}
{% if post.genres is not empty %}
<div class="fedistream-artist__genres">
{% for genre in post.genres %}
<a href="{{ genre.link }}" class="fedistream-tag">{{ genre.name }}</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% if layout == 'full' and post.content %}
<div class="fedistream-artist__bio">
{{ post.content|raw }}
</div>
{% endif %}
{% if show_albums and post.albums is not empty %}
<div class="fedistream-artist__albums">
<h4 class="fedistream-section__title">{{ __('Albums', 'wp-fedistream') }}</h4>
<div class="fedistream-grid fedistream-grid--small">
{% for album in post.albums|slice(0, 4) %}
{% include 'partials/card-album.twig' with { post: album } %}
{% endfor %}
</div>
</div>
{% endif %}
{% if show_tracks and post.tracks is not empty %}
<div class="fedistream-artist__tracks">
<h4 class="fedistream-section__title">{{ __('Popular Tracks', 'wp-fedistream') }}</h4>
<div class="fedistream-tracklist fedistream-tracklist--compact">
{% for track in post.tracks|slice(0, 5) %}
<div class="fedistream-tracklist__item" data-track-id="{{ track.id }}">
<span class="fedistream-tracklist__number">{{ loop.index }}</span>
<div class="fedistream-tracklist__info">
<a href="{{ track.permalink }}" class="fedistream-tracklist__title">{{ track.title }}</a>
</div>
{% if track.duration_formatted %}
<span class="fedistream-tracklist__duration">{{ track.duration_formatted }}</span>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>

View File

@@ -0,0 +1,18 @@
{# Artists grid shortcode template #}
<div class="fedistream-shortcode fedistream-shortcode--artists">
{% if title %}
<h3 class="fedistream-shortcode__title">{{ title }}</h3>
{% endif %}
{% if posts is not empty %}
<div class="fedistream-grid fedistream-grid--artists fedistream-grid--cols-{{ columns }}">
{% for post in posts %}
{% include 'partials/card-artist.twig' with { post: post } %}
{% endfor %}
</div>
{% else %}
<div class="fedistream-empty">
<p>{{ __('No artists found.', 'wp-fedistream') }}</p>
</div>
{% endif %}
</div>

View File

@@ -0,0 +1,108 @@
{# Audio player shortcode template #}
<div class="fedistream-shortcode fedistream-shortcode--player fedistream-player-widget fedistream-player-widget--{{ style }}" data-autoplay="{{ autoplay ? 'true' : 'false' }}">
{% if tracks|length == 1 %}
{# Single track player #}
{% set track = tracks[0] %}
<div class="fedistream-player fedistream-player--single" data-track-id="{{ track.id }}" data-audio-url="{{ track.audio_url }}">
<div class="fedistream-player__track-info">
{% if track.thumbnail %}
<img src="{{ track.thumbnail }}" alt="{{ track.title|e('html_attr') }}" class="fedistream-player__artwork">
{% endif %}
<div class="fedistream-player__details">
<span class="fedistream-player__title">{{ track.title }}</span>
{% if track.artist %}
<span class="fedistream-player__artist">{{ track.artist }}</span>
{% endif %}
</div>
</div>
<div class="fedistream-player__controls">
<button type="button" class="fedistream-player__btn fedistream-player__btn--play" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg class="fedistream-player__icon fedistream-player__icon--play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
<svg class="fedistream-player__icon fedistream-player__icon--pause" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
</button>
</div>
<div class="fedistream-player__progress">
<span class="fedistream-player__time fedistream-player__time--current">0:00</span>
<div class="fedistream-player__bar">
<div class="fedistream-player__bar-progress"></div>
<input type="range" class="fedistream-player__seek" min="0" max="100" value="0" aria-label="{{ __('Seek', 'wp-fedistream') }}">
</div>
<span class="fedistream-player__time fedistream-player__time--total">{{ track.duration_formatted|default('0:00') }}</span>
</div>
<div class="fedistream-player__volume">
<button type="button" class="fedistream-player__btn fedistream-player__btn--volume" aria-label="{{ __('Volume', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
</button>
<input type="range" class="fedistream-player__volume-slider" min="0" max="100" value="80" aria-label="{{ __('Volume', 'wp-fedistream') }}">
</div>
</div>
{% else %}
{# Multi-track player (playlist/album) #}
<div class="fedistream-player fedistream-player--multi" data-tracks="{{ tracks|json_encode|e('html_attr') }}">
<div class="fedistream-player__now-playing">
<div class="fedistream-player__artwork-wrapper">
<img src="" alt="" class="fedistream-player__artwork fedistream-player__artwork--current">
</div>
<div class="fedistream-player__details">
<span class="fedistream-player__title fedistream-player__title--current"></span>
<span class="fedistream-player__artist fedistream-player__artist--current"></span>
</div>
</div>
<div class="fedistream-player__main-controls">
<button type="button" class="fedistream-player__btn fedistream-player__btn--prev" aria-label="{{ __('Previous', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
</button>
<button type="button" class="fedistream-player__btn fedistream-player__btn--play fedistream-player__btn--play-main" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg class="fedistream-player__icon fedistream-player__icon--play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
<svg class="fedistream-player__icon fedistream-player__icon--pause" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
</button>
<button type="button" class="fedistream-player__btn fedistream-player__btn--next" aria-label="{{ __('Next', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
</button>
</div>
<div class="fedistream-player__progress">
<span class="fedistream-player__time fedistream-player__time--current">0:00</span>
<div class="fedistream-player__bar">
<div class="fedistream-player__bar-progress"></div>
<input type="range" class="fedistream-player__seek" min="0" max="100" value="0" aria-label="{{ __('Seek', 'wp-fedistream') }}">
</div>
<span class="fedistream-player__time fedistream-player__time--total">0:00</span>
</div>
<div class="fedistream-player__secondary-controls">
<button type="button" class="fedistream-player__btn fedistream-player__btn--shuffle" aria-label="{{ __('Shuffle', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>
</button>
<button type="button" class="fedistream-player__btn fedistream-player__btn--repeat" aria-label="{{ __('Repeat', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg>
</button>
<div class="fedistream-player__volume">
<button type="button" class="fedistream-player__btn fedistream-player__btn--volume" aria-label="{{ __('Volume', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
</button>
<input type="range" class="fedistream-player__volume-slider" min="0" max="100" value="80" aria-label="{{ __('Volume', 'wp-fedistream') }}">
</div>
</div>
</div>
{# Track list #}
<div class="fedistream-player__queue">
<div class="fedistream-tracklist fedistream-tracklist--queue">
{% for track in tracks %}
<div class="fedistream-tracklist__item" data-track-index="{{ loop.index0 }}" data-track-id="{{ track.id }}">
<span class="fedistream-tracklist__number">{{ loop.index }}</span>
{% if track.thumbnail %}
<img src="{{ track.thumbnail }}" alt="" class="fedistream-tracklist__artwork">
{% endif %}
<div class="fedistream-tracklist__info">
<span class="fedistream-tracklist__title">{{ track.title }}</span>
<span class="fedistream-tracklist__artist">{{ track.artist }}</span>
</div>
{% if track.duration_formatted %}
<span class="fedistream-tracklist__duration">{{ track.duration_formatted }}</span>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>

View File

@@ -0,0 +1,71 @@
{# Playlist shortcode template #}
<div class="fedistream-shortcode fedistream-shortcode--playlist fedistream-shortcode--{{ layout }}">
<div class="fedistream-playlist">
<div class="fedistream-playlist__header">
<div class="fedistream-playlist__artwork">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-playlist__image">
{% else %}
<div class="fedistream-playlist__placeholder">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/></svg>
</div>
{% endif %}
{% if post.visibility == 'private' %}
<span class="fedistream-playlist__badge fedistream-playlist__badge--private">
<svg viewBox="0 0 24 24" fill="currentColor" width="12" height="12"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg>
</span>
{% endif %}
</div>
<div class="fedistream-playlist__info">
<span class="fedistream-playlist__type-badge">{{ __('Playlist', 'wp-fedistream') }}</span>
<h3 class="fedistream-playlist__title">
<a href="{{ post.permalink }}">{{ post.title }}</a>
</h3>
{% if post.author %}
<p class="fedistream-playlist__author">
{{ __('by', 'wp-fedistream') }} {{ post.author }}
</p>
{% endif %}
<div class="fedistream-playlist__meta">
{% if post.track_count %}
<span class="fedistream-playlist__count">{{ post.track_count }} {{ post.track_count == 1 ? 'track' : 'tracks' }}</span>
{% endif %}
{% if post.duration_formatted %}
<span class="fedistream-playlist__duration">{{ post.duration_formatted }}</span>
{% endif %}
</div>
<div class="fedistream-playlist__actions">
<button type="button" class="fedistream-btn fedistream-btn--primary fedistream-btn--play-all" data-playlist-id="{{ post.id }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
{{ __('Play', 'wp-fedistream') }}
</button>
</div>
</div>
</div>
{% if show_tracks and post.tracks is not empty %}
<div class="fedistream-playlist__tracklist">
<div class="fedistream-tracklist">
{% for track in post.tracks %}
<div class="fedistream-tracklist__item" data-track-id="{{ track.id }}">
<span class="fedistream-tracklist__number">{{ loop.index }}</span>
{% if track.thumbnail %}
<img src="{{ track.thumbnail }}" alt="" class="fedistream-tracklist__artwork">
{% endif %}
<div class="fedistream-tracklist__info">
<a href="{{ track.permalink }}" class="fedistream-tracklist__title">{{ track.title }}</a>
<span class="fedistream-tracklist__artist">{{ track.artist }}</span>
</div>
{% if track.duration_formatted %}
<span class="fedistream-tracklist__duration">{{ track.duration_formatted }}</span>
{% endif %}
<button type="button" class="fedistream-tracklist__play" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>

View File

@@ -0,0 +1,18 @@
{# Latest releases grid shortcode template #}
<div class="fedistream-shortcode fedistream-shortcode--releases">
{% if title %}
<h3 class="fedistream-shortcode__title">{{ title }}</h3>
{% endif %}
{% if posts is not empty %}
<div class="fedistream-grid fedistream-grid--albums fedistream-grid--cols-{{ columns }}">
{% for post in posts %}
{% include 'partials/card-album.twig' with { post: post } %}
{% endfor %}
</div>
{% else %}
<div class="fedistream-empty">
<p>{{ __('No releases found.', 'wp-fedistream') }}</p>
</div>
{% endif %}
</div>

View File

@@ -0,0 +1,64 @@
{# Track shortcode template #}
<div class="fedistream-shortcode fedistream-shortcode--track fedistream-shortcode--{{ layout }}">
<div class="fedistream-track">
<div class="fedistream-track__header">
<div class="fedistream-track__artwork">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-track__image">
{% else %}
<div class="fedistream-track__placeholder">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
</div>
{% endif %}
{% if show_player %}
<button type="button" class="fedistream-track__play-overlay" data-track-id="{{ post.id }}" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
{% endif %}
</div>
<div class="fedistream-track__info">
<h3 class="fedistream-track__title">
<a href="{{ post.permalink }}">{{ post.title }}</a>
</h3>
{% if post.artists is not empty %}
<p class="fedistream-track__artists">
{% for artist in post.artists %}
<a href="{{ artist.link }}">{{ artist.name }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</p>
{% endif %}
{% if post.album %}
<p class="fedistream-track__album">
{{ __('From', 'wp-fedistream') }} <a href="{{ post.album_link }}">{{ post.album }}</a>
</p>
{% endif %}
<div class="fedistream-track__meta">
{% if post.duration_formatted %}
<span class="fedistream-track__duration">{{ post.duration_formatted }}</span>
{% endif %}
{% if post.play_count %}
<span class="fedistream-track__plays">{{ post.play_count }} {{ post.play_count == 1 ? 'play' : 'plays' }}</span>
{% endif %}
</div>
</div>
</div>
{% if show_player and post.audio_url %}
<div class="fedistream-track__player">
<div class="fedistream-player fedistream-player--inline" data-track-id="{{ post.id }}" data-audio-url="{{ post.audio_url }}">
<button type="button" class="fedistream-player__btn fedistream-player__btn--play" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg class="fedistream-player__icon fedistream-player__icon--play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
<svg class="fedistream-player__icon fedistream-player__icon--pause" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
</button>
<div class="fedistream-player__progress">
<div class="fedistream-player__bar">
<div class="fedistream-player__bar-progress"></div>
<input type="range" class="fedistream-player__seek" min="0" max="100" value="0" aria-label="{{ __('Seek', 'wp-fedistream') }}">
</div>
</div>
<span class="fedistream-player__time">{{ post.duration_formatted|default('0:00') }}</span>
</div>
</div>
{% endif %}
</div>
</div>

View File

@@ -0,0 +1,48 @@
{# Popular tracks list shortcode template #}
<div class="fedistream-shortcode fedistream-shortcode--tracks">
{% if title %}
<h3 class="fedistream-shortcode__title">{{ title }}</h3>
{% endif %}
{% if posts is not empty %}
<div class="fedistream-tracklist fedistream-tracklist--numbered">
{% for post in posts %}
<div class="fedistream-tracklist__item" data-track-id="{{ post.id }}">
<span class="fedistream-tracklist__rank">{{ loop.index }}</span>
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="" class="fedistream-tracklist__artwork">
{% else %}
<div class="fedistream-tracklist__artwork fedistream-tracklist__artwork--placeholder">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
</div>
{% endif %}
<div class="fedistream-tracklist__info">
<a href="{{ post.permalink }}" class="fedistream-tracklist__title">{{ post.title }}</a>
<span class="fedistream-tracklist__artist">
{% if post.artists is iterable %}
{% for artist in post.artists %}
<a href="{{ artist.link }}">{{ artist.name }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
{% else %}
{{ post.artist }}
{% endif %}
</span>
</div>
{% if post.play_count %}
<span class="fedistream-tracklist__plays">{{ post.play_count|number_format }}</span>
{% endif %}
{% if post.duration_formatted %}
<span class="fedistream-tracklist__duration">{{ post.duration_formatted }}</span>
{% endif %}
<button type="button" class="fedistream-tracklist__play" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
{% endfor %}
</div>
{% else %}
<div class="fedistream-empty">
<p>{{ __('No tracks found.', 'wp-fedistream') }}</p>
</div>
{% endif %}
</div>

105
templates/single/album.twig Normal file
View File

@@ -0,0 +1,105 @@
{# Single album template #}
<article class="fedistream-single fedistream-single--album">
<header class="fedistream-single__header fedistream-single__header--album">
<div class="fedistream-single__artwork">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-single__image fedistream-single__image--album">
{% else %}
<div class="fedistream-single__placeholder fedistream-single__placeholder--album">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"/></svg>
</div>
{% endif %}
</div>
<div class="fedistream-single__info">
<span class="fedistream-single__type-badge">{{ post.album_type|default('Album') }}</span>
<h1 class="fedistream-single__title">{{ post.title }}</h1>
{% if post.artist %}
<p class="fedistream-single__artist">
<a href="{{ post.artist_link }}">{{ post.artist }}</a>
</p>
{% endif %}
<div class="fedistream-single__meta">
{% if post.release_date %}
<span class="fedistream-single__date">{{ post.release_date }}</span>
{% endif %}
{% if post.track_count %}
<span class="fedistream-single__tracks">{{ post.track_count }} {{ post.track_count == 1 ? __('track', 'wp-fedistream') : __('tracks', 'wp-fedistream') }}</span>
{% endif %}
{% if post.duration_formatted %}
<span class="fedistream-single__duration">{{ post.duration_formatted }}</span>
{% endif %}
</div>
{% if post.genres is not empty %}
<div class="fedistream-single__genres">
{% for genre in post.genres %}
<a href="{{ genre.link }}" class="fedistream-tag">{{ genre.name }}</a>
{% endfor %}
</div>
{% endif %}
<div class="fedistream-single__actions">
<button type="button" class="fedistream-btn fedistream-btn--primary fedistream-btn--play-all" data-album-id="{{ post.id }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
{{ __('Play All', 'wp-fedistream') }}
</button>
<button type="button" class="fedistream-btn fedistream-btn--secondary fedistream-btn--shuffle" data-album-id="{{ post.id }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>
{{ __('Shuffle', 'wp-fedistream') }}
</button>
</div>
</div>
</header>
{% if post.tracks is not empty %}
<section class="fedistream-single__tracklist">
<div class="fedistream-tracklist fedistream-tracklist--album">
{% for track in post.tracks %}
<div class="fedistream-tracklist__item" data-track-id="{{ track.id }}">
<span class="fedistream-tracklist__number">{{ track.track_number|default(loop.index) }}</span>
<div class="fedistream-tracklist__info">
<a href="{{ track.permalink }}" class="fedistream-tracklist__title">{{ track.title }}</a>
{% if track.featured_artists %}
<span class="fedistream-tracklist__featuring">{{ __('feat.', 'wp-fedistream') }} {{ track.featured_artists }}</span>
{% endif %}
</div>
{% if track.explicit %}
<span class="fedistream-badge fedistream-badge--explicit">E</span>
{% endif %}
{% if track.duration_formatted %}
<span class="fedistream-tracklist__duration">{{ track.duration_formatted }}</span>
{% endif %}
<button type="button" class="fedistream-tracklist__play" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
{% endfor %}
</div>
</section>
{% endif %}
{% if post.content %}
<section class="fedistream-single__content">
<h2 class="fedistream-section__title">{{ __('About This Album', 'wp-fedistream') }}</h2>
<div class="fedistream-single__description">
{{ post.content|raw }}
</div>
</section>
{% endif %}
{% if post.credits %}
<section class="fedistream-single__credits">
<h2 class="fedistream-section__title">{{ __('Credits', 'wp-fedistream') }}</h2>
<div class="fedistream-credits">
{{ post.credits|raw }}
</div>
</section>
{% endif %}
{% if post.license %}
<section class="fedistream-single__license">
<p class="fedistream-license">
<strong>{{ __('License:', 'wp-fedistream') }}</strong>
<a href="{{ post.license.link }}">{{ post.license.name }}</a>
</p>
</section>
{% endif %}
</article>

View File

@@ -0,0 +1,88 @@
{# Single artist template #}
<article class="fedistream-single fedistream-single--artist">
<header class="fedistream-single__header">
<div class="fedistream-single__hero">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-single__image fedistream-single__image--artist">
{% else %}
<div class="fedistream-single__placeholder fedistream-single__placeholder--artist">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
</div>
{% endif %}
</div>
<div class="fedistream-single__info">
<h1 class="fedistream-single__title">{{ post.title }}</h1>
{% if post.artist_type %}
<p class="fedistream-single__type">{{ post.artist_type }}</p>
{% endif %}
{% if post.genres is not empty %}
<div class="fedistream-single__genres">
{% for genre in post.genres %}
<a href="{{ genre.link }}" class="fedistream-tag">{{ genre.name }}</a>
{% endfor %}
</div>
{% endif %}
</div>
</header>
{% if post.content %}
<section class="fedistream-single__content">
<h2 class="fedistream-section__title">{{ __('About', 'wp-fedistream') }}</h2>
<div class="fedistream-single__description">
{{ post.content|raw }}
</div>
</section>
{% endif %}
{% if post.social_links is not empty %}
<section class="fedistream-single__social">
<h2 class="fedistream-section__title">{{ __('Connect', 'wp-fedistream') }}</h2>
<div class="fedistream-social-links">
{% for platform, url in post.social_links %}
<a href="{{ url }}" class="fedistream-social-link fedistream-social-link--{{ platform }}" target="_blank" rel="noopener noreferrer">
{{ platform }}
</a>
{% endfor %}
</div>
</section>
{% endif %}
{% if post.albums is not empty %}
<section class="fedistream-single__albums">
<h2 class="fedistream-section__title">{{ __('Discography', 'wp-fedistream') }}</h2>
<div class="fedistream-grid fedistream-grid--albums">
{% for album in post.albums %}
{% include 'partials/card-album.twig' with { post: album } %}
{% endfor %}
</div>
</section>
{% endif %}
{% if post.tracks is not empty %}
<section class="fedistream-single__tracks">
<h2 class="fedistream-section__title">{{ __('Popular Tracks', 'wp-fedistream') }}</h2>
<div class="fedistream-tracklist">
{% for track in post.tracks %}
<div class="fedistream-tracklist__item" data-track-id="{{ track.id }}">
<span class="fedistream-tracklist__number">{{ loop.index }}</span>
{% if track.thumbnail %}
<img src="{{ track.thumbnail }}" alt="" class="fedistream-tracklist__artwork">
{% endif %}
<div class="fedistream-tracklist__info">
<a href="{{ track.permalink }}" class="fedistream-tracklist__title">{{ track.title }}</a>
{% if track.album %}
<span class="fedistream-tracklist__album">{{ track.album }}</span>
{% endif %}
</div>
{% if track.duration_formatted %}
<span class="fedistream-tracklist__duration">{{ track.duration_formatted }}</span>
{% endif %}
<button type="button" class="fedistream-tracklist__play" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
{% endfor %}
</div>
</section>
{% endif %}
</article>

View File

@@ -0,0 +1,107 @@
{# Single playlist template #}
<article class="fedistream-single fedistream-single--playlist">
<header class="fedistream-single__header fedistream-single__header--playlist">
<div class="fedistream-single__artwork">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-single__image fedistream-single__image--playlist">
{% else %}
<div class="fedistream-single__placeholder fedistream-single__placeholder--playlist">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/></svg>
</div>
{% endif %}
{% if post.visibility == 'private' %}
<span class="fedistream-single__badge fedistream-single__badge--private">
<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg>
{{ __('Private', 'wp-fedistream') }}
</span>
{% endif %}
</div>
<div class="fedistream-single__info">
<span class="fedistream-single__type-badge">{{ __('Playlist', 'wp-fedistream') }}</span>
<h1 class="fedistream-single__title">{{ post.title }}</h1>
{% if post.author %}
<p class="fedistream-single__author">
{{ __('Created by', 'wp-fedistream') }} <a href="{{ post.author_link }}">{{ post.author }}</a>
</p>
{% endif %}
<div class="fedistream-single__meta">
{% if post.track_count %}
<span class="fedistream-single__tracks">{{ post.track_count }} {{ post.track_count == 1 ? __('track', 'wp-fedistream') : __('tracks', 'wp-fedistream') }}</span>
{% endif %}
{% if post.duration_formatted %}
<span class="fedistream-single__duration">{{ post.duration_formatted }}</span>
{% endif %}
{% if post.updated_date %}
<span class="fedistream-single__updated">{{ __('Updated', 'wp-fedistream') }} {{ post.updated_date }}</span>
{% endif %}
</div>
{% if post.moods is not empty %}
<div class="fedistream-single__moods">
{% for mood in post.moods %}
<a href="{{ mood.link }}" class="fedistream-tag fedistream-tag--mood">{{ mood.name }}</a>
{% endfor %}
</div>
{% endif %}
<div class="fedistream-single__actions">
<button type="button" class="fedistream-btn fedistream-btn--primary fedistream-btn--play-all" data-playlist-id="{{ post.id }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
{{ __('Play All', 'wp-fedistream') }}
</button>
<button type="button" class="fedistream-btn fedistream-btn--secondary fedistream-btn--shuffle" data-playlist-id="{{ post.id }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>
{{ __('Shuffle', 'wp-fedistream') }}
</button>
</div>
</div>
</header>
{% if post.content %}
<section class="fedistream-single__content">
<div class="fedistream-single__description">
{{ post.content|raw }}
</div>
</section>
{% endif %}
{% if post.tracks is not empty %}
<section class="fedistream-single__tracklist">
<div class="fedistream-tracklist fedistream-tracklist--playlist">
{% for track in post.tracks %}
<div class="fedistream-tracklist__item" data-track-id="{{ track.id }}">
<span class="fedistream-tracklist__number">{{ loop.index }}</span>
{% if track.thumbnail %}
<img src="{{ track.thumbnail }}" alt="" class="fedistream-tracklist__artwork">
{% endif %}
<div class="fedistream-tracklist__info">
<a href="{{ track.permalink }}" class="fedistream-tracklist__title">{{ track.title }}</a>
<span class="fedistream-tracklist__artist">
{% if track.artists is iterable %}
{% for artist in track.artists %}
<a href="{{ artist.link }}">{{ artist.name }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
{% else %}
{{ track.artist }}
{% endif %}
</span>
</div>
{% if track.explicit %}
<span class="fedistream-badge fedistream-badge--explicit">E</span>
{% endif %}
{% if track.duration_formatted %}
<span class="fedistream-tracklist__duration">{{ track.duration_formatted }}</span>
{% endif %}
<button type="button" class="fedistream-tracklist__play" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
{% endfor %}
</div>
</section>
{% else %}
<section class="fedistream-single__empty">
<div class="fedistream-empty">
<p>{{ __('This playlist is empty.', 'wp-fedistream') }}</p>
</div>
</section>
{% endif %}
</article>

120
templates/single/track.twig Normal file
View File

@@ -0,0 +1,120 @@
{# Single track template #}
<article class="fedistream-single fedistream-single--track">
<header class="fedistream-single__header fedistream-single__header--track">
<div class="fedistream-single__artwork">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-single__image fedistream-single__image--track">
{% else %}
<div class="fedistream-single__placeholder fedistream-single__placeholder--track">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
</div>
{% endif %}
<button type="button" class="fedistream-single__play-overlay" data-track-id="{{ post.id }}" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<div class="fedistream-single__info">
<h1 class="fedistream-single__title">{{ post.title }}</h1>
{% if post.artists is not empty %}
<p class="fedistream-single__artists">
{% for artist in post.artists %}
<a href="{{ artist.link }}">{{ artist.name }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</p>
{% endif %}
{% if post.album %}
<p class="fedistream-single__album">
{{ __('From', 'wp-fedistream') }} <a href="{{ post.album_link }}">{{ post.album }}</a>
</p>
{% endif %}
<div class="fedistream-single__meta">
{% if post.duration_formatted %}
<span class="fedistream-single__duration">{{ post.duration_formatted }}</span>
{% endif %}
{% if post.play_count %}
<span class="fedistream-single__plays">{{ post.play_count }} {{ post.play_count == 1 ? __('play', 'wp-fedistream') : __('plays', 'wp-fedistream') }}</span>
{% endif %}
{% if post.explicit %}
<span class="fedistream-badge fedistream-badge--explicit">{{ __('Explicit', 'wp-fedistream') }}</span>
{% endif %}
</div>
{% if post.genres is not empty %}
<div class="fedistream-single__genres">
{% for genre in post.genres %}
<a href="{{ genre.link }}" class="fedistream-tag">{{ genre.name }}</a>
{% endfor %}
</div>
{% endif %}
{% if post.moods is not empty %}
<div class="fedistream-single__moods">
{% for mood in post.moods %}
<a href="{{ mood.link }}" class="fedistream-tag fedistream-tag--mood">{{ mood.name }}</a>
{% endfor %}
</div>
{% endif %}
</div>
</header>
{% if post.audio_url %}
<section class="fedistream-single__player">
<div class="fedistream-player" data-track-id="{{ post.id }}" data-audio-url="{{ post.audio_url }}">
<div class="fedistream-player__controls">
<button type="button" class="fedistream-player__btn fedistream-player__btn--play" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg class="fedistream-player__icon fedistream-player__icon--play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
<svg class="fedistream-player__icon fedistream-player__icon--pause" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
</button>
</div>
<div class="fedistream-player__progress">
<span class="fedistream-player__time fedistream-player__time--current">0:00</span>
<div class="fedistream-player__bar">
<div class="fedistream-player__bar-progress"></div>
<input type="range" class="fedistream-player__seek" min="0" max="100" value="0" aria-label="{{ __('Seek', 'wp-fedistream') }}">
</div>
<span class="fedistream-player__time fedistream-player__time--total">{{ post.duration_formatted|default('0:00') }}</span>
</div>
<div class="fedistream-player__volume">
<button type="button" class="fedistream-player__btn fedistream-player__btn--volume" aria-label="{{ __('Volume', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
</button>
<input type="range" class="fedistream-player__volume-slider" min="0" max="100" value="80" aria-label="{{ __('Volume', 'wp-fedistream') }}">
</div>
</div>
</section>
{% endif %}
{% if post.content %}
<section class="fedistream-single__content">
<h2 class="fedistream-section__title">{{ __('About This Track', 'wp-fedistream') }}</h2>
<div class="fedistream-single__description">
{{ post.content|raw }}
</div>
</section>
{% endif %}
{% if post.lyrics %}
<section class="fedistream-single__lyrics">
<h2 class="fedistream-section__title">{{ __('Lyrics', 'wp-fedistream') }}</h2>
<div class="fedistream-lyrics">
{{ post.lyrics|nl2br }}
</div>
</section>
{% endif %}
{% if post.credits %}
<section class="fedistream-single__credits">
<h2 class="fedistream-section__title">{{ __('Credits', 'wp-fedistream') }}</h2>
<div class="fedistream-credits">
{{ post.credits|raw }}
</div>
</section>
{% endif %}
{% if post.license %}
<section class="fedistream-single__license">
<p class="fedistream-license">
<strong>{{ __('License:', 'wp-fedistream') }}</strong>
<a href="{{ post.license.link }}">{{ post.license.name }}</a>
</p>
</section>
{% endif %}
</article>

View File

@@ -0,0 +1,41 @@
{# Featured Artist Widget Template #}
{% if post %}
<div class="fedistream-widget__featured">
<a href="{{ post.permalink }}" class="fedistream-widget__featured-link">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-widget__featured-image">
{% else %}
<span class="fedistream-widget__placeholder fedistream-widget__placeholder--large">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
</span>
{% endif %}
</a>
<div class="fedistream-widget__featured-info">
<h4 class="fedistream-widget__featured-name">
<a href="{{ post.permalink }}">{{ post.title }}</a>
</h4>
{% if post.artist_type %}
<span class="fedistream-widget__featured-type">{{ post.artist_type }}</span>
{% endif %}
{% if post.genres is not empty %}
<div class="fedistream-widget__featured-genres">
{% for genre in post.genres|slice(0, 3) %}
<a href="{{ genre.link }}" class="fedistream-tag fedistream-tag--small">{{ genre.name }}</a>
{% endfor %}
</div>
{% endif %}
{% if post.album_count or post.track_count %}
<div class="fedistream-widget__featured-stats">
{% if post.album_count %}
<span>{{ post.album_count }} {{ post.album_count == 1 ? __('album', 'wp-fedistream') : __('albums', 'wp-fedistream') }}</span>
{% endif %}
{% if post.track_count %}
<span>{{ post.track_count }} {{ post.track_count == 1 ? __('track', 'wp-fedistream') : __('tracks', 'wp-fedistream') }}</span>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% else %}
<p class="fedistream-widget__empty">{{ __('No artist selected.', 'wp-fedistream') }}</p>
{% endif %}

View File

@@ -0,0 +1,41 @@
{# Now Playing Widget Template #}
<div class="fedistream-now-playing" data-widget="now-playing">
<div class="fedistream-now-playing__idle">
<span class="fedistream-now-playing__placeholder">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
</span>
<span class="fedistream-now-playing__message">{{ __('Nothing playing', 'wp-fedistream') }}</span>
</div>
<div class="fedistream-now-playing__active" style="display: none;">
<div class="fedistream-now-playing__track">
<img src="" alt="" class="fedistream-now-playing__artwork">
<div class="fedistream-now-playing__info">
<span class="fedistream-now-playing__title"></span>
<span class="fedistream-now-playing__artist"></span>
</div>
</div>
{% if show_player %}
<div class="fedistream-now-playing__controls">
<button type="button" class="fedistream-now-playing__btn fedistream-now-playing__btn--prev" aria-label="{{ __('Previous', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
</button>
<button type="button" class="fedistream-now-playing__btn fedistream-now-playing__btn--play" aria-label="{{ __('Play/Pause', 'wp-fedistream') }}">
<svg class="fedistream-now-playing__icon fedistream-now-playing__icon--play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
<svg class="fedistream-now-playing__icon fedistream-now-playing__icon--pause" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
</button>
<button type="button" class="fedistream-now-playing__btn fedistream-now-playing__btn--next" aria-label="{{ __('Next', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
</button>
</div>
<div class="fedistream-now-playing__progress">
<div class="fedistream-now-playing__bar">
<div class="fedistream-now-playing__bar-progress"></div>
</div>
<div class="fedistream-now-playing__times">
<span class="fedistream-now-playing__time fedistream-now-playing__time--current">0:00</span>
<span class="fedistream-now-playing__time fedistream-now-playing__time--total">0:00</span>
</div>
</div>
{% endif %}
</div>
</div>

View File

@@ -0,0 +1,32 @@
{# Popular Tracks Widget Template #}
{% if posts is not empty %}
<ol class="fedistream-widget__list fedistream-widget__list--tracks">
{% for post in posts %}
<li class="fedistream-widget__item" data-track-id="{{ post.id }}">
<a href="{{ post.permalink }}" class="fedistream-widget__link">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-widget__image">
{% else %}
<span class="fedistream-widget__placeholder">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
</span>
{% endif %}
<span class="fedistream-widget__info">
<span class="fedistream-widget__title">{{ post.title }}</span>
{% if post.artist %}
<span class="fedistream-widget__artist">{{ post.artist }}</span>
{% endif %}
</span>
{% if post.play_count %}
<span class="fedistream-widget__plays">{{ post.play_count|number_format }}</span>
{% endif %}
</a>
<button type="button" class="fedistream-widget__play" data-track-id="{{ post.id }}" aria-label="{{ __('Play', 'wp-fedistream') }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
</li>
{% endfor %}
</ol>
{% else %}
<p class="fedistream-widget__empty">{{ __('No tracks yet.', 'wp-fedistream') }}</p>
{% endif %}

View File

@@ -0,0 +1,29 @@
{# Recent Releases Widget Template #}
{% if posts is not empty %}
<ul class="fedistream-widget__list fedistream-widget__list--releases">
{% for post in posts %}
<li class="fedistream-widget__item">
<a href="{{ post.permalink }}" class="fedistream-widget__link">
{% if post.thumbnail %}
<img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-widget__image">
{% else %}
<span class="fedistream-widget__placeholder">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"/></svg>
</span>
{% endif %}
<span class="fedistream-widget__info">
<span class="fedistream-widget__title">{{ post.title }}</span>
{% if post.artist %}
<span class="fedistream-widget__artist">{{ post.artist }}</span>
{% endif %}
{% if post.release_date %}
<span class="fedistream-widget__date">{{ post.release_date }}</span>
{% endif %}
</span>
</a>
</li>
{% endfor %}
</ul>
{% else %}
<p class="fedistream-widget__empty">{{ __('No releases yet.', 'wp-fedistream') }}</p>
{% endif %}