From 9051caa94e67b337243c957617c37a59b8a8481f Mon Sep 17 00:00:00 2001 From: Matt Mascarenhas Date: Thu, 7 Mar 2019 20:16:27 +0000 Subject: [PATCH] cinera: Player page mobile style --- cinera/cinera.c | 2 +- cinera/cinera.css | 94 ++++++++++++++++++++++++- cinera/cinera_player_post.js | 36 +++++++--- cinera/cinera_player_pre.js | 128 ++++++++++++++++++++++++++++++++++- 4 files changed, 249 insertions(+), 11 deletions(-) diff --git a/cinera/cinera.c b/cinera/cinera.c index 6483043..dba3f9f 100644 --- a/cinera/cinera.c +++ b/cinera/cinera.c @@ -17,7 +17,7 @@ typedef struct version CINERA_APP_VERSION = { .Major = 0, .Minor = 6, - .Patch = 7 + .Patch = 8 }; #include // NOTE(matt): varargs diff --git a/cinera/cinera.css b/cinera/cinera.css index 6b24488..0ff86b8 100644 --- a/cinera/cinera.css +++ b/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 */ /* diff --git a/cinera/cinera_player_post.js b/cinera/cinera_player_post.js index dcf3d53..63b33f2 100644 --- a/cinera/cinera_player_post.js +++ b/cinera/cinera_player_post.js @@ -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) { diff --git a/cinera/cinera_player_pre.js b/cinera/cinera_player_pre.js index ebc4414..f6eb523 100644 --- a/cinera/cinera_player_pre.js +++ b/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;