style: Enhance tutorial video management with URL normalization and improved preview functionality
This commit is contained in:
@@ -28,6 +28,84 @@
|
||||
margin: 0 0 0.9rem;
|
||||
}
|
||||
|
||||
.section-separator {
|
||||
margin: 1.2rem 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #dbe5ec;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
margin-top: 0.35rem;
|
||||
color: #47657b;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.preview-status {
|
||||
margin-top: 0.55rem;
|
||||
padding: 0.5rem 0.62rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.82rem;
|
||||
border: 1px solid #c8d7e3;
|
||||
background: #f3f8fc;
|
||||
color: #2a4f68;
|
||||
}
|
||||
|
||||
.preview-status.success {
|
||||
border-color: #b8d9c6;
|
||||
background: #eef8f2;
|
||||
color: #255b3f;
|
||||
}
|
||||
|
||||
.preview-status.error {
|
||||
border-color: #e3c2c2;
|
||||
background: #fcf2f2;
|
||||
color: #7b2e2e;
|
||||
}
|
||||
|
||||
.preview-panel {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid #d1dde7;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #0e1c27;
|
||||
}
|
||||
|
||||
.preview-frame-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.preview-frame-wrap iframe {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.preview-empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1rem;
|
||||
min-height: 96px;
|
||||
background: #f5f8fb;
|
||||
color: #47657b;
|
||||
font-size: 0.85rem;
|
||||
border-top: 1px solid #d1dde7;
|
||||
}
|
||||
|
||||
.hint-list {
|
||||
margin: 0.35rem 0 0;
|
||||
padding-left: 1.1rem;
|
||||
}
|
||||
|
||||
.hint-list li {
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
@@ -174,6 +252,95 @@
|
||||
<input type="hidden" name="action" value="create" />
|
||||
<button type="submit" class="submit-btn">Veröffentlichen</button>
|
||||
</form>
|
||||
|
||||
<hr class="section-separator" />
|
||||
|
||||
<h2>Tutorial-Video hinzufügen</h2>
|
||||
<form method="POST" action="{{ url_for('append_video') }}">
|
||||
<div class="field">
|
||||
<label for="tutorial_title">Titel</label>
|
||||
<input
|
||||
id="tutorial_title"
|
||||
name="title"
|
||||
type="text"
|
||||
placeholder="z. B. Erste Schritte"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tutorial_video_url">Video-URL</label>
|
||||
<input
|
||||
id="tutorial_video_url"
|
||||
name="video_url"
|
||||
type="url"
|
||||
placeholder="https://www.youtube.com/watch?v=..."
|
||||
required
|
||||
/>
|
||||
<div class="field-hint">
|
||||
Erlaubte Formate:
|
||||
<ul class="hint-list">
|
||||
<li>https://www.youtube.com/watch?v=VIDEO_ID</li>
|
||||
<li>https://youtu.be/VIDEO_ID</li>
|
||||
<li>https://www.youtube.com/shorts/VIDEO_ID</li>
|
||||
<li>https://www.youtube.com/embed/VIDEO_ID</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="preview-status" class="preview-status" aria-live="polite">
|
||||
Vorschau wird angezeigt, sobald eine gueltige YouTube-URL erkannt wird.
|
||||
</div>
|
||||
<div class="preview-panel">
|
||||
<div class="preview-frame-wrap" id="preview-frame-wrap" hidden>
|
||||
<iframe
|
||||
id="tutorial-video-preview"
|
||||
src=""
|
||||
title="Live Vorschau Tutorial-Video"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<div id="preview-empty" class="preview-empty">
|
||||
Noch keine Vorschau verfuegbar.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tutorial_description">Beschreibung</label>
|
||||
<textarea
|
||||
id="tutorial_description"
|
||||
name="description"
|
||||
placeholder="Kurze Beschreibung des Videos"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tutorial_thumbnail">Thumbnail-URL (optional)</label>
|
||||
<input
|
||||
id="tutorial_thumbnail"
|
||||
name="thumbnail_url"
|
||||
type="url"
|
||||
placeholder="https://..."
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tutorial_duration">Dauer (optional)</label>
|
||||
<input
|
||||
id="tutorial_duration"
|
||||
name="duration"
|
||||
type="text"
|
||||
placeholder="z. B. 12:34"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tutorial_category">Kategorie (optional)</label>
|
||||
<input
|
||||
id="tutorial_category"
|
||||
name="category"
|
||||
type="text"
|
||||
placeholder="z. B. Anfänger"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="submit-btn">Video hinzufügen</button>
|
||||
</form>
|
||||
</aside>
|
||||
|
||||
<article>
|
||||
@@ -203,4 +370,85 @@
|
||||
</section>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const input = document.getElementById("tutorial_video_url");
|
||||
const status = document.getElementById("preview-status");
|
||||
const frameWrap = document.getElementById("preview-frame-wrap");
|
||||
const frame = document.getElementById("tutorial-video-preview");
|
||||
const empty = document.getElementById("preview-empty");
|
||||
|
||||
function extractYoutubeId(rawUrl) {
|
||||
let parsed;
|
||||
try {
|
||||
parsed = new URL((rawUrl || "").trim());
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
|
||||
const host = parsed.hostname.toLowerCase();
|
||||
const path = parsed.pathname;
|
||||
|
||||
if (host === "youtu.be" || host === "www.youtu.be") {
|
||||
return path.replace(/^\//, "").split("/")[0] || "";
|
||||
}
|
||||
|
||||
if (host.includes("youtube.com")) {
|
||||
if (path === "/watch") {
|
||||
return parsed.searchParams.get("v") || "";
|
||||
}
|
||||
if (path.startsWith("/shorts/")) {
|
||||
return path.split("/shorts/")[1].split("/")[0] || "";
|
||||
}
|
||||
if (path.startsWith("/embed/")) {
|
||||
return path.split("/embed/")[1].split("/")[0] || "";
|
||||
}
|
||||
}
|
||||
|
||||
if (host.includes("youtube-nocookie.com") && path.startsWith("/embed/")) {
|
||||
return path.split("/embed/")[1].split("/")[0] || "";
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
function toEmbedUrl(videoId) {
|
||||
const origin = encodeURIComponent(window.location.origin);
|
||||
return `https://www.youtube-nocookie.com/embed/${videoId}?rel=0&modestbranding=1&playsinline=1&origin=${origin}`;
|
||||
}
|
||||
|
||||
function updatePreview() {
|
||||
const videoId = extractYoutubeId(input.value);
|
||||
const validId = /^[A-Za-z0-9_-]{6,20}$/.test(videoId);
|
||||
|
||||
if (!input.value.trim()) {
|
||||
frame.src = "";
|
||||
frameWrap.hidden = true;
|
||||
empty.hidden = false;
|
||||
status.className = "preview-status";
|
||||
status.textContent = "Vorschau wird angezeigt, sobald eine gueltige YouTube-URL erkannt wird.";
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validId) {
|
||||
frame.src = "";
|
||||
frameWrap.hidden = true;
|
||||
empty.hidden = false;
|
||||
status.className = "preview-status error";
|
||||
status.textContent = "Keine gueltige YouTube-URL erkannt.";
|
||||
return;
|
||||
}
|
||||
|
||||
frame.src = toEmbedUrl(videoId);
|
||||
frameWrap.hidden = false;
|
||||
empty.hidden = true;
|
||||
status.className = "preview-status success";
|
||||
status.textContent = "Gueltige URL erkannt. Live-Vorschau aktiv.";
|
||||
}
|
||||
|
||||
input.addEventListener("input", updatePreview);
|
||||
input.addEventListener("change", updatePreview);
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -306,6 +306,7 @@
|
||||
title="{{ tutorials[0].title }}"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
@@ -343,7 +344,14 @@
|
||||
</h3>
|
||||
<div class="tutorials-grid">
|
||||
{% for tutorial in tutorials %}
|
||||
<div class="tutorial-card" onclick="loadVideo('{{ tutorial.video_url }}', '{{ tutorial.title|safe }}', '{{ tutorial.description|safe }}', '{{ tutorial.category|default('Allgemein') }}', '{{ tutorial.duration|default('') }}')">
|
||||
<div
|
||||
class="tutorial-card"
|
||||
data-video-url="{{ tutorial.video_url|e }}"
|
||||
data-title="{{ tutorial.title|e }}"
|
||||
data-description="{{ tutorial.description|default('', true)|e }}"
|
||||
data-category="{{ tutorial.category|default('Allgemein', true)|e }}"
|
||||
data-duration="{{ tutorial.duration|default('', true)|e }}"
|
||||
>
|
||||
<div class="tutorial-thumbnail">
|
||||
{% if tutorial.thumbnail_url %}
|
||||
<img src="{{ tutorial.thumbnail_url }}" alt="{{ tutorial.title }}" />
|
||||
@@ -370,6 +378,11 @@
|
||||
const videoFrame = document.getElementById('videoFrame');
|
||||
const videoTitle = document.getElementById('videoTitle');
|
||||
const videoDescription = document.getElementById('videoDescription');
|
||||
|
||||
if (!videoUrl) {
|
||||
alert('Dieses Video kann aktuell nicht geladen werden.');
|
||||
return;
|
||||
}
|
||||
|
||||
videoFrame.src = videoUrl;
|
||||
videoTitle.textContent = title;
|
||||
@@ -398,6 +411,18 @@
|
||||
const title = document.getElementById('videoTitle').textContent;
|
||||
window.location.href = `{{ url_for('user_tickets') }}?subject=Tutorial-Feedback: ${encodeURIComponent(title)}`;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.tutorial-card').forEach((card) => {
|
||||
card.addEventListener('click', () => {
|
||||
loadVideo(
|
||||
card.dataset.videoUrl || '',
|
||||
card.dataset.title || '',
|
||||
card.dataset.description || '',
|
||||
card.dataset.category || 'Allgemein',
|
||||
card.dataset.duration || ''
|
||||
);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% else %}
|
||||
|
||||
Reference in New Issue
Block a user