From fcb67b15179ed9e36e2dda32f4c94246491678df Mon Sep 17 00:00:00 2001 From: Ingvar Stepanyan Date: Fri, 23 Jul 2021 17:22:29 +0000 Subject: [PATCH] Gracefully handle unsupported preview operation --- ui/preview.js | 54 +++++++++++++++++++++++++++++---------------------- 1 file changed, 31 insertions(+), 23 deletions(-) diff --git a/ui/preview.js b/ui/preview.js index 6b46737..7e7f21e 100644 --- a/ui/preview.js +++ b/ui/preview.js @@ -8,7 +8,7 @@ const Stats = isDebug ) : null; -/** @extends Component<{ getPreview: () => Promise }, null> */ +/** @extends Component<{ getPreview: () => Promise }, { error?: string }> */ export class Preview extends Component { canvasHolderRef = createRef(); canvasRef = createRef(); @@ -20,7 +20,13 @@ export class Preview extends Component { return h( 'div', { class: 'center-parent', ref: this.canvasHolderRef }, - h('canvas', { class: 'center', ref: this.canvasRef }) + this.state.error + ? h( + 'div', + { class: 'center' }, + `Could not retrieve preview: ${this.state.error}` + ) + : h('canvas', { class: 'center', ref: this.canvasRef }) ); } @@ -64,30 +70,32 @@ export class Preview extends Component { await new Promise(resolve => setTimeout(resolve, 1000)); while (this.canvasRef.current) { + let blob; try { - let blob = await this.props.getPreview(); - - // If ratio is known; decode resized image right away - it's a bit faster. - // If it isn't known, retrieve entire image to calculate ratio from its dimensions. - let img = await createImageBitmap( - blob, - ratio - ? { - resizeWidth: canvas.width, - resizeHeight: canvas.height - } - : {} - ); - if (!ratio) { - ratio = img.width / img.height; - updateCanvasSize(); - } - canvasCtx.transferFromImageBitmap(img); - this.stats?.update(); - } catch (e) { - console.warn(e); + blob = await this.props.getPreview(); + } catch (error) { + this.setState({ error: error.message }); + return; } + + // If ratio is known; decode resized image right away - it's a bit faster. + // If it isn't known, retrieve entire image to calculate ratio from its dimensions. + let img = await createImageBitmap( + blob, + ratio + ? { + resizeWidth: canvas.width, + resizeHeight: canvas.height + } + : {} + ); + if (!ratio) { + ratio = img.width / img.height; + updateCanvasSize(); + } + canvasCtx.transferFromImageBitmap(img); await new Promise(resolve => requestAnimationFrame(resolve)); + this.stats?.update(); } }