thubmnail fix for vid preview in shitpost mode upload
This commit is contained in:
@@ -1233,27 +1233,35 @@ window.initUploadForm = (selector) => {
|
|||||||
mediaElem = document.createElement('img');
|
mediaElem = document.createElement('img');
|
||||||
mediaElem.src = URL.createObjectURL(file);
|
mediaElem.src = URL.createObjectURL(file);
|
||||||
} else if (file.type.startsWith('video/')) {
|
} else if (file.type.startsWith('video/')) {
|
||||||
mediaElem = document.createElement('video');
|
const videoElem = document.createElement('video');
|
||||||
mediaElem.src = URL.createObjectURL(file);
|
videoElem.src = URL.createObjectURL(file);
|
||||||
mediaElem.muted = true;
|
videoElem.muted = true;
|
||||||
mediaElem.controls = true;
|
videoElem.controls = true;
|
||||||
mediaElem.loop = true;
|
videoElem.loop = true;
|
||||||
|
|
||||||
if (isShitpost) {
|
if (isShitpost) {
|
||||||
mediaElem.autoplay = false;
|
videoElem.autoplay = false;
|
||||||
mediaElem.preload = 'none';
|
videoElem.preload = 'none';
|
||||||
mediaElem.classList.add('video-thumbnail-loading');
|
videoElem.classList.add('video-thumbnail-loading');
|
||||||
|
|
||||||
videoThumbnailQueue.add(file, (dataUrl) => {
|
videoThumbnailQueue.add(file, (dataUrl) => {
|
||||||
if (dataUrl) {
|
if (dataUrl) {
|
||||||
mediaElem.poster = dataUrl;
|
videoElem.poster = dataUrl;
|
||||||
mediaElem.classList.remove('video-thumbnail-loading');
|
videoElem.classList.remove('video-thumbnail-loading');
|
||||||
} else {
|
} else {
|
||||||
mediaElem.classList.remove('video-thumbnail-loading');
|
videoElem.classList.remove('video-thumbnail-loading');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Wrap immediately so mediaElem is always the rigid container
|
||||||
|
const videoWrapper = document.createElement('div');
|
||||||
|
videoWrapper.className = 'preview-media-small preview-video-wrapper';
|
||||||
|
videoElem.style.cssText = 'width:100%;height:100%;display:block;object-fit:contain;';
|
||||||
|
videoWrapper.appendChild(videoElem);
|
||||||
|
mediaElem = videoWrapper;
|
||||||
} else {
|
} else {
|
||||||
mediaElem.autoplay = true;
|
videoElem.autoplay = true;
|
||||||
|
mediaElem = videoElem;
|
||||||
}
|
}
|
||||||
} else if (file.type.startsWith('audio/')) {
|
} else if (file.type.startsWith('audio/')) {
|
||||||
mediaElem = document.createElement('audio');
|
mediaElem = document.createElement('audio');
|
||||||
@@ -1415,15 +1423,8 @@ 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) {
|
||||||
// In shitpost mode, wrap videos in a rigid container to prevent Chrome from
|
// Videos in shitpost mode were already wrapped at creation time (above)
|
||||||
// expanding the video element when native controls are clicked
|
if (!mediaElem.classList.contains('preview-media-small') && !mediaElem.classList.contains('preview-video-wrapper')) {
|
||||||
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');
|
mediaElem.classList.add('preview-media-small');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user