Annotation-System/cinera/cinera_player_post.js

var menuState = [];
var titleBar = document.querySelector(".cineraMenus");
var quotesMenu = titleBar.querySelector(".quotes_container");
if(quotesMenu)
{
    menuState.push(quotesMenu);
    var quoteItems = quotesMenu.querySelectorAll(".ref");
    if(quoteItems)
    {
        for(var i = 0; i < quoteItems.length; ++i)
        {
            quoteItems[i].addEventListener("mouseenter", function(ev) {
                mouseOverQuotes(this);
            })
        };
    }
    var quoteTimecodes = quotesMenu.querySelectorAll(".refs .ref .ref_indices .timecode");
    for (var i = 0; i < quoteTimecodes.length; ++i) {
        quoteTimecodes[i].addEventListener("click", function(ev) {
            if (player) {
                var time = ev.currentTarget.getAttribute("data-timestamp");
                mouseSkipToTimecode(player, time, ev);
            }
        });
    }
    var lastFocusedQuote = null;
}

var referencesMenu = titleBar.querySelector(".references_container");
if(referencesMenu)
{
    menuState.push(referencesMenu);
    var referenceItems = referencesMenu.querySelectorAll(".ref");
    if(referenceItems)
    {
        for(var i = 0; i < referenceItems.length; ++i)
        {
            referenceItems[i].addEventListener("mouseenter", function(ev) {
                mouseOverReferences(this);
            })
        };
        var lastFocusedReference = null;
        var lastFocusedIdentifier = null;
    }

    var refTimecodes = referencesMenu.querySelectorAll(".refs .ref .ref_indices .timecode");
    for (var i = 0; i < refTimecodes.length; ++i) {
        refTimecodes[i].addEventListener("click", function(ev) {
            if (player) {
                var time = ev.currentTarget.getAttribute("data-timestamp");
                mouseSkipToTimecode(player, time, ev);
            }
        });
    }
}

if(referencesMenu || quotesMenu)
{
    var refSources = titleBar.querySelectorAll(".refs .ref"); // This is for both quotes and refs
    for (var i = 0; i < refSources.length; ++i) {
        refSources[i].addEventListener("click", function(ev) {
            if (player) {
                player.pause();
            }
        });
    }
}

var filterMenu = titleBar.querySelector(".filter_container");
if(filterMenu)
{
    menuState.push(filterMenu);
    var lastFocusedCategory = null;
    var lastFocusedTopic = null;
    var lastFocusedMedium = null;

    var filter = filterMenu.parentNode;

    var filterModeElement = filter.querySelector(".filter_mode");
    filterModeElement.addEventListener("click", function(ev) {
        toggleFilterMode();
    });

    var filterMode = filterModeElement.classList[1];
    var filterItems = filter.querySelectorAll(".filter_content");

    var filterInitState = new Object();
    var filterState = new Object();
    for(var i = 0; i < filterItems.length; ++i)
    {
        filterItems[i].addEventListener("mouseenter", function(ev) {
            navigateFilter(this);
        })

        filterItems[i].addEventListener("click", function(ev) {
            filterItemToggle(this);
        });

        var filterItemName = filterItems[i].classList.item(1);
        if(filterItems[i].parentNode.classList.contains("filter_topics"))
        {
            filterInitState[filterItemName] = { "type" : "topic", "off": (filterItems[i].classList.item(2) == "off") };
            filterState[filterItemName] = { "type" : "topic", "off": (filterItems[i].classList.item(2) == "off") };
        }
        else
        {
            filterInitState[filterItemName] = { "type" : "medium", "off": (filterItems[i].classList.item(2) == "off") };
            filterState[filterItemName] = { "type" : "medium", "off": (filterItems[i].classList.item(2) == "off") };
        }
    }
}

var views = {
    REGULAR: 1,
    THEATRE: 2,
    SUPERTHEATRE: 3,
};
var cineraProps = {
    C: null,
    V: views.REGULAR,
    Z: null,
    X: null,
    Y: null,
    W: null,
    mW: null,
    H: null,
    mH: null,
    P: null
};

var viewsMenu = titleBar.querySelector(".views");
if(viewsMenu)
{
    var viewsContainer = viewsMenu.querySelector(".views_container");
    viewsMenu.addEventListener("mouseenter", function(ev) {
        handleMouseOverViewsMenu();
    });
    viewsMenu.addEventListener("mouseleave", function(ev) {
        viewsContainer.style.display = "none";
    });

    var viewItems = viewsMenu.querySelectorAll(".view");
    for(var i = 0; i < viewItems.length; ++i)
    {
        viewItems[i].addEventListener("click", function(ev) {
            switch(this.getAttribute("data-id"))
            {
                case "regular":
                case "theatre":
                    {
                        toggleTheatreMode();
                    } break;
                case "super":
                    {
                        toggleSuperTheatreMode();
                    } break;
            }
        });
    }
}

var creditsMenu = titleBar.querySelector(".credits_container");
if(creditsMenu)
{
    menuState.push(creditsMenu);
    var lastFocusedCreditItem = null;

    var creditItems = creditsMenu.querySelectorAll(".person, .support");
    for(var i = 0; i < creditItems.length; ++i)
    {
        creditItems[i].addEventListener("mouseenter", function(ev) {
            if(this != lastFocusedCreditItem)
            {
                lastFocusedCreditItem.classList.remove("focused");
                if(lastFocusedCreditItem.classList.contains("support"))
                {
                    setIconLightness(lastFocusedCreditItem.firstChild);
                }
                lastFocusedCreditItem = this;
                focusedElement = lastFocusedCreditItem;
                focusedElement.classList.add("focused");
                if(focusedElement.classList.contains("support"))
                {
                    setIconLightness(focusedElement.firstChild);
                }
            }
        })
    }

    var supportIcons = creditsMenu.querySelectorAll(".support_icon");
    {
        for(var i = 0; i < supportIcons.length; ++i)
        {
            supportIcons[i].style.backgroundImage = "url(\"" + supportIcons[i].getAttribute("data-sprite") + "\")";
            setIconLightness(supportIcons[i]);
        }
    }

}
var sourceMenus = titleBar.querySelectorAll(".menu");

var helpButton = titleBar.querySelector(".help");
window.addEventListener("blur", function(){
    helpButton.firstElementChild.innerText = "¿";
    helpButton.firstElementChild.title = "Keypresses will not pass through to Cinera because focus is currently elsewhere.\n\nTo regain focus, please press Tab / Shift-Tab (multiple times) or click somewhere related to Cinera other than the video, e.g. this button";
});

window.addEventListener("focus", function(){
    helpButton.firstElementChild.innerText = "?";
    helpButton.firstElementChild.title = ""
});

var helpDocumentation = helpButton.querySelector(".help_container");
helpButton.addEventListener("click", function(ev) {
    handleMouseOverMenu(this, ev.type);
})

var focusedElement = null;
var focusedIdentifier = null;

var playerContainer = document.querySelector(".cineraPlayerContainer")
var cinera = playerContainer.parentNode;

var player = new Player(playerContainer, onRefChanged);

var cineraViewStorageItem = "cineraView";
if(viewsMenu && localStorage.getItem(cineraViewStorageItem))
{
    toggleTheatreMode();
}

window.addEventListener("resize", function() { player.updateSize(); });
document.addEventListener("keydown", function(ev) {
    var key = ev.key;
    if(ev.getModifierState("Shift") && key == " ")
    {
        key = "capitalSpace";
    }

    if(handleKey(key) == true && focusedElement)
    {
        ev.preventDefault();
    }
});

for(var i = 0; i < sourceMenus.length; ++i)
{
    sourceMenus[i].addEventListener("mouseenter", function(ev) {
        handleMouseOverMenu(this, ev.type);
    })
    sourceMenus[i].addEventListener("mouseleave", function(ev) {
        handleMouseOverMenu(this, ev.type);
    })
};

var prevEpisode = playerContainer.querySelector(".episodeMarker.prev");
var nextEpisode = playerContainer.querySelector(".episodeMarker.next");
var testMarkers = playerContainer.querySelectorAll(".marker");

var colouredItems = playerContainer.querySelectorAll(".author, .member, .project");
for(i = 0; i < colouredItems.length; ++i)
{
    setTextLightness(colouredItems[i]);
}

var topicDots = document.querySelectorAll(".category");
for(var i = 0; i < topicDots.length; ++i)
{
    setDotLightness(topicDots[i]);
}

var lastAnnotationStorageItem = "cineraTimecode_" + window.location.pathname;
var lastAnnotation;
if(location.hash) {
    player.setTime(location.hash.startsWith('#') ? location.hash.substr(1) : location.hash);
}
else if(lastAnnotation = localStorage.getItem(lastAnnotationStorageItem))
{
    player.setTime(lastAnnotation);
}