Skip to content

Commit

Permalink
Update vidstack_helper.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@skerbis
skerbis authored Sep 27, 2024
1 parent 512a9a9 commit 7d67f74
Showing 1 changed file with 169 additions and 181 deletions.
350 changes: 169 additions & 181 deletions assets/vidstack_helper.js
View file
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';
}
}
});
}

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'];
});

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 });
});

0 comments on commit 7d67f74

Please sign in to comment.