wp-fedistream/templates/widgets/now-playing.php

<?php
/**
 * Now Playing Widget Template.
 *
 * @package WP_FediStream
 *
 * @var bool $show_player Whether to show player controls.
 */

// Prevent direct file access.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

$show_player = $show_player ?? true;
?>
<div class="fedistream-now-playing" data-widget="now-playing">
    <div class="fedistream-now-playing__idle">
        <span class="fedistream-now-playing__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>
        </span>
        <span class="fedistream-now-playing__message"><?php esc_html_e( 'Nothing playing', 'wp-fedistream' ); ?></span>
    </div>
    <div class="fedistream-now-playing__active" style="display: none;">
        <div class="fedistream-now-playing__track">
            <img src="" alt="" class="fedistream-now-playing__artwork">
            <div class="fedistream-now-playing__info">
                <span class="fedistream-now-playing__title"></span>
                <span class="fedistream-now-playing__artist"></span>
            </div>
        </div>
        <?php if ( $show_player ) : ?>
            <div class="fedistream-now-playing__controls">
                <button type="button" class="fedistream-now-playing__btn fedistream-now-playing__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>
                <button type="button" class="fedistream-now-playing__btn fedistream-now-playing__btn--play" aria-label="<?php esc_attr_e( 'Play/Pause', 'wp-fedistream' ); ?>">
                    <svg class="fedistream-now-playing__icon fedistream-now-playing__icon--play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                    <svg class="fedistream-now-playing__icon fedistream-now-playing__icon--pause" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                </button>
                <button type="button" class="fedistream-now-playing__btn fedistream-now-playing__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>
            </div>
            <div class="fedistream-now-playing__progress">
                <div class="fedistream-now-playing__bar">
                    <div class="fedistream-now-playing__bar-progress"></div>
                </div>
                <div class="fedistream-now-playing__times">
                    <span class="fedistream-now-playing__time fedistream-now-playing__time--current">0:00</span>
                    <span class="fedistream-now-playing__time fedistream-now-playing__time--total">0:00</span>
                </div>
            </div>
        <?php endif; ?>
    </div>
</div>