Untitled

mail@pastecode.io avatar
unknown
plain_text
7 months ago
13 kB
8
Indexable
Never
(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);
})();