You've already forked wp-fedistream
feat: Replace Twig with native PHP templates
All checks were successful
Create Release Package / build-release (push) Successful in 55s
All checks were successful
Create Release Package / build-release (push) Successful in 55s
- Remove twig/twig dependency from composer.json - Convert all 25 Twig templates to native PHP templates - New render() method in Plugin.php using PHP include with output buffering - New render_partial() helper method for including partials - Templates support theme overrides via fedistream/ directory - Reduced plugin size by eliminating Twig and its dependencies Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
89
templates/shortcodes/album.php
Normal file
89
templates/shortcodes/album.php
Normal file
@@ -0,0 +1,89 @@
|
||||
<?php
|
||||
/**
|
||||
* Album shortcode template.
|
||||
*
|
||||
* @package WP_FediStream
|
||||
*
|
||||
* @var array $post Album data array.
|
||||
* @var string $layout Layout style (full, card, compact).
|
||||
* @var bool $show_tracks Whether to show tracks.
|
||||
*/
|
||||
|
||||
// Prevent direct file access.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$layout = $layout ?? 'full';
|
||||
?>
|
||||
<div class="fedistream-shortcode fedistream-shortcode--album fedistream-shortcode--<?php echo esc_attr( $layout ); ?>">
|
||||
<div class="fedistream-album">
|
||||
<div class="fedistream-album__header">
|
||||
<div class="fedistream-album__artwork">
|
||||
<?php if ( ! empty( $post['thumbnail'] ) ) : ?>
|
||||
<img src="<?php echo esc_url( $post['thumbnail'] ); ?>" alt="<?php echo esc_attr( $post['title'] ?? '' ); ?>" class="fedistream-album__image">
|
||||
<?php 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>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="fedistream-album__info">
|
||||
<?php if ( ! empty( $post['album_type_label'] ) ) : ?>
|
||||
<span class="fedistream-album__type-badge"><?php echo esc_html( $post['album_type_label'] ); ?></span>
|
||||
<?php endif; ?>
|
||||
<h3 class="fedistream-album__title">
|
||||
<a href="<?php echo esc_url( $post['permalink'] ?? '#' ); ?>"><?php echo esc_html( $post['title'] ?? '' ); ?></a>
|
||||
</h3>
|
||||
<?php if ( ! empty( $post['artist_name'] ) ) : ?>
|
||||
<p class="fedistream-album__artist">
|
||||
<a href="<?php echo esc_url( $post['artist_url'] ?? '#' ); ?>"><?php echo esc_html( $post['artist_name'] ); ?></a>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
<div class="fedistream-album__meta">
|
||||
<?php if ( ! empty( $post['release_date'] ) ) : ?>
|
||||
<span class="fedistream-album__date"><?php echo esc_html( $post['release_date'] ); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $post['total_tracks'] ) ) : ?>
|
||||
<span class="fedistream-album__tracks">
|
||||
<?php
|
||||
printf(
|
||||
/* translators: %d: number of tracks */
|
||||
esc_html( _n( '%d track', '%d tracks', $post['total_tracks'], 'wp-fedistream' ) ),
|
||||
(int) $post['total_tracks']
|
||||
);
|
||||
?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="fedistream-album__actions">
|
||||
<button type="button" class="fedistream-btn fedistream-btn--primary fedistream-btn--play-all" data-album-id="<?php echo esc_attr( $post['id'] ?? '' ); ?>">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
||||
<?php esc_html_e( 'Play', 'wp-fedistream' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ( ! empty( $show_tracks ) && ! empty( $post['tracks'] ) && is_array( $post['tracks'] ) ) : ?>
|
||||
<div class="fedistream-album__tracklist">
|
||||
<div class="fedistream-tracklist">
|
||||
<?php foreach ( $post['tracks'] as $index => $track ) : ?>
|
||||
<div class="fedistream-tracklist__item" data-track-id="<?php echo esc_attr( $track['id'] ?? '' ); ?>">
|
||||
<span class="fedistream-tracklist__number"><?php echo esc_html( $track['track_number'] ?? ( $index + 1 ) ); ?></span>
|
||||
<div class="fedistream-tracklist__info">
|
||||
<a href="<?php echo esc_url( $track['permalink'] ?? '#' ); ?>" class="fedistream-tracklist__title"><?php echo esc_html( $track['title'] ?? '' ); ?></a>
|
||||
</div>
|
||||
<?php if ( ! empty( $track['duration_formatted'] ) ) : ?>
|
||||
<span class="fedistream-tracklist__duration"><?php echo esc_html( $track['duration_formatted'] ); ?></span>
|
||||
<?php endif; ?>
|
||||
<button type="button" class="fedistream-tracklist__play" aria-label="<?php esc_attr_e( 'Play', 'wp-fedistream' ); ?>">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,64 +0,0 @@
|
||||
{# 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>
|
||||
84
templates/shortcodes/artist.php
Normal file
84
templates/shortcodes/artist.php
Normal file
@@ -0,0 +1,84 @@
|
||||
<?php
|
||||
/**
|
||||
* Artist shortcode template.
|
||||
*
|
||||
* @package WP_FediStream
|
||||
*
|
||||
* @var array $post Artist data array.
|
||||
* @var string $layout Layout style (full, card, compact).
|
||||
* @var bool $show_albums Whether to show albums.
|
||||
* @var bool $show_tracks Whether to show tracks.
|
||||
*/
|
||||
|
||||
// Prevent direct file access.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$plugin = \WP_FediStream\Plugin::get_instance();
|
||||
$layout = $layout ?? 'full';
|
||||
?>
|
||||
<div class="fedistream-shortcode fedistream-shortcode--artist fedistream-shortcode--<?php echo esc_attr( $layout ); ?>">
|
||||
<div class="fedistream-artist">
|
||||
<div class="fedistream-artist__header">
|
||||
<?php if ( ! empty( $post['thumbnail'] ) ) : ?>
|
||||
<img src="<?php echo esc_url( $post['thumbnail'] ); ?>" alt="<?php echo esc_attr( $post['title'] ?? '' ); ?>" class="fedistream-artist__image">
|
||||
<?php 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>
|
||||
<?php endif; ?>
|
||||
<div class="fedistream-artist__info">
|
||||
<h3 class="fedistream-artist__name">
|
||||
<a href="<?php echo esc_url( $post['permalink'] ?? '#' ); ?>"><?php echo esc_html( $post['title'] ?? '' ); ?></a>
|
||||
</h3>
|
||||
<?php if ( ! empty( $post['artist_type_label'] ) ) : ?>
|
||||
<span class="fedistream-artist__type"><?php echo esc_html( $post['artist_type_label'] ); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $post['genres'] ) && is_array( $post['genres'] ) ) : ?>
|
||||
<div class="fedistream-artist__genres">
|
||||
<?php foreach ( $post['genres'] as $genre ) : ?>
|
||||
<a href="<?php echo esc_url( $genre['url'] ?? '#' ); ?>" class="fedistream-tag"><?php echo esc_html( $genre['name'] ?? '' ); ?></a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ( 'full' === $layout && ! empty( $post['content'] ) ) : ?>
|
||||
<div class="fedistream-artist__bio">
|
||||
<?php echo wp_kses_post( $post['content'] ); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( ! empty( $show_albums ) && ! empty( $post['albums'] ) && is_array( $post['albums'] ) ) : ?>
|
||||
<div class="fedistream-artist__albums">
|
||||
<h4 class="fedistream-section__title"><?php esc_html_e( 'Albums', 'wp-fedistream' ); ?></h4>
|
||||
<div class="fedistream-grid fedistream-grid--small">
|
||||
<?php foreach ( array_slice( $post['albums'], 0, 4 ) as $album ) : ?>
|
||||
<?php echo $plugin->render_partial( 'partials/card-album', array( 'post' => $album ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( ! empty( $show_tracks ) && ! empty( $post['tracks'] ) && is_array( $post['tracks'] ) ) : ?>
|
||||
<div class="fedistream-artist__tracks">
|
||||
<h4 class="fedistream-section__title"><?php esc_html_e( 'Popular Tracks', 'wp-fedistream' ); ?></h4>
|
||||
<div class="fedistream-tracklist fedistream-tracklist--compact">
|
||||
<?php foreach ( array_slice( $post['tracks'], 0, 5 ) as $index => $track ) : ?>
|
||||
<div class="fedistream-tracklist__item" data-track-id="<?php echo esc_attr( $track['id'] ?? '' ); ?>">
|
||||
<span class="fedistream-tracklist__number"><?php echo esc_html( $index + 1 ); ?></span>
|
||||
<div class="fedistream-tracklist__info">
|
||||
<a href="<?php echo esc_url( $track['permalink'] ?? '#' ); ?>" class="fedistream-tracklist__title"><?php echo esc_html( $track['title'] ?? '' ); ?></a>
|
||||
</div>
|
||||
<?php if ( ! empty( $track['duration_formatted'] ) ) : ?>
|
||||
<span class="fedistream-tracklist__duration"><?php echo esc_html( $track['duration_formatted'] ); ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,65 +0,0 @@
|
||||
{# 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>
|
||||
36
templates/shortcodes/artists-grid.php
Normal file
36
templates/shortcodes/artists-grid.php
Normal file
@@ -0,0 +1,36 @@
|
||||
<?php
|
||||
/**
|
||||
* Artists grid shortcode template.
|
||||
*
|
||||
* @package WP_FediStream
|
||||
*
|
||||
* @var array $posts Array of artist data.
|
||||
* @var int $columns Number of columns.
|
||||
* @var string $title Section title.
|
||||
*/
|
||||
|
||||
// Prevent direct file access.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$plugin = \WP_FediStream\Plugin::get_instance();
|
||||
$columns = $columns ?? 4;
|
||||
?>
|
||||
<div class="fedistream-shortcode fedistream-shortcode--artists">
|
||||
<?php if ( ! empty( $title ) ) : ?>
|
||||
<h3 class="fedistream-shortcode__title"><?php echo esc_html( $title ); ?></h3>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( ! empty( $posts ) && is_array( $posts ) ) : ?>
|
||||
<div class="fedistream-grid fedistream-grid--artists fedistream-grid--cols-<?php echo esc_attr( $columns ); ?>">
|
||||
<?php foreach ( $posts as $post ) : ?>
|
||||
<?php echo $plugin->render_partial( 'partials/card-artist', array( 'post' => $post ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<div class="fedistream-empty">
|
||||
<p><?php esc_html_e( 'No artists found.', 'wp-fedistream' ); ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
@@ -1,18 +0,0 @@
|
||||
{# 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>
|
||||
127
templates/shortcodes/player.php
Normal file
127
templates/shortcodes/player.php
Normal file
@@ -0,0 +1,127 @@
|
||||
<?php
|
||||
/**
|
||||
* Player shortcode template.
|
||||
*
|
||||
* @package WP_FediStream
|
||||
*
|
||||
* @var array $tracks Array of track data.
|
||||
* @var bool $autoplay Whether to autoplay.
|
||||
* @var string $style Player style (default, compact, mini).
|
||||
*/
|
||||
|
||||
// Prevent direct file access.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$style = $style ?? 'default';
|
||||
$autoplay = $autoplay ?? false;
|
||||
|
||||
if ( empty( $tracks ) || ! is_array( $tracks ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$first_track = $tracks[0];
|
||||
$is_playlist = count( $tracks ) > 1;
|
||||
?>
|
||||
<div class="fedistream-shortcode fedistream-shortcode--player fedistream-player-shortcode fedistream-player-shortcode--<?php echo esc_attr( $style ); ?>" data-autoplay="<?php echo esc_attr( $autoplay ? 'true' : 'false' ); ?>">
|
||||
<div class="fedistream-player-shortcode__container">
|
||||
<?php if ( 'mini' !== $style ) : ?>
|
||||
<div class="fedistream-player-shortcode__artwork">
|
||||
<?php if ( ! empty( $first_track['thumbnail'] ) ) : ?>
|
||||
<img src="<?php echo esc_url( $first_track['thumbnail'] ); ?>" alt="<?php echo esc_attr( $first_track['title'] ?? '' ); ?>" class="fedistream-player-shortcode__image">
|
||||
<?php else : ?>
|
||||
<div class="fedistream-player-shortcode__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>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="fedistream-player-shortcode__info">
|
||||
<h4 class="fedistream-player-shortcode__title"><?php echo esc_html( $first_track['title'] ?? '' ); ?></h4>
|
||||
<?php if ( ! empty( $first_track['artists'] ) && is_array( $first_track['artists'] ) ) : ?>
|
||||
<p class="fedistream-player-shortcode__artist">
|
||||
<?php
|
||||
$artist_names = array_map(
|
||||
function ( $artist ) {
|
||||
return esc_html( $artist['name'] ?? '' );
|
||||
},
|
||||
$first_track['artists']
|
||||
);
|
||||
echo implode( ', ', $artist_names ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
?>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="fedistream-player" data-track-id="<?php echo esc_attr( $first_track['id'] ?? '' ); ?>" data-audio-url="<?php echo esc_url( $first_track['audio_url'] ?? '' ); ?>">
|
||||
<div class="fedistream-player__controls">
|
||||
<?php if ( $is_playlist ) : ?>
|
||||
<button type="button" class="fedistream-player__btn fedistream-player__btn--prev" aria-label="<?php esc_attr_e( 'Previous', 'wp-fedistream' ); ?>">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
|
||||
<button type="button" class="fedistream-player__btn fedistream-player__btn--play" aria-label="<?php esc_attr_e( '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>
|
||||
|
||||
<?php if ( $is_playlist ) : ?>
|
||||
<button type="button" class="fedistream-player__btn fedistream-player__btn--next" aria-label="<?php esc_attr_e( 'Next', 'wp-fedistream' ); ?>">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</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="<?php esc_attr_e( 'Seek', 'wp-fedistream' ); ?>">
|
||||
</div>
|
||||
<span class="fedistream-player__time fedistream-player__time--total"><?php echo esc_html( $first_track['duration_formatted'] ?? '0:00' ); ?></span>
|
||||
</div>
|
||||
|
||||
<div class="fedistream-player__volume">
|
||||
<button type="button" class="fedistream-player__btn fedistream-player__btn--volume" aria-label="<?php esc_attr_e( '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="<?php esc_attr_e( 'Volume', 'wp-fedistream' ); ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ( $is_playlist ) : ?>
|
||||
<div class="fedistream-player-shortcode__playlist" data-tracks='<?php echo esc_attr( wp_json_encode( array_map( function ( $track ) {
|
||||
return array(
|
||||
'id' => $track['id'] ?? 0,
|
||||
'title' => $track['title'] ?? '',
|
||||
'artist' => ! empty( $track['artists'] ) ? implode( ', ', array_column( $track['artists'], 'name' ) ) : '',
|
||||
'audio' => $track['audio_url'] ?? '',
|
||||
'duration' => $track['duration_formatted'] ?? '0:00',
|
||||
'artwork' => $track['thumbnail'] ?? '',
|
||||
);
|
||||
}, $tracks ) ) ); ?>'>
|
||||
<div class="fedistream-tracklist fedistream-tracklist--player">
|
||||
<?php foreach ( $tracks as $index => $track ) : ?>
|
||||
<div class="fedistream-tracklist__item<?php echo 0 === $index ? ' fedistream-tracklist__item--active' : ''; ?>" data-track-id="<?php echo esc_attr( $track['id'] ?? '' ); ?>" data-index="<?php echo esc_attr( $index ); ?>">
|
||||
<span class="fedistream-tracklist__number"><?php echo esc_html( $index + 1 ); ?></span>
|
||||
<div class="fedistream-tracklist__info">
|
||||
<span class="fedistream-tracklist__title"><?php echo esc_html( $track['title'] ?? '' ); ?></span>
|
||||
<?php if ( ! empty( $track['artists'] ) && is_array( $track['artists'] ) ) : ?>
|
||||
<span class="fedistream-tracklist__artist">
|
||||
<?php echo esc_html( implode( ', ', array_column( $track['artists'], 'name' ) ) ); ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php if ( ! empty( $track['duration_formatted'] ) ) : ?>
|
||||
<span class="fedistream-tracklist__duration"><?php echo esc_html( $track['duration_formatted'] ); ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
@@ -1,108 +0,0 @@
|
||||
{# 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>
|
||||
96
templates/shortcodes/playlist.php
Normal file
96
templates/shortcodes/playlist.php
Normal file
@@ -0,0 +1,96 @@
|
||||
<?php
|
||||
/**
|
||||
* Playlist shortcode template.
|
||||
*
|
||||
* @package WP_FediStream
|
||||
*
|
||||
* @var array $post Playlist data array.
|
||||
* @var string $layout Layout style (full, card, compact).
|
||||
* @var bool $show_tracks Whether to show tracks.
|
||||
*/
|
||||
|
||||
// Prevent direct file access.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$layout = $layout ?? 'full';
|
||||
?>
|
||||
<div class="fedistream-shortcode fedistream-shortcode--playlist fedistream-shortcode--<?php echo esc_attr( $layout ); ?>">
|
||||
<div class="fedistream-playlist">
|
||||
<div class="fedistream-playlist__header">
|
||||
<div class="fedistream-playlist__artwork">
|
||||
<?php if ( ! empty( $post['thumbnail'] ) ) : ?>
|
||||
<img src="<?php echo esc_url( $post['thumbnail'] ); ?>" alt="<?php echo esc_attr( $post['title'] ?? '' ); ?>" class="fedistream-playlist__image">
|
||||
<?php 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>
|
||||
<?php endif; ?>
|
||||
<?php if ( isset( $post['visibility'] ) && 'private' === $post['visibility'] ) : ?>
|
||||
<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>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="fedistream-playlist__info">
|
||||
<span class="fedistream-playlist__type-badge"><?php esc_html_e( 'Playlist', 'wp-fedistream' ); ?></span>
|
||||
<h3 class="fedistream-playlist__title">
|
||||
<a href="<?php echo esc_url( $post['permalink'] ?? '#' ); ?>"><?php echo esc_html( $post['title'] ?? '' ); ?></a>
|
||||
</h3>
|
||||
<?php if ( ! empty( $post['author'] ) ) : ?>
|
||||
<p class="fedistream-playlist__author">
|
||||
<?php esc_html_e( 'by', 'wp-fedistream' ); ?> <?php echo esc_html( $post['author'] ); ?>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
<div class="fedistream-playlist__meta">
|
||||
<?php if ( ! empty( $post['track_count'] ) ) : ?>
|
||||
<span class="fedistream-playlist__count">
|
||||
<?php
|
||||
printf(
|
||||
/* translators: %d: number of tracks */
|
||||
esc_html( _n( '%d track', '%d tracks', $post['track_count'], 'wp-fedistream' ) ),
|
||||
(int) $post['track_count']
|
||||
);
|
||||
?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $post['duration_formatted'] ) ) : ?>
|
||||
<span class="fedistream-playlist__duration"><?php echo esc_html( $post['duration_formatted'] ); ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="fedistream-playlist__actions">
|
||||
<button type="button" class="fedistream-btn fedistream-btn--primary fedistream-btn--play-all" data-playlist-id="<?php echo esc_attr( $post['id'] ?? '' ); ?>">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
||||
<?php esc_html_e( 'Play', 'wp-fedistream' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ( ! empty( $show_tracks ) && ! empty( $post['tracks'] ) && is_array( $post['tracks'] ) ) : ?>
|
||||
<div class="fedistream-playlist__tracklist">
|
||||
<div class="fedistream-tracklist">
|
||||
<?php foreach ( $post['tracks'] as $index => $track ) : ?>
|
||||
<div class="fedistream-tracklist__item" data-track-id="<?php echo esc_attr( $track['id'] ?? '' ); ?>">
|
||||
<span class="fedistream-tracklist__number"><?php echo esc_html( $index + 1 ); ?></span>
|
||||
<?php if ( ! empty( $track['thumbnail'] ) ) : ?>
|
||||
<img src="<?php echo esc_url( $track['thumbnail'] ); ?>" alt="" class="fedistream-tracklist__artwork">
|
||||
<?php endif; ?>
|
||||
<div class="fedistream-tracklist__info">
|
||||
<a href="<?php echo esc_url( $track['permalink'] ?? '#' ); ?>" class="fedistream-tracklist__title"><?php echo esc_html( $track['title'] ?? '' ); ?></a>
|
||||
<span class="fedistream-tracklist__artist"><?php echo esc_html( $track['artist'] ?? '' ); ?></span>
|
||||
</div>
|
||||
<?php if ( ! empty( $track['duration_formatted'] ) ) : ?>
|
||||
<span class="fedistream-tracklist__duration"><?php echo esc_html( $track['duration_formatted'] ); ?></span>
|
||||
<?php endif; ?>
|
||||
<button type="button" class="fedistream-tracklist__play" aria-label="<?php esc_attr_e( 'Play', 'wp-fedistream' ); ?>">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,71 +0,0 @@
|
||||
{# 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>
|
||||
36
templates/shortcodes/releases-grid.php
Normal file
36
templates/shortcodes/releases-grid.php
Normal file
@@ -0,0 +1,36 @@
|
||||
<?php
|
||||
/**
|
||||
* Releases grid shortcode template.
|
||||
*
|
||||
* @package WP_FediStream
|
||||
*
|
||||
* @var array $posts Array of album data.
|
||||
* @var int $columns Number of columns.
|
||||
* @var string $title Section title.
|
||||
*/
|
||||
|
||||
// Prevent direct file access.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$plugin = \WP_FediStream\Plugin::get_instance();
|
||||
$columns = $columns ?? 3;
|
||||
?>
|
||||
<div class="fedistream-shortcode fedistream-shortcode--releases">
|
||||
<?php if ( ! empty( $title ) ) : ?>
|
||||
<h3 class="fedistream-shortcode__title"><?php echo esc_html( $title ); ?></h3>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( ! empty( $posts ) && is_array( $posts ) ) : ?>
|
||||
<div class="fedistream-grid fedistream-grid--albums fedistream-grid--cols-<?php echo esc_attr( $columns ); ?>">
|
||||
<?php foreach ( $posts as $post ) : ?>
|
||||
<?php echo $plugin->render_partial( 'partials/card-album', array( 'post' => $post ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<div class="fedistream-empty">
|
||||
<p><?php esc_html_e( 'No releases found.', 'wp-fedistream' ); ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
@@ -1,18 +0,0 @@
|
||||
{# 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>
|
||||
97
templates/shortcodes/track.php
Normal file
97
templates/shortcodes/track.php
Normal file
@@ -0,0 +1,97 @@
|
||||
<?php
|
||||
/**
|
||||
* Track shortcode template.
|
||||
*
|
||||
* @package WP_FediStream
|
||||
*
|
||||
* @var array $post Track data array.
|
||||
* @var string $layout Layout style (full, card, compact).
|
||||
* @var bool $show_player Whether to show the player.
|
||||
*/
|
||||
|
||||
// Prevent direct file access.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$layout = $layout ?? 'full';
|
||||
?>
|
||||
<div class="fedistream-shortcode fedistream-shortcode--track fedistream-shortcode--<?php echo esc_attr( $layout ); ?>">
|
||||
<div class="fedistream-track">
|
||||
<div class="fedistream-track__header">
|
||||
<div class="fedistream-track__artwork">
|
||||
<?php if ( ! empty( $post['thumbnail'] ) ) : ?>
|
||||
<img src="<?php echo esc_url( $post['thumbnail'] ); ?>" alt="<?php echo esc_attr( $post['title'] ?? '' ); ?>" class="fedistream-track__image">
|
||||
<?php 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>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $show_player ) ) : ?>
|
||||
<button type="button" class="fedistream-track__play-overlay" data-track-id="<?php echo esc_attr( $post['id'] ?? '' ); ?>" aria-label="<?php esc_attr_e( 'Play', 'wp-fedistream' ); ?>">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="fedistream-track__info">
|
||||
<h3 class="fedistream-track__title">
|
||||
<a href="<?php echo esc_url( $post['permalink'] ?? '#' ); ?>"><?php echo esc_html( $post['title'] ?? '' ); ?></a>
|
||||
</h3>
|
||||
<?php if ( ! empty( $post['artists'] ) && is_array( $post['artists'] ) ) : ?>
|
||||
<p class="fedistream-track__artists">
|
||||
<?php
|
||||
$artist_links = array();
|
||||
foreach ( $post['artists'] as $artist ) {
|
||||
$artist_links[] = sprintf(
|
||||
'<a href="%s">%s</a>',
|
||||
esc_url( $artist['url'] ?? '#' ),
|
||||
esc_html( $artist['name'] ?? '' )
|
||||
);
|
||||
}
|
||||
echo implode( ', ', $artist_links ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
?>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $post['album_title'] ) ) : ?>
|
||||
<p class="fedistream-track__album">
|
||||
<?php esc_html_e( 'From', 'wp-fedistream' ); ?> <a href="<?php echo esc_url( $post['album_url'] ?? '#' ); ?>"><?php echo esc_html( $post['album_title'] ); ?></a>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
<div class="fedistream-track__meta">
|
||||
<?php if ( ! empty( $post['duration_formatted'] ) ) : ?>
|
||||
<span class="fedistream-track__duration"><?php echo esc_html( $post['duration_formatted'] ); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $post['play_count'] ) ) : ?>
|
||||
<span class="fedistream-track__plays">
|
||||
<?php
|
||||
printf(
|
||||
/* translators: %d: number of plays */
|
||||
esc_html( _n( '%d play', '%d plays', $post['play_count'], 'wp-fedistream' ) ),
|
||||
(int) $post['play_count']
|
||||
);
|
||||
?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ( ! empty( $show_player ) && ! empty( $post['audio_url'] ) ) : ?>
|
||||
<div class="fedistream-track__player">
|
||||
<div class="fedistream-player fedistream-player--inline" data-track-id="<?php echo esc_attr( $post['id'] ?? '' ); ?>" data-audio-url="<?php echo esc_url( $post['audio_url'] ); ?>">
|
||||
<button type="button" class="fedistream-player__btn fedistream-player__btn--play" aria-label="<?php esc_attr_e( '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="<?php esc_attr_e( 'Seek', 'wp-fedistream' ); ?>">
|
||||
</div>
|
||||
</div>
|
||||
<span class="fedistream-player__time"><?php echo esc_html( $post['duration_formatted'] ?? '0:00' ); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,64 +0,0 @@
|
||||
{# 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>
|
||||
73
templates/shortcodes/tracks-list.php
Normal file
73
templates/shortcodes/tracks-list.php
Normal file
@@ -0,0 +1,73 @@
|
||||
<?php
|
||||
/**
|
||||
* Tracks list shortcode template.
|
||||
*
|
||||
* @package WP_FediStream
|
||||
*
|
||||
* @var array $posts Array of track data.
|
||||
* @var int $columns Number of columns.
|
||||
* @var string $title Section title.
|
||||
*/
|
||||
|
||||
// Prevent direct file access.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$columns = $columns ?? 1;
|
||||
?>
|
||||
<div class="fedistream-shortcode fedistream-shortcode--tracks">
|
||||
<?php if ( ! empty( $title ) ) : ?>
|
||||
<h3 class="fedistream-shortcode__title"><?php echo esc_html( $title ); ?></h3>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( ! empty( $posts ) && is_array( $posts ) ) : ?>
|
||||
<div class="fedistream-tracklist fedistream-tracklist--numbered">
|
||||
<?php foreach ( $posts as $index => $post ) : ?>
|
||||
<div class="fedistream-tracklist__item" data-track-id="<?php echo esc_attr( $post['id'] ?? '' ); ?>">
|
||||
<span class="fedistream-tracklist__rank"><?php echo esc_html( $index + 1 ); ?></span>
|
||||
<?php if ( ! empty( $post['thumbnail'] ) ) : ?>
|
||||
<img src="<?php echo esc_url( $post['thumbnail'] ); ?>" alt="" class="fedistream-tracklist__artwork">
|
||||
<?php 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>
|
||||
<?php endif; ?>
|
||||
<div class="fedistream-tracklist__info">
|
||||
<a href="<?php echo esc_url( $post['permalink'] ?? '#' ); ?>" class="fedistream-tracklist__title"><?php echo esc_html( $post['title'] ?? '' ); ?></a>
|
||||
<span class="fedistream-tracklist__artist">
|
||||
<?php if ( ! empty( $post['artists'] ) && is_array( $post['artists'] ) ) : ?>
|
||||
<?php
|
||||
$artist_links = array();
|
||||
foreach ( $post['artists'] as $artist ) {
|
||||
$artist_links[] = sprintf(
|
||||
'<a href="%s">%s</a>',
|
||||
esc_url( $artist['url'] ?? '#' ),
|
||||
esc_html( $artist['name'] ?? '' )
|
||||
);
|
||||
}
|
||||
echo implode( ', ', $artist_links ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
?>
|
||||
<?php elseif ( ! empty( $post['artist'] ) ) : ?>
|
||||
<?php echo esc_html( $post['artist'] ); ?>
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
</div>
|
||||
<?php if ( ! empty( $post['play_count'] ) ) : ?>
|
||||
<span class="fedistream-tracklist__plays"><?php echo esc_html( number_format( $post['play_count'] ) ); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $post['duration_formatted'] ) ) : ?>
|
||||
<span class="fedistream-tracklist__duration"><?php echo esc_html( $post['duration_formatted'] ); ?></span>
|
||||
<?php endif; ?>
|
||||
<button type="button" class="fedistream-tracklist__play" aria-label="<?php esc_attr_e( 'Play', 'wp-fedistream' ); ?>">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<div class="fedistream-empty">
|
||||
<p><?php esc_html_e( 'No tracks found.', 'wp-fedistream' ); ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
@@ -1,48 +0,0 @@
|
||||
{# 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>
|
||||
Reference in New Issue
Block a user