You've already forked wp-fedistream
150 lines
8.3 KiB
PHP
150 lines
8.3 KiB
PHP
|
<?php
|
||
|
|
/**
|
||
|
|
* Single track template.
|
||
|
|
*
|
||
|
|
* @package WP_FediStream
|
||
|
|
*
|
||
|
|
* @var array $post Track data array.
|
||
|
|
*/
|
||
|
|
|
||
|
|
// Prevent direct file access.
|
||
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
||
|
|
exit;
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
<article class="fedistream-single fedistream-single--track">
|
||
|
|
<header class="fedistream-single__header fedistream-single__header--track">
|
||
|
|
<div class="fedistream-single__artwork">
|
||
|
|
<?php if ( ! empty( $post['thumbnail'] ) ) : ?>
|
||
|
|
<img src="<?php echo esc_url( $post['thumbnail'] ); ?>" alt="<?php echo esc_attr( $post['title'] ?? '' ); ?>" class="fedistream-single__image fedistream-single__image--track">
|
||
|
|
<?php 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>
|
||
|
|
<?php endif; ?>
|
||
|
|
<button type="button" class="fedistream-single__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>
|
||
|
|
</div>
|
||
|
|
<div class="fedistream-single__info">
|
||
|
|
<h1 class="fedistream-single__title"><?php echo esc_html( $post['title'] ?? '' ); ?></h1>
|
||
|
|
<?php if ( ! empty( $post['artists'] ) && is_array( $post['artists'] ) ) : ?>
|
||
|
|
<p class="fedistream-single__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-single__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-single__meta">
|
||
|
|
<?php if ( ! empty( $post['duration_formatted'] ) ) : ?>
|
||
|
|
<span class="fedistream-single__duration"><?php echo esc_html( $post['duration_formatted'] ); ?></span>
|
||
|
|
<?php endif; ?>
|
||
|
|
<?php if ( ! empty( $post['play_count'] ) ) : ?>
|
||
|
|
<span class="fedistream-single__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; ?>
|
||
|
|
<?php if ( ! empty( $post['explicit'] ) ) : ?>
|
||
|
|
<span class="fedistream-badge fedistream-badge--explicit"><?php esc_html_e( 'Explicit', 'wp-fedistream' ); ?></span>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|
||
|
|
<?php if ( ! empty( $post['genres'] ) && is_array( $post['genres'] ) ) : ?>
|
||
|
|
<div class="fedistream-single__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; ?>
|
||
|
|
<?php if ( ! empty( $post['moods'] ) && is_array( $post['moods'] ) ) : ?>
|
||
|
|
<div class="fedistream-single__moods">
|
||
|
|
<?php foreach ( $post['moods'] as $mood ) : ?>
|
||
|
|
<a href="<?php echo esc_url( $mood['url'] ?? '#' ); ?>" class="fedistream-tag fedistream-tag--mood"><?php echo esc_html( $mood['name'] ?? '' ); ?></a>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<?php if ( ! empty( $post['audio_url'] ) ) : ?>
|
||
|
|
<section class="fedistream-single__player">
|
||
|
|
<div class="fedistream-player" data-track-id="<?php echo esc_attr( $post['id'] ?? '' ); ?>" data-audio-url="<?php echo esc_url( $post['audio_url'] ); ?>">
|
||
|
|
<div class="fedistream-player__controls">
|
||
|
|
<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>
|
||
|
|
<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( $post['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>
|
||
|
|
</section>
|
||
|
|
<?php endif; ?>
|
||
|
|
|
||
|
|
<?php if ( ! empty( $post['content'] ) ) : ?>
|
||
|
|
<section class="fedistream-single__content">
|
||
|
|
<h2 class="fedistream-section__title"><?php esc_html_e( 'About This Track', 'wp-fedistream' ); ?></h2>
|
||
|
|
<div class="fedistream-single__description">
|
||
|
|
<?php echo wp_kses_post( $post['content'] ); ?>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<?php endif; ?>
|
||
|
|
|
||
|
|
<?php if ( ! empty( $post['lyrics'] ) ) : ?>
|
||
|
|
<section class="fedistream-single__lyrics">
|
||
|
|
<h2 class="fedistream-section__title"><?php esc_html_e( 'Lyrics', 'wp-fedistream' ); ?></h2>
|
||
|
|
<div class="fedistream-lyrics">
|
||
|
|
<?php echo nl2br( esc_html( $post['lyrics'] ) ); ?>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<?php endif; ?>
|
||
|
|
|
||
|
|
<?php if ( ! empty( $post['credits'] ) ) : ?>
|
||
|
|
<section class="fedistream-single__credits">
|
||
|
|
<h2 class="fedistream-section__title"><?php esc_html_e( 'Credits', 'wp-fedistream' ); ?></h2>
|
||
|
|
<div class="fedistream-credits">
|
||
|
|
<?php echo wp_kses_post( $post['credits'] ); ?>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<?php endif; ?>
|
||
|
|
|
||
|
|
<?php if ( ! empty( $post['license'] ) ) : ?>
|
||
|
|
<section class="fedistream-single__license">
|
||
|
|
<p class="fedistream-license">
|
||
|
|
<strong><?php esc_html_e( 'License:', 'wp-fedistream' ); ?></strong>
|
||
|
|
<a href="<?php echo esc_url( $post['license']['link'] ?? '#' ); ?>"><?php echo esc_html( $post['license']['name'] ?? '' ); ?></a>
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
<?php endif; ?>
|
||
|
|
</article>
|