0

I'm working on a video player project and I'm using videojs as well as videojs-ima for ad pre-rolls.

I've finally figured out a way to tell if there is an ad present or not; however, I'm trying to return a boolean value of true or false in order to tell when to run and execute a certain code block.

Here's my code, it currently doesn't work like it's purpose to.


if (navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPad/i) ||
    navigator.userAgent.match(/Android/i)) {

    let checkAd = document.querySelectorAll('.ima-ad-container');

    let checkAdLoop = setInterval(() => {
        for (let i=0; i < checkAd.length; i++) {
            if (checkAd[i].style.display == 'none') {
                console.log('Ad is NOT playing.');
                return false;
            } else {
                console.log('Ad is playing.');
                return true;
                // do nothing
            }
        }
    }, 1000);
    player.on('touchend', () => {
        if (player.paused() && checkAdLoop() == false) {
            player.play();
        } else if (player.currentTime > 0 && checkAdLoop() == false) {
            player.pause();
        }
    });
    $('.vjs-icon-placeholder').on('touchend', () => {
        if (player.paused() && checkAdLoop() == false) {
            player.play();
        } else if (player.currentTime > 0 && checkAdLoop() == false) {
            player.pause();
        }
    });
}

I would love it if someone could please help me understand and could explain to me why this doesn't work. How could I go about fixing this?

I know I'm close. Thanks in advance!

Kasador
  • 405
  • 7
  • 18
  • 1
    A return value has to *go* somewhere. Where would the returned value from the handler be assigned? It just doesn't work that way. The return value from the interval function is ignored. – Pointy Apr 24 '19 at 17:59
  • 1
    Why do you want to return a value to decide whether to run some code instead of actually running the code? – VLAZ Apr 24 '19 at 17:59
  • Possible duplicate of [setInterval/setTimeout return value](https://stackoverflow.com/questions/940120/setinterval-settimeout-return-value) – Avanthika Apr 24 '19 at 18:00
  • @VLAZ Well, I've actually already tried just running the code. The thing is, and I'm pretty sure it has something to do with the `setInternval()` fuction, is that my event is going off twice. I'm allowed to play and pause the video with a tap on the player; however, it's not smooth and I usually will have to tap at least twice before the video plays, or pause. – Kasador Apr 24 '19 at 18:04
  • 2
    This sounds like an XY problem, then – VLAZ Apr 24 '19 at 18:06
  • @VLAZ Are you suggesting I make the players z-index the highest when there is no ad playing? – Kasador Apr 24 '19 at 18:13
  • You have `checkAdLoop()` and it is not even a function. checkAdLoop is going to be a number. – epascarello Apr 24 '19 at 18:27
  • @CazadorShaw no, I am suggesting [that you are looking for the wrong solution, instead of addressing the actual problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). In this case, the actual problem you face (X) is that running a function from `setInterval` didn't work, so instead of directly dealing with that, you figured that you can use a flag but ask a question for how to do that (Y). Classical XY problem – VLAZ Apr 24 '19 at 18:33

1 Answers1

1

This was a classical XY problem.

Trying to solve a problem that wasn't really related to the overall picture.

Here's the code that works and how I went about it differently.

if (navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPad/i) ||
    navigator.userAgent.match(/Android/i)) {

    let checkAd = $('.ima-ad-container');

    player.on('touchend', () => {
        if (checkAd.css('display') != 'none') {
            console.log('Ad is playing.');
            // do nothing
        } else if (checkAd.css('display') == 'none') {
            console.log('Ad is NOT playing.');

            if (player.paused()) {
                player.play();
            } else {
                player.pause();
            }
        }
    });
    $('.vjs-icon-placeholder').on('touchend', () => {
        if (checkAd.css('display') != 'none') {
            console.log('Ad is playing.');
            // do nothing

        } else if (checkAd.css('display') == 'none') {
            console.log('Ad is NOT playing.');

            if (player.paused()) {
                player.play();
            } else {
                player.pause();
            }
        }
    });
}
Kasador
  • 405
  • 7
  • 18