"use strict"; exports.id = 6390; exports.ids = [6390]; exports.modules = { /***/ 9201: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (/* binding */ ChooseMediaTypePopup) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5472); /* harmony import */ var _mui_icons_material_CollectionsTwoTone__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7306); /* harmony import */ var _mui_icons_material_CollectionsTwoTone__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_mui_icons_material_CollectionsTwoTone__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var _mui_icons_material_AssignmentTwoTone__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9765); /* harmony import */ var _mui_icons_material_AssignmentTwoTone__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_mui_icons_material_AssignmentTwoTone__WEBPACK_IMPORTED_MODULE_4__); /* harmony import */ var _mui_icons_material_VideoCameraBackTwoTone__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(871); /* harmony import */ var _mui_icons_material_VideoCameraBackTwoTone__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_mui_icons_material_VideoCameraBackTwoTone__WEBPACK_IMPORTED_MODULE_5__); /* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2423); /* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(lucide_react__WEBPACK_IMPORTED_MODULE_6__); // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout; /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").UserType} props.user */ function ChooseMediaTypePopup({ user }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .ZP, { title: "choose-media-type-popoup", noContainer: true, wrapperClasses: "items-center", wrapperStyle: { alignItems: "center" }, children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "paper items-center max-w-2xl m-auto z-50 p-4 xl:p-10", children: [ /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("h4", { className: "m-0 text-center text-lg leading-tight", children: [ "What kind of Media do you", /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("br", {}), "want to upload?" ] }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", { children: "Please Select the media type to upload." }), /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "w-full grid grid-cols-1 lg:grid-cols-2 gap-6 items-stretch", children: [ /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "card cursor-pointer", onClick: (e)=>{ if (user?.verification_status?.toString().match(/1/)) { const inputEl = document.getElementById("upload_image_input"); inputEl?.click(); } else { alert("Please Verify to Add Media"); } setTimeout(()=>{ (0,_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* .closePopup */ .j4)(); }, 500); }, children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(lucide_react__WEBPACK_IMPORTED_MODULE_6__.Images, { size: 50, className: "text-primary" }), /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "content", children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", { className: "title", children: "Images" }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", { className: "text-sm", children: "General image formats like JPEG, PNG, SVG, WEBP, etc." }) ] }) ] }), /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "card cursor-pointer", onClick: (e)=>{ if (user?.verification_status?.toString().match(/1/)) { document.getElementById("upload_file_input")?.click(); } else { alert("Please Verify to Add Media"); } (0,_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* .closePopup */ .j4)(); }, children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(lucide_react__WEBPACK_IMPORTED_MODULE_6__.Files, { size: 50, className: "text-secondary" }), /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "content", children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", { className: "title", children: "Files" }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", { className: "text-sm", children: "Other documents type. Like PDF, XLSX, CSV, etc." }) ] }) ] }) ] }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", { className: "w-full grid grid-cols-1 lg:grid-cols-2 gap-6 items-stretch", children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "card cursor-pointer", onClick: (e)=>{ if (user?.verification_status?.toString().match(/1/)) { document.getElementById("upload_video_input")?.click(); } else { alert("Please Verify to Add Media"); } (0,_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* .closePopup */ .j4)(); }, children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(lucide_react__WEBPACK_IMPORTED_MODULE_6__.FileVideo2, { size: 55, className: "text-slate-600" }), /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "content", children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", { className: "title", children: "Videos" }), /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("span", { className: "text-sm", children: [ "Video Files. ", /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("b", { children: "MP4" }), " for now. These files can be streamed. Max 200mb" ] }) ] }) ] }) }) ] }) }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /***/ }), /***/ 7604: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { // EXPORTS __webpack_require__.d(__webpack_exports__, { "Z": () => (/* binding */ MediaList) }); // EXTERNAL MODULE: external "react/jsx-runtime" var jsx_runtime_ = __webpack_require__(997); // EXTERNAL MODULE: external "react" var external_react_ = __webpack_require__(6689); var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_); // EXTERNAL MODULE: ./functions/frontend/fetchApi.js var fetchApi = __webpack_require__(6729); // EXTERNAL MODULE: external "@mui/icons-material/FolderCopyTwoTone" var FolderCopyTwoTone_ = __webpack_require__(8398); var FolderCopyTwoTone_default = /*#__PURE__*/__webpack_require__.n(FolderCopyTwoTone_); // EXTERNAL MODULE: external "@mui/icons-material/DeleteOutlineOutlined" var DeleteOutlineOutlined_ = __webpack_require__(8757); var DeleteOutlineOutlined_default = /*#__PURE__*/__webpack_require__.n(DeleteOutlineOutlined_); // EXTERNAL MODULE: ./components/general/LoadingBlock.jsx var LoadingBlock = __webpack_require__(5264); ;// CONCATENATED MODULE: ./components/admin/media/MediaFolderCard.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {string} props.folderName * @param {string} [props.folder] * @param {import("@/package-shared/types").UserType} props.user */ function MediaFolderCard({ folderName , folder , user }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ const fullFolderName = `${folder ? folder + "/" : ""}${folderName}`; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [loading, setLoading] = external_react_default().useState(false); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("a", { href: `/admin/${user?.id}/media/${fullFolderName}`, className: "card col items-center justify-center", onClick: (e)=>{ // @ts-ignore if (e.target.closest("button")) return e.preventDefault(); }, children: [ loading && /*#__PURE__*/ jsx_runtime_.jsx(LoadingBlock/* default */.Z, {}), /*#__PURE__*/ jsx_runtime_.jsx((FolderCopyTwoTone_default()), { sx: { fontSize: 100 }, className: "opacity-20" }), /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "absolute top-4 left-4 text-xs bg-slate-200 dark:bg-slate-700 px-2 py-0.5 rounded-full", children: "Folder" }), /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "", children: folderName }), /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "plain-text absolute top-2 right-2", onClick: (e)=>{ if (window.confirm("Delete this Folder and all its contents?")) { setLoading(true); if (window.confirm("NOTE: this folder and all its contents will be permanently lost. Continue?")) { (0,fetchApi/* default */.Z)("/api/deleteMediaFolder", { method: "post", body: { folder: fullFolderName } }, true).then((res)=>{ if (res.success) window.location.reload(); }); } else { setLoading(false); } } }, children: /*#__PURE__*/ jsx_runtime_.jsx((DeleteOutlineOutlined_default()), { // fontSize="small" className: "opacity-30" }) }) ] }, folderName); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ // EXTERNAL MODULE: ./components/general/GeneralPopup.jsx var GeneralPopup = __webpack_require__(5472); // EXTERNAL MODULE: ./components/general/ui/ButtonGroup.jsx var ButtonGroup = __webpack_require__(5449); // EXTERNAL MODULE: ./functions/frontend/downloadFile.js var downloadFile = __webpack_require__(8826); // EXTERNAL MODULE: external "@mui/icons-material/AssignmentTwoTone" var AssignmentTwoTone_ = __webpack_require__(9765); var AssignmentTwoTone_default = /*#__PURE__*/__webpack_require__.n(AssignmentTwoTone_); ;// CONCATENATED MODULE: ./components/admin/media/card/MediaPreviewSection.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").MYSQL_user_media_table_def} props.mediaObject - Media Object * @param {string} props.staticHost */ function MediaPreviewSection({ mediaObject , staticHost }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ const mediaThumbnailUrl = mediaObject.media_thumbnail_path ? mediaObject?.private ? mediaObject.media_thumbnail_url : `${staticHost}${mediaObject.media_thumbnail_path}` : mediaObject.media_thumbnail_url; const mediaUrl = mediaObject.media_path ? mediaObject?.private ? mediaObject.media_url : `${staticHost}${mediaObject.media_path}` : mediaObject.media_url; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, { children: mediaObject.media_type?.match(/file/i) ? /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "cursor-pointer hover:opacity-80", children: [ /*#__PURE__*/ jsx_runtime_.jsx((AssignmentTwoTone_default()), { sx: { fontSize: 100 }, className: "opacity-10" }), /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "info w-auto small gray absolute top-4 right-4", children: mediaObject.media_type.replace(/.*\//, "").toUpperCase() }) ] }) : mediaObject.media_type?.match(/video/i) ? /*#__PURE__*/ jsx_runtime_.jsx("video", { src: mediaUrl, className: "w-full h-60 object-cover", controls: true, muted: true, autoPlay: true, loop: true }) : /*#__PURE__*/ jsx_runtime_.jsx("img", { src: mediaThumbnailUrl, alt: mediaObject.media_name, className: "w-full h-60 object-cover bg-slate-200 rounded", onError: (e)=>{ if (mediaObject?.private) { return; } (0,fetchApi/* default */.Z)("/api/purgeDb", { method: "post", body: { paradigm: "user_media", payload: mediaObject } }, true).then((res)=>{ if (res.success) { window.location.reload(); } else { console.log(res); console.log(mediaThumbnailUrl); console.log(mediaUrl); } }); } }) }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ // EXTERNAL MODULE: ./components/admin/media/card/MediaMoreButton.jsx var MediaMoreButton = __webpack_require__(4642); ;// CONCATENATED MODULE: ./components/admin/media/card/MediaLinksDropdown.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").MYSQL_user_media_table_def} props.mediaObject - Media Object * @param {string} props.staticHost */ function MediaLinksDropdown({ mediaObject , staticHost }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ const mediaThumbnailUrl = mediaObject.media_thumbnail_path ? `${staticHost}/${mediaObject.media_thumbnail_path}` : mediaObject.media_thumbnail_url; const mediaUrl = mediaObject.media_path ? `${staticHost}/${mediaObject.media_path}` : mediaObject.media_url; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ if (mediaObject?.private) { return /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, {}); } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "dropdown-wrapper w-full xl:w-auto", children: [ /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "outlined secondary small-text w-full hidden xl:flex bg-secondary/10", children: "Copy Link" }), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "dropdown mobile-transform gap-2 w-full", children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)(ButtonGroup/* default */.Z, { column: true, className: "w-full mb-2 xl:mb-0", children: [ /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "gray outlined normal-weight more-padding", onClick: (e)=>{ navigator.clipboard.writeText(mediaObject.media_url || "").then(()=>{ alert(`Media url ${mediaObject.media_url} Copied to clipboard`); }); }, children: "Copy Full Link" }), !mediaObject?.media_type?.match(/file|video/i) && /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "gray outlined normal-weight more-padding", onClick: (e)=>{ navigator.clipboard.writeText(mediaObject.media_thumbnail_url || "").then(()=>{ alert(`Media url ${mediaObject.media_thumbnail_url} Copied to clipboard`); }); }, children: "Copy Thumbnail Link" }) ] }) }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ // EXTERNAL MODULE: external "@mui/icons-material/LockOpenOutlined" var LockOpenOutlined_ = __webpack_require__(8083); // EXTERNAL MODULE: external "@mui/icons-material/LockPersonRounded" var LockPersonRounded_ = __webpack_require__(4624); // EXTERNAL MODULE: external "lucide-react" var external_lucide_react_ = __webpack_require__(2423); ;// CONCATENATED MODULE: ./components/admin/media/card/MediaPrivacyButton.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").MYSQL_user_media_table_def} props.mediaObject - Media Object * @param {React.Dispatch>} props.setLoading - Set loading function */ function MediaPrivacyButton({ mediaObject , setLoading }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [isPrivate, setIsPrivate] = external_react_default().useState(false); if (mediaObject?.media_type?.match(/video/i)) { return null; } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "light-gray p-2 w-8 h-8 rounded-full absolute top-4 left-4 bg-white" + (mediaObject?.private ? " " : " text-slate-400 fill-slate-400"), style: { backgroundColor: "white" }, onClick: (e)=>{ const confirmText = mediaObject.private ? "This media is private: Make it public?" : "Make this media Private?"; if (window.confirm(confirmText)) { setLoading(true); (0,fetchApi/* default */.Z)("/api/media/addPrivateMedia", { method: "post", body: { ...mediaObject } }, true).then((res)=>{ if (res.success) { window.location.reload(); } else { window.alert("Action Failed!"); } setTimeout(()=>{ setLoading(false); }, 1000); }).catch((err)=>{ console.log(err); }); } }, children: mediaObject?.private ? /*#__PURE__*/ jsx_runtime_.jsx(external_lucide_react_.Lock, { size: 20, color: "green" }) : /*#__PURE__*/ jsx_runtime_.jsx(external_lucide_react_.LockOpen, { color: "black", size: 20 }) }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ // EXTERNAL MODULE: ./functions/frontend/downloadPrivateFile.js var downloadPrivateFile = __webpack_require__(8436); ;// CONCATENATED MODULE: ./components/admin/media/card/MediaListCard.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").MYSQL_user_media_table_def} props.mediaObject * @param {React.Dispatch>} props.setTargetMedia * @param {string} props.staticHost * @param {string} [props.folder] */ function MediaListCard({ mediaObject , setTargetMedia , folder , staticHost , }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [loading, setLoading] = external_react_default().useState(mediaObject?.private ? true : false); const [updatedMediaObject, setUpdatedMediaObject] = external_react_default().useState(mediaObject); external_react_default().useEffect(()=>{ if (mediaObject?.private && mediaObject.media_thumbnail_url && !updatedMediaObject.media_type?.match(/file/i)) { (0,downloadPrivateFile/* default */.Z)({ url: mediaObject.media_thumbnail_url }).then((res)=>{ setUpdatedMediaObject({ ...mediaObject, media_thumbnail_url: res }); setLoading(false); }).catch((err)=>{ console.log(err.message); }); } else if (loading) { setLoading(false); } }, []); const mediaThumbnailUrl = updatedMediaObject.media_thumbnail_path ? `${staticHost}/${updatedMediaObject.media_thumbnail_path}` : updatedMediaObject.media_thumbnail_url; const mediaUrl = updatedMediaObject.media_path ? `${staticHost}/${updatedMediaObject.media_path}` : updatedMediaObject.media_url; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "media-card card col", onClick: (e)=>{ // @ts-ignore if (e.target.closest("button") || e.target.closest(".button")) return; if (updatedMediaObject.media_type?.match(/file/i) && !updatedMediaObject.private) { const url = mediaUrl; window.open(url, "__blank"); return; } else if (updatedMediaObject.media_type?.match(/file/i) && updatedMediaObject.private) { return; } setTargetMedia(updatedMediaObject); (0,GeneralPopup/* openPopup */.Mw)("target-media-popup"); }, onMouseEnter: (e)=>{ // @ts-ignore e.target.closest(".media-card").style.zIndex = "10"; }, onMouseLeave: (e)=>{ // @ts-ignore e.target.closest(".media-card").style.zIndex = "0"; }, style: updatedMediaObject?.private ? { outline: "5px solid var(--sec-color-light)", borderColor: "var(--sec-color-lighter)" } : {}, children: [ loading && /*#__PURE__*/ jsx_runtime_.jsx(LoadingBlock/* default */.Z, {}), /*#__PURE__*/ jsx_runtime_.jsx(MediaPreviewSection, { mediaObject: updatedMediaObject, staticHost: staticHost }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "flex-col items-center xl:items-start flex-wrap w-full mt-auto", children: [ /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "w-full", style: { wordBreak: "break-all" }, children: updatedMediaObject.media_name }), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "flex-wrap w-full", children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)(ButtonGroup/* default */.Z, { className: "flex-wrap w-full items-stretch", children: [ /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "secondary small-text relative w-full xl:w-auto mb-2 xl:mb-0", onClick: (e)=>{ (0,downloadFile/* default */.Z)({ mediaObject: updatedMediaObject, fileName: mediaUrl?.match(/[^\/]+$/)?.[0] || "", setLoading: setLoading }); }, children: /*#__PURE__*/ jsx_runtime_.jsx("span", { children: "Download" }) }), /*#__PURE__*/ jsx_runtime_.jsx(MediaLinksDropdown, { mediaObject: updatedMediaObject, staticHost: staticHost }), /*#__PURE__*/ jsx_runtime_.jsx(MediaMoreButton/* default */.Z, { mediaObject: updatedMediaObject, setLoading: setLoading }) ] }) }) ] }), /*#__PURE__*/ jsx_runtime_.jsx(MediaPrivacyButton, { mediaObject: updatedMediaObject, setLoading: setLoading }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ // EXTERNAL MODULE: external "@mui/icons-material/PermMediaTwoTone" var PermMediaTwoTone_ = __webpack_require__(5580); var PermMediaTwoTone_default = /*#__PURE__*/__webpack_require__.n(PermMediaTwoTone_); ;// CONCATENATED MODULE: ./components/admin/media/MediaList.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {any[]} [props.media] * @param {React.Dispatch>} props.setTargetMedia * @param {string} props.staticHost * @param {string[]} [props.folders] * @param {string} [props.folder] * @param {import("@/package-shared/types").UserType} props.user */ function MediaList({ media , setTargetMedia , folders , folder , staticHost , user , }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, { children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)("section", { className: "paper overflow-visible", children: [ /*#__PURE__*/ jsx_runtime_.jsx("h2", { className: "text-xl m-0", children: "Media List" }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "w-full gap-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 items-stretch", children: [ folders && folders[0] && folders.map((folderName)=>{ return /*#__PURE__*/ jsx_runtime_.jsx(MediaFolderCard, { folder: folder, folderName: folderName, user: user }, folderName); }), media && media[0] && media.map((mediaObject)=>{ return /*#__PURE__*/ jsx_runtime_.jsx(MediaListCard, { mediaObject: mediaObject, setTargetMedia: setTargetMedia, folder: folder, staticHost: staticHost }, mediaObject.id); }) ] }), !media?.[0] && /*#__PURE__*/ jsx_runtime_.jsx(NewMediaBanner, {}) ] }) }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ function NewMediaBanner() { return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "button outlined gray dashed w-full p-10 flex-col", onClick: (e)=>{ (0,GeneralPopup/* openPopup */.Mw)("choose-media-type-popoup"); }, children: [ /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "text-slate-400", children: "No Media Added." }), /*#__PURE__*/ jsx_runtime_.jsx((PermMediaTwoTone_default()), { color: "inherit", sx: { fontSize: 80 }, className: "opacity-40 text-gray-500" }), /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "", children: "Add Media" }) ] }); } /***/ }), /***/ 1597: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (/* binding */ NewFolderPopup) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6729); /* harmony import */ var _general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5472); /* harmony import */ var _general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5264); // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** @type {any} */ let timeout; /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {string} [props.folder] */ function NewFolderPopup({ folder }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [loading, setLoading] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false); const [existingFolder, setExistingFolder] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .ZP, { title: "add-folder-popoup", children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h4", { className: "m-0", children: "Add A New Folder" }), /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "flex-col w-full relative", children: [ loading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {}), /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("form", { onSubmit: (e)=>{ e.preventDefault(); window.clearTimeout(timeout); setLoading(true); /** @type {HTMLFormElement} */ // @ts-ignore const formEl = e.target; (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)("/api/addNewMediaFolder", { method: "post", body: { name: (folder ? `${folder}/` : "") + formEl["new-folder-name"].value } }, true).then((res)=>{ if (res.success) { window.location.reload(); } else { setLoading(false); } }); }, className: "w-full flex flex-col items-stretch gap-2", children: [ existingFolder && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", { className: "text-xs text-orange-700 bg-orange-100 flex items-center justify-center rounded px-2 py-1", children: "Folder Already Exists. Please Change the name." }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", { type: "text", name: "new-folder-name", id: "new-folder-name", placeholder: "New Folder Name", className: "w-full" + (existingFolder ? " warning" : ""), onChange: (e)=>{ e.target.value = e.target.value.toLocaleLowerCase().replace(/ /g, "-"); window.clearTimeout(timeout); timeout = setTimeout(()=>{ (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)(`/api/checkExistingFolder?name=${e.target.value}${folder ? "&folder=" + folder : ""}`).then((res)=>{ if (e.target.value?.match(/./) && res?.success) { setExistingFolder(true); alert("Folder Already Exists"); } else { setExistingFolder(false); } }); }, 500); } }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", { children: "Add New Folder" }) ] }) ] }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /***/ }), /***/ 4891: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { // EXPORTS __webpack_require__.d(__webpack_exports__, { "Z": () => (/* binding */ NewMediaPopup) }); // EXTERNAL MODULE: external "react/jsx-runtime" var jsx_runtime_ = __webpack_require__(997); // EXTERNAL MODULE: external "react" var external_react_ = __webpack_require__(6689); var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_); // EXTERNAL MODULE: ./functions/frontend/fetchApi.js var fetchApi = __webpack_require__(6729); // EXTERNAL MODULE: ./functions/frontend/updateDiskUsage.js var updateDiskUsage = __webpack_require__(1069); // EXTERNAL MODULE: ./components/general/GeneralPopup.jsx var GeneralPopup = __webpack_require__(5472); // EXTERNAL MODULE: ./components/general/LoadingBlock.jsx var LoadingBlock = __webpack_require__(5264); // EXTERNAL MODULE: external "@mui/icons-material/LockOpenOutlined" var LockOpenOutlined_ = __webpack_require__(8083); var LockOpenOutlined_default = /*#__PURE__*/__webpack_require__.n(LockOpenOutlined_); // EXTERNAL MODULE: external "@mui/icons-material/LockPersonRounded" var LockPersonRounded_ = __webpack_require__(4624); var LockPersonRounded_default = /*#__PURE__*/__webpack_require__.n(LockPersonRounded_); ;// CONCATENATED MODULE: ./components/admin/media/TogglePrivacyButton.jsx // @ts-check /** * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").ImageObjectType | import("@/package-shared/types").FileObjectType} props.mediaObject - Single Image or file object */ function TogglePrivacyButton({ mediaObject }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [privacy, setPrivacy] = external_react_.useState(false); external_react_.useEffect(()=>{ mediaObject.private = privacy; }, [ privacy ]); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "light-gray p-2 w-8 h-8 rounded-full absolute top-2 left-2 bg-white" + (privacy ? " " : " text-slate-400 fill-slate-400"), style: { backgroundColor: "white" }, onClick: (e)=>{ setPrivacy((prev)=>!prev); }, children: privacy ? /*#__PURE__*/ jsx_runtime_.jsx((LockPersonRounded_default()), { fontSize: "small", color: "secondary" }) : /*#__PURE__*/ jsx_runtime_.jsx((LockOpenOutlined_default()), { fontSize: "small", className: "fill-inherit text-inherit" }) }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ ;// CONCATENATED MODULE: ./components/admin/media/NewMediaCard.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * @typedef {import("@/package-shared/types").ImageObjectType & import("@/package-shared/types").FileObjectType} MediaType */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {MediaType} props.imageObject - Single Image object * @param {MediaType[]} props.newMedia - Origin Array of media objects * @param {React.Dispatch>} props.setNewMedia - Set media Dispatch => React setState * @param {boolean} [props.video] - Is this a video object */ function NewMediaCard({ imageObject , newMedia , setNewMedia , video , }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ const finalFileObject = imageObject; const finalFileSrc = finalFileObject.imageBase64Full || finalFileObject.fileBase64Full; let finalFileName = finalFileObject.imageName || finalFileObject.fileName; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "border border-slate-300 rounded max-h-44 flex-col w-full overflow-hidden h-full bg-slate-200 relative p-2", children: [ video ? /*#__PURE__*/ jsx_runtime_.jsx("video", { src: finalFileSrc, className: "w-full h-full object-contain", muted: true, autoPlay: true, controls: true }) : /*#__PURE__*/ jsx_runtime_.jsx("img", { src: finalFileSrc, alt: finalFileName, className: "w-full h-full object-contain" }), /*#__PURE__*/ jsx_runtime_.jsx("input", { type: "text", defaultValue: finalFileName, onInput: (e)=>{ // @ts-ignore const value = e.target.value?.replace(/ /g, "-"); if (imageObject.fileName) { imageObject.fileName = value; } if (imageObject.imageName) { imageObject.imageName = value; } }, className: "absolute bottom-1 text-sm left-2 px-2 py-1", style: { width: "calc(100% - 15px)" } }), /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "outlined bg-white absolute top-2 right-2 p-1 w-8 h-8 rounded-full", style: { backgroundColor: "white", borderColor: "var(--slate-200)" }, onClick: (e)=>{ let spliceIndex = newMedia.findIndex((media)=>media.imageBase64 === imageObject.imageBase64 || media.fileBase64 === imageObject.fileBase64); let newMediaArray = newMedia; newMediaArray.splice(spliceIndex, 1); setNewMedia([ ...newMediaArray ]); }, children: "✖" }), !video && /*#__PURE__*/ jsx_runtime_.jsx(TogglePrivacyButton, { mediaObject: imageObject }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ // EXTERNAL MODULE: external "@mui/icons-material/AssignmentTwoTone" var AssignmentTwoTone_ = __webpack_require__(9765); var AssignmentTwoTone_default = /*#__PURE__*/__webpack_require__.n(AssignmentTwoTone_); ;// CONCATENATED MODULE: ./components/admin/media/NewFileCard.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").FileObjectType} props.fileObject - Single Image object * @param {import("@/package-shared/types").FileObjectType[]} props.newFile - Origin Array of media objects * @param {React.Dispatch>} props.setNewFile - Set media Dispatch => React setState */ function NewFileCard({ fileObject , newFile , setNewFile }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "border border-slate-300 rounded max-h-44 flex-col w-full overflow-hidden h-full bg-slate-200 relative p-2", children: [ /*#__PURE__*/ jsx_runtime_.jsx((AssignmentTwoTone_default()), { sx: { fontSize: 100 }, className: "opacity-20" }), /*#__PURE__*/ jsx_runtime_.jsx("input", { type: "text", defaultValue: fileObject.fileName, onInput: (e)=>{ // @ts-ignore fileObject.fileName = e.target.value?.replace(/ /g, "-"); }, className: "absolute bottom-1 text-sm left-2 px-2 py-1", style: { width: "calc(100% - 15px)" } }), /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "outlined bg-white absolute top-2 right-2 p-1 w-8 h-8 rounded-full", style: { backgroundColor: "white", borderColor: "var(--slate-200)" }, onClick: (e)=>{ let spliceIndex = newFile.findIndex((file)=>file.fileBase64 === fileObject.fileBase64); let newFileArray = newFile; newFileArray.splice(spliceIndex, 1); setNewFile([ ...newFileArray ]); }, children: "✖" }), /*#__PURE__*/ jsx_runtime_.jsx(TogglePrivacyButton, { mediaObject: fileObject }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ ;// CONCATENATED MODULE: ./components/admin/media/NewMediaPopup.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").ImageObjectType[] | null} props.newMedia * @param {React.Dispatch>} props.setNewMedia * @param {import("@/package-shared/types").FileObjectType[] | null} [props.newFile] * @param {React.Dispatch>} props.setNewFile * @param {import("@/package-shared/types").FileObjectType[] | null} [props.newVideo] * @param {React.Dispatch>} props.setNewVideo * @param {string} [props.folder] */ function NewMediaPopup({ newMedia , setNewMedia , newFile , setNewFile , newVideo , setNewVideo , folder , }) { /** * Javascript Variables * * @abstract Non hook variables and functions */ const type = newMedia?.[0] ? "images" : newFile?.[0] ? "files" : "videos"; const array = type?.match(/image/i) ? newMedia : type?.match(/file/i) ? newFile : newVideo; const dispatch = type?.match(/image/i) ? setNewMedia : type?.match(/file/i) ? setNewFile : setNewVideo; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [loading, setLoading] = external_react_default().useState(false); external_react_default().useEffect(()=>{ if (array && array[0]) (0,GeneralPopup/* openPopup */.Mw)("new-media-popup"); // if (type?.match(/image/i)) { // } else { // openPopup("new-media-popup"); // } }, [ newMedia, newFile, newVideo ]); /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)(GeneralPopup/* default */.ZP, { title: "new-media-popup", closePopupDispatch: ()=>{ setNewMedia(null); setNewFile(null); setNewVideo(null); }, children: [ loading && /*#__PURE__*/ jsx_runtime_.jsx(LoadingBlock/* default */.Z, { screen: true }), /*#__PURE__*/ jsx_runtime_.jsx("h4", { className: "m-0", children: "Upload New Media" }), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "grid grid-cols-2 gap-4 w-full", children: array && array[0] && array.map((media, index)=>{ if (type?.match(/image/i)) { return /*#__PURE__*/ jsx_runtime_.jsx(NewMediaCard, { // @ts-ignore imageObject: media, // @ts-ignore newMedia: array, // @ts-ignore setNewMedia: dispatch }, index + 1); } if (type?.match(/video/i)) { return /*#__PURE__*/ jsx_runtime_.jsx(NewMediaCard, { // @ts-ignore imageObject: media, // @ts-ignore newMedia: array, // @ts-ignore setNewMedia: dispatch, video: true }, index + 1); } return /*#__PURE__*/ jsx_runtime_.jsx(NewFileCard, { // @ts-ignore fileObject: media, // @ts-ignore newFile: array, // @ts-ignore setNewFile: dispatch }, index + 1); }) }), array && array[0] && /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "py-3 w-full relative z-50" + (loading ? " pointer-events-none opacity-40" : ""), onClick: (e)=>{ setLoading(true); const fetchObject = type?.match(/image/i) ? { type: type, folder: folder, media: array.map((media)=>{ return { // @ts-ignore imageBase64: media.imageBase64, // @ts-ignore imageName: media.imageName, // @ts-ignore imageSize: media.imageSize, // @ts-ignore private: media.private }; }) } : { type: type, folder: folder, media: array.map((media)=>{ return { // @ts-ignore fileBase64: media.fileBase64, // @ts-ignore fileName: media.fileName, // @ts-ignore fileSize: media.fileSize, // @ts-ignore fileType: media.fileType, // @ts-ignore private: media.private, video: Boolean(type?.match(/video/i)) }; }) }; (0,fetchApi/* default */.Z)("/api/addUserMedia", { method: "post", body: fetchObject }, true).then((res)=>{ if (res.success) { (0,updateDiskUsage/* default */.Z)().then(()=>{ window.location.reload(); }); } else { alert("Image Upload Failed"); console.log(res); setTimeout(()=>{ setLoading(false); }, 1000); } }); }, children: "Upload Media" }) ] }); } /***/ }), /***/ 3428: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (/* binding */ TargetMediaPreviewPopup) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(6729); /* harmony import */ var _functions_frontend_updateDiskUsage__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(1069); /* harmony import */ var _general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5472); /* harmony import */ var _general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5264); /* harmony import */ var _general_ui_ButtonGroup__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5449); /* harmony import */ var _functions_frontend_downloadFile__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(8826); /* harmony import */ var _functions_frontend_downloadPrivateFile__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8436); /* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2423); /* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(lucide_react__WEBPACK_IMPORTED_MODULE_5__); /* harmony import */ var _card_MediaMoreButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4642); // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").MYSQL_user_media_table_def | null} props.targetMedia * @param {string} props.staticHost * @param {React.Dispatch>} props.setTargetMedia * @param {import("@/package-shared/types").MYSQL_user_media_table_def[]} props.media */ function TargetMediaPreviewPopup({ targetMedia , staticHost , setTargetMedia , media , }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ const mediaOriginThumbnailUrl = targetMedia?.media_thumbnail_path ? `${staticHost}/${targetMedia?.media_thumbnail_path}` : targetMedia?.media_thumbnail_url; const mediaOriginUrl = targetMedia?.media_path ? `${staticHost}/${targetMedia?.media_path}` : targetMedia?.media_url; const isVideo = Boolean(targetMedia?.media_type?.match(/video/i)); const targetMediaIndex = targetMedia ? media.findIndex((snMedia)=>snMedia.id == targetMedia.id) : null; const isMediaIndex = typeof targetMediaIndex == "number" && targetMediaIndex >= 0; const nextMedia = (()=>{ if (!isMediaIndex) return null; const targetNextMedia = media[targetMediaIndex + 1]; if (!targetNextMedia) return null; if (!targetNextMedia?.media_type?.match(/image/i)) { const nextMedia = media.slice(targetMediaIndex + 1).find((med)=>{ if (med.media_type?.match(/image/i)) return true; return false; }); if (nextMedia) return nextMedia; return null; } return targetNextMedia; })(); const prevMedia = (()=>{ if (!isMediaIndex) return null; const targetPrevMedia = media[targetMediaIndex - 1]; if (!targetPrevMedia) return null; if (!targetPrevMedia?.media_type?.match(/image/i)) { const prevMedia = media.slice(0, targetMediaIndex - 1).findLast((med)=>{ if (med.media_type?.match(/image/i)) return true; return false; }); if (prevMedia) return prevMedia; return null; } return targetPrevMedia; })(); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [loading, setLoading] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(targetMedia?.private ? true : false); const [ready, setReady] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false); const [mediaUrl, setMediaUrl] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(mediaOriginUrl); /** * @type {React.RefObject} */ // @ts-ignore const imageRef = react__WEBPACK_IMPORTED_MODULE_1___default().useRef(); react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(()=>{ if (targetMedia?.private) { (0,_functions_frontend_downloadPrivateFile__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z)({ url: targetMedia.media_url || "" }).then((res)=>{ if (res) { setMediaUrl(res); setLoading(false); } }).catch((err)=>{ console.log(err.message); }); } else { setMediaUrl(targetMedia?.media_url || ""); } }, [ targetMedia ]); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .ZP, { title: "target-media-popup", noContainer: true, fullPage: true, closePopupDispatch: ()=>{ setReady(false); setTargetMedia(null); }, children: [ loading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {}), !ready && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {}), targetMedia && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), { children: [ /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "self-center h-screen py-4", children: [ mediaUrl ? isVideo ? /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("video", { src: mediaUrl, className: "w-full h-full object-cover", controls: true, muted: true, autoPlay: true, loop: true, onCanPlay: ()=>{ setReady(true); }, style: ready ? undefined : { display: "none" } }) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("img", { src: mediaUrl, alt: targetMedia.media_name, className: "bg-slate-200 rounded w-full h-full object-contain", ref: imageRef, onLoad: (e)=>{ setReady(true); }, style: ready ? undefined : { display: "none" } }) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {}), prevMedia && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", { className: "absolute left-5 md:left-10 z-[100] cursor-pointer p-5 bg-slate-800/40 rounded-full", onClick: (e)=>{ setTargetMedia(null); setTargetMedia(prevMedia); }, children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(lucide_react__WEBPACK_IMPORTED_MODULE_5__.ChevronLeft, { color: "white" }) }), nextMedia && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", { className: "absolute right-5 md:right-10 z-[100] cursor-pointer p-5 bg-slate-800/40 rounded-full", onClick: (e)=>{ setTargetMedia(null); setTargetMedia(nextMedia); }, children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(lucide_react__WEBPACK_IMPORTED_MODULE_5__.ChevronRight, { color: "white" }) }) ] }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", { className: "info gray absolute top-5 left-5 w-auto mr-5", style: { backgroundColor: "white" }, children: targetMedia.media_path?.replace(/.*\//, "") }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", { className: "absolute bottom-6 left-6 p-2 bg-white dark:bg-slate-900 rounded z-20 hidden lg:flex flex-col items-stretch", children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_general_ui_ButtonGroup__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, { column: true, children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_card_MediaMoreButton__WEBPACK_IMPORTED_MODULE_6__/* .RenameMediaButton */ ._, { mediaObject: targetMedia, setLoading: setLoading }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", { className: "outlined secondary more-padding", onClick: (e)=>{ (0,_functions_frontend_downloadFile__WEBPACK_IMPORTED_MODULE_8__/* ["default"] */ .Z)({ mediaObject: targetMedia, fileName: targetMedia.media_url?.match(/[^\/]+$/)?.[0] || "", setLoading: setLoading }); }, children: "Download" }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", { onClick: (e)=>{ if (window.confirm(`Delete this media?`)) { (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_9__/* ["default"] */ .Z)("/api/deleteUserMedia", { method: "post", body: targetMedia }, true).then((res)=>{ if (res.success) { (0,_functions_frontend_updateDiskUsage__WEBPACK_IMPORTED_MODULE_10__/* ["default"] */ .Z)().then(()=>{ window.location.reload(); }); } else { alert("Media deletion Failed! Please try again."); } }); } }, className: "more-padding", children: "Delete" }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", { className: "outlined gray w-full bg-white more-padding", onClick: (e)=>{ navigator.clipboard.writeText(targetMedia.media_url || "").then(()=>{ alert(`Media url ${targetMedia.media_url} Copied to clipboard`); }); }, children: "Copy Full Image Link" }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", { className: "outlined gray w-full more-padding", onClick: (e)=>{ navigator.clipboard.writeText(targetMedia.media_thumbnail_url || "").then(()=>{ alert(`Media url ${targetMedia.media_thumbnail_url} Copied to clipboard`); }); }, style: { borderTop: "1px solid #0b8862" }, children: "Copy Image Thumbnail Link" }) ] }) }) ] }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /***/ }), /***/ 4642: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (/* binding */ MediaMoreButton), /* harmony export */ "_": () => (/* binding */ RenameMediaButton) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6729); /* harmony import */ var _functions_frontend_updateDiskUsage__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1069); /* harmony import */ var _general_ui_ButtonGroup__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5449); // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").MYSQL_user_media_table_def} props.mediaObject - Media Object * @param {React.Dispatch>} props.setLoading - Set loading function */ function MediaMoreButton({ mediaObject , setLoading }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "dropdown-wrapper w-full xl:w-auto", children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", { className: "outlined gray small-text hidden xl:flex", children: "More" }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", { className: "dropdown mobile-transform gap-2 w-full", children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_general_ui_ButtonGroup__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, { column: true, className: "w-full mb-2 xl:mb-0", children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(RenameMediaButton, { mediaObject, setLoading }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", { className: "outlined gray normal-weight more-padding w-full xl:w-auto", onClick: (e)=>{ if (window.confirm(`Delete this media?`)) { (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)("/api/deleteUserMedia", { method: "post", body: mediaObject }, true).then((res)=>{ if (res.success) { (0,_functions_frontend_updateDiskUsage__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)().then(()=>{ window.location.reload(); }); } else { alert("Media deletion Failed! Please try again."); } }); } }, children: "Delete" }) ] }) }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * # Rename Media * @param {object} props * @param {import("@/package-shared/types").MYSQL_user_media_table_def} props.mediaObject - Media Object * @param {React.Dispatch>} props.setLoading - Set loading function */ function RenameMediaButton({ mediaObject , setLoading }) { return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", { onClick: (e)=>{ const newName = window.prompt(`Rename media`, mediaObject.media_name); if (newName && window.confirm(`Rename "${mediaObject.media_name}" to "${newName}"`)) { setLoading(true); (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)("/api/renameMedia", { method: "post", body: { mediaObject: mediaObject, newName: newName.replace(/ /g, "-"), newThumbnailName: newName.replace(/ /g, "-") + "_thumbnail" } }, true).then((res)=>{ if (res.success) { window.location.reload(); } else { window.alert(res.msg); setTimeout(()=>{ setLoading(false); }, 1000); } }); } }, className: "outlined gray normal-weight more-padding", children: "Rename" }); } /***/ }), /***/ 8916: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (/* binding */ UploadFileComponent) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _functions_frontend_inputFileToBase64__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3314); // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - React component props including { children } * @param {React.Dispatch>} props.setNewFile - Set files array => React.useState dispatch Function * @param {React.Dispatch>} props.setLoading - Set Page loading => React.useState dispatch Function */ function UploadFileComponent({ setNewFile , setLoading }) { /** * Get Contexts * * @description { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @description Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @description { useState, useEffect, useRef, etc ... } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @description Main Function Return */ return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", { children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", { type: "file", name: "upload_file_input", id: "upload_file_input", className: "hidden", accept: ".xlsx,.pdf,.csv,.json", multiple: true, onChange: async (e)=>{ if (setLoading) setLoading(true); let fileInputsArray = []; let files = e.target.files; if (files?.length) { for(let i = 0; i < files.length; i++){ const file = files[i]; if (file.type?.match(/sheet/)) { const blobURL = URL.createObjectURL(file); console.log(blobURL); } else { const imageData = await (0,_functions_frontend_inputFileToBase64__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z)({ inputFile: file }); fileInputsArray.push(imageData); } } setNewFile(fileInputsArray); setTimeout(()=>{ if (setLoading) setLoading(false); }, 200); } else { window.alert("No Files selected"); } } }) }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /***/ }), /***/ 3770: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (/* binding */ UploadImageComponent) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _functions_frontend_imageInputFileToBase64__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6718); // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - React component props including { children } * @param {React.Dispatch>} props.setNewMedia - Set new Media Array * @param {React.Dispatch>} props.setLoading - Set Page loading => React.useState dispatch Function */ function UploadImageComponent({ setNewMedia , setLoading }) { /** * Get Contexts * * @description { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @description Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @description { useState, useEffect, useRef, etc ... } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @description Main Function Return */ return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", { children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", { type: "file", name: "upload_image_input", id: "upload_image_input", className: "hidden", accept: "image/*", multiple: true, onChange: async (e)=>{ if (setLoading) setLoading(true); let imagesInputsArray = []; let files = e.target.files; if (files?.length) { for(let i = 0; i < files.length; i++){ const file = files[i]; if (file.type?.match(/sheet/)) { const blobURL = URL.createObjectURL(file); console.log(blobURL); } else { const imageData = await (0,_functions_frontend_imageInputFileToBase64__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z)({ imageInputFile: file, maxWidth: 1800 }); imagesInputsArray.push(imageData); } } setNewMedia(imagesInputsArray); setTimeout(()=>{ if (setLoading) setLoading(false); }, 200); } else { window.alert("No Files selected"); } } }) }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /***/ }), /***/ 7525: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (/* binding */ UploadVideoComponent) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _functions_frontend_inputFileToBase64__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3314); // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - React component props including { children } * @param {React.Dispatch>} props.setNewVideo - Set files array => React.useState dispatch Function * @param {React.Dispatch>} props.setLoading - Set Page loading => React.useState dispatch Function */ function UploadVideoComponent({ setNewVideo , setLoading }) { /** * Get Contexts * * @description { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @description Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @description { useState, useEffect, useRef, etc ... } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @description Main Function Return */ return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", { children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", { type: "file", name: "upload_video_input", id: "upload_video_input", className: "hidden", accept: ".mp4", multiple: true, onChange: async (e)=>{ if (setLoading) setLoading(true); let fileInputsArray = []; let files = e.target.files; if (files?.length) { for(let i = 0; i < files.length; i++){ const file = files[i]; if (file.type?.match(/sheet/)) { const blobURL = URL.createObjectURL(file); console.log(blobURL); } else { const imageData = await (0,_functions_frontend_inputFileToBase64__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z)({ inputFile: file }); fileInputsArray.push(imageData); } } setNewVideo(fileInputsArray); setTimeout(()=>{ if (setLoading) setLoading(false); }, 200); } else { window.alert("No Videos selected"); } } }) }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /***/ }), /***/ 8826: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (/* binding */ downloadFile) /* harmony export */ }); /* harmony import */ var _downloadPrivateFile__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8436); // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Auth user on client side * ============================================================================== * @param {{ * mediaObject: import("@/package-shared/types").MYSQL_user_media_table_def, * fileName: string, * setLoading: React.Dispatch>, * }} params - params * * @requires search-field name attribute */ async function downloadFile({ mediaObject , fileName , setLoading , }) { /** * Check for user in local storage * * @description Preventdefault, declare variables */ if (setLoading) setLoading(true); /** @type {any} */ let file; const isPrivate = Boolean(mediaObject?.private || mediaObject?.media_url?.match(/^\@/)); if (isPrivate) { file = await (0,_downloadPrivateFile__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)({ url: mediaObject.media_url || "" }); } else { file = await fetch("/api/fetch-media?url=" + mediaObject.media_url || 0); } const blob = isPrivate ? file : await file.blob(); const downloadableUrl = isPrivate ? file : URL.createObjectURL(blob); const link = document.createElement("a"); link.href = downloadableUrl; link.download = fileName; link.style.display = "none"; document.body.appendChild(link); link.click(); URL.revokeObjectURL(downloadableUrl); document.body.removeChild(link); setTimeout(()=>{ if (setLoading) setLoading(false); }, 500); } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /***/ }), /***/ 8436: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (/* binding */ downloadPrivateFile) /* harmony export */ }); // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * Download private file function * ============================================================================== * @async * * @param {{ url: string }} params - params * * @returns {Promise} */ async function downloadPrivateFile({ url }) { /** * Check for user in local storage * * @description Preventdefault, declare variables */ return new Promise((resolve, reject)=>{ fetch("/api/media/getPrivateMedia", { method: "POST", body: JSON.stringify({ path: url }), // @ts-ignore headers: { "x-csrf-auth": localStorage.getItem("csrf") } }).then((res)=>res.blob()).then((data)=>{ const downloadableUrl = URL.createObjectURL(data); resolve(downloadableUrl); }); }); } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /***/ }) }; ;