wp-fedistream/templates/shortcodes/track.twig

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