Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
cinera/cinera.c
View File

@ -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,
" <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)
{
CopyBuffer(&CollationBuffers->Menus, &CreditsMenu);
@ -3794,7 +3802,7 @@ BuffersToHTML(buffers *CollationBuffers, template *Template, char *OutputPath, i
" ");
if(PageType == PAGE_PLAYER)
{
CopyStringToBuffer(&Master, "<div id=\"cinera\">\n"
CopyStringToBuffer(&Master, "<div>\n"
" ");
CopyBuffer(&Master, &CollationBuffers->Menus);
CopyStringToBuffer(&Master, "\n"

19
cinera/cinera.css
View File

@ -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;
}

54
cinera/cinera_player_post.js
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");
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(); });

61
cinera/cinera_player_pre.js
View File

@ -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:
{
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";
} 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:
{
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();
}

2
cinera/examples/template_player.html
View File

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