From 6728d77cd0c254b005b506fab4e25461306c41e8 Mon Sep 17 00:00:00 2001 From: Syb Wartna Date: Thu, 11 Jan 2024 14:57:41 +0100 Subject: [PATCH] WIP --- blocks/embed/embed.css | 4 - blocks/embed/embed.js | 34 +----- .../v2-livestream-embed.css | 46 ++++++++ .../v2-livestream-embed.js | 110 ++++++++++++++++++ common/modal/modal.css | 17 +++ placeholder.json | 4 +- scripts/delayed.js | 34 ++++++ scripts/video-helper.js | 7 ++ 8 files changed, 218 insertions(+), 38 deletions(-) create mode 100644 blocks/v2-livestream-embed/v2-livestream-embed.css create mode 100644 blocks/v2-livestream-embed/v2-livestream-embed.js diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css index 1b2f7e3e..2c2b14d2 100644 --- a/blocks/embed/embed.css +++ b/blocks/embed/embed.css @@ -55,10 +55,6 @@ gap: 16px; } -.embed.single-video .embed-video-element { - border-radius: var(--border-radius); -} - @media screen and (min-width: 768px) { .embed-video { width: 726px; diff --git a/blocks/embed/embed.js b/blocks/embed/embed.js index 09117ed9..c5c86a54 100644 --- a/blocks/embed/embed.js +++ b/blocks/embed/embed.js @@ -1,12 +1,11 @@ -import { createElement, getTextLabel, isExternalVideoAllowed } from '../../scripts/common.js'; import { - selectVideoLink, addPlayIcon, showVideoModal, isLowResolutionVideoUrl, + selectVideoLink, addPlayIcon, + showVideoModal, isLowResolutionVideoUrl, createLowResolutionBanner, createIframe, } from '../../scripts/video-helper.js'; export default function decorate(block) { const isAutoplay = block.classList.contains('autoplay'); - const isSingleVideo = block.classList.contains('single-video'); const isLoopedVideo = block.classList.contains('loop'); const isFullWidth = block.classList.contains('full-width'); const hideLowResolutionBanner = block.classList.contains('no-banner'); @@ -16,7 +15,6 @@ export default function decorate(block) { videoWrapper.classList.add('embed-video'); const preferredType = (() => { - if (isSingleVideo) return 'singleVideo'; if (isFullWidth) return 'local'; return 'auto'; })(); @@ -26,34 +24,6 @@ export default function decorate(block) { const video = document.createElement('video'); const source = document.createElement('source'); - if (isSingleVideo && !isExternalVideoAllowed()) { - const img = block.querySelector('picture img'); - block.innerHTML = ''; - - const cookieMsgConatiner = createElement('div', { - classes: 'cookie-message', - }); - cookieMsgConatiner.style.background = `linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%), url(${img.src}) 100% center / cover no-repeat`; - - const cookieMessage = document.createRange().createContextualFragment(` -

${getTextLabel('single video message title')}

-

${getTextLabel('single video message text')}

-
- - -
- `); - - cookieMsgConatiner.append(cookieMessage); - block.append(cookieMsgConatiner); - - block.querySelector('.cookie-message__button-container .primary')?.addEventListener('click', () => { - document.cookie = 'isSingleVideo=true'; - }); - - return; - } - if (!selectedLink) { block.innerHTML = ''; /* eslint-disable-next-line no-console */ diff --git a/blocks/v2-livestream-embed/v2-livestream-embed.css b/blocks/v2-livestream-embed/v2-livestream-embed.css new file mode 100644 index 00000000..8b73ea6d --- /dev/null +++ b/blocks/v2-livestream-embed/v2-livestream-embed.css @@ -0,0 +1,46 @@ +.v2-livestream-embed .cookie-message { + aspect-ratio: 16/9; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; +} + +.v2-livestream-embed .cookie-message__title, +.v2-livestream-embed .cookie-message__text { + max-width: var(--text-block-max-width); + margin: 0 auto; + text-align: center; +} + +.v2-livestream-embed .cookie-message__title { + font: var(--f-heading-5-font-size)/var(--f-heading-5-line-height) var(--ff-volvo-novum-medium); + letter-spacing: var(--f-heading-5-letter-spacing); +} + +.v2-livestream-embed .cookie-message__text { + font: var(--f-body-font-size)/var(--f-body-line-height) var(--font-family-body); +} + +.v2-livestream-embed { + border-radius: var(--border-radius); + aspect-ratio: 16/9; + width: 100%; +} + +.v2-livestream-embed iframe { + display: block; +} + +@media screen and (min-width: 1200px) { + .v2-livestream-embed .cookie-message__title { + font-size: var(--f-heading-4-font-size); + line-height: var(--f-heading-4-line-height); + } + + .v2-livestream-embed .cookie-message__text { + font-size: var(--f-body-2-font-size); + line-height: var(--f-body-2-line-height); + } +} diff --git a/blocks/v2-livestream-embed/v2-livestream-embed.js b/blocks/v2-livestream-embed/v2-livestream-embed.js new file mode 100644 index 00000000..79ae68d7 --- /dev/null +++ b/blocks/v2-livestream-embed/v2-livestream-embed.js @@ -0,0 +1,110 @@ +/* eslint-disable no-console */ +/* eslint-disable no-unused-vars */ +/* eslint-disable max-len */ +import { loadScript } from '../../scripts/lib-franklin.js'; +import { createElement, getTextLabel, isExternalVideoAllowed } from '../../scripts/common.js'; +import { updateCookieValue } from '../../scripts/delayed.js'; + +let player; + +function onPlayerReady(event) { + console.log('ready'); + event.target.playVideo(); +} + +function onPlayerError(event) { + console.log(event); +} + +function onPlayerAutoplayBlocked(event) { + console.log(event); +} + +export function playVideo() { + if (player && player.playVideo) { + player.playVideo(); + } +} + +export default function decorate(block) { + loadScript('https://www.youtube.com/iframe_api'); + + let [videoLink] = block.querySelectorAll('a'); + const [, videoId] = videoLink.getAttribute('href').split('/embed/'); + const [videoCode] = videoId.split('?'); + videoLink = videoCode; + + console.log(videoLink); + + if (!videoLink) { + block.innerHTML = ''; + /* eslint-disable-next-line no-console */ + console.warn('V2 Livestream Embed block: There is no video link. Please check the provided URL.'); + return; + } + + // eslint-disable-next-line func-names + window.onYouTubeIframeAPIReady = function () { + console.log('onYouTubeIframeAPIReady'); + + if (window.YT) { + console.log('window.YT available'); + } + + // eslint-disable-next-line no-undef + player = new YT.Player('ytvideo', { + events: { + onReady: onPlayerReady, + onError: onPlayerError, + onAutoplayBlocked: onPlayerAutoplayBlocked, + }, + }); + }; + + // if (!isExternalVideoAllowed()) { + // const img = block.querySelector('picture img'); + // block.innerHTML = ''; + + // const cookieMsgContainer = createElement('div', { + // classes: 'cookie-message', + // }); + // cookieMsgContainer.style.background = `linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%), url(${img.src}) 100% center / cover no-repeat`; + + // const cookieMessage = document.createRange().createContextualFragment(` + //

${getTextLabel('single video message title')}

+ //

${getTextLabel('single video message text')}

+ //
+ // + // ${getTextLabel('single video message button deny')} + //
+ // `); + + // cookieMsgContainer.append(cookieMessage); + // block.append(cookieMsgContainer); + + // block.querySelector('.cookie-message__button-container .primary')?.addEventListener('click', () => { + // const domain = 'localhost'; + // const path = '/'; // assuming root path + // const expirationDate = new Date(); + // expirationDate.setFullYear(expirationDate.getFullYear() + 1); // 1 year from now + // const sameSite = 'Lax'; + + // console.log('updatecookie'); + + // updateCookieValue('OptanonConsent=', 'C0005:0', 'C0005:1', domain, path, expirationDate, sameSite); + // }); + + // return; + // } + + const iframeYT = document.createRange().createContextualFragment(` + + `); + + block.innerHTML = ''; + + block.append(...iframeYT.childNodes); +} diff --git a/common/modal/modal.css b/common/modal/modal.css index b3783b4a..07f40484 100644 --- a/common/modal/modal.css +++ b/common/modal/modal.css @@ -236,3 +236,20 @@ width: 100%; } } + +.modal-reveal { + display: flex; + flex-direction: column; + justify-content: center; +} + +/* stylelint-disable-next-line no-descending-specificity */ +.modal-reveal .modal-content { + height: auto; + aspect-ratio: auto; +} + +.modal-reveal .section > div { + padding-top: 0; + padding-bottom: 0; +} diff --git a/placeholder.json b/placeholder.json index 408136cb..e69dbbd2 100644 --- a/placeholder.json +++ b/placeholder.json @@ -233,11 +233,11 @@ }, { "Key": "single video message text", - "Text": "Our media viewer uses social media cookies and/or similar technologies set by third-party services, as outlined in our cookie policy. Use the “Okay” button or close this notice to consent and view hi-res media. Select “Deny” to view in low resolution." + "Text": "Our media viewer uses social media cookies and/or similar technologies set by third-party services, as outlined in our cookie policy. Use the “Okay” button or close this notice to consent and view hi-res media. Select “Deny” to view in low resolution." }, { "Key": "single video message button", - "Text": "Okay" + "Text": "Accept cookies" }, { "Key": "single video message button deny", diff --git a/scripts/delayed.js b/scripts/delayed.js index 40b3fd4f..4cfa5b4e 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -14,6 +14,40 @@ const cookieSetting = decodeURIComponent(document.cookie.split(';') const isPerformanceAllowed = cookieSetting.includes(COOKIES.performance); const isSocialAllowed = cookieSetting.includes(COOKIES.social); +export function updateCookieValue(cookieName, oldValue, newValue, domain, path, expires, sameSite) { + let cookies = decodeURIComponent(document.cookie).split(';'); + console.log(cookies); + + for (let i = 0; i < cookies.length; i++) { + let cookie = cookies[i].trim(); + if (cookie.startsWith(cookieName)) { + let cookieValue = cookie.substring(cookieName.length); + console.log(cookieValue); + if (cookieValue.includes(oldValue)) { + console.log(oldValue); + let updatedValue = encodeURIComponent(cookieValue.replace(oldValue, newValue)); + console.log(updatedValue); + let updatedCookie = cookieName + updatedValue; + console.log(updatedCookie); + if (domain) { + updatedCookie += `; domain=${domain}`; + } + if (path) { + updatedCookie += `; path=${path}`; + } + if (expires) { + updatedCookie += `; expires=${expires.toUTCString()}`; + } + if (sameSite) { + updatedCookie += `; SameSite=${sameSite}`; + } + document.cookie = updatedCookie; + } + break; + } + } +} + if (isPerformanceAllowed) { loadGoogleTagManager(); loadHotjar(); diff --git a/scripts/video-helper.js b/scripts/video-helper.js index 4f3116b6..ceb55272 100644 --- a/scripts/video-helper.js +++ b/scripts/video-helper.js @@ -365,3 +365,10 @@ export const addMuteControls = (section) => { controls.addEventListener('click', () => toggleMute(video)); }; + +export function loadYouTubeIframeAPI() { + const tag = document.createElement('script'); + tag.src = 'https://www.youtube.com/iframe_api'; + const firstScriptTag = document.getElementsByTagName('script')[0]; + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); +}