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

cinera/cinera.c

@@ -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");

cinera/cinera.css

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

cinera/cinera_player_post.js

@@ -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) {

cinera/cinera_player_pre.js

@@ -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)

cinera/examples/template_player.html

@@ -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__ -->
+        <div id="cinera">
-        <!-- __CINERA_PLAYER__ -->
+            <!-- __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? -->