@afzalimdad9/react-file-preview/dist/file-viewer.js

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

import { __assign, __makeTemplateObject } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import DriverSelector from './drivers/driver-selector';
import MimeTypes from 'mime';
import Loading from './components/loading';
import styled from 'styled-components';
import { FileIcon, defaultStyles } from 'react-file-icon';
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"], ["\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"])));
export default function FileViewer(_a) {
    var _b;
    var _c = _a.loader, loader = _c === void 0 ? _jsx(Loading, {}) : _c, mimeType = _a.mimeType, src = _a.src, onError = _a.onError, fileName = _a.fileName, autoPlay = _a.autoPlay, containerErrorStyle = _a.containerErrorStyle;
    var _d = useState(false), showError = _d[0], setShowError = _d[1];
    var _e = useState(false), showLoading = _e[0], setShowLoading = _e[1];
    var _f = useState(''), fileType = _f[0], setFileType = _f[1];
    var handleError = function (e) {
        setShowLoading(false);
        setShowError(true);
        onError && onError(e);
    };
    var handleLoad = function (e) {
        setShowLoading(!e);
    };
    useEffect(function () {
        var _a;
        setShowLoading(true);
        setShowError(false);
        if (mimeType) {
            setFileType(mimeType);
        }
        else if (fileName) {
            setFileType((_a = MimeTypes.getType(fileName)) !== null && _a !== void 0 ? _a : '');
        }
    }, [src, mimeType, fileName]);
    if (showError) {
        return (_jsx("div", __assign({ style: __assign({ width: '50px', height: '50px' }, (containerErrorStyle || {})) }, { children: _jsx(FileIcon, __assign({ extension: (_b = MimeTypes.getExtension(fileType)) !== null && _b !== void 0 ? _b : '' }, defaultStyles[MimeTypes.getExtension(fileType)])) })));
    }
    return (_jsxs(_Fragment, { children: [showLoading && loader, _jsx(Container, __assign({ className: 'fileViewer', style: {
                    visibility: showLoading ? 'hidden' : 'visible'
                } }, { children: _jsx(DriverSelector, { mimeType: fileType, src: src, onLoad: handleLoad, onError: handleError, autoPlay: autoPlay !== null && autoPlay !== void 0 ? autoPlay : false }) }))] }));
}
var templateObject_1;
//# sourceMappingURL=file-viewer.js.map