Assets 33680 (#26)

* Changes link colors for landing page teasers

* Created Functions to Detect Background Color

Created getVideoColor() and waitForVideoLoad() in order to track the color of the background video and changed the CSS styling of Landing page links under a <p> element

* Code cleanup

Cleaned up some unused code and added a transition for the color change on landing page links

* More code clean up

blocks/gmo-landing-page/gmo-landing-page.css

@@ -8,12 +8,27 @@
     color: #505050;
 }
 
+.gmo-landing-page p a:any-link {
+    color: #035fe6;
+    transition:
+        color 0.2s;
+}
+
+.gmo-landing-page p a:hover {
+    color: #136ff6;
+}
+
+.gmo-landing-page p a:active {
+    color: #035fe6;
+}
+
 .gmo-landing-page .video-background {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: center;
 }
+
 .gmo-landing-page .video-background video {
     position: relative;
     top: 0;

blocks/gmo-landing-page/gmo-landing-page.js

@@ -1,5 +1,45 @@
 import { readBlockConfig } from '../../scripts/lib-franklin.js';
 
+async function waitForVideoLoad() {
+    const video = document.querySelector('.desktop');
+    return new Promise((resolve) => {
+        video.oncanplaythrough = () => {
+            resolve();
+        };
+    });
+}
+
+async function getVideoColor(){
+    const video = document.querySelector('.desktop');
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    await waitForVideoLoad();
+
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+
+    let hexColorOld = null;
+
+    // Capture the video frame and extract the color information at the specified interval
+    setInterval(() => {
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const pixelData = context.getImageData(10, 10, canvas.width, canvas.height).data;
+        const red = pixelData[0];
+        const green = pixelData[1];
+        const blue = pixelData[2];
+        const hexColor = '#' + ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1);
+
+        if (hexColorOld !== hexColor) {
+            hexColorOld = hexColor; 
+            let linkActive = document.querySelector('.gmo-landing-page p a');
+            if (hexColor == '#000000') {
+                return linkActive.style.color = '#AEDBFE';
+            } 
+                linkActive.style.color = '#035FE6';
+        }   
+    }, 500);
+}
+
 export default async function decorate(block) {
     const host = location.origin;
     const signInMsg = getSignInMsg(block);
@@ -8,10 +48,11 @@ export default async function decorate(block) {
 
     block.innerHTML=`
     <div class="video-background">
-        <video autoplay loop muted playsinline class="desktop">
+        <video autoplay loop muted playsinline class="desktop" crossorigin="anonymous">
             <source src="${config.videodesktop}" type="video/mp4">
+            
         </video>
-        <video autoplay loop muted playsinline class="mobile">
+        <video autoplay loop muted playsinline class="mobile" crossorigin="anonymous">
             <source src="${config.videomobile}" type="video/mp4">
         </video>
     </div>
@@ -32,6 +73,7 @@ export default async function decorate(block) {
     </div>`
     const msgParent = block.querySelector(".signin-notif");
     msgParent.append(signInMsg);
+    getVideoColor();
 }
 
 function getSignInMsg(block) {
@@ -42,4 +84,5 @@ function getSignInMsg(block) {
         }
     });
     return msgDiv;
-}
+}
+

blocks/gmo-teaser/gmo-teaser.css

@@ -9,6 +9,18 @@
     text-transform: none;
 }
 
+.gmo-teaser a:any-link {
+    color: #72B7F9;
+}
+
+.gmo-teaser a:hover {
+    color: #8FCAFC;
+}
+
+.gmo-teaser a:active {
+    color: #AEDBFE;
+}
+
 .gmo-teaser .teaser {
     background-color: #292929;
     color: #efefef;