wp-fedistream/templates/shortcodes/album.twig

{# 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>