generated from FriendsOfREDAXO/rex_repo_template
-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
consent anders #8
Merged
Merged
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
512a9a9
consent anders
skerbis 7d67f74
Update vidstack_helper.js
skerbis 5e9bb44
Update video.php
skerbis e6bb98a
Update vidstack_helper.css
skerbis bd3af5d
Update vidstack_helper.css
skerbis 6839b41
Update lib/video.php
skerbis befd829
Update lib/video.php
skerbis 7e04973
Update assets/vidstack_helper.js
skerbis 3fc072c
Update assets/vidstack_helper.js
skerbis File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,199 +1,187 @@ | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
| // Prüfen, ob mindestens ein .video-container Element existiert | ||
| if (document.querySelector('.video-container')) { | ||
| const translations = { | ||
| de: { | ||
| 'Seek forward {amount} seconds': '{amount} Sekunden vorwärts springen', | ||
| 'Seek backward {amount} seconds': '{amount} Sekunden rückwärts springen', | ||
| 'Seek to live': 'Zur Live-Übertragung springen', | ||
| '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', | ||
| }, | ||
| en: { | ||
| 'Seek forward {amount} seconds': 'Seek forward {amount} seconds', | ||
| 'Seek backward {amount} seconds': 'Seek backward {amount} seconds', | ||
| 'Seek to live': 'Seek to live', | ||
| 'Caption Styles': 'Caption Styles', | ||
| 'Captions look like this': 'Captions look like this', | ||
| 'Closed-Captions Off': 'Closed-Captions Off', | ||
| 'Closed-Captions On': 'Closed-Captions On', | ||
| 'Display Background': 'Display Background', | ||
| 'Enter Fullscreen': 'Enter Fullscreen', | ||
| 'Enter PiP': 'Enter PiP', | ||
| 'Exit Fullscreen': 'Exit Fullscreen', | ||
| 'Exit PiP': 'Exit PiP', | ||
| 'Google Cast': 'Google Cast', | ||
| 'Keyboard Animations': 'Keyboard Animations', | ||
| 'Seek Backward': 'Seek Backward', | ||
| 'Seek Forward': 'Seek Forward', | ||
| 'Skip To Live': 'Skip To Live', | ||
| 'Text Background': 'Text Background', | ||
| 'Accessibility': 'Accessibility', | ||
| 'AirPlay': 'AirPlay', | ||
| 'Announcements': 'Announcements', | ||
| 'Audio': 'Audio', | ||
| 'Auto': 'Auto', | ||
| 'Boost': 'Boost', | ||
| 'Captions': 'Captions', | ||
| 'Chapters': 'Chapters', | ||
| 'Color': 'Color', | ||
| 'Connected': 'Connected', | ||
| 'Connecting': 'Connecting', | ||
| 'Continue': 'Continue', | ||
| 'Default': 'Default', | ||
| 'Disabled': 'Disabled', | ||
| 'Disconnected': 'Disconnected', | ||
| 'Download': 'Download', | ||
| 'Family': 'Family', | ||
| 'Font': 'Font', | ||
| 'Fullscreen': 'Fullscreen', | ||
| 'LIVE': 'LIVE', | ||
| 'Loop': 'Loop', | ||
| 'Mute': 'Mute', | ||
| 'Normal': 'Normal', | ||
| 'Off': 'Off', | ||
| 'Opacity': 'Opacity', | ||
| 'Pause': 'Pause', | ||
| 'PiP': 'PiP', | ||
| 'Play': 'Play', | ||
| 'Playback': 'Playback', | ||
| 'Quality': 'Quality', | ||
| 'Replay': 'Replay', | ||
| 'Reset': 'Reset', | ||
| 'Seek': 'Seek', | ||
| 'Settings': 'Settings', | ||
| 'Shadow': 'Shadow', | ||
| 'Size': 'Size', | ||
| 'Speed': 'Speed', | ||
| 'Text': 'Text', | ||
| 'Track': 'Track', | ||
| 'Unmute': 'Unmute', | ||
| 'Volume': 'Volume', | ||
| } | ||
| }; | ||
| const consentKey = 'video_consent'; | ||
| let videoConsent = JSON.parse(localStorage.getItem(consentKey) || '{}'); | ||
|
|
||
| function getPlayerLanguage(player) { | ||
| return player.getAttribute('lang') || 'en'; | ||
| const translations = { | ||
| de: { | ||
| 'Load Video': 'Video laden', | ||
| 'Consent given': 'Zustimmung erteilt', | ||
| 'Click here to load and play the video.': 'Klicken Sie hier, um das Video zu laden und abzuspielen.', | ||
| 'Video from': 'Video von', | ||
| 'Video description': 'Videobeschreibung', | ||
| 'Alternative view': 'Alternative Ansicht', | ||
| 'Open alternative view': 'Alternative Ansicht öffnen', | ||
| 'Additional information': 'Zusätzliche Informationen', | ||
| 'Video player': 'Videoplayer', | ||
| 'Seek forward {amount} seconds': '{amount} Sekunden vorwärts springen', | ||
| 'Seek backward {amount} seconds': '{amount} Sekunden rückwärts springen', | ||
| 'Seek to live': 'Zur Live-Übertragung springen', | ||
| 'Caption Styles': 'Untertitelstile', | ||
| 'Captions look like this': 'Untertitel sehen so aus', | ||
| 'Closed-Captions Off': 'Untertitel aus', | ||
| 'Closed-Captions On': 'Untertitel an', | ||
| 'Enter Fullscreen': 'Vollbild', | ||
| 'Exit Fullscreen': 'Vollbild beenden', | ||
| 'Enter PiP': 'Bild-in-Bild aktivieren', | ||
| 'Exit PiP': 'Bild-in-Bild beenden', | ||
| 'Seek Backward': 'Zurückspulen', | ||
| 'Seek Forward': 'Vorspulen', | ||
| 'Mute': 'Stummschalten', | ||
| 'Unmute': 'Ton einschalten', | ||
| 'Play': 'Abspielen', | ||
| 'Pause': 'Pause', | ||
| 'Settings': 'Einstellungen' | ||
| }, | ||
| en: { | ||
| 'Load Video': 'Load Video', | ||
| 'Consent given': 'Consent given', | ||
| 'Click here to load and play the video.': 'Click here to load and play the video.', | ||
| 'Video from': 'Video from', | ||
| 'Video description': 'Video description', | ||
| 'Alternative view': 'Alternative view', | ||
| 'Open alternative view': 'Open alternative view', | ||
| 'Additional information': 'Additional information', | ||
| 'Video player': 'Video player', | ||
| 'Seek forward {amount} seconds': 'Seek forward {amount} seconds', | ||
| 'Seek backward {amount} seconds': 'Seek backward {amount} seconds', | ||
| 'Seek to live': 'Seek to live', | ||
| 'Caption Styles': 'Caption Styles', | ||
| 'Captions look like this': 'Captions look like this', | ||
| 'Closed-Captions Off': 'Closed-Captions Off', | ||
| 'Closed-Captions On': 'Closed-Captions On', | ||
| 'Enter Fullscreen': 'Enter Fullscreen', | ||
| 'Exit Fullscreen': 'Exit Fullscreen', | ||
| 'Enter PiP': 'Enter PiP', | ||
| 'Exit PiP': 'Exit PiP', | ||
| 'Seek Backward': 'Seek Backward', | ||
| 'Seek Forward': 'Seek Forward', | ||
| 'Mute': 'Mute', | ||
| 'Unmute': 'Unmute', | ||
| 'Play': 'Play', | ||
| 'Pause': 'Pause', | ||
| 'Settings': 'Settings' | ||
| } | ||
| }; | ||
|
|
||
| function applyTranslations(player) { | ||
| const videoLayout = player.querySelector('media-video-layout'); | ||
| if (videoLayout) { | ||
| const lang = getPlayerLanguage(player); | ||
| videoLayout.translations = translations[lang] || translations['en']; | ||
| } | ||
| } | ||
| function getText(key, lang = 'en') { | ||
| return translations[lang][key] || key; | ||
| } | ||
|
|
||
| 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'); | ||
| function setConsent(platform) { | ||
| videoConsent[platform] = true; | ||
| localStorage.setItem(consentKey, JSON.stringify(videoConsent)); | ||
| document.cookie = `${platform}_consent=true; path=/; max-age=${30 * 24 * 60 * 60}; SameSite=Lax; Secure`; | ||
| } | ||
|
|
||
| wrapper.replaceChild(mediaPlayer, placeholder); | ||
| function hasConsent(platform) { | ||
| return videoConsent[platform] === true || document.cookie.includes(`${platform}_consent=true`); | ||
| } | ||
|
|
||
| applyTranslations(mediaPlayer); | ||
| } | ||
| function loadVideo(placeholder) { | ||
| const platform = placeholder.dataset.platform; | ||
| const videoId = placeholder.dataset.videoId; | ||
| const mediaPlayer = placeholder.nextElementSibling; | ||
|
|
||
| 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; | ||
| if (mediaPlayer && mediaPlayer.tagName.toLowerCase() === 'media-player') { | ||
| mediaPlayer.style.display = ''; | ||
| mediaPlayer.setAttribute('src', `${platform}/${videoId}`); | ||
| placeholder.style.display = 'none'; | ||
| } else { | ||
| console.error('Media player element not found'); | ||
| } | ||
| } | ||
|
|
||
| const text = document.createElement('p'); | ||
| text.textContent = consentText; | ||
| function updatePlaceholder(placeholder, consented) { | ||
| const button = placeholder.querySelector('.consent-button'); | ||
| const lang = document.documentElement.lang || 'en'; | ||
|
|
||
| if (consented) { | ||
| button.textContent = getText('Consent given', lang); | ||
| button.disabled = true; | ||
| } else { | ||
| button.textContent = getText('Load Video', lang); | ||
| button.disabled = false; | ||
| } | ||
| } | ||
|
|
||
| const button = document.createElement('button'); | ||
| const lang = getPlayerLanguage(originalPlayer); | ||
| button.textContent = lang === 'de' ? 'Video laden' : 'Load Video'; | ||
| button.addEventListener('click', () => loadVideo(originalPlayer, placeholderId)); | ||
| function initializePlaceholders() { | ||
| document.querySelectorAll('.consent-placeholder').forEach(placeholder => { | ||
| const platform = placeholder.dataset.platform; | ||
| const consentButton = placeholder.querySelector('.consent-button'); | ||
| const consented = hasConsent(platform); | ||
|
|
||
| placeholder.appendChild(text); | ||
| placeholder.appendChild(button); | ||
| wrapper.appendChild(placeholder); | ||
| updatePlaceholder(placeholder, consented); | ||
|
|
||
| videoContainer.replaceChild(wrapper, originalPlayer); | ||
| } | ||
| if (consented) { | ||
| loadVideo(placeholder); | ||
| } else { | ||
| consentButton.addEventListener('click', () => { | ||
| setConsent(platform); | ||
| updatePlaceholder(placeholder, true); | ||
| loadVideo(placeholder); | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| 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 lang = getPlayerLanguage(player); | ||
| const defaultConsentText = lang === 'de' | ||
| ? 'Klicken Sie hier, um das Video zu laden und abzuspielen.' | ||
| : 'Click here to load and play the video.'; | ||
| const consentText = player.getAttribute('data-consent-text') || defaultConsentText; | ||
|
|
||
| if (consentSource.startsWith('youtube/') || consentSource.startsWith('vimeo/')) { | ||
| createConsentPlaceholder(videoContainer, player, consentText); | ||
| function initializeMediaPlayers() { | ||
| document.querySelectorAll('media-player[data-video-platform]').forEach(player => { | ||
| const platform = player.dataset.videoPlatform; | ||
| if (hasConsent(platform)) { | ||
| const videoId = player.dataset.videoId; | ||
| player.style.display = ''; | ||
| player.setAttribute('src', `${platform}/${videoId}`); | ||
| const placeholder = player.previousElementSibling; | ||
| if (placeholder && placeholder.classList.contains('consent-placeholder')) { | ||
| placeholder.style.display = 'none'; | ||
skerbis marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| document.documentElement.className = 'js'; | ||
| function applyTranslations() { | ||
| const videoLayouts = document.querySelectorAll('media-video-layout'); | ||
| videoLayouts.forEach(layout => { | ||
| const player = layout.closest('media-player'); | ||
| const lang = player ? (player.getAttribute('lang') || 'en') : 'en'; | ||
| layout.translations = translations[lang] || translations['en']; | ||
skerbis marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| }); | ||
|
|
||
| document.querySelectorAll('.consent-placeholder').forEach(placeholder => { | ||
| const lang = document.documentElement.lang || 'en'; | ||
| const button = placeholder.querySelector('.consent-button'); | ||
| const text = placeholder.querySelector('p'); | ||
| if (button) { | ||
| button.textContent = getText('Load Video', lang); | ||
| } | ||
| if (text) { | ||
| text.textContent = getText('Click here to load and play the video.', lang); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| initializePlaceholders(); | ||
| initializeMediaPlayers(); | ||
| applyTranslations(); | ||
|
|
||
| // Beobachter für dynamisch hinzugefügte Elemente | ||
| const observer = new MutationObserver((mutations) => { | ||
| mutations.forEach((mutation) => { | ||
| if (mutation.type === 'childList') { | ||
| mutation.addedNodes.forEach((node) => { | ||
| if (node.nodeType === Node.ELEMENT_NODE) { | ||
| if (node.classList.contains('consent-placeholder')) { | ||
| initializePlaceholders(); | ||
| } | ||
| if (node.tagName.toLowerCase() === 'media-player') { | ||
| initializeMediaPlayers(); | ||
| applyTranslations(); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| observer.observe(document.body, { childList: true, subtree: true }); | ||
| }); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Behandle den Fall, wenn kein Media Player gefunden wird
Im aktuellen Code wird nur eine Fehlermeldung in der Konsole ausgegeben, wenn kein
media-playerElement gefunden wird. Es könnte sinnvoll sein, den Benutzer darüber zu informieren oder einen alternativen Ablauf zu implementieren, um die Benutzererfahrung zu verbessern.