{"version":3,"file":"component---src-pages-index-tsx-5510cf550a15df49e27b.js","mappings":"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","sources":["webpack://fluffle/./src/components/banner.tsx","webpack://fluffle/./src/services/gallery.ts","webpack://fluffle/./src/components/gallery-thumbnail.module.scss","webpack://fluffle/./src/components/gallery-thumbnail.tsx","webpack://fluffle/./src/components/search-result-desktop.tsx","webpack://fluffle/./src/services/search-config.ts","webpack://fluffle/./src/components/search-result-mobile.tsx","webpack://fluffle/./src/pages/index.module.scss","webpack://fluffle/./src/pages/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport svg from '../services/svg'\n\nconst Banner = () => {\n    return (\n        <img className=\"h-28 inline-block select-none\" style={{ maxWidth: \"90%\" }} src={svg.get(\"banner\")} alt=\"Fluffle banner\" />\n    )\n}\n\nexport default Banner","export class Gallery<TSrc> {\n    images: GalleryImage<TSrc>[] = [];\n\n    constructor(private _targetHeight: number, private _maximumHeight: number) {\n    }\n\n    set targetHeight(targetHeight: number) {\n        this._targetHeight = targetHeight;\n    }\n\n    public addImage(width: number, height: number, data: any = null) {\n        this.images.push(new GalleryImage(width, height, data));\n    }\n\n    public clear() {\n        this.images = [];\n    }\n\n    public render(targetWidth: number, targetMargin: number, shouldFit: boolean = true): GalleryRow<TSrc>[] {\n        let rows: GalleryRow<TSrc>[] = [];\n\n        let row = new GalleryRow<TSrc>(targetWidth, this._targetHeight, this._maximumHeight, targetMargin)\n        for (let image of this.images) {\n            if (!row.tryAddImage(image)) {\n                rows.push(row);\n\n                row = new GalleryRow(targetWidth, this._targetHeight, this._maximumHeight, targetMargin);\n                row.tryAddImage(image);\n            }\n        }\n\n        // Add the final row if it isn't empty\n        if (row.any()) {\n            rows.push(row);\n        }\n\n        if (shouldFit) {\n            for (let row of rows) {\n                row.fit();\n            }\n        }\n\n        if (rows.length > 0) {\n            rows[rows.length - 1].isLast = true;\n        }\n\n        return rows;\n    }\n}\n\nexport class GalleryRow<TSrc> {\n    public images: GalleryRowImage<TSrc>[] = [];\n    public couldFit: boolean;\n\n    constructor(private _targetWidth: number, private _targetHeight: number,\n        private _maximumHeight: number, private _targetMargin: number, public isLast: boolean = false) {\n    }\n\n    public tryAddImage(image: GalleryImage<TSrc>): boolean {\n        if (!this.hasSpaceFor(image)) {\n            return false;\n        }\n\n        this.images.push(new GalleryRowImage(this.calculateTheoreticalSpaceTaken(image), this._targetHeight, image.aspectRatio, image.data));\n\n        return true;\n    }\n\n    public calculateTheoreticalSpaceTakenIncludingMargin(image: GalleryImage<TSrc>): number {\n        let imageWidth = this.calculateTheoreticalSpaceTaken(image);\n        let spaceTakenByImageWithMargin = imageWidth + (this._targetMargin * 2);\n\n        if (spaceTakenByImageWithMargin > this._targetWidth) {\n            return this._targetWidth;\n        }\n\n        return spaceTakenByImageWithMargin;\n    }\n\n    public calculateTheoreticalSpaceTaken(image: GalleryImage<TSrc>): number {\n        return Math.round(image.aspectRatio * this._targetHeight);\n    }\n\n    public any(): boolean {\n        return this.images.length > 0;\n    }\n\n    public hasSpaceFor(image: GalleryImage<TSrc>): boolean {\n        let spaceTaken = this.calculateSpaceTaken();\n        let spaceTakenByImage = this.calculateTheoreticalSpaceTakenIncludingMargin(image);\n        let newWidth = spaceTaken + spaceTakenByImage;\n\n        return newWidth <= this._targetWidth\n    }\n\n    public calculateSpaceLeft(): number {\n        let spaceTakenInRow = this.calculateSpaceTaken();\n\n        return this._targetWidth - spaceTakenInRow;\n    }\n\n    public fit() {\n        this.couldFit = true;\n\n        let spaceLeft = this.calculateSpaceLeft();\n\n        let totalAspectRatio = 0;\n        for (let image of this.images) {\n            totalAspectRatio += image.aspectRatio;\n        }\n\n        for (let image of this.images) {\n            let fractionOfTotalAspectRatio = image.aspectRatio / totalAspectRatio;\n            let extraWidth = fractionOfTotalAspectRatio * spaceLeft;\n            let widthIncreaseFactor = extraWidth / image.width;\n\n            extraWidth = Math.floor(extraWidth)\n            let extraHeight = Math.floor(widthIncreaseFactor * image.height);\n\n            if (image.height + extraHeight >= this._maximumHeight) {\n                this.fitMaximumHeight();\n\n                let percentageLeft = this.calculateSpaceLeft() / this._targetWidth * 100;\n                this.couldFit = percentageLeft <= 10;\n                break;\n            }\n\n            image.width += extraWidth;\n            image.height += extraHeight;\n        }\n    }\n\n    private fitMaximumHeight() {\n        let growFactor = this._maximumHeight / this._targetHeight;\n\n        for (let image of this.images) {\n            image.width = Math.floor(image.width * growFactor);\n            image.height = this._maximumHeight;\n        }\n    }\n\n    public calculateSpaceTaken(): number {\n        let width = 0;\n\n        for (let image of this.images) {\n            width += image.width;\n        }\n\n        if (this.images.length > 1) {\n            // The two images on the side don't require any margin from its parent. We need to remove that\n            let margin = (this.images.length * 2 - 2) * this._targetMargin;\n\n            width += margin\n        }\n\n        return width;\n    }\n}\n\nexport class GalleryImage<TSrc> {\n    constructor(public width: number, public height: number, public data: TSrc) {\n    }\n\n    get aspectRatio(): number {\n        return this.width / this.height;\n    }\n}\n\nexport class GalleryRowImage<TSrc> {\n    constructor(public width: number, public height: number, public aspectRatio: number, public data: TSrc) {\n    }\n}\n","// extracted by mini-css-extract-plugin\nexport var galleryThumbnail = \"gallery-thumbnail-module--gallery-thumbnail--LkmK5\";\nexport var blur = \"gallery-thumbnail-module--blur--qVN0H\";\nexport var skeleton = \"gallery-thumbnail-module--skeleton--PeWDl\";\nexport var Skeleton = \"gallery-thumbnail-module--Skeleton--nver1\";","import * as React from 'react'\nimport { galleryThumbnail, blur, skeleton } from './gallery-thumbnail.module.scss'\nimport { SearchResultThumbnail } from '../services/api'\nimport classNames from 'classnames';\n\ninterface GalleryThumbnailProps {\n    thumbnail: SearchResultThumbnail,\n    hasBlur: boolean\n}\n\nconst GalleryThumbnail = ({ thumbnail, hasBlur }: GalleryThumbnailProps) => {\n    const [hasBeenLoaded, setHasBeenLoaded] = React.useState(false);\n    const [error, setError] = React.useState(null);\n\n    function load(element: HTMLImageElement) {\n        if (element == null) return;\n\n        const image = new Image();\n        image.onload = () => {\n            element.src = image.src;\n            setHasBeenLoaded(true);\n        };\n\n        image.onerror = () => {\n            setError('Fluffle offline');\n        };\n\n        image.src = thumbnail.location;\n    }\n\n    return (\n        <div className=\"relative w-full h-full bg-dark-400 text-light-100\">\n            <img className={hasBlur ? classNames(galleryThumbnail, blur) : galleryThumbnail} style={{\n                objectPosition: thumbnail.centerX + \"% \" + thumbnail.centerY + \"%\",\n                opacity: hasBeenLoaded ? \"1\" : \"0\"\n            }} ref={element => load(element)} />\n            <div className={classNames(\"absolute w-full h-full top-0 left-0 text-2xl flex text-center justify-center items-center p-3\", { hidden: error == null })}>\n                {error}\n            </div>\n            <div className={classNames(skeleton, { hidden: hasBeenLoaded || error != null })}></div>\n        </div>\n    )\n}\n\nexport default GalleryThumbnail\n","import * as React from 'react'\nimport { SearchResult, SearchResultItem } from '../services/api'\nimport { Gallery, GalleryRow, GalleryRowImage } from '../services/gallery'\nimport GalleryThumbnail from './gallery-thumbnail'\nimport Icon from './icon'\n\nconst GalleryDesktopCard = ({ image, shouldBlur }: { image: GalleryRowImage<SearchResultItem>, shouldBlur: boolean }) => {\n    const [hasHover, setHasHover] = React.useState(false);\n\n    return (\n        <a href={image.data.location} rel=\"noreferrer\" target=\"_blank\" onMouseEnter={() => setHasHover(true)} onMouseLeave={() => setHasHover(false)} className=\"relative rounded overflow-hidden select-none force-light-100\" style={{ width: image.width, height: image.height }}>\n            <div className={`absolute shadow px-1 py-0.5 flex items-center space-x-1 bg-gradient-${image.data.match.class} rounded-tl rounded-br z-20`}>\n                <span className=\"w-6\">\n                    <Icon name={image.data.platform} />\n                </span>\n                <div>{(image.data.score * 100).toFixed(2)}%</div>\n            </div>\n            <div className={`absolute w-full h-full bg-black transition-colors z-10 ${hasHover ? 'bg-opacity-20' : 'bg-opacity-0'}`}></div>\n            <div className={`absolute bottom-0 w-full px-1 py-1.5 whitespace-nowrap overflow-hidden overflow-ellipsis transition-opacity bg-black bg-opacity-80 text-xs z-20 opacity-0 ${hasHover ? 'opacity-100' : ''}`}>\n                {image.data.credits && <span>By <span className=\"font-semibold\">{image.data.credits}</span></span>}\n                {!image.data.credits && <span className=\"font-semibold\">Unknown artist</span>}\n            </div>\n            <GalleryThumbnail thumbnail={image.data.thumbnail} hasBlur={shouldBlur && !hasHover} />\n        </a>\n    )\n}\n\nconst GalleryDesktop = ({ data, width, targetHeight, maximumHeight, shouldBlur }: { data: SearchResultItem[], width: number, targetHeight: number, maximumHeight: number, shouldBlur: boolean }) => {\n    const gallery = new Gallery<SearchResultItem>(targetHeight, maximumHeight);\n    const [render, setRender] = React.useState<GalleryRow<SearchResultItem>[]>()\n\n    React.useEffect(() => {\n        renderGallery();\n    }, [width]);\n\n    function renderGallery() {\n        data.forEach(result => {\n            let aspectRatio = result.thumbnail.width / result.thumbnail.height;\n\n            let width = result.thumbnail.width;\n            let height = result.thumbnail.height;\n\n            // Images which are either very tall or wide, can screw with the gallery's\n            // ability to fit them nicely in the grid. So, in order to fix that, we\n            // force those images to be displayed as squares instead, just like on the mobile UI.\n            if (aspectRatio < 0.6 || aspectRatio > 2) {\n                width = 250;\n                height = 250;\n            }\n\n            gallery.addImage(width, height, result);\n        });\n\n        const newRender = gallery.render(width, 6);\n\n        const minNumberOfImages = 12;\n        const minNumberOfRows = 3;\n        let currentNumberOfImages = 0;\n        let i = 0;\n        for (; i < newRender.length; i++) {\n            var currentRow = newRender[i];\n            currentNumberOfImages += currentRow.images.length;\n\n            if (currentNumberOfImages >= minNumberOfImages && minNumberOfRows <= i + 1) {\n                break;\n            }\n        }\n\n        setRender(newRender.slice(0, i + 1));\n    }\n\n    return (\n        <div className=\"flex flex-col space-y-3\">\n            {render != null && render.map(row => (\n                <div key={row.images.map(i => i.data.id).join(\"-\")} className={`flex ${row.couldFit ? \"justify-between\" : \"justify-start space-x-3\"}`}>\n                    {row.images.map(image => (\n                        <GalleryDesktopCard key={image.data.id} image={image} shouldBlur={shouldBlur} />\n                    ))}\n                </div>\n            ))}\n        </div>\n    )\n}\n\nconst SearchResultDesktop = ({ data }: { data: SearchResult }) => {\n    const [hideImprobable, setHideImprobable] = React.useState(true);\n    const [width, setWidth] = React.useState(0);\n    const containerRef: React.RefObject<HTMLDivElement> = React.useRef();\n\n    function onResize() {\n        setWidth(containerRef.current.clientWidth);\n    }\n\n    React.useEffect(() => {\n        onResize();\n        window.addEventListener('resize', onResize);\n\n        return () => {\n            window.removeEventListener('resize', onResize);\n        };\n    }, []);\n\n    return (\n        <div className=\"hidden lg:flex flex-col space-y-6\" ref={containerRef}>\n            <div className=\"flex justify-center items-center space-x-3\">\n                <img className=\"rounded\" src={data.parameters.imageUrl} style={{ maxWidth: \"50%\", height: \"100%\", maxHeight: \"300px\" }} />\n                <div className=\"max-w-xl\">\n                    <div className=\"text-muted\">\n                        Searched {data.stats.count.toLocaleString()} images in {data.stats.elapsedMilliseconds.toLocaleString()} ms\n                    </div>\n                    <div className=\"text-4xl font-light\">\n                        {\n                            {\n                                0: \"Oh noes! Looks like we couldn't find what you're looking for\",\n                                1: \"Jolly good! We found an image similar to the one you submitted\"\n                            }[data.probableResults.length] || \"Jolly good! We found images similar to the one you submitted\"\n                        }\n                    </div>\n                </div>\n            </div>\n            {width != 0 && data.probableResults.length > 0 &&\n                <GalleryDesktop shouldBlur={false} data={data.probableResults} width={width} targetHeight={250} maximumHeight={250} />\n            }\n            {width != 0 && data.improbableResults.length > 0 &&\n                <div className=\"flex flex-col space-y-2\">\n                    <div className=\"flex items-center space-x-1.5\">\n                        <button className=\"btn btn-sm btn-secondary space-x-1\" style={{ lineHeight: 1 }} onClick={() => setHideImprobable(!hideImprobable)}>\n                            <span>\n                                <Icon name={hideImprobable ? \"visibility\" : \"visibility-off\"} />\n                            </span>\n                            <span>{hideImprobable ? \"Show\" : \"Hide\"} improbable matches</span>\n                        </button>\n                        <span className=\"text-sm text-muted hidden lg:inline\">We've hidden improbable matches to keep you from viewing content you might experience as disturbing</span>\n                    </div>\n                    <GalleryDesktop shouldBlur={hideImprobable} data={data.improbableResults} width={width} targetHeight={200} maximumHeight={250} />\n                </div>\n            }\n        </div>\n    )\n}\n\nexport default SearchResultDesktop\n","import * as React from 'react'\n\nconst ImageRating = {\n    Safe: 'SAFE',\n    Explicit: 'EXPLICIT'\n};\n\nconst SearchConfig = function () {\n    if (typeof localStorage === 'undefined') {\n        return {}\n    }\n\n    function readIncludeNsfw() {\n        if (localStorage.getItem('rating') != null) {\n            return localStorage.getItem('rating') === ImageRating.Explicit;\n        }\n\n        return false;\n    }\n\n    const [includeNsfw, setIncludeNsfw] = React.useState(readIncludeNsfw());\n\n    return {\n        includeNsfw,\n        setIncludeNsfw(includeNsfw: boolean) {\n            localStorage.setItem('rating', includeNsfw ? ImageRating.Explicit : ImageRating.Safe);\n            setIncludeNsfw(includeNsfw);\n        }\n    }\n};\n\nexport default SearchConfig\n","import * as React from 'react'\nimport { Match, SearchResult, SearchResultItem } from '../services/api';\nimport GalleryThumbnail from './gallery-thumbnail';\nimport Icon from './icon';\n\nconst GalleryCard = ({ data, enableBlur, onClick, seq }: { data: SearchResultItem, enableBlur: boolean, onClick: Function, seq: number }) => {\n    const [hasBeenClicked, setHasBeenClicked] = React.useState(false);\n\n    React.useEffect(() => {\n        setHasBeenClicked(false);\n    }, [seq]);\n\n    const [hasBlur, setHasBlur] = React.useState(false);\n    React.useEffect(() => {\n        setHasBlur(enableBlur && !hasBeenClicked);\n    }, [hasBeenClicked, enableBlur]);\n\n    function handleClick(e: React.MouseEvent<HTMLAnchorElement>) {\n        if (!hasBlur) {\n            return;\n        }\n\n        setHasBeenClicked(true);\n        e.preventDefault();\n        onClick();\n    }\n\n    return (\n        <a className=\"square w-1/2 sm:w-1/3 md:w-1/4 p-1 block relative force-light-100\" onClick={handleClick} href={data.location} target=\"_blank\" rel=\"noreferrer\">\n            <div className=\"absolute left-0 top-0 w-full h-full p-inherit\">\n                <div className=\"relative w-full h-full rounded overflow-hidden\">\n                    <div className={`absolute top-0 left-0 w-7 p-0.5 bg-gradient-${data.match.class} rounded-tl rounded-br z-10`}>\n                        <Icon name={data.platform} />\n                    </div>\n                    <div className={`absolute transition-opacity bottom-0 w-full whitespace-nowrap overflow-hidden overflow-ellipsis p-1 bg-black bg-opacity-80 text-xs z-10 opacity-0 ${hasBlur ? '' : 'opacity-100'}`}>\n                        {data.credits && <span>By <span className=\"font-semibold\">{data.credits}</span></span>}\n                        {!data.credits && <span className=\"font-semibold\">Unknown artist</span>}\n                    </div>\n                    <div className=\"absolute top-0 left-0 w-full h-full\">\n                        <GalleryThumbnail thumbnail={data.thumbnail} hasBlur={hasBlur} />\n                    </div>\n                </div>\n            </div>\n        </a>\n    )\n}\n\nconst GalleryMobile = ({ results, hideImprobable, onClick, seq }: { results: SearchResultItem[], hideImprobable: boolean, onClick: Function, seq: number }) => {\n    return (\n        <div className=\"flex flex-wrap w-full\">\n            {results.slice(0, 12).map(item => (\n                <GalleryCard onClick={onClick} seq={seq} key={item.id} data={item} enableBlur={item.match !== Match.Excellent && hideImprobable}></GalleryCard>\n            ))}\n        </div>\n    )\n}\n\nconst SearchResultMobile = ({ data }: { data: SearchResult }) => {\n    const [hideImprobable, setHideImprobable] = React.useState(true);\n    const [shouldHide, setShouldHide] = React.useState(false);\n    const [seq, setSeq] = React.useState(0);\n\n    function onClick() {\n        setShouldHide(true);\n    }\n\n    function toggleHide() {\n        setHideImprobable(shouldHide);\n        setShouldHide(!shouldHide);\n        setSeq(seq + 1);\n    }\n\n    return (\n        <div className=\"lg:hidden space-y-6\">\n            <div className=\"flex flex-col items-center space-y-6\">\n                <img className=\"rounded\" src={data.parameters.imageUrl} style={{ maxWidth: \"75vw\", maxHeight: \"50vh\" }} />\n                <div className=\"text-center\">\n                    <div className=\"text-muted\">\n                        Searched {data.stats.count.toLocaleString()} images in {data.stats.elapsedMilliseconds.toLocaleString()} ms\n                    </div>\n                    <div className=\"text-3xl\">\n                        {\n                            {\n                                0: \"Oh noes! Couldn't find what you're looking for\",\n                                1: \"Jolly good! We found a similar image\"\n                            }[data.probableResults.length] || \"Jolly good! We found similar images\"\n                        }\n                    </div>\n                </div>\n            </div>\n            <div className=\"space-y-3\">\n                <div className=\"space-y-1\">\n                    <div className=\"px-1 space-y-1\">\n                        <div className=\"text-xs text-center text-muted\">\n                            We've hidden improbable matches to keep you from viewing content you might experience as disturbing\n                        </div>\n                        <button className=\"btn btn-sm btn-secondary w-full space-x-1\" onClick={toggleHide}>\n                            <span>\n                                <Icon name={shouldHide ? \"visibility-off\" : \"visibility\"} />\n                            </span>\n                            <span>{shouldHide ? \"Hide\" : \"Show\"} improbable matches</span>\n                        </button>\n                    </div>\n                    <GalleryMobile onClick={onClick} seq={seq} results={data.probableResults.concat(data.improbableResults)} hideImprobable={hideImprobable} />\n                </div>\n            </div>\n        </div>\n    )\n};\n\nexport default SearchResultMobile\n","// extracted by mini-css-extract-plugin\nexport var dropZone = \"index-module--drop-zone--fWn+W\";\nexport var dropZoneActive = \"index-module--drop-zone-active--MIkqx\";","import * as React from 'react'\nimport Layout from '../components/layout'\nimport Banner from '../components/banner'\nimport { Link } from 'gatsby'\nimport ProgressBar from '../components/progress-bar'\nimport ProgressBarPart from '../components/progress-bar-part'\nimport Api, { SearchResult } from '../services/api'\nimport SearchResultDesktop from '../components/search-result-desktop'\nimport { Helmet } from 'react-helmet'\nimport Icon from '../components/icon'\nimport SearchConfig from '../services/search-config'\nimport SearchResultMobile from '../components/search-result-mobile'\nimport classNames from 'classnames'\nimport { dropZone, dropZoneActive } from './index.module.scss'\n\nconst State = {\n    ERROR: -1,\n    IDLE: 0,\n    PREPROCESSING: 1,\n    UPLOADING: 2,\n    PROCESSING: 3,\n    DONE: 4\n};\n\nconst SearchPage = () => {\n    let searchConfig = SearchConfig();\n\n    const canvasRef: React.RefObject<HTMLCanvasElement> = React.useRef();\n    const containerRef: React.RefObject<HTMLDivElement> = React.useRef();\n\n    const [state, setState] = React.useState(State.IDLE);\n    const [data, setData] = React.useState<SearchResult>(null);\n    const [errorMessage, setErrorMessage] = React.useState(null);\n    const [progress, setProgress] = React.useState(0);\n    const [hasDrag, setHasDrag] = React.useState(false);\n\n    function setError(message) {\n        setErrorMessage(message);\n        setState(State.ERROR);\n    }\n\n    function calculateThumbnailSize(width, height, target) {\n        let determineSize = (sizeOne, sizeTwo, sizeOneTarget) => {\n            var aspectRatio = sizeOneTarget / sizeOne;\n\n            return Math.round(aspectRatio * sizeTwo);\n        };\n\n        if (width === height) {\n            return [target, target];\n        }\n\n        return width > height\n            ? [determineSize(height, width, target), target]\n            : [target, determineSize(width, height, target)];\n    }\n\n    function search(files: FileList) {\n        setState(State.IDLE);\n        setData(null);\n        setErrorMessage(null);\n        setProgress(0);\n\n        if (files.length > 1) {\n            setError('You can only reverse search one image at a time.');\n            return;\n        }\n        const file = files[0];\n\n        setState(State.PREPROCESSING);\n\n        const image = new Image();\n        const canvas = canvasRef.current;\n        image.onload = () => {\n            const target = 256;\n            const thumbnailSize = calculateThumbnailSize(image.width, image.height, target);\n\n            // In the first place we scaled down the image to a fixed size (250x250), but that\n            // caused such a significant loss in image quality in some instances that we had to\n            // scale preserving the aspect ratio of the original image  \n            canvas.width = thumbnailSize[0];\n            canvas.height = thumbnailSize[1];\n            const ctx = canvas.getContext('2d');\n            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);\n\n            // Convert image drawn on canvas to blob\n            const dataUri = canvas.toDataURL('image/png');\n            const base64EncodedData = dataUri.split(',')[1];\n            const data = atob(base64EncodedData);\n            const array = new Uint8Array(data.length);\n            for (let i = 0; i < data.length; i++) {\n                array[i] = data.charCodeAt(i);\n            }\n            const thumbnail = new Blob([array]);\n\n            searchInternal(file, thumbnail);\n        };\n\n        // The error might simply be that the image format isn't supported by the canvas.\n        // Therefore, we should still send it to the server.\n        image.onerror = () => {\n            searchInternal(file, file);\n        }\n\n        image.src = URL.createObjectURL(file);\n    }\n\n    function searchInternal(file: Blob, thumbnail: Blob) {\n        setState(State.UPLOADING);\n        Api.search(file, thumbnail, searchConfig.includeNsfw, 32, {\n            onUploadProgress: e => {\n                const progress = Math.round(e.loaded / e.total * 100);\n\n                setProgress(progress);\n\n                if (progress === 100) {\n                    setState(State.PROCESSING);\n                }\n            }\n        }).then(data => {\n            setData(data);\n            setState(State.DONE);\n\n            // TODO: Using a timeout has proven unrealiable in the Angular version of the application\n            setTimeout(() => {\n                containerRef.current.scrollIntoView({\n                    behavior: 'smooth'\n                });\n            }, 250);\n        }).catch(message => {\n            setError(message);\n        });\n    }\n\n    function onSelect(event) {\n        search(event.target.files);\n    }\n\n    function onDragover(event) {\n        setHasDrag(true);\n        event.preventDefault();\n    }\n\n    function onDragLeave(event) {\n        setHasDrag(false);\n        event.preventDefault();\n    }\n\n    function onDrop(event) {\n        // Prevent file from being opened\n        event.preventDefault();\n        setHasDrag(false);\n\n        if (event.dataTransfer.files.length == 0) {\n            setError('Did you drop a file which originates from the browser? Due to your browser its limitations, Fluffle cannot access those files. Save the file to your device first, then submit this file instead.')\n            return;\n        }\n\n        search(event.dataTransfer.files);\n    }\n\n    // Safari doesn't handle clickable elements the same way as other browsers.\n    // We need to explicitly cancel the opening of a file dialog when another element\n    // is clicked on. We use a custom ignore attribute for that.\n    function onLabelClick(event) {\n        if (event.target.hasAttribute('data-ignore')) {\n            event.preventDefault();\n        }\n    }\n\n    return (\n        <Layout center={true} requireBrowser={true} title=\"Reverse search\">\n            <Helmet>\n                <meta name=\"description\" content=\"A reverse image search service tailored to the furry community.\"></meta>\n            </Helmet>\n            <div className=\"w-full flex flex-col items-center space-y-12\">\n                <div className=\"flex flex-col justify-center items-center\">\n                    <div className=\"mb-4 flex justify-center w-auto\">\n                        <Link className=\"flex justify-center sm:block\" to=\"/\">\n                            <Banner />\n                            <span className=\"absolute text-muted uppercase hidden sm:inline\">\n                                {process.env.VERSION}\n                            </span>\n                        </Link>\n                    </div>\n                    <div className=\"text-muted text-center italic\">\n                        A reverse image search service tailored to the furry community\n                    </div>\n                </div>\n                <input className=\"hidden\" type=\"file\" id=\"image\" onChange={onSelect} />\n                <canvas className=\"hidden\" ref={canvasRef}></canvas>\n                {![State.PREPROCESSING, State.UPLOADING, State.PROCESSING].includes(state) &&\n                    <div className=\"flex w-full max-w-4xl flex-col space-y-3\">\n                        {state === State.ERROR &&\n                            <div className=\"flex items-center bg-gradient-danger space-x-3 p-4 rounded\">\n                                <Icon name=\"report-problem\" />\n                                <span>{errorMessage}</span>\n                            </div>\n                        }\n                        <label htmlFor=\"image\" onClick={e => onLabelClick(e)} onDragOver={e => onDragover(e)} onDrop={e => onDrop(e)} onDragLeave={e => onDragLeave(e)}>\n                            <div className={hasDrag ? classNames(dropZone, dropZoneActive) : dropZone}>\n                                <div className=\"text-5xl hidden sm:block\">Drag 'n drop a fluffy critter here</div>\n                                <div className=\"hidden sm:block\">Or</div>\n                                <div className=\"flex flex-col space-y-2\">\n                                    <div className=\"flex flex-col sm:flex-row items-center space-x-2 space-y-2 sm:space-y-0\">\n                                        <label htmlFor=\"image\" className=\"btn btn-primary text-xl sm:text-base\">\n                                            <span className=\"mr-2\">\n                                                <Icon name=\"photo-size-select-actual\" />\n                                            </span>\n                                            <span className=\"hidden sm:inline\">Select a floof</span>\n                                            <span className=\"inline sm:hidden\">Select a fluffy critter</span>\n                                        </label>\n                                        <div className=\"flex btn-group\">\n                                            <button onClick={() => searchConfig.setIncludeNsfw(false)} className={`btn btn-${searchConfig.includeNsfw ? \"secondary\" : \"info\"}`} data-ignore>SFW</button>\n                                            <button onClick={() => searchConfig.setIncludeNsfw(true)} className={`btn btn-${searchConfig.includeNsfw ? \"danger\" : \"secondary\"}`} data-ignore>NSFW</button>\n                                        </div>\n                                    </div>\n                                    <div className=\"text-sm text-muted\">{!searchConfig.includeNsfw ? \"Twitter isn't included in SFW mode.\" : 'Search both SFW and NSFW images.'}</div>\n                                </div>\n                                <div className=\"text-muted\">Concerned about what happens to your data? Take a look at the <Link to=\"/about/\">about page</Link>.</div>\n                            </div>\n                        </label>\n                    </div>\n                }\n\n                {[State.PREPROCESSING, State.UPLOADING, State.PROCESSING].includes(state) &&\n                    <div className=\"w-full max-w-xl flex flex-col space-y-3 items-center\">\n                        <ProgressBar>\n                            <ProgressBarPart color=\"bg-primary\" isStriped={true} isAnimated={true} percentage={progress}></ProgressBarPart>\n                        </ProgressBar>\n                        <span>{state === State.PREPROCESSING ? \"Preprocessing\" : state === State.UPLOADING ? \"Uploading\" : \"Processing\"}...</span>\n                    </div>\n                }\n\n                {state === State.DONE &&\n                    <div className=\"w-full bg-dark-300 p-2 rounded\" ref={containerRef}>\n                        <SearchResultDesktop data={data} />\n                        <SearchResultMobile data={data} />\n                    </div>\n                }\n            </div>\n        </Layout>\n    )\n}\n\nexport default SearchPage\n"],"names":["className","style","maxWidth","src","svg","alt","Gallery","_targetHeight","_maximumHeight","images","addImage","width","height","data","this","push","GalleryImage","clear","render","targetWidth","targetMargin","shouldFit","rows","row","GalleryRow","image","tryAddImage","any","fit","length","isLast","targetHeight","_targetWidth","_targetMargin","hasSpaceFor","GalleryRowImage","calculateTheoreticalSpaceTaken","aspectRatio","calculateTheoreticalSpaceTakenIncludingMargin","spaceTakenByImageWithMargin","Math","round","calculateSpaceTaken","calculateSpaceLeft","spaceTakenInRow","couldFit","spaceLeft","totalAspectRatio","extraWidth","widthIncreaseFactor","floor","extraHeight","fitMaximumHeight","percentageLeft","growFactor","galleryThumbnail","thumbnail","hasBlur","React","hasBeenLoaded","setHasBeenLoaded","error","setError","classNames","objectPosition","centerX","centerY","opacity","ref","element","Image","onload","onerror","location","load","hidden","GalleryDesktopCard","shouldBlur","hasHover","setHasHover","href","rel","target","onMouseEnter","onMouseLeave","match","class","name","platform","score","toFixed","credits","GalleryDesktop","maximumHeight","gallery","setRender","forEach","result","newRender","minNumberOfImages","minNumberOfRows","currentNumberOfImages","i","slice","renderGallery","map","key","id","join","hideImprobable","setHideImprobable","setWidth","containerRef","onResize","current","clientWidth","window","addEventListener","removeEventListener","parameters","imageUrl","maxHeight","stats","count","toLocaleString","elapsedMilliseconds","probableResults","improbableResults","lineHeight","onClick","ImageRating","localStorage","getItem","includeNsfw","setIncludeNsfw","setItem","GalleryCard","enableBlur","seq","hasBeenClicked","setHasBeenClicked","setHasBlur","e","preventDefault","GalleryMobile","results","item","Match","shouldHide","setShouldHide","setSeq","concat","dropZone","State","ERROR","IDLE","PREPROCESSING","UPLOADING","PROCESSING","DONE","searchConfig","SearchConfig","canvasRef","state","setState","setData","errorMessage","setErrorMessage","progress","setProgress","hasDrag","setHasDrag","message","search","files","file","canvas","thumbnailSize","determineSize","sizeOne","sizeTwo","sizeOneTarget","calculateThumbnailSize","getContext","drawImage","base64EncodedData","toDataURL","split","atob","array","Uint8Array","charCodeAt","Blob","searchInternal","URL","createObjectURL","Api","onUploadProgress","loaded","total","then","setTimeout","scrollIntoView","behavior","catch","center","requireBrowser","title","Helmet","content","to","process","type","onChange","event","includes","htmlFor","hasAttribute","onDragOver","onDrop","dataTransfer","onDragLeave","color","isStriped","isAnimated","percentage"],"sourceRoot":""}