You've already forked wp-fedistream
magdev
4a5d7b9f4d
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>
109 lines
8.0 KiB
Twig
109 lines
8.0 KiB
Twig
{# 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>
|