{% extends "@Contao/content_element/player.html.twig" %}



{% block content %}
    {% add to head %}
        <script src="/files/theme/js/podcastplayer.js"></script>
        <link rel="stylesheet" href="/files/theme/css/podcastplayer.css">
    {% endadd %}

    {% if as_editor_view %}
        {# Nur im Backend anzeigen #}
        Podcastplayer
    {% endif %}

{% if not as_editor_view %}
    {# Nur im Frontend anzeigen #}
    
    <div id="player-container">
        <div id="current-title">Song 1</div>

        <audio id="audio"></audio>

        <div id="controls">
            <button id="prev">
                <svg viewBox="0 0 24 24">
                    <polygon points="16,6 16,18 6,12"/>
                </svg>
            </button>

            <button id="play-pause">
                <svg id="play-icon" viewBox="0 0 24 24">
                    <polygon points="6,4 20,12 6,20"/>
                </svg>
                <svg id="pause-icon" viewBox="0 0 24 24" style="display:none;">
                    <rect x="6" y="4" width="4" height="16"/>
                    <rect x="14" y="4" width="4" height="16"/>
                </svg>
            </button>

            <button id="next">
                <svg viewBox="0 0 24 24">
                    <polygon points="8,6 8,18 18,12"/>
                </svg>
            </button>
        </div>

        <div id="progress-container">
            <div id="progress"></div>
        </div>

        <div id="time">00:00 / 00:00</div>

        <!-- Lautstärkeregler -->
        <div id="volume-container">
            <label for="volume-slider">🔊</label>
            <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.8">
        </div>


        <div class="podcastplayer">

            <ul id="playlist">
                {% for source_file in source_files %}

                    {% if source_file.extraMetadata.metadata.getDefault.getTitle|default %}
                        {% set filename = source_file.extraMetadata.metadata.getDefault.getTitle %}
                    {% else %}
                        {# Wenn in der Dateiverwaltung der Titel nicht gepflegt ist, wird der Dateinamen auf 16 Zeichen abgeschnitten und die Dateiendung hinten angefügt. #}
                        {% set extension = '.' ~ source_file.name|split('.')|last %}
                        {% set filename = source_file.name|replace({(extension): ''})|u.truncate(16, ' ... ') ~ extension %}
                    {% endif %}

                    <li data-src="files/{{ source_file.path }}" data-mimetype="{{ source_file.mimeType }}">{{ filename }}</li>

                {% endfor %}
            </ul>

        </div>
    </div>
{% endif %}

{% endblock %}