RollerInlineTag.js 1.52 KB
function RollerInlineTag(el, tag) {
    this.player = new PlayerJs(el);

    this.roll = roller(this.player, tag);

    // We might have not been able to setup roller if there's an ad blocker.
    if (!this.roll) {
        return;
    }

    /**
     * When player is loaded and ready we will bind a listener for first click
     * so that we can start playing ads.
     */
    this.player.onReady(function (message) {
        if (/Android|iPhone|IEMobile|iPod|Opera Mini|webOS|BlackBerry/i.test(navigator.userAgent)) {
            this.addClickOverlay();
        } else {
            this.player.onFirstPlay(function () {
                console.log('FIRST PLAY');

                this.player.pause();
                this.roll.playAds();
            }.bind(this));
        }
    }.bind(this));
}

RollerInlineTag.prototype.addClickOverlay = function () {
    var clickEl = $('<div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; z-index: 9999;"></div>')
    .insertAfter(this.player.el)[0];

    clickEl.addEventListener('click', function () {
        console.log('FIRST CLICK');

        /**
         * This has to be done on mobile otherwise later on we can't start the
         * player because it must be initiated/activated by user (a click
         * event).
         */
        this.player.play();
        this.player.pause();

        clickEl.parentNode.removeChild(clickEl);

        this.roll.playAds();
    }.bind(this));
};

RollerInlineTag.prototype.destroy = function () {
    this.roll.destroy();
};