rcrooks
2/11/2016 - 2:07 PM

video reports by player and day

video reports by player and day

var BCLS = (function (window, document, datepickr) {
    var callNumber = 0,
        useMyAccount = document.getElementById("useMyAccount"),
        basicInfo = document.getElementById("basicInfo"),
        accountID = document.getElementById("accountID"),
        client_id = document.getElementById("client_id"),
        client_secret = document.getElementById("client_secret"),
        dateSelector = document.getElementById("dateSelector"),
        playerSelector = document.getElementById("playerSelector"),
        videoSelector = document.getElementById("videoSelector"),
        reportTableBody = document.getElementById("reportTableBody"),
        proxyURL = "https://solutions.brightcove.com/bcls/bcls-proxy/bcls-proxy.php",
        currentPlayerIndex = 0,
        currentVideoIndex = 0,
        currentDayIndex = 0,
        currentPlayer,
        currentPlayerName,
        currentVideo,
        currentVideoName,
        currentDay,
        playerMax,
        videoMax,
        dayMax,
        daysArray = [],
        dateToMS,
        dateFromMS,
        videoData,
        playerData,
        playersArray = [],
        analyticsData = {},
        playerID,
        videoID,
        dayMS,
        fromDate = document.getElementById("fromDatePicker"),
        toDate = document.getElementById("toDatePicker"),
        getData = document.getElementById("getData"),
        gettingDataDisplay = document.getElementById("gettingDataDisplay"),
        today = new Date(),
        monthAgo = new Date(today - (30 * 24 * 60 * 60 * 1000)),
        dataDisplayBodyTemplate = "<td>{{video_name}}</td><td>Totals</td><td>{{totalPlays}}</td><td>{{totalAvgSecondsViewed}}</td><td>{{totalSecondsViewed}}</td></tr>{{#items}}<tr><td></td><td></td><td>{{date}}</td><td>{{video_view}}</td><td>{{avgSecondsViewed}}</td><td>{{totalSecondsViewed}}</td></tr>{{/items}}",
        playerSelectTemplate = "{{#items}}<option value=\"{{player}}\">{{player_name}}</options>{{/items}}",
        videoSelectTemplate = "{{#items}}<option value=\"{{video}}\">{{video_name}}</options>{{/items}}",
        callType;
        /**
         * Logging function - safe for IE
         * @param  {string} context description of the data
         * @param  {*} message the data to be logged by the console
         * @return {}
         */
        function bclslog(context, message) {
            if (window["console"] && console["log"]) {
              console.log(context, message);
            };
            return;
        }
        // more robust test for strings "not defined"
        function isDefined (v) {
            if (v === "" || v === null || v === "undefined" || v == undefined) {
              return false;
            }
            return true;
        }
         function getMonthName(month) {
            var name;
            switch (parseInt(month)) {
                case 0:
                name = "Jan";
                break;
                case 1:
                name = "Feb";
                break;
                case 2:
                name = "Mar";
                break;
                case 3:
                name = "Apr";
                break;
                case 4:
                name = "May";
                break;
                case 5:
                name = "Jun";
                break;
                case 6:
                name = "Jul";
                break;
                case 7:
                name = "Aug";
                break;
                case 8:
                name = "Sep";
                break;
                case 9:
                name = "Oct";
                break;
                case 10:
                name = "Nov";
                break;
                case 11:
                name = "Dec";
                break;
            }
            return name;
        }
        function displayData() {
            var displayStr, playerObject, videoObject, template, barChartData, chart;
            currentPlayer = playerSelector.options[playerSelector.selectedIndex].value;
            currentVideoIndex = videoSelector.selectedIndex;
            playerObject = analyticsData[currentPlayer];
            bclslog('currentVideoIndex', currentVideoIndex);
            bclslog('playerObject.items[currentVideoIndex]', playerObject.items[currentVideoIndex]);
            videoObject = playerObject.items[currentVideoIndex];
            bclslog('videoObject', videoObject);
            displayStr = "<tr style=\"background-color:#64AAB2;color:#FFF;\"><th>" + playerObject.player_name + "</th>";
            template = Handlebars.compile(dataDisplayBodyTemplate);
            displayStr += template(videoObject);
            reportTableBody.innerHTML = displayStr;
            // chart
            bclslog("videoObject.chartData", videoObject.chartData);
            barChartData = videoObject.chartData;
            $.plot("#chartView", [ barChartData ], {
                series: {
                    bars: {
                        show: true,
                        barWidth: 0.6,
                        align: "center"
                    }
                },
                xaxis: {
                    mode: "categories",
                    tickLength: 0
                }
            });
        }
        function getTotals() {
            var player, video, i, imax, j, jmax, item, date, thisVideo;
            for (player in analyticsData) {
                jmax = analyticsData[player].items.length;
                for (j = 0; j < jmax; j++) {
                    thisVideo = analyticsData[player].items[j];
                    imax = thisVideo.items.length;
                    thisVideo.totalPlays = 0;
                    thisVideo.totalSecondsViewed = 0;
                    thisVideo.totalCompletedViews = 0;
                    thisVideo.chartData = [];
                    for (i = 0; i < imax; i++) {
                        item = thisVideo.items[i];
                        // bclslog('item.date', item.date);
                        if (isDefined(item.date)) {
                            date = new Date(item.date);
                            bclslog('month', date.getMonth());
                            item.date = dateToISO(date);
                            thisVideo.totalPlays += item.video_view;
                            thisVideo.totalSecondsViewed += item.totalSecondsViewed;
                            thisVideo.chartData.push([getMonthName(date.getMonth()) + " " + date.getDate(), item.video_view]);
                        } else {
                            bclslog('item with no date', item);
                        }


                    }
                    thisVideo.totalAvgSecondsViewed = thisVideo.totalSecondsViewed / thisVideo.totalPlays;
                    if (thisVideo.totalPlays > 0) {
                        thisVideo.totalCompletedViews = thisVideo.totalCompletedViews / thisVideo.totalPlays;
                    }
                    bclslog('chartdata', thisVideo.chartData);
                }
            }
        }
        function makeAnalyticsCall(callURL) {
            var options = {}, newItem = {};
            options.client_id = (isDefined(client_id.value)) ? client_id.value : "0cabdedf-1588-4b1b-b34b-483bc5abef6f";
            options.client_secret = (isDefined(client_secret.value)) ? client_secret.value : "OceNhwbegXYiSIRnDw57j55GCD6pL5g86SGu5UoNWbQmj63Jns72CNaJFpYtAxlw7p5as-g9G8nJnDnFgigPgg";
            options.url = callURL;
            options.requestMethod = "GET";
            options.requestData = null;

            $.ajax({
            url: proxyURL,
            type: "POST",
            data: options,
            success : function (data) {
                var template, results, i, j, k, player, video, itemsmax, analytics, item, newItem = {}, thisVideo;
                try {
                    var data = JSON.parse(data);
                } catch (e) {
                    alert('invalid json');
                }
                switch (callType) {
                    case "players":
                        callNumber++;
                        // save the data for getting the analytics
                        playerData = data;
                        // bclslog("player data", data);
                        playerMax = playerData.items.length;
                        // add players to the analytics data object
                        for (i = 0; i < playerData.items.length; i++) {
                            playerData.items[i].player = (isDefined(playerData.items[i].player)) ? playerData.items[i].player : "noPlayerId";
                            if (playerData.items[i].player !== "noPlayerId") {
                                playersArray.push(playerData.items[i].player);
                            }
                            playerData.items[i].player_name = (isDefined(playerData.items[i].player_name)) ? playerData.items[i].player_name : "noPlayerName";
                            if (isDefined(playerData.items[i].player)) {
                                analyticsData[playerData.items[i].player] = {};
                                analyticsData[playerData.items[i].player].player_name = playerData.items[i].player_name;
                            analyticsData[playerData.items[i].player].items = [];
                            }
                        }
                        // populate the player selector
                        template = Handlebars.compile(playerSelectTemplate);
                        playerSelector.innerHTML = template(data);
                        playerSelector.options[0].setAttribute("selected", "selected");
                        getVideoData();
                        break;
                    case "videos":
                        callNumber++;
                        // save the data for getting the analytics
                        videoData = data;
                        videoMax = videoData.items.length;
                        // add videos to the analytics data object
                        for (player in analyticsData) {
                            for (j = 0; j < videoMax; j++) {
                                video = videoData.items[j];
                                analyticsData[player].items[j] = {};
                                analyticsData[player].items[j].id = video.video;
                                analyticsData[player].items[j].video_name = (isDefined(video.video_name)) ? video.video_name : "name undefined";
                                analyticsData[player].items[j].items = [];
                            }
                        }
                        // populate the video selector
                        template = Handlebars.compile(videoSelectTemplate);
                        videoSelector.innerHTML = template(data);
                        videoSelector.options[0].setAttribute("selected", "selected");
                        getAnalyticsData();
                        break;
                    case "analytics":
                        callNumber++;
                        itemsmax = data.items.length;
                        // bclslog('data',data);
                        videoMax = analyticsData[currentPlayer].items.length;
                        for (k = 0; k < videoMax; k++) {
                            thisVideo = analyticsData[currentPlayer].items[k];
                            newItem = {};
                            newItem.video_view = 0;
                            newItem.avgSecondsViewed = 0;
                            newItem.totalSecondsViewed = 0;
                            newItem.date = currentDay.from;
                            for (i = 0; i < itemsmax; i++) {
                                if (data.items[i].video === thisVideo.id) {
                                    item = data.items[i];
                                    newItem.video_view = item.video_view;
                                    newItem.avgSecondsViewed = item.video_seconds_viewed / item.video_view;
                                    newItem.totalSecondsViewed = item.video_seconds_viewed;
                                }
                            }
                            analyticsData[currentPlayer].items[k].items.push(newItem);
                        }
                        if (currentDayIndex < dayMax - 1) {
                            currentDayIndex++;
                            getAnalyticsData();
                        } else if (currentPlayerIndex < playerMax - 1) {
                            currentDayIndex = 0;
                            currentVideoIndex = 0;
                            currentPlayerIndex++;
                            getAnalyticsData();
                        } else {
                            gettingDataDisplay.innerHTML = "Data retrieved - " + callNumber + " API calls made";
                            bclslog("analyticsData", analyticsData);
                            getTotals();
                        }
                }
            },
            error : function (XMLHttpRequest, textStatus, errorThrown)
                {
                    gettingDataDisplay.innerHTML = "Sorry, your request was not successful. Here's what the server sent back: " + errorThrown;
                }
            });
        }
        // get the analytics data for the videos
        function getAnalyticsData() {
            var callURL,
            account_id = (isDefined(accountID.value)) ? accountID.value : "1752604059001";
            gettingDataDisplay.innerHTML = "Getting analytics data - please wait...";
            callType = "analytics";
            currentPlayer = playerData.items[currentPlayerIndex].player;
            // currentVideo = videoData.items[currentVideoIndex].video;
            currentDay = daysArray[currentDayIndex];
            callURL = "https://analytics.api.brightcove.com/v1/data?accounts=" + account_id + "&dimensions=video&from=" + currentDay.from + "&to=" + currentDay.to + "&where=player==" + currentPlayer + "&fields=video_view,video_seconds_viewed,video";
            makeAnalyticsCall(callURL);

        }
        // get the video analytics data
        function getVideoData() {
            var callURL = "";
            account_id = (isDefined(accountID.value)) ? accountID.value : "1752604059001",
            gettingDataDisplay.innerHTML = "Getting video data...";
            callType = "videos";
            callURL = "https://analytics.api.brightcove.com/v1/data?accounts=" + account_id + "&dimensions=video&limit=10&fields=video,video_name&sort=-video_view&from=" + dateFromMS + "&to=" + dateToMS;
            makeAnalyticsCall(callURL);
        }
        // get all players for the selected time period
        function getPlayersData() {
            var callURL = "";
            account_id = (isDefined(accountID.value)) ? accountID.value : "1752604059001",
            gettingDataDisplay.innerHTML = "Getting player data...";
            callType = "players";
            callURL = "https://analytics.api.brightcove.com/v1/data?accounts=" + account_id + "&dimensions=player&limit=5&fields=player,player_name&sort=-video_view&from=" + dateFromMS + "&to=" + dateToMS;
            makeAnalyticsCall(callURL);
        }
    // add date pickers to the date input fields
    datepickr(fromDate, {
        'dateFormat': 'm-d-Y'
    });
    datepickr(toDate, {
        'dateFormat': 'm-d-Y'
    });
    // return ISO 8601 date string (YYYY-MM-DD) for JS date
    function dateToISO(date) {
        var y = date.getFullYear(),
            m = date.getMonth(),
            d = date.getDate(),
            isoDate;
        y = y.toString();
        m = m + 1;
        if (m < 10) {
            m = "0" + m.toString();
        } else {
            m = m.toString();
        }
        if (d < 10) {
            d = "0" + d.toString();
        } else {
            d = d.toString();
        }
        isoDate = y + "-" + m + "-" + d;
        return isoDate;
    }
    // default date range values
    toDate.value = dateToISO(today);
    fromDate.value = dateToISO(monthAgo);

    getData.addEventListener("click", function () {
        var totalDays, i;
        dateFromMS = new Date(fromDate.value).valueOf();
        dateToMS = new Date(toDate.value).valueOf();
        /**
        * what follows is just math
        * to create to and from params for API calls
        * 86400000 = 1 day in milliseconds
        */
        totalDays = Math.round((dateToMS - dateFromMS)/86400000);
        for (i = 0; i < (totalDays - 1); i++) {
            daysArray[i] = {from : dateFromMS + (i * 86400000), to : dateFromMS + ((i + 1) * 86400000) - 1};
        }
        dayMax = daysArray.length;
        getPlayersData();
    });
    videoSelector.addEventListener("change", displayData);
    playerSelector.addEventListener("change", displayData);
    useMyAccount.addEventListener("click", function () {
        if (basicInfo.className === "height-zero") {
            basicInfo.className = "height-auto";
            useMyAccount.innerHTML = "Use Sample Account";
        } else {
            basicInfo.className = "height-zero";
            useMyAccount.innerHTML = "Use My Account Instead";
        }
    });
    return {
    }
})(window, document, datepickr);