Fix image rendering in web ui

This commit is contained in:
Edward Shen 2022-01-16 19:34:28 -08:00
parent 18ee415f46
commit ae5965a7da
Signed by: edward
GPG key ID: 19182661E818369F

View file

@ -40,24 +40,31 @@ function loadFromDb(mimeType: string, name?: string, language?: string) {
const data = (evt.target as IDBRequest).result; const data = (evt.target as IDBRequest).result;
switch (data.type) { switch (data.type) {
case "string": case "string":
console.info("[js] Rendering string UI.");
createStringPasteUi(data, mimeType, resolvedName, language); createStringPasteUi(data, mimeType, resolvedName, language);
break; break;
case "blob": case "blob":
console.info("[js] Rendering blob UI.");
createBlobPasteUi(data, resolvedName); createBlobPasteUi(data, resolvedName);
break; break;
case "image": case "image":
createImagePasteUi(data, resolvedName); console.info("[js] Rendering image UI.");
createImagePasteUi(data, resolvedName, mimeType);
break; break;
case "audio": case "audio":
createAudioPasteUi(data, resolvedName); console.info("[js] Rendering audio UI.");
createAudioPasteUi(data, resolvedName, mimeType);
break; break;
case "video": case "video":
createVideoPasteUi(data, resolvedName); console.info("[js] Rendering video UI.");
createVideoPasteUi(data, resolvedName, mimeType);
break; break;
case "archive": case "archive":
console.info("[js] Rendering archive UI.");
createArchivePasteUi(data, resolvedName); createArchivePasteUi(data, resolvedName);
break; break;
default: default:
console.info("[js] Rendering unknown UI.");
renderMessage("Something went wrong. Try clearing local data."); renderMessage("Something went wrong. Try clearing local data.");
break; break;
} }
@ -202,8 +209,8 @@ function createBlobPasteUi(data, name: string) {
bodyEle.appendChild(mainEle); bodyEle.appendChild(mainEle);
} }
function createImagePasteUi({ expiration, data, file_size }, name: string) { function createImagePasteUi({ expiration, data, file_size }, name: string, mimeType: string) {
createMultiMediaPasteUi("img", expiration, data, name, (downloadEle, imgEle) => { createMultiMediaPasteUi("img", expiration, data, name, mimeType, (downloadEle, imgEle) => {
imgEle.onload = () => { imgEle.onload = () => {
const width = imgEle.naturalWidth || imgEle.width; const width = imgEle.naturalWidth || imgEle.width;
const height = imgEle.naturalHeight || imgEle.height; const height = imgEle.naturalHeight || imgEle.height;
@ -212,12 +219,12 @@ function createImagePasteUi({ expiration, data, file_size }, name: string) {
}); });
} }
function createAudioPasteUi({ expiration, data }, name: string) { function createAudioPasteUi({ expiration, data }, name: string, mimeType: string) {
createMultiMediaPasteUi("audio", expiration, data, name, "Download"); createMultiMediaPasteUi("audio", expiration, data, name, mimeType, "Download");
} }
function createVideoPasteUi({ expiration, data }, name: string) { function createVideoPasteUi({ expiration, data }, name: string, mimeType: string) {
createMultiMediaPasteUi("video", expiration, data, name, "Download"); createMultiMediaPasteUi("video", expiration, data, name, mimeType, "Download");
} }
function createArchivePasteUi({ expiration, data, entries }, name: string) { function createArchivePasteUi({ expiration, data, entries }, name: string) {
@ -281,7 +288,7 @@ function createArchivePasteUi({ expiration, data, entries }, name: string) {
bodyEle.appendChild(mainEle); bodyEle.appendChild(mainEle);
} }
function createMultiMediaPasteUi(tag, expiration, data, name: string, on_create?: Function | string) { function createMultiMediaPasteUi(tag, expiration, data, name: string, mimeType: string, on_create?: Function | string) {
const bodyEle = document.getElementsByTagName("body")[0]; const bodyEle = document.getElementsByTagName("body")[0];
bodyEle.textContent = ''; bodyEle.textContent = '';
@ -290,7 +297,7 @@ function createMultiMediaPasteUi(tag, expiration, data, name: string, on_create?
mainEle.classList.add("centered"); mainEle.classList.add("centered");
mainEle.classList.add("fullscreen"); mainEle.classList.add("fullscreen");
const downloadLink = getObjectUrl(data, name); const downloadLink = getObjectUrl(data, mimeType);
const expirationEle = document.createElement("p"); const expirationEle = document.createElement("p");
expirationEle.textContent = expiration; expirationEle.textContent = expiration;
@ -329,9 +336,7 @@ function renderMessage(message) {
} }
function getObjectUrl(data, mimeType?: string) { function getObjectUrl(data, mimeType?: string) {
return URL.createObjectURL(new Blob(data, { return URL.createObjectURL(new Blob([data], { type: mimeType }));
type: mimeType,
}));
} }
window.addEventListener("hashchange", () => location.reload()); window.addEventListener("hashchange", () => location.reload());