wp-fedistream/templates/shortcodes/player.php

<?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>