Fix image rendering in web ui
This commit is contained in:
parent
18ee415f46
commit
ae5965a7da
1 changed files with 19 additions and 14 deletions
|
@ -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());
|
||||||
|
|
Loading…
Reference in a new issue