@tycoonsystems/tycoon-modules/modules/admin/StorageAdmin.js

www.tv.tycoon.systems/documentation

import React from"react";import{debounce}from"../util";import{v4 as uuidv4}from"uuid";import Tooltip from"@mui/material/Tooltip";import PhotoCamera from"@mui/icons-material/PhotoCamera";import AdminStyles from"./Admin.module.scss";import{logout}from"@tycoonsystems/tycoon-modules/utility/onboarding/SignIn";import{fetchPost}from"@tycoonsystems/tycoon-modules/utility/fetch";import{selectThisText}from"@tycoonsystems/tycoon-modules/utility/utility/event";const allowedTypes=["image/jpeg","image/png","image/gif","image/svg+xml","image/webp","image/bmp","image/tiff"],moduleName="StreamAdmin",USE_OFFSET_INTERVAL=200,DO_SEARCH_DELAY=1500,DEFAULT_VIEW_IMAGE={location:"img/default/greythumb_product.jpg",internal:!0},Module=n=>{const[t,a]=React.useState(!1),[,l]=React.useState(null),[e,c]=React.useState(null),[i,o]=React.useState(null),[r,s]=React.useState([]),[m,u]=React.useState(""),[d,p]=React.useState(DEFAULT_VIEW_IMAGE),[g,f]=React.useState(0),y=React.useRef();var E=React.useRef();n._LocalEventEmitter.unsubscribe(moduleName),n._LocalEventEmitter.subscribe(moduleName,e=>{e&&"loadDefault"===e.dispatch&&R()}),React.useEffect(()=>{var e;t||(e=uuidv4(),l(e),R(),a(!0))},[t]);const R=async e=>{var t={domainKey:n.domainKey,hash:n._loggedIn.hash,identifier:n._loggedIn.identifier,directory:m,itemOffset:g*USE_OFFSET_INTERVAL},e=(void 0!==e&&(t.search=e),await fetchPost(n.apiUrl+"/a/getstoragefiles",null,null,t));return!!e&&(e.hasOwnProperty("status")?"disauthenticated"==e.status?(logout(),"disauthenticated"):"failed"!=e.status&&("success"==e.status?(e.contents&&(s(e.folders??[]),o(e.contents)),e):void 0):void 0)},h=React.useCallback(e=>{var t=e.currentTarget.getAttribute("modif"),e=e.currentTarget.getAttribute("usekey");t&&e&&b(e,t)});var v=React.useCallback(e=>{var t=m.match(/([^\/]+)\/$/);t&&t[1]&&(t=m.replace(t[1]+"/",""),u(t),setTimeout(()=>{n._LocalEventEmitter.dispatch(moduleName,{dispatch:"loadDefault"})},150))});const b=async(e,t)=>{let a=g,l=m;"goto"===t?(f(0),a=0,l=e,u(e)):"delete"===t&&(i={...d},i=Object.assign({},DEFAULT_VIEW_IMAGE),p(i));var i={domainKey:n.domainKey,hash:n._loggedIn.hash,identifier:n._loggedIn.identifier,key:e,modif:t,directory:l,itemOffset:a*USE_OFFSET_INTERVAL},e=await fetchPost(n.apiUrl+"/a/storagecrudupdate",null,null,i);return!!e&&(e.hasOwnProperty("status")?"disauthenticated"==e.status?(logout(),"disauthenticated"):"failed"!=e.status&&("success"==e.status?(e.contents&&(s(e.folders??[]),o(e.contents)),e):void 0):void 0)};var T=React.useCallback(e=>{e?.target?.getAttribute("modif")&&(e=e.target.getAttribute("modif"))&&"img"===e&&y?.current&&y.current.click()}),S=React.useCallback(l=>{try{if(console.log(l.target),c(null),l&&l.target&&l.target.files){var e=l.target.files;if(console.log(e),e&&0<e.length){const i=Array.from(e).slice(0,1<e.length?1:e.length).filter(e=>{e=e.type&&-1<allowedTypes.indexOf(e.type);return e||c("Some types that were uploaded were not allowed. Please check that you are uploading the appropriate types for any file upload"),e}).map(e=>{var t=e.name.split("."),a=t[0].replace(/\s/g,""),t=t.pop(),l=e.slice(0,e.size,e.type);return new File([l],a+"."+t,{type:e.type})});(async()=>{if(!n.fetchBusy&&n.apiUrl&&n.domainKey&&n._loggedIn){const a=new FormData;i&&i.forEach(e=>{a.append("file",e)});let e;var t;if(l?.target?.getAttribute("modif")&&(e=l.target.getAttribute("modif")),a.append("domainKey",n.domainKey),a.append("hash",n._loggedIn.hash),a.append("identifier",n._loggedIn.identifier),a.append("directory",m),a.append("modif",e),n.setFetchBusy&&(n.setFetchBusy(!0),setTimeout(()=>{n.setFetchBusy(!1)},3e4)),e&&"image"===e)return!!(t=await fetchPost(n.apiUrl+"/a/uploadfile",null,null,a,{formData:!0}))&&(t.hasOwnProperty("status")?"disauthenticated"==t.status?(logout(),"disauthenticated"):"failed"!=t.status&&("success"==t.status?(n.setFetchBusy(!1),setTimeout(()=>{n._LocalEventEmitter.dispatch(moduleName,{dispatch:"loadDefault"})},150),t):void 0):void 0)}})()}}}catch(e){console.log(e),setWarning({message:"There was an issue uploading images"})}});const k=React.useCallback(e=>{var t=e.currentTarget.getAttribute("scope");t&&(e=e.currentTarget.getAttribute("i"),"itemOffset"===t&&f(Number(e)),setTimeout(()=>{n._LocalEventEmitter.dispatch(moduleName,{dispatch:"loadDefault"})},150))});const A=React.useCallback(e=>{var t,a;e?.currentTarget?.getAttribute&&(t=e.currentTarget.getAttribute("useKey"))&&((a={...d}).location=`${n?.cdn?.static??""}/`+t,a.internal=!1,p(a),selectThisText(e))});var C=[g-2,g-1,g,g+1,g+2],N=React.useCallback(debounce(e=>{e?.target&&void 0!==(e=e.target.value)&&R(e)},DO_SEARCH_DELAY),[]);return console.log(i,r,n,m,d),React.createElement("div",{className:`${n.className} ${moduleName}_Container`},e?React.createElement("p",{className:"error",style:{marginTop:".5rem"},onClick:()=>{c(null)}},e):null,n?.vert?null:React.createElement("h3",null,"Storage"),React.createElement("div",{className:AdminStyles.containerTwoSmallRight+" "+(n?.vert?""+AdminStyles.vertView:null)},React.createElement("div",{className:moduleName+"_InternalContainer"},React.createElement("section",null,React.createElement(Tooltip,{title:`See Storage for ${n.siteTitle??"your Platform"} below`,placement:"bottom"},React.createElement("h4",null,"Files")),React.createElement("div",{className:AdminStyles.storageActionContainer+" flex gap-p2",style:{marginBottom:".25rem"}},""!==m?React.createElement(React.Fragment,null,React.createElement(Tooltip,{title:"Go back"},React.createElement("div",{className:"flex gap-p2 al-cen pointer "+AdminStyles.itemContainer,onClick:v,style:{width:"fit-content",fontWeight:"600"}},React.createElement("div",{className:"material-icons",style:{fontSize:"1rem"}},"arrow_back"),React.createElement("div",null,"back"))),React.createElement(Tooltip,{title:"Upload New File to this Directory"},React.createElement("button",{onClick:T,modif:"img"},"Upload New Image"))):null,React.createElement("input",{placeholder:"Search",ref:E,style:{borderRadius:"1rem",borderWidth:0,padding:".0rem .5rem"},onChange:N})),React.createElement("input",{type:"file",modif:"image",style:{display:"none"},ref:y,onChange:S}),React.createElement("div",{className:""+AdminStyles.listContainer,style:{maxHeight:n.vert?"200px":"65vh"}},r?.map?r.map((e,t)=>React.createElement("div",{className:AdminStyles.itemContainer+" pointer",key:t,modif:"goto",usekey:""+e.Prefix,onClick:h},React.createElement("div",null,e.Prefix),React.createElement("div",{className:"flex gap-p2"},React.createElement("button",{className:"material-icons",style:{fontSize:"1rem"}},"arrow_forward")))):null,i?.map?i.map((e,t)=>e.Key!==m?React.createElement("div",{className:""+AdminStyles.itemContainer,key:t},React.createElement("div",{className:""+(n?.vert?""+AdminStyles.shortened:null),selectValue:`${n?.cdn?.static??""}/`+e.Key,onClick:A,useKey:""+e.Key,style:{cursor:"pointer"}},e.Key),React.createElement("div",{className:"flex gap-p2"},React.createElement(Tooltip,{title:"Copy URL",placement:"left"},React.createElement("button",{className:"material-icons",modif:"copy_url",usekey:""+e.Key,selectValue:`${n?.cdn?.static??""}/`+e.Key,onClick:selectThisText,style:{fontSize:"1rem"}},"link")),React.createElement(Tooltip,{title:"Delete",placement:"left"},React.createElement("button",{className:"material-icons",modif:"delete",usekey:""+e.Key,onClick:h,style:{fontSize:"1rem"}},"delete")))):null):null),React.createElement("ul",{className:"PaginationContainer"},C.map((e,t)=>-1<e?React.createElement("li",{className:e==g?"ActivePage":"",scope:"itemOffset",key:t,i:e,onClick:k},e+1):null))),n?.vert?null:React.createElement("section",null,React.createElement("div",{className:"flex gap-p2"},React.createElement("div",null,"Platform Storage Status:"),React.createElement("div",null,"Good")),React.createElement("div",{className:"flex gap-p2"},React.createElement("div",null,"Platform Content Delivery Network Status:"),React.createElement("div",null,"Good")))),React.createElement("div",null,React.createElement("div",{style:{fontWeight:"600"}},"View"),React.createElement("div",null,React.createElement(Tooltip,{title:"Click to Copy URL"},React.createElement("img",{style:{backgroundImage:"url("+(d?.location??null),height:n.vert?"200px":"400px",width:"100%",backgroundSize:"contain",backgroundRepeat:"no-repeat",backgroundPosition:"center"},selectValue:""+(d?.location??null),onClick:selectThisText})),React.createElement("div",{style:{display:"flex"}},React.createElement("div",{className:"flex gap-p2 shareButton",selectValue:""+(d?.location??null),onClick:selectThisText},React.createElement(PhotoCamera,null),React.createElement("div",null,"Copy URL")))))))};export default Module;