Annotation-System/cinera/cinera_player_post.js

var cinera = document.querySelector(".cinera");
var baseURL = location.hash ? (location.toString().substr(0, location.toString().length - location.hash.length)) : location;

var originalTextContent = {
    TitleQuotes: null,
    TitleReferences: null,
    TitleCredits: null,
    EpisodePrev: null,
    EpisodeNext: null,
};

var menuState = [];
var titleBar = cinera.querySelector(".cineraMenus");
var quotesMenu = null;
var referencesMenu = null;
var filterMenu = null;
var viewsMenu = null;
var linkMenu = null;
var creditsMenu = null;
var sourceMenus = null;
var helpButton = null;
var helpDocumentation = null;

// NOTE(matt):  One set of markers per page. There is code to support multiple, which we may want to extend everywhere
var MarkersContainer = cinera.querySelector(".markers_container");

var views = {
    REGULAR: 0,
    THEATRE: 1,
    SUPERTHEATRE: 2,
};

var devices = {
    DESKTOP: 0,
    MOBILE: 1,
};

var CineraProps = {
    C: null,
    V: views.REGULAR,
    Z: null,
    X: null,
    Y: null,
    W: null,
    mW: null,
    H: null,
    mH: null,
    P: null,
    Display: null,
    FlexDirection: null,
    JustifyContent: null,
    O: null,
    IsMobile: IsMobile(),
    ScrollX: null,
    ScrollY: null,
};
CineraProps.O = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile);

if(titleBar)
{
    quotesMenu = titleBar.querySelector(".quotes_container");
    if(quotesMenu)
    {
        originalTextContent.TitleQuotes = quotesMenu.previousElementSibling.textContent;
        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;
    }

    referencesMenu = titleBar.querySelector(".references_container");
    if(referencesMenu)
    {
        originalTextContent.TitleReferences = referencesMenu.previousElementSibling.textContent;
        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();
                }
            });
        }
    }

    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) {
            ev.stopPropagation();
            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) {
                ev.stopPropagation();
                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") };
            }
        }
    }

    viewsMenu = titleBar.querySelector(".views");
    if(viewsMenu && !CineraProps.IsMobile)
    {
        menuState.push(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;
                }
            });
        }
    }

    linkMenu = titleBar.querySelector(".link_container");
    linkAnnotation = true;
    if(linkMenu)
    {
        menuState.push(linkMenu);

        var linkMode = linkMenu.querySelector("#cineraLinkMode");
        var link = linkMenu.querySelector("#cineraLink");

        linkMode.addEventListener("click", function(ev) {
            ev.stopPropagation();
            toggleLinkMode(linkMode, link);
        });

        link.addEventListener("click", function(ev) {
            CopyToClipboard(link);
            toggleMenuVisibility(linkMenu);
        });
    }

    creditsMenu = titleBar.querySelector(".credits_container");
    if(creditsMenu)
    {
        originalTextContent.TitleCredits = creditsMenu.previousElementSibling.textContent;
        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");
                    unfocusSprite(lastFocusedCreditItem);
                    if(lastFocusedCreditItem.classList.contains("support"))
                    {
                        setSpriteLightness(lastFocusedCreditItem.firstChild);
                    }
                    lastFocusedCreditItem = this;
                    focusedElement = lastFocusedCreditItem;
                    focusedElement.classList.add("focused");
                    focusSprite(focusedElement);
                    if(focusedElement.classList.contains("support"))
                    {
                        setSpriteLightness(focusedElement.firstChild);
                    }
                }
            })
        }
    }

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

    helpButton = titleBar.querySelector(".cineraHelp");
    helpDocumentation = helpButton.querySelector(".help_container");
    BindHelp(helpButton, helpDocumentation);
}

var focusedElement = null;
var focusedIdentifier = null;

var playerContainer = cinera.querySelector(".cineraPlayerContainer")
var prevEpisode = playerContainer.querySelector(".episodeMarker.prev");
if(prevEpisode) { originalTextContent.EpisodePrev = prevEpisode.firstChild.textContent; }
var nextEpisode = playerContainer.querySelector(".episodeMarker.next");
if(nextEpisode) { originalTextContent.EpisodeNext = nextEpisode.firstChild.textContent; }
var testMarkers = playerContainer.querySelectorAll(".marker");

// NOTE(matt):  All the originalTextContent values must be set by this point, because the player's construction may need them
var MobileCineraContentRuleSelector = ".cinera.mobile .cineraPlayerContainer .markers_container > .markers .marker .cineraContent";
var MobileCineraContentRule = GetOrSetRule(MobileCineraContentRuleSelector);

var MenuContainerRuleSelector = ".cineraMenus > .menu .quotes_container, .cineraMenus > .menu .references_container, .cineraMenus > .menu .filter_container, .cineraMenus > .menu .views_container, .cineraMenus > .menu .link_container, .cineraMenus > .menu .credits_container";
var MenuContainerRule = GetOrSetRule(MenuContainerRuleSelector);

if(CineraProps.IsMobile)
{
    InitMobileStyle();
}
else
{
    var MenuMaxHeight = cinera.offsetHeight - titleBar.offsetHeight - 4;
    MenuContainerRule.style.maxHeight = MenuMaxHeight + "px";
}

var player = new Player(playerContainer, onRefChanged);

if(CineraProps.IsMobile)
{
    ConnectMobileControls(player);
}

var cineraViewStorageItem = "cineraView";

if(viewsMenu && localStorage.getItem(cineraViewStorageItem))
{
    toggleTheatreMode();
}

InitScrollEventListener(cinera);

function
DelayedUpdateSize()
{
    player.updateSize();
}

window.addEventListener("resize", function() {
    if(CineraProps.IsMobile)
    {
        setTimeout(DelayedUpdateSize, 512);
    }
    else
    {
        player.updateSize();
    }
});

window.onorientationchange = function() {
    if(CineraProps.IsMobile)
    {
        setTimeout(DelayedUpdateSize, 512);
    }
    else
    {
        player.updateSize();
    }
};

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

    if(!ev.getModifierState("Control") && handleKey(key) == true && focusedElement)
    {
        ev.preventDefault();
    }
});

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

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

var topicDots = cinera.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);
}