cinera: Player page mobile style
This commit is contained in:
Matt Mascarenhas
parent
35b6b803e3
commit
9051caa94e
|
|
@ -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 */
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue