diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js index e5a0d029a..6dc47dca3 100644 --- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js @@ -10,11 +10,11 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import IconButton from 'flavours/glitch/components/icon_button'; import Button from 'flavours/glitch/components/button'; import Video from 'flavours/glitch/features/video'; -import { TesseractWorker } from 'tesseract.js'; import Textarea from 'react-textarea-autosize'; import UploadProgress from 'flavours/glitch/features/compose/components/upload_progress'; import CharacterCounter from 'flavours/glitch/features/compose/components/character_counter'; import { length } from 'stringz'; +import { Tesseract as fetchTesseract } from 'flavours/glitch/util/async-components'; const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, @@ -148,19 +148,21 @@ class FocalPointModal extends ImmutablePureComponent { handleTextDetection = () => { const { media } = this.props; - const worker = new TesseractWorker({ - workerPath: `${assetHost}/packs/ocr/worker.min.js`, - corePath: `${assetHost}/packs/ocr/tesseract-core.wasm.js`, - langPath: `${assetHost}/ocr/lang-data`, - }); - this.setState({ detecting: true }); - worker.recognize(media.get('url')) - .progress(({ progress }) => this.setState({ progress })) - .finally(() => worker.terminate()) - .then(({ text }) => this.setState({ description: removeExtraLineBreaks(text), dirty: true, detecting: false })) - .catch(() => this.setState({ detecting: false })); + fetchTesseract().then(({ TesseractWorker }) => { + const worker = new TesseractWorker({ + workerPath: `${assetHost}/packs/ocr/worker.min.js`, + corePath: `${assetHost}/packs/ocr/tesseract-core.wasm.js`, + langPath: `${assetHost}/ocr/lang-data`, + }); + + worker.recognize(media.get('url')) + .progress(({ progress }) => this.setState({ progress })) + .finally(() => worker.terminate()) + .then(({ text }) => this.setState({ description: removeExtraLineBreaks(text), dirty: true, detecting: false })) + .catch(() => this.setState({ detecting: false })); + }).catch(() => this.setState({ detecting: false })); } render () { diff --git a/app/javascript/flavours/glitch/util/async-components.js b/app/javascript/flavours/glitch/util/async-components.js index f2aeda834..8f2e4c6e4 100644 --- a/app/javascript/flavours/glitch/util/async-components.js +++ b/app/javascript/flavours/glitch/util/async-components.js @@ -153,3 +153,7 @@ export function ListAdder () { export function Search () { return import(/*webpackChunkName: "features/glitch/async/search" */'flavours/glitch/features/search'); } + +export function Tesseract () { + return import(/*webpackChunkName: "tesseract" */'tesseract.js'); +}