2325 lines
121 KiB
JavaScript
2325 lines
121 KiB
JavaScript
"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__);
|
|
/* harmony import */ var _functions_frontend_inputFileToBase64__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3314);
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
|
|
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - React component props including { children }
|
|
* @param {React.Dispatch<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__);
|
|
/* harmony import */ var _functions_frontend_inputFileToBase64__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3314);
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
|
|
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - React component props including { children }
|
|
* @param {React.Dispatch<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);
|
|
});
|
|
});
|
|
} ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
|
|
|
|
/***/ })
|
|
|
|
};
|
|
; |