docker.videokonverter/video-konverter/app/templates/tv/player.html
data c7151e8bd1 feat: VideoKonverter v4.0.1 - UX-Verbesserungen, Batch-Thumbnails, Bugfixes
- Alphabet-Seitenleiste (A-Z) auf Serien-/Filme-Seite
- Separate Player-Buttons fuer Audio/Untertitel/Qualitaet
- Batch-Thumbnail-Generierung per Button in der Bibliothek
- Redundante Dateien in Episoden-Tabelle orange markiert
- Gesehen-Markierung per Episode/Staffel
- Genre-Filter als Select-Element statt Chips
- Fix: tvdb_episode_cache fehlende Spalten (overview, image_url)
- Fix: Login Auto-Fill-Erkennung statt Flash
- Fix: Profil-Wechsel zeigt alle User

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 09:22:04 +01:00

105 lines
5.3 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="/static/tv/css/tv.css">
<title>{{ title }} - VideoKonverter TV</title>
</head>
<body class="player-body">
<div class="player-wrapper" id="player-wrapper">
<!-- Header (ausblendbar) -->
<div class="player-header" id="player-header">
<a href="javascript:history.back()" class="player-back" data-focusable>&#10094; {{ t('player.back') }}</a>
<span class="player-title">{{ title }}</span>
</div>
<!-- Video -->
<video id="player-video" autoplay playsinline></video>
<!-- Controls (ausblendbar) -->
<div class="player-controls" id="player-controls">
<div class="player-progress" id="player-progress">
<div class="player-progress-bar" id="player-progress-bar"></div>
</div>
<div class="player-buttons">
<button class="player-btn" id="btn-play" data-focusable>&#9654;</button>
<span class="player-time" id="player-time">0:00 / 0:00</span>
<span class="player-spacer"></span>
<button class="player-btn" id="btn-audio" data-focusable title="{{ t('player.audio') }}">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.5 8.5a5 5 0 010 7"/></svg>
</button>
<button class="player-btn" id="btn-subs" data-focusable title="{{ t('player.subtitles') }}">
<span class="player-btn-badge">CC</span>
</button>
<button class="player-btn" id="btn-quality" data-focusable title="{{ t('player.quality') }}">
<span class="player-btn-badge" id="quality-badge">HD</span>
</button>
<button class="player-btn" id="btn-settings" data-focusable title="{{ t('player.settings') }}">&#9881;</button>
{% if next_video %}
<button class="player-btn" id="btn-next" data-focusable title="{{ t('player.next_episode') }}">&#9197;</button>
{% endif %}
<button class="player-btn" id="btn-fullscreen" data-focusable>&#9974;</button>
</div>
</div>
<!-- Einstellungen-Overlay -->
<div class="player-overlay" id="player-overlay" style="display:none">
<div class="player-overlay-panel">
<div class="player-overlay-section" id="overlay-audio"></div>
<div class="player-overlay-section" id="overlay-subs"></div>
<div class="player-overlay-section" id="overlay-quality"></div>
<div class="player-overlay-section" id="overlay-speed"></div>
</div>
</div>
<!-- Naechste Episode Overlay -->
{% if next_video %}
<div class="player-next-overlay" id="next-overlay" style="display:none">
<div class="player-next-card">
<p class="player-next-title" id="next-title">{{ t('player.next_episode') }}</p>
<p class="player-next-name">{{ next_title }}</p>
<p class="player-next-countdown" id="next-countdown"></p>
<div class="player-next-buttons">
<button class="tv-play-btn" id="btn-next-play" data-focusable>{{ t('player.skip') }}</button>
<button class="player-btn-cancel" id="btn-next-cancel" data-focusable>{{ t('player.cancel') }}</button>
</div>
</div>
</div>
{% endif %}
<!-- Schaust du noch? Overlay -->
<div class="player-still-watching" id="still-watching-overlay" style="display:none">
<div class="player-next-card">
<p class="player-next-title">{{ t('player.still_watching') }}</p>
<div class="player-next-buttons">
<button class="tv-play-btn" id="btn-still-yes" data-focusable>{{ t('player.continue') }}</button>
<button class="player-btn-cancel" id="btn-still-no" data-focusable>{{ t('player.stop') }}</button>
</div>
</div>
</div>
</div>
<script src="/static/tv/js/player.js"></script>
<script>
initPlayer({
videoId: {{ video.id }},
startPos: {{ start_pos }},
duration: {{ video.duration_sec or 0 }},
{% if next_video %}
nextVideoId: {{ next_video.id }},
nextUrl: "/tv/player?v={{ next_video.id }}",
{% endif %}
autoplay: {{ 'true' if user.autoplay_enabled else 'false' }},
autoplayCountdown: {{ user.autoplay_countdown_sec or 10 }},
autoplayMax: {{ user.autoplay_max_episodes or 0 }},
preferredAudio: "{{ user.preferred_audio_lang or 'deu' }}",
preferredSub: "{{ user.preferred_subtitle_lang or '' }}",
subtitlesEnabled: {{ 'true' if user.subtitles_enabled else 'false' }},
soundMode: "{{ client_sound_mode or 'stereo' }}",
streamQuality: "{{ client_stream_quality or 'hd' }}",
});
</script>
</body>
</html>