Merge pull request #57 from justinhartman/feat/upload-two-additional-images

Add cinema mode toggle

Author: justinhartman

public/css/style.css

@@ -26,6 +26,9 @@ a.btn-primary:hover {
     display: flex;
     flex-direction: column;
 }
+.series-controls {
+    width: 100%;
+}
 
 /* Home page scrolling containers with buttons. */
 .scroll-row {
@@ -60,11 +63,22 @@ a.btn-primary:hover {
         grid-template-columns: 2fr 1fr;
         grid-template-areas:
             "player episodes"
+            "controls episodes"
             "seasons episodes"
             "info episodes";
         column-gap: 1rem;
     }
+    .series-layout.cinema-mode {
+        grid-template-columns: 3fr 2fr;
+        grid-template-areas:
+            "player player"
+            "controls controls"
+            "seasons episodes"
+            "info episodes";
+        row-gap: 1rem;
+    }
     .series-player { grid-area: player; }
+    .series-controls { grid-area: controls; }
     .series-episodes { grid-area: episodes; }
     .series-seasons { grid-area: seasons; }
     .series-info { grid-area: info; }

views/partials/footer.ejs

@@ -91,5 +91,27 @@
       applyServer(next);
     });
   })();
+
+  (function() {
+    const cinemaToggle = document.getElementById('cinema-toggle');
+    const seriesLayout = document.querySelector('.series-layout');
+    if (!cinemaToggle || !seriesLayout) return;
+
+    const updateCinemaToggle = (enabled) => {
+      cinemaToggle.innerHTML = `<i class="bi bi-camera-reels"></i> ${enabled ? 'Cinema Off' : 'Cinema On'}`;
+      cinemaToggle.classList.toggle('bg-info', enabled);
+      cinemaToggle.classList.toggle('text-dark', enabled);
+      cinemaToggle.classList.toggle('bg-info-subtle', !enabled);
+      seriesLayout.classList.toggle('cinema-mode', enabled);
+    };
+
+    updateCinemaToggle(seriesLayout.classList.contains('cinema-mode'));
+
+    cinemaToggle.addEventListener('click', (event) => {
+      event.preventDefault();
+      const enableCinema = !seriesLayout.classList.contains('cinema-mode');
+      updateCinemaToggle(enableCinema);
+    });
+  })();
 </script>
 </html>

views/partials/series-buttons.ejs

@@ -31,6 +31,9 @@ if (episodeNum >= maxEpisodes) {
 <div id="series-buttons" class="px-1 w-100">
     <div class="btn-group mb-2 w-100">
         <a href="<%= prevLink %>" class="btn bg-primary border border-primary-subtle btn-sm p-2 <%= prevDisabled ? 'disabled' : '' %>"><i class="bi bi-caret-left-square"></i> Previous</a>
+        <button type="button" id="cinema-toggle" class="btn btn-sm p-2 bg-info-subtle border border-gray-subtle">
+            <i class="bi bi-camera-reels"></i> Cinema On
+        </button>
     <% if (server2Src && server2Src.trim() !== '') { -%>
         <a href="#" id="server-toggle" data-current="<%= currentServer %>" data-server1="<%= server1Src %>" data-server2="<%= server2Src %>" data-preference-key="<%= preferenceKeySeries %>" class="btn text-secondary bg-secondary-subtle border border-secondary-subtle btn-sm p-2">
             <i class="bi bi-hdd-stack"></i> Server <%= currentServer === '1' ? '2' : '1' %>

views/view.ejs

@@ -60,12 +60,8 @@
                 <iframe id="player" src="<%= iframeSrc %>" referrerpolicy="origin" allow="autoplay; fullscreen" class="w-100"></iframe>
             </div>
         </div>
-        <div class="series-episodes d-flex flex-wrap flex-md-column mt-2 mt-md-0">
+        <div class="series-controls mt-2 mt-md-0">
             <%- include('./partials/series-buttons.ejs') -%>
-            <% const currentSeason = seriesDetail.currentSeason || { episodes: [] }; %>
-            <% currentSeason.episodes.forEach(ep => { %>
-                <a href="<%= `${APP_URL}/view/${id}/${type}/${season}/${ep.episode}` %>" class="btn btn-outline-info btn-sm text-start m-1 <%= Number(episode) === ep.episode ? 'active' : '' %>"><%= ep.episode %>. <%= ep.title || `Episode ${ep.episode}` %></a>
-            <% }) %>
         </div>
         <div class="series-seasons d-flex flex-wrap mt-2 h-25">
             <% for (let s = 1; s <= seriesDetail.totalSeasons; s++) { %>
@@ -94,6 +90,12 @@
             </div>
         </div>
         <% } -%>
+        <div class="series-episodes d-flex flex-wrap flex-md-column mt-2 mt-md-0">
+            <% const currentSeason = seriesDetail.currentSeason || { episodes: [] }; %>
+            <% currentSeason.episodes.forEach(ep => { %>
+                <a href="<%= `${APP_URL}/view/${id}/${type}/${season}/${ep.episode}` %>" class="btn btn-outline-info btn-sm text-start m-1 <%= Number(episode) === ep.episode ? 'active' : '' %>"><%= ep.episode %>. <%= ep.title || `Episode ${ep.episode}` %></a>
+            <% }) %>
+        </div>
     </div>
     <% } else { %>
     <div class="row">