From b8013133b9ded98fab1a6848aa0c53c98a7f972f Mon Sep 17 00:00:00 2001 From: Matt Mascarenhas Date: Wed, 17 Jan 2018 20:15:00 +0000 Subject: [PATCH] cinera: Fix theatre and add GUI clickable for it --- cinera/cinera.c | 12 +++++- cinera/cinera.css | 19 +++++++-- cinera/cinera_player_post.js | 54 ++++++++++++++++++++---- cinera/cinera_player_pre.js | 63 +++++++++++++++++++++------- cinera/examples/template_player.html | 2 +- 5 files changed, 123 insertions(+), 27 deletions(-) diff --git a/cinera/cinera.c b/cinera/cinera.c index 317311c..dd64cb7 100644 --- a/cinera/cinera.c +++ b/cinera/cinera.c @@ -14,7 +14,7 @@ typedef struct version CINERA_APP_VERSION = { .Major = 0, .Minor = 5, - .Patch = 26 + .Patch = 27 }; // TODO(matt): Copy in the DB 3 stuff from cinera_working.c @@ -3253,6 +3253,14 @@ AppendedIdentifier: } + CopyStringToBuffer(&CollationBuffers->Menus, + "
\n" + "
🎭
\n" + "
\n" + "
🏟
\n" + "
\n" + "
\n"); + if(HasCreditsMenu) { CopyBuffer(&CollationBuffers->Menus, &CreditsMenu); @@ -3794,7 +3802,7 @@ BuffersToHTML(buffers *CollationBuffers, template *Template, char *OutputPath, i " "); if(PageType == PAGE_PLAYER) { - CopyStringToBuffer(&Master, "
\n" + CopyStringToBuffer(&Master, "
\n" " "); CopyBuffer(&Master, &CollationBuffers->Menus); CopyStringToBuffer(&Master, "\n" diff --git a/cinera/cinera.css b/cinera/cinera.css index f655cd6..f606ea7 100644 --- a/cinera/cinera.css +++ b/cinera/cinera.css @@ -98,8 +98,10 @@ text-decoration: none; } -.cineraMenus > *, +.cineraMenus > *:not(.views), .cineraMenus > .menu > .refs .ref, +.cineraMenus > .menu > .view, +.cineraMenus > .menu > .views_container .view, .cineraMenus > .menu > .credits_container .credit .person { padding: 10px; } @@ -109,9 +111,14 @@ } .cineraMenus > #focus-warn { + background-color: rgba(0, 0, 0, 0.8); + border-radius: 16px; color: #F00; flex: 1; - margin: auto; + margin: 0 auto 0 50%; + display: none; + z-index: 16; + position: absolute; } .cineraMenus > .menu { @@ -188,7 +195,7 @@ } .cineraMenus > .help { - cursor: default; + cursor: pointer; border: 1px solid; border-radius: 4px; height: 6px; @@ -226,6 +233,7 @@ .cineraMenus > .menu .refs, .cineraMenus > .menu .filter_container, +.cineraMenus > .menu .views_container, .cineraMenus > .menu .credits_container{ border: 1px solid; border-top: none; @@ -265,6 +273,11 @@ flex-direction: column; } +.cineraMenus > .menu > .view, +.cineraMenus > .menu > .views_container .view { + cursor: pointer; +} + .cineraMenus > .menu > .credits_container .credit { cursor: default; } diff --git a/cinera/cinera_player_post.js b/cinera/cinera_player_post.js index b00c28b..20863b7 100644 --- a/cinera/cinera_player_post.js +++ b/cinera/cinera_player_post.js @@ -95,6 +95,53 @@ if(filterMenu) } } +var views = { + REGULAR: 1, + THEATRE: 2, + SUPERTHEATRE: 3, +}; +var cineraProps = { + C: null, + V: views.REGULAR, + Z: null, + X: null, + Y: null, + W: null, + H: null, + P: null +}; + +var viewsMenu = titleBar.querySelector(".views"); +if(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; + } + }); + } +} + var creditsMenu = titleBar.querySelector(".credits_container"); if(creditsMenu) { @@ -145,13 +192,6 @@ var focusedIdentifier = null; var playerContainer = document.querySelector(".cineraPlayerContainer") var cinera = playerContainer.parentNode; -var views = { - REGULAR: 1, - THEATRE: 2, - SUPERTHEATRE: 3, -}; -var cineraView = views.REGULAR; -initTheatre(); var player = new Player(playerContainer, onRefChanged); window.addEventListener("resize", function() { player.updateSize(); }); diff --git a/cinera/cinera_player_pre.js b/cinera/cinera_player_pre.js index d1107da..3bf0c25 100644 --- a/cinera/cinera_player_pre.js +++ b/cinera/cinera_player_pre.js @@ -412,13 +412,20 @@ function toggleMenuVisibility(element) { } } -function initTheatre() +function handleMouseOverViewsMenu() { - cinera.style.zIndex=64; - cinera.style.left=0; - cinera.style.top=0; - cinera.style.width="100%"; - cinera.style.height="100%"; + switch(cineraProps.V) + { + case views.REGULAR: + case views.THEATRE: + { + viewsContainer.style.display = "block"; + } break; + case views.SUPERTHEATRE: + { + viewsContainer.style.display = "none"; + } break; + } } function enterFullScreen_() @@ -449,27 +456,55 @@ function leaveFullScreen_() } function toggleTheatreMode() { - switch(cineraView) + switch(cineraProps.V) { case views.REGULAR: { - cinera.style.position="fixed"; - } cineraView = views.THEATRE; break; + cineraProps.C = cinera.style.backgroundColor; + cineraProps.Z = cinera.style.zIndex; + cineraProps.X = cinera.style.left; + cineraProps.Y = cinera.style.top; + cineraProps.W = cinera.style.width; + cineraProps.H = cinera.style.height; + cineraProps.P = cinera.style.position; + + cinera.style.backgroundColor = "#000"; + cinera.style.zIndex = 64; + cinera.style.left = 0; + cinera.style.top = 0; + cinera.style.width = "100%"; + cinera.style.height = "100%"; + cinera.style.position = "fixed"; + + viewItems[0].setAttribute("data-id", "regular"); + viewItems[0].setAttribute("title", "Regular mode"); + viewItems[0].firstChild.nodeValue = "📺"; + } cineraProps.V = views.THEATRE; break; case views.SUPERTHEATRE: { leaveFullScreen_(); } case views.THEATRE: { - cinera.style.position="static"; - } cineraView = views.REGULAR; break; + cinera.style.backgroundColor = cineraProps.C; + cinera.style.zIndex = cineraProps.Z; + cinera.style.left = cineraProps.X; + cinera.style.top = cineraProps.Y; + cinera.style.width = cineraProps.W; + cinera.style.height = cineraProps.H; + cinera.style.position = cineraProps.P; + + viewItems[0].setAttribute("data-id", "theatre"); + viewItems[0].setAttribute("title", "Theatre mode"); + viewItems[0].firstChild.nodeValue = "🎭"; + } cineraProps.V = views.REGULAR; break; } player.updateSize(); } function toggleSuperTheatreMode() { - switch(cineraView) + switch(cineraProps.V) { case views.REGULAR: { @@ -478,12 +513,12 @@ function toggleSuperTheatreMode() case views.THEATRE: { enterFullScreen_(); - } cineraView = views.SUPERTHEATRE; break; + } cineraProps.V = views.SUPERTHEATRE; break; case views.SUPERTHEATRE: { leaveFullScreen_(); toggleTheatreMode(); - } cineraView = views.REGULAR; break; + } cineraProps.V = views.REGULAR; break; } player.updateSize(); } diff --git a/cinera/examples/template_player.html b/cinera/examples/template_player.html index a4b3e8f..7741d56 100644 --- a/cinera/examples/template_player.html +++ b/cinera/examples/template_player.html @@ -8,7 +8,7 @@ Awesome Contents

-
+