cinera: Fix theatre and add GUI clickable for it

This commit is contained in:
Matt Mascarenhas 2018-01-17 20:15:00 +00:00
parent f270ee2afa
commit b8013133b9
5 changed files with 123 additions and 27 deletions

View File

@ -14,7 +14,7 @@ typedef struct
version CINERA_APP_VERSION = { version CINERA_APP_VERSION = {
.Major = 0, .Major = 0,
.Minor = 5, .Minor = 5,
.Patch = 26 .Patch = 27
}; };
// TODO(matt): Copy in the DB 3 stuff from cinera_working.c // TODO(matt): Copy in the DB 3 stuff from cinera_working.c
@ -3253,6 +3253,14 @@ AppendedIdentifier:
} }
CopyStringToBuffer(&CollationBuffers->Menus,
" <div class=\"menu views\">\n"
" <div class=\"view\" data-id=\"theatre\" title=\"Theatre mode\">&#127917;</div>\n"
" <div class=\"views_container\">\n"
" <div class=\"view\" data-id=\"super\" title=\"SUPERtheatre mode\">&#127967;</div>\n"
" </div>\n"
" </div>\n");
if(HasCreditsMenu) if(HasCreditsMenu)
{ {
CopyBuffer(&CollationBuffers->Menus, &CreditsMenu); CopyBuffer(&CollationBuffers->Menus, &CreditsMenu);
@ -3794,7 +3802,7 @@ BuffersToHTML(buffers *CollationBuffers, template *Template, char *OutputPath, i
" "); " ");
if(PageType == PAGE_PLAYER) if(PageType == PAGE_PLAYER)
{ {
CopyStringToBuffer(&Master, "<div id=\"cinera\">\n" CopyStringToBuffer(&Master, "<div>\n"
" "); " ");
CopyBuffer(&Master, &CollationBuffers->Menus); CopyBuffer(&Master, &CollationBuffers->Menus);
CopyStringToBuffer(&Master, "\n" CopyStringToBuffer(&Master, "\n"

View File

@ -98,8 +98,10 @@
text-decoration: none; text-decoration: none;
} }
.cineraMenus > *, .cineraMenus > *:not(.views),
.cineraMenus > .menu > .refs .ref, .cineraMenus > .menu > .refs .ref,
.cineraMenus > .menu > .view,
.cineraMenus > .menu > .views_container .view,
.cineraMenus > .menu > .credits_container .credit .person { .cineraMenus > .menu > .credits_container .credit .person {
padding: 10px; padding: 10px;
} }
@ -109,9 +111,14 @@
} }
.cineraMenus > #focus-warn { .cineraMenus > #focus-warn {
background-color: rgba(0, 0, 0, 0.8);
border-radius: 16px;
color: #F00; color: #F00;
flex: 1; flex: 1;
margin: auto; margin: 0 auto 0 50%;
display: none;
z-index: 16;
position: absolute;
} }
.cineraMenus > .menu { .cineraMenus > .menu {
@ -188,7 +195,7 @@
} }
.cineraMenus > .help { .cineraMenus > .help {
cursor: default; cursor: pointer;
border: 1px solid; border: 1px solid;
border-radius: 4px; border-radius: 4px;
height: 6px; height: 6px;
@ -226,6 +233,7 @@
.cineraMenus > .menu .refs, .cineraMenus > .menu .refs,
.cineraMenus > .menu .filter_container, .cineraMenus > .menu .filter_container,
.cineraMenus > .menu .views_container,
.cineraMenus > .menu .credits_container{ .cineraMenus > .menu .credits_container{
border: 1px solid; border: 1px solid;
border-top: none; border-top: none;
@ -265,6 +273,11 @@
flex-direction: column; flex-direction: column;
} }
.cineraMenus > .menu > .view,
.cineraMenus > .menu > .views_container .view {
cursor: pointer;
}
.cineraMenus > .menu > .credits_container .credit { .cineraMenus > .menu > .credits_container .credit {
cursor: default; cursor: default;
} }

View File

@ -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"); var creditsMenu = titleBar.querySelector(".credits_container");
if(creditsMenu) if(creditsMenu)
{ {
@ -145,13 +192,6 @@ var focusedIdentifier = null;
var playerContainer = document.querySelector(".cineraPlayerContainer") var playerContainer = document.querySelector(".cineraPlayerContainer")
var cinera = playerContainer.parentNode; var cinera = playerContainer.parentNode;
var views = {
REGULAR: 1,
THEATRE: 2,
SUPERTHEATRE: 3,
};
var cineraView = views.REGULAR;
initTheatre();
var player = new Player(playerContainer, onRefChanged); var player = new Player(playerContainer, onRefChanged);
window.addEventListener("resize", function() { player.updateSize(); }); window.addEventListener("resize", function() { player.updateSize(); });

View File

@ -412,13 +412,20 @@ function toggleMenuVisibility(element) {
} }
} }
function initTheatre() function handleMouseOverViewsMenu()
{ {
cinera.style.zIndex=64; switch(cineraProps.V)
cinera.style.left=0; {
cinera.style.top=0; case views.REGULAR:
cinera.style.width="100%"; case views.THEATRE:
cinera.style.height="100%"; {
viewsContainer.style.display = "block";
} break;
case views.SUPERTHEATRE:
{
viewsContainer.style.display = "none";
} break;
}
} }
function enterFullScreen_() function enterFullScreen_()
@ -449,27 +456,55 @@ function leaveFullScreen_()
} }
function toggleTheatreMode() { function toggleTheatreMode() {
switch(cineraView) switch(cineraProps.V)
{ {
case views.REGULAR: case views.REGULAR:
{ {
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"; cinera.style.position = "fixed";
} cineraView = views.THEATRE; break;
viewItems[0].setAttribute("data-id", "regular");
viewItems[0].setAttribute("title", "Regular mode");
viewItems[0].firstChild.nodeValue = "📺";
} cineraProps.V = views.THEATRE; break;
case views.SUPERTHEATRE: case views.SUPERTHEATRE:
{ {
leaveFullScreen_(); leaveFullScreen_();
} }
case views.THEATRE: case views.THEATRE:
{ {
cinera.style.position="static"; cinera.style.backgroundColor = cineraProps.C;
} cineraView = views.REGULAR; break; 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(); player.updateSize();
} }
function toggleSuperTheatreMode() function toggleSuperTheatreMode()
{ {
switch(cineraView) switch(cineraProps.V)
{ {
case views.REGULAR: case views.REGULAR:
{ {
@ -478,12 +513,12 @@ function toggleSuperTheatreMode()
case views.THEATRE: case views.THEATRE:
{ {
enterFullScreen_(); enterFullScreen_();
} cineraView = views.SUPERTHEATRE; break; } cineraProps.V = views.SUPERTHEATRE; break;
case views.SUPERTHEATRE: case views.SUPERTHEATRE:
{ {
leaveFullScreen_(); leaveFullScreen_();
toggleTheatreMode(); toggleTheatreMode();
} cineraView = views.REGULAR; break; } cineraProps.V = views.REGULAR; break;
} }
player.updateSize(); player.updateSize();
} }

View File

@ -8,7 +8,7 @@
<body> <body>
<a href="../">Awesome Contents</a> <a href="../">Awesome Contents</a>
<h1 style="background-color: #3399FF; text-align:center; width: 100%; margin: 0 auto"><!-- __CINERA_TITLE__ --></h1> <h1 style="background-color: #3399FF; text-align:center; width: 100%; margin: 0 auto"><!-- __CINERA_TITLE__ --></h1>
<div id="cinera"> <div>
<!-- __CINERA_MENUS__ --> <!-- __CINERA_MENUS__ -->
<!-- __CINERA_PLAYER__ --> <!-- __CINERA_PLAYER__ -->
</div> </div>