@snowplow/browser-plugin-youtube-tracking/dist/index.module.js

/*!
 * YouTube tracking for Snowplow v3.2.3 (http://bit.ly/sp-js)
 * Copyright 2022 Snowplow Analytics Ltd
 * Licensed under BSD-3-Clause
 */

import { __spreadArray, __assign } from 'tslib';
import { dispatchToTrackersInCollection } from '@snowplow/browser-tracker-core';
import { buildSelfDescribingEvent } from '@snowplow/tracker-core';

var SnowplowEvent;
(function (SnowplowEvent) {
    SnowplowEvent["PERCENTPROGRESS"] = "percentprogress";
    SnowplowEvent["SEEK"] = "seek";
    SnowplowEvent["VOLUMECHANGE"] = "volumechange";
})(SnowplowEvent || (SnowplowEvent = {}));

var YouTubeIFrameAPIURL = 'https://www.youtube.com/iframe_api';
// The payload a YouTube player event emits has no identifier of what event it is
// Some payloads can emit the same data
// i.e. onError and onPlaybackRateChange can both emit '{data: 2}'
var YTPlayerEvent;
(function (YTPlayerEvent) {
    YTPlayerEvent["ONSTATECHANGE"] = "onStateChange";
    YTPlayerEvent["ONPLAYBACKQUALITYCHANGE"] = "onPlaybackQualityChange";
    YTPlayerEvent["ONERROR"] = "onError";
    YTPlayerEvent["ONAPICHANGE"] = "onApiChange";
    YTPlayerEvent["ONPLAYBACKRATECHANGE"] = "onPlaybackRateChange";
    YTPlayerEvent["ONREADY"] = "onReady";
})(YTPlayerEvent || (YTPlayerEvent = {}));
var YTStateEvent = {
    '-1': 'unstarted',
    '0': 'ended',
    '1': 'play',
    '2': 'pause',
    '3': 'buffering',
    '5': 'cued'
};
var CaptureEventToYouTubeEvent = {
    ready: YTPlayerEvent.ONREADY,
    playbackratechange: YTPlayerEvent.ONPLAYBACKRATECHANGE,
    playbackqualitychange: YTPlayerEvent.ONPLAYBACKQUALITYCHANGE,
    error: YTPlayerEvent.ONERROR,
    apichange: YTPlayerEvent.ONAPICHANGE
};
// As every state event requires YTPlayerEvent.ONSTATECHANGE, they are added
// to CaptureEventToYouTubeEvent with the below loop
Object.keys(YTStateEvent).forEach(function (k) { return (CaptureEventToYouTubeEvent[YTStateEvent[k]] = YTPlayerEvent.ONSTATECHANGE); });
var YTState;
(function (YTState) {
    YTState["UNSTARTED"] = "unstarted";
    YTState["ENDED"] = "ended";
    YTState["PLAYING"] = "play";
    YTState["PAUSED"] = "pause";
    YTState["BUFFERING"] = "buffering";
    YTState["CUED"] = "cued";
})(YTState || (YTState = {}));
var YTError = {
    2: 'INVALID_URL',
    5: 'HTML5_ERROR',
    100: 'VIDEO_NOT_FOUND',
    101: 'MISSING_EMBED_PERMISSION',
    150: 'MISSING_EMBED_PERMISSION'
};

var YTEvent;
(function (YTEvent) {
    YTEvent["STATECHANGE"] = "statechange";
    YTEvent["PLAYBACKQUALITYCHANGE"] = "playbackqualitychange";
    YTEvent["ERROR"] = "error";
    YTEvent["APICHANGE"] = "apichange";
    YTEvent["PLAYBACKRATECHANGE"] = "playbackratechange";
    YTEvent["READY"] = "ready";
})(YTEvent || (YTEvent = {}));
[
    YTState.BUFFERING,
    YTState.CUED,
    YTState.ENDED,
    YTState.PAUSED,
    YTState.PLAYING,
    YTState.UNSTARTED,
];

var AllEvents = __spreadArray(__spreadArray(__spreadArray([], Object.keys(YTEvent).map(function (k) { return YTEvent[k]; })), Object.keys(SnowplowEvent).map(function (k) { return SnowplowEvent[k]; })), Object.keys(YTState).map(function (k) { return YTState[k]; }));
var DefaultEvents = [
    YTState.PAUSED,
    YTState.PLAYING,
    YTState.ENDED,
    SnowplowEvent.SEEK,
    SnowplowEvent.VOLUMECHANGE,
    YTPlayerEvent.ONPLAYBACKQUALITYCHANGE,
    YTPlayerEvent.ONPLAYBACKRATECHANGE,
    SnowplowEvent.PERCENTPROGRESS,
];
var EventGroups = {
    AllEvents: AllEvents,
    DefaultEvents: DefaultEvents
};

function trackingOptionsParser(mediaId, conf) {
    var defaults = {
        mediaId: mediaId,
        captureEvents: DefaultEvents,
        youtubeEvents: [
            YTPlayerEvent.ONSTATECHANGE,
            YTPlayerEvent.ONPLAYBACKQUALITYCHANGE,
            YTPlayerEvent.ONERROR,
            YTPlayerEvent.ONPLAYBACKRATECHANGE,
        ],
        updateRate: 500,
        progress: {
            boundaries: [10, 25, 50, 75],
            boundaryTimeoutIds: []
        }
    };
    if (!conf)
        return defaults;
    if (conf.updateRate)
        defaults.updateRate = conf.updateRate;
    if (conf.captureEvents) {
        var parsedEvents = [];
        var _loop_1 = function (ev) {
            // If an event is an EventGroup, get the events from that group
            if (EventGroups.hasOwnProperty(ev)) {
                parsedEvents = parsedEvents.concat(EventGroups[ev]);
            }
            else if (!Object.keys(AllEvents).filter(function (k) { return k === ev; })) {
                console.warn("'" + ev + "' is not a valid event.");
            }
            else {
                parsedEvents.push(ev);
            }
        };
        for (var _i = 0, _a = conf.captureEvents; _i < _a.length; _i++) {
            var ev = _a[_i];
            _loop_1(ev);
        }
        conf.captureEvents = parsedEvents;
        for (var _b = 0, _c = conf.captureEvents; _b < _c.length; _b++) {
            var ev = _c[_b];
            var youtubeEvent = CaptureEventToYouTubeEvent[ev];
            if (CaptureEventToYouTubeEvent.hasOwnProperty(ev) && defaults.youtubeEvents.indexOf(youtubeEvent) === -1) {
                defaults.youtubeEvents.push(youtubeEvent);
            }
        }
        if (conf.captureEvents.indexOf(SnowplowEvent.PERCENTPROGRESS) !== -1) {
            defaults.progress = {
                boundaries: (conf === null || conf === void 0 ? void 0 : conf.boundaries) || defaults.progress.boundaries,
                boundaryTimeoutIds: []
            };
        }
    }
    return __assign(__assign({}, defaults), conf);
}
// URLSearchParams is not supported in IE
// https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
function addUrlParam(url, key, value) {
    var urlParams = parseUrlParams(url);
    urlParams[key] = value;
    return url + "?" + urlParamsToString(urlParams);
}
function parseUrlParams(url) {
    var params = {};
    var urlParams = url.split('?')[1];
    if (!urlParams)
        return params;
    urlParams.split('&').forEach(function (p) {
        var param = p.split('=');
        params[param[0]] = param[1];
    });
    return params;
}
function urlParamsToString(urlParams) {
    // convert an object of url parameters to a string
    var params = '';
    Object.keys(urlParams).forEach(function (p) {
        params += p + "=" + urlParams[p] + "&";
    });
    return params.slice(0, -1);
}

function buildYouTubeEvent(player, eventName, conf, eventData) {
    var data = { type: eventName };
    if (conf.hasOwnProperty('label'))
        data.label = conf.label;
    var context = [
        getYouTubeEntities(player, conf.urlParameters, eventData),
        getMediaPlayerEntities(eventName, player, conf.urlParameters, eventData),
    ];
    return {
        schema: 'iglu:com.snowplowanalytics.snowplow/media_player_event/jsonschema/1-0-0',
        data: data,
        context: context
    };
}
function getYouTubeEntities(player, urlParameters, eventData) {
    var spherical = player.getSphericalProperties();
    var playerStates = {
        buffering: false,
        cued: false,
        unstarted: false
    };
    var state = player.getPlayerState();
    if (playerStates.hasOwnProperty(YTStateEvent[state])) {
        playerStates[YTStateEvent[state]] = true;
    }
    var data = {
        autoPlay: urlParameters.autoplay === '1',
        avaliablePlaybackRates: player.getAvailablePlaybackRates(),
        buffering: playerStates.buffering,
        controls: urlParameters.controls !== '0',
        cued: playerStates.cued,
        loaded: parseInt(String(player.getVideoLoadedFraction() * 100)),
        playbackQuality: player.getPlaybackQuality(),
        playerId: player.getIframe().id,
        unstarted: playerStates.unstarted,
        url: player.getVideoUrl()
    };
    if (spherical)
        data = __assign(__assign({}, data), spherical);
    if (eventData === null || eventData === void 0 ? void 0 : eventData.error)
        data.error = eventData.error;
    var playlistIndex = player.getPlaylistIndex();
    if (playlistIndex !== -1)
        data.playlistIndex = playlistIndex;
    var playlist = player.getPlaylist();
    if (playlist) {
        data.playlist = playlist.map(function (item) { return parseInt(item); });
    }
    var qualityLevels = player.getAvailableQualityLevels();
    if (qualityLevels)
        data.avaliableQualityLevels = qualityLevels;
    return {
        schema: 'iglu:com.youtube/youtube/jsonschema/1-0-0',
        data: data
    };
}
function getMediaPlayerEntities(e, player, urlParameters, eventData) {
    var playerStates = {
        ended: false,
        paused: false
    };
    var state = player.getPlayerState();
    if (playerStates.hasOwnProperty(YTStateEvent[state])) {
        playerStates[YTStateEvent[state]] = true;
    }
    var data = {
        currentTime: player.getCurrentTime(),
        duration: player.getDuration(),
        ended: playerStates.ended,
        loop: urlParameters.loop === '1',
        muted: player.isMuted(),
        paused: playerStates.paused,
        playbackRate: player.getPlaybackRate(),
        volume: player.getVolume()
    };
    if (e === SnowplowEvent.PERCENTPROGRESS) {
        data.percentProgress = eventData.percentThrough;
    }
    return {
        schema: 'iglu:com.snowplowanalytics.snowplow/media_player/jsonschema/1-0-0',
        data: data
    };
}

var _trackers = {};
var trackedPlayers = {};
var trackingQueue = [];
var LOG;
function YouTubeTrackingPlugin() {
    return {
        activateBrowserPlugin: function (tracker) {
            _trackers[tracker.id] = tracker;
        },
        logger: function (logger) {
            LOG = logger;
        }
    };
}
function trackEvent(event, trackers) {
    if (trackers === void 0) { trackers = Object.keys(_trackers); }
    dispatchToTrackersInCollection(trackers, _trackers, function (t) {
        t.core.track(buildSelfDescribingEvent({ event: event }), event.context, event.timestamp);
    });
}
function enableYouTubeTracking(args) {
    var conf = trackingOptionsParser(args.id, args.options);
    var el = document.getElementById(args.id);
    if (!el) {
        LOG.error('Cannot find YouTube iframe');
        return;
    }
    // The 'enablejsapi' parameter is required to be '1' for the API to be able to communicate with the player
    if (el.src.indexOf('enablejsapi') === -1) {
        el.src = addUrlParam(el.src, 'enablejsapi', '1');
    }
    conf.urlParameters = parseUrlParams(el.src);
    // If the API is ready, we can immediately add the listeners
    if (typeof YT !== 'undefined' && typeof YT.Player !== 'undefined') {
        addListeners(conf);
    }
    else {
        // If not, we put them into a queue that will have listeners added once the API is ready
        // and start trying to load the iframe API
        trackingQueue.push(conf);
        handleYouTubeIframeAPI();
    }
}
var iframeAPIRetryWait = 100;
function handleYouTubeIframeAPI() {
    // First we check if the script tag exists in the DOM, and enable the API if not
    var scriptTags = Array.prototype.slice.call(document.getElementsByTagName('script'));
    if (!scriptTags.some(function (s) { return s.src === YouTubeIFrameAPIURL; })) {
        // Load the Iframe API
        // https://developers.google.com/youtube/iframe_api_reference
        var tag = document.createElement('script');
        tag.src = YouTubeIFrameAPIURL;
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }
    // Once the API is ready to use, 'YT.Player' will be defined
    // 'YT.Player' is not available immediately after 'YT' is defined,
    // so we need to wait until 'YT' is defined to then check 'YT.Player'
    if (typeof YT === 'undefined' || typeof YT.Player === 'undefined') {
        if (iframeAPIRetryWait <= 6400) {
            setTimeout(handleYouTubeIframeAPI, iframeAPIRetryWait);
            iframeAPIRetryWait *= 2;
        }
        else {
            LOG.error('YouTube iframe API failed to load.');
        }
    }
    else {
        // Once the API is avaliable, listeners are attached to anything sitting in the queue
        while (trackingQueue.length) {
            addListeners(trackingQueue.pop());
        }
    }
}
function addListeners(conf) {
    var _a;
    var builtInEvents = (_a = {},
        _a[YTPlayerEvent.ONREADY] = function () { return youtubeEvent(trackedPlayers[conf.mediaId].player, YTEvent.READY, conf); },
        _a[YTPlayerEvent.ONSTATECHANGE] = function (e) {
            if (conf.captureEvents.indexOf(YTStateEvent[e.data.toString()]) !== -1) {
                youtubeEvent(trackedPlayers[conf.mediaId].player, YTStateEvent[e.data], conf);
            }
        },
        _a[YTPlayerEvent.ONPLAYBACKQUALITYCHANGE] = function () {
            return youtubeEvent(trackedPlayers[conf.mediaId].player, YTEvent.PLAYBACKQUALITYCHANGE, conf);
        },
        _a[YTPlayerEvent.ONAPICHANGE] = function () { return youtubeEvent(trackedPlayers[conf.mediaId].player, YTEvent.APICHANGE, conf); },
        _a[YTPlayerEvent.ONERROR] = function (e) {
            return youtubeEvent(trackedPlayers[conf.mediaId].player, YTEvent.ERROR, conf, { error: YTError[e.data] });
        },
        _a[YTPlayerEvent.ONPLAYBACKRATECHANGE] = function () {
            return youtubeEvent(trackedPlayers[conf.mediaId].player, YTEvent.PLAYBACKRATECHANGE, conf);
        },
        _a);
    var playerEvents = {};
    conf.youtubeEvents.forEach(function (e) {
        playerEvents[e] = builtInEvents[e];
    });
    trackedPlayers[conf.mediaId] = {
        player: new YT.Player(conf.mediaId, { events: __assign({}, playerEvents) }),
        conf: conf,
        seekTracking: {
            prevTime: 0,
            enabled: false
        },
        volumeTracking: {
            prevVolume: 0,
            enabled: false
        }
    };
}
function youtubeEvent(player, eventName, conf, eventData) {
    var playerInstance = trackedPlayers[conf.mediaId];
    if (!playerInstance.seekTracking.enabled && conf.captureEvents.indexOf('seek') !== 1) {
        enableSeekTracking(player, conf, eventData);
    }
    if (!playerInstance.volumeTracking.enabled && conf.captureEvents.indexOf('volume') !== 1) {
        enableVolumeTracking(player, conf, eventData);
    }
    if (conf.hasOwnProperty('boundaries')) {
        progressHandler(player, eventName, conf);
    }
    var event = buildYouTubeEvent(player, eventName, conf, eventData);
    trackEvent(event);
}
// Progress Tracking
function progressHandler(player, eventName, conf) {
    var timeoutIds = conf.progress.boundaryTimeoutIds;
    if (eventName === YTState.PAUSED) {
        timeoutIds.forEach(function (id) { return clearTimeout(id); });
        timeoutIds.length = 0;
    }
    if (eventName === YTState.PLAYING) {
        setPercentageBoundTimeouts(player, conf);
    }
}
function setPercentageBoundTimeouts(player, conf) {
    var _a;
    var currentTime = player.getCurrentTime();
    (_a = conf.progress) === null || _a === void 0 ? void 0 : _a.boundaries.forEach(function (p) {
        var _a;
        var percentTime = player.getDuration() * 1000 * (p / 100);
        if (currentTime !== 0) {
            percentTime -= currentTime * 1000;
        }
        if (p < percentTime) {
            (_a = conf.progress) === null || _a === void 0 ? void 0 : _a.boundaryTimeoutIds.push(setTimeout(function () { return waitAnyRemainingTimeAfterTimeout(player, conf, percentTime, p); }, percentTime));
        }
    });
}
// The timeout in setPercentageBoundTimeouts fires ~100 - 300ms early
// waitAnyRemainingTimeAfterTimeout ensures the event is fired accurately
function waitAnyRemainingTimeAfterTimeout(player, conf, percentTime, p) {
    if (player.getCurrentTime() * 1000 < percentTime) {
        setTimeout(function () { return waitAnyRemainingTimeAfterTimeout(player, conf, percentTime, p); }, 10);
    }
    else {
        youtubeEvent(player, SnowplowEvent.PERCENTPROGRESS, conf, {
            percentThrough: p
        });
    }
}
// Seek Tracking
function enableSeekTracking(player, conf, eventData) {
    trackedPlayers[conf.mediaId].seekTracking.enabled = true;
    setInterval(function () { return seekEventTracker(player, conf, eventData); }, conf.updateRate);
}
function seekEventTracker(player, conf, eventData) {
    var playerInstance = trackedPlayers[conf.mediaId];
    var playerTime = player.getCurrentTime();
    if (Math.abs(playerTime - (playerInstance.seekTracking.prevTime + 0.5)) > 1) {
        youtubeEvent(player, SnowplowEvent.SEEK, conf, eventData);
    }
    playerInstance.seekTracking.prevTime = playerTime;
}
// Volume Tracking
function enableVolumeTracking(player, conf, eventData) {
    trackedPlayers[conf.mediaId].volumeTracking.enabled = true;
    trackedPlayers[conf.mediaId].volumeTracking.prevVolume = player.getVolume();
    setInterval(function () { return volumeEventTracker(player, conf, eventData); }, conf.updateRate);
}
function volumeEventTracker(player, conf, eventData) {
    var playerVolumeTracking = trackedPlayers[conf.mediaId].volumeTracking;
    var playerVolume = player.getVolume();
    if (playerVolume !== playerVolumeTracking.prevVolume) {
        youtubeEvent(player, SnowplowEvent.VOLUMECHANGE, conf, eventData);
    }
    playerVolumeTracking.prevVolume = playerVolume;
}

export { YouTubeTrackingPlugin, enableYouTubeTracking };
//# sourceMappingURL=index.module.js.map