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