@codesmith-99/react-file-preview/dist/module.js

The url previewer is built using native html elements for previewing url of files of the following type

import {jsx as $hgUW1$jsx, jsxs as $hgUW1$jsxs, Fragment as $hgUW1$Fragment} from "react/jsx-runtime";
import {useState as $hgUW1$useState, useEffect as $hgUW1$useEffect, memo as $hgUW1$memo} from "react";
import $hgUW1$mime from "mime";
import $hgUW1$styledcomponents from "styled-components";
import {FileIcon as $hgUW1$FileIcon, defaultStyles as $hgUW1$defaultStyles} from "react-file-icon";
import $hgUW1$commaseparatedvalues from "comma-separated-values";
import {TableVirtuoso as $hgUW1$TableVirtuoso} from "react-virtuoso";






const $d9611271ebdb540e$var$Audio = (0, $hgUW1$styledcomponents).audio`
  width: 100%;
`;
function $d9611271ebdb540e$export$2e2bcd8739ae039({ src: src, onError: onError, onLoad: onLoad, mimeType: mimeType, autoPlay: autoPlay }) {
    return /*#__PURE__*/ (0, $hgUW1$jsxs)($d9611271ebdb540e$var$Audio, {
        controls: true,
        className: "audio",
        onError: onError,
        onCanPlay: onLoad,
        autoPlay: autoPlay,
        children: [
            /*#__PURE__*/ (0, $hgUW1$jsx)("source", {
                src: src,
                type: mimeType
            }),
            "Your browser does not support this audio tag"
        ]
    });
}







const $5188c0abbf72065a$var$TD = (0, $hgUW1$styledcomponents).td`
  border: 1px solid black;
`;
const $5188c0abbf72065a$var$CSVViewer = ({ src: src, onError: onError, onLoad: onLoad })=>{
    const [data, setData] = (0, $hgUW1$useState)([]);
    (0, $hgUW1$useEffect)(()=>{
        const req = new XMLHttpRequest();
        req.open('GET', src, true);
        req.onload = function(e) {
            if (req.status >= 300) onError(e);
            else {
                setData(new (0, $hgUW1$commaseparatedvalues)(req.response).parse());
                onLoad(true);
            }
        };
        req.send();
        return ()=>{
            req.abort();
        };
    }, [
        src
    ]);
    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableVirtuoso), {
        style: {
            height: '100%',
            whiteSpace: 'nowrap',
            width: '100%'
        },
        data: data,
        itemContent: (index, row)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Fragment), {
                children: row.map((x, i)=>/*#__PURE__*/ (0, $hgUW1$jsx)($5188c0abbf72065a$var$TD, {
                        children: x
                    }, `${index}-${i}`))
            })
    });
};
var $5188c0abbf72065a$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $hgUW1$memo)($5188c0abbf72065a$var$CSVViewer);






function $c756ca1a2edcb3f2$export$2e2bcd8739ae039({ onLoad: onLoad, mimeType: mimeType }) {
    (0, $hgUW1$useEffect)(()=>{
        onLoad(true);
    }, [
        onLoad
    ]);
    return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
        style: {
            width: '50px',
            height: '50px'
        },
        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$FileIcon), {
            extension: (0, $hgUW1$mime).getExtension(mimeType) ?? '',
            ...(0, $hgUW1$defaultStyles)[(0, $hgUW1$mime).getExtension(mimeType)]
        })
    });
}



function $08ddfbb3a003c90f$export$2e2bcd8739ae039({ src: src, onLoad: onLoad }) {
    return /*#__PURE__*/ (0, $hgUW1$jsx)("iframe", {
        id: "msdoc-iframe",
        title: "msdoc-iframe",
        height: "100%",
        width: "100%",
        onLoad: ()=>onLoad(true),
        src: `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(src)}`
    });
}





const $e5ed2457186a4724$var$Iframe = (0, $hgUW1$styledcomponents).iframe`
  background-color: white;
  width: 100%;
  height: 100%;
`;
function $e5ed2457186a4724$export$2e2bcd8739ae039({ src: src, onLoad: onLoad, onError: onError }) {
    const [data, setData] = (0, $hgUW1$useState)('');
    (0, $hgUW1$useEffect)(()=>{
        const req = new XMLHttpRequest();
        req.open('GET', src, true);
        req.onload = function(e) {
            if (req.status >= 300) onError(e);
            else {
                setData(req.response);
                onLoad(true);
            }
        };
        req.send();
        return ()=>{
            req.abort();
        };
    }, [
        src
    ]);
    return /*#__PURE__*/ (0, $hgUW1$jsx)($e5ed2457186a4724$var$Iframe, {
        src: `data:text/html; charset=utf-8,${encodeURIComponent(data)}`,
        sandbox: ""
    });
}




const $8b52496efeec7958$var$Image = (0, $hgUW1$styledcomponents).img`
  width: 100%;
  height: 100%;
`;
function $8b52496efeec7958$export$2e2bcd8739ae039({ src: src, onError: onError, onLoad: onLoad }) {
    return /*#__PURE__*/ (0, $hgUW1$jsx)($8b52496efeec7958$var$Image, {
        src: src,
        onError: onError,
        onLoad: ()=>onLoad(true)
    });
}





const $6e5facf4327c0559$var$Iframe = (0, $hgUW1$styledcomponents).iframe`
  background-color: white;
  width: 100%;
  height: 100%;
`;
function $6e5facf4327c0559$export$2e2bcd8739ae039({ src: src, onLoad: onLoad, onError: onError }) {
    const [data, setData] = (0, $hgUW1$useState)('');
    (0, $hgUW1$useEffect)(()=>{
        const req = new XMLHttpRequest();
        req.open('GET', src, true);
        req.responseType = 'arraybuffer';
        req.onload = function(e) {
            if (req.status >= 300) onError(e);
            else {
                setData(window.URL.createObjectURL(new Blob([
                    req.response
                ], {
                    type: 'application/pdf'
                })));
                onLoad(true);
            }
        };
        req.send();
        return ()=>{
            req.abort();
        };
    }, [
        src
    ]);
    return /*#__PURE__*/ (0, $hgUW1$jsx)($6e5facf4327c0559$var$Iframe, {
        src: data
    });
}





const $418e3d97e028637f$var$Container = (0, $hgUW1$styledcomponents).div`
  width: 100%;
  height: 100%;
  overflow: auto;
`;
function $418e3d97e028637f$export$2e2bcd8739ae039({ src: src, onLoad: onLoad, onError: onError }) {
    const [data, setData] = (0, $hgUW1$useState)('');
    (0, $hgUW1$useEffect)(()=>{
        const req = new XMLHttpRequest();
        req.open('GET', src, true);
        req.onload = function(e) {
            if (req.status >= 300) onError(e);
            else {
                setData(req.response);
                onLoad(true);
            }
        };
        req.send();
        return ()=>{
            req.abort();
        };
    }, [
        src
    ]);
    return /*#__PURE__*/ (0, $hgUW1$jsx)($418e3d97e028637f$var$Container, {
        children: data
    });
}




const $f6b8d6b4aac0d4f2$var$Video = (0, $hgUW1$styledcomponents).video`
  width: 100%;
  height: 100%;
`;
function $f6b8d6b4aac0d4f2$export$2e2bcd8739ae039({ src: src, onError: onError, onLoad: onLoad, mimeType: mimeType, autoPlay: autoPlay }) {
    return /*#__PURE__*/ (0, $hgUW1$jsxs)($f6b8d6b4aac0d4f2$var$Video, {
        controls: true,
        onError: onError,
        onCanPlay: ()=>onLoad(true),
        autoPlay: autoPlay,
        children: [
            /*#__PURE__*/ (0, $hgUW1$jsx)("source", {
                src: src,
                type: mimeType
            }),
            "Your browser does not support this video tag"
        ]
    });
}


function $e4178ab0dc722d99$export$2e2bcd8739ae039({ mimeType: mimeType, src: src, onError: onError, onLoad: onLoad, autoPlay: autoPlay }) {
    switch(mimeType){
        case 'text/csv':
            return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $5188c0abbf72065a$export$2e2bcd8739ae039), {
                onLoad: onLoad,
                onError: (e)=>onError(e),
                src: src
            });
        case 'text/plain':
            return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $418e3d97e028637f$export$2e2bcd8739ae039), {
                onLoad: onLoad,
                onError: (e)=>onError(e),
                src: src
            });
        case 'application/pdf':
            return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6e5facf4327c0559$export$2e2bcd8739ae039), {
                onLoad: onLoad,
                onError: (e)=>onError(e),
                src: src
            });
        case 'text/html':
            return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e5ed2457186a4724$export$2e2bcd8739ae039), {
                src: src,
                onLoad: onLoad,
                onError: (e)=>onError(e)
            });
        case mimeType.startsWith('image/') && mimeType:
            return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $8b52496efeec7958$export$2e2bcd8739ae039), {
                src: src,
                onLoad: onLoad,
                onError: (e)=>onError(e)
            });
        case mimeType.startsWith('audio/') && mimeType:
            return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $d9611271ebdb540e$export$2e2bcd8739ae039), {
                src: src,
                onLoad: ()=>onLoad(true),
                onError: (e)=>onError(e),
                mimeType: mimeType,
                autoPlay: autoPlay
            });
        case mimeType.startsWith('video/') && mimeType:
            return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $f6b8d6b4aac0d4f2$export$2e2bcd8739ae039), {
                src: src,
                onLoad: ()=>onLoad(true),
                onError: (e)=>onError(e),
                mimeType: mimeType,
                autoPlay: autoPlay
            });
        case 'application/msword':
        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
        case 'application/vnd.ms-excel':
        case 'application/vnd.ms-powerpoint':
        case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
            return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $08ddfbb3a003c90f$export$2e2bcd8739ae039), {
                src: src,
                onLoad: onLoad
            });
        default:
            return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $c756ca1a2edcb3f2$export$2e2bcd8739ae039), {
                onLoad: onLoad,
                mimeType: mimeType
            });
    }
}






const $db335f98780e4c78$var$Container = (0, $hgUW1$styledcomponents).div`
  @keyframes ldio-digmt7cfm5i {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .ldio-digmt7cfm5i div {
    box-sizing: border-box !important;
  }
  .ldio-digmt7cfm5i > div {
    position: absolute;
    width: 56px;
    height: 56px;
    top: 22px;
    left: 22px;
    border-radius: 50%;
    border: 2px solid #000;
    border-color: #93dbe9 transparent #93dbe9 transparent;
    animation: ldio-digmt7cfm5i 1s linear infinite;
  }

  .ldio-digmt7cfm5i > div:nth-child(2),
  .ldio-digmt7cfm5i > div:nth-child(4) {
    width: 50px;
    height: 50px;
    top: 25px;
    left: 25px;
    animation: ldio-digmt7cfm5i 1s linear infinite reverse;
  }
  .ldio-digmt7cfm5i > div:nth-child(2) {
    border-color: transparent #689cc5 transparent #689cc5;
  }
  .ldio-digmt7cfm5i > div:nth-child(3) {
    border-color: transparent;
  }
  .ldio-digmt7cfm5i > div:nth-child(3) div {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
  }
  .ldio-digmt7cfm5i > div:nth-child(3) div:before,
  .ldio-digmt7cfm5i > div:nth-child(3) div:after {
    content: '';
    display: block;
    position: absolute;
    width: 2px;
    height: 2px;
    top: -2px;
    left: 25px;
    background: #93dbe9;
    border-radius: 50%;
    box-shadow: 0 54px 0 0 #93dbe9;
  }
  .ldio-digmt7cfm5i > div:nth-child(3) div:after {
    left: -2px;
    top: 25px;
    box-shadow: 54px 0 0 0 #93dbe9;
  }

  .ldio-digmt7cfm5i > div:nth-child(4) {
    border-color: transparent;
  }
  .ldio-digmt7cfm5i > div:nth-child(4) div {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
  }
  .ldio-digmt7cfm5i > div:nth-child(4) div:before,
  .ldio-digmt7cfm5i > div:nth-child(4) div:after {
    content: '';
    display: block;
    position: absolute;
    width: 2px;
    height: 2px;
    top: -2px;
    left: 22px;
    background: #689cc5;
    border-radius: 50%;
    box-shadow: 0 48px 0 0 #689cc5;
  }
  .ldio-digmt7cfm5i > div:nth-child(4) div:after {
    left: -2px;
    top: 22px;
    box-shadow: 48px 0 0 0 #689cc5;
  }
  .loadingio-spinner-double-ring-1s3ls2q5r59 {
    width: 83px;
    height: 83px;
    display: inline-block;
    overflow: hidden;
    background: none;
  }
  .ldio-digmt7cfm5i {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(0.83);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
  }
  .ldio-digmt7cfm5i div {
    box-sizing: content-box;
  }
`;
function $db335f98780e4c78$export$2e2bcd8739ae039() {
    return /*#__PURE__*/ (0, $hgUW1$jsx)($db335f98780e4c78$var$Container, {
        className: "loadingio-spinner-double-ring-1s3ls2q5r59",
        children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
            className: "ldio-digmt7cfm5i",
            children: [
                /*#__PURE__*/ (0, $hgUW1$jsx)("div", {}),
                /*#__PURE__*/ (0, $hgUW1$jsx)("div", {}),
                /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                    children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {})
                }),
                /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                    children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {})
                })
            ]
        })
    });
}




const $f36e68bdd4eff097$var$Container = (0, $hgUW1$styledcomponents).div`
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
`;
function $f36e68bdd4eff097$export$2e2bcd8739ae039({ loader: loader = /*#__PURE__*/ (0, $hgUW1$jsx)((0, $db335f98780e4c78$export$2e2bcd8739ae039), {}), mimeType: mimeType, src: src, onError: onError, fileName: fileName, autoPlay: autoPlay, containerErrorStyle: containerErrorStyle }) {
    const [showError, setShowError] = (0, $hgUW1$useState)(false);
    const [showLoading, setShowLoading] = (0, $hgUW1$useState)(false);
    const [fileType, setFileType] = (0, $hgUW1$useState)('');
    const handleError = (e)=>{
        setShowLoading(false);
        setShowError(true);
        onError && onError(e);
    };
    const handleLoad = (e)=>{
        setShowLoading(!e);
    };
    (0, $hgUW1$useEffect)(()=>{
        setShowLoading(true);
        setShowError(false);
        if (mimeType) setFileType(mimeType);
        else if (fileName) setFileType((0, $hgUW1$mime).getType(fileName) ?? '');
    }, [
        src,
        mimeType,
        fileName
    ]);
    if (showError) return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
        style: {
            width: '50px',
            height: '50px',
            ...containerErrorStyle || {}
        },
        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$FileIcon), {
            extension: (0, $hgUW1$mime).getExtension(fileType) ?? '',
            ...(0, $hgUW1$defaultStyles)[(0, $hgUW1$mime).getExtension(fileType)]
        })
    });
    return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
        children: [
            showLoading && loader,
            /*#__PURE__*/ (0, $hgUW1$jsx)($f36e68bdd4eff097$var$Container, {
                className: "fileViewer",
                style: {
                    visibility: showLoading ? 'hidden' : 'visible'
                },
                children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e4178ab0dc722d99$export$2e2bcd8739ae039), {
                    mimeType: fileType,
                    src: src,
                    onLoad: handleLoad,
                    onError: handleError,
                    autoPlay: autoPlay ?? false
                })
            })
        ]
    });
}


var $149c1bd638913645$export$2e2bcd8739ae039 = (0, $f36e68bdd4eff097$export$2e2bcd8739ae039);


export {$149c1bd638913645$export$2e2bcd8739ae039 as default};
//# sourceMappingURL=module.js.map