kibi/f0ckm
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix chrome shitpost mode video preview in upload

Browse Source
This commit is contained in:
Kibi Kelburton
2026-07-15 17:41:58 +02:00
parent a613d01873
commit 9e9fd4adf3
2 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
public/s/css/upload.css
View File

@@ -225,12 +225,7 @@
object-fit: contain; object-fit: contain;
} }
.upload-form.shitpost-mode-active .preview-media-small {
width: 120px;
height: 80px;
object-fit: contain;
min-height: auto;
}
.preview-media-small { .preview-media-small {
flex-shrink: 0; flex-shrink: 0;
@@ -431,25 +426,36 @@
} }
/* Bigger Previews in Shitpost Mode */ /* Bigger Previews in Shitpost Mode */
.file-preview-item { .upload-form.shitpost-mode-active .file-preview-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
padding: 15px; padding: 15px;
gap: 0; gap: 16px;
width: 100%; width: 100%;
border-bottom: 1px solid rgba(255,255,255,0.05); 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%; flex: 0 0 50%;
width: 100% !important; width: 50% !important;
height: auto !important; max-width: 50% !important;
min-height: 120px; height: 240px !important;
max-height: 350px; max-height: 240px !important;
object-fit: contain; object-fit: contain;
border-radius: 8px; border-radius: 8px;
background: rgba(0,0,0,0.3); 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 */ /* Per-item Tags */
@@ -1308,6 +1314,7 @@
.upload-form.shitpost-mode-active .preview-media-small, .upload-form.shitpost-mode-active .preview-media-small,
.upload-form.shitpost-mode-active .item-media-col { .upload-form.shitpost-mode-active .item-media-col {
width: 100% !important; width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto; flex: 0 0 auto;
min-height: auto; min-height: auto;
} }

12
public/s/js/upload.js
View File

@@ -1415,7 +1415,17 @@ window.initUploadForm = (selector) => {
} }
// preview-media-small sizing only applies to standalone (non-col) media // preview-media-small sizing only applies to standalone (non-col) media
if (!mediaCol) { 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) // If URL item: finish building the media column (media + badge below)