1st attemot

.gitignore

@@ -12,3 +12,4 @@ modules.xml
 .idea/vcs.xml
 .idea/encodings.xml
 *.ipr
+node_modules/

asstets/vidstack_helper.js

@@ -0,0 +1,123 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Prüfen, ob mindestens ein .video-container Element existiert
+    if (document.querySelector('.video-container')) {
+        const germanTranslations = {
+            'Caption Styles': 'Untertitelstile',
+            'Captions look like this': 'Untertitel sehen so aus',
+            'Closed-Captions Off': 'Untertitel aus',
+            'Closed-Captions On': 'Untertitel an',
+            'Display Background': 'Hintergrund anzeigen',
+            'Enter Fullscreen': 'Vollbild',
+            'Enter PiP': 'Bild-in-Bild aktivieren',
+            'Exit Fullscreen': 'Vollbild beenden',
+            'Exit PiP': 'Bild-in-Bild beenden',
+            'Google Cast': 'Google Cast',
+            'Keyboard Animations': 'Tastatur-Animationen',
+            'Seek Backward': 'Zurückspulen',
+            'Seek Forward': 'Vorspulen',
+            'Skip To Live': 'Zur Live-Übertragung springen',
+            'Text Background': 'Texthintergrund',
+            Accessibility: 'Barrierefreiheit',
+            AirPlay: 'AirPlay',
+            Announcements: 'Ankündigungen',
+            Audio: 'Audio',
+            Auto: 'Auto',
+            Boost: 'Verstärken',
+            Captions: 'Untertitel',
+            Chapters: 'Kapitel',
+            Color: 'Farbe',
+            Connected: 'Verbunden',
+            Connecting: 'Verbindung wird hergestellt',
+            Continue: 'Fortsetzen',
+            Default: 'Standard',
+            Disabled: 'Deaktiviert',
+            Disconnected: 'Getrennt',
+            Download: 'Herunterladen',
+            Family: 'Familie',
+            Font: 'Schriftart',
+            Fullscreen: 'Vollbild',
+            LIVE: 'LIVE',
+            Loop: 'Wiederholen',
+            Mute: 'Stummschalten',
+            Normal: 'Normal',
+            Off: 'Aus',
+            Opacity: 'Deckkraft',
+            Pause: 'Pause',
+            PiP: 'Bild-in-Bild',
+            Play: 'Abspielen',
+            Playback: 'Wiedergabe',
+            Quality: 'Qualität',
+            Replay: 'Wiederholen',
+            Reset: 'Zurücksetzen',
+            Seek: 'Suchen',
+            Settings: 'Einstellungen',
+            Shadow: 'Schatten',
+            Size: 'Größe',
+            Speed: 'Geschwindigkeit',
+            Text: 'Text',
+            Track: 'Spur',
+            Unmute: 'Ton einschalten',
+            Volume: 'Lautstärke',
+        };
+
+        function applyTranslations(player) {
+            const videoLayout = player.querySelector('media-video-layout');
+            if (videoLayout) {
+                videoLayout.translations = germanTranslations;
+            }
+        }
+
+        function loadVideo(originalPlayer, placeholderId) {
+            const placeholder = document.getElementById(placeholderId);
+            const wrapper = placeholder.parentElement;
+
+            const mediaPlayer = originalPlayer.cloneNode(true);
+
+            mediaPlayer.setAttribute('src', mediaPlayer.getAttribute('data-consent-source'));
+
+            mediaPlayer.removeAttribute('data-consent-source');
+            mediaPlayer.removeAttribute('data-consent-text');
+
+            wrapper.replaceChild(mediaPlayer, placeholder);
+
+            applyTranslations(mediaPlayer);
+        }
+
+        function createConsentPlaceholder(videoContainer, originalPlayer, consentText) {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'video-wrapper';
+
+            const placeholder = document.createElement('div');
+            placeholder.className = 'consent-placeholder';
+            const placeholderId = 'consent-placeholder-' + Math.random().toString(36).substr(2, 9);
+            placeholder.id = placeholderId;
+
+            const text = document.createElement('p');
+            text.textContent = consentText;
+
+            const button = document.createElement('button');
+            button.textContent = 'Video laden';
+            button.addEventListener('click', () => loadVideo(originalPlayer, placeholderId));
+
+            placeholder.appendChild(text);
+            placeholder.appendChild(button);
+            wrapper.appendChild(placeholder);
+
+            videoContainer.replaceChild(wrapper, originalPlayer);
+        }
+
+        document.querySelectorAll('media-player').forEach(applyTranslations);
+
+        document.querySelectorAll('media-player[data-consent-source]').forEach(player => {
+            const videoContainer = player.closest('.video-container');
+            const consentSource = player.getAttribute('data-consent-source');
+            const consentText = player.getAttribute('data-consent-text') || 'Klicken Sie hier, um das Video zu laden und abzuspielen.';
+
+            if (consentSource.startsWith('youtube/') || consentSource.startsWith('vimeo/')) {
+                createConsentPlaceholder(videoContainer, player, consentText);
+            }
+        });
+
+        document.documentElement.className = 'js';
+    }
+});

asstets/vistack_helper.css

@@ -0,0 +1,86 @@
+.video-container {
+    margin-bottom: 30px;
+}
+.video-container media-player {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    max-height: 450px;
+}
+.video-description, .video-transcript, .alternative-links {
+    margin-top: 10px;
+}
+.js .a11y-content {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+.no-js .a11y-content {
+    display: block;
+}
+.skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: #000;
+    color: white;
+    padding: 8px;
+    z-index: 100;
+}
+.skip-link:focus {
+    top: 0;
+}
+.video-wrapper {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+    height: 0;
+    overflow: hidden;
+}
+.video-wrapper media-player {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.consent-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #f0f0f0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+.consent-placeholder button {
+    margin-top: 10px;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+.consent-placeholder button:hover {
+    background-color: #0056b3;
+}
+
+noscript  .js .a11y-content {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: initial;
+    margin: initial;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+}

build/config/vs_components.js

@@ -0,0 +1,9 @@
+import "vidstack/player";
+import "vidstack/player/layouts/default";
+import "vidstack/player/ui";
+import 'media-captions/styles/captions.css';
+// Optional - include if rendering VTT regions.
+import 'media-captions/styles/regions.css';
+
+import "vidstack/player/styles/default/theme.css";
+import "vidstack/player/styles/default/layouts/video.css";