cinera: Fix theatre and add GUI clickable for it

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,
+                "            <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"

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

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(); });

cinera/cinera_player_pre.js

@@ -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_()
@@ -449,27 +456,55 @@ function leaveFullScreen_()
 }
 
 function toggleTheatreMode() {
-    switch(cineraView)
+    switch(cineraProps.V)
     {
         case views.REGULAR:
             {
-                cinera.style.position="fixed";
+                cineraProps.C = cinera.style.backgroundColor;
-            } cineraView = views.THEATRE; break;
+                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";
+                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();
 }
 
 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();
 }

cinera/examples/template_player.html

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