Untitled
unknown
plain_text
a year ago
13 kB
12
Indexable
(function(){
var style=document.createElement('style');style.type='text/css';style.appendChild(document.createTextNode('@media(max-width:767px) { html body .game-card[data-adventure-id="50"], html body .game-card[data-adventure-id="107"], html body .game-card[data-adventure-id="8"] { display: none !important; } html body .cv-2-3-videos-container { margin-top: 3rem; } html body .cv-2-3-video-box { width: 100%; position: relative; } html body .cv-2-3-bg-video { width: 100%; aspect-ratio: 9/16; object-fit: fill; height: 666px; } html body .cv-2-3-video-content-div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); } html body .cv-2-3-video-content-div>.cv-2-3-upper { flex: 1; padding: 44px 60px 40px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } html body .cv-2-3-video-title { color: #FFF; text-align: center; font-family: \'MADESoulmaze\'; font-size: 27px; font-style: normal; font-weight: 400; line-height: 27px; text-transform: uppercase; text-align: center; } html body .cv-2-3-play-video { width: 100px; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; position: relative; } html body .cv-2-3-play-video .cv-2-3-play-img { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; transition: all 0.2s linear; } html body .cv-2-3-play-video:not(.cv-2-3-playing) .cv-2-3-play-img.cv-2-3-p, html body .cv-2-3-play-video.cv-2-3-playing .cv-2-3-play-img:not(.cv-2-3-p) { opacity: 0; } html body .cv-2-3-video-content-div>.cv-2-3-bottom { padding: 32px 44px 20px; display: flex; flex-direction: column; align-items: center; } html body .cv-2-3-book-now { display: flex; padding: 13px 32px; justify-content: center; align-items: center; gap: 10px; background: #FF00B8; width: 100%; color: #FFF; text-align: center; font-family: \'MADESoulmaze\'; font-size: 22px; font-style: normal; font-weight: 400; line-height: 28px; text-transform: uppercase; cursor: pointer; margin-top: 38px; } html body .cv-2-3-learn-more { color: #FFF; font-family: \'Rubik\'; font-size: 18px; font-style: normal; font-weight: 600; line-height: 23px; /* 127.778% */ text-decoration-line: underline; margin-top: 24px; } html body .cv-2-3-usps { display: flex; flex-wrap: wrap; width: 100%; grid-row-gap: 16px; } html body .cv-2-3-usps>.cv-2-3-usp { width: 50%; display: flex; align-items: center; grid-gap: 7.44px; color: #FFF; font-family: Rubik; font-size: 15px; font-style: normal; font-weight: 700; line-height: 20px; } html body .cv-2-3-play-video .cv-2-3-play-img.cv-2-3-p img { scale: 1.3; } html body .cv-2-3-video-box+.cv-2-3-video-box { margin-top: 65px; }}'));document.head.appendChild(style);
(function (w) {
"use strict";
var tag = "cv-2-3",
debug = document.cookie.indexOf("cfQA") > -1,
window = typeof unsafeWindow !== "undefined" ? unsafeWindow : w,
testData = {
"vdos": [
{
poster: "https://cfactory-img.s3.amazonaws.com/pitches/IGB/cvBox1.png",
vdoSrc: "https://cfactory-img.s3.amazonaws.com/pitches/IGB/SnapTik_App_7144076508448050438-HD.mp4",
vdoTitle: "SQUID GAME",
usp: ["60mins", "Challenge", "16+", "2-6"],
gameCardId: "50",
},
{
poster: "https://cfactory-img.s3.amazonaws.com/pitches/IGB/cvBox2.png",
vdoSrc: "https://cfactory-img.s3.amazonaws.com/pitches/IGB/ssstik.io_1695797671490.mp4",
vdoTitle: `PAW PATROL: NEW RECRUITS`,
usp: ["60mins", "Challenge", "16+", "2-6"],
gameCardId: "107",
},
{
poster: "https://cfactory-img.s3.amazonaws.com/pitches/IGB/cvBox3.png",
vdoSrc: "https://cfactory-img.s3.amazonaws.com/pitches/IGB/TikTok%20Alien%20Aptitude%20Test.mp4",
vdoTitle: "ALIEN APTITUDE TEST",
usp: ["60mins", "Competition", "8+", "2-6"],
gameCardId: "8",
}
]
,
"uspIcons": {
"60mins": "https://cfactory-img.s3.amazonaws.com/pitches/IGB/cvClock.svg",
"Challenge": "https://cfactory-img.s3.amazonaws.com/pitches/IGB/ImmersiveGamebox_GameFilters_Challenge.svg",
"16+": "https://cfactory-img.s3.amazonaws.com/pitches/IGB/cvage.svg",
"8+": "https://cfactory-img.s3.amazonaws.com/pitches/IGB/cvage.svg",
"2-6": "https://cfactory-img.s3.amazonaws.com/pitches/IGB/cvClock.svg",
"Competition": "https://cfactory-img.s3.amazonaws.com/pitches/IGB/ImmersiveGamebox_GameFilters_Competition.svg"
}
};
window[tag] = {
log: function (msg) {
if (debug) console.log("[CV]", tag, "-->", msg);
},
waitForElement: function (cssSelector, callback) {
var stop,
elementCached,
timeout,
check = function () {
try {
elementCached = document.querySelector(cssSelector);
if (stop) return;
if (elementCached) {
callback(elementCached);
clearTimeout(timeout);
window[tag].log(cssSelector + " found");
} else {
window.requestAnimationFrame(check);
}
} catch (err) {
window[tag].log(err.message);
}
};
window.requestAnimationFrame(check);
timeout = setTimeout(function () {
stop = true;
window[tag].log(cssSelector + " not found");
}, 15000);
},
testStart: function () {
try {
this.waitForElement("body", function (docBody) {
docBody.classList.add(tag);
});
// INITIALIZE THE TEST
initVariation();
window[tag].log("test running");
} catch (err) {
window[tag].log(err.message);
}
},
};
window[tag].testStart();
function initVariation() {
window[tag].waitForElement("html body .games-category-filter", () => {
if (window.innerWidth < 767) {
const videosHTML = `<div class="${tag}-videos-container">${genVideosHTML()}</div>`;
if (!document.querySelector(`.${tag}-videos-container`)) {
document.querySelector("html body .games-category-filter").insertAdjacentHTML("afterend", videosHTML);
videoElsEvents();
}
}
});
}
const genVideosHTML = () => {
const videos = testData.vdos;
const HTML = videos.reduce((t, vD) => {
return t += videoTemplate(vD);
}, "");
return HTML;
}
const videoTemplate = (vD) => {
const videoHTML = `
<!-- video template -->
<div class="${tag}-video-box" data-playing="false">
<video poster="${vD.poster}" disablepictureinpicture=""
controlslist="nodownload noplaybackrate" class="${tag}-bg-video">
<source src="${vD.vdoSrc}" type="video/mp4">
</video>
<div class="${tag}-video-content-div">
<div class="${tag}-upper">
<h1 class="${tag}-video-title">${vD.vdoTitle}</h1>
<button class="${tag}-play-video">
<span class="${tag}-play-img">
<img src="https://cfactory-img.s3.amazonaws.com/pitches/IGB/cvPlay.png">
</span>
<span class="${tag}-play-img ${tag}-p">
<img src="https://cfactory-img.s3.amazonaws.com/pitches/IGB/cvPause.png">
</span>
</button>
</div>
<div class="${tag}-bottom">
<div class="${tag}-usps">
<div class="${tag}-usp">
<img src="${testData.uspIcons[vD.usp[0]]}">
${vD.usp[0]}
</div>
<div class="${tag}-usp">
<img src="${testData.uspIcons[vD.usp[1]]}">${vD.usp[1]}
</div>
<div class="${tag}-usp">
<img src="${testData.uspIcons[vD.usp[2]]}">${vD.usp[2]}
</div>
<div class="${tag}-usp">
<img src="${testData.uspIcons[vD.usp[3]]}">${vD.usp[3]}
</div>
</div>
<a class="${tag}-book-now other-ctasss" data-id="${vD.gameCardId}">BOOK NOW</a><a class="${tag}-learn-more other-ctasss" data-id="${vD.gameCardId}">Learn more</a>
</div>
</div>
</div>
`;
return videoHTML;
}
const videoElsEvents = () => {
// play and pausing video
document.querySelectorAll(`.${tag}-video-box`).forEach(vDPlay => {
if (vDPlay) {
vDPlay.addEventListener("click", function (e) {
const eTrgt = e.target;
if (!eTrgt.classList.contains('other-ctasss')) {
const thisBox = !eTrgt.classList.contains(`${tag}-video-box`) ? eTrgt.closest(`.${tag}-video-box`) : eTrgt;
const vDEl = thisBox.querySelector("video");
const playBtn = thisBox.querySelector(`.${tag}-play-video`);
const isPlaying = playPausevideo(vDEl) || false;
if (isPlaying) {
playBtn.classList.add(`${tag}-playing`);
} else {
playBtn.classList.remove(`${tag}-playing`);
}
thisBox.setAttribute("data-playing", isPlaying);
}
});
}
});
// book now click
document.querySelectorAll(`.${tag}-book-now`).forEach(bkCt => {
if (bkCt) {
bkCt.addEventListener("click", function () {
const gameCrdId = this.getAttribute("data-id");
const sel = `html body .game-card[data-adventure-id="${gameCrdId}"]>div>div:last-child>div a`;
window[tag].waitForElement(sel, function () {
document.querySelector(sel).click();
});
});
}
});
// learn more click
document.querySelectorAll(`.${tag}-learn-more`).forEach(lnCt => {
if (lnCt) {
lnCt.addEventListener("click", function () {
const gameCrdId = this.getAttribute("data-id");
const sel = `html body .game-card[data-adventure-id="${gameCrdId}"]>div>div:last-child>a.underline`;
window[tag].waitForElement(sel, function () {
document.querySelector(sel).click();
});
});
}
});
// check is video in viewport
window.addEventListener("scroll", function () {
const playingVideoBox = document.querySelector(`.${tag}-video-box[data-playing="true"]`) || document.querySelector(`.${tag}-video-box`);
const scrollDirection = getScrollDirection();
if (scrollDirection === "down") {
if (!playingVideoBox.previousElementSibling && playingVideoBox.getAttribute("data-playing") == "false") {
playingVideoBox.click();
} else {
const playingVideoBoxNxtSib = playingVideoBox.nextElementSibling;
if (playingVideoBoxNxtSib && isInViewport(playingVideoBoxNxtSib) && playingVideoBoxNxtSib.getAttribute("data-playing") == "false") {
// pausing running video
playingVideoBox.click();
// running viewport el video
playingVideoBoxNxtSib.click();
}
}
} else {
const playingVideoBoxPrvSib = playingVideoBox.previousElementSibling;
if (playingVideoBoxPrvSib && isInViewport(playingVideoBoxPrvSib) && playingVideoBoxPrvSib.getAttribute("data-playing") == "false") {
// pausing running video
playingVideoBox.click();
// running viewport el video
playingVideoBoxPrvSib.click();
}
}
});
}
const playPausevideo = (vDEl) => {
if (vDEl.paused || vDEl.readyState < 3) {
vDEl.play();
return true;
} else {
vDEl.pause();
return false;
}
};
const isInViewport = (element) => {
const rect = element.getBoundingClientRect();
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
const elementHeight = rect.bottom - rect.top;
return (
rect.bottom >= viewportHeight / 3 && // Bottom is at least 1/3 from the top
rect.top <= (2 / 3) * viewportHeight && // Top is at most 2/3 from the top
rect.right >= 0 && // Right side is visible
rect.left <= window.innerWidth // Left side is visible
);
}
let lastScrollPosition = 0;
function getScrollDirection() {
const currentScrollPosition = window.scrollY;
if (currentScrollPosition > lastScrollPosition) {
lastScrollPosition = currentScrollPosition;
return 'down';
} else {
lastScrollPosition = currentScrollPosition;
return 'up';
}
}
})(window);
})();
Editor is loading...