docker.videokonverter/video-konverter/app/templates/tv/series_detail.html

{% extends "tv/base.html" %}
{% block title %}{{ series.title or series.folder_name }} - VideoKonverter TV{% endblock %}

{% block content %}
<section class="tv-section">
    <!-- Serien-Header -->
    <div class="tv-detail-header">
        {% if series.poster_url %}
        <img src="{{ series.poster_url }}" alt="" class="tv-detail-poster">
        {% endif %}
        <div class="tv-detail-info">
            <h1 class="tv-page-title">{{ series.title or series.folder_name }}</h1>
            {% if series.genres %}
            <p class="tv-detail-genres">{{ series.genres }}</p>
            {% endif %}
            {% if series.overview %}
            <p class="tv-detail-overview">{{ series.overview }}</p>
            {% endif %}

            <!-- Bewertungen -->
            <div class="tv-rating-section">
                <!-- Eigene Bewertung (klickbare Sterne) -->
                <div class="tv-rating-user">
                    <span class="tv-rating-label">{{ t('rating.your_rating') }}:</span>
                    <div class="tv-stars-input" id="user-stars"
                         data-series-id="{{ series.id }}" data-rating="{{ user_rating }}">
                        {% for i in range(1, 6) %}
                        <span class="tv-star {% if i <= user_rating %}active{% endif %}"
                              data-value="{{ i }}" data-focusable
                              onclick="setRating({{ i }})">&#9733;</span>
                        {% endfor %}
                        {% if user_rating > 0 %}
                        <span class="tv-rating-remove" onclick="setRating(0)"
                              data-focusable title="{{ t('rating.remove') }}">&#10005;</span>
                        {% endif %}
                    </div>
                </div>
                <!-- Durchschnitt -->
                {% if avg_rating.count > 0 %}
                <div class="tv-rating-avg">
                    <span class="tv-stars-display">
                        {% for i in range(1, 6) %}
                        <span class="tv-star {% if i <= avg_rating.avg|round|int %}active{% endif %}">&#9733;</span>
                        {% endfor %}
                    </span>
                    <span class="tv-rating-text">{{ avg_rating.avg }} ({{ avg_rating.count }})</span>
                </div>
                {% endif %}
                <!-- TVDB-Score -->
                {% if tvdb_score %}
                <div class="tv-rating-external">
                    <span class="tv-rating-badge tvdb">TVDB {{ "%.0f"|format(tvdb_score) }}%</span>
                </div>
                {% endif %}
            </div>

            <div class="tv-detail-actions">
                <button class="tv-watchlist-btn {% if in_watchlist %}active{% endif %}"
                        id="btn-watchlist"
                        data-focusable
                        data-series-id="{{ series.id }}"
                        onclick="toggleWatchlist(this)">
                    <span class="watchlist-icon">{% if in_watchlist %}&#9829;{% else %}&#9825;{% endif %}</span>
                    <span class="watchlist-text">{{ t('series.watchlist') }}</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Staffel-Tabs -->
    {% if seasons %}
    <div class="tv-tabs" id="season-tabs">
        {% for sn in seasons.keys() %}
        <button class="tv-tab {% if loop.first %}active{% endif %}"
                data-focusable
                onclick="showSeason({{ sn }})">
            {% if sn == 0 %}{{ t('series.specials') }}{% else %}{{ t('series.season') }} {{ sn }}{% endif %}
        </button>
        {% endfor %}
    </div>

    <!-- Episoden pro Staffel -->
    {% for sn, episodes in seasons.items() %}
    <div class="tv-season" id="season-{{ sn }}" {% if not loop.first %}style="display:none"{% endif %}>
        <div class="tv-episode-list">
            {% for ep in episodes %}
            <a href="/tv/player?v={{ ep.id }}" class="tv-episode-card" data-focusable>
                <!-- Thumbnail -->
                <div class="tv-ep-thumb">
                    {% if ep.ep_image_url %}
                    <img src="{{ ep.ep_image_url }}" alt="" loading="lazy">
                    {% else %}
                    <img src="/api/library/videos/{{ ep.id }}/thumbnail" alt="" loading="lazy">
                    {% endif %}
                    {% if ep.progress_pct > 0 and ep.progress_pct < 95 %}
                    <div class="tv-ep-progress">
                        <div class="tv-ep-progress-bar" style="width: {{ ep.progress_pct }}%"></div>
                    </div>
                    {% endif %}
                    {% if ep.progress_pct >= 95 %}
                    <div class="tv-ep-watched">&#10003;</div>
                    {% endif %}
                    <div class="tv-ep-duration">
                        {% if ep.duration_sec %}{{ (ep.duration_sec / 60)|round|int }} Min{% endif %}
                    </div>
                </div>
                <!-- Info -->
                <div class="tv-ep-info">
                    <div class="tv-ep-header">
                        <span class="tv-ep-num">
                            {% if ep.episode_number %}E{{ "%02d"|format(ep.episode_number) }}{% endif %}
                        </span>
                        <span class="tv-ep-title">
                            {{ ep.episode_title or ep.file_name }}
                        </span>
                    </div>
                    {% if ep.ep_overview %}
                    <p class="tv-ep-desc">{{ ep.ep_overview }}</p>
                    {% endif %}
                    <div class="tv-ep-meta">
                        {% if ep.width %}{{ ep.width }}x{{ ep.height }}{% endif %}
                        {% if ep.video_codec %} &middot; {{ ep.video_codec }}{% endif %}
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
    {% else %}
    <div class="tv-empty">{{ t('series.no_episodes') }}</div>
    {% endif %}
</section>
{% endblock %}

{% block scripts %}
<script>
function showSeason(sn) {
    // Alle Staffeln verstecken
    document.querySelectorAll('.tv-season').forEach(el => el.style.display = 'none');
    // Alle Tabs deaktivieren
    document.querySelectorAll('.tv-tab').forEach(el => el.classList.remove('active'));
    // Gewaehlte Staffel anzeigen
    const season = document.getElementById('season-' + sn);
    if (season) season.style.display = '';
    // Tab aktivieren
    event.target.classList.add('active');
}

function toggleWatchlist(btn) {
    const seriesId = btn.dataset.seriesId;
    fetch('/tv/api/watchlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ series_id: parseInt(seriesId) }),
    })
    .then(r => r.json())
    .then(data => {
        if (data.in_watchlist) {
            btn.classList.add('active');
            btn.querySelector('.watchlist-icon').innerHTML = '&#9829;';
        } else {
            btn.classList.remove('active');
            btn.querySelector('.watchlist-icon').innerHTML = '&#9825;';
        }
    })
    .catch(() => {});
}

function setRating(value) {
    const container = document.getElementById('user-stars');
    const seriesId = container.dataset.seriesId;
    fetch('/tv/api/rating', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ series_id: parseInt(seriesId), rating: value }),
    })
    .then(r => r.json())
    .then(data => {
        // Sterne aktualisieren
        container.dataset.rating = data.user_rating;
        container.querySelectorAll('.tv-star').forEach(star => {
            const v = parseInt(star.dataset.value);
            star.classList.toggle('active', v <= data.user_rating);
        });
        // Entfernen-Button anzeigen/verstecken
        let removeBtn = container.querySelector('.tv-rating-remove');
        if (data.user_rating > 0 && !removeBtn) {
            removeBtn = document.createElement('span');
            removeBtn.className = 'tv-rating-remove';
            removeBtn.setAttribute('data-focusable', '');
            removeBtn.innerHTML = '&#10005;';
            removeBtn.onclick = () => setRating(0);
            container.appendChild(removeBtn);
        } else if (data.user_rating === 0 && removeBtn) {
            removeBtn.remove();
        }
        // Durchschnitt aktualisieren (Seite neu laden fuer Einfachheit)
        if (data.avg_rating !== undefined) {
            const avgEl = document.querySelector('.tv-rating-avg .tv-rating-text');
            if (avgEl) avgEl.textContent = data.avg_rating + ' (' + data.rating_count + ')';
        }
    })
    .catch(() => {});
}
</script>
{% endblock %}