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

cinera: Theatre Mode 

This also changes the hardcoded, unintegrated output to wrap cineraMenus
and cineraPlayerContainer in a <div>, as newly reflected in the example
template_player.html
This commit is contained in:
Matt Mascarenhas 2018-01-15 21:52:24 +00:00
parent 5e7029d2b0
commit f270ee2afa
5 changed files with 113 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
cinera/cinera.c
View File

@ -14,7 +14,7 @@ typedef struct
version CINERA_APP_VERSION = {
.Major = 0,
.Minor = 5,
.Patch = 25
.Patch = 26
};
// TODO(matt): Copy in the DB 3 stuff from cinera_working.c
@ -3258,6 +3258,7 @@ AppendedIdentifier:
CopyBuffer(&CollationBuffers->Menus, &CreditsMenu);
}
// TODO(matt): Maybe figure out a more succinct way to code this Help text
CopyStringToBuffer(&CollationBuffers->Menus,
" <div class=\"help\">\n"
" <span>?</span>\n"
@ -3265,7 +3266,9 @@ AppendedIdentifier:
" <span class=\"help_key\">?</span><h1>Keyboard Navigation</h1>\n"
"\n"
" <h2>Global Keys</h2>\n"
" <span class=\"help_key\">W</span>, <span class=\"help_key\">A</span>, <span class=\"help_key\">P</span> / <span class=\"help_key\">S</span>, <span class=\"help_key\">D</span>, <span class=\"help_key\">N</span> <span class=\"help_text\">Jump to previous / next marker</span><br>\n");
" <span class=\"help_key\">W</span>, <span class=\"help_key\">A</span>, <span class=\"help_key\">P</span> / <span class=\"help_key\">S</span>, <span class=\"help_key\">D</span>, <span class=\"help_key\">N</span> <span class=\"help_text\">Jump to previous / next marker</span><br>\n"
" <span class=\"help_key\">t</span> / <span class=\"help_key\">T</span> <span class=\"help_text\">Toggle theatre / SUPERtheatre mode</span><br>\n"
);
if(HasFilterMenu)
{
@ -3453,7 +3456,7 @@ AppendedIdentifier:
CopyStringToBuffer(&CollationBuffers->Menus, ", References ");
if(HasCreditsMenu)
{
CopyStringToBuffer(&CollationBuffers->Menus, "</span>and Credits Menus</h2>");
CopyStringToBuffer(&CollationBuffers->Menus, "and</span> Credits Menus</h2>");
}
else
{
@ -3791,11 +3794,15 @@ BuffersToHTML(buffers *CollationBuffers, template *Template, char *OutputPath, i
" ");
if(PageType == PAGE_PLAYER)
{
CopyStringToBuffer(&Master, "<div id=\"cinera\">\n"
" ");
CopyBuffer(&Master, &CollationBuffers->Menus);
CopyStringToBuffer(&Master, "\n"
" ");
" ");
CopyBuffer(&Master, &CollationBuffers->Player);
CopyStringToBuffer(&Master, "\n"
" ");
CopyStringToBuffer(&Master, "</div>\n"
" ");
CopyBuffer(&Master, &CollationBuffers->ScriptPlayer);
CopyStringToBuffer(&Master, "\n");

1
cinera/cinera.css
View File

@ -428,6 +428,7 @@
}
.cineraPlayerContainer .markers_container {
flex-shrink: 0;
overflow-y: scroll;
position: relative;
}

9
cinera/cinera_player_post.js
View File

@ -144,6 +144,15 @@ var focusedElement = null;
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(); });
document.addEventListener("keydown", function(ev) {

88
cinera/cinera_player_pre.js
View File

@ -412,6 +412,82 @@ function toggleMenuVisibility(element) {
}
}
function initTheatre()
{
cinera.style.zIndex=64;
cinera.style.left=0;
cinera.style.top=0;
cinera.style.width="100%";
cinera.style.height="100%";
}
function enterFullScreen_()
{
if(!document.mozFullScreen && !document.webkitFullScreen)
{
if(cinera.mozRequestFullScreen)
{
cinera.mozRequestFullScreen();
}
else
{
cinera.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
}
function leaveFullScreen_()
{
if(document.mozCancelFullScreen)
{
document.mozCancelFullScreen();
}
else
{
document.webkitExitFullscreen();
}
}
function toggleTheatreMode() {
switch(cineraView)
{
case views.REGULAR:
{
cinera.style.position="fixed";
} cineraView = views.THEATRE; break;
case views.SUPERTHEATRE:
{
leaveFullScreen_();
}
case views.THEATRE:
{
cinera.style.position="static";
} cineraView = views.REGULAR; break;
}
player.updateSize();
}
function toggleSuperTheatreMode()
{
switch(cineraView)
{
case views.REGULAR:
{
toggleTheatreMode();
}
case views.THEATRE:
{
enterFullScreen_();
} cineraView = views.SUPERTHEATRE; break;
case views.SUPERTHEATRE:
{
leaveFullScreen_();
toggleTheatreMode();
} cineraView = views.REGULAR; break;
}
player.updateSize();
}
function handleKey(key) {
var gotKey = true;
switch (key) {
@ -439,6 +515,18 @@ function handleKey(key) {
toggleMenuVisibility(creditsMenu)
}
} break;
case "t": {
if(cinera)
{
toggleTheatreMode();
}
} break;
case "T": {
if(cinera)
{
toggleSuperTheatreMode();
}
} break;
case "Enter": {
if(focusedElement)

6
cinera/examples/template_player.html
View File

@ -8,8 +8,10 @@
<body>
<a href="../">Awesome Contents</a>
<h1 style="background-color: #3399FF; text-align:center; width: 100%; margin: 0 auto"><!-- __CINERA_TITLE__ --></h1>
<!-- __CINERA_MENUS__ -->
<!-- __CINERA_PLAYER__ -->
<div id="cinera">
<!-- __CINERA_MENUS__ -->
<!-- __CINERA_PLAYER__ -->
</div>
<!-- 2. This is a random comment. How does this affect it, if at all? -->
<!-- __CINERA_SCRIPT__ -->
<!-- 3. This is a random comment. How does this affect it, if at all? -->