WIP

Netcentric · Jan 11, 2024 · f251a65 · f251a65
1 parent 107991d
commit f251a65
Show file tree

Hide file tree

Showing 8 changed files with 229 additions and 38 deletions.
diff --git 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
@@ -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(`
-      <h3 class="cookie-message__title">${getTextLabel('single video message title')}</h3>
-      <p class="cookie-message__text">${getTextLabel('single video message text')}</p>
-      <div class="cookie-message__button-container">
-        <button class="primary dark">${getTextLabel('single video message button')}</button>
-        <button class="secondary dark">${getTextLabel('single video message button deny')}</button>
-      </div>
-    `);
-
-    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
@@ -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
@@ -0,0 +1,121 @@
+/* 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');
+    }
+    setTimeout(() => {
+      // eslint-disable-next-line no-undef
+      player = new YT.Player('ytvideo', {
+        events: {
+          onReady: onPlayerReady,
+          onError: onPlayerError,
+          onAutoplayBlocked: onPlayerAutoplayBlocked,
+        },
+      });
+    }, 3000);
+    // eslint-disable-next-line no-undef
+    // player = new YT.Player('ytvideo', {
+    //   events: {
+    //     onReady: onPlayerReady,
+    //     onError: onPlayerError,
+    //     onAutoplayBlocked: onPlayerAutoplayBlocked,
+    //   },
+    // });
+
+    console.log(player);
+  };
+
+  // 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(`
+  //     <h3 class="cookie-message__title">${getTextLabel('single video message title')}</h3>
+  //     <p class="cookie-message__text">${getTextLabel('single video message text')}</p>
+  //     <div class="cookie-message__button-container">
+  //       <button class="primary dark">${getTextLabel('single video message button')}</button>
+  //       <a href="/" class="button secondary dark">${getTextLabel('single video message button deny')}</a>
+  //     </div>
+  //   `);
+
+  //   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(`
+    <iframe class="v2-livestream-embed" id="ytvideo"
+      frameborder="0" allowfullscreen=""
+      src="https://www.youtube.com/embed/${videoLink}?color=white&amp;rel=0&amp;playsinline=1&amp;enablejsapi=1&amp;">
+    </iframe>
+  `);
+
+  block.innerHTML = '';
+
+  block.append(...iframeYT.childNodes);
+}
diff --git 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
@@ -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 <a href='#'>cookie policy</a>. 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 <a href=\"/cookies/\">cookie policy</a>. 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
@@ -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
@@ -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);
+}