diff --git a/public/s/css/upload.css b/public/s/css/upload.css index 7b35f30..8037552 100644 --- a/public/s/css/upload.css +++ b/public/s/css/upload.css @@ -225,12 +225,7 @@ object-fit: contain; } -.upload-form.shitpost-mode-active .preview-media-small { - width: 120px; - height: 80px; - object-fit: contain; - min-height: auto; -} + .preview-media-small { flex-shrink: 0; @@ -431,25 +426,36 @@ } /* Bigger Previews in Shitpost Mode */ -.file-preview-item { +.upload-form.shitpost-mode-active .file-preview-item { display: flex; flex-direction: row; align-items: flex-start; padding: 15px; - gap: 0; + gap: 16px; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); } -.preview-media-small { +.upload-form.shitpost-mode-active .preview-media-small { flex: 0 0 50%; - width: 100% !important; - height: auto !important; - min-height: 120px; - max-height: 350px; + width: 50% !important; + max-width: 50% !important; + height: 240px !important; + max-height: 240px !important; object-fit: contain; border-radius: 8px; background: rgba(0,0,0,0.3); + overflow: hidden; /* Clip the video — Chrome cannot expand past this */ +} + +/* Inner video inside the wrapper fills the container and cannot resize it */ +.upload-form.shitpost-mode-active .preview-video-wrapper > video { + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; + display: block; + object-fit: contain; } /* Per-item Tags */ @@ -1308,6 +1314,7 @@ .upload-form.shitpost-mode-active .preview-media-small, .upload-form.shitpost-mode-active .item-media-col { width: 100% !important; + max-width: 100% !important; flex: 0 0 auto; min-height: auto; } diff --git a/public/s/js/upload.js b/public/s/js/upload.js index d9a58ea..e82dc56 100644 --- a/public/s/js/upload.js +++ b/public/s/js/upload.js @@ -1415,7 +1415,17 @@ window.initUploadForm = (selector) => { } // preview-media-small sizing only applies to standalone (non-col) media if (!mediaCol) { - mediaElem.classList.add('preview-media-small'); + // In shitpost mode, wrap videos in a rigid container to prevent Chrome from + // expanding the video element when native controls are clicked + if (isShitpost && mediaElem.tagName === 'VIDEO') { + const videoWrapper = document.createElement('div'); + videoWrapper.className = 'preview-media-small preview-video-wrapper'; + mediaElem.style.cssText = 'width:100%;height:100%;display:block;object-fit:contain;'; + videoWrapper.appendChild(mediaElem); + mediaElem = videoWrapper; + } else { + mediaElem.classList.add('preview-media-small'); + } } // If URL item: finish building the media column (media + badge below)