Moduletrace/dsql-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
7373c1d74e
dsql-admin/dsql-app/.local_dist/server/chunks/6390.js

2325 lines
121 KiB
JavaScript
Raw Normal View History

First Commit
2024-11-05 11:12:42 +00:00
"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<React.SetStateAction<boolean>>} 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<React.SetStateAction<any>>} 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<React.SetStateAction<any>>} 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<React.SetStateAction<MediaType[]>>} 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<React.SetStateAction<import("@/package-shared/types").FileObjectType[]>>} 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<React.SetStateAction<import("@/package-shared/types").ImageObjectType[] | null>>} props.setNewMedia
* @param {import("@/package-shared/types").FileObjectType[] | null} [props.newFile]
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").FileObjectType[] | null>>} props.setNewFile
* @param {import("@/package-shared/types").FileObjectType[] | null} [props.newVideo]
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").FileObjectType[] | null>>} 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<React.SetStateAction<import("@/package-shared/types").MYSQL_user_media_table_def | null>>} 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<HTMLImageElement>}
*/ // @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<React.SetStateAction<boolean>>} 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<React.SetStateAction<boolean>>} 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__);
Bug Fixes
2024-11-05 15:25:58 +00:00
/* harmony import */ var _functions_frontend_inputFileToBase64__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3314);
First Commit
2024-11-05 11:12:42 +00:00
// @ts-check
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - React component props including { children }
* @param {React.Dispatch<React.SetStateAction<any>>} props.setNewFile - Set files array => React.useState dispatch Function
* @param {React.Dispatch<React.SetStateAction<boolean>>} 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<React.SetStateAction<import("@/package-shared/types").ImageObjectType[] | null>>} props.setNewMedia - Set new Media Array
* @param {React.Dispatch<React.SetStateAction<boolean>>} 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__);
Bug Fixes
2024-11-05 15:25:58 +00:00
/* harmony import */ var _functions_frontend_inputFileToBase64__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3314);
First Commit
2024-11-05 11:12:42 +00:00
// @ts-check
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - React component props including { children }
* @param {React.Dispatch<React.SetStateAction<any>>} props.setNewVideo - Set files array => React.useState dispatch Function
* @param {React.Dispatch<React.SetStateAction<boolean>>} 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<React.SetStateAction<boolean>>,
* }} 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(mediaObject.media_url || "");
}
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<string>}
*/ 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);
});
});
} ////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/***/ })
};
;
Reference in New Issue Copy Permalink