diff --git a/cmd/fibr/static/scripts/async-image.js b/cmd/fibr/static/scripts/async-image.js index a37f9b33..25b5c002 100644 --- a/cmd/fibr/static/scripts/async-image.js +++ b/cmd/fibr/static/scripts/async-image.js @@ -18,37 +18,68 @@ function isWebPCompatible() { }); } -// From https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader/read#example_2_-_handling_text_line_by_line -async function* readLineByLine(response) { - const utf8Decoder = new TextDecoder('utf-8'); - const reader = response.body.getReader(); - let { value: chunk, done: readerDone } = await reader.read(); - chunk = chunk ? utf8Decoder.decode(chunk, { stream: true }) : ''; +function binaryToString(input) { + let output = ''; - let re = /\r\n|\n|\r/gm; - let startIndex = 0; + const len = input.byteLength; + for (let i = 0; i < len; i++) { + output += String.fromCharCode(input[i]); + } - for (;;) { - const result = re.exec(chunk); - if (!result) { - if (readerDone) { - break; + return output; +} + +function appendChunk(source, chunk) { + const output = new Uint8Array(source.length + chunk.length); + + output.set(source, 0); + output.set(chunk, source.length); + + return output; +} + +function findIndexEscapeSequence(escapeSequence, content) { + let escapePosition = 0; + + for (let i = 0; i < content.length; i++) { + if (content[i] === escapeSequence[escapePosition]) { + escapePosition++; + + if (escapePosition === escapeSequence.length) { + return i; } + } else if (escapePosition !== 0) { + escapePosition = 0; + } + } - const remainder = chunk.substr(startIndex); - ({ value: chunk, done: readerDone } = await reader.read()); - chunk = - remainder + (chunk ? utf8Decoder.decode(chunk, { stream: true }) : ''); - startIndex = re.lastIndex = 0; - continue; + return -1; +} + +async function* readChunk(response) { + const escapeSequence = [28, 23, 4]; + + const reader = response.body.getReader(); + let { value: chunk, done: readerDone } = await reader.read(); + let part = new Uint8Array(0); + let endPosition; + + for (;;) { + if (readerDone) { + break; } - yield chunk.substring(startIndex, result.index); - startIndex = re.lastIndex; - } + part = appendChunk(part, chunk); + endPosition = findIndexEscapeSequence(escapeSequence, part); + + while (endPosition !== -1) { + yield part.slice(0, endPosition); + part = part.slice(endPosition + (escapeSequence.length - 2)); - if (startIndex < chunk.length) { - yield chunk.substr(startIndex); + endPosition = findIndexEscapeSequence(escapeSequence, part); + } + + ({ value: chunk, done: readerDone } = await reader.read()); } } @@ -72,20 +103,24 @@ async function fetchThumbnail() { throw new Error('unable to load thumbnails'); } - for await (let line of readLineByLine(response)) { - const parts = line.split(','); - if (parts.length != 2) { + for await (let chunk of readChunk(response)) { + const line = binaryToString(chunk); + + const commaIndex = line.indexOf(','); + if (commaIndex === -1) { console.error('invalid line for thumbnail:', line); continue; } - const picture = document.getElementById(`picture-${parts[0]}`); + const picture = document.getElementById( + `picture-${line.slice(0, commaIndex)}`, + ); if (!picture) { continue; } const img = new Image(); - img.src = `data:image/webp;base64,${parts[1]}`; + img.src = `data:image/webp;base64,${btoa(line.slice(commaIndex + 1))}`; img.alt = picture.dataset.alt; img.dataset.src = picture.dataset.src; img.classList.add('thumbnail', 'full', 'block'); diff --git a/cmd/fibr/static/scripts/index.min.js b/cmd/fibr/static/scripts/index.min.js index fef62250..51c0521f 100644 --- a/cmd/fibr/static/scripts/index.min.js +++ b/cmd/fibr/static/scripts/index.min.js @@ -1 +1 @@ -function isWebPCompatible(){const e="UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA";return new Promise((t,n)=>{const s=new Image;s.onload=()=>{s.width>0&&s.height>0?t():n()},s.onerror=n.bind(null,!0),s.src=`data:image/webp;base64,${e}`})}async function*readLineByLine(e){const o=new TextDecoder("utf-8"),i=e.body.getReader();let{value:t,done:a}=await i.read();t=t?o.decode(t,{stream:!0}):"";let s=/\r\n|\n|\r/gm,n=0;for(;;){const e=s.exec(t);if(!e){if(a)break;const e=t.substr(n);({value:t,done:a}=await i.read(),t=e+(t?o.decode(t,{stream:!0}):""),n=s.lastIndex=0);continue}yield t.substring(n,e.index),n=s.lastIndex}n=400)throw new Error("unable to load thumbnails");for await(let o of readLineByLine(t)){const s=o.split(",");if(s.length!=2){console.error("invalid line for thumbnail:",o);continue}const n=document.getElementById(`picture-${s[0]}`);if(!n)continue;const e=new Image;e.src=`data:image/webp;base64,${s[1]}`,e.alt=n.dataset.alt,e.dataset.src=n.dataset.src,e.classList.add("thumbnail","full","block"),replaceContent(n,e)}}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;if(typeof hasThumbnail=="undefined"||!hasThumbnail)return;let n=new Intl.DateTimeFormat(navigator.language,{dateStyle:"full",timeStyle:"long"});document.querySelectorAll(".date").forEach(e=>{e.innerHTML=n.format(new Date(e.innerHTML))});const t=document.querySelectorAll("[data-thumbnail]");if(!t)return;t.forEach(e=>{replaceContent(e,generateThrobber(["throbber-white"]))});try{await fetchThumbnail()}catch(e){console.error(e)}try{await isWebPCompatible()}catch{await resolveScript("https://unpkg.com/webp-hero@0.0.2/dist-cjs/webp-hero.bundle.js","sha512-DA6h9H5Sqn55/uVn4JI4aSPFnAWoCQYYDXUnvjOAMNVx11///hX4QaFbQt5yWsrIm9hSI5fLJYfRWt3KXneSXQ==","anonymous");const e=new webpHero.WebpMachine;e.polyfillDocument(),e.clearCache()}window.dispatchEvent(new Event("thumbnail-done"))},!1),window.addEventListener("thumbnail-done",()=>{if(typeof lazyLoadThumbnail=="undefined"||!lazyLoadThumbnail)return;const e=new IntersectionObserver(async(t)=>{for(const s of t){if(!s.isIntersecting)continue;const n=s.target;if(window.webpHero){const t=await fetch(n.dataset.src,{credentials:"same-origin"}),s=await t.arrayBuffer(),e=new webpHero.WebpMachine;n.src=await e.decode(new Uint8Array(s)),e.clearCache()}else n.src=n.dataset.src;e.unobserve(n)}});document.querySelectorAll("img.thumbnail").forEach(t=>e.observe(t))});async function fetchGeoJSON(e){const t=await fetch(e,{credentials:"same-origin"});if(t.status>=400)throw new Error("unable to load geojson");return t.status===204?null:t.json()}async function addStyle(e,t,n){return new Promise(s=>{const o=document.createElement("link");o.rel="stylesheet",o.href=e,o.onload=s,t&&(o.integrity=t,o.crossOrigin=n),document.querySelector("head").appendChild(o)})}async function loadLeaflet(){const e="1.9.2";await addStyle(`https://unpkg.com/leaflet@${e}/dist/leaflet.css`,"sha512-UkezATkM8unVC0R/Z9Kmq4gorjNoFwLMAWR/1yZpINW08I79jEKx/c8NlLSvvimcu7SL8pgeOnynxfRpe+5QpA==","anonymous"),await addStyle("https://unpkg.com/leaflet.markercluster@1.5.1/dist/MarkerCluster.Default.css","sha512-6ZCLMiYwTeli2rVh3XAPxy3YoR5fVxGdH/pz+KMCzRY2M65Emgkw00Yqmhh8qLGeYQ3LbVZGdmOX9KUjSKr0TA==","anonymous"),await resolveScript(`https://unpkg.com/leaflet@${e}/dist/leaflet.js`,"sha512-KMraOVM0qMVE0U1OULTpYO4gg5MZgazwPAPyMQWfOkEshpwlLQFCHZ/0lBXyviDNVL+pBGwmeXQnuvGK8Fscvg==","anonymous"),await resolveScript("https://unpkg.com/leaflet.markercluster@1.5.1/dist/leaflet.markercluster.js","sha512-+Zr0llcuE/Ho6wXRYtlWypMyWSEMxrWJxrYgeAMDRSf1FF46gQ3PAVOVp5RHdxdzikZXuHZ0soHpqRkkPkI3KA==","anonymous")}let map;async function renderMap(e){if(map){map.invalidateSize();return}const t=document.getElementById("map-container"),n=generateThrobber(["map-throbber","throbber-white"]);t&&t.appendChild(n),await loadLeaflet(),map=L.map("map-container",{center:[46.227638,2.213749],zoom:5}),L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{maxZoom:19,attribution:'© OpenStreetMap contributors'}).addTo(map);const s=await fetchGeoJSON(e);if(!s||!s.features)return;const o=L.markerClusterGroup({zoomToBoundsOnClick:!1}),i=[];s.features.map(e=>{const t=L.GeoJSON.coordsToLatLng(e.geometry.coordinates);i.push(t),o.addLayer(L.circleMarker(t).bindPopup(`Image thumbnail
${e.properties.date}`,{maxWidth:"auto",closeButton:!1,className:"thumbnail-popup"}))}),o.on("clusterclick",e=>{map.fitBounds(e.layer.getAllChildMarkers().map(e=>e.getLatLng()))}),i.length?(map.once("zoomend",()=>{t.removeChild(n)}),map.fitBounds(i)):t.removeChild(n),map.addLayer(o)}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;document.location.hash==="#map"?await renderMap(geoURL):window.addEventListener("popstate",async()=>{document.location.hash==="#map"&&await renderMap(geoURL)})});function resolveScript(e,t,n){return new Promise((s,o)=>{const i=document.createElement("script");i.type="text/javascript",i.src=e,i.async=!0,i.onload=s.bind(null,!0),i.onerror=o.bind(null,!0),t&&(i.integrity=t,i.crossOrigin=n),document.querySelector("head").appendChild(i)})}window.onkeyup=e=>{switch(e.key){case"ArrowLeft":goToPrevious();break;case"ArrowRight":goToNext();break;case"Escape":typeof abort=="function"?abort(e):goBack();break}};function replaceContent(e,t){for(;e.firstChild;)e.removeChild(e.firstChild);t&&e.appendChild(t)}function generateThrobber(e=[]){const t=document.createElement("div");t.classList.add("throbber"),e.forEach(e=>t.classList.add(e));for(let e=1;e<4;e++){const n=document.createElement("div");n.classList.add("throbber-dot",`throbber-dot-${e}`),t.appendChild(n)}return t}let fileInput,uploadList,cancelButton;function eventNoop(e){e.preventDefault(),e.stopPropagation()}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;const t=document.getElementsByTagName("body")[0];t.addEventListener("dragover",eventNoop),t.addEventListener("dragleave",eventNoop),t.addEventListener("drop",e=>{eventNoop(e),window.location.hash="#upload-modal",fileInput&&(fileInput.files=e.dataTransfer.files,fileInput.dispatchEvent(new Event("change")))})});function bufferToHex(e){return Array.prototype.map.call(new Uint8Array(e),e=>`00${e.toString(16)}`.slice(-2)).join("")}async function sha(e){const t=await crypto.subtle.digest("SHA-256",new TextEncoder("utf-8").encode(e));return bufferToHex(t)}async function fileMessageId(e){const t=await sha(JSON.stringify({name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}));return`upload-file-${t}`}function humanFileSize(e){return e<1024?e+"bytes":e<1048576?(e/1024).toFixed(0)+" KB":(e/1048576).toFixed(0)+" MB"}async function addUploadItem(e,t){const c=await fileMessageId(t),n=document.createElement("div");n.id=c,n.classList.add("flex","flex-center","margin");const o=document.createElement("div");o.classList.add("upload-item"),n.appendChild(o);const s=document.createElement("input");s.id=`${c}-filename`,s.classList.add("upload-name","full"),s.type="text",s.value=t.name,o.appendChild(s);const i=document.createElement("div");i.classList.add("full","flex","flex-center");const r=document.createElement("em");r.innerHTML=humanFileSize(t.size),r.style.width="8rem",i.appendChild(r);const a=document.createElement("progress");a.classList.add("flex-grow","margin-left"),a.max=100,a.value=0,i.appendChild(a),o.appendChild(i);const l=document.createElement("span");l.classList.add("upload-status"),n.appendChild(l),e.appendChild(n)}function getFiles(e){return[].filter.call(e.target,e=>e.nodeName.toLowerCase()==="input").reduce((e,t)=>(t.type==="file"?e.files=t.files:e[t.name]=t.value,e),{})}function getFilename(e,t){const n=document.getElementById(`${e}-filename`);return n&&n.value?n.value:t.name}function clearUploadStatus(e){if(!e)return;const t=e.querySelector(".upload-status");if(!t)return;t.classList.remove("danger"),t.classList.remove("success")}async function setUploadStatus(e,t,n,s){if(!e)return;const o=e.querySelector(".upload-status");if(!o)return;o.innerHTML=t,o.classList.add(n),s&&(o.title=s)}let aborter;const chunkSize=1024*1024;let currentUpload={};async function uploadFileByChunks(e,t,n,s){let i;if(e&&(i=e.querySelector("progress"),clearUploadStatus(e)),s.name!==currentUpload.filename){currentUpload.filename=s.name,currentUpload.chunks=[];for(let e=0;e=400)return Promise.reject(await a.text());currentUpload.chunks[e].done=!0,i&&(i.value=chunkSize*(e+1)/s.size*100)}const o=new FormData;o.append("method",t),o.append("filename",n),o.append("size",s.size);const a=await fetch("",{method:"POST",credentials:"same-origin",headers:{"X-Chunk-Upload":!0,Accept:"text/plain"},body:o}),r=await a.text();return a.status>=400?Promise.reject(r):(currentUpload={},Promise.resolve(r))}async function uploadFileByXHR(e,t,n,s){let o;e&&(o=e.querySelector("progress"),clearUploadStatus(e));const i=new FormData;return i.append("method",t),i.append("filename",n),i.append("size",s.size),i.append("file",s),new Promise((e,t)=>{let n=new XMLHttpRequest;aborter=n,o&&n.upload.addEventListener("progress",e=>o.value=parseInt(e.loaded/e.total*100,10),!1),n.addEventListener("readystatechange",s=>{n.readyState===XMLHttpRequest.DONE?n.status>=200&&n.status<400?(o&&(o.value=100),e(n.responseText),n=void 0):(t(s),n=void 0):n.readyState===XMLHttpRequest.UNSENT&&(t(new Error("request aborted")),n=void 0)},!1),n.open("POST","",!0),n.setRequestHeader("Accept","text/plain"),n.send(i)})}function sliceFileList(e,t){const n=document.getElementById(e),s=new DataTransfer;for(;t{if(e.target.readyState!=="complete")return;if(fileInput=document.getElementById("file"),uploadList=document.getElementById("upload-list"),cancelButton=document.getElementById("upload-cancel"),fileInput){fileInput.classList.add("opacity"),fileInput.multiple=!0,fileInput.addEventListener("change",()=>{window.location.hash="#upload-modal",replaceContent(uploadList);for(const e of fileInput.files)addUploadItem(uploadList,e)});const e=document.getElementById("upload-button-link");e&&e.addEventListener("click",e=>{eventNoop(e),fileInput.click()})}const t=document.getElementById("file-label");t&&(t.classList.remove("hidden"),t.innerHTML="Choose files..."),uploadList&&uploadList.classList.remove("hidden"),cancelButton&&cancelButton.addEventListener("click",abort);const n=document.getElementById("upload-form");n&&n.addEventListener("submit",upload)}) \ No newline at end of file +function isWebPCompatible(){const e="UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA";return new Promise((t,n)=>{const s=new Image;s.onload=()=>{s.width>0&&s.height>0?t():n()},s.onerror=n.bind(null,!0),s.src=`data:image/webp;base64,${e}`})}function binaryToString(e){let t="";const n=e.byteLength;for(let s=0;s=400)throw new Error("unable to load thumbnails");for await(let i of readChunk(t)){const n=binaryToString(i),o=n.indexOf(",");if(o===-1){console.error("invalid line for thumbnail:",n);continue}const s=document.getElementById(`picture-${n.slice(0,o)}`);if(!s)continue;const e=new Image;e.src=`data:image/webp;base64,${btoa(n.slice(o+1))}`,e.alt=s.dataset.alt,e.dataset.src=s.dataset.src,e.classList.add("thumbnail","full","block"),replaceContent(s,e)}}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;if(typeof hasThumbnail=="undefined"||!hasThumbnail)return;let n=new Intl.DateTimeFormat(navigator.language,{dateStyle:"full",timeStyle:"long"});document.querySelectorAll(".date").forEach(e=>{e.innerHTML=n.format(new Date(e.innerHTML))});const t=document.querySelectorAll("[data-thumbnail]");if(!t)return;t.forEach(e=>{replaceContent(e,generateThrobber(["throbber-white"]))});try{await fetchThumbnail()}catch(e){console.error(e)}try{await isWebPCompatible()}catch{await resolveScript("https://unpkg.com/webp-hero@0.0.2/dist-cjs/webp-hero.bundle.js","sha512-DA6h9H5Sqn55/uVn4JI4aSPFnAWoCQYYDXUnvjOAMNVx11///hX4QaFbQt5yWsrIm9hSI5fLJYfRWt3KXneSXQ==","anonymous");const e=new webpHero.WebpMachine;e.polyfillDocument(),e.clearCache()}window.dispatchEvent(new Event("thumbnail-done"))},!1),window.addEventListener("thumbnail-done",()=>{if(typeof lazyLoadThumbnail=="undefined"||!lazyLoadThumbnail)return;const e=new IntersectionObserver(async(t)=>{for(const s of t){if(!s.isIntersecting)continue;const n=s.target;if(window.webpHero){const t=await fetch(n.dataset.src,{credentials:"same-origin"}),s=await t.arrayBuffer(),e=new webpHero.WebpMachine;n.src=await e.decode(new Uint8Array(s)),e.clearCache()}else n.src=n.dataset.src;e.unobserve(n)}});document.querySelectorAll("img.thumbnail").forEach(t=>e.observe(t))});async function fetchGeoJSON(e){const t=await fetch(e,{credentials:"same-origin"});if(t.status>=400)throw new Error("unable to load geojson");return t.status===204?null:t.json()}async function addStyle(e,t,n){return new Promise(s=>{const o=document.createElement("link");o.rel="stylesheet",o.href=e,o.onload=s,t&&(o.integrity=t,o.crossOrigin=n),document.querySelector("head").appendChild(o)})}async function loadLeaflet(){const e="1.9.2";await addStyle(`https://unpkg.com/leaflet@${e}/dist/leaflet.css`,"sha512-UkezATkM8unVC0R/Z9Kmq4gorjNoFwLMAWR/1yZpINW08I79jEKx/c8NlLSvvimcu7SL8pgeOnynxfRpe+5QpA==","anonymous"),await addStyle("https://unpkg.com/leaflet.markercluster@1.5.1/dist/MarkerCluster.Default.css","sha512-6ZCLMiYwTeli2rVh3XAPxy3YoR5fVxGdH/pz+KMCzRY2M65Emgkw00Yqmhh8qLGeYQ3LbVZGdmOX9KUjSKr0TA==","anonymous"),await resolveScript(`https://unpkg.com/leaflet@${e}/dist/leaflet.js`,"sha512-KMraOVM0qMVE0U1OULTpYO4gg5MZgazwPAPyMQWfOkEshpwlLQFCHZ/0lBXyviDNVL+pBGwmeXQnuvGK8Fscvg==","anonymous"),await resolveScript("https://unpkg.com/leaflet.markercluster@1.5.1/dist/leaflet.markercluster.js","sha512-+Zr0llcuE/Ho6wXRYtlWypMyWSEMxrWJxrYgeAMDRSf1FF46gQ3PAVOVp5RHdxdzikZXuHZ0soHpqRkkPkI3KA==","anonymous")}let map;async function renderMap(e){if(map){map.invalidateSize();return}const t=document.getElementById("map-container"),n=generateThrobber(["map-throbber","throbber-white"]);t&&t.appendChild(n),await loadLeaflet(),map=L.map("map-container",{center:[46.227638,2.213749],zoom:5}),L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{maxZoom:19,attribution:'© OpenStreetMap contributors'}).addTo(map);const s=await fetchGeoJSON(e);if(!s||!s.features)return;const o=L.markerClusterGroup({zoomToBoundsOnClick:!1}),i=[];s.features.map(e=>{const t=L.GeoJSON.coordsToLatLng(e.geometry.coordinates);i.push(t),o.addLayer(L.circleMarker(t).bindPopup(`Image thumbnail
${e.properties.date}`,{maxWidth:"auto",closeButton:!1,className:"thumbnail-popup"}))}),o.on("clusterclick",e=>{map.fitBounds(e.layer.getAllChildMarkers().map(e=>e.getLatLng()))}),i.length?(map.once("zoomend",()=>{t.removeChild(n)}),map.fitBounds(i)):t.removeChild(n),map.addLayer(o)}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;document.location.hash==="#map"?await renderMap(geoURL):window.addEventListener("popstate",async()=>{document.location.hash==="#map"&&await renderMap(geoURL)})});function resolveScript(e,t,n){return new Promise((s,o)=>{const i=document.createElement("script");i.type="text/javascript",i.src=e,i.async=!0,i.onload=s.bind(null,!0),i.onerror=o.bind(null,!0),t&&(i.integrity=t,i.crossOrigin=n),document.querySelector("head").appendChild(i)})}window.onkeyup=e=>{switch(e.key){case"ArrowLeft":goToPrevious();break;case"ArrowRight":goToNext();break;case"Escape":typeof abort=="function"?abort(e):goBack();break}};function replaceContent(e,t){for(;e.firstChild;)e.removeChild(e.firstChild);t&&e.appendChild(t)}function generateThrobber(e=[]){const t=document.createElement("div");t.classList.add("throbber"),e.forEach(e=>t.classList.add(e));for(let e=1;e<4;e++){const n=document.createElement("div");n.classList.add("throbber-dot",`throbber-dot-${e}`),t.appendChild(n)}return t}let fileInput,uploadList,cancelButton;function eventNoop(e){e.preventDefault(),e.stopPropagation()}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;const t=document.getElementsByTagName("body")[0];t.addEventListener("dragover",eventNoop),t.addEventListener("dragleave",eventNoop),t.addEventListener("drop",e=>{eventNoop(e),window.location.hash="#upload-modal",fileInput&&(fileInput.files=e.dataTransfer.files,fileInput.dispatchEvent(new Event("change")))})});function bufferToHex(e){return Array.prototype.map.call(new Uint8Array(e),e=>`00${e.toString(16)}`.slice(-2)).join("")}async function sha(e){const t=await crypto.subtle.digest("SHA-256",new TextEncoder("utf-8").encode(e));return bufferToHex(t)}async function fileMessageId(e){const t=await sha(JSON.stringify({name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}));return`upload-file-${t}`}function humanFileSize(e){return e<1024?e+"bytes":e<1048576?(e/1024).toFixed(0)+" KB":(e/1048576).toFixed(0)+" MB"}async function addUploadItem(e,t){const c=await fileMessageId(t),n=document.createElement("div");n.id=c,n.classList.add("flex","flex-center","margin");const o=document.createElement("div");o.classList.add("upload-item"),n.appendChild(o);const s=document.createElement("input");s.id=`${c}-filename`,s.classList.add("upload-name","full"),s.type="text",s.value=t.name,o.appendChild(s);const i=document.createElement("div");i.classList.add("full","flex","flex-center");const r=document.createElement("em");r.innerHTML=humanFileSize(t.size),r.style.width="8rem",i.appendChild(r);const a=document.createElement("progress");a.classList.add("flex-grow","margin-left"),a.max=100,a.value=0,i.appendChild(a),o.appendChild(i);const l=document.createElement("span");l.classList.add("upload-status"),n.appendChild(l),e.appendChild(n)}function getFiles(e){return[].filter.call(e.target,e=>e.nodeName.toLowerCase()==="input").reduce((e,t)=>(t.type==="file"?e.files=t.files:e[t.name]=t.value,e),{})}function getFilename(e,t){const n=document.getElementById(`${e}-filename`);return n&&n.value?n.value:t.name}function clearUploadStatus(e){if(!e)return;const t=e.querySelector(".upload-status");if(!t)return;t.classList.remove("danger"),t.classList.remove("success")}async function setUploadStatus(e,t,n,s){if(!e)return;const o=e.querySelector(".upload-status");if(!o)return;o.innerHTML=t,o.classList.add(n),s&&(o.title=s)}let aborter;const chunkSize=1024*1024;let currentUpload={};async function uploadFileByChunks(e,t,n,s){let i;if(e&&(i=e.querySelector("progress"),clearUploadStatus(e)),s.name!==currentUpload.filename){currentUpload.filename=s.name,currentUpload.chunks=[];for(let e=0;e=400)return Promise.reject(await a.text());currentUpload.chunks[e].done=!0,i&&(i.value=chunkSize*(e+1)/s.size*100)}const o=new FormData;o.append("method",t),o.append("filename",n),o.append("size",s.size);const a=await fetch("",{method:"POST",credentials:"same-origin",headers:{"X-Chunk-Upload":!0,Accept:"text/plain"},body:o}),r=await a.text();return a.status>=400?Promise.reject(r):(currentUpload={},Promise.resolve(r))}async function uploadFileByXHR(e,t,n,s){let o;e&&(o=e.querySelector("progress"),clearUploadStatus(e));const i=new FormData;return i.append("method",t),i.append("filename",n),i.append("size",s.size),i.append("file",s),new Promise((e,t)=>{let n=new XMLHttpRequest;aborter=n,o&&n.upload.addEventListener("progress",e=>o.value=parseInt(e.loaded/e.total*100,10),!1),n.addEventListener("readystatechange",s=>{n.readyState===XMLHttpRequest.DONE?n.status>=200&&n.status<400?(o&&(o.value=100),e(n.responseText),n=void 0):(t(s),n=void 0):n.readyState===XMLHttpRequest.UNSENT&&(t(new Error("request aborted")),n=void 0)},!1),n.open("POST","",!0),n.setRequestHeader("Accept","text/plain"),n.send(i)})}function sliceFileList(e,t){const n=document.getElementById(e),s=new DataTransfer;for(;t{if(e.target.readyState!=="complete")return;if(fileInput=document.getElementById("file"),uploadList=document.getElementById("upload-list"),cancelButton=document.getElementById("upload-cancel"),fileInput){fileInput.classList.add("opacity"),fileInput.multiple=!0,fileInput.addEventListener("change",()=>{window.location.hash="#upload-modal",replaceContent(uploadList);for(const e of fileInput.files)addUploadItem(uploadList,e)});const e=document.getElementById("upload-button-link");e&&e.addEventListener("click",e=>{eventNoop(e),fileInput.click()})}const t=document.getElementById("file-label");t&&(t.classList.remove("hidden"),t.innerHTML="Choose files..."),uploadList&&uploadList.classList.remove("hidden"),cancelButton&&cancelButton.addEventListener("click",abort);const n=document.getElementById("upload-form");n&&n.addEventListener("submit",upload)}) \ No newline at end of file diff --git a/pkg/thumbnail/thumbnail.go b/pkg/thumbnail/thumbnail.go index cc85d602..361325ce 100644 --- a/pkg/thumbnail/thumbnail.go +++ b/pkg/thumbnail/thumbnail.go @@ -3,7 +3,6 @@ package thumbnail import ( "bytes" "context" - "encoding/base64" "flag" "fmt" "io" @@ -235,7 +234,7 @@ func (a App) List(w http.ResponseWriter, r *http.Request, item absto.Item, items return } - w.Header().Add("Content-Type", "text/plain; charset=utf-8") + w.Header().Add("Content-Type", "application/octet-stream") w.Header().Add("Cache-Control", "no-cache") w.Header().Add("Etag", etag) w.WriteHeader(http.StatusOK) @@ -308,19 +307,13 @@ func (a App) encodeContent(ctx context.Context, w io.Writer, isDone func() bool, buffer := provider.BufferPool.Get().(*bytes.Buffer) defer provider.BufferPool.Put(buffer) - encoder := base64.NewEncoder(base64.StdEncoding, w) - - if _, err = io.CopyBuffer(encoder, reader, buffer.Bytes()); err != nil { + if _, err = io.CopyBuffer(w, reader, buffer.Bytes()); err != nil { if !absto.IsNotExist(a.storageApp.ConvertError(err)) { logEncodeContentError(item).Error("copy: %s", err) } } - if err := encoder.Close(); err != nil { - logger.Error("close thumbnail encoder: %s", err) - } - - provider.DoneWriter(isDone, w, "\n") + provider.DoneWriter(isDone, w, "\x1c\x17\x04") } func logEncodeContentError(item absto.Item) logger.Provider {