\n
\n
{\n e.stopPropagation();\n }\n })} className={classNames('wrapper', 'dragAndDropActionArea', {'fileIsHover': isDragActive})}>\n
\n
\n
\n
\n
\n
Try a different image
\n
\n
\n
\n
\n
\n\n
\n {errorMessage &&\n \n {errorMessage}\n
Make sure to include the request ID when reporting a problem: {requestId} \n
\n
\n {s =>\n \n
\n
\n }\n \n {settings.preview && previewImage &&\n
\n }\n
\n
\n \n
\n
\n\n \n
r.sku}\n start={(r, i) => ({opacity: 0, translateX: -100})}\n enter={(r, i) => ({\n opacity: [1],\n translateX: [0],\n timing: {delay: i * 100, duration: 300}\n })}\n >\n {rs => <>{rs.map(({key, data, state}) => \n\n {results.length === 0 && showPart === 'results' && !loading && (\n\n
We did not find anything 😕
\n )}\n\n
\n\n {duration && showPart === 'results' && (
Search\n took {duration.toFixed(2)} seconds
)}\n\n {requestId && showPart === 'results' &&
Request\n identifier {requestId}
}\n
setToastOpen(false)}>\n setToastOpen(false)} severity=\"error\">\n {toastErrorMessage}\n \n \n\n \n \n © 2017 - 2019
nyris GmbH - All rights reserved -
Imprint\n \n \n \n {'Powered by '}\n \n );\n}\n\n\nconst AppMD: React.FC = ({settings, handlers, showPart, previewImage, loading, search: {results, regions, previewSelection, requestId, duration}, mdSettings}) => {\n const classes = useStyles();\n const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop: (fs: File[]) => handlers.onFileDropped(fs[0])});\n\n const minPreviewHeight = 400;\n const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);\n const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);\n const acceptTypes =\n [ 'image/*' ].concat(\n settings.cadSearch ? cadExtensions : []\n ).join(',');\n\n return (\n \n {mdSettings.resultLinkIcon && \n\n \n \n \n { mdSettings.appBarTitle }\n \n \n \n \n\n \n \n \n \n
\n \n \n Take\n a\n picture \n
\n \n \n or\n \n
\n \n \n \n Select a file\n \n \n
\n \n
\n { e.stopPropagation() }}) }>\n
\n
\n
\n \n DROP AN IMAGE\n \n
\n
\n \n or\n \n
\n
\n \n \n Select an image\n \n \n
\n
\n
\n \n
\n\n { previewImage &&\n \n \n \n }\n\n {loading && \n \n
}\n\n \n r.position + r.sku}\n start={(r, i) => ({opacity: 0, translateX: -100})}\n enter={(r, i) => ({\n opacity: [1],\n translateX: [0],\n timing: {delay: i * 100, duration: 300}\n })}>\n {rs =>\n <>\n {rs.map(({key, data: result, state}) =>\n \n \n \n \n {result[mdSettings.resultFirstRowProperty]}\n \n \n {result[mdSettings.resultSecondRowProperty]}\n \n \n {result.l &&\n \n handlers.onLinkClick(result.position, result.l)}\n onAuxClick={() => handlers.onLinkClick(result.position, result.l)} >\n { mdSettings.resultLinkIcon && \n { mdSettings.resultLinkIcon } \n {' '}\n }\n {mdSettings.resultLinkText}\n \n \n }\n \n \n )}\n \n }\n\n \n\n \n\n {results.length === 0 && showPart === 'results' && !loading && (\n We did not find anything \n )}\n\n\n \n {showPart !== 'start' &&\n
\n \n \n }\n\n \n\n
\n \n );\n};\n\nexport default AppMD;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\ntype Config = {\n onSuccess?: (registration: ServiceWorkerRegistration) => void;\n onUpdate?: (registration: ServiceWorkerRegistration) => void;\n};\n\nexport function register(config?: Config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(\n (process as { env: { [key: string]: string } }).env.PUBLIC_URL,\n window.location.href\n );\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl: string, config?: Config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import {CanvasWithId} from \"../types\";\nimport {Code, RectCoords, Region, selectFirstCenteredRegion} from '@nyris/nyris-api';\n\nexport type ImageSourceType =\n | { url: string }\n | { file: File }\n | { image: HTMLCanvasElement }\n\nexport type SearchAction =\n | { type: 'FEEDBACK_SUBMIT_POSITIVE' }\n | { type: 'FEEDBACK_SUBMIT_NEGATIVE' }\n | { type: 'IMAGE_LOADED', image: CanvasWithId }\n | { type: 'REGION_REQUEST_START', image: HTMLCanvasElement }\n | { type: 'REGION_REQUEST_SUCCEED', regions: Region[] }\n | { type: 'REGION_REQUEST_FAIL', reason: string, exception: any }\n | { type: 'SEARCH_REQUEST_START', image: HTMLCanvasElement, normalizedRect?: RectCoords }\n | { type: 'SEARCH_REQUEST_START', file: File }\n | { type: 'SEARCH_REQUEST_SUCCEED', results: any[], requestId: string, duration: number, categoryPredictions: CategoryPrediction[], codes: Code[] }\n | { type: 'SEARCH_REQUEST_FAIL', reason: string, exception?: any }\n | { type: 'REGION_CHANGED', normalizedRect: RectCoords}\n | { type: 'LOAD_IMAGE'} & ImageSourceType\n | { type: 'LOAD_FILE', file: File}\n | { type: 'CAD_LOADED', file: File}\n\ninterface CategoryPrediction {\n name: string,\n score: number\n}\n\nexport interface SearchState {\n results: any[]\n duration?: number\n requestId?: string\n sessionId?: string\n regions: Region[]\n selectedRegion: RectCoords\n fetchingRegions: boolean\n fetchingResults: boolean\n filterOptions: string[]\n requestImage?: CanvasWithId\n requestCadFile?: File\n categoryPredictions: CategoryPrediction[]\n codes: Code[],\n errorMessage: string\n}\n\nconst initialState : SearchState = {\n results: [],\n regions: [],\n selectedRegion: {x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9},\n requestImage: undefined,\n fetchingResults: false,\n fetchingRegions: false,\n filterOptions: [],\n categoryPredictions: [],\n codes: [],\n errorMessage: ''\n};\n\n\nexport const loadFile = (file: File ): SearchAction => ({ type: 'LOAD_FILE', file });\nexport const loadUrl = (url: string): SearchAction => ({ type: 'LOAD_IMAGE', url });\nexport const loadCanvas = (image: HTMLCanvasElement): SearchAction => ({ type: 'LOAD_IMAGE', image });\nexport const imageLoaded = (image: HTMLCanvasElement, id: string): SearchAction => ({ type: 'IMAGE_LOADED', image: {canvas: image, id: id} });\nexport const cadFileLoaded = (file: File, id: string): SearchAction => ({ type: 'CAD_LOADED', file});\nexport const selectionChanged = (normalizedRect: RectCoords) : SearchAction => ({ type: 'REGION_CHANGED', normalizedRect });\nexport const searchRegions = (image: HTMLCanvasElement): SearchAction => ({ type: 'REGION_REQUEST_START', image });\nexport const searchOffersForImage = (image: HTMLCanvasElement, normalizedRect?: RectCoords) : SearchAction => ({\n type: 'SEARCH_REQUEST_START',\n image,\n normalizedRect\n});\nexport const searchOffersForCad = (file: File) : SearchAction => ({\n type: 'SEARCH_REQUEST_START',\n file\n});\nexport const submitPositiveFeedback = () : SearchAction => ({ type: 'FEEDBACK_SUBMIT_POSITIVE'});\nexport const submitNegativeFeedback = () : SearchAction => ({ type: 'FEEDBACK_SUBMIT_NEGATIVE'});\n\nexport const reducer = (state : SearchState = initialState, action: SearchAction) => {\n switch (action.type) {\n case \"IMAGE_LOADED\":\n let { image } = action;\n console.log('image', image)\n return {\n ...initialState,\n requestImage: image\n };\n case \"CAD_LOADED\":\n let { file } = action;\n return {\n ...initialState,\n requestCadFile: file\n }\n case 'REGION_REQUEST_START':\n return {\n ...state,\n fetchingRegions: true\n };\n case \"REGION_REQUEST_SUCCEED\":\n return {\n ...state,\n fetchingRegions: false,\n regions: action.regions,\n selectedRegion: selectFirstCenteredRegion(action.regions, 0.3, state.selectedRegion)\n };\n case \"REGION_REQUEST_FAIL\":\n return {\n ...state,\n fetchingRegions: false,\n errorMessage: action.exception.response.data.detail\n };\n case \"SEARCH_REQUEST_START\":\n return {\n ...state,\n fetchingResults: true\n };\n case \"SEARCH_REQUEST_SUCCEED\":\n let { results, requestId, duration, categoryPredictions, codes } = action;\n return {\n ...state,\n results,\n requestId,\n fetchingResults: false,\n sessionId: state.sessionId || requestId,\n categoryPredictions,\n codes,\n duration\n };\n case \"SEARCH_REQUEST_FAIL\":\n return {\n ...state,\n fetchingResults: false,\n errorMessage: action.reason\n };\n case \"REGION_CHANGED\":\n return {\n ...state,\n selectedRegion: action.normalizedRect\n }\n }\n return state;\n};\n","import {AppAction} from \"../types\";\n\n\nexport type NyrisAppPart = 'start' | 'camera' | 'results';\nexport type NyrisFeedbackState = 'hidden' | 'question' | 'positive' | 'negative';\n\n\nexport interface NyrisAppState {\n showPart: NyrisAppPart,\n feedbackState: NyrisFeedbackState\n}\n\nexport type NyrisAction =\n | { type: 'SHOW_START' }\n | { type: 'SHOW_CAMERA' }\n | { type: 'SHOW_RESULTS' }\n | { type: 'SHOW_FEEDBACK' }\n | { type: 'HIDE_FEEDBACK' }\n | { type: 'RESULT_LINK_CLICKED', position: number, url: string}\n | { type: 'RESULT_IMAGE_CLICKED', position: number, url: string}\n\n\nexport const showCamera = () :NyrisAction => ({type: 'SHOW_CAMERA'});\nexport const showStart = () :NyrisAction => ({type: 'SHOW_START'});\nexport const showResults = () :NyrisAction => ({type: 'SHOW_RESULTS'});\nexport const showFeedback = () :NyrisAction => ({type: 'SHOW_FEEDBACK'});\nexport const hideFeedback = () :NyrisAction => ({type: 'HIDE_FEEDBACK'});\n\nconst initialNyrisState : NyrisAppState = {\n showPart: 'start',\n feedbackState: 'hidden'\n};\n\nexport function reducer(state : NyrisAppState = initialNyrisState, action: AppAction) : NyrisAppState {\n switch (action.type) {\n case 'SHOW_START':\n return {\n ...state,\n showPart: 'start'\n };\n case 'SHOW_CAMERA':\n return {\n ...state,\n showPart: 'camera'\n };\n case 'SEARCH_REQUEST_START':\n case 'REGION_REQUEST_START':\n case 'SHOW_RESULTS':\n return {\n ...state,\n showPart: 'results'\n };\n case 'SHOW_FEEDBACK':\n return {\n ...state,\n feedbackState: 'question'\n };\n case 'HIDE_FEEDBACK':\n return {\n ...state,\n feedbackState: 'hidden'\n };\n case 'FEEDBACK_SUBMIT_POSITIVE':\n return {\n ...state,\n feedbackState: 'positive'\n };\n case 'FEEDBACK_SUBMIT_NEGATIVE':\n return {\n ...state,\n feedbackState: 'negative'\n };\n default:\n return state;\n }\n}\n","import {WH} from \"@nyris/nyris-api\";\n\n/**\n * Gets url parameter values by name.\n * @param name The parameter name.\n * @returns string value if it has value assigned with `=`, true if it is specified but without value or `undefined` if not present\n */\nexport function getUrlParam(name: string): string | boolean | undefined {\n let results = new RegExp(`[?&]${name}(=([^&#]*))?(&|$|#)`, 'i')\n .exec(window.location.href);\n if (results && results[2]) { // has value\n console.log('has value', name, results[2]);\n return decodeURIComponent(results[2]);\n }\n return (results && true) // present but without value\n || undefined; // not present\n}\n\nexport function getThumbSizeLongestEdge(maxW: number, maxH: number, iW: number, iH: number): WH {\n let iR = iW / iH;\n let dR = maxW / maxH;\n if (dR > iR) {\n return {\n w: iW * maxH / iH,\n h: maxH\n }\n }\n return {\n w: maxW,\n h: iH * maxW / iW\n }\n}\n\n","import {AppSettings} from \"./types\";\n\nexport const defaultSettings : AppSettings = {\n\n xOptions: false,\n apiKey: 'UNSET',\n exampleImages: [],\n preview: true,\n regions: false,\n maxWidth: 500,\n maxHeight: 500,\n jpegQuality: 0.92,\n baseUrl: 'https://api.nyris.io',\n instantRedirectPatterns: [\n '^https?://(www.)?youtube.com/',\n '^https?://(www.)?youtu.be/',\n '^https?://(www.)?vimeo.com/',\n '^https?://(www.)?dailymotion.com/',\n '^https?://(www.)?dai.ly/'\n ]\n};\n\nexport const defaultMdSettings = {\n appBarLogoUrl: 'images/nyris-logo.svg',\n appBarCustomBackgroundColor: '#f4f4f4',\n appBarCustomTextColor: '#ccc',\n appBarTitle: '',\n primaryColor: '#e2001a',\n secondaryColor: '#777777',\n\n resultFirstRowProperty: 'title',\n resultSecondRowProperty: 'sku',\n resultLinkText: 'Info',\n\n customFontFamily: 'Helvetica',\n};\n","import {combineEpics, ofType} from \"redux-observable\";\nimport {debounceTime, ignoreElements, tap, withLatestFrom} from \"rxjs/operators\";\nimport {EpicConf} from \"./types\";\n\nconst feedbackSuccessEpic: EpicConf = (action$, state$, {api}) => action$.pipe(\n ofType('FEEDBACK_SUBMIT_POSITIVE', \"FEEDBACK_SUBMIT_NEGATIVE\"),\n withLatestFrom(state$),\n tap(async ([{type}, state]) => {\n const success = type === 'FEEDBACK_SUBMIT_POSITIVE';\n const sessionId = state.search.sessionId || state.search.requestId;\n if (sessionId && state.search.requestId) {\n await api.sendFeedback(sessionId, state.search.requestId, {\n event: 'feedback', data: {success}\n });\n }\n }),\n ignoreElements()\n);\n\nconst feedbackRegionEpic: EpicConf = (action$, state$, {api}) => action$.pipe(\n ofType('REGION_CHANGED'),\n debounceTime(1200),\n withLatestFrom(state$),\n tap(async ([action, state]) => {\n if (action.type === 'REGION_CHANGED') {\n let {normalizedRect: {x1, x2, y1, y2}} = action;\n const sessionId = state.search.sessionId || state.search.requestId;\n if (sessionId && state.search.requestId) {\n await api.sendFeedback(sessionId, state.search.requestId, {\n event: 'region', data: {rect: {x: x1, y: y1, w: x2 - x1, h: y2 - y1}}\n });\n }\n }\n }),\n ignoreElements()\n);\n\nconst feedbackClickEpic: EpicConf = (action$, state$, {api}) => action$.pipe(\n ofType('RESULT_LINK_CLICKED', 'RESULT_IMAGE_CLICKED'),\n withLatestFrom(state$),\n tap(async ([action, state]) => {\n if (action.type === 'RESULT_LINK_CLICKED' || action.type === 'RESULT_IMAGE_CLICKED') {\n let {position} = action;\n const sessionId = state.search.sessionId || state.search.requestId;\n if (sessionId && state.search.requestId) {\n await api.sendFeedback(sessionId, state.search.requestId, {\n event: 'click', data: {positions: [position]}\n });\n }\n }\n }),\n ignoreElements()\n);\n\nexport default combineEpics(\n feedbackSuccessEpic,\n feedbackRegionEpic,\n feedbackClickEpic\n);\n","import {EpicConf} from \"./types\";\nimport {combineEpics, ofType} from \"redux-observable\";\nimport {switchMap, withLatestFrom} from \"rxjs/operators\";\nimport {AppAction} from \"../types\";\nimport {ImageSearchOptions, urlOrBlobToCanvas, isCadFile, isImageFile} from \"@nyris/nyris-api\";\nimport {imageLoaded, cadFileLoaded} from \"../actions/searchActions\";\n\nconst imageSearch: EpicConf = (action$, state$, {api}) => action$.pipe(\n ofType('SEARCH_REQUEST_START'),\n withLatestFrom(state$),\n switchMap(async ([action, {settings}]) : Promise
=> {\n if (action.type !== 'SEARCH_REQUEST_START') {\n throw new Error(`Wrong action type ${action.type}`);\n }\n\n if ('image' in action) {\n let { image, normalizedRect} = action;\n\n let options : ImageSearchOptions = {\n cropRect: normalizedRect\n };\n\n try {\n const {results, duration, requestId, categoryPredictions, codes} = await api.findByImage(image, options);\n return ({ type: 'SEARCH_REQUEST_SUCCEED', results, requestId, duration, categoryPredictions, codes });\n } catch (e) {\n console.warn('search failed', e);\n return ({ type: 'SEARCH_REQUEST_FAIL', reason: e.message, exception: e });\n }\n }\n\n if ('file' in action) {\n let { file } = action;\n\n let options : ImageSearchOptions = { };\n\n try {\n const {results, duration, requestId, categoryPredictions, codes} = await api.findByCad(file, options);\n return ({ type: 'SEARCH_REQUEST_SUCCEED', results, requestId, duration, categoryPredictions, codes });\n } catch (e) {\n console.warn('search failed', e);\n return ({ type: 'SEARCH_REQUEST_FAIL', reason: e.message, exception: e });\n }\n }\n throw new Error(`Wrong action content ${action}`);\n })\n);\n\nconst regionSearch: EpicConf = (action$, state$, {api}) => action$.pipe(\n ofType('REGION_REQUEST_START'),\n withLatestFrom(state$),\n switchMap(async ([action, {settings}]) : Promise => {\n if (action.type !== 'REGION_REQUEST_START') {\n throw new Error(`Wrong action type ${action.type}`);\n }\n\n let { image } = action;\n\n try {\n let regions = await api.findRegions(image);\n return {type: 'REGION_REQUEST_SUCCEED', regions };\n\n } catch (e) {\n console.error(e);\n return {type: 'REGION_REQUEST_FAIL', reason: e.message, exception: e};\n }\n })\n);\n\nconst loadFile: EpicConf = (action$) => action$.pipe(\n ofType('LOAD_FILE'),\n switchMap(async (action) : Promise => {\n if (action.type !== 'LOAD_FILE') {\n throw new Error(`Wrong action type ${action.type}`);\n }\n const randomId = Math.random().toString();\n if ('file' in action) {\n const file = action.file;\n if (isImageFile(file)) {\n return imageLoaded(await urlOrBlobToCanvas(file), randomId);\n }\n if (isCadFile(file)) {\n return cadFileLoaded(file, randomId);\n }\n }\n throw new Error(`LOAD_FILE action wrong properties ${Object.keys(action).join(',')}`);\n })\n);\n\nconst loadImage: EpicConf = (action$) => action$.pipe(\n ofType('LOAD_IMAGE'),\n switchMap(async (action) : Promise => {\n if (action.type !== 'LOAD_IMAGE') {\n throw new Error(`Wrong action type ${action.type}`);\n }\n const randomId = Math.random().toString();\n if ('url' in action) {\n return imageLoaded(await urlOrBlobToCanvas(action.url), randomId);\n }\n if ('file' in action) {\n return imageLoaded(await urlOrBlobToCanvas(action.file), randomId);\n }\n if ('image' in action) {\n return imageLoaded(action.image, randomId);\n }\n throw new Error(`LOAD_IMAGE action wrong properties ${Object.keys(action).join(',')}`);\n })\n);\n\nexport default combineEpics(\n imageSearch,\n regionSearch,\n loadFile,\n loadImage);\n","import {combineEpics, ofType} from \"redux-observable\";\nimport {debounceTime, delay, ignoreElements, map, switchMap, tap, withLatestFrom} from \"rxjs/operators\";\nimport {showFeedback, showResults} from \"../actions/nyrisAppActions\";\nimport {EpicConf} from \"./types\";\nimport feedbackEpics from \"./feedback\";\nimport searchEpics from \"./search\";\nimport {searchOffersForImage, searchOffersForCad, searchRegions} from \"../actions/searchActions\";\nimport {AppAction} from \"../types\";\nimport {selectFirstCenteredRegion} from \"@nyris/nyris-api\";\n\n\n\nconst historyEpic: EpicConf = (action$, state$, {history}) => action$.pipe(\n ofType('SHOW_RESULTS', 'SHOW_START'),\n tap((action) => {\n let { type } = action;\n if (type === 'SHOW_RESULTS' && history.location.pathname !== '/results') {\n history.push('/results');\n }\n if (type === 'SHOW_START' && history.location.pathname !== '/') {\n history.goBack();\n }\n }),\n ignoreElements()\n);\n\nconst onSearchSuccessShowResults: EpicConf = (action$) => action$.pipe(\n ofType('SEARCH_REQUEST_SUCCEED'),\n map(showResults)\n);\n\nconst onSearchSuccessRedirectToSite: EpicConf = (action$, state$) => action$.pipe(\n ofType('SEARCH_REQUEST_SUCCEED'),\n withLatestFrom(state$),\n tap(([action, {settings}]) => {\n if (action.type !== 'SEARCH_REQUEST_SUCCEED' || !action.results || action.results.length !== 1) {\n return;\n }\n\n const firstLink = action.results[0].l;\n const instantRedirectPatterns = settings.instantRedirectPatterns;\n if (!instantRedirectPatterns.find(r => new RegExp(r).test(firstLink))) {\n return;\n }\n window.location.href = firstLink;\n }),\n ignoreElements()\n);\n\nconst onSearchSuccessShowFeedbackDelayed: EpicConf = (action$) => action$.pipe(\n ofType('SEARCH_REQUEST_SUCCEED'),\n delay(3000),\n map(showFeedback)\n);\n\n\nconst startSearchOnImageLoaded: EpicConf = (action$, state$) => action$.pipe(\n ofType('IMAGE_LOADED'),\n withLatestFrom(state$),\n switchMap(async ([action, {settings}]) : Promise => {\n if (action.type !== 'IMAGE_LOADED') {\n throw new Error(`Wrong action type ${action.type}`);\n }\n\n let { image } = action;\n\n if (settings.regions) {\n return searchRegions(image.canvas);\n }\n return searchOffersForImage(image.canvas);\n })\n);\n\nconst startSearchOnCadLoaded: EpicConf = (action$, state$) => action$.pipe(\n ofType('CAD_LOADED'),\n withLatestFrom(state$),\n switchMap(async ([action, {settings}]) : Promise => {\n if (action.type !== 'CAD_LOADED') {\n throw new Error(`Wrong action type ${action.type}`);\n }\n let { file } = action;\n return searchOffersForCad(file);\n })\n);\n\nconst startSearchOnRegionsSuccessful: EpicConf = (action$, state$) => action$.pipe(\n ofType('REGION_REQUEST_SUCCEED'),\n withLatestFrom(state$),\n switchMap(async ([action, { search: { requestImage}}]) : Promise => {\n if (action.type !== 'REGION_REQUEST_SUCCEED') {\n throw new Error(`Wrong action type ${action.type}`);\n }\n if (!requestImage) {\n throw new Error(`No requestImage`);\n }\n let { regions } = action;\n\n let selection = selectFirstCenteredRegion(regions, 0.3, {x1: 0, x2: 1, y1: 0, y2: 1});\n return searchOffersForImage(requestImage.canvas, selection);\n })\n);\n\nconst startSearchOnRegionsFailed: EpicConf = (action$, state$) => action$.pipe(\n ofType('REGION_REQUEST_FAIL'),\n withLatestFrom(state$),\n switchMap(async ([action, { search: { requestImage}}]) : Promise => {\n if (action.type !== 'REGION_REQUEST_FAIL') {\n throw new Error(`Wrong action type ${action.type}`);\n }\n if (!requestImage) {\n throw new Error(`No requestImage`);\n }\n\n return searchOffersForImage(requestImage.canvas);\n })\n);\n\nconst startSearchOnRegionChange: EpicConf = (action$, state$) => action$.pipe(\n ofType('REGION_CHANGED'),\n debounceTime(1200),\n withLatestFrom(state$),\n switchMap(async ([action, { search: { requestImage}}]) : Promise => {\n if (action.type !== 'REGION_CHANGED') {\n throw new Error(`Wrong action type ${action.type}`);\n }\n if (!requestImage) {\n throw new Error(`No requestImage`);\n }\n let { normalizedRect } = action;\n return searchOffersForImage(requestImage.canvas, normalizedRect);\n })\n);\n\n\nconst rootEpic = combineEpics(\n searchEpics,\n feedbackEpics,\n historyEpic,\n startSearchOnImageLoaded,\n startSearchOnCadLoaded,\n startSearchOnRegionsSuccessful,\n startSearchOnRegionsFailed,\n startSearchOnRegionChange,\n onSearchSuccessShowResults,\n onSearchSuccessShowFeedbackDelayed,\n onSearchSuccessRedirectToSite\n);\n\nexport default rootEpic;\n","// Some people are still using internet explorer\nimport 'react-app-polyfill/ie11';\nimport 'react-app-polyfill/stable';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport AppMD from './AppMD';\nimport * as serviceWorker from './serviceWorker';\n\nimport {connect, Provider} from 'react-redux';\nimport {applyMiddleware, bindActionCreators, combineReducers, createStore, Dispatch} from 'redux';\nimport {\n loadCanvas,\n loadFile,\n loadUrl,\n reducer as searchReducer,\n selectionChanged, submitNegativeFeedback, submitPositiveFeedback\n} from './actions/searchActions';\nimport {\n hideFeedback,\n reducer as nyrisReducer,\n showCamera,\n showStart\n} from './actions/nyrisAppActions';\nimport { getUrlParam } from \"./utils\";\nimport {composeWithDevTools} from \"redux-devtools-extension\";\nimport {AppAction, AppSettings, AppState, MDSettings} from \"./types\";\nimport {createEpicMiddleware} from \"redux-observable\";\nimport NyrisAPI from \"@nyris/nyris-api\";\nimport {createMuiTheme, MuiThemeProvider} from \"@material-ui/core\";\nimport 'typeface-roboto';\nimport {defaultMdSettings, defaultSettings} from \"./defaults\";\nimport rootEpic from \"./epics\";\nimport { createHashHistory } from 'history';\n\n\ndeclare var settings: AppSettings;\n\n\nfunction scrollTop() {\n // TODO might require polyfill for ios and edge\n window.scrollTo({top: 0, left: 0, behavior: \"smooth\"});\n}\n\n\n\nlet normalizedSettings : AppSettings = {\n ...defaultSettings,\n ...settings,\n};\n\nnormalizedSettings = {\n ...normalizedSettings,\n apiKey: getUrlParam('apiKey') as string || normalizedSettings.apiKey,\n xOptions: getUrlParam('xOptions') as string || normalizedSettings.xOptions,\n regions: getUrlParam('use.regions') as boolean || normalizedSettings.regions,\n preview: getUrlParam('use.preview') as boolean || normalizedSettings.preview,\n\n};\n\ndocument.title = window.location.host;\n\nconst api = new NyrisAPI(normalizedSettings);\nconst history = createHashHistory();\n\nconst epicMiddleware = createEpicMiddleware({\n dependencies: {api, history}\n});\n\nconst rootReducer = combineReducers({\n settings: () => normalizedSettings as AppSettings,\n nyrisDesign: nyrisReducer,\n search: searchReducer\n});\n\n\nconst store = createStore(rootReducer, composeWithDevTools(\n applyMiddleware(epicMiddleware)\n));\nepicMiddleware.run(rootEpic);\n\n\n\nhistory.listen((location, action) => {\n console.log('history', location, action)\n if (action === 'PUSH') {\n return;\n }\n switch (location.pathname) {\n case '/results':\n store.dispatch({type: 'SHOW_RESULTS'});\n break;\n case '/':\n store.dispatch({type: 'SHOW_START'});\n break;\n }\n});\n\n\n// Here comes the really dirty code of the composition-root\n\nconst mapStateToProps = (state: AppState) => ({\n showPart: state.nyrisDesign.showPart,\n search: {\n results: state.search.results,\n categoryPredictions: state.search.categoryPredictions,\n codes: state.search.codes,\n filterOptions: state.search.filterOptions,\n previewSelection: state.search.selectedRegion,\n regions: state.search.regions,\n duration: state.search.duration,\n requestId: state.search.requestId,\n toastErrorMessage: state.search.errorMessage\n },\n settings: state.settings,\n previewImage: state.search.requestImage,\n loading: state.search.fetchingRegions || state.search.fetchingResults,\n feedbackState: state.nyrisDesign.feedbackState,\n mdSettings: state.settings.materialDesign || defaultMdSettings,\n});\n\n\nconst mapDispatchToProps = (dispatch: Dispatch) => {\n return {\n handlers: {\n ...bindActionCreators({\n onPositiveFeedback: submitPositiveFeedback,\n onNegativeFeedback: submitNegativeFeedback,\n onCameraClick: showCamera,\n onCaptureCanceled: showStart,\n onCaptureComplete: loadCanvas,\n onSelectFile: loadFile,\n onExampleImageClick: loadUrl,\n onFileDropped: loadFile,\n onSelectionChange: selectionChanged,\n onCloseFeedback: hideFeedback,\n }, dispatch),\n onImageClick: (position: number, url: string) => {\n dispatch({ type: \"RESULT_IMAGE_CLICKED\", position, url});\n dispatch(loadUrl(url));\n },\n onLinkClick: (position: number, url: string) => {\n dispatch({type: 'RESULT_LINK_CLICKED', position, url});\n if (url) {\n window.open(url);\n }\n },\n onShowStart: () => {\n dispatch(showStart());\n scrollTop();\n },\n }\n };\n};\n\n\n// chrome plugin communication\nfunction onMessage(evt: MessageEvent) {\n let msg = evt.data;\n if (msg.type === \"image\") {\n store.dispatch(loadUrl(msg.image));\n }\n}\nwindow.addEventListener('message', onMessage);\n\n\n\n\nlet useMd = settings.materialDesign !== undefined;\nlet md: MDSettings = {\n ...defaultMdSettings,\n ...settings.materialDesign\n};\nlet theme = createMuiTheme({\n typography: {\n fontFamily: md.customFontFamily,\n },\n palette: {\n primary: {\n main: md.primaryColor,\n },\n secondary: {\n main: md.secondaryColor\n }\n }\n});\nconst SelectedApp = useMd ? AppMD : App;\nconst ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(SelectedApp);\n\nReactDOM.render((null);\n const [state, replaceState] = useState({\n tlHover: false,\n trHover: false,\n blHover: false,\n brHover: false,\n dotHover: false,\n rectHover: false\n });\n\n const setState = (s: any) => {\n let o = {};\n Object.assign(o, state, s);\n replaceState(o as PreviewState);\n };\n\n\n\n const handleDragMove = (elem: PreviewElem, evt: Konva.KonvaEventObject) => {\n if (evt.target instanceof Konva.Stage) {\n return;\n }\n\n let {x: newX, y: newY} = evt.target.getAbsolutePosition();\n let {width: elemWidth, height: elemHeight} = evt.target.getSize();\n const newRect = calcNewRect({x1, x2, y1, y2}, elem, newX, newY, elemWidth, elemHeight);\n let newState = {\n x1: newRect.x1/width,\n x2: newRect.x2/width,\n y1: newRect.y1/height,\n y2: newRect.y2/height\n };\n notifySelection(newState);\n }\n\n // animate selection\n useEffect(() => {\n let speed = 40;\n if (!selectionRef.current) {return;}\n let a = new Konva.Animation((frame) => {\n if (!frame) {\n return;\n }\n if (!selectionRef.current) {return;}\n let angleDiff = (frame.time * speed) / 1000;\n selectionRef.current.dashOffset(-angleDiff);\n }, selectionRef.current.getLayer());\n a.start();\n\n return () => {\n a && a.stop();\n };\n }, [selectionRef]);\n\n\n const handleDragMoveRect = handleDragMove.bind(null, 'rect');\n const handleDragMoveTl = handleDragMove.bind(null, 'tl');\n const handleDragMoveTr = handleDragMove.bind(null, 'tr');\n const handleDragMoveBl = handleDragMove.bind(null, 'bl');\n const handleDragMoveBr = handleDragMove.bind(null, 'br');\n\n const notifySelection = (r: RectCoords) => {\n if (onSelectionChange) {\n onSelectionChange(r);\n }\n };\n\n\n if (!image) {\n return null;\n }\n\n const dots = regions.map((region, i) => {\n let {x1, x2, y1, y2} = region.normalizedRect;\n return { // get middle of box and map to pixels\n region,\n x: width* ((x2-x1)/2 + x1),\n y: height* ((y2-y1)/2+ y1),\n key: i\n };\n });\n\n let gripSize = 40;\n let gripOpacity = 0.3;\n let gripOpacityOver = 0.6;\n let darkOpacity = 0.3;\n\n\n return (\n \n \n \n \n \n {/* Selection box */}\n setState({rectHover: true})}\n onMouseOut={() => setState({rectHover: false})}\n opacity={0.8} strokeWidth={2} x={x1} y={y1} width={x2-x1} height={y2-y1} dash={[15, 15]} ref={selectionRef} />\n {/* grips */}\n setState({tlHover: true})} onMouseOut={() => setState({tlHover: false})} opacity={state.tlHover ? gripOpacityOver : gripOpacity} width={gripSize} height={gripSize} x={x1} y={y1} />\n setState({trHover: true})} onMouseOut={() => setState({trHover: false})} opacity={state.trHover ? gripOpacityOver : gripOpacity} width={gripSize} height={gripSize} x={x2} y={y1} offsetX={gripSize} />\n setState({blHover: true})} onMouseOut={() => setState({blHover: false})} opacity={state.blHover ? gripOpacityOver : gripOpacity} width={gripSize} height={gripSize} x={x1} y={y2} offsetY={gripSize} />\n setState({brHover: true})} onMouseOut={() => setState({brHover: false})} opacity={state.brHover ? gripOpacityOver : gripOpacity} width={gripSize} height={gripSize} x={x2} y={y2} offsetY={gripSize} offsetX={gripSize} />\n {/* Dark areas */}\n \n r.key}\n start={(d, i) => ({opacity: 0, x: -100, y: d.y})}\n enter={(d, i) => ({opacity: [1], x: [d.x], y: d.y, timing: {delay: i*100, duration: 300}})}>\n {ds => {ds.map(({key, data, state: position}) =>\n notifySelection(data.region.normalizedRect)}\n onTap={() => notifySelection(data.region.normalizedRect)}\n onMouseOver={() => setState({dotHover: true})}\n onMouseOut={() => setState({dotHover: false})}\n key={key} radius={7} {...position} stroke={dotColor} fill=\"white\" strokeWidth={4}/>)} }\n \n \n );\n};\n\nexport default Preview;\n","module.exports = require(\"react-konva\");","module.exports = require(\"konva\");","module.exports = require(\"react-move\");","import React, {ChangeEvent, useEffect, useRef, useState} from 'react';\nimport './Capture.css';\nimport {urlOrBlobToCanvas, elementToCanvas} from \"@nyris/nyris-api\";\nimport captureSvg from './images/capture.svg';\nimport arrowBackSvg from './images/arrow_back.svg';\n\nexport interface CaptureProps {\n onCaptureComplete: (image: HTMLCanvasElement) => void\n onCaptureCanceled: () => void\n useAppText: string\n}\n\n\nconst Capture = ({onCaptureComplete, onCaptureCanceled, useAppText} : CaptureProps) => {\n const video = useRef(null);\n const [stream, setStream] = useState();\n\n const grabFrame = () => {\n if (video.current) {\n let frame = elementToCanvas(video.current);\n onCaptureComplete(frame);\n }\n };\n\n const onFileSelected = async (e: ChangeEvent) => {\n let fileInput = e.target as HTMLInputElement;\n if (fileInput && fileInput.files) {\n let file = await urlOrBlobToCanvas(fileInput.files[0]);\n onCaptureComplete(file);\n }\n };\n\n useEffect(() => {\n navigator.mediaDevices.getUserMedia({\n video: {\n facingMode: 'environment', // prefers wrong entry on old android: facingMode: ['environment', 'user'],\n width: 640//this.settings.maxWidth,// unsupported on ios {ideal: settings.maxWidth},\n //height: this.settings.maxHeight\n }\n }).then(stream => {\n let vid = video.current;\n if (vid) {\n vid.srcObject = stream;\n setStream(stream);\n }\n }).catch(reason => {\n switch (reason.name) {\n case 'NotFoundError':\n alert('Camera not found. Try with a file instead.');\n break;\n case 'NotAllowedError':\n alert('You have to allow using the camera in order to take pictures. If you are not asked again for permissions, go to site settings and reset permissions there.');\n break;\n default:\n alert(`Sorry, something has gone wrong while enabeling the camera. (${reason})`);\n break;\n }\n });\n }, [video]);\n\n useEffect(() => () => {\n if (!stream) {\n return;\n }\n if (stream.getVideoTracks && stream.getAudioTracks) {\n stream.getVideoTracks().map(track => track.stop());\n stream.getAudioTracks().map(track => track.stop());\n } else {\n ((stream as unknown) as MediaStreamTrack).stop();\n }\n }, [stream]);\n\n return (\n \n );\n};\n\n\nexport default Capture;\n","var api = require(\"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../node_modules/css-loader/dist/cjs.js??ref--6-1!../../../node_modules/postcss-loader/src/index.js!./Capture.css\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nmodule.exports = content.locals || {};","\"use strict\";\n\nvar isOldIE = function isOldIE() {\n var memo;\n return function memorize() {\n if (typeof memo === 'undefined') {\n // Test for IE <= 9 as proposed by Browserhacks\n // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n // Tests for existence of standard globals is to allow style-loader\n // to operate correctly into non-standard environments\n // @see https://github.com/webpack-contrib/style-loader/issues/177\n memo = Boolean(window && document && document.all && !window.atob);\n }\n\n return memo;\n };\n}();\n\nvar getTarget = function getTarget() {\n var memo = {};\n return function memorize(target) {\n if (typeof memo[target] === 'undefined') {\n var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n\n memo[target] = styleTarget;\n }\n\n return memo[target];\n };\n}();\n\nvar stylesInDom = [];\n\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n\n for (var i = 0; i < stylesInDom.length; i++) {\n if (stylesInDom[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n\n return result;\n}\n\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var index = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3]\n };\n\n if (index !== -1) {\n stylesInDom[index].references++;\n stylesInDom[index].updater(obj);\n } else {\n stylesInDom.push({\n identifier: identifier,\n updater: addStyle(obj, options),\n references: 1\n });\n }\n\n identifiers.push(identifier);\n }\n\n return identifiers;\n}\n\nfunction insertStyleElement(options) {\n var style = document.createElement('style');\n var attributes = options.attributes || {};\n\n if (typeof attributes.nonce === 'undefined') {\n var nonce = typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;\n\n if (nonce) {\n attributes.nonce = nonce;\n }\n }\n\n Object.keys(attributes).forEach(function (key) {\n style.setAttribute(key, attributes[key]);\n });\n\n if (typeof options.insert === 'function') {\n options.insert(style);\n } else {\n var target = getTarget(options.insert || 'head');\n\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n\n target.appendChild(style);\n }\n\n return style;\n}\n\nfunction removeStyleElement(style) {\n // istanbul ignore if\n if (style.parentNode === null) {\n return false;\n }\n\n style.parentNode.removeChild(style);\n}\n/* istanbul ignore next */\n\n\nvar replaceText = function replaceText() {\n var textStore = [];\n return function replace(index, replacement) {\n textStore[index] = replacement;\n return textStore.filter(Boolean).join('\\n');\n };\n}();\n\nfunction applyToSingletonTag(style, index, remove, obj) {\n var css = remove ? '' : obj.media ? \"@media \".concat(obj.media, \" {\").concat(obj.css, \"}\") : obj.css; // For old IE\n\n /* istanbul ignore if */\n\n if (style.styleSheet) {\n style.styleSheet.cssText = replaceText(index, css);\n } else {\n var cssNode = document.createTextNode(css);\n var childNodes = style.childNodes;\n\n if (childNodes[index]) {\n style.removeChild(childNodes[index]);\n }\n\n if (childNodes.length) {\n style.insertBefore(cssNode, childNodes[index]);\n } else {\n style.appendChild(cssNode);\n }\n }\n}\n\nfunction applyToTag(style, options, obj) {\n var css = obj.css;\n var media = obj.media;\n var sourceMap = obj.sourceMap;\n\n if (media) {\n style.setAttribute('media', media);\n } else {\n style.removeAttribute('media');\n }\n\n if (sourceMap && btoa) {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n } // For old IE\n\n /* istanbul ignore if */\n\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n while (style.firstChild) {\n style.removeChild(style.firstChild);\n }\n\n style.appendChild(document.createTextNode(css));\n }\n}\n\nvar singleton = null;\nvar singletonCounter = 0;\n\nfunction addStyle(obj, options) {\n var style;\n var update;\n var remove;\n\n if (options.singleton) {\n var styleIndex = singletonCounter++;\n style = singleton || (singleton = insertStyleElement(options));\n update = applyToSingletonTag.bind(null, style, styleIndex, false);\n remove = applyToSingletonTag.bind(null, style, styleIndex, true);\n } else {\n style = insertStyleElement(options);\n update = applyToTag.bind(null, style, options);\n\n remove = function remove() {\n removeStyleElement(style);\n };\n }\n\n update(obj);\n return function updateStyle(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {\n return;\n }\n\n update(obj = newObj);\n } else {\n remove();\n }\n };\n}\n\nmodule.exports = function (list, options) {\n options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of ![\"Camera\"/](\"./images/ic_cam_large.svg\")
\n