attachmentImage should be dumber

Yet, ServiceWorker a little smarter
This commit is contained in:
Timothy Farrell 2017-12-28 19:38:54 -06:00
parent 5f640981ae
commit 83b458bb41
3 changed files with 46 additions and 52 deletions

View File

@ -35,7 +35,8 @@ export function AlbumPhotoTemplate(vm, { doc }) {
_data: doc _data: doc
}, },
[ [
AttachmentImageView(doc, { AttachmentImageView({
src: doc.sizes.thumbnail || doc.sizes.full,
css: { css: {
transform: isSelected ? 'translateZ(-50px)' : null transform: isSelected ? 'translateZ(-50px)' : null
} }

View File

@ -9,46 +9,35 @@ import { DEFAULT_TRANSITION } from '../styles.js';
const srcMap = new Map(); const srcMap = new Map();
async function loadImageFromBlob(doc, evt, node, vm) { async function loadImageFromBlob(srcUrl, evt, node, vm) {
const { sizes, _id } = doc; try {
const options = ['thumbnail', 'preview', 'full'].filter(o => sizes.hasOwnProperty(o)); const src = URL.createObjectURL(await FileType.getFromURL(srcUrl));
node.patch({ src });
for (let attempt of options) { srcMap.set(srcUrl, src);
try { } catch (e) {
const data = await FileType.getFromURL(sizes[attempt]); // src is not a saved file source
let src = evt.target.src;
if (src.startsWith('blob:')) {
URL.revokeObjectURL(src);
}
src = URL.createObjectURL(data);
node.patch({ src });
srcMap.set(_id, src);
// node.data = attempt;
break;
} catch (err) {
continue;
}
} }
} }
function cleanup(node) { function cleanup(node) {
const src = node.el.src; const { src } = node.el;
if (src.startsWith('blob:')) { if (src.startsWith('blob:') && srcMap.has(node.key)) {
URL.revokeObjectURL(src); URL.revokeObjectURL(src);
srcMap.delete(node.key); srcMap.delete(node.key);
} }
} }
export function AttachmentImageView(doc, props) { export function AttachmentImageView(props) {
const { sizes, _id } = doc; const { src } = props;
const src = srcMap.get(_id) || sizes.thumbnail || sizes.preview || sizes.full; const cachedSrc = srcMap.get(src);
const _src = cachedSrc || src;
delete props.src;
return image( return image(
Object.assign( Object.assign(
{ {
src, src: _src,
onerror: [loadImageFromBlob, doc], onerror: !cachedSrc ? [loadImageFromBlob, _src] : null,
_key: _id,
_hooks: { _hooks: {
willRemove: cleanup willRemove: cleanup
} }

View File

@ -1,4 +1,14 @@
import { FileType } from './data/file.js'; import { FileType } from './data/file.js';
import { log } from './services/console.js';
const http404 = url => () => {
log(`ServiceWorker could not find ${url}`);
return new Response(null, {
status: 404,
statusText: 'NOT FOUND',
headers: {}
});
};
self.addEventListener('fetch', event => { self.addEventListener('fetch', event => {
const requestUrl = new URL(event.request.url); const requestUrl = new URL(event.request.url);
@ -6,30 +16,24 @@ self.addEventListener('fetch', event => {
if (requestUrl.pathname && requestUrl.pathname.startsWith('/file/')) { if (requestUrl.pathname && requestUrl.pathname.startsWith('/file/')) {
event.respondWith( event.respondWith(
FileType.getFromURL(requestUrl.pathname) FileType.getFromURL(requestUrl.pathname)
.then( .then(data => {
data => if (data) {
data log(
? new Response(data, { `ServiceWorker serving ${requestUrl.pathname} ${data.type} ${(data.size / 1024).toFixed(
status: 200, 2
statusText: 'OK', )}kb`
headers: { );
'Content-Type': data.mimetype return new Response(data, {
} status: 200,
}) statusText: 'OK',
: new Response(null, { headers: {
status: 404, 'Content-Type': data.type
statusText: 'NOT FOUND', }
headers: {} });
}) }
) return http404(requestUrl.pathname)();
.catch( })
() => .catch(http404(requestUrl.pathname))
new Response(null, {
status: 404,
statusText: 'NOT FOUND',
headers: {}
})
)
); );
} }
}); });