diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index d655a15..5acaa6c 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -1792,6 +1792,45 @@ textarea.markup-editor-textarea {
align-self: start;
}
+ /* Cinema mode: video spans viewport, Up Next + Download row under
+ video, side-by-side with comments. Unwraps .watch-left via
+ display:contents so its children become direct grid items. */
+ section.two-column.cinema-mode {
+ max-width: 100%;
+ padding-left: 20px;
+ padding-right: 20px;
+ grid-template-columns: 1fr 1fr;
+ grid-template-areas:
+ "images images"
+ "description description"
+ "purchase comments";
+ gap: 24px;
+ align-items: start;
+ }
+
+ section.two-column.cinema-mode .watch-left {
+ display: contents;
+ }
+
+ section.two-column.cinema-mode .product-images { grid-area: images; }
+ section.two-column.cinema-mode .product-description { grid-area: description; }
+ section.two-column.cinema-mode .product-comments { grid-area: comments; }
+ section.two-column.cinema-mode section.product-right { grid-area: purchase; }
+
+ /* Cinema: video/cover fills horizontal space, preserves aspect ratio.
+ Follows CLAUDE.md media rule: auto width + max-width + max-height. */
+ section.two-column.cinema-mode .product-main,
+ section.two-column.cinema-mode .watch-video-container > video,
+ section.two-column.cinema-mode .watch-audio-container > .product-main {
+ max-width: 100%;
+ max-height: 85vh;
+ width: auto;
+ height: auto;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
/* if we have room, break markup-editor into 2 columns */
div.markup-editor {
display: grid;
@@ -3011,6 +3050,28 @@ textarea {
color: var(--text-muted, #999);
}
+.watch-cinema-label {
+ display: grid;
+ grid-template-columns: auto auto;
+ gap: 6px;
+ align-items: center;
+ font-size: 0.85em;
+ cursor: pointer;
+}
+.watch-cinema-label input {
+ display: none;
+}
+.watch-cinema-label input:checked + .autoplay-slider {
+ background: var(--blue-color, #98b6fa);
+}
+.watch-cinema-label input:checked + .autoplay-slider::after {
+ transform: translateX(16px);
+}
+.cinema-label-text {
+ font-size: 0.85em;
+ color: var(--text-muted, #999);
+}
+
/* Media type filter bar */
.ring-filter-controls {
display: grid;
diff --git a/make_post_sell/static/js/watch.js b/make_post_sell/static/js/watch.js
index f483949..a8b21a4 100644
--- a/make_post_sell/static/js/watch.js
+++ b/make_post_sell/static/js/watch.js
@@ -156,6 +156,24 @@
if (savedFresh !== null) freshMode = savedFresh === '1';
} catch (e) {}
+ // Cinema mode preference (full-width video, restructured page layout)
+ var cinemaMode = false;
+ try {
+ var savedCinema = localStorage.getItem('watchCinemaMode');
+ if (savedCinema !== null) cinemaMode = savedCinema === '1';
+ } catch (e) {}
+
+ function applyCinemaMode() {
+ var section = document.querySelector('section.two-column');
+ if (!section) return;
+ if (cinemaMode) {
+ section.classList.add('cinema-mode');
+ } else {
+ section.classList.remove('cinema-mode');
+ }
+ }
+ applyCinemaMode();
+
// Media type filter preferences (all on by default)
var FILTER_TYPES = ['video', 'audio', 'image', 'document', 'other'];
var FILTER_LABELS = {video: 'Video', audio: 'Audio', image: 'Image', document: 'Docs', other: 'Other'};
@@ -943,6 +961,7 @@
var autoplayChecked = autoplayEnabled ? ' checked' : '';
var directionChecked = ringDirection === -1 ? ' checked' : '';
var freshChecked = freshMode ? ' checked' : '';
+ var cinemaChecked = cinemaMode ? ' checked' : '';
var modBadge = isMod ? 'mod' : '';
var loopsBadge = ringLoops > 0
? '+' + ringLoops + ''
@@ -970,6 +989,11 @@
+ ''
+ ''
+ ''
+ + ''
+ ''
+ ''
+ ''
@@ -1094,6 +1118,16 @@
});
}
+ var cinemaToggle = document.getElementById('watch-cinema-toggle');
+ if (cinemaToggle) {
+ cinemaToggle.checked = cinemaMode;
+ cinemaToggle.addEventListener('change', function() {
+ cinemaMode = this.checked;
+ try { localStorage.setItem('watchCinemaMode', cinemaMode ? '1' : '0'); } catch (e) {}
+ applyCinemaMode();
+ });
+ }
+
// Media type filter buttons
var filterBtns = document.querySelectorAll('.ring-filter-btn');
for (var fi = 0; fi < filterBtns.length; fi++) {
diff --git a/make_post_sell/templates/snippets/related_content.j2 b/make_post_sell/templates/snippets/related_content.j2
index 27e780d..16bc793 100644
--- a/make_post_sell/templates/snippets/related_content.j2
+++ b/make_post_sell/templates/snippets/related_content.j2
@@ -29,6 +29,11 @@
+