cinera: Player page mobile style

cinera/cinera.c

@@ -17,7 +17,7 @@ typedef struct
 version CINERA_APP_VERSION = {
     .Major = 0,
     .Minor = 6,
-    .Patch = 7
+    .Patch = 8
 };
 
 #include <stdarg.h> // NOTE(matt): varargs

cinera/cinera.css

@@ -116,7 +116,7 @@
     display: none;
 }
 
-@media (max-width: 512px), (max-height: 512px)
+@media (max-width: 720px), (max-height: 512px)
 {
     #cineraIndexControl {
         margin: 4px auto;
@@ -172,6 +172,7 @@
 
 .cineraMenus > .menu {
     position: relative;
+    align-self: center;
 }
 
 .cineraMenus > .menu.filter.responsible,
@@ -652,6 +653,97 @@
     margin-right: 8px;
 }
 
+@media (max-width: 720px), (max-height: 512px)
+{
+    .cineraMenus .episode_name,
+    .cineraMenus > .menu > .view,
+    .cineraMenus > .menu > .views_container .view,
+    .cineraMenus > .help,
+    .markers_container > .episodeMarker div:nth-child(2),
+    .markers_container > .episodeMarker div:nth-child(3),
+    .markers_container > .markers .marker:not(.current) {
+        display: none;
+    }
+
+    .cineraMenus {
+        justify-content: center;
+    }
+
+    .cineraMenus .menu .quotes_container,
+    .cineraMenus .menu .references_container,
+    .cineraMenus .menu .filter_container,
+    .cineraMenus .menu .link_container,
+    .cineraMenus .menu .credits_container {
+        position: fixed;
+        left: 0;
+        margin: auto;
+        max-height: 80%;
+        max-width: 97%;
+    }
+
+
+    .cineraPlayerContainer {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .cineraPlayerContainer .markers_container {
+        display: flex;
+        flex-flow: row;
+        overflow-y: auto;
+    }
+
+    .cineraPlayerContainer .markers_container > .episodeMarker {
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+    }
+
+    .cineraPlayerContainer .markers_container > .markers .marker .cineraContent {
+        width: 456px;
+    }
+
+    @media (max-width: 580px)
+    {
+        .cineraPlayerContainer .markers_container > .markers .marker .cineraContent {
+            width: 320px;
+        }
+
+    }
+    @media (max-width: 450px)
+    {
+        .cineraPlayerContainer .markers_container > .markers .marker .cineraContent {
+            width: 256px;
+        }
+
+    }
+    @media (max-width: 375px)
+    {
+        .cineraPlayerContainer .markers_container > .markers .marker .cineraContent {
+            width: 180px;
+        }
+
+    }
+
+    .cineraPlayerContainer .markers_container > .episodeMarker.first,
+    .cineraPlayerContainer .markers_container > .episodeMarker.prev,
+    .cineraPlayerContainer .markers_container > .markers .marker,
+    .cineraPlayerContainer .markers_container > .episodeMarker.last,
+    .cineraPlayerContainer .markers_container > .episodeMarker.next {
+        border: 0;
+    }
+
+    .cineraPlayerContainer .markers_container > .episodeMarker.first,
+    .cineraPlayerContainer .markers_container > .episodeMarker.prev {
+        border-right: 3px double;
+    }
+
+    .cineraPlayerContainer .markers_container > .episodeMarker.last,
+    .cineraPlayerContainer .markers_container > .episodeMarker.next {
+        border-left: 3px double;
+    }
+}
+
 /* CUSTOM PAGE STYLE */
 
 /*

cinera/cinera_player_post.js

+var originalTextContent = {
+    TitleQuotes: null,
+    TitleReferences: null,
+    TitleCredits: null,
+    EpisodePrev: null,
+    EpisodeNext: null,
+};
+
 var menuState = [];
 var titleBar = document.querySelector(".cineraMenus");
 var quotesMenu = titleBar.querySelector(".quotes_container");
 if(quotesMenu)
 {
+    originalTextContent.TitleQuotes = quotesMenu.previousElementSibling.textContent;
     menuState.push(quotesMenu);
     var quoteItems = quotesMenu.querySelectorAll(".ref");
     if(quoteItems)
@@ -29,6 +38,7 @@ if(quotesMenu)
 var referencesMenu = titleBar.querySelector(".references_container");
 if(referencesMenu)
 {
+    originalTextContent.TitleReferences = referencesMenu.previousElementSibling.textContent;
     menuState.push(referencesMenu);
     var referenceItems = referencesMenu.querySelectorAll(".ref");
     if(referenceItems)
@@ -111,10 +121,16 @@ if(filterMenu)
 }
 
 var views = {
-    REGULAR: 1,
-    THEATRE: 2,
-    SUPERTHEATRE: 3,
+    REGULAR: 0,
+    THEATRE: 1,
+    SUPERTHEATRE: 2,
+};
+
+var devices = {
+    DESKTOP: 0,
+    MOBILE: 1,
 };
+
 var cineraProps = {
     C: null,
     V: views.REGULAR,
@@ -125,7 +141,8 @@ var cineraProps = {
     mW: null,
     H: null,
     mH: null,
-    P: null
+    P: null,
+    D: devices.DESKTOP,
 };
 
 var viewsMenu = titleBar.querySelector(".views");
@@ -183,6 +200,7 @@ if(linkMenu)
 var creditsMenu = titleBar.querySelector(".credits_container");
 if(creditsMenu)
 {
+    originalTextContent.TitleCredits = creditsMenu.previousElementSibling.textContent;
     menuState.push(creditsMenu);
     var lastFocusedCreditItem = null;
 
@@ -240,8 +258,14 @@ var focusedElement = null;
 var focusedIdentifier = null;
 
 var playerContainer = document.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");
 var cinera = playerContainer.parentNode;
 
+// NOTE(matt):  All the originalTextContent values must be set by this point, because the player's construction may need them
 var player = new Player(playerContainer, onRefChanged);
 
 var cineraViewStorageItem = "cineraView";
@@ -274,10 +298,6 @@ for(var i = 0; i < sourceMenus.length; ++i)
     })
 };
 
-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)
 {

cinera/cinera_player_pre.js

@@ -110,11 +110,129 @@ Player.prototype.jumpToPrevMarker = function() {
     this.play();
 };
 
+function switchToMobileView(player)
+{
+    var menuContainerOffset = getElementYOffsetFromPage(titleBar) + parseInt(window.getComputedStyle(titleBar).height);
+    if(quotesMenu)
+    {
+        quotesMenu.previousElementSibling.textContent = '\u{1F5E9}';
+        quotesMenu.style.top = menuContainerOffset + "px";
+    }
+    if(referencesMenu)
+    {
+        referencesMenu.previousElementSibling.textContent = '\u{1F4D6}';
+        referencesMenu.style.top = menuContainerOffset + "px";
+    }
+
+    if(filterMenu) { filterMenu.style.top = menuContainerOffset + "px"; }
+    if(linkMenu) { linkMenu.style.top = menuContainerOffset + "px"; }
+
+    if(creditsMenu) {
+        creditsMenu.previousElementSibling.textContent = '\u{1F46A}';
+        creditsMenu.style.top = menuContainerOffset + "px";
+    }
+
+    var rightmost = {};
+    var markersContainer = player.markersContainer;
+    markersContainer.style.height = "auto";
+    var episodeMarkerPrev = markersContainer.querySelector(".episodeMarker.prev");
+    var episodeMarkerNext = markersContainer.querySelector(".episodeMarker.next");
+    var episodeMarkerLast = markersContainer.querySelector(".episodeMarker.last");
+
+    if(episodeMarkerPrev) { episodeMarkerPrev.firstChild.textContent = '\u{23EE}'; }
+    if(episodeMarkerNext) { episodeMarkerNext.firstChild.textContent = '\u{23ED}'; rightmost = episodeMarkerNext; }
+    else if (episodeMarkerLast) { rightmost = episodeMarkerLast; }
+
+    var markers = markersContainer.querySelector(".markers");
+
+    var controlPrevAnnotation = document.createElement("a");
+    controlPrevAnnotation.classList.add("episodeMarker");
+    controlPrevAnnotation.classList.add("prevAnnotation");
+    controlPrevAnnotation.addEventListener("click", function(ev) {
+        player.jumpToPrevMarker();
+    });
+    var controlPrevAnnotationContent = document.createElement("div");
+    controlPrevAnnotationContent.appendChild(document.createTextNode('\u{23F4}'));
+    controlPrevAnnotation.appendChild(controlPrevAnnotationContent);
+
+    markersContainer.insertBefore(controlPrevAnnotation, markers);
+
+    var controlNextAnnotation = document.createElement("a");
+    controlNextAnnotation.classList.add("episodeMarker");
+    controlNextAnnotation.classList.add("nextAnnotation");
+    controlNextAnnotation.addEventListener("click", function(ev) {
+        player.jumpToNextMarker();
+    });
+    var controlNextAnnotationContent = document.createElement("div");
+    controlNextAnnotationContent.appendChild(document.createTextNode('\u{23F5}'));
+    controlNextAnnotation.appendChild(controlNextAnnotationContent);
+
+    if(rightmost)
+    {
+        markersContainer.insertBefore(controlNextAnnotation, rightmost);
+    }
+    else
+    {
+        markersContainer.appendChild(controlNextAnnotation);
+    }
+
+    cineraProps.D = devices.MOBILE;
+}
+
+function switchToDesktopView(player)
+{
+    if(quotesMenu)
+    {
+        quotesMenu.previousElementSibling.textContent = originalTextContent.TitleQuotes;
+        quotesMenu.style.top = "100%";
+    }
+    if(referencesMenu)
+    {
+        referencesMenu.previousElementSibling.textContent = originalTextContent.TitleReferences;
+        referencesMenu.style.top = "100%";
+    }
+    if(filterMenu) { filterMenu.style.top = "100%"; }
+    if(linkMenu) { linkMenu.style.top = "100%"; }
+    if(creditsMenu)
+    {
+        creditsMenu.previousElementSibling.textContent = originalTextContent.TitleCredits;
+        creditsMenu.style.top = "100%";
+    }
+
+    var markersContainer = player.markersContainer;
+
+    var episodeMarkerPrev = markersContainer.querySelector(".episodeMarker.prev");
+    if(episodeMarkerPrev) { episodeMarkerPrev.firstChild.textContent = originalTextContent.EpisodePrev; }
+    var episodeMarkerNext = markersContainer.querySelector(".episodeMarker.next");
+    if(episodeMarkerNext) { episodeMarkerNext.firstChild.textContent = originalTextContent.EpisodeNext; }
+
+    var prevAnnotation = markersContainer.querySelector(".episodeMarker.prevAnnotation");
+    markersContainer.removeChild(prevAnnotation);
+    var nextAnnotation = markersContainer.querySelector(".episodeMarker.nextAnnotation");
+    markersContainer.removeChild(nextAnnotation);
+    cineraProps.D = devices.DESKTOP;
+}
+
 // Call this after changing the size of the video container in order to update the youtube player.
 Player.prototype.updateSize = function() {
     var width = this.videoContainer.offsetWidth;
     var height = width / 16 * 9;
-    this.markersContainer.style.height = height + "px";
+    if(window.innerHeight > 512 && window.innerWidth > 720)
+    {
+        if(cineraProps.D == devices.MOBILE)
+        {
+            switchToDesktopView(this);
+        }
+        this.markersContainer.style.height = height + "px"; // NOTE(matt): This was the original line here
+    }
+    else
+    {
+        if(cineraProps.D == devices.DESKTOP)
+        {
+            switchToMobileView(this);
+        }
+    }
+
     if (this.youtubePlayerReady) {
         this.youtubePlayer.setSize(Math.floor(width), Math.floor(height));
     }
@@ -178,6 +296,14 @@ function getElementXOffsetFromPage(el) {
     return left;
 }
 
+function getElementYOffsetFromPage(el) {
+    var top = 0;
+    do {
+        top += el.offsetTop;
+    } while (el = el.offsetParent);
+    return top;
+}
+
 Player.prototype.onMarkerMouseMove = function(marker, ev) {
     if (this.currentMarker == marker) {
         marker.hoverx = (ev.pageX - getElementXOffsetFromPage(marker.el)) / marker.el.offsetWidth;