@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
385 lines (382 loc) • 13.3 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/*
Created by Hassan Steven Compton.
March 7, 2024.
*/
import React, { useState, useEffect } from "react";
import HUDTyper from "./HUDTyper.js";
import HUDIcon from "./HUDIcon.js";
var defaultPreviewContainerStyle = {
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "auto",
width: "100%",
border: "1px solid rgba(255, 255, 255, 0.2)",
padding: "4.69px",
borderRadius: "15px",
backgroundColor: "#f9f9f9",
boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)",
marginBottom: "1.5rem",
marginTop: "1.5rem",
transition: "transform 0.3s ease, box-shadow 0.3s ease",
cursor: "pointer",
hover: {
transform: "scale(1.05)",
boxShadow: "0 15px 35px rgba(0, 0, 0, 0.4)"
}
};
var loadingStyle = {
fontSize: "18px",
color: "#282c34",
textAlign: "center",
padding: "20px"
};
var getPreviewStyle = function getPreviewStyle() {
return {
position: "relative",
display: "flex",
height: "auto",
maxWidth: "100%",
objectFit: "cover",
borderRadius: "12px",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.3)"
};
};
var textPreviewStyle = {
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: "20px",
boxSizing: "border-box",
color: "#1a1313"
};
var textContentStyle = {
fontFamily: "Arial, sans-serif",
fontSize: "1.2rem",
color: "#1a1313",
textAlign: "center"
};
var defaultFileInfoStyle = {
marginTop: "10px",
display: "flex",
flexDirection: "column",
alignItems: "center",
textAlign: "center",
color: "#282c34"
};
var fileNameStyle = {
fontWeight: "600",
color: "#282c34",
fontSize: "18.69px",
marginBottom: "6px",
gap: "3.69px",
display: "flex",
alignItems: "center",
justifyContent: "center"
};
var fileMetaStyle = {
fontSize: "14.69px",
color: "#BBBBBB",
marginBottom: "6px"
};
var defaultDownloadLinkStyle = {
transition: "transform 0.3s ease-in",
transform: "scale(1)",
textDecoration: "none",
userSelect: "none",
color: "#61dafb",
fontSize: "16px",
fontWeight: "bold",
marginBottom: "0.269rem",
marginTop: "0.469rem",
padding: "10px 20px",
borderRadius: "10px",
backgroundColor: "rgba(97, 218, 251, 0.1)",
boxShadow: "0 5px 15px rgba(97, 218, 251, 0.3)"
};
var iconOverlayStyle = {
position: "absolute",
bottom: "10px",
left: "10px",
fontSize: "12.69px",
color: "#FFFFFF",
backgroundColor: "rgba(0, 0, 0, 0.169)",
padding: "5px",
borderRadius: "50%",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: 1
};
var unsupportedStyle = {
color: "rgba(255, 69, 69, 0.8)",
fontStyle: "italic",
textAlign: "center",
width: "100%",
padding: "20px"
};
function FilePreview(_ref) {
var file = _ref.file,
directDownloadAction = _ref.directDownloadAction,
bucket = _ref.bucket,
previewContainerStyle = _ref.previewContainerStyle,
fileInfoStyle = _ref.fileInfoStyle,
downloadLinkStyle = _ref.downloadLinkStyle,
_ref$showDownloadButt = _ref.showDownloadButton,
showDownloadButton = _ref$showDownloadButt === void 0 ? true : _ref$showDownloadButt,
_ref$showFileName = _ref.showFileName,
showFileName = _ref$showFileName === void 0 ? true : _ref$showFileName,
_ref$showFileSize = _ref.showFileSize,
showFileSize = _ref$showFileSize === void 0 ? true : _ref$showFileSize,
_ref$showFileDimensio = _ref.showFileDimensions,
showFileDimensions = _ref$showFileDimensio === void 0 ? true : _ref$showFileDimensio,
_ref$showFileCreation = _ref.showFileCreationDate,
showFileCreationDate = _ref$showFileCreation === void 0 ? true : _ref$showFileCreation,
_ref$showFileLastModi = _ref.showFileLastModifiedDate,
showFileLastModifiedDate = _ref$showFileLastModi === void 0 ? true : _ref$showFileLastModi;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
downloadButtonHover = _useState2[0],
setDownloadButtonHover = _useState2[1];
var _useState3 = useState(""),
_useState4 = _slicedToArray(_useState3, 2),
fileLastModifiedDate = _useState4[0],
setFileLastModifiedDate = _useState4[1];
var _useState5 = useState(""),
_useState6 = _slicedToArray(_useState5, 2),
fileCreationDate = _useState6[0],
setFileCreationDate = _useState6[1];
var _useState7 = useState(""),
_useState8 = _slicedToArray(_useState7, 2),
textFileContent = _useState8[0],
setTextFileContent = _useState8[1];
var _useState9 = useState(""),
_useState10 = _slicedToArray(_useState9, 2),
fileDimensions = _useState10[0],
setFileDimensions = _useState10[1];
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
downloading = _useState12[0],
setDownloading = _useState12[1];
var _useState13 = useState(true),
_useState14 = _slicedToArray(_useState13, 2),
isLoading = _useState14[0],
setIsLoading = _useState14[1];
var _useState15 = useState(null),
_useState16 = _slicedToArray(_useState15, 2),
previewUrl = _useState16[0],
setPreviewUrl = _useState16[1];
var _useState17 = useState(""),
_useState18 = _slicedToArray(_useState17, 2),
contentType = _useState18[0],
setContentType = _useState18[1];
var _useState19 = useState(""),
_useState20 = _slicedToArray(_useState19, 2),
fileName = _useState20[0],
setFileName = _useState20[1];
var _useState21 = useState(""),
_useState22 = _slicedToArray(_useState21, 2),
fileSize = _useState22[0],
setFileSize = _useState22[1];
var detectContentType = function detectContentType(url) {
var extension = url.split(".").pop().toLowerCase();
switch (extension) {
case "jpg":
case "jpeg":
case "png":
case "gif":
return "image";
case "mp4":
case "webm":
case "ogg":
return "video";
case "mp3":
case "wav":
case "flac":
return "audio";
case "txt":
case "md":
case "csv":
return "text";
case "pdf":
case "doc":
case "docx":
case "xls":
case "xlsx":
case "ppt":
case "pptx":
return "application";
default:
return "unknown";
}
};
var fetchFileMetadata = function fetchFileMetadata(url) {
fetch(url, {
method: "HEAD"
}).then(function (response) {
var size = response.headers.get("content-length");
var lastModified = response.headers.get("last-modified");
var creationDate = response.headers.get("creation-date");
if (size) {
setFileSize(formatFileSize(size));
}
if (lastModified) {
setFileLastModifiedDate(new Date(lastModified).toLocaleDateString());
}
if (creationDate) {
setFileCreationDate(new Date(creationDate).toLocaleDateString());
}
})["catch"](function () {
return setFileSize("Unknown Size");
});
};
var formatFileSize = function formatFileSize(size) {
var i = Math.floor(Math.log(size) / Math.log(1024));
return (size / Math.pow(1024, i)).toFixed(2) + " " + ["B", "kB", "MB", "GB", "TB"][i];
};
var extractImageDimensions = function extractImageDimensions(file) {
var img = new Image();
img.onload = function () {
return setFileDimensions("".concat(img.width, " x ").concat(img.height));
};
img.src = URL.createObjectURL(file);
};
var renderPreview = function renderPreview() {
switch (contentType) {
case "image":
return /*#__PURE__*/React.createElement("img", {
src: previewUrl,
alt: fileName,
style: getPreviewStyle()
});
case "video":
return /*#__PURE__*/React.createElement("video", {
src: previewUrl,
controls: true,
style: getPreviewStyle()
});
case "audio":
return /*#__PURE__*/React.createElement("audio", {
src: previewUrl,
controls: true,
style: getPreviewStyle()
});
case "text":
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread({}, textPreviewStyle), getPreviewStyle())
}, /*#__PURE__*/React.createElement("label", {
style: textContentStyle
}, /*#__PURE__*/React.createElement(HUDTyper, {
speed: 3.69
}, textFileContent)));
case "application":
var encodedUrl = encodeURIComponent(previewUrl);
var viewerUrl = "https://view.officeapps.live.com/op/view.aspx?src=".concat(encodedUrl);
return /*#__PURE__*/React.createElement("iframe", {
src: viewerUrl,
frameBorder: "0",
width: "100%",
height: "400px",
style: getPreviewStyle()
});
default:
return /*#__PURE__*/React.createElement("div", {
style: unsupportedStyle
}, "Unsupported file type");
}
};
var getFileIcon = function getFileIcon() {
switch (contentType) {
case "image":
return /*#__PURE__*/React.createElement(HUDIcon, {
name: "image"
});
case "video":
return /*#__PURE__*/React.createElement(HUDIcon, {
name: "video"
});
case "audio":
return /*#__PURE__*/React.createElement(HUDIcon, {
name: "audio"
});
case "text":
return /*#__PURE__*/React.createElement(HUDIcon, {
name: "file-alt"
});
case "application":
return /*#__PURE__*/React.createElement(HUDIcon, {
name: "file"
});
default:
return /*#__PURE__*/React.createElement(HUDIcon, {
name: "question"
});
}
};
useEffect(function () {
if (typeof file === "string") {
setPreviewUrl(file);
setContentType(detectContentType(file));
setFileName(file.split("/").pop());
fetchFileMetadata(file);
} else if (file instanceof File) {
setPreviewUrl(URL.createObjectURL(file));
setContentType(file.type);
setFileName(file.name);
setFileSize(formatFileSize(file.size));
if (file.type.startsWith("image/")) {
extractImageDimensions(file);
}
} else if (file.url) {
setPreviewUrl(file.url);
setContentType(file.contentType || detectContentType(file.url));
setFileName(file.name || file.url.split("/").pop());
fetchFileMetadata(file.url);
}
setIsLoading(false);
}, [file]);
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread({}, defaultPreviewContainerStyle), previewContainerStyle)
}, isLoading ? /*#__PURE__*/React.createElement("div", {
style: loadingStyle
}, "Loading...") : previewUrl ? /*#__PURE__*/React.createElement(React.Fragment, null, renderPreview(), /*#__PURE__*/React.createElement("div", {
style: iconOverlayStyle
}, getFileIcon()), /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread({}, defaultFileInfoStyle), fileInfoStyle)
}, showFileName && /*#__PURE__*/React.createElement("div", {
style: fileNameStyle
}, fileName), showFileSize && fileSize && /*#__PURE__*/React.createElement("div", {
style: fileMetaStyle
}, "Size: ", fileSize), showFileDimensions && fileDimensions && /*#__PURE__*/React.createElement("div", {
style: fileMetaStyle
}, "Dimensions: ", fileDimensions), showFileCreationDate && fileCreationDate && /*#__PURE__*/React.createElement("div", {
style: fileMetaStyle
}, "Created: ", fileCreationDate), showFileLastModifiedDate && fileLastModifiedDate && /*#__PURE__*/React.createElement("div", {
style: fileMetaStyle
}, "Last Modified: ", fileLastModifiedDate), showDownloadButton && /*#__PURE__*/React.createElement("a", {
href: previewUrl,
download: fileName,
style: _objectSpread(_objectSpread({}, defaultDownloadLinkStyle), downloadLinkStyle),
onMouseEnter: function onMouseEnter() {
return setDownloadButtonHover(true);
},
onMouseLeave: function onMouseLeave() {
return setDownloadButtonHover(false);
},
onClick: function onClick() {
if (directDownloadAction) {
directDownloadAction(file, bucket, setDownloading);
}
}
}, downloading ? "Downloading ".concat(fileName, "...") : "Download"))) : /*#__PURE__*/React.createElement("div", {
style: unsupportedStyle
}, "Preview Unavailable"));
}
export default FilePreview;