IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

FEATURE: Show video thumbnail in composer (#27233)

Browse Source 
When uploading a video, the composer will now show a thumbnail image in
the composer preview instead of just the video placeholder image.

If `enable_diffhtml_preview` is enabled the video will be rendered in
the composer preview and is playable.
This commit is contained in:
Blake Erickson
2024-05-29 08:24:29 -06:00
committed by GitHub
parent 96305ec9a6
commit f292e645b9
4 changed files with 62 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/javascripts/pretty-text/addon/upload-short-url.js
View File

@@ -157,6 +157,33 @@ function _loadCachedShortUrls(uploadElements, siteSettings, opts) {
}
});
break;
case "DIV":
if (siteSettings.enable_diffhtml_preview === true) {
retrieveCachedUrl(upload, siteSettings, "orig-src", opts, (url) => {
const videoHTML = `
<video width="100%" height="100%" preload="metadata" controls style="">
<source src="${url}">
</video>`;
upload.insertAdjacentHTML("beforeend", videoHTML);
upload.classList.add("video-container");
});
} else {
retrieveCachedUrl(
upload,
siteSettings,
"orig-src-id",
opts,
(url) => {
upload.style.backgroundImage = `url('${url}')`;
const placeholderIcon = upload.querySelector(
".placeholder-icon.video"
);
placeholderIcon.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
}
);
}
break;
}
});
@@ -175,7 +202,9 @@ function _loadShortUrls(uploads, ajax, siteSettings, opts) {
let urls = [...uploads].map((upload) => {
return (
upload.getAttribute("data-orig-src") ||
upload.getAttribute("data-orig-href")
upload.getAttribute("data-orig-href") ||
upload.getAttribute("data-orig-src-id") ||
upload.getAttribute("data-orig-src")
);
});
@@ -196,7 +225,7 @@ function _loadShortUrls(uploads, ajax, siteSettings, opts) {
}
const SHORT_URL_ATTRIBUTES =
"img[data-orig-src], a[data-orig-href], source[data-orig-src]";
"img[data-orig-src], a[data-orig-href], source[data-orig-src], div[data-orig-src-id], div[data-orig-src]";
export function resolveCachedShortUrls(siteSettings, scope, opts) {
const shortUploadElements = scope.querySelectorAll(SHORT_URL_ATTRIBUTES);