Commit 9051caa9 by Matt Mascarenhas

cinera: Player page mobile style

parent 35b6b803
......@@ -17,7 +17,7 @@ typedef struct
version CINERA_APP_VERSION = {
.Major = 0,
.Minor = 6,
.Patch = 7
.Patch = 8
};
#include <stdarg.h> // NOTE(matt): varargs
......
......@@ -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 */
/*
......
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)
{
......
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment